/* [NOTICE/2026-09-03 · 대표님 지시] 공지·성명서 화면 + 홈 상단 띠.
 *
 * 이 파일 하나가 두 곳에 실린다: /notice(목록·낱장)와 홈(띠). 띠의 규칙을 따로 두면
 * 색·각·글자 크기가 두 곳에서 갈린다.
 *
 * ⚠️ 격리: 모든 규칙은 `.site` 안에서만. site_notes.css 의 부품(.s-nback · .s-nspacer ·
 *    .s-nempty)을 그대로 쓰므로 /notice 는 그 파일도 같이 싣는다.
 *
 * 색 규칙(site.css): **앰버는 단추에만.** 띠는 알림이지 행동이 아니라서 앰버를 쓰지
 * 않는다 — 칠하면 홈의 예약 단추와 강조가 둘이 된다(§7). 세이지 옅은 띠로 간다.
 *
 * Per CLAUDE.md §1, <= 200 lines.
 */

/* ── 홈 상단 띠 ─────────────────────────────────────────────
   사이트 머리 아래, 보통 흐름. 고정이 아니다(머리가 sticky 라 z-index 로 다투게 된다).

   ⚠️ **색·폭을 여기 다시 적는다. 의도된 예외다.** 이 띠는 두 곳에 뜨는데 두 곳의 토큰
   이름이 다르다: 홈(site_home.css)은 `--forest` · `--wrap`, 다른 마케팅 화면(site.css)은
   `--s-forest` · `--s-wrap` 이다. **값은 같고 이름만 다르다**(기계 변환본이라 그렇다).
   어느 한쪽 이름을 쓰면 다른 쪽에서 값이 비어 배경이 투명해진다 — 흰 바탕에 흰 글자가
   되어 띠가 있는데 아무것도 안 보인다(실제로 처음에 그렇게 났다).
   `_tests/test_notice_banner.py` 가 이 값들이 두 토큰 집합과 같은지 계속 본다. */
.site .s-nbar {
  --nb-green: #0E4A38;        /* = --forest = --s-forest */
  --nb-band: #E9F0EA;         /* = --sage = --s-sage */
  --nb-band-line: #D3E0D6;    /* = --sage-line = --s-sage-line */
  --nb-ink: #12161A;          /* = --ink = --s-ink */
  --nb-wrap: 1140px;          /* = --wrap = --s-wrap */

  /* 옅은 세이지 띠. **짙은 그린으로 칠하면 안 된다** - 홈 히어로가 바로 아래에서 같은
     그린이라 띠가 히어로의 일부처럼 보인다(실제로 처음에 그렇게 났다). 옅은 띠는 위의
     흰 머리와 아래의 짙은 히어로 양쪽에서 다 떨어져 보인다. */
  position: relative;
  background: var(--nb-band);
  color: var(--nb-ink);
  border-top: 1px solid var(--nb-band-line);
  border-bottom: 1px solid var(--nb-band-line);
}
.site .s-nbar-in {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: var(--nb-wrap); margin: 0 auto;
  padding: 11px 52px 11px 22px;      /* 오른쪽은 닫기 단추 자리 */
  color: var(--nb-ink); text-decoration: none; line-height: 1.4;
}
.site .s-nbar-in:hover .s-nbar-cta { border-bottom-color: var(--nb-green); }
/* 라벨 = 「무엇인가」. 작고 넓은 자간으로 본문과 성격을 가른다. */
.site .s-nbar-lab {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nb-green);
}
.site .s-nbar-t { flex: 1 1 auto; min-width: 0; font-size: 14.5px; }
/* 밑줄 하나로 「눌린다」를 말한다. 단추로 만들면 홈의 예약 단추와 강조가 둘이 된다(§7). */
.site .s-nbar-cta {
  flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--nb-green);
  border-bottom: 1px solid rgba(14, 74, 56, .45);
}
.site .s-nbar-x {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 21px; line-height: 1; color: rgba(18, 22, 26, .5);
}
.site .s-nbar-x:hover { color: var(--nb-ink); }

