/* ============================================================================
* regularclass-embed-overrides.css (v4 — Shadow DOM 단순화)
* ----------------------------------------------------------------------------
* body.embed-mode 한정 sticky / CTA 분기 정책.
*
* task: classview-intro-embed-260528 v4 (plan v4 §S5)
*
* 활성 조건:
* - classView.vue 가 정규과정 contentsid 진입 시 mounted/route-watch 에서
* document.body.classList.add('embed-mode') → 라우트 이탈 시 remove
* - 단일 source-of-truth: src/views/class/embed-config.js EMBED_BODY_CLASS
*
* 정책 (사용자 명시):
* 1) 모바일 기존 부유 요소 (foot_fix_menu / classView buy_btn_list) hide
* - v13.html 의 .cta-float 이 모바일 CTA 단일 채널로 작동
* 2) PC 카톡 상담 버튼 (foot_btn_kaka) 은 유지하되 v13 .cta-float (z-index:99) 위로
* 이동. bottom 도 .cta-float 위로 올림 (세로 스택)
* 3) PC 정규과정 .cta-float 높이 +4px (top/bottom padding 각 +2px)
* 4) 모바일에서 v13 .cta-float 이 foot 영역과 겹치지 않도록 bottom safe-area
* 이슈 없는 16px 그대로 유지 (foot_fix_menu hide 됐으므로 안전)
* 5) host (.rc-embed-host) 풀폭 표시 — viewport 100vw 확장
*
* v4 변경점 (이전 v2/v3 와 비교):
* - §6~§9 누적 cascade fix 모두 삭제. Shadow DOM boundary 가 매직바디 글로벌
* element selector (h1·.page span·body·badge__txt 등) 영향을 자동 차단.
* - shadow root 안 모든 v13 스타일은 임베드 산출물의 :host scoped CSS 가 책임.
* - 본 파일은 light DOM (shadow boundary 밖) — host wrapper / 매직바디 layer 전용.
*
* 글로벌 영향 0 — 셀렉터 모두 `body.embed-mode` 안에서만 작동.
* 일반 강의·일반 결제 페이지에는 영향 X.
*
* 롤백: embed-config.js 의 REGULARCLASS_EMBED_CONTENTIDS = [] 로 비우면
* body 에 .embed-mode 클래스 부여되지 않아 본 규칙 전부 inert.
* ============================================================================ */
/* ---------------------------------------------------------------------------
* 1. 모바일: 기존 부유 요소 hide
* ---------------------------------------------------------------------------
*
* fix-round-4 (2026-05-28):
* - 이전 v4 에서는 .buy_btn_list + .detail_con 까지 통째 hide 했음.
* - 사용자 결함 보고 "교육소개 위로 옵션선택 구매하기 버튼 등이 다 사라져있어 안보여" →
* 매직바디 표준 옵션선택 + 가격합 + 구매하기 + 장바구니 영역은 그대로 살린다.
* - 정규과정 추가 신청 CTA 는 부모(RegularclassIntroEmbed.vue) 의 sticky float CTA 로
* 별도 분리 — 매직바디 표준 구매 UI 와 공존.
* - foot_fix_menu (모바일 footer 부유 메뉴) 는 sticky CTA 와 겹쳐서 시각 혼잡 → 유지 hide.
* --------------------------------------------------------------------------- */
/* footer 모바일 하단 고정 메뉴 (HOME/내강의실/검색/장바구니/문의하기) — 모바일에서만 보이는 요소.
* 정규과정 임베드 시 부모 sticky CTA 와 겹쳐서 시각 혼잡 → hide */
body.embed-mode #footer .foot_fix_menu {
display: none !important;
}
/* ---------------------------------------------------------------------------
* 2. PC (≥768px): 카톡 상담 버튼이 v13 .cta-float 위로 (세로 스택)
* ---------------------------------------------------------------------------
* - 기존 #footer .foot_btn_kaka: position:fixed; right:20px; bottom:20px; z-index:50
* - v13 .cta-float (PC): position:fixed; right:16px; bottom:16px; z-index:99
* (shadow boundary 안에 있지만 position:fixed 는 viewport 기준 — host 외부 영역 점유)
* - 충돌: .cta-float 이 카톡 위에 겹쳐서 카톡이 안 보이거나 클릭 막힘.
* - 해결: embed-mode 한정으로 카톡 z-index 를 .cta-float (99) 위(100)로 올리고
* bottom 을 .cta-float 위로 (cta-float PC 높이 ~58px + 16px margin + 약간 gap
* → 100px). cta-float 패딩 +4px 고려.
* - 모바일(<768px) 에서는 카톡 자체가 display:none (layout.css line 457). 영향 X */
/* fix-round-30 (2026-05-29) — 카톡 button 디자인(SVG + 옅은 drop-shadow)을 모든 viewport
* 공통으로 이동. 모바일에서도 표시될 때 PC 와 동일 시각.
* (round-14 그림자 옅게 + round-27 SVG 깨끗·자연 그림자 누적). */
body.embed-mode #footer .foot_btn_kaka {
background: transparent !important;
box-shadow: none !important;
}
body.embed-mode #footer .foot_btn_kaka button {
background-color: transparent !important;
box-shadow: none !important;
background-image: url(/img/foot_kakao.81c3a5a4.svg) !important;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) !important;
}
@media (min-width: 951px) {
/* fix-round-30 v2 (2026-05-29) — breakpoint 768 → 951 (매직바디 모바일 break 950).
* PC 카톡·top 위치 (round-8 결정). */
body.embed-mode #footer .foot_btn_kaka {
bottom: 80px;
z-index: 100;
}
body.embed-mode #footer .foot_btn_top {
bottom: 160px;
}
}
/* 모바일·태블릿 (≤950px) — PC 와 동일 세로 스택: CTA(16) → 카톡(80) → top(160).
* fix-round-30 v2 (2026-05-29) — 사용자 정정 "PC처럼 cta 위로 카톡, 카톡 위로 top 버튼".
* + breakpoint 767 → 950 (매직바디 layout.css L316 기본 모바일 분기 일치, 768~950 dead zone 해소). */
@media (max-width: 950px) {
body.embed-mode #footer .foot_btn_top {
bottom: 160px !important;
}
/* :has(#header.fix) — 스크롤 업 시만 카톡 표시. PC 와 동일 위치(bottom 80, z 100). */
body.embed-mode:has(#header.fix) #footer .foot_btn_kaka {
display: block !important;
position: fixed !important;
right: 16px !important;
bottom: 80px !important;
z-index: 100 !important;
}
/* fix-round-11 정정: 사용자 명확 verbatim "매직바디 기본 buy_btn_list 로 올리면 cta 와
* 겹친다. cta 있던 자리에 구매/장바구니가 있었는데 이걸 없애니까 기능이 사라졌다.
* 상단 금액 아래에 넣어달란 얘기".
* 매직바디 기본 fixed bottom 0 buy_btn_list 를 .rt 안 normal flow 로 강제 →
* .rt 자연 height increase → 금액 아래에 구매하기·장바구니 표시 + 우리 CTA(bottom 16px)
* 와 안 겹침.
* fix-round-12 추가: 사용자 "뒤에 배경 없애고 가로 풀로 확장" — 매직바디 기본 fixed 띠 배경
* 제거 + .rt 부모의 padding 영향 차단을 위해 max-width none + margin-left/right 0 강제.
* 안 보이는 검은 띠/회색 배경 padding 모두 reset. */
body.embed-mode .view_typeA .class_infor .rt .pc_mb_purchase .buy_btn_list {
position: static !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: none !important;
z-index: auto !important;
margin-top: 16px !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* 부모 wrapper 도 띠 배경 들고 있을 수 있음 — embed-mode 한정 reset */
body.embed-mode .view_typeA .class_infor .rt .pc_mb_purchase {
background: transparent !important;
padding: 0 !important;
}
}
/* ---------------------------------------------------------------------------
* fix-round-4 (2026-05-28) — 결함 5: "교육소개" 탭 제목 hide + 탭 아래 여백 최소화
* ---------------------------------------------------------------------------
* 사용자 명시: "교육소개 란 제목도 없애고, 탭 아래 여백없이 바로 디자인이 붙을 수 있는지?
* 이건 반드시 되야하는건 아님."
*
* - classView.vue L189-200 의 #subCon2 첫 자식 교육소개
만 hide
* (subCon1·3·4·5·6 의 H2 는 영향 X — embed-mode + #subCon2 한정)
* - tabCon padding-top: 0 으로 탭 navigation 아래 여백 제거
* - .class_detail h2 의 margin-bottom: 48px 는 h2 자체 hide 시 자동 영향 0 → 별도 조치 X
* - 부작용 가드: 다른 isEmbed=false 강의·다른 탭은 영향 X (selector 모두 embed-mode 안)
*
* 사용자가 "반드시 되야 X" 명시 → CSS-only 안전한 처리. 부작용 발견 시 1줄 삭제로 즉시 회귀.
* --------------------------------------------------------------------------- */
body.embed-mode .view_typeA .class_detail #subCon2 > h2 {
display: none !important;
}
/* tabCon 자체 padding/margin 최소화 — 탭 아래 여백 제거.
* .view_typeA .class_detail .tabCon 의 기본 padding-top 이 다른 탭(subCon1·3 등)에도 영향 미치면 안 되므로
* #subCon2 한정. */
body.embed-mode .view_typeA .class_detail #subCon2 {
padding-top: 0;
margin-top: 0;
}
/* ---------------------------------------------------------------------------
* 3. PC: v13 .cta-float 높이 +4px (사용자 명시 디자인 의도)
* ---------------------------------------------------------------------------
* ⚠️ Shadow DOM v4 — .cta-float 는 shadow root 안에 있어 light DOM selector 가
* 적용 안 됨. 본 규칙은 light DOM (.rc-embed-host descendant) 대상 검색 결과
* 안 잡힘 → 자동 inert. **본 +4px 디자인 의도는 v13.html 원본에서 직접 처리**
* (embed-builder 가 :host scoped CSS 안에 포함 → shadow root 안에서만 적용).
*
* ↓ 아래 규칙은 light fallback 경로용 — Safari 16.3- 환경에서만 매칭됨.
* (light fallback 시 wrapper `.rc-embed` 안 본문 light DOM)
* --------------------------------------------------------------------------- */
@media (min-width: 768px) {
body.embed-mode .rc-embed-host .rc-embed .cta-float {
padding-top: 17px !important;
padding-bottom: 17px !important;
}
}
/* ---------------------------------------------------------------------------
* 4. host 풀폭 표시 — 부모 컨테이너 가로 제약 무력화
* ---------------------------------------------------------------------------
* 사용자 명시 (2026-05-28): "교육소개 탭 아래로 작업해둔 v13.html 화면이 가로
* 풀사이즈로 보이기만 하면 됨". 부모(.sub_con_wrapB max-width:1340px + .view_typeA
* padding + classView 컨테이너) 가로 제약 → host 안 shadow root 도 가로 1260px 로
* 제한됨. host 자체를 viewport 100vw 로 확장.
*
* 다른 탭 subCon1·3·4·5 에는 rc-embed-host 가 없으므로 회귀 영향 X.
* --------------------------------------------------------------------------- */
body.embed-mode .rc-embed-host {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: none;
}
/* horizontal scrollbar 방지 — 100vw 확장 + 일부 viewport 에서 scrollbar 폭으로 인한
* overflow 발생 가능.
*
* fix-round-12 (2026-05-29) — overflow-x:hidden → clip 전환 + .body wrapper 규칙 삭제.
*
* 사용자 결함 "상단 탭이 스크롤 따라오지 않음" 의 원인:
* position:sticky 는 ancestor 중 어디라도 overflow 가 visible 이 아니면 그 컨테이너
* 안에서만 작동 (viewport 기준 sticky 가 깨짐). 기존 body / html / .body 에 걸어둔
* overflow-x: hidden 이 .tab_menu.page_link 의 sticky containing block 을 강탈해
* 스크롤 따라오기 작동 불가.
*
* 해결:
* - overflow-x: clip 은 hidden 과 시각 차단 효과는 동일하나 scroll containing block
* 을 만들지 않아 sticky 안 깨짐. Chrome 90+ / Firefox 81+ / Safari 16.0+ 지원
* (매직바디 사용자 환경 대부분 OK)
* - .body wrapper 의 overflow 규칙은 통째 제거. body 한 곳만 clip 으로 충분.
* - html:has 도 제거 — body clip 만으로 가로 스크롤 차단. */
body.embed-mode {
overflow-x: clip;
}
/* fix-round-10 (2026-05-28) — fix-round-9 잔재(GNB hide + 탭 fix2 hide) 통째 제거.
* 사용자 요구 "gnb가 사라졌어. 상단에 탭은 따라다니게 해줘" 정정.
* 매직바디 기본 메커니즘 그대로 작동시킴 — GNB hide-on-scroll-down 매직바디 표준,
* 탭은 sticky 그대로 (다운 시 hide 안 함). */
/* fix-round-12 (2026-05-29) — 하단 흰 여백 제거 (사용자 결함 "최하단 섹션 아래·교육일정 위 흰여백 길게").
* 원인: #subCon2 의 padding-bottom + .class_detail tab 간 gap + iframe element 의 inline
* baseline gap (display:inline 기본). 다음 탭(subCon3 교육일정) 과 iframe 사이의 모든
* 잔여 여백 제거.
*
* fix-round-13 (2026-05-29) — 잔존 100px 추적: 실제 원인은 매직바디 기본 정책의
* #subCon3.tabCon { margin-top: 100px }. 부모 viewport 측정으로 확인됨. embed-mode 안에서
* #subCon3 의 margin-top 도 0 으로 잡아야 iframe 끝(=#subCon2 끝) 과 교육일정 시작 사이 0.
* 다른 페이지(.embed-mode 미부착)는 매직바디 기본 100px 유지 — 회귀 0. */
body.embed-mode .view_typeA .class_detail #subCon2 {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.embed-mode .view_typeA .class_detail #subCon3 {
/* 2026-05-31: 교육일정 제목 위 여백 추가 (CTA 하단 타이트닝 후 간격 확보) */
margin-top: 48px !important;
}
/* fix-round-29 (2026-05-29) — 스크롤 업 시 GNB·탭 겹침 해소 (모든 viewport).
* 원인: 매직바디 .tab_menu.fix top 값(35~70px)이 매직바디 실제 #header height(51~101px)
* 보다 작아 겹침. viewport 별 다름 (414: header 51 / tab 35 / overlap 16, 768: 101 / 70 / 13).
* 해결: JS 로 #header.offsetHeight 측정 후 CSS variable --rc-header-h 갱신. tab.fix top 을
* header height 만큼 설정 → 모든 viewport 에서 자동 겹침 0.
* embed-mode 한정 — 다른 페이지 영향 0. */
body.embed-mode .tab_menu.page_link.fix {
top: var(--rc-header-h, 51px) !important;
}
/* fix-round-18 (2026-05-29) — lightbox open 시 부모 sticky 탭 + 매직바디 header(GNB)
* 모두 hide. round-17 에서 탭만 display:none 했더니 GNB 의 .head_box 가 lightbox
* 닫기 버튼(우상단 16px) 영역을 덮는 게 확인됨. body 에 'rc-lightbox-active' 클래스를
* 토글하는 방식 — RegularclassIntroEmbed 의 lockParentScroll/unlockParentScroll 과
* 같이 작동. inline style 보다 CSS class + !important 가 안전. */
body.embed-mode.rc-lightbox-active .tab_menu.page_link,
body.embed-mode.rc-lightbox-active #header {
display: none !important;
}
/* fix-round-15 (2026-05-29) — 탭 좌우 잘림 (사용자 결함 "탭이 좌우 잘려있어").
* 원인: .tab_menu.page_link 가 sticky 인데 부모(.sub_con_wrapB max-width:1340px / .view_typeA padding)
* 안 폭만 차지 → viewport 가 더 넓을 때 양쪽에 매직바디 wrapper 배경 노출 → "잘린 것처럼" 보임.
* 해결: rc-embed-host 와 같은 방식으로 .tab_menu.page_link 도 viewport 100vw 로 확장 +
* 안 ul 은 max-width 1340 + 가운데 정렬 + 좌우 padding 유지 (시각 컨텐츠는 매직바디 표준 위치).
* embed-mode 한정이라 일반 페이지 회귀 0. */
body.embed-mode .tab_menu.page_link {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: none;
}
body.embed-mode .tab_menu.page_link > ul {
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/* fix-round-25 (2026-05-29) — 탭 ul 영역 = 본 콘텐츠/CTA 가로폭 정확 정렬 (모든 viewport).
* 사용자 verbatim "PC는 컨텐츠 영역과 맞추고, 모바일은 cta 버튼 가로사이즈와 맞추라고"
* + "탭 영역은 pc와 모바일에 중간 사이즈에서 위치가 이상하게 나와".
*
* round-24 결함: PC max-width 1260 고정 → viewport 1024 같은 중간 사이즈에서 ul width=viewport 1024
* 가 됨 → 본 콘텐츠(view_typeA width 939) 보다 좌우 43 바깥. 매직바디 #content padding 이
* viewport-dependent(48px@768 / 24px@1440) 이라 CSS calc() 만으로 정확 매핑 불가.
*
* 해결: JS 로 .view_typeA width 측정 후 CSS variable --rc-tab-ul-width 갱신
* (RegularclassIntroEmbed.vue mounted hook + resize listener). 모바일 (<768) 은 CSS calc
* (CTA width = viewport-32) 사용.
*
* Playwright 실증 (모든 viewport 정확 일치):
* - 414(모바일): ul 15/397/382 = CTA 16/396/380
* - 768(작은 PC): ul = view_typeA 48/718/670
* - 1024(중간 PC): ul = view_typeA 40/979/939
* - 1440(큰 PC): ul = view_typeA 88/1348/1260 */
body.embed-mode .tab_menu.page_link {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.embed-mode .tab_menu.page_link > ul {
max-width: calc(100vw - 32px);
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
@media (min-width: 768px) {
body.embed-mode .tab_menu.page_link > ul {
/* fix-round-25 fallback — JS sync 전 첫 paint 1프레임 안전망. 중간 viewport(1024)에서
* 1260px 고정이면 viewport 초과 → 좌우 잘림 가능. min() 으로 viewport-32 cap. */
max-width: var(--rc-tab-ul-width, min(calc(100vw - 80px), 1260px));
}
}
/* fix-round-21 — 탭 폰트 2pt 축소 + 높이 약간 줄임 (사용자 verbatim "상단 탭에 폰트를 2포인트씩
* 줄이고 높이도 약간 줄이기, PC 모바일 다"). 매직바디 기본 .tab_menu ul li a 의 padding 16px 0
* → 12px 0 (높이 -8px). font-size 는 매직바디 body 기본(16px) 대비 14px 로 명시(2px 축소).
* embed-mode 한정 — 다른 페이지 회귀 0. */
body.embed-mode .tab_menu.page_link ul li a {
font-size: 14px !important;
padding: 12px 0 !important;
}
body.embed-mode .rc-embed-host {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
line-height: 0;
font-size: 0;
}
body.embed-mode .rc-embed-iframe {
display: block !important;
vertical-align: top !important;
margin-bottom: 0 !important;
}
/* ============================================================================
* [프리뷰 라우트 전용 추가] de-iframe 본문 컨테이너 (.rc-geo-inline-root)
* ----------------------------------------------------------------------------
* 단계 분리 재작업 (2026-05-29, 계약 §2.6):
* 위 §1~끝 규칙은 main 2c0331e 원본 그대로 복구 — 실제 판매 라우트(/classView)의
* RegularclassIntroEmbed(iframe) 가 사용(`.rc-embed-host`/`.rc-embed-iframe` 등). 실제
* 경로 시각은 main 과 100% 동일.
*
* 아래 `.rc-geo-inline-root` 블록은 **프리뷰(검수) 라우트** `/classView-stage2-preview` 의
* RegularclassIntroInline(본문 직접 인라인) 전용. 실제 라우트엔 이 셀렉터가 없어 inert →
* 실제 경로 회귀 0. 두 셀렉터 집합은 라우트별로 한쪽만 존재하므로 충돌 없음.
*
* 본문 섹션 풀폭 배경이 부모 컨테이너(.sub_con_wrapB max-width:1340px + .view_typeA
* padding) 폭에 갇히지 않도록 본문 루트를 viewport 100vw 로 확장(구 `.rc-embed-host`
* 와 동일 기법). 본문 .page 는 내부 --maxw 로 중앙 정렬 → 콘텐츠 폭은 SoT 그대로.
* (#subCon2 제목 hide·여백 0, #subCon3 margin 0, 탭 풀폭/정렬, overflow-x clip 은 위
* 공통 규칙이 이미 처리 — 셀렉터가 본문 컨테이너 비의존이라 프리뷰에도 그대로 적용.)
* ============================================================================ */
body.embed-mode .rc-geo-inline-root {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: none;
/* 탭 아래 여백 0 — 다음 탭(교육일정)과 자연 연결 */
margin-bottom: 0;
padding-bottom: 0;
}
/* ============================================================================
* rc-embed-host — iframe wrapper
* ----------------------------------------------------------------------------
* - display: block + width: 100% — 부모 layout(.subCon2)에 맞춤
* - overflow: hidden — 이중 스크롤바 방지 (iframe 자체 스크롤바 0, 부모만 스크롤)
* - contain: style — layout 격리는 제거 (fix-round-5: position:fixed sticky CTA 가
* contain:layout containing block 에 박혀 absolute 처럼 작동하던 결함 fix)
* ============================================================================ */
.rc-embed-host[data-v-5b2848df] {
display: block;
width: 100%;
overflow: hidden;
contain: style;
position: relative;
}
/* ----------------------------------------------------------------------------
* iframe — 핵심 viewport
* ----------------------------------------------------------------------------
* - border: 0 / margin/padding: 0 — 시각 boundary 없음 (v13 그대로 보이도록)
* - width: 100% / height: dynamic (postMessage 로 set)
* - overscroll-behavior: contain — 스크롤 모멘텀 부모 전파 차단 (M1)
* - touch-action: pan-y — 좌우 스와이프 부모 navigation 전달 X
* - background: #fff — v13 배경과 일치 (load 전 첫 paint 자연스러움)
*/
.rc-embed-iframe[data-v-5b2848df] {
display: block;
/*
* 결함 #1 fix — width 100% + min-width 0 + max-width none.
* 외부 CSS(.subCon2·.editorCont)가 iframe 에 max-width 또는 width 제약을
* 걸 가능성 차단. inline style 도 같이 width:100% (iframeStyle computed).
*/
width: 100%;
min-width: 0;
max-width: none;
border: 0;
margin: 0;
padding: 0;
background: #ffffff;
overscroll-behavior: contain;
touch-action: pan-y;
/*
* 매직바디 글로벌 CSS 의 `iframe { zoom: 1.3 }` (다른 임베드용) 무력화.
* zoom 1.3 적용 시 child viewport 1108 인데 시각만 1440 로 확대 → v13 PC
* layout 깨짐 (사용자 결함 보고 "확대돼서 모바일 화면이 PC에서 나옴").
*/
zoom: 1 !important;
}
/* ----------------------------------------------------------------------------
* skip link — 키보드 접근성 (시각 hidden, focus 시 표시)
* ---------------------------------------------------------------------------- */
.rc-embed-skip-link[data-v-5b2848df] {
position: absolute;
top: -9999px;
left: 0;
z-index: 1;
padding: 8px 12px;
background: #0f1c17;
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
.rc-embed-skip-link[data-v-5b2848df]:focus {
top: 0;
}
.rc-embed-skip-anchor[data-v-5b2848df] {
/* focus 핸드오프 target — 시각 영향 0 */
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
/* ----------------------------------------------------------------------------
* error UI — load 실패 시 visible 안내
* ---------------------------------------------------------------------------- */
.rc-embed-error-ui[data-v-5b2848df] {
padding: 40px 20px;
text-align: center;
background: #faf7f0;
border: 1px solid #ece8df;
border-radius: 14px;
margin: 20px;
}
.rc-embed-error-text[data-v-5b2848df] {
color: #4a5550;
font-size: 15px;
margin: 0 0 12px;
}
.rc-embed-retry-btn[data-v-5b2848df] {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
background: #21b173;
color: #ffffff;
border: 0;
border-radius: 10px;
padding: 10px 20px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease;
}
.rc-embed-retry-btn[data-v-5b2848df]:hover,
.rc-embed-retry-btn[data-v-5b2848df]:focus {
background: #156a47;
}
/* ============================================================================
* fix-round-7 (2026-05-28) — 부모 sticky CTA · v13.html .cta-float 100% 복제
* ----------------------------------------------------------------------------
* 근거: v13.html L2278~2307 (base + 모바일) + L2494~2497 (PC ≥880px override)
*
* v13 원본 CSS 그대로 복제 (rule-by-rule 1:1):
*
* [base / mobile-first — v13 L2279~2291]
* position: fixed; bottom: 16px; left: 16px; right: 16px;
* z-index: 99; background: var(--green-1) = #0f1c17; color: #fff;
* border-radius: 999px; padding: 15px 22px;
* display: flex; align-items: center; justify-content: space-between;
* gap: 10px; font-weight: 700; font-size: 14.5px;
* box-shadow: 0 18px 36px -14px rgba(15,28,23,0.45);
* transition: opacity .25s ease, transform .25s ease, visibility .25s;
*
* [PC ≥880px — v13 L2495]
* max-width: 540px; left: auto; right: 16px; transform: none;
* padding: 15px 20px 15px 16px;
*
* fix-round-7 PC bottom 정책 (v13 와 다른 점 — 매직바디 임베드 환경 한정):
* - v13 단독 진입 시 PC bottom 16px (v13 L2281 base 유지)
* - 매직바디 임베드 환경에선 카톡 버튼(bottom 100px)이 동시 노출 →
* 사용자 요구 "PC에서는 카톡버튼 아래로 cta" → CTA bottom 20px
* (카톡 100px 가 위에, CTA 20px 가 아래 — 안 겹치는 세로 스택)
* - 모바일은 카톡 자체 hidden 이라 v13 base bottom 16px 그대로
*
* z-index 정책 변경:
* - 이전 fix4: 본 CTA z:101 (카톡 z:100 위)
* - fix-round-7: 본 CTA z:99 (v13 원본 동일) — 카톡 z:100 아래라도 안 겹치는 위치라
* 시각 충돌 X. v13 원본 토큰 유지 우선.
*
* 사용자 시각 동기화:
* - v13 .cta-float 디자인은 거의 변경 없음(D-day·기수 텍스트만 가끔)
* - 디자인 변경 시 본 scoped style 도 v13 토큰 보고 수동 sync
*
* 부작용 가드:
* - .rc-cta-sticky 는 컴포넌트 scoped 클래스 → 다른 상품 페이지 영향 0
* - v5Enabled flag OFF / contentsid 화이트리스트 외 / v-if loadError → markup 0
* ============================================================================ */
/* base (mobile-first — v14 round 5 padding 17px 22px sync — v13.html L2289) */
.rc-cta-sticky[data-v-5b2848df] {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
z-index: 99;
background: #0f1c17; /* v13 var(--green-1) */
color: #ffffff;
border-radius: 999px;
padding: 17px 22px; /* fix-round-12: v14 sync (round 5: 15→17, 높이 +4) */
/* fix-round-22 — round-21 line-height: 1.4 가 v14 standalone(inherit normal ≈ 1.6) 과
* 값 차이로 vertical 정렬·element height·texture spacing 모두 어긋남(운영 측정 결과
* 20.3px vs v14 23.2px). normal 은 CSS spec 상 inherit 안 됨 → host 의 0 cascade 차단 +
* v14 와 100% 일치 line-height 적용. font-size 는 14.5px 명시 유지. */
line-height: normal;
font-size: 14.5px;
/* fix-round-23 — v14-live 와 동일 폰트(Pretendard Variable) + letter-spacing + font-feature.
* 매직바디 글로벌 Noto Sans KR cascade 차단. Pretendard 가 더 좁은 글자 width → 모바일
* cta-left 텍스트가 한 줄에 들어가게 함. Pretendard CDN 은 mounted hook 에서 동적 load. */
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
letter-spacing: -0.192px;
font-feature-settings: "ss01", "ss02";
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-weight: 700;
font-size: 14.5px;
text-decoration: none;
box-shadow: 0 18px 36px -14px rgba(15, 28, 23, 0.45);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
/* iframe 위 layer — 클릭 우선권 */
pointer-events: auto;
/* PC override 가 활성화될 때까지 max-width 제약 없음 */
max-width: none;
}
/* hover / active — v13 원본엔 명시 X. 사용성 위해 미세 transform 만 추가
* (v13 시각 토큰은 안 건드림 — color/background/border-radius/padding 모두 base 그대로) */
.rc-cta-sticky[data-v-5b2848df]:hover,
.rc-cta-sticky[data-v-5b2848df]:focus {
color: #ffffff;
text-decoration: none;
transform: translateY(-2px);
}
.rc-cta-sticky[data-v-5b2848df]:active {
transform: translateY(0);
}
/* PC (≥880px) — v14 .cta-float L2505 PC override 와 100% 일치 (사용자 round-14 결함 보고
* "v14-live 에는 cta 맞게 들어가 있는데 운영은 수정본 디자인스타일 css 적용 안됨").
*
* round-14 변경: 이전 768px → 880px (v14 단독 페이지와 동일 breakpoint).
* 768~879px 구간은 v14 단독에서 base padding 17px 22px / 모바일 위치 그대로 — 운영도 동일하게.
* 880px 이상부터 PC override 적용. */
@media (min-width: 880px) {
.rc-cta-sticky[data-v-5b2848df] {
max-width: 540px;
left: auto;
right: 16px;
bottom: 20px; /* fix-round-7: 카톡 100px 아래 (v14 base 16px 와 거의 동일) */
transform: none;
padding: 15px 20px 15px 16px;
}
}
/* hover / focus 의 transform 은 PC 도 동일 — 명시적 재선언 안 함 (base 의 transition 작동) */
/* cta-left — v13 L2295 (fix-round-32: nowrap — 좁은 폰 줄바꿈 방지) */
.rc-cta-sticky .cta-left[data-v-5b2848df] {
display: flex;
align-items: center;
min-width: 0;
white-space: nowrap;
}
/* pre (START 텍스트 pill) — v14 round 6 과 1:1 동기화.
* PC base: padding 위 +4 / 아래 +2 비대칭(7px 9px 5px), align-items:center 로 텍스트 가운데.
* 모바일: padding 7px 8px 5px (같은 패턴). */
.rc-cta-sticky .pre[data-v-5b2848df] {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10.5px;
font-weight: 700;
background: #21b173; /* v13/v14 var(--mint) */
color: #ffffff;
padding: 9px 11px 7px; /* fix-round-31: START 내부 여백 +2px */
border-radius: 999px;
letter-spacing: 0.06em;
line-height: 1;
margin-right: 2px;
}
/* cta-right base — v13 L2296~2298 */
.rc-cta-sticky .cta-right[data-v-5b2848df] {
font-size: 12.5px;
font-weight: 800;
color: #ffd7cc;
white-space: nowrap;
flex-shrink: 0;
margin-left: 12px;
}
.rc-cta-sticky .cta-right b[data-v-5b2848df] {
color: #ffffff;
font-weight: 600;
}
/* cta-dot — v13 inline style 보존 (L4463: ·) */
.rc-cta-sticky .cta-dot[data-v-5b2848df] {
margin: 0 8px;
opacity: 0.6;
}
/* fix-round-20 (2026-05-29) — @media ≤639 block 을 base rules(.pre + .cta-right + b + .cta-dot)
* 뒤로 이동. round-15 추가 시점에 base 보다 앞에 위치 → cascade 역전 → base 가 후순 우선
* → 모바일에서 .cta-right 12.5/12 (base) 가 11.5/6 (media) 를 덮어쓰는 결함 (운영 실측 확인).
* 이제 base → media ≤639 순서 → media ≤639 가 후순 우선 → 모바일에서 11.5/6 정상 적용
* → v14-live cascade 와 100% 일치.
*
* round-15 의 .cta-float / .pre 변경은 base 가 이미 앞에 있어 적용됐고, .cta-right 만
* base 가 file 뒤에 있어 역전 발생. 모두 한 번에 정리. */
/* fix-round-32 (2026-05-29) — 모바일 ≤639px: 비율(vw + clamp) 기반.
* 기준 414px(주력 폰) 기존 px 값을 vw 로 환산 + clamp(MIN, vw, MAX) 안전망.
* 효과: 280~639px 전 폰 한 줄 유지(.cta-left/.cta-right nowrap) + 시각 비율 일정.
* 임베드 환경: child 의 lockViewportUnits() 가 vw 토큰을 부모 viewport 기준 px 로
* override → iframe 내부가 아니라 부모 페이지 viewport 기준으로 계산됨.
*
* 기존 round-20 cascade 정상화 정책 그대로(base → media 순서). */
@media (max-width: 639px) {
.rc-cta-sticky[data-v-5b2848df] {
padding: clamp(11px, 3.4vw, 14px) clamp(13px, 4.3vw, 18px) clamp(11px, 3.4vw, 14px) clamp(10px, 3.4vw, 14px);
font-size: clamp(10.5px, 3.25vw, 13.5px);
gap: clamp(5px, 1.9vw, 8px);
}
.rc-cta-sticky .pre[data-v-5b2848df] {
font-size: clamp(7.5px, 2.3vw, 9.5px);
padding: clamp(7px, 2.15vw, 9px) clamp(6px, 1.9vw, 8px);
line-height: 1;
margin-right: 1px;
}
.rc-cta-sticky .cta-right[data-v-5b2848df] {
font-size: clamp(10.5px, 3.25vw, 13.5px); /* fix-round-32c: cta-left 와 동일 */
margin-left: clamp(4px, 1.45vw, 6px);
}
.rc-cta-sticky .cta-dot[data-v-5b2848df] {
margin: 0 clamp(4px, 1.9vw, 8px);
}
}
/* PC (≥880px) — v14 L2506 .cta-right font 13.5px */
@media (min-width: 880px) {
.rc-cta-sticky .cta-right[data-v-5b2848df] {
font-size: 13.5px;
}
}