/* BASIC css start */
/* ========================================
   공지사항/이벤트 게시판 - 리스트
   ======================================== */

#bbsData .page-body { max-width: 1400px; margin: 0 auto; padding: 40px 20px 80px; }

/* 상단 탭 */
#bbsData .bbs-hd { padding: 0 0 24px; border-bottom: 1px solid #ededed; }
#bbsData .bbs-hd .link { display: flex; align-items: center; text-align: left; }
#bbsData .bbs-hd .link li { display: inline-flex; align-items: center; position: relative; padding-right: 20px; margin-right: 20px; }
#bbsData .bbs-hd .link li::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: #ededed; }
#bbsData .bbs-hd .link li:last-child { margin-right: 0; padding-right: 0; }
#bbsData .bbs-hd .link li:last-child::after { display: none; }
#bbsData .bbs-hd .link li a { font-size: 14px; color: #999; font-weight: 500; background: none !important; padding: 0 !important; line-height: 1; transition: color .2s ease; }
#bbsData .bbs-hd .link li a:hover { color: #121212; font-weight: 700; }

/* 타이틀 + 검색 */
#bbsData .bbs-tit { 
    display: flex; 
    align-items: center; 
    justify-content: space-between;  /* ← 타이틀 왼쪽, 검색폼 오른쪽으로 밀어냄 */
    margin-top: 40px; 
}
#bbsData .bbs-tit h3 { font-size: 22px; font-weight: 700; color: #121212; line-height: 1; }
#bbsData .bbs-sch { float: none; }
#bbsData .bbs-sch fieldset { display: flex; align-items: center; gap: 16px; }
#bbsData .bbs-sch label { margin-right: 0; font-size: 13px; color: #666; display: inline-flex; align-items: center; gap: 4px; }
#bbsData .bbs-sch label input[type="radio"] { accent-color: #121212; }
#bbsData .bbs-sch .key-wrap { display: flex; align-items: center; border: 1px solid #ededed; border-radius: 20px; overflow: hidden; height: 38px; }
#bbsData .bbs-sch .MS_input_txt { border: none; height: 36px; width: 200px; padding: 0 16px; font-size: 13px; }
#bbsData .bbs-sch .key-wrap a {
    width: 44px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: #121212;
    position: relative;
}
#bbsData .bbs-sch .key-wrap a img { display: none; }
#bbsData .bbs-sch .key-wrap a::after {
    content: '';
    width: 15px; height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 테이블 껍데기 제거 → 카드 리스트로 전환 */
.bbs-table-list { margin-top: 24px; border-top: none; }
.bbs-table-list table,
.bbs-table-list colgroup,
.bbs-table-list col,
.bbs-table-list thead,
.bbs-table-list tbody,
.bbs-table-list tr,
.bbs-table-list th,
.bbs-table-list td {
    display: block !important;
    width: auto !important;
    table-layout: auto !important;
    border: none !important;
    background: none !important;
}
.bbs-table-list thead { display: none !important; }

.bbs-table-list tbody tr {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 8px;
    background: #f8f8f8;
    border-radius: 20px;
}
.bbs-table-list tbody tr.notice-row {
    background: #fff;
    border: 1px solid #121212;
}
.bbs-table-list tbody td { padding: 0; }

/* NO. */
.col-no {
    flex: 0 0 32px;
    font-size: 12px; color: #999; text-align: center;
}

/* 헤드 아이콘 (공지 화살표 등) */
.col-icon {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.col-icon img { display: block; width: 14px; height: auto; }

/* 상품 썸네일 (있을 때만) */
.col-product {
    flex: 0 0 48px;
}
.col-product img {
    display: block; width: 48px; height: 48px;
    object-fit: cover; border-radius: 10px;
}

/* 제목 (CONTENT) */
.col-content {
    flex: 1 1 auto;
    min-width: 0;
}
.col-content .tb-left {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.col-content a {
    font-weight: 600;
    font-size: 14px;
    color: #121212;
}
.col-content a:hover { text-decoration: underline; }
.notice-row .col-content a { font-weight: 700; }

/* 작성자 */
.col-writer {
    flex: 0 0 90px;
    font-size: 12px; color: #999; text-align: center;
}

/* 날짜 */
.col-date {
    flex: 0 0 90px;
    font-size: 12px; color: #999; text-align: center;
}

/* 조회수 */
.col-hits {
    flex: 0 0 60px;
    font-size: 12px; color: #999; text-align: center;
}

/* 반응형: 모바일에서 작성자/날짜/조회수는 아래로 */
@media (max-width: 640px) {
    #bbsData .page-body { padding: 24px 16px 60px; }
    #bbsData .bbs-tit { flex-direction: column; align-items: flex-start; gap: 16px; }
    #bbsData .bbs-sch fieldset { flex-wrap: wrap; }
    .bbs-table-list tbody tr { flex-wrap: wrap; padding: 14px 16px; }
    .col-content { flex: 1 1 100%; order: 1; margin-top: 4px; }
    .col-no { order: 0; }
    .col-icon { order: 0; }
    .col-product { order: 0; }
    .col-writer,
    .col-date,
    .col-hits { flex: 0 0 auto; order: 2; font-size: 11px; }
}

/* 하단 WRITE 버튼 + 페이징 */
.bbs-btm { margin-top: 32px; padding: 24px 0 0; border-top: 1px solid #ededed; }
.bbs-btm .bbs-link { text-align: right; }
.bbs-btm .bbs-link a {
    display: inline-block; width: auto; height: auto;
    padding: 10px 24px; font-size: 13px; font-weight: 700;
    border-radius: 20px; border: 1px solid #121212;
    color: #121212; background: #fff; line-height: normal;
}
.bbs-btm .bbs-link a:hover { color: #fff; background: #121212; }
.bbs-btm .bbs-paging .paging { margin: 24px 0 0; padding: 0; text-align: center; }
.bbs-btm .bbs-paging .paging a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; font-size: 13px; color: #999; line-height: normal;
}
.bbs-btm .bbs-paging .paging a:hover,
.bbs-btm .bbs-paging .paging a.now { color: #121212; font-weight: 700; }
/* BASIC css end */