@font-face {
    font-family: 'Suisse Int\'l Mono';
    src: url('../font/SuisseIntlMono-Regular.woff2') format('woff2'),
    url('../font/SuisseIntlMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Int\'l';
    src: url('../font/SuisseIntl-Medium.woff2') format('woff2'),
    url('../font/SuisseIntl-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Int\'l';
    src: url('../font/SuisseIntl-Regular.woff2') format('woff2'),
    url('../font/SuisseIntl-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #FFFDFB;
    font-family: 'Suisse Int\'l';
}

#scene {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0; /* 모든 단계 뒤의 공통 배경 */
    touch-action: none; /* 모바일: 캔버스 터치가 페이지 스크롤/줌을 막음 */
}

/* ── 커스텀 커서 (cursor.js가 활성일 때만 기본 커서 숨김) ── */
html.has-custom-cursor,
html.has-custom-cursor * {
    cursor: none !important;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #171717;
    transform: translate(-50%, -50%);            /* 포인터 중심(JS가 위치 포함해 덮어씀) */
    transition: width 0.15s ease, height 0.15s ease; /* 크기에만(위치/opacity는 즉시) */
    pointer-events: none;
    z-index: 100001;                              /* frost 오버레이 위 */
    will-change: transform;                       /* GPU 레이어 → 부드럽게 따라옴 */
}

#custom-cursor.blocked {                          /* 클릭 불가 (박스 대기 등) */
    width: 8px;
    height: 8px;
}

#custom-cursor.clickable {                        /* 클릭 가능 */
    width: 25px;
    height: 25px;
}

#custom-cursor.clickable.pressing {               /* 꾹 누르는 중 */
    width: 8px;
    height: 8px;
}

#custom-cursor.on-dark {                          /* .black-box 등 다크 영역 위 → 흰색 */
    border-color: #FFFDFB;
}

/* 커서 옆 레이블 (CLICK/SWIPE) — 포인터 기준 우하단, 크기 변해도 위치 고정 */
.cursor-label {
    position: absolute;
    left: 50%;                                    /* 원 중심 = 포인터 */
    top: 50%;
    transform: translate(16px, 7px);              /* 우하단 오프셋(원 밖) */
    font-size: 10px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.3px;
    color: #171717;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.12s ease;
}

#custom-cursor.has-label .cursor-label {
    opacity: 1;
}

#custom-cursor.on-dark .cursor-label {            /* 다크 영역에선 레이블도 흰색 */
    color: #FFFDFB;
}

/* ───────── 플로우 단계 (겹쳐두고 fade 전환) ───────── */
.stage {
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stage.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

#stage-app {
    display: block;
}

.app-copyright {
    position: fixed;
    right: 34px;
    bottom: 34px;
    z-index: 4;
}

/* 캔버스는 풀스크린 */

/* 1. 랜딩 — 셀렉트 그리드 위에 덮이는 반투명 오버레이 */
.landing-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    color: #171717;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.landing-overlay:after {
    content: "";
    display: block;
    position: fixed;
    inset: 0;
    z-index: 29;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
}

.landing-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.landing-inner {
    position: relative;
    z-index: 30;
}

/* 2. 선택 — 3D 링이 캔버스에 보이도록 투명 + 클릭은 캔버스로 통과 */
#stage-select {
    background: transparent;
    pointer-events: none;
}

/* ── 공통 헤더(#main-header): 컨테이너는 클릭 통과, 버튼만 클릭 가능 ── */
#main-header {
    pointer-events: none;
}

#main-header .text-btn,
#main-header .stage-title {
    pointer-events: auto;
    cursor: pointer;
}

/* ── 헤더 진입 인터랙션 (셀렉트 첫 진입에 .revealed → 단계별 등장) ── */
/* 공통 트랜지션 */
#main-header .text-btn,
#main-header .stage-text-box {
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.34, 1.6, .64, 1); /* 뿅(overshoot) */
}

#main-header .stage-text-box-inner span {
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 초기 상태 (숨김) */
#main-header .text-btn {
    opacity: 0;
    transform: scale(0.5);
}

/* 중앙정렬(translate -50%)을 유지한 채 scale */
#main-header .stage-title {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
}

#main-header .stage-info.stage-text-box {
    opacity: 0;
    transform: translate(-50%, -16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#main-header .stage-text-box-inner span {
    opacity: 0;
    transform: translateY(-14px);
}

/* revealed → 제자리로 (back-btn 제외, util/박스/텍스트) */
#main-header.revealed .util-item {
    opacity: 1;
    transform: scale(1);
}

#main-header.revealed .stage-title {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

#main-header.revealed .stage-info.stage-text-box {
    opacity: 1;
    transform: translate(-50%, 0);
}

#main-header.revealed .stage-text-box-inner span {
    opacity: 1;
    transform: translateY(0);
}

/* back-btn: 단계별로 JS가 .show 토글(프리뷰/앱에만 보임, 결과엔 숨김) */
#main-header .back-btn.show {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}

#main-header.revealed .util-item:nth-child(1) {
    transition-delay: 0.00s;
}

#main-header.revealed .util-item:nth-child(2) {
    transition-delay: 0.10s;
}

#main-header.revealed .stage-title {
    transition-delay: 0.45s;
}

#main-header.revealed .stage-info {
    transition-delay: 0.55s;
}

#main-header.revealed .stage-title .stage-text-box-inner span {
    transition-delay: 0.9s;
}

#main-header.revealed .stage-info .stage-text-box-inner span {
    transition-delay: 1.0s;
}

@keyframes info-swap {
    0% {
        opacity: 0;
        transform: translateY(-12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.stage-info .stage-text-box-inner span.swap {
    animation: info-swap 0.4s ease both;
}

.preview-blur {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 30vw;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s ease;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
}

.preview-blur.left {
    left: 0;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 60%);
    mask-image: linear-gradient(to left, transparent, #000 60%);
}

.preview-blur.right {
    right: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 60%);
    mask-image: linear-gradient(to right, transparent, #000 60%);
}

#stage-select.previewing .preview-blur {
    opacity: 1;
}

@media (max-width: 1024px) {
    .preview-blur {
        position: fixed;
        top: initial;
        bottom: initial;
        width: 100vw;
        height: 25dvh;
        pointer-events: none;
        z-index: 3;
        opacity: 0;
        transition: opacity 0.5s ease;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
    }

    .preview-blur.left {
        top: 0;
        -webkit-mask-image: linear-gradient(to top, transparent, #000 30%);
        mask-image: linear-gradient(to top, transparent, #000 30%);
    }

    .preview-blur.right {
        bottom: 0;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
        mask-image: linear-gradient(to bottom, transparent, #000 30%);
    }
}

/* 4. 추출 */
#stage-extract {
    padding: 34px 20px;
    height: 100%;
    background: rgba(255, 255, 255, 0.96);
    text-align: center;

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

.extract-actions {
    display: flex;
    gap: 6px;
}

.extract-actions button {
    flex: 1;
    border: none;
    cursor: pointer;
}

.extract-actions a.box-btn {
    text-decoration: none;
}

.extract-img {
    pointer-events: none;
    width: 375px;
    height: calc(100dvh - 178px - 140px);
    margin: 56px auto;
}

.extract-img > img {
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1024px) {
    #stage-extract {
        padding: 34px 20px 25px;
        height: 100%;
        background: rgba(255, 255, 255, 0.96);
        text-align: center;

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

    .extract-img {
        width: 100%;
        height: calc(100dvh - 232px);
        margin: 16px auto;
    }
}

#loading {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 110; /* 공통 헤더(99) 위 — 로딩 중엔 헤더도 가림, 결과에서 노출 */
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    transition: opacity 0.4s ease;
}

#loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-inner span {
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.36px;
}

.icon-loading {
    width: 180px;
}

.icon-loading svg {
    display: block;
    width: 100%;
    height: auto;
}

.icon-loading--ex {
    width: 156px;
    height: 53px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='53' viewBox='0 0 156 53' fill='none'%3E%3Cg clip-path='url(%23clip0_1037_6)'%3E%3Cpath d='M8.15842 50.9967C8.01493 49.1637 8.12767 47.3821 8.11742 45.5438L8.07642 39.3031C7.07199 39.0199 6.23154 38.747 5.3091 38.3814C3.43347 37.6348 1.82433 38.3196 0.666154 37.4133C0.230558 37.0735 -0.0154263 36.332 -5.23205e-05 35.7914L0.0665684 33.2425L0.671279 19.9578L0.809645 17.3266L0.901889 14.51C0.994133 11.7243 1.12737 9.00558 1.79871 6.32289C2.6699 2.82148 5.79082 2.0903 9.17823 2.13149L11.9404 2.16754C15.2766 2.20873 18.3616 2.91931 19.1611 6.41042C19.4993 7.89337 19.6992 9.34028 19.776 10.8902L20.5191 25.8638L20.9445 35.2816C20.9701 35.8943 20.883 36.7079 20.5191 37.1816C19.6325 38.3402 17.6647 37.5884 15.3535 38.4792C14.513 38.8036 13.7494 39.0405 12.8014 39.2876V50.7753C12.8014 52.1193 11.8482 52.974 10.5824 53.0049C9.42934 53.0307 8.25579 52.3252 8.15329 51.007L8.15842 50.9967Z' fill='black'/%3E%3Cpath d='M66.9435 52.4339C66.5745 52.1404 66.2568 51.4504 66.2568 50.9458L66.2875 43.4847L66.3541 39.6177C65.7341 39.4529 65.3395 39.2624 64.8577 38.9535L64.0173 38.418L62.8437 38.315C61.9777 38.2429 61.0347 38.2171 60.4659 37.4293L60.1021 36.4304L60.1533 31.0547L60.2763 27.6872L60.389 25.3495L60.5018 22.3321L60.6145 19.2941L60.7375 16.0604L60.8349 12.9761L60.9066 11.4468L60.9784 9.91752C61.0399 8.61994 61.0706 7.29146 61.5626 6.07627C62.1212 4.69115 64.417 4.23288 65.5752 5.10823C65.7033 5.20606 66.0005 5.35539 66.1389 5.32449C66.5899 5.23181 66.6668 3.97542 68.8704 4.01662C70.6794 4.05266 70.7152 4.80958 71.2021 5.21121C71.5249 5.47897 72.0528 4.32556 73.9694 4.57272C74.8662 4.686 75.6247 5.07734 75.9424 5.97843C76.2601 6.87953 76.3934 7.9351 76.4395 8.94433L76.5574 11.7506L76.6701 14.8658L76.788 19.0109L76.9007 23.2538L77.0186 27.5481L77.1313 32.1824C77.1723 33.9073 77.4542 37.1358 76.5779 37.7434C75.9321 38.1914 75.0917 38.2789 74.3281 38.248C73.5184 38.2171 72.8625 38.4694 72.1399 38.7475L70.951 39.2058L70.9868 48.0623L70.9253 50.8583C70.9151 51.332 70.7152 51.9859 70.3463 52.3206C69.4085 53.1599 67.9377 53.2114 66.9435 52.4184V52.4339Z' fill='black'/%3E%3Cpath d='M39.9826 52.9842C38.5118 53.1232 37.4612 52.1397 37.4612 50.6619L37.4817 39.6325C36.4363 39.3029 36.8565 38.4791 35.5651 37.7891C34.1661 37.0373 33.0079 35.9611 31.9932 34.7356C29.9895 32.3207 29.7589 29.293 29.9485 26.1314C30.2201 21.6414 30.5737 17.2646 31.0708 12.8055C31.3834 9.96317 31.9317 6.42572 33.3461 4.10861C34.4121 2.3682 36.1647 1.16846 38.2197 1.05003C39.1319 0.998535 40.0184 1.00368 40.9255 1.04488C45.015 1.23025 47.0136 4.57718 47.8028 8.37209C48.3204 10.8694 48.6381 13.3101 48.8534 15.8641L49.6067 24.906C49.7348 26.4507 49.7194 27.9439 49.6426 29.4732C49.4427 33.5874 46.7779 36.4606 43.1957 38.1701C42.8575 38.5305 42.55 38.9116 42.0376 39.1587L42.0683 50.5486C42.0683 51.8822 41.3303 52.8657 39.9826 52.9945V52.9842Z' fill='black'/%3E%3Cpath d='M94.9394 0.0157137C95.8721 0.185635 96.9124 0.268021 97.7375 0.731443L99.3261 1.96208C99.9564 2.45125 100.233 3.10519 100.197 3.88786C100.115 5.75699 100.664 6.90525 100.612 8.05351C100.556 9.39228 100.126 10.5817 99.5465 11.7763C100.197 13.3468 100.366 14.9379 100.208 16.6371C100.141 17.3322 100.341 18.0995 100.479 18.7843C100.869 20.674 100.479 22.4865 99.7207 24.2321C100.085 25.437 100.31 26.5852 100.305 27.8159C100.305 28.5625 100.167 29.3864 100.331 30.1124C100.73 31.8991 100.848 33.588 100.551 35.4108C100.351 36.6209 99.6182 37.8103 98.337 38.1347L96.6767 38.351L96.1539 39.2984V50.5647C96.1488 51.2805 95.9336 52.0219 95.4057 52.4699C94.596 53.1599 93.525 53.1135 92.5769 52.6656C92.0696 52.4236 91.6186 51.8057 91.6135 51.162L91.5674 46.3579L91.593 38.938L90.9012 38.2326C89.3125 38.4231 89.1331 38.4231 88.3439 37.3109C88.1133 36.9916 87.8161 36.6415 87.7034 36.281C86.8937 33.7374 86.9039 31.1165 87.5855 28.5522C87.4369 26.8272 87.5189 25.2207 87.8879 23.5421C87.0167 21.0345 86.9757 18.4805 87.647 15.9317C87.5086 14.3251 87.5701 12.8422 87.8981 11.2614C87.0064 8.37275 87.0372 5.43775 87.9391 2.54394C88.5336 0.638759 91.0549 0.278319 93.0433 -0.00488281L94.9394 0.0105646V0.0157137Z' fill='black'/%3E%3Cpath d='M155.949 21.8373L156 34.4115C155.713 35.0242 156.133 36.1004 155.406 36.641C154.878 37.0324 154.129 37.0993 153.489 37.1508L151.941 37.2744L151.854 45.5439L151.731 51.1667C151.706 52.2429 149.907 53.5714 148.154 52.7321C146.54 51.9597 146.868 50.0442 146.888 48.5664L147.001 41.0332L147.027 38.0982C147.032 37.398 146.027 37.1302 145.474 37.0839L144.444 36.9912C143.793 36.9345 143.132 36.3527 143.142 35.6318L143.199 30.045L143.322 24.2522L143.439 19.2061L143.573 15.751L143.691 11.6781L143.793 7.68748L143.87 6.53922C143.972 5.01508 144.039 3.94406 144.874 3.06871C145.474 2.44052 146.33 2.13672 147.196 2.13672H152.331C152.777 2.13672 153.212 2.2294 153.622 2.39932L154.104 2.60014C155.247 3.07901 155.836 4.69584 155.846 6.12215L155.954 21.8373H155.949Z' fill='black'/%3E%3Cpath d='M124.207 45.8123V50.6113C124.207 51.9809 123.299 52.9078 121.977 52.9953C120.655 53.0828 119.379 52.2023 119.379 50.6988V39.3089C118.533 39.175 117.857 38.8043 117.145 38.3975L115.715 37.5788C114.326 37.4501 113.065 37.2338 111.789 36.7395C110.601 36.2812 109.734 35.1793 109.781 33.8045C109.842 31.8942 110.216 30.0302 110.739 28.1662L116.443 7.84773C116.883 6.27725 117.493 4.87668 118.288 3.53276C119.082 2.18884 120.481 1.31863 122.105 1.59669C123.32 1.5143 124.463 2.06011 125.216 3.06419C126.241 4.43901 126.917 5.9786 127.384 7.65206L129.434 14.9741L132.16 25.051L133.59 31.1372L133.907 33.9487C134.051 35.2411 133.205 36.2297 132.006 36.6726C130.587 37.2596 129.034 37.3368 127.527 37.7333C126.395 38.0319 125.406 38.6344 124.176 38.8455L124.196 45.8174L124.207 45.8123Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1037_6'%3E%3Crect width='156' height='53' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: icon-loading-ex-fade 1.2s ease-in-out infinite alternate; /* opacity 1↔0.1 이징 펄스 */
}

@keyframes icon-loading-ex-fade {
    from { opacity: 1; }
    to { opacity: 0.1; }
}

/* 추출 진행 오버레이 */
#export-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

#export-overlay.show {
    display: flex;
}

#export-overlay .box {
    background: #FFFDFB;
    border-radius: 14px;
    padding: 24px 28px;
    min-width: 240px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

#export-overlay .msg {
    color: #222;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.frost-cover {
    display: flex; /* 항상 flex(중앙정렬) — 표시는 opacity/visibility로(디졸브) */
    position: fixed;
    z-index: 100000;
    inset: 0;
    width: 100%;
    height: 100dvh;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 숨김 상태에서 클릭 막지 않게 */
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.frost-cover.show {
    opacity: 1;
    visibility: visible;
}

.f-copyright {
    align-items: center;
}

.f-copyright.copyright .logo {
    margin: 0 auto 12px;
    width: 134px;
}

.f-copyright.copyright .copyright-text {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 130%;
}

@media (max-width: 1024px) {
    .f-copyright.copyright {
        display: flex !important;
    }
}

.ot-banner {
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #F2F2E8;
}

.ot-banner.hidden {
    display: none;
}

.ot-banner-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 18px 34px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.ot-cont {
    padding-bottom: 6px;
}

.ot-cont > strong {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.36px;
}

.ot-cont p {
    font-size: 10px;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: 0.3px;
}

.ot-btns {
    display: flex;
    gap: 6px;
}

.ot-btn {
    cursor: pointer;
}

.ot-btn.box-btn {
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    background: #171717;
    color: #F2F2E8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.36px;
    border: 1px solid #171717;
}

.ot-btn.box-btn.ot-reject {
    border: 1px solid #171717;
    background: #F2F2E8;
    color: #171717;
}

.ot-btn.text-btn {
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.36px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

@media (max-width: 1024px) {
    .ot-banner-inner {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 20px 20px 24px;
        display: block;
    }

    .ot-cont {
        padding-bottom: 24px;
    }

    .ot-cont > strong {
        display: block;
        margin-bottom: 8px;
    }

    .ot-btns {
        justify-content: end;
    }
}