@charset "utf-8";
/* 자동 생성 파일: tools/gen-shop-ui.py 로 생성한다. 직접 수정하지 말고 생성기의 COLOR_MAP/MANUAL 을 고친다.
   쇼핑몰 레거시 CSS의 옛 강조색(구 파랑/핑크/주황)을 브랜드 토큰(var(--accent))으로 덮어쓴다.
   head.sub.php 에서 쇼핑몰 페이지 한정으로 레거시 CSS 뒤에 로드한다. 토큰은 cafe24-style.css :root 에 정의되어 있다. */

body .btn_sm_on i {color:var(--accent)}
body .qk_con_wr .side_tnb li:hover a {color:var(--accent)}
body #category .cate_li_1_a {color:var(--accent)}
body a.btn02 {background:var(--accent)}
body .btn_submit {background:var(--accent)}
body .new_win .win_ul .selected {background:var(--accent); border-color:var(--accent)}
body .new_win .win_total {color:var(--accent)}
body .pg_current {background:var(--accent); border:1px solid var(--accent)}
body #smb_my_ov .smb_me a.smb_info {color:var(--accent)}
body #smb_private a strong {color:var(--accent)}
body #smb_private li a:hover:after {background:var(--accent)}
body #smb_private li:hover i {color:var(--accent)}
body .smb_my_od .cost {color:var(--accent)}
body #smb_ws_act .btn02 {background:var(--accent)}
body .sod_opt li:before {color:var(--accent)}
body .cp_btn {color:var(--accent)}
body #sit_opt_added .sit_opt_del:hover {color:var(--accent)}
body .od_coupon .cp_apply {border: 1px solid var(--accent); color: var(--accent)}
body #sod_frm  #sod_bsk_tot .sod_bsk_coupon:before {color:var(--accent)}
body #sod_frm  #sod_bsk_tot .sod_bsk_dvr:before {color:var(--accent)}
body #sod_frm  #sod_bsk_tot .sod_bsk_cnt strong {color:var(--accent)}
body #sod_frm_pay .pay_tbl td .btn_frmline {border: 1px solid var(--accent); color: var(--accent)}
body #od_tot_price strong {color:var(--accent)}
body #sod_frm #sod_frm_pt_alert {color:var(--accent)}
body #od_pay_sl input[type="radio"]:checked+.lb_icon {border:1px solid var(--accent)}
body .sod_right #sod_bsk_tot {border:1px solid var(--accent)}
body #sod_frm_pay input[type="radio"]:checked+.lb_icon {color:var(--accent)}
body #display_pay_button .btn_submit {border:1px solid var(--accent)}
body #od_tot_price strong {color:var(--accent)}
body #sod_ws_act .btn02 {background:var(--accent)}
body #sod_addr .default_lb {color:var(--accent)}
body #sod_addr .td_sbj .chk_box input[type="checkbox"]:checked + label span {background-color:var(--accent); border-color:var(--accent)}
body .status_04 {color:var(--accent)}
body .status_05 {background:var(--accent)}
body #sod_fin_no {color:var(--accent)}
body #sod_fin #sod_bsk_tot .sod_bsk_cnt strong {color:var(--accent)}
body #sod_bsk_tot2 {border:1px solid var(--accent)}
body #sod_bsk_tot2 li.sod_fin_tot strong {color:var(--accent)}
body #sod_fin_list .sod_name .sod_opt:before {color:var(--accent)}
body #sod_fin_dvr .dvr_link {color:var(--accent)}
body #sod_fin_tot li {background:var(--accent)}
body #coupon .cou_pri {color:var(--accent)}
body .chk_box input[type="checkbox"] + label:hover {color:var(--accent)}
body .chk_box input[type="checkbox"]:checked + label span {background-color:var(--accent); border-color:var(--accent)}
body .aside_cat_1dli_on .aside_cat_1da {color:var(--accent)}
body .aside_cat_1dli_on .aside_cat_1da:after {background:var(--accent)}
body .aside_cat_2da:focus, body .aside_cat_2da:hover {color:var(--accent)}
body #sev .ev_prd .sev_more {color:var(--accent)}
body #scomm li a:hover {color:var(--accent)}
body #main_bn .owl_pager li.active a {color:var(--accent)}
body #main_bn .owl_pager li.active a:after {background:var(--accent)}
body #sbsk .go_cart {color:var(--accent)}
body .sct_40 .list-10-btn .sct_cart {background:var(--accent)}
body .sct_cartop_wr .cartopt_cart_btn {background:var(--accent)}
body .sct_ct_here {color:var(--accent) !important}
body #sct_ct_1 li a:hover {color:var(--accent)}
body #sct_sort li a:hover {color:var(--accent)}
body #sit_star_sns .btn_sns_share:hover {color:var(--accent)}
body .sit_btn_buy {background:var(--accent)}
body #sit_tab .tab_tit li .selected:after {background:var(--accent)}
body #sit_sms_new .chk_box input[type="checkbox"]:checked + label span {background-color:var(--accent)}
body #sit_qa_write .chk_box input[type="checkbox"]:checked + label span {background-color:var(--accent)}
body .sps_section .sps_pd_name {color:var(--accent)}
body #ssch_cate a:hover {color:var(--accent)}
body #ssch_sort li:hover:after {background:var(--accent)}
body #ssch_sort li:hover a {color:var(--accent)}
body #ssch_sort_all li:hover:after {background:var(--accent)}
body #ssch_sort_all li:hover a {color:var(--accent)}
body .couponzone_list ul li .coupon_btn .btn02 {background:var(--accent)}


