@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;800&display=swap');

/* :root 변수를 밝은 테마에 맞게 수정 */
:root {
    --main-bg-color: #f8f9fa;       /* 전체 배경색 (아주 연한 회색) */
    --card-bg-color: #ffffff;       /* 게시글 카드 배경색 (흰색) */
    --border-color: #dee2e6;        /* 경계선 색상 (연한 회색) */
    --text-primary-color: #212529;  /* 기본 텍스트 색상 (어두운 회색) */
    --text-secondary-color: #6c757d;/* 보조 텍스트 색상 (중간 회색) */
    --accent-blue-color: #4C51BF;   /* 포인트 색상 (링크, 아이콘 등) - 이름 유지, 값 변경 */
    --accent-hover-color: #4347a5;  /* 포인트 색상 호버 */
    --notice-bg-color: #eef2ff;     /* 공지사항 배경색 (연한 보라) */
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: var(--text-primary-color); /* body 기본 글자색 적용 */
}

#bo_list_wrap {
    border-radius: 5px;
    padding: 0px;
    color: var(--text-primary-color);
}

/* ===== Premium Pill Buttons (밝은 테마에 맞게 색상 조정) ===== */
.btn-pill{
    --btn-dark: var(--accent-blue-color); /* 쓰기 버튼 색상 변경 */
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.625rem 1.05rem;
    border-radius: 5px;
    border:1px solid rgba(0,0,0,.08);
    font-weight:700;
    font-size:14px;
    letter-spacing:.2px;
    line-height:1;
    text-decoration:none;
    color:#fff;
    background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(0,0,0,.10)), var(--btn-dark);
    box-shadow: 0 1px 2px rgba(0,0,0,.10);
    transition: transform .08s ease, box-shadow .2s ease, filter .2s ease, opacity .2s;
    overflow:hidden;
}
.btn-pill::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(100% 180% at 15% 0%, rgba(255,255,255,.18), transparent 55%);
    pointer-events:none; opacity:.6;
}
.btn-pill:hover{
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 10px 24px rgba(76, 81, 191, 0.2), 0 2px 6px rgba(0,0,0,.12); /* 그림자 색상 변경 */
}

/* ===== 지역 탭 ===== */
.recruit-tabs {
    display: flex;
    flex-wrap: wrap;
    /* margin-bottom: 24px; */
}
.recruit-tabs a {
    background-color: var(--card-bg-color);
    color: #8666f8;
    border: 1px solid #c5b4ff;
    padding: 4px 15px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
}
.recruit-tabs a:hover {
    background-color: #f1f3f5; /* 호버 시 배경색 변경 */
    color: var(--text-primary-color);
}
.recruit-tabs a.active {
    background-color: #5f5f5f;
    color: #fff;
    border-color: #c5b4ff;
    font-weight: 500;
}

/* ===== 상단 버튼 및 정보 영역 (수정) ===== */
#bo_btn_top {
    color: var(--text-primary-color);
     /* 하단 패딩 추가 */
     /* 목록과의 간격 */
    border-bottom: 1px solid var(--border-color); /* 하단 구분선 추가 */
}

#bo_list_total b {
    color: var(--text-primary-color);
}
#bo_btn_top .btn_b01 {
    color: var(--text-secondary-color);
    transition: color 0.2s;
}
#bo_btn_top .btn_b01:hover {
    color: var(--accent-blue-color);
}

/* ===== 게시글 목록 헤더 (수정) ===== */
.list-header-container {
    display: none; /* 모바일에선 숨김 */
    align-items: center;
    background: #f1f3f5; /* 헤더 배경색 변경 */
    box-shadow: none; /* 그림자 제거 */
    border: 1px solid var(--border-color); /* 테두리 변경 */
    padding: 12px 15px; /* 패딩 조정 */
    gap: 15px;
    border-radius: 0px; /* 모서리 둥글게 */
    color: var(--text-secondary-color); /* 헤더 텍스트 색상 */
    font-size: 13px; /* 폰트 크기 미세 조정 */
    font-weight: 700;
    letter-spacing: 0.5px; /* 자간 조정 */
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 5px;
}
.list-header-item { text-align: center; }
.list-header-item.no {flex: 0 0 27px;}
.list-header-item.thumb {flex: 0 0 219px;}
.list-header-item.content {flex: 1 1 0;text-align: left;}
.list-header-item.jump {flex: 0 0 70px;}
.list-header-item.product-type {flex: 0 0 100px;}

@media (min-width: 768px) {
    .list-header-container {
        display: flex; /* 데스크탑에서 보임 */
    }
}


/* ===== 게시글 목록 (카드형 UI) ===== */
#bo_list ul.na-table {
    border: none;
}
#bo_list ul.na-table > li {
    background-color: var(--card-bg-color);
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
}

#bo_list ul.na-table > li:hover {
    border-color: var(--accent-blue-color);
}

/* 공지사항 스타일 */
#bo_list ul.na-table > li.is-notice {
    background-color: var(--notice-bg-color);
    border-left: 4px solid var(--accent-blue-color);
}
#bo_list ul.na-table > li.is-notice .na-subject {
    color: var(--accent-hover-color); /* 공지사항 제목 색상 */
    font-weight: 700;
}

/* ===== 광고 종류별 스타일 ===== */
.product-style-home {
    background-image: linear-gradient(to right, rgba(255, 118, 38, 0.08), transparent 40%);
    border-color: #ff7626;
}
.product-style-scroll {
    background-image: linear-gradient(to right, rgba(233, 30, 99, 0.08), transparent 40%);
    border-color: #e91e63;
}
.product-style-signboard {
    background-image: linear-gradient(to right, rgba(156, 39, 176, 0.08), transparent 40%);
    border-color: #9c27b0;
}
.product-style-tricolor {
    background-image: linear-gradient(to right, rgba(3, 169, 244, 0.08), transparent 40%);
    border-color: #03a9f4;
}
.product-style-oneline {
    background-image: linear-gradient(to right, rgba(139, 195, 74, 0.08), transparent 40%);
    border-color: #8bc34a;
}

