/* =====================================================================
   희망사다리 영상공모전 — 테마 스타일
   ===================================================================== */

/* ---------- 1. 토큰 ---------- */

:root {
  --hl-primary-900: #0b3a5d;
  --hl-primary-700: #114c77;
  --hl-primary-600: #156399;
  --hl-primary-400: #529cc6;
  --hl-primary-100: #dce9f3;
  --hl-primary-50:  #eef4fa;

  /* accent-600은 흰 배경 대비 4.4964:1 로, 일반 크기 본문 기준 AA(4.5)에
   * 아슬아슬하게 못 미친다. 큰 글씨(≥18.66px bold)에서만 통과하므로
   * 텍스트 색이나 흰 글씨의 배경으로 쓰면 폭에 따라 통과/미달이 갈린다.
   * 텍스트에 닿는 자리는 accent-700(5.48:1)을 쓰고,
   * accent-600은 포커스 링·장식 보더처럼 비텍스트(3:1 기준) 용도로만 남긴다. */
  --hl-accent-700: #bf3a16;
  --hl-accent-600: #d4451f;
  --hl-accent-500: #f0603a;
  --hl-accent-100: #fde7df;

  --hl-ink-900: #2a211c;
  --hl-ink-600: #5b5450;
  /* 캡션·메타 등 13~14px 본문에 쓰이므로 WCAG AA 4.5:1을 넘겨야 한다.
     이전 값 #8a837e는 흰색 3.73 / surface-alt 3.48 / primary-50 3.37로 모두 미달이었다.
     현재 값은 #ffffff 5.16 : #f5f7fa 4.81 : #eef4fa 4.66 으로 세 배경 모두 통과한다.
     이 토큰을 다시 밝히려면 위 세 배경 전부를 다시 계산할 것. */
  --hl-ink-400: #736c66;

  --hl-line: #d9dde1;
  --hl-surface: #ffffff;
  --hl-surface-alt: #f5f7fa;

  --hl-warn-bg:   #fff6e5;
  --hl-warn-line: #e0a93b;
  --hl-warn-ink:  #7a5310;

  --hl-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;

  --hl-fs-display: clamp(2rem, 1.1rem + 3.8vw, 3.75rem);
  --hl-fs-h1:      clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --hl-fs-h2:      clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  --hl-fs-h3:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --hl-fs-body:    1rem;
  --hl-fs-lead:    clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --hl-fs-sm:      0.875rem;

  --hl-space-1: .25rem; --hl-space-2: .5rem;  --hl-space-3: .75rem;
  --hl-space-4: 1rem;   --hl-space-5: 1.5rem; --hl-space-6: 2rem;
  --hl-space-7: 3rem;   --hl-space-8: 4rem;   --hl-space-9: 6rem;

  --hl-container: 1160px;
  --hl-gutter: clamp(1rem, .5rem + 2vw, 2rem);
  --hl-radius: 12px;
  --hl-radius-lg: 20px;
  --hl-radius-pill: 999px;
  --hl-shadow-1: 0 1px 2px rgba(11, 58, 93, .06), 0 2px 8px rgba(11, 58, 93, .06);
  --hl-shadow-2: 0 6px 24px rgba(11, 58, 93, .10);

  --hl-header-h: 72px;
}

/* ---------- 2. 리셋과 기본 조판 ---------- */

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

/* [hidden]의 display:none은 UA 스타일시트 규칙이라 작성자 규칙에 진다.
 * .hl-card{display:flex} / .hl-grid{display:grid} 가 그대로 이겨서
 * 정책 찾기 필터가 "0개 정책" + 빈 상태 메시지 + 카드가 그대로 보이는
 * 모순 화면을 만들었다(.hl-empty만 display 선언이 없어 우연히 동작했다).
 * 작성자 레이어에서 다시 선언해 그 경로를 막는다. display를 선언하는
 * 모든 컴포넌트 클래스를 이겨야 하므로 !important가 필요하다. */
[hidden] { display: none !important; }

html {
  /* 가로 overflow 방지: clip은 sticky 헤더를 깨지 않는다 (hidden은 깬다). */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hl-header-h) + var(--hl-space-4));
}

