/* cart-table-flex.css
   기존 .cart-table-area 와 동일한 구조지만, 가로폭이 자동으로 조정되도록 커스터마이징한 버전입니다.
   사용 예시: <div class="cart-table-area-flex"> ... </div>
*/

/* 전체 구조는 그대로 유지하되, display:flex 및 width 고정 해제 */
.main-content-wrapper .cart-table-area-flex table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.main-content-wrapper .cart-table-area-flex table thead {
  display: table-header-group;
}

.main-content-wrapper .cart-table-area-flex table tbody {
  display: table-row-group;
}

.main-content-wrapper .cart-table-area-flex table thead tr,
.main-content-wrapper .cart-table-area-flex table tbody tr {
  display: table-row;
}

.main-content-wrapper .cart-table-area-flex table thead tr th,
.main-content-wrapper .cart-table-area-flex table tbody tr td {
  display: table-cell;
  width: auto;
  max-width: none;
  text-align: center;
  padding: 10px 12px;
  vertical-align: middle;
  font-size: 14px;
}

/* 헤더 스타일 */
.main-content-wrapper .cart-table-area-flex table thead tr th {
  background-color: #f5f7fa;
  color: #242424;
  font-weight: 500;
  text-transform: capitalize;
  border-bottom: 2px solid #eaeaea;
}

/* 본문 스타일 */
.main-content-wrapper .cart-table-area-flex table tbody tr td {
  border-bottom: 1px solid #f0f0f0;
}

/* 가변형 비율 클래스 - 필요 시 개별 컬럼에 부여 */
.col-w-10 { width: 10% !important; }
.col-w-15 { width: 15% !important; }
.col-w-20 { width: 20% !important; }
.col-w-25 { width: 25% !important; }
.col-w-30 { width: 30% !important; }
.col-grow { width: auto !important; }

/* 반응형 개선 */
@media (max-width: 767px) {
  .main-content-wrapper .cart-table-area-flex table thead {
    display: none;
  }
  .main-content-wrapper .cart-table-area-flex table tbody tr {
    display: block;
    margin-bottom: 15px;
    border-bottom: 2px solid #f5f5f5;
  }
  .main-content-wrapper .cart-table-area-flex table tbody tr td {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 13px;
  }
  .main-content-wrapper .cart-table-area-flex table tbody tr td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #444;
  }
}



