/* ==========================================================================
   base.css — 리셋 · 타이포 스케일 · 레이아웃 · 재단선 유틸
   design.md §2 §3 기준. tokens.css 다음, components.css 이전에 로드.
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 라이트 전용 사이트 선언 — OS 다크모드에서 폼 컨트롤/스크롤바가
     어둡게 강제되는 것 방지 (종이 은유 유지, 의도적 결정) */
  color-scheme: light;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--yw-black);
  background: var(--yw-paper);   /* 배경은 항상 종이(순백) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }

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

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

/* 모바일 탭 반응성: 더블탭 줌 지연 제거 + 기본 하이라이트 대신 자체 상태 사용 */
a,
button,
input,
select,
textarea,
label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

/* border-radius 0 전역 — 로고의 각진 조형 유지 (design.md §3) */
* { border-radius: var(--radius); }

/* --- 2. 타이포그래피 (design.md §2) --------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  font-weight: 800;
}

h1 { font-size: var(--fs-h1); font-weight: 900; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* 제목 줄바꿈 균형(외톨이 단어 방지) — 미지원 브라우저는 무시 */
h1, h2, h3 { text-wrap: balance; }

/* 스킵링크로 #main 이동 시 sticky 헤더에 가려지지 않게 */
#main { scroll-margin-top: 80px; }

p { max-width: var(--measure); }

small { font-size: var(--fs-small); }

.text-gray { color: var(--yw-gray); }

/* --- 3. 레이아웃 (design.md §3) ------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);   /* 좌우 24px 여백 */
}

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

@media (max-width: 768px) {
  .section { padding-block: var(--section-y-sm); }
}

.section-head {
  margin-bottom: var(--sp-6);
}

/* 스택 간격 유틸 (선택) */
.stack > * + * { margin-top: var(--sp-4); }

/* --- 4. 재단선 모티프 (design.md §3) --------------------------------------
   주요 섹션 컨테이너 네 모서리에 인쇄 교정지 재단선(crop mark).
   블랙 1px 선, 길이 12px. 그림자 대신 이 선으로 "종이 위" 느낌.
   .crop-mark 를 position:relative 요소에 부여. */
.crop-mark { position: relative; }

.crop-mark::before,
.crop-mark::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

/* 좌상단 + 우하단 (두 모서리 한 세트) */
.crop-mark::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--yw-black);
  border-left: 1px solid var(--yw-black);
}
.crop-mark::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--yw-black);
  border-right: 1px solid var(--yw-black);
}

/* --- 5. 접근성 유틸 -------------------------------------------------------- */
/* 키보드 포커스 가시화 (마우스 클릭에는 링 미표시) */
:focus-visible {
  outline: var(--stroke-w) solid var(--yw-orange);
  outline-offset: 2px;
}

/* 스크린리더 전용 텍스트 */
.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;
  left: var(--sp-4);
  top: -100%;
  z-index: 100;
  background: var(--yw-paper);
  border: var(--stroke);
  padding: var(--sp-2) var(--sp-4);
}
.skip-link:focus { top: var(--sp-4); }

/* --- 6. 모션 (design.md §4) ------------------------------------------------
   prefers-reduced-motion: reduce 시 모든 애니메이션/전환 제거 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}