/* 공지사항 게시판 모양 — 사이트 색(아이보리·진한 갈색·골드)과 글꼴을 그대로 쓴다. 모바일 우선: 한 줄 목록에서 시작해 넓어지면 번호·날짜 칸을 늘린다. */
.hm-board { max-width: 860px; margin: 0 auto; padding: 24px var(--gutter, 20px) 0; font: inherit; color: inherit; }
.hm-board [hidden] { display: none !important; }
.hm-board__heading { font-size: clamp(22px, 5vw, 28px); font-weight: 400; margin: 0 0 8px; }
.hm-board__lead { margin: 0 0 20px; }
.hm-board__bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.hm-board__btn { font: inherit; font-size: 16px; padding: 10px 16px; min-height: 44px; min-width: 44px; border: 1px solid var(--line-blush, #cdbb93); border-radius: 6px; background: #fff; color: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.hm-board__btn:hover { background: var(--ivory-soft, #f3ecd8); }
.hm-board__btn--main { background: var(--ink, #4b3d2c); color: #fff; border-color: var(--ink, #4b3d2c); }
.hm-board__btn--main:hover { background: var(--ink, #4b3d2c); opacity: .9; }
.hm-board__btn--danger { color: #b42318; border-color: #b42318; }
.hm-board__btn[disabled] { opacity: .5; cursor: default; }

.hm-board__rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink, #4b3d2c); }
.hm-board__row { border-bottom: 1px solid var(--ivory-deep, #ebe2ca); }
.hm-board__row.is-pinned { background: var(--ivory-soft, #f3ecd8); }
.hm-board__link { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'title title' 'no date'; gap: 4px 8px; align-items: center; padding: 12px 8px; min-height: 44px; color: inherit; text-decoration: none; }
.hm-board__link:hover .hm-board__title { text-decoration: underline; }
.hm-board__no, .hm-board__date { color: #6b5d49; font-size: 14px; }
.hm-board__no { grid-area: no; }
.hm-board__row.is-pinned .hm-board__no { font-weight: 600; color: var(--ink, #4b3d2c); }
.hm-board__date { grid-area: date; justify-self: end; }
.hm-board__title { grid-area: title; overflow-wrap: anywhere; }
.hm-board__pin { display: inline-block; font-size: 14px; border: 1px solid var(--gold, #b8975a); border-radius: 12px; padding: 0 8px; margin-right: 8px; color: var(--ink, #4b3d2c); background: #fff; }
.hm-board__empty { padding: 32px 8px; text-align: center; color: #6b5d49; border-bottom: 1px solid var(--ivory-deep, #ebe2ca); margin: 0; }
.hm-board__empty a { text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.hm-board__pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.hm-board__page.is-current { font-weight: 700; border-color: var(--ink, #4b3d2c); }

.hm-board__view { border-top: 2px solid var(--ink, #4b3d2c); padding-top: 12px; }
.hm-board__vtitle { font-size: 1.25em; font-weight: 500; margin: 4px 0; overflow-wrap: anywhere; }
.hm-board__meta, .hm-board__hint { color: #6b5d49; font-size: 14px; margin: 4px 0 12px; }
.hm-board__content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; min-height: 80px; padding: 8px 0 20px; border-bottom: 1px solid var(--ivory-deep, #ebe2ca); }
.hm-board__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.hm-board__admin { display: inline-flex; gap: 8px; flex-wrap: wrap; }

.hm-board__write { display: grid; gap: 14px; max-width: 640px; border-top: 2px solid var(--ink, #4b3d2c); padding-top: 12px; }
.hm-board__write label { display: grid; gap: 6px; font-size: 14px; }
.hm-board__write input[type=text], .hm-board__write textarea { font: inherit; font-size: 16px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-blush, #cdbb93); border-radius: 6px; background: #fff; color: inherit; width: 100%; box-sizing: border-box; }
.hm-board__write textarea { min-height: 220px; resize: vertical; }
.hm-board__write .hm-board__check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 16px; }
.hm-board input[type=checkbox] { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--ink, #4b3d2c); }
.hm-board__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-board__ok { color: #1a6b3a; margin: 12px 0; }
.hm-board__msg { color: #b42318; margin: 12px 0; overflow-wrap: anywhere; }
.hm-board a:focus-visible, .hm-board button:focus-visible, .hm-board input:focus-visible, .hm-board textarea:focus-visible { outline: 3px solid var(--gold, #b8975a); outline-offset: 2px; }

@media (min-width: 641px) {
  .hm-board__link { grid-template-columns: 72px 1fr 110px; grid-template-areas: 'no title date'; gap: 8px; padding: 14px 8px; }
  .hm-board__no { text-align: center; }
}