/* 비주얼 부품 — 픽토그램 카드 · 제품 화면 목업 · 숫자 타일 · 브랜드색 띠 · 비용 막대.
   site.css 뒤에 읽는다. 외부 이미지 없이 SVG 스프라이트(/assets/pictograms.svg)와 CSS 로 그린다. */

/* ---------- 픽토그램 카드 ---------- */
.picto{width:84px; height:84px; display:block; margin-bottom:20px; color:var(--ink)}
.card.illus{padding-top:28px}
.card.illus .num{margin-bottom:8px}

/* ---------- 색조 섹션 · 브랜드 띠 ---------- */
.sec.tint{background:linear-gradient(180deg, var(--brand-soft), transparent 80%)}
.band{background:var(--navy); color:var(--ivory); padding:84px 0}
.theme-airflox .zero b{color:var(--orange)}
.theme-airpath .zero b{color:var(--gold)}
.band .eyebrow{color:inherit; opacity:.72}
.band h2{color:inherit}
.band .lede{color:inherit; opacity:.85}
.band .muted{color:inherit; opacity:.62}
.zeros{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px}
@media(max-width:900px){ .zeros{grid-template-columns:repeat(2,1fr)} }
.zero{border-left:1px solid rgba(251,249,241,.3); padding-left:20px}
.zero b{display:block; font-family:var(--display); font-size:4.4rem; font-weight:400; line-height:.95; color:inherit; letter-spacing:-.04em}
.zero b small{font-family:var(--sans); font-size:1.05rem; font-weight:600; margin-left:6px; letter-spacing:0}
.zero span{display:block; color:inherit; opacity:.92; font-size:1rem; font-weight:600; margin-top:12px}
.zero em{display:block; font-style:normal; color:inherit; opacity:.65; font-size:.84rem; margin-top:4px; line-height:1.5}

/* ---------- 제품 화면 목업 ---------- */
.mocks{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px}
@media(max-width:960px){ .mocks{grid-template-columns:1fr} }
.mock{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 24px 50px -30px rgba(32,44,57,.3)}
.mock .chrome{height:36px; background:var(--bg-2); display:flex; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid var(--line)}
.mock .chrome i{width:10px; height:10px; border-radius:50%; background:var(--line-strong); display:inline-block}
.mock .chrome b{margin-left:10px; font-size:.78rem; color:var(--ink-2); font-weight:600}
.mock .screen{padding:18px; min-height:196px; background:#FBF9F1; position:relative}
.mock .cap{padding:16px 18px 18px; border-top:1px solid var(--line)}
.mock .cap b{display:block; color:var(--ink); font-weight:650; margin-bottom:4px}
.mock .cap span{color:var(--ink-2); font-size:.9rem; line-height:1.6}
.step{position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; background:var(--brand-fill); color:var(--on-brand); font-size:.78rem; font-weight:700; display:grid; place-items:center; font-family:var(--display)}

/* 우클릭 메뉴 */
.menu{list-style:none; margin:10px 0 0 24px; padding:6px 0; width:72%; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 14px 30px -14px rgba(32,44,57,.35); font-size:.84rem}
.menu li{padding:7px 14px; color:var(--ink-2)}
.menu li.hl{background:var(--brand-soft); color:var(--ink); font-weight:700; display:flex; gap:8px; align-items:center}
.menu li.hl i{width:14px; height:14px; border-radius:4px; background:var(--brand-fill); display:inline-block; flex:none}
.menu li.sep{height:1px; padding:0; margin:5px 0; background:var(--line)}
.menu li.dim{color:var(--ink-3)}
.file{display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--ink-2)}
.file i{width:16px; height:20px; border:1.5px solid var(--ink-3); border-radius:3px; display:inline-block}

