/**
 * common.css
 * ------------
 * 여러 페이지에서 공통으로 쓰는 레이아웃·타이포·유틸 클래스입니다.
 * index뿐 아니라 히라가나/가타카나/한자 페이지를 만들 때도 이 파일을 함께 불러옵니다.
 */

/* ----- 기본 문서 설정 ----- */
html {
  /* 루트 폰트 크기: 1rem = 16px (브라우저 기본과 동일) */
  font-size: 16px;
  /* 부드러운 폰트 렌더링 (맥/윈도우) */
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR",
    "Hiragino Sans", "Yu Gothic UI", sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
  background-color: #fafafa;
}

/* ----- 중앙 정렬 컨테이너 (.inner) ----- */
/**
 * 최대 너비 1200px로 제한하고, 좌우 여백만 주면서 가운데 정렬합니다.
 * header, section, footer 등에서 반복해서 사용합니다.
 */
.inner {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ----- 접근성: 스크린 리더 전용 텍스트 ----- */
.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;
}

/* Kakao 애드핏: 광고 슬롯 뷰포트 가로 기준 가운데 정렬 */
.kakao_ad_area {
  display: block;
  width: min(300px, 100%);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  box-sizing: border-box;
}