:root{
  --bg:#ffffff;--surface:#f6f5f4;--fg:#31302e;--sub:#615d59;--line:#dddddd;--accent:#2B4AC6;--accent-tint:#F1F5FF;--on-accent:#ffffff;
  --warn-bg:#fff6dc;--warn-fg:#6b4a00;--bad:#a02222;
  --seg-perf:#2B4AC6;--seg-cost:#6588E8;--seg-safety:#a39e98;
  --r:8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171c;--surface:#1e2128;--fg:#ececf0;--sub:#a3a3ad;--line:#343844;--accent:#96B3FE;--accent-tint:#1d2747;--on-accent:#15171c;
    --warn-bg:#3a3118;--warn-fg:#f2c35c;--bad:#ff9b9b;--seg-perf:#96B3FE;--seg-cost:#5f7fd0;--seg-safety:#7a7a84;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15171c;--surface:#1e2128;--fg:#ececf0;--sub:#a3a3ad;--line:#343844;--accent:#96B3FE;--accent-tint:#1d2747;--on-accent:#15171c;
  --warn-bg:#3a3118;--warn-fg:#f2c35c;--bad:#ff9b9b;--seg-perf:#96B3FE;--seg-cost:#5f7fd0;--seg-safety:#7a7a84;color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);word-break:keep-all;overflow-wrap:break-word;font:400 16px/1.6 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);overflow-x:hidden}
b,strong,h1,h2,h3{font-weight:700}
h1,h2,h3,p{margin:0}
a{color:var(--accent)}
button,input{font:inherit;color:inherit}
.sub{color:var(--sub)}
.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{max-width:1040px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{font-size:20px;font-weight:700;color:var(--fg);text-decoration:none;min-height:44px;display:flex;align-items:center;gap:8px}
.brand::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--accent)}
.nav .btn{background:none;border-color:transparent;color:var(--sub);padding:0 10px}
@media (hover:hover){.nav .btn:hover{color:var(--accent);border-color:transparent}}
.nav .btn[aria-current="page"]{color:var(--accent);font-weight:700;border-bottom:3px solid var(--accent);border-radius:var(--r) var(--r) 0 0}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0}
.how div{border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:2px;font-size:16px;color:var(--sub);line-height:1.4}
.how b{font-size:16px;color:var(--fg)}
.how i{font-style:normal;font-weight:700;color:var(--accent);font-size:16px}
.card-h b::first-letter{color:var(--accent)}
.nav{display:flex;gap:6px}
.btn{min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:var(--r);cursor:pointer}
@media (hover:hover){.btn:hover{border-color:var(--accent)}}
.btn.pri{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.field:focus-visible,summary:focus-visible,.chip:focus-visible,.li:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:16px 16px 120px}
.view{display:flex;flex-direction:column;gap:14px}
.view[hidden],[hidden]{display:none!important}
#home{display:flex;flex-direction:column;gap:14px}
.title{font-size:24px;line-height:1.35}
.h2{font-size:20px}
.box{background:var(--surface);border-radius:var(--r);padding:10px 12px;font-size:16px}
.warn{background:var(--warn-bg);color:var(--warn-fg);border-radius:var(--r);padding:10px 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);cursor:pointer}
@media (hover:hover){.chip:hover{border-color:var(--accent);color:var(--accent)}}
.recent{display:flex;flex-direction:column;gap:4px}
.field{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.list{display:flex;flex-direction:column}
.li{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px;padding:6px 2px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;text-align:left;width:100%}
@media (hover:hover){.li:hover{color:var(--accent)}}
.ask{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:8px 0 calc(8px + env(safe-area-inset-bottom,0));z-index:6}
.ask-in{max-width:1040px;margin:0 auto;padding:0 16px;display:flex;gap:8px;align-items:center}
.ask .field{flex:1;min-width:0}
.count{font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.count.over{color:var(--bad)}
.foot{margin-top:28px;display:flex;flex-direction:column;gap:6px;font-size:15px}

/* 대화 */
#thread{display:flex;flex-direction:column;gap:12px}
.me{align-self:flex-end;background:var(--fg);color:var(--bg);padding:8px 12px;border-radius:12px 12px 2px 12px;max-width:85%;overflow-wrap:anywhere}
.steps{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.steps-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.steps-h{font-size:16px}
.who{font-size:16px;color:var(--accent);font-weight:700}
.via{font-size:16px}
.step{display:flex;gap:10px}
.dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none;margin-top:4px}
.step.now .dot{border-color:var(--accent);animation:pulse 1s ease-in-out infinite}
.step.done .dot{border-color:var(--accent);background:var(--accent)}
.step.passed .dot{border-color:var(--accent);background:var(--accent-tint)}
.step.passed{color:var(--sub)}
.step.now>.step-b>div:first-child{font-weight:700}
/* 흐름 띠: 뭐사지 → n8n → Nod */
.pipe{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:center;gap:0;margin:2px 0 4px}
.pn{border:1px solid var(--line);border-radius:var(--r);padding:8px 6px;text-align:center;background:var(--bg);display:flex;flex-direction:column;line-height:1.3;min-width:0}
.pn b{font-size:16px}.pn small{font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl{height:2px;background:var(--line);display:block;position:relative;overflow:hidden}
.pl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 30%,var(--accent) 30% 70%,transparent 70%);background-size:200% 100%;opacity:0}
.pipe.s-queued [data-n="app"],.pipe.s-running [data-n="app"],.pipe.s-running [data-n="n8n"],.pipe.s-done .pn,.pipe.s-cached .pn{border-color:var(--accent)}
.pipe.s-queued [data-n="n8n"],.pipe.s-running [data-n="nod"]{border-color:var(--accent);background:var(--accent-tint);animation:pulse 1s ease-in-out infinite}
.pipe.s-queued [data-n="n8n"] b,.pipe.s-running [data-n="nod"] b,.pipe.s-done [data-n="nod"] b,.pipe.s-cached [data-n="nod"] b{color:var(--accent)}
.pipe.s-queued [data-l="1"]::after,.pipe.s-running [data-l="2"]::after{opacity:1;animation:flow .9s linear infinite}
.pipe.s-running [data-l="1"],.pipe.s-done .pl,.pipe.s-cached .pl{background:var(--accent)}
.pipe.s-done [data-n="nod"],.pipe.s-cached [data-n="nod"]{background:var(--accent-tint)}
.pipe.s-fallback [data-n="nod"]{border-style:dashed;color:var(--sub)}
.pipe.s-fallback [data-n="app"]{border-color:var(--accent)}
@keyframes flow{from{background-position:100% 0}to{background-position:-100% 0}}
.step-b{min-width:0;flex:1}
.step small{display:block;color:var(--sub);font-size:16px;overflow-wrap:anywhere}
@keyframes pulse{50%{box-shadow:0 0 0 4px var(--accent-tint)}}
.anim{margin-top:6px}
.reel{height:28px;overflow:hidden;border-radius:var(--r);background:var(--bg);padding:2px 10px;font-size:16px;line-height:24px;white-space:nowrap;text-overflow:ellipsis}
.reel.landed{background:var(--accent-tint);color:var(--accent);font-weight:700}
.grid{display:grid;gap:2px;font-size:13px;line-height:1.3}
.grid span{background:var(--bg);min-height:20px;padding:1px 2px;text-align:center;overflow:hidden;white-space:nowrap;color:var(--sub)}
.grid span.f{color:var(--fg);background:var(--accent-tint)}
.bars{display:flex;flex-direction:column;gap:6px}
.bar-row{display:grid;grid-template-columns:6.5em 1fr 3.4em;gap:6px;align-items:center;font-size:16px}
.bar-t{display:flex;height:12px;background:var(--bg);border-radius:4px;overflow:hidden}
.bar-t i{display:block;height:100%;width:0;transition:width .7s ease}
.bar-row b{text-align:right;font-variant-numeric:tabular-nums}
.bar-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.summary{display:none;gap:8px;flex-direction:column}
.finished.steps{display:none}
.finished.steps.open{display:flex}
.summary.show{display:flex}
.answer{display:flex;flex-direction:column;gap:12px}
.bases{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bases .lbl{font-size:16px;color:var(--sub)}
.bases .btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:700;background:var(--accent-tint)}
.explain{display:flex;flex-direction:column;gap:8px;cursor:pointer}
.explain ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.explain .skel{color:var(--sub)}
.cards{display:flex;flex-direction:column;gap:8px}
.card{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.card.bad{background:var(--surface)}
.card-h{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.card-h b{overflow-wrap:anywhere}
.score{font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.score small{font-weight:400;font-size:16px;color:var(--sub)}
.seg{display:flex;height:10px;border-radius:4px;overflow:hidden;background:var(--surface)}
.seg i{display:block;height:100%}
.parts{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:16px;color:var(--sub)}
.parts em{font-style:normal;display:inline-flex;align-items:center;gap:4px}
.parts em::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--c)}
.kv{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:16px;color:var(--sub)}
.kv span{overflow-wrap:anywhere}
.flag{color:var(--bad);font-size:16px}
.more{width:100%}
details.calc{border-radius:var(--r);background:var(--surface);padding:10px 12px}
details.calc summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
details.calc summary::-webkit-details-marker{display:none}
details.calc summary::before{content:"";width:0;height:0;border-left:7px solid var(--sub);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
details.calc[open] summary::before{transform:rotate(90deg)}
.tbl{overflow-x:auto;margin-top:8px}
.tbl table{border-collapse:collapse;font-size:16px;min-width:100%}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:4px 8px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl th:first-child,.tbl td:first-child{text-align:left;position:sticky;left:0;background:var(--surface)}
.tbl th{font-weight:700;vertical-align:bottom}
.notice{font-size:16px}
.src{font-size:16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.src a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--accent);border-radius:var(--r);text-decoration:none;font-weight:700}
.weights{font-size:16px;color:var(--sub)}
.others{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.others .lbl{font-size:16px;color:var(--sub)}
.errbox{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hidden-x{display:none}

@media (min-width:900px){
  #thread{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:20px;row-gap:12px;align-items:start}
  #thread>.me{grid-column:1}
  #thread>.steps,#thread>.summary{grid-column:2;grid-row:1 / span 30;position:sticky;top:76px}
  #thread>.answer,#thread>.errbox,#thread>.box,#thread>.chips,#thread>.nonebox{grid-column:1}
  .finished.steps{display:flex}
  .summary,.summary.show{display:none}
  .title{font-size:28px}
  #home{max-width:640px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}