/* ==========================================================================
   KSAIR — 대한재활인공지능학회
   디자인 방향: 「학회지 표지」 — 인쇄물의 언어로 만든다.

   ⛔ 하지 않는 것 (= "AI가 만든 사이트"의 표지)
      그라디언트 히어로 · 둥근 카드 + 그림자 · 아이콘 3개 나열
      "지금 시작하기" CTA · 이모지 · 보라색 그라디언트

   ✅ 하는 것 (= 실제 학회지·학술대회 인쇄물의 재료)
      명조 제목 + 영문 이탤릭 부제 (학회지 표지 조판)
      구획은 그림자가 아니라 괘선(hairline)
      키포인트 골격도 — 발대식 슬라이드의 자체 그래픽에서 가져옴
      첫 화면에 공지·행사를 날짜와 함께 (여백이 아니라 밀도)

   ⚠️ 폰트를 외부에서 안 부르는 이유 — 개인정보 국외이전
      Google Fonts 를 부르면 방문자 IP 가 미국 서버로 전송된다.
      비영리 학회 홈페이지는 개인정보처리방침에 그것을 적어야 하고,
      안 적으면 처리방침이 사실과 달라진다. 그래서 표제 명조는 **자체 호스팅**하고
      본문 고딕은 **시스템 폰트**만 쓴다 — 외부 요청이 0 이라 문제 자체가 안 생긴다.
      부수효과: 한국 학술문서의 기본 활자가 원래 명조라 더 정확하다.
      (2026-08-15 창 A 가 metafithub 감사에서 국외이전 누락을 발견한 직후 결정)
   ========================================================================== */

/* 표제용 명조 — 자체 호스팅. 외부 요청 0.
   나눔명조를 KS X 1001 상용 2,350자 + 사이트 실사용 문자로 서브셋했다
   (3.0MB → 329KB). 만드는 법은 tools/subset_fonts.py.
   ⓘ SIL Open Font License 1.1 · assets/fonts/OFL.txt
   ⚠️ Bold 는 싣지 않는다. 표제의 위계는 굵기가 아니라 크기와 색으로 만든다 —
      실제 학회지 표지의 조판이 그렇고, Bold 를 더하면 357KB 가 더 붙는다. */
