/* [[[공통 css]]] */
:root {
  /* font */
  --font-pretendard-jp: "Pretendard JP Variable";
  --font-malang-kr: "MalangmalangR";

  /* margin */
  --side-margin: 20px;

  /* padding */
  --section-padding-1: 20px;
  --inner-padding-1: 12px;

  /* 공통값 */
  --max-width: 93.958vw;
  /* 1804px */

  /* semantic color */
  --label-normal: #171719;
  --label-strong: #000000;
  --label-neutral: #2e2f33;
  --label-alternative: #848588;
  --label-assistive: rgba(55, 56, 60, 0.28);
  --label-disable: rgba(55, 56, 60, 0.16);
  --label-white: #ffffff;

  --primary-orange: #FF5117;
  --primary-green: #189C38;
  --primary-yellow: #FFD900;
  --primary-baige: #FFF1DE;
  --primary-brown: #30231B;

  --background-dark: #282828;
  --background-light: #F2F3F5;
  --background-brown: #40352E;

  --background-unable-btn: #E3E3E3;
  --background-unable-text: #777777;

  --font-gray: #969696;

  --line-normal: rgba(112, 115, 124, 0.22);

  /* 표 */
  --bg:#F5F6F8;
  --line:#E5E7EB;
  --text:#1F2937;
  --muted:#6B7280;
  --card:#FFFFFF;
  --badge:#EEF2FF;
  --badge-text:#4338CA;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:14px;

  /* 라벨 */
  --label-text:#2f5aff;
  --label-bg:#dee8ff;
  --label-text02:#009900;
  --label-bg02:#e9f8da;

  /* pay_list */
  --bg:#f8fafc; 
  --card:#ffffff; 
  --line:#e5e7eb; 
  --text:#111827; 
  --muted:#6b7280; 
  --red:#ef4444;

  /* driver_list */
  --bg:#fff; 
  --surface:#f6f7f9; 
  --text:#111827; 
  --muted:#6b7280;
  --border:#e5e7eb; 
  --accent:#2563eb;
  --radius:14px; 
  --shadow:0 10px 30px rgba(2,6,23,.06);
}

/* *******🚫사용안하는 기능🚫******* */
.notice {display: none !important;}
.footer,
.section_wrap {
  width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
.wrap {
  margin-right:20px;
}
.gnb_btn ul li:nth-child(2) {display: none;}
/* ********************************* */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  border: none;
  outline: none;
  background: transparent;
  word-break: keep-all;
  font-family: var(--font-pretendard-jp), "Pretendard JP Variable", Pretendard,
    -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue",
    "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP",
    "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

html,
body {
  font-weight: 400;
  line-height: 1.25;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-attachment: fixed;
}

html {
  font-size: 62.5%;
}

body {
  width: 100%;
  font-size: 1.6rem;
  background-color: #F2F3F4;
  
}
.body_wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
a {
  color: var(--label-normal);
  text-decoration: none;
}

a,
button {
  -webkit-user-drag: none;
}
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 100px;
  accent-color: var(--primary-orange);
}

textarea.auto-grow{
  width: 100%;
  min-height: 40px;
  line-height: 1.4;
  box-sizing: border-box;
  overflow: hidden;
}
textarea.auto-grow.max-240{
  max-height: 240px;
  overflow: auto;
}
.wrap {
  width: 100%;
}
/******* 알림 팝업창 css*******/
.notice {
  position: sticky;;
  top: 0;
  right: 0;
  width: 340px;
  height: 100vh;
  display: flex;
  justify-content: center;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #FCFCF3;
  z-index: 8888;
  overflow: hidden;
}
.noti_title {
  width: 100%;
  display: flex;
  justify-content: center;
}
.notice .ext {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  padding-top: 6px;
}

.noti_contents {
  display: flex;
  flex-direction: column;
}
.noti_contents .noti_con {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  padding: 20px;
  border-bottom: 1px solid var(--line-normal);
}
.noti_tit {
  font-size: 13px;
  font-weight: 700;
}
.noti_con {
  line-height: 140%;
}
.noti_company {
  font-size: 12px;
  color: #2e2f33;
}
.noti_date {
  font-size: 12px;
  color: var(--background-unable-text);
  padding-top: 20px;
}
/* 버튼 */
.noti_btn {
  border-radius: 1000px;
  background-color: var(--primary-orange);
  color: white;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 11px;
  user-select: none;
  -webkit-user-select: none; 
  cursor: pointer;
}
/******* 알림 팝업창 css end*******/
/* 드래그 제어 */
/* 드래그 방지 */
.drag-prevent{
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  cursor: no-drop;
}
/* 드래그 허용 */
.draggable {
  -webkit-user-select:all;
  -moz-user-select:all;
  -ms-user-select:all;
  user-select:all
}
/* 드래그 텍스트만 허용 */
.draggable_text {
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text
}

