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

/* ===== Board title (대제목, breadcrumb 없을 때 프래그먼트 자체 출력) ===== 사용처: list·card 게시판 목록/글쓰기/상세보기 공통 */
.ds-board-title{ font-size:var(--ds-font-display); font-weight:var(--ds-weight-bold); color:var(--ds-text-strong); margin:0 0 var(--ds-space-4); }
@media (max-width:767px){ .ds-board-title{ font-size:var(--ds-font-h1); } }
@media (max-width:480px){ .ds-board-title{ font-size:var(--ds-font-h2); } }

/* ===== Button ===== 사용처: 전 게시판 공통(list·card·consult·qna·faq·reserve·calendar) — 검색·글쓰기·삭제·목록 버튼 등 */
.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); color:var(--ds-on-primary); }
.ds-btn--primary:active{ background:var(--ds-primary-active); border-color:var(--ds-primary-active); color:var(--ds-on-primary); }
.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); color:var(--ds-text-strong); }
.ds-btn--ghost{ background:transparent; color:var(--ds-text-default); }
.ds-btn--ghost:hover{ background:var(--ds-surface-hover); color:var(--ds-text-default); }
.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); color:#fff; }
.ds-btn--dark{ background:var(--ds-gray-900); color:#fff; border-color:var(--ds-gray-900); }
.ds-btn--dark:hover{ background:var(--ds-gray-800); border-color:var(--ds-gray-800); color:#fff; }

/* ===== Alert / 인라인 메시지 (색+텍스트 병기) ===== 사용처: 글쓰기/답변 폼(list·consult·reserve write) 안내·경고 메시지 */
.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 ===== 사용처: 글쓰기/답변 폼 전체(list·consult·reserve write, list answer) — 입력창·셀렉트·textarea 기본 스타일 */
.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와 통일된 입력 행 레이아웃) ===== 사용처: list·consult·reserve 글쓰기/답변 폼의 라벨-입력 행 */
.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-body); font-weight:var(--ds-weight-semibold); color:var(--ds-text-strong);
  border-right:1px solid var(--ds-border-subtle); 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);
  font-size:var(--ds-font-body); 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; border-right:0; padding-bottom:0; background:transparent; }
}
/* 한 행에 라벨/값 2쌍 배치(예: 성별+연령대) — .ds-formlist 직계 자식으로 두면 전체 폭을 차지하며 내부에서 2단 분할.
   column-gap으로 라벨-입력 사이, 두 쌍 사이 모두 여백을 주므로 기본 .ds-formlist의 맞닿은 테두리 스타일은
   여기서 해제(border-right가 gap과 겹쳐 어색해 보이는 것 방지). */
.ds-formlist__row2{ grid-column:1 / -1; display:grid; grid-template-columns:180px 1fr 180px 1fr; column-gap:var(--ds-space-4); }
.ds-formlist__row2 .ds-formlist__label{ border-right:0; }
@media (max-width:640px){ .ds-formlist__row2{ grid-template-columns:1fr; } }
.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 ===== 사용처: list·consult·reserve 글쓰기/답변 폼(비밀글 여부 등 단일·다중 선택) */
.ds-choice-group{ display:flex; flex-wrap:wrap; gap:var(--ds-space-2) var(--ds-space-5); align-items:center; }
.ds-choice-group + .ds-choice-group{ margin-top:var(--ds-space-2); }
.ds-choice-group__label{ font-size:var(--ds-font-caption); font-weight:600; color:var(--ds-text-muted); }
.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개: 세그먼트 컨트롤) ===== 사용처: consult 글쓰기/상세(답변 상태 등) 전용
   네이티브 <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 (라디오/체크 그룹 라벨링) ===== 사용처: Checkbox/Radio와 동일(list·consult·reserve 폼) */
.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 ===== 사용처: 전 게시판 목록 공통 — 공지·분류·비밀·N뱃지(list·card·consult·qna·faq),
   답변대기/완료 뱃지(consult·qna) */
.ds-badge{ display:inline-flex; align-items:center; height:auto; padding:5px 15px;
  font-size:1.3rem; font-weight:var(--ds-weight-semibold); border-radius:50px;
  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); }
/* 알약형 변형 — card 게시판 .cb-badge-category와 동일한 디자인. 사용처: consult 답변완료/대기 뱃지(목록·상세 공통) */
.ds-badge-pill{ height:auto; font-size:var(--ds-font-caption); padding:3px 15px; border-radius:var(--ds-radius-pill); }
.ds-badge-pill.ds-badge--primary{ background:var(--ds-primary); border-color:var(--ds-primary); color:var(--ds-on-primary); }

