/* =====================================================================
   메인 페이지 — 시안1-4 (body.mx4). 시안1-3(main-new-3.css) 위에 덧씀.
   첫 화면 영상 + Showcase 예제를 하나의 첫 화면으로. 영상은 원본 비율(1920:500) 그대로.
   ===================================================================== */
.mx4 { --peek: clamp(96px, 15svh, 168px); }   /* 첫 화면 아래에 보이는 예제 높이 */

/* ---------- 통합 영역: 하나의 배경 (경계 없음) ---------- */
.mx4 .mx4-first { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--hero-bg) 0, var(--bg) 1100px); }
/* 배경 빛(.hv-bg)을 통합 영역 전체에 깔아 영상·예제 사이에 이음새가 생기지 않게 */
.mx4 .mx4-first > .h4 { position: static; overflow: visible; background: none; }
.mx4 .mx4-first > .h4 > .hv-bg { z-index: 0; }
.mx4 .mx4-first > .h4 > .h4-stage { position: relative; z-index: 1; }

/* ---------- 영상: 화면 폭을 최대한 쓰되, 아래 예제가 살짝 보이도록 세로 높이로 제한 ---------- */
.mx4 .h4 { justify-content: center; min-height: calc(100svh - var(--peek)); padding: calc(var(--header-h) + clamp(14px, 2.4vh, 28px)) 0 clamp(20px, 3vh, 36px); }
.mx4 { --side: clamp(12px, 2vw, 32px); }
@media (min-width: 1360px) { .mx4 { --side: 72px; } }   /* 오른쪽 섹션 내비(점 목록)와 겹치지 않게 양쪽 같은 여백 */
.mx4 .h4-stage { margin-top: 0; width: min(calc(100% - 2 * var(--side)), calc((100svh - var(--header-h) - var(--peek) - 64px) * 3.84 + 10px)); max-width: 1880px; }
/* 창 프레임 간결하게: 상단 바(점 3개) 삭제, 얇은 테두리만 */
.mx4 .h4 .vbar { display: none; }
.mx4 .h4 .vframe { padding: 5px; border-radius: 18px; box-shadow: 0 40px 90px -46px rgba(70, 60, 200, .45), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.mx4 .h4 .vframe .video-box { aspect-ratio: 1920 / 500; border-radius: 13px; }

/* ---------- Showcase: 제목 없이 영상 바로 아래에 이어짐 ---------- */
.mx4 .mx4-show { position: relative; z-index: 1; padding-top: 0; background: none; }

/* 태블릿·모바일(세로 화면): 영상이 가로로 길어 높이를 채울 수 없으므로 첫 화면 높이를 줄여 예제가 화면 아래쪽에서 시작되게 */
@media (max-width: 900px) {
  .mx4 .h4 { min-height: 62svh; }
  .mx4 .h4-stage { width: calc(100% - 24px); }
  .mx4 .h4 .vframe { padding: 4px; border-radius: 14px; }
  .mx4 .h4 .vframe .video-box { border-radius: 10px; }
}
@media (max-width: 600px) { .mx4 .h4 { min-height: 50svh; } .mx4 .h4-stage { width: calc(100% - 16px); } .mx4 .h4 .vframe { padding: 3px; border-radius: 11px; } .mx4 .h4 .vframe .video-box { border-radius: 8px; } }

/* ---------- 섹션 배경 흐름 ----------
   첫 화면+Showcase(밝은 그라데이션) → 레퍼런스(연보라, 1-3 그대로) → 차트(어두움)
   → 기능(밝음 + 오른쪽 보라 그라데이션) → AI 대시보드(밝은 하늘빛, 1-3 그대로) → 안전(어두움) → 이하 그대로 */
/* 차트: 어두운 영역(사이트 공통 .inv 배경) */
.mx4 .mx4-dark > #charts { background: none; }
/* 레퍼런스: 흰색으로 끝나는 첫 화면 다음에 연보라로 또렷하게 구분 */
:root[data-v][data-theme="light"] .mx4 #trust { background: linear-gradient(180deg, #f1eeff 0%, #f5f3ff 100%); }
:root[data-theme="dark"] .mx4 #trust { background: var(--bg-alt); }
/* 기능: 밝은 바탕 + 오른쪽 보라 그라데이션 */
.mx4 .mx4-fx > #features { background: radial-gradient(900px 620px at 100% 40%, rgba(185, 168, 255, .3), transparent 62%), radial-gradient(700px 420px at 100% 100%, rgba(143, 208, 255, .14), transparent 60%), #ffffff; }
[data-theme="dark"] .mx4 .mx4-first { background: var(--hero-bg); }
[data-theme="dark"] .mx4 .mx4-fx > #features { background: var(--bg); }