:root{
  --p:#1A7A4A;--pd:#145F38;--p2:#1E9456;--pl:#E8F5EE;--pp:#F0FAF4;
  --o:#F07028;--ol:#FEF0EA;
  --g:#16A34A;--gl:#EDFAF2;
  --y:#D97706;--yl:#FEF9EC;
  --r:#DC2626;--rl:#FEF0F0;
  --pu:#7C3AED;--pul:#F3F0FF;
  --pk:#DB2777;
  --t:#0891B2;--tl:#F0FAFE;
  --bg:#F2F6F2;--w:#fff;
  --g1:#F8F9FA;--g2:#EEF0F3;--g3:#DDE1E7;--g4:#B0B8C4;--g5:#8895A7;--g6:#5A6475;--g7:#3A4050;--g8:#1E2230;
  --sh:0 2px 10px rgba(0,0,0,.07);--shl:0 8px 32px rgba(0,0,0,.13);
  --r6:6px;--r10:10px;--r14:14px;--r20:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* scroll-behavior:smooth 제거 — PC 휠/키보드 스크롤이 느리게 이징되어 "조금 내려가다 멈춤" 체감 유발.
   네이티브 즉시 스크롤로 복원. 의도된 부드러운 이동은 JS의 scrollIntoView/scrollTo({behavior:'smooth'})가 개별 처리. */
html{scroll-behavior:auto}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:var(--bg);color:var(--g8);font-size:15px;line-height:1.5}
button{font-family:inherit;cursor:pointer}

