/* Flex 전환: .rb-layout-row를 플렉스 컨테이너로 */
.rb-layout-row {
  display: flex;
  align-items: stretch;
  /* 공백(간격) — co_gap_pc_* 값별로 아래 변수 설정을 함께 사용 */
  gap: 20px;
}

/* 좌/우 칼럼: float/width/transform 제거 후 Flex 규칙으로 재정의 */
.flex_box_l,
.flex_box_r {
  float: none !important;
  transform: none !important;
  width: auto !important;
  align-content: baseline;
}

.flex_box_r .rb_layout_box:not(:has(~ .rb_layout_box)) {
  position: sticky;
  top: 70px;
}

/* 좌측(메인): 남는 공간을 모두 차지 */
.flex_box_l {
  flex: 1 1 auto;
  min-width: 0; /* 긴 내용/그리드에서 overflow 이슈 방지 */
}

/* 우측(사이드): 고정 폭 400px */
.flex_box_r {
  flex: 0 0 400px;
}

/* float 레이아웃 시절의 clear 요소는 Flex에선 불필요 → 숨김 */
.rb-layout-row > div[style*="clear:both"] { display: none !important; }


.compact-section .rb_section_box {
  min-width: 100% !important;
  border-radius: 15px;
}

.compact-section .rb_section_box .module_latest_wrap {
  background: transparent;
}


.compact-section .rb_sec_wide {
  width: 100%;
  flex: 0 0 100%;
}

.compact-section .rb_section_box .flex_box {
  width: 100% !important;
}

/* 반응형(예: 1024px 이하에서 세로 스택) — 필요 시 조정 */
@media (max-width: 1024px) {
  .rb-layout-row {
    flex-direction: column;
  }
  .flex_box_l,
  .flex_box_r {
    flex: 0 0 auto;
    width: 100% !important;
  }
  /* 순서를 바꾸고 싶으면 order로 제어 (예: 메인 → 사이드 순서) */
  .flex_box_l { order: 2; }
  .flex_box_r { order: 1; }
}