/* ═══════════════════════════════════════
   Board V2 Styles (공지사항 + FAQ)
   Indigo / Cream Theme
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Jua&display=swap');

:root {
  --brd-cream: #F0F4FF;
  --brd-beige: #E8EEFF;
  --brd-beige-mid: #D6DEFF;
  --brd-beige-dark: #B8C4F0;
  --brd-teal: #3a4fd4;
  --brd-teal-light: #b4beff;
  --brd-teal-dark: #2a3bb8;
  --brd-coral: #F97316;
  --brd-indigo: #4F46E5;
  --brd-ink: #0f1535;
  --brd-ink-mid: #2d3561;
  --brd-ink-muted: #5a6494;
  --brd-ink-faint: #8892c4;
  --brd-radius: 16px;
  --brd-font: 'Pretendard', 'Noto Sans KR', sans-serif;
}

body.board-v2,
body.board-v2 *,
body.board-v2 *::before,
body.board-v2 *::after { box-sizing: border-box; }
body.board-v2 { margin: 0; padding: 0; }
/* specificity 0으로 초기화 → class selector가 항상 이김 */
:where(body.board-v2 h1, body.board-v2 h2, body.board-v2 h3,
       body.board-v2 h4, body.board-v2 p, body.board-v2 ul, body.board-v2 ol) {
  margin: 0; padding: 0;
}
body.board-v2 ul { list-style: none; }

html { scrollbar-gutter: stable; }

/* ═══════════ NAV ═══════════ */
.brd-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 52px;
  background: rgba(26,31,94,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  min-height: 68px;
}
.brd-nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brd-nav-logo img {
  height: 36px; width: auto;
  width: auto;
  /* no filter needed */
}
.brd-nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.brd-nav-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: color .2s;
}
.brd-nav-links a:hover, .brd-nav-links a.active { color: #ffffff; }
.brd-nav-links a.active { border-bottom: 2px solid var(--brd-coral); padding-bottom: 2px; }
.brd-nav-cta {
  background: var(--brd-teal);
  color: #fff;
  border: none;
  padding: 10px 26px;
  border-radius: 50px;
  font-family: var(--brd-font);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  display: inline-block;
  margin-left: auto;
}
.brd-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(58,79,212,0.4); color: #fff; }

.brd-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 10px;
  margin-right: 8px;
  order: -1;
}

