*{font-family: 'pretendard', sans-serif;box-sizing: border-box;}
body{font-family: 'pretendard', sans-serif;}



/* 기록 사용권 구매 */
.goods2-wrap{background: #F5F6F8;padding-top: 70px;padding-bottom: 70px;}
.goods2-tit{margin-bottom: 24px;text-align: center;}
.goods2-tit h2{font-size: 28px;font-weight: 600;}
.goods2-container{max-width: 1440px;margin: 0 auto;width: 100%;}
.goods2-li{display: grid;justify-content: space-between;grid-template-columns: repeat(5,1fr);gap: 10px;margin-bottom: 50px;}
.goods2-item{border-radius: 12px;border: 1px solid #E9E9E9;background: #fff;overflow: hidden;}
.goods2-img{height: 172px;width: 100%;}
.goods2-img img{width: 100%;height: 100%;object-fit: cover;}
.goods2-cont-wrap{min-height: 330px;display: flex;flex-direction: column;justify-content: space-between;}
.goods2-cont{}
.goods2-top{padding: 20px 18px;}
.goods2-top .goods2-name{margin-bottom: 6px;font-weight: 600;font-size: 18px;}
.goods2-price{color: #F01850;font-weight: 600;margin-bottom: 6px;font-size: 18px;}
.goods2-price span{font-size: 12px;color: #666;font-weight: 400;}
.goods2-limit{font-size: 13px;color: #444;}
.goods2-item .line-deco2{border-bottom: 1px solid #b3b3b3;margin: 0 18px;}
.goods2-info{padding: 20px 18px;}
.goods2-info p{margin-bottom: 10px;font-size: 14px;color: #444;line-height: 1.4;}
.goods2-info i{color: #F01850;margin-right: 4px;}
.goods2-btm{text-align: center;width: 100%;padding-bottom: 20px}
.goods2-btn{display:inline-flex;align-items: center;justify-content: center;border: 1px solid #F01850;color: #F01850;font-size: 14px;font-weight: 600;height: 40px;max-width: 200px;width:100%;border-radius: 50px;text-decoration: none;}


/* 결제하기 */
.pay2-wrap{background: #F5F6F8;padding-top: 70px;padding-bottom: 70px;}
.pay2-container{max-width: 860px;margin: 0 auto;width: 100%;background: #fff;padding: 24px 32px 32px 32px;border-radius: 7px;}
.new-form{margin-bottom: 30px;}

@media (hover:hover){
.goods2-btn:hover{background-color: #fff8fa;}
.modal-btn:hover {
    background-color: #f33c6d;
}
}


/* 반응형 */
@media screen and (max-width:1440px){
    .goods2-container{padding-left: 18px;padding-right: 18px;}
    .goods2-li{grid-template-columns: repeat(3,1fr);}
    .goods2-img{height: 280px;}
}
@media screen and (max-width:1024px){
    .goods2-img{height: 180px;}
}
@media screen and (max-width:768px){
    .goods2-li{grid-template-columns: repeat(2,1fr);}
    .final-price-row{flex-wrap: wrap;}
    .final-price-row:last-child{width: 100%;}
    .final-price-row:last-child p{margin-bottom: 8px;font-size: 17px;width: 100%;}
    .input-tpye-new{width: 90%;}
    .new-form-cont-item{flex-wrap: wrap;}
    .new-form-cont-item .item-tit{margin-bottom: 6px;width: 100%;}
}
@media screen and (max-width:475px){
    .goods2-li{grid-template-columns: repeat(1,1fr);gap: 30px;}
    .goods2-img{height: 200px;}
}

/* 주문 상품 정보 */
.new-form-cont-tit {
    padding: 16px 0;
    border-bottom: 1px solid #272727;
    margin-bottom: 16px;
}

.new-form-cont-tit h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.new-form-cont-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}


.new-form-cont-item {
    display: flex;
    align-items: center;
    width: 100%;
}
.new-form-cont-item.between{justify-content: space-between;}
.new-form-cont-item.between .item-cont{flex-grow: 0;}

.new-form-cont-item .item-tit {
    width: 120px; /* Adjust as needed */
    font-size: 15px;
    color: #555;
    font-weight: 500;
}

.new-form-cont-item .item-cont {
    flex-grow: 1;
    font-size: 15px;
    color: #333;
}

.item-cont.count-input {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.item-cont.count-input:focus-within {
    border-color: #333;
    box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1);
}

.item-cont.count-input input[type="button"] {
    width: 36px;
    height: 36px;
    border: none;
    background-color: #f5f5f5;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.item-cont.count-input input[type="button"]:hover {
    background-color: #eee;
}

.item-cont.count-input input[type="number"] {
    width: 60px;
    height: 36px;
    border: none;
    text-align: center;
    font-size: 15px;
    -moz-appearance: textfield;
    background-color: #fff;
}

/* Hide default number input arrows in Chrome, Safari, Edge */
.item-cont.count-input input[type="number"]::-webkit-outer-spin-button,
.item-cont.count-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.item-cont.count-input .unit {
    margin-left: 8px;
    font-size: 15px;
    color: #555;
}

.order-price {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 600;
    border-top: 2px solid #333;
    margin-top: 16px;
}

.order-price .price {
    color: #F01850;
}

/* 주문자 정보 */
.new-form input[type="text"],
.new-form input[type="tel"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
}

.new-form input[type="text"]:focus,
.new-form input[type="tel"]:focus {
    border-color: #333;
    outline: none;
    box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1);
}

.new-form input[type="text"].error,
.new-form input[type="tel"].error {
    border-color: #ff3b30;
    background-color: #fff8f8;
}

.phone-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-input input[type="tel"] {
    width: 80px;
    text-align: center;
}

.address-input input[type="text"] {
    margin-bottom: 12px;
}

.postcode-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.postcode-search input[type="text"] {
    flex-grow: 1;
    margin-bottom: 0;
}

.address-input button {
    width: 200PX;
    padding: 12px 20px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    transition: all 0.2s ease;
}

.address-input button:hover {
    background-color: #eee;
}

.error-message {
    display: none;
    color: #ff3b30;
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 6PX;
    padding-left: 4px;
}

.error-message.show {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 최종 결제 금액 */
.final-price-info {
    margin-top: 40px;
    background-color: #f9f9f9;
    padding: 24px;
    border-radius: 8px;
}

.final-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 16px;
    color: #333;
}

.final-price-row:last-child {
    border-top: 1px solid #eee;
    margin-top: 12px;
    padding-top: 16px;
    font-size: 20px;
    font-weight: 600;
}

.final-price-row .price {
    color: #F01850;
}

/* 동의 섹션 */
.agreement-section {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.agreement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: all 0.2s ease;
}

.agreement-item:hover {
    background-color: #f9f9f9;
}

.agreement-item p {
    font-weight: 600;
}

.agreement-item i {
    color: #999;
    transition: transform 0.2s ease;
}

.agreement-item.active i {
    transform: rotate(180deg);
}

.agreement-content {
    display: none;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
}

.agreement-content p {
    white-space: pre-line;
    line-height: 1.6;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.agreement-checkbox {
    margin-top: 24px;
    font-size: 15px;
    color: #333;
    display: flex;
    align-items: center;
}

.agreement-checkbox input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 결제하기 버튼 */
.payment-button {
    margin-top: 40px;
    text-align: center;
}

.payment-button button {
    padding: 16px 32px;
    background-color: #333;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    max-width: 320px;
    transition: all 0.2s ease;
}

@media (hover:hover) {
    .payment-button button:hover {
        background-color: #000;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.input-tpye-new {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    text-align: right;
    background-color: #fff;
}

/* 모달 팝업 스타일 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 340px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: modalFadeIn 0.3s ease-out;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
}

.close-modal {
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: #333;
}

.modal-body {
    padding: 30px 20px;
    text-align: center;
}
.modal-body h4{font-size: 17px;font-weight: 700;margin-bottom: 8px;letter-spacing: -0.03em;line-height: 1.3;}
.modal-body p {
    margin: 4px 0;
    color: #666;
}
.modal-body span{font-size: 14px;color: #666;padding-top: 8px;display: block;}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

.modal-btn {
    width: 100%;
    background-color: #F01850;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}



@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}