/* =========================================================
   BIX5 소개 페이지 — 새 시안 1·2·3 공통 + 시안별 레이아웃
   토큰(색·폰트·반경·그림자)은 메인 3.2v와 같은 base.css / theme.css 변수를 그대로 사용
   ========================================================= */
.ax { --wide: 1320px; }
.ax .container { --container: var(--wide); }
.ax .ab-hero .container { --container: 1240px; }

/* ---------- 공통 텍스트 조각 ---------- */
.ax-why { padding-bottom: clamp(40px, 6vw, 72px); }
.ax-intro { max-width: 760px; }
.ax-intro.head--center { margin-inline: auto; }
.ax-lead { margin-top: var(--s4); font-size: var(--fs-lg); line-height: 1.7; color: var(--text-2); }
.ax-new { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 10px; letter-spacing: .06em; }
.ax-key { display: flex; gap: 12px; align-items: baseline; margin-top: var(--s5); padding: 14px 18px; border-radius: var(--r-md); background: color-mix(in srgb, #7c6cff 8%, var(--surface)); border: 1px solid color-mix(in srgb, #7c6cff 18%, transparent); font-size: var(--fs-sm); font-weight: 700; line-height: 1.55; color: var(--text); }
.ax-key span { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--kicker); }
.ax-link { margin-top: var(--s4); color: var(--kicker); }
.ax-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: var(--s5); }
.ax-facts li { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.ax-facts b { display: block; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax-facts span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); }
.ax-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-chips li { padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--text); line-height: 1.4; }
.ax-more { margin-top: var(--s5); }
.ax-more h4 { margin-bottom: 10px; font-size: var(--fs-xs); font-weight: 800; color: var(--text-2); letter-spacing: .02em; }
.ax-details { margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ax-details summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; font-weight: 700; font-size: var(--fs-sm); list-style: none; }
.ax-details summary::-webkit-details-marker { display: none; }
.ax-details summary::after { content: "+"; margin-left: auto; font-size: 18px; color: var(--kicker); transition: transform .25s var(--ease); }
.ax-details[open] summary::after { transform: rotate(45deg); }
.ax-details summary span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ax-details .ax-chips { padding: 0 18px 18px; }

