/* =========================================================
   소망유통 - 디자인 시스템 v2 (Teal + Amber)
   Author: refresh 2026-05-12
   ========================================================= */
:root{
  /* Brand palette */
  --brand:        #0f766e;      /* primary teal-700 */
  --brand-2:      #0b5e57;      /* darker teal for hover/active */
  --brand-soft:   #e6f4f2;      /* tinted bg */
  --accent:       #f59e0b;      /* amber CTA accent */
  --accent-2:     #d97706;      /* amber hover */
  --price:        #dc2626;      /* sale red */
  --success:      #16a34a;
  --warn:         #ea580c;

  /* Ink/Surface */
  --ink:          #0f172a;
  --ink-2:        #1f2937;
  --muted:        #64748b;
  --line:         #e5e7eb;
  --line-strong:  #d1d5db;
  --bg:           #ffffff;
  --bg-soft:      #f5f7fa;
  --bg-tint:      #eef2f6;

  /* Effects */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow:    0 6px 18px rgba(15,23,42,.08);
  --shadow-lg: 0 18px 40px rgba(15,23,42,.12);

  --maxw: 1200px;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
              'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, Segoe UI, Roboto,
              Helvetica, Arial, 'Malgun Gothic', sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.5;
  letter-spacing:-0.005em;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* =========================================================
   Utility bar (상단 회색 바)
   ========================================================= */
.util{background:#f8fafc; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted)}
.util .container{display:flex; justify-content:space-between; padding:8px 20px}
.util a{margin-left:14px; color:var(--muted); transition:color .15s}
.util a:hover{color:var(--brand)}

/* =========================================================
   Header
   ========================================================= */
header{position:sticky; top:0; z-index:3000; background:#fff; border-bottom:1px solid var(--line); backdrop-filter:saturate(140%) blur(6px)}
.head-grid{display:grid; grid-template-columns:240px 1fr 320px; align-items:center; gap:18px; padding:18px 20px}

/* 로고: 그라데이션 박스 + 워드마크 */
.logo{display:flex; align-items:center; gap:10px; font-weight:900}
.logo .box{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, var(--brand) 0%, #14b8a6 100%);
  display:grid; place-items:center;
  box-shadow:0 6px 14px rgba(15,118,110,.28);
  overflow:hidden;
}
.logo .box img{width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1)}
.logo .t1{font-size:20px; line-height:1; color:var(--ink); letter-spacing:-0.02em}
.logo .t2{font-size:12px; color:var(--muted); font-weight:600; margin-top:3px}

/* 검색 */
.search{position:relative}
.search input{
  width:100%; padding:13px 46px; border-radius:999px;
  border:1.5px solid var(--line); font-size:15px; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.search input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(15,118,110,.12)}
.search .icon{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted)}

/* 우측 아이콘 컬럼 */
.icons{display:flex; justify-content:flex-end; align-items:flex-start; gap:18px}
.ico-col{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; min-width:56px; color:var(--ink-2); transition:transform .15s}
.ico-col:hover{transform:translateY(-2px)}
.ico-col .fig{
  position:relative; width:40px; height:40px; border:1px solid var(--line);
  border-radius:12px; display:grid; place-items:center; background:#fff;
  color:var(--ink-2); transition:border-color .15s, background .15s;
}
.ico-col:hover .fig{border-color:var(--brand); background:var(--brand-soft); color:var(--brand)}
.icons small{margin-top:4px; font-size:12px; line-height:1; color:var(--ink-2)}
.badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px;
  padding:0 5px; border-radius:999px; background:var(--accent); color:#fff;
  font-size:11px; line-height:18px; text-align:center; font-weight:700;
  box-shadow:0 2px 6px rgba(245,158,11,.4);
}

/* =========================================================
   Top Navigation
   ========================================================= */
