.video_lightbox[data-v-5fe68ed8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.92);
    /* 모바일 하단 고정 네비바(#footer .foot_fix_menu z-index:300)·GNB 위로 확실히 덮음 */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
/* 가로(인터뷰)는 세로 스택 — 상단바(닫기·네비)가 영상 위, 제목이 영상 아래로 쌓이게. */
.video_lightbox.vlb-landscape[data-v-5fe68ed8] {
    flex-direction: column;
}
/* stage + peek 세로 묶음 — 유튜브 쇼츠처럼 현재 영상 박스 아래 다음 영상 박스가 gap 두고 분리.
   center 정렬, viewport 안에 stage+gap+peek 가 들어가도록 stage 높이를 아래에서 줄임. */
.video_lightbox .vlb_feed[data-v-5fe68ed8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* 가로(인터뷰) 16:9 — PC 더 크게(가용 높이 채움). */
.video_lightbox .vlb_stage[data-v-5fe68ed8] {
    position: relative;
    width: min(94vw, 1320px);   /* PC 가로(인터뷰) 거의 꽉 — 양옆 여백 축소 (16:9 라 height 따라옴) */
    max-height: 86vh;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 12px;
}
/* YouTube Player(div→iframe) — stage 채움. */
.video_lightbox .vlb_player[data-v-5fe68ed8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}
/* YT API 가 만든 iframe 은 Vue scoped data 속성이 없어 .vlb_player scoped 룰이 안 먹음 →
   stage 직속 iframe 을 :deep 으로 강제로 stage 꽉 채움(영상 아래·우측 검은 여백 방지). */
.video_lightbox .vlb_stage[data-v-5fe68ed8] iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 12px;
}

/* ── 영상 위 전면 제스처 레이어 — 위아래 스와이프(전환·최우선) + 탭(재생/일시정지) ──
   iframe 위(z 1) / 커스텀 컨트롤(타임라인 z 4·소리 z 4)보다 아래. 영상 위 전부 덮음(가로·세로). */
.video_lightbox .vlb_gesture[data-v-5fe68ed8] {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    /* 투명 — 영상이 그대로 보이되 터치·클릭은 우리가 받음. native 스크롤·줌 차단(전환 제스처 충돌 방지). */
    touch-action: none;
    background: transparent;
}

/* (센터 재생/일시정지 아이콘 스타일 제거 — 유튜브 자체 일시정지 화면과 중복되어 표시 안 함.) */

