@charset "utf-8";

/* 게시판 읽기 스킨 CSS - 최적화 버전 */

/* 게시물 타이틀 */
#bo_v_title { 
    padding: 25px 30px 15px; 
    border-bottom: 1px solid var(--border-color); 
}

#bo_v_title .bo_v_cate { 
    display: inline-block; 
    padding: 3px 10px; 
    background: var(--input-bg); 
    color: var(--accent-color); 
    font-size: 0.8rem; 
    border-radius: 15px; 
    margin-bottom: 10px; 
    font-weight: 500; 
}

#bo_v_title .bo_v_tit { 
    font-size: 1.6rem; 
    margin: 10px 0 0; 
    line-height: 1.3; 
    font-weight: 600; 
    color: var(--body-color); 
    word-break: keep-all; 
}

/* 정보 영역 */
#bo_v_info { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 30px; 
    border-bottom: 1px solid var(--border-color); 
}

.profile_info { 
    display: flex; 
    align-items: center; 
}

.profile_info .pf_img { 
    margin-right: 12px; 
}

.profile_info_ct { 
    line-height: 1.4; 
}

.profile_info_ct strong { 
    font-weight: 600; 
    display: inline-block; 
    margin-right: 10px; 
    font-size: 1rem; 
}

.profile_info_ct i { 
    color: var(--secondary-color); 
    margin-right: 3px; 
}

.if_date { 
    color: var(--secondary-color); 
    font-size: 0.9rem; 
    display: inline-block; 
    margin-left: 5px; 
}

/* 상단 버튼 */
#bo_v_top { 
    padding: 0; 
}

.bo_v_com { 
    display: flex; 
    gap: 8px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}

/* 버튼 스타일 */
.bo_v_com .btn { 
    width: 40px; 
    height: 40px; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 10%; 
    background: var(--input-bg); 
    color: var(--secondary-color); 
    transition: all 0.3s ease; 
    border: none; 
    overflow: hidden; 
    position: relative; 
}

.bo_v_com .btn:hover { 
    background: var(--accent-color); 
    color: white; 
    transform: translateY(-2px); 
}

.bo_v_com .btn i { 
    font-size: 1.1rem; 
}

/* 본문 내용 */
#bo_v_atc { 
    padding: 30px; 
    border-bottom: 1px solid var(--border-color); 
    line-height: 1.7; 
}

#bo_v_atc_title { 
    position: absolute; 
    font-size: 0; 
    line-height: 0; 
    overflow: hidden; 
}

#bo_v_img { 
    margin-bottom: 30px; 
}

#bo_v_img a.view_image img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    margin: 0 auto; 
    border-radius: 5px; 
    transition: transform 0.3s ease; 
}

#bo_v_img a.view_image:hover img { 
    transform: scale(1.02); 
}

#bo_v_con { 
    margin-bottom: 30px; 
    font-size: 1.05rem; 
    line-height: 1.8; 
    color: var(--body-color); 
    word-break: break-word; 
}

#bo_v_con img { 
    max-width: 100%; 
    height: auto; 
    border-radius: 5px; 
}

#bo_v_con a { 
    color: var(--accent-color); 
    text-decoration: underline; 
}

#bo_v_con a:hover { 
    color: var(--button-hover); 
}

/* 공유 버튼 */
#bo_v_share { 
    margin-bottom: 20px; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
}

#bo_v_share .btn { 
    padding: 5px 15px; 
    border-radius: 20px; 
    margin-left: 8px; 
    height: auto; 
    background: var(--input-bg); 
    color: var(--body-color); 
}

#bo_v_share .btn:hover { 
    background: var(--accent-color); 
    color: white; 
}

#bo_v_share .btn i { 
    margin-right: 5px; 
}

#bo_v_sns { 
    display: flex; 
    gap: 8px; 
}

/* 추천/비추천 */
#bo_v_act { 
    margin: 30px 0; 
    text-align: center; 
}

.bo_v_act_gng { 
    display: inline-block; 
    margin: 0 10px; 
    position: relative; 
}

.bo_v_good, .bo_v_nogood { 
    display: inline-flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    border: 1px solid var(--border-color); 
    font-size: 0.95rem; 
    color: var(--body-color); 
    transition: all 0.3s ease; 
}

.bo_v_good:hover { 
    background: #e9f9ef; 
    border-color: #a3e0be; 
    color: #2db65f; 
}

.bo_v_nogood:hover { 
    background: #fff0f0; 
    border-color: #ffc1c1; 
    color: #e74c3c; 
}

.bo_v_good i, .bo_v_nogood i { 
    font-size: 2rem; 
    margin-bottom: 5px; 
}

.bo_v_good strong, .bo_v_nogood strong { 
    display: block; 
    margin-top: 3px; 
}

#bo_v_act_good, #bo_v_act_nogood { 
    display: none; 
    position: absolute; 
    top: 85px; 
    left: 50%; 
    transform: translateX(-50%); 
    padding: 8px 15px; 
    border-radius: 5px; 
    background: var(--accent-color); 
    color: white; 
    font-size: 0.9rem; 
    white-space: nowrap; 
}

