/* ===================================
   SNUH CMS - Common Styles
   통합 디자인 시스템 변수 + 리셋 + 유틸리티

   - 디자인 시스템 토큰: 02_bri-snuh_design/01_styleguide/colors.md 기준
   - 리셋/베이스: 전역 초기화
   - 유틸리티 클래스: .sr-only, .icon, .container
   =================================== */

/* ===================================
   Font Face (SUIT Variable)
   =================================== */
@font-face {
  font-family: 'SUIT';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/SUIT-Variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'GmarketSans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/GmarketSansBold.otf') format('opentype');
}

/* ===================================
   CSS Variables (Design System)
   =================================== */
:root {
  /* Primary Colors */
  --color-primary-950: #022B73;
  --color-primary-900: #03368C;
  --color-primary-700: #0066CC;
  --color-primary-500: #0F86CA;
  --color-primary-300: #83A1CA;
  --color-primary-100: #C4D1E5;
  --color-primary-50: #E5EBF5;
  --color-primary-25: #F2F5FA;

  /* Extended Colors (강조·카테고리 분류용) */
  --color-teal-500: #00B4A6;
  --color-purple-500: #8B5CF6;
  --color-sky-500: #45AEDD;

  /* Neutral Colors */
  --color-gray-900: #1F2937;
  --color-gray-800: #374151;
  --color-gray-700: #4B5563;
  --color-gray-600: #6B7280;
  --color-gray-500: #9CA3AF;
  --color-gray-400: #D1D5DB;
  --color-gray-300: #E5E7EB;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #F3F4F6;
  --color-gray-50: #F9FAFB;
  --color-white: #FFFFFF;

  /* Semantic Aliases */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-border: var(--color-gray-300);
  --color-surface: var(--color-gray-100);

  /* Semantic Colors */
  --color-success: var(--color-primary-700);
  --color-info: var(--color-primary-500);
  --color-warning: #FFA930;
  --color-error: #D81B60;
  --color-error-bg: #FCE7F3;
  --color-error-shadow: rgba(216, 27, 96, 0.15);

  /* Icon Sizes */
  --icon-sm: 18px;
  --icon-md: 24px;
  --icon-lg: 36px;
  --icon-xl: 48px;
  --icon-2xl: 60px;

  /* Font Family */
  --font-family: 'SUIT', 'Malgun Gothic', '맑은 고딕', sans-serif;

  /* ===================================
     Spacing - Primitive Scale (gap.md #2)
     신규 페이지·타 사이트(ctc/lab/bio 등)에서 사용.
     BRI 기존 코드는 참조하지 않음.
     =================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-25: 100px;

  /* ===================================
     Spacing - Layout Semantic (gap.md #3)
     페이지/섹션 레벨 리듬
     =================================== */
  --gap-layout-page-header: var(--space-10);   /* 40px */
  --gap-layout-section: var(--space-25);       /* 100px */
  --gap-layout-section-compact: var(--space-16); /* 64px — 마이페이지/폼 등 밀도 페이지용 */
  --gap-layout-h2-body: var(--space-5);        /* 20px */
  --gap-layout-h3-body: var(--space-3);        /* 12px */
  --gap-layout-h3-top: var(--space-10);        /* 40px */
  --gap-layout-tab-content: var(--space-6);    /* 24px */
  --gap-layout-notice-body: var(--space-2);    /* 8px — 본문 p 직후 notice-box 보조 안내 */

  /* ===================================
     Spacing - Component Semantic (gap.md #4)
     컴포넌트 내부 리듬
     =================================== */
  --gap-form-label-input: var(--space-2);      /* 8px */
  --gap-form-input-help: var(--space-1);       /* 4px */
  --gap-form-group: var(--space-5);            /* 20px */
  --gap-form-divider: var(--space-8);          /* 32px */
  --gap-card-icon-text: var(--space-4);        /* 16px */
  --gap-card-title-desc: var(--space-2);       /* 8px */
  --gap-button-group: var(--space-2);          /* 8px */
  --gap-inline-icon: var(--space-2);           /* 8px */
  --gap-optical-1: 1px;                        /* SVG·아이콘 시각 보정 1px */
  --gap-optical-2: 2px;                        /* SVG·아이콘 시각 보정 2px */
  --gap-card-body: var(--space-6);             /* 24px — 카드/박스 내부 padding · 카드 그리드 gap */
  --gap-tag-y: var(--space-1);                 /* 4px  — 태그/뱃지 상하 padding */
  --gap-tag-x: var(--space-3);                 /* 12px — 태그/뱃지 좌우 padding */

  /* ===================================
     Typography Tokens (다국어 대응)
     :lang(en) 블록에서 오버라이드됨
     =================================== */
  --ls-base: -0.05em;          /* 기본 자간 (한글용) — body 적용 */
  --ls: -0.05em;               /* 기본 자간 (한글용) — components 참조용 */
  --ls-tight: -0.02em;         /* 제목/강조 한국어 전용 tight 자간 */
  --word-break-base: keep-all; /* 기본 줄바꿈 (한글용) */
  --lh-base: 1.6;              /* 기본 행간 */
}

