/* =====================================================================
   메인 페이지 — 시안1-2 (body.mx2). 원본 CSS는 그대로, 이 파일만 추가.
   섹션 순서는 원본 그대로. 영상은 원본 레이아웃·비율(크롭 없음).
   ===================================================================== */

/* ---------- 첫 화면: 화면 높이를 채우고, 영상 아래 '둘러보기' 영역을 썸네일 줄로 꾸밈 ---------- */
.mx2 .h4 { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; box-sizing: border-box; }
.mx2 .h4-next { flex-direction: column; align-items: center; gap: clamp(14px, 2.2vh, 24px); margin-top: clamp(26px, 4vh, 48px); }
/* 쇼케이스 카드와 같은 실제 대시보드 썸네일을 한 줄로 — 양 끝은 흐리게, 천천히 흐름 */
.mx2 .h4-peek { position: relative; display: block; width: min(100%, 1180px); overflow: hidden; padding: 6px 0 10px; text-decoration: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mx2 .h4-peek-track { display: flex; width: max-content; animation: mx2-peek 60s linear infinite; }
.mx2 .h4-peek-track > span { flex: none; width: clamp(132px, 11vw, 168px); aspect-ratio: 16 / 9; margin-right: 14px; border-radius: 10px; overflow: hidden; background: #0b0d17;
  box-shadow: 0 0 0 1px rgba(124, 108, 255, .16), 0 12px 24px -16px rgba(60, 40, 160, .55); }
.mx2 .h4-peek img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.mx2 .h4-peek:hover .h4-peek-track { animation-play-state: paused; }
@keyframes mx2-peek { to { transform: translateX(-50%); } }
/* '둘러보기' 링크: 가벼운 알약 모양 */
.mx2 .h4-next-link { flex-direction: row; gap: 10px; padding: 8px 10px 8px 18px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid color-mix(in srgb, #7c6cff 18%, var(--line)); box-shadow: 0 10px 24px -18px rgba(60, 40, 160, .5); backdrop-filter: blur(8px); }
.mx2 .h4-next-link i { width: 30px; height: 30px; box-shadow: none; }
/* 낮은 화면: 썸네일 줄을 줄이거나 숨겨 영상 + 링크가 한 화면에 */
@media (max-height: 820px) { .mx2 .h4-peek-track > span { width: clamp(100px, 8.4vw, 124px); margin-right: 10px; } .mx2 .h4-next { margin-top: 16px; gap: 10px; } }
@media (max-height: 600px) { .mx2 .h4-peek { display: none; } }
@media (max-width: 900px) { .mx2 .h4 { min-height: 0; } }
@media (max-width: 600px) { .mx2 .h4-peek-track > span { width: 112px; margin-right: 10px; border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) { .mx2 .h4-peek-track { animation: none; } }

/* ---------- 섹션 배경 흐름 (순서는 원본 그대로) ----------
   첫 화면(밝은 그라데이션) → 쇼케이스(어두움) → 레퍼런스(흰색) → 차트(흰색) → 기능(옅은 그라데이션)
   → AI 대시보드(밝은 라벤더 그라데이션) → 안전 대시보드(어두움, 그대로) → Why(흰색→민트) → 수치·절차(옅은) → 문의(흰색)  */
.mx2 .mx2-dark { position: relative; }
/* 어두운 영역 위·아래 경계: 짧은 그라데이션으로 부드럽게 */
.mx2 .mx2-dark::before, .mx2 .mx2-dark::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(48px, 6vw, 88px); pointer-events: none; z-index: 1; }
.mx2 .mx2-dark::before { top: 0; background: linear-gradient(180deg, var(--mx2-above, #f4f3fe), transparent); }
.mx2 .mx2-dark::after { bottom: 0; background: linear-gradient(0deg, var(--mx2-below, #ffffff), transparent); }
.mx2 .mx2-show { --mx2-above: #f6f6ff; --mx2-below: #f8f7ff; }
.mx2 .mx2-safe { --mx2-above: #f7f5ff; --mx2-below: #ffffff; }
.mx2 .mx2-dark > .section { position: relative; z-index: 2; }

/* 쇼케이스(어두운 배경): 카드 테두리·그림자를 어두운 바탕에 맞게 */
.mx2 .mx2-show .shot { box-shadow: 0 0 0 1px rgba(165, 175, 255, .16), 0 24px 50px -30px rgba(0, 0, 0, .7); }
/* 레퍼런스: 쇼케이스 아래에서 이어지도록 위쪽을 옅은 라벤더로 시작 */
.mx2 #trust { background: linear-gradient(180deg, #f8f7ff, #ffffff 260px); }

/* AI 대시보드(밝은 배경): 라벤더 그라데이션 + 오른쪽 위 은은한 빛(원래 ::before), 콘솔은 원래 어두운 화면 그대로 */
.mx2 .mx2-ai { background: radial-gradient(900px 520px at 100% 0%, rgba(143, 208, 255, .22), transparent 60%), linear-gradient(180deg, #fbfbff 0%, #f1efff 55%, #f7f5ff 100%); }
.mx2 .mx2-ai .ai-sec::before { opacity: .55; }
.mx2 .mx2-ai .console { box-shadow: 0 40px 90px -40px rgba(76, 60, 190, .55); }
[data-theme="dark"] .mx2 .mx2-ai { background: linear-gradient(180deg, var(--bg), var(--bg-alt)); }
[data-theme="dark"] .mx2 .mx2-dark::before, [data-theme="dark"] .mx2 .mx2-dark::after { display: none; }