/*──────────────────────────────────────────────────
  style.css 전체 (로그인·회원가입·주문 내역·주문폼 UI 통일)
──────────────────────────────────────────────────*/

/* ── 루트 변수 ── */
:root {
  --main-color:     #58b4e6;
  --primary:        #58b4e6;
  --primary-dark:   #3da0dc;
  --hero-bg:        #a0d8ff;
  --body-bg:        #eaf7ff;
  --accent-yellow:  #ffd600;
  --menu-bg:        var(--primary);
  --menu-hover:     var(--hero-bg);
}

/* ── 전역 리셋 ── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  min-height: 100%;
  background: var(--body-bg) !important;
  font-family: 'Pretendard', sans-serif;
  color: #333;
  text-align: center;
}
a {
  color: var(--main-color);
  text-decoration: none;
}

/* ── 버튼 기본 ── */
button, .btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .25s;
}
button:hover, .btn:hover {
  background: var(--primary-dark);
}

/* ── 남아있는 보라색 강제 제거 ── */
body [style*="#6f42c1"],
body [style*="rgb(107, 50, 255)"],
body .bg-primary,
body .bg-purple,
body .bg-gradient-primary {
  background: var(--body-bg) !important;
}

/* ── Hero (상단 배너) ── */
.hero, .jumbotron, .section-hero {
  background: var(--hero-bg) !important;
}

/* ── 모바일 상단바 & 드로어 ── */
.mobile-topbar {
  position: relative;
  z-index: 9000;
  background: var(--menu-bg) !important;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
.mobile-topbar .brand {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
}
.mobile-topbar .signup-btn {
  background: #fff;
  color: #6242d6;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
}
#menuToggle {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
#menuDrawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  background: var(--menu-bg);
}
#menuDrawer.open {
  max-height: 420px;
}
#menuDrawer a {
  display: block;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-align: left;
}
#menuDrawer li.active > a {
  background: var(--menu-hover);
}
#menuDrawer a:hover,
#menuDrawer a:focus {
  background: rgba(255,255,255,.15);
}

/* ── 카드 공통 (로그인·회원가입·비번찾기·주문폼·주문내역) ── */
.panel-login,
.login-wrapper,
.card,
.order-panel {
  background: #fff;
  border: 2px solid var(--primary) !important;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 32px 26px 28px;
  margin: 40px auto;
}

/* 입력창 공통 */
.panel-login .form-control,
.login-wrapper .form-control,
.card .form-control,
.order-panel .form-control,
.order-panel select.form-control,
.order-panel textarea.form-control {
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  background: #f9fcff;
  border: 2px solid var(--primary);
  border-radius: 14px;
}
.panel-login .form-control:focus {
  border-color: var(--primary-dark);
  outline: none;
}

/* 로그인 카드 버튼 레이아웃 */
.panel-login .btn {
  height: 46px;
  line-height: 42px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  width: auto;
  padding: 0 24px;
}
.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.btn-primary {
  background: var(--primary);
  border: none;
}
.btn-secondary {
  background: #fff;
  border: 2px solid var(--primary);
  color: var(--primary);
}
.btn-primary:hover,
.btn-secondary:hover {
  opacity: .9;
}
.flex-1 {
  flex: 1;
}

/* ── 실시간 주문현황 테이블 ── */
.live-wrap {
  display: flex;
  justify-content: center;
  margin-top: 35px;
}
.orders-sec {
  max-width: 860px;
  margin: 40px auto 28px;
  padding: 0 15px;
  text-align: left;
}
.orders-sec h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
}
.table-wrap {
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 14px;
  overflow: hidden;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.table-wrap th {
  background: var(--primary-dark);
  color: #fff;
  text-align: left;
  padding: 8px;
}
.table-wrap td {
  padding: 7px 8px;
  border-bottom: 1px solid #e5eef8;
}
.table-wrap td:nth-child(2) {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  background: var(--primary-dark);
  color: #fff;
}

/* ── 주문폼 래퍼 (New Order) ── */
.order-wrap {
  width: 100%;
  padding: 0 15px;
  margin: 0; /* controlled by #orderWrap */
}
#orderWrap {
  margin: 120px auto 40px;
}
#orderWrap .order-panel {
  width: 90%;
  max-width: 1200px;
}
#orderWrap .order-panel .row > [class*="col-"],
#orderWrap .order-panel .panel,
#orderWrap .order-panel .well,
#orderWrap .order-panel form {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 주문폼 버튼 레이아웃 */
#orderWrap .btn-row {
  display: flex !important;
  gap: 10px !important;
  margin-top: 24px !important;
}
#orderWrap .btn-row .btn {
  flex: 1 !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}

/* ── 고정 푸터 ── */
.sticky-footer,
.footer-bar {
  background: var(--accent-yellow);
  color: #000;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  padding: 14px 5px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
/* ─────────────────────────────────────────────────────
   주문폼(New Order) 스타일 완전 오버라이드
   • 외부 카드(order-panel)만 표시
   • 내부 bootstrap .panel/.well 제거
   • 폭: 화면 90%, 최대 1200px, 중앙 정렬
───────────────────────────────────────────────────── */

/* 외부 카드 래퍼 */
#orderWrap {
  margin: 120px auto 40px !important;
  width: 100% !important;
  padding: 0 15px !important;
}
#orderWrap .order-panel {
  background: #fff !important;
  border: 2px solid var(--primary) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  padding: 32px 26px 28px !important;

  width: 90% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* 내부 bootstrap 패널/웰 요소 완전 제거 */
#orderWrap .order-panel .panel,
#orderWrap .order-panel .panel-default,
#orderWrap .order-panel .panel-body,
#orderWrap .order-panel .well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 내부 폼/그리드 완전 풀폭 */
#orderWrap .order-panel form,
#orderWrap .order-panel .row,
#orderWrap .order-panel .row > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 입력창·선택·텍스트영역 스타일 재적용 */
#orderWrap .order-panel .form-control,
#orderWrap .order-panel select.form-control,
#orderWrap .order-panel textarea.form-control {
  width: 100% !important;
  margin-top: 14px !important;
  padding: 13px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  background: #f9fcff !important;
  border: 2px solid var(--primary) !important;
  border-radius: 14px !important;
}

/* 버튼 레이아웃 재적용 */
#orderWrap .order-panel .btn-row {
  display: flex !important;
  gap: 10px !important;
  margin-top: 24px !important;
}
#orderWrap .order-panel .btn-row .btn {
  flex: 1 !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}
/*────────────────────────────────────────────────
  주문폼 카드 디자인 (내부 .panel에 적용)
────────────────────────────────────────────────*/

.order-wrap .panel,
.order-wrap .well {
  /* 로그인 카드와 동일한 외관 */
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);

  /* 안쪽 여백 */
  padding: 32px 26px 28px;

  /* (1) 원하는대로 900% */
  width: 400% !important;

  /* (2) 좌우 마진 초기화 */
  margin: 120px 0 40px !important;

  /* (3) 위치 기준을 부모의 중앙으로 변경 */
  position: relative !important;
  left: 50%       !important;

  /* (4) 자신 폭의 절반만큼 왼쪽으로 당겨서 중앙 정렬 */
  transform: translateX(-50%) !important;
}

/* 모바일에서는 풀폭으로 */
@media (max-width: 767px) {
  .order-wrap .panel,
  .order-wrap .well {
    width: 100% !important;
    left: 50%  !important;
    transform: translateX(-50%) !important;
  }
}
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.table-responsive table {
  min-width: 800px;    /* 필요한 최소 너비 */
  white-space: nowrap;
}
/* ── 자동화 주문내역용 가로 스크롤 & 글자 깨짐 방지 ── */
.auto-orders-sec .table-wrap .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.auto-orders-sec .table-wrap .table-responsive table {
  min-width: 600px;       /* 테이블 최소너비, 필요에 따라 조정 */
  width: 100% !important;
  table-layout: auto !important;
}

.auto-orders-sec .table-wrap table th,
.auto-orders-sec .table-wrap table td {
  white-space: nowrap !important;   /* 글자 줄바꿈 방지 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/*────────────────────────────────────────────────
  PC(≥992px) 에서 자동화 주문내역 탭 + 검색창 중앙 정렬
────────────────────────────────────────────────*/
@media (min-width: 992px) {
  /* 1) subscriptions 페이지 상단 첫 번째 nav-pills */
  .container-fluid > .row > .col-lg-12 > ul.nav.nav-pills {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding-left: 0 !important;       /* 부트스트랩 기본 left padding 제거 */
    margin-bottom: 20px !important;    /* 탭-컨텐츠 간격 */
  }

  /* 2) 각 탭(li) float 제거 & 좌우 마진 */
  .container-fluid > .row > .col-lg-12 > ul.nav.nav-pills > li {
    float: none !important;
    margin: 0 8px !important;
  }

  /* 3) 검색창 위치 조정 (마지막 li.search) */
  .container-fluid > .row > .col-lg-12 > ul.nav.nav-pills > li.search {
    margin-left: 20px !important;
  }

  /* 4) 검색창 너비 고정 */
  .container-fluid > .row > .col-lg-12 > ul.nav.nav-pills > li.search .input-group {
    width: 260px !important;
  }
}
/*────────────────────────────────────────────────
  PC(≥992px) 에서 일반 주문내역 탭 + 검색창 중앙 정렬
────────────────────────────────────────────────*/
@media (min-width: 992px) {
  /* 1) orders 페이지 상단 첫 번째 nav-pills */
  .container-fluid > .row > .col-lg-12 > ul.nav.nav-pills {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding-left: 0 !important;
    margin-bottom: 20px !important;
  }

  /* 2) 각 탭(li) float 제거 & 좌우 마진 */
  .container-fluid > .row > .col-lg-12 > ul.nav.nav-pills > li {
    float: none !important;
    margin: 0 8px !important;
  }

  /* 3) 검색창 위치 조정 (마지막 li.search) */
  .container-fluid > .row > .col-lg-12 > ul.nav.nav-pills > li.search {
    margin-left: 20px !important;
  }

  /* 4) 검색창 너비 고정 */
  .container-fluid > .row > .col-lg-12 > ul.nav.nav-pills > li.search .input-group {
    width: 260px !important;
  }
}

/*────────────────────────────────────────────────
  모바일에서 실시간 주문현황(.live-box)에 가로 스크롤 강제 적용
────────────────────────────────────────────────*/
@media (max-width: 767px) {
  /* live-box 자체를 블록으로 바꾸고 오버플로우 켜기 */
  #liveBox,
  .live-wrap .live-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  /* live-box 내부에 그려진 table 강제 최소 너비, auto 너비 */
  #liveBox table,
  .live-wrap .live-box table {
    display: block !important;
    width: auto !important;
    min-width: 600px !important; /* 필요에 따라 550~700px 사이로 조정 */
    margin: 0 !important;
  }

  /* 테이블 셀들이 줄바꿈 없이 한 줄에 유지되도록 */
  #liveBox th,
  #liveBox td,
  .live-wrap .live-box th,
  .live-wrap .live-box td {
    white-space: nowrap !important;
  }
}

/*────────────────────────────────────────────────
  테이블 셀 안 글자 겹침 방지
────────────────────────────────────────────────*/
.table-wrap .table-responsive table {
  /* 고정 너비 대신 자동 레이아웃 */
  table-layout: auto !important;
  width: 100% !important;
}

.table-wrap .table-responsive th,
.table-wrap .table-responsive td {
  /* 셀 안에서 줄 바꿈 허용 */
  white-space: normal !important;
  /* 단어 길어도 강제 줄바꿈 */
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* 모바일에서도 동일하게 */
@media (max-width: 767px) {
  .table-wrap .table-responsive table {
    table-layout: auto !important;
    width: 100% !important;
  }
  .table-wrap .table-responsive th,
  .table-wrap .table-responsive td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}
.nav.nav-pills li a {
  background-color: #58b4e6; /* 버튼 배경색 */
  color: #fff !important;    /* 버튼 글씨색 */
  padding: 8px 20px !important;
  border-radius: 10px !important;
  font-weight: bold !important;
  transition: background-color 0.3s;
}

.nav.nav-pills li.active a,
.nav.nav-pills li a:hover {
  background-color: #3da0dc; /* 활성화 및 hover 시 버튼 색상 변경 */
}

.nav.nav-pills li {
  margin-right: 8px !important; /* 버튼 사이 간격 조정 */
}

.nav.nav-pills {
  position: relative !important; 
  z-index: 10 !important;
  margin-top: 130px !important; /* 이 값을 조정하여 주문현황판과 겹치지 않게 설정 */
}
/* 카드(.well) 간의 간격 줄이기 */
.well {
  margin-top: 10px !important;   /* 상단 간격 축소 */
  margin-bottom: 10px !important; /* 하단 간격 축소 */
}
/* 로그인 전 간격 조정 - Hero ~ 로그인 카드 ~ 실시간 현황 간격 줄이기 */
.hero {
  padding: 80px 15px 60px !important;
}
.container {
  margin: -80px auto 0 !important;
  padding-bottom: 24px !important;
}
.orders-sec {
  margin: 20px auto 20px !important;
}
.floating-kakao {
  position: fixed;
  bottom: 90px;  /* 텔레그램 버튼보다 위로 */
  right: 25px;
  width: 55px;
  height: 55px;
  background: #fae100;
  color: #000;
  font-size: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 55px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  transition: transform 0.2s ease;
}
.floating-kakao:hover {
  transform: scale(1.1);
}
/* ✅ 간격 최소화 */
.orders-sec {
  margin-bottom: 10px !important;
}
.nav.nav-pills {
  margin-top: 10px !important;
}

/* ✅ 모바일 탭 정돈 */
@media (max-width: 768px) {
  .nav.nav-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 10px;
  }

  .nav.nav-pills li {
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 30%;
  }

  .nav.nav-pills li a {
    width: 100% !important;
    text-align: center;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    white-space: nowrap;
  }
}
/* ───── 공지사항 박스 스타일 ───── */
.notice-sec {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.notice-box {
  background: #fff;
  border: 2px solid var(--primary);
  border-radius: 14px;
  padding: 16px 24px;
  max-width: 860px;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  word-break: keep-all;
}
.notice-sec {
  margin-top: 30px !important;
  margin-bottom: 0px !important;
}

/* ✅ 추가된 행 스타일 */
.canceled-row {
  background-color: #fff8cc !important;
}

/* ✅ 기본 테이블 스타일 개선 */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.table th {
  background: var(--primary-dark);
  color: #fff;
  text-align: left;
  padding: 10px;
}
.table td {
  padding: 9px 12px;
  border-bottom: 1px solid #e5eef8;
  white-space: nowrap;
}
/* ✅ 주문내역 테이블을 화면 너비에 맞게 확장 */
.orders-sec {
  max-width: 100% !important;
  padding: 0 20px !important;
}

.orders-sec .table-wrap {
  width: 100% !important;
}

.orders-sec .table-wrap .table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
}

.orders-sec .table-wrap table {
  min-width: 100% !important;
  width: 100% !important;
  table-layout: auto !important;
}
@media (max-width: 767px) {
  .orders-sec .table-wrap .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .orders-sec .table-wrap table {
    min-width: 800px !important; /* 모바일에서도 일정 너비 유지 */
    width: auto !important;
    table-layout: auto !important;
    display: block;
  }

  .orders-sec .table-wrap th,
  .orders-sec .table-wrap td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* ✅ 모바일 화면에서 실시간 주문현황/공지사항 가로폭 확장 및 스크롤 개선 */
.orders-sec {
  max-width: 100% !important;
  padding: 0 10px !important;
}
.orders-sec .table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
}
.orders-sec .table-wrap table {
  min-width: 720px !important;
  width: auto !important;
  table-layout: auto !important;
}

.notice-sec {
  max-width: 100% !important;
  padding: 0 10px !important;
}
.notice-box {
  max-width: 100% !important;
}
/* ✅ PC에서만 실시간 주문현황만 너비 제한 */
@media (min-width: 992px) {
  .live-orders-sec {
    max-width: 860px !important;
    margin: 30px auto !important;
    padding: 0 15px !important;
  }

  .live-orders-sec .table-wrap {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .live-orders-sec .table-wrap table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
  }

  .notice-sec {
    max-width: 860px !important;
    margin: 20px auto !important;
    padding: 0 15px !important;
  }

  .notice-box {
    max-width: 100% !important;
  }
}

/* ✅ 일반 주문내역은 PC에서도 전체 폭 유지 */
@media (min-width: 992px) {
  .order-history-sec {
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 20px auto !important;
  }

  .order-history-sec .table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
  }

  .order-history-sec .table-wrap table {
    min-width: 100% !important;
    table-layout: auto !important;
  }
}
@media (max-width: 767px) {
  .live-orders-sec,
  .order-history-sec,
  .auto-orders-sec,
  .notice-sec {
    padding: 0 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .live-orders-sec .table-wrap,
  .order-history-sec .table-wrap,
  .auto-orders-sec .table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
  }

  .nav.nav-pills {
    padding: 0 10px !important;
    margin: 10px auto !important;
  }

  .nav.nav-pills li {
    margin: 4px !important;
    flex: 1 1 30% !important;
  }

  .nav.nav-pills li a {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    text-align: center;
  }

  .search input[type="text"],
  .search .input-group {
    width: 100% !important;
    max-width: 100% !important;
  }

  .notice-box {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 767px) {
  .live-orders-sec h3 {
    margin-top: 24px !important;
  }
}
@media (max-width: 767px) {
  .order-history-sec h3 {
    margin-top: 24px !important; /* 간격 조절: 20~32px 선에서 자유 조절 가능 */
  }
}