@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');

/* --- 공통 스타일 --- */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f3f7f8;
    overflow: hidden; user-select: none;
}

#app { 
    width: 100vw; height: 100vh; position: relative; 
    /* 각 씬마다 배경을 다르게 주었으므로 전체 배경 이미지는 제거했습니다 */
}

.scene {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease-in-out;
    background-color: transparent; 
}
.scene.active { opacity: 1; pointer-events: all; z-index: 10; }

/* 다른 씬들은 내용을 가리지 않도록 고유의 불투명한 배경색 유지 */
#scene-gacha { background-color: #0d1b2a; }
#scene-structure { 
    background-image: url('image/13.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#scene-operation { 
    background-image: url('8.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#scene-reward { background-color: #0f172a; }

.ba-btn {
    background: #1288FF; color: white; border: none; border-radius: 4px;
    padding: 12px 24px; font-size: 20px; font-weight: 900; cursor: pointer;
    box-shadow: 0 4px 0 #0056b3; transform: skewX(-5deg); transition: all 0.1s;
}
.ba-btn:active { box-shadow: 0 0 0 #0056b3; transform: skewX(-5deg) translateY(4px); }

#home-btn {
    position: absolute; top: 20px; right: 20px; z-index: 1000;
    display: none; background: #334155; box-shadow: 0 4px 0 #1e293b;
}

/* --- 1. 시작 화면 (05.jpg 배경 적용) --- */
#scene-start { 
    background-image: url('image/05.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.game-title { 
    font-size: 80px; font-weight: 900; color: #1288FF; 
    text-shadow: 4px 4px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; 
    margin-bottom: 50px; transform: skewX(-5deg); 
}
.touch-to-start { 
    font-size: 26px; font-weight: 900; color: #ffffff; 
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    animation: blink 1.5s infinite; cursor: pointer; 
    background: rgba(0,0,0,0.3); padding: 15px 40px; border-radius: 30px;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- 2. 목차 화면 (-_2_PC.webp 배경 적용) --- */
#scene-missions {
    background-image: url('image/-_2_PC.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mission-header { 
    position: absolute; top: 30px; left: 30px; 
    background: rgba(255, 255, 255, 0.9);
    border-radius: 40px; padding: 8px 30px 8px 10px;
    display: flex; align-items: center; gap: 15px;
    font-size: 24px; font-weight: 900; color: #1e293b; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.mission-header::before {
    content: '00';
    background: #5c6c80; color: white; border-radius: 50%;
    width: 45px; height: 45px; display: flex; 
    justify-content: center; align-items: center; font-size: 18px;
}

.mission-list { 
    position: absolute; right: 5%; top: 15%; /* 우측 정렬 */
    display: flex; flex-direction: column; gap: 15px; width: 45%; max-width: 550px; 
}
.mission-item { 
    background: rgba(240, 248, 255, 0.85); /* 반투명 화이트/블루 */
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px; padding: 20px 25px; 
    font-size: 22px; font-weight: 900; color: #1e293b; cursor: pointer; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
    display: flex; justify-content: space-between; align-items: center; 
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    backdrop-filter: blur(8px); /* 블러 처리로 유리 느낌 강조 */
}
.mission-item:hover { 
    transform: translateX(-15px); /* 우측에 있으므로 마우스 오버 시 왼쪽으로 튀어나오게 */
    background: rgba(255, 255, 255, 0.95); border-color: #1288FF; 
}
.mission-item.cleared { 
    border-left: 
    px solid #1288FF; /* 클리어 시 왼쪽 띠 포인트 */
    background: rgba(255, 255, 255, 0.95);
}
.status-badge { 
    font-size: 16px; padding: 6px 18px; border-radius: 20px; 
    background: #cbd5e1; color: white; white-space: nowrap;
}
.status-badge.cleared { background: #1288FF; box-shadow: 0 0 10px rgba(18,136,255,0.4); }

/* --- 3. 모집(가챠) 상점 씬 (실제 UI 기반) --- */
.gacha-layer { position: absolute; top:0; left:0; width: 100%; height: 100%; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.gacha-layer.active { opacity: 1; pointer-events: all; }
#gacha-shop { background: #f1f5f9; }

/* 가챠 상단 바 */
.gacha-top-bar { position: absolute; top: 0; left: 0; width: 100%; height: 50px; background: white; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 50; }
.top-bar-left { display: flex; align-items: center; gap: 20px; }
.gacha-home-btn { background: #1e293b; color: white; border: none; padding: 5px 15px; border-radius: 20px 0 20px 0; font-weight: 900; font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 5px; box-shadow: 0 2px 0 #0f172a; }
.gacha-home-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #0f172a; }
.gacha-top-title { font-size: 20px; font-weight: 900; color: #1e293b; }
.top-bar-right { display: flex; gap: 30px; font-weight: 900; font-size: 16px; color: #334155; }

/* 메인 레이아웃 (좌/우 분할) */
.gacha-main-layout { display: flex; width: 100%; height: 100%; padding-top: 50px; box-sizing: border-box; }

/* 좌측 배너 */
.gacha-left-panel { flex: 5.5; background: linear-gradient(135deg, #1e3a8a, #3b82f6); position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; box-sizing: border-box; }
/* 만약 좌측에 이미지를 넣고 싶다면 위 background를 background-image: url('이미지명.jpg'); background-size: cover; 로 변경하세요 */
.gacha-left-text h2 { color: white; font-size: 48px; font-weight: 900; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); margin: 0; line-height: 1.2; transform: skewX(-5deg); }

/* 우측 정보 패널 */
.gacha-right-panel { flex: 4.5; background: #e2e8f0; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; gap: 10px; position: relative; }

/* 우측 탭 */
.gacha-tabs { display: flex; gap: 10px; }
.gacha-tab { flex: 1; background: white; padding: 10px; text-align: center; font-weight: 900; color: #64748b; border-radius: 8px 8px 0 0; cursor: pointer; border-top: 4px solid transparent; box-shadow: 0 -2px 5px rgba(0,0,0,0.05); }
.gacha-tab.active { background: white; color: #1e293b; border-top: 4px solid #1288FF; }
.tab-badge { font-size: 12px; padding: 2px 6px; border-radius: 4px; background: #ffaa00; color: #111; margin-right: 5px; }

/* 정보 카드 (하얀색 박스) */
.gacha-info-card { flex: 1; background: white; border-top: 3px solid #1288FF; padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.gacha-period { font-size: 14px; color: #64748b; font-weight: 700; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 10px; }
.gacha-info-title { font-size: 32px; font-weight: 900; color: #1e293b; margin: 0 0 5px 0; }
.gacha-prob-up { color: #1288FF; font-weight: 900; font-size: 16px; margin-bottom: 15px; }
.gacha-info-desc { font-size: 15px; color: #334155; line-height: 1.6; font-weight: 700; flex: 1; }

/* 뽑기 버튼 그룹 */
.gacha-btn-group { display: flex; gap: 15px; margin-top: auto; justify-content: center; padding-bottom: 10px;}
.gacha-pull-btn { flex: 1; border: none; padding: 0; background: transparent; cursor: pointer; transform: skewX(-5deg); transition: transform 0.1s; }
.gacha-pull-btn:active { transform: skewX(-5deg) translateY(3px); }
.pull-btn-inner { width: 100%; height: 80px; border-radius: 8px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 rgba(0,0,0,0.2); }

/* 파란색 버튼 (1회 모집) */
.blue-pull .pull-btn-inner { background: linear-gradient(135deg, #38bdf8, #0ea5e9); box-shadow: 0 6px 0 #0284c7; }
/* 노란색 버튼 (10회 모집) */
.yellow-pull .pull-btn-inner { background: linear-gradient(135deg, #fde047, #f59e0b); box-shadow: 0 6px 0 #d97706; }

.pull-top { display: flex; align-items: center; gap: 10px; transform: skewX(5deg); /* 글씨는 똑바로 */ color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.mail-icon { width: 40px; height: 40px; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3)); }
.pull-text { display: flex; flex-direction: column; text-align: left; }
.pull-type { font-size: 24px; font-weight: 900; line-height: 1; }
.pull-count { font-size: 14px; font-weight: 700; }
.yellow-pull .pull-top { color: #1e293b; text-shadow: none; }

/* 하단 모집 포인트 바 */
.gacha-point-bar { height: 50px; background: white; border-radius: 25px; display: flex; align-items: center; justify-content: space-between; padding: 0 5px 0 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.point-label { color: #1288FF; font-weight: 900; font-size: 16px; font-style: italic; }
.point-value { font-size: 24px; font-weight: 900; color: #1e293b; }
.point-select-btn { background: #e2e8f0; color: #64748b; border: none; height: 40px; padding: 0 20px; border-radius: 20px; font-weight: 900; font-size: 16px; cursor: pointer; }

/* --- 4. 가챠 연출 (폴더 애니메이션 부분 - 기존 유지) --- */
.folder { width: 300px; height: 400px; background-color: #1a9cff; border-radius: 10px; position: relative; transform: translateY(100vh); margin: auto; }
.folder.animating { animation: folderUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(5); font-size: 80px; color: red; font-weight: 900; border: 10px solid red; padding: 10px 20px; border-radius: 20px; opacity: 0; }
.stamp.animating { animation: stampBang 0.5s 0.8s cubic-bezier(0.1, 2, 0.5, 1) forwards; }
#flash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: white; opacity: 0; pointer-events: none; }
.char-image-box { position: absolute; bottom: 0; left: 10%; width: 400px; height: 80vh; background: #ccc; border-radius: 20px 20px 0 0; transform: translateX(-50px); opacity: 0; display: flex; justify-content: center; align-items: center; font-size: 40px; color: #fff; font-weight: bold; }
.char-image-box.animating { animation: slideRight 0.6s ease-out forwards; }
.info-panel { position: absolute; right: 5%; top: 20%; width: 500px; background: rgba(255, 255, 255, 0.9); border-left: 10px solid #1a9cff; padding: 40px; transform: translateX(50px); opacity: 0; box-shadow: 0 20px 50px rgba(0,0,0,0.5); clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }
.info-panel.animating { animation: slideLeft 0.6s 0.2s ease-out forwards; }
.tier-text { font-size: 72px; font-weight: 900; font-style: italic; margin-top: -20px; color: #ffaa00; }
.name-text { font-size: 48px; font-weight: 900; color: #111; }
.role-badge { background-color: #111; color: white; display: inline-block; padding: 5px 15px; font-size: 20px; font-weight: bold; margin-bottom: 20px; }
.desc-text { font-size: 24px; color: #444; line-height: 1.5; font-weight: 700; }

@keyframes folderUp { to { transform: translateY(0); } }
@keyframes stampBang { 0% { opacity: 0; transform: translate(-50%, -50%) scale(5); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-15deg); } }
@keyframes slideRight { to { opacity: 1; transform: translateX(0); } }
@keyframes slideLeft { to { opacity: 1; transform: translateX(0); } }
/* --- 4. 프로젝트 소개 & 시연 --- */
.op-layer { position: absolute; top:0; left:0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.op-layer.active { opacity: 1; pointer-events: all; z-index: 10; }
.briefing-box { 
    background: rgba(255, 255, 255, 0.85); /* 상자 전체를 뽀얗게 */
    backdrop-filter: blur(12px); /* 배경 블러 처리 */
    -webkit-backdrop-filter: blur(12px); 
    width: 70%; 
    height: 60%; 
    border-radius: 20px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    border: 4px solid #1288FF; 
}
.briefing-header { 
    background: #1288FF; 
    color: white; 
    padding: 20px; 
    font-size: 28px; 
    font-weight: 900; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.briefing-content { display: flex; padding: 30px; gap: 30px; flex: 1; }
.briefing-text { 
    flex: 1; 
    font-size: 20px; 
    line-height: 1.6; 
    color: #111; /* 진한 색상으로 가독성 확보 */
    font-weight: 700; 
    background: transparent; /* 개별 텍스트 배경 제거 */
    padding: 0; 
}
.warning-overlay { background: rgba(200, 0, 0, 0.95); flex-direction: column; z-index: 50; }
.warning-stripe { width: 100%; height: 80px; background: repeating-linear-gradient(45deg, #000, #000 20px, #ffdd00 20px, #ffdd00 40px); opacity: 0.8; position: absolute; }
.warning-text { font-size: 120px; font-weight: 900; color: white; letter-spacing: 15px; text-shadow: 0 0 30px #ff0000; animation: shake 0.4s infinite; z-index: 2; }
@keyframes shake { 0% { transform: translate(3px, 1px) rotate(0deg); } 25% { transform: translate(-3px, -2px) rotate(-1deg); } 50% { transform: translate(1px, 3px) rotate(1deg); } 75% { transform: translate(-1px, -1px) rotate(-1deg); } 100% { transform: translate(2px, 2px) rotate(0deg); } }
.boss-hp-bar { width: 80%; background: rgba(0,0,0,0.8); border: 3px solid #ff3b30; border-radius: 6px; padding: 12px; margin-bottom: 20px; position: relative; z-index: 100; }
.boss-name-tag { display: flex; justify-content: space-between; color: white; font-weight: 900; font-size: 18px; margin-bottom: 5px; }
.boss-title { color: #ff3b30; }
.hp-track { height: 18px; background: #222; border-radius: 4px; overflow: hidden; border: 1px solid #444; }
.hp-fill { height: 100%; background: linear-gradient(90deg, #ff3b30, #ff9500); width: 100%; transition: width 0.5s ease; }
.hp-count { position: absolute; right: 20px; bottom: 8px; color: #ffd900; font-weight: 900; font-size: 20px; }
.video-wrapper { width: 80%; height: 50%; background: #000; border: 4px solid #334155; box-shadow: 0 10px 30px rgba(0,0,0,0.8); border-radius: 10px; overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; color: #555; font-size: 24px; font-weight: bold;}
.battle-footer { width: 80%; display: flex; justify-content: space-between; align-items: center; margin-top: 25px; z-index: 100; }
.cost-bar { width: 250px; height: 35px; background: #222; border: 3px solid #1288FF; border-radius: 20px; position: relative; overflow: hidden; display: flex; align-items: center; padding-left: 20px; }
.cost-fill { position: absolute; top: 0; left: 0; height: 100%; background: #1288FF; width: 0%; animation: chargeCost 4s linear infinite; }
.cost-text { color: white; font-weight: 900; font-size: 18px; z-index: 10; text-shadow: 1px 1px 3px #000; }
@keyframes chargeCost { 0% { width: 0%; } 100% { width: 100%; } }
.skill-btn { background: #ff7597 !important; box-shadow: 0 4px 0 #d04463 !important; display: flex; flex-direction: column; align-items: center; padding: 8px 30px !important; }
.skill-name { font-size: 14px; font-weight: bold; }
.skill-cost { background: #fff; color: #ff7597; border-radius: 50%; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 900; margin-top: 3px; }
.clear-btn { background: #4cd964 !important; box-shadow: 0 4px 0 #28a745 !important; }

/* --- 5. 프로젝트 구조 --- */
.equip-layout { display: flex; width: 80%; height: 70%; margin-top: 50px; gap: 30px; }
.equip-menu { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.equip-tab { background: #fff; border: 2px solid #e2e8f0; padding: 20px; font-size: 22px; font-weight: 900; color: #64748b; cursor: pointer; border-radius: 10px; transition: all 0.2s; display: flex; align-items: center; gap: 15px; }
.equip-tab.active { background: #1288FF; color: white; border-color: #1288FF; transform: scale(1.05) translateX(10px); box-shadow: 0 10px 20px rgba(18,136,255,0.3); }
.equip-tab-icon { width: 40px; height: 40px; background: rgba(0,0,0,0.1); border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 14px;}
.equip-detail { flex: 2; background: #fff; border: 4px solid #1e293b; border-radius: 15px; padding: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.05); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.detail-title { font-size: 40px; font-weight: 900; color: #1e293b; margin-bottom: 20px; border-bottom: 3px solid #cbd5e1; padding-bottom: 10px; }
.detail-desc { font-size: 20px; color: #475569; line-height: 1.8; font-weight: 700; flex: 1; }
.detail-desc ul { padding-left: 20px; }
.detail-desc li { margin-bottom: 10px; }

/* --- 6. 실생활 활용 방안 --- */
.mc-banner { width: 100%; background: #1288FF; padding: 40px 0; text-align: center; transform: scaleY(0); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); margin-top: -100px; }
.mc-banner.show { transform: scaleY(1); }
.mc-text { font-size: 90px; font-style: italic; font-weight: 900; color: white; text-shadow: 5px 5px 0 #0056b3; letter-spacing: 5px; }
.stars { display: flex; justify-content: center; gap: 30px; margin-top: 30px; opacity: 0; transition: opacity 0.5s 0.3s, transform 0.5s 0.3s; transform: translateY(30px); }
.stars.show { opacity: 1; transform: translateY(0); }
.star { font-size: 80px; color: #ffd900; text-shadow: 0 0 30px rgba(255,217,0,0.8); animation: starPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards; }
.star:nth-child(2) { animation-delay: 0.5s; } .star:nth-child(3) { animation-delay: 0.7s; }
@keyframes starPop { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
.rewards-box { display: flex; gap: 40px; margin-top: 60px; opacity: 0; transition: opacity 0.5s 1s; }
.rewards-box.show { opacity: 1; }
.reward-item { background: #1e293b; border: 3px solid #334155; padding: 30px; border-radius: 15px; color: white; text-align: center; width: 180px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.reward-item h3 { color: #1288FF; font-size: 32px; margin: 15px 0 0 0; text-shadow: 0 0 10px rgba(18,136,255,0.5); }
/* --- 목차 화면에서 메인(타이틀)으로 가는 버튼 스타일 --- */
.back-to-start-btn {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 100;
    background: #334155 !important; /* 블루 아카이브 서브 UI용 차분한 그레이 색상 */
    box-shadow: 0 4px 0 #1e293b !important;
    font-size: 18px !important;
    padding: 10px 22px !important;
    border-radius: 4px;
}
.back-to-start-btn:active {
    box-shadow: 0 0 0 #1e293b !important;
    transform: skewX(-5deg) translateY(4px) !important;
}

/* --- 스토리 씬 전용 UI --- */
#scene-story {
    background-color: #000;
}

#story-ui {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%; /* 화면 하단 35% 차지 */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px 10%;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 10;
}

#story-name {
    display: inline-block;
    align-self: flex-start;
    font-size: 28px;
    font-weight: 900;
    color: white;
    background: transparent;
    margin-bottom: 15px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
}
/* 블루 아카이브 특유의 이름 옆 푸른 포인트 선 */
#story-name::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background: #1288FF;
    margin-top: 5px;
}

#story-text {
    font-size: 24px;
    font-weight: 700;
    color: white;
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    margin-bottom: 20px;
    height: 80px; /* 두 줄 정도 고정 높이 */
}

.story-next-icon {
    position: absolute;
    bottom: 40px;
    right: 10%;
    color: white;
    font-size: 20px;
    animation: bounceRight 1s infinite;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}
/* --- 10연차 가챠 봉투 연출 스타일 --- */
#envelope-container {
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.envelope-wrapper {
    width: 150px;
    height: 150px;
    opacity: 0;
    transform: translateY(-100px) scale(1.1);
    /* 드롭 애니메이션 */
    animation: dropEnvelope 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.envelope-img {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- 10연차 가챠 봉투 연출 스타일 --- */
#envelope-container {
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* 봉투 사이 간격 */
}

.envelope-wrapper {
    /* 👇 원본 이미지 비율에 맞춰 완벽한 정사각형으로 수정했습니다! */
    width: 150px; 
    height: 150px; 
    opacity: 0;
    transform: translateY(-100px) scale(1.1);
    animation: dropEnvelope 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.envelope-img {
    width: 100%;
    height: 100%;
    background-size: contain; /* 이미지가 짤리지 않고 다 보이게 */
    background-repeat: no-repeat;
    background-position: center;
    /* 이전의 가짜 파란색 배경/테두리 속성은 완전히 삭제했습니다 */
}

@keyframes dropEnvelope {
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}
/* --- 가챠 화면 왼쪽 패널 슬라이드쇼 연출 --- */
.bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* 9장 * 4초 = 총 36초 동안 한 사이클이 돌아가도록 수정 */
    animation: crossfade 36s infinite ease-in-out;
}

/* 부드럽게 나타나고 사라지는 크로스페이드 + 줌 효과 */
@keyframes crossfade {
    0%   { opacity: 0; transform: scale(1.05); }
    5%   { opacity: 1; transform: scale(1.02); }  /* 서서히 등장 */
    11%  { opacity: 1; transform: scale(1); }     /* 화면에 선명하게 유지 */
    16%  { opacity: 0; transform: scale(0.95); }  /* 다음 이미지와 교차하며 스르륵 퇴장 */
    100% { opacity: 0; transform: scale(0.95); }  /* 나머지 시간 동안은 숨김 */
}