/* 공통 선택 메뉴(select-controls.js): OS 기본 메뉴 대신 글자 서식 도구 메뉴(.fct-popup)와 같은 흰 메뉴.
   계약: .sj-select(래퍼, data-disabled) > 원래 select(.sj-select-native, 화면에서만 숨김 — value·change·disabled·form·label 그대로)
         + 버튼 .sj-select-trigger(원래 select 클래스 복사, role=combobox, aria-expanded)
         body 고정 목록 .sj-select-listbox > .sj-select-option(role=option, aria-selected, aria-disabled, 키보드 .is-active) · .sj-select-group-label
   버튼은 원래 select 클래스를 그대로 받아 사이드바 44px·보기 크기 32px·게시글 입력 모양을 유지하고, 여기서는 화살표·말줄임·상태만 더한다. */
.sj-select { --sj-select-brand: var(--brand, #315de5); --sj-select-soft: var(--brand-soft, #edf3ff); position: relative; display: block; min-width: 0; max-width: 100%; }
.sj-select[hidden] { display: none !important; }

/* 원래 select: 화면에서만 숨김. 각 화면의 select 규칙(크기·display)보다 항상 우선해야 해서 !important. */
.sj-select .sj-select-native { position: absolute !important; top: 0 !important; left: 0 !important; width: 1px !important; min-width: 0 !important; height: 1px !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; opacity: 0; pointer-events: none; }

/* 버튼(> span.sj-select-value + svg.sj-select-caret): 원래 select 클래스의 테두리·높이·글자 크기를 따르고, 값 말줄임과 오른쪽 화살표만 더한다. */
.sj-select .sj-select-trigger { box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 100%; min-width: 0; padding-right: 10px; font-family: inherit; line-height: 1.4; text-align: left; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sj-select .sj-select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-select .sj-select-caret { flex: none; width: 16px; height: 16px; color: #6b768a; transition: transform .15s; }
.sj-select .sj-select-trigger[aria-expanded="true"] .sj-select-caret { color: var(--sj-select-brand); transform: rotate(180deg); }
.sj-select .sj-select-trigger:not([class*="fradmin-input"]) { min-height: 36px; padding: 7px 10px; border: 1px solid #d9e1ed; border-radius: 8px; color: #27364f; background-color: #fff; font-size: 13px; }
.sj-select .sj-select-trigger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--sj-select-brand), #fff 55%); }
.sj-select .sj-select-trigger[aria-expanded="true"] { border-color: #80a8f5; outline: 2px solid #d6e5ff; outline-offset: 0; }
.sj-select .sj-select-trigger:focus-visible { outline: 2px solid var(--sj-select-brand); outline-offset: 2px; }
.sj-select:is([data-disabled="true"]) .sj-select-trigger, .sj-select .sj-select-trigger:disabled { color: #9aa5b8; background-color: #f3f5f9; cursor: not-allowed; opacity: 1; }
.sj-select:is([data-disabled="true"]) .sj-select-caret { color: #b6bfcd; }

/* 화면별 원래 select 모양(버튼은 select 요소가 아니라 원래 'select' 규칙이 닿지 않는 곳만 옮긴다). */
.fradmin-viewport-label .sj-select { display: inline-block; width: auto; }
.fradmin-viewport-label .sj-select .sj-select-trigger { width: auto; min-height: 32px; gap: 6px; padding: 5px 8px 5px 10px; border: 1px solid #dfe4ec; border-radius: 6px; color: #536078; background-color: #fff; font-size: 12px; }
.fradmin-viewport-label .sj-select .sj-select-caret { width: 14px; height: 14px; }
.news-admin-modal.fradmin-post-inline .news-article-meta .sj-select .sj-select-trigger { min-height: 44px; }
@media (max-width: 640px) {
  .fradmin-viewport-label .sj-select .sj-select-trigger { padding-left: 7px; font-size: 11px; }
}

/* 목록: body(열린 dialog 안이면 그 dialog)에 고정 위치. JS가 top·left·width·max-height(≤320, 화면 안)를 지정하고 넘치면 안쪽 스크롤. 같은 층의 모달·넓게 보기 위에 보이도록 가장 높은 z-index. */
.sj-select-listbox { position: fixed; z-index: 2147483000; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; min-width: 120px; max-width: calc(100vw - 16px); max-height: min(320px, calc(100dvh - 16px)); margin: 0; padding: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #d9e1ee; border-radius: 10px; background: #fff; box-shadow: 0 10px 28px #1b2a4a29; color: #344057; font: 600 13px/1.4 Pretendard, sans-serif; list-style: none; text-align: left; }
.sj-select-listbox[hidden] { display: none !important; }
.sj-select-group-label { flex: none; margin: 6px 6px 2px; padding: 0; color: #7a8599; font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.sj-select-group-label:first-child { margin-top: 2px; }
/* 옵션: 장문은 줄바꿈(잘림 없음). 지나감 옅은 파랑, 키보드 위치는 옅은 파랑 + 테두리, 선택은 파란 글씨 + 오른쪽 체크. */
.sj-select-option { position: relative; flex: none; box-sizing: border-box; display: flex; align-items: center; min-height: 36px; margin: 0; padding: 7px 32px 7px 10px; border-radius: 7px; color: #344057; overflow-wrap: anywhere; cursor: pointer; user-select: none; }
.sj-select-option:hover:not([aria-disabled="true"]) { background: var(--brand-soft, #edf3ff); }
.sj-select-option.is-active { background: var(--brand-soft, #edf3ff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #315de5), #fff 55%); }
.sj-select-option[aria-selected="true"] { color: var(--brand, #315de5); font-weight: 750; }
.sj-select-option[aria-selected="true"]::after { content: ""; position: absolute; top: 50%; right: 10px; width: 16px; height: 16px; background: currentColor; transform: translateY(-50%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.3 3 3 6-6.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.3 3 3 6-6.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.sj-select-option[aria-disabled="true"] { color: #a2aaba; cursor: not-allowed; }
@media (max-width: 640px), (pointer: coarse) {
  .sj-select-option { min-height: 44px; }
  .sj-select-listbox { font-size: 14px; }
}
@media (forced-colors: active) {
  .sj-select-option.is-active, .sj-select-option:hover { outline: 1px solid Highlight; }
  .sj-select-option[aria-selected="true"]::after { background: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-select .sj-select-caret { transition: none; }
}