/* ============================================================
   base.css — 리셋 · 타이포그래피 · 접근성 유틸
   KWCAG 2.2: 본문 16px 이상 · 대비 4.5:1 · 터치 44px
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  word-break: keep-all;      /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

/* 드로어 열림 시 배경 스크롤 잠금 */
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

/* 디스플레이 폰트 — 시안 v4 기준 히어로 날짜·슬로건 등 '대형 텍스트 한정'.
   섹션/페이지 제목에는 쓰지 않는다 (그쪽은 Pretendard 800). */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; }

/* ── 아이콘 ──────────────────────────────────────────────── */
.ico { width: 22px; height: 22px; flex: none; fill: currentColor; }
/* 내비게이션·바로가기 아웃라인 아이콘 (시안 stroke-width 1.7) */
.ico--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--navy-d); }

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

/* ── 포커스 표시 (키보드 접근성) ─────────────────────────── */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--sp-1);
}
/* 마우스 클릭 시 아웃라인 미표시 (:focus-visible 미지원 브라우저 대비) */
:focus:not(:focus-visible) { outline: none; }

/* ── 접근성 유틸 ─────────────────────────────────────────── */

/* 스크린리더 전용 (시각적 숨김) */
.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: -100px;
  z-index: calc(var(--z-header) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: var(--white); }

/* 터치 영역 44px 보장 — 아이콘 버튼·작은 링크에 부여 */
.touch {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 새 창 열림 — 링크 뒤 아이콘 + sr 텍스트 병기 (SPEC NOTI-004) */
.ext::after {
  content: '';
  display: inline-block;
  width: .8em; height: .8em;
  margin-left: .3em;
  vertical-align: -.05em;
  background: currentColor;
  -webkit-mask: var(--icon-ext) center / contain no-repeat;
          mask: var(--icon-ext) center / contain no-repeat;
  --icon-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h4v2H7v10h10v-2h2v4H5V5z'/%3E%3C/svg%3E");
}

/* ── 레이아웃 컨테이너 ───────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 모바일 하단 퀵바에 콘텐츠가 가리지 않도록 여백 확보 */
.page {
  padding-block: var(--sp-6) var(--sp-12);
  padding-bottom: calc(var(--quickbar-h) + var(--sp-12) + env(safe-area-inset-bottom));
}
/* 화면 전체 폭 히어로로 시작하는 화면 — 헤더 바로 아래 붙인다 */
.page--flush { padding-top: 0; }
@media (min-width: 1024px) {
  .page { padding-bottom: var(--sp-16); }   /* 데스크톱은 퀵바 미표시 */
}

/* 섹션 제목 — 시안 .sec-h h2 (Pretendard 800). 본문 16px 기준에 맞춰 비율 유지. */
.section-title {
  font-weight: var(--fw-title);
  font-size: var(--fs-xl);
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}

/* 페이지 제목 + 설명 — 시안 .p-title (Pretendard 800) */
/* 단독으로 쓰일 때(메인·스타일가이드)의 아래 여백 */
.page-head { margin-bottom: var(--sp-6); }
/* page-sections 안에서의 여백은 components.css 의 `.page-sections > *` 가 한꺼번에 걷어낸다
   — 제목만 예외로 두면 다른 컴포넌트에서 같은 문제가 되풀이된다. */
/* 제목 오른쪽에 딸림 요소(연도 선택 등)를 두는 변형.
   좁은 화면에서는 줄바꿈되어 제목 아래로 내려간다. */
.page-head--aside {
  display: flex;
  /* ⚠ flex-end 로 두면 **설명문이 없는 화면에서 제목이 아래로 밀린다.**
     딸림 요소(연도 셀렉트 44px)가 제목 한 줄보다 높아서, 배치도·프로그램의 h1 만
     일정·오시는 길보다 14px 아래에서 시작했다. 위를 맞춰 어느 화면이든 같은 자리에서 시작한다. */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  flex-wrap: wrap;
}
.page-head__title {
  font-weight: var(--fw-title);
  font-size: var(--fs-2xl);
  letter-spacing: -.03em;
  color: var(--ink);
}
.page-head__desc { color: var(--sub); margin-top: var(--sp-2); }
/* 머리 블록 안에 들어온 지도 — 주소에 딸린 그림이라 바짝 붙인다.
   (절과 절 사이 간격 32px 을 그대로 쓰면 따로 노는 덩어리로 보인다) */
.page-head .mapembed { margin-top: var(--sp-4); }
.page-head .banner { margin-top: var(--sp-4); }