/* [NOTICE-2/2026-09-03 · 대표님 지시] 홈 공지 팝업 — 「팝업 뜨게 하면 됨」 · 「팝업만 둔다」.
 *
 * 띠 규칙(site_notice.css)과 파일을 갈랐다. 둘은 같은 공지를 다른 방식으로 알리고,
 * 지금은 팝업만 켜져 있다(notice_data.js 의 `mode`). 한 파일에 두면 §1 200줄을 넘고,
 * 무엇이 켜져 있는지도 흐려진다.
 *
 * ⚠️ **색·폭을 여기 다시 적는다. 의도된 예외다** — 홈(site_home.css)은 `--forest`,
 *    다른 마케팅 화면(site.css)은 `--s-forest` 로 **이름이 다르다**(기계 변환본). 어느
 *    한쪽 이름을 쓰면 다른 쪽에서 값이 비어 색이 사라진다. 실제로 띠에서 그렇게 났다.
 *    `_tests/test_notice_popup.py` 가 이 값들이 두 토큰 집합과 같은지 계속 본다.
 *
 * 격리: 모든 규칙은 `.site` 안에서만.
 *
 * Per CLAUDE.md §1, <= 200 lines.
 */

.site .s-npop {
  --np-green: #0E4A38;        /* = --forest = --s-forest */
  --np-green-dark: #0A3729;   /* = --forest-dark = --s-forest-dark */
  --np-ink: #12161A;          /* = --ink = --s-ink */
  --np-ink70: #4A535C;        /* = --ink-70 = --s-ink-70 */
  --np-line: #E6E4DE;         /* = --line = --s-line */

  position: fixed; inset: 0; z-index: 400;   /* 머리(z 60)·모바일 시트(z 200) 위 */
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(18, 22, 26, .55);
}

.site .s-npop-card {
  position: relative;
  width: 100%; max-width: 460px;
  background: #fff; border: 1px solid var(--np-line); border-radius: 4px;
  padding: 32px 34px 28px;
  box-shadow: 0 18px 48px rgba(18, 22, 26, .22);
  text-align: left;
}

/* 라벨 = 「무엇인가」. 작고 넓은 자간으로 제목과 성격을 가른다. */
.site .s-npop-lab {
  margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--np-green);
}

/* 팝업은 자리가 넉넉해서 표제를 그대로 쓴다. 세리프는 사이트 제목과 같은 결이다. */
.site .s-npop-t {
  font-family: var(--serif, var(--s-serif, Georgia, serif));
  font-weight: 400; font-size: 23px; line-height: 1.28; letter-spacing: -.012em;
  color: var(--np-ink); margin: 12px 0 0;
}
.site .s-npop-when {
  margin: 12px 0 0; font-size: 13px; color: var(--np-ink70);
  letter-spacing: .04em;
}

/* 이 화면의 강조는 하나다(§7) — 읽기. 앰버를 쓰지 않는다(앰버는 홈 예약 단추 몫). */
.site .s-npop-go {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 24px 0 0; padding: 12px 22px;
  background: var(--np-green); color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--np-green); border-radius: 4px;
}
.site .s-npop-go:hover { background: var(--np-green-dark); }
.site .s-npop-go:focus-visible { outline: 2px solid var(--np-green); outline-offset: 3px; }

/* 닫기는 조용한 글자. 단추로 만들면 강조가 둘이 된다. */
.site .s-npop-later {
  display: block; margin: 14px 0 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--np-ink70);
}
.site .s-npop-later:hover { color: var(--np-ink); }

.site .s-npop-x {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px; padding: 0;      /* 손가락 크기 */
  background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: rgba(18, 22, 26, .45);
}
.site .s-npop-x:hover { color: var(--np-ink); }

@media (max-width: 768px) {
  .site .s-npop { padding: 16px; align-items: flex-end; }   /* 엄지에 가깝게 */
  .site .s-npop-card { padding: 26px 20px 22px; }
  .site .s-npop-t { font-size: 20px; }
  .site .s-npop-go { width: 100%; min-height: 46px; }
}

/* 움직임을 줄이라고 설정한 사람에게는 나타나는 효과를 주지 않는다. */
@media (prefers-reduced-motion: no-preference) {
  .site .s-npop { animation: s-npop-in .16s ease-out; }
  .site .s-npop-card { animation: s-npop-up .18s ease-out; }
}
@keyframes s-npop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes s-npop-up { from { transform: translateY(8px); } to { transform: none; } }