#bo_v_act_good:after, #bo_v_act_nogood:after { 
    content: ""; 
    position: absolute; 
    top: -6px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 6px 6px 6px; 
    border-color: transparent transparent var(--accent-color) transparent; 
}

/* 첨부파일 */
#bo_v_file, #bo_v_link { 
    margin: 20px 30px; 
}

#bo_v_file h2, #bo_v_link h2 { 
    margin: 0 0 10px; 
    font-size: 1.1rem; 
}

#bo_v_file ul, #bo_v_link ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
}

#bo_v_file li, #bo_v_link li { 
    position: relative; 
    padding: 15px; 
    margin-bottom: 10px; 
    border: 1px solid var(--border-color); 
    border-radius: 5px; 
    background: var(--input-bg); 
    transition: all 0.3s ease; 
}

#bo_v_file li:hover, #bo_v_link li:hover { 
    background: var(--card-bg); 
    border-color: var(--accent-color); 
}

#bo_v_file li i, #bo_v_link li i { 
    float: left; 
    color: var(--accent-color); 
    font-size: 2rem; 
    margin-right: 15px; 
}

#bo_v_file a, #bo_v_link a { 
    float: left; 
    display: block; 
    color: var(--body-color); 
    font-weight: 500; 
    font-size: 1rem; 
    max-width: calc(100% - 45px); 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
}

#bo_v_file a:hover, #bo_v_link a:hover { 
    color: var(--accent-color); 
    text-decoration: underline; 
}

.bo_v_file_cnt, .bo_v_link_cnt { 
    display: block; 
    margin-top: 5px; 
    margin-left: 40px; 
    color: var(--secondary-color); 
    font-size: 0.85rem; 
    clear: both; 
}

/* 이전글 다음글 */
.bo_v_nb { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    border-top: 1px solid var(--border-color); 
}

.bo_v_nb li { 
    padding: 15px 30px; 
    border-bottom: 1px solid var(--border-color); 
    transition: all 0.3s ease; 
}

.bo_v_nb li:hover { 
    background: var(--input-bg); 
}

.bo_v_nb .nb_tit { 
    display: inline-block; 
    color: var(--secondary-color); 
    margin-right: 10px; 
    font-weight: 500; 
}

.bo_v_nb .nb_tit i { 
    margin-right: 5px; 
}

.bo_v_nb a { 
    color: var(--body-color); 
    font-weight: 500; 
    margin-right: 10px; 
    max-width: 60%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: inline-block; 
    vertical-align: middle; 
}

.bo_v_nb a:hover { 
    color: var(--accent-color); 
}

.bo_v_nb .nb_date { 
    float: right; 
    color: var(--secondary-color); 
    font-size: 0.85rem; 
}

/* 반응형 - 모바일 레이아웃 최적화 */
@media (max-width: 768px) {
    #bo_v_title, #bo_v_info, #bo_v_atc { 
        padding: 15px; 
    }
    
    #bo_v_title .bo_v_tit { 
        font-size: 1.3rem; 
    }
    
    #bo_v_info { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px; 
    }
    
    #bo_v_info .profile_info { 
        margin-bottom: 10px; 
        width: 100%; 
    }
    
    .profile_info .pf_img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        box-sizing: content-box !important;
        background: transparent;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .profile_info .pf_img img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        box-sizing: border-box !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block;
        overflow: hidden;
    }
    
    .profile_info_ct { 
        display: flex; 
        flex-direction: column; 
        width: 100%; 
    }
    
    .profile_info_ct strong { 
        font-size: 1.1rem; 
        display: block; 
        margin-bottom: 5px; 
        margin-right: 0; 
    }
    
    .profile_info_ct a { 
        margin: 2px 10px 2px 0; 
        display: inline-block; 
    }
    
    .profile_info_ct .if_date { 
        margin: 2px 0; 
        display: inline-block; 
    }
    
    .profile_info_ct i { 
        margin-right: 5px; 
    }
    
    #bo_v_top { 
        width: 100%; 
        margin-top: 10px; 
    }
    
    .bo_v_nb li { 
        padding: 12px 15px; 
    }
    
    .bo_v_nb .nb_date { 
        display: none; 
    }
    
    #bo_v_file, #bo_v_link { 
        margin: 15px; 
    }
    
    #bo_v_con { 
        font-size: 1rem; 
        line-height: 1.6; 
    }
}

@media (max-width: 576px) {
    #bo_v_title, #bo_v_info, #bo_v_atc { 
        padding: 12px; 
    }
    
    #bo_v_title .bo_v_tit { 
        font-size: 1.2rem; 
    }
    
    .profile_info_ct strong { 
        font-size: 1rem; 
    }
    
    .bo_v_com .btn { 
        width: 35px; 
        height: 35px; 
    }
    
    #bo_v_share .btn { 
        padding: 3px 10px; 
        font-size: 0.85rem; 
    }
}