@media (max-width: 768px) {
  .site .s-nbar-in { padding: 10px 46px 10px 18px; gap: 4px 10px; }
  .site .s-nbar-t { font-size: 13.5px; flex-basis: 100%; }
  .site .s-nbar-x { width: 40px; height: 40px; right: 6px; }   /* 손가락 크기 */
}

/* ── 목록 ───────────────────────────────────────────────────
   /notes 와 달리 얼굴·분야 칩이 없다. 날짜와 표제뿐이다 — 발행 문서 목록이다. */
.site .s-ntlist { display: grid; }
.site .s-ntrow {
  display: block; padding: 22px 0; border-top: 1px solid var(--s-line);
  text-decoration: none; color: inherit;
}
.site .s-ntlist .s-ntrow:last-child { border-bottom: 1px solid var(--s-line); }
.site .s-ntdate {
  display: block; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--s-ink-45);
}
.site .s-ntrow-t {
  font-family: var(--s-serif); font-weight: 400; font-size: 26px;
  line-height: 1.25; letter-spacing: -.01em; margin: 6px 0 0; max-width: 42ch;
}
.site .s-ntrow:hover .s-ntrow-t { color: var(--s-forest); }

/* ── 낱장 ─────────────────────────────────────────────────── */
.site .s-notice-t {
  font-family: var(--s-serif); font-weight: 400;
  font-size: clamp(30px, 5.2vw, 44px); line-height: 1.14; letter-spacing: -.012em;
  margin: 16px 0 0; max-width: 34ch;
}
.site .s-ntdateline {
  font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--s-ink-45); margin-top: 16px;
}
/* 「원본이 정본이다」 한 줄. 본문과 섞이지 않게 왼쪽에 선을 준다. */
.site .s-ntverbatim {
  margin: 22px 0 0; padding: 10px 0 10px 14px;
  border-left: 2px solid var(--s-sage-line);
  font-size: 13.5px; color: var(--s-ink-45); max-width: 62ch;
}
.site .s-notice-p {
  font-size: 17.5px; line-height: 1.78; color: var(--s-ink-70);
  margin: 26px 0 0; max-width: 66ch;
}
/* 「To the Anchors,」 — 성명서 안의 작은 갈림이다. 크게 키우지 않는다. */
.site .s-notice-h {
  font-family: inherit; font-size: 17.5px; font-weight: 600;
  color: var(--s-ink); margin: 40px 0 0;
}

/* ── 문의 창구 · 원본 ───────────────────────────────────────── */
.site .s-ntinq, .site .s-ntorig {
  margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--s-line);
}
.site .s-ntinq-h {
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--s-ink-45); margin: 0 0 12px;
}
.site .s-ntinq p { font-size: 15px; color: var(--s-ink-70); margin: 0; }
.site .s-ntinq-a { color: var(--s-ink-45) !important; font-size: 14px !important; }
.site .s-ntacts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.site .s-ntacts a { font-size: 15px; font-weight: 600; }

/* 원본 미리보기. 폭에 맞춰 다 줄이면 본문 글자가 휴대폰에서 6.6px 이 된다(실측) —
   읽으라고 두는 것이 아니라 「원본이 이렇게 생겼다」를 보이는 것이다. 그래서 위쪽만
   보여주고 잘라낸다. 읽는 길은 아래의 원본 크기로 열기와 내려받기다. */
.site .s-ntorig-fig {
  display: block; margin-top: 4px; max-height: 320px; overflow: hidden;
  border: 1px solid var(--s-line); background: var(--s-mist);
}
.site .s-ntorig-fig img { display: block; width: 100%; height: auto; }
.site .s-ntorig .s-ntacts { margin-top: 14px; }

@media (max-width: 768px) {
  .site .s-ntrow-t { font-size: 22px; }
  .site .s-notice-p { font-size: 16.5px; }
  .site .s-ntorig-fig { max-height: 220px; }
}