/* ══════════════════════════════════════════════════════════════
   SIJAK — About (플랫폼 소개 · 온톨로지)  /about
   ──────────────────────────────────────────────────────────────
   · 로그인 화면(login.css)의 토큰·스테이지 언어를 그대로 이어받는다.
   · app.css 는 로드하지 않는다(body overflow:hidden 등 앱 셸 규칙과 충돌).
   · 모든 클래스는 ab- 접두사. 색 토큰은 login.css 와 동일한 값.
   ══════════════════════════════════════════════════════════════ */

:root{
  --sj-blue:#1b64f2;
  --sj-blue-h:#1550cf;
  --sj-amber:#ffb020;
  --sj-panel:#ffffff;
  --sj-field:#f4f6fa;
  --sj-field-on:#ffffff;
  --sj-line:rgba(11,20,36,.10);
  --sj-line-2:rgba(11,20,36,.06);
  --sj-fg:#0b1424;
  --sj-fg-2:#5b6577;
  --sj-fg-3:#8b94a4;
  --sj-ring:rgba(27,100,242,.16);
  --sj-blue-soft:rgba(27,100,242,.09);
  --sj-amber-soft:rgba(255,176,32,.16);
  --sj-shadow:0 1px 2px rgba(11,20,36,.04),0 14px 34px -14px rgba(11,20,36,.14);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Pretendard","Apple SD Gothic Neo","Noto Sans KR",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sj-blue:#3b82f6;
  --sj-blue-h:#5a97ff;
  --sj-panel:#0f1116;
  --sj-field:#191c23;
  --sj-field-on:#1f232c;
  --sj-line:rgba(255,255,255,.12);
  --sj-line-2:rgba(255,255,255,.07);
  --sj-fg:#f2f4f8;
  --sj-fg-2:#a3abba;
  --sj-fg-3:#727b8b;
  --sj-ring:rgba(59,130,246,.22);
  --sj-blue-soft:rgba(59,130,246,.14);
  --sj-amber-soft:rgba(255,176,32,.14);
  --sj-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -14px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --sj-blue:#3b82f6;
  --sj-blue-h:#5a97ff;
  --sj-panel:#0f1116;
  --sj-field:#191c23;
  --sj-field-on:#1f232c;
  --sj-line:rgba(255,255,255,.12);
  --sj-line-2:rgba(255,255,255,.07);
  --sj-fg:#f2f4f8;
  --sj-fg-2:#a3abba;
  --sj-fg-3:#727b8b;
  --sj-ring:rgba(59,130,246,.22);
  --sj-blue-soft:rgba(59,130,246,.14);
  --sj-amber-soft:rgba(255,176,32,.14);
  --sj-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px -14px rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--sj-panel); color:var(--sj-fg);
  font-size:15px; line-height:1.65; letter-spacing:-.014em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; word-break:keep-all; overflow-wrap:break-word;
}
a{color:inherit; text-decoration:none}
ul,ol{list-style:none}
b,strong{font-weight:680}
[hidden]{display:none!important}
::selection{background:var(--sj-blue-soft)}

.ab-wrap{width:min(1120px,100% - clamp(40px,8vw,96px)); margin:0 auto}

/* ══ 상단 바 ═══════════════════════════════════════════════ */
.ab-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(20px,4vw,48px);
  color:#fff;
  background:rgba(7,13,32,.62); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ab-top.on{background:rgba(7,13,32,.86)}
