@charset "utf-8";

/* ==========================================================================
   MICROX - Website Renewal (full page)
   html_sample.php 전용 스타일

   .renewal 은 position:fixed 전체화면 오버레이라서
   레이아웃(헤더/푸터) 안에 include 되어도, 단독 페이지로 올려도 동일하게 보입니다.
   ========================================================================== */

:root {
    --rn-bg: #0b0e12;
    --rn-text: #ffffff;
    --rn-text-dim: rgba(255, 255, 255, .72);
    --rn-text-weak: rgba(255, 255, 255, .48);
    --rn-line: rgba(255, 255, 255, .18);
    --rn-accent: #ffffff;
    --rn-ease: cubic-bezier(.22, .61, .36, 1);
    --rn-font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* 개편 화면이 떠 있는 동안 뒤쪽 문서 스크롤 잠금 (JS 가 body 에 클래스 부여) */
html.renewal-lock,
body.renewal-body {
    overflow: hidden !important;
    height: 100%;
}

/* --------------------------------------------------------------------------
   레이아웃 : 풀페이지 오버레이
   -------------------------------------------------------------------------- */
.renewal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--rn-bg);
    color: var(--rn-text);
    font-family: var(--rn-font);
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.renewal * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   배경 영상
   -------------------------------------------------------------------------- */
.renewal__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: var(--rn-bg) center / cover no-repeat;
}

.renewal__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 영상 위 가독성 확보용 오버레이 */
.renewal__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% 45%, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .62) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 38%, rgba(0, 0, 0, .70) 100%);
}

/* --------------------------------------------------------------------------
   가운데 콘텐츠
   -------------------------------------------------------------------------- */
.renewal__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 800px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    /* background: rgba(255, 255, 255, 0.1); */
    box-shadow: 0 18px 60px rgba(0, 0, 0, .24);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(3px);
    overflow-y: auto;
}

/* 로고 */
.renewal__logo {
    line-height: 1;
    font-size: 0;
}

/* 어두운 배경 위에서 컬러/검정 로고를 흰색으로 반전
   (원본 색 그대로 쓰려면 html_sample.php 의 .renewal__logo 에서 is-invert 제거) */
.renewal__logo.is-invert img {
    filter: brightness(0) invert(1);
}

.renewal__logo img {
    display: block;
    width: auto;
    max-width: min(200px, 27vw);
    height: auto;
    margin: 0 auto;
}

/* 이미지 로고가 없을 때 노출되는 텍스트 로고 */
.renewal__logo-text {
    display: inline-block;
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 800;
    letter-spacing: .32em;
    text-indent: .32em;
    color: var(--rn-accent);
}

/* 상단 영문 라벨 */
.renewal__label {
    display: inline-block;
    border: 1px solid var(--rn-line);
    border-radius: 999px;
    font-size: clamp(10px, 1.5vw, 12px);
    font-weight: 600;
    letter-spacing: .22em;
    text-indent: .22em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--rn-text-dim);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* 메인 문구 */
.renewal__title {
    font-size: clamp(26px, 5.6vw, 52px);
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -.02em;
    color: var(--rn-text);
}

.renewal__title .point {
    font-weight: 800;
}

/* 보조 문구 */
.renewal__desc {
    font-size: clamp(13px, 1.9vw, 17px);
    font-weight: 400;
    line-height: 1.85;
    color: var(--rn-text-dim);
}

/* 구분선 */
.renewal__divider {
    width: 44px;
    height: 1px;
    margin: clamp(28px, 5vw, 44px) auto;
    padding: 0;
    border: 0;
    background: var(--rn-line);
    opacity: 1;
}

/* 하단 정보 */
.renewal__foot {
    font-size: clamp(11px, 1.5vw, 13px);
    line-height: 1.9;
    letter-spacing: .04em;
    color: var(--rn-text-weak);
}

.renewal__foot a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--rn-ease), border-color .3s var(--rn-ease);
}

.renewal__foot a:hover,
.renewal__foot a:focus-visible {
    color: var(--rn-text);
    border-bottom-color: var(--rn-line);
}

.renewal__site {
    display: block;
    margin-top: 10px;
    font-size: clamp(10px, 1.4vw, 12px);
    letter-spacing: .18em;
    text-indent: .18em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   등장 모션
   -------------------------------------------------------------------------- */
@keyframes rnFadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.renewal .rn-fade {
    opacity: 0;
    animation: rnFadeUp 1s var(--rn-ease) forwards;
}

.renewal .rn-delay-1 { animation-delay: .15s; }
.renewal .rn-delay-2 { animation-delay: .35s; }
.renewal .rn-delay-3 { animation-delay: .55s; }
.renewal .rn-delay-4 { animation-delay: .75s; }
.renewal .rn-delay-5 { animation-delay: .95s; }

/* --------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .renewal__title {
        line-height: 1.42;
    }

    .renewal__desc br {
        display: none;
    }
}

@media (max-width: 380px) {
    .renewal__logo-text {
        letter-spacing: .2em;
        text-indent: .2em;
    }
}

/* 높이가 낮은 화면(가로모드 등) */
@media (max-height: 520px) {
    .renewal__logo {
        margin-bottom: 18px;
    }

    .renewal__divider {
        margin: 18px auto;
    }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .renewal .rn-fade {
        opacity: 1;
        animation: none;
    }

    .renewal__video {
        display: none;
    }
}