@charset "utf-8";
/* ==========================================================================
   rb.BoardFactory — 메인 레이아웃 'basic'

   폭·간격은 목업 CSS(main.css 5절 '본문 레이아웃')가 잡는다.
   여기에는 리빌더 레이아웃 박스를 그 구조에 끼워 넣는 규칙만 둔다.
   ========================================================================== */

.bf-main { padding-bottom: 0; }

/* 레이아웃 박스는 그 자리의 '내용물 컨테이너' 역할만 한다.
   이 셋은 모듈이 하나씩만 들어가는 전체폭 자리다. */
.bf-row-visual,
.bf-row-quick,
.bf-row-wide { display: block; width: 100%; }
.bf-row-visual > *,
.bf-row-quick > *,
.bf-row-wide > * { width: 100%; }

/* --------------------------------------------------------------------------
   본문 · 사이드바 자리.

   목업은 .content-main / .content-side 가 섹션을 직접 품고 gap 으로 사이를
   벌린다. 리빌더는 그 사이에 .flex_box 를 한 겹 끼우므로(자식이 하나뿐이라
   gap 이 먹을 자리가 없다) 간격을 이쪽으로 옮긴다. 값은 목업과 같다.

   본문은 flex-wrap 을 살려 둔다 — 공지사항·이벤트처럼 모듈 가로폭(md_width)
   을 50% 로 준 둘이 한 줄에 서야 목업의 .sec-half 가 된다.
   -------------------------------------------------------------------------- */
.content-main > .bf-row-main {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  width: 100%;
  row-gap: 26px; column-gap: 26px;
}
.content-side > .bf-row-side {
  display: flex; flex-direction: column;
  width: 100%;
  row-gap: 18px;
}
.content-side > .bf-row-side > * { width: 100%; }

/* 2단 모듈(.sec-half). column-gap 만 주면 50%+26px+50% > 100% 라 뒤엣것이
   다음 줄로 넘어간다. 간격만큼 덜어 낸 flex-basis 를 준다 —
   인라인 width 보다 flex-basis 가 우선한다. */
.content-main > .bf-row-main > .rb_layout_box[style*="width:50%"] {
  flex-basis: calc(50% - 13px);
}

/* 비어 있으면 자리를 차지하지 않는다 */
.bf-row-visual:empty,
.bf-row-quick:empty,
.bf-row-wide:empty { display: none; }
.sec-visual:has(.bf-row-visual:empty),
.sec-quick:has(.bf-row-quick:empty) { display: none; }

@media (max-width: 1180px) {
  .content-side > .bf-row-side { row-gap: 16px; }
}
@media (max-width: 900px) {
  .content-main > .bf-row-main { row-gap: 20px; column-gap: 0; }
  /* 좁은 화면에서는 2단을 풀고 한 줄에 하나씩 */
  .content-main > .bf-row-main > .rb_layout_box[style*="width:50%"] {
    flex-basis: 100%;
    width: 100% !important;
  }
}

/* 메인 비주얼을 담는 자리. 안에 들어가는 슬라이더 자체의 모양은
   그 위젯(rb/rb.widget/bf.hero/style.css)이 갖는다. */
.sec-visual { padding: 34px 0 0; }