/* ── 소리 버튼 (좌상단, 작게) ── */
.video_lightbox .vlb_sound_btn[data-v-5fe68ed8] {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video_lightbox .vlb_sound_btn[data-v-5fe68ed8]:hover { background: rgba(0, 0, 0, 0.7);
}
.video_lightbox .vlb_sound_btn svg[data-v-5fe68ed8] { display: block;
}

/* ── 하단 커스텀 컨트롤 (타임라인 seek + 시간) — 제스처 레이어보다 위 z 4 라 seek 가 스와이프에 안 먹힘 ── */
.video_lightbox .vlb_controls[data-v-5fe68ed8] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 8px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: none; /* 컨테이너는 통과 — 자식 타임라인만 받음(여백 클릭은 제스처로) */
}
/* 타임라인 — 두께 ~6px, 클릭 hit-area ~14px(상하 패딩). 클릭/드래그 seek. */
.video_lightbox .vlb_timeline[data-v-5fe68ed8] {
    position: relative;
    width: 100%;
    height: 6px;
    padding: 4px 0;            /* hit-area ~14px (6 + 4*2) */
    cursor: pointer;
    pointer-events: auto;     /* 컨트롤 컨테이너는 통과지만 타임라인은 받음 */
    touch-action: none;       /* 드래그 seek 시 스크롤·스와이프 충돌 방지 */
}
.video_lightbox .vlb_timeline_track[data-v-5fe68ed8] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.3);
}
.video_lightbox .vlb_timeline_progress[data-v-5fe68ed8] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    background: #ff0000;       /* 유튜브식 빨강 진행 */
    pointer-events: none;
}
.video_lightbox .vlb_timeline_thumb[data-v-5fe68ed8] {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff0000;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.video_lightbox .vlb_time[data-v-5fe68ed8] {
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* ── PC 세로(쇼츠) 다음 영상 peek — stage 아래 gap, stage 와 정확히 같은 폭, 상단 ~40px 만 보이게. ──
   폭을 stage 와 동일하게: stage 는 width:auto + height:var(--vlb-stage-h) + aspect-ratio 9/16 이라
   실폭 = stage 높이 * 9/16. peek 도 동일 계산식으로 폭을 고정해 stage 와 좌우 동폭·동정렬(feed center)로 맞춤. */
.video_lightbox .vlb_peek[data-v-5fe68ed8] {
    width: calc(var(--vlb-stage-h, 80vh) * 9 / 16);
    max-width: 92vw;
    height: 40px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #000;
    cursor: pointer;
    flex: 0 0 auto;
    opacity: 0.82;
    transition: opacity 0.15s ease;
}
.video_lightbox .vlb_peek[data-v-5fe68ed8]:hover { opacity: 1;
}
.video_lightbox .vlb_peek_img[data-v-5fe68ed8] {
    width: 100%;
    height: auto;
    display: block;
    /* 썸네일 상단부만 보이게(중앙 상단 crop) */
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center top;
       object-position: center top;
}

/* ── 가로(인터뷰) 상단 바 — 영상 stage 바깥 위쪽. 닫기(×) 우상단만(위아래 네비는 .vlb_nav_h 로 분리). ── */
.video_lightbox .vlb_top_bar[data-v-5fe68ed8] {
    width: min(94vw, 1320px);
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* 닫기 우상단 */
    margin-bottom: 12px;
    z-index: 5;
}
.video_lightbox .vlb_top_close[data-v-5fe68ed8] {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    font-size: 26px;
    line-height: 1;
    padding-bottom: 2px;
}
.video_lightbox .vlb_top_close[data-v-5fe68ed8]:hover { background: rgba(255, 255, 255, 0.3);
}

/* ── 가로(인터뷰) 위/아래 네비 — PC: 영상 stage 우측 바깥 옆. lightbox 직속 형제(클리핑 무관). ──
   stage 우측 가장자리 = viewport 중앙 + stageWidth/2. viewport 우측에서 그 지점까지 거리 =
   (100vw - stageWidth)/2. 거기서 네비 폭(52)+gap(12) 만큼 안쪽으로 두면 stage 우측 바로 옆. */
.video_lightbox .vlb_nav_h[data-v-5fe68ed8] {
    position: absolute;
    top: 50%;
    /* stage 우측 바깥 옆. 좁은 PC 에서 음수(viewport 밖)로 빠지지 않게 하한 8px. */
    right: max(8px, calc((100vw - min(94vw, 1320px)) / 2 - 64px));
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 6;
}
.video_lightbox .vlb_nav_h button[data-v-5fe68ed8] {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.video_lightbox .vlb_nav_h button svg[data-v-5fe68ed8] { display: block;
}
.video_lightbox .vlb_nav_h button[data-v-5fe68ed8]:hover { background: rgba(255, 255, 255, 0.3);
}

/* ── 가로(인터뷰) 제목 — 영상 stage 밖 아래. ── */
.video_lightbox .vlb_info_below[data-v-5fe68ed8] {
    width: min(94vw, 1320px);
    margin-top: 14px;
    color: #fff;
    flex: 0 0 auto;
}
.video_lightbox .vlb_info_below_title[data-v-5fe68ed8] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}
.video_lightbox .vlb_info_below_meta[data-v-5fe68ed8] {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PC 세로(쇼츠) — 영상+gap+peek 가 viewport 를 채우고 peek 바닥이 viewport 바닥에 붙게(아래 검정 여백 0).
   상단 padding 만 24px, 아래 padding 0. feed 를 바닥(flex-end) 정렬해 peek 가 viewport 바닥에 닿게 함. */
.video_lightbox.vlb-portrait[data-v-5fe68ed8] {
    /* stage 높이 = viewport - 상단 padding(24) - gap(10) - peek(40). peek 폭 계산(--vlb-stage-h)에도 사용. */
    --vlb-stage-h: calc(100vh - 24px - 10px - 40px);
    align-items: stretch;       /* feed 가 컨테이너 폭을 채우고 그 안에서 가로 center */
    padding-bottom: 0;          /* 아래 검정 여백 0 — peek 가 viewport 바닥에 붙게 */
}
.video_lightbox.vlb-portrait .vlb_feed[data-v-5fe68ed8] {
    justify-content: flex-end;  /* 바닥 정렬 — peek 가 viewport 바닥(컨테이너 아래 padding 0)에 붙음 */
}
/* 세로(쇼츠) 9:16 — 상단 padding(24) + gap(10) + peek(40) 를 뺀 가용 높이를 stage 가 차지.
   → 영상 아래 gap·peek 가 viewport 바닥에 붙고 빈 여백 없음. */
.video_lightbox.vlb-portrait .vlb_stage[data-v-5fe68ed8] {
    width: auto;
    height: var(--vlb-stage-h);
    max-width: 92vw;
    max-height: none;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
}

/* ── 유튜브식 오버레이 (가로·세로 공통) — .vlb_stage 위에 겹침 ── */
/* 닫기(×) 영상 우상단 오버레이 */
.video_lightbox .vlb_close_ov[data-v-5fe68ed8] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
}
.video_lightbox .vlb_close_ov[data-v-5fe68ed8]:hover { background: rgba(0, 0, 0, 0.7);
}
/* 세로(쇼츠) 전용 — 제목 + 작성자 좌하단 오버레이 (최대 2줄). 하단 타임라인 위로 띄움. */
.video_lightbox .vlb_info_ov[data-v-5fe68ed8] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px;   /* 하단 커스텀 컨트롤(타임라인+시간 ~46px) 위로 띄워 가독성 확보 */
    padding: 0 16px 10px;
    color: #fff;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;            /* 제목 + 우측 상세정보 한 줄(공간 부족 시 줄바꿈) */
}
/* 세로(쇼츠) 오버레이 — 제목(한 줄). 상세정보를 우측에 두므로 1줄·말줄임. (2026-06-25 우측 배치) */
.video_lightbox .vlb_info_title[data-v-5fe68ed8] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
/* 세로(쇼츠) 오버레이 — 상세정보(classtitle)를 제목 우측에. 이름 중복 제거됨. 가운뎃점 구분. */
.video_lightbox .vlb_info_meta[data-v-5fe68ed8] {
    flex: 0 0 auto;
    font-size: 13px;
    opacity: 0.85;
    white-space: nowrap;
}
.video_lightbox .vlb_info_meta[data-v-5fe68ed8]::before {
    content: '·';
    margin-right: 6px;
    opacity: 0.7;
}
/* PC 위/아래 화살표 세로 스택 — lightbox 직속 형제(stage overflow 클리핑 무관). */
.video_lightbox .vlb_nav_v[data-v-5fe68ed8] {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 4;
}
.video_lightbox .vlb_nav_v button[data-v-5fe68ed8] {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.video_lightbox .vlb_nav_v button svg[data-v-5fe68ed8] { display: block;
}
.video_lightbox .vlb_nav_v button[data-v-5fe68ed8]:hover { background: rgba(255, 255, 255, 0.3);
}

/* 아래 방향 chevron 2개 세로 시차 페이드 힌트 — PC·모바일 공통, 영상 하단 가운데. */
.video_lightbox .vlb_swipe_hint[data-v-5fe68ed8] {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 18%;          /* 하단 ~18% 지점 (PC 기본) */
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
    opacity: 1;
}
.video_lightbox .vlb_swipe_hint .vlb_chev[data-v-5fe68ed8] { display: block; margin-top: -16px;
}
.video_lightbox .vlb_swipe_hint .vlb_chev1[data-v-5fe68ed8] { animation: vlbChevFade-5fe68ed8 1.5s ease-in-out infinite;
}
.video_lightbox .vlb_swipe_hint .vlb_chev2[data-v-5fe68ed8] { animation: vlbChevFade-5fe68ed8 1.5s ease-in-out infinite 0.25s;
}
@keyframes vlbHintBounce-5fe68ed8 {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(8px);
}
}
@keyframes vlbHintFade-5fe68ed8 {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes vlbHintAuto-5fe68ed8 {
0% { opacity: 1;
}
78% { opacity: 1;
}
100% { opacity: 0;
}
}
/* chevron 2개 시차 fade(아래 방향 흐름) */
@keyframes vlbChevFade-5fe68ed8 {
0%, 100% { opacity: 0.25; transform: translateY(0);
}
50% { opacity: 1; transform: translateY(4px);
}
}

/* ── 모바일 — 폭 없이 화면 꽉 채운 진짜 풀화면 (유튜브 쇼츠/모바일과 동일) ── */
@media (max-width: 768px) {
.video_lightbox[data-v-5fe68ed8] {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
}
.video_lightbox .vlb_feed[data-v-5fe68ed8] {
        width: 100%;
        height: 100dvh;
        gap: 0;
        justify-content: center;
        align-items: stretch;
}
    /* 가로(인터뷰) 16:9 — 폭 100vw, 세로 가운데 */
.video_lightbox .vlb_stage[data-v-5fe68ed8] {
        width: 100vw;
        max-width: 100vw;
        height: auto;
        max-height: none;
        aspect-ratio: 16 / 9;
        border-radius: 0;
        flex: 0 0 auto;
}
.video_lightbox .vlb_player[data-v-5fe68ed8],
    .video_lightbox .vlb_player[data-v-5fe68ed8] iframe { border-radius: 0;
}
.video_lightbox .vlb_info_ov[data-v-5fe68ed8] { border-radius: 0;
}
    /* 모바일 peek 숨김(PC 세로 전용) */
.video_lightbox .vlb_peek[data-v-5fe68ed8] { display: none;
}
    /* 가로(인터뷰) 상단 바·제목 아래 — 모바일 폭 맞춤 + 좌우 패딩 */
.video_lightbox .vlb_top_bar[data-v-5fe68ed8],
    .video_lightbox .vlb_info_below[data-v-5fe68ed8] {
        width: 100vw;
        max-width: 100vw;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
}
    /* 가로(인터뷰) 상단 바 — 화면 위에서 띄움(safe-area 고려). 닫기(×)만 우상단. */
.video_lightbox .vlb_top_bar[data-v-5fe68ed8] {
        margin-bottom: 10px;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        justify-content: flex-end;  /* 닫기 우상단 */
}
    /* 모바일 가로(인터뷰) 위아래 네비 — 화면(viewport) 우하단 고정. (2026-06-25 수정)
       이전: stage 세로 중앙 기준 calc 로 영상 위에 겹쳐 배치됐음(영상 304~523 안에 버튼 378~476).
       변경: 영상(16:9·세로 가운데)·제목(.vlb_info_below) 모두 그 아래 빈 영역에 위치하므로
            제목 아래 빈 영역의 우하단(viewport 바닥 기준)으로 고정 — 영상·제목과 겹침 0.
            safe-area 고려해 하단 16px 띄움. 실측: 버튼 y730~828(vh844), stage/제목과 겹침 false. */
.video_lightbox .vlb_nav_h[data-v-5fe68ed8] {
        top: auto;
        right: 12px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transform: none;
        gap: 10px;
}
.video_lightbox .vlb_nav_h button[data-v-5fe68ed8] {
        width: 44px;
        height: 44px;
}
    /* 세로(쇼츠) 우측 세로 네비 숨김(딤 영역 좁음) — 전환은 스와이프 + 자동 다음 */
.video_lightbox .vlb_nav_v[data-v-5fe68ed8] { display: none;
}
    /* 세로(쇼츠) 9:16 — 화면 꽉(full height). */
.video_lightbox.vlb-portrait[data-v-5fe68ed8] {
        align-items: stretch;
        padding-bottom: 0;
}
.video_lightbox.vlb-portrait .vlb_feed[data-v-5fe68ed8] {
        align-items: center;
        justify-content: center;
}
.video_lightbox.vlb-portrait .vlb_stage[data-v-5fe68ed8] {
        width: auto;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        aspect-ratio: 9 / 16;
        border-radius: 0;
}
    /* 세로(쇼츠) 제목 오버레이 — 하단 커스텀 컨트롤 위로 띄움(겹침 방지). */
.video_lightbox.vlb-portrait .vlb_info_ov[data-v-5fe68ed8] {
        bottom: 60px;
}
    /* D1 — 모바일 화살표 힌트를 조금 위로(18% → 24%). */
.video_lightbox .vlb_swipe_hint[data-v-5fe68ed8] {
        bottom: 24%;
}
}

/* ============================================================================
 * 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 첫 자식 <h2>교육소개</h2> 만 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;
}

/* ============================================================================
 * [de-iframe 본문 추가 — 2026-06-25] CTA·hero 버튼 2종 조정
 * ----------------------------------------------------------------------------
 * 셀렉터는 모두 `.rc-geo-inline-root` 스코프 안 — 이 컨테이너는 RegularclassIntroInline
 * (de-iframe 본문 인라인)에서만 존재하므로 다른 페이지·탭 회귀 0.
 *   - 떠 있는 CTA : `.cta-float` (생성 본문 .hero 밖, position:fixed 단일 채널)
 *   - hero 버튼  : `.rc-geo-scope .hero .cta` (생성 본문 hero 섹션 안, .cta__txt 포함)
 *   두 셀렉터는 라우트·DOM 위치가 달라 충돌 없음(.cta-float 는 .hero 밖).
 * ============================================================================ */

/* 1) 모바일(≤768px) — 하단 CTA(.cta-float)를 처음(top)엔 숨기고 스크롤 시작하면 노출.
 *    RegularclassIntroInline 의 scroll 핸들러가 scrollY 임계(48px) 초과 시 루트에
 *    'rc-cta-shown' 클래스를 토글한다.
 *
 *    ⚠️ specificity 주의: 생성 본문 scopedCss·script 에는 기존 메커니즘
 *    `.cta-float.is-hidden`(hero/최종 cta 섹션 IntersectionObserver 가 토글)이 있고,
 *    그 셀렉터는 `:not(#_rcgeo)` 로 id specificity(1,2,0)를 가져 클래스만으로는 못 이긴다.
 *    → 모바일에서는 사용자가 새로 정의한 "scrollY 기반 표시/숨김"이 단독 제어권을 갖도록
 *      !important 로 기존 IO(.is-hidden) 동작을 덮어쓴다. (PC 는 본 미디어쿼리 밖이라
 *      기존 hero/cta IO 동작 그대로 = 회귀 0.)
 *    부드러운 전환은 생성 scopedCss 의 .cta-float { transition } 규칙이 담당. */
@media (max-width: 768px) {
    body.embed-mode .rc-geo-inline-root:not(.rc-cta-shown) .cta-float {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(12px) !important;
        pointer-events: none !important;
    }
    body.embed-mode .rc-geo-inline-root.rc-cta-shown .cta-float {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
}

/* 2) 모든 viewport — hero 섹션 "정규 과정 신청하기" 버튼만 제거.
 *    .hero 안 .cta 한정이라 하단 .cta-float(.hero 밖)·중간 .cta-row .btn(다른 신청 버튼)은
 *    영향 X. 생성파일(src/generated) 비수정 — 본 스코프 CSS 로만 hide. */
body.embed-mode .rc-geo-inline-root .rc-geo-scope .hero .cta {
    display: none !important;
}

/* ============================================================================
 * [de-iframe 본문 추가 — 2026-06-25 (2차)] PC CTA 2종 보정 (오프라인 전용)
 * ----------------------------------------------------------------------------
 * 스코프: body.embed-mode (오프라인 전용). 온라인은 body.online-rc-embed 라 본 규칙
 *   전부 미매칭 → 온라인 페이지·온라인 CTA 영향 0.
 * ============================================================================ */

/* 3) PC(≥769px) — 오프라인 CTA 항상 노출 (hero·최종 cta 섹션 위에서도 안 사라짐).
 *    생성 본문 script 의 IntersectionObserver 가 hero/최종 cta 섹션 진입 시
 *    `.cta-float.is-hidden`(opacity/visibility 0)을 토글하는데, PC 에서는 그 시각 숨김만
 *    덮어 항상 보이게 한다(IO·class 토글 자체는 그대로 둠 — 시각 표시만 강제).
 *    생성 `.cta-float.is-hidden` 셀렉터가 `:not(#_rcgeo)`(id 1)라 클래스만으론 못 이겨
 *    !important 로 덮는다. 모바일(≤768px)은 §1 scrollY 토글 그대로(본 미디어쿼리 밖) = 회귀 0. */
@media (min-width: 769px) {
    body.embed-mode .rc-geo-inline-root .cta-float.is-hidden {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* 4) PC(≥880px) — 오프라인 CTA 크기를 온라인 정규과정 PC CTA 와 동일하게 키움.
 *    온라인 PC 실측값(online-regularclass-inline.generated.js @media min-width:880px):
 *      .cta-float        → width:420px; max-width:calc(100vw-32px); padding:20px 24px 20px 22px
 *      .cta-float .cta-left → font-size:16px (좌측 "신청하기" 텍스트)
 *    오프라인 PC 기존값: max-width:540px; padding:15px 20px 15px 16px; .cta-left 14.5px.
 *    위치(right:16px)·우측 모집정보 font(13.5px)·START 배지(.pre)·화살표(.arr 16px)는
 *    양쪽 동일하므로 건드리지 않음. CTA PC 분기점은 양쪽 생성 모두 880px 이라 880 기준으로 정합.
 *    온라인 페이지 자체는 미수정(이 규칙은 embed-mode 스코프라 온라인 비매칭). */
@media (min-width: 880px) {
    body.embed-mode .rc-geo-inline-root .cta-float {
        width: 420px !important;
        max-width: calc(100vw - 32px) !important;
        padding: 20px 24px 20px 22px !important;
    }
    body.embed-mode .rc-geo-inline-root .cta-float .cta-left {
        font-size: 16px !important;
    }
}


/* ============================================================================
 *  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: <span style="margin:0 8px;opacity:0.6">·</span>) */
.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;
}
}

/* ============================================================================
 * online-regularclass-embed-overrides.css
 * ----------------------------------------------------------------------------
 * 온라인 정규과정 de-iframe 인라인(/online/regular-class) 전용 레이아웃 보정.
 *
 * task: online-regularclass-inline-260607 (plan-v2 §결정 C-4 / MED-3)
 *
 * ⚠️ 오프라인 regularclass-embed-overrides.css 와 **완전 분리**:
 *   - 모든 셀렉터가 `body.online-rc-embed` 한정 → 오프라인 'embed-mode' 와 cascade 충돌 0.
 *   - 오프라인 css 의 iframe 전용 규칙(.rc-embed-host / .rc-embed-iframe)은 온라인이 de-iframe
 *     이므로 **제외**. de-iframe 본문(.rc-geo-inline-root) + 탭/헤더/footer 공존 보정만 이식.
 *   - 활성 조건: classView.vue 가 온라인 contentsid 진입 시 body.classList.add('online-rc-embed')
 *     → 라우트 이탈 시 remove. SoT = embed-config.js ONLINE_EMBED_BODY_CLASS.
 *   - 롤백: embed-config.js REGULARCLASS_ONLINE_INLINE_CONTENTIDS = [] → body 클래스 미부여 → inert.
 *
 * ⚠️ live import 필수: OnlineRegularclassIntroInline.vue 에서 import 해야 webpack 번들 포함.
 *
 * 글로벌 영향 0 — 일반 강의·오프라인 정규과정·일반 결제 페이지에는 영향 X.
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 1. 본문 루트 풀폭 — 부모 컨테이너 가로 제약 무력화 (de-iframe 본문 100vw 확장).
 *    온라인 "클래스소개" 탭 본문 섹션 풀폭 배경이 부모(.sub_con_wrapB max-width:1340px +
 *    .view_typeA padding) 폭에 갇히지 않도록. 본문 내부는 SoT 자체 --maxw 로 중앙 정렬.
 * --------------------------------------------------------------------------- */
body.online-rc-embed .rc-geo-inline-root {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 2. "클래스소개" 탭 제목(h2) hide + 탭 아래 여백 제거.
 *    classView.vue 의 #subCon2 첫 자식 <h2>클래스소개</h2> 만 hide (온라인 contType='online').
 *    온라인 탭 구조: 커리큘럼(subCon1) / 클래스소개(subCon2) / 이용안내(subCon5) / 수강후기(subCon6).
 *    #subCon2 한정이라 다른 탭 h2 영향 0.
 * --------------------------------------------------------------------------- */
body.online-rc-embed .view_typeA .class_detail #subCon2 > h2 {
    display: none !important;
}
body.online-rc-embed .view_typeA .class_detail #subCon2 {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 3. 가로 스크롤 방지 — 100vw 확장 + scrollbar 폭 overflow 차단.
 *    overflow-x: clip 은 sticky containing block 을 안 만들어 탭 sticky 안 깨짐(오프라인 fix-round-12 동일).
 * --------------------------------------------------------------------------- */
body.online-rc-embed {
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * 4. sticky 탭 — 풀폭 + 본 콘텐츠 폭 정렬 + 헤더 오프셋 + 폰트 축소.
 *    --rc-header-h / --rc-tab-ul-width 는 컴포넌트(mounted)가 #header·.view_typeA 측정해 set.
 * --------------------------------------------------------------------------- */
body.online-rc-embed .tab_menu.page_link {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.online-rc-embed .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.online-rc-embed .tab_menu.page_link > ul {
        max-width: var(--rc-tab-ul-width, min(calc(100vw - 80px), 1260px));
    }
}
body.online-rc-embed .tab_menu.page_link ul li a {
    font-size: 14px !important;
    padding: 12px 0 !important;
}
/* 스크롤 업 시 GNB·탭 겹침 해소 — tab.fix top 을 실제 #header height 만큼. */
body.online-rc-embed .tab_menu.page_link.fix {
    top: var(--rc-header-h, 51px) !important;
}

/* ---------------------------------------------------------------------------
 * 5. 모바일: 기존 부유 요소 hide + 카톡/top 세로 스택 (오프라인 §1·§2 이식 — iframe 무관).
 *    온라인 .cta-float(따라다니는 신청 버튼)가 모바일 CTA 단일 채널.
 * --------------------------------------------------------------------------- */
body.online-rc-embed #footer .foot_fix_menu {
    display: none !important;
}
body.online-rc-embed #footer .foot_btn_kaka {
    background: transparent !important;
    box-shadow: none !important;
}
body.online-rc-embed #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) {
    body.online-rc-embed #footer .foot_btn_kaka {
        bottom: 80px;
        z-index: 100;
    }
    body.online-rc-embed #footer .foot_btn_top {
        bottom: 160px;
    }
}
@media (max-width: 950px) {
    body.online-rc-embed #footer .foot_btn_top {
        bottom: 160px !important;
    }
    body.online-rc-embed:has(#header.fix) #footer .foot_btn_kaka {
        display: block !important;
        position: fixed !important;
        right: 16px !important;
        bottom: 80px !important;
        z-index: 100 !important;
    }
    /* 매직바디 기본 fixed buy_btn_list 를 normal flow 로 → 금액 아래 표시 + CTA 와 안 겹침. */
    body.online-rc-embed .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;
    }
    body.online-rc-embed .view_typeA .class_infor .rt .pc_mb_purchase {
        background: transparent !important;
        padding: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
 * 6. lightbox open 시 sticky 탭 + 매직바디 header(GNB) hide.
 *    갤러리 lightbox 닫기 버튼(우상단)이 GNB/탭에 가리지 않도록(오프라인 fix-round-18 이식).
 *    컴포넌트가 body 에 'rc-lightbox-active' 토글 (gallery script 의 lightbox open/close 와 연계).
 * --------------------------------------------------------------------------- */
body.online-rc-embed.rc-lightbox-active .tab_menu.page_link,
body.online-rc-embed.rc-lightbox-active #header {
    display: none !important;
}

/* ============================================================================
 * golf-pilates-embed-overrides.css
 * ----------------------------------------------------------------------------
 * 골프 필라테스 온라인 과정 de-iframe 인라인(/online/golf-pilates) 전용 레이아웃 보정.
 *
 * task: golf-pilates-inline-260608 (plan-v2 §결정 C / MED-3)
 *
 * ⚠️ 오프라인 regularclass-embed-overrides.css·온라인 online-regularclass-embed-overrides.css 와
 *   **완전 분리**:
 *   - 모든 셀렉터가 `body.golf-pilates-embed` 한정 → 오프라인 'embed-mode'·온라인 'online-rc-embed'
 *     와 cascade 충돌 0.
 *   - de-iframe 본문(.rc-geo-inline-root) + 탭/헤더/footer 공존 보정만 (온라인 복제 — iframe 규칙 없음).
 *   - 활성 조건: classView.vue 가 골프 contentsid 진입 시 body.classList.add('golf-pilates-embed')
 *     → 라우트 이탈 시 remove. SoT = embed-config.js GOLF_EMBED_BODY_CLASS.
 *   - 롤백: embed-config.js GOLF_INLINE_CONTENTIDS = [] → body 클래스 미부여 → inert.
 *
 * ⚠️ live import 필수: GolfPilatesIntroInline.vue 에서 import 해야 webpack 번들 포함.
 *
 * 글로벌 영향 0 — 일반 강의·오프라인/온라인 정규과정·일반 결제 페이지에는 영향 X.
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 1. 본문 루트 풀폭 — 부모 컨테이너 가로 제약 무력화 (de-iframe 본문 100vw 확장).
 * --------------------------------------------------------------------------- */
body.golf-pilates-embed .rc-geo-inline-root {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 2. "클래스소개" 탭 제목(h2) hide + 탭 아래 여백 제거.
 *    #subCon2 한정이라 다른 탭 h2 영향 0.
 * --------------------------------------------------------------------------- */
body.golf-pilates-embed .view_typeA .class_detail #subCon2 > h2 {
    display: none !important;
}
body.golf-pilates-embed .view_typeA .class_detail #subCon2 {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 3. 가로 스크롤 방지 — 100vw 확장 + scrollbar 폭 overflow 차단.
 *    overflow-x: clip 은 sticky containing block 을 안 만들어 탭 sticky 안 깨짐.
 * --------------------------------------------------------------------------- */
body.golf-pilates-embed {
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * 4. sticky 탭 — 풀폭 + 본 콘텐츠 폭 정렬 + 헤더 오프셋 + 폰트 축소.
 *    --rc-header-h / --rc-tab-ul-width 는 컴포넌트(mounted)가 #header·.view_typeA 측정해 set.
 * --------------------------------------------------------------------------- */
body.golf-pilates-embed .tab_menu.page_link {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.golf-pilates-embed .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.golf-pilates-embed .tab_menu.page_link > ul {
        max-width: var(--rc-tab-ul-width, min(calc(100vw - 80px), 1260px));
    }
}
body.golf-pilates-embed .tab_menu.page_link ul li a {
    font-size: 14px !important;
    padding: 12px 0 !important;
}
/* 스크롤 업 시 GNB·탭 겹침 해소 — tab.fix top 을 실제 #header height 만큼. */
body.golf-pilates-embed .tab_menu.page_link.fix {
    top: var(--rc-header-h, 51px) !important;
}

/* ---------------------------------------------------------------------------
 * 5. 모바일: 기존 부유 요소 hide + 카톡/top 세로 스택.
 *    골프 .cta-float(따라다니는 신청 버튼)가 모바일 CTA 단일 채널.
 * --------------------------------------------------------------------------- */
body.golf-pilates-embed #footer .foot_fix_menu {
    display: none !important;
}
body.golf-pilates-embed #footer .foot_btn_kaka {
    background: transparent !important;
    box-shadow: none !important;
}
body.golf-pilates-embed #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) {
    body.golf-pilates-embed #footer .foot_btn_kaka {
        bottom: 80px;
        z-index: 100;
    }
    body.golf-pilates-embed #footer .foot_btn_top {
        bottom: 160px;
    }
}
@media (max-width: 950px) {
    body.golf-pilates-embed #footer .foot_btn_top {
        bottom: 160px !important;
    }
    body.golf-pilates-embed:has(#header.fix) #footer .foot_btn_kaka {
        display: block !important;
        position: fixed !important;
        right: 16px !important;
        bottom: 80px !important;
        z-index: 100 !important;
    }
    /* 매직바디 기본 fixed buy_btn_list 를 normal flow 로 → 금액 아래 표시 + CTA 와 안 겹침. */
    body.golf-pilates-embed .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;
    }
    body.golf-pilates-embed .view_typeA .class_infor .rt .pc_mb_purchase {
        background: transparent !important;
        padding: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
 * 6. lightbox open 시 sticky 탭 + 매직바디 header(GNB) hide.
 *    갤러리 lightbox 닫기 버튼(우상단)이 GNB/탭에 가리지 않도록.
 *    컴포넌트가 body 에 'rc-lightbox-active' 토글 (gallery script 의 lightbox open/close 와 연계).
 * --------------------------------------------------------------------------- */
body.golf-pilates-embed.rc-lightbox-active .tab_menu.page_link,
body.golf-pilates-embed.rc-lightbox-active #header {
    display: none !important;
}

/* ============================================================================
 * prenatal-pilates-embed-overrides.css
 * ----------------------------------------------------------------------------
 * 임산부 필라테스 온라인 과정 de-iframe 인라인(/online/prenatal-pilates) 전용 레이아웃 보정.
 *
 * task: prenatal-pilates-inline-260611 (골프 golf-pilates-embed-overrides.css 미러)
 *
 * ⚠️ 오프라인 regularclass-embed-overrides.css·온라인 online-regularclass-embed-overrides.css·
 *   골프 golf-pilates-embed-overrides.css 와 **완전 분리**:
 *   - 모든 셀렉터가 `body.prenatal-pilates-embed` 한정 → 오프라인 'embed-mode'·온라인 'online-rc-embed'·
 *     골프 'golf-pilates-embed' 와 cascade 충돌 0.
 *   - de-iframe 본문(.rc-geo-inline-root) + 탭/헤더/footer 공존 보정만 (골프 복제 — iframe 규칙 없음).
 *   - 활성 조건: classView.vue 가 임산부 contentsid 진입 시 body.classList.add('prenatal-pilates-embed')
 *     → 라우트 이탈 시 remove. SoT = embed-config.js PRENATAL_EMBED_BODY_CLASS.
 *   - 롤백: embed-config.js PRENATAL_INLINE_CONTENTIDS = [] → body 클래스 미부여 → inert.
 *
 * ⚠️ live import 필수: PrenatalPilatesIntroInline.vue 에서 import 해야 webpack 번들 포함.
 *
 * 글로벌 영향 0 — 일반 강의·오프라인/온라인/골프 정규과정·일반 결제 페이지에는 영향 X.
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 1. 본문 루트 풀폭 — 부모 컨테이너 가로 제약 무력화 (de-iframe 본문 100vw 확장).
 * --------------------------------------------------------------------------- */
