From d057e64e9f1bd156ddc006b41230c43491ed0fbb Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sun, 6 Sep 2026 19:28:44 +0900 Subject: [PATCH] =?UTF-8?q?style(B05):=20=EA=B5=AC=EC=A1=B0=EB=AC=BC=20?= =?UTF-8?q?=EC=95=8C=EC=95=BD=EC=9D=84=20=ED=95=9C=20=EB=8B=A8=20=EB=82=AE?= =?UTF-8?q?=EC=B6=B0=20=EC=A2=85=EB=8B=A8=20=EA=B7=B8=EB=9E=98=ED=94=84=20?= =?UTF-8?q?=EC=9E=90=EB=A6=AC=20=ED=99=95=EB=B3=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 사용자 지시(2026-09-06): 구조물 표시가 너무 커서 높이를 많이 차지함. - 알약 높이 24 → 18px, 혼자 있을 때 31 → 22px, 글자 11 → 10px - 레인 전체 54 → 42px — 그만큼 종단 그래프가 세로를 더 씀 검증: 실화면 레인 42px·알약 22px, 이름표(찰쌓기·배수관·옹벽·세월교) 모두 읽힘. Co-Authored-By: Claude Opus 5 (1M context) --- .../B05_Profile_UI_Structures_Marks.ts | 9 ++++--- .../B05_Profile_UI_Style_Structures.css | 25 ++++++++++--------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/B05_Profile/B05_Profile_UI_Structures_Marks.ts b/B05_Profile/B05_Profile_UI_Structures_Marks.ts index 9f4c4bb7..1505a056 100644 --- a/B05_Profile/B05_Profile_UI_Structures_Marks.ts +++ b/B05_Profile/B05_Profile_UI_Structures_Marks.ts @@ -27,10 +27,11 @@ import { formatStation } from "./B05_Profile_Util_Station"; * 고르려다 옮겨지는 일이 잦았다(2026-08-19 사용자 보고 — 민감도 완화). */ const GRAB_SLACK_PX = 14; /** 겹쳐 두 줄로 갈릴 때의 알약 높이(px) — 레인 높이를 정하는 값이다. */ -const PILL_HEIGHT_PX = 24; -/** 혼자 있는(가운데 한 줄) 알약 높이(px) — 자리가 남으니 30%만 키운다 - * (2026-08-17 사용자 지시 1: 32px는 과했다). */ -const SOLO_PILL_HEIGHT_PX = 31; +/** 알약 높이(px) — 2026-09-06 사용자: 「너무 커서 높이를 많이 차지함」. 24 → 18 로 낮춰 + * 레인이 54 → 42px 가 되고 그만큼 그래프가 넓게 쓴다. 글자는 10px 로 함께 줄인다(CSS). */ +const PILL_HEIGHT_PX = 18; +/** 혼자 있는(가운데 한 줄) 알약 높이(px) — 겹칠 때보다 조금만 크게(옛 31 → 22). */ +const SOLO_PILL_HEIGHT_PX = 22; /** 두 줄 사이 간격(px). */ const ROW_GAP_PX = 2; /** 레인 위아래 여백(px) — 그래프를 밀어내되 여유는 최소로. */ diff --git a/B05_Profile/B05_Profile_UI_Style_Structures.css b/B05_Profile/B05_Profile_UI_Style_Structures.css index 762147d4..0097f181 100644 --- a/B05_Profile/B05_Profile_UI_Style_Structures.css +++ b/B05_Profile/B05_Profile_UI_Style_Structures.css @@ -41,17 +41,18 @@ pointer-events: none; } -/* 알약 — 종류를 3자 이하 이름으로 보여 준다. 높이는 구 서클마크와 같은 20px. */ +/* 알약 — 종류를 3자 이하 이름으로 보여 준다. 2026-09-06 사용자 지시로 한 단 낮췄다 + (높이 24 → 18, 글자 11 → 10) — 그래프가 그만큼 세로를 더 쓴다. */ .b05-structure__mark { position: absolute; transform: translateX(-50%); - height: 24px; - min-width: 24px; - padding: 0 9px; - border-radius: 12px; + height: 18px; + min-width: 18px; + padding: 0 7px; + border-radius: 9px; border: 1.5px solid currentColor; background: var(--color-surface, #fff); - font-size: 11px; + font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; @@ -62,13 +63,13 @@ justify-content: center; } -/* 혼자 있는 알약 — 겹치는 알약보다 30%만 키운다(2026-08-17 사용자 지시 1). */ +/* 혼자 있는 알약 — 겹치는 알약보다 조금만 키운다(옛 31px 는 과했다, 2026-09-06). */ .b05-structure__mark.is-solo { - height: 31px; - min-width: 31px; - padding: 0 12px; - border-radius: 16px; - font-size: 12px; + height: 22px; + min-width: 22px; + padding: 0 9px; + border-radius: 11px; + font-size: 11px; } .b05-structure__mark:hover {