@charset "utf-8";

/* [1] 테마 변수 및 기본 설정 */
:root { 
    --bg-color: transparent; 
    --text-color: inherit; 
    --nav-bg: rgba(0,0,0,0.02); 
    --border-color: rgba(0,0,0,0.05); 
}

/* 비밀번호 확인 페이지(#pw_confirm) 추가 */
[data-theme="dark"] #bo_list, [data-theme="dark"] #bo_v, [data-theme="dark"] #bo_w, [data-theme="dark"] #pw_confirm { 
    --bg-color: #1a1a1a; 
    --text-color: #e0e0e0 !important; 
    --nav-bg: rgba(255,255,255,0.05); 
    --border-color: rgba(255,255,255,0.1); 
}

/* 비밀번호 확인 페이지(#pw_confirm) 하위 요소 텍스트 색상 강제 적용 */
[data-theme="dark"] #bo_list *, [data-theme="dark"] #bo_v *, [data-theme="dark"] #bo_vc *, [data-theme="dark"] #bo_w *, [data-theme="dark"] #pw_confirm * { 
    color: var(--text-color) !important; 
}

/* 전체 지면 너비 및 중앙 정렬 (#pw_confirm 추가) */
#bo_list, #bo_v, #bo_w, #bo_cate, .list-container, .v_header, .list-item, .pg_wrap, .bo_v_atc_mgmt, #pw_confirm {
    max-width: 800px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

#bo_list, #bo_v, #bo_w, #pw_confirm {
    margin-top: 40px !important;
    padding: 40px 20px;
    background-color: var(--bg-color);
    line-height: 1.8;
    transition: 0.3s;
}

/* [2] 리스트 디자인 & 카테고리 */
.bo_hd { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; margin-bottom: 25px; }
#bo_cate { margin-bottom: 50px !important; border-bottom: 0 !important; display: block !important; visibility: visible !important; }
#bo_cate h2 { margin-bottom: 25px !important; font-size: 1em; opacity: 0.4; font-weight: normal; text-align: left; }
#bo_cate ul { display: flex !important; flex-wrap: wrap !important; list-style: none !important; padding: 0 !important; margin: 0 !important; gap: 15px 25px; justify-content: flex-start; }
#bo_cate a { text-decoration: none; color: inherit; opacity: 0.5; font-size: 0.95em; transition: 0.2s ease; padding: 5px 0; display: inline-block; }
#bo_cate a:hover { opacity: 1 !important; text-decoration: underline; text-underline-offset: 5px; }
#bo_cate #bo_cate_on { opacity: 1 !important; font-weight: bold !important; border-bottom: 2px solid currentColor !important; }

.list-container { border-top: 1px solid currentColor; margin-top: 20px; }
.list-item { display: flex !important; padding: 25px 0; border-bottom: 1px solid var(--border-color); align-items: flex-start; }
.item-thumb { width: 120px; height: 120px; flex-shrink: 0; margin-right: 25px; border-radius: 4px; overflow: hidden; background: var(--nav-bg); }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-subject { margin: 0 0 12px 0 !important; font-size: 1.45em !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -0.5px !important; display: block !important; }
.list_series { font-weight: bold; opacity: 0.7; font-size: 0.95em; }
.item-info { font-size: 0.85em; opacity: 0.5; margin-top: 5px; }
.separator { margin: 0 15px !important; opacity: 0.3; display: inline-block; }

/* [3] 본문(View) 디자인 */
.v_top_btn { border-bottom: 1px solid var(--border-color) !important; margin-bottom: 0 !important; padding-bottom: 15px !important; }
.v_header { text-align: center; padding: 40px 0 !important; border: 0 !important; position: relative; white-space: normal !important; }
.v_header::after { content: ""; display: block; width: 70px; height: 1px; background: var(--border-color); margin: 30px auto 0; opacity: 0.8; }
#bo_v_title { font-size: 2.4em !important; font-weight: 800 !important; margin-bottom: 20px !important; letter-spacing: -1.5px !important; line-height: 1.3 !important; word-break: keep-all; border: 0 !important; }
.v_subtitle { display: block !important; font-size: 1.3em !important; opacity: 0.6; font-weight: 400; margin: 0 auto 30px !important; line-height: 1.6 !important; word-break: break-all !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; max-width: 90% !important; }
.v_info { font-size: 0.9em; opacity: 0.4; margin-top: 20px; }

