@font-face {
    font-family: 'GangwonEducationModuche';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFLightA.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GangwonEducationModuche';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

html,
body {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

body {
    font-family: 'GangwonEducationModuche', sans-serif;
    font-weight: 700;
    color: #905431;
    background: #E3C199;
    overflow: hidden;
    height: 100vh;
}

/* 상단 헤더 */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    background: transparent;
    border: none;
    transition: transform 0.6s ease-out;
    pointer-events: none;
    /* 헤더 자체는 클릭 이벤트를 통과시킴 */
}

#map-screen .top-header {
    transform: translateY(0);
}

.header-content {
    padding: 20px 20px 30px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    position: relative;
    pointer-events: none;
    /* 헤더 콘테이너도 기본적으로 클릭 이벤트 통과 */
}

.header-square {
    width: 220px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 10px;
    background: #F5F3E5;
    border: none;
    align-self: flex-start;
    border-radius: 10px 10px 10px 0;
    pointer-events: auto;
    /* 헤더 사각형은 클릭 가능 */
    transform: translateX(-100%);
    transition: transform 0.8s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-square.slide-in {
    transform: translateX(0);
}

.header-square.slide-out {
    transform: translateX(-100%);
}

.header-title {
    font-family: "Caveat Brush", cursive;
    font-size: 2.45rem;
    font-weight: normal;
    color: #905431;
    margin: 0;
    text-align: center;
    pointer-events: auto;
    /* 제목은 클릭 가능 */
}

.screen {
    display: none;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.screen.active {
    display: flex;
}

/* 타이틀 화면 */
#title-screen {
    background: #E3C199;
    justify-content: center;
    align-items: center;
    color: white;
}

.title-content {
    text-align: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.map-container {
    position: absolute;
    top: 1vw;
    right: 0;
    width: 75vw;
    height: auto;
    z-index: 1;
    transition: width 0.8s ease-out, top 0.8s ease-out, right 0.8s ease-out, transform 0.3s ease-out;
}

#map-screen .map-container.map-expand {
    width: 90vw;
    top: 5vh;
    right: 5vw;
}

.title-map-image,
.title-spoon-image,
.title-chopsticks-image,
.title-cheftable-image {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    display: block;
    object-fit: contain;
}

.title-map-image {
    position: absolute;
    width: 75vw;
    height: auto;
    top: 1vw;
    right: 0;
    left: auto;
    z-index: 1;
    opacity: 1;
    transition: width 0.8s ease-out, height 0.8s ease-out, top 0.8s ease-out, right 0.8s ease-out, opacity 0.8s ease-out;
}

/* 맵 컨테이너 안의 지도 이미지 */
.map-container .title-map-image {
    position: relative;
    width: 100%;
    height: auto;
    top: auto;
    right: auto;
    left: auto;
}

#map-screen .title-map-image {
    opacity: 1;
}

.title-cheftable-m-image {
    position: absolute;
    bottom: -2vw;
    left: 0;
    max-width: 100vw;
    max-height: 50vh;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 1;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* 타이틀 화면 액션 버튼 (Start, Info) */
.title-action-btn {
    position: absolute;
    right: 20vw;
    bottom: 15vh;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.title-action-btn img {
    width: 8.5vw;
    height: auto;
    display: block;
    pointer-events: none;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.title-btn-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Caveat Brush", cursive;
    font-size: 1.7vw;
    color: #42210E;
    font-weight: normal;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
    text-align: center;
    transition: transform 0.3s ease;
}

.title-info-btn .title-btn-label {
    color: #F5F3E5;
    font-size: 1.5vw;
}

.title-action-btn:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

.title-action-btn:hover img {
    animation: rotate-clockwise-button-image 13s linear infinite;
    animation-delay: 0.3s;
}

.title-action-btn:hover .title-btn-label {
    transform: translate(-50%, -50%) scale(1.1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6);
}

.title-action-btn:active {
    transform: scale(0.95);
}

@keyframes rotate-clockwise-button-image {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.title-start-btn {
    right: 22vw;
}

.title-info-btn {
    right: 13vw;
}

.title-info-btn img {
    width: 6.5vw;
}

#map-screen .title-cheftable-m-image.map-hide {
    transform: translateY(100%);
    opacity: 0;
}

.title-spoon-m-shadow {
    position: absolute;
    left: 0.3vw;
    top: 17.3vw;
    transform: translateY(-50%);
    width: 25vw;
    height: auto;
    object-fit: contain;
    z-index: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    pointer-events: none;
}

.title-spoon-m-image {
    position: absolute;
    left: 0;
    top: 17vw;
    transform: translateY(-50%);
    width: 25vw;
    height: auto;
    object-fit: contain;
    z-index: 1;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

#map-screen .title-spoon-m-shadow.map-hide {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
}

#map-screen .title-spoon-m-image.map-hide {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
}

.title-chopsticks-m-shadow {
    position: absolute;
    left: 0.3vw;
    top: 8.3vw;
    transform: translateY(-50%);
    width: 14vw;
    height: auto;
    object-fit: contain;
    z-index: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    pointer-events: none;
}

.title-chopsticks-m-image {
    position: absolute;
    left: 0;
    top: 8vw;
    transform: translateY(-50%);
    width: 14vw;
    height: auto;
    object-fit: contain;
    z-index: 1;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

#map-screen .title-chopsticks-m-shadow.map-hide {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
}

#map-screen .title-chopsticks-m-image.map-hide {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
}

.title-fork-m-shadow {
    position: absolute;
    left: 0.3vw;
    top: 21.3vw;
    transform: translateY(-50%);
    width: 10vw;
    height: auto;
    object-fit: contain;
    z-index: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    pointer-events: none;
}

.title-fork-m-image {
    position: absolute;
    left: 0;
    top: 21vw;
    transform: translateY(-50%);
    width: 10vw;
    height: auto;
    object-fit: contain;
    z-index: 1;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

#map-screen .title-fork-m-shadow.map-hide {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
}

#map-screen .title-fork-m-image.map-hide {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
}

.title-knife-m-shadow {
    position: absolute;
    left: 0.3vw;
    top: 13.3vw;
    transform: translateY(-50%);
    width: 18vw;
    height: auto;
    object-fit: contain;
    z-index: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    pointer-events: none;
}

.title-knife-m-image {
    position: absolute;
    left: 0;
    top: 13vw;
    transform: translateY(-50%);
    width: 18vw;
    height: auto;
    object-fit: contain;
    z-index: 1;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

#map-screen .title-knife-m-shadow.map-hide {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
}

#map-screen .title-knife-m-image.map-hide {
    transform: translateX(-100%) translateY(-50%);
    opacity: 0;
}

.title-spoon-image {
    width: 15vw !important;
    height: auto !important;
    top: 20vw !important;
    right: 15vw !important;
    left: auto !important;
    bottom: auto !important;
    opacity: 1;
}

.title-chopsticks-image {
    width: 15vw !important;
    height: auto !important;
    bottom: 20vw !important;
    left: 15vw !important;
    top: auto !important;
    right: auto !important;
    opacity: 1;
}

.title-cheftable-image {
    width: 25vw !important;
    height: auto !important;
    bottom: 10vw !important;
    right: 10vw !important;
    top: -10px !important;
    left: auto !important;
    opacity: 0.8;
}

.title-content h1 {
    font-family: "Caveat Brush", cursive;
    font-size: 5vw;
    font-weight: normal;
    line-height: 1.0;
    margin-bottom: 0;
    color: #42210E;
    text-shadow: none;
    position: absolute;
    bottom: 10vw;
    left: 3.5vw;
    text-align: left;
    z-index: 2;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out, color 0.8s ease-out;
}

.title-content h1 .world-dietary {
    font-size: 0.85em;
}

#map-screen .title-content h1 {
    transform: scale(1);
    transform-origin: left top;
    color: #42210E;
    transition: transform 0.8s ease-out, color 0.8s ease-out;
    opacity: 1;
}

#map-screen .title-content h1.map-shrink {
    transform: scale(0.85) translateY(100px) !important;
    opacity: 0.7;
}

.subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

.btn-primary {
    padding: 12px 24px !important;
    padding-top: 15px !important;
    padding-bottom: 12px !important;
    font-size: 1.1rem !important;
    font-family: "GangwonEducationModuche", sans-serif;
    font-weight: bold;
    line-height: 1.2;
    background: #F5F3E5;
    color: #905431;
    border: none !important;
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out, background 0.3s, color 0.3s;
    position: absolute;
    bottom: 50px;
    left: 50px;
    z-index: 2;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#map-screen .btn-primary.map-hide {
    transform: translateY(100%);
    opacity: 0;
}

.btn-primary:hover {
    background: #B56B41 !important;
    color: white;
}

.btn-secondary {
    padding: 10px 20px;
    padding-top: 13px;
    padding-bottom: 10px;
    font-size: 1rem;
    font-family: "GangwonEducationModuche", sans-serif;
    font-weight: bold;
    line-height: 1.2;
    background: #F5F3E5;
    color: #905431;
    border: 2px solid black;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 버튼은 클릭 가능 */
}

.btn-secondary:hover {
    background: black;
    color: white;
}

/* 지도 화면 */
#map-screen {
    background: #E3C199;
    justify-content: center;
    align-items: center;
    color: white;
}

.map-country-btn {
    position: absolute;
    padding: 12px 24px;
    padding-top: 15px;
    padding-bottom: 12px;
    font-size: 1.1rem;
    font-family: "GangwonEducationModuche", sans-serif;
    font-weight: bold;
    line-height: 1.2;
    background: #B56B41;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s, opacity 0.8s ease-out, transform 0.8s ease-out;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
}

