feat: strengthen design skill and refresh all showcases

apps/site/public/work/saebyeok-cheonggwa/styles/main.css

@@ -83,6 +83,14 @@ h3 {
   margin-inline: auto;
 }
 
+/* 넓은 화면에서는 시세판과 산지 정보에만 여유를 준다. 문장 길이는 기존
+   measure 제한을 그대로 유지해 거래판의 밀도만 개선한다. */
+@media (min-width: 120rem) {
+  .wrap {
+    width: min(100% - 2 * var(--pad-inline), var(--container-wide));
+  }
+}
+
 /* ── 두 체제 ────────────────────────────────────────────────────── */
 .band-light {
   --band-surface: var(--surface);
@@ -290,12 +298,12 @@ h3 {
 
 .board th:first-child,
 .board td:first-child {
-  padding-left: 0;
+  padding-left: var(--space-2);
 }
 
 .board th:last-child,
 .board td:last-child {
-  padding-right: 0;
+  padding-right: var(--space-2);
 }
 
 .board thead th {
@@ -313,6 +321,7 @@ h3 {
 
 .board-select {
   min-height: 40px;
+  padding-inline: var(--space-2);
   border: 0;
   background: transparent;
   color: inherit;
@@ -341,7 +350,7 @@ h3 {
 
 .unit {
   margin-left: 2px;
-  color: var(--band-ink-faint);
+  color: var(--band-ink-muted);
   font-size: 0.85em;
 }
 
@@ -641,7 +650,7 @@ h3 {
 .season th,
 .season td {
   border: 1px solid var(--band-line);
-  padding: var(--space-2) 0;
+  padding: var(--space-2) var(--space-1);
 }
 
 .season thead th {
@@ -653,15 +662,16 @@ h3 {
 
 .season tbody th {
   text-align: left;
-  padding-inline: 0 var(--space-3);
+  padding-inline: var(--space-2) var(--space-3);
   border-left: 0;
   white-space: nowrap;
   font-weight: 500;
 }
 
-.season-item {
+.season .season-item {
   text-align: left;
   width: 6rem;
+  padding-inline: var(--space-2);
 }
 
 .season td.on {
@@ -951,6 +961,79 @@ h3 {
 }
 
 /* ── 좁은 화면 ──────────────────────────────────────────────────── */
+/* 사진은 시장의 시간대를, 불투명한 종이 표면은 숫자의 기준선을 맡는다. */
+.market-board-surface {
+  position: relative;
+  z-index: 1;
+  padding-block: var(--space-5) var(--space-7);
+  background: var(--surface);
+  color: var(--ink);
+  box-shadow: 0 -1px 0 var(--line), 0 24px 64px rgb(0 0 0 / 14%);
+}
+
+.market-board-head {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--line-strong);
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+}
+
+.market-board-head p:first-child {
+  color: var(--accent);
+}
+
+.market-board-scroll {
+  overflow-x: auto;
+}
+
+.market-board-surface .board {
+  margin-top: var(--space-3);
+}
+
+.market-board-surface .board th,
+.market-board-surface .board td {
+  border-color: var(--line);
+}
+
+.market-board-surface .board thead th,
+.market-board-surface .board td,
+.market-board-surface .board-notes li,
+.market-board-surface .lot-title p:last-child,
+.market-board-surface .lot-spec dt {
+  color: var(--ink-muted);
+}
+
+.market-board-surface .board tbody th,
+.market-board-surface .price,
+.market-board-surface .lot-spec dd,
+.market-board-surface .board-notes strong {
+  color: var(--ink);
+}
+
+.market-board-surface .board-select[aria-pressed="true"],
+.market-board-surface .lot-inspector-head p:last-child {
+  color: var(--accent);
+}
+
+.market-board-surface .unit,
+.market-board-surface .lot-inspector-head p:first-child {
+  color: var(--ink);
+}
+
+.market-board-surface .board tbody tr:has(.board-select[aria-pressed="true"]) {
+  background: var(--accent-wash);
+  box-shadow: inset 2px 0 var(--accent);
+}
+
+.market-board-surface .lot-inspector,
+.market-board-surface .lot-inspector-head,
+.market-board-surface .note-demo {
+  border-color: var(--line-strong);
+}
+
 @media (max-width: 720px) {
   .head-inner {
     flex-wrap: wrap;
@@ -973,6 +1056,15 @@ h3 {
 
   /* 판은 일곱 칸이라 좁은 화면에서 표로 두면 못 읽는다.
      행마다 라벨을 붙인 카드로 접는다 — 가로 스크롤로 미루지 않는다 */
+  .market-board-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .market-board-scroll {
+    overflow: visible;
+  }
+
   .board thead {
     display: none;
   }
@@ -992,7 +1084,7 @@ h3 {
 
   .board tbody th {
     font-size: var(--step-1);
-    padding: 0;
+    padding-inline: var(--space-2);
     border: 0;
   }
 
@@ -1001,7 +1093,7 @@ h3 {
   }
 
   .board td {
-    padding: var(--space-1) 0;
+    padding: var(--space-1) var(--space-2);
     border: 0;
     text-align: left;
     display: flex;
@@ -1009,6 +1101,10 @@ h3 {
     gap: var(--space-3);
   }
 
+  .board td:last-child {
+    padding-right: var(--space-2);
+  }
+
   .board td::before {
     content: attr(data-label);
     color: var(--band-ink-faint);