// ─── SVG Icons ───────────────────────────────────────────────────────────────
const IconShield = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>);
const IconMail = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>);
const IconNetwork = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg>);
const IconAI = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"/><circle cx="7.5" cy="14.5" r="1.5"/><circle cx="16.5" cy="14.5" r="1.5"/></svg>);
const IconChat = () => (<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"/></svg>);
const IconClose = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>);
const IconArrow = () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>);
const IconMenu = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>);
const IconCheck = () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M20 6 9 17l-5-5"/></svg>);
const IconPlay = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l14 9-14 9V3z"/></svg>);
const IconUpload = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>);
const IconTrend = () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>);

const IconPrivacy = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><circle cx="12" cy="16" r="1" fill="currentColor"/></svg>);

// ─── 3ES Soft Brand Logo (Strong · Stable · Satisfied) — 컬러 S 글리프 3개 ──
const Logo3ES = ({ size = 32, showText = true, showTagline = false, dark = false, compact = false, onClick }) => {
  const h = size * 1.2;
  return (
    <div onClick={onClick} className="logo3es"
      style={{ display:'inline-flex', flexDirection:'column', alignItems:'flex-start', gap: size * 0.13,
        cursor: onClick ? 'pointer' : 'default', userSelect:'none' }}>
      <div className="logo3es-mark" style={{ position:'relative', height:h, flexShrink:0 }}>
        <img src="logo-3s.png" alt="3ES Soft"
          style={{ height:h, width:'auto', display:'block',
            filter: dark ? 'drop-shadow(0 1px 3px rgba(0,0,0,.45))' : 'none' }}/>
        <span className="logo3es-sheen" aria-hidden="true"
          style={{ WebkitMaskImage:'url(logo-3s.png)', maskImage:'url(logo-3s.png)',
            WebkitMaskSize:'100% 100%', maskSize:'100% 100%', WebkitMaskRepeat:'no-repeat', maskRepeat:'no-repeat' }}/>
      </div>
      <div style={{ display:'flex', flexDirection: compact ? 'column' : 'row', alignItems: compact ? 'flex-start' : 'baseline',
        gap: compact ? 1 : size * 0.3, paddingLeft: size * 0.06 }}>
        {!compact && (
          <span style={{ fontFamily:'DM Sans, sans-serif', fontSize: Math.max(10.5, size * 0.34), fontWeight:600,
            letterSpacing:'0.9px', whiteSpace:'nowrap', color: dark ? 'rgba(255,255,255,0.62)' : '#64748B' }}>
            Strong / Stable / Satisfied
          </span>
        )}
        {showTagline && (
          <span style={{ fontSize: Math.max(11, size * 0.42), fontWeight:600, letterSpacing:'0.2px', whiteSpace:'nowrap',
            color: dark ? 'rgba(255,255,255,0.5)' : '#94A3B8' }}>
            ㈜삼에스소프트
          </span>
        )}
      </div>
    </div>
  );
};

const IconSpamOut = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="M17 3 21 7M21 3l-4 4"/></svg>);
const IconCheckOut = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="m22 8-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 8"/><path d="m15 17 2.5 2.5L22 15"/></svg>);
const IconArch5 = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="5" rx="1"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>);
const IconEDR = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/><path d="m9 10 2 2 4-4"/></svg>);
const IconMDR = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-4.35-4.35"/><path d="M11 8v6M8 11h6"/></svg>);
const IconSniper = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3v4M12 17v4M3 12h4M17 12h4"/><circle cx="12" cy="12" r="2.5"/></svg>);

const IconInsight = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4"/><circle cx="16" cy="8" r="5"/><path d="m19.5 11.5 2.5 2.5"/></svg>);
const IconNac = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3h14v3M12 8v5"/></svg>);
const IconCce = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M8 6h12M8 12h12M8 18h12"/><path d="m3 6 1.5 1.5L7 5M3 12l1.5 1.5L7 11M3 18l1.5 1.5L7 17"/></svg>);
const IconCve = () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 6v6c0 5 8 10 8 10s8-5 8-10V6z"/><path d="M12 8v4M12 16h.01"/></svg>);
const solIcons = { system:<IconShield/>, email:<IconMail/>, network:<IconNetwork/>, ai:<IconAI/>, privacy:<IconPrivacy/>, mailinsight:<IconInsight/>, genian:<IconNac/>, cce:<IconCce/>, cve:<IconCve/>, spamout:<IconSpamOut/>, checkout:<IconCheckOut/>, arch5:<IconArch5/>, edr:<IconEDR/>, mdr:<IconMDR/>, sniper:<IconSniper/> };

// ─── Utility ──────────────────────────────────────────────────────────────────
const useScrollReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('revealed'); });
    }, { threshold: 0.1 });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  });
};

