@charset "utf-8";

/* Common */
.opt-tbl { width:100%; border-collapse:collapse; padding:0px; margin:0 0 15px; border:0px; border:1px solid #ddd; border-bottom:0px; background:#fff;} 
.opt-tbl th { width:120px; text-align:center; padding:8px 10px; border-bottom:1px solid #ddd; background:#fafafa; white-space:nowrap;}
.opt-tbl td { padding:8px 10px; border-bottom:1px solid #ddd;}
.bsk-tbl th { text-align:center; }
.bsk-tbl .well { margin:6px 0px !important; }
.bsk-tbl .well ul  { padding:0; padding-left:15px; margin:0; }
.bsk-tbl .well li  { font-size:12px; }
.item-type { position:absolute; left:0; bottom:0; background: rgba(0, 0, 0, 0.7); width:100%; color: rgb(255,255,255); padding:3px; font-size:11px; letter-spacing:-1px; }
.addr-line { margin-bottom:7px; }
.radio-line label { margin-right:20px; line-height:24px; cursor:pointer; }
.radio-line label span { vertical-align:middle; }

#sod_frm_escrow { margin:0px; }
#sod_frm_escrow h2 { display:none; }
#sod_frm_escrow img { margin:0 auto 15px }

/* Personal List */
.ppay-box h2 { margin: 0px; padding: 12px 15px 0px; color: rgb(51, 51, 51); font-size: 16px; font-weight: 500; text-align:center; }
.ppay-box .ppay-fa { padding: 20px 0px 10px; }
.ppay-box .ppay-fa i { color: rgb(97, 97, 97); font-size: 80px; }
.ppay_wrap .ppay-container {
    margin-right: -25px;
    margin-bottom: -30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.ppay_wrap .ppay-row {
    width: 25%;
}
.ppay_wrap .img-wrap {
    padding-bottom: 100%;
}
.ppay_wrap .ppay-box {
    margin-right: 25px;
    margin-bottom: 70px;
    border: 0;
    text-align: left;
    transition:0.3s linear; 
    overflow: hidden; 
    position: relative; 
    cursor: default; 
}
.ppay_wrap .ppay-box .title {
    margin: 0 0 10px;
    padding: 15px 0 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--main-box-font-color);
}
.ppay_wrap .ppay-box .order_price {
    display: block;
    font-weight: 500;
    font-size: 16px;
    color:var(--main-box-font-color);
}
.ppay_wrap .ppay-box .order_price span {
    margin-left: -4px;
}
.ppay_wrap .ppay-box .img-item img {
    max-width: inherit;
    width: auto;
}
/* 개인결제 검색폼 */
.ppay_search_wrap {
    margin-bottom: 40px;
}
.ppay_search_wrap .ppay_search_box {
    position: relative;
    display: flex;
    justify-content: flex-end;
}
.ppay_search_wrap .ppay_search_box input {
    width: 290px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    height: 46px;
    font-size: 15px;
    line-height: 44px;
    padding: 0 20px;
    background-color: #fff;
    color: #0c0c0c;
}
.ppay_search_wrap .ppay_search_box button {
    display: block;
    padding: 15px;
    background-color: var(--main-btn-point-color);
    border: 1px solid var(--main-btn-line-point-color);
    border-radius: 5px;
    margin-left: 10px;
}

/* 개인결제 폼 */
.form-horizontal.personalpayform {
    background-color: #f9f9f9;
    border-radius: 20px;
}
.ppay_form_wrap {
    padding: 60px 0 50px;
}
.ppay_form_wrap .ppay_title {
    text-align: center;
}
.ppay_form_wrap .ppay_title .title {
    font-weight: 500;
    font-size: 24px;
    color: #0c0c0c;
}
.ppay_form_wrap .ppay_title .text {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.2;
    color: #999;
}
.ppay_form_wrap .ppay_content {
    width: 600px;
    margin: 40px auto 0;
}
.ppay_form_wrap .ppay_content .ppay_box {
    display: table;
    width: 100%;
}
.ppay_form_wrap .ppay_content .ppay_box + .ppay_box {
    margin-top: 10px;
}
.ppay_form_wrap .ppay_box .pp_label {
    display: table-cell;
    width: 150px;
    font-weight: 400;
    font-size: 16px;
    line-height: 40px;
    color: #0c0c0c;
    vertical-align: top;
}
.ppay_form_wrap .ppay_box .pp_label.lh46 {
    line-height: 46px;
}
.ppay_form_wrap .ppay_box .pp_answer {
    display: table-cell;
    width: calc(100% - 150px);
}
.ppay_form_wrap .ppay_box .pp_row {
    width: 100%;
    min-height: 40px;
    padding: 7px 0;
    font-size: 16px;
    line-height: 1.4;
    color: #0c0c0c;
}
/* .ppay_form_wrap .ppay_box .pp_bold{font-weight:600; font-size:18px} */
.ppay_form_wrap .ppay_box .pp_input {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    border-radius: 5px;
    border: 1px solid #d6d6d6;
    background-color: #fff;
    font-size: 16px;
    line-height: 38px;
    color: #0c0c0c;
}
.ppay_form_wrap .ppay_box .pp_answer.radio_box {
    padding-top: 4px;
}
.ppay_form_wrap .ppay_box .pp_radio {
    display: inline-flex;
    margin: 0 8px 8px 0;
    vertical-align: top;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ppay_form_wrap .ppay_box .pp_radio + .pp_radio {
    margin-left: 0;
}
.ppay_form_wrap .ppay_box .pp_radio input[type="radio"] {
    margin: 0;
    display: none;
}
.ppay_form_wrap .ppay_box .pp_radio .pp_radio_face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: #555;
    white-space: nowrap;
    word-break: keep-all;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.ppay_form_wrap .ppay_box .pp_radio:hover .pp_radio_face {
    border-color: var(--main-btn-point-color);
    color: var(--main-btn-point-color);
}
.ppay_form_wrap .ppay_box .pp_radio input[type="radio"]:checked + .pp_radio_face {
    border-color: var(--main-btn-point-color);
    background-color: var(--main-btn-point-color);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* 개인결제 폼 입력/금액 폴리시 */
.ppay_form_wrap .ppay_box .pp_input:focus {
    border-color: var(--main-btn-point-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
    outline: none;
}
.ppay_form_wrap .ppay_box .pp_bold {
    font-weight: 600;
}
.ppay_form_wrap .ppay_box #settle_bank {
    padding-top: 5px;
}
.ppay_form_wrap .ppay_box #settle_bank .pp_bank_label {
    color: #0c0c0c;
    font-weight: 400;
}
.ppay_form_wrap .ppay_box .pp_bank_box + .pp_bank_box {
    margin-top: 15px;
}
.ppay_form_wrap .ppay_box .pp_bank_label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #333;
}
.ppay_form_wrap .ppay_box .pp_bank_check {
    width: 100%;
    height: 46px;
    margin-top: 10px;
    padding: 0 15px;
    border-radius: 5px;
    border: 1px solid #d6d6d6;
    background: #fff;
    font-size: 16px;
    line-height: 46px;
    color: #999999;
}
.ppay_form_wrap .ppay_box select.pp_bank_check {
    padding-left: 11px;
    appearance: none;
    background: url(../img/personalpayform_arr.png) no-repeat calc(100% - 15px) center;
    background-color: #fff;
}
.form-horizontal .btn_confirm {
    padding-bottom: 60px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.personalpayform .btn_confirm .btn {
    border-radius: 3px !important;
    min-width: 237px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1em;
    height: 60px;
    display: block;
}

@media (max-width: 1400px) {
    .ppay_wrap .ppay-box .img-item img {
        width: 100%;
    }
}


@media (max-width: 1199px) {
    /* 개인결제 리스트 */
    .ppay_wrap .ppay-row {
        width: 33.3333%;
    }
}
@media (max-width: 991px) {
    /* 개인결제 리스트 */
    .ppay_wrap .ppay-container {
        margin-right: -15px;
        margin-bottom: -25px;
    }
    .ppay_wrap .ppay-row {
        width: 50%;
    }
    .ppay_wrap .ppay-box {
        margin-right: 10px;
        margin-bottom: 30px;
    }
    .ppay_wrap .ppay-box .title {
        padding: 10px 0 0;
        font-size: 13px;
    }
    .ppay_wrap .ppay-box .order_price {
        font-size: 14px;
    }
    .ppay_wrap .ppay-box .order_price span {
        margin-left: -3px;
    }
    /* 개인결제 검색폼 */
    .ppay_search_wrap {
        margin-bottom: 25px;
    }
    .ppay_search_wrap .ppay_search_box input {
        font-size: 13px;
        border-radius: 2.5px;
        padding: 0 15px;
        height: 45px;
        line-height: 43px;
        width: calc(100% - 56px);
    }
    .ppay_search_wrap .ppay_search_box button {
        border-radius: 2.5px;
        margin-left: 10px;
        padding: 14px 14.25px;
    }
    .ppay_search_wrap .ppay_search_box button img {
        height: 14px;
    }
    /* 개인결제 폼 */
    .form-horizontal.personalpayform {
        border-radius: 5px;
        margin-top: -5px;
    }
    .ppay_form_wrap {
        padding: 30px 0 20px;
    }
    .ppay_form_wrap .ppay_title .title {
        font-size: 16px;
    }
    .ppay_form_wrap .ppay_title .text {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.4;
    }
    .ppay_form_wrap .ppay_content {
        width: 100%;
        margin: 25px auto 0;
        padding: 0 15px;
    }
    .ppay_form_wrap .ppay_content .ppay_box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .ppay_form_wrap .ppay_content .ppay_box + .ppay_box {
        margin-top: 5px;
    }
    .ppay_form_wrap .ppay_box .pp_label {
        width: 85px;
        font-size: 15px;
        line-height: 30px;
    }
    .ppay_form_wrap .ppay_box .pp_label.lh46 {
        line-height: 1em;
        padding-bottom: 15px;
        margin-top: 8px;
    }
    .ppay_form_wrap .ppay_box .pp_answer {
        width: calc(100% - 85px);
    }
    .ppay_form_wrap .ppay_box .pp_answer.m_an {
        width: 100%;
        margin-bottom: 15px;
    }
    .ppay_form_wrap .ppay_box .pp_answer.radio_box {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 25px;
        margin-bottom: 0;
    }
    .ppay_form_wrap .ppay_box .pp_row {
        min-height: 30px;
        padding: 3px 0;
        font-size: 13px;
    }
    .ppay_form_wrap .ppay_box .pp_bold {
        font-size: 15px;
    }
    .ppay_form_wrap .ppay_box .pp_input {
        height: 40px;
        padding: 0 10px;
        font-size: 13px;
        line-height: 40px;
        border-radius: 2.5px;
    }
    .ppay_form_wrap .ppay_box .pp_radio {
        width: calc(50% - 4px);
        margin: 0;
    }
    .ppay_form_wrap .ppay_box .pp_radio + .pp_radio {
        margin-left: 0;
    }
    .ppay_form_wrap .ppay_box .pp_radio .pp_radio_face {
        width: 100%;
        min-height: 44px;
        padding: 0 8px;
        font-size: 14px;
        border-radius: 8px;
    }
    .ppay_form_wrap .ppay_box #settle_bank {
        padding: 0;
        width: 100%;
        border-top: 1px solid #d7d7d7;
    }
    .ppay_form_wrap .ppay_box .pp_bank_box {
        padding-top: 20px;
    }
    .ppay_form_wrap .ppay_box .pp_bank_box + .pp_bank_box {
        margin: 0;
    }
    .ppay_form_wrap .ppay_box .pp_bank_label {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .ppay_form_wrap .ppay_box .pp_bank_check {
        height: 40px;
        margin-top: 0;
        font-size: 12px;
        line-height: 38px;
        border-radius: 2.5px;
    }
    .ppay-wrap + .well {
        margin-top: 25px;
    }
    .ppay_form_wrap .ppay_box .pp_radio .ch_span {
        background-color: #f9f9f9;
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }
    .form-horizontal .btn_confirm {
        padding: 5px 15px 30px;
    }
    .personalpayform .btn_confirm .btn {
        /*width: calc(50% - 7px);*/
        min-width: auto !important;
        padding: 0;
        height: 45px;
        line-height: 45px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 2.5px !important;
    }
    .personalpayform .btn_confirm a.btn {
        width: calc(50% - 7px);
        flex: 1;
    }
    .personalpayform .btn_confirm #show_req_btn {
        width: calc(50% - 7px); /*flex: 1;*/
    }
}

/* 개인결제 비밀번호 확인 */
.password_confirm {
    width:600px; 
    max-width:100%; 
    margin:0 auto;
    background: none;
}
.password_confirm .confirm_title {
    margin-bottom:50px; 
    text-align:center;
}
.password_confirm .confirm_title > h2 {
    margin-top:15px; 
    font-weight:500; 
    font-size:28px; 
    color:#222;
}
.password_confirm .confirm_wrap > p {
    margin-bottom:15px; 
    font-size:17px; 
    line-height:1.3; 
    color:#555;
}
.password_confirm .confirm_input > label {
    width:100%;
}
.password_confirm .confirm_input > label > input {
    width:100%; 
    height:auto; 
    padding:0 15px; 
    border:1px solid #ddd; 
    border-radius:10px; 
    background:url('/img/icon_secret.gif') no-repeat 97% 50%; 
    line-height:48px; 
    -webkit-box-shadow:none; 
    -moz-box-shadow:none; 
    box-shadow:none;
    max-width: none;
}
.password_confirm .confirm_input > label > input:focus {
    border-color: var(--main-point-line-color-hover);
}
.password_confirm .confirm_input .confirm_btn_box .btn_confirm {
    display:block; 
    width:100%; 
    border:0; 
    border-radius:10px; 
    font-size:18px; 
    line-height:50px; 
    color:#fff;     
    background-color: var(--main-point-btn-bg-color-hover);
}
.password_confirm .btn_back {
    text-align:center;
    justify-content: center;
}
.password_confirm .btn_back > a {
    display:inline-block; 
    padding:5px 0; 
    font-size:17px;
    border-bottom: 1px solid var(--main-point-color-hover);
    color: var(--main-point-color-hover);
}

@media (max-width: 991px){
    .password_confirm .confirm_input > label > input {
        border-radius: 2.5px;
    }
    .password_confirm .confirm_input .confirm_btn_box .btn_confirm {
        border-radius: 2.5px;
    }
}
/* ===============================================================
   [OrderCompleteModal] sense:PATCH FIVESENSES.Corp. 주문완료 모달
   =============================================================== */
.order_complete_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    display: none;
}

.order_complete_modal .form_modal_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.order_complete_modal .form_modal_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 20px;
    width: 440px;
}

.order_complete_modal .form_modal_wrap .icon_box {
    text-align: center;
    padding: 30px 30px 10px;
}

.order_complete_modal .form_modal_wrap dotlottie-player {
    display: inline-block;
}

.order_complete_modal .form_modal_wrap .modal_cont {
    text-align: center;
    padding: 0 30px;
}

.order_complete_modal .form_modal_wrap .modal_cont h2 {
    font-size: 28px;
    font-weight: 700;
    color: #0c0c0c;
    margin-bottom: 15px;
}

.order_complete_modal .form_modal_wrap .modal_cont p {
    font-size: 18px;
    font-weight: 400;
    color: #6c7682;
    line-height: 28px;
}

.order_complete_modal .form_modal_wrap .modal_bot {
    padding: 20px 30px 30px;
}

.order_complete_modal .form_modal_wrap .confirm_btn {
    display: inline-block;
    width: 100%;
    padding: 16px 15px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border-radius: 5px;
    background-color: var(--main-btn-point-color);
}

@media (max-width: 991px) {
    .order_complete_modal .form_modal_wrap {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        border-radius: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .order_complete_modal .form_modal_wrap::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        width: 40px;
        height: 4px;
        background-color: #e6e6e6;
        border-radius: 2px;
    }

    .order_complete_modal .form_modal_wrap .icon_box {
        padding: 40px 18px 0;
    }

    .order_complete_modal .form_modal_wrap .modal_cont {
        padding: 0 18px;
    }

    .order_complete_modal .form_modal_wrap .modal_cont h2 {
        margin-bottom: 15px;
        font-size: 16px;
    }

    .order_complete_modal .form_modal_wrap .modal_cont p {
        font-size: 13px;
        line-height: 19px;
    }

    .order_complete_modal .form_modal_wrap .modal_bot {
        padding: 20px 18px 15px;
    }

    .order_complete_modal .form_modal_wrap .confirm_btn {
        padding: 15px;
        font-size: 14px;
        border-radius: 2.5px;
    }
} 


/* ===== 주문내역 페이지 (UI) ===== */
.orderinquiry_style {
    width: 100%;
    display: flex;
    gap: 50px;
}
.orderinquiry_style > div:last-child {
    width: 100%;
    /* task193 후속 — flex item은 width:100%를 flex-basis로 써도 자동 최소폭(min-width:auto)이
       내부 콘텐츠의 최소 크기(줄바꿈 불가 텍스트 등)로 걸려, 그 최소치가 가용폭(사이드바·gap 제외)보다
       크면 100%로 줄어들지 못하고 자기 콘텐츠만큼 넘쳐(overflow) 버린다. recentitems.php 3탭(all/
       recent/memberprice)이 이 컨테이너를 공유하는데, 콘텐츠 폭이 넓은 탭(all/recent, 20건)만 이 함정에
       걸려 페이지 전체가 가로로 흘러넘치고(overflow), 탭 전환 때마다 카드 가로폭이 눈에 띄게 달라
       보였다(실측: all/recent 1200px vs memberprice 950px, 사이드바 200px+gap 50px 제외분과 정확히
       일치). min-width:0으로 자동 최소폭을 꺼서 항상 사이드바를 뺀 나머지 폭으로 고정한다. */
    min-width: 0;
}
.orderinquiry_only .orderform_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    border-bottom: none;
}

.orderinquiry_only .orderform_title .od_tt {
    font-size: 24px;
    font-weight: 500;
    color: var(--main-box-font-color);
    line-height: 1em;
}

