/* ==========================================================================
   공통 컴포넌트
   - 두 화면 이상에서 쓰는 UI 조각을 둔다.
   - Figma Components 정의를 받으면 이 파일에 추가·보완한다.
   ========================================================================== */

/* Pill Badge — Topbar 오른쪽 (Label + 아이콘) ----------------------------- */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 32px;
  padding: 0 var(--spacing-4);
  border-radius: 32px; /* 알약 모양 — 높이의 절반 이상 */
  background: var(--color-primary-50);
  color: var(--color-gray-100);
}
.badge-pill__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.badge-pill__icon svg { width: 100%; height: 100%; }

/* Chip — 버전 표시 등 ---------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-2);
  background: var(--color-secondary-20);
  color: var(--color-text-main);
}
/* 누를 수 있는 칩 */
.chip--button {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.chip--button:hover { background: var(--color-secondary-30); }
.chip--button:focus-visible { outline: 2px solid var(--color-primary-30); outline-offset: 2px; }

/* ==========================================================================
   화면 공통 컴포넌트 — 목록(조회) 화면 기준
   ========================================================================== */

/* 콘텐츠 박스 — 화면 내용을 담는 흰색 카드 */
.content-box {
  border-radius: var(--radius-5); /* 12px */
  background: var(--color-bg-base);
  box-shadow: var(--shadow-normal);
}

/* Page Header — 화면 제목 + 오른쪽 도구 ----------------------------------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}
.page-header__title { margin: 0; color: var(--color-text-main); }
.page-header__tools {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* Checkbox ---------------------------------------------------------------- */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-text-main);
  cursor: pointer;
}
.checkbox input,
.check {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--color-primary-50);
  cursor: pointer;
}

/* Switch — 켜기/끄기 ------------------------------------------------------ */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  height: 28px;
  padding: 0 var(--spacing-1) 0 var(--spacing-4);
  border: 1px solid var(--color-border-default);
  border-radius: 28px; /* 알약 모양 */
  background: var(--color-bg-base);
  font-family: inherit;
  color: var(--color-text-detail);
  cursor: pointer;
}
.switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background: var(--color-gray-30);
  transition: background-color 0.15s ease;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg-base);
  box-shadow: var(--shadow-normal);
  transition: transform 0.15s ease;
}
.switch[aria-checked="true"] .switch__track { background: var(--color-primary-50); }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--color-primary-30); outline-offset: 2px; }

/* Icon Button — 아이콘만 있는 버튼 --------------------------------------- */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-3);
  background: none;
  font-family: inherit;
  color: var(--color-icon-main);
  cursor: pointer;
}
.btn-icon:hover { background: var(--color-bg-muted); }
.btn-icon svg { width: 20px; height: 20px; }
.btn-icon--outline {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-base);
}
.btn-icon--primary { color: var(--color-primary-50); }
.btn-icon:disabled { color: var(--color-text-disabled); background: var(--color-bg-base); cursor: not-allowed; }
.btn-icon:focus-visible { outline: 2px solid var(--color-primary-30); outline-offset: 2px; }

/* Button — 글자 버튼 (Outline) ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 56px;
  padding: 0 var(--spacing-5);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-3);
  background: var(--color-bg-base);
  font-family: inherit;
  color: var(--color-text-main);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.btn:active { background: var(--color-bg-muted); }
.btn:focus-visible { outline: 2px solid var(--color-primary-30); outline-offset: 2px; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
/* 크기·색 변형 */
.btn--lg { height: 40px; min-width: 72px; }
.btn--primary {
  border-color: var(--color-btn-primary-bg);
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
}
.btn--primary:hover { border-color: var(--color-btn-primary-bg-hover); background: var(--color-btn-primary-bg-hover); }
.btn--primary:active { border-color: var(--color-btn-primary-bg-pressed); background: var(--color-btn-primary-bg-pressed); }
/* 선택된 버튼 (예: 기간 빠른 선택 '일주일') */
.btn.is-selected {
  border-color: var(--color-primary-50);
  background: var(--color-primary-5);
  color: var(--color-primary-70);
}

/* Field — 라벨이 안에 있는 입력/선택 상자 --------------------------------- */
.field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 40px;
  padding: 0 var(--spacing-5);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-3);
  background: var(--color-bg-base);
}
.field:focus-within { border-color: var(--color-border-focus); }
.field__label {
  flex-shrink: 0;
  color: var(--color-text-detail);
  white-space: nowrap;
}
.field__op { color: var(--color-text-detail); }
.field__control {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-label-md-14-semibold-size);
  font-weight: var(--text-label-md-14-semibold-weight);
  color: var(--color-text-main);
}
.field__control::placeholder {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-placeholder);
}
/* 선택 상자: 기본 화살표를 숨기고 아이콘을 쓴다 */
.field--select { padding-right: var(--spacing-3); }
.field--select .field__control {
  appearance: none;
  padding-right: var(--spacing-7);
  cursor: pointer;
}
.field__arrow {
  position: absolute;
  right: var(--spacing-3);
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--color-icon-detail);
  pointer-events: none;
}
.field__arrow svg { width: 100%; height: 100%; }
/* 강조 필드 (예: 회사 선택) */
.field--highlight {
  border: 1px dashed var(--color-primary-50);
  background: var(--color-primary-5);
}
/* 검색창 (라벨 없음) */
.field--search { height: 36px; padding: 0 var(--spacing-4); }

/* Filter Bar — 조회 조건 영역 -------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-5);
  border-radius: var(--radius-4);
  background: var(--color-bg-secondary);
}
.filter-bar[hidden] { display: none; }

/* Table Toolbar — 표 위 도구줄 ------------------------------------------- */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-3);
}
.table-toolbar__actions { display: flex; gap: var(--spacing-2); }

/* Data Table ------------------------------------------------------------- */
.data-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.data-table th,
.data-table td {
  height: 40px;
  padding: 0 var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-10);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.data-table th + th,
.data-table td + td { border-left: 1px solid var(--color-gray-10); }
.data-table thead th {
  height: 44px;
  background: var(--color-bg-subtle);
  border-bottom-color: var(--color-border-default);
  color: var(--color-text-main);
  text-align: center;
}
.data-table tbody td { color: var(--color-text-main); }
.data-table tbody tr:hover td { background: var(--color-primary-5); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .is-center { text-align: center; }
.data-table .check { display: block; margin: 0 auto; }
.data-table .is-right { text-align: right; }
.data-table.is-compact th,
.data-table.is-compact td { height: 32px; }

/* 정렬 버튼 (헤더) */
.data-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.data-table__sort svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--color-icon-detail); }
.data-table__sort[aria-sort="ascending"] svg,
.data-table__sort[aria-sort="descending"] svg { color: var(--color-primary-50); }
.data-table__required { color: var(--color-danger-60); }
/* 클릭할 수 있는 값 (코드, 이메일 등) */
.data-table__link {
  color: var(--color-text-main);
  text-decoration: underline dashed;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-gray-50);
}
.data-table__link:hover { color: var(--color-primary-70); text-decoration-color: var(--color-primary-50); }

/* Table Footer — 합계 + 페이지 ------------------------------------------ */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-5);
  padding: var(--spacing-4) 0;
}
.table-footer__summary { margin: 0; color: var(--color-text-detail); }
.table-footer__summary strong { color: var(--color-text-main); font-weight: var(--font-weight-semibold); }

