@charset "utf-8";
/* 인크루트 스타일 상단 CSS */

/* 통일된 색상 팔레트 - 비즈니스 라이너 스타일 */
:root {
    /* 메인 색상 - 네이비 블루 중심 */
    --primary: #002D5B;           /* 메인 네이비 블루 */
    --primary-hover: #001A35;     /* 메인 네이비 블루 호버 */
    --primary-light: #E6EEF5;     /* 연한 블루 배경 */
    --primary-lighter: #F0F5FA;   /* 더 연한 블루 */
    --primary-dark: #001122;      /* 어두운 네이비 */
    
    /* 텍스트 색상 */
    --text-primary: #2C3E50;      /* 기본 텍스트 */
    --text-secondary: #5A6C7D;    /* 보조 텍스트 */
    --text-muted: #95A5A6;        /* 흐린 텍스트 */
    --text-light: #BDC3C7;        /* 밝은 텍스트 */
    
    /* 배경 색상 */
    --bg-white: #FFFFFF;          /* 흰색 배경 */
    --bg-light: #F8F9FA;          /* 밝은 배경 */
    --bg-lighter: #FBFCFD;        /* 더 밝은 배경 */
    --bg-dark: #2C3E50;           /* 어두운 배경 */
    --bg-darker: #1A252F;         /* 더 어두운 배경 */
    
    /* 테두리 색상 */
    --border-light: #E9ECEF;      /* 밝은 테두리 */
    --border-default: #DEE2E6;    /* 기본 테두리 */
    --border-dark: #CED4DA;       /* 어두운 테두리 */
    
    /* 시스템 색상 */
    --success: #27AE60;           /* 성공 */
    --info: #3498DB;              /* 정보 */
    --warning: #F39C12;           /* 경고 */
    --danger: #E74C3C;            /* 위험 */
    
    /* 그림자 - 최소화 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 6px rgba(0,0,0,0.08);
    
    /* 폰트 크기 */
    --font-size-base: 14px;
    --font-size-xs: 0.857rem;  /* 12px */
    --font-size-sm: 1rem;      /* 14px */
    --font-size-md: 1.143rem;  /* 16px */
    --font-size-lg: 1.286rem;  /* 18px */
    
    /* 모바일 폰트 크기 (약간 크게) */
    --mobile-font-size-xs: 0.929rem;  /* 13px */
    --mobile-font-size-sm: 1.071rem;  /* 15px */
    --mobile-font-size-md: 1.214rem;  /* 17px */
    --mobile-font-size-lg: 1.357rem;  /* 19px */
    
    /* 대체용 변수 (기존 코드 호환성) */
    --secondary: #2C3E50;
    --accent: #002D5B;
    --text-dark: #2C3E50;
    --border: #E9ECEF;
    --white: #FFFFFF;
    --dark: #2C3E50;
    --darker: #1A252F;
}

/* 상단 배너 - 비즈니스 라이너 스타일 */
#headTopBanner {
    position: relative;
    background: var(--primary-lighter);
    border-bottom: 1px solid var(--border-light);
}

#headTopBanner .banner-cnt {
    text-align: center;
    padding: 12px 0;
    position: relative;
}

#headTopBanner .banner-cnt a {
    color: var(--primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: -0.3px;
}

#headTopBanner .popupClose {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 18px;
}

/* 메인 헤더 - 비즈니스 라이너 스타일 */
#header {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    position: relative;
    z-index: 100;
}

/* 헤더 콘텐츠 컨테이너 */
.header_cnt {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
}

/* 로고 - 비즈니스 라이너 스타일 */
.logo {
    flex: 0 0 140px;
}

.logo .link {
    display: block;
    color: var(--primary);
    font-size: 26px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    letter-spacing: -0.5px;
    transition: opacity 0.15s;
}

.logo .link:hover {
    opacity: 0.8;
}

.logo .link span {
    display: inline-block;
}

/* 슬라이더 영역 (상하 배치) */
.cKeywordArea {
    flex: 1;
    display: flex;
    max-width: 100%;
    flex-direction: row;
    gap: 8px;
    min-width: 0;
}

