릴리스: v1.3.84 모바일 열 배지 위치 및 헤더 정리

docs/history.md

@@ -2,6 +2,7 @@
 
 ## 2026-04-02 v1.3.83
 - 모바일에서 열 헤더가 칸과 시각적으로 분리되는 문제는 전체 레이아웃을 다시 갈아엎기보다, 각 칸 안에 열 이름 배지를 같이 보여주는 편이 가장 적은 변경으로 효과를 낸다고 정리했다.
+- 배지를 쓰는 반응형 구간에서는 기존 상단 열 헤더까지 남겨두면 중복 정보가 되므로, 같은 브레이크포인트에서 헤더는 숨기고 칸 배지 하나만 남기는 편이 맞다고 정리했다.
 
 ## 2026-04-02 v1.3.82
 - 프리뷰 완성본도 결국 공유/열람용 결과물이므로, 이미지 다운로드 결과와 같은 작성자/저장 시각 메타를 같이 보여주는 편이 자연스럽다고 정리했다.

docs/todo.md

@@ -2,6 +2,7 @@
 
 ## 단기 확인
 - 티어표 편집/프리뷰 모바일 열 배지는 새로 붙였으므로, 실제 좁은 화면에서 칸 상단 배지와 아이템 썸네일이 겹치지 않고 열 구분이 자연스러운지 한 번 더 QA한다.
+- 모바일 열 배지는 같은 구간에서 상단 열 제목을 숨기도록 다시 맞췄으므로, 720px 안팎뿐 아니라 980px 이하 전 구간에서 중복 표기 없이 자연스러운지 한 번 더 QA한다.
 - 프리뷰 완성본 하단 메타는 새로 붙였으므로, 작성자/저장 시각이 공개 열람 화면과 이미지 다운로드 결과 기준에서 모두 자연스럽게 읽히는지 한 번 더 QA한다.
 - 관리자 템플릿 요청 카드는 썸네일 클릭이 새창 열기 역할로 바뀌었으므로, 썸네일 클릭과 `확인하기` 액션이 서로 헷갈리지 않는지 한 번 더 QA한다.
 - 티어표 만들기 화면의 `공유하기`는 저장된 티어표에서만 노출되므로, 저장 직후/수정 중/복사본/읽기 전용 상태 각각에서 노출 조건과 클립보드 복사가 자연스러운지 한 번 더 QA한다.

docs/update.md

@@ -3,6 +3,7 @@
 ## 2026-04-02 v1.3.83
 - 티어표 편집/프리뷰 화면에서 열을 여러 개 쓰는 경우, 모바일처럼 좁은 화면에서는 기존 상단 열 헤더만으로 각 칸의 의미를 읽기 어려웠으므로 각 칸 상단에 작은 열 이름 배지를 추가함.
 - 이 배지는 모바일 구간에서만 보이고 데스크톱 레이아웃은 그대로 유지되므로, 작은 화면에서는 `메인 / 밸런스 / 서포트` 같은 열 맥락을 스크롤 중에도 잃지 않게 정리함.
+- 이후 배지가 칸 기준이 아니라 화면 한쪽에 겹치던 문제를 바로잡기 위해 각 칸을 기준점으로 다시 잡았고, 배지가 보이는 구간에서는 기존 상단 열 제목을 함께 숨겨 중복 표기를 제거함.
 
 ## 2026-04-02 v1.3.82
 - 프리뷰 전용 완성본 화면에도 이미지 다운로드 결과와 같은 하단 메타를 붙여, 작성자 이름과 마지막 저장 시각을 바로 확인할 수 있게 정리함.

frontend/src/views/TierEditorView.vue

@@ -1509,6 +1509,7 @@ onUnmounted(() => {
   border: 1px solid var(--theme-border-strong);
 }
 .previewOnly__drop {
+  position: relative;
   border-radius: 14px;
   background: var(--theme-pill-bg);
   border: 1px solid var(--theme-border);
@@ -2497,6 +2498,44 @@ onUnmounted(() => {
   border-radius: 14px;
 }
 @media (max-width: 980px) {
+  .previewOnly__columns,
+  .previewOnly__row,
+  .boardColumnsHeader,
+  .row {
+    grid-template-columns: 1fr;
+  }
+  .previewOnly__columnsSpacer,
+  .boardColumnsHeader__spacer {
+    display: none;
+  }
+  .previewOnly__dropGrid,
+  .boardColumnsHeader__grid {
+    grid-template-columns: 1fr;
+  }
+  .previewOnly__drop,
+  .row__drop {
+    padding-top: 40px;
+  }
+  .previewOnly__columnBadge,
+  .row__columnBadge {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    display: inline-flex;
+    align-items: center;
+    max-width: calc(100% - 20px);
+    padding: 5px 10px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--theme-text-soft);
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .previewOnly__row {
     grid-template-columns: 140px 1fr;
   }
@@ -2540,44 +2579,6 @@ onUnmounted(() => {
   .previewOnly {
     padding: 14px;
   }
-  .previewOnly__columns,
-  .previewOnly__row,
-  .boardColumnsHeader,
-  .row {
-    grid-template-columns: 1fr;
-  }
-  .previewOnly__columnsSpacer,
-  .boardColumnsHeader__spacer {
-    display: none;
-  }
-  .previewOnly__dropGrid,
-  .boardColumnsHeader__grid {
-    grid-template-columns: 1fr;
-  }
-  .previewOnly__drop,
-  .row__drop {
-    padding-top: 40px;
-  }
-  .previewOnly__columnBadge,
-  .row__columnBadge {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    display: inline-flex;
-    align-items: center;
-    max-width: calc(100% - 20px);
-    padding: 5px 10px;
-    border-radius: 999px;
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    background: rgba(255, 255, 255, 0.08);
-    color: var(--theme-text-soft);
-    font-size: 11px;
-    font-weight: 800;
-    line-height: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
   .pool {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }