/*
  Front 디자인 시스템 — 컴포넌트 (ds- 접두)
  · tokens.css 이후 로드. 기존 board- / site- / content- 클래스와 충돌 없음.
  · 스킨/게시판 CSS 간섭을 피하기 위해 각 컴포넌트는 필요한 속성을 명시적으로 지정한다
    (상속 의존 최소화). 전역 리셋(all:revert)은 쓰지 않는다.
*/

/* ===== Button ===== */
.ds-btn{
  -webkit-appearance:none; appearance:none; margin:0;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ds-space-2);
  height:var(--ds-control-height); padding:0 18px;
  font-family:var(--ds-font-family); font-size:var(--ds-font-body); font-weight:var(--ds-weight-semibold);
  line-height:1; letter-spacing:var(--ds-tracking-normal); white-space:nowrap;
  border:1px solid transparent; border-radius:var(--ds-radius-sm); cursor:pointer;
  transition:background-color var(--ds-duration-fast) var(--ds-ease-standard),
             border-color var(--ds-duration-fast) var(--ds-ease-standard),
             color var(--ds-duration-fast) var(--ds-ease-standard);
  text-decoration:none; box-sizing:border-box;
}
.ds-btn:focus-visible{ outline:none; box-shadow:var(--ds-focus-ring); }
.ds-btn:disabled,.ds-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.ds-btn--sm{ height:var(--ds-control-height-sm); font-size:var(--ds-font-sm); padding:0 var(--ds-space-3); }
.ds-btn--lg{ height:var(--ds-control-height-lg); font-size:var(--ds-font-body-lg); padding:0 var(--ds-space-6); }
.ds-btn--primary{ background:var(--ds-primary); color:var(--ds-on-primary); border-color:var(--ds-primary); }
.ds-btn--primary:hover{ background:var(--ds-primary-hover); border-color:var(--ds-primary-hover); }
.ds-btn--primary:active{ background:var(--ds-primary-active); border-color:var(--ds-primary-active); }
.ds-btn--secondary{ background:var(--ds-gray-100); color:var(--ds-text-strong); border-color:var(--ds-border-default); }
.ds-btn--secondary:hover{ background:var(--ds-gray-200); border-color:var(--ds-border-strong); }
.ds-btn--ghost{ background:transparent; color:var(--ds-text-default); }
.ds-btn--ghost:hover{ background:var(--ds-surface-hover); }
.ds-btn--danger{ background:var(--ds-red-600); color:#fff; border-color:var(--ds-red-600); }
.ds-btn--danger:hover{ background:var(--ds-red-700); border-color:var(--ds-red-700); }

/* ===== Alert / 인라인 메시지 (색+텍스트 병기) ===== */
.ds-alert{
  display:flex; gap:var(--ds-space-2); align-items:flex-start;
  padding:var(--ds-space-3) var(--ds-space-4); border:1px solid; border-radius:var(--ds-radius-sm);
  font-size:var(--ds-font-sm); line-height:var(--ds-leading-snug);
}
.ds-alert__label{ font-weight:var(--ds-weight-bold); flex:none; }
.ds-alert--info{ color:var(--ds-info-fg); background:var(--ds-info-bg); border-color:var(--ds-primary-border); }
.ds-alert--success{ color:var(--ds-success-fg); background:var(--ds-success-bg); border-color:var(--ds-green-600); }
.ds-alert--warn{ color:var(--ds-warning-fg); background:var(--ds-warning-bg); border-color:var(--ds-amber-600); }
.ds-alert--error{ color:var(--ds-danger-fg); background:var(--ds-danger-bg); border-color:var(--ds-red-600); }

/* ===== Form field ===== */
.ds-field{ display:flex; flex-direction:column; gap:var(--ds-space-1); margin-bottom:var(--ds-field-gap); }
.ds-field__label{ font-size:var(--ds-font-sm); font-weight:var(--ds-weight-semibold); color:var(--ds-text-strong); }
.ds-field__req{ color:var(--ds-red-600); margin-left:2px; }
.ds-field__reqtext{ font-size:var(--ds-font-caption); color:var(--ds-text-muted); font-weight:var(--ds-weight-regular); margin-left:var(--ds-space-1); }
.ds-input,.ds-textarea,.ds-select{
  height:var(--ds-control-height); padding:0 var(--ds-space-3);
  font-family:var(--ds-font-family); font-size:var(--ds-font-body); color:var(--ds-text-default);
  background:var(--ds-gray-0); border:1px solid var(--ds-border-default); border-radius:var(--ds-radius-sm);
  box-sizing:border-box; width:100%;
}
.ds-textarea{ height:auto; min-height:120px; padding:var(--ds-space-3); line-height:var(--ds-leading-normal); resize:vertical; }
.ds-input:focus,.ds-textarea:focus,.ds-select:focus{ outline:none; border-color:var(--ds-primary); box-shadow:var(--ds-focus-ring); }
.ds-input[readonly],.ds-textarea[readonly]{ background:var(--ds-surface-sunken); color:var(--ds-text-muted); cursor:default; }
.ds-field--invalid .ds-input,.ds-field--invalid .ds-textarea,.ds-field--invalid .ds-select,
.ds-input.is-invalid,.ds-select.is-invalid,.ds-textarea.is-invalid{ border-color:var(--ds-red-600); }

/* ===== Form list (상세 .ds-desclist와 통일된 입력 행 레이아웃) ===== */
.ds-formlist{ display:grid; grid-template-columns:180px 1fr; border-top:1px solid var(--ds-border-subtle); }
.ds-formlist__label{ padding:var(--ds-space-3) var(--ds-space-4); background:var(--ds-surface-sunken);
  font-size:var(--ds-font-sm); font-weight:var(--ds-weight-semibold); color:var(--ds-text-strong);
  border-bottom:1px solid var(--ds-border-subtle); display:flex; align-items:center; gap:4px; }
.ds-formlist__field{ padding:var(--ds-space-3) var(--ds-space-4); border-bottom:1px solid var(--ds-border-subtle);
  display:flex; flex-direction:column; gap:var(--ds-space-1); justify-content:center; }
.ds-formlist__req{ color:var(--ds-red-600); }
@media (max-width:640px){
  .ds-formlist{ grid-template-columns:1fr; }
  .ds-formlist__label{ border-bottom:0; padding-bottom:0; background:transparent; }
}
.ds-field__error{ font-size:var(--ds-font-caption); color:var(--ds-red-700); min-height:1em; }
.ds-field__error:empty{ display:none; }
.ds-field__help{ font-size:var(--ds-font-caption); color:var(--ds-text-muted); }

/* ===== Checkbox / Radio ===== */
.ds-choice-group{ display:flex; flex-wrap:wrap; gap:var(--ds-space-2) var(--ds-space-5); align-items:center; }
.ds-choice{ display:inline-flex; align-items:center; gap:var(--ds-space-2);
  font-size:var(--ds-font-body); color:var(--ds-text-default); cursor:pointer; line-height:1.2; }
.ds-choice input{ width:18px; height:18px; margin:0; accent-color:var(--ds-primary); cursor:pointer; }
.ds-choice input:focus-visible{ outline:none; box-shadow:var(--ds-focus-ring); border-radius:var(--ds-radius-xs); }

/* ===== Segment (단일선택 2~4개: 세그먼트 컨트롤) =====
   네이티브 <input type="radio">를 숨기고 <label>을 스타일링(Method A) — display:none 금지(포커스 유지).
   마크업: <div class="ds-segment"><label><input type="radio" name=".." value="..">텍스트</label> ...</div>
   관리자 .ncms-radio-seg와 동일 방식(:has). 최신 크로미움 대상. */
.ds-segment{ display:inline-flex; gap:2px; background:var(--ds-surface-sunken);
  border:1px solid var(--ds-border-subtle); border-radius:var(--ds-radius-md); padding:3px; }
.ds-segment label{ flex:1 0 auto; text-align:center; font-size:var(--ds-font-sm);
  font-weight:var(--ds-weight-semibold); color:var(--ds-text-muted); padding:6px 14px;
  border-radius:var(--ds-radius-sm); cursor:pointer; white-space:nowrap; line-height:1.3;
  transition:background .14s, color .14s; }
.ds-segment input{ position:absolute; opacity:0; pointer-events:none; }
.ds-segment label:has(input:checked){ background:var(--ds-surface-card); color:var(--ds-text-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.06); }
.ds-segment label:has(input:focus-visible){ box-shadow:var(--ds-focus-ring); }

/* ===== Fieldset (라디오/체크 그룹 라벨링) ===== */
.ds-fieldset{ border:0; padding:0; margin:0 0 var(--ds-field-gap); }
.ds-fieldset__legend{ padding:0; font-size:var(--ds-font-sm); font-weight:var(--ds-weight-semibold); color:var(--ds-text-strong); margin-bottom:var(--ds-space-1); }

/* ===== Badge / Tag ===== */
.ds-badge{ display:inline-flex; align-items:center; height:20px; padding:0 var(--ds-space-2);
  font-size:var(--ds-font-micro); font-weight:var(--ds-weight-semibold); border-radius:var(--ds-radius-xs);
  border:1px solid transparent; }
.ds-badge--primary{ background:var(--ds-primary-weak); color:var(--ds-primary); border-color:var(--ds-primary-border); }
.ds-badge--neutral{ background:var(--ds-gray-100); color:var(--ds-text-muted); border-color:var(--ds-border-subtle); }
.ds-badge--success{ background:var(--ds-success-bg); color:var(--ds-success-fg); }
.ds-badge--warn{ background:var(--ds-warning-bg); color:var(--ds-warning-fg); }
.ds-badge--danger{ background:var(--ds-danger-bg); color:var(--ds-danger-fg); }

/* ===== Table (list) ===== */
.ds-table{ width:100%; border-collapse:collapse; font-size:var(--ds-font-sm); background:var(--ds-gray-0);
  border-top:2px solid var(--ds-gray-800); }
.ds-table thead th{ height:var(--ds-control-height); padding:0 var(--ds-space-3); background:var(--ds-surface-sunken);
  color:var(--ds-text-strong); font-weight:var(--ds-weight-semibold); border-bottom:1px solid var(--ds-border-default);
  text-align:center; white-space:nowrap; }
.ds-table tbody td{ height:var(--ds-row-height); padding:0 var(--ds-space-3); border-bottom:1px solid var(--ds-border-subtle);
  color:var(--ds-text-default); }
.ds-table tbody tr:hover{ background:var(--ds-surface-hover); }
/* 정렬 규칙: 좌=텍스트 / 우=숫자 / 중앙=날짜·상태·번호 */
.ds-cell-text{ text-align:left; }
.ds-cell-num{ text-align:right; font-variant-numeric:tabular-nums; }
.ds-cell-center{ text-align:center; }
.ds-table__empty{ text-align:center; color:var(--ds-text-muted); padding:var(--ds-space-12) var(--ds-space-4); }

/* ===== Pagination ===== */
.ds-pagination{ display:flex; justify-content:center; align-items:center; gap:var(--ds-space-1); margin-top:var(--ds-space-6); }
.ds-pagination a,.ds-pagination span{ min-width:var(--ds-control-height-sm); height:var(--ds-control-height-sm);
  display:inline-flex; align-items:center; justify-content:center; padding:0 var(--ds-space-2);
  font-size:var(--ds-font-sm); color:var(--ds-text-default); border:1px solid var(--ds-border-subtle);
  border-radius:var(--ds-radius-sm); text-decoration:none; background:var(--ds-gray-0); box-sizing:border-box; }
.ds-pagination a:hover{ background:var(--ds-surface-hover); text-decoration:none; }
.ds-pagination a:focus-visible{ outline:none; box-shadow:var(--ds-focus-ring); }
.ds-pagination [aria-current="page"]{ background:var(--ds-primary); color:var(--ds-on-primary); border-color:var(--ds-primary); font-weight:var(--ds-weight-semibold); }

/* ===== Chips (분류/필터 토글) ===== */
.ds-chips{ display:flex; flex-wrap:wrap; gap:var(--ds-space-2); margin-bottom:var(--ds-space-4); }
.ds-chip{ display:inline-flex; align-items:center; height:32px; padding:0 var(--ds-space-4);
  font-size:var(--ds-font-sm); color:var(--ds-text-default); background:var(--ds-gray-100);
  border:1px solid var(--ds-border-subtle); border-radius:var(--ds-radius-pill); text-decoration:none; }
.ds-chip:hover{ background:var(--ds-gray-200); text-decoration:none; }
.ds-chip:focus-visible{ outline:none; box-shadow:var(--ds-focus-ring); }
.ds-chip.is-active{ background:var(--ds-primary); color:var(--ds-on-primary); border-color:var(--ds-primary); font-weight:var(--ds-weight-semibold); }

/* ===== Searchbar ===== */
.ds-searchbar{ display:flex; gap:var(--ds-space-2); align-items:center; justify-content:center; flex-wrap:wrap;
  padding:var(--ds-space-4); background:var(--ds-surface-sunken); border-radius:var(--ds-radius-sm); margin-bottom:var(--ds-space-5); }
.ds-searchbar .ds-select{ width:auto; min-width:120px; }
.ds-searchbar .ds-input{ width:auto; min-width:220px; }
/* 돋보기 아이콘 + X 지우기 내장 검색 입력 (검색 UX 규칙) */
.ds-search-field{ position:relative; display:inline-flex; align-items:center; }
.ds-search-field .ds-search-icon{ position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ds-text-muted); pointer-events:none; }
.ds-search-field .ds-input{ padding-left:34px; padding-right:30px; min-width:300px; }
.ds-search-clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); display:none;
  width:18px; height:18px; align-items:center; justify-content:center; border:none; background:none;
  cursor:pointer; color:var(--ds-text-muted); border-radius:50%; font-size:14px; line-height:1; }

