:root {
    /* ---brand colors--- */
    --main: #ed6b1a;
    --secondary: #21252a;

    --palettes-orange-900: #ff7040;
    --palettes-orange-800: #ff7040cc;
    --palettes-orange-700: #ff7040b3;
    --palettes-orange-600: #ff704099;
    --palettes-orange-500: #ff704080;
    --palettes-orange-400: #ff704066;
    --palettes-orange-300: #ff70404d;
    --palettes-orange-200: #ff704033;
    --palettes-orange-100: #ff70401a;

    /* ---text colors--- */
    --color-text-01: #182024;
    --color-text-02: #5f5f5f;
    --color-text-03: #6c757d;
    --color-text-04: #adb5bd;

    /* ---semantic--- */
    --semantic-error: #ff334b;
    --semantic-warning: #ffb82e;
    --semantic-success: #22ba4f;
    --semantic-info: #4270ed;

    /* ---stroke--- */
    --stroke-01: #dee2e6;
    --stroke-02: #21252a;

    /* ---background--- */
    --background-01: #f8f9fa;

    /* width */
    --width-1400: 1400px;
}

/* button */
.btn-contain {
    height: 48px;
    border-radius: 16px;
    background-color: var(--palettes-orange-900);
    border: 1px solid transparent;
    color: #FFF;
    letter-spacing: 0.36px;
    cursor: pointer;
    transition: .25s ease;
}

.btn-contain:hover {
    box-shadow: 0px 5px 10px 0px rgba(255, 112, 64, 0.25);
}

.btn-contain:disabled {
    background-color: var(--color-text-04);
    cursor: default;
}

.btn-contain:disabled:hover {
    box-shadow: none;
}

.btn-outlined {
    height: 48px;
    border-radius: 16px;
    background-color: #ffffffe5;
    border: 1px solid var(--palettes-orange-900);
    color: var(--palettes-orange-900);
    letter-spacing: 0.36px;
    cursor: pointer;
    transition: .25s ease;
}

.btn-outlined:hover {
    box-shadow: 0px 5px 10px 0px rgba(255, 112, 64, 0.25);
}

.btn-outlined:disabled {
    border-color: var(--color-text-04);
    cursor: default;
}

.btn-outlined:disabled:hover {
    box-shadow: none;
}

/* chips */
.chip-sub {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 30px;
    border: 1px solid var(--stroke-02);
    font-size: .75rem;
    font-weight: 600;
}

/* rating */
.rating-wp {
    display: flex;
    align-items: center;
}

.rating-wp span {
    width: 1.1rem;
    height: 1.1rem;
    overflow: hidden;
}

.rating-wp span img {
    height: 1.2rem;
    filter: invert(83%) sepia(9%) saturate(4876%) hue-rotate(333deg) brightness(105%) contrast(102%);
}

/* select */
.btn-select {
    width: 200px;
    border: 1px solid var(--stroke-01);
    border-radius: 10px;
    padding: 12px 28px 12px 14px;
    background: url(../images/icon/ic_expand_down.svg)no-repeat center right 14px / 1rem #FFF;
    outline: none;
    cursor: pointer;
    transition: .1s ease;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    color: var(--color-text-01);
}

.btn-select.click {
    border: 1px solid var(--palettes-orange-900);
    background: url(../images/icon/ic_expand_up.svg)no-repeat center right 14px / 1rem #FFF;
}

.list-select {
    position: absolute;
    overflow: hidden;
    border: 1px solid var(--stroke-01);
    border-radius: 10px;
    display: none;
    background-color: #FFF;
    margin-top: 10px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 99;
}

.list-select::-webkit-scrollbar {
    width: 10px;
}

.list-select::-webkit-scrollbar-thumb {
    background-color: var(--stroke-01);
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid transparent;
}

.list-select::-webkit-scrollbar-track {
    border-radius: 10px;
}

.list-select.on {
    display: block;
}

.btn-select:active+.list-select {
    display: block;
}

.list-select li {
    width: 200px;
}

.list-select li button {
    display: block;
    width: 184px;
    background-color: #fff;
    border-top: none;
    margin: 8px;
    padding: 7px 10px 7px;
    border-radius: 10px;
    transition: .1s ease;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;

}

.list-select li button:hover {
    background-color: var(--palettes-orange-300);
}

/* datepicker */
.ui-widget-header {
    border: 0px solid var(--stroke-01);
    background: #fff;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 16px 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 10px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 0px solid var(--stroke-01);
    background-color: transparent;
    font-weight: normal;
    color: var(--color-text-02);
    text-align: center;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0;
    line-height: 16px;
    text-align: center;
    font-size: 1rem;
    padding: 0px;
    font-weight: 600;
}

.ui-datepicker {
    display: none;
    background-color: #fff;
    border-radius: 16px;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 10px 20px;
    min-width: 300px;
    width: auto;
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--stroke-01);
}

#datepicker:focus>.ui-datepicker {
    display: block;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker-next {
    float: right;
}

.ui-state-disabled {
    cursor: auto;
    color: hsla(0, 0%, 80%, 1);
}

.ui-datepicker-title {
    text-align: center;
    padding: 10px;
    font-weight: 100;
    font-size: 20px;
}

.ui-datepicker-calendar {
    width: 100%;
}

.ui-datepicker-calendar>thead>tr>th {
    padding: 5px;
}

.ui-datepicker-calendar>thead>tr>th span {
    font-size: .875rem;
    font-weight: 400;
}

.ui-datepicker-calendar>tbody>tr>td>a {
    color: var(--color-text-01);
    font-weight: 600;
    text-decoration: none;
}

.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover {
    cursor: auto;
    background-color: #fff;
}

.ui-datepicker-calendar>tbody>tr>td {
    border-radius: 100%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    text-align: center;
    padding: 0;
    vertical-align: middle;
}

.ui-datepicker-calendar>tbody>tr>td:hover {
    background-color: transparent;
    opacity: 0.6;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
    border: 0px solid var(--stroke-01);
    background-color: transparent;
    font-weight: normal;
    color: var(--color-text-01);
}

.ui-widget-header .ui-icon {
    background: url(../images/icon/ic_expand_right.svg)no-repeat center center / 1rem;
}

.ui-datepicker .ui-datepicker-prev {
    transform: rotate(180deg);
}

.ui-icon-circle-triangle-e {
    background-position: -20px 0px;
    background-size: 36px;
}

.ui-icon-circle-triangle-w {
    background-position: -0px -0px;
    background-size: 36px;
}

.ui-datepicker-calendar>tbody>tr>td:first-child a,
.ui-datepicker-calendar>thead>tr>th:first-child {
    color: var(--semantic-error);
}

.ui-datepicker-calendar>tbody>tr>td:last-child a,
.ui-datepicker-calendar>thead>tr>th:last-child {
    color: var(--semantic-info);
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 0px;
    background: transparent;
    color: var(--palettes-orange-900);
}

.inp {
    padding: 10px 10px;
    background-color: var(--palettes-orange-100);
    border-radius: 4px;
    border: 0px;
}

.inp:focus {
    outline: none;
    background-color: var(--palettes-orange-100);
}

.ui-datepicker-current-day {
    background-color: var(--palettes-orange-100);
    border-radius: 50%;
}

.ui-datepicker-current-day a.ui-state-active {
    color: var(--palettes-orange-900);
}

.ui-datepicker-calendar>tbody>tr>td a.ui-state-hover {
    color: var(--palettes-orange-900);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.datepicker {
    width: 160px;
    border: 1px solid var(--stroke-01);
    border-radius: 10px;
    padding: 12px 28px 12px 14px;
    background: url(../images/icon/ic_calendar.svg) no-repeat center right 14px / 1rem #FFF;
    outline: none;
    cursor: pointer;
    transition: .1s ease;
    color: var(--color-text-01);
}

.datepicker.click {
    border-color: var(--palettes-orange-900);
}

/* radio */
.radiobox label {
    font-size: var(--subtit-01);
    padding: .5rem;
}

.radiobox [type="radio"],
.radiobox span {
    vertical-align: middle;
}

.radiobox [type="radio"] {
    appearance: none;
    border: 2px solid var(--stroke-01) !important;
    border-radius: 50% !important;
    width: 1.25rem;
    height: 1.25rem;
    transition: .2s ease;
    margin-right: .25rem;
    padding: 0 !important;
    background-color: #FFF;
}

.radiobox [type="radio"]:checked {
    border: 5px solid var(--main) !important;
}

.radiobox [type="radio"]:focus-visible {
    outline: 5px solid var(--main) !important;
}

.radiobox [type="radio"]:disabled {
    background-color: var(--stroke-01);
    box-shadow: none;
    opacity: 0.7;
}

.radiobox [type="radio"]:disabled+.radiobox span {
    opacity: 0.7;
    cursor: not-allowed;
}

/* modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
    transition: .2s ease;
    z-index: 1000;
}

.modal.on {
    display: block;
}

body:has(.modal.on) {
    overflow-y: hidden;
}

.modal .modal_popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 30px;
    border: 1px solid var(--stroke-01);
    background: #FFF;
    border-radius: 26px;
}

.modal .modal_popup .close_btn {
    display: block;
    width: 100px;
    margin-left: auto;
    margin-top: 20px;
}

.modal .modal_popup h3 {
    font-size: 1.25rem;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--stroke-01);
}