#map-screen .map-country-btn.map-show {
    opacity: 1;
    transform: scale(1);
}

.map-country-btn:hover,
#map-screen .map-country-btn.map-show:hover {
    background: #905431;
    color: white;
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.map-country-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #B56B41;
    transition: border-top-color 0.3s ease;
}

.map-country-btn:hover::after,
#map-screen .map-country-btn.map-show:hover::after {
    border-top-color: #905431;
}

/* 회전 애니메이션 */
@keyframes rotate-clockwise-japan {
    from {
        transform: scale(1.0) translateY(-15px) rotate(0deg);
    }
    to {
        transform: scale(1.0) translateY(-15px) rotate(360deg);
    }
}

@keyframes rotate-clockwise-china {
    from {
        transform: scale(1.0) translateY(-15px) rotate(0deg);
    }
    to {
        transform: scale(1.0) translateY(-15px) rotate(360deg);
    }
}

@keyframes rotate-clockwise-france {
    from {
        transform: translateX(-50%) scale(1.0) translateY(-15px) rotate(0deg);
    }
    to {
        transform: translateX(-50%) scale(1.0) translateY(-15px) rotate(360deg);
    }
}

/* 버튼 호버 시 해당 타이틀 이미지도 효과 */
#map-screen .japan-title.map-show {
    transition: transform 0.3s ease;
}

#map-screen .japan-title.map-show.title-hover {
    transform: scale(1.0) translateY(-15px);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

#map-screen .japan-title.map-show.title-hover.title-rotate {
    animation: rotate-clockwise-japan 13s linear infinite;
    animation-delay: 0.1s;
}

#map-screen .china-title.map-show {
    transition: transform 0.3s ease;
}

#map-screen .china-title.map-show.title-hover {
    transform: scale(1.0) translateY(-15px);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

#map-screen .china-title.map-show.title-hover.title-rotate {
    animation: rotate-clockwise-china 13s linear infinite;
    animation-delay: 0.1s;
}


/* 국가 타이틀 이미지 */
.country-title-image {
    position: absolute;
    z-index: 11;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.8s ease-out, transform 0.3s ease;
    pointer-events: none;
    max-width: 150px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

#map-screen .country-title-image.map-show {
    opacity: 1;
    transform: scale(0.8);
}

.japan-title {
    top: calc(35% - 150px);
    right: 10%;
    transform: scale(0.7);
}

#map-screen .japan-title.map-show {
    transform: scale(0.8);
}

.china-title {
    top: calc(30% - 150px);
    right: 21%;
    transform: scale(0.7);
}

#map-screen .china-title.map-show {
    transform: scale(0.8);
}

.france-title {
    top: calc(38% - 140px);
    left: 52.5%;
    transform: translateX(-50%) scale(0.7);
}

#map-screen .france-title.map-show {
    transform: translateX(-50%) scale(0.8);
    transition: transform 0.3s ease;
}

#map-screen .france-title.map-show.title-hover {
    transform: translateX(-50%) scale(1.0) translateY(-15px);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

#map-screen .france-title.map-show.title-hover.title-rotate {
    animation: rotate-clockwise-france 13s linear infinite;
    animation-delay: 0.1s;
}

/* 지도 이미지 내부 상대 위치 */
.japan-btn {
    top: 35%;
    right: 12%;
}

.china-btn {
    top: 30%;
    right: 23%;
}

.france-btn {
    top: 38%;
    left: 50%;
}

.world-map {
    position: relative;
    width: 600px;
    height: 400px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.country {
    padding: 20px 40px;
    background: #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.country.active {
    background: #4CAF50;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}

.country:hover {
    transform: scale(1.05);
}

.country-label {
    margin-top: 20px;
    font-size: 1.2rem;
    color: #905431;
}

.stamp {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.5rem;
}

/* 일본 스테이지 */
#japan-stage {
    background: transparent;
    flex-direction: column;
}

/* 중국 스테이지 */
#china-stage {
    background: transparent;
    flex-direction: column;
}

.stage-container {
    width: 105%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #E3C199;
}

.stage-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    background: #E3C199;
}

/* 일본 스테이지 게임 플레이 컨테이너 */
.japan-game-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 중국 스테이지 게임 플레이 컨테이너 */
.china-game-container {
    width: calc(100% + 600px);
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    left: -50px;
}

/* 프랑스 스테이지 */
#france-stage {
    background: transparent;
    flex-direction: column;
}

