feat(view): reflect 시안 ① main screen and ⑤ save dialog

- Header follows the mockup: dark bar, project line, stage chips (② shows the
  pending change count), save status, 저장 / 엑셀 불러오기 / 프로젝트 열기 and
  the primary 선택 교각 다시 생성 · 변경 n button.
- Left column: pier list with header row, 선택 n기 bulk bar, 입력값 and the
  2단계 input card. The bottom input panel is gone.
- First save opens 시안 ⑤ (project name, bridge, client, author, 좌표계, memo);
  later Ctrl+S / 저장 write the same file, as the spec's B5 requires.
- Project info (client, author, 좌표계, memo) is kept in the project file.
- Style layer uses the mockup's tokens (#18212B header, #1F5FA8 primary,
  #D5DBE2 borders, #E3EDF8 selected row, JetBrains Mono for numbers).
- Not reflected: ② and ③ screens (not built yet), and the mockup's static
  front preview (the app draws the model in 3D). Not verified in a browser.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>

src/style.css

@@ -595,3 +595,53 @@ table {
 .edit-row input { width: 110px; padding: 4px 6px; border: 1px solid #b9c4d0; border-radius: 4px; }
 .edit-row.changed input { border: 2px solid #e8833a; background: #fff6ee; }
 .edit-row.changed label { color: #a4530e; }
+
+/* ---- 시안 ① 디자인 반영 (RAG/Pierzainer UI 시안 (1).html) ---- */
+body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif; }
+.top { background: #18212b; color: #ffffff; padding: 10px 24px; }
+.top .brand strong { font-size: 18px; letter-spacing: 0.01em; }
+.top .brand > span:not(.proj) { font-size: 12px; color: #b8c2ce; }
+.proj { padding-left: 14px; border-left: 1px solid #33404f; color: #ffffff; font-size: 13px; font-weight: 700; }
+.steps .step { color: #dce3ea; min-height: 44px; padding: 4px 14px; border-radius: 6px; background: transparent; border: 0; }
+.steps .step.current { background: #ffffff; color: #18212b; }
+.steps .step em { font-style: normal; color: #b8c2ce; font-size: 12px; }
+.steps .step.current em { color: #55606e; }
+.steps .step[aria-disabled='true'] em { color: #b8c2ce; }
+.savest { color: #f2c48d; font-size: 12px; }
+.actions { color: #ffffff; }
+.btn-s, .btn-p, .btn-o { display: inline-flex; align-items: center; font-family: inherit; font-size: 13px; min-height: 44px; border-radius: 6px; cursor: pointer; box-sizing: border-box; text-decoration: none; }
+.btn-s { padding: 0 14px; border: 1px solid #8c99a8; background: transparent; color: #ffffff; }
+.btn-s:hover { border-color: #c3cbd4; }
+.btn-s:disabled { opacity: 0.45; cursor: default; }
+.btn-p { padding: 0 16px; border: 0; background: #1f5fa8; color: #ffffff; font-weight: 700; font-size: 14px; }
+.btn-p:hover:not(:disabled) { background: #174c88; }
+.btn-p:disabled { opacity: 0.45; cursor: default; }
+.btn-o { padding: 0 12px; min-height: 40px; border: 1px solid #1f5fa8; background: #ffffff; color: #1f5fa8; }
+.btn-o:hover:not(:disabled) { background: #f2f7fc; color: #123e70; }
+.btn-o:disabled { opacity: 0.45; cursor: default; }
+.lnk { font-size: 12px; color: #1f5fa8; background: none; border: 0; min-height: 36px; padding: 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
+.lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #55606e; margin: 0 0 8px; }
+.panel { background: #ffffff; border: 1px solid #d5dbe2; border-radius: 8px; padding: 16px; }
+.piers { display: flex; flex-direction: column; gap: 6px; }
+.pier-tools { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; }
+.pier-tools select { border: 1px solid #c3cbd4; border-radius: 6px; background: #ffffff; min-height: 36px; }
+.phead { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; padding: 0 10px 6px; font-size: 12px; color: #55606e; border-bottom: 1px solid #d5dbe2; }
+.pier-items li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; border-radius: 6px; padding-right: 6px; }
+.pier-items li:has(.pier-name[aria-pressed='true']) { background: #e3edf8; }
+.pier-name { border: 0; background: transparent; color: #18212b; text-align: left; font-size: 13px; min-height: 44px; padding: 0 6px; }
+.pier-name[aria-pressed='true'] { color: #123e70; font-weight: 700; }
+.badge { font-size: 12px; border-radius: 10px; padding: 2px 8px; background: #e2f2e7; color: #1d6b3a; white-space: nowrap; }
+.badge.error { background: #fde2e2; color: #9b2c2c; }
+.pnote { font-size: 12px; color: #55606e; margin: 8px 4px 0; line-height: 1.6; }
+.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #f2f7fc; font-size: 13px; color: #123e70; }
+.bulk .grow { flex: 1 1 auto; }
+.pier-input { margin-top: 14px; border-top: 1px solid #d5dbe2; padding-top: 12px; }
+.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e6eaef; font-size: 13px; }
+.kv dt { color: #55606e; }
+.kv dd { margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; text-align: right; }
+.views { display: flex; gap: 2px; background: #eef1f4; border-radius: 6px; padding: 2px; }
+.views .btn { min-height: 40px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: #18212b; }
+.views .btn[aria-pressed='true'] { background: #1f5fa8; color: #ffffff; font-weight: 700; }
+.viewer-head { gap: 8px; }
+.edit-card h3 { font-size: 12px; color: #55606e; }
+