/* 취향리그+ 디자인 토큰 v2 — "경기장 잡지" (2026-10-21 Claude, 사용자 지시: 토큰·시스템·폰트 전면 교체)
   - 이 파일이 색·글꼴·크기·간격·모서리·그림자·모션·층의 유일한 원천이다. styles.css 는 토큰 이름을 직접 쓴다.
   - 룩: 밝은 종이 셸(앱) 안에 어두운 방송 프레임(무대)을 둔다. 무대 안 경기장은 잔디가 아니라 가상세계 보드(인디고 바닥·격자·빛나는 선)다.
     라임·흑연·기울기·깎기 기하는 버렸다. 직각에 가까운 작은 반지름, 헤어라인, 부드러운 그림자 한 단계.
   - 글꼴은 이전 체계 그대로(제리 지시 2026-10-21): 디스플레이 KBL Jump EB Extended, 강조 NEXON Lv1 Gothic Bold,
     UI·본문·지문·대사 IBM Plex Sans KR. --font-story 는 역할 토큰으로만 두고 지금은 --font-ui 를 가리킨다.
   - 토큰 이름은 v1 과 같다(다른 스레드의 연결을 깨지 않기 위해). 값만 바뀌었고 몇 개(--color-stage*, --font-story,
     --shadow-soft, --r-3)가 추가됐다. 규칙 요약은 docs/04-ui-ux.md, 시각 정본은 디자인 시스템 캔버스. */
