@charset "utf-8";

/* =========================================================================
   [이윰빌더 갤러리 리스트 프레임워크 & 관리자 박스]
   ========================================================================= */
.board-list {
    font-size: .9375rem;
}

.board-list .board-setup {
    position: relative;
    border: 1px solid #d5d5d5;
    height: 38px;
    margin-bottom: 20px;
}

.board-list .board-setup .select {
    position: absolute;
    top: -1px;
    left: -1px;
    display: inline-block;
    width: 200px;
}

.board-list .board-setup-btn-box {
    position: absolute;
    top: -1px;
    right: -1px;
    display: inline-block;
    width: 420px;
}

.board-list .board-setup-btn {
    float: left;
    width: 25%;
    height: 38px;
    line-height: 38px;
    color: #fff;
    text-align: center;
    font-size: .8125rem;
}

.board-list .board-setup-btn:nth-child(odd) {
    background-color: #000;
}

.board-list .board-setup-btn:nth-child(even) {
    background-color: #3c3c3e;
}

.board-list .board-setup-btn:hover {
    opacity: 0.8;
}

.board-list .favorite-setup {
    display: inline-block;
    width: 125px;
    margin-left: 15px;
}

.board-list .favorite-setup .toggle {
    padding-right: 45px;
}

/* 유틸리티 디렉터리 바 헤더 */
.list-master-status-title {
    font-weight: normal;
    text-decoration: underline;
}

/* =========================================================================
   [프리미엄 필터 검색 내비게이션 바 컴포넌트]
   ========================================================================= */
.premium-nav-filter-wrapper {
    margin-bottom: 20px;
}

.premium-nav-filter { 
    background: #222; 
    display: flex; 
    align-items: center; 
    padding: 0 15px; 
    height: 45px; 
    border-bottom: 1px solid #000; 
    position: relative; 
    z-index: 10; 
}

.pnav-btn { 
    background: none; 
    border: none; 
    color: #fff; 
    font-size: 14px; 
    font-weight: bold; 
    height: 45px; 
    padding: 0 15px; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    cursor: pointer; 
    border-right: 1px solid #3d3d3d; 
    outline: none !important; 
}

.pnav-btn:hover, 
.pnav-btn.active { 
    background: #111; 
    color: #ff4e4e; 
}

