/* 색상 */
:root {
    --red: #ff4500;
    --blue: #294C74;
    --main-orange: #ff7633;
    --gray-background: #f5f5f5;
    --gray-border: #e6e6e6;
    --gray-disabled: #999999;

    --white: #fff;
    --black-50: #f2f2f2;
    --black-100: #e6e6e6;
    --black-200: #cccccc;
    --black-300: #b3b3b3;
    --black-400: #999999;
    --black-500: #808080;
    --black-600: #666666;
    --black-700: #4d4d4d;
    --black-800: #333333;
    --black-900: #1a1a1a;
    --black: #000;

    --product_badge_delivery: #ff0000;
    --product_badge_reservation: #0000ff;
}

/* 버튼 */
.btn_share {width: 24px; height: 24px; background: url("/assets/img/icon_share.png"); background-size: 24px; border: none;}
.btn_kakao {width: 24px; height: 24px; background: url("/assets/img/icon_kakao.png"); background-size: 24px; border: none;}
.btn_url {width: 24px; height: 24px; background: url("/assets/img/icon_url.png"); background-size: 24px; border: none;}
.btn_heart {width: 24px; height: 24px; background: url("/assets/img/icon_heart.png"); background-size: 24px; border: none;}
.btn_heart.on {background: url("/assets/img/icon_heart_red.png");}
.btn_back {width: 24px; height: 24px; background: url("/assets/img/icon_back.png"); border: none;}

.btn_plain {height: 32px; color: var(--main-orange); background: var(--white); border: none; border-radius: 4px; font-size: 0.75rem; font-weight: 700; padding: 0 10px;}
.btn_plain:hover {background: var(--gray-background);}
.btn_plain_gray {height: 32px; color: var(--black-400); background: var(--white); border: none; border-radius: 4px; font-size: 0.75rem; font-weight: 700; padding: 0 10px;}
.btn_plain_gray:hover {background: var(--gray-background);}
.btn_plain:disabled, .btn_plain_gray:disabled, .btn_plain:disabled:hover, .btn_plain_gray:disabled:hover {color: var(--gray-border); background: var(--white);}

.btn {min-height: 32px; color: var(--white); background: var(--main-orange); border: none; border-radius: 5px; padding: 0 20px; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; justify-content: center;}
.btn:disabled {background: var(--gray-disabled);}
.btn_white {min-height: 32px; color: var(--main-orange); background: var(--white); border: 1px solid var(--main-orange); border-radius: 5px; padding: 0 20px; font-size: 0.75rem; font-weight: 500;}
.btn_gray {min-height: 32px; color: var(--black-400); background: var(--white); border: 1px solid var(--black-400); border-radius: 5px; padding: 0 20px; font-size: 0.75rem; font-weight: 500;}
.btn_black {min-height: 32px; color: var(--black); background: var(--white); border: 1px solid var(--black); border-radius: 5px; padding: 0 20px; font-size: 0.75rem; font-weight: 500;}
.btn_white:disabled, .btn_black:disabled {color: var(--gray-disabled); border-color: var(--gray-disabled);}

.btn_big {width: 100%; min-height: 60px; color: var(--white); background: var(--main-orange); border: none; border-radius: 20px; font-size: 1.125rem; font-weight: 500;}
.btn_big:disabled {background: var(--gray-disabled);}
.btn_big_white {width: 100%; min-height: 60px; color: var(--main-orange); background: var(--white); border: 1px solid var(--main-orange); border-radius: 20px; font-size: 1.125rem; font-weight: 500;}
.btn_big_white:disabled {color: var(--gray-disabled); border-color: var(--gray-disabled);}

