@charset "utf-8";
/* ==========================================================================
   경기아트센터 · 시스템 점검(CI 해시화) 안내 — 공통 (토큰 · 리셋 · 유틸)
   웹폰트: Pretendard (HTML <link> 로 CDN 로드)
   ========================================================================== */

/* ---------- 1. 디자인 토큰 (원시값은 여기서만 정의) ---------- */
:root {
  /* 원시 색 */
  --color-white: #ffffff;
  --color-violet-600: #4b2ec6;
  --color-blue-600: #2246cd;
  --color-pink-700: #be206e;
  --color-gray-950: #232323;
  --color-gray-800: #353840;
  --color-gray-750: #3a3a44;
  --color-gray-600: #55565f;
  --color-gray-500: #6b6b6b;
  --color-lavender-50: #f6f5fb;
  --color-black-a57: rgba(0, 0, 0, 0.57);
  --color-black-a25: rgba(0, 0, 0, 0.25);
  --color-white-a15: rgba(255, 255, 255, 0.15);
  --color-white-a0: rgba(255, 255, 255, 0);

  /* 시맨틱 색 */
  --text-strong: var(--color-gray-950);
  --text-body: var(--color-gray-600);
  --text-sub: var(--color-gray-500);
  --text-point: var(--color-pink-700);
  --text-inverse: var(--color-white);
  --bg-page: var(--color-white);
  --bg-soft: var(--color-lavender-50);
  --bg-chip: var(--color-gray-750);
  --bg-dim: var(--color-black-a57);
  --bg-button-dark: var(--color-gray-800);
  --line-on-dark: var(--color-white-a15);
  --gradient-brand: linear-gradient(90deg, var(--color-violet-600) 0%, var(--color-blue-600) 100%);

  /* 타이포 */
  --font-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --lh-tight: 1.25;
  --lh-date: 1.3;
  --lh-base: 1.4;
  --ls-title: -0.035em;
  --ls-body: -0.03em;
  --ls-tight: -0.02em;

  /* 반경 · 그림자 */
  --radius-pill: 100px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-popup: 0 12px 40px 0 var(--color-black-a25);

  /* 간격 스케일 */
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
}

/* ---------- 2. 리셋 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text-strong);
  background: var(--bg-page);
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, p, dl, dt, dd { margin: 0; }
img { display: block; max-width: 100%; height: auto; border: 0; }
button { font: inherit; color: inherit; margin: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- 3. 유틸 ---------- */
/* 화면에서 숨기고 스크린리더에는 읽힘 */
.blind {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 구간 전용 줄바꿈 (기본 숨김 — 각 페이지 CSS의 @media 에서 켬) */
.br-mo,
.br-date { display: none; }

/* 브랜드 그라데이션 글자 */
.text-gradient {
  color: var(--color-violet-600); /* background-clip 미지원 대비 */
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}