/* ============================================================
   STIS 디자인 시스템 — 베이스 스타일 (theme.css)
   variables.css 다음에 로드. 리셋 · 타이포 · 레이아웃 유틸.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* body의 clip은 뷰포트로 전파되지 않아 100vw 요소가 스크롤바 폭만큼 비어져 나갔다 — html에도 건다 */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip; /* 가로 스크롤 원천 차단 — 개별 요소 오버플로는 별도로 수정하되 안전망 유지 */
  font-family: var(--font-base);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-none);
  font-weight: var(--weight-regular);
  color: var(--text-2);
  background: var(--surface-canvas);
  word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }

/* 포커스 — 키보드 접근 */
:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 타이포 클래스 ----------
   한글 웨이트: 본문 400, 강조 700까지. 800 이상 금지.
   자간 양수 금지 — 17px 이하 0, 클수록 음수. */

.t-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  color: var(--text-1);
}
.t-heading {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  color: var(--text-1);
}
.t-heading-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  color: var(--text-1);
}
.t-subheading {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-title);
  font-weight: var(--weight-bold);
  color: var(--text-1);
}
.t-title {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-bold);
  color: var(--text-1);
}
.t-nav {
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
  font-weight: var(--weight-medium);
}
.t-body { font-size: var(--text-body); line-height: var(--leading-body); }
.t-label { font-size: var(--text-label); line-height: var(--leading-label); }
.t-system { font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-4); }

.t-secondary { color: var(--text-3); }
.t-muted { color: var(--text-4); }

/* ---------- 영문 포인트 서체 (typography.md §2·§6·§7) ----------
   독립 슬롯의 영문·숫자 전용, 20px 이상, 웨이트 500/700만.
   한글이 하나라도 있는 문장에는 절대 사용 금지. */
.en-accent {
  font-family: var(--font-accent);
  font-weight: var(--weight-medium);
}
.en-accent--bold { font-weight: var(--weight-bold); }

/* 한글과 같은 줄에 놓인 영문의 시각 보정 (결과가 15px 미만이면 적용 금지) */
.en-inline-adjust { font-size: 0.95em; }

/* ---------- 레이아웃 ---------- */
.container {
  max-width: var(--container-content);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-gap); }

/* 그레이 밴드 — 발간물 섹션 전용. 배경만 풀블리드, 콘텐츠는 컨테이너 안 */
.band { background: var(--surface-tint); } /* 퀵메뉴 아이콘 타일과 같은 톤 — 발간물 밴드는 옅게 (surface-band는 전체메뉴 바탕에서 계속 사용) */

/* 다크 면 (푸터 등) */
.surface-dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.surface-dark .t-secondary,
.surface-dark .t-muted { color: var(--text-on-dark-sub); }

/* ---------- 스크린리더 전용 ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 모바일 타이포 축소 ---------- */
@media (max-width: 768px) {
  :root {
    --text-display: 52px;  --leading-display: 54px;
    --text-heading: 38px;  --leading-heading: 42px;
    --text-heading-sm: 32px; --leading-heading-sm: 37px;
    --text-subheading: 27px; --leading-subheading: 34px;
    --text-title: 20px;    --leading-title: 28px;
    /* 본문 17px·시스템 15px 하한은 모바일에서도 유지 — 축소 금지 */
  }
}

/* ---------- 등장 모션 (Reveal) ----------
   data-reveal 요소는 뷰포트 진입 시 1회 페이드+상승. JS가 html.js를 붙인 뒤에만 숨기므로 JS 없이도 콘텐츠는 보인다.
   variants: data-reveal="fade" (이동 없이 페이드만 — 내부에 자체 모션이 있는 블록용)
   시차: data-reveal-delay="ms" 직접 지정, 또는 부모 data-reveal-stagger="ms"로 자식 순차(JS가 --reveal-delay 계산) */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--motion-reveal) var(--ease-out-soft), transform var(--motion-reveal) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}