---
title: "📋 작업보고 — 로그인/스플래시 배경 이미지 + 스플래시 라이트모드 테마 적응"
category: "report"
parent: "Claude Code 작업보고"
updated: "2026-07-04"
priority: "Medium"
purpose: "로그인/스플래시 첫인상 보강. 스플래시가 라이트모드에서도 다크로 남던 문제를 color-mix(var(--bg)) 스크림으로 근본 해결(테마 자동 적응). 데스크탑=체성분/러닝/근력 3축 시드 병렬 배경, 모바일=러닝 단일. auth 로직 무접촉, raw color/px 없이 토큰 처리."
read_when: ["로그인 배경","스플래시 배경","스플래시 라이트모드","auth-scrim","splash-scrim","color-mix","테마 적응","시드이미지 배경"]
document_type: "작업보고"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260704_113700"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록본레포CC (D:\\dallog\\dallog_git)."
---

> 대상 `phase1-release` → `main`·`demo-dallog`. 시드 재사용(`public/record-detail/*.png`). 사장님 육안 확인 완료(로그인/스플래시 OK). 파일: `src/index.css` 단일.

## 1. 목적
- **라이트모드 스플래시가 다크 배경으로 남던 문제 보정**(테마 정합).
- 로그인/스플래시에 운동기록 앱 정체성이 드러나는 배경 이미지 적용(폼 가독성 유지).

## 2. 스플래시 테마 적응 (근본 해결)
- 원인: `.splash { background: #0a0a0a }` 하드코딩 → `[data-theme="light"]` override 없음.
- 해결: **`--splash-scrim = linear-gradient(color-mix(in srgb, var(--bg) N%, transparent) …)`** 스크림 + `var(--bg)`. `--bg`가 테마별로 바뀌므로 **다크=어두운 스크림 / 라이트=밝은 스크림**으로 자동 전환. `.splash__glow`도 `color-mix(var(--accent))`로 테마화.

## 3. 배경 이미지
- **데스크탑 로그인(`.login-screen__brand`)·스플래시(`.splash`)**: 체성분/러닝/근력 **3축 시드 병렬 배경**(background-size 33.34% 슬롯) + `--auth-scrim`/`--splash-scrim`. 로그인 폼(우측 panel)은 기존 surface 유지해 가독성 보존.
- **모바일 로그인·스플래시**: `@media(max-width:767.98px)`에서 **러닝 단일 시드**(러닝화 상단~중상단, object-position center 22%) + 스크림.

## 4. 토큰/준수
- 신규 토큰 `--auth-scrim`·`--splash-scrim`(color-mix 기반, 정의부에만 raw 값). 그 외 raw color/px 없음.
- **auth 로직(OAuth·ID로그인·회원가입·계정찾기) 무접촉.** 소셜버튼 브랜드색·폼 구조 유지.

## 5. 검증·잔여
- `npm run build` 통과, mojibake 0.
- (Codex [보류]) 3축 배경 `background-size: 33.34%`는 슬롯 강제라 원본 비율 왜곡 가능성 — 스크림이 두꺼워 거의 안 보이며, 육안검수 후 조정 가능(현재 사장님 OK).