@charset "utf-8"; /* ============================================================ 주문 (order_01cart · order_02order · order_03payment · order_04complete) ------------------------------------------------------------ 2.0_cart.css + 2.0_order.css + 2.0_payment.css + 2.0_order_complete.css 네 벌을 한 벌로 합친 것이다. 규칙 본문은 한 줄도 바꾸지 않고 순서만 그대로 이어 붙였다 — ① 장바구니 ② 주문서 ③ 결제 ④ 주문완료. 화면 구분은

의 클래스로 한다(cart·order·payment·complete). 에는 아무것도 붙이지 않는다 — 헤더·푸터를 인클루드로 돌려 쓰기 때문이다. 범위를 좁힌 선택자는 아래 6개뿐이고, 모두 :where() 로 감쌌다. :where() 는 우선순위를 0 더하므로 합치기 전 파일 안의 우선순위 관계가 그대로 남는다. · #contents 네 화면이 값이 다름 → :where(#container.cart) #contents 꼴 · #container 결제/주문완료 배경색이 다름 → #container:where(.payment) 꼴 · .pay_confirm_wrap 주문서는 확인 대화상자(#addrConfirm), · .pay_confirm_box 결제는 진행 안내(#payProgress) — 시트 id 로 갈랐다. 시트가

밖에 있어 #container 로는 못 잡는다. · .sta h1 장바구니·주문서는 글자 제목, 주문완료는 로고 이미지다. 글자 제목만 잡도록 :not(:has(img)) 을 달았다. 카드등록·결제수단 시트의 반응형 계수는 담당자 지시로 주문서 쪽(1.5vw 계열)에 맞췄다. 결제 화면에만 있던 3vw 계열 10개 규칙을 주문서 값으로 바꿨고, 그래서 두 화면이 같은 시트를 같은 크기로 쓴다. .sr-only 는 세 파일에 있었지만 clip 표기만 달라(기능 동일) 그대로 뒀다. ============================================================ */ /* ------------------------------------------------------------ ① 장바구니 — order_01cart.html (옛 2.0_cart.css · #container.cart) ------------------------------------------------------------ */ /* ============================================================ TOUN28-AIX Team | 2.0_cart.css (장바구니) 20260803 최초 작성 · 브랜드 블루 #1b43c8 ※ 미디어쿼리는 파일 하단 일괄 ============================================================ */ /* ============================================================ 쿠폰 변경 시트 (제품상세 2.0_prod_detail.css couponSheet 이식) ============================================================ */ body.popup_open {overflow:hidden;} .buyWrap {display:none; position:fixed; inset:0; z-index:1100; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; background:rgba(17,17,17,.5);} .buyWrap.is_open {display:flex;} .buyWrap .buy_inner {position:relative; width:100%; max-width:460px; max-height:92vh; overflow-y:auto; padding:20px 25px 25px; border-radius:20px; box-sizing:border-box; background:#f4f4f2; transform:translateY(24px); opacity:0; transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .24s ease;} .buyWrap.is_shown .buy_inner {transform:translateY(0); opacity:1;} .buyWrap .pop_handle {position:relative; display:block; width:100%; height:22px; margin:0 0 6px; padding:0; border:0; background:transparent; cursor:grab; touch-action:none;} .buyWrap .pop_handle:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:44px; height:4px; border-radius:2px; background:#d2d2cf;} .buyWrap .pop_handle:active {cursor:grabbing;} #couponSheet {z-index:1200;} .buyWrap .coupon_inner {max-width:460px;} .buyWrap .coupon_top {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:clamp(16px,2.5vw,22px);} .buyWrap .coupon_title {margin:0; color:#1b1b1b; font-size:clamp(18px,2vw,21px); font-weight:700; line-height:1.25;} .buyWrap .coupon_maxtoggle {display:inline-flex; align-items:center; gap:10px; cursor:pointer;} .buyWrap .coupon_maxtoggle_txt {color:#666; font-size:clamp(12px,1.4vw,15px); font-weight:500;} .buyWrap .switch {position:relative; flex:0 0 auto; display:inline-block; width:48px; height:28px;} .buyWrap .switch input {position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;} .buyWrap .switch .switch_track {position:absolute; inset:0; border-radius:999px; background:#d3d6db; transition:background .2s;} .buyWrap .switch .switch_track:before {content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s;} .buyWrap .switch input:checked + .switch_track {background:#1b43c8;} .buyWrap .switch input:checked + .switch_track:before {transform:translateX(20px);} .buyWrap .coupon_tabs {display:flex; gap:0; margin-bottom:clamp(14px,2vw,20px); border-bottom:1px solid #e2e4e8;} .buyWrap .coupon_tab {position:relative; flex:1 1 0; min-width:0; box-sizing:border-box; padding:0 0 15px 0; border:0; background:transparent; color:#999; font-family:inherit; font-size:clamp(13px,1.55vw,15px); font-weight:700; text-align:center; white-space:nowrap; cursor:pointer;} .buyWrap .coupon_tab .coupon_tab_val {margin:0; font-size:.78em; font-style:normal; color:inherit;} .buyWrap .coupon_tab.is_active {color:#1b1b1b;} .buyWrap .coupon_tab.is_active .coupon_tab_val {color:#0b41cd;} .buyWrap .coupon_tab.is_active:after {content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#1b1b1b;} .buyWrap .coupon_panel {max-height:52vh; overflow:hidden auto; -webkit-overflow-scrolling:touch;} .buyWrap .coupon_list {display:flex; flex-direction:column; gap:10px; margin:0; padding:2px; list-style:none;} .buyWrap .coupon_opt {position:relative; display:flex; align-items:flex-start; gap:14px; padding:18px 20px; border:1px solid #ececea; border-radius:8px; background:#f7f7f5; box-sizing:border-box; cursor:pointer;} .buyWrap .coupon_opt.coupon_none {align-items:center; padding:18px 20px;} .buyWrap .coupon_opt.is_selected {border-color:#0b41cd; background:#fff;} .buyWrap .coupon_opt input {position:absolute; width:1px; height:1px; opacity:0;} .buyWrap .coupon_radio {position:relative; flex:0 0 auto; width:20px; height:20px; margin-top:2px; border:2px solid #cfcfcf; border-radius:50%; box-sizing:border-box;} .buyWrap .coupon_none .coupon_radio {margin-top:0;} .buyWrap .coupon_opt input:checked + .coupon_radio {border-color:#1b43c8;} .buyWrap .coupon_opt input:checked + .coupon_radio:after {content:''; display:block; position:absolute; top:50%; left:50%; width:8px; height:8px; margin:0; border-radius:50%; transform:translate(-50%,-50%); background:#1b43c8;} .buyWrap .coupon_body {display:flex; flex-direction:column; gap:4px; min-width:0;} .buyWrap .coupon_amt {color:#0b41cd; font-size:clamp(18px,2.3vw,24px); font-weight:700; line-height:1.1;} .buyWrap .coupon_name {color:#1b1b1b; font-size:clamp(15px,1.6vw,17px); font-weight:600; line-height:1.35;} .buyWrap .coupon_cond {margin-top:3px; color:#666; font-size:clamp(12px,1.4vw,13px); line-height:1.45;} .buyWrap .coupon_date {color:#666; font-size:clamp(12px,1.4vw,14px); line-height:1.45;} .buyWrap .coupon_left {position:absolute; right:20px; bottom:18px; color:#e5484d; font-size:clamp(13px,1.4vw,14px); font-weight:600;} .buyWrap .coupon_btns {display:grid; grid-template-columns:1fr 1.7fr; gap:5px; margin-top:clamp(20px,3vw,28px);} .buyWrap .coupon_btns button {height:clamp(54px,8vw,60px); border-radius:8px; box-sizing:border-box; font-family:inherit; font-size:clamp(14px,1.3vw,17px); font-weight:700; white-space:nowrap; cursor:pointer;} .buyWrap .btn_coupon_cancel {border:1px solid #d7d3cf; background:#fff; color:#222;} .buyWrap .btn_coupon_apply {border:0; background:#1b43c8; color:#fff;} /* 공통 유틸 */ .sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;} .is_hidden {display:none !important;} /* 헤더 타이틀(텍스트) 보정 */ #header.sample_code .inner .sta h1:where(:not(:has(img))) {width:auto; margin:0; color:#1b1b1b; font-size:clamp(16px,4vw,18px); font-weight:700; line-height:1.2;} /* 페이지 배경 / 본문 하단 여백(고정바 확보) */ :where(#container.cart) #contents {background:#f1f2f4; padding-bottom:calc(140px + env(safe-area-inset-bottom));} .cart_wrap {width:100%;} /* 콘텐츠 폭 제한: 배경은 100%,오브젝트는 640px 중앙 정렬 */ .cart_wrap .inner,.cart_bottom .inner {width:100%; max-width:950px; margin:0 auto; padding:0 5%; box-sizing:border-box;} /* 쿠폰 배너 */ .cart_coupon {display:block; padding:clamp(13px,3.5vw,16px) 0; text-decoration:none;} .cart_coupon--get {background:#1b43c8; color:#fff;} .cart_coupon--owned {background:#e9f0ff; color:#1b43c8;} .cart_coupon .inner {display:flex; align-items:center; gap:10px;} .cart_coupon_ico {flex:0 0 auto; display:flex; align-items:center;} .cart_coupon_txt {flex:1 1 auto; font-size:clamp(12px,2.0vw,14px); font-weight:300;} .cart_coupon_txt b {font-weight:700;} .cart_coupon_link {flex:0 0 auto; font-size:clamp(12px,2.0vw,14px); font-weight:700; text-decoration:underline; text-underline-offset:2px;} /* 커스텀 체크박스(공통) */ .cart_check {display:inline-flex; align-items:center; gap:5px; cursor:pointer; position:relative;} .cart_check input {position:absolute; opacity:0; width:0; height:0;} .cart_check_box {flex:0 0 auto; width:22px; height:22px; border:1.5px solid #cfd3da; border-radius:50%; background:#fff; box-sizing:border-box; position:relative; transition:background .15s,border-color .15s;} .cart_check input:checked + .cart_check_box {background:#1b43c8; border-color:#1b43c8;} .cart_check input:checked + .cart_check_box:before {content:''; position:absolute; left:50%; top:50%; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg); box-sizing:border-box;} .cart_check input:focus-visible + .cart_check_box {outline:2px solid #1b43c8; outline-offset:2px;} /* 선택 툴바 */ .cart_toolbar {display:flex; align-items:center; justify-content:space-between; padding:15px 0 10px 0;} .cart_selall_txt {color:#1b1b1b; font-size:clamp(14px,2.0vw,16px); font-weight:700;} .cart_selall_count {color:#999; font-size:clamp(11px,2.8vw,13px); font-weight:400;} .cart_delsel {padding:7px 14px; border:1px solid #e2e4e8; border-radius:8px; background:#fff; color:#666; font-family:inherit; font-size:clamp(11px,2vw,13px); font-weight:600; cursor:pointer;} /* 상품 목록 */ .cart_list {list-style:none; margin:0; padding:0 0 10px 0; display:flex; flex-direction:column; gap:10px;} .cart_item {position:relative; display:flex; align-items:center; gap:clamp(5px,2vw,10px); padding:clamp(12px,2vw,14px); background:#fff; border:1px solid #eef0f2; border-radius:14px;} .cart_item_l {flex:0 0 auto; display:flex; align-items:center; gap:clamp(3px,2.5vw,10px);} .cart_item_r {flex:0 0 auto; align-self:stretch; display:flex; align-items:flex-end; justify-content:center;} .cart_item.is_unchecked {opacity:.55;} .cart_item_chk {align-self:center;} .cart_item_name {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#1b1b1b; font-size:clamp(11px,2vw,15px); font-weight:600; line-height:1.35; text-decoration:none;} .cart_item_del {position:absolute; top:10px; right:12px; width:24px; height:24px; padding:0; border:0; background:transparent; cursor:pointer;} .cart_item_del:before,.cart_item_del:after {content:''; position:absolute; left:11px; top:5px; width:1.6px; height:14px; background:#b9bdc5;} .cart_item_del:before {transform:rotate(45deg);} .cart_item_del:after {transform:rotate(-45deg);} .cart_item .prod_thumb {flex:0 0 auto; width:clamp(60px,15vw,88px); height:clamp(60px,15vw,88px); border-radius:12px; overflow:hidden; background:#eef0f2;} .cart_item .prod_thumb img {width:100%; height:100%; object-fit:cover; display:block;} .cart_item_c {flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px; padding-right:8px;} .cart_item_price {margin:0; display:flex; align-items:center; gap:5px;} .cart_price_rate {color:#999; font-size:clamp(11px,2vw,14px); font-weight:700;} .cart_price_origin {color:#b5b9c0; font-size:clamp(11px,2.0vw,14px); text-decoration:line-through;} .cart_price_sale {margin:2px 0 0; color:#1b1b1b; font-size:clamp(15px,3.5vw,18px); font-weight:700; letter-spacing:-0.5px;} .cart_qty {flex:0 0 auto; display:inline-flex; align-items:center; gap:2px; padding:4px; border-radius:12px; background:#e7e7e4;} .cart_qty_btn {width:34px; height:34px; padding:0; border:0; background:transparent; color:#666; font-size:20px; line-height:1; cursor:pointer;} .cart_qty_btn:disabled {color:#cdcdcd; cursor:default;} .cart_qty_num {width:44px; height:34px; padding:0; border:0; border-radius:8px; background:#fff; color:#1b1b1b; font-family:inherit; font-size:16px; font-weight:600; text-align:center;} .cart_qty_num:focus {outline:0;} /* 빈 장바구니 */ .cart_empty {display:none; padding:clamp(64px,16vw,100px) 20px; text-align:center;} .cart_wrap.is_empty .cart_empty {display:block;} .cart_wrap.is_empty .cart_coupon,.cart_wrap.is_empty .cart_toolbar,.cart_wrap.is_empty .cart_list,.cart_wrap.is_empty .cart_summary,.cart_wrap.is_empty .cart_reco {display:none !important;} .cart_empty_txt {margin:0; color:#8a8f99; font-size:clamp(14px,3.8vw,16px); line-height:1.7;} .cart_empty_btn {display:inline-block; margin-top:22px; padding:12px 30px; border:1px solid #1b43c8; border-radius:10px; background:#fff; color:#1b43c8; font-size:clamp(14px,3.6vw,15px); font-weight:700; text-decoration:none;} /* 결제 예상 금액 */ .cart_summary {margin-top:12px; padding:clamp(18px,5vw,22px) 0; background:#fff;} .cart_sum_total {display:flex; align-items:center; justify-content:space-between; gap:10px;} .cart_summary.is_open .cart_sum_total {padding-bottom:16px; border-bottom:1px solid #eef0f2;} .cart_sum_total_label {color:#1b1b1b; font-size:clamp(14px,2.0vw,16px); font-weight:700;} .cart_sum_meta {display:inline; margin-left:6px; color:#999; font-size:clamp(11px,2.8vw,13px); font-weight:400;} .cart_sum_total_val {color:#1b1b1b; font-size:clamp(16px,3vw,20px); font-weight:700; letter-spacing:-0.5px;} .cart_sum_toggle {display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:transparent; font:inherit; cursor:pointer;} .cart_sum_toggle_ico {position:relative; flex:0 0 auto; width:22px; height:22px; border:1px solid #e2e4e8; border-radius:6px; background:#fff; box-sizing:border-box; transition:transform .2s;} .cart_sum_toggle_ico:before {content:''; position:absolute; left:50%; top:44%; width:6px; height:6px; border-right:2px solid #666; border-bottom:2px solid #666; transform:translate(-50%,-50%) rotate(45deg);} .cart_sum_toggle[aria-expanded="true"] .cart_sum_toggle_ico {transform:rotate(180deg);} .cart_sum_list {margin:10px 0 0; padding:0;} .cart_sum_row {display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:6px 0;} .cart_sum_row dt {color:#666; font-size:clamp(12px,2vw,15px);} .cart_sum_row dd {margin:0; color:#1b1b1b; font-size:clamp(13px,3vw,16px); font-weight:500;} .cart_ship_note {margin-left:6px; color:#1b43c8; font-size:0.9em; font-weight:600;} .cart_ship_note:empty {display:none; margin:0;} .cart_sum_prodc_name,.cart_sum_addc_name {margin-left:10px; color:#1b43c8; font-size:0.9em; font-weight:600;} .cart_sum_prodc_name:empty,.cart_sum_addc_name:empty {display:none;} .cart_mil_note {display:flex; align-items:center; gap:5px; margin:15px 0 0; background:transparent; color:#999; font-size:clamp(11px,2vw,13px); text-align:left;} .cart_summary.is_open .cart_mil_note {padding-top:15px; border-top:1px solid #eef0f2;} .cart_mil_note:before {content:'i'; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border:1px solid #cccfd5; border-radius:6px; color:#a7abb2; font-size:clamp(9px,2vw,11px); font-weight:500; font-style:normal; line-height:1;} /* 다른 고객이 담은 상품 */ .cart_reco {margin-top:10px; padding:clamp(20px,5.5vw,24px) 0; background:#fff;} .cart_reco_title {margin:0 0 14px; padding:0; color:#1b1b1b; font-size:clamp(14px,2.0vw,16px); font-weight:700;} .cart_reco_list {list-style:none; margin:0; padding:0; display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;} .cart_reco_list::-webkit-scrollbar {display:none;} .cart_reco_item {flex:0 0 auto; width:120px;} .cart_reco_thumb {position:relative; width:100%; aspect-ratio:1/1; border-radius:14px; background:#eef0f2; overflow:hidden;} .cart_reco_thumb img {width:100%; height:100%; object-fit:cover; display:block;} .cart_reco_badge {position:absolute; left:5%; top:5%; padding:4px 8px; border-radius:6px; background:#1b43c8; color:#fff; font-size:11px; font-weight:400;} .cart_reco_add {position:absolute; right:5%; bottom:5%; width:25px; height:25px; border:0; border-radius:50%; background:rgba(80,90,110,.55); color:#fff; font-size:18px; line-height:0; cursor:pointer;} .cart_reco_name {margin:10px 0 0; color:#1b1b1b; font-size:clamp(11px,2vw,14px); font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .cart_reco_price {margin:5px 0 0; color:#1b43c8; font-size: clamp(11px,2vw,14px); font-weight:700; line-height:1.0; letter-spacing:-0.5px;} .cart_reco_price b {font-weight:700;} .cart_reco_tag {margin:3px 0 0 0; color:#1b43c8; font-size:clamp(10px,2vw,12px); font-weight:400;} /* 하단 고정: 사은품 + 주문 CTA */ .cart_bottom {position:fixed; left:0; right:0; bottom:0; z-index:1000; background:rgba(255,255,255,0.5); backdrop-filter:blur(10px);} .cart_gift {padding:12px 0 10px;} .cart_gift_txt {margin:0 0 8px; color:#333; font-size:clamp(11px,3vw,14px); font-weight:500;} .cart_gift_txt b {color:#1b43c8; font-weight:800;} .cart_gift_txt .cart_gift_item {color:#1b1b1b;} .cart_gift_info {padding:0 2px; border:0; background:transparent; color:#b9bdc5; font-size:14px; cursor:pointer;} .cart_gift_bar {display:flex; gap:4px;} .cart_gift_seg {flex:1 1 0; height:6px; border-radius:4px; background:#e6e8ec; overflow:hidden;} .cart_gift_fill {display:block; width:0; height:100%; border-radius:4px; background:#1b43c8; transition:width .25s;} .cart_cta_bar {padding:8px 0 calc(12px + env(safe-area-inset-bottom));} .cart_checkout {width:100%; height:clamp(56px,13vw,58px); border:0; border-radius:12px; background:#1b43c8; color:#fff; font-family:inherit; font-size:clamp(14px,3vw,18px); font-weight:700; cursor:pointer;} .cart_bottom.is_disabled .cart_checkout {background:#c4c8cf; cursor:default;} /* 상품 삭제 확인 */ .cart_confirm_wrap {display:none; position:fixed; inset:0; z-index:1300; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; background:rgba(17,17,17,.5);} .cart_confirm_wrap.is_open {display:flex;} .cart_confirm_box {width:100%; max-width:320px; padding:28px 22px 18px; border-radius:16px; box-sizing:border-box; background:#fff; opacity:0; transform:scale(.96); transition:opacity .2s ease, transform .2s ease;} .cart_confirm_wrap.is_shown .cart_confirm_box {opacity:1; transform:scale(1);} .cart_confirm_msg {margin:0; color:#1b1b1b; font-size:clamp(15px,3.8vw,16px); font-weight:600; line-height:1.55; text-align:center;} .cart_confirm_btns {display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px;} .cart_confirm_btns button {height:50px; border-radius:8px; box-sizing:border-box; font-family:inherit; font-size:clamp(14px,3.6vw,16px); font-weight:700; cursor:pointer;} .btn_cart_confirm_cancel {border:1px solid #d2d2cf; background:#fff; color:#555;} .btn_cart_confirm_ok {border:0; background:#1b43c8; color:#fff;} /* ============================================================ Media Queries ============================================================ */ @media (max-width:768px) { .cart_wrap .inner,.cart_bottom .inner {padding:0 15px;} .cart_cta_bar {padding:10px 0 25px;} .cart_item {gap:10px;} .cart_item_l {gap:5px;} .cart_item_c {padding:0; gap:0;} .cart_item_name {font-weight:500;} .cart_price_sale {margin:0;} .cart_item .prod_thumb {border-radius:8px;} .cart_qty {padding:3px; border-radius:8px;} .cart_qty_btn {width:28px; height:28px; font-size:16px;} .cart_qty_num {width:32px; height:28px; font-size:13px; border-radius:6px;} .cart_delsel {padding:7px 10px; font-weight:500; border-radius:4px;} .buyWrap {align-items:flex-end; padding:0;} .buyWrap .buy_inner {max-width:none; max-height:88vh; padding:18px 18px calc(20px + env(safe-area-inset-bottom)); border-radius:20px 20px 0 0; transform:translateY(100%); opacity:1;} .buyWrap.is_shown .buy_inner {transform:translateY(0);} .cart_item_chk {position: absolute; top:50%; transform:translateY(-31px);} .cart_reco_item {width:90px;} .cart_reco_thumb {border-radius:8px;} .cart_reco_list {gap:7px;} .cart_reco_badge {padding:0 5px; font-size:9px;} .buyWrap .coupon_opt {gap:10px;} .cart_sum_row {padding:3px 0;} } /* 비로그인 결제 시트 헤더/게스트 (제품상세 buy_* 이식) */ .buyWrap .buy_pname {margin:0; color:#666; font-size:clamp(13px,3.4vw,16px); font-weight:500; line-height:1.4;} .buyWrap .buy_pname {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .buyWrap .buy_total_qty {flex:0 0 auto; color:#666; font-size:clamp(13px,3.4vw,15px); font-weight:500;} .buyWrap .buy_price_row {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px;} .buyWrap .buy_price {color:#0b41cd; font-size:clamp(24px,6.5vw,32px); font-weight:700; line-height:1.1; letter-spacing:-1px;} .buyWrap.is_guest .buy_price {color:#1b1b1b;} .buyWrap .buy_ship {position:relative; margin:7px 0 0 0; padding-left:10px; color:#999; font-size:clamp(13px,3.2vw,15px); font-weight:500;} .buyWrap .buy_ship:before {content:''; position:absolute; left:0; top:2px; bottom:2px; width:2px; background:#c9c9c6;} .buyWrap .buy_ship .ship_note {color:#999; font-weight:400;} .buyWrap .buy_body {margin:20px 0 0 0;} .buyWrap .buy_foot {margin:14px 0 0; color:#666; font-size:clamp(11px,3vw,14px); font-weight:400; line-height:1.5; text-align:center;} .buyWrap .buy_foot strong {color:#666; font-weight:700;} .buyWrap .buy_npay_wrap {position:relative; padding-top:35px;} .buyWrap .buy_tip {position:absolute; top:4px; left:50%; transform:translateX(-50%); width:fit-content; margin:0; padding:8px 14px; border-radius:18px; background:#3a3f45; color:#fff; font-size:clamp(11px,3vw,14px); font-weight:400; line-height:1; white-space:nowrap; animation:buyTipBob 1.5s ease-in-out infinite;} .buyWrap .buy_tip:after {content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#3a3f45;} @keyframes buyTipBob {0%,100% {transform:translateX(-50%) translateY(0);} 50% {transform:translateX(-50%) translateY(-5px);}} @media (prefers-reduced-motion: reduce) { .buyWrap .buy_tip {animation:none;} } .buyWrap .btn_npay {display:block; width:100%; height:clamp(54px,13vw,62px); padding:0; border:0; border-radius:8px; background:#00de5a url("https://toun28.s3.ap-northeast-2.amazonaws.com/new/btn_npaygr_buy.svg") no-repeat 50% 50% / auto 90%; cursor:pointer;} .buyWrap .btn_buy_benefit {display:flex; align-items:center; justify-content:center; width:100%; height:clamp(54px,13vw,62px); margin-top:10px; border:0; border-radius:8px; background:#1b43c8; color:#fff; font-family:inherit; font-size:clamp(15px,4vw,20px); font-weight:500; cursor:pointer;} /* ------------------------------------------------------------ ② 주문서 — order_02order.html (옛 2.0_order.css · #container.order) ------------------------------------------------------------ */ /* ============================================================ TOUN28-AIX Team | 2.0_order.css (주문서) 20260805 최초 작성 · 브랜드 블루 #1b43c8 ※ 장바구니/제품상세 폰트·색·구조 참고, 미디어쿼리 하단 일괄 ============================================================ */ /* 공통 유틸 */ .sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;} .is_hidden {display:none !important;} /* 헤더 타이틀(텍스트) 보정 */ #header.sample_code .inner .sta h1:where(:not(:has(img))) {width:auto; margin:0; color:#1b1b1b; font-size:clamp(16px,4vw,18px); font-weight:700; line-height:1.2;} /* 페이지 / 콘텐츠 폭 */ :where(#container.order) #contents {background:#f1f2f4; padding-bottom:calc(150px + env(safe-area-inset-bottom));} .order_wrap {width:100%;} .ord_sec .inner, .ord_bottom .inner {width:100%; max-width:640px; margin:0 auto; padding-left:clamp(16px,4.5vw,20px); padding-right:clamp(16px,4.5vw,20px); box-sizing:border-box;} /* 섹션(풀블리드 흰 밴드, 회색 간격) */ .ord_sec {background:#fff;} .ord_sec .inner {padding-top:clamp(18px,4.8vw,22px); padding-bottom:clamp(18px,4.8vw,22px);} /* 커스텀 스위치 */ .switch {position:relative; flex:0 0 auto; display:inline-block; width:44px; height:26px;} .switch input {position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;} .switch_track {position:absolute; inset:0; border-radius:999px; background:#d3d6db; transition:background .2s;} .switch_track:before {content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s;} .switch input:checked + .switch_track {background:#1b43c8;} .switch input:checked + .switch_track:before {transform:translateX(18px);} /* 섹션 헤더(접기/펼치기) 공통 화살표 */ .ord_sec_head {display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:0; border:0; background:transparent; font-family:inherit; cursor:pointer; text-align:left;} .ord_sec_title {color:#1b1b1b; font-size:clamp(15px,4vw,17px); font-weight:700;} .ord_sec_meta {margin-left:3px; color:#999; font-size:clamp(11px,2.8vw,13px); font-weight:400;} .ord_sec_arrow {position:relative; flex:0 0 auto; width:22px; height:22px; border:1px solid #e2e4e8; border-radius:6px; background:#fff; box-sizing:border-box; transition:transform .2s;} .ord_sec_arrow:before {content:''; position:absolute; left:50%; top:44%; width:6px; height:6px; border-right:2px solid #666; border-bottom:2px solid #666; transform:translate(-50%,-50%) rotate(45deg);} [aria-expanded="true"] .ord_sec_arrow {transform:rotate(180deg);} .ord_sec_body {margin-top:14px;} /* 배송지 */ .ord_addr_head {display:flex; align-items:center; justify-content:space-between; gap:10px;} .ord_addr_title {color:#1b1b1b; font-size:clamp(15px,4vw,17px); font-weight:700;} .ord_addr_change {flex:0 0 auto; padding:7px 14px; border:1px solid #e2e4e8; border-radius:8px; background:#fff; color:#666; font-family:inherit; font-size:clamp(11px,2vw,13px); font-weight:600; cursor:pointer;} .ord_addr_full {margin:7px 0 0; color:#1b1b1b; font-size:clamp(13px,3.4vw,15px); font-weight:500; line-height:1.45;} .ord_addr_person {margin:5px 0 0; color:#999; font-size:clamp(12px,3vw,14px);} .ord_addr_person em {font-style:normal;} .ord_req {margin-top:10px;} .ord_req_sel {width:100%; height:clamp(48px,12vw,52px); padding:0 40px 0 16px; border:1px solid #e2e4e8; border-radius:8px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; color:#1b1b1b; font-family:inherit; font-size:clamp(13px,3.4vw,15px); appearance:none; -webkit-appearance:none; box-sizing:border-box; cursor:pointer;} .ord_req_sel:focus {outline:0; border-color:#1b43c8;} .ord_req_input {width:100%; margin-top:8px; height:clamp(48px,12vw,52px); padding:0 16px; border:1px solid #e2e4e8; border-radius:12px; background:#fff; color:#1b1b1b; font-family:inherit; font-size:clamp(13px,3.4vw,15px); box-sizing:border-box;} .ord_req_input:focus {outline:0; border-color:#1b43c8;} /* 주문상품 / 사은품 아이템 */ .ord_item {display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #eef0f2; border-radius:12px;} .ord_item + .ord_item {margin-top:10px;} .ord_item_thumb {flex:0 0 auto; width:clamp(52px,15vw,64px); height:clamp(52px,15vw,64px); border-radius:10px; overflow:hidden; background:#eef0f2;} .ord_item_thumb img {width:100%; height:100%; object-fit:cover; display:block;} .ord_item_info {flex:1 1 auto; min-width:0;} .ord_item_name {margin:0; color:#1b1b1b; font-size:clamp(11px,2vw,15px); font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .ord_item_price {margin:5px 0 0; color:#1b1b1b; font-size:clamp(15px,3.5vw,18px);} .ord_item_price strong {font-weight:800;} .ord_item_qty {color:#999; font-size:clamp(11px, 2.0vw, 14px); font-weight:400;} .ord_gift_badge {display:inline-block; margin:0 0 6px; padding:3px 8px; border-radius:5px; background:#eef2fd; color:#1b43c8; font-size:clamp(11px,2.8vw,12px); font-weight:600;} /* 마일리지 (제품상세 mil_* 이식) */ .ord_mil .mil_head {display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;} .ord_mil .mil_title {display:flex; align-items:baseline; gap:8px; margin:0; color:#1b1b1b; font-size:clamp(15px,4vw,17px); font-weight:700; line-height:1.3;} .ord_mil .mil_have {color:#999; font-size:clamp(12px,3vw,14px); font-weight:500;} .ord_mil .mil_have em {color:#1b43c8; font-style:normal; font-weight:700;} .ord_mil .coupon_maxtoggle {display:inline-flex; align-items:center; gap:10px; cursor:pointer;} .ord_mil .coupon_maxtoggle_txt {color:#666; font-size:clamp(12px,3vw,15px); font-weight:500;} .ord_mil .mil_input_row {display:flex; align-items:stretch; gap:8px; margin-top:clamp(12px,3vw,16px);} .ord_mil .mil_field {position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:5px; height:clamp(48px,12vw,54px); padding:0 16px; border:1px solid #d9d9d5; border-radius:12px; background:#fff; box-sizing:border-box;} .ord_mil .mil_input {flex:1 1 auto; min-width:0; border:0; background:transparent; color:#1b1b1b; font-family:inherit; font-size:clamp(15px,3.8vw,17px); font-weight:700;} .ord_mil .mil_input:focus {outline:0;} .ord_mil .mil_clear {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:#c9c9c5; color:#fff; font-size:12px; line-height:1; cursor:pointer;} .ord_mil .mil_clear:before {content:'\2715';} .ord_mil .mil_clear.is_hidden {display:none;} .ord_mil .mil_max {flex:0 0 auto; width:clamp(84px,22vw,104px); border:1px solid #e2e2de; border-radius:12px; background:#fff; color:#333; font-family:inherit; font-size:clamp(13px,3.4vw,15px); font-weight:700; cursor:pointer;} .ord_mil .mil_max:disabled {color:#bcbcbc; background:#f2f2f0; cursor:default;} .ord_mil .mil_note {margin:clamp(10px,2.5vw,12px) 2px 0; color:#999; font-size:clamp(12px,3vw,13px); font-weight:500; line-height:1.5;} /* 총 결제 금액 */ .ord_pay_head {display:flex; align-items:center; gap:8px; width:100%; padding:0; border:0; background:transparent; font-family:inherit; cursor:pointer; text-align:left;} .ord_pay_title {color:#1b1b1b; font-size:clamp(14px,2.0vw,16px); font-weight:700;} .ord_pay_total {margin-left:auto; color:#1b1b1b; font-size:clamp(16px,3vw,20px); font-weight:700; letter-spacing:-0.5px;} .ord_pay_list {margin:10px 0 0; padding:0;} .ord_pay_row {display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:6px 0;} .ord_pay_row dt {color:#666; font-size:clamp(12px,2vw,15px); font-weight:400;} .ord_pay_row dd {margin:0; color:#1b1b1b; font-size:clamp(13px,3vw,16px); font-weight:500;} .ord_pay_sub {padding:2px 0;} .ord_pay_sub dt {position:relative; padding-left:15px; color:#999; font-weight:400; font-size:clamp(12px,3vw,13px);} .ord_pay_sub dt:before {content:'\2514'; position:absolute; left:0; top:-1px; color:#c9ccd2;} .ord_pay_sub dd {color:#999; font-weight:400; font-size:clamp(12px,3vw,13px);} .ord_pay_head[aria-expanded="false"] ~ .ord_sec_body .ord_pay_sub {display:none;} /* 하단 고정: 적립 + 결제 CTA */ .ord_bottom {position:fixed; left:0; right:0; bottom:0; z-index:1000; background:rgba(255, 255, 255, 0.5); backdrop-filter:blur(10px);} .ord_bottom .inner {padding-top:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom));} .ord_earn {display:flex; align-items:center; justify-content:center; gap:5px; margin:0 0 10px; color:#666; font-size:clamp(12px,3vw,14px);} .ord_earn b {color:#1b43c8; font-weight:700;} .ord_earn_ico {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#1b43c8; color:#fff; font-size:9px; font-weight:400; line-height:1;} .ord_checkout {width:100%; height:clamp(52px,13vw,58px); border:0; border-radius:12px; background:#1b43c8; color:#fff; font-family:inherit; font-size:clamp(15px,4vw,17px); font-weight:700; cursor:pointer;} .ord_confirm {margin:10px 0 0; text-align:center; color:#999; font-size:clamp(11px,2.8vw,13px);} /* ============================================================ 배송지 변경 시트/폼/주소검색 (제품상세 2.0_prod_detail.css 이식) ============================================================ */ body.popup_open {overflow:hidden;} .pay_confirm_box .rv_alert_title {display:block; margin:0 0 10px; color:#1b1b1b; font-size:clamp(16px,1.9vw,18px); font-weight:700; text-align:center;} .rvfilter_wrap .pop_handle {position:absolute; top:8px; left:50%; transform:translateX(-50%);} .buyWrap {display:none; position:fixed; inset:0; z-index:1100; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; background:rgba(17,17,17,.5);} .buyWrap.is_open {display:flex;} .buyWrap .buy_inner {position:relative; width:100%; max-width:460px; max-height:92vh; overflow-y:auto; padding:20px 25px 25px; border-radius:20px; box-sizing:border-box; background:#f4f4f2; transform:translateY(24px); opacity:0; transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .24s ease;} .buyWrap.is_shown .buy_inner {transform:translateY(0); opacity:1;} .buyWrap .pop_handle {position:relative; display:block; width:100%; height:22px; margin:0 0 6px; padding:0; border:0; background:transparent; cursor:grab; touch-action:none;} .buyWrap .pop_handle:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:44px; height:4px; border-radius:2px; background:#d2d2cf;} .buyWrap .pop_handle:active {cursor:grabbing;} .paykind_wrap .pay_inner {padding:20px 22px 24px; overflow-x:hidden;} .paykind_wrap .pay_title {margin:2px 0 0; color:#1b1b1b; font-size:clamp(18px, 2.2vw, 22px); font-weight:700; line-height:1.3;} .paykind_wrap .pay_point {display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:6px; color:#999; font-size:clamp(11px, 1.2vw, 13px); font-weight:500; line-height:1; white-space:nowrap;} .paykind_wrap .pay_point_on {color:#1b43c8;} .paykind_wrap .cardreg_head {position:relative; display:flex; align-items:center; justify-content:center; height:28px; margin-top:2px;} .paykind_wrap .cardreg_back {position:absolute; left:0; top:50%; transform:translateY(-50%); width:24px; height:24px; padding:0; border:0; background:transparent; cursor:pointer;} .paykind_wrap .cardreg_back:before {content:''; position:absolute; left:5px; top:50%; width:11px; height:11px; border-left:2px solid #333; border-bottom:2px solid #333; transform:translateY(-50%) rotate(45deg);} .paykind_wrap .cardreg_title {margin:0; color:#1b1b1b; font-size:clamp(16px, 1.9vw, 18px); font-weight:700;} .paykind_wrap .cardreg_lead {margin:clamp(18px,2.4vw,24px) 0 0; color:#1b1b1b; font-size:clamp(15px,1.8vw,17px); font-weight:700;} .paykind_wrap .cardreg_lead span {margin-left:6px; color:#999; font-size:clamp(12px,1.3vw,13px); font-weight:500;} .paykind_wrap .cardreg_form {margin-top:4px;} .paykind_wrap .cardreg_field {margin-top:6px;} .paykind_wrap .cardreg_field_row {display:flex; gap:14px;} .paykind_wrap .cardreg_field_row .cardreg_input {flex:1 1 0;} .paykind_wrap .cardreg_input {width:100%; height:clamp(46px,7vw,52px); padding:0 4px; border:0; border-bottom:1px solid #d4d4d0; border-radius:0; background:transparent; color:#1b1b1b; font-family:inherit; font-size:clamp(14px,1.5vw,15px); box-sizing:border-box; -webkit-appearance:none; appearance:none;} .paykind_wrap .cardreg_input::placeholder {color:#aaa; font-weight:400;} .paykind_wrap .cardreg_input:focus {outline:0; border-bottom-color:#1b43c8;} .paykind_wrap .cardreg_agree {display:flex; align-items:flex-start; gap:5px; margin-top:clamp(18px,2.4vw,22px); cursor:pointer;} .paykind_wrap .cardreg_chk {position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0);} .paykind_wrap .cardreg_check {position:relative; flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:#cdcdcd;} .paykind_wrap .cardreg_check:after {content:''; position:absolute; left:7px; top:4px; width:4px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);} .paykind_wrap .cardreg_chk:checked + .cardreg_check {background:#1b43c8;} .paykind_wrap .cardreg_agree_txt {color:#333; font-size:clamp(13px,1.5vw,15px); font-weight:500; line-height:1.4;} .paykind_wrap .cardreg_notes {margin:10px 0 0; padding:0 0 0 4px; list-style:none;} .paykind_wrap .cardreg_notes li {position:relative; margin-top:5px; padding-left:10px; color:#999; font-size:clamp(12px,1.3vw,13px); font-weight:400; line-height:1.5;} .paykind_wrap .cardreg_notes li:before {content:'-'; position:absolute; left:0; top:0;} .paykind_wrap .btn_cardreg_submit {display:flex; align-items:center; justify-content:center; width:100%; height:clamp(52px,8vw,58px); margin-top:clamp(20px,3vw,26px); border:0; border-radius:8px; background:#1b43c8; color:#fff; font-family:inherit; font-size:clamp(15px,1.8vw,17px); font-weight:700; cursor:pointer;} .paykind_wrap .btn_cardreg_submit:disabled {background:#e3e3e0; color:#aaa; cursor:default;} #addrFormSheet .addrform_type {display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; margin-top:clamp(14px,2vw,18px);} #addrFormSheet .addrform_type_btn {height:clamp(44px,6.5vw,50px); border:1px solid #dcdcd8; border-radius:8px; background:#fff; color:#666; font-family:inherit; font-size:clamp(14px,1.6vw,15px); font-weight:600; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;} #addrFormSheet .addrform_type_btn.is_sel {border-color:#1b43c8; background:#f2f5ff; color:#1b43c8;} #addrFormSheet .addrform_custom {margin-top:10px;} #addrFormSheet .addrform_help {margin:6px 2px 0; color:#999; font-size:clamp(12px,1.3vw,13px); font-weight:300; text-align:right;} #addrFormSheet .addrform_zip_row {display:flex; align-items:center; gap:10px;} #addrFormSheet .addrform_zip_row .cardreg_input {flex:1 1 auto;} #addrFormSheet .btn_addr_search {flex:0 0 auto; height:clamp(44px,6.5vw,48px); padding:0 clamp(14px,2.2vw,18px); border:1px solid #d7d3cf; border-radius:8px; background:#fff; color:#333; font-family:inherit; font-size:clamp(13px,1.5vw,14px); font-weight:600; white-space:nowrap; cursor:pointer;} #addrFormSheet .cardreg_input[readonly] {cursor:pointer; color:#333;} #addrFormSheet .cardreg_input[readonly]::placeholder {color:#bbb;} #addrFormSheet .af_req_trigger {display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; height:clamp(46px,7vw,52px); padding:0 4px; border:0; border-bottom:1px solid #d4d4d0; background:transparent; font-family:inherit; font-size:clamp(14px,1.5vw,15px); color:#1b1b1b; text-align:left; cursor:pointer;} #addrFormSheet .af_req_text.is_placeholder {color:#aaa;} #addrFormSheet .af_req_chevron {flex:0 0 auto; width:9px; height:9px; border-right:2px solid #999; border-bottom:2px solid #999; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;} #addrFormSheet .af_req_trigger[aria-expanded="true"] .af_req_chevron {transform:rotate(-135deg) translateY(-2px);} #addrFormSheet .af_req_menu {margin:6px 0 0; padding:6px; list-style:none; border:1px solid #e4e4e4; border-radius:12px; background:#fff;} #addrFormSheet .af_req_menu.is_hidden {display:none;} #addrFormSheet .af_req_opt {display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px; border:0; border-radius:8px; background:transparent; font-family:inherit; font-size:clamp(13px,1.5vw,15px); font-weight:500; color:#333; text-align:left; cursor:pointer;} #addrFormSheet .af_req_opt:hover {background:#f4f4f4;} #addrFormSheet .af_req_radio {position:relative; flex:0 0 auto; width:18px; height:18px; border:2px solid #cdcdcd; border-radius:50%; box-sizing:border-box;} #addrFormSheet .af_req_opt.is_sel .af_req_radio {border-color:#1b43c8;} #addrFormSheet .af_req_opt.is_sel .af_req_radio:after {content:''; position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; background:#1b43c8; transform:translate(-50%,-50%);} #addrFormSheet .af_req_opt.is_sel .af_req_label {color:#1b43c8; font-weight:700;} .af_postcode {position:fixed; inset:0; z-index:1500; display:flex; flex-direction:column; background:#fff;} .af_postcode.is_hidden {display:none;} .af_postcode_head {position:relative; display:flex; align-items:center; justify-content:center; height:clamp(50px,8vw,56px); border-bottom:1px solid #eee; flex:0 0 auto;} .af_postcode_title {color:#1b1b1b; font-size:clamp(16px,1.9vw,18px); font-weight:700;} .af_postcode_close {position:absolute; right:10px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; background:transparent; color:#333; font-size:20px; line-height:1; cursor:pointer;} .af_postcode_embed {flex:1 1 auto; min-height:0;} .paykind_wrap .pay_btns {display:grid; grid-template-columns:1fr 1.7fr; gap:5px; margin-top:clamp(16px,2.2vw,20px);} .paykind_wrap .pay_btns button {height:clamp(54px, 8vw, 60px); border-radius:8px; box-sizing:border-box; font-family:inherit; font-size:clamp(14px, 1.3vw, 17px); font-weight:700; white-space:nowrap; cursor:pointer;} .paykind_wrap .btn_pay_cancel {border:1px solid #d7d3cf; background:#fff; color:#222;} .paykind_wrap .btn_pay_apply {border:0; background:#1b43c8; color:#fff;} #addrSheet .addr_list {display:flex; flex-direction:column; gap:10px; margin-top:clamp(16px,2.2vw,20px); padding:2px; list-style:none; max-height:clamp(280px,48vh,420px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;} #addrSheet .addr_item {display:flex; align-items:flex-start; gap:10px; padding:clamp(15px,2.1vw,18px) clamp(14px,2vw,16px); border:1px solid #ececec; border-radius:14px; background:#fff; cursor:pointer; transition:border-color .15s ease, background .15s ease;} #addrSheet .addr_item.is_sel {border-color:#1b43c8; background:#f2f5ff;} #addrSheet .addr_radio_dot {position:relative; flex:0 0 auto; margin-top:2px; width:22px; height:22px; border:2px solid #cdcdcd; border-radius:50%; box-sizing:border-box; transition:border-color .15s ease;} #addrSheet .addr_item.is_sel .addr_radio_dot {border-color:#1b43c8;} #addrSheet .addr_item.is_sel .addr_radio_dot:after {content:''; position:absolute; left:50%; top:50%; width:11px; height:11px; border-radius:50%; background:#1b43c8; transform:translate(-50%,-50%);} #addrSheet .addr_content {flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px;} #addrSheet .addr_top {display:flex; align-items:center; justify-content:space-between; gap:10px;} #addrSheet .addr_label {color:#1b1b1b; font-size:clamp(14px,1.6vw,16px); font-weight:700;} #addrSheet .addr_actions {display:flex; align-items:center; gap:5px; flex:0 0 auto;} #addrSheet .addr_actions button {padding:0; border:0; background:transparent; color:#999; font-family:inherit; font-size:clamp(12px,1.4vw,13px); font-weight:500; cursor:pointer;} #addrSheet .addr_actions button:hover {color:#666;} #addrSheet .addr_div {width:1px; height:11px; background:#d5d5d5;} #addrSheet .addr_person {color:#999; font-size:clamp(12px,1.4vw,14px); font-weight:300;} #addrSheet .addr_person em {margin-left:6px; font-style:normal; color:#999; font-weight:300;} #addrSheet .addr_full {color:#333; font-size:clamp(12px,1.6vw,15px); font-weight:500; line-height:1.4; word-break:keep-all;} #addrSheet .addr_req {color:#999; font-size:clamp(11px,1.4vw,13px); font-weight:300; line-height:1.4;} #addrSheet .addr_req:empty {display:none;} #addrSheet .btn_addr_add {display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:clamp(46px,7vw,52px); margin-top:12px; border:1px dashed #cccccc; border-radius:12px; background:transparent; color:#666; font-family:inherit; font-size:clamp(14px,1.6vw,15px); font-weight:600; cursor:pointer;} #addrSheet .btn_addr_add_ico {font-size:18px; font-weight:400; line-height:1;} .pay_confirm_wrap:where(#addrConfirm) {display:none; position:fixed; inset:0; z-index:1400; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; background:rgba(17,17,17,.5);} .pay_confirm_wrap.is_open {display:flex;} :where(#addrConfirm) .pay_confirm_box {width:100%; max-width:320px; padding:28px 22px 18px; border-radius:16px; box-sizing:border-box; background:#fff; opacity:0; transform:scale(.96); transition:opacity .2s ease, transform .2s ease;} .pay_confirm_wrap.is_shown .pay_confirm_box {opacity:1; transform:scale(1);} .pay_confirm_msg {margin:0; color:#1b1b1b; font-size:clamp(15px, 1.7vw, 16px); font-weight:600; line-height:1.55; text-align:center;} .pay_confirm_btns {display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:22px;} .pay_confirm_btns button {height:50px; border-radius:8px; box-sizing:border-box; font-family:inherit; font-size:clamp(14px, 1.5vw, 16px); font-weight:700; cursor:pointer;} .pay_confirm_btns .btn_pay_confirm_cancel {border:1px solid #d2d2cf; background:#fff; color:#666;} .pay_confirm_btns .btn_pay_confirm_ok {border:0; background:#1b43c8; color:#fff;} @media (max-width:767px) { .buyWrap {align-items:flex-end; padding:0;} .buyWrap .buy_inner {max-width:none; max-height:88vh; padding:18px 18px calc(20px + env(safe-area-inset-bottom)); border-radius:20px 20px 0 0; transform:translateY(100%); opacity:1;} .buyWrap.is_shown .buy_inner {transform:translateY(0);} #addrSheet .addr_content {gap:3px;} .ord_sec + .ord_sec {margin-top:10px;} .ord_item_thumb {width:56px; height:56px;} } @media (max-width:600px) { .ord_pay_row {padding:3px 0;} } /* ------------------------------------------------------------ ③ 결제 — order_03payment.html (옛 2.0_payment.css · #container.payment) ------------------------------------------------------------ */ /* ============================================================ TOUN28-AIX Team | 2.0_payment.css (결제) 20260805 최초 작성 · 브랜드 블루 #1b43c8 ※ 주문서/장바구니/제품상세 폰트·색·구조 참고, 미디어쿼리 하단 일괄 ※ 현재 상태: 간편결제(톤페이) 미등록 화면 ============================================================ */ /* ===== 유틸 ===== */ .is_hidden {display:none !important;} .sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;} /* ===== 페이지 배경 ===== */ #container:where(.payment) {background:#f4f4f2;} :where(#container.payment) #contents {min-height:calc(100vh - 64px); padding:0 0 clamp(120px,30vw,150px); box-sizing:border-box;} .pay_wrap .inner {max-width:640px; margin:0 auto; padding:0 20px; box-sizing:border-box;} /* ===== 헤더(결제 바) ===== */ .pay_header {background:#fff;} .pay_header .inner {width:100%;} .pay_bar {position:relative; display:flex; align-items:center; justify-content:flex-end; gap:12px; height:56px; padding:0 20px; box-sizing:border-box;} .pay_bar_title {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; color:#1b1b1b; font-size:clamp(16px,3vw,18px); font-weight:700; line-height:1;} .pay_close {position:relative; flex:0 0 auto; width:30px; height:30px; padding:0; border:0; background:transparent; cursor:pointer;} .pay_close:before, .pay_close:after {content:''; position:absolute; left:50%; top:50%; width:21px; height:2px; background:#333; border-radius:2px;} .pay_close:before {transform:translate(-50%,-50%) rotate(45deg);} .pay_close:after {transform:translate(-50%,-50%) rotate(-45deg);} /* ===== 프로모(톤페이 등록) ===== */ .pay_promo {padding-top:clamp(48px,15vw,88px); text-align:left;} .pay_promo_title {margin:0; color:#1b1b1b; font-size:clamp(18px,4.8vw,21px); font-weight:700; line-height:1.36; letter-spacing:-0.02em;} .pay_tonpay_wrap {position:relative; margin-top:clamp(28px,8vw,44px);} .pay_glow {position:absolute; left:50%; top:50%; width:118%; height:200%; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(27,67,200,.14), rgba(27,67,200,.05) 55%, rgba(27,67,200,0) 72%); filter:blur(6px); z-index:0; pointer-events:none;} .pay_tonpay_card {position:relative; z-index:1; display:flex; align-items:center; gap:16px; width:100%; padding:clamp(20px,5vw,26px) clamp(18px,5vw,24px); border:0; border-radius:20px; background:#fff; box-shadow:0 14px 30px rgba(20,30,60,.10); font-family:inherit; text-align:left; cursor:pointer;} .pay_tonpay_ico {flex:0 0 auto; position:relative; width:44px; height:44px; border-radius:14px; background:#eef0f3;} .pay_tonpay_ico:before, .pay_tonpay_ico:after {content:''; position:absolute; left:50%; top:50%; background:#8a8f98; border-radius:2px;} .pay_tonpay_ico:before {width:16px; height:2px; transform:translate(-50%,-50%);} .pay_tonpay_ico:after {width:2px; height:16px; transform:translate(-50%,-50%);} .pay_tonpay_txt {display:flex; flex-direction:column; gap:5px; min-width:0;} .pay_tonpay_name {color:#1b1b1b; font-size:clamp(15px,3.9vw,17px); font-weight:700; line-height:1.2;} .pay_tonpay_earn {color:#8a8f98; font-size:clamp(12px,3vw,13px); font-weight:500; line-height:1.2;} .pay_tonpay_earn b {color:#1b43c8; font-weight:700;} .pay_other {display:block; margin:clamp(16px,4vw,20px) auto 0; padding:11px 22px; border:0; border-radius:999px; background:#fff; box-shadow:0 6px 16px rgba(20,30,60,.08); color:#8a8f98; font-family:inherit; font-size:clamp(12px,3.2vw,14px); font-weight:600; cursor:pointer;} /* ===== 상태 전환(간편결제 미등록 / 등록) — 제품상세 data-easypay 규칙 준용 ===== */ .pay_wrap[data-easypay="false"] .pay_state_reg {display:none;} .pay_wrap[data-easypay="true"] .pay_state_unreg {display:none;} /* ===== 결제 타이틀(등록됨) ===== */ .pay_amt {color:#1b43c8; font-weight:700;} /* ===== 결제수단 카드(등록됨) ===== */ .pay_method_wrap {position:relative; margin-top:clamp(28px,8vw,44px);} .pay_method_card {position:relative; z-index:1; border-radius:20px; background:#fff; box-shadow:0 14px 30px rgba(20,30,60,.10);} .pay_method_main {display:flex; align-items:center; gap:14px; padding:clamp(16px,4.4vw,20px) clamp(16px,4.6vw,22px);} .pay_method_thumb {flex:0 0 auto; width:56px; height:40px; border-radius:8px; background:#e9ebee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238a8f98' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5' fill='%238a8f98' stroke='none'/%3E%3Cpath d='M4 17l5-5 3 3 3-3 5 5'/%3E%3C/svg%3E") center / 22px no-repeat;} .pay_method_info {flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px;} .pay_method_name {color:#1b1b1b; font-size:clamp(15px,3.9vw,17px); font-weight:700; line-height:1.2;} .pay_method_num {color:#9a9a97; font-size:clamp(12px,3vw,13px); letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .pay_method_earn {flex:0 0 auto; padding:5px 9px; border-radius:7px; color:#1b43c8; font-size:clamp(11px,2.8vw,13px); font-weight:600; white-space:nowrap;} /* 할부 개월 드롭다운 — 제품상세 pay_install 이식 */ .pay_install {position:relative;} .pay_install_btn {display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:clamp(13px,3.6vw,16px) clamp(16px,4.6vw,22px); border:0; border-top:1px solid #eef0f3; background:transparent; font-family:inherit; text-align:left; cursor:pointer;} .pay_install_txt {color:#1b1b1b; font-size:clamp(13px,3.4vw,15px); font-weight:500;} .pay_install_chevron {flex:0 0 auto; width:9px; height:9px; border-right:2px solid #8a8f98; border-bottom:2px solid #8a8f98; transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;} .pay_install.is_open .pay_install_chevron {transform:rotate(-135deg) translateY(-2px);} .pay_install_menu {display:none; position:absolute; right:0; top:calc(100% - 4px); z-index:5; width:100%; max-height:220px; overflow-y:auto; margin:0; padding:6px; list-style:none; border:1px solid #e4e4e4; border-radius:12px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.12);} .pay_install.is_open .pay_install_menu {display:block;} .pay_install_opt {display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; padding:10px 10px; border:0; border-radius:8px; background:transparent; color:#333; font-family:inherit; font-size:clamp(13px,3.4vw,14px); font-weight:500; text-align:left; cursor:pointer;} .pay_install_opt:hover {background:#f4f4f4;} .pay_install_opt.is_sel {color:#1b43c8; font-weight:700;} .pay_install_opt.is_sel:after {content:''; flex:0 0 auto; width:5px; height:9px; border-right:2px solid #1b43c8; border-bottom:2px solid #1b43c8; transform:rotate(45deg);} /* ===== 하단 고정 CTA ===== */ .pay_bottom {position:fixed; left:0; right:0; bottom:0; z-index:1000; padding:14px 20px calc(16px + env(safe-area-inset-bottom)); background:#f4f4f2; border-top:1px solid #e9e9e6;} .pay_bottom .inner {max-width:640px; margin:0 auto;} .pay_submit {display:block; width:100%; height:clamp(52px,8vw,56px); border:0; border-radius:14px; background:#1b43c8; color:#fff; font-family:inherit; font-size:clamp(15px,3vw,17px); font-weight:700; cursor:pointer; transition:background .15s ease;} .pay_submit:disabled {background:#c7d4f5; color:#fff; cursor:default;} .pay_agree {margin:12px 0 0; text-align:center; color:#9a9a97; font-size:clamp(11px,3vw,13px); font-weight:400; line-height:1.4;} .pay_agree_link {color:#9a9a97; text-decoration:underline; background:transparent; border:0; padding:0; font-family:inherit; font-size:inherit; cursor:pointer;} /* ===== 결제수단 선택 시트(다른 결제수단) — 제품상세 paySheet 이식 ===== */ body.popup_open {overflow:hidden;} .buyWrap {display:none; position:fixed; inset:0; z-index:1100; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; background:rgba(17,17,17,.5);} .buyWrap.is_open {display:flex;} .buyWrap .buy_inner {position:relative; width:100%; max-width:460px; max-height:92vh; overflow-y:auto; padding:20px 25px 25px; border-radius:20px; box-sizing:border-box; background:#f4f4f2; transform:translateY(24px); opacity:0; transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .24s ease;} .buyWrap.is_shown .buy_inner {transform:translateY(0); opacity:1;} .buyWrap .pop_handle {position:relative; display:block; width:100%; height:22px; margin:0 0 6px; padding:0; border:0; background:transparent; cursor:grab; touch-action:none;} .buyWrap .pop_handle:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:44px; height:4px; border-radius:2px; background:#d2d2cf;} .buyWrap .pop_handle:active {cursor:grabbing;} .paykind_wrap .pay_inner {padding:20px 22px 24px; overflow-x:hidden;} .paykind_wrap .pay_title {margin:2px 0 0; color:#1b1b1b; font-size:clamp(18px, 2.2vw, 22px); font-weight:700; line-height:1.3;} #paySheet .pay_group_list {display:flex; flex-direction:column; gap:12px; margin-top:clamp(16px,2.2vw,20px);} #paySheet .pay_group {padding:clamp(16px,2.2vw,20px) clamp(14px,2vw,18px); border-radius:16px; background:#fff;} #paySheet .pay_group_head {display:flex; align-items:center; justify-content:space-between; gap:10px;} #paySheet .pay_group_title {color:#1b1b1b; font-size:clamp(15px,3.9vw,17px); font-weight:700; line-height:1.3;} .paykind_wrap .pay_point {display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:6px; color:#999; font-size:clamp(11px, 1.2vw, 13px); font-weight:500; line-height:1; white-space:nowrap;} .paykind_wrap .pay_point_on {color:#1b43c8;} #paySheet .pay_card_list {margin:clamp(14px,2vw,18px) 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;} #paySheet .pay_card2 {display:flex; align-items:center; gap:5px; padding:clamp(12px,1.8vw,15px); border:1px solid #ececec; border-radius:14px; background:#fbfbfb; transition:border-color .15s ease, background .15s ease;} #paySheet .pay_card2.is_sel {border-color:#1b43c8; background:#f2f5ff;} #paySheet .pay_card2_sel {flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; padding:0; border:0; background:transparent; font-family:inherit; text-align:left; cursor:pointer;} #paySheet .pay_card2_thumb, #paySheet .pay_normal_thumb {flex:0 0 auto; width:38px; height:38px; border-radius:8px; background:#eaeae7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b3b3af' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") no-repeat center / 18px;} #paySheet .pay_card2_info {display:flex; align-items:baseline; gap:5px; min-width:0;} #paySheet .pay_card2_name {color:#1b1b1b; font-size:clamp(14px,3.7vw,16px); font-weight:700; white-space:nowrap;} #paySheet .pay_card2_no {color:#999; font-size:clamp(12px,3vw,13px); font-weight:300;} #paySheet .btn_pay_regist {display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:clamp(44px,11vw,50px); margin-top:clamp(12px,1.8vw,16px); border:1px dashed #cccccc; border-radius:12px; background:transparent; color:#1b1b1b; font-family:inherit; font-size:clamp(13px,3.4vw,14px); font-weight:600; cursor:pointer;} #paySheet .btn_pay_regist_ico {font-size:18px; font-weight:400; line-height:1;} #paySheet .pay_normal_grid {display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:clamp(14px,2vw,18px);} #paySheet .pay_normal_item {display:flex; align-items:center; gap:10px; padding:clamp(13px,2vw,16px) clamp(12px,1.8vw,15px); border:1px solid #ececec; border-radius:14px; background:#fbfbfb; font-family:inherit; text-align:left; cursor:pointer; transition:border-color .15s ease, background .15s ease;} #paySheet .pay_normal_item.is_sel {border-color:#1b43c8; background:#f2f5ff;} #paySheet .pay_normal_name {color:#1b1b1b; font-size:clamp(13px,3.4vw,15px); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .paykind_wrap .pay_btns {display:grid; grid-template-columns:1fr 1.7fr; gap:5px; margin-top:clamp(16px,2.2vw,20px);} .paykind_wrap .pay_btns button {height:clamp(54px, 8vw, 60px); border-radius:8px; box-sizing:border-box; font-family:inherit; font-size:clamp(14px, 1.3vw, 17px); font-weight:700; white-space:nowrap; cursor:pointer;} .paykind_wrap .btn_pay_cancel {border:1px solid #d7d3cf; background:#fff; color:#222;} .paykind_wrap .btn_pay_apply {border:0; background:#1b43c8; color:#fff;} /* ===== 앱카드 카드사 선택 시트 ===== */ #appCardSheet .appcard_sub {margin:6px 0 0; color:#999; font-size:clamp(12px,3vw,13px); font-weight:500;} #appCardSheet .appcard_grid {display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:clamp(16px,2.4vw,22px);} #appCardSheet .appcard_item {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:clamp(18px,4vw,24px) 8px; border:1px solid #ececec; border-radius:14px; background:#f7f7f5; font-family:inherit; cursor:pointer; transition:border-color .15s ease, background .15s ease;} #appCardSheet .appcard_item.is_sel {border-color:#1b43c8; background:#f2f5ff;} #appCardSheet .appcard_thumb {flex:0 0 auto; width:34px; height:34px; border-radius:8px; background:#eaeae7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b3b3af' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") no-repeat center / 18px;} #appCardSheet .appcard_name {color:#1b1b1b; font-size:clamp(12px,3.1vw,14px); font-weight:600; text-align:center; line-height:1.3; word-break:keep-all;} /* ===== 간편결제 등록(카드정보 입력) 시트 — 제품상세 cardRegSheet 이식 ===== */ .paykind_wrap .cardreg_head {position:relative; display:flex; align-items:center; justify-content:center; height:28px; margin-top:2px;} .paykind_wrap .cardreg_back {position:absolute; left:0; top:50%; transform:translateY(-50%); width:24px; height:24px; padding:0; border:0; background:transparent; cursor:pointer;} .paykind_wrap .cardreg_back:before {content:''; position:absolute; left:5px; top:50%; width:11px; height:11px; border-left:2px solid #333; border-bottom:2px solid #333; transform:translateY(-50%) rotate(45deg);} .paykind_wrap .cardreg_title {margin:0; color:#1b1b1b; font-size:clamp(16px, 1.9vw, 18px); font-weight:700;} .paykind_wrap .cardreg_lead {margin:clamp(18px,2.4vw,24px) 0 0; color:#1b1b1b; font-size:clamp(15px,1.8vw,17px); font-weight:700;} .paykind_wrap .cardreg_lead span {margin-left:6px; color:#999; font-size:clamp(12px,1.3vw,13px); font-weight:500;} .paykind_wrap .cardreg_form {margin-top:4px;} .paykind_wrap .cardreg_field {margin-top:6px;} .paykind_wrap .cardreg_field_row {display:flex; gap:14px;} .paykind_wrap .cardreg_field_row .cardreg_input {flex:1 1 0;} .paykind_wrap .cardreg_input {width:100%; height:clamp(46px,7vw,52px); padding:0 4px; border:0; border-bottom:1px solid #d4d4d0; border-radius:0; background:transparent; color:#1b1b1b; font-family:inherit; font-size:clamp(14px,1.5vw,15px); box-sizing:border-box; -webkit-appearance:none; appearance:none;} .paykind_wrap .cardreg_input::placeholder {color:#aaa; font-weight:400;} .paykind_wrap .cardreg_input:focus {outline:0; border-bottom-color:#1b43c8;} .paykind_wrap .cardreg_agree {display:flex; align-items:flex-start; gap:5px; margin-top:clamp(18px,2.4vw,22px); cursor:pointer;} .paykind_wrap .cardreg_chk {position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0);} .paykind_wrap .cardreg_check {position:relative; flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:#cdcdcd;} .paykind_wrap .cardreg_check:after {content:''; position:absolute; left:7px; top:4px; width:4px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);} .paykind_wrap .cardreg_chk:checked + .cardreg_check {background:#1b43c8;} .paykind_wrap .cardreg_agree_txt {color:#333; font-size:clamp(13px,1.5vw,15px); font-weight:500; line-height:1.4;} .paykind_wrap .cardreg_notes {margin:10px 0 0; padding:0 0 0 4px; list-style:none;} .paykind_wrap .cardreg_notes li {position:relative; margin-top:5px; padding-left:10px; color:#999; font-size:clamp(12px,1.3vw,13px); font-weight:400; line-height:1.5;} .paykind_wrap .cardreg_notes li:before {content:'-'; position:absolute; left:0; top:0;} .paykind_wrap .btn_cardreg_submit {display:flex; align-items:center; justify-content:center; width:100%; height:clamp(52px,8vw,58px); margin-top:clamp(20px,3vw,26px); border:0; border-radius:8px; background:#1b43c8; color:#fff; font-family:inherit; font-size:clamp(15px,1.8vw,17px); font-weight:700; cursor:pointer;} .paykind_wrap .btn_cardreg_submit:disabled {background:#e3e3e0; color:#aaa; cursor:default;} /* ===== 결제 진행 팝업(딤) ===== */ .pay_confirm_wrap:where(#payProgress) {display:none; position:fixed; inset:0; z-index:1400; align-items:center; justify-content:center; padding:32px; box-sizing:border-box; background:rgba(14,14,14,0.8);} .pay_confirm_wrap.is_open {display:flex;} :where(#payProgress) .pay_confirm_box {width:100%; max-width:320px; padding:clamp(24px,6vw,30px) clamp(20px,5vw,24px) clamp(18px,4.5vw,22px); border-radius:16px;text-align:center;} .pay_confirm_title {margin:0; color:#fff; font-size:clamp(18px,3vw,22px); font-weight:600; line-height:1.4;} .pay_confirm_desc {margin:10px 0 0; color:#fff; font-size:clamp(13px,2vw,15px); font-weight:300; line-height:1.55;} .pay_confirm_btn {display:inline-block; width:auto; height:auto; margin:10px auto 0; padding:8px 10px; border:0; border-radius:10px; background:#1b43c8; color:#fff; font-family:inherit; font-size:clamp(12px,2vw,14px); font-weight:400; cursor:pointer;} /* ===== 반응형 ===== */ @media (max-width:600px) { .pay_promo {padding-top:clamp(40px,13vw,72px);} .pay_bar {height:52px; padding:0 16px;} .pay_wrap .inner {padding:0 16px;} } @media (max-width:767px) { .buyWrap {align-items:flex-end; padding:0;} .buyWrap .buy_inner {max-width:none; max-height:88vh; padding:18px 18px calc(20px + env(safe-area-inset-bottom)); border-radius:20px 20px 0 0; transform:translateY(100%); opacity:1;} .buyWrap.is_shown .buy_inner {transform:translateY(0);} } /* ------------------------------------------------------------ ④ 주문완료 — order_04complete.html (옛 2.0_order_complete.css · #container.complete) ------------------------------------------------------------ */ /* ============================================================ TOUN28-AIX Team | 2.0_order_complete.css (주문완료) 20260806 최초 작성 · 브랜드 블루 #1b43c8 ※ 주문서/결제 폰트·색·구조 참고, 미디어쿼리 하단 일괄 ※ 상태: 결제완료(paid) / 입금대기(awaiting_deposit) — data-oc-state 토글 ============================================================ */ /* ===== 유틸 ===== */ .is_hidden {display:none !important;} .sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;} /* ===== 페이지 배경 ===== */ #container:where(.complete) {background:#f1f2f4;} :where(#container.complete) #contents {padding-bottom:clamp(150px,40vw,184px);} .oc_inner {max-width:640px; margin:0 auto; padding:0 20px; box-sizing:border-box;} /* ===== 히어로 ===== */ .oc_hero {text-align:center; padding:clamp(28px,8vw,46px) 20px clamp(22px,6vw,34px);} .oc_hero_ico {display:inline-block; width:clamp(60px,16vw,72px); height:clamp(60px,16vw,72px); border-radius:50%;} .oc_hero_ico.oc_ico_check {background:#1b43c8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 46% no-repeat;} .oc_hero_ico.oc_ico_dots {background:#1b43c8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Ccircle cx='6' cy='12' r='1.9'/%3E%3Ccircle cx='12' cy='12' r='1.9'/%3E%3Ccircle cx='18' cy='12' r='1.9'/%3E%3C/svg%3E") center / 44% no-repeat;} .oc_hero_title {margin:clamp(12px,3.4vw,18px) 0 0; color:#1b1b1b; font-size:clamp(18px,4.8vw,21px); font-weight:700; line-height:1.28;} .oc_hero_desc {margin:9px 0 0; color:#666; font-size:clamp(12px,3.3vw,14px); font-weight:400; line-height:1.5;} /* ===== 입금 안내 카드(입금대기) ===== */ .oc_deposit {padding:clamp(4px,1.5vw,8px) 20px 0;} .oc_deposit_card {max-width:600px; margin:0 auto; background:#fff; border-radius:14px; padding:clamp(16px,4.2vw,20px) clamp(16px,4.4vw,20px);} .oc_deposit_row {display:flex; align-items:center; justify-content:space-between; gap:12px;} .oc_deposit_row + .oc_deposit_row {margin-top:13px;} .oc_deposit_dt {flex:0 0 auto; color:#1b1b1b; font-size:clamp(13px,3.4vw,15px); font-weight:700;} .oc_deposit_dd {min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:7px; color:#555; font-size:clamp(12px,3.2vw,14px); font-weight:500; text-align:right;} .oc_copy {flex:0 0 auto; width:18px; height:18px; padding:0; border:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M6 15V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E") center / contain no-repeat; cursor:pointer;} /* ===== 섹션 공통(백 밴드) ===== */ .oc_sec {background:#fff; margin-top:8px; padding:clamp(18px,5vw,24px) 0;} .oc_sec_head {display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:0; border:0; background:transparent; font-family:inherit; cursor:pointer; text-align:left;} .oc_sec_title {color:#1b1b1b; font-size:clamp(15px,3vw,17px); font-weight:700;} .oc_arrow {position:relative; flex:0 0 auto; width:22px; height:22px;} .oc_arrow:before {content:''; position:absolute; left:50%; top:42%; width:8px; height:8px; border-right:2px solid #999; border-bottom:2px solid #999; transform:translate(-50%,-50%) rotate(45deg); transition:transform .2s;} .oc_sec_head[aria-expanded="false"] .oc_arrow:before {transform:translate(-50%,-30%) rotate(-135deg);} .oc_sec_body {margin-top:clamp(12px,3vw,16px);} /* ===== 주문 상품 ===== */ .oc_ordno {display:inline-block; padding:5px 10px; border-radius:6px; background:#eef2fd; color:#1b43c8; font-size:clamp(12px,3vw,13px); font-weight:600; letter-spacing:.02em;} .oc_prod_name {margin:11px 0 0; color:#1b1b1b; font-size:clamp(13px,3.5vw,15px); font-weight:500; line-height:1.45;} /* ===== 배송지 ===== */ .oc_sec_title2 {margin:0; color:#1b1b1b; font-size:clamp(15px,3vw,17px); font-weight:700;} .oc_addr_label {margin:clamp(12px,3vw,16px) 0 0; color:#1b1b1b; font-size:clamp(15px,4vw,17px); font-weight:700;} .oc_addr_full {margin:7px 0 0; color:#1b1b1b; font-size:clamp(13px,3.4vw,15px); font-weight:500; line-height:1.45;} .oc_addr_person {margin:5px 0 0; color:#999; font-size:clamp(12px,3vw,14px); font-weight:400;} .oc_addr_person em {font-style:normal;} .oc_addr_memo {margin:5px 0 0; color:#666; font-size:clamp(12px,3vw,14px); font-weight:400;} .oc_addr_note {display:flex; align-items:center; gap:7px; margin:clamp(12px,3vw,16px) 0 0; color:#999; font-size:clamp(12px,3.2vw,14px); font-weight:400;} .oc_ico_info {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border:1px solid #cfcfcf; border-radius:5px; color:#aaa; font-size:11px; font-style:normal; font-weight:700; line-height:1;} /* ===== 결제 정보 ===== */ .oc_pay_list {margin:0; padding:0;} .oc_pay_row {display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:6px 0;} .oc_pay_row dt {color:#666; font-size:clamp(12px,2vw,15px); font-weight:400;} .oc_pay_row dt em {margin-left:6px; color:#999; font-style:normal; font-weight:400; font-size:clamp(12px,3vw,13px);} .oc_pay_row dd {margin:0; color:#1b1b1b; font-size:clamp(13px,3vw,16px); font-weight:500;} .oc_pay_sep {height:1px; margin:clamp(12px,3vw,16px) 0; background:#ededed;} .oc_pay_total_row {display:flex; align-items:baseline; justify-content:space-between; gap:12px;} .oc_pay_total_label {color:#1b1b1b; font-size:clamp(14px,2.0vw,16px); font-weight:700;} .oc_pay_total {color:#1b1b1b; font-size:clamp(16px,3vw,20px); font-weight:700; letter-spacing:-0.5px;} .oc_pay_method {margin:6px 0 0; color:#999; font-size:clamp(12px,3.3vw,14px); font-weight:400;} /* ===== 하단 고정 ===== */ .oc_bottom {position:fixed; left:0; right:0; bottom:0; z-index:1000; padding:12px 20px calc(14px + env(safe-area-inset-bottom)); background:rgba(255, 255, 255, 0.5); backdrop-filter:blur(10px);} .oc_bottom_inner {max-width:640px; margin:0 auto;} .oc_earn {margin:0 0 10px; text-align:center; color:#1b1b1b; font-size:clamp(13px,3.4vw,15px); font-weight:500;} .oc_earn b {color:#1b43c8; font-weight:700;} .oc_checkout {display:flex; align-items:center; justify-content:center; width:100%; height:clamp(50px,13vw,56px); border:0; border-radius:12px; background:#1b43c8; color:#fff; font-family:inherit; font-size:clamp(15px,3vw,16px); font-weight:700; cursor:pointer;} .oc_confirm {margin:10px 0 0; text-align:center; color:#999; font-size:clamp(12px,3.2vw,14px); font-weight:400;} /* ===== 상태 전환(결제완료 / 입금대기) ===== */ .oc_wrap[data-oc-state="paid"] .oc_state_pending {display:none;} .oc_wrap[data-oc-state="awaiting_deposit"] .oc_state_paid {display:none;} /* ===== 묻는 창(팝업) ===== 주문이 끝난 자리에서 한 가지만 여쭙는다. 지금은 캠페인 의견 하나가 늘 뜨지만, 뒤에 조건이 붙는 창이 더 생길 수 있어 짜임을 하나로 두고 안에 담기는 말과 버튼만 바꿔 쓴다. 좁은 화면에서는 아래에서 올라오고, 넓은 화면에서는 가운데에 선다. */ .oc_ask {position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-end; justify-content:center; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s;} .oc_ask.is_open {opacity:1; visibility:visible;} .oc_ask_dim {position:absolute; inset:0; background:rgba(20,22,28,0.45); border:0; padding:0; cursor:pointer;} .oc_ask_box {position:relative; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:clamp(24px,6vw,30px) clamp(20px,5vw,28px) calc(clamp(20px,5vw,26px) + env(safe-area-inset-bottom)); border-radius:20px 20px 0 0; background:#ffffff; box-sizing:border-box; transform:translateY(16px); transition:transform .24s ease;} .oc_ask.is_open .oc_ask_box {transform:translateY(0);} .oc_ask_close {position:absolute; top:clamp(12px,3vw,16px); right:clamp(12px,3vw,16px); width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent no-repeat center / 16px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a4ac' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");} .oc_ask_close:hover {background-color:#f4f5f7;} .oc_ask_k {margin:0 0 clamp(6px,1.6vw,9px); color:#1b43c8; font-size:clamp(11px,2.9vw,12.5px); font-weight:700; letter-spacing:0.04em;} .oc_ask_t {margin:0; color:#1b1b1b; font-size:clamp(18px,4.6vw,22px); font-weight:700; line-height:1.42; letter-spacing:-0.03em; word-break:keep-all;} .oc_ask_d {margin:clamp(7px,2vw,10px) 0 0; color:#8a8f98; font-size:clamp(13px,3.3vw,14.5px); font-weight:400; line-height:1.6; word-break:keep-all;} .oc_ask_btns {display:flex; flex-direction:column; gap:8px; margin-top:clamp(18px,4.6vw,24px);} .btn_oc_ask {display:flex; align-items:center; justify-content:center; width:100%; height:clamp(50px,13vw,56px); padding:0 16px; border:1px solid #e2e5ea; border-radius:12px; background:#ffffff; color:#1b1b1b; font-family:inherit; font-size:clamp(14px,3.6vw,16px); font-weight:600; letter-spacing:-0.02em; cursor:pointer;} .btn_oc_ask:hover {border-color:#1b1b1b;} .btn_oc_ask.is_key {border-color:#1b43c8; background:#1b43c8; color:#ffffff; font-weight:700;} .btn_oc_ask.is_key:hover {background:#12309a; border-color:#12309a;} /* 직접 적으러 가는 길 — 고르는 것이 아니라 옮겨 가는 것이라 조용히 둔다 */ .btn_oc_ask.is_text {height:auto; padding:clamp(10px,2.6vw,13px) 0; border:0; background:transparent; color:#8a8f98; font-size:clamp(13px,3.3vw,14px); font-weight:500; text-decoration:underline; text-underline-offset:3px;} .btn_oc_ask.is_text:hover {color:#1b1b1b;} /* 고르고 난 뒤 — 같은 자리에서 인사만 하고 닫힌다 */ .oc_ask_done {padding:clamp(8px,2.4vw,14px) 0 clamp(4px,1.4vw,8px); text-align:center;} .oc_ask_done_i {display:inline-flex; align-items:center; justify-content:center; width:clamp(46px,11vw,54px); height:clamp(46px,11vw,54px); border-radius:50%; background:#eef2fd; color:#1b43c8;} .oc_ask_done_t {margin:clamp(12px,3vw,16px) 0 0; color:#1b1b1b; font-size:clamp(16px,4vw,19px); font-weight:700; letter-spacing:-0.02em; word-break:keep-all;} .oc_ask_done_d {margin:clamp(6px,1.8vw,9px) 0 0; color:#8a8f98; font-size:clamp(13px,3.3vw,14px); font-weight:400; line-height:1.6; word-break:keep-all;} /* ===== 반응형 ===== */ @media (max-width:600px) { .oc_inner {padding:0 16px;} .oc_deposit {padding-left:16px; padding-right:16px;} .oc_pay_row {padding:3px 0;} } /* -------------------- 넓은 화면 -------------------- */ @media (min-width:601px) { .oc_ask {align-items:center;} .oc_ask_box {border-radius:18px; margin:0 20px;} }