@charset "utf-8";

/* [1] 불필요한 요소 완전 숨김 (이미지 목록, 검색대상, 게시물 검색 등) */
#bo_gallery h2, 
.img_list_tit, 
#bo_sch legend, 
#bo_sch h2,
#bo_sch label[for="sfl"], /* '검색대상' 라벨 제거 */
.sound_only { 
    display: none !important; 
}

/* [2] 상단 네비게이션 및 전체 건수 정렬 */
#nav { 
    background: #1e293b; 
    padding: 12px 0; 
}
#nav .nav_wr { 
    margin: 0 auto; 
    max-width: 1400px; 
    padding: 0 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
#bo_list_total { 
    position: static !important; 
    color: #fff !important; 
    font-size: 14px;
}
#bo_list_total span { color: #ffff00; font-weight: bold; }

/* [3] 검색영역 및 글쓰기 버튼 정렬 */
.bo_fx {
    margin: 25px auto;
    max-width: 1400px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

#bo_sch {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 3px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#bo_sch form { display: flex; align-items: center; }
#bo_sch select {
    border: 0;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    background: transparent;
    border-right: 1px solid #e5e7eb;
    outline: none;
}
#bo_sch .sch_input {
    border: 0;
    height: 36px;
    padding: 0 15px;
    width: 200px;
    font-size: 13px;
    outline: none;
}
#bo_sch .sch_btn {
    border: 0;
    background: none;
    color: #fa576b;
    font-size: 18px;
    padding: 0 12px;
    cursor: pointer;
}

.btn_wr { list-style: none; padding: 0; margin: 0; }
.btn_wr .btn_b02 {
    display: inline-block;
    padding: 10px 25px;
    background: #1e293b;
    color: #fff !important;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.3s;
}
.btn_wr .btn_b02:hover { background: #fa576b; }

/* [4] 갤러리 리스트: 5열 레이아웃 및 효과 */
#bo_gallery { margin: 0 auto; max-width: 1400px; padding: 20px 10px; clear: both; }
#gall_ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
#gall_ul li { width: 20%; padding: 8px; box-sizing: border-box; }

.list-item-div { 
    position: relative; 
    border: 1px solid #e2e8f0; 
    background: #fff; 
    border-radius: 12px; 
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    display: flex; 
    flex-direction: column; 
}

.list-item-div:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border: 1px solid; 
    border-image-source: linear-gradient(318deg, #0097F6 0%, #09DD8D 100%);
    border-image-slice: 0;
}



/* Glowing 효과 */
.list-item-div:before { 
    content: ''; 
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); 
    position: absolute; 
    top: -2px; left: -2px; 
    background-size: 400%; 
    z-index: -1; 
    filter: blur(8px); 
    width: calc(100% + 4px); 
    height: calc(100% + 4px); 
    animation: glowing 10s linear infinite; 
    opacity: 0; 
    transition: opacity 0.3s; 
    border-radius: 14px; 
}
.list-item-div:hover:before { opacity: 0.6; }
@keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }

.img-wrap { position: relative; width: 100%; padding-bottom: 80%; overflow: hidden; background: #f1f5f9; }
.img-render { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.5s ease; }
.list-item-div:hover .img-render { transform: scale(1.1); }

.list-safety-info { 
    padding: 10px; 
    flex-grow: 1; 
}

.list-safety-info table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.list-safety-info th {
    background: #1e293b;
    color: #f1f5f9;
    width: 90px;
    height: 38px;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid #334155;
    padding: 0 10px;
}

.list-safety-info th > div {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.list-safety-info td {
    background: #fff;
    color: #1e293b;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.list-safety-info tr:last-child th,
.list-safety-info tr:last-child td {
    border-bottom: 0;
}

.list-safety-info .site_code {
    color: #0097F6;
    background: #f0f9ff;
	padding-left: 15px;
    border-radius: 4px;
}

.list-safety-item-btn-wrap { 
    display: flex; 
    gap: 8px; 
    padding: 8px 10px 15px; 
}
.btn_safety_view, .btn_safety_site { flex: 1; height: 34px; line-height: 34px; text-align: center; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none !important; color: #fff !important; }
.btn_safety_view { background: #3b82f6; }
.btn_safety_site { background: #1d4ed8; }

/* [5] 페이지네이션 (중첩 해결) */
.pg_wrap { margin: 50px 0; text-align: center; font-size: 0; }
.pg_page, .pg_current, .pg_start, .pg_prev, .pg_next, .pg_end { 
    display: inline-block; 
    width: 38px; height: 38px; line-height: 36px; 
    border: 1px solid #cbd5e1; margin: 0 2px; 
    border-radius: 6px; background: #fff; color: #475569; 
    text-decoration: none; font-size: 14px; 
    vertical-align: middle; overflow: hidden;
}
.pg_page b, .pg_current b { display: none !important; }
.pg_current { background: #fa576b; border-color: #fa576b; color: #fff; font-weight: bold; }

/* [6] 반응형 */
@media (max-width: 1200px) { #gall_ul li { width: 25%; } }
@media (max-width: 900px) { #gall_ul li { width: 33.33%; } }
@media (max-width: 639px) {
    #gall_ul li { width: 50%; }
    .bo_fx { flex-direction: column; align-items: stretch; }
}