@charset "utf-8"; /* CSS Document */
/* ==================== 서브 페이지 최상단 비주얼 섹션 (가독성 최종 강화) ==================== */
#sub_page_visual {
    padding: calc(var(--sec_pd) / 1.1) 0;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-top: 146px;
    transition: margin-top var(--q_trans);

    /* 배경 고정 및 기본 설정 */
    background-attachment: fixed;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #1e252d;
    z-index: 1;
}

/* [중요] 암막 오버레이 레이어 - z-index를 2로 고정 */
#sub_page_visual::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0, 78, 102, 0.2) 0%, rgba(9, 30, 102, 0.5) 100%), linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    z-index: 2;
}

/* [핵심 수정] 실제 사용 중인 .sec_tit 클래스 가독성 설정 */
#sub_page_visual .sec_tit {
    position: relative;
    z-index: 5;
    color: #ffffff !important;
    letter-spacing: -0.05em;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8), 0 0 30px rgba(0,0,0,0.4);
}

/* 타이틀 태그 상세 스타일 */
#sub_page_visual .sec_tit h2 {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 배경 이미지 5종 (기존 유지) */
#sub_page_visual.visual_prod { background-image: url('../images/visual_prod.jpg'); }
#sub_page_visual.visual_brand { background-image: url('../images/visual_brand.jpg'); }
#sub_page_visual.visual_trial { background-image: url('../images/visual_trial.jpg'); }
#sub_page_visual.visual_board { background-image: url('../images/visual_board.jpg'); }
#sub_page_visual.visual_gallery { background-image: url('../images/visual_gallery.jpg'); }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}



/* 스크롤 시 헤더가 줄어들 때 비주얼 위치 조정 */
body.header_fixed #sub_page_visual {
    margin-top: 65px;
}
body.header_fixed {
    padding-top: 0 !important; /* body에 별도 패딩이 있다면 이걸로 무효화 */
}
/* 페이지 네비게이션 (탭 메뉴 영역) */
#sub_nav {
    padding: 0;
    border-bottom: 1px solid var(--gray_e5);
    background-color: var(--gray_f8);
    width: 100%;

    /* [추가] 스티키 고정 설정 */
    position: -webkit-sticky; /* 사파리 대응 */
    position: sticky;
    top: 146px; /* 기본 상태: 헤더 1단(81px) + 2단(65px) 높이 */
    z-index: 990; /* 헤더(1000)보다는 낮게 설정 */
    transition: top var(--q_trans); /* 헤더 변화 속도와 맞춤 */
}

/* [추가] 스크롤 시 헤더가 줄어들 때 서브 네비 위치 조정 */
body.header_fixed #sub_nav {
    top: 65px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
/* 탭 부모 컨테이너 */
.sub_menu_tabs {
    align-items: stretch; /* 자식 a태그들이 부모 높이를 꽉 채우도록 */
}

/* 개별 메뉴 버튼 (커튼/탭 스타일) */
.sub_menu_tabs a {
    display: flex;
    align-items: center;
    justify-content: center;

    /* [핵심] 상하 패딩으로 글자 위치를 수직 중앙으로 잡고 탭의 두께를 결정합니다 */
    padding: 22px 45px;

    font-size: 1rem;
    font-weight: 500;
    color: var(--gray_3);
    position: relative;
    transition: all var(--q_trans);
    border-right: 1px solid rgba(0,0,0,0.05);
}

/* 첫 번째 메뉴 왼쪽 구분선 */
.sub_menu_tabs a:first-child {
    border-left: 1px solid rgba(0,0,0,0.05);
}

/* 하단 커튼 라인 (After 효과) */
.sub_menu_tabs a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--point);
    transition: width 0.3s ease;
}
/* 1. 호버 상태 (일반 메뉴에 마우스 올렸을 때) */
.sub_menu_tabs a:hover {
    font-weight: 700;
    color: var(--point);
    background-color: var(--white);
}
.sub_menu_tabs a:hover::after {
    width: 100%;
}

