수정완료

kr/assets/css/order.css

@@ -933,27 +933,32 @@
   overflow: hidden;
   color: #9ea1a2;
 }
-@media (max-width: 768px) {
-  .contentWarp .cartView .counponList li.noList {
-    height: 10rem;
-  }
-}
 .contentWarp .cartView .counponList .coupon-active {
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   overflow: hidden;
-  height: 8rem;
+  min-height: 8rem;
   width: 100%;
-  padding: 2rem;
+  padding: 2rem 4rem 2rem 2rem;
   font-size: 1.6rem;
   color: #000;
   border: 1px solid #dedede;
   border-radius: 0.6rem;
+  text-align: left;
+}
+@media (min-width: 768px) {
+  .contentWarp .cartView .counponList .coupon-active {
+    padding: 2rem 4rem 2rem 3rem;
+  }
 }
 .contentWarp .cartView .counponList .coupon-active:after {
   content: "";
   display: block;
+  position: absolute;
+  top: 50%;
+  right: 2rem;
+  transform: translateY(-50%);
   width: 1rem;
   height: 2rem;
   background: url(../images/common/icon-bgo.svg) no-repeat center/100% auto;
@@ -1052,33 +1057,62 @@
 .couponPopup .coupon-list .coupon-item:focus {
   outline: none;
 }
+@media (min-width: 768px) {
+  .couponPopup .coupon-list .coupon-item.coupon-none {
+    height: 8rem;
+  }
+}
+@media (min-width: 768px) {
+  .couponPopup .coupon-list .coupon-item.coupon-none .coupon-label {
+    display: flex;
+    align-items: center;
+    padding: 1.6rem 3rem;
+  }
+}
 .couponPopup .coupon-list .coupon-item .coupon-label {
   flex: 1;
   padding: 1.6rem;
   line-height: 1.4;
 }
+@media (min-width: 768px) {
+  .couponPopup .coupon-list .coupon-item .coupon-label {
+    padding: 4rem 3rem;
+  }
+}
 .couponPopup .coupon-list .coupon-item .coupon-label strong {
   display: block;
   font-size: 1.6rem;
   font-weight: 600;
   color: #000;
-  margin-bottom: 0.4rem;
+}
+@media (min-width: 768px) {
+  .couponPopup .coupon-list .coupon-item .coupon-label strong {
+    font-size: 1.8rem;
+    line-height: 1.35;
+  }
 }
 .couponPopup .coupon-list .coupon-item .coupon-label small {
   display: block;
+  margin-top: 0.4rem;
   padding-left: 6.6rem;
   text-indent: -6.6rem;
   font-size: 1.4rem;
   font-weight: 400;
   color: #676767;
 }
+@media (min-width: 768px) {
+  .couponPopup .coupon-list .coupon-item .coupon-label small {
+    margin-top: 1rem;
+    line-height: 1.6;
+  }
+}
 .couponPopup .coupon-list .coupon-item .coupon-label span {
   display: inline-block;
 }
 .couponPopup .coupon-list .coupon-item .coupon-label .error-text {
   display: block;
   font-size: 1.4rem;
-  color: #ea0029;
+  color: #EA0029;
 }
 .couponPopup .coupon-list .coupon-item .icon-check {
   display: flex;
@@ -1089,13 +1123,22 @@
 }
 @media (min-width: 768px) {
   .couponPopup .popInner {
-    max-width: 50rem;
+    max-width: 76rem;
   }
 }
 .couponPopup .popInner .towButton {
   margin-top: 3rem;
   gap: 1rem;
 }
+@media (min-width: 768px) {
+  .couponPopup .popInner .towButton {
+    justify-content: center;
+  }
+  .couponPopup .popInner .towButton > a {
+    width: 18rem;
+    margin: 0;
+  }
+}
 
 .contentWarp.carsw {
   display: flex;

kr/assets/js/common.js

@@ -1388,4 +1388,7 @@ function pdpDisplayZoom(selector) {
 
 function btnActive(selector) {
   $(selector).removeClass("active").addClass("active");
+  const selectedValue = $('.coupon-list input[type="radio"]:checked');
+  const selectedText = selectedValue.next(".coupon-item").find("strong").text();
+  $(".coupon-active strong").text(selectedText);
 }

kr/order/order-display-theme.html

@@ -472,7 +472,7 @@
           <ul class="coupon-list">
             <li>
               <input type="radio" id="couponNone" name="coupon" value="none" checked />
-              <label class="coupon-item" for="couponNone">
+              <label class="coupon-item coupon-none" for="couponNone">
                 <span class="coupon-label"><strong>쿠폰 적용 하지 않음</strong></span>
                 <span class="icon icon-check"></span>
               </label>
@@ -498,12 +498,22 @@
                 <span class="icon icon-check"></span>
               </label>
             </li>
+            <li>
+              <input type="radio" id="coupon4" name="coupon" value="event-nba" />
+              <label class="coupon-item" for="coupon4">
+                <span class="coupon-label">
+                  <strong>디즈니 테마 오픈 이벤트 쿠폰 <span>(20% 할인)</span></strong>
+                  <small>2025-08-01 ~ 2025-08-31</small>
+                </span>
+                <span class="icon icon-check"></span>
+              </label>
+            </li>
           </ul>
 
           <div class="carswBtn">
             <div class="towButton">
-              <a href="javascript:;" class="cartBtn leftBtn" onClick="close_layer_popup('coupon_popup')"><p>취소</p></a>
-              <a href="javascript:;" onClick="btnActive('.coupon-active');close_layer_popup('coupon_popup')" class="PurchaseBtn rightBtn"><p>확인</p></a>
+              <a href="javascript:;" class="leftBtn" onClick="close_layer_popup('coupon_popup')"><p>취소</p></a>
+              <a href="javascript:;" onClick="btnActive('.coupon-active');close_layer_popup('coupon_popup')" class="rightBtn"><p>확인</p></a>
             </div>
           </div>
         </div>