/* 기본 버튼 스타일 */
.btn-blue {
  background-color: #004DA0;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* hover 시 색상 변경 */
.btn-blue:hover {
  background-color: #FFE400;
  color: #000;
}

/* 비활성화 상태 */
.btn-blue:disabled {
  background-color: #c0c0c0;
  color: #666;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 포커스(클릭 시 외곽선 제거) */
.btn-blue:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 77, 160, 0);
}

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.modal-card{
  width:min(520px, 92vw); background:#fff; border-radius:12px; padding:20px 20px 16px;
  box-shadow:0 12px 40px rgba(0,0,0,.2);
}
.modal-title{ margin:0 0 8px; font-size:18px; font-weight:700; }
.modal-body{ white-space:pre-wrap; word-break:break-word; color:#333; margin-bottom:14px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; }
.modal-error .modal-title{ color:#b00020; }



/* == 중앙 팝업 == */
.cart-flyout{
  position: fixed; z-index: 9999; background: #fff; border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.22); padding: 18px 20px; width: 360px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);  /* 화면 중앙 */
}
.cart-flyout h5{
  margin: 0 24px 10px 0; font-size: 16px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-flyout .price{ font-size: 14px; color:#666; }
.cart-flyout .close-x{
  position:absolute; top:10px; right:12px; cursor:pointer; font-size:16px; color:#999;
}

/* 수량 가로 정렬 */
.cart-flyout .qty-group{
  display:flex; align-items:center; gap:10px; margin-top:12px;
}
.cart-flyout .qty-btn{
  width:40px; height:40px; border:0; border-radius:10px; cursor:pointer;
  background:#f3f3f3; font-size:20px; line-height:40px; text-align:center;
}
.cart-flyout .qty-input{
  width:90px; height:40px; text-align:center; font-size:16px;
  padding:0 10px; border:1px solid #ddd; border-radius:10px;
}
/* number 스핀 제거 */
.cart-flyout .qty-input::-webkit-outer-spin-button,
.cart-flyout .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cart-flyout .qty-input{ -moz-appearance: textfield; }

.cart-flyout .total-line{ margin-top:12px; font-size:14px; text-align:right; }
.cart-flyout .total-line b{ font-size:16px; }

.cart-flyout .actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top:12px;
}
.cart-flyout .btn{ border:0; border-radius:10px; padding:10px 14px; cursor:pointer; }
.cart-flyout .btn-primary{ background:#222; color:#fff; }
.cart-flyout .btn-light{ background:#eee; }

/* 작은 화면 대응 */
@media (max-width: 420px){
  .cart-flyout{ width: 92vw; }
}


/***************************************
* ✅ ORDERLIST 전용 스타일 (Scoped)
* 모든 클래스는 orderlist- prefix 사용
***************************************/
.orderlist-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 40px auto;
    background: #fff;
    padding: 30px 40px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    font-family: 'Noto Sans KR', sans-serif;
}

/* 🔹 필터바 영역 */
.orderlist-filter-bar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.orderlist-filter-tabs button,
.orderlist-period-tabs button {
    border: none;
    background: #f3f3f3;
    color: #555;
    padding: 8px 14px;
    border-radius: 20px;
    margin: 3px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}
.orderlist-filter-tabs button.active,
.orderlist-period-tabs button.active {
    background: #333;
    color: #fff;
}

/* 🔹 검색바 */
.orderlist-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}
.orderlist-search-bar input {
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 7px 14px;
    width: 200px;
    font-size: 14px;
}
.orderlist-search-bar button {
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    background: #5bc0de;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}
.orderlist-search-bar button:hover {
    background: #31b0d5;
}

/* 🔹 테이블 영역 */
.orderlist-table-container {
    width: 100%;
    overflow-x: auto;
}
.orderlist-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.orderlist-table th {
    background: #fafafa;
    border-bottom: 2px solid #ccc;
    padding: 12px;
    text-align: center;
}
.orderlist-table td {
    border-bottom: 1px solid #eee;
    padding: 14px 10px;
    text-align: center;
}
.orderlist-table td, .orderlist-table th {
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🔹 상태 배지 */
.orderlist-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
}
.orderlist-badge-open { background: #5cb85c; }
.orderlist-badge-release { background: #5bc0de; }
.orderlist-badge-close { background: #777; }
.orderlist-badge-cancel { background: #d9534f; }

/* 🔹 상세 버튼 */
.orderlist-btn-detail {
    background: #333;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}
.orderlist-btn-detail:hover { background: #000; }

/* 🔹 다운로드, 페이징 */
.orderlist-download-bar { text-align: right; margin-top: 15px; }
.orderlist-download-bar button {
    background: #5cb85c;
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
}
.orderlist-download-bar button:hover { background: #4cae4c; }

.orderlist-paging { text-align: center; margin-top: 25px; }
.orderlist-paging a {
    display: inline-block;
    padding: 6px 10px;
    margin: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
}
.orderlist-paging a.active {
    background: #333;
    color: #fff;
    border-color: #333;
}
.orderlist-no-data { text-align: center; padding: 40px; color: #777; }

/* 🔹 모바일 카드형 (768px 이하) */
.orderlist-card-list { display: none; }
.orderlist-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.orderlist-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 14px;
}
.orderlist-card-label { color: #777; font-weight: 500; flex: 1; }
.orderlist-card-value { color: #333; font-weight: 600; text-align: right; flex: 2; }
.orderlist-card-action { text-align: right; margin-top: 10px; }

/* ✅ 반응형 */
@media (max-width: 768px) {
    .orderlist-table-container, .orderlist-table, .orderlist-download-bar { display: none !important; }
    .orderlist-card-list { display: block; margin-top: 15px; }
    .orderlist-wrapper { padding: 20px 15px; border: none; box-shadow: none; }
    .orderlist-filter-bar { flex-direction: column; gap: 8px; }
    .orderlist-search-bar { flex-direction: column; align-items: stretch; }
    .orderlist-search-bar input, .orderlist-search-bar button { width: 100%; margin-bottom: 6px; }
    .orderlist-filter-tabs button, .orderlist-period-tabs button {
        flex: 1 1 45%; font-size: 13px; padding: 7px; margin: 2px 0;
    }
    .orderlist-card { font-size: 13px; }
}