/****** 헤더 ******/
.gnb_pc {
  width: auto;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 9999;
}
.gnb {
  width: 200px;
  height: 100vh;
  background-color: var(--background-brown);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: all 0.3s ease-out;
  box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
/* gnb 축소 기능 */
.gnb_small_btn {
  width: 100%;
  padding: 10px 6px;
  display: flex;
  text-align: right;
  justify-content: right;
  color: white;
  opacity: 0.4;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.gnb_small_btn:hover {
  opacity: 1;
}
#gnb_small:checked ~ .gnb {
  width: 65px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  text-align: right;
}
#gnb_small:checked ~ .gnb div {
  width: 65px;
}
#gnb_small:checked ~ .gnb .more {
  display: none;
}
#gnb_small:checked ~ .gnb .gnb_txt {
  display: none;
}
#gnb_small:checked ~ .gnb .gnb_btn,
#gnb_small:checked ~ .gnb .gnb_box {
  width: auto;
}
#gnb_small:checked ~ .gnb .gnb_btn a,
#gnb_small:checked ~ .gnb .gnb_btn label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

#gnb_small:checked ~ .gnb .logo img {
  display: none;
}
#gnb_small:checked ~ .gnb .logo .ico_logo {
  display: block;
}
#gnb_small:checked ~ .gnb .gnb_box .gnb_btn ul li a {
  display: none;
}
.ico_logo {
  height: 40px;
  margin: 10px;
  background: white;
  -webkit-mask: url("/public/icon/logo_mini.svg") center/contain no-repeat;
          mask: url("/public/icon/logo_mini.svg") center/contain no-repeat;
}
.gnb_small_btn svg {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
  color: var(--font-gray);
  transition: transform .3s ease, color .2s ease;
}
#gnb_small:checked ~ .gnb .gnb_top .gnb_small_btn svg {
  transform: rotate(0deg);
  color: var(--primary-orange);
}
#gnb_small:checked ~ .gnb .gnb_user span {
  font-size: 1.2rem;
}

.gnb .logo {
  width: 200px;
  height: auto;
  justify-content: center; 
  overflow: hidden;
  margin-bottom: 50px;
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0 20px;
}
.gnb_user {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 16px 20px;
}
.user {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-orange);
}
.gnb_user span:nth-child(2) {
  color: white;
}
.gnb_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
  font-size: 2rem;
}
.gnb_btn li a {
  font-size: 16px;
}
.spread {
  display: flex;
  justify-content: space-between !important;
}
.gnb_btn a,
.gnb_btn label {
  display: flex; 
  align-items: center; 
  justify-content: flex-start;
  gap: 10px;
  width: 100%; 
  padding: 16px 20px;
  font-size: 18px; font-weight: 500; 
  text-align: left; color:#fff; 
  cursor: pointer;
  border-left: 5px solid transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.spread div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
/* 호버시, 스타일 변화 */
.gnb_btn a:hover,
.gnb_btn label:hover {
  color: var(--primary-orange);
  background-color: var(--primary-brown);
  border-left-color: var(--primary-orange);
}
#client_admin:checked ~ .gnb_btn {
  background-color: var(--primary-brown);
}
#client_admin:checked ~ .css_none {
  background-color: var(--background-brown);
}
#client_admin:checked ~ .gnb_btn label {
  color: var(--primary-orange);
  border-left-color: var(--primary-orange);
}
label[for="client_admin"] {
  display: flex; align-items: center; gap: 8px;
}
label[for="client_admin"] .more {
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  color: var(--font-gray);
  transition: transform .3s ease, color .2s ease;
}
#client_admin:checked ~ .gnb_btn label .more {
  transform: rotate(180deg);
  color: var(--primary-orange);
}
.gnb_btn ul {
  max-height: 0; 
  overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease, transform .2s ease;
}
#client_admin:checked ~ .gnb_btn ul {
  max-height: 600px;
  opacity: 1;
  transform: none;
}
.gnb_box .on a,
.gnb_bottom .on a {
  background-color: var(--primary-brown);
  border-left-color: var(--primary-orange);
  color: var(--primary-orange);
}
.gnb_box .on02 a,
.gnb_bottom .on02 a {
  background-color: var(--primary-brown);
  border-left-color: var(--primary-green);
  color: var(--primary-green);
}
.order_btn {
  width: 15%;
  width: 140px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-brown);
  border-radius: 100px;
  color: white;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s;
}
.gnb_bottom {
  display: flex;
  flex-direction: column;
  justify-content: left;
  padding-bottom: 50px;
}
.gnb_bottom .gnb_btn a {
  justify-content: flex-start;
  gap: 10px;
}
.login_btn a {
  width: 15%;
  width: 140px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 100px;
  color: var(--primary-orange);
  border: 1px solid var(--primary-orange);
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s;
}
.login_btn a:hover {
  color: white;
  background-color: var(--primary-orange);
  border-radius: 100px;
}
.setting,
.logout {
  width: 200px;
}
/* 아이콘 이미지 삽입 */
.ico01,.ico02,.ico03,.ico04,.ico05, .ico06 ,.ico07, .ico08, .ico09 {
  width: 20px;
  height: 20px;
  background: currentColor;
}
.ico01 {
  -webkit-mask: url("/public/icon/today_orderlist.svg") center/contain no-repeat;
          mask: url("/public/icon/today_orderlist.svg") center/contain no-repeat;
}
.ico02 {
  -webkit-mask: url("/public/icon/tomorrow_orderlist.svg") center/contain no-repeat;
          mask: url("/public/icon/tomorrow_orderlist.svg") center/contain no-repeat;
}
.ico03 {
  -webkit-mask: url("/public/icon/client_admin.svg") center/contain no-repeat;
          mask: url("/public/icon/client_admin.svg") center/contain no-repeat;
}
.ico04 {
  -webkit-mask: url("/public/icon/setting.svg") center/contain no-repeat;
          mask: url("/public/icon/setting.svg") center/contain no-repeat;
}
.ico05 {
  -webkit-mask: url("/public/icon/logout.svg") center/contain no-repeat;
          mask: url("/public/icon/logout.svg") center/contain no-repeat;
}
.ico06 {
  -webkit-mask: url("/public/icon/driver.svg") center/contain no-repeat;
          mask: url("/public/icon/driver.svg") center/contain no-repeat;
}
.ico07 {
  -webkit-mask: url("/public/icon/driver_info.svg") center/contain no-repeat;
          mask: url("/public/icon/driver_info.svg") center/contain no-repeat;
}
.ico08 {
  -webkit-mask: url("/public/icon/large_order.svg") center/contain no-repeat;
          mask: url("/public/icon/large_order.svg") center/contain no-repeat;
}
.ico09 {
  -webkit-mask: url("/public/icon/home.svg") center/contain no-repeat;
          mask: url("/public/icon/home.svg") center/contain no-repeat;
}

/* ---------------------- 알림창 -------------------- */
/* 알림창 축소 기능 */
.notice {
  transition: all 0.3s ease-out;
}
.notice_small_btn {
  width: 100%;
  padding: 10px 6px;
  display: flex;
  text-align: left;
  justify-content: left;
  color: white;
  opacity: 0.4;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.notice_small_btn:hover {
  opacity: 1;
}
#notice_small:checked ~ .notice {
  width: 65px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  text-align: right;
}
#notice_small:checked ~ .notice div {
  width: 65px;
}
#notice_small:checked ~ .notice .noti_body {
  opacity: 0;
}
.notice_small_btn svg {
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  color: var(--font-gray);
  transition: transform .3s ease, color .2s ease;
}
#notice_small:checked ~ .notice .notice_small_btn svg {
  transform: rotate(180deg);
  color: var(--primary-orange);
}
/* ------------ 로그인용 gnb ------------ */
.login_on {
  border: none;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  color: var(--primary-orange);
  font-weight: 700;
  padding: 6px 20px;
  border-radius: 100px;
  transition: all .3s;
  cursor: pointer;
}
.client_name {
  color: var(--primary-orange);
  font-size: 1.8rem;
}
.login_on:hover {
  background-color: var(--background-light);
  color: var(--primary-orange);
  padding: 6px 20px;
  border-radius: 100px;
}
.login_on:hover .login_gnb_wrap {display: block;}

.login_on span:nth-child(2) {
  margin-top: 4px;
  color: var(--font-gray);
}
.login_gnb_wrap {
  position: absolute;
  top: 80px; right: 80px;
  background-color: white;
  border-radius: 10px;
  padding: 10px 8px;
  box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.2);
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease, transform .2s ease;
}
.login_gnb_wrap a:hover {background:#f5f5f5;}

/* 열림 상태 */
#login_gnb:checked {
  background-color: var(--background-light);
  color: var(--primary-orange);
}
#login_gnb:checked ~ .login_gnb_wrap{
  max-height: 400px;
  opacity: 1;
  transform: none;
  padding: 10px 8px; 
}
.login_gnb_btn .more {
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  color: var(--font-gray);
  transition: transform .3s ease;
}
.login_gnb_btn .more:hover {
  color: var(--primary-orange);
  transition: transform .3s ease;
}
#login_gnb:checked ~ .login_gnb_btn .more {
  transform: rotate(180deg);
  color: var(--primary-orange);
}

.login_gnb:checked + .login_gnb_btn {
  background:#e5e7eb;
  transition: all 0.3s;
}
.login_gnb_contents {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 12px;
}
.login_gnb_contents a {
  display: flex;
  gap: 10px;
  justify-content: left;
  align-items: center;
  padding: 6px 14px;
  transition: all 0.3s;
  color: var(--background-unable-text);
}
.login_gnb_contents a:hover {
  background-color: var(--background-light);
  color: black;
  border-radius: 10px;
  padding:6px 14px;
}
/* ------------ 로그인용 gnb end ------------ */
/****** 헤더 end ******/
/****** 탑버튼 ******/
.side_button {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.3s ease;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: auto;
  z-index: 999;
  cursor: pointer;  
  /* opacity: 0;  */
  pointer-events: none;
}
.side_button.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.side_btn,
.side_btn a {
  opacity: 1; 
  pointer-events: auto;
  width: 50px;
  height: 50px;
  background-color: var(--primary-orange);
  border-radius: 50px;
  z-index: 999;
  cursor: pointer;
  filter: drop-shadow(rgb(0, 0, 0, 0.2) 3px 3px 10px);
}
.side_btn img,
.side_btn a img {
  width: 100%;
  height: 100%;
  transform: scale(0.5);
  object-fit: contain;
}
.contact_btn { 
  width: 50px;
  height: 50px;
  position: relative;
}
.contact_btn a {
  position: absolute; 
  right: 0; bottom: 0;  
  display: flex; 
  align-items: center; 
  justify-content: right;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  cursor: pointer;
  z-index: 999;
  background-color: var(--primary-green);
  overflow: hidden;
  transition: width .3s ease, border-radius .3s ease;
}
.contact_btn a::before{
  content: "";
  flex: 0 0 24px; 
  width: 24px; 
  height: 24px;
  transform: translateX(-64px);
  background: var(--icon) left/contain no-repeat;
}
.contact_btn a:hover img {
  display: none;
  transition: width .3s ease, border-radius .3s ease;
}
.contact_btn a:hover {
  width: 200px;
  height: 50px;
  background-color: #FFD900;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --icon: url("/public/images/icon/link-contact_brown.png");
}
.contact_btn a:hover img {
  transform: translateX(100px);
}
.contact_btn a::after {
  content: "카톡으로 문의하기";
  width: 100%;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 100px;
  top: 16px;
  transform: translateX(-44px);
  display: flex;
  color: black;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity .5s ease .2s, transform .1s ease;
}
.contact_btn a:hover::after {
  width: 100%;
  opacity: 1;
  height: 50px;
}

/****** 탑버튼 end ******/
/****** footer ******/
.footer {
    padding-top: 30px;
    padding-bottom: 10px;
    overflow: hidden;
    color: #6b7280;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
/****** footer end ******/

/* 공통 폰트 */
.sub_title {
  font-family: 'MalangmalangR';
  font-weight: 900;
  font-size: 36px;
}
.noti_title {
  color: #171719;
  font-weight: 800;
  font-size: 20px;
}
/* 공통 폰트 end */
/* -------------------------- 검색창 --------------------------- */
.sub_navi_wrap {
  position: sticky;
  top: 0;
  background-color: #F2F3F4;
  z-index: 8888;
  padding: 10px 20px;
  margin-bottom: 30px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.search_action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-wrap{
  position: relative; 
  width: 30%;
}
.search-wrap .icon{
  position: absolute; 
  left: 10px; top: 50%; 
  transform: translateY(-50%);
  width: 20px; 
  height: 20px; 
  color:#9ca3af;
}
.search-wrap input{
  width:100%; 
  padding: 10px 36px 10px 36px;
  border: 1px solid var(--line-normal); 
  border-radius: 10px; 
  outline: none;
  font-size: 1.8rem;
  box-sizing: border-box;
}
.search-wrap input:focus{ 
  border-color:#9ca3af; 
  border: 1px solid var(--primary-orange);
  background-color: white;
}
.search-wrap .clear{
  position: absolute; 
  right: 6px; top: 50%; 
  transform: translateY(-50%);
  width: 24px; 
  height: 24px; 
  border: 0; 
  border-radius: 50%;
  background: transparent; 
  color: var(--primary-orange); 
  cursor: pointer;
  display: none;
}
.search-wrap input:not(:placeholder-shown) ~ .clear{ display:block; }
.search-wrap input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.sr-only{
    position:absolute;
    left: -9999px
}
#q{
  width: 280px; 
  padding: 10px 12px; 
  border:1px solid var(--line-normal); 
  border-radius:10px;
  outline: none;
}
#q:focus{ 
    border-color:#9ca3af; 
    box-shadow:0 0 0 3px rgba(156,163,175,.25); 
}
/* -------------------------- 검색창 end --------------------------- */
/* -------------------------- 표 --------------------------------*/
:root{
  --line:#e5e7eb;
  --muted:#6b7280;
  --bg:#fff;
  --row:#fafafa;
  --primary:#ef6c00;
  --ok:#22c55e;
}
*{box-sizing:border-box;}
.orders-wrap {
    font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
    color:#111;
}
.orders-toolbar{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}
.orders-toolbar h2{
    font-size: 18px;
    margin: 0;
}
.orders-toolbar .spacer{flex:1;}
.table-scroll{
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background:#fff;
}
.orders-table,
.driver-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.orders-table thead th,
.driver-table thead th {
    background:white;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    text-align: center;
    font-weight: 700; font-size: 14px;
    color:#374151;
    position: sticky;
    top: 0;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none; 
}
.orders-table tbody td,
.driver-table tbody td {
    border-bottom: 1px solid var(--line);
    padding: 6px 8px;
    vertical-align: middle;
    background:#fff;
    position: relative;
}
.orders-table tbody tr:nth-child(even) td{background:#fcfcfd}
.driver-table tbody tr:nth-child(even) td{background:#fcfcfd}

/* 드래그 핸들 */
.drag-handle {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color:#9ca3af;
  user-select: none;
}
.drag-handle svg {
    width: 18px;
    height: 18px;
}
tr.dragging {opacity:.6;}
tr.drag-over td {
    outline:2px dashed var(--primary);
    outline-offset:-2px;
}

/* 입력들 */
select, 
input[type="number"] {
  width: 100%;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  outline: none;
  background:#fff;
  font-size: 14px;
  font-weight: 500;
}
select:focus, input:focus {
    border-color:#cbd5e1;
    box-shadow:0 0 0 3px rgba(249,115,22,.15);
}
input[type="number"]{text-align:right;}


.chk-cell {
    text-align: center;
}
.chk-cell input[type="checkbox"]{
  width: 18px; 
  height: 18px;
  border-radius: 100px;
  accent-color: var(--primary-orange);
}
.help {
    margin:8px 12px;
    color:var(--muted);
    font-size: 12px;
}
/* 행 삭제하기 버튼 */
.orders-table td:first-child { position: relative; }
.row-del{
  position: absolute; 
  left: 20px; top:50%; 
  transform: translateY(-50%) scale(.9);
  width: 22px; height:22px; 
  display: grid; 
  place-items: center;
  border:0; 
  border-radius:50%;
  background:#ef4444; 
  color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  cursor: pointer;
  opacity:0; 
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 999;
}
.orders-wrap.editing tr.show-del .row-del{
  opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1);
}
.orders-wrap:not(.editing) .row-del{ display:none; }

/* undo 스타일 */
.toast{
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  display: flex; align-items: center; gap: 12px;
  min-width: 260px; max-width: 80vw; padding: 12px 14px;
  background: #111; color: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 2000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  font: 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans KR',sans-serif;
}
.toast.show{ opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.toast .spacer{ flex:1 }
.toast-btn{
  appearance:none; border:0; border-radius: 8px; padding: 8px 10px; cursor: pointer;
  background: var(--primary-green); color: #fff; font-weight: 700;
}
.toast-btn:hover{ filter: brightness(1.05); }
.toast-close{
  appearance:none; border:0; background: transparent; color:#9ca3af; cursor:pointer; font-size:16px;
}

/* 기사별(라벨) 색상 구분 */
#ordersBody tr {
  transition: background-color .2s ease, box-shadow .2s ease;
}
select.driver-select{
  padding-left: 28px;
  background-image: radial-gradient(circle at 12px 50%, var(--driver-color, #9CA3AF) 7px, transparent 8px);
  background-repeat: no-repeat;
  background-position: 6px center;
}
#ordersBody tr {
  box-shadow: inset 0 0 0 0 var(--driver-color, transparent)
}
#ordersBody tr { background-color: var(--row-bg, transparent); }
#ordersBody td { 
  background-color: inherit;
  background: inherit !important;
}

/* 🔆 복원 하이라이트: 행 전체를 가리지 않고 '덧입히는' 방식 */
@keyframes flashFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.orders-table tbody tr.flash td::after,
.driver-table tbody tr.flash td::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #FEF3C7;
  opacity: 1;
  pointer-events: none;
  animation: flashFade 1.2s ease forwards;
}
#ordersBody tr,
#driverBody tr{
  transition: background-color .2s ease, box-shadow .2s ease;
  background-color: var(--row-bg, transparent);  /* JS에서 --row-bg 세팅 */
  box-shadow: inset 0 0 0 0 var(--driver-color, transparent);
}

#ordersBody td, 
#driverBody td {
  background-color: inherit;
  background: inherit !important;
  position: relative;
}
/* 날짜 css */
.date-field {
  display: flex; 
  align-items: center; 
  gap: 4px;
}
.date-input {
  display: inline-block;
  width: 18px; 
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  vertical-align: middle;
  color: transparent;
  caret-color: transparent;
}
.date-input::-webkit-datetime-edit { display:none; }
.date-input::-webkit-calendar-picker-indicator{
  opacity: 1; 
  cursor: pointer;
}

@-moz-document url-prefix() {
  .orders-wrap.editing .date-input {
    appearance: none; -moz-appearance: none;
  }
}
.orders-wrap.editing .date-display{
  opacity: 1;
}
/* YY-MM-DD 표시는 스타일 */
.date-input {
  width: 0;
}
.orders-wrap.editing .date-input {
  width: initial;
}
.date-display {
  width: 80px;
}
.orders-wrap.editing td:nth-child(3) {
  width: 105px;
}

