hmw1001
398 lines
23 KiB
CSS
398 lines
23 KiB
CSS
@charset "utf-8";
|
|
|
|
/*
|
|
* gallery_general 스킨 전용 CSS
|
|
*/
|
|
|
|
/* --- 공통 유틸리티 클래스 --- */
|
|
.sound_only { display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; width: 0 !important; height: 0 !important; }
|
|
|
|
|
|
/* ==========================================================================
|
|
게시판 목록 (list.skin.php)
|
|
========================================================================== */
|
|
#bo_gall { margin-bottom: 30px; }
|
|
#bo_gall h2 { margin: 0; padding: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden; }
|
|
|
|
/* 카테고리 */
|
|
#bo_gall #bo_cate { margin: 25px 0; }
|
|
#bo_gall #bo_cate h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
|
|
#bo_gall #bo_cate ul { zoom: 1; }
|
|
#bo_gall #bo_cate ul:after { display: block; visibility: hidden; clear: both; content: ""; }
|
|
#bo_gall #bo_cate li { display: inline-block; padding: 2px; }
|
|
#bo_gall #bo_cate a { display: block; background: #f8f9fa; color: #666; padding: 8px 15px; border-radius: 20px; border: 1px solid #e9ecef; transition: all 0.2s; }
|
|
#bo_gall #bo_cate a:focus, #bo_gall #bo_cate a:hover, #bo_gall #bo_cate a:active { text-decoration: none; background: #e7f1ff; color: #4a90e2; border-color: #4a90e2; }
|
|
#bo_gall #bo_cate #bo_cate_on { z-index: 2; background: #4a90e2; color: #fff; font-weight: bold; border: 1px solid #4a90e2; box-shadow: 0 2px 5px rgba(74, 144, 226, 0.3); }
|
|
|
|
/* 상단 공통 영역 */
|
|
#bo_gall .bo_fx { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
|
|
#bo_gall .bo_fx_left { display: flex; align-items: center; gap: 10px; }
|
|
#bo_gall .bo_fx_right { display: flex; align-items: center; gap: 10px; }
|
|
|
|
#bo_gall #bo_list_total { line-height: 34px; font-size: 0.95em; color: #666; }
|
|
|
|
#bo_gall .btn_bo_user { margin: 0; padding: 0; list-style: none; display: flex; gap: 5px; }
|
|
|
|
/* 뷰 모드 전환 버튼 */
|
|
#bo_gall .view-mode-switcher { display: flex; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; background: #fff; }
|
|
#bo_gall .view-mode-switcher .btn_view_mode { background: #fff; border: none; padding: 6px 12px; cursor: pointer; color: #adb5bd; font-size: 1.1em; transition: all 0.2s; }
|
|
#bo_gall .view-mode-switcher .btn_view_mode:hover { color: #4a90e2; background: #f8f9fa; }
|
|
#bo_gall .view-mode-switcher .btn_view_mode.active { background: #e7f1ff; color: #4a90e2; }
|
|
#bo_gall .view-mode-switcher .btn_view_mode:not(:last-child) { border-right: 1px solid #e9ecef; }
|
|
|
|
/* 뷰 모드에 따른 표시/숨김 */
|
|
#bo_gall.view-mode-card .list-view { display: none; }
|
|
#bo_gall.view-mode-list .card-list-view { display: none; }
|
|
|
|
/* --- 카드형 목록 스타일 --- */
|
|
#bo_gall .card-list-view #gall_ul { margin: 0; padding: 0; list-style: none; border-top: none; }
|
|
#bo_gall .card-list-view #gall_ul:after { display: block; visibility: hidden; clear: both; content: ""; }
|
|
#bo_gall .card-list-view .gall_li { float: left; margin: 20px 0 0; padding: 0 10px; box-sizing: border-box; }
|
|
#bo_gall .card-list-view .gall_box { position: relative; border: 1px solid #eee; background: #fff; border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
|
|
#bo_gall .card-list-view .gall_box:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
|
|
#bo_gall .card-list-view .gall_chk { position: absolute; top: 10px; left: 10px; z-index: 1; }
|
|
#bo_gall .card-list-view .gall_con { margin: 0; padding: 0; }
|
|
#bo_gall .card-list-view .gall_img { overflow: hidden; position: relative; padding-top: 65%; border-bottom: 1px solid #f1f1f1; }
|
|
#bo_gall .card-list-view .gall_img a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
|
#bo_gall .card-list-view .gall_img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
|
|
#bo_gall .card-list-view .gall_box:hover .gall_img img { transform: scale(1.05); }
|
|
#bo_gall .card-list-view .gall_img .no_image { display: block; width: 100%; height: 100%; background: #f8f9fa; text-align: center; line-height: 150px; color: #ccc; }
|
|
#bo_gall .card-list-view .gall_img .is_notice { display: block; width: 100%; height: 100%; background: #f8f9fa; text-align: center; line-height: 150px; color: #999; font-weight: bold; }
|
|
|
|
#bo_gall .card-list-view .gall_text_href { padding: 15px; }
|
|
#bo_gall .card-list-view .gall_text_href a { color: #333; font-weight: 600; text-decoration: none; }
|
|
#bo_gall .card-list-view .bo_cate_link { display: inline-block; margin-bottom: 5px; font-size: 0.85em; color: #4a90e2 !important; font-weight: 500 !important; background: #e7f1ff; padding: 2px 8px; border-radius: 4px; }
|
|
#bo_gall .card-list-view .bo_tit_link { display: block; font-size: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; margin-top: 5px; }
|
|
#bo_gall .card-list-view .cnt_cmt { display: inline-block; margin: 0 0 0 5px; font-weight: bold; color: #ff6b6b; font-size: 0.85em; background: #fff0f0; padding: 0 5px; border-radius: 10px; }
|
|
|
|
#bo_gall .card-list-view .gall_name { padding: 0 15px 10px; font-size: 0.9em; color: #666; }
|
|
#bo_gall .card-list-view .gall_name .profile_img img { border-radius: 50%; width: 20px; height: 20px; vertical-align: middle; margin-right: 5px; }
|
|
#bo_gall .card-list-view .gall_info { padding: 12px 15px; border-top: 1px solid #f1f1f1; font-size: 0.85em; color: #999; background: #fcfcfc; display: flex; justify-content: space-between; }
|
|
#bo_gall .card-list-view .gall_info i { margin-right: 3px; }
|
|
|
|
/* --- 리스트형 목록 스타일 --- */
|
|
#bo_gall .list-view { margin-top: 20px; border-top: 2px solid #333; }
|
|
#bo_gall .list-view .list-group { list-style: none; padding: 0; margin: 0; }
|
|
#bo_gall .list-view .list-group-header,
|
|
#bo_gall .list-view .list-group-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; }
|
|
#bo_gall .list-view .list-group-header { background: #f8f9fa; font-weight: 600; color: #555; font-size: 0.95em; }
|
|
#bo_gall .list-view .list-cell { padding: 0 10px; box-sizing: border-box; }
|
|
#bo_gall .list-view .list-cell.num { width: 80px; text-align: center; color: #888; }
|
|
#bo_gall .list-view .list-cell.title { flex-grow: 1; }
|
|
#bo_gall .list-view .list-cell.name { width: 120px; text-align: center; color: #666; }
|
|
#bo_gall .list-view .list-cell.date { width: 100px; text-align: center; color: #888; font-size: 0.9em; }
|
|
#bo_gall .list-view .list-cell.hit { width: 80px; text-align: center; color: #888; font-size: 0.9em; }
|
|
#bo_gall .list-view .list-cell.status { width: 80px; text-align: center; }
|
|
|
|
#bo_gall .list-view .list-group-item:hover { background: #fbfbfb; }
|
|
#bo_gall .list-view .list-group-item .bo_cate_link { font-size: 0.85em; color: #4a90e2; margin-right: 8px; background: #e7f1ff; padding: 2px 6px; border-radius: 4px; }
|
|
#bo_gall .list-view .list-group-item a { text-decoration: none; color: #333; font-weight: 500; }
|
|
#bo_gall .list-view .list-group-item a:hover { text-decoration: underline; color: #4a90e2; }
|
|
#bo_gall .list-view .list-group-item .cnt_cmt { font-size: 0.85em; color: #ff6b6b; margin-left: 5px; font-weight: bold; }
|
|
|
|
#bo_gall .empty_list { padding: 100px 0; text-align: center; color: #999; font-size: 1.1em; }
|
|
|
|
/* 💡 [추가] 노출여부 토글 스위치 */
|
|
#bo_gall .status-toggle-wrap { display: flex; align-items: center; gap: 5px; }
|
|
#bo_gall .status-label { font-size: 0.9em; color: #666; }
|
|
#bo_gall .status-toggle-switch {
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 22px;
|
|
border-radius: 11px;
|
|
background-color: #ccc;
|
|
position: relative;
|
|
transition: background-color 0.2s;
|
|
}
|
|
#bo_gall .status-toggle-switch .switch-handle {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.2s;
|
|
}
|
|
#bo_gall .status-toggle-switch.on {
|
|
background-color: #28a745; /* Green for 'on' */
|
|
}
|
|
#bo_gall .status-toggle-switch.off {
|
|
background-color: #666; /* Red for 'off' */
|
|
}
|
|
#bo_gall .status-toggle-switch.on .switch-handle {
|
|
transform: translateX(18px);
|
|
}
|
|
#bo_gall .status-toggle-switch.off .switch-handle {
|
|
transform: translateX(0);
|
|
}
|
|
#bo_gall .list-view .list-cell.status {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 반응형 컬럼 */
|
|
#bo_gall .col-gn-1 { width: 100%; }
|
|
#bo_gall .col-gn-2 { width: 50%; }
|
|
#bo_gall .col-gn-3 { width: 33.3333%; }
|
|
#bo_gall .col-gn-4 { width: 25%; }
|
|
#bo_gall .col-gn-5 { width: 20%; }
|
|
|
|
@media (max-width: 768px) {
|
|
#bo_gall .col-gn-3, #bo_gall .col-gn-4, #bo_gall .col-gn-5 { width: 50%; }
|
|
#bo_gall .box_clear { clear: none; }
|
|
#bo_gall .gall_li:nth-child(2n+1) { clear: both; }
|
|
|
|
#bo_gall .list-view .list-cell.name,
|
|
#bo_gall .list-view .list-cell.date,
|
|
#bo_gall .list-view .list-cell.hit { width: 80px; font-size: 0.85em; }
|
|
#bo_gall .list-view .list-cell.num { width: 60px; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#bo_gall .col-gn-2, #bo_gall .col-gn-3, #bo_gall .col-gn-4, #bo_gall .col-gn-5 { width: 100%; }
|
|
#bo_gall .gall_li:nth-child(2n+1) { clear: none; }
|
|
|
|
#bo_gall .list-view .list-group-header { display: none; } /* 모바일 헤더 숨김 */
|
|
#bo_gall .list-view .list-group-item { flex-wrap: wrap; padding: 15px 0; }
|
|
#bo_gall .list-view .list-cell.num { display: none; }
|
|
#bo_gall .list-view .list-cell.title { width: 100%; margin-bottom: 5px; font-size: 1.1em; }
|
|
#bo_gall .list-view .list-cell.name { width: auto; text-align: left; margin-right: 10px; font-size: 0.9em; }
|
|
#bo_gall .list-view .list-cell.date { width: auto; text-align: left; margin-right: 10px; font-size: 0.9em; }
|
|
#bo_gall .list-view .list-cell.hit { width: auto; text-align: left; font-size: 0.9em; }
|
|
}
|
|
|
|
/* 검색 */
|
|
#bo_sch { text-align: center; margin: 40px 0; }
|
|
#bo_sch legend { position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
|
|
#bo_sch select { border: 1px solid #ddd; height: 40px; padding: 0 10px; border-radius: 20px 0 0 20px; border-right: 0; outline: none; color: #666; }
|
|
#bo_sch .sch_input { border: 1px solid #ddd; height: 40px; padding: 0 15px; width: 250px; border-radius: 0; border-left: 1px solid #eee; outline: none; }
|
|
#bo_sch .sch_btn { background: #4a90e2; color: #fff; border: 0; height: 40px; padding: 0 20px; cursor: pointer; border-radius: 0 20px 20px 0; font-weight: bold; transition: background 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
|
|
#bo_sch .sch_btn:hover { background: #357abd; }
|
|
|
|
/* 하단 버튼 그룹 좌우 정렬 */
|
|
#bo_gall form .bo_fx {
|
|
margin-top: 20px;
|
|
border-top: 1px solid #eee;
|
|
padding-top: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
#bo_gall form .bo_fx .bo_fx_left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
#bo_gall form .bo_fx .bo_fx_right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
|
|
/* ==========================================================================
|
|
게시판 쓰기 (write.skin.php)
|
|
========================================================================== */
|
|
#bo_w { max-width: 900px; margin: 0 auto; padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
|
|
#bo_w h2.sound_only { display: none; } /* 페이지 제목 숨김 */
|
|
|
|
#bo_w .write_div { margin: 15px 0; position: relative; }
|
|
#bo_w .bo_w_info:after { display: block; visibility: hidden; clear: both; content: ""; }
|
|
#bo_w .bo_w_info .frm_input { float: left; width: 32%; }
|
|
#bo_w .bo_w_info .frm_input.required { margin-right: 2%; }
|
|
#bo_w .bo_w_info .frm_input.email { float: right; margin: 0; }
|
|
#bo_w .bo_w_tit { position: relative; }
|
|
#bo_w .bo_w_tit .frm_input { width: 100%; }
|
|
#bo_w .bo_w_link .frm_input { width: 100%; }
|
|
#bo_w .bo_w_flie .file_writ_div { border: 1px solid #e9ecef; background: #f8f9fa; padding: 15px; border-radius: 8px; }
|
|
#bo_w .bo_w_flie .file_input_wrap { margin: 8px 0; }
|
|
#bo_w .bo_w_flie .lb_icon { display: inline-block; width: 30px; text-align: center; color: #888; }
|
|
#bo_w .bo_w_flie .frm_file { width: 100%; }
|
|
#bo_w .bo_w_select select { border: 1px solid #ddd; height: 40px; padding: 0 10px; width: 100%; border-radius: 4px; }
|
|
|
|
#bo_w .frm_label { font-weight: bold; color: #333; margin-bottom: 8px; display: block; }
|
|
#bo_w .frm_input { border: 1px solid #ddd; height: 40px; padding: 0 10px; border-radius: 4px; outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box; }
|
|
#bo_w .frm_input:focus { border-color: #4a90e2; }
|
|
#bo_w textarea.frm_input { height: 100px; padding: 10px; } /* textarea 기본 높이 */
|
|
|
|
#bo_w .btn_confirm { text-align: right; margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; }
|
|
|
|
/* 💡 [수정] 옵션 및 임시저장글 영역 */
|
|
#bo_w .write_options { display: flex; justify-content: space-between; align-items: center; }
|
|
#bo_w .write_options .left_area { display: flex; align-items: center; gap: 15px; }
|
|
#bo_w .write_options .right_area { position: relative; }
|
|
#bo_w #autosave_wrapper { position: static; } /* 기본 position으로 변경 */
|
|
#bo_w #autosave_pop { right: 0; top: 100%; margin-top: 5px; display: none; } /* 처음에는 숨김 */
|
|
|
|
/* 버튼 스타일 */
|
|
#bo_w .btn_submit { background: #4a90e2; color: #fff; border: 0; padding: 10px 25px; font-weight: 600; border-radius: 25px; cursor: pointer; transition: all 0.2s; font-size: 15px; box-shadow: 0 4px 6px rgba(74, 144, 226, 0.2); display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
|
|
#bo_w .btn_submit:hover { background: #357abd; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(74, 144, 226, 0.3); }
|
|
|
|
#bo_w .btn_cancel { background: #f1f3f5; color: #495057; border: 1px solid #e9ecef; padding: 10px 25px; font-weight: 600; border-radius: 25px; text-decoration: none; display: inline-block; transition: all 0.2s; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
|
|
#bo_w .btn_cancel:hover { background: #e9ecef; color: #333; }
|
|
|
|
/* 커스텀 라디오/체크박스 스타일 */
|
|
#bo_w .option_group { display: flex; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 15px; }
|
|
#bo_w .option_group label { display: inline-flex; align-items: center; cursor: pointer; font-size: 0.95em; color: #555; }
|
|
#bo_w .option_group input[type="radio"],
|
|
#bo_w .option_group input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
|
|
#bo_w .option_group .custom-radio,
|
|
#bo_w .option_group .custom-checkbox { display: inline-block; width: 18px; height: 18px; border: 1px solid #ccc; background: #fff; margin-right: 8px; position: relative; flex-shrink: 0; transition: all 0.2s; }
|
|
#bo_w .option_group .custom-radio { border-radius: 50%; }
|
|
#bo_w .option_group .custom-checkbox { border-radius: 4px; }
|
|
|
|
#bo_w .option_group input[type="radio"]:checked + .custom-radio { border-color: #4a90e2; }
|
|
#bo_w .option_group input[type="radio"]:checked + .custom-radio::after { content: ''; display: block; width: 10px; height: 10px; background: #4a90e2; border-radius: 50%; position: absolute; top: 3px; left: 3px; }
|
|
|
|
#bo_w .option_group input[type="checkbox"]:checked + .custom-checkbox { border-color: #4a90e2; background: #4a90e2; }
|
|
#bo_w .option_group input[type="checkbox"]:checked + .custom-checkbox::after { content: ''; display: block; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); position: absolute; top: 2px; left: 6px; }
|
|
|
|
#bo_w .option_group input:disabled + .custom-radio,
|
|
#bo_w .option_group input:disabled + .custom-checkbox { background: #e9ecef; border-color: #dee2e6; }
|
|
#bo_w .option_group input:disabled:checked + .custom-radio::after { background: #adb5bd; }
|
|
#bo_w .option_group input:disabled:checked + .custom-checkbox { background: #adb5bd; border-color: #adb5bd; }
|
|
|
|
#bo_w .date_picker_group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
#bo_w .date_picker_group .date_item { display: flex; flex-direction: column; }
|
|
#bo_w .date_picker_group .frm_label { font-size: 0.9em; color: #666; margin-bottom: 5px; }
|
|
#bo_w .date_picker_group .datepicker { width: 120px; height: 38px; padding: 0 10px; border: 1px solid #ddd; border-radius: 4px; }
|
|
#bo_w .date_picker_group .date_divider { font-size: 1.2em; color: #888; margin-top: 20px; }
|
|
|
|
#bo_w .wr_content { margin-top: 10px; }
|
|
#bo_w .wr_content .text_right { text-align: right; margin-bottom: 5px; color: #888; }
|
|
#bo_w .wr_content .cke_chrome { border: 1px solid #ddd !important; border-radius: 4px !important; }
|
|
|
|
|
|
/* ==========================================================================
|
|
게시판 읽기 (view.skin.php)
|
|
========================================================================== */
|
|
#bo_v { margin-bottom: 20px; background: #fff; border: 1px solid #eee; padding: 30px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
|
|
#bo_v #bo_v_title { font-size: 1.6em; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; word-break: break-all; font-weight: 700; color: #333; display: flex; align-items: center; flex-wrap: wrap; }
|
|
#bo_v #bo_v_title .bo_v_cate { display: inline-block; font-size: 0.55em; vertical-align: middle; background: #e7f1ff; color: #4a90e2; padding: 4px 8px; border-radius: 4px; margin-right: 8px; font-weight: 600; }
|
|
#bo_v #bo_v_info { margin-bottom: 30px; position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
|
|
#bo_v #bo_v_info h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
|
|
#bo_v #bo_v_info .profile_info { display: flex; align-items: center; }
|
|
#bo_v #bo_v_info .profile_info .pf_img { margin-right: 12px; }
|
|
#bo_v #bo_v_info .profile_info .pf_img img { border-radius: 50%; width: 45px; height: 45px; object-fit: cover; border: 1px solid #eee; }
|
|
#bo_v #bo_v_info .profile_info .profile_info_ct { font-size: 0.95em; color: #666; }
|
|
#bo_v #bo_v_info .profile_info strong { color: #333; font-weight: 600; margin-right: 5px; }
|
|
#bo_v #bo_v_info .profile_info .if_date { display: block; color: #999; font-size: 0.9em; margin-top: 3px; font-weight: normal; }
|
|
#bo_v #bo_v_info .profile_info a { color: #4a90e2; text-decoration: none; }
|
|
#bo_v #bo_v_info .profile_info a:hover { text-decoration: underline; }
|
|
#bo_v #bo_v_info .profile_info i { margin-right: 5px; }
|
|
|
|
#bo_v #bo_v_top { margin-top: 0; }
|
|
#bo_v #bo_v_top .btn_bo_user { margin: 0; padding: 0; list-style: none; display: flex; gap: 5px; }
|
|
#bo_v #bo_v_top .btn_bo_user li { float: none; margin: 0; }
|
|
|
|
/* 버튼 스타일 (공통) */
|
|
#bo_gall .btn_b01, #bo_gall .btn_b02, #bo_gall .btn_admin,
|
|
#bo_v .btn_b01, #bo_v .btn_b02, #bo_v .btn_admin {
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 0.92em;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
#bo_gall .btn_b01, #bo_v .btn_b01 { border: 1px solid #e9ecef; background: #fff; color: #555; }
|
|
#bo_gall .btn_b01:hover, #bo_v .btn_b01:hover { background: #f8f9fa; color: #333; border-color: #dee2e6; }
|
|
|
|
#bo_gall .btn_b02, #bo_v .btn_b02 { border: 1px solid #4a90e2; background: #4a90e2; color: #fff; }
|
|
#bo_gall .btn_b02:hover, #bo_v .btn_b02:hover { background: #357abd; border-color: #357abd; color: #fff; box-shadow: 0 2px 4px rgba(74, 144, 226, 0.2); }
|
|
|
|
#bo_gall .btn_admin, #bo_v .btn_admin { border: 1px solid #ff6b6b; background: #fff; color: #ff6b6b; }
|
|
#bo_gall .btn_admin:hover, #bo_v .btn_admin:hover { background: #ff6b6b; color: #fff; }
|
|
|
|
|
|
#bo_v #bo_v_atc { min-height: 200px; padding: 20px 0; }
|
|
#bo_v #bo_v_atc_title { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
|
|
#bo_v #bo_v_img { width: 100%; overflow: hidden; zoom: 1; margin-bottom: 20px; }
|
|
#bo_v #bo_v_img:after { display: block; visibility: hidden; clear: both; content: ""; }
|
|
#bo_v #bo_v_img a { display: block; width: 100%; }
|
|
#bo_v #bo_v_img img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
|
|
#bo_v #bo_v_con { margin: 10px 0 30px; width: 100%; line-height: 1.8em; word-break: break-all; overflow: hidden; font-size: 1.05em; color: #333; }
|
|
#bo_v #bo_v_con img { max-width: 100%; height: auto; }
|
|
|
|
#bo_v #bo_v_act { margin-bottom: 30px; text-align: center; padding-top: 30px; border-top: 1px solid #eee; }
|
|
#bo_v #bo_v_act .btn_b01 { margin: 0 5px; padding: 10px 25px; border-radius: 30px; font-size: 1em; }
|
|
#bo_v #bo_v_act .bo_v_act_gng { position: relative; }
|
|
#bo_v #bo_v_act_good, #bo_v #bo_v_act_nogood { display: none; position: absolute; top: -35px; left: 50%; margin-left: -20px; z-index: 2; padding: 5px 10px; background: rgba(0,0,0,0.8); color: #fff; border-radius: 4px; font-size: 12px; }
|
|
|
|
/* 상태 배지 스타일 */
|
|
#bo_v .status-badge { font-size: 13px; vertical-align: middle; margin-left: 10px; padding: 4px 10px; border-radius: 15px; color: #fff; background-color: #888; font-weight: 500; }
|
|
#bo_v .status-active { background-color: #28a745 !important; }
|
|
#bo_v .status-scheduled { background-color: #17a2b8 !important; }
|
|
#bo_v .status-expired { background-color: #dc3545 !important; }
|
|
#bo_v .status-hidden { background-color: #6c757d !important; }
|
|
|
|
/* 💡 [수정] 더보기 메뉴 개선 */
|
|
#bo_v .more_opt_wrapper { position: relative; }
|
|
#bo_v .more_opt.is_view_btn {
|
|
display: none; /* 기본적으로 숨김 */
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
min-width: 140px;
|
|
margin-top: 8px;
|
|
padding: 8px 0;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
border: 1px solid #e0e0e0;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
z-index: 1000;
|
|
}
|
|
#bo_v .more_opt.is_view_btn.show {
|
|
display: block; /* JS로 .show 클래스 추가 시 보임 */
|
|
}
|
|
#bo_v .more_opt.is_view_btn li {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
#bo_v .more_opt.is_view_btn li a {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 16px;
|
|
color: #333;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
}
|
|
#bo_v .more_opt.is_view_btn li a:hover {
|
|
background-color: #f5f5f5;
|
|
color: #000;
|
|
}
|
|
#bo_v .more_opt.is_view_btn li a i {
|
|
margin-left: 10px;
|
|
color: #888;
|
|
}
|
|
|
|
|
|
/* 커스텀 필드 (view.skin.php) */
|
|
#bo_v .custom-fields { margin-bottom: 30px; padding: 20px; background: #f9f9f9; border-radius: 8px; }
|
|
#bo_v .custom-fields .subtitle { font-size: 1.2em; color: #555; margin-bottom: 15px; }
|
|
#bo_v .custom-fields .custom-image { text-align: center; margin-bottom: 20px; }
|
|
#bo_v .custom-fields .custom-image img { max-width: 100%; height: auto; border-radius: 4px; }
|
|
#bo_v .custom-fields .image-caption { font-size: 0.9em; color: #777; margin-top: 5px; }
|
|
|
|
/* 커스텀 서명 (view.skin.php) */
|
|
#bo_v .custom-signature { margin-top: 40px; text-align: right; border-top: 1px solid #eee; padding-top: 20px; }
|
|
#bo_v .custom-signature .sign-name { font-weight: bold; font-size: 1.1em; margin-bottom: 5px; }
|
|
#bo_v .custom-signature .sign-company { color: #666; }
|