/* 소개 페이지 전용 (about.html에서 직접 link) */
/* 상단(히어로) 오른쪽: 브로슈어 대시보드 4장 — 라벨 탭 + 진행 막대, 막대가 다 차면 다음 화면 (ab-hero.js) */
.ab-hero-tabs { --aht-dur: 2s; margin: 0; }
.aht-stage { position: relative; aspect-ratio: 1920 / 949; overflow: hidden; border-radius: calc(var(--r-lg) - 8px); background: #0b1230; }
.aht-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: 0; transform: scale(1.02); transition: opacity .7s ease, transform 1.2s ease; }
.aht-img.is-on { opacity: 1; transform: none; }
.aht-bar { display: flex; align-items: stretch; gap: 8px; padding: 10px 2px 2px; }
.aht-tabs { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aht-tab { position: relative; display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 12px 4px 4px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; transition: color .2s; }
.aht-tab:hover, .aht-tab.is-on { color: var(--text); }
.aht-n { font-family: var(--mono, monospace); font-size: 11px; color: var(--text-2); }
.aht-tab.is-on .aht-n { color: var(--accent); }
.aht-prog { position: absolute; left: 4px; right: 4px; top: 0; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; }
.aht-prog i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad, var(--accent)); }
.aht-tab.is-on .aht-prog i { animation: aht-fill var(--aht-dur) linear forwards; }
@keyframes aht-fill { to { transform: scaleX(1); } }
.ab-hero-tabs.is-held .aht-tab.is-on .aht-prog i, .ab-hero-tabs.is-stopped .aht-tab.is-on .aht-prog i { animation-play-state: paused; }
.aht-pause { position: relative; flex: none; align-self: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; }
.aht-pause span::before, .aht-pause span::after { content: ""; position: absolute; top: 9px; width: 2px; height: 8px; background: var(--text-2); }
.aht-pause span::before { left: 10px; } .aht-pause span::after { left: 14px; }
.aht-pause[aria-pressed="true"] span::before { left: 11px; width: 0; height: 0; background: none; border-left: 7px solid var(--text-2); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.aht-pause[aria-pressed="true"] span::after { display: none; }
.aht-tab:focus-visible, .aht-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 560px) { .aht-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4px; } .aht-tab { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .aht-img { transition: none; transform: none; } .aht-tab.is-on .aht-prog i { animation: none; transform: scaleX(1); } }

/* 본문 01~09: 1단 — 카드 안에서 글이 위, 그림이 아래 (예전 bix5.net/about처럼) */
.page-about .ab-wrap .ab-cat { grid-template-columns: minmax(0, 1fr); }
.page-about .ab-wrap .ab-art { order: 0; }
/* 1단에서 그림이 너무 넓고 높아지지 않게: 그림 영역 최대 960px 가운데, 4:3 그림은 16:9로 */
.page-about .ab-wrap .ab-art > * { width: 100%; max-width: 960px; margin-inline: auto; }
.page-about .ap-out .viz { aspect-ratio: 3.4; }

/* 본문 01~08: 예전 소개 페이지 문장을 줄이지 않고 그대로 — 여러 문단·하위 목록 */
.page-about .ab-pts .ab-desc { display: grid; gap: 6px; color: color-mix(in srgb, var(--text) 75%, var(--bg)); }
.page-about .ab-pts .ab-desc p { margin: 0; }
.page-about .ab-pts .ab-sub-t { margin-top: 6px; font-weight: 700; color: var(--text); }
.page-about .ab-pts .ab-sub { display: grid; gap: 3px; margin: 0; padding-left: 1.3em; list-style: disc; }
.page-about .ab-pts .ab-sub--ol { list-style: decimal; }
.page-about .ab-pts .ab-sub li { display: list-item; padding: 0; border: 0; font-size: inherit; line-height: 1.6; }
.page-about .ab-pts .ab-sub li::marker { color: var(--accent); }
.page-about .ab-pts .ab-sub strong { color: var(--text); font-weight: 600; }

/* 소항목: 왼쪽 제목 | 오른쪽 내용 → 전통적인 방식으로 제목 아래에 내용 */
.page-about .ab-wrap .ab-pts > li, .page-about.about--wide .ab--side .ab-pts > li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
.page-about .ab-pts > li > b { font-size: var(--fs-md, 16px); line-height: 1.45; }
.page-about .ab-pts > li > .ab-desc { padding-left: 14px; }