/* ── HEADER ── */
.hd{position:sticky;top:0;z-index:200;background:var(--p);box-shadow:0 2px 16px rgba(26,122,74,.35)}
.hd-inner{max-width:1340px;margin:0 auto;display:flex;align-items:center;height:58px;padding:0 20px}
.logo{font-family:'Gmarket Sans',sans-serif;font-weight:700;font-size:21px;color:#fff;margin-right:30px;cursor:pointer;display:flex;align-items:center;gap:7px;letter-spacing:-.5px;white-space:nowrap}
.logo-dot{width:8px;height:8px;border-radius:50%;background:#86EFAC;display:inline-block}
.nav{display:flex;align-items:stretch;height:58px;flex:1}
.ni{display:flex;align-items:center;justify-content:center;padding:0 22px;color:rgba(255,255,255,.85);cursor:pointer;font-size:15.5px;font-weight:700;border-bottom:3px solid transparent;transition:all .18s;white-space:nowrap;letter-spacing:-.2px}
.ni:hover{color:#fff;background:rgba(255,255,255,.1)}
.ni.on{color:#fff;border-bottom-color:#86EFAC;font-weight:700}
.ni-sub{font-size:10px;opacity:.68;font-weight:400}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.hbtn{padding:8px 16px;border-radius:18px;font-size:13.5px;font-weight:800;cursor:pointer;border:none;transition:all .18s;white-space:nowrap}
.hbtn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.hbtn.ghost:hover{background:rgba(255,255,255,.25)}
.hbtn.solid{background:#fff;color:var(--p)}
.hbtn.solid:hover{background:var(--pp)}
.hbtn.hot{background:var(--o);color:#fff}
.hbtn.hot:hover{background:#D94E1E}
.plan-pill{font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:10px;cursor:pointer}
.pp-free{background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.3)}
.pp-pro{background:var(--pp);color:var(--p)}
.pp-biz{background:#FEF0EA;color:var(--o)}

/* ── SUB-NAV ── */
.subnav{background:#fff;border-bottom:2px solid var(--g2);display:flex;overflow-x:auto;padding:0 max(20px, calc((100% - 1300px) / 2))}
.subnav::-webkit-scrollbar{display:none}
.stab{padding:13px 18px;font-size:14.5px;font-weight:600;color:var(--g5);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:all .18s;margin-bottom:-2px}
.stab:hover:not(.on){color:var(--g7)}
.stab.on{color:var(--p);border-bottom-color:var(--p);font-weight:800}

/* ── LAYOUT ── */
.wrap{max-width:1340px;margin:0 auto;display:flex;gap:18px;padding:18px 20px}
.wrap.col{flex-direction:column}
.sb{width:205px;flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.ct{flex:1;min-width:0}

/* ── CARDS / COMMON ── */
.card{background:#fff;border-radius:var(--r10);border:1px solid var(--g2);box-shadow:var(--sh);overflow:hidden}
.card-head{padding:13px 18px;border-bottom:1px solid var(--g2);display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:15px}
.card-body{padding:16px 18px}

/* ── SIDEBAR ── */
.sbcard{background:#fff;border-radius:var(--r10);border:1px solid var(--g2);overflow:hidden}
.sbhead{padding:12px 14px;font-weight:800;font-size:15px;background:var(--pp);border-bottom:1px solid var(--g2);display:flex;justify-content:space-between;align-items:center}
.sbreset{font-size:12.5px;color:var(--g4);cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.sbreset:hover{color:var(--p)}
.sbreset .sbreset-svg{display:none}
.sbsec{padding:10px 14px;border-bottom:1px solid var(--g2)}
.sbsec:last-child{border-bottom:none}
.sblabel{font-size:12.5px;font-weight:800;color:var(--g5);letter-spacing:.2px;text-transform:uppercase;margin-bottom:7px}
.sbinput{width:100%;border:1.5px solid var(--g3);border-radius:6px;padding:9px 11px;font-size:14px;outline:none;font-family:inherit;color:var(--g7);transition:border .18s}
.sbinput:focus{border-color:var(--p)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.chip{padding:4px 10px;border-radius:12px;font-size:13px;cursor:pointer;border:1px solid var(--g3);background:#fff;color:var(--g5);transition:all .14s}
.chip:hover{border-color:var(--p);color:var(--p)}
.chip.on{background:var(--p);color:#fff;border-color:var(--p)}
.qi-menu{}
.qi{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--g2);font-size:15px;font-weight:700;color:var(--g6);transition:all .15s}
.qi:last-child{border-bottom:none}
.qi:hover{background:var(--pp);color:var(--p);padding-left:18px}
.qi.on{background:var(--pp);color:var(--p);font-weight:700}
.qi.hot{color:var(--o)}
.qi-ic{font-size:17px;width:22px;text-align:center}

/* ── HERO ── */
.hero{background:linear-gradient(130deg,var(--pd) 0%,var(--p) 55%,var(--p2) 100%);padding:22px;border-radius:var(--r14);margin-bottom:14px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.hero-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-title{font-family:'Gmarket Sans',sans-serif;font-size:21px;font-weight:700;color:#fff;line-height:1.35}
.hero-title em{color:#86EFAC;font-style:normal}
.hero-sub{font-size:14px;color:rgba(255,255,255,.78);margin-top:6px}
.hero-stats{display:flex;gap:20px;margin-top:14px}
.hstat-n{font-family:'Gmarket Sans',sans-serif;font-size:20px;font-weight:700;color:#fff}
.hstat-l{font-size:12px;color:rgba(255,255,255,.68);margin-top:1px}
.hero-btns{display:flex;gap:8px;flex-shrink:0}
.hcta{padding:10px 20px;border-radius:20px;font-size:14px;font-weight:800;cursor:pointer;border:none;font-family:inherit;transition:all .18s;white-space:nowrap}
.hcta.p{background:#fff;color:var(--p)}.hcta.p:hover{background:var(--pp)}
.hcta.s{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.4)}.hcta.s:hover{background:rgba(255,255,255,.24)}

/* ── TICKER ── */
.ticker{background:var(--pp);border:1px solid var(--pl);border-radius:8px;padding:7px 14px;display:flex;align-items:center;gap:10px;overflow:hidden;margin-bottom:14px}
.tk-label{background:var(--p);color:#fff;font-size:12px;font-weight:800;padding:2px 8px;border-radius:9px;white-space:nowrap;flex-shrink:0}
.tk-track{display:flex;gap:28px;animation:ticker 22s linear infinite;white-space:nowrap}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tk-item{font-size:13.5px;color:var(--g6)}.tk-item strong{color:var(--p)}

/* ── SORT BAR ── */
.sortbar{background:#fff;border-radius:var(--r10);padding:9px 14px;display:flex;align-items:center;gap:6px;margin-bottom:12px;border:1px solid var(--g2);flex-wrap:wrap}
.sortbar .lbl{font-size:13.5px;color:var(--g4);margin-right:2px}
.sbtn2{padding:6px 14px;border-radius:15px;font-size:14px;font-weight:700;cursor:pointer;border:1.5px solid var(--g3);background:#fff;color:var(--g5);transition:all .14s;font-family:inherit}
.sbtn2.on{background:var(--p);color:#fff;border-color:var(--p)}
.sbtn2:hover:not(.on){border-color:var(--p);color:var(--p)}
.hf-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--g2);border-radius:var(--r10);box-shadow:var(--sh)}
.hf-pager-summary{font-size:13px;font-weight:800;color:var(--g5)}
.hf-pager-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.hf-page-btn,.hf-page-num{min-width:34px;height:34px;padding:0 11px;border:1.5px solid var(--g2);border-radius:8px;background:#fff;color:var(--g6);font-size:13px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:all .14s}
.hf-page-btn:hover,.hf-page-num:hover{border-color:var(--p);color:var(--p);background:var(--pp)}
.hf-page-num.active{background:var(--p);border-color:var(--p);color:#fff}
.hf-page-btn.disabled{color:var(--g4);background:var(--g1);cursor:not-allowed}
.hf-page-ellipsis{height:32px;min-width:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--g4);font-weight:800}
@media (max-width:768px){.hf-pager{flex-direction:column;align-items:stretch}.hf-pager-summary{text-align:center}.hf-pager-links{justify-content:center}}
.view-toggle{margin-left:auto;display:flex;gap:4px}
.vtbtn{width:30px;height:30px;border:1.5px solid var(--g3);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:all .14s}
.vtbtn.on{background:var(--p);border-color:var(--p);color:#fff}

/* ── QTAGS ── */
.qtags{background:#fff;border-radius:var(--r10);padding:11px 14px;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;border:1px solid var(--g2)}
.qtag{display:flex;align-items:center;gap:4px;padding:5px 12px;border-radius:18px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--g2);background:#fff;color:var(--g6);transition:all .14s;white-space:nowrap}
.qtag:hover{border-color:var(--p);color:var(--p)}
.qtag.fire{background:linear-gradient(135deg,var(--o),#FF8C42);color:#fff;border-color:transparent}
.qtag.gold{background:linear-gradient(135deg,#B45309,var(--y));color:#fff;border-color:transparent}
.qtag.pur{background:linear-gradient(135deg,var(--pu),#A855F7);color:#fff;border-color:transparent}

/* ── PRODUCT GRID ── */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pgrid.list-mode{grid-template-columns:1fr}
.pcard{background:#fff;border-radius:var(--r10);border:1px solid var(--g2);overflow:hidden;cursor:pointer;transition:all .2s;position:relative}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shl);border-color:var(--p)}
.pcard-img{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:56px;position:relative;overflow:hidden}
.pgrid.list-mode .pcard{display:flex;flex-direction:row}
.pgrid.list-mode .pcard-img{width:120px;aspect-ratio:1;flex-shrink:0}
.pbadge{position:absolute;top:7px;left:7px;z-index:2;font-size:10px;font-weight:800;padding:2px 7px;border-radius:4px;color:#fff}
.pb-hot{background:var(--r)}.pb-sale{background:var(--o)}.pb-new{background:var(--g)}.pb-best{background:var(--p)}.pb-live{background:var(--pk)}
.plike{position:absolute;top:7px;right:7px;z-index:2;width:28px;height:28px;background:rgba(255,255,255,.92);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;box-shadow:var(--sh);transition:transform .18s}
.plike:hover{transform:scale(1.2)}
.pmargin{position:absolute;bottom:7px;left:7px;z-index:2;background:rgba(22,163,74,.9);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:9px}
.pbody{padding:9px 11px 11px;flex:1}
.pmeta{font-size:11px;color:var(--g4);margin-bottom:3px;display:flex;justify-content:space-between}
.pmeta .al{color:var(--r);font-weight:700}
.ptitle{font-size:13px;font-weight:600;color:var(--g7);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ptags{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:7px}
.ptag2{font-size:10px;padding:2px 6px;border-radius:9px;background:var(--pp);color:var(--p);border:1px solid var(--pl)}
.pprices{display:flex;justify-content:space-between;align-items:flex-end}
.pp-supply{font-size:11px;color:var(--g4)}
.pp-val{font-size:13px;font-weight:800;color:var(--p)}
.pp-sell{font-size:13px;font-weight:800;color:var(--r)}
.pseller{font-size:10px;color:var(--g4);margin-top:4px}
.pfoot{display:flex;border-top:1px solid var(--g2)}
.pfbtn{flex:1;padding:7px;text-align:center;font-size:11px;font-weight:700;color:var(--g5);cursor:pointer;transition:all .14s}
.pfbtn:first-child{border-right:1px solid var(--g2)}
.pfbtn:hover{background:var(--pp);color:var(--p)}
.pfbtn.apply{color:var(--g)}

/* ── PROVIDER ── */
.pvlist{display:flex;flex-direction:column;gap:12px}
.pvcard{background:#fff;border:1px solid var(--g2);border-radius:var(--r14);padding:18px 20px;display:flex;gap:16px;cursor:pointer;transition:all .2s}
.pvcard:hover{box-shadow:var(--shl);border-color:var(--p);transform:translateY(-2px)}
.pv-ava{width:68px;height:68px;border-radius:var(--r10);background:var(--pp);border:1.5px solid var(--pl);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;position:relative}
.pv-crown{position:absolute;top:-7px;right:-5px;background:var(--y);color:#fff;font-size:9px;font-weight:800;padding:2px 5px;border-radius:6px;white-space:nowrap}
.pv-info{display:flex;flex-direction:column;gap:3px;min-width:90px;flex-shrink:0}
.pv-name{font-weight:800;font-size:15.5px}
.pv-type{font-size:12.5px;color:var(--g4)}
.pv-loc{font-size:12.5px;color:var(--g5)}
.pv-access{font-size:12px;color:var(--g4)}
.pv-mgr{display:inline-flex;background:var(--yl);color:#7A5200;font-size:12px;font-weight:800;padding:2px 8px;border-radius:5px;border:1px solid #F5D87A;margin-top:2px}
.pv-body{flex:1;min-width:0}
.pv-desc{font-size:14px;color:var(--g6);line-height:1.65;background:var(--pp);border-radius:8px;padding:11px 14px;border-left:3px solid var(--p);margin-bottom:10px}
.pv-stats{display:flex;border:1px solid var(--g2);border-radius:8px;overflow:hidden;margin-bottom:8px}
.pvs-col{flex:1;padding:8px;text-align:center;border-right:1px solid var(--g2)}
.pvs-col:last-child{border-right:none}
.pvs-l{font-size:12px;color:var(--g4);margin-bottom:3px}
.pvs-v{font-size:14.5px;font-weight:900;color:var(--p)}
.pv-prods{display:flex;flex-wrap:wrap;gap:5px}
.pvp-item{background:var(--pp);border:1px solid var(--pl);border-radius:5px;padding:3px 8px;font-size:12px;color:var(--p);font-weight:700}
.pv-right{display:flex;flex-direction:column;gap:7px;justify-content:center;min-width:96px}
.pvbtn{padding:10px 16px;border-radius:8px;font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .18s;white-space:nowrap;border:none}
.pvbtn.main{background:var(--p);color:#fff}.pvbtn.main:hover{background:var(--pd)}
.pvbtn.sub{background:#fff;color:var(--p);border:1.5px solid var(--p)}.pvbtn.sub:hover{background:var(--pp)}

/* ── SELLER LIST ── */
.sellerlist{display:flex;flex-direction:column;gap:12px}
.sellercard{background:#fff;border:1px solid var(--g2);border-radius:var(--r14);padding:16px 20px;display:flex;gap:16px;align-items:center;cursor:pointer;transition:all .18s}
.sellercard:hover{box-shadow:var(--shl);border-color:var(--p);transform:translateY(-2px)}
.seller-rank{font-family:'Gmarket Sans',sans-serif;font-size:22px;font-weight:700;width:36px;text-align:center;flex-shrink:0}
.seller-ava{width:52px;height:52px;border-radius:50%;background:var(--pp);border:2px solid var(--pl);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.seller-info{flex:1}
.seller-name{font-weight:800;font-size:15.5px;margin-bottom:2px}
.seller-meta{font-size:13.5px;color:var(--g5);display:flex;gap:12px;flex-wrap:wrap}
.seller-right{text-align:right}
.seller-sales{font-family:'Gmarket Sans',sans-serif;font-size:17px;font-weight:800;color:var(--p)}
.seller-sub{font-size:12.5px;color:var(--g4);margin-top:2px}
.seller-badge{font-size:12px;font-weight:800;padding:2px 8px;border-radius:8px;color:#fff;display:inline-block;margin-top:4px}

/* ── REGISTER FORM ── */
.reg-steps{display:flex;align-items:center;margin-bottom:24px}
.reg-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.reg-step-n{width:30px;height:30px;border-radius:50%;background:var(--g2);color:var(--g5);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:all .3s}
.reg-step.active .reg-step-n{background:var(--p);color:#fff}
.reg-step.done .reg-step-n{background:var(--g);color:#fff}
.reg-step-l{font-size:11px;color:var(--g5);font-weight:500}
.reg-step.active .reg-step-l{color:var(--p);font-weight:700}
.reg-line{flex:1;height:2px;background:var(--g2);margin-bottom:20px;transition:background .3s}
.reg-line.done{background:var(--g)}
.form-sec{background:#fff;border-radius:var(--r10);border:1px solid var(--g2);padding:20px;margin-bottom:14px}
.form-sec-title{font-weight:700;font-size:14px;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row{margin-bottom:0}
.form-label{display:block;font-size:12px;font-weight:700;color:var(--g6);margin-bottom:5px}
.form-input,.form-select,.form-textarea{width:100%;border:1.5px solid var(--g3);border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none;color:var(--g7);transition:border .18s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--p)}
.form-textarea{resize:vertical;min-height:80px}
.form-btn{padding:12px 28px;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;border:none;font-family:inherit;transition:all .18s}
.form-btn.primary{background:var(--p);color:#fff}.form-btn.primary:hover{background:var(--pd)}
.form-btn.secondary{background:var(--g2);color:var(--g6)}.form-btn.secondary:hover{background:var(--g3)}

/* ── RANKING ── */
.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-card{background:#fff;border:1px solid var(--g2);border-radius:var(--r10);padding:13px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .18s}
.rank-card:hover{border-color:var(--p);box-shadow:var(--sh);transform:translateX(3px)}
.rank-num{font-family:'Gmarket Sans',sans-serif;font-size:22px;font-weight:700;width:36px;text-align:center;flex-shrink:0}
.t1{color:#F5A623}.t2{color:#8895A7}.t3{color:#CD7F32}.tOther{color:var(--g4)}
.rank-emoji{font-size:32px;flex-shrink:0}
.rank-info{flex:1;min-width:0}
.rank-name{font-weight:800;font-size:15.5px;margin-bottom:3px}
.rank-meta{font-size:13px;color:var(--g5)}
.rank-right{text-align:right;flex-shrink:0}
.rank-sales{font-family:'Gmarket Sans',sans-serif;font-size:18px;font-weight:800;color:var(--p)}
.rank-sub{font-size:12.5px;color:var(--g4);margin-top:1px}
.rank-lock{font-size:13px;color:var(--p);margin-top:3px;cursor:pointer;font-weight:800}

/* ── NOTICE ── */
.notice-list{background:#fff;border-radius:var(--r10);border:1px solid var(--g2);overflow:hidden}
.notice-item{padding:14px 18px;border-bottom:1px solid var(--g2);display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .15s}
.notice-item:last-child{border-bottom:none}
.notice-item:hover{background:var(--g1)}
.ni-cat{font-size:12px;font-weight:800;padding:3px 8px;border-radius:8px;white-space:nowrap;flex-shrink:0}
.ni-title{flex:1;font-size:15px;color:var(--g7);font-weight:700}
.ni-date{font-size:12.5px;color:var(--g4);white-space:nowrap}
.ni-new{background:var(--r);color:#fff;font-size:11px;font-weight:900;padding:2px 6px;border-radius:4px;flex-shrink:0}
.faq-item{border-bottom:1px solid var(--g2);overflow:hidden}
.faq-item:last-child{border-bottom:none}
.faq-q{padding:15px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;transition:background .15s}
.faq-q:hover{background:var(--g1)}
.faq-a{padding:0 18px 16px;font-size:14px;color:var(--g6);line-height:1.75;display:none}
.faq-a.open{display:block}
.faq-chevron{transition:transform .25s;font-size:13px;color:var(--g4)}
.faq-chevron.open{transform:rotate(180deg)}
.event-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.event-card{background:#fff;border-radius:var(--r14);border:1px solid var(--g2);overflow:hidden;cursor:pointer;transition:all .18s}
.event-card:hover{transform:translateY(-3px);box-shadow:var(--shl)}
.event-img{height:100px;display:flex;align-items:center;justify-content:center;font-size:52px}
.event-body{padding:14px}
.event-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;color:#fff;display:inline-block;margin-bottom:6px}
.event-title{font-weight:700;font-size:14px;margin-bottom:4px}
.event-date{font-size:11px;color:var(--g4)}

/* ── INQUIRY ── */
.inq-form{background:#fff;border-radius:var(--r14);border:1px solid var(--g2);padding:24px}
.inq-title{font-family:'Gmarket Sans',sans-serif;font-size:18px;font-weight:700;margin-bottom:4px}
.inq-sub{font-size:12px;color:var(--g5);margin-bottom:20px}

/* ── MYPAGE ── */
.my-profile{background:linear-gradient(130deg,var(--pd) 0%,var(--p) 55%,var(--p2) 100%);border-radius:var(--r14);padding:24px 28px;margin-bottom:18px;display:flex;align-items:center;gap:20px}
.my-ava{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:26px}
.my-name{font-family:'Gmarket Sans',sans-serif;font-size:20px;font-weight:700;color:#fff}
.my-plan-pill{display:inline-flex;background:rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:10px;margin-top:4px;border:1px solid rgba(255,255,255,.35)}
.my-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.my-stat{background:#fff;border-radius:var(--r10);padding:16px;border:1px solid var(--g2);text-align:center;box-shadow:var(--sh)}
.my-sn{font-family:'Gmarket Sans',sans-serif;font-size:20px;font-weight:700;color:var(--p)}
.my-sl{font-size:11px;color:var(--g5);margin-top:2px}
.my-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.my-menu-item{background:#fff;border:1px solid var(--g2);border-radius:var(--r10);padding:16px;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:12px;box-shadow:var(--sh)}
.my-menu-item:hover{border-color:var(--p);background:var(--pp);transform:translateY(-2px)}
.mmi-icon{font-size:24px;width:44px;height:44px;border-radius:10px;background:var(--pp);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mmi-title{font-weight:700;font-size:14px}
.mmi-sub{font-size:11px;color:var(--g5);margin-top:1px}

/* ── MEMBERSHIP ── */
.mb-hero{background:linear-gradient(130deg,var(--pd) 0%,var(--p) 55%,var(--p2) 100%);border-radius:var(--r14);padding:32px;margin-bottom:22px;text-align:center;position:relative;overflow:hidden}
.mb-hero::before{content:'';position:absolute;top:-50px;right:-50px;width:220px;height:220px;background:rgba(255,255,255,.05);border-radius:50%}
.mb-htag{font-size:13px;color:rgba(255,255,255,.68);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.mb-htitle{font-family:'Gmarket Sans',sans-serif;font-size:28px;font-weight:700;color:#fff}
.mb-htitle em{color:#86EFAC;font-style:normal}
.mb-hsub{font-size:14px;color:rgba(255,255,255,.76);margin-top:8px}
.mb-hstats{display:flex;justify-content:center;gap:36px;margin-top:20px}
.mb-hn{font-family:'Gmarket Sans',sans-serif;font-size:26px;font-weight:700;color:#fff}
.mb-hl{font-size:12.5px;color:rgba(255,255,255,.65);margin-top:2px}
.sec-h{font-family:'Gmarket Sans',sans-serif;font-size:22px;font-weight:800;margin-bottom:4px}
.sec-s{font-size:14px;color:var(--g5);margin-bottom:18px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.plancard{background:#fff;border-radius:var(--r14);border:2px solid var(--g2);padding:24px;transition:all .2s;position:relative;overflow:hidden}
.plancard:hover{transform:translateY(-3px);box-shadow:var(--shl)}
.plancard.featured{border-color:var(--p);background:linear-gradient(160deg,var(--pp) 0%,#fff 55%)}
.plancard.featured::after{content:'🔥 최인기';position:absolute;top:14px;right:-26px;background:var(--o);color:#fff;font-size:12px;font-weight:900;padding:3px 28px;transform:rotate(35deg);white-space:nowrap}
.plan-badge2{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:10px;font-size:12.5px;font-weight:800;margin-bottom:12px}
.pb-free{background:var(--g2);color:var(--g5)}
.pb-pro{background:var(--pl);color:var(--p)}
.pb-biz{background:var(--ol);color:var(--o)}
.plan-name{font-family:'Gmarket Sans',sans-serif;font-size:18px;font-weight:700;margin-bottom:5px}
.plan-price{display:flex;align-items:flex-end;gap:3px;margin-bottom:5px}
.plan-num{font-family:'Gmarket Sans',sans-serif;font-size:32px;font-weight:700;color:var(--p);line-height:1}
.plan-won{font-size:14px;color:var(--g5);margin-bottom:3px}
.plan-mo{font-size:13px;color:var(--g5);margin-bottom:3px}
.plan-free-txt{font-size:24px;font-weight:900;color:var(--g4)}
.plan-desc{font-size:14px;color:var(--g5);margin-bottom:16px;line-height:1.5}
.plan-div{height:1px;background:var(--g2);margin-bottom:14px}
.plan-feats{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.feat{display:flex;align-items:flex-start;gap:7px;font-size:14px;color:var(--g7)}
.feat.no{color:var(--g4);text-decoration:line-through}
.feat .fi{font-size:14px;flex-shrink:0;margin-top:1px}
.plan-btn2{width:100%;padding:12px;border-radius:9px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .2s;border:2px solid transparent}
.pb2-free{background:var(--g2);color:var(--g5)}
.pb2-pro{background:var(--p);color:#fff}.pb2-pro:hover{background:var(--pd);transform:translateY(-1px)}
.pb2-biz{background:var(--o);color:#fff}.pb2-biz:hover{background:#D94E1E;transform:translateY(-1px)}
.cmp-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r14);overflow:hidden;border:1px solid var(--g2);margin-bottom:22px}
.cmp-table th{background:var(--pp);padding:13px 16px;font-size:14px;font-weight:800;color:var(--p);text-align:center;border-bottom:2px solid var(--p)}
.cmp-table th:first-child{text-align:left;color:var(--g6);background:var(--g1)}
.cmp-table td{padding:12px 16px;font-size:14px;border-bottom:1px solid var(--g2);text-align:center}
.cmp-table td:first-child{text-align:left;color:var(--g6);font-weight:500;background:var(--g1)}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-o{color:var(--g);font-size:16px;font-weight:800}
.cmp-x{color:var(--g4);font-size:14px}
.splans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
.spcard{background:#fff;border-radius:var(--r14);border:2px solid var(--g2);padding:22px;transition:all .2s}
.spcard:hover{border-color:var(--o);transform:translateY(-2px);box-shadow:var(--shl)}
.spcard.ft{border-color:var(--o);background:linear-gradient(160deg,var(--ol) 0%,#fff 55%)}
.sp-icon{font-size:30px;margin-bottom:10px}
.sp-name{font-family:'Gmarket Sans',sans-serif;font-size:17px;font-weight:700;margin-bottom:3px}
.sp-price{font-size:14px;color:var(--g5);margin-bottom:12px}
.sp-price strong{font-size:20px;font-weight:900;color:var(--o);font-family:'Gmarket Sans',sans-serif}
.sp-feats{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.sp-feat{font-size:14px;color:var(--g6);display:flex;align-items:center;gap:6px}
.sp-feat::before{content:'✓';color:var(--o);font-weight:900;flex-shrink:0}
.sp-btn2{width:100%;padding:11px;border-radius:8px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .18s;border:2px solid var(--o);background:#fff;color:var(--o)}
.sp-btn2.fill{background:var(--o);color:#fff}
.sp-btn2:hover{background:var(--o);color:#fff}
.calc{background:#fff;border:1px solid var(--g2);border-radius:var(--r14);padding:24px;margin-bottom:22px}
.calc-title{font-family:'Gmarket Sans',sans-serif;font-size:20px;font-weight:800;margin-bottom:4px}
.calc-sub{font-size:14px;color:var(--g5);margin-bottom:18px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc-row{margin-bottom:12px}
.calc-lbl{font-size:14px;font-weight:800;color:var(--g6);margin-bottom:6px;display:flex;justify-content:space-between}
.calc-lbl span{color:var(--p);font-weight:800}
.calc-range{width:100%;-webkit-appearance:none;height:5px;background:var(--g2);border-radius:3px;outline:none;cursor:pointer}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--p);cursor:pointer;box-shadow:0 2px 6px rgba(26,122,74,.35)}
.calc-result{background:linear-gradient(135deg,var(--pp),#fff);border-radius:var(--r10);padding:18px;border:1px solid var(--pl);display:flex;flex-direction:column;gap:10px}
.cr-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px dashed var(--pl)}
.cr-row:last-child{border-bottom:none;padding-bottom:0}
.cr-l{font-size:12px;color:var(--g5)}
.cr-v{font-size:15px;font-weight:800;color:var(--p)}
.cr-v.big{font-size:20px}.cr-v.or{color:var(--o)}.cr-v.gr{color:var(--g)}

/* ── PRODUCT DETAIL PANEL ── */
.panel-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:250}
.panel-bg.open{display:block}
.detail-panel{position:fixed;left:0;right:0;bottom:0;transform:translateY(100%);width:100%;max-width:900px;margin:0 auto;height:92dvh;background:var(--bg);z-index:300;box-shadow:0 -8px 40px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column;border-radius:18px 18px 0 0;border-top:3px solid var(--p);will-change:transform;overscroll-behavior:contain;pointer-events:none}
.detail-panel.open{transform:translateY(0);pointer-events:auto}
.dp-handle{display:flex;justify-content:center;padding:14px 0 10px;cursor:grab;flex-shrink:0;background:#fff;border-radius:18px 18px 0 0;touch-action:none}
.dp-handle:active{cursor:grabbing}
.dp-handle::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--p)}
.dp-header{padding:8px 16px 12px;border-bottom:1px solid var(--g2);display:flex;align-items:center;gap:10px;background:#fff;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.04);touch-action:pan-y}
.dp-back{font-size:24px;line-height:1;color:var(--g6);cursor:pointer;background:none;border:none;padding:4px 6px;font-family:inherit}
.dp-back:hover{color:var(--p)}
.dp-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--g2);background:#fff;color:var(--g5);cursor:pointer;line-height:1;margin-left:0;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:400;font-family:inherit;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:background .15s,border-color .15s,color .15s,transform .15s}
.dp-close:hover{background:var(--g1);border-color:var(--g3);color:var(--g8);transform:translateY(-1px)}
.dp-close:active{transform:scale(.96)}
.dp-body-wrap{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dp-img{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:100px}
.dp-body{padding:20px}
.dp-cat{font-size:11px;color:var(--p);font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin-bottom:4px}
.dp-title{font-size:18px;font-weight:800;line-height:1.4;margin-bottom:8px}
.dp-infobox{background:var(--pp);border-radius:var(--r10);padding:14px 16px;margin-bottom:14px;border:1px solid var(--pl)}
.dp-irow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--pl);font-size:13px}
.dp-irow:last-child{border-bottom:none}
.dp-ilabel{color:var(--g5)}.dp-ival{font-weight:700;color:var(--g7)}
.dp-ival.green{color:var(--g)}.dp-ival.red{color:var(--r)}.dp-ival.blue{color:var(--p)}
.dp-desc{font-size:13px;color:var(--g6);line-height:1.7;margin-bottom:16px}
.dp-supplier-box{background:var(--g1);border-radius:var(--r10);padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:16px;border:1px solid var(--g2);cursor:pointer;transition:all .15s}
.dp-supplier-box:hover{border-color:var(--p);background:var(--pp)}
.dp-actions{display:flex;gap:8px}
.dpa-btn{flex:1;padding:13px;border-radius:var(--r10);font-size:14px;font-weight:800;cursor:pointer;border:none;font-family:inherit;transition:all .18s}
.dpa-btn.main{background:var(--p);color:#fff}.dpa-btn.main:hover{background:var(--pd)}
.dpa-btn.sub{background:#fff;color:var(--p);border:2px solid var(--p)}.dpa-btn.sub:hover{background:var(--pp)}

/* supplier detail inside panel */
.sdp-psbar{padding:10px 16px;background:#fff;border-bottom:1px solid var(--g2);display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.sdp-ps-label{font-size:11px;color:var(--g5);font-weight:600}
.sdp-ps-group{display:flex;border-radius:8px;overflow:hidden;border:1.5px solid var(--g2)}
.sdp-psbtn{padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer;border:none;background:#fff;color:var(--g5);transition:all .15s;display:flex;align-items:center;gap:4px;border-right:1px solid var(--g2);font-family:inherit}
.sdp-psbtn:last-child{border-right:none}
.sdp-psbtn.on{background:var(--p);color:#fff}
.sdp-psbtn .spb{font-size:9px;padding:1px 5px;border-radius:6px;background:rgba(0,0,0,.08)}
.sdp-psbtn.on .spb{background:rgba(255,255,255,.25);color:#fff}
.sdp-layout{display:grid;grid-template-columns:1fr 270px;gap:14px;padding:14px 16px}
.sdp-main{}
.sdp-side{display:flex;flex-direction:column;gap:12px}
.sdp-cover{height:6px;border-radius:0;overflow:hidden;position:relative}
.sdp-cover-pat{display:none}
.sdp-hcard{background:#fff;border-radius:var(--r10);border:1px solid var(--g2);overflow:hidden;margin-bottom:12px;box-shadow:var(--sh)}
.sdp-prow{padding:10px 14px 12px;display:flex;align-items:center;gap:12px;margin-top:0}
.sdp-ava{width:48px;height:48px;border-radius:10px;background:var(--pp);border:2px solid #BBF7D0;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.sdp-tarea{flex:1;padding-top:6px}
.sdp-name{font-family:'Gmarket Sans',sans-serif;font-size:17px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sdp-verified{background:var(--gl);color:var(--g);font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;border:1px solid #BBF7D0}
.sdp-meta{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.sdp-mi{font-size:11px;color:var(--g5)}
.sdp-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.sdp-tag{font-size:10px;padding:2px 7px;border-radius:9px;background:var(--pp);color:var(--p);border:1px solid var(--pl);font-weight:600}
.sdp-tag.g{background:var(--gl);color:var(--g);border-color:#BBF7D0}
.sdp-tag.o{background:var(--ol);color:var(--o);border-color:#FDBA74}
.sdp-statsbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--g2)}
.sdp-sitem{padding:9px 6px;text-align:center;border-right:1px solid var(--g2)}
.sdp-sitem:last-child{border-right:none}
.sdp-sn{font-family:'Gmarket Sans',sans-serif;font-size:15px;font-weight:700;color:var(--p)}
.sdp-sl{font-size:10px;color:var(--g5);margin-top:1px}
.sdp-plan-badge{font-size:10px;font-weight:800;padding:3px 10px;border-radius:9px;background:linear-gradient(135deg,#F5A623,#D97706);color:#fff;margin-left:auto;white-space:nowrap;align-self:center}
.sdp-sec{background:#fff;border-radius:var(--r10);border:1px solid var(--g2);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh)}
.sdp-shead{padding:11px 14px;border-bottom:1px solid var(--g2);display:flex;align-items:center;justify-content:space-between}
.sdp-stitle{font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}
.sdp-sbadge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px}
.sdp-sb-free{background:var(--g2);color:var(--g5)}
.sdp-sb-pro{background:var(--pl);color:var(--p)}
.sdp-sb-biz{background:var(--ol);color:var(--o)}
.sdp-sbody{padding:12px 14px}
.sdp-locked{position:relative}
.sdp-lc{filter:blur(5px);pointer-events:none;user-select:none;opacity:.65}
.sdp-lov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5}
.sdp-lbox{background:rgba(255,255,255,.96);border-radius:12px;padding:16px 22px;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.12);border:1px solid var(--g2);max-width:250px}
.sdp-licon{font-size:22px;margin-bottom:4px}
.sdp-ltitle{font-family:'Gmarket Sans',sans-serif;font-size:14px;font-weight:700;margin-bottom:3px}
.sdp-lsub{font-size:11px;color:var(--g5);line-height:1.55;margin-bottom:10px}
.sdp-lbtn{padding:8px 20px;border-radius:18px;font-size:12px;font-weight:800;border:none;cursor:pointer;font-family:inherit;transition:all .18s}
.sdp-lbtn.pro{background:var(--p);color:#fff}.sdp-lbtn.pro:hover{background:var(--pd)}
.sdp-lbtn.biz{background:var(--o);color:#fff}
.sdp-lhint{font-size:10px;color:var(--g4);margin-top:6px}
.sdp-ig{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sdp-ii{background:var(--g1);border-radius:8px;padding:10px 12px;border:1px solid var(--g2)}
.sdp-il{font-size:10px;color:var(--g5);font-weight:600;margin-bottom:3px;text-transform:uppercase;letter-spacing:.2px}
.sdp-iv{font-size:13px;font-weight:700;color:var(--g7)}
.sdp-iv.g{color:var(--g)}.sdp-iv.b{color:var(--p)}.sdp-iv.o{color:var(--o)}
.sdp-cbox{background:linear-gradient(135deg,var(--pp),#fff);border-radius:8px;padding:12px;border:1px solid var(--pl)}
.sdp-crow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--pl);font-size:12px}
.sdp-crow:last-child{border-bottom:none}
.sdp-cl{color:var(--g5)}.sdp-cv{font-weight:700;color:var(--g7)}
.sdp-copy{font-size:10px;color:var(--p);cursor:pointer;font-weight:700}
.sdp-mbar-wrap{display:flex;flex-direction:column;gap:7px}
.sdp-mbrow{display:flex;align-items:center;gap:8px}
.sdp-mblabel{font-size:11px;color:var(--g6);width:65px;flex-shrink:0}
.sdp-mbt{flex:1;height:9px;background:var(--g2);border-radius:5px;overflow:hidden}
.sdp-mbf{height:100%;border-radius:5px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.sdp-mbv{font-size:11px;font-weight:700;width:32px;text-align:right;flex-shrink:0}
.sdp-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sdp-pmc{background:var(--g1);border-radius:8px;border:1px solid var(--g2);padding:10px;text-align:center;cursor:pointer;transition:all .15s;position:relative}
.sdp-pmc:hover{border-color:var(--p)}
.sdp-pmc.locked{filter:blur(3px);pointer-events:none}
.sdp-pmc-lov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7);border-radius:8px;font-size:18px}
.sdp-rv{border-bottom:1px solid var(--g2);padding:11px 0}
.sdp-rv:last-child{border-bottom:none}
.sdp-rvh{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.sdp-rvn{font-size:12px;font-weight:700}
.sdp-rvs{color:#F5A623;font-size:12px}
.sdp-rvb{font-size:12px;color:var(--g6);line-height:1.6}
.sdp-rvd{font-size:10px;color:var(--g4);margin-top:3px}
.sdp-cta{background:#fff;border-radius:var(--r10);border:1px solid var(--g2);overflow:hidden;box-shadow:var(--sh)}
.sdp-ctahead{padding:14px 16px;background:linear-gradient(130deg,var(--pd),var(--p));color:#fff}
.sdp-ctahead.green{background:linear-gradient(130deg,#14532D,var(--g))}
.sdp-ctahead.orange{background:linear-gradient(130deg,#7C2D12,var(--o))}
.sdp-ctahead-t{font-family:'Gmarket Sans',sans-serif;font-size:14px;font-weight:700;margin-bottom:2px}
.sdp-ctahead-s{font-size:11px;opacity:.8}
.sdp-ctabody{padding:14px 16px}
.sdp-po{border:2px solid var(--g2);border-radius:8px;padding:11px;margin-bottom:8px;cursor:pointer;transition:all .15s;position:relative}
.sdp-po:hover,.sdp-po.sel{border-color:var(--p);background:var(--pp)}
.sdp-po-badge{position:absolute;top:-8px;left:12px;background:var(--o);color:#fff;font-size:9px;font-weight:800;padding:2px 8px;border-radius:8px}
.sdp-po-row{display:flex;justify-content:space-between;align-items:flex-start}
.sdp-po-name{font-weight:800;font-size:13px}
.sdp-po-price{font-family:'Gmarket Sans',sans-serif;font-size:16px;font-weight:700;color:var(--p);text-align:right}
.sdp-po-mo{font-size:10px;color:var(--g5)}
.sdp-po-feats{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.sdp-po-feat{font-size:11px;color:var(--g6);display:flex;align-items:center;gap:4px}
.sdp-po-feat::before{content:'✓';color:var(--g);font-weight:900;font-size:10px;flex-shrink:0}
.sdp-main-btn{width:100%;padding:11px;border-radius:9px;font-size:13px;font-weight:800;border:none;cursor:pointer;font-family:inherit;transition:all .18s;margin-bottom:6px}
.sdp-main-btn.pro{background:var(--p);color:#fff}.sdp-main-btn.pro:hover{background:var(--pd)}
.sdp-main-btn.apply{background:var(--g);color:#fff}.sdp-main-btn.apply:hover{background:#15803D}
.sdp-main-btn.biz{background:var(--o);color:#fff}
.sdp-main-btn.ghost{background:#fff;color:var(--p);border:1.5px solid var(--p)}.sdp-main-btn.ghost:hover{background:var(--pp)}
.sdp-main-btn.ghost-o{background:#fff;color:var(--o);border:1.5px solid var(--o)}.sdp-main-btn.ghost-o:hover{background:var(--ol)}
.sdp-note{text-align:center;font-size:10px;color:var(--g4);margin-top:2px}
.sdp-sep{text-align:center;font-size:10px;color:var(--g4);margin:8px 0;position:relative}
.sdp-sep::before,.sdp-sep::after{content:'';position:absolute;top:50%;width:36%;height:1px;background:var(--g3)}
.sdp-sep::before{left:0}.sdp-sep::after{right:0}
.sdp-already{padding:10px;background:var(--gl);border-radius:8px;border:1px solid #BBF7D0;text-align:center;margin-bottom:8px}
.sdp-already.o{background:var(--ol);border-color:#FDBA74}
.sdp-already-t{font-size:13px;font-weight:700;color:var(--g)}
.sdp-already.o .sdp-already-t{color:var(--o)}
.sdp-already-s{font-size:10px;color:var(--g);opacity:.8;margin-top:1px}
.sdp-alrow{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:7px;border:1px solid var(--g2);background:var(--g1)}
.sdp-alrow.cur{background:var(--pp);border-color:var(--p)}
.sdp-alrow.dim{opacity:.5}
.sdp-aln{font-size:11px;font-weight:700;color:var(--g7);flex:1}
.sdp-alrow.cur .sdp-aln{color:var(--p)}
.sdp-als{font-size:10px;font-weight:700}
.sdp-als.ok{color:var(--g)}.sdp-als.no{color:var(--g4)}
.sdp-als.cur-b{background:var(--p);color:#fff;padding:1px 6px;border-radius:7px;font-size:9px}
.sdp-qcard{background:#fff;border-radius:var(--r10);border:1px solid var(--g2);padding:12px 14px;box-shadow:var(--sh)}
.sdp-qrow{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--g2);font-size:12px}
.sdp-qrow:last-child{border-bottom:none}
.sdp-ql{color:var(--g5)}.sdp-qv{font-weight:700;color:var(--g7)}
.sdp-qv.g{color:var(--g)}.sdp-qv.b{color:var(--p)}.sdp-qv.o{color:var(--o)}

/* ── MODAL ── */
.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:400;align-items:center;justify-content:center}
.ov.open{display:flex}
.modal{background:#fff;border-radius:var(--r20);width:500px;max-width:92vw;padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.22);position:relative;animation:slideUp .22s ease;max-height:90vh;overflow-y:auto}
@keyframes slideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.mx{position:absolute;top:14px;right:16px;font-size:22px;color:var(--g4);cursor:pointer}
.mx:hover{color:var(--g7)}
.micon{font-size:32px;margin-bottom:6px}
.mtitle{font-family:'Gmarket Sans',sans-serif;font-size:20px;font-weight:700;margin-bottom:4px}
.msub{font-size:13px;color:var(--g5);margin-bottom:18px}
.fl{margin-bottom:12px}
.fl label{display:block;font-size:11px;font-weight:700;color:var(--g5);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.finput,.fselect,.ftextarea{width:100%;border:1.5px solid var(--g3);border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none;color:var(--g7);transition:border .18s}
.finput:focus,.fselect:focus,.ftextarea:focus{border-color:var(--p)}
.ftextarea{resize:vertical;min-height:80px}
.mbtn{width:100%;margin-top:14px;padding:13px;background:var(--p);color:#fff;border:none;border-radius:var(--r10);font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .2s}
.mbtn:hover{background:var(--pd);transform:translateY(-1px)}
.mbtn.orange{background:var(--o)}.mbtn.orange:hover{background:#D94E1E}
.mnote{text-align:center;font-size:11px;color:var(--g4);margin-top:8px}
.fl2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── TOAST ── */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--g8);color:#fff;padding:11px 22px;border-radius:26px;font-size:13px;font-weight:600;z-index:600;transition:transform .35s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;box-shadow:0 6px 24px rgba(0,0,0,.2)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* anim */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.pcard:nth-child(1){animation:fadeUp .3s .04s both}
.pcard:nth-child(2){animation:fadeUp .3s .08s both}
.pcard:nth-child(3){animation:fadeUp .3s .12s both}
.pcard:nth-child(4){animation:fadeUp .3s .16s both}
.pcard:nth-child(5){animation:fadeUp .3s .20s both}
.pcard:nth-child(6){animation:fadeUp .3s .24s both}
.pcard:nth-child(7){animation:fadeUp .3s .28s both}
.pcard:nth-child(8){animation:fadeUp .3s .32s both}
.tab-pane{display:none}.tab-pane.active{display:block}
.empty{text-align:center;padding:48px 20px;color:var(--g4)}.empty .eicon{font-size:48px;margin-bottom:10px}
.badge-tag{font-size:10px;font-weight:800;padding:2px 8px;border-radius:8px;color:#fff;display:inline-block}

.pcard.pro-only{border:2px solid var(--p);position:relative}
/* 블러·딤·잠금 오버레이는 '잠긴'(pro-locked) 카드에만 — PRO/BIZ·본인·admin은 정상 노출 */
.pcard.pro-locked .pcard-img{opacity:0.35;filter:blur(1.5px)}
.pcard.pro-locked .pbody{opacity:0.55}
.pcard-lock{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;background:rgba(255,255,255,.5);color:var(--p);font-size:12px;font-weight:800;line-height:1.35;padding:8px}
.pcard-lock span{font-size:10px;font-weight:600;color:var(--g6)}
.pro-badge-card{position:absolute;top:8px;left:8px;z-index:5;background:var(--p);color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px}
.bsheet-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500}
.bsheet-bg.open{display:block}
.bsheet{position:fixed;bottom:-100%;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;z-index:501;padding:24px 20px 40px;transition:bottom .35s cubic-bezier(.4,0,.2,1);max-width:560px;margin:0 auto}
.bsheet.open{bottom:0}
.bsheet-handle{width:40px;height:4px;background:var(--g3);border-radius:2px;margin:0 auto 18px}
.bsheet-feat{display:flex;align-items:center;gap:10px;padding:10px 13px;background:var(--pp);border-radius:9px;border:1px solid #BBF7D0;margin-bottom:10px}

.pcard-img{position:relative;overflow:hidden}
.pcard-img img.pcard-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .3s}
.pcard:hover .pcard-photo{transform:scale(1.06)}
.pv-ava{overflow:hidden}
.pv-ava img{width:100%;height:100%;object-fit:cover}
.rcat{display:inline-block;padding:7px 15px;border-radius:18px;font-size:14px;font-weight:800;cursor:pointer;border:1.5px solid var(--g2);background:#fff;color:var(--g7);transition:all .15s;white-space:nowrap}.rcat:hover{border-color:var(--p);color:var(--p)}.rcat.on{background:var(--p);color:#fff;border-color:var(--p)}

/* ════════════════════════════════════════════════════════════
   PC 전용 통합 블록 (min-width:769px) — 모바일(max-width:768px)과 미겹침
   ① 패널 중앙 다이얼로그화  ② 상품 미리보기 2단  ③ 공급사 상세 폭
   ④ 히어로 밀도  ⑤ 사이드바 카드 밀도  ⑥ 정렬바  ⑦ 섹션 헤더 리듬
   base 규칙(.detail-panel 바텀시트 등)은 그대로 두고 여기서만 재정의.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* ───────── ① 패널: 바텀시트 → 화면 중앙 다이얼로그 ───────── */
  .detail-panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(1080px, 92vw);
    max-width: 1080px;
    height: min(900px, calc(100vh - 80px));
    max-height: calc(100vh - 80px);
    margin: 0;                       /* base의 margin:0 auto 무력화 (translate로 중앙정렬) */
    transform: translate(-50%, -46%);
    opacity: 0;
    border-radius: 18px;             /* 바텀시트 상단만 → 4면 둥글게 */
    border-top: none;                /* base의 3px 그린 보더 제거 */
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .26s ease;
  }
  .detail-panel.open {
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  /* 드래그 핸들 비활성: JS mousedown 대상 제거 → 인라인 transform 미발생
     → 위 CSS translate 중앙정렬을 온전히 제어 (프로젝트 노트 확정 동작) */
  .dp-handle { display: none; }

  /* 헤더/본문 모서리 정돈 */
  .dp-header { border-radius: 18px 18px 0 0; padding: 14px 20px; }
  .dp-body-wrap { border-radius: 0 0 18px 18px; }

  /* ───────── ② 상품 미리보기 2단 레이아웃 (_panel.blade.php) ───────── */
  .pp-wrap { max-width: 980px; }     /* 모바일 인라인 max-width:600px 대체 */

  .pp-top {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 8px;
  }
  .pp-gallery {
    position: sticky;
    top: 12px;
    max-width: none;                 /* 내부 .hf-gallery 인라인 max-width:440 무관, 칼럼 꽉 */
    margin: 0;
  }
  .pp-detail { margin-top: 8px; }

  /* ───────── ③ 공급사 상세 (.sdp-layout) — 넓은 패널 대응 ───────── */
  .sdp-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
  }

  /* ───────── ④ 히어로 밀도 ───────── */
  .hero { padding: 30px 34px; margin-bottom: 18px; }
  .hero-row { gap: 28px; }
  .hero-title { font-size: 25px; line-height: 1.32; }
  .hero-sub { font-size: 14px; margin-top: 8px; }
  .hero-stats { gap: 32px; margin-top: 18px; }
  .hstat-n { font-size: 23px; }
  .hstat-l { font-size: 12px; margin-top: 2px; }
  .hcta { padding: 11px 24px; font-size: 14px; }

  /* ───────── ⑤ 사이드바 카드 밀도 ───────── */
  .sbhead { padding: 12px 16px; font-size: 15px; }
  .sbsec { padding: 12px 16px; }
  .sblabel { font-size: 12.5px; margin-bottom: 8px; }
  .sbinput { padding: 9px 11px; font-size: 14px; }
  .chips { gap: 6px; margin-top: 6px; }
  .chip { padding: 4px 11px; font-size: 13px; }
  .qi { padding: 12px 16px; font-size: 15px; }
  .qi-ic { font-size: 17px; width: 22px; }

  /* ───────── ⑥ 정렬바 ───────── */
  .sortbar { padding: 11px 16px; gap: 8px; margin-bottom: 14px; }
  .sortbar .lbl { font-size: 13.5px; }
  .sbtn2 { padding: 6px 14px; font-size: 14px; }
  .vtbtn { width: 32px; height: 32px; }

  /* ───────── ⑥-1 상품 목록 가독성 ───────── */
  .pgrid:not(.list-mode) { gap: 16px; }
  .pgrid:not(.list-mode) .pbody { padding: 12px 13px 13px; }
  .pgrid:not(.list-mode) .pmeta {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 12px;
    line-height: 1.25;
    min-width: 0;
  }
  .pgrid:not(.list-mode) .pmeta .al {
    padding: 3px 7px;
    border-radius: 6px;
    background: #FEE2E2;
    color: var(--r);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .pgrid:not(.list-mode) .ptag-method {
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .pgrid:not(.list-mode) .ptitle {
    font-size: 14.5px;
    line-height: 1.42;
    margin-bottom: 10px;
    font-weight: 800;
    color: var(--g8);
  }
  .pgrid:not(.list-mode) .pprices { align-items: flex-end; gap: 12px; }
  .pgrid:not(.list-mode) .pprices > div { flex: 1 1 0; min-width: 0; }
  .pgrid:not(.list-mode) .pprice-sell-wrap,
  .pgrid:not(.list-mode) .pprices > div:last-child { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .pgrid:not(.list-mode) .pp-supply { font-size: 12px; line-height: 1.3; white-space: nowrap; }
  .pgrid:not(.list-mode) .pprice-sell-wrap .pp-supply { display: flex; align-items: center; justify-content: flex-end; gap: 5px; width: 100%; }
  .pgrid:not(.list-mode) .pmargin-inline { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 999px; background: var(--r); color: #fff; font-size: 11px; font-weight: 900; line-height: 1; white-space: nowrap; }
  .pgrid:not(.list-mode) .pp-val { font-size: 16px; line-height: 1.25; font-weight: 900; }
  .pgrid:not(.list-mode) .pp-sell { font-size: 15px; line-height: 1.25; font-weight: 900; white-space: nowrap; }
  .pgrid:not(.list-mode) .pseller { font-size: 11.5px; margin-top: 5px; }
  .pgrid:not(.list-mode) .pfoot { min-height: 36px; }
  .pgrid:not(.list-mode) .pfbtn { padding: 9px 7px; font-size: 12.5px; }
  .pbadge,.pro-badge-card { font-size: 11px; }
  .plike { width: 32px; height: 32px; font-size: 15px; }

  /* ───────── ⑦ 섹션 헤더 리듬 (.ct prefix로 mobile base 1-class 이김) ───────── */
  .ct .hf-section-head { margin: 26px 4px 16px; }
  .ct .hf-section-title { font-size: 23px; }
  .ct .hf-section-sub { font-size: 13px; margin-top: 6px; }
}

/* ═══════ 컨테이너 폭 (≥1025px) — 769~1024 태블릿 !important 밴드 회피 ═══════ */
@media (min-width: 1025px) {
  .wrap { gap: 22px; padding: 24px 24px 40px; }
  .sb { width: 236px; }
}

/* ═══════ 초광폭 (≥1280px) ═══════ */
@media (min-width: 1280px) {
  .wrap { max-width: 1440px; gap: 26px; padding: 26px 28px 48px; }
  .sb { width: 248px; }
  .hero { padding: 34px 40px; }
  .hero-title { font-size: 27px; }
  .hero-stats { gap: 40px; }
  .ct .hf-section-title { font-size: 24px; }
}