/* ==========================================================================
   숭의여자대학교 원격평생교육원 — Base Stylesheet
   --------------------------------------------------------------------------
   tokens.css 를 소비하는 전역 베이스 레이어.
   리셋 → 폰트 → 문서 기본 → 레이아웃 유틸 → 접근성 순서.
   컴포넌트 스타일은 여기 두지 않습니다.

   ⚠ tokens.css 를 반드시 먼저 로드하세요.
   ========================================================================== */


/* ==========================================================================
   1. FONT FACE
   --------------------------------------------------------------------------
   Pretendard : 본문·UI  (jsDelivr CDN, variable + 동적 서브셋)
   GmarketSans: 헤딩·KV  (jsDelivr CDN)
   운영 배포 시에는 CDN 대신 self-host + woff2 subset 을 권장합니다.
   ========================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSans.css');


/* ==========================================================================
   2. RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* 모션 민감 사용자 대응.
   전역 0.01ms 무력화는 호버·포커스·활성 전환 같은 '유용한 피드백'까지
   없애버립니다. 그래서 이동·스케일·시차 애니메이션만 제거하고,
   색·투명도 전환은 짧게(0.01s → 0.1s) 남겨 상태 변화가 읽히게 합니다. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    /* 이동·확대는 전면 제거 */
    transition-property: color, background-color, border-color, box-shadow,
                         opacity, fill, stroke !important;
    transition-duration: 0.1s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  /* 트랜스폼 기반 연출은 최종 상태로 고정 */
  .gnb__link:hover,
  .gnb__item:hover .gnb__link,
  .quick-card:hover,
  .course-card__link:hover,
  .notice-card__link:hover,
  .carousel-btn:hover:not(:disabled),
  .allmenu-btn:hover,
  .section-head__more:hover,
  .event-zone__page:hover,
  .hero__dot:hover {
    transform: none !important;
  }

  /* 슬라이더는 애니메이션 없이 즉시 전환 */
  .event-zone__track,
  .course-list {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
fieldset, legend {
  margin: 0;
  padding: 0;
}

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

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  border-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

button:disabled { cursor: not-allowed; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset { border: none; }

address { font-style: normal; }

hr {
  border: none;
  border-top: 1px solid var(--border-default);
}


/* ==========================================================================
   3. DOCUMENT
   ========================================================================== */
body {
  font: var(--type-body);
  color: var(--text-primary);
  background-color: var(--surface-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;       /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

/* 한글 본문 가독성: 숫자·영문은 tabular 로 흔들림 방지 */
:where(body) {
  font-variant-numeric: proportional-nums;
}


/* ==========================================================================
   4. TYPOGRAPHY DEFAULTS
   ========================================================================== */
h1 { font: var(--type-h1); color: var(--text-strong); }
h2 { font: var(--type-h2); color: var(--text-strong); }
h3 { font: var(--type-h3); color: var(--text-strong); }
h4 { font: var(--type-h4); color: var(--text-strong); }
h5 { font: var(--type-h5); color: var(--text-strong); }
h6 { font: var(--type-h6); color: var(--text-strong); }

p { font: var(--type-body); }

small { font: var(--type-caption); color: var(--text-secondary); }

strong, b { font-weight: var(--font-bold); }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.16s ease;
}

a:hover { color: var(--text-link); }


/* ==========================================================================
   5. LAYOUT UTILITIES
   --------------------------------------------------------------------------
   ⚠ Figma 시안 1은 섹션마다 좌측 오프셋이 240 / 261 / 253.7px 로 제각각입니다.
     (과정 그리드 x=261, 상담문의 밴드 x=253.7, 퀵메뉴 섹션 x=240)
     구현에서는 .container 로 1440px 정중앙 정렬로 통일 보정했습니다.
   ========================================================================== */
.container {
  width: 100%;
  /* 1536 = 콘텐츠 1440 + 좌우 패딩 48. 1920 화면에서 콘텐츠가 x240~1680 에
     정확히 놓입니다. max-width 에 1440 을 쓰면 패딩만큼 안쪽으로 밀립니다. */
  max-width: var(--container-outer);      /* 1536px */
  margin-inline: auto;
  padding-inline: var(--space-15);        /* 48px — 뷰포트가 좁아질 때의 최소 여백 */
}

.container--narrow {
  max-width: var(--container-outer-narrow);  /* 1320px */
}

.container--text {
  max-width: var(--container-text);       /* 800px */
}

/* 풀블리드 배경 + 내부 컨테이너 정렬용 섹션 래퍼.
   상하 여백은 --section-py 하나로 통일하고 브레이크포인트에서만 줄입니다. */
.section {
  padding-block: var(--section-py);       /* 80px */
}

.section--sm { padding-block: var(--section-py-sm); }   /* 40px */

/* 그리드 */
.grid {
  display: grid;
  gap: var(--grid-gap);                   /* 24px */
}

.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--gap-lg { gap: var(--grid-gap-lg); }   /* 40px */
.grid--gap-sm { gap: var(--grid-gap-sm); }   /* 16px */


/* ==========================================================================
   6. RESPONSIVE — 브레이크포인트 3단
   --------------------------------------------------------------------------
   1024px 이하 : 태블릿 가로 — 좌우 여백 축소, 4열 → 2열
    768px 이하 : 태블릿 세로 — 섹션 상하 여백 축소, 2열 유지
    375px 이하 : 모바일     — 1열, 최소 여백
   각 섹션 고유의 접힘 규칙은 해당 섹션 CSS 에서 처리합니다.
   ========================================================================== */
@media (max-width: 1024px) {
  .container { padding-inline: var(--space-10); }   /* 24px */
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--gap-lg { gap: var(--grid-gap); }           /* 40 → 24 */
}

@media (max-width: 768px) {
  .container { padding-inline: var(--space-9); }    /* 20px */
  .section { padding-block: var(--section-py-md); } /* 80 → 56 */
}

@media (max-width: 375px) {
  .container { padding-inline: var(--space-8); }    /* 16px */
  .section { padding-block: var(--section-py-sm); } /* 56 → 40 */
  .grid--4,
  .grid--3,
  .grid--2 { grid-template-columns: 1fr; }
  .grid { gap: var(--space-8); }                    /* 16px */
}


/* ==========================================================================
   7. ACCESSIBILITY
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 마우스 클릭 시에는 링 숨김 (키보드만 노출) */
:focus:not(:focus-visible) { outline: none; }

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

/* 키보드 사용자용 본문 바로가기 */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  padding: var(--space-4) var(--space-8);
  font: var(--type-label);
  color: var(--text-on-brand);
  background-color: var(--color-brand);
  border-radius: 0 0 var(--r-sm) 0;
  transform: translateY(-100%);
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--text-on-brand);
}