/* =====================================================================
   메인 페이지 — 시안1-5 (body.mx5). 시안1-4 위에 덧씀. 색상·톤만 조정(구성·문구 그대로).
   ===================================================================== */

/* ---------- Features > WIDGETS ----------
   원래(live.css): '12종' 짙은 인디고 그라데이션, 카드 짙은 남색 → 밝은 카드 + 사이트 보라 계열 강조 */
:root[data-theme="light"] .mx5 #features {
  --wt-ink: 60, 64, 150;          /* 카드 안 보조 도형 색(원래 흰색 반투명 자리) */
}
/* '12종': 짙은 덩어리 대신 사이트 강조색(인디고→보라) 그라데이션, 굵기·크기 한 단계 가볍게 */
:root[data-theme="light"] .mx5 #features .fx-widgets .w-lead .num {
  font-size: 64px; font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(120deg, #5b5bf0 0%, #7c6cff 45%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 위젯 카드: 흰 바탕 + 아주 옅은 라벤더, 얇은 테두리, 가벼운 그림자 */
:root[data-theme="light"] .mx5 #features .wt {
  background: linear-gradient(180deg, #ffffff 0%, #f7f6ff 100%);
  border: 1px solid rgba(124, 108, 255, .14);
  box-shadow: 0 1px 2px rgba(20, 24, 70, .04), 0 12px 26px -20px rgba(76, 60, 190, .35);
  color: #1f2363; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
:root[data-theme="light"] .mx5 #features .wt:hover { transform: translateY(-2px); border-color: rgba(124, 108, 255, .28); box-shadow: 0 1px 2px rgba(20, 24, 70, .04), 0 18px 32px -20px rgba(76, 60, 190, .45); }
/* 위쪽 색 띠: 얇고 은은하게 (텍스트 위젯의 흰 띠는 라벤더로) */
.mx5 #features .wt::before { height: 2px; opacity: .85; }
.mx5 #features .wt[style*="#ffffff"]::before { background: #c4b5fd; }
:root[data-theme="light"] .mx5 #features .wt b { color: #1f2363; }
:root[data-theme="light"] .mx5 #features .wt small { color: #8a8fb5; }
/* 카드 안 그림: 어두운 바탕용 흰색 반투명 → 밝은 바탕용 인디고 반투명 (모양·위치 그대로) */
.mx5 #features .wt svg [fill="rgba(255,255,255,.08)"] { fill: rgba(var(--wt-ink), .06); }
.mx5 #features .wt svg [fill="rgba(255,255,255,.1)"] { fill: rgba(var(--wt-ink), .1); }
.mx5 #features .wt svg [fill="rgba(255,255,255,.15)"] { fill: rgba(var(--wt-ink), .14); }
.mx5 #features .wt svg [fill="rgba(255,255,255,.18)"] { fill: rgba(var(--wt-ink), .14); }
.mx5 #features .wt svg [fill="rgba(255,255,255,.2)"] { fill: rgba(var(--wt-ink), .16); }
.mx5 #features .wt svg [fill="rgba(255,255,255,.22)"] { fill: rgba(var(--wt-ink), .18); }
.mx5 #features .wt svg [fill="rgba(255,255,255,.25)"] { fill: rgba(var(--wt-ink), .18); }
.mx5 #features .wt svg [fill="rgba(255,255,255,.35)"] { fill: rgba(var(--wt-ink), .3); }
.mx5 #features .wt svg [fill="#f3f3f8"] { fill: #2b2f6b; }
.mx5 #features .wt svg [fill="#a3a3b8"] { fill: #7a7fa6; }
/* 동영상 화면: 검은 남색 → 부드러운 인디고, 재생 원은 흰색 반투명 유지 */
.mx5 #features .wt svg [fill="#1e1b4b"] { fill: #4b4fb8; }
.mx5 #features .wt svg [fill="#1e1b4b"] ~ circle { fill: rgba(255, 255, 255, .28); }
.mx5 #features .wt svg [fill="#1e1b4b"] ~ rect[fill="rgba(255,255,255,.2)"] { fill: rgba(255, 255, 255, .35); }
/* 팝업 위젯: 흰 창이 흰 카드에 묻히지 않게 얇은 테두리 */
.mx5 #features .wt svg [fill="#f8f8fc"] { fill: #fff; stroke: rgba(var(--wt-ink), .18); stroke-width: 1; }
/* 더 보기 카드가 있으면 같은 톤 */
:root[data-theme="light"] .mx5 #features .wt--more { background: color-mix(in srgb, #7c6cff 7%, #fff); border-color: rgba(124, 108, 255, .26); }

/* ---------- AI-Powered Dashboard: 우측 콘솔 밝은 카드 톤 ----------
   AI 대시보드 최종본 01 콘솔의 색·분위기를 참고. 창 제목·LIVE·캡션 등 메인 구성은 그대로 */
.mx5 #ai .console { background: #fff; color: var(--text); border: 1px solid color-mix(in srgb, #7c6cff 14%, var(--line)); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20, 24, 70, .04), 0 36px 80px -44px rgba(76, 60, 190, .5); }
.mx5 #ai .console-top { padding: 12px 18px; background: color-mix(in srgb, #7c6cff 3%, #fff); border-bottom: 1px solid color-mix(in srgb, #7c6cff 8%, var(--line)); color: var(--text-2); }
.mx5 #ai .console-top i { width: 8px; height: 8px; background: color-mix(in srgb, var(--text-2) 22%, transparent); }
.mx5 #ai .console-top span { font-weight: 600; color: var(--text-2); }
.mx5 #ai .console-top .live { padding: 3px 9px 3px 8px; border-radius: 999px; background: color-mix(in srgb, #10b981 10%, #fff); color: #059669; font-size: 10.5px; letter-spacing: .06em; }
.mx5 #ai .console-top .live::before { width: 5px; height: 5px; }
.mx5 #ai .console-chart { padding: 22px 24px 8px; background: linear-gradient(180deg, color-mix(in srgb, #7c6cff 3%, #fff), #fff 70%); }
.mx5 #ai .c-title { align-items: center; color: var(--text-2); }
.mx5 #ai .c-title b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.mx5 #ai .c-title span { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #7c6cff 8%, #fff); border: 1px solid color-mix(in srgb, #7c6cff 14%, transparent); color: var(--kicker); font-size: 11.5px; font-weight: 700; }
.mx5 #ai .console-chart svg text { fill: #8a90a8; }
.mx5 #ai .console-chart .gl { stroke: color-mix(in srgb, #7c6cff 10%, var(--line)); stroke-dasharray: 2 2.5; }
.mx5 #ai [data-c-svg] .bg-style { fill: rgba(255, 143, 184, .12); }
.mx5 #ai .legend { gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, #7c6cff 7%, var(--line)); font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.mx5 #ai .legend i { width: 8px; height: 8px; border-radius: 50%; vertical-align: 0; }
.mx5 #ai .console-chart:has([data-c-svg][data-mode="style"]) .legend span:nth-child(1) i { background: #ff8fb8 !important; }
.mx5 #ai .console-chart:has([data-c-svg][data-mode="style"]) .legend span:nth-child(2) i { background: #ffd36e !important; }
.mx5 #ai .console-prompt { margin: 10px 18px 14px; padding: 8px 8px 8px 12px; border-radius: 14px; background: color-mix(in srgb, #7c6cff 4%, #fff); border: 1px solid color-mix(in srgb, #7c6cff 18%, var(--line)); }
.mx5 #ai .console-prompt p { color: var(--text); font-weight: 500; }
.mx5 #ai .console-prompt p::after { color: #7c6cff; }
.mx5 #ai .console-prompt .send { border-radius: 9px; background: var(--grad); color: #fff; }
.mx5 #ai .console .caption { color: #8a90a8; }
@media (max-width: 600px) { .mx5 #ai .console-chart { padding: 16px 14px 4px; } .mx5 #ai .console-prompt { margin: 8px 12px 12px; } }

/* 다크 테마: 원래 어두운 화면 그대로 */
[data-theme="dark"] .mx5 #ai .console { background: var(--console-bg, #0f0f18); }
[data-theme="dark"] .mx5 #ai .console-top, [data-theme="dark"] .mx5 #ai .console-chart, [data-theme="dark"] .mx5 #ai .console-prompt { background: transparent; }