From 2fbcd3b200f46ba1444d60dca1cf1c014b51da74 Mon Sep 17 00:00:00 2001
From: Hyojin Ahn <djhyoja@gmail.com>
Date: Thu, 9 Jul 2026 12:28:48 -0400
Subject: [PATCH] =?UTF-8?q?v1.4.4=20-=20[CUSTOMER]=20access=20time=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=EB=B0=A9=EC=8B=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(=EC=B6=94=EA=B0=80=20=EC=88=98=EC=A0=95).?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/customer_access_time_popup.php        | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/public_html/lib/customer_access_time_popup.php b/public_html/lib/customer_access_time_popup.php
index d31cae7..b29b527 100644
--- a/public_html/lib/customer_access_time_popup.php
+++ b/public_html/lib/customer_access_time_popup.php
@@ -133,6 +133,15 @@ $existingJson = json_encode($existing, JSON_UNESCAPED_UNICODE);
   .slrow.end.off .endlbl { color: #999; }
   .endlbl input { width: 18px; height: 18px; flex: none; cursor: pointer; accent-color: #d9932f; }
 
+  /* hour tick ruler under each slider */
+  .ticks-row { display: flex; align-items: flex-start; gap: 10px; margin: -3px 0 4px; }
+  .tkspace-l { width: 66px; flex: none; }
+  .tkspace-r { width: 54px; flex: none; }
+  .ticks { position: relative; flex: 1; min-width: 60px; height: 16px; margin: 0 8px; }
+  .tick { position: absolute; top: 0; width: 1px; height: 5px; background: #cbd9c4; transform: translateX(-0.5px); }
+  .tick.major { height: 8px; background: #a7c295; }
+  .ticklab { position: absolute; top: 7px; font-size: 9px; color: #96ab88; transform: translateX(-50%); white-space: nowrap; }
+
   .ed-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
   .ed-line input.note { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; flex: 1; min-width: 90px; }
 
@@ -183,6 +192,7 @@ $existingJson = json_encode($existing, JSON_UNESCAPED_UNICODE);
     <input type="range" id="openR">
     <span class="sltime" id="openT">09:00</span>
   </div>
+  <div class="ticks-row"><span class="tkspace-l"></span><div class="ticks" id="ticksOpen"></div><span class="tkspace-r"></span></div>
   <div class="slrow end off" id="endRow">
     <label class="endlbl"><span>End</span><input type="checkbox" id="endChk"></label>
     <input type="range" id="closeR">
@@ -268,6 +278,24 @@ $existingJson = json_encode($existing, JSON_UNESCAPED_UNICODE);
   [openR, closeR].forEach(function (r) { r.min = DAY_MIN; r.max = DAY_MAX; r.step = STEP; });
   openR.value = DEF_OPEN; closeR.value = DEF_CLOSE; endChk.checked = false;
 
+  // hour tick ruler (a mark + label every hour); shown once under Start, guides both sliders
+  function buildTicks(el) {
+    const startH = DAY_MIN / 60, endH = DAY_MAX / 60, span = endH - startH;
+    for (let h = startH; h <= endH; h++) {
+      const pct = ((h - startH) / span) * 100;
+      const t = document.createElement('span');
+      t.className = 'tick major';
+      t.style.left = pct + '%';
+      el.appendChild(t);
+      const l = document.createElement('span');
+      l.className = 'ticklab';
+      l.style.left = pct + '%';
+      l.textContent = h;
+      el.appendChild(l);
+    }
+  }
+  buildTicks(document.getElementById('ticksOpen'));
+
   function paintEditor() {
     openT.textContent = minToStr(+openR.value);
     if (endChk.checked) {