/* ==========================================================================
   _add_board_list.css
   게시판 list / write 공통 추가 스타일
   ========================================================================== */

/* ── Section background ─────────────────────────────────────────────────── */
.section-bg-light {
  background: #fff;
}

/* ── Board page heading ─────────────────────────────────────────────────── */
.board-page-heading {
  font-size: var(--font-size-heading-1);
  font-weight: 800;
  color: var(--color-light-900);
  margin-bottom: 1.5rem;
}
.board-page-heading--no-mb {
  font-size: var(--font-size-heading-1);
  font-weight: 800;
  color: var(--color-light-900);
  margin: 0;
}

/* ── Sticky tab bar ─────────────────────────────────────────────────────── */
.board-sticky-tabs {
  position: sticky;
  top: 108px;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.board-sticky-tabs-inner {
  display: flex;
  align-items: stretch;
  height: 52px;
}

/* ── Tab + Search bar ───────────────────────────────────────────────────── */
.board-tab-search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.board-heading-search-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ── Pill Tabs ──────────────────────────────────────────────────────────── */
.pill-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pill-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 1rem;
  border-radius: 9999px;
  font-size: var(--font-size-body-sm);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  background: #fff;
  color: var(--color-light-700);
  border: 1px solid var(--color-border);
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pill-tab:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  border-color: var(--color-primary-300);
}
.pill-tab.active {
  background: var(--color-primary-600);
  color: #fff;
  border-color: var(--color-primary-600);
  font-weight: 700;
}

/* ── Search Form ────────────────────────────────────────────────────────── */
.board-search-form {
  display: flex;
  align-items: center;
}
.board-search-input {
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 0.5rem 0.875rem;
  font-size: var(--font-size-body-sm);
  width: 220px;
  outline: none;
  font-family: inherit;
  background: #fff;
}
.board-search-btn {
  background: var(--color-primary-600);
  color: #fff;
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.board-search-btn:hover {
  background: var(--color-primary-700);
}
/* Compact search button (story/archive) */
.board-search-btn--sm {
  padding: 0.5rem 1rem;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.board-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.board-toolbar-btn {
  font-size: var(--font-size-body-sm);
}
.board-toolbar-btn--white {
  font-size: var(--font-size-body-sm);
  cursor: pointer;
  background: #fff;
}

/* ── Board cells ────────────────────────────────────────────────────────── */
.board-cell-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--font-size-body-sm);
  color: var(--color-light-400);
}
.board-cell-num--tabular {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-body-sm);
  color: var(--color-light-400);
  font-variant-numeric: tabular-nums;
}
.board-cell-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.board-cell-title--padded {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;
  min-width: 0;
  font-size: var(--font-size-body-sm);
}
.board-cell-title--padded-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;
  min-width: 0;
  font-size: var(--font-size-body-sm);
  color: var(--color-light-800);
}
.board-cell-meta {
  font-size: var(--font-size-body-sm);
  color: var(--color-light-500);
  font-variant-numeric: tabular-nums;
}
.board-cell-meta--center {
  font-size: var(--font-size-body-sm);
  color: var(--color-light-500);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Deadline cell — color driven by PHP class */
.board-cell-deadline {
  text-align: center;
  font-size: var(--font-size-body-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-light-700);
}
.board-cell-deadline--done {
  text-align: center;
  font-size: var(--font-size-body-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-light-400);
}

/* Title cell for archive list view */
.board-cell-title-text {
  font-size: var(--font-size-body);
  color: var(--color-light-800);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-cell-title-text a {
  color: inherit;
  text-decoration: none;
}

/* ── Title link ─────────────────────────────────────────────────────────── */
.board-title-link {
  color: var(--color-light-800);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-body);
}
.board-title-link:hover {
  color: var(--color-primary-600);
}

/* Title span (non-link variant) */
.board-title-span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Checkbox ───────────────────────────────────────────────────────────── */
.board-checkbox {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--color-primary-600);
}

/* ── Pinned row ─────────────────────────────────────────────────────────── */
.board-pinned-row {
  background: var(--color-primary-50);
  border-left: 3px solid var(--color-primary-400);
  padding-left: calc(1rem - 3px);
}
.board-pinned-row:hover {
  background: var(--color-primary-100) !important;
}
.board-pinned-row .board-cell-num {
  color: var(--color-primary-600);
}
.board-pinned-row .board-title-link {
  font-weight: 600;
  color: var(--color-light-900);
}

/* ── "공지" pinned badge ─────────────────────────────────────────────────── */
.notice-pinned-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: var(--font-size-caption);
  font-weight: 700;
  background: var(--color-primary-600);
  color: #fff;
  white-space: nowrap;
}

