style(B05): 구조물 알약을 한 단 낮춰 종단 그래프 자리 확보

사용자 지시(2026-09-06): 구조물 표시가 너무 커서 높이를 많이 차지함.

- 알약 높이 24 → 18px, 혼자 있을 때 31 → 22px, 글자 11 → 10px
- 레인 전체 54 → 42px — 그만큼 종단 그래프가 세로를 더 씀

검증: 실화면 레인 42px·알약 22px, 이름표(찰쌓기·배수관·옹벽·세월교) 모두 읽힘.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-06 19:28:44 +09:00
co-authored by Claude Opus 5
parent 1136fff0ea
commit d057e64e9f
2 changed files with 18 additions and 16 deletions
@@ -27,10 +27,11 @@ import { formatStation } from "./B05_Profile_Util_Station";
* 고르려다 옮겨지는 일이 잦았다(2026-08-19 사용자 보고 — 민감도 완화). */ * 고르려다 옮겨지는 일이 잦았다(2026-08-19 사용자 보고 — 민감도 완화). */
const GRAB_SLACK_PX = 14; const GRAB_SLACK_PX = 14;
/** 겹쳐 두 줄로 갈릴 때의 알약 높이(px) — 레인 높이를 정하는 값이다. */ /** 겹쳐 두 줄로 갈릴 때의 알약 높이(px) — 레인 높이를 정하는 값이다. */
const PILL_HEIGHT_PX = 24; /** 알약 높이(px) — 2026-09-06 사용자: 「너무 커서 높이를 많이 차지함」. 24 → 18 로 낮춰
/** 혼자 있는(가운데 한 줄) 알약 높이(px) — 자리가 남으니 30%만 키운다 * 레인이 54 → 42px 가 되고 그만큼 그래프가 넓게 쓴다. 글자는 10px 로 함께 줄인다(CSS). */
* (2026-08-17 사용자 지시 1: 32px는 과했다). */ const PILL_HEIGHT_PX = 18;
const SOLO_PILL_HEIGHT_PX = 31; /** 혼자 있는(가운데 한 줄) 알약 높이(px) — 겹칠 때보다 조금만 크게(옛 31 → 22). */
const SOLO_PILL_HEIGHT_PX = 22;
/** 두 줄 사이 간격(px). */ /** 두 줄 사이 간격(px). */
const ROW_GAP_PX = 2; const ROW_GAP_PX = 2;
/** 레인 위아래 여백(px) — 그래프를 밀어내되 여유는 최소로. */ /** 레인 위아래 여백(px) — 그래프를 밀어내되 여유는 최소로. */
+13 -12
View File
@@ -41,17 +41,18 @@
pointer-events: none; pointer-events: none;
} }
/* 알약 — 종류를 3자 이하 이름으로 보여 준다. 높이는 구 서클마크와 같은 20px. */ /* 알약 — 종류를 3자 이하 이름으로 보여 준다. 2026-09-06 사용자 지시로 한 단 낮췄다
(높이 24 → 18, 글자 11 → 10) — 그래프가 그만큼 세로를 더 쓴다. */
.b05-structure__mark { .b05-structure__mark {
position: absolute; position: absolute;
transform: translateX(-50%); transform: translateX(-50%);
height: 24px; height: 18px;
min-width: 24px; min-width: 18px;
padding: 0 9px; padding: 0 7px;
border-radius: 12px; border-radius: 9px;
border: 1.5px solid currentColor; border: 1.5px solid currentColor;
background: var(--color-surface, #fff); background: var(--color-surface, #fff);
font-size: 11px; font-size: 10px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
@@ -62,13 +63,13 @@
justify-content: center; justify-content: center;
} }
/* 혼자 있는 알약 — 겹치는 알약보다 30%만 키운다(2026-08-17 사용자 지시 1). */ /* 혼자 있는 알약 — 겹치는 알약보다 조금만 키운다(옛 31px 는 과했다, 2026-09-06). */
.b05-structure__mark.is-solo { .b05-structure__mark.is-solo {
height: 31px; height: 22px;
min-width: 31px; min-width: 22px;
padding: 0 12px; padding: 0 9px;
border-radius: 16px; border-radius: 11px;
font-size: 12px; font-size: 11px;
} }
.b05-structure__mark:hover { .b05-structure__mark:hover {