/* site/pages/vocational.css — 직업계고 현황과 유학생 모집 공고·상담 화면 전용
   색·간격은 토큰만 쓴다. 버튼 모양은 site/common.css의 .btn을, 공고·상담 목록·상세의 표·메타·첨부·페이지는 pages/board.css를 그대로 쓰고
   여기서는 이 화면들에만 있는 칸(공고의 접수 상태 배지·학교명 열·지원할 수 없는 사유, 상담의 답변 여부·잠금 표시·문답·비밀번호 확인·재질문 칸·작성 폼)의 놓임만 정한다. */

/* 유학생 모집 공고·상담으로 가는 두 링크 — 좁은 폭에서는 아래로 넘어간다 */
.status-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── 유학생 모집 공고 — 접수 상태 배지는 상태 배지 pill(site/common.css .badge)이고, 준비는 같은 모양에 테두리만 둔다 ── */
.notice-badge--open { background: var(--c-state-ongoing); }
.notice-badge--closed { background: var(--c-state-closed); }
.notice-badge--upcoming { background: var(--c-white); color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
table.notice-board thead th.col-school, table.notice-board thead th.col-title,
table.notice-board tbody td.cell-school { text-align: left; }
table.notice-board tbody td.cell-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice-board .t-link { overflow-wrap: anywhere; }
.notice-board .cell-empty { padding: var(--sp-12) 0; color: var(--c-text-mute); }
.notice-title { overflow-wrap: anywhere; }
.notice-forms .attachment-list { padding: var(--sp-2) var(--sp-5); }
/* 학교 선택 상자는 가장 긴 학교명에 맞춰 늘어나므로 폭에 상한을 두고 넘치는 이름은 말줄임한다 */
.notice-filters .select-wrap { max-width: 100%; }
.notice-filters .select-wrap select { width: 260px; max-width: 100%; text-overflow: ellipsis; }
.notice-reason { margin: var(--sp-3) 0 0; text-align: center; font-size: var(--fs-14); color: var(--c-text-mute); }

/* ── 상담 목록 — 건수 줄 오른쪽에 검색어 칸과 상담 신청 버튼, 내용 열이 남는 폭을 갖는다 ── */
.counsel-toolbar-end { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
table.counsel-board tbody td.cell-author { text-align: left; }
table.counsel-board thead th.col-content, table.counsel-board thead th.col-author { text-align: left; }
.counsel-board .t-link { min-width: 0; }
.counsel-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 표로 보일 때 한 줄 미리보기가 글 길이만큼 내용 열의 최소 폭을 밀어 올려 표가 틀을 넘지 않게 — 링크가 칸 폭을 따르고 넘는 글은 말줄임으로 자른다 */
@media (min-width: 768px) {
  table.counsel-board td.cell-title .t-link { width: 0; min-width: 100%; }
}
.counsel-lock { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-text-mute); }
.counsel-board .cell-empty { padding: var(--sp-12) 0; color: var(--c-text-mute); }

/* ── 상담 상세 — 글 머리 · 내용 · 첨부 · 문답 · 재질문 칸 ── */
.counsel-content { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--c-text); margin: 0 0 var(--sp-8); }
.counsel-section-title { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-text); margin: var(--sp-10) 0 var(--sp-4); }
.counsel-attachments .attachment-list { margin: 0; }

.counsel-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.counsel-reply { border: var(--bd); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); background: var(--c-white); }
/* 관리자 답변은 틸 띠와 옅은 바탕으로 작성자 재질문과 가른다 */
.counsel-reply.is-admin { border-left: 4px solid var(--c-accent); background: var(--c-surface-tint); }
.counsel-reply.is-author { border-left: 4px solid var(--c-line-strong); }
.counsel-reply__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.counsel-reply__who { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--c-text); }
.counsel-reply.is-admin .counsel-reply__who { color: var(--c-accent-active); }
.counsel-reply__date { font-size: var(--fs-13); color: var(--c-text-cap); }
.counsel-reply__body { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-15); line-height: var(--lh-loose); color: var(--c-text); margin: 0; }

/* 비밀번호 확인·재질문 칸 — 문답 아래(잠긴 비밀글은 내용 자리)에 놓이는 상자 */
.counsel-panel { border: var(--bd); border-radius: var(--r-lg); background: var(--c-surface-mute); padding: var(--sp-5); margin-top: var(--sp-6); }
.counsel-panel[hidden] { display: none; }
.counsel-panel__title { font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--c-text); margin: 0 0 var(--sp-3); }
.counsel-panel__row { display: flex; gap: var(--sp-2); align-items: flex-start; }
.counsel-panel__row .pw-wrap { flex: 1; max-width: 360px; }
.counsel-panel .textarea { background: var(--c-white); }
.counsel-panel__actions { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }
.counsel-locked { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-16); color: var(--c-text-soft); margin: 0 0 var(--sp-2); }

