From bec9c5e5a64191bbd8e7ab1a188a8904a73ce991 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Sat, 30 May 2026 08:33:15 +0900
Subject: [PATCH] =?UTF-8?q?ui(vacation):=20=EB=8B=AC=EB=A0=A5=20=EB=82=A0?=
 =?UTF-8?q?=EC=A7=9C=20=EC=A0=95=EC=82=AC=EA=B0=81=ED=98=95=20=EC=85=80=20?=
 =?UTF-8?q?+=20=ED=81=B0=20=EA=B8=80=EC=9E=90=20+=20=EC=95=88=EC=AA=BD=20?=
 =?UTF-8?q?=ED=85=8C=EB=91=90=EB=A6=AC=20+=20bar=20=EC=98=A4=EB=B2=84?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../vacation/templates/vacation/detail.html   |  2 +-
 .../vacation/templates/vacation/form.html     |  4 +-
 .../vacation/templates/vacation/index.html    | 51 ++++++++++---------
 .../vacation/templates/vacation/pending.html  |  2 +-
 .../vacation/templates/vacation/settings.html |  2 +-
 app/static/vacation.css                       | 48 +++++++++--------
 6 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/app/modules/vacation/templates/vacation/detail.html b/app/modules/vacation/templates/vacation/detail.html
index da8fdfb..e5e7860 100644
--- a/app/modules/vacation/templates/vacation/detail.html
+++ b/app/modules/vacation/templates/vacation/detail.html
@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
 
 {% block content %}
 <section class="vac">
diff --git a/app/modules/vacation/templates/vacation/form.html b/app/modules/vacation/templates/vacation/form.html
index 211a9d1..ddd15e9 100644
--- a/app/modules/vacation/templates/vacation/form.html
+++ b/app/modules/vacation/templates/vacation/form.html
@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
 
 {% block content %}
 <section class="vac">
@@ -68,4 +68,4 @@
 </section>
 {% endblock %}
 
-{% block scripts %}<script src="/static/vacation.js?v=20260530a" defer></script>{% endblock %}
+{% block scripts %}<script src="/static/vacation.js?v=20260530b" defer></script>{% endblock %}
diff --git a/app/modules/vacation/templates/vacation/index.html b/app/modules/vacation/templates/vacation/index.html
index 59df9f5..0f6ca15 100644
--- a/app/modules/vacation/templates/vacation/index.html
+++ b/app/modules/vacation/templates/vacation/index.html
@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
 
 {% block content %}
 <section class="vac">
@@ -49,30 +49,33 @@
         </div>
 
         {% for week in weeks %}
-        <div class="vac-week" style="--lanes: {{ week.lane_count }}">
-          {% for cell in week.days %}
-          <a class="vac-day
-                    {% if not cell.in_month %}vac-out{% endif %}
-                    {% if cell.is_today %}vac-today{% endif %}
-                    {% if cell.is_selected %}vac-selected{% endif %}"
-             style="grid-column: {{ loop.index }}; grid-row: 1;"
-             href="/vacation/?year={{ year }}&month={{ month }}&date={{ cell.date }}"
-             {% if cell.holiday_name %}title="{{ cell.holiday_name }}"{% endif %}>
-            <span class="vac-day-num
-                         {% if cell.is_sunday or cell.is_holiday %}vac-red{% elif cell.is_saturday %}vac-blue{% endif %}">{{ cell.day }}</span>
-          </a>
-          {% endfor %}
+        <div class="vac-week">
+          <div class="vac-week-days">
+            {% for cell in week.days %}
+            <a class="vac-day
+                      {% if not cell.in_month %}vac-out{% endif %}
+                      {% if cell.is_today %}vac-today{% endif %}
+                      {% if cell.is_selected %}vac-selected{% endif %}"
+               href="/vacation/?year={{ year }}&month={{ month }}&date={{ cell.date }}"
+               {% if cell.holiday_name %}title="{{ cell.holiday_name }}"{% endif %}>
+              <span class="vac-day-num
+                           {% if cell.is_sunday or cell.is_holiday %}vac-red{% elif cell.is_saturday %}vac-blue{% endif %}">{{ cell.day }}</span>
+            </a>
+            {% endfor %}
+          </div>
 
-          {% for bar in week.bars %}
-          <a class="vac-bar {{ bar.status_class }}
-                    {% if bar.continues_left %}vac-bar-l{% endif %}
-                    {% if bar.continues_right %}vac-bar-r{% endif %}"
-             style="grid-column: {{ bar.start_col + 1 }} / span {{ bar.span }}; grid-row: {{ bar.lane + 2 }};"
-             href="/vacation/{{ bar.id }}"
-             title="{{ bar.label }} ({{ bar.days }}일 · {{ bar.status }})">
-            <span class="vac-bar-label">{{ bar.label }}</span>
-          </a>
-          {% endfor %}
+          <div class="vac-week-bars">
+            {% for bar in week.bars %}
+            <a class="vac-bar {{ bar.status_class }}
+                      {% if bar.continues_left %}vac-bar-l{% endif %}
+                      {% if bar.continues_right %}vac-bar-r{% endif %}"
+               style="grid-column: {{ bar.start_col + 1 }} / span {{ bar.span }}; grid-row: {{ bar.lane + 1 }};"
+               href="/vacation/{{ bar.id }}"
+               title="{{ bar.label }} ({{ bar.days }}일 · {{ bar.status }})">
+              <span class="vac-bar-label">{{ bar.label }}</span>
+            </a>
+            {% endfor %}
+          </div>
         </div>
         {% endfor %}
       </div>
diff --git a/app/modules/vacation/templates/vacation/pending.html b/app/modules/vacation/templates/vacation/pending.html
index 703e6ec..5b7df35 100644
--- a/app/modules/vacation/templates/vacation/pending.html
+++ b/app/modules/vacation/templates/vacation/pending.html
@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
 
 {% block content %}
 <section class="vac">
diff --git a/app/modules/vacation/templates/vacation/settings.html b/app/modules/vacation/templates/vacation/settings.html
index 29200ce..a73a2fb 100644
--- a/app/modules/vacation/templates/vacation/settings.html
+++ b/app/modules/vacation/templates/vacation/settings.html
@@ -1,6 +1,6 @@
 {% extends "erp_base.html" %}
 
-{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530a" />{% endblock %}
+{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530b" />{% endblock %}
 
 {% block content %}
 <section class="vac">
diff --git a/app/static/vacation.css b/app/static/vacation.css
index 61babd3..16e9059 100644
--- a/app/static/vacation.css
+++ b/app/static/vacation.css
@@ -57,46 +57,52 @@
   background: var(--vac-ghost); border-bottom: 1px solid var(--vac-ash);
 }
 .vac-wd {
-  text-align: center; padding: 6px 0; font-size: 13px; font-weight: 500;
+  text-align: center; padding: 8px 0; font-size: 15px; font-weight: 600;
   color: var(--vac-black);
+  border-right: 1px solid var(--vac-ash);
 }
+.vac-wd:last-child { border-right: none; }
 
-/* 주(week) — 1행=날짜, 2행+=bar lane */
-.vac-week {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  grid-template-rows: 30px;
-  grid-auto-rows: 21px;
-  border-bottom: 1px solid var(--vac-ash);
-  padding-bottom: 4px;
-  position: relative;
-}
+/* 주(week) — 정사각형 날짜 셀 위에 bar 레이어를 오버레이 */
+.vac-week { position: relative; border-bottom: 1px solid var(--vac-ash); }
 .vac-week:last-child { border-bottom: none; }
 
-.vac-day {
-  border-right: 1px solid var(--vac-ash);
-  padding: 4px 6px; text-decoration: none;
-  display: block; min-height: 30px;
+.vac-week-days {
+  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
 }
-.vac-day:nth-child(7n) { border-right: none; }
-.vac-day-num { font-size: 13px; font-weight: 500; color: var(--vac-black); }
+.vac-day {
+  aspect-ratio: 1 / 1;            /* 정사각형 */
+  border-right: 1px solid var(--vac-ash);
+  padding: 6px 8px; text-decoration: none;
+  display: block; box-sizing: border-box;
+}
+.vac-day:last-child { border-right: none; }
+.vac-day-num { font-size: 16px; font-weight: 600; color: var(--vac-black); }
 .vac-out { background: #fafafa; }
 .vac-out .vac-day-num { color: #bbb; }
 .vac-today { background: #f5f5f5; }
 .vac-today .vac-day-num {
   background: var(--vac-black); color: #fff; border-radius: 9999px;
-  padding: 1px 7px;
+  padding: 2px 9px;
 }
 .vac-selected { box-shadow: inset 0 0 0 2px var(--vac-black); }
 .vac-red { color: var(--vac-red) !important; }
 .vac-blue { color: var(--vac-blue) !important; }
 
+/* bar 오버레이 — 날짜 숫자 아래(top)부터 7열 그리드로 겹쳐 그림 */
+.vac-week-bars {
+  position: absolute; left: 0; right: 0; top: 30px; bottom: 4px;
+  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
+  grid-auto-rows: 22px; row-gap: 3px;
+  pointer-events: none;
+}
+
 /* ── 휴가 bar (구글 달력 스타일) ── */
 .vac-bar {
-  margin: 1px 3px; padding: 0 6px; height: 18px; line-height: 18px;
-  border-radius: 6px; font-size: 11px; text-decoration: none;
+  margin: 0 3px; padding: 0 8px; height: 20px; line-height: 20px;
+  border-radius: 6px; font-size: 13px; text-decoration: none;
   overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-  align-self: center;
+  align-self: center; pointer-events: auto;
 }
 .vac-bar-label { pointer-events: none; }
 .vac-bar-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }