/**
 * Toolly KBoard 공통 스킨 — TASK:T018/T020(요구사항 17).
 *
 * T020 — T018 때 "설치 후 보정 필요"로 남겨둔 항목을 실제 설치본 기준으로 재작성했다.
 * 검증 방법: (1) PHP 내장 서버로 로컬 임시 구동 후 5개 게시판 URL 을 curl 해 실제 렌더된
 * class 를 전수 추출, (2) wp-content/plugins/kboard 및 kboard-comments 스킨 원본 PHP/CSS를
 * 직접 읽어 마크업/기본 스타일을 대조. T018 의 [class*="kboard"] 방어적 추정 대부분이
 * 틀렸다 — 특히 최상위 래퍼는 클래스가 아니라 ID(`#kboard-default-list` 등)였고, 댓글은
 * KBoard 코어가 아니라 별도 플러그인(kboard-comments)이 완전히 다른 클래스 체계로 렌더한다.
 *
 * 대상 게시판: 1 자유게시판(default) · 2 자료실(default+카테고리 5종) · 3 Academy 후기(default) ·
 * 4 교육문의(contact-form) · 5 서비스문의(contact-form).
 *
 * 오버라이드 전략 — 두 겹:
 *   레이어 A. KBoard 자체가 :root(및 kboard-comments 는 .kboard-comments-default)에 선언한
 *             --kboard-* / --kboard-comments-* CSS 변수를 tokens.css 변수로 재정의한다.
 *             플러그인 CSS 대부분이 이미 이 변수만 참조하므로, 재정의 한 번으로 색상/라운드/
 *             그림자/스페이싱/폰트가 사이트 톤으로 일괄 전환된다(§0).
 *   레이어 B. 변수로 안 잡히는 부분(리터럴 HEX, 리터럴 px 라운드/패딩, 배지/탭 모양 등)만
 *             실제 셀렉터를 정밀 타겟팅해 보정한다.
 * 로드 순서: functions.php 의 wp_enqueue_style('toolly-kboard', ...) 가
 * kboard-skin-default/kboard-skin-contact-form/kboard-comments-skin-default 를 의존성으로
 * 선언해 KBoard 자체 CSS보다 항상 나중에 출력된다 — 동일 특이도에서 나중 선언이 이기므로
 * !important 없이도 대부분 오버라이드된다. 플러그인이 !important 를 쓴 값(버튼 배경색 등)도
 * 실제로는 CSS 변수를 참조하므로 변수만 바꾸면 !important 규칙째로 우리 톤을 따라온다.
 *
 * 플러그인 원본 파일(wp-content/plugins/kboard*, plugins/kboard-comments/)은 절대 수정하지
 * 않는다 — 전부 이 테마쪽 파일 하나로만 오버라이드한다.
 */

/* ====================================================================== */
/* 0. 디자인 토큰 브릿지 — KBoard/kboard-comments 자체 변수를 tokens.css 로 재정의 */
/*    근거: plugins/kboard/skin/default/style.css, skin/contact-form/style.css     */
/*    :root { --kboard-primary: #2563eb; ... } 블록(라인 7~35 부근)                */
/* ====================================================================== */

:root {
  --kboard-primary: var(--color-primary);
  --kboard-primary-hover: var(--color-primary-dark);
  --kboard-text: var(--color-text-primary);
  --kboard-text-muted: var(--color-text-muted);
  --kboard-bg: var(--color-bg-white);
  --kboard-bg-alt: var(--color-bg-alt);
  --kboard-border: var(--color-border);
  --kboard-danger: var(--color-danger);
  --kboard-font-family: var(--font-family-base);
  --kboard-font-size: var(--font-body-size);
  --kboard-radius: var(--radius-md);
  --kboard-spacing-sm: var(--space-2);
  --kboard-spacing-md: var(--space-4);
  --kboard-spacing-lg: var(--space-6);
  --kboard-shadow-sm: var(--shadow-sm);
  --kboard-shadow-md: var(--shadow-md);
}

