@charset "utf-8";

/* 리스트/갤러리/웹진 아이콘 버튼 */
.icon-button {display: inline-block;margin: 5px;}
.icon-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 1px;
    text-decoration: none;
    color: #e6e6e6;
    /* background-color: #ffffff;
    border: 1px solid #ccc; */
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
}

.icon-button a:hover {
    /* background-color: #e0e0e0;
    border-color: #bbb; */
    color: #b4b4b4;
}

/* 선택된 버튼 */
.icon-button.active a {
    /* background-color: #dddddd;
    border-color: #b4b4b4; */
    color: #7b69c7;
}

/* 아이콘과 텍스트 사이 여백 조정 */
.icon-button .fa-image,
.icon-button .fa-list,
.icon-button .fa-search {margin-right: 0px;font-size: 22px;}
/* 웹진 */
#webzine_list .thumb_area {margin-top: 0px;margin-bottom: 0px;}
#webzine_list .td_subject {padding: 0;}
#webzine_list .td_subject {padding-top: 0 !important;padding-bottom: 0 !important;}

/* 갤러리 목록 */
#bo_gall h2 {margin: 0;padding: 0;width: 1px;height: 1px;font-size: 0;line-height: 0;overflow: hidden;}
#bo_gall #gall_ul {margin: 10px -10px 0;padding: 0;list-style: none;zoom: 1;}
#bo_gall #gall_ul:after {display: block;visibility: hidden;clear: both;content: "";}
#bo_gall .gall_li .gall_chk {position: absolute;top: 0;left: 0;padding: 5px;z-index: 1;}

.gall_row {display: flex;flex-wrap: wrap;}
.gall_li {display: flex;flex-direction: column;justify-content: space-between;}
#bo_gall .gall_box {
    position: relative;
    margin:0 0 20px 0;; /* 상우하좌 */
    border-radius: 10px; 
    width: 100%;
    box-sizing: border-box; /* 패딩과 보더를 포함하여 너비 계산 */
    border: 1px solid #ddd; 
    background: linear-gradient(145deg, #ffffff, #f1f1f1); /* 부드러운 배경 그라데이션 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 10px; /* 내부 여백 */
    transition: all 0.3s ease-in-out; 
}

/* 마우스 오버 시 효과 */
#bo_gall .gall_box:hover {
    border: 1px solid #aaa; /* 테두리 강조 */
    /* box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);  그림자 강조 
    transform: translateY(-5px); 살짝 위로 이동하는 효과 */
}
#bo_gall .gall_con {position: relative;}
.gall_row .col-gn-0,
.gall_row .col-gn-1,
.gall_row .col-gn-2,
.gall_row .col-gn-3,
.gall_row .col-gn-4,
.gall_row .col-gn-5,
.gall_row .col-gn-6,
.gall_row .col-gn-7,
.gall_row .col-gn-8,
.gall_row .col-gn-9,
.gall_row .col-gn-10 {position: relative;min-height: 1px;padding-left: 10px;padding-right: 10px;float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;box-sizing: border-box;margin-left: 0;}
.gall_row .col-gn-0,
.gall_row .col-gn-1 {width: 100%;}
.gall_row .col-gn-2 {width: 50%;}
.gall_row .col-gn-3 {width: 33.33333333%;}
.gall_row .col-gn-4 {width: 25%;}
.gall_row .col-gn-5 {width: 20%;}
.gall_row .col-gn-6 {width: 16.66666667%;}
.gall_row .col-gn-7 {width: 14.28571428%;}
.gall_row .col-gn-8 {width: 12.5%;}
.gall_row .col-gn-9 {width: 11.11111111%;}
.gall_row .col-gn-10 {width: 10%;}
.gall_row .box_clear {clear: both;}

/* #bo_gall .gall_now .gall_text_href a {
    color: #37c200;
} */

#bo_gall .gall_href a:link,
#bo_gall .gall_href a:focus,
#bo_gall .gall_href a:hover {
    text-decoration: none;
}
#bo_gall .gall_img {
    border-bottom: 1px solid #eee;
    text-align: center;
    overflow: hidden;
    border-radius: 10px; /* 부드러운 모서리 */
}
#bo_gall .gall_img a,
#bo_gall .gall_img .no_image,
#bo_gall .gall_img .is_notice {
    display: block;border-radius: 10px; /* 부드러운 모서리 */
}
#bo_gall .gall_img img,
#bo_gall .gall_img video {
    max-width: 100%;border-radius: 10px; /* 부드러운 모서리 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
#bo_gall .gall_img img:hover,
#bo_gall .gall_img video:hover {
    transform: scale(1.05); /* 약간의 확대 효과 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}
#bo_gall .gall_img span {
    display: inline-block;
    background: #eaeaea;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.25em;
    color: #777;
}

#bo_gall .gall_text_href {margin:10px 0}
#bo_gall .gall_text_href a {font-weight:bold}
#bo_gall .gall_text_href img {margin:0 0 0 4px}
#bo_gall .bo_tit {display:block;line-height:30px;font-weight:bold;color:#000;font-size:1.2em}
#bo_gall .bo_tit .cnt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}

#bo_gall .bo_cnt {color:#acacac;line-height:18px}
#bo_gall .profile_img img {border-radius:50%}
#bo_gall .bo_tit .fa-download {width:16px;height:16px;line-height:16px;background:#e89f31;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle}
#bo_gall .bo_tit .fa-link {width:16px;height:16px;line-height:16px;background:#ad68d8;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle;font-weight:normal}
#bo_gall .bo_tit .fa-link {width:16px;height:16px;line-height:16px;background:#ad68d8;color:#fff;text-align:center;font-size:10px;border-radius:2px;margin-right:2px;vertical-align:middle;margin-right:2px}
#bo_gall .bo_tit .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.825em;color:#ffffff;background:#991212;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:baseline}
#bo_gall .bo_tit .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#fff;background:#e52955;text-align:center;border-radius:2px;vertical-align:middle;margin-right:2px}
#bo_gall .bo_tit .fa-lock {display:inline-block;line-height:16px;color:#999;text-align:center;vertical-align:middle}

#bo_gall .gall_info {line-height:1.5em;line-height:20px}
#bo_gall .gall_info strong {display:inline-block;margin:0}
#bo_gall .gall_info i {font-size:12px}
#bo_gall .gall_info .gall_date,
#bo_gall .gall_info .gall_view {display:inline-block;margin-left:10px;color:#777}

#bo_gall .gall_option {position:absolute;top:10px;right:10px}
#bo_gall .gall_option strong {background:#fff;padding:5px 10px;border-radius:30px;-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}

@media (max-width: 768px) {
    #bo_gall .gall_con {
        margin: 0;
        padding: 0;
    }

    #bo_gall .gall_img {
        margin-bottom: 0;
        background: #7b69c7;
        height: auto !important;
        overflow: hidden;
    }

    /* #bo_gall .gall_text_href {
        margin: 0.5em 0; 
    } */

    #bo_gall .bo_tit {
        margin: 0;
        line-height: 1.2em; /* 줄 높이를 줄이기 */
        font-size: 1.2rem; /* 상대적인 폰트 크기 */
    }

    #bo_gall .bo_cnt {
        margin: 0;
        font-size: 0.9rem; /* 상대적인 폰트 크기 */
    }

    #bo_gall .gall_info {
        margin-top: 0.5em; /* 상대적인 여백 */
    }

    #bo_gall .gall_option {
        position: static; /* 모바일에서 절대 위치 제거 */
        margin-top: 0.5em; /* 상대적인 여백 */
    }

    .gall_row {
        display: flex;
        flex-wrap: wrap;
    }

    .gall_row .col-gn-2,
    .gall_row .col-gn-3,
    .gall_row .col-gn-4,
    .gall_row .col-gn-5,
    .gall_row .col-gn-6,
    .gall_row .col-gn-7,
    .gall_row .col-gn-8,
    .gall_row .col-gn-9,
    .gall_row .col-gn-10 {
        width: calc(50% - 0px); /* 두 개씩 배치 (간격 포함) */
        margin: 0px; /* 요소 간의 간격 */
    }

    #bo_gall .gall_img img,
    #bo_gall .gall_img video {
        width: 100%;
        height: auto !important;
        object-fit: cover; /* 부모 요소를 채우도록 설정 */
    }
}


/* 커멘트 및 리스트페이지 별점 */
.bo_cnt .fa-star-o::before { font-weight: 500; }
.bo_cnt i {
    color: gold; /* 별점 색상 */
    font-size: 16px;
}
.bo_cnt {
    word-wrap: break-word; /* 긴 단어를 줄 바꿈 */
    word-break: break-all; /* 단어가 너무 길어서 줄을 넘칠 때 줄 바꿈 */
}
.subject {
    word-wrap: break-word;
    word-break: break-all;
}