@charset "utf-8";

/* 공통 */
.mt30 {margin-top:calc(var(--fs-20) * 3 / 2);}
.input-multi {gap:var(--fs-20);}
#container > section {overflow:unset;}

.template-info {display:flex; align-items:center; column-gap:calc(var(--fs-20) + var(--fs-16));}
.template-info .thumb-wrap {flex-shrink:0; overflow:hidden; width:154px; height:auto; aspect-ratio:154 / 170; border-radius:8px;}
.template-info .project-info {display:flex; flex-direction:column;}
.template-info .project-info .sub-tit {margin-bottom:8px; font-size:var(--fs-20); font-weight:500; color:var(--grayscale8);}
.template-info .project-info .body-txt {color:var(--grayscale7);}
.template-info .project-info .body-txt + .body-txt {margin-top:20px;}

/* 결제페이지 */
.payment-section {padding:100px 0 120px;}
.payment-wrap {display:flex; align-items:flex-start; justify-content:space-between; gap:45px;}
.payment-content {width:72%; max-width:900px;}
.payment-tit-wrap {margin-bottom:70px;}
.payment-tit-wrap .sub-txt {margin-top:12px;}
.payment-block + .payment-block {margin-top:80px;}
.payment-block .sub-tit {margin-bottom:var(--fs-20); font-size:var(--fs-24);}

.project-box {display:flex; align-items:center; gap:calc(var(--fs-20) * 5 / 2); padding:var(--fs-20); border:1px solid var(--grayscale3); border-radius:8px; background:var(--color-white);}
.project-box .service-info {flex:1; padding-left:40px; border-left:1px solid var(--grayscale3);}
.project-box .service-info ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:12px 10px; margin-top:12px;}
.project-box .service-info li {position:relative; padding-left:22px; color:var(--grayscale8);}
.project-box .service-info li::before {content:'✓'; position:absolute; left:0; top:0; color:var(--color-main);}

