/* ============================================================
   layout.css — 앱 헤더 · 햄버거 드로어 · 데스크톱 GNB · 하단 퀵바 · 푸터
   SPEC §4 공통 레이아웃
   - 헤더에는 로고 + 햄버거만. 연도 선택은 절대 두지 않는다.
   - 모바일 우선: 767px 이하 기본, 1024px~ 데스크톱 확장.

   ⚠ 이 파일은 **사용자 화면 전용**이다. 관리자(views/admin/layout.njk)는
   tokens · base · components · admin만 불러오므로 여기 있는 클래스는
   관리자에서 아무 효과가 없다. 양쪽에서 쓸 것은 components.css에 둔다.
   (scripts/check-assets.js가 이 규칙을 검사한다)
   ============================================================ */

/* ── 앱 헤더 ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* 높이를 고정하지 않는다 — 막대(--header-h) 아래에 색동 띠가 붙어 그만큼 늘어난다.
     전체 높이가 필요한 곳(앵커 여백·드로어 머리)은 --header-total 을 쓴다. */
  background: var(--navy);
  color: var(--white);
}

/* 색동 띠 — 장식이라 가상 요소로 둔다(보조기술이 읽을 내용이 아니다).
   색과 두께는 tokens.css 의 --band-* 에서 정한다. */
.site-header::after {
  content: '';
  display: block;
  height: var(--band-h);
  background: linear-gradient(90deg,
    var(--band-1) 0 16.667%,
    var(--band-2) 16.667% 33.333%,
    var(--band-3) 33.333% 50%,
    var(--band-4) 50% 66.667%,
    var(--band-5) 66.667% 83.333%,
    var(--band-6) 83.333% 100%);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* 로고 — 시안 .logo: Pretendard 800, 연도 표기 없음 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  color: var(--white);
  text-decoration: none;
  font-weight: var(--fw-title);
  font-size: var(--fs-md);
  letter-spacing: -.02em;
}
.brand:hover { color: var(--white); }
.brand__mark { height: 28px; width: auto; }

@media (min-width: 1024px) {
  .brand { font-size: var(--fs-lg); margin-right: auto; }  /* 시안 .p-logo 18px */
}

/* .icon-btn(햄버거·검색·닫기)은 관리자 화면에서도 쓰므로 components.css에 있다 */

.header-actions { display: flex; align-items: center; gap: var(--sp-1); }

/* ── 데스크톱 가로 GNB (1024px~) ─────────────────────────── */
.gnb { display: none; }

@media (min-width: 1024px) {
  .gnb { display: block; }
  .gnb__list { display: flex; align-items: center; gap: var(--sp-6); }  /* 시안 nav gap 38px 계열 */
  .gnb__item { position: relative; }

  .gnb__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0 var(--sp-4);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--fs-md);   /* 시안 15px → 본문 기준 16px */
    border-radius: var(--radius-sm);
  }
  .gnb__link:hover,
  .gnb__item:hover .gnb__link,
  .gnb__item:focus-within .gnb__link { color: var(--gold); background: rgba(255, 255, 255, .08); }

  /* 현재 위치 표시 — 한옥 처마 곡선.
     곧은 밑줄은 어느 사이트에나 있는 모양이라 유교문화축전이라는 성격이 드러나지 않는다.
     처마는 **가운데가 내려앉고 양 끝이 들리는**(앙곡) 곡선이다. 그 선 하나만 가져온다.

     ⚠ 색에만 기대지 않는다 — 글자색(골드)과 이 곡선을 함께 바꾼다.
       의미 전달은 aria-current 가 하고, 이건 눈으로 보는 표시다.
     ⚠ 곡선은 항목 폭에 맞춰 늘어난다(preserveAspectRatio=none).
       그대로 늘리면 선 굵기까지 눌리므로 vector-effect 로 굵기를 고정한다. */
  .gnb__link[aria-current="true"] { color: var(--gold); }
  .gnb__link[aria-current="true"]::after {
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    /* 붓획은 두께가 있어야 붓으로 보인다. 항목(44px) 아래로 3px 넘겨 자리를 넓혔다 —
       헤더가 64px 이라 항목 아래위로 10px 씩 여유가 있다. */
    bottom: -3px;
    height: 16px;
    background: var(--eave) no-repeat center / 100% 100%;
    pointer-events: none;
  }
  .gnb__item { position: relative; }

  /* 드롭다운 — hover + focus-within 모두 지원 (키보드 접근) */
  .gnb__drop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    padding: var(--sp-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    /* visibility 즉시 전환 — 상위 링크에 포커스가 오면 곧바로 하위 항목이 탭 가능해진다.
       (지연되면 키보드 사용자가 드롭다운을 건너뛴다) */
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .gnb__item:hover .gnb__drop,
  .gnb__item:focus-within .gnb__drop {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear 0s;
  }
  .gnb__drop a {
    display: block;
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-3);
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  .gnb__drop a:hover { background: var(--navy-08); color: var(--navy); }
  .gnb__drop a[aria-current="page"] { background: var(--navy-08); color: var(--navy); font-weight: 700; }

  /* 데스크톱에서는 햄버거 숨김 (GNB가 대체) */
  .btn-hamburger { display: none; }
}

/* ── 햄버거 드로어 ───────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(13, 38, 80, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  transform: translateX(100%);
  /* 닫힘 상태에서 visibility:hidden — 화면 밖 링크가 탭 순서에 남지 않게 한다
     (aria-hidden 요소가 포커스를 받는 접근성 위반 방지).
     visibility는 보간하지 않고 즉시 전환한다: 열 때는 바로 visible(포커스 이동 가능),
     닫을 때만 슬라이드가 끝난 뒤 hidden. */
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur) var(--ease), visibility 0s linear 0s;
}

.drawer__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  /* ⚠ 사이트 헤더와 같은 높이여야 한다. 드로어를 열면 두 머리가 나란히 보이는데,
     여기를 내용 높이에 맡겨 두었더니 닫기 단추(44px)+여백으로 60px 이 되어
     모바일에서 헤더(56px)보다 4px 높았다. 같은 토큰을 쓴다. */
  /* 띠까지 포함한 높이로 맞춘다 — 드로어를 열면 두 머리가 나란히 보인다 */
  height: var(--header-total);
  padding: 0 var(--sp-3) 0 var(--sp-5);
  background: var(--navy);
  color: var(--white);
  min-height: var(--header-total);
}
.drawer__title { font-size: var(--fs-md); font-weight: 700; }

/* 통합 검색 — 드로어 최상단 상시 배치 (SPEC §4.3) */
.search-form { display: flex; gap: var(--sp-2); }
.search-form__input {
  flex: 1;
  /* 플렉스 항목의 기본 min-width:auto는 input의 고유 폭(약 20자)이라 좁은 화면에서
     줄어들지 않고 제출 버튼을 밀어낸다. 0까지 줄어들 수 있게 한다. */
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0 var(--sp-4);
  font-size: var(--fs-md);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.search-form__input::placeholder { color: var(--sub); }
.search-form__submit {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 50%;
}
.search-form__submit .ico { width: 20px; height: 20px; }
.search-form__submit:hover { background: var(--navy-d); }

/* 메뉴 아코디언 — <details>/<summary> 기반, JS 없이도 동작 */
.drawer__nav { flex: 1; padding: var(--sp-2) 0; }

.acc { border-bottom: 1px solid var(--line); }
.acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__summary:hover { background: var(--navy-08); }

/* 펼침 표시 화살표 */
.acc__summary::after {
  content: '';
  width: 12px; height: 12px;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.acc[open] > .acc__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.acc__list { padding-bottom: var(--sp-2); }
.acc__list a {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-8);
  color: var(--ink);
  text-decoration: none;
}
.acc__list a:hover { background: var(--navy-08); color: var(--navy); }
.acc__list a[aria-current="page"] { color: var(--navy); font-weight: 700; background: var(--navy-08); }

/* 언어 전환 (한/EN) */
.drawer__foot { padding: var(--sp-5); border-top: 1px solid var(--line); }
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.lang-switch a {
  min-width: 64px;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sub);
  text-decoration: none;
  font-weight: 600;
}
.lang-switch a[aria-current="true"] { background: var(--navy); color: var(--white); }