.nav{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; overflow:visible}
.nav .container{display:grid; grid-template-columns:200px 1fr; align-items:center}
.cat-wrap{position:relative}
.cat-btn{
  width:100%; height:48px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; border:0; border-radius:10px;
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-weight:800; font-size:14px; cursor:pointer; letter-spacing:0.02em;
  box-shadow:0 4px 12px rgba(15,118,110,.25);
  transition:transform .15s, box-shadow .15s;
}
.cat-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,118,110,.35)}
.menu{display:flex; gap:8px; padding:0 16px}
.menu a{
  display:inline-block; padding:14px 12px; font-weight:600;
  color:var(--ink-2); font-size:14px; transition:color .15s, background .15s;
  border-radius:8px;
}
.menu a:hover{color:var(--brand); background:var(--brand-soft)}

/* CATEGORY 드롭다운 */
#catMenu{
  position:absolute; left:0; top:100%; width:280px; min-height:420px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:8px 0; z-index:5000;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s ease, visibility 0s .16s, transform .16s ease;
  transform:translateY(-6px);
}
@media (hover:hover){ .cat-wrap.hovering #catMenu, .cat-wrap:hover #catMenu{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)} }
#catMenu.open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
.cat-wrap::after{content:""; position:absolute; left:0; top:100%; width:280px; height:12px}
#catMenu a{display:block; padding:12px 18px; font-size:14px; color:var(--ink-2); transition:background .15s, color .15s}
#catMenu a:hover{background:var(--brand-soft); color:var(--brand); font-weight:600}

.more-btn{
  width:34px; height:34px; padding:0; display:inline-grid; place-items:center;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  font-size:18px; line-height:1; color:var(--ink-2); cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.more-btn:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-soft)}

/* =========================================================
   Login Panel
   ========================================================= */
.login-wrap{position:relative}
.login-trigger{cursor:pointer}
.login-panel{
  position:absolute; right:0; top:calc(100% + 10px); width:340px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:16px; z-index:6000;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s .16s;
}
.login-panel.open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
.login-head{font-weight:800; margin-bottom:12px; color:var(--ink); font-size:15px}
.field{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.field input{
  padding:11px 13px; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; font-size:14px; transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin:6px 0 10px}
.login-btn{
  width:100%; height:44px; border-radius:10px;
  border:1.5px solid var(--brand); background:#fff;
  color:var(--brand); font-weight:800; cursor:pointer;
  transition:background .15s, color .15s;
}
.login-btn:hover{background:var(--brand-soft)}
.join-btn{
  width:100%; height:44px; margin-top:8px; border-radius:10px; border:0;
  background:linear-gradient(135deg, var(--ink), var(--ink-2)); color:#fff;
  font-weight:800; cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.join-btn:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(15,23,42,.2)}
.util-links{text-align:right; margin-top:10px; font-size:12px; color:var(--muted)}
header{position:sticky; top:0; z-index:3000} .nav{overflow:visible}

/* =========================================================
   Hero Slider
   ========================================================= */
.hero{
  background:linear-gradient(135deg, #e6f4f2 0%, #f5f7fa 100%);
}
.slider{position:relative; overflow:hidden}
.slides{display:flex; transition:transform .5s ease}
.slide{min-width:100%; height:380px; position:relative}
.slide .left{position:absolute; left:8%; top:50%; transform:translateY(-50%); max-width:540px}
.slide h2{margin:0 0 12px; font-size:42px; font-weight:900; color:var(--ink); letter-spacing:-0.03em}
.slide .sub{color:var(--muted); font-size:18px; line-height:1.6}
.slide .phone{
  position:absolute; right:10%; top:50%; transform:translateY(-50%);
  width:min(340px,36vw); aspect-ratio:9/16; border:12px solid var(--ink);
  border-radius:30px; background:#fff; display:grid; place-items:center;
  box-shadow:0 30px 80px rgba(15,23,42,.25);
}
.slide .barcode{
  width:70%; height:36%; border:2px solid var(--line);
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 6px);
}
.arw{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.95);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:background .15s, transform .15s;
}
.arw:hover{background:#fff; transform:translateY(-50%) scale(1.06)}
.prev{left:14px} .next{right:14px}

/* =========================================================
   Brand row
   ========================================================= */
.brand-row{border-bottom:1px solid var(--line); background:#fff}
.brand-row .container{display:flex; gap:28px; align-items:center; padding:18px 20px; overflow:auto}
.chip-logo, .chip-brand{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  white-space:nowrap; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.chip-logo:hover, .chip-brand:hover{
  border-color:var(--brand); transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(15,118,110,.12);
}

/* =========================================================
   Sections / Grid / Cards
   ========================================================= */
section .container{padding:36px 20px}
.section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.section-head h3{margin:0; font-size:24px; font-weight:900; color:var(--ink); letter-spacing:-0.02em}
.under{height:3px; width:48px; background:linear-gradient(90deg, var(--brand), var(--accent)); margin-top:10px; border-radius:2px}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.card{
  border:1px solid var(--line); border-radius:14px; background:#fff;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-strong)}
.thumb{aspect-ratio:4/3; background:var(--bg-tint); display:grid; place-items:center}
.meta{padding:14px 16px}
.title{margin:0 0 8px; font-size:15px; line-height:1.45; color:var(--ink-2); font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.price{color:var(--price); font-weight:900; margin-bottom:6px; font-size:17px}
.stars{font-size:14px; color:#f59e0b}
.act{display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line)}

/* =========================================================
   Buttons (글로벌)
   ========================================================= */
.btn{
  flex:1; display:inline-flex; justify-content:center; align-items:center;
  padding:10px 14px; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink-2); cursor:pointer; font-weight:700;
  font-size:14px; transition:border-color .15s, background .15s, color .15s, transform .15s;
}
.btn:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-soft)}
.btn.small{height:36px; padding:0 14px; font-size:13px}
.btn.gray{background:var(--bg-soft); border-color:var(--line)}
.btn.red{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; border-color:var(--brand);
}
.btn.red:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(15,118,110,.3); color:#fff; background:linear-gradient(135deg, var(--brand-2), var(--brand))}
.btn.disabled, .btn[disabled]{background:#9ca3af; border-color:#9ca3af; color:#fff; cursor:not-allowed; opacity:.85}
.btn.disabled:hover, .btn[disabled]:hover{transform:none; box-shadow:none}

/* 메인 액션(앰버) — 결제 등 강조 CTA */
.btn.cta{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:var(--accent); color:#fff;
}
.btn.cta:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(245,158,11,.35); color:#fff}

/* =========================================================
   Floating
   ========================================================= */
.floating{position:fixed; right:16px; top:45%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:40}
.fab{
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 18px rgba(15,118,110,.32); cursor:pointer;
}
.fab.dark{background:linear-gradient(135deg, var(--ink), var(--ink-2)); box-shadow:0 8px 18px rgba(15,23,42,.25)}

/* =========================================================
   Footer
   ========================================================= */
.footer-top{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff}
.footer-top .container{display:flex; justify-content:space-between; padding:14px 20px; font-size:14px}
.footer-top a{color:#fff; opacity:.92; transition:opacity .15s}
.footer-top a:hover{opacity:1; text-decoration:underline}

footer{background:#0f172a; color:#cbd5e1}
footer .container{display:grid; grid-template-columns:1.3fr .8fr .9fr; gap:28px; padding:34px 20px}
footer h4{margin:0 0 8px; color:#fff; font-size:15px; font-weight:800; letter-spacing:-0.01em}
footer small{font-size:13px; line-height:1.7; color:#94a3b8}
.sns{display:flex; gap:10px; margin-top:10px}
.sns a{
  width:30px; height:30px; border-radius:999px; background:#1f2937;
  display:inline-grid; place-items:center; transition:background .15s;
}
.sns a:hover{background:var(--brand)}
.copyright{border-top:1px solid #1f2937; color:#64748b; font-size:13px; text-align:center; padding:14px 20px; background:#0f172a}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:1024px){
  .head-grid{grid-template-columns:1fr; gap:12px}
  .nav .container{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .slide{height:320px}
  .slide h2{font-size:32px}
}
@media (max-width:560px){
  .slide h2{font-size:26px}
  .slide .phone{display:none}
  .cat-menu{width:min(86vw,340px)}
}

/* =========================================================
   Terms / Form
   ========================================================= */
.terms-wrap{margin:14px 0 18px}
.terms-wrap h3{margin:0 0 8px; font-size:16px; color:var(--ink); font-weight:800}
.terms-box{border:1px solid var(--line); border-radius:10px; background:#fff}
.terms-box textarea{width:100%; min-height:180px; border:0; padding:14px; resize:vertical; background:#fff; color:var(--ink-2); font-family:inherit; font-size:13px; line-height:1.65}
.terms-check{display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--ink-2)}
.terms-check.all{border-top:1px dashed var(--line); padding-top:12px; margin-top:18px; font-weight:700}
#btn-next[disabled]{cursor:not-allowed; opacity:.5}

.form{display:grid; gap:18px}
.group{border:1px solid var(--line); border-radius:12px; padding:18px; background:#fff}
.group legend{font-weight:800; padding:0 6px; color:var(--brand)}
.field{display:grid; align-items:center; gap:8px; margin:12px 0}
.field .lbl{color:var(--ink-2); font-weight:600; font-size:14px}
.field .ipt{position:relative; display:flex; align-items:center}
.field .ipt input{
  width:100%; padding:11px 12px 11px 38px; border:1.5px solid var(--line);
  border-radius:10px; background:#fff; font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
.field .ipt input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.field .ipt .ico{position:absolute; left:12px; width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:2}
.field .ipt.phone input{flex:1}
.field .ipt.phone .btn{margin-left:8px}
.field .ipt.code input{flex:1}
.field .ipt.code .btn{margin-left:8px}
.captcha .cap-row{display:flex; align-items:center; gap:8px; margin-top:6px}
.hint{font-size:12px; color:var(--muted); margin-top:6px}
.actions{display:flex; gap:8px; justify-content:flex-end; margin-top:6px}

/* =========================================================
   상품 썸네일 통일
   ========================================================= */
:root { --prod-thumb-ratio: 4/3; }
.grid .thumb{
  aspect-ratio: var(--prod-thumb-ratio);
  background:var(--bg-tint);
  border-radius:12px;
  overflow:hidden;
  display:block;
}
.grid .thumb img{
  width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  transition:transform .35s ease;
}
.card:hover .thumb img{transform:scale(1.04)}
@media (max-width:560px){
  .grid .thumb{ border-radius:10px; }
}

/* =========================================================
   Mini drawer (장바구니/위시 패널)
   ========================================================= */
.mini-fab{
  position:fixed; right:18px; top:45%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:14px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; display:grid; place-items:center; z-index:9997; border:none; cursor:pointer;
  box-shadow:0 10px 22px rgba(15,118,110,.32);
  transition:transform .15s, box-shadow .15s;
}
.mini-fab:hover{transform:translateY(-50%) scale(1.05); box-shadow:0 12px 26px rgba(15,118,110,.4)}
.mini-fab-badge{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; line-height:20px;
  padding:0 6px; border-radius:999px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:700; pointer-events:none;
  box-shadow:0 2px 6px rgba(245,158,11,.4);
}
.mini-mask{position:fixed; inset:0; z-index:70}
.mini-drawer{
  width:360px; max-width:88vw; position:fixed; top:0; right:0; height:100dvh;
  background:#fff; border-left:1px solid var(--line);
  box-shadow:-20px 0 60px rgba(0,0,0,.18); transform:translateX(100%);
  transition:transform .22s ease; z-index:12000; display:flex; flex-direction:column;
}
.mini-drawer.open{transform:translateX(0)}
.mini-head{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); font-weight:800; background:var(--bg-soft)}
.mini-close{width:34px; height:34px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; transition:border-color .15s, color .15s}
.mini-close:hover{border-color:var(--brand); color:var(--brand)}
.mini-sec{padding:14px 16px; border-bottom:1px solid #f0f2f6}
.mini-sec > header{display:flex; align-items:center; gap:8px; font-weight:800; margin-bottom:10px; color:var(--ink)}
.mini-sec .cnt{
  min-width:24px; height:24px; padding:0 7px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:12px; line-height:24px;
  text-align:center; font-weight:700;
}
.mini-list{display:flex; flex-direction:column; gap:10px; max-height:38vh; overflow:auto; padding-right:2px}
.mini-item{display:grid; grid-template-columns:64px 1fr 28px; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:8px}
.mini-thumb{width:64px; height:48px; border-radius:8px; background:var(--bg-tint); overflow:hidden; display:grid; place-items:center}
.mini-thumb img{width:100%; height:100%; object-fit:contain}
.mini-info{display:flex; flex-direction:column; gap:4px}
.mini-name{font-weight:700; line-height:1.25; max-height:2.6em; overflow:hidden; color:var(--ink-2); font-size:14px}
.mini-price{color:var(--price); font-weight:800; font-size:14px}
.mini-remove{width:28px; height:28px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; transition:border-color .15s, color .15s}
.mini-remove:hover{border-color:var(--price); color:var(--price)}
.mini-qty{display:inline-grid; grid-template-columns:36px 64px 36px; gap:6px; align-items:center; margin-top:4px}
.mini-qminus, .mini-qplus{width:36px; height:36px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:18px; line-height:1; cursor:pointer; transition:border-color .15s, background .15s}
.mini-qminus:hover, .mini-qplus:hover{border-color:var(--brand); background:var(--brand-soft); color:var(--brand)}
.mini-qinput{height:36px; width:64px; text-align:center; border:1.5px solid var(--line); border-radius:10px; background:#fff; font-weight:700}
.mini-qinput::-webkit-outer-spin-button, .mini-qinput::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.mini-qinput[type=number]{-moz-appearance:textfield}
.mini-actions{display:flex; justify-content:flex-end; margin-top:10px}
.mini-go{height:38px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-weight:700; transition:border-color .15s, color .15s}
.mini-go:hover{border-color:var(--brand); color:var(--brand)}
.mini-empty{padding:14px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); text-align:center; font-size:13px}

/* =========================================================
   모바일 전용 레이아웃 (≤ 768px)
   ========================================================= */
.mbar, .mnav, .msearch{display:none}

@media (max-width:768px){
  .util, header .head-grid, header .nav { display:none !important; }

  /* 모바일 상단 바 */
  .mbar{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:4000; height:56px; padding:0 14px;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-sm);
  }
  .mbar-btn{
    width:42px; height:42px; border:1px solid var(--line); border-radius:10px;
    background:#fff; font-size:18px; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .mbar-btn:hover, .mbar-btn:active{border-color:var(--brand); background:var(--brand-soft)}
  .mbar-logo{
    font-weight:900; font-size:18px; color:var(--ink); text-decoration:none;
    letter-spacing:-0.03em;
  }
  .mbar-logo b{color:var(--brand)}
  .mbar-right{display:flex; align-items:center; gap:6px}
  .mbar-ico{
    position:relative; padding:0 10px; height:40px; line-height:40px;
    border:none; font-size:13px; border-radius:8px; cursor:pointer;
    background:#fff; color:var(--ink-2); font-weight:600;
    transition:background .15s, color .15s;
  }
  .mbar-ico:hover, .mbar-ico:active{background:var(--brand-soft); color:var(--brand)}
  .m-badge{
    position:absolute; right:-4px; top:-4px; min-width:18px; height:18px;
    line-height:18px; font-size:11px; color:#fff; background:var(--accent);
    border-radius:999px; padding:0 5px; text-align:center; font-weight:700;
  }

  /* 오프캔버스 좌측 네비 */
  .mnav{
    display:block; position:fixed; inset:0 30% 0 0; max-width:340px;
    transform:translateX(-100%); transition:transform .22s ease;
    background:#fff; z-index:5000; border-right:1px solid var(--line);
    overflow:auto; box-shadow:8px 0 24px rgba(15,23,42,.15);
  }
  .mnav.open{transform:translateX(0)}
  .mnav-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:16px; border-bottom:1px solid var(--line);
    background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
  }
  .mnav-head strong{font-size:15px; letter-spacing:0.04em}
  .mnav-head button{background:rgba(255,255,255,.15); border:0; color:#fff; width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:16px}
  .mnav-quick{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px}
  .mnav-qbtn{
    display:inline-block; text-align:center; padding:12px 0;
    border:1px solid var(--line); border-radius:10px; background:#fff;
    font-weight:600; color:var(--ink-2);
  }
  .mnav-qbtn:hover, .mnav-qbtn:active{border-color:var(--brand); color:var(--brand); background:var(--brand-soft)}
  .mnav-sec{padding:12px 16px 6px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); font-weight:700; letter-spacing:0.05em}
  .mnav-list{list-style:none; padding:0; margin:0}
  .mnav-list li a{display:block; padding:14px 16px; border-bottom:1px solid #f3f4f6; color:var(--ink); font-weight:600}
  .mnav-list li a:active, .mnav-list li a:hover{background:var(--brand-soft); color:var(--brand)}
  .mnav-brands{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px}
  .mnav-brand{display:flex; align-items:center; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; color:var(--ink-2); font-size:13px}
  .mnav-brand img{width:28px; height:28px; object-fit:contain}
  .mnav-brand-fallback{width:28px; height:28px; border-radius:999px; background:var(--bg-tint); display:grid; place-items:center; font-weight:800; color:var(--brand); font-size:12px}
  .mnav-bottom{padding:14px; display:flex; gap:8px}
  .mnav-auth{
    flex:1; text-align:center; padding:11px 0; border:1.5px solid var(--brand);
    border-radius:10px; color:var(--brand); font-weight:700;
  }
  .mnav-auth:last-child{background:var(--brand); color:#fff}

  /* 모바일 검색 오버레이 */
  .msearch{
    display:block; position:fixed; inset:0; background:rgba(15,23,42,.55);
    backdrop-filter:saturate(120%) blur(3px); z-index:4900;
    opacity:0; visibility:hidden; transition:opacity .16s ease;
  }
  .msearch.open{opacity:1; visibility:visible}
  .msearch-bar{
    position:absolute; left:0; right:0; top:12px; margin:0 auto;
    width:clamp(280px,92vw,620px);
    background:#fff; border-radius:12px; border:1px solid var(--line);
    display:flex; gap:8px; padding:10px;
    box-shadow:var(--shadow-lg);
  }
  .msearch-bar input{flex:1; border:0; outline:0; font-size:15px}

  /* 모바일 상품 그리드 */
  .grid{grid-template-columns:repeat(2,1fr) !important; gap:12px !important}
  .card .thumb{aspect-ratio:3/2}
  .card .act .btn{padding:9px 8px; font-size:13px}
  .meta{padding:12px 12px}
  .title{font-size:14px}
  .price{font-size:15px}

  /* 모바일 hero */
  .slide{height:260px}
  .slide h2{font-size:24px}
  .slide .left{left:6%; max-width:80%}
  .slide .sub{font-size:14px}

  /* 모바일 푸터 */
  footer .container{grid-template-columns:1fr; gap:18px}
  .footer-top .container{flex-direction:column; gap:6px; text-align:center}

  /* 모바일 미니 fab는 살짝 작게 */
  .mini-fab{width:48px; height:48px; right:12px; top:auto; bottom:90px; transform:none}
  .mini-fab:hover{transform:scale(1.04)}
}

/* =========================================================
   Alerts / 공통 메시지
   ========================================================= */
.msg{min-height:18px; font-size:13px}
.msg.err{color:var(--price)}
.msg.ok{color:var(--success)}

/* 쪽지함 노출 칩 */
.msg-link{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--ink-2); padding:4px 10px; border-radius:8px; transition:background .15s;
}
.msg-link:hover{background:var(--brand-soft); color:var(--brand)}
.msg-pill{
  display:inline-block; min-width:18px; height:18px; line-height:18px;
  padding:0 6px; border-radius:999px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:700; text-align:center;
}