@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');

/* ===== CSS Variables ===== */
:root {
    --color-primary: #292F86;
    --color-accent: #1D9A78;
    --color-purple: rgba(195, 52, 255, 0.50);
    --color-purple-shadow: rgba(195, 52, 255, 0.40);
    --color-gray: #767676;
    --color-black: #000;
    --color-white: #FFF;
    --color-bg: #FFFFFF;

    --font-family: 'Paperlogy', sans-serif;
    --line-height-base: 1.2;
    --line-height-text: 1.4;

    --transition-default: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-section: 0.8s ease-in-out;
}

@property --neon-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #ffffff;
}



body {
    margin: 0;
}

h1,
h2 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

html {

    font-size: calc(100dvh * 16 / 900);
    font-optical-sizing: none;

    overscroll-behavior: none;
}

html,
body {
    background-color: var(--color-bg);
    width: 100dvw;
    height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}




button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}


/* ===== Reset ===== */
ul,
li,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: block;
}

img {
    -webkit-user-drag: none;
}



section {
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    transition: transform var(--transition-section);
}

/* 각 섹션의 초기 위치 설정 */
section:nth-of-type(1) {
    transform: translateY(0vh);
    z-index: 6;
}

section:nth-of-type(2) {
    transform: translateY(100vh);
    z-index: 5;
}

section:nth-of-type(3) {
    transform: translateY(100vh);
    z-index: 4;
}

section:nth-of-type(4) {
    transform: translateY(100vh);
    z-index: 3;
}

section:nth-of-type(5) {
    transform: translateY(100vh);
    z-index: 2;
}

section:nth-of-type(6) {
    transform: translateY(100vh);
    z-index: 1;
}


.indicator-container {

    width: 7.5rem;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.indicator-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 1.25rem;
}

.indicator-arrow {
    display: flex;
    width: 1.25rem;
    height: 1.875rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    --line-color: var(--color-black);
    stroke: var(--line-color);
    transition: stroke 0.5s ease 0.2s, opacity 0.4s ease 0.4s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;


    opacity: 1;
    transform: translateY(0);
}



.indicator-arrow svg {
    animation: idleBeckon 2s ease-in-out infinite;
}

@keyframes idleBeckon {

    0%,
    100% {
        transform: translateY(0);

    }

    50% {
        transform: translateY(-0.3125rem);
        opacity: 0.7;
    }
}

.indicator-arrow.up {
    scale: 1 1;
}

.indicator-arrow.down {
    scale: 1 -1;
}

.indicator-arrow.hero,
.indicator-arrow.footer {
    --line-color: var(--color-white);
}


.indicator-arrow.up.hero,
.indicator-arrow.down.footer {
    opacity: 0;
    transform: translateY(0.25rem);



    transition:
        stroke 0.5s ease 0.2s,
        opacity 0.2s ease 0s,
        transform 0.2s ease 0s;
}