/* kboard-comments 플러그인은 같은 이름의 변수를 :root 가 아니라 .kboard-comments-default
   스코프에 선언한다(plugins/kboard-comments/skin/default/style.css 라인 10~22) — 그대로 대조. */
.kboard-comments-default {
  --kboard-comments-primary: var(--color-primary);
  --kboard-comments-primary-hover: var(--color-primary-dark);
  --kboard-comments-text: var(--color-text-primary);
  --kboard-comments-text-muted: var(--color-text-muted);
  --kboard-comments-bg: var(--color-bg-white);
  --kboard-comments-bg-alt: var(--color-bg-alt);
  --kboard-comments-border: var(--color-border);
  --kboard-comments-border-light: var(--color-border);
  --kboard-comments-radius: var(--radius-md);
  --kboard-comments-radius-sm: var(--radius-sm);
  --kboard-comments-shadow: var(--shadow-sm);
}

/* ====================================================================== */
/* 1. 목록(List) — 실제 래퍼는 클래스가 아니라 ID다: #kboard-default-list      */
/*    근거: plugins/kboard/skin/default/list.php 라인 1, curl 실측 대조 완료   */
/* ====================================================================== */

#kboard-default-list {
  font-family: var(--font-family-base);
}

/* 총 건수 + 정렬 select */
#kboard-default-list .kboard-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

#kboard-default-list .kboard-total-count {
  color: var(--color-text-muted);
  font-size: var(--font-caption-size);
}

#kboard-default-list .kboard-sort select {
  border-radius: var(--radius-sm);
}

/* 공지/인기/선택됨 행 — 플러그인이 var() 없이 리터럴 HEX 로 박아둔 부분만 보정
   (근거: style.css 라인 318/322/327 부근 #eff6ff/#dbeafe/#f0f9ff). */
#kboard-default-list .kboard-list tbody tr.kboard-list-notice {
  background-color: rgba(var(--color-primary-rgb), 0.05);
}

#kboard-default-list .kboard-list tbody tr.kboard-list-notice:hover {
  background-color: rgba(var(--color-primary-rgb), 0.09);
}

#kboard-default-list .kboard-list tbody tr.kboard-list-selected {
  background-color: rgba(var(--color-primary-rgb), 0.06);
}

/* 제목 셀 안 신규/댓글수 배지 — 사이트 공통 pill 톤(design-system.md 카테고리 뱃지 패턴)으로 정렬 */
.kboard-comments-count {
  border-radius: var(--radius-full);
}

.kboard-default-new-notify {
  border-radius: var(--radius-full);
}

/* 모바일 메타(작성자/날짜/추천/조회) 줄 — KBoard 자체가 768px 이하에서 노출시킨다.
   근거: style.css 라인 415-419(데스크톱 숨김), 라인 1189 부근(모바일 노출 flex). 여기선
   구분자 색만 톤에 맞춘다. */
#kboard-default-list .kboard-mobile-contents .contents-separator {
  color: var(--color-border);
}

/* ====================================================================== */
/* 2. 카테고리 — PC 탭 / 모바일 select. KBoard 가 둘 다 자체 렌더한다.        */
/*    근거: plugins/kboard/skin/default/list-category-default.php           */
/*    .kboard-category.category-pc(ul.kboard-category-list>li) / .category-mobile(select form) */
/* ====================================================================== */

#kboard-default-list .kboard-category.category-pc {
  margin-bottom: var(--space-5);
}

#kboard-default-list .kboard-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#kboard-default-list .kboard-category-list li a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--font-caption-size);
  font-weight: 700;
}

#kboard-default-list .kboard-category-list li a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

#kboard-default-list .kboard-category-list li.kboard-category-selected a {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 모바일(category-mobile select)은 §7 범용 select 규칙을 그대로 상속받는다. */

/* ====================================================================== */
/* 3. 페이지네이션 — 근거: helper/Pagination.helper.php (li.active, .first-page, */
/*    .prev-page, .next-page, .last-page; 클래스 앞에 kboard- 접두어 없음)      */
/* ====================================================================== */

