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

/* ---------- 0. 자체 호스팅 웹폰트 ----------
 * 세 서체 모두 테마 assets/fonts/ 의 WOFF2를 상대 경로로 읽는다. 외부 폰트
 * CDN(jsDelivr·Google Fonts)은 쓰지 않는다 — 방문자 IP가 제3자에 전달되는
 * 경로를 없애기 위해서다 (page-templates/template-privacy.php 외부 서비스 연결).
 * 변환 증거(SHA-256·글리프 수)는 assets/fonts/font-build-manifest.json,
 * 출처·라이선스는 assets/fonts/FONT_SOURCES_AND_LICENSES.md 에 있다.
 *
 * 굵기는 "실제로 존재하는 파일"만 선언한다. 없는 굵기를 선언하면 브라우저가
 * 합성(synthetic bold)으로 채워 PPT가 지정한 계층이 뭉개진다. */

@font-face {
  font-family: "Paperlogy";
  src: url("../fonts/Paperlogy-Light-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../fonts/Paperlogy-Regular-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../fonts/Paperlogy-Medium-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../fonts/Paperlogy-SemiBold-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("../fonts/Paperlogy-Bold-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Mapo당인리발전소체는 Regular 400 단일 굵기다. 600/700을 선언하지 않는다. */
@font-face {
  font-family: "MapoDPP";
  src: url("../fonts/MapoDPP-Regular-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 나눔손글씨 펜. name table의 family가 "Nanum Pen"이라 두 이름 모두 스택에 둔다. */
@font-face {
  font-family: "Nanum Pen";
  src: url("../fonts/NanumPenScript-Regular-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --hl-primary-900: #194c53;
  --hl-primary-700: #24575a;
  --hl-primary-600: #306a6d;
  --hl-primary-400: #6f9b97;
  --hl-primary-100: #ebeee6;
  --hl-primary-50:  #f5f7f2;

  /* 기존 코랄 accent 이름은 컴포넌트 호환을 위해 유지하되 색은 딥그린으로
   * 통합한다. 텍스트·CTA는 accent-700, 포커스는 600, 장식은 500을 사용하며
   * 오류 상태의 레드는 아래 문의 피드백처럼 의미가 있는 자리에만 남긴다. */
  --hl-accent-700: #306a6d;
  --hl-accent-600: #24575a;
  --hl-accent-500: #4f8581;
  --hl-accent-100: #e4ece7;

  --hl-ink-900: #303633;
  --hl-ink-600: #59615e;
  /* 캡션·메타 등 13~14px 본문에 쓰이므로 밝은 그린 배경까지 WCAG AA
   * 4.5:1을 넘긴다: white 5.49 / primary-50 5.09 / primary-100 4.68. */
  --hl-ink-400: #626b68;

  --hl-line: #d5ddd8;
  --hl-surface: #ffffff;
  --hl-surface-alt: #f5f7f2;

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

  /* 전역 기본 UI·본문 = Paperlogy 400. fallback은 시스템 한글 스택만 둔다. */
  --hl-font-sans: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  /* 메인 히어로 제목 전용. Paperlogy로 떨어져도 조판이 무너지지 않게 뒤에 둔다. */
  --hl-font-display: "MapoDPP", "Paperlogy", sans-serif;
  /* 지정된 감성 문구·단계 제목 전용. */
  --hl-font-hand: "Nanum Pen", "Nanum Pen Script", cursive;

  --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(25, 76, 83, .06), 0 2px 8px rgba(25, 76, 83, .06);
  --hl-shadow-2: 0 6px 24px rgba(25, 76, 83, .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: 700;
  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; }

/* 새 창 표시. em만 쓰면 부모를 따라 내려가 최소 글자 크기 아래로 떨어진다
   (본문 16px에서 13.6px, .9375rem 문단 안에서는 12.75px까지 내려갔다).
   max()로 14px 바닥을 두고, 그보다 큰 문맥에서만 상대 축소가 살아 있게 한다. */
.hl-ext { margin-left: .25em; font-size: max(.875rem, .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);
  text-align: left;
}

.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; }

.hl-award-summary { background: var(--hl-primary-50); border-radius: var(--hl-radius); padding: var(--hl-space-5) var(--hl-space-6); }
.hl-award-summary__total { font-size: var(--hl-fs-h3); font-weight: 700; color: var(--hl-primary-900); text-align: center; }

.hl-cautions { padding-left: var(--hl-space-6); }
.hl-cautions > li { margin-top: var(--hl-space-3); line-height: 1.7; }

/* ---------- 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);
}

/* 헤더 안쪽 줄은 본문 컨테이너(max-width 1160px)를 쓰지 않는다.
   좌우 여백은 본문과 같은 --hl-gutter(16~32px)만 남기고 가로 100%를 채운다. */
.hl-header__inner {
  display: flex; align-items: center; gap: var(--hl-space-4);
  width: 100%;
  padding-inline: var(--hl-gutter);
  min-height: var(--hl-header-h);
}

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

.hl-logo {
  display: flex; flex-direction: column; line-height: 1.2;
  text-decoration: none; color: var(--hl-primary-900);
}
.hl-logo__sub { font-size: .875rem; color: var(--hl-ink-600); letter-spacing: -0.01em; }
.hl-logo__main { font-size: 1.0625rem; font-weight: 700; 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: 1rem; 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; }

/* ≥1024px 3구역: 좌측 텍스트 타이틀 / 뷰포트 정중앙 메뉴 / 우측 끝 접수하기.
   메뉴를 flex 흐름에 두면 중앙이 "좌우 블록을 뺀 나머지의 가운데"라서
   좌우 폭이 다른 순간 뷰포트 중앙과 어긋난다. 그래서 메뉴만 흐름에서 빼
   컨테이너(=뷰포트 폭) 기준 50%에 고정한다. */
@media (min-width: 1024px) {
  .hl-header__inner { position: relative; }
  .hl-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: 0 0 auto;
  }
  .hl-header__cta { margin-left: 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: 15px;
  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;
}
/* 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. 딥그린 600 배경 + 흰 글씨는 6.16:1로 AA를 통과한다. */
.hl-btn--accent { background: var(--hl-accent-700); color: #fff; }
.hl-btn--accent:hover { background: var(--hl-primary-700); 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"] {
  /* 비활성 버튼이라고 읽히지 않아도 되는 것은 아니다 — "접수 링크 준비 중"은
   * 방문자가 지금 무엇을 할 수 없는지 알려 주는 유일한 문구다.
   * #5f5a55 는 현재 line(#d5ddd8) 위에서 4.92: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); }

/* PPT 6차가 표시한 메인의 CTA 두 묶음 전용. 문구 길이가 달라 모바일에서 두
 * 버튼의 우측 끝선이 어긋나 보였다. 지정된 묶음만 세로로 세워 같은 부모 폭을
 * 꽉 채우게 한다. 전역 .hl-btn-row 와 다른 페이지의 버튼 배치는 그대로다.
 * 데스크톱(≥768px)에서는 아무것도 바뀌지 않는다. */
@media (max-width: 767px) {
  .hl-btn-row--stack-mobile { flex-direction: column; align-items: stretch; }
  .hl-btn-row--stack-mobile > .hl-btn { width: 100%; }
}

.hl-badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .25em .75em; border-radius: var(--hl-radius-pill);
  font-size: .875rem; 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: .875rem; }
.hl-chip--accent { background: var(--hl-accent-100); color: var(--hl-primary-900); }
/* 좁은 폭에서 "접수"가 "접 / 수"로 쪼개지지 않게 라벨은 줄바꿈을 막는다. */
.hl-chip__label { font-weight: 700; opacity: .8; white-space: nowrap; flex: 0 0 auto; }

/* 히어로 칩의 "접수"·"발표" 라벨에 색 박스를 씌워 가독성 강화 */
.hl-hero__chips .hl-chip__label {
  background: var(--hl-primary-700);
  color: #fff;
  padding: .1em .55em;
  border-radius: var(--hl-radius-pill);
  opacity: 1;
  font-size: .875rem;
}

/* 히어로 `발표` 값의 두 표기. 기본은 원문이고, 축약본은 숨어 있다.
 * 축약본이 없는 설정값(연도 표기가 없을 때)에서는 템플릿이 원문 하나만
 * 렌더하므로 이 규칙에 걸리지 않는다. */
.hl-hero__result--short { display: none; }

@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;
  }

  /* 좁은 폭에서 발표 값의 마지막 `통보)`가 둘째 줄로 떨어졌다. 안내 문구를
   * 지우지 않고 연도만 줄인 축약 표기로 바꿔 한 줄에 담는다. nowrap 은
   * "한 줄"을 구조로 못 박고, 남는 여유는 이 값에만 건 글자 크기로 만든다.
   * 전역 본문·버튼 토큰과 옆의 `접수` 칩은 건드리지 않는다. */
  .hl-hero__result--full { display: none; }
  .hl-hero__result--short {
    display: inline;
    white-space: nowrap;
    font-size: .875rem;
  }
}

/* ---------- 6. 메인 히어로 ---------- */

.hl-hero {
  position: relative;
  overflow: hidden;
}

.hl-home-hero {
  isolation: isolate;
  background-color: #fff9ef;
  background-image: url("../img/home-hero-background.png");
  background-image: -webkit-image-set(
    url("../img/home-hero-background.webp") 1x,
    url("../img/home-hero-background.png") 1x
  );
  background-image: image-set(
    url("../img/home-hero-background.webp") type("image/webp") 1x,
    url("../img/home-hero-background.png") type("image/png") 1x
  );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.hl-home-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}

.hl-hero__inner {
  position: relative;
  z-index: 1;
  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);
}

/* 메인 히어로 제목만 Mapo당인리발전소체를 쓴다. 이 서체는 Regular 400 한 굵기뿐이라
 * font-weight를 400으로 못박고 font-synthesis로 브라우저 합성 Bold를 금지한다.
 * (h1 기본값 700을 그대로 두면 굵기 파일이 없어 합성 Bold가 그려진다.) */
.hl-hero__title {
  font-family: var(--hl-font-display);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-synthesis: none;
  font-size: var(--hl-fs-display);
  line-height: 1.15; letter-spacing: -0.035em;
  margin-bottom: var(--hl-space-4);
  color: var(--hl-primary-900);
}
.hl-hero__title .hl-hero__title-sub {
  display: block;
  /* 이 줄도 같은 서체·같은 굵기다. 위계는 굵기가 아니라 크기로만 만든다. */
  font-size: max(1rem, .42em); font-weight: 400; letter-spacing: -0.01em;
  color: var(--hl-primary-900); margin-bottom: .35em;
}

/* 소개 문구를 제목 쪽으로 붙인다(5차 지시 "위로 올려서"). 손글씨체는 위쪽 여백이
 * 글자보다 크게 잡혀 같은 margin이어도 제목과 멀어 보인다. */
.hl-home-hero .hl-hero__title { margin-bottom: var(--hl-space-2); }

/* "모·두·의" 강조. 세 글자는 한 낱말이라 사이에서 줄이 끊기면 안 된다. */
.hl-hero__accents { white-space: nowrap; }
.hl-hero__accent { font: inherit; }
/* 히어로 배경(크림색 이미지) 위 대비 — 제목 영역에서 가장 어두운 픽셀 기준으로도
 * 4.4:1 이상이라 요구값 3:1을 넉넉히 넘긴다. */
.hl-hero__accent--pink   { color: #9c1550; }
.hl-hero__accent--orange { color: #8a3a04; }
.hl-hero__accent--blue   { color: #0f4f95; }

/* 메인 소개 문구만 나눔손글씨 펜. 손글씨체는 같은 px에서 눈에 띄게 작아 보여
 * 크기를 한 단계 올린다. 카피와 띄어쓰기는 그대로다. */
/* 소개 문구는 한 줄로 유지한다(2026-08-03 5차 지시).
 *
 * 예전에는 max-width: 34ch 였는데, 이 문장을 한 줄로 그리는 데 필요한 폭이 410px이고
 * 34ch가 414px이라 여유가 4px밖에 없었다. 그 정도면 브라우저·OS의 폰트 렌더링 차이만으로
 * 줄이 넘어간다 — 실제로 검수 화면에서는 두 줄로 찍혔다. 상한을 없애 텍스트 컬럼
 * 폭(데스크톱 580px)을 그대로 쓰게 하면 40% 이상 여유가 생겨 환경이 달라져도 한 줄이다.
 * (1023px 이하에서는 아래 미디어 쿼리가 이미 상한을 풀고 있었다.) */
.hl-hero__slogan {
  font-family: var(--hl-font-hand);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  line-height: 1.45;
  color: var(--hl-primary-700);
  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-home-hero__visual {
  min-width: 0;
  width: 120%;
  max-width: 40rem;
  aspect-ratio: 713 / 401;
  align-self: center;
  justify-self: end;
  transform: translateY(calc(var(--hl-space-8) / -2));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hl-home-hero__people {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .hl-home-hero__visual { width: 112%; }
}

@media (max-width: 1023px) {
  .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-home-hero__visual { width: 100%; max-width: 620px; margin-inline: auto; justify-self: center; transform: none; }
  .hl-hero__slogan { max-width: none; }
}

/* ---------- 6a. 메인 핵심정보 ---------- */

.hl-home-facts__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
  align-items: stretch;
  gap: clamp(var(--hl-space-5), 4vw, var(--hl-space-8));
}

.hl-home-facts__illustration {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 데스크톱 기준 약 10% 축소(802px → 722px). 2열 그리드 비율과 모바일 규칙은
 * 건드리지 않고 이미지 상한만 줄여 옆 카드와의 무게 균형을 맞춘다. */
.hl-home-facts__image {
  display: block;
  width: 100%;
  max-width: 722px;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* 참가 대상·공모 주제 카드의 PPT 지정 굵기 계층.
 * 분류명 Medium 500 → 핵심 문구 SemiBold 600 → 보조 설명 Light 300.
 *
 * .hl-card--stat 의 같은 선택자가 아래 8장에서 600/700을 주므로, 클래스 하나만으로는
 * 특정도가 같아 뒤에 오는 그쪽이 이긴다. 이 카드가 실제로 가진 두 클래스를 함께
 * 걸어 특정도를 올린다. */
.hl-card--stat.hl-home-facts__card .hl-card__label { font-weight: 500; }
.hl-card--stat.hl-home-facts__card .hl-card__value { font-weight: 600; }
.hl-card--stat.hl-home-facts__card .hl-card__note {
  font-weight: 300;
  /* Light는 같은 크기에서 획이 얇아 먼저 읽히지 않는다. 굵기를 되돌리는 대신
   * 크기와 행간만 올려 가독성을 확보한다(계층은 그대로 유지). */
  font-size: .9375rem;
  line-height: 1.75;
}

.hl-home-facts__card {
  min-width: 0;
}

.hl-home-facts__card .hl-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--hl-space-5), 3vw, var(--hl-space-7));
}

.hl-home-facts__group + .hl-home-facts__group {
  margin-top: var(--hl-space-5);
  padding-top: var(--hl-space-5);
  border-top: 1px solid var(--hl-line);
}

@media (max-width: 767px) {
  .hl-home-facts__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hl-home-facts__card {
    order: 1;
  }

  .hl-home-facts__illustration {
    order: 2;
    width: 100%;
    max-width: 38rem;
    margin-inline: auto;
  }
}

/* 세 시상내역을 감싸는 공통 외곽 테두리. 참가 대상·공모 주제 카드(.hl-card)와
 * 같은 경계·반경·배경을 써서 두 블록이 같은 종류의 상자로 읽히게 한다.
 * 항목 사이 구분선은 안쪽 .hl-home-awards__item 규칙이 그대로 유지한다. */
.hl-home-awards-box {
  margin-top: var(--hl-space-5);
  padding: var(--hl-space-6) var(--hl-space-5) var(--hl-space-5);
  background: var(--hl-surface);
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-radius);
}

/* 변동 가능 문구는 시상 박스 안 우측 하단에 둔다. */
.hl-home-awards-box__note {
  margin: var(--hl-space-5) 0 0;
  font-size: .875rem;
  color: var(--hl-ink-400);
  text-align: right;
}

/* 메인 시상 3항목: 항목 사이 실선과 트로피 아이콘. 바깥 상자는 위에서 그린다. */
.hl-home-awards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* 바깥 상자가 좌우 24px을 새로 먹으므로 항목 안쪽 여백을 24px → 16px로 줄여
 * 각 열의 글 폭을 상자 도입 전과 같게 유지한다. 이 보정을 빼면 세 번째 열의
 * "각 200만 원"에서 "원"이 홀로 다음 줄로 떨어지고 특별상 제목이 두 줄이 된다. */
.hl-home-awards__item {
  min-width: 0;
  padding-inline: var(--hl-space-4);
}
.hl-home-awards__item + .hl-home-awards__item {
  border-left: 1px solid var(--hl-line);
}
.hl-home-awards__icon {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--hl-space-4);
}
.hl-home-awards__content {
  max-width: 24rem;
  margin-inline: auto;
}
.hl-home-awards__title {
  min-height: 2.7em;
  margin-bottom: var(--hl-space-3);
  font-size: var(--hl-fs-h3);
  text-align: center;
}
/* 본문 줄 묶음을 제목과 같은 중심선에 맞춘다(2026-08-03 5차 지시).
 *
 * 제목은 가운데 정렬인데 본문은 왼쪽 정렬이라, 1열처럼 줄이 짧은 열은 글자 덩어리의
 * 중심이 제목 중심보다 59px 왼쪽으로 치우쳐 보였다. 줄 사이의 왼쪽 정렬은 그대로 두고
 * (읽는 순서가 흐트러지면 안 된다) 묶음 전체를 fit-content 로 줄여 가운데로 보낸다.
 * 세 열에 모두 적용해야 열마다 기준이 달라지지 않는다. */
.hl-home-awards__lines {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}

.hl-home-awards__text {
  margin: 0;
  color: var(--hl-ink-600);
  font-size: .9375rem;
  line-height: 1.7;
}
.hl-home-awards__text + .hl-home-awards__text {
  margin-top: var(--hl-space-1);
}
.hl-home-awards__action {
  margin: var(--hl-space-4) 0 0;
  text-align: center;
}
.hl-home-awards__action .hl-btn {
  justify-content: center;
  width: 100%;
  max-width: 16rem;
}

@media (max-width: 767px) {
  /* 좁은 폭에서는 바깥 상자 좌우 여백을 줄여 각 시상 항목의 읽기 폭을 지킨다. */
  .hl-home-awards-box {
    padding: var(--hl-space-5) var(--hl-space-4);
  }
  .hl-home-awards-box__note {
    text-align: left;
  }
  .hl-home-awards {
    grid-template-columns: minmax(0, 1fr);
  }
  .hl-home-awards__item {
    padding: var(--hl-space-5) 0;
  }
  .hl-home-awards__item:first-child {
    padding-top: 0;
  }
  .hl-home-awards__item + .hl-home-awards__item {
    border-top: 1px solid var(--hl-line);
    border-left: 0;
  }
  .hl-home-awards__item:last-child {
    padding-bottom: 0;
  }
  .hl-home-awards__title {
    min-height: 0;
  }
}

/* 메인 영상 안내는 컨테이너 시작선에 맞추고 넓은 데스크톱에서 한 줄로 유지한다. */
.hl-home-video-note {
  max-width: none;
}
@media (min-width: 1400px) {
  .hl-home-video-note {
    white-space: nowrap;
  }
}

/* 메인의 공지사항과 자주 묻는 질문은 같은 면 위에 이어지는 두 개의 독립
 * 전체폭 섹션이다. 섹션 두 개가 맞닿으면 앞 섹션의 아래 여백과 뒤 섹션의 위
 * 여백이 겹쳐 4rem + 4rem 의 빈 띠가 생긴다. 이음매 한 곳만 지워 두 섹션
 * 사이 간격을 페이지의 다른 섹션 경계와 같은 4rem 으로 맞춘다.
 * 인접 형제 선택자라 두 섹션이 실제로 붙어 있을 때만 적용된다. */
.hl-home-notices + .hl-home-faq { padding-top: 0; }

/* ---------- 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-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: .875rem; font-weight: 700; 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;
}
/* hover 시 shadow만 올라감 — translateY 제거: 비대화형 카드가 클릭 가능처럼 보이는 오신호 방지 */
.hl-card:hover { box-shadow: var(--hl-shadow-2); }
.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; }
.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: 700; 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-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; }
/* 단계를 잇는 세로선. primary-100(#ebeee6)이었는데 이 섹션 배경(#f5f7f2)과 대비가
 * 1.09:1 이라 사실상 보이지 않았다(2026-08-03 5차 지시 "잘 안보이네요").
 * accent-500 은 3.89:1 로 비문자 요소 기준 3:1 을 넘겨 확실히 보이면서,
 * 점 마커(primary-600, 5.71:1)보다는 연해 축이 마커를 덮지 않는다. */
.hl-timeline::before {
  content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px;
  width: 2px; background: var(--hl-accent-500);
}
.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__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); }
/* 인용문 상자. 4px 컬러 border-left(포인트선)를 쓰지 않는다.
   .hl-pending·.hl-external-notice·.hl-card--stat와 같은 규칙이다 — 박스는
   중립 1px 전체 경계로 구분하고, 색은 배경에만 얹는다. 한쪽 변만 굵게 세우면
   같은 문서 안에서 상자마다 강조 축이 달라져 읽는 순서가 흐트러진다.
   (focus 링·표 구분선·타임라인 축 같은 기능선은 이 규칙 밖이다.) */
.hl-prose blockquote {
  margin: var(--hl-space-5) 0; padding: var(--hl-space-4) var(--hl-space-5);
  border: 1px solid var(--hl-line); background: var(--hl-surface-alt);
  border-radius: var(--hl-radius);
}
.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: var(--hl-primary-900);
  font-size: .875rem; 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: 700; flex: 0 0 auto; }

/* ---------- 16a. 공모요강 접수기간 행 ---------- */

/* 공모요강 상단의 접수기간 한 줄만 키운다. 전역 .hl-chip은 히어로를 비롯한
 * 다른 화면에서도 쓰이므로 여기서 크기를 올리지 않고, 이 wrapper 안에서만
 * 재정의한다. 값·타임존·마감 로직은 PHP 쪽 그대로다. */
.hl-guidelines-period {
  display: flex;
  align-items: center;
  min-height: 5.5rem;
  margin-bottom: var(--hl-space-5);
  padding-block: var(--hl-space-4);
  border-top: 1px solid var(--hl-line);
  border-bottom: 1px solid var(--hl-line);
}
.hl-guidelines-period__row {
  width: 100%;
  margin: 0;
  align-items: center;
}
.hl-guidelines-period .hl-chip {
  padding: .55em 1.35em;
  font-size: clamp(1rem, .93rem + .3vw, 1.1875rem);
  line-height: 1.5;
}
.hl-guidelines-period .hl-chip__label {
  background: var(--hl-primary-700);
  color: #fff;
  padding: .12em .6em;
  border-radius: var(--hl-radius-pill);
  opacity: 1;
  font-size: max(.9375rem, .88em);
}

