/* =========================================================== * Day 43 Phase 3-1A 신설 — 전역 CSS 변수 영역 * 회사 별 정정 영역 정합 (SITE_PRIMARY_COLOR 측 :root --app-primary 정합) * 명세서 §6-1 정합 100% * =========================================================== */ /* THEME TOKENS */ /* ========================================================================== AT-7 · 테마 토큰 **단일 정본**. 위치 근거: `--app-*` 가 원래 사는 곳이 여기(:root)다. font.css 로 옮기면 이 파일이 뒤에 로드돼 같은 이름을 재선언하는 순간 **font.css 값이 무효**가 되므로, 한 곳으로 합쳤다. (CSS 변수는 사용 시점에 해석되므로 정의가 뒤 파일에 있어도 앞 파일 규칙에서 정상 참조된다.) 10개 데모(s3~c5)는 **파일 목록이 동일하고 이 블록의 값만 다르다**. ⚠️ 변수명에 **색 이름 금지** — `--app-gold` 로 두면 청록 테마 데모에서 이름이 거짓말이 된다. 역할명(primary / bg / border / text / odds)만 사용. ⚠️ 아래 색값은 구 청록·블루 기본값에서 **골드 축으로 교체된 것**(선언 신설이 아니라 값 교체 — 병렬 토큰 세트가 생기지 않게 함). 교체 전 값은 전부 소비 0(dead)이었음(실측). ========================================================================== */ :root { /* ===== 브랜드(액센트) ===== ⚠️ **브랜드색 · 프로젝트별 가변** — 데모마다 값이 다릅니다(s2=골드, 다른 데모는 청록 등). "기본 파랑(#2563eb)"이라는 구 관념으로 쓰면 안 됩니다. 값 정본 = 각 프로젝트 이 블록. [s3] 골드 → **그린** 축 교체(지시 — 사이트 전체 톤 = 초록 · 로고 민트 + 좌측 그라디언트 #133d18 과 정합). */ --app-primary: #81d8d0; /* S10 · 티파니 블루(#81d8d0) */ --app-primary-light: #b2ebe6; --app-primary-hover: #96e0d9; --app-primary-active: #5fbfb6; --app-primary-grad: linear-gradient(180deg, #b2ebe6, #5fbfb6); /* C · 브랜드색 아주 옅은 채움(입력 배경 등). 리터럴 rgba 를 코드에 박으면 s3~c5 에서 골드가 남으므로 토큰화. ⚠️ color-mix 미사용(구형 브라우저 회피) → 데모별로 이 rgba 의 RGB 3값을 --app-primary 와 함께 교체할 것. */ --app-primary-tint: rgba(129, 216, 208, .10); /* ===== 상태 색상 — 상단바 버튼 축(충전 녹 / 환전 적 / 고객센터 청)으로 값 교체 ===== */ --app-success: #1d9e75; --app-error: #d9534f; --app-warning: #f59e0b; --app-info: #337ab7; /* ===== 텍스트 ===== */ --app-text-primary: #e9e9ec; --app-text-secondary: #a8b0ba; --app-text-muted: #8b8b95; --app-text-dim: #5a5a64; /* ===== 배경 / 패널 단계 (시안 V3_MOCKUP.html :root 정본) ===== */ --app-bg-root: #030a0a; /* 최외곽(body) — 콘텐츠 영역(--app-bg)보다 한 단계 더 어둡게 */ --app-bg: #071110; --app-bg-panel: #0d1b1a; --app-bg-panel-2: #132523; --app-bg-panel-3: #1a2f2d; --app-bg-card: rgba(0, 0, 0, 0.55); --app-bg-overlay: rgba(0, 0, 0, 0.45); /* ===== 라인 ===== */ --app-border: #1f3b38; /* S10 · 딥 틸 라인 */ --app-border-soft: #2a4c48; /* ===== 배당 라벨색(홈 / 무 / 원정) ===== */ --app-odds-home: #f40025; --app-odds-draw: #3cff52; --app-odds-away: #00b5ff; /* ===== 그림자 ===== */ --app-shadow-card: 0 20px 60px rgba(0, 0, 0, 0.5); --app-shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.15); /* ===== 반경 ===== */ --app-radius-sm: 8px; --app-radius-md: 12px; --app-radius-lg: 16px; /* ===== 폰트 ===== ⚠️ Pretendard 는 s2 미호스팅(실측 0건) → 실질 폴백은 시스템 sans-serif. CDN 임의 추가 금지 규칙에 따라 이름만 남겨 둔다(추후 호스팅 시 자동 유효). */ --app-font-base: 'A2Z', Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif; } /* /THEME TOKENS */ /* LOGIN ASSETS */ /* ========================================================================== 로그인 화면 — **프로젝트별 교체 지점**(THEME TOKENS 와 같은 취급). 10개 데모는 파일 목록이 동일하고 **이 블록의 값만 다르다** → 값만 바꾸면 다른 로그인 화면이 된다. ⚠️ 경로·수치 리터럴을 app-login.css 본문에 흩지 말 것. 규칙 본문은 전부 아래 변수만 참조한다. 자산 배치(사람): front.s2\wwwroot\images\login\ login-bg.jpg 배경 사진(잘려도 무방 — cover) login-art.png 아트 레이어(폰 프레임 등이 그려진 투명 PNG — **절대 잘리면 안 됨**) ⚠️ 자산이 없어도 렌더는 정상이다(이미지 미로드 = 배경색 폴백, 에러 0). 폼 좌표계: 아트 레이어를 기준으로 삼는다(§2 난점 해소). --login-art-ratio 로 아트 비율을 고정한 '스테이지'를 만들고, 그 안에서 폼을 중앙 기준 %로 민다. → 뷰포트 비율이 아트와 달라도 **아트와 폼의 상대 위치가 절대 어긋나지 않는다**. 폰 프레임이 아트 중앙이 아니면 --login-form-x/y 로 밀어 맞춘다(단위 % = 스테이지 대비). ========================================================================== */ :root { /* 자산 경로 — 파일명은 브랜드 중립. none 으로 두면 그 레이어가 렌더되지 않는다. CEO-LOGIN · 배경 = 검정 + 골드 브러시 시안(/img/login/login_bg_ceo.webp 2560×1440 — wwwroot 실물). 구 TR-98 잎사귀 아트(login_bg.png)는 파일 잔류(참조만 해제). 아트 레이어(폰 프레임)는 시안에 없음 → none(레이어 미렌더). */ --login-bg: url('/img/login/login_bg_main.webp'); /* LOGIN-AIR-DARK(2026-10-13) · 티파니 라운지 일러스트 1672×941 */ --login-art: none; /* 아트 원본 비율(가로/세로). 자산 교체 시 비율이 다르면 이 값도 함께 바꿀 것. */ --login-art-ratio: 1672 / 941; /* 로고 — ⓐ 채택(변수 미도입): 경로를 마크업에 직접 둔다. 근거 = ceo_logo.png 는 MainLayout·MainLayout_Partner·Blocked·BrowserBlock·Parking 이 **이미 같은 경로로 공유**한다(6곳 실측). 데모 파생 시 파일 1개만 바꾸면 로그인 포함 7곳이 함께 반영되므로 그게 로고 축 "1곳"이다. 여기에 변수를 더하면 로고 축이 (파일 + 변수) 2곳으로 갈라져 오히려 원칙이 깨진다. 폼 — 폭·보정 전부 **스테이지 대비 %**. 아트가 축소돼도 폰 프레임과 같은 비율로 따라간다. ⚠️ % 기준: --login-form-x/y 는 `left/top: calc(50% + …)` 에 들어가므로 **스테이지 크기 기준**이다 (transform translate 로 넣으면 자기 자신 기준이 되어 어긋난다 — 실제로 그렇게 잘못 짰다가 교정함). 아트 실측(login-art.png 1920×1081 픽셀 스캔 — PM 스펙의 "세로 43.5%" 는 실측과 달라 실측을 채택): 폰 프레임 흰 화면 = x 742~1173(폭 **432px**, 중심 49.87%) · y 120~952(높이 833px, 중심 **49.58%**) → x = 0% (중심 49.87% ≒ 정중앙. 편차 2.5px@1920 로 무시 가능) y = -0.4% (50% → 49.58%) w = 20% (=384px@1920 → 432px 내부 폭 안에 좌우 24px 여백) */ /* CEO-LOGIN · 아트 없는 중앙 카드 시안 — 폭은 스테이지 %가 아니라 카드 고정폭(px). 460 = 대형 로고(내부 폭 100% 렌더)를 위해 구 400 에서 확폭(패딩 32×2 제외 내부 396). */ --login-form-w: 420px; /* LOGIN-AIR-DARK · airplane 카드 폭 */ --login-form-x: 0%; --login-form-y: -5%; /* airplane 동형 — 정중앙보다 조금 위 */ /* 모바일(≤1023.98)은 아트를 접고 흐름 중앙 배치 — 그 구간 전용 폭 상한(px). */ --login-form-w-mobile: 345px; /* 아트가 없거나 레터박스 여백이 생기는 자리의 바탕. */ --login-stage-bg: var(--app-bg-root); } /* /LOGIN ASSETS */ /* ===== body 기본 영역 ===== */ body { margin: 0; padding: 0; font-family: var(--app-font-base); -webkit-font-smoothing: antialiased; } /* AT · 폼 요소 폰트 상속 — 브라우저가 input/select/textarea/button 에 OS 기본 폰트를 강제하므로 body 상속이 닿지 않는다(A2Z 미적용의 두 번째 경로). 토큰명을 직접 쓰지 않고 `inherit` 을 써서 폰트 교체 시 자동 추종하게 한다(10개 데모에서 토큰 값만 바뀌어도 폼이 따라옴). ⚠️ 아이콘 폰트는 영향 없음 — FA5 `.fas` / Tabler `.ti` / Slick `::before` 는 자기 규칙(클래스·의사요소)이 이 타입 선택자보다 우선하거나 다른 요소에 걸린다. button 안의 도 i 요소가 자기 폰트를 갖는다. */ input, select, textarea, button { font-family: inherit; } /* ===== 공통 영역 ===== */ * { box-sizing: border-box; }