@font-face {
  font-family: "KSAIR Myeongjo";
  src: url("/assets/fonts/nanummyeongjo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;   /* 글꼴을 기다리느라 글자가 안 보이는 일이 없게 */
}

:root {
  /* 색 — 발대식 슬라이드에서 뽑았다.
     슬라이드 배경은 남보라, 관절 점은 하늘색·민트였다. */
  --paper:      #F7F5F0;   /* 따뜻한 종이. 순백(#FFF)은 화면에서 차고 싸 보인다 */
  --paper-deep: #EFEBE2;
  --ink:        #16181D;
  --ink-soft:   #4A4F5A;
  --ink-faint:  #7C8290;
  --navy:       #1B2A47;   /* 표제·머리글. 학술지 표지의 먹색 */
  --navy-deep:  #121C30;
  --cyan:       #2C7DA0;   /* 강조 1 — 슬라이드 관절 점 */
  --mint:       #3E8E6E;   /* 강조 2 */
  --crimson:    #A63A3A;   /* 주의·필수 표시. 학술지 정오표의 붉은색 */
  --rule:       #D5D0C6;   /* 괘선 */
  --rule-firm:  #B3ADA0;

  /* 활자 — 표제 명조는 자체 호스팅(@font-face), 본문 고딕은 시스템.
     명조를 시스템에 맡기면 맥 AppleMyungjo / 윈도 바탕으로 갈린다. */
  --serif: "KSAIR Myeongjo", "Nanum Myeongjo", "AppleMyungjo", "Batang", "바탕",
           "Noto Serif KR", "Noto Serif CJK KR", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
           "Pretendard", "Malgun Gothic", "맑은 고딕", "Noto Sans KR",
           "Noto Sans CJK KR", sans-serif;
  /* ⚠️ --mono 는 숫자·영문에만 쓴다. 한글에 먹이면 전각으로 그려져 자간이
     벌어지고 조판이 무너진다. 2026-08-15 실측 — 표 캡션·빵부스러기·상태 태그에
     잘못 걸어 두었다가 스크린샷에서 발견했다. 한글이 섞일 자리에는 --sans 에
     letter-spacing 을 주는 .kicker 를 쓴다. */
  --mono:  "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1120px;
  --gut: 28px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.78;
  /* ★ 한국어 조판의 1순위. 없으면 단어 중간에서 줄이 끊긴다.
     한국어를 모르고 만든 사이트의 가장 확실한 표지다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* 건너뛰기 링크 — 키보드 사용자를 위한 접근성 기본 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 18px;
}
.skip:focus { left: 0; }

/* ── 상단 유틸 바 ────────────────────────────────────────────────
   실제 학회 사이트가 거의 예외 없이 가지고 있는 요소.
   로그인/ENGLISH/사이트맵이 얇은 줄로 맨 위에 붙는다. */
.util {
  background: var(--navy-deep);
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.util .wrap { display: flex; justify-content: flex-end; gap: 20px; height: 34px; align-items: center; }
.util a { color: rgba(255,255,255,.72); }
.util a:hover { color: #fff; text-decoration: none; }
.util .sep { color: rgba(255,255,255,.28); }

/* ── 머리글 ─────────────────────────────────────────────────── */
.masthead { background: var(--paper); border-bottom: 1px solid var(--rule); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; }

.brand { display: flex; align-items: center; gap: 16px; }
.brand:hover { text-decoration: none; }
.brand__mark { flex: 0 0 auto; width: 46px; height: 46px; }
.brand__ko {
  font-family: var(--serif);
  font-size: 25px; line-height: 1.1; color: var(--navy);
  letter-spacing: -.015em; margin: 0;
  font-weight: 400;
}
.brand__en {
  font-family: var(--serif); font-style: italic;
  font-size: 11.5px; letter-spacing: .04em; color: var(--ink-faint);
  margin: 4px 0 0; line-height: 1.3;
}

/* ── 주 메뉴 ─────────────────────────────────────────────────── */
.nav { background: var(--navy); border-bottom: 3px solid var(--navy-deep); }
.nav__list { display: flex; margin: 0; padding: 0; list-style: none; }
.nav__top > a {
  display: block; padding: 14px 26px;
  color: #fff; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
}
.nav__top > a:hover, .nav__top:focus-within > a { background: var(--cyan); text-decoration: none; }

.nav__sub {
  display: none; position: absolute; z-index: 40;
  margin: 0; padding: 8px 0; list-style: none; min-width: 190px;
  background: var(--paper); border: 1px solid var(--rule-firm);
  border-top: none; box-shadow: 0 8px 22px rgba(18,28,48,.14);
}
.nav__top { position: relative; }
.nav__top:hover .nav__sub, .nav__top:focus-within .nav__sub { display: block; }
.nav__sub a { display: block; padding: 7px 20px; color: var(--ink); font-size: 14px; }
.nav__sub a:hover { background: var(--paper-deep); color: var(--navy); text-decoration: none; }

.nav__toggle { display: none; }

/* ── 상태 띠 — 창립준비위원회 단계임을 숨기지 않는다 ──────────────
   비영리 단체 사이트에서 현재 상태를 흐리게 적으면 신뢰가 깎인다.
   "창립총회 예정"을 첫 화면에 명시하는 편이 낫다. */
.status {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px; color: var(--ink-soft);
}
.status .wrap { display: flex; align-items: center; gap: 14px; padding-top: 11px; padding-bottom: 11px; flex-wrap: wrap; }
.status__tag {
  font-size: 11.5px; letter-spacing: .06em; font-weight: 600;
  background: var(--navy); color: #fff; padding: 3px 10px; white-space: nowrap;
}

/* ── 표제 조판 (학회지 표지) ──────────────────────────────────── */
.hero { border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; padding-top: 62px; padding-bottom: 58px; }
.hero__eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  color: var(--cyan); text-transform: uppercase; margin: 0 0 22px;
}
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 5vw, 52px); line-height: 1.3;
  color: var(--navy); margin: 0; letter-spacing: -.02em;
  /* ⚠️ ch 를 쓰지 말 것 — ch 는 숫자 '0' 의 폭이라 한글에서는 실측 절반이다.
     21ch 로 뒀다가 표제가 "재는 / 일에서" 로 잘렸다(2026-08-15 스크린샷).
     한글 줄길이는 em 으로 잡는다. 1em = 한글 한 글자. */
  max-width: 17em;
  text-wrap: balance;
}
/* 강조구가 줄바꿈으로 쪼개지지 않게 한 덩어리로 묶는다 */
.hero__title em { font-style: normal; color: var(--cyan); white-space: nowrap; }
.hero__lead {
  margin: 26px 0 0; max-width: 27em;
  font-size: 16.5px; line-height: 1.85; color: var(--ink-soft);
}
.hero__rule { margin: 34px 0 0; }

/* 배경 도판 — 해부도판 워터마크처럼 아주 옅게 */
.hero__plate {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 460px; opacity: .085; z-index: 1; pointer-events: none;
}
@media (max-width: 900px) { .hero__plate { display: none; } }

/* ── 괘선 구분자 — 선 위에 관절 점 하나 ───────────────────────── */
.rule-node { display: flex; align-items: center; gap: 0; }
.rule-node::before, .rule-node::after { content: ""; height: 1px; background: var(--rule-firm); flex: 1; }
.rule-node::before { flex: 0 0 46px; }
.rule-node i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); margin: 0 7px; flex: 0 0 auto;
}

/* ── 구획 제목 — 학회지 목차 조판 ─────────────────────────────── */
.sec { padding: 54px 0; border-bottom: 1px solid var(--rule); }
.sec:last-child { border-bottom: none; }
.sec__head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 13px; margin-bottom: 26px;
  border-bottom: 2px solid var(--navy);
}
.sec__num {
  font-family: var(--mono); font-size: 12px; color: var(--cyan);
  letter-spacing: .1em; flex: 0 0 auto;
}
.sec__title {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  color: var(--navy); margin: 0; letter-spacing: -.015em;
}
.sec__more { margin-left: auto; font-size: 13.5px; color: var(--ink-faint); flex: 0 0 auto; }
.sec__more:hover { color: var(--cyan); }

/* ── 2단 배치 ────────────────────────────────────────────────── */
.cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; gap: 40px; } }

/* ── 게시물 목록 — 날짜가 오른쪽에 붙는 학회 게시판 조판 ───────── */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-bottom: 1px dotted var(--rule-firm); }
.posts li:first-child { border-top: 1px solid var(--rule-firm); }
.posts a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 2px; color: var(--ink);
}
.posts a:hover { color: var(--cyan); text-decoration: none; background: rgba(44,125,160,.045); }
.posts__t { flex: 1 1 auto; font-size: 14.8px; }
.posts__d { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.badge {
  font-size: 11px; padding: 1px 7px; margin-right: 8px;
  border: 1px solid var(--rule-firm); color: var(--ink-soft);
  vertical-align: 2px; white-space: nowrap;
}
.badge--new { border-color: var(--crimson); color: var(--crimson); }

/* ── 빈 게시판 안내 — 새 학회는 글이 없다. 숨기지 않는다 ───────── */
.empty {
  border: 1px dashed var(--rule-firm); padding: 26px;
  color: var(--ink-faint); font-size: 14px; text-align: center;
}

/* ── 행사 카드 (괘선만, 그림자 없음) ──────────────────────────── */
.event { border: 1px solid var(--rule-firm); background: #fff; padding: 22px 24px; }
.event__date {
  font-size: 12.5px; letter-spacing: .05em; font-weight: 600;
  color: var(--cyan); margin: 0 0 8px;
}
.event__title { font-family: var(--serif); font-size: 18px; color: var(--navy); margin: 0 0 10px; font-weight: 400; }
.event__meta { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* ── 빠른 이동 — 아이콘 없이 번호와 활자로 ────────────────────── */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule-firm); background: #fff; }
.quick a {
  padding: 22px 18px; border-right: 1px solid var(--rule);
  color: var(--ink); display: block;
}
.quick a:last-child { border-right: none; }
.quick a:hover { background: var(--navy); color: #fff; text-decoration: none; }
.quick a:hover .quick__n { color: rgba(255,255,255,.5); }
.quick a:hover .quick__s { color: rgba(255,255,255,.72); }
.quick__n { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: .1em; display: block; margin-bottom: 7px; }
.quick__t { font-family: var(--serif); font-size: 16.5px; font-weight: 400; display: block; }
.quick__s { font-size: 12.5px; color: var(--ink-faint); display: block; margin-top: 4px; }
@media (max-width: 780px) {
  .quick { grid-template-columns: repeat(2, 1fr); }
  .quick a:nth-child(2n) { border-right: none; }
  .quick a:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* ── 본문 활자 ───────────────────────────────────────────────── */
.prose { max-width: 34em; }
.prose h2 {
  font-family: var(--serif); font-size: 21px; color: var(--navy);
  margin: 44px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--rule-firm);
  font-weight: 400; letter-spacing: -.015em;
}
.prose h3 { font-family: var(--serif); font-size: 17.5px; color: var(--navy); margin: 30px 0 10px; font-weight: 400; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose strong { color: var(--navy); font-weight: 600; }

/* 인용 — 정관 조문·인사말에 쓴다 */
.prose blockquote {
  margin: 22px 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--cyan);
  font-family: var(--serif); font-size: 16px; color: var(--ink-soft);
}

/* ── 표 — 학술 논문의 표 조판 (세로선 없음, 위아래 굵은 선) ───── */
.tbl { width: 100%; border-collapse: collapse; margin: 20px 0 26px; font-size: 14.2px; }
.tbl caption {
  caption-side: top; text-align: left; font-size: 13px; color: var(--ink-faint);
  padding-bottom: 8px; letter-spacing: .01em;
}
.tbl thead th {
  border-top: 2px solid var(--navy); border-bottom: 1px solid var(--navy);
  padding: 10px 12px; text-align: left; color: var(--navy); font-weight: 600;
  white-space: nowrap;
}
.tbl td { border-bottom: 1px solid var(--rule); padding: 10px 12px; vertical-align: top; }
/* 표의 아래 굵은 괘선 — td 에만 걸면 행머리(th) 밑에서 선이 끊긴다.
   2026-08-15 캡처에서 실제로 어긋나 보였다. 둘 다 지정한다. */
.tbl tbody tr:last-child td,
.tbl tbody tr:last-child th[scope="row"] { border-bottom: 2px solid var(--navy); }
.tbl th[scope="row"] { font-weight: 600; color: var(--navy); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.tbl--fit { display: block; overflow-x: auto; }

/* 날짜·시행일 줄 — 한글이 섞이므로 monospace 를 쓰지 않는다 */
.dateline { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .01em; }

/* ── 알림 상자 ──────────────────────────────────────────────── */
.note {
  border-left: 3px solid var(--cyan); background: rgba(44,125,160,.055);
  padding: 16px 20px; margin: 22px 0; font-size: 14.2px;
}
.note--warn { border-left-color: var(--crimson); background: rgba(166,58,58,.05); }
.note--warn strong { color: var(--crimson); }
.note p:last-child { margin-bottom: 0; }
.note p:first-child { margin-top: 0; }

/* 아직 정해지지 않은 항목.
   ⚠️ 붉은 점선 상자로 두었더니 '준비 중'이 아니라 '고장남'으로 읽혔다
   (2026-08-15 캡처 검수). 비영리 단체 사이트에서 미완성으로 보이는 것은
   신뢰를 직접 깎는다. 조용한 회색으로 낮추고, 문구도 짧게 줄였다.
   빠진 것을 숨기지는 않되, 소란스럽게 굴지도 않는다. */
.tbd {
  color: var(--ink-faint);
  border-bottom: 1px dotted var(--rule-firm);
  white-space: nowrap;
}

/* ── 임원·회원 명단 ─────────────────────────────────────────── */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.person { background: #fff; padding: 20px 18px; }
.person__role { font-size: 11.5px; letter-spacing: .06em; color: var(--cyan); margin: 0 0 8px; font-weight: 600; }
.person__name { font-family: var(--serif); font-size: 19px; color: var(--navy); margin: 0 0 5px; font-weight: 400; }
.person__aff { font-size: 13px; color: var(--ink-faint); margin: 0; }
@media (max-width: 820px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .people { grid-template-columns: 1fr; } }

/* ── 연혁 — 세로 괘선에 관절 점 ──────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 1px solid var(--rule-firm); }
.timeline li { position: relative; padding: 0 0 26px 22px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -30px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--cyan);
}
.timeline li:first-child::before { background: var(--cyan); }
.timeline__d { font-family: var(--mono); font-size: 12px; color: var(--cyan); letter-spacing: .05em; display: block; margin-bottom: 3px; }
.timeline__t { font-size: 15px; color: var(--ink); }
.timeline__n { font-size: 13.5px; color: var(--ink-faint); display: block; margin-top: 2px; }

/* ── 후원사 자리 (배너 광고 아님) ─────────────────────────────
   ⚠️ 비영리 단체의 배너 광고 수익은 수익사업이 되어 사업자등록·부가세·
   법인세가 따라오고 학회 중립성에도 영향을 준다. 학회의 표준은
   '후원사 노출'이다 — 대가가 광고 게재가 아니라 후원이다.
   (2026-08-15 창 A 지적, CLAUDE.md 에 정리됨) */
.sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.sponsor {
  background: #fff; height: 92px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 13px; text-align: center; padding: 12px;
}

/* ── 꼬리말 ─────────────────────────────────────────────────── */
.foot { background: var(--navy-deep); color: rgba(255,255,255,.62); font-size: 13.2px; margin-top: 0; }
.foot a { color: rgba(255,255,255,.78); }
.foot__top { padding: 46px 0 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr; gap: 28px; } }
.foot__ko { font-family: var(--serif); font-size: 19px; color: #fff; margin: 0 0 5px; font-weight: 400; }
.foot__en { font-family: var(--serif); font-style: italic; font-size: 12px; color: rgba(255,255,255,.45); margin: 0 0 18px; }
.foot h4 { font-size: 12.5px; letter-spacing: .07em; color: rgba(255,255,255,.5); margin: 0 0 12px; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 7px; }
.foot dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.foot dt { color: rgba(255,255,255,.42); white-space: nowrap; }
.foot dd { margin: 0; }
.foot__pending { margin: 14px 0 0; font-size: 12.5px; color: rgba(255,255,255,.42); line-height: 1.7; }
.foot__bot { padding: 18px 0 30px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.42); }
.foot__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot__legal a { color: rgba(255,255,255,.62); }
.foot__legal a.is-key { color: #fff; font-weight: 600; }

/* ── 하위 페이지 머리 ────────────────────────────────────────── */
.phead { background: var(--paper-deep); border-bottom: 1px solid var(--rule); padding: 40px 0 34px; }
.crumb { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 12px; letter-spacing: .02em; }
.crumb a { color: var(--ink-faint); }
.phead h1 { font-family: var(--serif); font-size: clamp(25px, 4vw, 34px); color: var(--navy); margin: 0; font-weight: 400; letter-spacing: -.02em; }
.phead__en { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-faint); margin: 7px 0 0; }

.page { padding: 46px 0 70px; }

/* ── 좌측 목차 (하위 페이지) ─────────────────────────────────── */
.withside { display: grid; grid-template-columns: 210px 1fr; gap: 52px; }
@media (max-width: 880px) { .withside { grid-template-columns: 1fr; gap: 30px; } }
.side { font-size: 14px; }
.side h2 { font-family: var(--serif); font-size: 16px; color: var(--navy); margin: 0 0 12px; padding-bottom: 9px; border-bottom: 2px solid var(--navy); font-weight: 400; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li { border-bottom: 1px solid var(--rule); }
.side a { display: block; padding: 9px 4px; color: var(--ink-soft); }
.side a:hover { color: var(--cyan); text-decoration: none; }
.side a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.side a[aria-current="page"]::before { content: "▸ "; color: var(--cyan); }

/* ── 404 ─────────────────────────────────────────────────────
   ⚠️ Cloudflare Pages 는 404.html 이 없으면 없는 주소를 전부 홈으로
   200 응답한다. 오타 주소·죽은 링크가 다 홈페이지로 색인된다.
   파일명이 정확히 404.html 이어야 동작한다.
   (2026-08-15 창 A 실측 — metafithub 에서 밟은 함정) */
.oops { text-align: center; padding: 96px 0 110px; }
.oops__code { font-family: var(--mono); font-size: 60px; color: var(--rule-firm); margin: 0 0 10px; letter-spacing: .06em; }
.oops h1 { font-family: var(--serif); font-size: 27px; color: var(--navy); margin: 0 0 14px; font-weight: 400; }
.oops p { color: var(--ink-soft); margin: 0 auto 26px; max-width: 21em; }

/* ── 인쇄 — 정관·규정을 종이로 뽑는 일이 실제로 잦다 ──────────── */
@media print {
  .util, .nav, .status, .foot, .side, .hero__plate { display: none; }
  body { background: #fff; font-size: 10.5pt; }
  .page, .sec { padding: 0; }
  a { color: var(--ink); text-decoration: none; }
  .prose { max-width: none; }
}

/* ── 모바일 메뉴 ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav__toggle {
    display: block; width: 100%; background: none; border: none;
    color: #fff; font: inherit; font-size: 15px; font-weight: 600;
    padding: 13px var(--gut); text-align: left; cursor: pointer;
  }
  .nav__toggle::after { content: " ▾"; }
  .nav__list { display: none; flex-direction: column; }
  .nav[data-open="true"] .nav__list { display: flex; }
  .nav__top > a { padding: 11px var(--gut); border-top: 1px solid rgba(255,255,255,.12); }
  .nav__sub { display: block; position: static; background: rgba(0,0,0,.18); border: none; box-shadow: none; padding: 0; }
  .nav__sub a { color: rgba(255,255,255,.72); padding: 8px var(--gut) 8px calc(var(--gut) + 16px); font-size: 13.5px; }
  .nav__sub a:hover { background: rgba(0,0,0,.25); color: #fff; }
  .util .wrap { justify-content: center; }
}

/* 움직임 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}