/* DewDew — 언어 드롭다운 스타일
 * ---------------------------------------------------------------------
 * 페이지마다 인라인 <style>에 .langs 규칙이 따로 들어 있으므로
 * 여기서는 **id 선택자(#langs)** 로 특이도를 올려 확실히 덮어쓴다.
 * (클래스만 쓰면 페이지 인라인 규칙과 순서에 따라 밀릴 수 있다)
 *
 * 네이티브 <select>를 쓴다 — 모바일에서 OS 기본 피커가 떠서
 * 스크롤·접근성이 가장 안정적이다(커스텀 드롭다운은 좁은 화면에서 잘린다).
 * --------------------------------------------------------------------- */

.langs,
#langs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e6f2f0;
  padding: 3px 6px 3px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  position: relative;
  line-height: 1;
}

.langs .dd-lang-globe,
#langs .dd-lang-globe {
  font-size: 12px;
  opacity: .75;
  pointer-events: none;
}

/* 네이티브 select — 배경/테두리 없이 pill 안에 녹인다 */
#langs #dd-lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
  background: transparent;
  color: #134e4a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 2px 6px 2px;
  margin: 0;
  cursor: pointer;
  border-radius: 999px;
  /* 오른쪽 캐럿 자리는 span이 담당하므로 select엔 여백을 주지 않는다 */
  text-align: left;
  min-width: 0;
}

/* iOS Safari가 select에 자체 화살표를 그리는 것을 막는다 */
#langs #dd-lang-select::-ms-expand { display: none; }
#langs #dd-lang-select:focus { outline: none; }

/* 우리가 그리는 캐럿 */
#langs .dd-lang-caret {
  width: 0;
  height: 0;
  margin-left: 1px;
  margin-right: 3px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #134e4a;
  opacity: .7;
  pointer-events: none;
}

/* 실제로 펼쳐지는 목록은 OS가 그리므로 색만 맞춰 준다 */
#langs #dd-lang-select option {
  color: #134e4a;
  background: #ffffff;
  font-weight: 700;
}

@media (max-width: 380px) {
  .langs, #langs { padding: 2px 5px 2px 6px; gap: 3px; }
  #langs #dd-lang-select { font-size: 11.5px; padding: 5px 1px; }
  #langs .dd-lang-globe { font-size: 11px; }
}

@media (max-width: 340px) {
  #langs #dd-lang-select { font-size: 11px; padding: 5px 1px; }
}