/* 전역 — 모든 인터랙티브 버튼/칩/라벨 줄바꿈 방지 */
.btn,
button:not([class*="editor"]):not([class*="content"]),
a.btn,
span.btn,
.label,
.badge,
.input-group-addon,
.input-group-btn,
.search_btn,
.base_btn,
.base_purple_btn,
.search_reulst_btn,
.detail_btn,
.tip_box,
.tw-action-row > * {
    white-space: nowrap;
}

/*!
 * toss-form.css — 전역 폼 컨트롤(select·input·textarea) 토스 톤 통일
 * 고객 페이지에서 사용되는 모든 select 박스의 외형/열린 상태(option)까지 일관되게 적용.
 * customer-side main 래퍼에서 마지막에 로드되어 기존 CSS를 덮어쓴다.
 *
 * 디자인 토큰:
 *   - Background    #f8f9fa  (default), #ffffff (focus)
 *   - Border        #e5e8eb  (resting), #3182f6 (focus)
 *   - Focus ring    rgba(49,130,246,0.14) 4px
 *   - Text          #191f28  (primary), #6b7684 (muted)
 *   - Radius        10px
 */

/* ============================================================
   기본: select 컨트롤 자체 (닫힌 상태)
   ============================================================ */
select,
select.form-control,
.form-control[type="select"],
.search_reulst_txt02 select,
.find_modal_con_btm_btn_wrap select,
.mypg_table_search select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #f8f9fa !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%234e5968' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    border: 1.5px solid #e5e8eb !important;
    border-radius: 10px !important;
    padding: 9px 36px 9px 14px !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #191f28 !important;
    line-height: 1.4;
    box-shadow: none !important;
    outline: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
    height: auto !important;
    min-height: 40px;
    letter-spacing: -0.2px;
    /* WebKit이 추가하는 ::after triangle 강제 제거 */
    text-overflow: ellipsis;
}

/* 호버 — 보더만 살짝 진하게 */
select:hover:not(:disabled):not([readonly]),
.form-control:hover:not(:disabled):not([readonly]) {
    border-color: #d1d6db !important;
    background-color: #ffffff !important;
}

/* 포커스 — 흰 배경 + 토스 블루 보더 + 4px 글로우링 */
select:focus,
select.form-control:focus {
    background-color: #ffffff !important;
    border-color: #3182f6 !important;
    box-shadow: 0 0 0 4px rgba(49, 130, 246, 0.14) !important;
    outline: none;
}

/* 비활성/리드온리 — 회색 톤 + 화살표 흐리게 */
select:disabled,
select[readonly],
select.form-control:disabled {
    background-color: #f1f3f5 !important;
    color: #b0b8c1 !important;
    border-color: #f1f3f5 !important;
    cursor: not-allowed;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23b0b8c1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* 작은 사이즈 (input-sm 등) */
select.input-sm,
.input-sm > select,
.form-control.input-sm {
    padding: 6px 32px 6px 12px !important;
    font-size: 13px !important;
    min-height: 34px;
    background-position: right 10px center !important;
}

/* 큰 사이즈 (input-lg) */
select.input-lg,
.form-control.input-lg {
    padding: 12px 40px 12px 16px !important;
    font-size: 15px !important;
    min-height: 48px;
    border-radius: 12px !important;
}

/* IE 화살표 제거 */
select::-ms-expand { display: none; }

/* ============================================================
   <option> 항목 — 열린 상태 (지원되는 브라우저만 — 주로 Firefox + 일부 WebKit)
   ※ 네이티브 select 드롭다운 팝업은 OS/브라우저가 렌더하므로 모든 시각 속성이
     적용되지는 않습니다. 폰트·색상은 다수 브라우저에서 반영됩니다.
   ============================================================ */
select option {
    background-color: #ffffff;
    color: #191f28;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px;
    letter-spacing: -0.2px;
}
select option:hover,
select option:checked,
select option:focus {
    background: linear-gradient(#3182f6, #3182f6) !important;
    background-color: #3182f6 !important;
    color: #ffffff !important;
    font-weight: 700;
}
select option[disabled] {
    color: #c1c7d0;
}

/* Firefox 전용 — option 그룹 헤더 스타일 */
select optgroup {
    background-color: #f9fafb;
    color: #4e5968;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* ============================================================
   input·textarea도 같은 톤으로 통일 (select와 짝 맞춤)
   .form-control 클래스 유무와 무관하게 모든 텍스트성 인풋에 적용.
   data-no-ts 속성이 있으면 제외.
   ============================================================ */
input[type="text"]:not([data-no-ts]):not(.select2-search__field),
input[type="email"]:not([data-no-ts]),
input[type="password"]:not([data-no-ts]),
input[type="tel"]:not([data-no-ts]),
input[type="number"]:not([data-no-ts]),
input[type="url"]:not([data-no-ts]),
input[type="search"]:not([data-no-ts]),
input[type="date"]:not([data-no-ts]),
input[type="datetime-local"]:not([data-no-ts]),
input[type="time"]:not([data-no-ts]),
input[type="month"]:not([data-no-ts]),
input[type="week"]:not([data-no-ts]),
textarea:not([data-no-ts]) {
    background-color: #f8f9fa !important;
    border: 1.5px solid #e5e8eb !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
    color: #191f28 !important;
    line-height: 1.4;
    box-shadow: none !important;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    letter-spacing: -0.2px;
    box-sizing: border-box;
    font-family: inherit;
}
input[type="text"]:not([data-no-ts]):focus,
input[type="email"]:not([data-no-ts]):focus,
input[type="password"]:not([data-no-ts]):focus,
input[type="tel"]:not([data-no-ts]):focus,
input[type="number"]:not([data-no-ts]):focus,
input[type="url"]:not([data-no-ts]):focus,
input[type="search"]:not([data-no-ts]):focus,
input[type="date"]:not([data-no-ts]):focus,
input[type="datetime-local"]:not([data-no-ts]):focus,
input[type="time"]:not([data-no-ts]):focus,
input[type="month"]:not([data-no-ts]):focus,
input[type="week"]:not([data-no-ts]):focus,
textarea:not([data-no-ts]):focus {
    background-color: #ffffff !important;
    border-color: #3182f6 !important;
    box-shadow: 0 0 0 4px rgba(49, 130, 246, 0.14) !important;
    outline: none;
}
input:not([data-no-ts])::placeholder,
textarea:not([data-no-ts])::placeholder {
    color: #b0b8c1 !important;
    font-weight: 400;
    letter-spacing: -0.2px;
}

/* readonly/disabled — 회색 톤 */
input[type="text"]:not([data-no-ts])[readonly]:not([calendarviewis]):not([calendartimeviewis]),
input[type="text"]:not([data-no-ts]):disabled,
input[type="email"]:not([data-no-ts]):disabled,
input[type="tel"]:not([data-no-ts]):disabled,
textarea:not([data-no-ts]):disabled {
    background-color: #f1f3f5 !important;
    color: #8b95a1 !important;
    cursor: not-allowed;
}

/* sm 사이즈 */
input.input-sm:not([data-no-ts]),
.input-sm > input:not([data-no-ts]) {
    padding: 6px 12px !important;
    font-size: 13px !important;
    min-height: 34px;
}

/* lg 사이즈 */
input.input-lg:not([data-no-ts]) {
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    min-height: 48px;
}

/* textarea 기본 높이 */
textarea:not([data-no-ts]) {
    min-height: 68px;
    resize: vertical;
}

/* ============================================================
   Bootstrap datepicker 팝업 — calendarviewis="true" 인풋이 띄우는 팝업
   ============================================================ */
.datepicker.datepicker-dropdown,
.bootstrap-datetimepicker-widget {
    background: #ffffff !important;
    border: 1px solid #f1f3f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 8px rgba(17, 24, 39, 0.06) !important;
    padding: 10px !important;
    font-family: inherit;
}
.datepicker table {
    border-collapse: separate !important;
    border-spacing: 2px !important;
}
.datepicker table tr td,
.datepicker table tr th {
    background: transparent !important;
    color: #4e5968 !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px !important;
    padding: 0 !important;
    width: 32px;
    height: 32px;
    text-align: center;
    vertical-align: middle;
    transition: background-color .12s ease, color .12s ease;
}
.datepicker table tr th {
    color: #8b95a1 !important;
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background: #f1f3f5 !important;
    color: #191f28 !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: #fdecee !important;
    color: #c93340 !important;
    font-weight: 700;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active.active:hover {
    background: #3182f6 !important;
    color: #ffffff !important;
    font-weight: 700;
    border: 0 !important;
    text-shadow: none !important;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover {
    background: #e8f3ff !important;
    color: #1b64da !important;
    border-radius: 0 !important;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #c1c7d0 !important;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: #d1d6db !important;
    background: transparent !important;
    cursor: not-allowed;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
    color: #191f28 !important;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border-radius: 8px !important;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
    background: #f1f3f5 !important;
}
.datepicker .datepicker-months span,
.datepicker .datepicker-years span,
.datepicker .datepicker-decades span,
.datepicker .datepicker-centuries span {
    background: transparent !important;
    color: #4e5968 !important;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px !important;
    padding: 8px 0;
    width: 25%;
    transition: background-color .12s ease, color .12s ease;
}
.datepicker .datepicker-months span:hover,
.datepicker .datepicker-years span:hover {
    background: #f1f3f5 !important;
    color: #191f28 !important;
}
.datepicker .datepicker-months .active,
.datepicker .datepicker-years .active,
.datepicker .datepicker-months .active:hover {
    background: #3182f6 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Bootstrap datetimepicker (시간 포함) */
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    border-radius: 8px !important;
    font-family: inherit;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: #3182f6 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}
.bootstrap-datetimepicker-widget table td.today,
.bootstrap-datetimepicker-widget table td.today:hover {
    background: #fdecee !important;
    color: #c93340 !important;
}

/* calendarviewis="true" / calendartimeviewis="true" 인풋 — 클릭 가능 표시 */
input[calendarviewis="true"],
input[calendartimeviewis="true"] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Crect x='2' y='3' width='10' height='9' rx='1.5' stroke='%234e5968' stroke-width='1.4'/%3E%3Cpath d='M2 6h10' stroke='%234e5968' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M5 2v2M9 2v2' stroke='%234e5968' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-color: #f8f9fa !important;
    padding-right: 32px !important;
    cursor: pointer;
}
input[calendarviewis="true"]:focus,
input[calendartimeviewis="true"]:focus {
    background-color: #ffffff !important;
}

/* input-group (Bootstrap) — addon이 붙은 인풋 */
.input-group { display: flex; align-items: stretch; }
.input-group-addon {
    background: #f1f3f5 !important;
    border: 1.5px solid #f1f3f5 !important;
    color: #6b7684 !important;
    font-size: 13px !important;
    font-weight: 600;
    padding: 0 12px !important;
    display: inline-flex;
    align-items: center;
    border-radius: 10px !important;
}
.input-group .form-control,
.input-group input {
    border-radius: 10px !important;
}
.input-group > input + .input-group-addon,
.input-group > .form-control + .input-group-addon {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
}
.input-group > .input-group-addon + input,
.input-group > .input-group-addon + .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.input-group > input:has(+ .input-group-addon),
.input-group > .form-control:has(+ .input-group-addon) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
}

/* ============================================================
   modern <select> popup (Chrome 130+ base-select 실험적 지원)
   브라우저가 지원하면 팝업 자체를 토스 카드처럼 스타일링.
   미지원 브라우저에서는 무시되므로 안전.
   ============================================================ */
@supports (appearance: base-select) {
    select::picker(select) {
        background: #ffffff;
        border: 1px solid #f1f3f5;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 8px rgba(17, 24, 39, 0.06);
        padding: 6px;
        margin-top: 4px;
        max-height: 320px;
        overflow-y: auto;
    }
    select option {
        padding: 9px 12px;
        border-radius: 8px;
        margin-bottom: 1px;
        cursor: pointer;
        transition: background-color .12s ease, color .12s ease;
    }
    select option:hover,
    select option:checked {
        background: #f1f3f5;
        color: #191f28;
    }
    select option:checked {
        background: #e8f3ff;
        color: #1b64da;
        font-weight: 700;
    }
}

/* ============================================================
   기존 보라색 잔재 무력화 (혹시 남아있는 곳)
   ============================================================ */
select:focus {
    border-color: #3182f6 !important;
}

/* 다중 선택 select */
select[multiple] {
    background-image: none !important;
    padding-right: 12px !important;
    height: auto;
    min-height: 80px;
}
select[multiple] option {
    padding: 7px 12px;
    border-radius: 6px;
    margin-bottom: 1px;
}

/* ============================================================
   파일 인풋 — 네이티브 file selector를 토스 톤으로 통일
   ::file-selector-button 사용 (Chrome 89+, Firefox 82+, Safari 14.1+)
   ============================================================ */
input[type="file"],
input[type="file"].form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #f8f9fa !important;
    border: 1.5px dashed #cfd5db !important;
    border-radius: 10px !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    color: #4e5968 !important;
    box-shadow: none !important;
    width: 100%;
    cursor: pointer;
    height: auto !important;
    min-height: 42px;
    line-height: 1.4;
    overflow: hidden;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
input[type="file"]:hover:not(:disabled),
input[type="file"].form-control:hover:not(:disabled) {
    border-color: #3182f6 !important;
    background: #f0f6ff !important;
}
input[type="file"]:focus,
input[type="file"].form-control:focus {
    outline: none;
    border-color: #3182f6 !important;
    border-style: solid !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(49, 130, 246, 0.14) !important;
}

/* WebKit / Chrome / Edge / Safari */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
    -webkit-appearance: none;
    appearance: none;
    background: #191f28;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin: 5px 10px 5px 5px;
    transition: background-color .15s ease, transform .12s ease;
    letter-spacing: -0.2px;
    font-family: inherit;
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
    background: #2a3037;
    transform: translateY(-1px);
}
input[type="file"]::-webkit-file-upload-button:active,
input[type="file"]::file-selector-button:active {
    transform: translateY(0);
}

/* Firefox 추가 보정 */
input[type="file"]::-moz-file-upload-button {
    background: #191f28;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin: 5px 10px 5px 5px;
}

/* 비활성 */
input[type="file"]:disabled,
input[type="file"].form-control:disabled {
    background: #f1f3f5 !important;
    color: #b0b8c1 !important;
    border-color: #f1f3f5 !important;
    cursor: not-allowed;
}
input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button {
    background: #d1d6db;
    cursor: not-allowed;
}

/* input-sm 크기 */
input[type="file"].input-sm {
    min-height: 36px;
    font-size: 12.5px !important;
}
input[type="file"].input-sm::-webkit-file-upload-button,
input[type="file"].input-sm::file-selector-button {
    padding: 7px 12px;
    font-size: 12px;
}

/* ============================================================
   토스 커스텀 select 드롭다운 (toss-select.js로 자동 생성)
   네이티브 <select>를 hidden 처리하고 .ts-select 래퍼로 교체.
   ============================================================ */
.ts-select {
    position: relative;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}
.ts-select__native {
    /* 원본 select는 시각적으로 가려두지만 form submit/접근성을 위해 유지 */
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
}
.ts-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: #f8f9fa;
    border: 1.5px solid #e5e8eb;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #191f28;
    letter-spacing: -0.2px;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    text-align: left;
    font-family: inherit;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    min-height: 40px;
    box-sizing: border-box;
}
.ts-select__trigger:hover {
    border-color: #d1d6db;
    background: #ffffff;
}
.ts-select__trigger:focus,
.ts-select.is-open .ts-select__trigger {
    border-color: #3182f6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(49, 130, 246, 0.14);
}
.ts-select.is-disabled .ts-select__trigger {
    background: #f1f3f5;
    color: #b0b8c1;
    border-color: #f1f3f5;
    cursor: not-allowed;
}
.ts-select.is-disabled .ts-select__trigger:hover { background: #f1f3f5; }
.ts-select__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ts-select__value--placeholder { color: #b0b8c1; font-weight: 400; }
.ts-select__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4e5968;
    transition: transform .18s ease, color .15s ease;
    pointer-events: none;
}
.ts-select.is-open .ts-select__arrow { transform: rotate(180deg); color: #3182f6; }

/* 패널 (body 포털) */
.ts-select__panel {
    position: absolute;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid #f1f3f5;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 8px rgba(17, 24, 39, 0.06);
    padding: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    transform: translateY(-4px);
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
    min-width: 120px;
    max-height: 320px;
}
.ts-select__panel.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity .15s ease, transform .15s ease, visibility 0s 0s;
}
.ts-select__panel.is-above.is-open {
    transform: translateY(-100%) translateY(0);
}

.ts-select__option {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: #191f28;
    cursor: pointer;
    letter-spacing: -0.2px;
    margin-bottom: 1px;
    line-height: 1.4;
    transition: background-color .12s ease, color .12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ts-select__option:hover,
.ts-select__option.is-highlight {
    background: #f1f3f5;
    color: #191f28;
}
.ts-select__option.is-selected {
    background: #e8f3ff;
    color: #1b64da;
    font-weight: 700;
}
.ts-select__option.is-selected.is-highlight {
    background: #d6e8ff;
    color: #1853b0;
}
.ts-select__option.is-disabled {
    color: #c1c7d0;
    cursor: not-allowed;
}
.ts-select__option.is-disabled:hover { background: transparent; color: #c1c7d0; }

/* 사이즈 변형 */
.input-sm.ts-select__native + .ts-select__trigger,
.ts-select .ts-select__trigger.input-sm {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 13px;
}

/* 스크롤바 */
.ts-select__panel::-webkit-scrollbar { width: 8px; }
.ts-select__panel::-webkit-scrollbar-thumb { background: #d1d6db; border-radius: 8px; }
.ts-select__panel::-webkit-scrollbar-track { background: transparent; }