@charset "utf-8"; /* ========================================================================== rb.BoardFactory — 레이아웃 ========================================================================== */ .bf-wrap { position: relative; min-height: 100vh; } /* 코어 팝업 창(쪽지 · 자기소개 · 포인트 …)에서는 '맨몸 페이지' 틀을 숨기고 내용만. html.bf-popup 은 head.sub.php 가 창 이름(win_memo …)을 보고 첫 페인트 전에 붙인다. */ /* 그누보드 알림 화면(alert · confirm) — 틀 없이 바탕색만, 알림창이 가운데 뜬다 (head.sub.php · bf_is_notice_page) */ body.bf-notice-page { min-height: 100vh; background: var(--bg); } html.bf-popup .bf-bare { min-height: 0; } html.bf-popup .bf-bare > :not(#bf_container), html.bf-popup .bf-bare > #bf_container > :not(.sub-body) { display: none !important; } html.bf-popup .bf-bare > #bf_container { padding: 0 !important; } html.bf-popup .bf-bare > #bf_container > .sub-body { max-width: none; padding: 0; } /* 공용 컨테이너 — 폭은 리빌더 가로폭 설정이 --bf-inner 로 들어온다. 헤더 · 푸터는 '상단/하단', 메인 화면은 '메인', 나머지는 '서브' (bf_widths). 좌우 여백 --bf-gutter 는 스스로 감싸지 않는 코어 화면의 감싸개(theme.css #bf_container > * · #sct · #sit · 주문서)도 같이 쓴다. 따로 24px 로 박아 두면 좁은 화면에서 헤더(20 · 14)와 본문(24)이 어긋난다. */ .bf-inner { max-width: var(--bf-inner); margin: 0 auto; padding: 0 var(--bf-gutter); } /* 2단(.content-wrap) 안의 화면 감싸개. 콘텐츠 · FAQ 같은 화면은 스스로 .bf-inner 로 감싸 들어온다. 2단이면 바깥 .content-wrap 이 이미 폭과 좌우 여백을 잡았으므로 여백 24px 이 두 번 붙는다. 폭(max-width)은 그대로 둔다 — .sub-body-narrow 가 쓴다. width:100% — .content-main 은 세로 flex 라 좌우 margin:auto 인 감싸개가 늘어나지 않고 내용 폭으로 줄어든다(캘린더 261px · FAQ 512px 로 가운데 떠 있었다). */ .content-main > .bf-inner { width: 100%; padding-left: 0; padding-right: 0; } /* 서브 화면의 2단 틀은 세로 간격을 보태지 않는다. 게시판(#bo_list · #bo_v_wrap margin-top 30)과 콘텐츠(.sub-body padding-top 30)는 화면이 스스로 위아래 간격을 가진다. 메인에서 온 .content-wrap 의 위아래 여백 (34 · 60)과 .content-main 의 칸 사이(26)가 그 위에 또 붙어, 2단이 되면 본문이 60~120px 내려갔다. 관리자는 사이드가 비어도 2단 틀이 열리므로 늘 그렇게 보였다. 메인 화면의 .content-wrap 은 .bf-main 안에 있어 여기 걸리지 않는다. */ #bf_container > .content-wrap { padding-top: 0; padding-bottom: 0; } #bf_container > .content-wrap > .content-main { gap: 0; } /* 사이드는 왼쪽 첫 줄과 높이를 맞춘다. 보통은 본문이 먼저라 서브 화면의 위 간격(30)만큼 내린다. 본문 위 박스에 모듈이 있거나 리빌더 편집 중이면 왼쪽이 그 박스부터 간격 없이 시작하므로 붙인다. 1080 이하에서는 사이드가 본문 아래로 내려가므로(main.css) 뺀다. */ #bf_container > .content-wrap > .content-side { padding-top: 30px; } html.rb-mode-mod #bf_container > .content-wrap > .content-side, html.rb-mode-sec #bf_container > .content-wrap > .content-side, #bf_container > .content-wrap:has(> .content-main > .bf-sub-module:first-child :is(.rb_layout_box, .rb_section_box)) > .content-side { padding-top: 0; } @media (max-width: 1080px) { #bf_container > .content-wrap > .content-side { padding-top: 0; } } /* 관리자에게만 생기는 빈 사이드바를 접는다 (head.php 의 .is-side-empty). 리빌더는 편집 모드를 의 rb-mode-mod · rb-mode-sec 로 알린다 (rb/rb.config/right.php rbSetMode). 편집 중에는 다시 열어 모듈을 꽂게 하고, 편집 중에 모듈을 꽂았으면 새로고침 전이라도 접지 않는다. */ html:not(.rb-mode-mod):not(.rb-mode-sec) #bf_container > .content-wrap.is-side-empty:not(:has(> .content-side .rb_layout_box, > .content-side .rb_section_box)) { grid-template-columns: minmax(0, 1fr); } html:not(.rb-mode-mod):not(.rb-mode-sec) #bf_container > .content-wrap.is-side-empty:not(:has(> .content-side .rb_layout_box, > .content-side .rb_section_box)) > .content-side { display: none; } /* 본문 상/하 여백. 리빌더 환경설정 패널 '여백 설정 (PC)' 값이 head.php 에서 --bf-pad-top · --bf-pad-btm 으로 들어온다(bf_padding_style). 설정이 비어 있으면 변수도 안 오므로 여기 기본값이 그대로 쓰인다. 패널이 'PC' 라고 못박았으므로 아래 모바일 미디어쿼리가 이기도록 인라인 padding 이 아니라 변수로 받는다. */ .bf-container { padding-top: var(--bf-pad-top, 0); padding-bottom: var(--bf-pad-btm, 60px); } .bf-container.bf-kind-index { padding-bottom: var(--bf-pad-btm, 0); } /* -------------------------------------------------------------------------- 리빌더 레이아웃 박스. .flex_box[data-layout] 이 모듈·섹션이 채워지는 자리다. 이름과 구조는 리빌더 규약이라 바꾸면 렌더러가 못 찾는다. min-height 를 주지 않는다. 서버 렌더가 끝난 뒤 내용 높이로 확정되어야 레이아웃 시프트(CLS)가 안 생긴다. -------------------------------------------------------------------------- */ .flex_box { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; gap: 0; } .bf-sub-module:empty { display: none; } /* 서브 화면의 리빌더 박스(위 · 아래)는 본문과 같은 폭 · 여백 안에 둔다. 예전에는 화면 전폭이라 여기 꽂은 모듈이 화면 끝에서 끝까지 늘어났다. 화면 전체가 필요한 것은 리빌더가 스스로 넓힌다 — 모듈 '와이드 100%' (.rb_module_wide)와 섹션(.rb_sec_wide)은 --vw 로 박스 밖까지 나간다(set.style.css). #bf_container 바로 아래(1단)에만 건다 — 2단이면 박스가 .content-main 안에 있고 바깥 .content-wrap 이 이미 폭과 여백을 잡았다. */ #bf_container > .bf-sub-module { max-width: var(--bf-inner); margin-left: auto; margin-right: auto; padding-left: var(--bf-gutter); padding-right: var(--bf-gutter); } /* 리빌더 '모듈간격'(co_gap_pc · 1024 이하 co_gap_mo) — 서브 박스 안 모듈 사이. 리빌더와 같은 방식이다(set.style.css .co_gap_pc_N): 모듈마다 간격의 절반씩 안쪽 여백을 두고, 바깥은 그만큼 덜어 모듈 글자가 본문 선(헤더와 같은 x)에 선다. head.php 가 #bf_wrap 에 --rb-gap-pc · --rb-gap-mo 를 넣는다(값이 0 이면 안 넣음 → 전과 같음). 메인(목업 간격)과 사이드 영역(.rb_sidemenu, 목업 18px)에는 걸지 않는다. */ .bf-sub-module { --rb-g: var(--rb-gap-pc, 0px); } @media (max-width: 1024px) { .bf-sub-module { --rb-g: var(--rb-gap-mo, 0px); } } .bf-sub-module .content_box { padding: calc(var(--rb-g) / 2); } #bf_container > .bf-sub-module, .bf-sub-module .rb_section_box:not(.sec_wide_set) > .flex_box { padding-left: max(0px, calc(var(--bf-gutter) - var(--rb-g) / 2)); padding-right: max(0px, calc(var(--bf-gutter) - var(--rb-g) / 2)); } .content-main > .bf-sub-module { width: calc(100% + var(--rb-g)); /* flex_box 는 width:100% 라 여백만 음수로 주면 밀리기만 한다 */ margin-left: calc(var(--rb-g) / -2); margin-right: calc(var(--rb-g) / -2); } /* 리빌더 섹션 — 가로 100% 띠. 안쪽 컨테이너는 '컨테이너 사이즈'가 기본이면 본문 폭(여백 포함), 100%(.sec_wide_set)면 띠 전체. 렌더러가 안쪽 폭을 'main_width + 간격' px 로 박아 넣어 본문과 어긋나므로 덮는다. 가운데 두는 방식은 rb.basic 과 같다(grid + justify-self). */ .rb_section_box { display: grid; width: 100%; } .rb_section_box > .flex_box { justify-self: center; width: 100% !important; } .rb_section_box:not(.sec_wide_set) > .flex_box { max-width: var(--bf-inner) !important; padding-left: var(--bf-gutter); padding-right: var(--bf-gutter); } .rb_section_title h2 { font-weight: normal; word-break: keep-all; } .rb_section_title h6 { margin-top: 15px; line-height: 1.4; font-weight: normal; word-break: keep-all; } /* 리빌더 '서브 상단 비주얼' (rb/rb.config/topvisual.php · topvisual.shop.php). 헤더 아래 띠. 폭 · 높이 · 배경색 · 둥글기 · 밝기 · 문구 모양은 관리자 설정이 인라인으로 준다. 배치(가운데 · 글자 층 · 밝기 층 · 배경 채우기)는 rb.basic custom.css 와 같다. 폭 — 코어는 '서브 가로폭' px 를 박는데, 그 값은 우리에게 좌우 여백까지 포함한 상자 폭이라 띠가 본문 카드보다 양쪽 여백만큼 넓어진다. '100% 채우기'가 아니면 본문 선(가로폭 − 여백 × 2)에 맞춘다. 좁은 화면에서도 같은 식이라 넘치지 않는다. 1024 이하에서는 모서리를 편다(rb.basic 과 같다). */ #rb_topvisual { position: relative; max-width: 100%; margin-left: auto; margin-right: auto; background-size: cover; background-position: center; background-repeat: no-repeat; word-break: keep-all; } #rb_topvisual:not([style*="width:100%"]) { width: calc(min(var(--bf-inner), 100%) - var(--bf-gutter) * 2) !important; } #rb_topvisual_bl { position: absolute; inset: 0; } #rb_topvisual_txt { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; transform: translateY(-50%); } #rb_topvisual_txt_inner { max-width: 100%; margin: 0 auto; padding: 0 var(--bf-gutter); } #rb_topvisual_txt .main_wording, #rb_topvisual_txt .sub_wording { padding: 10px 0; line-height: 1.4; } #rb_topvisual_txt .main_wording:focus, #rb_topvisual_txt .sub_wording:focus { outline: none; border: 1px solid rgba(255, 255, 255, .5); } #rb_topvisual .main_wording_none, #rb_topvisual .sub_wording_none { display: none; } @media (max-width: 1024px) { #rb_topvisual { margin-top: 0 !important; border-radius: 0 !important; } #rb_topvisual_txt_inner { width: 100% !important; } } /* 리빌더 모듈 '출력 설정' — 공용 · PC 전용 · Mobile 전용 (md_show). 렌더러가 모듈 상자에 pc · mobile 클래스를 붙인다(rb/rb.config/ajax.layout_set.php). 기준 폭은 패널 표기('Mobile 버전 1024px 이하')와 같다. rb.basic 은 .pc · .mobile 을 전역으로 숨기지만, 흔한 이름이라 모듈 상자에만 건다. */ @media (min-width: 1025px) { .rb_layout_box.mobile { display: none; } } @media (max-width: 1024px) { .rb_layout_box.pc { display: none; } } .bf-group { margin: 0 auto; max-width: var(--bf-inner); } /* 본문·사이드바 안쪽 간격과 2단 배치는 레이아웃마다 다르므로 rb.layout/{레이아웃}/style.css 가 가진다. */ /* ------------------------------------------------------- 서브 사이드 영역 리빌더 '서브 사이드 영역' — 본문 옆 칸(head.php · tail.php, id rb_sidemenu). rb.basic 처럼 본문 영역 안에 선다. 예전에는 화면 가장자리에 붙는 고정 패널로 그려서 헤더까지 밀어냈다. 가로 크기 --bf-side-w (관리자 '가로 크기' 200~500) 본문과 간격 --bf-side-gap (관리자 '여백'. 0 이면 테마 간격) 좌측 .bf-side-left — 사이드가 앞 칸으로 모바일 숨김 .bf-side-mo-hide — 1024 이하에서 감춘다(리빌더 기준) 1080 이하에서는 사이드가 본문 아래로 내려간다(main.css 와 같은 기준). */ #bf_container > .content-wrap { grid-template-columns: minmax(0, 1fr) var(--bf-side-w, var(--side-w)); column-gap: var(--bf-side-gap, var(--gap)); } #bf_container > .content-wrap.bf-side-left { grid-template-columns: var(--bf-side-w, var(--side-w)) minmax(0, 1fr); } #bf_container > .content-wrap.bf-side-left > .content-side { order: -1; } /* 사이드 안 모듈 사이 간격 — 메인 사이드(rb.layout/basic/style.css)와 같다 */ .rb_sidemenu > .flex_box { row-gap: 18px; } @media (max-width: 1080px) { #bf_container > .content-wrap, #bf_container > .content-wrap.bf-side-left { grid-template-columns: minmax(0, 1fr); } #bf_container > .content-wrap.bf-side-left > .content-side { order: 0; } } @media (max-width: 1024px) { #bf_container > .content-wrap.bf-side-mo-hide > .content-side { display: none; } } /* ------------------------------------------------------------------ 반응형 */ @media (max-width: 1280px) { :root { --bf-gutter: 20px; } } @media (max-width: 900px) { /* main.css 900 이하의 .bf-inner 14px 와 같은 값 — 그쪽은 목업에서 옮겨 온 규칙이다 */ :root { --bf-gutter: 14px; } .bf-container, .bf-container.bf-kind-index { padding-top: 0; padding-bottom: 40px; } .bf-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } } @media (max-width: 600px) { body { font-size: 14.5px; } }