:root {
    --bg-color: #2d4d7a;
    --ai-campus-bg: var(--bg-color);
    --ai-campus-text: #f5f0e8;
    --ai-campus-accent: #c9a96e;
    --ai-campus-divider: rgba(170, 170, 170, 0.3);
    --ai-campus-site-header: 84px;
    --ai-campus-center-veil-top: 9vh;
    --ai-campus-center-veil-bottom: 9vh;
    --ai-campus-logo-punch-width: 44vw;
    --ai-campus-logo-mask-url: url(/images/단색활용.png);
    --ai-campus-cover-overlay-opacity: 0;
    --ai-campus-cover-overlay-color: #000000;
    --ai-campus-content-max-width: 800px;
    /* 아카이브 상단 고정 헤더 높이 — youth-ai-campus-embedded에서만 사용 */
    --ai-campus-embed-site-header: 0px;
}

body.youth-ai-campus {
    background: var(--bg-color);
    color: var(--ai-campus-text);
    font-family: 'Noto Serif KR', serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

body.youth-ai-campus a {
    color: inherit;
    text-decoration: none;
}

body.youth-ai-campus #page-root {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 5;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.youth-ai-campus #act_footer,
body.youth-ai-campus .btn_top {
    display: none !important;
}

body.youth-ai-campus #act_header {
    background: transparent !important;
    border-bottom: none !important;
    color: var(--ai-campus-text) !important;
    box-shadow: none !important;
}

body.youth-ai-campus #act_header .nav-compact-title,
body.youth-ai-campus #act_header .nav-pill,
body.youth-ai-campus #act_header .btn_menu,
body.youth-ai-campus #act_header .mobile-nav-toggle,
body.youth-ai-campus #act_header .header_util a,
body.youth-ai-campus #act_header .actions-inline a,
body.youth-ai-campus #act_header #nav-login-btn,
body.youth-ai-campus #act_header svg line {
    color: #fff !important;
    stroke: #fff !important;
}

body.youth-ai-campus #act_header .dropdown-icon svg,
body.youth-ai-campus #act_header .dropdown-icon svg path {
    stroke: #fff !important;
}

body.youth-ai-campus #act_header .nav-expand a,
body.youth-ai-campus .google-nav.nav-open .nav-expand a {
    color: #fff !important;
}

body.youth-ai-campus #act_header .nav-expand a:hover,
body.youth-ai-campus .google-nav.nav-open .nav-expand a:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.youth-ai-campus #act_header .nav-expand .nav-expand-arrow,
body.youth-ai-campus .google-nav.nav-open .nav-expand .nav-expand-arrow {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.youth-ai-campus #mobile-nav {
    background: rgba(10, 15, 10, 0.96) !important;
    color: var(--ai-campus-text) !important;
}

body.youth-ai-campus #mobile-nav a,
body.youth-ai-campus #mobile-nav button {
    color: var(--ai-campus-text) !important;
}

.youth-ai-campus-page {
    position: relative;
    width: 100%;
    height: 100%;
    color: var(--ai-campus-text);
}

.youth-ai-campus-page #campus-center-veil {
    position: fixed;
    top: var(--ai-campus-center-veil-top);
    right: 0;
    bottom: var(--ai-campus-center-veil-bottom);
    left: 0;
    background: #000;
    -webkit-mask-image: linear-gradient(#000, #000), var(--ai-campus-logo-mask-url);
    mask-image: linear-gradient(#000, #000), var(--ai-campus-logo-mask-url);
    -webkit-mask-size: 100% 100%, var(--ai-campus-logo-punch-width) auto;
    mask-size: 100% 100%, var(--ai-campus-logo-punch-width) auto;
    -webkit-mask-position: center, center;
    mask-position: center, center;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
}

/* 오버레이는 scroll-wrap 안에서만 — 연기·로고 구멍은 그대로, 본문 뷰포트만 톤 다운 */
.youth-ai-campus-page #campus-scroll-wrap > #campus-cover-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--ai-campus-cover-overlay-color, #000);
    opacity: var(--ai-campus-cover-overlay-opacity);
    pointer-events: none;
}

.youth-ai-campus-page #campus-scroll-wrap > #campus-canvas-stage,
.youth-ai-campus-page #campus-scroll-wrap > #campus-content {
    position: relative;
    z-index: 1;
}

/* 이전 저장본: scroll-wrap 밖에 있던 오버레이(마이그레이션 전) */
.youth-ai-campus-page > #campus-cover-overlay {
    position: fixed;
    inset: 0;
    background: var(--ai-campus-cover-overlay-color, #000);
    opacity: var(--ai-campus-cover-overlay-opacity);
    z-index: 2;
    pointer-events: none;
}

.youth-ai-campus-page #campus-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.youth-ai-campus-page #campus-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.875rem 3.75rem;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
}

body.youth-ai-campus-embedded #campus-header {
    display: none;
}

/* 상단 사이트 헤더가 있을 때: 스크롤·베일 시작선을 헤더 아래로 (본문이 헤더에 가리지 않음) */
body.youth-ai-campus-embedded .youth-ai-campus-page #campus-scroll-wrap,
body.youth-ai-campus-embedded .youth-ai-campus-page #campus-center-veil {
    top: calc(var(--ai-campus-center-veil-top) + var(--ai-campus-embed-site-header, 0px));
}

.youth-ai-campus-page .campus-header-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.youth-ai-campus-page .slide-link {
    position: relative;
    overflow: hidden;
    display: inline-block;
    line-height: 1.1;
}