body.prenatal-pilates-embed .rc-geo-inline-root {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 2. "클래스소개" 탭 제목(h2) hide + 탭 아래 여백 제거.
 *    #subCon2 한정이라 다른 탭 h2 영향 0.
 * --------------------------------------------------------------------------- */
body.prenatal-pilates-embed .view_typeA .class_detail #subCon2 > h2 {
    display: none !important;
}
body.prenatal-pilates-embed .view_typeA .class_detail #subCon2 {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 3. 가로 스크롤 방지 — 100vw 확장 + scrollbar 폭 overflow 차단.
 *    overflow-x: clip 은 sticky containing block 을 안 만들어 탭 sticky 안 깨짐.
 * --------------------------------------------------------------------------- */
body.prenatal-pilates-embed {
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * 4. sticky 탭 — 풀폭 + 본 콘텐츠 폭 정렬 + 헤더 오프셋 + 폰트 축소.
 *    --rc-header-h / --rc-tab-ul-width 는 컴포넌트(mounted)가 #header·.view_typeA 측정해 set.
 * --------------------------------------------------------------------------- */
body.prenatal-pilates-embed .tab_menu.page_link {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.prenatal-pilates-embed .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.prenatal-pilates-embed .tab_menu.page_link > ul {
        max-width: var(--rc-tab-ul-width, min(calc(100vw - 80px), 1260px));
    }
}
body.prenatal-pilates-embed .tab_menu.page_link ul li a {
    font-size: 14px !important;
    padding: 12px 0 !important;
}
/* 스크롤 업 시 GNB·탭 겹침 해소 — tab.fix top 을 실제 #header height 만큼. */
body.prenatal-pilates-embed .tab_menu.page_link.fix {
    top: var(--rc-header-h, 51px) !important;
}

/* ---------------------------------------------------------------------------
 * 5. 모바일: 기존 부유 요소 hide + 카톡/top 세로 스택.
 *    임산부 .cta-float(따라다니는 신청 버튼)가 모바일 CTA 단일 채널.
 * --------------------------------------------------------------------------- */
body.prenatal-pilates-embed #footer .foot_fix_menu {
    display: none !important;
}
body.prenatal-pilates-embed #footer .foot_btn_kaka {
    background: transparent !important;
    box-shadow: none !important;
}
body.prenatal-pilates-embed #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) {
    body.prenatal-pilates-embed #footer .foot_btn_kaka {
        bottom: 80px;
        z-index: 100;
    }
    body.prenatal-pilates-embed #footer .foot_btn_top {
        bottom: 160px;
    }
}
@media (max-width: 950px) {
    body.prenatal-pilates-embed #footer .foot_btn_top {
        bottom: 160px !important;
    }
    body.prenatal-pilates-embed:has(#header.fix) #footer .foot_btn_kaka {
        display: block !important;
        position: fixed !important;
        right: 16px !important;
        bottom: 80px !important;
        z-index: 100 !important;
    }
    /* 매직바디 기본 fixed buy_btn_list 를 normal flow 로 → 금액 아래 표시 + CTA 와 안 겹침. */
    body.prenatal-pilates-embed .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;
    }
    body.prenatal-pilates-embed .view_typeA .class_infor .rt .pc_mb_purchase {
        background: transparent !important;
        padding: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
 * 6. lightbox open 시 sticky 탭 + 매직바디 header(GNB) hide.
 *    갤러리 lightbox 닫기 버튼(우상단)이 GNB/탭에 가리지 않도록.
 *    컴포넌트가 body 에 'rc-lightbox-active' 토글 (gallery script 의 lightbox open/close 와 연계).
 * --------------------------------------------------------------------------- */
body.prenatal-pilates-embed.rc-lightbox-active .tab_menu.page_link,
body.prenatal-pilates-embed.rc-lightbox-active #header {
    display: none !important;
}


