diff --git a/B07_DesignDetail/B07_DesignDetail_UI_Style.css b/B07_DesignDetail/B07_DesignDetail_UI_Style.css
index db3eca1fa..0a8c0ef65 100644
--- a/B07_DesignDetail/B07_DesignDetail_UI_Style.css
+++ b/B07_DesignDetail/B07_DesignDetail_UI_Style.css
@@ -357,9 +357,10 @@ html.is-bm-route .b07-cad-stack > .cad-tabs {
   padding-block: 2px;
 }
 
-/* ⚙ 설정 모달(280-5 · 523-1) — 공용 모달 폭 절반 · 그룹 상자 · 맨 아래 단추 줄 하나 */
+/* ⚙ 설정 모달(280-5 · 523-1) — 공용 모달 폭 절반 · 그룹 상자 · 맨 아래 단추 줄 하나
+   폭 400 = 가장 긴 제목 「토적도(유토곡선) 설정」 + [원본에서 다시 그리기] · [닫기] 한 줄(557-1) */
 .ui-modal.b07-settings {
-  width: min(360px, 92vw);
+  width: min(400px, 92vw);
 }
 
 /* 좁은 폭 — 제목 · 머리 단추 한 줄(줄바꿈 없음) */
diff --git a/B07_DesignDetail/openwebcad/src/App.css b/B07_DesignDetail/openwebcad/src/App.css
index 994e1d59c..bff47f1b1 100644
--- a/B07_DesignDetail/openwebcad/src/App.css
+++ b/B07_DesignDetail/openwebcad/src/App.css
@@ -185,6 +185,10 @@ body > canvas[data-id="canvas"] {
 	min-width: 170px;
 	max-height: 72vh;
 }
+/* 리본(position: fixed)이 쌓임 맥락이라 메뉴 z 가 그 안에 갇힘 — 메뉴 연 동안 리본을 왼쪽 판(3) 위로(557-1) */
+.cad-ribbon:has(.cad-ribbon-overflow) {
+	z-index: 10;
+}
 .cad-ribbon-overflow > .ui-ctx-menu__item {
 	display: flex;
 	gap: 8px;
@@ -203,6 +207,15 @@ body > canvas[data-id="canvas"] {
 	align-items: stretch;
 	justify-content: flex-start;
 }
+/* 한 줄에 칸 둘(557-1 · 문자 스타일) — 뒤 칸 라벨은 글 폭만 */
+.cad-prop-row {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+.cad-prop-row > .cad-prop + .cad-prop > span {
+	width: auto;
+}
 /* 위젯 패널은 한 줄에 라벨+입력을 놓고 세로로 쌓는다 (리본 높이 안에 들어가야 한다) */
 .cad-prop {
 	display: flex;
diff --git a/B07_DesignDetail/openwebcad/src/components/RibbonWidgets.tsx b/B07_DesignDetail/openwebcad/src/components/RibbonWidgets.tsx
index 11555c878..d72152fe7 100644
--- a/B07_DesignDetail/openwebcad/src/components/RibbonWidgets.tsx
+++ b/B07_DesignDetail/openwebcad/src/components/RibbonWidgets.tsx
@@ -157,43 +157,48 @@ export const TextStyleWidget: FC = () => {
 					))}
 				</select>
 			</label>
-			<label className="cad-prop" title="문자 높이">
-				<span>크기</span>
-				<input
-					type="number"
-					min={4}
-					max={120}
-					value={textStyle.fontSize}
-					onChange={(event) => {
-						const size = Number(event.target.value);
-						if (Number.isFinite(size) && size > 0) handle({ fontSize: size });
-					}}
-				/>
-			</label>
-			<label className="cad-prop" title="굵게">
-				<span>굵게</span>
-				<input
-					type="checkbox"
-					checked={textStyle.bold}
-					onChange={(event) => handle({ bold: event.target.checked })}
-				/>
-			</label>
-			<label className="cad-prop" title="기울임">
-				<span>기울임</span>
-				<input
-					type="checkbox"
-					checked={textStyle.italic}
-					onChange={(event) => handle({ italic: event.target.checked })}
-				/>
-			</label>
-			<label className="cad-prop" title="문자 색상">
-				<span>색상</span>
-				<input
-					type="color"
-					value={textStyle.textColor}
-					onChange={(event) => handle({ textColor: event.target.value }, true)}
-				/>
-			</label>
+			{/* 칸 다섯 = 세 줄(리본 높이 66 안 · 557-1) — 글꼴 / 크기 · 색상 / 굵게 · 기울임 */}
+			<div className="cad-prop-row">
+				<label className="cad-prop" title="문자 높이">
+					<span>크기</span>
+					<input
+						type="number"
+						min={4}
+						max={120}
+						value={textStyle.fontSize}
+						onChange={(event) => {
+							const size = Number(event.target.value);
+							if (Number.isFinite(size) && size > 0) handle({ fontSize: size });
+						}}
+					/>
+				</label>
+				<label className="cad-prop" title="문자 색상">
+					<span>색상</span>
+					<input
+						type="color"
+						value={textStyle.textColor}
+						onChange={(event) => handle({ textColor: event.target.value }, true)}
+					/>
+				</label>
+			</div>
+			<div className="cad-prop-row">
+				<label className="cad-prop" title="굵게">
+					<span>굵게</span>
+					<input
+						type="checkbox"
+						checked={textStyle.bold}
+						onChange={(event) => handle({ bold: event.target.checked })}
+					/>
+				</label>
+				<label className="cad-prop" title="기울임">
+					<span>기울임</span>
+					<input
+						type="checkbox"
+						checked={textStyle.italic}
+						onChange={(event) => handle({ italic: event.target.checked })}
+					/>
+				</label>
+			</div>
 		</div>
 	);
 };