/* ===================================
   Spacing - Mobile 반응형 (gap.md #6)
   Mobile(≤767px)에서 50px 이상 토큰은 한 단계 축소
   =================================== */
@media (max-width: 767px) {
  :root {
    --gap-layout-section: var(--space-16);        /* 100 → 64 */
    --gap-layout-section-compact: var(--space-12); /* 64 → 48 */
    --gap-layout-page-header: var(--space-8);     /* 40 → 32 */
    --gap-layout-h2-body: var(--space-4);         /* 20 → 16 */
    --gap-layout-h3-top: var(--space-8);          /* 40 → 32 */
    --gap-layout-tab-content: var(--space-4);     /* 24 → 16 */
  }
}

/* ===================================
   Typography - 태블릿 반응형 (≤1199px)
   초대형 제목만 한 단계 축소
   =================================== */
@media (max-width: 1023px) {
  :root {
    --fs-mega:       48px;  /* 64 → 48 */
    --fs-jumbo:      48px;  /* 60 → 48 */
    --fs-hero:       44px;  /* 56 → 44 */
    --fs-title-xl:   40px;  /* 48 → 40 */
    --fs-display-xl: 36px;  /* 42 → 36 */
    --fs-display:    34px;  /* 40 → 34 */
    --fs-page-title: 36px;  /* 44 → 36 */
    --fs-post-title: 36px;  /* 44 → 36 */
    --fs-title-lg:   30px;  /* 36 → 30 */
    --fs-stat:       28px;  /* 32 → 28 */
    --fs-subtitle:   26px;  /* 30 → 26 */
    --fs-lead:       22px;  /* 26 → 22 */
  }
}

/* ===================================
   Typography - 모바일 반응형 (≤767px)
   제목 계열 전체 축소, body/small/button/form 유지
   =================================== */
@media (max-width: 767px) {
  :root {
    --fs-mega:       36px;  /* 64 → 36 */
    --fs-jumbo:      36px;  /* 60 → 36 */
    --fs-hero:       32px;  /* 56 → 32 */
    --fs-title-xl:   28px;  /* 48 → 28 */
    --fs-display-xl: 28px;  /* 42 → 28 */
    --fs-display:    26px;  /* 40 → 26 */
    --fs-page-title: 26px;  /* 44 → 26 */
    --fs-post-title: 26px;  /* 44 → 26 */
    --fs-title-lg:   24px;  /* 36 → 24 */
    --fs-stat:       24px;  /* 32 → 24 */
    --fs-subtitle:   22px;  /* 30 → 22 */
    --fs-lead:       20px;  /* 26 → 20 */
    --fs-title-sm:   22px;  /* 28 → 22 */
    --fs-title-md:   20px;  /* 24 → 20 */
    --fs-section:    18px;  /* 22 → 18 */
    --fs-block:      18px;  /* 20 → 18 */
    /* --fs-body, --fs-small, --fs-button, --fs-form, --fs-tag → 유지 */
  }
}

/* ===================================
   Typography — 영문 오버라이드
   <html lang="en"> 페이지에서만 발동
   국문(<html lang="ko">)은 완전히 무시됨
   =================================== */
:lang(en) {
  --ls-base: 0;              /* 영문 자간 (자연 자간) — body 적용 */
  --ls: 0;                   /* 영문 자간 (자연 자간) — components 참조용 */
  --ls-tight: 0;             /* 영문 tight 자간 리셋 */
  --word-break-base: normal; /* 영문 줄바꿈 */
  --lh-base: 1.5;            /* 영문 행간 */
}

/* ===================================
   Reset & Base Styles
   =================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  word-break: var(--word-break-base);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}



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

ul, ol {
  list-style: none;
  padding-inline-start: 0;
  margin-inline: 0;
}

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

/* ===================================
   Utility: Screen Reader Only
   =================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===================================
   Utility: Icon
   =================================== */
.icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  display: inline-block;
  flex: 0 0 auto;
}

.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ===================================
   Utility: Container
   =================================== */
.container {
  max-width: 1440px;
  margin: 0 auto;
}

/* ===================================
   Utility: Body States
   =================================== */
body.menu-open {
  overflow: hidden;
}