@charset "utf-8";

@keyframes glowAnimation {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        /* 10% 확대 */
    }

    100% {
        transform: scale(1);
    }
}


/* ✨ 황금빛이 부드럽게 퍼지는 애니메이션 */
@keyframes goldGlow {
    0% {
        background-size: 180% 180%;
        background-position: center;
    }

    100% {
        background-size: 200% 200%;
        background-position: center;
    }
}

@keyframes explode {
    from {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    to {
        transform: translateX(var(--translate-x)) translateY(var(--translate-y)) rotate(720deg);
        opacity: 0;
    }
}

/* ====== 공통 스타일 ====== */
* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

body:not(.no-bg) {
    font-family: Arial, sans-serif;
    background: linear-gradient(180deg,
            #afa846 0%,
            #e5bfe6 100%);
    background-repeat: no-repeat;
    /* ❗ 반복 금지 */
    background-attachment: fixed;
    /* ❗ 화면 기준으로 고정 */
    min-height: 100vh;
    /* ❗ 최소 화면 높이 확보 */
}

/* ====== 버튼 공통 ====== */
button {
    background-color: #000000;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    border: none;
    transition: background-color 0.2s ease;
}

body.login-page .back-button,
body.dashboard-page .back-button,
body.mode-page .back-button,
body.upload-page .back-button,
body.click-page .back-button,
body.preview-page .back-button {
    position: absolute;
    top: 10px;
    left: 10px;
    transition: background-color 0.3s;
    cursor: pointer;
    z-index: 10;
}

body.dashboard-page .custom-button,
body.dashboard-page .custom-chart-button {
    color: black;
    background: none;
}



button:hover {
    background-color: #755a6a;
}

body.index-page .popup-confirm-button:hover,
body.dashboard-page #saveEdit:hover,
body.dashboard-page #closeEdit:hover,
body.dashboard-page #clearCanvas:hover,
body.dashboard-page .popup-confirm-button:hover,
body.dashboard-page .edit-button:hover,
body.dashboard-page .custom-chart-button:hover,
body.mode-page .popup-confirm:hover,
body.login-page .popup-button:hover,
body.game-page #closePopupButton:hover,
body.game-page #pre-button:hover,
body.game-page #victoryScreen button:hover,
body.game-page .start-game-btn:hover,
body.game-page .hint-confirm-button:hover,
body.post-page .popup-button:hover,
body.post-page .custom-button:hover {
    background-color: aqua;
}

body.login-page .back-button:hover,
body.mode-page .back-button:hover,
body.upload-page .back-button:hover,
body.upload-page .editor-buttons button:hover,
body.click-page .back-button:hover,
body.preview-page .back-button:hover,
body.dashboard-page .back-button:hover,
body.dashboard-page .logout-button:hover,
body.dashboard-page .custom-button:hover {
    background-color: #755a6a;
}

body.index-page button:hover,
body.mode-page .upload-selection-button:hover,
body.mode-page .preview-selection-button:hover,
body.mode-page .admin-selection-button:hover,
body.mode-page .logout-button:hover,
body.upload-page .upload-button:hover,
body.login-page #loginButton:hover,
body.post-page .button:hover {
    background-color: #755a6a;
    animation: pulse 0.4s ease-in-out infinite;
}

body.preview-page .page-footer,
body.post-page .page-footer {
    margin-top: 40px;
    padding: 20px;
    color: #333;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid #606060;
}


/* 각page의 배경설정 */
body.click-page,
body.login-page,
body.upload-page,
body.post-page,
body.tag-page {
    padding: 20px;
}

body.preview-page,
body.post-page {
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

body.index-page {
    position: relative;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #c0c0c0;
}

body.tag-page {
    position: relative;
}

body.click-page {
    text-align: center;
}

body.mode-page {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 전체 화면 높이 */
}

body.upload-page {
    text-align: center;
    position: relative;
}

body.login-page {
    text-align: center;
}

body.icon-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
}

body.preview-popup-page {
    padding: 16px;
    line-height: 1.6;
    box-sizing: border-box;
    background: #fff;
}

/* ✅ 로딩 화면 스타일 */
body.post-page .loading-indicator,
body.preview-page .loading-indicator {
    position: fixed;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    z-index: 9999;
}

/* ✅ 로딩 이미지 크기 */
body.post-page .loading-image,
body.preview-page .loading-image {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    /* 이미지 아래 여백 */
}

/* ✅ 로딩 텍스트 스타일 */
body.post-page .loading-text,
body.preview-page .loading-text {
    position: fixed;
    top: 58%;
    left: 50%;
    font-size: 16px;
    color: white;
}

/* 각 페이지의 기본적 레이아웃 설정 */
/* index-page공통 레이아웃 */
body.index-page html {
    height: 100%;
    overflow: visible;
}

/* login-page공통 레이아웃 */
body.login-page .floating-input input:focus+label,
body.login-page .floating-input input:valid+label {
    top: -1px;
    font-size: 12px;
    font-weight: bold;
    color: #4a78c2;
}

/* preview-popup-page공통 레이아웃 */
body.preview-popup-page th,
body.preview-popup-page tr,
body.preview-popup-page td {
    border-collapse: collapse;
    border: 1px solid #555;
    font-size: 15px;
    padding: 4px;
}

body.preview-popup-page tr,
body.preview-popup-page td {
    text-align: center;
}

/* game-page공통 레이아웃 */
body.game-page,
body.game-page html {
    overflow: hidden;
    /* 스크롤 막기 */
    height: 100%;
    /* 화면 전체를 채우도록 설정 */
}

body.game-page .hint-overlay,
body.game-page .game-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1500;
}

body.game-page #closePopupButton,
body.game-page #pre-button,
body.game-page .start-game-btn,
body.game-page .hint-confirm-button {
    border-radius: 5px;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    background-color: #00000000;
    color: black;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}


body.game-page .hint-popup,
body.game-page .game-popup {
    background-color: white;
    color: #000;
    padding: 30px;
    border-radius: 5px;
    text-align: center;
    width: 230px;
    height: auto;
    /* auto로 수정 */
}

body.game-page .hint-popup p,
body.game-page .game-popup p {
    margin: 0 0 30px;
}

/* nextButton과 previewButton의 기본 스타일 제거 */
body.game-page #nextButton,
body.game-page #previewButton {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: black;
    padding-bottom: 10px;
}

