.section-recent .card-recent {

    display: flex;

    height: 211px;

    /*padding: 40px 17px 0 17px;*/

    transform: translateY(12px);

    background: #fff;

    opacity: 0;

    gap: 20px;

    flex: 1;

    border-radius: 15px;

    will-change: opacity, transform;

}









/* ========== 다른 개발자 추가 스타일 ========== */

.modal-payment .group-check {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.modal-payment .group-check p {

    font-weight: 500;

}



.modal-payment .button-edit {

    width: 98px;

    height: 44px;

    text-align: center;

    line-height: 42px;

    border: 1px solid #000;

    border-radius: 22px;

}



.modal-payment .box-info {

    margin-top: 10px;

    padding: 20px;

    background: #f7f8fd;

    border-radius: 20px;

}



.modal-payment .box-info li {

    display: flex;

    font-size: 14px;

    line-height: 30px;

}



.modal-payment .box-info .title {

    width: 76px;

    font-weight: 700;

}



.modal-payment .box-info .memo {

    flex-direction: column;

    margin-top: 10px;

}



.modal-payment .box-info .memo .title {

    line-height: 1.6;

}



.modal-payment .box-info .memo .text {

    margin-top: 10px;

}



.modal-payment .ui-button-primary {

    margin: 28px auto 0;

}



/* 모달 - 결제하기 */

.modal-payment {

    width: 720px;

}



.modal-payment .ui-button-close {

    /*top: 40px;*/

}



.modal-payment .modal-title {

    font-size: 24px;

    line-height: 36px;

}



.modal-payment .box-border {

    display: flex;

    flex-direction: column;

    padding: 40px;

    border: 2px solid #1946b9;

    border-radius: 20px;

    gap: 20px;

}

/* box-border 숨김 클래스 */

.modal-payment .box-border.is-hidden {

    display: none !important;

    visibility: hidden !important;

}

/* box-border 표시 클래스 */

.modal-payment .box-border.is-visible {

    display: flex !important;

    visibility: visible !important;

}



.modal-payment .group-total {

    display: flex;

    justify-content: space-between;

    line-height: 29px;

}



.modal-payment .group-total .text {

    font-size: 18px;

}



.modal-payment .group-total .amount {

    font-size: 24px;

    font-weight: 800;

    color: #4280fb;

}



.modal-payment .box-deposit {

    display: flex;

    flex-direction: column;

    padding: 20px;

    background: #f8f8f8;

    gap: 20px;

}



.modal-payment .box-deposit .group-text {

    display: flex;

    justify-content: space-between;

    line-height: 26px;

}



.modal-payment .box-deposit .amount {

    font-weight: 700;

}



.modal-payment .group-input {

    display: flex;

    justify-content: space-between;

    gap: 10px;

}



.modal-payment .box-apply {

    position: relative;

    flex: auto;

}



.modal-payment .box-apply input {

    height: 42px;

    padding-right: 30px;

}



.modal-payment .box-apply input:not(:placeholder-shown) {

    font-weight: 700;

    text-align: right;

    color: #4280fb;

}



.modal-payment .box-apply .won {

    position: absolute;

    top: 0;

    right: 16px;

    font-weight: 700;

    color: #4280fb;

    line-height: 42px;

}



.modal-payment .button-use-all {

    width: 88px;

    height: 42px;

    text-align: center;

    color: #fff;

    line-height: 42px;

    background: #002f87;

    border-radius: 4px;

}



.modal-payment .button-use-all:disabled {

    color: #999;

    background: #dfdfdf;

}



.modal-payment .box-deposit.is-disabled .amount {

    color: #666;

}



.modal-payment .box-apply input:disabled {

    background: #dfdfdf;

}



.modal-payment .box-deposit.is-disabled .box-apply .won {

    color: #999;

}



.modal-payment .ui-primary-buttons {

    margin-top: 20px;

}



.modal-payment .ui-primary-buttons .ui-button-primary {

    width: auto;

    height: 56px;

    font-size: 16px;

    line-height: 56px;

    flex: 1;

    border-radius: 4px;

}



.modal-payment .box-payment {

    margin-top: 40px;

}



.modal-payment .tabs-method {

    display: flex;

    align-items: flex-start;

    width: 100%;

    gap: 10px;

}



.modal-payment .tabs-method li {

    height: 56px;

    border-bottom: 1px solid #000;

    flex: 1;

    box-sizing: content-box;

}



.modal-payment .tabs-method button {

    display: block;

    width: 56px;

    width: 100%;

    font-size: 22px;

    text-align: center;

    color: #4b4b4b;

    line-height: 56px;

}



.modal-payment .tabs-method li.is-active {

    border-bottom: 3px solid #004098;

}



.modal-payment .tabs-method li.is-active button {

    font-weight: 700;

    color: #004098;

}



.modal-payment .group-method {

    margin-top: 30px;

}



.modal-payment .group-method > div {

    display: none;

    flex-direction: column;

    gap: 10px;

}



.modal-payment .group-method > div.is-visible {

    display: flex;

}



.modal-payment .group-method .title {

    margin-bottom: 10px;

    line-height: 1.6;

}



.modal-payment .list-card {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.modal-payment .list-card .ui-label-radio {

    width: 100%;

    height: 66px;

    padding: 0 20px 0 52px;

    line-height: 66px;

    border: 1px solid #f8f8f8;

    background: #f8f8f8;

}



.modal-payment .list-card .ui-label-radio span {

    top: 21px;

    left: 20px;

}



.modal-payment .list-card .ui-label-radio:has(input:checked) {

    border-color: #002f87;

    background: #f7f8fd;

}



.modal-payment .button-add {

    width: 100%;

    height: 56px;

    margin-top: 10px;

    font-size: 16px;

    border-radius: 4px;

}



.modal-payment .list-easy {

    display: flex;

    gap: 5px;

}



.modal-payment .list-easy li {

    flex: 1;

}



.modal-payment .label-radio-easy {

    display: block;

    height: 112px;

    padding: 20px;

    border: 1px solid #f8f8f8;

    background: no-repeat 20px 56px #f8f8f8;

    background-size: auto 36px;

    cursor: pointer;

}



.modal-payment .label-radio-easy input[type="radio"] {

    display: none;

}



.modal-payment .label-radio-easy p {

    color: #333;

    line-height: 1.6;

}



.modal-payment .label-radio-easy.kakao {

    background-image: url("../images/icon_kakao_pay.png");

}



.modal-payment .label-radio-easy.naver {

    background-image: url("../images/icon_naver_pay.png");

}



.modal-payment .label-radio-easy.toss {

    background-image: url("../images/icon_toss_pay.png");

}



.modal-payment .label-radio-easy:has(input:checked) {

    border-color: #002f87;

    background-color: #f7f8fd;

}



.modal-payment .box-bank .text {

    padding: 20px;

    color: #333;

    line-height: 1.6;

    background: #f8f8f8;

}



.modal-payment .box-total {

    display: flex;

    justify-content: space-between;

    margin-top: 40px;

    padding: 20px 40px;

    line-height: 29px;

    border: 2px solid #d72828;

    border-radius: 20px;

}



.modal-payment .box-total .text {

    font-size: 18px;

}



.modal-payment .box-total .amount {

    font-size: 24px;

    font-weight: 800;

    color: #4280fb;

}



.modal-payment .ui-primary-buttons {

    margin-top: 20px;

}



.modal-payment .ui-primary-buttons .ui-button-primary {

    width: auto;

    height: 56px;

    font-size: 16px;

    line-height: 56px;

    flex: 1;

    border-radius: 4px;

}








/* 모달 로딩 스피너 */

.modal-loading {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 11000; /* 일반 모달보다 위에 보이도록 */

    pointer-events: none; /* 클릭 막지 않게, 필요시 제거 */

}



.modal-loading-spinner {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 4px solid #e0e0e0;

    border-top-color: #1946b9;

    animation: modal-loading-spin 0.8s linear infinite;

}



@keyframes modal-loading-spin {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



/* 모달 내부용 로딩 스피너 (재처방/바로처방 처방하기 클릭 시) */

.modal-prescription .modal-loading-inline {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(255, 255, 255, 0.6);

    z-index: 5;

}






/* 모달 - 재처방, 바로처방 */

.modal-prescription {

    width: 720px;

}



.modal-prescription .box-date {

    padding: 20px;

    line-height: 24px;

    background: #f7f8fd;

    border-radius: 20px;

}



.modal-prescription .box-border {

    display: flex;

    flex-direction: column;

    margin-top: 20px;

    padding: 40px;

    border: 2px solid #1946b9;

    border-radius: 20px;

    gap: 20px;

}
.modal-prescription .box-border .list-represcribe {
    max-height: 400px;
    overflow: hidden;
    overflow-y: auto;
}
.modal-prescription .list-represcribe li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 0;

    border-bottom: 1px solid #dfdfdf;

    gap: 20px;

}



.modal-prescription .list-represcribe .image {

    width: 90px;

    height: 90px;

}



.modal-prescription .list-represcribe .image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.modal-prescription .list-represcribe .group-text {

    display: flex;

    justify-content: space-between;

    flex-direction: column;

    margin-right: auto;

    line-height: 1.6;

}



.modal-prescription .list-represcribe .title {

    font-weight: 700;

}



.modal-prescription .list-represcribe .text {

    font-size: 14px;

    color: #666;

}



.modal-prescription .list-represcribe .price {

    font-size: 14px;

    font-weight: 700;

    color: #666;

}



.modal-prescription .list-represcribe .group-value {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.modal-prescription .group-stepper {

    display: flex;

    align-items: center;

    gap: 10px;

}



.modal-prescription .box-stepper {

    display: flex;

    align-items: center;

    width: 97px;

    height: 36px;

    text-align: center;

    border: 1px solid #dfdfdf;

    border-radius: 4px;

}



.modal-prescription .box-stepper > * {

    flex: 1;

}



.modal-prescription .box-stepper button svg {

    width: 20px;

    height: 20px;

    margin: 0 auto;

}



.modal-prescription .box-stepper .button-minus {

    color: #999;

}



.modal-prescription .list-represcribe .total {

    font-weight: 700;

    text-align: right;

    color: #666;

    line-height: 1.6;

}



.modal-prescription .box-agree {

    display: flex;

    align-items: center;

    padding: 20px 40px;

    border: 1px solid #d72828;

    border-radius: 20px;

    gap: 8px;

}



.modal-prescription .box-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-weight: 700;

}



.modal-prescription .box-total .text {

    font-size: 18px;

    line-height: 28px;

}



.modal-prescription .box-total .amount {

    font-size: 20px;

    line-height: 36px;

}



.modal-prescription .ui-primary-buttons {

    margin-top: 30px;

}



.modal-prescription .ui-primary-buttons .ui-button-primary {

    /*width: auto;

    height: 56px;

    font-size: 16px;

    line-height: 56px;

    flex: 1;

    border-radius: 4px;*/

}

.modal-prescription .box-stepper {

    display: flex;

    align-items: center;

    width: 97px;

    height: 36px;

    text-align: center;

    border: 1px solid #dfdfdf;

    border-radius: 4px;

}



.modal-prescription .box-stepper > * {

    flex: 1;

}



.modal-prescription .box-stepper button svg {

    width: 20px;

    height: 20px;

    margin: 0 auto;

}



.modal-prescription .box-stepper .button-minus {

    color: #999;

}


.box-row .box-stepper {

    display: flex;

    align-items: center;

    width: 170px;

    height: 56px;

    text-align: center;

    border: 1px solid #dfdfdf;

    border-radius: 4px;

    background: #fff;

    overflow: hidden;

}



.box-row .box-stepper button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 100%;

    padding: 0;

    border: none;

    background: transparent;

    cursor: pointer;

    transition: background-color 0.2s;

}



.box-row .box-stepper button:hover {

    background-color: #f5f5f5;

}



.box-row .box-stepper button:active {

    background-color: #e8e8e8;

}



.box-row .box-stepper button svg {

    width: 20px;

    height: 20px;

    margin: 0 auto;

}



.box-row .box-stepper .button-minus {

    color: #999;

    border-right: 1px solid #dfdfdf;

}



.box-row .box-stepper .button-plus {

    color: #1946b9;

    border-left: 1px solid #dfdfdf;

}



.box-row .box-stepper input {

    flex: 1;

    height: 100%;

    padding: 0 16px;

    border: none;

    background: transparent;

    text-align: center;

    font-size: 16px;

    color: #333;

    outline: none;

}



.box-row .box-stepper input:focus {

    background-color: #fafafa;

}


/*20250110 추가*/
.modal-payment .box-border {padding:20px;}
.modal-payment .group-total .amount {
    font-size: 20px;
}
.modal-payment .box-deposit .group-text {font-size: 16px;
    line-height:20px;
}
.modal-payment .box-deposit .amount {font-size: 16px;
}
.modal-payment .button-use-all {
    width:100px;
}
.modal-payment .tabs-method button {font-size: 18px;line-height:50px;}
.modal-payment .group-input {
    gap: 6px;
}
.modal-payment .group-method .title {font-size: 16px;
}
.modal-payment .box-bank .text {
font-size: 16px;
}
.modal-payment .box-total {
    padding:20px;
}
.modal-payment .box-total .text {
    font-size:15px;
}
.modal-payment .box-total .amount {
    font-size:20px;
}


@media screen and (max-width:768px){
  .modal-prescription .box-border {padding:20px 10px;}
  .modal-prescription .list-represcribe li {justify-content: flex-start;}
  .modal-prescription .list-represcribe .image {width:50px;height:50px;}
  .modal-prescription .list-represcribe .title {font-size: 13px}
  .modal-prescription .list-represcribe .group-text {width: 54%;}
  .modal-prescription .box-agree {padding:15px 10px;}
  .modal-prescription {max-height: 95%;overflow: hidden;overflow-y: auto;}
}
@media screen and (max-width:1023px){
  .modal-prescription .list-represcribe li {flex-wrap: wrap;gap:10px;}
  .modal-prescription .list-represcribe .group-value {width: 100%;}
  .modal-prescription .group-stepper {justify-content: flex-end;}
  .modal-prescription .ui-primary-buttons {margin-top: 20px;padding:10px 0}
  .modal-payment .ui-button-primary {width: 100%;}
}

















.modal-prescription .list-represcribe .text.order-text-input {
    width: 150px;
    height: 30px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
    font-family: inherit;
    background-color: #fff;
    box-sizing: border-box;
}

.modal-prescription .list-represcribe .text.order-text-input:focus {
    outline: none;
    border-color: #002F87;
    box-shadow: 0 0 0 2px rgba(0, 47, 135, 0.1);
}



@media (max-width: 1023px) {
    /* 페이징: 스크롤 없이 줄바꿈(여러 줄), 숫자 간 간격은 공통 gap(12px) 유지 */
    .section-mypage.prescription-check .ui-list-pagination {
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 4px 0 10px;
        box-sizing: border-box;
    }

    .section-mypage.prescription-check .ui-list-pagination > li {
        flex-shrink: 0;
    }
}


@media (min-width: 1024px) and (max-width: 1910px) {
    /* 조제의뢰 + 의뢰취소: 모바일 그리드에서 단일 셀로 묶어 ::after 레이어에 가려지지 않게 함 */
    .section-mypage.prescription-check .ui-table .status-cell-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
}