/* ===== Panel / Card (폼·콘텐츠 컨테이너) ===== */
.ds-panel{ background:var(--ds-surface-card); border:1px solid var(--ds-border-subtle); border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-6); }

/* ===== Detail section (= panel + 제목) ===== */
.ds-section{ background:var(--ds-surface-card); border:1px solid var(--ds-border-subtle); border-radius:var(--ds-radius-lg);
  padding:var(--ds-space-6); margin-bottom:var(--ds-space-5); }
.ds-section__title{ font-size:var(--ds-font-h3); font-weight:var(--ds-weight-semibold); color:var(--ds-text-strong);
  padding-bottom:var(--ds-space-3); margin-bottom:var(--ds-space-4); border-bottom:2px solid var(--ds-gray-800); }
/* Definition list (라벨/값) */
.ds-desclist{ display:grid; grid-template-columns:180px 1fr; border-top:1px solid var(--ds-border-subtle); }
.ds-desclist dt{ padding:var(--ds-space-3) var(--ds-space-4); background:var(--ds-surface-sunken);
  font-weight:var(--ds-weight-semibold); color:var(--ds-text-strong); border-bottom:1px solid var(--ds-border-subtle); }
.ds-desclist dd{ padding:var(--ds-space-3) var(--ds-space-4); margin:0; color:var(--ds-text-default);
  border-bottom:1px solid var(--ds-border-subtle); }
