@charset "utf-8";

/* ===========================
   배너 게시판 스킨 - banner
   =========================== */

#bo_list .banner-wrap { width: 100%; }

/* 카테고리 탭 */
#bo_list .banner-category { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
#bo_list .banner-category a {
    display: inline-block; padding: 4px 14px; border-radius: 20px;
    font-size: 0.8rem; border: 1px solid #d0d0d0; color: #555;
    text-decoration: none; transition: all 0.18s; background: #fff;
}
#bo_list .banner-category a.active,
#bo_list .banner-category a:hover {
    background: var(--banner-accent, #4a7c59);
    border-color: var(--banner-accent, #4a7c59);
    color: #fff;
}

/* 공지 배너: 중앙 정렬 */
#bo_list .banner-notice-grid {
    display: grid;
    grid-template-columns: repeat(var(--banner-notice-cols, 1), var(--banner-w, 200px));
    justify-content: center;
    column-gap: var(--banner-gap, 10px);
    row-gap: var(--banner-row-gap, 10px);
    margin-bottom: 16px;
}

/* 구분선 */
#bo_list .banner-divider {
    border: none;
    border-top: var(--banner-divider-w, 1px) var(--banner-divider-style, solid) var(--banner-divider, #e8e8e8);
    margin: var(--banner-divider-margin, 16px) 0;
}

/* 일반 배너: 중앙 정렬 */
#bo_list .banner-grid {
    display: grid;
    grid-template-columns: repeat(var(--banner-normal-cols, 3), var(--banner-w, 200px));
    justify-content: center;
    column-gap: var(--banner-gap, 10px);
    row-gap: var(--banner-row-gap, 10px);
}

/* 배너 아이템 공통 */
#bo_list .banner-item {
    position: relative;
    overflow: visible;
    width: var(--banner-w, 200px);
    height: var(--banner-h, 40px);
    border-radius: var(--banner-radius, 8px);
    background: var(--banner-item-bg, #f5f5f5);
    border: var(--banner-border-w, 1px) solid var(--banner-border, #e8e8e8);
    transition: box-shadow 0.18s, transform 0.18s;
}
#bo_list .banner-item:hover {
    box-shadow: var(--banner-shadow, 0 4px 14px rgba(0,0,0,0.10));
    transform: translateY(-2px);
}

/* 이미지 overflow는 내부에서만 clip */
#bo_list .banner-item a {
    display: block;
    width: 100%; height: 100%;
    border-radius: calc(var(--banner-radius, 8px) - 1px);
    overflow: hidden;
}
#bo_list .banner-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border-radius: calc(var(--banner-radius, 8px) - 1px);
}
/* a 없이 바로 img인 경우 */
#bo_list .banner-item > img {
    overflow: hidden;
}

/* 툴팁 */
#bo_list .banner-item .banner-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#bo_list .banner-item:hover .banner-tooltip { opacity: 1; }

/* 링크 복사 버튼 */
#bo_list .banner-copy-btn {
    position: absolute;
    bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.45);
    color: #fff; font-size: 0.7rem;
    padding: 2px 8px; border-radius: 4px;
    border: none; cursor: pointer;
    opacity: 0; transition: opacity 0.15s;
    white-space: nowrap; z-index: 10;
}
#bo_list .banner-item:hover .banner-copy-btn { opacity: 1; }

/* 비어있을 때 */
#bo_list .banner-empty {
    text-align: center; padding: 40px 0;
    color: #aaa; font-size: 0.9rem; width: 100%;
}

/* 관리 버튼 */
#bo_list .banner-admin-bar { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }
#bo_list .banner-admin-bar a {
    font-size: 0.82rem; padding: 5px 14px; border-radius: 6px;
    border: 1px solid #d0d0d0; background: #fff; color: #444;
    text-decoration: none; transition: background 0.15s;
}
#bo_list .banner-admin-bar a.point {
    background: var(--banner-accent, #4a7c59);
    border-color: var(--banner-accent, #4a7c59); color: #fff;
}

#bo_list .bn_paging { margin-top: 20px; text-align: center; }

/* ---------- 글쓰기 폼 ---------- */

#bo_w .banner-form-wrap { max-width: 600px; margin: 0 auto; }
#bo_w .banner-form-title {
    font-size: 1.1rem; font-weight: 600; color: #222;
    margin-bottom: 20px; padding-bottom: 10px;
    border-bottom: 2px solid var(--banner-accent, #4a7c59);
}
#bo_w .banner-field { margin-bottom: 16px; }
#bo_w .banner-field label {
    display: block; font-size: 0.82rem; color: #666;
    margin-bottom: 5px; font-weight: 500;
}
#bo_w .banner-field label .req { color: var(--banner-accent, #4a7c59); margin-left: 2px; }
#bo_w .banner-field input[type="text"],
#bo_w .banner-field input[type="url"],
#bo_w .banner-field select,
#bo_w .banner-field textarea {
    width: 100%; padding: 8px 12px;
    border: 1px solid #ddd; border-radius: 6px;
    font-size: 0.9rem; color: #333; background: #fff;
    box-sizing: border-box; transition: border-color 0.15s; font-family: inherit;
}
#bo_w .banner-field input[type="text"]:focus,
#bo_w .banner-field input[type="url"]:focus { outline: none; border-color: var(--banner-accent, #4a7c59); }



#bo_w .banner-field input[type="color"] {
    width: 48px; height: 38px; padding: 2px;
    cursor: pointer; border: 1px solid #ddd; border-radius: 4px;
}
#bo_w .banner-field .color-row { display: flex; gap: 12px; align-items: flex-end; }
#bo_w .banner-tooltip-preview { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.8rem; }

#bo_w .banner-form-btns { display: flex; gap: 8px; margin-top: 24px; }
#bo_w .banner-form-btns button,
#bo_w .banner-form-btns a {
    flex: 1; padding: 10px 0; border-radius: 8px;
    border: 1px solid #ddd; background: #fff; color: #444;
    font-size: 0.9rem; cursor: pointer; text-align: center;
    text-decoration: none; transition: background 0.15s;
}

#bo_w .banner-img-preview {
    margin-top: 8px; max-width: 200px;
    border-radius: 6px; border: 1px solid #eee; display: none;
}

.bn-img-tabs {
    display: flex; gap: 0; margin-bottom: 8px;
    border: 1px solid #ddd; border-radius: 6px; overflow: hidden;
}
.bn-img-tab {
    flex: 1; padding: 7px 0; text-align: center;
    font-size: 0.83rem; cursor: pointer;
    background: #f5f5f5; color: #666; border: none; transition: background 0.15s;
}
.bn-img-panel { display: none; }
.bn-img-panel.active { display: block; }

@media (max-width: 480px) {
    #bo_list .banner-grid {
        grid-template-columns: repeat(var(--banner-normal-cols, 2), var(--banner-w, 200px));
    }
    #bo_list .banner-notice-grid {
        grid-template-columns: repeat(var(--banner-notice-cols, 2), var(--banner-w, 200px));
    }
}