/**
 * ===================================================================
 * 공모전 게시판 리스트 스킨 CSS (Optimized & Organized)
 * ===================================================================
 */

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

/* ===============================================
 * 1. 기본 및 공통 스타일 (Base)
 * =============================================== */
.board-list {
    font-size: .9375rem;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.board-info {
    display: none;
}


/* ===============================================
 * 4. 상세검색 폼 (Search Panel)
 * =============================================== */
.search-panel-container {
    background-color: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    padding: 0 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
}

.filter-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
    min-height: 28px;
}
.filter-row:last-child { border-bottom: none; }

.filter-label {
    flex: 0 0 60px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #111;
    padding-top: 5px;
    letter-spacing: -0.02em;
}

.filter-options {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pill-check { position: relative; cursor: pointer; margin: 0; }
.pill-check input { display: none; }

.pill-check span, .pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 26px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #444;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.pill-btn { cursor: pointer; }

.pill-check:hover span, .pill-btn:hover {
    border-color: #999;
    color: #111;
    background-color: #fcfcfc;
}
.pill-check input:checked + span, .pill-btn.active {
    background-color: #035AC7;
    border-color: #035AC7;
    color: #fff;
    font-weight: 700;
}

.search-bottom-bar {
    padding: 12px 0;
    border-top: 1px solid #d5d5d5;
    display: flex;
}

.keyword-input-box {
    width: 100%;
    display: flex;
    gap: 6px;
}

.input-keyword {
    flex: 1;
    height: 30px;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: #fff;
    padding: 0 8px;
    color: #333;
}
.input-keyword:focus {
    border-color: #035AC7;
    outline: none;
    box-shadow: 0 0 0 1px #035AC7;
}

.btn-submit-search {
    height: 30px;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-submit-search:hover { background-color: #035AC7; }

.btn-reset-search {
    height: 30px;
    width: 30px;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    color: #666;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-reset-search:hover {
    background-color: #f8f9fa;
    color: #111;
    border-color: #bbb;
}


/* ===============================================
 * 5. 리스트 & 카드 레이아웃 (Clean Card Style)
 * =============================================== */
.board-list-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clean-card {
    display: flex;
    position: relative;
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    padding: 16px;
    align-items: center;
    transition: all 0.2s;
}
.clean-card:hover {
    border-color: #035AC7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 5-1. 썸네일 영역 */
.card-thumb {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    position: relative;
}
.card-thumb a { display: block; width: 100%; height: 100%; }
.img-box {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    background-color: #f3f4f6;
    border: 1px solid #eee;
}
.mobile-dday { display: none; }

/* 5-2. 정보 영역 */
.card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.info-top {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cate-badge {
    color: #035AC7;
    font-weight: 700;
    background: #eef6ff;
    padding: 2px 6px;
    border-radius: 4px;
}
.organizer {
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 6px;
}
.info-title .subject-text {
    vertical-align: middle;
    margin-right: 4px;
}
.clean-card:hover .info-title { color: #035AC7; }

/* 뱃지 스타일 */
.badge-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 17px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 3px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 3px;
    transform: translateY(-1px);
    text-decoration: none;
    letter-spacing: -0.5px;
}

@keyframes badge-blink {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.badge-mini.ad {
    background-color: #e11d48;
    color: #fff;
    animation: badge-blink 1.2s infinite ease-in-out;
}
.badge-mini.new { background-color: #e11d48; color: #fff; }
.badge-mini.winner { background-color: #ecfdf5; color: #059669; border: 1px solid #d1fae5; box-sizing: border-box; }
.badge-mini.prize { background-color: #fffbeb; color: #d97706; border: 1px solid #fcd34d; box-sizing: border-box; }
.badge-mini.winner:hover { background-color: #059669; color: #fff; border-color: #059669; }

/* 태그 라인 */
.info-tags-line {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
    font-size: 13px;
    color: #666;
    overflow: hidden;
}
.tag-part { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tag-part i { font-size: 11px; color: #9ca3af; }
.tag-part.field { flex: 0 1 auto; min-width: 0; color: #555; }
.tag-part.field span { display: block; overflow: hidden; text-overflow: ellipsis; }
.tag-part.target { flex-shrink: 0; color: #555; }
.tag-divider { width: 1px; height: 10px; background: #e5e7eb; margin: 0 8px; flex-shrink: 0; }

.info-bottom-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    height: 0;
    overflow: hidden;
}

/* 5-3. 사이드 영역 */
.card-side {
    flex: 0 0 130px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border-left: 1px solid #f0f0f0;
    padding-left: 15px;
    margin-left: 15px;
    height: 100%;
}

.dday-text {
    font-size: 20px;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}
.dday-text.st-ing { color: #035AC7; }
.dday-text.st-urgent { color: #dc2626; }
.dday-text.st-today { color: #e11d48; animation: blink 1s infinite; }
.dday-text.st-end { color: #9ca3af; }
.dday-text.st-always { color: #059669; }
.date-text { font-size: 12px; color: #999; display: block; }

@keyframes blink { 50% { opacity: 0.5; } }

.side-btn-area { margin-top: 8px; }
.btn-clean.view-side {
    font-size: 11px;
    padding: 2px 8px;
    height: 22px;
    border: 1px solid #ddd;
    background: #fff;
    color: #888;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-clean.view-side:hover { border-color: #333; color: #333; background: #f9f9f9; }
.btn-clean.view-side i { font-size: 10px; }


/* ===============================================
 * 6. 관리자 도구 및 기타 (Admin Tools & Etc)
 * =============================================== */
.admin-check { position: absolute; top: 10px; left: 10px; z-index: 10; }

.admin-tools-box {
    background: #f9fafb;
    border: 1px solid #eee;
    padding: 6px;
    border-radius: 4px;
    font-size: 11px;
    width: 100%;
    text-align: left;
    margin-top: 10px;
}
.tool-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.tool-label { color: #999; margin-right: 4px; }
.click-edit { cursor: pointer; border-bottom: 1px dashed #ccc; color: #333; font-weight: 600; }
.click-edit:hover { color: blue; border-bottom-color: blue; }
.edit-input-wrap { display: flex; gap: 2px; }
.edit-input-wrap input { width: 40px; height: 20px; border: 1px solid #ccc; font-size: 11px; padding: 0 2px; }
.btn-mini { height: 20px; font-size: 10px; padding: 0 4px; border: 1px solid #999; background: #fff; cursor: pointer; }

/* ===============================================
 * 7. 모바일 반응형 (Mobile Responsive)
 * =============================================== */
@media (max-width: 767px) {
    /* 상단 버튼 스크롤 */
    .center-buttons {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 10px 5px 5px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .center-buttons::-webkit-scrollbar { display: none; }
    .btn-custom { flex-shrink: 0; }
    .btn-deadline-calendar { display: none; }

    /* 상세검색 폼 */
    .search-panel-container { padding: 0 15px !important; }
    .filter-row { flex-direction: column; gap: 8px; padding: 10px 0; }
    .filter-label { margin-bottom: 0; }
    .pill-check span, .pill-btn { height: 28px; font-size: 0.8rem; }

    /* 카드 레이아웃 */
    .clean-card { flex-wrap: wrap; padding: 12px; }
    .admin-check { top: 6px; left: 6px; }
    .card-thumb { width: 70px; height: 70px; margin-right: 12px; flex: 0 0 70px; }
    
    .mobile-dday {
        display: block; position: absolute; bottom: 0; left: 0; right: 0;
        background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 10px; text-align: center;
        padding: 2px 0; font-weight: bold;
    }
    .mobile-dday.st-urgent { background: #dc2626; }
    .mobile-dday.st-today { background: #e11d48; }

    .card-info { width: calc(100% - 90px); }
    .info-title { font-size: 15px; }
    .badge-mini { height: 15px; font-size: 9px; padding: 0 4px; }
    .info-tags-line { font-size: 12px; margin-bottom: 2px; }
    .info-bottom-actions { display: none; }

    .card-side {
        flex: 1 1 100%; width: 100%;
        border-left: none; border-top: 1px solid #f5f5f5;
        padding-left: 0; margin-left: 0;
        padding-top: 8px; margin-top: 8px;
        flex-direction: row; justify-content: flex-end; align-items: center;
    }
    .dday-area { display: none; }
    .side-btn-area { display: none; }
    .admin-tools-box { width: auto; font-size: 10px; padding: 4px; margin-top: 0; margin-left: auto; }
}


/* =======================================================
 * [추가] 광고 게시물 (bg-ad-item) 강조 스타일
 * ======================================================= */
.clean-card.bg-ad-item {
    background-color: #f8fbff;
    border: 1px solid #90caf9;
    border-left: 5px solid #035AC7;
}
.clean-card.bg-ad-item:hover {
    background-color: #eef7ff;
    border-color: #035AC7;
    box-shadow: 0 4px 15px rgba(3, 90, 199, 0.15);
}


/* 말풍선 스타일 (ex_21) */
.speech-bubble-long {
    position: relative;
    background: #ffffff;
    color: #4b6584;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 0px;
    margin-bottom: 5px;
    line-height: 1.4;
    border: 1px solid #d6eaff;
    word-break: break-all;
}
.speech-bubble-long i { color: #035AC7; margin-right: 4px; font-size: 11px; }
.speech-bubble-long::after {
    content: ''; position: absolute; top: -6px; left: 20px;
    width: 0; height: 0;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 6px solid #d6eaff;
}
.speech-bubble-long::before {
    content: ''; position: absolute; top: -4px; left: 20px;
    width: 0; height: 0;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 6px solid #eef7ff; z-index: 1;
}