/* [Project: TrueIndexLab] css/til.css v1.0.0 — Design System */

/* ── 1. CSS 변수 (Design Tokens) ────────────────────── */
:root {
  --bg-primary:   #050C1C;
  --bg-surface:   #0A1528;
  --bg-elevated:  #0F1A35;
  --bg-overlay:   rgba(10, 21, 40, 0.65);

  --brand-blue:   #4B6BFB;
  --brand-cyan:   #00E5CC;
  --brand-purple: #7B5EA7;
  --brand-grad:   linear-gradient(135deg, #4B6BFB, #00E5CC);

  --yes-primary:  #16A34A;
  --yes-sec:      #22C55E;
  --yes-grad:     linear-gradient(135deg, #16A34A, #22C55E);
  --yes-glow:     rgba(22, 163, 74, 0.14);
  --yes-border:   rgba(22, 163, 74, 0.28);
  --yes-hborder:  rgba(22, 163, 74, 0.52);
  --yes-text:     #4ADE80;
  --yes-bg:       rgba(22, 163, 74, 0.10);

  --no-primary:   #DC2626;
  --no-sec:       #EF4444;
  --no-grad:      linear-gradient(135deg, #DC2626, #EF4444);
  --no-glow:      rgba(220, 38, 38, 0.14);
  --no-border:    rgba(220, 38, 38, 0.28);
  --no-hborder:   rgba(220, 38, 38, 0.52);
  --no-text:      #F87171;
  --no-bg:        rgba(220, 38, 38, 0.10);

  --feat-grad:    linear-gradient(135deg, #D97706, #F59E0B);
  --feat-glow:    rgba(217, 119, 6, 0.14);
  --feat-border:  rgba(217, 119, 6, 0.28);
  --feat-text:    #FCD34D;

  --cat-politics: #8B5CF6; --cat-politics-bg: rgba(139,92,246,.10); --cat-politics-bd: rgba(139,92,246,.25);
  --cat-sports:   #3B82F6; --cat-sports-bg:   rgba(59,130,246,.10);  --cat-sports-bd:   rgba(59,130,246,.25);
  --cat-economy:  #10B981; --cat-economy-bg:  rgba(16,185,129,.10);  --cat-economy-bd:  rgba(16,185,129,.25);
  --cat-tech:     #06B6D4; --cat-tech-bg:     rgba(6,182,212,.10);   --cat-tech-bd:     rgba(6,182,212,.25);
  --cat-general:  #4B6BFB; --cat-general-bg:  rgba(75,107,251,.10);  --cat-general-bd:  rgba(75,107,251,.25);

  --text-primary:   #E2E8F0;
  --text-sec:       rgba(226,232,240,.65);
  --text-muted:     #94A3B8;
  --text-disabled:  #475569;
  --text-label:     #64748B;

  --glass-border:   rgba(75,107,251,.15);
  --glass-hborder:  rgba(75,107,251,.38);
  --divider:        linear-gradient(90deg,transparent,rgba(75,107,251,.30),rgba(0,229,204,.30),transparent);
}

/* ── 2. 기본 리셋 ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Pretendard', 'DM Sans', sans-serif;
  line-height: 1.625;
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(75,107,251,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,107,251,.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 3. 스크롤바 ────────────────────────────────────── */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(75,107,251,.40); border-radius: 999px; }

/* ── 4. 컨테이너 ────────────────────────────────────── */
.til-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) { .til-container { padding: 0 32px; } }

/* ── 5. 섹션 ────────────────────────────────────────── */
.til-section { padding: 96px 0; }

.til-divider {
  height: 1px;
  background: var(--divider);
  border: none;
}

/* ── 6. 배경 Orb ────────────────────────────────────── */
.til-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: tilOrbPulse 6s ease-in-out infinite;
}
@keyframes tilOrbPulse {
  0%, 100% { opacity: 0.14; }
  50%       { opacity: 0.24; }
}

/* ── 7. Glass Card ──────────────────────────────────── */
.til-card {
  background: rgba(10,21,40,.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  transition: border-color .30s ease, box-shadow .30s ease;
}
.til-card:hover {
  border-color: var(--glass-hborder);
  box-shadow: 0 0 28px rgba(75,107,251,.10);
}

/* ── 8. 마켓 카드 ───────────────────────────────────── */
.til-market-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.til-market-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 10% 10%, rgba(75,107,251,.06) 0%, transparent 65%);
  pointer-events: none;
}
.til-market-card .mt-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 9. 확률 바 ─────────────────────────────────────── */
.til-outcome-bar {
  display: flex;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  gap: 2px;
}
.til-yes-track, .til-no-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-family: 'DM Mono', monospace;
  font-size: .8rem;
  font-weight: 500;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.til-yes-track {
  background: var(--yes-bg);
  border: 1px solid var(--yes-border);
  color: var(--yes-text);
  border-radius: 8px 0 0 8px;
}
.til-no-track {
  background: var(--no-bg);
  border: 1px solid var(--no-border);
  color: var(--no-text);
  border-radius: 0 8px 8px 0;
}

/* ── 10. Pill Tag (카테고리) ────────────────────────── */
.til-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: .70rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.til-tag-politics { background: var(--cat-politics-bg); border: 1px solid var(--cat-politics-bd); color: var(--cat-politics); }
.til-tag-sports   { background: var(--cat-sports-bg);   border: 1px solid var(--cat-sports-bd);   color: var(--cat-sports); }
.til-tag-economy  { background: var(--cat-economy-bg);  border: 1px solid var(--cat-economy-bd);  color: var(--cat-economy); }
.til-tag-tech     { background: var(--cat-tech-bg);     border: 1px solid var(--cat-tech-bd);     color: var(--cat-tech); }
.til-tag-general  { background: var(--cat-general-bg);  border: 1px solid var(--cat-general-bd);  color: var(--cat-general); }
.til-tag-featured { background: var(--feat-glow);       border: 1px solid var(--feat-border);     color: var(--feat-text); }

/* ── 11. 버튼 ───────────────────────────────────────── */
.til-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 8px;
  font-family: 'Space Grotesk', 'Pretendard', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  border: none;
  transition: all .25s ease;
  text-decoration: none;
}
.til-btn-primary {
  background: var(--brand-grad);
  color: #fff;
}
.til-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(75,107,251,.30);
}
.til-btn-yes {
  background: var(--yes-grad);
  color: #fff;
}
.til-btn-yes:hover { filter: brightness(1.08); transform: translateY(-1px); }
.til-btn-no {
  background: var(--no-grad);
  color: #fff;
}
.til-btn-no:hover { filter: brightness(1.08); transform: translateY(-1px); }
.til-btn-ghost {
  background: rgba(75,107,251,.08);
  border: 1px solid rgba(75,107,251,.28);
  color: #A5B4FC;
}
.til-btn-ghost:hover {
  background: rgba(75,107,251,.16);
  border-color: rgba(75,107,251,.50);
  color: #fff;
}
.til-btn-sm { padding: 7px 16px; font-size: .85rem; }
.til-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

/* ── 12. 베팅 옵션 카드 ─────────────────────────────── */
.til-option-card {
  padding: 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all .25s ease;
  border: 2px solid var(--glass-border);
  background: rgba(10,21,40,.40);
}
.til-option-card:hover { border-color: var(--glass-hborder); }
.til-option-card.selected-yes {
  background: var(--yes-bg);
  border-color: var(--yes-hborder);
  box-shadow: 0 0 20px var(--yes-glow);
}
.til-option-card.selected-no {
  background: var(--no-bg);
  border-color: var(--no-hborder);
  box-shadow: 0 0 20px var(--no-glow);
}
.til-option-pct {
  font-family: 'DM Mono', monospace;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}
.til-option-yes .til-option-pct { color: var(--yes-text); }
.til-option-no  .til-option-pct { color: var(--no-text); }

/* ── 13. 숫자/수치 ──────────────────────────────────── */
.til-mono {
  font-family: 'DM Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.til-stat-value {
  font-family: 'DM Mono', monospace;
  font-size: 2rem;
  font-weight: 600;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 14. 마켓 그리드 ────────────────────────────────── */
.til-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px)  { .til-grid { grid-template-columns: repeat(2,1fr); gap: 20px; } }
@media (min-width: 1024px) { .til-grid { grid-template-columns: repeat(3,1fr); gap: 24px; } }

/* ── 15. 포인트 입력 ────────────────────────────────── */
.til-point-input {
  width: 100%;
  background: rgba(10,21,40,.80);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: 'DM Mono', monospace;
  font-size: 1.1rem;
  outline: none;
  transition: border-color .25s;
}
.til-point-input:focus { border-color: var(--brand-blue); }
.til-point-input::placeholder { color: var(--text-disabled); }

/* ── 16. 네비게이션 ─────────────────────────────────── */
#til-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px 0;
  transition: background .35s, backdrop-filter .35s;
}
#til-nav.scrolled {
  background: rgba(5,12,28,.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}
.til-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.til-logo-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--brand-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 800;
  color: #fff;
}
.til-nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: color .2s;
}
.til-nav-link:hover, .til-nav-link.active { color: var(--text-primary); }

/* ── 17. 포인트 뱃지 (네비) ─────────────────────────── */
.til-point-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(75,107,251,.12);
  border: 1px solid rgba(75,107,251,.25);
  font-family: 'DM Mono', monospace;
  font-size: .82rem;
  font-weight: 500;
  color: #A5B4FC;
}

/* ── 18. 상태 뱃지 ──────────────────────────────────── */
.til-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.til-status-active   { background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.25);  color: #4ADE80; }
.til-status-closed   { background: rgba(148,163,184,.10); border: 1px solid rgba(148,163,184,.25); color: #94A3B8; }
.til-status-resolved { background: rgba(75,107,251,.12);  border: 1px solid rgba(75,107,251,.25);  color: #A5B4FC; }
.til-status-won      { background: rgba(34,197,94,.12);   border: 1px solid rgba(34,197,94,.25);   color: #4ADE80; }
.til-status-lost     { background: rgba(220,38,38,.10);   border: 1px solid rgba(220,38,38,.25);   color: #F87171; }
.til-status-pending  { background: rgba(245,158,11,.10);  border: 1px solid rgba(245,158,11,.25);  color: #FCD34D; }

/* ── 19. 페이지네이션 ───────────────────────────────── */
.til-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 40px;
}
.til-page-btn {
  min-width: 36px; height: 36px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 500;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
}
.til-page-btn:hover, .til-page-btn.active {
  background: rgba(75,107,251,.15);
  border-color: var(--brand-blue);
  color: var(--text-primary);
}

/* ── 20. 알림/토스트 ────────────────────────────────── */
#til-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.til-toast-msg {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 500;
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  background: rgba(10,21,40,.90);
  color: var(--text-primary);
  animation: tilToastIn .3s ease;
  pointer-events: auto;
}
.til-toast-msg.success { border-color: rgba(34,197,94,.35); color: #4ADE80; }
.til-toast-msg.error   { border-color: rgba(220,38,38,.35);  color: #F87171; }
@keyframes tilToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── 21. 반응형 유틸 ────────────────────────────────── */
@media (max-width: 768px) {
  .til-section { padding: 64px 0; }
  .til-hero-section { padding-top: 100px !important; }
  .til-hide-mobile { display: none !important; }
  /* Orb 모바일 성능 최적화: blur 비용 절감 */
  .til-orb { filter: blur(60px); opacity: .08; }
}
@media (prefers-reduced-motion: reduce) {
  .til-orb { animation: none !important; }
}

/* ── AdSense 플레이스홀더 ──────────────────────────── */
.til-ad-slot {
  border: 1.5px dashed rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.4);
  width: 100%;
}
.til-ad-slot--horizontal { min-height: 90px; }
.til-ad-slot--infeed     { min-height: 120px; }
.til-ad-slot--square     { min-height: 250px; }