/* ============================================================
   라방셀러마켓 — Theme (design system)
   Loaded after legacy template CSS to progressively override it.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* brand */
  --brand-900: #3730A3;
  --brand-700: #4F46E5;
  --brand-500: #6366F1;
  --brand-100: #EEF2FF;

  /* live accent (reserved for live-broadcast UI only) */
  --live: #FF3B5C;
  --live-dark: #E11D48;

  /* neutrals */
  --ink-900: #0F172A;
  --ink-700: #334155;
  --ink-500: #64748B;
  --ink-300: #CBD5E1;
  --ink-100: #F1F5F9;
  --surface: #FFFFFF;
  --bg: #FFFFFF;

  /* feedback */
  --success: #16A34A;
  --warn: #F59E0B;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  color: var(--ink-900);
  background: var(--bg);
}

a { transition: color .15s ease; }

/* ---------- buttons ---------- */
.btn-brand, .btn-brand:visited {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-brand:hover { background: var(--brand-900); border-color: var(--brand-900); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-live, .btn-live:visited {
  background: var(--live);
  border-color: var(--live);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.btn-live:hover { background: var(--live-dark); border-color: var(--live-dark); color: #fff; }

.btn-outline-brand {
  border: 1.5px solid var(--brand-700);
  color: var(--brand-700);
  border-radius: var(--radius-sm);
  font-weight: 600;
  background: transparent;
}
.btn-outline-brand:hover { background: var(--brand-100); color: var(--brand-900); }

/* ---------- section heading ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.section-head h2, .section-head h3 { font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); margin: 0; }
.section-head .section-sub { color: var(--ink-500); font-size: .9rem; }
.section-head .section-link { font-size: .85rem; font-weight: 600; color: var(--brand-700); text-decoration: none; }
.section-head .section-link:hover { color: var(--brand-900); }

/* ---------- live badge / pulse ---------- */
.badge-live {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--live); color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; letter-spacing: .01em;
}
.badge-live .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.3); } }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--ink-300); color: var(--ink-700);
  padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: all .12s ease;
}
.chip:hover, .chip.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* ---------- product card (overrides legacy .pcard) ---------- */
.pcard-col { margin-bottom: 4px; }
.pcard {
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pcard-img { aspect-ratio: 1/1; overflow: hidden; background: var(--ink-100); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.pcard:hover .pcard-img img { transform: scale(1.05); }
.pcard-info { padding: 14px 14px 16px; }
.pcard-name {
  font-size: .9rem; font-weight: 500; color: var(--ink-700);
  margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.6em;
}
.pcard-price { font-size: 1.05rem; font-weight: 800; color: var(--ink-900); margin: 0; }

/* ---------- seller card (product-details) ---------- */
.seller-card {
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface);
  margin: 16px 0;
}
.seller-card .seller-name { font-weight: 700; color: var(--ink-900); }
.seller-card .seller-meta { font-size: .82rem; color: var(--ink-500); }

/* ---------- stat / KPI cards (dashboards) ---------- */
.kpi-card {
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: 20px 22px; border: 1px solid var(--ink-100);
}
.kpi-card .kpi-label { font-size: .82rem; color: var(--ink-500); font-weight: 600; margin-bottom: 6px; }
.kpi-card .kpi-value { font-size: 1.7rem; font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; }
.kpi-card .kpi-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--brand-100); color: var(--brand-700);
}

/* ---------- category tile ---------- */
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink-700); font-weight: 600; font-size: 1.2rem;
}
.cat-tile .cat-tile-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  transition: all .15s ease;
}
.cat-tile:hover .cat-tile-icon { background: var(--brand-700); color: #fff; transform: translateY(-3px); }
.cat-tile:hover { color: var(--ink-900); }

/* ---------- generic bootstrap .card polish (sellers.php team cards etc) ---------- */
.card { border: 1px solid var(--ink-100) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) !important; }

/* ---------- footer ---------- */
.footer.dark-background { background: var(--ink-900) !important; }

/* ---------- admin-agnostic table polish ---------- */
.table > :not(caption) > * > * { vertical-align: middle; }