@charset "UTF-8";
/* 상단 경고 띠배너(바코드 오류 등). 전폭 50px, 살짝 투명 배경 */
.alert_banner { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 70px; z-index: 50; box-sizing: border-box; align-items: center; justify-content: center; padding: 0 12px; background: rgba(30, 30, 30, 0.82); color: #fff; font-size: 22px; font-weight: 500; pointer-events: none; transform: translateY(0); opacity: 1; }

.alert_banner.alert_banner--visible { display: flex; }

.alert_banner.alert_banner--leaving { display: flex; animation: alert-banner-exit-up 0.38s ease-in forwards; }

@keyframes alert-banner-exit-up { from { transform: translateY(0);
    opacity: 1; }
  to { transform: translateY(-100%);
    opacity: 0; } }

.alert_banner_inner { display: flex; align-items: center; justify-content: center; gap: 0.15em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.alert_banner_emoji { font-size: 30px; }

.alert_banner .alert_message { margin-top: 6px; }

/* 당첨 카드: 시작/끝 vh, 재생 시간. 조명만 아래로 내리려면 light_offset_vh 양수. overshoot는 한번에 내린 뒤 살짝 올라올 때 넘어가는 vh(값을 크게 하면 더 아래로 내려갔다 자리함). light_opacity = 빛 노출 시 불투명도(0~1) */
/* 세로 플로우 래퍼. 전환 시 inner가 위로 올라감(transition 3.8s) */
.screen_flow_wrapper { height: 100vh; width: 100vw; overflow: hidden; overflow-x: hidden; position: relative; z-index: 10; }

/* 꽃가루. celebration_active 시 표시. z-index로 카드 뒤에 위치 */
.screen_flow_wrapper .celebration_overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; display: none; overflow: visible; }

.screen_flow_wrapper .celebration_overlay.celebration_active { display: block; }

/* bg 내부 오버레이는 absolute. transform 부모 때문에 fixed 시 밖으로 나감 방지 */
.screen_flow_bg .celebration_overlay { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 20; }

.screen_flow_wrapper .celebration_confetti { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }

/* 꽃가루 조각. burst 1~5 = 키프레임(방향·거리). shape별 border-radius */
.screen_flow_wrapper .confetti_piece { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation-timing-function: linear; animation-iteration-count: infinite; }

.screen_flow_wrapper .confetti_piece.confetti_burst_1 { animation-name: confetti_burst_1; }

.screen_flow_wrapper .confetti_piece.confetti_burst_2 { animation-name: confetti_burst_2; }

.screen_flow_wrapper .confetti_piece.confetti_burst_3 { animation-name: confetti_burst_3; }

.screen_flow_wrapper .confetti_piece.confetti_burst_4 { animation-name: confetti_burst_4; }

.screen_flow_wrapper .confetti_piece.confetti_burst_5 { animation-name: confetti_burst_5; }

.screen_flow_wrapper .confetti_piece.rect { border-radius: 0; }

.screen_flow_wrapper .confetti_piece.circle { border-radius: 50%; }

.screen_flow_wrapper .confetti_piece.stripe { border-radius: 1px; }

.screen_flow_wrapper .confetti_piece.oval { border-radius: 50%; }

.screen_flow_wrapper .confetti_piece.square { border-radius: 0; }

.screen_flow_wrapper .confetti_piece.diamond { border-radius: 0; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

/* 내부 래퍼. height 5000px 고정. scrolled 시 --scroll-end만큼 위로(JS에서 설정) */
.screen_flow_inner { position: absolute; top: 0; left: 0; width: 100%; z-index: 10; transition: transform 3.8s ease; will-change: transform; height: 5000px; }

.screen_flow_inner.scrolled { transform: translateY(var(--scroll-end, -100vh)); }

/* 상자 낙하: left만 --fall-end-left로 이동. 골드/브론즈 동일, JS에서 left 값 다르게 줌 */
@keyframes fall_to_center_gold { to { left: var(--fall-end-left, 50%); } }

@keyframes fall_to_center_bronze { to { left: var(--fall-end-left, 50%); } }

/* 낙하 중 상자 흔들림. translateX·rotate 값으로 강도 조절 */
@keyframes box_sway { 0%, 100% { transform: translateX(0) rotate(0deg); }
  10% { transform: translateX(1.5vw) rotate(1deg); }
  20% { transform: translateX(-1.25vw) rotate(-0.75deg); }
  30% { transform: translateX(1vw) rotate(0.5deg); }
  40% { transform: translateX(-1.25vw) rotate(-1deg); }
  50% { transform: translateX(1vw) rotate(0.5deg); }
  60% { transform: translateX(-0.75vw) rotate(-0.5deg); }
  70% { transform: translateX(0.75vw) rotate(0.25deg); }
  80% { transform: translateX(-0.5vw) rotate(-0.25deg); }
  90% { transform: translateX(0.25vw) rotate(0deg); } }

@keyframes gentle_float { /* 골드 상자 대기 시 살짝 떠움. translateY 값 조절 */
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(0.25deg); }
  50% { transform: translateY(0) rotate(-0.25deg); }
  75% { transform: translateY(3px) rotate(0.15deg); } }

@keyframes gentle_float_bronze { /* 브론즈 상자 대기. 4px·0.4deg 등으로 강도 조절 */
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(0.4deg); }
  50% { transform: translateY(0) rotate(-0.4deg); }
  75% { transform: translateY(4px) rotate(0.25deg); } }

@keyframes gentle_wind_sway { /* 동전·선물 등 흔들림. 3px·0.45deg 등 */
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, 1.5px) rotate(0.45deg); }
  50% { transform: translate(-1.5px, -1.5px) rotate(-0.35deg); }
  75% { transform: translate(-3px, 1.5px) rotate(0.35deg); } }

@keyframes cloud_drift_slow { /* 구름 좌→우. 120s~240s로 duration 조절(아래에서 개별 지정) */
  0% { transform: translateX(0);
    opacity: 0; }
  2% { transform: translateX(5vw);
    opacity: 0.4; }
  20% { transform: translateX(24vw);
    opacity: 0.8; }
  85% { transform: translateX(102vw);
    opacity: 0.8; }
  100% { transform: translateX(120vw);
    opacity: 0; } }

@keyframes cloud_drift_slow_rtl { /* 구름 우→좌. 50vw 시작 등 */
  0% { transform: translateX(50vw);
    opacity: 0; }
  2% { transform: translateX(45vw);
    opacity: 0.4; }
  5% { transform: translateX(42vw);
    opacity: 0.8; }
  85% { transform: translateX(8vw);
    opacity: 0.8; }
  100% { transform: translateX(0);
    opacity: 0; } }

/* 당첨 상품명 전광판: 동일 문구 2회 복제 후 -50% 이동으로 끊김 없이 순환 (JS에서 트랙 삽입·--winning-marquee-duration) */
@keyframes winning_product_title_marquee { 0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } }

/* 당첨 카드 슬라이드: 한번에 아래로 쭉 내린 뒤 살짝 위로 올라가며 자리 잡음. settle까지 % 낮추면 올라오는 속도 up */
@keyframes winning_product_slide_down { 0% { top: 70vh; }
  38% { top: 149vh; }
  /* 한번에 내려감 */
  55% { top: 146vh; }
  /* 올라오는 구간을 짧게 해서 속도 up */
  100% { top: 146vh; } }

/* 배경 레이어 5000px. .obj 위치는 top/left/width 등 vh·vw 단위로 여기서 일괄 조절 */
.screen_flow_bg { position: absolute; top: 0; left: 0; width: 100%; height: 5000px; z-index: 10; overflow: visible; pointer-events: none; background-color: #2d2d2d; background-size: cover; background-position: center top; background-repeat: no-repeat; /* 당첨 카드. width/height·카드 배경 이미지. 시작 위치는 $winning_card_start_vh */ /* 안내 문구+체브론. top 83vh·font 24px/16px. chevron_item delay·margin-top으로 빛남 간격 */ /* 골드/브론즈 캐릭터 비디오. top·left·width로 위치·크기 조절 */ /* 골드 상자. top 52vh·left 68%·width 330px. fall 시 2.5s 낙하·box_sway */ /* 브론즈 상자. top 63vh·left 34%·width 330px. fall 시 낙하·box_sway */ }

.screen_flow_bg .obj { position: absolute; pointer-events: none; z-index: 15; }

.screen_flow_bg .obj_coin1 { top: 80vh; right: -10vw; width: 200px; left: auto; animation: gentle_wind_sway 5s ease-in-out infinite; }

.screen_flow_bg .obj_coin2 { top: 2vh; right: 8vw; width: 6vw; left: auto; opacity: 0.4; animation: gentle_wind_sway 5.5s ease-in-out infinite 0.5s; }

.screen_flow_bg .obj_coin3 { top: 70vh; left: -3vw; width: 100px; opacity: 0.8; animation: gentle_wind_sway 6s ease-in-out infinite 1s; }

.screen_flow_bg .obj_gift { top: 47vh; left: 80vw; width: 100px; opacity: 0.5; animation: gentle_wind_sway 5.2s ease-in-out infinite 0.3s; }

.screen_flow_bg .obj_fridge { top: 15vh; left: 15vw; width: 120px; opacity: 0.5; animation: gentle_wind_sway 5.8s ease-in-out infinite 0.8s; }

.screen_flow_bg .obj_wind1 { top: -20vh; left: 0vw; width: 1000px; opacity: 0.3; }

.screen_flow_bg .obj_wind2 { top: 55vh; right: -5vw; width: 1000px; left: auto; opacity: 0.3; }

.screen_flow_bg .obj_logo { top: 0vh; left: 50%; transform: translateX(-50%); width: 250px; }

.screen_flow_bg .obj_cloud1 { top: 180vh; left: -15vw; width: 330px; filter: blur(3px); animation: cloud_drift_slow 120s linear infinite; }

.screen_flow_bg .obj_cloud2 { top: 193vh; left: 20vw; width: 260px; filter: blur(7px); animation: cloud_drift_slow 200s linear infinite; }

.screen_flow_bg .obj_cloud3 { top: 215vh; left: 35vw; width: 160px; filter: blur(8px); animation: cloud_drift_slow_rtl 100s linear infinite; }

.screen_flow_bg .obj_cloud4 { top: 223vh; left: 25vw; width: 120px; filter: blur(10px); animation: cloud_drift_slow 240s linear infinite; }

.screen_flow_bg .winning_product_card { top: 70vh; left: 50%; transform: translateX(-50%); width: 1000px; height: 1920px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; overflow: hidden; isolation: isolate; /* 조명 캔버스 블렌딩이 카드 밖으로 번지지 않게 */ opacity: 0; z-index: 40; /* ground_rare 상품명 접두 [Rare] / normal 접두 [Normal] */ /* 카드 내부 조명 레이어: 카드 배경 위, 상품 이미지/텍스트 아래. JS에서 winning_product_light_visible 시 표시 */ /* 카드 맨 위 캐릭터 영상. 크기·위치 조절은 width/height·top/left로 */ /* ground_rare 당첨 시 금액 숫자만 #e63728(소비자가:/원은 현행 컬러). 글로우는 롤 슬롯과 동일 3단 적용 */ /* ground_normal 당첨 시: 이미지 회색 글로우(rare와 동일 3단). 롤 종료 후 정적 이미지에도 동일 톤 */ /* 캐릭터 비디오. margin-left·width로 카드 내 위치·크기 조절 */ }

.screen_flow_bg .winning_product_card.winning_product_card_bronze { background: url("/static/img/bronze_card_result_image.png") center/contain no-repeat; /* PNG 이미지 색감만 조정: hue-rotate로 골드→빨간톤, 값 조절 가능 (음수: 더 빨갛게) */ }

.screen_flow_bg .winning_product_card.winning_product_card_gold { background: url("/static/img/gold_card_result_image.png") center/contain no-repeat; /* PNG 이미지 색감만 조정: hue-rotate로 골드→빨간톤, 값 조절 가능 (음수: 더 빨갛게) */ }

.screen_flow_bg .winning_product_card .winning_product_rare_prefix { color: #e63728; }

.screen_flow_bg .winning_product_card .winning_product_normal_prefix { color: #4A3728; }

.screen_flow_bg .winning_product_card.winning_product_visible { opacity: 1; }

.screen_flow_bg .winning_product_card.winning_product_slide_play { animation: winning_product_slide_down 4s cubic-bezier(0.33, 0.2, 0.2, 1) forwards; }

.screen_flow_bg .winning_product_card.winning_product_at_bottom { top: 146vh; }

.screen_flow_bg .winning_product_card .winning_product_card_light { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 1s ease-out; overflow: hidden; /* 조명이 카드 밖으로 나가 잘릴 때 화면 좌우 세로 줄 방지 */ /* 빛줄기 중앙을 winning_product_img_outer.winning_product_roll_playing 영역 중앙에 맞춤. 퍼져 나가는 범위 제한 516×603px */ }

.screen_flow_bg .winning_product_card .winning_product_card_light.winning_product_light_visible { opacity: 0.4; }

.screen_flow_bg .winning_product_card .winning_product_card_light .card_light_three { position: absolute; left: 50%; top: 52.9%; transform: translate(-50%, -50%); width: 100%; height: 100%; max-width: 516px; max-height: 603px; }

.screen_flow_bg .winning_product_card .winning_product_card_light .card_light_three canvas { display: block; width: 100%; height: 100%; }

.screen_flow_bg .winning_product_card .winning_product_card_top_video { position: absolute; top: 30.4vh; left: 50%; transform: translateX(-50%); width: 250px; height: auto; z-index: 2; pointer-events: none; }

.screen_flow_bg .winning_product_card .winning_product_guide_title_wrap { position: relative; z-index: 50; flex-shrink: 0; height: 600px; width: 460px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }

.screen_flow_bg .winning_product_card .winning_product_guide_title_wrap .winning_product_guide_title { display: block; text-align: center; line-height: 1.4; font-size: 19px; font-weight: 500; letter-spacing: 0.02em; color: #0000009a; margin-bottom: 4rem; }

.screen_flow_bg .winning_product_card .winning_product_guide_title_wrap .hashbox_logo_image { width: 100%; max-width: 220px; margin-bottom: 20px; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap { position: relative; z-index: 1; width: 100%; flex-shrink: 0; height: 710px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; /* 롤링: 위아래로 회전 후 정지(JS에서 duration·easing 설정과 맞춤) */ /* 당첨 연출 종료 후 HASHBOX_HOME_RESET_DELAY_MS와 동기된 초 카운트 — 랩 하단 기준 살짝 아래(inventory.js) */ }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_img_outer { position: relative; display: inline-block; width: 500px; flex-shrink: 0; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_roll_viewport { display: none; overflow: hidden; width: 500px; /* inventory.js WINNING_ROLL_VIEWPORT_HEIGHT 와 동기 */ height: 580px; margin-bottom: 15px; position: relative; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_roll_viewport.winning_product_roll_active { display: block; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_roll_track { will-change: transform; backface-visibility: hidden; transform: translateZ(0); /* transform: inventory.js rAF + 단조 감속 이징 */ transition: none; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_roll_slot { width: 500px; /* inventory.js WINNING_ROLL_SLOT_HEIGHT 와 동기 */ height: 325px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* 롤링 중 ground_rare 빨간 글로우: 레이어 격리로 끊김 완화, drop-shadow 3개로 렌더 부하 감소 */ /* 롤링 중 ground_normal 회색 글로우: rare와 동일 구조 */ }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_roll_slot img { width: 100%; max-width: 300px; object-fit: contain; opacity: 0.8; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_roll_slot.winning_product_ground_rare { transform: translateZ(0); contain: layout paint; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_roll_slot.winning_product_ground_rare img { filter: drop-shadow(0 0 10px #e63728) drop-shadow(0 0 16px rgba(230, 55, 40, 0.95)) drop-shadow(0 0 10px rgba(230, 55, 40, 0.8)); }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_roll_slot.winning_product_ground_normal { transform: translateZ(0); contain: layout paint; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_roll_slot.winning_product_ground_normal img { filter: drop-shadow(0 0 10px #828282) drop-shadow(0 0 16px rgba(130, 130, 130, 0.85)) drop-shadow(0 0 10px rgba(130, 130, 130, 0.65)); }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_box_icon_wrap { position: absolute; top: -2vh; left: 1.8vh; z-index: 2; width: 80px; height: auto; display: flex; align-items: center; justify-content: center; pointer-events: none; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_box_icon_wrap .winning_product_box_icon { width: 100%; height: auto; object-fit: contain; display: block; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_box_icon_wrap .winning_product_ground_letter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 2rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); line-height: 1; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_img_outer.winning_product_roll_playing .winning_product_img { display: none; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_img { margin-bottom: 50px; width: 500px; height: auto; object-fit: contain; display: block; opacity: 0.8; filter: contrast(1.12) saturate(1.08) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)); }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_home_reset_hint { display: none; position: absolute; left: 50%; top: 5.5%; transform: translateX(-50%); flex-direction: column; align-items: center; justify-content: center; width: calc(100% - 24px); max-width: 460px; z-index: 2; pointer-events: none; text-align: center; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95); }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_home_reset_hint.winning_product_home_reset_hint_visible { display: flex; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_home_reset_hint .winning_product_home_reset_hint_line { font-size: 18px; font-weight: 500; letter-spacing: 0.05em; color: #fdfdfd; line-height: 1.45; }

.screen_flow_bg .winning_product_card .winning_product_img_wrap .winning_product_home_reset_hint .winning_product_home_reset_hint_count { display: inline-block; font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 1ch; margin-right: 1px; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap { position: relative; z-index: 1; flex-shrink: 1; min-width: 0; max-width: 100%; height: 40px; width: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: 12px; /* 롤링: 이미지와 동일 타이밍으로 타겟 상품명까지 */ /* 길이 초과 시 전광판 슬라이드 (JS에서 .winning_product_title_marquee + 트랙 HTML·--winning-marquee-duration) */ }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title_roll_viewport { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 40px; line-height: 40px; overflow: hidden; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title_roll_viewport.winning_product_title_roll_active { display: block; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title_roll_track { will-change: transform; backface-visibility: hidden; transform: translateZ(0); transition: none; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title_roll_slot { height: 40px; line-height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 8px; box-sizing: border-box; /* 롤링 중 Normal 접두만 회색 */ }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title_roll_slot span { display: inline-block; max-width: 100%; line-height: 40px; height: 40px; white-space: nowrap; font-size: 21px; font-weight: 600; letter-spacing: 0.02em; color: #4A3728; text-align: center; /* 롤링 슬롯 span 색이 자식까지 덮어씀 → 접두 색 유지 */ }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title_roll_slot span .winning_product_rare_prefix { color: #e63728; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title_roll_slot span .winning_product_normal_prefix { color: #4A3728; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title_roll_slot.winning_product_ground_normal span .winning_product_normal_prefix { color: #919191; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title_wrap.winning_product_title_roll_playing .winning_product_title { visibility: hidden; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap .winning_product_title { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; white-space: nowrap; line-height: 1; font-size: 21px; font-weight: 600; letter-spacing: 0.02em; color: #4A3728; text-align: center; height: 40px; line-height: 40px; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap.winning_product_title_marquee { justify-content: flex-start; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap.winning_product_title_marquee .winning_product_title { text-align: left; max-width: none; width: max-content; }

.screen_flow_bg .winning_product_card .winning_product_title_wrap.winning_product_title_marquee .winning_product_title_marquee_track { display: inline-flex; white-space: nowrap; will-change: transform; animation: winning_product_title_marquee linear infinite; animation-duration: var(--winning-marquee-duration, 8s); }

.screen_flow_bg .winning_product_card .winning_product_title_wrap.winning_product_title_marquee .winning_product_title_segment { display: inline-block; flex-shrink: 0; padding-right: 25px; box-sizing: content-box; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap { position: relative; z-index: 1; flex-shrink: 0; height: 40px; width: 460px; display: flex; align-items: center; justify-content: center; margin-top: 30px; overflow: hidden; /* 롤링: 이미지·상품명과 동일 타이밍으로 타겟 가격까지 */ }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price_roll_viewport { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 40px; line-height: 40px; overflow: hidden; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price_roll_viewport.winning_product_price_roll_active { display: block; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price_roll_track { will-change: transform; backface-visibility: hidden; transform: translateZ(0); transition: none; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price_roll_slot { height: 40px; line-height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 8px; box-sizing: border-box; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price_roll_slot span { display: inline-block; line-height: 40px; height: 40px; font-size: 20px; font-weight: 700; letter-spacing: 0.2em; color: #4A3728; text-align: center; border-radius: 999px; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price_roll_slot span .amount_text { font-weight: 700; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price_roll_slot.winning_product_ground_rare span { color: #4A3728; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price_roll_slot.winning_product_ground_rare span .amount_text { color: #e63728; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price_roll_slot.winning_product_ground_normal span .amount_text { color: #4A3728; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap.winning_product_price_roll_playing .winning_product_price { visibility: hidden; }

.screen_flow_bg .winning_product_card .winning_product_price_wrap .winning_product_price { display: inline-block; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 0.2em; color: #4A3728; border-radius: 999px; height: 40px; line-height: 40px; }

.screen_flow_bg .winning_product_card.winning_product_ground_rare .winning_product_roll_slot img { filter: drop-shadow(0 0 10px #e63728) drop-shadow(0 0 16px rgba(230, 55, 40, 0.95)) drop-shadow(0 0 10px rgba(230, 55, 40, 0.8)); }

.screen_flow_bg .winning_product_card.winning_product_ground_rare .winning_product_price_wrap .winning_product_price { color: #4A3728; }

.screen_flow_bg .winning_product_card.winning_product_ground_rare .winning_product_price_wrap .winning_product_price .amount_text { color: #e63728; }

.screen_flow_bg .winning_product_card.winning_product_ground_normal .winning_product_normal_prefix { color: #919191; }

.screen_flow_bg .winning_product_card.winning_product_ground_normal .winning_product_price_wrap .winning_product_price .amount_text { color: #4A3728; }

.screen_flow_bg .winning_product_card.winning_product_ground_normal .winning_product_roll_slot img { filter: drop-shadow(0 0 10px #828282) drop-shadow(0 0 16px rgba(130, 130, 130, 0.85)) drop-shadow(0 0 10px rgba(130, 130, 130, 0.65)); }

.screen_flow_bg .winning_product_card.winning_product_ground_normal .winning_product_img { filter: contrast(1.12) saturate(1.08) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 4px #82848c) drop-shadow(0 0 12px rgba(130, 132, 140, 0.95)) drop-shadow(0 0 24px rgba(130, 132, 140, 0.8)); }

.screen_flow_bg .winning_product_card .winning_product_character_wrap { position: relative; z-index: 3; flex-shrink: 0; width: 100%; display: flex; justify-content: left; align-items: flex-end; margin-top: 6px; }

.screen_flow_bg .winning_product_card .winning_product_character_wrap .winning_product_character_video { margin-left: 250px; width: 300px; height: auto; object-fit: contain; display: block; }

.screen_flow_bg .obj_text { top: 83vh; left: 50%; transform: translateX(-50%); font-size: 27px; color: #ffffff; white-space: nowrap; text-align: center; transition: opacity 0.35s ease-out, visibility 0.35s ease-out; }

.screen_flow_bg .obj_text.obj_text_hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .screen_flow_bg .obj_text { transition: none; } }

.screen_flow_bg .obj_text .obj_text_main { margin: 0; text-shadow: 2px 2px 2px black; }

.screen_flow_bg .obj_text .obj_text_small { margin: 0; margin-top: 5px; font-size: 18px; text-shadow: 2px 2px 2px black; }

.screen_flow_bg .obj_text .obj_text_chevron { margin: 40px auto 0; width: 200px; display: flex; flex-direction: column; align-items: center; gap: 0; }

.screen_flow_bg .obj_text .obj_text_chevron .chevron_item { display: flex; align-items: center; justify-content: center; width: 200px; height: 50px; font-size: 65px; line-height: 0.8; letter-spacing: 0.8; color: rgba(255, 255, 255, 0.4); animation: chevronGlow 1.5s ease-in-out infinite; text-shadow: none; border: none; }

.screen_flow_bg .obj_text .obj_text_chevron .chevron_item:nth-child(1) { animation-delay: 0s; }

.screen_flow_bg .obj_text .obj_text_chevron .chevron_item:nth-child(2) { animation-delay: 0.25s; margin-top: -20px; }

.screen_flow_bg .obj_text .obj_text_chevron .chevron_item:nth-child(3) { animation-delay: 0.5s; margin-top: -20px; }

.screen_flow_bg .obj_text .obj_text_chevron .chevron_glyph { display: inline-block; width: 1em; text-align: center; transform: scaleX(4); transform-origin: center center; }

.screen_flow_bg .obj_ellipse { top: 255vh; left: 50%; transform: translateX(-50%); width: 245px; height: 65px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); }

.screen_flow_bg .gold_character_video { position: absolute; top: 26vh; left: 54%; transform: translate(-50%, -50%); width: 500px; z-index: 20; }

.screen_flow_bg .bronze_character_video { position: absolute; top: 50vh; left: 30%; transform: translate(-50%, -50%); width: 330px; z-index: 20; }

.screen_flow_bg .closed_goldbox_img_wrapper { position: absolute; top: 52vh; left: 68%; transform: translateX(-50%); z-index: 25; overflow: visible; pointer-events: auto; }

.screen_flow_bg .closed_goldbox_img_wrapper .closed_goldbox_img { display: block; width: 330px; height: auto; position: relative; z-index: 1; rotate: 20deg; animation: gentle_float 3.5s ease-in-out infinite; }

.screen_flow_bg .closed_goldbox_img_wrapper.fall { pointer-events: none; box-sizing: border-box; animation: fall_to_center_gold 2.5s ease-in forwards; transition: top 2.5s ease-in; }

.screen_flow_bg .closed_goldbox_img_wrapper.fall .closed_goldbox_img { animation: box_sway 3s ease-in-out forwards; }

.screen_flow_bg .closed_bronzebox_img_wrapper { position: absolute; top: 63vh; left: 34%; transform: translateX(-50%); z-index: 25; overflow: visible; pointer-events: auto; }

.screen_flow_bg .closed_bronzebox_img_wrapper .closed_bronzebox_img { display: block; width: 330px; height: auto; position: relative; z-index: 1; rotate: -20deg; animation: gentle_float_bronze 4.5s ease-in-out infinite 1s; }

.screen_flow_bg .closed_bronzebox_img_wrapper.fall { pointer-events: none; box-sizing: border-box; animation: fall_to_center_bronze 2.5s ease-in forwards; transition: top 2.5s ease-in; }

.screen_flow_bg .closed_bronzebox_img_wrapper.fall .closed_bronzebox_img { animation: box_sway 3s ease-in-out forwards; }

/* ˅ 체브론 반복 빛남. 1.5s·delay 0/0.25/0.5s. color 값으로 밝기 조절 */
@keyframes chevronGlow { 0%, 100% { color: rgba(255, 255, 255, 0.35); }
  50% { color: white; } }

/* 꽃가루 낙하 경로 1~5. translate(vw,vh)·rotate로 방향·거리 조절. 0~1% opacity 등장 */
@keyframes confetti_burst_1 { 0% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0; }
  1% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1; }
  20% { transform: translate(10vw, 50vh) rotate(150deg) scale(1);
    opacity: 1; }
  40% { transform: translate(22vw, 100vh) rotate(320deg) scale(1);
    opacity: 0.98; }
  60% { transform: translate(32vw, 150vh) rotate(500deg) scale(1);
    opacity: 0.9; }
  80% { transform: translate(38vw, 200vh) rotate(700deg) scale(1);
    opacity: 0.7; }
  100% { transform: translate(42vw, 260vh) rotate(900deg) scale(1);
    opacity: 0; } }

@keyframes confetti_burst_2 { 0% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0; }
  1% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1; }
  20% { transform: translate(-12vw, 52vh) rotate(-180deg) scale(1);
    opacity: 1; }
  40% { transform: translate(-26vw, 104vh) rotate(-380deg) scale(1);
    opacity: 0.98; }
  60% { transform: translate(-36vw, 156vh) rotate(-580deg) scale(1);
    opacity: 0.9; }
  80% { transform: translate(-40vw, 204vh) rotate(-780deg) scale(1);
    opacity: 0.7; }
  100% { transform: translate(-42vw, 260vh) rotate(-950deg) scale(1);
    opacity: 0; } }

@keyframes confetti_burst_3 { 0% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0; }
  1% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1; }
  25% { transform: translate(18vw, 60vh) rotate(220deg) scale(1);
    opacity: 1; }
  50% { transform: translate(28vw, 120vh) rotate(460deg) scale(1);
    opacity: 0.95; }
  75% { transform: translate(22vw, 180vh) rotate(720deg) scale(1);
    opacity: 0.8; }
  100% { transform: translate(12vw, 260vh) rotate(980deg) scale(1);
    opacity: 0; } }

@keyframes confetti_burst_4 { 0% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0; }
  1% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1; }
  25% { transform: translate(-20vw, 62vh) rotate(-240deg) scale(1);
    opacity: 1; }
  50% { transform: translate(-32vw, 124vh) rotate(-500deg) scale(1);
    opacity: 0.95; }
  75% { transform: translate(-26vw, 186vh) rotate(-760deg) scale(1);
    opacity: 0.8; }
  100% { transform: translate(-14vw, 260vh) rotate(-1000deg) scale(1);
    opacity: 0; } }

@keyframes confetti_burst_5 { 0% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0; }
  1% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1; }
  20% { transform: translate(8vw, 48vh) rotate(100deg) scale(1);
    opacity: 1; }
  40% { transform: translate(4vw, 98vh) rotate(220deg) scale(1);
    opacity: 0.98; }
  60% { transform: translate(14vw, 148vh) rotate(360deg) scale(1);
    opacity: 0.9; }
  80% { transform: translate(10vw, 198vh) rotate(520deg) scale(1);
    opacity: 0.7; }
  100% { transform: translate(6vw, 260vh) rotate(700deg) scale(1);
    opacity: 0; } }

/* 착지 화면. 박스 착지 시 JS에서 .landing_red_button_visible 추가 */
/* 빨간 버튼 pop_in 길이 — inventory.js LANDING_F9_AFTER_TEXT_MS 와 동기 */
/* 한 사이클(아래→위→아래) 길이 — 빠른 펄스 */
/* F9 누르면 yoyo 중단 후 아래로 이동 */
@keyframes landing_red_button_pop_in { 0% { opacity: 1;
    transform: scale(0) rotate(-10deg); }
  55% { transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1;
    transform: scale(1) rotate(0deg); } }

@keyframes landing_red_button_face_yoyo { 0%, 50%, 100% { transform: translateX(-50%) translateY(0); }
  25% { transform: translateX(-50%) translateY(-4px); }
  75% { transform: translateX(-50%) translateY(4px); } }

@keyframes push_button_text_reveal { from { opacity: 0;
    transform: translateY(12px); }
  to { opacity: 1;
    transform: translateY(0); } }

/* PUSH 이미지 주변: 로즈·라일락 (노랑 계열 없음). 브라운·포인트레드와 조화 (테두리 없음) */
@keyframes landing_mist_breathe { 0%, 100% { opacity: 0.82;
    transform: translate(-50%, -50%) scale(1);
    filter: saturate(1); }
  33% { opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
    filter: saturate(1.06); }
  66% { opacity: 0.88;
    transform: translate(-50%, -50%) scale(1.04);
    filter: saturate(1.03); } }

@keyframes landing_aurora_sheet { 0% { transform: translate(-50%, -50%) translate(0, 0) rotate(-10deg) scale(1); }
  20% { transform: translate(-50%, -50%) translate(9%, -6%) rotate(-5deg) scale(1.08); }
  45% { transform: translate(-50%, -50%) translate(-5%, 8%) rotate(-15deg) scale(0.94); }
  70% { transform: translate(-50%, -50%) translate(6%, 5%) rotate(-8deg) scale(1.05); }
  100% { transform: translate(-50%, -50%) translate(0, 0) rotate(-10deg) scale(1); } }

@keyframes landing_bokeh_a { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.65; }
  25% { transform: translate(20px, -24px) rotate(10deg) scale(1.2);
    opacity: 1; }
  50% { transform: translate(10px, 12px) rotate(-6deg) scale(0.92);
    opacity: 0.72; }
  75% { transform: translate(-14px, -10px) rotate(7deg) scale(1.12);
    opacity: 0.95; } }

@keyframes landing_bokeh_b { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1.05);
    opacity: 0.5; }
  30% { transform: translate(-18px, 16px) rotate(-12deg) scale(0.88);
    opacity: 0.92; }
  60% { transform: translate(12px, -8px) rotate(8deg) scale(1.15);
    opacity: 1; } }

@keyframes landing_bokeh_c { 0%, 100% { transform: translate(-50%, 0) translateY(0) scale(1);
    opacity: 0.55; }
  40% { transform: translate(-50%, 0) translateY(-18px) scale(1.25);
    opacity: 1; }
  70% { transform: translate(-50%, 0) translateY(6px) scale(0.9);
    opacity: 0.7; } }

@keyframes landing_aurora_flow { 0% { background-position: 0% 50%;
    filter: brightness(1) saturate(1); }
  50% { background-position: 100% 50%;
    filter: brightness(1.22) saturate(1.08); }
  100% { background-position: 0% 50%;
    filter: brightness(1) saturate(1); } }

@keyframes landing_shine_drift { 0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(3deg) scale(1.04); } }

@keyframes landing_shine_glint { 0%, 100% { opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.92); }
  45% { opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.08); } }

@keyframes landing_firefly_1 { 0%, 100% { opacity: 0.4;
    transform: translate(0, 0) scale(0.88); }
  25% { opacity: 1;
    transform: translate(14px, -12px) scale(1.35); }
  50% { opacity: 0.55;
    transform: translate(8px, 14px) scale(1.05); }
  75% { opacity: 0.95;
    transform: translate(-10px, -6px) scale(1.2); } }

@keyframes landing_firefly_2 { 0%, 100% { opacity: 0.45;
    transform: translate(0, 0) scale(0.95); }
  30% { opacity: 1;
    transform: translate(-16px, 10px) scale(1.28); }
  55% { opacity: 0.5;
    transform: translate(10px, -14px) scale(1); }
  80% { opacity: 0.9;
    transform: translate(6px, 8px) scale(1.18); } }

@keyframes landing_firefly_3 { 0%, 100% { opacity: 0.38;
    transform: translate(0, 0) scale(0.9); }
  40% { opacity: 1;
    transform: translate(-12px, -16px) scale(1.32); }
  70% { opacity: 0.55;
    transform: translate(14px, 6px) scale(1.1); } }

@keyframes landing_firefly_4 { 0%, 100% { opacity: 0.35;
    transform: translate(0, 0) rotate(0deg) scale(0.85); }
  35% { opacity: 1;
    transform: translate(10px, 12px) rotate(180deg) scale(1.3); }
  65% { opacity: 0.6;
    transform: translate(-8px, -10px) rotate(360deg) scale(1); } }

@keyframes landing_firefly_5 { 0%, 100% { opacity: 0.42;
    transform: translate(0, 0) scale(1); }
  22% { opacity: 0.95;
    transform: translate(-14px, -8px) scale(1.22); }
  48% { opacity: 0.5;
    transform: translate(12px, 10px) scale(0.92); }
  74% { opacity: 1;
    transform: translate(-6px, 14px) scale(1.28); } }

/* PUSH 이미지 — 커졌다 작아짐 (2단계 루프, 빠르게·진폭 크게) */
@keyframes landing_push_breathe { 0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); } }

/* F9 퇴장: clip-path 원이 버튼 쪽 중심으로 닫히며 “빨려 들어감”(블러·회전 없음) */
@keyframes landing_red_button_game_exit { 0% { opacity: 1;
    -webkit-clip-path: circle(125% at 50% 36%);
    clip-path: circle(125% at 50% 36%);
    transform: translate(-50%, -50%) scale(1); }
  18% { opacity: 1;
    -webkit-clip-path: circle(62% at 50% 36%);
    clip-path: circle(62% at 50% 36%);
    transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0;
    -webkit-clip-path: circle(0% at 50% 36%);
    clip-path: circle(0% at 50% 36%);
    transform: translate(-50%, -50%) scale(1); } }

@keyframes landing_red_button_game_exit_reduced { to { opacity: 0;
    transform: translate(-50%, -50%); } }

/* F9 퇴장 애니 — inventory.js 폴백 타임아웃·여유와 맞출 것 */
.landing_red_button_wrap { display: none; position: fixed; left: 50%; top: 43%; transform: translate(-50%, -50%); z-index: 30; pointer-events: none; -webkit-clip-path: none; clip-path: none; /* F9: 포털 닫힘 — 클래스명 exit_right은 호환용 유지 */ /* 세 PNG를 한 묶음으로 겹쳐 배치 · 그림자는 스택 전체에 한 번만 */ /* 높이·폭 기준은 테두리 PNG(맨 위 레이어, 투명 중앙) */ /* pop_in 끝난 뒤 본체 PNG만 ±4px 상하 왕복 */ /* F9: 왕복 중단 + 아래로 눌림 */ /* push_button_text: img_wrap pop_in 과 동시 시작. F9 해제는 pop_in 끝(inventory.js LANDING_F9_AFTER_TEXT_MS) */ }

.landing_red_button_wrap.landing_red_button_visible { display: block; }

.landing_red_button_wrap.landing_red_button_exit_right { transition: none; animation: landing_red_button_game_exit 440ms cubic-bezier(0.55, 0.06, 0.6, 1) forwards; }

@media (prefers-reduced-motion: reduce) { .landing_red_button_wrap.landing_red_button_exit_right { animation: landing_red_button_game_exit_reduced 0.16s ease-out forwards; } .landing_red_button_wrap.landing_red_button_visible .landing_red_button_face { animation: none; } .landing_red_button_wrap.landing_red_button_visible.landing_red_button_f9_pressed .landing_red_button_face { transition: none; } }

.landing_red_button_wrap .landing_click_glow { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; padding: 28px; border-radius: 0; isolation: isolate; /* 후광: 라벤더 화이트 → 연보라 → 모브 */ /* 시트: 로즈 핑크 ↔ 소프트 퍼플 */ /* 렌즈 보케 — 궤적이 길고 회전·스케일 변화 */ /* 오로라 리본 + 중앙 글린트 — 흐름·살짝 회전·밝기 펄스 */ /* 반짝 점 — 더 크게·강한 글로우·넓은 궤적 */ }

.landing_red_button_wrap .landing_click_glow::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: 0; width: 135%; max-width: 540px; max-height: 540px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse 52% 46% at 42% 40%, rgba(248, 242, 255, 0.4) 0%, transparent 52%), radial-gradient(ellipse 62% 56% at 58% 58%, rgba(235, 218, 245, 0.26) 0%, transparent 58%), radial-gradient(ellipse 90% 88% at 50% 50%, rgba(200, 175, 220, 0.14) 0%, transparent 68%); box-shadow: 0 0 60px 25px rgba(230, 210, 245, 0.14), 0 0 100px 45px rgba(210, 175, 205, 0.09), 0 0 140px 60px rgba(74, 55, 40, 0.05); animation: landing_mist_breathe 3.8s ease-in-out infinite; }

.landing_red_button_wrap .landing_click_glow::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 0; width: 100%; max-width: 460px; height: 78%; max-height: 380px; border-radius: 50%; pointer-events: none; background: linear-gradient(118deg, transparent 0%, rgba(245, 225, 238, 0.2) 18%, rgba(220, 195, 235, 0.22) 40%, rgba(235, 215, 245, 0.18) 58%, rgba(210, 185, 220, 0.12) 78%, transparent 100%); filter: blur(16px) saturate(1.05); opacity: 0.85; mix-blend-mode: soft-light; animation: landing_aurora_sheet 7s ease-in-out infinite; }

.landing_red_button_wrap .landing_click_glow .landing_click_orb { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; }

.landing_red_button_wrap .landing_click_glow .landing_click_orb--a { width: 110px; height: 110px; left: -10%; top: 24%; background: radial-gradient(circle at 40% 38%, rgba(255, 255, 255, 0.5) 0%, rgba(238, 220, 250, 0.34) 28%, rgba(185, 155, 210, 0.18) 54%, transparent 76%); filter: blur(12px); animation: landing_bokeh_a 5.2s ease-in-out infinite; mix-blend-mode: screen; opacity: 0.82; box-shadow: 0 0 40px 12px rgba(220, 190, 240, 0.28); }

.landing_red_button_wrap .landing_click_glow .landing_click_orb--b { width: 80px; height: 80px; right: -8%; bottom: 22%; background: radial-gradient(circle at 45% 42%, rgba(255, 255, 255, 0.42) 0%, rgba(245, 210, 225, 0.28) 34%, rgba(195, 160, 195, 0.15) 58%, transparent 82%); filter: blur(11px); animation: landing_bokeh_b 5.8s ease-in-out infinite 0.7s; mix-blend-mode: screen; opacity: 0.78; box-shadow: 0 0 36px 10px rgba(230, 175, 200, 0.24); }

.landing_red_button_wrap .landing_click_glow .landing_click_orb--c { width: 64px; height: 64px; left: 50%; top: -4%; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.48) 0%, rgba(235, 218, 248, 0.32) 40%, rgba(175, 150, 205, 0.14) 64%, transparent 84%); filter: blur(10px); animation: landing_bokeh_c 4.5s ease-in-out infinite 0.3s; mix-blend-mode: screen; opacity: 0.76; box-shadow: 0 0 32px 14px rgba(210, 185, 235, 0.26); }

.landing_red_button_wrap .landing_click_glow .landing_click_shine { position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; z-index: 1; width: 118%; max-width: 480px; height: 82%; max-height: 360px; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%; overflow: visible; background: linear-gradient(92deg, rgba(245, 230, 250, 0) 0%, rgba(252, 240, 248, 0.3) 20%, rgba(225, 195, 230, 0.28) 44%, rgba(240, 215, 235, 0.26) 66%, rgba(220, 200, 235, 0.18) 84%, rgba(245, 230, 250, 0) 100%); background-size: 240% 100%; background-position: 0% 50%; animation: landing_aurora_flow 4.2s ease-in-out infinite, landing_shine_drift 4.8s ease-in-out infinite; mix-blend-mode: soft-light; opacity: 0.9; mask-image: radial-gradient(ellipse 54% 60% at 50% 50%, black 20%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse 54% 60% at 50% 50%, black 20%, transparent 74%); }

.landing_red_button_wrap .landing_click_glow .landing_click_shine::before { content: ''; position: absolute; left: 50%; top: 44%; width: 55%; height: 48%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 45%, transparent 70%); animation: landing_shine_glint 2.2s ease-in-out infinite; mix-blend-mode: overlay; pointer-events: none; }

.landing_red_button_wrap .landing_click_glow .landing_click_sparkle { position: absolute; z-index: 4; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0%, rgba(245, 228, 248, 0.9) 40%, transparent 70%); box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.92), 0 0 20px 6px rgba(230, 195, 235, 0.42), 0 0 36px 10px rgba(200, 165, 210, 0.22); }

.landing_red_button_wrap .landing_click_glow .landing_click_sparkle--1 { top: 8%; left: 12%; animation: landing_firefly_1 2.6s ease-in-out infinite; }

.landing_red_button_wrap .landing_click_glow .landing_click_sparkle--2 { top: 14%; right: 10%; width: 7px; height: 7px; animation: landing_firefly_2 2.9s ease-in-out infinite; animation-delay: 0.35s; }

.landing_red_button_wrap .landing_click_glow .landing_click_sparkle--3 { bottom: 10%; left: 18%; width: 7px; height: 7px; animation: landing_firefly_3 2.75s ease-in-out infinite; animation-delay: 0.85s; }

.landing_red_button_wrap .landing_click_glow .landing_click_sparkle--4 { top: 42%; right: 4%; width: 6px; height: 6px; background: radial-gradient(circle, #fff 0%, rgba(255, 210, 220, 0.92) 42%, transparent 72%); box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9), 0 0 22px 7px rgba(235, 150, 175, 0.45); animation: landing_firefly_4 3.1s ease-in-out infinite; animation-delay: 0.2s; }

.landing_red_button_wrap .landing_click_glow .landing_click_sparkle--5 { bottom: 22%; right: 16%; width: 7px; height: 7px; background: radial-gradient(circle, #fff 0%, rgba(225, 210, 245, 0.9) 40%, transparent 70%); box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9), 0 0 24px 8px rgba(190, 165, 225, 0.38); animation: landing_firefly_5 2.85s ease-in-out infinite; animation-delay: 1.1s; }

.landing_red_button_wrap .landing_click_glow .landing_click_image { position: relative; z-index: 2; display: block; width: 400px; max-width: 100%; height: auto; object-fit: contain; margin: 0 auto; transform-origin: center center; will-change: transform; animation: landing_push_breathe 2.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; filter: drop-shadow(0 0 28px rgba(235, 215, 248, 0.42)) drop-shadow(0 0 44px rgba(210, 175, 215, 0.22)) drop-shadow(0 0 52px rgba(230, 55, 40, 0.1)) drop-shadow(0 12px 22px rgba(30, 22, 18, 0.35)); }

@media (prefers-reduced-motion: reduce) { .landing_red_button_wrap .landing_click_glow .landing_click_image { animation: none; } }

.landing_red_button_wrap .landing_red_button_img_wrap { display: block; width: fit-content; max-width: 100%; margin: -35px auto; padding-bottom: 28px; /* drop-shadow가 아래로 번짐 → 잘림 방지 */ line-height: 0; transform-origin: center center; overflow: visible; }

.landing_red_button_wrap .landing_red_button_stack { position: relative; display: block; width: 300px; max-width: 100%; margin: 0 auto; line-height: 0; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.2)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.08)) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.08)) drop-shadow(0 8px 14px rgba(90, 25, 40, 0.08)); }

.landing_red_button_wrap .landing_red_button_pedestal { position: absolute; left: 50%; top: -80px; transform: translateX(-50%); width: 330px; height: auto; object-fit: contain; z-index: 3; pointer-events: none; }

.landing_red_button_wrap .landing_red_button_face { position: absolute; left: 50%; top: -75px; transform: translateX(-50%); width: 330px; height: auto; object-fit: contain; z-index: 2; pointer-events: none; }

.landing_red_button_wrap .landing_red_button_frame { position: absolute; left: 50%; top: -80px; transform: translateX(-50%); width: 330px; height: auto; object-fit: contain; z-index: 1; pointer-events: none; }

.landing_red_button_wrap.landing_red_button_visible .landing_red_button_img_wrap { animation: landing_red_button_pop_in 0.75s cubic-bezier(0.34, 1.45, 0.64, 1) forwards; }

.landing_red_button_wrap.landing_red_button_visible .landing_red_button_face { animation: landing_red_button_face_yoyo 0.32s ease-in-out infinite; animation-delay: 0.75s; }

.landing_red_button_wrap.landing_red_button_visible.landing_red_button_f9_pressed .landing_red_button_face { animation: none !important; transform: translateX(-50%) translateY(40px); transition: transform 0.22s ease-out; }

.landing_red_button_wrap .push_button_text { display: flex; justify-content: center; font-size: 23px; text-align: center; color: #fff; margin-top: 250px; letter-spacing: 0.03em; font-weight: 400; text-shadow: 2px 2px 2px black; opacity: 0; }

.landing_red_button_wrap.landing_red_button_visible .push_button_text { animation: push_button_text_reveal 0.45s ease-out forwards; animation-delay: 0s; }

/* F9 후 자동 초기화: mask 구멍 — @property로 %만 보간(gradient 문자열 키프레임은 브라우저가 보간 못 해 끊김). 투명=실제 DOM, 불투명=그라데이션. inventory.js 중간 performHashboxHomeVisualReset */
@property --hashbox-scene-iris-hole { syntax: '<percentage>';
  inherits: false;
  initial-value: 100%; }

@keyframes hashbox_scene_cartoon_iris { /* 100% = 반지름 끝까지 투명(아래 장면 전체 노출) → 0 닫힘 → 다시 100% */
  0% { --hashbox-scene-iris-hole: 100%; }
  28.96552% { --hashbox-scene-iris-hole: 0%; }
  37.24138% { --hashbox-scene-iris-hole: 0%; }
  100% { --hashbox-scene-iris-hole: 100%; } }

@keyframes hashbox_scene_cartoon_iris_reduced { 0% { opacity: 0; }
  45% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes hashbox_scene_logo_breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1);
    opacity: 0.34; }
  50% { transform: translate(-50%, -50%) scale(1.035);
    opacity: 0.5; } }

#hashbox_scene_transition_overlay { position: fixed; inset: 0; z-index: 20000; box-sizing: border-box; overflow: hidden; background: transparent; visibility: hidden; pointer-events: none; }

#hashbox_scene_transition_overlay.hashbox_scene_transition_visible { visibility: visible; pointer-events: auto; }

.hashbox_world_sr_only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.hashbox_scene_transition_curtain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; --hashbox-scene-iris-hole: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) var(--hashbox-scene-iris-hole), rgba(255, 255, 255, 0.5) calc(var(--hashbox-scene-iris-hole) + 0.4%), white calc(var(--hashbox-scene-iris-hole) + 1%), white 100%); mask-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) var(--hashbox-scene-iris-hole), rgba(255, 255, 255, 0.5) calc(var(--hashbox-scene-iris-hole) + 0.4%), white calc(var(--hashbox-scene-iris-hole) + 1%), white 100%); background: radial-gradient(ellipse 125% 95% at 50% -5%, rgba(255, 200, 245, 0.55) 0%, transparent 48%), radial-gradient(ellipse 80% 70% at 96% 38%, rgba(140, 230, 255, 0.42) 0%, transparent 54%), radial-gradient(ellipse 72% 88% at 6% 72%, rgba(210, 170, 255, 0.48) 0%, transparent 56%), radial-gradient(ellipse 110% 55% at 50% 102%, rgba(255, 210, 185, 0.22) 0%, transparent 46%), linear-gradient(158deg, #7c5cbf 0%, #8b6fd8 18%, #6b8fe8 40%, #5a9fd4 62%, #7b7ae0 82%, #9b6bc4 100%); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 14px rgba(240, 200, 255, 0.5)) drop-shadow(0 0 26px rgba(150, 210, 255, 0.4)); }

#hashbox_scene_transition_overlay:not(.hashbox_scene_transition_visible) .hashbox_scene_transition_curtain { animation: none !important; }

.hashbox_scene_transition_curtain .hashbox_scene_transition_logo { position: absolute; left: 50%; top: 50%; width: 400px; height: auto; transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.16)) drop-shadow(0 0 28px rgba(180, 220, 255, 0.32)); mix-blend-mode: screen; pointer-events: none; transition: opacity 220ms ease-out; }

#hashbox_scene_transition_overlay.hashbox_scene_transition_visible .hashbox_scene_transition_curtain { animation: hashbox_scene_cartoon_iris 1.45s cubic-bezier(0.42, 0, 0.2, 1) forwards; }

#hashbox_scene_transition_overlay.hashbox_scene_transition_visible .hashbox_scene_transition_logo { opacity: 0.46; animation: hashbox_scene_logo_breathe 1.9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { #hashbox_scene_transition_overlay .hashbox_scene_transition_curtain { animation: none !important; -webkit-mask-image: none; mask-image: none; filter: none; } #hashbox_scene_transition_overlay.hashbox_scene_transition_visible .hashbox_scene_transition_curtain { animation: hashbox_scene_cartoon_iris_reduced 0.32s ease-out forwards !important; } #hashbox_scene_transition_overlay .hashbox_scene_transition_logo { animation: none !important; mix-blend-mode: normal; opacity: 0.3; transition: none; } }

/*# sourceMappingURL=1_1_home.css.map */