/* ============================================================
   Screen · Store / Plans (store/index.blade.php)
   The conversion hub. Chip filter + Plan Card grid.
   Anchor pattern: id="product-{id}" for deep links from locked cards.
   ============================================================ */

.store {
  background: var(--gio-color-bg);
  min-height: 100vh;
  padding-bottom: var(--gio-space-9);
}

.store__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gio-space-7);
}
@media (max-width: 768px) { .store__container { padding: 0 var(--gio-space-4); } }

/* ---------- Header band ---------- */
/* store-hero rules removed — see components/page-hero.css for the unified header. */

/* ---------- Filter chips ---------- */
.store-filter {
  position: sticky;
  top: 84px;
  z-index: 10;
  padding: var(--gio-space-4) 0;
  background: color-mix(in oklab, var(--gio-color-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gio-color-divider);
}
@media (max-width: 920px) { .store-filter { top: 64px; } }

.store-filter__inner {
  display: flex;
  align-items: center;
  gap: var(--gio-space-2);
  flex-wrap: wrap;
}
.store-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--gio-color-surface);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-pill);
  font-size: var(--gio-text-sm);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text-muted);
  cursor: pointer;
  transition: all var(--gio-dur-fast) var(--gio-ease-out);
}
.store-filter__chip:hover { color: var(--gio-color-text-strong); border-color: var(--gio-color-border-strong); }
.store-filter__chip--active {
  background: var(--gio-color-text-strong);
  border-color: var(--gio-color-text-strong);
  color: var(--gio-color-bg);
}
.gio-site .store-filter__chip--active,
.gio-site .store-filter__chip--active:hover {
  background: var(--gio-color-text-strong);
  border-color: var(--gio-color-text-strong);
  color: var(--gio-color-bg);
}
.store-filter__count {
  font-size: 11px;
  font-weight: var(--gio-w-semibold);
  padding: 2px 6px;
  background: var(--gio-color-bg-subtle);
  color: var(--gio-color-text-muted);
  border-radius: var(--gio-radius-pill);
}
.store-filter__chip--active .store-filter__count {
  background: rgba(255,255,255,0.2);
  color: var(--gio-color-bg);
}
.gio-site .store-filter__chip--active .store-filter__count {
  background: color-mix(in oklab, var(--gio-color-bg) 20%, transparent);
  color: var(--gio-color-bg);
}
.store-filter__sort {
  margin-left: auto;
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
  display: flex; align-items: center; gap: 6px;
}
@media (max-width: 768px) { .store-filter__sort { display: none; } }

/* ---------- Featured row ---------- */
.store-featured {
  padding: var(--gio-space-7) 0 var(--gio-space-5);
}
.store-featured__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--gio-space-4);
}
.store-featured__title {
  font-size: var(--gio-text-base);
  font-weight: var(--gio-w-bold);
  letter-spacing: var(--gio-tracking-wide);
  text-transform: uppercase;
  color: var(--gio-color-text-muted);
  margin: 0;
}

/* ---------- Type sections (grouped catalog) ---------- */
.store-section {
  padding: var(--gio-space-9) 0;
}
.store-section + .store-section {
  border-top: 1px solid var(--gio-color-divider);
}
.store-section--featured {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gio-color-accent) 8%, transparent), transparent 58%);
}

.store-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gio-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--gio-space-6);
}
.store-section__heading {
  position: relative;
  padding-left: 16px;
}
.store-section__heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 6px;
  width: 4px;
  border-radius: var(--gio-radius-pill);
  background: linear-gradient(
    180deg,
    var(--gio-color-accent),
    color-mix(in srgb, var(--gio-color-accent) 35%, transparent)
  );
}
.store-section__title {
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-2xl);
  line-height: 1.1;
  font-weight: var(--gio-w-extrabold);
  letter-spacing: -0.02em;
  color: var(--gio-color-text-strong);
  margin: 0;
}
.store-section__sub {
  margin: 6px 0 0;
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
}
.store-section__count {
  flex: none;
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text-muted);
  padding: 5px 12px;
  background: var(--gio-color-surface);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-pill);
  white-space: nowrap;
}

/* hero pitch 를 하단으로 정렬 (#1) */
.store .page-hero__pitch {
  align-self: end;
}

/* ---------- Plan grid ---------- */
.store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gio-space-5);
}
@media (max-width: 1024px) { .store-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .store-grid { grid-template-columns: 1fr; } }

/* Compact plan card variant for the grid */
.plan-card--compact {
  padding: var(--gio-space-6);
}
/* .plan-card__inventory / .plan-card--compact .plan-card__features 는 components/plan-card.css 로 이관
   (store·main·dashboard 모든 plan-card 화면에서 동일한 박스/구분선이 적용되도록). */

/* .plan-contents* (포함 콘텐츠 미리보기/펼침) 는 components/plan-card.css 로 이관 —
   plan-card 컴포넌트를 쓰는 모든 화면(store·main·dashboard)에서 접힘 동작이 일관되도록. */

/* ---------- Compare strip (footer) ---------- */
.store-compare {
  margin-top: var(--gio-space-9);
  padding: var(--gio-space-7);
  background: var(--gio-color-surface);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-2xl);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gio-space-7);
  align-items: center;
}
@media (max-width: 920px) { .store-compare { grid-template-columns: 1fr; } }

.store-compare__title {
  font-family: var(--gio-font-display);
  font-size: 28px;
  font-weight: var(--gio-w-bold);
  letter-spacing: -0.015em;
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-3);
}
.store-compare__faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gio-space-5);
}
@media (max-width: 768px) { .store-compare__faq { grid-template-columns: 1fr; } }
.store-compare__q {
  font-size: var(--gio-text-sm);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text-strong);
  margin: 0 0 4px;
}
.store-compare__a {
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
  line-height: 1.55;
  margin: 0;
}

.plan-card--highlighted {
  animation: plan-card-pulse 2s ease;
}

@keyframes plan-card-pulse {
  0% { box-shadow: 0 0 0 0 var(--gio-color-action); }
  50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--gio-color-action) 30%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}