:root {
  --tgr-ink: #111111;
  --tgr-ink-soft: #2b2723;
  --tgr-paper: #fffdf7;
  --tgr-paper-warm: #efe3d1;
  --tgr-white: #ffffff;
  --tgr-red: #991314;
  --tgr-red-active: #b71a1b;
  --tgr-yellow: #ffca27;
  --tgr-yellow-soft: #ffe487;
  --tgr-line: #d7c9b6;
  --tgr-muted: #6d6258;
  --tgr-focus: #2563eb;
  --tgr-error: #7d1011;
  --tgr-success: #24583b;
  --tgr-shadow: rgba(17, 17, 17, 0.26);
  --tgr-shadow-soft: rgba(17, 17, 17, 0.12);
  --tgr-overlay: rgba(17, 17, 17, 0.66);
  --tgr-overlay-soft: rgba(17, 17, 17, 0.28);
  --tgr-red-overlay: rgba(153, 19, 20, 0.88);
  --tgr-yellow-wash: rgba(255, 202, 39, 0.24);
  --tgr-white-soft: rgba(255, 255, 255, 0.76);
  --tgr-white-line: rgba(255, 255, 255, 0.28);
  --tgr-font-display: "Black Han Sans", "Noto Sans KR", sans-serif;
  --tgr-font-body: "Pretendard", "Noto Sans KR", sans-serif;
  --tgr-fs-hero: 112px;
  --tgr-fs-display: 80px;
  --tgr-fs-title: 56px;
  --tgr-fs-heading: 36px;
  --tgr-fs-body: 16px;
  --tgr-fs-small: 13px;
  --tgr-space-1: 8px;
  --tgr-space-2: 12px;
  --tgr-space-3: 20px;
  --tgr-space-4: 24px;
  --tgr-space-5: 40px;
  --tgr-space-6: 64px;
  --tgr-space-7: 96px;
  --tgr-space-8: 128px;
  --tgr-radius-small: 8px;
  --tgr-radius-medium: 18px;
  --tgr-radius-organic: 28px;
  --tgr-radius-round: 999px;
  --tgr-container: 1200px;
  --tgr-container-wide: 1360px;
  --tgr-duration-fast: 200ms;
  --tgr-duration-base: 300ms;
  --tgr-duration-scene: 600ms;
  --tgr-duration-long: 2000ms;
  --tgr-ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --tgr-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tgr-container {
  width: 100%;
  max-width: var(--tgr-container);
  margin-inline: auto;
  padding-inline: 40px;
}

.tgr-container-wide {
  width: 100%;
  max-width: var(--tgr-container-wide);
  margin-inline: auto;
  padding-inline: 40px;
}

@media (max-width: 767px) {
  .tgr-container,
  .tgr-container-wide {
    padding-inline: 20px;
  }
}