feat: 한국어 우선 쇼케이스 정리

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

@@ -142,16 +142,13 @@ h3 + * {
   padding-block: var(--space-8);
 }
 
-/* 세로로 세운 글자. R1 이 여백을 이렇게 쓴다 —
-   가로 공간을 먹지 않으면서 빈 곳에 정보를 흘려 넣는다. */
-.vertical {
-  writing-mode: vertical-rl;
+/* 가로 정보 라벨. 여백은 글자를 세우지 않고도 충분히 구분된다. */
+.hero-role,
+.hero-tags,
+.visit-mark {
   font-size: var(--step-label);
   font-weight: var(--weight-bold);
-  /* 가로쓰기 라벨의 자간(0.14em)을 그대로 쓰면 안 된다.
-     세로쓰기에서 자간은 **글자 사이 세로 간격**이 되어 낱글자가 흩어진다.
-     한글은 자소가 모여 한 글자라 특히 심하다. */
-  letter-spacing: 0.02em;
+  letter-spacing: 0.08em;
   color: var(--ink-faint);
   white-space: nowrap;
 }
@@ -287,7 +284,7 @@ h3 + * {
 .hero-inner {
   display: grid;
   /* 텍스트 칼럼이 좁으면 h1 이 3줄로 접힌다(카운트 규칙: 헤드라인 2줄 이하).
-     세로 라벨이 왼쪽에서 자리를 먹으므로 그만큼 더 준다. */
+     정보 라벨이 왼쪽에서 자리를 먹으므로 그만큼 더 준다. */
   grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
   gap: var(--space-5);
   align-items: center;
@@ -515,14 +512,14 @@ h3 + * {
     gap: var(--space-6);
   }
   /* 여기가 실제 사고 지점이었다. .hero-text 가 `auto 1fr` 2칸인데
-     세로 라벨을 가로로 눕히자 그 긴 문장이 auto 칸을 통째로 먹어
+     정보 라벨이 긴 문장을 차지하자 auto 칸을 통째로 먹어
      h1 칸이 짜부라졌다 — 390px 에서 헤드라인이 6줄, 320px 에서 11줄이 됐다. */
   .hero-text {
     grid-template-columns: 1fr;
     gap: var(--space-4);
   }
   .hero-role {
-    writing-mode: horizontal-tb;
+    max-width: 100%;
   }
   /* 히어로의 텍스트 요소는 넷을 넘지 않는다(카운트 규칙) */
   .hero-tags {
@@ -532,7 +529,7 @@ h3 + * {
     aspect-ratio: 1 / 0.9;
   }
   .visit-mark {
-    writing-mode: horizontal-tb;
+    max-width: 100%;
   }
 
   .two,