@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}




/* 탭 전체 영역 */
.tab-wrap { width: 100%; float: left;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 20px;
  justify-content: center; background-color: #000
}

/* 탭 버튼 */
.tab-wrap .tab {
  padding: 10px 20px;
  background: #f1f1f1;
  color: #333;
  text-decoration: none;
  border-radius: 30px;
  border: 1px solid #ccc;
  font-weight: 600;
  transition: all 0.2s ease;
}

.tab-wrap .tab:hover {
  background: #e0e0e0;
}

/* 선택된 탭 */
.tab-wrap .tab.active {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* 각 연도 블록 */
.year-section {
  margin-bottom: 40px;
}

.year-section h3 {
  font-size: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  text-align: left;
}

.year-section ul {
  list-style: none;
  padding-left: 0;
}

.year-section li {
  text-align: left;
  margin-bottom: 8px;
  font-size: 16px;
}

.year-section li a {
  color: #0077cc;
  text-decoration: none;
}

.year-section li a:hover {
  text-decoration: underline;
}

.empty {
  color: #999;
  font-style: italic;
  text-align: left;
}




.upload-box{width: 100%; float: left; padding: 20px 40px; border-radius: 30px; background-color: #f7f7f7; margin-bottom: 30px  ;}
.upload-box .title{width: 100%; float: left; font-size: 30px;}


.tbl-sw { text-align:center;  width: 100%; float: left; padding: 0px}
.tbl-sw .upload-box { display:inline-block;  width: 100%; float: left ; border-radius: 20px; padding:clamp(15px, 3.906vw, 50px); background:#fafbfb; border:1px solid #e5e5e5;  display: grid;   grid-template-columns: repeat(auto-fit, minmax(250px, auto));}

.clearfix{width: 100%; display: flex; justify-content: flex-start; flex-direction: column;}


.tbl-sw.plain h2 { float:left; margin-top:0;  text-align: left ;font-size: var(--tit-md-size)!important;line-height: 130%;}
.food_downbtn { float:left;}
.food_downbtn a{ width: auto;float:left; padding: 15px 20px 15px 65px;!important; background-color:var(--primary);; color: #fff; text-align: left; position: relative; border-radius: 8px}
.food_downbtn a:before{content: "\eb44";    font-family: unicons-line; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 25px; width: 40px; height: 40px; border-radius: 6px; background-color: #000; display: flex;  justify-content: center;  align-items: center;}


.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px}
.btn_bo_adm input {padding:8px;border:0;background:#e8180c;color:#fff;text-decoration:none;float: left}

.tbl-sw .frm_info { display:inline-block; text-align:left; background:transparent url('img/icon_warning.png') left top no-repeat;  width: 100%; }

.tbl-sw .frm_info ul { width: 100%; float: left }
.tbl-sw .frm_info ul  li{ width: 100%; float: left ;  position: relative;padding: 5px 0px 5px 10px; line-height: 120%;}
.tbl-sw .frm_info ul  li:before{ content: "";  width: 4px; height: 4px; border-radius: 100%; background-color: var(--primary);; position: absolute; left: 0px; top: 12px;}



.tbl-sw .frm-warning {  padding:0px; float: left; width: auto; display: flex; justify-content: flex-start; flex-direction: column;}
.attach-file { float:inherit; text-align:center; margin-top:20px; }



  .attach-file { margin-bottom: 20px
  }

  .attach-file input[type="file"] {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px 0px 0px 6px;
    background: #fff;
    cursor: pointer;
  }

  .attach-file input[type="submit"].btn {
    padding: 15px 16px!important;height: auto;
     background-color: #333;
    color: #fff;
    font-size: 14px;
    border: none!important;
    border-radius: 0px 6px 6px 0px;
    cursor: pointer;
    transition: background-color 0.3s; outline: none!important;box-shadow:none;  
  }

  .attach-file input[type="submit"].btn:hover {
    background-color: #000;
  }

  @media screen and (max-width: 480px) {
    .attach-file {
      flex-direction: column;
      align-items: stretch;
    }
  }


.history-group {
  margin-bottom: 60px;
  display: flex;
  flex-wrap: wrap;
}
.history-group .left {
  width: 100%;
  margin-bottom: 10px;
}
.history-tit {
  font-size:clamp(26px, 3.125vw, 40px);
  font-weight: bold;
  color: #222;
  margin-top: 10px; width: 100%;float: left
}
.history-year-block {
  margin-bottom: 30px;
}


.history-year-block .year {
  font-size: clamp(15px, 1.563vw, 20px);
  font-weight: bold;
  margin-bottom: 10px;
}
.inner-list dt {
  font-weight: bold;
  margin-top: 5px;
}
.inner-list dd {
  margin-left: 10px;
}
.inner-list dd .dot {
  padding-left: 0px;
  position: relative;
}