.ab-brand{display:flex; align-items:center; gap:11px}
.ab-brand svg{width:24px; height:24px; flex:none}
.ab-wordmark{font-size:17px; font-weight:740; letter-spacing:.12em}
.ab-wordmark small{font-size:11px; font-weight:560; letter-spacing:.04em; color:rgba(255,255,255,.55); margin-left:10px}
.ab-nav{display:flex; align-items:center; gap:4px}
.ab-nav a{
  font-size:13px; font-weight:580; color:rgba(255,255,255,.72); padding:7px 11px; border-radius:9px;
  transition:color .14s ease, background .14s ease;
}
.ab-nav a:hover{color:#fff; background:rgba(255,255,255,.08)}
.ab-login{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:650; color:#fff; letter-spacing:-.01em;
  background:var(--sj-blue); border-radius:10px; padding:8px 14px; margin-left:8px;
  box-shadow:0 8px 20px -8px rgba(27,100,242,.65);
  transition:background .15s ease, transform .12s ease;
}
.ab-login:hover{background:var(--sj-blue-h)}
.ab-login:active{transform:scale(.985)}
.ab-login svg{width:14px; height:14px}
@media (max-width:760px){
  .ab-nav a:not(.ab-login){display:none}
  .ab-wordmark small{display:none}
}

/* ══ 히어로 — 로그인 스테이지 그대로 ═══════════════════════ */
.ab-hero{
  position:relative; overflow:hidden; color:#fff;
  margin-top:-61px; padding:clamp(120px,16vw,176px) 0 clamp(72px,9vw,112px);
  background:
    radial-gradient(115% 85% at 10% 6%, #1e4fd8 0%, rgba(30,79,216,0) 58%),
    radial-gradient(95% 85% at 92% 96%, #0d2a8a 0%, rgba(13,42,138,0) 62%),
    linear-gradient(158deg,#0a1f5c 0%,#0b1638 54%,#070d20 100%);
}
.ab-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 30% 40%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(80% 70% at 30% 40%,#000 0%,transparent 78%);
}
.ab-glow{position:absolute; border-radius:50%; filter:blur(78px); pointer-events:none; z-index:0}
.ab-glow.a{width:min(560px,60vw); aspect-ratio:1; left:-14%; top:-16%; background:#2f6bff; opacity:.50;
  animation:abDrift 19s ease-in-out infinite alternate}
.ab-glow.b{width:min(440px,50vw); aspect-ratio:1; right:-12%; bottom:-18%; background:#6d3bff; opacity:.34;
  animation:abDrift 24s ease-in-out infinite alternate-reverse}
.ab-glow.c{width:min(300px,34vw); aspect-ratio:1; right:14%; top:8%; background:var(--sj-amber); opacity:.14;
  animation:abDrift 29s ease-in-out infinite alternate}
@keyframes abDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5%,7%,0) scale(1.14)}}

.ab-hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:end}

.ab-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:5px 13px 5px 10px;
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
}
.ab-kicker i{width:6px; height:6px; border-radius:50%; background:var(--sj-amber); flex:none;
  box-shadow:0 0 0 3px rgba(255,176,32,.22)}

.ab-rot{margin-top:22px; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; min-height:1.16em}
.ab-word{
  font-size:clamp(46px,6vw,84px); font-weight:780; letter-spacing:-.04em; line-height:1.1; color:#fff; display:inline-block;
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .34s cubic-bezier(.22,1,.36,1);
}
.ab-word.out{opacity:0; transform:translateY(-.28em)}
.ab-word.in{opacity:0; transform:translateY(.32em)}
.ab-lang{font-size:11.5px; font-weight:620; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.44); transition:opacity .34s ease}
.ab-lang.out{opacity:0}

.ab-claim{
  margin-top:20px; font-size:clamp(20px,2.1vw,30px); font-weight:560; line-height:1.5;
  color:rgba(255,255,255,.86); letter-spacing:-.024em; max-width:18em;
}
.ab-claim b{color:#fff; font-weight:740; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,transparent 62%,rgba(255,176,32,.38) 62%)}
.ab-src{margin-top:12px; font-size:11.5px; color:rgba(255,255,255,.42); letter-spacing:0}

/* 히어로 우측 — 한 줄 정의 카드 */
.ab-def{
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); backdrop-filter:blur(8px);
  border-radius:18px; padding:clamp(20px,2.4vw,28px);
}
.ab-def dt{font-size:11.5px; font-weight:640; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.ab-def dd{margin-top:8px; font-size:16.5px; font-weight:560; line-height:1.55; color:rgba(255,255,255,.9); letter-spacing:-.02em}
.ab-def dd+dt{margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1)}
.ab-def .not{color:rgba(255,255,255,.55); text-decoration:line-through; text-decoration-color:rgba(255,176,32,.7); text-decoration-thickness:2px; margin-right:8px}
.ab-def .yes{color:#fff; font-weight:720}

.ab-chips{margin-top:34px; display:flex; flex-wrap:wrap; gap:8px}
.ab-chips li{font-size:12px; font-weight:560; color:rgba(255,255,255,.70);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.045); border-radius:9px; padding:6px 11px}
.ab-chips li b{color:#fff; font-weight:680; margin-right:5px; font-family:var(--mono); font-size:11px; letter-spacing:.04em}

/* ══ 섹션 공통 ═══════════════════════════════════════════════ */
.ab-sec{padding:clamp(56px,7vw,92px) 0; border-top:1px solid var(--sj-line-2)}
.ab-sec:first-of-type{border-top:0}
.ab-sec-h{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(20px,4vw,56px); margin-bottom:clamp(28px,4vw,44px); align-items:start}
.ab-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:660; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sj-blue);
}
.ab-eyebrow::before{content:""; width:18px; height:2px; background:var(--sj-blue); border-radius:2px}
.ab-sec-h h2{margin-top:12px; font-size:clamp(24px,2.6vw,34px); font-weight:740; letter-spacing:-.035em; line-height:1.22}
.ab-sec-h .ab-lead{font-size:16.5px; line-height:1.7; color:var(--sj-fg-2); font-weight:500; padding-top:clamp(6px,2.4vw,40px)}
.ab-sec-h .ab-lead b{color:var(--sj-fg)}
.ab-quote{
  font-size:clamp(20px,2.2vw,28px); font-weight:640; letter-spacing:-.03em; line-height:1.4; color:var(--sj-fg);
  padding-left:18px; border-left:3px solid var(--sj-amber);
}
.ab-quote small{display:block; margin-top:10px; font-size:13.5px; font-weight:520; color:var(--sj-fg-2); letter-spacing:-.01em}

