/* 공지사항 (/notice, /notice/<id>, lib/notice-page.mjs; also the /owner console's 공지사항, public/owner-notice.js):
   the list (고정 tag, title, day, first words) and one post (title, day, the body: headings, lists, pictures). The body
   HTML is made on the server from the post's text (lib/notice-md.mjs). Site tokens only, so dark mode follows. */
.notice-page { max-width: 760px; padding-bottom: 56px; }
.notice-page h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.25; margin: 14px 0 8px; }
.notice-page .lead { margin: 0 0 22px; color: var(--ink-2); }

.notice-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.notice-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; padding: 16px 4px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease); }
.notice-list a:hover { background: var(--surface); }
.notice-list a:hover .notice-title { color: var(--lantern); }
.notice-list a:focus-visible { outline: 3px solid var(--lantern); outline-offset: -3px; border-radius: 6px; }
.notice-list .notice-title { grid-column: 2; font-size: 1.05rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.notice-list .notice-pin { grid-column: 1; }
.notice-list a:not(:has(.notice-pin)) .notice-title { grid-column: 1 / 3; }
.notice-when { grid-column: 3; font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.notice-ex { grid-column: 1 / -1; font-size: .9rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice-empty { padding: 28px 4px; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.notice-pin { display: inline-block; flex: none; white-space: nowrap; padding: 1px 9px; border-radius: 999px; background: var(--lantern); color: var(--lantern-ink); font-size: .74rem; font-weight: 800; line-height: 1.6; vertical-align: .12em; }

.notice-crumb { margin: 18px 0 0; font-size: .88rem; }
.notice-crumb a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.notice-crumb a::before { content: "‹ "; }
.notice-crumb a:hover { color: var(--lantern); }
.notice-article { padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.notice-date { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.notice-back { margin: 24px 0 0; }

.notice-body { font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.notice-body > :first-child { margin-top: 0; }
.notice-body p { margin: 0 0 14px; }
.notice-body h2 { margin: 34px 0 12px; padding-left: 12px; border-left: 4px solid var(--lantern); font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.02em; }
.notice-body h3 { margin: 28px 0 8px; font-size: 1.06rem; line-height: 1.4; }
.notice-body ul, .notice-body ol { margin: 0 0 16px; padding-left: 1.4em; }
.notice-body li { margin: 4px 0; padding-left: 2px; }
.notice-body li::marker { color: var(--lantern); font-weight: 800; }
.notice-body a { color: var(--lantern); font-weight: 600; text-underline-offset: 3px; }
.notice-body strong { font-weight: 800; }
.notice-fig { margin: 12px 0 22px; }
.notice-fig img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow); }
.notice-body > .notice-fig:first-child { margin: 0 0 24px; }
.notice-body > .notice-fig:first-child img { border-radius: 18px; }

@media (max-width: 520px) {
  .notice-list a { grid-template-columns: auto minmax(0, 1fr); }
  .notice-when { grid-column: 1 / -1; grid-row: 2; }
  .notice-ex { grid-row: 3; }
  .notice-fig { margin-left: calc(var(--gutter) * -0.5); margin-right: calc(var(--gutter) * -0.5); }
}