/* ============================================
   AI홈페이지스쿨 게시판 공통 스타일
   본 사이트 색상 토큰에 맞춰 작성
   ============================================ */

:root {
  --blue:        #2f6feb;
  --blue-light:  #7ea6ff;
  --blue-pale:   #eef2fb;
  --navy:        #12193a;
  --navy-deep:   #0d1330;
  --ink:         #14162b;
  --ink-mid:     #56607d;
  --ink-soft:    #8b93ab;
  --bg:          #f5f7fb;
  --line:        #e2e7f2;
  --line-soft:   #eef1f7;
  --white:       #ffffff;
  --red:         #e2665a;
  --green:       #16a34a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- 사이트 공통 헤더 ----------
   헤더/푸터 마크업은 메인 index.html 과 동일한 인라인 스타일을 쓴다.
   여기에는 메인과 같은 반응형 규칙만 둔다 (색상·폰트 하드코딩 금지).   */

/* 게시판 본문은 line-height:1.7 을 쓰지만, 공통 헤더/푸터는
   메인 index.html 과 동일하게 기본 행간(normal)을 써야 높이가 일치한다. */
header, header a, footer { line-height: normal; }

/* 메인 index.html 에는 box-sizing 리셋이 없어 헤더 안쪽 폭이
   max-width(1340px) + 좌우 padding(40px) = 1420px 로 잡힌다.
   게시판은 * { box-sizing: border-box } 를 쓰므로 헤더 줄에서만 되돌려
   메인과 동일한 폭이 되게 한다. (이걸 빼면 메뉴가 밀려 CTA 가 잘림) */
.hdr { box-sizing: content-box; }

@media (max-width: 1400px) {
  [data-spacer] { height: 70px !important; }
  header        { min-height: 70px !important; }
  .dnav         { display: none !important; }
  .burger       { display: flex !important; }
  .hdr          { padding: 12px 18px !important; }
}

/* ---------- 페이지 타이틀 ---------- */

.bd-hero {
  background: var(--navy);
  color: #fff;
  padding: 54px 20px 48px;
  text-align: center;
}
.bd-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
}
.bd-hero p {
  margin: 0;
  color: #a9b3ce;
  font-size: 15.5px;
}

/* ---------- 본문 래퍼 ---------- */

.bd-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* ---------- 목록 테이블 ---------- */

.bd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bd-count {
  font-size: 14.5px;
  color: var(--ink-mid);
}
.bd-count b { color: var(--blue); }

.bd-table-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
table.bd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.bd-table th {
  background: var(--blue-pale);
  color: var(--ink-mid);
  font-weight: 600;
  font-size: 13.5px;
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.bd-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.bd-table tbody tr:last-child td { border-bottom: 0; }
.bd-table tbody tr:hover { background: #fafbff; }

.bd-col-no    { width: 80px;  text-align: center; color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.bd-col-date  { width: 110px; text-align: center; color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.bd-col-who   { width: 100px; text-align: center; color: var(--ink-mid);  font-size: 14px; }
.bd-col-view  { width: 70px;  text-align: center; color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }

.bd-title-link { font-weight: 500; }
.bd-title-link:hover { color: var(--blue); text-decoration: underline; }

.bd-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: 1px;
}
.bd-reply-dot {
  display: inline-block;
  background: var(--blue-pale);
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
}

.bd-empty {
  padding: 70px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

/* 모바일: 표를 카드로 */
@media (max-width: 700px) {
  .bd-table thead { display: none; }
  .bd-table, .bd-table tbody, .bd-table tr, .bd-table td { display: block; width: 100%; }
  .bd-table tr {
    border-bottom: 1px solid var(--line-soft);
    padding: 14px 14px 12px;
  }
  .bd-table td { border: 0; padding: 0; }
  .bd-col-no { display: none !important; }
  .bd-table td.bd-col-title { font-size: 15.5px; margin-bottom: 6px; text-align: left; }
  .bd-col-date, .bd-col-who, .bd-col-view {
    display: inline-block !important;
    width: auto !important;
    text-align: left !important;
    font-size: 13px;
    color: var(--ink-soft);
    margin-right: 12px;
  }
  .bd-col-who::before  { content: '작성 '; }
  .bd-col-view::before { content: '조회 '; }
}

/* ---------- 페이징 ---------- */

.bd-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.bd-pager button {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-mid);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: .15s;
}
.bd-pager button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.bd-pager button[aria-current="page"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
}
.bd-pager button:disabled { opacity: .4; cursor: default; }

/* ---------- 버튼 ---------- */

.bd-btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: .15s;
}
.bd-btn-primary { background: var(--blue); color: #fff; }
.bd-btn-primary:hover { background: #2559c4; }
.bd-btn-ghost { background: var(--white); color: var(--ink-mid); border-color: var(--line); }
.bd-btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.bd-btn:disabled { opacity: .5; cursor: default; }

.bd-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* ---------- 글쓰기 폼 ---------- */

.bd-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
}
.bd-field { margin-bottom: 20px; }
.bd-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 7px;
}
.bd-field input,
.bd-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fcfdff;
  transition: .15s;
}
.bd-field input:focus,
.bd-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47,111,235,.12);
}
.bd-field textarea { min-height: 240px; resize: vertical; line-height: 1.75; }
.bd-hint { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

.bd-hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.bd-msg {
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 14.5px;
  margin-bottom: 18px;
  display: none;
}
.bd-msg.show { display: block; }
.bd-msg.error   { background: #fdeceb; color: #b03a30; border: 1px solid #f6cfcb; }
.bd-msg.success { background: #e9f7ef; color: #12703a; border: 1px solid #c5e9d4; }

/* ---------- 상세 보기 ---------- */

.bd-view {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.bd-view-head {
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--line);
}
.bd-view-head h2 {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.45;
}
.bd-view-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-soft);
}
.bd-view-body {
  padding: 30px 28px 36px;
  font-size: 16px;
  line-height: 1.85;
  white-space: pre-wrap;
  min-height: 160px;
}
.bd-reply {
  border-top: 1px solid var(--line);
  background: var(--blue-pale);
  padding: 24px 28px;
}
.bd-reply-head {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bd-reply-body {
  font-size: 15.5px;
  line-height: 1.8;
  white-space: pre-wrap;
  color: var(--ink);
}
.bd-reply + .bd-reply { border-top: 1px solid #dbe4f7; }

.bd-loading {
  padding: 70px 20px;
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- 사이트 공통 푸터 ----------
   메인 index.html 과 동일한 인라인 스타일을 쓰므로 반응형 여백만 둔다.   */

@media (max-width: 768px) {
  .pad { padding-left: 18px !important; padding-right: 18px !important; }
}