body {
  overflow-x: clip;
  margin: 0;
  font-family: var(--hl-font-sans);
  font-size: var(--hl-fs-body);
  line-height: 1.7;
  color: var(--hl-ink-900);
  background: var(--hl-surface);
  /* 한글 어절 단위 줄바꿈 — 전 화면 공통 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--hl-space-3);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hl-primary-900);
  word-break: keep-all;
}

p { margin: 0 0 var(--hl-space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--hl-primary-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hl-primary-700); }

img, svg, video, iframe { max-width: 100%; height: auto; }

ul, ol { padding-left: 1.25em; }
li { margin-bottom: var(--hl-space-2); }

:focus-visible {
  outline: 3px solid var(--hl-accent-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.hl-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.hl-skip {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: var(--hl-space-3) var(--hl-space-5);
  background: var(--hl-primary-900); color: #fff;
  border-radius: 0 0 var(--hl-radius) var(--hl-radius);
  text-decoration: none; font-weight: 600;
  transition: transform 150ms ease;
}
.hl-skip:focus { transform: translate(-50%, 0); color: #fff; }

.hl-ext { margin-left: .25em; font-size: .85em; }

/* ---------- 3. 레이아웃 ---------- */

.hl-container {
  width: 100%;
  max-width: var(--hl-container);
  margin-inline: auto;
  padding-inline: var(--hl-gutter);
}

.hl-main { display: block; }

.hl-section { padding-block: var(--hl-space-8); }
.hl-section--alt { background: var(--hl-surface-alt); }
.hl-section--tight { padding-block: var(--hl-space-7); }

.hl-section__title { font-size: var(--hl-fs-h2); margin-bottom: var(--hl-space-3); }
.hl-section__lead {
  font-size: var(--hl-fs-lead);
  color: var(--hl-ink-600);
  max-width: 62ch;
  margin-bottom: var(--hl-space-6);
}

.hl-grid { display: grid; gap: var(--hl-space-5); }
.hl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .hl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hl-grid--2, .hl-grid--3, .hl-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* 표는 래퍼에서만 가로 스크롤 — 페이지 자체는 절대 넘치지 않는다 */
.hl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hl-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--hl-fs-sm); min-width: 480px;
}
.hl-table th, .hl-table td {
  padding: var(--hl-space-3) var(--hl-space-4);
  border-bottom: 1px solid var(--hl-line);
  text-align: left; vertical-align: top;
}
.hl-table th { background: var(--hl-primary-50); color: var(--hl-primary-900); font-weight: 600; white-space: nowrap; }

/* ---------- 4. 헤더 ---------- */

.hl-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--hl-line);
}

.hl-header__inner {
  display: flex; align-items: center; gap: var(--hl-space-4);
  min-height: var(--hl-header-h);
}

.hl-header__brand { flex: 0 0 auto; }

.hl-logo {
  display: flex; align-items: center; gap: var(--hl-space-2);
  text-decoration: none; color: var(--hl-primary-900);
}
.hl-logo__mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 10px;
  background: var(--hl-primary-600); color: #fff;
}
.hl-logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.hl-logo__sub { font-size: .6875rem; color: var(--hl-ink-600); letter-spacing: -0.01em; }
.hl-logo__main { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.03em; }

.hl-nav { flex: 1 1 auto; min-width: 0; }
/* ≥1024px에서는 햄버거를 숨기고 7개 메뉴를 가로로 편다.
   header.php의 <details>에는 open이 항상 붙어 있으므로 여는 수단이 없어도
   패널이 렌더된다. open을 빼면 이 폭에서 내비게이션 전체가 사라진다. */
.hl-nav__toggle { display: none; }
.hl-nav > summary { list-style: none; }
.hl-nav > summary::-webkit-details-marker { display: none; }

