/* .qf — 필터 카드 (퀘스트 / 부관 / 선박 등에서 공용) */

.qf { font-size: var(--fs-sm); }
.qf .qf-row { display: flex; border-bottom: 1px solid var(--c-border); }
.qf .qf-row:last-child { border-bottom: none; }
.qf .qf-label {
  flex: 0 0 7.5rem;
  background: var(--c-bg-muted);
  border-right: 1px solid var(--c-border);
  padding: 0.35rem 0.6rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  white-space: nowrap;
}
/* 라벨 영역에 체크박스 — qf-label 과 동일한 박스 chrome (배경 / 우측 보더 / 너비 고정).
 * form-check 의 negative margin 으로 인한 borderv 좌측 침범을 padding-left 로 막음.
 */
.qf .qf-label-check {
  display: flex;
  align-items: center;
  flex: 0 0 7.5rem;
  background: var(--c-bg-muted);
  border-right: 1px solid var(--c-border);
  padding: 0.35rem 0.6rem 0.35rem 1.85rem;  /* 좌측 padding 1.85rem 으로 form-check-input (margin-left -1.5em) 수용 */
  white-space: nowrap;
}
.qf .qf-label-check .form-check {
  padding-left: 0;
  margin-bottom: 0;
  min-height: auto;
}
.qf .qf-label-check .form-check-input {
  margin-left: -1.5em;
  margin-top: 0.15em;
}
.qf .qf-label-check .form-check-label {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  font-size: var(--fs-xs);
}
.qf .qf-items {
  flex: 1;
  padding: var(--sp-2) 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.55rem;
  align-items: center;
}
.qf .qf-items-stacked { flex-direction: column; align-items: stretch; gap: 0.1rem; }
.qf .qf-era-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.qf .qf-era-half { display: flex; flex-wrap: wrap; gap: 0.1rem 0.45rem; align-items: center; }
/* 유형 | 특징 반반 — 각자 qf-label + qf-items 유지 */
.qf .qf-row-dual { padding: 0; }
.qf .qf-row-dual .qf-sub {
  flex: 1 1 0;
  display: flex;
  min-width: 0;
  border-right: 1px solid var(--c-border);
}
.qf .qf-row-dual .qf-sub:last-child { border-right: none; }
/* dual row: 한쪽(예: 완료 select)이 더 높아도 라벨을 세로 중앙 정렬해 "위로 붙는" 현상 방지 */
.qf .qf-row-dual .qf-label { display: flex; align-items: center; }
.qf .qf-group-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.75rem;
  align-items: center;
}
.qf .qf-group-master-wrap { margin-right: var(--sp-1); }
.qf .qf-group-master-wrap .form-check-label { font-weight: var(--fw-semibold); color: var(--c-text); }
/* 의뢰 장소: 2-열 grid */
.qf .qf-city-grid {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
}
.qf .qf-region-wrapper { display: contents; }
.qf .qf-city-region {
  background: var(--c-bg-strong);
  border-radius: 0;
  padding: var(--sp-1) 0.6rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-bg);
}
.qf .qf-region-wrapper:last-child .qf-city-region { border-bottom: none; }
.qf .qf-city-region .form-check-input { margin: 0; }
.qf .qf-city-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.45rem;
  align-items: center;
  padding: var(--sp-1) 0.6rem;
}
.qf .form-check { margin: 0; padding-left: 1.25em; min-height: auto; font-size: var(--fs-sm); }
.qf .form-check-inline { margin-right: 0.15rem; }
.qf .form-check-input { margin-top: 0.22em; }
.qf .sub-panel[hidden] { display: none; }
/* 이민자 도시 read-only */
.qf .qf-city-readonly input[type=checkbox] { pointer-events: none; opacity: 0.7; }
.qf .qf-city-readonly .form-check-label { color: var(--c-text-muted); cursor: default; }
/* 검색어 input — 가로 폭 제한 */
.qf .qf-search-input { max-width: 280px; }

/* 슈퍼그룹 헤더 — 분류 / 문화권 같은 상위 분류 라벨 */
.qf .qf-supergroup-header {
  background: var(--c-bg-active);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--c-text);
  padding: var(--sp-2) 0.75rem;
  border-bottom: 1px solid var(--c-border);
}

/* 1차 분류 탭 — 페이지 상단(필터 카드 밖). Bootstrap .nav-tabs 기반 + 사이트 청색 톤
 * (게임 금색 아님 — UI=청색/모던). 분류 약 11종이라 넘치면 줄바꿈(wrap). */
.quest-tabs {
  flex-wrap: wrap;
  gap: 0.1rem 0.1rem;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.quest-tabs .nav-link {
  cursor: pointer;
  border: 1px solid transparent;
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
  color: var(--c-text);
  background: none;
  padding: 0.35rem 0.8rem;
  margin-bottom: -1px;
}
.quest-tabs .nav-link:hover {
  color: var(--c-text-link);
  border-color: var(--c-bg-active) var(--c-bg-active) var(--c-border);
}
.quest-tabs .nav-link.active {
  color: var(--c-text-link);  /* 기본 — 슬롯별 색은 .qt-slot-* 규칙이 override(밑줄과 동일 색) */
  font-weight: var(--fw-semibold);
  background: var(--c-bg);
  border-color: var(--c-border) var(--c-border) var(--c-bg);
}
/* 수령 슬롯 색 — 선택된(active) 분류 탭만 슬롯 색 밑줄 + 글씨도 같은 색(밑줄과 일치).
   선택 항목이 눈에 띄도록 비활성 탭엔 미표시. 청색/중립 톤(게임 금색 아님). */
.quest-tabs .nav-link.active.qt-slot-s1 { box-shadow: inset 0 -3px 0 var(--c-text-link); color: var(--c-text-link); }   /* 1·2번 — 청색 */
.quest-tabs .nav-link.active.qt-slot-s3 { box-shadow: inset 0 -3px 0 var(--c-success-strong); color: var(--c-success-strong); }  /* 3번 — 녹색(토큰) */
.quest-tabs .nav-link.active.qt-slot-sx { box-shadow: inset 0 -3px 0 var(--c-text-muted); color: var(--c-text-muted); } /* 슬롯 외 — 회색 */