/* 웹폰트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 디자인 토큰: 기본 팔레트와 의미 기반 색상 */
:root {
  /* Source: Mode 1.tokens.json (base) */
  --common-white: #fff;
  --common-black: #000;
  --palette-primary-5: #040b18;
  --palette-primary-10: #071631;
  --palette-primary-15: #0b2149;
  --palette-primary-20: #0f2c62;
  --palette-primary-30: #164292;
  --palette-primary-40: #1e58c3;
  --palette-primary-50: #256ef4;
  --palette-primary-60: #518bf6;
  --palette-primary-70: #7ca8f8;
  --palette-primary-80: #a8c5fb;
  --palette-primary-85: #bed3fc;
  --palette-primary-90: #d3e2fd;
  --palette-primary-95: #e9f0fe;
  --palette-secondary-5: #061114;
  --palette-secondary-10: #0b2227;
  --palette-secondary-15: #11333b;
  --palette-secondary-20: #16444e;
  --palette-secondary-30: #216775;
  --palette-secondary-40: #2c899c;
  --palette-secondary-50: #37abc3;
  --palette-secondary-60: #5fbccf;
  --palette-secondary-70: #87cddb;
  --palette-secondary-80: #afdde7;
  --palette-secondary-85: #c3e6ed;
  --palette-secondary-90: #d7eef3;
  --palette-secondary-95: #ebf7f9;
  --palette-neutral-5: #0b0c0c;
  --palette-neutral-10: #161719;
  --palette-neutral-15: #222325;
  --palette-neutral-20: #2d2e32;
  --palette-neutral-30: #43454a;
  --palette-neutral-40: #5a5c63;
  --palette-neutral-50: #70737c;
  --palette-neutral-60: #8d8f96;
  --palette-neutral-70: #a9abb0;
  --palette-neutral-80: #c6c7cb;
  --palette-neutral-85: #d4d5d8;
  --palette-neutral-90: #e2e3e5;
  --palette-neutral-95: #f1f1f2;
  --palette-neutral-98: #fafafa;
  --palette-red-50: #de3412;
  --palette-yellow-50: #ffb114;
  --palette-green-50: #228738;

  --opacity-black-5: rgba(0, 0, 0, .05);
  --opacity-black-10: rgba(0, 0, 0, .1);
  --opacity-black-20: rgba(0, 0, 0, .2);
  --opacity-black-30: rgba(0, 0, 0, .3);
  --opacity-black-40: rgba(0, 0, 0, .4);
  --opacity-black-50: rgba(0, 0, 0, .5);
  --opacity-black-60: rgba(0, 0, 0, .6);
  --opacity-black-70: rgba(0, 0, 0, .7);
  --opacity-black-80: rgba(0, 0, 0, .8);
  --opacity-black-90: rgba(0, 0, 0, .9);
  --opacity-black-95: rgba(0, 0, 0, .95);
  --opacity-white-5: rgba(255, 255, 255, .05);
  --opacity-white-10: rgba(255, 255, 255, .1);
  --opacity-white-20: rgba(255, 255, 255, .2);
  --opacity-white-30: rgba(255, 255, 255, .3);
  --opacity-white-40: rgba(255, 255, 255, .4);
  --opacity-white-50: rgba(255, 255, 255, .5);
  --opacity-white-60: rgba(255, 255, 255, .6);
  --opacity-white-70: rgba(255, 255, 255, .7);
  --opacity-white-80: rgba(255, 255, 255, .8);
  --opacity-white-90: rgba(255, 255, 255, .9);
  --opacity-white-95: rgba(255, 255, 255, .95);

  --number-2: .125rem;
  --number-4: .25rem;
  --number-6: .375rem;
  --number-8: .5rem;
  --number-12: .75rem;
  --number-16: 1rem;
  --number-20: 1.25rem;
  --number-24: 1.5rem;
  --number-28: 1.75rem;
  --number-32: 2rem;
  --number-36: 2.25rem;
  --number-40: 2.5rem;
  --number-48: 3rem;
  --number-56: 3.5rem;
  --number-64: 4rem;
  --number-80: 5rem;
  --number-160: 10rem;
  --number-max: 62.4375rem;

  /* Source: Light.tokens.json (semantic) */
  --color-background-normal: var(--common-white);
  --color-background-alt: var(--palette-neutral-95);
  --color-background-dim: var(--opacity-black-60);
  --color-primary-normal: var(--palette-primary-50);
  --color-primary-strong: var(--palette-primary-40);
  --color-primary-heavy: var(--palette-primary-30);
  --color-status-success: var(--palette-green-50);
  --color-status-warning: var(--palette-yellow-50);
  --color-status-danger: var(--palette-red-50);
  --color-text-strong: var(--common-black);
  --color-text-normal: var(--palette-neutral-10);
  --color-text-muted: rgba(45, 46, 50, .6);
  --color-text-subtle: rgba(45, 46, 50, .3);
  --color-text-disable: rgba(45, 46, 50, .2);
  --color-border-normal: var(--palette-neutral-90);
  --color-border-muted: var(--palette-neutral-95);
  --color-alpha-shadow1: var(--opacity-black-5);
  --color-alpha-shadow2: rgba(0, 0, 0, .08);
  --shadow-level-02: 0 0 .125rem var(--color-alpha-shadow1), 0 .25rem .5rem var(--color-alpha-shadow2);

  --tf-white: var(--common-white);
  --tf-black: var(--common-black);
  --tf-neutral-98: var(--palette-neutral-98);
  --tf-neutral-95: var(--palette-neutral-95);
  --tf-neutral-90: var(--palette-neutral-90);
  --tf-neutral-70: var(--palette-neutral-70);
  --tf-neutral-50: var(--palette-neutral-50);
  --tf-neutral-20: var(--palette-neutral-20);
  --tf-neutral-10: var(--color-text-normal);
  --tf-navy-10: var(--palette-primary-10);
  --tf-navy-5: var(--palette-primary-5);
  --tf-primary-95: var(--palette-primary-95);
  --tf-primary-70: var(--palette-primary-70);
  --tf-primary-50: var(--color-primary-normal);
  --tf-primary-40: var(--color-primary-strong);
  --tf-font: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tf-container: 100rem;
  --tf-gutter: 1.25rem;
  --tf-grid-columns: 12;
  /* 서브페이지 콘텐츠 공통 여백: 좌우는 tf-container, 상하는 전용 섹션에서 사용 */
  --tf-page-space: var(--number-160);
  --tf-content-space: var(--number-160);
  --tf-radius-sm: .375rem;
  --tf-radius-md: 1rem;
  --tf-radius-lg: 2.5rem;
  --tf-radius-pill: 999rem;
  --tf-duration: 240ms;
}