.hl-nav__list {
  display: flex; align-items: center; gap: clamp(.5rem, .1rem + 1.1vw, 1.5rem);
  margin: 0; padding: 0; list-style: none;
  justify-content: center;
}
.hl-nav__list li { margin: 0; }
.hl-nav__list a {
  display: block; padding: var(--hl-space-2) 2px;
  font-size: .9375rem; font-weight: 600;
  color: var(--hl-ink-900); text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
.hl-nav__list a:hover { color: var(--hl-primary-600); border-bottom-color: var(--hl-primary-400); }
.hl-nav__list .current-menu-item > a,
.hl-nav__list [aria-current="page"] {
  color: var(--hl-primary-600); border-bottom-color: var(--hl-accent-500);
}

.hl-header__cta { display: flex; align-items: center; gap: var(--hl-space-3); flex: 0 0 auto; }

/* ---------- 5. 버튼·배지·칩 ---------- */

.hl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .25em;
  min-height: 44px; padding: var(--hl-space-3) var(--hl-space-5);
  border: 1.5px solid transparent; border-radius: var(--hl-radius-pill);
  font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
/* 40px이었으나 이 테마의 다른 모든 컨트롤(기본 .hl-btn, 토글, 표 컨트롤)이
   44px이라 여기만 문서 기준(44x44)에 못 미쳤다. 헤더는 데스크톱 72px /
   모바일 60px이라 44px이 그대로 들어간다. */
.hl-btn--sm { min-height: 44px; padding: var(--hl-space-2) var(--hl-space-4); font-size: .9375rem; }
.hl-btn--lg { min-height: 52px; padding: var(--hl-space-4) var(--hl-space-7); font-size: 1.0625rem; }

.hl-btn--primary { background: var(--hl-primary-600); color: #fff; }
.hl-btn--primary:hover { background: var(--hl-primary-700); color: #fff; box-shadow: var(--hl-shadow-2); }

/* 접수 CTA. Form URL이 들어오면 이 버튼이 실제로 렌더된다.
 * accent-600 배경 + 흰 글씨는 4.4964:1 이라 그때 AA 미달이 된다. */
.hl-btn--accent { background: var(--hl-accent-700); color: #fff; }
.hl-btn--accent:hover { background: #b53916; color: #fff; box-shadow: var(--hl-shadow-2); }

.hl-btn--ghost { background: transparent; border-color: var(--hl-primary-600); color: var(--hl-primary-600); }
.hl-btn--ghost:hover { background: var(--hl-primary-50); color: var(--hl-primary-700); }

/* 비활성 컨트롤은 WCAG 1.4.3 대비 요건에서 제외된다. 그래서 --hl-ink-400과
   묶지 않고 값을 따로 둔다. 토큰이 밝아지든 어두워지든 "누를 수 없음"이
   시각적으로 계속 읽혀야 하기 때문이다. */
.hl-btn[aria-disabled="true"] {
  /* #6b6560 은 이 배경(#d9dde1) 위에서 4.2074:1 로 AA(4.5) 미달이었다.
   * 비활성 버튼이라고 읽히지 않아도 되는 것은 아니다 — "접수 링크 준비중"은
   * 방문자가 지금 무엇을 할 수 없는지 알려 주는 유일한 문구다.
   * #5f5a55 는 4.9932:1 로 통과하면서 "누를 수 없음"의 회색조를 유지한다. */
  background: var(--hl-line); border-color: var(--hl-line); color: #5f5a55;
  cursor: not-allowed; pointer-events: none; box-shadow: none;
}

.hl-btn-row { display: flex; flex-wrap: wrap; gap: var(--hl-space-3); }

.hl-badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .25em .75em; border-radius: var(--hl-radius-pill);
  font-size: .8125rem; font-weight: 700; white-space: nowrap;
}
.hl-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hl-badge--open      { background: #e3f3e8; color: #1c6b38; }
.hl-badge--preparing { background: var(--hl-primary-100); color: var(--hl-primary-700); }
.hl-badge--closed    { background: #eceef0; color: #55504c; }
.hl-badge--paused    { background: var(--hl-warn-bg); color: var(--hl-warn-ink); }

.hl-chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .4em 1em; border-radius: var(--hl-radius-pill);
  background: var(--hl-primary-100); color: var(--hl-primary-700);
  font-size: .9375rem; font-weight: 600;
}
.hl-chip--sm { padding: .2em .7em; font-size: .8125rem; }
.hl-chip--accent { background: var(--hl-accent-100); color: #97300f; }
/* 좁은 폭에서 "접수"가 "접 / 수"로 쪼개지지 않게 라벨은 줄바꿈을 막는다. */
.hl-chip__label { font-weight: 700; opacity: .8; white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 480px) {
  /* 390px에서는 칩이 한 줄을 다 쓰고, 라벨과 값이 위아래로 놓이게 한다. */
  .hl-hero__chips { flex-direction: column; align-items: stretch; }
  .hl-hero__chips .hl-chip {
    flex-wrap: wrap;
    row-gap: .1em;
    line-height: 1.5;
    padding: .55em 1em;
  }
}

/* ---------- 6. 히어로 (레이어 합성) ---------- */

.hl-hero {
  position: relative;
  background: linear-gradient(180deg, var(--hl-primary-50) 0%, var(--hl-primary-100) 100%);
  overflow: hidden;
}
.hl-hero::after {
  /* 지면선 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px; background: var(--hl-primary-400); opacity: .35;
}

.hl-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--hl-space-6);
  padding-block: var(--hl-space-8) 0;
}

.hl-hero__text { padding-bottom: var(--hl-space-8); }

.hl-hero__eyebrow {
  display: inline-block; margin-bottom: var(--hl-space-3);
  padding: .3em 1em; border-radius: var(--hl-radius-pill);
  background: var(--hl-surface); color: var(--hl-primary-700);
  font-size: .875rem; font-weight: 700; box-shadow: var(--hl-shadow-1);
}

.hl-hero__title {
  font-size: var(--hl-fs-display);
  line-height: 1.15; letter-spacing: -0.035em;
  margin-bottom: var(--hl-space-4);
  color: var(--hl-primary-600);
}
.hl-hero__title .hl-hero__title-sub {
  display: block;
  font-size: .42em; font-weight: 600; letter-spacing: -0.01em;
  color: var(--hl-primary-900); margin-bottom: .35em;
}

.hl-hero__slogan {
  font-size: var(--hl-fs-lead); color: var(--hl-ink-900);
  max-width: 34ch; margin-bottom: var(--hl-space-5);
}

.hl-hero__chips { display: flex; flex-wrap: wrap; gap: var(--hl-space-2); margin-bottom: var(--hl-space-5); }

.hl-hero__visual {
  position: relative;
  aspect-ratio: 16 / 11;
  display: flex; align-items: flex-end; justify-content: center;
}
.hl-hero__scene, .hl-hero__people { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.hl-hero__scene  { width: 118%; opacity: .95; }
.hl-hero__scene img  { width: 100%; height: auto; object-fit: contain; object-position: center bottom; }
.hl-hero__people { width: 92%; }
.hl-hero__people img { width: 100%; height: auto; object-fit: contain; object-position: center bottom; }

@media (max-width: 1023px) {
  /* 히어로 분기점은 1024px — 1024에서는 2단을 유지한다 */
  .hl-hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: var(--hl-space-7); }
  .hl-hero__text { padding-bottom: var(--hl-space-5); }
  .hl-hero__visual { aspect-ratio: 4 / 3; max-width: 560px; margin-inline: auto; width: 100%; }
  .hl-hero__slogan { max-width: none; }
}

@media (max-width: 767px) {
  .hl-hero__visual { aspect-ratio: 4 / 3; }
  .hl-hero__scene { width: 132%; }
  .hl-hero__people { width: 100%; }
}

/* ---------- 7. 잠금 블록 (확정 후 공지) ---------- */

.hl-pending {
  margin: var(--hl-space-4) 0;
  padding: var(--hl-space-4) var(--hl-space-5);
  background: var(--hl-warn-bg);
  border: 1px dashed var(--hl-warn-line);
  border-left: 4px solid var(--hl-warn-line);
  border-radius: var(--hl-radius);
  color: var(--hl-warn-ink);
}
.hl-pending__tag {
  display: inline-block; margin-bottom: var(--hl-space-2);
  padding: .15em .7em; border-radius: var(--hl-radius-pill);
  background: var(--hl-warn-line); color: #3d2905;
  font-size: .75rem; font-weight: 800; letter-spacing: .02em;
}
.hl-pending__heading { font-weight: 700; margin-bottom: var(--hl-space-1); }
.hl-pending__body { margin: 0; font-size: .9375rem; }

/* ---------- 8. 카드 ---------- */

.hl-card {
  display: flex; flex-direction: column;
  background: var(--hl-surface);
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-radius);
  overflow: hidden;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.hl-card:hover { box-shadow: var(--hl-shadow-2); transform: translateY(-2px); }
.hl-card__body { padding: var(--hl-space-5); flex: 1 1 auto; }
.hl-card__title { font-size: var(--hl-fs-h3); margin-bottom: var(--hl-space-2); }
.hl-card__title a { color: inherit; text-decoration: none; }
.hl-card__title a:hover { color: var(--hl-primary-600); text-decoration: underline; }
.hl-card__meta { font-size: var(--hl-fs-sm); color: var(--hl-ink-400); margin-bottom: var(--hl-space-2); }
.hl-card__text { font-size: .9375rem; color: var(--hl-ink-600); margin: 0; }
.hl-card__foot { padding: 0 var(--hl-space-5) var(--hl-space-5); }

.hl-card--stat { text-align: left; border-top: 4px solid var(--hl-primary-400); }
.hl-card--stat .hl-card__label { font-size: var(--hl-fs-sm); color: var(--hl-ink-600); font-weight: 600; margin-bottom: var(--hl-space-1); }
.hl-card--stat .hl-card__value { font-size: var(--hl-fs-h3); font-weight: 800; color: var(--hl-primary-900); margin: 0; }
.hl-card--stat .hl-card__note { font-size: var(--hl-fs-sm); color: var(--hl-ink-400); margin: var(--hl-space-2) 0 0; }

/* ---------- 9. 빈 상태 ---------- */

.hl-empty {
  padding: var(--hl-space-8) var(--hl-space-5);
  text-align: center;
  background: var(--hl-surface-alt);
  border: 1px dashed var(--hl-line);
  border-radius: var(--hl-radius);
}
.hl-empty__title { font-weight: 700; color: var(--hl-ink-900); margin-bottom: var(--hl-space-2); }
.hl-empty__body { color: var(--hl-ink-600); font-size: .9375rem; margin: 0; }

/* ---------- 10. 외부 이동 고지 ---------- */

.hl-external-notice {
  padding: var(--hl-space-5);
  background: var(--hl-primary-50);
  border: 1px solid var(--hl-primary-100);
  border-left: 4px solid var(--hl-primary-600);
  border-radius: var(--hl-radius);
  margin-bottom: var(--hl-space-5);
}
.hl-external-notice__title { font-weight: 700; color: var(--hl-primary-900); margin-bottom: var(--hl-space-2); }
.hl-external-notice__body { font-size: .9375rem; color: var(--hl-ink-600); margin: 0; }

/* ---------- 11. 아코디언 ---------- */

.hl-acc {
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-radius);
  background: var(--hl-surface);
  margin-bottom: var(--hl-space-3);
  overflow: hidden;
}
.hl-acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hl-space-4);
  padding: var(--hl-space-4) var(--hl-space-5);
  font-size: var(--hl-fs-h3); font-weight: 700; color: var(--hl-primary-900);
  cursor: pointer; list-style: none;
}
.hl-acc > summary::-webkit-details-marker { display: none; }
.hl-acc > summary::after {
  content: "+"; flex: 0 0 auto;
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--hl-primary-600); transition: transform 150ms ease;
}
.hl-acc[open] > summary::after { content: "−"; }
.hl-acc > summary:hover { background: var(--hl-primary-50); }
.hl-acc__body { padding: 0 var(--hl-space-5) var(--hl-space-5); border-top: 1px solid var(--hl-line); padding-top: var(--hl-space-4); }

/* ---------- 12. 타임라인 ---------- */

.hl-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.hl-timeline::before {
  content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px;
  width: 2px; background: var(--hl-primary-100);
}
.hl-timeline > li { position: relative; margin: 0 0 var(--hl-space-5); padding-left: var(--hl-space-7); }
.hl-timeline > li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--hl-surface); border: 3px solid var(--hl-primary-600);
}
.hl-timeline > li.is-pending::before { border-color: var(--hl-warn-line); border-style: dotted; }
.hl-timeline__label { font-weight: 700; color: var(--hl-primary-900); display: block; }
.hl-timeline__date { font-size: var(--hl-fs-sm); color: var(--hl-ink-600); }
.hl-timeline__note { font-size: var(--hl-fs-sm); color: var(--hl-ink-600); margin: var(--hl-space-1) 0 0; }

/* ---------- 13. 페이지 헤더·브레드크럼 ---------- */

.hl-pagehead {
  background: linear-gradient(180deg, var(--hl-primary-50), var(--hl-surface));
  border-bottom: 1px solid var(--hl-line);
  padding-block: var(--hl-space-6) var(--hl-space-7);
}
.hl-pagehead__title { font-size: var(--hl-fs-h1); margin-bottom: var(--hl-space-2); }
.hl-pagehead__lead { font-size: var(--hl-fs-lead); color: var(--hl-ink-600); max-width: 62ch; margin: 0; }

.hl-breadcrumb { margin-bottom: var(--hl-space-4); }
.hl-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; margin: 0; padding: 0; font-size: var(--hl-fs-sm); }
.hl-breadcrumb li { margin: 0; color: var(--hl-ink-600); }
.hl-breadcrumb li + li::before { content: "›"; margin-right: .5em; color: var(--hl-ink-400); }
.hl-breadcrumb a { color: var(--hl-ink-600); text-decoration: none; }
.hl-breadcrumb a:hover { color: var(--hl-primary-600); text-decoration: underline; }

/* ---------- 14. 본문 (에디터 출력) ---------- */

.hl-prose { max-width: 72ch; }
.hl-prose h2 { font-size: var(--hl-fs-h2); margin-top: var(--hl-space-7); }
.hl-prose h3 { font-size: var(--hl-fs-h3); margin-top: var(--hl-space-6); }
.hl-prose > *:first-child { margin-top: 0; }
.hl-prose img { border-radius: var(--hl-radius); }
.hl-prose blockquote {
  margin: var(--hl-space-5) 0; padding: var(--hl-space-4) var(--hl-space-5);
  border-left: 4px solid var(--hl-primary-400); background: var(--hl-primary-50);
  border-radius: 0 var(--hl-radius) var(--hl-radius) 0;
}
.hl-prose table { width: 100%; border-collapse: collapse; font-size: var(--hl-fs-sm); }
.hl-prose th, .hl-prose td { padding: var(--hl-space-3); border: 1px solid var(--hl-line); }

/* ---------- 15. 목록 화면 ---------- */

.hl-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hl-primary-900); }
.hl-list > li { margin: 0; border-bottom: 1px solid var(--hl-line); }
.hl-list__link {
  display: flex; align-items: baseline; gap: var(--hl-space-4);
  padding: var(--hl-space-5) var(--hl-space-2);
  text-decoration: none; color: inherit;
}
.hl-list__link:hover { background: var(--hl-primary-50); }
.hl-list__main { flex: 1 1 auto; min-width: 0; }
.hl-list__title { font-size: var(--hl-fs-h3); font-weight: 700; color: var(--hl-primary-900); margin: 0 0 var(--hl-space-1); }
.hl-list__excerpt { font-size: .9375rem; color: var(--hl-ink-600); margin: 0; }
.hl-list__date { flex: 0 0 auto; font-size: var(--hl-fs-sm); color: var(--hl-ink-400); white-space: nowrap; }
.hl-list__pin {
  display: inline-block; margin-right: .5em; padding: .1em .6em;
  border-radius: var(--hl-radius-pill); background: var(--hl-accent-100); color: #97300f;
  font-size: .75rem; font-weight: 700; vertical-align: middle;
}

@media (max-width: 767px) {
  .hl-list__link { flex-direction: column; gap: var(--hl-space-2); }
}

/* ---------- 16. FAQ ---------- */

.hl-faq__group { margin-bottom: var(--hl-space-7); }
.hl-faq__group-title { font-size: var(--hl-fs-h3); color: var(--hl-primary-600); margin-bottom: var(--hl-space-4); }
.hl-acc__q { display: flex; gap: .6em; align-items: baseline; }
/* 390px에서는 이 글리프가 large-text 기준(18.66px bold) 아래로 내려가
 * accent-600(4.4964:1)이면 AA 미달이 된다. 폭에 따라 판정이 갈리지 않도록
 * 일반 크기 기준을 통과하는 accent-700을 쓴다. */
.hl-acc__q-mark { color: var(--hl-accent-700); font-weight: 800; flex: 0 0 auto; }

/* ---------- 17. 정책 찾기 ---------- */

.hl-policy-filter {
  display: flex; flex-wrap: wrap; gap: var(--hl-space-3); align-items: flex-end;
  padding: var(--hl-space-5);
  background: var(--hl-surface-alt); border-radius: var(--hl-radius);
  margin-bottom: var(--hl-space-6);
}
.hl-policy-filter__field { display: flex; flex-direction: column; gap: var(--hl-space-1); flex: 1 1 240px; min-width: 0; }
.hl-policy-filter label { font-size: var(--hl-fs-sm); font-weight: 600; color: var(--hl-ink-600); }
.hl-policy-filter input, .hl-policy-filter select {
  min-height: 44px; padding: var(--hl-space-2) var(--hl-space-3);
  border: 1px solid var(--hl-line); border-radius: var(--hl-radius);
  font-family: inherit; font-size: 1rem; background: var(--hl-surface); color: inherit;
  max-width: 100%;
}
.hl-policy-count { font-size: var(--hl-fs-sm); color: var(--hl-ink-600); margin-bottom: var(--hl-space-4); }

