html, body { overflow-x: hidden; touch-action: pan-y; overscroll-behavior-x: none; }
/* 스크롤 관련 설정 */
html {
    scroll-behavior: smooth;  /* 부드러운 스크롤 */
}
/* 모바일 탄성 스크롤 (iOS 전용) */
body {
    -webkit-overflow-scrolling: touch;  /* iOS 탄성 스크롤 */
}

        /* 픽셀 폰트 */
        @font-face {
            font-family: 'DungGeunMo';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face {
            font-family: 'DNFBitBitv2';
            font-style: normal;
            font-weight: 400;
            src: url('//cdn.df.nexon.com/img/common/font/DNFBitBitv2.otf') format('opentype');
        }

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

        body {
            font-family: 'DungGeunMo';
            background: 
                linear-gradient(135deg, #ffffff46 0%, #230f4b3b 50%, #ff008c1e 80%, #ffabd96c 100%); /* 어두운 오버레이 */
               /* linear-gradient(135deg, #23272A 0%, #2C2F36 50%, #32363C 100%); */
            overflow-x: hidden;
            line-height: 1.6;
            position: relative;

            color: #FFF4FA;
            min-height: 100vh;

        }

        body::before{
        content:"";
        position: fixed;
        inset: 0;
        background: 
            linear-gradient(135deg, #ffffff46 0%, #230f4b3b 50%, #ff008c1e 80%, #11023b3d 100%), /* 어두운 오버레이 */
            url('https://firebasestorage.googleapis.com/v0/b/hwsghouse.firebasestorage.app/o/images%2Fbg_castle.png?alt=media') center/cover no-repeat;
        filter: blur(2px);           /* 블러 강도 조절 */
        transform: scale(1.06);       /* 블러 가장자리 잘림 방지 */
        will-change: filter, transform;
        z-index: -5;                   /* 맨 뒤 레이어 */
        pointer-events: none;
        }

        /* PC 버전 컨테이너 너비 제한 */
        @media (min-width: 1024px) {
            .main-container {
                max-width: 70%;
                margin: 0 auto;
            }
        }

        /* 모바일 배경 이미지 변경 */
        @media (max-width: 768px) {
            .main-container {
                margin: 0 auto;

            }
            body {
                background: 
                    linear-gradient(135deg, #ffffff46 0%, #230f4b3b 50%, #ff008c1e 80%, #ffabd96c 100%), /* 어두운 오버레이 */
                    url('https://firebasestorage.googleapis.com/v0/b/hwsghouse.firebasestorage.app/o/images%2Fm_bg%403x.png?alt=media') no-repeat,
                    linear-gradient(135deg, #23272A 0%, #2C2F36 50%, #32363C 100%);
                background-attachment: scroll; /* fixed 대신 scroll 사용 */
                background-position: center top;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                min-height: 100vh;
            }
        
        }
        /* 애니메이션 */
        @keyframes promptBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        @keyframes snowflakes-fall-bg {
            0% { top: -10%; }
            100% { top: 100%; }
           /* 0% { transform: translateY(-10vh); opacity: 1; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(110vh); opacity: 1; }*/
        }

        @keyframes snowflakes-shake-bg {
            0%, 100% { transform: translateX(0px); }
            25% { transform: translateX(20px); }
            75% { transform: translateX(-20px); }
        }

        @keyframes snowflakes-fall {
            0% { top: -10%; }
            100% { top: 100%; }
        }

        @keyframes snowflakes-shake {
            0% { transform: translateX(0px); }
            50% { transform: translateX(80px); }
            100% { transform: translateX(0px); }
        }

        @keyframes pixelGlow {
            0% { box-shadow: 0 0 20px rgba(253, 2, 143, 0.3); }
            100% { box-shadow: 0 0 30px rgba(253, 2, 143, 0.9), 0 0 40px rgba(255, 71, 112, 0.5); }
        }

        @keyframes pixelHeartbeat {
            0%, 100% { 
                transform: scale(0.5);
                filter: drop-shadow(0 0 10px rgba(253, 2, 143, 0.2));
            }
            50% { 
                transform: scale(1.5);
                filter: drop-shadow(0 0 20px rgba(253, 2, 143, 1));
            }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

    /* 후경 레이어 눈 효과 */
        .snowflakes-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }

        .snowflake-bg {
            position: fixed;
            top: -10%;
            z-index: 1;
            user-select: none;
            cursor: default;
            color: rgba(255, 255, 255, 0.8);
            font-size: 1em;
            font-family: 'DungGeunMo', Arial, sans-serif;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
            animation-name: snowflakes-fall-bg, snowflakes-shake-bg;
            animation-duration: 8s, 2s;
            animation-timing-function: linear, ease-in-out;
            animation-iteration-count: infinite, infinite;
            animation-play-state: running, running;
        }

        /* 후경 눈송이 위치 설정 */
        .snowflake-bg:nth-of-type(1) { left: 3%; animation-delay: 0s, 0s; font-size: 0.8em; }
        .snowflake-bg:nth-of-type(2) { left: 13%; animation-delay: 1s, 1s; font-size: 0.4em; }
        .snowflake-bg:nth-of-type(3) { left: 23%; animation-delay: 6s, 0.5s; font-size: 0.1em; }
        .snowflake-bg:nth-of-type(4) { left: 31%; animation-delay: 4s, 2s; font-size: 0.6em; }
        .snowflake-bg:nth-of-type(5) { left: 43%; animation-delay: 2s, 2s; font-size: 0.9em; }
        .snowflake-bg:nth-of-type(6) { left: 53%; animation-delay: 8s, 3s; font-size: 0.3em; }
        .snowflake-bg:nth-of-type(7) { left: 63%; animation-delay: 6s, 2s; font-size: 0.1em; }
        .snowflake-bg:nth-of-type(8) { left: 73%; animation-delay: 2.5s, 1s; font-size: 0.5em; }
        .snowflake-bg:nth-of-type(9) { left: 83%; animation-delay: 1s, 0s; font-size: 0.7em; }
        .snowflake-bg:nth-of-type(10) { left: 93%; animation-delay: 3s, 1.5s; font-size: 0.2em; }
        .snowflake-bg:nth-of-type(11) { left: 7%; animation-delay: 7s, 0.8s; font-size: 0.1em; }
        .snowflake-bg:nth-of-type(12) { left: 17%; animation-delay: 5s, 2.5s; font-size: 0.8em; }
        .snowflake-bg:nth-of-type(13) { left: 27%; animation-delay: 9s, 1.2s; font-size: 0.4em; }
        .snowflake-bg:nth-of-type(14) { left: 77%; animation-delay: 0.5s, 3s; font-size: 0.1em; }
        .snowflake-bg:nth-of-type(15) { left: 91%; animation-delay: 4.5s, 1.8s; font-size: 0.9em; }

        /* 전경 레이어 눈 효과 */
        .snowflakes {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            overflow: hidden;
        }

        .snowflake {
            position: fixed;
            top: -10%;
            z-index: 9999;
            user-select: none;
            cursor: default;
            color: rgba(255, 255, 255, 0.9);
            font-size: 5.5em;
            font-family: 'DungGeunMo', Arial, sans-serif;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
            animation-name: snowflakes-fall, snowflakes-shake;
            animation-duration: 12s, 4s;
            animation-timing-function: linear, ease-in-out;
            animation-iteration-count: infinite, infinite;
            animation-play-state: running, running;
        }

        /* 전경 눈송이 위치 설정 */
        .snowflake:nth-of-type(1) { left: 1%; animation-delay: 0s, 0s; font-size: 0.8em; }
        .snowflake:nth-of-type(2) { left: 10%; animation-delay: 1s, 1s; font-size: 1.4em; }
        .snowflake:nth-of-type(3) { left: 20%; animation-delay: 6s, 0.5s; font-size: 1em; }
        .snowflake:nth-of-type(4) { left: 30%; animation-delay: 4s, 2s; font-size: 1.6em; }
        .snowflake:nth-of-type(5) { left: 40%; animation-delay: 2s, 2s; font-size: 0.9em; }
        .snowflake:nth-of-type(6) { left: 50%; animation-delay: 8s, 3s; font-size: 1.3em; }
        .snowflake:nth-of-type(7) { left: 60%; animation-delay: 6s, 2s; font-size: 1.1em; }
        .snowflake:nth-of-type(8) { left: 70%; animation-delay: 2.5s, 1s; font-size: 1.5em; }
        .snowflake:nth-of-type(9) { left: 80%; animation-delay: 1s, 0s; font-size: 0.7em; }
        .snowflake:nth-of-type(10) { left: 90%; animation-delay: 3s, 1.5s; font-size: 1.2em; }
        .snowflake:nth-of-type(11) { left: 5%; animation-delay: 7s, 0.8s; font-size: 1em; }
        .snowflake:nth-of-type(12) { left: 15%; animation-delay: 5s, 2.5s; font-size: 0.8em; }
        .snowflake:nth-of-type(13) { left: 25%; animation-delay: 9s, 1.2s; font-size: 1.4em; }
        .snowflake:nth-of-type(14) { left: 75%; animation-delay: 0.5s, 3s; font-size: 1.1em; }
        .snowflake:nth-of-type(15) { left: 85%; animation-delay: 4.5s, 1.8s; font-size: 0.9em; }

        /* 게이트 오프닝 애니메이션 */
        .gate-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 900;
            overflow: hidden;
            transition: opacity 1s ease-out;
            background: 
                rgba(0, 0, 0, 0.8),
                url('https://firebasestorage.googleapis.com/v0/b/hwsghouse.firebasestorage.app/o/images%2Fbg_castle.png?alt=media') fixed center/cover no-repeat,
                linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(10, 10, 15, 0.8) 50%, rgba(15, 15, 20, 0.8) 100%);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            backdrop-filter: blur(10px);
        }

        .gate-container.active {
            cursor: none;
        }

        .gate-container.active * {
            cursor: none !important;
        }

        .gate-left, .gate-right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 400px;
            height: 500px;
            transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: flex;
            align-items: center;
            justify-content: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .gate-left {
            right: 50%;
            background-image: url('https://firebasestorage.googleapis.com/v0/b/hwsghouse.firebasestorage.app/o/images%2Fgate_leftt%403x.png?alt=media');
            background-position: right center;
            z-index: 10;
        }

        .gate-right {
            left: 50%;
            background-image: url('https://firebasestorage.googleapis.com/v0/b/hwsghouse.firebasestorage.app/o/images%2Fgate_rightt%403x.png?alt=media');
            background-position: left center;
            z-index: 10;
        }

        .gate-container.opened .gate-left {
            transform: translateY(-50%) translateX(-100%);
        }

        .gate-container.opened .gate-right {
            transform: translateY(-50%) translateX(100%);
        }

        .gate-container.opened {
            background: 
                rgba(45, 0, 54, 0.8),
                url('https://firebasestorage.googleapis.com/v0/b/hwsghouse.firebasestorage.app/o/images%2Fbg_castle.png?alt=media') fixed center/cover no-repeat,
                linear-gradient(135deg, rgba(35, 39, 42, 0.8) 0%, rgba(44, 47, 54, 0.8) 50%, rgba(50, 54, 60, 0.8) 100%);
            backdrop-filter: blur(5px);
            transition: all 2s ease-out;
        }

        /* 모바일 게이트 */
        @media (max-width: 768px) {
            .gate-container {
                background: 
                    rgba(0, 0, 0, 0.8),
                    url('https://firebasestorage.googleapis.com/v0/b/hwsghouse.firebasestorage.app/o/images%2Fm_bg%403x.png?alt=media') fixed center/cover no-repeat,
                    linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(10, 10, 15, 0.8) 50%, rgba(15, 15, 20, 0.8) 100%);
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                backdrop-filter: blur(8px);
            }

            .gate-container.opened {
                background: 
                    rgba(45, 0, 54, 0.3),
                    url('https://firebasestorage.googleapis.com/v0/b/hwsghouse.firebasestorage.app/o/images%2Fm_bg%403x.png?alt=media') fixed center/cover no-repeat,
                    linear-gradient(135deg, rgba(35, 39, 42, 0.8) 0%, rgba(44, 47, 54, 0.8) 50%, rgba(50, 54, 60, 0.8) 100%);
                backdrop-filter: blur(3px);
                transition: all 2s ease-out;
            }
            
            .gate-left, .gate-right {
                top: 0;
                transform: none;
                width: 50%;
                height: 100%;
                background-size: 200% 100%;
            }
            
            .gate-left {
                left: 0;
                background-position: center right;
            }
            
            .gate-right {
                right: 0;
                background-position: center left;
            }

            .gate-container.opened .gate-left {
                transform: translateX(-100%);
            }

            .gate-container.opened .gate-right {
                transform: translateX(100%);
            }
        }

        /* 메인 컨테이너 */
        .main-container {
            opacity: 0;
            transition: opacity 1s ease-in 0.5s;
        }

        .main-container.visible {
            opacity: 1;
        }

        /* 스크롤바 스타일링 - 모든 스크롤 요소 */
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-track {
            background: transparent; /* 배경 투명 */
        }

        ::-webkit-scrollbar-thumb {
            background-color: #FFE3F3; /* 썸네일 색상 */
            border-radius: 6px;
            border: 2px solid transparent;
            background-clip: content-box;
            transition: all 0.3s ease;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #FFF4FA; /* 호버시 더 밝게 */
        }

        ::-webkit-scrollbar-thumb:active {
            background-color: #FFFFFF; /* 클릭시 흰색 */
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        /* Firefox용 스크롤바 */
        * {
            scrollbar-width: thin;
            scrollbar-color: #FFE3F3 transparent;
        }

        /* 헤더 섹션 */
        .header-section {
            text-align: center;
            padding: 60px 20px 40px;
            background: rgba(45, 0, 54, 0.8);
            backdrop-filter: blur(10px);
            /*border-bottom: 4px solid #FD028F;*/
            border-bottom-left-radius: 10px;  /* 추가 */
            border-bottom-right-radius: 10px; /* 추가 */
            position: relative;
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 10;
        }

        .header-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 2px,
                    rgba(253, 2, 143, 0.3) 2px,
                    rgba(253, 2, 143, 0.3) 4px
                );
            pointer-events: none;
            border-bottom-left-radius: 10px;  /* 추가 */
            border-bottom-right-radius: 10px; /* 추가 */
        }

        /* 스크롤시 헤더 변환 */
        .header-section.scrolled {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 10px 20px;
            background: rgba(45, 0, 54, 0.95);
            backdrop-filter: blur(5px);
            box-shadow: 
                0 4px 20px rgba(0, 0, 0, 0.3);
                /* inset 0 -3px 0 rgba(253, 2, 143, 0.3); */
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .header-section.scrolled .header-content {
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 11;

        }

        .header-section.scrolled .header-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            width: 100%;
            max-width: 400px;
             z-index: 11;

        }

        /* PC에서 BGM 컨트롤러를 가장 오른쪽로 */
        @media (min-width: 769px) {
            .header-section.scrolled .header-actions {
            justify-content: space-between;
            width: 100%;
            }
            
            .nav-menu-group {
                position: absolute;
                
                transform: translateX(-50%);
                z-index: 11;
            }
        }

        .header-section.scrolled .couple-gif {
            width: 40px;
            height: 40px;
            margin: 0;
            border-radius: 50%;
            border: 0.1px solid #FD028F;
        }

        .header-section.scrolled .couple-names {
            width: 140px;
            height: 40px;

            font-size: 1.3rem;
            margin: 0;
            letter-spacing: 1px;
        }

        .header-section.scrolled .wedding-date,
        .header-section.scrolled .main-message,
        .header-section.scrolled .scroll-hint {
            display: none;
        }

        .header-section.scrolled .header-main-actions {
            display: none;
        }

        .header-actions {
            display: none;
            align-items: center;
            transition: all 0.3s ease;
            position: relative;
        }

        /* 헤더 메인 액션 버튼들 */
        .header-main-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 20px;
            flex-wrap: wrap;
            z-index: 12;

        }

        .main-container.header-fixed {
            padding-top: 80px;
        }

        .couple-gif {
            width: 120px;
            height: auto;
            margin-bottom: 15px;
            border-radius: 8px;
            position: relative;
            z-index: 11;
        }

        .quest-image {
            text-align: center;
            margin: 20px 0;
            position: relative;
            z-index: 10;
        }

        .hagack-image {
            width: 600px;
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 
                0 4px 15px rgba(253, 2, 143, 0.3),
                inset 0 0 0 2px rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease;
        }

        .hagack-image:hover {
            transform: scale(1.05);
        }

        /* 모바일에서는 가로 꽉차게 */
        @media (max-width: 768px) {
            .hagack-image {
                width: 100%;
                max-width: calc(100vw - 40px);
            }
        }

        /* BGM 컨트롤과 메뉴 분리 */
        .nav-menu-group {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 40px;
        }

        .nav-bgm-control {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 4px;
            padding-left: 15px;
            border-left: 1px solid rgba(255, 255, 255, 0.3);
            height: 100%;
        }

        .nav-bgm-btn {
            background: 
                linear-gradient(135deg, #FD028F, #FF4770),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 1px,
                    rgba(255, 255, 255, 0.1) 1px,
                    rgba(255, 255, 255, 0.1) 2px
                );
            border: none;
            font-size: 0.7rem;
            cursor: pointer;
            padding: 4px 6px;
            color: white;
            border-radius: 4px;
            transition: all 0.1s ease;
            box-shadow: 
                inset -1px -1px 0 rgba(0, 0, 0, 0.3),
                inset 1px 1px 0 rgba(255, 255, 255, 0.3);
            height: 28px;
            width: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-bgm-btn:hover {
            background: 
                linear-gradient(135deg, #FF4770, #FD028F),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 1px,
                    rgba(255, 255, 255, 0.2) 1px,
                    rgba(255, 255, 255, 0.2) 2px
                );
            transform: scale(1.05);
        }

        /* 모바일 햄버거 메뉴 */
        .mobile-menu-toggle {
            display: none;
            background: linear-gradient(135deg, #f472b6, #60a5fa, #34d399);
            border: none;
            border-radius: 6px;
            width: 36px;
            height: 36px;
            cursor: pointer;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }

        .mobile-menu-toggle span {
            width: 18px;
            height: 2px;
            background: white;
            border-radius: 1px;
            transition: all 0.3s ease;
        }

        .mobile-menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .mobile-menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .mobile-menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }

        .mobile-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(45, 0, 54, 0.98);
            backdrop-filter: blur(5px);
            padding: 10px;
            flex-direction: column;
            gap: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            border-radius: 8px;

        }

        .mobile-menu.show {
            display: flex;
        }

        .mobile-menu .quick-btn {
            width: 100%;
            height: 44px;
            font-size: 1rem;
        }

        /* 모바일에서만 햄버거 메뉴 표시 */
        @media (max-width: 768px) {
            .header-section.scrolled .nav-menu-group {
                display: none;
            }
            
            .mobile-menu-toggle {
                display: flex;
            }
        }

        /* PC에서는 햄버거 메뉴 숨김 */
        @media (min-width: 769px) {
            .mobile-menu-toggle {
                display: none !important;
            }
            
            .mobile-menu {
                display: none !important;
            }
        }

        .wedding-date {
            font-size: 1rem;
            color: #C2EAFF;
            margin-bottom: 10px;
            letter-spacing: 2px;
            text-shadow: 0 0 10px rgba(194, 234, 255, 0.5);
            font-family: 'DungGeunMo';
        }

        .couple-names {
            font-size: 2.2rem;
            font-weight: bold;
            color: #FFE3F3;
            margin: 20px 0;
            text-shadow: 2px 2px 0px #2D0036, 0 0 20px rgba(255, 227, 243, 0.8);
            font-family: 'DNFBitBitv2';
            letter-spacing: 3px;
            z-index: 11;
        }

        .main-message {
            font-size: 1.1rem;
            color: #FFAFFF;
            margin-bottom: 30px;
            line-height: 1.8;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
            font-family: 'DNFBitBitv2';
            text-shadow: 0 0 10px rgba(255, 175, 255, 0.6);
        }

        .couple-names .heart {
            color: #FD028F;
            font-size: 1.8rem;
            margin: 0 10px;
            z-index: 10;
            animation: pixelHeartbeat 2s infinite;
            filter: drop-shadow(0 0 10px rgba(253, 2, 143, 0.8));
        }

        /* 스크롤 힌트 */
        .scroll-hint {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 30px;
            animation: bounce 2s infinite;
        }

        .scroll-hint span {
            font-size: 0.9rem;
            color: #60a5fa;
            margin-bottom: 10px;
            font-family: 'Courier New', monospace;
            text-shadow: 0 0 10px rgba(96, 165, 250, 0.7);
        }

        .scroll-arrow {
            width: 20px;
            height: 20px;
            border-right: 2px solid #60a5fa;
            border-bottom: 2px solid #60a5fa;
            transform: rotate(45deg);
            filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.8));
        }

        /* 공통 버튼 스타일 */
        .submit-btn, .accept-btn, .quick-btn, .main-action-btn {
            background: linear-gradient(135deg, #f472b6, #60a5fa, #34d399);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'DungGeunMo', monospace;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            box-shadow: 
                0 4px 15px rgba(244, 114, 182, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.2);
            text-decoration: none;
            display: inline-block;
            text-align: center;
            z-index: 12;

        }

        .submit-btn:hover, .accept-btn:hover, .quick-btn:hover, .main-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 6px 20px rgba(244, 114, 182, 0.6),
                inset 0 1px 0 rgba(255,255,255,0.2);
        }

        .quick-btn {
            padding: 8px 16px;
            font-size: 0.9rem;
            border-radius: 20px;
            min-width: 120px;
            width: auto;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main-action-btn {
            padding: 12px 20px;
            font-size: 1rem;
        }

        /* BGM 컨트롤 - 스크롤시 사라지도록 수정 */
        .bgm-control {
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: 9998;
            display: flex;
            align-items: center;
            gap: 6px;
            background: 
                rgba(45, 0, 54, 0.9),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 2px,
                    rgba(255, 255, 255, 0.1) 2px,
                    rgba(255, 255, 255, 0.1) 3px
                );
            backdrop-filter: blur(5px);
            padding: 4px 8px;
            border-radius: 8px;
            box-shadow: 
                inset 0 0 0 2px rgba(255, 255, 255, 0.3),
                inset -2px -2px 0 rgba(0, 0, 0, 0.5),
                inset 2px 2px 0 rgba(255, 255, 255, 0.3),
                2px 2px 0 rgba(0, 0, 0, 0.3),
                4px 4px 0 rgba(0, 0, 0, 0.2);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            opacity: 1;
            transform: translateY(0);
        }

        .bgm-control.hidden {
            opacity: 0;
            transform: translateY(-100px);
            pointer-events: none;
        }

        .bgm-btn {
            background: 
                linear-gradient(135deg, #FD028F, #FF4770),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 1px,
                    rgba(255, 255, 255, 0.1) 1px,
                    rgba(255, 255, 255, 0.1) 2px
                );
            border: none;
            font-size: 0.7rem;
            cursor: pointer;
            padding: 4px 6px;
            color: white;
            border-radius: 4px;
            transition: all 0.1s ease;
            box-shadow: 
                inset -1px -1px 0 rgba(0, 0, 0, 0.3),
                inset 1px 1px 0 rgba(255, 255, 255, 0.3);
        }

        /* 섹션 공통 스타일 - 픽셀 UI with rounded corners */
        .section {
            padding: 40px 20px;
            margin: 20px auto;
            background: 
                rgba(30, 58, 138, 0.7),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 2px,
                    rgba(253, 2, 143, 0.5) 2px,
                    rgba(253, 2, 143, 0.5) 4px
                );
            backdrop-filter: blur(10px);
            max-width: calc(100% - 40px);
            z-index: 9;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 
                /*inset 0 0 0 3px rgba(253, 2, 143, 0.8),*/
                inset 3px 3px 0 rgba(255, 255, 255, 0.2),
                inset -3px -3px 0 rgba(0, 0, 0, 0.3),
                0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .section::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            right: 3px;
            bottom: 3px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            pointer-events: none;
        }

        .section::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    0deg,
                    transparent 0px,
                    transparent 2px,
                    rgba(255, 255, 255, 0.02) 2px,
                    rgba(255, 255, 255, 0.02) 3px
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent 0px,
                    transparent 2px,
                    rgba(255, 255, 255, 0.02) 2px,
                    rgba(255, 255, 255, 0.02) 3px
                );
            border-radius: 8px;
            pointer-events: none;
        }

        .section-title {
            text-align: center;
            font-size: 1.5rem;
            color: #FFE3F3;
            margin-bottom: 30px;
            position: relative;
            z-index: 10;
            font-family: 'DNFBitBitv2', 'Courier New', monospace;
            text-shadow: 2px 2px 0px #2D0036, 0 0 15px rgba(255, 227, 243, 0.8);
            letter-spacing: 2px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #FD028F, #FF4770, #FFA849);
            box-shadow: 0 0 10px rgba(253, 2, 143, 0.8);
        }

        /* 퀘스트 보드 스타일 - 진짜 픽셀 게임 UI */
        .quest-board {
            background: 
                rgba(30, 58, 138, 0.7),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 8px,
                    rgba(253, 2, 143, 0.1) 8px,
                    rgba(253, 2, 143, 0.1) 10px
                );
            backdrop-filter: blur(5px);
        }

        .quest-window {
            background: 
                rgba(45, 0, 54, 0.9),
                repeating-linear-gradient(
                    0deg,
                    rgba(255, 255, 255, 0.02) 0px,
                    rgba(255, 255, 255, 0.02) 1px,
                    transparent 1px,
                    transparent 2px
                );
            backdrop-filter: blur(5px);
            margin: 20px 0;
            overflow: hidden;
            position: relative;
            border-radius: 8px;
            box-shadow: 
                inset 0 0 0 3px #FD028F,
                inset 3px 3px 0 rgba(255, 255, 255, 0.3),
                inset -3px -3px 0 rgba(0, 0, 0, 0.5),
                3px 3px 0 rgba(0, 0, 0, 0.3),
                6px 6px 0 rgba(0, 0, 0, 0.2),
                9px 9px 0 rgba(0, 0, 0, 0.1);
        }

        .quest-window::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 6px;
            right: 6px;
            bottom: 6px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            pointer-events: none;
        }

        .quest-header {
            background: 
                linear-gradient(135deg, #FD028F, #FF4770),
                repeating-linear-gradient(
                    90deg,
                    transparent 0px,
                    transparent 2px,
                    rgba(255, 255, 255, 0.1) 2px,
                    rgba(255, 255, 255, 0.1) 3px
                );
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            box-shadow: 
                inset 0 2px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 0 rgba(0, 0, 0, 0.3),
                0 2px 0 rgba(0, 0, 0, 0.2);
        }

        .quest-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: 
                repeating-linear-gradient(
                    90deg,
                    #FF4770 0px,
                    #FF4770 4px,
                    #FD028F 4px,
                    #FD028F 8px
                );
        }

        .quest-icon {
            font-size: 1.2rem;
        }

        .quest-title {
            flex: 1;
            font-family: 'DNFBitBitv2', 'Courier New', monospace;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
        }

        .quest-level {
            font-family: 'DNFBitBitv2', 'Courier New', monospace;
            color: #FFD250;
            font-weight: bold;
        }

        .quest-content {
            padding: 20px;
            color: #FFE3F3;
            font-family: 'DungGeunMo', 'Courier New', monospace;
            line-height: 1.6;
        }

        .quest-greeting {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #C2EAFF;
        }

        .quest-description {
            margin-bottom: 20px;
            color: #F1E9F0;
        }

        .job-change-info {
            background: 
                rgba(0, 0, 0, 0.5),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 4px,
                    rgba(255, 122, 87, 0.1) 4px,
                    rgba(255, 122, 87, 0.1) 6px
                );
            margin: 15px 0;
            padding: 15px;
            position: relative;
            border-radius: 8px;
            box-shadow: 
                inset 0 0 0 2px #FF7A57,
                inset 2px 2px 0 rgba(0, 0, 0, 0.5),
                inset -2px -2px 0 rgba(255, 255, 255, 0.2);
        }

        .job-change-info::before {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            bottom: 4px;
            border: 1px solid rgba(255, 122, 87, 0.3);
            border-radius: 5px;
            pointer-events: none;
        }

        .quest-rewards, .quest-requirements {
            margin: 15px 0;
            padding: 12px;
            background: 
                rgba(91, 186, 181, 0.2),
                repeating-linear-gradient(
                    0deg,
                    transparent 0px,
                    transparent 2px,
                    rgba(29, 190, 184, 0.1) 2px,
                    rgba(29, 190, 184, 0.1) 3px
                );
            position: relative;
            border-radius: 8px;
            box-shadow: 
                inset 0 0 0 2px #5BBAB5,
                inset -2px -2px 0 rgba(0, 0, 0, 0.3),
                inset 2px 2px 0 rgba(255, 255, 255, 0.2),
                2px 2px 0 rgba(0, 0, 0, 0.2);
        }

        .quest-rewards::before, .quest-requirements::before {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            bottom: 4px;
            border: 1px solid rgba(91, 186, 181, 0.3);
            border-radius: 5px;
            pointer-events: none;
        }

        .job-change-title {
            font-family: 'DNFBitBitv2', 'Courier New', monospace;
            color: #FFA849;
            font-weight: bold;
            margin-bottom: 10px;
            position: relative;
            z-index: 10;
        }

        .job-change-item {
            margin: 8px 0;
            position: relative;
            z-index: 10;
        }

        .user-name {
            color: #C2EAFF;
            font-weight: bold;
        }

        .job-arrow {
            margin-left: 10px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .job-before {
            color: #BDA5AC;
            padding: 4px 8px;
            background: 
                rgba(189, 165, 172, 0.3),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 2px,
                    rgba(0, 0, 0, 0.1) 2px,
                    rgba(0, 0, 0, 0.1) 3px
                );
            border-radius: 4px;
            box-shadow: 
                inset 1px 1px 0 rgba(0, 0, 0, 0.3),
                inset -1px -1px 0 rgba(255, 255, 255, 0.2);
        }

        .arrow {
            color: #FD028F;
            font-weight: bold;
            font-size: 1.2rem;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
        }

        .job-after {
            color: #FFD250;
            padding: 4px 8px;
            background: 
                rgba(255, 210, 80, 0.3),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 2px,
                    rgba(255, 255, 255, 0.1) 2px,
                    rgba(255, 255, 255, 0.1) 3px
                );
            font-weight: bold;
            border-radius: 4px;
            box-shadow: 
                inset -1px -1px 0 rgba(0, 0, 0, 0.3),
                inset 1px 1px 0 rgba(255, 255, 255, 0.3),
                1px 1px 0 rgba(0, 0, 0, 0.2);
        }

        .quest-objective {
            margin: 20px 0;
            padding: 12px;
            background: 
                rgba(253, 2, 143, 0.2),
                repeating-linear-gradient(
                    90deg,
                    transparent 0px,
                    transparent 4px,
                    rgba(253, 2, 143, 0.1) 4px,
                    rgba(253, 2, 143, 0.1) 6px
                );
            color: #FFAFFF;
            position: relative;
            border-radius: 8px;
            box-shadow: 
                inset 0 0 0 2px #FD028F,
                inset 2px 2px 0 rgba(255, 255, 255, 0.2),
                inset -2px -2px 0 rgba(0, 0, 0, 0.3);
        }

        .quest-objective::before {
            content: '!';
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: #FD028F;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 12px;
            border-radius: 2px;
            box-shadow: 
                inset -1px -1px 0 rgba(0, 0, 0, 0.3),
                inset 1px 1px 0 rgba(255, 255, 255, 0.3);
        }

        .rewards-list, .requirements-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .rewards-list li, .requirements-list li {
            margin: 5px 0;
            padding-left: 15px;
            position: relative;
            color: #C0FCF8;
        }

        .rewards-list li::before {
            content: '▸';
            position: absolute;
            left: 0;
            color: #FFA849;
        }

        .requirements-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #1DBEB8;
        }

        .quest-buttons {
            padding: 15px 20px;
            background: rgba(0, 0, 0, 0.3);
            border-top: 2px solid #FF4770;
            display: flex;
            gap: 10px;
        }

        .accept-btn, .info-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 6px;
            font-family: 'DNFBitBitv2', 'Courier New', monospace;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* 갤러리 - 픽셀 게임 스타일 */
        .gallery-item {
            flex: 0 0 280px;
            height: 350px;
            scroll-snap-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFE3F3;
            font-size: 1rem;
            text-align: center;
            padding: 2px;
            font-family: 'DungGeunMo', 'Courier New', monospace;
            text-shadow: 0 0 10px rgba(255, 227, 243, 0.6);
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 
                inset 0 0 0 3px #FD028F,
                inset 3px 3px 0 rgba(255, 255, 255, 0.2),
                inset -3px -3px 0 rgba(0, 0, 0, 0.3),
                3px 3px 0 rgba(0, 0, 0, 0.3);
        }

        .gallery-item::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 6px;
            right: 6px;
            bottom: 6px;
            /*border: 1px solid rgba(253, 2, 143, 0.3);*/
            border-radius: 5px;
            pointer-events: none;
        }

        .gallery-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 8px,
                    rgba(253, 2, 143, 0.05) 8px,
                    rgba(253, 2, 143, 0.05) 10px
                );
            border-radius: 8px;
            pointer-events: none;
        }

        .gallery-item:nth-child(1) { 
            background: 
                linear-gradient(135deg, rgba(30, 58, 138, 0.8), rgba(55, 48, 163, 0.8)),
                repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 3px);
        }
        .gallery-item:nth-child(2) { 
            background: 
                linear-gradient(135deg, rgba(49, 46, 129, 0.8), rgba(30, 64, 175, 0.8)),
                repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 3px);
        }
        .gallery-item:nth-child(3) { 
            background: 
                linear-gradient(135deg, rgba(30, 64, 175, 0.8), rgba(37, 99, 235, 0.8)),
                repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 3px);
        }
        .gallery-item:nth-child(4) { 
            background: 
                linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(59, 130, 246, 0.8)),
                repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 3px);
        }

        /* 갤러리 */
        .gallery {
            position: relative;
            margin: 20px 0;
        }

        .gallery-container {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 15px;
            padding: 20px 0;
            -webkit-overflow-scrolling: touch;
        }

        /* 가족 정보 */
        .family-info {
            text-align: center;
            margin: 20px 0;
            position: relative;
            z-index: 10;
        }

        .family-line {
            margin: 10px 0;
            color: #C2EAFF;
            font-size: 1rem;
            font-family: 'DungGeunMo', 'Courier New', monospace;
            text-shadow: 0 0 8px rgba(194, 234, 255, 0.6);
        }

        .bride-groom {
            font-weight: bold;
            color: #FFE3F3;
            font-size: 1.1rem;
            font-family: 'DNFBitBitv2', 'Courier New', monospace;
            text-shadow: 1px 1px 0px #2D0036, 0 0 10px rgba(255, 227, 243, 0.8);
        }

        /* 메시지 폼 - 픽셀 게임 스타일 */
        .message-form {
            background: 
                rgba(30, 58, 138, 0.6),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 4px,
                    rgba(253, 2, 143, 0.05) 4px,
                    rgba(253, 2, 143, 0.05) 6px
                );
            backdrop-filter: blur(5px);
            padding: 20px;
            margin: 20px 0;
            position: relative;
            border-radius: 8px;
            box-shadow: 
                inset 0 0 0 2px rgba(253, 2, 143, 1),
                inset 2px 2px 0 rgba(0, 0, 0, 0.3),
                inset -2px -2px 0 rgba(255, 255, 255, 0.2);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #bfdbfe;
            font-weight: 500;
            font-family: 'DungGeunMo', monospace;
            text-shadow: 0 0 8px rgba(191, 219, 254, 0.6);
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            font-size: 1rem;
            font-family: 'DungGeunMo', 'Courier New', monospace;
            background: 
                rgba(30, 58, 138, 0.8),
                repeating-linear-gradient(
                    0deg,
                    transparent 0px,
                    transparent 1px,
                    rgba(0, 0, 0, 0.1) 1px,
                    rgba(0, 0, 0, 0.1) 2px
                );
            color: #FF4770;
            border: none;
            outline: none;
            border-radius: 6px;
            box-shadow: 
                inset 0 0 0 2px #FD028F,
                inset 2px 2px 0 rgba(0, 0, 0, 0.5),
                inset -2px -2px 0 rgba(255, 255, 255, 0.1);
        }

        .form-group input:focus,
        .form-group textarea:focus {
            box-shadow: 
                inset 0 0 0 2px #FF4770,
                inset 2px 2px 0 rgba(0, 0, 0, 0.5),
                inset -2px -2px 0 rgba(255, 255, 255, 0.1),
                0 0 0 2px rgba(255, 71, 112, 0.3);
        }

        .form-group textarea {
            height: 80px;
            resize: vertical;
        }

        .messages-list {
            margin-top: 20px;
            max-height: 300px;
            overflow-y: auto;
        }

        .message-item {
            background: rgba(30, 64, 175, 0.7);
            backdrop-filter: blur(5px);
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            border: 2px solid rgba(253, 2, 143, 1);
            box-shadow: 
                0 3px 10px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(253, 2, 143, 0.3);
            position: relative;
            overflow: hidden;
        }

        .message-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 10px,
                    rgba(74, 144, 226, 0.05) 10px,
                    rgba(74, 144, 226, 0.05) 11px
                );
            border-radius: 8px;
        }

        .message-author {
            font-weight: bold;
            color: #dbeafe;
            margin-bottom: 5px;
            font-family: 'DNFBitBitv2', 'DungGeunMo', monospace;
            text-shadow: 1px 1px 0px #1e40af, 0 0 8px rgba(219, 234, 254, 0.8);
            position: relative;
            z-index: 10;
        }

        .message-text {
            color: #bfdbfe;
            line-height: 1.6;
            font-family: 'DungGeunMo', monospace;
            text-shadow: 0 0 8px rgba(191, 219, 254, 0.5);
            position: relative;
            z-index: 10;
        }

        /* 지도 섹션 */
        .map-container {
            height: 300px;
            border-radius: 8px;
            margin: 20px 0;
            border: 2px solid #e0e0e0;
            overflow: hidden;
        }

        #naverMap {
            width: 100%;
            height: 100%;
            border-radius: 6px;
        }

        .map-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            justify-content: center;
        }

        .location-info {
            text-align: center;
            margin: 20px 0;
        }

        .venue-name {
            font-size: 1.3rem;
            font-weight: bold;
            color: #dbeafe;
            margin-bottom: 10px;
            font-family: 'DungGeunMo', monospace;
            text-shadow: 2px 2px 0px #1e40af, 0 0 15px rgba(219, 234, 254, 0.8);
        }

        .venue-address {
            color: #93c5fd;
            margin-bottom: 20px;
            font-family: 'DungGeunMo', monospace;
            text-shadow: 0 0 8px rgba(147, 197, 253, 0.6);
        }

        .transport-info {
            text-align: left;
            background: rgba(30, 58, 138, 0.6);
            backdrop-filter: blur(5px);
            padding: 20px;
            border-radius: 8px;
            margin: 15px 0;
            border: 2px solid rgba(253, 2, 143, 1);
            box-shadow: inset 0 1px 0 rgba(253, 2, 143, 0.3);
            position: relative;
            overflow: hidden;
        }

        .transport-info::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 15px,
                    rgba(74, 144, 226, 0.05) 15px,
                    rgba(74, 144, 226, 0.05) 17px
                );
            border-radius: 8px;
        }

        .transport-title {
            font-weight: bold;
            color: #dbeafe;
            margin-bottom: 10px;
            font-family: 'DungGeunMo', monospace;
            text-shadow: 1px 1px 0px #1e40af, 0 0 10px rgba(219, 234, 254, 0.8);
            position: relative;
            z-index: 10;
        }

        .transport-detail {
            color: #bfdbfe;
            margin: 5px 0;
            font-size: 0.95rem;
            line-height: 1.6;
            font-family: 'DungGeunMo', monospace;
            text-shadow: 0 0 8px rgba(191, 219, 254, 0.5);
            position: relative;
            z-index: 10;
        }

        /* 푸터 */
        .footer {
            text-align: center;
            padding: 40px 20px;
            background: rgba(30, 58, 138, 0.8);
            backdrop-filter: blur(5px);
            color: #e2e8f0;
            border-top: 4px solid #FD028F;
            position: relative;
            overflow: visible;
            border-top-left-radius: 10px;  /* 추가 */
            border-top-right-radius: 10px; /* 추가 */
            z-index: 10;
        }


        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 3px,
                    rgba(74, 144, 226, 0.1) 3px,
                    rgba(74, 144, 226, 0.1) 6px
                );
        }

        .footer-message {
            font-size: 1.1rem;
            margin-bottom: 20px;
            font-family: 'DungGeunMo', monospace;
            text-shadow: 0 0 15px rgba(226, 232, 240, 0.8);
            position: relative;
            z-index: 10;
        }

        .footer-date {
            font-size: 1.3rem;
            font-weight: bold;
            font-family: 'DNFBitBitv2', monospace;
            text-shadow: 2px 2px 0px #1e40af, 0 0 20px rgba(226, 232, 240, 0.9);
            position: relative;
            z-index: 10;
            letter-spacing: 2px;
        }

        /* 웨딩 게임 섹션 */
        .game-container {
            position: relative;
            z-index: 10;
        }

        .game-description {
            text-align: center;
            margin-bottom: 20px;
            color: #FFE3F3;
            font-family: 'DungGeunMo', monospace;
            line-height: 1.6;
        }

        .game-description p {
            margin: 8px 0;
            text-shadow: 0 0 10px rgba(255, 227, 243, 0.6);
        }

        .game-frame {
            background: 
                rgba(30, 58, 138, 0.3),
                repeating-linear-gradient(
                    45deg,
                    transparent 0px,
                    transparent 4px,
                    rgba(253, 2, 143, 0.05) 4px,
                    rgba(253, 2, 143, 0.05) 6px
                );
            padding: 15px;
            border-radius: 12px;
            box-shadow: 
                inset 0 0 0 3px rgba(253, 2, 143, 1),
                inset 3px 3px 0 rgba(255, 255, 255, 0.2),
                inset -3px -3px 0 rgba(0, 0, 0, 0.3),
                0 8px 25px rgba(0, 0, 0, 0.4);
            position: relative;
            overflow: hidden;
        }

        .game-frame::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            pointer-events: none;
        }

        .wedding-game {
            border-radius: 8px;
            border: none;
            width: 100%;
            height: 600px;
            background: rgba(0, 0, 0, 0.1);
            box-shadow: 
                inset 0 0 0 2px rgba(0, 0, 0, 0.2),
                0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* 반응형 */
        @media (max-width: 768px) {
            .wedding-game {
                height: 500px;
            }
        }

        @media (max-width: 480px) {
            .couple-names {
                font-size: 1.8rem;
                z-index: 10;
            }
            
            .gallery-item {
                flex: 0 0 250px;
                height: 300px;
            }
        }

        .requirement-images {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding: 10px 0;
            gap: 20px;
        }

        .requirement-icon {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 10;
        }

        .requirement-icon img {
            width: 60px;
            height: 60px;
            object-fit: contain;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 2px 8px rgba(253, 2, 143, 0.3));
            border-radius: 8px;
        }

        .requirement-icon:hover img {
            transform: scale(1.2) rotate(5deg);
            filter: drop-shadow(0 4px 16px rgba(253, 2, 143, 0.6));
        }

        .requirement-icon:nth-child(2):hover img {
            transform: scale(1.2) rotate(-5deg);
        }

        .requirement-icon:nth-child(3):hover img {
            transform: scale(1.2) rotate(3deg);
        }
        /* 얌전한 버튼 스타일 */
        .subtle-btn {
            background: rgba(45, 0, 54, 0.8);
            color: #bfdbfe;
            padding: 8px 16px;
            border: 1px solid rgba(191, 219, 254, 0.3);
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'DungGeunMo', monospace;
            font-weight: normal;
            text-shadow: none;
            box-shadow: 
                0 1px 3px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .subtle-btn:hover {
            background: rgba(30, 58, 138, 0.9);
            border-color: rgba(191, 219, 254, 0.5);
            color: #dbeafe;
            transform: translateY(-1px);
            box-shadow: 
                0 2px 6px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        /* TOP 버튼 전용 */
        .subtle-btn.top-btn {
            min-width: 60px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 지도 버튼 전용 */
        .subtle-btn.map-btn {
            padding: 10px 20px;
            font-size: 0.95rem;
        }

        /* ===== 🖼️🖼️🖼️🖼️👇🏻👇🏻Gallery Overlay 시작👇🏻👇🏻🖼️🖼️🖼️🖼️===== */
        /* ===== 🖼️🖼️🖼️🖼️Gallery Overlay 🖼️🖼️🖼️🖼️===== */
        /* ===== 🖼️🖼️🖼️🖼️Gallery Overlay 🖼️🖼️🖼️🖼️===== */

        .gallery-enter-cta {
        display:flex; justify-content:center; margin-bottom:18px;
        }
        .gallery-enter-btn { font-size:1.05rem; padding:14px 28px; }

            /* ===== Gallery Overlay: full-bleed BG (nav까지 전부 덮기) ===== */
            .gallery-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;         /* nav보다 확실히 높게 */
            display: none;
            }

            .gallery-overlay.show { display: block; }

            /* 배경 이미지 + 블러 (의도: '불투명 배경 이미지'처럼 보이게) */
            .gallery-overlay::before {
            content: "";
            position: fixed;
            inset: 0;
            background:
                url("https://firebasestorage.googleapis.com/v0/b/hwsghouse.firebasestorage.app/o/images%2Fbg_castle.png?alt=media")
                center / cover no-repeat;
            filter: blur(20px) saturate(110%); /* '20%' 느낌 -> CSS는 px 단위 */
            transform: scale(1.06);            /* 블러 가장자리 클리핑 방지 */
            will-change: transform, filter;
            z-index: 0;
            }

            /* 어두운 검은색 그라디언트 오버레이 */
            .gallery-overlay::after {
            content: "";
            position: fixed;
            inset: 0;
            background: linear-gradient(
                to bottom,
                rgba(0,0,0,0.65),
                rgba(0,0,0,0.85)
            );
            z-index: 1;
            }

            /* 실제 오버레이 UI는 배경 위로 */
            .gallery-overlay .overlay-inner {
            position: relative;
            z-index: 2;
            }

            /* 필요하면 기존 backdrop-filter 제거(중복 블러 방지) */
            /* .gallery-overlay { backdrop-filter: none; } */
                .overlay-inner {
                position: absolute; inset: 0; padding: 20px 22px 24px; max-width: 1400px; margin: 0 auto;
                }
               .overlay-header{
                    position: sticky; top: 10px;
                    display: grid;
                    grid-template-columns: 1fr auto 1fr; /* 좌 여백 | 제목 | 우 여백 */
                    align-items: center;
                    gap: 10px;
                    z-index: 1;
                    }

                .overlay-mode-btn { opacity:.9 }
                .overlay-mode-btn.is-active { filter: drop-shadow(0 0 8px rgba(255,227,243,.8)); }
                .overlay-close-btn { font-weight:700 }


                .overlay-body { height: calc(100vh - 100px); overflow:auto; }
                .overlay-loading {
                display:flex; align-items:center; justify-content:center; gap:12px; color:#FFE3F3; height: 40vh;
                }
                .overlay-header .section-title{ grid-column: 2; justify-self: center; margin: 0; }
                .overlay-header .overlay-right{ grid-column: 3; justify-self: end; }
   

                /* 그리드 */
                .overlay-grid {
                display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px;
                }
                .overlay-card {
                aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; cursor: pointer;
                background: rgba(30,58,138,.7);
                box-shadow: inset 0 0 0 3px rgba(253,2,143,.5), 0 8px 25px rgba(0,0,0,.35);
                transition: transform .2s ease, box-shadow .2s ease;
                }
                .overlay-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 3px rgba(253,2,143,.8), 0 12px 28px rgba(0,0,0,.55); }
                .overlay-card img {
                width:100%; height:100%; object-fit: cover; /* 얼굴 짤림 최소화용 포지션 상단 가중치 */
                object-position: center 30%; transition: transform .25s ease;
                }
                .overlay-card:hover img { transform: scale(1.03); }


            /* ===== 🖼️🖼️🖼️🖼️ 슬라이드쇼 오버레이 CSS ===== */
        .slideshow-overlay {
            position: fixed;
            inset: 0;
            z-index: 100000;
            display: none;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
        }

        .slideshow-overlay.show {
            display: flex;
            flex-direction: column;
        }

        .slideshow-inner {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .slideshow-header {
            display: flex;
            justify-content: flex-end;
            padding: 20px;
            z-index: 100001;
        }

        .slideshow-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 0 20px;
        }

        .slideshow-image-container {
            position: relative;
            max-width: 90%;
            max-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .slideshow-image {
            max-width: 100%;
            max-height: 80vh;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 4px 30px rgba(253, 2, 143, 0.3);
        }

        .slideshow-counter {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(45, 0, 54, 0.9);
            color: #FFE3F3;
            padding: 8px 16px;
            border-radius: 20px;
            font-family: 'DungGeunMo', monospace;
            font-size: 0.9rem;
            border: 1px solid #FD028F;
        }

        .slideshow-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(45, 0, 54, 0.9);
            color: #FFE3F3;
            border: 2px solid #FD028F;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            font-family: 'DungGeunMo', monospace;
            transition: all 0.3s ease;
            z-index: 100001;
        }

        .slideshow-nav:hover {
            background: rgba(253, 2, 143, 0.8);
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 0 15px rgba(253, 2, 143, 0.6);
        }

        .slideshow-prev {
            left: 20px;
        }

        .slideshow-next {
            right: 20px;
        }

        /* 모바일 슬라이드쇼 최적화 */
        @media (max-width: 768px) {
            .slideshow-nav {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }

            .slideshow-prev {
                left: 10px;
            }

            .slideshow-next {
                right: 10px;
            }

            .slideshow-image-container {
                max-width: 95%;
            }

            .slideshow-counter {
                bottom: -30px;
                font-size: 0.8rem;
                padding: 6px 12px;
            }
        }

                /* 모바일 최적화 */
                @media (max-width: 768px) {
                .overlay-body { height: calc(100vh - 90px); }
                .overlay-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
                }
                /* PC 최적화 */
                 @media (min-width: 1024px) {
                .gallery-overlay .overlay-inner {
                    max-width: 70%;
                    margin: 0 auto;
                }
            }


        /* ===== 🖼️🖼️🖼️🖼️☝🏻☝🏻Gallery Overlay 끗 ☝🏻☝🏻☝🏻🖼️🖼️🖼️🖼️===== */
        /* ===== 🖼️🖼️🖼️🖼️Gallery Overlay🖼️🖼️🖼️🖼️===== */
        /* ===== 🖼️🖼️🖼️🖼️Gallery Overlay🖼️🖼️🖼️🖼️===== */

/* ===== 스크래치 카드 ===== */
    .scratch-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 10px;
    padding: 40px;

    }

    .scratch-card {
    background:
        rgba(30,58,138,0.7),
        repeating-linear-gradient(45deg, transparent 0, transparent 8px, rgba(253,2,143,.08) 8px, rgba(253,2,143,.08) 10px);
    border-radius: 36px;
    box-shadow:
        inset 0 0 0 3px rgba(253, 2, 143, .6),
        0 8px 24px rgba(0,0,0,.35);
    overflow: hidden;
    padding: 40px;
    }

    .scratch-body { padding: 16px; }

    .scratch-label {
    font-family: 'DNFBitBitv2','DungGeunMo',monospace;
    color: #FFE3F3;
    text-shadow: 2px 2px 0 #2D0036, 0 0 12px rgba(255,227,243,.7);
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-align: center;

    }

    /* 계좌 스크래치 줄바꿈/버튼 보호 */
    
    .scratch-copy  { flex: 0 0 auto; }

    /* 같은 줄 정렬 + 줄바꿈 방지 */
    .scratch-strip{
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;            /* ✅ 줄바꿈 허용 */
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(45,0,54,.85);
    box-shadow: inset 0 0 0 2px #FD028F;
    overflow: hidden;
    }

    /* 은행명은 붙여두고, 숫자는 줄바꿈 허용 */
    .scratch-bank  { white-space: nowrap; }
    .scratch-number{
    white-space: normal;        /* ✅ 숫자 줄바꿈 허용 */
    overflow-wrap: anywhere;    /* ✅ 길면 다음 줄로 */
    flex: 1 1 200px;            /* ✅ 칸 늘어나며 감싸기 */
    min-width: 0;
    }


    /* 캔버스(스크래치 덮개) */
    .scratch-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    border-radius: 8px;
    }

    /* 힌트 텍스트 */
    .scratch-hint {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'DungGeunMo';
    color: #FFE3F3;
    text-shadow: 0 0 10px rgba(255,227,243,.7);
    pointer-events: none;
    }

    .scratch-card.revealed .scratch-canvas,
    .scratch-card.revealed .scratch-hint {
    display: none;
    }
        /* 작게, 번호 옆에 붙는 복사 버튼 */
     .scratch-copy{
        margin-left: 4px;           /* 6px → 4px */
        width: 16px; height: 16px;  /* 20→16 */
        font-size: 10px;            /* 11→10 */
        line-height: 1;
        display: inline-flex; align-items:center; justify-content:center;
        border-radius: 6px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(253,2,143,.5);
        color: #FFE3F3;
        opacity: 0; pointer-events: none; /* 긁기 전에는 숨김 */
        transition: transform .15s ease, opacity .2s ease;
        cursor: pointer;
    }

    /* 커서 근처 토스트 */
    .scratch-copied--cursor{
    position: fixed;            /* 화면 좌표 기준 */
    right: auto; bottom: auto;
    transform: translate(12px, -18px); /* 커서 오른쪽 위 살짝 */
    padding: 2px 6px;
    font-size: 11px; line-height: 1.3;
    color: #FFE3F3;
    background: rgba(45,0,54,.95);
    border: 1px solid #FD028F; border-radius: 6px;
    pointer-events: none; z-index: 10000;
    animation: scratchToast 1s ease-out forwards; /* 기존 키프레임 재사용 */
    }
        /* 긁어서 공개되면 나타나기 */
    .scratch-card.revealed .scratch-copy{ opacity:1; pointer-events:auto; }
    /* 더 작게 하고 싶을 때(선택) */
    .scratch-copy--mini {
    width: 16px; height: 16px;  /* 20→16 */
    font-size: 10px;            /* 11→10 */
    }
    .scratch-copy { margin-left: 4px; } /* 6px → 4px 더 촘촘히 */
    /* 긁어서 공개되면 버튼도 나타나게 */
    .scratch-card.revealed .scratch-copy {
    opacity: 1; pointer-events: auto;
    }
   
    .scratch-copy:hover { transform: translateY(-1px) scale(1.05); }

    /* 복사 토스트: 'copied' 1초 표시 */
    .scratch-copied {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 6px); /* 스트립 위로 */
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.3;
    color: #FFE3F3;
    background: rgba(45,0,54,.95);
    border: 1px solid #FD028F;
    border-radius: 6px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transform: translateY(6px);
    animation: scratchToast 1s ease-out forwards;
    }
    /* 긁어서 공개되면 + 긁는 중에도 복사 버튼 보이기 */
    .scratch-card.revealed .scratch-copy,
    .scratch-card.scratching .scratch-copy {
    opacity: 1;
    pointer-events: auto;
    }

    @keyframes scratchToast {
    0%   { opacity: 0; transform: translateY(6px); }
    10%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-4px); }
    }

    /* 모바일: 손가락이 가리니까 더 위로 띄우기 & 톡톡히 보이게 */
    @media (max-width: 768px){
    .scratch-copied--cursor{
        transform: translate(14px, -42px); /* 더 위 */
        font-size: 12px;
    }
    .scratch-copy.scratch-copy--mini{
        width: 18px; height: 18px; font-size: 11px;
    }
    }
  


    /* ===== 층별 안내 ===== */
.floor-guide{margin-top:24px;padding:16px;border-radius:12px;background:rgba(45,0,54,.65);box-shadow:0 6px 18px rgba(0,0,0,.25);backdrop-filter:blur(4px)}
.floor-guide-title{font-family:'DNFBitBitv2','DungGeunMo',sans-serif;font-size:1.2rem;color:#FFE3F3;margin-bottom:10px}
.floor-items{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:768px){.floor-items{grid-template-columns:1fr}}
.floor-item{display:flex;flex-direction:column;gap:8px}
.floor-caption{color:#C2EAFF;font-size:.95rem}
.floor-open{appearance:none;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;padding:10px 12px;border-radius:10px}
.floor-open:active{transform:scale(.98)}
.floor-tip{margin-top:8px;font-size:.85rem;color:#FFAFFF;opacity:.85}

/* ===== 핀치줌 오버레이 ===== */
.pz-overlay{position:fixed;inset:0;display:none;z-index:10000}
.pz-overlay.show{display:block}
.pz-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.pz-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,960px);height:min(100vh,86vh);display:flex;flex-direction:column;background:rgba(22,10,35,.95);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pz-sheet-header,.pz-sheet-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
.pz-title{font-size:1rem;color:#FFE3F3}
.pz-close{appearance:none;background:transparent;border:0;color:#fff;font-size:20px;line-height:1;opacity:.9}
.pz-canvas{position:relative;flex:1;overflow:hidden;touch-action:none;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}
.pz-canvas img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);transform-origin:center center;max-width:none;height:100%;pointer-events:none;user-select:none}
.pz-ctrl{appearance:none;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;padding:6px 10px;border-radius:8px;margin-left:6px}
@media (max-width:768px){.pz-sheet{width:100vw;height:100vh;border-radius:0}}

/* 층별 안내 썸네일 */
.floor-thumb{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* 버튼 자체를 카드처럼 보이게 */
.floor-open{
  padding:0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
}
.floor-open:focus-visible{ outline:2px solid #FD028F; outline-offset:2px; }

/* --- [썸네일 위쪽 안 잘리게] --- */
.floor-thumb{
  object-fit: cover;          /* 카드 비율 유지하며 채우기 */
  object-position: top center;/* 위를 기준으로 크롭 → 상단이 보장됨 */
}

/* --- [캡션 텍스트 가운데 정렬] --- */
.floor-caption{
  text-align: center;         /* "예식 · 중성전 3층" 중앙정렬 */
}

/* --- [오버레이 밝은 테마] --- */
.pz-backdrop{
  background: rgba(255,255,255,0.65); /* 뒤 어둡던 백드롭 → 밝게 */
}

.pz-sheet{
  background: #ffffff;                /* 시트 밝은 배경 */
  color: #111;                        /* 본문 글자 어둡게 */
  border: 1px solid rgba(0,0,0,.12);
}

.pz-title{
  color: #222; 
  text-align: center;                 /* 오버레이 상단 제목도 중앙 */
  flex: 1;
}

.pz-close{
  color: #222;                        /* 닫기 버튼 색 밝은 테마에 맞춤 */
}

.pz-canvas{
  background: #ffffff;                /* 이미지 캔버스 바닥도 흰색 */
}

/* 컨트롤 버튼도 밝은 테마 */
.pz-ctrl{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.15);
  color: #111;
}


/* == Guest Upload == */
.guest-upload { 
  background: rgba(45,0,54,.7);
  border: 2px solid #FD028F;
  border-radius: 16px;
  padding: 16px;
  color: #FFE3F3;
}
.guest-upload__hint { margin: 0 0 12px; color:#C2EAFF; }
.guest-upload__controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.guest-upload__input {
  appearance:none; background:#2D0036; color:#FFE3F3; border:1px solid #FD028F;
  padding:10px; border-radius:10px; max-width:100%;
}
.guest-upload__block {
  margin-top:10px; padding:12px; border-radius:12px;
  background:#2D0036; border:1px dashed #FD028F; color:#FFD4EA;
}
.guest-upload__list { margin-top:16px; display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 560px) {
  .guest-upload__list { grid-template-columns:1fr 1fr; }
}
.upload-item {
  border:1px solid rgba(253,2,143,.35); border-radius:12px; padding:10px; background:rgba(255,255,255,.05);
}
.upload-item__row { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.upload-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
.upload-size { font-size:12px; color:#C2EAFF; }
.upload-bar { height:8px; background:rgba(255,255,255,.15); border-radius:999px; overflow:hidden; margin-top:8px; }
.upload-bar > span { display:block; height:100%; width:0%; background:linear-gradient(90deg,#FD028F,#60a5fa,#34d399); transition:width .25s ease; }
.upload-done { color:#34d399; font-size:13px; }
.upload-error { color:#ff6b6b; font-size:13px; }

/* === Memorized Memories (min CSS) === */
.mm-wrap { margin-top: 16px; }
.mm-title { font-size: 1.1rem; margin: 0 0 8px; color:#C2EAFF; }

.mm-rail {
  display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
}
.mm-rail::-webkit-scrollbar { height: 8px; }
.mm-rail::-webkit-scrollbar-thumb { background: #FFE3F3; border-radius: 4px; }

.mm-card {
  flex: 0 0 auto; width: 120px; height: 120px; border-radius: 8px;
  overflow: hidden; border: 1px solid rgba(253,2,143,.35); background: rgba(255,255,255,.06);
  padding: 0; cursor: pointer; scroll-snap-align: start;
}
.mm-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Overlay */
.mm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: grid; place-items: center;
}
.mm-overlay[hidden] { display: none; }
.mm-overlay img {
  max-width: min(92vw, 1100px); max-height: 82vh; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.2) inset;
}

.mm-close, .mm-prev, .mm-next {
  position: absolute; border: 0; background: rgba(45,0,54,.9); color:#FFE3F3;
  padding: 8px 10px; border-radius: 8px; font-size: 18px; cursor: pointer;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.4), inset 1px 1px 0 rgba(255,255,255,.2);
}
.mm-close { top: 16px; right: 16px; }
.mm-prev  { left: 12px; top: 50%; transform: translateY(-50%); }
.mm-next  { right: 12px; top: 50%; transform: translateY(-50%); }

@media (min-width: 560px) {
  .mm-card { width: 150px; height: 150px; }
}
@media (max-width: 768px){
  .mm-rail{
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 가로 스크롤 */
    padding-bottom: 12px;
  }
  .mm-card{ width:110px; height:110px; }
}

@media (max-width: 768px){
  #giftSection .scratch-list{
    display: flex;               /* 그리드 대신 세로 스택 */
    flex-direction: column;
    align-items: center;         /* 가운데 정렬 */
    padding: 16px;               /* 모바일 여백 축소 */
  }
  #giftSection .scratch-card{
    width: 92%;
    max-width: 380px;            /* 한 장씩 보기 */
    padding: 24px;               /* 카드 내부 여백 소폭 축소(선택) */
  }
}

.mm-overlay img { position: relative; z-index: 1; }  /* 이미지 한 층 올림 */
.mm-prev, .mm-next, .mm-close { z-index: 2; }        /* 버튼이 이미지보다 위 */
.mm-prev, .mm-next, .mm-close { touch-action: manipulation; } /* 모바일 클릭 반응 개선 */