/* 프랑스 스테이지 게임 플레이 컨테이너 */
.france-game-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 프랑스 무릎 */
.france-knee {
    position: absolute;
    left: 22vw;
    top: 45vw;
    width: 25vw;
    height: auto;
    z-index: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-knee img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 프랑스 테이블 이미지 */
.france-table-image {
    position: absolute;
    left: -0.5vw;
    top: -3vw;
    width: 75vw;
    height: auto;
    z-index: 1;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-table-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 프랑스 테이블 매트 */
.france-tablemat {
    position: absolute;
    left: 8vw;
    top: 15vw;
    width: 55vw;
    height: auto;
    z-index: 2;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-tablemat img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-tablemat::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_tablemat_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 접시 1 */
.france-dish1 {
    position: absolute;
    left: 25vw;
    top: 23vw;
    width: 20vw;
    height: auto;
    z-index: 3;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-dish1 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-dish1::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_dish1_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 냅킨 */
.france-napkin {
    position: absolute;
    left: 27vw;
    top: 27vw;
    width: 17vw;
    height: auto;
    z-index: 4;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
}

.france-napkin:active {
    cursor: grabbing;
}

.france-napkin img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-napkin.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

.france-napkin.highlight-pulse img {
    animation: none;
}

.france-napkin::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_napkin_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 접시 2 */
.france-dish2 {
    position: absolute;
    left: 9vw;
    top: 16vw;
    width: 12vw;
    height: auto;
    z-index: 3;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-dish2 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-dish2::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_dish2_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 디저트 포크 */
.france-desertfork {
    position: absolute;
    left: 26vw;
    top: 20vw;
    width: 9vw;
    height: auto;
    z-index: 4;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-desertfork img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-desertfork::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_desrtfork_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 디저트 숟가락 */
.france-desertspoon {
    position: absolute;
    left: 26vw;
    top: 17vw;
    width: 9vw;
    height: auto;
    z-index: 4;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-desertspoon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-desertspoon::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_desrtspoon_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 손 */
.france-hand {
    position: absolute;
    left: 3vw;
    top: 27vw;
    width: 12vw;
    height: auto;
    z-index: 5;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-hand img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-hand:active {
    cursor: grabbing;
}

.france-hand.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

.france-hand.highlight-pulse img {
    animation: none;
}

/* 프랑스 빵 */
.france-bread {
    position: absolute;
    left: 7vw;
    top: 3.8vw;
    width: 19vw;
    height: auto;
    z-index: 3;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-bread img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-bread::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_bread_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 라운드 빵 */
.france-rbread {
    position: absolute;
    left: 10.3vw;
    top: 5.2vw;
    width: 13.5vw;
    height: auto;
    z-index: 3;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
}

.france-rbread:active {
    cursor: grabbing;
}

.france-rbread.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

.france-rbread.highlight-pulse img {
    animation: none;
}

.france-rbread img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 프랑스 메인 디시 1 */
.france-maindish1 {
    position: absolute;
    left: 30vw;
    top: 0vw;
    width: 27vw;
    height: auto;
    z-index: 3;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-maindish1 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-maindish1::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_maindish1_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 디저트 */
.france-dessert {
    position: absolute;
    left: 33vw;
    top: 0vw;
    width: 16vw;
    height: auto;
    z-index: 3;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-dessert img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-dessert::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_dessert_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 식사 마무리 접시 (dishon) - CSS에서 수정 가능 */
.france-dishon {
    position: absolute;
    left: 32.2vw;
    top: 29vw;
    width: 11vw;
    height: auto;
    z-index: 6;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.france-dishon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-dishon.dishon-appear {
    animation: dishonAppearAnimation 0.8s ease-out forwards;
}

@keyframes dishonAppearAnimation {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 스테이지 클리어 오버레이 (CSS에서 세부 조절 가능) */
.stage-clear-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 30000;
}

/* 스테이지 클리어 텍스트 (CSS에서 세부 조절 가능) */
.stage-clear-text {
    color: #fff;
    font-size: 5rem;
    font-weight: bold;
    margin-bottom: 2rem;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 스테이지 클리어 버튼 (CSS에서 세부 조절 가능) */
.stage-clear-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    background-color: #B56B41;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    margin-top: 4rem;
    transition: all 0.5s ease-in-out 1s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    font-family: 'GangwonEducationModuche', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.stage-clear-button:hover {
    background-color: #905431;
    transform: translateY(0) scale(1.05);
}

.stage-clear-button:active {
    transform: translateY(0) scale(0.95);
}

.france-dessert.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

.france-dessert.highlight-pulse img {
    animation: none;
}

/* 프랑스 와인잔 */
.france-wineglass {
    position: absolute;
    left: 50vw;
    top: 13.8vw;
    width: 10vw;
    height: auto;
    z-index: 3;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-wineglass img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-winebottle {
    position: absolute;
    left: 65vw;
    top: 4vw;
    width: 9vw;
    height: auto;
    z-index: 10;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-winebottle img {
    width: 100%;
    height: auto;
}

/* 와인병 애니메이션 */
.france-winebottle {
    opacity: 0;
    transform: translate(40px, -50px) rotate(-15deg);
}

.france-winebottle.pour-wine {
    animation: winePourAnimation 2.5s ease-in-out forwards;
}

@keyframes winePourAnimation {
    0% {
        opacity: 0;
        transform: translate(40px, -50px) rotate(-15deg);
    }
    20% {
        opacity: 1;
        transform: translate(20px, 0) rotate(-15deg);
    }
    60% {
        opacity: 1;
        transform: translate(10px, 5px) rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: translate(0, 10px) rotate(-60deg);
    }
}

/* 프랑스 물잔 */
.france-waterglass {
    position: absolute;
    left: 60vw;
    top: 22vw;
    width: 9vw;
    height: auto;
    z-index: 3;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-waterglass img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 프랑스 나이프 2 */
.france-knife2 {
    position: absolute;
    left: 45.7vw;
    top: 27.5vw;
    width: 2vw;
    height: auto;
    z-index: 4;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-knife2 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-knife2::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_knife2_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 나이프 1 */
.france-knife1 {
    position: absolute;
    left: 48vw;
    top: 28vw;
    width: 2vw;
    height: auto;
    z-index: 4;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-knife1 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-knife1::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_knife1_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 숟가락 */
.france-spoon {
    position: absolute;
    left: 50.4vw;
    top: 32vw;
    width: 2.8vw;
    height: auto;
    z-index: 4;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-spoon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-spoon::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_spoon_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 포크 2 */
.france-fork2 {
    position: absolute;
    left: 22.5vw;
    top: 30vw;
    width: 2vw;
    height: auto;
    z-index: 4;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-fork2 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-fork2::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_fork2_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 포크 1 */
.france-fork1 {
    position: absolute;
    left: 20vw;
    top: 32vw;
    width: 2vw;
    height: auto;
    z-index: 4;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-fork1 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-fork1::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_fork1_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

/* 프랑스 포크 0 */
.france-fork0 {
    position: absolute;
    left: 17.5vw;
    top: 30vw;
    width: 2vw;
    height: auto;
    z-index: 4;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.france-fork0 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.france-fork0::before {
    content: '';
    position: absolute;
    left: -0.5vw;
    top: 0.5vw;
    width: 100%;
    height: 100%;
    background-image: url('resource/fr/fr_fork0_s.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

.france-fork0:active,
.france-fork1:active,
.france-fork2:active,
.france-knife1:active,
.france-knife2:active {
    cursor: grabbing;
}

.france-fork0.highlight-pulse,
.france-fork1.highlight-pulse,
.france-fork2.highlight-pulse,
.france-knife1.highlight-pulse,
.france-knife2.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

.france-fork0.highlight-pulse img,
.france-fork1.highlight-pulse img,
.france-fork2.highlight-pulse img,
.france-knife1.highlight-pulse img,
.france-knife2.highlight-pulse img {
    animation: none;
}

.back-to-map-btn {
    position: absolute;
    left: 240px;
    top: 20px;
    margin: 0;
    margin-top: -10px;
    padding: 12px 24px !important;
    padding-top: 15px !important;
    padding-bottom: 12px !important;
    font-size: 1.1rem !important;
    line-height: 1.2;
    z-index: 10001;
    border: none !important;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 버튼은 클릭 가능 */
}

.back-to-map-btn:hover {
    background: #B56B41 !important;
    color: white;
}

.reset-btn {
    position: absolute;
    left: 380px;
    top: 20px;
    margin: 0;
    margin-top: -10px;
    padding: 12px 24px !important;
    padding-top: 15px !important;
    padding-bottom: 12px !important;
    font-size: 1.1rem !important;
    line-height: 1.2;
    z-index: 10001;
    border: none !important;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 버튼은 클릭 가능 */
}

.reset-btn:hover {
    background: #B56B41 !important;
    color: white;
}

/* 말풍선 */
.speech-bubble {
    position: absolute;
    top: 80px;
    right: 6vw;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.speech-bubble.show {
    opacity: 1;
}

.speech-bubble-content {
    background: #F5F3E5;
    border: none;
    border-radius: 18px;
    padding: 1.67vw 2.08vw;
    padding-top: 1.82vw;
    padding-bottom: 1.67vw;
    box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.25), 2px 3px 8px rgba(0, 0, 0, 0.15);
    max-width: 43.75vw;
    min-width: 30vw;
    width: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    padding-left: 2.08vw;
}

.speech-bubble-content p {
    margin: 0;
    margin-top: 3px;
    color: #905431;
    font-size: 1.32rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.next-btn {
    background: #F5F3E5;
    color: #905431;
    border: none;
    border-radius: 0.78vw;
    padding: 0.78vw 1.56vw;
    padding-top: 0.94vw;
    padding-bottom: 0.78vw;
    font-size: 1.2rem;
    font-family: "GangwonEducationModuche", sans-serif;
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 0.78vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    margin-right: auto;
    pointer-events: auto;
    box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.2), 1.5px 2px 6px rgba(0, 0, 0, 0.15);
}

.next-btn:hover {
    background: #B56B41;
    color: white;
    transform: scale(1.05);
}

.next-btn:active {
    transform: scale(0.95);
}

/* 여러 버튼 컨테이너 */
.next-buttons-container {
    display: flex;
    gap: 0.52vw;
    justify-content: flex-start;
    margin-top: 0.78vw;
    flex-wrap: wrap;
    width: 100%;
}

.next-buttons-container .next-btn {
    margin: 0;
    flex: 1;
    min-width: 6.25vw;
    max-width: 10.42vw;
}

/* 선택 버튼 이미지 컨테이너 (확장 가능한 구조) */
.selection-button-image-container {
    width: 200px;
    height: 200px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 선택 버튼 이미지 (CSS에서 수정 가능) */
.selection-button-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.speech-bubble-tail {
    position: absolute;
    right: -12px;
    top: 30px;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 27px solid #F5F3E5;
    border-right: none;
}

/* 드롭 존 영역 */
.drop-zone-area {
    flex: 1;
    position: relative;
    background: #e3c199;
    overflow: hidden;
}

.table-setting {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateY(-3%);
    /* 전체 요소를 위로 조금 이동 */
}

/* 배경 요소들 */
.top-cheftable {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    pointer-events: none;
    /* 크기는 JavaScript에서 이미지 natural size에 맞게 동적으로 설정 */
}

.debug-mode .top-cheftable {
    pointer-events: auto;
}

.table-mat {
    position: absolute;
    left: 8%;
    top: 35%;
    width: 10.42vw;
    height: 15.63vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.debug-mode .table-mat {
    pointer-events: auto;
}

.card-napkin {
    position: absolute;
    left: 10%;
    top: 60%;
    width: 4.17vw;
    height: 6.25vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-5deg);
    pointer-events: none;
}

.debug-mode .card-napkin {
    pointer-events: auto;
}

/* 그림자 이미지들 (가장 낮은 z-index) */
.image-shadow {
    position: absolute;
    z-index: 0;
    /* 원본 이미지(z-index: 5)보다 뒤, 배경 위 */
    pointer-events: none;
    opacity: 1;
    /* 확실히 보이도록 */
}

/* 밥그릇, 수저 그림자는 기본적으로 숨김 (드롭존에 배치되었을 때만 표시) */
.shadow-dish,
.shadow-spoon,
.shadow-chopsticks {
    display: none;
}

.debug-mode .image-shadow {
    pointer-events: auto;
    /* 디버그 모드에서 선택 가능 */
    cursor: pointer;
    outline: 2px dashed transparent;
    transition: outline 0.2s;
}

.debug-mode .image-shadow:hover {
    outline: 2px dashed #4CAF50;
}

.debug-mode .image-shadow.selected {
    outline: 3px solid #4CAF50;
    outline-offset: 2px;
}

.image-shadow img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    pointer-events: none;
    opacity: 1;
    /* 확실히 보이도록 */
}

.debug-mode .image-shadow img {
    pointer-events: auto;
    /* 디버그 모드에서 선택 가능 */
}

/* dish2 그림자 (soup-bowl-image와 같은 위치) */
.shadow-dish2 {
    left: 50%;
    top: 40%;
    transform: translate(calc(-100% - 3vw), calc(-50% + 6vw));
}

/* dish3, 4, 5 그림자 (japan-dish-3, 4, 5와 같은 위치) */
.shadow-dish3,
.shadow-dish4,
.shadow-dish5 {
    /* 위치는 japan-dish-3, 4, 5와 동일하게 설정 (JavaScript나 인라인 스타일로 설정됨) */
}

/* dish 그림자 (rice-bowl drop zone과 같은 위치) */
.shadow-dish {
    /* 위치는 drop-rice-bowl과 동일하게 설정 */
}

/* spoon 그림자 (drop-spoon과 같은 위치) */
.shadow-spoon {
    /* 위치는 drop-spoon과 동일하게 설정 */
}

/* chopsticks 그림자 (drop-chopsticks와 같은 위치) */
.shadow-chopsticks {
    /* 위치는 drop-chopsticks와 동일하게 설정 */
}

.soup-bowl-image {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-100%, -50%);
    z-index: 5;
    pointer-events: none;
}

.debug-mode .soup-bowl-image {
    pointer-events: auto;
}

.soup-bowl-image img {
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
}

.debug-mode .soup-bowl-image img {
    pointer-events: auto;
}

/* 중국 테이블 이미지 (배경/고정) */
.china-table-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.china-table-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 중국 테이블 이미지 1 (회전하는 테이블) */
.china-table-image-1 {
    position: absolute;
    top: -40%;
    /* 화면 상단에 걸치도록 */
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    /* 큰 테이블 */
    height: 90vw;
    z-index: 2;
    pointer-events: auto;
    cursor: grab;
    border-radius: 50%;
    user-select: none;
}

.china-table-image-1:active {
    cursor: grabbing;
}

.china-table-image-1 img.rotating-table-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* 회전하는 음식들 */
.rotating-dish {
    position: absolute;
    width: 18vw;
    height: 18vw;
    z-index: 3;
    pointer-events: none;
}

.rotating-dish img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 음식 배치 (원형 테이블 위) */
.dish-1 {
    top: 15%;
    left: 20%;
    transform: rotate(-30deg);
}

.dish-2 {
    top: 15%;
    right: 20%;
    transform: rotate(30deg);
}

.dish-3 {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
}

/* 사용자 자리 세팅 (고정) */
.user-setting-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 10;
    pointer-events: none;
}

.setting-mat {
    position: absolute;
    bottom: 5%;
    left: 15%;
    width: 35vw;
    height: 25vw;
    z-index: 11;
}

.setting-mat img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(-5deg);
}

.setting-plate {
    position: absolute;
    bottom: 10%;
    left: 20%;
    width: 18vw;
    height: 18vw;
    z-index: 12;
}

.setting-plate img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.setting-bowl {
    position: absolute;
    bottom: 25%;
    left: 32%;
    width: 10vw;
    height: 10vw;
    z-index: 13;
}

.setting-bowl img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.setting-spoon {
    position: absolute;
    top: 10%;
    left: 20%;
    width: 8vw;
    height: 8vw;
    z-index: 14;
    transform: rotate(-45deg);
}

.setting-spoon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.setting-chopsticks {
    position: absolute;
    bottom: 10%;
    left: 38%;
    width: 15vw;
    height: 25vw;
    z-index: 13;
    transform: rotate(15deg);
}

.setting-chopsticks img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.setting-tea-pot {
    position: absolute;
    bottom: 15%;
    right: 25%;
    width: 18vw;
    height: 18vw;
    z-index: 12;
}

.setting-tea-pot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.setting-tea-cup {
    position: absolute;
    bottom: 10%;
    right: 40%;
    width: 8vw;
    height: 8vw;
    z-index: 12;
}

.setting-tea-cup img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* cn 폴더 이미지들 기본 스타일 */
.cn-dish {
    position: absolute;
    left: 21vw;
    top: 25.2vw;
    width: 15.5vw;
    height: 15.5vw;
    z-index: 3;
    transform: rotate(0deg);
}

.cn-dish img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-dish2 {
    position: absolute;
    left: 33.3vw;
    top: 19.2vw;
    width: 10.3vw;
    height: 10.3vw;
    z-index: 3;
    transform: rotate(0deg);
}

.cn-dish2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-tavlemat {
    position: absolute;
    left: -0.5vw;
    top: -3vw;
    width: 63vw;
    height: 63vw;
    z-index: -1;
    transform: rotate(0deg);
}

.cn-tavlemat img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-teapot {
    position: absolute;
    left: 59.1vw;
    top: 27.0vw;
    width: 16vw;
    height: 16vw;
    z-index: 3;
    transform: rotate(0deg);
    display: none;
    /* Hide initially */
}

.cn-teapot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 주전자 기울임 애니메이션 */
@keyframes teapot-pour {
    0% {
        transform: rotate(0deg) translateX(-1.5vw) translateY(-1.5vw);
        transform-origin: center center;
    }

    50% {
        transform: rotate(-25deg) translateX(-12.5vw) translateY(-12.5vw);
        transform-origin: center center;
    }

    100% {
        transform: rotate(-25deg) translateX(-10.5vw) translateY(-12.5vw);
        transform-origin: center center;
    }
}

.cn-teapot.teapot-pouring {
    animation: teapot-pour 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.dropped-item.teapot-pouring {
    animation: teapot-pour 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* friendcup용 주전자 기울임 애니메이션 */
@keyframes teapot-pour-friendcup {
    0% {
        transform: rotate(0deg) translateX(0) translateY(0);
        transform-origin: center center;
    }

    50% {
        transform: rotate(-25deg) translateX(-35vw) translateY(-46vw);
        transform-origin: center center;
    }

    100% {
        transform: rotate(-25deg) translateX(-35vw) translateY(-46vw);
        transform-origin: center center;
    }
}

.cn-teapot.teapot-pouring-friendcup,
.dropped-item.teapot-pouring-friendcup {
    animation: teapot-pour-friendcup 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 102 !important;
    /* friendcup(z-index: 100)보다 위에 표시 */
}

/* 친구 찻잔 등장 애니메이션 */
.friend-cup-china {
    position: absolute;
    left: 9vw;
    top: 14vw;
    width: 11vw;
    height: 11vw;
    z-index: 100;
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
    transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.friend-cup-china.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.friend-cup-china img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: -1;
    /* 주전자(cn_teapot, cn_teapot_a)보다 아래에 표시 */
}

.cn-cup {
    position: absolute;
    left: 50.1vw !important;
    top: 33.0vw !important;
    width: 9vw;
    height: 9vw;
    z-index: 3;
    transform: rotate(0deg);
    display: none;
    /* Hide initially */
    /* cn_cup 이미지 위치는 드랍존과 독립적으로 설정 */
}

.cn-cup img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-chopstick {
    position: absolute;
    left: 31vw;
    top: 30.3vw;
    width: 16vw;
    height: 16vw;
    z-index: 4;
    transform: rotate(30deg);
    cursor: grab;
    pointer-events: auto;
    transition: opacity 0.2s;
}

.cn-chopstick:hover {
    opacity: 0.7;
}

.cn-chopstick:active {
    cursor: grabbing;
}

.cn-chopstick img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-chopstick2 {
    position: absolute;
    left: 11.4vw;
    top: 15.5vw;
    width: 22vw;
    height: 22vw;
    z-index: 3;
    transform: rotate(32deg);
    cursor: grab;
    pointer-events: auto;
    transition: opacity 0.2s;
}

.cn-chopstick2:hover {
    opacity: 0.7;
}

.cn-chopstick2:active {
    cursor: grabbing;
}

.cn-chopstick2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-chopstickspot {
    position: absolute;
    left: 39.4vw;
    top: 32.7vw;
    width: 3.4vw;
    height: 3.4vw;
    z-index: 3;
    transform: rotate(0deg);
}

.cn-chopstickspot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-table1 {
    position: absolute;
    left: 33.8vw;
    top: -29.5vw;
    width: 54.9vw;
    height: 54.9vw;
    z-index: 2;
    transform: rotate(0deg);
    cursor: grab;
    pointer-events: auto;
    user-select: none;
}

.cn-table1:active {
    cursor: grabbing;
}

.cn-table1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.cn-table1.highlight-blink img:not(.shadow-img) {
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.8));
}

/* maindish 그림자는 하이라이팅 제외 */
.cn-table1.highlight-blink .shadow-img {
    filter: none !important;
}

.cn-table2 {
    position: absolute;
    left: -7vlevw;
    top: -30vw;
    width: 117vw;
    height: 117vw;
    z-index: -2;
}

.cn-table2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-maindish1 {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 14vw;
    height: 14vw;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.cn-maindish1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-maindish2 {
    position: absolute;
    left: 75%;
    top: 35%;
    width: 14.5vw;
    height: 14.5vw;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.cn-maindish2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-maindish3 {
    position: absolute;
    left: 75%;
    top: 65%;
    width: 18.1vw;
    height: 18.1vw;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.cn-maindish3 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-maindish4 {
    position: absolute;
    left: 50%;
    top: 80%;
    width: 12vw;
    height: 12vw;
    z-index: 2;
    transform: translate(-50%, -50%);
    overflow: visible;
    /* Ensure drop zone is not clipped */
}

.cn-maindish4 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-maindish5 {
    position: absolute;
    left: 25%;
    top: 65%;
    width: 11.7vw;
    height: 11.7vw;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.cn-maindish5 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-maindish6 {
    position: absolute;
    left: 25%;
    top: 35%;
    width: 10vw;
    height: 10vw;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.cn-maindish6 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* China Main Dish Shadows */
[class^="cn-maindish"] {
    pointer-events: auto;
    /* Changed to auto to allow mainspoon interaction */
}

[class^="cn-maindish"]>img {
    pointer-events: none;
    /* Images themselves don't need pointer events */
}

[class^="cn-maindish"] .shadow-img {
    position: absolute;
    left: 0.5vw;
    top: 0.5vw;
    z-index: -1;
    transform: scale(1.02);
    /* Slightly larger for soft shadow effect */
}

[class^="cn-maindish"] img:not(.shadow-img) {
    position: relative;
    z-index: 1;
}

/* Other China Stage Shadows */
.cn-chopstick .shadow-img {
    position: absolute;
    left: 6.7vw;
    top: 0.3vw;
    z-index: -10;
    transform: scale(0.95);
}

.cn-chopstick2 .shadow-img {
    position: absolute;
    left: 0.5vw;
    top: 0.5vw;
    z-index: -1;
    transform: scale(1.02);
}

.cn-dish2 .shadow-img {
    position: absolute;
    left: 1.2vw;
    top: 1.2vw;
    z-index: -1;
    transform: scale(1.02);
}

.cn-dish .shadow-img {
    position: absolute;
    left: -0.8vw;
    top: -0.1vw;
    z-index: -1;
    transform: scale(0.85);
}

.cn-chopstickspot .shadow-img,
.cn-cup .shadow-img,
.cn-tavlemat .shadow-img,
.cn-teapot .shadow-img {
    position: absolute;
    left: 0.5vw;
    top: 0.5vw;
    z-index: -1;
    transform: scale(1.02);
}

.cn-chopstick img:not(.shadow-img),
.cn-chopstick2 img:not(.shadow-img),
.cn-chopstickspot img:not(.shadow-img),
.cn-cup img:not(.shadow-img),
.cn-dish img:not(.shadow-img),
.cn-dish2 img:not(.shadow-img),
.cn-tavlemat img:not(.shadow-img),
.cn-teapot img:not(.shadow-img) {
    position: relative;
    z-index: 1;
}

.cn-mandu {
    position: absolute;
    left: -0.5vw;
    top: 0vw;
    width: 3.4vw;
    height: 3.4vw;
    z-index: 1;
}

.cn-mandu img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-mandu2 {
    position: absolute;
    left: -0.5vw;
    top: 0vw;
    width: 3.4vw;
    height: 3.4vw;
    z-index: 1;
}

.cn-mandu2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 디버그 모드 */
.debug-toggle-btn {
    display: none !important;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #333;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}

.debug-toggle-btn:hover {
    background: #B56B41;
    transform: scale(1.1);
}

.debug-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    background: white;
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    max-height: 80vh;
    overflow-y: auto;
}

.debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #333;
    color: white;
    border-radius: 6px 6px 0 0;
}

.debug-header h3 {
    margin: 0;
    font-size: 16px;
}

.debug-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    transition: background 0.2s;
}

.debug-close-btn:hover {
    background: #B56B41;
    color: white;
}

.debug-content {
    padding: 15px;
}

.debug-info {
    margin-bottom: 15px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.debug-info p {
    margin: 0;
    font-size: 14px;
}

.debug-info span {
    font-weight: bold;
    color: #4CAF50;
}

.debug-controls label {
    display: block;
    margin-bottom: 15px;
    font-size: 14px;
}

.debug-controls input[type="range"] {
    width: 100%;
    margin-top: 5px;
}

.debug-controls span {
    display: inline-block;
    min-width: 50px;
    font-weight: bold;
    color: #333;
}

.debug-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.debug-btn {
    flex: 1;
    padding: 10px;
    background: #F5F3E5;
    color: #905431;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-family: "GangwonEducationModuche", sans-serif;
    font-weight: bold;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.debug-btn:hover {
    background: #B56B41;
    color: white;
}

.debug-btn:active {
    transform: scale(0.95);
}

/* 디버그 모드에서 선택 가능한 요소 */
.debug-mode .china-utensil,
.debug-mode .china-utensil img,
.debug-mode .china-table-image-1,
.debug-mode .china-table-image-1 img,
.debug-mode .china-table-image,
.debug-mode .china-table-image img,
.debug-mode .soup-bowl-image,
.debug-mode .soup-bowl-image img,
.debug-mode .spoonspot-image,
.debug-mode .spoonspot-image img,
.debug-mode .hand-draggable,
.debug-mode .hand-draggable img,
.debug-mode .top-cheftable,
.debug-mode .card-napkin,
.debug-mode .drop-zone .dropped-item,
.debug-mode .drop-zone .dropped-item img,
.debug-mode .cheftable-rice-bowl,
.debug-mode .cheftable-rice-bowl img,
.debug-mode #grab-image,
.debug-mode #grab-image img,
.debug-mode .japan-dish-3,
.debug-mode .japan-dish-3 img,
.debug-mode .japan-dish-4,
.debug-mode .japan-dish-4 img,
.debug-mode .japan-dish-5,
.debug-mode .japan-dish-5 img {
    cursor: pointer;
    outline: 2px dashed transparent;
    transition: outline 0.2s;
}

.debug-mode .china-utensil:hover,
.debug-mode .china-utensil img:hover,
.debug-mode .china-table-image-1:hover,
.debug-mode .china-table-image-1 img:hover,
.debug-mode .china-table-image:hover,
.debug-mode .china-table-image img:hover,
.debug-mode .soup-bowl-image:hover,
.debug-mode .soup-bowl-image img:hover,
.debug-mode .spoonspot-image:hover,
.debug-mode .spoonspot-image img:hover,
.debug-mode .hand-draggable:hover,
.debug-mode .hand-draggable img:hover,
.debug-mode .top-cheftable:hover,
.debug-mode .card-napkin:hover,
.debug-mode .drop-zone .dropped-item:hover,
.debug-mode .drop-zone .dropped-item img:hover,
.debug-mode .cheftable-rice-bowl:hover,
.debug-mode .cheftable-rice-bowl img:hover,
.debug-mode #grab-image:hover,
.debug-mode #grab-image img:hover,
.debug-mode .japan-dish-3:hover,
.debug-mode .japan-dish-3 img:hover,
.debug-mode .japan-dish-4:hover,
.debug-mode .japan-dish-4 img:hover,
.debug-mode .japan-dish-5:hover,
.debug-mode .japan-dish-5 img:hover {
    outline: 2px dashed #4CAF50;
}

.debug-mode .china-utensil.selected,
.debug-mode .china-utensil.selected img,
.debug-mode .china-table-image-1.selected,
.debug-mode .china-table-image-1.selected img,
.debug-mode .china-table-image.selected,
.debug-mode .china-table-image.selected img,
.debug-mode .soup-bowl-image.selected,
.debug-mode .soup-bowl-image.selected img,
.debug-mode .spoonspot-image.selected,
.debug-mode .spoonspot-image.selected img,
.debug-mode .hand-draggable.selected,
.debug-mode .hand-draggable.selected img,
.debug-mode .top-cheftable.selected,
.debug-mode .card-napkin.selected,
.debug-mode .drop-zone .dropped-item.selected,
.debug-mode .drop-zone .dropped-item.selected img,
.debug-mode .cheftable-rice-bowl.selected,
.debug-mode .cheftable-rice-bowl.selected img,
.debug-mode #grab-image.selected,
.debug-mode #grab-image.selected img,
.debug-mode .japan-dish-3.selected,
.debug-mode .japan-dish-3.selected img,
.debug-mode .japan-dish-4.selected,
.debug-mode .japan-dish-4.selected img,
.debug-mode .japan-dish-5.selected,
.debug-mode .japan-dish-5.selected img {
    outline: 3px solid #4CAF50;
    outline-offset: 2px;
}

/* dish 3, 4, 5 이미지 (드래그 불가능, 디버그 모드에서만 수정 가능) */
.japan-dish-3,
.japan-dish-4,
.japan-dish-5 {
    position: absolute;
    pointer-events: none;
    /* 드래그 불가능 */
}

.debug-mode .japan-dish-3,
.debug-mode .japan-dish-4,
.debug-mode .japan-dish-5 {
    pointer-events: auto;
    /* 디버그 모드에서만 선택 가능 */
}

/* spoonspot 이미지 (드래그 불가능, 디버그 모드에서만 수정 가능) */
.spoonspot-image {
    position: absolute;
    pointer-events: none;
    /* 드래그 불가능 */
    z-index: 0;
    /* 드랍된 아이템과 드랍존보다 아래 레이어 */
}

.debug-mode .spoonspot-image {
    pointer-events: auto;
    /* 디버그 모드에서만 선택 가능 */
}

.spoonspot-image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    pointer-events: none;
    position: relative;
    z-index: 0;
}

.debug-mode .spoonspot-image img {
    pointer-events: auto;
    /* 디버그 모드에서 선택 가능 */
}

.japan-dish-3 img,
.japan-dish-4 img,
.japan-dish-5 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 손 이미지 (드래그 가능) */
.hand-draggable {
    position: absolute;
    left: 1.04vw;
    bottom: -15.63vw;
    z-index: 1000;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
}

.hand-draggable:active {
    cursor: grabbing;
}

.hand-draggable img {
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
    transition: transform 0.1s ease-out;
}

.grab-text,
#grab-text-china {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    color: #905431;
    z-index: 100;
    pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.grab-image-container {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}

.grab-image-container img {
    display: block;
    width: auto;
    height: auto;
}

.grab-drop-zone {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 80px);
    height: calc(100% - 200px);
    display: flex;
    border: 3px dashed #F5F3E5;
    background: rgba(200, 200, 200, 0.1);
    pointer-events: auto;
    z-index: 1001;
}

.grab-zone-left,
.grab-zone-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #905431;
    border-right: 2px dashed #F5F3E5;
    transition: background 0.2s;
}

.grab-zone-right {
    border-right: none;
}

.grab-zone-left.drag-over {
    background: rgba(245, 243, 229, 0.2);
    border-right: 2px dashed #905431;
}

.grab-zone-right.drag-over {
    background: rgba(245, 243, 229, 0.2);
}

/* 밥그릇 드롭존 (숟가락/젓가락용) */
.rice-bowl-drop-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    border: 3px dashed #F5F3E5;
    background: rgba(200, 200, 200, 0.1);
    pointer-events: auto;
    z-index: 100;
}

.rice-bowl-zone-left,
.rice-bowl-zone-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #905431;
    border-right: 2px dashed #F5F3E5;
    transition: background 0.2s;
}

.rice-bowl-zone-right {
    border-right: none;
}

.rice-bowl-zone-left.drag-over {
    background: rgba(245, 243, 229, 0.2);
    border-right: 2px dashed #905431;
}

.rice-bowl-zone-right.drag-over {
    background: rgba(245, 243, 229, 0.2);
}

/* 손가락 가이드 애니메이션 */
.finger-guide {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}

.finger-guide img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    animation: fingerPulse 1s ease-in-out infinite;
}

@keyframes fingerPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

/* 드롭 존들 */
.drop-zone {
    position: absolute;
    border: 3px dashed #F5F3E5;
    border-radius: 10px;
    background: rgba(200, 200, 200, 0.1);
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    min-height: 50px;
    overflow: visible;
    z-index: 5;
    /* spoonspot-image보다 위에 표시 */
}

.drop-zone.drag-over {
    border: 3px dashed #F5F3E5;
    background: rgba(245, 243, 229, 0.2);
    transform: scale(1.05);
}

.drop-zone.correct {
    /* 초록색으로 바뀌지 않도록 스타일 제거 */
}

.drop-zone-label {
    font-size: 0.9rem;
    color: #905431;
    font-weight: bold;
}

.drop-zone.filled {
    border: none;
    background: transparent;
}

.drop-zone.filled .drop-zone-label {
    display: none;
}

/* 밥그릇 드롭 존 (중앙) */
#drop-rice-bowl {
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    /* 크기는 JavaScript에서 이미지 natural size에 맞게 동적으로 설정 */
}

/* 국그릇 드롭 존 (밥그릇 옆) */
#drop-soup-bowl {
    /* 위치는 JavaScript에서 이미지 크기에 맞게 동적으로 설정 */
    /* 크기는 JavaScript에서 이미지 natural size에 맞게 동적으로 설정 */
}

/* 숟가락 드롭 존 (밥그릇 오른쪽) */
#drop-spoon {
    left: 58%;
    top: 50%;
    transform: translateY(-50%);
    /* 크기는 JavaScript에서 이미지 natural size에 맞게 동적으로 설정 */
}

/* 젓가락 드롭 존 (밥그릇 밑) */
#drop-chopsticks {
    left: 50%;
    top: 50%;
    /* 위치와 회전은 JavaScript에서 동적으로 설정 */
    /* 크기는 JavaScript에서 이미지 natural size에 맞게 동적으로 설정 */
}

/* 수저 드랍존 v2 - CSS에서 vw 단위로 직접 설정 */
#drop-spoon[data-utensil-v2="true"] {
    left: 64vw !important;
    top: 30vw !important;
    width: 4vw !important;
    height: 21vw !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

#drop-chopsticks[data-utensil-v2="true"] {
    left: 50vw !important;
    top: 50vw !important;
    width: 4vw !important;
    height: 21vw !important;
    transform: none !important;
    transform-origin: center !important;
    margin: 0 !important;
}

#drop-chopsticks-2[data-utensil-v2="true"] {
    left: 50vw !important;
    top: 34vw !important;
    width: 4vw !important;
    height: 21vw !important;
    transform: rotate(-90deg) !important;
    transform-origin: center !important;
    margin: 0 !important;
}

/* 프랑스 스테이지 와인잔 드랍존 */
#drop-wineglass {
    left: 50vw;
    top: 13.8vw;
    transform: translate(-50%, 0);
    width: 10vw;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 와인잔 위치에 맞춰 배치 (CSS에서 편집 가능) */
}

#drop-waterglass {
    left: 60vw;
    top: 22vw;
    transform: translate(-50%, 0);
    width: 9vw;
    height: 12vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 물잔 위치에 맞춰 배치 (CSS에서 편집 가능) */
}

#drop-napkin {
    left: 21vw;
    top: 44vw;
    width: 28vw;
    height: 23vw;
    /* 무릎 위치에 맞춰 배치 */
}

#drop-rbread {
    left: 28.3vw;
    top: 25.2vw;
    width: 15.5vw;
    height: 13vw;
    /* 라운드 빵 위치에 맞춰 배치 (테이블 매트 위) */
    display: none; /* 처음에는 숨김 */
}

#drop-dish2 {
    left: 9vw;
    top: 16vw;
    width: 12vw;
    height: 12vw;
    /* 접시 2 위치에 맞춰 배치 */
    display: none; /* 처음에는 숨김 */
    border-radius: 50%; /* 원형 */
}

#drop-rbread-utensils {
    left: 28.3vw;
    top: 25.2vw;
    width: 15.5vw;
    height: 13vw;
    /* 빵 위치에 맞춰 배치 */
    display: none; /* 처음에는 숨김 */
}

.drop-zone-text {
    color: #F5F3E5;
    font-size: 2rem;
    font-weight: 900;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    top: 0.5vw;
    display: none;
}

.drop-zone.drag-over .drop-zone-text {
    color: #F5F3E5;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    display: block;
}

/* 와인/물잔 드랍존 텍스트 중앙 정렬 */
#drop-wineglass .drop-zone-text,
#drop-waterglass .drop-zone-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

#drop-dish1 {
    left: 28vw;
    top: 26vw;
    width: 15vw;
    height: 15vw;
    /* 접시 1 위치에 맞춰 배치 */
    display: none; /* 처음에는 숨김 */
}

#drop-dessert {
    left: 27.2vw;
    top: 25vw;
    width: 16vw;
    height: 16vw;
    /* 디저트 위치에 맞춰 배치 */
    display: none; /* 처음에는 숨김 */
}

/* 프랑스 스테이지 접시1 드랍존에 드롭된 접시 이미지 크기 조정 */
#drop-dish1 .dropped-item img {
    width: 19vw !important;
    height: auto !important;
    transform: none;
}

/* 프랑스 스테이지 접시1 위 원형 드랍존 (고기 자르기용) */
#drop-dish1-meat {
    position: absolute;
    left: 25.5vw;
    top: 22vw;
    width: 20vw;
    height: 20vw;
    z-index: 10;
    overflow: visible;
    border-radius: 50%;
    border: none;
    background: transparent;
}

/* 반원 드랍존 공통 스타일 */
.drop-zone-meat-half {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 3px dashed #F5F3E5;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.3s;
    box-sizing: border-box;
}

/* 왼쪽 반원 (전부 자르기) */
.drop-zone-meat-left {
    left: 0;
    border-radius: 10vw 0 0 10vw;
    border-right: 2px solid #F5F3E5;
}

/* 오른쪽 반원 (조금만 자르기) */
.drop-zone-meat-right {
    right: 0;
    border-radius: 0 10vw 10vw 0;
    border-left: none;
}

/* 반원 드랍존 텍스트 */
.drop-zone-meat-text {
    color: #905431;
    font-size: 1.2vw;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.05em;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8), 1px 1px 2px rgba(255, 255, 255, 0.6), 0 0 1px rgba(144, 84, 49, 0.3);
    white-space: nowrap;
    z-index: 1;
    display: none;
}

/* 드래그 오버 시 텍스트 표시 */
.drop-zone-meat-half.drag-over .drop-zone-meat-text {
    display: block;
}

/* 드래그 오버 시 하이라이팅 */
.drop-zone-meat-half.drag-over {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* 원형 드랍존 하이라이팅 */
.drop-zone-meat-half.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

/* 디저트 원형 드랍존 */
#drop-dessert-utensils,
.drop-dessert-utensils {
    position: absolute;
    left: 27.2vw;
    top: 23.6vw;
    width: 16vw;
    height: 16vw;
    transform: translate(-50%, -50%);
    z-index: 10;
    border-radius: 50%;
    border: 2px dashed #F5F3E5;
    background: rgba(255, 255, 255, 0.15);
    overflow: visible;
    box-sizing: border-box;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#drop-dessert-utensils.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

/* 디저트 숟가락 하이라이팅 */
.france-desertspoon.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

.france-desertspoon.highlight-pulse img {
    animation: none;
}

/* 디저트 포크 하이라이팅 */
.france-desertfork.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
    transform-origin: center;
}

.france-desertfork.highlight-pulse img {
    animation: none;
}

/* 슬롯 메뉴 */
.slot-menu {
    position: fixed;
    top: 300px;
    right: 20px;
    bottom: 20px;
    width: 25vw;
    min-width: 25vw;
    max-width: 25vw;
    background: #F5F3E5;
    border-left: none;
    border-radius: 20px;
    padding: 0;
    padding-right: 15px;
    overflow: hidden;
    z-index: 9999;
    display: none;
    flex-direction: column;
    transform-origin: top right;
}

.slot-menu[style*="display: flex"],
.slot-menu[style*="display: block"],
.slot-menu[style*="display:flex"],
.slot-menu[style*="display:block"] {
    display: flex !important;
}

.slot-menu>.slot-items {
    padding: 20px;
    padding-top: 20px;
    padding-right: 20px;
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #905431 transparent;
    /* Firefox */
    scrollbar-gutter: stable;
}

.slot-menu>.slot-items::-webkit-scrollbar {
    width: 6px;
}

.slot-menu>.slot-items::-webkit-scrollbar-button {
    display: none;
}

.slot-menu>.slot-items::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
    margin: 20px 0 20px 5px;
}

.slot-menu>.slot-items::-webkit-scrollbar-thumb {
    background: #905431;
    border-radius: 10px;
    min-height: 30px;
}

.slot-menu>.slot-items::-webkit-scrollbar-thumb:hover {
    background: #7a4328;
}


.slot-menu-tab {
    display: none;
}


/* 젓가락 정보 메뉴 */
.info-menu {
    position: fixed;
    top: 300px;
    right: 20px;
    bottom: 20px;
    width: 25vw;
    min-width: 25vw;
    max-width: 25vw;
    background: #C08564;
    border-left: none;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 0;
    padding-right: 15px;
    overflow: hidden;
    z-index: 10002;
    display: none;
    flex-direction: column;
    transform-origin: top right;
}

.info-menu[style*="display: flex"],
.info-menu[style*="display: block"],
.info-menu[style*="display:flex"],
.info-menu[style*="display:block"] {
    display: flex !important;
}

.info-menu>.info-menu-scroll-content {
    padding: 20px;
    padding-top: 20px;
    padding-right: 20px;
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #F5F3E5 transparent;
    /* Firefox */
    scrollbar-gutter: stable;
}

.info-menu>.info-menu-scroll-content::-webkit-scrollbar {
    width: 6px;
}

.info-menu>.info-menu-scroll-content::-webkit-scrollbar-button {
    display: none;
}

.info-menu>.info-menu-scroll-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
    margin: 20px 0 20px 5px;
}

.info-menu>.info-menu-scroll-content::-webkit-scrollbar-thumb {
    background: #F5F3E5;
    border-radius: 10px;
    min-height: 30px;
}

.info-menu>.info-menu-scroll-content::-webkit-scrollbar-thumb:hover {
    background: #e0ddd0;
}



.info-menu-tab {
    display: none;
}

.info-menu-close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 28px;
    color: #F5F3E5;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 11;
    transition: all 0.3s;
    margin-left: auto;
}

.info-menu-close:hover {
    background: #B56B41;
    color: white;
}

.info-menu-title {
    color: #F5F3E5;
    margin-bottom: 35px;
    font-size: 1.8rem;
    padding-left: 50px;
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1;
    margin-top: 0;
}

.info-menu-title::before {
    content: '';
    position: absolute;
    left: 10px;
    top: calc(50% - 5.5px);
    transform: translateY(-50%);
    width: 24px;
    height: 2px;
    display: block;
    background: #F5F3E5;
    box-shadow:
        0 8px 0 #F5F3E5,
        0 16px 0 #F5F3E5;
}

.info-menu h3 {
    color: #F5F3E5;
    margin: 0 0 8px 0;
    font-size: 1.4rem;
    font-weight: bold;
    padding-right: 30px;
    padding-left: 10px;
    text-align: center;
}

.info-menu-scroll-content h3 {
    position: relative;
    left: calc(50% + 7.5px);
    transform: translateX(-50%);
}

.info-menu-image {
    width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 15px;
    position: relative;
    min-height: 200px;
}

.info-menu-image::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 1.8;
    background: white;
    border-radius: 8px;
    position: absolute;
    left: calc(50% + 7.5px);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.info-menu-image img {
    max-width: 300px;
    max-height: 180px;
    width: auto;
    height: auto;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    transform: none;
    margin: 0 auto;
    display: block;
}

.info-menu-content {
    color: #F5F3E5;
    line-height: 1.6;
    margin-top: 10px;
    padding-left: calc(50% - 150px + 7.5px);
}

.info-menu-content p {
    margin: 0 0 12px 0;
    font-size: 1.2rem;
}

.info-menu-content p:last-child {
    margin-bottom: 0;
}

.menu-header {
    position: sticky;
    top: 0;
    background: inherit;
    padding: 12px 20px;
    padding-top: 12px;
    padding-bottom: 10px;
    margin-bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 2px solid rgba(144, 84, 49, 0.2);
}

.slot-menu .menu-header {
    background: #F5F3E5;
}

.info-menu .menu-header {
    background: #C08564;
}

.menu-icon {
    font-size: 1.5rem;
    color: #905431;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.info-menu .menu-icon {
    color: #F5F3E5;
}

.menu-header h3 {
    color: #905431;
    margin: 0;
    font-size: 1.8rem;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1;
    flex: 1;
}

.slot-menu .menu-header h3 {
    color: #905431 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 8.5px;
}

.info-menu .menu-header h3 {
    color: #F5F3E5;
    margin-top: 8.5px;
}

/* 빵 배치 예절 인포 메뉴 z-index 조정 (다른 인포 메뉴보다 아래에 표시) */
#bread-placement-info-menu-france {
    z-index: 10001 !important;
}

