:root {
      --ink: #132238;
      --muted: #69778c;
      --paper: #f7f8fb;
      --line: #e3e9f0;
      --blue: #3e6bf2;
      --blue-dark: #244ac3;
      --mint: #dff7ef;
      --red: #ef5d68;
      --card: #ffffff;
      --shadow: 0 22px 55px rgba(31, 58, 108, .12);
      --text-body: clamp(.95rem, .92rem + .12vw, 1.02rem);
      --text-small: .8rem;
      --text-label: .75rem;
      --title-section: clamp(2rem, 3.4vw, 3.15rem);
      --title-card: clamp(1.08rem, 1rem + .35vw, 1.28rem);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    ::selection { background: #cddcff; color: #14233a; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
      font-size: var(--text-body);
      line-height: 1.72;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    body.intro-active { overflow: hidden; }

    button, a { font: inherit; }
    button { cursor: pointer; }
    a, button { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid rgba(62, 107, 242, .34); outline-offset: 3px; }
    h1, h2, h3 { text-wrap: balance; }
    p, li, dd { text-wrap: pretty; }
    .wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
    .site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(218, 226, 238, .9); background: rgba(249, 251, 255, .88); box-shadow: 0 8px 24px rgba(25, 50, 89, .035); backdrop-filter: blur(16px); }
    .site-header-inner { position: relative; display: flex; width: min(1120px, calc(100% - 40px)); min-height: 66px; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; }
    .site-header-brand { flex: 0 0 auto; color: var(--ink); font-size: .8rem; font-weight: 900; letter-spacing: -.025em; text-decoration: none; white-space: nowrap; }
    .site-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
    .site-home { position: relative; display: grid; width: 36px; height: 36px; flex: 0 0 36px; padding: 0; place-items: center; border: 1px solid #d9e1ec; border-radius: 9px; background: rgba(255, 255, 255, .76); color: #64738a; text-decoration: none; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
    .site-home svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .site-home:hover, .site-home:focus-visible { border-color: #adbee5; background: white; color: var(--blue-dark); outline: none; transform: translateY(-1px); }
    .skip-link { position: fixed; top: 10px; left: 10px; z-index: 40; padding: 9px 13px; border-radius: 8px; background: var(--ink); color: white; text-decoration: none; transform: translateY(-150%); transition: transform .2s ease; }
    .skip-link:focus { transform: translateY(0); }
    .scroll-progress { position: fixed; top: 0; left: 0; z-index: 31; width: 100%; height: 3px; pointer-events: none; }
    .scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #3e6bf2, #7b9cff); transition: width .1s linear; }