ui(vacation): 달력 날짜 정사각형 셀 + 큰 글자 + 안쪽 테두리 + bar 오버레이

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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">

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 %}

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,31 +49,34 @@
         </div>
 
         {% for week in weeks %}
-        <div class="vac-week" style="--lanes: {{ week.lane_count }}">
+        <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 %}"
-             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>
 
+          <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 + 2 }};"
+               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>
 

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">

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">

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 */
+/* 주(week) — 정사각형 날짜 셀 위에 bar 레이어를 오버레이 */
-.vac-week {
+.vac-week { position: relative; border-bottom: 1px solid var(--vac-ash); }
-  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;
-}
 .vac-week:last-child { border-bottom: none; }
 
-.vac-day {
+.vac-week-days {
-  border-right: 1px solid var(--vac-ash);
+  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
-  padding: 4px 6px; text-decoration: none;
-  display: block; min-height: 30px;
 }
-.vac-day:nth-child(7n) { border-right: none; }
+.vac-day {
-.vac-day-num { font-size: 13px; font-weight: 500; color: var(--vac-black); }
+  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;
+  margin: 0 3px; padding: 0 8px; height: 20px; line-height: 20px;
-  border-radius: 6px; font-size: 11px; text-decoration: none;
+  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; }