/* 젓가락 놓기 예절 인포 메뉴 z-index 조정 (식기 사용 예절보다 아래에 표시) */
#utensil-placement-info-menu {
    z-index: 10001 !important;
}

/* 식기 사용 예절 인포 메뉴 z-index 조정 (젓가락 놓기 예절보다 높고, 젓가락 사용 예절보다 낮게) */
#utensil-holding-info-menu {
    z-index: 10002 !important;
}

/* 젓가락 사용 예절 인포 메뉴 z-index 조정 (식기 사용 예절보다 높게) */
#chopsticks-info-menu {
    z-index: 10003 !important;
}

/* 젓가락 사용 예절 2 인포 메뉴 z-index 조정 (식기 사용 예절보다 높고, 다른 인포보다 낮게) */
#chopsticks-etiquette-2-info-menu {
    z-index: 10003 !important;
}

/* 숟가락 사용 금지 인포 메뉴 z-index 조정 (식기 사용 예절보다 높게) */
#spoon-forbidden-info-menu {
    z-index: 10004 !important;
}

/* 기획의도 모달 */
.info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.info-modal-overlay.show {
    opacity: 1;
}

.info-modal-container {
    background: #F5F3E5;
    border-radius: 20px;
    padding: 0;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.info-modal-overlay.show .info-modal-container {
    transform: scale(1);
}

.info-modal-container .menu-header {
    background: #F5F3E5;
    border-bottom: 2px solid rgba(144, 84, 49, 0.2);
}

.info-modal-container .menu-header h3 {
    color: #905431;
    margin-top: 11px;
}

.info-modal-container .menu-icon {
    color: #905431;
}

.info-modal-close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 28px;
    color: #905431;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    z-index: 11;
    margin-left: auto;
}

.info-modal-close:hover {
    background: #B56B41;
    color: white;
}

.info-modal-content {
    padding: 20px 40px;
    padding-top: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.info-modal-content h2 {
    font-family: 'GangwonEducationModuche', sans-serif;
    font-size: 1.6rem;
    color: #905431;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

.info-modal-text {
    color: #905431;
    line-height: 1.4;
    font-size: 1.1rem;
    font-family: 'GangwonEducationModuche', sans-serif;
    text-align: center;
}

.info-modal-text p {
    margin-bottom: 8px;
}

.info-modal-text p:last-child {
    margin-bottom: 0;
}

.slot-menu>h3 {
    display: none;
}


.slot-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.slot-item {
    background: white;
    border: 2px dashed transparent;
    border-radius: 18px;
    padding: 20px 12px;
    cursor: grab;
    transition: all 0.3s;
    text-align: center;
    user-select: none;
    max-width: 240px;
    min-height: 192px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: auto;
}

/* 비활성화된 슬롯 아이템 스타일 - 최고 우선순위 */
#slot-menu-japan .slot-item.disabled,
#slot-menu-china .slot-item.disabled,
.slot-menu .slot-item.disabled,
.slot-item.disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.3 !important;
    filter: grayscale(50%) !important;
    user-drag: none !important;
    -webkit-user-drag: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    transform: none !important;
    box-shadow: none !important;
    border: 2px dashed transparent !important;
    transition: none !important;
}

#slot-menu-japan .slot-item.disabled:hover,
#slot-menu-japan .slot-item.disabled:active,
#slot-menu-japan .slot-item.disabled:focus,
#slot-menu-china .slot-item.disabled:hover,
#slot-menu-china .slot-item.disabled:active,
#slot-menu-china .slot-item.disabled:focus,
.slot-item.disabled:hover,
.slot-item.disabled:active,
.slot-item.disabled:focus,
.slot-item.disabled:hover *,
.slot-item.disabled:active *,
.slot-item.disabled:focus * {
    transform: none !important;
    box-shadow: none !important;
    border: 2px dashed transparent !important;
    opacity: 0.3 !important;
    filter: grayscale(50%) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.slot-item.disabled * {
    pointer-events: none !important;
    user-drag: none;
    -webkit-user-drag: none;
}

.slot-item:not(.disabled):hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 2px dashed #905431;
}

.slot-item:not(.disabled):active {
    cursor: grabbing;
}

.slot-item.dragging {
    opacity: 0.5;
}

.slot-item.highlight-pulse {
    border: 2px dashed #905431 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

.slot-item.highlight-pulse .item-icon {
    animation: pulseHighlight 1s ease-in-out infinite;
}

@keyframes pulseHighlight {

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

    50% {
        transform: scale(1.08);
    }
}

.hand-draggable.highlight-pulse img {
    animation: pulseHighlight 1.5s ease-in-out infinite;
}

.cheftable-bill {
    position: absolute;
    left: 50vw;
    transform: translate(-50%, 0);
    z-index: 100;
    transition: opacity 0.5s ease-in, top 1s ease-out;
}

.cheftable-bill.highlight-pulse img {
    animation: pulseHighlight 1.5s ease-in-out infinite;
}

.drop-zone.highlight-pulse {
    animation: dropZoneScalePulse 1.5s ease-in-out infinite;
}

/* 일본 스테이지 드랍존 하이라이팅 시 드랍존 자체는 scale하지 않음 (내부 아이템 위치 유지) */
#japan-stage .drop-zone.highlight-pulse {
    animation: none;
}

@keyframes dropZoneScalePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* 드롭존 내부의 드롭된 아이템에만 하이라이트 애니메이션 적용 (기존 transform 유지) */
.drop-zone.highlight-pulse .dropped-item {
    animation: pulseHighlightWithTransform 1.5s ease-in-out infinite;
}

@keyframes pulseHighlightWithTransform {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

.drop-zone.highlight-pulse .dropped-item img {
    animation: none;
}

/* 일본 스테이지 예외 처리 - 더 구체적인 규칙이 나중에 오므로 우선순위가 높음 */

.dropped-item.highlight-pulse img {
    animation: pulseHighlight 1.5s ease-in-out infinite;
}

.item-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slot-item span {
    display: block;
    color: #905431;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 8px 0;
    margin-top: auto;
}

/* 드롭된 아이템 */
.dropped-item {
    position: absolute;
    pointer-events: auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: opacity 0.2s;
    top: 50%;
    transform-origin: center;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dropped-item:hover {
    opacity: 0.7;
}

.dropped-item:active {
    cursor: grabbing;
}

.dropped-item.dragging {
    opacity: 0.5;
}

/* rbread가 drop-dish2에 배치될 때 위쪽으로 조정 */
#drop-dish2 .dropped-item[data-item-type="rbread"] {
    transform: translate(-50%, -60%);
}

/* 프랑스 스테이지 테이블 쪽 드랍존에 드롭된 빵 이미지 크기 조정 및 애니메이션 */
#drop-rbread .dropped-item img:not(.shadow-img) {
    width: 14vw !important;
    height: auto !important;
    transform: translateX(-1vw);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* 프랑스 스테이지 테이블 쪽 드랍존에 드롭된 빵 그림자 이미지 크기 조정 */
#drop-rbread .dropped-item .shadow-img {
    width: 14vw !important;
    height: auto !important;
    transform: translateX(-1vw);
}

/* 프랑스 스테이지 디저트 드랍존에 드롭된 디저트 이미지 크기 조정 */
#drop-dessert .dropped-item img:not(.shadow-img) {
    width: 16vw !important;
    height: auto !important;
    transform: none;
}