/* ===== Table (list) ===== 사용처: 표형 목록 게시판 전체 — list(공지)·consult(온라인상담/방문상담예약)·qna·faq·reserve.
   card(센터소식/미디어자료)는 그리드 레이아웃이라 표는 안 쓰고, 빈 상태 문구(.ds-table__empty)만 공유 */
.ds-table{ width:100%; border-collapse:collapse; font-size:var(--ds-font-table); background:var(--ds-gray-0);
  border-top:2px solid var(--ds-gray-800); }
@media (max-width:1024px){ .ds-table{ font-size:var(--ds-font-body-lg); } }
/* font-size/background/text-transform은 관리자(admin-layout.css)의 전역 table/thead th/tbody td
   셀렉터가 채워 넣지 못하도록 명시적으로 선언(상속 값을 강제해 관리자 화면에서도 깨지지 않게) */
.ds-table thead th{ padding:var(--ds-space-4) var(--ds-space-3);
  color:var(--ds-text-strong); font-weight:var(--ds-weight-semibold); border-bottom:1px solid #ddd;
  text-align:center; white-space:nowrap; font-size:inherit; background:transparent; text-transform:none; }
.ds-table tbody td{ padding:var(--ds-space-5) var(--ds-space-3); border-bottom:1px solid #ddd;
  color:var(--ds-text-default); font-size:inherit; }
.ds-table tbody tr{ height:83px; }
.ds-table tbody tr:hover{ background:var(--ds-surface-hover); }
/* 제목: 굵게 + 호버 시 밑줄이 자라나는 효과(참고 디자인의 목록 타이틀 인터랙션) */
.ds-cell-text a{ position:relative; font-weight:var(--ds-weight-semibold); }
.ds-cell-text a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:currentColor; transition:width var(--ds-duration-base) var(--ds-ease-standard); }
.ds-cell-text a:hover::after{ width:100%; }
/* 정렬 규칙: 좌=텍스트 / 우=숫자 / 중앙=날짜·상태·번호 */
.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); }
/* 반응형: 목록 테이블 — 767px 이하에서는 컬럼을 숨기지 않고 폰트·패딩을 줄여 뷰포트 폭에 맞춘다.
   템플릿이 부여한 min-width(680/640px 등) 강제도 해제. 그래도 안 맞으면 상위 wrapper의
   overflow-x:auto가 가로 스크롤로 받아준다. */
@media (max-width:767px){
  .ds-table{ min-width:0 !important; font-size:1.3rem; }
  .ds-table thead th{ padding:var(--ds-space-2) var(--ds-space-1); }
  .ds-table tbody td{ padding:var(--ds-space-3) var(--ds-space-1); }
}

/* 컬럼 폭 유틸 — 표 헤더(th)에 style="width:Npx"를 직접 박는 대신 사용. 4단계 고정폭 스케일로
   페이지마다 제각각이던 값(예: 90/110/150/170px)을 통일. 사용처: course(강좌 목록·내 신청내역) 등
   게시판이 아닌 콘텐츠 표. 게시판(list·consult·qna·faq·reserve)은 컬럼폭을 개별 지정하지 않으므로 무관. */
.ds-col-xs{ width:80px; }
.ds-col-sm{ width:120px; }
.ds-col-md{ width:160px; }
.ds-col-lg{ width:200px; }

/* 넓은 표(컬럼이 많아 767px 이상에서도 가로 스크롤이 필요한 경우) 최소폭 — style="min-width:Npx" 대신
   사용. 767px 이하에서는 위 .ds-table 미디어쿼리가 다시 0으로 풀어준다. */
.ds-table--wide{ min-width:760px; }

/* 표 가로 스크롤 래퍼 — 컬럼이 많아 좁은 화면에서 표가 넘칠 때 페이지 전체가 아니라 표만
   가로 스크롤되게 감싼다. style="overflow-x:auto" 대신 사용. */
.ds-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===== Pagination ===== 사용처: 전 게시판 목록 공통(list·card·consult·qna·faq·reserve) — 페이지 번호 이동 */
.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); }
/* 처음/이전/다음/마지막 버튼(.ds-pagination__nav) — 데스크톱은 기호(«‹›»)만 보여주는 컴팩트 버튼,
   모바일은 강조색 아이콘 + 한글 라벨을 함께 보여주는 큼직한(터치 친화) 버튼으로 확장한다.
   이동 불가능한 버튼도 감추지 않고 .is-disabled(회색 비활성)로 남겨, 좌우 어느 한쪽 버튼만 남아
   화면이 치우쳐 보이던 문제(허접함의 주된 원인)를 없애고 항상 좌우 대칭 배치를 유지한다. */