.date-display{
  font-weight: 600; 
  color:#374151;
}
/* 추가하기 & 수정하기 & 삭제하기 버튼 */
.section03 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 30px;
}
.action_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.action {
    display: flex;
    height: 40px;
    justify-content: center;
    gap: 10px;
}
.btn {
    padding: 6px 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.add_btn {
    background-color: var(--primary-orange);
    color: white;
}
.edit_btn {
    border: 1px solid var(--label-normal);
    transition: all .3s;
}
.edit_btn:hover {
    background-color: var(--primary-brown);
    color: white;
    border: 1px solid var(--primary-brown);
}
.edit_btn.active {
    background-color: var(--primary-brown);
    color: white;
    border: 1px solid var(--primary-brown);
}
.delete_btn {
    border: 1px solid var(--line-normal);
    color: var(--background-unable-text);
    transition: all .3s;
    background-color: white;
}
.delete_btn:hover {
    background-color: var(--primary-brown);
    color: white;
    border: 1px solid var(--primary-brown);
}
.button_ico_add {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: currentColor;
    -webkit-mask: url("/public/icon/add.svg") center/contain no-repeat;
            mask: url("/public/icon/add.svg") center/contain no-repeat;
}
.button_ico_edit {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: currentColor;
    -webkit-mask: url("/public/icon/edit.svg") center/contain no-repeat;
            mask: url("/public/icon/edit.svg") center/contain no-repeat;
}
.button_ico_delete {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: currentColor;
    -webkit-mask: url("/public/icon/delete.svg") center/contain no-repeat;
            mask: url("/public/icon/delete.svg") center/contain no-repeat;
}
.button_ico_today {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background: currentColor;
    -webkit-mask: url("/public/icon/today_btn.svg") center/contain no-repeat;
            mask: url("/public/icon/today_btn.svg") center/contain no-repeat;
}
/* 필터 기능 ---------------------------------------------- */
.orders-filter {
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 8px;
    margin: 8px 0 12px;
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}
.orders-filter label { 
    color:#374151; 
    font-weight: 600;
    display: flex;
    text-align: center;
    justify-content: center;
}
.orders-filter label span {
  height: 18px;
}
.orders-filter select {
    padding: 6px 10px; 
    border: 1px solid #e5e7eb; 
    border-radius: 8px;
    background:#fff; 
    outline: none;
}
.orders-filter .btn-small {
    padding: 6px 14px; 
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    border: 1px solid #e5e7eb; 
    border-radius: 8px; 
    background:#fff; 
    cursor: pointer;
}
#driverFilter {
    width: auto;
    font-size: 14px;
}
.orders-filter .btn-small:hover{ background:#f9fafb; }
.filter-badge {
    margin-left: 4px; 
    padding: 4px 8px; 
    border-radius: 999px; 
    background:#f3f4f6; 
    color:#374151; 
    font-weight: 600;
}
.orders-table-wrap { 
    overflow: auto; 
    max-height: 70vh; 
}
.orders-table thead th { 
    position: sticky; 
    top: 0; 
    z-index: 2; 
    background:#fff; 
}
/* ✅ 활성 상태 */
.orders-filter.is-filtering label{
  color:var(--primary-orange); 
  font-weight: 700;
}
.orders-filter.is-filtering select{
  border-color:#f97316;
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
}
.orders-filter.active {
    border-color: #FF511770;
    box-shadow: 0 0 0 3px #fff6ee;
}
/* 뱃지(표시 건수) */
.filter-badge{
  margin-left: 6px; 
  padding: 4px 8px;
  border-radius: 999px; 
  background:#f3f4f6; 
  color:#374151; 
  font-weight: 600;
}

/* 버튼 */
.btn-small{
  padding: 6px 10px; 
  border: 1px solid #e5e7eb; 
  border-radius: 8px; 
  background:#fff; 
  cursor:pointer;
}
.btn-small:hover{ background:#f9fafb; }

.orders-filter label .ico{ 
  margin-right: 2px; 
  opacity: .6; 
  transition: opacity .2s; 
}
.orders-filter.is-filtering label .ico { opacity:1; }
/* -------------------------- 표 -------------------------- end */
.refresh-bar {
  width: 50%;
  display: flex; 
  align-items: center; 
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 40px; 
  border-radius: 10px; 
  position: relative;
}
/* 새로고침 수동버튼 ----------------------------------------------- */
.refresh-bar .btn {
  padding: 6px 12px; 
  border-radius: 8px; 
  background:#fff; 
  cursor: pointer;
  transition: all 0.3s;
}
#refreshBtn {
  color: var(--primary-green);
}
.refresh-bar .btn:hover {
  background:#111;
}
.refresh_ico {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: currentColor;
  -webkit-mask: url("/public/icon/system-uicons_reset.svg") center/contain no-repeat;
          mask: url("/public/icon/system-uicons_reset.svg") center/contain no-repeat;
}
.auto-refresh {
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer; 
}
.refresh-bar .refresh-interval {
  display: flex;
  gap: 8px;
  background-color: #111;
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--primary-green);
  font-weight: 700;
  position: absolute;
  top: 50px;
  right: 210px;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 1000;
  pointer-events: none;
}
.refresh-bar .refresh-interval::after {
  content: "";
  position: absolute;
  top: -8px; 
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #111;
}
.auto-refresh:hover + .refresh-interval{
  opacity: 1;
  pointer-events: auto;
}
.auto-refresh:focus-within + .refresh-interval{
  opacity: 1;
  pointer-events: auto;
  position: absolute; 
  top: 50px; 
  right: 210px;
}
.refresh-bar:has(#autoRefresh:checked) .refresh-interval{
  position: absolute;
  top: 50px;
  right: 210px;
  display: inline-flex;
  margin: 0;
  box-shadow: none;
  transition: all 0.3s 1s;
}