/* 프랑스 스테이지 디저트 드랍존에 드롭된 디저트 그림자 이미지 크기 조정 */
#drop-dessert .dropped-item .shadow-img {
    width: 16vw !important;
    height: auto !important;
    transform: none;
}

.dropped-item img {
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
}

/* 일본 스테이지 드랍된 밥그릇과 수저 크기 조정 */
#japan-stage #drop-rice-bowl .dropped-item img {
    transform: scale(0.85);
}

/* 일본 스테이지 드랍된 숟가락 크기 조정 */
#japan-stage #drop-spoon .dropped-item img {
    transform: scale(0.7);
}

/* 일본 스테이지 드랍된 젓가락 크기 설정 */
#japan-stage #drop-chopsticks .dropped-item img,
#japan-stage #drop-chopsticks-2 .dropped-item img {
    width: 4vw !important;
    height: auto !important;
    transform: none;
}

/* 일본 스테이지 드롭된 아이템의 하이라이트 애니메이션 (이미지에만 적용) */
#japan-stage .drop-zone.highlight-pulse .dropped-item {
    animation: none !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center;
}

/* 일본 스테이지 드롭된 숟가락 이미지 하이라이트 애니메이션 (기존 scale(0.7) 유지) */
#japan-stage #drop-spoon.highlight-pulse .dropped-item img,
#japan-stage .drop-zone.highlight-pulse #drop-spoon .dropped-item img {
    animation: pulseHighlightSpoon 1.5s ease-in-out infinite !important;
    transform-origin: center !important;
}

