:root {
  /*
    사이트 전체에서 반복해서 쓰는 값을 변수로 모아 둔 곳입니다.
    예를 들어 --color-primary를 바꾸면 버튼, 배지 등 주요 색상이 함께 바뀝니다.
  */
  --color-bg: #f5f7f8;
  --color-surface: #ffffff;
  --color-ink: #16201d;
  --color-muted: #63706b;
  --color-line: #dfe6e3;
  --color-primary: #1f6f5b;
  --color-primary-dark: #124537;
  --color-accent: #e0b84f;
  --color-steel: #31414a;
  --shadow-soft: 0 20px 60px rgba(31, 49, 43, 0.1);
  --radius-card: 8px;
  --container: 1160px;
}

body {
  /*
    min-width는 아주 작은 화면에서도 레이아웃이 너무 심하게 찌그러지지 않도록 하는 최소 폭입니다.
    실제 모바일 대응은 각 CSS 파일의 @media 규칙에서 주로 처리합니다.
  */
  min-width: 320px;
  color: var(--color-ink);
  background: var(--color-bg);
  font-family:
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.6;
}

.sr-only {
  /*
    화면에는 보이지 않지만 스크린 리더는 읽을 수 있는 접근성용 클래스입니다.
    검색 input의 label처럼 시각적으로 숨기고 싶은 설명에 사용합니다.
  */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.button {
  /* 여러 페이지에서 공통으로 쓰는 기본 버튼 모양입니다. */
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 800;
}

.button-primary {
  color: #ffffff;
  background: var(--color-primary);
}

.button-secondary {
  color: var(--color-primary-dark);
  background: #ffffff;
  border-color: var(--color-line);
}

.button-danger {
  color: #ffffff;
  background: #9f2f24;
}

.button-dark {
  color: #ffffff;
  background: var(--color-ink);
}

/* hidden 속성이 붙은 요소는 공통 버튼 display 값보다 우선해서 숨깁니다. */
[hidden] {
  display: none !important;
}

.text-link {
  color: var(--color-primary-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}