/* 공통 여백: 1920 미만 상하 80px·좌우 40px, 모바일 좌우 20px */
@media (max-width: 1919.98px) {
  :root {
    --tf-page-space: var(--number-40);
    --tf-content-space: var(--number-80);
    --tf-panel-space: 2.5rem;
  }
}
@media (max-width: 767.98px) {
  :root {
    --tf-page-space: var(--number-20);
    --tf-panel-space: 1.25rem;
  }
}

/* 본문 반응형 타이포그래피: 1920px 원본은 각 전용 CSS의 기본값 유지 */
@media (max-width: 1919.98px) {
  :root {
    --tf-text-page-title: 2.5rem;
    --tf-text-heading-leading: 1.3;
    --tf-text-section-title: 2rem;
    --tf-text-subtitle: 1.5rem;
    --tf-text-item-title: 1.5rem;
    --tf-text-body-lg: 1.125rem;
    --tf-text-emphasis: 1.125rem;
    --tf-text-eyebrow: 1rem;
  }
}
@media (max-width: 767.98px) {
  :root {
    --tf-text-page-title: 2rem;
    --tf-text-section-title: 1.5rem;
    --tf-text-subtitle: 1.25rem;
    --tf-text-item-title: 1.25rem;
    --tf-text-item-leading: 1.5;
    --tf-text-body-lg: 1rem;
    --tf-text-emphasis: 1rem;
  }
}

/* 기본 요소 초기화 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; color: var(--tf-neutral-10); font-family: var(--tf-font); letter-spacing: -.015em; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
/* 공통 그리드와 접근성 유틸리티 */
.tf-container { width: min(calc(100% - (var(--tf-page-space) * 2)), var(--tf-container)); margin-inline: auto; }
.tf-grid { display: grid; grid-template-columns: repeat(var(--tf-grid-columns), minmax(0, 1fr)); gap: var(--tf-gutter); }
.skip-link { position: fixed; z-index: 9999; top: 1rem; left: 1rem; padding: .75rem 1rem; background: var(--tf-white); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }