@charset "utf-8";

/* ==========================================================================
   닉네임 옆 쪽지 아이콘 + 안읽음 뱃지
   ========================================================================== */
.memo-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
    color: #555;
    text-decoration: none;
    flex-shrink: 0;
}
.memo-icon-link:hover { color: #d23c3c; }
.memo-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    background: #d23c3c;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    min-width: 13px;
    height: 13px;
    line-height: 13px;
    text-align: center;
    border-radius: 7px;
    padding: 0 2px;
}

/* ==========================================================================
   빠른 검색 영역 (지역별 / 업종별 / 테마별)
   - 기존 main_top.php의 인라인 스타일에서 분리한 CSS 입니다.
   ========================================================================== */
 
 
/* ====================================================
   1. 각 칸의 헤더 영역 (제목 + 화살표)
   ==================================================== */
 
/* 각 칸의 공통 정렬 (qs_col은 main_custom.css에 기본 스타일이 있다면 그대로 사용됨) */
.quick_search_wrap .qs_col {
    text-align: center;
    overflow: hidden;   /* 추가 - 슬라이드 페이지가 밖으로 삐져나오는 것 방지 */
    min-width: 0;       /* 추가 - flex 자식이 수축될 수 있도록 허용 */
}
 
/* 헤더 (지역별/업종별/테마별 제목 영역) */
.quick_search_wrap .qs_header {
    margin-bottom: 10px;
}
 
.quick_search_wrap .qs_header h2,
.quick_search_wrap .qs_header h3 {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin: 0;
    padding: 0;
}
 
/* 화살표가 들어가는 헤더 (업종별/테마별)
   - position: relative로 화살표의 absolute 위치 기준을 만듦 */
.quick_search_wrap .qs_header_with_arrows {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
 
 
/* ====================================================
   2. 화살표 버튼 영역
   ==================================================== */
 
/* 화살표 컨테이너
   - 기본은 숨김 (display: none)
   - JS에서 12개 초과 시 display: flex 로 보여줌 */
.quick_search_wrap .qs_nav_arrows {
    display: none;
    margin-left: auto;
    gap: 5px;
}
 
/* 화살표 버튼 ◀ ▶ */
.quick_search_wrap .qs_arrow_btn {
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
}
 
.quick_search_wrap .qs_arrow_btn:hover {
    background: #f5f5f5;
}
 
 
/* ====================================================
   3. 리스트 영역 (실제 메뉴 목록)
   ==================================================== */
 
/* 지역별 - 5칸 그리드 */
.quick_search_wrap .qs_list_grid_5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px 10px;
    text-align: center;
    padding: 0 10px;
}

/* 업종별/테마별 - 가로 스크롤 슬라이드 영역
   [중요] flex-wrap: nowrap → 줄바꿈 방지 (옆으로 늘어남)
   [중요] overflow-x: hidden → 넘치는 부분 잘라냄 (스크롤바 안 보임)
   width/max-width: 100% → 부모 칸 너비를 절대 안 넘게 */
.quick_search_wrap .qs_scroll_list {
    display: flex;
    flex-wrap: nowrap;
	overflow-x: auto;   /* hidden → auto 로 변경 */
    overflow-y: hidden;
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
}
 
/* 스크롤바 숨김 (Chrome, Safari, Edge) */
.quick_search_wrap .qs_scroll_list::-webkit-scrollbar {
    display: none;
}
 
/* 스크롤바 숨김 (IE, Firefox) */
.quick_search_wrap .qs_scroll_list {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
 
/* 슬라이드 한 페이지 (12개씩 묶인 단위)
   - min-width: 100% → 부모 영역을 가득 채움 (한 페이지가 한 화면)
   - flex-shrink: 0 → 줄어들지 않음 (옆으로 늘어남) */
.quick_search_wrap .qs_slide_page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px 10px;
    min-width: 100%;
    flex-shrink: 0;
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
	align-content: start;
}
 
 
/* ====================================================
   4. 개별 메뉴 항목 (a 태그)
   ==================================================== */
 
/* 지역/업종/테마 메뉴 링크 공통 스타일 */
.quick_search_wrap .qs_item {
    text-decoration: none;
    color: #333;
    display: block;
}
 
.quick_search_wrap .qs_item:hover {
    color: #ff0000;
}
 
 
/* ====================================================
   5. 중앙 배너가 비었을 때의 안내 문구
   ==================================================== */
.empty_center_banner .empty_center_banner_txt {
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 50px 0;
}
 
 .lat_date {
    font-size: 11px;
	color: #8a39d8;     /* 보라색으로 변경 */
    font-family: tahoma, sans-serif;
    
}

/* =============================================
   회원 프로필 카드 (profile_card__~)
   2026-05-28
   ============================================= */
.profile_card {
    padding: 0;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
}

/* 배지 줄 */
.profile_card__badge_row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}
.profile_card__badge {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}
.profile_card__badge--admin {
    color: #009000;
    font-weight: 700;
}

/* 인증 상태 배지 */
.profile_card__auth {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 10px;
    line-height: 1.4;
}
.profile_card__auth--ok   { background: #e7f5ec; color: #1c7c3a; }
.profile_card__auth--wait { background: #fff3cd; color: #b08800; }
.profile_card__auth--no   { background: #f0f0f0; color: #888; }

/* 닉네임 */
.profile_card__nick {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
    word-break: break-all;
}

/* 메인 버튼 카운트 숫자 */
.profile_card__cnt {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
}

/* 통계 줄 (관리자용) */
.profile_card__stat_row {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: #555;
    background: #f9f9f9;
    border-radius: 4px;
    padding: 8px 4px;
    margin-bottom: 6px;
}

/* 좌우 2분할 버튼 줄 */
.profile_card__row2 {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

/* 일반 버튼 */
.profile_card__btn {
    flex: 1;
    display: block;
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.15s ease;
}
.profile_card__btn:hover {
    border-color: #28a745;
    color: #28a745;
}

/* 메인 버튼 (초록) */
.profile_card__main {
    display: block;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #28a745;
    border: 1px solid #28a745;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 6px;
    transition: all 0.15s ease;
}
.profile_card__main:hover {
    background: #218838;
    color: #fff;
}

/* 비회원 안내 */
.profile_card__guest_msg {
    text-align: center;
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    padding: 20px 0 20px;
}
.profile_card__guest_msg small {
    color: #888;
    font-size: 12px;
}

/* 로그인 초록 버튼 */
.profile_card__btn--green {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
    font-weight: 700;
}
.profile_card__btn--green:hover {
    background: #218838;
    border-color: #218838;
    color: #fff;
}

/* =============================================
   회원 프로필 영역 (Group_B_top 스타일)
   2026-05-28
   ============================================= */

/* 기존 것 덮어쓰기 */
.col_profile {
    width: 200px; 
    padding: 0 !important;        /* 15px → 0 으로 변경 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 170px !important;    /* main_top_wrap 높이에 맞춤 */
    overflow-y: hidden !important; /* 내용이 넘치면 스크롤 */
    overflow-x: hidden !important;
}

.box_border {
    border: 1px solid #ddd;
    background: #fff;
    box-sizing: border-box;
    overflow: visible !important;
}

/* 프로필 카드 전체 박스 */
.Group_B_top {
    padding: 8px 10px; 
    box-sizing: border-box;
    width: 100%;
    height: 170px;   
	padding: 15px 10px 10px 10px; /* 하단 padding만 0으로 */
}

/* 회원 등급 텍스트 줄 */
.member_cate {
    background-color: #f3f3f3;
    text-align: center;
    font-size: 12px;
    line-height: 22px;
    width: 100%;
    color: #333;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 닉네임 */
.member_user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: 700;
    font-size: 16px;
    width: 100%;
    line-height: 22px;
    margin-top: 4px;
    margin-bottom: 2px;
    word-break: break-all;
}

/* 관리자 통계 줄 */
.member_stat {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

/* 로그아웃/회원정보변경, 스크랩/결제 버튼 줄 */
.login_after_bt_bottom {
    display: flex;
    position: relative;
    margin-top: 5px;
    cursor: pointer;
}
.login_after_bt_bottom .login_etc_bt_item {
    width: 50%;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #dfdfdf;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.15s;
}
.login_after_bt_bottom .login_etc_bt_item:hover {
    background-color: #f5f5f5;
    color: #00aa71;
}
.login_after_bt_bottom .login_etc_bt_item.first {
    border-right: none;
}

/* 구인광고관리 / 이력서관리 / 관리자페이지 메인 버튼 */
.mypage_bt {
    margin-top: 5px;
    background-color: #00aa71;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    line-height: 28px;
    width: 100%;
    height: 28px;
    transition: background 0.15s;
}
.mypage_bt:hover {
    background-color: #009060;
}

/* 인증 배지 */
.member_auth {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 10px;
    vertical-align: middle;
    line-height: 1.6;
}
.member_auth--ok   { background: #e7f5ec; color: #1c7c3a; }
.member_auth--wait { background: #fff3cd; color: #b08800; }
.member_auth--no   { background: #f0f0f0; color: #888; }

/* 비회원 안내 */
.guest_msg {
    text-align: center;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    padding: 12px 0 14px;
}
.guest_msg small {
    color: #888;
    font-size: 11px;
}

/* 비회원 로그인 버튼 초록색 */
.login_after_bt_bottom .btn_green {
    background-color: #00aa71 !important;
    color: #fff !important;
    font-weight: 700;
    border-color: #00aa71 !important;
}
.login_after_bt_bottom .btn_green:hover {
    background-color: #009060 !important;
}