/* 유튜브 및 BGM 박스 */
.v_bgm { 
    background: var(--nav-bg) !important; 
    border: 1px solid var(--border-color) !important; 
    padding: 20px; 
    border-radius: 12px; 
    margin: 30px 0 40px; 
    overflow: hidden; 
}

/* [4] 네비게이션 (이전/다음 글) - 시리즈와 간격 조절 */
.v_nav { margin: 60px auto 20px !important; display: flex; flex-direction: row; gap: 20px; justify-content: space-between; }
.nav_link { 
    display: flex; flex-direction: column; text-decoration: none; color: inherit !important; 
    padding: 10px 0; background: transparent !important; border: none !important; 
    width: 45%; transition: 0.2s; box-sizing: border-box; 
}
.v_nav a:first-child { text-align: left; }
.v_nav a:last-child { text-align: right; }
.nav_label { font-size: 0.75em; font-weight: bold; opacity: 0.4; margin-bottom: 8px; letter-spacing: 0.5px; }
.nav_title { font-size: 1em; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; }

/* [시리즈 영역 교정] 테두리, 중앙 정렬, 여백 최소화 */
.v_series {
    margin: 20px auto 20px !important; 
    padding: 20px 15px !important; 
    border: 1px solid var(--border-color) !important;
    border-radius: 12px;
    text-align: center !important;
    background: var(--nav-bg);
    position: relative;
    clear: both;
}

.series_hd { margin-bottom: 15px !important; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.series_label { font-size: 0.7em; font-weight: bold; opacity: 0.4; letter-spacing: 2px; }
.series_title { font-size: 1.05em !important; font-weight: bold !important; margin: 0 !important; opacity: 0.8; }

.series_list {
    list-style: none; padding: 0 !important; margin: 0 auto !important;
    display: inline-block; text-align: left; max-width: 100%;
}
.series_list li { padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.series_list li:last-child { border-bottom: none; }
.series_list li.is_current .ep_title { font-weight: bold; color: #4a90e2 !important; }

/* 시리즈 내부 페이징 버튼 중앙 정렬 및 여백 축소 */
.v_series .pg_wrap {
    margin: 15px auto 0 !important; 
    justify-content: center !important;
    display: flex !important;
}

/* [5] 하단 버튼 바 최적화 */
.bo_v_atc_mgmt, .v_btn, .v_bottom_btn { 
    margin: 20px auto 0 !important; padding: 10px 0 50px !important; 
    display: flex !important; justify-content: flex-end !important; gap: 20px !important; clear: both; 
}
.btn, .btn_admin, .btn_b02 { 
    all: unset !important; cursor: pointer !important; font-size: 0.85em !important; 
    color: inherit !important; opacity: 0.5; transition: 0.2s; display: inline-block !important; 
    background: transparent !important; border: none !important; padding: 5px 0 !important; 
}

/* 전체 공통 페이징 스타일 */
.pg_wrap a, .pg_wrap b, .pg_page, .pg_current { 
    display: inline-flex !important; align-items: center !important; justify-content: center !important; 
    min-width: 38px !important; height: 38px !important; padding: 0 10px !important; 
    border: 1px solid var(--border-color) !important; border-radius: 4px !important; 
    text-decoration: none !important; color: inherit !important; font-size: 0.9em !important; 
    background: var(--nav-bg) !important; opacity: 0.8 !important; 
}
.pg_wrap b, .pg_current { opacity: 1 !important; font-weight: bold !important; background: var(--border-color) !important; border-color: var(--text-color) !important; }

/* [6] 기타 레이아웃 */
#bo_w .write_row { margin-bottom: 25px; }

/* 텍스트, 셀렉트, 비밀번호 입력창 공통 스타일 병합 */
#bo_w input[type="text"], 
#bo_w select { 
    all: unset !important; 
    display: block !important; 
    width: 100% !important; 
    padding: 12px 0 !important; 
    border: none !important; 
    border-bottom: 1px solid var(--border-color) !important; 
    background: transparent !important; 
    color: inherit !important; 
    box-sizing: border-box !important; 
    outline: none !important; 
}

/* 비밀번호 입력창은 절대 all: unset을 먹이지 않고 단독으로 스타일링합니다 */
input[type="password"] { 
    padding: 8px 12px !important; 
    background: #ffffff !important; 
    color: #000000 !important; 
    border: 1px solid var(--border-color) !important; 
    border-radius: 4px !important; 
    font-family: sans-serif !important; 
    letter-spacing: 5px !important; 
    box-sizing: border-box !important; 
    outline: none !important; 
}

#wrapper_main, .main-content, #container { max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding-bottom: 0 !important; }

/* [디테일 교정] 비밀번호 입력창 안내 문구(Placeholder) 전용 스타일 */
input[type="password"]::placeholder {
    font-family: inherit !important; /* 홈페이지 기본 폰트 상속 */
    font-size: 13px !important; /* 너무 튀지 않는 적당한 크기 */
    letter-spacing: 0 !important; /* 넓게 벌어진 자간 정상화 */
    color: rgba(0, 0, 0, 0.4) !important; /* 부드럽고 은은한 반투명 색상 */
    font-weight: normal !important;
}

/* 크로스 브라우징 (다양한 브라우저 호환성 확보) */
input[type="password"]::-webkit-input-placeholder {
    font-family: inherit !important; font-size: 13px !important; letter-spacing: 0 !important; color: rgba(0, 0, 0, 0.4) !important; font-weight: normal !important;
}
input[type="password"]::-moz-placeholder {
    font-family: inherit !important; font-size: 13px !important; letter-spacing: 0 !important; color: rgba(0, 0, 0, 0.4) !important; font-weight: normal !important;
}

/* [비밀글 열람] 비밀번호 확인 페이지(#pw_confirm) 입력창 절대 방어 코드 */
#pw_confirm input[type="password"] {
    all: revert !important; /* 브라우저 기본 마스킹 기능 완벽 복구 */
    width: 200px !important; /* 입력창 너비 (필요시 조절 가능) */
    padding: 10px 15px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    letter-spacing: 3px !important; /* 마스킹 기호 간격 확보 */
    font-family: sans-serif !important;
    margin: 15px auto !important; /* 중앙 정렬을 위한 여백 */
    display: block !important;
    box-sizing: border-box !important;
}

/* 비밀번호 확인 페이지 안내 문구(Placeholder) 스타일 */
#pw_confirm input[type="password"]::placeholder {
    font-family: inherit !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    color: rgba(0, 0, 0, 0.4) !important;
    font-weight: normal !important;
}