/* 카드 그리드 */
.ab-grid{display:grid; gap:14px}
.ab-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ab-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ab-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ab-card{
  background:var(--sj-field); border:1px solid transparent; border-radius:18px; padding:22px 22px 24px;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ab-card:hover{background:var(--sj-field-on); border-color:var(--sj-line); box-shadow:var(--sj-shadow); transform:translateY(-1px)}
.ab-card .n{
  display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 9px; border-radius:10px;
  background:var(--sj-blue); color:#fff; font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.04em;
  box-shadow:0 6px 16px -8px rgba(27,100,242,.7);
}
.ab-card .n.amb{background:var(--sj-amber); color:#3a2600; box-shadow:0 6px 16px -8px rgba(255,176,32,.8)}
.ab-card .n.ghost{background:var(--sj-blue-soft); color:var(--sj-blue); box-shadow:none}
.ab-card h3{margin-top:16px; font-size:17.5px; font-weight:700; letter-spacing:-.025em; line-height:1.3}
.ab-card h3 small{display:block; margin-top:4px; font-size:12px; font-weight:580; color:var(--sj-fg-3); letter-spacing:0}
.ab-card p{margin-top:9px; font-size:14px; line-height:1.68; color:var(--sj-fg-2)}
.ab-card p b{color:var(--sj-fg)}
.ab-card ul{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.ab-card ul li{position:relative; padding-left:15px; font-size:13.8px; line-height:1.6; color:var(--sj-fg-2)}
.ab-card ul li::before{content:""; position:absolute; left:2px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--sj-blue); opacity:.7}
.ab-card ul li b{color:var(--sj-fg)}
.ab-card .tag{
  display:inline-block; margin-top:14px; font-size:11.5px; font-weight:640; letter-spacing:.02em;
  color:#8a5a00; background:var(--sj-amber-soft); border-radius:7px; padding:3px 9px;
}
:root[data-theme="dark"] .ab-card .tag{color:var(--sj-amber)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ab-card .tag{color:var(--sj-amber)}}
.ab-card.main{background:var(--sj-blue); color:#fff; border-color:transparent; grid-column:span 2}
.ab-card.main:hover{background:var(--sj-blue-h)}
.ab-card.main .n{background:#fff; color:var(--sj-blue); box-shadow:none}
.ab-card.main h3,.ab-card.main p b,.ab-card.main ul li b{color:#fff}
.ab-card.main h3 small{color:rgba(255,255,255,.62)}
.ab-card.main p,.ab-card.main ul li{color:rgba(255,255,255,.82)}
.ab-card.main ul li::before{background:var(--sj-amber); opacity:1}
.ab-card.main .tag{background:rgba(255,255,255,.16); color:#fff}

/* 문제 → 사람 : 흐름 */
.ab-flow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:relative}
.ab-flow>li{
  position:relative; padding:20px 22px 22px 22px;
  background:var(--sj-field); border:1px solid var(--sj-line-2);
}
.ab-flow>li:first-child{border-radius:18px 0 0 18px}
.ab-flow>li:last-child{border-radius:0 18px 18px 0}
.ab-flow>li+li{border-left:0}
.ab-flow>li::after{
  content:""; position:absolute; right:-9px; top:50%; width:16px; height:16px; z-index:2;
  transform:translateY(-50%) rotate(45deg);
  background:var(--sj-field); border-top:1px solid var(--sj-line-2); border-right:1px solid var(--sj-line-2);
}
.ab-flow>li:last-child::after{display:none}
.ab-flow .k{font-size:11px; font-weight:660; letter-spacing:.10em; text-transform:uppercase; color:var(--sj-fg-3)}
.ab-flow h4{margin-top:8px; font-size:16px; font-weight:700; letter-spacing:-.02em; line-height:1.3}
.ab-flow p{margin-top:8px; font-size:13.5px; line-height:1.62; color:var(--sj-fg-2)}
.ab-flow p b{color:var(--sj-fg)}

/* 금리 비교 */
.ab-rate{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px}
.ab-rate>div{background:var(--sj-field); border-radius:18px; padding:22px}
.ab-rate .lbl{font-size:12.5px; font-weight:620; color:var(--sj-fg-2)}
.ab-rate .val{margin-top:6px; font-size:clamp(30px,3.4vw,42px); font-weight:780; letter-spacing:-.04em; line-height:1.05; font-variant-numeric:tabular-nums}
.ab-rate .val small{font-size:15px; font-weight:600; letter-spacing:0; margin-left:6px; color:var(--sj-fg-2)}
.ab-rate .note{margin-top:8px; font-size:13px; color:var(--sj-fg-2); line-height:1.55}
.ab-rate .hi{background:var(--sj-blue); color:#fff}
.ab-rate .hi .lbl,.ab-rate .hi .note,.ab-rate .hi .val small{color:rgba(255,255,255,.78)}
.ab-rate .hi .val{color:#fff}

/* 크래딧 포인트 순환 */
.ab-loop{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; align-items:stretch}
.ab-loop>li{position:relative; background:var(--sj-field); border-radius:16px; padding:18px 18px 20px; text-align:left}
.ab-loop>li .i{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--sj-blue-soft); color:var(--sj-blue)}
.ab-loop>li .i svg{width:20px; height:20px}
.ab-loop>li h4{margin-top:12px; font-size:15px; font-weight:700; letter-spacing:-.02em}
.ab-loop>li p{margin-top:5px; font-size:13.2px; line-height:1.58; color:var(--sj-fg-2)}
.ab-loop>li::after{
  content:"→"; position:absolute; right:-13px; top:26px; z-index:2; font-size:16px; font-weight:700; color:var(--sj-fg-3);
}
.ab-loop>li:last-child::after{content:"↺"; color:var(--sj-blue)}

/* 대환 매칭 */
.ab-match{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center}
.ab-side{background:var(--sj-field); border-radius:18px; padding:22px}
.ab-side .k{font-size:11px; font-weight:660; letter-spacing:.10em; text-transform:uppercase; color:var(--sj-fg-3)}
.ab-side h4{margin-top:8px; font-size:17px; font-weight:720; letter-spacing:-.025em}
.ab-side p{margin-top:6px; font-size:13.8px; line-height:1.6; color:var(--sj-fg-2)}
.ab-core{
  position:relative; width:clamp(150px,18vw,200px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:radial-gradient(70% 70% at 40% 30%, #2f6bff 0%, #1540c9 70%, #0d2a8a 100%); color:#fff;
  box-shadow:0 22px 44px -18px rgba(27,100,242,.75);
}
.ab-core::before{content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px dashed rgba(27,100,242,.35); animation:abSpin 32s linear infinite}
@keyframes abSpin{to{transform:rotate(360deg)}}
.ab-core b{font-size:15px; font-weight:740; letter-spacing:-.02em; display:block}
.ab-core span{display:block; font-size:11.5px; color:rgba(255,255,255,.75); margin-top:4px; line-height:1.4; padding:0 14px}
.ab-match-rules{margin-top:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.ab-match-rules li{background:var(--sj-field); border-radius:14px; padding:14px 16px; font-size:13.5px; line-height:1.55; color:var(--sj-fg-2)}
.ab-match-rules li b{display:block; color:var(--sj-fg); font-weight:680; margin-bottom:3px}

/* 수익 분배 */
.ab-share{display:grid; grid-template-columns:1fr; gap:12px}
.ab-share .row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.ab-share .row>div{background:var(--sj-field); border-radius:14px; padding:16px 18px; font-size:14px; font-weight:640; text-align:center}
.ab-share .row>div small{display:block; font-size:12px; font-weight:520; color:var(--sj-fg-2); margin-top:2px}
.ab-share .from{
  background:var(--sj-blue); color:#fff; border-radius:14px; padding:16px 18px; text-align:center; font-weight:680; font-size:14.5px;
}
.ab-share .from small{display:block; font-size:12px; font-weight:520; color:rgba(255,255,255,.75); margin-top:2px}
.ab-share .arr{text-align:center; color:var(--sj-fg-3); font-size:18px; line-height:1}

/* 체크리스트 (KYC) */
.ab-kyc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.ab-kyc li{display:flex; gap:12px; align-items:flex-start; background:var(--sj-field); border-radius:14px; padding:16px 18px}
.ab-kyc .m{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:13px; font-weight:800}
.ab-kyc .m.no{background:rgba(224,57,44,.10); color:#c72f24}
.ab-kyc .m.ok{background:rgba(26,138,69,.12); color:#1a8a45}
.ab-kyc .m.must{background:var(--sj-amber-soft); color:#8a5a00}
:root[data-theme="dark"] .ab-kyc .m.no{color:#ff7a70}
:root[data-theme="dark"] .ab-kyc .m.ok{color:#40c463}
:root[data-theme="dark"] .ab-kyc .m.must{color:var(--sj-amber)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ab-kyc .m.no{color:#ff7a70}
  :root:not([data-theme="light"]) .ab-kyc .m.ok{color:#40c463}
  :root:not([data-theme="light"]) .ab-kyc .m.must{color:var(--sj-amber)}}
.ab-kyc b{display:block; font-size:14.5px; font-weight:680; letter-spacing:-.02em}
.ab-kyc p{font-size:13.2px; color:var(--sj-fg-2); line-height:1.55; margin-top:2px}

/* ══ 온톨로지 맵 ═════════════════════════════════════════════ */
.ab-onto{
  position:relative; overflow:hidden; border-radius:24px; color:#fff;
  padding:clamp(24px,3.4vw,40px);
  background:
    radial-gradient(115% 85% at 10% 6%, #1e4fd8 0%, rgba(30,79,216,0) 58%),
    radial-gradient(95% 85% at 92% 96%, #0d2a8a 0%, rgba(13,42,138,0) 62%),
    linear-gradient(158deg,#0a1f5c 0%,#0b1638 54%,#070d20 100%);
}
.ab-onto::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(90% 80% at 50% 40%,#000 0%,transparent 80%);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 40%,#000 0%,transparent 80%);
}
.ab-onto>*{position:relative; z-index:1}
.ab-layer{display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:stretch; padding:16px 0}
.ab-layer+.ab-layer{border-top:1px solid rgba(255,255,255,.1)}
.ab-layer .lk{font-size:10.5px; font-weight:660; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45)}
.ab-layer .lt{margin-top:4px; font-size:15px; font-weight:720; letter-spacing:-.02em; color:#fff; line-height:1.3}
.ab-layer .ld{margin-top:5px; font-size:12px; color:rgba(255,255,255,.55); line-height:1.5}
.ab-nodes{display:flex; flex-wrap:wrap; gap:8px; align-content:center}
.ab-node{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); border-radius:11px; padding:9px 13px; line-height:1.3;
}
.ab-node i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); flex:none}
.ab-node.p{border-color:rgba(255,176,32,.55); background:rgba(255,176,32,.12)}
.ab-node.p i{background:var(--sj-amber); box-shadow:0 0 0 3px rgba(255,176,32,.22)}
.ab-node.b{border-color:rgba(59,130,246,.6); background:rgba(59,130,246,.18)}
.ab-node.b i{background:#7fb0ff}
.ab-node small{font-size:10.5px; letter-spacing:.02em; color:rgba(255,255,255,.5); font-weight:600}
.ab-edge{
  display:inline-flex; align-items:center; font-size:12px; color:rgba(255,255,255,.55); padding:0 4px; font-weight:560; align-self:center;
}
.ab-onto-foot{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:14px 22px; font-size:12px; color:rgba(255,255,255,.6)}
.ab-onto-foot span{display:inline-flex; align-items:center; gap:7px}
.ab-onto-foot i{width:10px; height:10px; border-radius:3px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06)}
.ab-onto-foot i.p{border-color:rgba(255,176,32,.7); background:rgba(255,176,32,.2)}
.ab-onto-foot i.b{border-color:rgba(59,130,246,.7); background:rgba(59,130,246,.25)}

/* 관계 표 */
.ab-rel{margin-top:14px; width:100%; border-collapse:separate; border-spacing:0; font-size:13.8px; overflow:hidden; border-radius:16px; border:1px solid var(--sj-line)}
.ab-rel th,.ab-rel td{text-align:left; padding:12px 16px; vertical-align:top; border-top:1px solid var(--sj-line-2)}
.ab-rel thead th{background:var(--sj-field); border-top:0; font-size:11.5px; font-weight:660; letter-spacing:.08em; text-transform:uppercase; color:var(--sj-fg-3)}
.ab-rel td:first-child{font-weight:680; color:var(--sj-fg); white-space:nowrap}
.ab-rel td .r{display:inline-block; font-size:11.5px; font-weight:640; color:var(--sj-blue); background:var(--sj-blue-soft); border-radius:6px; padding:2px 7px; letter-spacing:.02em}
.ab-rel td{color:var(--sj-fg-2)}
.ab-rel td b{color:var(--sj-fg)}
.ab-tablewrap{overflow-x:auto}

/* ══ 마무리 · 푸터 ═══════════════════════════════════════════ */
.ab-cta{
  border-radius:24px; padding:clamp(28px,4vw,44px); display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
  background:var(--sj-field); border:1px solid var(--sj-line-2);
}
.ab-cta h2{font-size:clamp(20px,2.2vw,26px); font-weight:740; letter-spacing:-.03em; line-height:1.3}
.ab-cta p{margin-top:8px; font-size:14px; color:var(--sj-fg-2)}
.ab-cta .ab-login{margin:0; height:48px; padding:0 20px; font-size:14.5px; border-radius:13px}

.ab-foot{padding:34px 0 48px; border-top:1px solid var(--sj-line); margin-top:clamp(40px,6vw,72px)}
.ab-foot p{font-size:11.5px; line-height:1.6; color:var(--sj-fg-3); font-weight:500}
.ab-foot p+p{margin-top:6px}
.ab-foot b{color:var(--sj-fg-2); font-weight:620; letter-spacing:.06em}
.ab-foot a{color:var(--sj-fg-2); text-decoration:underline; text-underline-offset:2px}

/* ══ 반응형 ════════════════════════════════════════════════ */
@media (max-width:980px){
  .ab-hero-in{grid-template-columns:1fr}
  .ab-sec-h{grid-template-columns:1fr}
  .ab-sec-h .ab-lead{padding-top:0}
  .ab-grid.c3,.ab-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-flow>li{border-left:1px solid var(--sj-line-2)!important; border-radius:0}
  .ab-flow>li:nth-child(2n)::after{display:none}
  .ab-flow>li:first-child{border-radius:18px 0 0 0}
  .ab-flow>li:nth-child(2){border-radius:0 18px 0 0}
  .ab-flow>li:nth-child(3){border-radius:0 0 0 18px}
  .ab-flow>li:last-child{border-radius:0 0 18px 0}
  .ab-loop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-loop>li:nth-child(2n)::after{display:none}
  .ab-layer{grid-template-columns:1fr; gap:10px}
}
@media (max-width:640px){
  .ab-hero{padding-top:110px}
  .ab-grid.c2,.ab-grid.c3,.ab-grid.c4{grid-template-columns:1fr}
  .ab-card.main{grid-column:auto}
  .ab-flow{grid-template-columns:1fr}
  .ab-flow>li{border-radius:0!important}
  .ab-flow>li:first-child{border-radius:18px 18px 0 0!important}
  .ab-flow>li:last-child{border-radius:0 0 18px 18px!important}
  .ab-flow>li::after{display:none}
  .ab-rate{grid-template-columns:1fr}
  .ab-loop{grid-template-columns:1fr}
  .ab-loop>li::after{display:none}
  .ab-match{grid-template-columns:1fr}
  .ab-core{margin:0 auto}
  .ab-match-rules{grid-template-columns:1fr}
  .ab-share .row{grid-template-columns:1fr}
  .ab-kyc{grid-template-columns:1fr}
  .ab-cta{grid-template-columns:1fr}
  .ab-chips{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ab-glow,.ab-core::before{animation:none!important}
  .ab-word,.ab-lang,.ab-card{transition:none!important}
  .ab-word.out,.ab-word.in{opacity:1; transform:none}
  .ab-lang.out{opacity:1}
  html{scroll-behavior:auto}
}

/* ══ v2 (사업 구성 v1 반영) — 통계 타일 · Phase 블록 · 단계 · 마진 식 · 각주 ══ */
.ab-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:6px}
.ab-stats li{background:var(--sj-field); border-radius:18px; padding:20px 20px 18px}
.ab-stats li b{display:block; font-size:clamp(26px,2.6vw,34px); font-weight:780; letter-spacing:-.04em; line-height:1.05; font-variant-numeric:tabular-nums}
.ab-stats li b em{font-style:normal; font-size:.6em; font-weight:700; margin-left:2px; color:var(--sj-fg-2)}
.ab-stats li span{display:block; margin-top:8px; font-size:13px; font-weight:620; color:var(--sj-fg)}
.ab-stats li small{display:block; margin-top:3px; font-size:11.5px; color:var(--sj-fg-3)}
.ab-stats li.hi{background:var(--sj-blue); color:#fff}
.ab-stats li.hi b em,.ab-stats li.hi span{color:#fff}
.ab-stats li.hi small{color:rgba(255,255,255,.75)}

.ab-note{margin-top:10px; font-size:12.8px; color:var(--sj-fg-3); line-height:1.6}
.ab-lead b{color:var(--sj-fg)}

.ab-phase{border:1px solid var(--sj-line); border-radius:18px; overflow:hidden}
.ab-phase-row{display:grid; grid-template-columns:200px minmax(0,1fr); gap:14px; padding:14px 18px; align-items:center}
.ab-phase-row+.ab-phase-row{border-top:1px solid var(--sj-line-2)}
.ab-phase-k b{display:block; font-size:14.5px; font-weight:740; letter-spacing:-.02em}
.ab-phase-k span{display:block; font-size:12px; color:var(--sj-fg-3); margin-top:2px}
.ab-phase-v{display:flex; flex-wrap:wrap; gap:7px}
.ab-pill{display:inline-flex; align-items:center; gap:6px; font-size:12.8px; font-weight:600; color:var(--sj-fg); background:var(--sj-field); border:1px solid transparent; border-radius:9px; padding:6px 11px}
.ab-pill small{font-size:10.5px; font-weight:640; color:var(--sj-fg-3)}
.ab-pill.p{background:var(--sj-amber-soft); border-color:rgba(255,176,32,.5)}
.ab-pill.b{background:var(--sj-blue-soft); color:var(--sj-blue)}

.ab-steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; counter-reset:st}
.ab-steps li{counter-increment:st; position:relative; background:var(--sj-field); border-radius:12px; padding:12px 12px 12px 38px; font-size:13px; font-weight:600; line-height:1.4; min-height:48px; display:flex; align-items:center}
.ab-steps li::before{content:counter(st); position:absolute; left:10px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:6px; background:var(--sj-blue); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center}

.ab-eq{margin-top:22px; background:var(--sj-field); border-radius:18px; padding:20px 22px}
.ab-eq pre{margin:0; font-family:var(--sans); font-variant-numeric:tabular-nums; font-size:13.5px; font-weight:560; line-height:1.75; white-space:pre; overflow-x:auto; color:var(--sj-fg)}
.ab-eq .ab-note{margin-top:14px; color:var(--sj-fg-2)}
.ab-cta p a{color:var(--sj-blue); text-decoration:underline; text-underline-offset:2px}

@media (max-width:980px){
  .ab-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-phase-row{grid-template-columns:1fr; gap:8px}
}
@media (max-width:640px){
  .ab-stats{grid-template-columns:1fr}
  .ab-steps{grid-template-columns:1fr}
}