/*
공통 헤더·푸터·모바일 메뉴·건너뛰기 링크 (계획 26 S5)
- .pm25- 클래스와 그 자손만 — 전역 선택자를 두지 않는다 (Tailwind preflight · ress + mana.css 아래에서 같은 모양)
- 안 요소마다 글꼴·크기·줄높이·여백·목록·색·정렬을 직접 적는다
- 접는 기준 폭 1024px 은 아래 미디어 질의 한 곳에만
스펙: requirements/26-5_SLICE5_디자인기반_골격_spec.md §3.6
================================================ */

/* 13개 화면 body 글꼴 (홈 본문 글꼴은 S13) */
.pm25-body {
  font-family: var(--pm25-font-sans);
}

/* 본문 바로가기 — 평소 화면 밖, 포커스 때 왼쪽 위 */
.pm25-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  margin: 0;
  padding: var(--pm25-space-2) var(--pm25-space-4);
  background: #FFFFFF;
  color: var(--pm25-color-primary);
  font-family: var(--pm25-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  text-decoration: underline;
}
.pm25-skip:focus {
  left: var(--pm25-space-2);
  top: var(--pm25-space-2);
}

/*
HEADER
================================================ */
.pm25-header {
  position: relative;
  z-index: 50;
  margin: 0;
  padding: 0;
  background: var(--pm25-header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pm25-color-border);   /* 헤더는 토큰 + 1px — 지도·#gallery 1px 어긋남은 수용 (S5 구현-1) */
  color: var(--pm25-color-text-2);
  font-family: var(--pm25-font-sans);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
/* 고정은 JS 가 돌 때만 — JS 가 없으면 좁은 화면에서 여러 줄 헤더가 본문을 가리지 않게 */
html.pm25-js .pm25-header {
  position: sticky;
  top: 0;
}
.pm25-header__bar {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pm25-space-2) var(--pm25-space-5);
  min-height: var(--pm25-header-h);
  max-width: var(--pm25-content-max);
  margin: 0 auto;
  padding: 0 var(--pm25-space-5);
}
.pm25-logo {
  margin: 0;
  padding: 0;
  color: var(--pm25-color-brand);
  font-family: var(--pm25-font-sans);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.pm25-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 1px solid var(--pm25-color-border);
  border-radius: var(--pm25-radius-sm);
  background: #FFFFFF;
  color: var(--pm25-color-text);
  font-family: var(--pm25-font-sans);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.pm25-nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pm25-space-2) var(--pm25-space-5);
  margin: 0;
  padding: 0;
}
.pm25-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm25-space-1) var(--pm25-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm25-nav__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm25-nav a,
.pm25-nav button {
  display: inline-block;
  margin: 0;
  padding: var(--pm25-space-2) 0;
  border: 0;
  background: none;
  color: var(--pm25-color-text-2);
  font-family: var(--pm25-font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pm25-nav a:hover,
.pm25-nav button:hover {
  color: var(--pm25-color-primary);
}
/* 현재 메뉴 — 색만으로 표시하지 않는다 (굵게 + 밑줄) */
.pm25-nav a[aria-current="page"] {
  color: var(--pm25-color-text);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.pm25-skip:focus-visible,
.pm25-logo:focus-visible,
.pm25-nav-toggle:focus-visible,
.pm25-nav a:focus-visible,
.pm25-nav button:focus-visible,
.pm25-footer a:focus-visible {
  outline: 2px solid var(--pm25-color-primary);
  outline-offset: 2px;
}
.pm25-nav__account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pm25-space-3);
  margin: 0 0 0 auto;
  padding: 0;
}
.pm25-nav__account form {
  display: inline;
  margin: 0;
  padding: 0;
}
.pm25-user {
  margin: 0;
  padding: 0;
  color: var(--pm25-color-text-3);
  font-family: var(--pm25-font-sans);
  font-size: 14px;
  line-height: 1.4;
}
.pm25-nav a.pm25-nav__cta {
  padding: var(--pm25-space-1) var(--pm25-space-3);
  border: 1px solid var(--pm25-color-primary);
  border-radius: 999px;
  color: var(--pm25-color-primary);
}

/* 1024px 미만 — 메뉴는 막대 아래 둘째 줄 (JS 없으면 늘 펼침, JS 가 돌면 ☰ 로 접음) */
@media (max-width: 1023.98px) {
  html.pm25-js .pm25-nav-toggle {
    display: inline-flex;
  }
  .pm25-nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 var(--pm25-space-3);
  }
  .pm25-nav__list {
    flex-direction: column;
  }
  .pm25-nav__account {
    margin: 0;
  }
  /* 모바일 메뉴 줄은 시안대로 위아래 12px (누르는 높이 약 45px) · 회원가입도 일반 줄 (S5 ship1-2) */
  .pm25-nav a,
  .pm25-nav button,
  .pm25-nav a.pm25-nav__cta {
    padding: var(--pm25-space-3) 0;
  }
  .pm25-nav a.pm25-nav__cta {
    border: 0;
    border-radius: 0;
    color: var(--pm25-color-text-2);
  }
  .pm25-nav a.pm25-nav__cta:hover {
    color: var(--pm25-color-primary);
  }
  html.pm25-js .pm25-nav {
    display: none;
  }
  html.pm25-js .pm25-nav-open .pm25-nav {
    display: flex;
    max-height: calc(100dvh - var(--pm25-header-h));
    overflow-y: auto;
  }
}

/*
FOOTER
================================================ */
.pm25-footer {
  margin: var(--pm25-space-6) 0 0;
  padding: var(--pm25-space-6) 0;
  background: var(--pm25-footer-bg);
  color: var(--pm25-footer-text);
  font-family: var(--pm25-font-sans);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
.pm25-footer__inner {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pm25-space-4) var(--pm25-space-6);
  max-width: var(--pm25-content-max);
  margin: 0 auto;
  padding: 0 var(--pm25-space-5);
}
.pm25-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm25-space-2) var(--pm25-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm25-footer__links li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm25-footer__text {
  margin: 0;
  padding: 0;
  color: var(--pm25-footer-text);
  font-family: var(--pm25-font-sans);
  font-size: 14px;
  line-height: 1.6;
}
.pm25-footer a {
  color: #FFFFFF;
  font-family: var(--pm25-font-sans);
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
}
.pm25-footer a:hover {
  text-decoration: underline;
}