@charset "UTF-8";
/* 제품소개 3종(monitor·assetmgr·scanner) 공통 — 특장점(.adv-*)·주요기능 그리드·지그재그(.zz-*)·FAQ(.faq-*)
   인라인 <style>에서 분리 (2026-07-30) */
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px;}
.adv-grid--3{grid-template-columns:repeat(3,1fr);}
.adv-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:box-shadow .18s,transform .18s,border-color .18s;}
.adv-card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px);border-color:var(--primary-light);}
.adv-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--primary);margin-bottom:18px;}
.adv-ico svg{width:24px;height:24px;}
.adv-card h3{font-family:var(--font-sans);font-weight:800;font-size:18px;line-height:1.4;color:var(--ink);margin:0 0 10px;}
.adv-card p{color:var(--gray);font-size:15px;line-height:1.7;margin:0;}
@media (max-width:1024px){.adv-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:768px){.adv-grid{grid-template-columns:1fr;gap:16px;}.adv-card{padding:24px 22px;}}

.kf-desc-grid.feat-grid{grid-template-columns:repeat(2,1fr);}
.kf-desc-grid .feat-item{align-items:flex-start;}
.kf-desc-grid .feat-item__text{display:flex;flex-direction:column;gap:6px;}
.kf-desc-grid .feat-item__desc{font-size:14px;font-weight:400;color:var(--gray);line-height:1.6;}
@media (max-width:768px){.kf-desc-grid.feat-grid{grid-template-columns:1fr;}}

/* 기능 상세 이미지 나열형 (지그재그) */
.zz-list{display:flex;flex-direction:column;gap:clamp(48px,7vw,96px);margin-top:72px;}
.zz-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}
.zz-media{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);background:var(--bg);border:1px solid var(--line);cursor:zoom-in;}
.zz-media img{display:block;width:100%;height:auto;}
.zz-body{max-width:480px;}
/* 짝수 행: 이미지 오른쪽으로 교차 */
.zz-row:nth-child(even) .zz-media{order:2;}
.zz-row:nth-child(even) .zz-body{order:1;justify-self:end;}

.zz-label{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;}
.zz-no{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 6px;border-radius:999px;background:var(--primary);color:#fff;font-weight:800;font-size:15px;font-family:var(--font-sans);}
.zz-tag{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--primary-vivid);text-transform:uppercase;}
.zz-body h3{font-family:var(--font-sans);font-weight:800;font-size:clamp(21px,2.4vw,28px);line-height:1.32;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px;}
.zz-body p{color:var(--gray);font-size:16px;line-height:1.75;margin:0;}

@media (max-width:768px){
  .zz-row{grid-template-columns:1fr;gap:22px;}
  /* 1열로 접히면 설명을 먼저 읽고 이미지를 확인하도록 순서를 뒤집는다.
     데스크톱 교차 규칙(.zz-row:nth-child(even) …)과 명시도를 맞추려 셀렉터를 함께 나열 */
  .zz-row .zz-media,.zz-row:nth-child(even) .zz-media{order:2;}
  .zz-row .zz-body,.zz-row:nth-child(even) .zz-body{order:1;justify-self:auto;}
  .zz-body{max-width:100%;}
  .zz-media img{max-width:100%;}
}

/* FAQ 아코디언(.faq-sec·.faq-list·.faq-item·.faq-q·.faq-panel·.faq-a)은 2026-08-10
   css/on-sub.css로 이관됐다 — service-remote·service-price에도 FAQ가 생겨 사본이 넷이 될
   상황이었다. 제품 3종은 on-sub.css를 이미 로드하므로 이 파일에서는 삭제만 했다. */