/* ===== NEW LIST ITEM LAYOUT ===== */
.list-item-container {
    display: flex;
    align-items: center;
    padding: 19px 21px;
    gap: 15px;
    border-bottom: solid 1px var(--border-color);
}
.list-item-no {
    flex: 0 0 10px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary-color);
}
.list-item-no .notice-badge {
    background-color: var(--accent-blue-color);
    color: #fff;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 500;
}
.list-item-thumb {
    flex: 0 0 230px;
    height: 88px;
}
.list-item-thumb a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f1f3f5;
    text-align: center;
}
.list-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.list-item-thumb .no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}
.list-item-content {
    flex: 1 1 0;
    min-width: 0; /* flex item 내부 요소가 넘치는 것을 방지 */
}
.list-item-details {
    margin-bottom: 5px;
    font-size: 14px; /* 글자 크기 추가 조정 */
}
.list-item-details .region {
    color: #d9480f; /* 지역 색상 가독성 개선 */
    font-weight: 800; /* 굵기 조정 */
}
.list-item-details .salary {
    color: var(--accent-blue-color); /* 가게이름 색상 변경 */
    font-weight: 800; /* 굵기 조정 */
    margin-left: 10px;
}
.list-item-jump {
    flex: 0 0 104px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary-color);
}
.list-item-product-type {
    flex: 0 0 78px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 800;
}
/* 광고 종류별 텍스트 색상 */
.product-style-home .list-item-product-type { color: #ff7626; }
.product-style-scroll .list-item-product-type { color: #e91e63; }
.product-style-signboard .list-item-product-type { color: #9c27b0; }
.product-style-tricolor .list-item-product-type { color: #03a9f4; }
.product-style-oneline .list-item-product-type { color: #8bc34a; }


.na-subject {
    font-size: 16px; /* 글자 크기 추가 조정 */
    font-weight: 800; /* 굵기 조정 (요청사항) */
    color: var(--text-primary-color);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
a.na-subject:hover {
    color: var(--accent-blue-color);
}
.count-plus.orangered {
    background-color: var(--accent-blue-color);
    color: #fff;
    font-weight: 500;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.8rem; /* 글자 크기 증가 */
    margin-left: 5px;
}

/* 반응형 스타일 */
@media (max-width: 767px) {
    .list-item-container {
        flex-wrap: wrap;
    }
    .list-item-no {
        flex-basis: 50px;
    }
    .list-item-thumb {
        flex-basis: calc(100% - 70px);
        height: auto;
        aspect-ratio: 16 / 9; /* 썸네일 비율 유지 */
    }
    .list-item-content {
        order: 3;
        flex-basis: 100%;
        margin-top: 10px;
    }
    .list-item-jump, .list-item-product-type {
        order: 2;
        padding-top: 5px;
    }
    .list-item-jump {
        flex-basis: 50%;
        text-align: left;
    }
    .list-item-product-type {
        flex-basis: 50%;
        text-align: right;
    }
}


/* 페이징 */
.pagination .page-link {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
}
.pagination .page-item.active .page-link {
    background-color: var(--accent-blue-color);
    border-color: var(--accent-blue-color);
    color: #fff;
}
.pagination .page-link:hover {
    background-color: #f1f3f5;
}

/* 썸네일 컨테이너를 기준점으로 설정 */
.list-item-thumb {
    position: relative;
}

/* (이하 색상, 밑줄 등 다른 스타일은 그대로 유지) */
.na-subject.opt-bold { font-weight: bold; }
.na-subject.opt-underline { text-decoration: underline; }
.na-subject.opt-italic { font-style: italic; }

.na-subject.fg-hotpink { color: #ff69b4 !important; }
.na-subject.fg-blue { color: #3498db !important; }
.na-subject.fg-spring { color: #00ff7f !important; }
.na-subject.fg-yellow { color: #f1c40f !important; }
.na-subject.fg-white { color: #000000 !important; } /* 흰색 배경에서 보이도록 검은색으로 변경 */

.na-subject.bg-yellow { background-color: #f1c40f; color: #111 !important; padding: 2px 5px; border-radius: 3px; }
.na-subject.bg-hotpink { background-color: #ff69b4; color: white !important; padding: 2px 5px; border-radius: 3px; }
.na-subject.bg-teal { background-color: #1abc9c; color: white !important; padding: 2px 5px; border-radius: 3px; }

/* ================================================================
   게시판 목록 - 상품별 썸네일 크기 조절
================================================================ */

/* 기본 썸네일 스타일 */
.list-item-thumb {
    flex-shrink: 0;
    margin-right: 15px;
}

/* 프리미엄 광고와 스크롤 배너 썸네일 크기를 동일하게 설정 */
.product-type-premium .list-item-thumb,
.product-type-scroll .list-item-thumb {
    width: 109px;
    height: 104px;
    display: block; /* 숨김 처리를 해제하고 보이도록 설정 */
}

/* 간판 광고 썸네일 크기 */
.product-type-signboard .list-item-thumb {
    width: 150px;
    height: 84px;
}

/* 삼색 광고 썸네일 크기 */
.product-type-threecolor .list-item-thumb {
    width: 180px;
    height: 45px;
}

/* 한줄 광고 썸네일 크기 */
.product-type-oneline .list-item-thumb {
    width: 200px;
    height: 24px;
}