/* ==========================================================================
   v3.1 — 두 영역만 개선
   1) Why BIX5 카드 그림 (.wv-box / .wv-*)
   2) Features '슬라이드 · 위젯 간 연동' 데모 (.sx-*)
   ========================================================================== */

/* ---------- 1. Why BIX5 카드 그림: 밝은 바탕 + 퍼플·블루·민트 ---------- */
.why .why-vis.wv-box {
  height: 176px; margin-top: auto; padding: 0;
  border: 1px solid rgba(124, 92, 255, .14); border-radius: 16px;
  background: linear-gradient(160deg, #f6f4ff 0%, #eef5ff 55%, #effcf9 100%);
}
.why .why-card:nth-child(2) .why-vis.wv-box { background: linear-gradient(160deg, #effcfb 0%, #eef5ff 60%, #f6f4ff 100%); }
.why .why-card:nth-child(3) .why-vis.wv-box { background: linear-gradient(160deg, #f1fdf8 0%, #f2f4ff 55%, #f6f2ff 100%); }
.wv { display: block; width: 100%; height: 100%; overflow: visible; font-family: inherit; }
.wv text { font-family: inherit; }
.wv-card { fill: #fff; }
.wv-ink { fill: #1f2363; }
.wv-sub { fill: #8a8fbf; }
.wv-grid { fill: #e6e8f5; }
.wv-gridline { stroke: #dfe3f3; stroke-width: 1; }
.wv-bar { fill: #f3f4fb; }
.wv-slot { stroke: #a5b4fc; }

/* 다크 모드: 같은 구성을 어두운 유리 톤으로 */
[data-theme="dark"] .why .why-card .why-vis.wv-box { background: linear-gradient(160deg, rgba(124, 92, 255, .14), rgba(79, 139, 255, .08) 60%, rgba(45, 212, 191, .08)); border-color: rgba(165, 175, 255, .16); }
[data-theme="dark"] .wv-card { fill: rgba(255, 255, 255, .07); }
[data-theme="dark"] .wv-ink { fill: #eef0ff; }
[data-theme="dark"] .wv-sub { fill: #a3a7d6; }
[data-theme="dark"] .wv-grid, [data-theme="dark"] .wv-bar { fill: rgba(255, 255, 255, .08); }
[data-theme="dark"] .wv-gridline { stroke: rgba(255, 255, 255, .14); }

/* 움직임: 카드가 화면에 들어오면 시작 (.reveal.is-in — core.js) */
.wv-grow { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--i) * .06s); }
.why-card.is-in .wv-grow { transform: none; }
.wv-draw { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.2s ease-out .7s; }
.why-card.is-in .wv-draw { stroke-dashoffset: 0; }
.wv-caret { animation: wvBlink 1s steps(1) infinite; }
@keyframes wvBlink { 50% { opacity: 0; } }
/* 위젯 끌어 놓기: 오른쪽 위에서 빈 자리로 들어와 놓임 → 잠시 머문 뒤 반복 */
.wv-drag { animation: wvDrag 4.2s cubic-bezier(.45, .05, .3, 1) infinite; }
@keyframes wvDrag {
  0%, 8% { transform: translate(26px, -40px) rotate(-5deg); opacity: 0; }
  14% { opacity: 1; }
  44%, 88% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.wv-slot { animation: wvSlot 4.2s linear infinite; }
@keyframes wvSlot { 0%, 42% { stroke-dasharray: 4 4; stroke-opacity: 1; } 46%, 88% { stroke-dasharray: none; stroke-opacity: 0; } 100% { stroke-dasharray: 4 4; stroke-opacity: 1; } }
.wv-slot-t { animation: wvSlotT 4.2s linear infinite; }
@keyframes wvSlotT { 0%, 40% { opacity: 1; } 44%, 92% { opacity: 0; } 100% { opacity: 1; } }
/* 차트 카드: 차례로 떠오름, 맵 지점 핑 */
.wv-tile { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.15s + var(--i) * .09s); }
.why-card.is-in .wv-tile { opacity: 1; transform: none; }
.wv-pop { transform-box: fill-box; transform-origin: center; animation: wvPop 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .18s); }
@keyframes wvPop { 0%, 70%, 100% { transform: none; } 80% { transform: scale(.82); } }
.wv-ping { transform-box: fill-box; transform-origin: center; animation: wvPing 1.8s ease-out infinite; }
@keyframes wvPing { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.wv-badge { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.5s + var(--i, 0) * .12s); }
.why-card.is-in .wv-badge { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wv-caret, .wv-drag, .wv-slot, .wv-slot-t, .wv-pop, .wv-ping { animation: none; }
  .wv-dot { display: none; }
  .wv-grow, .wv-draw, .wv-tile, .wv-badge { transition: none; }
}

/* ---------- 2. 슬라이드 · 위젯 간 연동 ---------- */
.sx { position: relative; display: flex; align-items: center; gap: 14px; height: 170px; margin-top: 22px; }
.sx-screen { position: relative; flex: 1; min-width: 0; border-radius: 12px; background: #161a4a; border: 1px solid rgba(165, 175, 255, .2); box-shadow: 0 14px 30px -14px rgba(31, 35, 99, .55); overflow: hidden; }
.sx-top { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; background: rgba(255, 255, 255, .05); }
.sx-top i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.sx-top span { margin-left: auto; font-size: 9px; font-weight: 700; color: #a7acdf; font-variant-numeric: tabular-nums; }
.sx-top b { color: #fff; }
.sx-view { position: relative; height: 128px; overflow: hidden; }
/* 트랙: 슬라이드 4장(마지막은 1번 복제) 가로 배치 → translateX로 실제 이동 */
.sx-track { display: flex; height: 100%; will-change: transform; transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.sx-track.no-anim { transition: none; }
.sx-slide { position: relative; flex: 0 0 100%; height: 100%; padding: 8px 10px 10px; }
.sx-slide + .sx-slide::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, .08); }
.sx-head { display: flex; align-items: center; justify-content: space-between; height: 16px; }
.sx-head b { font-size: 10px; font-weight: 800; color: #eef0ff; }
.sx-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(244, 114, 182, .16); font-size: 8.5px; font-weight: 800; color: #f9a8d4; opacity: 0; transform: translateY(-3px); transition: opacity .3s, transform .3s; }
.sx-link i { width: 5px; height: 5px; border-radius: 50%; background: #f472b6; }
.sx-body { display: grid; grid-template-columns: 1fr 18px 1.25fr; align-items: stretch; height: calc(100% - 22px); margin-top: 6px; }
.sx-w { position: relative; padding: 6px 7px; border-radius: 8px; background: #232a6e; border: 1px solid rgba(165, 175, 255, .12); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.sx-w small { display: block; margin-bottom: 4px; font-size: 8px; font-weight: 700; color: #a7acdf; white-space: nowrap; }
.sx-wire { align-self: center; width: 18px; height: 40px; overflow: visible; }
.sx-wire path { fill: none; stroke: #f472b6; stroke-width: 2; stroke-dasharray: 3 3; stroke-dashoffset: 24; opacity: 0; vector-effect: non-scaling-stroke; }
/* 왼쪽 위젯: 칩 · 도넛 */
.sx-chip { display: block; margin-top: 3px; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .06); font-size: 8.5px; font-weight: 700; color: #cfd2f5; transition: background-color .25s, color .25s, box-shadow .25s; }
.sx-donut { display: block; width: 52px; height: 52px; margin: 2px auto 0; transform: rotate(-90deg); }
.sx-donut circle { fill: none; stroke-width: 7; transition: stroke-width .3s, opacity .3s; }
.sx-donut .d-ok { stroke: #34d399; stroke-dasharray: 49 82; }
.sx-donut .d-warn { stroke: #fbbf24; stroke-dasharray: 20 82; stroke-dashoffset: -49; }
.sx-donut .d-bad { stroke: #f87171; stroke-dasharray: 13 82; stroke-dashoffset: -69; }
/* 오른쪽 위젯: 막대 · 목록 · 선 */
.sx-bars { display: flex; align-items: flex-end; gap: 9px; height: 60px; padding: 0 4px; }
.sx-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: #7c5cff; transition: background-color .35s, opacity .35s, transform .45s cubic-bezier(.34, 1.4, .64, 1); transform-origin: bottom; }
.sx-row { display: flex; align-items: center; justify-content: space-between; height: 15px; margin-top: 3px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .04); font-size: 8.5px; font-weight: 600; color: #cfd2f5; transition: background-color .3s, opacity .3s; }
.sx-row i { width: 6px; height: 6px; border-radius: 50%; }
.sx-row .c-ok { background: #34d399; } .sx-row .c-warn { background: #fbbf24; }
.sx-line { display: block; width: 100%; height: 58px; }
.sx-line polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .35s; }
.sx-line .l-base { stroke: #22d3ee; }
.sx-line .l-hit { stroke: #f472b6; stroke-dasharray: 200; stroke-dashoffset: 200; opacity: 0; transition: stroke-dashoffset .9s ease-out .1s, opacity .2s; }
/* 커서 · 클릭 파문: 슬라이드 안에 있어 슬라이드와 함께 이동 */
.sx-cur { position: absolute; z-index: 3; left: 70%; top: 92%; width: 15px; height: 15px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); opacity: 0; transition: left .6s cubic-bezier(.45, .05, .3, 1), top .6s cubic-bezier(.45, .05, .3, 1), opacity .3s, transform .12s; }
.sx-ripple { position: absolute; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid #f472b6; opacity: 0; transform: scale(.3); pointer-events: none; }

/* 상태: 커서가 항목으로 이동 (JS가 --cx, --cy 지정) */
.sx-slide.is-aim .sx-cur { left: var(--cx); top: var(--cy); opacity: 1; }
.sx-slide.is-link .sx-cur { left: var(--cx); top: var(--cy); opacity: 1; transform: scale(.85); }
.sx-slide.is-link .sx-ripple { left: var(--cx); top: var(--cy); animation: sxRipple .6s ease-out; }
@keyframes sxRipple { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
/* 상태: 연동 — 클릭한 항목 강조, 연결선이 흐르고, 오른쪽 위젯이 그 항목으로 바뀜 */
.sx-slide.is-link .sx-link { opacity: 1; transform: none; }
.sx-slide.is-link .sx-wire path { opacity: 1; animation: sxWire 1s linear infinite; }
@keyframes sxWire { to { stroke-dashoffset: 0; } }
.sx-slide.is-link .sx-src, .sx-slide.is-link .sx-dst { border-color: rgba(244, 114, 182, .55); }
.sx-slide.is-link .sx-dst { box-shadow: 0 0 0 1px rgba(244, 114, 182, .35), 0 6px 18px -6px rgba(244, 114, 182, .55); }
.sx-slide.is-link .sx-chip.is-hit { background: #f472b6; color: #fff; box-shadow: 0 0 0 2px rgba(244, 114, 182, .3); }
.sx-slide.is-link .sx-bars i { background: #4b4f9a; opacity: .55; }
.sx-slide.is-link .sx-bars i.is-hit { background: #f472b6; opacity: 1; transform: scaleY(1.06); }
.sx-slide.is-link .sx-donut circle { opacity: .35; }
.sx-slide.is-link .sx-donut .is-hit { opacity: 1; stroke-width: 10; }
.sx-slide.is-link .sx-row { opacity: .4; }
.sx-slide.is-link .sx-row.is-hit { opacity: 1; background: rgba(251, 191, 36, .2); color: #fff; }
.sx-slide.is-link .sx-line .l-base { opacity: .35; }
.sx-slide.is-link .sx-line .l-hit { opacity: 1; stroke-dashoffset: 0; }

/* 오른쪽: 타이머 · 점 */
.sx-side { flex: none; width: 64px; text-align: center; }
.sx-timer { position: relative; width: 64px; height: 64px; }
.sx-timer svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.sx-timer circle { fill: none; stroke-width: 6; }
.sx-timer .t-track { stroke: rgba(127, 127, 127, .2); }
.sx-timer .t-ring { stroke: #f472b6; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; }
.sx-timer b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--fx-sub, var(--text)); }
.sx-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.sx-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--text) 25%, transparent); transition: background-color .3s, transform .3s; }
.sx-dots i.is-on { background: #f472b6; transform: scale(1.2); }
.sx-side small { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--fx-sub, var(--text-2)); }
@media (max-width: 420px) { .sx-side { display: none; } }