@charset "utf-8";

/* ─────────────────────────────────────────────────────────────
   메인 FEATURED VIDEOS — 그림 대신 영상이 들어간 자리
   원본 슬라이드 크기를 그대로 지키면서 영상만 채운다.
   ───────────────────────────────────────────────────────────── */

.videos .video_item { position: relative; }

.videos .home_video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    background: #11161c;
    object-fit: cover;
}

.videos .video_embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;      /* 16:9 */
    border-radius: 6px;
    overflow: hidden;
    background: #11161c;
}

.videos .video_embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.videos .video_more {
    display: block;
    margin-top: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #1f1b17;
    line-height: 1.5;
    text-decoration: none;
    word-break: keep-all;
}

.videos .video_more:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .videos .video_more { font-size: 13px; }
}

/* ── 썸네일 + 재생 표시 ──────────────────────────────────── */

/*
 * 칸은 영상과 같은 16:9 (2026-10-06 대표님 — 전에는 600:470 이라 16:9 썸네일의 좌우가 잘리고 크게 늘어나 흐렸다).
 * 유튜브 큰 그림(1280×720)이 칸에 꼭 맞아 잘리거나 찌그러지지 않고, 줄여 보여 선명하다.
 */
.videos .video_thumb {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: #11161c;
    aspect-ratio: 16 / 9;
}

.videos .video_thumb img,
.videos .video_thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.videos .video_thumb:hover img,
.videos .video_thumb:hover video { transform: scale(1.04); }

/* 가운데 재생 표시 */
.videos .video_play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(17, 22, 28, .55);
    border: 2px solid rgba(255, 255, 255, .85);
    transition: background .2s;
}

.videos .video_play::after {
    content: "";
    position: absolute;
    left: 53%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}

.videos .video_thumb:hover .video_play { background: rgba(176, 141, 87, .85); }

@media (max-width: 768px) {
    .videos .video_play { width: 46px; height: 46px; }
    .videos .video_play::after { border-width: 7px 0 7px 12px; }
}

/* ── 상세 화면의 영상 ────────────────────────────────────── */

.movie_player {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #11161c;
    margin-bottom: 22px;
}

.movie_player video { width: 100%; height: auto; display: block; }

.movie_player .embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.movie_player .embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── 대표 영상 · 유튜브 영상 그림 (2026-10-05) ───────────── */

/* 대표 영상 — 첫 화면 영상 칸 맨 앞, 그림 왼쪽 위 */
.videos .video_badge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    padding: 4px 11px;
    border-radius: 999px;
    background: #c5a059;
    color: #1f1b17;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(17, 22, 28, .25);
}

@media (max-width: 768px) {
    .videos .video_badge { left: 8px; top: 8px; padding: 3px 9px; font-size: 11px; }
}

/*
 * 대표그림이 없는 유튜브 영상 그림 — 보통은 큰 그림(.yt_thumb · 16:9 · 칸에 꼭 맞음).
 * 그 영상에 큰 그림이 없을 때만 site-video.js 가 hqdefault(4:3)로 바꾸고 .yt_poster 를 붙인다.
 * 16:9 영상의 hqdefault 는 위아래에 검은 띠(각 12.5%)가 있어, 칸보다 1/3 크게 그려 띠를 칸 밖으로 밀어낸다 (16:9 칸이면 좌우는 안 잘린다).
 */
.videos .video_thumb img.yt_poster {
    position: absolute;
    left: 0;
    top: -16.67%;
    height: 133.34%;
}

/* ── 첫 화면에서 바로 재생 (2026-10-06) ─────────────────────
   재생 단추를 누르면 그림 칸(a.video_thumb)이 같은 크기의 재생 칸(div.video_thumb.is-playing)으로 바뀐다
   (assets/js/site-video.js). 슬라이드 높이가 그대로라 옆 칸이 흔들리지 않는다. */
.videos .video_thumb.is-playing { background: #000; cursor: default; }

.videos .video_thumb.is-playing iframe,
.videos .video_thumb.is-playing video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    transform: none !important;
    transition: none;
}

/* ── 첫 화면 FEATURED VIDEOS 칸 배치 (2026-10-06 대표님 — 크기 · 사이 · 선명도) ─────────────
   ① 원본 main.css 의 `.section10 .main_txt div div { padding-top: 10px }`(휴대폰 20px)가 slick 이 끼워 넣은
      겹겹의 div(목록 · 줄 · 칸 · 칸 안 div · 영상 칸)에 모두 걸려, 글과 영상 사이가 PC 50px · 휴대폰 100px 로 불어났다.
      → 슬라이드 안쪽은 0, 슬라이드(.videos) 한 곳에서만 띄운다 (PC 는 지금 보이는 50px 그대로 · 휴대폰은 40px).
   ② 칸 사이 30px — 칸 안 div 에 좌우 15px, 목록(.slick-list)은 좌우 -15px 라 양 끝은 제목 · 더보기 줄과 그대로 맞는다.
      slick 이 칸 너비를 목록 너비로 셈하므로 따로 셈할 것이 없다 (PC 1200px 칸 → 영상 585×329).
   ③ 넘김 화살표 : 영상 그림의 세로 가운데 (전에는 제목 줄까지 넣은 높이의 가운데라 아래로 처졌다)
      · 쌓임 순서는 머리글(1000)보다 아래 (전에는 1002 라 내려 볼 때 흰 머리글 위로 비쳤다).
      그림 높이 = (칸 너비 + 30px) / 한 화면 칸 수 - 30px 의 9/16 — 슬라이드 너비(100cqw)로 셈한다.
   ──────────────────────────────────────────────────────────────── */
.section10 .main_txt .videos {
    --v-top: 50px;      /* 글과 영상 사이 */
    --v-gap: 30px;      /* 영상 사이 */
    --v-cols: 2;        /* 한 화면에 보이는 칸 수 — slick responsive 와 같게 (900px 미만 1칸) */
    container-type: inline-size;
    padding-top: var(--v-top);
}

.section10 .main_txt .videos .slick-list { margin: 0 calc(var(--v-gap) / -2); }

.section10 .main_txt .videos .slick-track,
.section10 .main_txt .videos .slick-slide,
.section10 .main_txt .videos .video_item { padding-top: 0; }

.section10 .main_txt .videos .slick-slide > div { padding: 0 calc(var(--v-gap) / 2); }

/* 올린 영상(첫 장면)도 칸을 꽉 채운다 — 원본의 `div div video { width: 99% }` 가 이겨 오른쪽이 1% 비었다 */
.section10 .main_txt .videos .video_thumb video { width: 100%; height: 100%; border-radius: 0; }

.section10 .main_txt .videos .slick-arrow {
    z-index: 5;
    top: calc(var(--v-top) + ((100cqw + var(--v-gap)) / var(--v-cols) - var(--v-gap)) * 9 / 32 - 18px);
}

@media screen and (max-width: 900px) {
    .section10 .main_txt .videos { --v-top: 40px; }
}

@media screen and (max-width: 899.98px) {
    .section10 .main_txt .videos { --v-cols: 1; }
}