.hl-policy__summary { font-size: .9375rem; color: var(--hl-ink-600); margin-bottom: var(--hl-space-3); }
.hl-policy__dl { margin: 0 0 var(--hl-space-3); font-size: .875rem; }
.hl-policy__dl dt { font-weight: 700; color: var(--hl-primary-700); }
.hl-policy__dl dd { margin: 0 0 var(--hl-space-2); color: var(--hl-ink-600); }
.hl-policy__asof { font-size: .8125rem; color: var(--hl-ink-400); }

/* ---------- 18. 발표·수상 ---------- */

.hl-award__thumb { aspect-ratio: 16 / 9; background: var(--hl-surface-alt); }
.hl-award__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-award__meta { display: flex; flex-wrap: wrap; gap: var(--hl-space-2); margin-bottom: var(--hl-space-2); }
.hl-award__entrant { font-size: .9375rem; color: var(--hl-ink-600); margin-bottom: var(--hl-space-2); }
.hl-award__desc { font-size: .9375rem; color: var(--hl-ink-600); }
.hl-award__link { margin: var(--hl-space-3) 0 0; font-weight: 600; }

/* ---------- 19. 푸터 ---------- */

.hl-footer {
  background: var(--hl-primary-900); color: #cfdcea;
  padding-block: var(--hl-space-8) var(--hl-space-6);
  margin-top: var(--hl-space-9);
}
.hl-footer a { color: #e4edf6; }
.hl-footer a:hover { color: #fff; }

.hl-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--hl-space-6);
}
@media (max-width: 767px) { .hl-footer__grid { grid-template-columns: minmax(0, 1fr); } }