/* ===================================================================
   수작업 영역: 색 치환만으로 부족한 곳
   =================================================================== */

/* --- 장바구니 합계 바: 남색 3분할 바를 밝은 카드 + 강조 합계로 --- */
body #sod_bsk #sod_bsk_tot {border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; background:var(--surface)}
body #sod_bsk #sod_bsk_tot li {background:var(--surface); color:var(--ink); border-left:1px solid var(--line)}
body #sod_bsk #sod_bsk_tot li:first-child {border-left:0}
body #sod_bsk #sod_bsk_tot .sod_bsk_cnt {background:var(--ink); color:var(--bg)}
body #sod_bsk #sod_bsk_tot .sod_bsk_cnt strong {color:var(--bg)}

/* --- 1200px 고정 폭 2단 레이아웃(마이페이지, 주문서, 주문조회/완료)이 전체 폭 컨테이너 왼쪽에 붙어 있던 것을 가운데 정렬 ---
   float 구조(.sod_left 840 + .sod_right 340, #smb_my_ov 265 + #smb_my_list 915)는 그대로 두고 감싸는 블록만 최대 1200px 로 가운데 둔다. */
body #smb_my, body #sod_frm, body #sod_fin {max-width:1200px; margin-left:auto; margin-right:auto; display:flow-root}
body #personal_pay {float:none; margin-left:auto; margin-right:auto}
/* 제목(#wrapper_title)도 가운데 블록과 같은 폭에 맞춘다 (:has 미지원 브라우저에서는 기존 위치 유지) */
body .shop-content:has(#smb_my, #sod_frm, #sod_fin, #personal_pay) #wrapper_title {max-width:1200px; margin-left:auto; margin-right:auto}
/* 컨테이너가 1200px 보다 좁은 1025~1248px 구간에서 고정 폭 때문에 넘치지 않도록 왼쪽 열을 유동 폭으로 */
@media (min-width:1025px) {
    body .sod_left {width:calc(100% - 360px)}
    body #smb_my_list {width:calc(100% - 285px)}
}

/* --- 주문서/장바구니 공통 버튼과 입력: 각진 레거시 요소를 브랜드 모양(알약/둥근 모서리)으로 통일 --- */
body .btn01, body a.btn01, body button.btn01 {border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink); transition:border-color 0.2s var(--ease), color 0.2s var(--ease)}
body .btn01:hover, body a.btn01:hover {border-color:var(--ink); color:var(--ink)}
body .btn_address {background:var(--ink); color:var(--bg); border-radius:999px; transition:background-color 0.2s var(--ease)}
body .btn_address:hover {background:var(--accent)}
body #sod_frm .tbl_frm01 td .btn_address {background:var(--ink); color:var(--bg); border-radius:999px}   /* 레거시 선택자(#sod_frm .tbl_frm01 td .btn_address)의 명시도에 맞춘다 */
body #sod_frm .tbl_frm01 td .btn_address:hover {background:var(--accent)}
body #sod_frm textarea {border:1px solid var(--line); border-radius:var(--radius-field); padding:12px; background:var(--bg); color:var(--ink); font-family:inherit; line-height:1.6}