/* ── SVG pin icon ───────────────────────────────────────────────────────── */
.board-pin-icon {
  flex-shrink: 0;
}

/* ── Row link (anchor wrapping entire row) ──────────────────────────────── */
.board-row-link {
  text-decoration: none;
  color: inherit;
}
.board-row-link:hover {
  background: var(--color-light-50);
}
.board-row-link.board-pinned-row:hover {
  background: var(--color-light-100);
}

/* ── Pagination wrapper ─────────────────────────────────────────────────── */
.board-pagination {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* ── Category badge colors ──────────────────────────────────────────────── */
/* notice */
.notice-cat-program {
  background: var(--color-blue-50);
  color: var(--color-blue-600);
}
.notice-cat-bid {
  background: var(--color-secondary-50);
  color: var(--color-secondary-700);
}
.notice-cat-pub {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}
.notice-cat-closed {
  background: var(--color-danger-50);
  color: var(--color-danger-600);
}
.notice-cat-default {
  background: var(--color-light-100);
  color: var(--color-light-600);
}
/* recruit */
.recruit-cat-instructor {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}
.recruit-cat-default {
  background: #f5f5f5;
  color: var(--color-light-600);
}

/* ── Gallery card body ──────────────────────────────────────────────────── */
.gallery-card-body {
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.gallery-card-title {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-light-800);
  margin-bottom: 0.375rem;
  line-height: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gallery-card-excerpt {
  font-size: var(--font-size-body-sm);
  color: var(--color-light-500);
  line-height: 1.6;
  margin-bottom: 0.625rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-card-date {
  font-size: var(--font-size-caption);
  color: var(--color-light-400);
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}

/* gallery item wrapper */
.gallery-item {
  position: relative;
  display: flex;
  height: 100%;
}
.gallery-item-link {
  text-decoration: none;
  display: flex;
  width: 100%;
  height: 100%;
}
/* archive doc gallery */
.gallery-item-block {
  position: relative;
  display: block;
}
.gallery-item-block-link {
  text-decoration: none;
  display: block;
}

/* checkbox overlay on gallery item */
.gallery-item-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 3px;
  line-height: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* gallery image */
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* gallery card inner (full-width flex column) */
.gallery-card-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* archive doc card body */
.gallery-doc-body {
  padding: 0.875rem 1rem;
}
.gallery-doc-title {
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: var(--color-light-800);
  line-height: normal;
  margin-bottom: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-doc-date {
  font-size: var(--font-size-caption);
  color: var(--color-light-400);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.25rem;
}
.gallery-doc-meta {
  font-size: var(--font-size-caption);
  color: var(--color-light-400);
}

/* ── Write form ─────────────────────────────────────────────────────────── */
.write-card {
  padding: 2rem;
}
.form-row {
  margin-bottom: 1rem;
}
.form-label {
  display: block;
  font-size: var(--font-size-body-sm);
  font-weight: 600;
  color: var(--color-light-700);
  margin-bottom: 0.375rem;
}
.form-label-required {
  color: var(--color-primary-600);
}
.form-label-hint {
  font-weight: 400;
  color: var(--color-light-500);
}
.form-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.875rem;
  font-size: var(--font-size-body-sm);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.form-input--sm {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.875rem;
  font-size: var(--font-size-body-sm);
  font-family: inherit;
  outline: none;
  width: 220px;
}
.form-input--file {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  font-size: var(--font-size-body-sm);
  font-family: inherit;
  background: #fff;
}
.form-input--filedesc {
  margin-top: 0.375rem;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.875rem;
  font-size: var(--font-size-body-sm);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.form-select {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.875rem;
  font-size: var(--font-size-body-sm);
  font-family: inherit;
  background: #fff;
  min-width: 160px;
  outline: none;
}
.form-row-inline {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.form-field-flex {
  flex: 1;
  min-width: 160px;
}
.form-options-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.form-content-row {
  margin-bottom: 1.5rem;
}
.form-counter {
  font-size: var(--font-size-caption);
  color: var(--color-light-500);
  margin-top: -1rem;
  margin-bottom: 1rem;
}
.form-file-row {
  margin-bottom: 0.75rem;
}
.form-field-hint {
  margin-top: 0.25rem;
  font-size: var(--font-size-caption);
  color: var(--color-light-500);
}
.form-file-del {
  margin-top: 0.375rem;
  font-size: var(--font-size-caption);
  color: var(--color-light-500);
}
.form-captcha-row {
  margin-bottom: 1rem;
}
.form-footer-btns {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ── Board th header span alignment ─────────────────────────────────────── */
.board-th-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-th-left {
  text-align: left;
  padding-left: 0.5rem;
}
.board-th-text-center {
  text-align: center;
}

/* ── 목록 메타 열 중앙정렬 ───────────────────────────────────────────────── */
/* 공지: 작성자·등록일·조회수 (헤더 + 데이터) */
.notice-cols > *:nth-child(n+3) { text-align: center; }
/* 채용: 헤더 메타만 (데이터는 이미 board-cell-meta--center) */
.board-th-row.recruit-cols > *:nth-child(n+3) { text-align: center; }

/* 채용: 마감일 지난 글은 행 전체 연한 회색 처리 */
.board-td-row.board-row-closed { background-color: var(--color-light-50); }
.board-td-row.board-row-closed .board-title-link,
.board-td-row.board-row-closed .board-title-span,
.board-td-row.board-row-closed .board-cell-meta--center,
.board-td-row.board-row-closed .board-cell-deadline,
.board-td-row.board-row-closed .board-cell-num,
.board-td-row.board-row-closed .board-cell-num--tabular { color: var(--color-light-400); }

/* ── story 갤러리: 컬럼 blowout 방지 (긴 문자열이 트랙을 밀지 않도록) ── */
.gallery-item { min-width: 0; }
.gallery-card-title,
.gallery-card-excerpt { overflow-wrap: anywhere; }

/* ── 모바일: 게시판 목록을 세로 카드로 (카테고리·제목·날짜만) ── */
@media (max-width: 640px) {
  /* 헤더행 숨김 */
  .board-th-row.notice-cols,
  .board-th-row.recruit-cols,
  .board-th-row.archive-press-cols { display: none; }

  /* 각 행 → 세로 카드 */
  .board-td-row.notice-cols,
  .board-td-row.recruit-cols,
  .board-td-row.archive-press-cols { display: block; padding: 0.875rem 1rem; }

  /* 제목 셀: 카테고리 배지 위 → 제목 아래로 세로 배치 */
  .board-td-row .board-cell-title,
  .board-td-row .board-cell-title--padded,
  .board-td-row .board-cell-title--padded-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    padding-left: 0;
  }
  /* 제목 텍스트: 조금 더 크고 굵게, 셀 폭 채우기 */
  .board-td-row .board-title-link,
  .board-td-row .board-title-span,
  .board-td-row .board-cell-title-text {
    display: block;
    width: 100%;
    font-size: var(--font-size-body-lg);
    font-weight: 700;
    color: var(--color-light-900);
  }
  /* archive(작성자 없음)만 제목 줄바꿈 허용 */
  .board-td-row .board-cell-title-text { white-space: normal; }

  /* 노출 날짜 셀: 좌측 정렬 회색 소형 */
  .board-td-row.notice-cols        > *:nth-child(4),   /* 등록일 */
  .board-td-row.recruit-cols       > *:nth-child(4),   /* 마감일 */
  .board-td-row.recruit-cols       > *:nth-child(5),   /* 등록일 */
  .board-td-row.archive-press-cols > *:nth-child(3) {  /* 등록일 */
    display: block;
    text-align: left;
    color: var(--color-light-500);
    font-size: var(--font-size-body-sm);
  }

  /* 채용 모바일: 마감일·등록일 라벨 표시 (헤더가 숨겨지므로) */
  .board-td-row.recruit-cols > *:nth-child(4)::before { content: "마감일 "; color: var(--color-light-400); }
  .board-td-row.recruit-cols > *:nth-child(5)::before { content: "등록일 "; color: var(--color-light-400); }

  /* notice: 번호(1)·작성자(3)·조회수(5) 숨김 */
  .board-td-row.notice-cols > .board-cell-num,
  .board-td-row.notice-cols > *:nth-child(3),
  .board-td-row.notice-cols > *:nth-child(5) { display: none; }

  /* recruit: 번호(1)·작성자(3)·조회수(6) 숨김 */
  .board-td-row.recruit-cols > *:nth-child(1),
  .board-td-row.recruit-cols > *:nth-child(3),
  .board-td-row.recruit-cols > *:nth-child(6) { display: none; }

  /* archive: 번호(1)·조회수(4) 숨김 */
  .board-td-row.archive-press-cols > *:nth-child(1),
  .board-td-row.archive-press-cols > *:nth-child(4) { display: none; }
  .board-toolbar-btn,.board-toolbar-btn--white {
  padding: 4px;
  }
}