.indicator-main {
    position: relative;
    display: flex;
    width: 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.indicator-bar-wrapper {
    --line-width: 1.25rem;
    --line-height: 0.25rem;
    --line-radius: 0.125rem;
    --line-color: #999999;
    width: 2.5rem;
    display: flex;
    height: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    align-self: stretch;

}

.indicator-bar {
    width: var(--line-width);
    height: var(--line-height);
    flex-shrink: 0;
    border-radius: var(--line-radius);
    background-color: var(--line-color);
    transition: background-color 0.5s ease 0.2s;

}

.indicator-bar-wrapper.active-pill {
    --line-width: 1.875rem;
    --line-height: 0.375rem;
    --line-radius: 0.1875rem;
    --line-color: var(--color-primary);
    --y-pos: 0rem;

    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(var(--y-pos));
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.indicator-bar-wrapper.hero.active-pill,
.indicator-bar-wrapper.footer.active-pill {
    --line-color: var(--color-white);
}


.indicator-bar-wrapper.hero {
    --line-color: var(--color-primary);
}


.indicator-bar-wrapper.footer {
    --line-color: var(--color-gray);
}













.qr-modal-container {
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3000;

    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.qr-modal-container.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    align-items: center;

}

.qr-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-modal-content {
    display: flex;
    padding: 1.5rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-radius: 0.625rem 0.625rem 0 0;
    background: var(--color-white);

}

.qr-modal-content img {
    width: 16rem;
    height: 16rem;

}

.qr-modal-content h1 {
    color: var(--color-black);
    text-align: center;
    font-family: Paperlogy;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.0563rem;
}

.qr-modal-content h2 {
    color: var(--color-black);
    text-align: center;
    font-family: Paperlogy;
    font-size: 1.25rem;

    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.0312rem;
}

.qr-modal-footer {
    display: flex;
    padding: 1rem 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;

    border-radius: 0 0 0.625rem 0.625rem;
    border-top: 0.0625rem solid #999;
    background: var(--color-white);
    cursor: pointer;
}

.qr-modal-footer span {
    color: var(--color-black);
    text-align: center;
    font-family: Paperlogy;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.0375rem;
}






.hero-section {
    background-color: #5C5BE0;
}

.hero-contents {
    width: 75rem;
    height: 40.625rem;
    position: relative;

    display: grid;
    place-items: center;

}

.hero-contents * {
    grid-area: 1 / 1;
    /* 모두 겹침 */
}




.wheek-container {

    position: relative;
    width: 75rem;
    height: 34.375rem;


    z-index: 2;
}

.wheek-container img {
    position: absolute;
    width: 120rem;
    height: 67.5rem;
    left: -21rem;
    top: -14.75rem;
    opacity: 1;
    z-index: 3;
}

.spline-wrapper {
    position: absolute;
    width: 120rem;
    height: 67.5rem;
    left: -21rem;
    top: -14.75rem;
    z-index: 4;
}

.spline-wrapper iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    display: block;
    opacity: 0;
}




.landing-text-container {
    position: relative;

    width: auto;
    height: 40.625rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    z-index: 1;
}


.main-text-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6.5625rem;
    width: 38rem;
}

/* === 7. 텍스트 스타일 === */
.main-text {
    font-family: 'Paperlogy';
    font-weight: 800;
    font-size: 6.25rem;
    line-height: 1.2;
    letter-spacing: -0.0938rem;
    color: white;
    position: relative;
    transform: skewX(-30deg);
    pointer-events: none;
}



.feature-wrapper {
    position: relative;
    width: 75rem;
    height: 0;
    z-index: 3;
    animation: mainFloat 3s ease-in-out infinite;
}


.feature_container {
    display: inline-flex;
    padding: 0.5rem 2rem;
    position: relative;
    box-shadow: 0.25rem 0.3125rem 0.375rem var(--color-purple-shadow) inset, 0rem 0.5rem 0.8125rem rgba(0, 0, 0, 0.25), -0.0625rem -0.1875rem 0.25rem var(--color-purple-shadow) inset;
    overflow: hidden;
    border-radius: 624.9375rem;
    position: absolute;
    animation: float 4s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0.625rem)
    }

    50% {
        transform: translateY(-0.625rem);
    }
}

.feature_background {
    width: 150%;
    height: 150%;
    position: absolute;
    inset: -25%;
    background: var(--color-purple);
    backdrop-filter: blur(0.2344rem);
    z-index: 0;
}

.feature_text {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    font-size: 2.5rem;
    font-family: var(--font-family);
    font-weight: 500;
    line-height: var(--line-height-base);
    letter-spacing: -0.0938rem;
    white-space: nowrap;
    pointer-events: none;
}

.feature-text-1 {
    left: 9.0625rem;
    top: -12.0625rem;

    animation-delay: -0.2s
}

.feature-text-2 {
    left: 0rem;
    top: -2rem;

    animation-delay: -1.5s;
}

.feature-text-3 {
    left: 14rem;
    top: 8.1875rem;

    animation-delay: -0.8s;
}

.feature-text-4 {
    right: 7rem;
    top: -11.0625rem;

    animation-delay: -2.4s;
}

.feature-text-5 {
    right: 0rem;
    top: -3.5rem;

    animation-delay: -3.1s;
}