@media(max-width:768px) {
  .brd-nav { padding: 12px 14px; min-height: 52px; justify-content: center; }
  .brd-nav-toggle { display: none; }
  .brd-nav-links {
    position: static;
    transform: none;
    gap: 18px;
    flex-direction: row;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .brd-nav-links a {
    font-size: 14px;
    padding: 4px 2px;
  }
  .brd-nav-links a.active { border-bottom: 2px solid var(--brd-coral); padding-bottom: 2px; }
  .brd-nav-cta { font-size: 13px; padding: 7px 14px; }
}
@media(max-width:380px) {
  .brd-nav-links { gap: 12px; }
  .brd-nav-links a { font-size: 13px; }
}

/* ═══════════ BASE ═══════════ */
.board-v2 {
  font-family: var(--brd-font);
  background: var(--brd-cream);
  color: var(--brd-ink);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* ═══════════ PAGE HEADER ═══════════ */
.brd-page-header {
  background: linear-gradient(135deg, #1a1f5e 0%, #2a35a8 55%, #4a5ce0 100%);
  padding: 48px 52px 36px;
  color: #fff;
}
.brd-page-header-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.brd-page-header-logo { display: block; height: 64px; width: auto; max-width: 90%; margin: 0 auto 18px; }
.brd-page-header h1 { font-family: 'Jua', sans-serif; font-size: 32px; margin-bottom: 8px; }
.brd-page-header p { font-size: 15px; color: rgba(255,255,255,0.65); }

/* ═══════════ SUB TABS ═══════════ */
.brd-sub-tab-wrap {
  background: #fff;
  border-bottom: 1px solid var(--brd-beige-mid);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brd-sub-tab-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  padding: 0 52px;
}
.brd-sub-tab {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--brd-ink-muted);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  font-family: var(--brd-font);
  transition: color .15s;
  text-decoration: none;
}
.brd-sub-tab:hover { color: var(--brd-teal); }
.brd-sub-tab.active { color: var(--brd-teal-dark); border-bottom-color: var(--brd-teal-dark); font-weight: 700; }

/* ═══════════ CONTENT BODY ═══════════ */
.brd-content-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 52px 80px;
}

/* ═══════════ TOOLBAR ═══════════ */
.brd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.brd-count { font-size: 14px; color: var(--brd-ink-muted); }
.brd-count strong { color: var(--brd-ink); font-weight: 700; }
.brd-toolbar-right { display: flex; align-items: center; gap: 10px; }
.brd-write-btn {
  padding: 9px 22px;
  border-radius: 50px;
  background: var(--brd-teal-dark);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  font-family: var(--brd-font);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brd-write-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(42,59,184,0.3); color: #fff; }

/* ═══════════ NOTICE LIST ═══════════ */
.brd-notice-list { display: flex; flex-direction: column; gap: 0; }
.brd-notice-item {
  display: grid;
  grid-template-columns: 60px 80px 1fr 120px;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--brd-beige-mid);
  border-top: none;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
  color: inherit;
}
.brd-notice-item:first-child { border-top: 1px solid var(--brd-beige-mid); border-radius: var(--brd-radius) var(--brd-radius) 0 0; }
.brd-notice-item:last-child { border-radius: 0 0 var(--brd-radius) var(--brd-radius); }
.brd-notice-item:only-child { border-top: 1px solid var(--brd-beige-mid); border-radius: var(--brd-radius); }
.brd-notice-item:hover { background: var(--brd-beige); }
.brd-notice-item.pinned { background: #f5f7ff; }
.brd-notice-item.pinned:hover { background: var(--brd-beige); }

.brd-notice-num { font-size: 13px; color: var(--brd-ink-faint); text-align: center; }
.brd-notice-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 30px; width: fit-content;
}
.brd-badge-notice { background: rgba(58,79,212,0.12); color: var(--brd-teal-dark); }
.brd-badge-pin { background: rgba(249,115,22,0.1); color: var(--brd-coral); }

.brd-notice-title { font-size: 16px; font-weight: 600; color: var(--brd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brd-notice-item.pinned .brd-notice-title { color: var(--brd-teal-dark); }
.brd-notice-date { font-size: 13px; color: var(--brd-ink-faint); text-align: right; }

/* ═══════════ CONTEST SECTION CARDS (분야별 카드) ═══════════ */
.brd-section-overview {
  max-width: 1100px; margin: 0 auto;
  padding: 28px 52px 0;
}
.brd-section-overview-title {
  font-size: 13px; font-weight: 700; color: var(--brd-ink-muted);
  letter-spacing: .5px; margin-bottom: 16px; text-transform: uppercase;
}
.brd-section-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.brd-section-card {
  background: #fff; border: 1.5px solid var(--brd-beige-mid); border-radius: var(--brd-radius);
  padding: 22px 18px 18px; cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  position: relative; overflow: hidden; text-decoration: none;
}
.brd-section-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brd-teal); opacity: 0; transition: opacity .2s;
}
.brd-section-card:hover {
  border-color: var(--brd-teal); box-shadow: 0 4px 20px rgba(42,59,184,0.12);
  transform: translateY(-2px);
}
.brd-section-card:hover::before { opacity: 1; }
.brd-section-card.active { border-color: var(--brd-teal-dark); background: rgba(58,79,212,0.04); }
.brd-section-card.active::before { opacity: 1; }
.brd-section-card-icon { font-size: 28px; }
.brd-section-card-body { flex: 1; }
.brd-section-card-title { font-size: 14px; font-weight: 700; color: var(--brd-ink); line-height: 1.4; margin-bottom: 4px; }
.brd-section-card-count { font-size: 24px; font-weight: 900; color: var(--brd-teal-dark); }
.brd-section-card-link {
  font-size: 12px; color: var(--brd-ink-faint);
  display: flex; align-items: center; gap: 3px;
  margin-top: 4px; transition: color .2s;
}
.brd-section-card:hover .brd-section-card-link { color: var(--brd-teal-dark); }

@media(max-width:900px) {
  .brd-section-cards { grid-template-columns: repeat(2, 1fr); }
  .brd-section-overview { padding: 20px 20px 0; }
}

/* ═══════════ CONTEST FILTER TAB (pill) ═══════════ */
.brd-filter-wrap {
  background: #fff; border-bottom: 1px solid var(--brd-beige-mid);
  margin-top: 24px;
}
.brd-filter-inner {
  max-width: 1100px; margin: 0 auto; padding: 12px 52px;
  display: flex; align-items: center; gap: 10px; overflow-x: auto;
}
.brd-filter-inner::-webkit-scrollbar { display: none; }
.brd-filter-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; font-size: 14px; font-weight: 500;
  color: var(--brd-ink-muted); white-space: nowrap; cursor: pointer;
  border: 1.5px solid var(--brd-beige-dark); border-radius: 50px;
  background: #fff; transition: all .2s; font-family: var(--brd-font);
  text-decoration: none;
}
.brd-filter-tab:hover {
  color: var(--brd-teal-dark); border-color: var(--brd-teal-light);
  background: rgba(42,59,184,0.04);
}
.brd-filter-tab.active {
  color: #fff; background: var(--brd-teal-dark);
  border-color: var(--brd-teal-dark); font-weight: 700;
}
.brd-tab-count {
  background: rgba(0,0,0,0.08); color: inherit;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 50px;
}
.brd-filter-tab.active .brd-tab-count { background: rgba(255,255,255,0.25); color: #fff; }

@media(max-width:768px) {
  .brd-filter-inner { padding: 10px 20px; }
}

/* 검색 박스 */
.brd-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--brd-beige-dark);
  border-radius: 50px; padding: 8px 16px; min-width: 260px;
}
.brd-search-wrap input {
  border: none; outline: none; font-size: 14px; color: var(--brd-ink);
  background: transparent; width: 100%; font-family: var(--brd-font);
}
.brd-search-wrap input::placeholder { color: var(--brd-ink-faint); }

/* ═══════════ CONTEST POST LIST (카드형) ═══════════ */
.brd-post-list { display: flex; flex-direction: column; }
.brd-post-item {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 16px;
  padding: 18px 20px; background: #fff;
  border: 1px solid var(--brd-beige-mid); border-top: none;
  cursor: pointer; transition: background .15s, box-shadow .15s;
  text-decoration: none;
}
.brd-post-item:first-child { border-top: 1px solid var(--brd-beige-mid); border-radius: var(--brd-radius) var(--brd-radius) 0 0; }
.brd-post-item:last-child { border-radius: 0 0 var(--brd-radius) var(--brd-radius); }
.brd-post-item:only-child { border-top: 1px solid var(--brd-beige-mid); border-radius: var(--brd-radius); }
.brd-post-item:hover { background: var(--brd-beige); }
.brd-post-item.pinned { background: #f5f7ff; }

.brd-post-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.brd-post-cat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 50px; width: fit-content;
  background: rgba(58,79,212,0.1); color: var(--brd-teal-dark);
}
.brd-post-title {
  font-size: 17px; font-weight: 600; color: var(--brd-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brd-post-summary {
  font-size: 13px; color: var(--brd-ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brd-post-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--brd-ink-faint);
}
.brd-post-meta span { display: inline-flex; align-items: center; gap: 4px; }
.brd-post-right {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
}
.brd-post-stat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--brd-ink-muted);
}
.brd-post-stat svg { opacity: .6; }

@media(max-width:640px) {
  .brd-post-right { display: none; }
  .brd-post-title { white-space: normal; }
}

/* ═══════════ POST DETAIL (사례 상세) ═══════════ */
.brd-post-view-cat { margin-bottom: 14px; }
.brd-post-summary-highlight {
  background: rgba(58,79,212,0.06); border-left: 4px solid var(--brd-teal-dark);
  border-radius: 0 10px 10px 0; padding: 14px 18px; margin-bottom: 24px;
  font-size: 15px; color: var(--brd-ink-mid); line-height: 1.6;
}
.brd-post-info-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 16px;
  padding: 16px 20px; margin-bottom: 24px;
  background: var(--brd-beige); border-radius: 10px;
  font-size: 13px;
}
.brd-post-info-label { font-weight: 700; color: var(--brd-ink-muted); }
.brd-post-info-value { color: var(--brd-ink); }

/* ═══════════ NOTICE DETAIL ═══════════ */
.brd-view-wrap { max-width: 820px; margin: 0 auto; }
.brd-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 50px; border: 1.5px solid var(--brd-beige-dark);
  background: #fff; font-size: 14px; font-weight: 500; color: var(--brd-ink-muted);
  cursor: pointer; transition: all .2s; margin-bottom: 24px; font-family: var(--brd-font);
  text-decoration: none;
}
.brd-back-btn:hover { border-color: var(--brd-teal-dark); color: var(--brd-teal-dark); }

.brd-view-title { font-family: 'Jua', sans-serif; font-size: 26px; color: var(--brd-ink); line-height: 1.35; margin-bottom: 16px; }
.brd-view-meta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--brd-beige-mid);
  font-size: 13px; color: var(--brd-ink-faint); margin-bottom: 32px;
}
.brd-view-body { font-size: 16px; line-height: 1.9; color: var(--brd-ink-mid); margin-bottom: 40px; white-space: pre-line; }

.brd-att-wrap { margin-bottom: 32px; }
.brd-att-title { font-size: 13px; font-weight: 700; color: var(--brd-ink-muted); margin-bottom: 10px; }
.brd-att-item {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brd-beige); border: 1px solid var(--brd-beige-dark);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; color: var(--brd-ink-mid);
  margin-right: 8px; margin-bottom: 8px; text-decoration: none; transition: background .2s;
}
.brd-att-item:hover { background: var(--brd-beige-mid); }