/* 공통 슬라이더 스타일 */
.slider-box {
    height: 34px;
    width: 50%;
    background: var(--bg-white);
    border-radius: 2px;
    padding: 0 14px;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-default);
    transition: border-color 0.15s;
}

.slider-box:hover {
    background: var(--bg-white);
    border-color: var(--primary);
}

.slider-label {
    font-size: 10px;
    color: var(--bg-white);
    background: var(--primary);
    padding: 3px 8px;
    border-radius: 2px;
    margin-right: 10px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.slider-container {
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.slider-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.slider-item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.slider-item.active {
    opacity: 1;
    transform: translateX(0);
}

.slider-item.prev {
    transform: translateX(-100%);
}

.slider-item a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 12px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 6px;
}

.slider-item a:hover {
    color: var(--primary);
}

.slider-item .cRank {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: var(--primary);
    color: var(--bg-white);
    font-size: 10px;
    font-weight: 600;
    border-radius: 2px;
    flex-shrink: 0;
}

.slider-item .cRank_title {
    font-size: 12px;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slider-item .sub_info {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 2px 6px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
}

/* 검색 폼 - 비즈니스 라이너 스타일 */
.gnbSearchForm {
    flex: 0 0 400px;
    position: relative;
}

.gnbSearchForm #searchWrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-default);
    border-radius: 2px;
    background: var(--bg-white);
    overflow: hidden;
    transition: border-color 0.15s;
}

.gnbSearchForm #searchWrap:focus-within {
    border-color: var(--primary);
}

.gnbSearchForm legend {
    display: none;
}

.gnbSearchForm .ipt-search {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-size: var(--font-size-sm);
    background: transparent;
    outline: none;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.gnbSearchForm .ipt-search::placeholder {
    color: var(--text-muted);
}

.gnbSearchForm .btnSearch {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border: none;
    color: var(--bg-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}

.gnbSearchForm .btnSearch:hover {
    background: var(--primary-hover);
}

.gnbSearchForm .btnSearch span {
    display: none;
}

.gnbSearchForm .btnSearch::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="11" cy="11" r="8"%3E%3C/circle%3E%3Cpath d="m21 21-4.35-4.35"%3E%3C/path%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 자동완성 */
.autoCompletWrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border-default);
    border-top: none;
    border-radius: 0 0 2px 2px;
    box-shadow: var(--shadow-sm);
    display: none;
    z-index: 999;
}

/* 네비게이션 - 비즈니스 라이너 스타일 */
.cHeader_2024 {
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-default);
}

.cGnb-navWrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cGnb-navCnt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

/* 전체메뉴 버튼 */
.cAllMenu {
    position: relative;
}

.cBtnAllCategory {
    display: flex;
    align-items: center;
    padding: 15px 20px 15px 0;
    background: none;
    border: none;
    color: var(--text-dark);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.cBtnAllCategory::before {
    content: "☰";
    margin-right: 8px;
    font-size: 16px;
}

/* 메인 네비게이션 */
.cNav_list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cNav_list li {
    position: relative;
}

.cNav_list .btn-depth {
    display: block;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
    letter-spacing: -0.2px;
    position: relative;
}

.cNav_list .btn-depth:hover,
.cNav_list li.on .btn-depth {
    color: var(--primary);
}

.cNav_list .btn-depth::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.15s;
}

.cNav_list .btn-depth:hover::after,
.cNav_list li.on .btn-depth::after {
    width: 100%;
}

