@font-face{font-family:Pretendard;src:url(fonts/PretendardVariable.woff2) format("woff2-variations"),url(fonts/PretendardVariable.woff2) format("woff2");font-weight:45 920;font-style:normal;font-display:swap}
:root{color-scheme:only light;
  --bg:#ffffff; --bg-soft:#f5f6f8; --bg-dark:#0f1729;
  --ink:#111827; --ink-2:#4b5563; --ink-3:#9ca3af; --line:#e5e7eb;
  --brand:#2f5bea; --brand-soft:#eaf0ff; --ok:#16a34a;
  --r-lg:28px; --r-md:18px; --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:6px;height:52px;padding:0 26px;border-radius:12px;font-weight:600;font-size:16px;transition:.2s}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#000}
.btn-line{border:1px solid #d1d5db;background:#fff}.btn-line:hover{border-color:var(--ink)}
.btn-brand{background:var(--brand);color:#fff}.btn-brand:hover{filter:brightness(1.08)}
.eyebrow{font-size:14px;font-weight:700;color:var(--brand);letter-spacing:.04em;margin-bottom:14px}
.h2{font-size:clamp(28px,4vw,44px);line-height:1.3;font-weight:700;letter-spacing:-.02em}
.lead{font-size:18px;line-height:1.7;color:var(--ink-2);margin-top:18px}
section{padding:120px 0}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:.2s}
header.scrolled{border-color:var(--line)}
.nav{height:72px;display:flex;align-items:center;gap:40px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.logo i{width:26px;height:26px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff;font-style:normal;font-size:14px}
.menu{display:flex;align-items:center;gap:32px;font-weight:600;font-size:16px;color:var(--ink-2)}
.menu a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:14px}
.nav-right .btn{height:40px;padding:0 16px;font-size:14px;border-radius:10px}
.lang{color:var(--ink-3);font-weight:600}.lang b{color:var(--ink)}

/* hero */
.hero{padding:40px 0 80px}
.slides{position:relative;overflow:hidden;border-radius:var(--r-lg)}
.track{display:flex;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.slide{min-width:100%;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding:72px 64px;min-height:560px;background:var(--bg-soft);border-radius:var(--r-lg)}
.badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:18px;margin-bottom:24px}
.badge i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font-style:normal;font-size:13px}
.slide h1{font-size:clamp(34px,5vw,58px);line-height:1.25;font-weight:700;letter-spacing:-.03em}
.slide h1 em{font-style:normal;color:var(--brand)}
.slide p{font-size:18px;color:var(--ink-2);line-height:1.7;margin-top:20px}
.cta{display:flex;gap:10px;margin-top:36px;flex-wrap:wrap}
.dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.dots button{width:8px;height:8px;border-radius:99px;background:#d1d5db;transition:.3s}
.dots button.on{width:28px;background:var(--ink)}

/* visual mockups */
.vis{position:relative;height:400px}
.card{background:#fff;border-radius:20px;box-shadow:0 20px 50px rgba(17,24,39,.08)}
.v-face{position:absolute;left:8%;top:0;width:58%;height:100%;padding:20px;display:flex;flex-direction:column}
.v-face .cam{flex:1;border-radius:14px;background:linear-gradient(160deg,#dfe6f5,#c9d3ea);position:relative;overflow:hidden}
.v-face .head{position:absolute;left:50%;top:22%;width:42%;aspect-ratio:3/3.6;transform:translateX(-50%);border-radius:50% 50% 46% 46%;background:#aab7d4}
.v-face .body{position:absolute;left:50%;bottom:-10%;width:80%;height:34%;transform:translateX(-50%);border-radius:50% 50% 0 0;background:#aab7d4}
.v-face .frame{position:absolute;left:50%;top:16%;width:56%;aspect-ratio:1/1.1;transform:translateX(-50%);border:3px solid var(--brand);border-radius:18px;animation:pulse 2.4s infinite}
.v-face .scan{position:absolute;left:22%;right:22%;height:2px;background:var(--brand);box-shadow:0 0 12px var(--brand);animation:scan 2.4s infinite}
@keyframes scan{0%{top:18%}50%{top:68%}100%{top:18%}}
@keyframes pulse{50%{opacity:.5}}
.v-face .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);padding-top:14px}
.v-result{position:absolute;right:0;bottom:40px;width:46%;padding:20px}
.v-result .ok{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ok);font-size:15px}
.v-result .ok:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ok)}
.v-result .big{font-size:34px;font-weight:700;margin:8px 0 12px}
.row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);padding:7px 0;border-top:1px solid var(--line)}
.v-engines{position:absolute;right:4%;top:20px;padding:14px 16px;display:flex;gap:6px;flex-wrap:wrap;width:46%}
.chip{font-size:12px;font-weight:600;padding:6px 10px;border-radius:99px;background:var(--bg-soft);color:var(--ink-2)}
.chip.on{background:var(--brand-soft);color:var(--brand)}

