/* AgentPay 안전거래시스템 — 공통 스타일 (라이트, 2026-08-20 재구성) */
:root{
  --bg:#FCFCFC; --card:#FFFFFF; --panel:#F4F5F7; --ink:#15181F; --muted:#454C5C; --line:#DFE3EA;
  --navy:#3D5BF6; --navy-deep:#2E46D8; --on-navy:#EDF0FF; --on-navy-muted:#B9C4F5;
  --amber:#3D5BF6; --amber-soft:#EDF1FE; --good:#2E7D5B; --risk:#DC2626;
  --dark:#0E1017; --on-dark-muted:#9AA3B8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.66;word-break:keep-all;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
a{color:inherit}
.btn{display:inline-block;background:var(--navy);color:#fff;font-weight:800;font-size:15px;
  padding:14px 26px;border-radius:11px;text-decoration:none;border:0;cursor:pointer;transition:transform .12s ease, background .12s ease}
.btn:hover{transform:translateY(-2px);background:var(--navy-deep)}
.btn.amber{background:var(--amber);color:#fff}
.btn.amber:hover{background:var(--navy-deep)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);font-weight:700}
.btn.ghost:hover{border-color:var(--amber);background:#fff}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(252,252,252,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;text-decoration:none;font-size:18px}
.brand .bs{display:block;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.nav .links{display:flex;gap:26px;align-items:center;font-size:14.5px}
.nav .links a{text-decoration:none;color:var(--muted);font-weight:700;transition:color .12s ease}
.nav .links a:hover{color:var(--amber)}
.nav .links a.on{color:var(--ink);border-bottom:2px solid var(--amber);padding-bottom:3px}
.nav .links a.cta{background:var(--navy);color:#fff;padding:9px 18px;border-radius:9px}
.nav .links a.cta:hover{background:var(--navy-deep);color:#fff}
.menu-btn{display:none;background:none;border:1.5px solid var(--line);border-radius:9px;padding:7px 12px;font-weight:800;cursor:pointer;font-size:16px;color:var(--ink);line-height:1}
@media(max-width:720px){
  .nav .links a:not(.cta){display:none}
  .menu-btn{display:inline-flex}
  .nav .links.open{position:absolute;top:66px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 24px;gap:15px;box-shadow:0 10px 24px rgba(18,32,58,.08)}
  .nav .links.open a{display:block !important}
}

/* hero */
.hero{padding:84px 0 54px;text-align:center}
.eyebrow{color:var(--amber);font-weight:800;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.hero h1{font-size:clamp(32px,5.4vw,56px);font-weight:800;line-height:1.22;letter-spacing:-.02em;max-width:860px;margin:0 auto}
.hero h1::after{content:"";display:block;width:90px;height:5px;background:var(--navy);border-radius:3px;margin:28px auto 0}
.hero h1 .pt{color:var(--amber)}
.hero p.sub{margin:26px auto 0;font-size:clamp(15.5px,2.2vw,18.5px);color:var(--muted);max-width:720px}
.hero p.sub b{color:var(--ink)}
.cta-row{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* sections */
section{padding:64px 0}
section + section{border-top:1px solid var(--line)}
.kicker{color:var(--amber);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
h2{font-size:clamp(23px,3.4vw,32px);font-weight:800;letter-spacing:-.015em}
.lead{color:var(--muted);font-size:16.5px;margin-top:14px;max-width:760px}
.lead b{color:var(--ink)}
h3{font-size:18px;font-weight:800}

.grid{display:grid;gap:16px;margin-top:30px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--card);border:1.5px solid var(--line);border-radius:15px;padding:24px 24px}
.card h3{margin-bottom:8px;font-size:17px}
.card p{color:var(--muted);font-size:14.5px}
.card p b{color:var(--ink)}
.card .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--navy);color:#fff;font-weight:800;font-size:14px;margin-bottom:12px}
.card.hot{border-color:var(--amber);background:var(--amber-soft)}

/* dark band (보호범위 등) */
.band{text-align:left;background:linear-gradient(160deg,#3D5BF6 0%,#2E46D8 100%);border-radius:18px;color:var(--on-navy);padding:34px 36px;margin-top:34px}
.band .k{color:#C9D4FF;font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.band .t{font-size:clamp(18px,2.6vw,23px);font-weight:800;color:#fff;line-height:1.5}
.band p{margin-top:12px;color:var(--on-navy-muted);font-size:15px;max-width:780px}
.band p b{color:var(--on-navy)}

/* key-value 표 */
.kvt{margin-top:26px;background:var(--card);border:1.5px solid var(--line);border-radius:15px;overflow:hidden}
.kvr{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:17px 24px;border-top:1px solid var(--line);font-size:15px}
.kvr:first-child{border-top:0}
.kvr .k{font-weight:800}
.kvr .v{color:var(--muted)}
.kvr .v b{color:var(--ink)}
@media(max-width:620px){.kvr{grid-template-columns:1fr;gap:4px}}

/* steps */
.stepcard{position:relative;padding-top:26px}
.stepcard .tag{position:absolute;top:-13px;left:22px;background:var(--amber);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;padding:4px 12px;border-radius:999px}

/* note box */
.note{background:var(--amber-soft);border-left:4px solid var(--amber);border-radius:0 12px 12px 0;padding:18px 22px;margin-top:26px}
.note b{font-weight:800}
.note p{font-size:14.5px;color:var(--ink)}

/* FAQ */
.faq{margin-top:26px}
.faq details{background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:0 22px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:800;font-size:15.5px;padding:17px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";color:var(--amber);font-size:20px;font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq .a{color:var(--muted);font-size:14.5px;padding:0 0 17px}
.faq .a b{color:var(--ink)}

/* 문의 폼 */
.final{padding:70px 0;background:var(--card);border-top:1px solid var(--line)}
.lead-form{margin-top:26px;display:flex;flex-direction:column;gap:11px;text-align:left}
.lead-form input,.lead-form textarea{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:11px;
  padding:14px 16px;color:var(--ink);font-size:15px;font-family:inherit}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--amber)}
.form-note{font-size:13.5px;margin-top:2px}
.form-note.ok{color:var(--good)}
.form-note.err{color:var(--risk)}
.disc{color:var(--muted);font-size:12.5px}

/* CTA band */
.ctaband{background:linear-gradient(160deg,#3D5BF6 0%,#2E46D8 100%);color:#fff;border-radius:18px;padding:38px 36px;margin:64px auto;display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.ctaband h3{font-size:clamp(18px,2.6vw,24px);color:#fff}
.ctaband p{color:var(--on-navy-muted);margin-top:6px;font-size:14.5px}

/* journey */
.jour{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
@media(max-width:860px){.jour{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.jour{grid-template-columns:1fr}}
.jcard{background:var(--card);border:1.5px solid var(--line);border-radius:15px;padding:20px;position:relative}
.jcard .yr{font-size:12px;font-weight:800;color:var(--amber);letter-spacing:.06em;margin-bottom:8px}
.jcard h3{font-size:16.5px;margin-bottom:6px}
.jcard p{font-size:13.5px;color:var(--muted)}
.jcard.now{border-color:var(--amber);background:var(--amber-soft)}
.jcard .arr{position:absolute;right:0;top:50%;transform:translate(calc(50% + 8.5px),-50%);color:var(--amber);font-weight:800;font-size:16px;z-index:2}
@media(max-width:860px){.jcard .arr{display:none}}

/* quote card */
.qcard{margin-top:28px;background:var(--card);border:1.5px solid var(--line);border-left:4px solid var(--amber);border-radius:0 15px 15px 0;padding:26px 30px}
.qcard .qt{font-size:15.5px;line-height:1.8;color:var(--ink)}
.qcard .who{margin-top:16px;font-size:13.5px;color:var(--muted);font-weight:700}

/* footer — PARTNERS & AFFILIATIONS (라이트) */
footer{background:#fff;border-top:1px solid var(--line);color:var(--muted)}
.partners{padding:56px 0 44px;text-align:center;border-bottom:1px solid var(--line)}
.partners .pt-eng{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.partners .pt-kr{font-size:clamp(20px,2.8vw,26px);font-weight:800;color:var(--ink);margin-top:8px}
.partners .pt-kr::after{content:"";display:block;width:56px;height:4px;background:var(--navy);border-radius:2px;margin:16px auto 0}
.logo-marquee{overflow:hidden;position:relative;margin-top:38px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-track{display:flex;width:max-content;animation:logoscroll 26s linear infinite}
.logo-set{display:flex;align-items:flex-start;gap:76px;padding-right:76px}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .logo-set+.logo-set{display:none}
}
.logo-item{display:flex;flex-direction:column;align-items:center;gap:10px}
.logo-item img{height:46px;width:auto;display:block}
.logo-item.tall img{height:58px}
.logo-item .cap{font-size:11.5px;color:var(--muted)}
.botbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0 8px;font-size:13px}
.botbar nav a{color:var(--muted);text-decoration:none;margin-left:22px;font-weight:600}
.botbar nav a:hover{color:var(--navy)}
.legal{padding:6px 0 30px;font-size:12px;line-height:1.7;color:#616978;max-width:860px}

/* 시각 요소(viz) */

.viz{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:26px 26px 20px;margin-top:28px;text-align:left}
.viz-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.viz-title{font-size:15.5px;font-weight:800;color:var(--ink)}
.viz-sub{font-size:13.5px;color:var(--muted)}
.viz-cap{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:#616978;line-height:1.7}
.viz svg{display:block;width:100%;height:auto}
.viz-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 범례 */
.lg{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:var(--muted)}
.lg span{display:flex;align-items:center;gap:7px}
.lg i{width:11px;height:11px;border-radius:50%;display:block;flex:none}
.lg i.pass{background:#C3C9D6}
.lg i.ask{background:var(--navy)}
.lg i.hold{background:var(--risk)}

/* ── 판정 흐름 다이어그램 ─────────────────────────── */
.flowdia{display:grid;grid-template-columns:1fr auto 1fr auto 1.15fr;align-items:center;gap:12px}
.flowdia .fnode{background:var(--panel);border:1.5px solid var(--line);border-radius:13px;padding:16px 16px}
.flowdia .fnode.core{background:var(--amber-soft);border-color:var(--navy)}
.flowdia .fk{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.flowdia .fnode.core .fk{color:var(--navy)}
.flowdia .ft{font-size:14.5px;font-weight:800;line-height:1.45}
.flowdia .fd{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.flowdia .farr{color:var(--navy);font-weight:800;font-size:19px;text-align:center;line-height:1}
.fouts{display:flex;flex-direction:column;gap:8px}
.fout{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  background:var(--card);border:1.5px solid var(--line);border-left-width:4px;border-radius:0 11px 11px 0;padding:11px 14px}
.fout.pass{border-left-color:#C3C9D6}
.fout.ask{border-left-color:var(--navy)}
.fout.hold{border-left-color:var(--risk)}
.fout .fo-t{font-size:13.5px;font-weight:800}
.fout .fo-d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.55}
.fout .dot{width:10px;height:10px;border-radius:50%;margin-top:5px}
.fout.pass .dot{background:#C3C9D6}
.fout.ask .dot{background:var(--navy)}
.fout.hold .dot{background:var(--risk)}
@media(max-width:860px){
  .flowdia{grid-template-columns:1fr;gap:10px}
  .flowdia .farr{transform:rotate(90deg);padding:2px 0}
}

/* ── 01-04 번호 리스트 ─────────────────────────────── */
.numlist{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:32px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.numlist .ni{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:28px 30px}
.numlist .nn{font-size:13px;font-weight:800;color:var(--navy);letter-spacing:.08em;margin-bottom:12px;font-variant-numeric:tabular-nums}
.numlist .ni h3{font-size:17.5px;margin-bottom:9px;line-height:1.4}
.numlist .ni p{font-size:14.5px;color:var(--muted);line-height:1.72}
.numlist .ni p b{color:var(--ink)}
@media(max-width:720px){.numlist{grid-template-columns:1fr}}

/* ── 운영 화면 목업 ────────────────────────────────── */
.console{background:#0E1017;border-radius:15px;overflow:hidden;border:1px solid #232734}
.cs-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#151924;border-bottom:1px solid #232734}
.cs-bar .cs-dots{display:flex;gap:6px}
.cs-bar .cs-dots i{width:9px;height:9px;border-radius:50%;background:#333A4B;display:block}
.cs-bar .cs-t{font-size:12px;color:#8A93A5;font-weight:700;margin-left:6px}
.cs-bar .cs-live{margin-left:auto;font-size:11px;color:#7F8AA3;display:flex;align-items:center;gap:6px}
.cs-bar .cs-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#2E7D5B;display:block}
.cs-tbl{width:100%;border-collapse:collapse;font-size:13px}
.cs-tbl th{text-align:left;padding:11px 16px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#6C7690;font-weight:800;border-bottom:1px solid #232734;background:#11141C}
.cs-tbl td{padding:13px 16px;border-bottom:1px solid #1C2029;color:#C6CCDA;vertical-align:top}
.cs-tbl tr:last-child td{border-bottom:0}
.cs-tbl .amt{font-variant-numeric:tabular-nums;white-space:nowrap;color:#EDEFF5;font-weight:700}
.cs-tbl .rsn{color:#8A93A5;font-size:12px;line-height:1.6;display:block;margin-top:3px}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap}
.pill.pass{background:#1C2029;color:#8A93A5}
.pill.ask{background:rgba(61,91,246,.16);color:#8CA2FF}
.pill.hold{background:rgba(220,38,38,.18);color:#F87171}
@media(max-width:720px){
  .cs-tbl .hide-s{display:none}
  .cs-tbl td,.cs-tbl th{padding:11px 12px}
}

/* ── 예산 게이지 ───────────────────────────────────── */
.gauges{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:720px){.gauges{grid-template-columns:1fr;gap:22px}}
.gauge .gh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.gauge .gk{font-size:13.5px;font-weight:800}
.gauge .gv{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gbar{height:13px;border-radius:7px;background:#EAEDF3;overflow:hidden;position:relative}
.gbar i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#3D5BF6,#5E78FF)}
.gbar.warn i{background:linear-gradient(90deg,#F87171,#DC2626)}
.gauge .gn{font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.65}
.gauge .gn b{color:var(--ink)}

/* ── 타임라인 ──────────────────────────────────────── */
.tline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;position:relative}
.tline .tstep{padding:0 20px;position:relative}
.tline .tstep:first-child{padding-left:0}
.tline .tstep:last-child{padding-right:0}
.tline .trail{height:3px;background:var(--line);border-radius:2px;position:relative;margin-bottom:20px}
.tline .tstep.on .trail{background:var(--navy)}
.tline .trail::after{content:"";position:absolute;left:0;top:-5px;width:13px;height:13px;border-radius:50%;
  background:var(--card);border:3px solid var(--line)}
.tline .tstep.on .trail::after{border-color:var(--navy)}
.tline .tk{font-size:11.5px;font-weight:800;letter-spacing:.09em;color:var(--muted);margin-bottom:7px}
.tline .tstep.on .tk{color:var(--navy)}
.tline h3{font-size:16.5px;margin-bottom:7px}
.tline p{font-size:13.5px;color:var(--muted);line-height:1.7}
@media(max-width:720px){
  .tline{grid-template-columns:1fr;gap:22px}
  .tline .tstep{padding:0}
}

/* ── 섹션 리듬(레퍼런스 구조: 설명 다음 바로 그림) ── */
.sec-tight{padding-top:0}
.hero .viz{margin-top:40px}

/* 모션 */
@keyframes ap-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ap-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ap-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes ap-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ap-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes ap-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ap-roll{
  0%{transform:translateX(-280px);opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  100%{transform:translateX(60px);opacity:0}
}
@keyframes ap-flow{
  0%{opacity:0;transform:translateX(-6px)}
  35%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translateX(6px)}
}

@media (prefers-reduced-motion:no-preference){

  /* 히어로 — 진입 시 1회 */
  .hero .eyebrow{animation:ap-up .55s .04s both cubic-bezier(.22,.8,.3,1)}
  .hero h1{animation:ap-up .65s .12s both cubic-bezier(.22,.8,.3,1)}
  .hero p.sub{animation:ap-up .6s .24s both cubic-bezier(.22,.8,.3,1)}
  .hero .cta-row{animation:ap-up .6s .34s both cubic-bezier(.22,.8,.3,1)}
  .hero .viz{animation:ap-up .7s .44s both cubic-bezier(.22,.8,.3,1)}

  /* 판정 흐름 — 왼쪽에서 오른쪽으로 순차 */
  .flowdia > *{animation:ap-in .5s both cubic-bezier(.22,.8,.3,1)}
  .flowdia > *:nth-child(1){animation-delay:.60s}
  .flowdia > *:nth-child(2){animation-delay:.72s}
  .flowdia > *:nth-child(3){animation-delay:.80s}
  .flowdia > *:nth-child(4){animation-delay:.92s}
  .flowdia > *:nth-child(5){animation-delay:1.00s}
  .fouts .fout{animation:ap-in .45s both cubic-bezier(.22,.8,.3,1)}
  .fouts .fout:nth-child(1){animation-delay:1.06s}
  .fouts .fout:nth-child(2){animation-delay:1.18s}
  .fouts .fout:nth-child(3){animation-delay:1.30s}
  .flowdia .farr{animation-name:ap-flow,ap-in;animation-duration:2.6s,.5s;
    animation-iteration-count:infinite,1;animation-timing-function:ease-in-out,ease-out;animation-fill-mode:none,both}

  /* 구르는 창 — 매일 미끄러진다는 것을 그대로 보여줌 */
  .ap-window{animation:ap-roll 9s linear infinite}

  /* 스크롤 연동 (미지원 브라우저는 정지 상태 = 현재와 동일) */
  @supports (animation-timeline:view()){
    .viz{view-timeline-name:--viz}

    .ap-limit{transform-box:view-box;transform-origin:68px 128px;
      animation:ap-draw 1s linear both;animation-timeline:--viz;animation-range:entry 25% entry 70%}
    .viz:not(.is-sweep) .ap-dots circle{transform-box:fill-box;transform-origin:center;
      animation:ap-pop 1s linear both;animation-timeline:--viz}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(1){animation-range:entry 34% entry 42%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(2){animation-range:entry 36% entry 44%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(3){animation-range:entry 38% entry 46%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(4){animation-range:entry 40% entry 48%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(5){animation-range:entry 42% entry 50%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(6){animation-range:entry 44% entry 52%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(7){animation-range:entry 46% entry 54%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(8){animation-range:entry 48% entry 56%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(9){animation-range:entry 50% entry 58%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(10){animation-range:entry 52% entry 60%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(11){animation-range:entry 54% entry 62%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(12){animation-range:entry 56% entry 64%}
    .viz:not(.is-sweep) .ap-dots circle:nth-child(13){animation-range:entry 58% entry 66%}
    .viz:not(.is-sweep) .ap-flag{transform-box:view-box;animation:ap-rise 1s linear both;animation-timeline:--viz}
    .viz:not(.is-sweep) .ap-flag.f1{animation-range:entry 62% entry 74%}
    .viz:not(.is-sweep) .ap-flag.f2{animation-range:entry 70% entry 82%}

    .gbar i{transform-origin:left center;animation:ap-fill 1s linear both;
      animation-timeline:--viz;animation-range:entry 30% entry 70%}

    .console:not(.is-sim) .cs-tbl tbody tr{animation:ap-in 1s linear both;animation-timeline:--viz}
    .console:not(.is-sim) .cs-tbl tbody tr:nth-child(1){animation-range:entry 30% entry 42%}
    .console:not(.is-sim) .cs-tbl tbody tr:nth-child(2){animation-range:entry 35% entry 47%}
    .console:not(.is-sim) .cs-tbl tbody tr:nth-child(3){animation-range:entry 40% entry 52%}
    .console:not(.is-sim) .cs-tbl tbody tr:nth-child(4){animation-range:entry 45% entry 57%}
    .console:not(.is-sim) .cs-tbl tbody tr:nth-child(5){animation-range:entry 50% entry 62%}

    .tline{view-timeline-name:--tl}
    .tline .trail{transform-origin:left center;animation:ap-draw 1s linear both;
      animation-timeline:--tl}
    .tline .tstep:nth-child(1) .trail{animation-range:entry 30% entry 50%}
    .tline .tstep:nth-child(2) .trail{animation-range:entry 40% entry 60%}
    .tline .tstep:nth-child(3) .trail{animation-range:entry 50% entry 70%}

    .numlist{view-timeline-name:--nl}
    .numlist .ni{animation:ap-in 1s linear both;animation-timeline:--nl}
    .numlist .ni:nth-child(1){animation-range:entry 25% entry 45%}
    .numlist .ni:nth-child(2){animation-range:entry 32% entry 52%}
    .numlist .ni:nth-child(3){animation-range:entry 39% entry 59%}
    .numlist .ni:nth-child(4){animation-range:entry 46% entry 66%}
  }
}

/* 시뮬레이션 */
.cs-stats{display:flex;gap:14px;margin-left:auto;font-size:11.5px;color:#8A93A5;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-stats b{color:#EDEFF5;font-weight:800;margin-left:3px}
.cs-stats .s-ask b{color:#8CA2FF}
.cs-stats .s-hold b{color:#F87171}
.cs-bar .cs-live{margin-left:14px}
@media(max-width:720px){.cs-stats span:not(:first-child){display:none}}
.pill.wait{background:#1C2029;color:#B4BBCB}
.pill.wait::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#8CA2FF;margin-right:6px;vertical-align:middle}
.is-sim .cs-tbl tbody tr{transition:background .35s ease}
.is-sim .cs-tbl tr.sim-ask{background:rgba(61,91,246,.07)}
.is-sim .cs-tbl tr.sim-hold{background:rgba(220,38,38,.09)}
.fout,.fnode.core{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.fout.lit{background:var(--amber-soft);box-shadow:0 0 0 3px rgba(61,91,246,.14)}
.fout.hold.lit{background:#FEF2F2;box-shadow:0 0 0 3px rgba(220,38,38,.16)}
.fout.pass.lit{background:var(--panel);box-shadow:0 0 0 3px rgba(21,24,31,.08)}
.fnode.core.lit{box-shadow:0 0 0 4px rgba(61,91,246,.18)}

@media (prefers-reduced-motion:no-preference){
  @keyframes ap-simin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  @keyframes ap-simout{to{opacity:0;transform:translateY(6px)}}
  @keyframes ap-blink{0%,100%{opacity:1}50%{opacity:.35}}
  @keyframes ap-livedot{0%,100%{box-shadow:0 0 0 0 rgba(46,125,91,.45)}70%{box-shadow:0 0 0 6px rgba(46,125,91,0)}}
  .is-sim tr.sim-in{animation:ap-simin .38s cubic-bezier(.22,.8,.3,1) both}
  .is-sim tr.sim-out{animation:ap-simout .4s ease both}
  .pill.wait::before{animation:ap-blink .9s ease-in-out infinite}
  .is-sim .cs-live::before{animation:ap-livedot 1.8s ease-out infinite}
}

/* 흐름도 패킷 · 차트 스윕 */
.flowdia{position:relative}
.packet{position:absolute;left:0;top:0;opacity:0;pointer-events:none;z-index:3;will-change:transform;
  background:#15181F;color:#fff;font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(21,24,31,.18);font-variant-numeric:tabular-nums;transition:background .25s ease}
.packet.is-pass{background:#6B7280}
.packet.is-ask{background:var(--navy)}
.packet.is-hold{background:var(--risk)}
.sw-scan{stroke:#3D5BF6;stroke-width:1.5;stroke-dasharray:3 4;opacity:0;transition:opacity .4s ease}
.sw-layer{transition:opacity .9s ease}
.sw-layer.sw-fade{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .sw-dot{transform-box:fill-box;transform-origin:center;animation:ap-pop .35s cubic-bezier(.22,.8,.3,1) both}
  .sw-flag{transform-box:view-box;animation:ap-rise .45s cubic-bezier(.22,.8,.3,1) both}
}

/* 4단계 순서 점등 */
[data-steps] .card{transition:border-color .35s ease,background .35s ease,box-shadow .35s ease}
[data-steps] .card .n{transition:transform .35s ease,box-shadow .35s ease}
[data-steps] .card.step-on{border-color:var(--navy);background:var(--amber-soft);box-shadow:0 0 0 4px rgba(61,91,246,.14)}
[data-steps] .card.step-on .n{transform:scale(1.12);box-shadow:0 0 0 4px rgba(61,91,246,.22)}