/* ============================================================
     MODUPAY — Design System
     Orange brand + green (save) accent · neutral · zero-dep motion
     ============================================================ */
  :root{
    /* brand (orange) — CTA, emphasis, links */
    --primary:#ff5a1f;
    --primary-deep:#d8410d;
    --primary-press:#b8350a;
    --pine:#0b0b0d;           /* near-black — dark section base */
    --accent:#ff7a47;         /* lighter orange — highlight, graph */
    --gold:#ff5a1f;           /* (brand alias) */
    --gold-deep:#d8410d;

    /* save (green) — checkmarks, savings, positive states */
    --save:#0d8a52;
    --save-deep:#0a6f42;
    --save-soft:#e8f6ef;

    /* light surfaces (neutral) */
    --bg:#ffffff;
    --bg-2:#f5f5f7;
    --surface:#ffffff;
    --ink:#1d1d1f;
    --ink-2:#4b4b50;
    --ink-3:#6e6e73;
    --ink-faint:#9a9aa0;
    --line:#e6e6e9;
    --line-2:#d8d8dd;

    /* tints */
    --primary-soft:#fff2ec;
    --primary-soft-2:#ffe1d3;
    --gold-soft:#fff2ec;      /* (brand soft alias) */
    --mint-soft:#e8f6ef;      /* (save soft alias) */

    /* dark surfaces (near-black) */
    --d-bg:#0b0b0d;
    --d-bg-2:#141417;
    --d-surface:#1a1a1e;
    --d-line:rgba(255,255,255,.10);
    --d-line-2:rgba(255,255,255,.16);
    --d-ink:#ffffff;
    --d-ink-2:rgba(255,255,255,.62);
    --d-ink-3:rgba(255,255,255,.42);

    /* effects */
    --shadow-xs:0 1px 2px rgba(0,0,0,.04);
    --shadow:0 2px 6px rgba(0,0,0,.05), 0 14px 34px -16px rgba(0,0,0,.14);
    --shadow-lg:0 4px 10px rgba(0,0,0,.06), 0 34px 70px -28px rgba(0,0,0,.20);
    --shadow-glow:0 18px 40px -14px rgba(255,90,31,.5);
    --shadow-gold:0 14px 34px -14px rgba(255,90,31,.45);

    --r-sm:12px;
    --r:18px;
    --r-lg:26px;
    --r-xl:34px;

    --maxw:1160px;

    /* motion */
    --ease:cubic-bezier(.22,1,.36,1);
    --ease-in:cubic-bezier(.4,0,1,1);
    --d-fast:.18s;
    --d-base:.32s;
    --d-slow:.7s;

    /* type scale */
    --fs-eyebrow:13px;
    --fs-body:16px;
    --fs-lead:clamp(17px,1.4vw,20px);
    --fs-h3:clamp(20px,2.4vw,23px);
    --fs-h2:clamp(30px,4.4vw,52px);
    --fs-h1:clamp(40px,7.2vw,80px);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
  body{
    font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
    background:var(--bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    line-height:1.6;letter-spacing:-.011em;overflow-x:hidden;
    font-variant-numeric:tabular-nums;
  }
  ::selection{background:var(--accent);color:var(--pine)}
  a{color:inherit}
  img,svg{display:block}
  :focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  section{padding:clamp(72px,10vw,124px) 0;position:relative}
  h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-.035em}

  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-eyebrow);font-weight:800;
    color:var(--primary-deep);letter-spacing:.01em;margin-bottom:18px}
  .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--primary);display:inline-block}
  .eyebrow.on-dark{color:var(--accent)}
  .eyebrow.on-dark::before{background:var(--accent)}
  .lead{color:var(--ink-2);font-size:var(--fs-lead);font-weight:500;line-height:1.62}

  /* ===== scroll progress ===== */
  .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    box-shadow:0 0 10px rgba(255,90,31,.6);transition:width .1s linear}

  /* ===== NAV ===== */
  nav{position:sticky;top:0;z-index:100;background:rgba(246,251,248,.72);
    backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
    border-bottom:1px solid transparent;transition:border-color var(--d-base),box-shadow var(--d-base),background var(--d-base)}
  nav.scrolled{border-color:var(--line);box-shadow:0 1px 0 rgba(6,78,59,.03),0 12px 30px -22px rgba(6,78,59,.35)}
  .nav-in{max-width:var(--maxw);margin:0 auto;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.04em}
  .logo .dot{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:900;
    background:linear-gradient(135deg,var(--primary),var(--primary-deep));box-shadow:var(--shadow-glow)}
  .nav-links{display:flex;gap:6px;align-items:center}
  .nav-links a{position:relative;color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:600;
    padding:8px 13px;border-radius:99px;transition:color var(--d-fast),background var(--d-fast)}
  .nav-links a:hover{color:var(--ink);background:var(--primary-soft)}
  .nav-links a.active{color:var(--primary-deep)}
  .nav-links a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--primary)}
  .nav-cta{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;
    font-size:14px;font-weight:700;text-decoration:none;transition:transform var(--d-fast),box-shadow var(--d-fast)}
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(6,20,15,.6)}
  .nav-actions{display:flex;align-items:center;gap:10px}
  .nav-join{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:700;padding:9px 15px;border-radius:99px;
    box-shadow:inset 0 0 0 1px var(--line-2);transition:color var(--d-fast),box-shadow var(--d-fast)}
  .nav-join:hover{color:var(--primary-deep);box-shadow:inset 0 0 0 1px var(--primary)}
  @media(max-width:880px){.nav-links{display:none}.nav-join{display:none}}

  /* ===== BUTTONS ===== */
  .btn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;font-family:inherit;
    font-weight:700;font-size:16px;padding:16px 28px;border-radius:99px;text-decoration:none;
    transition:transform var(--d-fast),box-shadow var(--d-base),background var(--d-fast);will-change:transform}
  .btn svg{width:18px;height:18px;transition:transform var(--d-base)}
  .btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;box-shadow:var(--shadow-glow)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 46px -16px rgba(255,90,31,.7)}
  .btn-primary:active{transform:translateY(0) scale(.985)}
  .btn-primary:hover svg{transform:translateX(4px)}
  .btn-ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-xs)}
  .btn-ghost:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--primary),var(--shadow)}
  .btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;box-shadow:var(--shadow-gold)}

  /* ===== HERO ===== */
  .hero{padding:clamp(64px,9vw,104px) 0 clamp(56px,7vw,88px);text-align:center;overflow:hidden}
  .hero-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;will-change:transform}
  .hero-aura::before{content:"";position:absolute;left:50%;top:-10%;width:760px;height:520px;transform:translateX(-50%);
    background:radial-gradient(closest-side,rgba(255,90,31,.13),transparent 70%)}
  .hero-aura::after{content:"";position:absolute;right:6%;top:30%;width:380px;height:380px;
    background:radial-gradient(closest-side,rgba(255,90,31,.08),transparent 70%)}
  .hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--ink-2);
    background:var(--surface);padding:8px 15px 8px 11px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-xs)}
  .hero-badge .lv{width:8px;height:8px;border-radius:50%;background:var(--primary);position:relative}
  .hero-badge .lv::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--primary);animation:pulse 1.9s infinite}
  .hero h1{font-size:var(--fs-h1);font-weight:900;letter-spacing:-.045em;margin-top:24px}
  .hero h1 .accent{position:relative;color:var(--primary);white-space:nowrap}
  .hero h1 .accent.gold{color:var(--gold-deep)}
  .hero h1 .underline{position:relative}
  .hero h1 .underline::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;border-radius:99px;
    background:linear-gradient(90deg,var(--accent),var(--primary));opacity:.32;z-index:-1;transform:scaleX(0);transform-origin:left;
    animation:swipe 1s var(--ease) .55s forwards}
  .hero .lead{max-width:600px;margin:24px auto 0}
  .hero-cta{display:flex;gap:13px;justify-content:center;margin-top:36px;flex-wrap:wrap}
  .trust-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:26px;color:var(--ink-3);font-size:13.5px;font-weight:600}
  .trust-row span{display:inline-flex;align-items:center;gap:6px}
  .trust-row svg{width:15px;height:15px;stroke:var(--save);stroke-width:2.4;fill:none}

  /* hero proof card */
  .hero-proof{max-width:560px;margin:54px auto 0;background:var(--surface);border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);overflow:hidden;text-align:left;position:relative}
  .hero-proof::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--save),#2fd27a)}
  .hp-top{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--line)}
  .hp-top .t{display:flex;align-items:center;gap:11px;font-weight:800;font-size:15px}
  .hp-top .bankico{width:34px;height:34px;border-radius:10px;background:var(--save-soft);display:flex;align-items:center;justify-content:center}
  .hp-top .bankico svg{width:19px;height:19px;stroke:var(--save-deep);stroke-width:2;fill:none}
  .hp-top .when{font-size:12.5px;font-weight:700;color:var(--save-deep);background:var(--save-soft);padding:5px 11px;border-radius:99px}
  .hp-body{padding:18px 24px 22px}
  .hp-amt{font-size:clamp(30px,5vw,40px);font-weight:900;letter-spacing:-.04em;color:var(--ink)}
  .hp-amt .u{font-size:.5em;color:var(--ink-3);font-weight:700;margin-left:3px}
  .hp-sub{display:flex;align-items:center;gap:7px;color:var(--ink-3);font-size:13.5px;font-weight:600;margin-top:4px}
  .hp-check{width:18px;height:18px;border-radius:50%;background:var(--save);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .hp-check svg{width:11px;height:11px;stroke:#fff;stroke-width:3;fill:none}
  .hp-flow{display:flex;align-items:center;gap:0;margin-top:18px;background:var(--bg);border-radius:var(--r-sm);padding:14px 16px}
  .hp-step{flex:1;text-align:center}
  .hp-step .k{font-size:11px;font-weight:700;color:var(--ink-faint)}
  .hp-step .v{font-size:13px;font-weight:800;margin-top:2px}
  .hp-step.done .v{color:var(--save-deep)}
  .hp-arrow{flex-shrink:0;color:var(--ink-faint);padding:0 4px}
  .hp-arrow svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}

  /* ===== SECTION HEAD ===== */
  .section-head{max-width:740px;margin:0 auto clamp(40px,5vw,60px);text-align:center}
  .section-head .eyebrow{display:inline-flex}
  .section-head h2{font-size:var(--fs-h2)}
  #tax .section-head h2{word-break:keep-all;text-wrap:balance}
  .section-head .lead{margin-top:16px}
  .center{text-align:center}

  /* ===== GRID / CARDS ===== */
  .grid{display:grid;gap:18px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  @media(max-width:920px){.grid-3{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.grid-3,.grid-2{grid-template-columns:1fr}}

  .card{position:relative;background:var(--surface);border-radius:var(--r-lg);padding:30px;
    box-shadow:var(--shadow);transition:transform var(--d-base),box-shadow var(--d-base);overflow:hidden}
  .card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;transition:box-shadow var(--d-base)}
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
  .card:hover::after{box-shadow:inset 0 0 0 1px var(--primary-soft-2)}
  .card .ico{width:50px;height:50px;border-radius:14px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px;
    transition:transform var(--d-base)}
  .card:hover .ico{transform:scale(1.06) rotate(-3deg)}
  .card .ico svg{width:25px;height:25px;stroke:var(--primary-deep);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .card h3{font-size:var(--fs-h3);margin-bottom:9px}
  .card p{color:var(--ink-2);font-size:15px;line-height:1.62}
  .card .vs{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13px;font-weight:700;color:var(--gold-deep);
    background:var(--gold-soft);padding:6px 12px;border-radius:99px}
  .card .vs::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

  /* ===== COMPARE ===== */
  .compare{background:var(--surface);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
  .ctable{width:100%;border-collapse:collapse;font-size:15px}
  .ctable th,.ctable td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line)}
  .ctable thead th{font-size:13px;font-weight:700;color:var(--ink-3);background:var(--bg)}
  .ctable thead th.us{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-deep))}
  .ctable td:first-child,.ctable th:first-child{font-weight:700;color:var(--ink);width:30%}
  .ctable td.them{color:var(--ink-3)}
  .ctable td.us{background:var(--primary-soft);font-weight:800;color:var(--primary-deep)}
  .ctable tbody tr{transition:background var(--d-fast)}
  .ctable tbody tr:hover td:not(.us){background:var(--bg)}
  .ctable td.us .chk{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
    background:var(--save);margin-right:8px;vertical-align:-3px}
  .ctable td.us .chk svg{width:11px;height:11px;stroke:#fff;stroke-width:3;fill:none}
  .ctable tr:last-child td{border-bottom:none}
  @media(max-width:720px){.ctable th,.ctable td{padding:13px 12px;font-size:13px}.ctable td:first-child,.ctable th:first-child{width:34%}.ctable td.us .chk{display:none}}
  .note{color:var(--ink-faint);font-size:13px;margin-top:18px;line-height:1.65;max-width:880px}

  /* ===== CALCULATOR (dark) ===== */
  .calc{background:linear-gradient(160deg,var(--d-bg-2),var(--d-bg));color:var(--d-ink);border-radius:var(--r-xl);
    padding:clamp(28px,4vw,56px);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
  .calc::before{content:"";position:absolute;top:-30%;right:-10%;width:520px;height:520px;
    background:radial-gradient(closest-side,rgba(255,90,31,.18),transparent 70%);pointer-events:none}
  .calc>*{position:relative}
  .calc .eyebrow{color:var(--accent)}.calc .eyebrow::before{background:var(--accent)}
  .calc h2{color:#fff;font-size:clamp(26px,3.6vw,40px)}
  .calc .lead{color:var(--d-ink-2)}
  .calc-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:46px;margin-top:38px;align-items:center}
  @media(max-width:860px){.calc-grid{grid-template-columns:1fr;gap:32px}}
  .slider-block{margin-bottom:30px}
  .slider-block .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:12px}
  .slider-block label{font-size:15px;font-weight:600;color:var(--d-ink-2)}
  .slider-block .val{font-size:clamp(22px,3vw,30px);font-weight:900;letter-spacing:-.03em;white-space:nowrap}
  .slider-block .val .u{font-size:.55em;color:var(--d-ink-3);font-weight:700;margin-left:3px}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
    background:rgba(255,255,255,.16);outline:none;cursor:pointer}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
    background:var(--primary);cursor:pointer;box-shadow:0 4px 14px rgba(255,90,31,.7);border:3px solid #fff;transition:transform var(--d-fast)}
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--primary);cursor:pointer;border:3px solid #fff}
  .preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
  .preset{background:rgba(255,255,255,.07);color:var(--d-ink-2);font-family:inherit;font-size:13px;font-weight:600;
    padding:8px 14px;border-radius:99px;cursor:pointer;border:none;box-shadow:inset 0 0 0 1px var(--d-line);transition:all var(--d-fast)}
  .preset:hover,.preset.on{background:var(--primary);color:#fff;box-shadow:inset 0 0 0 1px var(--primary)}
  .result{background:rgba(255,255,255,.04);border-radius:var(--r-lg);padding:30px;box-shadow:inset 0 0 0 1px var(--d-line)}
  .res-bars{display:flex;flex-direction:column;gap:18px;margin-bottom:24px}
  .bar-item .bl{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:9px;color:var(--d-ink-2)}
  .bar-item .bl .amt{font-weight:800;font-size:16px;color:#fff}
  .bar-track{height:14px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
  .bar-fill{height:100%;border-radius:99px;width:0;transition:width .8s var(--ease)}
  .bar-them .bar-fill{background:linear-gradient(90deg,#c7c7cc,#9a9aa0)}
  .bar-us .bar-fill{background:linear-gradient(90deg,#34d27e,var(--save))}
  .save-box{text-align:center;padding:24px;background:var(--save-soft);border-radius:var(--r)}
  .save-box .k{font-size:13.5px;font-weight:700;color:var(--save-deep);margin-bottom:6px}
  .save-box .v{font-size:clamp(30px,5vw,44px);font-weight:900;color:var(--save-deep);letter-spacing:-.04em}
  .save-box .sub{font-size:13.5px;color:var(--ink-3);margin-top:8px;font-weight:600}
  .save-box .sub b{color:var(--save-deep)}

  /* ===== FLOW ===== */
  .flow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:720px){.flow{grid-template-columns:1fr}}
  .flow-card{border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .flow-card.them{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-xs)}
  .flow-card.us{background:linear-gradient(160deg,var(--primary),var(--primary-deep));color:#fff;box-shadow:var(--shadow-glow)}
  .flow-card h3{font-size:20px;margin-bottom:4px}
  .flow-card .tag{font-size:13px;font-weight:700;opacity:.85;margin-bottom:22px}
  .flow-card.them .tag{color:var(--ink-3)}
  .timeline{display:flex;gap:7px;align-items:flex-end;height:120px;margin-bottom:18px}
  .tl-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
  .tl-bar{width:100%;border-radius:8px 8px 4px 4px;height:0;transition:height .6s var(--ease)}
  .flow-card.them .tl-bar{background:#dbe7e1}
  .flow-card.them .tl-bar.pay{background:var(--ink)}
  .flow-card.us .tl-bar{background:rgba(255,255,255,.32)}
  .flow-card.us .tl-bar.pay{background:#fff}
  .tl-lbl{font-size:11px;font-weight:700;opacity:.7}
  .flow-card p{font-size:14px;line-height:1.62}
  .flow-card.them p{color:var(--ink-2)}
  .flow-card.us p{color:rgba(255,255,255,.9)}

  /* ===== TAX ===== */
  .tax-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
  @media(max-width:760px){.tax-wrap{grid-template-columns:1fr}}
  .tax-card{border-radius:var(--r-lg);padding:32px;background:var(--surface)}
  .tax-card.bad{box-shadow:inset 0 0 0 1px var(--line),var(--shadow-xs)}
  .tax-card.good{box-shadow:inset 0 0 0 2px var(--primary),var(--shadow)}
  .tax-card .h{display:flex;align-items:center;gap:10px;margin-bottom:20px}
  .tax-card .badge{font-size:12px;font-weight:800;padding:6px 12px;border-radius:99px}
  .tax-card.bad .badge{background:var(--bg-2);color:var(--ink-3)}
  .tax-card.good .badge{background:var(--save-soft);color:var(--save-deep)}
  .tax-row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line);font-size:15px}
  .tax-row:last-of-type{border-bottom:none}
  .tax-row .lab{color:var(--ink-3)}
  .tax-row .num{font-weight:800;text-align:right}
  .tax-total{margin-top:14px;padding:16px;border-radius:var(--r-sm);text-align:center;font-weight:800}
  .tax-card.bad .tax-total{background:var(--bg-2);color:var(--ink-2)}
  .tax-card.good .tax-total{background:var(--save-soft);color:var(--save-deep)}
  .tax-total .big{font-size:26px;display:block;margin-top:4px}

  /* ===== TERMINAL ===== */
  .term-card{border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow);background:var(--surface);position:relative;overflow:hidden;
    transition:transform var(--d-base),box-shadow var(--d-base)}
  .term-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .term-card.free{box-shadow:inset 0 0 0 2px var(--primary),var(--shadow)}
  .term-card .pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;padding:7px 13px;border-radius:99px;margin-bottom:16px;
    background:var(--gold-soft);color:var(--gold-deep)}
  .term-card.free .pill{background:var(--save-soft);color:var(--save-deep)}
  .term-card .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .term-card h3{font-size:24px;margin-bottom:10px}
  .term-card>p{color:var(--ink-2);font-size:15px}
  .term-card ul{list-style:none;margin-top:18px}
  .term-card li{padding:12px 0;border-top:1px solid var(--line);display:flex;gap:11px;align-items:center;font-size:15px;color:var(--ink-2)}
  .term-card li .lk{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--save-soft);display:inline-flex;align-items:center;justify-content:center}
  .term-card li .lk svg{width:11px;height:11px;stroke:var(--save-deep);stroke-width:3;fill:none}

  /* ===== APPLY ===== */
  .apply{background:var(--surface);border-radius:var(--r-xl);padding:clamp(26px,4vw,52px);box-shadow:var(--shadow-lg)}
  .step-no{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
    background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;font-weight:800;font-size:14px;margin-right:12px;box-shadow:var(--shadow-glow)}
  .step-h{display:flex;align-items:center;font-size:19px;font-weight:800;margin:36px 0 18px}
  .step-h:first-child{margin-top:0}
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .cal-head .m{font-weight:800;font-size:17px}
  .cal-nav{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);width:38px;height:38px;border-radius:11px;cursor:pointer;
    font-size:18px;color:var(--ink);transition:all var(--d-fast)}
  .cal-nav:hover{box-shadow:inset 0 0 0 1px var(--primary);color:var(--primary-deep)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .cal-dow{text-align:center;font-size:12px;font-weight:700;color:var(--ink-faint);padding:6px 0}
  .cal-day{aspect-ratio:1;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border:none;border-radius:11px;cursor:pointer;
    font-family:inherit;font-weight:600;font-size:14px;color:var(--ink);transition:all var(--d-fast)}
  .cal-day:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--primary);color:var(--primary-deep);transform:translateY(-1px)}
  .cal-day:disabled{color:var(--ink-faint);background:var(--bg);box-shadow:none;cursor:not-allowed;opacity:.6}
  .cal-day.sel{background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;box-shadow:var(--shadow-glow)}
  .cal-day.empty{background:transparent;box-shadow:none;cursor:default}
  .slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .slot{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);padding:10px 17px;border-radius:99px;
    font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all var(--d-fast)}
  .slot:hover{box-shadow:inset 0 0 0 1px var(--primary);transform:translateY(-1px)}
  .slot.sel{background:var(--ink);color:#fff;box-shadow:none}
  .slot.taken,.slot:disabled{cursor:not-allowed;opacity:.4;text-decoration:line-through;
    box-shadow:inset 0 0 0 1px var(--line-2);transform:none}
  .slot.taken:hover,.slot:disabled:hover{box-shadow:inset 0 0 0 1px var(--line-2);transform:none}
  .picked{margin-top:16px;padding:14px 18px;border-radius:var(--r-sm);background:var(--primary-soft);
    font-weight:700;color:var(--primary-deep);font-size:14px;display:none;align-items:center;gap:8px}
  .picked.show{display:flex;animation:pop .35s var(--ease)}
  .picked svg{width:16px;height:16px;stroke:var(--primary);stroke-width:3;fill:none;flex-shrink:0}

  .field{margin-bottom:16px}
  .field label{display:block;font-size:14px;font-weight:700;margin-bottom:8px;color:var(--ink)}
  .field label .req{color:var(--primary);margin-left:3px}
  .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;padding:14px 15px;
    background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);border:none;border-radius:var(--r-sm);color:var(--ink);transition:box-shadow var(--d-fast)}
  .field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--primary)}
  .field input[readonly]{background:var(--bg);color:var(--ink-3)}
  .field textarea{resize:vertical;min-height:84px}
  .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:560px){.f2{grid-template-columns:1fr}}
  .files{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media(max-width:560px){.files{grid-template-columns:1fr}}
  .file-box{box-shadow:inset 0 0 0 1.5px var(--line-2);border-radius:var(--r-sm);padding:22px 14px;text-align:center;cursor:pointer;
    transition:all var(--d-fast);background:var(--surface)}
  .file-box:hover{box-shadow:inset 0 0 0 1.5px var(--primary);background:var(--primary-soft)}
  .file-box .fl{font-size:14px;font-weight:700;margin-bottom:4px}
  .file-box .fs{font-size:12px;color:var(--ink-faint);word-break:break-all}
  .file-box.has{box-shadow:inset 0 0 0 1.5px var(--save);background:var(--save-soft)}
  .file-box.has .fs{color:var(--save-deep);font-weight:700}
  .file-box input{display:none}
  .agree{display:flex;gap:11px;align-items:flex-start;margin:24px 0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
  .agree input{margin-top:2px;width:19px;height:19px;accent-color:var(--primary);flex-shrink:0;cursor:pointer}
  .submit-btn{width:100%;justify-content:center;font-size:17px;padding:18px}
  .confirm{display:none;text-align:center;padding:44px 24px;background:var(--surface);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line);margin-top:8px}
  .confirm.show{display:block;animation:pop .45s var(--ease)}
  .confirm .ck{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#2fd27a,var(--save));
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 18px 40px -14px rgba(13,138,82,.5)}
  .confirm .ck svg{width:30px;height:30px;stroke:#fff;stroke-width:3;fill:none;animation:draw .6s var(--ease) .15s both}
  .confirm h3{font-size:22px;margin-bottom:8px}
  .confirm>p{color:var(--ink-2);font-size:15px}
  .confirm .summ{text-align:left;background:var(--bg);border-radius:var(--r-sm);padding:18px;margin:22px 0;font-size:14px}
  .confirm .summ div{padding:8px 0;display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}
  .confirm .summ div:last-child{border-bottom:none}
  .confirm .summ .k{color:var(--ink-3);font-weight:600;flex-shrink:0}
  .confirm .summ .v{font-weight:700;text-align:right}

  /* ===== REP (dark) ===== */
  .rep{background:linear-gradient(160deg,var(--d-bg-2),var(--d-bg));color:var(--d-ink);border-radius:var(--r-xl);
    padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
  .rep::before{content:"";position:absolute;bottom:-30%;left:-8%;width:440px;height:440px;
    background:radial-gradient(closest-side,rgba(255,90,31,.16),transparent 70%);pointer-events:none}
  .rep>*{position:relative}
  @media(max-width:760px){.rep{grid-template-columns:1fr}}
  .rep h3{color:#fff;font-size:22px;margin-bottom:8px}
  .rep>div>p{color:var(--d-ink-2);font-size:14px;line-height:1.62}
  .rep .field label{color:var(--d-ink-2)}
  .rep .field input{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--d-line);color:#fff}
  .rep .field input::placeholder{color:var(--d-ink-3)}
  .rep .field input:focus{box-shadow:inset 0 0 0 2px var(--accent)}
  .rep-card{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--d-line);border-radius:var(--r-lg);padding:26px}
  .rep-card .label{font-size:12px;font-weight:800;color:var(--accent);margin-bottom:16px;letter-spacing:.04em}
  .rep-card .line{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--d-line);font-size:15px}
  .rep-card .line:last-child{border-bottom:none}
  .rep-card .line .k{color:var(--d-ink-3)}
  .rep-card .line .v{font-weight:700;text-align:right}

  /* ===== FOOTER ===== */
  footer{border-top:1px solid var(--line);padding:52px 0 64px;background:var(--bg-2)}
  .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
  .foot .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.04em}
  .foot .brand .dot{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--primary),var(--primary-deep));
    display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:900}
  .foot small{display:block;color:var(--ink-faint);font-size:13px;margin-top:10px;line-height:1.7}

  /* ===== LIVE (dark) ===== */
  .live{background:var(--d-bg);color:#fff;overflow:hidden}
  .live::before{content:"";position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(720px 400px at 78% 16%,rgba(255,90,31,.18),transparent 64%),
    radial-gradient(640px 420px at 18% 92%,rgba(13,138,82,.12),transparent 60%)}
  .live .gridbg{position:absolute;inset:0;opacity:.5;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;
    -webkit-mask-image:radial-gradient(circle at 52% 36%,#000 26%,transparent 76%);
    mask-image:radial-gradient(circle at 52% 36%,#000 26%,transparent 76%)}
  .live .wrap{position:relative;z-index:2}
  .live-badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.03em;
    background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--d-line);padding:8px 15px;border-radius:99px;color:#fff}
  .live-badge .ld{width:9px;height:9px;border-radius:50%;background:#2fd27a;position:relative}
  .live-badge .ld::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2fd27a;animation:pulseG 1.8s infinite}
  .live h2{color:#fff;font-size:clamp(30px,5.4vw,58px);margin:22px 0 0;letter-spacing:-.04em}
  .live h2 .big{color:var(--accent)}
  .live h2 .gn{color:var(--accent)}
  .live .lead{color:var(--d-ink-2);margin-top:16px;max-width:560px}
  .live-stats{display:flex;margin-top:40px;box-shadow:inset 0 0 0 1px var(--d-line);border-radius:var(--r-lg);overflow:hidden;max-width:760px}
  .live-stat{flex:1;padding:26px 24px;border-right:1px solid var(--d-line)}
  .live-stat:last-child{border-right:none}
  .live-stat .n{font-size:clamp(26px,4vw,38px);font-weight:900}
  .live-stat .n .u{color:var(--accent);font-size:.5em}
  .live-stat .l{color:var(--d-ink-3);font-size:13px;font-weight:600;margin-top:6px}
  @media(max-width:620px){.live-stats{flex-direction:column}.live-stat{border-right:none;border-bottom:1px solid var(--d-line)}.live-stat:last-child{border-bottom:none}}
  .live-main{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;margin-top:48px}
  @media(max-width:860px){.live-main{grid-template-columns:1fr}}
  .map{position:relative;box-shadow:inset 0 0 0 1px var(--d-line);border-radius:var(--r-lg);background:rgba(255,255,255,.02);padding:18px}
  .map .mtitle{position:absolute;top:18px;left:20px;font-size:13px;font-weight:700;color:var(--d-ink-3);z-index:3}
  .map-canvas{position:relative;width:100%;height:380px}
  .node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px}
  .node .pt{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 2px rgba(255,90,31,.55)}
  .node.big .pt{width:14px;height:14px;box-shadow:0 0 18px 4px rgba(255,90,31,.7)}
  .node .nl{font-size:10px;font-weight:700;color:var(--d-ink-3);white-space:nowrap}
  .node .ring{position:absolute;top:0;width:9px;height:9px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:ring 2.8s infinite}
  .node.big .ring{width:14px;height:14px}
  .ticker{box-shadow:inset 0 0 0 1px var(--d-line);border-radius:var(--r-lg);background:rgba(255,255,255,.02);padding:22px;display:flex;flex-direction:column}
  .ticker .th{font-size:13px;font-weight:700;color:var(--d-ink-3);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
  .feed{flex:1;display:flex;flex-direction:column;gap:10px;overflow:hidden;min-height:300px}
  .tx{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r-sm);background:rgba(255,255,255,.04);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);animation:txin .5s var(--ease)}
  .tx .tdot{width:8px;height:8px;border-radius:50%;background:#2fd27a;flex-shrink:0;box-shadow:0 0 8px rgba(47,210,122,.6)}
  .tx .tinfo{flex:1;min-width:0}
  .tx .tr1{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tx .tr2{font-size:12px;color:var(--d-ink-3);margin-top:2px}
  .tx .tamt{font-weight:800;font-size:15px;color:var(--accent);white-space:nowrap}
  .marq{margin-top:30px;display:flex;flex-direction:column;gap:12px;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .marq-row{display:flex;gap:12px;width:max-content;animation:scrollx 38s linear infinite}
  .marq-row.rev{animation-direction:reverse;animation-duration:46s}
  .marq:hover .marq-row{animation-play-state:paused}
  .chip{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:var(--r-sm);
    background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--d-line);font-size:15px;font-weight:700;white-space:nowrap}
  .chip .ci{width:26px;height:26px;border-radius:8px;background:rgba(255,90,31,.14);display:flex;align-items:center;justify-content:center}
  .chip .ci svg{width:15px;height:15px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .live .note{color:var(--d-ink-3);margin-top:28px}

  /* ===== keyframes ===== */
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.55)}70%{box-shadow:0 0 0 10px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}
  @keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(47,210,122,.6)}70%{box-shadow:0 0 0 10px rgba(47,210,122,0)}100%{box-shadow:0 0 0 0 rgba(47,210,122,0)}}
  @keyframes ring{0%{transform:scale(1);opacity:.7}80%{transform:scale(4.2);opacity:0}100%{opacity:0}}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes txin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  @keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
  @keyframes swipe{to{transform:scaleX(1)}}
  @keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes draw{from{stroke-dasharray:40;stroke-dashoffset:40}to{stroke-dasharray:40;stroke-dashoffset:0}}

  /* hero load stagger */
  .hero .anim{animation:heroUp .85s var(--ease) both}
  .hero .anim.d1{animation-delay:.05s}
  .hero .anim.d2{animation-delay:.15s}
  .hero .anim.d3{animation-delay:.25s}
  .hero .anim.d4{animation-delay:.35s}
  .hero .anim.d5{animation-delay:.5s}

  /* scroll reveal */
  .rv{opacity:0;transform:translateY(30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
  .rv.in{opacity:1;transform:none}

  /* ===== KakaoTalk 상담 플로팅 버튼 ===== */
  .kakao-fab{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
    display:inline-flex;align-items:center;gap:9px;padding:13px 19px 13px 16px;border-radius:99px;
    background:#FEE500;color:#3C1E1E;font-family:inherit;font-weight:800;font-size:15px;letter-spacing:-.01em;
    text-decoration:none;box-shadow:0 8px 22px -8px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.12);
    transform:translateY(14px);opacity:0;pointer-events:none;
    transition:transform .5s var(--ease),opacity .5s var(--ease),box-shadow var(--d-fast),filter var(--d-fast)}
  .kakao-fab.in{transform:none;opacity:1;pointer-events:auto}
  .kakao-fab:hover{filter:brightness(.97);box-shadow:0 14px 30px -10px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.14)}
  .kakao-fab:active{transform:translateY(1px)}
  .kakao-fab .kico{width:24px;height:24px;flex:none;display:block}
  .kakao-fab .kico svg{width:100%;height:100%;display:block;fill:#3C1E1E}
  @media(max-width:520px){
    .kakao-fab{padding:14px;gap:0}
    .kakao-fab .klbl{display:none}
  }

  /* reduced motion */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
    .rv{opacity:1;transform:none}
    .hero h1 .underline::after{transform:scaleX(1)}
    .marq-row{animation:none!important}
    .kakao-fab{transform:none;opacity:1;pointer-events:auto;transition:none}
  }