@charset "utf-8";

/* ==========================================
   1. 프리텐다드 폰트 호출 및 전체 강제 적용
   ========================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body, #kso-header, .navbar-nav, .dropdown-menu, .dropdown-menu li a, .sub_nav a { 
    font-family: 'Pretendard', sans-serif !important; 
}


/* ==========================================
   2. 상단 모든 종류의 선(Border) 및 그림자 강제 제거
   ========================================== */
#kso-header, 
#kso-header .header-bar,
#kso-header .navbar,
#kso-header .header-bar .navbar-nav li span,
#kso-header .navbar .navbar-nav > li > a {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}


/* ==========================================
   3. 상단 헤더 박스 슬림 두께 및 다크 네이비 차콜 반투명 배경
   ========================================== */
#kso-header {
    position: absolute !important;
    top: 0 !important;
    height: auto !important;
    min-height: 70px !important;       
    background-color: rgba(28, 33, 43, 0.88) !important; /* 화이트 글씨가 극대화되는 고급 배경색 */
    display: block !important;
}

#kso-header .header-bar,
#kso-header .navbar,
#kso-header .container {
    height: auto !important;
    min-height: 70px !important;       
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 2px !important;       
    padding-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;    
    overflow: visible !important;
}

/* 1차 메뉴 전체 레이아웃 (우측 정렬 고정) */
#kso-header .navbar .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    list-style: none !important;
    white-space: nowrap !important;
}

/* 1차 메뉴 텍스트 스타일 */
#kso-header .navbar .navbar-nav > li > a {
    font-size: 19px !important;         
    font-weight: 700 !important;         
    color: #ffffff !important;         
    padding: 12px 14px !important;      
    line-height: 1.2 !important;
    display: block !important;
    background: transparent !important;
    text-transform: none !important;
    transition: color 0.3s ease;
    white-space: nowrap !important;
}

#kso-header .navbar .navbar-nav > li:hover > a {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* ==========================================
   4. 세로형 드롭다운 2차 메뉴 박스 (좌측 기준점 원복)
   ========================================== */
#kso-header .navbar-nav > li { 
    position: relative !important; 
}

/* 1차 메뉴와 세로 드롭다운 박스 사이의 공백 마우스 무빙 브릿지 */
#kso-header .navbar-nav > li::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px; 
    display: block;
    z-index: 998;
}

/* 정갈하게 툭 떨어지는 화이트 라운드 박스 (좌측 정렬 구조 고정) */
#kso-header .navbar-nav > li .dropdown-menu {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute;
    top: 100%; 
    left: 0 !important;                 /* [수정] 중앙 정렬을 해제하고 원본 좌측 시작점으로 고정 */
    transform: translateY(10px);        
    
    min-width: 190px;                   /* 아이콘 여백을 고려해 안정적인 가로폭 설정 */
    padding: 12px 0 !important;         
    margin: 0;
    background-color: #ffffff !important; 
    border: none !important;
    border-radius: 8px !important;      
    box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important; 
    list-style: none;
    
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s !important;
    transition-delay: 0s !important; 
    z-index: 999;
}

/* 마우스를 올렸을 때 정아래로 노출 */
#kso-header .navbar-nav > li:hover .dropdown-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
}

/* 다른 메뉴로 마우스가 이탈하는 순간 잔상을 한 치의 오차 없이 즉시 강제 차단 */
#kso-header .navbar-nav > li:not(:hover) .dropdown-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition-delay: 0s !important;
}


/* ==========================================
   5. 세로 메뉴 내부 스타일 (18px / 일반 두께 / 좌측 정렬 / 아이콘 바 교정)
   ========================================= */
#kso-header .navbar-nav .dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    background: none !important;
    margin: 0 !important;               
}

#kso-header .navbar-nav .dropdown-menu > li > a {
    display: block !important;
    padding: 10px 15px 10px 28px !important;  /* [수정] 왼쪽에 아이콘 바가 들어갈 안정적인 좌측 여백 확보 */
    font-size: 18px !important;             /* 크기 18px */
    font-weight: 500 !important;             /* 단정한 일반 두께 */
    color: #444444 !important;          
    text-decoration: none !important;
    text-align: left !important;            /* [수정] 글자 정렬을 정갈한 왼쪽 정렬로 원복 */
    position: relative !important;          
    background: none !important;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

/* [수정 반영] 18px 일반 두께 서체 구도에 완벽하게 어울리는 미니 블루 아이콘 바 */
#kso-header .navbar-nav .dropdown-menu > li > a::before {
    display: block !important;
    content: "";
    position: absolute;
    left: 14px;                             /* 좌측 정렬 글자 시작점 왼쪽 배치 */
    top: 50%;
    transform: translateY(-50%);
    width: 3.5px;                           /* 깔끔한 세로바 두께 */
    height: 11px;                           /* 평소 세로 바 높이 */
    background-color: #007bff;              /* 포인트 스마트 블루 */
    border-radius: 2px;
    transition: all 0.2s ease-in-out; 
}