/* 앱 창 */
.win{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 10px 24px -14px rgba(32,44,57,.3)}
.win .title{display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--bg); border-bottom:1px solid var(--line); font-size:.82rem; font-weight:600}
.win .title .dots{display:flex; gap:4px; margin-left:auto}
.win .title .dots i{width:8px; height:8px; border-radius:50%; background:var(--line-strong)}
.tag-enclave{background:var(--brand-fill); color:var(--on-brand); font-size:.66rem; padding:2px 7px; border-radius:5px; letter-spacing:.05em; font-weight:700}
.lines{padding:14px 14px 10px}
.lines i{display:block; height:7px; border-radius:4px; background:var(--bg-2); margin:0 0 9px}
.lines i.w1{width:88%} .lines i.w2{width:64%} .lines i.w3{width:76%} .lines i.w4{width:52%} .lines i.w5{width:70%}
.capture{position:absolute; right:18px; bottom:18px; display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:.74rem; color:var(--ink-2); box-shadow:0 8px 18px -10px rgba(32,44,57,.3)}
.capture i{width:8px; height:8px; border-radius:50%; background:var(--alt); display:inline-block}

/* 관리 콘솔 */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 10px}
.kpi b{display:block; font-family:var(--display); font-size:1.35rem; line-height:1.05; color:var(--ink)}
.kpi span{font-size:.66rem; color:var(--ink-3); display:block; margin-top:3px}
.minibars{display:flex; align-items:flex-end; gap:4px; height:54px; padding:8px 10px 0; background:#fff; border:1px solid var(--line); border-radius:8px}
.minibars i{flex:1; background:var(--brand-fill); border-radius:3px 3px 0 0; opacity:.85; display:block}
.evt{margin-top:8px; font-size:.72rem; color:var(--ink-2); display:flex; gap:8px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px 10px}
.evt i{width:7px; height:7px; border-radius:50%; background:var(--alt); display:inline-block; flex:none}

/* ---------- 숫자 타일 ---------- */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:22px}
@media(max-width:900px){ .tiles{grid-template-columns:1fr} }
.tile{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 26px; display:flex; gap:22px; align-items:center}
.tile .viz{flex:none; width:88px; height:88px}
.tile b{display:block; font-family:var(--display); font-size:2.3rem; font-weight:400; line-height:1.05; letter-spacing:-.03em}
.tile b small{font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--ink-2); margin-left:4px}
.tile span{display:block; color:var(--ink-2); font-size:.9rem; margin-top:7px; line-height:1.55}
.tile .dots{display:flex; gap:5px; margin-top:10px}
.tile .dots i{width:11px; height:11px; border-radius:50%; background:var(--brand-fill); display:inline-block}

/* ---------- 비용 막대 (AIRFLOX) ---------- */
.years{display:flex; gap:6px; margin-top:16px}
.years i{flex:1; height:36px; border-radius:7px; background:var(--alt); display:grid; place-items:center; color:#fff; font-size:.74rem; font-weight:700; font-style:normal}
.years i.one{background:var(--brand-fill); color:var(--on-brand)}
.years i.dim{background:var(--bg-2); color:var(--ink-3)}
.years-cap{display:flex; justify-content:space-between; font-size:.76rem; color:var(--ink-3); margin-top:6px}

/* ---------- 큰 수치 띠 (AIRFLOX) ---------- */
.ratio-band{display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center}
@media(max-width:760px){ .ratio-band{grid-template-columns:1fr} }
.ratio-band .big{font-family:var(--display); font-size:clamp(5rem,12vw,9rem); line-height:.9; letter-spacing:-.05em; color:#fff}
.ratio-band .big small{font-family:var(--sans); font-size:1.4rem; font-weight:600; margin-left:8px; letter-spacing:0}
.compare{display:grid; gap:10px}
.compare .row{display:grid; grid-template-columns:90px 1fr 70px; align-items:center; gap:12px; font-size:.9rem; color:rgba(255,255,255,.9)}
.compare .row i{display:block; height:14px; border-radius:7px; background:rgba(255,255,255,.95)}
.compare .row i.lo{background:rgba(255,255,255,.35)}
.compare .row b{font-family:var(--display); font-size:1.15rem; font-weight:400; text-align:right}