diff --git a/B06_Section/B06_Section_UI_Style_Cross.css b/B06_Section/B06_Section_UI_Style_Cross.css index 494c58df0..6bd6c56e3 100644 --- a/B06_Section/B06_Section_UI_Style_Cross.css +++ b/B06_Section/B06_Section_UI_Style_Cross.css @@ -124,7 +124,8 @@ } /* 알림 줄(138-3) — 카드 칸 맨 위 고정 · 알림 없어도 줄 유지 · 오른쪽 끝 열 수 칸. - 위 여백(카드 칸 padding)만큼 끌어올려 그 틈으로 카드가 비치지 않게 */ + 위 여백(카드 칸 padding)만큼 끌어올려 그 틈으로 카드가 비치지 않게. + 217-1 — 칩 줄 위 여백 16→8 · 칩 줄 ↔ 첫 카드 28→16(카드 칸 gap 24 에서 8 을 당김) */ .b06-section__notice-bar { position: sticky; top: calc(-1 * var(--spacing-16)); @@ -132,8 +133,8 @@ display: flex; align-items: flex-start; gap: var(--spacing-8); - margin-top: calc(-1 * var(--spacing-16)); - padding-block: var(--spacing-16) var(--spacing-4); + margin-block: calc(-1 * var(--spacing-16)) calc(-1 * var(--spacing-8)); + padding-block: var(--spacing-8) 0; background: var(--color-bg); } diff --git a/resources/tester/test_217_1_b06_notice_spacing.py b/resources/tester/test_217_1_b06_notice_spacing.py new file mode 100644 index 000000000..e15d8ef74 --- /dev/null +++ b/resources/tester/test_217_1_b06_notice_spacing.py @@ -0,0 +1,30 @@ +"""217-1 B06 알림 칩 줄 여백 줄임 — 줄 위 여백 16→8 · 칩 줄 ↔ 첫 카드 28→16 (CSS 값 고정).""" + +from test_196_1_b06_notice_chips import B06 + +CSS = (B06 / "B06_Section_UI_Style_Cross.css").read_text(encoding="utf-8") + + +def _rule(selector: str) -> str: + body = CSS[CSS.index(selector + " {") :] + return body[: body.index("}")] + + +def test_칩_줄_위_여백은_8_아래_여백은_0(): + bar = _rule(".b06-section__notice-bar") + assert "padding-block: var(--spacing-8) 0;" in bar + assert "spacing-16) var(--spacing-4)" not in bar + + +def test_첫_카드와의_간격은_카드_칸_gap_24에서_8을_당겨_16(): + bar = _rule(".b06-section__notice-bar") + # 위 = 카드 칸 padding(16) 상쇄 · 아래 = gap(24) 중 8 당김 + assert "margin-block: calc(-1 * var(--spacing-16)) calc(-1 * var(--spacing-8));" in bar + assert "gap: var(--spacing-24)" in _rule(".b06-section__cards") + + +def test_sticky_top_과_scroll_margin_그대로(): + bar = _rule(".b06-section__notice-bar") + assert "position: sticky" in bar + assert "top: calc(-1 * var(--spacing-16))" in bar + assert "scroll-margin-top: calc(var(--b06-notice-h, 0px) + var(--spacing-8))" in CSS