:root{
  --bg:#0b0c10; --fg:#e5e7eb; --muted:#94a3b8;
  --card:#0f1117; --line:#1f2330; --brand:#6aa6ff; --ok:#22c55e;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f8fa; --fg:#0f172a; --muted:#6c757d; --card:#fff; --line:#e9ecef; --brand:#2d8cf0 }
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}
a{ color:var(--brand); text-decoration:none }
img{ max-width:100%; height:auto; display:block }
.container{ max-width:1100px; margin-inline:auto; padding:0 16px }
.muted{ color:var(--muted) }

.site-header{
  position:sticky; top:0; z-index:20; display:flex; gap:16px;
  align-items:center; justify-content:space-between; padding:10px 16px;
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom:1px solid var(--line);
}
.site-header[data-scrolled="1"]{ background:color-mix(in oklab, var(--bg) 92%, #000 8%) }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px }
.nav__toggle{ display:none }
.nav__list{ display:flex; gap:12px; list-style:none; padding:0; margin:0 }
.nav__list a{ padding:8px 10px; border-radius:10px }
.nav__list a.is-active{ background:color-mix(in oklab, var(--brand) 20%, var(--card)); color:#fff }
.nav__list a:focus-visible{ outline:2px solid color-mix(in oklab, var(--brand), #fff 30%) }

@media (max-width:740px){
  .nav__toggle{ display:inline-block; background:none; color:var(--fg); border:1px solid var(--line); padding:8px 10px; border-radius:10px }
  .nav__list{ position:absolute; right:16px; top:56px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px; display:none; flex-direction:column; min-width:180px }
  .nav__list[data-open="1"]{ display:flex }
}

.section{ padding:72px 0; border-bottom:1px solid var(--line) }
.hero{ padding-top:96px; text-align:center }
.hero__img{ width:100%; height:320px; object-fit:cover; border-radius:18px; border:1px solid var(--line); margin-bottom:16px; background:#111 }
.hero__title{ font-size:clamp(28px,4vw,48px); line-height:1.2; margin:0 0 10px; font-weight:900 }
.hero__subtitle{ color:var(--muted); margin:0 0 18px }
.hero__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border:1px solid var(--line); border-radius:12px; color:var(--fg); background:transparent; cursor:pointer }
.btn--primary{ background:var(--brand); border-color:var(--brand); color:#fff }
.btn:focus-visible{ outline:2px solid color-mix(in oklab, var(--brand), #fff 30%); outline-offset:2px }

.grid-2{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr } }

.about__card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px }
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{ background:color-mix(in oklab, var(--brand) 20%, var(--card)); color:var(--fg); border:1px solid var(--line); padding:4px 10px; border-radius:999px; font-size:12px }

.cards{ display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; margin-top:16px }
.card{ grid-column:span 6; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.badge{ border:1px solid var(--line); padding:2px 8px; border-radius:999px; font-size:12px; color:var(--muted) }
.badge--ok{ color:var(--ok); border-color:color-mix(in oklab, var(--ok), #fff 50%) }
.list{ margin:8px 0 0 18px }
.ticks{ padding-left:18px }
.ticks li{ margin:6px 0 }

.cta-row{ margin-top:20px }

.form{ display:grid; gap:12px }
.form input,.form textarea{
  width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--fg)
}
.form input:focus,.form textarea:focus{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent) }

.contact__info p{ margin:.5rem 0 }

.site-footer{ padding:18px 0 }
.footer__row{ display:flex; align-items:center; justify-content:space-between }

.observe{ opacity:.001; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease }
.observe.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .observe{ transition:none; opacity:1; transform:none } }