:root{
  --bg:#f6f8fb; --card:#ffffff; --ink:#0f172a; --sub:#64748b;
  --line:#e6ebf2; --brand:#10b981; --brand-d:#059669; --brand-soft:#ecfdf5;
  --accent:#6366f1; --rose:#f43f5e; --amber:#f59e0b;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased; position:relative; min-height:100vh;
}
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:42px 42px; opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 22px;position:relative;z-index:1}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(246,248,251,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{font-size:24px;width:42px;height:42px;display:grid;place-items:center;background:var(--brand-soft);border-radius:12px}
.brand-text{display:flex;flex-direction:column}
.brand-text strong{font-size:15px;font-weight:800;letter-spacing:-.2px}
.brand-text span{font-size:12px;color:var(--sub)}
.demo-badge{font-size:12px;font-weight:700;color:var(--brand-d);background:var(--brand-soft);border:1px solid #b7f0d8;padding:6px 12px;border-radius:999px}

/* hero */
.hero{padding:54px 0 26px;text-align:center;max-width:760px;margin:0 auto}
.hero h1{font-size:clamp(28px,4.4vw,42px);font-weight:800;letter-spacing:-1px;line-height:1.18}
.hero .hl{color:var(--brand-d);background:linear-gradient(180deg,transparent 62%,#c7f5e2 62%)}
.hero .lead{margin-top:16px;color:var(--sub);font-size:16px}
.hero .lead strong{color:var(--ink)}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 34px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.kpi .num{font-size:26px;font-weight:800;letter-spacing:-.5px}
.kpi .num small{font-size:14px;font-weight:700;color:var(--sub);margin-left:2px}
.kpi .lab{font-size:12.5px;color:var(--sub);margin-top:4px}
.kpi.green .num{color:var(--brand-d)}

/* grid */
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* flow */
.flow-panel{padding:22px}
.steps-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.steps-head h2{font-size:17px;font-weight:800}
.step-dots{display:flex;gap:7px}
.step-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);transition:.3s}
.step-dots i.on{background:var(--brand);transform:scale(1.15)}
.step-card{border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;transition:.35s;background:#fff}
.step-card:last-child{margin-bottom:0}
.step-card.locked{opacity:.45;filter:grayscale(.4);pointer-events:none}
.step-card.done-card{display:none}
.step-tag{font-size:11.5px;font-weight:800;color:var(--accent);letter-spacing:.4px;margin-bottom:10px;text-transform:uppercase}
.step-tag.ok{color:var(--brand-d)}
.step-desc{font-size:13.5px;color:var(--sub);margin-bottom:14px}
.who{font-size:14px;font-weight:700;background:var(--brand-soft);border-radius:10px;padding:10px 12px;margin-bottom:14px;color:var(--brand-d)}

.field-row{display:flex;gap:12px;margin-bottom:12px}
label{flex:1;display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--sub)}
label.full{flex:1 1 100%}
input,select{font-family:inherit;font-size:14px;color:var(--ink);padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe;transition:.2s}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);background:#fff}
.file-fake{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px dashed #cbd5e1;border-radius:10px;padding:9px 9px 9px 13px;background:#fbfcfe}
.file-fake span{font-size:13px;color:var(--sub)}
.file-fake.has span{color:var(--ink);font-weight:600}
.auto-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;min-height:2px}
.chip{font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;background:#f1f5f9;color:#475569}
.chip b{color:var(--ink)}

.btn{font-family:inherit;font-size:14px;font-weight:700;border:none;border-radius:11px;padding:12px 16px;cursor:pointer;transition:.2s;width:100%}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(16,185,129,.28)}
.btn.primary:hover{background:var(--brand-d);transform:translateY(-1px)}
.btn.ghost{background:#f1f5f9;color:#475569}
.btn.ghost:hover{background:#e6ebf2}
.btn.sm{width:auto;padding:7px 12px;font-size:12.5px}
.hint{font-size:12px;color:var(--sub);margin-top:10px;text-align:center}
.hint b{color:var(--brand-d)}
.err{font-size:12.5px;color:var(--rose);margin-top:10px;text-align:center;font-weight:600}

/* right */
.auto-panel{padding:20px;display:flex;flex-direction:column;gap:22px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.block-head h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.block-sub{font-size:12px;color:var(--sub)}
.live-dot{font-size:10px;font-weight:800;color:var(--brand-d);background:var(--brand-soft);padding:2px 7px;border-radius:999px;position:relative}
.live-dot::before{content:"";display:inline-block;width:6px;height:6px;background:var(--brand);border-radius:50%;margin-right:4px;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.sheet-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table.sheet{width:100%;border-collapse:collapse;font-size:12px;min-width:520px}
table.sheet th{background:#f8fafc;color:#475569;font-weight:700;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.sheet td{padding:9px 10px;border-bottom:1px solid #f1f5f9;color:#334155;white-space:nowrap}
table.sheet tbody tr:last-child td{border-bottom:none}
table.sheet .num{text-align:right;font-variant-numeric:tabular-nums}
.row-new{animation:rowIn .6s ease}
@keyframes rowIn{0%{background:var(--brand-soft)}100%{background:transparent}}
.tag-st{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-d)}
.empty{padding:20px;text-align:center;color:#94a3b8;font-size:13px}

.mails{display:flex;flex-direction:column;gap:10px}
.mail{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px;opacity:.5;transform:translateY(6px);transition:.4s}
.mail.sent{opacity:1;transform:none;border-color:#b7f0d8;background:#fbfffd}
.mail .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;background:#f1f5f9;flex-shrink:0}
.mail.sent .ic{background:var(--brand-soft)}
.mail .mc{flex:1;min-width:0}
.mail .mt{font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px}
.mail .mst{font-size:10.5px;font-weight:800;color:#94a3b8}
.mail.sent .mst{color:var(--brand-d)}
.mail .mb{font-size:12px;color:var(--sub);margin-top:3px;overflow:hidden;text-overflow:ellipsis}

/* settlement */
.settle-panel{padding:22px;margin-top:18px}
.settle-grid{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:start}
.settle-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table.settle{min-width:560px}
table.settle tfoot td{font-weight:800;background:#f8fafc;border-top:2px solid var(--line);color:var(--ink)}
.settle-side{display:flex;flex-direction:column;gap:12px}
.settle-stat{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:14px}
.settle-stat span{font-size:12px;color:var(--sub);display:block}
.settle-stat b{font-size:22px;font-weight:800;letter-spacing:-.5px}

/* footer */
.site-footer{margin:46px 0 60px;text-align:center;color:#94a3b8;font-size:12.5px}
.site-footer .made{margin-top:6px;color:#cbd5e1;font-size:11.5px}

/* toast */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;padding:13px 20px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:60;opacity:0;transition:.35s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .em{color:#6ee7b7}

@media (max-width:880px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
  .settle-grid{grid-template-columns:1fr}
  .field-row{flex-direction:column;gap:12px}
  .grid>.panel{min-width:0}
  .settle-grid>*{min-width:0}
}