@media (max-width: 1200px) {
    .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
        margin-top: 50px;
    }

}

@media (max-width: 575px) {
    .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
        margin-top: 70px;
    }

}


@media (max-width: 1008px) {
    .custom-select {
        position: relative;
        top: -22px;
    }
}


@media (max-width: 402px) {
    .custom-select {
        position: relative;
        top: -44px;
    }
}

@media (max-width: 390px) {

}


.iframe-wrap {
    padding-top:0px;

}


.iframe-wrap iframe {
    width: 100%;
    height:calc(85vh - 180px);
    border: 0px solid #ccc;
    border-radius: 6px;
}

.btn {
    transition: all 0.25s ease;
}

.btn:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}



.header-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.header-icon img {
    width: 35px;
    height: 35px;
    position: relative;
    top: -2px;
    margin-right: 5px;
}

.header-text {
    font-size: 14px;
}

/* 섹션(주문하기 + 버튼들) */
.section-header {
    display: flex;
    justify-content: space-between; /* 왼쪽 제목 + 오른쪽 버튼 */
    align-items: center;
    width: 100%;
}

/* 주문하기 제목 */
.section-title {
    font-size: 24px;
    font-weight: bold;
    color: black;
    min-width:90px;
}

.section-title2 {
    font-size: 24px;
    font-weight: bold;
    color: black;
    min-width:90px;
}

/* product_list 버튼 영역 오른쪽 정렬 */
.product_list {
    text-align: right;
    margin-right:8px;
    margin-left: 3px;
}
.product_list form {
    display: inline-block;
    margin: 0;
}
/* 버튼들 간격 정리 */
.product_list .btn {
    margin: 2px 0px 1px 1px;
}



.btn-outline {
    background: none;
    border: 1px solid #ccc;
    color: #000;
}
.btn-outline.active,
.btn-outline:hover {
    background: #6559FF;
    color: #fff;
}

.custom-select {
    width: 100px;
    padding: 10px 35px 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff url('data:image/svg+xml;utf8,<svg fill="%23777" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 20,0 10,10"/></svg>')
                no-repeat;
    background-position: calc(100% - 10px) calc(50% + 5px);

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s ease;
    font-size: 14px;
    cursor:pointer;
    display:inline-block;
}

/* hover */
.custom-select:hover {
    border-color: #337ab7;
    cursor:pointer;
    padding: 10px 35px 10px 12px;
}

/* focus */
.custom-select:focus {
    outline: none;
    border-color: #337ab7;
    box-shadow: 0 0 4px rgba(51, 122, 183, 0.4);
}

.filter-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 왼쪽 / 오른쪽 자동 정렬 */
    align-items: center; /* 세로 중앙 */
    padding: 15px 0px 20px 10px;
    background-color: #fff;
}

.search_1{
    padding: 10px 0px 0px 10px;
    background-color: #fff;
    border-radius: 15px 15px 0 0;
}

.divider {
    border-top: 0.5px solid #dddddd;
    margin-right: 20px;
}

.order-timer-main{
    width:100%; 
    background-color:#fff;
    padding:10px 0px 3px 5px;
    border-radius: 15px 15px 0 0;
}

@media (max-width: 850px) {
    .order-timer-box{
        display:none !important;
    }

    .product_list_sub{
        /*padding-bottom: 10px !important;*/
    }
}


@media (max-width: 1310px) {

    .product_list_sub{
        /*padding-bottom: 10px !important;*/
    }
}


#openSlotBtn{
    vertical-align:bottom;
}


.order-timer-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:30%;
  width:360px;
  min-width:360px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 0px solid #e6e6e6;
  background-color:#fff;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 왼쪽 영역 */
.order-timer-left {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color:#fff;
}

.order-product-wrap{
    display:flex;
    justify-content:space-between; /* 좌우 끝 정렬 */
    align-items:center;            /* 세로 기준선 맞추기 */
    gap:16px;                      /* 필요 시 간격 */
}

/* 타이머 영역 */
.order-timer-box{
    display:flex;
    align-items:center;
}

/* 버튼 영역 */
.product_list{
    display:flex;
    align-items:center;
    flex-wrap:wrap; /* 버튼 많을 경우 줄바꿈 */
    gap:6px;  
}

.product_list_sub{
      
}

/* 아이콘 */
.timer-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f4f3ff;
  color: #6b63ff;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* 텍스트 */