.v-grid{position:absolute;inset:0 0 0 6%;padding:18px;display:flex;flex-direction:column;gap:12px}
.v-grid .search{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:13px;color:var(--ink-3)}
.v-grid .tiles{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{border-radius:10px;background:linear-gradient(160deg,#334155,#1e293b);position:relative;overflow:hidden}
.tile:after{content:attr(data-c);position:absolute;left:8px;top:6px;font-size:10px;color:#94a3b8}
.tile.hit{outline:3px solid var(--brand);outline-offset:-3px}
.tile.hit:before{content:"97.2%";position:absolute;right:6px;bottom:6px;font-size:11px;font-weight:700;color:#fff;background:var(--brand);padding:2px 6px;border-radius:6px}
.tile .p{position:absolute;bottom:0;left:40%;width:16%;height:46%;border-radius:40% 40% 0 0;background:#64748b}
.tile.hit .p{background:#93b4ff}

.v-pos{position:absolute;left:18%;top:0;width:52%;height:100%;padding:18px;display:flex;flex-direction:column;align-items:center;background:#1f2937;color:#fff;border-radius:28px}
.v-pos .screen{flex:1;width:100%;border-radius:18px;background:#0b1220;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.v-pos .ring{width:120px;height:120px;border-radius:50%;border:3px solid var(--brand);display:grid;place-items:center;position:relative}
.v-pos .ring:after{content:"";width:64px;height:76px;border-radius:50% 50% 46% 46%;background:#334155}
.v-pos .done{font-weight:700;font-size:18px}
.v-pos .amt{color:#94a3b8;font-size:14px}
.v-pos .stand{width:30%;height:14px;margin-top:14px;border-radius:6px;background:#374151}
.v-receipt{position:absolute;right:0;bottom:50px;width:40%;padding:18px}
.v-receipt b{display:block;font-size:15px;margin-bottom:8px}

/* proof strip */
.proof{padding:0 0 40px}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-item{padding:36px 28px;border-right:1px solid var(--line)}
.proof-item:last-child{border-right:0}
.proof-item b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em}
.proof-item span{display:block;color:var(--ink-2);margin-top:8px;font-size:15px;line-height:1.5}

/* lineup tabs */
.tabs{display:flex;gap:8px;margin:48px 0 28px}
.tab{height:44px;padding:0 22px;border-radius:99px;background:var(--bg-soft);font-weight:700;color:var(--ink-2);transition:.2s}
.tab.on{background:var(--ink);color:#fff}
.panel{display:none;grid-template-columns:1fr 1fr;gap:20px}
.panel.on{display:grid;animation:fade .4s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.lcard{background:var(--bg-soft);border-radius:var(--r-lg);padding:44px;display:flex;flex-direction:column}
.lcard .tag{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.lcard h3{font-size:28px;line-height:1.35;font-weight:700;margin:16px 0 28px;letter-spacing:-.02em}
.lcard ul{list-style:none;display:grid;gap:18px;margin-bottom:36px}
.lcard li{padding-left:30px;position:relative;line-height:1.6;color:var(--ink-2)}
.lcard li:before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.lcard .cta{margin-top:auto}
.lcard .btn{height:46px;font-size:15px}
.lcard.dark{background:var(--bg-dark);color:#fff}
.lcard.dark li{color:#cbd5e1}.lcard.dark .tag{color:#94a3b8}

/* platform diagram */
.soft{background:var(--bg-soft)}
.platform{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.stack{display:grid;gap:14px}
.layer{background:#fff;border-radius:var(--r-md);padding:22px 24px}
.layer small{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.06em}
.layer .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.layer.core{background:var(--brand);color:#fff}
.layer.core small{color:#c7d6ff}
.layer.core strong{display:block;font-size:26px;margin-top:6px}
.layer.core p{font-size:14px;color:#dbe5ff;margin-top:6px;line-height:1.6}
.arrow{text-align:center;color:var(--ink-3);font-size:13px}
.chip.soon{border:1px dashed #cbd5e1;background:transparent;color:var(--ink-3)}

/* industries */
.ind{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.icard{border:1px solid var(--line);border-radius:var(--r-lg);padding:36px}
.icard small{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--brand)}
.icard h4{font-size:24px;margin:10px 0 14px}
.icard p{color:var(--ink-2);line-height:1.7}
.icard .uses{margin-top:22px;display:flex;gap:6px}

/* developers */
.dev{background:var(--bg-dark);color:#fff;border-radius:var(--r-lg);padding:72px 64px;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.dev .lead{color:#cbd5e1}
.dev pre{background:#0a0f1d;border:1px solid #1f2a44;border-radius:var(--r-md);padding:24px;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#cbd5e1;overflow-x:auto}
.dev pre .c{color:#64748b}.dev pre .k{color:#93b4ff}.dev pre .s{color:#86efac}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:60px}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;text-align:left;padding:26px 0;font-size:18px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:20px}
.qa button:after{content:"+";font-size:26px;font-weight:300;color:var(--ink-3);transition:.2s}
.qa.open button:after{transform:rotate(45deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .3s;color:var(--ink-2);line-height:1.75}
.qa.open .a{max-height:240px}
.qa .a p{padding-bottom:26px}

/* contact band */
.band{background:var(--bg-soft);border-radius:var(--r-lg);padding:64px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band h3{font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.35}
.band p{color:var(--ink-2);margin-top:10px;line-height:1.7}

footer{border-top:1px solid var(--line);margin-top:120px;padding:56px 0 64px;font-size:14px;color:var(--ink-2)}
.fgrid{display:flex;gap:80px;flex-wrap:wrap}
.fgrid h5{font-size:14px;color:var(--ink);margin-bottom:14px}
.fgrid a{display:block;margin-bottom:10px}
.finfo{margin-top:48px;line-height:1.9;color:var(--ink-3)}

.reveal{}

@media (max-width:900px){
  .menu{display:none}
  .slide{grid-template-columns:1fr;padding:44px 24px;min-height:auto}
  .vis{height:320px}
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-item:nth-child(2){border-right:0}
  .proof-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .panel,.platform,.faq,.dev{grid-template-columns:1fr}
  .ind{grid-template-columns:1fr}
  .lcard,.dev,.band{padding:36px 24px}
  section{padding:80px 0}
  .wrap{padding:0 16px}
  .nav-right .lang{display:none}
}

/* ── 제품 드롭다운 ── */
.dd{position:relative}
.dd-btn{font-weight:600;font-size:16px;color:var(--ink-2);display:flex;align-items:center;gap:6px;height:72px}
.dd-btn:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:.2s}
.dd:hover .dd-btn,.dd.open .dd-btn,.dd.cur .dd-btn{color:var(--ink)}
.dd:hover .dd-btn:after,.dd.open .dd-btn:after{transform:rotate(-135deg) translateY(-1px)}
.dd-panel{position:absolute;top:64px;left:-20px;width:320px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 48px rgba(17,24,39,.12);opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
.dd:hover .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-item{display:flex;gap:14px;align-items:center;padding:12px;border-radius:12px;transition:.15s}
.dd-item:hover,.dd-item.on{background:var(--bg-soft)}
.dd-item i{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700;font-size:15px}
.dd-item b{display:block;font-size:16px;color:var(--ink)}
.dd-item small{display:block;font-size:13px;color:var(--ink-3);font-weight:500;margin-top:2px}

/* ── 모바일 메뉴 ── */
.burger{display:none;width:40px;height:40px;position:relative}
.burger span,.burger span:before,.burger span:after{position:absolute;left:10px;width:20px;height:2px;background:var(--ink);transition:.2s}
.burger span{top:19px}.burger span:before{content:"";left:0;top:-6px}.burger span:after{content:"";left:0;top:6px}
.m-open .burger span{background:transparent}
.m-open .burger span:before{top:0;transform:rotate(45deg)}
.m-open .burger span:after{top:0;transform:rotate(-45deg)}
.mnav{display:none;padding:8px 16px 24px;border-top:1px solid var(--line);background:#fff}
.mnav a{display:block;padding:14px 4px;font-weight:700;font-size:17px}
.mnav a.sub{padding-left:16px;font-size:16px}
.mnav a.sub span{font-weight:500;font-size:13px;color:var(--ink-3);margin-left:6px}
.mnav small{display:block;padding:14px 4px 4px;color:var(--ink-3);font-weight:700;font-size:13px}
.m-open .mnav{display:block}

/* ── 제품 상세 페이지 ── */
.crumb{font-size:14px;color:var(--ink-3);margin-bottom:18px}
.crumb a:hover{color:var(--ink)}
.phero .slide{min-height:520px}
.phero .sub-tag{font-size:14px;color:var(--ink-3);font-weight:600;margin:-12px 0 20px}

.statement{text-align:center}
.statement .h2{max-width:860px;margin:0 auto}
.statement .lead{max-width:720px;margin:24px auto 0}

.why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.why .icard b{display:block;font-size:14px;color:var(--brand);font-weight:700;margin-bottom:14px}

.fpanel{background:var(--bg-soft);border-radius:var(--r-lg);padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.fpanel h3{font-size:30px;line-height:1.35;font-weight:700;letter-spacing:-.02em}
.fpanel p{color:var(--ink-2);line-height:1.75;margin-top:18px;font-size:17px}
.fpanel .note{margin-top:22px;padding:16px 18px;border-radius:14px;background:#fff;font-size:14px;color:var(--ink-2);line-height:1.65}
.fpanel .note b{color:var(--ink)}
.fvis{background:#fff;border-radius:20px;padding:28px;min-height:280px;display:flex;flex-direction:column;justify-content:center;gap:12px;box-shadow:0 20px 50px rgba(17,24,39,.06)}
.fvis .big{font-size:44px;font-weight:700;letter-spacing:-.02em}
.fvis .lbl{color:var(--ink-3);font-size:14px;font-weight:600}
.fvis .chips{display:flex;gap:8px;flex-wrap:wrap}
.panel.fpanel{display:none}.panel.fpanel.on{display:grid}

.steps{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:12px;margin-top:56px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px 20px;position:relative}
.step .no{font-size:13px;font-weight:700;color:var(--ink-3)}
.step b{display:block;font-size:17px;margin:10px 0 6px}
.step span{font-size:14px;color:var(--ink-2);line-height:1.6}
.step.ours{background:var(--brand);border-color:var(--brand);color:#fff}
.step.ours .no,.step.ours span{color:#dbe5ff}
.legend{display:flex;gap:20px;margin-top:20px;font-size:14px;color:var(--ink-2);flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}

.scope{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.scope .lcard h3{margin-bottom:20px}

.spec{width:100%;border-collapse:collapse;margin-top:48px;font-size:16px}
.spec th,.spec td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.spec th{width:28%;color:var(--ink-3);font-weight:600;background:var(--bg-soft)}
.spec tr:first-child th,.spec tr:first-child td{border-top:2px solid var(--ink)}
.caveat{margin-top:28px;border-radius:var(--r-md);background:var(--bg-soft);padding:28px 32px}
.caveat h4{font-size:16px;margin-bottom:12px}
.caveat li{color:var(--ink-2);line-height:1.75;margin-left:18px;font-size:15px}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.fit .lcard h3{margin:14px 0 14px}
.fit .lcard p{color:var(--ink-2);line-height:1.75}
.fit .lcard.dark p{color:#cbd5e1}
.pill{display:inline-block;font-size:13px;font-weight:700;padding:6px 12px;border-radius:99px;background:#dcfce7;color:#15803d}
.pill.no{background:#fee2e2;color:#b91c1c}

.related{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.rcard{display:flex;gap:18px;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);padding:26px;transition:.2s}
.rcard:hover{border-color:var(--ink)}
.rcard i{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700}
.rcard b{display:block;font-size:18px}
.rcard span{color:var(--ink-2);font-size:14px}
.rcard:after{content:"→";margin-left:auto;font-size:20px;color:var(--ink-3)}

@media (max-width:900px){
  .burger{display:block}
  .nav-right .btn{display:none}
  .why,.scope,.fit,.related{grid-template-columns:1fr}
  .fpanel{grid-template-columns:1fr;padding:32px 22px}
  .steps{grid-template-columns:1fr 1fr}
  .spec th{width:36%}
  .spec th,.spec td{padding:14px 12px;font-size:14px}
}

/* ── 실제 화면 프레임 ── */
.shot{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px rgba(17,24,39,.12);border:1px solid var(--line)}
.shot .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f3f4f6;border-bottom:1px solid var(--line)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:#d1d5db}
.shot .bar span{margin-left:10px;font-size:11px;color:var(--ink-3)}
.shot img{display:block;width:100%;height:auto}
.phone{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 40px rgba(17,24,39,.18))}

.hero-shot{position:relative;padding-right:14%}
.hero-shot .phone{position:absolute;right:0;bottom:-24px;width:30%}

/* ── GATE 데모 ── */
.demo{background:var(--bg-dark);color:#fff;border-radius:var(--r-lg);padding:64px 56px}
.demo .h2{color:#fff}.demo .lead{color:#cbd5e1}
.demo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.demo-grid{display:grid;grid-template-columns:260px 1fr 220px;gap:28px;margin-top:44px;align-items:start}
.dlist{display:grid;gap:10px}
.ditem{text-align:left;padding:18px 18px;border-radius:14px;background:#17213a;border:1px solid #23304f;transition:.2s}
.ditem small{display:block;font-size:12px;color:#94a3b8;font-weight:600}
.ditem b{display:block;font-size:16px;margin-top:4px}
.ditem:hover{border-color:#3b4a6e}
.ditem.on{background:#fff;color:var(--ink);border-color:#fff}
.ditem.on small{color:var(--brand)}
.dsteps{margin-top:20px;padding:20px;border-radius:14px;background:#17213a}
.dsteps h5{font-size:13px;color:#94a3b8;margin-bottom:12px}
.dsteps ol{list-style:none;display:grid;gap:12px}
.dsteps li{display:flex;gap:10px;font-size:14px;color:#94a3b8;line-height:1.5;transition:.3s}
.dsteps li i{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid #3b4a6e;display:grid;place-items:center;font-style:normal;font-size:11px}
.dsteps li.on{color:#fff}
.dsteps li.on i{background:var(--brand);border-color:var(--brand)}
.dpc .shot{border-color:#23304f}
.dphone{position:relative}
.dphone img{position:absolute;top:0;left:0;width:100%;height:auto;opacity:0;transition:opacity .5s}
.dphone img.on{opacity:1}
.dphone .ph{visibility:hidden;position:static;opacity:1}
.dcap{margin-top:14px;text-align:center;font-size:13px;color:#94a3b8;min-height:20px}
.demo-cta{display:flex;gap:10px;flex-wrap:wrap}
.demo .btn-line{background:transparent;color:#fff;border-color:#3b4a6e}
.demo .btn-line:hover{border-color:#fff}

/* ── 콘솔 / 화면 갤러리 ── */
.screens{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.screens figure{margin:0}
.screens figcaption{margin-top:14px;font-size:15px;color:var(--ink-2);line-height:1.6}
.screens figcaption b{color:var(--ink);display:block;font-size:17px;margin-bottom:2px}
.screens .wide{grid-column:1/-1}

@media (max-width:1000px){
  .demo{padding:40px 22px}
  .demo-grid{grid-template-columns:1fr}
  .dlist{grid-template-columns:1fr 1fr}
  .dphone{max-width:240px;margin:0 auto}
  .screens{grid-template-columns:1fr}
  .hero-shot{padding-right:0}
  .hero-shot .phone{width:28%;bottom:-16px}
}

/* ══ 제품 화면 일러스트 (mock.js) ══ */
.av rect{fill:#dbe3f4}.av circle,.av path{fill:#9aaacb}
.av-b rect{fill:#e7defc}.av-b circle,.av-b path{fill:#a48cf0}
.av-c rect{fill:#f3d9d9}.av-c circle,.av-c path{fill:#d99a9a}
.qr{display:block;width:100%;height:auto;fill:#111827}

/* 공통 앱 창 */
.ui{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px rgba(17,24,39,.10);font-size:12px;color:var(--ink);text-align:left}
.ui-top{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
.ui-logo{font-weight:800;font-size:12px;letter-spacing:.02em}
.ui-logo.v{background:#111827;color:#fff;padding:3px 7px;border-radius:6px}
.ui-proj{font-size:11px;color:var(--ink-3);padding:3px 8px;border:1px solid var(--line);border-radius:6px}
.ui-top nav{display:flex;gap:14px;margin-left:auto;margin-right:auto;font-size:11px;color:var(--ink-3)}
.ui-top nav b{color:var(--ink)}
.dark-logo nav b{color:#5b3df5}

/* GATE 대시보드 */
.gd{padding:14px;display:grid;gap:10px;background:#fafbfc}
.gd-tabs{display:flex;gap:16px;font-size:12px;color:var(--ink-3)}
.gd-tabs b{color:var(--brand);border-bottom:2px solid var(--brand);padding-bottom:4px}
.gd-row{display:grid;grid-template-columns:repeat(4,1fr) 1.15fr;gap:8px}
.gd-stat,.gd-demo,.gd-card,.gd-table{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}
.gd-stat small,.gd-card small{display:block;color:var(--ink-2);font-size:10px}
.gd-stat b{display:block;font-size:17px;margin:6px 0 6px}.gd-stat b em{font-style:normal;font-size:10px;margin-left:2px}
.tagon,.tagoff{white-space:nowrap;display:inline-block;font-size:9px;padding:2px 6px;border-radius:99px;background:#dcfce7;color:#15803d}
.tagoff{background:var(--brand-soft);color:var(--brand)}
.gd-demo{border-color:var(--brand);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:4px 8px;align-items:center}
.gd-demo b{font-size:11px}.gd-demo .qr{grid-row:2;width:44px}.gd-demo small{grid-row:2;font-size:10px;color:var(--ink-2)}
.badge-demo{font-size:8px;font-weight:700;background:var(--brand);color:#fff;padding:2px 4px;border-radius:4px;justify-self:start}
.gd-row2{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.gd-card svg{width:100%;height:90px;margin-top:8px}
.gd-card polyline{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.l1{stroke:#38bdf8}.l2{stroke:#f59e0b}.l3{stroke:#8b5cf6}.l4{stroke:#10b981}
.gauge{text-align:center;position:relative}
.gauge svg{height:70px}.gauge path{fill:none;stroke-width:12}
.g-bg{stroke:#e5e7eb}.g-fg{stroke:#2dd4bf}
.gauge b{position:absolute;left:0;right:0;bottom:12px;font-size:18px}
.gd-table{display:grid;gap:8px}
.gd-table i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#eef1f6 0 18%,transparent 18% 24%,#eef1f6 24% 40%,transparent 40% 46%,#eef1f6 46% 62%,transparent 62% 68%,#eef1f6 68% 84%,transparent 84% 90%,#eef1f6 90%)}

/* 휴대폰 (일러스트) */
.pm,.pframe{position:relative;width:100%;aspect-ratio:9/19;border-radius:38px;background:#111827;padding:9px;box-shadow:0 24px 50px rgba(17,24,39,.22)}
.pm-in,.pframe>div{position:relative;height:100%;border-radius:30px;overflow:hidden;background:#f5f7fb}
.pframe img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.pm-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:30%;height:18px;border-radius:99px;background:#111827;z-index:2}
.pm-status{display:flex;justify-content:space-between;padding:10px 20px 0;font-size:10px;font-weight:700;color:var(--ink)}
.pm-body{padding:14px 14px 0;display:flex;flex-direction:column;align-items:center;gap:10px;height:calc(100% - 26px)}
.pm-top{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700}
.pm-x{width:24px;height:24px;border-radius:8px;background:#e5e7eb;display:grid;place-items:center;font-weight:400}
.pm-brand{align-self:flex-start;font-size:10px;font-weight:800;margin-top:6px}
.pm-sub{font-size:10px;color:var(--ink-3)}
.pm-face{position:relative;width:34%;margin-top:4px}
.pm-face .av{display:block;width:100%;border-radius:50%;box-shadow:0 0 0 3px var(--brand)}
.pm-face b{position:absolute;right:-4%;top:-2%;width:30%;aspect-ratio:1;border-radius:50%;background:#10b981;color:#fff;font-size:12px;display:grid;place-items:center;border:2px solid #fff}
.pm-h{font-size:16px;font-weight:700}
.pm-meta{font-size:10px;color:var(--ink-2);text-align:center;line-height:1.5}
.pm-card{width:100%;background:#fff;border-radius:14px;padding:4px 12px;margin-top:4px}
.pm-card div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:10px}
.pm-card div:last-child{border:0}.pm-card span{color:var(--ink-3)}
.pm-card .mask{letter-spacing:.02em}
.pm-btns{display:flex;gap:6px;width:100%;margin-top:auto;margin-bottom:22px}
.pm-btns span,.pm-btn{flex:1;text-align:center;padding:10px 0;border-radius:12px;border:1px solid var(--brand);color:var(--brand);font-weight:700;font-size:11px}
.pm-btns .pri,.pm-btn{background:var(--brand);color:#fff}
.pm-btn{width:100%;margin-top:auto;margin-bottom:22px;flex:none}
.pm-ring{position:relative;width:86%;aspect-ratio:1;margin-top:8px;display:grid;place-items:center}
.pm-ring>svg:first-child{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pm-ring .wire{width:46%;fill:none;stroke:#94a3b8;stroke-width:1}
.pm-ring .corner{position:absolute;width:14%;height:14%;border:3px solid var(--brand)}
.corner.tl{left:-6%;top:-6%;border-right:0;border-bottom:0}.corner.tr{right:-6%;top:-6%;border-left:0;border-bottom:0}
.corner.bl{left:-6%;bottom:-6%;border-right:0;border-top:0}.corner.br{right:-6%;bottom:-6%;border-left:0;border-top:0}
.pm-ring.real,.pm-ring.fake{border-radius:50%;border:4px solid #10b981;overflow:hidden}
.pm-ring.fake{border-color:#ef4444}
.pm-ring.real .av,.pm-ring.fake .av{position:absolute;inset:0;width:100%;height:100%}
.pm-ring.fake .av{filter:blur(3px)}
.pm-pill{position:relative;font-size:10px;font-weight:700;padding:6px 10px;border-radius:8px;color:#fff;background:#10b981}
.pm-pill.no{background:#ef4444}
/* 실제 데모의 어두운 촬영 화면 */
.pm.cam .pm-in{background:#060b16;color:#fff}
.pm.cam .pm-status{color:#fff}
.pm.cam .pm-top{color:#fff}.pm.cam .pm-x{background:#1f2937}
.cam-live{font-size:9px;color:#34d399;background:#073b2a;padding:4px 8px;border-radius:99px}
.cam-h{font-size:12px;font-weight:700;margin-top:10px}
.cam-tog{display:flex;gap:4px;background:#111827;border-radius:99px;padding:3px;font-size:9px}
.cam-tog span{padding:5px 10px;border-radius:99px;color:#6b7280}.cam-tog .on{background:#1f2937;color:#fff}
.cam-circle{width:88%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.18);margin-top:8px;display:grid;place-items:center;position:relative;overflow:hidden}
.cam-circle .av{width:76%;opacity:.9}
.cam-circle:after{content:"";position:absolute;left:10%;right:10%;height:2px;background:#34d399;box-shadow:0 0 12px #34d399;animation:camscan 2s ease-in-out infinite}
@keyframes camscan{0%,100%{top:20%}50%{top:78%}}

/* VCA 공통 */
.pp{position:absolute;bottom:0;height:64%;width:auto;transform:translateX(-50%);fill:#5b6b82}
.pp.hi{fill:#8b7cf6}
.ch{position:absolute;left:6px;top:6px;font-size:9px;font-weight:700;color:#fff;background:rgba(17,24,39,.7);padding:2px 6px;border-radius:5px}
.vs-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
.vs-filters span{font-size:10px;padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2)}
.vs-filters span.on{border-color:#c4b5fd;background:#f3f0ff;color:#5b3df5}
.vs-filters b{margin-left:auto;font-size:10px;background:#111827;color:#fff;padding:6px 12px;border-radius:8px}
.vs-meta{padding:8px 14px 0;font-size:10px;color:var(--ink-2)}.vs-meta b{color:#5b3df5}
.vs-grid{display:grid;grid-template-columns:repeat(var(--c,6),1fr);gap:8px;padding:10px 14px 14px}
.vs-card{border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.vs-card.hit{outline:2px solid #5b3df5;outline-offset:-2px}
.vs-img{position:relative;aspect-ratio:3/4;background:linear-gradient(180deg,#cbd5e1,#94a3b8)}
.vs-img .face{position:absolute;right:4px;bottom:4px;width:38%}
.vs-img .face .av{display:block;width:100%;border-radius:6px;border:2px solid #fff}
.vs-card.hit .face .av{border-color:#ef4444}
.vs-cap{display:flex;justify-content:space-between;gap:4px;padding:5px 6px;font-size:9px}
.vs-cap em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-cap b{flex:none}
.vs-cap em,.vf-list em,.vm-row em{font-style:normal;font-weight:700}
em.vip{color:#5b3df5}em.unauth{color:#ef4444}em.unknown{color:var(--ink-2)}em.vehicle{color:#0891b2}em.tracking{color:#d97706}

.vr{display:grid;grid-template-columns:150px 1fr 190px;min-height:360px}
.vr-side,.vr-list{padding:12px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line)}
.vr-list{border-right:0;border-left:1px solid var(--line)}
.vr-side small,.vr-list small{font-weight:700;font-size:10px}
.vr-t{position:relative;width:72px}.vr-t .av{display:block;width:100%;border-radius:8px}
.vr-t span{position:absolute;left:4px;top:4px;font-size:8px;background:#ede9fe;color:#5b3df5;padding:1px 5px;border-radius:4px}
.vr-side i{display:block;height:22px;border-radius:6px;background:#f1f5f9}
.vr-map{position:relative;background:#eef1f5}
.vr-map>svg{position:absolute;inset:0;width:100%;height:100%}
.road{fill:none;stroke:#fff;stroke-width:5;vector-effect:non-scaling-stroke}
.route{fill:none;stroke:#5b3df5;stroke-width:3;vector-effect:non-scaling-stroke}
.vr-pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px}
.vr-pin b{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #5b3df5;color:#5b3df5;font-size:9px;display:grid;place-items:center}
.vr-pin.last b{background:#5b3df5;color:#fff;box-shadow:0 0 0 8px rgba(91,61,245,.18)}
.vr-pin span{background:#fff;border-radius:8px;padding:4px 8px;font-size:9px;font-weight:700;box-shadow:0 4px 10px rgba(0,0,0,.08);white-space:nowrap}
.vr-pin.last span{background:#5b3df5;color:#fff}
.vr-pin em,.vr-step em{display:block;font-style:normal;font-weight:400;opacity:.7}
.vr-step{display:flex;gap:8px;align-items:center;font-size:10px;font-weight:700;padding:6px;border-radius:8px}
.vr-step b{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:9px}
.vr-step.on{background:#f3f0ff}.vr-step.on b{border-color:#5b3df5;color:#5b3df5}

.vf{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.vf-cam{display:grid;grid-template-columns:1.5fr 1fr;background:#fff}
.vf-vid{position:relative;aspect-ratio:4/3;background:linear-gradient(170deg,#94a3b8,#475569 70%,#334155)}
.vf-vid .pp{height:56%}
.vf-list{padding:8px;display:grid;gap:6px;align-content:start}
.vf-list div{display:grid;grid-template-columns:22px 1fr auto;gap:6px;align-items:center;font-size:9px}
.vf-list .av{width:22px;border-radius:5px}
.vf-list i{display:block;height:6px;width:80%;border-radius:3px;background:#e5e7eb;margin-bottom:3px}
.vf-list b{color:#5b3df5}

.vm{display:grid;grid-template-columns:260px 1fr;min-height:380px}
.vm-side{padding:12px;border-right:1px solid var(--line);display:grid;gap:8px;align-content:start}
.vm-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.vm-kpi small{display:block;font-size:8px;color:var(--ink-3)}.vm-kpi b{font-size:15px}
.vm-row{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;font-size:9px}
.vm-row .av{width:24px;border-radius:6px}
.vm-row i{display:block;height:6px;width:70%;border-radius:3px;background:#e5e7eb;margin-bottom:4px}
.vm-row small{color:var(--ink-3);font-size:8px}
.vm-map{position:relative;background:#e9edf3}
.vm-map>svg{position:absolute;inset:0;width:100%;height:100%}
.vm-p{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);background:#5b3df5;box-shadow:0 0 0 8px rgba(91,61,245,.15)}
.vm-pop{position:absolute;left:46%;top:8%;width:210px;background:#111827;color:#fff;border-radius:10px;padding:10px}
.vm-pop small{font-size:9px;color:#34d399}
.vm-cmp{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}
.vm-cmp .av{width:44px;height:44px;flex:none;border-radius:50%}.vm-cmp b{font-size:11px}
.vm-lbl{display:flex;justify-content:space-between;font-size:8px;color:#94a3b8;margin-top:4px}

/* ══ GATE 데모 (실제 데모 앱) ══ */
.demo-grid2{display:grid;grid-template-columns:280px 300px 1fr;gap:36px;margin-top:44px;align-items:center}
.dseg{display:flex;gap:4px;background:#17213a;border-radius:12px;padding:4px;margin-bottom:12px}
.dseg button{flex:1;padding:9px 0;border-radius:9px;font-weight:700;font-size:14px;color:#94a3b8}
.dseg button.on{background:#fff;color:var(--ink)}
.dphone2{position:relative;max-width:300px;margin:0 auto;width:100%}
.dscreen{position:absolute;inset:9px;border-radius:30px;overflow:hidden;opacity:0;transition:opacity .45s}
.dscreen.on{opacity:1}
.dscreen>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.dscreen .pm{position:absolute;inset:-9px;width:auto;box-shadow:none;background:transparent}
.hl{position:absolute;border:3px solid #fbbf24;border-radius:16px;box-shadow:0 0 0 999px rgba(6,11,22,.35);transition:.4s;animation:hlp 1.4s ease-in-out infinite}
@keyframes hlp{50%{border-color:rgba(251,191,36,.35)}}
.dside .dsteps{margin-top:0}
.dqr{display:flex;gap:16px;align-items:center;margin-top:16px;padding:18px;border-radius:14px;background:#fff;color:var(--ink)}
.dqr .qr{width:84px;flex:none}
.dqr b{display:block;font-size:15px}.dqr span{font-size:13px;color:var(--ink-2);line-height:1.5}
.dside .demo-cta{margin-top:16px}

.duo{display:flex;gap:28px;justify-content:center}
.duo figure{margin:0;width:240px;text-align:center}
.duo figcaption{margin-top:14px;font-size:14px;color:var(--ink-2)}

@media (max-width:1000px){
  .demo-grid2{grid-template-columns:1fr}
  .dphone2{max-width:260px}
  .gd-row{grid-template-columns:1fr 1fr}
  .gd-demo{grid-column:1/-1}
  .vs-grid{grid-template-columns:repeat(3,1fr)}
  .vr{grid-template-columns:1fr}.vr-side,.vr-list{display:none}.vr-map{min-height:260px}
  .vf{grid-template-columns:1fr}
  .vm{grid-template-columns:1fr}.vm-side{display:none}.vm-map{min-height:280px}
  .duo figure{width:44%}
}

/* 개발자 섹션 — 코드 대신 핵심 3가지 */
.devpts{list-style:none;display:grid;gap:12px}
.devpts li{background:#0a0f1d;border:1px solid #1f2a44;border-radius:var(--r-md);padding:22px 24px}
.devpts b{display:block;font-size:18px;color:#fff}
.devpts span{display:block;margin-top:6px;color:#94a3b8;line-height:1.6;font-size:15px}

/* ══ 산업예제 (solution-*.html) ══ */
.sol-hero{padding:40px 0 0}
.sol-hero .box{background:var(--bg-soft);border-radius:var(--r-lg);padding:72px 64px}
.sol-hero .pk{display:inline-flex;gap:6px;margin-bottom:18px}
.sol-hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.25}
.sol-hero .q{font-size:clamp(20px,2.4vw,28px);font-weight:700;line-height:1.5;margin-top:18px;color:var(--brand);max-width:860px}
.sol-hero .lead{max-width:780px}
.pkchip{font-size:13px;font-weight:700;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.pkchip.g{color:var(--brand)}.pkchip.v{color:#5b3df5}.pkchip.p{color:#111827}.pkchip.a{color:#0f766e}

.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.scene{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.scene small{font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.scene h4{font-size:21px;line-height:1.45;margin:12px 0 12px}
.scene p{color:var(--ink-2);line-height:1.75;font-size:15px}
.scene .cause{margin-top:auto;padding-top:20px}
.scene .cause div{background:var(--bg-soft);border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.scene .cause b{color:var(--ink)}
.callout{margin-top:24px;border-left:3px solid var(--brand);padding:6px 0 6px 20px;font-size:17px;line-height:1.75;color:var(--ink)}

.tbl{width:100%;border-collapse:collapse;margin-top:40px;background:#fff;border-radius:var(--r-md);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:20px 22px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.65;font-size:15px}
.tbl thead th{background:var(--ink);color:#fff;font-size:14px;font-weight:700}
.tbl tbody th{width:16%;font-size:16px;font-weight:700;white-space:nowrap}
.tbl tbody td{color:var(--ink-2)}
.tbl tr.sum th,.tbl tr.sum td{background:var(--brand-soft);color:var(--ink)}
.pull{margin:40px 0 0;font-size:clamp(19px,2.2vw,24px);font-weight:700;line-height:1.55;text-align:center;color:var(--ink)}

.bars{display:grid;gap:14px;margin-top:40px;background:#fff;border-radius:var(--r-lg);padding:36px}
.bar{display:grid;grid-template-columns:200px 1fr 130px;gap:20px;align-items:center}
.bar .lbl{font-weight:700;font-size:15px}
.bar .lbl small{display:block;font-weight:500;color:var(--ink-3);font-size:13px;margin-top:2px}
.bar .track{position:relative;height:16px;border-radius:99px;background:var(--bg-soft)}
.bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:#cbd5e1}
.bar.win .fill{background:var(--brand)}
.bar .line{position:absolute;top:-8px;bottom:-8px;width:2px;background:#ef4444}
.bar .val{font-size:26px;font-weight:700;text-align:right}
.bar.win .val{color:var(--brand)}
.bars .note{font-size:14px;color:var(--ink-3);line-height:1.6;margin-top:6px}

.steps.num .step b{font-size:18px}
.steps.num .no{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px}
.aside{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px 28px}
.aside h5{font-size:16px;margin-bottom:8px}
.aside p{color:var(--ink-2);line-height:1.75;font-size:15px}

.evid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.evid div{background:var(--bg-soft);border-radius:var(--r-md);padding:26px 24px}
.evid b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em}
.evid span{display:block;color:var(--ink-2);margin-top:6px;font-size:14px;line-height:1.55}
.evid .wide{grid-column:span 2}
.evid .wide b{font-size:20px}

.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.sol-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;transition:.2s;min-height:280px}
.sol-card:hover{border-color:var(--ink)}
.sol-card .pk{display:flex;gap:6px}
.sol-card h4{font-size:24px;margin:20px 0 12px}
.sol-card p{color:var(--ink-2);line-height:1.7;font-size:16px;flex:1}
.sol-card span{margin-top:20px;font-weight:700}
.sol-card:hover span{text-decoration:underline}
.sol-card.etc{background:var(--bg-soft);border-color:transparent}
.rcard.static:after{content:none}

@media (max-width:900px){
  .sol-hero .box{padding:40px 22px}
  .scenes,.sol-grid{grid-template-columns:1fr}
  .evid{grid-template-columns:1fr 1fr}
  .bar{grid-template-columns:1fr;gap:8px}.bar .val{text-align:left}
  .tbl thead{display:none}.tbl tr{display:block;border-bottom:1px solid var(--line)}
  .tbl th,.tbl td{display:block;border:0;padding:8px 16px}.tbl tbody th{padding-top:18px;width:auto}
}

/* 메뉴 현재 위치 · 산업예제 드롭다운 */
.menu>a[aria-current]{color:var(--ink)}
.dd-panel .dd-all{border-top:1px solid var(--line);border-radius:0 0 12px 12px;margin-top:4px}
.dd-panel .dd-all b{font-size:14px;color:var(--brand)}
.finfo a{text-decoration:underline}

/* ══ AI BOX 장비 일러스트 ══ */
.abx{position:relative;height:400px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.abx-cams{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.abx-cam{background:#fff;border-radius:12px;padding:10px;box-shadow:0 10px 24px rgba(17,24,39,.07);font-size:11px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.abx-cam i{width:18px;height:12px;border-radius:3px;background:#334155;position:relative}
.abx-cam i:after{content:"";position:absolute;right:-5px;top:3px;border:3px solid transparent;border-left:5px solid #334155}
.abx-cam em{font-style:normal;margin-left:auto;font-size:10px;color:#ef4444}
.abx-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:26px}
.abx-flow span{position:relative}
.abx-flow span:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:repeating-linear-gradient(#94a3b8 0 4px,transparent 4px 8px);animation:flow 1s linear infinite}
@keyframes flow{to{background-position:0 8px}}
.abx-dev{position:relative;border-radius:18px;padding:20px 24px;background:linear-gradient(180deg,#3f4a5c,#1f2633);color:#e2e8f0;box-shadow:0 24px 48px rgba(17,24,39,.25),inset 0 1px 0 rgba(255,255,255,.12)}
.abx-dev .row1{display:flex;justify-content:space-between;align-items:center}
.abx-dev b{font-size:15px;letter-spacing:.08em}
.abx-dev .leds{display:flex;gap:6px}
.abx-dev .leds i{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}
.abx-dev .leds i:nth-child(2){animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.abx-dev .ports{display:flex;gap:8px;margin-top:16px}
.abx-dev .ports span{flex:1;height:16px;border-radius:4px;background:#0f141d;border:1px solid #4b5563}
.abx-dev .tags{display:flex;gap:6px;margin-top:14px}
.abx-dev .tags span{font-size:10px;font-weight:700;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.08)}
.abx-out{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.abx-out div{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 10px 24px rgba(17,24,39,.07)}
.abx-out small{display:block;font-size:10px;color:var(--ink-3);font-weight:600}
.abx-out b{font-size:17px}
.abx-out s{color:var(--ink-3);font-weight:600;font-size:13px;margin-right:6px}
.abx-out b.ok{color:#0f766e}

/* ══ 산업예제 — 그림 위주 압축 레이아웃 ══ */
.sol-hero .box.split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.sol-hero .box.split .lead{font-size:17px}
.sol-vis{position:relative}
.sol-vis .pframe{width:180px;position:absolute;right:-12px;bottom:-28px}
.ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--brand-soft);color:var(--brand)}
.ic svg{width:26px;height:26px}
.ic.v{background:#efeafe;color:#5b3df5}.ic.a{background:#ccfbf1;color:#0f766e}.ic.r{background:#fee2e2;color:#dc2626}
.scenes.v2 .scene{padding:28px}
.scenes.v2 .scene h4{font-size:19px;margin:16px 0 8px}
.scenes.v2 .scene p{font-size:15px}
.scenes.v2 .scene .cz{margin-top:auto;padding-top:16px;font-size:13px;color:var(--ink-3);line-height:1.55;border-top:1px dashed var(--line)}
.scenes.v2 .scene .cz b{color:var(--ink-2)}
.chain{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-weight:700;font-size:15px}
.chain span{padding:8px 14px;border-radius:99px;background:var(--bg-soft)}
.chain i{font-style:normal;color:var(--ink-3)}
.flow{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:0;margin-top:40px;align-items:stretch}
.flow .nd{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px 18px;text-align:center;margin:0 14px}
.flow .nd:not(:last-child):after{content:"";position:absolute;right:-22px;top:50%;width:16px;height:2px;background:#cbd5e1}
.flow .nd:not(:last-child):before{content:"";position:absolute;right:-24px;top:calc(50% - 4px);border:5px solid transparent;border-left:6px solid #cbd5e1}
.flow .nd .ic{margin:0 auto 12px}
.flow .nd b{display:block;font-size:17px}
.flow .nd small{display:block;margin-top:6px;color:var(--ink-2);font-size:13px;line-height:1.5}
.flow .nd.new{border:2px solid var(--brand);box-shadow:0 12px 30px rgba(47,91,234,.12)}
.flow .nd.new.v{border-color:#5b3df5}.flow .nd.new.a{border-color:#0f766e}
.flow .nd em{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11px;font-weight:700;background:var(--ink);color:#fff;padding:3px 8px;border-radius:99px;white-space:nowrap}
.more{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
.more summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;display:flex;justify-content:space-between}
.more summary::-webkit-details-marker{display:none}
.more summary:after{content:"+";font-weight:300;font-size:22px;line-height:1;color:var(--ink-3)}
.more[open] summary:after{content:"−"}
.more ul{margin:0 22px 20px 40px;color:var(--ink-2);line-height:1.75;font-size:15px}
.more p{margin:0 22px 20px;color:var(--ink-2);line-height:1.75;font-size:15px}
.steps.num.short .step span{font-size:14px}
@media (max-width:900px){
  .sol-hero .box.split{grid-template-columns:1fr}
  .sol-vis .pframe{width:130px;right:0}
  .flow{grid-template-columns:1fr;gap:20px}
  .flow .nd{margin:0}
  .flow .nd:not(:last-child):after,.flow .nd:not(:last-child):before{display:none}
}
/* 좁은 휴대폰 일러스트에서 제목줄 한 줄 유지 */
.pm-top{gap:6px;white-space:nowrap}
.cam-live{font-size:8px;padding:3px 6px;white-space:nowrap;flex:none}




/* 제품 페이지 (GATE · VCA) — 회사 사이트 안의 제품 소개. 숫자 · 사양은 제품 홈페이지가 정본 */
.phead{padding:96px 0 56px;text-align:center}
.phead .crumb{margin-bottom:28px}
.phead .badge{justify-content:center}
.phead .sub-tag{font-size:14px;color:var(--ink-3);font-weight:600;margin:6px 0 22px}
.phead h1{font-size:clamp(36px,5vw,60px);line-height:1.22;font-weight:700;letter-spacing:-.03em}
.phead p{margin:22px auto 0;max-width:760px;color:var(--ink-2);font-size:18px;line-height:1.7}
.phead .cta{justify-content:center}
.btn-text{color:var(--ink-2);padding:0 18px}.btn-text:hover{color:var(--ink)}
.ppanel{background:var(--tint);box-shadow:none;border-radius:28px;padding:64px 80px 0;overflow:hidden}
.ppanel>div{max-width:960px;margin:0 auto;border-radius:16px 16px 0 0}
.pprob{padding:140px 0 120px;text-align:center}
.pprob h2{font-size:clamp(26px,3.6vw,40px);line-height:1.45;font-weight:700;letter-spacing:-.02em}
.pprob h2 span{color:var(--ink-3)}
.pprob p{margin-top:20px;color:var(--ink-2);font-size:17px}
.prows{padding:0 0 40px}
.prow{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center;margin-bottom:120px}
.prow.flip .pvis{order:2}
.pvis{background:var(--bg-soft);border-radius:var(--r-lg);padding:40px;display:grid;place-items:center;min-height:360px}
.pvis>div{width:100%}
.ptxt small{font-size:14px;font-weight:700;letter-spacing:.02em}
.ptxt h3{font-size:clamp(24px,2.6vw,32px);line-height:1.38;font-weight:700;letter-spacing:-.02em;margin:12px 0 18px}
.ptxt p{color:var(--ink-2);font-size:17px;line-height:1.75}
.pcode{padding:0!important;background:none!important;display:block!important}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.pcard h4{font-size:19px;margin-bottom:8px}.pcard p{color:var(--ink-2);font-size:15px;line-height:1.65}
.puses{padding:120px 0}
.puse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.puse{display:flex;flex-direction:column;gap:8px;background:var(--bg-soft);border-radius:var(--r-lg);padding:28px;transition:.2s}
.puse b{font-size:19px}.puse span{color:var(--ink-2);font-size:15px;line-height:1.65}
.puse em{font-style:normal;font-size:14px;font-weight:600;color:var(--ink-3);margin-top:8px}
.puse:hover{box-shadow:0 12px 32px rgba(17,24,39,.08)}.puse:hover em{color:var(--ink)}
.pband{background:var(--bg-dark);color:#fff;border-radius:var(--r-lg);padding:56px 64px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.pband h3{font-size:28px;line-height:1.4;font-weight:700}
.pband p{color:#cbd5e1;margin-top:12px}
.pband-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn-light{background:#fff;color:var(--ink)}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:#fff}.btn-ghost:hover{border-color:#fff}
.prel{margin-top:96px}
@media (max-width:900px){.ppanel{padding:28px 20px 0}.prow{grid-template-columns:1fr;gap:28px;margin-bottom:72px}.prow.flip .pvis{order:0}.pvis{padding:20px;min-height:0}.pcards,.puse-grid{grid-template-columns:1fr}.pband{flex-direction:column;align-items:flex-start;padding:36px 28px}.pprob{padding:88px 0 72px}}
.phead h1 em{font-style:normal;color:var(--brand)}
.ppanel>div{box-shadow:0 -12px 48px rgba(0,0,0,.18)}
.pvis:has(.pcode){min-height:0}
.phead{padding:104px 0 64px}.phead .badge{font-size:22px;margin-bottom:22px}.phead .badge i{width:30px;height:30px}.phead .cta{margin-top:40px}
/* 메뉴 펼침 글자 굵기 — 이름은 보통보다 조금 굵게, 설명은 보통 */
.dd-item b{font-weight:500}
.dd-item small{font-weight:400}
.dd-item i{font-weight:600}
.dd-panel .dd-all b{font-weight:500}
.mnav a{font-weight:500}
.mnav a.sub span{font-weight:400}
.mnav small{font-weight:600}
.finfo{font-size:12px;line-height:1.8}

/* 제품 페이지 키 이미지 · 장면 탭 · 단순 그림 (옥텟 참고) */
.pkey{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:16/8}
.pkey img{width:100%;height:100%;object-fit:cover;display:block}
.pwho{padding:140px 0 120px;text-align:center}
.pwho h2{font-size:clamp(26px,3.4vw,40px);line-height:1.4;font-weight:700;letter-spacing:-.02em}
.pwho h2 span{color:var(--ink-3)}
.pwho-pic{position:relative;width:min(520px,100%);aspect-ratio:5/6;margin:64px auto 0;border-radius:20px;overflow:hidden;background:var(--bg-soft)}
.pwho-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.pwho-pic img.on{opacity:1}
.pwho-tabs{display:flex;justify-content:center;gap:12px;margin-top:28px}
.pwho-tabs button{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 18px;border-radius:18px;font-size:15px;font-weight:600;color:var(--ink-2);transition:.2s}
.pwho-tabs button span{width:64px;height:64px;border-radius:50%;background:center/cover}
.pwho-tabs button.on{background:var(--bg-soft);color:var(--ink)}
.ptxt h3 span{color:var(--ink-3)}
.il{background:var(--bg-soft);border-radius:var(--r-lg);min-height:380px;width:100%;display:grid;place-items:center;padding:48px}
.ilc{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(17,24,39,.06),0 8px 24px rgba(17,24,39,.06);padding:28px;width:min(360px,100%);text-align:left}
.ilh{font-size:17px;font-weight:700;margin-bottom:18px}
.av{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e8e4ff;flex:none}
.av svg{width:28px;height:28px;fill:#8b78f5}
body:not(.vca) .av{background:#e3ebff}body:not(.vca) .av svg{fill:#6b8cff}
.ilrow{display:flex;align-items:center;gap:12px;font-size:15px}
.ilchips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}
.ilchips span{font-size:13px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.ilbtn{height:42px;border-radius:10px;background:var(--vca,#5b3df5);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600}
.ilfoot{margin-top:14px;font-size:13px;color:var(--ink-3);text-align:center}
.iltrail{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;position:relative}
.iltrail:before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:#ddd6fe}
.iltrail li{display:grid;grid-template-columns:28px 1fr;column-gap:14px;align-items:center;position:relative}
.iltrail i{grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--vca,#5b3df5);color:#fff;font-style:normal;font-size:13px;font-weight:700;display:grid;place-items:center}
.iltrail b{font-size:15px}.iltrail span{font-size:13px;color:var(--ink-3)}
.ilpair{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ilc.sm{width:170px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:15px}
.ilc.sm .av{width:72px;height:72px}.ilc.sm .av svg{width:46px;height:46px}
.ilc.sm em{font-style:normal;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}
.ilc.sm em.ok{background:#dcfce7;color:#15803d}.ilc.sm em.no{background:#fee2e2;color:#b91c1c}
.ilc.sm.fake .av.ph{width:72px;height:72px;border-radius:8px;background:#f1f5f9;outline:2px dashed #fca5a5;outline-offset:3px}
.ilc.sm.fake .av.ph .av{background:transparent;width:56px;height:56px}
.ilflow{display:flex;align-items:center;gap:12px}
.ilflow .arr{color:var(--ink-3)}
.ilflow code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg-soft);padding:8px 10px;border-radius:8px;color:var(--ink-2)}
.ilrow2{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);margin-top:12px}
.ilrow2 .tag{color:var(--brand);font-weight:600}
.ilfoot.strike{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.il-ic{display:flex;gap:14px;align-items:center;justify-content:center}
.icol{display:flex;flex-direction:column;gap:14px}
.icc{background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(17,24,39,.06),0 8px 24px rgba(17,24,39,.05);padding:22px;width:190px;text-align:left;display:flex;flex-direction:column;gap:14px}
.icc svg{width:30px;height:30px;fill:none;stroke:var(--vca,var(--brand));stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icc b{font-size:15px;font-weight:600;line-height:1.45}
@media (max-width:900px){.pkey{aspect-ratio:4/3;border-radius:20px}.pwho{padding:88px 0 72px}.pwho-tabs{gap:4px}.pwho-tabs button{padding:10px}.pwho-tabs button span{width:52px;height:52px}.il{padding:24px;min-height:0}.icc{width:150px;padding:16px}.ilc.sm{width:140px}}

/* 다듬기 (11-09 검수) */
.lcard .pill{align-self:flex-start}
.soft .lcard:not(.dark){background:#fff}
.tab{white-space:nowrap}
@media (max-width:900px){
  .slide{grid-template-columns:minmax(0,1fr)}.slide>*{min-width:0}
  .vis,.hero-shot,.abx{max-width:100%;overflow:hidden}
  .abx-cams{grid-template-columns:repeat(2,1fr)}
  .sol-hero .box.split{grid-template-columns:minmax(0,1fr)}.sol-hero .box.split>*{min-width:0}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
}
@media (max-width:900px){.prow{grid-template-columns:minmax(0,1fr)}.prow>*{min-width:0}.il-ic{padding:20px;gap:10px}.icol{flex:1;min-width:0}.icc{width:auto}}
.v-receipt .row{gap:12px;white-space:nowrap}
.pband p br{display:none}
.phero .slide h1{font-size:clamp(32px,3.8vw,48px)}

/* POS · AI BOX 가치 그림 */
.ilpos{display:flex;flex-direction:column;align-items:center;gap:6px;width:240px;background:#111827;color:#fff;text-align:center;padding:32px 24px}
.ilpos .ring{padding:6px;border-radius:50%;border:3px solid var(--brand);margin-bottom:10px}
.ilpos .av{width:64px;height:64px;background:#1f2937}.ilpos .av svg{fill:#4b5563;width:40px;height:40px}
.ilpos span{color:#9ca3af;font-size:14px}.ilpos em{font-style:normal;font-size:12px;color:#86efac;margin-top:8px}
.ilbar{display:grid;grid-template-columns:72px 1fr 52px;align-items:center;gap:10px;font-size:13px;color:var(--ink-3);margin-top:12px}
.ilbar i{height:10px;border-radius:99px;background:#cbd5e1;display:block}
.ilbar b{font-size:14px;color:var(--ink-2);text-align:right}
.ilbar.win i{background:var(--abx,#0f766e)}.ilbar.win b{color:var(--abx,#0f766e)}
.ilchain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:22px;position:relative}
.ilchain li{background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(17,24,39,.06),0 8px 24px rgba(17,24,39,.05);padding:16px 22px;width:240px;display:flex;justify-content:space-between;align-items:center;position:relative}
.ilchain li:not(:last-child):after{content:"";position:absolute;left:50%;bottom:-22px;width:2px;height:22px;background:#cbd5e1}
.ilchain li b{font-size:15px}.ilchain li span{font-size:13px;color:var(--ink-3)}
.ilchain li.on{background:var(--abx,#0f766e);color:#fff}.ilchain li.on span{color:#ccfbf1}
.abxp .icc svg{stroke:var(--abx)}
body[data-page=pos] .icc svg{stroke:#111827}
/* 흐름: 번호 + 화살표 (POS 결제 흐름) */
.steps.flowline{counter-reset:st;gap:20px}
.steps.flowline .step:before{counter-increment:st;content:counter(st);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:700;margin-bottom:12px}
.steps.flowline .step.ours:before{background:#fff;color:var(--brand)}
.steps.flowline .step:not(:last-child):after{content:"";position:absolute;right:-14px;top:50%;width:8px;height:8px;border-top:2px solid #94a3b8;border-right:2px solid #94a3b8;transform:translateY(-50%) rotate(45deg)}
@media (max-width:900px){.steps.flowline{grid-template-columns:1fr;gap:22px}.steps.flowline .step:not(:last-child):after{right:auto;left:50%;top:auto;bottom:-15px;transform:translateX(-50%) rotate(135deg)}}
/* 맞는 자리 꼬리표: 초록 · 빨강 대신 무채색 */
.fit .pill{background:var(--ink);color:#fff}
.fit .pill.no{background:#f1f5f9;color:var(--ink-2)}
.fit .lcard.dark .pill{background:#fff;color:var(--ink)}
.pstats{display:flex;gap:40px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.pstats b{display:block;font-size:28px;font-weight:700;letter-spacing:-.02em}
.pstats span{display:block;margin-top:4px;font-size:13px;color:var(--ink-3)}
body[data-page=pos] .ilchain li.on{background:#111827}body[data-page=pos] .ilchain li.on span{color:#cbd5e1}
/* 바닥글: 로고는 왼쪽, 링크 묶음은 콘텐츠 오른쪽 끝에 맞춤 */
.fgrid>div:first-child{margin-right:auto}
#ft .logo{display:flex;align-items:center;gap:8px}
.pwho-tabs{gap:14px}.pwho-tabs button{padding:6px;border-radius:50%}.pwho-tabs button span{width:56px;height:56px;opacity:.55;transition:.2s}.pwho-tabs button.on{background:none}.pwho-tabs button.on span{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.plink{display:inline-block;margin-top:18px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
section.soft:has(.platform){margin-bottom:96px}

/* 홈 제품 네 장 — 한 화면에 펼침 */
.pcards4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.pcard2{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;transition:.2s}
.pcard2:hover{box-shadow:0 16px 40px rgba(17,24,39,.10);transform:translateY(-2px)}
.pc-img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft)}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block}
.pc-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.pc-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-name i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700;font-size:12px}
.pc-name b{font-size:16px}.pc-name small{font-size:13px;color:var(--ink-3)}
.pcard2 h3{font-size:18px;line-height:1.45;font-weight:700;margin:14px 0 8px;letter-spacing:-.01em}
.pcard2 p{font-size:14px;color:var(--ink-3);line-height:1.6}
.pcard2 span{margin-top:auto;padding-top:18px;font-size:14px;font-weight:600;color:var(--ink-2)}
.pcard2:hover span{color:var(--ink)}
@media (max-width:1100px){.pcards4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pcards4{grid-template-columns:1fr}}

/* 홈: 슬라이드 아래 제품 이름표 */
.dots.named,.dots{gap:6px;margin-top:20px}
.dots button{width:auto;height:auto;padding:7px 14px;border-radius:99px;background:transparent;color:var(--ink-3);font-size:14px;font-weight:600}
.dots button.on{width:auto;background:var(--ink);color:#fff}
/* 홈: 회사 한 문장 + 인증 줄 */
.coline{padding:96px 0 80px;text-align:center}
.co-one{font-size:clamp(22px,2.8vw,34px);line-height:1.5;font-weight:600;letter-spacing:-.02em;color:var(--ink-2)}
.co-one b{color:var(--ink);font-weight:700}
.co-link{display:inline-block;margin-top:18px;font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px}
.certrow{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
.cert-i{padding:26px 24px}.cert-i+.cert-i{border-left:1px solid var(--line)}
.cert-i b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em}
.cert-i span{display:block;margin-top:6px;font-size:14px;color:var(--ink-3)}
/* 홈: 생체정보 다루는 방식 */
.dsec{padding:120px 0}
.dgrid{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}
.dline{padding:24px 0;border-top:1px solid var(--line)}.dline:last-child{border-bottom:1px solid var(--line)}
.dline b{display:block;font-size:19px}.dline span{display:block;margin-top:6px;color:var(--ink-2);font-size:15px}
@media (max-width:900px){.certrow{grid-template-columns:1fr 1fr}.cert-i:nth-child(3){border-left:0}.cert-i:nth-child(n+3){border-top:1px solid var(--line)}.dgrid{grid-template-columns:1fr;gap:32px}.dots button{padding:6px 10px;font-size:13px}}
/* 제품 알파벳 네모(G · V · P · A) 숨김 — 회사 로고 U는 유지 */
.prod>i,.rcard>i,.pc-name>i,.dd-item>i,.phead .badge>i,.slide .badge>i{display:none!important}
.prod small{margin-top:0!important}
.phead .badge,.slide .badge{gap:0}
/* 회사 소개: 소식(기사) */
.newssec{padding:96px 0}
.newsgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.news{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;transition:.2s}
.news:hover{border-color:var(--ink)}
.news small{font-size:13px;color:var(--ink-3);font-weight:600}
.news b{font-size:18px;line-height:1.5}
.news span{margin-top:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
@media (max-width:900px){.newsgrid{grid-template-columns:1fr}}
/* 회사 로고 이미지 */
.logo img{display:block;height:28px;width:auto}
#ft .logo img{height:26px;opacity:.85}
@media (max-width:900px){.logo img{height:24px}}
/* 회사 소개: 구역마다 다른 모양 (카드 반복 줄이기) */
/* 원칙 — 카드 대신 큰 글자 2×2 목록 */
body[data-page=company] .ways{grid-template-columns:repeat(2,1fr)!important;gap:0 64px!important}
body[data-page=company] .way{background:none!important;border-radius:0!important;padding:28px 0!important;border-top:1px solid #d9dde3;display:grid;grid-template-columns:44px 1fr;column-gap:20px;align-items:start}
body[data-page=company] .way-ic{grid-row:span 2;background:#fff!important}
body[data-page=company] .way h4{font-size:24px!important;margin:4px 0 8px!important}
body[data-page=company] .way p{font-size:16px!important}
/* 제품 — 카드 대신 가로 줄 목록 */
body[data-page=company] .prods{display:block!important;border-top:1px solid var(--line)}
body[data-page=company] .prod{display:grid!important;grid-template-columns:180px 220px 1fr auto;align-items:center;gap:24px;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:28px 8px!important}
body[data-page=company] .prod:hover{background:var(--bg-soft)}
body[data-page=company] .prod h4{order:-1;font-size:24px!important;margin:0!important}
body[data-page=company] .prod small{margin:0!important;font-size:14px}
body[data-page=company] .prod p{margin:0;font-size:15px;color:var(--ink-2)}
body[data-page=company] .prod span{margin:0!important;white-space:nowrap}
/* 인증 — 카드 대신 이름이 큰 한 줄 */
body[data-page=company] .certs{grid-template-columns:repeat(6,1fr)!important;gap:0!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body[data-page=company] .cert{background:none!important;border-radius:0!important;padding:28px 20px!important}
body[data-page=company] .cert+.cert{border-left:1px solid var(--line)}
body[data-page=company] .cert b{background:none!important;box-shadow:none!important;padding:0!important;font-size:22px!important;letter-spacing:-.01em}
body[data-page=company] .cert h4{font-size:14px!important;font-weight:600;color:var(--ink-2);margin:10px 0 0!important}
body[data-page=company] .cert p{display:none}
@media (max-width:1100px){body[data-page=company] .certs{grid-template-columns:repeat(3,1fr)!important}body[data-page=company] .cert:nth-child(4){border-left:0}body[data-page=company] .cert:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:900px){body[data-page=company] .ways{grid-template-columns:1fr!important}body[data-page=company] .prod{grid-template-columns:1fr auto;gap:6px 16px}body[data-page=company] .prod small,body[data-page=company] .prod p{grid-column:1}body[data-page=company] .prod span{grid-row:1;grid-column:2}body[data-page=company] .certs{grid-template-columns:repeat(2,1fr)!important}body[data-page=company] .cert:nth-child(odd){border-left:0}body[data-page=company] .cert:nth-child(n+3){border-top:1px solid var(--line)}}
/* 제품 줄: 설명과 「자세히 →」 사이 여백 */
body[data-page=company] .prod p{max-width:560px}
body[data-page=company] .prod span{justify-self:end;padding-left:64px}
@media (max-width:900px){body[data-page=company] .prod span{padding-left:0}}
body[data-page=company] .soft .prod:hover{background:#fff}
/* 상단 「제품」 화살표: 글자와 간격 넓히고 조금 가늘게 */
.dd-btn{gap:10px}
.dd-btn:after{width:6px;height:6px;border-right-width:1.5px;border-bottom-width:1.5px}
/* GATE 페이지: 플랫폼 구조 구역은 흰 바탕, 안쪽 상자는 연회색 */
.gplat{padding:40px 0 120px}
.gplat .layer:not(.core){background:var(--bg-soft)}
.gplat .chip:not(.on):not(.soon){background:#fff}
.pwho-text{padding:120px 0 72px}
/* 대문 사진 여러 장 — 천천히 바뀜 */
.pkey-slides{position:relative}
.pkey-slides img{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.pkey-slides img.on{opacity:1}
.pk-dots{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:6px}
.pk-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.5);transition:.3s}
.pk-dots i.on{width:20px;background:#fff}
/* 관련 제품 구역을 뺀 뒤 문의 띠 아래 여백 */
.pband{margin-bottom:24px}
/* POS 결제 흐름: 인증 구간도 POS 색(진한 남색)으로 */
body[data-page=pos] .step.ours{background:#111827;border-color:#111827}
body[data-page=pos] .step.ours .no,body[data-page=pos] .step.ours span{color:#cbd5e1}
body[data-page=pos] .steps.flowline .step.ours:before{background:#fff;color:#111827}
body[data-page=pos] .eyebrow{color:#111827}
/* POS: GATE 파랑이 남아 있던 곳을 POS 남색 계열로 */
body[data-page=pos] .phead h1 em{color:#111827}
body[data-page=pos] .ilpos .ring{border-color:#e5e7eb}
body[data-page=pos] .av{background:#eef0f3}
body[data-page=pos] .av svg{fill:#9ca3af}
body[data-page=pos] .ilpos .av{background:#1f2937}body[data-page=pos] .ilpos .av svg{fill:#4b5563}
/* POS 색: 차분한 주황 (#EA580C) — 강조 · 작은 제목 · 아이콘 · 결제 흐름 인증 구간 */
body[data-page=pos]{--pos:#ea580c}
body[data-page=pos] .phead h1 em{color:var(--pos)}
body[data-page=pos] .eyebrow,body[data-page=pos] .ptxt small{color:var(--pos)!important}
body[data-page=pos] .icc svg{stroke:var(--pos)}
body[data-page=pos] .step.ours{background:var(--pos);border-color:var(--pos)}
body[data-page=pos] .step.ours .no,body[data-page=pos] .step.ours span{color:#ffedd5}
body[data-page=pos] .steps.flowline .step.ours:before{background:#fff;color:var(--pos)}
body[data-page=pos] .ilchain li.on{background:var(--pos)}body[data-page=pos] .ilchain li.on span{color:#ffedd5}
body[data-page=pos]{--pos:#b5562e}
body[data-page=pos]{--pos:#9a3412}
/* 제품마다 다른 가치 그림 (아이콘 카드 대신) */
/* GATE — 코드 창 */
.ilcode{width:min(420px,100%);background:#0b1220;border-radius:16px;padding:18px 20px 16px;box-shadow:0 12px 32px rgba(17,24,39,.18);text-align:left}
.ilcode .seg{display:inline-flex;background:#1f2937;border-radius:99px;padding:3px;margin-bottom:14px}
.ilcode .seg span{font-size:12px;font-weight:600;color:#9ca3af;padding:5px 12px;border-radius:99px}
.ilcode .seg span.on{background:var(--brand);color:#fff}
.ilcode pre{margin:0;font:12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e5e7eb;white-space:pre-wrap}
.ilcode .k{color:#93b4ff}.ilcode .c{color:#64748b}.ilcode .s{color:#86efac}.ilcode .v{color:#fcd34d}
.ilcode .ilnote{margin-top:12px;font-size:12px;color:#9ca3af}
/* VCA — 기존 카메라 → VCA → 결과 */
.ilflowv{display:flex;align-items:center;gap:14px;width:100%;justify-content:center}
.ilflowv .cams{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ilflowv .cams li{background:#fff;border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--ink-2);box-shadow:0 1px 2px rgba(17,24,39,.06)}
.ilflowv .arr{color:var(--ink-3)}
.ilflowv .vbox{background:#fff;border-radius:14px;padding:16px;width:210px;box-shadow:0 8px 24px rgba(17,24,39,.08);text-align:left}
.ilflowv .vbox>b{color:var(--vca,#5b3df5);font-size:16px}.ilflowv .vbox>small{display:block;font-size:11px;color:var(--ink-3);margin:2px 0 10px}
.ilflowv .res{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.ilflowv .res b{display:block;font-size:13px}.ilflowv .res small{font-size:11.5px;color:var(--ink-3)}
.ilflowv .dot{width:8px;height:8px;border-radius:50%;flex:none}.ilflowv .dot.car{background:var(--vca,#5b3df5)}.ilflowv .dot.fire{background:#ef4444}
/* POS — 단말 결제 수단 화면 */
.ilterm{width:260px;background:#111827;border-radius:18px;padding:20px;color:#fff;text-align:left;box-shadow:0 12px 32px rgba(17,24,39,.2)}
.ilterm .ilh{color:#fff;font-size:15px;margin-bottom:14px}
.ilterm .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ilterm .opts span{border:1px solid #374151;border-radius:10px;padding:12px;font-size:13px;color:#d1d5db;text-align:center}
.ilterm .opts span.on{border-color:var(--pos,#9a3412);background:var(--pos,#9a3412);color:#fff}
.ilterm .hint{margin-top:14px;font-size:12px;color:#9ca3af;text-align:center}
.ilterm .rcpt{margin:14px auto 0;width:70%;background:#fff;color:var(--ink-2);font-size:11px;text-align:center;padding:8px 0;border-radius:2px 2px 6px 6px}
/* AI BOX — 얼굴 검색 결과 창 */
.ilsearch .q{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ilsearch .q .av{width:32px;height:32px}.ilsearch .q .av svg{width:20px;height:20px}
.ilsearch .q b{font-size:14px}.ilsearch .q em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--abx,#0f766e)}
.ilsearch ul{list-style:none;margin:8px 0;padding:0}
.ilsearch li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;color:var(--ink-2)}
.ilsearch li .av{width:28px;height:28px;border-radius:6px}.ilsearch li .av svg{width:18px;height:18px}
.abxp .av{background:#ccfbf1}.abxp .av svg{fill:#0f766e}
.ilsearch .stat{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;padding-top:10px;border-top:1px solid var(--line)}
.ilsearch .lock{color:var(--ink-2);font-weight:600}.ilsearch .off{color:var(--abx,#0f766e)}
@media (max-width:560px){.ilflowv{flex-direction:column}.ilflowv .cams{flex-direction:row;flex-wrap:wrap;justify-content:center}.ilflowv .arr{transform:rotate(90deg)}}
.v-pos .ring{border-color:var(--ring,var(--brand))}
/* VCA 검색 그림: 검색 버튼이 칩 줄 끝에 같이 서도록 */
.vs-filters{flex-wrap:nowrap;gap:5px}
.vs-filters span{padding:4px 8px;white-space:nowrap}
.vs-filters b{white-space:nowrap;flex:none;padding:5px 10px}
@media (max-width:560px){.vs-filters{flex-wrap:wrap}}

/* 대문 슬라이드 설명: 문장마다 줄을 나누고, 문장 안은 폭에 맞춰 바뀜 */
.slide p .sn{display:block}
.slide p{margin-top:24px}

/* 대문 슬라이드 탭: 검정 알약 대신 글자 + 진행 막대 (검정은 버튼 하나만) */
.dots,.dots.named{gap:24px;margin-top:22px}
.dots button{position:relative;width:auto;height:auto;padding:0 0 10px;min-width:56px;border-radius:0;background:transparent;color:var(--ink-3);font-size:14px;font-weight:600;transition:color .3s}
.dots button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#e5e7eb}
.dots button::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:var(--ink);z-index:1}
.dots button:hover{color:var(--ink-2)}
.dots button.on{width:auto;background:transparent;color:var(--ink)}
.dots button.on::before{animation:dotfill 6s linear forwards}
@keyframes dotfill{to{width:100%}}
@media (max-width:640px){.dots,.dots.named{gap:16px}.dots button{min-width:48px;padding:0 0 8px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.dots button.on::before{animation:none;width:100%}}
/* 홈 POS 단말: 원 안에 실제 얼굴 */
.v-pos .ring img{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block}
.v-pos .ring:has(img):after{display:none}

/* 제품 페이지 첫 화면: 왼쪽 정렬 + 사진 슬라이드는 화면 폭 전체 */
.phead{text-align:left;padding:96px 0 48px}
.phead .badge{justify-content:flex-start}
.phead p{margin-left:0}
.phead .cta{justify-content:flex-start;margin-top:36px}
.pkey-full .pkey{border-radius:0;aspect-ratio:auto;height:min(68vh,640px);min-height:360px}
.pkey-full .pk-dots{left:auto;right:max(24px,calc((100vw - 1200px)/2));transform:none;bottom:24px}
@media (max-width:760px){.phead{padding:64px 0 32px}.pkey-full .pkey{height:auto;min-height:0;aspect-ratio:4/3}.pkey-full .pk-dots{right:16px;bottom:14px}}
/* 꽉 찬 폭은 넓은 화면에서 머리가 잘려 되돌림: 본문 폭 안, 사진 비율 유지 */
.pkey-full{max-width:var(--max);margin:0 auto;padding:0 24px}
.pkey-full .pkey{border-radius:20px;height:auto;min-height:0;aspect-ratio:16/8}
.pkey-full .pk-dots{right:20px;bottom:18px}
@media (max-width:760px){.pkey-full{padding:0 16px}.pkey-full .pkey{aspect-ratio:4/3;border-radius:16px}.pkey-full .pk-dots{right:14px;bottom:12px}}

/* 제품 첫 화면 버튼: 헤더 「도입 문의」(검정 채움)와 겹쳐 보여 흰 바탕 + 검정 선 */
.phead .cta .btn-dark{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.phead .cta .btn-dark:hover{background:var(--ink);color:#fff}
/* 테두리 살짝 연하게 + 크기 줄임 (52 → 44px) */
.phead .cta .btn-dark{box-shadow:inset 0 0 0 1.5px var(--ink-2);height:44px;padding:0 20px;font-size:15px;border-radius:10px}
.phead .cta .btn-dark:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* 살짝만: 52 → 46px */
.phead .cta .btn-dark{height:46px;padding:0 22px;font-size:15px}

/* AI BOX: 어느 현장에서 얼마나 — 두 카드 */
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.wcard{padding:28px;border-radius:16px;background:var(--bg-soft)}
.wcard .wtag{display:inline-block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:14px}
.wcard.win .wtag{color:var(--abx)}
.wcard h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
.wcard small{display:block;margin-top:6px;font-size:14px;color:var(--ink-3)}
.wcard p{margin-top:16px;font-size:15px;line-height:1.7;color:var(--ink-2)}
@media (max-width:760px){.wcards{grid-template-columns:1fr}.wcard{padding:22px}}

/* 회사 소개 「걸어온 길」: 스크롤 따라 진행선이 내려오고, 지나온 해만 밝아짐 (VCA 홈페이지에서 옮김) */
.pgl{position:relative;padding-left:32px}
.pgl::before,.pgl::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--line)}
.pgl::after{background:var(--brand);transform-origin:top;transform:scaleY(var(--p,0))}
.pgl>.tl-row{transition:opacity .45s ease-out}
.pgl>.tl-row:not(.lit){opacity:.3}
@media (max-width:760px){.pgl{padding-left:18px}}
@media (prefers-reduced-motion:reduce){.pgl::after{transform:none}.pgl>.tl-row:not(.lit){opacity:1}}

/* 아이패드 · 휴대폰: 대문 슬라이드 그림이 폭을 따라 커져 슬라이드가 1,500px까지 늘던 것 — PC에서 보이던 크기로 묶음 */
@media (max-width:900px){
  #track .slide>:nth-child(2){width:100%;max-width:520px;margin:0 auto}
  #track .slide{padding-top:40px;padding-bottom:40px}
}
@media (max-width:560px){
  .v-receipt{width:52%;padding:12px;bottom:28px}
  .v-receipt .row{gap:8px;font-size:11px}
}
@media (max-width:900px){
  #track .vs-grid{grid-template-columns:repeat(4,1fr)!important}
  #track .gd-row{grid-template-columns:repeat(4,1fr) 1.15fr!important}
  #track .gd-row2{grid-template-columns:2fr 1fr!important}
}
@media (max-width:560px){
  #track .hero-shot,#track .ui{zoom:.72}
  #track .slide>:nth-child(2){max-width:none}
}
@media (max-width:560px){
  .v-pos{left:6%;width:50%}
  .v-receipt{width:47%;bottom:14px;right:0}
}

/* GATE를 가리키는 곳은 GATE 서비스(콘솔 · 데모 앱 · univsgate.com) 주 색 #006FFF */
body[data-page=gate]{--brand:#006fff;--brand-soft:#eff9ff}

/* 바닥글 인증 배지: 흑백 · 작게 (iBeta Level 2) */
.fbadges{display:flex;gap:12px;margin-top:20px}
.fbadges img{height:40px;width:auto;opacity:.75}

/* 사진 넘김 점: 누를 수 있게 — 보이는 점은 그대로, 누르는 자리는 넉넉히 */
.pk-dots{gap:2px;z-index:2}
.pk-dots i{position:relative;cursor:pointer;margin:0 3px}
.pk-dots i::before{content:"";position:absolute;inset:-10px -4px}
.pk-dots i:hover:not(.on){background:rgba(255,255,255,.85)}
.pk-dots i:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pkey-slides{touch-action:pan-y;user-select:none}
.pkey-slides img{-webkit-user-drag:none}

/* UNIVS GATE 사진 위 「인증된 순간」 카드: 기계가 아니라 그 안에서 도는 소프트웨어로 읽히게 */
.pk-cap{position:absolute;left:24px;bottom:24px;display:flex;gap:12px;align-items:center;padding:14px 18px 14px 14px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;box-shadow:0 8px 24px rgba(17,24,39,.14);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;pointer-events:none;z-index:1}
.pk-cap.on{opacity:1;transform:none}
.pk-cap .ck{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eff9ff;color:#006fff}
.pk-cap .ck svg{width:16px;height:16px}
.pk-cap small{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:#006fff}
.pk-cap b{display:block;font-size:15px;font-weight:700;color:#111827;margin-top:1px}
.pk-cap em{display:block;font-style:normal;font-size:13px;color:#4b5563;margin-top:1px}
.phead .badge .bsub{font-size:14px;font-weight:600;color:var(--ink-3);margin-left:10px}
@media (max-width:760px){.pk-cap{left:12px;bottom:12px;padding:10px 12px 10px 10px;gap:10px}.pk-cap .ck{width:26px;height:26px}.pk-cap b{font-size:13px}.pk-cap em{font-size:11px}.phead .badge .bsub{display:block;margin:4px 0 0;font-size:12px}}
@media (max-width:760px){.phead .badge{flex-wrap:wrap}.phead .badge .bsub{flex-basis:100%;margin:6px 0 0}}
/* 인증 카드는 시선이 가는 오른쪽 위로 */
.pk-cap{left:auto;right:24px;bottom:auto;top:24px;transform:translateY(-8px)}
.pk-cap.on{transform:none}
@media (max-width:760px){.pk-cap{left:auto;right:12px;bottom:auto;top:12px}}
/* 완료 체크: 연한 원이 흰 카드에 묻혀서 GATE 파랑으로 채우고 체크는 흰색 */
.pk-cap .ck{background:#006fff;color:#fff}
/* 완료 카드 위아래 여백 넉넉히 + 줄 사이 살짝 */
.pk-cap{padding:18px 22px 18px 18px;gap:14px}
.pk-cap small{line-height:1.3}
.pk-cap b{margin-top:3px;line-height:1.35}
.pk-cap em{margin-top:3px;line-height:1.4}
@media (max-width:760px){.pk-cap{padding:12px 14px 12px 12px;gap:10px}}
/* 밝은 사진 위에서 카드 가장자리가 묻히지 않게 가는 선 */
.pk-cap{border:1px solid rgba(17,24,39,.08)}

/* 완료 카드: 소프트웨어 인증이라는 게 보이게 — 인증 수단 · 판정 단계 칩 */
.pk-cap small i{font-style:normal;color:#64748b;font-weight:600;margin-left:4px}
.pk-cap .pc-chips{display:flex;gap:4px;margin-top:6px}
.pk-cap .pc-chips i{font-style:normal;font-size:11px;font-weight:600;line-height:1;padding:4px 7px;border-radius:6px;background:#eff9ff;color:#0059cc}
.pk-cap em{margin-top:6px}
@media (max-width:760px){.pk-cap .pc-chips i{font-size:10px;padding:3px 6px}}

/* 단말기 → 카드 잇는 선 */
.pk-link{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.pk-link line{stroke:#006fff;stroke-width:1.5}
.pk-link line.h{stroke:rgba(255,255,255,.9);stroke-width:4}
.pk-link circle{fill:#006fff}
.pk-link circle.ring{fill:rgba(0,111,255,.18);stroke:#fff;stroke-width:1.5}
.pk-cap{z-index:2}
@media (max-width:760px){.pk-link{display:none}}
/* 단말기 → 카드 선은 뺌(11-10 사용자: 이상함) */
.pk-link{display:none!important}

/* UNIVS GATE 첫 화면: 사진 대신 「여러 앱 안의 같은 인증」 — 소프트웨어로 읽히게 */
.gapps{margin:0;border-radius:20px;background:linear-gradient(180deg,#f5f8ff,#eef3fb);border:1px solid #e6ebf3;padding:56px 24px 48px;overflow:hidden;position:relative}
.gapps::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,111,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,111,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.ga-row{position:relative;display:flex;justify-content:center;align-items:center;gap:22px}
.ga-ph{flex:none;width:184px;border-radius:30px;background:#111827;padding:7px;box-shadow:0 18px 40px rgba(17,24,39,.14);transform:scale(.9);opacity:.92}
.ga-ph.main{width:212px;transform:none;opacity:1;box-shadow:0 26px 56px rgba(0,111,255,.18)}
.ga-scr{border-radius:24px;background:#fff;padding:18px 14px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:330px}
.ga-ph.main .ga-scr{min-height:380px}
.ga-top{align-self:stretch;display:flex;align-items:center;gap:7px;padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid #eef1f6}
.ga-top i{width:18px;height:18px;border-radius:6px;background:var(--ac)}
.ga-top b{font-size:12px;font-weight:700;color:#111827}
.ga-face{position:relative;width:96px;height:96px}
.ga-ph.main .ga-face{width:116px;height:116px}
.ga-face svg{width:100%;height:100%;border-radius:50%;display:block}
.ga-ring{position:absolute;inset:-7px;border-radius:50%;border:2.5px solid #006fff}
.ga-ok{position:absolute;right:-4px;bottom:0;width:28px;height:28px;border-radius:50%;background:#006fff;color:#fff;display:grid;place-items:center;border:2.5px solid #fff}
.ga-ok svg{width:14px;height:14px}
.ga-act{margin-top:22px;font-size:15px;font-weight:700;color:#111827}
.ga-ph.main .ga-act{font-size:17px}
.ga-sub{margin-top:4px;font-size:11.5px;color:#64748b}
.ga-pow{margin-top:auto;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#0059cc;background:#eff9ff;border-radius:99px;padding:5px 10px}
.ga-pow i{width:6px;height:6px;border-radius:50%;background:#006fff}
@media (max-width:1100px){.ga-ph:first-child,.ga-ph:last-child{display:none}}
@media (max-width:760px){.gapps{padding:36px 0 32px;border-radius:16px}.ga-row{gap:10px}.ga-ph{width:150px;border-radius:24px;padding:5px}.ga-ph.main{width:168px}.ga-scr{border-radius:20px;min-height:270px;padding:14px 10px 12px}.ga-ph.main .ga-scr{min-height:300px}.ga-face{width:78px;height:78px}.ga-ph.main .ga-face{width:90px;height:90px}.ga-ph:nth-child(2){display:none}}

/* UNIVS GATE 첫 화면: 하나의 UNIVS GATE → 여러 앱 (휴대폰 그림 대신) */
.ghub{margin:0;position:relative;border-radius:20px;background:linear-gradient(180deg,#f5f8ff,#eef3fb);border:1px solid #e6ebf3;padding:64px 40px 60px;overflow:hidden}
.ghub::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,111,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,111,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(75% 75% at 50% 40%,#000,transparent);-webkit-mask-image:radial-gradient(75% 75% at 50% 40%,#000,transparent);pointer-events:none}
.gh-node{position:relative;margin:0 auto;width:max-content;background:#fff;border:2px solid #006fff;border-radius:18px;padding:20px 32px;text-align:center;box-shadow:0 16px 40px rgba(0,111,255,.16)}
.gh-node b{display:block;font-size:24px;font-weight:800;letter-spacing:-.01em;color:#0b1220}
.gh-node small{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-size:13px;font-weight:600;color:#0059cc}
.gh-node small span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#eff9ff;color:#006fff}
.gh-node small svg{width:16px;height:16px}
.gh-stem{position:relative;width:2px;height:36px;margin:0 auto;background:#9cc4ff}
.gh-apps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.gh-apps::before{content:"";position:absolute;top:0;left:10%;right:10%;height:2px;background:#9cc4ff}
.gh-app{display:flex;flex-direction:column;align-items:center}
.gh-drop{position:relative;width:2px;height:32px;background:#9cc4ff;overflow:visible}
.gh-drop i{position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;background:#006fff;box-shadow:0 0 0 3px rgba(0,111,255,.18);animation:ghflow 2.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes ghflow{0%{top:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:28px;opacity:0}}
.gh-card{width:100%;max-width:190px;background:#fff;border:1px solid #e3e8f0;border-radius:16px;padding:18px 14px;text-align:center;box-shadow:0 6px 18px rgba(17,24,39,.05)}
.gh-ic{display:block;width:36px;height:36px;margin:0 auto 10px;border-radius:11px;background:var(--ac);opacity:.9}
.gh-card b{display:block;font-size:15px;font-weight:700;color:#111827}
.gh-card small{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;font-weight:600;color:#0059cc;background:#eff9ff;border-radius:99px;padding:5px 10px}
.gh-card small svg{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){.gh-drop i{animation:none;top:12px}}
@media (max-width:760px){.ghub{padding:40px 16px 36px;border-radius:16px}.gh-node{padding:16px 22px}.gh-node b{font-size:20px}
 .gh-apps{grid-template-columns:repeat(2,1fr);gap:10px;padding-top:14px;border-top:2px solid #9cc4ff}.gh-apps::before{display:none}.gh-drop{display:none}
 .gh-app:last-child{grid-column:1/-1}.gh-app:last-child .gh-card{max-width:calc(50% - 5px)}.gh-card{padding:14px 10px}.gh-ic{width:30px;height:30px}}
/* GATE 히어로: 이미 있는 앱(회색) 안에 GATE 버튼(파랑)이 끼워지고, 아래 GATE API로 이어진다 */
.gp{padding:40px 40px 44px}
.gp-tag{position:relative;display:inline-block;margin-bottom:16px;font-size:13px;font-weight:600;color:#6b7280;background:#fff;border:1px solid #e3e8f0;border-radius:99px;padding:6px 12px}
.gp-apps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.gp-app{display:flex;flex-direction:column;align-items:center}
.gp-phone{width:100%;max-width:196px;background:#fff;border:1px solid #e3e8f0;border-radius:18px;padding:12px 12px 12px;box-shadow:0 6px 18px rgba(17,24,39,.05)}
.gp-bar{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid #f0f2f5}
.gp-ic{width:22px;height:22px;border-radius:7px;background:var(--ac);opacity:.9;flex:none}
.gp-bar b{font-size:13px;font-weight:700;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-sk{display:flex;flex-direction:column;gap:7px;padding:12px 0;min-height:104px}
.gp-sk i{display:block;height:8px;border-radius:4px;background:#eef1f5}
.gp-sk .big{height:16px}.gp-sk .w40{width:40%}.gp-sk .w50{width:50%}.gp-sk .w60{width:60%}.gp-sk .w70{width:70%}.gp-sk .w80{width:80%}.gp-sk .w90{width:90%}
.gp-sk .blk{border-radius:8px}
.gp-sk .row{height:18px;border-radius:6px;background:linear-gradient(90deg,#eef1f5 0 18px,transparent 18px 24px,#eef1f5 24px)}
.gp-sk .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.gp-sk .grid i{height:22px;border-radius:6px}
.gp-slot{border:1.5px dashed #9cc4ff;border-radius:10px;height:38px;display:grid;place-items:stretch}
.gp-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin:-1.5px;border-radius:10px;background:#006fff;color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;animation:gpin .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.5s + var(--d))}
.gp-btn svg{width:14px;height:14px;flex:none}
@keyframes gpin{0%{opacity:0;transform:translateY(10px) scale(.92)}100%{opacity:1;transform:none}}
.gp-wire{position:relative;width:2px;height:34px;background:#9cc4ff}
.gp-wire i{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:#006fff;box-shadow:0 0 0 3px rgba(0,111,255,.18);animation:gpup 2.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes gpup{0%{top:30px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:-4px;opacity:0}}
.gp-base{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;background:#fff;border:2px solid #006fff;border-radius:16px;padding:16px 24px;box-shadow:0 16px 40px rgba(0,111,255,.14)}
.gp-base b{font-size:20px;font-weight:800;letter-spacing:-.01em;color:#0b1220}
.gp-base small{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#0059cc}
.gp-base small span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#eff9ff;color:#006fff}
.gp-base small svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.gp-btn{animation:none}.gp-wire i{animation:none;top:12px}}
@media (max-width:1100px){.gp{padding:32px 24px 36px}.gp-apps{gap:10px}.gp-btn{font-size:11.5px;gap:4px}.gp-btn svg{display:none}}
@media (max-width:760px){.gp{padding:24px 16px 24px}.gp-apps{grid-template-columns:repeat(2,1fr);gap:10px}.gp-app:nth-child(5){display:none}
 .gp-wire{height:18px}.gp-app:nth-child(-n+2) .gp-wire{visibility:hidden;height:0}.gp-sk{min-height:84px}.gp-btn{font-size:12px}.gp-btn svg{display:block}
 .gp-base{flex-direction:column;gap:6px;padding:14px 16px}.gp-base b{font-size:18px}}
.gp-phone{flex:1;display:flex;flex-direction:column}.gp-slot{margin-top:auto}.gp-sk{flex:1}
/* GATE 히어로 v2: 세로 — 이미 있는 앱 → UNIVS GATE → 앱에서 일어나는 일 */
.gv{padding:36px 40px 40px}
.gv-row{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.gv-app{background:#fff;border:1px solid #e3e8f0;border-radius:16px;padding:14px;box-shadow:0 6px 18px rgba(17,24,39,.05);display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;row-gap:7px}
.gv-app .gp-ic{width:24px;height:24px}
.gv-app b{font-size:14px;font-weight:700;color:#111827;white-space:nowrap}
.gv-app i{grid-column:1/-1;height:7px;border-radius:4px;background:#eef1f5}
.gv-app i:last-child{width:60%}
.gv-wires{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;height:36px}
.gv-wires span{position:relative;justify-self:center;width:2px;height:100%;background:#9cc4ff}
.gv-wires i{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:#006fff;box-shadow:0 0 0 3px rgba(0,111,255,.18);animation:gvdown 2.4s ease-in-out infinite;animation-delay:var(--d)}
.gv-w2 i{animation-delay:calc(var(--d) + 1.2s)}
@keyframes gvdown{0%{top:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:32px;opacity:0}}
.gv-act{display:flex;align-items:center;justify-content:center;gap:6px;background:#006fff;color:#fff;border-radius:12px;height:44px;font-size:13.5px;font-weight:700;white-space:nowrap}
.gv-act svg{width:15px;height:15px;flex:none}
@media (prefers-reduced-motion:reduce){.gv-wires i{animation:none;top:12px}}
@media (max-width:1100px){.gv{padding:28px 20px 32px}.gv-row,.gv-wires{gap:10px}.gv-app{padding:12px}.gv-app b{font-size:13px}.gv-act{font-size:12px;gap:4px}}
@media (max-width:760px){.gv{padding:22px 16px}
 .gv-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
 .gv-app{display:flex;padding:8px 12px;border-radius:99px;box-shadow:none}.gv-app i{display:none}.gv-app .gp-ic{width:18px;height:18px;border-radius:6px}
 .gv-act{height:34px;padding:0 12px;border-radius:99px;font-size:12.5px}
 .gv-wires{display:flex;justify-content:center;height:24px}.gv-wires span:not(:nth-child(3)){display:none}}
.gv-act{background:#fff;color:#0059cc;border:1px solid #cfe3ff}.gv-act svg{color:#006fff}
@media (max-width:760px){br.pcbr{display:none}}
/* 체험 띠: 글은 남는 폭을 쓰고 버튼은 한 줄로 오른쪽에 · 본문 줄 간격 */
.pband>div:first-child{flex:1 1 auto;min-width:0}
.pband-btns{flex:none;flex-direction:row;align-items:center}
.pband p{line-height:1.65;text-wrap:pretty;word-break:keep-all}
@media (max-width:900px){.pband{flex-direction:column;align-items:flex-start}.pband-btns{flex-direction:row;flex-wrap:wrap}}
.pband-btns .btn{justify-content:center;text-align:center}
/* VCA 첫 화면 검색 그림 v2: 찾는 사람 | 장면이 다른 결과 썸네일 */
.vs2{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 14px 14px}
.vs2-q{display:flex;flex-direction:column;gap:6px;padding-right:12px;border-right:1px solid var(--line)}
.vs2-q small,.vs2 .vs-meta{font-size:10px;color:var(--ink-2);padding:0}
.vs2-qimg{border-radius:8px;overflow:hidden;border:1.5px solid #5b3df5}
.vs2-qimg svg,.vs2-img svg{display:block;width:100%;height:auto;aspect-ratio:3/4}
.vs2-qface{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-2)}
.vs2-qface .av{width:24px;height:24px;border-radius:6px}
.vs2-r{min-width:0;display:flex;flex-direction:column;gap:8px}
.vs2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vs2-card{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#fff}
.vs2-card.hit{border-color:#5b3df5;box-shadow:0 0 0 1px #5b3df5}
.vs2-img{position:relative}
.vs2-img .ts{position:absolute;right:4px;top:4px;font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;background:rgba(17,24,39,.6);padding:3px 4px;border-radius:4px}
.vs2-cap{display:flex;justify-content:space-between;gap:4px;padding:5px 6px;font-size:9px;color:var(--ink-2)}
.vs2-cap span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs2-cap b{flex:none;color:#111827}.vs2-card.hit .vs2-cap b{color:#5b3df5}
@media (max-width:560px){.vs2{grid-template-columns:72px 1fr;gap:8px}.vs2-q{padding-right:8px}}
.vs2-go{margin-top:auto;display:block;text-align:center;font-size:10px;font-weight:700;color:#fff;background:#5b3df5;border-radius:7px;padding:7px 4px}
.vs-sub{display:flex;align-items:center;gap:16px;padding:0 14px;border-bottom:1px solid var(--line);font-size:10px;white-space:nowrap}
.vs-sub span,.vs-sub b{padding:11px 0 9px;border-bottom:2px solid transparent;color:var(--ink-3,#9ca3af);font-weight:500}
.vs-sub b{color:#5b3df5;border-bottom-color:#5b3df5;font-weight:700}
.vs-sub em{margin-left:auto;font-style:normal;color:var(--ink-2);border:1px solid var(--line);border-radius:99px;padding:4px 10px}
@media (max-width:560px){.vs-sub{gap:10px}.vs-sub em{display:none}}
/* VCA 첫 화면 v3: RedMap (찾는 대상 · 이동 경로 | 지도) */
.vrm{display:grid;grid-template-columns:168px 1fr;min-height:330px}
.vrm-side{display:flex;flex-direction:column;gap:10px;padding:14px;border-right:1px solid var(--line)}
.vrm-side small{font-size:9.5px;font-weight:600;color:var(--ink-3,#9ca3af)}
.vrm-t{display:flex;gap:8px;align-items:center}
.vrm-t .av{width:34px;height:34px;flex:none;border-radius:8px}
.vrm-t b,.vrm-step b{display:block;font-size:10.5px;font-weight:700;color:#111827;white-space:nowrap}
.vrm-t span,.vrm-step span{display:block;font-size:9.5px;color:var(--ink-2);margin-top:2px}
.vrm-step span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}
.vrm-step{display:flex;gap:8px;align-items:flex-start}
.vrm-step i{flex:none;width:16px;height:16px;border-radius:50%;background:#5b3df5;color:#fff;font:700 8.5px/16px inherit;font-style:normal;text-align:center}
.vrm-map{position:relative;overflow:hidden}
.vrm-map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vrm-route{fill:none;stroke:#5b3df5;stroke-width:5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:vrmdraw 2.6s ease-out .4s forwards}
.vrm-wp{opacity:0;animation:vrmin .3s ease-out forwards;animation-delay:inherit}
.vrm-pulse{transform-box:fill-box;transform-origin:center;animation:vrmpulse 1.6s ease-out infinite}
@keyframes vrmdraw{to{stroke-dashoffset:0}}
@keyframes vrmin{to{opacity:1}}
@keyframes vrmpulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.4);opacity:0}}
.vrm-lg{position:absolute;left:10px;bottom:10px;display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:9px;color:var(--ink-2)}
.vrm-lg span{display:flex;align-items:center;gap:4px}.vrm-lg i{width:7px;height:7px;border-radius:50%}
@media (prefers-reduced-motion:reduce){.vrm-route{animation:none;stroke-dashoffset:0}.vrm-wp{animation:none;opacity:1}.vrm-pulse{animation:none}}
@media (max-width:560px){.vrm{grid-template-columns:128px 1fr;min-height:260px}.vrm-side{padding:10px;gap:8px}.vrm-t b,.vrm-step b{white-space:normal}}
.vrm{min-height:0;grid-template-columns:160px 1fr}
.vrm-map{min-height:250px}
@media (max-width:1100px){.ui-proj{display:none}.vrm{grid-template-columns:1fr}.vrm-map{order:-1;min-height:0;aspect-ratio:466/350}
 .vrm-side{border-right:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
 .vrm-side small,.vrm-t{grid-column:1/-1}.vrm-t b,.vrm-step b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vrm-step>div{min-width:0}}
@media (min-width:1101px){.vrm-step b{white-space:normal;line-height:1.35}}
.vrm-map{background:#eef1f5}
.vrm-lg{left:auto;right:10px}
/* 이동 경로 번호: 연한 원 + 세로 연결선, 마지막(지금 위치)만 채움 */
.vrm-step{position:relative;gap:9px}
.vrm-step i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#f3f0ff;color:#5b3df5;box-shadow:inset 0 0 0 1px #d9d1fe;font:700 9px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;font-style:normal;position:relative;z-index:1;margin-top:0}
.vrm-step:last-of-type i{background:#5b3df5;color:#fff;box-shadow:none}
.vrm-step:not(:last-of-type)::before{content:"";position:absolute;left:7.5px;top:17px;bottom:-11px;width:1px;background:#e4defe}
.vrm-step b{line-height:16px}
/* 더 단순하게: 원 · 연결선 없이 숫자만 */
.vrm-step::before{display:none!important}
.vrm-step i{display:block;width:12px;height:auto;background:none!important;box-shadow:none!important;color:#9ca3af!important;font:600 10px/16px system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;text-align:left}
.vrm-step:last-of-type i{color:#5b3df5!important}
/* VCA 첫 화면 v4: POS처럼 — 지도 한 장 + 요약 카드 하나 */
.v-route{position:absolute;left:0;top:24px;width:80%;height:320px;overflow:hidden;padding:0}
.v-route svg{display:block;width:100%;height:100%}
.v-route{padding:8px;background:#fff;border-radius:22px}
.v-route svg{border-radius:15px}
@media (max-width:900px){.v-route{top:10px;height:260px;width:84%}}
@media (max-width:560px){.v-route{top:0;height:220px;width:88%}}
@media (max-width:560px){.v-route{box-shadow:0 8px 24px rgba(17,24,39,.07)}}
.v-route svg{background:#eef1f5}
/* 제품 페이지 첫 제목: 한 단계 작게 (4개 제품 공통) */
.phead h1{font-size:clamp(30px,3.9vw,48px);line-height:1.28}
/* 홈 UNIVS GATE 슬라이드: POS처럼 — 앱 화면 하나 + 요약 카드 하나 */
.v-gph{position:absolute;left:20%;top:0;width:42%;height:100%;padding:12px;background:#fff;border-radius:34px;box-shadow:0 20px 50px rgba(17,24,39,.08);border:1px solid #e5e7eb}
.v-gph .scr{height:100%;border-radius:24px;background:#f5f8ff;display:flex;flex-direction:column;align-items:center;padding:16px 14px;gap:12px}
.v-gph .bar{align-self:stretch;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#111827}
.v-gph .bar i{width:22px;height:22px;border-radius:7px;background:#0f766e}
.v-gph .scan{position:relative;margin-top:auto;width:132px;height:132px;display:grid;place-items:center}
.v-gph .scan img{width:112px;height:112px;border-radius:50%;object-fit:cover;background:#fff}
.v-gph .scan span{position:absolute;inset:0;background:
 linear-gradient(#006fff,#006fff) 0 0/22px 3px,linear-gradient(#006fff,#006fff) 0 0/3px 22px,
 linear-gradient(#006fff,#006fff) 100% 0/22px 3px,linear-gradient(#006fff,#006fff) 100% 0/3px 22px,
 linear-gradient(#006fff,#006fff) 0 100%/22px 3px,linear-gradient(#006fff,#006fff) 0 100%/3px 22px,
 linear-gradient(#006fff,#006fff) 100% 100%/22px 3px,linear-gradient(#006fff,#006fff) 100% 100%/3px 22px;background-repeat:no-repeat;border-radius:6px}
.v-gph .ok{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:700;color:#111827;margin-top:6px}
.v-gph .ok svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#006fff;color:#fff;box-sizing:content-box}
.v-gph small{font-size:12px;color:#6b7280;margin-bottom:auto}
@media (max-width:900px){.v-gph{left:8%;width:50%}}
@media (max-width:560px){.v-gph{left:4%;width:56%;padding:8px;border-radius:26px}.v-gph .scr{border-radius:19px;padding:12px 10px;gap:8px}.v-gph .scan{width:96px;height:96px}.v-gph .scan img{width:80px;height:80px}.v-gph .ok{font-size:13px}.v-gph .bar{font-size:11px}}
@media (max-width:560px){.v-gph + .v-receipt{width:58%}}
.vis .v-gph + .v-receipt{width:max-content;min-width:36%;max-width:64%}
.v-gph .ok{white-space:nowrap}.v-gph small{white-space:nowrap}
@media (max-width:1100px) and (min-width:561px){.v-gph{left:6%;width:52%}.v-gph .ok{font-size:14px}}
/* 홈 슬라이드 제목 · 부제 한 단계 작게 (4개 공통) */
.slide h1{font-size:clamp(30px,4vw,48px)}
.slide p{font-size:16px}
.slide .cta .btn{height:46px;padding:0 22px;font-size:15px;border-radius:10px}
/* 홈 UNIVS GATE 슬라이드: 데모 앱 화면 하나만 */
.v-gdemo{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%)}
@media (max-width:560px){html[lang=en] .co-one br{display:none}}
/* 홈 UNIVS GATE 슬라이드: 얼굴 · 손바닥 두 장 — 제목 「얼굴 · 손바닥 하나로」와 같은 짝 */
.v-gfeat{display:flex;flex-direction:column;justify-content:center;gap:16px}
.gf{padding:24px 26px;width:82%}
.gf-palm{align-self:flex-end}
.gf-h{display:flex;align-items:center;gap:12px}
.gf-h span{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#eff9ff;color:#006fff}
.gf-h svg{width:28px;height:28px}
.gf-h b{font-size:20px;font-weight:700;color:#111827}
.gf-c{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.gf-c i{font-style:normal;font-size:13px;font-weight:600;color:#374151;background:#f3f4f6;border-radius:99px;padding:6px 11px;white-space:nowrap}
@media (max-width:560px){.v-gfeat{height:auto!important;gap:10px}.gf{width:92%;padding:16px}.gf-h span{width:38px;height:38px;border-radius:11px}.gf-h svg{width:22px;height:22px}.gf-h b{font-size:17px}.gf-c{margin-top:12px;gap:5px}.gf-c i{font-size:12px;padding:5px 9px}}
/* GATE 세로 다이어그램 단순화: 앱 카드는 아이콘+이름만, 높이 · 장식 줄이기 */
.gv-app i{display:none}
.gv-app{display:flex;justify-content:center;gap:8px;padding:14px 12px;box-shadow:none}
.gv-act{height:40px;border-color:#e3e8f0}
.gv-wires{height:28px}
.gv-wires i{width:6px;height:6px;left:-2px;box-shadow:none}
.gv .gp-base{padding:14px 24px;box-shadow:0 10px 28px rgba(0,111,255,.12)}
/* 「기존 앱에 붙인다」 강조: 위 줄 라벨을 진하게, 앱→GATE 선 가운데 「API로 연결」 */
.gv-tag{color:#111827;font-weight:700;border-color:#d1d5db}
.gv-mid{position:relative}
.gv-api{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-size:12px;font-weight:700;color:#0059cc;background:#eff9ff;border:1px solid #cfe3ff;border-radius:99px;padding:4px 12px;white-space:nowrap}
@media (max-width:760px){.gv-mid .gv-wires{height:34px}.gv-api{left:auto;right:0;transform:translateY(-50%)}}
.gv-mid .gv-wires{height:44px}
/* 영수증 카드: 제목 / 두 줄을 두 묶음으로 */
.v-receipt>b:first-child{margin-bottom:14px}
@media (max-width:900px){.v-receipt>b:first-child{margin-bottom:10px}}
/* 영수증 카드: 줄 사이를 넓히고, 아래 여백 = 위 여백 */
.v-receipt .row{padding:11px 0}
.v-receipt .row:last-child{padding-bottom:0}
@media (max-width:900px){.v-receipt .row{padding:8px 0}.v-receipt .row:last-child{padding-bottom:0}}
/* VCA 카드: 「마지막 발견」 값 길이에 맞춰 넓힘 */
.vis .v-route + .v-receipt{width:max-content;min-width:40%;max-width:70%}
.v-route + .v-receipt .row b{margin:0}
/* 영수증 카드: 라벨과 값을 세로 가운데로 */
.v-receipt .row{align-items:center}
.v-receipt .row b{margin-bottom:0}
/* 「마지막 발견」 값: 지도 핀과 같은 번호 원 + 시각 */
.rc-pin{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#5b3df5;color:#fff;font-size:10px;font-style:normal;font-weight:700;margin-right:6px;vertical-align:1px}
.v-receipt .row b:has(.rc-pin){display:inline-flex;align-items:center}
/* GATE 다이어그램 v2: 앱이 하는 일은 앱 안에, GATE는 인증 결과만 */
.gv2 .gv-app{gap:10px;justify-content:center}
.gv-nm{display:flex;flex-direction:column;line-height:1.25}
.gv-nm em{font-style:normal;font-size:12px;color:#6b7280;margin-top:2px}
.gv2 .gv-mid .gv-wires{height:56px}
.gv2 .gv-api{top:50%}
.gv2 .gv-req{left:30%;transform:translate(-50%,-50%);color:#4b5563;background:#fff;border-color:#e3e8f0}
.gv2 .gv-res{left:70%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:4px}
.gv2 .gv-res svg{width:13px;height:13px;color:#006fff}
.gv2 .gv-wires i{animation:none;opacity:0}
.gv2 .gv-wires .gv-dn{animation:gv2dn 2.4s linear infinite;animation-delay:var(--d);background:#9ca3af}
.gv2 .gv-wires .gv-up{animation:gv2up 2.4s linear infinite;animation-delay:calc(var(--d) + 1.2s)}
@keyframes gv2dn{0%{top:-3px;opacity:0}10%{opacity:1}45%{opacity:1}50%{top:calc(100% - 3px);opacity:0}100%{opacity:0}}
@keyframes gv2up{0%{top:calc(100% - 3px);opacity:0}10%{opacity:1}45%{opacity:1}50%{top:-3px;opacity:0}100%{opacity:0}}
.gv-own{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.gv-tag2{color:#0059cc;font-weight:700;border-color:#cfe3ff;background:#eff9ff}
.gv-chips{display:flex;gap:6px;flex-wrap:wrap}
.gv-chips i{font-style:normal;font-size:12.5px;font-weight:600;color:#374151;background:#fff;border:1px solid #e3e8f0;border-radius:99px;padding:5px 12px}
@media (prefers-reduced-motion:reduce){.gv2 .gv-wires i{animation:none;opacity:0}}
@media (max-width:760px){
 .gv2 .gv-app{border-radius:12px;padding:8px 12px}
 .gv2 .gv-nm{flex-direction:row;gap:6px;align-items:baseline}.gv2 .gv-nm em{margin:0}
 .gv2 .gv-mid .gv-wires{height:64px}
 .gv2 .gv-req,.gv2 .gv-res{left:auto;transform:translateY(-50%)}
 .gv2 .gv-req{right:calc(50% + 12px)}.gv2 .gv-res{left:calc(50% + 12px)}
 .gv-own{justify-content:center}.gv-chips{justify-content:center}}
.gv-own .gp-tag{margin:0;position:static}
/* GATE 막대 강조: 파란 바탕 · 흰 글자 */
.gv2 .gp-base{background:#006fff;border-color:#006fff;padding:22px 28px;box-shadow:0 14px 36px rgba(0,111,255,.32)}
.gv2 .gp-base b{color:#fff;font-size:26px}
.gv2 .gp-base small{color:#fff;font-size:14px}
.gv2 .gp-base small span{background:rgba(255,255,255,.18);color:#fff}
@media (max-width:760px){.gv2 .gp-base{padding:18px 16px}.gv2 .gp-base b{font-size:22px}}
/* 앱 칸: 기존 인증 → 얼굴 · 손바닥 */
.gv-nm em{display:flex;align-items:center;gap:4px;font-size:12px;margin-top:3px}
.gv-nm em s{color:#9ca3af;text-decoration-thickness:1.5px}
.gv-nm em span{color:#9ca3af;font-size:11px}
.gv-nm em strong{color:#006fff;font-weight:700}
.gv-nm em{white-space:nowrap;font-size:12.5px}
.gv-nm em s{color:#6b7280}
@media (max-width:1100px){.gv-nm em{font-size:11.5px}}
/* GATE 다이어그램 v3: 세로 — 앱 다섯 줄 → 오른쪽 세로 GATE */
.gv3{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;align-items:stretch;padding:36px 40px 40px}
.gv3-l{display:flex;flex-direction:column;gap:12px}
.gv3-l>.gp-tag{align-self:flex-start;margin:0}
.gv3-legend{display:flex;justify-content:flex-end;gap:8px;padding-right:4px;margin:-30px 0 0}
.gv3 .gv-api{position:static;transform:none;font-size:12px;font-weight:700;border-radius:99px;padding:4px 12px;white-space:nowrap;border:1px solid}
.gv3 .gv-req{color:#4b5563;background:#fff;border-color:#e3e8f0}
.gv3 .gv-res{display:inline-flex;align-items:center;gap:4px;color:#0059cc;background:#eff9ff;border-color:#cfe3ff}
.gv3 .gv-res svg{width:13px;height:13px;color:#006fff}
.gv3-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center}
.gv3 .gv-app{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:14px 18px;box-shadow:none}
.gv3 .gv-nm{flex-direction:row;align-items:center;justify-content:space-between;flex:1;gap:12px}
.gv3 .gv-nm b{font-size:15px}
.gv3 .gv-nm em{margin:0;font-size:13px}
.gv3-w{position:relative;height:2px;background:#9cc4ff}
.gv3-w i{position:absolute;top:-2px;width:6px;height:6px;border-radius:50%;opacity:0}
.gv3-w .gv-dn{background:#9ca3af;animation:gv3r 2.4s linear infinite}
.gv3-w .gv-up{background:#006fff;animation:gv3l 2.4s linear infinite;animation-delay:1.2s}
.gv3-row:nth-child(4) i{animation-delay:.3s}.gv3-row:nth-child(4) .gv-up{animation-delay:1.5s}
.gv3-row:nth-child(5) i{animation-delay:.6s}.gv3-row:nth-child(5) .gv-up{animation-delay:1.8s}
.gv3-row:nth-child(6) i{animation-delay:.9s}.gv3-row:nth-child(6) .gv-up{animation-delay:2.1s}
.gv3-row:nth-child(7) i{animation-delay:1.2s}.gv3-row:nth-child(7) .gv-up{animation-delay:2.4s}
@keyframes gv3r{0%{left:0;opacity:0}10%{opacity:1}45%{opacity:1}50%{left:calc(100% - 6px);opacity:0}100%{opacity:0}}
@keyframes gv3l{0%{left:calc(100% - 6px);opacity:0}10%{opacity:1}45%{opacity:1}50%{left:0;opacity:0}100%{opacity:0}}
.gv3-r{display:flex;flex-direction:column;gap:12px}
.gv3-r>.gp-tag{align-self:flex-start;margin:0}
.gv3 .gv3-gate{flex:1;flex-direction:column;justify-content:center;align-items:center;gap:14px;text-align:center;background:#006fff;border-color:#006fff;border-radius:20px;padding:28px 22px;box-shadow:0 14px 36px rgba(0,111,255,.32)}
.gv3 .gv3-gate b{color:#fff;font-size:28px}
.gv3 .gv3-gate small{color:#fff;font-size:14px;flex-wrap:wrap;justify-content:center}
.gv3 .gv3-gate small span{background:rgba(255,255,255,.18);color:#fff}
.gv3 .gv3-gate .gv-chips{justify-content:center;margin-top:6px}
.gv3 .gv3-gate .gv-chips i{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
@media (prefers-reduced-motion:reduce){.gv3-w i{animation:none}}
@media (max-width:1100px){.gv3{grid-template-columns:minmax(0,1fr) 260px;padding:28px 20px 32px}.gv3-row{grid-template-columns:minmax(0,1fr) 72px}.gv3 .gv-nm b{font-size:14px}.gv3 .gv3-gate b{font-size:24px}}
@media (max-width:760px){
 .gv3{grid-template-columns:1fr;padding:22px 16px}
 .gv3-legend{margin:0;justify-content:center}
 .gv3-row{grid-template-columns:1fr}.gv3-w{display:none}
 .gv3 .gv-app{padding:12px 14px;border-radius:12px}
 .gv3-r{margin-top:12px;align-items:center}.gv3-r>.gp-tag{align-self:center}
 .gv3-r::before{content:"";width:2px;height:28px;background:#9cc4ff;order:-1}
 .gv3 .gv3-gate{width:100%;padding:22px 16px}.gv3 .gv3-gate b{font-size:22px}}
/* v3 범례를 연결선 가운데로 */
.gv3-l{position:relative}
.gv3-row{grid-template-columns:minmax(0,1fr) 170px}
.gv3-legend{position:absolute;right:0;width:170px;top:calc(50% + 22px);transform:translateY(-50%);margin:0;padding:0;flex-direction:column;align-items:center;gap:30px;z-index:2;pointer-events:none}
.gv-arr{font-style:normal;display:inline-block;margin-right:4px}
.gv3 .gv-nm em s{color:#6b7280}
@media (max-width:1100px){.gv3-row{grid-template-columns:minmax(0,1fr) 120px}.gv3-legend{width:120px}.gv3 .gv-api{font-size:11px;padding:3px 8px}}
@media (max-width:760px){.gv3-legend{position:static;width:auto;transform:none;flex-direction:row;justify-content:center;gap:8px}.gv-arr{transform:rotate(90deg)}}
/* 왕복: 넣기(회색 →) · 결과(파랑 ←) · 앱이 결과 표시 */
.gv3 .gv-app{position:relative}
.gv3-ok{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:#047857;background:#ecfdf5;border-radius:99px;padding:4px 10px;white-space:nowrap;opacity:0;animation:gv3ok 6s ease-in-out infinite;animation-delay:var(--d)}
.gv3-ok svg{width:12px;height:12px}
.gv3 .gv-nm{flex:1}
.gv3-w .gv-dn{animation:gv3r 6s linear infinite;animation-delay:var(--d)}
.gv3-w .gv-up{animation:gv3l 6s linear infinite;animation-delay:var(--d)}
@keyframes gv3r{0%{left:0;opacity:0}3%{opacity:1}17%{opacity:1}20%{left:calc(100% - 6px);opacity:0}100%{left:calc(100% - 6px);opacity:0}}
@keyframes gv3l{0%,20%{left:calc(100% - 6px);opacity:0}23%{opacity:1}37%{opacity:1}40%{left:0;opacity:0}100%{left:0;opacity:0}}
@keyframes gv3ok{0%,40%{opacity:0;transform:translateX(-4px)}44%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.gv3-ok{animation:none;opacity:1}.gv3-w i{animation:none;opacity:0}}
@media (max-width:760px){.gv3-ok{font-size:11.5px;padding:3px 8px}.gv3 .gv-nm em{font-size:12px}}
@media (max-width:760px){.gv3 .gv-nm{flex-direction:column;align-items:flex-start;gap:2px}.gv3 .gv-app{gap:10px}}
@media (max-width:760px){.gv3-row{grid-template-columns:1fr}.gv3-legend{width:auto}}
@media (max-width:1100px){.gv3 .gv-nm{flex-direction:column;align-items:flex-start;gap:2px}.gv3 .gv-app{gap:10px;padding:12px 14px}}
/* 앱이 더 많다는 표시: 「+ 그 밖의 모든 앱」 + 흐려지는 빈 줄 */
.gv3-more .gv-app{border-style:dashed;background:transparent}
.gv3-more .gv-nm b{color:#4b5563}
.gv-plus{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;border:1.5px dashed #9ca3af;color:#6b7280;font-weight:700;font-size:15px;flex:none}
.gv3-ghost .gv-app{height:44px;padding:0;background:rgba(255,255,255,.6);border-style:dashed}
.gv3-ghost{opacity:.55}.gv3-ghost2{opacity:.25}
.gv3-ghost .gv3-w{background:#cfe0f7}
@media (max-width:760px){.gv3-ghost .gv-app{height:36px}}
/* GATE 다이어그램 v4: 가운데 GATE · 왼쪽 넣기 · 오른쪽 결과 */
.gvc{display:grid;grid-template-columns:minmax(0,1fr) 56px 240px 56px minmax(0,1fr);row-gap:10px;padding:36px 32px 40px;align-items:center}
.gvc>.gp-tag{margin:0 0 4px;justify-self:start;grid-row:1}
.gc-h1{grid-column:1}.gc-h2{grid-column:3;justify-self:center!important}.gc-h3{grid-column:5;color:#047857;background:#ecfdf5;border-color:#a7f3d0;font-weight:700}
.gvc .gv-app{display:flex;align-items:center;gap:10px;padding:12px 14px;box-shadow:none;min-height:56px}
.gc-in{grid-column:1}.gc-out{grid-column:5}
.gvc .gv-nm{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.gvc .gv-nm b,.gc-out b{font-size:14px;font-weight:700;color:#111827;white-space:nowrap}
.gvc .gv-nm em{margin:0;font-size:12px}
.gc-out .gv3-ok{margin-left:auto}
.gc-w{position:relative;height:2px;background:#9cc4ff;align-self:center}
.gc-w1{grid-column:2}.gc-w2{grid-column:4}
.gc-w i{position:absolute;top:-2px;width:6px;height:6px;border-radius:50%;opacity:0}
.gc-w1 i{background:#9ca3af;animation:gc1 6s linear infinite;animation-delay:var(--d)}
.gc-w2 i{background:#006fff;animation:gc2 6s linear infinite;animation-delay:var(--d)}
@keyframes gc1{0%{left:0;opacity:0}3%{opacity:1}17%{opacity:1}20%{left:calc(100% - 6px);opacity:0}100%{opacity:0}}
@keyframes gc2{0%,22%{left:0;opacity:0}25%{opacity:1}37%{opacity:1}40%{left:calc(100% - 6px);opacity:0}100%{opacity:0}}
.gvc .gc-gate{grid-column:3;align-self:stretch;flex-direction:column;justify-content:center;align-items:center;gap:14px;text-align:center;background:#006fff;border-color:#006fff;border-radius:20px;padding:24px 18px;box-shadow:0 14px 36px rgba(0,111,255,.32)}
.gvc .gc-gate b{color:#fff;font-size:26px}
.gvc .gc-gate small{color:#fff;font-size:13px;flex-wrap:wrap;justify-content:center}
.gvc .gc-gate small span{background:rgba(255,255,255,.18);color:#fff}
.gvc .gc-gate .gv-chips{justify-content:center}
.gvc .gc-gate .gv-chips i{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
.gc-more{border-style:dashed!important;background:transparent!important}
.gc-more b{color:#4b5563!important}
.gc-ghost.gv-app{min-height:40px;height:40px;padding:0;border-style:dashed;background:rgba(255,255,255,.6)}
.gc-ghost.gc-w{background:#cfe0f7}
.gc-g1{opacity:.55}.gc-g2{opacity:.25}
.gvc .gv3-ok{animation-duration:6s}
@media (prefers-reduced-motion:reduce){.gc-w i{animation:none}}
@media (max-width:1100px){.gvc{grid-template-columns:minmax(0,1fr) 28px 190px 28px minmax(0,1fr);padding:28px 16px 32px}.gvc .gc-gate b{font-size:20px}.gc-out{flex-wrap:wrap;row-gap:4px}.gc-out .gv3-ok{margin-left:0}.gvc .gv-nm b,.gc-out b{font-size:13px}}
@media (max-width:760px){
 .gvc{grid-template-columns:1fr;padding:22px 16px}
 .gvc>*{grid-row:auto!important;grid-column:1!important}
 .gc-w,.gc-ghost{display:none}
 .gc-h1{order:1}.gc-in{order:2}.gvc .gc-gate{order:4;margin:8px 0}.gc-h2{order:3;justify-self:center!important;margin-top:8px}.gc-h3{order:5;justify-self:center!important}.gc-out{order:6}
 .gc-out{flex-wrap:nowrap}.gc-out .gv3-ok{margin-left:auto}}
.gvc .gc-in{justify-content:flex-start}
.gvc .gv-app{border-radius:14px}
.gvc>.gp-tag{white-space:nowrap}
@media (max-width:1100px){.gvc>.gp-tag{font-size:12px;padding:5px 10px}}
@media (max-width:760px){.gvc .gc-ghost,.gvc .gc-w{display:none}.gvc .gv-app{border-radius:12px;min-height:0;padding:10px 12px}.gvc .gc-in.gc-more,.gvc .gc-out.gc-more{padding:8px 12px}}
/* GATE 다이어그램 v5 (쉽게): 고객사 앱 → UNIVS GATE → 고객사 앱 */
.ge{display:grid;grid-template-columns:1fr 120px 1fr 120px 1fr;align-items:center;gap:0;padding:48px 40px}
.ge-card{background:#fff;border:1px solid #e3e8f0;border-radius:20px;padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:190px;justify-content:center}
.ge-tag{font-size:13px;font-weight:700;color:#6b7280}
.ge-icons{display:flex;gap:6px}
.ge-icons i{width:26px;height:26px;border-radius:8px;background:var(--ac)}
.ge-icons .ge-plus{display:grid;place-items:center;background:none;border:1.5px dashed #9ca3af;color:#6b7280;font-style:normal;font-weight:700;font-size:15px;width:23px;height:23px}
.ge-card p{margin:0;font-size:14px;color:#4b5563}
.ge-card p s{color:#9ca3af}
.ge-card p b{color:#006fff}
.ge-gate{background:#006fff;border-color:#006fff;box-shadow:0 14px 36px rgba(0,111,255,.32)}
.ge-gate b{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.01em}
.ge-gate span{font-size:14px;color:rgba(255,255,255,.9);font-weight:600}
.ge-ok{display:inline-flex;align-items:center;gap:6px;font-size:18px;font-weight:800;color:#047857;background:#ecfdf5;border-radius:99px;padding:8px 16px}
.ge-ok svg{width:18px;height:18px}
.ge-arr{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 10px}
.ge-arr span{font-size:12.5px;font-weight:700;color:#4b5563;white-space:nowrap}
.ge-arr2 span{color:#047857}
.ge-line{position:relative;width:100%;height:2px;background:#9cc4ff}
.ge-line svg{position:absolute;right:-6px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:#9cc4ff}
.ge-line i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#006fff;opacity:0;animation:ge1 3s linear infinite}
.ge-arr2 .ge-line i{background:#10b981;animation-name:ge2}
@keyframes ge1{0%{left:0;opacity:0}5%{opacity:1}35%{opacity:1}40%{left:calc(100% - 8px);opacity:0}100%{opacity:0}}
@keyframes ge2{0%,50%{left:0;opacity:0}55%{opacity:1}85%{opacity:1}90%{left:calc(100% - 8px);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ge-line i{animation:none}}
@media (max-width:1100px){.ge{grid-template-columns:1fr 80px 1fr 80px 1fr;padding:36px 20px}.ge-gate b{font-size:22px}.ge-ok{font-size:15px}}
@media (max-width:760px){
 .ge{grid-template-columns:1fr;padding:24px 16px;gap:0}
 .ge-card{min-height:0;padding:20px 16px}
 .ge-arr{flex-direction:row;justify-content:center;height:56px;gap:10px}
 .ge-line{width:2px;height:36px}
 .ge-line svg{right:auto;left:50%;top:auto;bottom:-8px;transform:translateX(-50%) rotate(90deg)}
 .ge-line i{left:-3px!important;animation-name:ge1v}.ge-arr2 .ge-line i{animation-name:ge2v}
 @keyframes ge1v{0%{top:0;opacity:0}5%{opacity:1}35%{opacity:1}40%{top:28px;opacity:0}100%{opacity:0}}
 @keyframes ge2v{0%,50%{top:0;opacity:0}55%{opacity:1}85%{opacity:1}90%{top:28px;opacity:0}100%{opacity:0}}}
.ge-fp{display:flex;gap:10px}
.ge-fp span{display:flex;flex-direction:column;align-items:center;gap:6px;width:78px;padding:12px 0 10px;border-radius:14px;background:rgba(255,255,255,.16);color:#fff;font-size:13px;font-weight:700}
.ge-fp svg{width:30px;height:30px}
@media (max-width:1100px){.ge-fp span{width:64px;padding:10px 0 8px;font-size:12px}.ge-fp svg{width:24px;height:24px}}
@media (max-width:760px){.ge-gate{gap:12px}}
/* 앱 아이콘처럼: 흰 그림 + 아래 이름 */
.ge-icons{gap:8px}
.ge-icons span{display:flex;flex-direction:column;align-items:center;gap:5px}
.ge-icons span i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ac);box-shadow:0 2px 6px rgba(17,24,39,.12)}
.ge-icons span i svg{width:20px;height:20px}
.ge-icons span .ge-plus{width:31px;height:31px;border:1.5px dashed #9ca3af;background:none;box-shadow:none;color:#6b7280;font-style:normal;font-weight:700;font-size:16px}
.ge-icons em{font-style:normal;font-size:11px;color:#6b7280;white-space:nowrap}
@media (max-width:1100px){.ge-icons{gap:5px}.ge-icons span i{width:28px;height:28px;border-radius:8px}.ge-icons span i svg{width:16px;height:16px}.ge-icons span .ge-plus{width:25px;height:25px}.ge-icons em{font-size:10px}}
.ge-icons span .ge-plus{box-sizing:border-box;width:34px;height:34px}
@media (max-width:1100px){.ge-icons span .ge-plus{width:28px;height:28px}}
/* 읽는 순서 ① ② ③ */
.ge-tag{display:inline-flex;align-items:center;gap:6px}
.ge-n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#111827;color:#fff;font-style:normal;font-size:11px;font-weight:800}
.ge-tag-w{color:rgba(255,255,255,.9)}
.ge-tag-w .ge-n{background:#fff;color:#006fff}
.ge-old{color:#6b7280!important}
.ge-old s{color:#9ca3af;text-decoration-thickness:1.5px}
.ge-n{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums;padding:0;flex:none}
.ge-n{box-sizing:border-box;padding-top:1px}
/* 고객사 앱 안의 GATE 촬영 모듈 · 가운데는 인증 엔진 */
.ge-mod{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#0059cc;background:#eff9ff;border:1px solid #cfe3ff;border-radius:99px;padding:5px 12px 5px 9px;white-space:nowrap}
.ge-mod svg{width:15px;height:15px;color:#006fff}
.ge-gate .ge-eng{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);margin-top:-8px}
.ge-card.ge-app:first-child{gap:12px}
@media (max-width:1100px){.ge-mod{font-size:11px;padding:4px 9px 4px 7px}.ge-mod svg{width:13px;height:13px}}
/* GATE 다이어그램 v6: 고객사 앱 틀 안에서 GATE 모듈이 돈다 */
.gn{padding:40px}
.gn-app{background:#fff;border:1.5px solid #d1d5db;border-radius:24px;padding:20px 24px 28px;box-shadow:0 10px 30px rgba(17,24,39,.06)}
.gn-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid #eef1f5}
.gn-tag{font-size:15px;font-weight:800;color:#111827}
.gn .ge-icons{gap:10px}
.gn .ge-icons span{flex-direction:row;gap:5px}
.gn .ge-icons span i{width:24px;height:24px;border-radius:7px;box-shadow:none}
.gn .ge-icons span i svg{width:15px;height:15px}
.gn .ge-icons span .ge-plus{width:24px;height:24px;font-size:13px}
.gn .ge-icons em{font-size:12px}
.gn-flow{display:grid;grid-template-columns:1fr 72px 1.1fr 72px 1fr;align-items:stretch}
.gn-scr,.gn-mod{border-radius:18px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;min-height:180px}
.gn-scr{background:#f8fafc;border:1px solid #e3e8f0}
.gn-scr p{margin:0;font-size:13.5px;color:#4b5563}
.gn-mod{background:#006fff;box-shadow:0 12px 30px rgba(0,111,255,.3)}
.gn-lab{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#6b7280}
.gn-lab-w{color:#fff}
.gn-lab-w .ge-n{background:#fff;color:#006fff}
.gn-btn{font-size:13px;font-weight:700;color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:10px;padding:8px 14px}
.gn-act{font-size:13px;font-weight:600;color:rgba(255,255,255,.88)}
.gn .ge-fp span{width:72px}
.gn .ge-ok{font-size:16px}
.gn-arr{display:flex;align-items:center;padding:0 10px}
.gn-legend{display:flex;justify-content:center;gap:20px;margin-top:16px;font-size:13px;color:#4b5563;font-weight:600}
.gn-legend span{display:inline-flex;align-items:center;gap:7px}
.gn-sw{width:14px;height:14px;border-radius:4px;background:#f8fafc;border:1px solid #cbd5e1}
.gn-sw-b{background:#006fff;border-color:#006fff}
@media (max-width:1100px){.gn{padding:28px 16px}.gn-app{padding:16px 14px 20px}.gn-flow{grid-template-columns:1fr 36px 1.1fr 36px 1fr}.gn-arr{padding:0 4px}.gn .ge-fp span{width:60px}.gn-head{flex-direction:column;align-items:flex-start;gap:10px}}
@media (max-width:760px){
 .gn{padding:20px 12px}
 .gn-flow{grid-template-columns:1fr}
 .gn-scr,.gn-mod{min-height:0;padding:16px 14px}
 .gn-arr{justify-content:center;height:40px;padding:0}
 .gn-arr .ge-line{width:2px;height:28px}
 .gn-arr .ge-line svg{right:auto;left:50%;top:auto;bottom:-8px;transform:translateX(-50%) rotate(90deg)}
 .gn-arr .ge-line i{left:-3px!important;animation-name:ge1v}.gn-arr2 .ge-line i{animation-name:ge2v}
 .gn .ge-icons{flex-wrap:wrap;gap:8px}
 .gn-legend{flex-wrap:wrap;gap:10px 16px}}
/* GATE 다이어그램 v7: 고객사 앱(촬영 · 결과 화면) ↔ API ↔ UNIVS GATE */
.ga{display:grid;grid-template-columns:minmax(0,1.3fr) 130px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:0;padding:40px}
.ga-app{grid-column:1;grid-row:1 / 3;background:#fff;border:1.5px solid #d1d5db;border-radius:24px;padding:20px 22px 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px;box-shadow:0 10px 30px rgba(17,24,39,.06)}
.ga-app .gn-head{grid-column:1 / -1;margin-bottom:6px}
.ga .gn-scr{min-height:170px}
.ga-s1{grid-column:1}.ga-s3{grid-column:2}
.ga-a{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 12px;align-self:center}
.ga-a1{grid-row:1;align-self:end;margin-bottom:18px}.ga-a2{grid-row:2;align-self:start;margin-top:18px}
.ga-a span{font-size:12.5px;font-weight:700;color:#4b5563}
.ga-a2 span{color:#047857}
.ga-a2 .ge-line svg{right:auto;left:-6px;transform:translateY(-50%) rotate(180deg)}
.ga-a2 .ge-line i{background:#10b981;animation-name:ge2r}
@keyframes ge2r{0%,50%{left:calc(100% - 8px);opacity:0}55%{opacity:1}85%{opacity:1}90%{left:0;opacity:0}100%{opacity:0}}
.ga-gate{grid-column:3;grid-row:1 / 3;background:#006fff;border-radius:24px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;box-shadow:0 14px 36px rgba(0,111,255,.32)}
.ga-gate b{font-size:26px;font-weight:800;color:#fff}
.ga-gate .ge-fp span{width:72px}
.ga .gn-legend{grid-column:1 / -1;grid-row:3}
@media (max-width:1100px){.ga{grid-template-columns:minmax(0,1.4fr) 80px minmax(0,1fr);padding:28px 16px}.ga-app{padding:16px 14px;gap:10px}.ga-app .gn-head{flex-direction:column;align-items:flex-start;gap:8px}.ga-gate b{font-size:20px}.ga .ge-fp span{width:58px}.ga-a{padding:0 6px}}
@media (max-width:860px){.ga-app{grid-template-columns:1fr}.ga-s3{grid-column:1}}
@media (max-width:760px){
 .ga{grid-template-columns:1fr;grid-template-rows:none;padding:20px 12px}
 .ga-app{display:contents}
 .ga-app .gn-head{order:0;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;padding:12px;margin:0 0 10px}
 .ga-s1{order:1}.ga-a1{order:2}.ga-gate{order:3}.ga-a2{order:4}.ga-s3{order:5}.ga .gn-legend{order:6}
 .ga>*,.ga-app>*{grid-column:1!important;grid-row:auto!important}
 .ga .gn-scr{min-height:0;background:#fff;border:1.5px solid #d1d5db}
 .ga-a{flex-direction:row;justify-content:center;height:48px;margin:0!important;align-self:stretch}
 .ga-a .ge-line{width:2px;height:30px}
 .ga-a .ge-line svg{right:auto!important;left:50%!important;top:auto;bottom:-8px;transform:translateX(-50%) rotate(90deg)!important}
 .ga-a .ge-line i{left:-3px!important;animation-name:ge1v}.ga-a2 .ge-line i{animation-name:ge2v}}
/* 결과 표시: 바탕 없이, 체크만 초록 원 */
.ga .ge-ok,.gn .ge-ok{background:none;padding:0;gap:8px;color:#047857}
.ga .ge-ok svg,.gn .ge-ok svg{width:22px;height:22px;padding:4px;box-sizing:border-box;border-radius:50%;background:#10b981;color:#fff}
/* 인증 엔진 줄 배지: 배경에 묻히지 않게 흰 바탕 + 테두리 */
.layer .chip.on{background:#fff;border:1px solid #b9d6ff;color:#0059cc;font-weight:700}
.layer .chip.soon{background:#fff;border:1px dashed #cbd5e1;color:#6b7280}
.ge-gate b{white-space:nowrap}
@media (min-width:1101px){.ge-gate b{font-size:28px}}
@media (min-width:761px) and (max-width:1100px){.ge-gate b{font-size:19px}}
@media (max-width:760px){.ge-gate b{font-size:24px}}
/* 개인정보 카드: 이름표를 각 그림 아래로 · 얼굴에 촬영 프레임 */
.ilf2{align-items:flex-start;gap:14px}
.ilf2 .arr{margin-top:26px}
.ilcol{display:flex;flex-direction:column;align-items:center;gap:8px}
.ilcol small{font-size:12px;color:var(--ink-3);font-weight:600}
.ilcol small.tag{color:var(--brand);font-weight:700}
.ilf2 code{margin-top:14px}
.capf{position:relative;display:grid;place-items:center;width:64px;height:64px}
.capf::before{content:"";position:absolute;inset:0;background:
 linear-gradient(var(--brand),var(--brand)) top left/14px 2px no-repeat,
 linear-gradient(var(--brand),var(--brand)) top left/2px 14px no-repeat,
 linear-gradient(var(--brand),var(--brand)) top right/14px 2px no-repeat,
 linear-gradient(var(--brand),var(--brand)) top right/2px 14px no-repeat,
 linear-gradient(var(--brand),var(--brand)) bottom left/14px 2px no-repeat,
 linear-gradient(var(--brand),var(--brand)) bottom left/2px 14px no-repeat,
 linear-gradient(var(--brand),var(--brand)) bottom right/14px 2px no-repeat,
 linear-gradient(var(--brand),var(--brand)) bottom right/2px 14px no-repeat}
.ilf2 code,.ilcol small{white-space:nowrap}
@media (max-width:760px){.ilf2{gap:6px}.ilf2 .arr{margin-top:20px}.capf{width:52px;height:52px}.ilf2 code{font-size:11px;padding:6px 8px;margin-top:10px}.ilcol small{font-size:11px}}
/* ①②③ 아래 여백 세 카드 같게 (14px, 글자 윗여백 보정) */
.ge-card.ge-app:first-child{gap:14px}
.ge-card{gap:14px}
.ge-gate b{line-height:1;margin-top:-3px}