.tware-dropdown { --tw-dd-accent:#5664d2; --tw-dd-border:#cbd3e1; --tw-dd-text:var(--tw-text,#172033); --tw-dd-muted:var(--tw-text-muted,#526071); position:relative; box-sizing:border-box; width:100%; min-width:0; max-width:100%; color:var(--tw-dd-text); font:inherit; font-size:13px; }
/*
    감춰 두는 native select. 폭을 1px로 눕히는데 `width`만 눌러 두면
    `.tw-field-control select { min-width: 108px }` 같은 페이지 규칙이 이겨
    108px 짜리 보이지 않는 상자가 남는다. 그 상자가 오른쪽 끝 칸에서 문서 밖으로
    삐져나가 페이지에 가로 스크롤을 만들었다. 최소·최대 폭과 안쪽 여백까지 함께 눕힌다.
*/
.tware-dropdown__native { position:absolute!important; width:1px!important; min-width:1px!important; max-width:1px!important; height:1px!important; min-height:0!important; margin:-1px!important; padding:0!important; border:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; }
.tware-dropdown__control { position:relative; display:flex; box-sizing:border-box; width:100%; min-width:0; max-width:100%; align-items:center; min-height:42px; border:1px solid var(--tw-dd-border); border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(24,34,52,.04); transition:border-color .16s,box-shadow .16s; }
.tware-dropdown[data-state="open"] .tware-dropdown__control,.tware-dropdown__control:focus-within { border-color:var(--tw-dd-accent); box-shadow:0 0 0 3px rgba(86,100,210,.14); }
.tware-dropdown__input { min-width:0!important; min-height:40px!important; flex:1; border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; padding:0 10px!important; color:inherit!important; font:inherit!important; }
.tware-dropdown__input::placeholder { color:var(--tw-text-placeholder,#526074); opacity:1; }
.tware-dropdown__code { margin-left:10px; border-radius:6px; background:#eef0fb; padding:3px 6px; color:#4d59b9; font-size:12px; font-weight:750; }
.tware-dropdown__clear,.tware-dropdown__toggle { display:grid; width:34px; height:38px; flex:0 0 34px; place-items:center; align-self:center; border:0; padding:0; background:transparent; color:var(--tw-text-faint,#526074); cursor:pointer; }
.tware-dropdown__clear { position:absolute; z-index:1; top:50%; right:34px; width:20px; height:20px; flex:none; margin:0; border:1px solid rgba(226,118,118,.92); border-radius:6px; background:rgba(247,174,174,.9); color:rgba(137,35,35,.98); opacity:0; pointer-events:none; transform:translateY(-50%); transition:background-color .12s,border-color .12s,color .12s,opacity .12s; }
.tware-dropdown__clear[hidden] { display:none!important; }
.tware-dropdown__clear span { display:block; position:relative; width:10px; height:10px; }
.tware-dropdown__clear span::before,.tware-dropdown__clear span::after { position:absolute; top:50%; left:50%; width:9px; height:1px; border-radius:2px; background:currentColor; content:""; transform:translate(-50%,-50%) rotate(45deg); }
.tware-dropdown__clear span::after { transform:translate(-50%,-50%) rotate(-45deg); }
.tware-dropdown.is-clearable.has-value:hover .tware-dropdown__clear,.tware-dropdown.is-clearable.has-value:focus-within .tware-dropdown__clear { opacity:1; pointer-events:auto; }
.tware-dropdown__clear:hover { border-color:rgba(218,91,91,.96); background:rgba(243,151,151,.94); color:#7f1d1d; }
.tware-dropdown__clear:focus-visible,.tware-dropdown__toggle:focus-visible { outline:2px solid var(--tw-dd-accent); outline-offset:-3px; }
.tware-dropdown__clear:disabled { cursor:default; }
.tware-dropdown__toggle span { display:inline-block; width:8px; height:8px; border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .16s; }
.tware-dropdown[data-state="open"] .tware-dropdown__toggle span { transform:translateY(2px) rotate(225deg); }
.tware-dropdown__popup { position:absolute; z-index:1000; top:calc(100% + 6px); left:0; box-sizing:border-box; width:max-content; min-width:100%; max-width:min(720px,calc(100vw - 28px)); overflow:hidden; border:1px solid #d8dee9; border-radius:12px; background:#fff; padding:0; box-shadow:0 18px 46px rgba(28,37,55,.18); }
.tware-dropdown__popup[popover] { position:fixed; inset:auto; width:max-content; min-width:var(--tw-dd-anchor-width); margin:0; }
.tware-dropdown__popup[data-width-mode="content"] .tware-dropdown__list { width:max-content; min-width:100%; box-sizing:border-box; }
.tware-dropdown__popup[data-width-mode="content"] .tware-dropdown__option { width:max-content; min-width:100%; }
.tware-dropdown__list { max-height:min(360px,50vh); overflow:auto; padding:6px; overscroll-behavior:contain; }
.tware-dropdown__option { display:flex; box-sizing:border-box; width:100%; min-height:38px; align-items:center; overflow:hidden; border:0; border-radius:8px; background:transparent; padding:7px 10px; color:inherit; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; font:inherit; }
.tware-dropdown__option:hover,.tware-dropdown__option.is-active { background:#f0f2fb; color:#3644ad; }
.tware-dropdown__option[aria-selected="true"] { background:#e9ecfb; color:#303fae; font-weight:750; }
.tware-dropdown__option:disabled { color:#a8afbb; cursor:not-allowed; }
.tware-dropdown__option.is-grid,.tware-dropdown__grid-header { display:grid; grid-template-columns:var(--columns); column-gap:12px; }
.tware-dropdown__grid-header { position:sticky; z-index:1; top:-6px; margin:-6px -6px 4px; border-bottom:1px solid #e5e8ee; background:#f7f8fb; padding:9px 16px; color:var(--tw-dd-muted); font-size:12px; font-weight:750; }
.tware-dropdown__option.is-grid>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tware-dropdown__empty,.tware-dropdown__more { margin:0; padding:14px 12px; color:var(--tw-dd-muted); text-align:center; font-size:13px; }
.tware-dropdown__more { border-top:1px solid #edf0f4; }
.tware-dropdown.is-disabled { opacity:.62; }
.tware-dropdown.is-loading .tware-dropdown__toggle { animation:tware-dropdown-spin .8s linear infinite; }
.tware-dropdown[data-density="compact"] { font-size:12px; }
.tware-dropdown[data-density="compact"] .tware-dropdown__control { min-height:34px; border-radius:8px; }
.tware-dropdown[data-density="compact"] .tware-dropdown__input { min-height:32px!important; padding-inline:9px!important; }
.tware-dropdown[data-density="compact"] .tware-dropdown__clear { right:30px; width:18px; height:18px; flex-basis:auto; border-radius:5px; }
.tware-dropdown[data-density="compact"] .tware-dropdown__toggle { width:30px; height:32px; flex-basis:30px; }
.tware-dropdown[data-density="compact"] .tware-dropdown__option { min-height:34px; padding:6px 9px; }
@keyframes tware-dropdown-spin { to { transform:rotate(360deg); } }
@media (max-width:640px) { .tware-dropdown__popup { position:fixed; top:auto; right:12px; bottom:12px; left:12px; max-width:none; } .tware-dropdown__list { max-height:52vh; } }
/* 휴대전화의 조작 높이. 조회 띠의 입력과 같은 38px로 맞춘다. */
@media (max-width:620px) { .tware-dropdown:not([data-density="compact"]) .tware-dropdown__control { min-height:38px; } .tware-dropdown:not([data-density="compact"]) .tware-dropdown__input { min-height:36px!important; } }