/*
  부모 SPA .editorCont(이미지) 인접에 자연스러운 타이포만. 무거운 scope namespace 불요(텍스트라
  충돌 표면 작음). 부모 글로벌 reset 침투를 막기 위해 핵심 텍스트 속성만 명시.
*/
.product-text-supplement[data-v-5835d375] {
  margin: 40px auto 0;
  max-width: 820px;
  padding: 40px 36px;
  background: #ffffff;
  border-radius: 14px;
  color: #222;
  line-height: 1.75;
  font-size: 16px;
  word-break: keep-all;
}
@media (max-width: 640px) {
.product-text-supplement[data-v-5835d375] { padding: 28px 18px; border-radius: 10px; margin-top: 28px;
}
}
.product-text-supplement .pts-lead[data-v-5835d375] {
  margin: 0 0 28px;
  padding: 18px 20px;
  background: #f5f7f6;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
}
.product-text-supplement .pts-h2[data-v-5835d375] {
  margin: 36px 0 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  color: #111;
}
.product-text-supplement .pts-h3[data-v-5835d375] {
  margin: 26px 0 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: #1a1a1a;
}
.product-text-supplement .pts-p[data-v-5835d375] {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.product-text-supplement .pts-p strong[data-v-5835d375] {
  font-weight: 600;
  color: #111;
}
.product-text-supplement .pts-keyfacts[data-v-5835d375] {
  margin: 32px 0 0;
  padding: 22px 24px;
  background: #fafafa;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 20px;
}
.product-text-supplement .pts-kf-dt[data-v-5835d375] {
  margin: 0;
  font-weight: 700;
  color: #1f7a5a;
  white-space: nowrap;
}
.product-text-supplement .pts-kf-dd[data-v-5835d375] {
  margin: 0;
  color: #333;
}
@media (max-width: 768px) {
.product-text-supplement[data-v-5835d375] {
    margin-top: 28px;
    font-size: 15px;
}
.product-text-supplement .pts-h2[data-v-5835d375] {
    font-size: 19px;
}
.product-text-supplement .pts-h3[data-v-5835d375] {
    font-size: 17px;
}
.product-text-supplement .pts-keyfacts[data-v-5835d375] {
    grid-template-columns: 1fr;
    gap: 4px 0;
}
.product-text-supplement .pts-kf-dd[data-v-5835d375] {
    margin: 0 0 10px;
}
}