/* ============================================================
   KRK.TEAM · Design Tokens & Base Components
   Single source of truth for color, type, layout, topbar, button, footer.

   Usage in each page <head>:
     <link rel="stylesheet" href="assets/krk-tokens.css">       (root pages)
     <link rel="stylesheet" href="../assets/krk-tokens.css">    (work/* pages)

   After linking, page-local <style> should ONLY contain page-specific
   layout. Never re-declare :root tokens, .topbar, .krk-btn, .bottom-logo.
   ============================================================ */

/* ---------- Web fonts (CDN) ---------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+KR:wght@300;400&display=swap');


/* ============================================================
   1. ROOT TOKENS
   ============================================================ */
:root {
  /* ---- Color · base (work/index.html standard) ---- */
  --bg:        #FFFFFF;
  --ink:       #161311;
  --ink-2:     rgba(22, 19, 17, .72);
  --ink-3:     rgba(22, 19, 17, .46);
  --ink-4:     rgba(22, 19, 17, .16);
  --rule:      rgba(22, 19, 17, .10);
  --soft:      #EFEFEC;

  /* ---- Color · contextual ---- */
  --bg-warm:    #F4EDE3;   /* services / editorial secondary */
  --bg-dark:    #0A0A0B;   /* hero dark backdrop */
  --ink-invert: #FFFFFF;   /* text on dark hero */

  /* ---- Layout ---- */
  --pad-x:      clamp(20px, 4vw, 48px);
  --max:        1480px;    /* default container */
  --max-narrow: 1280px;    /* consult / funding-guide / form pages */
  --max-form:   720px;     /* diagnosis / single-column forms */

  /* ---- Type families ---- */
  --en:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kr:    "Pretendard Variable", "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --serif: Georgia, "Times New Roman", "Noto Serif KR", serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  /* ---- Type scale (sizes) ---- */
  --fs-display: clamp(48px, 7vw, 96px);
  --fs-h1:      clamp(32px, 4vw, 56px);
  --fs-h2:      clamp(22px, 2.4vw, 34px);
  --fs-h3:      clamp(17px, 1.4vw, 20px);
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  /* ---- Type weights (allowed values only) ----
     Sans (Inter / Pretendard): 400 / 500 / 600 / 700
     Serif (Georgia / Noto Serif KR): 300 / 400
     Do not use 200, 760, or other extremes — they have no fallback. */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.19, 1, .22, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    520ms;
}


/* ============================================================
   2. RESET / BASE
   ============================================================ */
*  { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
html { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--kr);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a, button { color: inherit; font: inherit; text-decoration: none; }
button { border: 0; background: transparent; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--bg); }


/* ============================================================
   3. TYPOGRAPHY UTILITIES
   ------------------------------------------------------------
   Use these classes (or @extend the rules) for any heading.
   Sans variants are default; add .is-serif for editorial mood.
   ============================================================ */