/* ── 상담 작성 — 한 단계 폼, 동의란은 폼 아래 ── */
.counsel-form { max-width: 760px; }
.counsel-form .field .checkbox { font-weight: var(--fw-regular); }
.counsel-consent { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: var(--bd); border-bottom: var(--bd); margin-bottom: var(--sp-6); }
.counsel-consent .checkbox { font-weight: var(--fw-regular); word-break: keep-all; }
.counsel-consent__view { background: none; border: none; padding: 0; flex: none; font-size: var(--fs-14); color: var(--c-text-soft); text-decoration: underline; text-underline-offset: 2px; }
.counsel-consent__view:hover { color: var(--c-primary); }
.counsel-form__actions { display: flex; justify-content: center; gap: var(--sp-3); padding-top: var(--sp-4); }

/* 전문 보기 모달 — 원고가 길어 본문만 스크롤한다(회원가입 화면의 전문 보기와 같은 모양) */
.legal-modal { background: var(--c-white); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 720px; max-width: 100%; display: flex; flex-direction: column; max-height: 82vh; }
.legal-modal__head { padding: var(--sp-3) var(--sp-3) var(--sp-5) var(--sp-6); border-bottom: var(--bd); }
.legal-modal__head h3 { margin: 0; padding-right: var(--sp-3); font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-primary); }
.legal-modal__body { overflow-y: auto; padding: var(--sp-6); font-size: var(--fs-15); line-height: var(--lh-loose); color: var(--c-text); }
.legal-modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); border-top: var(--bd); }

/* ── 좁은 폭 — 목록은 카드형(board.css)이고 작성자·답변 여부를 함께 보인다 ── */
@media (max-width: 767px) {
  .notice-filters .select-wrap, .notice-filters .select-wrap select { width: 100%; }
  /* 공고 목록 카드 — 배지 · 학교명이 한 줄, 그 아래 공고명, 접수 기간 순이다 */
  table.notice-board tbody td.cell-school { display: block; order: 1; font-size: var(--fs-13); color: var(--c-text-soft); }
  table.notice-board tbody td.cell-date { order: 3; white-space: normal; }
  table.notice-board tbody td.cell-empty { display: block; flex: 1 1 100%; text-align: center; }
  /* 접수 기간이 길어 한 줄에 둘이 들지 않으므로 메타 항목을 위아래로 쌓고 구분선을 뺀다 */
  .notice-meta { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .notice-meta .meta-item, .notice-meta .meta-item:first-child { padding: 0; }
  .notice-meta .meta-item:not(:first-child) { border-left: none; }
  /* 검색어 칸과 검색 버튼이 한 줄을 채우고, 상담 신청은 그 아래 한 줄을 채운다 */
  .counsel-toolbar-end { flex: 1 1 100%; }
  .counsel-toolbar-end .board-filters { flex: 1 1 100%; flex-wrap: nowrap; }
  .counsel-toolbar-end .kw-wrap { flex: 1 1 auto; min-width: 0; }
  .counsel-toolbar-end .kw-wrap input { width: 100%; }
  .counsel-toolbar-end > .btn { flex: 1 1 100%; }
  /* 표를 블록으로 두어 줄(카드)이 화면 폭에 맞는다 — 표로 두면 자동 표 배치가 한 줄로 그리는 내용 미리보기 길이만큼 표를 넓힌다 */
  table.counsel-board, table.counsel-board tbody { display: block; }
  table.counsel-board tbody td.cell-title { min-width: 0; }
  table.counsel-board .t-link { max-width: 100%; }
  table.counsel-board tbody td.cell-author, table.counsel-board tbody td.cell-answer { display: block; }
  table.counsel-board tbody td.cell-empty { display: block; flex: 1 1 100%; text-align: center; }
  table.counsel-board tbody td.cell-author { order: 3; font-size: var(--fs-13); color: var(--c-text-soft); }
  /* 비밀글은 작성자 칸이 비어 있다 — 빈 칸이 작성일을 밀지 않게 한다 */
  table.counsel-board tbody td.cell-author:empty { display: none; }
  table.counsel-board tbody td.cell-answer { order: 5; margin-left: auto; }
  .counsel-panel__row { flex-direction: column; align-items: stretch; }
  .counsel-panel__row .pw-wrap { max-width: none; }
  .counsel-consent { flex-direction: column; align-items: flex-start; }
  .counsel-form__actions .btn { flex: 1 1 auto; min-width: 0; }
}