#kboard-default-list .kboard-pagination {
  margin-top: var(--space-7);
}

/* 색/라운드는 §0 변수 브릿지로 이미 사이트 primary 톤을 따라간다.
   여기선 pill 대신 site 표준 사각 라운드(§tokens radius-sm)만 재확인해둔다. */
#kboard-default-list .kboard-pagination li a {
  border-radius: var(--radius-sm);
}

/* ====================================================================== */
/* 4. 검색 + 글쓰기 버튼 바 — .kboard-search / .kboard-control               */
/* ====================================================================== */

#kboard-default-list .kboard-search {
  border-radius: var(--radius-md);
}

#kboard-default-list .kboard-control {
  margin-top: var(--space-4);
}

/* 목록/상세/글쓰기 공통 버튼(.kboard-default-button-small) — 플러그인이 이미
   var(--kboard-text)/var(--kboard-primary):hover 를 !important 로 쓰고 있어(§0 브릿지로
   자동으로 사이트 톤을 따라온다) 라운드만 사이트 버튼 표준(10px, pill 아님)으로 재확인. */
a.kboard-default-button-small,
button.kboard-default-button-small,
a.kboard-contact-form-button-small,
button.kboard-contact-form-button-small {
  border-radius: var(--radius-md);
}

/* ====================================================================== */
/* 5. 게시글 상세 뷰(Document) — 근거: skin/default/document.php             */
/*    #kboard-document > #kboard-default-document > .kboard-document-wrap   */
/* ====================================================================== */

#kboard-default-document .kboard-title h1 {
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  color: var(--color-text-primary);
}

/* 작성자/작성일/조회 메타(.detail-attr > .detail-name + .detail-value) */
#kboard-default-document .kboard-detail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-3);
  margin-block: var(--space-3) var(--space-5);
  border-block: 1px solid var(--color-border);
  font-size: var(--font-caption-size);
  color: var(--color-text-muted);
}

#kboard-default-document .kboard-detail .detail-attr {
  display: inline-flex;
  gap: var(--space-1);
}

#kboard-default-document .kboard-detail .detail-name {
  font-weight: 600;
  color: var(--color-text-secondary);
}

#kboard-default-document .kboard-detail .detail-writer .detail-value {
  font-weight: 700;
  color: var(--color-text-primary);
}

/* 카테고리 뱃지(.detail-category1~5 / .detail-tree-category-N) — 목록 카테고리 탭과 톤 통일 */
#kboard-default-document .detail-category1,
#kboard-default-document .detail-category2,
#kboard-default-document .detail-category3,
#kboard-default-document .detail-category4,
#kboard-default-document .detail-category5,
#kboard-default-document [class*="detail-tree-category-"] {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
  font-weight: 700;
}

#kboard-default-document .kboard-content {
  padding-block: var(--space-6);
  line-height: 1.8;
  color: var(--color-text-primary);
}

#kboard-default-document .content-view img {
  border-radius: var(--radius-md);
}

/* 좋아요/싫어요/인쇄 — .kboard-button-action 은 §0 브릿지로 색은 따라오지만
   라운드(4px 리터럴, style.css 라인 630)만 사이트 표준으로 보정 */
#kboard-default-document .kboard-document-action {
  display: flex;
  justify-content: space-between;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.kboard-button-action {
  border-radius: var(--radius-sm);
}

/* ====================================================================== */
/* 6. 첨부파일 — 근거: document.php 라인 76-82. .kboard-attach 안에 다운로드   */
/*    버튼(.kboard-button-action.kboard-button-download)이 반복된다.         */
/* ====================================================================== */

#kboard-default-document .kboard-attach {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-radius: var(--radius-md);
}

.kboard-button-download {
  color: var(--color-primary);
  background: var(--color-bg-white);
}

.kboard-button-download::before {
  content: "\1F4CE"; /* 📎 */
  margin-right: var(--space-1);
}