/* 2. 활성 상태 (navOn - 현재 페이지) */
.sub_menu_tabs a.navOn {
    font-weight: 700;
    color: var(--dark_point) !important; /* navOn 색상 고정 */
    background-color: var(--white);
}
.sub_menu_tabs a.navOn::after {
    width: 100%;
    background-color: var(--dark_point); /* 라인 색상도 다르게 */
}

/* 1. 고정 상태에서 탭 메뉴 글꼴 및 패딩 축소 */
body.header_fixed .sub_menu_tabs a {
    padding: 15px 35px; /* 기존 22px 45px -> 축소 */
    font-size: .95rem;    /* 기존 1.15rem -> 축소 */
}

/* 2. 고정 상태에서 하단 포인트 바(After) 두께 조정 (선택 사항) */
body.header_fixed .sub_menu_tabs a::after {
    height: 3px; /* 기존 4px -> 3px로 더 얇게 */
}

/* 3. 애니메이션을 부드럽게 유지하기 위해 기존 스타일 확인 */
.sub_menu_tabs a {
    /* ...기존 속성들... */
    transition: all var(--q_trans); /* 이미 transition이 있으므로 부드럽게 변합니다 */
}


/* 페이지 내용 영역 */
#sub_page_content, #board_page_content {
    padding: calc(var(--sec_pd) / 2) 0 var(--sec_pd);
    min-height: 300px;
}
.sub_content_head {
    margin-bottom: 20px; /* 타이틀 영역 전체 하단 마진 */
}
.sub_content_head h3{
    margin-bottom: calc(var(--sec_pd) / 3); /* 타이틀 영역 전체 하단 마진 */
    line-height: 1.3;
}
/* 서브 텍스트 애니메이션 조정 */
#sub_page_visual .sec_tit {
    padding: 0 20px;
    z-index: 2;
}
.benefit_notice_box {
    display: inline-block; /* 내용만큼만 박스 크기 잡기 (중앙 정렬용) */
    width: 100%;
    max-width: 800px; /* 너무 퍼지지 않게 제한 */
    margin-top: 20px;
    background-color: var(--gray_9); /* 아까 설정한 아주 연한 가이드 텍스트 색상 */
    border: 1px solid var(--gray_8);
    transition: all 0.3s ease;
}

.benefit_notice_box:hover {
    border-color: var(--gray_6); /* 살짝 마우스 올렸을 때 반응 */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* ==================== 태블릿 및 모바일 통합 대응 (1100px 이하) ==================== */
@media screen and (max-width: 1100px) {
    /* 1. 비주얼 섹션 조정 */
    #sub_page_visual {
        margin-top: 60px; /* 모바일 헤더 높이에 맞춤 */
        padding: 120px 0; /* PC보다 상하 여백을 줄여서 이미지 노출 면적 조절 */
        background-attachment: scroll; /* 모바일 배터리 소모 및 버그 방지 (필수) */
        background-size: cover;
        background-position: center center;
    }

    /* 2. 타이틀 크기 조정 */
    #sub_page_visual .sec_tit h2 {
        font-size: 2.2rem !important; /* 2.5rem보다 살짝 더 줄여야 한 줄에 예쁘게 나옵니다 */
        word-break: keep-all; /* 단어 단위로 줄바꿈되어 가독성 향상 */
    }

    /* 3. 서브 네비게이션(탭 메뉴) 조정 */
    #sub_nav {
        top: 60px; /* 스티키 고정 위치를 모바일 헤더 높이에 맞춤 */
    }

    .sub_menu_tabs a {
        padding: 15px 15px; /* 좌우 간격을 더 줄여서 메뉴가 넘치는 것 방지 */
        font-size: 0.95rem; /* 글자 크기 미세 조정 */
        letter-spacing: -0.05em; /* 자간을 좁혀 공간 확보 */
    }
}

/* 스마트폰 전용 추가 조정 (600px 이하) */
@media screen and (max-width: 600px) {
    #sub_page_visual {
        padding: 100px 0; /* 더 작은 화면에서는 높이를 더 축소 */
    }
    #sub_page_visual .sec_tit h2 {
        font-size: 1.8rem !important;
    }
    .sub_menu_tabs a {
        padding: 12px 15px;
        font-size: 1rem;
    }

    .benefit_notice_box { padding: 20px 15px !important; }
    .m_only { display: block; }
}