/* --- 마이페이지: 카운트 배지가 초록/보라/주황/연두로 제각각이라 액센트 1색 + 중립으로 통일 --- */
body #smb_private .win_point strong {background:var(--accent); color:var(--bg)}
body #smb_private .win_memo strong, body #smb_private .win_scrap strong, body #smb_private .win_coupon strong {background:var(--surface); color:var(--ink)}
body #smb_private a:hover strong {background:var(--ink); color:var(--bg)}

/* --- 장바구니/주문 표: 금액 열이 숫자 중간에서 줄바꿈되지 않게 --- */
body #sod_bsk_list .td_numbig,
body .od_prd_list .td_numbig {white-space:nowrap; font-variant-numeric:tabular-nums}
body #sod_bsk_list .td_numbig {min-width:96px}

/* --- 상품 목록: 하위 분류 칩 --- */
body #sct_ct_1 ul {display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
body #sct_ct_1 li {float:none; width:auto; border:0}
body #sct_ct_1 li:nth-child(5n) {border:0}
body #sct_ct_1 li a {display:inline-flex; align-items:center; height:38px; padding:0 16px; line-height:1; border:1px solid var(--line); border-radius:999px; font-size:15px; font-weight:600; color:var(--muted);
transition:border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease)}
body #sct_ct_1 li a:hover {border-color:var(--ink); color:var(--ink)}
body #sct_ct_1 li a.sct_ct_here {background:var(--ink); border-color:var(--ink); color:var(--bg) !important}
body #sct_ct_1 {border:0; background:transparent; margin:0 0 16px}

/* --- 상품 목록: 정렬 바 --- */
body #sct_sortlst {border:0; border-bottom:1px solid var(--line); background:transparent; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 20px; padding-bottom:12px}
body #sct_sortlst:after, body #sct_sortlst:before {display:none}   /* 레거시 clearfix 가상요소가 flex 아이템이 되어 space-between 을 깨뜨린다 */
body #sct_sort {float:none; width:auto}
body #sct_sort ul {display:flex; flex-wrap:wrap; gap:4px 16px; padding:0; margin:0}
body #sct_sort #ssch_sort, body #ssch_sort {float:none; width:auto}   /* 정렬 ul 의 id(ssch_sort)에 별도로 float:left/width:80% 가 걸려 있다 */
body #sct_sort li {float:none; height:auto; margin:0; padding:0; line-height:1.4}
body #sct_sort li a {border:0; padding:4px 0; font-size:15px; color:var(--muted); transition:color 0.2s var(--ease)}
body #sct_sort li a:hover {color:var(--ink)}
body #sct_lst {float:none; display:flex; gap:4px}
body #sct_lst button {width:36px; height:36px; border-radius:50%; background:transparent; color:var(--muted); transition:background-color 0.2s var(--ease), color 0.2s var(--ease)}
body #sct_lst button:hover {background:var(--surface); color:var(--ink)}

@media (prefers-reduced-motion: reduce) {
    body #sct_ct_1 li a, body #sct_sort li a, body #sct_lst button {transition:none}
}