/* ====================================================================== */
/* 7. 이전글/다음글 네비게이션 — .kboard-document-navi                       */
/* ====================================================================== */

#kboard-default-document .kboard-document-navi {
  display: flex;
  flex-direction: column;
  border-block: 1px solid var(--color-border);
  margin-block: var(--space-5);
}

#kboard-default-document .kboard-prev-document,
#kboard-default-document .kboard-next-document {
  padding-block: var(--space-3);
}

#kboard-default-document .navi-document-title {
  color: var(--color-text-secondary);
}

#kboard-default-document .navi-arrow {
  color: var(--color-text-muted);
  margin-inline: var(--space-2);
}

/* ====================================================================== */
/* 8. 댓글 — KBoard 코어가 아니라 별도 플러그인 kboard-comments 가 렌더한다.   */
/*    근거: plugins/kboard-comments/skin/default/list.php · list-template.php */
/*    래퍼: #kboard-comments-{uid}.kboard-comments-default > .kboard-comments-wrap */
/*    라이브 검증 메모: board 3(Academy 후기)는 board_setting.use_comment='yes' 지만  */
/*    kboard_board_meta 에 comment_skin 키가 없어(빈 문자열) 실제 화면엔 댓글 영역이  */
/*    비어 렌더된다(KBCommentsBuilder::setSkin('') 가 기본값 폴백 없이 그대로 저장됨). */
/*    Sonnet/백엔드 쪽에서 board 3 의 comment_skin 메타를 'default' 로 설정해야       */
/*    실제 댓글 30건이 화면에 뜬다 — 플러그인/DB 설정이라 이 CSS 로는 해결 불가.        */
/*    아래 스타일은 kboard-comments 플러그인 소스(list.php/list-template.php)의        */
/*    실제 마크업을 그대로 근거로 작성했다(라이브 스크린 대조는 위 사유로 보류).           */
/* ====================================================================== */

.kboard-comments-default {
  margin-block: var(--space-6) 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.kboard-comments-default .comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.kboard-comments-default .comments-count {
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  color: var(--color-text-primary);
}

.kboard-comments-default .comments-total-count {
  color: var(--color-primary);
}

.kboard-comments-default .comments-header hr {
  display: none; /* 위 테마 border-top 으로 이미 구분선이 있어 중복 제거 */
}

.kboard-comments-default .comments-list > ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.kboard-comments-default .kboard-comments-item {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.kboard-comments-default .kboard-comments-item hr {
  display: none;
}

.kboard-comments-default .comments-list-username {
  font-weight: 700;
  color: var(--color-text-primary);
}

.kboard-comments-default .comments-list-create {
  margin-top: var(--space-1);
  font-size: var(--font-caption-size);
  color: var(--color-text-muted);
}

.kboard-comments-default .comments-list-content {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
}

.kboard-comments-default .comments-list-controller {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  font-size: var(--font-caption-size);
}

.kboard-comments-default .comments-button-action {
  color: var(--color-text-muted);
  font-weight: 600;
}

.kboard-comments-default .comments-button-action:hover {
  color: var(--color-primary);
}

.kboard-comments-default .comments-button-delete:hover {
  color: var(--color-danger);
}

/* 대댓글(재귀 렌더) 들여쓰기 — list-template.php 가 자기 자신을 재귀 호출하므로
   .kboard-comments-item 안에 또 .comments-list > ul 이 중첩된다 */
.kboard-comments-default .kboard-comments-item .comments-list {
  margin-top: var(--space-4);
  margin-left: var(--space-7);
}

/* 댓글 작성/답글 폼 — .kboard-comments-form, .comments-field.field-* */
.kboard-comments-default .kboard-comments-form,
.kboard-comments-default .comments-reply-form {
  margin-top: var(--space-5);
}

.kboard-comments-default .comments-field {
  margin-bottom: var(--space-3);
}

.kboard-comments-default .comments-field-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-caption-size);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.kboard-comments-default .comment-textarea {
  min-height: 96px;
}

.kboard-comments-default .comments-submit-button input[type="submit"] {
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: var(--color-text-on-dark);
  border: none;
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-weight: 700;
  cursor: pointer;
}

.kboard-comments-default .kboard-comments-login {
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-caption-size);
}

/* ====================================================================== */
/* 9. 글쓰기 / 문의 폼 — default(#kboard-default-editor)·contact-form        */
/*    (#kboard-contact-form-editor) 가 완전히 같은 필드 마크업을 공유한다.      */
/*    근거: skin/default/editor-fields.php, skin/contact-form/editor-fields.php, */
/*    cf4(교육문의)/cf5(서비스문의) curl 실측 대조 완료 — .kboard-attr-row >     */
/*    .attr-name(label) + .attr-value(input/select/textarea/checkbox 그룹).    */
/* ====================================================================== */

.kboard-form .kboard-attr-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.kboard-form .attr-name {
  font-size: var(--font-caption-size);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.kboard-form .attr-required-text {
  color: var(--color-danger);
}

.kboard-form .attr-value,
.kboard-form .kboard-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 체크박스/라디오 옵션 그룹(§9 개인정보동의 등) — .attr-value-label/.attr-value-option */
.kboard-form .attr-value-label,
.kboard-form .attr-value-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-body-size);
  color: var(--color-text-primary);
}

.kboard-form .attr-value-label input,
.kboard-form .attr-value-option input {
  width: auto;
}

.kboard-form .description {
  font-size: var(--font-caption-size);
  color: var(--color-text-muted);
}

/* 문의내용 본문 textarea(.kboard-content > textarea.editor-textarea) */
.kboard-form .editor-textarea {
  min-height: 200px;
}

/* ====================================================================== */
/* 10. contact-form 전용 — 대형 제출 버튼(문의폼 "Send")                     */
/*     근거: skin/contact-form/style.css 라인 767 부근. 이미 var(--kboard-primary) */
/*     그라데이션(§0 브릿지로 사이트 톤 적용됨)이지만 radius/shadow 는 리터럴이라 보정. */
/* ====================================================================== */

.kboard-contact-form-button-large {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

.kboard-contact-form-button-large:hover {
  box-shadow: var(--shadow-lg) !important;
}

/* ====================================================================== */
/* 11. 반응형 — KBoard 스킨이 이미 자체 768px(목록 카드 전환)·600px(댓글) 브레이크 */
/*     포인트를 갖고 있다(근거: skin/default/style.css 라인 1150 부근:            */
/*     thead 숨김 → tbody tr 을 카드로, .kboard-mobile-contents 노출 — T018 때    */
/*     추정으로 만들었던 카드 변환 로직과 동일한 목적이라 여기선 재구현하지 않고     */
/*     톤만 맞춘다). 360/390/430/768/1024/1440/1920 은 fluid 컨테이너(§tokens     */
/*     container-max:1200px, 상대단위)로 커버되며, 표는 아래 스크롤 안전망이       */
/*     실제 컬럼 수와 무관하게 항상 보호한다. */
/* ====================================================================== */

#kboard-default-list .kboard-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* KBoard 자체 카드 전환 브레이크포인트(max-width:768px, style.css 라인 1150)와 정확히
   맞춘다 — 767.98px 를 쓰면 정확히 768px 폭에서 목록은 이미 카드형인데 검색바/컨트롤만
   아직 데스크톱 가로배치로 남는 1px 불일치가 생긴다. */
@media (max-width: 768px) {
  #kboard-default-list .kboard-list-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  #kboard-default-document .kboard-detail {
    flex-direction: column;
    gap: var(--space-2);
  }

  .kboard-comments-default .kboard-comments-item .comments-list {
    margin-left: var(--space-4);
  }

  .kboard-form .kboard-control,
  #kboard-default-list .kboard-control {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  #kboard-default-list .kboard-list-header {
    align-items: center;
  }
}