---
title: "📓 작업일지 — 러닝 플랜 데스크탑 패널 폭 확대·정확화(root 14px 대응)"
category: "worklog"
parent: "Claude Code 작업일지"
updated: "2026-07-08"
priority: "Low"
purpose: "러닝 플랜 데스크탑(≥1024) 레이아웃을 전체 1600·표 880·AI 700·간격 20으로 확대했다가, root font-size가 14px라 rem 환산이 어긋나 폭이 못 미치던 것을 --sp-1600 토큰 + fr 비율로 재수정한 2건의 연속 작업 기록."
read_when: ["러닝 플랜 데스크탑 레이아웃", "running-plan.css", "root font-size 14px", "rem 환산 버그"]
document_type: "개발일지"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260708_134940"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록 본레포(ccy-hansbridge/dallog), 커밋 3a4608f·7e2f99f(2026-07-08)."
---

# 작업일지 — 러닝 플랜 데스크탑 패널 폭 확대·정확화(root 14px 대응)

> 러닝 플랜 데스크탑 화면의 표·AI카드 폭을 먼저 rem 단위로 확대했는데, 곧바로 이 사이트의 root font-size가 16px가 아니라 14px라는 걸 놓쳐 실제 폭이 의도보다 작게 나온 걸 발견하고 같은 날 다시 고쳤다. 두 커밋이 이어지는 하나의 작업이라 한 문서로 묶는다.

## 1. 무엇을 했나

### 1차 — 폭 확대(3a4608f)
- `@media(min-width:1024px)`(데스크탑 전용) 구간에 `.rpp { max-width: 100rem }`(=1600px, 16px 가정), `.rpp-planwrap { grid-template-columns: minmax(0,43.75rem) minmax(0,55rem); gap: var(--space-5) }`(AI 700px·표 880px·간격 20px) 추가.
- raw px 없이 전부 rem·space 토큰 사용.

### 2차 — 폭 정확화(7e2f99f)
- **원인**: 달록의 root font-size는 14px로 설정돼 있어, `100rem`은 16px 가정과 달리 1400px밖에 안 됨 — 전체·표·AI 폭이 의도(1600/880/700)에 못 미치던 버그.
- **수정**: `.rpp`의 `max-width`를 `100rem` 대신 `--sp-1600`(1600px 고정 토큰)으로, 좌우 padding은 0(여백은 상위 Layout `.lay-main.is-wide`가 제공)으로 변경.
- `.rpp-planwrap`의 `grid-template-columns`를 rem 기반 `minmax()` 대신 `700fr 880fr`(단위 없는 fr 비율)로 변경 — gap(20px) 제외한 나머지 1580px를 700:880 비율로 정확히 분배.
- 여전히 raw px는 0 — 토큰·fr 비율·0만 사용, 데스크탑(≥1024) 전용 유지.

## 2. 주요 변경 파일

| 파일 | 내용 |
|---|---|
| `src/components/runningPlan/running-plan.css` | 데스크탑 전용 `.rpp`·`.rpp-planwrap` 폭 지정 → `--sp-1600` 토큰 + fr 비율로 재수정 |

## 3. 관련 커밋

- `3a4608f` style(running-plan): 데스크탑 패널 확대 — 전체 1600·표 880·AI 700·간격 20 (rem·토큰, raw 금지) (2026-07-08)
- `7e2f99f` fix(running-plan): 데스크탑 폭 정확화 — root 14px 대응(--sp-1600 토큰+fr 비율) (2026-07-08)

## 4. 남은 이슈

- 커밋 메시지 기준으로 별도 남은 이슈 언급 없음.