/* 학습 페이지와 같은 c2m_ds 토큰·폰트·둥근 패널을 사용한다. */
.board-page {
  /* 게시판에서 두 번 이상 쓰는 고유 색 — c2m_ds 공용 토큰에 맞는 값이 없는 것만 */
  --board-accent: #563a82;
  --board-accent-bg: #eee8ff;
  --board-warm-bg: #fff3cd;
  --board-danger: #a53c3c;
}
.board-page { margin: 0; color: var(--c-text); background: linear-gradient(160deg, #e4dcf5 0%, #edf0fb 52%, #e0f0ed 100%); background-attachment: fixed; font-family: 'Pretendard-Regular', sans-serif; word-break: keep-all; }
.board-page main { min-height: 62vh; padding-bottom: 96px; }
.board-shell { width: min(var(--page-w), calc(100% - 40px)); margin-inline: auto; }
.board-hero { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 240px; padding: 24px 48px 20px; }
.board-hero__copy { flex: 1; min-width: 0; }
.board-hero h1 { margin: 0 0 12px; font-family: 'HGAlmond60g', sans-serif; font-size: 48px; font-weight: 400; line-height: 1.15; }
.board-hero p { margin: 0; color: var(--c-gray); font-size: 18px; line-height: 26px; }
/* PNG 아래 투명 여백(약 22px)과 헤더 패딩(20px)을 보정해 발끝을 탭 위 4px에 맞춘다. */
.board-hero__mascot { display: block; flex: none; align-self: flex-end; width: 300px; height: 200px; object-fit: contain; transform: translateY(38px); }
.board-content { overflow: hidden; border-radius: 24px 24px 40px 40px; box-shadow: var(--sh-card); }
.board-kind-tabs { display: flex; gap: 8px; background: transparent; }
.board-kind-tabs a { display: flex; flex: 1; justify-content: center; align-items: center; min-height: 72px; padding: 16px; border-radius: 24px 24px 0 0; background: rgba(255,255,255,.65); color: var(--c-gray); font-family: 'Pretendard-Bold', sans-serif; font-size: 24px; text-decoration: none; }
.board-kind-tabs a.is-active { background: var(--c-yellow); color: var(--c-text); }
.board-kind-tabs a:hover { color: var(--c-text); }
.board-panel { min-height: 400px; padding: 40px 48px 48px; background: var(--c-white); }
.board-filter { display: flex; gap: 8px; margin-bottom: 28px; }
.board-filter a { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; min-height: 44px; padding: 8px 20px; border: 1px solid var(--c-line); border-radius: var(--r-pill); color: var(--c-gray); background: var(--c-white); text-decoration: none; }
.board-filter a.is-active { color: var(--c-white); background: var(--c-text); border-color: var(--c-text); }
.board-event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.board-event-card { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white); transition: transform .2s, box-shadow .2s; }
.board-event-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }
.board-event-card__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.board-event-card__image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-light); }
.board-event-card__image img { width: 100%; height: 100%; object-fit: cover; }
.board-state-pill { position: absolute; top: 16px; left: 16px; padding: 6px 12px; color: var(--c-text); background: var(--c-yellow); border-radius: var(--r-pill); font-family: 'Pretendard-Bold', sans-serif; font-size: 13px; }
.board-state-pill.is-ended { color: var(--c-gray); background: var(--c-line2); }
.board-state-pill.is-scheduled { color: var(--board-accent); background: var(--board-accent-bg); }
.board-event-card__body { padding: 24px; }
.board-event-card__body h3 { margin: 0 0 12px; overflow: hidden; overflow-wrap: anywhere; font-family: 'Pretendard-Bold', sans-serif; font-size: 20px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.board-event-card__body p { margin: 0; color: var(--c-gray2); font-size: 14px; }
.board-notice-list { border-top: 2px solid var(--c-text); }
.board-notice-row { border-bottom: 1px solid var(--c-line); }
.board-notice-row a { display: grid; grid-template-columns: 80px minmax(0, 1fr) 120px 24px; align-items: center; gap: 12px; min-height: 84px; padding: 18px; color: inherit; text-decoration: none; }
.board-notice-row a:hover { background: var(--c-light); }
.board-notice-row h3 { margin: 0; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.board-notice-row time, .board-notice-row__number { color: var(--c-gray2); font-size: 14px; }
.board-notice-row__number { text-align: center; }
.board-notice-row__arrow { color: var(--c-gray); font-size: 20px; }
.board-pin { display: inline-block; padding: 4px 12px; color: var(--c-text); background: var(--board-warm-bg); border-radius: var(--r-pill); font-family: 'Pretendard-Bold', sans-serif; font-size: 13px; }
.board-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: 40px 20px; border-radius: var(--r-card-lg); background: var(--c-light); text-align: center; }
.board-state strong { margin-top: 16px; font-family: 'Pretendard-Bold', sans-serif; font-size: 20px; }
.board-state p { margin: 10px 0 0; color: var(--c-gray2); line-height: 1.6; }
.board-state.is-error { background: #fff3f1; }
.board-button, .board-list-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; margin-top: 24px; padding: 0 24px; color: var(--c-text); background: var(--c-yellow); border-radius: var(--r-sm); text-decoration: none; font-family: 'Pretendard-Bold', sans-serif; }
.board-pages { display: flex; justify-content: center; gap: 6px; margin-top: 36px; }
.board-pages a, .board-pages button { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--c-gray); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-sm); text-decoration: none; font: inherit; cursor: pointer; }
.board-pages .is-current { color: var(--c-text); background: var(--c-yellow); border-color: var(--c-yellow); }
.board-hero--detail { min-height: auto; padding: 40px 0 0; }
.board-back-top { display: inline-block; color: var(--c-gray); text-decoration: none; }
.board-eyebrow { margin: 12px 0 0; font-family: 'HGAlmond60g', sans-serif; font-size: 32px; }
.board-detail-wrap { padding-top: 28px; }
.board-detail { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-hero); background: var(--c-white); box-shadow: var(--sh-card); }
.board-detail__header { padding: 40px 48px 32px; border-bottom: 1px solid var(--c-line); }
.board-detail__kind { display: inline-block; margin-bottom: 16px; padding: 6px 14px; color: var(--c-text); background: var(--board-warm-bg); border-radius: var(--r-pill); font-size: 14px; }
.board-detail__header h1 { margin: 0; overflow-wrap: anywhere; font-family: 'Pretendard-Bold', sans-serif; font-size: clamp(26px, 4vw, 36px); line-height: 1.4; }
.board-detail__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; color: var(--c-gray2); font-size: 14px; }
.board-detail__meta span { color: var(--c-gray); }
.board-detail__meta .board-state-pill--inline { position: static; align-self: flex-start; padding: 4px 12px; color: var(--c-text); }
.board-detail__text { padding: 32px 48px; color: var(--c-gray); font-size: 17px; line-height: 1.9; overflow-wrap: anywhere; white-space: normal; }
.board-detail__image { margin: 0; background: var(--c-white); text-align: center; }
.board-detail__image img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
/* 높이는 view.php 가 BOARD_SPACE_SIZES 에서 --board-space 로 내려준다. 여기 숫자를 따로 적지 말 것. */
.board-detail__space { height: var(--board-space); }
.board-comments { margin-top: 32px; padding: 32px 48px; background: var(--c-white); border-radius: var(--r-hero); box-shadow: var(--sh-card); }
.board-comments__heading h2 { margin: 0 0 24px; font-family: 'Pretendard-Bold', sans-serif; font-size: 26px; }
.board-comment-form { padding: 24px; border-radius: var(--r-card); background: var(--c-light); }
.board-comment-form label { display: block; margin-bottom: 12px; font-family: 'Pretendard-Bold', sans-serif; }
.board-comment-form textarea { width: 100%; padding: 16px; resize: vertical; color: var(--c-text); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-sm); font: inherit; line-height: 1.6; }
.board-comment-form > div { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.board-comment-form span { color: var(--c-gray2); font-size: 13px; }
.board-comment-form button { min-width: 96px; min-height: 44px; color: var(--c-text); background: var(--c-yellow); border: 0; border-radius: var(--r-sm); font-family: 'Pretendard-Bold', sans-serif; }
.board-comment-form button:disabled { opacity: .55; cursor: wait; }
.board-comment-closed { padding: 20px 24px; color: var(--c-gray); background: var(--c-light); border-radius: var(--r-sm); }
.board-comment-status { min-height: 22px; margin: 12px 0 0; color: #28734a; font-size: 14px; }
.board-comment-status.is-error { color: var(--board-danger); }
.board-comment-list { margin-top: 8px; border-top: 1px solid var(--c-line); }
.board-comment { padding: 24px 4px; border-bottom: 1px solid var(--c-line); }
.board-comment header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.board-comment__author { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; overflow-wrap: anywhere; }
.board-comment header strong { font-size: 15px; }
.board-comment__center, .board-comment time { color: var(--c-gray2); font-size: 12px; }
.board-comment time { white-space: nowrap; }
.board-comment__delete { margin-left: auto; padding: 4px 8px; color: var(--board-danger); background: transparent; border: 0; font: inherit; font-size: 13px; cursor: pointer; }
.board-comment__body { margin-top: 12px; color: var(--c-gray); line-height: 1.7; overflow-wrap: anywhere; }
.board-comment__body a { color: var(--fx-brand); text-underline-offset: 3px; }
.board-state--small { min-height: 120px; margin-top: 12px; font-size: 14px; }
.board-list-button { margin-top: 32px; background: var(--c-white); color: var(--c-text); border: 1px solid var(--c-line); }
.board-page main :is(a, button, textarea):focus-visible { outline: 3px solid var(--fx-brand); outline-offset: 4px; }
@media (max-width: 1000px) {
  .board-hero { padding-inline: 32px; }
  .board-panel { padding: 32px; }
  .board-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .board-page main { padding-bottom: 56px; }
  .board-shell { width: calc(100% - 32px); }
  .board-hero:not(.board-hero--detail) { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 8px 16px; min-height: 0; padding: 20px 4px 24px; }
  .board-hero__copy { display: contents; }
  .board-hero h1 { grid-column: 1; grid-row: 1; align-self: center; margin: 0; font-size: 36px; }
  .board-hero__copy p { grid-column: 1 / -1; grid-row: 2; font-size: 15px; line-height: 23px; }
  .board-hero__mascot { grid-column: 2; grid-row: 1; align-self: center; width: 128px; height: 86px; transform: none; }
  .board-content { border-radius: 20px 20px 28px 28px; }
  .board-kind-tabs { gap: 6px; }
  .board-kind-tabs a { min-height: 60px; border-radius: 20px 20px 0 0; font-size: 20px; }
  .board-panel { min-height: 340px; padding: 24px 20px 32px; }
  .board-filter { gap: 6px; margin-bottom: 20px; }
  .board-filter a { min-width: 64px; padding-inline: 16px; font-size: 14px; }
  .board-event-grid { grid-template-columns: 1fr; gap: 20px; }
  .board-event-card__body { padding: 20px; }
  .board-state { min-height: 240px; padding-inline: 16px; border-radius: 24px; }
  .board-state strong { font-size: 18px; }
  .board-state p { font-size: 14px; }
  .board-notice-row a { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 8px; min-height: 76px; padding-inline: 0; }
  .board-notice-row h3 { align-self: end; font-size: 16px; }
  .board-notice-row time { grid-column: 2; font-size: 12px; }
  .board-notice-row__arrow { grid-column: 3; grid-row: 1 / span 2; }
  .board-notice-row__number { grid-row: 1 / span 2; }
  .board-hero--detail { min-height: auto; padding: 28px 0 0; }
  .board-hero--detail .board-shell { width: calc(100% - 32px); }
  .board-detail-wrap { padding-top: 20px; }
  .board-detail, .board-comments { border-radius: 24px; }
  .board-detail__header, .board-detail__text, .board-comments { padding: 24px; }
  .board-detail__space { height: calc(var(--board-space) * 2 / 3); }
  .board-detail__meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .board-comment-form { padding: 16px; }
  .board-comment { padding-inline: 0; }
  .board-comment header { flex-wrap: wrap; gap: 8px; }
  .board-state--small { min-height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .board-event-card { transition: none; }
  .board-event-card:hover { transform: none; }
}

.board-attachments { padding: 32px 48px; border-top: 1px solid var(--c-line); }
.board-attachments h2 { margin: 0 0 16px; font-family: 'Pretendard-Bold', sans-serif; font-size: 20px; }
.board-attachments h2 span { color: var(--c-gray2); font-size: 16px; }
.board-attachments ul { margin: 0; padding: 0; list-style: none; }
.board-attachments li + li { margin-top: 8px; }
.board-attachments a { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px; border-radius: 12px; background: var(--c-light); color: var(--c-text); text-decoration: none; }
.board-attachments a:hover { background: var(--board-warm-bg); }
.board-attachments__type { flex: none; font-family: 'Pretendard-Bold', sans-serif; font-size: 12px; color: var(--fx-brand); }
.board-attachments__name { flex: 1; min-width: 80px; overflow-wrap: anywhere; }
.board-attachments__size { color: var(--c-gray2); font-size: 13px; }
.board-attachments__download { font-size: 14px; }
@media(max-width:640px) { .board-attachments { padding: 24px; } .board-attachments__name { flex-basis: calc(100% - 48px); } .board-attachments__size { margin-left: 36px; } .board-attachments__download { margin-left: auto; } }

/* Event participation */
.board-event-card.is-ended{background:var(--c-light);border-color:var(--c-line)}
.board-event-card.is-ended .board-event-card__image{filter:grayscale(1);opacity:.65}
.board-event-card.is-ended h3,.board-event-card.is-ended p{color:var(--c-gray)}
.board-card-placeholder{height:100%;min-height:160px;display:grid;place-items:center;padding:32px;color:var(--board-accent);background:linear-gradient(135deg,var(--board-accent-bg),var(--board-warm-bg));font-weight:800;text-align:center;font-size:24px}
.board-hashtags{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:28px 32px;padding:20px;background:#f4f1fb;border-radius:16px}
.board-hashtags>[data-hashtags]{flex:1;min-width:160px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.board-hashtags button{border:0;border-radius:10px;padding:12px 20px;background:var(--c-text);color:var(--c-white);font-weight:700}
.board-copy-status{width:100%;font-size:14px;color:var(--board-accent)}
.board-copy-status:empty{display:none}
.board-comment-form input[type=url]{display:block;width:100%;border:1px solid var(--c-line);border-radius:12px;padding:14px;font:inherit;box-sizing:border-box;margin:8px 0 14px}
.board-comment-form .board-review-consent{display:flex;align-items:flex-start;gap:10px;padding:14px;background:var(--c-light);border-radius:10px;font-size:13px;font-weight:400;line-height:1.7;cursor:pointer}
.board-review-consent input{flex:0 0 auto;margin-top:4px;width:17px;height:17px;accent-color:var(--c-text)}
.board-comment-form label[for=board-participation-url]{margin-top:18px}
.board-sns-help{font-size:14px;color:var(--c-gray2);margin:4px 0}
.board-participation-link{overflow-wrap:anywhere;font-size:14px;margin-top:10px}
.board-participation-link strong{display:inline-block;background:var(--board-accent-bg);border-radius:6px;padding:3px 7px;margin-right:6px}
@media(max-width:600px){.board-hashtags{margin:20px 16px;padding:16px;gap:10px}.board-hashtags>strong{width:100%}.board-card-placeholder{font-size:18px}}