.feature-text-6 {
    right: 6.125rem;
    top: 5.1875rem;

    animation-delay: -0.5s;
}

.hero-contents-wrapper {
    position: relative;

    display: flex;
    width: 75rem;
    flex-direction: column;
    align-items: center;
    gap: 3rem;

}

.download-buttons {


    display: flex;
    gap: 1rem;
    z-index: 10;
}




/* --- 1. 부모 컨테이너 (.store-button) 설정 --- */
.store-button {
    /* [기존 코드 유지] */
    height: 4.5rem;
    cursor: pointer;
    pointer-events: auto;
    /* 부드러운 물리 엔진 느낌의 전환 (떠오름 효과용) */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);

    /* [새로 추가된 필수 속성] */
    position: relative;
    /* 가상 요소(빛)의 기준점 */
    overflow: hidden;
    /* 빛이 버튼 밖으로 나가는 것을 잘라냄 */

    /* div가 이미지 크기에 맞게 줄어들도록 설정 (필요시 display: flex 등으로 변경 가능) */
    display: flex;
    border-radius: 0.75rem;
    /* 버튼 모양에 맞게 모서리 둥글게 처리 (이미지 자체에 굴곡이 없다면 필수) */
    background: transparent;
    /* 혹시 모를 배경색 제거 */
    /* 렌더링 최적화 */
    transform: translateZ(0);
}

/* --- 2. 내부 이미지 스타일 (꽉 차게) --- */
.store-button img {
    display: block;
    /* 이미지 하단 여백 제거 */
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 비율 유지하며 컨테이너에 맞춤 */
}


.store-button:hover {
    /* 위로 0.25rem 떠오름 */
    transform: translateY(-0.25rem);

    /* 그림자가 아래로 넓게 퍼지며 입체감 형성 */
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);

}


.store-button:active {
    /* 다시 원위치 */
    transform: translateY(0);

    /* 그림자도 얕아짐 */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);

    /* 클릭은 즉각 반응 */
    transition-duration: 0.1s;
}



.iphone16-container {
    position: relative;
    width: 18.125rem;
    height: 50rem;

}

.iphone16-frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

    pointer-events: none;
    width: 18.125rem;
    height: 50rem;

}

.iphone16-frame img {

    display: block;
    width: 100%;
    height: 100%;
}

.screen-mask-wrapper {
    position: absolute;
    top: 0.27375rem;
    left: 2.50625rem;

    width: 15.1575rem;
    height: 48.63125rem;

    z-index: 2;

    /* 마스크 설정 (여기서 모양을 잡음) */
    -webkit-mask-image: url('/assets/images/iphone_mask.png');
    mask-image: url('/assets/images/iphone_mask.png');
    -webkit-mask-position: 0.0044rem 0.6844rem;
    mask-position: 0.0044rem 0.6844rem;
    -webkit-mask-size: 15.06625rem 47.855625rem;
    mask-size: 15.06625rem 47.855625rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* 내부 이미지가 커져도 마스크 밖으로 못 나가게 함 */
    overflow: hidden;
}

.screen-mask-wrapper:after {
    content: '';
    position: absolute;
    /* 대각선으로 길게 지나가야 해서 크기를 넉넉하게 잡음 */
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;

    /* 빛의 모양: 투명 -> 흰색 반투명 -> 투명 */
    background: linear-gradient(to bottom right,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 45%,
            /* 빛 강도 조절: 0.3 ~ 0.5 추천 */
            rgba(255, 255, 255, 0.1) 50%,
            transparent 60%);

    /* 시작 위치: 화면 왼쪽 위 바깥 */
    transform: translate(-100%, -100%);
    transition: transform 0s;
    /* 돌아갈 때는 빛이 안 보이게 즉시 복귀 */
    pointer-events: none;
    /* 클릭 방지 */
    z-index: 10;
    /* 이미지들(z-index 2,3)보다 위에 있어야 함 */
}

