:root{
  --bg:#0b0e14; --panel:#121724; --ink:#ECECEC; --muted:#8B93A7; --line:#2A3346;
  --blue:#58C4DD; --teal:#5CD0B3; --gold:#F0AC5F; --green:#83C167; --red:#FC6255;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:radial-gradient(130% 80% at 50% -10%,#141a2a,#0b0e14 55%);color:var(--ink);
  font-family:Pretendard,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}

.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

/* 히어로 */
.hero{padding:clamp(64px,12vw,130px) 0 clamp(40px,7vw,72px)}
.hero .kick{font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hero h1{font-size:clamp(34px,6vw,58px);font-weight:900;letter-spacing:-.025em;line-height:1.05;margin-top:16px}
.hero p{font-size:clamp(16px,2.2vw,19px);color:var(--muted);margin-top:20px;max-width:54ch}
.hero .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero .meta span{font-size:12.5px;font-weight:700;color:var(--blue);border:1px solid #25435a;
  background:rgba(88,196,221,.08);border-radius:20px;padding:5px 13px}

/* 자동화 섹션 */
.auto{padding:clamp(40px,7vw,72px) 0;border-top:1px solid var(--line)}
.auto .head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.auto .ak{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.auto h2{font-size:clamp(24px,3.6vw,32px);font-weight:800;letter-spacing:-.02em}
.auto .desc{color:var(--muted);margin-top:12px;max-width:60ch;font-size:16px}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.chips span{font-size:12px;font-weight:700;color:var(--teal);background:rgba(92,208,179,.08);
  border:1px solid #265049;border-radius:20px;padding:3px 11px}

/* 흐름 SVG */
.flow{margin:26px 0 0;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:14px 10px;overflow:hidden}
.flow svg{width:100%;height:auto;display:block;overflow:visible}
.pop{opacity:0;transform:scale(.55);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.pop.on{opacity:1;transform:scale(1)}
.fade{opacity:0;transition:opacity .6s ease}.fade.on{opacity:1}
.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset .65s cubic-bezier(.4,0,.2,1)}
.draw.on{stroke-dashoffset:0}
.nlabel{font:700 17px Pretendard;fill:var(--ink);text-anchor:middle}
.nsub{font:500 12.5px Pretendard;fill:var(--muted);text-anchor:middle}
.pulse{fill:#fff}

/* 프롬프트 박스 */
.run{margin:22px 0 0;background:#0e1320;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.run .rh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line)}
.run .rl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.run .rl::before{content:"❯ ";color:var(--gold)}
.run .copy{font:600 12px Pretendard;color:var(--muted);background:#161c2b;border:1px solid var(--line);
  border-radius:7px;padding:5px 12px;cursor:pointer;transition:.15s}
.run .copy:hover{color:var(--blue);border-color:var(--blue)}
.run .copy.done{color:#0b0e14;background:var(--blue);border-color:var(--blue)}
.run pre{margin:0;padding:15px 17px;font:13.5px/1.7 ui-monospace,"D2Coding",monospace;color:#C7CEDC;
  white-space:pre-wrap}

footer{border-top:1px solid var(--line);padding:40px 0 70px;color:var(--muted);font-size:13.5px;text-align:center}
footer a{color:var(--blue);text-decoration:none}

/* ── 인덱스 카드 ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:30px}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 24px 20px;
  text-decoration:none;color:inherit;transition:.16s}
.card:hover{border-color:var(--blue);transform:translateY(-3px)}
.card .ce{font-size:30px}
.card .ck{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:12px}
.card h3{font-size:21px;font-weight:800;letter-spacing:-.015em;margin-top:6px}
.card p{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.6}
.card .more{margin-top:16px;font-size:13px;font-weight:700;color:var(--blue)}

/* ── 상세페이지 ── */
.nav{position:sticky;top:0;z-index:10;background:rgba(11,14,20,.82);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;padding:14px 24px}
.nav a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600}
.nav a.home::before{content:"← ";color:var(--blue)}
.nav .badge{font-size:12px;font-weight:700;color:var(--blue)}

.dhero{padding:clamp(40px,7vw,72px) 0 8px}
.dhero .e{font-size:40px}
.dhero .ck{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:10px}
.dhero h1{font-size:clamp(30px,5vw,46px);font-weight:900;letter-spacing:-.025em;margin-top:8px}
.dhero p{font-size:clamp(16px,2.2vw,19px);color:var(--muted);margin-top:16px;max-width:60ch}

.sec{padding:clamp(32px,5vw,52px) 0;border-top:1px solid var(--line)}
.sec h2{font-size:clamp(21px,3vw,27px);font-weight:800;letter-spacing:-.02em}
.sec h2 .n{color:var(--blue);font-variant-numeric:tabular-nums;margin-right:10px}
.sec .lead{color:var(--muted);margin-top:12px;max-width:64ch;font-size:16px}

/* 에이전트 구성 4분면 */
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:24px}
.part{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.part .pt{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.part h4{font-size:17px;font-weight:800;margin-top:8px}
.part p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6}
.part.brain .pt{color:var(--blue)} .part.tool .pt{color:var(--teal)}
.part.mem .pt{color:var(--gold)} .part.harness .pt{color:var(--green)}

/* 셋업 단계 */
.setup{margin-top:24px;counter-reset:su}
.setup .step{position:relative;padding:18px 0 18px 52px;border-top:1px solid var(--line);counter-increment:su}
.setup .step:first-child{border-top:0}
.setup .step::before{content:counter(su);position:absolute;left:0;top:16px;width:30px;height:30px;border-radius:50%;
  background:rgba(88,196,221,.12);border:1px solid var(--blue);color:var(--blue);font-weight:800;display:grid;place-items:center;font-size:14px}
.setup .step h4{font-size:16.5px;font-weight:800}
.setup .step p{font-size:14.5px;color:#C7CEDC;margin-top:6px;line-height:1.65}
.setup .step code{font-family:ui-monospace,"D2Coding",monospace;font-size:13px;background:#0e1320;border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;color:var(--teal)}
.note{margin-top:18px;border-left:3px solid var(--gold);background:rgba(240,172,95,.06);padding:12px 16px;border-radius:0 8px 8px 0;
  font-size:14px;color:#C7CEDC}
.note b{color:var(--gold)}

/* 실행 영역 */
.runbox{margin-top:24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px}
.runbtn{font:800 16px Pretendard;color:#0b0e14;background:var(--blue);border:0;border-radius:10px;padding:13px 26px;cursor:pointer;transition:.15s}
.runbtn:hover{filter:brightness(1.08)} .runbtn:disabled{opacity:.5;cursor:default}
.runlog{margin-top:18px;font:13.5px/1.9 ui-monospace,"D2Coding",monospace;color:#8B93A7;min-height:1.9em}
.runlog .ok{color:var(--green)} .runlog .run{color:var(--blue)}
.runout{margin-top:16px;display:none}
.runout.on{display:block}
.runout a{color:var(--blue);text-decoration:none;font-weight:700}