/* =====================================================================
   메인 페이지 — 시안1-3 (body.mx3). 시안1-2(main-new-2.css) 위에 덧씀.
   ===================================================================== */

/* ---------- 첫 화면 썸네일 줄: 절제된 카드 프레임 (이미지가 먼저 보이도록 얇고 옅게) ---------- */
.mx3 .h4-peek { padding: 10px 0 16px; }
.mx3 .h4-peek-track > span { margin-right: 18px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 1px rgba(124, 108, 255, .14), 0 10px 22px -16px rgba(60, 40, 160, .45); backdrop-filter: blur(6px); }
.mx3 .h4-peek img { border-radius: 8px; opacity: 1; }
.mx3 .h4-peek-track > span { transition: transform .3s var(--ease), box-shadow .3s; }
.mx3 .h4-peek:hover .h4-peek-track > span:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(124, 108, 255, .3), 0 14px 26px -16px rgba(60, 40, 160, .55); }
[data-theme="dark"] .mx3 .h4-peek-track > span { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(165, 175, 255, .16); }
@media (max-width: 600px) { .mx3 .h4-peek-track > span { margin-right: 12px; padding: 3px; border-radius: 10px; } .mx3 .h4-peek img { border-radius: 7px; } }

/* ---------- 섹션 배경 (메인 v3.2 흐름) — 전환 그라데이션 없이 섹션마다 또렷하게 ---------- */
.mx3 .mx3-dark::before, .mx3 .mx3-dark::after { content: none; }
/* 레퍼런스: 연보라 (v3.2 레퍼런스와 같음) */
.mx3 #trust { background: linear-gradient(180deg, #f3f1ff 0%, #f8f7ff 55%, #ffffff 100%); }
/* 차트: 밝은 바탕 + 오른쪽 보라 그라데이션 (v3.2 FAQ 영역 방식) */
.mx3 #charts { background: radial-gradient(900px 560px at 100% 0%, rgba(185, 168, 255, .26), transparent 62%), radial-gradient(700px 420px at 100% 100%, rgba(143, 208, 255, .14), transparent 60%), #ffffff; }
/* AI 대시보드: 밝은 바탕 + 오른쪽 위 하늘빛 (v3.2 쇼케이스 영역 방식), 콘솔은 어두운 화면 그대로 */
.mx3 .mx3-ai { background: radial-gradient(900px 500px at 100% 0%, rgba(143, 208, 255, .25), transparent 60%), linear-gradient(180deg, #eef3ff, #f7faff); }
.mx3 .mx3-ai .ai-sec::before { opacity: .45; }
.mx3 .mx3-ai .console { box-shadow: 0 40px 90px -40px rgba(76, 60, 190, .5); }
[data-theme="dark"] .mx3 #trust, [data-theme="dark"] .mx3 #charts, [data-theme="dark"] .mx3 .mx3-ai { background: var(--bg); }

/* 어두운 영역 안 카드: 테두리·그림자를 어두운 바탕에 맞게 */
.mx3 .mx3-dark .shot { box-shadow: 0 0 0 1px rgba(165, 175, 255, .16), 0 24px 50px -30px rgba(0, 0, 0, .7); }
/* 기능: 어두운 영역 (섹션 자체의 밝은 배경을 끄고 감싼 .inv 배경 사용) */
.mx3 .mx3-fx > #features { background: none; }