/* ==========================================================================
   스토어 2단 레인 — 위: 자사몰(카페24) / 아래: 네이버 스마트스토어
   v1.0 (2026-09-21) · scripts/store-lanes.js 와 한 쌍
   ========================================================================== */

.store-lanes{ display:flex; flex-direction:column; gap:26px; margin:26px 0 30px; }

.store-lane{
  --lane:#1D5FD0;              /* 레인 강조색 (자사몰 = 브랜드 블루) */
  --lane-soft:#F1F6FE;
  border:1px solid #E3E6EB; border-radius:12px; background:#fff;
  overflow:hidden;
}
.store-lane[data-store="naver"]{ --lane:#03C75A; --lane-soft:#EFFBF3; }

/* ── 레인 머리 ────────────────────────────────────────── */
.store-lane-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid #EEF1F5; background:var(--lane-soft);
}
.store-lane-badge{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 11px; border-radius:99px;
  background:var(--lane); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.02em;
}
.store-lane-title{ flex:1 1 220px; min-width:0; }
.store-lane-title strong{ display:block; font-size:16px; font-weight:800; color:#161d29; letter-spacing:-.01em; }
.store-lane-title span{ display:block; margin-top:3px; font-size:12.5px; color:#6B7686; line-height:1.5; }
.store-lane-go{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  height:38px; padding:0 17px; border-radius:6px;
  background:var(--lane); color:#fff !important; text-decoration:none;
  font-size:13px; font-weight:700; white-space:nowrap;
  transition:filter .15s ease;
}
.store-lane-go:hover{ filter:brightness(.92); color:#fff !important; }
.store-lane-go svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ── 흐르는 트랙 ──────────────────────────────────────── */
.store-marquee{
  position:relative; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  padding:16px 0;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
          mask-image:linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}
.store-marquee::-webkit-scrollbar{ display:none; }
.store-track{ display:flex; gap:14px; padding:0 20px; width:max-content; }

/* ── 상품 카드 ────────────────────────────────────────── */
.store-item{
  flex:0 0 auto; width:168px;
  display:block; text-decoration:none; color:inherit;
  border:1px solid #EAEDF2; border-radius:10px; overflow:hidden; background:#fff;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.store-item:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px -10px rgba(22,29,41,.28);
  border-color:var(--lane);
}
.store-item-thumb{
  position:relative; aspect-ratio:1/1; background:#F7F8FA;
  display:grid; place-items:center; overflow:hidden;
}
.store-item-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.store-item-thumb .ph{ font-size:26px; opacity:.35; }
.store-item-soldout{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(22,29,41,.55); color:#fff; font-size:13px; font-weight:800; letter-spacing:.04em;
}
.store-item-body{ padding:10px 11px 12px; }
.store-item-name{
  margin:0; font-size:12.5px; font-weight:600; line-height:1.45; color:#222a36;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.9em;
}
.store-item-price{ margin-top:7px; font-size:13.5px; font-weight:800; color:var(--lane); }
.store-item-price small{ font-size:11px; font-weight:600; color:#98A2B1; margin-left:2px; }

/* ── 상태 ─────────────────────────────────────────────── */
.store-lane-empty{
  padding:26px 20px; text-align:center; font-size:13px; color:#8B95A5;
}

@media (max-width:640px){
  .store-lanes{ gap:18px; margin:20px 0 24px; }
  .store-lane-head{ padding:13px 14px; gap:10px; }
  .store-lane-title{ flex:1 1 100%; order:2; }
  .store-lane-go{ order:3; margin-left:auto; height:34px; padding:0 14px; font-size:12.5px; }
  .store-track{ gap:10px; padding:0 14px; }
  .store-item{ width:140px; }
  .store-marquee{ padding:12px 0; }
}

@media (prefers-reduced-motion:reduce){
  .store-item:hover{ transform:none; }
}