/* ---------- 시각자료 공통 ---------- */
.vx { position: relative; }
.vx-cap { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.vx-tag { flex: none; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, #10b981 14%, transparent); color: #059669; font-size: 11px; font-weight: 800; }
.vx-tag--video { background: color-mix(in srgb, #ff4d8d 14%, transparent); color: #e0266c; }
.vx-tag--made { background: color-mix(in srgb, #7c6cff 14%, transparent); color: #6a5cf0; }
[data-theme="dark"] .vx-tag, .inv .vx-tag { color: #34d399; }
[data-theme="dark"] .vx-tag--video, .inv .vx-tag--video { color: #ff7aa8; }
[data-theme="dark"] .vx-tag--made, .inv .vx-tag--made { color: #b4abff; }
.vx-shot { margin: 0; }
.vx-zoom { display: block; width: 100%; padding: 0; border-radius: var(--r-md); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); cursor: zoom-in; transition: transform .3s var(--ease), box-shadow .3s; }
.vx-zoom:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.vx-zoom img { width: 100%; height: auto; }
.vx-shot figcaption { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.vx-lightbox { max-width: min(1400px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 40px 120px rgba(0, 0, 0, .5); overflow: auto; }
.vx-lightbox::backdrop { background: rgba(7, 7, 12, .72); backdrop-filter: blur(4px); }
.vx-lightbox img { display: block; max-width: 100%; max-height: 90vh; width: auto; margin: auto; }
.vx-lb-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; background: rgba(11, 13, 23, .7); color: #fff; font-size: 22px; line-height: 1; }

/* 01 연혁 */
.vh .vx-cap { margin: 0 0 14px; }
.vh-list { display: grid; gap: 8px; }
.vh-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.vh-thumb { aspect-ratio: 16 / 10; border-radius: 10px; box-shadow: none; }
.vh-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vh-txt { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.vh-yr { grid-row: span 2; font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--kicker); }
.vh-txt strong { font-size: var(--fs-sm); }
.vh-txt span { font-size: 13px; color: var(--text-2); }
.vh-item.is-now { background: var(--grad); border-color: transparent; color: #fff; }
.vh-item.is-now .vh-yr, .vh-item.is-now span { color: rgba(255, 255, 255, .88); }
.vh--grid .vh-list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.vh--grid .vh-item { grid-template-columns: 1fr; gap: 10px; align-items: start; padding: 8px 8px 12px; }
.vh--grid .vh-txt { grid-template-columns: 1fr; padding: 0 4px; }
.vh--grid .vh-yr { grid-row: auto; font-size: 12px; }
@media (max-width: 1100px) { .vh--grid .vh-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vh--grid .vh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vh-item { grid-template-columns: 88px minmax(0, 1fr); } .vh-txt { grid-template-columns: 1fr; } .vh-yr { grid-row: auto; } }

/* 02 HTML5 */
.v5-compare { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.v5-col { padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.v5-col h4 { font-size: var(--fs-sm); margin-bottom: 14px; }
.v5-col h4 em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 11px; }
.v5-col ol { display: grid; gap: 6px; counter-reset: s; }
.v5-col li { position: relative; padding: 9px 12px 9px 36px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; font-weight: 600; counter-increment: s; }
.v5-col li::before { content: counter(s); position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--line-strong); color: var(--text); font-size: 10px; font-weight: 800; }
.v5-col--old li.bad { background: color-mix(in srgb, #ff4d8d 9%, var(--surface)); color: #c0265f; text-decoration: line-through; text-decoration-color: color-mix(in srgb, #ff4d8d 60%, transparent); }
[data-theme="dark"] .v5-col--old li.bad, .inv .v5-col--old li.bad { color: #ff8db3; }
.v5-col--new { background: color-mix(in srgb, #7c6cff 7%, var(--surface)); border-color: color-mix(in srgb, #7c6cff 30%, transparent); }
.v5-col--new li { background: var(--surface); }
.v5-col--new li::before { background: var(--grad); color: #fff; }
.v5-sum { margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.v5-sum b { font-size: 1.5rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 4px; }
.v5-env { display: grid; gap: 8px; margin-top: 12px; padding: 16px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.v5-env div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: center; }
.v5-env dt { font-size: 12px; font-weight: 800; color: var(--text-2); }
.v5-env dd { display: flex; flex-wrap: wrap; gap: 6px; }
.v5-env span { padding: 4px 10px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; }
@media (max-width: 560px) { .v5-compare { grid-template-columns: 1fr; } }

/* 03 영상 탭 · 04 위젯 탭 */
.vt-tabs, .vw-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vt-tabs [role="tab"], .vw-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--text-2); transition: background-color .2s, color .2s, border-color .2s; }
.vt-tabs [role="tab"]:hover, .vw-tabs [role="tab"]:hover { color: var(--text); border-color: var(--text-2); }
.vt-tabs [aria-selected="true"], .vw-tabs [aria-selected="true"] { background: var(--grad); border-color: transparent; color: #fff; }
.vt-n { font-family: var(--mono); font-size: 11px; opacity: .8; }
.vt-pane video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: #0b0d17; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.vw-stage { min-height: 200px; }
.vw-shot .vx-zoom { display: grid; place-items: center; height: clamp(300px, 34vw, 460px); background: #fff; }
.vw-shot .vx-zoom img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }

/* 05 데이터 흐름 */
.vd { display: grid; grid-template-columns: minmax(0, 1.25fr) 44px minmax(0, 1fr) 44px minmax(0, .8fr); align-items: center; gap: 0; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.vd-src, .vd-out { display: grid; gap: 6px; }
.vd-src li, .vd-out li { padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.vd-src b, .vd-out b { display: block; font-size: 13px; }
.vd-src span, .vd-out span { display: block; font-size: 11.5px; color: var(--text-2); line-height: 1.4; }
.vd-out li { background: color-mix(in srgb, #7c6cff 8%, var(--surface)); }
.vd-flow { position: relative; height: 70%; display: grid; align-content: space-around; }
.vd-flow i { display: block; height: 2px; margin: 0 6px; border-radius: 2px; background: repeating-linear-gradient(90deg, #a99dff 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: vdFlow 1.2s linear infinite; }
@keyframes vdFlow { to { background-position: 24px 0; } }
.vd-hub { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 22px 12px; border-radius: var(--r-lg); background: var(--grad); color: #fff; box-shadow: 0 20px 40px -16px rgba(124, 108, 255, .6); }
.vd-hub-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; opacity: .85; }
.vd-hub strong { font-size: 1.25rem; }
.vd-hub-n b { font-size: 2rem; font-weight: 800; margin-right: 2px; }
.vd-hub-n { font-size: 13px; font-weight: 700; }
.vd-hub small { font-size: 11.5px; opacity: .85; }
@media (max-width: 760px) { .vd { grid-template-columns: 1fr; gap: 10px; } .vd-flow { height: 24px; grid-auto-flow: column; justify-content: center; } .vd-flow i { width: 2px; height: 24px; background: #a99dff; animation: none; } .vd-src { grid-template-columns: 1fr 1fr; } .vd-out { grid-template-columns: repeat(3, 1fr); } }

/* 06 Polling / Push */
.vp { display: grid; gap: 10px; }
.vp-lane { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.vp-head b { display: block; font-size: var(--fs-md); }
.vp-head b small { font-size: 11px; color: var(--kicker); margin-left: 4px; }
.vp-head span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.vp-track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.vp-node { padding: 6px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 700; }
.vp-wire { position: relative; height: 28px; border-top: 2px dashed var(--line-strong); margin-top: 14px; }
.vp-wire i { position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; opacity: 0; }
.vp-lane--poll .vp-wire i { background: #9aa0b8; animation: vpReq 6s linear infinite; animation-delay: calc(var(--k) * 1s); }
.vp-lane--push .vp-wire i { background: var(--grad); box-shadow: 0 0 0 4px rgba(124, 108, 255, .2); animation: vpPush 6s linear infinite; animation-delay: calc(var(--k) * 2s + .6s); }
@keyframes vpReq { 0% { left: 0; opacity: 1; } 14% { left: calc(100% - 14px); opacity: 1; } 15%, 100% { opacity: 0; left: calc(100% - 14px); } }
@keyframes vpPush { 0% { left: calc(100% - 14px); opacity: 1; } 12% { left: 0; opacity: 1; } 13%, 100% { opacity: 0; left: 0; } }
.vp-load span { font-size: 11.5px; color: var(--text-2); }
.vp-bar { height: 8px; margin: 4px 0; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.vp-bar i { display: block; height: 100%; border-radius: 99px; }
.vp-lane--poll .vp-bar i { width: 82%; background: #f5a524; }
.vp-lane--push .vp-bar i { width: 28%; background: var(--grad); }
.vp-load em { font-style: normal; font-size: 12px; font-weight: 700; }
@media (max-width: 760px) { .vp-lane { grid-template-columns: 1fr; gap: 10px; } }

/* 07 맞춤 기능 */
.vo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.vo-card { padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.vo-card h4 { font-size: var(--fs-sm); margin-bottom: 14px; }
.vo-card h4 small { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--kicker); }
.vo-time { grid-column: 1 / -1; }
.vo-day { position: relative; padding-bottom: 6px; }
.vo-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.vo-line { position: relative; height: 10px; margin: 6px 0 0; border-radius: 99px; background: linear-gradient(90deg, #1b1f3b 0 25%, #e9ecff 25% 75%, #1b1f3b 75%); opacity: .9; }
[data-theme="dark"] .vo-line, .inv .vo-line { background: linear-gradient(90deg, #0b0d17 0 25%, #2a2d4a 25% 75%, #0b0d17 75%); }
.vo-now { position: absolute; top: -4px; left: 0; width: 3px; height: 18px; border-radius: 2px; background: #ff4d8d; animation: voNow 10s linear infinite; }
@keyframes voNow { to { left: calc(100% - 3px); } }
.vo-day ul { position: relative; height: 66px; margin-top: 8px; }
.vo-day li { position: absolute; left: var(--x); translate: -50% 0; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-strong); font-size: 12px; white-space: nowrap; }
.vo-day li::before { content: ""; position: absolute; left: 50%; top: -10px; width: 1px; height: 10px; background: var(--line-strong); }
.vo-day li b { margin-right: 6px; color: var(--kicker); }
.vo-day li.cond { top: 30px; background: color-mix(in srgb, #f5a524 12%, var(--surface)); }
.vo-day li.cond::before { top: -40px; height: 40px; border-left: 1px dashed #f5a524; background: none; }
.vo-toasts { display: grid; gap: 6px; }
.vo-toasts li { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; animation: voIn 6s var(--ease) infinite; }
.vo-toasts li:nth-child(2) { animation-delay: .3s; } .vo-toasts li:nth-child(3) { animation-delay: .6s; }
@keyframes voIn { 0% { opacity: 0; transform: translateY(6px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.vo-toasts .ch { flex: none; min-width: 52px; padding: 2px 8px; border-radius: 6px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.vo-perm table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vo-perm th, .vo-perm td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--line); }
.vo-perm thead th { font-weight: 700; color: var(--text-2); font-size: 11.5px; }
.vo-perm tbody th { text-align: left; font-weight: 700; }
.vo-perm td i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.vo-perm td i.on { border: 0; background: var(--grad); }
.vo .vx-cap { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 760px) { .vo { grid-template-columns: 1fr; } .vo-day li { font-size: 11px; padding: 5px 7px; } }

/* 08 분석 */
.va { display: grid; grid-template-columns: minmax(0, .7fr) 36px minmax(0, 1.3fr) 36px minmax(0, .8fr); align-items: center; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.va-k { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--text-2); text-transform: uppercase; }
.va-k small { color: var(--kicker); letter-spacing: 0; }
.va-col ul { display: grid; gap: 6px; }
.va-col li { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; }
.va-col--eng ul { grid-template-columns: 1fr 1fr; }
.va-col--eng li b { display: block; font-size: 14px; }
.va-col--eng li { font-weight: 500; color: var(--text-2); }
.va-col--eng li b { color: var(--text); }
.va-col--eng li.dash { background: none; border: 1.5px dashed var(--line-strong); }
.va-col--out { display: grid; justify-items: center; text-align: center; padding: 20px 10px; border-radius: var(--r-lg); background: var(--grad); color: #fff; }
.va-col--out .va-k { color: rgba(255, 255, 255, .8); }
.va-col--out strong { font-size: 1.6rem; letter-spacing: -.02em; }
.va-col--out span { font-size: 12px; opacity: .9; }
.va-arr { display: block; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, #a99dff 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: vdFlow 1.2s linear infinite; position: relative; }
.va-arr::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: #a99dff; }
@media (max-width: 760px) { .va { grid-template-columns: 1fr; gap: 10px; } .va-arr { width: 2px; height: 20px; margin: 0 auto; animation: none; background: #a99dff; } .va-arr::after { display: none; } }

/* 09 AI */
.vai ol { display: grid; gap: 12px; }
.vai--row ol { grid-template-columns: 1fr; }
.vai--grid ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vai-card { display: grid; gap: 10px; align-content: start; }
.vai-q { padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: color-mix(in srgb, #7c6cff 9%, var(--surface)); border: 1px solid color-mix(in srgb, #7c6cff 22%, transparent); }
.vai-n { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--kicker); }
.vai-q p { margin-top: 4px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.vai-shot { aspect-ratio: 16 / 10; }
.vai-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.vai-card .vx-cap { margin-top: 0; }
.vai--row .vai-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 14px; }
.vai--row .vai-q { align-self: start; }
.vai--row .vai-shot { grid-column: 2; grid-row: 1 / span 2; }
.vai--row .vai-card .vx-cap { grid-column: 1; grid-row: 2; align-self: start; }
.vai-llm { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.vai-llm span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12.5px; font-weight: 700; }
@media (max-width: 900px) { .vai--grid ol { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .vai--row .vai-card { grid-template-columns: 1fr; } .vai--row .vai-shot, .vai--row .vai-card .vx-cap { grid-column: auto; grid-row: auto; } }

/* =========================================================
   시안 1 — 스토리 스플릿 (글 고정 + 시각자료, 좌우 교차)
   ========================================================= */
.ax1-index { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.ax1-index a { display: block; padding: 12px 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 700; line-height: 1.35; transition: border-color .2s, transform .25s var(--ease); }
.ax1-index a:hover { border-color: #a99dff; transform: translateY(-2px); }
.ax1-index span { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; color: var(--kicker); }
@media (max-width: 1100px) { .ax1-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ax1-sec { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.ax1-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ax1-txt { position: sticky; top: calc(var(--header-h) + 32px); }
.ax1-num { display: block; font-size: clamp(3.5rem, 2rem + 4vw, 5.5rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; margin-bottom: var(--s4); }
.ax1-txt h3 { margin-top: var(--s3); font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.6rem); line-height: 1.22; }
.ax1-pts { display: grid; margin-top: var(--s5); border-top: 1px solid var(--line); }
.ax1-pts li { display: grid; gap: 2px; padding: 14px 0 14px 22px; border-bottom: 1px solid var(--line); position: relative; }
.ax1-pts li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.ax1-pts b { font-size: var(--fs-md); }
.ax1-pts span { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; }
.ax1-vis { display: grid; gap: var(--s5); }
.ax1-vis .ax-facts { margin-top: 0; }
.ax1-sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ax1-sub .vx-shot:only-child { grid-column: 1 / -1; }
.ax1-sec .ax-more { margin-top: 0; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
@media (max-width: 960px) { .ax1-grid { grid-template-columns: 1fr; } .ax1-txt { position: static; } }

/* =========================================================
   시안 2 — 한눈에 보기(벤토) + 카드
   ========================================================= */
.ax2-over { background: radial-gradient(1200px 500px at 50% 0%, color-mix(in srgb, #7c6cff 9%, transparent), transparent 70%); }
.ax2-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.ax2-tile { grid-column: span 4; }
.ax2-tile:nth-child(1), .ax2-tile:nth-child(9) { grid-column: span 6; }
.ax2-tile:nth-child(4), .ax2-tile:nth-child(5) { grid-column: span 3; }
.ax2-tile:nth-child(6) { grid-column: span 6; }
.ax2-tile:nth-child(7), .ax2-tile:nth-child(8) { grid-column: span 3; }
.ax2-tile:nth-child(2), .ax2-tile:nth-child(3) { grid-column: span 3; }
.ax2-tile a { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 220px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.ax2-tile a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #a99dff; }
.ax2-tile:nth-child(9) a { background: linear-gradient(140deg, #1b1446, #3a1f6e 60%, #6b1f5a); color: #fff; border-color: transparent; }
.ax2-tile:nth-child(9) .ax2-tl, .ax2-tile:nth-child(9) .ax2-ts { color: rgba(255, 255, 255, .78); }
.ax2-tn { font-family: var(--mono); font-size: 12px; color: var(--kicker); }
.ax2-tile:nth-child(9) .ax2-tn { color: #c9c2ff; }
.ax2-tk { margin-top: 2px; font-size: var(--fs-md); font-weight: 800; }
.ax2-tm { margin-top: auto; padding-top: 18px; font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax2-ts { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.ax2-tl { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax2-go { position: absolute; top: 20px; right: 22px; color: var(--text-2); transition: transform .25s var(--ease); }
.ax2-tile a:hover .ax2-go { transform: translateX(4px); color: var(--kicker); }
@media (max-width: 1100px) { .ax2-tile, .ax2-tile:nth-child(n) { grid-column: span 6; } }
@media (max-width: 600px) { .ax2-tile, .ax2-tile:nth-child(n) { grid-column: span 12; } .ax2-tile a { min-height: 0; } }

.ax2-sec { padding-block: clamp(20px, 2.4vw, 32px); }
.ax2-sec:last-of-type { padding-bottom: clamp(72px, 9vw, 120px); }
.ax2-card { padding: clamp(24px, 3.2vw, 44px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ax2-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 28px; align-items: start; padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.ax2-badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--grad); color: #fff; font-size: 1.2rem; font-weight: 800; box-shadow: 0 14px 30px -12px rgba(124, 108, 255, .7); }
.ax2-ht h3 { margin-top: 6px; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.ax2-ht .ax-lead { margin-top: 8px; max-width: 760px; font-size: var(--fs-md); }
.ax2-metric { text-align: right; padding-left: 24px; border-left: 1px solid var(--line); }
.ax2-metric b { display: block; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax2-metric span { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.ax2-pts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: var(--s5); }
.ax2-pts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax2-pts--3, .ax2-pts--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ax2-pts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ax2-pts li { padding: 16px 18px; border-radius: var(--r-md); background: var(--bg-alt); border: 1px solid var(--line); }
.ax2-pts b { display: block; font-size: var(--fs-sm); line-height: 1.4; }
.ax2-pts p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.ax2-media { margin-top: var(--s5); }
.ax2-media--duo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ax2-m2 { display: grid; gap: 12px; }
.ax2-m2 .vx-zoom { display: grid; place-items: center; max-height: 300px; }
.ax2-m2 .vx-zoom img { width: auto; max-width: 100%; max-height: 300px; object-fit: contain; }
.ax1-sub .vx-zoom, .ax3-sub .vx-zoom { display: grid; place-items: center; height: 240px; }
.ax1-sub .vx-zoom img, .ax3-sub .vx-zoom img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.ax1-sub .vx-shot:only-child .vx-zoom, .ax3-sub .vx-shot:only-child .vx-zoom { height: auto; }
.ax1-sub .vx-shot:only-child .vx-zoom img, .ax3-sub .vx-shot:only-child .vx-zoom img { width: 100%; height: auto; }
.ax2-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; margin-top: var(--s5); }
.ax2-foot .ax-key { margin-top: 0; }
.ax-facts--inline { margin-top: 0; display: flex; gap: 8px; }
.ax-facts--inline li { padding: 8px 14px; }
.ax-facts--inline b { font-size: 1.05rem; }
.ax-facts--inline span { font-size: 11px; }
.ax2-foot .ax-link { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 1100px) { .ax2-pts, .ax2-pts--5, .ax2-pts--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ax2-media--duo { grid-template-columns: 1fr; } .ax2-foot { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ax2-head { grid-template-columns: auto minmax(0, 1fr); } .ax2-metric { grid-column: 1 / -1; text-align: left; padding-left: 0; border-left: 0; } .ax2-pts, .ax2-pts--n { grid-template-columns: 1fr !important; } .ax-facts--inline { flex-wrap: wrap; } }

/* =========================================================
   시안 3 — 쇼케이스 스테이지 (큰 문장 → 다크 무대 → 스펙 표)
   ========================================================= */
.ax3-toc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ax3-toc a { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; padding: 18px 8px; border-bottom: 1px solid var(--line); transition: background-color .2s; }
.ax3-toc a:hover { background: var(--bg-alt); }
.ax3-toc b { grid-row: span 2; font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax3-toc span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ax3-toc em { font-style: normal; font-size: var(--fs-md); font-weight: 800; }
@media (max-width: 760px) { .ax3-toc { grid-template-columns: 1fr; } }

.ax3-sec { padding-top: clamp(80px, 10vw, 140px); }
.ax3-statement { position: relative; text-align: center; max-width: 980px; padding-bottom: clamp(40px, 5vw, 64px); }
.ax3-chap { display: block; font-size: clamp(5rem, 3rem + 7vw, 9rem); font-weight: 800; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, #7c6cff 45%, transparent); margin-bottom: var(--s4); }
.ax3-statement .kicker::before { display: none; }
.ax3-statement h3 { margin-top: var(--s4); font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.15; letter-spacing: -.04em; }
.ax3-statement .ax-lead { max-width: 720px; margin-inline: auto; margin-top: var(--s5); }
.ax3-stage { position: relative; padding-block: clamp(40px, 5vw, 72px); overflow: hidden; background: radial-gradient(900px 400px at 15% 0%, rgba(124, 108, 255, .35), transparent 60%), radial-gradient(800px 380px at 90% 100%, rgba(255, 77, 141, .22), transparent 60%), var(--bg); }
.ax3-stage-in { max-width: 1120px; margin-inline: auto; display: grid; gap: 16px; }
.ax3-sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ax3-stage .vx-zoom { border-color: var(--line-strong); }
.ax3-stage .vt-pane video { border-color: var(--line-strong); }
.ax3-stage .vh-item.is-now { background: var(--grad); }
.ax3-spec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); padding-block: clamp(40px, 5vw, 64px) 0; }
.ax3-spec-k { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--text-2); }
.ax3-big { display: grid; gap: 4px; margin-top: 10px; }
.ax3-big li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ax3-big b { min-width: 40%; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax3-big span { font-size: 13px; color: var(--text-2); }
.ax3-dl { border-top: 2px solid var(--text); }
.ax3-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ax3-row dt { font-weight: 800; font-size: var(--fs-md); }
.ax3-row dd { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-2); }
.ax3-row--more dt { font-size: var(--fs-sm); color: var(--kicker); }
@media (max-width: 900px) { .ax3-spec { grid-template-columns: 1fr; } .ax3-row { grid-template-columns: 1fr; gap: 6px; } }

/* =========================================================
   하단 시안 이동 막대
   ========================================================= */
.sian-switch { position: fixed; z-index: 120; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 999px; background: color-mix(in srgb, #0b0d17 86%, transparent); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -12px rgba(11, 13, 23, .55); color: #e9eaf3; overflow-x: auto; scrollbar-width: none; }
.sian-switch::-webkit-scrollbar { display: none; }
.sw-label { flex: none; padding: 0 10px 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #9fa3c0; white-space: nowrap; }
.sian-switch a { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; color: #c9cbe0; transition: background-color .2s, color .2s; }
.sian-switch a span { font-size: 11.5px; font-weight: 600; color: #8e92b3; }
.sian-switch a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sian-switch a[aria-current="page"] { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -8px rgba(180, 92, 255, .8); }
.sian-switch a[aria-current="page"] span { color: rgba(255, 255, 255, .85); }
.sian-switch a[aria-current="page"]::before { content: "보는 중"; align-self: center; margin-right: 2px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .22); font-size: 10px; font-weight: 800; }
.sian-switch .sw-orig { border: 1px dashed rgba(255, 255, 255, .25); }
.sian-switch .sw-hub { color: #9fa3c0; font-weight: 600; font-size: 12px; }
@media (max-width: 900px) { .sian-switch a span, .sw-label { display: none; } .sian-switch a { padding: 9px 13px; } }
/* 모바일에서 우측 메뉴 버튼이 하단 막대와 겹치지 않도록 */
@media (max-width: 1359px) { .ax .pnav { bottom: 88px; } }

/* =========================================================
   비교 목록(index.html)
   ========================================================= */
.sian-hub { min-height: 100vh; background: radial-gradient(1000px 500px at 20% -10%, rgba(124, 108, 255, .16), transparent 60%), var(--bg); }

.hub-main { width: 100%; margin-inline: auto; padding-block: 80px; max-width: 1180px; }
.hub h1 { margin-top: 14px; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.hub-lead { margin-top: 14px; color: var(--text-2); font-size: var(--fs-lg); }
.hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.hub-card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), border-color .3s; }
.hub-card:hover { transform: translateY(-4px); border-color: #a99dff; }
.hub-card--orig { border-style: dashed; box-shadow: none; }
.hub-k { font-size: 12px; font-weight: 800; color: var(--kicker); }
.hub-card b { font-size: var(--fs-lg); }
.hub-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.hub-notes { margin-top: 48px; padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.hub-notes h2 { font-size: var(--fs-h3); margin-bottom: 12px; }
.hub-notes li { position: relative; padding: 6px 0 6px 18px; color: var(--text-2); }
.hub-notes li::before { content: ""; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }
@media (max-width: 900px) { .hub-grid { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .vd-flow i, .va-arr, .vp-wire i, .vo-now, .vo-toasts li { animation: none !important; }
  .vp-wire i { opacity: 1; }
}

/* ---------- 시안 1 개정: 01 원본 연도별 카드 리스트 ---------- */
.ax1-hist .vx-cap { margin: 0 0 16px; }
.ax1-hist .ab-fig { padding: clamp(14px, 1.8vw, 22px); background: var(--surface); }
.ax1-hist .ahx { gap: 6px; }

/* ---------- 시안 1 개정: 핵심 숫자 3개 — 한 장의 패널, 가는 구분선 ---------- */
.ax1-facts { gap: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.ax1-facts li { position: relative; display: grid; align-content: start; gap: 8px; padding: 26px 26px 24px; border: 0; border-radius: 0; background: none; }
.ax1-facts li + li { border-left: 1px solid var(--line); }
.ax1-facts li::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); margin-bottom: 10px; }
.ax1-facts b { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); white-space: nowrap; }
.ax1-facts span { margin-top: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); letter-spacing: -.01em; }
@media (max-width: 560px) {
  .ax1-facts { grid-template-columns: 1fr; }
  .ax1-facts li { grid-template-columns: 7.5em minmax(0, 1fr); align-items: baseline; padding: 16px 20px; }
  .ax1-facts li::before { display: none; }
  .ax1-facts li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* =====================================================================
   시안 1-2 (시안 1 복제 개정판, body.ax1b) — 시안 1.html 에는 적용되지 않음
   ===================================================================== */
/* 왼쪽 글: 크기·위계·여백 정리 */
.ax1b .ax1-sec { padding-block: clamp(56px, 6vw, 88px); }
.ax1b .ax1-grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(32px, 4.5vw, 72px); }
.ax1b .ax1-txt { top: calc(var(--header-h) + 24px); }
.ax1b .ax1-num { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem); margin-bottom: 10px; letter-spacing: -.04em; }
.ax1b .ax1-txt .kicker { font-size: 11.5px; }
.ax1b .ax1-txt h3 { margin-top: 10px; font-size: clamp(1.45rem, 1.05rem + 1.05vw, 1.9rem); line-height: 1.28; letter-spacing: -.025em; }
.ax1b .ax-lead { margin-top: 12px; font-size: 15.5px; line-height: 1.65; }
.ax1b .ax1-pts { margin-top: 22px; }
.ax1b .ax1-pts li { gap: 1px; padding: 10px 0 10px 18px; }
.ax1b .ax1-pts li::before { top: 17px; width: 6px; height: 6px; }
.ax1b .ax1-pts b { font-size: 14.5px; letter-spacing: -.01em; }
.ax1b .ax1-pts span { font-size: 13px; line-height: 1.55; }
.ax1b .ax-key { margin-top: 18px; padding: 11px 14px; font-size: 13px; gap: 10px; }
.ax1b .ax-key span { font-size: 10.5px; }
.ax1b .ax1-txt .link, .ax1b .ax1-txt .btn { margin-top: 16px; }
/* 오른쪽: 간격을 줄여 한 화면에 */
.ax1b .ax1-vis { gap: 16px; }
.ax1b .ax1-facts li { padding: 18px 22px 16px; gap: 6px; }
.ax1b .ax1-facts li::before { margin-bottom: 6px; }
.ax1b .ax1-facts b { font-size: clamp(1.3rem, 1rem + .7vw, 1.65rem); }
.ax1b .ax1-facts span { font-size: 12.5px; }
.ax1b .ax1-sub .vx-zoom { height: 200px; }
.ax1b .ax1-hist .ahx li { padding-block: 9px; }

/* ---------- 02 비교: 같은 출발 · 같은 도착, 가운데 단계가 사라짐 ---------- */
.v5b { display: grid; gap: 14px; container-type: inline-size; }
.v5b-path { display: grid; gap: 10px; padding: 18px 20px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.v5b-ends { display: grid; grid-template-columns: 112px minmax(0, 1fr) 84px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--text-2); }
.v5b-ends span:first-child { grid-column: 2; justify-self: start; width: 20%; text-align: center; }
.v5b-ends span:last-child { grid-column: 2; grid-row: 1; justify-self: end; width: 20%; text-align: center; color: var(--kicker); }
.v5b-lane { display: grid; grid-template-columns: 112px minmax(0, 1fr) 84px; align-items: center; padding: 14px 0; }
.v5b-lane + .v5b-lane { border-top: 1px dashed var(--line); }
.v5b-who { font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.v5b-who em { display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 999px; background: var(--grad); color: #fff; font-style: normal; font-size: 10px; letter-spacing: .02em; }
.v5b-trk { position: relative; }
.v5b-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; }
.v5b-track::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; translate: 0 -50%; background: var(--line-strong); border-radius: 2px; }
.v5b-step { position: relative; display: grid; place-items: center; min-height: 46px; padding: 6px 6px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; word-break: keep-all; }
.v5b-step--bad { background: color-mix(in srgb, #ff4d8d 7%, var(--surface)); border-color: color-mix(in srgb, #ff4d8d 26%, transparent); color: #c0265f; }
.v5b-step--on { background: var(--surface); border: 1.5px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--grad); background-origin: border-box; background-clip: padding-box, border-box; }
.v5b-skip { grid-column: 2 / 5; position: relative; display: grid; place-items: center; height: 46px; }
.v5b-skip::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 2px; translate: 0 -50%; background: var(--grad); border-radius: 2px; }
.v5b-skip span { position: relative; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid color-mix(in srgb, #7c6cff 30%, transparent); font-size: 11.5px; font-weight: 700; color: var(--kicker); }
.v5b-lane--new .v5b-track::before { display: none; }
.v5b-res { justify-self: end; text-align: right; font-size: 11px; color: var(--text-2); line-height: 1.3; }
.v5b-res b { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: #c0265f; }
.v5b-lane--new .v5b-res b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 이동하는 점: 기존은 단계마다 멈추고, BIX5는 곧장 도착 */
.v5b-dot { position: absolute; top: -7px; left: 10%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #c0265f; box-shadow: 0 0 0 3px var(--surface); animation: v5b-old 7s ease-in-out infinite; }
.v5b-lane--new .v5b-dot { background: #7c6cff; animation-name: v5b-new; }
@keyframes v5b-old { 0% { left: 10%; opacity: 0; } 4% { opacity: 1; } 10%, 24% { left: 30%; } 32%, 46% { left: 50%; } 54%, 68% { left: 70%; } 76%, 94% { left: 90%; opacity: 1; } 100% { left: 90%; opacity: 0; } }
@keyframes v5b-new { 0% { left: 10%; opacity: 0; } 4% { opacity: 1; } 16%, 94% { left: 90%; opacity: 1; } 100% { left: 90%; opacity: 0; } }
.v5b-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.v5b-tbl th, .v5b-tbl td { padding: 10px 16px; text-align: left; vertical-align: middle; line-height: 1.45; }
.v5b-tbl tbody tr + tr > * { border-top: 1px solid var(--line); }
.v5b-tbl thead th { padding-block: 9px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--text-2); background: var(--surface-2); }
.v5b-tbl tbody th { width: 20%; font-weight: 800; font-size: 12.5px; }
.v5b-tbl td:nth-child(2) { width: 36%; color: var(--text-2); }
.v5b-tbl td:last-child, .v5b-tbl thead th:last-child { background: color-mix(in srgb, #7c6cff 6%, var(--surface)); font-weight: 700; color: var(--text); }
.v5b-tbl thead th:last-child { color: var(--kicker); }
.v5b-tbl td b { font-weight: 800; color: var(--kicker); }
.v5b > .vx-cap { margin-top: 0; }
@container (max-width: 560px) {
  .v5b-ends { display: none; }
  .v5b-lane { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .v5b-trk { grid-column: 1 / -1; grid-row: 2; }
  .v5b-res { grid-row: 1; grid-column: 2; }
  .v5b-step { min-height: 40px; font-size: 10.5px; padding: 4px; }
  .v5b-skip { height: 40px; }
  .v5b-skip span { font-size: 10.5px; padding: 2px 6px; }
  .v5b-tbl th, .v5b-tbl td { padding: 8px 10px; font-size: 12px; }
}

/* ---------- 02 디바이스 일러스트 (Works on all devices 새 디자인) ---------- */
.vd2 { margin: 0; }
.vd2-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3.2cqi, 30px); padding: 26px 24px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #7c6cff 7%, var(--surface)), var(--surface) 70%); container-type: inline-size; }
.vd2-stage::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 50px; height: 1px; background: var(--line); }
.vd2-dev { position: relative; z-index: 1; display: grid; justify-items: center; }
.vd2-scr { width: 100%; overflow: hidden; background: var(--bg); border: solid #1d1f2c; box-shadow: 0 10px 28px -14px rgba(20, 18, 50, .35); container-type: inline-size; }
[data-theme="dark"] .vd2-scr { border-color: #3a3d52; }
.vd2-pc { width: 54%; }
.vd2-pc .vd2-scr { aspect-ratio: 16 / 10; border-width: 6px; border-radius: 10px; }
.vd2-stand { width: 22%; height: 16px; background: linear-gradient(#cfd2de, #e4e6ee); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
[data-theme="dark"] .vd2-stand { background: linear-gradient(#3a3d52, #2a2c3c); }
.vd2-tab { width: 21%; }
.vd2-tab .vd2-scr { aspect-ratio: 3 / 4; border-width: 6px; border-radius: 14px; }
.vd2-ph { width: 10.5%; }
.vd2-ph .vd2-scr { aspect-ratio: 9 / 19; border-width: 4px; border-radius: 14px; }
.vd2-tab .vd2-scr, .vd2-ph .vd2-scr { margin-bottom: 16px; }
.vd2-lab { margin-top: 12px; display: grid; justify-items: center; gap: 1px; font-size: 11px; font-family: var(--mono); color: var(--text-2); white-space: nowrap; }
.vd2-lab b { font-family: var(--font); font-size: 12.5px; font-weight: 800; color: var(--text); }
.vd2 > .vx-cap { margin-top: 10px; }
/* 미니 대시보드: 화면 폭(컨테이너)에 맞춰 칸이 재배치됨 */
.md { display: grid; grid-template-columns: 2fr 1fr; grid-template-areas: "top top" "kpi kpi" "bar pie" "line line"; gap: 3cqi; padding: 3.5cqi; height: 100%; align-content: start; }
.md > * { border-radius: 1.6cqi; }
.md-top { grid-area: top; display: flex; gap: 2cqi; align-items: center; }
.md-top span { height: 2.6cqi; border-radius: 99px; background: var(--line-strong); flex: 0 0 12%; }
.md-top span:first-child { flex-basis: 4cqi; height: 4cqi; border-radius: 1cqi; background: var(--grad); }
.md-top span:last-child { margin-left: auto; flex-basis: 8%; }
.md-kpi { grid-area: kpi; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqi; }
.md-kpi b { height: 11cqi; border-radius: 1.6cqi; background: var(--surface); border: 1px solid var(--line); position: relative; }
.md-kpi b::after { content: ""; position: absolute; left: 14%; bottom: 24%; width: 46%; height: 22%; border-radius: 99px; background: color-mix(in srgb, #7c6cff 55%, transparent); }
.md-kpi b:nth-child(2)::after { background: color-mix(in srgb, #b45cff 55%, transparent); width: 36%; }
.md-kpi b:nth-child(3)::after { background: color-mix(in srgb, #ff4d8d 50%, transparent); width: 52%; }
.md-bar { grid-area: bar; display: flex; align-items: flex-end; gap: 2.4%; height: 26cqi; padding: 3cqi; background: var(--surface); border: 1px solid var(--line); }
.md-bar i { flex: 1; height: var(--h); border-radius: 1cqi 1cqi 0 0; background: linear-gradient(#8b7dff, #b45cff); transform-origin: bottom; animation: md-live 4.8s ease-in-out var(--d) infinite alternate; }
.md-pie { grid-area: pie; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); }
.md-pie span { width: 62%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#7c6cff 0 44%, #b45cff 0 70%, #ff4d8d 0 84%, var(--line) 0); -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%); mask: radial-gradient(circle, transparent 46%, #000 47%); }
.md-line { grid-area: line; height: 16cqi; padding: 2cqi 3cqi; background: var(--surface); border: 1px solid var(--line); }
.md-line svg { width: 100%; height: 100%; display: block; }
.md-line polyline { fill: none; stroke: #ff4d8d; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
@keyframes md-live { from { transform: scaleY(.82); } to { transform: scaleY(1); } }
/* 태블릿 폭: 2단 → 막대 전체폭, 원·선 나란히 */
@container (max-width: 240px) {
  .md { grid-template-columns: 1fr 1fr; grid-template-areas: "top top" "kpi kpi" "bar bar" "pie line"; gap: 4cqi; padding: 5cqi; }
  .md-top span { height: 4cqi; } .md-top span:first-child { flex-basis: 7cqi; height: 7cqi; }
  .md-kpi { grid-template-columns: repeat(3, 1fr); gap: 4cqi; } .md-kpi b { height: 16cqi; }
  .md-bar { height: 44cqi; } .md-line { height: auto; min-height: 30cqi; } .md-pie span { width: 72%; }
}
/* 스마트폰 폭: 1단으로 쌓임 */
@container (max-width: 110px) {
  .md { grid-template-columns: 1fr; grid-template-areas: "top" "kpi" "bar" "pie" "line"; gap: 6cqi; padding: 7cqi; }
  .md-top span { height: 6cqi; } .md-top span:first-child { flex-basis: 11cqi; height: 11cqi; }
  .md-kpi { grid-template-columns: 1fr; gap: 5cqi; } .md-kpi b { height: 20cqi; } .md-kpi b:nth-child(3) { display: none; }
  .md-bar { height: 70cqi; } .md-pie span { width: 58%; margin-block: 6cqi; } .md-line { height: 40cqi; }
}
@media (prefers-reduced-motion: reduce) { .v5b-dot, .md-bar i { animation: none; } .v5b-dot { left: 90%; } }
/* 시안 1-2: 보조 자료 + 핵심 숫자(세로) 한 줄 */
.ax1b .ax1-low { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.ax1b .ax1-low .ax1-sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-content: start; }
.ax1b .ax1-low .vx-zoom, .ax1b .ax1-low .vx-shot:only-child .vx-zoom { height: 196px; display: grid; place-items: center; }
.ax1b .ax1-low .vx-zoom img, .ax1b .ax1-low .vx-shot:only-child .vx-zoom img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.ax1b .ax1-facts--col { grid-template-columns: 1fr; align-content: stretch; }
.ax1b .ax1-facts--col li { align-content: center; padding: 12px 18px; gap: 2px; }
.ax1b .ax1-facts--col li + li { border-left: 0; border-top: 1px solid var(--line); }
.ax1b .ax1-facts--col li::before { margin-bottom: 4px; }
.ax1b .ax1-facts--col b { font-size: clamp(1.15rem, .95rem + .5vw, 1.4rem); }
.ax1b .ax1-vis .ax-details { margin-top: 0; }
.ax1b .ax-details summary { padding: 11px 16px; font-size: 13.5px; }
.ax1b .ax1-facts li { padding: 14px 20px 13px; }
/* 디바이스 일러스트가 보조 칸에 들어갈 때 */
.ax1b .ax1-low .vd2-stage { padding: 18px 14px 10px; }
.ax1b .ax1-low .vd2-stage::after { left: 14px; right: 14px; bottom: 44px; }
.ax1b .ax1-low .vd2-lab { margin-top: 8px; }
@media (max-width: 720px) { .ax1b .ax1-low { grid-template-columns: 1fr; } .ax1b .ax1-facts--col { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ax1b .ax1-facts--col li + li { border-top: 0; border-left: 1px solid var(--line); } }
@media (max-width: 560px) { .ax1b .ax1-facts--col { grid-template-columns: 1fr; } .ax1b .ax1-facts--col li + li { border-left: 0; border-top: 1px solid var(--line); } }
/* 시안 1-2: 한 화면 맞춤 미세 조정 */
.ax1b .v5b-path { padding: 8px 18px; gap: 0; }
.ax1b .v5b-lane { padding: 12px 0; }
.ax1b .v5b-step, .ax1b .v5b-skip { min-height: 42px; height: auto; }
.ax1b .v5b-skip { height: 42px; }
.ax1b .v5b-tbl th, .ax1b .v5b-tbl td { padding-block: 7px; }
.ax1b .v5b-tbl thead th { padding-block: 7px; }
.ax1b .vw-pane .vx-zoom { height: 380px; display: grid; place-items: center; }
.ax1b .vw-pane .vx-zoom img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.ax1b .ax1-hist .ab-fig { padding: 12px 16px 14px; }
.ax1b .ax1-hist .vx-cap { margin-bottom: 12px; }
.ax1b .ax1-hist .ax-k b { font-size: 1.5rem; }
.ax1b .ax1-hist .art-history { gap: 10px; }
.ax1b .ax1-hist .ahx { gap: 5px; }
.ax1b .ax1-hist .ahx li { padding-block: 6px; }
.ax1b .vai--grid .vai-q { padding: 12px 14px; }
.ax1b .vai--grid .vai-q p { font-size: 13px; }
.ax1b .vai--grid .vai-shot { aspect-ratio: 4 / 3; }
.ax1b .ax1-pts li { padding-block: 8px; }
.ax1b .ax1-pts li::before { top: 15px; }
.ax1b .ax1-low .vx-zoom, .ax1b .ax1-low .vx-shot:only-child .vx-zoom { height: 180px; }
/* PC 화면 안에 선 그래프까지 보이도록 */
.vd2-pc .md-kpi b { height: 8cqi; }
.vd2-pc .md-bar { height: 21cqi; }
.vd2-pc .md-line { height: 11cqi; }
@media (max-width: 960px) { .ax1b .ax1-grid { grid-template-columns: 1fr; } .ax1b .ax1-txt { position: static; } }

/* =====================================================================
   시안 1-3 (시안 1-2 복제 개정판, body.ax1c) — 02 영역만 변경
   ===================================================================== */
/* ---------- BIX5 먼저 도착 강조 (7초 주기, 점 이동과 같은 시계) ---------- */
.v5c .v5b-path { padding: 18px 18px 14px; }
.v5c-goal { position: relative; isolation: isolate; transition: none; }
.v5c-goal::after { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; background: var(--grad); opacity: 0; }
.v5c-goal::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(124, 108, 255, .45); opacity: 0; pointer-events: none; }
.v5c-goal--new { animation: v5c-goal 7s ease-out infinite; }
.v5c-goal--new::after { animation: v5c-fill 7s ease-out infinite; }
.v5c-goal--new::before { animation: v5c-ring 7s ease-out infinite; }
.v5c-flag { position: absolute; top: -11px; right: -8px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; white-space: nowrap; opacity: 0; transform: translateY(4px) scale(.9); }
.v5c-goal--new .v5c-flag { background: #fff; color: #6a5cf0; box-shadow: 0 4px 12px -4px rgba(106, 92, 240, .55); border: 1px solid color-mix(in srgb, #7c6cff 35%, transparent); animation: v5c-flag-new 7s ease-out infinite; }
.v5c-goal--old .v5c-flag { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); animation: v5c-flag-old 7s ease-out infinite; }
.v5c-goal--old { animation: v5c-goal-old 7s ease-out infinite; }
@keyframes v5c-goal { 0%, 15% { color: var(--text); transform: none; } 17% { color: #fff; transform: scale(1.07); } 23%, 94% { color: #fff; transform: none; } 100% { color: var(--text); } }
@keyframes v5c-fill { 0%, 15% { opacity: 0; } 17%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v5c-ring { 0%, 15% { opacity: 0; box-shadow: 0 0 0 0 rgba(124, 108, 255, .45); } 16% { opacity: 1; } 30% { opacity: 0; box-shadow: 0 0 0 14px rgba(124, 108, 255, 0); } 100% { opacity: 0; } }
@keyframes v5c-flag-new { 0%, 16% { opacity: 0; transform: translateY(4px) scale(.9); } 20%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes v5c-flag-old { 0%, 75% { opacity: 0; transform: translateY(4px) scale(.9); } 79%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes v5c-goal-old { 0%, 75% { border-color: var(--line); } 77%, 94% { border-color: var(--line-strong); } 100% { border-color: var(--line); } }
.v5c .v5b-lane--new .v5b-res b { animation: v5c-res 7s ease-out infinite; display: inline-block; }
@keyframes v5c-res { 0%, 15% { transform: none; } 18% { transform: scale(1.15); } 24%, 100% { transform: none; } }

/* ---------- 도착 시점 줄: 시간 차이 ---------- */
.v5c-time { display: grid; grid-template-columns: 112px minmax(0, 1fr) 84px; align-items: center; padding: 14px 0 4px; border-top: 1px dashed var(--line); }
.v5c-time .v5b-who { font-size: 11.5px; font-weight: 800; color: var(--text-2); }
.v5c-axis { position: relative; height: 44px; margin-inline: 10% 10%; }
.v5c-axis::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; border-radius: 2px; background: var(--line); }
.v5c-head { position: absolute; top: 18px; left: 0; width: 2px; height: 10px; margin-left: -1px; border-radius: 2px; background: var(--text-2); animation: v5c-head 7s linear infinite; }
.v5c-gap { position: absolute; top: 21px; left: 21%; width: 0; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, color-mix(in srgb, #ff4d8d 55%, transparent) 0 6px, transparent 6px 10px); animation: v5c-gap 7s linear infinite; }
.v5c-gap i { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; font-style: normal; font-size: 11px; font-weight: 700; color: #c0265f; white-space: nowrap; opacity: 0; animation: v5c-gaplab 7s ease-out infinite; }
.v5c-mk { position: absolute; top: 17px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; opacity: 0; }
.v5c-mk b { position: absolute; top: 15px; left: 50%; translate: -50% 0; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.v5c-mk--new { left: 21%; background: var(--grad); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, #7c6cff 30%, transparent); animation: v5c-mk-new 7s ease-out infinite; }
.v5c-mk--new b { color: #6a5cf0; }
.v5c-mk--old { left: 100%; background: #c0265f; box-shadow: 0 0 0 3px var(--surface); animation: v5c-mk-old 7s ease-out infinite; }
.v5c-mk--old b { color: #c0265f; }
@keyframes v5c-head { 0% { left: 0; opacity: 0; } 3% { opacity: 1; } 76% { left: 100%; opacity: 1; } 94% { left: 100%; opacity: 0; } 100% { left: 100%; opacity: 0; } }
@keyframes v5c-gap { 0%, 16% { width: 0; opacity: 1; } 76%, 94% { width: 79%; opacity: 1; } 100% { width: 79%; opacity: 0; } }
@keyframes v5c-gaplab { 0%, 22% { opacity: 0; } 30%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v5c-mk-new { 0%, 15% { opacity: 0; transform: scale(.4); } 17% { opacity: 1; transform: scale(1.35); } 22%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes v5c-mk-old { 0%, 75% { opacity: 0; transform: scale(.4); } 77% { opacity: 1; transform: scale(1.2); } 81%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@container (max-width: 560px) {
  .v5c-time { grid-template-columns: 1fr; row-gap: 4px; }
  .v5c-axis { margin-inline: 4% 8%; }
  .v5c-gap i { font-size: 10px; }
  .v5c-flag { font-size: 9.5px; padding: 1px 6px; right: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .v5c-goal--new, .v5c-goal--new::after, .v5c-goal--new::before, .v5c-flag, .v5c-goal--old, .v5c .v5b-lane--new .v5b-res b, .v5c-head, .v5c-gap, .v5c-gap i, .v5c-mk { animation: none; }
  .v5c-goal--new { color: #fff; } .v5c-goal--new::after, .v5c-flag, .v5c-gap i, .v5c-mk { opacity: 1; transform: none; }
  .v5c-gap { width: 79%; } .v5c-head { display: none; }
}

/* ---------- 디바이스 정렬판: 같은 바닥선, 라벨은 그 아래 같은 높이 ---------- */
.vd3-stage { padding: 28px 28px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #7c6cff 7%, var(--surface)), var(--surface) 70%); }
.vd3-row, .vd3-labs { display: flex; justify-content: center; gap: 5%; padding-inline: 2%; }
.vd3-row { align-items: flex-end; border-bottom: 1px solid var(--line-strong); }
.vd3-dev { display: flex; flex-direction: column; align-items: center; }
.vd3-pc, .vd3-labs .vd3-pc { width: 50%; }
.vd3-tab, .vd3-labs .vd3-tab { width: 19%; }
.vd3-ph, .vd3-labs .vd3-ph { width: 9.5%; }
.vd3-dev .vd2-scr { margin: 0; }
.vd3-pc .vd2-scr { aspect-ratio: 16 / 10; border-width: 6px; border-radius: 10px; }
.vd3-tab .vd2-scr { aspect-ratio: 3 / 4; border-width: 6px; border-radius: 14px; }
.vd3-ph .vd2-scr { aspect-ratio: 9 / 19; border-width: 4px; border-radius: 12px; }
.vd3-neck { display: block; width: 9%; height: 20px; background: linear-gradient(90deg, #c9ccd8, #dfe1e9 50%, #c9ccd8); }
.vd3-foot { display: block; width: 34%; height: 6px; border-radius: 6px 6px 0 0; background: #c9ccd8; }
[data-theme="dark"] .vd3-neck { background: linear-gradient(90deg, #2c2f40, #3a3d52 50%, #2c2f40); }
[data-theme="dark"] .vd3-foot { background: #3a3d52; }
.vd3-lab { display: grid; justify-items: center; gap: 1px; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.vd3-lab b { font-family: var(--font); font-size: 12.5px; font-weight: 800; color: var(--text); }
.vd3-pc .md-kpi b { height: 8cqi; }
.vd3-pc .md-bar { height: 21cqi; }
.vd3-pc .md-line { height: 11cqi; }
.vd3 > .vx-cap { margin-top: 10px; }
/* 도착 표시는 상자 아래 가운데 — 이동 점(위쪽)과 겹치지 않게 */
.v5c-flag { top: auto; bottom: -10px; right: auto; left: 50%; translate: -50% 0; }
.v5c .v5b-lane--new .v5b-res b { display: block; width: max-content; margin-left: auto; transform-origin: right center; }
.v5c .v5b-lane { padding-block: 14px 16px; }

/* =====================================================================
   시안 1-4 (시안 1-3 복제 개정판, body.ax1d)
   ===================================================================== */
/* ---------- 1. 상단 슬라이더: 썸네일 → 진행 막대 → 이름 (Figma 소개_새시안A Slide Tabs 참고: 152×75, r10, 간격 8) ---------- */
.ax1d .aht-bar { align-items: flex-start; padding-top: 12px; }
.ax1d .aht-tabs { gap: 8px; }
.ax1d .aht-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 6px; padding: 0; }
.ax1d .aht-thumb { grid-column: 1 / -1; display: block; aspect-ratio: 152 / 75; margin-bottom: 8px; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: #0b1230; transition: border-color .2s, box-shadow .2s, transform .25s var(--ease); }
.ax1d .aht-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .78; transition: opacity .2s; }
.ax1d .aht-tab:hover .aht-thumb img, .ax1d .aht-tab.is-on .aht-thumb img { opacity: 1; }
.ax1d .aht-tab:hover .aht-thumb { transform: translateY(-2px); }
.ax1d .aht-tab.is-on .aht-thumb { border-color: transparent; box-shadow: 0 0 0 2px #7c5cff, 0 8px 18px -10px rgba(91, 91, 240, .6); }
.ax1d .aht-prog { position: relative; left: auto; right: auto; top: auto; grid-column: 1 / -1; margin-bottom: 7px; height: 3px; }
.ax1d .aht-tab { font-size: 12.5px; font-weight: 700; }
.ax1d .aht-tab.is-on { color: #5b5bf0; }
[data-theme="dark"] .ax1d .aht-tab.is-on { color: #a99dff; }
.ax1d .aht-pause { align-self: flex-start; margin-top: 22px; }
@media (max-width: 560px) { .ax1d .aht-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .ax1d .aht-tab { font-size: 11px; } .ax1d .aht-n { display: none; } .ax1d .aht-thumb { border-radius: 7px; margin-bottom: 6px; } }

/* ---------- 4. 03 왼쪽 항목 = 탭 버튼 (v3.2 AI-Powered Dashboard의 ai-step 구조) ---------- */
.ax1d .ax1-steps { margin-top: 20px; gap: 4px; }
.ax1d .ax1-step { padding: 12px 14px; gap: 12px; grid-template-columns: 32px 1fr; cursor: pointer; position: relative; }
.ax1d .ax1-step .n { width: 32px; height: 32px; font-size: 12px; transition: background-color .25s, color .25s; }
.ax1d .ax1-step strong { font-size: 14.5px; }
.ax1d .ax1-step > span > span { font-size: 13px; line-height: 1.5; }
.ax1d .ax1-step[aria-pressed="true"] { background: var(--surface); border-color: color-mix(in srgb, #7c6cff 40%, transparent); box-shadow: 0 6px 18px -12px rgba(91, 91, 240, .45); }
.ax1d .ax1-step[aria-pressed="true"] strong { color: var(--kicker); }
.ax1d .ax1-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 오른쪽 영상 플레이어 */
.vplay { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.vplay-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; }
.vplay-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.vplay-top span { margin-left: 8px; }
.vplay-top em { margin-left: auto; padding: 2px 8px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 800; background: color-mix(in srgb, #ff4d8d 14%, transparent); color: #e0266c; }
.vplay-stage { position: relative; aspect-ratio: 16 / 9; background: #f4f5fa; }
.vp-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s ease; }
.vp-v.is-on { opacity: 1; }
.vplay-prog { height: 3px; background: var(--line); }
.vplay-prog i { display: block; height: 100%; width: 0; background: var(--grad); }
.vplay > .vx-cap { margin: 0; padding: 10px 14px 12px; }
/* ---------- 3. No-code 강조 카드 ---------- */
.ax1-nc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.ax1-nc-main { position: relative; display: grid; align-content: center; gap: 4px; padding: 18px 22px; background: linear-gradient(135deg, color-mix(in srgb, #7c6cff 11%, var(--surface)), color-mix(in srgb, #ff4d8d 6%, var(--surface))); border-right: 1px solid color-mix(in srgb, #7c6cff 22%, transparent); }
.ax1-nc-k { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid color-mix(in srgb, #7c6cff 30%, transparent); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--kicker); }
.ax1-nc-main b { font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax1-nc-main p { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ax1-nc-sub { display: grid; align-content: center; gap: 4px; padding: 16px 20px; }
.ax1-nc-sub + .ax1-nc-sub { border-left: 1px solid var(--line); }
.ax1-nc-sub b { font-size: clamp(1.2rem, 1rem + .5vw, 1.45rem); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.ax1-nc-sub span { font-size: 12.5px; color: var(--text-2); }
@media (max-width: 720px) { .ax1-nc { grid-template-columns: 1fr 1fr; } .ax1-nc-main { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid color-mix(in srgb, #7c6cff 22%, transparent); } .ax1-nc-sub + .ax1-nc-sub { border-left: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .vp-v { transition: none; } }

/* =====================================================================
   시안 1-5 (시안 1-4 복제 개정판, body.ax1e)
   ===================================================================== */
/* ---------- 썸네일 모서리: 어두운 배경이 비치지 않게 ---------- */
.ax1e .aht-thumb { background: var(--surface); isolation: isolate; transform: translateZ(0); }
.ax1e .aht-thumb img { border-radius: inherit; opacity: 1; filter: saturate(.8); transition: filter .2s; }
.ax1e .aht-tab:not(.is-on) .aht-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--surface) 28%, transparent); pointer-events: none; transition: opacity .2s; }
.ax1e .aht-thumb { position: relative; }
.ax1e .aht-tab:hover .aht-thumb img, .ax1e .aht-tab.is-on .aht-thumb img { filter: none; }
.ax1e .aht-tab:hover .aht-thumb::after { opacity: 0; }

/* ---------- 04: 왼쪽 항목 ↔ 오른쪽 탭 ↔ 내용 ---------- */
.ax1e .ax1-steps--w .ax1-step { padding-block: 9px; }
.ax1e .ax1-steps--w .ax1-step > span > span { font-size: 12.5px; }
.wz { display: grid; gap: 12px; }
.wz-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.wz-tab:hover { color: var(--text); border-color: var(--line-strong); }
.wz-tab[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.wz-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wz-stage { position: relative; min-height: 470px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.wz-pane { animation: wt-in .35s ease; }
@keyframes wt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wz-pane .vx-cap { margin-top: 10px; }

/* 차트: v3.2 차트 월 셀이 천천히 위로 흐름 */
.wc { display: grid; gap: 12px; }
.wc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.wc-head b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wc-head b small { font-size: .55em; }
.wc-head span { font-size: 12.5px; color: var(--text-2); margin-right: 14px; }
.wc-head em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-2); }
.wc-wall { position: relative; height: 340px; overflow: hidden; border-radius: 12px; -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 86%, transparent); }
.wc-track { display: grid; gap: 10px; animation: wc-up 60s linear infinite; }
.wc-wall:hover .wc-track { animation-play-state: paused; }
@keyframes wc-up { to { transform: translateY(calc(-50% - 5px)); } }
.wc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.wc .cw { position: relative; padding: 9px 10px 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s; }
.wc .cw:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.wc .cw span { display: block; font-size: 10.5px; font-weight: 600; color: #8b8ba3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc .cw svg { display: block; width: 100%; height: auto; aspect-ratio: 148 / 82; margin-top: 6px; overflow: visible; }
.wc .cw svg text { font-family: inherit; }
[data-theme="light"] .wc .cw svg [fill^="rgba(255,255,255"] { fill: rgba(11, 13, 23, .16); }
[data-theme="light"] .wc .cw svg [stroke^="rgba(255,255,255"] { stroke: rgba(11, 13, 23, .16); }
[data-theme="light"] .wc .cw svg text[fill="#f3f3f8"], [data-theme="light"] .wc .cw svg [fill="#f3f3f8"] { fill: #0b0d17; }
.wc-more { justify-self: center; display: inline-flex; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12.5px; font-weight: 700; }
.wc-more:hover { border-color: #a99dff; }
@media (max-width: 720px) { .wc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wc-wall { height: 300px; } }

/* 그리드: 표 + 번호표 + 전체 기능 묶음 */
.wg { display: grid; grid-template-columns: 1fr; gap: 12px; }
.wg-demo { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); font-size: 12px; }
.wg-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.wg-search { flex: 1; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-2); font-size: 11px; }
.wg-btn { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.wg-btn--on { border-color: color-mix(in srgb, #10b981 45%, transparent); color: #059669; background: color-mix(in srgb, #10b981 8%, var(--surface)); }
.wg-tbl { width: 100%; border-collapse: collapse; }
.wg-tbl th, .wg-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wg-tbl th:first-child { text-align: left; }
.wg-tbl thead th { background: var(--surface-2); font-size: 11px; font-weight: 800; color: var(--text-2); text-align: right; }
.wg-tbl thead th:first-child { text-align: left; }
.wg-tbl tbody th { font-weight: 700; }
.wg-tbl .lv0 th { font-weight: 800; }
.wg-tbl .lv0 { background: color-mix(in srgb, #7c6cff 6%, var(--surface)); }
.wg-tbl .lv1 th { padding-left: 18px; }
.wg-tbl .lv2 th { padding-left: 32px; font-weight: 500; color: var(--text-2); }
.wg-tbl tfoot th, .wg-tbl tfoot td { font-weight: 800; background: var(--surface-2); border-bottom: 0; }
.wg-sort, .wg-filter { font-style: normal; color: var(--kicker); }
.wg-sp svg { width: 56px; height: 16px; vertical-align: middle; }
.wg-sp polyline { fill: none; stroke: #7c6cff; stroke-width: 1.6; stroke-linejoin: round; }
.wg-st { text-align: center !important; }
.wg-ok { font-style: normal; color: #10b981; } .wg-warn { font-style: normal; color: #f59e0b; }
.wg-chk { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: #7c6cff; color: #fff; font-size: 10px; }
.wg-chk--off { background: none; border: 1.5px solid var(--line-strong); }
.wg-tbl .is-edit td:nth-child(2) { padding: 3px 4px; }
.wg-edit { display: inline-block; min-width: 60px; padding: 3px 6px; border: 1.5px solid #7c6cff; border-radius: 4px; background: var(--surface); text-align: right; }
.wg-edit i { display: inline-block; width: 1px; height: 11px; margin-left: 1px; vertical-align: -1px; background: var(--text); animation: wg-caret 1s steps(1) infinite; }
@keyframes wg-caret { 50% { opacity: 0; } }
.wg-mk { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 9.5px; font-weight: 800; vertical-align: 1px; font-style: normal; }
.wg-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; font-size: 12.5px; font-weight: 700; }
.wg-key li { display: flex; align-items: center; gap: 6px; }
.wg-key b { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 10px; }
.wg-all { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wg-all-h { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--text-2); }
.wg-grp h5 { margin-bottom: 4px; font-size: 12px; font-weight: 800; color: var(--kicker); }
.wg-grp li { position: relative; padding-left: 9px; font-size: 11.5px; line-height: 1.55; color: var(--text-2); }
.wg-grp li::before { content: ""; position: absolute; left: 0; top: .7em; width: 3px; height: 3px; border-radius: 50%; background: var(--text-2); }
@media (max-width: 720px) { .wg { grid-template-columns: 1fr; } .wg-demo { grid-row: auto; overflow-x: auto; } }

/* 맵차트: 실제 화면 6장 */
.wm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wm-t { display: grid; gap: 2px; }
.wm-img { display: grid; place-items: center; height: 150px; padding: 8px; margin-bottom: 6px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; overflow: hidden; }
.wm-img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s var(--ease); }
.wm-img:hover img { transform: scale(1.04); }
.wm-t b { font-size: 13px; font-weight: 800; }
.wm-t span { font-size: 11.5px; color: var(--text-2); }
.wm-more { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wm-more li { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--text-2); }
@media (max-width: 560px) { .wm-grid { grid-template-columns: 1fr 1fr; } }

/* 텍스트·영상 / API */
.wx ul { display: grid; gap: 12px; }
.wx--4 ul { grid-template-columns: 1fr 1fr; }
.wx--2 ul { grid-template-columns: 1fr 1fr; }
.wx li { display: grid; gap: 2px; }
.wx .vx-zoom { display: grid; place-items: center; height: 160px; margin-bottom: 6px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: #fff; overflow: hidden; cursor: zoom-in; }
.wx--2 .vx-zoom { height: 300px; }
.wx .vx-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wx li b { font-size: 13px; font-weight: 800; } .wx li span { font-size: 11.5px; color: var(--text-2); }

/* 위젯 간 연동: 실제 대시보드 임베드 (1280×720을 칸에 맞춰 축소) */
.wl { display: grid; gap: 10px; }
.wl-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #5f6b76; }
.wl-frame iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; border: 0; transform-origin: 0 0; background: #fff; }
.wl-ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; }
.wl-ph p { display: grid; gap: 4px; font-size: 13px; } .wl-ph span { font-size: 12px; opacity: .8; }
.wl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wl-foot .vx-cap { margin: 0; }
.wl-open { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 12.5px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .wc-track { animation: none; } .wz-pane { animation: none; } .wg-edit i { animation: none; } }
.wl-ph[hidden] { display: none; }
/* 04 왼쪽 항목: 선택된 항목만 설명을 펼쳐 한 화면에 */
.ax1e .ax1-steps--w .ax1-step { align-items: center; }
.ax1e .ax1-steps--w .ax1-step[aria-pressed="false"] > span > span { display: none; }
.wg-tbl th { white-space: nowrap; }
.wg-tbl th, .wg-tbl td { padding-block: 5px; }
@media (max-width: 720px) { .wg-key { grid-template-columns: 1fr 1fr; } .wg-all { grid-template-columns: 1fr 1fr; } }
/* 선택 링은 바깥 테두리(outline)로 — 모서리 안쪽에 배경이 비치지 않게 */
.ax1e .aht-tab.is-on .aht-thumb { box-shadow: 0 8px 18px -10px rgba(91, 91, 240, .6); outline: 2px solid #7c5cff; outline-offset: 0; border-color: transparent; }

/* =====================================================================
   시안 1-6 (시안 1-5 복제 개정판, body.ax1f)
   ===================================================================== */
/* 04 왼쪽 항목: 03처럼 설명을 항상 보임 */
.ax1f .ax1-steps--w .ax1-step[aria-pressed="false"] > span > span { display: block; }
.ax1f .ax1-steps--w .ax1-step { align-items: start; padding-block: 8px; }
.ax1f .ax1-steps--w .ax1-step > span > span { font-size: 12.5px; line-height: 1.45; }
.ax1f .ax1-steps--w { gap: 2px; margin-top: 16px; }
.wz--notabs .wz-stage { min-height: 520px; }

/* ---------- 02 OS에 상관없이 ---------- */
.vos { margin: 0; }
.vos-stage { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.5fr) 36px minmax(0, 1fr); align-items: center; padding: 22px 20px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #7c6cff 7%, var(--surface)), var(--surface) 70%); }
.vos-h { margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--text-2); text-align: center; }
.vos-col ul { display: grid; gap: 6px; }
.vos-col li { padding: 7px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; }
.vos-srv li { color: var(--text-2); }
.vos-cli li { animation: vos-hi 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes vos-hi { 0%, 2% { background: var(--surface); color: var(--text); border-color: var(--line); } 5%, 22% { background: var(--grad); color: #fff; border-color: transparent; } 26%, 100% { background: var(--surface); color: var(--text); border-color: var(--line); } }
.vos-wire { position: relative; height: 2px; margin-top: 20px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
.vos-wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #7c6cff; animation: vos-flow 1.6s linear infinite; }
.vos-wire--r i { animation-direction: reverse; background: #ff4d8d; }
@keyframes vos-flow { from { left: 0; } to { left: calc(100% - 8px); } }
.vos-core { display: grid; justify-items: center; gap: 10px; }
.vos-win { width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg); box-shadow: 0 14px 30px -18px rgba(40, 30, 120, .45); }
.vos-bar { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; }
.vos-bar > i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.vos-name { position: relative; flex: 1; height: 14px; margin-left: 6px; }
.vos-name b { position: absolute; left: 0; top: 0; font-weight: 800; color: var(--kicker); opacity: 0; animation: vos-nm 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); white-space: nowrap; }
@keyframes vos-nm { 0%, 2% { opacity: 0; transform: translateY(4px); } 5%, 22% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; } }
.vos-bar em { font-style: normal; font-weight: 700; color: var(--text-2); }
.vos-scr { aspect-ratio: 16 / 10; container-type: inline-size; }
.vos-scr .md-kpi b { height: 8cqi; } .vos-scr .md-bar { height: 21cqi; } .vos-scr .md-line { height: 11cqi; }
.vos-same { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, #10b981 10%, var(--surface)); border: 1px solid color-mix(in srgb, #10b981 35%, transparent); color: #047857; font-size: 12px; font-weight: 800; }
.vos-same span { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #10b981; color: #fff; font-size: 10px; }
[data-theme="dark"] .vos-same { color: #6ee7b7; }
.vos-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.vos-notes li { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--text-2); }
@media (max-width: 640px) { .vos-stage { grid-template-columns: 1fr 1fr; gap: 12px; } .vos-core { grid-column: 1 / -1; grid-row: 1; } .vos-wire { display: none; } }

/* ---------- 04 그리드·맵차트: 핵심 3 + 기능 카드 ---------- */
.g2, .m2 { display: grid; gap: 12px; }
.g2-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.g2-key li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 6px 16px -14px rgba(40, 30, 120, .5); }
.g2-key span { grid-row: span 2; font-family: var(--mono); font-size: 11px; font-weight: 800; color: var(--kicker); }
.g2-key b { font-size: 13px; font-weight: 800; }
.g2-key p { font-size: 11.5px; line-height: 1.45; color: var(--text-2); }
.g2-feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.g2-feat li { display: grid; align-content: start; gap: 2px; padding: 8px 10px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, transform .25s var(--ease); }
.g2-feat li:hover { border-color: #a99dff; transform: translateY(-2px); }
.g2-feat b { margin-top: 6px; font-size: 12.5px; font-weight: 800; }
.g2-feat p { font-size: 11px; line-height: 1.45; color: var(--text-2); }
.g2-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-2); }
.g2-foot a { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 700; color: var(--text); }
.g2-foot a:hover { border-color: #a99dff; }
/* 미니 그리드 그림 */
.mg { position: relative; display: grid; gap: 3px; height: 70px; padding: 7px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.mg-r { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 3px; }
.mg-r b { height: 8px; border-radius: 2px; background: var(--line); font-size: 7px; line-height: 8px; text-align: center; color: var(--kicker); }
.mg-h b { background: color-mix(in srgb, #7c6cff 22%, var(--surface)); }
.mg-h b.on { background: #7c6cff; color: #fff; }
.mg-h b.fl { background: color-mix(in srgb, #ff4d8d 25%, var(--surface)); color: #e0266c; }
.mg b.ed { height: 10px; margin-block: -1px; background: var(--surface); border: 1.5px solid #7c6cff; position: relative; }
.mg b.ed i { position: absolute; left: 40%; top: 1px; width: 1px; height: 5px; background: var(--text); animation: wg-caret 1s steps(1) infinite; }
.mg--excel .mg-r { width: 62%; }
.mg-xl { position: absolute; right: 8px; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2); }
.mg-xl em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #16a34a; color: #fff; font-style: normal; font-weight: 900; font-size: 11px; }
.mg b.ck { width: 8px; flex: none; justify-self: start; border: 1px solid var(--line-strong); background: var(--surface); }
.mg b.ck.on { background: #7c6cff; border-color: #7c6cff; }
.mg b.bar { background: linear-gradient(90deg, #8b7dff var(--w), var(--line) var(--w)); }
.mg b.sp { background: none; border-bottom: 1.5px solid #ff4d8d; border-radius: 0; transform: skewY(-12deg); }
.mg .t0 b:first-child, .mg .t1 b:first-child, .mg .t2 b:first-child { background: none; text-align: left; }
.mg .t1 b:first-child { padding-left: 5px; } .mg .t2 b:first-child { margin-left: 10px; background: var(--line); }
.mg .t0 b:not(:first-child) { background: color-mix(in srgb, #7c6cff 14%, var(--line)); }
.mg-mrg { display: grid; grid-template-columns: 1fr 2.3fr; gap: 3px; }
.mg-mrg .m { height: auto; background: color-mix(in srgb, #7c6cff 20%, var(--surface)); }
.mg-mrg > span { display: grid; gap: 3px; } .mg-mrg .mg-r { grid-template-columns: 1.3fr 1fr; } .mg-mrg .mg-r b:last-child { display: none; }
.mg-sum b { background: color-mix(in srgb, #7c6cff 30%, var(--surface)); color: #fff; font-weight: 900; }
.mg-sum b:first-child { background: #7c6cff; }
.mg .sel b { background: color-mix(in srgb, #7c6cff 30%, var(--surface)); }
.mg .sel b:first-child { background: #7c6cff; }
.mg b.pv { background: color-mix(in srgb, #ff4d8d 22%, var(--surface)); color: #e0266c; }
/* 맵차트 */
.m2-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.m2-tiles li { display: grid; gap: 4px; text-align: center; }
.m2-tiles .vx-zoom { display: grid; place-items: center; height: 96px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: #fff; overflow: hidden; cursor: zoom-in; }
.m2-tiles img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s var(--ease); }
.m2-tiles .vx-zoom:hover img { transform: scale(1.06); }
.m2-tiles b { font-size: 11.5px; font-weight: 800; }
.m2-cats { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.m2-cats p { font-size: 11.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.m2-cats p b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m2-cats ul { display: flex; flex-wrap: wrap; gap: 5px; }
.m2-cats li { padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; }
@media (max-width: 720px) { .g2-key { grid-template-columns: 1fr; } .g2-feat { grid-template-columns: 1fr 1fr; } .m2-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m2-cats { grid-template-columns: 1fr; } }

/* ---------- 05 원본 데이터 연동 애니메이션 ---------- */
.ax1-wv .ab-fig { padding: 10px; background: var(--surface); }
.ax1-wv .ab-wv .wv { height: 230px; }
@media (prefers-reduced-motion: reduce) { .vos-cli li, .vos-name b, .vos-wire i { animation: none; } .vos-name b:first-child { opacity: 1; } }
/* 1-6: 02·05 한 화면 맞춤 */
.ax1f #c2 .vd3-stage { padding: 16px 20px 10px; }
.ax1f #c2 .vd3-row, .ax1f #c2 .vd3-labs { padding-inline: 14%; }
.ax1f #c2 .vd3 > .vx-cap { margin-top: 6px; }
.ax1f #c2 .vos-stage { padding-block: 16px 14px; }
.ax1f #c5 .ax1-sub .vx-shot:only-child .vx-zoom { height: 210px; display: grid; place-items: center; }
.ax1f #c5 .ax1-sub .vx-shot:only-child .vx-zoom img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.ax1f #c2 .vos-scr { aspect-ratio: 16 / 8.6; }
.ax1f #c2 .vd3-row, .ax1f #c2 .vd3-labs { padding-inline: 18%; }

/* =====================================================================
   시안 1-7 (시안 1-6 복제 개정판, body.ax1g)
   ===================================================================== */
/* ---------- 02 OS 호환: 대시보드 하나 → 6개 OS ---------- */
.os2 { margin: 0; }
.os2-stage { display: grid; gap: 0; padding: 18px 16px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #7c6cff 7%, var(--surface)), var(--surface) 70%); }
.os2-src { display: grid; justify-items: center; }
.os2-win { width: 46%; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg); box-shadow: 0 12px 26px -16px rgba(40, 30, 120, .45); }
.os2-bar { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; }
.os2-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.os2-bar b { margin-left: 6px; color: var(--kicker); }
.os2-scr { aspect-ratio: 16 / 9; container-type: inline-size; }
.os2-scr .md-kpi b { height: 8cqi; } .os2-scr .md-bar { height: 20cqi; } .os2-scr .md-line { height: 10cqi; }
.os2-lines { display: block; width: 100%; height: 56px; overflow: visible; }
.os2-l path { fill: none; stroke: var(--line-strong); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.os2-d circle { fill: #7c6cff; }
.os2-os { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.os2-os li { position: relative; display: grid; justify-items: center; gap: 3px; padding: 14px 4px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-align: center; }
.os2-os .lg { width: 30px; height: 30px; margin-bottom: 4px; }
.os2-os b { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.os2-os span { font-size: 10.5px; color: var(--text-2); line-height: 1.3; }
.os-ok { position: absolute; top: -7px; right: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #10b981; color: #fff; font-size: 10px; font-style: normal; font-weight: 900; box-shadow: 0 0 0 2px var(--surface); }
[data-theme="dark"] .os2-os .lg path[fill="#1f2333"] { fill: #eef0ff; }
@media (max-width: 640px) { .os2-os { grid-template-columns: repeat(3, minmax(0, 1fr)); } .os2-win { width: 70%; } }

/* ---------- 04 그리드 · 맵차트: 시각 요소 크게, 글 최소 ---------- */
.ax1g .wz--notabs .wz-stage { min-height: 0; }
.g3 { display: grid; gap: 12px; }
.g3-h { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.g3-h b { font-size: 15px; font-weight: 800; color: var(--text); }
.g3-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g3-big li { display: grid; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s; }
.g3-big li:hover { border-color: #a99dff; }
.g3-big b { font-size: 13.5px; font-weight: 800; padding-left: 2px; }
.g3-big .mg { height: 128px; gap: 6px; padding: 12px; border-radius: 10px; }
.g3-big .mg-r { gap: 6px; }
.g3-big .mg-r b { height: 13px; border-radius: 3px; font-size: 10px; line-height: 13px; padding: 0; }
.g3-big .mg b.ed { height: 17px; } .g3-big .mg b.ed i { height: 9px; top: 3px; }
.g3-big .mg-xl { right: 16px; font-size: 16px; gap: 8px; } .g3-big .mg-xl em { width: 36px; height: 36px; font-size: 17px; border-radius: 8px; }
.g3-big .mg-mrg { gap: 6px; } .g3-big .mg-mrg > span { gap: 6px; }
.g3-big .mg .t1 b:first-child { padding-left: 10px; } .g3-big .mg .t2 b:first-child { margin-left: 22px; }
.g3-more { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.g3-more p { font-size: 12px; font-weight: 800; color: var(--kicker); white-space: nowrap; }
.g3-more ul { display: flex; flex-wrap: wrap; gap: 5px; }
.g3-more li { padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; }
.g3-more a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12px; font-weight: 700; white-space: nowrap; }
.m3-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m3-tiles li { display: grid; gap: 6px; }
.m3-tiles .vx-zoom { display: grid; place-items: center; height: 158px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: #fff; overflow: hidden; cursor: zoom-in; }
.m3-tiles img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s var(--ease); }
.m3-tiles .vx-zoom:hover img { transform: scale(1.05); }
.m3-tiles b { font-size: 13px; font-weight: 800; padding-left: 2px; }
@media (max-width: 720px) { .g3-more { grid-template-columns: 1fr; } .m3-tiles { grid-template-columns: 1fr 1fr; } }

/* ---------- 05 맞춤 쿼리: 이미지 온전히 + 흐름 ---------- */
.ax1g .ax1-wv .ab-wv .wv { height: 200px; }
.vq { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.vq-shot { margin: 0; display: grid; align-content: start; }
.vq-shot .vx-zoom { display: block; padding: 0; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: #fff; }
.vq-shot img { display: block; width: 100%; height: auto; }
.vq-flow { display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); counter-reset: none; }
.vq-flow li { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; align-items: start; }
.vq-flow li + li { padding-top: 6px; border-top: 1px dashed var(--line); }
.vq-flow li > span { grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 10.5px; font-weight: 800; }
.vq-flow b { font-size: 12.5px; font-weight: 800; }
.vq-flow code { display: block; margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: #1d1f2c; color: #d6d9ee; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; }
.vq-flow code em { font-style: normal; padding: 0 3px; border-radius: 3px; background: #7c6cff; color: #fff; }
.vq-chips { display: flex; gap: 4px; margin-top: 4px; }
.vq-chips i { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-2); }
.vq-chips i.on { background: #7c6cff; border-color: #7c6cff; color: #fff; }
.vq-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 4px; }
.vq-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(#8b7dff, #b45cff); }
@media (max-width: 720px) { .vq { grid-template-columns: 1fr; } }

/* ---------- 06 실시간 관제 + 대용량 지역 데이터 ---------- */
.vlv { display: grid; gap: 12px; }
.vlv figure { margin: 0; }
.vlv-vid { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #0b1230; aspect-ratio: 16 / 8.2; }
.vlv-vid video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.vlv-live { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(10, 12, 30, .7); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.vlv-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff4d6d; animation: ab-blink 1.4s ease-in-out infinite; }
.vlv-a .vx-cap { margin-top: 8px; }
.vlv-b { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.vlv-b .vx-zoom { display: block; padding: 0; border-radius: 10px; overflow: hidden; background: #fff; }
.vlv-b img { display: block; width: auto; height: 236px; }
.vlv-b figcaption { display: grid; gap: 6px; justify-items: start; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.vlv-b figcaption b { font-size: 15px; font-weight: 800; color: var(--text); }
@media (max-width: 720px) { .vlv-b { grid-template-columns: 1fr; } .vlv-b img { width: 100%; height: auto; } }

/* ---------- 07 권한 관리 · 개인화 ---------- */
.pm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pm-card { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.pm-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 800; }
.pm-h span { font-size: 11px; font-weight: 600; color: var(--text-2); }
.pm-h .pm-sso { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #10b981 12%, var(--surface)); color: #047857; font-weight: 800; }
.pm-heads, .pm-roles li { display: grid; grid-template-columns: 30px minmax(0, 1fr) repeat(3, 40px); align-items: center; gap: 6px; }
.pm-heads span { font-size: 10.5px; font-weight: 800; color: var(--text-2); text-align: center; }
.pm-roles { display: grid; gap: 6px; margin-top: 6px; }
.pm-roles li { padding: 8px 0; border-top: 1px solid var(--line); }
.pm-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font-size: 12px; font-weight: 800; }
.pm-roles b { font-size: 13px; }
.pm-roles i { justify-self: center; position: relative; width: 30px; height: 17px; border-radius: 999px; background: var(--line-strong); }
.pm-roles i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left .2s; }
.pm-roles i.on { background: var(--c); } .pm-roles i.on::after { left: 15px; }
.pm-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pm-screens li { display: grid; justify-items: center; gap: 2px; text-align: center; }
.pm-screens b { margin-top: 6px; font-size: 12.5px; } .pm-screens span { font-size: 11px; color: var(--text-2); }
.pm-scr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; aspect-ratio: 4 / 3.4; padding: 6px; border-radius: 8px; border: 2px solid var(--c); background: var(--bg); }
.pm-scr i { border-radius: 3px; background: var(--line); }
.pm-scr i.on { background: color-mix(in srgb, var(--c) 55%, var(--surface)); }
.ax1-alarm .vx-shot { margin: 0; }
.ax1-alarm .vx-zoom { display: grid; place-items: center; height: 230px; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.ax1-alarm .vx-zoom img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
@media (max-width: 720px) { .pm { grid-template-columns: 1fr; } }

/* ---------- 08 빅데이터 플랫폼 → BIX5 ---------- */
.pf { margin: 0; }
.pf-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.25fr); align-items: stretch; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 90% at 70% 50%, color-mix(in srgb, #7c6cff 8%, var(--surface)), var(--surface) 70%); }
.pf-nodes { display: grid; gap: 8px; }
.pf-nodes li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 6px 16px -14px rgba(40, 30, 120, .5); }
.pf-nodes .lg { flex: none; width: 30px; height: 30px; }
.pf-nodes span { display: grid; line-height: 1.25; }
.pf-nodes b { font-size: 14px; font-weight: 800; } .pf-nodes small { font-size: 11px; color: var(--text-2); }
.pf-lines { width: 100%; height: 100%; min-height: 240px; }
.pf-l path { fill: none; stroke: var(--line-strong); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pf-d circle { fill: #7c6cff; }
.pf-hub { display: grid; align-content: center; gap: 10px; }
.pf-core { display: grid; justify-items: center; gap: 2px; padding: 16px 12px; border-radius: 16px; background: var(--grad); color: #fff; box-shadow: 0 16px 30px -16px rgba(124, 92, 255, .7); text-align: center; }
.pf-core small { font-size: 10.5px; font-weight: 700; opacity: .85; letter-spacing: .06em; }
.pf-core b { font-size: 1.7rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.pf-core span { font-size: 11.5px; font-weight: 600; opacity: .9; }
.pf-out { border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg); }
[data-theme="dark"] .pf-nodes .lg path[fill="#1f2333"] { fill: #eef0ff; }
@media (max-width: 720px) { .pf-stage { grid-template-columns: 1fr; } .pf-lines { display: none; } }
/* 1-7 한 화면 맞춤 */
.ax1g #c2 .os2-win { width: 36%; }
.ax1g #c2 .os2-lines { height: 40px; }
.ax1g #c2 .os2-stage { padding-block: 14px 12px; }
.ax1g #c2 .os2-os li { padding-block: 11px 8px; }
.ax1g #c2 .vd3-row, .ax1g #c2 .vd3-labs { padding-inline: 22%; }
.ax1g #c2 .vd3-stage { padding-block: 12px 8px; }
.ax1g .vlv-vid { aspect-ratio: 16 / 7; }
.ax1g .vlv-b img { height: 200px; }
.ax1g #c2 .vd3 > .vx-cap { display: none; }
.ax1g #c2 .vd3-row, .ax1g #c2 .vd3-labs { padding-inline: 25%; }
.ax1g .ax1-alarm .vx-shot .vx-zoom { height: 230px; }
.ax1g .ax1-alarm .vx-shot .vx-zoom img { width: auto !important; height: 228px !important; max-width: 100%; object-fit: contain; }
/* 07 알람 화면: 06의 대용량 지도 예시처럼 이미지 + 설명 한 줄 */
.ax1g .ax1-alarm .vx-shot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.ax1g .ax1-alarm .vx-shot .vx-zoom { width: auto; height: auto; border-radius: 10px; box-shadow: none; }
.ax1g .ax1-alarm .vx-shot .vx-zoom img { height: 210px !important; }
.ax1g .ax1-alarm figcaption { display: grid; gap: 6px; justify-items: start; margin: 0; font-size: 12.5px; line-height: 1.5; }
@media (max-width: 720px) { .ax1g .ax1-alarm .vx-shot { grid-template-columns: 1fr; } .ax1g .ax1-alarm .vx-shot .vx-zoom img { width: 100% !important; height: auto !important; } }

/* =====================================================================
   시안 1-8 (시안 1-7 복제 개정판, body.ax1h)
   ===================================================================== */
/* 연결선 (JS가 실제 크기로 그림) */
svg[data-flines] { display: block; width: 100%; overflow: visible; }
svg[data-flines] .fl-l { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
svg[data-flines] .fl-d { fill: #7c6cff; }
.os3 .os2-lines { height: 48px; }
.pf-stage svg[data-flines] { height: 100%; min-height: 240px; }

/* ---------- 02 디바이스: 비율 고정(높이 기준) + 화면 크기 목록 ---------- */
.vd4 { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 22px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, #7c6cff 7%, var(--surface)), var(--surface) 70%); }
.vd4-row { display: flex; align-items: flex-end; justify-content: center; gap: 22px; padding-bottom: 0; border-bottom: 1px solid var(--line-strong); }
.vd4-dev { display: flex; flex-direction: column; align-items: center; }
.vd4-dev .vd2-scr { margin: 0; }
.vd4-pc .vd2-scr { height: 150px; width: auto; aspect-ratio: 16 / 10; border-width: 6px; border-radius: 10px; }
.vd4-tab .vd2-scr { height: 150px; width: auto; aspect-ratio: 3 / 4; border-width: 6px; border-radius: 14px; }
.vd4-ph .vd2-scr { height: 118px; width: auto; aspect-ratio: 9 / 19; border-width: 4px; border-radius: 12px; }
.vd4-pc .vd3-neck { width: 22px; height: 18px; } .vd4-pc .vd3-foot { width: 90px; }
.vd4-pc .md-kpi b { height: 8cqi; } .vd4-pc .md-bar { height: 21cqi; } .vd4-pc .md-line { height: 11cqi; }
.vd4-list { display: grid; gap: 6px; min-width: 150px; }
.vd4-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.vd4-list b { font-size: 12.5px; font-weight: 800; } .vd4-list span { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
@media (max-width: 720px) { .vd4 { grid-template-columns: 1fr; } .vd4-pc .vd2-scr { height: 110px; } .vd4-tab .vd2-scr { height: 110px; } .vd4-ph .vd2-scr { height: 90px; } .vd4-list { grid-template-columns: 1fr 1fr; } }

/* ---------- 04 그리드 실제 화면 + 기능 아이콘 배지 ---------- */
.g4-shots { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; }
.g4-shots li { display: grid; gap: 4px; align-content: start; }
.g4-shots li.big { grid-row: span 2; }
.g4-shots .vx-zoom { display: grid; place-items: center; padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: #fff; overflow: hidden; cursor: zoom-in; box-shadow: none; }
.g4-shots li.big .vx-zoom { height: 268px; }
.g4-shots li:not(.big) .vx-zoom { height: 108px; }
.g4-shots img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.g4-shots b { font-size: 13px; font-weight: 800; padding-left: 2px; }
.g4-shots span { font-size: 11.5px; color: var(--text-2); padding-left: 2px; line-height: 1.4; }
.g4-more li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; }
.g4-more li svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--kicker); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g4 > .vx-cap { margin-top: 0; }
@media (max-width: 720px) { .g4-shots { grid-template-columns: 1fr; } .g4-shots li.big { grid-row: auto; } }

/* ---------- 05 맞춤 쿼리: 이미지 크게 + 서울 예시 흐름 ---------- */
.ax1h .ax1-wv .ab-wv .wv { height: 170px; }
.vq2 { display: grid; gap: 10px; }
.vq2-shot { margin: 0; }
.vq2-shot .vx-zoom { display: block; max-width: 640px; margin-inline: auto; padding: 0; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: #fff; box-shadow: none; }
.vq2-shot img { display: block; width: 100%; height: auto; }
.vq2-shot figcaption { justify-content: center; }
.vq2-flow { display: grid; grid-template-columns: 1.25fr .9fr 1.1fr; gap: 0; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.vq2-flow li { position: relative; display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; align-content: start; padding: 10px 12px; }
.vq2-flow li + li { border-left: 1px solid var(--line); }
.vq2-flow li + li::before { content: "→"; position: absolute; left: -9px; top: 10px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); font-size: 10px; color: var(--kicker); }
.vq2-flow li > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 10.5px; font-weight: 800; }
.vq2-flow li > b { align-self: center; font-size: 12.5px; font-weight: 800; }
.vq2-flow li > :not(span):not(b) { grid-column: 1 / -1; }
.vq2-flow code { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: #1d1f2c; color: #d6d9ee; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; }
.vq2-flow code em, .vq2-p { font-style: normal; padding: 0 3px; border-radius: 3px; background: #7c6cff; color: #fff; }
.vq2-flow .vq-chips { margin-top: 8px; }
.vq2-chart { margin-top: 6px; padding: 6px 8px; border-radius: 8px; border: 1.5px solid #7c6cff; background: color-mix(in srgb, #7c6cff 5%, var(--surface)); }
.vq2-chart > p:first-child { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; }
.vq2-chart .sw { width: 8px; height: 8px; border-radius: 2px; background: #7c6cff; }
.vq2-bars { display: flex; align-items: flex-end; gap: 4px; height: 38px; margin-top: 4px; }
.vq2-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(#8b7dff, #6a5cf0); }
.vq2-off { margin-top: 4px; font-size: 10.5px; color: var(--text-2); }
.vq2-off s { opacity: .7; }
@media (max-width: 720px) { .vq2-flow { grid-template-columns: 1fr; } .vq2-flow li + li { border-left: 0; border-top: 1px solid var(--line); } .vq2-flow li + li::before { display: none; } }

/* ---------- 06 지도 크게 ---------- */
.ax1h .vlv2 .vlv-vid { aspect-ratio: 16 / 6.2; }
.ax1h .vlv2 .vlv-b { grid-template-columns: auto minmax(0, 1fr); }
.ax1h .vlv2 .vlv-b img { height: 300px; }

/* ---------- 09 AI: 대화형(01·02) + 위젯 분석(03) ---------- */
.ai2 { display: grid; gap: 12px; }
.ai2-win { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.ai2-top { display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.ai2-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ai2-top b { margin-left: 6px; } .ai2-top em { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #7c6cff 12%, var(--surface)); color: var(--kicker); font-style: normal; font-size: 10.5px; font-weight: 800; }
.ai2-pair { display: grid; grid-template-columns: 1fr 1fr; }
.ai2-chat { padding: 10px 12px; }
.ai2-chat + .ai2-chat { border-left: 1px dashed var(--line); }
.ai2-k { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; font-weight: 800; }
.ai2-k span, .ai2-k2 { padding: 1px 6px; border-radius: 5px; background: var(--grad); color: #fff; font-family: var(--mono); font-size: 10.5px; }
.ai2-msgs { display: grid; gap: 8px; }
.ai2-me { justify-self: end; max-width: 92%; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.45; }
.ai2-bot { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: start; }
.ai2-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); font-size: 9px; font-weight: 900; color: var(--kicker); }
.ai2-say { padding: 7px 8px 8px; border-radius: 4px 14px 14px 14px; background: var(--surface-2); }
.ai2-say p { margin: 0 2px 6px; font-size: 11.5px; font-weight: 600; }
.ai2-img { display: block; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: none; }
.ai2-img img { display: block; width: 100%; height: 150px; object-fit: contain; }
.ai2-input { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 7px 8px 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); }
.ai2-input span { flex: 1; } .ai2-input i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff; font-style: normal; font-size: 12px; }
.ai2-an { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; align-items: stretch; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.ai2-steps { display: grid; gap: 8px; align-content: start; }
.ai2-steps li { display: flex; align-items: center; gap: 8px; }
.ai2-steps li:first-child { gap: 6px; margin-bottom: 2px; font-size: 13px; }
.ai2-steps p { display: grid; font-size: 11px; color: var(--text-2); line-height: 1.35; }
.ai2-steps p b { font-size: 12.5px; color: var(--text); }
.ai2-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--grad); }
.ai2-ic svg { width: 16px; height: 16px; fill: #fff; }
.ai2-ic--run { background: color-mix(in srgb, #7c6cff 14%, var(--surface)); } .ai2-ic--run svg { fill: none; stroke: var(--kicker); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ai2-ic--ok { background: color-mix(in srgb, #10b981 14%, var(--surface)); } .ai2-ic--ok svg { fill: none; stroke: #059669; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ai2-steps li:first-child .ai2-ic { animation: ai2-pulse 2.4s ease-in-out infinite; }
@keyframes ai2-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, .45); } 50% { box-shadow: 0 0 0 6px rgba(124, 92, 255, 0); } }
.ai2-shot { margin: 0; display: grid; gap: 6px; }
.ai2-shot .vx-zoom { display: block; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0b0d17; box-shadow: none; }
.ai2-shot img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: right top; }
.ai2-shot figcaption { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
@media (max-width: 720px) { .ai2-pair, .ai2-an { grid-template-columns: 1fr; } .ai2-chat + .ai2-chat { border-left: 0; border-top: 1px dashed var(--line); } }
@media (prefers-reduced-motion: reduce) { .ai2-steps li:first-child .ai2-ic { animation: none; } }
/* 1-8 높이 맞춤 */
.ax1h .ax1-wv .ab-wv .wv { height: 140px; }
.ax1h .ax1-wv .ab-fig { padding: 6px; }
.ax1h .vq2-shot .vx-zoom { max-width: 600px; }
.ax1h .vq2-flow li { padding-block: 8px; }
.ax1h .vq2-bars { height: 30px; }
.ax1h .vlv2 .vlv-vid { aspect-ratio: 16 / 5.8; }
.ax1h .vlv2 .vlv-b img { height: 270px; }
.ai2-img img { height: 132px; }
.ai2-shot img { height: 170px; }

/* =====================================================================
   시안 1-9 (시안 1-8 복제 개정판, body.ax1i)
   ===================================================================== */
/* 전체 스크롤: 왼쪽 글을 화면에 고정하지 않고 오른쪽과 함께 한 페이지처럼 스크롤 */
.ax1i .ax1-txt { position: static; top: auto; }
.ax1i .ax1-grid { align-items: start; }

/* 연결선: 빛이 흐르는 그라데이션 (02 · 07 SSO · 08 공통) */
svg[data-glow] .fl-l { stroke: color-mix(in srgb, #7c6cff 22%, var(--line)); stroke-width: 1.5; }
svg[data-glow] .fl-g { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 18 82; stroke-dashoffset: 100; animation: fl-run 2.8s cubic-bezier(.45, 0, .55, 1) infinite; }
svg[data-glow] .fl-g--soft { stroke-width: 7; opacity: .28; filter: blur(3px); stroke-dasharray: 26 74; }
@keyframes fl-run { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { svg[data-glow] .fl-g { animation: none; display: none; } }

/* 02 디바이스: 각 기기 아래 이름 */
.vd5 { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 8px; }
.vd5 .vd4-row { grid-column: 1; grid-row: 1; }
.vd5-labs { grid-column: 1; grid-row: 2; display: flex; justify-content: center; gap: 22px; }
.vd5-labs p { display: grid; justify-items: center; gap: 1px; font-family: var(--mono); font-size: 10.5px; color: var(--text-2); }
.vd5-labs b { font-family: var(--font); font-size: 12.5px; font-weight: 800; color: var(--text); }
.vd5-pc { width: 252px; } .vd5-tab { width: 124px; } .vd5-ph { width: 64px; white-space: nowrap; }
.vd5 .vd4-list { grid-column: 2; grid-row: 1 / span 2; }
.vd5 .vd4-list li { display: grid; gap: 1px; } .vd5 .vd4-list span { font-family: inherit; font-size: 11px; }
@media (max-width: 720px) { .vd5 .vd4-list { grid-column: 1; grid-row: auto; } .vd5-pc { width: 188px; } .vd5-tab { width: 94px; } .vd5-ph { width: 52px; } }

/* 05 원본 애니메이션 + 연결 가능한 데이터 (좌우 빈 공간 줄임) */
.v5row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.ax1i .v5row .ax1-wv .ab-fig { height: 100%; padding: 6px; }
.ax1i .v5row .ab-wv { height: 100%; padding: 4px; display: grid; align-items: center; }
.ax1i .v5row .ab-wv .wv { width: 100%; height: auto; aspect-ratio: 326 / 168; }
.v5s { display: grid; align-content: center; gap: 8px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.v5s-h { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--text-2); }
.v5s ul { display: grid; gap: 6px; }
.v5s li { display: grid; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.v5s b { font-size: 12.5px; font-weight: 800; } .v5s span { font-size: 11px; color: var(--text-2); }
/* 맞춤 쿼리: 한 카드 안에 화면 + '사용 예시' */
.vq3 { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.vq3-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vq3-head b { font-size: 15px; font-weight: 800; } .vq3-head span { font-size: 12px; color: var(--text-2); }
.vq3-shot { margin: 0; }
.vq3-shot .vx-zoom { display: block; max-width: 560px; margin-inline: auto; padding: 0; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; background: #fff; box-shadow: none; }
.vq3-shot img { display: block; width: 100%; height: auto; }
.vq3-shot figcaption { justify-content: center; margin-top: 6px; }
.vq3-ex { border-radius: 12px; border: 1.5px dashed color-mix(in srgb, #7c6cff 40%, transparent); background: color-mix(in srgb, #7c6cff 4%, var(--surface)); }
.vq3-exh { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px dashed color-mix(in srgb, #7c6cff 30%, transparent); font-size: 12.5px; }
.vq3-exh span { padding: 2px 8px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 10.5px; font-weight: 800; }
.vq3-flow { display: grid; grid-template-columns: 1.15fr .85fr 1.3fr; }
.vq3-flow li { position: relative; display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; align-content: start; padding: 9px 12px; }
.vq3-flow li + li { border-left: 1px solid var(--line); }
.vq3-flow li + li::before { content: "→"; position: absolute; left: -9px; top: 10px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); font-size: 10px; color: var(--kicker); }
.vq3-flow li > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 10.5px; font-weight: 800; }
.vq3-flow li > b { align-self: center; font-size: 12.5px; font-weight: 800; }
.vq3-flow li > :not(span):not(b) { grid-column: 1 / -1; }
.vq3-flow code { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: #1d1f2c; color: #d6d9ee; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; }
.vq3-flow code em { font-style: normal; padding: 0 3px; border-radius: 3px; background: #7c6cff; color: #fff; }
.vq3-flow .vq-chips { margin-top: 8px; flex-wrap: wrap; }
.vq3-chart { margin-top: 6px; padding: 6px 8px 4px; border-radius: 8px; border: 1.5px solid #7c6cff; background: var(--surface); }
.vq3-chart ul { display: flex; align-items: flex-end; gap: 5px; height: 62px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.vq3-chart li { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.vq3-chart li i { width: 100%; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(#8b7dff, #6a5cf0); }
.vq3-chart li span { position: absolute; left: 50%; bottom: -14px; translate: -50% 0; font-size: 8.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.vq3-chart p { margin-top: 4px; font-size: 10px; color: var(--text-2); }
@media (max-width: 720px) { .v5row, .vq3-flow { grid-template-columns: 1fr; } .vq3-flow li + li { border-left: 0; border-top: 1px solid var(--line); } .vq3-flow li + li::before { display: none; } }

/* 06 실시간 관제: 대시보드 전체 보이게(16:9, 자르지 않음) + 지역 데이터 이미지·설명 균형 */
.ax1i .vlv3 .vlv-vid { aspect-ratio: 16 / 9; }
.ax1i .vlv3 .vlv-vid video { object-fit: contain; }
.vlv3-b { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.vlv3-b .vx-zoom { display: grid; place-items: center; padding: 0; border-radius: 10px; overflow: hidden; background: #0b1230; box-shadow: none; }
.vlv3-b img { display: block; width: 100%; height: auto; max-height: 270px; object-fit: contain; }
.vlv3-b figcaption { display: grid; gap: 8px; justify-items: start; }
.vlv3-b figcaption > b { font-size: 16px; font-weight: 800; }
.vlv3-b figcaption > p { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.vlv3-key { display: grid; gap: 4px; width: 100%; }
.vlv3-key div { display: grid; grid-template-columns: 70px 1fr; align-items: center; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.vlv3-key dt { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.vlv3-key dd { color: var(--text-2); }
.vlv3-key i { width: 10px; height: 10px; border-radius: 2px; }
.vlv3-key i.h { background: linear-gradient(#ffb36b, #ff6b3d); height: 14px; width: 6px; }
.vlv3-key i.c { background: linear-gradient(90deg, #ffe07a, #ff6b3d, #c2185b); }
.vlv3-key i.p { border-radius: 50%; background: #4f8bff; }
.vlv3-scale { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; width: 100%; font-size: 10.5px; color: var(--text-2); }
.vlv3-scale i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ffe07a, #ffb36b, #ff6b3d, #c2185b); }
@media (max-width: 720px) { .vlv3-b { grid-template-columns: 1fr; } }

/* 07 역할별 권한 + SSO */
.pr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pr-cards li { display: grid; justify-items: center; gap: 1px; text-align: center; }
.pr-scr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; padding: 22px 6px 6px; border-radius: 8px; border: 2px solid var(--c); background: var(--bg); aspect-ratio: 4 / 3.4; }
.pr-scr > i { border-radius: 3px; background: color-mix(in srgb, var(--c) 30%, var(--surface)); }
.pr-bar { position: absolute; left: 4px; right: 4px; top: 3px; display: flex; justify-content: center; gap: 3px; }
.pr-t { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 4px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.pr-t svg { width: 10px; height: 10px; fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pr-t em { font-style: normal; font-size: 8.5px; font-weight: 800; color: var(--text); white-space: nowrap; }
.pr-cards b { margin-top: 6px; font-size: 11px; color: var(--text-2); }
.pr-cards strong { font-size: 13.5px; font-weight: 800; color: var(--c); }
.pr-cards span { font-size: 11px; color: var(--text-2); }
.sso { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.sso-h { display: flex; align-items: baseline; gap: 10px; } .sso-h b { font-size: 15px; font-weight: 800; } .sso-h span { font-size: 12px; color: var(--text-2); }
.sso-flow { display: grid; grid-template-columns: 110px 40px minmax(0, 1fr) 40px 110px; align-items: center; }
.sso-node { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 12px; text-align: center; }
.sso-idp { border: 1px solid var(--line-strong); background: var(--surface-2); }
.sso-idp svg { width: 26px; height: 26px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; }
.sso-node b { font-size: 12.5px; font-weight: 800; } .sso-node span { font-size: 10.5px; color: var(--text-2); line-height: 1.3; }
.sso-bix { background: var(--grad); color: #fff; box-shadow: 0 12px 24px -14px rgba(124, 92, 255, .7); }
.sso-bix b { font-size: 18px; font-weight: 900; } .sso-bix span { color: rgba(255, 255, 255, .9); }
.sso-l { height: 100%; min-height: 150px; }
.sso-ways { display: grid; gap: 5px; }
.sso-ways li { display: grid; padding: 6px 10px; border-radius: 9px; border: 1px solid color-mix(in srgb, #7c6cff 30%, transparent); background: color-mix(in srgb, #7c6cff 5%, var(--surface)); }
.sso-ways b { font-size: 12.5px; font-weight: 800; color: var(--kicker); } .sso-ways span { font-size: 11px; color: var(--text-2); }
.sso-feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sso-feat li { display: flex; gap: 6px; padding: 7px 8px; border-radius: 8px; background: var(--surface-2); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.sso-feat li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #10b981; color: #fff; font-size: 9px; font-weight: 900; }
@media (max-width: 720px) { .sso-flow { grid-template-columns: 1fr; gap: 8px; } .sso-l { display: none; } .sso-feat { grid-template-columns: 1fr 1fr; } .pr-cards { grid-template-columns: 1fr; } }
/* 1-9 높이 조정 */
.ax1i .v5row .ab-wv .wv { max-height: 180px; }
.ax1i .vq3-shot .vx-zoom { max-width: 500px; }
.ax1i .vlv3-b img { max-height: 230px; }
.ax1i .vlv3-b { padding: 10px; }
.ax1i #c2 .os2-stage { padding-block: 12px 10px; }
.ax1i .v5s ul { grid-template-columns: 1fr 1fr; }
.ax1i .v5s li { padding: 5px 8px; }
.ax1i .v5row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ax1i .vq3 { gap: 8px; padding: 10px 12px; }
.ax1i .vq3-flow li { padding-block: 7px; }
.ax1i .vq3-chart ul { height: 52px; }
/* 05 예시 차트 막대: 단계 목록(li) 스타일이 차트 안 li에 번지지 않게 */
.vq3-flow .vq3-chart li { display: flex; align-items: flex-end; padding: 0; border: 0; grid-template-columns: none; }
.vq3-flow .vq3-chart li::before { content: none; display: none; }
.vq3-flow .vq3-chart li > i { grid-column: auto; }
.vq3-flow .vq3-chart li > span { position: absolute; display: block; width: auto; height: auto; border-radius: 0; background: none; color: var(--text-2); font-size: 8.5px; font-weight: 700; place-items: initial; }

/* =====================================================================
   시안 1-10 (시안 1-9 복제 개정판, body.ax1j)
   ===================================================================== */
/* 은은한 빛 흐름: 일정한 속도(linear)로 끊김 없이 반복, 밝기·대비 낮춤 */
svg[data-glow="soft"] .fl-l { stroke: color-mix(in srgb, #7c6cff 16%, var(--line)); stroke-width: 1.4; }
svg[data-glow="soft"] .fl-s { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 34 66; stroke-dashoffset: 100; opacity: .42; animation: fl-soft 5s linear infinite; }
@keyframes fl-soft { to { stroke-dashoffset: 0; } }
[data-theme="dark"] svg[data-glow="soft"] .fl-s { opacity: .5; }
@media (prefers-reduced-motion: reduce) { svg[data-glow="soft"] .fl-s { animation: none; display: none; } }

/* ---------- 07 역할별 권한: 아이콘 표 ---------- */
.rl, .sso2 { padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.rl-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.rl-h b { font-size: 15px; font-weight: 800; } .rl-h span { font-size: 12px; color: var(--text-2); }
.rl-head, .rl-rows li { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; }
.rl-head span { display: grid; justify-items: center; gap: 2px; }
.rl-head svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rl-head em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text-2); }
.rl-rows li { padding: 8px 0; border-top: 1px solid var(--line); }
.rl-rows li:first-child { margin-top: 6px; }
.rl-rows li > p { display: grid; } .rl-rows b { font-size: 13.5px; font-weight: 800; } .rl-rows small { font-size: 11px; font-weight: 700; color: var(--c); }
.rl-rows li { grid-template-columns: 34px minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
.rl-head { grid-template-columns: 34px minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
.rl-head > span:first-child { grid-column: span 2; }
.rl-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); }
.rl-av svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.rl-rows i { justify-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line-strong); }
.rl-rows i.on { background: color-mix(in srgb, var(--c) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.rl-rows i svg { width: 17px; height: 17px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rl-rows i:not(.on)::after { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--line-strong); }

/* ---------- 07 SSO: 인증 → 지원 방식 → BIX5 ---------- */
.sso2 { margin-top: 12px; }
.sso2-flow { display: grid; grid-template-columns: 96px 44px minmax(0, 1fr) 44px 96px; align-items: center; }
.sso2-n { display: grid; justify-items: center; gap: 1px; padding: 12px 6px; border-radius: 14px; text-align: center; }
.sso2-n b { font-size: 12.5px; font-weight: 800; } .sso2-n span { font-size: 10.5px; color: var(--text-2); }
.sso2-idp { background: var(--surface-2); border: 1px solid var(--line); }
.sso2-idp svg { width: 24px; height: 24px; margin-bottom: 2px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; }
.sso2-bix { background: var(--grad); color: #fff; } .sso2-bix b { font-size: 17px; font-weight: 900; } .sso2-bix span { color: rgba(255, 255, 255, .88); }
.sso2-l { height: 100%; min-height: 96px; }
.sso2-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sso2-ways li { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.sso2-ways svg { grid-row: span 2; width: 22px; height: 22px; fill: none; stroke: var(--kicker); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sso2-ways b { font-size: 12.5px; font-weight: 800; line-height: 1.2; } .sso2-ways span { font-size: 10.5px; color: var(--text-2); line-height: 1.2; }
.sso2-feat { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.sso2-feat li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; font-weight: 700; }
.sso2-feat li::before { content: "✓"; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #10b981; color: #fff; font-size: 8.5px; font-weight: 900; }
@media (max-width: 720px) { .sso2-flow { grid-template-columns: 1fr; gap: 8px; } .sso2-l { display: none; } .sso2-feat { flex-wrap: wrap; } }

/* ---------- 09 위젯 AI 분석: 대시보드의 AI 아이콘 → 큰 채팅창 ---------- */
.ai3 .ai2-img img { height: 118px; }
.wa { padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.wa-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; font-size: 12px; color: var(--text-2); }
.wa-h b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.wa-h svg { width: 13px; height: 13px; vertical-align: -2px; fill: #c026d3; }
.wa-body { display: grid; grid-template-columns: minmax(0, 1.25fr) 30px minmax(0, 1fr); align-items: center; }
.wa-dash { position: relative; margin: 0; display: grid; gap: 6px; }
.wa-dash .vx-zoom { display: block; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: none; }
.wa-dash img { display: block; width: 100%; height: auto; }
.wa-dash figcaption { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; }
/* 막대 차트 위젯(약 x 2.6~54.5%, y 58.5~95.4%)과 AI 아이콘(약 x 53.6%, y 56.8%) 위치 강조 */
.wa-focus { position: absolute; left: 2.2%; width: 52.8%; top: calc(58% * var(--ih, 1)); height: calc(37.6% * var(--ih, 1)); border: 2px solid #c084fc; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(8, 6, 20, .35); pointer-events: none; }
.wa-dash { --ih: 1; }
.wa-dash .vx-zoom { position: relative; }
.wa-ic { position: absolute; left: 53.6%; top: calc(56.8% * var(--ih, 1)); translate: -50% -50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 3px rgba(192, 132, 252, .55), 0 6px 14px rgba(0, 0, 0, .4); animation: wa-pulse 2.4s ease-in-out infinite; }
.wa-ic svg { width: 16px; height: 16px; fill: #c026d3; }
.wa-ic i { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--grad); color: #fff; font-style: normal; font-size: 9.5px; font-weight: 900; }
@keyframes wa-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(192, 132, 252, .55), 0 6px 14px rgba(0, 0, 0, .4); } 50% { box-shadow: 0 0 0 7px rgba(192, 132, 252, .15), 0 6px 14px rgba(0, 0, 0, .4); } }
.wa-arrow { display: grid; place-items: center; }
.wa-arrow svg { width: 26px; height: 10px; fill: none; stroke: #b45cff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-chat { display: grid; border-radius: 14px; border: 1px solid var(--line-strong); background: #fff; color: #1b1d2b; overflow: hidden; box-shadow: 0 18px 36px -20px rgba(40, 30, 120, .55); font-size: 11.5px; }
.wc2-top { display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-bottom: 1px solid #eceef5; font-weight: 800; }
.wc2-top svg { width: 15px; height: 15px; fill: #c026d3; } .wc2-top span { margin-left: auto; color: #555; font-weight: 400; }
.wc2-body { display: grid; gap: 8px; padding: 10px; background: #f3f4f9; }
.wc2-bot, .wc2-ans p { padding: 8px 10px; border-radius: 12px; background: #fff; line-height: 1.5; }
.wc2-sug { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wc2-sug i { padding: 3px 8px; border-radius: 999px; border: 1px solid #dfe2ec; font-style: normal; font-size: 10.5px; }
.wc2-sug i:first-child { border-color: #6c6fe0; color: #4b4fd0; font-weight: 700; }
.wc2-me { justify-self: end; padding: 6px 12px; border-radius: 12px; background: #6c6fe0; color: #fff; font-weight: 700; }
.wc2-ans { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; }
.wc2-av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #dfe2ec; font-size: 8px; font-weight: 900; color: #6b6f86; }
.wc2-ans b { font-weight: 800; } .wc2-ans b.up { color: #4b4fd0; }
.wc2-in { display: flex; align-items: center; gap: 6px; margin: 8px; padding: 6px 8px; border-radius: 12px; border: 1px solid #e3e5ee; }
.wc2-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid #e3e5ee; color: #8a5cf0; font-size: 10px; }
.wc2-in i { margin-left: auto; font-style: normal; color: #9aa0b5; }
.wa-cap { padding: 6px 10px 8px; border-top: 1px solid #eceef5; font-size: 11px; font-weight: 700; color: #4b4fd0; text-align: center; }
@media (max-width: 720px) { .wa-body { grid-template-columns: 1fr; gap: 10px; } .wa-arrow { rotate: 90deg; } }
@media (prefers-reduced-motion: reduce) { .wa-ic { animation: none; } }
.wa-focus { top: 58%; height: 37.6%; }
.wa-ic { top: 56.8%; }
.ai3 .ai2-img img { height: 104px; }
.ai3 .ai2-chat { padding-block: 8px; }

/* =====================================================================
   시안 1-11 (시안 1-10 복제 개정판, body.ax1k)
   ===================================================================== */
/* 빛 흐름(02·07·08): 앞머리는 밝고 꼬리는 옅게, 일정 속도로 끊김 없이 */
svg[data-glow="comet"] .fl-l { stroke: color-mix(in srgb, #7c6cff 15%, var(--line)); stroke-width: 1.4; }
svg[data-glow="comet"] .fl-c { fill: none; stroke-linecap: round; stroke-dasharray: calc(var(--l) * 1px) calc((100 - var(--l)) * 1px); animation: fl-comet 6s linear infinite; }
svg[data-glow="comet"] .fl-c3 { stroke-width: 2; opacity: .12; }
svg[data-glow="comet"] .fl-c2 { stroke-width: 2; opacity: .22; }
svg[data-glow="comet"] .fl-c1 { stroke-width: 2.2; opacity: .45; }
@keyframes fl-comet { from { stroke-dashoffset: calc((100 + var(--l)) * 1px); } to { stroke-dashoffset: calc(var(--l) * 1px); } }
@media (prefers-reduced-motion: reduce) { svg[data-glow="comet"] .fl-c { animation: none; display: none; } }

/* 04 맵차트 썸네일: 자르지 않고 전체를 프레임 가운데에 */
.ax1k .m3-tiles .vx-zoom { height: 158px; padding: 10px; display: flex; align-items: center; justify-content: center; }
.ax1k .m3-tiles .vx-zoom img { width: auto !important; height: auto !important; max-width: 100%; max-height: 138px; object-fit: contain; margin: auto; }
.ax1k .m3-tiles .vx-zoom:hover img { transform: none; }

/* 07 권한 3단계 */
.rl2 .rl-h { flex-wrap: wrap; align-items: center; }
.rl-res { display: flex; gap: 4px; margin-left: auto; }
.rl-res li { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.rl2 .rl-head, .rl2 .rl-rows li { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.rl2 .rl-head > span:first-child { grid-column: auto; }
.rl2 .rl-rows li > p b { font-size: 14px; color: var(--c); }
.rl2 .rl-rows li > p small { color: var(--text-2); font-weight: 600; }

/* 06 새 관제 영상: 16:9 전체, 반복 */
.ax1k .vlv4 .vlv-vid { aspect-ratio: 16 / 9; background: #0b1230; }
.ax1k .vlv4 .vlv-vid video { object-fit: contain; }

/* =====================================================================
   시안 1-12 (시안 1-11 복제 개정판, body.ax1l)
   ===================================================================== */
/* 빛 흐름 'spark' (참고 reference/flow.png): 가는 선 위로 밝은 중심 + 은은한 색 번짐, 끝에 작은 연결점 */
svg[data-glow="spark"] .fl-l { stroke: color-mix(in srgb, #8b8fb5 38%, var(--line)); stroke-width: 1.3; }
svg[data-glow="spark"] .fl-port { fill: var(--surface); stroke: color-mix(in srgb, #8b8fb5 55%, var(--line)); stroke-width: 1.3; }
svg[data-glow="spark"] .fl-k { fill: none; stroke-linecap: round; stroke-dasharray: calc(var(--l) * 1px) calc((100 - var(--l)) * 1px); animation: fl-spark 5.2s linear infinite; }
svg[data-glow="spark"] .fl-k-halo { stroke: #a78bfa; stroke-width: 7; opacity: .32; }
svg[data-glow="spark"] .fl-k-mid { stroke: #c4b5fd; stroke-width: 3; opacity: .55; }
svg[data-glow="spark"] .fl-k-core { stroke: #fff; stroke-width: 1.8; opacity: .95; }
[data-theme="dark"] svg[data-glow="spark"] .fl-k-halo { opacity: .45; }
@keyframes fl-spark { from { stroke-dashoffset: calc((100 + var(--l)) * 1px); } to { stroke-dashoffset: calc(var(--l) * 1px); } }
@media (prefers-reduced-motion: reduce) { svg[data-glow="spark"] .fl-k { animation: none; display: none; } }

/* 05 연결 가능한 데이터: 카드 아이콘(작고 절제된 선 아이콘) */
.v5s2 li { grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.v5s2 li svg { grid-row: span 2; width: 26px; height: 26px; padding: 4px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); fill: none; stroke: var(--kicker); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 09 영역 강조: 배경 띠 + 테두리 카드 + 여백으로 구분 (튀는 색 없이) */
.ax1l #c9 { background: linear-gradient(180deg, color-mix(in srgb, #7c6cff 5%, var(--bg)) 0%, var(--bg) 85%); padding-block: clamp(72px, 8vw, 112px); }
.ax1l #c9 .ax1-grid { padding: clamp(24px, 3vw, 40px); border-radius: 28px; border: 1px solid color-mix(in srgb, #7c6cff 22%, var(--line)); background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: 0 30px 60px -40px rgba(60, 40, 160, .35); }
.ax1l #c9 .ax1-num { font-size: clamp(2.6rem, 1.8rem + 2vw, 3.6rem); }
.ax1l #c9 .ax1-txt h3 { font-size: clamp(1.6rem, 1.15rem + 1.2vw, 2.1rem); }

/* =====================================================================
   시안 1-13 (시안 1-12 복제 개정판, body.ax1m)
   ===================================================================== */
/* 빛 흐름 'faint': spark보다 밝기·대비를 낮추고 더 느리게(8초), 선도 옅게 */
svg[data-glow="faint"] .fl-l { stroke: color-mix(in srgb, #8b8fb5 28%, var(--line)); stroke-width: 1.2; }
svg[data-glow="faint"] .fl-port { fill: var(--surface); stroke: color-mix(in srgb, #8b8fb5 40%, var(--line)); stroke-width: 1.2; }
svg[data-glow="faint"] .fl-k { fill: none; stroke-linecap: round; stroke-dasharray: calc(var(--l) * 1px) calc((100 - var(--l)) * 1px); animation: fl-faint 8s linear infinite; }
svg[data-glow="faint"] .fl-k-halo { stroke: #b9a9f5; stroke-width: 6; opacity: .14; }
svg[data-glow="faint"] .fl-k-mid { stroke: #cfc4fb; stroke-width: 2.4; opacity: .26; }
svg[data-glow="faint"] .fl-k-core { stroke: #fff; stroke-width: 1.4; opacity: .55; }
@keyframes fl-faint { from { stroke-dashoffset: calc((100 + var(--l)) * 1px); } to { stroke-dashoffset: calc(var(--l) * 1px); } }
@media (prefers-reduced-motion: reduce) { svg[data-glow="faint"] .fl-k { animation: none; display: none; } }

/* 공통: 프레임 안 이미지 — 자르지 않고 원본 비율 그대로 가운데 */
.ax1m .g5-shots .vx-zoom, .ax1m .wx3-c > .vx-zoom, .ax1m .dsx-grid .vx-zoom { position: relative; display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: #fff; overflow: hidden; box-shadow: none; cursor: zoom-in; }
.ax1m .g5-shots .vx-zoom img, .ax1m .wx3-c > .vx-zoom img, .ax1m .dsx-grid .vx-zoom img { width: auto !important; height: auto !important; max-width: 100%; object-fit: contain; }

/* 04 그리드 이미지 4장 (2×2) */
.g5-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g5-shots li { display: grid; gap: 3px; }
.ax1m .g5-shots .vx-zoom { height: 172px; } .ax1m .g5-shots .vx-zoom img { max-height: 160px; }
.g5-shots b { font-size: 13px; font-weight: 800; padding-left: 2px; } .g5-shots span { font-size: 11.5px; color: var(--text-2); padding-left: 2px; }

/* 04 텍스트·영상 / API: 2×2, 2×1 */
.wx3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wx3-c { display: grid; gap: 3px; align-content: start; }
.wx3-c > b { margin-top: 3px; font-size: 13px; font-weight: 800; } .wx3-c > span { font-size: 11.5px; color: var(--text-2); }
.ax1m .wx3-c > .vx-zoom { height: 176px; } .ax1m .wx3-c > .vx-zoom img { max-height: 164px; }
.ax1m .wx3--2 .wx3-c > .vx-zoom { height: 230px; } .ax1m .wx3--2 .wx3-c > .vx-zoom img { max-height: 218px; }
/* 강조 테두리: 이미지 실제 영역 기준으로 위치 (이미지를 감싼 상자를 이미지 크기에 맞춤) */
.hl-shot { padding: 0 !important; background: #0b1230 !important; }
.ax1m .hl-shot { display: block !important; width: fit-content; margin-inline: auto; }
.ax1m .wx3-c > .hl-shot { height: auto !important; }
.ax1m .hl-shot img { display: block; max-height: 176px; }
.ax1m .wx3--2 .hl-shot img { max-height: 230px; }
.hl-box { position: absolute; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 6px; box-shadow: 0 0 0 3px rgba(124, 108, 255, .35); pointer-events: none; }
.hl-box em { position: absolute; left: 6px; top: -9px; padding: 1px 7px; border-radius: 999px; background: #fff; color: #4b3fc8; font-style: normal; font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
/* 텍스트 예시: 같은 문구, 여러 스타일 */
.tx-box { display: grid; align-content: center; gap: 4px; height: 176px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.tx-box span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.tx-a { font-size: 15px; font-weight: 800; color: var(--text); }
.tx-b { font-family: "Nanum Myeongjo", "Batang", serif; font-size: 14px; color: #6a5cf0; }
.tx-c { font-size: 14px; font-weight: 800; color: transparent; -webkit-text-stroke: 1px #7c6cff; }
.tx-d { font-size: 14px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tx-e { justify-self: start; padding: 2px 8px; border-radius: 6px; background: #1d1f2c; color: #7dfcc6; font-family: var(--mono); font-size: 12px; }
.tx-f { font-size: 12.5px; font-style: italic; color: var(--text-2); letter-spacing: .06em; }
/* 사운드 예시 */
.snd { display: grid; align-content: center; gap: 10px; height: 176px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, #7c6cff 7%, var(--surface)), var(--surface)); }
.snd-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.snd-play { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 10px; padding-left: 2px; }
.snd-top em { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #ff4d8d 12%, var(--surface)); color: #e0266c; font-style: normal; font-size: 10.5px; font-weight: 800; }
.snd-wave { display: flex; align-items: center; gap: 3px; height: 54px; }
.snd-wave i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(#a99dff, #7c6cff); opacity: .8; transform-origin: center; animation: snd-w 1.6s ease-in-out var(--d) infinite alternate; }
@keyframes snd-w { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.snd-cond { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.snd-cond span { padding: 1px 6px; border-radius: 4px; background: var(--surface-2); font-weight: 800; color: var(--text); }
.snd-cond i { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) { .snd-wave i { animation: none; } }

/* 05 데이터셋 만들기: 6방식 3×2 */
.ax1m .ax1-extra { margin-top: 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, #7c6cff 22%, transparent); background: color-mix(in srgb, #7c6cff 6%, var(--surface)); }
.ax1-extra h4 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.ax1-extra p { margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--text-2); }
.dsx { padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.dsx-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .dsx-h b { font-size: 15px; font-weight: 800; } .dsx-h span { font-size: 12px; color: var(--text-2); }
.dsx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dsx-grid li { display: grid; gap: 2px; }
.ax1m .dsx-grid .vx-zoom { height: 118px; padding: 4px; } .ax1m .dsx-grid .vx-zoom img { max-height: 110px; }
.dsx-grid b { margin-top: 4px; font-size: 13px; font-weight: 800; } .dsx-grid span { font-size: 11.5px; color: var(--text-2); }
@media (max-width: 720px) { .g5-shots, .wx3 { grid-template-columns: 1fr; } .dsx-grid { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   시안 1-14 (시안 1-13 복제 개정판, body.ax1n)
   ===================================================================== */
/* ---------- 09: 카드 테두리 없이 섹션 자체로 구분 — 전폭 배경 톤 + 위아래 구분선 + 여백·위계 ---------- */
.ax1n #c9 { position: relative; padding-block: clamp(96px, 10vw, 140px); background:
  radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, #b45cff 9%, transparent), transparent 70%),
  radial-gradient(50% 60% at 10% 80%, color-mix(in srgb, #7c6cff 8%, transparent), transparent 70%),
  color-mix(in srgb, #7c6cff 4%, var(--bg));
  border-top: 1px solid color-mix(in srgb, #7c6cff 18%, var(--line)); border-bottom: 1px solid color-mix(in srgb, #7c6cff 18%, var(--line)); }
.ax1n #c9::before { content: "AI · 새 기능"; position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 5px 14px; border-radius: 999px; background: var(--bg); border: 1px solid color-mix(in srgb, #7c6cff 30%, var(--line)); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--kicker); }
.ax1n #c9 .ax1-grid { padding: 0; border: 0; background: none; box-shadow: none; }
.ax1n #c9 .ax1-num { font-size: clamp(3rem, 2rem + 2.6vw, 4.2rem); }
.ax1n #c9 .ax1-txt h3 { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.4rem); }
.ax1n #c9 .ax-lead { font-size: 16px; }
.ax1n #c9 .ai2-win, .ax1n #c9 .wa { box-shadow: 0 24px 50px -36px rgba(60, 40, 160, .45); }

/* ---------- 04 강조 테두리: 09와 같은 .wa-focus 스타일 ---------- */
.hl2 { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #0b1230; overflow: hidden; box-shadow: none; cursor: zoom-in; }
.hl2 img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hl2 .hl2-box { position: absolute; }

/* ---------- 04 텍스트·영상: 네 칸 모두 같은 16:9 프레임 ---------- */
.wx4-f { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.wx4-f > .vx-zoom:not(.hl2) { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.wx4-f > .vx-zoom:not(.hl2) img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; }
.ax1n .wx4 .wx3-c > b { margin-top: 6px; }
.ax1n .wx4 .snd { height: 100%; border: 0; border-radius: 0; }
.snd-time { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--text-2); font-family: var(--mono); }
.snd-time i { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #7c6cff 38%, var(--line) 38%); }

/* ---------- 04 텍스트 예시: 텍스트 위젯 보드 (배너·공지·숫자·전광판·인용·태그) ---------- */
.txb { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr auto auto; gap: 5px; height: 100%; padding: 6px; background: var(--surface-2); }
.txb > div { border-radius: 8px; overflow: hidden; }
.txb-banner { grid-row: 1 / 3; display: grid; align-content: end; gap: 2px; padding: 9px 10px; background: var(--grad); color: #fff; }
.txb-banner small { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; opacity: .85; }
.txb-banner b { font-size: 14.5px; font-weight: 800; line-height: 1.22; letter-spacing: -.02em; }
.txb-notice { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--line); }
.txb-ic { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #e0f2fe; color: #0369a1; font-size: 9px; font-weight: 900; font-style: italic; font-family: Georgia, serif; }
.txb-notice p { display: grid; font-size: 10px; line-height: 1.25; color: var(--text-2); } .txb-notice b { font-size: 10.5px; color: var(--text); }
.txb-num { display: flex; align-items: baseline; gap: 5px; padding: 5px 8px; background: var(--surface); border: 1px solid var(--line); }
.txb-num b { font-size: 16px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--kicker); } .txb-num span { font-size: 9.5px; color: var(--text-2); }
.txb-ticker { grid-column: 1 / -1; padding: 4px 0; background: #14162a; }
.txb-ticker p { display: flex; width: max-content; animation: txb-run 18s linear infinite; }
.txb-ticker span { padding-right: 0; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #ffd36b; letter-spacing: .02em; }
@keyframes txb-run { to { transform: translateX(-50%); } }
.txb-quote { padding: 4px 8px; background: var(--surface); border: 1px solid var(--line); font-family: "Nanum Myeongjo", "Batang", serif; font-size: 11px; font-style: italic; color: var(--text); white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; }
.txb-tags { display: flex; align-items: center; gap: 3px; padding: 0 2px; background: none; }
.txb-tags i { padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line-strong); font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--text-2); background: var(--surface); }
.txb-tags i.on { background: #1d1f2c; color: #fff; border-color: #1d1f2c; }
@media (prefers-reduced-motion: reduce) { .txb-ticker p { animation: none; } }
/* ---------- 1-14 판단 에이전트 검토 반영 ---------- */
/* 1) 09 가로 정렬: .container 좌우 여백(--gutter) 복구 → 다른 섹션과 같은 세로선 */
.ax1n #c9 .ax1-grid { padding: 0 var(--gutter); }
/* 2) 04 칸 프레임 통일: 모든 칸 흰 프레임 + 이미지는 여백 없이 비율 유지 */
.wx4-f > .vx-zoom:not(.hl2) { padding: 0; }
.hl2 { background: #fff; }
/* 3) 텍스트 보드 가독성: 글자 키우고 공지 카드 여백 정리 */
.txb { grid-template-rows: auto auto auto; align-content: stretch; }
.txb-banner b { font-size: 15px; }
.txb-notice { align-items: center; }
.txb-notice p { font-size: 11.5px; } .txb-notice b { font-size: 12px; }
.txb-num b { font-size: 17px; } .txb-num span { font-size: 11.5px; }
.txb-ticker span { font-size: 12px; }
.txb-tags i { font-size: 11.5px; padding: 2px 7px; }
/* 4) 인용문: 기울인 명조 대신 Pretendard 500 + 보라 따옴표 */
.txb-quote { font-family: var(--font); font-style: normal; font-weight: 500; font-size: 12px; }
.txb-quote .q { color: var(--kicker); font-weight: 800; }
/* 5) 전광판 띠 양끝 페이드 */
.txb-ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* =====================================================================
   시안 1-15 (시안 1-14 복제 개정판, body.ax1o)
   ===================================================================== */
/* 흐르는 효과 'volt': 색 있는 전기 신호 — 선 방향 보라→분홍 그라데이션 신호가 은은한 번짐과 함께 지나감 */
svg[data-glow="volt"] .fl-l { stroke: color-mix(in srgb, #7c6cff 20%, var(--line)); stroke-width: 1.3; }
svg[data-glow="volt"] .fl-port { fill: var(--surface); stroke: color-mix(in srgb, #7c6cff 38%, var(--line)); stroke-width: 1.3; }
svg[data-glow="volt"] .fl-k { fill: none; stroke-linecap: round; stroke-dasharray: calc(var(--l) * 1px) calc((100 - var(--l)) * 1px); animation: fl-volt 7s linear infinite; }
svg[data-glow="volt"] .fl-k-halo { stroke: #9b7bff; stroke-width: 6; opacity: .16; }
svg[data-glow="volt"] .fl-k-mid { stroke-width: 2.6; opacity: .32; }
svg[data-glow="volt"] .fl-k-core { stroke-width: 1.7; opacity: .78; }
@keyframes fl-volt { from { stroke-dashoffset: calc((100 + var(--l)) * 1px); } to { stroke-dashoffset: calc(var(--l) * 1px); } }
@media (prefers-reduced-motion: reduce) { svg[data-glow="volt"] .fl-k { animation: none; display: none; } }

/* 04 텍스트 예시: 같은 문구를 여러 스타일로 (모눈 바탕 위 자막·라벨형 표현) */
.tsb { display: grid; align-content: center; justify-items: center; gap: 2px; height: 100%; padding: 8px 10px; overflow: hidden;
  background-color: #f6f5fb; background-image: linear-gradient(rgba(124, 108, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 108, 255, .07) 1px, transparent 1px); background-size: 14px 14px; }
.ts { margin: 0; white-space: nowrap; line-height: 1.22; letter-spacing: -.02em; text-align: center; }
.ts-1 { font-size: 15px; font-weight: 900; color: #ff6b8b; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(180, 60, 110, .25); }
.ts-2 { font-size: 14px; font-weight: 900; color: #fff; -webkit-text-stroke: 3px #2b2d42; paint-order: stroke fill; }
.ts-2 em { font-style: normal; color: #ffd166; } .ts-2 em.p { color: #ff8fb1; }
.ts-3 { font-size: 13px; font-weight: 300; color: #5b5bd6; letter-spacing: .04em; }
.ts-4 { font-size: 15px; font-weight: 900; color: #8f7bff; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 2px 2px 0 #c9c0ff, 4px 4px 0 rgba(124, 108, 255, .25); }
.ts-5 { display: inline-flex; align-items: stretch; margin-top: 3px; border: 1.5px solid #2b2d42; border-radius: 4px; overflow: hidden; background: #fff; font-size: 11.5px; font-weight: 800; color: #2b2d42; }
.ts-5 .q { display: grid; place-items: center; padding: 1px 6px; background: #7c6cff; color: #fff; font-weight: 900; }
.ts-5 span:last-child { padding: 2px 8px; } .ts-5 b { color: #7c6cff; font-weight: 900; }
.ts-6 span { display: inline-block; margin-top: 3px; padding: 3px 10px; border-radius: 3px; background: #1d1f2c; color: #fff; font-size: 11.5px; font-weight: 700; box-shadow: 3px 3px 0 #b45cff; }
.ts-7 { margin-top: 2px; font-size: 15px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .tsb { background-color: #1a1b2b; }

/* 05 현업 데이터셋 문구: 위쪽 목록(.ax1-pts)과 같은 항목으로 — 별도 카드 없음 */
.ax1o #c5 .ax1-extra { display: none; }

/* =====================================================================
   시안 1-16 (시안 1-15 복제 개정판, body.ax1p)
   ===================================================================== */
/* 흐르는 효과 'orig': 05 원본(.wv) 애니메이션과 같은 선 색·굵기, 점 크기·색·속도 */
svg[data-glow="orig"] .fl-o { fill: none; stroke: #c7d2fe; stroke-width: 1.5; }
[data-theme="dark"] svg[data-glow="orig"] .fl-o { stroke: rgba(199, 210, 254, .35); }

/* 04 텍스트 예시: 같은 문구의 텍스트 콜라주 — 줄 단위 정돈, 가장자리는 살짝 잘림 */
.tw-wall { position: relative; display: grid; align-content: center; gap: 4px; height: 100%; padding: 6px 0; overflow: hidden;
  background-color: #f6f5fb; background-image: linear-gradient(rgba(124, 108, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 108, 255, .07) 1px, transparent 1px); background-size: 14px 14px; }
.tw-r { display: flex; align-items: center; gap: 10px; white-space: nowrap; margin-left: -14px; }
.tw-r:nth-child(even) { margin-left: -46px; }
.tw-r--c { justify-content: flex-start; }
.tw { flex: none; margin: 0; line-height: 1.2; letter-spacing: -.02em; }
.tw-out { font-size: 17px; font-weight: 900; color: #ff6b8b; -webkit-text-stroke: 3.5px #fff; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(180, 60, 110, .22); }
.tw-chip { padding: 2px 8px; border-radius: 999px; background: #e9e5ff; color: #5b4bd6; font-size: 10.5px; font-weight: 800; }
.tw-bub { position: relative; padding: 3px 9px; border-radius: 10px; background: #fff; border: 1px solid #dcd7f5; font-size: 10.5px; font-weight: 700; color: #2b2d42; }
.tw-bub::after { content: ""; position: absolute; left: 12px; bottom: -4px; width: 7px; height: 7px; background: #fff; border-right: 1px solid #dcd7f5; border-bottom: 1px solid #dcd7f5; rotate: 45deg; }
.tw-hl { font-size: 13px; font-weight: 800; color: #2b2d42; }
.tw-hl mark { padding: 0 2px; background: linear-gradient(transparent 55%, #ffe58a 55%); color: inherit; }
.tw-grad { font-size: 16px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tw-thin { font-size: 12.5px; font-weight: 300; color: #5b5bd6; letter-spacing: .06em; }
.tw-r--dark { margin-inline: 0; padding: 3px 0; gap: 18px; background: #16182b; margin-left: -30px; }
.tw-neon { font-size: 12px; font-weight: 800; color: #f5d0ff; text-shadow: 0 0 4px rgba(214, 120, 255, .9), 0 0 10px rgba(180, 92, 255, .6); }
.tw-led { font-family: var(--mono); font-size: 11px; font-weight: 700; color: #7dfcc6; letter-spacing: .08em; }
.tw-lab { display: inline-flex; align-items: stretch; border: 1.5px solid #2b2d42; border-radius: 4px; overflow: hidden; background: #fff; font-size: 10.5px; font-weight: 800; color: #2b2d42; }
.tw-lab span { display: grid; place-items: center; padding: 0 5px; margin-right: 6px; background: #7c6cff; color: #fff; }
.tw-lab b { color: #7c6cff; } .tw-lab { padding-right: 7px; }
.tw-serif { font-family: "Nanum Myeongjo", "Batang", serif; font-size: 12.5px; color: #3d3f5c; }
.tw-under { font-size: 12px; font-weight: 700; color: #2b2d42; text-decoration: underline wavy #ff8fb1; text-underline-offset: 3px; }
.tw-stack { font-size: 16px; font-weight: 900; color: #8f7bff; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 2px 2px 0 #c9c0ff, 4px 4px 0 rgba(124, 108, 255, .22); }
.tw-two { font-size: 13px; font-weight: 900; color: #fff; -webkit-text-stroke: 3px #2b2d42; paint-order: stroke fill; }
.tw-two em { font-style: normal; color: #ffd166; } .tw-two em.p { color: #8fd3ff; }
.tw-vert { position: absolute; right: -2px; top: 6px; writing-mode: vertical-rl; padding: 6px 2px; border-radius: 4px; background: #7c6cff; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; box-shadow: -2px 2px 0 #c9c0ff; }
.tw-stamp { position: absolute; right: 24px; bottom: -10px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 2px dashed #ff6b8b; color: #ff6b8b; rotate: -14deg; background: rgba(255, 255, 255, .7); }
.tw-stamp span { font-size: 8.5px; font-weight: 900; line-height: 1.25; text-align: center; }
[data-theme="dark"] .tw-wall { background-color: #1a1b2b; }

/* =====================================================================
   시안 1-17 (시안 1-16 복제 개정판, body.ax1q)
   ===================================================================== */
/* 04 텍스트: 잘림 없이 칸 안에 — 8줄, 가운데 정렬, 글자 크기 조정 */
.tw2 { align-content: center; justify-items: center; gap: 2px; padding: 6px 8px; }
.tw2-r { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; white-space: nowrap; }
.tw2 .tw-out { font-size: 14px; -webkit-text-stroke: 3px #fff; }
.tw2 .tw-chip, .tw2 .tw-bub { font-size: 9px; padding: 1px 7px; }
.tw2 .tw-bub::after { width: 5px; height: 5px; bottom: -3px; }
.tw2 .tw-hl { font-size: 10.5px; } .tw2 .tw-thin { font-size: 9.5px; }
.tw2 .tw-grad { font-size: 14px; }
.tw2-r--dark { padding: 2px 10px; border-radius: 5px; background: #16182b; gap: 12px; }
.tw2 .tw-neon { font-size: 9.5px; } .tw2 .tw-led { font-size: 9px; letter-spacing: .04em; }
.tw2 .tw-lab { font-size: 9px; } .tw2 .tw-serif { font-size: 10px; }
.tw2 .tw-stack { font-size: 14px; -webkit-text-stroke: 2.5px #fff; }
.tw2 .tw-under { font-size: 9.5px; } .tw2 .tw-two { font-size: 10.5px; -webkit-text-stroke: 2.5px #2b2d42; }

/* 05 연결 가능한 데이터: 같은 크기 카드 2×2, 아이콘·제목·설명 정렬, 위아래 빈 공간 줄임 */
.ax1q .v5row { align-items: stretch; }
.ax1q .v5s2 { display: grid; grid-template-rows: auto 1fr; align-content: stretch; gap: 8px; padding: 12px; }
.ax1q .v5s2 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; height: 100%; }
.ax1q .v5s2 li { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 10px; row-gap: 1px; padding: 10px 12px; border-radius: 10px; }
.ax1q .v5s2 li svg { grid-row: 1 / span 2; align-self: center; width: 30px; height: 30px; padding: 5px; }
.ax1q .v5s2 b { align-self: end; line-height: 1.3; } .ax1q .v5s2 span { align-self: start; line-height: 1.35; }
/* 동기화 흐름 선: 05와 같은 선 (채우기 없음) */
svg[data-glow="sync"] .fl-o { fill: none; stroke: #c7d2fe; stroke-width: 1.5; }
[data-theme="dark"] svg[data-glow="sync"] .fl-o { stroke: rgba(199, 210, 254, .35); }
/* 텍스트 한 줄 추가: 테두리 배지 + 굵은 기울임 */
.tw2 .tw-badge { padding: 1px 8px; border-radius: 999px; border: 1.5px solid #ff8fb1; color: #e0266c; background: #fff; font-size: 9px; font-weight: 800; }
.tw2 .tw-ital { font-size: 10.5px; font-weight: 800; font-style: italic; color: #2dd4bf; -webkit-text-stroke: 2px #fff; paint-order: stroke fill; }
.tw2 { gap: 3px; }

/* =====================================================================
   시안 1-18 (시안 1-17 복제 개정판, body.ax1r)
   ===================================================================== */
/* 흐르는 점: 연한 색·낮은 밝기, 일정 속도 + 양끝 페이드(JS·SVG에서) */
svg[data-glow="calm"] .fl-o { fill: none; stroke: #d6dcfb; stroke-width: 1.4; }
[data-theme="dark"] svg[data-glow="calm"] .fl-o { stroke: rgba(199, 210, 254, .28); }
svg[data-glow="calm"] .fl-cd { fill-opacity: .7; }
.ax1r svg.wv .wv-dot { fill-opacity: .6; }

/* 02 간결한 연결: 줄기 1 + 점선 가로줄 + 짧은 점선 가지 */
.os4 .os4-bus { position: relative; height: 30px; margin-inline: calc(100% / 12); }
.os4-trunk { position: absolute; left: 50%; top: 0; width: 0; height: 14px; border-left: 1.5px solid #c7d2fe; }
.os4-line { position: absolute; left: 0; right: 0; top: 14px; height: 0; border-top: 1.5px dashed #c7d2fe; }
.os4-os li::before { content: ""; position: absolute; left: 50%; top: -16px; height: 15px; border-left: 1.5px dashed #c7d2fe; }
.os4 .os2-os { margin-top: 0; }
.os4-trunk i, .os4-line i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; opacity: 0; }
.os4-trunk i { left: 0; top: 0; background: #a99dff; animation: os4-down 3.2s linear infinite; }
.os4-line i { top: 0; left: 50%; background: #93b4ff; }
.os4-line i.l { animation: os4-left 3.2s linear infinite; }
.os4-line i.r { animation: os4-right 3.2s linear infinite; }
@keyframes os4-down { 0% { top: 0; opacity: 0; } 6% { opacity: .7; } 34% { top: 14px; opacity: .7; } 40%, 100% { top: 14px; opacity: 0; } }
@keyframes os4-left { 0%, 34% { left: 50%; opacity: 0; } 40% { opacity: .7; } 92% { left: 0; opacity: .7; } 100% { left: 0; opacity: 0; } }
@keyframes os4-right { 0%, 34% { left: 50%; opacity: 0; } 40% { opacity: .7; } 92% { left: 100%; opacity: .7; } 100% { left: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .os4-trunk i, .os4-line i { animation: none; } }
.ax1r #c2 .os2-stage { padding-block: 14px 12px; }
.ax1r #c2 .os2-win { width: 34%; }

/* =====================================================================
   시안 1-19 (시안 1-18 복제 개정판, body.ax1s)
   ===================================================================== */
/* 02: 줄기 → 가로줄 → 각 OS 연결 지점 (JS가 실제 위치로 그림) */
.os5 .os5-tree { display: block; width: 100%; height: 34px; overflow: visible; }
.os5 .fl-t { fill: none; stroke: #c7d2fe; stroke-width: 1.4; stroke-dasharray: 3 3; }
.os5 .fl-t:first-of-type { stroke-dasharray: none; }
.os5 .fl-tp { fill: var(--surface); stroke: #c7d2fe; stroke-width: 1.3; }
.os5 .fl-cd { fill-opacity: .75; }
.ax1s .os4-os li::before { display: none; }
[data-theme="dark"] .os5 .fl-t, [data-theme="dark"] .os5 .fl-tp { stroke: rgba(199, 210, 254, .35); }

/* 05: 경유 반응 링 */
.ax1s svg.wv .wv-ring { pointer-events: none; }

/* 03·04 탭 번호: 배경과 글자색이 동시에 바뀌도록(전환 효과 제거 → 순간 어두워짐 없음) */
.ax1s .ax1-step .n { transition: none; }
.os5 .fl-t:first-of-type { stroke-dasharray: 3 3; }

/* =====================================================================
   시안 1-20 (시안 1-19 복제 개정판, body.ax1t)
   ===================================================================== */
/* 09 'AI · 새 기능' 배지: 같은 스타일에서 조금 크게, 옅은 보라 바탕·테두리, 부드러운 그림자 */
.ax1t #c9 { padding-top: clamp(112px, 11vw, 156px); }
.ax1t #c9::before { content: "✦  AI · 새 기능"; padding: 7px 18px; font-size: 12.5px; letter-spacing: .07em;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(100deg, color-mix(in srgb, #7c6cff 55%, transparent), color-mix(in srgb, #ff4d8d 45%, transparent)) border-box;
  border: 1px solid transparent; box-shadow: 0 6px 18px -10px rgba(124, 92, 255, .45); }
.ax1t #c9 .ax1-num { margin-bottom: 12px; }
.ax1t #c9 .ax1-txt .kicker { font-size: 12.5px; }

/* 09 위젯 AI 분석: 설명을 채팅창 밖으로 — 왼쪽 대시보드 캡션과 같은 형식 */
.wa-side { display: grid; gap: 6px; }
.wa-cap2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; font-weight: 700; color: var(--text); }
.ax1t .wa-chat .wa-cap { display: none; }

/* 푸터: 메인 3.2v와 같은 폭(1240px)·같은 인증 로고 */
.ax1t .site-footer .container { --container: 1240px; }
.ax1t .footer-cert img { filter: none; opacity: 1; }
.ax.ax1t .site-footer .container { --container: 1240px; max-width: calc(1240px + var(--gutter) * 2); }

/* =====================================================================
   시안 1-21 (시안 1-20 복제 개정판, body.ax1u) — 04 위젯 12종
   ===================================================================== */
.ax1u .wx4 { row-gap: 10px; }
.wx3-wide { grid-column: 1 / -1; }
.wx4-f--wide { aspect-ratio: 32 / 9; }
/* 도형 */
.shp { display: grid; grid-template-rows: 1fr auto; height: 100%; padding: 4px 12px 8px; background: linear-gradient(180deg, #fbfaff, #f4f2ff); }
.shp svg { width: 100%; height: 100%; }
.shp-t { font-size: 13px; font-weight: 800; } .shp-t.w { fill: #fff; }
.shp-l { font-size: 12px; font-weight: 700; fill: #6b6f86; }
.shp-row { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 10.5px; font-weight: 700; color: #4b4fd0; }
.shp-b { padding: 2px 8px; border: 1.5px solid #7c6cff; border-radius: 3px; color: #4b3fc8; }
.shp-pill { padding: 2px 9px; border-radius: 6px; background: #fff; border: 1px solid #dcd7f5; color: #5a6387; }
.shp-line { width: 40px; height: 0; border-top: 2px dashed #b9b0f5; }
/* 필터 */
.flt { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; height: 100%; padding: 8px; background: var(--surface-2); }
.flt-c { display: grid; grid-template-rows: auto 1fr auto; gap: 4px; padding: 6px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); min-height: 0; }
.flt-in { display: flex; justify-content: space-between; padding: 3px 6px; border-radius: 5px; border: 1px solid #b9b0f5; font-size: 9.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.flt-in span { color: var(--kicker); }
.flt-cal p { font-size: 8.5px; font-weight: 800; color: var(--text-2); margin-bottom: 2px; }
.flt-cal div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.flt-cal i { display: grid; place-items: center; height: 11px; font-style: normal; font-size: 7.5px; color: var(--text-2); border-radius: 2px; }
.flt-cal i.in { background: color-mix(in srgb, #7c6cff 16%, var(--surface)); color: #4b3fc8; }
.flt-cal i.fe { background: #7c6cff; color: #fff; font-weight: 800; }
.flt-list { display: grid; gap: 2px; align-content: start; }
.flt-list li { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--text-2); }
.flt-list li i { width: 9px; height: 9px; border-radius: 2px; border: 1.2px solid var(--line-strong); }
.flt-list li.on { color: var(--text); font-weight: 700; } .flt-list li.on i { background: #7c6cff; border-color: #7c6cff; }
.flt-btn { display: flex; justify-content: flex-end; gap: 4px; font-size: 8.5px; }
.flt-btn span, .flt-btn b { padding: 2px 7px; border-radius: 4px; }
.flt-btn span { background: var(--surface-2); color: var(--text-2); } .flt-btn b { background: #7c6cff; color: #fff; }
/* 팝업 */
.pop { position: relative; height: 100%; padding: 10px 12px; background: var(--surface-2); overflow: hidden; }
.pop-bg { height: 100%; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.pop-bg p { font-size: 9.5px; font-weight: 800; color: var(--text-2); }
.pop-bars { display: flex; align-items: flex-end; gap: 6px; height: calc(100% - 16px); padding-top: 6px; }
.pop-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: color-mix(in srgb, #7c6cff 30%, var(--surface)); }
.pop-bars i.hit { background: linear-gradient(#8b7dff, #6a5cf0); }
.pop::after { content: ""; position: absolute; inset: 0; background: rgba(20, 18, 45, .18); pointer-events: none; }
.pop-win { position: absolute; z-index: 1; right: 12%; top: 18%; width: 46%; padding: 7px 9px; border-radius: 9px; background: #fff; box-shadow: 0 12px 24px -10px rgba(30, 20, 90, .45); border: 1px solid #e3e0f6; color: #1b1d2b; }
.pop-h { display: flex; justify-content: space-between; font-size: 10px; } .pop-h span { color: #8a8fa8; }
.pop-win dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 5px; }
.pop-win dt { font-size: 8px; color: #8a8fa8; } .pop-win dd { font-size: 12px; font-weight: 900; color: #4b3fc8; }
.pop-st { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 8.5px; font-weight: 700; color: #047857; }
.pop-st i { width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
.pop-cur { position: absolute; z-index: 2; left: 46%; top: 54%; width: 16px; height: 16px; }
.pop-cur svg { width: 100%; height: 100%; }
@media (max-width: 720px) { .wx4-f--wide { aspect-ratio: 16 / 9; } }
.pop-cur { left: 47%; top: 76%; }

/* =====================================================================
   시안 1-22 (시안 1-21 복제 개정판, body.ax1v)
   ===================================================================== */
/* 09 하단 AI 연동 카드: 대표 3종 로고 + '그 외 다양한 AI' */
.ail { display: grid; gap: 8px; }
.ail-h { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--text-2); }
.ail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 10px; }
.ail-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 24px -20px rgba(40, 30, 120, .45); }
.ail-lg { width: 34px; height: 34px; justify-self: center; }
.ail-list p { display: grid; gap: 1px; line-height: 1.2; }
.ail-list b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ail-list p span { font-size: 11px; color: var(--text-2); }
.ail-list em { font-style: normal; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, #10b981 12%, var(--surface)); color: #047857; font-size: 10.5px; font-weight: 800; }
[data-theme="dark"] .ail-lg--oa path { fill: #f1f1f4; }
.ail-more { grid-template-columns: 40px minmax(0, 1fr) !important; border-style: dashed !important; border-color: color-mix(in srgb, #7c6cff 35%, var(--line)) !important; background: color-mix(in srgb, #7c6cff 4%, var(--surface)) !important; box-shadow: none !important; }
.ail-plus { position: relative; display: grid; place-items: center; width: 36px; height: 36px; justify-self: center; }
.ail-plus i { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, #7c6cff 45%, transparent); background: var(--surface); }
.ail-plus i:nth-child(1) { left: 0; top: 2px; } .ail-plus i:nth-child(2) { right: 0; top: 2px; } .ail-plus i:nth-child(3) { left: 11px; bottom: 0; }
.ail-plus b { position: relative; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 13px; font-weight: 900; line-height: 1; }
.ail-more b { font-size: 13.5px; }
@media (max-width: 960px) { .ail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 09 'AI · 새 기능' 배지: 조금 더 크게·대비 높이고, 테두리를 따라 은은한 그라데이션이 천천히 흐름 */
.ax1v #c9::before { padding: 9px 22px; font-size: 13.5px; font-weight: 800; color: #5b4bd6; border-width: 1.5px;
  background: linear-gradient(color-mix(in srgb, #7c6cff 6%, var(--bg)), color-mix(in srgb, #7c6cff 6%, var(--bg))) padding-box,
              linear-gradient(90deg, #b9adff, #ff9ec0, #9ac4ff, #b9adff) border-box;
  background-size: 100% 100%, 300% 100%; animation: c9-badge 9s linear infinite; }
@keyframes c9-badge {
  0% { background-position: 0 0, 0% 0; box-shadow: 0 6px 18px -10px rgba(124, 92, 255, .45), 0 0 0 0 rgba(180, 92, 255, .0); }
  50% { box-shadow: 0 6px 18px -10px rgba(124, 92, 255, .45), 0 0 18px 2px rgba(180, 92, 255, .16); }
  100% { background-position: 0 0, 300% 0; box-shadow: 0 6px 18px -10px rgba(124, 92, 255, .45), 0 0 0 0 rgba(180, 92, 255, .0); } }
[data-theme="dark"] .ax1v #c9::before { color: #d8d0ff; }
@media (prefers-reduced-motion: reduce) { .ax1v #c9::before { animation: none; } }

/* =====================================================================
   시안 1-23 (시안 1-22 복제 개정판, body.ax1w)
   ===================================================================== */
/* 09 새 기능 강조: NEW 배지 + 배지에서 양옆으로 이어지는 선을 따라 빛이 바깥으로 흐름 + 배지 뒤 은은한 빛 */
.ax1w #c9::before { content: none; display: none; }
.ax1w #c9 { background:
  radial-gradient(42% 46% at 50% 0%, color-mix(in srgb, #9b7bff 13%, transparent), transparent 70%),
  radial-gradient(60% 70% at 85% 35%, color-mix(in srgb, #b45cff 9%, transparent), transparent 70%),
  radial-gradient(50% 60% at 10% 80%, color-mix(in srgb, #7c6cff 8%, transparent), transparent 70%),
  color-mix(in srgb, #7c6cff 4.5%, var(--bg)); }
.c9b { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; translate: 0 -50%; pointer-events: none; }
.c9b-line { position: relative; flex: 1; height: 1px; overflow: hidden; background: linear-gradient(90deg, transparent, color-mix(in srgb, #7c6cff 30%, var(--line)) 30%); }
.c9b-line.r { background: linear-gradient(90deg, color-mix(in srgb, #7c6cff 30%, var(--line)) 70%, transparent); }
.c9b-line::after { content: ""; position: absolute; top: -1px; width: 22%; height: 3px; border-radius: 3px; opacity: 0; filter: blur(.6px);
  background: linear-gradient(90deg, transparent, rgba(185, 160, 255, .95), rgba(255, 158, 192, .9), transparent); }
.c9b-line.r::after { left: 0; animation: c9-out-r 6s linear infinite; }
.c9b-line.l::after { right: 0; animation: c9-out-l 6s linear infinite; }
@keyframes c9-out-r { 0% { transform: translateX(-30%); opacity: 0; } 8% { opacity: .85; } 80% { opacity: .5; } 100% { transform: translateX(460%); opacity: 0; } }
@keyframes c9-out-l { 0% { transform: translateX(30%); opacity: 0; } 8% { opacity: .85; } 80% { opacity: .5; } 100% { transform: translateX(-460%); opacity: 0; } }
.c9b-badge { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0 14px; padding: 8px 20px 8px 8px; border-radius: 999px; pointer-events: auto;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(90deg, #b9adff, #ff9ec0, #9ac4ff, #b9adff) border-box; background-size: 100% 100%, 300% 100%;
  border: 1.5px solid transparent; box-shadow: 0 10px 28px -12px rgba(124, 92, 255, .5); animation: c9-badge 9s linear infinite; }
.c9b-badge::before { content: ""; position: absolute; inset: -18px -40px; z-index: -1; border-radius: 999px; background: radial-gradient(closest-side, rgba(155, 123, 255, .28), transparent); animation: c9-aura 6s ease-in-out infinite; }
@keyframes c9-aura { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.c9b-badge em { padding: 4px 10px; border-radius: 999px; background: var(--grad); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 900; letter-spacing: .08em; }
.c9b-badge b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.c9b-badge span { padding-left: 10px; border-left: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; color: var(--kicker); }
.ax1w #c9 { padding-top: clamp(120px, 12vw, 168px); }
@media (prefers-reduced-motion: reduce) { .c9b-line::after, .c9b-badge, .c9b-badge::before { animation: none; } }
@media (max-width: 640px) { .c9b-badge { padding: 6px 14px 6px 6px; gap: 7px; } .c9b-badge b { font-size: 13px; } .c9b-badge span { font-size: 11.5px; } }

/* =====================================================================
   시안 1-24 (시안 1-23 복제 개정판, body.ax1x)
   ===================================================================== */
/* Why BIX5 1~9 바로가기: 아이콘 + 번호 + 제목, 버튼임이 보이게 */
.ax1-index--ic { gap: 8px; margin-top: 8px; }
.ax1-index--ic a { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 6px; align-items: center; min-height: 92px; padding: 12px 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 6px 16px -14px rgba(40, 30, 120, .5); cursor: pointer; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.ax1-index--ic .ix-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, #7c6cff 10%, var(--surface)); transition: background .2s; }
.ax1-index--ic .ix-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--kicker); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax1-index--ic span { margin: 0; justify-self: end; align-self: start; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.ax1-index--ic b { grid-column: 1 / -1; font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--text); padding-right: 14px; }
.ax1-index--ic em { position: absolute; right: 11px; bottom: 12px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--text-2); transition: transform .25s var(--ease), color .2s; }
.ax1-index--ic a:hover, .ax1-index--ic a:focus-visible { border-color: #a99dff; transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(91, 75, 214, .55); }
.ax1-index--ic a:hover .ix-ic { background: var(--grad); } .ax1-index--ic a:hover .ix-ic svg { stroke: #fff; }
.ax1-index--ic a:hover em { color: var(--kicker); transform: translateX(3px); }
.ax1-index--ic a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ax1-index--ic li:last-child a { border-color: color-mix(in srgb, #7c6cff 35%, var(--line)); background: color-mix(in srgb, #7c6cff 5%, var(--surface)); }

/* 09 배지·테두리·선 강조 한 단계 + 반짝이며 흐르는 빛 */
.ax1x .c9b-badge { border-width: 2px; box-shadow: 0 12px 30px -12px rgba(124, 92, 255, .6), 0 0 0 4px color-mix(in srgb, #7c6cff 7%, transparent); overflow: hidden; }
.ax1x .c9b-badge::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: c9-glint 6s ease-in-out infinite; pointer-events: none; }
@keyframes c9-glint { 0%, 60% { left: -40%; } 85%, 100% { left: 130%; } }
.ax1x .c9b-badge { isolation: isolate; }
.ax1x .c9b-badge::before { inset: -22px -46px; background: radial-gradient(closest-side, rgba(155, 123, 255, .34), transparent); }
.ax1x .c9b { overflow: visible; }
.ax1x .c9b-line { height: 1.5px; background: linear-gradient(90deg, transparent, color-mix(in srgb, #7c6cff 45%, var(--line)) 30%); }
.ax1x .c9b-line.r { background: linear-gradient(90deg, color-mix(in srgb, #7c6cff 45%, var(--line)) 70%, transparent); }
.ax1x .c9b-line::after { height: 3.5px; top: -1px; filter: blur(.4px); box-shadow: 0 0 8px rgba(180, 140, 255, .55); }
.ax1x .c9b-line.r::after { animation-duration: 5s; } .ax1x .c9b-line.l::after { animation-duration: 5s; }
.ax1x .c9b-line::before { content: ""; position: absolute; top: -1px; width: 6%; height: 3.5px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 210, 230, .9), transparent); opacity: 0; }
.ax1x .c9b-line.r::before { left: 0; animation: c9-out-r 5s linear 2.5s infinite; }
.ax1x .c9b-line.l::before { right: 0; animation: c9-out-l 5s linear 2.5s infinite; }
@media (prefers-reduced-motion: reduce) { .ax1x .c9b-badge::after, .ax1x .c9b-line::before { animation: none; } }

/* =====================================================================
   시안 1-25 (시안 1-24 복제 개정판, body.ax1y)
   ===================================================================== */
/* Why BIX5 1~9: 간결한 카드 — 큰 번호 + 제목, 아이콘은 작고 옅게, 화살표·아이콘 상자 제거 */
.ax1y .ax1-index--ic { gap: 8px; }
.ax1y .ax1-index--ic a { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 4px; min-height: 0; padding: 12px 14px 13px; border-radius: 12px; box-shadow: none; background: var(--surface); }
.ax1y .ax1-index--ic span { grid-column: 1; grid-row: 1; justify-self: start; font-family: var(--font); font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #4f46c8; font-variant-numeric: tabular-nums; }
.ax1y .ax1-index--ic .ix-ic { grid-column: 2; grid-row: 1; width: auto; height: auto; background: none; }
.ax1y .ax1-index--ic .ix-ic svg { width: 16px; height: 16px; stroke: color-mix(in srgb, var(--text-2) 70%, transparent); stroke-width: 1.7; }
.ax1y .ax1-index--ic b { grid-row: 2; padding-right: 0; font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax1y .ax1-index--ic em { display: none; }
.ax1y .ax1-index--ic a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.ax1y .ax1-index--ic a:hover, .ax1y .ax1-index--ic a:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, #7c6cff 45%, var(--line)); box-shadow: 0 10px 22px -16px rgba(91, 75, 214, .5); }
.ax1y .ax1-index--ic a:hover::after { transform: scaleX(1); }
.ax1y .ax1-index--ic a:hover .ix-ic { background: none; } .ax1y .ax1-index--ic a:hover .ix-ic svg { stroke: var(--kicker); }
.ax1y .ax1-index--ic li:last-child a { background: var(--surface); border-color: color-mix(in srgb, #7c6cff 35%, var(--line)); }
[data-theme="dark"] .ax1y .ax1-index--ic span { color: #b9b0ff; }

/* 09 구분선: 섹션 위 경계선 하나가 배지 뒤로 끊김 없이 이어지고, 빛은 그 선 위를 흐름 */
.ax1y .c9b-line, .ax1y .c9b-line.r { background: none; height: 3px; }
.ax1y .c9b-badge { margin: 0; }
.ax1y #c9 { border-top: 1px solid color-mix(in srgb, #7c6cff 32%, var(--line)); }

/* 09 대표 연동 예시: 4칸이 좁아지는 폭(약 961~1440px)에서 이름이 '연동' 배지와 겹치던 것 → 2칸, 넓은 화면은 여백만 줄임 */
.ail-list li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; padding: 14px 12px; }
.ail-more { grid-template-columns: 36px minmax(0, 1fr) !important; }
@media (max-width: 1440px) { .ail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 02 기기 그림: 2단 배치에서 오른쪽 칸이 좁아지는 폭(961~1280px)에 PC·태블릿·폰이 오른쪽 '모든 브라우저·스마트TV' 목록을 덮던 것 → 목록을 기기 아래 2칸으로 */
@media (min-width: 961px) and (max-width: 1280px) {
  .vd5 { grid-template-columns: minmax(0, 1fr); }
  .vd5 .vd4-list { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) { .ail-list { grid-template-columns: minmax(0, 1fr); } }

/* 05 데이터 연동: 961~1280px에서 '연결 가능한 데이터' 카드가 좁아 글자가 한두 단어씩 끊기던 것 → 연결 그림 아래로 */
@media (min-width: 961px) and (max-width: 1280px) {
  body.page-about .v5row { grid-template-columns: minmax(0, 1fr); }
  body.page-about .v5s ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 소개 히어로 제목(3줄: 쉽고 빠르게 만들고, / 자유롭게 확장하는 / 범용 대시보드, BIX5) — 두 단 구간에서 줄이 더 끊기지 않게 */
.ab-hero h1 { word-break: keep-all; }
@media (min-width: 961px) { .ab-hero h1 { font-size: clamp(2.3rem, 3.6vw + 2px, 4rem); } }
.ab-hero .lead { word-break: keep-all; text-wrap: pretty; }