/* 01-tokens.css */
/* =========================================================
   디자인 기준값 (아임웹 원본 테마 설정에서 추출)
   색·글꼴·간격을 바꾸려면 이 파일만 수정하세요.
   ========================================================= */
:root {
  /* 색 */
  --brand: #01a081;            /* 원본 브랜드 색 (청록) */
  --brand-dark: #00866c;
  --brand-tint: #e6f6f2;
  --title: #212121;            /* 원본 제목·버튼 색 */
  --text: #45494d;             /* 본문색 (시안 1: 더 진하게, 흰 바탕 대비 9:1) */
  --text-weak: #6b6f74;        /* 날짜·작성자 등 보조 정보 (대비 5:1, 접근성 기준 4.5:1 이상) */
  --gold: #a8742a;             /* 로고 비둘기·십자가 금색에서 가져온 보조 강조색 (아주 조금만) */
  --paper: #f5f6f4;            /* 포스터 뒤 바탕 */
  --line: rgba(0, 0, 0, 0.08); /* 원본 구분선 rgba(0,0,0,.05) 보다 살짝 진하게 */
  --line-strong: #212121;
  --bg: #ffffff;
  --bg-soft: #f7f7f8;
  --footer-bg: #161212;        /* 원본 푸터 rgb(7,0,0) 계열 */
  --dropdown-bg: #282828;      /* 원본 드롭다운 배경 */
  --placeholder: #d9d9d9;      /* 이미지 자리표시 회색 */
  --placeholder-text: #8a8a8a;

  /* 글꼴 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", sans-serif;
  /* 제목 글꼴: 고운바탕 (명조) — 페이지·섹션 제목, 첫 문장, 단체명. 메뉴·본문은 위 --font */
  --font-display: "Gowun Batang", "Batang", "바탕", "AppleMyungjo", "Noto Serif KR", "Noto Serif CJK KR", serif;
  --font-menu: var(--font-display); /* 예전 이름 (분단의 역사 스타일에서 사용) */
  --fs-body: 16px;             /* 원본 본문 16px */
  --lh-body: 1.6;              /* 원본 줄간격 1.6 */
  --fs-small: 14px;
  --fs-xsmall: 13px;
  --fs-h1: clamp(26px, 3.2vw, 40px);
  --fs-h2: clamp(24px, 2.6vw, 32px);
  --fs-h3: clamp(18px, 1.8vw, 22px);

  /* 레이아웃 */
  --max: 1180px;               /* 원본 최대 폭 */
  --gutter: 40px;              /* 원본 헤더 좌우 여백 */
  --header-h: 96px;
  --radius: 2px;               /* 원본 버튼 모서리 */
  --section-y: clamp(56px, 8vw, 110px);
}

@media (max-width: 1023px) {
  :root { --gutter: 24px; --header-h: 64px; }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; --header-h: 60px; }
}

/* 02-base.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; } /* 스크롤바 유무와 관계없이 모든 페이지 폭을 같게 */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  word-break: keep-all;          /* 한글 단어 중간 줄바꿈 방지 */
  overflow-wrap: anywhere;       /* 긴 주소·URL은 넘치지 않게 */
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
/* 글이 적은 페이지에서도 하단 정보가 화면 맨 아래에 붙도록 */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

h1, h2, h3, h4 { color: var(--title); line-height: 1.35; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--title); color: #fff; padding: 10px 16px; border-radius: var(--radius);
}
.skip-link:focus { top: 8px; }

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

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* 반응형 표시 도우미 */
@media (min-width: 768px) { .only-mobile { display: none !important; } }
@media (max-width: 767px) { .only-desktop { display: none !important; } }

/* 03-layout.css */
/* =========================================================
   헤더 (PC: 원본처럼 흰 배경 + 메뉴별 어두운 드롭다운)
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s, border-color .2s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 2px 12px rgba(0,0,0,.05); }

.header-inner { display: flex; align-items: center; height: var(--header-h); gap: 32px; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { width: 44px; height: 44px; }
.brand-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--title); letter-spacing: -0.02em; white-space: nowrap; }

.gnb { margin-left: auto; height: 100%; }
.gnb-list { display: flex; height: 100%; }
.gnb-item { position: relative; display: flex; align-items: center; }
.gnb-link {
  display: flex; align-items: center; height: 100%;
  padding: 0 22px; font-family: var(--font); font-size: 18px; font-weight: 500; color: var(--title); letter-spacing: -0.01em;
  transition: color .2s; cursor: pointer;
}
.gnb-link span { padding: 6px 0; border-bottom: 4px solid transparent; border-top: 4px solid transparent; }
.gnb-item.is-open > .gnb-link { color: var(--brand); }
@media (hover: hover) { .gnb-item:hover > .gnb-link { color: var(--brand); } }
.gnb-item.is-active > .gnb-link { color: var(--title); font-weight: 700; }
.gnb-item.is-active > .gnb-link span { border-bottom-color: var(--brand); }

.gnb-sub {
  position: absolute; top: 100%; left: 22px; min-width: 210px;
  background: var(--dropdown-bg); padding: 6px 0;
  visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.gnb-item:last-child .gnb-sub { left: auto; right: 22px; }
/* 상위 메뉴는 페이지 이동 없이 하위 목록만 엶 (클릭 또는 마우스 올림) */
.gnb-item.is-open > .gnb-sub { visibility: visible; opacity: 1; transform: none; }
/* 하위 메뉴는 클릭할 때만 열림 (마우스를 올려도 열리지 않아 메뉴끼리 겹치지 않음) */
.gnb-sub a { display: block; padding: 11px 20px; font-family: var(--font); font-size: 16px; font-weight: 500; color: rgba(255,255,255,.85); white-space: nowrap; }
.gnb-sub a:hover, .gnb-sub a:focus-visible, .gnb-sub a[aria-current] { color: #fff; background: #007560; outline: none; } /* 흰 글자 대비 5.7:1 */

.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -10px; }
.menu-toggle svg { width: 26px; height: 26px; }

@media (max-width: 1023px) {
  .gnb { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 17px; }
}
@media (max-width: 359px) { .brand-name { font-size: 15px; } }

/* =========================================================
   모바일 전체 화면 메뉴 (A안: 모든 하위 메뉴 펼침)
   ========================================================= */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: #fff;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mm-top { display: flex; align-items: center; justify-content: flex-end; height: var(--header-h); flex-shrink: 0; }
.mm-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-right: -10px; color: var(--title); }
.mm-close svg { width: 26px; height: 26px; }

