/*
 * 준비중(Coming Soon) 안내 화면 전용 스타일.
 * 실제 메인 디자인 시안 확정 전까지 대외 노출용으로 사용하는 독립 화면이라
 * 공통 레이아웃(layout/base) CSS 를 상속하지 않고 별도 파일로 둔다.
 *
 * 좌표 기준: beam.png 를 화면 상단에 절대배치하고, 텍스트 블록(.coming-soon__content)을
 * 같은 좌표계 위에 절대배치해 이미지 위로 겹치게 한다(z-index로 텍스트를 위에 둠).
 */
:root {
    color-scheme: dark;
}

body.coming-soon {
    margin: 0;
    min-height: 100vh;
    background: #000;
    color: #fff;
    font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    overflow-x: hidden;
}

.coming-soon__stage {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 빔 이미지 + 텍스트 블록을 한 덩어리로 묶어 뷰포트 세로 중앙에 배치하는 기준 컨테이너 */
.coming-soon__center {
    position: relative;
    width: 626px;
    max-width: 100%;
}

/* 조명/빔 이미지 - 기준 컨테이너 폭에 맞춰 채움 */
.coming-soon__beam {
    display: block;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

/* 텍스트 블록 - 빔 이미지 상단에서 187px 지점, 이미지보다 위 레이어 */
.coming-soon__content {
    position: absolute;
    top: 187px;
    left: 0;
    z-index: 1;
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    text-align: center;
}

.coming-soon__notice {
    margin: 0;
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.01em;
}

.coming-soon__title {
    margin: 20px 0 0;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.coming-soon__subtitle {
    margin: 20px 0 0;
    font-size: 14px;
    color: #cbcbcb;
}

.coming-soon__logo {
    margin-top: 100px;
    display: flex;
    justify-content: center;
}

.coming-soon__logo img {
    display: block;
    width: 101px;
    height: 50px;
}

@media (max-width: 768px) {
    /* 모바일은 세로 중앙정렬 대신 뷰포트 상단 기준 고정 위치를 쓴다 (빔 top:111px) */
    .coming-soon__center {
        position: absolute;
        top: 111px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    /* 텍스트 블록은 빔 이미지 상단 기준 top:87px (부모 .coming-soon__center = 이미지 좌표계) */
    .coming-soon__content {
        top: 87px;
    }

    .coming-soon__notice {
        font-size: 14px;
    }

    .coming-soon__title {
        margin-top: 18px;
        font-size: 42px;
    }

    .coming-soon__subtitle {
        margin-top: 34px;
        font-size: 12px;
    }

    .coming-soon__logo {
        margin-top: 65px;
    }

    .coming-soon__logo img {
        width: 97px;
        height: 48px;
    }
}