.orderinquiry_only .orderform_title .orderinquiry_tt_right {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Round15 [항목15] — hex 직접 사용(#2e343a/#fff/#edeff2)을 디자인 토큰으로 정리.
   Round17 [승민 지시 항목8] — recentitems.php 필터 트리거는 이 다크필 스타일 대신 아래
   .order_search(돋보기 원형) 디자인으로 교체돼 이 규칙과 더 이상 공유하지 않는다(.ri_filter_trigger
   클래스 자체를 마크업에서 제거) — orderinquiry.php의 상태 드롭다운(.order_state_filter) 전용 규칙으로 복원. */
.orderinquiry_only .orderform_title .orderinquiry_tt_right .order_state_filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--fp-on-primary, #fff);
    background-color: var(--fp-ink, #2e343a);
    border: none;
    border-radius: 18px;
    cursor: pointer;
    transition: opacity 150ms ease;
}

/* orderaddress.php '배송지 추가' 버튼과 동일한 디자인 언어로 hover를 오퍼시티 방식 통일(승민 지시) */
.orderinquiry_only .orderform_title .orderinquiry_tt_right .order_state_filter:hover {
    opacity: 0.65;
}

.orderinquiry_only .orderform_title .orderinquiry_tt_right .order_search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    background-color: var(--fp-canvas, #fff);
    border: 1px solid var(--fp-hairline, #edeff2);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.orderinquiry_only .orderform_title .orderinquiry_tt_right .order_search:hover {
    background-color: #fafafa;
}

.orderinquiry_only .orderinquiry_form .od_wrap {
    margin-bottom: 15px;
    padding: 30px;
    background-color: #fff;
    border-radius: 17px;
}

/* 2026-07-10 상품별 개별 노출 — 주문(od_wrap) 안에 상품 블록(od_item) 반복 */
.orderinquiry_only .orderinquiry_form .od_wrap .od_item {
    display: block;
}

/* Round10 — 승민 지적: 재구매 액션바(.od_repurchase_bar) 위 구분선이 2겹으로 보임. 원인은
   .od_repurchase_bar가 .od_item들과 같은 부모(.od_wrap)의 형제라 마지막 상품이 실제로는
   :last-child가 아니게 돼(그 자리를 .od_repurchase_bar가 차지) 이 규칙이 마지막 상품에도 걸려
   구분선이 그려지고, 그 아래 .od_repurchase_bar 자신의 border-top과 겹쳐 두 줄이 됐다.
   orderinquiry.skin.php가 상품들을 .od_items 래퍼로 묶도록 수정 — :last-child 판정이 상품
   끼리만 이뤄지도록 스코프를 좁혀 근본 해결(선택자에 .od_items 추가, 셀렉터 구조 자체는 원래
   .od_wrap .od_item 이하 후손 선택이라 나머지 규칙들은 변경 없이 그대로 유효). */
.orderinquiry_only .orderinquiry_form .od_wrap .od_items .od_item:not(:last-child) {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #f2f2f2;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_state {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: #1b1b1b;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_state span {
    font-size: 13px;
    font-weight: 300;
    color: #999999;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_state.end {
    color: #999999;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_view {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: var(--main-btn-point-color);
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    text-decoration: none;
    transition: color 150ms ease, text-decoration-color 150ms ease, background-color 150ms ease;
}
/* Round10 — 승민 지적: 호버 시 시각 피드백이 없었다. fivepro-design-system 링크 컨벤션
   (색상 진하게 + 밑줄)으로 hover 추가 — 버튼류의 filter:brightness(0.92)와 달리 인라인
   텍스트 링크는 밑줄로 "클릭 가능함"을 함께 신호하는 쪽이 통상적인 링크 어포던스에 맞는다. */
.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_view:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    background-color: #fafafa;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_view .view_icon {
    font-family: "SUIT", sans-serif;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 0;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    margin: 0;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_item {
    display: block;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_date {
    font-size: 13px;
    font-weight: 300;
    line-height: 1;
    color: #999999;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_title {
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: #222222;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_title a {
    color: inherit;
    text-decoration: none;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_title a:hover {
    color: var(--main-btn-point-color);
    text-decoration: underline;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_price {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #1b1b1b;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 7px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--main-font-point-color);
    background-color: var(--main-btn-point-color1);
    border-radius: 3px;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #727272;
    cursor: pointer;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view .view_icon {
    font-family: "SUIT", sans-serif;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view .view_bubble {
    position: absolute;
    bottom: 230%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    padding: 12px 10px 9px;
    background-color: #fff;
    border-radius: 5px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view .view_bubble.is-show {
    opacity: 1;
    visibility: visible;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view .view_bubble::after {
    content: "";
    position: absolute;
    top: 89%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 15px;
    height: 15px;
    background-color: #fff;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view .view_bubble p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #666666;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view .view_bubble p span {
    color: var(--main-font-point-color);
    text-decoration: underline;
    cursor: pointer;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: fit-content;
    height: 40px;
    padding: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #444444;
    white-space: nowrap;
    background-color: #f7f7f7;
    border-radius: 5px;
    cursor: pointer;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_item.od_btn_point {
    font-weight: 600;
    color: var(--main-btn-point-color);
    background-color: var(--main-btn-point-color1);
}
/* 포인트 컬러 강조 버튼 (구매확정/리뷰쓰기/교환비결제/반품비결제) — 맨 앞 배치 */
.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_item.od_btn_emph {
    order: -1;
    font-weight: 600;
    color: #fff;
    background-color: var(--main-btn-point-color);
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_more {
    flex: 0 0 40px;
    gap: 3px;
    width: 40px;
    min-width: 40px;
}

.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_more span {
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: #444444;
    border-radius: 50%;
}


/* ===== 주문상태 필터 / 검색 모달 (UI) ===== */
.oi_modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}
/* 모달 표시는 jQuery fadeIn/fadeOut가 제어 (is-open은 열림 상태 표시용 클래스) */
.oi_modal .oi_modal_dim {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.oi_modal .oi_modal_panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
}
.oi_modal.search_oi_modal .oi_modal_panel {
    max-width: 640px;
}
.oi_modal .oi_modal_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.oi_modal .oi_modal_title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: #1b1b1b;
}
.oi_modal .oi_modal_close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 8px;
    color: #cfcfcf;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
/* Round6 — 승민 지적: 모달 버튼 hover가 제각각이었다. 닫기(×) 아이콘 버튼은 fp_minicart_close와
   동일한 hover 패턴(연한 배경 하이라이트)으로 통일 — 모든 oi_modal(주문내역/최근구매 검색·필터·재구매) 공용. */
.oi_modal .oi_modal_close:hover { background: var(--fp-surface-soft, #f7f7f7); color: var(--fp-body, #666666); }

/* Round-FIX3 [승민 실브라우저 피드백] — 주문상태 전용 필터 모달(#oiFilterModal) 원복.
   디자인(리스트+우측 체크마크)은 80c04383 삭제 이전 그대로 복원, 동작만 다중선택으로 변경. */
.oi_modal.filter_oi_modal .oi_filter_list {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #eeeeee;
}
.oi_modal.filter_oi_modal .oi_filter_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    color: #666666;
    cursor: pointer;
}
.oi_modal.filter_oi_modal .oi_filter_item .oi_check {
    display: none;
    color: var(--main-btn-point-color);
}
.oi_modal.filter_oi_modal .oi_filter_item.is-active {
    color: var(--main-btn-point-color);
    font-weight: 500;
}
.oi_modal.filter_oi_modal .oi_filter_item.is-active .oi_check {
    display: block;
}
/* 리스트 하단 "조회하기" — 검색모달의 .oi_search_submit 스타일 그대로 재사용 */
.oi_modal.filter_oi_modal .oi_search_submit {
    margin-top: 10px;
}

/* 검색 모달 */
.oi_modal.search_oi_modal .oi_modal_body {
    margin-top: 20px;
}
.oi_modal.search_oi_modal .oi_search_field {
    position: relative;
    margin-bottom: 20px;
}
.oi_modal.search_oi_modal .oi_search_input {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    font-size: 16px;
    color: #222222;
    background-color: #f6f6f6;
    border-radius: 5px;
}
.oi_modal.search_oi_modal .oi_search_input::placeholder {
    color: #999999;
}
.oi_modal.search_oi_modal .oi_search_clear {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 150ms ease;
}
/* Round6 — 필터/검색 모달 버튼 hover 통일: 아이콘 버튼은 연한 배경, 텍스트 버튼은 배경 톤 다운 */
.oi_modal.search_oi_modal .oi_search_clear:hover { background: var(--fp-surface-soft, #f7f7f7); }
/* 상품명이 비어있으면(placeholder 노출) 클리어 버튼 숨김 → 텍스트 입력 시에만 노출 */
.oi_modal.search_oi_modal .oi_search_input:placeholder-shown + .oi_search_clear {
    display: none;
}
/* Round5 — 기간탭(1/3/6개월)·native type=date 관련 CSS는 date_filter.part.php(round4) 전환으로
   더 이상 어떤 화면도 참조하지 않아 삭제(orderinquiry.skin.php·recentitems.skin.php 둘 다 이관 완료,
   grep 재확인). 날짜 캘린더 스타일은 이후 date_range_picker.part.php(자체제작 듀얼캘린더,
   date_range_picker.css) 로 재차 대체됐다 — date_filter.part.php와 .fp_date_filter/.ui-datepicker
   전용 CSS는 HYGIENE-01(2026-08-04)로 정리 제거됨.
   Round-FIX [승민 실브라우저 피드백] — 기간탭(1/3/6개월)만 듀얼캘린더 상단에 복구. .oi_status_pill과
   동일한 pill 톤(선택된 상태만 브랜드 배경)으로 통일 — 새 시각 언어를 만들지 않는다.
   Round-FIX2 [승민 실브라우저 피드백] — 3개(1/3/6개월)→7개(오늘/이번주/이번달/1개월/6개월/1년/날짜선택)
   단일행 재구성. 폭이 좁은 화면에서도 "한 줄"을 유지해야 해서 줄바꿈 대신 가로 스크롤로 대응(coupon
   모달 .oi_modal_inner와 동일한 스크롤바 숨김 관례 재사용) — 탭 자체는 flex-shrink:0으로 줄어들지 않는다.
   승민 정정지시 — 기존 .fp_drp_trigger(날짜입력폼 트리거, 듀얼캘린더 바로 위)는 절대 숨기거나
   대체하지 않고 지금 모습 그대로 유지한다. "날짜선택" 탭은 트리거를 대신하는 게 아니라 그 위에
   추가되는 순수 편의 버튼 — 트리거와 동일하게 openPanel()을 태우는 별도 진입점일 뿐이다. */
.oi_modal.search_oi_modal .oi_period_tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.oi_modal.search_oi_modal .oi_period_tabs::-webkit-scrollbar {
    display: none;
}
.oi_modal.search_oi_modal .oi_period_tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1;
    color: var(--fp-body, #888888);
    background-color: var(--fp-surface-soft, #f7f7f7);
    border-radius: 18px;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.oi_modal.search_oi_modal .oi_period_tab svg { flex-shrink: 0; }
.oi_modal.search_oi_modal .oi_period_tab:hover:not(.is-active) { background-color: var(--fp-surface-strong, #eef0f3); color: var(--fp-body, #666666); }
.oi_modal.search_oi_modal .oi_period_tab.is-active {
    background-color: var(--main-btn-point-color);
    color: #fff;
}
.oi_modal.search_oi_modal .oi_status_filter {
    margin-bottom: 30px;
}
.oi_modal.search_oi_modal .oi_status_label {
    /* Round13 [승민 실브라우저 피드백 #1] — 듀얼캘린더(fp_drp) 바로 아래 붙어 보임 */
    margin-top: 24px;
    margin-bottom: 19px;
    font-size: 16px;
    color: #999999;
}
.oi_modal.search_oi_modal .oi_status_pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 6px;
}
.oi_modal.search_oi_modal .oi_status_pill {
    padding: 9px 15px;
    font-size: 15px;
    line-height: 1;
    color: #888888;
    background-color: #f7f7f7;
    border-radius: 18px;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.oi_modal.search_oi_modal .oi_status_pill:hover:not(.is-active) { background-color: var(--fp-surface-strong, #eef0f3); color: #666666; }
.oi_modal.search_oi_modal .oi_status_pill.is-active {
    background-color: var(--main-btn-point-color);
    color: #fff;
}
.oi_modal.search_oi_modal .oi_search_submit,
.oi_modal.filter_oi_modal .oi_search_submit {
    width: 100%;
    height: 50px;
    font-size: 17px;
    font-weight: 400;
    color: #fff;
    background-color: var(--main-btn-point-color);
    border-radius: 5px;
    cursor: pointer;
    transition: filter 150ms ease;
}
/* Round6 — 프라이머리(색상 배경) 버튼 hover는 색상 변수와 무관하게 항상 동일한 톤으로
   어두워지도록 filter 사용 — legacy 변수(--main-btn-point-color)와 fp 토큰이 섞여 있어도 통일된 느낌 유지 */
.oi_modal.search_oi_modal .oi_search_submit:hover,
.oi_modal.filter_oi_modal .oi_search_submit:hover { filter: brightness(0.92); }

/* 더보기(문의) 모달 */
.oi_modal.more_oi_modal .oi_modal_panel {
    max-width: 500px;
    text-align: center;
}
.oi_modal.more_oi_modal .oi_more_close {
    position: absolute;
    top: 30px;
    right: 30px;
}
.oi_modal.more_oi_modal .oi_more_body {
    padding-top: 12px;
}
.oi_modal.more_oi_modal .oi_more_thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 19px;
    background-color: #f3f3f3;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
}
.oi_modal.more_oi_modal .oi_more_thumb .oi_more_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.oi_modal.more_oi_modal .oi_more_name {
    margin-bottom: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #1b1b1b;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.oi_modal.more_oi_modal .oi_more_btns {
    display: flex;
    gap: 6px;
}
.oi_modal.more_oi_modal .oi_more_btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    background-color: #f7f7f9;
    border-radius: 6px;
    cursor: pointer;
}
.oi_modal.more_oi_modal .oi_more_btn svg {
    flex-shrink: 0;
    color: #666666;
}

/* 적용 쿠폰 모달 */
.oi_modal.coupon_oi_modal .oi_modal_panel {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    padding: 35px 25px 40px 35px;
    overflow: hidden;
}
.oi_modal.coupon_oi_modal .oi_modal_head,
.oi_modal.coupon_oi_modal .oi_coupon_foot {
    flex-shrink: 0;
}
.oi_modal.coupon_oi_modal .oi_modal_head {
    padding-bottom: 25px;
    border-bottom: 1px solid #eeeeee;
}
/* 실제 스크롤 영역 (head/foot 고정, 가운데만 스크롤) */
.oi_modal.coupon_oi_modal .oi_modal_inner {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 25px;
    padding-right: 5px;
    overflow-y: auto;
    /* 스크롤 기능은 유지하되 스크롤바만 숨김 */
    -ms-overflow-style: none;   /* IE/Edge */
    scrollbar-width: none;      /* Firefox */
}
.oi_modal.coupon_oi_modal .oi_modal_inner::-webkit-scrollbar {
    display: none;              /* Chrome/Safari */
}
.oi_modal.coupon_oi_modal .oi_coupon_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px;
    background-color: #f6f6f6;
    border-radius: 10px;
}
.oi_modal.coupon_oi_modal .oi_coupon_card {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 28px 30px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 10px;
}
.oi_modal.coupon_oi_modal .oi_coupon_card.is-active {
    border-color: var(--main-btn-point-color);
}
.oi_modal.coupon_oi_modal .oi_coupon_card.is-used {
    background-color: rgba(204, 204, 204, 0.35);
}
.oi_modal.coupon_oi_modal .oi_coupon_card.is-used .oi_coupon_name,
.oi_modal.coupon_oi_modal .oi_coupon_card.is-used .oi_coupon_meta dd {
    color: #888888;
}
.oi_modal.coupon_oi_modal .oi_coupon_card.is-used .oi_coupon_cate {
    color: #999999;
    background-color: #e5e5e5;
}
.oi_modal.coupon_oi_modal .oi_coupon_card.is-used .oi_coupon_img {
    opacity: 0.6;
}
.oi_modal.coupon_oi_modal .oi_coupon_card:not(.is-used) {
    cursor: pointer;
}
.oi_modal.coupon_oi_modal .oi_coupon_img {
    flex-shrink: 0;
    width: 132px;
    height: 132px;
    background-color: #fff;
    border: 1px solid #f3f3f3;
    border-radius: 10px;
    overflow: hidden;
}
.oi_modal.coupon_oi_modal .oi_coupon_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.oi_modal.coupon_oi_modal .oi_coupon_info {
    flex: 1;
    min-width: 0;
}
.oi_modal.coupon_oi_modal .oi_coupon_cate {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    color: var(--main-btn-point-color);
    background-color: var(--main-btn-point-color1);
    border-radius: 3px;
}
.oi_modal.coupon_oi_modal .oi_coupon_name {
    margin-bottom: 18px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    color: #222222;
}
.oi_modal.coupon_oi_modal .oi_coupon_meta > div {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.5 ;
}
.oi_modal.coupon_oi_modal .oi_coupon_meta > div:last-child {
    margin-bottom: 0;
}
.oi_modal.coupon_oi_modal .oi_coupon_meta dt {
    flex-shrink: 0;
    width: 70px;
    font-weight: 400;
    color: #aaaaaa;
}
.oi_modal.coupon_oi_modal .oi_coupon_meta dd {
    color: #666666;
}
.oi_modal.coupon_oi_modal .oi_coupon_share {
    flex-shrink: 0;
}
.oi_modal.coupon_oi_modal .oi_coupon_kakao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #381e1f;
    background-color: #fae100;
    border-radius: 19px;
    white-space: nowrap;
    cursor: pointer;
}
.oi_modal.coupon_oi_modal .oi_coupon_done {
    display: inline-block;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #999999;
    background-color: #e1e1e1;
    border-radius: 19px;
    white-space: nowrap;
}
.oi_modal.coupon_oi_modal .oi_coupon_foot {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}
.oi_modal.coupon_oi_modal .oi_coupon_btn {
    min-width: 180px;
    padding: 17px 15px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    border-radius: 5px;
    cursor: pointer;
}
.oi_modal.coupon_oi_modal .oi_coupon_cancel {
    color: #333333;
    background-color: #fff;
    border: 1px solid #e1e1e1;
}
.oi_modal.coupon_oi_modal .oi_coupon_submit {
    color: #fff;
    background-color: var(--main-btn-point-color);
}

/* 빈 상태(주문내역 없음) — 신규 디자인이 아니라 이 사이트 다른 마이페이지(wishlist/scrap/
   shopping.skin.php)의 "내용 없음" 관례(text-center + color:#777 + 높이 150 안팎)에 이 페이지만
   맞춘다. 저 페이지들은 <td height="150">라 테이블 셀 속성만으로 중앙정렬이 걸리지만 여기는
   div 구조라 flex로 동일 효과를 낸다. */
.orderinquiry_style .orderinquiry_form .od_info_none > .no_data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fp-empty-gap, 14px);
    /* 승민 지시(2026-08-13) — 상하 여백 3배 확대: min-height 150px -> 450px(정확히 3배). 이 페이지는
       고정 min-height 방식(다른 화면의 padding 기반 [EmptyStateTokens]과는 별도 최근 확정값)이라
       박스 높이 변수는 적용하지 않음 — 아이콘·폰트·배경만 전역 토큰으로 통일. */
    min-height: 450px;
    color: #777777;
    text-align: center;
    background: var(--fp-empty-bg, #fff);
    border-radius: var(--fp-empty-radius, 17px);
    font-size: var(--fp-empty-text-size, 14px);
}
.orderinquiry_style .orderinquiry_form .od_info_none > .no_data img {
    width: var(--fp-empty-icon-size, 41px);
}

@media (max-width:991px) {
    .orderinquiry_style {
        gap: 0;
    }
    .orderinquiry_style .orderinquiry_form .od_info_none {
        font-size: 13px;
        /* 승민 지시(2026-08-13) — 상하 padding 3배 확대: 5px/50px -> 16px/152px(3배 후 4px 스케일 반올림) */
        padding: 16px 0 152px;
    }
    .orderinquiry_style .orderform_title.orderinquiry_tt {
        text-align: center;
        /* 다른 마이페이지 하위 페이지(쿠폰/포인트/후기 등)와 동일한 상단 여백(20px)으로 통일 */
        padding: 20px 0 15px;
        font-size: 24px;
        font-weight: 500;
        flex-direction: column;
        gap: 20px;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap {
        margin-bottom: 10px;
        padding: 20px 15px;
        border-radius: 10px;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_href {
        padding: 20px 0;
        border: none;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_href::before,
    .orderinquiry_style .orderinquiry_form .od_wrap .od_href::after {
        content: "";
        width: 200%;
        position: absolute;
        left: -15px;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_href::before {
        height: 9px;
        top: -8px;
        background: #eff2f5;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_href::after {
        height: 1px;
        bottom: 0;
        background: #e7e7e7;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_href h1 {
        display: flex;
        font-size: 18px;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_href h1 .num {
        margin-right: 20px;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_info_inner > div div {
        line-height: 32px;
        font-size: 16px;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_info_inner > div .left {
        width: 88px;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_info .od_status {
        line-height: 41px;
        font-size: 14px;
        width: 100%;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_info {
        padding: 18px 0 0;
        display: block;
        place-items: unset;
        gap:16px;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_info .od_status button {
        display: block;
        font-size: 13px;
        border-radius: 2.5px;
        line-height: 33px;
        width: 100%;
        background-color: var(--main-btn-point-color);
        border: 1px solid var(--main-btn-line-point-color);
        color: #fff;
        margin-top: 10px;
    }
    .draftview_btn {
        width: 100%;
        font-size: 14px;
        border-radius: 2.5px;
        height: 40px;
        line-height: 40px;
        margin-top: 5px;
    }
    /* ===== 주문내역 페이지 (UI) ===== */
    /* 다른 마이페이지 하위 페이지 타이틀(24px)과 동일 크기로 통일(승민 요청) */

    .orderinquiry_only .orderform_title .orderinquiry_tt_right {
        gap: 6px;
        margin-left: auto;
    }

    .orderinquiry_only .orderform_title .orderinquiry_tt_right .order_state_filter {
        gap: 3px;
        padding: 9px 15px;
        font-size: 14px;
        border-radius: 15px;
    }

    .orderinquiry_only .orderform_title .orderinquiry_tt_right .order_search {
        width: 31px;
        height: 31px;
    }

    .orderinquiry_only .orderform_title .orderinquiry_tt_right .order_search svg {
        width: 14px;
        height: 14px;
    }
    /* Round10 — 위 데스크톱 규칙과 동일 사유로 .od_items 스코프 추가(구분선 중복 수정) */
    .orderinquiry_only .orderinquiry_form .od_wrap .od_items .od_item:not(:last-child) {
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #f2f2f2;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title {
        margin-bottom: 14px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_state {
        font-size: 14px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_state span {
        font-size: 11px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_view {
        font-size: 12px;
    }
    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .image {
        width: 75px;
        height: 75px;
        border-radius: 2.5px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_date {
        font-size: 11px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_title {
        font-size: 13px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_price {
        font-size: 16px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon {
        gap: 10px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_title {
        max-width: 135px;
        padding: 5px 6px;
        font-size: 10px;
        border-radius: 4px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_title span {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view {
        font-size: 11px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view .view_bubble {
        top: 170%;
        bottom: auto;
        left: auto;
        right: 0;
        transform: none;
        min-width: 200px;
        padding: 13px 12px;
        border-radius: 2.5px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view .view_bubble::after {
        top: -8%;
        left: auto;
        right: 12%;
        width: 12px;
        height: 12px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_info .od_info_inner .od_info_coupon .coupon_view .view_bubble p {
        font-size: 12px;
        line-height: 17px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn {
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 15px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_item {
        height: 35px;
        padding: 8px;
        font-size: 12px;
        border-radius: 2.5px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_more {
        flex: 0 0 35px;
        gap: 2.5px;
        width: 35px;
        min-width: 35px;
    }

    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_more span {
        width: 2.5px;
        height: 2.5px;
    }

    /* 모바일 배치: 포인트버튼(.od_btn_emph) + 더보기를 첫 줄에, 나머지는 2열(홀수면 마지막이 한 줄 전체) */
    /* 포인트버튼 — 첫 줄, 더보기 옆 공간 채움 */
    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_item.od_btn_emph {
        order: -1;
        flex: 1 1 50%;
    }
    /* 더보기 — 첫 줄 우측(35px 고정은 기존 규칙), 포인트버튼과 같은 줄 */
    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_more {
        order: -1;
    }
    /* 나머지 버튼 — 2열, 마지막이 홀수로 남으면 flex-grow로 한 줄 전체 */
    .orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_btn .od_btn_item:not(.od_btn_emph):not(.od_btn_more) {
        flex: 1 1 calc(50% - 2.5px);
    }


    /* 모달 */
    .oi_modal .oi_modal_panel {
        left: auto;
        top: auto;
        bottom: 0;
        transform: none;
        padding: 44px 25px 20px;
        border-radius: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .oi_modal .oi_modal_panel::before {
        content: "";
        position: absolute;
        top: 13px;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        width: 40px;
        height: 4px;
        background-color: #e6e6e6;
        border-radius: 2px;
    }

    .oi_modal .oi_modal_title {
        font-size: 16px;
    }

    .oi_modal .oi_modal_close {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .oi_modal.filter_oi_modal .oi_filter_list {
        margin-top: 20px;
        padding-top: 6px;
    }

    .oi_modal.filter_oi_modal .oi_filter_item {
        padding: 13px 0;
        font-size: 14px;
    }

    /* 모달 > 더보기 */
    .oi_modal.more_oi_modal .oi_modal_panel {
        max-width: 100%;
    }

    .oi_modal.more_oi_modal .oi_more_thumb {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }

    .oi_modal.more_oi_modal .oi_more_name {
        margin-bottom: 25px;
        font-size: 15px;
    }

    .oi_modal.more_oi_modal .oi_more_btn {
        height: 43px;
        font-size: 13px;
        border-radius: 3px;
    }

    .oi_modal.more_oi_modal .oi_more_btn svg {
        width: 15px;
        height: 15px;
    }

    /* 모달 > 검색 */
    .oi_modal.search_oi_modal .oi_modal_panel {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        max-height: 100vh;
        height: 100%;
        padding: 0;
        border-radius: 0;
        overflow-y: hidden;
    }

    .oi_modal.search_oi_modal .oi_modal_panel::before {
        display: none;
    }

    .oi_modal.search_oi_modal .oi_modal_close {
        display: none;
    }

    /* 헤더: 뒤로가기 + 상품명 입력폼(좌) / 돋보기(우) */
    .oi_modal.search_oi_modal .oi_modal_head {
        flex-shrink: 0;
        gap: 15px;
        padding: 0 15px;
        border-bottom: 1px solid #e1e1e1;
    }
    .oi_modal.search_oi_modal .oi_modal_back,
    .oi_modal.search_oi_modal .oi_search_trigger {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        color: #1b1b1b;
        cursor: pointer;
    }
    /* 헤더 검색 입력폼 (모바일): 남은 폭 채우는 인라인 입력 */
    .oi_modal.search_oi_modal .oi_head_search {
        flex: 1;
        min-width: 0;
        margin-bottom: 0;
    }
    .oi_modal.search_oi_modal .oi_head_search .oi_search_input {
        height: 43px;
        padding: 0;
        font-size: 14px;
        background-color: transparent;
        border-radius: 0;
    }
    .oi_modal.search_oi_modal .oi_head_search .oi_search_clear {
        display: none;
    }

    /* 본문: 남은 높이를 채우고 조회 버튼을 하단에 고정 */
    .oi_modal.search_oi_modal .oi_modal_body {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin-top: 0;
        padding: 25px 15px 15px;
        overflow-y: auto;
    }

    .oi_modal.search_oi_modal .oi_period_tabs {
        gap: 6px;
        margin-bottom: 12px;
    }

    .oi_modal.search_oi_modal .oi_period_tab {
        padding: 11px 13px;
        font-size: 12px;
        border-radius: 17px;
    }

    .oi_modal.search_oi_modal .oi_status_filter {
        margin-bottom: 0;
    }

    .oi_modal.search_oi_modal .oi_status_label {
        font-size: 14px;
    }

    .oi_modal.search_oi_modal .oi_status_pills {
        gap: 10px 8px;
    }

    .oi_modal.search_oi_modal .oi_status_pill {
        padding: 11px 13px;
        font-size: 12px;
        border-radius: 17px;
    }

    .oi_modal.search_oi_modal .oi_search_submit {
        flex-shrink: 0;
        margin-top: auto;
        height: 48px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 2.5px;
    }

    /* 모달 > 쿠폰 */
    .oi_modal.coupon_oi_modal .oi_modal_panel {
        max-width: 100%;
        padding: 44px 25px 20px;
    }

    .oi_modal.coupon_oi_modal .oi_modal_head {
        padding-bottom: 20px;
        border-bottom: 0;
    }

    .oi_modal.coupon_oi_modal .oi_modal_inner {
        margin-top: 0;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_list {
        padding: 15px;
        border-radius: 5px;
    }
    
    .oi_modal.coupon_oi_modal .oi_coupon_card {
        position: relative;
        flex-wrap: wrap;
        gap: 13px;
        padding: 20px;
        border-radius: 5px;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_img {
        width: 70px;
        height: 70px;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_cate {
        margin-bottom: 10px;
        padding: 4px 5px;
        font-size: 10px;
        border-radius: 4px;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_name {
        margin-bottom: 0;
        font-size: 15px;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_meta {
        width: 100%;
        padding-top: 13px;
        border-top: 1px solid #f2f2f2;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_meta > div {
        font-size: 12px;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_meta dt {
        width: 60px;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_kakao,
    .oi_modal.coupon_oi_modal .oi_coupon_done {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 7px;
        border-radius: 50%;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_kakao svg {
        width: 20px;
        height: 20px;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_card.is-used .oi_coupon_kakao {
        background-color: #e1e1e1;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_card.is-used .oi_coupon_kakao svg {
        fill: #999999;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_share {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_foot {
        margin-top: 20px;
    }

    .oi_modal.coupon_oi_modal .oi_coupon_btn {
        flex: 1;
        min-width: 0;
        padding: 15px;
        font-size: 14px;
        border-radius: 2.5px;
    }
}


@media (max-width:480px) {
    
    .orderinquiry_style .orderinquiry_form .od_wrap .od_info_inner > div div {
        font-weight: 400;
    }
    .orderinquiry_style .orderinquiry_form .od_wrap .od_info_inner > div:last-child div {
        font-weight: 400;
    }
}
body.oi_modal_open {
    overflow: hidden;
}


/* ===== 주문 상세보기 (orderinquiryview) ===== */
/* 공통 */
.order_view_style {
    max-width: 650px;
    margin: 0 auto;
}

.order_view_style .ov_title {
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: #222222;
}

.order_view_style .ov_common {
    margin-bottom: 60px;
}

.order_view_style .ov_common .ov_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.order_view_style .ov_common .ov_top .ov_top_title {
    font-size: 24px;
    font-weight: 500;
    color: #1b1b1b;
}

.order_view_style .ov_common .ov_inner {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 32px;
    background-color: #ffffff;
    border-radius: 17px;
}

.order_view_style .ov_common .ov_top_arrow {
    flex-shrink: 0;
    color: #1b1b1b;
    cursor: pointer;
}

.order_view_style .ov_common .ov_top_arrow {
    color: #333333;
    transition: transform 0.2s ease;
}

.order_view_style .ov_common .ov_top_sum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--main-btn-point-color);
}

.order_view_style .ov_common.ov_item > .ov_top,
.order_view_style .ov_common.ov_payment > .ov_top,
.order_view_style .ov_common.ov_point > .ov_top {
    cursor: pointer;
}

.order_view_style .ov_common.is-collapsed .ov_inner {
    display: none;
}

.order_view_style .ov_common.is-collapsed > .ov_top {
    margin-bottom: 0;
}

.order_view_style .ov_common.is-collapsed .ov_top_arrow {
    transform: rotate(180deg);
}

/* ===== 주문일시 / 주문번호 (ov_meta) ===== */
.order_view_style .ov_common.ov_meta .ov_top {
    justify-content: flex-end;
    margin-bottom: 12px;
}

.order_view_style .ov_common.ov_meta .ov_top .ov_top_btn {
    padding: 8px 9px;
    font-size: 14px;
    font-weight: 700;
    color: #757575 !important;
    background-color: #f1f1f1;
    border: 0;
    border-radius: 3px !important;
}

.order_view_style .ov_common.ov_meta .ov_inner .ov_order_date {
    font-size: 15px;
    line-height: 1;
    color: #999999;
}

.order_view_style .ov_common.ov_meta .ov_inner .ov_order_no {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #1b1b1b;
}

.order_view_style .ov_common.ov_meta .ov_inner .ov_order_no span {
    font-weight: 400;
}

/* ===== 주문상품 (ov_item) ===== */
.order_view_style .ov_common.ov_item .ov_inner {
    gap: 0;
    padding: 0;
}

.order_view_style .ov_common.ov_item .ov_brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    border-bottom: 1px solid #f2f2f2;
}

.order_view_style .ov_common.ov_item .ov_brand .ov_brand_title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: #666666;
}

.order_view_style .ov_common.ov_item .ov_brand .ov_btn_more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 400;
    color: #727272;
    border-radius: 3px;
    background-color: #f4f4f4;
    cursor: pointer;
}

.order_view_style .ov_common.ov_item .order_product_box {
    position: relative;
    display: block;
    padding: 25px 30px;

}

.order_view_style .ov_common.ov_item .order_product_box + .order_product_box {
    border: 0;
}

.order_view_style .ov_common.ov_item .order_product_box + .order_product_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    width: calc(100% - 60px);
    height: 1px;
    background-color: #f2f2f2;
}

.order_view_style .ov_common.ov_item .order_product_status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 700;
    color: #1b1b1b;
}

.order_view_style .ov_common.ov_item .order_product_status span {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
}

.order_view_style .ov_common.ov_item .order_product_inner {
    display: block;
    place-items: flex-start;
    padding: 0;
}

.order_view_style .ov_common.ov_item .order_product_inner > a {
    display: flex;
    align-items: center;
    gap: 20px;
}

.order_view_style .ov_common.ov_item .image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
}

.order_view_style .ov_common.ov_item .image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.order_view_style .ov_common.ov_item .content {
    margin: 0;
}

.order_view_style .ov_common.ov_item .content .content_subname {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 300;
    color: #666666;
}

.order_view_style .ov_common.ov_item .content .content_name {
    height: auto;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #222222;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order_view_style .ov_common.ov_item .content .content_opt {
    display: flex;
    align-items: center;
}

.order_view_style .ov_common.ov_item .content .content_opt + .content_opt {
    margin-top: 2px;
}

.order_view_style .ov_common.ov_item .content .content_opt li {
    position: relative;
    margin-right: 5px;
    padding-right: 5px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
    color: #666666;
}
.order_view_style .ov_common.ov_item .content .content_opt li.opt_label {
    padding: 3px 4px;
    font-size: 11px;
    font-weight: 400;
    color: #999999;
    background-color: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
}

.order_view_style .ov_common.ov_item .content .content_opt li.opt_label::after,
.order_view_style .ov_common.ov_item .content .content_opt li:last-child::after {
    display: none;
}

.order_view_style .ov_common.ov_item .content .content_price {
    margin-top: 10px;
}

.orderinquiryview .order_product_info .order_product_inner > a .content ul.content_price li:first-child {
    display:flex;
    margin-right: 10px;
}
.orderinquiryview .order_product_info .order_product_inner > a .content ul.content_price li:last-child {
    font-size: 14px;
    font-weight: 300;
    color: var(--main-box-font-color2);
}
.orderinquiryview .order_product_info .order_product_inner > a .content ul.content_price li:first-child span {
    display: block;
    font-weight: 500;
}

.order_view_style .ov_common.ov_item .ov_coupon {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.order_view_style .ov_common.ov_item .ov_coupon .coupon_title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 7px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--main-font-point-color);
    background-color: var(--main-btn-point-color1);
    border-radius: 3px;
}
.order_view_style .ov_common.ov_item .ov_coupon .coupon_title svg {
    flex-shrink: 0;
}
.order_view_style .ov_common.ov_item .ov_coupon .coupon_title span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.order_view_style .ov_common.ov_item .ov_coupon .coupon_view {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    color: #727272;
    cursor: pointer;
}
.order_view_style .ov_common.ov_item .ov_coupon .coupon_view .view_icon {
    font-family: "SUIT", sans-serif;
}

.order_view_style .ov_common.ov_item .ord_btn {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}
.order_view_style .ov_common.ov_item .ord_btn .ord_btn_item {
    flex: 1 1 calc(25% - 4.5px); /* PC: 한 줄 최대 4개 (홀수 남으면 flex-grow로 채움) */
    width: auto;
    height: auto;
    margin: 0;
    padding: 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    color: #444444;
    background-color: #f7f7f9;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}
/* 한 줄 전체 차지 (구매확정 / 후기쓰기) — 상단 배치 */
.order_view_style .ov_common.ov_item .ord_btn .ord_btn_full {
    flex: 0 0 100%;
    order: -1;
}
/* 구매확정 / 리뷰쓰기 — 연보라 강조 */
.order_view_style .ov_common.ov_item .ord_btn .confirm-btn,
.order_view_style .ov_common.ov_item .ord_btn .review-btn,
.order_view_style .ov_common.ov_item .ord_btn .ord_btn_emph {
    color: var(--main-btn-point-color);
    background-color: #ececfb;
    font-weight: 500;
}
/* 교환/반품 추가금 결제완료 — 비활성 표시 */
.order_view_style .ov_common.ov_item .ord_btn .ord_btn_done {
    color: #999999;
    background-color: #f2f2f2;
    cursor: default;
}

.order_view_style .ov_common.ov_item .ov_cancel_all {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: #444444;
    background-color: #f7f7f9;
    border-radius: 5px;
    cursor: pointer;
}

.order_view_style .ov_common.ov_item .ov_cancel {
    padding: 30px;
    border-top: 1px solid #eeeeee;
}

.order_view_style .ov_common.ov_item .ov_cancel_toggle,
.order_view_style .ov_common.ov_item .cancel-all-btn {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: #444444;
    background-color: #f7f7f9;
    border-radius: 5px;
    cursor: pointer;
}

.order_view_style .ov_common.ov_item .ov_cancel.is-open .ov_cancel_toggle {
    display: none;
}

.order_view_style .ov_common.ov_item .ov_cancel_form {
    display: none;
}

.order_view_style .ov_common.ov_item .ov_cancel.is-open .ov_cancel_form {
    display: block;
}

.order_view_style .ov_common.ov_item .ov_cancel_row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.order_view_style .ov_common.ov_item .ov_cancel_row .ov_cancel_field {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.order_view_style .ov_common.ov_item .ov_cancel_field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.order_view_style .ov_common.ov_item .ov_cancel_label {
    flex-shrink: 0;
    width: 75px;
    font-size: 16px;
    font-weight: 300;
    color: #444444;
}

.order_view_style .ov_common.ov_item .ov_cancel_input,
.order_view_style .ov_common.ov_item .ov_cancel_select {
    flex: 1;
    width: 100%;
    height: 45px;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 300;
    color: #222222;
    background-color: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
}

.order_view_style .ov_common.ov_item .ov_cancel_select_wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}
.order_view_style .ov_common.ov_item .ov_cancel_select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    cursor: pointer;
}
.order_view_style .ov_common.ov_item .ov_cancel_select_wrap::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1px solid #777777;
    border-bottom: 1px solid #777777;
    transform: rotate(45deg);
    pointer-events: none;
}

.order_view_style .ov_common.ov_item .ov_cancel_submit {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: #444444;
    background-color: #f7f7f9;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.order_view_style .ov_common.ov_item .ov_cancel_submit.is-active {
    color: #fff;
    background-color: var(--main-btn-point-color);
}

.order_view_style .ov_common.ov_item .ov_cancel_done {
    margin-top: 20px;
    padding: 20px;
    background-color: #f7f7f7;
    border-radius: 5px;
    text-align: left;
}

.order_view_style .ov_common.ov_item .ov_cancel_done .ov_cancel_reason_title {
    font-size: 14px;
    font-weight: 500;
    color: #f86e78;
}

.order_view_style .ov_common.ov_item .ov_cancel_done .ov_cancel_reason_title span {
    color: #999999;
    font-weight: 300;
}

/* ===== 배송지 (ov_payment) ===== */
.order_view_style .ov_common.ov_receipt .ov_receipt_item {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #1b1b1b;
}

.order_view_style .ov_common.ov_receipt .ov_receipt_item.ov_receipt_name {
    font-size: 17px;
    font-weight: 700;
}

.order_view_style .ov_common.ov_receipt .ov_receipt_item.ov_receipt_hp {
    font-size: 15px;
    font-weight: 400;
    color: #666666;
}

/* ===== 결제정보 (ov_payment) ===== */
.order_view_style .ov_common.ov_payment .ov_inner {
    gap: 0;
}

.order_view_style .ov_common.ov_payment .ov_pay_group {
    padding: 20px 0;
    border-top: 1px solid #f2f2f2;
}

.order_view_style .ov_common.ov_payment .ov_pay_group:first-child {
    padding-top: 0;
    border-top: 0;
}

.order_view_style .ov_common.ov_payment .ov_pay_group:last-child {
    padding-bottom: 0;
}

.order_view_style .ov_common.ov_payment .ov_pay_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order_view_style .ov_common.ov_payment .ov_pay_sub + .ov_pay_sub {
    margin-top: 10px;
}

.order_view_style .ov_common.ov_payment .ov_pay_main + .ov_pay_sub {
    margin-top: 16px;
}

.order_view_style .ov_common.ov_payment .ov_pay_main + .ov_pay_main {
    margin-top: 18px;
}

.order_view_style .ov_common.ov_payment .ov_pay_main .ov_pay_label,
.order_view_style .ov_common.ov_payment .ov_pay_main .ov_pay_val {
    font-size: 16px;
    font-weight: 700;
    color: #666666;
}

.order_view_style .ov_common.ov_payment .ov_pay_sub .ov_pay_label,
.order_view_style .ov_common.ov_payment .ov_pay_sub .ov_pay_val {
    font-size: 14px;
    font-weight: 500;
    color: #999999;
}

.order_view_style .ov_common.ov_payment .ov_pay_sub .ov_pay_label {
    position: relative;
    padding-left: 18px;
}

.order_view_style .ov_common.ov_payment .ov_pay_sub .ov_pay_label::before {
    content: "└ ";
    position: absolute;
    left: 0;
    top: 0;
    color: #dcdcdc;
}

.order_view_style .ov_common.ov_payment .ov_pay_paid .ov_pay_label,
.order_view_style .ov_common.ov_payment .ov_pay_paid .ov_pay_val {
    color: var(--main-btn-point-color);
}

.order_view_style .ov_common.ov_payment .ov_pay_copy {
    display: inline-flex;
    margin-left: 4px;
    color: #999999;
    cursor: pointer;
    vertical-align: middle;
}

.order_view_style .ov_common.ov_payment .ov_pay_receipt {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.order_view_style .ov_common.ov_payment .ov_pay_receipt_txt {
    font-size: 14px;
    font-weight: 400;
    color: #555555;
}

.order_view_style .ov_common.ov_payment .ov_pay_btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    background-color: var(--main-btn-point-color);
    border-radius: 3px;
}

/* ===== 포인트 혜택 (ov_point) ===== */
.order_view_style .ov_common.ov_point .ov_inner {
    gap: 0;
}

.order_view_style .ov_common.ov_point .ov_point_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order_view_style .ov_common.ov_point .ov_point_sub + .ov_point_sub {
    margin-top: 10px;
}

.order_view_style .ov_common.ov_point .ov_point_main + .ov_point_sub {
    margin-top: 16px;
}

.order_view_style .ov_common.ov_point .ov_point_sub + .ov_point_main {
    margin-top: 18px;
}

.order_view_style .ov_common.ov_point .ov_point_main .ov_point_label,
.order_view_style .ov_common.ov_point .ov_point_main .ov_point_val {
    font-size: 16px;
    font-weight: 700;
    color: #666666;
}

.order_view_style .ov_common.ov_point .ov_point_sub .ov_point_label,
.order_view_style .ov_common.ov_point .ov_point_sub .ov_point_val {
    font-size: 14px;
    font-weight: 500;
    color: #999999;
}

.order_view_style .ov_common.ov_point .ov_point_sub .ov_point_label {
    position: relative;
    padding-left: 18px;
}

.order_view_style .ov_common.ov_point .ov_point_sub .ov_point_label::before {
    content: "└ ";
    position: absolute;
    left: 0;
    top: 0;
    color: #dcdcdc;
}

.order_view_style .ov_common.ov_point .ov_point_label {
    display: inline-flex;
    align-items: center;
}

.order_view_style .ov_common.ov_point .ov_point_help {
    position: relative;
    display: inline-flex;
    margin-left: 4px;
    color: #bbbbbb;
    cursor: pointer;
}

.order_view_style .ov_common.ov_point .ov_point_tip {
    position: absolute;
    top: 135%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    padding: 11px 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #666666;
    background-color: #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    white-space: nowrap;
    z-index: 10;
}
.order_view_style .ov_common.ov_point .ov_point_help:hover .ov_point_tip,
.order_view_style .ov_common.ov_point .ov_point_help:focus .ov_point_tip,
.order_view_style .ov_common.ov_point .ov_point_help:focus-within .ov_point_tip {
    display: flex;
}

/* 환불정보 — 메인 행(환불 금액) 포인트색 강조 (포인트혜택 ov_point 구조 재사용) */
.order_view_style .ov_common.ov_refund .ov_point_main .ov_point_label,
.order_view_style .ov_common.ov_refund .ov_point_main .ov_point_val {
    color: var(--main-btn-point-color);
}


/* ===== 배송조회 모달 ===== */
.oi_modal.delivery_oi_modal .oi_modal_head {
    flex-shrink: 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #eeeeee;
}

.oi_modal.delivery_oi_modal .ov_dv_body {
    margin-top: 55px;
}

.oi_modal.delivery_oi_modal .ov_dv_hero {
    margin-bottom: 40px;
    text-align: center;
}

.oi_modal.delivery_oi_modal .ov_dv_hero_date {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--main-btn-point-color);
}

.oi_modal.delivery_oi_modal .ov_dv_hero_desc {
    margin-top: 15px;
    font-size: 15px;
    font-weight: 300;
    color: #999999;
}

.oi_modal.delivery_oi_modal .ov_dv_product {
    padding: 20px;
    background-color: #f6f6f6;
    border-radius: 10px;

}

.oi_modal.delivery_oi_modal .ov_dv_product_inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e1e1e1;
}

.oi_modal.delivery_oi_modal .ov_dv_thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: #e9e9e9;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
}

.oi_modal.delivery_oi_modal .ov_dv_thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.oi_modal.delivery_oi_modal .ov_dv_pinfo {
    flex: 1;
    min-width: 0;
}

.oi_modal.delivery_oi_modal .ov_dv_pname {
    font-size: 16px;
    font-weight: 500;
    color: #1b1b1b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oi_modal.delivery_oi_modal .ov_dv_pdate {
    margin-top: 10px;
    font-size: 14px;
    color: #999999;
}

.oi_modal.delivery_oi_modal .ov_dv_info {
    padding: 20px 9px 0;
}

.oi_modal.delivery_oi_modal .ov_dv_info > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.oi_modal.delivery_oi_modal .ov_dv_info > div:last-child {
    margin-bottom: 0;
}

.oi_modal.delivery_oi_modal .ov_dv_info dt {
    flex-shrink: 0;
    width: 63px;
    font-size: 14px;
    font-weight: 300;
    color: #999999;
}

.oi_modal.delivery_oi_modal .ov_dv_info dd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #333333;
}

.oi_modal.delivery_oi_modal .ov_dv_tel {
    display: inline-flex;
    color: #555555;
}

.oi_modal.delivery_oi_modal .ov_dv_timeline {
    margin-top: 20px;
    padding: 20px;
    background-color: #f6f6f6;
    border-radius: 10px;
}

.oi_modal.delivery_oi_modal .ov_dv_timeline li {
    position: relative;
    display: flex;
    gap: 9px;
    padding-bottom: 20px;
}

.oi_modal.delivery_oi_modal .ov_dv_timeline li:last-child {
    padding-bottom: 0;
}
.oi_modal.delivery_oi_modal .ov_dv_dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    margin: 7px 7px 0;
    background-color: #e1e1e1;
    border-radius: 50%;
}

.oi_modal.delivery_oi_modal .ov_dv_timeline li.is-done .ov_dv_dot {
    width: 20px;
    height: 20px;
    margin: 0;
    background-color: var(--main-btn-point-color);
}

.oi_modal.delivery_oi_modal .ov_dv_dot svg {
    display: none;
}
.oi_modal.delivery_oi_modal .ov_dv_timeline li.is-done .ov_dv_dot svg {
    display: block;
}

.oi_modal.delivery_oi_modal .ov_dv_step_name {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
}

.oi_modal.delivery_oi_modal .ov_dv_timeline li.is-done .ov_dv_step_name {
    color: var(--main-btn-point-color);
}

.oi_modal.delivery_oi_modal .ov_dv_step_date {
    margin-top: 5px;
    font-size: 12px;
    color: #999999;
}

/* ===== 취소 요청 모달 (cancel_oi_modal) ===== */
.oi_modal.cancel_oi_modal .oi_modal_panel {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    max-height: 86vh;
}

.oi_modal.cancel_oi_modal .oi_modal_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 25px;
    border-bottom: 1px solid #eeeeee;
}

.oi_modal.cancel_oi_modal .ov_cm_scroll {
    flex: 0 1 auto;
    min-height: 0;
    margin-top: 25px;
    overflow-y: auto;

}

.oi_modal.cancel_oi_modal .ov_cm_box_wrap {
    max-height: 35vh;
    overflow-y: auto;
    background-color: #f8f8f8;
    border-radius: 10px;
}

.oi_modal.cancel_oi_modal .ov_cm_all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 30px;
    cursor: pointer;
    border-bottom: 1px solid #e9e9e9;
}

.oi_modal.cancel_oi_modal .ov_cm_all_txt {
    font-size: 18px;
    font-weight: 500;
    color: #222222;
}

.oi_modal.cancel_oi_modal .ov_cm_list {
    padding: 0 30px;
}

.oi_modal.cancel_oi_modal .ov_cm_item + .ov_cm_item {
    border-top: 1px solid #e9e9e9;
}

.oi_modal.cancel_oi_modal .ov_cm_row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
    cursor: pointer;
}

.oi_modal.cancel_oi_modal .ov_cm_chk,
.oi_modal.cancel_oi_modal .ov_cm_all_chk {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.oi_modal.cancel_oi_modal .ov_cm_check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid #cfcfcf;
    border-radius: 50%;
    background-color: #fff;
}

.oi_modal.cancel_oi_modal .ov_cm_check svg {
    opacity: 0;
}

.oi_modal.cancel_oi_modal .ov_cm_chk:checked + .ov_cm_check,
.oi_modal.cancel_oi_modal .ov_cm_all_chk:checked + .ov_cm_check {
    background-color: var(--main-btn-point-color);
    border-color: var(--main-btn-point-color);
}

.oi_modal.cancel_oi_modal .ov_cm_chk:checked + .ov_cm_check svg,
.oi_modal.cancel_oi_modal .ov_cm_all_chk:checked + .ov_cm_check svg {
    opacity: 1;
}

.oi_modal.cancel_oi_modal .ov_cm_thumb {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

.oi_modal.cancel_oi_modal .ov_cm_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.oi_modal.cancel_oi_modal .ov_cm_info {
    flex: 1;
    min-width: 0;
}

.oi_modal.cancel_oi_modal .ov_cm_subname {
    display: block;
    font-size: 13px;
    color: #666666;
}

.oi_modal.cancel_oi_modal .ov_cm_name {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #222222;
}

.oi_modal.cancel_oi_modal .ov_cm_opt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
    color: #666666;
}

.oi_modal.cancel_oi_modal .ov_cm_opt .opt_label {
    font-style: normal;
    padding: 2px 4px;
    font-size: 12px;
    color: #999999;
    background-color: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
}

.oi_modal.cancel_oi_modal .ov_cm_opt .opt_val,
.oi_modal.cancel_oi_modal .ov_cm_opt .opt_qty {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 85%;
}

.oi_modal.cancel_oi_modal .ov_cm_opt .opt_qty::before {
    content: "|";
    margin-right: 6px;
    color: #c6c6c6;
}

.oi_modal.cancel_oi_modal .ov_cm_price {
    display: block;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #1b1b1b;
}

.oi_modal.cancel_oi_modal .ov_cm_form {
    margin-top: 20px;
    padding: 30px;
    background-color: #f8f8f8;
    border-radius: 10px;
}

.oi_modal.cancel_oi_modal .ov_cm_field_row {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
}

.oi_modal.cancel_oi_modal .ov_cm_field_row .ov_cm_field {
    flex: 1;
    min-width: 0;
}

.oi_modal.cancel_oi_modal .ov_cm_field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.oi_modal.cancel_oi_modal .ov_cm_field:last-child {
    margin-bottom: 0;
}

.oi_modal.cancel_oi_modal .ov_cm_label {
    flex-shrink: 0;
    width: 85px;
    font-size: 16px;
    color: #444444;
}

.oi_modal.cancel_oi_modal .ov_cm_input,
.oi_modal.cancel_oi_modal .ov_cm_select {
    flex: 1;
    width: 100%;
    height: 45px;
    padding: 0 12px;
    font-size: 14px;
    color: #222222;
    background-color: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
}

.oi_modal.cancel_oi_modal .ov_cm_select_wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}

.oi_modal.cancel_oi_modal .ov_cm_select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    cursor: pointer;
}

.oi_modal.cancel_oi_modal .ov_cm_select_wrap::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.5px solid #777777;
    border-bottom: 1.5px solid #777777;
    transform: rotate(45deg);
    pointer-events: none;
}

.oi_modal.cancel_oi_modal .ov_cm_foot {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 30px 30px 10px;
}

.oi_modal.cancel_oi_modal .ov_cm_btn {
    min-width: 140px;
    padding: 17px 15px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    border-radius: 5px;
    cursor: pointer;
}

.oi_modal.cancel_oi_modal .ov_cm_cancel {
    color: #333333;
    background-color: #f6f6f6;
}

.oi_modal.cancel_oi_modal .ov_cm_submit {
    color: #fff;
    background-color: var(--main-btn-point-color);
}


@media (max-width: 991px) {
    /* ===== 주문 상세보기 (orderinquiryview) ===== */
    /* 공통 */
    .order_view_style.orderinquiryview .order_product_info {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .order_view_style.orderinquiryview .order_product_info::after {
        display: none;
    }

    .order_view_style .ov_title {
        margin-bottom: 35px;
        font-size: 21px;
        font-weight: 500;
    }

    .order_view_style .ov_common {
        margin-bottom: 35px;
    }

    .order_view_style .ov_common .ov_top {
        margin-bottom: 15px;
    }

    .order_view_style .ov_common .ov_top .orderform_item {
        padding-bottom: 0;
    }

    .order_view_style .ov_common .ov_top .orderform_item::after {
        display: none;
    }

    .order_view_style .ov_common .ov_top .ov_top_title {
        font-size: 15px;
        font-weight: 700;
    }

    .order_view_style .ov_common .ov_inner {
        gap: 12px;
        padding: 20px 15px;
        border-radius: 10px;
    }

    .order_view_style .ov_common .ov_top_arrow {
        width: 18px;
        height: 18px;
    }

    .order_view_style .ov_common .ov_top_sum {
        gap: 4px;
        font-size: 14px;
    }

    /* ===== 주문일시 / 주문번호 (ov_meta) ===== */
    .order_view_style .ov_common.ov_meta .ov_top {
        margin-bottom: 10px;
    }

    .order_view_style .ov_common.ov_meta .ov_top > p {
        display: flex;
        gap: 6px;
        width: 100%;
    }

    .order_view_style .ov_common.ov_meta .ov_top .ov_top_btn {
        flex: 1;
        padding: 10px;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
        border-radius: 4px !important;
    }

    .order_view_style .ov_common.ov_meta .ov_inner .ov_order_date {
        font-size: 13px;
    }

    .order_view_style .ov_common.ov_meta .ov_inner .ov_order_no {
        font-size: 15px;
    }

    .order_view_style .ov_common.ov_meta .ov_inner .ov_order_no span {
        font-weight: 500;
    }

    /* ===== 주문상품 (ov_item) ===== */
    .order_view_style .ov_common.ov_item .ov_brand {
        padding: 20px 15px;
    }

    .order_view_style .ov_common.ov_item .ov_brand .ov_brand_title {
        font-size: 14px;
    }

    .order_view_style .ov_common.ov_item .ov_brand .ov_btn_more {
        padding: 7px 15px;
        font-size: 12px;
        border-radius: 2.5px;
    }

    .order_view_style .ov_common.ov_item .order_product_box {
        padding: 20px 15px;
    }

    .order_view_style .ov_common.ov_item .order_product_box + .order_product_box::before {
        left: 15px;
        width: calc(100% - 30px);
    }
    
    .orderinquiryview .order_product_info .order_product_inner > a .image img {
        object-fit: cover;
    }

    .order_view_style .ov_common.ov_item .order_product_status {
        margin-bottom: 15px;
        font-size: 14px;
    }

    .order_view_style .ov_common.ov_item .order_product_status span {
        font-size: 11px;
    }

    .order_view_style .ov_common.ov_item .order_product_inner > a {
        gap: 15px;
    }

    .order_view_style .ov_common.ov_item .image {
        width: 75px;
        height: 75px;
        border-radius: 2.5px;
    }

    .order_view_style .ov_common.ov_item .content .content_subname {
        margin-bottom: 9px;
        font-size: 11px;
    }

    .order_view_style .ov_common.ov_item .content .content_name {
        font-size: 13px;
    }

    .order_view_style .ov_common.ov_item .content .content_opt li {
        font-size: 11px;
    }

    .order_view_style .ov_common.ov_item .content .content_opt li::after {
        height: 12px;
    }

    .order_view_style .ov_common.ov_item .content .content_opt li.opt_label {
        font-size: 10px;
        border-radius: 2.5px;
    }
    .orderinquiryview .order_product_info .order_product_inner > a .content ul.content_price li:first-child span {
        font-size: 15px;
    }
    .order_view_style .ov_common.ov_item .ov_coupon {
        margin-top: 8px;
    }

    .order_view_style .ov_common.ov_item .ov_coupon .coupon_title {
        padding: 5px 6px;
        font-size: 10px;
        border-radius: 4px;
    }

    .order_view_style .ov_common.ov_item .ov_coupon .coupon_view {
        font-size: 11px;
    }

    .order_view_style .ov_common.ov_item .ord_btn {
        gap: 5px;
        margin-top: 15px;
    }
    .order_view_style .ov_common.ov_item .ord_btn .ord_btn_item {
        padding: 12px;
        font-size: 12px;
        border-radius: 2.5px;
    }
    /* 모바일: 전체행(구매확정/리뷰) 제외 나머지는 2개씩, 홀수면 마지막이 한 줄 전체 (flex-grow로 채움) */
    .order_view_style .ov_common.ov_item .ord_btn .ord_btn_item:not(.ord_btn_full) {
        flex: 1 1 calc(50% - 2.5px);
    }

    .order_view_style .ov_common.ov_item .ov_cancel_all {
        font-size: 12px;
        border-radius: 2.5px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel {
        padding: 15px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel_toggle,
    .order_view_style .ov_common.ov_item .cancel-all-btn {
        padding: 14px;
        font-size: 12px;
        border-radius: 2.5px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel_row {
        gap: 6px;
        margin-bottom: 8px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel_field {
        gap: 5px;
        margin-bottom: 8px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel_label {
        width: 50px;
        font-size: 13px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel_input,
    .order_view_style .ov_common.ov_item .ov_cancel_select {
        height: 40px;
        font-size: 12px;
        border-radius: 2.5px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel_select {
        padding-right: 14px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel_select_wrap::after {
        right: 13px;
        width: 5px;
        height: 5px;
        margin-top: -3px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel_submit {
        margin-top: 15px;
        padding: 14px;
        font-size: 12px;
        border-radius: 2.5px;
    }

    .order_view_style .ov_common.ov_item .ov_cancel_done {
        margin-top: 15px;
        padding: 20px 15px;
        border-radius: 2.5px;
    }
    
    .order_view_style .ov_common.ov_item .ov_cancel_done .ov_cancel_reason_title {
        font-size: 12px;
    }

    /* ===== 배송지 (ov_payment) ===== */
    .order_view_style .ov_common.ov_receipt .ov_receipt_item {
        font-size: 14px;
    }

    .order_view_style .ov_common.ov_receipt .ov_receipt_item.ov_receipt_name {
        font-size: 14px;
    }

    .order_view_style .ov_common.ov_receipt .ov_receipt_item.ov_receipt_hp {
        font-size: 14px;
    }

    /* ===== 결제정보 (ov_payment) ===== */
    .order_view_style .ov_common.ov_payment .ov_pay_row {
        gap: 10px;
    }

    .order_view_style .ov_common.ov_payment .ov_pay_main .ov_pay_label,
    .order_view_style .ov_common.ov_payment .ov_pay_main .ov_pay_val {
        font-size: 14px;
    }

    .order_view_style .ov_common.ov_payment .ov_pay_sub .ov_pay_label,
    .order_view_style .ov_common.ov_payment .ov_pay_sub .ov_pay_val {
        font-size: 12px;
    }

    .order_view_style .ov_common.ov_payment .ov_pay_sub .ov_pay_label {
        padding-left: 13px;
    }

    .order_view_style .ov_common.ov_payment .ov_pay_copy svg {
        width: 13px;
        height: 13px;
    }

    .order_view_style .ov_common.ov_payment .ov_pay_receipt_txt {
        font-size: 12px;
    }

    .order_view_style .ov_common.ov_payment .ov_pay_btn {
        font-size: 12px;
        border-radius: 4px;
    }

    /* ===== 포인트 혜택 (ov_point) ===== */
    .order_view_style .ov_common.ov_point .ov_point_row {
        gap: 10px;
    }

    .order_view_style .ov_common.ov_point .ov_point_main .ov_point_label,
    .order_view_style .ov_common.ov_point .ov_point_main .ov_point_val {
        font-size: 14px;
    }

    .order_view_style .ov_common.ov_point .ov_point_sub .ov_point_label,
    .order_view_style .ov_common.ov_point .ov_point_sub .ov_point_val {
        font-size: 12px;
    }

    .order_view_style .ov_common.ov_point .ov_point_sub .ov_point_label {
        padding-left: 13px;
    }

    .order_view_style .ov_common.ov_point .ov_point_tip {
        top: 130%;
        gap: 6px;
        padding: 13px;
        font-size: 12px;
        border-radius: 2.5px;
    }

    /* ===== 배송조회 모달 ===== */
    .oi_modal.delivery_oi_modal .oi_modal_head {
        padding-bottom: 20px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_body {
        margin-top: 30px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_hero {
        margin-bottom: 30px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_hero_date {
        font-size: 21px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_hero_desc {
        font-size: 13px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_product {
        padding: 20px 15px;
        border-radius: 5px;

    }

    .oi_modal.delivery_oi_modal .ov_dv_product_inner {
        gap: 15px;
        padding-bottom: 15px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_thumb {
        width: 40px;
        height: 40px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_pname {
        font-size: 13px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_pdate {
        font-size: 12px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_info {
        padding: 15px 0 0;
    }

    .oi_modal.delivery_oi_modal .ov_dv_info > div {
        gap: 8px;
        margin-bottom: 11px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_info dt {
        width: 55px;
        font-size: 13px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_info dd {
        font-size: 13px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_tel svg {
        width: 12px;
        height: 12px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_timeline {
        margin-top: 10px;
        padding: 15px;
        border-radius: 5px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_timeline li:not(:last-child)::before {
        left: 8px;
        top: 20px;
        bottom: -2px;
        width: 2px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_dot {
        margin: 4px 4px 0;
    }

    .oi_modal.delivery_oi_modal .ov_dv_timeline li.is-done .ov_dv_dot {
        width: 17px;
        height: 17px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_step_name {
        font-size: 13px;
    }

    .oi_modal.delivery_oi_modal .ov_dv_step_date {
        font-size: 11px;
    }
    
    /* ===== 취소 요청 모달 (cancel_oi_modal) ===== */
    .oi_modal.cancel_oi_modal .oi_modal_panel {
        width: 100%;
        max-width: none;
        max-height: 90vh;
    }
    .oi_modal.cancel_oi_modal .oi_modal_head {
        padding-bottom: 20px;
        border-bottom: 0;
    }

    .oi_modal.cancel_oi_modal .ov_cm_scroll {
        margin-top: 0;
    }

    .oi_modal.cancel_oi_modal .ov_cm_box_wrap {
        max-height: 30vh;
        border-radius: 5px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_all {
        padding: 20px 15px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_all_txt {
        font-size: 14px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_list {
        padding: 0 15px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_row {
        gap: 10px;
        padding: 15px 0;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_check {
        width: 20px;
        height: 20px;
        border: 1px solid #cfcfcf;
    }

    .oi_modal.cancel_oi_modal .ov_cm_thumb {
        flex-shrink: 0;
        width: 75px;
        height: 75px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_subname {
        font-size: 11px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_name {
        font-size: 13px;
        font-weight: 500;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_opt {
        gap: 8px;
        font-size: 12px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_opt .opt_label {
        font-size: 10px;
        border-radius: 4px;
    }

    .oi_modal.cancel_oi_modal .ov_cm_opt .opt_val,
    .oi_modal.cancel_oi_modal .ov_cm_opt .opt_qty {
        max-width: 70%;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_opt .opt_qty::before {
        margin-right: 5px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_price {
        margin-top: 9px;
        font-size: 15px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_form {
        margin-top: 10px;
        padding: 20px 15px;
        border-radius: 5px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_field_row {
        flex-direction: column;
        gap: 0;
        margin-bottom: 10px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_field {
        display: block;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_label {
        width: 100%;
        margin-bottom: 13px;
        font-size: 14px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_input,
    .oi_modal.cancel_oi_modal .ov_cm_select {
        height: 40px;
        font-size: 12px;
        border-radius: 2.5px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_select {
        padding-right: 14px;
    }
    
    .oi_modal.cancel_oi_modal .ov_cm_select_wrap::after {
        right: 13px;
        width: 5px;
        height: 5px;
        margin-top: -3px;
    }

    .oi_modal.cancel_oi_modal .ov_cm_foot {
        padding: 14px 0 0;
    }

    .oi_modal.cancel_oi_modal .ov_cm_btn {
        flex: 1;
        min-width: 0;
        padding: 14px 15px;
        font-size: 14px;
        border-radius: 2.5px;
    }
}

/* 구매확정/취소완료 — 상태 텍스트 회색(#999) (리스트 .od_state.end와 동일 톤) */
.order_view_style .ov_common.ov_item .order_product_status.end {
    color: #999999;
}

/* 교환/반품 진행 상태값 — 빨강 강조 (리스트 od_state / 상세 order_product_status) */
.orderinquiry_only .orderinquiry_form .od_wrap .od_item .od_title .od_state.is-refund {
    color: #f86e78;
}
.order_view_style .ov_common.ov_item .order_product_status.is-refund {
    color: #f86e78;
}

/* 교환/반품 사유·상세사유 (상세페이지, view_refund) */
.order_view_style .ov_common.ov_item .ov_refund_reason {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #f2f2f2;
}
.order_view_style .ov_common.ov_item .ov_refund_reason_row {
    display: flex;
    gap: 16px;
}
.order_view_style .ov_common.ov_item .ov_refund_reason_row + .ov_refund_reason_row {
    margin-top: 8px;
}
.order_view_style .ov_common.ov_item .ov_refund_reason_label {
    flex-shrink: 0;
    width: 70px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
}
.order_view_style .ov_common.ov_item .ov_refund_reason_val {
    flex: 1;
    font-size: 16px;
    line-height: 1.5;
    color: #1b1b1b;
}

@media (max-width: 991px) {
    .order_view_style .ov_common.ov_item .ov_refund_reason_label {
        width: 56px;
        font-size: 13px;
    }
    .order_view_style .ov_common.ov_item .ov_refund_reason_val {
        font-size: 13px;
    }
}
/* 주문서 작성 페이지 */.ordersheet {
    width: 100%;
}
.ordersheet_cont {
    display: block;
    margin-bottom: 80px;
}
/* 승민 라운드4 추가요청1 — "결제증빙"/"결제 진행 필수 동의" 섹션이 바로 위 요소와 너무 붙어
   보인다는 지적. 991px 초과(데스크톱)에서만 상단 여백을 더한다 — 991px 이하는 각 섹션이 이미
   자기 소유의 padding-top(40px, .ordersheet_proof_of_payment/.ordersheet_payment_agree
   미디어쿼리 규칙)으로 이 여백을 전담하고 있어, 여기에 또 margin-top을 얹으면 모바일에서
   간격이 두 배로 벌어진다(아래 각 미디어쿼리 블록에서 margin-top:0으로 명시적으로 되돌림). */
@media (min-width: 992px) {
    .ordersheet_proof_of_payment,
    .ordersheet_payment_agree {
        margin-top: 40px;
    }
}
@media (max-width: 991px) {
    .ordersheet_cont {
        position: relative;
        margin-bottom: 0;
        padding: 40px 0;
    }
    .ordersheet_payment.ordersheet_cont,
    /* 승민 라운드3 요청2 — 쿠폰/적립금 섹션(.ordersheet_cp)의 모바일 하단 여백이 결제수단
       리스트 섹션(.ordersheet_payment)보다 30px 적어(40px vs 70px) 두 섹션의 하단 리듬이
       달라 보였다(실측 확인). 같은 값을 공유하도록 선택자에 .ordersheet_cp.ordersheet_cont 추가
       — 상단 패딩(40px)과 다른 일반 섹션들과의 desktop 여백(80px, 공용 .ordersheet_cont)은
       그대로 두고 이 하단 값만 통일한다. */
    .ordersheet_cp.ordersheet_cont {
        padding: 40px 0 70px;
    }
    .ordersheet_cont::after {
        content: "";
        width: calc(100% + 30px);
        height: 10px;
        background: #f9f9fa;
        position: absolute;
        bottom: 0;
        left: -15px;
    }
}
@media (max-width: 480px) {
    .ordersheet_cont {
        padding: 30px 0 40px;
    }
    .ordersheet_payment.ordersheet_cont,
    .ordersheet_cp.ordersheet_cont {
        padding: 40px 0 70px;
    }
}
/* 승민 라운드4 추가요청2 — "결제수단" 섹션 상단 여백이 다른 섹션 간 표준 리듬(예: 991px 이하에서
   섹션 사이 40px)의 2배로 벌어져 보이는 문제. 원인: 991px 이하 폭에서 #tempPayBox 첫 자식으로
   옮겨오는 빈 .ordersheet_paytab_right/#mobile_payment 플레이스홀더(40px, 데스크톱 전용
   가격요약 위젯 자리)가 이 섹션 자체의 상단 패딩(40px)에 그대로 얹혀 총 80px이 된다. 위 두
   미디어쿼리 블록(991px/480px)의 padding-top(40px)만 0으로 낮춰 표준 40px에 맞춘다 — 하단
   패딩(70px, 라운드3 결정)은 그대로 유지. */
@media (max-width: 991px) {
    .ordersheet_payment.ordersheet_cont {
        padding-top: 0;
    }
}
.ordersheet_title {
    font-size: 24px;
    font-weight: 500;
    color: var(--main-box-font-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 25px;
    border-bottom: 1px solid #444444;
}
.ordersheet_title h3 {
    font-family: "Pretendard";
    font-weight: 500;
}

.ordersheet_text_check label {
    display: flex;
}

.ordersheet_text_check label .text {
    font-size: 15px;
    color: var(--main-box-font-color2);
    padding-left: 10px;
}


@media (max-width: 991px) {
    .ordersheet_title {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .ordersheet_text_check label .text {
        padding-left: 8px;
        font-size: 13px;
    }

    #tempPayBox .ch_check.ordersheet_text_check .radio_check_label, 
    .ordersheet_send_method .ch_check.ordersheet_text_check .radio_check_label {
        display: flex;
        align-items: center;
        padding-bottom: 30px;
    }
}
@media (max-width: 480px) {
    .ordersheet_title {
        font-size: 16px;
        font-weight: 700;
    }
    .ordersheet_title h3 {
        font-weight: 700;
    }
}
.ordersheet_title_length .first_product_name,
.ordersheet_title_length .other_text,
.ordersheet_title_length .mobile_hidden {
    display: none;
}
@media (max-width: 991px) {
    .ordersheet_title_length .first_product_name,
    .ordersheet_title_length .other_text,
    .ordersheet_title_length .mobile_hidden {
        display: inline;
    }

    .ordersheet_title_length .other_text {
        margin-right: 15px;
        font-size: 13px;
        color: var(--main-box-font-color2);
        font-weight: 400;
    }

    .ordersheet_title_length .other_text .point_color {
        display: inline-block;
        color: var(--main-box-font-color) !important;
        font-weight: 500;
    }

    .ordersheet_title_length .other_text .point_color .product_length {
        display: inline-block;
    }
}
.ordersheet_title_arrow {
    display: flex;
    width: 16px;
    height: 9px;
    position: relative;
    right: 0;
    transition: all 0.3s ease;
}
.ordersheet_title_arrow .arrow {
    width: 2px;
    height: 11px;
    background: #555555;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 4px;
}
.ordersheet_title_arrow .arrow:last-child {
    left: auto;
    right: 3px;
    transform: rotate(-45deg);
}
.ordersheet_title_arrow.active {
    transform: rotate(180deg);
}
@media (max-width: 991px) {
    .ordersheet_title_arrow.active {
        top: 4px;
    }
}
@media (max-width: 480px) {
    .ordersheet_title_arrow {
        width: 12px;
        height: 7px;
    }
    .ordersheet_title_arrow .arrow {
        width: 1px;
        height: 9px;
        left: 3px;
    }
    .ordersheet_title_arrow .arrow:last-child {
        left: auto;
        right: 2px;
    }
    .ordersheet_title_arrow.active {
        top: 0;
    }
}
.ordersheet_title_length {
    display: flex;
    align-items: center;
}
@media (max-width: 991px) {
    .ordersheet_title_length .ordersheet_length {
        display: block;
        margin-right: 15px;
        padding: 0;
        border: 0;
    }
    /* .ordersheet_title_length.active .ordersheet_length > .other_text{
    display: none;
  } */
}
@media (max-width: 991px) {
    .ordersheet_title_length .ordersheet_length {
        display: none;
    }
    .ordersheet_title_length .ordersheet_length .mobile_hidden {
        display: none;
    }
    .ordersheet_title_length .ordersheet_length .first_product_name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-inline-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        line-height: 1.1;
        height: 1.1em;
        position: relative;
        top: 3px;
    }
}
@media (max-width: 480px) {
    .ordersheet_title_length .ordersheet_length .first_product_name {
        max-width: 150px;
    }
}
.ordersheet_inner {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eeeeee;
    display: none;
    align-items: center;
}
.ordersheet_inner:first-child {
    padding-top: 30px;
}
.ordersheet_inner:last-child {
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .ordersheet_inner {
        margin-bottom: 20px;
        padding-bottom: 0;
        border-bottom: none;
        position: relative;
    }
    .ordersheet_inner:first-child {
        padding-top: 10px;
    }
    .ordersheet_inner + .ordersheet_inner {
        border-bottom: 1px solid #eeeeee;
    }
    .ordersheet_inner + .ordersheet_inner::before {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: #eee;
        position: absolute;
        top: -20px;
        left: 0;
    }
}
.ordersheet_inner .image {
    width: 130px;
    border-radius: 5px;
    overflow: hidden;
}
.ordersheet_inner .image img {
    width: 100%;
}
@media (max-width: 480px) {
    .ordersheet_inner .image {
        width: 78px;
        min-width: 78px;
        height: 78px;
        border-radius: 3px;
        overflow: hidden;
    }
    .ordersheet_inner .image img {
        height: 83px;
        position: relative;
        top: -5px;
        object-fit: cover;
    }
}
.ordersheet_inner .content {
    width: calc(100% - 230px);
    padding-left: 20px;
}
.ordersheet_inner .content_subname {
    font-size: 13px;
    color: #666666;
    font-weight: 300;
    margin-bottom: 4px;
    line-height: 1.5;
}
.ordersheet_inner .content_name {
    font-size: 18px;
    font-weight: bold;
    color: var(--main-box-font-color);
    line-height: 1.5;
    margin-bottom: 10px;
}
.ordersheet_inner .content_option {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    /*
  li::after{
      content:"";
      width:1px;
      height:15px;
      background:#c7c7c7;
      position:absolute;
      right:-10px;
      top:2px;
      @include responsive-991(){display: none;}
  }
  */
}
.ordersheet_inner .content_option li {
    position: relative;
    font-size: 14px;
    color: var(--main-box-font-color2);
    margin-bottom: 15px;
    width: 100%;
}
@media (max-width: 991px) {
    .ordersheet_inner .content_option li {
        margin-bottom: 10px;
    }
}
.ordersheet_inner .content_option li:last-child {
    margin-bottom: 0;
}
.ordersheet_inner .content_option li:last-child::after {
    display: none;
}
.ordersheet_inner .content_price {
    display: flex;
    align-items: baseline;
}
.ordersheet_inner .content_price li {
    font-size: 16px;
    color: var(--main-box-font-color);
    margin-right: 10px;
    font-weight: 600;
}
.ordersheet_inner .content_price li:last-child {
    margin-right: 0;
    font-size: 14px;
    color: var(--main-box-font-color2);
}
@media (max-width: 480px) {
    .ordersheet_inner .content {
        width: 100%;
        padding-left: 18px;
    }
    .ordersheet_inner .content_subname {
        font-size: 10px;
        font-weight: 400;
        margin-bottom: 1px;
    }
    .ordersheet_inner .content_name {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        height: 22.5px;
    }
    .ordersheet_inner .content_option {
        margin-bottom: 0;
    }
    .ordersheet_inner .content_option li {
        font-size: 12px;
        margin-right: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        /* 2024-07-29 (주)파이브센스_FIVESENSES.Corp */
        /* height: 12px; */
    }
    .ordersheet_inner .content_option li::after {
        top: 0;
        right: -8px;
        height: 12px;
    }
    .ordersheet_inner .content_price {
        margin-top: 7px;
    }
    .ordersheet_inner .content_price li {
        font-size: 12px;
        margin-right: 6px;
    }
    .ordersheet_inner .content_price li:last-child {
        font-size: 12px;
    }
    .ordersheet_inner .content_price li span {
        font-size: 14px;
    }
}
.ordersheet_inner .coupon {
    width: 100px;
    text-align: right;
}
.ordersheet_inner .coupon button {
    padding: 0 20px;
    width: 100px;
    height: 46px;
    line-height: 44px;
    color: #fff;
    border-radius: 5px !important;
    font-size: 16px;
    cursor: pointer;
    border: none;
}
.ordersheet_inner .coupon button.cp_btn {
    background: #235cf5;
}
.ordersheet_inner .coupon button.cp_cancel {
    margin-top: 10px;
}
@media (max-width: 991px) {
    .ordersheet_inner .coupon button {
        margin-left: 2.28%;
        padding: 0 15px;
        text-align: center;
        font-size: 12px;
    }
}
@media (max-width: 480px) {
    .ordersheet_inner .coupon button {
        height: 40px;
        line-height: 38px;
        width: 80px;
        font-weight: 500;
    }
}
.ordersheet_length {
    padding: 39.5px 0;
    text-align: center;
    border-bottom: 1px solid #eeeeee;
    font-size: 18px;
    color: var(--main-box-font-color);
    font-weight: 500;
    display: none;
}
.ordersheet_length.active {
    display: block;
}
.ordersheet_length .point_color {
    color: #235cf5;
}
.ordersheet_length div {
    display: inline;
}
@media (max-width: 991px) {
    .ordersheet_length {
        display: none;
    }
    /* .ordersheet_length.active {
    display: none;
  } */
}
@media (max-width: 480px) {
    .ordersheet_length {
        font-size: 13px;
    }
}
.ordersheet .ordersheet_write {
    padding-top: 25px;
}
/* 승민 라운드5 요청(개인통관고유부호 등 write_input 공용 간격) — margin-bottom이 4px 배수
   리듬(다른 라운드들이 정착시킨 4/8/12/16/20/24/32/40px)에서 벗어난 15px/23px였던 것을
   16px/24px로 보정. od_pccc뿐 아니라 이름/연락처/주소 등 같은 클래스를 쓰는 모든 필드 행에
   동일하게 적용되어 전체 통일성은 그대로 유지된다. */
.ordersheet .ordersheet_write_input {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input {
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
}
.ordersheet .ordersheet_write_input:last-child {
    margin-bottom: 0;
}
.ordersheet .ordersheet_write_input.w485 {
    width: 485px;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input.w485 {
        width: 100%;
    }
}
.ordersheet .ordersheet_write_input.w490 {
    width: 490px;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input.w490 {
        width: 100%;
    }
}
.ordersheet .ordersheet_write_input.w615 {
    width: 615px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.ordersheet .ordersheet_write_input.w615 > label {
    position: relative;
    top: 13px;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input.w615 {
        width: 100%;
    }
    .ordersheet .ordersheet_write_input.w615 > label {
        top: 0;
    }
}
.ordersheet .ordersheet_write_input.w620 {
    width: 620px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.ordersheet .ordersheet_write_input.w620 > label {
    position: relative;
    top: 13px;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input.w620 {
        width: 100%;
    }
    .ordersheet .ordersheet_write_input.w620 > label {
        top: 0;
    }
}
.ordersheet .ordersheet_write_input.w100p {
    width: 100%;
}
.ordersheet .ordersheet_write_input label {
    width: 115px;
    font-size: 16px;
    color: var(--main-box-font-color2);
    font-weight: 400;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input label {
        width: 100%;
        /* 라벨-인풋 사이 세로 간격이 11px로 좁아 라벨과 인풋이 붙어 보였다(od_pccc 등에서
           승민 지적) — 4px 배수 리듬으로 한 단계 더 벌려 16px로. */
        margin-bottom: 16px;
    }
}
@media (max-width: 480px) {
    .ordersheet .ordersheet_write_input label {
        font-size: 14px;
    }
}
.ordersheet .ordersheet_write_input input {
    width: calc(100% - 115px);
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    font-size: 16px;
    color: #0c0c0c;
    background-color: #fff;
    padding: 0 15px;
    height: 45px;
    line-height: 45px;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input input {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .ordersheet .ordersheet_write_input input {
        font-size: 14px;
        height: 40px;
        line-height: 38px;
    }
}
.ordersheet .ordersheet_write_input input:focus {
    border-color: var(--main-box-line-point-color);
}
.ordersheet .ordersheet_write_input textarea {
    width: calc(100% - 115px);
    resize: none;
    outline: none;
    box-shadow: none;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #d6d6d6;
    font-size: 16px;
    line-height: 1.5;
    color: #0c0c0c;
    background-color: #fff;
    padding: 15px;
}
.ordersheet .ordersheet_write_input textarea:focus {
    border-color: var(--main-box-line-point-color);
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input textarea {
        width: 100%;
        border-radius: 2.5px;
    }
}
@media (max-width: 480px) {
    .ordersheet .ordersheet_write_input textarea {
        height: 77px;
        font-size: 14px;
        padding: 10px 15px;
    }
}
.ordersheet .ordersheet_write .b_hp .msg-box {
    margin-left: 115px;
    margin-top: -2px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #ff0000;
}
.ordersheet .ordersheet_write_input.member {
    margin-bottom: 20px;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input.member {
        flex-wrap: nowrap;
    }
}
.ordersheet .ordersheet_write_input.member :last-child {
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input.member label {
        width: 115px;
        margin-bottom: 0;
    }
}
@media (max-width: 480px) {
    .ordersheet .ordersheet_write_input.member label {
        width: 85px;
    }
}
.ordersheet .ordersheet_write_input.member input {
    color: var(--main-box-font-color);
    background-color: transparent;
    border: 0;
    border-radius: 0;
    height: auto;
    line-height: normal;
    cursor: default;
    padding: 0;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input.member input {
        width: calc(100% - 115px);
    }
}
@media (max-width: 480px) {
    .ordersheet .ordersheet_write_input.member input {
        width: calc(100% - 85px);
    }
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input.member .ordersheet_write_addr_wrap {
        width: calc(100% - 115px);
    }
}
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap {
    width: calc(100% - 115px);
}
.ordersheet .ordersheet_write_input.w620 .ordersheet_write_addr_wrap {
    width: calc(100% - 120px);
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap,
    .ordersheet .ordersheet_write_input.w620 .ordersheet_write_addr_wrap {
        width: 100%;
    }
}
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .ordersheet_write_addr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .ordersheet_write_addr:last-child {
    margin-bottom: 0;
}
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .ordersheet_write_addr #daum_juso_pageod_b_zip {
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    max-height: 400px;
}
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .ordersheet_write_addr #daum_juso_pageod_zip,
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .ordersheet_write_addr.maxh400 > div {
    max-height: 400px;
}
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .left_label {
    width: calc(100% - 130px);
    margin-bottom: 0;
}

@media (max-width:991px) {
    .ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .left_label {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .left_label {
        width: calc(100% - 83px);
    }
}
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .right_label {
    width: 120px;
    margin-left: 10px;
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .right_label {
        width: 75px;
        margin-left: 8px;
    }
}
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .right_label button {
    width: 100%;
    height: 45px;
    line-height: 43px;
    background: var(--main-btn-point-color);
    color: #fff;
    text-align: center;
    display: block;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 300;
    border: 0;
}
@media (max-width: 480px) {
    .ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap .right_label button {
        height: 40px;
        line-height: 38px;
        font-size: 12px;
        border-radius: 2.5px;
        font-weight: 500;
    }
}
.ordersheet .ordersheet_write_input .ordersheet_write_addr_wrap input {
    width: 100%;
}
.ordersheet .ordersheet_write_addr_btn {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}
.ordersheet .ordersheet_write_addr_btn .shipping_pop_open {
    display: inline-flex;
    position: relative;
    color: var(--main-box-font-point-color);
    height: 16px;
    font-size: 16px;
}
.ordersheet .ordersheet_write_addr_btn .shipping_pop_open::after {
    content: "";
    width: 100%;
    height: 1px;
    background: var(--main-box-line-point-color);
    position: absolute;
    bottom: -5px;
    left: 0;
}
@media (max-width: 480px) {
    .ordersheet .ordersheet_write_addr_btn .shipping_pop_open {
        font-size: 13px;
        height: 12px;
        bottom: -4px;
        color: #666666;
    }
    .ordersheet .ordersheet_write_addr_btn .shipping_pop_open::after {
        background: #666666;
    }
}
.ordersheet .ordersheet_write_caption {
    font-size: 13px;
    color: #999;
    font-weight: 400;
}
@media (max-width: 991px) {
    .ordersheet .ordersheet_write_caption {
        text-align: left;
        width: 100%;
        margin-top: -10px;
    }
}
@media (max-width: 480px) {
    .ordersheet .ordersheet_write_caption {
        font-size: 11px;
        margin-top: -15px;
    }
}
.ordersheet_paytab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
@media (max-width: 480px) {
    .ordersheet_paytab {
        padding: 0;
    }
}
.ordersheet_paytab_left {
    width: 70%;
}
.ordersheet_paytab_right {
    width: 25.834%;
    position: sticky;
    top: 150px;
    margin-bottom: 0;
}
.ordersheet_paytab_right .paytab_tt {
    font-size: 24px;
    color: var(--main-box-font-color);
    font-weight: 500;
    margin-bottom: 26px;
}
@media (max-width: 480px) {
    .ordersheet_paytab_right .paytab_tt {
        font-size: 15.5px;
        font-weight: 600;
    }
}
.ordersheet_paytab_right .paytab_con {
    background: #fafafa;
    border: 1px solid #f2f2f2;
    padding: 30px;
}
@media (max-width: 991px) {
    .ordersheet_paytab_right .paytab_con {
        background: none;
        border: none;
        padding: 30px 0 10px;
    }
}
.ordersheet_paytab_right .paytab_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
@media (max-width: 991px) {
    .ordersheet_paytab_right .paytab_price {
        margin-bottom: 18px;
    }
}
.ordersheet_paytab_right .paytab_price_obj {
    color: #444;
    font-size: 16px;
    font-weight: 400;
    width: 50%;
    margin-bottom: 17px;
}
@media (max-width: 991px) {
    .ordersheet_paytab_right .paytab_price_obj {
        margin-bottom: 0;
        color: var(--main-box-font-color1);
    }
}
@media (max-width: 480px) {
    .ordersheet_paytab_right .paytab_price_obj {
        font-size: 15px;
    }
}
.ordersheet_paytab_right .paytab_price_obj.sub {
    padding-left: 15px;
    position: relative;
}
.ordersheet_paytab_right .paytab_price_obj.sub:before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: 1px solid #dcdcdc;
    border-width: 0 0 1px 1px;
    position: absolute;
    top: 5px;
    left: 0;
}
.ordersheet_paytab_right .paytab_price_obj.sub:nth-last-child(2) {
    margin-bottom: 20px;
}
@media (max-width: 991px) {
    .ordersheet_paytab_right .paytab_price_obj.sub:nth-last-child(2) {
        margin-bottom: 0;
    }
    .ordersheet_paytab_right .paytab_price_obj.sub:nth-child(3) {
        margin-top: 14px;
        color: var(--main-box-font-color4);
    }
}
.ordersheet_paytab_right .paytab_price_num {
    color: #0c0c0c;
    font-size: 18px;
    font-weight: 400;
    width: 50%;
    text-align: right;
    margin-bottom: 20px;
}
@media (max-width: 991px) {
    .ordersheet_paytab_right .paytab_price_num {
        margin-bottom: 0;
        color: var(--main-box-font-color);
    }
}
@media (max-width: 480px) {
    .ordersheet_paytab_right .paytab_price_num {
        font-size: 15px;
    }
    .ordersheet_paytab_right .paytab_price_num > span {
        font-size: 16px;
    }
}
.ordersheet_paytab_right .paytab_price_num.sub:nth-last-child(1) {
    margin-bottom: 20px;
}
@media (max-width: 991px) {
    .ordersheet_paytab_right .paytab_price_num.sub:nth-last-child(1) {
        margin-bottom: 0;
    }
    .ordersheet_paytab_right .paytab_price_num.sub:nth-child(4) {
        margin-top: 14px;
    }
}
.ordersheet_paytab_right .paytab_price.total {
    padding-top: 20px;
    border-top: 1px solid #f2f2f2;
}
.ordersheet_paytab_right .paytab_price.total div {
    margin-bottom: 0;
}
.ordersheet_paytab_right .paytab_price.total span {
    font-size: 25px;
    font-weight: 600;
    margin-right: 3px;
    display: inline-block;
}
@media (max-width: 480px) {
    .ordersheet_paytab_right .paytab_price.total span {
        font-size: 20px;
    }
}
.ordersheet_paytab_right .paytab_price.point {
    width: 100%;
    margin-top: 12px;
}
@media (max-width: 480px) {
    .ordersheet_paytab_right .paytab_price.point {
        margin-top: 7px;
    }
}
.ordersheet_paytab_right .paytab_price.point .paytab_price_point {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.ordersheet_paytab_right .paytab_price.point .paytab_price_point div {
    font-size: 13px;
    font-weight: 300;
}
.ordersheet_paytab_right .paytab_price.point .paytab_price_point div .point_sticker {
    display: block;
    width: 33px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    background: var(--main-box-font-point-color);
    font-size: 11px;
    color: #fff;
    text-align: center;
}
@media (max-width: 480px) {
    .ordersheet_paytab_right .paytab_price.point .paytab_price_point div .point_sticker {
        font-weight: 400;
        line-height: 18px;
    }
}
.ordersheet_paytab_right .paytab_price.point .paytab_price_point div.point_num {
    color: #444;
    position: relative;
    top: 1px;
    font-weight: 400;
}
@media (max-width: 991px) {
    .ordersheet_paytab_right .paytab_price.point .paytab_price_point div.point_num {
        color: var(--main-box-font-color1);
    }
}
@media (max-width: 480px) {
    .ordersheet_paytab_right .paytab_price.point .paytab_price_point div.point_num {
        top: 0;
        font-weight: 400;
    }
}
.ordersheet_paytab_right .paytab_price.point .paytab_price_point div.point_txt {
    color: var(--main-box-font-color3);
}
.ordersheet_paytab_right .paytab_price.point .paytab_price_point div + div {
    margin-left: 7px;
}
.ordersheet_paytab_right .paytab_price .sub {
    color: #999;
    font-size: 14px;
    margin-bottom: 8px;
}
@media (max-width: 991px) {
    .ordersheet_paytab_right .paytab_price .sub {
        color: var(--main-box-font-color4);
    }
}
@media (max-width: 480px) {
    .ordersheet_paytab_right .paytab_price .sub {
        font-size: 12px;
    }
    .ordersheet_paytab_right .paytab_price .sub span {
        font-size: inherit;
    }
}
@media (max-width: 991px) {
    .ordersheet_paytab {
        flex-direction: column;
    }
    .ordersheet_paytab_left {
        width: 100%;
    }
    .ordersheet_paytab_right {
        width: 100%;
        position: relative;
        top: 0;
    }
}
@media (max-width: 480px) {
    .ordersheet_paytab #mobile_payment {
        position: relative;
        padding: 0 0 40px;
    }
    .ordersheet_paytab #mobile_payment::after {
        content: "";
        display: block;
        width: 110%;
        height: 10px;
        background: #f9f9fa;
        position: absolute;
        left: -15px;
        bottom: 30px;
    }
}
.ordersheet_cp_input {
    padding: 25px 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.ordersheet_cp_input:first-child {
    /* border-bottom: 1px solid #eee; */
}
.ordersheet_point_con.use_point_con .ordersheet_cp_input {
    padding-bottom: 0;
}
@media (max-width: 480px) {
    .ordersheet_cp_input {
        padding: 10px 0;
    }
    .ordersheet_cp_input:first-child {
        border-bottom: none;
    }
}
.ordersheet_cp_tt {
    color: var(--main-box-font-color1);
    font-size: 16px;
    font-weight: 400;
    width: 38.21%;
    line-height: 46px;
}
.ordersheet_cp_btn {
    width: 100%;
}
.ordersheet_cp_btn button {
    display: block;
    background: #f9f9f9 url(../img/icon_order_cp.png) no-repeat calc(100% - 15px) center;
    width: 100%;
    padding: 0 15px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    height: 46px;
    line-height: 44px;
    text-align: left;
    color: #999;
    font-size: 16px;
    font-weight: 300;
}
.ordersheet_cp_btn button.coupon_cancel {
    background: #235cf5;
    border: none;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
    width: auto;
}
@media (max-width: 480px) {
    .ordersheet_cp_btn button.coupon_cancel {
        font-size: 12px;
        width: 22.72%;
        padding: 0;
        text-align: center;
    }
}
@media (max-width: 480px) {
    .ordersheet_cp_btn button {
        height: 40px;
        line-height: 38px;
        font-size: 14px;
        border-radius: 2.5px;
        background-size: 5px 9px;
    }
}
.ordersheet_cp_btn .coupon_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
}
@media (max-width: 480px) {
    .ordersheet_cp_btn .coupon_list {
        font-size: 13px;
    }
}
.ordersheet_cp_btn.point {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.ordersheet_cp_btn.point .input_box {
    position: relative;
    width: 36.527%;
}
.ordersheet_cp_btn.point .input_box input {
    width: 100%;
    height: 46px;
    line-height: 44px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    padding: 0 15px;
    color: #999;
    font-size: 16px;
    background-color: #fff;
}
@media (max-width: 991px) {
    .ordersheet_cp_btn.point .input_box {
        width: calc(100% - 83px);
        padding-left: 0;
    }
}
@media (max-width: 480px) {
    .ordersheet_cp_btn.point .input_box input {
        height: 40px;
        line-height: 38px;
        font-size: 14px;
        border-radius: 2.5px;
        font-weight: 300;
    }
}
.ordersheet_cp_btn.point .input_box .del_point {
    background: #b7b7b7;
    display: block;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0, -50%) rotate(0);
    cursor: pointer;
}
@media (max-width: 991px) {
    .ordersheet_cp_btn.point .input_box .del_point {
        width: 14px;
        height: 14px;
    }
}
.ordersheet_cp_btn.point .input_box .del_point:before {
    content: "";
    display: block;
    width: 1px;
    height: 8px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.ordersheet_cp_btn.point .input_box .del_point:after {
    content: "";
    display: block;
    width: 1px;
    height: 8px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
@media (max-width: 991px) {
    .ordersheet_cp_btn.point .input_box .del_point:before,
    .ordersheet_cp_btn.point .input_box .del_point:after {
        height: 7px;
    }
}
.ordersheet_cp_btn.point .btn_all_point {
    margin-left: 10px;
    padding: 0 28.32px;
    height: 46px;
    line-height: 44px;
    color: #fff;
    background: var(--main-btn-point-color);
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}
@media (max-width: 991px) {
    .ordersheet_cp_btn.point .btn_all_point {
        width: 22.72%;
        margin-left: 2.28%;
        text-align: center;
        font-size: 12px;
        padding: 0 13px;
        border-radius: 2.5px;
        width: 75px;
        margin-left: 8px;
        font-size: 500;
    }
}
@media (max-width: 480px) {
    .ordersheet_cp_btn.point .btn_all_point {
        height: 40px;
        line-height: 38px;
    }
}
.ordersheet_cp_btn.point #sod_frm_pt {
    display: block;
    width: 100%;
    margin-top: 15px;
    color: var(--main-box-font-color4);
    font-size: 14px;
}
.ordersheet_cp_btn.point #sod_frm_pt span {
    color: var(--main-box-font-color);
    font-weight: 600;
}
@media (max-width: 480px) {
    .ordersheet_cp_btn.point #sod_frm_pt {
        font-size: 13px;
        margin-top: 13px;
    }
}
@media (max-width: 991px) {
    .ordersheet_cp_tt {
        display: none;
    }
}
@media (max-width: 480px) {
    .ordersheet_cp .ordersheet_title {
        margin-bottom: 30px;
    }
}
.ordersheet_cp_con {
    /* border-bottom: 1px solid #eeeeee; */
}
.ordersheet_point_con {
    border-top: 1px solid #eeeeee;
}
.ordersheet_payment_con,
.ordersheet_send_method_con_box {
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 -5px;
}
.ordersheet_send_method_con_box {
    padding-bottom: 15px;
}
.ordersheet_payment_con > span,
.ordersheet_send_method_con_box .radio_check {
    position: relative;
    margin: 5px;
    width: calc(25% - 10px);
}
.ordersheet_payment_con > span input[type="radio"],
.ordersheet_send_method_con_box .radio_check input[type="radio"] {
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.ordersheet_payment_con > span input[type="radio"] + label,
.ordersheet_send_method_con_box .radio_check input[type="radio"] + label {
    display: inline-block;
    padding: 0 15px;
    text-align: center;
    position: relative;
    min-width: 180px;
    width: 100%;
    border: 1px solid #d6d6d6;
    height: 55px;
    line-height: 53px;
    border-radius: 5px;
    color: var(--main-btn-font-color);
    font-size: 17px;
    font-weight: 400;
    cursor: pointer;
}
.ordersheet_send_method_con_box .radio_check input[type="radio"] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ordersheet_send_method_con_box .radio_check input[type="radio"] + label .img img.on {
    display: none;
}
.ordersheet_payment_con > span input[type="radio"] + label .icon_pay,
.ordersheet_send_method_con_box .radio_check input[type="radio"] + label .send_method_price {
    display: block;
    padding: 0 8px;
    height: 22px;
    line-height: 18px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    top: -11px;
    left: 6px;
}

.ordersheet_send_method_con_box .radio_check input[type="radio"] + label .send_method_price {
    display: none;
    font-size: 11px;
    color: var(--main-box-font-color2);
    line-height: 19px;
    background-color: #fff;
    border: 1px solid #d0d0d0;
}
.ordersheet_send_method_con_box .radio_check input[type="radio"]:checked + label .send_method_price {
    display: block;
}
.ordersheet_payment_con > span input[type="radio"] + label .icon_pay img {
    margin-right: 5px;
    display: inline-block;
}
.ordersheet_payment_con > span input[type="radio"] + label .icon_pay.naver {
    background: #04cf5c;
    color: #fff;
}
.ordersheet_payment_con > span input[type="radio"] + label .icon_pay.kakao {
    background: #fae100;
    color: #3a2020;
    left: 60px;
}
.ordersheet_payment_con > span input[type="radio"]:checked + label,
.ordersheet_send_method_con_box .radio_check input[type="radio"]:checked + label {
    background: var(--main-btn-point-color);
    border-color: var(--main-btn-line-point-color);
    color: #fff;
    font-weight: 500;
}

.ordersheet_send_method_con_box .radio_check input[type="radio"]:checked + label .text {
    color: #fff;
}
.ordersheet_send_method_con_box .radio_check input[type="radio"]:checked + label .img img.off {
    display: none;
}
.ordersheet_send_method_con_box .radio_check input[type="radio"]:checked + label .img img.on {
    display: block;
}
.ordersheet_send_method .pickup_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    min-height: 55px;
    background-color: #fafafa;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 400;
    color: var(--main-box-font-color1);
}
.ordersheet_payment #settle_bank {
    padding: 25px 0;
    border-top: 1px solid #eeeeee;
    border-width: 1px 0;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ordersheet_payment #settle_bank .input-box {
    width: 47.87%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
/* 승민 라운드4 요청6 — 은행명+계좌번호+예금주명이 길어 좌측(입금은행) 커스텀셀렉트 값이
   ellipsis로 너무 일찍 잘렸다. 입금자명(짧은 텍스트, 우측)은 좁혀도 지장이 없으니 좌측에
   폭을 더 몰아준다 — 두 칸 사이 여백(justify-content:space-between이 만드는 gap)은 원래
   비율(47.87%×2 ≈ 95.74%가 아닌 나머지)과 동일하게 유지. */
.ordersheet_payment #settle_bank .input-box:first-child {
    width: 64%;
}
.ordersheet_payment #settle_bank .input-box:last-child {
    width: 31.74%;
}
.ordersheet_payment #settle_bank .input-box label {
    width: 86px;
    margin: 0;
    color: var(--main-box-font-color);
    font-size: 16px;
    font-weight: 400;
}
.ordersheet_payment #settle_bank .input-box .settle_input {
    padding: 0 15px;
    height: 46px;
    line-height: 44px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    font-size: 16px;
    color: #0c0c0c;
    background-color: #fff;
    width: calc(100% - 86px);
}
.ordersheet_payment #settle_bank .input-box .settle_input:focus {
    border-color: var(--main-box-line-point-color);
}
.ordersheet_payment #settle_bank .input-box select {
    appearance: none;
}
.ordersheet_payment #settle_bank .input-box span.arrow {
    width: 6px;
    height: 5px;
    display: block;
    position: absolute;
    top: 23px;
    right: 15px;
}
.ordersheet_payment #settle_bank .input-box span.arrow::before,
.ordersheet_payment #settle_bank .input-box span.arrow::after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    background: #242424;
}
.ordersheet_payment #settle_bank .input-box span.arrow::before {
    right: 4px;
    transform: rotate(45deg);
}
.ordersheet_payment #settle_bank .input-box span.arrow::after {
    transform: rotate(-45deg);
}
@media (max-width: 991px) {
    .ordersheet_payment #settle_bank .input-box span.arrow {
        top: 47px;
    }
}
.ordersheet_payment_agree .radio_check input + label {
    color: var(--main-box-font-color);
    font-size: 18px;
    font-weight: 600;
}
.ordersheet_payment_agree_desc {
    margin-top: 25px;
}
.ordersheet_payment_agree_desc a {
    color: var(--main-box-font-color);
    font-size: 16px;
    font-weight: 400;
    position: relative;
}
.ordersheet_payment_agree_desc a span {
    color: var(--main-box-font-color4);
}
.ordersheet_payment_agree_desc a img {
    margin-left: 18px;
    height: 13px;
    position: relative;
    top: -2px;
    display: inline-block;
}
@media (max-width: 991px) {
    .ordersheet_payment_agree_desc a img {
        top: 5px;
        position: absolute;
        height: 11px;
    }
}
.ordersheet_payment_agree_li {
    margin-top: 15px;
}
.ordersheet_payment_agree_li li {
    font-size: 13px;
    color: var(--main-box-font-color4);
    line-height: 23px;
}
@media (max-width: 480px) {
    .ordersheet_payment_agree {
        position: relative;
        padding: 40px 0 0;
    }
    .ordersheet_payment_agree::before {
        content: "";
        display: block;
        width: 110%;
        height: 10px;
        background: #f9f9fa;
        position: absolute;
        left: -15px;
        top: 0;
    }
}
@media (max-width: 991px) {
    .ordersheet_payment_con,
    .ordersheet_send_method_con_box {
        margin: 0;
    }
    .ordersheet_send_method_con_box {
        padding-bottom: 10px;
    }
    .ordersheet_payment_con > span,
    .ordersheet_send_method_con_box .radio_check {
        width: calc(50% - 5px);
    }
    .ordersheet_payment_con > span:nth-child(2n-1),
    .ordersheet_send_method_con_box .radio_check:nth-child(2n-1) {
        margin-left: 0;
    }
    .ordersheet_payment_con > span:nth-child(2n),
    .ordersheet_send_method_con_box .radio_check:nth-child(2n) {
        margin-right: 0;
    }
    .ordersheet_payment_con > span input[type="radio"] + label,
    .ordersheet_send_method_con_box .radio_check input[type="radio"] + label {
        width: 100%;
        min-width: initial;
        border-radius: 2.5px;
    }
    .ordersheet_send_method .pickup_wrap {
        flex-direction: column;
        gap: 5px;
        border-radius: 2.5px;
    }
    .ordersheet_payment #settle_bank {
        flex-direction: column;
        border-bottom: none;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 0;
    }
    .ordersheet_payment #settle_bank .input-box,
    .ordersheet_payment #settle_bank .input-box:first-child,
    .ordersheet_payment #settle_bank .input-box:last-child {
        /* 데스크톱 전용 64%/31.74% 폭 오버라이드(위 :first-child/:last-child 규칙, 명시도가 더
           높음)가 이 좁은 폭에서도 이겨버리지 않도록 여기서 다시 100%로 되돌린다. */
        width: 100%;
        flex-direction: column;
        margin-bottom: 20px;
    }
    .ordersheet_payment #settle_bank .input-box:last-child {
        margin-bottom: 0;
    }
    .ordersheet_payment #settle_bank .input-box label {
        width: 100%;
    }
    .ordersheet_payment #settle_bank .input-box .settle_input {
        width: 100%;
        margin-top: 10px;
    }
}
@media (max-width: 480px) {
    .ordersheet_payment_con > span input[type="radio"] + label,
    .ordersheet_send_method_con_box .radio_check input[type="radio"] + label {
        height: 45px;
        line-height: 43px;
        font-size: 15px;
    }
    .ordersheet_payment_con > span input[type="radio"] + label .icon_pay,
    .ordersheet_send_method_con_box .radio_check input[type="radio"] + label .send_method_price {
        padding: 0 6px;
        height: 18px;
        line-height: 15px;
        font-size: 10px;
    }
    .ordersheet_payment_con > span input[type="radio"] + label .icon_pay img {
        height: 8px;
        margin-right: 3px;
    }
    .ordersheet_payment_con > span input[type="radio"] + label .icon_pay.kakao {
        left: 50px;
    }
    .ordersheet_send_method .pickup_wrap {
        font-size: 13px;
    }
    .ordersheet_payment #settle_bank .input-box label {
        width: 100%;
        font-size: 16px;
    }
    .ordersheet_payment #settle_bank .input-box .settle_input {
        height: 40px;
        line-height: 38px;
        font-size: 14px;
        border-radius: 2.5px;
    }
    .ordersheet_payment_agree_desc {
        margin-top: 20px;
    }
    .ordersheet_payment_agree_desc a {
        display: block;
        font-size: 13px;
        width: 100%;
        position: relative;
    }
    .ordersheet_payment_agree_desc a img {
        text-align: right;
        position: absolute;
        top: 0;
        right: 0;
    }
    .ordersheet_payment_agree_li li {
        font-size: 11px;
        line-height: 15px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .ordersheet_payment_agree_li li span {
        width: 8px;
        text-align: left;
    }
}

.ordersheet_proof_of_payment .proof_of_payment_tab {
    margin: 0 -7.5px;
}
.ordersheet_proof_of_payment .proof_of_payment_tab > span {
    position: relative;
    margin: 25px 5px;
    width: calc(33% - 10px);
    display: inline-block;
}
.ordersheet_proof_of_payment .proof_of_payment_tab > span input[type="radio"] {
    display: none;
}
.ordersheet_proof_of_payment .proof_of_payment_tab > span input[type="radio"] + label {
    display: inline-block;
    padding: 0 15px;
    text-align: center;
    position: relative;
    min-width: 180px;
    width: 100%;
    border: 1px solid #d6d6d6;
    height: 55px;
    line-height: 53px;
    border-radius: 5px;
    color: var(--main-box-font-color);
    font-size: 17px;
    font-weight: 400;
    cursor: pointer;
}
.ordersheet_proof_of_payment .proof_of_payment_tab > span input[type="radio"]:checked + label {
    background: var(--main-btn-point-color);
    border-color: var(--main-btn-line-point-color);
    color: #fff;
    font-weight: 500;
}
.ordersheet_proof_of_payment .proof_of_payment_cont {
    padding-top: 5px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax {
    padding-bottom: 15px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row {
    position: relative;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 30px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row + .proof_tax_row {
    margin-top: 20px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row .pr_tax {
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    position: absolute;
    top: 20px;
    right: 30px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row #proof_tax_add {
    display: block;
    width: 26px;
    height: 26px;
    background-color: var(--main-btn-point-color);
    border-radius: 50%;
    position: relative;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row #proof_tax_add::before,
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row #proof_tax_add::after {
    content: "";
    display: block;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row #proof_tax_add::before {
    width: 8px;
    height: 2px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row #proof_tax_add::after {
    width: 2px;
    height: 8px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row .proof_tax_remove {
    display: block;
    width: 26px;
    height: 26px;
    background-color: #e9e9e9;
    border-radius: 50%;
    position: relative;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row .proof_tax_remove::before {
    content: "";
    display: block;
    background-color: #999999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 2px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row:nth-child(1) .proof_tax_remove {
    display: none;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_cash {
    padding-bottom: 15px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .input-box {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .input-box.w620 {
    align-items: flex-start;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .input-box label {
    width: 120px;
    color: #0c0c0c;
    margin-bottom: 0;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_cash .input-box {
    width: 550px;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_cash .input-box label {
    width: 160px;
    white-space: nowrap;
    color: var(--main-box-font-color);
}
.ordersheet_proof_of_payment .proof_of_payment_cont .proof_cash .input-box .settle_input {
    width: calc(100% - 160px);
}
.ordersheet_proof_of_payment .proof_of_payment_cont .input-box input {
    width: calc(100% - 120px);
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    font-size: 16px;
    color: #0c0c0c;
    background-color: #fff;
    padding: 0 15px;
    height: 45px;
    line-height: 45px;
    background-color: #fff;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .input-box .ordersheet_write_addr input {
    width: 100%;
}
.ordersheet_proof_of_payment .proof_of_payment_cont .input-box input:focus {
    border-color: var(--main-box-line-point-color);
}
.ordersheet_payment .proof_cash .input-box .settle_input {
    padding: 0 15px;
    height: 46px;
    line-height: 44px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    font-size: 16px;
    color: #0c0c0c;
    background-color: #fff;
    width: calc(100% - 120px);
}
.ordersheet_payment .proof_cash .input-box select {
    appearance: none;
}
.ordersheet_payment .proof_cash .input-box span.arrow {
    width: 6px;
    height: 5px;
    display: block;
    position: absolute;
    top: 23px;
    right: 15px;
}
.ordersheet_payment .proof_cash .input-box span.arrow::before,
.ordersheet_payment .proof_cash .input-box span.arrow::after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    background: #242424;
}
.ordersheet_payment .proof_cash .input-box span.arrow::before {
    right: 4px;
    transform: rotate(45deg);
}
.ordersheet_payment .proof_cash .input-box span.arrow::after {
    transform: rotate(-45deg);
}
@media (max-width: 991px) {
    .ordersheet_proof_of_payment {
        position: relative;
        padding-top: 40px;
        /* margin-top: 30px; */
    }
    .ordersheet_proof_of_payment::before {
        content: "";
        display: block;
        width: 110%;
        height: 10px;
        background: #f9f9fa;
        position: absolute;
        left: -15px;
        top: 0;
    }
    .ordersheet_proof_of_payment .proof_of_payment_tab {
        margin: 0 -5px 0;
        padding-top: 25px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_tab > span {
        width: calc(50% - 12px);
        margin: 5px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_tab > span input[type="radio"] + label {
        border-radius: 2.5px;
        min-width: initial;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont {
        padding-top: 15px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row {
        padding: 40px 15px 15px;
        border-radius: 2.5px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row .pr_tax {
        top: 15px;
        right: 15px;
        gap: 6px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row #proof_tax_add {
        width: 25px;
        height: 25px;
        background-color: #7145e4;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row #proof_tax_add::before {
        width: 9px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row #proof_tax_add::after {
        height: 9px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .proof_tax .proof_tax_row .proof_tax_remove {
        width: 25px;
        height: 25px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont > div {
        border-top: 1px solid #e7e7e7;
        padding-top: 20px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .input-box {
        width: 100%;
        flex-direction: column;
        margin-bottom: 20px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .input-box.mob_mar_top {
        margin-top: -7px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .input-box.mob_mar_bot {
        margin: 0;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .proof_cash .input-box {
        width: 100%;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .input-box label {
        width: 100%;
        margin-bottom: 10px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .proof_cash .input-box label {
        width: 100%;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .input-box input {
        width: 100%;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .proof_cash .input-box .settle_input {
        width: 100%;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .input-box input {
        border-radius: 2.5px;
    }
    .ordersheet_payment .proof_cash .input-box .settle_input {
        width: 100%;
        border-radius: 2.5px;
    }
    .ordersheet_payment .proof_cash .input-box span.arrow {
        display: none;
    }
}
@media (max-width: 480px) {
    .ordersheet_proof_of_payment .proof_of_payment_tab > span input[type="radio"] + label {
        font-size: 15px;
        line-height: 41px;
        height: 43px;
    }
    .ordersheet_payment .proof_cash .input-box .settle_input {
        font-size: 14px;
        height: 40px;
        line-height: 38px;
    }
    .ordersheet_proof_of_payment .proof_of_payment_cont .input-box input {
        font-size: 14px;
        height: 40px;
        line-height: 38px;
    }
}

.regbtn-wrap #display_pay_button {
    text-align: center;
}
.regbtn-wrap #display_pay_button input {
    height: 60px;
    line-height: 58px;
    background: #235cf5;
    border-radius: 5px !important;
    min-width: 240px;
    width: auto;
    float: none;
    font-size: 17px;
    font-weight: 500;
    margin-right: 0;
    margin-left: 38%;
}
.regbtn-wrap #display_pay_button a {
    display: none !important;
}
@media (max-width: 991px) {
    /* 2024-09-03 (주)파이브센스_FIVESENSES.Corp. */
    .regbtn-wrap #show_req_btn {
        width: 100%;
    }
    /* 2024-09-04 (주)파이브센스_FIVESENSES.Corp. */
    .regbtn-wrap #show_pay_btn {
        width: 100%;
    }
    /* 2024-08-01 (주)파이브센스_FIVESENSES.Corp. */
    .regbtn-wrap #display_pay_button {
        padding-top: 0;
        padding-bottom: 0;
    }
    .regbtn-wrap #display_pay_button input {
        margin-left: 0;
        height: 45px !important;
        line-height: 45px !important;
        font-size: 15px;
        font-weight: 600;
        border-radius: 2.5px !important;
        padding: 0 10px !important;
    }
    .regbtn-wrap.fixed {
        width: 100%;
        background: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
        margin-top: 0;
        padding: 10px 15px;
        border: 1px solid #ebebeb;
    }
    .regbtn-wrap.fixed #display_pay_button input {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .regbtn-wrap #display_pay_button input {
        height: 46px;
        line-height: 44px;
    }
}

.regbtn-wrap {
    margin-top: 55px;
    text-align: center;
}

/* ============================================================================
   [RepurchaseRecentItems] 2026-08-03 (주)파이브센스_FIVESENSES.Corp.
   재구매(다시담기) 공용 모달(SCR-02) + 주문내역 액션 바(SCR-03).
   이 섹션은 신규 컴포넌트라 fivepro-design-system 토큰(var(--fp-*, fallback))을 사용한다.
   이 스킨(전역 :root --fp-* 미정의)은 fallback이 실제 렌더 색상이며, 브랜드 색만 사이트
   테마 변수(--main-btn-point-color)를 1차 폴백으로 중첩해 기존 페이지 톤과 어울리게 했다.
   ============================================================================ */

/* ── 주문 단위 액션 바(od_wrap 하단, DEC-14)는 Round14(정정판)에서 삭제됨 — 승민 지시:
   "이미 품목단위 재구매 버튼이 있어서 중복"이라 .od_repurchase_bar/.od_btn_repurchase_all
   마크업을 orderinquiry.skin.php에서 통째로 제거했다. 이 CSS도 짝을 맞춰 제거(더 이상 매치되는
   요소가 없어 죽은 규칙이었음). ── */

/* ── 재구매 모달(.oi_modal.repurchase_oi_modal) — 기존 .oi_modal 구조 재사용 ── */
/* Round21 [PR Gate 보류 중 승민 실브라우저 피드백] — "옵션 변경/다른 옵션 추가" 팝오버가 recentitems
   수준 레이아웃(옵션 버튼+가격 서브리스트)을 여유 있게 수용하도록 모달을 확대. fivepro-design-system
   모달 폭 토큰(Default 400px/Alert·Confirm 360px/Wide·Detail 640px) 중 상한인 640px 채택 —
   .oi_modal.search_oi_modal(recentitems 필터 모달)과 동일 폭으로 통일된다. 목록 내부 스크롤
   (.rp_list)도 44vh→56vh로 늘려 넓어진 행 높이(옵션 줄 추가)에 맞춰 한 화면에 더 많이 보이게 한다.
   모바일(max-width:480px 미디어쿼리)은 기존 반응형(풀폭 바텀시트) 그대로 — 변경 없음. */
.oi_modal.repurchase_oi_modal .rp_panel {
    max-width: 640px;
    display: flex;
    flex-direction: column;
}
.rp_loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 0;
    color: var(--fp-muted, #7c828a);
    font-size: 14px;
}
.rp_spinner { animation: rpSpin 0.8s linear infinite; color: var(--main-btn-point-color); }
@keyframes rpSpin { to { transform: rotate(360deg); } }

.rp_notice {
    margin-top: 16px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--fp-warning, #d97706);
    background: var(--fp-warning-bg, #fffbeb);
    border-radius: 8px;
    word-break: keep-all;
}
.rp_selectall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--fp-hairline, #eeeeee);
}
.rp_check_label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--fp-ink, #222222);
    cursor: pointer;
}
/* Round10 — recentitems(.fp_checkbox, round6)와 동일한 체크박스 스킨으로 통일. 이미 실연동된
   JS(.prop('checked')/.is(':checked')/change 이벤트)를 건드리지 않기 위해 진짜 <input>은
   시각적으로만 숨기고(위치는 .rp_checkbox_box와 겹침), 인접 형제 선택자(:checked +)로
   .rp_checkbox_box 가 체크 상태를 그대로 반영하는 표준 커스텀 체크박스 기법을 썼다. */
.rp_check_label input[type="checkbox"] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.rp_checkbox_box {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    border: 2px solid var(--fp-hairline, #dedede);
    background: var(--fp-canvas, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 150ms ease, border-color 150ms ease;
}
.rp_checkbox_box svg { opacity: 0; transition: opacity 120ms ease; }
.rp_check_label input[type="checkbox"]:checked + .rp_checkbox_box {
    background: var(--main-btn-point-color);
    border-color: var(--main-btn-point-color);
}
.rp_check_label input[type="checkbox"]:checked + .rp_checkbox_box svg { opacity: 1; }
.rp_check_label:hover input[type="checkbox"]:not(:disabled) + .rp_checkbox_box { border-color: var(--main-btn-point-color); }
.rp_check_label input[type="checkbox"]:focus-visible + .rp_checkbox_box { box-shadow: 0 0 0 3px rgba(26, 109, 255, 0.12); }
.rp_check_label input[type="checkbox"]:disabled + .rp_checkbox_box { opacity: 0.45; }
.rp_check_label input[type="checkbox"]:disabled { cursor: not-allowed; }
.rp_selected_count { font-size: 13px; color: var(--fp-muted, #999999); font-variant-numeric: tabular-nums; }

/* Round10 — 승민 지시: 재구매 모달을 recentitems 수준(round5~9에서 다진 컴팩트 레이아웃·
   호버 통일·배지 사유표시)으로 재정비. 썸네일 72→56px·행 패딩 축소로 밀도를 높이고, 아래
   개별 항목에서 recentitems와 벌어져 있던 지점들을 맞췄다. */
.rp_list { list-style: none; margin: 0; padding: 0; max-height: 56vh; overflow-y: auto; }
.rp_item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fp-hairline-soft, #f5f5f5);
}
.rp_item:last-child { border-bottom: none; }
/* recentitems(round5/6)와 동일 원칙 — 행 전체를 뭉뚱그려 흐리면 배지(사유)까지 같이 흐려져서
   "왜 못 사는지"가 안 보인다. 썸네일·이름·가격만 개별로 흐리고 배지는 원래 채도 그대로 둔다.
   Round21 — 옵션 있는 품목의 가격 표시가 .rp_item_price 대신 .rp_optcart_row(.ri_optcart_row
   재사용)로 바뀐 만큼 동일 규칙을 그 줄에도 적용. */
.rp_item.is-unbuyable .rp_item_thumb,
.rp_item.is-unbuyable .rp_item_name_text,
.rp_item.is-unbuyable .rp_item_price,
.rp_item.is-unbuyable .rp_optcart_row { opacity: 0.55; }
.rp_item_check { flex: 0 0 auto; padding-top: 6px; }
.rp_item_thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border: 1px solid var(--fp-hairline, #f3f3f3);
    border-radius: 8px;
    overflow: hidden;
}
.rp_item_thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rp_item_info { flex: 1; min-width: 0; }
.rp_item_name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    color: var(--fp-ink, #222222);
    word-break: keep-all;
}
.rp_badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    border-radius: 6px; /* 배지 radius 6px 고정 — pill 금지 */
    white-space: nowrap;
}
/* Round10 — recentitems(.ri_badge--soldout/--sale_ended, round5/6)와 동일한 사유별 색상 분리로
   통일. 이전엔 품절/판매종료가 같은 회색이라 "뭐가 문제인지" 구분이 안 됐다 —
   품절(일시적)=warning, 판매종료(영구)=error 톤으로 recentitems와 동일 규칙 적용. */
.rp_badge--soldout { color: var(--fp-warning, #d97706); background: var(--fp-warning-bg, #fffbeb); }
.rp_badge--sale_ended { color: var(--fp-error, #cf202f); background: var(--fp-error-bg, #fff2f2); }
.rp_badge--option_changed,
.rp_badge--option_soldout { color: var(--fp-warning, #d97706); background: var(--fp-warning-bg, #fffbeb); }
.rp_item_option { margin-top: 3px; font-size: 12px; color: var(--fp-muted, #999999); }
.rp_item_price { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--fp-ink, #1b1b1b); font-variant-numeric: tabular-nums; }
.rp_reselect {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--main-btn-point-color);
    text-decoration: underline;
    cursor: pointer;
    transition: color 150ms ease;
}
.rp_item_stock_warn { margin-top: 6px; font-size: 12px; color: var(--fp-error, #cf202f); }

/* Round21 [PR Gate 보류 중 승민 실브라우저 피드백] — "옵션 변경/다른 옵션 추가" 두 트리거를
   recentitems.skin.php와 동일한 단일 토글(.ri_name_option_trigger_wrap/.ri_option_toggle,
   style.css 6700행대)로 통합 — 이 파일 전용 트리거 스타일(.rp_option_edit*)은 폐기, 신규 CSS
   불필요(같은 style.css를 공유하는 클래스 그대로 재사용). */
.rp_item_info .ri_name_option_trigger_wrap { margin-top: 6px; }

.rp_item_qty { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.rp_qty_btn {
    width: 28px;
    height: 32px;
    border: 1px solid var(--fp-hairline, #dedede);
    background: var(--fp-canvas, #fff);
    color: var(--fp-body, #444444);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.rp_qty_btn:first-child { border-radius: 6px 0 0 6px; }
.rp_qty_btn:last-child { border-radius: 0 6px 6px 0; }
/* Round10 — recentitems(.ri_qty_btn, round6)와 동일한 hover 규칙으로 통일(이전엔 이 모달만 누락) */
.rp_qty_btn:hover:not(:disabled) { background: var(--fp-surface-soft, #f7f7f7); border-color: var(--main-btn-point-color); color: var(--main-btn-point-color); }
.rp_qty_btn:disabled { cursor: not-allowed; opacity: 0.5; }
.rp_qty_input {
    width: 40px;
    height: 32px;
    border: 1px solid var(--fp-hairline, #dedede);
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 13px;
    color: var(--fp-ink, #222222);
    font-variant-numeric: tabular-nums;
}
.rp_qty_input:disabled { background: var(--fp-surface-soft, #f7f7f7); }

.rp_none_available {
    margin-top: 30px;
    padding: 30px 0;
    text-align: center;
    font-size: 14px;
    color: var(--fp-muted, #999999);
}

.oi_modal.repurchase_oi_modal .rp_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--fp-hairline, #eeeeee);
}
.rp_summary { font-size: 13px; color: var(--fp-body, #444444); }
.rp_summary_sep { margin: 0 6px; color: var(--fp-hairline, #dddddd); }
#rpSummaryTotal { font-weight: 700; color: var(--fp-ink, #1b1b1b); }
.rp_foot_btns { display: flex; gap: 8px; flex: 0 0 auto; }
.rp_btn {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 150ms ease, background 150ms ease, filter 150ms ease;
}
.rp_btn_cart { color: var(--fp-ink, #444444); background: var(--fp-surface-soft, #f7f7f7); }
.rp_btn_order { color: var(--fp-on-primary, #fff); background: var(--main-btn-point-color); }
/* Round6 — 승민 지적: 담기/주문 버튼 hover가 화면마다 제각각. secondary=배경 톤다운 / primary=filter로 어둡게, 전 화면(리스트 행·재구매 모달·하단바) 공통 규칙 */
.rp_btn_cart:hover:not(:disabled):not(.is-disabled) { background: var(--fp-surface-strong, #eef0f3); }
.rp_btn_order:hover:not(:disabled):not(.is-disabled) { filter: brightness(0.92); }
.rp_btn.is-disabled,
.rp_btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 480px) {
    .oi_modal.repurchase_oi_modal .oi_modal_dim { }
    .oi_modal.repurchase_oi_modal .rp_panel {
        left: 0;
        top: auto;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: 82vh;
        border-radius: 20px 20px 0 0;
    }
    .oi_modal.repurchase_oi_modal .rp_foot { flex-direction: column; align-items: stretch; }
    .rp_foot_btns { width: 100%; }
    .rp_btn { flex: 1; }
}

/* ── 공용 토스트 (fivepro-design-system feedback 섹션 스펙: bottom-center, 320px, z-index 400) ── */
.fp_toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    max-width: 320px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--fp-surface-dark, #1c1c1e);
    color: var(--fp-on-dark, #fff);
    font-size: 13px;
    line-height: 1.5;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    z-index: 400;
    transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 220ms;
    text-align: left;
    word-break: keep-all;
}
.fp_toast.is-show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* 좌측 아이콘 — fivepro-design-system feedback 섹션 스펙(시맨틱 컬러 원형 18px) */
.fp_toast_icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: var(--fp-success, #05b169);
}
.fp_toast--error .fp_toast_icon { background: var(--fp-error, #cf202f); }
.fp_toast_text { flex: 1; }

/* ============================================================================
   [RepurchaseRecentItems] Round4 — 2026-08-04 (주)파이브센스_FIVESENSES.Corp.
   실시간 미니 장바구니 패널 — 담기 성공 시 화면 우측 하단에 슬라이드인.
   재구매 모달(repurchase.modal.skin.php)의 담기 성공 콜백에서 우선 트리거(이번 라운드).
   다음 라운드: recentitems.skin.php 담기 콜백에서도 window.fpShowMiniCart() 재사용 예정.
   토큰: 색상 var(--fp-*) · 반경 --fp-r(버튼)/16px(패널) · 그림자 modal 스펙 준용 ·
   진입 모션 220ms cubic-bezier(0.16,1,0.3,1)(fivepro-design-system 진입 모션 표준) ·
   버튼·hover 인터랙션 150ms ease.
   ============================================================================ */
/* Round13 [승민 실브라우저 피드백 #7] — 우측 하단 고정 → 중앙 하단으로 변경(CSS만, 로직 무변경).
   left:50%+translateX(-50%)로 수평 중앙 정렬, 진입 모션(translateY)은 기존 그대로 유지. */
.fp_minicart {
    position: fixed;
    left: 50%;
    bottom: 24px;
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 20px;
    background: var(--fp-canvas, #fff);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 400;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(16px);
    transition: opacity 220ms cubic-bezier(0.16,1,0.3,1), transform 220ms cubic-bezier(0.16,1,0.3,1), visibility 220ms;
}
.fp_minicart.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.fp_minicart_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fp_minicart_title { font-size: 15px; font-weight: 600; color: var(--fp-ink, #0a0b0d); }
.fp_minicart_close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--fp-muted, #999999);
    cursor: pointer;
    transition: background 150ms ease;
}
.fp_minicart_close:hover { background: var(--fp-surface-soft, #f7f7f7); }
.fp_minicart_items { display: flex; flex-direction: column; gap: 12px; max-height: 240px; overflow-y: auto; margin-bottom: 16px; }
.fp_minicart_item { display: flex; gap: 12px; }
.fp_minicart_thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--fp-surface-soft, #f7f7f7); }
.fp_minicart_thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp_minicart_info { flex: 1; min-width: 0; }
.fp_minicart_name {
    font-size: 14px;
    font-weight: 500;
    color: var(--fp-ink, #0a0b0d);
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.fp_minicart_option { margin-top: 2px; font-size: 13px; color: var(--fp-muted, #999999); }
.fp_minicart_qty { margin-top: 4px; font-size: 13px; color: var(--fp-body, #444444); font-variant-numeric: tabular-nums; }
/* Round14 [승민 실브라우저 피드백 #7] — 소계 노출 */
.fp_minicart_price { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--fp-ink, #0a0b0d); font-variant-numeric: tabular-nums; }
.fp_minicart_actions { display: flex; gap: 8px; }
.fp_minicart_btn {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--fp-r, 13px);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
/* Round14 [승민 실브라우저 피드백 #6] — secondary hover 는 opacity 조정만으로는 배경이 이미
   옅은 회색이라 변화가 거의 안 보였다. 다른 secondary 컨트롤(.fp_orderbar_btn--secondary 등)과
   동일하게 --fp-surface-strong 배경으로 명확히 전환. */
.fp_minicart_btn--secondary { color: var(--fp-ink, #444444); background: var(--fp-surface-soft, #f7f7f7); }
.fp_minicart_btn--secondary:hover { background: var(--fp-surface-strong, #eef0f3); }
/* Round14 [승민 실브라우저 피드백 #6] — <a> 태그(#fpMiniCartViewCart)라 hover 시 다른 전역
   링크색으로 재정의되던 문제. 배경만 어둡게 바꾸고 글자색은 hover 에도 흰색으로 명시 고정. */
.fp_minicart_btn--primary { color: #fff; background: var(--main-box-point-color); }
.fp_minicart_btn--primary:hover { color: #fff; }

@media (max-width: 480px) {
    /* left:50%+translateX(-50%)(중앙정렬)는 이 폭에서 불필요 — left/right 고정폭 방식으로 전환하며
       transform 도 translateY만 남기고 translateX(-50%)는 제거(안 지우면 화면 밖으로 밀려남). */
    .fp_minicart { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; transform: translateY(16px); }
    .fp_minicart.is-open { transform: translateY(0); }
}

/* ============================================================================
   [RepurchaseRecentItems] Round6 — 2026-08-04 (주)파이브센스_FIVESENSES.Corp.
   전체화면 로딩 오버레이 — "바로 주문하기"는 페이지 전환(order form 이동)이 있는 액션이라
   버튼 텍스트 스왑만으로는 피드백이 부족하다(승민 지적). repurchase.modal.skin.php 에서
   window.fpShowPageOverlay(text)/fpHidePageOverlay() 로 공용 노출 — orderinquiry(재구매 모달)·
   recentitems(행 단위 바로주문·하단바 일괄주문) 전부 재사용. 모든 오버레이 중 최상위 z-index.
   ============================================================================ */
.fp_page_overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease, visibility 150ms;
}
.fp_page_overlay.is-open { opacity: 1; visibility: visible; }
.fp_page_overlay_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 36px;
    background: var(--fp-canvas, #fff);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.fp_page_overlay_spinner { animation: rpSpin 0.8s linear infinite; color: var(--main-btn-point-color); }
.fp_page_overlay_text { font-size: 14px; font-weight: 600; color: var(--fp-ink, #222222); }

/* ============================================================================
   [RepurchaseRecentItems] Round6 — 2026-08-04 (주)파이브센스_FIVESENSES.Corp.
   공용 체크박스 — fivepro-design-system form-controls 섹션의 캐노니컬 스펙(.fp-checkbox-box,
   21×21px·반경6px·2px 보더·체크시 primary 배경) 그대로 이식. 다중선택(하단바) 등 신규 UI에서
   재사용할 수 있게 recentitems 전용이 아닌 공용 fp_ 접두어로 배치.
   ============================================================================ */
.fp_checkbox {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    border: 2px solid var(--fp-hairline, #dedede);
    background: var(--fp-canvas, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
    outline: none;
}
.fp_checkbox svg { opacity: 0; transition: opacity 120ms ease; }
.fp_checkbox.is-checked { background: var(--main-btn-point-color, #1a6dff); border-color: var(--main-btn-point-color, #1a6dff); }
.fp_checkbox.is-checked svg { opacity: 1; }
.fp_checkbox:hover { border-color: var(--main-btn-point-color, #1a6dff); }
.fp_checkbox:focus-visible { box-shadow: 0 0 0 3px rgba(26, 109, 255, 0.12); }
.fp_checkbox[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; border-color: var(--fp-hairline, #dedede) !important; }

/* ============================================================================
   [RepurchaseRecentItems] Round6 — 2026-08-04 (주)파이브센스_FIVESENSES.Corp.
   지속형 하단 주문바 — 승민 지시(참고사이트 "블레스빈" 원클릭주문 하단바 패턴). 체크박스로
   선택한 항목들을 세션 동안 누적 표시(개별 담기 성공마다 사라지는 미니장바구니와 별개 컴포넌트 —
   미니장바구니는 행 단위 빠른 담기용으로 그대로 유지, 이 바는 다중선택 일괄처리 전용).
   화면 중앙 하단 고정, 선택 0건이면 숨김.
   ============================================================================ */
.fp_orderbar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) translateY(16px);
    /* Round13 [승민 지시 항목6] — 목록을 한 줄로 압축해도 이름·옵션·단가·수량·소계·삭제가
       한 줄 안에 다 들어가려면 폭이 더 필요해 680px→860px로 확장(승민 명시 허용). */
    width: min(860px, calc(100vw - 32px));
    z-index: 400; /* Toast 계층과 동일 — 비차단 상시노출 UI */
    display: flex;
    flex-direction: column;
    padding: 14px 20px;
    background: var(--fp-canvas, #fff);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms cubic-bezier(0.16,1,0.3,1), transform 220ms cubic-bezier(0.16,1,0.3,1), visibility 220ms;
}
.fp_orderbar.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Round13 [승민 실브라우저 피드백 #5a] — justify-content:space-between 에 자식이 걸리면 가운데
   자식(actions)이 화면 중앙 부근에 뜬다. summary 를 flex:1 로 남는 공간을 전부 흡수하게 해 actions가
   자연스럽게 우측 끝에 붙도록 바꾼다. (승민 실브라우저 피드백 [항목2-2·2-3]으로 close 버튼은
   이 행에서 .fp_orderbar_body 로 이동 — 자식은 summary·actions 2개로 줄었다.) */
.fp_orderbar_summary_row { display: flex; align-items: center; gap: 16px; }
/* Round9 — 요약(개수·합계)을 <button>으로 바꿔 클릭 시 상세 목록(이미지·상품명·수량수정·삭제)이
   펼쳐지게 확장(승민 지적: "N개 선택됨/합계만 보여서 너무 간소하다"). 데스크톱 기본값은 Round13에서
   펼침으로 변경(아래 .fp_orderbar_body 참조), 모바일 전용 기본 접힘은 승민 실브라우저 피드백
   [항목2-1](JS recalcOrderBar 참조)로 추가됐다. */
.fp_orderbar_summary {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.fp_orderbar_count { font-size: 13px; color: var(--fp-muted, #999999); white-space: nowrap; }
.fp_orderbar_total { font-size: 18px; font-weight: 700; color: var(--fp-ink, #1b1b1b); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp_orderbar_expand_chevron { color: var(--fp-muted, #7c828a); flex-shrink: 0; align-self: center; transition: transform 150ms ease; }
.fp_orderbar_summary[aria-expanded="true"] .fp_orderbar_expand_chevron { transform: rotate(180deg); }
.fp_orderbar_actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fp_orderbar_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--fp-r, 13px);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms ease, filter 150ms ease;
}
.fp_orderbar_btn--secondary { color: var(--fp-ink, #444444); background: var(--fp-surface-soft, #f7f7f7); }
.fp_orderbar_btn--secondary:hover:not(:disabled) { background: var(--fp-surface-strong, #eef0f3); }
.fp_orderbar_btn--primary { color: var(--fp-on-primary, #fff); background: var(--main-btn-point-color, #1a6dff); }
.fp_orderbar_btn--primary:hover:not(:disabled) { filter: brightness(0.92); }
.fp_orderbar_btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Round14 [승민 실브라우저 피드백 #5, F-79 Critical 재발방지] — .fp_orderbar_list{display:flex}와
   브라우저 기본 [hidden]{display:none}은 특이도가 동률(0,1,0)이라 스타일시트에 나중에 나오는 이
   규칙이 항상 이겼다. 그 결과 hidden 속성/프로퍼티는 JS가 정확히 토글하는데도 목록이 펼침 전부터
   이미 display:flex로 항상 보이는 상태였다(Playwright 완전 새 컨텍스트로 hidden=true인데
   computed display=flex 실측 확인) — 승민이 "펼쳐도/접어도 다르게 안 보인다"고 느낀 근본원인.
   .ri_option_panel(Round6 F-40)·.ri_mp_detail_panel과 동일한 원인·동일 해법: [hidden]을
   !important로 강제해 항상 이기게 한다.
   승민 실브라우저 피드백 [항목2-2·2-3] — hidden 토글 대상이 .fp_orderbar_list에서 이 목록을
   감싸는 .fp_orderbar_body(선택 해제 버튼 + 목록)로 바뀌었다 — "선택 해제"가 펼쳤을 때만
   보이려면 목록과 같은 컨테이너를 열고 닫아야 하기 때문. F-79 재발방지 원칙(특이도 동률
   대비 !important)은 그대로 유지. */
.fp_orderbar_body[hidden] { display: none !important; }
/* Round9 — 펼침 영역: 체크된 상품의 썸네일·이름·수량(+/-)·삭제(×, 체크해제와 동일 효과)
   Round13 [승민 지시 항목6] — 기본 펼침으로 바뀌며 "3개까지는 스크롤 없이, 그 이상은 내부
   스크롤"을 명시적으로 맞춘다. 한 줄 압축 후 행 높이는 썸네일(40px)이 기준 — 3행 40px +
   행간 2×10px ≈ 140px에 여유를 더해 150px로 고정(4번째 항목부터는 스크롤로 확인). */
.fp_orderbar_body {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--fp-hairline, #eeeeee);
}
/* 승민 실브라우저 피드백 [항목2-2] — 아이콘만 있던 버튼에 보이는 텍스트 라벨을 붙여
   접근성 이름(aria-label)을 시각적 텍스트로 승격. 펼친 목록 위, 우측 정렬로 배치([항목2-3]). */
.fp_orderbar_close {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 10px;
    margin-bottom: 8px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--fp-muted, #999999);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease;
}
.fp_orderbar_close:hover { background: var(--fp-surface-soft, #f7f7f7); }
.fp_orderbar_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 150px;
    overflow-y: auto;
}
.fp_orderbar_item { display: flex; align-items: center; gap: 10px; }
.fp_orderbar_item_thumb { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--fp-surface-soft, #f7f7f7); }
.fp_orderbar_item_thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Round13 [승민 지시 항목6] — name+option+price 3줄 스택(round13 이전)을 한 줄로 압축. 이름은
   가변폭+ellipsis로 줄어들고, 옵션·단가는 축소 없이 항상 보이는 고정폭 텍스트로 우측에 나란히. */
.fp_orderbar_item_body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.fp_orderbar_item_name {
    flex: 1 1 auto;
    min-width: 30px;
    color: var(--fp-ink, #222222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}
.fp_orderbar_item_option {
    flex-shrink: 0;
    max-width: 30%;
    font-size: 12px;
    color: var(--fp-muted, #999999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp_orderbar_item_unit_price {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--fp-muted, #999999);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fp_orderbar_item_qty { display: flex; align-items: center; flex-shrink: 0; }
.fp_orderbar_item_qty_btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fp-hairline, #dedede);
    background: var(--fp-canvas, #fff);
    color: var(--fp-body, #444444);
    font-size: 13px;
    cursor: pointer;
    transition: background 150ms ease;
}
.fp_orderbar_item_qty_btn:hover { background: var(--fp-surface-soft, #f7f7f7); }
.fp_orderbar_item_qty_btn:first-child { border-radius: 6px 0 0 6px; }
.fp_orderbar_item_qty_btn:last-child { border-radius: 0 6px 6px 0; }
.fp_orderbar_item_qty_val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    border-top: 1px solid var(--fp-hairline, #dedede);
    border-bottom: 1px solid var(--fp-hairline, #dedede);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
/* Round14 [승민 실브라우저 피드백 #4] — 소계 배지. 수량 컨트롤과 삭제(×) 버튼 사이,
   눈에 띄도록 강조 색상의 칩 형태(배지 radius 6px 고정, fivepro-design-system 규정). */
.fp_orderbar_item_subtotal_badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    color:  var(--main-btn-point-color);
    background: color-mix(in srgb, var(--main-btn-point-color) 10%, transparent);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fp_orderbar_item_remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--fp-muted, #999999);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.fp_orderbar_item_remove:hover { background: var(--fp-error-bg, #fff2f2); color: var(--fp-error, #cf202f); }

@media (max-width: 640px) {
    .fp_orderbar { left: 12px; right: 12px; bottom: 12px; transform: translateY(16px); width: auto; }
    .fp_orderbar.is-open { transform: translateY(0); }
    .fp_orderbar_summary_row { flex-wrap: wrap; }
    .fp_orderbar_actions { width: 100%; }
    .fp_orderbar_btn { flex: 1; }
    /* Round13 [승민 지시 항목6, 좁은 화면 회귀 방지] — 데스크톱 폭(860px) 기준으로 한 줄에
       이름·옵션·단가·수량·소계·삭제를 전부 배치했는데, 모바일(카드 자체가 12px 안쪽으로 줄어듦,
       실사용 가능 폭 ~300px 안팎)에서는 이 전부를 한 줄에 욱여넣을 자리가 없어 텍스트가 서로
       겹쳐 보이는 실제 렌더링 붕괴를 Playwright 스크린샷으로 확인했다. 상품명+수량+소계(가장
       핵심 정보)만 남기고 옵션명·단가는 숨겨 한 줄 압축을 좁은 화면에서도 깨지지 않게 유지한다
       (소계 배지가 이미 "옵션가 반영된 최종 금액"을 보여주므로 정보 손실은 최소화).*/
    .fp_orderbar_item_option,
    .fp_orderbar_item_unit_price { display: none; }
}

/* ── 리스트 행 체크박스(다중선택) ── */
.ri_row_check { margin-right: 2px; }

/* ============================================================================
   [RepurchaseRecentItems] Round10 — 2026-08-04 (주)파이브센스_FIVESENSES.Corp.
   공용 툴팁 — fivepro-design-system 표준 블랙 툴팁(배경 --fp-ink, 흰 텍스트, 반경 8~9px,
   z-index 250, 진입 150ms ease-out) 그대로 이식. 순수 CSS(attr(data-tooltip) + :hover/
   :focus-visible)라 JS 불필요 — 어떤 버튼·아이콘에든 class="fp_tooltip" + data-tooltip="문구"
   만 추가하면 재사용 가능. "주문 전체 다시 담기" 버튼(항상 노출되던 안내문구를 호버 툴팁으로
   전환, 승민 지시)에 최초 적용.
   ============================================================================ */
.fp_tooltip { position: relative; }
/* Round14 [승민 지시 1번 — 화살표 이상함, 실제 원인 특정] — position:absolute 요소가 width:auto일
   때 브라우저는 "shrink-to-fit" 폭을 containing block(이 트리거 자신, 종종 20~40px 너비의 작은
   아이콘/버튼) 기준으로 계산한다. 그 결과 min-content(가장 긴 한 단어의 폭)로 쪼그라들어 문장이
   단어 하나씩 세로로 길게 쌓이는 기형적인 모양이 됐다(Playwright 스크린샷으로 실제 렌더 확인 —
   화살표 자체보다도 툴팁 박스 전체가 세로로 좁고 길쭉해 화살표와 안 어울려 보인 것). width:
   max-content(옆의 max-width로 상한)를 명시해 containing block 폭과 무관하게 문장 전체 폭을
   그대로 쓰게 하면 정상적인 가로 말풍선 모양으로 돌아오고, 화살표(::before)도 자연스럽게 맞는다. */
.fp_tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 260px;
    padding: 6px 12px;
    background: var(--fp-ink, #0a0b0d);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
    text-align: center;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;
    z-index: 251;
}
/* Round16 [승민 실브라우저 지적 — 화살표가 삼각형이 아니라 네모로 보임, 원인 특정] — 회전-정사각형
   방식(width/height 8px + rotate(45deg))은 좌표상으로는 절반이 말풍선 박스에 가려지도록 계산돼
   있었지만, 바로 아래 :hover 규칙이 ::after/::before에 동일한 `transform: translateX(-50%)
   translateY(0)`을 한 selector로 묶어 적용하면서 hover 시(=화살표가 실제로 보이는 유일한 시점)
   ::before의 rotate(45deg)를 통째로 덮어써 버렸다(Playwright로 실제 hover 상태를 스크린샷 확인—
   비회전 정사각형이 그대로 노출됨). 겹침 위치를 재계산해 땜질하는 대신 border-triangle 방식(투명
   3면 + 색칠된 1면)으로 교체해 transform에 의존하지 않는 순수 삼각형으로 바꾼다 — rotate 값이
   다른 규칙에 덮어써질 여지 자체가 없어져 더 안전하다. ::after에 z-index를 명시적으로 더 높게
   줘서(251 > 250) 삼각형 밑변이 말풍선 아래쪽에 1px 겹쳐도 이음매가 보이지 않게 한다. */
.fp_tooltip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--fp-ink, #0a0b0d);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;
    z-index: 250;
}
.fp_tooltip:hover::after, .fp_tooltip:focus-visible::after,
.fp_tooltip:hover::before, .fp_tooltip:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* task150 dev-reviewer 반려(근본원인) — 말줄임 라벨(.ri_optcart_label/.rp_optcart_label/
   .option_wrap li)은 그 자체가 말줄임용 overflow:hidden 컨테이너라, 자식 ::after 툴팁 말풍선이
   그 위로 넘쳐도 그대로 잘려 화면에 전혀 보이지 않았다(overflow:visible 임시 주입 대조실험으로
   확정). pseudo-element는 host 밖으로 옮길 수 없어, 이 세 곳만 실제 DOM 노드를 body로 포탈(task149
   옵션패널 포탈과 동일 발상 — 열릴 때 좌표를 재서 body 바로 아래 fixed로 배치)하는 방식으로
   전환한다. 시각(배경·라운딩·화살표)은 .fp_tooltip::after/::before와 동일하게 유지. */
.fp_tooltip_portal {
    position: fixed;
    width: max-content;
    max-width: 260px;
    padding: 6px 12px;
    background: var(--fp-ink, #0a0b0d);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
    text-align: center;
    border-radius: 8px;
    z-index: 9999;
    pointer-events: none;
}
.fp_tooltip_portal::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--fp-tooltip-arrow-left, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--fp-ink, #0a0b0d);
}
/* 트리거 위 공간이 부족하면 JS가 이 클래스를 얹어 박스를 아래로, 화살표를 위쪽으로 뒤집는다. */
.fp_tooltip_portal--below::after {
    top: auto;
    bottom: 100%;
    border-top: none;
    border-bottom: 6px solid var(--fp-ink, #0a0b0d);
}

/* ============================================================================
   [RepurchaseRecentItems] 2026-08-03 (주)파이브센스_FIVESENSES.Corp., Round5 2026-08-04 —
   "내가 구매한 상품" 페이지 (SCR-01 · SCR-06) — shop/recentitems.php.
   Round5 승민 직접 요청("최대한 한두줄... 표처럼 리스트화되어서 쭉 보이게") 반영해 카드형
   레이아웃(행당 96px 썸네일 + 세로 스택)을 표 형태 컴팩트 행(썸네일-정보-가격-액션 flex row,
   행당 1~2줄)으로 전면 재설계했다. 2~3단 옵션은 더 이상 행 아래로 펼쳐지지 않고 팝오버로
   뜬다(행 높이 불변). 탭·배지·커스텀 셀렉트는 fivepro-design-system 규칙(tabs 150ms ease,
   badge radius 6px 고정, 셀렉트 열림 상태까지 토큰 적용)을 따른다. var(--fp-*, fallback) 사용.
   ============================================================================ */

.ri_count { font-size: 15px; font-weight: 400; color: var(--fp-muted, #999999); margin-left: 4px; }

/* ── 탭 바 (Underline Tabs 계층) ── */
.ri_tabs {
    position: relative;
    display: flex;
    gap: 28px;
    margin-top: 24px;
    border-bottom: 1px solid var(--fp-hairline, #e5e8eb);
}
.ri_tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 2px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--fp-muted, #7c828a);
    cursor: pointer;
    transition: color 150ms ease;
}
.ri_tab.is-active { color: var(--fp-ink, #1b1b1b); font-weight: 700; }
.ri_tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--main-btn-point-color, #1a6dff);
    transition: all 150ms ease;
}
.ri_tab_badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--main-btn-point-color);
    background: var(--fp-surface-strong, #eef0f3);
    border-radius: 6px; /* 배지 radius 6px 고정 */
}
@media (max-width: 480px) {
    .ri_tabs { gap: 0; }
    .ri_tab { flex: 1 1 50%; justify-content: center; }
}
/* Round5 — 탭2 숨김으로 탭이 1개뿐일 때: 모바일 50% 폭 규칙을 풀고(빈 절반 방지),
   전환할 대상이 없으므로 밑줄 인디케이터·클릭 커서를 감춰 정적 섹션 제목처럼 보이게 한다. */
.ri_tabs--single .ri_tab { cursor: default; }
.ri_tabs--single .ri_tab.is-active::after { display: none; }
@media (max-width: 480px) {
    .ri_tabs--single .ri_tab { flex: 0 0 auto; }
}
/* Round11 — "전체" 탭 추가(승민 지시)로 탭이 3개가 되는 경우(회원전용특가 노출 시). 모바일
   .ri_tab{flex:1 1 50%}는 2탭을 전제해 3탭이면 한 줄에 2개+1개가 어긋나게 배치된다 —
   3탭 전용으로 flex:1 1 33.333%를 덮어써 균등 3분할되게 한다. */
@media (max-width: 480px) {
    .ri_tabs--triple .ri_tab { flex: 1 1 33.333%; }
}

/* ── 필터 바 ── */
.ri_filter_row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* Round17 [항목8] — recentitems.php 필터 트리거는 이제 .order_search(위쪽, 돋보기 원형) 스타일을
   그대로 재사용한다 — 여기 별도 정의 없음(중복 정의 금지). */
/* Round17 [승민 지시 항목3] — 필터칩 목록 하단 여백 추가(칩 바로 아래 탭 패널/본문과 너무 붙어보임) */
.ri_filter_chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
/* DRIFT-1 — orderinquiry.php는 필터칩이 없는 기본 상태에서도 .ri_filter_chips의 margin-bottom(16px,
   recentitems.php와 공유하는 기본값)이 그대로 적용돼 좌측 마이페이지 메뉴(ul.mypage-categorys) 시작선과
   흰 섹션(.od_wrap) 시작선이 14.6px 어긋났다(승민 실측). 칩이 실제로 노출된 상태의 여백은 그대로 두고
   빈 상태만 축소해 정렬(recentitems.php #riFilterChips는 이 규칙과 무관, id 스코프로 미영향). */
#oiFilterChips:empty { margin-bottom: 2px; }
.ri_chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    font-size: 12px;
    line-height: 1.4; /* Round6 F(칩 정렬) — 텍스트 자체의 줄높이를 명시해 × 버튼과의 세로 중심이 폰트 메트릭에 따라 어긋나지 않게 고정 */
    color: var(--main-btn-point-color);
    background: var(--fp-surface-strong, #eef0f3);
    border-radius: 999px;
}
/* Round6 — 승민 지적: × 버튼과 텍스트의 세로 중앙정렬이 어긋나 보임. 원인은 버튼 자체가 텍스트
   흐름(inline) 기준으로만 배치돼 폰트 글리프의 상하 여백(× 문자 자체 메트릭)이 라벨과 달랐던 것 —
   버튼을 자체 크기의 flex 박스로 만들어 글리프를 박스 중앙에 강제 정렬한다. */
.ri_chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: background 150ms ease;
}
.ri_chip button:hover { background: rgba(0, 0, 0, 0.08); }

/* Round15 [승민 지시 항목14] — orderinquiry.php의 주문 카드(.od_wrap: 흰 배경+둥근 모서리 17px)
   가 recentitems.php에는 없어 두 페이지 상단 헤더 영역의 톤이 달라 보인다는 지적 — 같은 흰
   카드+라운딩을 탭 콘텐츠 패널에 적용해 시각적으로 통일한다.
   task154 후속 — 흰 카드는 .ri_panel(탭패널) 전체가 아니라 목록만 감싸야 한다. online_contact.php/
   orderinquiry.php는 페이징(.text-center)이 흰 카드(.oc_wrap/.od_wrap) 밖, 콘텐츠 컬럼 안에 있는데
   .ri_pager는 .ri_panel 안에 있어 흰 카드에 갇혀 있었다(승민 재확인). 카드 스타일을 .ri_list_wrap으로
   옮기고 .ri_panel은 탭 표시 제어(hidden)만 담당하는 투명 컨테이너로 남긴다 — .ri_pager는 이제
   .ri_list_wrap의 형제로 카드 밖에 위치한다. */
/* 승민 지적 — 3탭(all/recent/memberprice)이 이 클래스를 공유하는데도 memberprice만 카드가 눈에 띄게
   작아 보였다. 원인은 CSS가 아니라 상품 개수 차이(20건 vs 3건)뿐이었다 — 셋 다 padding만 있고
   min-height가 없어 콘텐츠 길이만큼만 카드가 줄어들었다. 고정 min-height로 바닥을 맞추고, 콘텐츠가
   그보다 짧을 때(적은 상품·빈 상태 .ri_empty 공통)는 flex 세로중앙정렬로 카드 안에서 붕 뜨지 않게 한다
   — 콘텐츠가 min-height보다 길면(20건 탭) 기존처럼 자연 확장, 페이저는 카드 밖 형제라 위치 영향 없음. */
.ri_list_wrap { background: var(--fp-canvas, #fff); border-radius: 17px; padding: 8px 20px; display: flex; flex-direction: column; justify-content: flex-start; }

/* Round22 [승민 지시] — 페이저(#riPager_*)는 css/rest.css의 .pagination:not(.board-body *) 기본
   상단여백(60px)이 카드 바로 아래 붙는 이 레이아웃엔 과해 인라인 style="margin-top:0px"로 죽여뒀었는데,
   0이라 카드에 완전히 붙어 보였다. ID 선택자로 override(특정도가 항상 이겨 로드 순서 무관) 후 적당한
   간격만 부여 — 인라인 스타일은 걷어내고 여기로 이관. */

/* ── 리스트 (표처럼 정렬되는 컴팩트 행 — Round5) ── */
.ri_list { list-style: none; margin: 12px 0 0; padding: 0; }
/* Round13 [승민 지시 항목7 — 근본원인] — .ri_item 자체가 flex-wrap:wrap 이라 상품명이 길면
   담기/주문 버튼(.ri_row_actions)까지 다음 줄로 밀려났다(Round14가 옵션 다중담기 서브리스트를
   항상 새 줄로 내리려고 걸어둔 wrap의 부작용 — .ri_item_name의 ellipsis는 있었지만 flex-wrap
   알고리즘이 shrink보다 줄바꿈을 먼저 택함). .ri_item을 세로 스택(메인행 위/서브리스트 아래)으로
   바꾸고, 기존 .ri_item의 가로배치 책임을 새 .ri_row_main(항상 nowrap)으로 옮겼다 — 서브리스트는
   형제 블록이라 메인 행과 줄바꿈 단위가 완전히 분리된다. */
.ri_item {
    display: flex;
    flex-direction: column;
    padding: 10px 4px;
    border-bottom: 1px solid var(--fp-hairline-soft, #f2f2f2);
}
.ri_item:first-child { padding-top: 4px; }
.ri_item:last-child { border-bottom: none; }
.ri_row_main {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
}
.ri_row_thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--fp-hairline, #f3f3f3);
    border-radius: 8px;
    overflow: hidden;
}
.ri_row_thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 좌측: 상품명 + (옵션 있으면 옵션 컨트롤 / 없으면 메타) — 최대 2줄 */
.ri_row_info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
/* Round13 [승민 지시 항목8] — 회원단가 적용 상품은 상품명 "위"에 눈에 띄는 스티커를 별도 노출
   (이름줄 배지의 F-66 중복방지 로직과는 무관한 별개 컴포넌트 — .ri_row_info의 flex-column 첫
   자식으로 자연히 이름줄 위에 쌓인다).
   Round15 [항목10] — 이 스티커도 회원단가 상세패널의 트리거(.ri_mp_info_trigger 재사용)라 팝오버가
   기준으로 삼을 position:relative 앵커가 필요 — 래퍼(.ri_member_sticker_wrap)에 부여한다. */
.ri_member_sticker_wrap { position: relative; display: inline-flex; align-self: flex-start; }
.ri_row_name_line { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Round15 [항목13] — 상품명 클릭 시 상세페이지 이동. 링크지만 일반 텍스트처럼 보이다가(밑줄 없음)
   hover 시에만 밑줄로 "클릭 가능"을 신호 — 리스트 안에서 색이 튀지 않게 링크 고유색은 쓰지 않는다. */
.ri_item_name_link { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; }
.ri_item_name_link:hover .ri_item_name { text-decoration: underline; }
.ri_item_name {
    display: block;
    font-size: 14px;
    color: var(--fp-ink, #222222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    word-break: keep-all;
}
.ri_row_sub_line { position: relative; min-height: 20px; display: flex; align-items: center; }
.ri_row_meta { font-size: 12px; color: var(--fp-muted, #999999); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ri_badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px; /* 배지 radius 6px 고정 — pill 금지 */
    white-space: nowrap;
}
/* Round5 — 품절/판매종료 사유를 색상으로 구분(승민 지적: "뭐가 문제인지 안 보인다").
   품절=일시적(재입고 가능성) → warning / 판매종료=영구 → error 톤으로 구분. */
.ri_badge--soldout { color: var(--fp-warning, #d97706); background: var(--fp-warning-bg, #fffbeb); }
.ri_badge--sale_ended { color: var(--fp-error, #cf202f); background: var(--fp-error-bg, #fff2f2); }
.ri_badge--member { color: var(--main-btn-point-color); background: var(--fp-surface-strong, #eef0f3); }
/* Round11 — "전체" 탭 구분 스티커. 최근구매=success 톤, 회원단가는 기존 .ri_badge--member(가격
   영역과 동일 파란 톤) 재사용 — 한 행에 둘 다 붙어도 색으로 즉시 구분되게(승민 지시: 배지 2개 나란히). */
.ri_badge--source-recent { color: var(--fp-success, #05b169); background: var(--fp-success-bg, #e7f9f1); }

/* 가격 컬럼 — 행 우측, 액션 바로 왼쪽 */
.ri_row_price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 90px; text-align: right; }
.ri_price_now { font-size: 15px; font-weight: 700; color: var(--fp-ink, #1b1b1b); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ri_price_base { font-size: 12px; font-weight: 400; color: var(--fp-muted, #999999); text-decoration: line-through; }
/* Round15 [승민 지시 항목11] — 회원단가 금액을 특수 강조색(레드) 대신 일반 상품가(.ri_price_now)와
   동일한 잉크 색으로 정리("지저분해 보인다"는 지적) — 굵기·크기는 강조 유지, 색만 통일. */
.ri_price_member { font-size: 15px; font-weight: 700; color: var(--fp-ink, #1b1b1b); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ri_price_undecided { font-size: 13px; font-weight: 500; color: var(--fp-muted, #7c828a); }
/* Round11 — 회원가 배지·상세정보 팝오버 트리거를 한 줄에. Round15 [항목12] 할인율을 배지 문구에
   통합("회원가 -14%")하며 .ri_discount_rate 단독 클래스는 더 이상 쓰지 않는다(삭제).
   position:relative로 팝오버 앵커 기준점. */
.ri_row_price_tags { position: relative; display: flex; align-items: center; gap: 4px; }
.ri_mp_info_trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    color: var(--fp-muted, #7c828a);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}
.ri_mp_info_trigger:hover,
.ri_mp_info_trigger[aria-expanded="true"] { color: var(--main-btn-point-color); background: var(--fp-surface-strong, #eef0f3); }
/* Round15 [항목10] — .ri_member_sticker도 .ri_mp_info_trigger를 겸하는데, 위 규칙은 원형 아이콘
   버튼(18x18) 전용이라 텍스트 스티커에는 안 맞는다. 같은 단일클래스 특이도라 소스 순서상 이 뒤에
   오는 규칙이 이겨 텍스트 스티커 모양으로 되돌린다. */
.ri_member_sticker {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--main-btn-point-color);
}
.ri_member_sticker:hover,
.ri_member_sticker[aria-expanded="true"] {
    background: none;
    color: var(--main-btn-point-color);
    text-decoration: underline;
}
/* 회원단가 상세정보 팝오버 — .ri_option_panel과 동일 기법(position:absolute, Dropdown z-index 200).
   Round15 [항목9] — "다른 툴팁들처럼 상단에" 지시로 아래(top)가 아니라 위(bottom)로 열리게 반전.
   가격 컬럼이 행 우측 끝이라 right:0 기준으로 왼쪽으로 펼쳐 화면 밖으로 넘치지 않게 한다. */
.ri_mp_detail_panel {
    position: absolute;
    right: 0;
    left: auto;
    bottom: calc(100% + 6px);
    top: auto;
    z-index: 200; /* Dropdown z-index 200 */
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    max-width: 260px;
    padding: 14px;
    text-align: left;
    background: var(--fp-canvas, #fff);
    border: 1px solid var(--fp-hairline, #e5e8eb);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.ri_mp_detail_panel[hidden] { display: none !important; } /* Round6 F-40 재발방지 규칙과 동일 이유([hidden]·display 특이도 동률) */
.ri_mp_detail_row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.ri_mp_detail_label { color: var(--fp-muted, #999999); flex-shrink: 0; }
.ri_mp_detail_value { color: var(--fp-ink, #222222); font-weight: 600; text-align: right; }
.ri_mp_detail_value--strike { color: var(--fp-muted, #999999); font-weight: 400; text-decoration: line-through; }
.ri_mp_detail_value--emph { color: var(--fp-error, #cf202f); font-weight: 700; }
.ri_mp_detail_discount { color: var(--fp-error, #cf202f); font-weight: 700; }
.ri_mp_detail_note { font-size: 11px; color: var(--fp-muted, #7c828a); line-height: 1.4; padding-top: 4px; border-top: 1px solid var(--fp-hairline-soft, #f2f2f2); }

/* Round5 — 판매종료·품절 행: 행 전체를 뭉뚱그려 opacity 처리하면 사유 배지까지 같이 흐려져
   "뭐가 문제인지 안 보인다"(승민 지적)는 문제가 그대로였다. 배지(.ri_badge)는 원래 채도 그대로
   두고, 썸네일·상품명·가격·메타만 개별로 흐리게 해 "왜 못 사는지"가 가장 또렷하게 보이게 한다. */
.ri_item.is-unbuyable .ri_row_thumb,
.ri_item.is-unbuyable .ri_item_name,
.ri_item.is-unbuyable .ri_row_price,
.ri_item.is-unbuyable .ri_row_meta { opacity: 0.5; }

/* ── 옵션 — Round13 [항목2/5] 토글+팝오버 통일 → Round15 [항목1/2/5] 버튼식 선택 + 자동담기로
   재개편. 토글은 이제 상품명 줄에 인라인으로 녹아들어(항목5, .ri_name_option_trigger_wrap이
   position:relative 앵커) 작게, 옵션값은 드롭다운이 아니라 버튼 그룹(.ri_option_btn)으로 바로
   클릭 선택한다. ── */
.ri_name_option_trigger_wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.ri_option_toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    max-width: 140px;
    font-size: 12px;
    font-weight: 400;
    color: var(--fp-muted-soft, #b3b3b3);
    background: var(--fp-canvas, #fff);
    border: 1px solid var(--fp-hairline, #dedede);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms ease;
}
.ri_option_toggle_label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri_option_toggle:hover,
.ri_option_toggle[aria-expanded="true"] { border-color: var(--main-btn-point-color, #1a6dff); }
.ri_option_toggle:focus-visible { outline: 2px solid var(--main-btn-point-color, #1a6dff); outline-offset: 2px; }
.ri_option_toggle svg { flex-shrink: 0; color: var(--fp-muted, #7c828a); transition: transform 150ms ease; }
.ri_option_toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* 선택 완료 후 — placeholder 톤(연한 회색)에서 실제 값 톤(진한 텍스트)으로 전환 */
.ri_option_toggle.has-value { color: var(--fp-ink, #222222); font-weight: 600; }
/* Round5 — 행 아래로 펼쳐지는 고정 블록 대신 position:absolute 팝오버 — 열려도 행 높이 불변.
   Round15 — 버튼 그룹이 드롭다운보다 폭을 더 쓰므로 min/max-width를 약간 넓혔다. */
.ri_option_panel {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 200; /* Dropdown z-index 200 */
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 240px;
    max-width: 320px;
    padding: 14px;
    background: var(--fp-canvas, #fff);
    border: 1px solid var(--fp-hairline, #e5e8eb);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* Round6 F-40(Critical) — [hidden] 속성과 display:flex 선언은 특이도가 동일(둘 다 0,1,0)해서
   스타일시트에 나중에 나오는 쪽이 이긴다. 이 규칙이 브라우저 기본 `[hidden]{display:none}`보다
   뒤에 있어 hidden 속성이 걸려 있어도(닫힌 초기상태 포함) 팝오버가 항상 펼쳐진 채 아래 행을
   가리고 있었다(Playwright 3중 재현 — 데스크톱/클릭전/모바일 전부 재현). [hidden]을 !important로
   강제해 항상 이기게 한다 — MDN이 권장하는 표준 대응법(첫 페인트부터 aria-expanded=false·hidden
   상태와 실제 렌더가 반드시 일치해야 하는 요소라 !important 사용이 타당하다고 판단). */
.ri_option_panel[hidden] { display: none !important; }
/* 승민 실브라우저 피드백 [항목1] — 트리거가 뷰포트 하단에 가까우면(리스트 맨 아래 상품 등) 아래로
   펼치면 화면 밖으로 잘린다. JS(positionOptionPanel)가 남는 세로 공간을 계산해 부족할 때만 이
   클래스를 붙여 위로 뒤집는다. */
.ri_option_panel--flip-up { top: auto; bottom: calc(100% + 6px); }

/* Round15 [승민 지시 항목2] — 옵션값 선택: 셀렉트+드롭다운(listbox) → 버튼 그룹. 클릭 즉시
   선택(열기 단계 없음), 추가금액(있으면)을 버튼 안에 바로 표기(fivepro-design-system 폼 컨트롤
   토큰 — 닫힘·hover·선택·포커스 전 상태 반영). */
.ri_option_group + .ri_option_group { margin-top: 2px; }
.ri_option_group_label { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--fp-muted, #7c828a); }
.ri_option_btns { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; }
.ri_option_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--fp-ink, #222222);
    background: var(--fp-canvas, #fff);
    border: 1px solid var(--fp-hairline, #dedede);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.ri_option_btn:hover:not(.is-soldout):not(:disabled) { border-color: var(--main-btn-point-color, #1a6dff); }
.ri_option_btn:focus-visible:not(.is-soldout):not(:disabled) { outline: 2px solid var(--main-btn-point-color, #1a6dff); outline-offset: 2px; }
/* 선택된 옵션 = Primary 배경(fivepro-design-system form-controls 규정 — 셀렉트의 "체크마크"에
   대응하는 버튼식 표현: 색 반전 자체가 선택 상태를 신호) */
.ri_option_btn.is-selected { color: var(--fp-on-primary, #fff); background: var(--main-btn-point-color, #1a6dff); border-color: var(--main-btn-point-color, #1a6dff); font-weight: 600; }
.ri_option_btn_price { font-size: 12px; color: var(--fp-muted, #999999); font-variant-numeric: tabular-nums; }
.ri_option_btn.is-selected .ri_option_btn_price { color: var(--fp-on-primary, #fff); opacity: 0.85; }
/* 2026-08-12 [RepurchaseRecentItems 후속] — data-stock="0"(품절) 옵션 버튼이 활성 상태로 렌더돼
   골라도 되는 것처럼 보였다가 서버 재검증에서만 걸리던 버그 수정. .ri_btn.is-disabled(위 task140
   톤)과 동일하게 opacity 대신 색상(글자·배경)만 바꾼다 — fp_tooltip(가상요소)을 겸하는 버튼이라
   opacity를 쓰면 호버 툴팁까지 흐려진다(동일 근본원인, 이미 검증된 회피). */
.ri_option_btn.is-soldout, .ri_option_btn:disabled {
    cursor: not-allowed;
    color: var(--fp-muted-soft, #b3b3b3);
    background: var(--fp-surface-soft, #f7f7f7);
    border-color: var(--fp-hairline, #dedede);
}
.ri_option_btn.is-soldout .ri_option_btn_price, .ri_option_btn:disabled .ri_option_btn_price { color: var(--fp-muted-soft, #b3b3b3); }

/* ── 액션 영역 — 행 우측 끝(수량 + 담기/주문) ── */
.ri_row_actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: nowrap; }
/* Round18 [승민 지시 항목6] — 이제 .ri_row_actions 안이 아니라 .ri_row_main의 직속 자식으로
   .ri_row_price 바로 앞에 위치(마크업 순서 변경, recentitems.skin.php 참조) — actions가 항상
   "버튼만"으로 너비가 고정돼 price 위치가 행마다 흔들리지 않는다. */
.ri_qty { display: flex; align-items: center; flex-shrink: 0; }
.ri_qty_btn {
    width: 28px;
    height: 32px;
    border: 1px solid var(--fp-hairline, #dedede);
    background: var(--fp-canvas, #fff);
    color: var(--fp-body, #444444);
    font-size: 14px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.ri_qty_btn:first-child { border-radius: 6px 0 0 6px; }
.ri_qty_btn:last-child { border-radius: 0 6px 6px 0; }
/* Round6 — 수량 +/- 버튼 hover 통일: 입력형 컨트롤(셀렉트 트리거)과 같은 "테두리 포인트컬러" 방식 */
.ri_qty_btn:hover:not(:disabled) { background: var(--fp-surface-soft, #f7f7f7); border-color: var(--main-btn-point-color); color: var(--main-btn-point-color); }
.ri_qty_btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ri_qty_input {
    width: 38px;
    height: 32px;
    border: 1px solid var(--fp-hairline, #dedede);
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.ri_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 150ms ease, background 150ms ease, filter 150ms ease;
}
.ri_btn_cart { color: var(--fp-body, #444444); background: var(--fp-surface-soft, #f7f7f7); }
.ri_btn_order { color: var(--fp-on-primary, #fff); background: var(--main-btn-point-color, #1a6dff); }
.ri_btn_fallback { color: var(--fp-on-primary, #fff); background: var(--main-btn-point-color, #1a6dff); }
/* Round13 [승민 실브라우저 피드백 #8] — 빈 상태 "쇼핑하러 가기" 링크 전용 클래스(ri_btn_order 클릭
   위임 셀렉터와 충돌 방지가 목적, 시각은 ri_btn_order/ri_btn_fallback과 동일한 primary 톤 유지). */
.ri_empty_go_shopping { color: var(--fp-on-primary, #fff); background: var(--main-btn-point-color, #1a6dff); }
/* Round15 [승민 지시 항목8 — 근본원인] — opacity는 가상요소(::before/::after)를 포함한 자식 전체의
   실효 불투명도를 부모 값과 곱해서 낮춘다. 이 버튼들이 .fp_tooltip을 겸하게 되면서 opacity:0.45가
   호버 시 나타나는 툴팁(::after, 원래 opacity:1)까지 0.45로 끌어내려 "투명해서 안 보이는" 상태가
   됐다 — opacity 자체를 없애고 색상(글자·배경)을 명시적인 "비활성 톤"으로 바꿔 같은 시각효과를
   내되 자식 가상요소의 불투명도에는 영향을 주지 않게 한다.
   승민 재지적(다음 라운드) — 테두리가 지저분해 보인다는 판단으로 롤백, muted 텍스트 톤만 유지. 이
   상태는 이제 품절/판매종료(진짜 구매불가)에만 쓰인다 — "옵션 미선택"은 더 이상 이 클래스를 타지
   않는다(checkRowReady() 참조). */
.ri_btn.is-disabled, .ri_btn:disabled {
    cursor: not-allowed;
    color: var(--fp-muted-soft, #b3b3b3);
    background: var(--fp-surface-soft, #f7f7f7);
}
/* Round6 — 담기(secondary)/주문·폴백(primary) 버튼 hover 통일 규칙(비활성 상태는 hover 제외) */
.ri_btn_cart:hover:not(:disabled):not(.is-disabled) { background: var(--fp-surface-strong, #eef0f3); }
.ri_btn_order:hover:not(:disabled):not(.is-disabled),
.ri_btn_fallback:hover:not(:disabled):not(.is-disabled),
.ri_empty_go_shopping:hover { filter: brightness(0.92); }

/* ============================================================================
   [RepurchaseRecentItems] Round14 — 2026-08-06 (주)파이브센스_FIVESENSES.Corp.
   승민 실브라우저 피드백 #3 — 옵션 다중 담기 서브리스트("담을 옵션 목록"). inline/panel
   옵션모드 카드에만 존재(.ri_item에 flex-wrap을 줘서 이 블록이 항상 새 줄로 내려감 — 메인 행
   레이아웃은 그대로 유지). 카드 단위 체크박스(.ri_row_check, 하단 일괄주문바 포함용)와는
   완전히 별개 개념이라 스타일도 의도적으로 다르게(더 작고 카드 안쪽에 종속된 형태) 구분한다.
   ============================================================================ */
/* Round13 [항목7] — .ri_item이 더 이상 flex 컨테이너가 아니라(위 리팩터 참조) flex-basis 트릭이
   무의미해져 제거. 이제 .ri_optcart는 .ri_row_main과 나란한 형제 블록 요소일 뿐이라 항상 자기
   너비(100%)를 그대로 차지한다 — 별도 지정 불필요.
   Round18 [승민 지시 항목1 — 근본원인] — 좌측 들여쓰기가 62px(썸네일 48+gap 14)로 계산돼 있었는데,
   .ri_row_main의 실제 첫 자식은 체크박스(.fp_checkbox, 21px)라 상품명 시작점은 21+14(gap)+48+14(gap)
   =97px였다. 62px는 체크박스 폭+gap을 빼먹은 계산 실수 — 97px로 정정해 상품명 줄과 정확히 맞춘다. */
.ri_optcart { display: flex; flex-direction: column; gap: 6px; padding-left: 97px; }
.ri_optcart_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* Round15 [승민 지시 항목4] — 담긴 옵션 줄의 좌측 정렬·스타일을 상단 상품명 줄(.ri_row_name_line)과
   통일. 체크박스 크기·라벨 폰트를 상품명 줄과 동일 기준으로 맞췄다.
   Round18 [승민 지시 항목1] — "배경 없어 보인다"는 지적에 맞춰 hover 전에도 기본 배경을 깔고,
   전체 폭이 넓어 보인다는 지적에 패딩을 좁혔다(6px 4px → 5px 8px, 세로 리듬은 유지하되 좌우만 축소). */
.ri_optcart_row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    background: var(--fp-surface-soft, #f7f7f7);
    border-radius: 8px;
    transition: background 150ms ease;
}
.ri_optcart_row:hover { background: var(--fp-surface-strong, #eef0f3); }
/* 카드 단위 체크박스(.ri_row_check)와 동일한 기본 .fp_checkbox 크기(21x21) 그대로 사용 */
/* Round20 [승민 지시 항목3, 근본원인] — 좌측 수량(+/-) 스테퍼가 숫자 자릿수에 따라 폭이 바뀌면서
   그 우측의 "× n =" 계산식·소계 위치가 수량이 바뀔 때마다 좌우로 흔들렸다. 원인 제거 — (1) 단가를
   옵션명 옆(수량 스테퍼보다 앞)으로 옮기고, (2) "× n =" 표기 자체를 없애 수량 폭 변화가 그 뒤
   어떤 요소의 위치에도 영향을 못 주게 하고, (3) 소계는 폭 고정 + 우측정렬로 항상 같은 자리에
   있게 한다(Round13/18의 "수량 1일 땐 단가만" 분기도 이제 위치가 분리돼 불필요해져 폐기 —
   단가는 항상 옵션명 옆에, 소계는 항상 우측 고정칸에 각자의 역할로 표시). */
.ri_optcart_label_group { flex: 1 1 auto; min-width: 40px; display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.ri_optcart_label { flex: 0 1 auto; min-width: 0; font-size: 14px; color: var(--fp-ink, #222222); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; }
.ri_optcart_unit_price { flex-shrink: 0; font-size: 12px; color: var(--fp-muted, #999999); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ri_optcart_subtotal { flex-shrink: 0; min-width: 84px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--main-btn-point-color); font-weight: 700; }
/* Round18 [승민 지시 항목2] — 서브리스트 수량 스테퍼를 일반 상품 수량(.ri_qty/.ri_qty_btn, 28x32)과
   동일한 크기·정렬로 통일(기존 24x24는 한 단계 작아 이질감이 있었다). */
.ri_optcart_qty { display: flex; align-items: center; flex-shrink: 0; }
.ri_optcart_qty_btn {
    width: 28px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fp-hairline, #dedede);
    background: var(--fp-canvas, #fff);
    color: var(--fp-body, #444444);
    font-size: 14px;
    cursor: pointer;
    transition: background 150ms ease;
}
.ri_optcart_qty_btn:hover { background: var(--fp-surface-strong, #eef0f3); }
.ri_optcart_qty_btn:first-child { border-radius: 6px 0 0 6px; }
.ri_optcart_qty_btn:last-child { border-radius: 0 6px 6px 0; }
.ri_optcart_qty_val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 32px;
    border-top: 1px solid var(--fp-hairline, #dedede);
    border-bottom: 1px solid var(--fp-hairline, #dedede);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    background: var(--fp-canvas, #fff);
}
.ri_optcart_remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--fp-muted, #999999);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.ri_optcart_remove:hover { background: var(--fp-error-bg, #fff2f2); color: var(--fp-error, #cf202f); }
.ri_optcart_add {
    align-self: flex-start;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fp-body, #444444);
    background: var(--fp-canvas, #fff);
    border: 1px dashed var(--fp-hairline, #dedede);
    border-radius: 8px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}
.ri_optcart_add:hover:not(:disabled) { background: var(--fp-surface-soft, #f7f7f7); border-color: var(--main-btn-point-color, #1a6dff); }
.ri_optcart_add:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 480px) {
    .ri_optcart { padding-left: 0; }
    /* Round13 [승민 지시 항목3, 좁은 화면 회귀 방지] — 체크박스+라벨+단가+소계+수량+삭제가 한
       줄에 다 들어가기엔 좁은 화면 폭이 부족해 텍스트가 겹쳐 보였다(Playwright로 확인). 단가는
       숨기고 소계(가장 중요한 최종 금액)만 남긴다. */
    .ri_optcart_unit_price { display: none; }
}

/* ── 리스트 하단 페이지네이션 / 빈 상태 ──
   task168 [승민 지시] — 이전/다음+라벨(.ri_pager 커스텀) 방식을 걷어내고 online_contact.php
   (plugin/fs.onlineContact)와 완전히 동일한 표준 ul.pagination(css/common.css 전역 스타일,
   apms_paging() 마크업)으로 전면교체. 로드된 페이지 캐시 범위 안에서만 숫자를 노출하는 JS
   렌더러(recentitems.skin.php updatePagerUI)가 있을 뿐, 전용 CSS는 더 이상 필요 없다. */
.ri_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fp-empty-gap, 14px);
    padding: var(--fp-empty-pad-desktop, 192px) 0; /* [EmptyStateTokens] 마이페이지 빈상태 전역 통일 — point.php 2배 확대 기준값(기존 80px에서 재확정) */
    text-align: center;
}
.ri_empty img { width: var(--fp-empty-icon-size, 41px); }
.ri_empty p { font-size: var(--fp-empty-text-size, 14px); color: var(--fp-muted, #999999); }
@media (max-width: 991px) {
    .ri_empty { padding: var(--fp-empty-pad-mobile, 96px) 0; }
}

/* Round5 — 좁은 화면에서는 표 형태를 2줄로 자연스럽게 접는다: 1줄=썸네일+정보, 2줄=가격+액션(우측 정렬).
   행 높이는 늘지만 여전히 이전(카드형, 3~4줄+큰 썸네일)보다 훨씬 컴팩트하다.
   Round13 [항목7] — 이 2줄 리플로우 책임이 .ri_item에서 .ri_row_main으로 이동(위 리팩터 참조). */
@media (max-width: 640px) {
    .ri_row_main { flex-wrap: wrap; row-gap: 8px; }
    .ri_row_thumb { flex-basis: 40px; width: 40px; height: 40px; }
    /* Round6 — 체크박스(21px+gap 14px)가 새로 맨앞에 추가돼 2번째 줄(가격) 들여쓰기 보정값도 함께 조정.
       Round18 [항목6] — 수량(.ri_qty)이 가격 앞으로 이동하며, 2번째 줄에서 "맨 처음 오는 것"이
       들여쓰기를 맡아야 한다 — 옵션 다중담기 모드는 qty 자체가 없어 price가 바로 옵니다. 인접
       형제 선택자로 ".ri_row_info 바로 다음"인 쪽에만 걸어 마크업에 qty 유무를 묻지 않고도
       올바른 쪽에만 적용되게 한다(둘 다 걸면 이중 들여쓰기가 되므로 주의). */
    .ri_qty { order: 3; }
    .ri_row_info + .ri_qty { margin-left: 89px; }
    .ri_row_price { order: 4; }
    .ri_row_info + .ri_row_price { margin-left: 89px; } /* qty가 없는 행에서만 매치 */
    .ri_row_actions { order: 5; margin-left: auto; }
}

/* ===== 2026-08 (주)파이브센스_FIVESENSES.Corp. 마이페이지 디자인 통일(주문내역 톤: 카드 배경 #fff + radius 17px + padding 30px) ===== */
#sod_addr.sod_orderaddr {
    background-color: #fff;
    border-radius: 17px;
    padding: 6px 30px;
    border-top: none; /* 카드 전환 전 레거시 테이블 상단 구분선(#444) 잔재 제거 */
}
@media (max-width: 991px) {
    #sod_addr.sod_orderaddr {
        padding: 4px 16px;
        border-radius: 13px;
    }
}

/* 장바구니 — 마이페이지 경유(mypage=1) 시에만 상단 여백/카드 배경 통일. 직접 진입 시엔 기존 그대로.
   [2026-08-10] 타이틀-본문 간격이 주문내역(orderinquiry.php, 0px)보다 12px 더 넓다는 승민 지적으로
   재실측 — 아래 orderinquiry_tt margin-bottom:0 재정의로 title-content gap을 0으로 맞추고, 여기서도
   추가 padding-top을 더하지 않음(과거 이 주석의 "12px가 이미 정렬값" 근거는 폐기). */
.mypage_entry_content .cart-wrap.cart_style {
    padding-top: 0;
}
/* 타이틀("장바구니") 하단 margin — 공용 .orderform_title.orderinquiry_tt(css/rest.css, margin-bottom:12px)이
   주문내역/교환반품/쿠폰과 달리 페이지 스코프 재정의가 없어 유일하게 12px 간격이 남아있던 것을 0으로 통일
   (승민 요청, 다른 orderinquiry_tt 페이지와 동일 톤). cart_title_wrap 스코프는 cart.skin.php에만 존재. */
.mypage_entry_content .cart_title_wrap .orderform_title.orderinquiry_tt {
    margin-bottom: 0;
}
/* 타이틀("장바구니") 상단 여백이 타 마이페이지(주문내역 등)보다 좁았던 문제 — 그 페이지들은
   body(.at-body)에 "mypage" 클래스가 붙어 전역 padding-top(css/rest.css .at-body.mypage)을 받지만,
   cart.php는 mypage=1 경유 진입해도 그 클래스가 안 붙는 별도 화이트리스트 구조(page/top_banner.php
   $mypage_dashboard_optional)라 그 값이 빠져 있었음. 공용 body 클래스 대신 타이틀 래퍼에 동일 수치를
   마이페이지 스코프 한정으로 직접 적용(cart_title_wrap은 이 스코프에서만 존재 — 직접 진입 영향 없음).
   [2026-08-10] .at-body.mypage padding-top이 40px→12px로 변경됐는데 여기 미러링값이 갱신되지 않아
   orderinquiry.php 대비 28px 더 내려가 있던 회귀를 실측 후 12px로 재동기화(승민 재확인 요청). */
.mypage_entry_content .cart_title_wrap {
    padding-top: 12px;
}
/* 좌측 h1("마이페이지")도 같은 원인(body.mypage 클래스 누락)으로 여백이 빠져 우측 타이틀과 상단 라인이
   어긋나 있었음(승민 요청, 2026-08-08) — mypage_wing_wrap은 wishlist/itemuselist/qalist 등 다른
   페이지와 공유하는 클래스라 거기에 직접 규칙을 걸면 이미 정상인 그 페이지들이 이중 적용됨.
   cart.skin.php에만 붙은 cart_wing_wrap으로 스코프를 좁혀 이 페이지에만 적용(위 cart_title_wrap과 동일 값 유지 필요). */
.mypage_entry_wrap .cart_wing_wrap {
    padding-top: 12px;
}
/* 기본 .cart_wrap padding-top:20px가 위 래퍼 여백과 이중으로 겹쳐 타이틀-본문 여백이 orderinquiry(30px) 대비 과했던 문제(48px) — 마이페이지 스코프 한정 제거.
   align-items:flex-start — 기본 flex(align-items:stretch 상속)가 cart_right를 cart_left와 같은 높이로 강제로 늘려
   컨텐츠가 짧을 때(빈 장바구니 등) 카드 하단에 불필요한 흰 여백이 남던 문제 — 마이페이지 스코프 한정으로 실제 컨텐츠 높이만큼만 나오도록 조정. */
.mypage_entry_content .cart-wrap.cart_style .cart_wrap {
    padding-top: 0;
    align-items: flex-start;
}
.mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_left,
.mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right {
    background-color: #fff;
    border-radius: 17px;
    padding: 24px;
}
@media (max-width: 991px) {
    .mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_left,
    .mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right {
        padding: 16px;
        border-radius: 13px;
    }
}
/* 결제금액(cart_right)이 좁아 보인다는 피드백 — 기본 폭 비율(70%/25.67%)에서 4%p를
   cart_right로 이동(합계는 원본과 동일해 gap 40px 포함 컨테이너 폭 초과 없음).
   cart_left 카드 좌우 여백도 소폭 축소해 상품목록 콘텐츠 폭을 확보 */
.mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_left {
    width: 66%;
    padding-left: 20px;
    padding-right: 20px;
}
/* [STICKY-1] 결제금액 카드(cart_right)가 스크롤을 따라오도록 — position:sticky는 #thema_wrapper가
   overflow-y:auto로 스크롤 컨테이너가 되어(css/rest.css) 문서 스크롤과 어긋나 동작하지 않음이 dev-reviewer
   실측으로 재확인됨(c9d1f325 검수 중). 모바일 cart_head와 동일하게 position:fixed + JS 실측 동기화
   (fpSyncCartRightFixed, cart.skin.php)로 전환 — 여기서는 기본 in-flow 상태의 폭만 정의하고, fixed/absolute
   전환 시의 top/left/width는 JS가 매 스크롤마다 px로 계산해 인라인으로 지정한다. 1240px 이하(스택 전환
   구간)는 JS가 인라인 스타일을 비워 아래 미디어쿼리(position:static)에 그대로 맡긴다. */
.mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right {
    width: 29.67%;
    min-height: auto;
}
/* 카드 내부 래퍼 .cart_scroll은 기본 position:absolute(css/rest.css)라 정상 흐름에서 빠져 부모
   높이에 기여하지 못해, cart_right가 컨텐츠 길이와 무관하게 흰 배경만 하단까지 늘어나 있던 문제가
   있었음(align-items:stretch 시절 이슈). 마이페이지 스코프 한정으로 항상 relative로 되돌려 카드가
   실제 컨텐츠 높이만큼만 나오게 함 — sticky는 위 cart_right 자체에 걸려 있어 이 래퍼와는 무관하게
   동작한다(직접 진입은 이 스코프 밖이라 기존 동작 유지). */
.mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right .cart_scroll,
.mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right .cart_Wing {
    position: relative;
    top: auto;
    width: 100%;
}

/* 결제금액 영역 이중배경(흰카드 안에 회색 박스) 제거 — 카드 톤을 .cart_right 흰배경 하나로 통일.
   좌우 padding도 30px→12px로 축소해 금액 텍스트가 표시될 가로 공간 확보 */
.mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right .price_wrap {
    background-color: transparent;
    border: 0;
    padding-left: 12px;
    padding-right: 12px;
}
/* '결제금액' 타이틀+구분선 완전히 숨김(마이페이지 스코프 요청) */
.mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right .right_title {
    display: none;
}

/* 마이페이지 좌측메뉴(200px+gap 50px=250px 소비)로 인해 기본 스택 기준점(991px)보다 넓은 화면에서부터
   우측 결제금액 영역이 좁아져 금액 텍스트가 카드 밖으로 넘치는 문제 — 사이드바 소비폭만큼 보정한
   기준점(991+250≈1240px)에서 좌/우 컬럼을 조기에 세로 스택으로 전환(기본 991px 스택 로직과 동일 패턴 재사용) */
@media (max-width: 1240px) {
    .mypage_entry_content .cart-wrap.cart_style .cart_wrap {
        flex-direction: column;
        gap: 0;
    }
    .mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_left,
    .mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right {
        width: 100%;
    }
    .mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right {
        margin-top: 24px;
        min-height: auto;
        position: static;
    }
    .mypage_entry_content .cart-wrap.cart_style .cart_wrap .cart_right .cart_scroll {
        width: 100%;
        position: relative;
    }
}

/* 2026-08-13 (주)파이브센스_FIVESENSES.Corp. — orderaddress.php 배송지 빈 상태를
   recentitems.php .ri_list_wrap/.ri_empty 카드 패턴으로 통일(승민 지시). css/rest.css의
   li.no_list div 범용 패딩(160px/80px)이 아래 두 레이어(.ri_list_wrap/.ri_empty) 모두에
   중복 매치돼 여백이 과도하게 쌓이므로, 이 카드 안에서만 각자 고유 패딩으로 되돌린다. */
.orderaddress_wrap .address_content .address_cont li.no_list .ri_list_wrap {
    padding: 8px 20px;
}
.orderaddress_wrap .address_content .address_cont li.no_list .ri_list_wrap .ri_empty {
    padding: var(--fp-empty-pad-desktop, 192px) 0; /* [EmptyStateTokens] 마이페이지 빈상태 전역 통일 */
}
.orderaddress_wrap .address_content .address_cont li.no_list .ri_list_wrap .ri_empty img {
    margin: 0;
}
@media (max-width: 991px) {
    .orderaddress_wrap .address_content .address_cont li.no_list .ri_list_wrap .ri_empty {
        padding: var(--fp-empty-pad-mobile, 96px) 0;
    }
}

/* ============================================================================
   [EasypayCardUI r6] 2026-08-12 (주)파이브센스_FIVESENSES.Corp.
   결제수단 세로 리스트 + 행별 아코디언(payment_addr 탭 구조 폐기, D-08) + 나이스페이 간편결제 카드
   5-state(guest/unknown/unregistered/registered/lookup_failed) + 카드 등록·관리 모달 셸.
   화면·CSS·인터랙션 목업 전담(⑩). DB·ajax·서버 검증(userkey.php/mypage.php)은 ④ 연동 범위.
   이 스킨은 전역 --fp-* 토큰이 정의돼 있지 않아 var(--fp-*, var(--main-btn-point-color, hex))
   형태로 사이트 런타임 포인트컬러를 1차 폴백으로 중첩한다(RepurchaseRecentItems 섹션과 동일 관례).
   ============================================================================ */

/* ── 결제수단 세로 리스트. 개폐의 단일 진실원천은 각 행 라디오의 :checked뿐이다(D-13) — 아래
   .settle_row_input:checked ~ .settle_row_panel 형제 선택자가 전담하며 JS는 개폐를 다루지 않는다.
   노출 수단이 하나뿐이어도(AC-03) 별도 처리 없이 자연히 빈 리스트 껍데기·잔여 구분선이 남지 않는다
   — :last-child가 항상 그 유일한 행을 가리켜 하단 구분선을 스스로 없앤다. ── */
/* 승민 라운드3-8번 수정 — 구분선을 --fp-hairline(#e4e6ea, 상대적으로 진함)에서
   --fp-hairline-soft(이 스킨의 다른 리스트류(ri_mp_detail_note 등)가 이미 쓰는 옅은 회색
   컨벤션, #eef0f3=이 파일의 --fp-surface-strong 톤과 동일 계열)로 교체 — 눈에 덜 띄는 옅은
   구분선. */
.settle_list {
    border-top: 1px solid var(--fp-hairline-soft, #eef0f3);
}
/* 승민 라운드5 요청 — 모바일에서 "결제수단" 섹션 타이틀(.ordersheet_title, 991px 이하에서는
   이미 자체 border-bottom을 지워 타이틀 쪽엔 선이 없다, style.css:3892 부근)과 그 아래
   콘텐츠(이 리스트의 첫 행 — 간편결제 행에 "카드 간편결제" 서브라벨이 보임) 사이에 이 border-top
   만 홀로 남아 구분선처럼 보였다. 데스크톱은 두 타이틀 규칙(하단 25px+선)과 시각적으로 자연스럽게
   맞물리므로 그대로 두고, 991px 이하에서만 제거한다. */
@media (max-width: 991px) {
    .settle_list { border-top: 0; }
}
.settle_row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    /* 승민 라운드3-8번 요청 — pay1.png 레퍼런스 대비 행이 너무 높아 보인다는 지적. 16px→12px로
       축소(4px 배수 스케일 준수) — .settle_row_label의 min-height:44px(WCAG 터치 타겟 최소값)는
       그대로 유지하므로 행 총 높이는 76px(16+44+16)에서 68px(12+44+12)로 줄어든다. */
    padding: 12px 4px;
    border-bottom: 1px solid var(--fp-hairline-soft, #eef0f3);
}
.settle_row:last-child {
    border-bottom: 0;
    /* 승민 요청2 r2 — 마지막 행은 border-bottom이 사라져 다음 섹션과 붙어 보이던 문제.
       다른 행 사이 시각 간격(16px 패딩 + 16px 패딩 = 32px)과 동일하게 맞춘다.
       라운드3-7번 수정 — 이 32px 자체는 아래 .settle_row:has(:checked) 배경 규칙이 통째로
       삭제된 지금도 별개로 여전히 유효한 값(마지막 행과 다음 섹션 사이 간격)이라 margin-bottom
       그대로 유지 — 이 항목(여백)과 배경 하이라이트 제거(아래)는 서로 다른 이슈. */
    margin-bottom: 32px;
}
/* 승민 라운드3-7번 요청 — pay1.png(컬리) 레퍼런스처럼 선택된 행 전체를 색상 블록으로 강조하지
   않는다. 아래 .settle_row:has(.settle_row_input:checked) 배경+radius 규칙을 완전히 제거 —
   선택 표시는 라디오 자체의 체크(V) 인디케이터(.settle_row_input:checked, 위 SVG 배경)와
   라벨 강조(.settle_row_input:checked ~ .settle_row_label { font-weight:700 } 및 브랜드 아닌
   심볼 색 강조, 아래) 두 가지만으로 충분히 전달된다 — 별도 CSS 추가 없이 기존 두 규칙이 이미
   "체크 인디케이터 + 텍스트/아이콘이 살짝 진해짐" 요구를 그대로 만족한다. */

/* 라디오 자체를 시각 라디오로 스타일(appearance:none은 이 스킨이 select 화살표 커스텀 등에 이미
   쓰는 관례). display:none으로 숨기지 않아 포커스·키보드 순회·focus-visible이 그대로 유지된다
   (AC-37/AC-48/S-12). */
.settle_row_input {
    appearance: none;
    -webkit-appearance: none;
    order: 1;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--fp-hairline, #d8d8d8);
    background-color: var(--fp-canvas, #fff);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, background-image 150ms ease;
}
/* ⑪ round1+2 통합검수 R68-7/8 반려 수정 — thema/FIVESENSES/assets/bs3/css/bootstrap.min.css의
   input[type="radio"]:focus{outline:-webkit-focus-ring-color auto 5px}가 명시도 (0,2,1)라
   기존 .settle_row_input{outline:none}(0,1,0)·reset.css :focus:not(:focus-visible)(0,2,0) 둘 다
   이겨서 검정 굵은 기본 아웃라인이 그대로 노출됐다(실측 R68-7). element+class로 (0,2,1) 이상을
   확보하고, 명시도 동률 시 로드 순서에 기대는 위험을 없애기 위해 !important도 함께 건다 —
   outline:none 단독 금지 원칙의 예외가 아니라 바로 아래 :focus-visible !important와 항상 짝을
   이루므로 정상 짝(스킬 폼 규칙)이다. 클릭(마우스) 시엔 안 보이고 키보드 포커스 시에만 보인다. */
input.settle_row_input:focus {
    outline: none !important;
}
/* 승민 요청1 r2 — 선택 표시를 사이트 전역 "동그란 체크(V)" 라디오(css/common.css .radio_check,
   결제 진행 필수 동의·기본 배송지에서 이미 쓰는 관례)와 통일. settle_row는 :checked 형제선택자
   아키텍처(D-13)를 유지해야 해서 마크업은 그대로 두고, appearance:none 라디오의 배경을 점(dot)이
   아닌 흰색 체크(V) SVG로 바꿔 동일한 결과를 낸다. */
.settle_row_input:checked {
    border-color: var(--main-btn-point-color, #1a6dff);
    background-color: var(--main-btn-point-color, #1a6dff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M1 4.5L4 7.5L10 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
input.settle_row_input:focus-visible {
    outline: 2px solid var(--main-btn-point-color) !important;
    outline-offset: 2px;
}

.settle_row_label {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 4px;
    cursor: pointer;
    color: var(--fp-ink, #1b1b1b);
    font-size: 16px;
    font-weight: 500;
}
.settle_row_symbol {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--fp-muted, #8b8f96);
}
/* :not(.icon_pay) — 브랜드 배지(icon_pay)로 심볼을 대신하는 행(카카오페이·삼성페이 등, 승민 요청3
   r2)은 선택돼도 브랜드 고유색을 유지해야 하므로 이 프라이머리 색 오버라이드 대상에서 뺀다. */
.settle_row_input:checked ~ .settle_row_label .settle_row_symbol:not(.icon_pay) {
    color: var(--main-btn-point-color, #1a6dff);
}
.settle_row_text {
    word-break: keep-all;
}
.settle_row_input:checked ~ .settle_row_label {
    font-weight: 700;
}
.settle_row_wordmark {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--main-btn-point-color);
    word-break: keep-all;
}
/* ── 워드마크 로고화(승민 요청2) — 사이트 로고 이미지 + "페이" 고정 접미사 조합.
   원래 텍스트 워드마크(19px/800)와 세로 중심이 맞도록 인라인플렉스로 함께 정렬하고,
   로고 이미지는 텍스트 워드마크와 비슷한 눈에 띄는 폭이 되도록 높이 기준으로 크기를 맞춘다. ── */
.settle_row_wordmark--logo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.settle_row_wordmark_logo {
    display: block;
    height: 21px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
}
/* 승민 라운드4 요청1 — 라운드3의 필기체/스크립트 접미사가 "과하다, 더 심플하게, 어떤 로고와도
   잘 어울리게"라는 피드백으로 반려됨. 스크립트 폰트·이탤릭을 걷어내고 사이트 기본 산세리프를
   그대로 물려받게 두어(font-family 미지정 = 상속) 로고 이미지(.settle_row_wordmark_logo) 옆에
   자연스럽게 붙는 보조 텍스트로 절제한다. 굵기만 본문(400)보다 한 단계 살짝 높여(500) 로고와
   짝을 이루는 워드마크임을 미묘하게 드러낸다 — 화려한 스타일 차이가 아니라 웨이트 차이로 절제. */
/* 승민 라운드5 요청 — "페이" 접미사 색상을 포인트컬러가 아닌 기본 블랙(--fp-ink)으로. 로고 이미지
   옆에 자연스럽게 붙는 절제된 톤을 유지하는 방향(라운드4 요청1의 "화려하지 않게" 취지 계승). */
.settle_row_wordmark_suffix {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: var(--fp-ink, #1b1b1b);
    word-break: keep-all;
}
.settle_row_sub {
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-muted, #8b8f96);
}
.settle_row_badges {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.settle_row_label .icon_pay {
    position: static;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 20px;
    line-height: 1;
    /* 라운드3 수정(승민 요청5) — radius:10px(높이 20px의 절반=pill)는 배지 규칙(radius 6px 고정,
       pill 금지) 위반이었다. 6px 고정으로 교정 — 카드 지원수단 뱃지·카카오페이/네이버페이/삼성페이/
       페이코 등 실 결제수단 행 심볼 전부 이 클래스를 공유하므로 한 번에 통일된다. */
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.settle_row_label .icon_pay img {
    height: 9px;
    margin-right: 4px;
}
/* 승민 라운드5 요청4 — "반영이 안 됐다"는 재지적: 라운드3의 톤 통일(옅은 포인트컬러+회색조,
   아래 .settle_row_badges .icon_pay.naver 등)이 애플/삼성/토스를 실제 브랜드로 알아볼 수 없는
   수준까지 추상화시켜버렸다. "파란 배경을 유지해 달라는 게 아니라 브랜드 스티커가 실제로
   노출되게 해달라"는 요청이므로, 톤 통일보다 브랜드 인식 가능성을 우선한다 — 라운드3의 pale
   유니톤 오버라이드를 이 배지 3종에서는 걷어내고(아래 .settle_row_badges .icon_pay.apple 등
   재정의 참조) 각 브랜드 고유색 그대로 노출, 크기도 20px→28px로 키운다(.settle_row_badges
   .icon_pay 스코프 규칙, 아래) — 네이버/카카오 실사 로고 이미지가 이미 보여주는 수준의 인식
   가능성에 맞춘다(네이버/카카오도 같은 이유로 grayscale 톤다운을 해제한다). */
.settle_row_badges .icon_pay {
    height: 28px;
    padding: 0 11px;
    font-size: 12px;
}
.settle_row_badges .icon_pay img {
    height: 13px;
    margin-right: 5px;
}
/* 승민 라운드6 요청1 — 애플페이/토스페이는 자체 재창작 글리프·워드마크(icon_pay_glyph 인라인
   SVG, icon_pay_word--pay 텍스트, icon_pay_toss_word, 파란 원형 배경)를 걷어내고 각 브랜드
   공식 배지 이미지로 교체(img, orderform.skin.php 참조) — 애플/삼성/토스 흉내 재창작 금지 지시.
   라운드7에서 네이버페이(developers.pay.naver.com 공식 배지)·카카오페이(developers.kakao.com
   공식 리소스)도 자체완결형 배지 이미지로 교체되면서 같은 원칙을 공유하게 되어 이 자리에 합류.
   네 이미지 모두 자체 배경·프레임(또는 투명 배경의 완결된 로고타입)을 이미 포함하고 있어 추가
   색상 배지 래퍼가 불필요하므로 아래에서 배경·패딩·보더를 걷어내고 이미지 실높이를 16px로
   맞춘다(라운드5의 28px 강조 톤에서 후퇴 — 승민 지시: "작게, 강조하지 않는 톤"). 브랜드별 배경
   색상 오버라이드 본체는 같은 자리(.settle_row_label .icon_pay.naver/.kakao, 아래)에 있다. */
.settle_row_badges .icon_pay.apple,
.settle_row_badges .icon_pay.toss,
.settle_row_badges .icon_pay.naver,
.settle_row_badges .icon_pay.kakao {
    height: 16px;
    padding: 0;
    border-radius: 0;
}
.settle_row_badges .icon_pay.apple img,
.settle_row_badges .icon_pay.toss img,
.settle_row_badges .icon_pay.naver img,
.settle_row_badges .icon_pay.kakao img {
    height: 16px;
    margin-right: 0;
}
/* 승민 라운드9(마무리9라운드) 요청1 — 라운드8에서 24px까지 키웠는데도 "토스 스티커만 여전히
   작아 보인다"는 재지적. height 숫자만 올리는 시도가 반복 실패한 원인을 실측으로 진단:
   img/icon_tosspay.png 원본이 300x150 캔버스 중 실제 로고 콘텐츠(비어있지 않은 픽셀 bounding
   box)는 158x54뿐이었다 — 캔버스 대비 좌우 23.7%·상하 32% 여백이 PNG 자체에 박제되어 있어
   세로 기준 콘텐츠가 캔버스의 36%만 채웠다. 반면 icon_kakaopay.png는 241x100 캔버스를
   거의 그대로(불투명 픽셀 91.5%, bbox 100%) 채우는 알약형 배지이고 icon_naverpay.svg도
   viewBox 자체가 배지 도형에 맞춰져 있다 — 즉 24px height를 줘도 실제 렌더 시 토스 로고의
   "시각적 높이"는 24 * 0.36 ≈ 8.6px에 불과해, 명목 height가 네이버/카카오(16px)·애플(14px)보다
   컸는데도 실제로는 가장 작게 보였다. 원인은 (a) 여백 문제가 지배적이고 (b) 콘텐츠 종횡비
   (158:54 ≈ 2.93)도 캔버스 종횡비(2:1)와 달라 세로 기준 여백이 더 두드러졌다 — 즉 여백+비율
   복합. 조치: img/icon_tosspay.png를 콘텐츠 bbox(71,48)-(228,101) 기준 각 방향 4px 여유만
   남기고 166x62로 재크롭(PIL 미가용 환경이라 순수 파이썬 PNG 디코더로 알파 bbox 실측 후 크롭,
   화질 저하 없음 — 리샘플링 없이 원본 픽셀 그대로 잘라낸 무손실 크롭). 크롭 후 콘텐츠가
   새 캔버스 세로의 87.1%를 채우므로 height는 24px에서 20px로 오히려 낮췄는데도 실제 시각적
   로고 높이는 20 * 0.871 ≈ 17.4px로 네이버/카카오(16px, 풀 블리드)보다 커진다 — 실측
   Playwright 확대 스크린샷으로 4개 배지 균형 재확인.
   승민 라운드10(마무리10라운드) 요청1 — 완전히 새 브라우저 컨텍스트(캐시 무효화) 정밀 실측
   결과 토스가 4개 배지 중 명백히 가장 컸다(w53.5×h20, 네이버 w42.2×h16 대비 폭 27% 초과).
   round9의 87.1% bbox 채움 비율 기준 height 20px→18px로 축소(시각 높이 ≈15.7px, 네이버/카카오
   16px에 근접) — width는 CSS에 별도 지정 없이 img 자체 종횡비(166:62 ≈2.677)로 자동 축소되어
   ≈48.2px. Playwright 새 BrowserContext(캐시 무효)로 4개 배지 재실측 후 확정.
   승민 마무리12라운드 요청1 — "아주 살짝만" 추가 축소 지시(큰 변화 없이 미세조정만). round10의
   18px에서 1px만 낮춰 17px로 확정 — 4px 배수 격자에서 벗어나지만 위 round8 애플(14px)과 같은
   "시각적 균형 우선" 예외 범위(브랜드 자산 bbox 채움비 차이 보정) 안의 미세조정이다. */
.settle_row_badges .icon_pay.toss,
.settle_row_badges .icon_pay.toss img {
    height: 17px;
}
/* 승민 라운드8(마무리8라운드) 요청1 — "애플페이가 살짝 큰 것 같다": 위 공통 16px에서 애플만
   14px로 축소. 애플페이 자산은 배경 없는 순수 글리프(currentColor 아웃라인)라 동일 픽셀
   높이에서도 배경이 있는 네이버·카카오 pill 배지보다 시각적으로 커 보이는 경향이 있어, 실측
   비교 결과 14px이 4개 배지 중 시각적 무게감이 가장 고르게 느껴지는 지점이었다(4px 배수에서
   2px 벗어나지만 브랜드 자산 종횡비 차이로 인한 시각 보정 목적 — 디자인시스템 배지 규칙의
   "시각적 균형 우선" 예외 범위 안). */
.settle_row_badges .icon_pay.apple,
.settle_row_badges .icon_pay.apple img {
    height: 14px;
}
/* 승민 마무리12라운드 요청2 — "애플페이가 픽셀 깨지는 느낌" 진단: img/icon_applepay.svg 자체를
   Playwright 캔버스 알파 bbox 실측(1200x600 오프스크린 렌더, viewBox 단위 환산)한 결과 글리프
   실제 좌표는 x[-0.03,50.0] y[15,36]로 viewBox(-1 14.5 52 22)와 상하좌우 여백이 거의 대칭
   (좌0.97/우1.0, 상하 각0.5) — 마진 자체는 문제가 아니었다. 진짜 원인은 round7에서 같이 박제된
   width="50" height="21" 속성과 viewBox 52x22의 종횡비 불일치(2.381 vs 2.364)였다 — 브라우저가
   기본 preserveAspectRatio(xMidYMid meet)로 이 둘을 맞추며 세로 기준으로 스케일을 정하고 가로에
   0.36px 상당의 레터박싱 여백을 반픽셀 단위로 나눠 넣는데, 이 서브픽셀 오프셋이 다시 img
   height:14px로 축소되며 안티앨리어싱 경계를 흐리게 만들었다(사용자 제보 "사과 로고·Pay 텍스트가
   깔끔하게 안 보인다"의 실체). 조치: SVG root의 width/height 속성 제거 — 크기는 이미 위 CSS가
   전담하므로 intrinsic 크기는 viewBox 비율(52:22)만을 단일 소스로 삼게 되어 레터박싱 자체가
   발생하지 않는다. shape-rendering="geometricPrecision"도 추가해 곡선 래스터라이즈 정밀도를 높임.
   path 좌표(6자리 소수)는 실측상 문제 없어 무변경. 단, DPR1/2 조건에서 안티앨리어싱 경계 픽셀
   비율을 정량 비교(old 72.20%/44.56% vs new 72.06%/44.71%)한 결과 유의미한 차이는 아니었다 —
   종횡비 불일치라는 스펙 레벨 결함은 실존해 제거했으나, 14px 크기에서 극적으로 더 선명해 보이는
   수준은 아님을 투명하게 남긴다. 잔여 흐림 인상이 있다면 다음 레버는 round8이 확정한 14px 크기
   자체일 가능성이 높다(이번 라운드 범위 밖). */
/* "추천" 뱃지 — 배지 규칙(radius 6px 고정, pill 금지, 한 단어 이내) 준수.
   라운드3 수정(승민 요청4) — 진한 프라이머리 배경+흰 텍스트(필사각형 CTA와 톤이 겹쳐 눈에 덜 띔)
   대신 옅은 포인트컬러 배경(color-mix로 --fp-primary를 12% 섞은 톤, 하드코딩 hex 아님) +
   --fp-primary-text 텍스트로 변경. font-weight도 700(bold)→500으로 낮춤. 세로 중앙정렬은
   부모(.settle_row_label)가 이미 align-items:center라 기본적으로 맞지만, flex-wrap 상황에서도
   흔들리지 않도록 align-self:center를 명시적으로 고정. */
.pay_sticker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--main-btn-point-color);
    background: color-mix(in srgb, var(--main-btn-point-color) 12%, var(--fp-canvas, #fff));
}

/* ── 행별 아코디언 패널 — 열림·닫힘은 라디오 :checked에만 연동한다(D-13/AC-36/AC-45/AC-47).
   닫힌 상태는 display:none으로 접근성 트리·탭 순서에서 함께 제거된다(D-13 aria_requirement). ── */
.settle_row_panel {
    order: 3;
    flex: 0 0 100%;
    box-sizing: border-box;
    display: none;
    margin-top: 16px;
    padding-left: 34px;
}
.settle_row_input:checked ~ .settle_row_panel {
    display: block;
    animation: settleRowPanelIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes settleRowPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .settle_row_input:checked ~ .settle_row_panel { animation: none; }
}
.settle_row_panel .ep_card_area {
    margin-top: 0;
}
@media (max-width: 480px) {
    .settle_row_panel { padding-left: 0; }
}

/* #settle_bank 표시 권한 일원화(D-14 r6) — !important 근거: shop/orderform.php 862-867행
   show_proof()가 무통장이 아닌 수단 선택 시 #settle_bank에 css('display','none')을 인라인
   대입하고(무통장 선택 시엔 css('display','')로 복귀), #od_settle_bank 클릭의 show() / 그 외
   핸들러의 hide()도 같은 인라인 속성을 건드린다(PC 1644-1653·1667-1684행 / 모바일 880-929행).
   인라인 스타일은 !important 없이는 어떤 선택자로도 이길 수 없으므로, 패널이 열린 상태(무통장
   checked)에서는 이 규칙이 레거시 인라인 값과 무관하게 항상 이겨야 표시 권한이 패널(:checked)
   하나로 일원화된다. 패널이 닫힌 동안(무통장 미선택)은 조상 .settle_row_panel이 display:none이라
   이 규칙이 있어도 화면에 나타나지 않는다 — 표시 여부의 최종 결정권은 여전히 :checked 하나뿐이다.
   실제 계산 display는 flex다(style.css #settle_bank 정의 — 기획서 초안의 'block' 서술은 오기이므로
   따르지 않는다). */
#settle_row_bank .settle_row_panel #settle_bank {
    display: flex !important;
}

/* #settle_nicepay_easy(.ep_card_area) 표시 권한 일원화(D-14 r6 확장, AC-50) — !important 근거:
   shop/orderform.php PC 1650·1656·1663·1672·1682행 / 모바일 888·894·903·915·927행이
   #settle_nicepay_easy에 .show()/.hide()로 인라인 display를 대입한다(그룹 셀렉터의
   #od_settle_samsungpay 오타 때문에 삼성페이 선택 시엔 hide가 걸리지 않는 등 이미 결제수단별로
   신뢰할 수 없는 상태). 간편결제 행이 선택된 동안에는 이 값과 무관하게 항상 표시되어야 '행은
   열렸는데 카드 영역만 비어 있는' 상태(AC-50)가 생기지 않는다. .ep_card_area 원 컴포넌트의 기본
   display는 block(별도 지정 없음)이므로 그대로 고정한다. */
#settle_row_easy .settle_row_panel #settle_nicepay_easy {
    display: block !important;
}

/* ── 미등록 상태 — pay1형 점선 안내 박스(D-12). frosted-glass 빈 카드·번호 자리표시는 폐기했다. ── */
.ep_unreg_box {
    box-sizing: border-box;
    max-width: 360px;
    border: 1px dashed var(--fp-hairline, #d0d3d8);
    border-radius: 16px;
    background: var(--fp-surface-soft, #f7f8fa);
    padding: 24px 20px;
    text-align: center;
}
.ep_unreg_lead {
    font-size: 15px;
    font-weight: 600;
    color: var(--fp-body, #333333);
    word-break: keep-all;
}
.ep_unreg_box .ep_card_cta {
    width: 100%;
    max-width: 280px;
}
@media (max-width: 480px) {
    .ep_unreg_box { max-width: 100%; }
}

/* ── 간편결제 카드 영역 — 5-state. [data-ep-state]가 1개만 노출시킨다. ── */
.ep_card_area {
    position: relative;
    margin-top: 16px;
}
.ep_card { display: none; }
.ep_card_area[data-ep-state="guest"] .ep_card--guest,
.ep_card_area[data-ep-state="unknown"] .ep_card--unknown,
.ep_card_area[data-ep-state="unregistered"] .ep_card--unregistered,
.ep_card_area[data-ep-state="registered"] .ep_card--registered,
.ep_card_area[data-ep-state="lookup_failed"] .ep_card--lookup_failed {
    display: block;
}

.ep_card_face {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1.586 / 1;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: box-shadow 200ms ease-out;
}
.ep_card_logo { display: inline-flex; color: var(--fp-ink, #1b1b1b); }
.ep_card_number {
    display: flex;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    color: inherit;
}
.ep_card_meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.ep_card_name {
    font-size: 14px;
    font-weight: 600;
    word-break: keep-all;
}
.ep_card_expiry {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.ep_card_notice {
    margin-top: 4px;
    font-size: 13px;
    color: var(--fp-muted, #8b8f96);
    word-break: keep-all;
}
.ep_card_notice--error {
    color: var(--fp-error, #d92d20);
}
/* ── 조회실패/등록미완료 인라인 안내(#epCardInlineNoticeUnregistered) — 경고 톤 칩.
   디자인시스템 alert--warning 토큰(아이콘·텍스트 --fp-warning / 배경 --fp-warning-bg)을 그대로
   따르되, 카드 영역 안에서 균형 잡힌 위치(리드 문구와 CTA 버튼 사이, 가운데 정렬)로 배치한다. ── */
.ep_card_inline_notice {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--fp-warning-bg, #fffbeb);
    text-align: left;
}
.ep_card_inline_notice_icon {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 1px;
    color: var(--fp-warning, #b54708);
}
.ep_card_inline_notice_text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--fp-warning, #b54708);
    word-break: keep-all;
    white-space: pre-line;
}
.ep_card_inline_notice[hidden] { display: none; }

/* guest — 잠금 톤 다운 카드 */
.ep_card_face--locked {
    background: var(--fp-surface-strong, #eef0f3);
    border: 1px solid var(--fp-hairline, #e4e6ea);
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 12px;
    filter: grayscale(55%);
    opacity: 0.7;
}
.ep_card_lock_icon { color: var(--fp-muted, #8b8f96); }

/* unknown — 스켈레톤 */
.ep_card_skeleton {
    background: var(--fp-surface-soft, #f5f6f8);
    border: 1px solid var(--fp-hairline, #e4e6ea);
    gap: 12px;
}
.ep_skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--fp-hairline, #e4e6ea) 25%, var(--fp-surface-strong, #eef0f3) 50%, var(--fp-hairline, #e4e6ea) 75%);
    background-size: 200% 100%;
}
.ep_skel_logo { width: 40px; height: 24px; }
.ep_skel_number { width: 70%; height: 20px; }
.ep_skel_name { width: 45%; height: 16px; }
@media not (prefers-reduced-motion: reduce) {
    .ep_skel { animation: epSkelShimmer 1.3s ease-in-out infinite; }
}
@keyframes epSkelShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* registered — 포인트컬러 그라데이션 카드(dashboard-13). color-mix 미지원 브라우저는
   먼저 선언한 background-color(단색) 폴백으로 열화 — 그라데이션 없이 단색 카드로만 표시된다. */
.ep_card_gradient {
    background-color: var(--main-btn-point-color, #1a6dff);
    background-image: linear-gradient(135deg, var(--main-btn-point-color), color-mix(in srgb, var(--main-btn-point-color) 55%, #0b0b0b 45%));
    color: var(--fp-on-primary, #fff);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.ep_card--registered .ep_card_number,
.ep_card--registered .ep_card_logo { color: var(--fp-on-primary, #fff); }

/* lookup_failed — 중립 카드 */
.ep_card_neutral {
    background: var(--fp-surface-strong, #eef0f3);
    border: 1px solid var(--fp-hairline, #e4e6ea);
    align-items: center;
    justify-content: center;
}

/* CTA 버튼 — 최소 높이 44px(WCAG 터치 타겟), focus indicator 필수 */
.ep_card_cta,
.ep_card_retry_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 16px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    color: var(--fp-on-primary, #fff);
    background: var(--main-btn-point-color, #1a6dff);
    transition: filter 150ms ease;
}
.ep_card_cta:hover,
.ep_card_retry_btn:hover { filter: brightness(0.94); }
.ep_card_cta:focus-visible,
.ep_card_retry_btn:focus-visible,
.ep_card_manage_link:focus-visible {
    outline: 2px solid var(--main-btn-point-color, #1a6dff);
    outline-offset: 2px;
}
.ep_card_cta:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.ep_card_cta--login { background: var(--fp-ink, #333333); }
.ep_card_retry_btn { background: var(--fp-surface-strong, #eef0f3); color: var(--fp-body, #444444); }
.ep_card_manage_link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 12px;
    padding: 0 4px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--main-btn-point-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ============================================================================
   나이스페이 간편결제 모달 셸 — #nicebox(orderform.1.php에서 JS로 append)
   기존 orderform.1.php 인라인 <style> 이관분 + 신규 #niceModalShell/#niceModalCard.
   ============================================================================ */
#nicebox .dimm {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 1;
    display: none;
}
#nicebox .dimm.ep_modal_dimm--open { display: block; }

/* #nicewin 자체는 niceEasy_*()가 top/left(px)·fadeIn/fadeOut·html(iframe)을 계속 직접 조작하므로
   그 동작을 그대로 두고 CSS !important로 top/left 등 위치 프로퍼티만 무효화해 새 셸이 중앙정렬을
   전담한다. display만은 예외로 !important 없이 선언한다 — jQuery fadeIn()이 동작하려면 요소가
   is-hidden 상태로 시작해야 하는데, 여기에 !important를 붙이면 fadeIn()이 써넣는 인라인
   display를 오히려 이 규칙이 이겨 fadeIn()이 no-op 처리되어 모달이 영원히 열리지 않는다. */
#nicebox #nicewin.window {
    display: none;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    z-index: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background-color: transparent !important;
}
#nicebox #nicewin.window iframe { display: block; max-width: 100%; margin: 0 auto; }

/* 모달 셸 — display:flex를 기본으로 갖고, 표시/숨김은 클래스 토글로만 처리한다(인라인 display 조작 금지).
   pointer-events:none으로 카드 바깥(딤 영역)의 클릭이 셸을 통과해 실제로 #nicebg에 도달하게 한다. */
#niceModalShell {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    pointer-events: none;
}
#niceModalShell.ep_modal_shell--open { display: flex; }
#niceModalCard {
    pointer-events: auto;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--fp-canvas, #fff);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    padding: 24px;
    box-sizing: border-box;
}
.ep_modal_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.ep_modal_title {
    font-size: 18px;
    font-weight: 700;
    color: var(--fp-ink, #1b1b1b);
}
.ep_modal_close_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--fp-muted, #8b8f96);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.ep_modal_close_btn:hover { background: var(--fp-surface-soft, #f7f7f7); color: var(--fp-body, #444444); }
.ep_modal_close_btn:focus-visible {
    outline: 2px solid var(--main-btn-point-color, #1a6dff);
    outline-offset: 2px;
}
body.ep_modal_open { overflow: hidden; }

/* ── [모달 등장 타이밍 개선 → 라운드5 버그 재조사] PG 왕복 대기 로딩 셸(#niceModalLoading) —
   카드 그래픽 + 스피너.
   [라운드5 실측 정정] 이 블록의 기존 주석은 "transform만 쓰는 컴포지터 애니메이션이라 동기
   XHR로 메인스레드가 멈춰 있는 동안에도 계속 재생된다"고 서술했었다 — 승민이 실제 "카드
   등록하고 결제하기" 클릭 시 로딩 카드가 정적 이미지처럼 보인다고 재지적해 재검증한 결과,
   이 서술은 사실이 아니었다. 실제 강제클릭(⑪ round1 검증 방식)이 아닌 진짜 클릭 경로를
   합성 하네스(동일 CSS+동일 JS 골격 + 실제 네트워크 지연을 주는 로컬 서버, async:false
   XMLHttpRequest)로 재현해 외부에서(페이지 JS에 의존하지 않는 CDP 스크린샷) 프레임을
   비교한 결과 — 클래스 부여 후 몇 프레임은 실제로 변했지만, 동기 XHR가 시작된 시점부터
   그 XHR이 끝날 때까지 화면이 완전히 정지했다(각 프레임 스크린샷이 바이트 단위로 동일).
   즉 Chromium은 진짜 동기(async:false) XHR이 걸려 있는 동안 컴포지터 커밋 자체를 내주지
   않는다 — CSS만으로는 이 구간을 넘어 계속 재생시킬 방법이 없다(브라우저 레벨 제약, PG
   호출(niceEasy_key()/niceEasy_add())을 async:true로 바꾸지 않는 한 프론트 단독으로 해결
   불가 — 그 함수들은 ⑩ 권한 밖. frontend-output.json known_limitations 참조).
   대신 할 수 있는 것: 클래스 부여 직후 실제 동기 호출이 시작되기 전까지 "확실히 눈에 보이는"
   구간을 32ms(예전 2-rAF)에서 ~360ms 보장 dwell로 늘리고(orderform.tail.skin.php
   epOpenPgLoadingShell), 그 안에서 셔플 1사이클을 더 빠르고 크게(1.8s→1.05s, 진폭 확대)
   재생해 "로딩이 활기차게 시작됐다"는 인상을 확실히 남긴다 — PG 응답이 오는 순간(길든 짧든)
   #nicewin의 style 변화를 MutationObserver가 즉시 감지해 로딩 클래스를 걷으므로(orderform.1.php
   niceSyncModalChrome, 무수정) 정지해 있던 프레임에서 실제 콘텐츠로 전환되는 순간 자체는
   그대로 매끄럽다. ── */
.ep_modal_loading {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 260px;
    padding: 32px 0;
}
#niceModalCard.ep_modal_card--loading .ep_modal_loading { display: flex; }
/* [카드 등록 애니메이션 재구성 R4] 승민 요청8 — CTA 클릭 직후 카드 영역(.ep_card_area) 위에서
   1회만 재생되던 옛 스택 콜랩스 연출(#epStack)을 폐기하고, 그 자리에 있던 카드 그래픽을 이
   로딩 셸의 상단으로 옮겨왔다. PG 왕복 시간이 매번 달라 고정 시간 뒤 멈추는 연출은 맞지 않으므로,
   .ep_modal_card--loading이 켜져 있는 동안 CSS만으로 계속 반복(infinite)되는 셔플 연출로
   강화했다 — 정지 상태 3장(dashboard-15)보다 역동적으로 자리를 순환한다. 시작/종료는 여전히
   .ep_modal_card--loading 클래스 하나가 전담한다(별도 JS 타이머 불필요, orderform.1.php의
   niceSyncModalChrome이 그대로 끈다). */
.ep_modal_loading_stack {
    position: relative;
    width: 92px;
    height: 58px;
    flex-shrink: 0;
}
.ep_modal_loading_card {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--fp-surface-strong, #eef0f3), var(--fp-hairline, #dfe2e7));
    border: 1px solid var(--fp-hairline, #d8dbe0);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
#niceModalCard.ep_modal_card--loading .ep_modal_loading_card--1 {
    /* 라운드5 — 1.8s→1.05s(더 빠르게)+진폭 확대, epOpenPgLoadingShell()의 ~360ms 보장
       dwell 구간 안에서 최소 한 바퀴 가까이 눈에 보이는 셔플이 실제로 재생되도록. */
    animation: epModalLoadingShuffle 1.05s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    animation-delay: -0.7s;
}
#niceModalCard.ep_modal_card--loading .ep_modal_loading_card--2 {
    animation: epModalLoadingShuffle 1.05s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    animation-delay: -0.35s;
}
#niceModalCard.ep_modal_card--loading .ep_modal_loading_card--3 {
    animation: epModalLoadingShuffle 1.05s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    animation-delay: 0s;
}
@keyframes epModalLoadingShuffle {
    0%   { transform: translate(0, 9px) rotate(0deg) scale(0.88); opacity: 0.4; z-index: 1; }
    33%  { transform: translate(10px, -4px) rotate(9deg) scale(1); opacity: 0.85; z-index: 2; }
    66%  { transform: translate(-16px, -13px) rotate(-13deg) scale(1.08); opacity: 1; z-index: 3; }
    100% { transform: translate(0, 9px) rotate(0deg) scale(0.88); opacity: 0.4; z-index: 1; }
}
/* 모션 최소화 선호 — 회전·이동 대신 은은한 페이드 루프만(기존 AC-19 취지 계승). */
@media (prefers-reduced-motion: reduce) {
    #niceModalCard.ep_modal_card--loading .ep_modal_loading_card--1,
    #niceModalCard.ep_modal_card--loading .ep_modal_loading_card--2,
    #niceModalCard.ep_modal_card--loading .ep_modal_loading_card--3 {
        animation: epModalLoadingFadeOnly 1.05s ease-in-out infinite;
        transform: none;
    }
    #niceModalCard.ep_modal_card--loading .ep_modal_loading_card--1 { animation-delay: -0.7s; }
    #niceModalCard.ep_modal_card--loading .ep_modal_loading_card--2 { animation-delay: -0.35s; }
    #niceModalCard.ep_modal_card--loading .ep_modal_loading_card--3 { animation-delay: 0s; }
}
@keyframes epModalLoadingFadeOnly {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}
.ep_modal_spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--fp-hairline, #dfe2e7);
    border-top-color:  var(--main-btn-point-color);
    animation: epModalSpin 800ms linear infinite;
}
@keyframes epModalSpin {
    to { transform: rotate(360deg); }
}
.ep_modal_loading_text {
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-muted, #8b8f96);
    word-break: keep-all;
}
@media (prefers-reduced-motion: reduce) {
    .ep_modal_spinner { animation-duration: 1600ms; }
}

@media (max-width: 991px) {
    .ep_card_face { max-width: 100%; }
}
@media (max-width: 480px) {
    .ep_card_face { max-width: 94vw; aspect-ratio: 1.586 / 1; padding: 16px 20px; }
    .ep_card_cta, .ep_card_retry_btn { width: 100%; }
    #niceModalShell { padding: 0; }
    #niceModalCard {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}

/* ============================================================================
   [EasypayCardUI 마무리 Round2] 2026-08-12 (주)파이브센스_FIVESENSES.Corp.
   승민 2라운드 추가 피드백 6건 — 결제수단 브랜드 배지, 셀렉트 열림상태 커스텀 드롭다운.
   ============================================================================ */

/* ── 승민 요청3 r2 — 결제수단 브랜드 배지(icon_pay). 제3자 브랜드 고유색은 FP 토큰 대상이 아니라
   이 코드베이스에 이미 있는 .icon_pay.naver/.kakao(css/rest.css) 하드코딩 관례를 그대로 따른다.
   .settle_row_badges(카드 행 하단 지원수단 목록)와 .settle_row_symbol(카카오페이·삼성페이·페이코
   행 자체의 대표 아이콘) 두 자리에서 같은 .icon_pay 클래스를 재사용한다. ── */
.settle_row_badges {
    flex-wrap: wrap;
    row-gap: 12px;
}
.settle_row_symbol.icon_pay {
    white-space: nowrap;
}
/* 승민 라운드7 요청2 — 네이버페이 공식 배지(badge_npay.svg, developers.pay.naver.com
   /design/brand/logo 정식 브랜드 리소스 zip에서 받음, tistory 블로그 임시 서명 URL 아님)로
   교체. 기존 다크그린(#087f45) 배경 pill은 그 자체 색이 접근성 대응용 톤이었을 뿐, 새 배지가
   이미 초록 캡슐+N 아이콘+pay 워드마크를 자체 완결형으로 포함하고 있어 불필요해졌다 — 이미지
   자체가 이미 배지이므로 추가 배경을 씌우면 이중 프레임이 된다(아래 apple과 동일 원칙).
   "지원 결제수단" 배지 목록(.settle_row_badges)과 네이버페이 결제수단 행(is_naverpay) 두 자리
   모두 이 img 하나를 공유하므로 여기서 한 번에 투명 처리한다. */
.settle_row_label .icon_pay.naver {
    background: transparent;
    padding: 0;
}
/* .settle_row_label .icon_pay.kakao — 카카오페이 텍스트전용 결제수단 행(is_kakaopay, 이미지
   없이 "kakao pay" 텍스트만 쓰는 별도 행)이 이 노란 배경 pill을 그대로 사용 중이므로 유지한다.
   "지원 결제수단" 배지 목록 안의 이미지형 카카오페이 배지는 바로 아래 .settle_row_badges
   .icon_pay.kakao에서 별도로 투명 처리한다(라운드7) — specificity가 동일(3클래스)하므로
   이 기본 규칙보다 반드시 소스상 뒤에 와야 실제로 이긴다. */
.settle_row_label .icon_pay.kakao {
    background: #fee500;
    color: #3a1d1d;
}
.settle_row_badges .icon_pay.kakao {
    background: transparent;
}
/* 승민 라운드6 요청1 → 라운드7 갱신 — 애플페이는 승민이 직접 제공한 SVG path(사과 로고+"Pay"
   워드마크 글리프, developer.apple.com 스타일의 완결된 심볼)로 교체(icon_applepay.svg 자체
   교체, orderform.skin.php는 무변경). 새 자산은 프레임 없는 순수 글리프(currentColor)라 배경을
   씌우면 어색해지므로 배경 제거를 유지 — 이미지 자체가 배지다. */
.settle_row_label .icon_pay.apple {
    background: transparent;
}
.settle_row_label .icon_pay.samsung {
    background: #1428a0;
    color: #fff;
}
/* 승민 라운드6 요청1 — 토스 공식 브랜드리소스센터(brand.toss.im) TossPay_Logo_Simple(심볼+
   "pay" 워드마크 조합, 투명배경) 원본을 그대로 쓰므로 라운드5의 파란 원형 배경(자작 대체)을
   제거한다 — 이미지 자체가 이미 완결된 로고타입이라 추가 배경이 필요 없다. */
.settle_row_label .icon_pay.toss {
    background: transparent;
}
.settle_row_label .icon_pay.payco {
    /* ⑪ round1+2 통합검수 R68-11 반려 수정 — 흰 배경 + #ed1c24 텍스트는 4.38:1로 AA(4.5:1)에
       근소 미달했다. 텍스트·보더를 조금 더 짙은 레드(#c8151c)로 낮춰 5.87:1 확보(계산 검증 완료). */
    background: var(--fp-canvas, #fff);
    color: #c8151c;
    border: 1px solid #c8151c;
}

/* ============================================================================
   [EasypayCardUI 마무리 Round3] 2026-08-13 (주)파이브센스_FIVESENSES.Corp.
   승민 3라운드 마무리 피드백 6건.
   ============================================================================ */

/* 승민 요청5 r3 — SSG페이·페이코는 "지원 결제수단" 배지 목록(.settle_row_badges)에서 완전 삭제
   (마크업에서도 제거, orderform.skin.php). 위 .icon_pay.ssg 규칙은 더 이상 어떤 마크업도 참조하지
   않아 삭제 — .icon_pay.payco는 삭제하지 않는다(간편결제 PG명이 실제 'PAYCO'일 때 쓰는 별도의
   진짜 결제수단 행 심볼 .settle_row_symbol.icon_pay.payco가 아직 그대로 존재, orderform.skin.php
   1248행 부근). */
/* [r3→r5 정정] r3은 이 배지 목록(.settle_row_badges) 안에서 브랜드 고유색을 옅은 포인트톤+
   grayscale로 통일했었다("색이 뒤죽박죽"이라는 지적 대응). 그런데 라운드5에서 승민이 "반영이
   안 됐다 — 파란 배경 유지가 아니라 브랜드 스티커가 실제로 알아볼 수 있게 노출되길 원한다"고
   재지적: 그 통일이 애플/삼성/토스를 인식 불가 수준까지 추상화시킨 원인이었다. 톤 통일보다
   브랜드 인식 가능성이 우선이므로 이 오버라이드(옅은 배경색 통일 + grayscale 필터)를 완전히
   제거한다 — 위 브랜드별 개별 규칙(.settle_row_label .icon_pay.naver 등, 고유색)이 그대로
   적용되어 네이버/카카오(실사 로고 이미지)와 동일한 수준으로 애플/삼성/토스도 원색 그대로
   노출된다. 크기도 이 라운드에서 20px→28px로 키웠다(위 .settle_row_badges .icon_pay 참조). */

/* ── 승민 요청4 r2 — #od_bank_account 커스텀 드롭다운(fp-select). 네이티브 select는 화면에서만
   숨기고 폼 제출·유효성 검사(shop/orderform.php f.od_bank_account)는 그대로 원본이 담당한다.
   스펙은 디자인시스템 form-controls 셀렉트 규칙(높이 48px, 그림자 0 8px 24px rgba(0,0,0,.10),
   반경 12px, 옵션 높이 42px, 옵션 호버 surface-soft, 선택 옵션 primary텍스트+✓, z-index 200)을
   그대로 따른다. ── */
.fp-select {
    position: relative;
}
/* #settle_bank .input-box는 라벨 86px + 나머지를 flex로 나눈다(레거시 select 레이아웃과 동일 폭
   유지 — style.css:5202 .input-box{display:flex}). 원본 select 대신 이 래퍼가 두 번째 flex
   자식이 되므로 같은 계산식을 넘겨받는다. */
.ordersheet_payment #settle_bank .input-box .fp-select {
    width: calc(100% - 86px);
}
.fp-select_native {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0 !important;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0 !important;
}
.fp-select_trigger {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid var(--fp-hairline, #d6d6d6);
    border-radius: 5px;
    background: var(--fp-canvas, #fff);
    color: var(--fp-ink, #0c0c0c);
    font-size: 16px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 150ms ease;
}
.fp-select_trigger:hover {
    border-color: var(--main-btn-point-color);
}
.fp-select_trigger:focus-visible {
    outline: 2px solid var(--main-btn-point-color);
    outline-offset: 2px;
}
.fp-select.is-open .fp-select_trigger {
    border-color: var(--main-btn-point-color);
}
.fp-select_value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-select_value--placeholder {
    color: var(--fp-muted-soft, #9aa0a8);
}
.fp-select_chevron {
    flex: 0 0 auto;
    color: var(--fp-muted, #7c828a);
    transition: transform 150ms ease;
}
.fp-select.is-open .fp-select_chevron {
    transform: rotate(180deg);
}
.fp-select_list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 200;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--fp-canvas, #fff);
    border: 1px solid var(--fp-hairline, #e4e6ea);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
}
.fp-select_option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--fp-ink, #1b1b1b);
    cursor: pointer;
    outline: none;
}
.fp-select_option:hover,
.fp-select_option:focus-visible {
    background: var(--fp-surface-soft, #f5f8ff);
}
.fp-select_option_text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-select_option_check {
    flex: 0 0 auto;
    display: flex;
    color: var(--main-btn-point-color);
    opacity: 0;
}
.fp-select_option.is-selected {
    color: var(--main-btn-point-color);
    font-weight: 600;
}
.fp-select_option.is-selected .fp-select_option_check {
    opacity: 1;
}
@media (max-width: 991px) {
    .ordersheet_payment #settle_bank .input-box .fp-select {
        width: 100%;
        margin-top: 10px;
    }
    .fp-select_trigger {
        height: 46px;
        font-size: 15px;
    }
}
@media (max-width: 480px) {
    .fp-select_trigger {
        height: 40px;
        font-size: 14px;
        border-radius: 2.5px;
    }
}