.select-ui, .select-ui * { box-sizing: border-box; }
.select-ui { --select-red: #ff3438; position: relative; width: 100%; min-width: 0; color: #222; font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; }
.selected-text { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-height: 50px; padding: 12px 44px 12px 39px; border: 1px solid var(--select-red); border-radius: 10px; background: #fff; color: #111; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; cursor: pointer; }
.selected-text::before, .select-options > div[data-value]::before { content: ''; position: absolute; top: 50%; left: 15px; width: 18px; height: 18px; box-sizing: border-box; transform: translateY(-50%); border: 1px solid #ececec; border-radius: 50%; background-color: #fff; }
.selected-text::before { left: 11px; }
.selected-text::after { content: ''; position: absolute; top: 50%; right: 22px; width: 9px; height: 9px; margin-top: -7px; transform: rotate(45deg); border-right: 2px solid var(--select-red); border-bottom: 2px solid var(--select-red); }
.select-options { display: none; position: absolute; top: 100%; left: 0; z-index: 100; width: 100%; max-height: 272px; margin-top: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #eee; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 10%); scrollbar-width: thin; scrollbar-color: #999 #f6f6f6; }
.installment-ui { margin-top: 16px; }
.selected-text[aria-expanded='true']::after { margin-top: -2px; transform: rotate(225deg); }
.selected-text:focus-visible { outline: 2px solid var(--select-red); outline-offset: 3px; }
.select-options > span { display: block; padding: 8px 15px; border-bottom: 1px solid #eee; background: #f7f7f8; color: #777; font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.select-options > span:not(:first-child) { border-top: 1px solid #eee; }
.select-options > div[data-value] {font-weight:600; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 12px 15px 12px 42px; background: #fff; cursor: pointer; overflow-wrap: anywhere; transition: background-color 120ms ease; }
.select-options > div[data-value]:hover { background: #f7f7f7; }
.select-options > div[data-value].selected { background: #fdf4f5; }
.select-options > div[data-value].selected:hover { background: #fceff0; }
.selected-text::before, .select-options > div[data-value].selected::before { border-color: var(--select-red); background: var(--select-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.5 6 2.3 2.3 4.7-4.6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.select-ui .fee-name { min-width: 0; }
.select-options .fee-name { font-weight: 600; }
.select-options .selected .fee-name { color: #111; font-weight: 600; }
.select-ui .fee-price { color: #777; font-size: 13px; font-weight: 400; }
.selected-text .fee-price { white-space: nowrap; }
.select-options .fee-price { margin-top: 1px; }
.select-options > div[data-value]:focus-visible { outline: 2px solid var(--select-red); outline-offset: -3px; }
.select-options::-webkit-scrollbar { width: 10px; }
.select-options::-webkit-scrollbar-track { border-radius: 10px; background: #f6f6f6; }
.select-options::-webkit-scrollbar-thumb { border: 2px solid #f6f6f6; border-radius: 10px; background: #999; }
@media (prefers-reduced-motion: reduce) { .select-options > div[data-value] { transition: none; } }