@charset "utf-8";
.sp_block_01{width: 100%; float: left; height: var(--sp-block-01)!important;}
.sp_block_02{width: 100%; float: left; height: var(--sp-block-02)!important;}
.sp_block_03{width: 100%; float: left; height: var(--sp-block-03)!important;}
.sp_block_04{width: 100%; float: left; height: var(--sp-block-04)!important;}
.sp_block_05{width: 100%; float: left; height: var(--sp-block-05)!important;}
.sp_block_06{width: 100%; float: left; height: var(--sp-block-06)!important;}
.sp_block_07{width: 100%; float: left; height: var(--sp-block-07)!important;}
.sp_block_08{width: 100%; float: left; height: var(--sp-block-08)!important;}
.sp_block_09{width: 100%; float: left; height: var(--sp-block-09)!important;}
.sp_block_10{width: 100%; float: left; height: var(--sp-block-10)!important;}
.sp_block_11{width: 100%; float: left; height: var(--sp-block-11)!important;}
.sp_block_12{width: 100%; float: left; height: var(--sp-block-12)!important;} 


.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; }
.modal-box { background: #fff; padding:0px; border-radius: 10px; width: 90%; max-width:1000px;   height: 500px; overflow-y: auto; position: relative ; padding-top: }
.modal-title { font-size: 20px; font-weight: bold; text-align: center;  width: 100%; position: sticky; left: 0px; top: 0px; background-color: #333; color: #fff; height: auto; text-align: left;  padding: 20px 20px; }
.modal-title .close{ position: absolute; top: 10px; right: 20px;  background-color:transparent}
.modal-title .close i{color: #fff; font-size: 30px; }


.modal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 20px;  width: 100%; float: left; padding: 30px}



.widget-sample { border: 1px solid #ccc; border-radius: 8px; padding: 10px; cursor: pointer; text-align: center; transition: all 0.2s ease; }
.widget-sample:hover { border-color: #007BFF; background: #f0f8ff; }
.widget-sample img { width: 100%; height: auto; border-radius: 4px; }
.btn-add-block { background: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 5px; font-size: 14px; cursor: pointer; }
.block-delete-btn, .block-move-btn { padding: 6px 12px; font-size: 13px; border: none; border-radius: 4px; cursor: pointer; }
.block-delete-btn { background: #dc3545; color: #fff; }
.block-delete-btn:hover { background: #c82333; }
.block-move-btn { background: #6c757d; color: white; margin-left: 5px; }
.block-move-btn:hover { background: #5a6268; }
	
	.block-insert-btn {
    text-align: center;
    margin: 20px 0;
}
.block-insert-btn button {
    background-color: #28a745;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}
.block-insert-btn button:hover {
    background-color: #218838;
}

.block-admin-controls{ position: absolute; right: 0px;  bottom: 0px}


.block-admin_btnbox{width: 100%; float: left; display: flex;flex-direction: row;justify-content: center; grid-gap: 20px}
.block-admin_btnbox .total_save{width: auto; float: left; }

#block-container{background-color:var(--sub-body-color); width: 100%; float: left}




    /* PC 탭 메뉴 */
    .tab-menu {
      display: flex; flex-direction: row;
      grid-gap:  clamp(3px, 0.625vw, 8px);
      margin-bottom: clamp(30px, 6.250vw, 80px); width: 100%; float: left
    }

    .tab-btn {
      padding: clamp(10px, 2.188vw, 28px) 0px;
     font-size:calc(var(--tx-sm-size) * 1.1);
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 8px;
      cursor: pointer; width: 100%;font-weight:700;
    }

    .tab-btn.active {
      background-color: var(--primary);;
      color: #fff;
      font-weight:700;
      border-color: var(--primary);;
    }

    /* 모바일 select 메뉴 */

.select-wrapper {
  position: relative;
  display: inline-block;
 width: 100%!important;
}


/* 기본 select 박스 스타일 */
.tab-select {
	  width: 100%!important;
  background-color: var(--primary)!important;     /* 선택된 영역 배경 */
  color: #fff;                /* 선택된 텍스트 색상 */
  padding: 13px 20px!important;
  border-radius: 4px;
  border: 1px solid var(--primary);
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; height: auto!important; display: none
}

/* 드롭다운 옵션 스타일 */
.tab-select option {
  background-color: #eee;     /* 드롭다운 기본 배경 */
  color: #000;                /* 기본 텍스트 색 */
}

/* Firefox 전용: hover 및 선택된 옵션 스타일 */
@-moz-document url-prefix() {
  .tab-select option:hover {
    background-color: #333;
    color: #fff;
  }
}
/* 화살표 아이콘 */
.select-wrapper i.select-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size:30px;
  color: #fff;
  pointer-events: none; /* 클릭 방지 */
  z-index: 1;
}

    /* 콘텐츠 */
   .tab-content {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.3s;
}

.tab-content.active {
  visibility: visible;
  opacity: 1;
  height: auto;
  position: relative;
  z-index: 1;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

    .tab-content h2 {
      font-size: 24px;
      margin-bottom: 20px;
    }

    .tab-content p {
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 16px;
    }

    /* 반응형 처리 */
    @media (max-width: 768px) {
      .tab-menu {
        display: none;
      }
      .tab-select {
        display: block;
        width: 100%;
      }
    }