/* 체크 상태에선 꼬리 하나만 사용 */
.refresh-bar:has(#autoRefresh:checked) .refresh-interval::before {
  content:""; 
  position: absolute; 
  top: -8px; left:50%; 
  transform: translateX(-50%);
  border-left: 8px solid transparent; 
  border-right: 8px solid transparent; 
  border-bottom: 8px solid #111;
}
.refresh-bar:has(#autoRefresh:checked) .refresh-interval::after{ display:none; }
.refresh-bar:has(#autoRefresh:checked) .refresh-interval::after{ display: none; }

/* ✅ JS가 붙이는 플래그: 열림 */
.refresh-bar.ri-open .refresh-interval{
  opacity: 1; pointer-events: auto;
}

.refresh-bar label{ 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  width: auto;
}
.refresh-bar .last-sync { 
  width: auto;
  margin-left: 20px;
  color:#6b7280; 
  font-size:14px; 
}
.auto-refresh,
.last-sync {
  width: 100%;
}
.auto-refresh input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 100px;
  accent-color: var(--primary-green);
}
/* 새로고침 수동버튼 end----------------------------------------------- */
/* 주문 입력창:hover 기능 */
.input_con:focus {
  background-color: white;
  border: 1px solid var(--primary-orange);
  box-sizing: border-box;
}
.input_con[readonly] {
  background-color: #ECECEC;
  color: var(--label-alternative);
  cursor: not-allowed;
  border: 1px solid #ddd; 
}
/* 주문 입력창:hover 기능 end */

/* 부가설명 css */
.ext {
    font-size: 1.4rem;
    color: var(--label-alternative);
}
/* 업로드&다운로드 load btn */
.loader_btn {
    padding: 20px 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--line-normal);
    background-color: white;
    cursor: pointer;
    transition: all 0.3s;
}
.loader_btn:hover {
    background-color: var(--primary-orange);
    border: 1px solid var(--primary-orange);
    color: white;
}
.loader_btn:hover .upload_icon,
.loader_btn:hover .download_icon {
    background: white;
    transition: all 0.3s;
}
.upload_icon {
    width: 26px; height: 26px;
    background: #6b7280;
    -webkit-clip-path: path("M12 3 L6 9 H10 V16 H14 V9 H18 L12 3 Z M5 18 Q5 20 7 20 H17 Q19 20 19 18 V14 H21 V18 Q21 22 17 22 H7 Q3 22 3 18 V14 H5 Z");
    clip-path: path("M12 3 L6 9 H10 V16 H14 V9 H18 L12 3 Z M5 18 Q5 20 7 20 H17 Q19 20 19 18 V14 H21 V18 Q21 22 17 22 H7 Q3 22 3 18 V14 H5 Z");
}
.download_icon {
    width: 26px; height: 26px;
    background: #6b7280;
    -webkit-clip-path: path("M12 2 L6 15 H10 V8 H14 V15 H18 L12 21 Z M5 18 Q5 20 7 20 H17 Q19 20 19 18 V14 H21 V18 Q21 22 17 22 H7 Q3 22 3 18 V14 H5 Z");
    clip-path: path("M12 19 L6 13 H10 V6 H14 V13 H18 L12 19 Z M5 20 Q5 22 7 22 H17 Q19 22 19 20 V16 H21 V20 Q21 24 17 24 H7 Q3 24 3 20 V16 H5 Z");
}
/* 서브 카테고리 - 비쥬얼섹션 */
.section01 {
    width: 100%;
    overflow: hidden;
    --webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none; 
}
.visual_title {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 11;
}
.visual_title {
    position: relative;
    overflow: hidden;
    z-index: 10;
}
.visual_title {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    gap: 16px;
    padding: 10px 0;
}
.visual_tit {
  display: flex;
  align-items: center;
  gap: 20px;
}
.visual_tit h1{
    color: var(--label-normal);
    text-align: left;
    font-size: 40px;
    font-weight: 900;
    line-height: 60px;
    font-family: var(--font-malang-kr);
}
h1 { 
    font-size: 28px; 
    margin: 0 0 6px; 
}
.visual_tit h4 {
  color: #374151;
  font-weight: 500;
}