/* 일본 스테이지 드롭된 젓가락 이미지 하이라이트 애니메이션 (기존 transform 유지) */
#japan-stage #drop-chopsticks.highlight-pulse .dropped-item img,
#japan-stage .drop-zone.highlight-pulse #drop-chopsticks .dropped-item img,
#japan-stage #drop-chopsticks-2.highlight-pulse .dropped-item img,
#japan-stage .drop-zone.highlight-pulse #drop-chopsticks-2 .dropped-item img {
    animation: pulseHighlightChopsticks 1.5s ease-in-out infinite !important;
    transform-origin: center !important;
}

@keyframes pulseHighlightSpoon {
    0%, 100% {
        transform: scale(0.7);
    }
    50% {
        transform: scale(0.756);
    }
}

@keyframes pulseHighlightChopsticks {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* 셰프테이블에서 나타나는 밥그릇 */
.cheftable-rice-bowl {
    position: absolute;
    cursor: grab;
    z-index: 10;
}

.cheftable-rice-bowl:active {
    cursor: grabbing;
}

.cheftable-rice-bowl img {
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
}

/* 알림 모달 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 400px;
}

.modal-content p {
    font-size: 1.3rem;
    color: #905431;
    margin-bottom: 20px;
    font-weight: bold;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .title-content h1 {
        font-size: 1.75vw;
    }

    .subtitle {
        font-size: 1rem;
    }

    .stage-content {
        flex-direction: column;
    }

    .slot-menu {
        width: 100%;
        height: 200px;
        border-left: none;
        border-top: 2px solid #e0e0e0;
    }

    .slot-items {
        flex-direction: row;
        overflow-x: auto;
    }

    .slot-item {
        min-width: 120px;
    }
}

/* China Stage Drop Zones */
.cn-cup-drop-zone {
    position: absolute;
    left: 44.5vw;
    top: 33.0vw;
    width: 9vw;
    height: 9vw;
    border-radius: 50%;
    z-index: 20;
}

.cn-teapot-drop-zone {
    position: absolute;
    left: 59.1vw;
    top: 27.0vw;
    width: 16vw;
    height: 16vw;
    z-index: 20;
    transform: rotate(0deg);
}

/* China Stage Inventory Icons */
#slot-menu-china .slot-item[data-item="cup"] .item-icon {
    background-image: url('resource/cn/cn_cup.png');
}

