/**
 * el_main · Design Tokens (v1)
 * ─────────────────────────────────────────────────────────────────
 *  하나의 진실 소스. 색·폰트·간격·반경·그림자 모두 여기서 정의.
 *  페이지에서 hex 직접 쓰지 말고 var(--el-*) 또는 .el-* 유틸 클래스 사용.
 *
 *  사용 예:
 *    <div class="el-card">
 *      <span class="el-badge el-badge-hot">HOT</span>
 *      <h3 class="el-text-h3 el-ink">제목</h3>
 *      <span class="el-price">39,000원</span>
 *    </div>
 *
 *  또는 Tailwind arbitrary:
 *    <div class="bg-[var(--el-bg-soft)] text-[var(--el-ink)] rounded-[var(--el-radius)]">
 * ─────────────────────────────────────────────────────────────────
 */

:root {
  /* ── Brand ──────────────────────────────────────────────────── */
  --el-brand:        #FF6B35;
  --el-brand-hover:  #E85A2A;
  --el-brand-soft:   #FFEEE6;
  --el-brand-tint:   #FFF5F0;

  /* ── Ink (text) ─────────────────────────────────────────────── */
  --el-ink:          #111111;
  --el-ink-2:        #333333;
  --el-ink-soft:     #555555;
  --el-ink-dim:      #888888;
  --el-ink-faint:    #BBBBBB;
  --el-ink-ghost:    #CCCCCC;

  /* ── Surface ────────────────────────────────────────────────── */
  --el-bg:           #FFFFFF;
  --el-bg-soft:      #FAFAFA;
  --el-bg-muted:     #F8F8F8;
  --el-bg-sunken:    #F4F4F4;

  /* ── Line ───────────────────────────────────────────────────── */
  --el-line:         #EFEFEF;
  --el-line-strong:  #E5E5E5;
  --el-line-dim:     #F4F4F4;

  /* ── Semantic ───────────────────────────────────────────────── */
  --el-success:      #10B981;
  --el-success-soft: #D1FAE5;
  --el-warning:      #F59E0B;
  --el-warning-soft: #FEF3C7;
  --el-danger:       #DC2626;
  --el-danger-soft:  #FEE2E2;
  --el-info:         #3B82F6;
  --el-info-soft:    #DBEAFE;

  /* ── Card meta states (badge·tag 전용) ──────────────────────── */
  --el-state-free:   var(--el-success);
  --el-state-hot:    #DC2626;
  --el-state-new:    #6D28D9;
  --el-state-sale:   #DC2626;
  --el-state-best:   #F59E0B;

  /* ── Radius ─────────────────────────────────────────────────── */
  --el-radius-sm:    4px;
  --el-radius:       8px;
  --el-radius-md:    12px;
  --el-radius-lg:    16px;
  --el-radius-xl:    24px;
  --el-radius-full:  9999px;

  /* ── Shadow ─────────────────────────────────────────────────── */
  --el-shadow-sm:    0 1px 2px rgba(17, 17, 17, 0.04);
  --el-shadow:       0 4px 12px -4px rgba(17, 17, 17, 0.08);
  --el-shadow-lg:    0 12px 28px -12px rgba(17, 17, 17, 0.18);
  --el-shadow-focus: 0 0 0 3px rgba(255, 107, 53, 0.25);

  /* ── Font family ────────────────────────────────────────────── */
  --el-font-body:    'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --el-font-display: 'Outfit', 'Pretendard', system-ui, sans-serif;
  --el-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale ─────────────────────────────────────────────── */
  --el-text-hero:        clamp(40px, 5vw, 64px);
  --el-text-display-xl:  48px;
  --el-text-display:     36px;
  --el-text-h1:          28px;
  --el-text-h2:          22px;
  --el-text-h3:          18px;
  --el-text-h4:          16px;
  --el-text-body:        15px;
  --el-text-small:       13px;
  --el-text-xs:          11px;
  --el-text-2xs:         10px;

  /* ── Spacing (4px 베이스) ───────────────────────────────────── */
  --el-space-3xs:  4px;
  --el-space-2xs:  8px;
  --el-space-xs:   12px;
  --el-space-sm:   16px;
  --el-space:      24px;
  --el-space-lg:   32px;
  --el-space-xl:   48px;
  --el-space-2xl:  64px;
  --el-space-3xl:  96px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --el-container:        1280px;
  --el-container-wide:   1440px;
  --el-header-h:         56px;
  --el-sidebar-w:        240px;

  /* ── Motion ─────────────────────────────────────────────────── */
  --el-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --el-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --el-dur-fast:    150ms;
  --el-dur:         200ms;
  --el-dur-slow:    300ms;
}


/* ═══════════════════════════════════════════════════════════════
 *  Utility classes — 토큰 별칭 (Tailwind와 공존)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Color ─────────────────────────────────────────────────────── */
.el-ink        { color: var(--el-ink); }
.el-ink-2      { color: var(--el-ink-2); }
.el-ink-soft   { color: var(--el-ink-soft); }
.el-ink-dim    { color: var(--el-ink-dim); }
.el-ink-faint  { color: var(--el-ink-faint); }
.el-brand      { color: var(--el-brand); }
.el-success    { color: var(--el-success); }
.el-danger     { color: var(--el-danger); }

.el-bg         { background-color: var(--el-bg); }
.el-bg-soft    { background-color: var(--el-bg-soft); }
.el-bg-muted   { background-color: var(--el-bg-muted); }
.el-bg-sunken  { background-color: var(--el-bg-sunken); }
.el-bg-brand   { background-color: var(--el-brand); color: white; }

.el-border     { border: 1px solid var(--el-line); }
.el-border-strong { border: 1px solid var(--el-line-strong); }
.el-border-t   { border-top: 1px solid var(--el-line); }
.el-border-b   { border-bottom: 1px solid var(--el-line); }

/* ── Type scale ────────────────────────────────────────────────── */
.el-font-display { font-family: var(--el-font-display); letter-spacing: -0.025em; }
.el-font-mono    { font-family: var(--el-font-mono); font-feature-settings: 'tnum'; }
.el-text-hero       { font-size: var(--el-text-hero); line-height: 1.05; letter-spacing: -0.03em; font-weight: 900; }
.el-text-display-xl { font-size: var(--el-text-display-xl); line-height: 1.05; letter-spacing: -0.025em; font-weight: 900; }
.el-text-display    { font-size: var(--el-text-display); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; }
.el-text-h1         { font-size: var(--el-text-h1); line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; }
.el-text-h2         { font-size: var(--el-text-h2); line-height: 1.3; font-weight: 700; }
.el-text-h3         { font-size: var(--el-text-h3); line-height: 1.35; font-weight: 700; }
.el-text-h4         { font-size: var(--el-text-h4); line-height: 1.4; font-weight: 600; }
.el-text-body       { font-size: var(--el-text-body); line-height: 1.55; }
.el-text-small      { font-size: var(--el-text-small); line-height: 1.5; }
.el-text-xs         { font-size: var(--el-text-xs); line-height: 1.45; }
.el-text-2xs        { font-size: var(--el-text-2xs); line-height: 1.4; }
.el-overline {
  font-size: var(--el-text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--el-ink-dim);
  font-family: var(--el-font-mono);
}

/* ── Surface / Card ────────────────────────────────────────────── */
.el-card {
  background-color: var(--el-bg);
  border: 1px solid var(--el-line);
  border-radius: var(--el-radius-md);
  transition: border-color var(--el-dur) var(--el-ease), box-shadow var(--el-dur) var(--el-ease), transform var(--el-dur) var(--el-ease);
}
.el-card:hover { border-color: var(--el-ink); box-shadow: var(--el-shadow); transform: translateY(-2px); }
.el-card-flat { background-color: var(--el-bg); border: 1px solid var(--el-line); border-radius: var(--el-radius-md); }
.el-surface { background-color: var(--el-bg); border-radius: var(--el-radius-md); }

/* ── Badge ─────────────────────────────────────────────────────── */
.el-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--el-radius-sm);
  font-family: var(--el-font-mono);
  font-size: var(--el-text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.el-badge-source {
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--el-ink);
  backdrop-filter: blur(4px);
}
.el-badge-hot   { background-color: var(--el-state-hot); color: white; }
.el-badge-new   { background-color: var(--el-state-new); color: white; }
.el-badge-free  { background-color: var(--el-state-free); color: white; }
.el-badge-best  { background-color: var(--el-state-best); color: white; }
.el-badge-sale  { background-color: var(--el-danger-soft); color: var(--el-danger); }
.el-badge-soft  { background-color: var(--el-bg-muted); color: var(--el-ink-soft); }

/* ── Price tag ─────────────────────────────────────────────────── */
.el-price {
  font-family: var(--el-font-mono);
  font-weight: 800;
  color: var(--el-ink);
  font-variant-numeric: tabular-nums;
}
.el-price-old {
  font-family: var(--el-font-mono);
  text-decoration: line-through;
  color: var(--el-ink-faint);
  font-variant-numeric: tabular-nums;
}
.el-price-free {
  font-family: var(--el-font-mono);
  font-weight: 800;
  color: var(--el-success);
  font-variant-numeric: tabular-nums;
}

/* ── Button ────────────────────────────────────────────────────── */
.el-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  border-radius: var(--el-radius);
  font-size: var(--el-text-small);
  font-weight: 700;
  transition: all var(--el-dur) var(--el-ease);
  border: 1px solid transparent;
  cursor: pointer;
}
.el-btn-primary {
  background: var(--el-ink);
  color: white;
}
.el-btn-primary:hover { background: var(--el-brand); }
.el-btn-brand {
  background: var(--el-brand);
  color: white;
}
.el-btn-brand:hover { background: var(--el-brand-hover); }
.el-btn-outline {
  background: transparent;
  color: var(--el-ink);
  border-color: var(--el-line-strong);
}
.el-btn-outline:hover { border-color: var(--el-ink); }
.el-btn-ghost {
  background: transparent;
  color: var(--el-ink-soft);
}
.el-btn-ghost:hover { background: var(--el-bg-muted); color: var(--el-ink); }
.el-btn-sm { padding: 6px 12px; font-size: var(--el-text-xs); }
.el-btn-lg { padding: 14px 24px; font-size: var(--el-text-body); }

/* ── Tabs (출처 탭 등) ─────────────────────────────────────────── */
.el-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--el-line); overflow-x: auto; }
.el-tab {
  padding: 12px 0;
  font-size: var(--el-text-body);
  font-weight: 600;
  color: var(--el-ink-soft);
  white-space: nowrap;
  position: relative;
  transition: color var(--el-dur) var(--el-ease);
}
.el-tab:hover { color: var(--el-ink); }
.el-tab[aria-current="page"], .el-tab.is-active {
  color: var(--el-ink);
  font-weight: 700;
}
.el-tab[aria-current="page"]::after, .el-tab.is-active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--el-ink);
}
.el-tab-count {
  margin-left: 6px;
  font-family: var(--el-font-mono);
  font-size: var(--el-text-xs);
  color: var(--el-ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ── Filter sidebar ────────────────────────────────────────────── */
.el-filter-section { margin-bottom: var(--el-space); }
.el-filter-title {
  font-size: var(--el-text-2xs);
  font-family: var(--el-font-mono);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--el-ink-dim);
  margin-bottom: 12px;
}
.el-filter-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--el-radius-sm);
  cursor: pointer;
  color: var(--el-ink-soft);
  font-size: var(--el-text-small);
}
.el-filter-row:hover { background: var(--el-bg-muted); color: var(--el-ink); }
.el-filter-row.is-active { background: var(--el-brand-tint); color: var(--el-ink); font-weight: 700; }
.el-filter-count {
  font-family: var(--el-font-mono);
  font-size: var(--el-text-xs);
  color: var(--el-ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ── Card thumbnail aspect ─────────────────────────────────────── */
.el-thumb { aspect-ratio: 16 / 10; border-radius: var(--el-radius); overflow: hidden; position: relative; }
.el-thumb-square { aspect-ratio: 1 / 1; border-radius: var(--el-radius); overflow: hidden; position: relative; }
.el-thumb-book { aspect-ratio: 2 / 3; border-radius: var(--el-radius); overflow: hidden; position: relative; }

/* ── Pagination ────────────────────────────────────────────────── */
.el-page-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--el-radius);
  font-family: var(--el-font-mono);
  font-size: var(--el-text-small);
  color: var(--el-ink-soft);
  transition: all var(--el-dur) var(--el-ease);
}
.el-page-btn:hover { background: var(--el-bg-muted); color: var(--el-ink); }
.el-page-btn.is-active { background: var(--el-ink); color: white; font-weight: 700; }

/* ── Focus ring (accessibility) ────────────────────────────────── */
.el-focus:focus-visible { outline: none; box-shadow: var(--el-shadow-focus); }

/* ── Selection ─────────────────────────────────────────────────── */
::selection { background: var(--el-brand-soft); color: var(--el-brand); }