/* 04 풍부한 위젯 그림: 차트 14종 + 38종 칸을 5열 x 3줄로, 칸 높이는 낮게 */
.page-about .art-widgets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.page-about .art-widgets .awg { padding: 8px; gap: 2px; }
.page-about .art-widgets .viz { aspect-ratio: 16 / 9; }
.page-about .art-widgets .awg--sum b { font-size: clamp(1.6rem, 1rem + 4cqi, 2.4rem); }
@media (max-width: 720px) { .page-about .art-widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 05 데이터 연동 그림: 메인 'Why BIX5 — 어떤 시스템과도 안전하게' SVG를 그대로 사용 (스타일은 v31.css의 .wv-*) */
.page-about .ab-wv { box-sizing: border-box; width: 100%; max-width: none; margin-inline: auto; padding: 14px 10px; border-radius: 16px; border: 1px solid rgba(124, 92, 255, .14); background: linear-gradient(160deg, #f1fdf8 0%, #f2f4ff 55%, #f6f2ff 100%); }
.page-about .ab-wv .wv { width: 100%; height: 250px; aspect-ratio: auto; }
/* 05 그림 영역(ab-art) 전체 높이 약 420px: 바깥 여백 20 + 흰 카드 여백 10 + 그림 상자(250+16) + 숫자 칸 */
/* 그림은 보조 수단 — 한 화면을 차지하지 않게 모든 항목의 그림 영역 여백을 줄임 (목표 높이 약 420px 안팎) */
.page-about .ab-wrap .ab-art { padding: 20px; gap: 10px; }
.page-about .ab-wrap .ab-fig { padding: 12px; }
.page-about #ab-5 .ab-fig { padding: 10px; }
.page-about #ab-5 .ab-wv { padding: 8px 10px; }
@media (max-width: 760px) { .page-about .ab-wv .wv { height: auto; aspect-ratio: 326 / 168; } }
.page-about .ab-wv .wv-badge { opacity: 1; transform: none; }
[data-theme="dark"] .page-about .ab-wv { background: linear-gradient(160deg, rgba(124, 92, 255, .14), rgba(79, 139, 255, .08) 60%, rgba(45, 212, 191, .08)); border-color: rgba(255, 255, 255, .1); }

/* 06 빅데이터 그림: 숫자 칸 3열에 맞춰 실시간 차트 2칸 | 이퀄라이저 1칸, 높이 줄임 */
.page-about .art-live { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; align-items: stretch; } /* 위 숫자 칸 3개(.al-kpis, gap 8px)와 세로줄 맞춤 */
.page-about .art-live .al-top, .page-about .art-live .al-kpis { grid-column: 1 / -1; }
.page-about .ab-fig .art-live .al-chart { grid-column: span 2; width: 100%; min-width: 0; align-self: start; aspect-ratio: 3; }
.page-about .ab-fig .art-live .al-eq { aspect-ratio: auto; height: 100%; min-height: 0; padding: 8px; border-radius: 12px; background: var(--surface-2); }
@media (max-width: 560px) { .page-about .art-live { grid-template-columns: minmax(0, 1fr); } .page-about .ab-fig .art-live .al-chart { grid-column: auto; } .page-about .ab-fig .art-live .al-eq { aspect-ratio: 5; height: auto; } }

/* 08 분석 연결 그림: 컴팩트하게 */
.page-about .art-pipe { padding-block: 6px; gap: 10px; }
.page-about .art-pipe .ap-src { gap: 4px; }
.page-about .art-pipe .ap-out { padding: 8px; }

/* 09 AI 그림: 기능별 결과 3장 (질문 → BIX5 결과) */
.page-about .art-ai3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.page-about .aa3 { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.page-about .aa3 figcaption { display: grid; gap: 6px; }
.page-about .aa3-k { font-size: 12px; font-weight: 800; color: var(--accent); }
.page-about .aa3-q { justify-self: end; max-width: 100%; padding: 8px 11px; border-radius: 12px 12px 3px 12px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; line-height: 1.5; }
.page-about .aa3-q--note { justify-self: stretch; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.page-about .aa3 img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; margin-top: auto; object-fit: cover; border-radius: 10px; background: #fff; }
.page-about .aa3-ai { grid-column: 1 / -1; }
@media (max-width: 720px) { .page-about .art-ai3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 그림 영역 컴팩트 (항목별) ---------- */
.page-about .ab-wrap .ab-facts li { padding: 10px 14px; }
/* 02 HTML5 */
.page-about #ab-2 .aw-body { padding: 18px 16px; }
.page-about #ab-2 .aw-body b { font-size: clamp(2.4rem, 1rem + 6cqi, 3.6rem); }
.page-about #ab-2 .aw-row { margin-top: 10px; }
.page-about #ab-2 .devices { zoom: .75; }
/* 04 위젯: 차트 칸 낮게 */
.page-about .art-widgets .viz { aspect-ratio: 2.9; }
.page-about .art-widgets { gap: 6px; }
/* 06 빅데이터 */
.page-about .art-live .al-kpis div { padding: 7px 12px; }
.page-about .ab-fig .art-live .al-chart { aspect-ratio: 3.8; }
/* 07 맞춤 기능: 알림 3개를 가로로 */
@media (min-width: 900px) { .page-about .ao-toasts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-about .ao-toasts li { padding: 10px 12px; } }
/* 09 AI: 결과 이미지 낮게 */
.page-about .aa3 img { aspect-ratio: 16 / 10; }
.page-about .aa3 { padding: 8px; gap: 6px; }
/* 06: 실시간 차트 끝 동그라미가 상자 밖으로 나가지 않게 안쪽 여백, 이퀄라이저는 차트 높이에 맞춰 채움 */
.page-about .ab-fig .art-live .al-chart { box-sizing: border-box; padding: 6px 8px 0 4px; }
.page-about .ab-fig .art-live .al-eq { position: relative; }
.page-about .ab-fig .art-live .al-eq svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
@media (max-width: 560px) { .page-about .ab-fig .art-live .al-eq svg { position: static; width: 100%; height: 100%; } }