@media (max-width: 480px) {
  /* 390px에서는 라벨과 날짜가 위아래로 놓이도록 칩이 한 줄을 다 쓴다. */
  .hl-guidelines-period { min-height: 0; }
  .hl-guidelines-period__row { flex-direction: column; align-items: stretch; }
  .hl-guidelines-period .hl-chip { flex-wrap: wrap; row-gap: .15em; }
}

/* ---------- 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%;
}
/* 본문 최소 14px(.875rem) 기준을 지킨다 — qa-responsive.mjs 가 검사한다. */
.hl-policy-filter__hint { margin: 0; font-size: .875rem; color: var(--hl-ink-400); }
/* 버튼은 입력 3개 아래 한 줄에서 감싸며 모바일 폭을 넘지 않는다. */
.hl-policy-filter__actions {
  display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: var(--hl-space-3); margin: 0;
  min-width: 0;
}
.hl-policy-filter__actions .hl-btn { max-width: 100%; white-space: normal; }
.hl-policy-filter__special[aria-pressed="true"] {
  background: var(--hl-primary-600); border-color: var(--hl-primary-600); color: #fff;
}
.hl-policy-filter__special[aria-pressed="true"]:hover {
  background: var(--hl-primary-700); border-color: var(--hl-primary-700); color: #fff;
}
.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: .875rem; 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: #d8e5e1;
  padding-block: var(--hl-space-8) var(--hl-space-6);
  margin-top: var(--hl-space-9);
}
.hl-footer a { color: #edf5f2; }
.hl-footer a:hover { color: #fff; }
/* 전역 딥그린 포커스 링은 밝은 표면에서 7:1 이상이지만 푸터와는 같은 계열이다.
 * 푸터 안에서는 흰 링으로 전환해 키보드 포커스를 9.55:1로 분리한다. */
.hl-footer :focus-visible { outline-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: 700; 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: .875rem; line-height: 1.7; color: #c0d4cf; 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: #a8c1bb; font-size: var(--hl-fs-sm); }
.hl-footer__sns { margin-top: var(--hl-space-4); }

/* 서체 출처 표기(마포구 이용 조건). 작고 비침해적으로 두되 푸터 배경에서
 * 읽히는 밝기는 유지한다. */
/* 이 저장소의 본문 최소 크기는 14px(.875rem)이고 qa-responsive.mjs 가 검사한다.
 * 출처 표기라도 그 아래로 내리지 않는다. */
.hl-footer__font-credit {
  margin: var(--hl-space-6) 0 0;
  font-size: var(--hl-fs-sm);
  color: #a8c1bb;
}
.hl-footer__font-credit a { color: inherit; text-decoration: none; }
.hl-footer__font-credit a:hover { color: #fff; text-decoration: underline; }

.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; }

/* ---------- 19a. 최하단 주최·주관 로고 띠 ---------- */

/* 딥그린 푸터 바로 다음, 문서 최하단의 흰색 전체폭 기관 띠.
 * 내부는 .hl-container 를 그대로 써서 위 푸터와 시작선을 맞춘다. */
.hl-organizers {
  background: #fff;
  padding-block: var(--hl-space-5);
}

.hl-organizers__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hl-space-4) var(--hl-space-5);
}

.hl-organizers__label {
  margin: 0;
  font-size: var(--hl-fs-sm);
  font-weight: 700;
  color: var(--hl-ink-900);
  white-space: nowrap;
}

.hl-organizers__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hl-space-4) var(--hl-space-6);
  list-style: none;
  margin: 0;
  padding-inline-start: var(--hl-space-5);
  border-inline-start: 1px solid var(--hl-line);
}
/* 전역 li 하단 여백이 로고 행을 세로로 어긋나게 만든다. */
.hl-organizers__list li { margin-bottom: 0; }