/* ── 모바일 하단 고정 퀵바 (SPEC §4.2) ───────────────────── */
.quickbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-quickbar);
  height: calc(var(--quickbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  /* 시안 .qb — 네이비 바, 활성 항목만 골드 */
  background: var(--navy);
  box-shadow: var(--shadow-bar);
}
.quickbar__item {
  position: relative;
  flex: 1;
  min-height: var(--touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  /* 네이비 위 흰색 62% — 대비 5.6:1 (측정치) */
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.quickbar__item .ico { width: 21px; height: 21px; }
.quickbar__item:hover { color: var(--white); }
/* 활성 — 골드(대비 5.5:1) + 굵기 병행 (색 단독 의존 금지) */
.quickbar__item[aria-current="page"] { color: var(--gold); font-weight: 700; }

/* 새 공지 뱃지 — 시안은 골드 점(건수 미표기). 건수는 sr-only로만 전달. */
.quickbar__badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 15px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid var(--navy);
}

@media (min-width: 1024px) {
  .quickbar { display: none; }   /* 데스크톱 미표시 */
}

/* ── 푸터 ─────────────────────────────────────────────────
   시안 .p-ft(밝은 배경·1줄 중앙정렬 기관정보)를 따르되,
   그 위에 사이트맵 블록을 유지한다 — 전 화면 내부 링크(SEO 자산).
   ------------------------------------------------------- */
.site-footer {
  padding: var(--sp-10) 0 var(--sp-6);
  padding-bottom: calc(var(--quickbar-h) + var(--sp-6) + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  color: var(--sub);
  font-size: var(--fs-sm);
}
@media (min-width: 1024px) {
  .site-footer { padding-bottom: var(--sp-6); }
}

.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .footer-sitemap { grid-template-columns: repeat(4, 1fr); }
}

/* 모바일에서는 사이트맵을 감춘다.
   드로어(햄버거)가 **같은 메뉴를 서버 렌더링으로 이미 담고 있고**, 현재 페이지가
   속한 묶음을 자동으로 펼친다. 헤더는 sticky 라 어느 위치에서도 한 번에 열 수 있고
   하단 퀵바도 고정이다. 남겨 두면 홈 문서 1983px 중 743px(37%)가 푸터가 된다.

   ⚠ 감추는 것은 사이트맵뿐이다. 주최·주관·주소·개인정보처리방침(.footer-info)은
     내비게이션이 아니라 기관 표기이고, 개인정보처리방침은 모든 화면에서 닿아야 한다.
   ⚠ display:none 이라 링크는 HTML 에 그대로 남는다 — 크롤러가 보는 것은 달라지지 않는다. */
@media (max-width: 767px) {
  .footer-sitemap { display: none; }
}
.footer-sitemap h2 {
  font-size: var(--fs-md);
  font-weight: var(--fw-title);
  color: var(--navy);
  margin-bottom: var(--sp-2);
}
/* 세로 목록이므로 **행 전체**를 누를 수 있게 한다.
   inline-flex로 두면 '경연'·'FAQ' 같은 짧은 링크의 폭이 26px밖에 안 돼
   글자를 정확히 겨냥해야 한다. 고령층이 주 이용자인 화면에서 실제로 불편한 지점이다.
   높이는 이미 44px였고, 폭만 열의 끝까지 넓힌다. */
.footer-sitemap a {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);   /* KWCAG 44px */
  color: var(--sub);
  text-decoration: none;
}
.footer-sitemap a:hover { color: var(--navy); text-decoration: underline; }

/* 기관 정보 1줄 — 시안 .p-ft. 좁은 화면에서는 자연 줄바꿈. */
.footer-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  text-align: center;
}
.footer-info strong { color: var(--ink-2); font-weight: 700; }
.footer-info__sep { color: var(--line); }
@media (max-width: 767px) {
  .footer-info__sep { display: none; }   /* 세로로 쌓일 때 구분자 제거 */
}
.footer-info a {
  color: var(--sub);
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
}
.footer-info a:hover { color: var(--navy); }