:root {
  color-scheme: light;

  /* 색 — 종이·잉크·울트라마린(브랜드/상태)·시그널 레드(LIVE/주의)·팀 색 두 자리. */
  --color-bg: #e6edf3;            /* 페이지 바탕 (아주 옅은 미색 하늘색, 제리 지시로 한 톤 진하게) */
  --texture-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .3 0 0 0 0 .45 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* 옅은 종이 질감 (노이즈 5.5%) */
  --color-bg-glow: #ffffff;       /* 상단 밝기 */
  --color-surface: #ffffff;       /* 카드·패널 */
  --color-surface-2: #f6f7f9;     /* 패널 안 블록 */
  --color-surface-3: #eceef2;     /* 입력·칩·호버 */
  --color-line: #e3e6eb;          /* 기본 경계선 */
  --color-line-strong: #c9cfd8;   /* 강조 경계선 */
  --color-ink: #0c1220;           /* 본문 */
  --color-ink-2: #3b4555;         /* 보조 본문 */
  --color-muted: #5d6878;         /* 라벨·메타 (흰 카드·종이 위 10~12px 에서도 대비 4.5 이상) */
  --color-accent: #1f3dff;        /* 브랜드 울트라마린 · 현재 상태·주 버튼·선택 */
  --color-accent-ink: #ffffff;    /* 울트라마린 위 글자 */
  --color-accent-soft: #e9ecff;   /* 선택 배경 */
  --color-signal: #ff3c2e;        /* 시그널 레드 · LIVE·주의 */
  --color-signal-2: #ff8a3d;      /* 보조 오렌지 (사용 최소) */
  --color-home: #e8a317;          /* 첫 팀 기본값 (앰버) = --team-1 */
  --color-away: #a98bff;          /* 둘째 팀 기본값 (라일락) = --team-2 */
  /* 구단 팔레트 20색 (team-1…7: 2026-10-21 제리 승인 · team-8…12: F-016 2026-10-22 · team-13…20: 2026-10-23 색조·채도 확장).
     구단마다 구단 화면에서 한 색을 고른다(colorId C01…C20 = team-1…20). 고르지 않은 옛 구단은 생성 순서대로
     team-1…7 을 돌아가며 쓴다. 경기 화면은 그 경기 두 구단의 색을 --color-home/--color-away 자리에 넣고, 두 색이
     같으면 둘째 구단을 다음 번호로 민다. 13…20에서 녹색·청록도 들였다(골 배지 초록 #15a25a보다 밝거나 흐리게 떨어뜨림). 모든 색은 밝기를 높게 둬 색 블록 위 글자는 스무 색 모두 --team-ink.
     보드 위에서는 색만으로 뜨지 않으므로 마커·말풍선 악센트에 어두운 외곽선을 같이 준다. */
  --team-1: #e8a317;   /* 앰버 */
  --team-2: #a98bff;   /* 라일락 */
  --team-3: #ff7aa8;   /* 로즈 */
  --team-4: #2fb0ff;   /* 스카이 */
  --team-5: #f4f0e6;   /* 아이보리 */
  --team-6: #e04fe0;   /* 마젠타 */
  --team-7: #ff7a29;   /* 탠저린 */
  --team-8: #f5d63d;   /* 레몬 */
  --team-9: #e8405e;   /* 루비 */
  --team-10: #5f7dff;  /* 코발트 */
  --team-11: #a7b6cc;  /* 스틸 */
  --team-12: #d9ad84;  /* 샌드 */
  --team-13: #8ff0cf;  /* 민트 */
  --team-14: #b4e04a;  /* 라임 */
  --team-15: #a8c29b;  /* 세이지 */
  --team-16: #3ccfe0;  /* 아쿠아 */
  --team-17: #b8a63c;  /* 올리브 */
  --team-18: #9a68ff;  /* 바이올렛 */
  --team-19: #c47fb8;  /* 플럼 */
  --team-20: #d9825e;  /* 테라코타 */
  --team-ink: #0c1220;
  --color-good: #15a25a;          /* 성공·골 — 배지 바탕(글자 흰색) */
  --color-bad: #d6213c;           /* 실패·오류 */
  --color-signal-ink: #c8281d;    /* 밝은 바탕 위 글자로 쓰는 레드 (signal 은 배지 바탕 전용) */
  --color-good-ink: #0f7a44;      /* 밝은 바탕 위 글자로 쓰는 초록 */
  --color-stage: #0b1326;         /* 방송 프레임(무대) 바탕 */
  --color-stage-2: #14213d;       /* 무대 안 블록·조작부 */
  --color-stage-ink: #f4f6fb;     /* 무대 위 글자 */
  --color-stage-muted: #9aa6c2;   /* 무대 위 라벨 */
  --color-stage-line: #ffffff1f;  /* 무대 위 선 */
  --color-pitch: #1b2d6b;         /* 경기장 바닥 (가상세계 보드, 인디고) */
  --color-pitch-2: #162457;       /* 바닥 가장자리 */
  --color-pitch-line: #cfe0ffe6;  /* 경기장 선 (빛나는 청백) */
  --color-pitch-grid: #8fb3ff14;  /* 바닥 격자 */
  --color-pitch-glow: #6f9bff;    /* 선 광원 */
  --color-caption: #0b1326e6;     /* 무대 위 지문창 바탕 (반투명 네이비) */
  --color-log: #121d3b;           /* 로그 패널 바탕 (무대보다 한 단계 밝은 네이비) */
  --color-log-2: #1a2750;         /* 로그 안 칩·버튼 */
  --color-log-ink: #eef1f8;       /* 로그 본문 */
  --color-log-ink-2: #c3cbe0;     /* 로그 보조 본문(지문) */
  --color-log-muted: #8e9ab8;     /* 로그 라벨·메타 */
  --color-log-line: #ffffff1a;    /* 로그 안 선 */
  --color-log-line-strong: #ffffff33;
  --color-accent-dark: #7b93ff;   /* 어두운 바탕 위 울트라마린 (상태·링크) */
  --color-cast: #ffd66b;          /* 해설 · 중계 라벨 (어두운 로그·중계석 위 전용, 대비 11:1) */
  --color-memory: #e3c7a4;        /* 썰 회상 장면 머리·옆줄 (어두운 로그 위 전용) */
  --scroll-thumb: #c3cad5;        /* 스크롤바 손잡이 (밝은 셸) */
  --scroll-thumb-hover: var(--color-accent);
  --color-log-expanded: #0f1a33e6; /* 펼친 로그 바탕 (90%) — 뒤의 경기장이 흐리게 비친다 */
  --color-band: #0b1326e6;        /* 띠로 내려온 결과 스팅어 바탕 */
  --color-band-2: #14213de6;
  --color-portrait: #dde2ea;      /* 미등록 초상화 바탕 */

  /* 글꼴 */
  --font-display: "KblJumpExtended", "IBM Plex Sans KR", sans-serif;   /* 점수·국면·GOAL·MATCH·태그 */
  --font-emphasis: "NexonLv1Gothic", "IBM Plex Sans KR", sans-serif;   /* 구단명·제목 — 700 */
  --font-ui: "IBM Plex Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; /* UI·본문 */
  --font-story: var(--font-ui);                                          /* 지문·대사·로그 본문 (글꼴은 이전 체계 유지, 제리 지시) */

  /* 크기 — 1.2 배 척도. */
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-19: 19px; --fs-23: 23px; --fs-28: 28px; --fs-34: 34px; --fs-40: 40px; --fs-48: 48px;
  --lh-tight: 1.1; --lh-ui: 1.5; --lh-read: 1.8;
  --ls-display: 0.01em; --ls-tight: -0.02em; --ls-label: 0.12em;

  /* 간격 — 4 단위. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* 모서리 — 기울기·깎기 없음. */
  --r-0: 0; --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-frame: 14px; --r-pill: 999px;
  --skew: 0deg; --skew-soft: 0deg; --cut-tile: 0px; --cut-kicker: 0px;

  /* 그림자 — 부드러운 한 단계. */
  --shadow-soft: 0 1px 2px #0c122014, 0 8px 24px #0c12200f;
  --shadow-hard: var(--shadow-soft);
  --shadow-frame: 0 24px 60px #0c122033;
  --shadow-pop: 0 16px 40px #0c122033;
  --shadow-tile: 0 8px 24px #00000066;
  --glow-accent: 0 0 0 3px #1f3dff33;

  /* 모션 */
  --dur-1: 120ms; --dur-2: 240ms; --dur-3: 480ms;
  --ease-out: cubic-bezier(.22, .8, .26, 1);
  --ease-snap: cubic-bezier(.6, 0, .2, 1);
  --dur-stinger: 550ms;
  --result-impact: .8s;           /* 판정 뒤 슛이 골문·상대 마커에 닿는 순간 (choreo RESULT_IMPACT 와 같게) */
  --delay-stinger: 2.6s;          /* 결과 문구가 로그 위 띠로 내려앉는 때 */

  /* 층 — 무대 안 겹침 순서. */
  --z-field: 1; --z-overlay: 2; --z-lane: 3; --z-log: 3; --z-notice: 4; --z-result: 6; --z-match: 7; --z-start: 8;

  /* 고정 프레임 */
  --story-frame-height: 132px;    /* 접힌 로그: 본문 약 2줄 반 (제리 2026-10-23: 크기 줄이고 덜 눈에 띄게) */
  --stage-frame-height: 750px;
  --log-expanded-top: 132px;
  --fs-stinger-band: 30px;
  --stinger-band-top-expanded: 108px;
  --stinger-band-height-expanded: 88px;

  /* 무대 위 지문창 */
  --narration-top: 142px;
  --narration-width: 46%;
  --narration-max-width: 460px;
  --narration-max-height: calc(100% - var(--narration-top) - var(--story-frame-height) - 72px);
  --stack-gap: 6px;
  --color-speech: #1f3a70;        /* 대사 말풍선: 지문창보다 밝고 푸른 남색, 말하는 팀 색 28%가 섞인다 */
  --color-speech-ink: #f4f6fb;
  --r-speech: 14px;
  --dur-stack-out: 560ms;
  --dur-speech-in: 420ms;
  /* 캔버스(field.mjs)가 직접 그리는 값은 CSS 변수를 읽지 않는다: 보드·선·말풍선 색과 글꼴 이름은 field.mjs 상수, 말풍선 악센트는 TEAM_COLORS. */

  /* 별칭 — 기존 규칙이 쓰는 이름. */
  --bg: var(--color-bg); --panel: var(--color-surface); --panel-2: var(--color-surface-2);
  --ink: var(--color-ink); --muted: var(--color-muted); --line: var(--color-line);
  --accent: var(--color-accent); --gold: var(--color-home); --purple: var(--color-away);
  --red: var(--color-bad); --green: var(--color-good);
  --sport-orange: var(--color-signal); --sport-pink: var(--color-signal-2);
  --caption-bg: var(--color-caption); --portrait-bg: var(--color-portrait);
  --ui: var(--font-ui); --emphasis: var(--font-emphasis); --display: var(--font-display); --mono: var(--font-ui);
}

@media (max-width: 600px) {
  :root { --story-frame-height: 128px; --stage-frame-height: calc(320px + var(--story-frame-height) + 14px);
          --narration-top: 118px; --narration-width: 72%; --narration-max-height: 150px; --log-expanded-top: 84px; }
}