#slot-menu-china .slot-item[data-item="teapot"] .item-icon {
    background-image: url('resource/cn/cn_teapot.png');
}

/* China Stage Highlights */
@keyframes blink-shadow {
    0% {
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.8));
    }

    50% {
        filter: drop-shadow(0 0 25px rgba(255, 255, 255, 1)) drop-shadow(0 0 40px rgba(255, 255, 255, 0.8));
    }

    100% {
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.8));
    }
}

.highlight-blink {
    animation: blink-shadow 1.5s infinite;
}

.circular-drop-zone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 3px dashed #F5F3E5;
    border-radius: 50%;
    background-color: rgba(200, 200, 200, 0.1);
    z-index: 20;
    /* 더 높은 우선순위 */
    pointer-events: auto;
    transition: background-color 0.2s, border-color 0.2s, border-width 0.2s, width 0.2s, height 0.2s;
    box-sizing: content-box;
    display: none;
    /* 기본값은 숨김 */
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5vw;
    font-weight: bold;
    text-shadow: 0 0 5px black;
    /* 항상 원형 유지: aspect-ratio로 강제 */
}

.circular-drop-zone.drag-over {
    background-color: rgba(255, 255, 255, 0.2);
    border: 3px dashed #F5F3E5;
    border-width: 3px;
    transform: translate(-50%, -50%) scale(1.1);
}

@keyframes scale-pulse {
    0% {
        transform: scale(1) rotate(30deg);
    }

    50% {
        transform: scale(1.1) rotate(30deg);
    }

    100% {
        transform: scale(1) rotate(30deg);
    }
}

.highlight-scale {
    animation: scale-pulse 1.5s infinite;
}

/* 드랍존 하이라이팅 애니메이션 (회전 없이 크기만) */
@keyframes drop-zone-scale-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

.drop-zone.highlight-scale {
    animation: drop-zone-scale-pulse 1.5s infinite;
}

.cn-dish .mandu-on-dish {
    position: absolute;
    top: -60%;
    left: 5%;
    width: 50%;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 5;
    animation: mandu-appear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.cn-dish .mandu-shadow {
    position: absolute;
    top: -50%;
    left: 51%;
    width: 50%;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 4;
    animation: mandu-appear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes mandu-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes scale-pulse-centered {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.highlight-scale-centered {
    animation: scale-pulse-centered 1.5s infinite;
}

.cn-soupspoon {
    position: absolute;
    left: 40.3vw;
    top: 24.2vw;
    width: 9vw;
    height: 9vw;
    z-index: 3;
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: transform 0.2s ease;
}

.cn-soupspoon:hover {
    opacity: 0.85;
    transform: translate(-50%, -50%);
}

.cn-soupspoon:active {
    cursor: grabbing;
}

.cn-soupspoon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cn-mainspoon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8vw;
    height: 8vw;
    z-index: 11;
    /* 드롭존(z-index:10)보다 위에 */
    cursor: grab;
    transition: opacity 0.2s;
    pointer-events: auto;
}

.cn-mainspoon:hover {
    opacity: 0.85;
}

.cn-mainspoon:active {
    cursor: grabbing;
}

.cn-mainspoon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 테이블 하이라이트 애니메이션 (흰색 그림자 깜빡임) */
@keyframes blink-shadow {

    0%,
    100% {
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.8));
    }

    50% {
        filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.8));
    }
}

.highlight-blink {
    animation: blink-shadow 1s ease-in-out infinite;
}

/* mainspoon 하이라이트 시 흰색 그림자만 (크기는 JavaScript에서 제어) */
@keyframes mainspoon-highlight-shadow {

    0%,
    100% {
        filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }

    50% {
        filter: drop-shadow(0 0 25px rgba(255, 255, 255, 1));
    }
}

.cn-mainspoon.highlight-scale {
    animation: mainspoon-highlight-shadow 1s ease-in-out infinite;
    z-index: 15;
    /* 하이라이트 시 더 위로 */
}

.cn-mainspoon.highlight-scale img {
    animation: scale-pulse-mainspoon 1s ease-in-out infinite;
}

@keyframes scale-pulse-mainspoon {

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

    50% {
        transform: scale(1.15);
    }
}

/* 일반 아이템 (젓가락, 국자) 하이라이트 - 위치 유지하면서 이미지만 애니메이션 */
.highlight-item {
    z-index: 15;
}

.highlight-item img {
    animation: scale-pulse-item 1.5s ease-in-out infinite;
}

@keyframes scale-pulse-item {

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

    50% {
        transform: scale(1.1);
    }
}

/* 로딩 화면 */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #E3C199;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.loading-screen.hide {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(144, 84, 49, 0.2);
    border-top-color: #905431;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-family: 'GangwonEducationModuche', sans-serif;
    font-size: 1.5rem;
    color: #905431;
    margin-top: 20px;
}