@charset "utf-8";

/**
 * 커스텀 셀렉트 (assets/js/custom-select.js 와 한 쌍).
 *
 * 래퍼 .cs 는 원래 <select> 의 class 와 inline style 을 그대로 물려받는다.
 * 그래서 .select / .adm-select / .pf-sel / .auth-input 등 기존 디자인(폭·높이·
 * 테두리·글자크기)이 페이지를 고치지 않아도 그대로 적용된다.
 * 여기서는 그 위에 얹을 것(화살표, 목록 패널)만 정의한다.
 *
 * 페이지 안 <style> 블록(.pf-sel 등)보다 늦게 이겨야 하므로 꼭 필요한 곳은
 * .cs.cs 로 우선순위를 한 단 올려 둔다.
 */

.cs {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  vertical-align: middle;
  /* class 없이 inline style 만 쓰는 셀렉트(주문상세 팝업 등)를 위한 기본값 */
  background-color: #fff;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* 물려받은 배경 화살표는 지우고 아래 .cs-arrow 로 직접 그린다 */
.cs.cs {
  background-image: none;
  padding-right: 12px;
}

.cs.is-open, .cs.is-focus { border-color: var(--primary, #002880); }
/* select.is-invalid 같은 태그 선택자는 래퍼(div)에 안 걸리므로 따로 둔다 */
.cs.is-invalid { border-color: var(--danger, #e5484d); }
.cs.is-disabled { background: #f7f7f7; color: var(--text-4, #999); cursor: default; }

/* 원래 <select> 는 지우지 않고 투명하게 겹쳐 둔다.
   (폼 전송, required 검사, 브라우저 기본 경고 위치가 그대로 유지된다)
   위치/투명도는 JS 가 인라인으로 넣는다 — 페이지 CSS 에 지지 않게 하기 위함. */

.cs-btn {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  letter-spacing: inherit;
  cursor: inherit;
  outline: none;
  /* 폭 측정용 글자가 밖으로 삐져나와 가로 스크롤을 만들지 않게 */
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.cs-label {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* 옵션 중 가장 긴 글자 폭을 잡아 둔다. 기본 select 처럼 선택을 바꿔도
   드롭다운 폭이 출렁이지 않는다. (width 가 고정된 곳에서는 잘려 무시된다) */
.cs-measure {
  display: grid;
  visibility: hidden;
  pointer-events: none;
  line-height: 1.3;
}
.cs-measure > i {
  grid-area: 1 / 1;
  font-style: inherit;
  white-space: nowrap;
}

.cs-arrow {
  flex: none;
  width: 10px;
  height: 6px;
  color: var(--text-4, #999);
  transition: transform 0.15s ease;
}
.cs.is-open .cs-arrow { transform: rotate(180deg); }
.cs.is-disabled .cs-arrow { color: var(--text-5, #bbb); }

/* ── 목록 패널 ────────────────────────────────────────────────
   body 바로 밑에 붙여 표/모달/overflow:hidden 안에 있어도 잘리지 않게 한다.
   방향은 항상 아래. position 은 JS 가 상황에 맞게 absolute/fixed 로 정한다. */
.cs-panel {
  position: absolute;
  z-index: 10000;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border, #ececec);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.12);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  color: var(--text-2, #333);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.cs-opt {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 8px);
  color: var(--text-3, #666);
  line-height: 1.4;
  cursor: pointer;
  word-break: break-all;
}
.cs-opt.is-active { background: var(--bg-soft, #fafafa); color: var(--primary, #002880); }
.cs-opt.is-selected { background: var(--primary-soft, #eef2fb); color: var(--primary, #002880); font-weight: 700; }
.cs-opt.is-disabled { color: var(--text-5, #bbb); cursor: default; background: none; font-weight: 400; }
.cs-opt-empty { padding: 12px; color: var(--text-4, #999); text-align: center; cursor: default; }

.cs-group {
  padding: 8px 12px 4px;
  font-size: 0.86em;
  font-weight: 700;
  color: var(--text-4, #999);
}

/* 목록이 길어 스크롤이 생길 때의 막대 */
.cs-panel::-webkit-scrollbar { width: 10px; }
.cs-panel::-webkit-scrollbar-track { background: transparent; }
.cs-panel::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border: 3px solid #fff;
  border-radius: 999px;
}
.cs-panel::-webkit-scrollbar-thumb:hover { background: #c2c2c2; }

/* ── 개별 화면 보정 ───────────────────────────────────────── */

/* 회원가입/정보수정의 이메일 도메인: '직접입력' 중에는 겹쳐 둔 입력칸이
   보이도록 래퍼 글자를 숨긴다 (기존 select 용 규칙과 같은 처리) */
.email-domain > .cs { width: 100%; }
.email-domain.is-custom > .cs { color: transparent; }