/* ==========================================================================
   select — 드롭다운

   브라우저 기본 <select> 의 펼쳐진 목록은 OS 가 그려서 폭·테두리·모서리를
   CSS 로 맞출 수 없다. 그래서 목록을 직접 그린다.

   진짜 <select> 는 화면에서만 감추고 그대로 둔다 —
   폼 전송과 JS 가 꺼진 환경을 위해서다. JS 가 없으면 기본 드롭다운이 보인다.
   ========================================================================== */

.select {
  position: relative;
  width: 100%;
}

/* JS 가 붙기 전에는 기본 <select> 가 그대로 보인다 */
.select__native { width: 100%; }

.select.is-enhanced .select__native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* --- 닫힌 상태 — .field__select 와 생김새가 같다 --------------------------- */

.select__button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
}

.select__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select__button[aria-expanded="true"] {
  border-color: var(--c-blue-deep);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* --- 펼쳐진 목록 — 버튼과 폭·테두리·모서리를 맞춘다 ------------------------ */

.select__list {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 260px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  background: var(--c-bg);
  border: 1px solid var(--c-blue-deep);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 6px 16px rgb(0 24 56 / .12);
  list-style: none;
}

.select__option {
  padding: 10px var(--sp-3);
  color: var(--c-text);
  font-size: var(--fs-base);
  line-height: 1.4;
  cursor: pointer;
}

.select__option:hover,
.select__option.is-active {
  background: var(--c-surface);
}

.select__option.is-selected {
  background: var(--c-blue-deep);
  color: var(--c-text-invert);
  font-weight: var(--fw-semibold);
}

.select__option--placeholder { color: var(--c-text-placeholder); }