/* ==========================================================================
   TICKETLINE — Design tokens
   출처: Claude Design "TICKETLINE.dc.html" 아트보드 00 / 라이트 모드 정의
   ========================================================================== */

:root {
  /* surface */
  --bg:        #08090C;
  --ink:       #0E0F13;
  --ink-deep:  #0B0C10;
  --surf:      #16181F;
  --raise:     #1E2230;
  --skeleton:  #1A1D26;

  /* line */
  --line:      #262A35;
  --line-2:    #2C313E;
  --line-3:    #333B4D;
  --line-dim:  #1E212B;
  --line-dark: #1B1E27;

  /* text */
  --text:      #EDEFF5;
  --text-2:    #C6CBD8;
  --muted:     #8A90A2;
  --dim:       #6B7284;
  --dimmer:    #5A6172;
  --faint:     #3A404F;
  --disabled:  #4A5060;

  /* accent & status */
  --accent:    #4C6FFF;
  --accent-2:  #8AA0FF;
  --ok:        #35E0A1;
  --ok-2:      #8ADFC0;
  --warn:      #FFB020;
  --warn-2:    #C6A96A;
  --danger:    #FF4D5E;
  --danger-2:  #FF8A95;
  --danger-3:  #FFB3BA;
  --danger-bg: #1B1216;
  --danger-txt:#B08A90;
  --ok-bg:     #101A17;
  --ok-txt:    #7FB39F;
  --hold:      #A855F7;
  --hold-2:    #C79BF7;

  /* alpha wash */
  --accent-a12: rgba(76,111,255,.12);
  --accent-a14: rgba(76,111,255,.14);
  --accent-a35: rgba(76,111,255,.35);
  --accent-a40: rgba(76,111,255,.40);
  --ok-a14:     rgba(53,224,161,.14);
  --ok-a18:     rgba(53,224,161,.18);
  --ok-a32:     rgba(53,224,161,.32);
  --ok-a40:     rgba(53,224,161,.40);
  --warn-a16:   rgba(255,176,32,.16);
  --warn-a32:   rgba(255,176,32,.32);
  --danger-a16: rgba(255,77,94,.16);
  --danger-a35: rgba(255,77,94,.35);
  --hold-a16:   rgba(168,85,247,.16);
  --hold-a18:   rgba(168,85,247,.18);
  --hold-a32:   rgba(168,85,247,.32);

  /* radius — 8px 그리드, 12 / 14 / 16 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* type */
  --sans: Pretendard, -apple-system, "Helvetica Neue", sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* seat states — 빈 좌석은 비어 보이게, 팔린 좌석은 채워 보이게 */
  --seat-free:      var(--raise);
  --seat-free-line: var(--line-3);
  --seat-sold:      var(--line);

  /* hatch fill — 포스터 / 썸네일 플레이스홀더 */
  --hatch: repeating-linear-gradient(135deg, #14161D 0 8px, #1A1D26 8px 16px);
}

/* 라이트 모드 (기본): 동일 구조 · 표면 반전 · 액센트 유지. <html data-theme="light|dark"> 로 고른다 */
[data-theme="light"] {
  --bg:        #FBFBFC;
  --ink:       #FFFFFF;
  --ink-deep:  #F1F2F6;
  --surf:      #FFFFFF;
  --raise:     #F1F2F6;
  --skeleton:  #F1F2F6;

  --line:      #E3E5EB;
  --line-2:    #D5D8E0;
  --line-3:    #D5D8E0;
  --line-dim:  #E3E5EB;
  --line-dark: #E3E5EB;

  --text:      #14161C;
  --text-2:    #3E4452;
  --muted:     #5A6172;
  --dim:       #6B7284;
  --dimmer:    #8A90A2;

  --accent:    #3A5BE0;
  --accent-2:  #3A5BE0;
  --ok:        #0A7D59;
  --warn:      #B85C00;
  --danger:    #D93049;
  --hold:      #8034CE;

  --accent-a12: rgba(58,91,224,.12);
  --accent-a14: rgba(58,91,224,.12);
  --ok-a18:     rgba(15,169,122,.12);
  --hold-a16:   rgba(128,52,206,.12);

  --faint:     #B4B9C5;
  --disabled:  #A9AFBC;

  --ok-2:      #0B8A63;
  --ok-bg:     #E8F6F0;
  --ok-txt:    #2F6E58;
  --warn-2:    #8A6A1E;
  --danger-2:  #B8263B;
  --danger-3:  #9A1F31;
  --danger-bg: #FDEEF0;
  --danger-txt:#8A4A55;
  --hold-2:    #6A2BAE;

  --accent-a35: rgba(58,91,224,.30);
  --accent-a40: rgba(58,91,224,.34);
  --ok-a14:     rgba(15,169,122,.10);
  --ok-a32:     rgba(15,169,122,.30);
  --ok-a40:     rgba(15,169,122,.36);
  --warn-a16:   rgba(184,92,0,.10);
  --warn-a32:   rgba(184,92,0,.28);
  --danger-a16: rgba(217,48,73,.10);
  --danger-a35: rgba(217,48,73,.32);
  --hold-a18:   rgba(128,52,206,.12);
  --hold-a32:   rgba(128,52,206,.30);

  --seat-free:      #FFFFFF;
  --seat-free-line: #AEB4C2;
  --seat-sold:      #CBD0D9;

  --hatch: repeating-linear-gradient(135deg, #F1F2F6 0 8px, #E9EBF1 8px 16px);
}

/* --------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:not(.btn):hover { color: var(--accent-2); }

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; }

button { font-family: inherit; }

@keyframes blink     { 0%,49% { opacity: 1 } 50%,100% { opacity: .2 } }
@keyframes pulseRing { 0% { opacity: .5; transform: scale(1) } 100% { opacity: 0; transform: scale(1.4) } }
@keyframes railGlow  { 0%,100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes spin      { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}