/* 참고 이미지 배치: 분류명은 가운데, 하위 메뉴는 오른쪽 정렬 + 꺾쇠 */
.mm-body { padding-top: 4px; padding-bottom: 48px; flex: 1; }
.mm-group { text-align: center; padding: 22px 0 30px; }
.mm-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #000; margin-bottom: 14px; }
.mm-list { width: min(100%, 62%); margin: 0 auto; }
.mm-link {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: 40px; padding: 4px 0; font-family: var(--font); font-size: 17px; color: #222;
}
.mm-link svg { width: 18px; height: 18px; flex-shrink: 0; color: #222; stroke-width: 2.4; }
.mm-link:active span { color: var(--brand); }
.mm-link[aria-current] { color: var(--brand); font-weight: 700; }
.mm-link[aria-current] svg { color: var(--brand); }
@media (max-width: 359px) { .mm-list { width: 80%; } }

/* =========================================================
   푸터 (시안 1: 단체명 → 대표·주소 → 연락처, 오른쪽에 약관)
   ========================================================= */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,.72); font-size: 15px; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-top: 48px; padding-bottom: 52px; }
.footer-org p, .footer-side p { margin: 0 0 4px; }
.footer-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 12px !important; }
.site-footer .sep { margin: 0 8px; opacity: .45; }
.site-footer a { color: rgba(255,255,255,.88); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-side { text-align: right; }
.footer-copy { margin-top: 10px !important; font-size: 13px; color: rgba(255,255,255,.5); }

@media (max-width: 767px) {
  /* 휴대폰: 전화·메일·약관 링크를 손가락으로 누르기 쉽게 (높이 44px) */
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-org p, .footer-side p { margin: 0; }
  .footer-name { margin-bottom: 6px !important; }
  .footer-inner { flex-direction: column; gap: 18px; padding-top: 36px; padding-bottom: 40px; }
  .footer-org .addr { display: block; }
  .footer-org .addr + .sep, .footer-org p:nth-child(2) .sep { display: none; }
  .footer-side { text-align: left; }
}

/* =========================================================
   하위 페이지 공통: 상단 이미지 띠(페이지 이름) + 같은 분류 메뉴 탭
   ========================================================= */
.subvisual {
  position: relative; overflow: hidden; height: clamp(190px, 21vw, 300px);
  background: var(--placeholder) center / cover no-repeat; color: #fff;
  display: flex; align-items: flex-end;
}
.subvisual-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.subvisual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(14,18,16,.66) 0%, rgba(14,18,16,.22) 65%, rgba(14,18,16,.12) 100%); }
.subvisual-inner { position: relative; z-index: 2; padding-bottom: clamp(26px, 3.4vw, 42px); }
.subvisual h1 { color: #fff; font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.25; letter-spacing: -0.01em; text-shadow: 0 2px 16px rgba(0,0,0,.25); }
.subvisual .crumbs { margin: 0 0 6px; font-size: 14px; color: rgba(255,255,255,.88); }
.subvisual .crumbs span + span::before { content: "›"; margin: 0 7px; opacity: .75; }
.subvisual .ph-label { position: absolute; z-index: 2; right: 12px; bottom: 10px; font-size: 12px; color: rgba(255,255,255,.7); }

.lnb { border-bottom: 1px solid var(--line); background: #fff; }
.lnb-list { display: flex; gap: 36px; overflow-x: auto; scrollbar-width: none; }
.lnb-list::-webkit-scrollbar { display: none; }
.lnb-list a {
  display: flex; align-items: center; height: 60px; padding: 0; white-space: nowrap;
  font-size: 16.5px; color: var(--text-weak); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.lnb-list a:hover { color: var(--title); }
.lnb-list a[aria-current], .lnb-list a.is-current { color: var(--title); font-weight: 700; border-bottom-color: var(--brand); }
@media (max-width: 767px) {
  .lnb .container { padding: 0; }
  .lnb-list { padding: 0 var(--gutter); gap: 24px; }
  .lnb-list a { height: 50px; font-size: 15.5px; }
  .lnb-list.is-overflow { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 48px; }
  .lnb-list.is-overflow.at-end { -webkit-mask-image: none; mask-image: none; }
}

.page { padding-top: clamp(40px, 6vw, 80px); padding-bottom: var(--section-y); }
.page-head { text-align: center; margin-bottom: clamp(28px, 4vw, 52px); }
.page-head h2 { font-size: var(--fs-h2); font-family: var(--font-display); }
.page-head h2::before { content: ""; display: block; width: 28px; height: 3px; background: var(--brand); margin: 0 auto 16px; }
.page-head .lead { margin: 12px 0 0; font-size: 17px; }
.page-lead { max-width: 760px; margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; font-size: 17px; color: var(--text); }

.subtabs { display: flex; justify-content: center; gap: 8px; margin: -12px 0 36px; }
.subtabs a {
  min-width: 96px; text-align: center; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 15px; color: var(--text);
}
.subtabs a[aria-current] { background: var(--title); border-color: var(--title); color: #fff; font-weight: 600; }

/* 04-components.css */
/* ---------- 이미지 자리표시 (회색 + 권장 크기) ---------- */
.ph {
  position: relative; width: 100%; background: var(--placeholder);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--placeholder-text); font-size: 13px; letter-spacing: .02em; text-align: center;
}
.ph::after { content: attr(data-label); padding: 0 8px; }
.ph-img { width: 100%; height: 100%; object-fit: cover; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-1x1 { aspect-ratio: 1 / 1; }

/* ---------- 버튼 (원본: 1px 테두리, 모서리 2px, 14px, 자간 1px) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 22px; border: 1px solid rgba(0,0,0,.8); border-radius: var(--radius);
  font-size: 14px; letter-spacing: 1px; color: var(--title); background: transparent; transition: .2s;
}
.btn:hover { color: rgba(33,33,33,.7); border-color: rgba(0,0,0,.6); }
.btn-solid { background: #000; border-color: #000; color: #fff; }
.btn-solid:hover { background: #262626; border-color: #262626; color: #fff; }
.btn-brand { background: #007560; border-color: #007560; color: #fff; }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn svg { width: 16px; height: 16px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* ---------- 안내 띠 (초안/원고 필요 표시) ---------- */
.notebox {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; margin-bottom: 28px;
  background: #fff8e6; border: 1px solid #f3dfa6; border-radius: 4px; color: #6e5512; font-size: var(--fs-small);
}
.notebox svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.notebox[hidden] { display: none; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.6; vertical-align: middle; }
.badge-brand { background: var(--brand-tint); color: #006b56; } /* 대비 5.8:1 */
.badge-gray { background: #eeeef0; color: #555; }
.badge-dark { background: var(--title); color: #fff; }
.badge-review { background: #fff1d6; color: #8a5a00; }

/* ---------- 본문 (마크다운) ---------- */
.prose { color: var(--text); font-size: 17px; line-height: 1.8; max-width: 820px; margin: 0 auto; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-family: var(--font-display); font-size: 26px; margin: 1.8em 0 .6em; }
.prose h3 { font-family: var(--font-display); font-size: 21px; margin: 1.6em 0 .5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.3em; }
.prose li + li { margin-top: .3em; }
.prose a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--title); }
.prose blockquote { margin: 0 0 1.2em; padding: 14px 18px; border-left: 3px solid var(--brand); background: var(--bg-soft); color: #555; font-size: 15px; }
.prose blockquote p:last-child { margin: 0; }
.prose img { margin: 1.4em auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 1.2em; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--bg-soft); color: var(--title); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose code { background: var(--bg-soft); padding: 1px 5px; border-radius: 3px; font-size: .9em; }
.signature { text-align: right; margin-top: 40px; color: var(--title); font-weight: 700; font-size: 18px; }

/* ---------- 게시판 목록 ---------- */
.board-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: var(--fs-small); color: var(--text-weak); }
.board { border-top: 2px solid var(--line-strong); }
.board-row {
  display: grid; grid-template-columns: 72px 1fr 120px 110px; align-items: center;
  min-height: 64px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.board-row.head { min-height: 52px; font-weight: 600; color: var(--title); background: var(--bg-soft); }
.board-row > * { padding: 10px 8px; text-align: center; }
.board-row .b-title { text-align: left; color: var(--title); display: flex; align-items: center; gap: 8px; min-width: 0; }
.board-row .b-title a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .b-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.board-row .b-meta { color: var(--text-weak); font-size: 14px; }
.board-row.pinned { background: #fbfdfc; }
.board-row .ico { width: 16px; height: 16px; color: var(--text-weak); flex-shrink: 0; }
@media (max-width: 767px) {
  .board-row.head { display: none; }
  .board-row { grid-template-columns: 1fr; padding: 14px 0; gap: 4px; }
  .board-row > * { padding: 0; text-align: left; }
  .board-row .b-no { display: none; }
  .board-row .b-title a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .board-row .b-meta { display: inline; font-size: 13px; }
  .board-row .b-meta + .b-meta::before { content: "·"; margin: 0 6px; }
  .board-row .b-metas { display: block; }
}
@media (min-width: 768px) { .board-row .b-metas { display: contents; } }

.empty { text-align: center; padding: 72px 16px; color: var(--text-weak); border-bottom: 1px solid var(--line); }
.empty svg { width: 40px; height: 40px; margin: 0 auto 12px; color: #c9c9cd; display: block; }

.pagination { display: flex; justify-content: center; gap: 4px; margin-top: 36px; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-size: 15px; color: var(--text);
}
.pagination a:hover { background: var(--bg-soft); }
.pagination [aria-current="page"] { background: var(--title); color: #fff; font-weight: 600; }

/* ---------- 갤러리형 카드 ---------- */
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
@media (max-width: 1023px) { .g-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; } }
@media (max-width: 767px) { .g-grid { gap: 22px 12px; } }
.g-card a { display: block; }
.g-thumb { overflow: hidden; border-radius: 2px; }
.g-thumb .ph, .g-thumb img { transition: transform .4s; }
.g-card a:hover .g-thumb .ph, .g-card a:hover .g-thumb img { transform: scale(1.03); }
.g-body { padding-top: 14px; }
.g-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--title); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-sum { margin: 6px 0 0; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-meta { margin-top: 8px; font-size: 13px; color: var(--text-weak); }
@media (max-width: 767px) {
  .g-title { font-size: 15px; }
  .g-sum { display: none; }
  .g-body { padding-top: 10px; }
}

/* ---------- 언론보도 ---------- */
.press-list { border-top: 2px solid var(--line-strong); }
.press-item a { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.press-item .p-media { font-size: 13px; color: var(--brand-dark); font-weight: 600; }
.press-item .p-title { display: block; font-size: 18px; color: var(--title); font-weight: 600; margin: 2px 0; }
.press-item .p-sum { font-size: 15px; margin: 0; }
.press-item .p-date { font-size: 13px; color: var(--text-weak); }
.press-item svg { width: 20px; height: 20px; color: var(--text-weak); }
.press-item a:hover .p-title { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 행사일정 ---------- */
.sched-filter { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
.chip {
  min-height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--text); background: #fff;
}
.chip[aria-pressed="true"] { background: var(--title); border-color: var(--title); color: #fff; font-weight: 600; }
.sched-month { margin-bottom: 40px; }
.sched-month h3 { font-family: var(--font-display); font-size: 22px; padding-bottom: 12px; border-bottom: 2px solid var(--line-strong); }
.sched-item { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; }
.sched-date { text-align: center; border: 1px solid var(--line); border-radius: 4px; padding: 10px 0; }
.sched-date .d { display: block; font-size: 30px; font-weight: 700; color: var(--title); line-height: 1.1; }
.sched-date .w { font-size: 13px; color: var(--text-weak); }
.sched-item.is-upcoming .sched-date { border-color: var(--brand); }
.sched-item.is-upcoming .sched-date .d { color: var(--brand); }
.sched-title { font-size: 18px; font-weight: 700; color: var(--title); margin-bottom: 4px; }
.sched-info { font-size: 14px; color: var(--text-weak); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sched-sum { margin: 6px 0 0; font-size: 15px; }
.sched-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 2px; font-size: 14px; color: var(--brand-dark); font-weight: 600; }
.sched-link svg { width: 14px; height: 14px; }
@media (max-width: 767px) { .sched-item { grid-template-columns: 68px 1fr; gap: 14px; } .sched-date .d { font-size: 24px; } }

/* ---------- 연혁 타임라인 ---------- */
.tl-filter { display: flex; justify-content: center; gap: 8px; margin-bottom: 36px; }
.timeline { position: relative; max-width: 900px; margin: 0 auto; }
.tl-year { display: grid; grid-template-columns: 150px 1fr; gap: 56px; padding-bottom: 36px; position: relative; }
.tl-year::before { content: ""; position: absolute; left: 178px; top: 12px; bottom: 0; width: 1px; background: var(--line); } /* 연도 칸(150) + 간격(56)의 가운데 */
.tl-year:last-child::before { bottom: auto; height: 0; }
.tl-year h3 { font-size: 34px; color: var(--brand); text-align: right; line-height: 1.1; position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
.tl-items { display: flex; flex-direction: column; gap: 18px; }
.tl-item { position: relative; padding-left: 4px; }
.tl-item::before { content: ""; position: absolute; left: -32px; top: 9px; /* 점(9px) 가운데 = 선(178px) 가운데 */ width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-month { font-weight: 700; color: var(--title); min-width: 28px; }
.tl-title { font-size: 17px; font-weight: 600; color: var(--title); }
.tl-desc { margin: 4px 0 0; font-size: 15px; }
.tl-src { margin: 4px 0 0; font-size: 12px; color: var(--text-weak); }
.tl-item[hidden], .tl-year[hidden] { display: none; }
@media (max-width: 767px) {
  .tl-year { grid-template-columns: 1fr; gap: 12px; padding-left: 22px; }
  .tl-year::before { left: 4px; top: 0; }
  .tl-year:last-child::before { bottom: 0; height: auto; }
  .tl-year h3 { text-align: left; font-size: 26px; position: static; }
  .tl-item::before { left: -22px; }
}

/* ---------- 조직도 ---------- */
.org { display: flex; flex-direction: column; align-items: center; gap: 0; }
.org-box { min-width: 200px; padding: 16px 24px; text-align: center; border-radius: 4px; background: #fff; border: 1px solid var(--line); }
.org-box .role { display: block; font-weight: 700; color: var(--title); font-size: 17px; }
.org-box .name { font-size: 14px; color: var(--text-weak); }
.org-box.head { background: var(--brand); border-color: var(--brand); }
.org-box.head .role, .org-box.head .name { color: #fff; }
.org-line { width: 1px; height: 32px; background: #c9c9cd; }
.org-units { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 200px)); gap: 20px; position: relative; padding-top: 32px; }
.org-units::before { content: ""; position: absolute; top: 0; left: calc(100% / var(--n, 3) / 2); right: calc(100% / var(--n, 3) / 2); height: 1px; background: #c9c9cd; }
.org-units .org-box { position: relative; min-width: 0; }
.org-units .org-box::before { content: ""; position: absolute; left: 50%; top: -33px; width: 1px; height: 32px; background: #c9c9cd; }
.org-units .org-box.is-tbd { border-style: dashed; }
@media (max-width: 767px) {
  .org-units { grid-template-columns: 1fr; width: 100%; max-width: 320px; padding-top: 0; gap: 12px; }
  .org-units::before, .org-units .org-box::before { display: none; }
  .org-units { margin-top: 12px; }
}

/* ---------- 찾아오시는 길 ---------- */
.loc { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.loc-info { border-top: 2px solid var(--line-strong); }
.loc-info dl { margin: 0; }
.loc-info div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.loc-info dt { font-weight: 700; color: var(--title); }
.loc-info dd { margin: 0; }
.loc-info a { color: var(--title); }
.loc .btn-row { margin-top: 20px; }
@media (max-width: 1023px) { .loc { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- 상세 보기 ---------- */
.view { max-width: 920px; margin: 0 auto; }
.view-head { border-top: 2px solid var(--line-strong); border-bottom: 1px solid var(--line); padding: 28px 4px 22px; }
.view-head .cat { font-size: 14px; color: var(--brand-dark); font-weight: 600; }
.view-head h2 { font-family: var(--font-display); font-size: clamp(23px, 2.5vw, 31px); margin-top: 4px; line-height: 1.4; }
.view-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 14px; color: var(--text-weak); }
.view-body { padding: 36px 4px 48px; }
.view-body .prose { max-width: none; margin: 0; }
.view-hero { margin-bottom: 28px; }
.attach { margin: 0 0 28px; padding: 16px 18px; background: var(--bg-soft); border-radius: 4px; }
.attach a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--title); font-weight: 600; }
.attach a:hover { color: var(--brand-dark); }
.view-photos { display: grid; gap: 28px; margin: 32px 0 0; }
.view-photos figure { margin: 0; }
.view-photos img { width: 100%; height: auto; border-radius: 2px; }
.view-photos figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--text-weak); text-align: center; }
.attach svg { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; }
.view-nav { border-top: 1px solid var(--line); }
.view-nav a { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.view-nav a span:first-child { color: var(--text-weak); }
.view-nav a span:last-child { color: var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-nav a:hover span:last-child { text-decoration: underline; }
.view-actions { display: flex; justify-content: center; margin-top: 36px; }

/* ---------- 페이지 그림 (인사말·조직도처럼 이미지 전체를 보여줌) ---------- */
.page-figure { margin: 0 auto 28px; max-width: 760px; }
.page-figure.wide { max-width: 900px; }
.page-figure img { width: 100%; height: auto; }
.prose .page-figure:last-child { margin-bottom: 0; }
.tl-month { white-space: nowrap; }

/* ---------- 지도 버튼: 각 서비스 로고 색 ---------- */
.btn-kakao { background: #FEE500; border-color: #FEE500; color: #191919; font-weight: 600; }
.btn-kakao:hover { background: #F2D900; border-color: #F2D900; color: #191919; }
.btn-naver { background: #00873C; border-color: #00873C; color: #fff; font-weight: 600; } /* 네이버 초록을 한 단계 진하게: 흰 글자 대비 4.6:1 */
.btn-naver:hover { background: #006F31; border-color: #006F31; color: #fff; }

/* ---------- 평화통일 포럼: 글·사진 좌우 번갈아 (아임웹 원본 배치) ---------- */
.feat-list { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 110px); max-width: 1000px; margin: 0 auto; }
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.feat-row.img-left .feat-img { order: -1; }
.feat-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.feat-caption { margin: 0; font-size: 14px; color: var(--text-weak); font-variant-numeric: tabular-nums; }
.feat-title { font-size: clamp(26px, 3vw, 36px); line-height: 1.3; }
.feat-desc { margin: 0; font-size: 16px; color: var(--text); }
.feat-btn { margin-top: 16px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 6px; background: #1d1d1f; color: #fff; font-size: 14px; font-weight: 600; }
.feat-btn:hover { background: #3a3a3d; }
.feat-img { display: block; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: var(--placeholder); }
.feat-img img, .feat-img .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.feat-img:hover img { transform: scale(1.03); }
.feat-lead { max-width: 760px; margin: 0 auto 24px; font-size: 18px; color: #3d3d42; }
@media (max-width: 767px) {
  .feat-row { grid-template-columns: 1fr; gap: 28px; }
  .feat-row.img-left .feat-img { order: 0; } /* 모바일: 항상 글 → 사진 */
  .feat-btn { margin-top: 8px; }
}

/* 가로로 긴 배너는 썸네일 안에서 잘리지 않게 전체를 보여줌 (imageFit: contain) */
.is-contain { background: #eaf2fb; }
/* 찾아오시는 길 약도 */
.loc-map { margin: 0; }
.loc-map a { display: block; border: 1px solid var(--line); }
.loc-map figcaption { margin-top: 6px; text-align: right; font-size: 12px; color: var(--text-weak); }

/* =========================================================
   소개 (시안 1): 왼쪽 큰 제목 + 오른쪽 첫 문장·본문·숫자·비전
   ========================================================= */
.intro-grid { display: grid; grid-template-columns: 280px 1fr; gap: 72px; }
.intro-side h2 { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.45; }
.intro-side p { margin: 14px 0 0; font-size: 15px; color: var(--text-weak); }
.prose.intro-body { max-width: 720px; margin: 0; }
.intro-lead { font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 25px); line-height: 1.7; color: var(--title); margin-bottom: 28px !important; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px 0 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { padding: 22px 0; }
.facts div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.facts b { display: block; font-family: var(--font-display); font-size: 20px; color: var(--title); }
.facts span { font-size: 15px; color: var(--text-weak); }
.intro-body h2 { margin-top: 0; }
.intro-body ol { list-style: none; padding: 0; display: grid; grid-auto-rows: 1fr; border-top: 2px solid var(--line-strong); counter-reset: v; } /* 항목 높이를 모두 같게 */
.intro-body ol li { counter-increment: v; display: grid; grid-template-columns: 40px 1fr; align-items: center; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--title); line-height: 1.6; }
.intro-body ol li::before { content: counter(v); font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--brand-dark); }

/* =========================================================
   인사말 (시안 1): 사진 + 편지
   ========================================================= */
.letter-grid { display: grid; grid-template-columns: 280px 1fr; gap: 72px; align-items: start; }
.letter-fig { margin: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.letter-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.letter-fig figcaption { margin-top: 16px; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--title); line-height: 1.5; }
.letter-fig figcaption span { display: block; font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--text-weak); }
.prose.letter { max-width: 680px; margin: 0; }
.letter-salute { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.5; color: var(--title); margin-bottom: 28px !important; }
.letter-pull { margin: 34px 0 !important; padding: 4px 0 4px 26px; border-left: 3px solid var(--gold); font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 22px); line-height: 1.75; color: var(--title); }
.letter-sign { margin-top: 44px !important; text-align: right; font-size: 16px; color: var(--text-weak); }
.letter-sign b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 22px; color: var(--title); }

/* =========================================================
   조직도 (시안 1): 글자로 된 조직도 + 지부 이름표
   ========================================================= */
.orgc { display: flex; flex-direction: column; align-items: center; }
.orgc-node { display: block; min-width: 190px; padding: 14px 26px; border: 1px solid var(--line); background: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--title); text-align: center; line-height: 1.4; }
.orgc-node.is-top { background: var(--title); border-color: var(--title); color: #fff; }
.orgc-node.is-mid { background: #007560; border-color: #007560; color: #fff; } /* 흰 글자 대비 5.7:1 */
.orgc-row { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; width: min(760px, 100%); }
.orgc-side { display: flex; align-items: center; }
.orgc-side i { flex: 1; height: 1px; background: #b8bcbb; }
.orgc-side .orgc-node { font-family: var(--font); font-weight: 500; font-size: 15.5px; min-width: 170px; }
.orgc-v { display: block; width: 1px; height: 72px; background: #b8bcbb; }
.orgc-v.short { height: 30px; }
.orgc-depts { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: min(760px, 100%); padding-top: 30px; }
.orgc-depts::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 30px; border: 1px solid #b8bcbb; border-bottom: 0; }
.orgc-dept .orgc-node { width: 100%; background: var(--brand-tint); border-color: #bfe3d8; color: #006b56; margin: 0; }
.orgc-dept ul { border: 1px solid var(--line); border-top: 0; }
.orgc-dept li { padding: 11px 18px; border-top: 1px solid var(--line); font-size: 16px; color: var(--title); text-align: center; }
.chapters { margin-top: 72px; }
.chapters h2 { font-family: var(--font-display); font-size: 26px; margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 16px; color: var(--title); background: #fff; }

@media (max-width: 1023px) {
  .intro-grid, .letter-grid { grid-template-columns: 1fr; gap: 28px; }
  .letter-fig { position: static; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: end; }
  .letter-fig figcaption { margin: 0; }
}
@media (max-width: 767px) {
  .facts { grid-template-columns: 1fr; }
  .facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .facts div { padding: 16px 0; }
  .intro-body ol li { grid-template-columns: 32px 1fr; padding: 14px 0; }
  .orgc-row .orgc-node { min-width: 0; font-size: 14px; padding: 10px 8px; }
  .orgc-side i { flex: 0 0 10px; }
  .orgc-depts { grid-template-columns: 1fr; gap: 24px; }
  .orgc-depts::before { display: none; }
  .orgc-node { min-width: 0; width: 100%; }
  .chips li { font-size: 15px; padding: 8px 14px; }
}

/* =========================================================
   빈 게시판 안내 (시안 C)
   ========================================================= */
.empty-guide { max-width: 760px; margin: 0 auto; padding: 56px 24px 44px; text-align: center; background: var(--bg-soft); border: 1px solid var(--line); }
.empty-guide h3 { font-family: var(--font-display); font-size: clamp(21px, 2vw, 24px); margin: 0 0 10px; }
.empty-guide p { max-width: 34em; margin: 0 auto 22px; color: var(--text); }
.empty-guide .btn { min-height: 46px; padding: 0 20px; }
.empty-guide .btn-solid { background: var(--brand-dark); border-color: var(--brand-dark); }
.empty-guide .btn-solid:hover { background: #006b56; border-color: #006b56; }
.empty-next { display: flex; align-items: center; gap: 20px; max-width: 760px; margin: 20px auto 0; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); }
.empty-next:hover .en-t { text-decoration: underline; text-underline-offset: 3px; }
.en-date { flex-shrink: 0; padding-right: 20px; border-right: 1px solid var(--line); text-align: center; }
.en-date b { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--title); }
.en-date small { display: block; margin-top: 6px; font-size: 13px; color: var(--text-weak); white-space: nowrap; }
.en-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.en-k { font-size: 13px; font-weight: 600; color: #006b56; }
.en-t { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--title); }
.en-p { font-size: 14px; color: var(--text-weak); }
@media (max-width: 767px) {
  .empty-guide { padding: 40px 18px 32px; }
  .empty-guide .btn-row { flex-direction: column; }
  .empty-guide .btn { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
  .loc-info dd a { display: inline-flex; align-items: center; min-height: 44px; }
  .loc-map figcaption { font-size: 13px; }
}

/* 05-home.css */
/* =========================================================
   메인 (시안 1): 글자로 쓴 첫 화면 → 다가오는 행사 → 새 소식·바로 가기 → 행사와 활동
   ========================================================= */
.hero { position: relative; overflow: hidden; color: #fff; height: clamp(520px, 44vw, 680px); display: flex; align-items: center; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 60%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12,16,14,.86) 0%, rgba(12,16,14,.66) 36%, rgba(12,16,14,.14) 72%); }
.hero-inner { position: relative; z-index: 2; }
.hero.has-next .hero-inner { padding-bottom: 72px; }
.hero-title { color: #fff; font-family: var(--font-display); font-size: clamp(36px, 4.1vw, 58px); line-height: 1.3; letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,.3); }
.hero-text { max-width: 30em; margin: 22px 0 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: rgba(255,255,255,.92); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.btn-hero, .btn-hero-line { min-height: 50px; padding: 0 24px; font-size: 16px; font-weight: 600; }
.btn-hero { background: #007560; border-color: #007560; color: #fff; } /* 흰 글자 대비 5.7:1 */
.btn-hero:hover { background: #005f4e; border-color: #005f4e; color: #fff; }
.btn-hero-line { background: transparent; border-color: rgba(255,255,255,.75); color: #fff; }
.btn-hero-line:hover { background: rgba(255,255,255,.12); color: #fff; }

/* 다가오는 행사: 첫 화면에서 힘을 주는 단 한 곳 */
.next { position: relative; z-index: 3; margin-top: -84px; }
.next[hidden] { display: none; }
.next-box { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 36px; padding: 30px 40px; background: #fff; border-top: 4px solid var(--brand); box-shadow: 0 18px 50px rgba(20,30,25,.14); }
.next-date { margin: 0; text-align: center; padding-right: 30px; border-right: 1px solid var(--line); }
.next-date b { display: block; font-family: var(--font-display); font-size: 54px; line-height: 1; color: var(--title); font-variant-numeric: lining-nums; }
.next-date span { display: block; margin-top: 10px; font-size: 15px; color: var(--text-weak); white-space: nowrap; }
.next-k { margin: 0; font-size: 15px; font-weight: 600; color: var(--brand-dark); }
.next-main h2 { margin: 4px 0 6px; font-family: var(--font-display); font-size: clamp(22px, 2vw, 27px); line-height: 1.4; }
.next-meta { margin: 0; font-size: 16px; color: var(--text-weak); }
.next-btn { border-color: var(--title); color: var(--title); min-height: 48px; padding: 0 22px; }

/* 공통 섹션 머리 */
.home-sec { padding-top: clamp(64px, 7vw, 96px); }
.home-sec:last-of-type { padding-bottom: var(--section-y); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.sec-head h2 { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); }
.sec-more { font-size: 15px; color: var(--text-weak); }
.sec-more:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }

/* 새 소식 + 바로 가기 */
.news-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 64px; }
.news { border-top: 2px solid var(--line-strong); }
.news a { display: grid; grid-template-columns: 112px 1fr auto; gap: 16px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--line); }
.news-cat { font-size: 14px; font-weight: 600; color: var(--brand-dark); }
.news-t { font-size: 17px; color: var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news a:hover .news-t { text-decoration: underline; text-underline-offset: 3px; }
.news-d { font-size: 15px; color: var(--text-weak); font-variant-numeric: tabular-nums; white-space: nowrap; }
.news-empty { padding: 28px 0; color: var(--text-weak); border-top: 2px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.quick { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--line-strong); }
.quick a { display: flex; flex-direction: column; gap: 4px; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.quick a:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 20px; }
.quick a:nth-child(even) { padding-left: 24px; }
.quick b { font-family: var(--font-display); font-size: 19px; color: var(--title); }
.quick span { font-size: 14.5px; color: var(--text-weak); line-height: 1.5; }
.quick a:hover b { color: var(--brand-dark); }

/* 행사와 활동: 포스터를 자르지 않고 전체 보이기 */
.posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.poster a { display: flex; flex-direction: column; }
.poster-pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; }
.poster-pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .3s; }
.poster a:hover .poster-pic img { transform: scale(1.02); }
.poster-t { margin-top: 16px; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--title); }
.poster-s { margin-top: 4px; font-size: 15px; color: var(--text-weak); }

@media (max-width: 1023px) {
  .next-box { grid-template-columns: 130px 1fr; gap: 24px; padding: 26px 28px; }
  .next-btn { grid-column: 1 / -1; justify-self: start; }
  .news-grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 767px) {
  .hero { height: auto; min-height: 500px; align-items: flex-end; }
  .hero::before { background: linear-gradient(0deg, rgba(12,16,14,.88) 0%, rgba(12,16,14,.6) 55%, rgba(12,16,14,.2) 100%); }
  .hero-inner { padding-top: 120px; padding-bottom: 40px; }
  .hero.has-next .hero-inner { padding-bottom: 92px; }
  .hero-title { font-size: 32px; }
  .hero-text { font-size: 16px; margin-top: 12px; }
  .hero-btns { margin-top: 22px; }
  .btn-hero, .btn-hero-line { min-height: 46px; padding: 0 18px; font-size: 15px; }
  .next { margin-top: -60px; }
  .next-box { grid-template-columns: 92px 1fr; gap: 16px; padding: 20px 18px; }
  .next-date { padding-right: 14px; }
  .next-date b { font-size: 34px; }
  .next-date span { font-size: 13px; white-space: normal; }
  .next-main h2 { font-size: 19px; }
  .next-meta { font-size: 14px; }
  .next-btn { justify-self: stretch; min-height: 44px; }
  .news a { grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; }
  .news-cat { grid-column: 1 / -1; font-size: 13px; }
  .news-t { font-size: 16px; white-space: normal; }
  .quick b { font-size: 17px; }
  .quick span { font-size: 13.5px; }
  .home-posters .container { padding: 0; }
  .home-posters .sec-head { padding: 0 var(--gutter); }
  .posters { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .posters::-webkit-scrollbar { display: none; }
  .poster { scroll-snap-align: start; }
  .poster-t { font-size: 16px; margin-top: 10px; }
  .poster-s { font-size: 13.5px; }
}

/* 대표 콘텐츠 띠: 한반도 분단의 역사 (시안 F) */
.home-feature { margin-top: clamp(64px, 7vw, 96px); background: #1b1a17; color: #fff; overflow: hidden; }
.hf-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: stretch; }
.hf-fig { position: relative; margin: 0 0 0 calc(var(--gutter) * -1); min-height: 380px; }
.hf-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-fig figcaption { position: absolute; right: 12px; bottom: 10px; font-size: 13px; color: rgba(255,255,255,.8); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.hf-text { align-self: center; padding: 56px 0; }
.hf-k { margin: 0; font-size: 15px; font-weight: 600; color: #d8b47a; }
.hf-text h2 { margin: 6px 0 14px; font-family: var(--font-display); font-size: clamp(28px, 2.8vw, 38px); line-height: 1.35; color: #fff; }
.hf-p { margin: 0 0 22px; color: rgba(255,255,255,.85); max-width: 30em; }
.hf-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; }
.hf-years li { padding: 4px 10px; border: 1px solid rgba(255,255,255,.32); font-size: 14px; color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums; }
.hf-btn { min-height: 48px; padding: 0 22px; background: #fff; border-color: #fff; color: #1b1a17; font-weight: 700; }
.hf-btn:hover { background: #ece8df; border-color: #ece8df; color: #1b1a17; }
.home-feature + .home-posters { padding-top: clamp(64px, 7vw, 96px); }
@media (max-width: 767px) {
  .hf-inner { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .hf-fig { margin: 0; min-height: 220px; }
  .hf-text { padding: 28px var(--gutter) 36px; }
  .hf-btn { width: 100%; justify-content: center; }
}

/* ---------- 첫 화면 팝업 ---------- */
.popup { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.25); }
.popup[hidden], .popup-box[hidden] { display: none; }
.popup.is-multi { gap: 16px; }
.popup-box { position: relative; width: min(400px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: #fff; box-shadow: 0 16px 48px rgba(0,0,0,.25); }
.popup-box img { width: 100%; height: auto; display: block; }
.popup-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #333; background: rgba(255,255,255,.75); border-radius: 50%; }
.popup-x svg { width: 22px; height: 22px; }
.popup-count { display: none; position: absolute; top: 14px; left: 12px; padding: 3px 10px; font-size: 13px; color: #fff; background: rgba(0,0,0,.55); border-radius: 999px; }
/* 모바일: 한 장씩 (닫으면 다음 장) */
@media (max-width: 860px) {
  .popup-box:not(.is-front) { display: none; }
  .popup.is-multi .popup-count { display: block; }
}
.popup-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.popup-actions button { min-height: 50px; font-size: 15px; color: var(--title); background: #fff; }
.popup-actions button + button { border-left: 1px solid var(--line); }
.popup-actions button:hover { background: var(--bg-soft); }

/* 06-division.css */
/* =========================================================
   한반도 분단의 역사 (연혁 / 사건)
   ========================================================= */
main { overflow-x: clip; } /* 화면 폭 가득 배너가 가로 스크롤을 만들지 않게 */

/* ---------- 이미지 (없으면 회색 자리표시) ---------- */
.dv-pic { position: relative; display: block; overflow: hidden; background: var(--placeholder); }
.dv-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-pic.is-missing img { display: none; }
.dv-pic.is-missing::after {
  content: "이미지 준비 중"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--placeholder-text); font-size: 12px;
}
.dv-pic.r43 { aspect-ratio: 4 / 3; }
.dv-pic.r169 { aspect-ratio: 16 / 9; }
/* 밝은 사진 위에서도 읽히도록 어두운 바탕을 깔아 둠 */
.dv-ai {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  padding: 2px 7px; border-radius: 3px; background: rgba(0,0,0,.55);
  font-size: 12px; line-height: 1.5; color: #fff; letter-spacing: .02em;
}
.dv-pic.is-missing .dv-ai { display: none; }

/* ---------- 연혁: 시기 배너 (화면 폭 가득) ---------- */
.dv-era { margin-top: 24px; scroll-margin-top: calc(var(--header-h) + 16px); }
.dv-era + .dv-era { margin-top: 8px; }
.dv-banner {
  position: relative; width: 100%; /* 사이트 다른 페이지와 같은 본문 폭(최대 1180px) 안에 둠 */
  height: clamp(240px, 24vw, 320px); overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;
}
.dv-banner .dv-banner-img { position: absolute; inset: 0; }
.dv-banner::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.dv-banner .dv-ai { right: 14px; bottom: 10px; }
.dv-banner-text { position: relative; z-index: 1; padding: 0 var(--gutter); }
.dv-banner-text h2 { color: #fff; font-size: inherit; line-height: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dv-period { font-family: var(--font-menu); font-weight: 400; font-size: clamp(38px, 5vw, 62px); line-height: 1.1; letter-spacing: -0.01em; }
.dv-era-name { font-family: var(--font-menu); font-weight: 400; font-size: clamp(17px, 1.7vw, 22px); opacity: .92; }
.dv-era-intro { max-width: 680px; margin: 36px auto 0; text-align: center; font-size: 16px; color: var(--text); }

/* ---------- 연혁: 항목 (가운데 줄 · 왼쪽 썸네일 · 오른쪽 글) ---------- */
.dv-items { position: relative; max-width: 980px; margin: 0 auto; padding: 40px 0 80px; }
.dv-items::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #e2e2e4; }
.dv-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 14px 0; scroll-margin-top: calc(var(--header-h) + 24px); }
.dv-item[hidden], .dv-era[hidden] { display: none; }
.dv-thumb { justify-self: end; width: 120px; margin-right: 52px; }
.dv-thumb .dv-pic { aspect-ratio: 1 / 1; }
.dv-dot { position: absolute; left: 50%; top: 71px; width: 7px; height: 7px; background: var(--title); transform: translateX(-50%); }
.dv-item.is-open .dv-dot, .dv-item.is-target .dv-dot { background: var(--brand); }
.dv-body { padding: 49px 0 0 32px; min-width: 0; }
.dv-date { margin: 0; font-style: italic; font-size: 16px; color: var(--title); line-height: 1.4; }
.dv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.dv-title { font-size: 17px; font-weight: 600; color: var(--title); margin-right: 2px; } /* 한문연 연혁 페이지와 같은 글씨 */
.dv-toggle {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid #cfcfd3; color: #6b6b70; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: .2s;
}
.dv-toggle:hover, .dv-toggle[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
/* 손가락으로 누르기 쉽게 터치 영역만 넓힘 */
.dv-toggle { position: relative; }
.dv-toggle::before { content: ""; position: absolute; inset: -9px; }
.dv-more { margin-top: 12px; padding: 14px 16px; background: var(--bg-soft); border-left: 2px solid var(--brand); font-size: 15px; max-width: 440px; }
.dv-desc { margin: 0 0 8px; color: #45454a; line-height: 1.7; }
.dv-when, .dv-src { margin: 0 0 4px; font-size: 13px; color: var(--text-weak); }
.dv-src a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.dv-golink { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--brand-dark); }
.dv-golink:hover { text-decoration: underline; text-underline-offset: 3px; }
.dv-item.is-target .dv-title { color: var(--title); font-weight: 700; }
/* 제목·날짜·썸네일을 눌러도 펼쳐짐 */
.dv-date, .dv-title, .dv-thumb { cursor: pointer; }
.dv-item:hover .dv-title { color: var(--brand-dark); }

/* ---------- 연혁: 도구 줄 (구분 필터 · 모두 펼치기) · 시기 바로가기 ---------- */
.dv-tools { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.dv-tools .tl-filter { margin-bottom: 0; }
.dv-expand {
  min-height: 40px; padding: 0 4px 0 16px; border-left: 1px solid var(--line);
  font-size: 15px; color: var(--brand-dark); font-weight: 600; background: none;
}
.dv-expand:hover { text-decoration: underline; text-underline-offset: 3px; }
.dv-eranav { margin-bottom: 8px; position: relative; } /* 안의 화면낭독기용 글자가 바깥으로 나가 가로 스크롤을 만들지 않게 */
.dv-eranav .chip { min-height: 36px; padding: 0 14px; font-size: 14px; color: var(--text-weak); }
.dv-eranav .chip[hidden] { display: none; }

@media (max-width: 767px) {
  .dv-banner { height: 200px; }
  .dv-era-intro { margin-top: 24px; font-size: 15px; text-align: left; }
  .dv-items { padding: 28px 0 56px; }
  .dv-items::before { left: 15px; }
  .dv-item { grid-template-columns: 1fr; padding: 14px 0 14px 40px; }
  .dv-thumb { justify-self: start; width: 96px; margin: 0 0 10px; }
  .dv-dot { left: 15px; top: 131px; }
  .dv-body { padding: 0; }
  .dv-more { max-width: none; }
}

/* ---------- 사건 목록 ---------- */
.dv-years { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; }
.dv-years .chip { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.dv-years .chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.dv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; } /* .g-grid 와 같은 간격 */
.dv-card { scroll-margin-top: calc(var(--header-h) + 24px); }
.dv-card a { display: flex; flex-direction: column; height: 100%; }
.dv-card .dv-pic img { transition: transform .4s; }
.dv-card a:hover .dv-pic img { transform: scale(1.03); }
.dv-card-body { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.dv-card-year { font-size: 14px; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.dv-card-title { font-size: 18px; line-height: 1.45; color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* .g-title 과 같은 크기 */
.dv-card a:hover .dv-card-title { text-decoration: underline; text-underline-offset: 4px; }
.dv-card-lead { font-size: 15px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-card-badges { display: flex; gap: 6px; margin-top: 2px; }
@media (max-width: 1023px) { .dv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; } }
@media (max-width: 767px) {
  /* 모바일도 사이트의 다른 카드 목록처럼 2열 */
  .dv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .dv-card-body { padding-top: 10px; gap: 4px; }
  .dv-card-title { font-size: 15px; }
  .dv-card-lead { display: none; }
  .dv-card-year { font-size: 13px; }
  .dv-years { justify-content: flex-start; margin-bottom: 24px; gap: 6px; }
  .dv-years .chip { min-height: 36px; padding: 0 14px; font-size: 14px; }
}

/* ---------- 사건 상세 (본문 폭 720px) ---------- */
.dv-view { max-width: 920px; margin: 0 auto; } /* 다른 게시글 상세(.view)와 같은 폭 */
.dv-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--text-weak); margin-bottom: 8px; }
.dv-back:hover { color: var(--brand-dark); }

/* 접힌 종이 모양 제목 상자 */
.dv-paper {
  position: relative; width: min(100%, 480px); margin: 8px auto 44px; padding: 40px 36px;
  border: 3px solid #d6d6d9; background: var(--bg); text-align: center;
}
.dv-paper::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 40px; height: 40px;
  background: linear-gradient(to top left, var(--bg) 50%, #c4c4c8 50%);
}
.dv-paper h2 { text-wrap: balance; font-family: var(--font-menu); font-weight: 700; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.5; color: var(--title); }

.dv-fig { margin: 0; }
.dv-fig figcaption { margin-top: 6px; text-align: right; font-size: 13px; color: var(--text-weak); }
.dv-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 14px; color: var(--text-weak); font-variant-numeric: tabular-nums; }
.dv-lead { margin: 14px 0 0; text-align: center; font-size: 18px; line-height: 1.85; color: #3d3d42; }

.dv-sec { margin-top: 64px; }
.dv-sec h3 { text-align: center; font-size: 19px; font-weight: 600; color: var(--title); margin-bottom: 22px; }
.dv-points { margin: 24px auto 0; max-width: 640px; display: flex; flex-direction: column; gap: 10px; }
.dv-points li { position: relative; padding-left: 18px; font-size: 16.5px; line-height: 1.8; color: #45454a; }
.dv-points li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

.dv-related, .dv-sources { margin-top: 64px; padding-top: 22px; border-top: 2px solid var(--line-strong); }
.dv-related h3, .dv-sources h3 { font-size: 17px; margin-bottom: 10px; }
.dv-related li a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.dv-related .d { font-style: italic; color: var(--title); min-width: 64px; font-variant-numeric: tabular-nums; }
.dv-related .t { color: #45454a; }
.dv-related a:hover .t { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.dv-sources { margin-top: 40px; border-top-width: 1px; border-top-color: var(--line); }
.dv-sources li { padding: 6px 0; font-size: 14px; }
.dv-sources a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }

.dv-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.dv-pn a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.dv-pn a:hover { border-color: var(--brand); }
.dv-pn .dv-pn-next { text-align: right; }
.dv-pn .l { font-size: 13px; color: var(--text-weak); }
.dv-pn .t { font-size: 15px; color: var(--title); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) {
  .dv-paper { padding: 30px 22px; margin-bottom: 32px; }
  .dv-lead { font-size: 17px; text-align: left; }
  .dv-sec { margin-top: 48px; }
  .dv-pn { grid-template-columns: 1fr; }
  .dv-tools { gap: 8px 12px; }
  .dv-expand { padding-left: 12px; font-size: 14px; }
  /* 시기 바로가기는 한 줄로 두고 옆으로 밀어서 봄 */
  .dv-eranav { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 4px; padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .dv-eranav::-webkit-scrollbar { display: none; }
  .dv-eranav .chip { flex: none; }
  .dv-ai { font-size: 13px; padding: 1px 6px; right: 6px; bottom: 6px; }
  .dv-pn .dv-pn-next { text-align: left; }
}

/* ---------- 페이지 하단 안내 (출처 · AI 이미지 · 기준일) ---------- */
.dv-notice { margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--text-weak); line-height: 1.8; }
.dv-notice p { margin: 0; }

/* 스크립트가 내용을 그리기 전 자리를 미리 잡아 화면이 튀지 않게 함 */
.dv-timeline:empty, .dv-view:empty { min-height: 100vh; }
.dv-cards:empty { min-height: 60vh; }
.dv-points { max-width: 720px; }
.dv-lead { max-width: 760px; margin-left: auto; margin-right: auto; }

/* 누르는 영역 넉넉하게 (휴대폰) */
@media (max-width: 767px) {
  .dv-src a, .dv-sources a { display: inline-block; padding: 6px 0; }
  .dv-golink { display: inline-flex; align-items: center; min-height: 44px; }
}