/* 드롭다운 (static/js/dropdown.js) — 기본 select 대신 보이는 버튼 + 휴대폰 하단 시트 / 넓은 화면 펼침 목록.
   색은 사이트 그대로 (#1a1a1a · #2b2b2e · #FFA178, 라이트 테마는 ds/theme 변수), 각진 모서리 */

/* 진짜 select: 값·폼 제출용으로 남겨 두고 화면에서만 숨김 (제자리에 1px — 오류 안내 스크롤도 같은 자리로) */
select.dd-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}

/* ───── 버튼 ───── */
.dd-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 12px 12px 14px;
  background: var(--surface, #2b2b2e);
  border: 1px solid var(--border, #3a3a3e);
  border-radius: 0;
  color: var(--text, #f2f2f2);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dd-trigger .dd-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dd-trigger .dd-chevron {
  flex-shrink: 0;
  color: var(--text-dim, #a8a8ad);
  transition: transform 0.2s ease, color 0.15s ease;
}

.dd-trigger:focus { outline: none; }
.dd-trigger:focus-visible,
.dd-trigger.is-open { border-color: var(--accent, #FFA178); }
.dd-trigger.is-open .dd-chevron { transform: rotate(180deg); color: var(--accent, #FFA178); }
.dd-trigger.is-placeholder .dd-value { color: var(--text-faint, #77777c); }
.dd-trigger.is-error { border-color: var(--danger, #ff6b6b); }
.dd-trigger:disabled { opacity: 0.5; cursor: default; }

/* 작은 버튼 (메인 랭킹·카테고리 정렬, 검색 정렬) */
.dd-trigger--compact {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  padding: 7px 8px 7px 12px;
  font-size: 13px;
  background: #2b2b2e;
  border-color: #3a3a3e;
  color: #f2f2f2;
}
.dd-trigger--compact .dd-chevron { width: 14px; height: 14px; }

@media (max-width: 600px) {
  .dd-trigger--compact { font-size: 16px; padding: 8px 8px 8px 12px; }
}

/* 놓인 자리별 */
.email-wrapper .dd-trigger { flex: 1; min-width: 0; }
.ranking-banner-controls .dd-trigger { border-color: rgba(255, 255, 255, 0.18); }

/* ───── 펼친 목록 ───── */
html.dd-locked { overscroll-behavior: none; }

.dd-layer {
  position: fixed;
  inset: 0;
  z-index: 5000; /* 설정 패널·드로어·시트(최대 3000) 위 */
  font-family: inherit;
}
.dd-layer[hidden] { display: none; }

.dd-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.dd-layer.is-open .dd-dim { opacity: 1; }

.dd-sheet {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--surface, #2b2b2e);
  color: var(--text, #f2f2f2);
  border-radius: 0;
  overflow: hidden;
}

.dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 18px 8px 10px 20px;
  border-bottom: 1px solid var(--border, #3a3a3e);
}

.dd-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #f2f2f2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dd-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--text-dim, #a8a8ad);
  cursor: pointer;
}

.dd-list {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dd-list:focus { outline: none; }
.dd-list ul { margin: 0; padding: 0; list-style: none; }

.dd-group-label {
  padding: 12px 20px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-faint, #77777c);
}

.dd-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  font-size: 16px;
  color: var(--text, #f2f2f2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease;
}

.dd-opt-text { flex: 1; min-width: 0; padding: 14px 0; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.dd-opt .dd-check { flex-shrink: 0; color: #FFA178; visibility: hidden; }
.dd-opt.is-selected { color: #FFA178; font-weight: 700; }
.dd-opt.is-selected .dd-check { visibility: visible; }
.dd-opt.is-active,
.dd-opt:active { background: rgba(255, 255, 255, 0.06); }
.dd-opt[aria-disabled="true"] { opacity: 0.4; cursor: default; background: none; }

/* ───── 풍부한 줄 (모델 선택 등 — option 의 data-name·data-desc·data-price·data-badge) ───── */
.dd-opt--rich { align-items: center; gap: 12px; min-height: 64px; }
.dd-opt-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
}
.dd-opt-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.dd-opt-name-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dd-opt-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-dim, #a8a8ad);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dd-opt--rich.is-selected .dd-opt-desc { color: var(--text-dim, #a8a8ad); }

/* 오른쪽 가격: 코인 그림 + 숫자 */
.dd-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #f2f2f2);
  font-variant-numeric: tabular-nums;
}
.dd-price .dd-coin { flex-shrink: 0; color: #FFA178; }
.dd-opt--rich .dd-price { min-width: 44px; justify-content: flex-end; }

/* 작은 표시 (각진 모서리) */
.dd-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.dd-badge--free { background: #3DDC84; color: #0d2a19; padding: 3px 8px; margin-left: auto; }
.dd-badge--recommend { border: 1px solid rgba(255, 161, 120, 0.7); color: #FFA178; }
.dd-badge--best { border: 1px solid rgba(232, 194, 106, 0.75); color: #E8C26A; }

/* 무료 줄: 옅은 초록 바탕 */
.dd-opt--rich.is-free { background: rgba(61, 220, 132, 0.07); }
.dd-opt--rich.is-free.is-active,
.dd-opt--rich.is-free:active { background: rgba(61, 220, 132, 0.13); }

/* 닫힌 버튼: 이름 + 오른쪽 가격 / 무료 */
.dd-trigger--rich .dd-value { font-weight: 600; }
.dd-trigger-meta { margin-left: auto; }
.dd-trigger--rich.is-free { border-color: rgba(61, 220, 132, 0.55); }
.dd-trigger--rich.is-free:focus-visible,
.dd-trigger--rich.is-free.is-open { border-color: var(--accent, #FFA178); }

/* 휴대폰: 아래에서 올라오는 시트 */
.dd-layer.is-mobile .dd-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 72vh;
  max-height: 72dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--border, #3a3a3e);
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dd-layer.is-mobile .dd-sheet::before { /* 손잡이 */
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  background: var(--border-strong, #4a4a4f);
}
.dd-layer.is-mobile.is-open .dd-sheet { transform: translateY(0); }

/* 넓은 화면: 버튼 바로 아래(공간 없으면 위) 펼침 목록 */
.dd-layer.is-anchored .dd-dim { background: transparent; }
.dd-layer.is-anchored .dd-head { display: none; }
.dd-layer.is-anchored .dd-sheet {
  border: 1px solid var(--border-strong, #4a4a4f);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.dd-layer.is-anchored .dd-sheet.is-up { transform: translateY(6px); }
.dd-layer.is-anchored.is-open .dd-sheet { opacity: 1; transform: translateY(0); }
.dd-layer.is-anchored .dd-list { padding: 4px 0; }
.dd-layer.is-anchored .dd-opt { min-height: 42px; padding: 0 14px; font-size: 14px; }
.dd-layer.is-anchored .dd-opt-text { padding: 10px 0; }
.dd-layer.is-anchored .dd-opt .dd-check { width: 18px; height: 18px; }
.dd-layer.is-anchored .dd-opt--rich { min-height: 58px; font-size: 16px; }
.dd-layer.is-anchored .dd-opt--rich .dd-opt-main { padding: 10px 0; }

/* 라이트 테마 */
:where([data-theme="light"]) .dd-trigger--compact {
  background: var(--surface, #ffffff);
  border-color: var(--border-strong, #d3cac4);
  color: var(--text, #1f1d1c);
}
:where([data-theme="light"]) .dd-dim { background: rgba(0, 0, 0, 0.4); }
:where([data-theme="light"]) .dd-opt.is-selected { color: var(--accent-text, #a84a22); }
:where([data-theme="light"]) .dd-opt.is-active,
:where([data-theme="light"]) .dd-opt:active { background: rgba(0, 0, 0, 0.05); }
:where([data-theme="light"]) .dd-layer.is-anchored .dd-sheet { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); }
:where([data-theme="light"]) .dd-badge--free { background: #2fbf6f; color: #062312; }
:where([data-theme="light"]) .dd-badge--recommend { border-color: var(--accent-text, #a84a22); color: var(--accent-text, #a84a22); }
:where([data-theme="light"]) .dd-badge--best { border-color: #9a7414; color: #8a6510; }
:where([data-theme="light"]) .dd-price .dd-coin { color: var(--accent-text, #a84a22); }
:where([data-theme="light"]) .dd-opt--rich.is-free { background: rgba(47, 191, 111, 0.08); }
:where([data-theme="light"]) .dd-opt--rich.is-free.is-active,
:where([data-theme="light"]) .dd-opt--rich.is-free:active { background: rgba(47, 191, 111, 0.14); }
:where([data-theme="light"]) .dd-trigger--rich.is-free { border-color: rgba(47, 191, 111, 0.6); }