@media (max-width:640px){ .ds-desclist{ grid-template-columns:1fr; } }

/* ===== Action bar (하단 제어) ===== */
.ds-actions{ display:flex; gap:var(--ds-space-2); align-items:center; margin-top:var(--ds-space-6); }
.ds-actions--end{ justify-content:flex-end; }     /* 목록·취소(좌) … 주버튼(우) */
.ds-actions--center{ justify-content:center; }
.ds-actions__spacer{ flex:1 1 auto; }             /* 삭제(좌 끝)와 나머지 물리적 거리 확보 */

/* ===== 게시글 뷰 (board view) ===== */
/* 렌더된 HTML 본문 */
.ds-prose{ font-size:var(--ds-font-body-lg); line-height:var(--ds-leading-relaxed); color:var(--ds-text-default); padding:var(--ds-space-5) 0; }
.ds-prose img{ max-width:100%; height:auto; }
.ds-prose a{ color:var(--ds-text-link); }
.ds-prose p{ margin:0 0 var(--ds-space-3); }
/* 메타(작성/등록/조회) */
.ds-postmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ds-space-2); font-size:var(--ds-font-sm); }
.ds-postmeta__label{ color:var(--ds-text-muted); }
.ds-postmeta__value{ color:var(--ds-text-default); font-weight:var(--ds-weight-medium); }
.ds-postmeta__sep{ width:1px; height:12px; background:var(--ds-border-default); }
/* 이전/다음 글 */
.ds-postnav{ border-top:1px solid var(--ds-border-subtle); border-bottom:1px solid var(--ds-border-subtle); margin:var(--ds-space-5) 0; }
.ds-postnav__row{ display:flex; align-items:center; gap:var(--ds-space-3); padding:var(--ds-space-3) var(--ds-space-2); }
.ds-postnav__row + .ds-postnav__row{ border-top:1px solid var(--ds-border-subtle); }
.ds-postnav__label{ display:inline-flex; align-items:center; gap:4px; min-width:66px; color:var(--ds-text-muted); font-size:var(--ds-font-sm); flex:none; }
.ds-postnav__link{ color:var(--ds-text-default); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-postnav__link:hover{ color:var(--ds-text-link); text-decoration:underline; }
.ds-postnav__empty{ color:var(--ds-text-subtle); font-size:var(--ds-font-sm); }
/* 첨부파일 */
.ds-filelist{ border:1px solid var(--ds-border-subtle); border-radius:var(--ds-radius-md); background:var(--ds-surface-sunken); padding:var(--ds-space-3) var(--ds-space-4); margin-bottom:var(--ds-space-4); }
.ds-filelist__head{ display:flex; align-items:center; gap:var(--ds-space-2); font-size:var(--ds-font-sm); font-weight:var(--ds-weight-semibold); color:var(--ds-text-strong); margin-bottom:var(--ds-space-2); }
.ds-filelist__count{ color:var(--ds-primary); }
.ds-filelist ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--ds-space-1); }
.ds-filelist li{ display:flex; align-items:center; gap:var(--ds-space-2); font-size:var(--ds-font-sm); }
.ds-filelist a{ color:var(--ds-text-link); text-decoration:none; }
.ds-filelist a:hover{ text-decoration:underline; }
.ds-filelist__size{ color:var(--ds-text-muted); font-size:var(--ds-font-caption); }
/* 댓글 */
.ds-comments{ margin-top:var(--ds-space-8); }
.ds-comments__head{ display:flex; align-items:center; gap:var(--ds-space-2); font-size:var(--ds-font-h3); font-weight:var(--ds-weight-semibold); color:var(--ds-text-strong); margin-bottom:var(--ds-space-4); padding-bottom:var(--ds-space-3); border-bottom:2px solid var(--ds-gray-800); }
.ds-comments__count{ color:var(--ds-primary); }
.ds-comment-list{ list-style:none; margin:0 0 var(--ds-space-5); padding:0; }
.ds-comment{ display:flex; gap:var(--ds-space-3); padding:var(--ds-space-4) 0; border-bottom:1px solid var(--ds-border-subtle); }
.ds-comment__avatar{ flex:none; width:36px; height:36px; border-radius:50%; background:var(--ds-gray-200); color:var(--ds-text-muted); display:flex; align-items:center; justify-content:center; font-size:var(--ds-font-sm); font-weight:var(--ds-weight-semibold); }
.ds-comment__avatar.is-official{ background:var(--ds-primary); color:var(--ds-on-primary); }
.ds-comment__body{ flex:1; min-width:0; }
.ds-comment__head{ display:flex; align-items:center; gap:var(--ds-space-2); margin-bottom:var(--ds-space-1); flex-wrap:wrap; }
.ds-comment__author{ font-weight:var(--ds-weight-semibold); color:var(--ds-text-strong); font-size:var(--ds-font-sm); }
.ds-comment__date{ color:var(--ds-text-muted); font-size:var(--ds-font-caption); }
.ds-comment__content{ margin:0; color:var(--ds-text-default); font-size:var(--ds-font-sm); line-height:var(--ds-leading-normal); white-space:pre-line; }
.ds-comment__del{ margin-left:auto; border:none; background:none; color:var(--ds-text-subtle); font-size:var(--ds-font-caption); cursor:pointer; padding:0; }
.ds-comment__del:hover{ color:var(--ds-danger-fg); }
.ds-comment-empty{ color:var(--ds-text-muted); text-align:center; padding:var(--ds-space-8) 0; }
.ds-comment-write{ border:1px solid var(--ds-border-subtle); border-radius:var(--ds-radius-md); padding:var(--ds-space-4); background:var(--ds-surface-card); }
.ds-comment-write__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--ds-space-3); margin-top:var(--ds-space-2); flex-wrap:wrap; }
.ds-comment-write__notice{ color:var(--ds-text-subtle); font-size:var(--ds-font-caption); }