@charset "utf-8";
/* 영상 게시판 스킨 (theme/sample38/skin/board/video) : 설명회 다시보기(i1) / 프로그램 안내영상(j1) */

#vd_list, #vd_view, #vd_write {max-width:1200px; margin:0 auto; padding:60px 0 120px} /* 좌우 여백은 부모 요소에 있음 */
#vd_write {max-width:960px}

/* 버튼 */
.vd_btns {display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-top:20px}
.vd_btns_top {margin:0 0 20px}
.vd_btns_c {justify-content:center; margin-top:36px}
.vd_btn {display:inline-block; padding:10px 18px; border:1px solid #ddd; border-radius:4px; background-color:#fff; font-family:inherit; font-size:14px; line-height:1.4; color:#333; text-align:center; vertical-align:middle; box-sizing:border-box; cursor:pointer} /* line-height 직접 : a(목록)는 바깥 틀 1.75 를 물려받고 button(저장)은 기본값이라 크기가 달라지던 것 맞춤 */
.vd_btn:hover {background-color:#f5f5f5}
.vd_btn_dark {border-color:#222; background-color:#222; color:#fff}
.vd_btn_dark:hover {background-color:#000}
.vd_chkall {display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-size:14px; color:#555; cursor:pointer}

/* 점 3개 버튼 (선택삭제) */
.vd_more {position:relative; align-self:stretch}
.vd_more_btn {height:100%; padding:0 14px}
.vd_more_list {display:none; position:absolute; top:100%; right:0; z-index:10; min-width:110px; margin:4px 0 0; padding:4px 0; border:1px solid #ddd; border-radius:4px; background-color:#fff; list-style:none; box-shadow:0 4px 12px rgba(0,0,0,.08)}
.vd_more_list button {display:block; width:100%; padding:9px 14px; border:0; background:none; font-size:14px; color:#333; text-align:left; white-space:nowrap; cursor:pointer}
.vd_more_list button:hover {background-color:#f5f5f5}

/* 목록 : 썸네일 카드 (한 줄 개수 = 관리자 게시판 설정 갤러리 이미지 수 → list.skin.php 에서 --cols 로 넘김) */
.vd_grid {display:grid; grid-template-columns:repeat(var(--cols, 3), 1fr); gap:40px 24px; margin:0; padding:0; list-style:none}
.vd_grid li {position:relative; min-width:0}
.vd_chk {position:absolute; top:10px; left:10px; z-index:2; width:18px; height:18px} /* 관리자 선택 */
.vd_grid a {display:block}
.vd_thumb {position:relative; display:block; aspect-ratio:16/9; border-radius:8px; background-color:#111; overflow:hidden}
.vd_thumb img {display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s}
.vd_thumb svg {position:absolute; top:50%; left:50%; opacity:.9; transform:translate(-50%, -50%); transition:opacity .2s}
.vd_grid a:hover .vd_thumb img {transform:scale(1.03)}
.vd_grid a:hover .vd_thumb svg {opacity:1}
.vd_tit {display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; margin-top:14px; font-size:16px; font-weight:600; line-height:1.45; color:#111; word-break:keep-all}
.vd_grid a:hover .vd_tit {text-decoration:underline; text-underline-offset:.2em}
.vd_info {display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:8px; font-size:13px; color:#999}
.vd_info span + span:before {content:""; display:inline-block; width:1px; height:10px; margin-right:10px; background-color:#ddd; vertical-align:-1px} /* 사이 구분선 */
.vd_empty {padding:100px 0; border-top:2px solid #222; border-bottom:1px solid #eee; font-size:15px; color:#999; text-align:center}

/* 보기 */
.vd_player {position:relative; aspect-ratio:16/9; border-radius:8px; background-color:#000; overflow:hidden}
.vd_player iframe {position:absolute; top:0; left:0; width:100%; height:100%; border:0}
.vd_player + .vd_player {margin-top:20px} /* 영상 2개 (링크 2) */
.vd_v_head {padding:24px 0 20px; border-bottom:1px solid #ddd}
.vd_v_head h2 {margin:0; font-size:24px; font-weight:700; line-height:1.4; color:#111; word-break:keep-all}
.vd_v_head .vd_info {font-size:14px}
.vd_v_con {padding:24px 0 30px; border-bottom:1px solid #ddd; font-size:16px; line-height:1.7; color:#333; word-break:break-all}
.vd_nb {margin:40px 0 0; padding:0; border-top:1px solid #222; list-style:none}
.vd_nb li {display:flex; gap:20px; padding:14px 10px; border-bottom:1px solid #eee; font-size:15px}
.vd_nb span {flex-shrink:0; width:70px; color:#888}
.vd_nb a {overflow:hidden; color:#333; text-overflow:ellipsis; white-space:nowrap}
.vd_nb a:hover {text-decoration:underline; text-underline-offset:.2em}

/* 등록 / 수정 */
#vd_write .vd_row {display:flex; align-items:flex-start; gap:16px; padding:12px 0; border-bottom:1px solid #eee}
#vd_write .vd_row:first-of-type {border-top:2px solid #222}
#vd_write .vd_row > label, #vd_write .vd_label {flex-shrink:0; width:100px; padding-top:10px; font-size:14px; font-weight:600; color:#111}
#vd_write .vd_row > .frm_input, #vd_write .vd_field .frm_input {flex:1; width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:4px; font-size:14px; box-sizing:border-box}
#vd_write .vd_field {flex:1; min-width:0}
#vd_write .vd_field .vd_input_s {width:200px}
#vd_write .vd_field textarea {width:100%; padding:12px; border:1px solid #ddd; border-radius:4px; font-size:14px; line-height:1.6; box-sizing:border-box; resize:vertical}
#vd_write .vd_check {flex:1; padding-top:10px; font-size:14px} /* 체크박스 label 은 div 로 감싸야 .vd_row > label 의 width 를 안 받음 */
#vd_write .vd_check label {display:inline-flex; align-items:center; gap:6px; cursor:pointer}
#vd_write .vd_field input[type=file] {padding-top:8px}
#vd_write .vd_file_del {display:block; margin-top:6px; font-size:13px; color:#777}
#vd_write .vd_help {margin:6px 0 0; font-size:12px; color:#888}
#vd_write .vd_help_tip {font-size:13px; line-height:1.6; color:#555; word-break:keep-all} /* 썸네일 : 유튜브에서 등록 추천 */
#vd_write .vd_help_tip b {font-weight:600; color:#111}

@media screen and (max-width:1024px) {
	.vd_grid {grid-template-columns:repeat(var(--cols-t, 2), 1fr)}
}

@media screen and (max-width:768px) {
	#vd_list, #vd_view, #vd_write {padding:24px 0 50px} /* 모바일 좌우 여백은 부모 요소에 있음 */
	.vd_btn {padding:9px 14px; font-size:13px}
	.vd_chkall {font-size:13px}

	.vd_grid {grid-template-columns:repeat(var(--cols-m, 2), 1fr); gap:28px 12px}
	.vd_thumb {border-radius:6px}
	.vd_thumb svg {width:42px; height:30px}
	.vd_tit {margin-top:10px; font-size:14px}
	.vd_info {margin-top:6px; font-size:12px}

	.vd_player {border-radius:6px}
	.vd_v_head {padding:18px 0 16px}
	.vd_v_head h2 {font-size:19px}
	.vd_v_head .vd_info {font-size:13px}
	.vd_v_con {padding:20px 0 24px; font-size:15px}
	.vd_nb li {gap:12px; padding:12px 4px; font-size:14px}
	.vd_nb span {width:60px}

	#vd_write .vd_row {flex-direction:column; gap:6px}
	#vd_write .vd_row > label, #vd_write .vd_label {width:auto; padding-top:0}
	#vd_write .vd_field .vd_input_s {width:100%}
}