.screen-mask-wrapper.shine::after {
    /* 끝 위치: 화면 오른쪽 아래 바깥 */
    transform: translate(100%, 100%);

    /* 이미지 전환(0.6s)보다 살짝 느리게 설정하여 여운을 줌 */
    transition: transform 0.7s ease-in-out;
}

.screen-layer {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 15.10938rem;
    height: 48.56425rem; */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 부드러운 전환 효과 */
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
    /* 성능 최적화 */
}

.mockup-main {
    background-image: url('/assets/images/screen_main.png');
    /* 초기 상태: 보임 (JS에서 .active 추가 전에도 보이도록) */
    opacity: 1;
    transform: scale(1) translateZ(2);
    /* z-index: 2; */
}

.mockup-step1 {
    background-image: url('/assets/images/screen_step1.png');
}

.mockup-step2 {
    background-image: url('/assets/images/screen_step2.png');
}

.mockup-step3 {
    background-image: url('/assets/images/screen_step3.png');
}

.mockup-step4 {
    background-image: url('/assets/images/screen_step4.png');
}

/* 기본 상태: 숨김 (대기 상태) */
.screen-layer {
    opacity: 0;

    transform: scale(1.1) translateZ(1px);


}

/* 현재 화면: 보임 */
.screen-layer.active {
    opacity: 1;

    transform: scale(1) translateZ(2px);

}

/* 홈화면 역할: 사라지면서 확대 (몰입감) */
.screen-layer.hide {
    opacity: 0;

    transform: scale(1.2) translateZ(2px);

}

/* 앱화면 역할: 나타나면서 제자리로 */
.screen-layer.show {
    opacity: 1;

    transform: scale(1) translateZ(3px);

}




.step-container-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.step-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.25rem;
}



.screenshot-container img {
    height: 25rem;
    width: 12.875rem;
    border-radius: 0.9375rem;
    border: 0.0625rem solid var(--color-primary);
}



.step-text-container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    display: inline-flex
}

