/* page-notice.css — NOTICE 게시판(방문자 화면) 전용. 2026-09-18 신설.
   불러오는 순서: tokens → _shell → _components → _legacy → page-notice
   ✏️ 새 색·새 글꼴 없음. 전부 tokens-domestic.css 변수만 쓴다. */

/* 히어로 — CONTACT(page-contact.css .dk-contact-hero)와 같은 값. 제목 한 줄. */
.dk-notice-hero { position: relative; padding: 60px 0; background: var(--dk-surface-soft);
  border-bottom: 1px solid var(--dk-hairline-soft); }
.dk-notice-hero h1 {
  margin: 0; font-family: 'Paperlogy', sans-serif; font-weight: 800; font-size: 36px;
  color: var(--dk-ink); letter-spacing: var(--dk-track-snug);
}
@media (max-width: 768px) {
.dk-notice-hero { padding: 40px 0; }
.dk-notice-hero h1 { font-size: 26px; }
}

.dk-notice { max-width: 960px; margin: 0 auto; }
.dk .dk-notice-state { text-align: center; color: var(--dk-fg-muted); font: var(--dk-body-md); padding: var(--dk-gap-lg) 0; margin: 0; }

/* ── 목록 ── */
.dk-notice-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--dk-ink); }
.dk-notice-item { border-bottom: 1px solid var(--dk-hairline-soft); }
.dk .dk-notice-link {
  display: flex; align-items: center; gap: var(--dk-space-sm);
  min-height: var(--dk-touch-min); padding: 18px 8px;
  color: var(--dk-ink); text-decoration: none;
}
.dk .dk-notice-link:hover .dk-notice-title { color: var(--dk-accent-red); }
.dk-notice-item.is-pinned { background: var(--dk-surface-soft); }
.dk-notice-badge {
  flex-shrink: 0; display: inline-block; padding: 3px 10px; border-radius: var(--dk-radius-full);
  background: var(--dk-accent-red); color: var(--dk-on-primary); font: var(--dk-button); font-size: 12px;
}
.dk-notice-title { flex: 1; min-width: 0; font: var(--dk-body-md); font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.dk-notice-date { flex-shrink: 0; font: var(--dk-body-sm); color: var(--dk-fg-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
.dk .dk-notice-link { flex-wrap: wrap; row-gap: 6px; padding: 16px 4px; }
.dk-notice-title { flex-basis: 100%; order: 2; }
.dk-notice-badge { order: 1; }
.dk-notice-date { order: 3; }
}

/* ── 쪽 번호 ── */
.dk-notice-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: var(--dk-gap-md); }
.dk .dk-notice-pager a, .dk-notice-pager span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: var(--dk-radius-sm); font: var(--dk-body-sm); color: var(--dk-fg-3); text-decoration: none;
}
.dk .dk-notice-pager a:hover { background: var(--dk-surface-card); color: var(--dk-ink); }
.dk-notice-pager span[aria-current] { background: var(--dk-ink); color: var(--dk-on-primary); font-weight: 700; }

/* ── 글 보기 ── */
.dk-notice-view { border-top: 2px solid var(--dk-ink); }
.dk-notice-view__head { padding: var(--dk-gap-sm) 8px; border-bottom: 1px solid var(--dk-hairline-soft); }
.dk-notice-view__head .dk-notice-badge { margin-bottom: 10px; }
.dk .dk-notice-view__title { margin: 0 0 8px; font: var(--dk-title-lg); color: var(--dk-ink); word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 640px) { .dk .dk-notice-view__title { font: var(--dk-title-md); } }

.dk-notice-body { padding: var(--dk-gap-md) 8px; font: var(--dk-body-md); color: var(--dk-fg-2); word-break: keep-all; overflow-wrap: anywhere; }
.dk .dk-notice-body p { margin: 0 0 1em; }
.dk .dk-notice-body p:last-child { margin-bottom: 0; }
.dk-notice-body h3 { font: var(--dk-title-md); color: var(--dk-ink); margin: 1.6em 0 0.6em; }
.dk-notice-body h4 { font: var(--dk-title-sm); color: var(--dk-ink); margin: 1.4em 0 0.5em; }
.dk-notice-body ul, .dk-notice-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.dk-notice-body blockquote { margin: 0 0 1em; padding: 12px 16px; background: var(--dk-surface-card); border-radius: var(--dk-radius-sm); }
.dk-notice-body hr { border: 0; border-top: 1px solid var(--dk-hairline-soft); margin: 1.6em 0; }
.dk .dk-notice-body a { color: var(--dk-accent-red); text-decoration: underline; }
.dk-notice-body img { display: block; max-width: 100%; height: auto; margin: 1em auto; border-radius: var(--dk-radius-sm); }

.dk-notice-view__foot { display: flex; justify-content: center; padding-top: var(--dk-gap-md); border-top: 1px solid var(--dk-hairline-soft); }
.dk .dk-notice-back {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--dk-touch-min); padding: 0 28px;
  border: 1.4px solid var(--dk-hairline); border-radius: var(--dk-radius-sm);
  font: var(--dk-button); color: var(--dk-ink); text-decoration: none;
}
.dk .dk-notice-back:hover { border-color: var(--dk-ink); }