@charset "utf-8";
/* ============================================================
shop_04 (HAESOL MALL) 테마 · 쇼핑몰 화면 (메인 · 상품리스트 · 상품상세)
============================================================ */
/* ── 메인 · 히어로 ──────────────────────────────────── */
.u-hero{position:relative;display:block;overflow:hidden;color:var(--ink);
background:linear-gradient(105deg,var(--mint-l),var(--cream-l) 55%,var(--peach-l));
background-size:cover;background-position:center}
.u-hero.has-img:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.74)}
.u-hero-in{position:relative;z-index:2;display:flex;align-items:center;gap:40px;flex-wrap:wrap;
padding-top:56px;padding-bottom:56px;text-align:left}
.u-hero-tx{flex:1 1 320px;min-width:280px}
.u-hero-label{display:inline-block;margin-bottom:0;background:var(--ink);color:#fff;
font-size:12.5px;font-weight:700;letter-spacing:0;padding:6px 14px;border-radius:var(--r-pill)}
.u-hero-title{margin-top:18px;font-size:clamp(28px,4.2vw,46px);font-weight:900;
line-height:1.25;letter-spacing:-.5px;color:var(--ink)}
.u-hero-text{margin-top:14px;max-width:520px;font-size:16px;line-height:1.6;color:#555}
.u-hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.u-hero .u-btn{margin-top:0;min-height:50px;padding:0 28px;font-size:15px;border-radius:var(--r-pill);
background:var(--ink);color:#fff;border-color:var(--ink)}
.u-hero .u-btn:hover{background:var(--point);border-color:var(--point);color:#fff}
.u-hero .u-btn.line{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.u-hero .u-btn.line:hover{background:var(--ink);color:#fff}
.u-hero-art{flex:1 1 340px;min-width:280px;aspect-ratio:16/10;border-radius:20px;overflow:hidden;
background:repeating-linear-gradient(45deg,#f0f2f1 0 14px,#e8ecea 14px 28px);display:grid;place-items:center}
.u-hero-art span{font-size:13px;color:#8a938f}
.u-hero-art img{width:100%;height:100%;object-fit:cover}
.u-hero-scroll{display:none}
/* ── 히어로 아래 띠 카드 3칸 ────────────────────────── */
.u-strip{padding:48px 0 0}
.u-strip ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.u-strip a{display:block;height:100%;border-radius:var(--r-card);padding:24px;transition:transform .22s}
.u-strip a:hover{transform:translateY(-3px)}
.u-strip .tone-mint{background:var(--mint)}
.u-strip .tone-cream{background:var(--cream)}
.u-strip .tone-peach{background:var(--peach)}
.u-strip strong{display:block;font-size:18px;font-weight:800;line-height:1.4}
.u-strip em{display:block;margin-top:8px;font-size:13px;font-style:normal;color:#5f6a66}
.u-strip .tone-cream em{color:#6d6858}
.u-strip .tone-peach em{color:#736258}
/* ── 구역 공통 ──────────────────────────────────────── */
.u-sect{padding:64px 0 0}
.u-sect+.u-sect{padding-top:64px}
.u-sect-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
margin-bottom:22px;flex-wrap:wrap}
.u-eyebrow{display:none}
.u-sect-hd h2{font-size:26px;font-weight:900;letter-spacing:-.02em}
.u-sect-desc{margin-top:6px;font-size:14px;color:var(--gray)}
/* ── Weekly Special ─────────────────────────────────── */
.u-weekly{padding:72px 0 0}
.u-weekly>.u-wrap>h2{font-size:26px;font-weight:900;text-align:center;letter-spacing:-.02em}
.u-weekly ul{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.u-weekly a{position:relative;display:block;aspect-ratio:16/8;border-radius:var(--r-card);
overflow:hidden;transition:transform .22s}
.u-weekly a:hover{transform:translateY(-3px)}
.u-weekly .tone-mint{background:repeating-linear-gradient(45deg,var(--mint-d) 0 16px,#bfdfd0 16px 32px)}
.u-weekly .tone-peach{background:repeating-linear-gradient(45deg,var(--peach-d) 0 16px,#eccabd 16px 32px)}
.u-weekly .tone-cream{background:repeating-linear-gradient(45deg,#eee2c4 0 16px,#e5d7b4 16px 32px)}
.u-weekly .tx{position:absolute;left:24px;right:24px;bottom:22px}
.u-weekly strong{display:block;font-size:22px;font-weight:900;line-height:1.3;color:var(--ink)}
.u-weekly em{display:block;margin-top:6px;font-size:13.5px;font-style:normal;color:#4c5652}
/* ── 상품 카드 그리드 ───────────────────────────────── */
.u-grid{display:grid;gap:28px 16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.u-grid.cols-2,.u-grid.cols-3,.u-grid.cols-4,.u-grid.cols-5{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.u-card{position:relative;min-width:0}
.u-card-img{position:relative;display:block;overflow:hidden;background:var(--bg2);aspect-ratio:1;border-radius:var(--r-img)}
.u-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.u-card:hover .u-card-img img{transform:scale(1.04)}
.u-soldout{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
background:rgba(20,20,20,.65);color:#fff;font-size:12.5px;font-weight:700;padding:8px 0}
.u-card-icon{position:absolute;left:10px;top:10px;display:flex;gap:4px;z-index:2}
.u-card-icon img{width:auto;height:20px}
.u-card-body{padding-top:12px}
.u-card-brand{display:block;font-size:13px;font-weight:800;color:#555}
.u-card-brand:hover{color:var(--point)}
.u-card-name{display:-webkit-box;margin-top:4px;font-size:14.5px;font-weight:400;line-height:1.45;
overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.u-card-name:hover{color:var(--point)}
.u-card-desc{margin-top:6px;font-size:12.5px;color:var(--gray2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.u-card-price{margin-top:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.u-card-price strong{font-size:16px;font-weight:900}
.u-card-price del{font-size:13px;color:var(--gray2)}
.u-rate{font-style:normal;font-size:16px;font-weight:900;color:var(--sale)}
.u-card-rv{margin-top:6px;font-size:12.5px;color:var(--gray)}
/* 예시 카드 (자료가 없을 때) */
.u-demo-img{display:flex!important;align-items:center;justify-content:center}
.u-demo-img>span{font-size:12px;color:#98a09c}
.u-demo-img.tone-a{background:repeating-linear-gradient(45deg,#f4f5f4 0 12px,#edefee 12px 24px)}
.u-demo-img.tone-b{background:repeating-linear-gradient(45deg,#f2f4f3 0 12px,#eaeeec 12px 24px)}
.u-demo-img.tone-c{background:repeating-linear-gradient(45deg,#f5f3ef 0 12px,#eeebe4 12px 24px)}
.u-demo-img.tone-d{background:repeating-linear-gradient(45deg,#f6f2f1 0 12px,#efe9e7 12px 24px)}
.u-demo-img.tone-e{background:repeating-linear-gradient(45deg,#f1f5f3 0 12px,#e9efec 12px 24px)}
.u-demo-img.tone-f{background:repeating-linear-gradient(45deg,#f4f4f6 0 12px,#ecedf0 12px 24px)}
.u-demo-img.tone-g{background:repeating-linear-gradient(45deg,#f3f5f6 0 12px,#eaeef0 12px 24px)}
.u-demo-img.tone-h{background:repeating-linear-gradient(45deg,#f6f4ee 0 12px,#efece2 12px 24px)}
.u-demo-badge{position:absolute;left:10px;top:10px;height:24px;padding:0 10px;background:#fff;
border:1.5px solid var(--sale);border-radius:var(--r-pill);color:var(--sale);font-size:11.5px;
font-weight:800;font-style:normal;line-height:21px;letter-spacing:0}
/* ── 메인 게시판 ────────────────────────────────────── */
.u-bbs{padding:72px 0 0}
.u-bbs-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.u-bbs-box{border:1px solid var(--line);border-radius:var(--r-card);padding:26px 28px}
.u-bbs-box header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
padding-bottom:0;border-bottom:0;margin-bottom:14px}
.u-bbs-box h2{font-size:18px;font-weight:900}
.u-bbs-box li{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2)}
.u-bbs-box li:last-child{border-bottom:0}
.u-bbs-box li a,.u-bbs-box li span{flex:1 1 auto;min-width:0;font-size:14.5px;overflow:hidden;
white-space:nowrap;text-overflow:ellipsis}
.u-bbs-box li a:hover{color:var(--point)}
.u-bbs-box li em{flex:0 0 auto;font-style:normal;font-size:12.5px;color:var(--gray2)}
.u-bbs-empty{padding:26px 0;text-align:center;border-bottom:0}
.u-bbs-empty p{font-size:14.5px;color:var(--ink2)}
.u-bbs-empty span{display:block;margin-top:8px;font-size:12.5px;color:var(--gray2);line-height:1.7}
/* ============================================================
상품 리스트 (분류 · 검색 · 상품유형)
============================================================ */
#sct,.u-sct{max-width:1280px;margin:0 auto;padding:0 20px}
.u-sct-hero{padding:0 0 30px;text-align:center}
.u-sct-hero .eb{font-family:var(--latin);font-size:11.5px;font-weight:800;letter-spacing:.28em;color:var(--point)}
.u-sct-hero h2{margin-top:12px;font-size:34px;font-weight:800;letter-spacing:-.03em}
.u-sct-hero p{margin-top:12px;font-size:14.5px;color:var(--gray)}
#sct_ct_1,.u-sct-sub{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 34px;padding:0;border:0;background:none}
#sct_ct_1 h2{display:none}
#sct_ct_1 ul,.u-sct-sub ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0}
#sct_ct_1 li,.u-sct-sub li{margin:0;padding:0;border:0;background:none;width:auto;float:none}
#sct_ct_1 a,.u-sct-sub a{display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1px solid var(--line);border-radius:19px;font-size:13.5px;color:var(--ink2);background:#fff}
#sct_ct_1 a:hover,.u-sct-sub a:hover{border-color:var(--ink);color:var(--ink)}
#sct_ct_1 a.on,.u-sct-sub a.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
#sct_sortlst{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;margin-bottom:26px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);position:static;height:auto;flex-wrap:wrap}
#sct_sort{margin:0;padding:0;border:0;float:none}
#sct_sort h2{display:none}
#ssch_sort{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0}
#ssch_sort li{margin:0;padding:0;border:0;background:none;float:none;width:auto}
#ssch_sort li:after{display:none}
/* 코어가 정렬 링크에 border-left(구분선)를 넣는데 테마의 border-radius 와 겹치면
글자 왼쪽에 열린 반원이 그려진다. 선택자를 #sct_sortlst 부터 써서 확실히 이기게 한다.
(2026-08-31 점검) */
#sct_sortlst #ssch_sort li a{display:inline-flex;align-items:center;height:32px;padding:0 12px;font-size:13px;color:var(--gray);border-radius:16px;border:0;background:none;float:none;width:auto}
#sct_sortlst #ssch_sort li a:hover{background:var(--bg);color:var(--ink)}
#sct_lst{display:flex;gap:4px;margin:0;padding:0;float:none;position:static}
#sct_lst li{margin:0;padding:0;background:none;border:0;float:none;width:auto}
#sct_lst button{width:34px;height:32px;border:1px solid var(--line);background:#fff;font-size:14px;color:var(--gray)}
#sct_lst button:hover{border-color:var(--ink);color:var(--ink)}
#sct_hhtml:empty,#sct_thtml:empty{display:none}
#sct_hhtml,#sct_thtml{margin:0 0 20px}
.sct_noitem{padding:80px 20px;text-align:center;color:var(--gray);border:1px dashed var(--line);font-size:15px}
.sct_admin{text-align:right;margin-bottom:10px}
/* 상품 목록 자체 — 코어 스타일을 덮어쓴다 */
#sct .sct,ul.sct,ul.sct.lists-row,#sct .sct.lists-row{display:grid;gap:38px 22px;margin:0;padding:0;border:0;width:auto;float:none;overflow:visible}
#sct .sct.sct_10,ul.sct.sct_10{grid-template-columns:repeat(4,minmax(0,1fr))}
#sct .sct.sct_20,ul.sct.sct_20{grid-template-columns:repeat(3,minmax(0,1fr))}
#sct .sct.sct_30,ul.sct.sct_30{grid-template-columns:minmax(0,1fr)}
#sct .sct.sct_40,ul.sct.sct_40{grid-template-columns:repeat(5,minmax(0,1fr))}
ul.sct>li.sct_li{width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;float:none!important;background:none!important;list-style:none;position:relative}
ul.sct>li.sct_li:before,ul.sct>li.sct_li:after{display:none}
.sct_img{position:relative;overflow:hidden;background:var(--bg);aspect-ratio:4/5;margin:0;padding:0;border:0;width:auto;height:auto}
.sct_img>a{display:block;width:100%;height:100%}
.sct_img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.sct_li:hover .sct_img img{transform:scale(1.05)}
.sct_btn.list-10-btn{position:absolute;left:0;right:0;bottom:0;transform:translateY(100%);transition:.28s;margin:0;padding:0;background:none}
.sct_li:hover .sct_btn.list-10-btn{transform:none}
.sct_btn .btn_cart{width:100%;height:48px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;border:0}
.sct_btn .btn_cart:hover{background:var(--point)}
.shop_icon_soldout{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(17,17,17,.55)}
.shop_icon_soldout .soldout_txt{color:#fff;font-family:var(--latin);font-size:13px;font-weight:800;letter-spacing:.2em}
.sct_ct_wrap{padding:16px 0 0;margin:0;border:0;background:none;position:relative}
.sct_star{margin-bottom:6px}
.sct_id{font-size:11.5px;color:var(--gray2)}
.sct_txt{margin:0;padding:0;font-size:15px;font-weight:500;line-height:1.5;height:auto;overflow:hidden}
.sct_txt a{display:block;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sct_txt a:hover{text-decoration:underline}
.sct_basic{margin-top:6px;font-size:12.5px;color:var(--gray2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sct_bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:10px;padding:0;border:0}
.sct_cost{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:var(--latin);font-size:17px;font-weight:800;color:var(--ink)}
.sct_cost .sct_dict{font-size:13px;font-weight:400;color:var(--gray2);text-decoration:line-through}
.sct_op_btn{position:relative;display:flex;gap:4px;flex:0 0 auto}
.sct_op_btn button{width:32px;height:32px;border:1px solid var(--line);background:#fff;font-size:13px;color:var(--gray)}
.sct_op_btn button:hover{border-color:var(--point);color:var(--point)}
.sit_icon_li{margin-top:8px;display:flex;gap:4px}
.sit_icon_li img{height:18px;width:auto}
.sct_sns_wrap{display:none}
.sct_sns_wrap .sct_sns{position:absolute;right:0;bottom:40px;z-index:30;background:#fff;border:1px solid var(--ink);padding:12px;white-space:nowrap}
.sct_sns_wrap .sct_sns h3{font-size:11px;color:var(--gray);margin-bottom:8px}
.sct_sns_bg{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.25)}
.cart-layer{display:none}
/* ============================================================
상품 상세
============================================================ */
#sit_ov_from{max-width:1440px;margin:0 auto;padding:0 32px}
#sit_ov_wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:60px;margin:0 0 60px;padding:0;border:0}
#sit_pvi{width:auto;float:none;margin:0;padding:0;border:0}
#sit_pvi_big{position:relative;width:100%;background:var(--bg);aspect-ratio:1/1;overflow:hidden;border:0;margin:0}
#sit_pvi_big a{display:none;width:100%;height:100%}
#sit_pvi_big a.visible{display:block}
#sit_pvi_big img{width:100%;height:100%;object-fit:cover}
#popup_item_image{position:absolute!important;right:14px;bottom:14px;display:flex!important;width:44px;height:44px;align-items:center;justify-content:center;background:rgba(255,255,255,.94);color:var(--ink);font-size:16px;z-index:5}
#sit_pvi_thumb{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:0;width:auto}
#sit_pvi_thumb li{width:74px;height:74px;margin:0;padding:0;border:1px solid var(--line);overflow:hidden;float:none;background:var(--bg)}
#sit_pvi_thumb li:hover{border-color:var(--ink)}
#sit_pvi_thumb img{width:100%;height:100%;object-fit:cover}
#sit_ov{width:auto;float:none;margin:0;padding:0;border:0}
#sit_title{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.35;padding:0;margin:0;border:0;background:none;color:var(--ink)}
#sit_desc{margin-top:12px;font-size:14.5px;color:var(--gray);line-height:1.8;padding:0;border:0}
#sit_opt_info{margin-top:8px;font-size:12.5px;color:var(--gray2)}
#sit_star_sns{display:flex;align-items:center;gap:14px;margin:18px 0;padding:14px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);font-size:13px;color:var(--gray);position:relative}
#sit_star_sns .sit_star{width:88px}
#sit_btn_opt{margin-left:auto;display:flex;gap:6px;position:relative}
#sit_btn_opt #btn_wish,#sit_btn_opt .btn_sns_share{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);background:#fff;font-size:13px;cursor:pointer}
#sit_btn_opt .sns_area{display:none;position:absolute;right:0;top:40px;z-index:30;background:#fff;border:1px solid var(--ink);padding:10px;white-space:nowrap}
.sit_info{margin-top:6px}
.sit_ov_tbl{width:100%;border-top:1px solid var(--line)}
.sit_ov_tbl th,.sit_ov_tbl td{padding:13px 4px;border-bottom:1px solid var(--line2);font-size:14px;text-align:left;vertical-align:middle}
.sit_ov_tbl th{width:130px;color:var(--gray);font-weight:400}
.sit_ov_tbl .tr_price td strong{font-family:var(--latin);font-size:30px;font-weight:900;letter-spacing:-.02em}
.sit_ov_tbl select{height:40px;padding:0 10px;border:1px solid var(--line)}
.sit_option,#sit_sel_option{margin-top:22px;padding:0;border:0}
.sit_option h3,#sit_sel_option h3{font-size:13.5px;font-weight:700;margin-bottom:10px}
.sit_option table{width:100%}
.sit_option th{text-align:left;font-size:13px;color:var(--gray);font-weight:400;padding:6px 8px 6px 0;white-space:nowrap;vertical-align:middle}
.sit_option td{padding:6px 0}
.sit_option select,.it_option,.it_supply{width:100%;height:48px;padding:0 12px;border:1px solid var(--line);background:#fff}
#sit_opt_added{border-top:1px solid var(--line);margin-top:6px}
#sit_opt_added li,.sit_opt_added li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line2);flex-wrap:wrap;background:none}
.sit_opt_subj{flex:1 1 160px;font-size:14px;font-weight:500}
.opt_name{flex:1 1 160px;min-width:0}
.opt_count{display:flex;align-items:center;gap:8px}
.sit_qty_minus,.sit_qty_plus{width:34px;height:34px;border:1px solid var(--line);background:#fff;font-size:12px}
.sit_qty_minus:hover,.sit_qty_plus:hover{border-color:var(--ink)}
.opt_count .num_input{width:52px;height:34px;text-align:center;border:1px solid var(--line);padding:0}
.sit_opt_prc{font-family:var(--latin);font-size:13.5px;color:var(--gray);min-width:64px;text-align:right}
.sit_opt_del{width:34px;height:34px;border:1px solid var(--line);background:#fff}
#sit_tot_price,.sit_tot_price{margin-top:18px;padding:18px 0;border-top:2px solid var(--ink);display:flex;align-items:baseline;justify-content:flex-end;gap:10px;font-size:14px;color:var(--gray)}
#sit_tot_price strong,.sit_tot_price strong{font-family:var(--latin);font-size:30px;font-weight:900;color:var(--point);letter-spacing:-.02em}
#sit_ov_soldout{margin-top:16px;padding:14px;background:#fff4f3;border:1px solid #ffd7d3;color:var(--point2);font-size:13.5px;text-align:center}
#sit_btn_alm{flex:1 1 100%;height:52px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);font-size:14px}
.itemform-naverpay{flex:1 1 100%}
#sit_siblings{display:flex;gap:8px;justify-content:flex-end;margin:0 0 40px;padding:0;border:0}
#sit_siblings a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line);font-size:13px;background:#fff}
#sit_siblings a:hover{border-color:var(--ink)}
/* 관련상품 · 탭 */
#sit_rel{max-width:1440px;margin:0 auto 60px;padding:0 32px}
#sit_rel h2{font-size:22px;font-weight:800;margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
#sit_info{max-width:1440px;margin:0 auto;padding:0 32px 60px}
#sit_tab{border:0}
#sit_tab .tab_tit{display:flex;gap:0;border-bottom:1px solid var(--line);margin:0 0 34px;padding:0}
#sit_tab .tab_tit li{flex:1 1 0;margin:0;padding:0;border:0;background:none;float:none;width:auto}
#sit_tab .tab_tit button{width:100%;height:58px;font-size:15px;font-weight:500;color:var(--gray);border-bottom:2px solid transparent;background:none}
#sit_tab .tab_tit button.selected{color:var(--ink);font-weight:800;border-bottom-color:var(--ink)}
#sit_tab .tab_tit .item_use_count,#sit_tab .tab_tit .item_qa_count{font-family:var(--latin);color:var(--point);margin-left:4px}
#sit_tab .tab_con>li{padding:0;border:0}
/* 코어가 .contents_tit 를 position:absolute;height:0 로 숨겨 둔다 — 풀어야 제목이 제자리에 선다 (2026-08-31) */
#sit_tab .tab_con h2,#sit_tab .tab_con .contents_tit{position:static;height:auto;overflow:visible;clip:auto;font-size:20px;font-weight:800;margin:0 0 20px;line-height:1.4}
#sit_inf_explan{font-size:15.5px;line-height:1.95;overflow-x:auto}
#sit_inf_explan img{height:auto}
#sit_inf_open{width:100%;margin-top:34px;border-top:1px solid var(--ink)}
#sit_inf_open th,#sit_inf_open td{padding:13px 14px;border-bottom:1px solid var(--line2);font-size:14px;text-align:left}
#sit_inf_open th{width:220px;background:var(--bg);color:var(--gray);font-weight:400}
#sit_dvr,#sit_ex{font-size:14.5px;line-height:1.9}
#sit_ex{margin-top:30px}
#sit_dvr h3,#sit_ex h3{font-size:16px;margin-bottom:12px}
#sit_buy{display:none}
/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width:1280px){
#sct,.u-sct,#sit_ov_from,#sit_rel,#sit_info{padding-left:24px;padding-right:24px}
.u-hero{min-height:540px}
}
@media (max-width:1024px){
.u-hero{min-height:460px}
.u-sect{padding:56px 0}
.u-sect-hd h2{font-size:27px}
.u-grid.cols-4,.u-grid.cols-5{grid-template-columns:repeat(3,minmax(0,1fr))}
#sct .sct.sct_10,ul.sct.sct_10,#sct .sct.sct_40,ul.sct.sct_40{grid-template-columns:repeat(3,minmax(0,1fr))}
.u-bbs-in{grid-template-columns:minmax(0,1fr);gap:34px}
.u-bbs{padding:56px 0 66px}
#sit_ov_wrap{grid-template-columns:minmax(0,1fr);gap:34px}
#sit_title{font-size:24px}
}
@media (max-width:640px){
#sct,.u-sct,#sit_ov_from,#sit_rel,#sit_info{padding-left:16px;padding-right:16px}
.u-hero{min-height:380px}
.u-hero-in{padding-top:48px;padding-bottom:56px}
.u-hero-text{font-size:15px;margin-top:16px}
.u-hero .u-btn{margin-top:26px}
.u-sect{padding:44px 0}
.u-sect-hd{margin-bottom:24px}
.u-sect-hd h2{font-size:22px}
/* auto-fill 최소폭(200px)이 좁은 화면에서 1열로 떨어진다 — 두 칸으로 못박는다 */
.u-grid,.u-grid.cols-2,.u-grid.cols-3,.u-grid.cols-4,.u-grid.cols-5{
grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
#sct .sct,ul.sct{gap:26px 12px}
#sct .sct.sct_10,ul.sct.sct_10,#sct .sct.sct_20,ul.sct.sct_20,#sct .sct.sct_40,ul.sct.sct_40{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 손으로 보는 화면이라 상품명·값을 오히려 키운다 (2026-09-12 요청) */
.u-card-brand{font-size:14px}
.u-card-name,.sct_txt{font-size:15.5px;line-height:1.4}
.u-card-price{gap:6px}
.u-card-price strong,.sct_cost{font-size:18px}
.u-card-price del{font-size:13px}
.u-rate{font-size:18px}
.u-card-rv{font-size:13px}
.u-card-desc{font-size:13px}
.u-sct-hero h2{font-size:24px}
#sct_sortlst{gap:10px}
#sct_sortlst #ssch_sort li a{height:30px;padding:0 9px;font-size:12px}
#sit_title{font-size:20px}
.sit_ov_tbl th{width:96px;font-size:13px}
.sit_ov_tbl .tr_price td strong{font-size:24px}
#sit_tot_price strong,.sit_tot_price strong{font-size:24px}
#sit_tab .tab_tit button{height:48px;font-size:13.5px}
#sit_inf_open th{width:110px;font-size:12.5px}
#sit_pvi_thumb li{width:58px;height:58px}
}
/* ── 전체 상품분류 ──────────────────────────────────── */
.u-allcate{padding-bottom:40px}
.u-allcate-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 26px}
.u-allcate-list>li{border-top:2px solid var(--ink);padding-top:16px}
.u-allcate-list h3{font-size:17px;font-weight:800;margin-bottom:12px}
.u-allcate-list h3 em{font-family:var(--latin);font-style:normal;font-size:12px;font-weight:700;color:var(--point);margin-left:4px}
.u-allcate-list ul li{padding:5px 0}
.u-allcate-list ul a{font-size:14px;color:var(--gray)}
.u-allcate-list ul a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:1024px){.u-allcate-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.u-allcate-list{grid-template-columns:minmax(0,1fr);gap:24px}}
/* 상품상세 — 스킨 style.css 의 고정폭을 푼다 (모바일 가로 넘침 방지) */
#sit_ov_wrap{width:auto;max-width:100%}
#sit_tab{width:auto;max-width:100%;float:none}
#sit_pvi,#sit_ov,#sit_info,#sit_rel{max-width:100%}
.sqa_section{width:auto;max-width:100%;float:none}
#sit_inf_explan img,#sit_dvr img,#sit_ex img{max-width:100%;height:auto}
/* ── 좁은 화면(360px 급) 가로 넘침 방지 · 2026-08-31 점검 ─────────────────
그누보드 코어 화면(새글모음·FAQ·자동등록방지·상품검색)은 고정폭이라
갤럭시 계열 360px 기기에서 옆으로 밀린다. 이 블록을 지우면 증상이 돌아온다. */
#new_sch,#faq_sch{min-width:0;max-width:100%;box-sizing:border-box}
#pw_confirm,.mbskin,#info_fs{max-width:100%;min-width:0}
#info_fs input,#info_fs .frm_input,#pw_confirm input,.mbskin input{max-width:100%;min-width:0;box-sizing:border-box}
/* 320px 급 좁은 기기 — 한 낱말이 칸보다 길면 그때만 끊어 준다.
word-break:keep-all 로 한글 단어는 그대로 두되, 넘치는 것보다는 끊는 편이 낫다. */
body{overflow-wrap:break-word}
#new_sch form,#faq_sch form{width:100%;max-width:100%;flex-wrap:wrap}
#new_sch select,#new_sch input,#new_sch .frm_input,
#faq_sch select,#faq_sch input,#faq_sch .frm_input{max-width:100%}
#captcha{max-width:100%}
#captcha img,#captcha audio,#captcha_audio{max-width:100%}
#ssch_q,.ssch_input{max-width:100%}
@media (max-width:480px){
#new_sch,#faq_sch{padding:18px}
}
/* ── 모바일 입력창 확대 방지 · 2026-08-31 점검 ────────────────────────────
iOS 사파리는 글자가 16px 보다 작은 입력칸을 누르면 화면을 확대해 버리고,
사용자가 손으로 되돌려야 한다. 휴대폰에서만 글자를 16px 로 올려 막는다.
(칸의 높이·테두리·색은 그대로이므로 디자인은 유지된다)
화면별 규칙(.xx-auth .fld input 등)이 더 세서 !important 로 눌러 둔다 —
이 한 줄을 빼면 로그인·가입·검색칸에서 확대가 다시 일어난다. */
@media (max-width:768px){
input[type=text],input[type=password],input[type=email],input[type=tel],
input[type=number],input[type=search],input[type=url],input[type=date],
input[type=time],input[type=datetime-local],input[type=month],input[type=week],
input:not([type]),select,textarea{font-size:16px!important}
}
/* ── 상품 아이콘(히트·추천·최신·인기·할인) 배지 · 2026-08-31 점검 ─────────
영카트는 관리자가 아이콘 이미지를 올리지 않으면 글자를 그대로 내보낸다.
그대로 두면 "추천최신할인" 처럼 붙어 나오므로 배지 모양을 입힌다. */
.sit_icon,.u-card-icon{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.shop_icon{display:inline-block;padding:3px 10px;font-size:11.5px;font-weight:800;line-height:1.5;
letter-spacing:0;color:var(--sale);background:#fff;border:1.5px solid var(--sale);
border-radius:var(--r-pill);white-space:nowrap}
.shop_icon_1{color:var(--sale);border-color:var(--sale)} /* 히트 */
.shop_icon_2{color:var(--point-d);border-color:var(--point-d)} /* 추천 */
.shop_icon_3{color:var(--point-d);border-color:var(--point-d)} /* 최신 */
.shop_icon_4{color:#8a6d1c;border-color:#c9a227} /* 인기 */
.shop_icon_5{color:#fff;background:var(--sale);border-color:var(--sale)} /* 할인 */
/* 정렬 목록이 카드 폭을 다 쓰게 한다 — 코어의 float:left 때문에 절반만 쓰고 3줄로 늘어졌다
(2026-08-31 점검) */
#sct_sortlst #sct_sort{flex:1 1 auto;width:auto;max-width:100%;float:none}
#sct_sortlst #ssch_sort{float:none;width:100%}
/* ── 폼 입력칸 한 벌로 통일 · 2026-08-31 점검 ──────────────────────────────
로그인 · 회원가입 · 비밀번호찾기 · 자동등록방지 칸의 높이·테두리·둥글기·안여백이
화면마다 달랐다(로그인 52px 인데 가입은 다른 값, 비밀번호찾기는 아예 브라우저 기본).
★ 칸 모양을 바꾸려면 이 블록만 고치면 네 화면이 함께 따라간다. */
#mb_login input[type=text],#mb_login input[type=password],#mb_login input[type=email],
#mb_login input[type=tel],#mb_login input[type=number],#mb_login select,
.auth input[type=text],.auth input[type=password],.auth input[type=email],.auth input[type=tel],.auth select,
.b01-auth input[type=text],.b01-auth input[type=password],.b01-auth input[type=email],.b01-auth select,
#register_form input[type=text],#register_form input[type=password],#register_form input[type=email],
#register_form input[type=tel],#register_form input[type=number],#register_form select,#register_form .frm_input,
#find_info input[type=text],#find_info input[type=email],#find_info select,#find_info .frm_input,
#pw_confirm input[type=password],#pw_confirm .frm_input,
#captcha.m_captcha #captcha_key,#captcha #captcha_key,#captcha .captcha_box,#captcha_key,.captcha_box{
box-sizing:border-box;height:52px;
border:1px solid var(--line);border-radius:3px;
padding:0 16px;font-size:16px;line-height:normal;
background:#fff;color:inherit;
-webkit-appearance:none;outline:0;
transition:border-color .2s}
#mb_login select,.auth select,.b01-auth select,#register_form select,#find_info select{
-webkit-appearance:menulist;appearance:menulist;padding-right:8px}
#mb_login textarea,.auth textarea,.b01-auth textarea,#register_form textarea,#find_info textarea{
box-sizing:border-box;width:100%;min-height:150px;
border:1px solid var(--line);border-radius:3px;
padding:12px 16px;font-size:16px;line-height:1.7;
background:#fff;color:inherit;-webkit-appearance:none;outline:0}
/* 자동등록방지 칸은 좁으니 폭만 따로 둔다 */
#captcha.m_captcha #captcha_key,#captcha #captcha_key,#captcha .captcha_box,#captcha_key,.captcha_box{width:120px;text-align:center;letter-spacing:.2em}
/* 폼을 감싼 fieldset 에 브라우저 기본 테두리(2px groove)가 남아 회색 홈 박스가 그려졌다.
로그인·비밀번호찾기·자동등록방지에서 특히 눈에 띄었다. (2026-08-31 점검) */
#mb_login fieldset,.auth fieldset,.b01-auth fieldset,#fregisterform fieldset,
#register_form fieldset,#find_info fieldset,#pw_confirm fieldset,
fieldset#login_fs,fieldset#info_fs,fieldset#captcha,fieldset.captcha,fieldset.srch,
#fregister fieldset,fieldset.fregister_agree{
border:0;margin:0;padding:0;min-width:0}
/* 약관 동의 체크줄은 위쪽 여백만 남긴다 (2026-09-01 점검) */
#fregister fieldset.fregister_agree,fieldset.fregister_agree{margin-top:14px}
#mb_login legend,.auth legend,.b01-auth legend,#register_form legend,#find_info legend{padding:0}
/* ── 칸 옆 버튼·자동등록방지 줄 정렬 · 2026-08-31 점검 ─────────────────────
'주소 검색' 버튼이 우편번호 칸보다 낮고 한 줄 아래로 밀려 있었고,
자동등록방지는 그림·입력칸·새로고침 버튼의 높이와 윗선이 제각각이었다.
칸 높이(52px)에 맞춰 한 줄로 가지런히 세운다. */
#register_form .btn_frmline,#find_info .btn_frmline,#mb_login .btn_frmline,
.auth .btn_frmline,.b01-auth .btn_frmline,#register_form button.btn_frmline{
box-sizing:border-box;height:52px;padding:0 16px;border-radius:3px;
display:inline-flex;align-items:center;justify-content:center;
vertical-align:top;line-height:1;white-space:nowrap}
#fregisterform #captcha,#captcha{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
#fregisterform #captcha #captcha_img,#captcha #captcha_img,#captcha img{vertical-align:middle;border-radius:3px;max-width:100%}
/* #captcha_reload 는 브라우저 기본 모양(회색 그라데이션)이라 테마와 겉돌았다 (2026-08-31 점검) */
#fregisterform #captcha #captcha_reload,#captcha #captcha_reload,#captcha button{text-indent:0;overflow:visible;width:auto;white-space:nowrap;background-image:none;background:#fff;color:inherit;border:1px solid var(--line);cursor:pointer;font-size:14px;
box-sizing:border-box;height:52px;min-width:52px;padding:0 12px;border-radius:3px;
display:inline-flex;align-items:center;justify-content:center;line-height:1}
#captcha #captcha_info,#captcha .captcha_info{flex:1 1 100%;margin:6px 0 0;font-size:13px;line-height:1.6}
#captcha #captcha_audio,#captcha audio{flex:1 1 100%;max-width:100%;margin:0 0 6px}
/* legend 가 섹션 제목(h2)과 같은 '자동등록방지' 를 한 번 더 찍어 두 번 나왔다 → 읽기용으로만 남긴다 */
#captcha legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 안내 문구는 버튼 옆에 끼어 뒤엉켰다 → 늘 아랫줄 전체를 쓰게 한다 */
#fregisterform #captcha #captcha_info,#captcha #captcha_info,#captcha .captcha_info{flex:0 0 100%;min-width:100%}
#captcha #captcha_reload span{display:none}
/* 그누보드 가입양식은 두 칸짜리 줄의 에도 half_input 클래스를 붙인다.
입력칸 모양 규칙(.half_input)이 그 에까지 걸려 비밀번호 줄만 네모 상자가 그려졌다.
줄을 감싸는 에서는 칸 모양을 없앤다. (2026-08-31 점검) */
#register_form li.half_input,#register_form li.full_input,#register_form li.twopart_input,
#register_form li.margin_input,#register_form li.left_input,#register_form li.frm_input{
border:0;background:none;height:auto;padding:0;border-radius:0;box-shadow:none}
/* 반폭 줄(half_input) 안의 입력칸은 그 줄을 꽉 채우게만 한다.
★ 줄의 배치(2열이냐 한 줄이냐)는 테마 디자인이므로 건드리지 않는다 —
display·float·width 를 손댔더니 PC 에서 섹션 카드가 겹쳐 무너졌다. (2026-08-31 점검) */
#register_form li.half_input>input,#register_form li.half_input>.frm_input{width:100%}
/* 우편번호 칸이 줄 전체를 차지해 '주소 검색' 버튼이 아랫줄로 밀렸다.
칸을 줄이고 버튼을 옆에 붙인다. (2026-08-31 점검) */
#register_form #reg_mb_zip,#register_form input[name=mb_zip],#find_info input[name=mb_zip]{
width:150px;max-width:48%;display:inline-block;vertical-align:middle;margin-right:8px}
#register_form #reg_mb_zip+.btn_frmline,#register_form input[name=mb_zip]+.btn_frmline{vertical-align:middle}
/* 로그인의 아이디·비밀번호 칸을 붙여 놓은 디자인인데, 테두리가 맞닿아 두 겹(2px)으로 보였다.
1px 겹쳐 한 줄로 만든다. (2026-08-31 점검) */
#mb_login input[type=password]{margin-top:-1px}
#mb_login input[type=text]:focus,#mb_login input[type=password]:focus{position:relative;z-index:1}
/* 라벨 옆 도움말 단추(.tooltip_icon)는 코어가 '설명보기' 글자만 내보내고 아이콘은 테마 몫이다.
그대로 두면 테마마다 빈 동그라미(20×20)이거나 아예 0×0 이라 안 보였다.
물음표 아이콘으로 통일한다. (2026-08-31 점검) */
#register_form .tooltip_icon,.tooltip_icon{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;min-width:18px;padding:0;margin-left:5px;
border:1px solid var(--line);border-radius:50%;background:none;
font-size:0;line-height:1;vertical-align:middle;cursor:pointer}
#register_form .tooltip_icon::before,.tooltip_icon::before{
content:"?";font-size:11px;font-weight:700;line-height:1;color:inherit}
/* ── 상품 카드 위의 담기·찜 단추 ────────────────────── */
.u-card{--act:0}
.u-card-act{position:absolute;right:10px;top:10px;z-index:3;display:flex;flex-direction:column;gap:6px;
opacity:var(--act);transition:opacity .2s}
.u-card:hover{--act:1}
.u-card-act button{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--ink);
box-shadow:0 2px 8px rgba(20,20,20,.14);display:grid;place-items:center;font-size:15px;transition:.16s}
.u-card-act button:hover{background:var(--ink);color:#fff}
.u-card-act .btn_wish:hover{background:var(--sale);color:#fff}
/* 손가락으로 쓰는 화면에서는 늘 보이게 */
@media (hover:none){.u-card{--act:1}}
/* ============================================================
상품 상세 — HAESOL 디자인
(요약 블록 · 혜택 표 · 구매 단추)
============================================================ */
#sit_ov{padding-left:0}
.h4-brand{font-size:14px;font-weight:800;color:#555;margin-bottom:12px}
.h4-brand i{font-style:normal;color:var(--gray2)}
#sit_title{font-size:22px;font-weight:800;line-height:1.45;letter-spacing:-.02em}
#sit_desc{margin-top:10px;font-size:13.5px;color:var(--gray);line-height:1.7}
.h4-price{margin-top:16px}
.h4-price del{font-size:14px;color:var(--gray2)}
.h4-price p{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.h4-price em{font-style:normal;font-size:26px;font-weight:900;color:var(--sale)}
.h4-price strong{font-size:26px;font-weight:900}
.h4-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
/* 값은 요약 블록에서 보여 주므로 표에서는 감춘다 */
.sit_ov_tbl .tr_price,.sit_ov_tbl tr.tr_price{display:none}
.sit_info{margin-top:22px}
.sit_ov_tbl{width:100%;border-top:1px solid var(--line);border-collapse:collapse}
.sit_ov_tbl th,.sit_ov_tbl td{padding:14px 4px;border-bottom:1px solid var(--line2);
font-size:13.5px;text-align:left;line-height:1.6;vertical-align:top}
.sit_ov_tbl th{width:88px;color:var(--gray2);font-weight:400;white-space:nowrap}
.sit_ov_tbl td{color:var(--ink2)}
.sit_ov_tbl td strong{font-weight:800;color:var(--ink)}
/* 별점·후기 줄 */
#sit_star_sns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
font-size:13.5px;color:var(--gray)}
#sit_star_sns .sit_star{vertical-align:middle}
#sit_btn_opt{margin-left:auto;display:flex;align-items:center;gap:10px}
#sit_btn_opt #btn_wish,#sit_btn_opt .btn_sns_share{width:38px;height:38px;border-radius:50%;
border:1px solid var(--line3);background:#fff;display:inline-flex;align-items:center;
justify-content:center;font-size:15px;color:var(--gray);cursor:pointer;position:relative}
#sit_btn_opt #btn_wish:hover{border-color:var(--sale);color:var(--sale)}
#sit_btn_opt .btn_wish_num{position:absolute;right:-2px;bottom:-2px;min-width:16px;height:16px;
padding:0 4px;border-radius:8px;background:var(--ink);color:#fff;font-size:9.5px;line-height:16px;text-align:center}
/* 수량·합계 상자 */
.sit_opt_list,#sit_tot_price{border-radius:var(--r-btn)}
#sit_tot_price{margin-top:14px;padding:16px 18px;background:var(--bg);border-radius:12px;
display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
#sit_tot_price strong{font-size:22px;font-weight:900}
/* 구매 단추 */
/* 상세 탭 */
#sit_tab{border-bottom:1px solid var(--line)}
#sit_tab ul{display:flex;gap:0;flex-wrap:wrap}
#sit_tab li a,#sit_tab li{font-size:15px}
/* 요약 블록에 이미 나온 값·브랜드는 표에서 감춘다 */
.sit_ov_tbl .tr_cust,.sit_ov_tbl .tr_brand{display:none}
#sit_tot_price{border:1px solid var(--line);background:var(--bg)}
/* ============================================================
코어 버튼 한 벌로 통일 · 2026-09-12
------------------------------------------------------------
영카트 코어(css/core.shop.css)는 btn01·btn02·btn_b0*·sit_qty_* 같은
자기 버튼 색을 그대로 들고 옵니다. 파랑·회청색이 섞여 나오므로
테마 색·모양(둥근 모서리)으로 덮어씁니다.
코어가 `a.btn01` 처럼 요소+클래스로 쓰므로 같은 굵기로 맞췄습니다.
============================================================ */
/* 보조 단추 (외곽선) */
a.btn01,button.btn01,input.btn01,
a.btn_b03,.btn_b03,a.btn_b04,.btn_b04,
a.btn_cancel,button.btn_cancel,a.btn_close,button.btn_close{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
min-height:46px;padding:0 20px;border:1.5px solid var(--ink);border-radius:var(--r-btn);
background:#fff;color:var(--ink);font-size:14.5px;font-weight:800;line-height:1;
text-decoration:none;vertical-align:middle;transition:.18s}
a.btn01:hover,button.btn01:hover,input.btn01:hover,
a.btn_b03:hover,.btn_b03:hover,a.btn_b04:hover,.btn_b04:hover,
a.btn_cancel:hover,button.btn_cancel:hover,a.btn_close:hover,button.btn_close:hover{
background:var(--bg2);color:var(--ink);border-color:var(--ink)}
/* 강조 단추 (채움) */
a.btn02,button.btn02,input.btn02,
a.btn_b02,.btn_b02,
a.btn_submit,button.btn_submit,input.btn_submit,
a.btn_frmline,button.btn_frmline{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
min-height:46px;padding:0 20px;border:1.5px solid var(--ink);border-radius:var(--r-btn);
background:var(--ink);color:#fff;font-size:14.5px;font-weight:800;line-height:1;
text-decoration:none;vertical-align:middle;transition:.18s;width:auto}
a.btn02:hover,button.btn02:hover,input.btn02:hover,
a.btn_b02:hover,.btn_b02:hover,
a.btn_submit:hover,button.btn_submit:hover,input.btn_submit:hover,
a.btn_frmline:hover,button.btn_frmline:hover{
background:var(--point);border-color:var(--point);color:#fff}
/* 글자만 있는 작은 단추 */
a.btn_b01,.btn_b01{color:var(--gray);text-decoration:none;font-weight:700}
a.btn_b01:hover,.btn_b01:hover{color:var(--point)}
/* 관리자 바로가기 */
a.btn_admin,.btn_admin{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;
border:1px solid var(--line3);border-radius:var(--r-pill);background:#fff;
color:var(--gray);font-size:12.5px;font-weight:700}
a.btn_admin:hover,.btn_admin:hover{border-color:var(--ink);color:var(--ink)}
/* 장바구니의 선택삭제·비우기 */
.btn_cart_del{padding:14px 0;border-bottom:1px solid var(--line)}
.btn_cart_del button{height:36px;padding:0 14px;border:1px solid var(--line3);
border-radius:var(--r-pill);background:#fff;color:var(--ink2);font-size:13px;font-weight:700}
.btn_cart_del button:hover{border-color:var(--ink);color:var(--ink)}
/* 상품목록 보기 전환 (리스트뷰 / 갤러리뷰) */
#sct_lst button.sct_lst_view,#sct_lst .sct_lst_view{width:36px;height:34px;border:1px solid var(--line3);
border-radius:8px;background:#fff;color:var(--gray2);font-size:13px}
#sct_lst button.sct_lst_view:hover,#sct_lst .sct_lst_view:hover{border-color:var(--ink);color:var(--ink)}
#sct_lst button.sct_lst_view.on,#sct_lst .sct_lst_view.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* 상품상세 수량 조절 (− 1 +) — 한 덩어리로 묶어 보이게 */
.sit_opt_list .sit_opt_count,.sit_sel_option .sit_opt_count{display:inline-flex;align-items:center;
border:1px solid var(--line3);border-radius:8px;overflow:hidden;background:#fff;vertical-align:middle}
button.sit_qty_minus,button.sit_qty_plus{width:34px;height:34px;border:0;background:#fff;
color:var(--gray);font-size:12px;line-height:1;border-radius:0}
button.sit_qty_minus:hover,button.sit_qty_plus:hover{background:var(--bg2);color:var(--ink)}
.sit_opt_list input.num_input,.sit_sel_option input.num_input{width:44px;height:34px;border:0;
border-left:1px solid var(--line2);border-right:1px solid var(--line2);
text-align:center;font-size:14px;font-weight:700;padding:0}
.sit_opt_prc{font-size:14px!important;font-weight:800}
/* 상세 탭 — 글자 크기를 디자인에 맞춘다 */
#sit_tab button,#sit_tab .selected{font-size:15px;font-weight:600;color:var(--gray)}
#sit_tab button.selected,#sit_tab .selected{font-weight:800;color:var(--ink)}
/* 목록으로·이전상품·다음상품 */
a.btn_list,.btn_list a,#sit_prev_next a{display:inline-flex;align-items:center;gap:6px;min-height:38px;
padding:0 14px;border:1px solid var(--line3);border-radius:var(--r-pill);background:#fff;
color:var(--ink2);font-size:13px;font-weight:700}
a.btn_list:hover,.btn_list a:hover,#sit_prev_next a:hover{border-color:var(--ink);color:var(--ink)}
/* 단추 줄 간격 */
.btn_confirm{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
/* ── 코어가 아이디로 잡는 곳은 같은 굵기로 맞춘다 · 2026-09-12 ─────────
코어 규칙이 `#sit_opt_added button` `#sit_tab .tab_tit li button`
`#sod_bsk_act .btn01` 처럼 아이디를 써서, 클래스만으로는 못 이깁니다.
아래 선택자를 약하게 고치면 버튼이 코어 기본 모양으로 돌아갑니다. */
/* 상품상세 수량 조절 */
#sit_opt_added button.sit_qty_minus,#sit_opt_added button.sit_qty_plus,
#sit_sel_option button.sit_qty_minus,#sit_sel_option button.sit_qty_plus{
width:34px;height:34px;border:0;border-radius:0;background:#fff;color:var(--gray);font-size:12px;line-height:1}
#sit_opt_added button.sit_qty_minus:hover,#sit_opt_added button.sit_qty_plus:hover,
#sit_sel_option button.sit_qty_minus:hover,#sit_sel_option button.sit_qty_plus:hover{
background:var(--bg2);color:var(--ink)}
#sit_opt_added .opt_count,#sit_sel_option .opt_count{display:inline-flex;align-items:center;
border:1px solid var(--line3);border-radius:8px;overflow:hidden;background:#fff;vertical-align:middle}
#sit_opt_added input.num_input,#sit_sel_option input.num_input{width:44px;height:34px;border:0;
border-left:1px solid var(--line2);border-right:1px solid var(--line2);
text-align:center;font-size:14px;font-weight:700;padding:0;border-radius:0}
/* 상품상세 탭 */
#sit_tab .tab_tit li button{font-size:15px;font-weight:600;color:var(--gray);
height:58px;line-height:1;border:0;border-bottom:2px solid transparent;background:none}
#sit_tab .tab_tit li button.selected,#sit_tab .tab_tit li .selected{
font-weight:800;color:var(--ink);border-bottom-color:var(--ink);background:none}
/* 장바구니·주문서의 큰 단추 */
#sod_bsk_act .btn01,#sod_bsk_act .btn02,#sod_fin_legend .btn01,
#sod_frm_act .btn01,#sod_frm_act .btn02,#sod_fin .btn01,#sod_fin .btn02{
height:auto;min-height:50px;line-height:1;width:auto;min-width:150px;font-size:15px;font-weight:800}
/* ── 상품상세 폭 맞추기 · 2026-09-12 ─────────────────────────────────
코어·스킨이 #sit_ov_wrap 1200px, #sit_tab 고정폭처럼 제 폭을 들고 있어
머리말·꼬리말과 어긋납니다. 바깥에서 한 번에 감싸 같은 폭으로 맞춥니다. */
.u-main>#sit,.u-main>#sct_location,.u-main>#sit_hhtml,.u-main>#sit_thtml{
max-width:1280px;margin-left:auto;margin-right:auto;
padding-left:20px;padding-right:20px;box-sizing:border-box}
#sit_ov_wrap{width:auto;max-width:100%;padding:32px 0;margin:0}
/* 스킨이 #sit_info 를 inline-flex 로 두어서 width:auto 를 주면 내용만큼 줄어든다.
블록으로 바꿔 폭을 다 쓰게 한다. */
#sit_info{display:block;width:auto;max-width:100%;margin-left:0;margin-right:0}
#sit_rel{width:auto;max-width:100%;margin-left:0;margin-right:0}
#sit_rel{padding:28px;border:1px solid var(--line);border-radius:var(--r-card)}
#sit_info>#sit_tab,#sit_tab{display:block;width:100%;max-width:100%;margin:0;float:none}
/* ── 상품유형 목록(listtype.php) 여백 · 2026-09-12 ────────────────────
코어 shop/listtype.php 는 감싸개 없이 상품 격자만 내보내서 화면 끝에 붙습니다.
(코어에 테마 위임 분기가 없어 테마 파일로는 못 바꿉니다 — 여기서 감싸 줍니다) */
.u-main>.u-grid,.u-main>ul.sct,.u-main>#sct_sortlst{
max-width:1280px;margin-left:auto;margin-right:auto;
padding-left:20px;padding-right:20px;box-sizing:border-box}
.u-main>.u-grid{padding-top:8px;padding-bottom:8px}
.u-main>.pg_wrap{max-width:1280px;margin-left:auto;margin-right:auto;
padding-left:20px;padding-right:20px;box-sizing:border-box}
/* ── 아주 좁은 화면(360~420px) 상품 카드 · 2026-09-12 ────────────────
두 칸으로 놓으면 칸이 좁아 글자가 더 작아 보입니다.
글자를 한 번 더 키우고 상품명은 두 줄까지 보이게 둡니다. */
@media (max-width:420px){
.u-grid{gap:22px 10px}
.u-card-brand{font-size:13.5px}
.u-card-name,.sct_txt{font-size:15px;-webkit-line-clamp:2}
.u-card-price strong,.sct_cost{font-size:17px}
.u-rate{font-size:17px}
.u-card-body{padding-top:10px}
}
/* 좁은 칸에서 "정가 할인율 판매가" 세 덩이가 어색하게 끊긴다 —
정가를 윗줄로 올려 할인율과 판매가를 붙여 둔다 */
@media (max-width:520px){
.u-card-price{flex-wrap:wrap;row-gap:2px}
.u-card-price del{flex:1 1 100%;order:-1}
}
/* ============================================================
상품상세 탭 · 이전/다음상품 · 2026-09-12 3차
------------------------------------------------------------
· 스킨이 선택 탭 아래에 파란 막대(.selected:after 3px #3a8afd)를 깔아
테마가 준 검정 밑줄과 두 줄로 겹쳐 어긋나 보였습니다. 하나로 합칩니다.
· 탭 내용(.tab_con)이 15px 안쪽으로 들어가 탭 바와 왼쪽이 안 맞았습니다.
· 이전/다음상품이 float 때문에 오른쪽에 몰려 있었습니다.
============================================================ */
/* ── 탭 머리 ─────────────────────────────────────────── */
/* 탭은 늘 한 줄로 둔다. 좁은 화면에서 접히면 선택 표시(밑줄)가 아래 줄과 떨어져
따로 노는 것처럼 보인다. 안 들어가면 옆으로 밀어 보게 한다. */
#sit_tab .tab_tit{display:flex;flex-wrap:nowrap;padding:0;margin:0;
border-bottom:1px solid var(--line);background:none;
overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#sit_tab .tab_tit::-webkit-scrollbar{display:none}
#sit_tab .tab_tit li{flex:0 0 auto}
#sit_tab .tab_tit li{display:block;float:none;width:auto;margin:0}
#sit_tab .tab_tit li button{display:block;width:auto;padding:0 26px;height:58px;line-height:1;
border:0;background:none;font-size:15px;font-weight:600;color:var(--gray)}
#sit_tab .tab_tit li button:hover{color:var(--ink)}
/* 선택 표시는 스킨의 :after 막대 하나만 쓴다 (테마 색·두께로) */
#sit_tab .tab_tit li button,#sit_tab .tab_tit li button.selected,
#sit_tab .tab_tit li .selected{border-bottom:0}
#sit_tab .tab_tit li .selected{background:none;color:var(--ink);font-weight:800}
#sit_tab .tab_tit li .selected:after{height:2.5px;background:var(--ink)}
/* ── 탭 내용 ─────────────────────────────────────────── */
/* .tab_con 이 flex 라 안의 탭 판이 내용만큼 줄어든다(1174→691). 블록으로 되돌린다. */
#sit_tab .tab_con{display:block;padding:30px 0 0;background:none}
#sit_tab .tab_con>li{display:block;width:auto;max-width:100%;float:none;margin:0}
#sit_inf,#sit_use,#sit_qa,#sit_dex{display:block;width:auto;max-width:100%;float:none}
#sit_inf_explan{max-width:100%}
/* ── 이전 / 다음 상품 ────────────────────────────────── */
#sit_siblings{display:flex;align-items:center;gap:10px;justify-content:space-between;
margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--line);text-align:left}
#sit_siblings a{display:inline-flex;align-items:center;gap:8px;float:none;margin:0;
height:40px;padding:0 18px;border:1px solid var(--line3);border-radius:var(--r-pill);
background:#fff;color:var(--ink2);font-size:13.5px;font-weight:700;line-height:1;position:relative}
#sit_siblings a:hover{border-color:var(--ink);color:var(--ink);background:var(--bg2)}
#sit_siblings a#siblings_prev{margin-right:auto;padding-left:14px}
#sit_siblings a#siblings_next{margin-left:auto;padding-right:14px}
/* 스킨이 쓰던 화살표 그림 대신 글자로 그린다 (그림 파일에 기대지 않게) */
#sit_siblings a#siblings_prev:after,#sit_siblings a#siblings_next:after{
content:none;background:none;width:auto;height:auto;position:static}
#sit_siblings a#siblings_prev:before{content:"‹";font-size:17px;line-height:1;color:var(--gray2)}
#sit_siblings a#siblings_next:before{content:"›";font-size:17px;line-height:1;color:var(--gray2);order:2}
#sit_siblings a:hover:before{color:var(--ink)}
/* ── 상품상세 아랫부분 정리 · 2026-09-12 4차 ─────────────────────────
· 스킨이 탭 전체를 테두리 상자(#sit_info)로 감싸고 min-height:600px 을 줘서
내용이 짧으면 아래가 텅 비고, 탭 밑줄이 상자 안쪽에서 끝나 어긋나 보였습니다.
시안대로 상자를 없애고 '탭 줄 + 그 아래 내용' 만 남깁니다.
· 이전/다음상품 알약이 관련상품 상자에 딱 붙어 있어 사이를 띄웁니다. */
#sit_info{border:0;background:none;padding:0;min-height:0;margin-top:56px}
#sit_tab{border-bottom:0}
#sit_tab .tab_tit{border-bottom:1px solid var(--line)}
#sit_tab .tab_con{padding-top:32px}
#sit_inf .contents_tit,#sit_use .contents_tit,#sit_qa .contents_tit,#sit_dex .contents_tit{
font-size:19px;font-weight:900;margin:0 0 14px}
#sit_inf_explan{font-size:15px;line-height:1.9;color:var(--ink2)}
/* 이전/다음상품 ↔ 관련상품 사이 */
#sit_siblings{margin:34px 0 0;padding:22px 0 0}
#sit_rel{margin-top:44px}
#sit_ov_from+#sit_rel,#sit_siblings+#sit_rel{margin-top:44px}
/* 좁은 화면 — 탭 글자·여백을 줄여 네 개가 최대한 들어가게 */
@media (max-width:640px){
#sit_tab .tab_tit li button{padding:0 16px;height:50px;font-size:14px}
#sit_tab .tab_tit .item_use_count,#sit_tab .tab_tit .item_qa_count{margin-left:3px}
#sit_tab .tab_con{padding-top:24px}
#sit_info{margin-top:40px}
}
@media (max-width:420px){
#sit_tab .tab_tit li button{padding:0 13px;font-size:13.5px}
}
/* ── 수량 상자 · 이전/다음상품 · 2026-09-12 6차 ──────────────────────
· 코어는 `.opt_count` 안에 [− 수량 +] 와 `+0원` 을 **함께** 넣습니다.
여기에 테두리를 두르면 값까지 한 칸에 묶여 긴 막대가 됩니다.
테두리를 세 단추에만 나눠 줘서 [− 1 +] 만 한 덩어리로 보이게 하고
값은 오른쪽 끝으로 밀어냅니다. (옵션을 고르면 JS 가 같은 마크업을
새로 그리므로 감싸개를 추가하지 않고 CSS 로만 풉니다)
· 이전/다음상품 알약이 `#sit_ov_from` 의 아래 테두리와 겹쳐
선이 단추 밑변을 가로지르고 있었습니다. 제가 넣었던 윗선도 겹쳐 두 줄이었습니다. */
/* 수량 줄 — 시안처럼 옅은 회색 띠 안에 [− 1 +] 와 값 */
#sit_opt_added .sit_opt_list,#sit_sel_option .sit_opt_list{
background:var(--bg);border:0;border-radius:12px;padding:16px 18px;margin:10px 0 0}
#sit_opt_added .opt_name,#sit_sel_option .opt_name{margin-bottom:12px}
#sit_opt_added .sit_opt_subj,#sit_sel_option .sit_opt_subj{
display:block;font-size:14px;font-weight:600;color:var(--ink2);line-height:1.5}
/* gap 을 주면 세 단추 사이까지 벌어져 한 덩어리로 안 보인다 — 0 으로 두고
값은 margin-left:auto 로 밀어낸다 */
#sit_opt_added .opt_count,#sit_sel_option .opt_count{
display:flex;align-items:center;gap:0;border:0;border-radius:0;background:none;padding:0;overflow:visible}
/* 세 단추가 모여 하나의 둥근 상자로 보이게 */
#sit_opt_added .opt_count .sit_qty_minus,#sit_sel_option .opt_count .sit_qty_minus,
#sit_opt_added .opt_count .sit_qty_plus,#sit_sel_option .opt_count .sit_qty_plus{
width:38px;height:38px;border:1px solid var(--line3);background:#fff;color:var(--ink2);font-size:12px}
#sit_opt_added .opt_count .sit_qty_minus,#sit_sel_option .opt_count .sit_qty_minus{
border-right:0;border-radius:8px 0 0 8px}
#sit_opt_added .opt_count .sit_qty_plus,#sit_sel_option .opt_count .sit_qty_plus{
border-left:0;border-radius:0 8px 8px 0}
#sit_opt_added .opt_count .num_input,#sit_sel_option .opt_count .num_input{
width:46px;height:38px;border:1px solid var(--line3);border-radius:0;
text-align:center;font-size:14px;font-weight:700;padding:0;background:#fff}
/* 값은 오른쪽 끝으로 */
#sit_opt_added .opt_count .sit_opt_prc,#sit_sel_option .opt_count .sit_opt_prc{
margin-left:auto;float:none;width:auto;padding:0;line-height:1;
font-size:15px!important;font-weight:800;color:var(--ink);text-align:right}
/* 이전 / 다음 상품 — 선 하나만 남기고 아래 테두리와 떨어뜨린다 */
#sit_siblings{border-top:0;margin:26px 0 0;padding:0 0 30px}
/* .sit_opt_list 가 flex 라 .opt_count 가 내용 크기로 줄어 값이 오른쪽으로 안 밀렸다.
블록으로 되돌리고 스킨이 단추에 준 float 도 푼다. */
#sit_opt_added .sit_opt_list,#sit_sel_option .sit_opt_list{display:block}
#sit_opt_added .opt_count,#sit_sel_option .opt_count{width:100%}
#sit_opt_added .opt_count>*,#sit_sel_option .opt_count>*{float:none}
/* ── 구매 단추 줄 : [찜] [장바구니] [바로구매] · 2026-09-12 7차 ───────
앞의 둘은 정사각 아이콘 단추, 바로구매가 남는 폭을 다 쓰는 주 단추입니다.
장바구니 단추의 value="장바구니" 는 코어가 읽는 값이라 건드리지 마세요. */
#sit_ov_btn{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:nowrap}
#sit_ov_btn .sit_btn_wish,#sit_ov_btn .sit_btn_cart{
flex:0 0 auto;width:54px;height:54px;min-width:0;padding:0;
display:inline-flex;align-items:center;justify-content:center;
border:1.5px solid var(--line3);border-radius:var(--r-btn);background:#fff;
color:var(--ink2);font-size:19px;transition:.18s}
#sit_ov_btn .sit_btn_wish:hover{border-color:var(--sale);color:var(--sale);background:#fff}
#sit_ov_btn .sit_btn_cart:hover{border-color:var(--ink);color:var(--ink);background:var(--bg2)}
#sit_ov_btn .sit_btn_buy{flex:1 1 auto;min-width:0;height:54px;padding:0 24px;
border:1.5px solid var(--ink);border-radius:var(--r-btn);
background:var(--ink);color:#fff;font-size:15.5px;font-weight:800}
#sit_ov_btn .sit_btn_buy:hover{background:var(--point);border-color:var(--point);color:#fff}
#sit_btn_alm{flex:1 1 100%;height:52px;margin-top:10px;display:inline-flex;align-items:center;
justify-content:center;border:1.5px solid var(--ink);border-radius:var(--r-btn);
font-size:15px;font-weight:800;background:#fff;color:var(--ink)}
@media (max-width:420px){
#sit_ov_btn{gap:8px}
#sit_ov_btn .sit_btn_wish,#sit_ov_btn .sit_btn_cart{width:50px;height:50px;font-size:18px}
#sit_ov_btn .sit_btn_buy{height:50px;padding:0 16px;font-size:15px}
}
/* 코어·스킨이 단추에 준 margin 을 지운다. 남아 있으면 바로구매 오른끝이
총금액 칸보다 안쪽으로 들어가 옆이 안 맞는다. 사이 간격은 flex gap 이 낸다. */
#sit_ov_btn button,#sit_ov_btn a,#sit_ov_btn input{margin:0}
/* 코어 스킨의 clearfix :after 가 flex 항목이 되어 gap 한 칸(10px)을 먹는다 → 끈다 */
#sit_ov_btn:after,#sit_ov_btn:before{content:none;display:none}