.step-circle {
    width: 1.875rem;
    height: 1.875rem;
    background: var(--color-accent);
    border-radius: 624.9375rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-circle-text {
    text-align: center;
    color: var(--color-white);
    font-size: 1.25rem;
    font-family: var(--font-family);
    font-weight: 700;
    line-height: var(--line-height-base);
    letter-spacing: -0.0312rem;
    word-wrap: break-word
}

.step-text {
    text-align: center;
    color: var(--color-black);
    font-size: 2rem;
    font-family: var(--font-family);
    font-weight: 500;
    line-height: var(--line-height-base);
    letter-spacing: -0.05rem;
    word-wrap: break-word
}

.index-text {
    color: var(--color-gray);
    font-family: var(--font-family);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: var(--line-height-base);
    letter-spacing: -0.0312rem;
}

.bullet-text {
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: var(--line-height-base);
    letter-spacing: -0.0625rem;
}

.bullet-text strong {
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.075rem;
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.user-guide-container {
    display: flex;
    width: auto;
    height: 43.75rem;
    padding: 1.5625rem 0rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

}

.user-guide-content {
    position: relative;
    width: 75rem;
    height: 50rem;

    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}



.features-text {
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: var(--line-height-text);
    letter-spacing: -0.0375rem;
}

.features-title {
    color: var(--color-accent);
    font-family: var(--font-family);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: var(--line-height-base);
    letter-spacing: -0.0563rem;
}

.features-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.features-item-container {
    display: flex;
    width: 21.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.features-item-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;

    row-gap: 3.75rem;
    column-gap: 3.75rem;

}

.features-container {
    height: 43.75rem;
    padding: 1.5625rem 0rem;
    display: inline-flex;

    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.features-content {
    position: relative;
    width: 75rem;
    height: 50rem;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}

.search-app-container {
    position: relative;
    width: 24.5rem;
    height: 50rem;
    position: relative;
    cursor: url('/assets/images/cursor_touch.png') 16 16, auto;
    border-radius: 4.375rem;

}

.search-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    pointer-events: none;

}

.search-frame img {
    width: 100%;
    height: 100%;
}

.search-app {
    position: absolute;
    top: 4.1875rem;
    left: 1.25rem;
    width: 22.0625rem;
    height: 42.75rem;
    z-index: 98;
    /* border-radius: 0.3125rem;
    padding-top: 0.3125rem; */
    box-sizing: border-box;

}

.search-app iframe {
    width: 100%;
    height: 100%;

}


.review-data-container {
    display: flex;
    padding: 0 1.75rem;
    align-items: center;
    gap: 10rem;
}

.review-data-item {
    display: flex;
    width: 10.375rem;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.review-data-item img {
    width: 3.75rem;
    height: 3.75rem;
}

.review-data-number {
    color: var(--color-accent);
    font-family: var(--font-family);
    font-size: 3.75rem;
    font-weight: 800;
    line-height: var(--line-height-base);
    letter-spacing: -0.0938rem;
}

.review-data-title {
    color: var(--color-black);
    text-align: center;
    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: var(--line-height-base);
    letter-spacing: -0.0375rem;
}

.review-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;

}


.review-list-marquee {


    --pd: 0rem;
    width: 75rem;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    overflow: hidden;

    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 25%,
            black 75%,
            transparent 100%);
}



.review-list-container {

    width: max-content;



    display: flex;
    align-items: flex-start;
    justify-content: flex-start;


    gap: 7.5rem;

    /* 애니메이션은 JavaScript로 제어 */
    padding-bottom: 1.5625rem;
    transition: transform 0.5s ease-out;
}

.review-list-container.animating {
    transition: none;
}



.review-list-item-wrapper {
    width: 25rem;
    height: 18.75rem;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.review-list-item {
    position: relative;
    width: 100%;
    display: flex;
    padding: 1rem 0 2.25rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    border-top: 0.0625rem solid var(--color-primary);
    border-bottom: 0.0625rem solid var(--color-primary);
    background-color: var(--color-white);
}







.review-list-item-score {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.review-list-item-score img {
    width: 1.5rem;
    height: 1.5rem;
}

.review-list-item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.review-list-item-content-title {
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: var(--line-height-base);
    letter-spacing: -0.0625rem;
}

.review-list-item-content-text {
    width: 25rem;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: var(--line-height-text);
    letter-spacing: -0.0375rem;
}

.review-list-item-writer {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
}

.review-list-item-writer-name {
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: var(--line-height-base);
    letter-spacing: -0.0375rem;
}

.review-list-item-writer-nim {
    color: var(--color-gray);
    font-family: var(--font-family);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: var(--line-height-base);
    letter-spacing: -0.0281rem;
}


.review-contents {
    position: relative;
    display: flex;
    height: 43.75rem;
    width: 75rem;
    padding: 1.5625rem 0 0 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.review-moving-button-container {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 1rem;

}

.review-moving-button {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0.0625rem solid var(--color-primary);
    background-color: transparent;
    display: grid;
    place-items: center;

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.review-moving-button * {
    grid-area: 1 / 1;
    /* 모두 겹침 */
}

.review-moving-button>* {
    /* 화살표 이동 트랜지션 (버튼보다 살짝 더 쫀득하게 설정) */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.review-moving-button:hover {
    box-shadow: inset 0 0 0 0.0625rem var(--color-primary);
}

.prev-review:hover>* {
    transform: translateX(-0.25rem);
}

.next-review:hover>* {
    transform: translateX(0.25rem);
}

.review-moving-button:active {
    /* 버튼 전체가 살짝 작아짐 (0.95배) */
    transform: scale(0.92);
    box-shadow: none;

    /* 클릭 시 배경색을 조금 더 진하게 */
    background-color: rgba(41, 47, 134, 0.15);

    /* 클릭 순간 트랜지션 시간을 짧게 하여 반응성 높임 */
    transition-duration: 0.1s;
}


.coming-soon-content {
    display: flex;
    width: 75rem;
    height: 43.75rem;
    padding: 1.5625rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
}

.coming-soon-item-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.coming-soon-item {
    width: 14.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.coming-soon-item-flag {
    width: 7.8125rem;
    height: 7.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coming-soon-item-flag img {
    width: 100%;
    height: 100%;
    z-index: 31;
}

.coming-soon-item-flag-shadow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 7.8125rem;
    height: 0.625rem;
    border-radius: 50%;
    z-index: 30;

    background-color: rgba(0, 0, 0, 0.50);
    filter: blur(0.625rem);
}

.coming-soon-item-title {
    color: var(--color-black);
    text-align: center;
    font-family: var(--font-family);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: var(--line-height-base);
    letter-spacing: -0.0437rem;
}

.coming-soon-item-flag-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

}

.coming-soon-item-text {
    color: var(--color-accent);
    text-align: center;
    font-family: var(--font-family);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: var(--line-height-base);
    letter-spacing: -0.0625rem;
}

.coming-soon-arrow {
    display: flex;
    /* padding-bottom: 0.5rem; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.coming-soon-arrow img {
    width: 5rem;
    height: 5rem;
}


.coming-soon-image-container {

    width: 90rem;
    height: 24.5rem;

    position: absolute;
    bottom: 0;



}

.coming-soon-image-container>* {
    grid-area: 1 / 1;
    /* 모두 첫 번째 셀에 배치 */
}

.coming-soon-image-container img {
    position: absolute;
    bottom: 0;
    width: 75rem;
    height: 22.25rem;
    left: 50%;
    transform: translateX(-50%);


    z-index: 10;
}


.coming-soon-image-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 86.25rem;
    height: 78.125rem;


    border-radius: 86.25rem;
    background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, #A1C8FD 92%, rgba(118, 155, 252, 0.60) 96%, rgba(118, 155, 252, 0.00) 100%);
    z-index: 9;
}


.cloud-layer {
    position: absolute;

    width: 75rem;
    height: 22.25rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* 지구 이미지 높이에 맞춰 설정 */

    pointer-events: none;

    /* --- 텍스처 설정 --- */
    background-image: url('/assets/images/cloud_texture.webp');
    /* background-size: auto auto; */
    background-repeat: repeat-x;


    /* --- 🎨 핵심: 자연스러운 합성을 위한 블렌딩 --- */
    /* soft-light는 회색 텍스처를 자연스러운 음영으로 바꿔줍니다. */
    /* 만약 너무 어두우면 'screen'이나 'lighten'으로 변경해보세요. */
    mix-blend-mode: soft-light;

    /* --- 🎭 마스킹 설정 (지구 영역만 보이게) --- */
    -webkit-mask-image: url('/assets/images/earth_masking.png');
    mask-image: url('/assets/images/earth_masking.png');

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center bottom;
    mask-position: center bottom;

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 첫 번째 구름 (천천히 흐름) */
.cloud-1 {
    opacity: 0.8;
    background-position-y: -14.5rem;
    animation: moveClouds 60s linear infinite;
    animation-play-state: paused;
    z-index: 21;
}

/* 두 번째 구름 (조금 빠르게 + 위치 다르게 = 입체감) */
.cloud-2 {
    opacity: 0.4;
    background-position-y: -26.375rem;
    z-index: 20;
    /* 패턴이 겹치지 않게 위치 조정 */
    animation: moveClouds 40s linear infinite;
    animation-play-state: paused;
}

/* 섹션 활성화 시 애니메이션 시작 */
.coming-soon-section.animate .cloud-1,
.coming-soon-section.animate .cloud-2 {
    animation-play-state: running;
}



/* 구름 이동 애니메이션 */
@keyframes moveClouds {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: -200%;
    }

    /* 왼쪽으로 흐름 (지구 자전 방향) */
}


.coming-soon-image-route {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0;
    left: 0;

    /* --neon-color: #ffcf09; */
    --neon-color: #ffffff;
    --light-core: #ffffff;



    /* [2] 시간 계산 로직 (작성하신 1.6배 적용) */


    /* [3] 기타 자동 계산 */

    --track-thickness: 0.1875rem;
    --orb-size: 0.5rem;

    --blur-1: calc(0.1875rem * var(--scale-ratio));
    --blur-2: calc(0.375rem * var(--scale-ratio));
    --blur-3: calc(0.9375rem * var(--scale-ratio));
    --blur-4: calc(1.875rem * var(--scale-ratio));
}


.coming-soon-image-route-dot {

    --w: 200;



    --line-width: calc(var(--w) * 0.0625rem);
    --scale-ratio: calc(200 / var(--w));

    --track-thickness: 0.1875rem;
    --orb-size: 0.625rem;

    --blur-1: calc(0.1875rem * var(--scale-ratio));
    --blur-2: calc(0.375rem * var(--scale-ratio));
    --blur-3: calc(0.9375rem * var(--scale-ratio));
    --blur-4: calc(1.875rem * var(--scale-ratio));

    position: absolute;
    z-index: 998;

    width: var(--orb-size);
    height: var(--track-thickness);
    transition: --neon-color 0.15s ease-out;
    border-radius: 50%;
    background-color: var(--neon-color);

    filter:
        drop-shadow(0 0 var(--blur-1) var(--light-core)) drop-shadow(0 0 var(--blur-2) var(--neon-color)) drop-shadow(0 0 var(--blur-3) var(--neon-color)) drop-shadow(0 0 var(--blur-4) var(--neon-color));
}

.coming-soon-image-route-dot.korea {
    top: 4.9375rem;
    left: 50%;
    transform: translateX(-50%);

}

.coming-soon-image-route-dot.japan {
    left: 51.5rem;
    top: 5.5625rem;
}

.coming-soon-image-route-dot.china {
    left: 39.875rem;
    top: 7.5625rem;

}

.coming-soon-image-route-dot.vietnam {
    left: 26.625rem;
    top: 18.9375rem;
}

.coming-soon-image-route-dot.usa {
    left: 54.125rem;
    top: 19.0625rem;
}

.w-japan {
    --w: 108.46;
    --l: 668;
    --t: 30;
    --deg: -5.29;

}

.w-china {
    --w: 88.59;
    --l: 583;
    --t: 59.22;
    --deg: 28.3;


}

.w-vietnam {
    --w: 366.44;
    --l: 154;
    --t: 28;
    --deg: 37.68;


}

.w-usa {
    --w: 271.25;
    --l: 580.24;
    --t: 85.69;
    --deg: -56.43;


}



.spinner-wrapper {
    position: absolute;

    /* [1] 입력값 기본 설정 (HTML에서 style로 덮어씌움) */


    --line-width: calc(var(--w) * 0.0625rem);
    --scale-ratio: calc(200 / var(--w));

    --duration-move: calc(var(--w) / 200 * 1.7s);
    --duration-total: calc(var(--duration-move) * 1.6);


    --blur-1: calc(0.1875rem * var(--scale-ratio));
    --blur-2: calc(0.375rem * var(--scale-ratio));
    --blur-3: calc(0.9375rem * var(--scale-ratio));
    --blur-4: calc(1.875rem * var(--scale-ratio));


    --track-thickness: 0.1875rem;
    --orb-size: 0.625rem;



    left: calc((var(--l))*0.0625rem);
    top: calc((var(--t))*0.0625rem);

    width: calc(var(--line-width) * 2);
    height: calc(var(--line-width) / 2);


    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
    transform-origin: center center;
    transform: rotate(calc(var(--deg) * -1deg));
}

.spinner-svg {
    width: 100%;
    height: var(--line-width);
    overflow: visible;
}


.track-path {
    transition: --neon-color 0.15s ease-out;
    fill: none;
    stroke: var(--neon-color);
    stroke-width: var(--track-thickness);
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    opacity: 1;
    filter:
        drop-shadow(0 0 var(--blur-1) var(--light-core)) drop-shadow(0 0 var(--blur-2) var(--neon-color)) drop-shadow(0 0 var(--blur-3) var(--neon-color)) drop-shadow(0 0 var(--blur-4) var(--neon-color));
}

.light-mover {
    offset-path: path("M 50 50 A 50 25 0 1 1 150 50");
    animation: move-and-wait var(--duration-total) linear infinite;
    animation-play-state: paused;
}

.light-mover-invert {
    offset-path: path("M 50 50 A 50 25 0 1 1 150 50");
    animation: move-and-wait-invert var(--duration-total) linear infinite;
    animation-play-state: paused;
}

/* 섹션 활성화 시 light-mover 애니메이션 시작 */
.coming-soon-section.animate .light-mover,
.coming-soon-section.animate .light-mover-invert {
    animation-play-state: running;
}

.light-orb {
    --w: 200;


    --line-width: calc(var(--w) * 0.0625rem);
    --scale-ratio: calc(200 / var(--w));


    --blur-1: calc(0.1875rem * var(--scale-ratio));
    --blur-2: calc(0.375rem * var(--scale-ratio));
    --blur-3: calc(0.9375rem * var(--scale-ratio));
    --blur-4: calc(1.875rem * var(--scale-ratio));
    transition: --neon-color 0.15s ease-out;
    fill: none;
    stroke: var(--neon-color);
    stroke-width: var(--orb-size);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter:
        drop-shadow(0 0 var(--blur-1) var(--light-core)) drop-shadow(0 0 var(--blur-2) var(--neon-color)) drop-shadow(0 0 var(--blur-3) var(--neon-color)) drop-shadow(0 0 var(--blur-4) var(--neon-color));
}

/* 작성하신 키프레임 유지 */
@keyframes move-and-wait {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    0.5% {
        opacity: 1;
    }

    62% {
        opacity: 1;
    }

    62.5% {
        offset-distance: 100%;
        opacity: 0;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

@keyframes move-and-wait-invert {
    0% {
        offset-distance: 100%;
        opacity: 0;
    }

    0.5% {
        opacity: 1;
    }

    62% {
        opacity: 1;
    }

    62.5% {
        offset-distance: 0%;
        opacity: 0;
    }

    100% {
        offset-distance: 0%;
        opacity: 0;
    }
}


.footer-section {
    background-color: var(--color-black);
}

.footer-section a {
    transition: opacity 0.3s ease;
}


.footer-section a:hover,
.footer-navigation-item-text:hover {
    opacity: 0.7;
    cursor: pointer;
}


.footer-navigation {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    width: 90rem;
    height: 5rem;
    justify-content: center;
    align-items: center;
}

.footer-navigation-item {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.footer-navigation-item-text {
    color: #FFF;
    text-align: center;
    font-family: Paperlogy;
    font-size: 1.5rem;

    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.0375rem;
    transition: opacity 0.3s ease;
}

.footer-main-container {
    position: absolute;
    left: 7.5rem;
    top: 50%;
    transform: translateY(-100%);
    display: inline-flex;
    align-items: flex-end;
    gap: 13.75rem;
}

.footer-main-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
}

.footer-main-link-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-main-link-item img {
    width: 2.5rem;
    height: 2.5rem;
}

.footer-main-link-item-text {
    color: var(--color-white);
    font-family: Paperlogy;
    font-size: 3rem;

    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.075rem;
}


.footer-main-copyright {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.25rem;
}

.footer-main-copyright-text-wrapper {
    position: relative;
    height: 4.5rem;
    width: 37.5rem;

}

.footer-main-copyright-text {
    position: absolute;
    top: 0.9375rem;
    left: 0;

    color: #999999;
    font-family: Blacksword;
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 1;
}

.footer-sub-container {
    position: absolute;
    top: 50%;
    left: 7.5rem;
    padding-top: 3.75rem;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.75rem;
}

.footer-social-links {

    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.footer-social-links a {
    width: 3.75rem;
    height: 3.75rem;
}

.footer-social-links a img {
    width: 100%;
    height: 100%;
}

.footer-infomation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.footer-infomation-row {
    display: flex;
    align-items: center;
    gap: 2.25rem;
}

.footer-infomation-row .first-row {
    align-items: flex-end;
}

.footer-infomation-text {
    color: var(--color-gray);
    font-family: Paperlogy;
    font-size: 1.25rem;

    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.0312rem;
}

.footer-infomation-text.title-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.0375rem;

}

.footer-infomation-text a {
    text-decoration: underline;
}