From 64b8f556c030e3d49227d73ab1500ded02dc6e18 Mon Sep 17 00:00:00 2001
From: Hyojin Ahn <hyojin.ahn@greenoilinc.com>
Date: Thu, 11 Dec 2025 12:02:30 -0500
Subject: [PATCH] [Customer] Changed filter css for Tablet mode

---
 public_html/doc/customer_list.php | 37 ++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/public_html/doc/customer_list.php b/public_html/doc/customer_list.php
index 5afbe36..8795408 100644
--- a/public_html/doc/customer_list.php
+++ b/public_html/doc/customer_list.php
@@ -660,16 +660,18 @@ $(document).ready(function(){
 <style>
 .cstatus-segment,
 .cistop-segment {
-    display: inline-flex;
+    display: flex;              /* inline-flex 말고 flex 로 */
     border: 1px solid #ccc;
     border-radius: 10px;
     overflow: hidden;
 }
 
+/* 라벨 전체가 버튼처럼 동작 + 같은 너비 */
 .cstatus-segment label,
 .cistop-segment label {
     margin: 0;
     cursor: pointer;
+    flex: 1 1 0;                /* 3개 버튼을 동일 너비로 나눔 */
 }
 
 .cstatus-segment input[type="radio"],
@@ -679,8 +681,9 @@ $(document).ready(function(){
 
 .cstatus-segment span,
 .cistop-segment span {
-    display: inline-block;
-    padding: 8px 23px;
+    display: block;
+    text-align: center;
+    padding: 8px 0;             /* 좌우 padding 빼고, 너비는 flex가 담당 */
     background: #e7e7e7;
     color: #333;
     font-weight: 500;
@@ -692,6 +695,7 @@ $(document).ready(function(){
     color: #333;
 }
 
+/* 가로일 때 border-radius (좌우) */
 .cstatus-segment label:first-child span,
 .cistop-segment label:first-child span {
     border-radius: 5px 0 0 5px;
@@ -702,4 +706,31 @@ $(document).ready(function(){
     border-radius: 0 5px 5px 0;
 }
 
+/* 모바일. 너비는 나중에 조절 */
+@media (max-width: 768px) {  
+  .cstatus-segment,
+  .cistop-segment {
+      flex-direction: column;  /* 세로로 쌓기 */
+      width: 100%;             /* td 안에서 꽉 차게 */
+  }
+
+  .cstatus-segment label,
+  .cistop-segment label {
+      flex: 1 0 auto;
+      width: 100%;             /* 각 버튼이 컨테이너 전체 너비 사용 */
+  }
+
+  /* 세로일 때 border-radius (위/아래) 다시 정의 */
+  .cstatus-segment label:first-child span,
+  .cistop-segment label:first-child span {
+      border-radius: 5px 5px 0 0;
+  }
+
+  .cstatus-segment label:last-child span,
+  .cistop-segment label:last-child span {
+      border-radius: 0 0 5px 5px;
+  }
+}
+
+
 </style>
\ No newline at end of file