.timer-text .title {
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

.timer-text .desc {
  margin-top: 4px;
  font-size: 12px;
  color: #ff5a5a;
}

/* 오른쪽 타이머 */
.timer-badge {
  padding: 8px 14px;
  border-radius: 10px;
  background: #f4f3ff;
  color: #6b63ff;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}


/* 왼쪽 버튼 그룹 */
.list_1 {
    display: flex;
    flex-wrap: wrap; /* 버튼이 넘칠 경우 자동 줄바꿈 */
    gap: 5px;
}

/* 오른쪽 셀렉트박스 */
.list_2 {
    display: flex;
    align-items: center;
}

.btn-sm {
    padding: 0.5rem 1.0rem;
}

*{box-sizing:border-box;}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;
    background:#f3f4f6;
    color:#111827;
}

.slot-page{
    max-width:940px;
    margin:0 auto;
}

.slot-breadcrumb{
    font-size:13px;
    color:#6b7280;
    margin-bottom:8px;
}

.slot-card{
    background:#fff;
    border-radius:14px;
    padding:24px 24px 20px;
    box-shadow:0 10px 30px rgba(15,23,42,0.06);
}

.slot-header{
    margin-bottom:24px;
}
.slot-title{
    font-size:22px;
    font-weight:700;
    letter-spacing:-0.02em;
}

/* grid layout */
.slot-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 20px;
}

.slot-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.slot-label{
    font-size:16px;
    font-weight:600;
    color:#4b5563;
}

.slot-input, .slot-select{
    width: 100%;
    height: 3.3em;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 9px 11px;
    font-size: 14px;
    outline: none;
    background: #fff;
    transition: all .15s ease;
}
.slot-input:focus,
.slot-select:focus{
    border-color:#2563eb;
    background:#fff;
    box-shadow:0 0 0 1px rgba(37,99,235,0.25);
}

.slot-input[readonly]{
    background:#f3f4f6;
    color:#6b7280;
    cursor:not-allowed;
}

.slot-helper{
    font-size:11px;
    color:#9ca3af;
}

.slot-suffix-box{
    display:flex;
    align-items:center;
    gap:6px;
}
.slot-suffix{
    white-space:nowrap;
    font-size:13px;
    color:#6b7280;
}

hr.slot-divider{
    border:none;
    border-top:1px solid #e5e7eb;
    margin:20px 0;
}

/* toggle buttons (캠페인) */
.slot-toggle-group{
    display:inline-flex;
    border-radius:10px;
    padding:3px;
    gap:8px;
}

.slot-toggle{
    border:1px solid #d1d5db;
    background:transparent;
    font-size:16px;
    padding:7px 16px;
    
    border-radius:10px;
    cursor:pointer;
    color:#6b7280;
    transition:all .15s ease;
    width:100%;
}

.slot-toggle.active {
    background-color: #6559FF !important;
    color: #ffffff !important;
    border-color: #6559FF !important;
}

/* bottom buttons */
.slot-actions{
    margin-top:20px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.btn{
    border-radius:6px;
    padding:11px 20px;
    font-size:14px;

    cursor:pointer;
    transition:all .15s ease;
}

.btn-primarya {
    background: #6559FF;
    color: #fff;
    border-color: #6559FF;
}

.btn-primarya:hover{
    background:#1d4ed8;
    color: #fff;
}
.btn-ghost{
    background:#fff;
    color:#374151;
    border-color:#e5e7eb;
}
.btn-ghost:hover{
    background:#f9fafb;
}

/* 반응형 */
@media (max-width:368px){
    body{padding:16px;}
    .slot-card{padding:18px 16px 16px;}
    .slot-grid{grid-template-columns:1fr;}
}


/* 레이어 팝업 공통 */
.slot-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.35);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.slot-modal{
    max-width:950px;
    width:100%;
    padding:16px;
}
@media(max-width:368px){
    .slot-modal{
        padding:10px;
    }
}

label {
    margin-top: 0.5rem;
    margin-bottom: 0.3rem;
}


@media (max-width: 768px) {
    .page-wrapper.compact-wrapper .page-body-wrapper .page-body {
        margin-top: 30px;
    }
}

@media (max-width: 1200px) {
    .section-header {
        padding-top: 10px !important;
    }
}

/* 모바일에서도 자연스럽게 유지 */
@media (max-width: 410px) {
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;  /* 좌-우 자동배분 */
    }

    .order_solt_create {
        margin-left: auto;  /* 오른쪽 끝으로 밀기 */
    }

    .order_solt_create button {
        bottom: 0 !important;  /* 기존 top 보정 제거 */
    }
}

@media (max-width: 1010px) {
    .btn-sm {
        padding: 5px 15px !important;
        font-size: 13px !important;
    }

}


@media (max-width: 868px) {
}


@media (max-width: 481px) {
}

@media (max-width: 409px) {
    .section-header {
        display: inline-block !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }


}


.custom-select2 {
    width: 120px;
    padding: 8px 35px 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff url('data:image/svg+xml;utf8,<svg fill="%23777" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 20,0 10,10"/></svg>')
                no-repeat;
    background-position: calc(100% - 10px) calc(50% + 5px);

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s ease;
    font-size: 15px;
    cursor:pointer;
    display:inline-block;
}

/* hover */
.custom-select2:hover {
    border-color: #337ab7;
    cursor:pointer;

}

/* focus */
.custom-select2:focus {
    outline: none;
    border-color: #337ab7;
    box-shadow: 0 0 4px rgba(51, 122, 183, 0.4);
}
.select_1{
    border:0px solid red; 
    width:120px; 
    padding-bottom:10px;
    display:inline-block;
}

.select_2{
    transform: scale(1.4);   /* 1.0 → 기본 크기 / 1.4 = 40% 증가 */
    -webkit-transform: scale(1.4); /* Safari 대응 */
    margin-right: 5px;
    display:inline-block;
    padding: 2px 0px 0px 0px;
}

.select_3, .select_4, .select_5{
    border:0px solid blue; 
    width:auto; 
    padding-bottom:10px;
    display:inline-block;
    font-size: 15px;
}

.select_4 input{
    height:34px;
    outline: none;
    border-color: #337ab7;
    border-radius: 6px;
    border:1px solid #bdbdbd; 
    padding-left:10px;
    padding-bottom:0px;
}


.title2{
    font-size: 15px;
    display:inline-block;
    padding:5px;
}

.select_2_3{
    border:0;
    width:auto;
    padding-bottom:10px;
    display:inline-block;
    font-size:15px;
}

/* 안쪽 박스 (테두리 + 배경) */
.date-box{
    display: inline-flex;
    align-items: center;
    gap: 6px;

    height:34px;
    padding: 0 10px;

    border-radius: 6px;
    border:1px solid #bdbdbd;
    background:#fff !important;
    background-color:#fff !important;
    position:relative;
    top:2px;
}

/* 체크박스 크기 + 정렬 */
.date-box input[type="checkbox"]{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    margin-right: 4px;
    cursor:pointer;
}

/* 달력 아이콘 */
.calendar-icon{
    width:24px;
    height:24px;
    display:block;
}

/* 날짜 입력 인풋 (박스 안에 자연스럽게) */
.dateRange_input{
    border:none;
    outline:none;
    height:100%;
    font-size:15px;
    padding:0 4px;
    flex:1 1 auto;
    width: 190px;
}

.btn-outline.active, .btn-outline:hover{
    position:relative;
    top:-1px;
}


.dateRange_css,
.dateRange_css:focus,
.dateRange_css:hover,
.dateRange_css:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

#btnOrder {
    background: #6559FF !important;
    color: #fff !important;
    border-color: #6559FF !important;
}

#btnCopy, #btnNaverCrawl {
    background: rgb(240, 239, 255) !important;
    color: #6559FF !important;
    border-color: rgb(240, 239, 255) !important;
}

#btnDelete, #stop_reason_date {
    background:#ffe1e8 !important;
    color:#ff768f !important;
    border-color:#ffeef2 !important;
}

.campaign_load.active{
    background-color: #6559FF !important;
    color: #fff;
    border-color: #6559FF;
}

/* ✅ option 기본 스타일 유지 (항상 흰 배경 + 검정 글씨) */
.campaign_load option {
    background-color: #fff;
    color: #000;

}

.campaign_load {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background-color: #fff;
    cursor:pointer;
    width:130%;
    padding-left:2px;
    color: #7c8798;
}

/* 선택된 option도 기본 스타일 유지 */
.campaign_load option:checked {
    background-color: #fff;
    color: #000;
}

/* 포커스 시 검정 테두리 제거 */
.campaign_load:focus,
.campaign_load:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: #d1d5db;
    cursor:pointer;
}