/* The same monochrome system as the SYL apps: black, white and grey; state is carried by weight and fill, with one warm notice colour. */
:root {
  --page:#eeeeef; --surface:#ffffff; --surface-sunk:#f6f6f7;
  --ink:#111112; --on-ink:#fafafa;
  --border:#e6e6e8; --border-strong:#d3d3d6;
  --text:#131314; --text-muted:#6e6e73; --text-faint:#9b9ba1;
  --ok:#1f9d55; --soon:#b8860b;
  --r-md:12px; --r-lg:18px; --r-xl:26px; --r-full:999px;
  --shadow-card:0 1px 2px rgba(17,17,18,.04), 0 8px 24px rgba(17,17,18,.05);
  --shadow-lift:0 2px 4px rgba(17,17,18,.06), 0 16px 40px rgba(17,17,18,.10);
  --font:ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page:#0a0a0b; --surface:#141416; --surface-sunk:#1b1b1e;
    --ink:#f4f4f5; --on-ink:#141416;
    --border:#26262a; --border-strong:#35353b;
    --text:#f2f2f4; --text-muted:#9a9aa2; --text-faint:#65656d;
    --shadow-card:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 16px 40px rgba(0,0,0,.55);
    color-scheme: dark;
  }
  .l-light { display:none !important; } .l-dark { display:block !important; }
}
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:anywhere; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px 56px; }

.top { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.logo { display:block; height:28px; width:auto; } .l-dark { display:none; }
.pillbtn { font:inherit; font-size:12.5px; font-weight:600; background:var(--surface); color:var(--text); border:0; border-radius:var(--r-full);
  padding:7px 14px; cursor:pointer; box-shadow:var(--shadow-card); }
.pillbtn:hover { box-shadow:var(--shadow-lift); }

.hero { padding:clamp(28px, 7vw, 76px) 0 clamp(22px, 4vw, 40px); max-width:680px; }
.eyebrow { margin:0 0 10px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
h1 { margin:0; font-size:clamp(28px, 5vw, 46px); line-height:1.12; letter-spacing:-.035em; font-weight:650; }
.lede { margin:14px 0 0; color:var(--text-muted); font-size:clamp(15px, 2vw, 17px); max-width:560px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.card { position:relative; display:flex; flex-direction:column; gap:14px; min-height:188px; padding:22px; background:var(--surface);
  border-radius:var(--r-xl); box-shadow:var(--shadow-card); transition:transform .18s ease, box-shadow .18s ease; outline-offset:3px; }
a.card:hover, a.card:focus-visible { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.card .ic { width:46px; height:46px; border-radius:14px; background:var(--ink); color:var(--on-ink); display:flex; align-items:center; justify-content:center; }
.card .ic svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card h2 { margin:0; font-size:18px; letter-spacing:-.02em; font-weight:650; }
.card p { margin:4px 0 0; color:var(--text-muted); font-size:14px; line-height:1.5; }
.card .go { margin-top:auto; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.card .go span { transition:transform .18s ease; } a.card:hover .go span { transform:translateX(4px); }
.badge { position:absolute; top:18px; right:18px; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--text-muted);
  background:var(--surface-sunk); padding:4px 10px; border-radius:var(--r-full); }
.badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--ok); }
.card.soon { box-shadow:none; background:transparent; outline:1.5px dashed var(--border-strong); outline-offset:-1.5px; }
.card.soon .ic { background:var(--surface-sunk); color:var(--text-faint); }
.card.soon h2 { color:var(--text-muted); }
.card.soon .badge::before { background:var(--soon); }
.card.soon .go { color:var(--text-faint); font-weight:500; }

.foot { margin:40px 0 0; text-align:center; color:var(--text-faint); font-size:12.5px; }
@media (max-width:560px) { .wrap { padding:0 16px 40px; } .card { min-height:0; } }
@media (prefers-reduced-motion: reduce) { .card, .card .go span { transition:none; } a.card:hover { transform:none; } }