#pw_confirm input[type="password"]::-webkit-input-placeholder {
    font-family: inherit !important; font-size: 13px !important; letter-spacing: 0 !important; color: rgba(0, 0, 0, 0.4) !important; font-weight: normal !important;
}
#pw_confirm input[type="password"]::-moz-placeholder {
    font-family: inherit !important; font-size: 13px !important; letter-spacing: 0 !important; color: rgba(0, 0, 0, 0.4) !important; font-weight: normal !important;
}

/* =========================================
   [데스크 교정] 본문 하단, 시리즈, 댓글 영역 간격 최적화
========================================= */

/* 1. 시리즈 리스트와 댓글 목록(#bo_vc) 사이의 간격 띄우기 */
#bo_vc {
    margin-top: 60px !important; /* 위쪽 시리즈 영역과의 간격을 시원하게 확보 */
    padding-top: 40px !important; 
    border-top: 1px solid var(--border-color) !important; /* 영역 구분을 위해 연한 선을 하나 그어줍니다 */
}

/* 댓글 목록 내부의 개별 댓글들 간격 살짝 조절 (가독성 향상) */
#bo_vc article {
    margin-bottom: 25px !important;
}

/* 2. 댓글 목록과 댓글 작성창(#bo_vc_w) 사이의 간격 띄우기 */
#bo_vc_w {
    margin-top: 50px !important; /* 작성창 위쪽 여백 */
    margin-bottom: 60px !important; /* 지면 맨 아래 바닥 여백 */
    padding-top: 30px !important;
    border-top: 1px dashed var(--border-color) !important; /* 작성창 위에는 점선을 넣어 감성적으로 분리합니다 */
}