Merge remote-tracking branch 'origin/dev' into sub_laptop_3

ui_template/ui_template_map_tools.ts

@@ -31,7 +31,6 @@ export const MAP_TOOLS = {
   footprint: { icon: "road", title: "절/성토선", toggle: true },
   measure: { icon: "ruler", title: "거리 재기", toggle: true },
   "station-snap": { icon: "magnet", title: "측점 스냅", toggle: true },
-  "year-mark": { icon: "flag", title: "연도 구역 마커 — 선 위로 끌어 놓기" },
 } satisfies Record<string, { icon: IconName; title: string; toggle?: boolean }>;
 
 export type MapToolAct = keyof typeof MAP_TOOLS;

ui_template/ui_template_palette.ts

@@ -50,3 +50,16 @@ export function pointColor(index: number): string {
   const [name, fallback] = POINT_COLORS[index % POINT_COLORS.length];
   return themeColor(name, fallback);
 }
+
+/** 600-1 예정노선 선마다 차례 색 — 다섯 차례 돌림 · 지도 전용 값(테마 안 따름 · 겹 색과 가름) · 지도 선 · 구역 목록 색 띠가 같은 번호 같은 색 */
+const ROUTE_COLORS = [
+  ["--draw-map-route-0", "#3df5c4"],
+  ["--draw-map-route-1", "#5aa9ff"],
+  ["--draw-map-route-2", "#c58bff"],
+  ["--draw-map-route-3", "#ff6ea8"],
+  ["--draw-map-route-4", "#9dff4d"],
+] as const;
+export function routeColor(index: number): string {
+  const [name, fallback] = ROUTE_COLORS[((index % 5) + 5) % 5];
+  return themeColor(name, fallback);
+}

ui_template/ui_template_segment.css

@@ -48,6 +48,19 @@
   cursor: not-allowed;
 }
 
+/* 여러 줄(columns) — 칸 사이 1px 틈에 틀 색 바탕이 보여 줄 · 칸 나눔선 */
+.ui-segment[data-columns] {
+  display: grid;
+  grid-template-columns: repeat(var(--ui-segment-columns), 1fr);
+  gap: 1px;
+  height: auto;
+  background: var(--color-border);
+}
+.ui-segment[data-columns] > .ui-segment__item {
+  height: var(--ui-size-h);
+  border-left: 0;
+}
+
 /* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
 :is(.ui-segment, .ui-segment__item)[hidden] {
   display: none !important;

ui_template/ui_template_segment.ts

@@ -4,6 +4,7 @@
  *
  *   꼴   = 글 · 아이콘(+ title) · 글 + 아이콘
  *   크기 = data-size 20 · 24 · 28 · 32(기본 28)
+ *   줄   = 한 줄(기본) · `columns: 2` = 2 × 2 처럼 여러 줄 칸(긴 이름 넷 · 599-1 D03 긋기 방식)
  *   상태 = 마우스 `:hover` · 눌림 `:active` · 막힘 `disabled` · 고름 = aria-checked — CSS 는 `[data-state]` 로도 받음
  *   쓰기 = `createSegment({ options: [{ value: "list", label: "목록" }, { value: "card", label: "카드" }], value: "list", onChange })`
  *   대신 = B01 `.b01-sys-seg` · `.b01-home__seg` · `.b01-proj-seg` · B04 `b04-surface__sheet-method` · B05 `b05-routerec__pills` ·
@@ -37,12 +38,18 @@ export function createSegment(opts: {
   /** 20 · 24 · 28 · 32 권함 */
   size?: UiSize;
   ariaLabel?: string;
+  /** 한 줄 칸 수 — 넘으면 다음 줄(없음 = 한 줄) */
+  columns?: number;
 }): SegmentHandle {
   const root = document.createElement("div");
   root.className = "ui-segment";
   root.setAttribute("role", "radiogroup");
   if (opts.ariaLabel) root.setAttribute("aria-label", opts.ariaLabel);
   setUiSize(root, opts.size ?? 28);
+  if (opts.columns) {
+    root.dataset.columns = String(opts.columns);
+    root.style.setProperty("--ui-segment-columns", String(opts.columns));
+  }
   let current = opts.value;
   const items = opts.options.map((o) => {
     const b = document.createElement("button");

ui_template/ui_template_theme.css

@@ -585,6 +585,14 @@ html.is-bm-route .m01lab-src__body * {
   --draw-map-zero-order: #7dd3fc; /* 0차곡(지형 추정 골짜기 머리 · 점선) */
   --draw-map-forest-road-file: #ea580c; /* 올린 임도망도(실선 · 짐작 = 주황 점선) */
   --draw-map-landslide-zone: #e11d48; /* 산사태취약지역 점 · 필지 테두리 */
+  --draw-map-sketch: #ffe94d; /* 지도 위 그림(테마 안 따름 · 검은 테와 함께) — 긋기 미리보기 · 그리는 선 · 고름 강조 · 마커 */
+  --draw-map-measure: #ffffff; /* 거리재기 */
+  --draw-map-warn: #ff5a4d; /* 긋기 막힘(경고) */
+  --draw-map-route-0: #3df5c4; /* 예정노선 선마다 차례 색(개발제한 · 산사태 주황과 가름) */
+  --draw-map-route-1: #5aa9ff;
+  --draw-map-route-2: #c58bff;
+  --draw-map-route-3: #ff6ea8;
+  --draw-map-route-4: #9dff4d;
 }
 
 :root[data-theme="dark"] {