/* assets/css/video_page.css — 영상 시청 페이지(pages/video.php) + 상품·사례 페이지의 «영상 페이지 · 대본» 링크 (2026-11-04)
   단색·얇은 테두리만 쓴다(그라데이션·빛 번짐 효과·한쪽 굵은 선 강조 없음). 색은 design_tokens 변수 + 기존 영상 블록 색(#1e2d7c). */

.vpage {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 20px 64px;
    color: var(--color-text, #1f2a44);
    word-break: keep-all;
}
.vpage__head { margin-bottom: 18px; }
.vpage__h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text-strong, #0d2a4d);
}
.vpage__lead {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted, #475569);
}

/* 플레이어 — case_video_html() 마크업(.cd-video) 그대로 */
.vpage__player { margin: 0 auto 32px; max-width: 640px; }
.vpage figure.cd-video { margin: 0; }
.vpage .cd-video__ttl { margin: 0 0 10px; font-size: 16px; font-weight: 800; line-height: 1.45; color: #0d1b4c; }
.vpage .cd-video__tag {
    display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 4px;
    background: #1e2d7c; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.5; vertical-align: 2px;
}
.vpage .cd-video__player {
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
    background: #f3f5fb; border: 2px solid #1e2d7c; border-radius: 6px;
}
.vpage .cd-video__cap { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #4a5785; text-align: center; }
.vpage .cd-video__more { display: inline-block; margin-left: 8px; font-weight: 700; color: #1e2d7c; text-decoration: none; white-space: nowrap; }
.vpage .cd-video__more:hover { text-decoration: underline; }

.vpage__sec { margin-top: 32px; }
.vpage__h2 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border, #e6ebf3);
    font-size: 19px;
    font-weight: 800;
    color: var(--color-text-strong, #0d2a4d);
}
.vpage__desc { margin: 0; font-size: 16px; line-height: 1.75; }

.vpage-script__p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.8; color: var(--color-text, #1f2a44); }
.vpage-script__p:last-child { margin-bottom: 0; }

.vpage__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.vpage__btn {
    display: inline-block;
    padding: 12px 18px;
    border: 1px solid #1e2d7c;
    border-radius: 6px;
    background: #1e2d7c;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.vpage__btn:hover { background: #16226a; }
.vpage__btn--ghost { background: #fff; color: #1e2d7c; }
.vpage__btn--ghost:hover { background: var(--color-bg-tint, #eaf2fb); }
.vpage__btn:focus-visible, .vpage-rel__card:focus-visible { outline: 2px solid #0050C8; outline-offset: 2px; }
.vpage__note { margin: 10px 0 0; font-size: 13.5px; color: var(--color-text-light, #64748b); }

/* 같은 주제 다른 영상 — 각자 시청 페이지로 가는 링크 카드 */
.vpage-rel { margin-top: 36px; }
.vpage-rel__list {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    margin: 0; padding: 0; list-style: none;
}
.vpage-rel__item { margin: 0; padding: 0; min-width: 0; }
.vpage-rel__item::before, .vpage-rel__item::marker { content: none; }
.vpage-rel__card {
    display: block; height: 100%;
    border: 1px solid var(--color-border, #e6ebf3); border-radius: 6px;
    background: #fff; color: var(--color-text, #1f2a44); text-decoration: none; overflow: hidden;
}
.vpage-rel__card:hover { border-color: #0050C8; }
.vpage-rel__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: #f3f5fb; }
.vpage-rel__ttl { display: block; margin: 9px 10px 11px; font-size: 14px; font-weight: 700; line-height: 1.45; }
.vpage-rel__dur { display: inline-block; margin-right: 6px; color: var(--color-text-light, #64748b); font-weight: 600; }
.vpage-rel__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vpage__more { margin: 36px 0 0; text-align: center; }
.vpage__more a { font-weight: 700; color: #1e2d7c; text-decoration: none; }
.vpage__more a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .vpage { padding: 24px 16px 48px; }
    .vpage__h1 { font-size: 21px; }
    .vpage__lead { font-size: 15px; }
    .vpage-rel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vpage__btn { width: 100%; text-align: center; }
}

/* 상품·사례 페이지 쪽 링크 — includes/case_video.php video_watch_link() (watch=index 인 영상만 · 이 파일도 그 페이지에서만 불린다) */
.cd-video__page { display: inline-block; margin-left: 8px; font-weight: 700; color: #1e2d7c; text-decoration: none; white-space: nowrap; }
.cd-video__page:hover { text-decoration: underline; }
/* 링크가 붙은 카드 칸만 세로 묶음 — 카드(height:100%)가 칸을 다 차지해 링크가 칸 밖으로 밀리던 것(휴대폰 한 줄 스크롤에서 잘림) 방지 */
.vgal__item:has(> .vgal__link) { display: flex; flex-direction: column; }
.vgal__item:has(> .vgal__link) > .vgal__card { flex: 1 1 auto; height: auto; }
.vgal__link {
    flex: 0 0 auto;
    display: block; margin: 6px 2px 0;
    font-size: 13px; font-weight: 700; line-height: 1.4; color: #1e2d7c; text-decoration: none;
}
.vgal__link:hover { text-decoration: underline; }