/* 버튼 안의 아이콘/텍스트 span도 위 ".ds-pagination span" 규칙(테두리·배경·고정크기)을 자손선택자로
   물려받아 바깥 a 태그 테두리 안에 또 하나의 테두리 박스가 겹쳐 보이는 이중 테두리 현상이 있었다 —
   여기서 초기화한다(단독 클래스 선택자는 ".ds-pagination span"보다 명시도가 낮아 무시되므로
   ".ds-pagination .ds-pagination__nav-*" 형태로 명시도를 맞춘다). */
.ds-pagination .ds-pagination__nav-icon,
.ds-pagination .ds-pagination__nav-text{ border:none; background:none; min-width:auto; height:auto; padding:0; }
.ds-pagination__nav{ gap:var(--ds-space-1); }
.ds-pagination .ds-pagination__nav-text{ display:none; }
.ds-pagination .ds-pagination__nav-icon{ color:var(--ds-primary); }
.ds-pagination a.ds-pagination__nav:hover{ background:var(--ds-primary-weak); color:var(--ds-primary); border-color:var(--ds-primary-border); }
.ds-pagination__nav.is-disabled{ color:var(--ds-text-subtle); cursor:not-allowed; opacity:.5;
  background:var(--ds-surface-sunken); border-style:dashed; }
.ds-pagination__nav.is-disabled .ds-pagination__nav-icon{ color:var(--ds-text-subtle); }
@media (max-width:767px){
  .ds-pagination{ justify-content:space-between; gap:var(--ds-space-1); background:var(--ds-surface-card);
    border:1px solid var(--ds-border-subtle); border-radius:var(--ds-radius-lg); box-shadow:var(--ds-shadow-sm);
    padding:var(--ds-space-2); }
  .ds-pagination a:not(.ds-pagination__nav){ display:none; }  /* 번호 링크 숨김 */
  .ds-pagination [aria-current="page"]{ display:none; }        /* 현재 페이지 칩 숨김 */
  /* 버튼 각각이 자기 테두리를 갖고 있으면 바깥 카드 테두리 안에 또 테두리 박스들이 늘어서
     보여 이중 테두리처럼 보인다 — 모바일에서는 버튼 테두리를 없애 카드 하나로 통일하고,
     버튼 사이 구분은 여백(gap)만으로 준다. (일반 a/span 규칙보다 명시도를 높여 덮어씀) */
  .ds-pagination a.ds-pagination__nav,
  .ds-pagination span.ds-pagination__nav{ flex:1; height:46px; padding:0 var(--ds-space-2);
    font-size:1.6rem; font-weight:var(--ds-weight-semibold); border:none; background:none; border-radius:var(--ds-radius-md); }
  .ds-pagination .ds-pagination__nav-icon{ font-size:1.6rem; }
  .ds-pagination .ds-pagination__nav-text{ display:inline; }
  /* 모바일은 버튼 테두리를 없애 카드 하나로 통일하지만(위 규칙), 비활성 버튼은 옅은 배경(sunken)을
     남겨 opacity·아이콘 색만으로는 약했던 활성/비활성 구분을 카드 안에서도 눈에 띄게 한다. */
  .ds-pagination span.ds-pagination__nav.is-disabled{ background:var(--ds-surface-sunken); }
}

/* ===== Chips (알약형 분류 필터) ===== 사용처: list·consult·qna·faq·reserve 게시판 분류 필터(.ds-chips/.ds-chip).
   card 게시판(미디어자료 등) 서브탭은 드롭다운형(.cb-tabbar/.cb-tab)으로 별도 구현 —
   front/board/card/list.html 페이지 전용 <style>에 위치, 이 공용 정의를 공유하지 않음. */
.ds-chips{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px;
  width:fit-content; max-width:100%; margin:0 auto var(--ds-space-4);
  padding:6px; background:var(--ds-surface-sunken); border-radius:var(--ds-radius-pill); }
.ds-chip{ display:inline-flex; align-items:center; justify-content:center;
  padding:12px 28px; border:none; background:none; border-radius:var(--ds-radius-pill);
  font-size:var(--ds-font-h2); font-weight:700; color:var(--ds-text-muted);
  text-decoration:none; white-space:nowrap; transition:background .15s, color .15s; }
