@charset "utf-8";

.selec_chk { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; outline: 0; z-index: -1; overflow: hidden; }
.chk_box { position: relative; }
.chk_box input[type="checkbox"] + label { position: relative; color: #676e70; cursor: pointer; }
.chk_box input[type="checkbox"] + label span { float: left; width: 15px; height: 15px; display: block; background: #fff; border: 1px solid #d0d4df; border-radius: 3px; margin-right: 6px; }
.chk_box input[type="checkbox"]:checked + label span { background: url(./img/chk.png) no-repeat 50% 50% #111; border-color: #111; }

.btn_bo_user { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; }
.btn_bo_user > li { position: relative; }
.btn_bo_user .btn { width: 40px; height: 40px; line-height: 40px; padding: 0; }
.more_opt { display: none; position: absolute; top: 45px; right: 0; background: #fff; border: 1px solid #b8bfc4; z-index: 999; }
.more_opt li { border-bottom: 1px solid #f1f1f1; padding: 10px; width: 110px; color: #6b757c; text-align: left; }
.more_opt li:last-child { border-bottom: 0; }
.more_opt li button, .more_opt li a { width: 100%; border: 0; background: #fff; color: #6b757c; }
.more_opt li:hover a,
.more_opt li:hover button { color: #000; }
.more_opt li i { float: right; line-height: 20px; }

.yt_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.yt_play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }

/* list */
.youtube_board { padding: 160px 0 120px; background: #fff; }
.yt_admin { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.yt_admin .all_chk label { display: flex; align-items: center; font-size: 14px; }
.yt_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
.yt_list li { position: relative; }
.yt_list li a { display: block; }
.yt_list .thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #111; }
.yt_list .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt_list li a:hover .yt_play { background: rgba(229, 57, 53, 0.9); }
.yt_list strong { display: block; margin-top: 16px; font-size: 18px; font-weight: 700; color: #111; letter-spacing: -0.02em; line-height: 1.4; }
.yt_tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.yt_tags span { font-size: 13px; color: #888; }
.yt_chk { position: absolute; top: 12px; left: 12px; z-index: 2; }
.yt_empty { padding: 80px 0; text-align: center; color: #999; font-size: 16px; }
.youtube_board .pg_wrap { display: flex; justify-content: center; float: none; width: 100%; margin-top: 50px; }

/* view */
.yt_view { padding: 160px 0 120px; background: #fff; }
.yt_view .view_head { margin-bottom: 24px; }
.yt_view h2 { font-size: 32px; font-weight: 700; color: #111; letter-spacing: -0.03em; line-height: 1.35; }
.yt_embed { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 20px; background: #111; }
.yt_embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.yt_images { overflow: hidden; border-radius: 20px; background: #ececec; margin-top: 28px; }
.yt_images .yt_image { margin-top: 12px; }
.yt_images .yt_image:first-child { margin-top: 0; }
.yt_images .yt_image img { display: block; width: 100%; height: auto; }
.yt_view .view_con { margin-top: 48px; font-size: 16px; color: #444; line-height: 1.8; word-break: keep-all; }
.yt_view .view_con.is_yt_desc { margin-top: 56px; }
.yt_view .view_con p { margin: 0 0 1em; }
.yt_view .view_con p:last-child { margin-bottom: 0; }
.yt_view .view_con img { max-width: 100%; height: auto; border-radius: 12px; }
.yt_view .yt_images + .view_con { margin-top: 40px; }
.yt_view .view_btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.yt_view .view_btns a { display: inline-block; min-width: 88px; height: 42px; line-height: 42px; padding: 0 16px; border: 1px solid #ddd; border-radius: 8px; text-align: center; font-size: 14px; font-weight: 500; color: #333; background: #fff; }
.yt_view .view_btns .btn_list { background: #111; border-color: #111; color: #fff; }

/* write */
.yt_write { max-width: 900px; margin: 0 auto; padding: 160px 20px 120px; }
#bo_w.yt_write { max-width: 900px; }
.yt_write h2 { margin-bottom: 28px; font-size: 28px; font-weight: 700; color: #111; }
.yt_write .write_div { margin: 0 0 18px; }
.yt_write label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: #111; }
.yt_write label strong { color: #e11; font-size: 12px; font-weight: 500; }
.yt_write .frm_input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: 15px; }
.yt_write .half_input { width: 49%; margin-right: 2%; }
.yt_write .frm_info { margin-top: 8px; font-size: 13px; color: #999; }
.yt_write .file_wr { border: 1px solid #ddd; border-radius: 6px; background: #fff; padding: 10px 14px; }
.yt_write .frm_file { width: 100%; }
.yt_write .file_del { display: block; margin-top: 8px; font-size: 13px; color: #777; }
.yt_write .wr_content textarea { width: 100%; min-height: 280px; padding: 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; line-height: 1.7; }
.yt_write .wr_content.smarteditor2 iframe { background: #fff; }
.yt_preview { position: relative; margin-top: 14px; overflow: hidden; border-radius: 14px; background: #111; }
.yt_preview img { display: block; width: 100%; height: auto; }
.yt_write .btn_confirm { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; }
.yt_write .btn_cancel,
.yt_write .btn_submit { min-width: 110px; height: 46px; line-height: 46px; padding: 0 20px; border-radius: 6px; font-size: 15px; font-weight: 600; }
.yt_write .btn_cancel { background: #f2f2f2; color: #333; }
.yt_write .btn_submit { background: #111; color: #fff; border: 0; }

@media (max-width: 1023px) {
    .youtube_board,
    .yt_view { padding: 120px 0 80px; }
    .yt_write { padding: 120px 20px 80px; }
    .yt_list { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .yt_view h2 { font-size: 26px; }
}
@media (max-width: 767px) {
    .youtube_board,
    .yt_view { padding: 100px 0 60px; }
    .yt_write { padding: 100px 20px 60px; }
    .yt_list { grid-template-columns: 1fr; }
    .yt_list strong { font-size: 16px; }
    .yt_play { width: 52px; height: 52px; }
    .yt_play::after { border-width: 9px 0 9px 15px; }
}