diff --git a/resources/tester/test_557_1_b07_cad_fixes.py b/resources/tester/test_557_1_b07_cad_fixes.py
new file mode 100644
index 000000000..2cd028475
--- /dev/null
+++ b/resources/tester/test_557_1_b07_cad_fixes.py
@@ -0,0 +1,32 @@
+"""557-1 B07 · CAD 작은 흠 — 화면 없이 소스로 지킴.
+
+⚙ 설정 모달 폭 400(토적도 제목 · 머리 단추 한 줄) · 리본 문자 스타일 칸 다섯 = 세 줄(리본 높이 안) ·
+넘침 메뉴 연 동안 리본이 왼쪽 판(z 3) 위.
+"""
+
+import re
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+CAD = ROOT / "B07_DesignDetail" / "openwebcad" / "src"
+
+
+def test_settings_modal_width():
+    css = (ROOT / "B07_DesignDetail" / "B07_DesignDetail_UI_Style.css").read_text("utf-8")
+    assert re.search(r"\.ui-modal\.b07-settings \{\s*width: min\(400px, 92vw\);", css)
+
+
+def test_text_style_three_rows():
+    src = (CAD / "components" / "RibbonWidgets.tsx").read_text("utf-8")
+    widget = src[src.index("export const TextStyleWidget") :]
+    assert widget.count('className="cad-prop-row"') == 2
+    assert (
+        widget.count("cad-prop") - widget.count("cad-prop-row") == 6
+    )  # 글꼴(--wide 포함 2) + 칸 넷
+
+
+def test_overflow_menu_above_inspector():
+    css = (CAD / "App.css").read_text("utf-8")
+    z = re.search(r"\.cad-ribbon:has\(\.cad-ribbon-overflow\) \{\s*z-index: (\d+);", css)
+    inspector = re.search(r"\.cad-inspector \{[^}]*z-index: (\d+);", css)
+    assert z and inspector and int(z.group(1)) > int(inspector.group(1))