diff --git a/B06_Section/B06_Section_UI_Style.css b/B06_Section/B06_Section_UI_Style.css index 23696df7..506236ed 100644 --- a/B06_Section/B06_Section_UI_Style.css +++ b/B06_Section/B06_Section_UI_Style.css @@ -56,18 +56,39 @@ color: var(--color-text); } -/* 입력 한 칸 + 버튼을 한 줄로(횡단 보기 설정). 버튼은 입력 아래 선에 맞춘다. */ +/* 라벨·입력·버튼을 **한 줄**로 세운다(횡단 보기 설정, 2026-08-23 사용자 지시). + ui-field는 기본이 세로(라벨 위·입력 아래·그 아래 오류 슬롯)라 그대로 두면 버튼이 + 오류 슬롯 높이만큼 밀려 수평이 안 맞는다 — 이 줄에서만 가로로 눕히고 오류 슬롯을 접는다. */ .b06-profile__field-row { display: flex; - align-items: flex-end; + align-items: center; gap: var(--spacing-8); } -.b06-profile__field-row > *:first-child { +.b06-profile__field-row > .ui-field { + display: flex; + flex: 1 1 auto; + flex-direction: row; + align-items: center; + gap: var(--spacing-8); + min-width: 0; +} + +.b06-profile__field-row .ui-field__label { + flex: 0 0 auto; + margin: 0; + white-space: nowrap; +} + +.b06-profile__field-row .ui-input { flex: 1 1 auto; min-width: 0; } +.b06-profile__field-row .ui-field__error { + display: none; +} + .b06-profile__field-row > .ui-btn { flex: 0 0 auto; }