/* Lilac Repo — brand site
   토큰 정의는 docs/brand.md 가 정본. 여기 값을 바꾸면 그쪽도 갱신할 것. */

:root{
  /* 60/30/10 */
  --ink:#1A1720;
  --off:#F6F4F8;
  --lilac:#6D4AAE;

  /* lilac ramp */
  --lilac-100:#F3EFFA;
  --lilac-300:#B79CE8;
  --lilac-700:#57398C;
  --lilac-900:#2E1E4D;

  /* neutral */
  --surface:#FFFFFF;
  --dark-surface:#252031;
  --muted:#6B6673;
  --muted-2:#8F8A99;
  --border:#E6E1EC;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans KR',system-ui,-apple-system,sans-serif;

  --pad:clamp(20px,4vw,32px);
  --wrap:1080px;
  --gap:clamp(48px,9vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--off);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3,p,dl,dd,ol{margin:0}
ol{padding:0;list-style:none}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--lilac);color:#fff;padding:12px 18px;
  font-family:var(--mono);font-size:13px;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:2px}

/* ── slash motif ───────────────────────── */
.sl{color:var(--lilac);font-weight:700}

/* ── header ────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.site-header.solid{
  background:rgba(246,244,248,.88);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--border);
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:64px}

.logo{
  font-family:var(--mono);font-weight:700;font-size:16px;
  letter-spacing:-.02em;text-decoration:none;white-space:nowrap;
}
.logo-sm{font-size:14px}

.nav{display:flex;gap:clamp(16px,3vw,28px)}
.navlink{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--muted);text-decoration:none;transition:color .18s ease;
}
.navlink:hover{color:var(--lilac)}

/* ── hero ──────────────────────────────── */
.hero{
  padding-block:clamp(72px,16vh,152px) var(--gap);
  background:
    radial-gradient(120% 90% at 88% -10%,var(--lilac-100) 0%,transparent 62%),
    var(--off);
}
.hero-in{max-width:820px}
.kicker{
  font-family:var(--mono);font-weight:700;font-size:13px;
  letter-spacing:.16em;color:var(--lilac);margin-bottom:22px;
}
.hero-title{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(40px,7.4vw,78px);
  line-height:1.1;letter-spacing:-.035em;
}
.sl-dot{color:var(--lilac);margin-left:.06em}
.hero-sub{
  margin-top:26px;font-size:clamp(15px,1.7vw,18px);
  color:var(--muted);max-width:52ch;
}

/* ── generic section ───────────────────── */
.s{padding-block:var(--gap);border-top:1px solid var(--border)}
.label{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.14em;color:var(--muted-2);margin-bottom:20px;
}
.s-title{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;
  margin-bottom:38px;
}

/* 01 name */
.meaning{
  font-size:clamp(20px,3vw,30px);font-weight:500;line-height:1.5;
  letter-spacing:-.015em;margin-bottom:46px;max-width:24ch;
}
.em{color:var(--lilac);font-family:var(--mono);font-weight:700;font-size:.82em}

.grid-2{display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:3px;padding:clamp(24px,3.4vw,34px);
}
.card-tag{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.14em;color:var(--lilac);margin-bottom:12px;
}
.card-title{font-size:20px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.card-body{color:var(--muted);font-size:15px}

/* banner */
.banner{background:var(--ink);color:var(--off);padding-block:clamp(56px,9vw,92px)}
.banner-in{text-align:center}
.banner-en{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(30px,6vw,60px);letter-spacing:-.035em;line-height:1.1;
}
.banner-ko{margin-top:14px;color:var(--lilac-300);font-size:clamp(14px,1.7vw,17px)}

/* 02 principles */
.steps{display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{
  background:var(--surface);border:1px solid var(--border);
  border-radius:3px;padding:clamp(24px,3.4vw,32px);
  border-top:2px solid var(--lilac);
}
.step-n{
  display:block;font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.14em;color:var(--lilac);margin-bottom:14px;
}
.step-t{font-size:18px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.step-b{color:var(--muted);font-size:15px}

/* 03 what's here */
.s-here{background:var(--lilac-100);border-top-color:var(--border)}
.here-lead{font-size:clamp(17px,2.2vw,21px);font-weight:500;margin-bottom:34px;max-width:40ch}
.colophon{
  border-top:1px solid var(--border);
  max-width:560px;font-family:var(--mono);font-size:14px;
}
.co-row{
  display:flex;justify-content:space-between;gap:20px;
  padding:13px 2px;border-bottom:1px solid var(--border);
}
.co-row dt{color:var(--muted);font-family:var(--sans);font-size:14px}
.co-row dd{font-weight:500}
.here-note{
  margin-top:30px;color:var(--muted);font-size:14px;
  padding-left:16px;border-left:2px solid var(--lilac);
}

/* ── footer ────────────────────────────── */
.site-footer{border-top:1px solid var(--border);padding-block:34px;background:var(--off)}
.footer-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.copy{font-family:var(--mono);font-size:12px;color:var(--muted-2);letter-spacing:.02em}
.sep{color:var(--border)}

/* ── reveal ────────────────────────────── */
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].in{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (max-width:560px){
  .nav{display:none}
  .co-row{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

@media (prefers-color-scheme:dark){
  :root{
    --off:#1A1720;
    --ink:#F6F4F8;
    --surface:#252031;
    --lilac:#B79CE8;
    --lilac-100:#231D2E;
    --muted:#A49DB0;
    --muted-2:#8F8A99;
    --border:#332B42;
  }
  .site-header.solid{background:rgba(26,23,32,.88)}
  /* 다크모드에서는 --ink/--off 가 뒤집히므로 배너 색을 고정값으로 못박는다.
     토큰을 그대로 쓰면 어두운 배경에 어두운 글자가 된다. */
  .banner{background:var(--dark-surface);color:#F6F4F8}
  .banner-en{color:#F6F4F8}
  .skip{color:#1A1720}
  .step,.card{background:var(--surface)}
}