// ─── Global Styles ────────────────────────────────────────────────────────────
const globalStyles = `
  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.6s ease,transform 0.6s ease;animation:revealFallback 0.6s ease 0.9s forwards}
  .reveal.revealed{opacity:1;transform:none;animation:none}
  @keyframes revealFallback{to{opacity:1;transform:none}}
  .reveal-d1{transition-delay:0.1s}.reveal-d2{transition-delay:0.2s}.reveal-d3{transition-delay:0.3s}.reveal-d4{transition-delay:0.4s}

  /* NAV */
  .nav-wrap{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,18,38,0.72);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(255,255,255,0.06);transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
  .nav-wrap::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(103,232,249,0.35),rgba(37,99,235,0.28),transparent);opacity:0;transition:opacity .4s ease}
  .nav-wrap.scrolled{background:rgba(4,9,22,0.94);border-bottom-color:rgba(255,255,255,0.09);box-shadow:0 8px 32px -12px rgba(0,0,0,0.7)}
  .nav-wrap.scrolled::after{opacity:1}
  .nav-inner{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;height:56px;transition:height .35s cubic-bezier(.2,.7,.3,1)}
  .nav-wrap.scrolled .nav-inner{height:52px}
  .nav-inner > div:first-child{display:flex;align-items:center;height:100%;overflow:visible}
  .logo3es{line-height:1.1}
  .nav-logo{font-family:'DM Sans',sans-serif;font-weight:700;font-size:22px;color:#fff;letter-spacing:-0.5px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;gap:8px}
  .nav-logo span{color:#06B6D4}
  .nav-links{display:flex;align-items:center;gap:0;margin:0 16px;flex:1;justify-content:center}
  .nav-link{flex-shrink:0;color:rgba(255,255,255,0.78);font-size:12.5px;font-weight:400;letter-spacing:0;padding:8px 14px;border-radius:6px;cursor:pointer;transition:color .2s ease;white-space:nowrap;position:relative}
  .nav-link:hover{color:#fff}
  .nav-link.active{color:#fff;font-weight:500}
  .nav-link.has-sub:hover .nav-sub{display:block}
  .nav-sub{display:none;position:absolute;top:100%;left:0;background:#1A3260;border-radius:8px;min-width:160px;box-shadow:0 8px 32px rgba(0,0,0,0.3);padding:8px;margin-top:4px;z-index:200}
  .nav-sub::before{content:'';position:absolute;top:-14px;left:-10px;right:-10px;height:14px}
  .nav-sub-item{padding:8px 12px;color:rgba(255,255,255,0.8);font-size:13px;border-radius:5px;cursor:pointer;transition:all 0.15s}
  .nav-sub-item:hover{background:rgba(255,255,255,0.08);color:#fff}
  .nav-sub-group{position:relative}
  .nav-sub-parent{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;color:#fff}
  .nav-sub-parent svg{opacity:0.5;flex-shrink:0}
  .nav-flyout{display:none;position:absolute;top:-8px;left:100%;margin-left:6px;background:#1A3260;border-radius:10px;min-width:250px;box-shadow:0 12px 40px rgba(0,0,0,0.4);padding:8px;z-index:210;border:1px solid rgba(255,255,255,0.07)}
  .nav-sub-group:hover .nav-flyout{display:block}
  .nav-flyout::before{content:'';position:absolute;left:-14px;top:0;bottom:0;width:14px}
  .nav-flyout-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:7px;cursor:pointer;transition:all 0.15s}
  .nav-flyout-item:hover{background:rgba(255,255,255,0.08)}
  .nav-flyout-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
  .nav-flyout-label{font-size:13px;font-weight:600;color:#fff;line-height:1.3}
  .nav-flyout-sub{font-size:11px;color:rgba(255,255,255,0.5);margin-top:2px}
  @media(max-width:640px){.nav-flyout{position:static;margin-left:0;box-shadow:none;padding:4px 0 4px 12px;min-width:0;border:none;background:transparent}.nav-sub-group:hover .nav-flyout{display:block}}
  .nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
  .btn-lang{padding:6px 14px;border:1px solid rgba(255,255,255,0.25);background:transparent;color:#fff;font-size:12px;font-weight:600;border-radius:20px;cursor:pointer;transition:all 0.2s;font-family:inherit}
  .lang-seg{display:inline-flex;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);border-radius:100px;overflow:hidden;padding:1.5px}
  .lang-seg-btn{padding:3px 10px;border-radius:100px;background:transparent;color:rgba(255,255,255,0.5);font-size:11px;font-weight:700;border:none;cursor:pointer;font-family:inherit;transition:all 0.25s;letter-spacing:0.5px}
  .lang-seg-btn:hover{color:#fff;background:rgba(255,255,255,0.07)}
  .lang-seg-btn.active{background:rgba(255,255,255,0.94);color:#0B1730;box-shadow:0 2px 8px -2px rgba(0,0,0,.5)}
  .btn-lang:hover{background:rgba(255,255,255,0.1)}
  .btn-cta-nav{padding:6px 15px;background:linear-gradient(135deg,#2563EB,#0891B2);color:#fff;font-size:12.5px;font-weight:500;letter-spacing:0;border-radius:100px;cursor:pointer;border:none;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,filter .25s ease;font-family:inherit;box-shadow:none}
  .btn-cta-nav:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 8px 26px -6px rgba(37,99,235,.95)}
  .btn-cta-nav:active{transform:translateY(0)}
  .nav-mobile-btn{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:4px}
  .nav-mobile-menu{display:none}

  /* FLOATING CTA BAR */
  .floating-cta{position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(15,30,60,0.97);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,0.1);padding:12px 24px;display:flex;align-items:center;justify-content:center;gap:12px;transform:translateY(100%);transition:transform 0.3s ease}
  .floating-cta.visible{transform:translateY(0)}
  .floating-cta-text{color:rgba(255,255,255,0.7);font-size:14px;font-weight:500;margin-right:8px}

  /* HERO */
  .hero{min-height:auto;background:linear-gradient(135deg,#0a1628 0%,#0F1E3C 50%,#0d2a4a 100%);display:flex;flex-direction:column;justify-content:center;padding-top:68px;position:relative;overflow:hidden}
  .hero-bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,0.08)1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,0.08)1px,transparent 1px);background-size:60px 60px}
  .hero-bg-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,0.18)0%,transparent 70%);top:-100px;right:-100px;pointer-events:none}
  .hero-bg-glow2{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,0.12)0%,transparent 70%);bottom:0;left:10%;pointer-events:none}
  .hero-content{max-width:1280px;width:100%;margin:0 auto;padding:88px 24px 96px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative}
  .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(6,182,212,0.12);border:1px solid rgba(6,182,212,0.3);color:#06B6D4;font-size:13px;font-weight:600;padding:6px 14px;border-radius:20px;margin-bottom:24px;letter-spacing:0.5px}
  .hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#06B6D4;animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
  .hero-kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.55);margin-bottom:26px}
  .hero-kicker i{width:5px;height:5px;border-radius:50%;background:#22D3EE;box-shadow:0 0 10px #22D3EE;animation:pulse 2.4s ease-in-out infinite;flex:none}
  .hero-title{font-size:clamp(38px,4.4vw,60px);font-weight:700;color:#fff;line-height:1.18;letter-spacing:-1.8px;margin-bottom:26px}
  .hero-title-soft{color:rgba(255,255,255,.42);font-weight:600}
  /* HERO VISUAL — 방어 계층 */
  .hero-layers{width:min(420px,100%);aspect-ratio:1;position:relative}
  .hero-layers svg{width:100%;height:100%;display:block;overflow:visible}
  .hl-lab{font-size:9.5px;font-weight:600;letter-spacing:.4px;fill:rgba(255,255,255,.45)}
  .hl-scan{transform-origin:180px 180px;animation:hlSpin 14s linear infinite}
  .hl-dot{animation:hlBlink 3.6s ease-in-out infinite}
  @keyframes hlSpin{to{transform:rotate(360deg)}}
  @keyframes hlBlink{0%,100%{opacity:.2}50%{opacity:.9}}
  @media(prefers-reduced-motion:reduce){.hl-scan,.hl-dot{animation:none}}
  .hero-title-accent{color:#06B6D4}
  .hero-sub{font-size:17.5px;color:rgba(255,255,255,0.6);line-height:1.75;margin-bottom:40px;white-space:pre-line;max-width:520px}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
  /* 버튼·칩 라벨은 줄바꿈 금지 (좁은 폭에서 글자 깨짐 방지) */
  .btn-primary,.btn-outline,.btn-ghost,.btn-demo,.btn-cta-nav,.btn-lang,.lang-seg-btn,.news-badge,.news-hot-badge,.nav-link,.footer-link,.f-grp-h,.f-item{white-space:nowrap}
  @media(max-width:520px){.btn-primary,.btn-outline,.btn-ghost,.btn-demo{white-space:normal}}
  .btn-primary,.btn-outline,.btn-ghost,.btn-demo{flex:0 0 auto}
  .section-badge{white-space:nowrap}
  /* 문의 솔루션 선택 칩 */
  /* 전담 모니터링 카드 */
  .mon-flow{margin-bottom:20px}
  .mon-flow svg{width:100%;max-width:520px;margin:0 auto;aspect-ratio:520/210;height:auto;display:block;overflow:visible}
  .mf-t{font-size:10.5px;font-weight:600;fill:rgba(255,255,255,.82);font-family:'Pretendard',sans-serif}
  .mf-t.on{fill:#7DD3FC;font-size:12px;font-weight:700}
  .mf-t.amber{fill:#FBBF24}
  .mf-t.green{fill:#34D399}
  .mf-s{font-size:9px;fill:rgba(255,255,255,.45);font-family:'Pretendard',sans-serif}
  .mf-s.amber{fill:rgba(251,191,36,.8)}
  .mf-s.green{fill:rgba(52,211,153,.8)}
  .mf-dash{animation:mfFlow 1.8s linear infinite}
  @keyframes mfFlow{to{stroke-dashoffset:-16}}
  .mf-blink{animation:pulse 1.8s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.mf-dash,.mf-blink{animation:none}}
  .mon-live{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px 17px}
  .mon-live-h{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:1.4px;font-weight:700;color:rgba(255,255,255,.45)}
  .mon-live-h span:first-child{display:inline-flex;align-items:center;gap:6px;color:#34D399}
  .mon-live-h s{width:6px;height:6px;border-radius:50%;background:#34D399;display:block;text-decoration:none;animation:pulse 1.8s ease-in-out infinite}
  .mon-live-f{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.07);
    font-size:11.5px;color:rgba(255,255,255,.45)}
  .mon-live-f b{color:#fff;font-weight:700;margin-left:3px}
  .contact-kinds{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
  .contact-kind{display:flex;align-items:flex-start;gap:13px;text-align:left;padding:15px 17px;border-radius:13px;cursor:pointer;
    font-family:inherit;background:#fff;border:1.5px solid #E2E8F0;color:#475569;transition:all .16s ease}
  .contact-kind:hover{border-color:#94A3B8}
  .contact-kind.on{border-color:#2563EB;background:rgba(37,99,235,.04);color:#2563EB}
  .contact-kind .ck-t{font-size:14px;font-weight:700;color:#0F1E3C}
  .contact-kind.on .ck-t{color:#2563EB}
  .contact-kind .ck-d{font-size:11.5px;color:#94A3B8;margin-top:3px;line-height:1.45}
  .contact-kind .ck-m{font-size:11.5px;color:#94A3B8;margin-top:6px;font-family:'DM Mono',monospace}
  .contact-kind.on .ck-m{color:#2563EB}
  .sol-pick{display:flex;flex-wrap:wrap;gap:7px}
  .sol-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:100px;cursor:pointer;
    font-family:inherit;font-size:13px;font-weight:500;white-space:nowrap;
    background:#fff;border:1.5px solid #E2E8F0;color:#475569;transition:all .16s ease}
  .sol-chip:hover{border-color:#94A3B8;color:#0F1E3C}
  .sol-chip.on{font-weight:600}
  .sol-chip s{width:7px;height:7px;border-radius:50%;display:block;text-decoration:none;flex:none}
  .sol-pick-count{font-size:11.5px;color:#2563EB;font-weight:600;margin-top:9px}
  .btn-primary{padding:14px 28px;background:#2563EB;color:#fff;font-size:15px;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all 0.2s;font-family:inherit;display:inline-flex;align-items:center;gap:8px}
  .btn-primary:hover{background:#1D4ED8;transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,99,235,0.4)}
  .btn-outline{padding:14px 24px;background:transparent;color:#fff;font-size:15px;font-weight:600;border-radius:8px;border:1px solid rgba(255,255,255,0.3);cursor:pointer;transition:all 0.2s;font-family:inherit}
  .btn-outline:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.5)}
  .btn-ghost{padding:14px 24px;background:transparent;color:#06B6D4;font-size:15px;font-weight:600;border-radius:8px;border:1px solid rgba(6,182,212,0.4);cursor:pointer;transition:all 0.2s;font-family:inherit}
  .btn-ghost:hover{background:rgba(6,182,212,0.1)}
  .btn-demo{padding:12px 22px;background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;font-size:14px;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all 0.2s;font-family:inherit;display:inline-flex;align-items:center;gap:8px}
  .btn-demo:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(124,58,237,0.4)}
  .hero-stats{display:flex;gap:48px;margin-top:56px;padding-top:34px;border-top:1px solid rgba(255,255,255,0.1)}
  .hero-stat-num{font-family:'DM Sans',sans-serif;font-size:32px;font-weight:700;color:#fff;letter-spacing:-1px}
  .hero-stat-label{font-size:12px;color:rgba(255,255,255,0.5);margin-top:2px;font-weight:500}
  .hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
  .hero-shield-outer{width:280px;height:280px;border-radius:50%;background:rgba(37,99,235,0.08);border:1px solid rgba(37,99,235,0.2);display:flex;align-items:center;justify-content:center;animation:rotateSlow 20s linear infinite}
  .hero-shield-inner{width:200px;height:200px;border-radius:50%;background:rgba(37,99,235,0.12);border:1px solid rgba(37,99,235,0.3);display:flex;align-items:center;justify-content:center;animation:rotateSlow 15s linear infinite reverse}
  .hero-shield-core{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#1D4ED8,#06B6D4);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(37,99,235,0.5)}
  @keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  .hero-card-float{position:absolute;background:rgba(255,255,255,0.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:10px 14px;color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
  .hero-card-float.c1{top:20px;right:-10px;color:#06B6D4;border-color:rgba(6,182,212,0.3)}
  .hero-card-float.c2{bottom:60px;left:-20px;color:#86EFAC;border-color:rgba(134,239,172,0.3)}
  .hero-card-float.c3{bottom:10px;right:10px;color:#FCA5A5;border-color:rgba(252,165,165,0.3)}

  /* SECTIONS */
  .section{padding:96px 24px}
  .section-inner{max-width:1280px;margin:0 auto}
  .section-header{text-align:center;margin-bottom:60px}
  .section-badge{display:inline-block;background:rgba(37,99,235,0.08);color:#2563EB;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:16px;border:1px solid rgba(37,99,235,0.15)}
  .section-title{font-size:clamp(28px,3vw,42px);font-weight:700;color:#0F1E3C;letter-spacing:-0.5px;line-height:1.25;margin-bottom:16px}
  .section-sub{font-size:16px;color:#64748B;max-width:560px;margin:0 auto;line-height:1.7}

  /* VALUES */
  .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .value-card{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:32px 28px;transition:all 0.3s}
  .value-card:hover{border-color:#2563EB;box-shadow:0 8px 32px rgba(37,99,235,0.12);transform:translateY(-4px)}
  .value-icon{font-size:28px;margin-bottom:16px}
  .value-title{font-size:17px;font-weight:700;color:#0F1E3C;margin-bottom:10px}
  .value-desc{font-size:14px;color:#64748B;line-height:1.65}

  /* SOLUTIONS */
  .solutions-section{background:#F8FAFC}
  .solutions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .sol-card{background:#fff;border-radius:16px;padding:32px 28px;border:1px solid #E2E8F0;cursor:pointer;transition:all 0.3s}
  .sol-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,0.1)}
  .sol-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
  .sol-title{font-size:20px;font-weight:700;color:#0F1E3C;margin-bottom:4px}
  .sol-eng{font-family:'DM Sans',sans-serif;font-size:12px;color:#94A3B8;margin-bottom:14px;font-weight:500}
  .sol-desc{font-size:14px;color:#64748B;line-height:1.65;margin-bottom:20px}
  .sol-tags{display:flex;gap:6px;flex-wrap:wrap}
  .sol-tag{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
  .sol-arrow{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-top:20px;transition:gap 0.2s}
  .sol-card:hover .sol-arrow{gap:10px}

  /* OPS */
  .ops-section{background:#0F1E3C}
  .ops-section .section-badge{background:rgba(6,182,212,0.1);color:#06B6D4;border-color:rgba(6,182,212,0.2)}
  .ops-section .section-title{color:#fff;white-space:pre-line}
  .ops-section .section-sub{color:rgba(255,255,255,0.6)}
  .ops-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px;position:relative}
  .ops-steps::before{content:'';position:absolute;top:32px;left:calc(12.5%);width:75%;height:2px;background:linear-gradient(90deg,#2563EB,#06B6D4);opacity:0.3}
  .ops-step{text-align:center;position:relative}
  .ops-step-num{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#06B6D4);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:#fff;margin:0 auto 20px;position:relative;z-index:1;box-shadow:0 0 0 8px rgba(37,99,235,0.15)}
  .ops-step-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:8px}
  .ops-step-desc{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.6}

  /* PARTNERS */
  .partners-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:8px}
  .partner-chip{padding:12px 24px;background:#fff;border:1px solid #E2E8F0;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:#475569;transition:all 0.2s;cursor:default}
  .partner-chip:hover{border-color:#2563EB;color:#2563EB;background:rgba(37,99,235,0.03)}

  /* NEWS */
  .news-section{background:#F8FAFC}
  .news-trend-bar{background:linear-gradient(135deg,#0F1E3C,#1A3260);border-radius:12px;padding:20px 24px;margin-bottom:32px;display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
  .news-trend-label{font-size:11px;font-weight:700;color:#06B6D4;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
  .news-trend-text{font-size:13px;color:rgba(255,255,255,0.8);line-height:1.6;max-width:500px}
  .news-keywords{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  .news-kw{padding:4px 12px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:20px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.7);cursor:default;transition:all 0.2s}
  .news-kw:hover{background:rgba(6,182,212,0.15);border-color:rgba(6,182,212,0.3);color:#06B6D4}
  .news-cats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
  .news-cat{padding:7px 18px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;border:1px solid #E2E8F0;background:#fff;color:#64748B}
  .news-cat.active{background:#2563EB;color:#fff;border-color:#2563EB}
  .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .news-card{background:#fff;border-radius:12px;border:1px solid #E2E8F0;overflow:hidden;cursor:pointer;transition:all 0.2s}
  .news-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-2px)}
  .news-card.hot{border-color:rgba(239,68,68,0.3)}
  .news-card-body{padding:24px}
  .news-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .news-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(37,99,235,0.08);color:#2563EB;letter-spacing:0.5px}
  .news-hot-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(239,68,68,0.1);color:#EF4444;display:inline-flex;align-items:center;gap:4px}
  .news-date{font-size:12px;color:#94A3B8}
  .news-title{font-size:16px;font-weight:700;color:#0F1E3C;margin-bottom:8px;line-height:1.45}
  .news-desc{font-size:13px;color:#64748B;line-height:1.6}

  /* REFERENCES */
  .ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .ref-card{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:24px;transition:all 0.2s}
  .ref-card:hover{border-color:#2563EB;box-shadow:0 8px 24px rgba(37,99,235,0.1);transform:translateY(-2px)}
  .ref-name{font-size:17px;font-weight:700;color:#0F1E3C;margin-bottom:6px}
  .ref-industry{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(37,99,235,0.08);color:#2563EB;margin-bottom:12px}
  .ref-solution{font-size:13px;color:#64748B;margin-bottom:8px}
  .ref-size{font-size:12px;color:#94A3B8;margin-bottom:12px}
  .ref-result{font-size:13px;font-weight:700;color:#0F9650;display:flex;align-items:center;gap:6px}

  /* PRICE GUIDE */
  .price-guide{background:linear-gradient(135deg,rgba(37,99,235,0.05),rgba(6,182,212,0.05));border:1px solid rgba(37,99,235,0.15);border-radius:16px;padding:28px 32px;margin:32px 0}
  .price-guide-title{font-size:16px;font-weight:700;color:#0F1E3C;margin-bottom:20px;display:flex;align-items:center;gap:8px}
  .price-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  .price-opt{background:#fff;border:1px solid #E2E8F0;border-radius:10px;padding:16px 20px}
  .price-opt-label{font-size:11px;font-weight:700;color:#94A3B8;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:6px}
  .price-opt-value{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:700;color:#0F1E3C;margin-bottom:2px}
  .price-opt-per{font-size:12px;color:#64748B}
  .price-saving{background:rgba(15,150,80,0.08);border:1px solid rgba(15,150,80,0.15);border-radius:8px;padding:10px 16px;font-size:13px;font-weight:600;color:#0F9650;display:flex;align-items:center;gap:8px}

  /* QUOTE CALCULATOR */
  .quote-calc{background:#F8FAFC;border-radius:12px;padding:20px;margin-bottom:20px;border:1px solid #E2E8F0}
  .quote-calc-title{font-size:13px;font-weight:700;color:#0F1E3C;margin-bottom:16px;display:flex;align-items:center;gap:6px;letter-spacing:-0.2px}
  .qspec-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:560px){.qspec-grid{grid-template-columns:1fr}}
  /* 조달 등재 정보 박스 */
  .g2b-box{margin-top:14px;border:1px solid #D9E3F0;background:#F7FAFF;border-radius:12px;padding:14px 16px}
  .g2b-head{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:8px}
  .g2b-badge{font-size:10.5px;font-weight:800;letter-spacing:.3px;color:#fff;background:#1D4ED8;border-radius:5px;padding:3px 8px;white-space:nowrap}
  .g2b-badge.alt{background:#047857}
  .g2b-vendor{font-size:12.5px;font-weight:700;color:#0F1E3C}
  .g2b-meta{font-size:11.5px;color:#64748B;line-height:1.6;margin-bottom:10px}
  .g2b-table{width:100%;border-collapse:collapse;font-size:12px}
  .g2b-table th{text-align:left;font-weight:700;color:#475569;background:#EAF0FA;padding:6px 9px;border-bottom:1px solid #D9E3F0;white-space:nowrap}
  .g2b-table td{padding:6px 9px;border-bottom:1px solid #E6EDF7;color:#334155;vertical-align:top}
  .g2b-table tr:last-child td{border-bottom:none}
  .g2b-id{font-family:'DM Sans',sans-serif;font-weight:600;color:#1D4ED8;white-space:nowrap}
  .g2b-tiers{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px;font-size:11.5px;color:#475569}
  .g2b-tiers b{font-weight:700;color:#0F1E3C;margin-right:2px}
  .g2b-tiers span{background:#fff;border:1px solid #D9E3F0;border-radius:100px;padding:2px 9px;white-space:nowrap}
  .g2b-foot{font-size:12px;color:#64748B;line-height:1.65;margin-top:10px}
  @media(max-width:560px){
    .g2b-table{font-size:11.5px}
    .g2b-table th,.g2b-table td{padding:5px 7px}
  }
  .qspec-chips{display:flex;flex-wrap:wrap;gap:6px}
  .qspec-chip{padding:7px 13px;border-radius:100px;border:1px solid #D9E0EA;background:#fff;color:#475569;font-size:12.5px;font-weight:500;font-family:inherit;cursor:pointer;transition:all .18s ease;white-space:nowrap}
  .qspec-chip:hover{border-color:#94A3B8;color:#0F1E3C}
  .qspec-chip.on{background:#0F1E3C;border-color:#0F1E3C;color:#fff;font-weight:600}
  .qspec-note{margin-top:14px;padding-top:12px;border-top:1px solid #E2E8F0;font-size:12px;line-height:1.6;color:#64748B}
  .quote-result{background:linear-gradient(135deg,#0F1E3C,#1A3260);border-radius:10px;padding:16px 20px;margin-top:16px}
  .quote-result-label{font-size:11px;font-weight:700;color:#06B6D4;letter-spacing:0.5px;margin-bottom:8px}
  .quote-result-price{font-family:'DM Sans',sans-serif;font-size:28px;font-weight:700;color:#fff;margin-bottom:4px}
  .quote-result-saving{font-size:13px;color:#86EFAC;font-weight:600}

  /* DEMO MODAL */
  .demo-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.2s ease}
  .demo-box{background:#0a0f1e;border:1px solid rgba(255,255,255,0.1);border-radius:20px;width:100%;max-width:860px;max-height:90vh;overflow:hidden;animation:slideUp 0.3s ease}
  .demo-topbar{background:#0F1E3C;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.08)}
  .demo-dots{display:flex;gap:6px}
  .demo-dot{width:12px;height:12px;border-radius:50%}
  .demo-title-bar{font-family:'DM Sans',sans-serif;font-size:13px;color:rgba(255,255,255,0.5)}
  .demo-body{padding:0;min-height:420px;position:relative;overflow:hidden}
  .demo-screen{padding:32px;min-height:420px;display:flex;flex-direction:column}
  .demo-step-nav{display:flex;gap:8px;padding:16px 32px;background:rgba(255,255,255,0.03);border-top:1px solid rgba(255,255,255,0.06);justify-content:space-between;align-items:center}
  .demo-step-dots{display:flex;gap:8px}
  .demo-step-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.2);transition:all 0.2s}
  .demo-step-dot.active{background:#06B6D4;width:24px;border-radius:4px}

  /* MODALS */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.2s ease}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .modal-box{background:#fff;border-radius:20px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,0.3);animation:slideUp 0.3s ease}
  @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
  .modal-header{padding:28px 28px 0;display:flex;align-items:center;justify-content:space-between}
  .modal-header h2{font-size:22px;font-weight:700;color:#0F1E3C}
  .modal-close{background:none;border:none;cursor:pointer;color:#94A3B8;padding:4px;border-radius:6px;transition:all 0.2s}
  .modal-close:hover{color:#1E293B;background:#F1F5F9}
  .modal-body{padding:24px 28px 28px}
  .modal-body .form-field label{color:#475569}
  .modal-body .form-field input,.modal-body .form-field textarea,.modal-body .form-field select{background:#F8FAFC;border-color:#E2E8F0;color:#1E293B}
  .modal-body .form-field input:focus,.modal-body .form-field textarea:focus,.modal-body .form-field select:focus{border-color:#2563EB}
  .modal-body .form-field select option{background:#fff;color:#1E293B}
  .success-banner{background:rgba(15,150,80,0.08);border:1px solid rgba(15,150,80,0.2);border-radius:10px;padding:16px 20px;color:#0F9650;font-size:14px;font-weight:600;text-align:center}

  /* FORMS */
  /* 필수 입력 표시 · 오류 상태 */
  .req-mark{color:#DC2626;font-weight:700;margin-left:3px}
  .field-err-msg{display:block;font-size:12px;color:#DC2626;line-height:1.5;margin-top:5px}
  .form-field input.err,.form-field textarea.err,.form-field select.err{border-color:#DC2626!important;background:#FEF2F2!important}
  .form-field input.err:focus,.form-field textarea.err:focus{box-shadow:0 0 0 3px rgba(220,38,38,.12)!important}
  .form-hint{font-size:12.5px;color:#64748B;line-height:1.6;margin-bottom:14px}
  .form-hint .req-mark{margin-left:0;margin-right:3px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
  .form-field{display:flex;flex-direction:column;gap:6px}
  .form-field label{font-size:13px;font-weight:600;color:#475569}
  .form-field input,.form-field textarea,.form-field select{padding:12px 14px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;color:#1E293B;font-size:14px;font-family:inherit;transition:border-color 0.2s;outline:none}
  .form-field input::placeholder,.form-field textarea::placeholder{color:#94A3B8}
  .form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:#2563EB}
  .form-field textarea{resize:vertical;min-height:100px}

  /* CUSTOM */
  .custom-section{background:linear-gradient(135deg,#1A3260,#0F1E3C)}
  .custom-section .section-title{color:#fff}
  .custom-section .section-sub{color:rgba(255,255,255,0.6)}
  .custom-form{max-width:640px;margin:0 auto}
  .custom-section .form-field label{color:rgba(255,255,255,0.7)}
  .custom-section .form-field input{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.15);color:#fff}
  .custom-section .form-field input::placeholder{color:rgba(255,255,255,0.3)}
  .custom-section .form-field input:focus{border-color:#06B6D4}

  /* CONTACT */
  .contact-section{background:#fff}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .contact-info-title{font-size:28px;font-weight:700;color:#0F1E3C;margin-bottom:16px}
  .contact-info-sub{font-size:15px;color:#64748B;line-height:1.7;margin-bottom:32px}
  .contact-detail{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
  .contact-detail-icon{width:36px;height:36px;background:rgba(37,99,235,0.08);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
  .contact-detail-text{font-size:14px;color:#475569;line-height:1.6}
  .contact-form{background:#F8FAFC;border-radius:16px;padding:36px}

  /* CHATBOT */
  .chat-btn{position:fixed;bottom:28px;right:28px;z-index:150;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#06B6D4);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px rgba(37,99,235,0.4);transition:all 0.2s}
  .chat-btn:hover{transform:scale(1.08)}
  .chat-window{position:fixed;bottom:96px;right:28px;z-index:149;width:360px;background:#fff;border-radius:16px;box-shadow:0 16px 64px rgba(0,0,0,0.2);display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.3s ease;height:min(560px,72dvh);max-height:520px}
  .chat-header{background:linear-gradient(135deg,#0F1E3C,#1A3260);padding:16px 20px;display:flex;align-items:center;gap:12px}
  .chat-header-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#06B6D4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px}
  .chat-header-info h4{font-size:14px;font-weight:700;color:#fff}
  .chat-header-info span{font-size:11px;color:#06B6D4;display:flex;align-items:center;gap:4px}
  .chat-header-info span::before{content:'';width:6px;height:6px;border-radius:50%;background:#06B6D4}
  .chat-close-btn{margin-left:auto;background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;padding:4px;border-radius:4px}
  .chat-messages{flex:1 1 0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:0}
  .chat-msg{max-width:80%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.55}
  .chat-msg.bot{background:#F1F5F9;color:#1E293B;border-radius:4px 12px 12px 12px;align-self:flex-start}
  .chat-msg.user{background:#2563EB;color:#fff;border-radius:12px 4px 12px 12px;align-self:flex-end}
  .chat-suggestion{background:rgba(37,99,235,0.08);border:1px solid rgba(37,99,235,0.2);border-radius:8px;padding:8px 12px;font-size:12px;color:#2563EB;font-weight:600;cursor:pointer;transition:all 0.2s;margin-top:6px;text-align:left;width:100%;font-family:inherit}
  .chat-suggestion:hover{background:rgba(37,99,235,0.15)}
  /* 상담 전환 카드 */
  .chat-suggestion.talk{display:flex;align-items:center;justify-content:center;gap:7px;background:#0F1E3C;border-color:#0F1E3C;color:#fff;margin-top:4px}
  .chat-suggestion.talk:hover{background:#13294F}
  .chat-talk-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 12px 10px;padding:11px 12px;border-radius:9px;
    border:1px solid #E2E8F0;background:#fff;color:#0F1E3C;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .18s}
  .chat-talk-btn:hover{border-color:#2563EB;color:#2563EB}
  .chat-handoff{margin:2px 0 0;padding:15px 16px;flex:none;border-radius:12px;background:#F8FAFC;border:1px solid #E2E8F0}
  .ch-t{font-size:14px;font-weight:700;color:#0F1E3C}
  .ch-d{font-size:12.5px;color:#64748B;line-height:1.6;margin-top:5px}
  .ch-off{font-size:11.5px;color:#B45309;background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;padding:8px 10px;margin-top:10px;line-height:1.55}
  .ch-kakao{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:13px 14px;border-radius:10px;
    background:#FEE500;color:#191600;font-size:14px;font-weight:700;text-decoration:none;min-height:46px;transition:filter .18s}
  .ch-kakao:hover{filter:brightness(.96);color:#191600}
  .ch-kakao.off{background:#F1F5F9;color:#94A3B8;border:1px dashed #CBD5E1;font-size:12.5px;cursor:not-allowed}
  .ch-alt{display:flex;gap:7px;margin-top:9px}
  .ch-alt button{flex:1;padding:10px 8px;border-radius:9px;border:1px solid #E2E8F0;background:#fff;color:#475569;
    font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .18s;min-height:40px}
  .ch-alt button:hover{border-color:#94A3B8;color:#0F1E3C}
  @media(max-width:640px){
    .chat-window{width:calc(100vw - 16px);right:8px;height:78dvh;max-height:78dvh}
    .ch-kakao{min-height:52px;font-size:15px}
    .ch-alt button{min-height:44px}
  }
  .chat-input-area{padding:12px;border-top:1px solid #E2E8F0;display:flex;gap:8px}
  .chat-input{flex:1;padding:10px 14px;border:1px solid #E2E8F0;border-radius:8px;font-size:13px;font-family:inherit;outline:none;color:#1E293B}
  .chat-input:focus{border-color:#2563EB}
  .chat-send{padding:10px 16px;background:#2563EB;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background 0.2s}
  .chat-send:hover{background:#1D4ED8}

  /* ICON SYSTEM */
  .ico-frame{display:inline-flex;align-items:center;justify-content:center;border-radius:26%;flex:none;
    border:1px solid rgba(103,232,249,0.28);background:linear-gradient(145deg,rgba(103,232,249,0.10),rgba(37,99,235,0.05))}
  .ico-frame svg{display:block}

  /* FOOTER */
  .footer{background:#070F20;padding:52px 24px calc(88px + env(safe-area-inset-bottom))}
  .footer-inner{max-width:1180px;margin:0 auto}

  /* 01 정책 링크 */
  .ft-links{display:flex;flex-wrap:wrap;gap:6px 26px;margin-bottom:20px}
  .ft-link{font-size:13.5px;font-weight:700;color:#67E8F9;cursor:pointer;transition:color .18s}
  .ft-link:hover{color:#A5F3FC}

  /* 02 로고 + 회사명 */
  .ft-brand{display:flex;align-items:center;gap:13px;margin-bottom:14px}
  .ft-cname{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.4px}

  /* 03 주소 */
  .ft-addr{font-size:14px;color:rgba(255,255,255,.62);line-height:1.5;margin-bottom:7px}

  /* 04 연락처 */
  .ft-contact{display:flex;flex-wrap:wrap;gap:3px 22px;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.55}
  .ft-contact b{color:#67E8F9;font-weight:700;margin-right:5px;letter-spacing:.3px}
  .ft-contact a{color:inherit;text-decoration:none}
  .ft-contact a:hover{color:#fff}

  /* 05 저작권 */
  .ft-copy{font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.5;margin-top:16px}

  @media(max-width:640px){
    .footer{padding:40px 20px calc(84px + env(safe-area-inset-bottom))}
    .ft-links{gap:6px 18px;margin-bottom:16px}
    .ft-cname{font-size:18px}
    .ft-addr{font-size:13.5px}
    .ft-contact{flex-direction:column;gap:2px}
    .ft-copy{margin-top:14px}
  }

  /* SOL DETAIL */
  .sol-detail-hero{background:#0F1E3C;padding:120px 24px 80px;position:relative;overflow:hidden}
  .sol-detail-hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
  .sol-hero-copy{min-width:0}
  .sol-hero-visual{width:340px;height:300px;position:relative;animation:shvIn .9s cubic-bezier(.2,.7,.3,1) both}
  .sol-hero-visual svg{width:100%;height:100%;overflow:visible}
  .sol-hero-glow{position:absolute;inset:-40px;border-radius:50%;filter:blur(60px);opacity:.28;animation:shvGlow 5s ease-in-out infinite}
  .shv-float{animation:shvFloat 6s ease-in-out infinite}
  .shv-orbit{transform-origin:center;animation:shvOrbit 18s linear infinite}
  .shv-orbit2{transform-origin:center;animation:shvOrbit 26s linear infinite reverse}
  .shv-pulse{transform-origin:center;animation:shvPulse 2.6s ease-in-out infinite}
  .shv-dash{stroke-dasharray:6 10;animation:shvDash 2.2s linear infinite}
  .shv-ring{transform-origin:center;animation:shvRing 3.2s ease-out infinite}
  .shv-blink{animation:shvBlink 2.4s ease-in-out infinite}
  @keyframes shvIn{from{opacity:0;transform:translateY(26px) scale(.92)}to{opacity:1;transform:none}}
  @keyframes shvGlow{0%,100%{opacity:.2;transform:scale(.95)}50%{opacity:.38;transform:scale(1.06)}}
  @keyframes shvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes shvOrbit{to{transform:rotate(360deg)}}
  @keyframes shvPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.07);opacity:.85}}
  @keyframes shvDash{to{stroke-dashoffset:-32}}
  @keyframes shvRing{0%{transform:scale(.55);opacity:.75}100%{transform:scale(1.25);opacity:0}}
  @keyframes shvBlink{0%,100%{opacity:.25}50%{opacity:1}}
  @media(max-width:960px){.sol-detail-hero-inner{grid-template-columns:1fr}.sol-hero-visual{display:none}}
  @media(prefers-reduced-motion:reduce){.sol-hero-visual,.sol-hero-visual *{animation:none!important}}
  .prod-hero-visual{position:absolute;right:0;top:110px;pointer-events:none;z-index:0}
  @media(max-width:1200px){.prod-hero-visual{display:none}}
  .sol-back{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,0.5);font-size:14px;cursor:pointer;margin-bottom:32px;transition:color 0.2s}
  .sol-back:hover{color:#fff}
  .sol-back svg{transform:rotate(180deg)}
  .sol-detail-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:6px 14px;border-radius:20px;margin-bottom:20px}
  .sol-detail-title{font-size:clamp(36px,4vw,52px);font-weight:700;color:#fff;margin-bottom:16px}
  .sol-detail-sub{font-size:18px;color:rgba(255,255,255,0.65);max-width:600px;line-height:1.65}
  .sol-detail-section{padding:80px 24px}
  .sol-detail-section.alt{background:#F8FAFC}
  .sol-detail-inner{max-width:1280px;margin:0 auto}
  .sol-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .sol-why-card{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:28px}
  .sol-why-num{font-family:'DM Sans',sans-serif;font-size:40px;font-weight:700;color:#E2E8F0;margin-bottom:12px}
  .sol-why-title{font-size:16px;font-weight:700;color:#0F1E3C;margin-bottom:8px}
  .sol-why-desc{font-size:13px;color:#64748B;line-height:1.65}
  .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .feature-card{border-radius:12px;padding:24px;text-align:center}
  .feature-icon{font-size:32px;margin-bottom:12px}
  .feature-title{font-size:15px;font-weight:700;color:#0F1E3C;margin-bottom:6px}
  .feature-desc{font-size:13px;color:#64748B;line-height:1.6}
  .faq-item{border:1px solid #E2E8F0;border-radius:10px;overflow:hidden;margin-bottom:12px}
  .faq-question{padding:18px 20px;background:#fff;font-size:15px;font-weight:600;color:#0F1E3C;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background 0.15s}
  .faq-question:hover{background:#F8FAFC}
  .faq-answer{padding:16px 20px;background:#F8FAFC;font-size:14px;color:#64748B;line-height:1.7;border-top:1px solid #E2E8F0}

  /* ABOUT */
  .about-hero{background:linear-gradient(135deg,#0a1628,#0F1E3C);padding:140px 24px 100px}
  .about-content{max-width:1280px;margin:0 auto}
  .timeline{position:relative;padding-left:32px}
  .timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#2563EB,#06B6D4)}
  .timeline-item{position:relative;margin-bottom:32px}
  .timeline-dot{position:absolute;left:-37px;top:4px;width:12px;height:12px;border-radius:50%;background:#2563EB;border:2px solid #fff;box-shadow:0 0 0 3px rgba(37,99,235,0.2)}
  .timeline-year{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:#2563EB;margin-bottom:4px}
  .timeline-text{font-size:15px;color:#1E293B;font-weight:600;margin-bottom:4px}
  .timeline-sub{font-size:13px;color:#64748B}

  /* ADMIN */
  .admin-layout{display:flex;min-height:100vh}
  .admin-sidebar{width:240px;background:#0F1E3C;flex-shrink:0;display:flex;flex-direction:column;padding:24px 0}
  .admin-logo{padding:0 20px 24px;font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,0.1)}
  .admin-logo span{color:#06B6D4}
  .admin-nav-item{padding:12px 20px;color:rgba(255,255,255,0.6);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:10px}
  .admin-nav-item:hover,.admin-nav-item.active{background:rgba(255,255,255,0.07);color:#fff}
  .admin-nav-item.active{border-left:3px solid #06B6D4}
  .admin-main{flex:1;background:#F8FAFC;overflow-y:auto}
  .admin-topbar{background:#fff;padding:16px 32px;border-bottom:1px solid #E2E8F0;display:flex;align-items:center;justify-content:space-between}
  .admin-title{font-size:20px;font-weight:700;color:#0F1E3C}
  .admin-body{padding:32px}
  .admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}
  .admin-stat-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:24px}
  .admin-stat-num{font-family:'DM Sans',sans-serif;font-size:32px;font-weight:700;color:#0F1E3C}
  .admin-stat-label{font-size:13px;color:#94A3B8;margin-top:4px}
  .admin-stat-change{font-size:12px;font-weight:600;color:#0F9650;margin-top:8px}
  .admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #E2E8F0}
  .admin-table th{background:#F8FAFC;padding:12px 20px;text-align:left;font-size:12px;font-weight:700;color:#94A3B8;letter-spacing:0.5px;text-transform:uppercase}
  .admin-table td{padding:14px 20px;font-size:14px;color:#475569;border-top:1px solid #F1F5F9}
  .admin-badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
  .admin-badge.ai{background:rgba(124,58,237,0.1);color:#7C3AED}
  .admin-badge.kakao{background:#FEF3C7;color:#92400E}
  .admin-badge.new{background:rgba(37,99,235,0.1);color:#2563EB}
  .admin-badge.done{background:rgba(15,150,80,0.1);color:#0F9650}
  .admin-badge.pending{background:rgba(234,179,8,0.1);color:#D97706}
  .admin-form-section{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:24px;margin-bottom:24px}
  .admin-form-title{font-size:16px;font-weight:700;color:#0F1E3C;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #F1F5F9}
  .upload-zone{border:2px dashed #E2E8F0;border-radius:10px;padding:32px;text-align:center;cursor:pointer;transition:all 0.2s}
  .upload-zone:hover{border-color:#2563EB;background:rgba(37,99,235,0.02)}
  .upload-zone input{display:none}
  .upload-text{font-size:14px;color:#64748B;margin-top:10px}
  .ai-result{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;padding:16px;margin-top:16px;font-size:13px;color:#475569;line-height:1.7;white-space:pre-wrap}

  /* RESPONSIVE */
  @media(max-width:1024px){
    .values-grid,.solutions-grid,.ops-steps,.features-grid{grid-template-columns:repeat(2,1fr)}
    .hero-content{grid-template-columns:1fr}
    .hero-visual{display:none}
    .contact-grid{grid-template-columns:1fr}
    .admin-stats{grid-template-columns:repeat(2,1fr)}
    .ref-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:960px){
    .nav-links,.nav-right{display:none}
    .nav-mobile-btn{display:block;margin-left:auto}
    .nav-mobile-menu.open{display:flex;flex-direction:column;background:#0F1E3C;padding:16px;gap:4px}
    .nav-mobile-item{padding:12px 16px;color:rgba(255,255,255,0.8);font-size:15px;font-weight:500;cursor:pointer;border-radius:8px;transition:all 0.2s}
    .nav-mobile-item:hover{background:rgba(255,255,255,0.07);color:#fff}
    .values-grid,.solutions-grid,.ops-steps,.sol-why-grid,.features-grid,.ref-grid{grid-template-columns:1fr}
    .hero-stats{gap:24px;flex-wrap:wrap}
    .news-grid{grid-template-columns:1fr}
    /* 필수 입력 표시 · 오류 상태 */
  .req-mark{color:#DC2626;font-weight:700;margin-left:3px}
  .field-err-msg{display:block;font-size:12px;color:#DC2626;line-height:1.5;margin-top:5px}
  .form-field input.err,.form-field textarea.err,.form-field select.err{border-color:#DC2626!important;background:#FEF2F2!important}
  .form-field input.err:focus,.form-field textarea.err:focus{box-shadow:0 0 0 3px rgba(220,38,38,.12)!important}
  .form-hint{font-size:12.5px;color:#64748B;line-height:1.6;margin-bottom:14px}
  .form-hint .req-mark{margin-left:0;margin-right:3px}
  .form-grid{grid-template-columns:1fr}
    .admin-sidebar{width:60px}
    .admin-logo,.admin-nav-text{display:none}
    .chat-window{width:calc(100vw - 40px);right:20px}
    .ops-steps::before{display:none}

    .price-options{grid-template-columns:1fr}
  }

  /* ════════ RESPONSIVE HARDENING (global, non-destructive) ════════ */
  html,body{max-width:100%;overflow-x:hidden}
  *{min-width:0}
  img,video,canvas{max-width:100%;height:auto}
  svg{max-width:100%}
  h1,h2,h3,p,li,td,th,div,span,button,a{overflow-wrap:break-word}
  :is(h1,h2,h3){word-break:keep-all;text-wrap:pretty}
  table{width:100%}
  div:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  button,a[role="button"]{min-height:40px}

  /* ── TABLET: 2-up grids ── */
  @media(max-width:1024px){
    [style*="grid-template-columns"]:not(.nav-sub-grid):not(.keep-cols){grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important}
    .section,section[style*="padding"]{padding-left:24px!important;padding-right:24px!important}
  }

  /* ── MOBILE: single column, tighter rhythm ── */
  @media(max-width:960px){
    [style*="grid-template-columns"]:not(.nav-sub-grid):not(.keep-cols){grid-template-columns:1fr!important}
    [style*="display: flex"]{flex-wrap:wrap}
    .section{padding:72px 18px!important}
    section[style*="padding"]{padding-top:72px!important;padding-bottom:72px!important;padding-left:18px!important;padding-right:18px!important}
    div[style*="padding: 80px 24px"],div[style*="padding:80px 24px"]{padding:64px 18px!important}
    h1,[style*="clamp(36px"],[style*="clamp(40px"],[style*="clamp(34px"]{font-size:clamp(28px,7.4vw,38px)!important;letter-spacing:-0.6px!important}
    h2,[style*="clamp(28px"],[style*="clamp(30px"],[style*="clamp(32px"]{font-size:clamp(22px,5.6vw,30px)!important}
    button,a[role="button"]{min-height:44px}
    /* buttons full width in CTA rows */
    [style*="display: flex"] > button,[style*="display: flex"] > a[href]{flex:1 1 100%!important;justify-content:center!important;text-align:center}
    /* tables scroll instead of squeeze (조달 정보 표는 좁은 폭에서도 맞춰 들어감) */
    table:not(.g2b-table){min-width:540px;font-size:12.5px}
    table:not(.g2b-table) th,table:not(.g2b-table) td{padding:10px 12px!important;white-space:nowrap}
    .g2b-table{min-width:0;font-size:11.5px}
    .g2b-table th,.g2b-table td{padding:5px 7px;white-space:normal}
    .g2b-id{white-space:nowrap}
    /* inline-styled modal overlays (detail pages) */
    div[style*="position: fixed"][style*="inset"]{padding:12px!important;align-items:flex-start!important;padding-top:16px!important}
    div[style*="position: fixed"][style*="inset"] > div{max-height:88dvh!important;overflow-y:auto!important;width:100%!important}
    .modal-overlay{padding:12px;align-items:flex-start;padding-top:16px}
    .modal-box{max-height:88dvh}
    .modal-header{padding:20px 20px 0}
    .modal-body{padding:18px 20px 24px}
    /* timelines / pipelines vertical */
    .timeline{padding-left:26px}
    .timeline-dot{left:-31px}
    /* decorative absolute blobs must not cover content */
    [style*="border-radius: 50%"][style*="position: absolute"][style*="filter"]{opacity:.55!important}
    /* hero visuals de-emphasised */
    .hero-visual{display:none}
    .hero-stats{gap:20px}
    /* FAQ answer indent */
    [style*="padding: 0 24px 22px 60px"]{padding:0 18px 20px 18px!important}
    [style*="padding: 0 24px 22px 56px"]{padding:0 18px 20px 18px!important}

    /* ── 모바일 콘텐츠 다이어트 ──────────────────────────────────────
       PC에서 읽히는 보조 설명을 모바일에서는 접는다. 핵심 흐름만 남김:
       무엇을 하는 회사인가 → 어떤 솔루션이 있나 → 문의             */
    .section{padding:52px 18px!important}
    section[style*="padding"]{padding-top:52px!important;padding-bottom:52px!important}
    .section-header{margin-bottom:24px!important}
    .section-sub{font-size:14px;line-height:1.65;
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .hero{padding-top:96px!important;padding-bottom:56px!important}
    .hero-sub{font-size:15px;line-height:1.7;margin-bottom:26px;
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .hero-ctas{gap:9px}
    /* 제품 상세 — 긴 보조 문단·장식 카피 접기 */
    .sol-detail-hero{padding:96px 20px 52px!important}
    /* 솔루션 목록 — 카드 설명 생략, 제목+태그만 (2열) */
    .solutions-grid{grid-template-columns:1fr 1fr!important;gap:10px}
    .sol-card{padding:16px 15px}
    .sol-desc{display:none}
    .sol-icon{width:38px;height:38px;border-radius:9px;margin-bottom:12px}
    .sol-title{font-size:15px;margin-bottom:2px}
    .sol-eng{font-size:10.5px;margin-bottom:9px}
    .sol-tags{gap:4px}
    .sol-tag{font-size:10px;padding:3px 8px}
    .sol-arrow{display:none}

    /* 제품 상세 — 히어로 보조 설명과 카드 설명을 줄인다 */
    .sol-detail-hero .sol-desc,.value-desc,.feature-desc{
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    /* 제품 페이지의 긴 리드 문단 (인라인 스타일) */
    p[style*="font-size: 17"],p[style*="font-size: 18"],p[style*="font-size:17"],p[style*="font-size:18"]{
      font-size:14.5px!important;line-height:1.7!important}
  }

  /* ── SMALL MOBILE ── */
  @media(max-width:380px){
    .section{padding:60px 16px!important}
    .hero-stat-num{font-size:26px}
    table{min-width:480px}
  }

  /* ── FLOATING UI: safe-area + no overlap ── */
  .floating-cta{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .chat-btn{bottom:calc(28px + env(safe-area-inset-bottom))}
  .chat-window{bottom:calc(96px + env(safe-area-inset-bottom))}
  body.modal-open .floating-cta,body.nav-open .floating-cta,body.modal-open .chat-btn{display:none!important}
  @media(max-width:960px){
    .floating-cta{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
    .floating-cta button.btn-primary{width:100%;justify-content:center;font-size:13.5px!important;padding:12px 16px!important}
    .chat-btn{width:50px;height:50px;bottom:calc(76px + env(safe-area-inset-bottom));right:16px}
    .chat-window{width:calc(100vw - 24px);right:12px;height:70dvh;max-height:70dvh;bottom:calc(136px + env(safe-area-inset-bottom))}
  }

  /* ── MOBILE NAV: scrollable, accordion-friendly ── */
  @media(max-width:960px){
    .nav-mobile-menu.open{max-height:calc(100dvh - 68px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
    .nav-mobile-group-title{padding:12px 16px 6px;font-size:11px;font-weight:700;letter-spacing:1.4px;color:rgba(255,255,255,.4);text-transform:uppercase}
    .nav-mobile-item{min-height:44px;display:flex;align-items:center}
    .nav-mobile-item.sub{padding-left:28px;font-size:14px;color:rgba(255,255,255,.66)}
  }

  /* ── ADMIN on small screens ── */
  @media(max-width:960px){
    .admin-layout{flex-direction:column}
    .admin-sidebar{width:100%!important;flex-direction:row;overflow-x:auto;padding:10px 8px;gap:4px}
    .admin-sidebar .admin-logo{display:none}
    .admin-nav-item{white-space:nowrap;border-left:none!important;border-radius:8px;padding:10px 12px}
    .admin-nav-item .admin-nav-text{display:inline}
    .admin-topbar{padding:14px 18px}
    .admin-body{padding:18px}
    .admin-table{display:block}
  }

/* ══════ 로고 — 스윕 라이트 + 가운데 S 회전 ══════ */
.logo3es-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(100deg,transparent 34%,rgba(103,232,249,.85) 46%,rgba(255,255,255,.95) 50%,rgba(167,139,250,.8) 54%,transparent 66%);
  background-size:260% 100%;background-position:150% 0;
  animation:logoSweep 4.6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes logoSweep{0%{background-position:150% 0}55%{background-position:-60% 0}100%{background-position:-60% 0}}
.logo3es-mark:hover .logo3es-sheen{animation-duration:1.5s}
@media (prefers-reduced-motion:reduce){.logo3es-sheen{animation:none;opacity:0}}

.logo3es:hover .logo3es-mid{transform:rotate(-14deg) scale(1.04)}
@media (hover:none){.logo3es-mid{transform:none!important}}
@media (prefers-reduced-motion:reduce){.logo3es-mid{transition:none!important;transform:none!important}}
`;


Object.assign(window, {
  IconShield, IconMail, IconNetwork, IconAI, IconChat, IconClose,
  IconArrow, IconMenu, IconCheck, IconPlay, IconUpload, IconTrend,
  solIcons, useScrollReveal, globalStyles
});