.ds-chip:hover{ 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); }
@media(max-width:767px){ .ds-chip{ font-size:var(--ds-font-body-lg); padding:10px 20px; } }

/* ===== Searchbar ===== 사용처: 검색 있는 목록 게시판 전체(list·card·consult·qna·faq). reserve는 검색 없음(미사용) */
.ds-searchbar{ display:flex; gap:var(--ds-space-3); align-items:center; justify-content:center; flex-wrap:wrap;
  padding:var(--ds-space-5) var(--ds-space-4); background:var(--ds-surface-sunken); border-radius:var(--ds-radius-sm);
  margin:0 0 30px; }
.ds-searchbar .ds-select{ width:auto; min-width:130px; height:var(--ds-control-height-lg); font-size:var(--ds-font-body-lg); }
.ds-searchbar .ds-input{ width:auto; min-width:240px; height:var(--ds-control-height-lg); font-size:var(--ds-font-body-lg); }
.ds-searchbar .ds-btn{ height:var(--ds-control-height-lg); font-size:var(--ds-font-body-lg); padding:0 var(--ds-space-5); }
/* 767px 이하: 인풋·선택·버튼 높이가 페이지별 강제값(48px 등)을 쓰더라도 45px을 넘지 않도록 상한 */
@media (max-width:767px){
  .ds-searchbar .ds-select,
  .ds-searchbar .ds-input,
  .ds-searchbar .ds-btn{ max-height:45px; }
}
/* 돋보기 아이콘 + X 지우기 내장 검색 입력 (검색 UX 규칙) */
.ds-search-field{ position:relative; display:inline-flex; align-items:center; }
.ds-search-field .ds-search-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--ds-text-muted); pointer-events:none; }
.ds-search-field .ds-input{ padding-left:38px; padding-right:34px; min-width:300px; }
@media (max-width:480px){ .ds-search-field .ds-input{ min-width:0; } }
.ds-search-clear{ position:absolute; right:10px; top:50%; transform:translateY(-50%); display:none;
  width:20px; height:20px; align-items:center; justify-content:center; border:none; background:none;
  cursor:pointer; color:var(--ds-text-muted); border-radius:50%; font-size:1.5rem; line-height:1; }

/* ===== Panel / Card (폼·콘텐츠 컨테이너) ===== 사용처: 글쓰기/답변/상세 폼 감싸는 카드(list·consult·reserve write) */
.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 + 제목) ===== 사용처: 상세보기·답변 폼 섹션(consult view/write, list answer) — 라벨/값 정의 목록(.ds-desclist)은 consult 상세(view)에서만 사용 */
.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-size:var(--ds-font-body); 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; font-size:var(--ds-font-body); color:var(--ds-text-default);
  border-bottom:1px solid var(--ds-border-subtle); }
@media (max-width:640px){ .ds-desclist{ grid-template-columns:1fr; } }
/* 한 행에 라벨/값 2쌍 배치(예: 성별+연령대) — .ds-desclist 직계 자식으로 두면 전체 폭을 차지하며 내부에서 2단 분할 */
.ds-desclist__row2{ grid-column:1 / -1; display:grid; grid-template-columns:180px 1fr 180px 1fr; }
@media (max-width:640px){ .ds-desclist__row2{ grid-template-columns:1fr; } }

/* ===== Action bar (하단 제어) ===== 사용처: 전 게시판 공통(list·card·consult·qna·faq·reserve·calendar) — 글쓰기/선택삭제/목록·저장 버튼 줄 */
.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 본문 — 사용처: list·consult 상세보기(view), list 답변(answer)·글쓰기(write) 미리보기, faq 목록 내 답변(아코디언).
   기본은 내용 길이만큼만 높이를 차지한다 — 최소 높이는 본문 묶음 wrapper(.ds-post-body)에서만 별도 지정. */
.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); }
/* 본문(글 원문) + 첨부이미지 묶음 wrapper 전용 — 짧은 글도 읽기 영역이 허전하지 않도록 최소 높이 확보.
   사용처: list·consult 상세보기(view) 본문 wrapper(.ds-post-body) */
.ds-post-body{ min-height:340px; }
/* 제목(중앙정렬) — 사용처: list·consult 상세보기(view) 헤더 */
.ds-view-titlebar{ display:flex; flex-direction:column; align-items:center; gap:var(--ds-space-2); text-align:center; padding:30px 20px; }
.ds-view-title{ font-size:var(--ds-font-h1); font-weight:var(--ds-weight-bold); color:var(--ds-text-strong); margin:0; line-height:var(--ds-leading-tight); }
@media (max-width:767px){ .ds-view-title{ font-size:var(--ds-font-h2); } }
@media (max-width:480px){ .ds-view-title{ font-size:var(--ds-font-h3); } }
/* 메타 바(작성/등록일/조회) — 사용처: list·consult 상세보기(view) 헤더 하단 */
.ds-view-metabar{ display:flex; align-items:center; justify-content:space-between; gap:var(--ds-space-3); flex-wrap:wrap; border-top:1px solid var(--ds-border-default); border-bottom:1px solid var(--ds-border-default); padding:15px 20px; }
/* 메타(작성/등록/조회) — 사용처: list·consult 상세보기(view) 상단 */
.ds-postmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--ds-space-2); font-size:var(--ds-font-body); }
.ds-postmeta__item{ display:inline-flex; align-items:center; gap:var(--ds-space-2); }
.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); }
/* 480px 이하: 작성/등록일/조회를 한 줄씩 세로로 쌓아 표시 — 구분선은 줄바꿈 레이아웃과 안 맞아 숨김 */
@media (max-width:480px){
  .ds-postmeta{ flex-direction:column; align-items:flex-start; gap:var(--ds-space-1); }
  .ds-postmeta__sep{ display:none; }
  /* 라벨(작성·등록일·조회) 폭을 통일해 값 컬럼이 세로로 나란히 정렬되도록 */
  .ds-postmeta__item{ width:100%; }
  .ds-postmeta__label{ display:inline-block; width:52px; flex:none; }
}
/* 게시글 이동 nav(다음글/이전글 + 수정/삭제/목록) — 사용처: list·consult 상세보기(view) 본문 하단 */
.ds-view-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid var(--ds-border-subtle); padding:30px 0; }
.ds-view-nav__group{ display:flex; gap:10px; flex-wrap:wrap; }
.ds-view-nav__row{ display:flex; gap:10px; }
.ds-view-nav .ds-btn{ font-size:1.7rem; height:50px; }
/* 767px 이하: 버튼을 전체너비로, 서로 붙지 않게 10px 간격을 두고 세로 스택 */
@media (max-width:767px){
  .ds-view-nav{ flex-direction:column; align-items:stretch; gap:10px; }
  .ds-view-nav .ds-btn{ height:46px; font-size:1.6rem; }
  .ds-view-nav__group{ flex-direction:column; gap:10px; width:100%; }
  .ds-view-nav__group > .ds-btn,
  .ds-view-nav__group > form{ width:100%; }
  .ds-view-nav__group > form .ds-btn{ width:100%; }
  /* 수정/삭제(ds-view-nav__row로 묶인 항목)는 반반 나눠 한 줄로 배치.
     flex:1 1 0(그로우 기반 분배)은 <a>(수정)와 <form>(삭제 버튼을 감싼 폼)의 최소 콘텐츠 폭이
     서로 달라 정확히 반반으로 갈리지 않을 수 있어, calc(50% - gap)로 폭을 고정한다. */
  .ds-view-nav__row{ display:flex; gap:10px; width:100%; }
  .ds-view-nav__row > .ds-btn,
  .ds-view-nav__row > form{ flex:0 0 calc(50% - 5px); width:calc(50% - 5px); box-sizing:border-box; }
  .ds-view-nav__row > form .ds-btn{ width:100%; }
}

/* 첨부파일 — 사용처: list·consult 상세보기(view) */
.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); }
/* 댓글 — 사용처: list·consult 상세보기(view)에서만 사용(_components/post-comments 프래그먼트) */
.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__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-body); }
.ds-comment__date{ color:var(--ds-text-muted); font-size:var(--ds-font-body); }
.ds-comment__content{ margin:0; color:var(--ds-text-default); font-size:var(--ds-font-body); line-height:var(--ds-leading-normal); white-space:pre-line; }
.ds-comment__del{ margin-left:auto; border:1px solid var(--ds-border-default); background:var(--ds-gray-100); color:var(--ds-text-muted);
  font-size:var(--ds-font-body); cursor:pointer; padding:2px 10px; border-radius:var(--ds-radius-sm); }
.ds-comment__del:hover{ background:var(--ds-danger-bg); color:var(--ds-danger-fg); border-color:var(--ds-red-600); }
.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:30px 20px; background:var(--ds-surface-card); font-size:1.6rem; }
.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); }