[DONE] Lab 머리줄 규칙 22개가 여럿이 쓰는 CSS 에서 dock 틀 CSS 로 간다

web/src/app/pattern-lab/HardwareModal.module.css

@@ -1,5 +1,6 @@
 /* ── HardwareModal: its own classes ─────────────────────────────────────────
-   Moved out of PatternLab.module.css on 2026-09; only this file uses them. */
+   Moved out of PatternLab.module.css on 2026-09, and .darkButton on
+   2026-10-25; only this file uses them. */
 
 /* ── Hardware flow (HardwareModal) ─────────────────────────────────────
    The paste boxes are where the actual work lands, so they read as code:
@@ -111,3 +112,9 @@
   font-family: var(--font-jetbrains), monospace;
   font-size: 11px;
 }
+
+.darkButton {
+  background: #171512 !important;
+  color: #f7f3ea !important;
+  border-color: #171512 !important;
+}

web/src/app/pattern-lab/HardwareModal.tsx

@@ -370,7 +370,7 @@ export default function HardwareModal({
                 </button>
                 <button
                   type="button"
-                  className={styles.darkButton}
+                  className={local.darkButton}
                   disabled={!canContinue}
                   title={
                     canContinue
@@ -407,7 +407,7 @@ export default function HardwareModal({
                 {buildsConfigured() && (
                   <button
                     type="button"
-                    className={styles.darkButton}
+                    className={local.darkButton}
                     title="Install it as a loadable module over Wi-Fi — no reflash, no USB"
                     onClick={() => setSendOpen(true)}
                   >

web/src/app/pattern-lab/LabPanels.module.css

@@ -1,5 +1,5 @@
 /* ── Layered lab: dock header + panel chrome ─────────────────────────────────
-   The dock with its header menus, and the chrome every panel shares. A
+   The dock with its header and menus, and the chrome every panel shares. A
    panel's own classes go in panels/<Panel>.module.css, as Layers' did on
    2026-10-25; the Preview, Pixel, Ramp and Knobs rules below are still here.
    Modal styles are in PatternLab.module.css. */
@@ -59,6 +59,177 @@
   }
 }
 
+/* ── Header: brand, piece name, save state, nav ──
+   Only the shell (PatternLabClient) reads these. They were in
+   PatternLab.module.css until 2026-10-25. */
+.labBrand {
+  color: inherit;
+  font-size: 15px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.labBrand:hover {
+  opacity: 0.8;
+  text-decoration: none;
+}
+
+.labTitle {
+  font-size: 12px;
+  font-weight: 600;
+  color: #8c8577;
+  letter-spacing: 0.01em;
+}
+
+.projectIdentity {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  min-width: 0;
+}
+
+.projectMeta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  max-width: 100%;
+  min-height: 17px;
+}
+
+.labName {
+  width: 100%;
+  min-width: 0;
+  padding: 3px 8px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: #171512;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-align: center;
+}
+
+.labName::placeholder {
+  color: #9a9486;
+  font-weight: 400;
+}
+
+.labName:hover {
+  background: rgba(255, 253, 248, 0.7);
+  border-color: rgba(23, 21, 18, 0.18);
+}
+
+.labName:focus {
+  outline: 2px solid #9b4827;
+  outline-offset: 1px;
+  background: #fffdf8;
+}
+
+.labNav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.labNav a {
+  color: #6b655a;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.labNav a:hover {
+  color: #171512;
+}
+
+.labNav a:focus-visible {
+  outline: 2px solid #9b4827;
+  outline-offset: 2px;
+}
+
+.saveStatus {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #6b655a;
+  font-size: 11px;
+  line-height: 17px;
+  white-space: nowrap;
+}
+
+.saveDot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #68826b;
+  flex: none;
+}
+
+.saveStatus[data-state="pending"] .saveDot,
+.saveStatus[data-state="idle"] .saveDot {
+  background: #a58a56;
+}
+
+.saveStatus[data-state="error"] {
+  color: #b42318;
+}
+
+.saveStatus[data-state="error"] .saveDot {
+  background: currentColor;
+}
+
+/* Under the header, when a save or a park fails. */
+.storageNotice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border: 1px solid #b42318;
+  background: #fff4f2;
+  color: #8f1c13;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.storageNotice > span {
+  flex: 1 1 280px;
+}
+
+/* ── Community fork badge ── */
+.forkBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: #925035;
+  font-size: 11px;
+}
+
+.forkBadge > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.forkBadge button {
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  color: inherit;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  flex: none;
+}
+
 .dockHost {
   flex: 1 1 auto;
   min-height: 0;