@charset "utf-8";

/* ======================================================== */
/* 연재 스킨 공통 UI 컴포넌트 (버튼 / 뱃지)
   포털 테마의 --portal-* 변수가 있으면 그 값을 사용하고, 
   없으면 기본값을 사용합니다. #bsk_view_wrap 안에서만 적용됩니다. */
/* ======================================================== */
#bsk_view_wrap .bsk_view_header { margin-bottom: 10px; }
#bsk_view_wrap .bsk_view_tit { font-size: 1.3em; font-weight: bold; color: var(--portal-text, #222222); }
#bsk_view_wrap .bsk_view_body { margin-top: 10px; }
#bsk_view_wrap .bsk_view_content { color: var(--portal-text, #333333); }

/* 액션 버튼 영역 */
#bsk_view_wrap .bsk_view_actions {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin: 14px 0 22px; padding-bottom: 14px;
    border-bottom: 1px solid var(--portal-border, #e5e5e5);
}
#bsk_view_wrap .bsk_btn_group { display: flex; flex-wrap: wrap; gap: 8px; }

/* 공통 버튼 디자인 */
#bsk_view_wrap .bsk_btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    font-size: 0.95em; font-weight: 600; color: var(--portal-text, #333333);
    background: var(--portal-surface, #ffffff); border: 1px solid var(--portal-border, #dddddd);
    border-radius: 6px; text-decoration: none; cursor: pointer;
    transition: opacity .15s, background-color .15s;
}
#bsk_view_wrap .bsk_btn:hover { background: var(--portal-surface-alt, #f2f2f2); color: var(--portal-text, #333333); text-decoration: none; }
#bsk_view_wrap .bsk_btn_write { color: #ffffff !important; background: var(--portal-primary, #23a06a); border-color: var(--portal-primary, #23a06a); }
#bsk_view_wrap .bsk_btn_write:hover { background: var(--portal-primary-hover, #1c8256); color: #ffffff !important; }
#bsk_view_wrap .bsk_btn_danger { color: #e8180c; background: #fff5f5; border-color: #f3c9c9; }
#bsk_view_wrap .bsk_btn_danger:hover { background: #ffe3e3; }
#bsk_view_wrap .bsk_btn_sm { padding: 5px 10px; font-size: 0.82em; }

/* 뱃지 디자인 공통 */
#bsk_view_wrap .bsk_badge {
    display: inline-block; padding: 2px 9px; font-size: 0.75em; font-weight: 700;
    line-height: 1.7; border-radius: 20px; color: #ffffff; background: var(--portal-text-sub, #999999);
    vertical-align: middle; white-space: nowrap;
}
#bsk_view_wrap .bsk_badge_new { background: var(--portal-primary, #23a06a); }
#bsk_view_wrap .bsk_badge_hot { background: #e8180c; }
#bsk_view_wrap .bsk_badge_cate { background: #eaf1ff; color: #2f6fed; }

#bsk_view_wrap .bsk_toolbar { display: flex; align-items: center; justify-content: space-between; }
#bsk_view_wrap .bsk_total { font-size: 1.05em; }
#bsk_view_wrap .bsk_empty { color: var(--portal-text-sub, #999999); }

/* ======================================================== */
/* 1. 웹진형 (Webzine Mode) 스타일 */
/* ======================================================== */
.serial_webzine_wrap { padding-top: 10px; }
.serial_webzine_list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }

/* 공지사항 행 */
.serial_webzine_list .wz_notice_row { 
    display: flex; align-items: center; padding: 18px 24px; 
    background: var(--portal-surface, #ffffff); border: 1px solid var(--portal-border, #e5e5e5); 
    border-radius: 16px; position: relative; transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
html[data-theme="dark"] .serial_webzine_list .wz_notice_row { background: #231b1d; border-color: #3d2629; }
.serial_webzine_list .wz_notice_row:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: rgba(232, 24, 12, 0.4); }

#bo_list .serial_webzine_list .wz_notice_row { padding: 24px !important; }
.wz_chk_notice { margin-right: 15px; display: flex; align-items: center; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
#bo_list .serial_webzine_list .wz_chk_notice { margin-right: 15px !important; display: flex !important; align-items: center !important; }

.wz_notice_tit { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 20px; }
.wz_notice_tit .wz_subject_link { font-size: 1.1em; font-weight: bold; color: var(--portal-text, #222222); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wz_notice_tit .wz_subject_link:hover { color: var(--portal-primary, #23a06a); }
.wz_notice_meta { flex: 0 0 auto; display: flex; gap: 15px; font-size: 0.9em; color: var(--portal-text-sub, #888888); align-items: center; }
.wz_notice_meta > span { display: inline-flex; align-items: center; gap: 5px; }

/* 일반 아이템 행 */
.serial_webzine_list .wz_item { 
    display: flex; align-items: center; padding: 24px; 
    border: 1px solid var(--portal-border, #e5e5e5); border-radius: 16px; 
    background: var(--portal-surface, #ffffff); gap: 24px; position: relative; 
    transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
}
#bo_list .serial_webzine_list .wz_item { align-items: flex-start !important; }
.serial_webzine_list .wz_item:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: rgba(58, 138, 253, 0.4); }

/* 웹진 썸네일 */
.wz_thumb { flex: 0 0 140px; width: 140px; overflow: hidden; border-radius: 8px; position: relative; }
.wz_thumb a { display: block; height: 100%; }
.wz_thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.serial_webzine_list .wz_item:hover .wz_thumb img { transform: scale(1.08); } 
.wz_no_img { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; background: var(--portal-surface-alt, #f7f7f7); border-radius: 8px; color: var(--portal-text-sub, #888888); font-size: 13px; font-weight: bold; letter-spacing: 1px; }

/* 웹진 텍스트 정보 */
.wz_info { flex: 1; min-width: 0; padding: 5px 0; }
#bo_list .serial_webzine_list .wz_info { padding-top: 15px !important; }
.wz_tit_area { margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wz_subject { font-size: 1.4em; font-weight: 800; color: var(--portal-text, #222222); letter-spacing: -0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s; }
.serial_webzine_list .wz_item:hover .wz_subject { color: var(--portal-primary, #23a06a); }

.wz_meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.9em; color: var(--portal-text-sub, #888888); margin-bottom: 16px; align-items: center; }
#bo_list .serial_webzine_list .wz_meta { justify-content: flex-end !important; padding-right: 15px !important; }
.wz_meta > span { display: inline-flex; align-items: center; gap: 5px; }
.wz_status span { background: var(--portal-surface-alt, #f7f7f7); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; color: var(--portal-text, #222222); } 

.wz_desc { margin-top: 0; } 
.wz_desc a { color: var(--portal-text-sub, #888888); font-size: 0.95em; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; }
#bo_list .serial_webzine_list .wz_desc { padding-right: 15px !important; text-align: justify !important; }
#bo_list .serial_webzine_list .wz_desc a { -webkit-line-clamp: 4 !important; }

.wz_empty { padding: 80px 20px; text-align: center; color: var(--portal-text-sub, #888888); font-size: 1.1em; background: var(--portal-surface, #ffffff); border-radius: 16px; border: 2px dashed var(--portal-border, #e5e5e5); }

/* 관리자 체크박스 방어 */
.wz_chk { position: absolute; top: 15px; left: 15px; z-index: 10; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
#bo_list .serial_webzine_list .td_chk { width: auto !important; border: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
#bo_list .serial_webzine_list .wz_chk { position: absolute !important; top: 15px !important; left: 15px !important; z-index: 10; }

/* ======================================================== */
/* 2. 갤러리형 (Gallery Mode) 스타일 */
/* ======================================================== */
.serial_gallery_wrap { padding-top: 5px; }

/* 공지사항 */
#bo_list .gal_notice_list { list-style: none; margin: 0 0 35px 0 !important; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#bo_list .gal_notice_card { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px !important; background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.2s; }
#bo_list .gal_notice_card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.06); border-color: #d0d0d0; }
.gal_notice_left { display: flex; align-items: center; gap: 10px; }
.gal_notice_badge { color: #e8180c; font-size: 13px; font-weight: bold; }
.notice_chk { position: relative !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; }
.notice_subject { font-size: 14px; font-weight: bold; color: #333; text-decoration: none; }
.notice_subject:hover { color: var(--portal-primary, #23a06a); text-decoration: none; }
.notice_subject .new_icon { background: #e8180c; color: #fff; font-size: 10px; padding: 1px 4px; margin-left: 5px; border-radius: 2px; vertical-align: 1px; }
.gal_notice_right { color: #e8180c; font-size: 13px; font-weight: bold; }

/* 갤러리 바둑판 */
#bo_list .serial_gallery_list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px 15px; overflow: visible !important; }
#bo_list .serial_gallery_list .gal_item { background: #fff !important; border: 1px solid #e5e5e5 !important; box-sizing: border-box !important; overflow: visible !important; }
#bo_list .serial_gallery_list .gal_item:hover, #bo_list .serial_gallery_list .gal_item:focus-within { z-index: 100 !important; }

.gal_thumb { position: relative; width: 100%; height: 160px !important; background: #f8f8f8; overflow: hidden; }
.gal_thumb { position: relative; width: 100%; height: auto; aspect-ratio: 200 / 280; background: #f8f8f8; overflow: hidden; }
.gal_thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; /* 이미지상부 25% 보이게 */display: block; }
.gal_no_img { width: 100%; height: 100%; aspect-ratio: 200 / 280; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 13px; font-weight: bold; }
#bo_list .serial_gallery_list .gal_chk { position: absolute !important; top: 8px !important; left: 8px !important; z-index: 10; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; }
.gal_hit_badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, 0.75); color: #fff; padding: 3px 6px; border-radius: 3px; font-size: 11px; font-weight: bold; }

/* 갤러리 텍스트 정보 */
.gal_info { padding: 12px 12px 8px; flex: 1; text-align: left; min-width: 0; }
#bo_list .serial_gallery_list .gal_info { overflow: visible !important; }
#bo_list .serial_gallery_list .gal_subject_link { display: block !important; width: 100% !important; text-decoration: none !important; overflow: hidden !important; }
#bo_list .serial_gallery_list .gal_subject { display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; width: 100% !important; height: 1.4em !important; line-height: 1.4em !important; font-size: 14px !important; font-weight: bold !important; color: #222 !important; margin-bottom: 4px !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: break-all !important; }

/* 갤러리 회원 팝업 방어 */
#bo_list .serial_gallery_list .gal_author { overflow: visible !important; }
#bo_list .serial_gallery_list .gal_item .sv_use span, #bo_list .serial_gallery_list .gal_item .profile_or_area { display: none !important; }
#bo_list .serial_gallery_list .gal_item .sv_member, #bo_list .serial_gallery_list .gal_item .sv_guest { display: inline-block !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bo_list .serial_gallery_list .gal_author .sv { z-index: 9999 !important; padding: 5px 0 !important; min-width: 110px !important; border: 1px solid #b8bfc4 !important; background: #fff !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.1) !important; }
#bo_list .serial_gallery_list .gal_author .sv li { margin: 0 !important; padding: 0 !important; border: none !important; line-height: 1 !important; float: none !important; width: 100% !important; }
#bo_list .serial_gallery_list .gal_author .sv a { display: block !important; padding: 8px 12px !important; font-size: 12px !important; line-height: 1.2 !important; color: #333 !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; }
#bo_list .serial_gallery_list .gal_author .sv a:hover { background-color: #f8f9fa !important; color: #3a8afd !important; }

/* 갤러리 하단 상태바 */
.gal_footer { display: flex; border-top: 1px solid #e5e5e5; text-align: center; font-size: 12px; font-weight: bold; }
.gal_footer > div { padding: 7px 0; box-sizing: border-box; white-space: nowrap; overflow: hidden; }
.gal_ft_status { width: 30%; color: #fff; }
.gal_ft_ep { width: 30%; background: #fbfbfb; color: #666; border-right: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; }
.gal_ft_date { width: 40%; background: #6d9e32; color: #fff; font-size: 11px; } 
#bo_list .serial_gallery_list .gal_ft_date { flex: 1 !important; width: auto !important; }
.gal_empty { grid-column: 1 / -1; padding: 80px; text-align: center; color: #999; border: 1px solid #e5e5e5; }

@media (max-width: 480px) {
    .m_hide_sm { display: none !important; }
    #bo_list .serial_gallery_list { 
        grid-template-columns: repeat(2, 1fr) !important; /* 2줄 repeat(2, 1fr) */
        gap: 12px 8px !important;
    } 
    .gal_ft_status, .gal_ft_ep, .gal_ft_date { 
        font-size: 9px !important; 
        padding: 5px 0 !important;
    }
    #bo_list .serial_gallery_list .gal_subject {
        font-size: 12px !important;
    }
}

/* ======================================================== */
/* 3. 에피소드 회차 목록 (PC/모바일 하이브리드 표) */
/* ======================================================== */
html[data-theme="dark"] #bsk_view_wrap .tbl_head01 th,
html[data-theme="dark"] #bsk_view_wrap .tbl_head01 td { background-color: var(--portal-surface, #ffffff) !important; color: var(--portal-text, #222222) !important; border-bottom: 1px solid var(--portal-border, #e5e5e5) !important; }
html[data-theme="dark"] #bsk_view_wrap .tbl_head01 tr:hover td { background-color: var(--portal-surface-alt, #f7f7f7) !important; }

#bsk_view_wrap .serial_new { display: inline-block; margin-left: 3px; color: #e8180c; font-size: .72em; font-weight: 800; vertical-align: 1px; }
#bsk_view_wrap .th_mobile_list, #bsk_view_wrap .td_mobile_list { display: none !important; }

/* ======================================================== */
/* 4. 기타 컴포넌트 (결제 버튼, 뱃지, 장르탭, 페이징) */
/* ======================================================== */
.serial_pay_btn { display: inline-block; padding: 15px 40px; font-size: 1.2em; font-weight: bold; border: 0; border-radius: 30px; cursor: pointer; height: auto; line-height: normal; box-sizing: border-box; letter-spacing: -0.5px; color: #fff; text-align: center; transition: opacity 0.2s; }
.serial_pay_btn:hover { opacity: 0.9; }
.serial_pay_btn.sojang { background: #3a8afd; } 
.serial_pay_btn.rental { background: #ff9800; } 
.serial_pay_btn.preview { background: #e8180c; } 

.serial_status_badge { display: inline-block; padding: 3px 10px; border-radius: 4px !important; font-size: 12px !important; font-weight: bold; cursor: pointer !important; user-select: none; text-align: center; transition: opacity 0.2s; }
.serial_status_badge:hover { opacity: 0.85; }
.gal_ft_status.st_ing, .st_ing { background: #7b848c !important; color: #fff !important; }
.gal_ft_status.st_pause, .st_pause { background: #ff7f00 !important; color: #fff !important; }
.gal_ft_status.st_end, .st_end { background: #222 !important; color: #fff !important; }

.serial_category_tabs { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; margin-bottom: 10px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; }
.serial_category_tabs::-webkit-scrollbar { display: none; }
.serial_category_tabs .cat_btn { flex: 0 0 auto; padding: 8px 18px; background: #f1f3f5; color: #495057; font-size: 14px; font-weight: bold; border-radius: 20px; text-decoration: none; transition: all 0.2s; }
.serial_category_tabs .cat_btn:hover { background: #e2e6ea; color: #212529; text-decoration: none; }
.serial_category_tabs .cat_btn.active { background: #212529 !important; color: #fff !important; }

.gal_cat_badge { position: absolute; top: 17px; left: 14px; background: rgb(189 186 186 / 65%); color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; z-index: 5; }

.episode_pagination { display: flex; justify-content: center; gap: 6px; margin: 20px 0; }
.episode_pagination .ep_page_btn { display: inline-block; padding: 6px 12px; background: #f1f3f5; color: #495057; font-size: 13px; font-weight: bold; border-radius: 4px; text-decoration: none; }
.episode_pagination .ep_page_btn:hover { background: #e2e6ea; text-decoration: none; }
.episode_pagination .ep_page_btn.active { background: #212529 !important; color: #fff !important; }

.studio_pg { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 30px 0 10px; flex-wrap: wrap; }
.studio_pg a, .studio_pg span { display: inline-flex; justify-content: center; align-items: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; color: #555; text-decoration: none; background: #fff; transition: all 0.2s; box-sizing: border-box; }
.studio_pg .pg_current { background: #4e546f; color: #fff; border-color: #4e546f; font-weight: bold; }
.studio_pg a:hover { background: #f1f3f5; border-color: #ccc; color: #222; }

/* ======================================================== */
/* 5. 통합 모바일 및 반응형(Responsive) 미디어 쿼리 */
/* ======================================================== */
.pc_hide { display: none !important; }

@media (max-width: 1024px) { 
    #bo_list .serial_gallery_list { grid-template-columns: repeat(3, 1fr); } 
}

@media (max-width: 768px) {
    /* 모바일 공통 숨김/노출 처리 */
    .m_hide { display: none !important; }
    .pc_hide { display: inline-block !important; }
    #bo_list .tbl_head01 table { table-layout: auto !important; width: 100% !important; }
    
    /* 웹진형 모바일 */
    .serial_webzine_list .wz_notice_row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
    .wz_notice_tit { padding-right: 0; white-space: normal; display: block; width: 100%; }
    .wz_notice_tit .wz_subject_link { display: inline; white-space: normal; }
    .wz_notice_meta { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
    .serial_webzine_list .wz_item { padding: 16px; gap: 16px; border-radius: 12px; align-items: flex-start; } 
    .wz_thumb { flex: 0 0 100px; width: 100px; } 
    .wz_no_img { height: 140px; }
    .wz_subject { font-size: 1.2em; }
    .wz_meta { gap: 10px; font-size: 0.85em; margin-bottom: 12px; }
    #bo_list .serial_webzine_list .wz_meta { justify-content: flex-start !important; }
    .wz_desc a { -webkit-line-clamp: 2; font-size: 0.9em; } 
    #bo_list .serial_webzine_list .wz_desc { padding-right: 0 !important; }
    #bo_list .serial_webzine_list .wz_desc a { -webkit-line-clamp: 2 !important; }

    /* 갤러리형 모바일 */
    #bo_list .serial_gallery_list { grid-template-columns: repeat(2, 1fr); gap: 15px 10px; } 
    .gal_ft_status, .gal_ft_ep, .gal_ft_date { font-size: 10px; }

    /* 에피소드 표(테이블) 모바일 UI 전환 */
    #bsk_view_wrap .serial_episode_table, #bsk_view_wrap .serial_episode_table table, #bsk_view_wrap .serial_episode_table > table, #bsk_view_wrap .serial_episode_table > table > thead, #bsk_view_wrap .serial_episode_table > table > tbody { width: 100% !important; min-width: 0 !important; display: block !important; }
    #bsk_view_wrap .serial_episode_table table { table-layout: fixed !important; border-collapse: collapse !important; }
    #bsk_view_wrap .serial_episode_table > table > thead > tr, #bsk_view_wrap .serial_episode_table > table > tbody > tr { display: grid !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; }
    
    #bsk_view_wrap .serial_episode_table.has_chk.has_hit > table > thead > tr, #bsk_view_wrap .serial_episode_table.has_chk.has_hit > table > tbody > tr, #bsk_view_wrap .serial_episode_table.has_chk.has_hit tbody tr, #bsk_view_wrap .serial_episode_table.has_chk.has_hit thead tr { grid-template-columns: 34px minmax(0, 1fr) 58px 74px !important; }
    #bsk_view_wrap .serial_episode_table.has_chk.no_hit > table > thead > tr, #bsk_view_wrap .serial_episode_table.has_chk.no_hit > table > tbody > tr, #bsk_view_wrap .serial_episode_table.has_chk.no_hit tbody tr, #bsk_view_wrap .serial_episode_table.has_chk.no_hit thead tr { grid-template-columns: 34px minmax(0, 1fr) 74px !important; }
    #bsk_view_wrap .serial_episode_table.no_chk.has_hit > table > thead > tr, #bsk_view_wrap .serial_episode_table.no_chk.has_hit > table > tbody > tr, #bsk_view_wrap .serial_episode_table.no_chk.has_hit tbody tr, #bsk_view_wrap .serial_episode_table.no_chk.has_hit thead tr { grid-template-columns: minmax(0, 1fr) 58px 74px !important; }
    #bsk_view_wrap .serial_episode_table.no_chk.no_hit > table > thead > tr, #bsk_view_wrap .serial_episode_table.no_chk.no_hit > table > tbody > tr, #bsk_view_wrap .serial_episode_table.no_chk.no_hit tbody tr, #bsk_view_wrap .serial_episode_table.no_chk.no_hit thead tr { grid-template-columns: minmax(0, 1fr) 74px !important; }
    
    #bsk_view_wrap .serial_episode_table.has_chk > table > thead > tr, #bsk_view_wrap .serial_episode_table.has_chk > table > tbody > tr { grid-template-columns: 34px minmax(0, 1fr) !important; }
    #bsk_view_wrap .serial_episode_table.no_chk > table > thead > tr, #bsk_view_wrap .serial_episode_table.no_chk > table > tbody > tr { grid-template-columns: minmax(0, 1fr) !important; }

    #bsk_view_wrap .serial_episode_table thead tr, #bsk_view_wrap .serial_episode_table tbody tr { width: 100% !important; min-width: 0 !important; align-items: stretch !important; }
    #bsk_view_wrap .serial_episode_table thead tr { grid-auto-flow: row !important; }
    #bsk_view_wrap .serial_episode_table thead th { display: none !important; box-sizing: border-box !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; height: 42px !important; min-height: 42px !important; padding: 7px 5px !important; background: var(--portal-surface-alt, #f7f7f7) !important; color: var(--portal-text, #222222) !important; text-align: center !important; border: 1px solid var(--portal-border, #e5e5e5) !important; font-size: 13px !important; }
    #bsk_view_wrap .serial_episode_table thead th.th_ep, #bsk_view_wrap .serial_episode_table thead th.th_img, #bsk_view_wrap .serial_episode_table thead th.th_subject, #bsk_view_wrap .serial_episode_table thead th.th_datetime { display: none !important; }

    #bsk_view_wrap .serial_episode_table.has_chk thead th.all_chk { display: flex !important; grid-column: 1 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; }
    #bsk_view_wrap .serial_episode_table.has_chk thead th.th_mobile_list { display: flex !important; grid-column: 2 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; }
    #bsk_view_wrap .serial_episode_table.no_chk thead th.th_mobile_list { display: flex !important; grid-column: 1 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; }
    #bsk_view_wrap .serial_episode_table.has_chk.has_hit thead th.th_hit { display: flex !important; grid-column: 3 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; }
    #bsk_view_wrap .serial_episode_table.no_chk.has_hit thead th.th_hit { display: flex !important; grid-column: 2 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; }
    #bsk_view_wrap .serial_episode_table.has_chk.has_hit thead th.th_cost { display: flex !important; grid-column: 4 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; }
    #bsk_view_wrap .serial_episode_table.has_chk.no_hit thead th.th_cost { display: flex !important; grid-column: 3 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; }
    #bsk_view_wrap .serial_episode_table.no_chk.has_hit thead th.th_cost { display: flex !important; grid-column: 3 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; }
    #bsk_view_wrap .serial_episode_table.no_chk.no_hit thead th.th_cost { display: flex !important; grid-column: 2 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; }

    #bsk_view_wrap .serial_episode_table tbody tr { min-height: 52px !important; background: var(--portal-surface, #ffffff) !important; }
    #bsk_view_wrap .serial_episode_table tbody td { box-sizing: border-box !important; min-width: 0 !important; height: auto !important; min-height: 52px !important; padding: 0 !important; border: 1px solid var(--portal-border, #e5e5e5) !important; background: var(--portal-surface, #ffffff) !important; vertical-align: middle !important; color: var(--portal-text, #222222) !important; }
    #bsk_view_wrap .serial_episode_table tbody td.td_datetime, #bsk_view_wrap .serial_episode_table tbody td.td_ep, #bsk_view_wrap .serial_episode_table tbody td.td_img, #bsk_view_wrap .serial_episode_table tbody td.td_subject { display: none !important; }

    #bsk_view_wrap .serial_episode_table.has_chk tbody td.td_chk { display: flex !important; grid-column: 1 !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; align-self: stretch !important; width: auto !important; height: auto !important; min-height: 52px !important; padding: 0 !important; }
    #bsk_view_wrap .serial_episode_table .td_chk input[type="checkbox"] { margin: 0 !important; }
    #bsk_view_wrap .serial_episode_table .td_chk label { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; }
    
    #bsk_view_wrap .serial_episode_table.has_chk tbody td.td_mobile_list { grid-column: 2 !important; }
    #bsk_view_wrap .serial_episode_table.no_chk tbody td.td_mobile_list { grid-column: 1 !important; }
    #bsk_view_wrap .serial_episode_table tbody td.td_mobile_list { display: flex !important; grid-row: 1 !important; align-items: center !important; width: auto !important; height: auto !important; min-height: 52px !important; min-width: 0 !important; padding: 7px 8px !important; overflow: visible !important; background: var(--portal-surface, #ffffff) !important; color: var(--portal-text, #222222) !important; }

    #bsk_view_wrap .mobile_ep_item { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; height: 100% !important; gap: 8px !important; overflow: hidden !important; }
    #bsk_view_wrap .mobile_ep_thumb { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; border-radius: 4px !important; }
    #bsk_view_wrap .mobile_ep_thumb img, #bsk_view_wrap .mobile_ep_thumb_empty { display: block !important; width: 32px !important; height: 32px !important; object-fit: cover !important; border-radius: 4px !important; }
    #bsk_view_wrap .mobile_ep_thumb_empty { line-height: 32px !important; text-align: center !important; background: var(--portal-surface-alt, #f7f7f7) !important; color: var(--portal-text-sub, #888888) !important; font-size: 9px !important; }
    #bsk_view_wrap .mobile_ep_no { flex: 0 0 auto !important; white-space: nowrap !important; color: var(--portal-primary, #23a06a) !important; font-size: 12px !important; font-weight: 700 !important; }
    #bsk_view_wrap .mobile_ep_subject { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; line-height: 1.35 !important; }
    #bsk_view_wrap .mobile_ep_subject a, #bsk_view_wrap .mobile_ep_subject > span { display: block !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: var(--portal-text, #222222) !important; font-size: 13px !important; text-decoration: none !important; }
    #bsk_view_wrap .mobile_ep_top_row { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px !important; min-width: 0 !important; }
    #bsk_view_wrap .mobile_ep_no_cost { flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
    #bsk_view_wrap .mobile_ep_meta { flex-shrink: 0 !important; max-width: 45% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: var(--portal-text-sub, #888888) !important; font-size: 10px !important; }

    #bsk_view_wrap .serial_episode_table tbody tr:hover td, #bsk_view_wrap .serial_episode_table tbody tr:hover td.td_mobile_list { background: var(--portal-surface-alt, #f7f7f7) !important; color: var(--portal-text, #222222) !important; }
    #bsk_view_wrap .serial_episode_table tbody tr:hover .mobile_ep_subject a, #bsk_view_wrap .serial_episode_table tbody tr:hover .mobile_ep_subject > span { color: var(--portal-text, #222222) !important; }
    #bsk_view_wrap .serial_episode_table tbody tr:hover .mobile_ep_no { color: var(--portal-primary, #23a06a) !important; }

    #bsk_view_wrap .serial_episode_table.has_chk.has_hit tbody td.td_hit { grid-column: 3 !important; }
    #bsk_view_wrap .serial_episode_table.no_chk.has_hit tbody td.td_hit { grid-column: 2 !important; }
    #bsk_view_wrap .serial_episode_table tbody td.td_hit { display: flex !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; height: 52px !important; padding: 0 4px !important; font-size: 12px !important; color: var(--portal-text-sub, #888888) !important; white-space: nowrap !important; }

    #bsk_view_wrap .serial_episode_table.has_chk.has_hit tbody td.td_cost { grid-column: 4 !important; }
    #bsk_view_wrap .serial_episode_table.has_chk.no_hit tbody td.td_cost { grid-column: 3 !important; }
    #bsk_view_wrap .serial_episode_table.no_chk.has_hit tbody td.td_cost { grid-column: 3 !important; }
    #bsk_view_wrap .serial_episode_table.no_chk.no_hit tbody td.td_cost { grid-column: 2 !important; }
    #bsk_view_wrap .serial_episode_table tbody td.td_cost { display: flex !important; grid-row: 1 !important; align-items: center !important; justify-content: center !important; width: auto !important; height: 52px !important; padding: 0 4px !important; font-size: 12px !important; color: var(--portal-text, #222222) !important; white-space: nowrap !important; }

    #bsk_view_wrap .serial_episode_table tbody tr:hover td.td_hit, #bsk_view_wrap .serial_episode_table tbody tr:hover td.td_cost { color: var(--portal-text, #222222) !important; }
    #bsk_view_wrap .serial_episode_table tbody td.bsk_empty { display: block !important; grid-column: 1 / -1 !important; width: 100% !important; height: auto !important; min-height: 52px !important; padding: 16px !important; text-align: center !important; }
    #bsk_view_wrap .serial_episode_table .serial_new { display: inline !important; margin-left: 3px !important; color: #e8180c !important; font-size: 10px !important; font-weight: 800 !important; }

    /* 모바일 가로 스크롤 방어 최상단 룰 */
    html, body { max-width: 100vw !important; overflow-x: hidden !important; }
    #bo_v, #bo_list, #bsk_view_wrap { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 15px 5px 40px 5px !important; }
    #bo_v *, #bo_list * { box-sizing: border-box !important; }
    .bo_fx, .bo_v_com, .bsk_toolbar, .studio_pg, #bo_btn_top { width: 100% !important; max-width: 100% !important; flex-wrap: wrap !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* ======================================================== */
/*  다크모드 전용 대응 스타일 */
/* ======================================================== */
html[data-theme="dark"] #studio_wrap {
    background: #1a1c23; /* 전체 어두운 배경 */
}
html[data-theme="dark"] .studio_title {
    color: #eee;
}
html[data-theme="dark"] .stat_box,
html[data-theme="dark"] .work_card {
    background: #242731; /* 카드 어두운 배경 */
    border-color: #353945; /* 테두리 어둡게 */
    box-shadow: none;
}
html[data-theme="dark"] .stat_title,
html[data-theme="dark"] .work_meta {
    color: #aaa;
}
html[data-theme="dark"] .stat_value,
html[data-theme="dark"] .work_title {
    color: #eee;
}
html[data-theme="dark"] .work_stat {
    background: #1a1c23;
    border-color: #353945;
    color: #bbb;
}

html[data-theme="dark"] #viewer_remote_wrap {
    background: #242731;
    border-color: #353945;
}
html[data-theme="dark"] .remote_header {
    background: #1a1c23;
    color: #eee;
    border-color: #353945;
}
html[data-theme="dark"] .remote_nav_group,
html[data-theme="dark"] .remote_btn,
html[data-theme="dark"] .tts_player_bar {
    background: #1a1c23;
    border-color: #353945;
    color: #bbb;
}
html[data-theme="dark"] .remote_nav_group button {
    border-color: #353945;
    color: #bbb;
}
html[data-theme="dark"] .remote_nav_group button:hover,
html[data-theme="dark"] .remote_btn:hover {
    background: #353945;
    color: #eee;
}
html[data-theme="dark"] .speed_btn.active {
    background: #4e546f;
    color: #fff;
}
/* ======================================================== */
/*  다크모드 전용 대응 스타일 (갤러리 리스트) */
/* ======================================================== */

/* 1. 상단 장르 탭 메뉴 */
html[data-theme="dark"] .serial_category_tabs .cat_btn {
    background: #242731 !important;
    color: #aaa !important;
}
html[data-theme="dark"] .serial_category_tabs .cat_btn:hover {
    background: #353945 !important;
    color: #eee !important;
}
html[data-theme="dark"] .serial_category_tabs .cat_btn.active {
    background: #eee !important;
    color: #111 !important;
}

/* 2. 공지사항 리스트 (상단 한 줄) */
html[data-theme="dark"] #bo_list .gal_notice_card {
    background: #242731 !important;
    border-color: #353945 !important;
}
html[data-theme="dark"] #bo_list .gal_notice_card .notice_subject {
    color: #eee !important;
}
html[data-theme="dark"] #bo_list .gal_notice_card:hover {
    border-color: #555 !important;
}

/* 3. 일반 갤러리 리스트 (바둑판 카드) */
html[data-theme="dark"] #bo_list .serial_gallery_list .gal_item {
    background: #242731 !important;
    border-color: #353945 !important;
}
html[data-theme="dark"] #bo_list .serial_gallery_list .gal_item:hover {
    border-color: #5b6282 !important; /* 마우스 오버 시 테두리 색상 */
}

/* 썸네일 빈 공간 (NO IMAGE 배경) */
html[data-theme="dark"] .gal_thumb {
    background: #1a1c23 !important;
}
html[data-theme="dark"] .gal_no_img {
    color: #666 !important;
}

/* 텍스트 정보 (제목, 작가) */
html[data-theme="dark"] #bo_list .serial_gallery_list .gal_subject {
    color: #eee !important;
}
html[data-theme="dark"] #bo_list .serial_gallery_list .gal_author {
    color: #888 !important;
}
html[data-theme="dark"] #bo_list .serial_gallery_list .gal_author a {
    color: #888 !important;
}

/* 하단 3단 상태바 (상태 / 총 화수 / 날짜) */
html[data-theme="dark"] .gal_footer {
    border-top-color: #353945 !important;
}
html[data-theme="dark"] .gal_ft_ep {
    background: #1a1c23 !important;
    color: #aaa !important;
    border-right-color: #353945 !important;
    border-left-color: #353945 !important;
}

/* 등록된 작품이 없을 때 빈 화면 */
html[data-theme="dark"] .gal_empty {
    background: #242731 !important;
    border-color: #353945 !important;
    color: #777 !important;
}

/* 4. 작가 이름 클릭 시 나오는 사이드뷰(회원정보) 팝업 */
html[data-theme="dark"] #bo_list .serial_gallery_list .gal_author .sv {
    background: #242731 !important;
    border-color: #353945 !important;
}
html[data-theme="dark"] #bo_list .serial_gallery_list .gal_author .sv a {
    color: #ccc !important;
}
html[data-theme="dark"] #bo_list .serial_gallery_list .gal_author .sv a:hover {
    background: #353945 !important;
    color: #fff !important;
}

/* 5. 우측 상단 관리자/설정/글쓰기 버튼 그룹 배경 하얗게 뜨는 현상 수정 */
html[data-theme="dark"] #bo_list .btn_bo_user li {
    background: transparent !important; /* li 태그의 하얀 배경 제거 */
}

html[data-theme="dark"] #bo_list .btn_bo_user > li > a,
html[data-theme="dark"] #bo_list .btn_bo_user > li > button {
    color: #eee !important;
}

/* 스킨설정/동기화 버튼 아이콘 색상 덮어쓰기 (인라인 스타일 무력화) */
html[data-theme="dark"] #bo_list .btn_bo_user > li > button i.fa-cog,
html[data-theme="dark"] #bo_list .btn_bo_user > li > button i.fa-refresh {
    color: #eee !important;
}

/* 6. 점 3개(더보기) 확장 메뉴 팝업 다크모드 */
html[data-theme="dark"] .more_opt {
    background: #242731 !important;
    border-color: #353945 !important;
}
/* 말풍선 꼬리 안쪽/바깥쪽 색상 변경 */
html[data-theme="dark"] .more_opt:after {
    border-bottom-color: #242731 !important; 
}
html[data-theme="dark"] .more_opt:before {
    border-bottom-color: #353945 !important; 
}
/* 드롭다운 리스트 및 텍스트 */
html[data-theme="dark"] .more_opt li {
    border-bottom-color: #353945 !important;
}
html[data-theme="dark"] .more_opt li button, 
html[data-theme="dark"] .more_opt li a {
    background: #242731 !important;
    color: #aaa !important;
}
html[data-theme="dark"] .more_opt li:hover button, 
html[data-theme="dark"] .more_opt li:hover a {
    color: #fff !important;
}

/* ======================================================== */
/* 다크모드 전용 대응 스타일 (글쓰기/수정 화면) */
/* ======================================================== */

/* 1. 하드코딩된 밝은 회색 박스(회차 설정, 공개 시점 설정) 강제 어둡게 */
html[data-theme="dark"] #bo_w .write_div[style*="background:#f8f9fa"] {
    background: #242731 !important;
    border-color: #353945 !important;
}

/* 2. 하드코딩된 포인트 텍스트 색상(본문 내용 라벨 등) 강제 밝게 */
html[data-theme="dark"] #bo_w .write_div div[style*="color:#4e546f"],
html[data-theme="dark"] #bo_w .write_div label {
    color: #eee !important;
}
/* 경고/안내 텍스트 (빨간색 계열 유지하되 눈 안 아프게) */
html[data-theme="dark"] #bo_w .write_div span[style*="color:#e8180c"] {
    color: #ff6b6b !important;
}

/* 3. 입력 폼 (Input, Select, Textarea) 공통 다크모드 */
html[data-theme="dark"] #bo_w .frm_input,
html[data-theme="dark"] #bo_w select,
html[data-theme="dark"] #bo_w .file_wr {
    background: #1a1c23 !important;
    border-color: #353945 !important;
    color: #eee !important;
}
html[data-theme="dark"] #bo_w .frm_input::placeholder {
    color: #777 !important;
}

/* 4. 링크 및 파일첨부 좌측 아이콘 라벨 */
html[data-theme="dark"] #bo_w .bo_w_link label,
html[data-theme="dark"] #bo_w .bo_w_flie .lb_icon {
    background: #242731 !important;
    border-color: #353945 !important;
    color: #aaa !important;
}

/* 5. 체크박스(공지, html, 비밀글 등) 디자인 반전 */
html[data-theme="dark"] #bo_w .chk_box input[type="checkbox"] + label {
    color: #ccc !important;
}
html[data-theme="dark"] #bo_w .chk_box input[type="checkbox"] + label span {
    background: #1a1c23 !important;
    border-color: #353945 !important;
}

/* 6. 임시저장 팝업 다크모드 대응 */
html[data-theme="dark"] #btn_autosave {
    background: #242731 !important;
    border-color: #353945 !important;
    color: #ccc !important;
}
html[data-theme="dark"] #autosave_pop {
    background: #242731 !important;
    border-color: #353945 !important;
    color: #eee !important;
}
html[data-theme="dark"] #autosave_pop:after {
    border-bottom-color: #242731 !important; 
}
html[data-theme="dark"] #autosave_pop:before {
    border-bottom-color: #353945 !important; 
}
html[data-theme="dark"] #autosave_pop ul {
    border-top-color: #353945 !important;
    border-bottom-color: #353945 !important;
}
html[data-theme="dark"] #autosave_pop li {
    background: #1a1c23 !important;
    border-bottom-color: #353945 !important;
}
html[data-theme="dark"] #autosave_pop .autosave_close {
    color: #aaa !important;
}
html[data-theme="dark"] #autosave_pop .autosave_close:hover {
    background: #353945 !important;
    color: #fff !important;
}

/* 7. 스마트에디터(DHTML) 껍데기 테두리 */
html[data-theme="dark"] #bo_w .wr_content iframe {
    border: 1px solid #353945 !important;
}

/* 8. 본문 내용 텍스트 에어리어(일반 에디터) 다크모드 */
html[data-theme="dark"] #bo_w textarea#wr_content {
    background: #1a1c23 !important;
    color: #eee !important;
    border: 1px solid #353945 !important;
    padding: 10px !important;
}

/* ======================================================== */
/* 다크모드 전용 대응 스타일 (댓글 영역) */
/* ======================================================== */

/* 1. 댓글 상단 바 및 정렬 옵션 */
html[data-theme="dark"] .serial_cmt_top_bar { color: #ccc !important; }
html[data-theme="dark"] .cmt_total_count b { color: #eee !important; }
html[data-theme="dark"] .cmt_sort_opt select { 
    background: #242731 !important; 
    border-color: #353945 !important; 
    color: #eee !important; 
}

/* 2. 베스트 댓글 카드 */
html[data-theme="dark"] .modern_best_card { 
    background: #242731 !important; 
    border-color: #8c5a1c !important; /* 너무 튀지 않는 어두운 오렌지색 테두리 */
}
html[data-theme="dark"] .mbc_author { color: #eee !important; }

/* 3. 일반 댓글 리스트 */
html[data-theme="dark"] .modern_cmt_item { 
    background: transparent !important; 
    border-bottom-color: #353945 !important; 
}
html[data-theme="dark"] .mci_author { color: #eee !important; }
html[data-theme="dark"] .cmt_contents { color: #ccc !important; }

/* 스포일러 가림막 */
html[data-theme="dark"] .spoiler_veil { 
    background: rgba(26, 28, 35, 0.8) !important; 
}
html[data-theme="dark"] .veil_bar_msg { 
    background: #242731 !important; 
    border-color: #8c5a1c !important; 
    color: #ff9800 !important; 
}
html[data-theme="dark"] .veil_bar_msg .sub { color: #aaa !important; }

/* 댓글 하단 버튼들 (수정, 삭제, 추천 등) */
html[data-theme="dark"] .mci_left_btns a { color: #888 !important; }
html[data-theme="dark"] .mci_left_btns a:hover { color: #ff9800 !important; }

html[data-theme="dark"] .btn_vote_text { 
    border-color: #353945 !important; 
    color: #aaa !important; 
    background: transparent !important; 
}
html[data-theme="dark"] .btn_vote_text:hover { 
    border-color: #ff9800 !important; 
    color: #ff9800 !important; 
    background: #353945 !important; 
}
html[data-theme="dark"] .btn_vote_nogood_text { 
    border-color: #353945 !important; 
    color: #aaa !important; 
}
html[data-theme="dark"] .btn_vote_nogood_text:hover { 
    border-color: #ff4757 !important; 
    color: #ff4757 !important; 
    background: #353945 !important; 
}

/* 4. 댓글 더보기 버튼 */
html[data-theme="dark"] .btn_cmt_more { 
    background: #242731 !important; 
    border-color: #353945 !important; 
    color: #eee !important; 
}
html[data-theme="dark"] .btn_cmt_more:hover { 
    background: #353945 !important; 
    color: #fff !important; 
}

/* 5. 댓글 쓰기 영역 (하단 입력창) */
html[data-theme="dark"] .modern_write_box { 
    background: #242731 !important; 
    border-color: #353945 !important; 
}
html[data-theme="dark"] .btn_new_cmt_check { 
    background: #1a1c23 !important; 
    border-color: #353945 !important; 
    color: #aaa !important; 
}
html[data-theme="dark"] .btn_new_cmt_check:hover { 
    background: #353945 !important; 
    color: #eee !important; 
}
html[data-theme="dark"] .mwb_textarea_wrap textarea { 
    background: #1a1c23 !important; 
    border-color: #353945 !important; 
    color: #eee !important; 
}
html[data-theme="dark"] .mwb_textarea_wrap textarea:focus { 
    border-color: #4caf50 !important; 
}

/* 툴 아이콘 및 비밀글 체크박스 */
html[data-theme="dark"] .tool_ico { 
    background: #1a1c23 !important; 
    border-color: #353945 !important; 
    color: #888 !important; 
}
html[data-theme="dark"] .tool_ico:hover { 
    background: #353945 !important; 
    color: #eee !important; 
}
html[data-theme="dark"] .secret_cm label { color: #ccc !important; }

/* ======================================================== */
/* 갤러리/목록 빈 화면(등록된 작품이 없을 때) 디자인 */
/* ======================================================== */
.gal_empty {
    grid-column: 1 / -1 !important; /* 4열 그리드 전체를 가로로 꽉 채우기 */
    text-align: center !important;
    padding: 60px 20px !important;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 10px;
    color: #666;
    font-size: 15px;
    list-style: none;
}
.gal_empty i {
    font-size: 3.5em;
    color: #cbd5e1;
    margin-bottom: 15px;
    display: block;
}
.gal_empty p {
    margin: 0;
    font-weight: bold;
    color: #475569;
}
/* ======================================================== */
/* 리스트/테이블형 빈 화면 및 테이블 헤더 다크모드 대응 */
/* ======================================================== */

/* 1. 테이블 전체 래퍼 및 헤더 (등록된 작품이 없을 때 하얗게 뜨는 현상 방지) */
html[data-theme="dark"] .tbl_head01 table {
    background: #242731 !important;
    border-color: #353945 !important;
}
html[data-theme="dark"] .tbl_head01 th {
    background: #1a1c23 !important;
    border-bottom-color: #353945 !important;
    color: #aaa !important;
}

/* 2. '등록된 작품이 없습니다.' / '등록된 회차가 없습니다.' 빈 칸 */
html[data-theme="dark"] .tbl_head01 td.empty_table {
    background: #242731 !important;
    border-color: #353945 !important;
    color: #888 !important;
    padding: 60px 20px !important;
}