/* Shared site foundation (all non-intro pages) */
  :root {
    --navy: #0A2540;
    --navy-2: #0F3460;
    --blue: #0052CC;
    --blue-2: #1E6FD9;
    --sky: #E8F1FC;
    --sky-2: #F4F8FD;
    --ink: #0E1726;
    --ink-2: #2E3A4D;
    --muted: #6B7887;
    --line: #E5EAF0;
    --line-2: #EEF2F6;
    --white: #FFFFFF;
    --bg: #FAFBFC;
    --shadow-sm: 0 1px 2px rgba(14, 23, 38, 0.04), 0 1px 3px rgba(14, 23, 38, 0.04);
    --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.06), 0 2px 4px rgba(10, 37, 64, 0.04);
    --shadow-lg: 0 24px 48px -12px rgba(10, 37, 64, 0.12), 0 8px 16px -4px rgba(10, 37, 64, 0.06);
    --radius: 4px;
    --radius-lg: 8px;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
  }

  .article-meta-current {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-style: normal;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }

  img {
    max-width: 100%;
    display: block;
  }

  ul {
    list-style: none;
  }

  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
    cursor: pointer;
  }

  .btn-primary {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
  }

  .btn-primary:hover {
    background: var(--navy-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 82, 204, 0.3);
  }

  .btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid #999;
  }

  .btn-outline:hover {
    border-color: var(--blue);
    color: var(--blue);
  }

  section {
    padding: 120px 0;
  }

  .section-header {
    text-align: center;
    margin-bottom: 64px;
  }

  .section-header.left {
    text-align: left;
  }

  .section-eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--blue);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }

  .section-eyebrow::before,
  .section-eyebrow::after {
    content: '—';
    margin: 0 12px;
    opacity: 0.5;
  }

  .section-title {
    font-size: 56px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.03em;
    line-height: normal;
    margin-bottom: 20px;
  }

  .section-subtitle {
    font-size: 18px;
    color: var(--ink-2);
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto;
  }

  .section-header.left .section-subtitle {
    margin: 0;
  }

  /* Progressive Enhancement: 기본값은 "보임".
     JS가 정상 로드된 경우에만 숨김 처리 → 관찰자 실패 시 콘텐츠 안전. */
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
  }

  html.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* 사용자가 모션 감소를 선호하면 애니메이션 비활성화 */
  @media (prefers-reduced-motion: reduce) {
    html.js .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }