@charset "utf-8";

/* 홍보영상(비메오) 게시판 스킨
   - 컨텐츠 폭은 바깥 <main><div class="container">(_inc/board_head.php)가 서브페이지 공통 규칙으로 잡음 → 스킨은 폭 100%
   - 컬러는 사이트 공통 변수(default.css :root) 사용, 변수가 없을 때를 대비해 기본값 지정 */
.vimeo-board {
    --vb-point: var(--color-primary, #9A0000);
    --vb-text: var(--color-text, #2F2D28);
    --vb-sub: var(--color-gray, #808284);
    --vb-line: #DFDFDF;
    box-sizing: border-box;
    padding: 90px 0 200px;
    color: var(--vb-text);
}

/* 서브페이지 본문처럼 하단 여백(200px)으로 관심고객등록과의 간격을 잡으므로 default.css의 .lead 상단 여백(10vh) 제외 */
.board-page ~ .lead { margin-top: 0; }
.vimeo-board *, .vimeo-board *::before, .vimeo-board *::after { box-sizing: border-box; }

/* 공통 버튼 */
.vb-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 6px; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.vb-btn--line { border: 1px solid var(--vb-line); background: #fff; color: var(--vb-text); }
.vb-btn--line:hover { border-color: var(--vb-text); }
.vb-btn--point { border: 1px solid var(--vb-point); background: var(--vb-point); color: #fff; }
.vb-btn--point:hover { opacity: .9; }
.vb-btn--list { min-width: 160px; height: 52px; border: 1px solid var(--vb-text); background: #fff; color: var(--vb-text); font-size: 16px; }
.vb-btn--list:hover { background: var(--vb-text); color: #fff; }

/* 카테고리 (관리자에서 분류 사용 시) */
#bo_cate { margin: 0 0 30px; }
#bo_cate h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_cate ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#bo_cate a { display: block; padding: 10px 20px; border: 1px solid var(--vb-line); border-radius: 30px; color: var(--vb-text); font-size: 15px; text-decoration: none; }
#bo_cate a:hover, #bo_cate #bo_cate_on { border-color: var(--vb-point); background: var(--vb-point); color: #fff; }


/* ===== 목록 ===== */
.vimeo-board__admin { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 24px; }
.vimeo-board__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.vimeo-board__chkall { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--vb-sub); }

.vimeo-list { display: grid; grid-template-columns: repeat(var(--gall-cols, 2), minmax(0, 1fr)); gap: 60px 40px; margin: 0; padding: 0; list-style: none; }
.vimeo-list__item { position: relative; }
.vimeo-list__chk { position: absolute; top: 12px; left: 12px; z-index: 2; }
.vimeo-list__chk input { width: 20px; height: 20px; cursor: pointer; }
.vimeo-list__link { display: block; color: inherit; text-decoration: none; }

/* 썸네일 : 16:9 고정, 관리자 '갤러리 이미지 폭/높이'와 비율이 달라도 꽉 차게 표시 */
.vimeo-list__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #F2F2F2;border: 1px solid #eee; }
.vimeo-list__thumb img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.vimeo-list__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #B5B5B5; font-size: 14px; font-weight: 600; letter-spacing: .1em; }
.vimeo-list__link:hover .vimeo-list__thumb img { transform: scale(1.05); }

/* 재생 아이콘 : 원 + 삼각형을 CSS로 표현 */
.vimeo-list__play { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0,0,0,.45); transition: background-color .3s; }
.vimeo-list__play::before { content: ""; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -7px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.vimeo-list__link:hover .vimeo-list__play { background: var(--vb-point); }

.vimeo-list__title { display: block; margin-top: 20px; font-size: 20px; font-weight: 600; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.vimeo-list__link:hover .vimeo-list__title { color: var(--vb-point); }
.vimeo-list__notice { display: inline-block; margin-right: 6px; padding: 3px 8px; border-radius: 4px; background: var(--vb-point); color: #fff; font-size: 13px; font-weight: 500; vertical-align: 2px; }
.vimeo-list__empty { grid-column: 1 / -1; padding: 120px 0; border-top: 1px solid var(--vb-line); border-bottom: 1px solid var(--vb-line); color: var(--vb-sub); text-align: center; }

/* 페이지 번호 (그누보드 $write_pages 출력) */
.vimeo-board .pg_wrap { display: block; float: none; clear: both; margin: 80px 0 0; text-align: center; }
.vimeo-board .pg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.vimeo-board .pg_page, .vimeo-board .pg_current { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 6px; border: 0; border-radius: 50%; background: none; color: var(--vb-sub); font-size: 15px; text-decoration: none; }
.vimeo-board .pg_page:hover { color: var(--vb-text); }
.vimeo-board .pg_current { background: var(--vb-point); color: #fff; font-weight: 600; }


/* ===== 보기 ===== */
.vimeo-view__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--vb-text); }
.vimeo-view__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.vimeo-view__cate { display: block; margin-bottom: 8px; color: var(--vb-point); font-size: 16px; font-weight: 600; }
.vimeo-view__admin { display: flex; flex-shrink: 0; gap: 6px; }

.vimeo-view__body { padding: 50px 0 70px; border-bottom: 1px solid var(--vb-line); }
.vimeo-view__con { font-size: 16px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
.vimeo-view__con p { margin: 0; }
.vimeo-view__con img { max-width: 100%; height: auto; }

/* 비메오 영상 : 컨텐츠 폭 100%, 높이는 view.skin.php 스크립트가 aspect-ratio로 지정 (스크립트 전에는 16:9) */
.vimeo-view__con iframe[src*="player.vimeo.com"] { display: block; max-width: 100%;/* 쇼츠영상도 가로 100%로 나와서 주석처리함 width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 16 / 9; */ margin: 0 auto; border: 0; position: static !important; }
.vimeo-view__con iframe[src*="player.vimeo.com"] + br { display: none; }
.vimeo-view__con * + iframe[src*="player.vimeo.com"],
.vimeo-view__con iframe[src*="player.vimeo.com"] ~ * { margin-top: 30px; }

.vimeo-view__foot { margin-top: 60px; text-align: center; }


/* ===== 글쓰기 ===== */
.vimeo-write__row { margin: 0 0 28px; }
.vimeo-write__row--half { display: flex; gap: 10px; }
.vimeo-write__label { display: block; margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.vimeo-write__input { display: block; width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--vb-line); border-radius: 8px; background: #fff; color: var(--vb-text); font-size: 15px; }
.vimeo-write__input:focus { border-color: var(--vb-text); outline: none; }
.vimeo-write__help { margin: 8px 0 10px; color: var(--vb-sub); font-size: 14px; line-height: 1.6; }
.vimeo-write__option { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.vimeo-write__file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--vb-line); border-radius: 8px; font-size: 14px; }
.vimeo-write__file-del { color: var(--vb-sub); }
.vimeo-write__btns { display: flex; justify-content: center; gap: 8px; margin-top: 50px; }
.vimeo-write__btns .vb-btn { min-width: 140px; height: 52px; font-size: 16px; }

#autosave_wrapper { position: relative; }
#autosave_wrapper .vimeo-write__input { padding-right: 150px; }
.vimeo-write__autosave { position: absolute; top: 9px; right: 9px; height: 34px; padding: 0 12px; border: 1px solid var(--vb-line); border-radius: 6px; background: #fff; color: var(--vb-sub); font-size: 13px; cursor: pointer; }
#autosave_pop { display: none; position: absolute; top: 56px; right: 0; z-index: 10; width: 350px; max-height: 180px; border: 1px solid #565656; background: #fff; box-shadow: 2px 2px 3px rgba(0,0,0,.2); }
#autosave_pop strong { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#autosave_pop ul { height: 130px; margin: 0; padding: 15px; border-bottom: 1px solid #e8e8e8; list-style: none; overflow-y: scroll; }
#autosave_pop li { display: flex; justify-content: space-between; padding: 8px 5px; border-bottom: 1px solid #fff; background: #eee; }
#autosave_pop span { color: #999; font-size: .92em; font-style: italic; }
#autosave_pop div { text-align: center; }
.autosave_close { width: 100%; height: 30px; border: 0; background: none; color: #888; font-weight: bold; cursor: pointer; }
.autosave_content { display: none; }
.autosave_del { width: 20px; height: 20px; border: 0; background: none; text-indent: -999px; overflow: hidden; cursor: pointer; }
#char_count_desc { margin: 0 0 5px; }
#char_count_wrap { margin: 5px 0 0; text-align: right; }


/* ===== 반응형 ===== */
@media (max-width: 767.98px) {
    .vimeo-board { padding: 30px 0 80px; }

    /* 모바일은 화면 폭이 좁아 1열로 표시 (관리자 '갤러리 이미지 수'와 관계없이) */
    .vimeo-list { grid-template-columns: 1fr; gap: 40px; }
    .vimeo-list__play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
    .vimeo-list__play::before { margin: -9px 0 0 -5px; border-width: 9px 0 9px 15px; }
    .vimeo-list__title { margin-top: 14px; font-size: 17px; }
    .vimeo-board .pg_wrap { margin-top: 50px; }

    .vimeo-view__head { flex-direction: column; align-items: stretch; padding-bottom: 20px; }
    .vimeo-view__title { font-size: 22px; }
    .vimeo-view__admin { justify-content: flex-end; }
    .vimeo-view__body { padding: 30px 0 50px; }
    .vimeo-view__con { font-size: 15px; }
    .vimeo-view__foot { margin-top: 40px; }

    .vimeo-write__row--half { flex-direction: column; }
    #autosave_pop { width: 100%; }
}