@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root{
  --violet:#9184D9;
  --violet-deep:#A78BFA;
  --violet-tint:rgba(145,132,217,.16);
  --ink:#E9E9ED;
  --sub:#B2B6CA;
  --mute:#9397AB;
  --line:rgba(167,139,250,.75);
  --paper:#262B3C;
  --card:#333850;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:'Noto Sans KR', system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
.hidden{ display:none !important; }

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:20;
  background:var(--card); border-bottom:1px solid var(--line);
}
.top-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:12px 20px;
  max-width:1280px; margin:0 auto;
}
.logo{ height:24px; width:auto; flex:none; }
.search{ flex:1; max-width:420px; }
.search input{
  width:100%; height:38px; padding:0 14px;
  border:1px solid var(--line); border-radius:19px;
  font-size:13.5px; background:var(--paper); color:var(--ink);
}
.search input:focus{ outline:none; border-color:var(--violet); }
.cart-btn{
  margin-left:0; position:relative;
  height:38px; padding:0 18px;
  border:1px solid var(--violet); border-radius:19px;
  background:var(--card); color:var(--violet); font-weight:700; font-size:13.5px;
}
.cart-btn:hover{ background:var(--violet-tint); }
.icon-btn{
  flex:none; margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0;
  border:1px solid var(--violet); border-radius:19px;
  background:var(--card); color:var(--violet);
}
.icon-btn:hover{ background:var(--violet-tint); }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn.cart-btn{ margin-left:8px; }
#search-toggle{ display:none; }
.cart-count{
  position:absolute; top:-6px; right:-6px; margin-left:0;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--violet); color:#fff; border-radius:9px; font-size:10.5px; font-weight:700;
}

.chips{
  display:flex; gap:8px; overflow-x:auto;
  padding:10px 20px 14px; max-width:1280px; margin:0 auto;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; height:34px; padding:0 16px;
  border:1px solid var(--violet); border-radius:17px;
  background:transparent; color:var(--violet); font-size:13px; font-weight:700;
  white-space:nowrap;
}
.chip.active{ background:var(--violet); color:#fff; }
.chips.sub{ padding-top:0; flex-wrap:wrap; overflow-x:visible; max-height:112px; overflow-y:auto; }
.chips.sub .chip{ background:var(--card); color:var(--sub); border-color:var(--line); font-weight:500; height:26px; padding:0 10px; font-size:11px; }
.chips.sub .chip.active{ background:var(--violet-tint); color:var(--violet-deep); border-color:var(--violet); font-weight:700; }

/* ---------- main ---------- */
main{ max-width:1280px; margin:0 auto; padding:22px 20px 80px; }
.catalog-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:16px;
}
.catalog-head h2{ font-size:19px; margin:0; }
.count{ font-size:12.5px; color:var(--mute); }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:16px;
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
}
.thumb{ display:block; aspect-ratio:1/1; background:var(--violet-tint); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.body{ padding:11px 12px 12px; display:flex; flex-direction:column; gap:5px; flex:1; }
.sub{ font-size:11px; color:var(--mute); }
.name{
  font-size:13px; line-height:1.4; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.name:hover{ color:var(--violet); }
.price-row{ display:flex; align-items:baseline; justify-content:space-between; margin-top:auto; padding-top:4px; }
.price{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.moq{ font-size:10.5px; color:var(--mute); }
.add-row{ display:flex; gap:6px; margin-top:2px; }
.note-input{
  width:100%; margin-top:6px; padding:6px 8px;
  border:1px solid var(--line); border-radius:6px;
  font-size:11px; background:var(--paper); color:var(--ink);
}
.note-input::placeholder{ color:var(--mute); }
.note-input:focus{ outline:none; border-color:var(--violet); }
.cart-note{ margin-top:4px; width:100%; }
.qty{
  width:56px; text-align:center; padding:6px 4px;
  border:1px solid var(--line); border-radius:6px; font-size:12.5px;
}
.btn-add{
  flex:1; background:var(--violet); color:#fff; border:none;
  border-radius:6px; font-size:12.5px; padding:7px 6px;
}
.btn-add:hover{ background:var(--violet-deep); }

.sentinel{ height:1px; }
.empty-msg{ text-align:center; color:var(--mute); padding:60px 0; grid-column:1/-1; }

/* ---------- 상세페이지 ---------- */
.thumb[data-open-detail], .name[data-open-detail]{ cursor:pointer; }
#detail-view{ max-width:1280px; margin:0 auto; padding:20px 20px 80px; }
.detail-top{
  position:sticky; top:57px; z-index:15;
  background:var(--paper); padding:14px 0;
}
.btn-back{
  height:36px; padding:0 16px;
  border:1px solid var(--violet); border-radius:18px;
  background:var(--card); color:var(--violet); font-weight:700; font-size:13px;
}
.btn-back:hover{ background:var(--violet-tint); }
.detail-inner{ max-width:720px; margin:0 auto; }
.detail-head{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; margin-bottom:18px;
}
.detail-head h2{ font-size:17px; line-height:1.4; margin:4px 0 10px; }
.detail-meta-row{ display:flex; align-items:baseline; justify-content:space-between; }
.detail-add-row{ display:flex; gap:8px; margin-top:14px; }
.detail-add-row .qty{ width:70px; }
.detail-add-row .btn-add{ flex:1; padding:9px 6px; font-size:13.5px; }
.detail-images{ display:flex; flex-direction:column; }
.detail-images img{ width:100%; height:auto; display:block; }

/* ---------- cart drawer ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(30,30,36,.35); z-index:29;
}
.cart{
  position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100vh;
  background:var(--card); z-index:30; display:flex; flex-direction:column;
  box-shadow:-8px 0 30px rgba(0,0,0,.45);
  transition:right .25s ease;
}
.cart.open{ right:0; }
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.cart-head h3{ margin:0; font-size:17px; }
.close-btn{ background:none; border:none; font-size:20px; color:var(--sub); line-height:1; }
.cart-body{ flex:1; overflow-y:auto; padding:8px 20px; }
.cart-line{
  display:flex; gap:10px; align-items:center; padding:12px 0;
  border-bottom:1px dotted var(--line);
}
.cart-line img{ width:46px; height:46px; border-radius:6px; object-fit:cover; flex:none; background:var(--violet-tint); }
.cart-line .info{ flex:1; min-width:0; }
.cart-line .name{ font-size:12.5px; margin-bottom:2px; }
.cart-line .code{ font-size:10.5px; color:var(--mute); font-family:monospace; }
.qty-box{ display:flex; align-items:center; gap:6px; font-size:12.5px; }
.qty-box .step{
  width:22px; height:22px; border:1px solid var(--line); border-radius:5px;
  background:var(--card); color:var(--ink); font-size:13px; line-height:1;
}
.line-price{ font-size:12.5px; font-weight:700; width:74px; text-align:right; }
.cart-foot{ border-top:1px solid var(--line); padding:16px 20px 20px; }
.sum-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--sub); margin-bottom:6px; }
.sum-row.total{ font-size:16px; font-weight:700; color:var(--ink); margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
.btn-primary{
  width:100%; height:44px; margin-top:14px;
  background:var(--card); border:1px solid var(--violet); color:var(--violet);
  border-radius:8px; font-weight:700; font-size:14px;
}
.btn-primary:hover{ background:var(--violet-tint); }
.note{ font-size:11.5px; color:var(--mute); line-height:1.6; margin-top:10px; text-align:center; }

@media (max-width:600px){
  .search{ display:none; }
  #search-toggle{ display:inline-flex; }
  .search.mobile-show{
    display:block; order:10; flex:1 1 100%; max-width:none;
    margin-top:2px;
  }
  .grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .cart{ width:100%; right:-100%; }
}

/* ---------- 로그인 게이트 ---------- */
#login-gate{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-box{
  width:100%; max-width:360px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:32px 28px; text-align:center;
}
.login-box .logo{ height:26px; margin-bottom:20px; }
.login-box h2{ font-size:17px; margin:0 0 6px; color:var(--ink); }
.login-box p{ font-size:12.5px; color:var(--mute); margin:0 0 20px; }
.login-box input{
  width:100%; height:42px; margin-bottom:10px; padding:0 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-size:14px;
}
.login-box input:focus{ outline:none; border-color:var(--violet); }
.login-error{ color:#E45C5C; font-size:12px; margin:0 0 10px; text-align:left; }
.login-box button{
  width:100%; height:44px; margin-top:4px;
  background:var(--violet); color:#fff; border:none; border-radius:8px;
  font-weight:700; font-size:14px;
}
.login-box button:hover{ background:var(--violet-deep); }