feat: strengthen design skill and refresh all showcases

apps/site/public/work/thursday-flowers/styles/main.css

@@ -1,4 +1,4 @@
-@import url("./tokens.css");
+@import url("./tokens.css?v=20260912all");
 
 /* ────────────────────────────────────────────────────────
    리셋 — 필요한 것만
@@ -141,6 +141,9 @@ h3 + * {
 .section {
   padding-block: var(--space-8);
 }
+.section[id] {
+  scroll-margin-top: 5rem;
+}
 
 /* 가로 정보 라벨. 여백은 글자를 세우지 않고도 충분히 구분된다. */
 .hero-role,
@@ -252,6 +255,7 @@ h3 + * {
 }
 .nav {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--space-4);
   font-size: var(--step-label);
   font-weight: var(--weight-bold);
@@ -267,31 +271,26 @@ h3 + * {
   color: var(--ink);
 }
 
-/* ── 히어로 ───────────────────────────────────────────
-   리스크를 감수한 자리다. 큰 사진 한 장 대신 셋을 흩뿌린다.
-
-   그리드를 12칸으로 두되 각 사진이 **서로 다른 칸에서 시작해 다른 칸에서 끝난다.**
-   R1 을 실측했더니 이미지 6개의 좌측 정렬선이 6개 전부 달랐다(117·173·188·433·588·948).
-   정렬선이 하나로 모이는 순간 이 레이아웃은 그냥 어긋난 그리드가 된다. */
+/* ── 히어로 ─────────────────────────────────────────── */
 .hero {
   padding-block: var(--space-6) var(--space-8);
 }
 
-/* 12칸 그리드에 grid-row 를 손으로 배치했더니 행 높이가 콘텐츠에 따라
-   285/195/88/266px 로 제각각 잡히고 사이에 빈 칸이 생겼다.
-   글과 사진을 두 덩어리로 나누고, **사진 안에서만** 흩뿌린다.
-   그래야 정렬선을 흩는 것과 빈 공간이 생기는 것이 분리된다. */
 .hero-inner {
   display: grid;
-  /* 텍스트 칼럼이 좁으면 h1 이 3줄로 접힌다(카운트 규칙: 헤드라인 2줄 이하).
-     정보 라벨이 왼쪽에서 자리를 먹으므로 그만큼 더 준다. */
-  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
-  gap: var(--space-5);
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: var(--space-7);
   align-items: center;
 }
+.hero-inner > *,
+.two > *,
+.gallery > *,
+.visit-inner > * {
+  min-width: 0;
+}
 .hero-text {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-5);
   align-items: start;
 }
@@ -300,52 +299,49 @@ h3 + * {
 }
 .hero-role {
   align-self: start;
+  white-space: normal;
 }
 .hero-cta {
   justify-self: start;
 }
 
-/* 사진 셋. 위치·크기·비율이 전부 다르고 서로 겹친다.
-   R1 실측에서 이미지 6개의 좌측 정렬선이 6개 전부 달랐다 —
-   정렬선이 하나로 모이면 이 레이아웃은 그냥 어긋난 그리드가 된다. */
 .hero-photos {
-  position: relative;
-  /* 가장 아래 사진(.ph-c)이 63% 에서 시작해 폭 47%·4:3 이므로 약 0.99 에서 끝난다.
-     컨테이너를 그보다 길게 잡으면 히어로 아래에 빈 띠가 남는다. */
-  aspect-ratio: 1 / 0.995;
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--space-3) var(--space-4);
+  align-items: start;
 }
 .ph {
-  position: absolute;
   margin: 0;
-  overflow: hidden;
 }
 .ph img {
+  display: block;
   width: 100%;
-  height: 100%;
+  height: auto;
   object-fit: cover;
 }
+.ph figcaption {
+  margin-top: var(--space-2);
+  color: var(--ink-muted);
+  font-size: var(--step-label);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--track-label);
+}
 .ph-a {
-  left: 16%;
-  top: 0;
-  width: 60%;
-  aspect-ratio: 3 / 4;
+  grid-column: 1 / 9;
+  grid-row: 1 / span 2;
 }
 .ph-b {
-  left: 0;
-  top: 52%;
-  width: 27%;
-  aspect-ratio: 3 / 4;
+  grid-column: 9 / -1;
+  grid-row: 1;
 }
 .ph-c {
-  right: 0;
-  top: 63%;
-  width: 47%;
-  aspect-ratio: 4 / 3;
+  grid-column: 9 / -1;
+  grid-row: 2;
 }
 .hero-tags {
-  position: absolute;
-  right: -1.4rem;
-  top: 4%;
+  grid-column: 1 / -1;
+  margin-top: var(--space-2);
 }
 
 /* ── 섹션 공통 ────────────────────────────────────── */
@@ -406,8 +402,7 @@ h3 + * {
   margin: 0;
 }
 
-/* ── 작업 갤러리 ──────────────────────────────────────
-   균일한 3열 그리드를 쓰지 않는다. 셋의 크기와 세로 위치가 전부 다르다. */
+/* ── 작업 갤러리 ────────────────────────────────────── */
 .gallery {
   margin-top: var(--space-7);
   display: grid;
@@ -430,21 +425,21 @@ h3 + * {
   color: var(--ink-muted);
 }
 .g-1 {
-  grid-column: 1 / 9;
+  grid-column: 1 / 8;
 }
 .g-1 img {
   aspect-ratio: 16 / 9;
 }
 .g-2 {
-  grid-column: 9 / 13;
-  margin-top: var(--space-7);
+  grid-column: 8 / 13;
+  margin-top: 0;
 }
 .g-2 img {
   aspect-ratio: 3 / 4;
 }
 .g-3 {
-  grid-column: 3 / 10;
-  margin-top: var(--space-5);
+  grid-column: 8 / 13;
+  margin-top: var(--space-2);
 }
 .g-3 img {
   aspect-ratio: 4 / 3;
@@ -494,7 +489,8 @@ h3 + * {
   max-width: 24ch;
 }
 .visit-mark {
-  color: var(--line);
+  /* 장식이라도 실제 문장이므로 배경선 색을 그대로 쓰지 않는다. */
+  color: var(--ink-muted);
   font-family: var(--font-display);
   font-size: 1rem;
   letter-spacing: 0.2em;
@@ -526,7 +522,17 @@ h3 + * {
     display: none;
   }
   .hero-photos {
-    aspect-ratio: 1 / 0.9;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .ph-a,
+  .ph-b,
+  .ph-c,
+  .hero-tags {
+    grid-column: auto;
+    grid-row: auto;
+  }
+  .ph-a {
+    grid-column: 1 / -1;
   }
   .visit-mark {
     max-width: 100%;
@@ -574,7 +580,7 @@ h3 + * {
     display: inline;
   }
   .nav {
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     justify-content: space-between;
     gap: var(--space-2);
     letter-spacing: 0.04em;
@@ -586,20 +592,12 @@ h3 + * {
     padding-inline: var(--space-4);
     white-space: nowrap;
   }
-  /* 히어로 사진 셋을 세로로 세우면 화면이 너무 길어진다.
-     가장 작은 것 하나만 남기고 나머지는 갤러리에서 다시 보여준다. */
   .hero-photos {
-    aspect-ratio: 3 / 4;
-  }
-  .ph-b {
-    display: none;
-  }
-  .ph-a {
-    left: 0;
-    width: 78%;
-  }
-  .ph-c {
-    top: 58%;
-    width: 62%;
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
   }
+  .ph-a,
+  .ph-b,
+  .ph-c,
+  .hero-tags { grid-column: 1; }
 }