/* ============================================================
   HANCOT PLATFORM - SHARED PAGE COMPONENTS
   파일명: hancot-components.css

   목적: 여러 화면에서 반복 사용하는 검색·카테고리·목록·상태·페이지 이동 UI
   전제: hancot-common.css를 먼저 로드해야 색상 변수가 적용됨
   주의: 기존 Bootstrap, 갤러리 전용 클래스는 변경하지 않음

   목차
   01. 공통 섹션 제목
   02. 검색 패널
   03. 검색 필터·카테고리
   04. 결과 요약·정렬
   05. 기업·학교 목록 카드
   06. 서비스 항목 카드
   07. 상태 표시
   08. 페이지 이동
   09. 빈 결과·안내 메시지
   10. 상세 정보 행
   11. 모바일 반응형
   12. 움직임 감소 설정
   ============================================================ */

/* 01. 공통 섹션 제목: 아래 여백은 margin-bottom에서 변경 */
.hc-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.hc-section-title { margin:0; color:var(--hc-text, #1e293b); font-size:1.25rem; font-weight:700; }
.hc-section-subtitle { margin:4px 0 0; color:var(--hc-muted, #64748b); font-size:.875rem; }
.hc-section-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

/* 02. 검색 패널: 검색 버튼 너비는 .hc-search-submit에서 변경 */
.hc-search-panel { padding:16px; background:#fff; border:1px solid var(--hc-border, #e2e8f0); border-radius:var(--hc-radius, 12px); }
.hc-search-form { display:flex; align-items:stretch; gap:8px; min-width:0; }
.hc-search-field { flex:1 1 auto; min-width:0; }
.hc-search-field .hc-input { width:100%; }
.hc-search-submit { flex:0 0 auto; min-width:88px; }
.hc-search-hint { margin:8px 0 0; color:var(--hc-muted, #64748b); font-size:.8125rem; }

/* 03. 검색 필터·카테고리: 줄바꿈 허용, 선택 상태는 .is-active */
.hc-filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
.hc-filter-label { color:var(--hc-muted, #64748b); font-size:.875rem; font-weight:600; }
.hc-filter-options { display:flex; flex-wrap:wrap; gap:8px; }
.hc-filter-chip { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:5px 12px; border:1px solid var(--hc-border, #e2e8f0); border-radius:999px; background:#fff; color:var(--hc-text, #1e293b); font:inherit; font-size:.875rem; text-decoration:none; cursor:pointer; }
.hc-filter-chip:hover { border-color:var(--hc-primary, #2563eb); color:var(--hc-primary, #2563eb); }
.hc-filter-chip.is-active, .hc-filter-chip[aria-pressed="true"] { background:var(--hc-primary-soft, #eff6ff); border-color:var(--hc-primary, #2563eb); color:var(--hc-primary-hover, #1d4ed8); font-weight:700; }

/* 04. 검색 결과 요약·정렬: 결과 건수와 정렬 선택을 같은 행에 표시 */
.hc-results-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:16px 0 12px; }
.hc-results-count { margin:0; color:var(--hc-muted, #64748b); font-size:.875rem; }
.hc-results-count strong { color:var(--hc-primary, #2563eb); font-weight:700; }
.hc-sort-control { display:flex; align-items:center; gap:8px; }
.hc-sort-control label { white-space:nowrap; font-size:.875rem; color:var(--hc-muted, #64748b); }
.hc-sort-control .hc-select { width:auto; min-width:130px; }

/* 05. 기업·학교 목록 카드: 기존 company-gallery-table은 변경하지 않음 */
.hc-entity-list { display:grid; gap:12px; }
.hc-entity-card { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:16px; align-items:center; min-width:0; padding:16px; background:#fff; border:1px solid var(--hc-border, #e2e8f0); border-radius:var(--hc-radius, 12px); }
.hc-entity-main { min-width:0; }
.hc-entity-title { margin:0 0 6px; color:var(--hc-text, #1e293b); font-size:1rem; font-weight:700; overflow-wrap:anywhere; }
.hc-entity-title a { color:inherit; text-decoration:none; }
.hc-entity-title a:hover { color:var(--hc-primary, #2563eb); text-decoration:underline; }
.hc-entity-description { margin:0; color:var(--hc-muted, #64748b); font-size:.875rem; line-height:1.6; overflow-wrap:anywhere; }
.hc-entity-meta { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:10px; color:var(--hc-muted, #64748b); font-size:.8125rem; }
.hc-entity-actions { display:flex; align-items:center; gap:8px; }
/* QR 크기: 43px. 갤러리 전용 QR은 기존 CSS가 관리 */
.hc-entity-qr { display:block; width:43px; height:43px; object-fit:contain; }

/* 06. 서비스 항목 카드: 가격이 없으면 가격 영역 생략 가능 */
.hc-service-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.hc-service-card { min-width:0; padding:16px; background:#fff; border:1px solid var(--hc-border, #e2e8f0); border-radius:var(--hc-radius, 12px); }
.hc-service-name { margin:0 0 8px; font-size:1rem; font-weight:700; overflow-wrap:anywhere; }
.hc-service-summary { margin:0 0 12px; color:var(--hc-muted, #64748b); font-size:.875rem; line-height:1.6; }
.hc-service-price { margin:0; color:var(--hc-text, #1e293b); font-weight:700; }
.hc-service-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* 07. 상태 표시: 입력상태 배지(.hc-badge)와 용도가 다름 */
.hc-status { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.75rem; font-weight:700; white-space:nowrap; }
.hc-status-active { background:#ecfdf5; color:#047857; }
.hc-status-pending { background:#fffbeb; color:#92400e; }
.hc-status-closed { background:#f1f5f9; color:#475569; }
.hc-status-error { background:#fef2f2; color:#b91c1c; }

/* 08. 페이지 이동: 현재 페이지는 .is-current 또는 aria-current="page" */
.hc-pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:24px 0; }
.hc-page-link { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; padding:6px 10px; border:1px solid var(--hc-border, #e2e8f0); border-radius:8px; background:#fff; color:var(--hc-text, #1e293b); text-decoration:none; }
.hc-page-link:hover { border-color:var(--hc-primary, #2563eb); color:var(--hc-primary, #2563eb); }
.hc-page-link.is-current, .hc-page-link[aria-current="page"] { background:var(--hc-primary, #2563eb); border-color:var(--hc-primary, #2563eb); color:#fff; font-weight:700; }
.hc-page-link[aria-disabled="true"] { opacity:.45; pointer-events:none; }

/* 09. 빈 결과·안내 메시지: 검색 결과 0건 등에 사용 */
.hc-empty-state { padding:40px 20px; text-align:center; border:1px dashed var(--hc-border, #e2e8f0); border-radius:var(--hc-radius, 12px); background:#fff; }
.hc-empty-title { margin:0 0 8px; font-size:1.0625rem; font-weight:700; }
.hc-empty-description { margin:0; color:var(--hc-muted, #64748b); font-size:.875rem; }
.hc-notice { padding:12px 16px; border-left:3px solid var(--hc-primary, #2563eb); border-radius:8px; background:var(--hc-primary-soft, #eff6ff); color:var(--hc-text, #1e293b); font-size:.875rem; }

/* 10. 상세 정보 행: 라벨/값 2열. 긴 주소·URL은 자동 줄바꿈 */
.hc-detail-list { margin:0; }
.hc-detail-row { display:grid; grid-template-columns:150px minmax(0, 1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--hc-border, #e2e8f0); }
.hc-detail-row dt { margin:0; color:var(--hc-muted, #64748b); font-weight:600; }
.hc-detail-row dd { margin:0; min-width:0; overflow-wrap:anywhere; }

/* 11. 모바일 대응: 768px 이하 1열, 서비스는 태블릿에서 2열 */
@media (max-width:991.98px) { .hc-service-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:767.98px) {
  .hc-section-heading { align-items:flex-start; flex-direction:column; }
  .hc-search-form { flex-wrap:wrap; }
  .hc-search-field { flex-basis:100%; }
  .hc-search-submit { width:100%; }
  .hc-entity-card { grid-template-columns:minmax(0, 1fr); }
  .hc-entity-actions { justify-content:flex-start; }
  .hc-service-grid { grid-template-columns:1fr; }
  .hc-detail-row { grid-template-columns:1fr; gap:4px; }
  .hc-results-toolbar { align-items:flex-start; }
}

/* 12. 접근성: 키보드 탐색 시 초점 표시, 움직임 감소 설정 존중 */
.hc-filter-chip:focus-visible, .hc-page-link:focus-visible, .hc-entity-title a:focus-visible { outline:3px solid rgb(37 99 235 / 30%); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .hc-filter-chip, .hc-page-link { scroll-behavior:auto; transition:none; } }

/* ============================================================
   끝: hancot-components.css
   ============================================================ */