/* 제공 원본은 250×50 이다. 폭만 지정하고 높이는 auto 로 둬서 비율을 고정하고,
 * 컨테이너가 좁아지면 잘리는 대신 그대로 축소되게 한다. */
.hl-organizers__logo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}

/* 모바일은 순서를 유지한 채 줄바꿈한다. 라벨이 윗줄로 떨어지면 세로 구분선이
 * 끊긴 선처럼 남으므로 구분선과 들여쓰기를 함께 없앤다. */
@media (max-width: 767px) {
  .hl-organizers__list {
    gap: var(--hl-space-4);
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .hl-organizers__logo { width: 160px; }
}

/* ---------- 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: .875rem; }

  .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. 포스터 ---------- */

.hl-poster-wrap { margin: 0 0 var(--hl-space-8); text-align: center; }
.hl-poster { display: block; width: 100%; max-width: 720px; height: auto; margin-inline: auto; border-radius: var(--hl-radius); }

/* 포스터 클릭 버튼 */
.hl-poster-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  position: relative;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  border-radius: var(--hl-radius);
  overflow: hidden;
}
.hl-poster-btn:focus-visible {
  outline: 3px solid var(--hl-accent-600);
  outline-offset: 4px;
}
.hl-poster-btn__hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .8125rem;
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
}
/* JS 없을 때는 힌트 숨김 */
.hl-poster-btn__hint { display: none; }
.hl-js .hl-poster-btn__hint { display: block; }

/* 포스터 라이트박스 다이얼로그 */
.hl-poster-dialog {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100vw;
  height: 100dvh;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
}
.hl-poster-dialog[open] { display: flex; }
.hl-poster-dialog::backdrop { background: transparent; }
.hl-poster-dialog__img {
  max-width: calc(100vw - 80px);
  max-height: calc(100dvh - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--hl-radius);
}
.hl-poster-dialog__close {
  position: fixed;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl-poster-dialog__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 599px) {
  .hl-poster-dialog__img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 72px); }
}

/* ---------- 공개검증 게시판 (/verification/) ---------- */

.hl-vgrid {
  display: grid; gap: var(--hl-space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--hl-space-6) 0 0; padding: 0; list-style: none;
}
.hl-vgrid__item { margin: 0; }
@media (max-width: 899px) { .hl-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .hl-vgrid { grid-template-columns: minmax(0, 1fr); gap: var(--hl-space-4); } }

.hl-vcard {
  display: flex; flex-direction: column; height: 100%;
  background: var(--hl-surface); color: var(--hl-ink-900); text-decoration: none;
  border: 1px solid var(--hl-line); border-radius: var(--hl-radius);
  overflow: hidden; box-shadow: var(--hl-shadow-1);
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.hl-vcard:hover { border-color: var(--hl-primary-400); box-shadow: var(--hl-shadow-2); color: var(--hl-ink-900); transform: translateY(-2px); }
.hl-vcard:focus-visible { outline: 3px solid var(--hl-accent-600); outline-offset: 2px; }
.hl-vcard__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--hl-primary-900); overflow: hidden;
}
.hl-vcard__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-vcard__ext {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--hl-space-4); line-height: 1.5;
  background: var(--hl-primary-700); color: #fff; font-weight: 600;
}
.hl-vcard__play {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(25, 76, 83, .82);
  transition: background 150ms ease;
}
.hl-vcard__play::after {
  content: ""; position: absolute; left: 21px; top: 15px;
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff;
}
.hl-vcard:hover .hl-vcard__play { background: var(--hl-primary-600); }
.hl-vcard__no {
  position: absolute; left: var(--hl-space-3); top: var(--hl-space-3);
  padding: 2px 10px; border-radius: var(--hl-radius-pill);
  background: #fff; color: var(--hl-primary-900); font-size: var(--hl-fs-sm); font-weight: 700;
}
.hl-vcard__body { display: flex; flex-direction: column; gap: var(--hl-space-1); padding: var(--hl-space-4); }
.hl-vcard__title {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.45; color: var(--hl-primary-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.hl-vcard__name { font-size: var(--hl-fs-sm); color: var(--hl-ink-600); }
.hl-vcard__policy {
  font-size: var(--hl-fs-sm); color: var(--hl-ink-600); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}

/* 영상 레이어창 */
html.hl-vlock, html.hl-vlock body { overflow: hidden; }
.hl-vdialog {
  position: fixed; inset: 0; margin: 0; padding: 0; border: none;
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  background: rgba(10, 24, 26, .86); color: var(--hl-ink-900);
  display: none; align-items: center; justify-content: center;
}
.hl-vdialog[open] { display: flex; }
.hl-vdialog::backdrop { background: transparent; }
.hl-vdialog__panel {
  position: relative; display: flex; flex-direction: column; padding-top: 56px;
  width: min(880px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  background: var(--hl-surface); border-radius: var(--hl-radius-lg); overflow: hidden auto;
  box-shadow: var(--hl-shadow-2);
}
.hl-vdialog__close {
  position: absolute; top: 6px; right: 10px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--hl-primary-900); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.hl-vdialog__close:hover { background: #000; }
.hl-vdialog__close:focus-visible { outline: 3px solid var(--hl-primary-600); outline-offset: 2px; }
.hl-vdialog__stage { background: #000; flex: 0 0 auto; }
.hl-vdialog__stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.hl-vdialog__stage.is-wide { aspect-ratio: 16 / 9; }
.hl-vdialog__stage.is-vertical {
  aspect-ratio: 9 / 16; height: min(52dvh, 560px); width: auto; max-width: 100%; margin-inline: auto;
}
.hl-vdialog__stage.is-msg {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 160px; padding: var(--hl-space-5); background: var(--hl-primary-700); color: #fff; font-weight: 600; line-height: 1.6;
}
.hl-vdialog__info { padding: var(--hl-space-4) var(--hl-space-5) var(--hl-space-5); }
.hl-vdialog__info p { margin: 0 0 var(--hl-space-2); }
.hl-vdialog__no { font-size: var(--hl-fs-sm); font-weight: 700; color: var(--hl-primary-600); }
.hl-vdialog__title { font-size: var(--hl-fs-h3); margin: 0 0 var(--hl-space-2); overflow-wrap: anywhere; }
.hl-vdialog__title:focus { outline: none; }
.hl-vdialog__name, .hl-vdialog__policy { font-size: var(--hl-fs-sm); color: var(--hl-ink-600); overflow-wrap: anywhere; }
.hl-vdialog__note { font-size: var(--hl-fs-sm); color: var(--hl-ink-600); margin-top: var(--hl-space-3); }
.hl-vdialog__src { margin-top: var(--hl-space-3); }
@media (max-width: 599px) {
  .hl-vdialog__panel { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: var(--hl-radius); }
  .hl-vdialog__stage.is-vertical { height: min(54dvh, 520px); }
  .hl-vdialog__info { padding: var(--hl-space-4); }
}

/* ---------- 24. 정책 소개 2열 ---------- */

.hl-policy-intro {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--hl-space-7);
  align-items: start;
}

/* "K-희망사다리 정책이란"과 3개 단계 제목은 나눔손글씨 펜, 그 아래 설명은
 * Paperlogy Light 300. hope_ladder_section_title()이 HTML을 이스케이프하므로
 * 마크업 대신 이 영역 범위의 선택자로 지정한다. */
.hl-policy-intro__content > .hl-section__title,
.hl-policy-cards .hl-card__title {
  font-family: var(--hl-font-hand);
  font-weight: 400;
  letter-spacing: 0;
}
.hl-policy-intro__content > .hl-section__title {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);
}
.hl-policy-cards .hl-card__title {
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
}
.hl-policy-intro__content > .hl-section__lead,
.hl-policy-cards .hl-card__text {
  font-weight: 300;
}
/* Light 본문은 좁은 폭에서 획이 흐려진다. 굵기를 되돌리지 않고 크기·행간만
 * 보강해 PPT가 지정한 300 계층을 유지한다. */
@media (max-width: 767px) {
  .hl-policy-intro__content > .hl-section__lead,
  .hl-policy-cards .hl-card__text {
    font-size: 1rem;
    line-height: 1.8;
  }
}
.hl-policy-intro__image {
  align-self: center;
}
.hl-policy-intro__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--hl-radius);
  overflow: hidden;
}
@media (max-width: 1023px) {
  .hl-policy-intro { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 25. 비회원 문의게시판 ---------- */

.hl-inquiry-boundary {
  margin-bottom: var(--hl-space-7);
  padding: var(--hl-space-5);
  border: 1px solid var(--hl-warn-line);
  border-radius: var(--hl-radius);
  background: var(--hl-warn-bg);
  color: var(--hl-warn-ink);
}
.hl-inquiry-boundary__title { font-size: var(--hl-fs-h3); color: inherit; }
.hl-inquiry-boundary ul { margin: 0; }

.hl-inquiry-feedback {
  margin-bottom: var(--hl-space-6);
  padding: var(--hl-space-4) var(--hl-space-5);
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-radius);
  scroll-margin-top: 8rem;
}
.hl-inquiry-feedback p { margin-bottom: var(--hl-space-1); }
.hl-inquiry-feedback--success { background: #e8f5ec; border-color: #8ac39d; color: #18592f; }
.hl-inquiry-feedback--error { background: #fff0ee; border-color: #d9958c; color: #7d2118; }

.hl-inquiry-list-section,
.hl-inquiry-write,
.hl-inquiry-detail { margin-top: var(--hl-space-7); }
.hl-inquiry-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--hl-space-3);
  margin-bottom: var(--hl-space-4);
}
.hl-inquiry-section-head h2,
.hl-inquiry-section-head p,
.hl-inquiry-count { margin: 0; }
.hl-inquiry-count { color: var(--hl-ink-600); font-size: var(--hl-fs-sm); }
.hl-inquiry-table { min-width: 720px; }
.hl-inquiry-table th:first-child,
.hl-inquiry-table td:first-child { width: 5.5rem; text-align: center; }
.hl-inquiry-table a { font-weight: 700; }
.hl-inquiry-status {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 var(--hl-space-3);
  border-radius: var(--hl-radius-pill);
  background: var(--hl-primary-50);
  color: var(--hl-primary-700);
  font-size: var(--hl-fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.hl-inquiry-compose { margin-top: var(--hl-space-5); }
.hl-inquiry-compose > summary {
  width: fit-content;
  cursor: pointer;
  list-style: none;
}
.hl-inquiry-compose > summary::-webkit-details-marker { display: none; }
.hl-inquiry-compose .hl-inquiry-write { margin-top: var(--hl-space-5); }

.hl-inquiry-form {
  position: relative;
  max-width: 760px;
  margin-top: var(--hl-space-4);
  padding: var(--hl-space-5);
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-radius);
  background: var(--hl-surface-alt);
}
.hl-inquiry-form--unlock { max-width: 520px; }
.hl-inquiry-field { margin-bottom: var(--hl-space-5); }
.hl-inquiry-field label {
  display: block;
  margin-bottom: var(--hl-space-2);
  color: var(--hl-primary-900);
  font-weight: 700;
}
.hl-inquiry-field input,
.hl-inquiry-field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: var(--hl-space-3);
  border: 1px solid #aeb5bc;
  border-radius: var(--hl-radius);
  background: var(--hl-surface);
  color: var(--hl-ink-900);
  font: inherit;
}
.hl-inquiry-field textarea { min-height: 11rem; resize: vertical; }
.hl-inquiry-field__help { margin: var(--hl-space-1) 0 0; color: var(--hl-ink-600); font-size: var(--hl-fs-sm); }
.hl-inquiry-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.hl-inquiry-detail__head {
  margin-top: var(--hl-space-5);
  padding: var(--hl-space-5);
  border-top: 2px solid var(--hl-primary-900);
  border-bottom: 1px solid var(--hl-line);
}
.hl-inquiry-detail__number { margin: 0 0 var(--hl-space-1); color: var(--hl-ink-600); font-size: var(--hl-fs-sm); }
.hl-inquiry-meta { display: flex; flex-wrap: wrap; gap: var(--hl-space-2) var(--hl-space-5); margin: var(--hl-space-4) 0 0; }
.hl-inquiry-meta div { display: flex; gap: var(--hl-space-2); }
.hl-inquiry-meta dt { color: var(--hl-ink-600); font-weight: 700; }
.hl-inquiry-meta dd { margin: 0; }
.hl-inquiry-message {
  margin-top: var(--hl-space-5);
  padding: var(--hl-space-5);
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-radius);
  background: var(--hl-surface);
}
.hl-inquiry-message--reply { background: var(--hl-primary-50); }
.hl-inquiry-message h3 { font-size: var(--hl-fs-h3); }
.hl-inquiry-message__body { overflow-wrap: anywhere; }
.hl-inquiry-message__empty { margin: 0; color: var(--hl-ink-600); }

@media (max-width: 599px) {
  .hl-inquiry-boundary,
  .hl-inquiry-form,
  .hl-inquiry-detail__head,
  .hl-inquiry-message { padding: var(--hl-space-4); }
  .hl-inquiry-meta { display: grid; gap: var(--hl-space-2); }
}

/* ---------- 26. 인쇄 ---------- */

@media print {
  .hl-header, .hl-footer, .hl-skip, .hl-btn, .hl-policy-filter, .hl-inquiry-form { 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; }
}