.youth-ai-campus-page .slide-link .top {
    display: block;
    transition: transform 1.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.youth-ai-campus-page .slide-link .btm {
    position: absolute;
    inset: 0;
    display: block;
    transform: translateY(100%) scaleY(4);
    transform-origin: top;
    transition: transform 1.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.youth-ai-campus-page a:hover .slide-link .top,
.youth-ai-campus-page .menu-btn:hover .slide-link .top {
    transform: translateY(-110%) scaleY(4);
    transform-origin: bottom;
}

.youth-ai-campus-page a:hover .slide-link .btm,
.youth-ai-campus-page .menu-btn:hover .slide-link .btm {
    transform: translateY(0) scaleY(1);
}

.youth-ai-campus-page .menu-btn {
    cursor: pointer;
    opacity: 0.65;
}

.youth-ai-campus-page .lang-btn {
    opacity: 0.65;
}

.youth-ai-campus-page #campus-scroll-wrap {
    position: fixed;
    top: var(--ai-campus-center-veil-top);
    right: 0;
    bottom: var(--ai-campus-center-veil-bottom);
    left: 0;
    width: 100%;
    overflow: hidden;
    overflow-x: clip;
    z-index: 10;
    isolation: isolate;
}

/* 캠퍼스 뷰포트: 네이티브 스크롤바 트랙은 항상 숨김(스크롤 동작은 유지) */
.youth-ai-campus-page #campus-scroll-wrap,
.youth-ai-campus-page #campus-mobile-fit,
.youth-ai-campus-page #campus-content {
    -ms-overflow-style: none;
    scrollbar-width: none !important;
}

.youth-ai-campus-page #campus-scroll-wrap::-webkit-scrollbar,
.youth-ai-campus-page #campus-mobile-fit::-webkit-scrollbar,
.youth-ai-campus-page #campus-content::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.youth-ai-campus-page #campus-content {
    position: relative;
    z-index: 1;
    will-change: transform;
    width: 100%;
    max-width: var(--ai-campus-content-max-width, 800px);
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    padding: 2rem 1.5rem 4rem;
    box-sizing: border-box;
    min-width: 0;
    /* 긴 URL·영문: 줄바꿈. clip은 잘림만 유발 → hidden + wrap */
    overflow-x: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: #fff;
    text-shadow: 0 1px 10px rgba(8, 14, 26, 0.42), 0 0 1px rgba(8, 14, 26, 0.55);
}

.youth-ai-campus-page #campus-content > * {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.youth-ai-campus-page #campus-content > .editor-block {
    width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    overflow-x: visible;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.youth-ai-campus-page #campus-content > .editor-block img,
.youth-ai-campus-page #campus-content > .editor-block video,
.youth-ai-campus-page #campus-content > .editor-block iframe,
.youth-ai-campus-page #campus-content > .editor-block table {
    max-width: 100%;
}

.youth-ai-campus-page #campus-content > .editor-block [data-block-action="youtube-frame"],
.youth-ai-campus-page #campus-content > .editor-block [data-block-action="image-frame"] {
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 768px) {
    .youth-ai-campus-page #campus-header {
        padding: 1.4rem 1.25rem;
    }

    :root {
        --ai-campus-logo-punch-width: 48vw;
        --ai-campus-mobile-scale: 1;
        /* 모바일 주소창 등으로 vh 여백이 과하면 본문이 과도하게 줄어듦 */
        --ai-campus-center-veil-top: max(6vh, 40px);
        --ai-campus-center-veil-bottom: max(6vh, 40px);
    }

    .youth-ai-campus-page #campus-scroll-wrap {
        overflow-x: hidden;
        touch-action: pan-y;
    }

    body.youth-ai-campus:not(.youth-ai-campus-edit) .youth-ai-campus-page #campus-scroll-wrap,
    body.youth-ai-campus.ai-campus-view-preview .youth-ai-campus-page #campus-scroll-wrap {
        touch-action: pan-y pinch-zoom;
    }

    body.youth-ai-campus.ai-campus-mobile-zoomed .youth-ai-campus-page #campus-scroll-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: none;
        -webkit-overflow-scrolling: touch;
    }

    body.youth-ai-campus.ai-campus-mobile-zoomed .youth-ai-campus-page #campus-mobile-fit {
        margin-left: 0;
        margin-right: 0;
    }

    .youth-ai-campus-page #campus-mobile-fit {
        box-sizing: border-box;
        width: 800px;
        max-width: none;
        min-width: 0;
        margin: 0;
        transform-origin: top left;
        will-change: transform;
    }

    .youth-ai-campus-page #campus-mobile-fit > #campus-canvas-stage,
    .youth-ai-campus-page #campus-mobile-fit > #campus-content {
        width: 800px !important;
        max-width: 800px !important;
        min-width: 800px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .youth-ai-campus-page #campus-mobile-fit > #campus-content {
        padding: 1.25rem max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) 3rem;
    }

    .youth-ai-campus-page #campus-content > .editor-block[data-type="2col"] {
        grid-template-columns: 1fr !important;
    }

}

@media (max-width: 400px) {
    :root {
        --ai-campus-content-max-width: 100%;
    }

    .youth-ai-campus-page #campus-content {
        padding-left: max(10px, env(safe-area-inset-left, 0px));
        padding-right: max(10px, env(safe-area-inset-right, 0px));
    }
}