/* ==========================================================================
   공지사항 (notice.php) — 디자인 원본 web/design/notice.html <style>
   시안의 상세 예시 전용 그림(.fig-*)·표(.table-wrap)는 뺐다 — 관리자 본문 정화기(crew_html_sanitize)가 표·figure 를 벗겨낸다
   ========================================================================== */

/* ── 페이지 머리 (marathon 과 같은 규격) ─────────────────────────────── */
.page-head { padding: calc(var(--header-h) + 40px) 0 24px; }
.page-head.is-detail { padding-bottom: 8px; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
.crumb a:hover { color: var(--text); }
.page-head h1 { font-size: 40px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
.page-head p { color: var(--text-2); margin-top: 8px; }
.notice-body { padding-bottom: 96px; }

/* ── 목록 도구 줄: 유형 알약 탭 + 검색 ─────────────────────────────── */
.notice-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* 서버 필터라 탭이 링크다 — 공용 .seg button 과 같은 모양을 a 에도 준다 */
.seg a {
  white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center;
  height: 38px; padding: 0 18px; border-radius: 19px;
  font-size: 15px; font-weight: 600; color: var(--text-2);
  transition: background-color .15s, color .15s;
}
.seg a:hover { color: var(--text); }
.seg a[aria-current="page"] { background: var(--area); color: var(--on-area); }
.seg-sm a { height: 32px; padding: 0 14px; font-size: 14px; }

.search { position: relative; display: flex; gap: 8px; width: 340px; max-width: 100%; }
.search i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-size: 18px; color: var(--text-2); pointer-events: none; }
.search .input { flex: 1; min-width: 0; height: 44px; padding-left: 42px; }
.search .btn { height: 44px; flex-shrink: 0; }
.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; font-size: 15px; color: var(--text-2); }
.result-bar > span { min-width: 0; overflow-wrap: anywhere; }
.result-bar b { color: var(--primary); }
.result-bar .more { flex-shrink: 0; }

/* ── 공지 목록 — 공용 .post 행을 카드 안에 쌓는다 ───────────────────── */
.notice-list { padding: 8px; }
.ngroup + .ngroup { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.notice-list .post { padding: 14px 12px; }
.notice-list .post strong { font-size: 16px; }
/* 고정 공지 — 카드(surface)보다 한 단계 어두운 바탕으로 묶는다 */
.post.is-pinned { background: var(--bg-2); }
.post.is-pinned:hover { background: var(--surface-2); }
.post.is-pinned + .post.is-pinned { margin-top: 4px; }
/* NEW — 어두운 바탕 위 라임 글자 (surface 12.36:1) */
.new { flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--primary); }
.post small .dot { margin: 0 6px; color: var(--text-3); }

.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px;
  display: grid; place-items: center; font-weight: 600; color: var(--text-2); background: var(--surface);
}
.pager a:hover { color: var(--text); }
.pager .is-current { background: var(--primary); color: var(--on-primary); }
.pager .is-disabled { opacity: .4; }

/* ── 상세 ─────────────────────────────────────────────────────────────── */
.detail-wrap { max-width: 840px; margin-inline: auto; padding-bottom: 96px; }
.article { padding: 40px; border-radius: var(--radius-lg); }
.article-head { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.article-head .tags { margin-bottom: 12px; }
.article-head h1 { font-size: 30px; line-height: 1.35; font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 14px; color: var(--text-2); }
.article-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* 본문 타이포 — 관리자 HTML(content)이 정화된 뒤 들어오는 자리
   허용 태그: p br b strong i em u s strike ul ol li h2 h3 blockquote a img span div */
.prose { font-size: 16px; line-height: 1.8; color: var(--text-2); overflow-wrap: anywhere; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 40px; font-size: 22px; line-height: 1.4; font-weight: 800; color: var(--text); }
.prose h3 { margin-top: 36px; font-size: 20px; line-height: 1.4; font-weight: 800; color: var(--text); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + * { margin-top: 10px; }
.prose strong, .prose b { color: var(--text); }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--primary); }
.prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--primary); }
/* width 속성이 남아 있어도 카드 밖으로 넘치지 않게 */
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.prose blockquote { padding: 14px 18px; border-left: 3px solid var(--primary); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text); }

/* 첨부 */
.attach { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
.attach-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.attach-title i { color: var(--primary); font-size: 18px; }
.attach ul { display: grid; gap: 6px; }
.attach a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-2); font-size: 14px; color: var(--text-2); }
.attach a:hover { background: var(--surface-2); color: var(--text); }
.attach a > span:not(.sr-only) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.attach a small { flex-shrink: 0; color: var(--text-3); }

.prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pn { display: grid; gap: 4px; padding: 18px 20px; min-width: 0; }
.pn small { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); }
.pn strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn.is-next { grid-column: 2; text-align: right; }
.pn.is-next small { justify-content: flex-end; }
.pn.is-blank { padding: 0; }
.detail-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.notice-missing { padding-top: 16px; }

@media (max-width: 768px) {
  .page-head { padding-top: calc(var(--header-h) + 28px); }
  .page-head h1 { font-size: 30px; }
  .search { width: 100%; }
  .notice-tools .seg { width: 100%; }
  .notice-body, .detail-wrap { padding-bottom: 64px; }
  .article { padding: 24px 20px; }
  .article-head h1 { font-size: 23px; }
  .prose { font-size: 15px; }
}
@media (max-width: 480px) {
  /* 좁은 화면에서는 고정 공지의 유형 배지를 빼고 '고정'만 남겨 제목 자리를 확보한다 */
  .post.is-pinned .type-badge { display: none; }
  .prevnext { grid-template-columns: minmax(0, 1fr); }
  .pn.is-next { grid-column: auto; text-align: left; }
  .pn.is-next small { justify-content: flex-start; }
  .pn.is-blank { display: none; }
}