.hl-footer__name { font-size: 1.0625rem; font-weight: 800; color: #fff; margin-bottom: var(--hl-space-2); }
.hl-footer__org { font-size: var(--hl-fs-sm); margin-bottom: var(--hl-space-3); }
.hl-footer__org span + span { margin-left: var(--hl-space-4); }
.hl-footer__boundary { font-size: .8125rem; line-height: 1.7; color: #a9bed3; max-width: 46ch; }
.hl-footer__heading { font-size: .9375rem; color: #fff; margin-bottom: var(--hl-space-3); }
.hl-footer__list { list-style: none; margin: 0; padding: 0; font-size: var(--hl-fs-sm); }
.hl-footer__list li { margin-bottom: var(--hl-space-2); }
.hl-footer__list a { text-decoration: none; }
.hl-footer__list a:hover { text-decoration: underline; }
.hl-footer__muted { color: #93a9bf; font-size: var(--hl-fs-sm); }
.hl-footer__sns { margin-top: var(--hl-space-4); }

.hl-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--hl-space-3);
  justify-content: space-between; align-items: center;
  margin-top: var(--hl-space-7); padding-top: var(--hl-space-5);
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: var(--hl-fs-sm);
}
.hl-footer__legal, .hl-footer__copy { margin: 0; }

/* ---------- 20. 페이지네이션 ---------- */

.hl-pagination { margin-top: var(--hl-space-6); }
.hl-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--hl-space-2); justify-content: center; }
.hl-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--hl-space-3);
  border: 1px solid var(--hl-line); border-radius: var(--hl-radius);
  text-decoration: none; color: var(--hl-ink-900); font-weight: 600;
}
.hl-pagination .page-numbers:hover { background: var(--hl-primary-50); }
.hl-pagination .page-numbers.current { background: var(--hl-primary-600); border-color: var(--hl-primary-600); color: #fff; }

/* ---------- 21. 모바일 내비게이션 (≤1023px) ---------- */

@media (max-width: 1023px) {
  :root { --hl-header-h: 60px; }

  .hl-header__inner { flex-wrap: wrap; gap: var(--hl-space-3); }
  .hl-header__brand { order: 1; margin-right: auto; }
  .hl-header__cta   { order: 2; }
  .hl-nav           { order: 3; flex: 0 0 auto; }

  .hl-logo__main { font-size: .9375rem; }
  .hl-logo__sub  { font-size: .625rem; }
  .hl-logo__mark { width: 34px; height: 34px; flex-basis: 34px; }

  .hl-nav__toggle {
    display: inline-flex; align-items: center; gap: .4em;
    min-height: 44px; padding: var(--hl-space-2) var(--hl-space-3);
    border: 1px solid var(--hl-line); border-radius: var(--hl-radius);
    font-size: .875rem; font-weight: 700; color: var(--hl-primary-900);
    cursor: pointer; background: var(--hl-surface);
    /* 390px에서 "메뉴" 글자가 햄버거 아이콘 아래로 떨어져 2행이 됐다.
     * 기능·overflow 문제는 없었지만 헤더 높이가 폭마다 달라진다. */
    white-space: nowrap;
  }
  .hl-nav__bars { display: inline-flex; flex-direction: column; gap: 3px; }
  .hl-nav__bars span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }

  .hl-nav__panel {
    background: var(--hl-surface);
    border-bottom: 1px solid var(--hl-line);
    box-shadow: var(--hl-shadow-2);
    padding: var(--hl-space-3) var(--hl-gutter) var(--hl-space-5);
  }
  /* 스크립트가 살아 있을 때만 드롭다운으로 겹쳐 띄운다.
     스크립트가 없으면 <details>가 open인 채로 남으므로, 이때 absolute를 걸면
     메뉴가 본문 위에 영구히 덮인다. 정적 배치로 두면 그냥 펼쳐진 목록이 되어
     7개 메뉴에 계속 도달할 수 있다. (.hl-js는 header.php의 <head>에서 붙인다) */
  .hl-js .hl-nav__panel { position: absolute; left: 0; right: 0; top: 100%; }
  .hl-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .hl-nav__list a {
    padding: var(--hl-space-4) var(--hl-space-2);
    border-bottom: 1px solid var(--hl-line);
    font-size: 1rem;
  }
  .hl-nav__list a:hover { border-bottom-color: var(--hl-line); }
  .hl-nav__list li:last-child a { border-bottom: none; }
}

@media (max-width: 400px) {
  /* 390px에서 헤더 한 줄이 넘치지 않도록 배지를 숨긴다. 상태는 히어로와 /apply에 남는다. */
  .hl-header__cta .hl-badge { display: none; }
}

/* ---------- 22. 모션 축소 ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 23. 인쇄 ---------- */

@media print {
  .hl-header, .hl-footer, .hl-skip, .hl-btn, .hl-policy-filter { display: none !important; }
  .hl-acc[open] > summary::after, .hl-acc > summary::after { display: none; }
  details { display: block; }
  details > *:not(summary) { display: block !important; }
  body { color: #000; }
}