/* ============================================================
   tikke.kr — Colors & Typography System
   Design System v1.0 — TikTok-inspired Dark Theme
   ============================================================ */

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

/* ── 서울알림 Brand Font ── */
@font-face {
  font-family: 'SeoulAlrim';
  src: url('fonts/SeoulAlrim-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SeoulAlrim';
  src: url('fonts/SeoulAlrim-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SeoulAlrim';
  src: url('fonts/SeoulAlrim-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SeoulAlrim';
  src: url('fonts/SeoulAlrim-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ══════════════════════════════════════════
     BRAND COLORS — TikTok Visual Language
     ══════════════════════════════════════════ */

  /* Primary: TikTok Pink-Red */
  --color-brand-50:  #FFF0F3;
  --color-brand-100: #FFD6DE;
  --color-brand-200: #FFB3C1;
  --color-brand-300: #FF7096;
  --color-brand-400: #FE4D72;
  --color-brand-500: #FE2C55;   /* ★ TikTok Primary */
  --color-brand-600: #E0183D;
  --color-brand-700: #B80F2F;
  --color-brand-800: #8C0A22;
  --color-brand-900: #5E0616;

  /* Accent: TikTok Teal */
  --color-accent-100: #D0FFFE;
  --color-accent-200: #9EFFFE;
  --color-accent-300: #5CF9F8;
  --color-accent-400: #25F4EE;   /* ★ TikTok Teal */
  --color-accent-500: #00D8D3;
  --color-accent-600: #00B0AB;
  --color-accent-700: #008280;

  /* ══════════════════════════════════════════
     NEUTRAL SCALE — Dark Theme Base
     ══════════════════════════════════════════ */

  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F5F5F5;
  --color-neutral-100: #E8E8E8;
  --color-neutral-200: #C8C8C8;
  --color-neutral-300: #A0A0A0;
  --color-neutral-400: #737373;
  --color-neutral-500: #606060;
  --color-neutral-600: #404040;
  --color-neutral-700: #2A2A2A;
  --color-neutral-800: #1F1F1F;
  --color-neutral-850: #161616;
  --color-neutral-900: #121212;
  --color-neutral-950: #000000;

  /* ══════════════════════════════════════════
     STATUS COLORS
     ══════════════════════════════════════════ */

  /* Hot / Danger */
  --color-danger-400: #FB7185;
  --color-danger-500: #F43F5E;
  --color-danger-600: #E11D48;

  /* Success / Promotion */
  --color-success-400: #4ADE80;
  --color-success-500: #22C55E;
  --color-success-600: #16A34A;

  /* Warning / Demotion */
  --color-warning-400: #FB923C;
  --color-warning-500: #F97316;
  --color-warning-600: #EA580C;

  /* Gold / Premium */
  --color-gold-300: #FCD34D;
  --color-gold-400: #FBBF24;
  --color-gold-500: #F59E0B;
  --color-gold-600: #D97706;

  /* ══════════════════════════════════════════
     SEMANTIC ALIASES — Dark Theme
     ══════════════════════════════════════════ */

  --color-bg-page:       var(--color-neutral-950);   /* #000 */
  --color-bg-surface:    var(--color-neutral-900);   /* #121212 */
  --color-bg-elevated:   var(--color-neutral-800);   /* #1F1F1F */
  --color-bg-overlay:    rgba(0, 0, 0, 0.75);
  --color-bg-subtle:     var(--color-neutral-850);   /* #161616 */

  --color-border:        var(--color-neutral-700);   /* #2A2A2A */
  --color-border-strong: var(--color-neutral-600);   /* #404040 */
  --color-border-brand:  var(--color-brand-500);

  --color-text-primary:   var(--color-neutral-0);    /* #FFF */
  --color-text-secondary: var(--color-neutral-300);  /* #A0A0A0 */
  --color-text-muted:     var(--color-neutral-500);  /* #606060 */
  --color-text-inverse:   var(--color-neutral-950);  /* #000 */
  --color-text-brand:     var(--color-brand-500);
  --color-text-accent:    var(--color-accent-400);

  --color-link:           var(--color-brand-400);
  --color-link-hover:     var(--color-brand-300);

  --color-primary:        var(--color-brand-500);
  --color-primary-hover:  var(--color-brand-600);

  /* Focus ring */
  --color-focus-ring:    rgba(254, 44, 85, 0.35);

  /* ══════════════════════════════════════════
     TIER SYSTEM — League Badge Colors
     ══════════════════════════════════════════ */

  /* A-Tier: Gold */
  --tier-a-bg:     rgba(245, 158, 11, 0.12);
  --tier-a-text:   #FBBF24;
  --tier-a-border: rgba(245, 158, 11, 0.4);
  --tier-a-badge:  linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

  /* B-Tier: Indigo/Purple */
  --tier-b-bg:     rgba(129, 140, 248, 0.12);
  --tier-b-text:   #A5B4FC;
  --tier-b-border: rgba(129, 140, 248, 0.4);
  --tier-b-badge:  linear-gradient(135deg, #818CF8 0%, #4F46E5 100%);

  /* C-Tier: Bronze */
  --tier-c-bg:     rgba(180, 115, 70, 0.12);
  --tier-c-text:   #CD7C54;
  --tier-c-border: rgba(180, 115, 70, 0.4);
  --tier-c-badge:  linear-gradient(135deg, #CD7C54 0%, #8B4513 100%);

  /* D-Tier: Gray */
  --tier-d-bg:     rgba(107, 114, 128, 0.12);
  --tier-d-text:   #9CA3AF;
  --tier-d-border: rgba(107, 114, 128, 0.4);
  --tier-d-badge:  linear-gradient(135deg, #6B7280 0%, #4B5563 100%);

  /* ══════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════ */

  /* Font families */
  --font-brand: 'SeoulAlrim', 'Pretendard', 'Noto Sans KR', sans-serif;  /* 헤드라인, 로고, CTA */
  --font-sans:  'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
                'Segoe UI', sans-serif;                                   /* 본문, UI */
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;    /* 수치, 코드 */

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3rem;       /* 48px */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* ══════════════════════════════════════════
     SPACING (4px base unit)
     ══════════════════════════════════════════ */

  --space-0:   0;
  --space-0-5: 0.125rem;  /*  2px */
  --space-1:   0.25rem;   /*  4px */
  --space-1-5: 0.375rem;  /*  6px */
  --space-2:   0.5rem;    /*  8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ══════════════════════════════════════════
     BORDER RADIUS
     ══════════════════════════════════════════ */

  --radius-none: 0;
  --radius-sm:   0.25rem;   /*  4px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ══════════════════════════════════════════
     SHADOWS — Dark Theme
     ══════════════════════════════════════════ */

  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow-sm:  0 2px 4px 0 rgba(0,0,0,0.5);
  --shadow-md:  0 4px 12px 0 rgba(0,0,0,0.6);
  --shadow-lg:  0 8px 24px 0 rgba(0,0,0,0.7);
  --shadow-xl:  0 16px 40px 0 rgba(0,0,0,0.8);
  --shadow-brand: 0 0 20px rgba(254,44,85,0.25);

  /* ══════════════════════════════════════════
     TRANSITIONS
     ══════════════════════════════════════════ */

  --duration-fast:   100ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* ══════════════════════════════════════════
     LAYOUT
     ══════════════════════════════════════════ */

  --header-height:     60px;
  --content-max-width: 1280px;
  --page-padding-x:    var(--space-4);
  --page-padding-x-md: var(--space-6);
  --page-padding-x-lg: var(--space-8);

  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ══════════════════════════════════════════
   BASE STYLES
   ══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, video { display: block; max-width: 100%; }
a { color: var(--color-link); transition: color var(--duration-fast); }
a:hover { color: var(--color-link-hover); }

/* ══════════════════════════════════════════
   HEADING SCALE
   ══════════════════════════════════════════ */

h1, .h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
h2, .h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}
h3, .h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}
h4, .h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
h5, .h5 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
h6, .h6 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* ══════════════════════════════════════════
   TEXT ROLE UTILITIES
   ══════════════════════════════════════════ */

.text-lead    { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.text-body    { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.text-caption { font-size: var(--text-sm); color: var(--color-text-secondary); }
.text-meta    { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); }
.text-mono    { font-family: var(--font-mono); font-size: 0.9em; }
.text-brand   { color: var(--color-brand-500); }
.text-accent  { color: var(--color-accent-400); }

.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3  { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ══════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-x);
}
@media (min-width: 768px)  { .container { padding-inline: var(--page-padding-x-md); } }
@media (min-width: 1024px) { .container { padding-inline: var(--page-padding-x-lg); } }

/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Divider */
.divider { height: 1px; background: var(--color-border); margin-block: var(--space-6); }

/* Section header */
.section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.section__title {
  font-size: var(--text-xl); font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.section__more {
  font-size: var(--text-sm); color: var(--color-brand-400);
  text-decoration: none; font-weight: var(--weight-medium);
}