/* 사용자 메뉴 */
.cGnb_utilList {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cGnb_utilList li {
    position: relative;
}

.cGnb_utilList .cLink {
    display: block;
    padding: 16px 14px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

.cGnb_utilList .cLink:hover {
    color: var(--primary);
}

.cGnb_utilList .linkBtn_gray {
    background: var(--bg-white);
    border: 1px solid var(--border-default);
    border-radius: 2px;
    color: var(--text-primary);
    font-weight: 600;
    transition: all 0.15s;
}

.cGnb_utilList .spaceLine::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: #ddd;
}

/* 사용자 유형별 유틸리티 메뉴 스타일 */
.cGnb_utilList .admin-link {
    background: var(--danger);
    border-radius: 2px;
    color: var(--bg-white) !important;
    font-weight: 600;
    padding: 8px 16px;
}

.cGnb_utilList .admin-link:hover {
    background: #C0392B;
    transform: none;
}

.cGnb_utilList .company-link {
    background: var(--text-secondary);
    border-radius: 2px;
    color: var(--bg-white) !important;
    font-weight: 600;
    padding: 8px 16px;
}

.cGnb_utilList .company-link:hover {
    background: var(--text-primary);
    transform: none;
}

.cGnb_utilList .personal-link {
    background: var(--primary);
    border-radius: 2px;
    color: var(--bg-white) !important;
    font-weight: 600;
    padding: 8px 16px;
}

.cGnb_utilList .personal-link:hover {
    background: var(--primary-hover);
    transform: none;
}

.cGnb_utilList .cLink i {
    margin-right: 4px;
    font-size: 12px;
}

.cGnb_utilList .linkBtn_gray {
    background: var(--bg-white);
    border: 1px solid var(--border-default);
    border-radius: 2px;
    color: var(--text-primary);
    font-weight: 600;
    transition: all 0.15s;
}

.cGnb_utilList .linkBtn_gray:hover {
    background: var(--bg-light);
    border-color: var(--primary);
    color: var(--primary);
    transform: none;
}

/* 메뉴 리스트 항목 기본 설정 */
.cNav_list li {
    position: relative; /* 서브메뉴 기준점 설정 */
}

/* 서브메뉴 컨테이너 스타일 */
div.gnb_2da {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bg-white);
    border: 1px solid var(--border-default);
    border-top: none;
    box-shadow: var(--shadow-sm);
    border-radius: 0 0 2px 2px;
    display: none;
    z-index: 9999;
}

/* 호버 시 서브메뉴 표시 */
.cNav_list li:hover > div.gnb_2da {
    display: block;
}

/* 서브메뉴 항목 호버 유지 */
div.gnb_2da:hover {
    display: block;
}

.gnb_2dul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
}

.gnb_2dli {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    position: static !important;
    width: 100%;
    float: none !important;
    clear: both !important;
}

.gnb_2dli a {
    display: block !important;
    padding: 12px 20px !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-size: var(--font-size-xs) !important;
    border-bottom: 1px solid var(--border-light) !important;
    transition: all 0.15s !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-weight: 400;
}

.gnb_2dli a:hover {
    background: var(--bg-light) !important;
    color: var(--primary) !important;
    padding-left: 24px !important;
}

.gnb_2dli:last-child a {
    border-bottom: none !important;
}

/* 딤 레이어 */
.cDimLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 90;
    display: none;
}

/* 서브 배너 */
.bn_cover_wrap {
    background: var(--primary);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
}

.sub_banner_cover .headTop_banner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bn_flex {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
}
.bn_flex:hover {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

.bn_flex img {
    margin-right: 12px;
    border-radius: 50%;
}

.banner_txt_box .txt_first {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.banner_txt_box .txt_last {
    display: block;
    font-size: 12px;
    opacity: 0.9;
}

/* 숨김 및 접근성 요소 */
#hd_h1 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    width: 1px;
    height: 1px;
}

span.bg {
    display: none;
}

#skip_to_container a {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skip_to_container a:focus, 
#skip_to_container a:active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--primary);
    color: var(--white);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
    z-index: 10000;
    text-decoration: none;
}

/* 서브페이지 비주얼 */
#sub_visual {
    background: var(--bg-light);
    padding: 50px 0;
    text-align: center;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-default);
}

#page_title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.8px;
    color: var(--primary);
}

/* 전체 메뉴 카테고리 (숨김 처리) */
.cAllCategory {
    display: none;
}

