:root { --ink:#111318; --muted:#707680; --paper:#f5f6f8; --surface:#fff; --line:#e2e5ea; --accent:#c9b27a; --max:1160px; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { min-height:100vh; background:var(--paper); color:var(--ink); font-family:"Paperlogy","Noto Sans KR",system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(calc(100% - 48px),var(--max)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(245,246,248,.92); backdrop-filter:blur(14px); }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.04em; }
.brand img { display:block; width:190px; height:auto; max-width:100%; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--ink); color:#fff; font-size:12px; }
.language { display:flex; align-items:center; gap:8px; padding-left:16px; border-left:1px solid var(--line); color:var(--muted); font-size:13px; }
.language a { display:inline-flex; min-height:32px; align-items:center; transition:color .2s ease; }
.language a:hover, .language a:focus-visible { color:var(--ink); }
.language a[aria-current="page"] { color:var(--ink); font-weight:800; }
.hero { padding:112px 0 130px; }
.eyebrow { margin-bottom:18px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow::before { content:""; display:inline-block; width:7px; height:7px; margin:0 9px 1px 0; border-radius:50%; background:var(--ink); }
h1,h2 { line-height:1.1; letter-spacing:-.06em; }
h1 { max-width:900px; font-size:clamp(48px,8vw,92px); font-weight:800; }
h1 em,h2 em { color:#8d7746; font-style:normal; }
.hero-copy { max-width:690px; margin-top:28px; color:var(--muted); font-size:clamp(18px,2.4vw,24px); letter-spacing:-.025em; }
.section { padding:110px 0; }
.band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#eef2f1; }
.section-heading { margin-bottom:30px; }
h2 { font-size:clamp(34px,5vw,62px); }
.lead { max-width:720px; color:#4f5661; font-size:18px; letter-spacing:-.02em; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.feature-card { min-height:300px; padding:25px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 14px 40px rgba(17,19,24,.04); }
.card-number { color:#9da3ad; font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.feature-card h2 { margin-top:auto; font-size:30px; }
.feature-card p { margin-top:15px; color:var(--muted); font-size:15px; }
.radar { background:#151922; color:#fff; }
.radar .eyebrow,.radar .muted { color:#aeb4c0; }
.radar-grid,.status-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.radar h2 { max-width:580px; }
.radar .lead { color:#f2f3f5; }
.muted { margin-top:20px; color:var(--muted); font-size:15px; }
.plain-list { display:grid; gap:12px; margin-top:26px; padding:0; list-style:none; color:#4f5661; }
.plain-list li { padding:13px 16px; border-left:2px solid var(--accent); background:#fff; }
.note-section { padding-top:0; }
.note-box { padding:34px; border:1px solid #e4dcc7; border-radius:12px; background:#faf6eb; }
.note-box h2 { font-size:30px; }
.note-box p { max-width:760px; margin-top:14px; color:#6d6556; }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.footer-inner { min-height:120px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
@media (max-width:760px) { .card-grid,.radar-grid,.status-grid { grid-template-columns:1fr; gap:15px; } .hero { padding:78px 0 92px; } .section { padding:82px 0; } .feature-card { min-height:230px; } .radar-grid,.status-grid { gap:35px; } }
@media (max-width:430px) { .brand img { width:148px; } .wrap { width:min(calc(100% - 32px),var(--max)); } .header-inner { min-height:64px; } .language { min-height:44px; padding:0 13px; border:0; border-radius:999px; background:#eff1f2; gap:9px; } h1 { font-size:clamp(42px,14vw,64px); } .note-box { padding:24px; } .footer-inner { min-height:100px; align-items:flex-start; flex-direction:column; justify-content:center; } }

/* Article-style scroll progress across ONSEMO product introductions. */
.scroll-progress { position:absolute; left:0; right:0; bottom:-1px; z-index:1; height:2px; visibility:hidden; opacity:0; background:var(--line); pointer-events:none; }
.scroll-progress span { display:block; width:100%; height:100%; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform .12s linear; }
.scroll-progress.is-active { visibility:visible; opacity:1; }
@media (prefers-reduced-motion:reduce) { .scroll-progress span { transition:none; } }