feat(B05): 노선 추천 정리 — 알약 다섯 한 줄 · 종단은 갈래가 정함 · 오른쪽 위 [적용]/[닫기] · 지도 안 옵션 겹창 · 추천 토량에 곡선부 확폭(77)

- 알약 = 예상노선 추적(종단 없음) · 영선 · 토공 최소 · 기울기 최소 · 비중 계산(넷은 종단 늘 반영) · 안전 우선 · 계류 횡단 최소 · 공사비 어림 최소 화면에서 뺌
- 「종단 반영」 켬/끔 단추 없앰(추천 창 · 종단 띠) — 띠 · [확인]은 지금 추천 갈래로 종단 여부
- ✕ 없애고 [적용] · [닫기]를 제목줄 오른쪽 위로 · 옵션 칸은 지도 왼쪽 위 작은 겹창 · 창 폭 넓힘
- 적용한 추천 갈래가 있으면 창을 다시 열 때 그 갈래가 골라진 채
- 도움말: 종단 반영 = 측점마다 횡단을 보고 정한 종단(적분값 아님)
- 균형 종단 단면적에 곡선부 확폭(B05 측점 생성과 같은 셈) — 빼서 확정 뒤 성토가 1.7배 벌어졌음(노선 267 같은 계획고: 성 10,102 → 17,819 · 본 설계 16,140)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019EMfGERKUg5nMMNQsyVZ2j

B05_Profile/B05_Profile_UI_Style_RouteRecommend.css

@@ -14,9 +14,9 @@
   z-index: calc(var(--z-modal, 1000) + 2);
 }
 
-/* 오른쪽 설명 칸(계획서 48-2)만큼 넓힘 — 왼쪽 기존 칸은 예전 폭 그대로. */
+/* 오른쪽 설명 칸(계획서 48-2) · 옵션 칸을 지도 안으로 옮긴 만큼 지도를 넓힘(PLAN 77-4). */
 .ui-modal.b05-routerec {
-  width: min(1320px, 96vw);
+  width: min(1560px, 97vw);
   --modal-max: 92vh;
   font-size: var(--text-body-sm);
 }
@@ -166,11 +166,10 @@
   }
 }
 
-/* 알약 — 하나만 고른 상태(라디오 묶음). */
-/* 여덟 알약 — 네 칸 두 줄로 고르게(좁은 폭은 두 칸 네 줄). */
+/* 알약 — 하나만 고른 상태(라디오 묶음). 다섯 알약 한 줄(좁은 폭은 두 칸 · PLAN 77-1). */
 .b05-routerec__pills {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: var(--spacing-8);
 }
 
@@ -212,32 +211,10 @@
   font-weight: 600;
 }
 
-/* 갈래 알약 오른쪽 「종단 반영」 켬/끔 — 알약과 같은 모양 · 켬은 테두리 · 글자만 강조(고른 갈래와 갈림). */
-.b05-routerec__pillrow {
+/* 제목줄 오른쪽 위 [적용] · [닫기](공용 겉틀 닫기 단추 자리 · PLAN 77-3). */
+.b05-routerec__actions {
   display: flex;
   gap: var(--spacing-8);
-  align-items: center;
-}
-
-.b05-routerec__pillrow > .b05-routerec__pills {
-  flex: 1;
-  min-width: 0;
-}
-
-.b05-routerec__profile-toggle {
-  flex: none;
-  padding-inline: var(--spacing-12);
-}
-
-.b05-routerec__profile-toggle[aria-pressed="true"] {
-  border-color: var(--color-primary);
-  box-shadow: inset 0 0 0 1px var(--color-primary);
-  color: var(--color-primary);
-  font-weight: 600;
-}
-
-.b05-routerec__profile-toggle[aria-pressed="true"]::before {
-  content: "✓ ";
 }
 
 .b05-routerec__pill:disabled {
@@ -247,7 +224,7 @@
 
 .b05-routerec__main {
   display: grid;
-  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--spacing-12);
   align-items: start;
 }
@@ -261,7 +238,7 @@
 /* 미리 보기 지도 — 캔버스 칸(높이 고정). 회전 단추는 편집 창 것(`.b05-routeedit__spin`)과 같은 모양. */
 .b05-routerec__mapwrap {
   position: relative;
-  height: 380px;
+  height: 460px;
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-8, 6px);
@@ -309,12 +286,25 @@
   border-top: 3px solid var(--color-primary);
 }
 
+/* 옵션 겹창 — 지도 왼쪽 위 작은 칸(회전 단추는 오른쪽 위 · PLAN 77-4). 지도 끌기를 막지 않게 제 칸만. */
 .b05-routerec__side {
+  position: absolute;
+  top: var(--spacing-8);
+  left: var(--spacing-8);
+  z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-12);
+  gap: var(--spacing-8);
+  width: 232px;
+  max-height: calc(100% - 2 * var(--spacing-8));
+  overflow: auto;
+  padding: var(--spacing-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-8, 6px);
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  box-shadow: var(--shadow-sm, 0 2px 6px rgb(0 0 0 / 0.15));
   color: var(--color-text-body);
-  font-size: var(--text-body-sm);
+  font-size: var(--text-caption);
 }
 
 /* 비중 — 세로 막대 셋이 나란히(값 위 · 이름 아래). 슬라이더가 세로로 선다. */
@@ -343,7 +333,7 @@
 
 .b05-routerec__bar input[type="range"] {
   width: 28px;
-  height: 130px;
+  height: 90px;
   margin: 0;
   writing-mode: vertical-lr;
   direction: rtl; /* 위로 올릴수록 큰 값 */
@@ -505,7 +495,7 @@
   }
 
   .b05-routerec__mapwrap {
-    height: 300px;
+    height: 360px;
   }
 }