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

/* 배경색은 메뉴 이미지 여백(object-fit: contain 레터박스)으로 노출되므로
   이미지 배경과 같은 계열로 맞춘다. main.js의 backgroundColor도 동일하게 유지할 것 */
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #F2F0EA;
    font-family: Arial, sans-serif;
    cursor: none;
}

/* 메뉴판 이미지 - 전체화면 */
.menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    animation: fadeIn 1s ease-in;
}

/* contain: 화면 비율이 이미지와 달라도 메뉴 내용이 잘리지 않도록 */
.menu-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 전역 리셋이 display를 덮어쓰지 않도록 명시한다 */
[hidden] {
    display: none !important;
}

/* ============================================================
   안내 화면

   이미지를 아직 받지 못했거나(loading) 받는 데 실패한(error) 동안 표시된다.
   손님에게 노출되는 화면이므로 URL·상태 코드 같은 기술 정보는 띄우지 않고
   콘솔에만 남긴다. 재시도 횟수만 작게 보여 직원이 상황을 알아챌 수 있게 한다.
   ============================================================ */
.status-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.status-message {
    font-size: 32px;
    font-weight: 500;
    color: #8A857A;
    letter-spacing: 0.02em;
}

.status-detail {
    font-size: 18px;
    color: #B5AFA3;
    min-height: 1.4em; /* 문구 유무로 위 요소가 흔들리지 않도록 */
}

/* ============================================================
   시즌 효과 (현재 미사용)

   index.html에서 캔버스/큐피드 요소를 제거해 비활성화된 상태다.
   해당 요소가 없으므로 아래 규칙은 매칭되지 않는다.
   복원 시 그대로 재사용할 수 있도록 남겨둔다.
   ============================================================ */

/* ===== Canvas 레이어 ===== */
#bokehCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
}

#heartCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
}

#trailCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    pointer-events: none;
}

/* ===== 큐피드 날아다니기 ===== */
.cupid-sleigh {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
}

.cupid-image {
    height: 156px;
    width: auto;
    object-fit: contain;
}

.cupid-sleigh.flying-left {
    animation: flyCupidLeft 8s linear;
}

.cupid-sleigh.flying-right {
    animation: flyCupidRight 8s linear;
}

@keyframes flyCupidLeft {
    0%   { left: -200px; transform: translateY(0);     opacity: 0; }
    5%   { opacity: 1; }
    25%  { transform: translateY(-80px); }
    50%  { transform: translateY(-40px); }
    75%  { transform: translateY(-100px); }
    95%  { opacity: 1; }
    100% { left: 100vw;  transform: translateY(-60px); opacity: 0; }
}

@keyframes flyCupidRight {
    0%   { right: -200px; left: auto; transform: translateY(0);     opacity: 0; }
    5%   { opacity: 1; }
    25%  { transform: translateY(-80px); }
    50%  { transform: translateY(-40px); }
    75%  { transform: translateY(-100px); }
    95%  { opacity: 1; }
    100% { right: 100vw;              transform: translateY(-60px); opacity: 0; }
}

/* 반응형 */
@media (max-width: 768px) {
    .cupid-image {
        height: 117px;
    }
}