body.game-page #nextButton:hover,
body.game-page #previewButton:hover {
    color: aqua;
}


/* mode-page공통 레이아웃 */
body.mode-page html {
    width: 100%;
    overflow-x: hidden;
    /* ✅ 강제 좌우 스크롤 제거 */
    box-sizing: border-box;
}



body.mode-page .upload-selection-button,
body.mode-page .preview-selection-button,
body.mode-page .admin-selection-button {
    background-color: #000000;
    color: white;
    padding: 10px 15px;
    width: 150px;
    /* 버튼 너비 일정하게 */
    height: 50px;
    transition: transform 0.3s ease-in-out;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    margin-top: 30px;
    font-size: 15px;
}

/* post-page공통 레이아웃 */
body.post-page .popup-button,
body.post-page .custom-button {
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

/* dashboard-page공통 레이아웃 */
body.dashboard-page html,
body.dashboard-page {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

body.dashboard-page #popup-ok,
body.dashboard-page #popup-cancel {
    padding: 8px 15px;
    cursor: pointer;
    border: none;
    color: black;
    background: none;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

/* 🔥 수정/삭제 버튼 */
body.dashboard-page .edit-button,
body.dashboard-page .delete-button {
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    color: white;
}

/* icon-page공통 레이아웃 */
body.icon-page h1,
body.icon-page h3,
p {
    text-align: center;
}

body.icon-page #icon_studio,
body.icon-page .move_icon,
body.icon-page .bulid_icon,
body.icon-page .structure_icon,
body.icon-page .obj_icon {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: fit-content;
    margin: 0 auto;
    justify-items: center;
}

body.icon-page #icon_studio img,
body.icon-page .move_icon img,
body.icon-page .bulid_icon img,
body.icon-page .structure_icon img,
body.icon-page .obj_icon img {
    width: 90px;
    object-fit: contain;
    object-position: center;
    justify-self: center;
    align-self: center;
    cursor: pointer;
    transition: transform 0.15s ease;
}

body.icon-page #icon_studio img:hover,
body.icon-page .move_icon img:hover,
body.icon-page .bulid_icon img:hover,
body.icon-page .structure_icon img:hover,
body.icon-page .obj_icon img:hover {
    transform: scale(1.15);
}


/* upload-page공통 레이아웃 */
body.upload-page div .cat_name {
    display: flex;
    width: 80%;
    gap: 25px;
    margin: 10px auto;
}

body.upload-page h1,
body.upload-page h2,
body.upload-page h3 {
    text-align: center;
    margin: 20px 0;
}