* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

img {
  max-width: 100%;
  display: block;
}

/*
  .btn 등 display를 지정하는 클래스와 hidden 속성이 같이 붙으면
  동일 우선순위에서 author 스타일이 UA의 [hidden]{display:none}을 이겨버려
  숨겨졌어야 할 버튼(카카오내비/공유 버튼 등)이 그대로 보이는 문제가 있었다.
  hidden이 항상 이기도록 명시적으로 고정한다.
*/
[hidden] {
  display: none !important;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

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

ul,
ol {
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-serif-kr);
  font-weight: 500;
  line-height: 1.4;
}

.eyebrow {
  display: block;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--cool-deep);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* eyebrow는 "영문 캡션 + 한글 제목"을 위한 장식이라, 영어 모드에서는
   제목 자체가 이미 영문이라 캡션과 문구가 겹치거나(Location Location)
   개별 문구를 매번 다르게 맞춰줘야 하는 문제가 생긴다. 영어 모드에서는
   장식용 eyebrow를 통째로 숨기고 제목 하나만 보여준다. */
html[lang="en"] .eyebrow {
  display: none;
}

.section-title {
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  text-align: center;
  margin-bottom: 14px;
}

.section-desc {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 40px;
  white-space: pre-line;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 12px;
}