Implement mobile login page styling

[mingggg046779-rgb]

#️⃣연관된 이슈

없음

📝작업 내용

• LoginPage의 모바일 기준 레이아웃을 피그마 스타일에 맞춰 정리했습니다.
• RUN sync 브랜드 텍스트와 tagline을 중앙 배치했습니다.
• CSS module만 사용해 러닝 실루엣 일러스트 영역을 추가했습니다.
• 기존 카카오 OAuth 로그인 로직과 KakaoLoginButton 사용 구조를 유지했습니다.

📷스크린샷 (선택)

미첨부

💬리뷰 요구사항(선택)

피그마 MCP 연결이 불가해 제공된 조건을 기준으로 구현했습니다.
검증: npm run build 성공

  

[gemini-code-assist]

Code Review

This pull request replaces the static image illustration on the login page with a custom CSS-based animation featuring a runner, sun, and track. It also updates the page layout, background gradients, and typography using fluid font sizes for better responsiveness. Feedback focuses on improving the visual fidelity of the CSS illustration, specifically by adjusting the stacking order of the runner's limbs for better perspective, using drop-shadow on the parent container to avoid overlapping shadows, and ensuring the track lines render correctly by setting an explicit height.

[gemini-code-assist]

러너의 신체 부위가 렌더링되는 순서(Stacking Order)를 조정하는 것이 좋습니다. 현재는 'Back' 부위들이 나중에 선언되어 몸통 위에 그려지는데, 일반적으로 원근감을 위해 뒤쪽 팔다리는 몸통 뒤에 위치하도록 DOM 순서를 변경하는 것이 더 자연스럽습니다.

Suggested change

	<span className={styles.runnerHead} />
	<span className={styles.runnerBody} />
	<span className={styles.runnerArmFront} />
	<span className={styles.runnerArmBack} />
	<span className={styles.runnerLegFront} />
	<span className={styles.runnerLegBack} />
	<span className={styles.runnerArmBack} />
	<span className={styles.runnerLegBack} />
	<span className={styles.runnerBody} />
	<span className={styles.runnerHead} />
	<span className={styles.runnerArmFront} />
	<span className={styles.runnerLegFront} />

[gemini-code-assist]

.trackLine 요소들이 곡선으로 보이기 위해서는 height 설정이 필요합니다. 현재 설정으로는 직선으로 렌더링될 가능성이 높으므로, 부모인 .track의 곡률을 따라가도록 높이를 지정하는 것이 좋습니다.

Suggested change

	.trackLine {
	position: absolute;
	right: 14px;
	left: 14px;
	border-bottom: 2px solid rgba(255, 90, 31, 0.16);
	border-radius: 50%;
	}
	.trackLine {
	position: absolute;
	right: 14px;
	left: 14px;
	height: 100%;
	border-bottom: 2px solid rgba(255, 90, 31, 0.16);
	border-radius: 50%;
	}

[gemini-code-assist]

실루엣 형태의 러너 일러스트 전체에 일관된 그림자를 적용하려면, 개별 부위가 아닌 부모 요소인 .runner에 filter: drop-shadow()를 적용하는 것이 좋습니다. 이렇게 하면 부위들이 겹치는 지점에서 그림자가 중첩되는 현상을 방지할 수 있습니다.

Suggested change

	.runner {
	position: absolute;
	right: 74px;
	bottom: 82px;
	width: 116px;
	height: 142px;
	transform: rotate(-8deg);
	}
	.runner {
	position: absolute;
	right: 74px;
	bottom: 82px;
	width: 116px;
	height: 142px;
	transform: rotate(-8deg);
	filter: drop-shadow(0 8px 18px rgba(31, 27, 24, 0.12));
	}

[gemini-code-assist]

개별 신체 부위 요소에서 box-shadow를 제거하고 공통 스타일을 정리합니다. 앞서 제안한 대로 부모 요소에 drop-shadow를 적용하면 시각적으로 더 깔끔해집니다.

.runnerHead,
.runnerBody,
.runnerArmFront,
.runnerArmBack,
.runnerLegFront,
.runnerLegBack {
  position: absolute;
  display: block;
  background: #1f1b18;
}