.brd-view-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--brd-beige-mid); margin-top: 40px; gap: 12px;
}
.brd-action-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px;
  border-radius: 50px; border: 1.5px solid var(--brd-beige-dark); background: #fff;
  font-size: 14px; font-weight: 500; color: var(--brd-ink-muted); cursor: pointer;
  transition: all .2s; font-family: var(--brd-font); text-decoration: none;
}
.brd-action-btn:hover { border-color: var(--brd-teal-dark); color: var(--brd-teal-dark); }
.brd-action-btn.primary { background: var(--brd-teal-dark); color: #fff; border-color: var(--brd-teal-dark); }
.brd-action-btn.primary:hover { box-shadow: 0 4px 16px rgba(42,59,184,0.3); }
.brd-action-btn.danger { background: #fff; color: var(--brd-coral); border-color: var(--brd-coral); }
.brd-action-btn.danger:hover { background: var(--brd-coral); color: #fff; }

/* ═══════════ FAQ ═══════════ */
.brd-faq-cat-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.brd-faq-cat-btn {
  padding: 9px 22px; border-radius: 50px; border: 1.5px solid var(--brd-beige-dark);
  background: #fff; font-size: 14px; font-weight: 500; color: var(--brd-ink-muted);
  cursor: pointer; transition: all .2s; font-family: var(--brd-font);
}
.brd-faq-cat-btn:hover { border-color: var(--brd-teal-light); color: var(--brd-teal-dark); }
.brd-faq-cat-btn.active { background: var(--brd-teal-dark); color: #fff; border-color: var(--brd-teal-dark); }

.brd-faq-item { border-radius: 12px; border: 1px solid var(--brd-beige-mid); background: #fff; margin-bottom: 10px; overflow: hidden; }
.brd-faq-q {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px; cursor: pointer; gap: 16px; transition: background .15s;
}
.brd-faq-q:hover { background: var(--brd-beige); }
.brd-faq-q-left { display: flex; align-items: flex-start; gap: 14px; }
.brd-faq-q-mark { font-size: 16px; font-weight: 900; color: var(--brd-teal); flex-shrink: 0; margin-top: 1px; }
.brd-faq-q-text { font-size: 15px; font-weight: 600; color: var(--brd-ink); line-height: 1.5; }
.brd-faq-chevron { font-size: 18px; color: var(--brd-ink-muted); transition: transform .25s; flex-shrink: 0; }
.brd-faq-item.open .brd-faq-chevron { transform: rotate(180deg); }
.brd-faq-a { display: none; padding: 0 22px 20px 52px; font-size: 14px; color: var(--brd-ink-muted); line-height: 1.75; border-top: 1px solid var(--brd-beige-mid); padding-top: 16px; }
.brd-faq-item.open .brd-faq-a { display: block; }

/* ═══════════ PAGINATION ═══════════ */
.brd-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 6px; margin-top: 32px;
}
.brd-page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid var(--brd-beige-dark); border-radius: 8px;
  text-decoration: none; color: var(--brd-ink-muted); font-size: 14px;
  background: #fff; transition: all .15s;
}
.brd-page-link:hover { background: var(--brd-beige); border-color: var(--brd-teal-light); }
.brd-page-link.active { background: var(--brd-teal-dark); border-color: var(--brd-teal-dark); color: #fff; font-weight: 700; }

/* ═══════════ EMPTY ═══════════ */
.brd-empty { text-align: center; padding: 80px 0; color: var(--brd-ink-muted); }
.brd-empty-icon { font-size: 48px; margin-bottom: 16px; display: block; }
.brd-empty-text { font-size: 16px; }

/* ═══════════ MODAL ═══════════ */
.brd-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.brd-modal-box {
  background: #fff; padding: 28px 32px; border-radius: var(--brd-radius);
  max-width: 400px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.brd-modal-box h3 { margin: 0 0 12px; font-size: 18px; color: var(--brd-ink); }
.brd-modal-box p { margin: 0 0 16px; font-size: 14px; color: var(--brd-ink-muted); }
.brd-modal-input {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--brd-beige-dark);
  border-radius: 12px; font-size: 15px; font-family: var(--brd-font);
  margin-bottom: 16px; outline: none; box-sizing: border-box;
}
.brd-modal-input:focus { border-color: var(--brd-teal-dark); box-shadow: 0 0 0 3px rgba(42,59,184,0.1); }
.brd-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:768px) {
  .brd-page-header { padding: 32px 20px 24px; }
  .brd-sub-tab-inner { padding: 0 20px; }
  .brd-content-body { padding: 24px 20px 60px; }
  .brd-notice-item { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .brd-notice-num { display: none; }
  .brd-notice-date { text-align: left; }
}

/* ===== 공모전 하단 후원 로고 ===== */
.contest-footer-logos {
  padding: 36px 20px 40px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}
.contest-footer-logos-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: nowrap;
}
.contest-footer-logos-inner img {
  height: 34px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (max-width: 640px) {
  .contest-footer-logos { padding: 28px 16px 32px; }
  .contest-footer-logos-inner { gap: 16px; flex-wrap: wrap; }
  .contest-footer-logos-inner img { height: 26px; max-width: 110px; }
}