@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단 · 3단 모듈(.sec-half). column-gap 만 주면 50%+26px+50% > 100% 라 뒤엣것이
   다음 줄로 넘어간다. 간격만큼 덜어 낸 flex-basis 를 준다 — 인라인 width 보다 flex-basis 가 우선한다.
   모듈 폭(md_width)이 25 · 33 · 50 · 66 · 75% 일 때 — 간격 26px 을 폭 비율만큼 나눠 덜어 낸다
   (W% - 26px × (1 - W/100)). 편집 중 끌어 옮길 때 놓일 자리도 같은 셈(rb.js/rb.panel.js).
   'width:50%;' · 'width: 50%;' 둘 다 — 뒤 ';' 로 50% 가 5% 같은 다른 값에 걸리지 않게 한다 */
.content-main > .bf-row-main > .rb_layout_box:is([style*="width:25%;"], [style*="width: 25%;"]) { flex-basis: calc(25% - 19.5px); }
.content-main > .bf-row-main > .rb_layout_box:is([style*="width:33%;"], [style*="width: 33%;"]) { flex-basis: calc(33% - 17.42px); }
.content-main > .bf-row-main > .rb_layout_box:is([style*="width:33.3%;"], [style*="width: 33.3%;"]) { flex-basis: calc(33.3% - 17.34px); }
.content-main > .bf-row-main > .rb_layout_box:is([style*="width:33.33%;"], [style*="width: 33.33%;"]) { flex-basis: calc(33.33% - 17.33px); }
.content-main > .bf-row-main > .rb_layout_box:is([style*="width:50%;"], [style*="width: 50%;"]) { flex-basis: calc(50% - 13px); }
.content-main > .bf-row-main > .rb_layout_box:is([style*="width:66%;"], [style*="width: 66%;"]) { flex-basis: calc(66% - 8.84px); }
.content-main > .bf-row-main > .rb_layout_box:is([style*="width:66.6%;"], [style*="width: 66.6%;"]) { flex-basis: calc(66.6% - 8.68px); }
.content-main > .bf-row-main > .rb_layout_box:is([style*="width:66.66%;"], [style*="width: 66.66%;"]) { flex-basis: calc(66.66% - 8.67px); }
.content-main > .bf-row-main > .rb_layout_box:is([style*="width:75%;"], [style*="width: 75%;"]) { flex-basis: calc(75% - 6.5px); }

/* 비어 있으면 자리를 차지하지 않는다 */
.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:is([style*="width:25%;"], [style*="width: 25%;"], [style*="width:33"], [style*="width: 33"], [style*="width:50%;"], [style*="width: 50%;"], [style*="width:66"], [style*="width: 66"], [style*="width:75%;"], [style*="width: 75%;"]) {
    flex-basis: 100%;
    width: 100% !important;
  }
}

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