/** * TW Builder — 사용자 메인에 출력되는 섹션 + 섹션 미리보기(iframe) 공통 * 관리자 UI용 twb-admin.css / twbuilder-react.css 와 분리 (프론트 전용) */ /* * theme/basic head.php·tail.php: 본문 앞뒤에 있는 기본
이 브라우저 기본 border 로 1px 가로줄(밝은 색)을 낼 수 있음. * 풀폭 빌더 메인에서만 숨김 — 다른 페이지 레이아웃은 유지하려면 :has(#wrapper.twb-main-layout--full) 로 한정. */ body:has(#wrapper.twb-main-layout--full) #hd + hr, body:has(#wrapper.twb-main-layout--full) #wrapper + hr { display: none; } /* 미리보기 전용 문서(새 창·모달 iframe srcdoc): twb-mainpage-preview-iframe.js 가 부여 */ html.twb-full-preview-doc, html.twb-full-preview-doc body { margin: 0; padding: 0; } /* * 새 창/iframe 내부 문서: 부모 높이 체인을 잡아 두면 테마·히어로의 height:100%·세로 Swiper가 안정적이다. * (인라인 미리보기 스테이지는 .twb-full-preview-doc 없음 — 이 규칙 미적용) */ html.twb-full-preview-doc { height: 100%; background: #fff; } html.twb-full-preview-doc body { min-height: 100%; box-sizing: border-box; background: #fff; overflow-x: hidden; } /* 프런트: 레이아웃 관리 main_page_grid (twb_render_mainpage_sections) */ .twb-mp-front-wrap--grid, .twb-mp-front-wrap--linear { width: 100%; box-sizing: border-box; } /* * 그리드 래퍼: 세로 flex + 인라인 gap = 레이아웃「세로 줄 간격」(row_gap). * 각 행(.twb-mp-front-row)의 column-gap = 레이아웃「가로 칸 간격」(column_gap). 값은 PHP·DB 그대로. */ .twb-mp-front-wrap--grid > .twb-mp-front-row { padding: 0; margin: 0; box-sizing: border-box; /* * 행 박스가 자식(섹션)보다 서브픽셀로만 커지면, 행 안쪽 하단이 투명 → #container 흰색이 비침. * DevTools 에서 행을 선택하면 파란 영역은 섹션과 겹쳐 보여도 그 “빈” 픽셀은 그대로임. */ align-content: start; height: min-content; min-height: 0; } /* * 풀폭 메인: 그리드 래퍼는 컨테이너 폭에 맞춤(음수 마진·폭 확장으로 틈을 덮지 않음). */ #wrapper.twb-main-layout--full #container .twb-mp-front-wrap--grid { position: relative; width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* * 메인 그리드 셀: CSS Grid 기본 min-width:auto 가 자식 최소 콘텐츠 폭으로 팽창하면 * Swiper 컨테이너 폭·translate 계산이 깨져 슬라이드가 보이지 않을 수 있음 (전체 미리보기 html.twb-full-preview-doc 와 동일 이슈). * stretch 행에서 섹션 배경이 셀 높이까지 채우도록 flex 로 늘림. */ .twb-mp-front-wrap--grid .twb-mp-front-cell { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 0; margin: 0; display: flex; flex-direction: column; } .twb-mp-front-wrap--grid .twb-mp-front-cell > .twb-section { /* * flex-shrink: 1 + min-height: 100% 는 부모(.twb-mp-front-cell) 높이가 불명확할 때 * %가 0에 가깝게 풀리거나 섹션이 자식(히어로·Swiper)보다 짧게 잡혀 다음 행이 위로 겹칠 수 있음. * shrink 금지 + 최소 높이는 자식 콘텐츠(max-content) 기준으로 고정한다. * grow(1)는 같은 행에서 더 높은 칸이 있을 때 배경이 셀까지 채워지게 유지. */ flex: 1 0 auto; align-self: stretch; width: 100%; margin: 0; box-sizing: border-box; min-height: max-content; /* translateZ(0) 등은 GPU 레이어를 나눠 인접 섹션 경계에 흰 1px 합성 틈이 생기는 경우가 있어 쓰지 않음 */ } .twb-mp-front-wrap--grid .twb-section--hero-slider .twb-hero-slider.swiper { min-width: 0; max-width: 100%; box-sizing: border-box; } .twb-mp-front-cell--empty { min-height: 0; pointer-events: none; } /* 0~767px: one column per row — stack cells full width (override inline grid-template-columns) */ @media (max-width: 767px) { .twb-mp-front-wrap--grid > .twb-mp-front-row { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; row-gap: var(--twb-mp-mobile-stack-gap, 24px); } .twb-mp-front-wrap--grid .twb-mp-front-cell { width: 100%; max-width: 100%; grid-column: 1 / -1; } } /* * 테마 theme/basic: 레이아웃 관리「메인」= 풀폭 + 사이드바 없음 일 때 (#wrapper.twb-main-layout--full) * default.css 의 #container 930px + #aside float + margin:20px 0 만 콘텐츠 영역에 한해 덮어씀 (상단 #hd / 하단 #ft 는 기존 1200px 유지) */ #wrapper.twb-main-layout--full { min-width: 0 !important; width: 100% !important; max-width: none; } #wrapper.twb-main-layout--full #container_wr { width: 100% !important; max-width: 100% !important; margin-left: auto; margin-right: auto; float: none; overflow-x: hidden; } #wrapper.twb-main-layout--full #container { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; /* 가로 100%·서브픽셀 시 좌우 1px 번짐·스크롤바 옆 틈 완화 */ overflow-x: hidden; } /* * 스킨 theme/.../twskin/section/hero-default/style.css 의 .twb-hero-default { max-width: 80rem } 를 * 메인 풀폭일 때만 해제 (히어로 박스가 뷰포트 너비까지 확장) */ #wrapper.twb-main-layout--full .twb-hero-default { max-width: none !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; /* * 스킨 style.css 의 overflow:hidden 이 배경 레이어를 박스에 딱 맞추면, * 서브픽셀 합성으로 좌우·상하에 #container 색이 비치는 경우가 있음. * 배경만 3px 밖으로 그리도록 아래 레이어 inset 을 키우고, 루트는 visible 로 둔다. */ overflow: visible !important; } /* * 메인 그리드 칸(.twb-mp-front-cell) 안 히어로: 풀폭용 overflow:visible + 배경 레이어 inset:-4px 가 * 가로 칸 경계를 넘어 옆 칸과 겹쳐 보이므로 칸 기준으로 클리핑한다(단일 칸 풀폭 행에도 동일 적용). */ #wrapper.twb-main-layout--full .twb-mp-front-wrap--grid .twb-mp-front-cell .twb-hero-default, #wrapper.twb-main-layout--full .twb-mp-front-wrap--grid .twb-mp-front-cell .twb-hero-center { overflow: hidden !important; } /* * 배경 미디어 애니(zoom·slide·pulse): transform 이 루트 밖으로 나가면 visible 때문에 그대로 노출됨 → 임시로 잘라냄. * fade 만 쓰는 경우는 기존 visible 유지(서브픽셀 틈 보정). */ #wrapper.twb-main-layout--full .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--zoom-in), #wrapper.twb-main-layout--full .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--zoom-out), #wrapper.twb-main-layout--full .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--slide-left), #wrapper.twb-main-layout--full .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--slide-right), #wrapper.twb-main-layout--full .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--pulse-out-in), #wrapper.twb-main-layout--full .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--pulse-in-out) { overflow: hidden !important; } /* 관리자 인라인 미리보기(#wrapper 없음) — 동일 이슈 */ #mainpage-manager .twb-inline-preview__stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--zoom-in), #mainpage-manager .twb-inline-preview__stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--zoom-out), #mainpage-manager .twb-inline-preview__stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--slide-left), #mainpage-manager .twb-inline-preview__stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--slide-right), #mainpage-manager .twb-inline-preview__stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--pulse-out-in), #mainpage-manager .twb-inline-preview__stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--pulse-in-out), #twb-inline-preview-stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--zoom-in), #twb-inline-preview-stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--zoom-out), #twb-inline-preview-stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--slide-left), #twb-inline-preview-stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--slide-right), #twb-inline-preview-stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--pulse-out-in), #twb-inline-preview-stage .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--pulse-in-out) { overflow: hidden !important; } /* 전체 미리보기 iframe(html.twb-full-preview-doc) — #wrapper 없음 */ html.twb-full-preview-doc .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--zoom-in), html.twb-full-preview-doc .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--zoom-out), html.twb-full-preview-doc .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--slide-left), html.twb-full-preview-doc .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--slide-right), html.twb-full-preview-doc .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--pulse-out-in), html.twb-full-preview-doc .twb-hero-default:has(> .twb-hero-default__bg-layer.twb-anim-media--pulse-in-out) { overflow: hidden !important; } /* * 배경 레이어·비디오 래퍼 — skin.php 인라인 inset:0 을 -4px 로만 바꿔 미세 overflow 로 헤어라인 감춤. * (이전에 width/height:auto + inset:auto 를 같이 두면 inset 이 앞선 top/left/right/bottom 을 무력화하고 * absolute 박스가 채워지지 않아 0×0 이 됨 — 사용하지 않음.) */ #wrapper.twb-main-layout--full .twb-mp-front-wrap .twb-hero-default > .twb-hero-default__bg-layer, #wrapper.twb-main-layout--full .twb-mp-front-wrap .twb-hero-default > .twb-hero-default__video-bg, #wrapper.twb-main-layout--full .twb-mp-front-wrap .twb-hero-center > .twb-hero-center__bg-layer, #wrapper.twb-main-layout--full .twb-mp-front-wrap .twb-hero-center > .twb-hero-center__video-bg { inset: -4px !important; } /* 히어로 슬라이드: 그리드 셀 안에서 폭·마진 정상화(음수 마진으로 경계 덮지 않음) */ #wrapper #container .twb-mp-front-wrap--grid .twb-section--hero-slider { margin-left: 0; margin-right: 0; margin-bottom: 0; width: 100%; max-width: none; box-sizing: border-box; position: relative; } /* hero-center: 풀폭에서 max-width 제한만 해제(음수 마진 확장 없음) */ #wrapper.twb-main-layout--full .twb-mp-front-wrap .twb-hero-center { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* 빌더로 렌더된 섹션 루트 */ .twb-section { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #18181b; line-height: 1.5; } /* 인라인 img 기본 baseline 여백(~하단 1~4px) 제거 — 미디어형 섹션 하단 흰줄 완화 */ .twb-mp-front-wrap .twb-section img { display: block; max-width: 100%; height: auto; } /* * 메인 레이아웃(grid/flex) 상위 래퍼에 overflow:hidden 이 있으면 섹션 앵커 기준이 잘릴 수 있음. * 히어로 슬라이드는 data-aos-anchor=#섹션id 를 쓰므로 섹션 루트는 잘리지 않게 둔다(실제 클리핑은 .twb-hero-slider). */ .twb-section.twb-section--hero-slider { overflow: visible; position: relative; } /* * 섹션 레이아웃 전용 fade-up/down/left/right — AOS 트리거(.aos-animate)만 사용하고, * 시각은 vendor aos.css 의 transition 대신 동일 계열 keyframes 로 통일(큰 블록·약한 안착 overshoot). * 대상: [data-twb-layout-layer] 만 — 내부 .hero-anim·슬라이더·줌 등과 분리. * 길이·지연: 인라인 --twb-aos-dur / --twb-aos-del (data-aos-duration·delay 와 동일 출처). */ section.twb-section[data-twb-layout-layer][data-aos^="fade"], .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos^="fade"] { --twb-slo-y: clamp(2rem, 6vh, 5rem); --twb-slo-x: clamp(2rem, 5vw, 4.5rem); --twb-slo-os: 4px; transition: none !important; } section.twb-section[data-twb-layout-layer][data-aos="fade-up"]:not(.aos-animate), .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos="fade-up"]:not(.aos-animate) { opacity: 0; transform: translate3d(0, var(--twb-slo-y), 0); } section.twb-section[data-twb-layout-layer][data-aos="fade-down"]:not(.aos-animate), .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos="fade-down"]:not(.aos-animate) { opacity: 0; transform: translate3d(0, calc(var(--twb-slo-y) * -1), 0); } section.twb-section[data-twb-layout-layer][data-aos="fade-left"]:not(.aos-animate), .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos="fade-left"]:not(.aos-animate) { opacity: 0; transform: translate3d(var(--twb-slo-x), 0, 0); } section.twb-section[data-twb-layout-layer][data-aos="fade-right"]:not(.aos-animate), .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos="fade-right"]:not(.aos-animate) { opacity: 0; transform: translate3d(calc(var(--twb-slo-x) * -1), 0, 0); } @keyframes twb-sec-layout-fade-up { 0% { opacity: 0; transform: translate3d(0, var(--twb-slo-y), 0); } 11% { opacity: 1; } 68% { transform: translate3d(0, 0, 0); } 81% { transform: translate3d(0, calc(var(--twb-slo-os) * -1), 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes twb-sec-layout-fade-down { 0% { opacity: 0; transform: translate3d(0, calc(var(--twb-slo-y) * -1), 0); } 11% { opacity: 1; } 68% { transform: translate3d(0, 0, 0); } 81% { transform: translate3d(0, var(--twb-slo-os), 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes twb-sec-layout-fade-left { 0% { opacity: 0; transform: translate3d(var(--twb-slo-x), 0, 0); } 11% { opacity: 1; } 68% { transform: translate3d(0, 0, 0); } 81% { transform: translate3d(var(--twb-slo-os), 0, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes twb-sec-layout-fade-right { 0% { opacity: 0; transform: translate3d(calc(var(--twb-slo-x) * -1), 0, 0); } 11% { opacity: 1; } 68% { transform: translate3d(0, 0, 0); } 81% { transform: translate3d(calc(var(--twb-slo-os) * -1), 0, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } section.twb-section[data-twb-layout-layer][data-aos="fade-up"].aos-animate, .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos="fade-up"].aos-animate { animation: twb-sec-layout-fade-up var(--twb-aos-dur, 600ms) cubic-bezier(0.33, 1, 0.68, 1) var(--twb-aos-del, 0ms) both; } section.twb-section[data-twb-layout-layer][data-aos="fade-down"].aos-animate, .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos="fade-down"].aos-animate { animation: twb-sec-layout-fade-down var(--twb-aos-dur, 600ms) cubic-bezier(0.33, 1, 0.68, 1) var(--twb-aos-del, 0ms) both; } section.twb-section[data-twb-layout-layer][data-aos="fade-left"].aos-animate, .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos="fade-left"].aos-animate { animation: twb-sec-layout-fade-left var(--twb-aos-dur, 600ms) cubic-bezier(0.33, 1, 0.68, 1) var(--twb-aos-del, 0ms) both; } section.twb-section[data-twb-layout-layer][data-aos="fade-right"].aos-animate, .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos="fade-right"].aos-animate { animation: twb-sec-layout-fade-right var(--twb-aos-dur, 600ms) cubic-bezier(0.33, 1, 0.68, 1) var(--twb-aos-del, 0ms) both; } @media (prefers-reduced-motion: reduce) { section.twb-section[data-twb-layout-layer][data-aos^="fade"].aos-animate, .twb-hero-slider__section-motion[data-twb-layout-layer][data-aos^="fade"].aos-animate { animation: none !important; opacity: 1 !important; transform: none !important; } } /* * 히어로 기본형·중앙정렬형: 뷰포트 진입 전 FOUC — twb-hero--anim-prehide 동안만 (twb-hero-anim.js). */ [data-twb-hero-root]:not([data-twb-hero-slider]).twb-hero--anim-prehide [data-twb-hero-anim-content] > .hero-anim { opacity: 0 !important; visibility: hidden !important; transform: translate3d(0, 18px, 0) !important; pointer-events: none !important; } [data-twb-hero-root]:not([data-twb-hero-slider]).twb-hero--anim-prehide { transition: none !important; } /* * 히어로 슬라이더: Swiper init 전 FOUC — prehide 동안만 숨김. init 후 클래스 제거되면 아래 미적용. * 준비 후 표시는 twb-hero-slider-enter.css 의 .is-* + 좁은 .swiper-slide-active 폴백만 사용(상시 !important 금지). */ [data-twb-hero-slider].twb-hero-slider.twb-hero-slider--aos-prehide .twb-hero-slider__content > .hero-anim { opacity: 0 !important; visibility: hidden !important; transform: translate3d(0, 18px, 0) !important; pointer-events: none !important; } /* prehide 제거 직전 루트에 transition 이 있으면 클래스 전환 시 한 프레임 번쩍일 수 있음 */ [data-twb-hero-slider].twb-hero-slider.twb-hero-slider--aos-prehide { transition: none !important; } .twb-section button, .twb-section input, .twb-section select, .twb-section textarea { font-family: inherit; } /* 미리보기 래퍼(미지원 섹션 등 .twb-section 밖 텍스트 포함) */ .twb-full-preview-main { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #18181b; line-height: 1.5; } .twb-full-preview-main button, .twb-full-preview-main input, .twb-full-preview-main select, .twb-full-preview-main textarea { font-family: inherit; } .twb-full-preview-main--stack { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; overflow-x: hidden; } .twb-full-preview-main--stack > section { margin: 0; display: block; } .twb-full-preview-main--stack > .twb-full-preview-unsupported { margin: 0; } /* * 전체 미리보기: flex/grid 자식이 가로로 팽창하면 Swiper 컨테이너 폭 계산이 깨져 슬라이드·translate 가 비정상(수백만 px)이 될 수 있음. */ html.twb-full-preview-doc .twb-full-preview-layout-container, html.twb-full-preview-doc .twb-full-preview-mp-wrap, html.twb-full-preview-doc .twb-full-preview-mp-row, html.twb-full-preview-doc .twb-full-preview-mp-cell { min-width: 0; max-width: 100%; box-sizing: border-box; } html.twb-full-preview-doc .twb-section--hero-slider { min-width: 0; max-width: 100%; box-sizing: border-box; } html.twb-full-preview-doc .twb-hero-slider.swiper { min-width: 0; max-width: 100%; } /* 섹션 미리보기(팝업/iframe): 히어로 스킨 루트 폭 풀기 */ html.twb-full-preview-doc .twb-hero-default, html.twb-full-preview-doc .twb-hero-center, html.twb-full-preview-doc .twb-hero-slider { max-width: none; width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; } /* * 팝업 전체 미리보기: 외부·테마 CSS 가 iframe 에 z-index:-1 을 주면 * 히어로 루트의 background-image(그라데이션) 뒤로 깔려 영상만 안 보이고 소리만 남음(오류 153 과 무관). * 아래 height 는 전체 미리보기 전용 블록과 합쳐서 한 번에 정의함. */ #mainpage-manager .twb-inline-preview__stage .twb-hero-default__video-bg-iframe, #mainpage-manager .twb-inline-preview__stage .twb-hero-center__video-bg-iframe { z-index: 0 !important; } /* * 팝업/새창 전체 미리보기: 그리드 셀·flex 등에서 히어로 루트 높이가 0으로 잡히면 * position:absolute; inset:0 인 배경 영상 래퍼·iframe 의 height:100% 도 0이 되어 영상만 안 보이고 소리만 남음. * 루트에 최소 높이를 주고, iframe 은 뷰포트 단위로 최소 크기를 보장한다. */ html.twb-full-preview-doc .twb-hero-default[data-twb-hero-root="1"]:has(.twb-hero-default__video-bg), html.twb-full-preview-doc .twb-hero-center[data-twb-hero-root="1"]:has(.twb-hero-center__video-bg) { min-height: min(56vh, 640px); width: 100%; box-sizing: border-box; } html.twb-full-preview-doc .twb-hero-default__video-bg, html.twb-full-preview-doc .twb-hero-center__video-bg { z-index: 1 !important; width: 100% !important; height: 100% !important; box-sizing: border-box; } /* * 인라인 height:100% 는 부모 높이 0이면 0 — 미리보기 iframe 문서 뷰포트 기준으로 덮기 * (루트 overflow:hidden 이 잘라 실제 히어로 영역에 맞게 보임) */ html.twb-full-preview-doc .twb-hero-default__video-bg-iframe, html.twb-full-preview-doc .twb-hero-center__video-bg-iframe { z-index: 0 !important; height: 100vh !important; min-height: 56.25vw !important; width: 177.77vh !important; min-width: 100% !important; } /* * 히어로 슬라이더 — 기본 높이: 미리보기에서만 가로·세로 동일 타깃(전환 시 높이 유지). * 실사이트 테마는 건드리지 않음. * 세로 Swiper는 컨테이너 높이 확정이 필요함. */ #mainpage-manager .twb-inline-preview__stage .twb-section--hero-slider--height-default .twb-hero-slider, html.twb-full-preview-doc .twb-section--hero-slider--height-default .twb-hero-slider { min-height: min(56vh, 640px); box-sizing: border-box; } .twb-section--hero-slider--height-default .twb-hero-slider.twb-hero-slider--vertical { height: min(56vh, 640px); min-height: min(56vh, 640px); max-height: min(90vh, 960px); box-sizing: border-box; } /* 풀페이지: 높이 100vh 는 팝업/전체 미리보기 인라인 스타일로만 부여 — 여기서는 min-height 만 공통 */ .twb-section--hero-slider--height-full { min-height: 100vh; max-height: none; display: flex; flex-direction: column; box-sizing: border-box; } /* 풀페이지+세로: 섹션 padding 은 흰 배경 띠로 보임 — 0 (도트는 theme / twb-mainpage-public 세로 pagination). */ .twb-section--hero-slider--height-full.twb-section--hero-slider--full-vertical { padding-bottom: 0; } /* * 팝업/새창 전체 미리보기만: 풀+세로에서 섹션 padding-bottom 은 흰 배경 띠로 보이므로 0. * (도트는 theme .twb-hero-slider__dots { bottom: 48px } / twb-mainpage-public 세로 블록) */ html.twb-full-preview-doc .twb-section--hero-slider--height-full.twb-section--hero-slider--full-vertical { padding-bottom: 0; } /* 풀페이지 + 세로: 섹션이 100vh 고정이어야 flex 자식·Swiper 세로 뷰 높이가 확정됨 */ .twb-section--hero-slider--height-full .twb-hero-slider.twb-hero-slider--vertical { flex: 1 1 0; align-self: stretch; min-height: 0; height: 100%; max-height: none; overflow: hidden; box-sizing: border-box; } /* * 풀페이지 + 가로 슬라이더: 섹션이 flex 컬럼일 때 자식 히어로가 뷰포트 높이까지 채움 (관리자 미리보기와 동일). * 테마 .twb-hero-slider 기본 min-height(600/800px)만으로는 100vh 섹션을 못 채우는 경우가 있음. */ #mainpage-manager .twb-inline-preview__stage .twb-section--hero-slider--height-full .twb-hero-slider:not(.swiper-vertical):not(.twb-hero-slider--vertical), .twb-section--hero-slider--height-full .twb-hero-slider:not(.swiper-vertical):not(.twb-hero-slider--vertical) { flex: 1 1 0; align-self: stretch; min-height: 0; height: 100%; max-height: none; overflow: hidden; box-sizing: border-box; } .twb-section--hero-slider .twb-hero-slider.swiper-vertical .swiper-slide, .twb-section--hero-slider .twb-hero-slider.twb-hero-slider--vertical .swiper-slide { width: 100%; box-sizing: border-box; } /* * 세로 슬라이드(direction: vertical)일 때 Swiper가 pagination 에 swiper-pagination-vertical 을 붙여 * 도트가 우측 세로로 가는데, 스타일 탭·테마와 동일하게 "하단 중앙 가로"로 유지한다. * 하단 offset 은 theme/.../hero-slider/style.css 의 .twb-hero-slider__dots { bottom: 48px } 와 동일해야 한다. * (이 블록이 테마보다 특이도가 높아 1rem 만 쓰면 세로만 가로보다 도트가 아래로 붙는다 — 관리자는 twb-mainpage-public.css 가 로드됨) */ .twb-hero-slider.swiper-vertical .twb-hero-slider__dots.swiper-pagination, .twb-hero-slider.swiper-vertical .twb-hero-slider__dots.swiper-pagination-bullets, .twb-hero-slider.twb-hero-slider--vertical .twb-hero-slider__dots.swiper-pagination-bullets { left: 50% !important; right: auto !important; top: auto !important; bottom: max(48px, 1rem, env(safe-area-inset-bottom, 0px)) !important; transform: translateX(-50%) !important; width: auto !important; max-width: calc(100% - 2rem); display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; } .twb-hero-slider.swiper-vertical .twb-hero-slider__dots .swiper-pagination-bullet, .twb-hero-slider.twb-hero-slider--vertical .twb-hero-slider__dots .swiper-pagination-bullet { display: inline-block !important; margin: 0 4px !important; } /* * 전체 미리보기: Swiper 초기화 전 첫 슬라이드 .hero-anim 만 잠깐 보이게(빈 화면 완화). init 후 JS 가 상태 클래스로 덮음. */ html.twb-full-preview-doc [data-twb-hero-slider].twb-hero-slider:not([data-twb-swiper-ready]):not([data-twb-swiper-initializing]) .swiper-slide:first-child .twb-hero-slider__content > .hero-anim { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } /* prehide + Swiper 미준비: 위보다 우선해 숨김 */ html.twb-full-preview-doc [data-twb-hero-slider].twb-hero-slider.twb-hero-slider--aos-prehide:not([data-twb-swiper-ready]):not([data-twb-swiper-initializing]) .swiper-slide:first-child .twb-hero-slider__content > .hero-anim { opacity: 0 !important; visibility: hidden !important; transform: translate3d(0, 18px, 0) !important; pointer-events: none !important; } /* 테마 CSS 없을 때 — 가로 슬라이더만: 슬라이드·이미지 최소 높이 */ /* 세로(swiper-vertical)에서는 Swiper가 슬라이드 높이를 직접 나누므로 min-height 를 주면 레이아웃이 깨짐 */ html.twb-full-preview-doc .twb-section--hero-slider .twb-hero-slider:not(.swiper-vertical) .swiper-slide { position: relative; min-height: 240px; max-width: 100%; box-sizing: border-box; } html.twb-full-preview-doc .twb-hero-slider:not(.swiper-vertical) .twb-hero-slider__slide-img { position: absolute; inset: 0; min-height: 0; display: block; object-fit: cover; z-index: 0; opacity: 1 !important; visibility: visible !important; } /* 그라데이션·텍스트가 이미지 위에 오도록 (테마 미로드 시에도 미리보기에서 레이어 순서 보정) */ html.twb-full-preview-doc .twb-hero-slider:not(.swiper-vertical) .twb-hero-slider__slide-gradient { position: absolute; inset: 0; z-index: 1; pointer-events: none; } html.twb-full-preview-doc .twb-hero-slider:not(.swiper-vertical) .twb-hero-slider__slide-inner { position: relative; z-index: 2; } /* 세로 Swiper: 가로와 동일하게 배경 img·그라데이션 레이어 보정 (전체 미리보기 전용) */ html.twb-full-preview-doc .twb-hero-slider.swiper-vertical .swiper-slide, html.twb-full-preview-doc .twb-hero-slider.twb-hero-slider--vertical .swiper-slide { position: relative; overflow: hidden; box-sizing: border-box; } html.twb-full-preview-doc .twb-hero-slider.swiper-vertical .twb-hero-slider__slide-img, html.twb-full-preview-doc .twb-hero-slider.twb-hero-slider--vertical .twb-hero-slider__slide-img { position: absolute; inset: 0; min-height: 0; display: block; object-fit: cover; z-index: 0; opacity: 1 !important; visibility: visible !important; } html.twb-full-preview-doc .twb-hero-slider.swiper-vertical .twb-hero-slider__slide-gradient, html.twb-full-preview-doc .twb-hero-slider.twb-hero-slider--vertical .twb-hero-slider__slide-gradient { position: absolute; inset: 0; z-index: 1; pointer-events: none; } html.twb-full-preview-doc .twb-hero-slider.swiper-vertical .twb-hero-slider__slide-inner, html.twb-full-preview-doc .twb-hero-slider.twb-hero-slider--vertical .twb-hero-slider__slide-inner { position: relative; z-index: 2; }