.t-display {
  font-family: var(--en);
  font-size:   var(--fs-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.t-h1 {
  font-family: var(--kr);
  font-size:   var(--fs-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.t-h2 {
  font-family: var(--kr);
  font-size:   var(--fs-h2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.t-h3 {
  font-family: var(--kr);
  font-size:   var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.005em;
}
.t-body {
  font-family: var(--kr);
  font-size:   var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
}
.t-small {
  font-family: var(--en);
  font-size:   var(--fs-small);
  font-weight: 500;
}
.t-eyebrow {
  font-family: var(--en);
  font-size:   var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Serif mood — for case-study covers, ad headlines, editorial intros */
.is-serif {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0;
}
.is-serif.t-display { font-weight: 300; line-height: 1.04; }
.is-serif.t-h1      { font-weight: 300; line-height: 1.1; }


/* ============================================================
   4. CONTAINER
   ============================================================ */
.kr-container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.kr-container.narrow { max-width: var(--max-narrow); }
.kr-container.form   { max-width: var(--max-form); }


/* ============================================================
   5. TOPBAR  (index.html standard)
   ------------------------------------------------------------
   Default: transparent over hero, white text.
   Add .topbar.is-light for pages with no dark hero (white text → ink).
   ============================================================ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--pad-x);
  background: transparent;
  font-family: var(--en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #fff;
  transition: background var(--dur-base) ease, backdrop-filter var(--dur-base) ease;
}

/* Topbar — left and right menu slots */
.topbar-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}
.topbar-menu.left  { justify-self: start; }
.topbar-menu.right { justify-self: end; }
.topbar-menu a {
  color: rgba(255, 255, 255, .85);
  transition: color var(--dur-fast) ease;
}
.topbar-menu a:hover,
.topbar-menu a.is-active { color: #fff; }

/* Topbar — center logo */
.topbar-logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  height: 28px;
}
.topbar-logo img {
  display: block;
  height: 22px;
  width: auto;
  /* logo svg is dark — invert to white over hero */
  filter: brightness(0) invert(1);
}

/* Topbar — right meta (lang, etc.) */
.topbar-right {
  justify-self: end;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.topbar-right .lang span        { color: #fff; }
.topbar-right .lang span.dim    { color: rgba(255, 255, 255, .5); }

/* Topbar — light variant for pages without dark hero */
.topbar.is-light {
  color: var(--ink);
  background: rgba(255, 255, 255, 0);
}
.topbar.is-light.scrolled {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.topbar.is-light .topbar-menu a { color: var(--ink-2); }
.topbar.is-light .topbar-menu a:hover,
.topbar.is-light .topbar-menu a.is-active { color: var(--ink); }
.topbar.is-light .topbar-logo img { filter: none; }
.topbar.is-light .topbar-right    { color: var(--ink-3); }

/* Topbar — warm variant for services / editorial pages on bg-warm */
.topbar.is-warm.scrolled {
  background: rgba(244, 237, 227, .82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr auto; padding: 16px var(--pad-x); }
  .topbar-menu { gap: 16px; font-size: 12px; }
  .topbar-right { display: none; }
}


/* ============================================================
   6. KRK BUTTON  (index.html standard)
   ============================================================ */
.krk-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--kr);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform var(--dur-base) ease, background var(--dur-base) ease, color var(--dur-base) ease;
}
.krk-btn .arr {
  display: inline-block;
  transition: transform var(--dur-base) ease;
}
.krk-btn:hover .arr { transform: translateX(4px); }

.krk-btn-ink   { background: var(--ink); color: #fff; }
.krk-btn-ink:hover {
  background: #1f1f21;
  transform: translateY(-2px);
}

.krk-btn-white { background: #fff; color: var(--ink); }
.krk-btn-white:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

.krk-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-4);
}
.krk-btn-ghost:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Small variant — for topbar nav contact button (e.g. "문의하기").
   Combine with -ink / -translucent / -ghost to set color theme. */
.krk-btn-sm {
  height: 42px;
  min-width: 116px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
}

/* Translucent variant — for use over dark hero (case pages).
   White text + glassy background, paired with -sm in topbar context. */
.krk-btn-translucent {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
}
.krk-btn-translucent:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  transform: translateY(-2px);
}


/* ============================================================
   7. FOOTER  (work/index.html standard, aligned with index.html
              krk-footer-override block so all 6 pages render
              identically)
   ============================================================ */
.bottom-logo {
  display: grid;
  place-items: center;
  padding: 84px var(--pad-x) 70px;
  text-align: center;
}
.bottom-logo img {
  width: min(52vw, 350px);
  height: auto;
  margin: 0 auto 24px;
  display: block;
}
.bottom-info {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0;
  justify-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;
  color: var(--ink);
  font-family: var(--en);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.08;
  text-transform: uppercase;
}
.bottom-info a { color: var(--ink); transition: opacity var(--dur-fast) ease; }
.bottom-info a:hover { opacity: .65; }

@media (max-width: 720px) {
  .bottom-logo { padding: 84px 20px 56px; }
  .bottom-logo img { width: min(68vw, 380px); }
  .bottom-info { font-size: 12px; }
}


/* ============================================================
   8. UTILITIES
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hidden { display: none !important; }
.no-scroll { overflow: hidden; }


/* ============================================================
   9. SCROLL STATE HELPERS
   ------------------------------------------------------------
   The topbar `.scrolled` class must be toggled by page JS:

     const topbar = document.querySelector('.topbar');
     const sync = () => topbar.classList.toggle('scrolled', window.scrollY > 8);
     sync();
     window.addEventListener('scroll', sync, { passive: true });
   ============================================================ */