.pnav-status { 
    color: #ccc; 
    font-size: 13px; 
    padding-left: 15px; 
    flex: 1; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.pnav-status-highlight {
    color: #ff4e4e;
    font-weight: bold;
}

.pnav-search-box { 
    display: flex; 
    align-items: center; 
    background: #fff; 
    border-radius: 3px; 
    height: 30px; 
    padding: 0 5px; 
    width: 200px; 
}

.pnav-search-input { 
    border: none; 
    outline: none; 
    width: 170px; 
    height: 26px; 
    font-size: 13px; 
    padding: 0 5px; 
    color: #000; 
}

.pnav-search-btn { 
    background: none; 
    border: none; 
    color: #333; 
    cursor: pointer; 
    font-size: 14px; 
}

/* 슬라이딩 드롭다운 패널 */
.pnav-drop-panel { 
    background: #f5f5f5; 
    border: 1px solid #d5d5d5; 
    padding: 15px 20px; 
    display: none; 
    position: relative; 
    border-top: none; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
    margin-bottom: 20px; 
}

.pnav-drop-panel.open-panel { 
    display: block; 
}

.pnav-panel-title { 
    font-size: 15px; 
    font-weight: bold; 
    color: #ab0000; 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

.pnav-panel-title i.pnav-close { 
    font-size: 20px; 
    color: #000; 
    cursor: pointer; 
    position: absolute; 
    top: 12px; 
    right: 15px; 
}

.pnav-tab-row { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 5px; 
    margin-bottom: 12px; 
}

.pnav-tab-link { 
    display: inline-block; 
    padding: 6px 16px; 
    background: #fff; 
    border: 1px solid #e5e5e5; 
    color: #333; 
    text-decoration: none !important; 
    font-size: 14px; 
    border-radius: 3px; 
    transition: all 0.1s; 
}

.pnav-tab-link:hover { 
    border-color: #888; 
    background: #fafafa; 
}

.pnav-tab-link.active { 
    background: #fff; 
    border-color: #ab0000; 
    color: #ab0000; 
    font-weight: bold; 
    border-width: 2px; 
    padding: 5px 15px; 
}

/* 2차 구역 소분류 */
.pnav-sub-zone { 
    background: #fff; 
    border: 1px solid #e5e5e5; 
    padding: 15px; 
    border-radius: 4px; 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
    gap: 10px; 
    margin-top: 10px; 
}

.pnav-sub-link { 
    font-size: 13px; 
    color: #666; 
    text-decoration: none !important; 
    padding: 4px; 
    text-align: center; 
    display: block; 
}

.pnav-sub-link:hover,
.pnav-sub-link.active { 
    color: #ab0000; 
    font-weight: bold;
    text-decoration: underline !important; 
}

.pnav-sub-all-btn {
    font-weight: bold !important; 
    color: #000 !important;
}

/* 3차 동네 소분류 */
.pnav-grand-zone { 
    background: #fff; 
    border: 1px solid #cbd5e1; 
    padding: 15px; 
    border-radius: 4px; 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); 
    gap: 10px; 
    margin-top: 10px; 
    border-left: 4px solid #10b981; 
}

.pnav-grand-link { 
    font-size: 13px; 
    color: #475569; 
    text-decoration: none !important; 
    padding: 4px; 
    text-align: center; 
    display: block; 
}

.pnav-grand-link:hover,
.pnav-grand-link.active { 
    color: #10b981; 
    font-weight: bold; 
    text-decoration: underline !important; 
}

.pnav-grand-all-btn {
    font-weight: bold !important; 
    color: #000 !important;
}

/* =========================================================================
   [등급별 그리드 레이아웃 아키텍처 및 카드 디자인]
   ========================================================================= */
.tier-zone-main-title { 
    font-size: 18px; 
    font-weight: bold; 
    color: #1e293b; 
    padding: 12px 5px; 
    margin-top: 35px; 
    margin-bottom: 15px; 
    border-bottom: 2px solid #0f172a; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    clear: both; 
}

.tier-zone-sub-desc {
    font-size: 12px; 
    font-weight: normal; 
    margin-left: 10px;
}

.tier-zone-sub-desc.desc-special { color: #ef4444; }
.tier-zone-sub-desc.desc-premium { color: #2563eb; }
.tier-zone-sub-desc.desc-banner { color: #475569; }

/* 기본 사각형 갤러리 카드 프레임 */
.g-item-card-in { 
    position: relative; 
    background: #fff; 
    border: 1px solid #e5e5e5; 
    border-radius: 7px; 
    overflow: hidden; 
    transition: all 0.2s ease-in-out; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.g-item-card-in:hover { 
    border-color: #959595; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); 
}

.g-item-card-image { 
    position: relative; 
    overflow: hidden; 
    padding: 15px 15px 0; 
}

.g-item-card-image-in { 
    position: relative; 
    overflow: hidden; 
    border-radius: 5px; 
    height: 180px; 
    background: #f8fafc; 
}

.g-item-card-info { 
    position: relative; 
    padding: 15px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.g-item-card-info h4 { 
    font-size: 15px; 
    color: #252525; 
    line-height: 1.4; 
    font-weight: bold; 
    margin-bottom: 10px; 
    padding-right: 25px; 
    position: relative; 
    word-break: break-all; 
}

.g-item-card-info h4 a:hover { 
    text-decoration: underline; 
}

.g-item-card-info .gallery-checkbox { 
    position: absolute; 
    top: 2px; 
    right: 0; 
    z-index: 2; 
}

.g-item-card-info .gallery-cont { 
    color: #757575; 
    font-size: 13px; 
    line-height: 1.5; 
    margin-bottom: 12px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    height: 38px; 
}

.g-item-card-bottom { 
    border-top: 1px solid #e5e5e5; 
    padding: 10px 15px; 
    background: #fafafa; 
    font-size: 12px; 
    color: #64748b; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

/* 1. 스페셜 파트너 2단 웹진 그리드 */
.grid-section-special { 
    display: flex; 
    flex-wrap: wrap; 
    margin: 0 -10px; 
}

.grid-col-special { 
    width: 50%; 
    padding: 10px; 
    box-sizing: border-box; 
}

.webzine-flex-box { 
    display: flex; 
    height: 220px; 
    width: 100%; 
    background: #fff; 
}

.webzine-img-side { 
    width: 40%; 
    min-width: 140px; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
    background: #f8fafc; 
    border-right: 1px solid #e2e8f0; 
}

.webzine-info-side { 
    width: 60%; 
    height: 100%; 
    padding: 15px 20px; 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    position: relative; 
}

/* 미안 레이아웃 디테일 메타 */
.mian-top-flex { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; /* 오타 수정 수술 완료 */
    width: 100%; 
    margin-bottom: 5px; 
}

.mian-top-flex-left {
    display: flex; 
    align-items: center; 
    gap: 4px;
}

.grid-section-special .bbbb-text { 
    font-size: 22px; 
    font-weight: bold; 
    color: #000; 
    text-align: right; 
    margin-top: -2px; 
}

.mian-loc-row { 
    font-size: 12px; 
    color: #666; 
    margin-bottom: 5px; 
    display: flex; 
    align-items: center; 
    gap: 4px; 
}

.mian-tag-blue { 
    color: #2563eb; 
    font-weight: bold; 
}

.mian-star-row { 
    font-size: 13px; 
    color: #ca8a04; 
    font-weight: bold; 
    margin-bottom: 10px; 
}

.mian-rating-count {
    color: #94a3b8; 
    font-weight: normal;
}

.mian-divider { 
    border-top: 1px solid #f1f5f9; 
    width: 100%; 
    margin-top: auto; 
    margin-bottom: 8px; 
}

.mian-bottom-meta { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 11px; 
    color: #94a3b8; 
}

/* 2. 프리미엄 파트너 그리드 */
.grid-section-premium { 
    display: flex; 
    flex-wrap: wrap; 
    margin: 0 -10px; 
}

.grid-col-premium { 
    width: 33.33333%; 
    padding: 10px; 
    box-sizing: border-box; 
}

.premium-card-rating-zone {
    font-size: 12px; 
    color: #ca8a04; 
    font-weight: bold; 
    margin-top: 4px; 
    display: flex; 
    align-items: center; 
    gap: 4px;
}

.premium-card-meta-zone {
    font-size: 11px; 
    color: #64748b; 
    margin-bottom: 6px; 
    display: flex; 
    align-items: center; 
    gap: 4px;
}

.premium-marker-icon {
    color: #ef4444;
}

.premium-hashtag-text {
    color: #2563eb; 
    font-weight: bold;
}

/* 3. 배너형 파트너 그리드 */
.grid-section-banner { 
    display: flex; 
    flex-wrap: wrap; 
    margin: 0 -10px; 
}

.grid-col-banner { 
    width: 25%; 
    padding: 10px; 
    box-sizing: border-box; 
}

.grid-col-banner .g-item-card-image-in { 
    height: 140px; 
}

/* 테두리 가중치 오버라이딩 클래스 연동 */
.item-card-special { 
    border: 2px solid #eab308 !important; 
    box-shadow: 0 4px 12px rgba(234,179,8,0.15); 
    border-radius: 7px; 
    overflow: hidden;
}

.item-card-premium { 
    border: 2px solid #3b82f6 !important; 
    box-shadow: 0 4px 12px rgba(59,130,246,0.1); 
    border-radius: 7px; 
    overflow: hidden;
}

.item-card-banner { 
    border: 1px solid #475569 !important; 
    border-radius: 7px; 
    overflow: hidden;
}

/* 뱃지 컴포넌트 규격화 */
.list-badge {
    display: inline-block; 
    padding: 1px 5px; 
    color: #fff; 
    font-size: 10px; 
    font-weight: bold; 
    border-radius: 3px; 
    vertical-align: middle;
}

.list-badge-special {
    background: linear-gradient(45deg, #eab308, #ca8a04);
}

.list-badge-premium {
    background: #3b82f6;
}

.list-badge-banner {
    background: #475569;
}

.list-badge-notice {
    display: inline-block; 
    padding: 2px 6px; 
    background: #ef4444; 
    color: #fff; 
    font-size: 10px; 
    font-weight: bold; 
    border-radius: 3px; 
    margin-right: 4px; 
    vertical-align: middle; 
    text-decoration: none !important;
}

.list-badge-notice-webzine {
    padding: 1px 5px;
    font-size: 10px;
    margin-left: 5px;
}

.list-chk-label {
    display: inline-block; 
    margin-left: 5px; 
    vertical-align: middle;
}

/* 순위 강조 메타 텍스트 */
.list-rank-text {
    font-weight: bold;
}

.list-rank-special { color: #eab308; }
.list-rank-premium { color: #2563eb; }
.list-rank-banner { color: #475569; }

/* 공정 분배 인증마크 PNG 엠블럼 오버레이 */
.list-png-medal-badge {
    position: absolute;
    top: -5px !important;
    left: 8px !important;
    z-index: 99 !important;
    display: inline-block;
    pointer-events: none;
}

.list-png-medal-file {
    height: 60px !important;
    width: auto !important;
    filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.3));
}

/* 2단 이미지 썸네일 컴파일 래퍼 클래스 */
.list-img-content-wrap {
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column;
}

.list-split-img {
    width: 100%; 
    height: 50%; 
    object-fit: cover; 
    display: block;
}

.list-full-img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
}

.list-no-image {
    background: #f1f5f9; 
    color: #94a3b8; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px;
}

/* 결과 없음 알림 컨테이너 */
.list-no-item-fallback {
    text-align: center; 
    padding: 30px 0; 
    color: #94a3b8; 
    font-size: 13px; 
    width: 100%;
}

.list-entire-empty-fallback {
    padding: 100px 0; 
    background: #fff; 
    border: 1px solid #e5e5e5; 
    border-radius: 7px; 
    margin-bottom: 30px;
}

/* =========================================================================
   [🔥 하이브리드 미디어 쿼리 패치 완벽 결착 벨트]
   ========================================================================= */
.idx-pc-only { display: block; }
.idx-mobile-only { display: none; }

@media (max-width: 991px) { 
    .grid-col-premium { width: 50%; } 
    .grid-col-banner { width: 33.33333%; } 
}

@media (max-width: 767px) {
    .pnav-grand-zone { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); padding: 10px; }
    .idx-pc-only { display: none !important; }
    .idx-mobile-only { display: flex !important; }
    
    .grid-col-special, 
    .grid-col-premium, 
    .grid-col-banner { 
        width: 100% !important; 
    }
    
    .webzine-flex-box { 
        display: flex !important; 
        height: 200px !important; 
        width: 100% !important; 
        flex-direction: row !important; 
        background: #fff; 
    }
    
    .webzine-img-side { 
        width: 40% !important; 
        min-width: 140px !important; 
        height: 100% !important; 
        border-right: 1px solid #e2e8f0 !important; 
        border-bottom: none !important; 
    }
    
    .webzine-info-side { 
        width: 60% !important; 
        height: 100% !important; 
        padding: 12px 15px !important; 
        box-sizing: border-box; /* 패딩 오타 디버깅 마감 */
    }
    
    .premium-nav-filter { flex-wrap: wrap; height: auto; padding: 5px 10px; }
    .pnav-btn { flex: 1; height: 35px; border-right: none; justify-content: center; }
    .pnav-status { width: 100%; padding: 5px 0; text-align: center; border-top: 1px solid #444; margin-top: 5px; }
    .pnav-search-box { width: 100%; margin: 5px 0; }
    .pnav-search-input { width: 85%; }
}

@media (max-width: 480px) { 
    .grid-col-premium, 
    .grid-col-banner { 
        width: 100% !important; 
    } 
}

#board_view_con img, 
.board-view-file-conts img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: inline-block !important;
}