/* 반응형 - 태블릿 */
@media (max-width: 1200px) {
    .header_cnt {
        padding: 12px 15px;
        gap: 20px;
    }
    
    .logo {
        flex: 0 0;
    }
    
    .logo .link {
        font-size: 20px;
    }
    
    .gnbSearchForm {
        flex: 0 0 300px;
    }
    
    .slider-box {
        height: 30px;
        padding: 0 10px;
    }
    
    .slider-label {
        font-size: 9px;
        padding: 1px 5px;
    }
    
    .slider-item .cRank_title {
        font-size: 11px;
    }
    
    .cGnb-navCnt {
        padding: 0 15px;
    }
    
    .cNav_list .btn-depth {
        padding: 15px 18px;
        font-size: 14px;
    }
}

/* 반응형 - 모바일 */
@media (max-width: 991px) {
    .header_cnt {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
        justify-self: center;
        text-align: center;
    }
    
    .logo {
        align-self: flex-center;
    }
    
    .gnbSearchForm {
        max-width: 100%;
        flex: none;
    }
    
    .cKeywordArea {
        flex-direction: column;
        width: 100%;
        gap: 6px;
    }
    
    .slider-box {
        width: 100%;
        height: 28px;
        padding: 0 8px;
    }
    
    .slider-label {
        font-size: 8px;
        padding: 1px 4px;
        margin-right: 6px;
    }
    
    .slider-item .cRank {
        width: 14px;
        height: 14px;
        line-height: 14px;
        font-size: 8px;
    }
    
    .slider-item .cRank_title {
        font-size: 10px;
    }
    
    .slider-item .sub_info {
        font-size: 9px;
        padding: 0px 4px;
    }
    
    .cGnb-navCnt {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }
    
    .cNav_list {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 10px;
    }
    
    .cNav_list .btn-depth {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .cGnb_utilList {
        justify-content: center;
    }
    
    .cGnb_utilList .cLink {
        padding: 10px 8px;
        font-size: 12px;
    }
}

/* 반응형 - 소형 모바일 */
@media (max-width: 767px) {
    #headTopBanner .banner-cnt {
        padding: 8px 0;
        font-size: 12px;
    }
    
    .header_cnt {
        padding: 10px;
        gap: 12px;
    }
    
    .logo .link {
        font-size: 18px;
    }
    
    .slider-box {
        width: 100%;
        height: 26px;
        padding: 0 8px;
    }
    
    .slider-label {
        line-height: 10px;
        font-size: 10px;
        padding: 3px 6px;
        /* border-radius: 5px; */
    }
    
    .slider-item a {
        font-size: 10px;
        gap: 4px;
    }
    
    .slider-item .cRank {
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 10px;
    }
    
    .slider-item .cRank_title {
        font-size: 10px;
    }
    
    .slider-item .sub_info {
        font-size: 8px;
        padding: 0px 3px;
    }
    
    .gnbSearchForm .ipt-search {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    .gnbSearchForm .btnSearch {
        width: 40px;
        height: 40px;
    }
    
    .cNav_list .btn-depth {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .bn_cover_wrap {
        padding: 8px 0;
    }
    
    .banner_txt_box .txt_first {
        font-size: 12px;
    }
    
    .banner_txt_box .txt_last {
        font-size: 11px;
    }
    
    #sub_visual {
        padding: 25px 0;
    }
    
    #page_title {
        font-size: 20px;
    }
}

/* 쪽지 알림 스타일 */
.memo-notification .memo-link span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}

.memo-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger);
    color: var(--bg-white);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 2px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    z-index: 10;
}

/* 알림 아이콘 스타일 */
.memo-link .fa-bell {
    color: var(--primary);
    font-size: 16px;
}

.memo-link:hover .fa-bell {
    animation: bellShake 0.5s ease-in-out;
}

@keyframes bellShake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
    20%, 40%, 60%, 80% { transform: rotate(10deg); }
}

/* 프린트 스타일 */
@media print {
    #headTopBanner,
    .cHeader_2024,
    .bn_cover_wrap {
        display: none;
    }
    
    #header {
        border-bottom: 1px solid var(--border-default);
    }
}