/* Pagination ------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--spacing-2);
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  background: none;
  font-family: inherit;
  color: var(--color-text-detail);
  cursor: pointer;
}
.pagination__btn:hover { background: var(--color-bg-muted); color: var(--color-text-main); }
.pagination__btn.is-current {
  background: var(--color-primary-50);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}
.pagination__btn--arrow { border-color: var(--color-border-default); }
.pagination__btn:disabled { color: var(--color-text-disabled); background: none; cursor: not-allowed; }
.pagination__btn svg { width: 14px; height: 14px; }
.pagination__ellipsis { padding: 0 var(--spacing-1); color: var(--color-text-disabled); }

/* Search Filter — 라벨 + 입력 행, 오른쪽 초기화/검색 버튼 --------------- */
/* 사용 예)
   <form class="search-filter">
     <div class="search-filter__rows">
       <div class="search-filter__row">
         <label class="search-filter__group">
           <span class="search-filter__label text-label-md-14">제목</span>
           <span class="control"><input class="control__input text-body-md-14" placeholder="..."></span>
         </label>
       </div>
     </div>
     <div class="search-filter__actions">
       <button type="reset" class="btn btn--lg">초기화</button>
       <button type="submit" class="btn btn--lg btn--primary">검색</button>
     </div>
   </form> */
.search-filter {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-7);
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-5) var(--spacing-7);
  border-radius: var(--radius-5);
  background: var(--color-bg-secondary);
}
.search-filter[hidden] { display: none; }
.search-filter__rows {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}
.search-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4) var(--spacing-8);
}
.search-filter__group {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}
.search-filter__label {
  min-width: 56px;
  margin-right: var(--spacing-3);
  color: var(--color-text-main);
  white-space: nowrap;
}
.search-filter__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--spacing-3);
}

/* Control — 흰색 입력/선택 상자 (라벨은 바깥에) */
.control {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 240px;
  height: 40px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-3);
  background: var(--color-bg-base);
}
.control:focus-within { border-color: var(--color-border-focus); }
.control__input {
  width: 100%;
  height: 100%;
  padding: 0 var(--spacing-5);
  border: 0;
  border-radius: inherit;
  outline: none;
  background: none;
  font-family: inherit;
  color: var(--color-text-main);
}
.control__input::placeholder { color: var(--color-text-placeholder); }
select.control__input { appearance: none; padding-right: var(--spacing-9); cursor: pointer; }
.control__icon {
  position: absolute;
  right: var(--spacing-4);
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--color-icon-detail);
  pointer-events: none;
}
.control__icon svg { width: 100%; height: 100%; }
.control--wide { width: 480px; }

/* Select Dropdown — 셀렉트박스 펼침 목록 (assets/js/custom-select.js) ------ */
/* 원래 <select>는 화면에서만 숨긴다 (값·form 동작 유지) */
.is-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
/* 선택 값 표시 버튼 — 입력 상자 안을 채운다 */
.select-trigger {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--spacing-8) 0 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--color-text-main);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.select-trigger:focus-visible { outline: none; }
.field .select-trigger {
  font-size: var(--text-label-md-14-semibold-size);
  font-weight: var(--text-label-md-14-semibold-weight);
}
.control .select-trigger { padding-left: var(--spacing-5); }
.has-custom-select:focus-within { border-color: var(--color-border-focus); }

/* 열림 상태: 테두리 진하게, 화살표 위로 */
.has-custom-select.is-open { border-color: var(--color-border-focus); }
.has-custom-select .field__arrow,
.has-custom-select .control__icon { transition: transform 0.15s ease; }
.has-custom-select.is-open .field__arrow,
.has-custom-select.is-open .control__icon { transform: rotate(180deg); }

/* 펼침 목록 */
.select-menu {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  left: -1px;
  z-index: 50;
  min-width: calc(100% + 2px);
  max-height: 280px;
  margin: 0;
  padding: var(--spacing-2);
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--color-border-focus);
  border-radius: var(--radius-3);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-normal);
}
.select-menu[hidden] { display: none; }
.select-menu__option {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-2);
  color: var(--color-text-detail);
  white-space: nowrap;
  cursor: pointer;
}
.select-menu__option.is-active { background: var(--color-bg-subtle); color: var(--color-text-main); }
.select-menu__option[aria-selected="true"] {
  background: var(--color-bg-subtle);
  color: var(--color-text-main);
  font-weight: var(--font-weight-semibold);
}