.btn_plain:focus, .btn_plain_gray:focus, .btn:focus, .btn_white:focus, .btn_gray:focus, .btn_black:focus, .btn_big:focus, .btn_big_white:focus {outline: 2px solid #ffccaa;}

.btn.btn_status {min-height: auto; padding: 6px 14px; font-size: 0.9rem; border-radius: 14px;}

/* 인풋 */
.count_input_wrap {width: 75px; position: relative;}
.count_input_wrap button {position: absolute; top: 0; width: 28px; height: 100%; border: none; background: transparent; font-size: 20px; cursor: pointer; color: #555;}
.count_input_wrap button.minus {left: 0;}
.count_input_wrap button.plus {right: 0;}
.count_input_wrap input {height: 28px; text-align: center;}

/* 텍스트 */
.txt_450 {font-size: 0.9rem !important; font-weight: 500 !important;}
.txt_585 {font-size: 0.9rem !important; font-weight: 650 !important;}
.txt_600 {font-size: 1rem !important; font-weight: 600 !important;}
.txt_650 {font-size: 1rem !important; font-weight: 650 !important;}
.txt_715 {font-size: 1.1rem !important; font-weight: 650 !important;}
.txt_825 {font-size: 1.5rem !important; font-weight: 550 !important;}
.txt_910 {font-size: 1.3rem !important; font-weight: 700 !important;}
.txt_1400 {font-size: 2rem !important; font-weight: 700 !important;}
.txt_red {color: var(--red) !important;}
.txt_orange {color: var(--main-orange) !important;}
.txt_gray {color: var(--black-400) !important;}
.required::after {content: "*"; color: var(--red); margin-left: 5px;}

/* 컨테이너 */
.rounded_box {border: 1px solid var(--gray-border); border-radius: 20px; padding: 30px; margin-bottom: 20px;}
.radio_wrap {display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 350;}
.vertical_wrap_5 {display: flex; flex-direction: column; gap: 5px;}
.vertical_wrap_10 {display: flex; flex-direction: column; gap: 10px;}
.horizontal_wrap {display: flex; flex-direction: row; gap: 15px; align-items: center;}

.flex {display: flex; gap: 12px; align-items: center;}

@media (max-width:768px) {
    .rounded_box {width: 100%; padding: 20px;}
    .button_wrap {width: 100% !important; align-items: center;}
    .radio_wrap {gap: 5px; font-size: 14px;}
}

/* 입력폼 */
.form_row {display: flex; margin-bottom: 20px; align-items: center;}
.form_row:last-child {margin-bottom: 0 !important;}
.form_title {min-width: 140px; height: 38px; font-size: 16px; font-weight: 350; display: flex; align-items: center;}
.form_title:not(:first-child) {justify-content: flex-end; min-width: auto;}
.form_row .content {flex: 1; display: flex; flex-direction: column; gap: 10px;}
.form_row .content .row {display: flex; gap: 13px;}
.form_row .content .row > * {display:flex; align-items: center; height: 38px;}
@media (max-width:768px) {
    .form_row {margin-bottom: 15px;}
    .form_row:last-child {margin-bottom: 0 !important;}
    .form_title {font-size: 0.875rem; font-weight: 400;}
    .form_row .content {gap: 5px;}
    .form_row .content .row {gap: 6px;}
}

/* 토스트 */
.toast-container {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; z-index:99;}
.toast {background-color: var(--black-800); color: var(--white); padding: 14px 120px; border-radius: 3px; font-size: 0.875rem; opacity: 0; transform: translateY(100%); transition: opacity 0.3s ease, transform 0.3s ease;}
.toast.show {opacity: 0.95; transform: translateY(0);}
@media (max-width:768px) {
    .toast {padding: 14px 64px;}
}

/* 모달 */
#modal_content {position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 99; top: 0; left: 0; display: none;}
#modal_content.active {display: block;}
#modal_content .modal_wrap {position: absolute; min-width: 320px; min-height: 200px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 20px; background: #fff; padding: 30px 40px;}
#modal_content .modal_wrap .close {position: absolute; right: 25px; top: 20px; cursor: pointer; z-index: 2;}
#modal_content .modal_wrap .modal_title {font-size: 24px; font-weight: 700; color: #000; width: 100%; margin-bottom: 36px; display: flex; align-items: center; column-gap: 10px;}
#modal_content .modal {display: none;}
#modal_content .modal.active {display: block;}
#modal_content .pagination_wrap {margin-top: 45px;}

#modal_content .modal_complete {text-align: center; padding: 20px; width: 550px;}
#modal_content .modal_content {padding: 15px 0; word-break: break-all;}
#modal_content .modal_complete > * {margin-bottom: 10px;}
#modal_content .modal_complete > *:last-child {margin-bottom: 0;}
#modal_content .modal_button_wrap {margin-top: 30px;}

#modal_content .alert_wrap {position: absolute; min-width: 350px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 12px; background: #fff; text-align: center; z-index: 1;}
#modal_content .alert_content_wrap {padding: 18px 24px; word-wrap: break-word; min-height: 96px; align-content: center;}
#modal_content .alert_content_wrap p {line-height: 1.375rem;}
#modal_content .alert_button {width: 100%; height: 52px; color: var(--main-orange); border: none; border-top: 1px solid var(--black-400); border-radius: 0 0 12px 12px;}

#modal_content .prompt_wrap {position: absolute; min-width: 350px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 12px; background: #fff;}
#modal_content .prompt_content_wrap {min-height: 140px; padding: 18px 24px; word-wrap: break-word;}
#modal_content .prompt_content_wrap p {text-align: center; margin: 18px 0 32px;}
#modal_content .prompt_button_wrap {display: flex; height: 52px; border-top: 1px solid var(--black-400);}
#modal_content .prompt_button_wrap button {width: 50%; height: 100%; color: var(--main-orange); border: none;}
#modal_content .prompt_button_wrap button.cancel_button {border-bottom-left-radius: 12px; border-right: 1px solid var(--black-400);}
#modal_content .prompt_button_wrap button.confirm_button {border-bottom-right-radius: 12px;}

#modal_content .confirm_wrap {position: absolute; min-width: 300px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 12px; background: #fff;}
#modal_content .confirm_content_wrap {display: flex; align-items: center; justify-content: center; min-height: 100px; padding: 18px 24px; word-wrap: break-word;}
#modal_content .confirm_content_wrap p {text-align: center; line-height: 1.25rem;}
#modal_content .confirm_button_wrap {display: flex; height: 52px; border-top: 1px solid var(--black-400);}
#modal_content .confirm_button_wrap button {width: 50%; height: 100%; color: var(--main-orange); border: none;}
#modal_content .confirm_button_wrap button.cancel_button {border-bottom-left-radius: 12px; border-right: 1px solid var(--black-400);}
#modal_content .confirm_button_wrap button.confirm_button {border-bottom-right-radius: 12px;}

#full_screen_modal {display: none;}

@media (max-width:768px) {
    #modal_content .modal_wrap {width: 100%; padding: 24px 18px 0; overflow-x: hidden; bottom: 0; transform: translateX(-50%); border-radius: 20px 20px 0 0; height: auto; max-height: 80vh; top: auto;}
    #modal_content .modal_wrap .modal {width: 100%;}
    #modal_content .modal_wrap .close {top: 20px; right: 18px;}
    #modal_content .modal_wrap .modal_title {margin-bottom: 30px; font-size: 1.125rem;}

    #modal_content .modal_wrap .content_wrap {max-height: 90vh; overflow-y: auto;}
    
    #modal_content .modal_complete {width: 100%;}

    #full_screen_modal {position: fixed; width: 100%; height: 100%; background: var(--white); z-index: 99; top: 0; left: 0; display: none;}
    #full_screen_modal.active {display: flex;}
    #full_screen_modal .modal_wrap {width: 100%; padding: 24px 24px 0;}
    #full_screen_modal .modal_wrap .header_wrap {display: flex; width: 100%;}
    #full_screen_modal .modal_wrap .close {cursor: pointer;}
    #full_screen_modal .modal_wrap .modal_title {font-size: 1.125rem; font-weight: 700; width: 100%; text-align: center;}
    #full_screen_modal .modal_wrap .content_wrap {margin-top: 36px; overflow-y: auto;}
    #full_screen_modal .modal_wrap .button_wrap {position: absolute; bottom: 0; left: 0; width: 100%;}
}

/* 바텀시트 */
.modal_overlay {display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 99;}
.modal_overlay.active {display: block;}
.bottom_sheet {position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; left: 50%; top: 50%; border-radius: 20px; background: white; min-width: 320px; min-height: 200px; max-height: 80%;}
.bottom_sheet_header {display: flex; justify-content: space-between; align-items: center; padding: 26px 34px 0 34px;}
.bottom_sheet_title {font-weight: bold; font-size: 1.35rem;}
.bottom_sheet_close {width: 28px; height: 28px; background: url("/assets/img/icon_close.png") no-repeat center center; border: none;}
.bottom_sheet_content {flex: 1; overflow-y: auto; padding: 36px;}
.bottom_sheet_buttons {display: flex; justify-content: center; padding: 20px; column-gap: 10px;}
.bottom_sheet_buttons button {zoom: 1.2;}
@media (max-width:768px) {
    .modal_overlay.active {display: flex; align-items: flex-end; justify-content: center;}
    .bottom_sheet {position: static; transform: none; width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden;}
    .bottom_sheet_content {padding: 10px;}
    .bottom_sheet_buttons {padding: 10px;}
}

/* pagination */
.pagination_wrap {display: flex; align-items: center; justify-content: center; margin-top: 120px; gap: 30px;}
.pagination_wrap a {color: #9A9A9A; font-size: 18px; font-weight: 350; display: flex; align-items: center; justify-content: center;}
.pagination_wrap a.active {color: #000; font-weight: bold;}
.pagination_wrap .control {width: 16px; height: 16px; background-position: center; background-size: contain; background-repeat: no-repeat;}
.pagination_wrap .first {background-image: url(/assets/img/pagination_first_arrow.svg);}
.pagination_wrap .prev {background-image: url(/assets/img/pagination_prev_arrow.png);}
.pagination_wrap .next {background-image: url(/assets/img/pagination_next_arrow.png);}
.pagination_wrap .last {background-image: url(/assets/img/pagination_last_arrow.svg);}

@media (max-width:768px) {
    .pagination_wrap {margin-top: 60px; gap: 14px; margin-bottom: 60px; flex-wrap: wrap;}
}

/* show/hide */
.pc_only {display: inherit !important;}
.mobile_only {display: none !important;}
@media (max-width:768px) {
    .pc_only {display: none !important;}
    .mobile_only {display: inherit !important;}
}

/* 기타 */
.no_data {font-size: 1rem; color: var(--gray-disabled)}
div.no_data {display: flex; justify-content: center; align-items: center; height: 100px;}
td.no_data {text-align: center;}

/* 상품 공통 */
.product {position: relative; height: auto;}
.product img {object-fit: scale-down;}
.product .thum {height: auto; aspect-ratio: 1/1;}
.product .dec {min-height: 100px; padding: 10px 0;}
.floating_icon {position: absolute; width: 30%; aspect-ratio: 1/1; top: 0; left: 0;}
.floating_icon img {width: 100%;}