/* MAIN_stack1 - 위젯 순차 나열 스타일 (메인용 믹스박스) */
.MAIN_stack1{width: 100%; float: left;
}
/* ===== contents-container 포지션 기준 ===== */
.MAIN_stack1 .contents-container {
  position: relative; padding: 100px 0px!important
}

/* ===== 데코 이미지 (항목2 이미지) ===== */
.MAIN_stack1 .deco_img {
  position: absolute;
  z-index: 0;
  pointer-events: none; /* 클릭 방해 안함 */
}

.MAIN_stack1 .deco_img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 관리자 모드에서 데코 이미지 편집 가능하게 */
.MAIN_stack1 .deco_img.wg_edit_img {
  pointer-events: auto;
  cursor: pointer;
}

/* 모바일에서 데코 이미지 숨김 또는 크기 조절 */
@media only all and (max-width: 767px) {
  .MAIN_stack1 .deco_img1 {
    width: 200px;

  }
  .MAIN_stack1 .deco_img2 {
    display: none; /* 모바일에서 숨김 */
  }
}

/* ===== wg_side 래퍼 ===== */
.MAIN_stack1 .wg_side {
  width: 100%;
  float: left;
  position: relative;
  z-index: 1; /* 데코 이미지 위에 표시 */
}

/* ===== 타이틀 영역 (sub_stit_box) ===== */
.MAIN_stack1 .sub_stit_box {
  width: 100%;
  float: left;
  margin-bottom: 30px;
  position: relative;
}

/* 뱃지를 타이틀 영역 우측에 배치 */
.MAIN_stack1 .sub_stit_box .stack_badge {
  position: absolute;
  top: 0;
  right: 0;
}

/* ===== 위젯 영역 레이아웃 (JSL_MAIN_01 스타일) ===== */
.MAIN_stack1 .widget-area {
  display: flex;
  gap: 20px;
  width: 100%;
  float: left;
  align-items: stretch;
}

/* 위젯 아이템 기본 */
.MAIN_stack1 .widget-area .widget-item {
  flex: 1;
  min-width: 0;
}

/* 1번 위젯: 왼쪽 영역 */
.MAIN_stack1 .widget-area .widget-1 {
  flex: 1 1 auto;
  max-width: 510px;
}

/* 2번 위젯: 오른쪽 영역 */
.MAIN_stack1 .widget-area .widget-2 {
  flex: 1;
}

/* 태블릿 반응형 (991px 이하) - 세로 배열 */
@media only all and (max-width: 991px) {
  .MAIN_stack1 .widget-area {
    flex-direction: column;
  }
  .MAIN_stack1 .widget-area .widget-1 {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .MAIN_stack1 .widget-area .widget-2 {
    flex: none;
    width: 100%;
  }
}

/* 모바일 반응형 (767px 이하) */
@media only all and (max-width: 767px) {
  .MAIN_stack1 .widget-area {
    gap: 15px;
  }
  .MAIN_stack1 .widget-area .widget-1,
  .MAIN_stack1 .widget-area .widget-2 {
    width: 100%;
  }
}

.MAIN_stack1 .sub_stit2,
.MAIN_stack1 .sub_stit3,
.MAIN_stack1 .sub_stit4,
.MAIN_stack1 .sub_stit5 {
  width: 100%;
  float: left;
}


/* 타이틀 링크 스타일 */
.MAIN_stack1 .sub_stit_link {
  width: 100%;
  float: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.MAIN_stack1 .sub_stit_link .golinkbox a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--primary, #333);
  text-decoration: none;
  transition: color 0.2s;
}

.MAIN_stack1 .sub_stit_link .golinkbox a:hover {
  color: var(--primary-hover, #000);
}

/* 모바일 타이틀 */
@media only all and (max-width:767px) {
  .MAIN_stack1 .sub_stit_box {
    margin-bottom: 15px;
  }

  .MAIN_stack1 .sub_stit2 {
    font-size: calc(var(--tit-md-size, 24px) * 0.85);
    margin-bottom: 8px;
  }

  .MAIN_stack1 .sub_stit3 {
    font-size: calc(var(--tit-sm-size, 14px) * 1);
  }
}

/* COM_stack - 위젯 순차 나열 스타일 */

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
  .COM_stack .sub_stit {
    width: 100%;
    float: left;
    font-size: calc(var(--tit-md-size) * 1);
    font-weight: 700;
    line-height: 130%;

  }

  .COM_stack .stack_area {
    width: 100%;
    float: left;
  }

  .COM_stack .stack_area .contents-container {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    
  }

  .COM_stack .stack_item {
    width: 100%;
    float: left;
  }

  .COM_stack .stack_title {
    width: 100%;
    float: left;
    font-size: calc(var(--tit-mds-size) * 0.9);
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary, #333);
  }

  .COM_stack .stack_content {
    width: 100%;
    float: left;
  }
}

/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}

/**** 모바일 ****/
@media only all and (max-width:767px) {
  .COM_stack .sub_stit {
    width: 100%;
    float: left;
    font-size: calc(var(--tit-md-size) * 1);
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 20px;
  }

  .COM_stack .stack_area {
    width: 100%;
    float: left;
  }

  .COM_stack .stack_area .contents-container {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .COM_stack .stack_item {
    width: 100%;
    float: left;
  }

  .COM_stack .stack_title {
    width: 100%;
    float: left;
    font-size: calc(var(--tit-mds-size) * 0.85);
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary, #333);
  }

  .COM_stack .stack_content {
    width: 100%;
    float: left;
  }
}

/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/

/* 빈 내용 스타일 */
.COM_stack .empty_li,
.MAIN_stack1 .empty_li {
  width: 100%;
  text-align: center;
  padding: 50px 20px;
  color: #999;
  font-size: 14px;
}

/* ===== 관리자 모드 스타일 (권한 8 이상) ===== */
.COM_stack .stack_admin_mode,
.MAIN_stack1 .stack_admin_mode {
  position: relative;
  padding: 0 0px;
}

.COM_stack .stack_admin_mode .stack_item,
.MAIN_stack1 .stack_admin_mode .stack_item {
  position: relative;
  border: 2px dashed #f97316;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.COM_stack .stack_admin_mode .stack_item:hover,
.MAIN_stack1 .stack_admin_mode .stack_item:hover {
  border-color: #ea580c;
  background-color: rgba(249, 115, 22, 0.03);
}

/* 우측 상단 뱃지 (내부 배치) */
.COM_stack .stack_badge,
.MAIN_stack1 .stack_badge {
  position: absolute;
  top: 20px;
  right: 10%;
  background: #f97316;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 4px;
  z-index: 99999;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.COM_stack .stack_badge:hover,
.MAIN_stack1 .stack_badge:hover {
  background: #ea580c;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
}

/* 뱃지 힌트 텍스트 */
.COM_stack .stack_badge .badge_hint,
.MAIN_stack1 .stack_badge .badge_hint {
  display: block;
  font-size: 9px;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2px;
  white-space: nowrap;
}

/* 모바일에서 관리자 패딩 조정 */
@media only all and (max-width:767px) {
  .COM_stack .stack_admin_mode,
  .MAIN_stack1 .stack_admin_mode {
    padding: 0 15px;
  }

  .COM_stack .stack_admin_mode .stack_item,
  .MAIN_stack1 .stack_admin_mode .stack_item {
    padding: 15px;
  }

  .COM_stack .stack_badge,
  .MAIN_stack1 .stack_badge {
    font-size: 11px;
    padding: 5px 10px;
    top: 15px;
    right: 5%;
  }

  .COM_stack .stack_badge .badge_hint,
  .MAIN_stack1 .stack_badge .badge_hint {
    font-size: 8px;
    margin-top: 1px;
  }
}

/* 통합 위젯 스킨 버튼 (우측 상단) */
.COM_stack,
.MAIN_stack1 {
  position: relative;padding:0px 0px!important
}

/* 직속 버튼 주황색 (> 직계 자식 선택자) */
.COM_stack > .grid_layout_badge,
.MAIN_stack1 > .grid_layout_badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f97316;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  z-index: 100;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
  transition: all 0.2s ease;
}

.COM_stack > .grid_layout_badge:hover,
.MAIN_stack1 > .grid_layout_badge:hover {
  background: #ea580c;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.4);
  transform: translateY(-1px);
}

@media only all and (max-width:767px) {
  .COM_stack > .grid_layout_badge,
  .MAIN_stack1 > .grid_layout_badge {
    font-size: 10px;
    padding: 6px 10px;
    top: 5px;
    right: 5px;
  }
}

/* 관리자 모드일 때 body 스크롤 방지 */
body:has(.stack_admin_mode) {
  overflow-x: hidden;
}

.stack_admin_mode{   width: 100%; float: left; position: relative; box-sizing: border-box; border: 4px solid #f97316; border-radius: 8px; padding: 15px; margin: 20px 0 10px 0; overflow: visible;}


.sub_stit_link{  position: relative}
.golinkbox{ position: absolute; right: 0px; bottom :20px; padding-right: 70px; font-size:calc(var(--tx-sm-size) * 1.2); color: #666} 
.golinkbox:after{width: 45px; aspect-ratio:1 / 1;border-radius: 100%;  background-color: #333; color: #fff; content: "\eb6d";    font-family: unicons-line;display: flex;  justify-content: center;  align-items: center; position: absolute; right: 0px; 

top:50%;transform: translateY(-50%);  font-size: 25px} 

.golinkbox:before{width:9px; aspect-ratio:1 / 1;border-radius: 100%;  background-color: #333; color: #fff; content: "";  position: absolute; right: 50px; 

top:50%;transform: translateY(-50%);  }