/* gl-dropdown — intro/ 정적 페이지 공용 커스텀 드롭다운 (index.html 언어 선택기 디자인).
 * 사용법: 페이지의 <select>를 gl-dropdown.js 의 GLDropdown.enhance(select)로 감싸면
 * select 는 숨겨진 상태 홀더로 남고(값/옵션/change 이벤트 그대로), 이 스타일의
 * 버튼 + 펼침 메뉴가 그 자리에 렌더된다.
 * 테마: 페이지가 :root[data-theme="dark"] 변수(--input-bg/--border/--muted/--green …)를
 * 정의하면 자동으로 따라간다. 변수가 없는 페이지(index.html)는 폴백 색을 쓴다. */
.gl-dd {
  position: relative; display: inline-block; flex: none;
  --gl-dd-bg: var(--input-bg, #fff);
  --gl-dd-border: var(--border, #DDEFE2);
  --gl-dd-ink: var(--muted, #5E6B62);
  --gl-dd-accent: var(--green, #34A853);
  --gl-dd-accent-border: var(--green-bright, var(--green, #34A853));
  --gl-dd-hover: #F2F8F4;
  --gl-dd-on: #EAF6EE;
  --gl-dd-shadow: 0 18px 40px rgba(22,38,28,0.14), 0 4px 12px rgba(22,38,28,0.06);
}
:root[data-theme="dark"] .gl-dd {
  --gl-dd-hover: #1D2B23;
  --gl-dd-on: #24382C;
  --gl-dd-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3);
}
/* 원본 select 는 상태 홀더로만 남긴다. 페이지 JS 가 style.display='' 를 넣어도 숨김 유지. */
.gl-dd > select { display: none !important; }
.gl-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--gl-dd-ink);
  background: var(--gl-dd-bg); border: 1px solid var(--gl-dd-border); border-radius: 999px;
  padding: 8px 14px 8px 16px; cursor: pointer; max-width: 40vw; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.gl-dd.gl-dd-wide .gl-dd-btn { max-width: none; }
.gl-dd-btn .gl-dd-text { overflow: hidden; text-overflow: ellipsis; }
.gl-dd-btn:hover, .gl-dd.open .gl-dd-btn { border-color: var(--gl-dd-accent-border); color: var(--gl-dd-accent); }
.gl-dd-btn:focus-visible { outline: 2px solid var(--gl-dd-accent); outline-offset: 2px; }
.gl-dd-btn svg { width: 16px; height: 16px; flex: none; transition: transform .25s ease; }
.gl-dd.open .gl-dd-btn svg { transform: rotate(180deg); }
/* 아래로 쭉 펼쳐지는 메뉴 — 닫힘 상태는 높이 0 + 살짝 올라가 있음. */
.gl-dd-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 168px; max-width: min(92vw, 440px); list-style: none; margin: 0; padding: 6px;
  background: var(--gl-dd-bg); border: 1px solid var(--gl-dd-border); border-radius: 16px;
  box-shadow: var(--gl-dd-shadow);
  max-height: 0; opacity: 0; transform: translateY(-8px) scaleY(.98);
  transform-origin: top right; overflow-y: auto; overflow-x: hidden; pointer-events: none;
  transition: max-height .3s cubic-bezier(.22,.61,.36,1), opacity .18s ease,
              transform .3s cubic-bezier(.22,.61,.36,1);
}
.gl-dd.open .gl-dd-menu { max-height: min(62vh, 440px); opacity: 1; transform: none; pointer-events: auto; }
/* 본문 흐름(왼쪽 정렬) 안에 놓이는 드롭다운용 — 기본은 헤더 우측 정렬. */
.gl-dd.gl-dd-left .gl-dd-menu { right: auto; left: 0; transform-origin: top left; }
.gl-dd-menu li {
  padding: 9px 12px; border-radius: 10px; white-space: nowrap; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis;
  font-size: 14.5px; font-weight: 600; color: var(--gl-dd-ink);
  transition: background .15s ease, color .15s ease;
}
.gl-dd-menu li:hover, .gl-dd-menu li.active { background: var(--gl-dd-hover); color: var(--gl-dd-accent); }
.gl-dd-menu li.on { background: var(--gl-dd-on); color: var(--gl-dd-accent); }
@media (prefers-reduced-motion: reduce) {
  .gl-dd-menu, .gl-dd-btn svg { transition: none; }
}