/* input 버튼 커스터마이징 ------------------*/
.radio_check {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.radio_check input {
    width: 20px;
    height: 20px;
}
.radio_check {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    padding-left: 28px;
}
.radio_check_load {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}
.radio_check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.radio_check .checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #888;
    border-radius: 20px;
    margin-right: 8px;
    transition: all 0.2s ease;
}
.radio_check input:checked ~ .checkmark {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}
.radio_check .checkmark::after {
    content: "";
    position: absolute;
    display: none;
}
.radio_check input:checked ~ .checkmark::after {
    display: block;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cell-center{ text-align:center; }
.cell-center input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    accent-color: var(--primary-orange);
}
/* input 버튼 커스터마이징 end---------------*/
/****** 경고 팝업창 css ******/
#alertOverlay {
    position: fixed; inset: 0;
    background: rgba(17, 24, 39, .45);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
}
.alert-modal {
    display: block;
    width: min(420px, 92vw);
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    overflow: hidden;
    animation: alert-pop .16s ease-out;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
@keyframes alert-pop { from { transform: translateY(6px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }

.alert-head {
    display: flex; 
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 30px 16px 7px 16px; 
}
.alert-head .icon { 
    width: 50px;
    line-height: 1; }
.alert-head .icon img { 
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.alert-body {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px 16px 0px 16px; 
    color: #333; 
    font-size: 18px;
    font-weight: 500;
}
.alert-body span {
    font-weight: 700;
    color: var(--primary-orange);
}
.alert-body ul {margin: 0;}
.alert-body li {margin: 6px 0;}

.alert-actions {
    display: flex; 
    gap: 8px; 
    justify-content: center;
    padding: 30px 16px; 
}
.alert-btn {
    appearance: none; 
    background: #fff;
    padding: 10px 40px; 
    border-radius: 100px; 
    font-size: 14px; 
    cursor: pointer;
    font-weight: 500;
}
.alert-btn.primary { 
    background: var(--primary-orange); 
    color: #fff; 
}
.alert-btn.primary:hover { filter: brightness(1.05); }
/****** 경고 팝업창 css end ******/
/****** 주문내역창 ******/
.info_order {
    padding: 16px;
}
.info_card_title p {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* 수정 (저장/닫기) */
.change_actions {
    margin-top: 14px; 
    display: flex; 
    justify-content: center;
    gap: 8px; 
    align-items: center;
}
/****** 경고 팝업창 css end ******/
.action_box {
    margin-bottom: 10px;
}

/* --- FIX: 행 하이라이트 레이어가 가려지는 문제 해결 --- */
/* 행 간격 유지 */
.orders-table tbody tr > td,
.settlement-table tbody tr > td {
  background: #fff;
  transition: background-color .12s ease;
}
.orders-table tbody tr,
.settlement-table tbody tr {
  position: relative;
  transition: outline-color .12s ease, box-shadow .12s ease;
}
.orders-table tbody tr:hover,
.settlement-table tbody tr:hover {
  outline-color: var(--primary-orange, #f97316);
}
.orders-table tbody tr:hover > td,
.settlement-table tbody tr:hover > td {
  background: rgba(249, 115, 22, .04);
}
.orders-table tbody tr:focus-within,
.settlement-table tbody tr:focus-within {
  outline-color: var(--primary-orange, #f97316);
}
.orders-table tbody tr:focus-within > td,
.settlement-table tbody tr:focus-within > td {
  background: #f973160f;
}
.orders-table tbody tr.dragging,
.settlement-table tbody tr.dragging {
  outline-color: var(--primary-orange, #f97316);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.orders-table tbody tr.dragging > td,
.settlement-table tbody tr.dragging > td {
  background: #f973160f;
}

/* 행 호버시, css */
.orders-table tbody tr::before { content: none !important; }

.orders-table tbody#ordersBody tr > td {
  background: #fff;
  transition: background-color .12s ease;
}
.orders-table tbody#ordersBody tr:hover > td {
  background: #f973160f !important;
}
.orders-table tbody#ordersBody tr:focus-within > td {
  background: #f973160f !important;
}

/* 체크된 행 */
/* .orders-table tbody#ordersBody tr:has(input[type="checkbox"]:checked) > td {
  background: #e3ffe3 !important;
} */
/* 드래그 중 */
.orders-table tbody#ordersBody tr.dragging > td {
  background: #fffaf5 !important;
}
@media (hover:hover) {
  .orders-table tbody#driverBody tr:hover > td {
    background: #f973160f !important;
  }
}

/* ← 흐림 해제 */
.orders-table input:disabled,
.orders-table select:disabled,
.orders-table textarea:disabled {
  opacity: 1 !important;     
  color: inherit;
}
.orders-table tr.dragging { opacity: 1; }

/* 기본 */
.table-scroll {
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* “수정완료(편집 중)” 상태에서 강조 */
.orders-wrap.editing .table-scroll,
.table-scroll.is-editing {
  border-color: var(--primary-orange);
  box-shadow: 0 0 10px 2px #dbdbdb; /* 선택사항: 살짝 강조 */
}

/* =========== 로그아웃 팝업 오버레이 =========== */
.logout-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;   /* 기본 숨김 */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* === 팝업 박스 === */
.logout-modal {
  background: #fff;
  width: 300px;
  padding: 24px 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  animation: fadeUp .25s ease;
}

.logout-modal p {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
}

.logout-modal .btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.logout-modal button {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.logout-modal .cancel {
  background: #e5e5e5;
  color: #333;
}

.logout-modal .confirm {
  background: var(--primary-orange);
  color: #fff;
}

/* 팝업 애니메이션 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========== 로그아웃 팝업 오버레이 end =========== */