/* ========================================================== 코리안유로파 디자인 변수 색·글꼴·글자 크기·여백·모서리는 이 파일에서만 정한다. 다른 CSS·JS 파일에는 색 코드를 직접 쓰지 않는다. (예외: 팀 배지 색은 data/teams.js · 국기는 원본 그림 site/flags/ — 고치지 않음) ========================================================== */ :root{ /* ── 색: 바탕·글자 ── */ --page:#E9ECEA; /* 페이지 바탕 */ --card:#FFFFFF; /* 카드 바탕 */ --soft:#F3F5F4; /* 옅은 바탕(목록 머리, 선택 칸) */ --ink:#111714; /* 본문 글자 */ --muted:#5D6862; /* 보조 글자 */ --line:#D6DBD8; /* 구분선 */ --track:#E3E7E5; /* 막대 바탕 */ /* ── 색: 브랜드(상단 바) ── */ --brand:var(--board); /* 상단 바 = 전광판 판넬과 같은 색 */ --brand-accent:var(--bulb); /* 현재 메뉴 밑줄 = 전구색 */ --logo-red:#F0414F; /* 로고 아이콘 왼쪽 위 점(태극 빨강) */ --logo-blue:#5C94FF; /* 로고 아이콘 오른쪽 아래 점(태극 파랑 — 짙은 바탕 위에서 보이게 밝게) */ --on-brand:#FFFFFF; /* 상단 바 위 글자 */ --on-brand-muted:rgba(255,255,255,.72); --on-brand-icon:rgba(255,255,255,.7); --on-brand-placeholder:rgba(255,255,255,.62); --on-brand-dot:rgba(255,255,255,.5); --on-brand-border:rgba(255,255,255,.45); --on-brand-line:rgba(255,255,255,.2); --on-brand-chip:rgba(255,255,255,.18); --on-brand-hover:rgba(255,255,255,.1); --on-brand-divider:rgba(255,255,255,.08); /* ── 색: 강조·데이터 ── */ --blue:#1F58D6; /* 10대 리그, 링크, 지도 기본 색 */ --red:#DD2F3D; /* 10대 리그 밖, 골 */ --zone-soft:color-mix(in srgb,var(--blue) 16%,transparent); /* 6~10위 순위 칸(옅은 10대 리그 색 — 어두운 화면은 밝아진 --blue를 따라감) */ --on-accent:#FFFFFF; /* 진한 지도 칸 위 글자 */ --btn:var(--brand); /* 주 버튼 (밝은 화면에서는 브랜드 색을 따른다) */ --btn-ink:#FFFFFF; --dot0:#A7B3AE; /* 지도에서 선수 없는 나라의 점(땅 — 2026-11-03 진하게) */ --dot-bg:#CED7D3; /* 지도에서 러시아·UEFA 밖 땅의 점(가장 옅게) */ --ramp-1:30%; /* 지도 점 진하기: 선수 1명 · 2명 · 3명(4명 이상은 100%) — 범례도 같이. */ --ramp-2:50%; /* 단계 차이를 크게 해 이웃 나라가 한 덩어리로 보이지 않게(2026-11-01 웅찬 ④) */ --ramp-3:72%; --uefa-bg:#1F3A8A; /* UEFA 대회 표시 */ --uefa-star:#FFD84D; /* ── 색: 전광판(디자인 B)·칸 위 띠 ── */ --board:#0E1C16; /* 전광판 판넬 — 상단 바, 어두운 화면의 칸(선수 명단·리그별 맨 위 칸 포함 — 홈 지도 칸은 --map-sea) */ --bulb:#FFB21E; /* 전구색 — 전광판 숫자·켜진 점 */ --strip:#111714; /* 칸 맨 위 굵은 띠 */ --num-ink:currentColor; /* 목록 숫자 색 — 밝은 화면은 둘레 글자색 그대로(어두운 화면은 전구색 — 아래) */ /* ── 색: 홈 지도 칸 바탕(밝은 화면 — 어두운 값은 아래 전광판 칸, 2026-11-03 웅찬: 지도가 어둡다·바다가 구별됐으면) ── */ --map-sea:#E8F1FA; /* 바다 = 지도 칸 바탕(아주 옅은 하늘색) */ --map-soft:#DCE8F4; /* 지도 칸 안 옅은 바탕(전환 단추 칸·나라 펼침 칸) */ --map-line:#C9D7E6; /* 지도 칸 안 구분선 */ /* ── 색: 테두리·그림자 ── */ --flag-edge:rgba(0,0,0,.14); --avatar-edge:rgba(0,0,0,.16); --badge-outline:rgba(0,0,0,.3); --badge-halo-on-light-text:rgba(0,0,0,.55); /* 밝은 글자 배지의 글자 테두리 */ --badge-halo-on-dark-text:rgba(255,255,255,.9); /* 어두운 글자 배지의 글자 테두리 */ --badge-neutral:#7C8799; /* 팀 목록(data/teams.js)에 없는 팀의 중립 배지 바탕 */ --badge-neutral-2:#5D6778; /* 중립 배지 아래 띠 */ --badge-neutral-tx:#FFFFFF; /* 중립 배지 글자 */ --scrim:rgba(8,14,26,.5); --shadow:rgba(16,24,40,.14); /* ── 글꼴 ── */ --f-logo:'Gothic A1','Malgun Gothic',sans-serif; --f-ui:'Gothic A1','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif; --f-num:'Big Shoulders Display','Arial Narrow',sans-serif; /* 숫자(전광판 글씨) */ --f-badge:'Big Shoulders Display','Arial Narrow',sans-serif; /* ── 글자 크기 ── */ --fs-1:11px; /* 꼬리표 */ --fs-2:12px; /* 보조 설명 */ --fs-3:13px; /* 작은 본문 */ --fs-4:14px; /* 본문 */ --fs-5:15px; /* 카드 제목 */ --fs-6:16px; --fs-7:19px; /* 첫 화면 제목 */ --fs-8:22px; --fs-9:28px; --fs-hero:112px;/* 첫 화면 숫자(전광판) */ --fs-num:22px; /* 목록 숫자(계단·리그별·순위표) */ --fs-board:46px;/* 선수 명단·리그별 맨 위 칸(전광판) 숫자 */ --fs-nav:16px; /* 상단 메뉴 글자(휴대폰 — PC는 아래 'PC 상단 바') */ --fs-logo:19px;/* 로고 글자(휴대폰 — PC는 아래) */ --fs-bar:14px; /* 상단 바 검색칸·제보하기 글자(휴대폰 — PC는 아래) */ /* ── 여백 ── */ --sp-0:1px; --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px; --sp-6:12px; --sp-7:14px; --sp-8:16px; --sp-9:20px; --sp-10:24px; --sp-11:32px; --sp-12:36px; --header-offset:120px; /* 상단 바 아래로 스크롤할 때 남기는 높이 */ --sticky-offset:72px; /* 따라오는 광고의 위쪽 간격 */ --nav-pad:18px; /* 상단 메뉴 칸 좌우 여백(PC) */ --nav-pad-m:10px; /* 상단 메뉴 칸 좌우 여백(휴대폰) */ --nav-max:640px; /* PC 상단 메뉴가 펼쳐지는 최대 폭(로고와 검색창 사이 가운데) */ /* ── 움직임 ── */ --tk-per:4.5s; /* 최근 경기 띠: 경기 하나가 지나가는 시간(띠 한 바퀴 = 경기 수 × 이 값) */ /* ── 폭 ── */ --page-max:1240px; /* 본문 최대 폭 (상단 바·경기 띠·본문·바닥글 공통) */ --sub-max:880px; /* 선수 명단·리그별 페이지 본문 최대 폭(가운데 한 단) */ --map-max:640px; /* 지도 최대 폭 */ --map-ratio:.68; /* 지도 세로 ÷ 가로(data/dotmap.js 62×42칸) */ --map-reserve:300px; /* 큰 화면에서 지도 위(상단 바·숫자)와 아래(범례)에 남길 높이 */ /* ── 모서리 ── */ --rad-1:1px; --rad-2:2px; --rad-3:2px; --rad-4:2px; --rad-5:2px; --rad-6:2px; --rad-7:4px; --rad-pill:999px; } /* 휴대폰(가로 699 이하): 첫 화면 큰 숫자를 줄인다 */ @media (max-width:699px){:root{--fs-hero:84px}} /* PC 상단 바(가로 1100 이상 — 메뉴가 한 줄로 보이는 폭): 바 높이 72px(site.css)에 맞춘 글자 크기(2026-11-01 웅찬) */ @media (min-width:1100px){:root{--fs-nav:18px;--fs-logo:24px;--fs-bar:15px}} /* 큰 화면(가로 1600·세로 900 이상): 본문을 넓히고, 지도는 첫 화면에 다 들어오는 만큼만 키운다. 노트북 등 그보다 작은 화면은 위의 기본값 그대로 */ @media (min-width:1600px) and (min-height:900px){ :root{ --page-max:1360px; --map-max:min(760px, calc((100vh - var(--map-reserve)) / var(--map-ratio))); } } /* ── 전광판 색(디자인 B — 경기장 전광판, 2026-11-01 웅찬) ── 어두운 화면에서만 페이지 전체가 이 색(밝게/어둡게는 js/theme.js가 로 정함 — 어두운 색은 여기 한 곳). 밝은 화면에선 홈 지도 칸·선수 명단·리그별 맨 위 칸도 다른 칸처럼 흰 칸이다(2026-11-03 웅찬 — 낮 = 흰 칸, 밤 = 전광판) */ :root[data-theme="dark"]{ --card:var(--board);--soft:#15261E;--line:#24382F;--ink:#F1F4F2;--muted:#95A69D;--track:#22352C; --dot0:#3D564A;--dot-bg:#24392F;--shadow:rgba(0,0,0,.45); /* 지도 땅 점(밤 — 2026-11-03 밝게) */ --num-ink:var(--bulb);--flag-edge:rgba(255,255,255,.16);--avatar-edge:rgba(255,255,255,.16); --map-sea:#0C1A2B;--map-soft:#13243A;--map-line:#22364D; /* 홈 지도 칸(밤): 남색 바다 */ } /* 어두운 화면의 지도 칸·맨 위 칸: 점 지도·큰 숫자·칸 위 띠를 전구색으로(밝은 화면은 파랑 — :root의 --blue) */ :root[data-theme="dark"] .hero,:root[data-theme="dark"] .ph{--blue:var(--bulb);--strip:var(--bulb)} /* 홈 지도 칸: 바탕(바다)·칸 안 옅은 바탕·구분선은 지도 칸 색(--map-* — 밝은 값은 :root, 어두운 값은 위) */ .hero{--card:var(--map-sea);--soft:var(--map-soft);--line:var(--map-line)} /* 어두운 화면만: 페이지 바탕은 칸보다 한 단계 더 어둡게(밤 경기장), 칸 위 띠는 불 꺼진 판넬 테두리처럼 차분하게(지도 칸·맨 위 칸만 전구색 띠), 막대·링크의 파랑·빨강은 어두운 바탕에서 보이게 밝게 */ :root[data-theme="dark"]{ --page:#07100C;--strip:#2E4639; --blue:#7FA8FF;--red:#FF6B74;--btn:var(--ink);--btn-ink:var(--board); --scrim:rgba(0,0,0,.62); color-scheme:dark; }