/* 호버 시 배경색 및 글자색 변환 */
#kso-header .navbar-nav .dropdown-menu > li > a:hover {
    background-color: #f4f7ff !important;   /* 소프트한 블루 틴트 배경 */
    color: #007bff !important;              /* 텍스트 블루 전환 */
    padding-left: 32px !important;          /* 마우스를 올렸을 때 오른쪽으로 살짝 밀려나는 세련된 모션 */
}

/* 마우스를 올렸을 때 세로 아이콘 바가 역동적으로 확장되는 애니메이션 */
#kso-header .navbar-nav .dropdown-menu > li > a:hover::before {
    height: 20px;                           /* 호버 시 글자 높이에 맞춰 길어짐 */
    background-color: #0056b3;              /* 조금 더 짙은 강조 블루로 변환 */
    left: 16px;                             /* 글자 밀림에 자연스럽게 동기화 */
}


/* ==========================================
   6. [서브 페이지] 왼쪽 메뉴 타이틀
   ========================================== */
#kso-content-wrap .aside .aside-title, 
#kso-content-wrap .aside .side-title {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #222 !important;
    margin-bottom: 20px !important;
    padding: 5px 0 5px 15px !important;
    line-height: 1.2 !important;
    position: relative !important;
    border-bottom: none !important;
}

#kso-content-wrap .aside .aside-title::before,
#kso-content-wrap .aside .side-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 70%;
    background-color: #007bff;
    border-radius: 2px;
}


/* ==========================================
   7. [서브 페이지] 왼쪽 메뉴 리스트 및 하위 펼침 (애니메이션 버전)
   ========================================== */
#kso-content-wrap .sub_nav li {
    list-style: none;
    position: relative;
}

#kso-content-wrap .sub_nav a.list-group-item {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #555 !important;
    padding: 12px 15px 12px 25px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: block !important;
    background: #fff !important;
    transition: all 0.3s ease-in-out;
    text-decoration: none !important;
}

#kso-content-wrap .sub_nav li ul {
    display: block !important; 
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    margin: 0;
    background: #fcfcfc;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
    transition-delay: 0.1s; 
}

#kso-content-wrap .sub_nav li:hover > ul {
    max-height: 500px; 
    opacity: 1;
    transition-delay: 0s; 
}

#kso-content-wrap .sub_nav li ul li a {
    padding: 10px 15px 10px 40px !important;
    font-size: 16px !important;
    color: #777 !important;
    border-bottom: 1px solid #f9f9f9 !important;
    display: block !important;
    transition: all 0.2s;
}

#kso-content-wrap .sub_nav li ul li a:hover {
    background-color: #f0f5ff !important;
    color: #007bff !important;
}

#kso-content-wrap .sub_nav a.list-group-item:hover,
#kso-content-wrap .sub_nav li.on > a {
    background-color: #f9fbff !important;
    color: #007bff !important;
    padding-left: 30px !important;
}


/* ==========================================
   8. 기타 원본 스타일 유지
   ========================================= */
.section1 {padding-top: 30px; padding-bottom: 10px;} 
.section2 {padding-top: 40px; padding-bottom: 20px;} 
.section3 {padding-top: 60px; padding-bottom: 60px;} 
#kso-footer, #kso-copyright {background-color:#f2f2f2;}


/* ==========================================
   9. [현대식 티저 그리드 스타일]
   ========================================== */
.modern-teaser { padding: 0 !important; overflow: hidden; }
.teaser-box { padding: 0 !important; position: relative; overflow: hidden; height: 300px; }
.image-holder { width: 100%; height: 100%; position: relative; transition: transform 0.5s ease; }
.image-holder img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.teaser-box:hover .image-holder img { transform: scale(1.1); }
.teaser-box .overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; text-align: center; }
.teaser-box .overlay h4 { margin: 0; font-size: 20px; font-weight: 700; font-family: 'Pretendard', sans-serif !important; }
@media (max-width: 767px) { .teaser-box { height: 200px; } }

/* ==========================================
   10. 모바일 환경(767px 이하) 메뉴 활성화 및 복구
   ========================================== */
@media (max-width: 767px) {
    /* 기본 레이아웃에서 숨겨진 모바일 삼선(☰) 메뉴 버튼 강제 표시 */
    #header .menu-button {
        display: block !important;
    }

    /* 모바일 전용 헤더 바 표시 및 텍스트 중앙 정렬 */
    #header {
        display: block !important;
    }

    /* PC용 헤더가 모바일 화면을 가리거나 간섭하지 않도록 숨김 */
    #kso-container #kso-header {
        display: none !important;
    }

    /* mmenu 플러그인 작동 시 메뉴 글자색이 묻히지 않도록 흰색 고정 */
    #menu, #menu * {
        font-family: 'Pretendard', sans-serif !important;
    }
    #menu li a {
        color: #ffffff !important; 
    }
}