/* ===== product pages (qbox, check-ro, dfms, tito, coco, osm) ===== */
.phero{padding-block:clamp(40px,6vw,80px) clamp(40px,5vw,64px);background:linear-gradient(#fff,var(--surface-2))}
.phero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.phero__text{display:grid;gap:18px;justify-items:start}
.phero__text h1{font-size:clamp(34px,4.4vw,60px)}
.phero__text h1 small{display:block;font-size:.42em;font-weight:700;color:var(--ink-2);margin-bottom:8px;letter-spacing:0}
.phero__text .lead{font-size:clamp(16px,1.35vw,18px);color:var(--ink-2)}
.phero__media{position:relative}
.phero__media .monitor{width:100%}
.phero__media .phone{position:absolute;right:-4%;bottom:-6%;width:24%;max-width:none}
.phero__media .phone+.phone{right:16%;bottom:-2%}
@media (max-width:900px){.phero__grid{grid-template-columns:1fr}.phero__media{margin-top:12px}.phero__media .phone{width:28%}}
.crumb{display:flex;gap:8px;font-size:13px;color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}

.keypoints{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kp{display:grid;gap:12px}
.kp__media{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;aspect-ratio:1/.72}
.kp__media img{width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:900px){.keypoints{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.keypoints{grid-template-columns:1fr}}

.pipeline{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.pipeline li{position:relative;display:grid;gap:8px;justify-items:center;text-align:center;padding:16px 8px;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:13px;font-weight:600}
.pipeline li img{width:44px;height:44px;object-fit:contain}
.pipeline li:not(:last-child)::after{content:"▶";position:absolute;right:-11px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--ink-3)}
@media (max-width:900px){.pipeline{grid-template-columns:repeat(4,1fr)}.pipeline li::after{display:none}}
@media (max-width:560px){.pipeline{grid-template-columns:repeat(2,1fr)}}

.hexes{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.effects{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.effects{grid-template-columns:1fr}}

.tech{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px) minmax(0,1fr);gap:22px;align-items:center}
.tech__col{display:grid;gap:14px}
.tech__item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:14px;color:var(--ink-2)}
.tech__item .circ{width:68px;height:68px;flex:none;font-family:var(--font-kr);font-size:12px;font-weight:800;line-height:1.2;text-align:center;padding:4px}
.tech__col--r .tech__item{grid-template-columns:auto 1fr}
.tech__center{width:100%;min-width:0;display:grid;gap:8px;justify-items:stretch;text-align:center;font-weight:700;font-size:14px}
.tech__center img{width:100%;border-radius:12px;box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
@media (max-width:900px){.tech{grid-template-columns:1fr}.tech__center{margin-inline:auto}}

.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.roadmap li{padding:20px;border-radius:16px;background:var(--surface-2);display:grid;gap:6px}
.roadmap li b{font-family:var(--font-en);font-size:13px;letter-spacing:.08em;color:var(--ink-3)}
.roadmap li.is-now{background:var(--atb-lime)}
.roadmap li.is-now b{color:var(--lime-ink)}
.roadmap li.is-now b::before{content:"NOW · "}
.roadmap li.is-done{background:var(--atb-blue-grad);color:#fff}
.roadmap li.is-done b{color:rgba(255,255,255,.7)}
.roadmap li.is-done b::before{content:"DONE · "}
@media (max-width:640px){.roadmap{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery figure{margin:0;display:grid;gap:8px}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.gallery figcaption{font-size:13px;color:var(--ink-2);line-height:1.5}
.section--dark .gallery figcaption{color:rgba(255,255,255,.7)}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}

.phones{display:flex;gap:16px;flex-wrap:wrap}
.phones .phone{width:160px}

.numbered{display:grid;gap:14px;counter-reset:n}
.numbered li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:15px}
.numbered li::before{counter-increment:n;content:counter(n);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--atb-lime);color:var(--lime-ink);font-family:var(--font-en);font-weight:800}

.cta-band{background:var(--atb-blue-grad);color:#fff;padding-block:clamp(48px,6vw,80px)}
.cta-band__in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(26px,3vw,40px)}
.cta-band p{color:rgba(255,255,255,.8);margin-top:6px}
.cta-band .btn--outline{border-color:#fff;color:#fff}

/* ===== 제품 미니 씬 (js/product-scenes.js) ===== */
.monitor{position:relative}
.scene{position:absolute;left:10px;right:10px;top:10px;bottom:24px;border-radius:8px;overflow:hidden;pointer-events:none;font-family:var(--font-kr)}
.scene__chip{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:var(--pill);background:rgba(11,15,30,.82);color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(4px)}
.scene__chip b{color:var(--atb-lime);font-family:var(--font-en)}
.scene__chip--kpi{left:auto;right:12px}
/* qbox */
.scene__stack{position:absolute;left:12px;top:12px;display:grid;gap:6px;width:min(52%,250px)}
.scene__toast{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:700;box-shadow:0 10px 24px -10px rgba(0,0,0,.35)}
.scene__toast b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--atb-lime);color:var(--lime-ink);font-size:11px;flex:none}
.scene__bar{position:absolute;left:12px;width:min(56%,300px);bottom:12px;padding:8px 12px;border-radius:10px;background:rgba(11,15,30,.82);color:#fff;font-size:12px;font-weight:600}
.scene__bar i{display:block;margin-top:6px;height:5px;border-radius:3px;background:var(--atb-lime);transform:scaleX(0);transform-origin:0 50%}
.pipeline{position:relative}
.pipeline__dot{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--atb-lime);box-shadow:0 0 0 4px rgba(224,255,64,.35);pointer-events:none}
.pipeline li{transition:background .3s,border-color .3s,transform .3s}
.pipeline li.is-on{background:var(--atb-lime);border-color:var(--atb-lime);transform:translateY(-3px)}
/* keypoints highlight */
.kp{transition:transform .35s var(--ease-out)}
.kp .kp__media{transition:box-shadow .35s}
.kp.is-active{transform:translateY(-6px)}
.kp.is-active .kp__media{box-shadow:0 0 0 3px var(--atb-lime),0 20px 40px -20px rgba(0,0,0,.35)}
/* check-ro */
.scene__canvas{position:absolute;inset:0;width:100%;height:100%}
.tech__item{transition:box-shadow .35s,transform .35s}
.tech__item.is-on{box-shadow:0 0 0 3px var(--atb-lime);transform:translateY(-3px)}
/* dfms */
.scene__svg{position:absolute;inset:0;width:100%;height:100%}
/* tito */
.scene__panel{position:absolute;left:12px;top:12px;width:min(56%,250px);display:grid;gap:6px;padding:10px;border-radius:12px;background:rgba(11,15,30,.86);color:#fff;font-size:12px;backdrop-filter:blur(4px)}
.scene__row{display:flex;align-items:center;gap:8px}
.scene__row b{font-weight:700}.scene__row em{margin-left:auto;font-style:normal;color:var(--atb-lime);font-weight:700}
.scene__wifi{width:12px;height:12px;border-radius:50%;background:var(--atb-lime);box-shadow:0 0 0 3px rgba(224,255,64,.3);flex:none}
.scene__wifi.is-off{background:#F26D6D;box-shadow:0 0 0 3px rgba(242,109,109,.3)}
.scene__queue{display:grid;gap:4px;min-height:96px}
.scene__qr{padding:5px 8px;border-radius:6px;background:rgba(255,255,255,.12);font-family:var(--font-en);font-size:11.5px;font-weight:600}
/* coco */
.scene__chat{position:absolute;left:12px;width:min(60%,300px);top:12px;display:grid;gap:6px}
.scene__msg{justify-self:start;max-width:86%;padding:8px 10px;border-radius:12px 12px 12px 4px;background:#fff;color:var(--ink);font-size:12px;box-shadow:0 8px 20px -10px rgba(0,0,0,.35);opacity:0}
.scene__msg.is-right{justify-self:end;border-radius:12px 12px 4px 12px;background:var(--atb-lime);color:var(--lime-ink)}
.scene__msg i{display:block;font-style:normal;font-size:10.5px;font-weight:700;opacity:.6;margin-bottom:2px}
.scene__photos{display:flex;gap:4px;margin-top:6px}
.scene__photos b{width:34px;height:26px;border-radius:4px;background:linear-gradient(135deg,#9AA7C4,#5568B6)}
.scene__photos.ph2 b{background:linear-gradient(135deg,#C9C2A6,#8A7B57)}
.scene__doc{position:absolute;left:12px;width:min(60%,300px);bottom:12px;padding:10px 12px;border-radius:10px;background:rgba(11,15,30,.88);color:#fff;font-size:12px;opacity:0}
.scene__doc b{display:block;color:var(--atb-lime);margin-bottom:2px}
/* osm */
.scene__pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--atb-lime);box-shadow:0 0 0 3px rgba(224,255,64,.3),0 2px 6px rgba(0,0,0,.4)}
.scene__pin.is-eq{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:3px;background:#64C8C6;box-shadow:0 0 0 3px rgba(100,200,198,.3),0 2px 6px rgba(0,0,0,.4)}
.scene__pin.is-alert{background:#F26D6D;animation:pinpulse 1s ease-out infinite}
@keyframes pinpulse{0%{box-shadow:0 0 0 0 rgba(242,109,109,.6)}100%{box-shadow:0 0 0 18px rgba(242,109,109,0)}}
.scene__alert{position:absolute;margin:-40px 0 0 -8px;padding:6px 10px;border-radius:var(--pill);background:#F26D6D;color:#fff;font-size:12px;font-weight:700;white-space:nowrap;opacity:0}
.scene__alert b{margin-right:4px}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .scene{display:none}}

.policy h3{font-size:18px;margin:28px 0 8px}.policy p,.policy li{font-size:15px;color:var(--ink-2)}.policy ul{padding-left:18px;list-style:disc;display:grid;gap:4px}