.agree-box {padding:var(--fs-20); border:1px solid var(--grayscale3); border-radius:12px;}
.agree-box .agree-all {padding-bottom:var(--fs-20); border-bottom:1px solid var(--grayscale3);}
.agree-box ul {display:flex; flex-direction:column; row-gap:var(--fs-24); padding-top:var(--fs-20);}
.agree-box li {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.agree-box li a {font-size:var(--fs-18); color:var(--grayscale7);}

.order-summary {position:sticky; top:100px; flex-shrink:0; width:calc(28% - 45px); max-width:317px; padding:var(--fs-24); border:1px solid var(--grayscale3); border-radius:12px; background:var(--color-white);}
.summary-product {display:flex; align-items:center; gap:4px; margin-top:var(--fs-20);}
.summary-product img {height:var(--fs-16);}
.summary-product span {font-size:var(--fs-16); line-height:1.5; font-weight:500; color:var(--color-main);}

.discount-list {display:flex; flex-direction:column; row-gap:calc(var(--fs-16) / 2); margin-top:var(--fs-16);}
.discount-list li {position:relative; display:flex; align-items:center; justify-content:space-between; padding-left:26px; font-size:var(--fs-16); color:var(--grayscale8);}
.discount-list li::before {content:''; position:absolute; left:0; top:50%; width:18px; height:18px; border-radius:50%; background:var(--color-main) url(../img/check-ico.svg) no-repeat center center; transform:translateY(-50%);}
.discount-list em {display:flex; align-items:center; column-gap:6px; font-style:normal; font-size:var(--fs-18); font-weight:500; color:var(--color-main);}
.discount-list em del,
.discount-list em i {font-size:var(--fs-14); color:var(--grayscale7);}
.discount-list strong {font-size:var(--fs-18); font-weight:500; color:var(--grayscale8);}

.discount-box {display:flex; justify-content:center; column-gap:6px; margin-top:var(--fs-20); padding:8px; border:1px solid var(--color-main); border-radius:6px; background:var(--color-main-10);}
.discount-box span {font-size:var(--fs-16); font-weight:500; color:var(--grayscale8);}
.discount-box b {font-size:var(--fs-24); font-weight:600; color:var(--color-main);}

.total-box {display:flex; align-items:flex-start; justify-content:space-between; margin-top:var(--fs-24); padding-top:var(--fs-24); border-top:1px solid var(--grayscale3);}
.total-box span {font-size:var(--fs-18); color:var(--grayscale9);}
.total-box .price-wrap {display:flex; flex-direction:column; align-items:flex-end;}
.total-box em {display:flex; align-items:center; column-gap:6px; font-style:normal; font-size:var(--fs-14); color:var(--grayscale7);}
.total-box strong {display:block; text-align:right; font-size:var(--fs-32); font-weight:600; color:var(--color-main);}

.month-price {margin:var(--fs-24) 0; padding-top:var(--fs-24); border-top:1px solid var(--grayscale3);}
.month-price > div {display:flex; align-items:center; justify-content:space-between;}
.month-price > span {font-size:var(--fs-18); color:var(--grayscale9);}
.month-price > span em {font-style:normal; font-size:var(--fs-14); color:var(--grayscale7);}
.month-price strong {font-size:var(--fs-18); font-weight:500; color:var(--color-main);}
.month-price p {word-break:normal; margin-top:8px; font-size:var(--fs-14); color:var(--grayscale6);}

/* 결제완료페이지 */
.payment-complete-section {padding:120px 0 160px;}
.complete-head {text-align:center; align-items:center;}
.complete-ico {display:flex; align-items:center; justify-content:center; width:70px; height:70px; margin:6px; border-radius:50%; background:var(--color-main);}
.complete-ico img {width:28px;}
.complete-head .section-tit {color:var(--grayscale11);}
.complete-head .sub-txt {font-size:var(--fs-18); color:var(--grayscale8);}
.complete-head .sub-txt b {font-weight:500; color:var(--grayscale9);}

.complete-detail-wrap {display:flex; align-items:stretch; gap:30px; width:100%; max-width:1060px; margin-inline:auto;}
.complete-block {width:calc(50% - 15px);}
.complete-block h3.sub-tit {height:calc(var(--fs-18) * 2); margin-bottom:var(--fs-16); font-size:var(--fs-24); font-weight:500; color:var(--grayscale9);}
.complete-card {width:100%; height:calc(100% - (var(--fs-18) * 2) - var(--fs-16)); padding:30px; border:1px solid var(--grayscale3); border-radius:12px; background:var(--color-white);}

.complete-info-list,
.complete-payment-list {display:flex; flex-direction:column;}

.complete-info-list {row-gap:var(--fs-18); padding-top:var(--fs-24);}
.complete-payment-list {row-gap:18px;}
.complete-info-list li,
.complete-payment-list li {display:flex; align-items:center; justify-content:space-between; gap:20px;}

.complete-info-list span,
.complete-payment-list span {font-size:var(--fs-16); color:var(--grayscale7);}

.complete-info-list span {flex-shrink:0;}
.complete-info-list em {font-style:normal; text-align:right; font-size:var(--fs-18); color:var(--grayscale8);}
.complete-info-list em.success {color:var(--color-green);}
.complete-payment-list strong {font-size:var(--fs-18); font-weight:500; color:var(--color-main);}
.complete-payment-list .price strong {font-size:var(--fs-24); font-weight:500;}

.complete-info-list.payment {padding-top:var(--fs-24); margin-top:var(--fs-24); border-top:1px solid var(--grayscale3);}
.complete-notice {margin-top:18px; font-size:var(--fs-14); color:var(--grayscale6);}
.complete-btn-wrap {display:flex; justify-content:center; margin-top:80px;}
.complete-btn-wrap .line-btn {display:flex; align-items:center; justify-content:center; min-width:170px; border:1px solid var(--color-main); border-radius:8px; color:var(--color-main); background:var(--color-white);}

/* 반응형 */
@media screen and (max-width:1280px) {
    .template-info {column-gap:var(--fs-24);}
    .payment-wrap {gap:30px;}
    .payment-content {width:70%;}
    .order-summary {width:calc(30% - 30px);}
    .project-box {gap:var(--fs-24);}
    .project-box .service-info {padding-left:var(--fs-24);}
}

@media screen and (max-width:1024px) {
    .payment-wrap {flex-direction:column; gap:60px;}
    .payment-content,
    .order-summary {width:100%; max-width:unset;}
    .payment-block + .payment-block {margin-top:60px;}
    .month-price p {word-break:keep-all;}

    .payment-complete-section {padding:100px 0 130px;}
    .complete-detail-wrap {flex-direction:column; gap:60px;}
    .complete-block {width:100%;}
    .complete-card {padding:28px;}
}

@media screen and (max-width:768px) {
    .template-info {width:100%;}

    .payment-section {padding:70px 0 90px;}
    .payment-tit-wrap {margin-bottom:50px;}
    .payment-wrap {gap:40px;}
    .payment-block + .payment-block {margin-top:40px;}
    .project-box {flex-direction:column; align-items:flex-start;}
    .project-box .service-info {width:100%; padding-left:0; padding-top:var(--fs-24); border-left:0; border-top:1px solid var(--grayscale3);}

    .payment-complete-section {padding:70px 0 100px;}
    .complete-ico {width:60px; height:60px; margin-bottom:24px;}
    .complete-ico img {width:24px;}
    .complete-detail-wrap {gap:40px;}
    .complete-btn-wrap {margin-top:50px;}
}

@media screen and (max-width:480px) {
    .template-info .thumb-wrap {width:100px;}
    .template-info .project-info {width:calc(100% - 130px);}

    .payment-section {padding:50px 0 70px;}
    .project-box .service-info ul {grid-template-columns:1fr;}
    .agree-box li {align-items:flex-start; gap:12px; row-gap:6px;}
    .agree-box li a {flex-shrink:0;}

    .payment-complete-section {padding:50px 0 80px;}
    .complete-head .sub-txt br {display:none;}
    .complete-card {padding:24px 20px;}
    .complete-info-list li,
    .complete-payment-list li {align-items:flex-start;}
    .complete-info-list em {word-break:break-all;}
    .complete-btn-wrap .line-btn {width:100%;}
}