feat(B06): 알림 칩 둥근 사각 · 내용 칸 카드 위 겹침 · 고르면 접힘 · 고른 측점 강조(207-1)

- 칩 반경 = 공용 단추 반경(--radius-buttons) · 알약 아님
- 측점 목록 칸 = 고정 줄 아래 absolute(그림자 · 배경) — 열고 닫아도 페이지 · 카드 안 밀림
- 목록 측점 누르면 그 카드로 가며 칸 접힘
- 고른 측점(selectedStationId)이 목록에 있으면 열 때 그 단추 강조(카드 고름 색)
- 새 시험 test_207_1 · test_196_1 기대값 고침

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01STqEqztUthVFBmEP18wBSz
This commit is contained in:
2026-10-10 14:40:46 +09:00
co-authored by Claude Opus 5.5
parent e6d8229e91
commit 1114f408fd
6 changed files with 160 additions and 12 deletions
+22 -4
View File
@@ -172,9 +172,10 @@
}
.b06-section__notice-chip {
padding: 0 var(--spacing-8);
padding: 2px var(--spacing-8);
border: 1px solid currentColor;
border-radius: var(--radius-sm);
/* 둥근 사각(207-1) — 공용 단추 반경 · 알약 아님 */
border-radius: var(--radius-buttons);
background: transparent;
color: var(--color-warning);
font-size: var(--text-caption);
@@ -193,14 +194,24 @@
font-weight: 600;
}
/* 내용 칸 하나(누른 칩의 측점 목록) — 길면 줄 안에서 스크롤 · 고정 줄이 카드 칸을 다 덮지 않게 */
/* 내용 칸 하나(누른 칩의 측점 목록) — 길면 칸 안에서 스크롤 · 고정 줄이 카드 칸을 다 덮지 않게.
207-1 — 줄 아래 카드 위에 겹쳐 뜸(흐름 밖) · 열고 닫아도 줄 높이 · 카드 자리 그대로 */
.b06-section__notice-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4);
max-height: 30vh;
overflow: auto;
padding-top: var(--spacing-4);
padding: var(--spacing-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-cards);
background: var(--color-surface-raised);
box-shadow: var(--shadow-lg);
color: var(--color-warning);
}
@@ -213,6 +224,13 @@
white-space: nowrap;
}
/* 지금 고른 측점(207-1) — 카드 고름 색과 같음 */
.b06-section__notice-list > button.is-selected {
outline: 2px solid var(--color-danger);
outline-offset: -1px;
font-weight: 600;
}
.b06-cross-card {
cursor: pointer;
transition: