/* ==========================================================================
   CSS Reset — 브라우저 기본 스타일 초기화
   --------------------------------------------------------------------------
   Chrome·Safari·Firefox·Edge 모두 기본 스타일이 조금씩 달라서,
   이걸 먼저 0으로 맞춘 다음 우리만의 스타일을 쌓아올립니다.
   Modern CSS Reset (Andy Bell) 기반 + 휴먼아크 커스터마이징.
   ========================================================================== */

/* 박스 모델 통일 — 모든 요소의 padding·border가 width 안에 포함되도록 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 기본 마진 제거 */
* {
  margin: 0;
  padding: 0;
}

/* HTML — 부드러운 스크롤 + 폰트 크기 기준 */
html {
  font-size: 100%;          /* 1rem = 16px */
  scroll-behavior: smooth;  /* 앵커 링크 클릭 시 부드럽게 이동 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Body — 기본 타이포그래피 설정 */
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background-color: var(--color-cream);

  /* 폰트 렌더링 품질 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 미디어 요소 — 반응형 기본 처리 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 폼 요소 — 폰트 상속 */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 긴 단어 줄바꿈 처리 */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-break: keep-all;     /* 한국어 단어 보존 — 어절 단위 줄바꿈 */
}

/* 헤딩 기본 — 굵기·크기는 페이지에서 개별 지정 */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

/* 리스트 기본 마커 제거 (필요 시 페이지에서 다시 추가) */
ul, ol {
  list-style: none;
}

/* 링크 — 휴먼아크 기본 스타일 */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-gold);
}

/* 버튼 — 브라우저 기본 스타일 제거 */
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* 테이블 */
table {
  border-collapse: collapse;
  width: 100%;
}

/* 포커스 — 키보드 사용자를 위한 명확한 표시 */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;   /* 마우스 클릭 시에는 외곽선 숨김 */
}

/* 선택 영역 색상 */
::selection {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

/* 스크롤바 (Webkit 기반 브라우저) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-cream-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--color-navy-mist);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-navy);
}

/* 모션 줄임 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}