@font-face{
font-family:'GangwonEducationSaeum';
src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduSaeeum_OTFMediumA.woff') format('woff');
}

html,body{
margin:0;
width:100%;
height:100%;
overflow:hidden;
}

*{
box-sizing:border-box;
font-family:'GangwonEducationSaeum';
cursor:url("images/star.png"),auto!important;
}

.world{
position:relative;
width:100vw;
height:100vh;
background:url("images/moontown/backmap.png") center/cover no-repeat;
}

/* ===== SIDEBAR ===== */

.sidebar{
position:absolute;
left:0;
top:0;
width:180px;
height:100%;
z-index:100;
}

.sidebar-bg{
position:absolute;
left:0;
top:0;
z-index:3;
}

.sidebar-name{
position:absolute;
top:50px;
left:40px;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
font-size:50px;
color:#567184;
}


.sidebar-mcb{
position:absolute;
top:142px;
left:46px;
z-index:11;
}

.sidebar-mc{
position:absolute;
top:142px;
left:46px;
z-index:12;
}

.sidebar-arc{
position:absolute;
top:378px;
left:8px;
z-index:20;
}


.side-btn{
position:absolute;
z-index:20;
}

.side-btn img{
display:block;
}

.btn1{left:40px;top:430px;}
.btn2{left:115px;top:430px;}
.btn3{left:240px;top:430px;}
.btn4{left:115px;top:430px;}

.status-text{
position:absolute;
left:50px;
top:600px;
z-index:20;
font-size:25px;
color:#5E7485;
}



.mc-select{
    display:flex;
    gap:8px;
    margin-top:10px;
    justify-content:center;
}

.mc-btn{
    width:60px;
    height:60px;
    padding:0;
    border:2px solid #bbb;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    overflow:hidden;
}

.mc-btn img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.mc-btn:hover{
    border-color:#66a8ff;
}

/* ===== OBJECT ===== */

.object{
position:absolute;
z-index:2;
}

.object img{
display:block;
width:100%;
}

/* 위치 */
.house{left:650px;top:25px;}
.bus{right:100px;top:80px;}
.milk{left:1150px;top:10px;}
.wish{left:600px;top:450px;}
.pond{left:1300px;top:700px;}
.rock{left:300px;top:0px;}
.ques{left:1550px;top:400px;}

.object:hover{
filter:
drop-shadow(0 0 10px rgba(255,255,255,.7))
drop-shadow(0 0 18px rgba(255,255,255,.4));
z-index:9999;
}

/* ===== BUBBLE (아래로) ===== */

.bubble{
position:absolute;
left:50%;
top:115%;
transform:translateX(-50%);
display:inline-block;
width:max-content;
max-width:500px;
padding:18px 24px;
background:#dff2ff;
outline:2px dashed #b9dced;
outline-offset:-8px;
border:3px solid #fff;
border-radius:28px;
box-shadow:0 10px 20px rgba(0,0,0,.08);
opacity:0;
pointer-events:none;
transition:.2s;
z-index:10000;
}

.b-text{
white-space:normal;
word-break:keep-all;
}

.object:hover .bubble{
opacity:1;
}

/* 꼬리 (위쪽) */
.bubble::after{
content:"";
position:absolute;
left:32px;
top:-8px;
width:12px;
height:12px;
background:#dff2ff;
transform:rotate(45deg);
box-shadow:none;
z-index:-1;
border-left:3px solid white;
border-top:3px solid white;
}

.bubble{
overflow:visible;
}

/* ===== POPUP ===== */

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.25);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
}

.popup{
background:#dff2ff;
border:4px solid white;
border-radius:35px;
padding:28px;
min-width:520px;
box-shadow:inset 0 0 0 2px #b9dced;
}

.popup-title{
font-size:28px;
margin-bottom:20px;
color:#4d6878;
}

.grid{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.option{
width:120px;
cursor:pointer;
}

.option img{
width:100%;
border-radius:20px;
}

.world{
    transform-origin: top left;
}

/* 화면 기준 스케일 고정 */
body{
    overflow:hidden;
}
.sidebar{
    position:absolute;
    z-index:999999;
}
.object{
    position:absolute;
    z-index:2;
}
.sidebar{
    opacity:1;
}
.status-text{
    width:220px;
    word-break:keep-all;
    white-space:normal;
    line-height:1.6;
}
.b-title{
    font-size:30px;
    font-weight:bold;
    color:#3b5f88;
}

.b-text{
    font-size:20px;
}

.pond .bubble{
top:auto;
bottom:115%;
}

.pond .bubble::after{
top:auto;
bottom:-8px;
border:none;
background:#dff2ff;
transform:rotate(45deg);
box-shadow:none;
border-right:3px solid white;
border-bottom:3px solid white;
}

/* ===== 위시 편지 팝업 ===== */

.letter-popup{
width:700px;
max-width:90vw;
height:500px;
padding:40px;
}

.letter-title{
font-size:32px;
font-weight:bold;
color:#3b5f88;
margin-bottom:25px;
}

.letter-body{
font-size:22px;
font-weight:normal;
line-height:1.9;
color:#556677;
height:320px;
overflow-y:auto;
}

/* ===== 연못 팝업 ===== */

.pond-popup{
width:700px;
max-width:90vw;
height:800px;
padding:40px;
}

.pond-image{
display:block;
width:100%;
height:auto;
margin:20px auto;
}

.status-text h3{
margin:0 0 6px 0;
line-height:1.1;
}

.status-text ul{
margin:0;
padding-left:22px;
line-height:1.3;
}

.status-text li{
margin:2px 0;
}

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:#b6d8e7;
}

::-webkit-scrollbar-track{
    background:#FFFFFF;
}


#letterLock{
text-align:center;
margin-top:30px;
}

#letterPw{
width:260px;
padding:12px;
font-size:10px;
font-family:Arial, "맑은 고딕", sans-serif !important;
color:#000;
-webkit-text-fill-color:#000;
border-radius:15px;
border:2px solid #b9dced;
outline:none;

}

#letterBtn{
margin-top:15px;
padding:10px 25px;
font-size:20px;
border:none;
border-radius:15px;
background:#87CEEB;
color:white;
cursor:pointer;
}

#letterBtn:hover{
background:#6cb7dc;
}

#pwMsg{
margin-top:15px;
font-size:18px;
color:#d05c5c;
}

#musicBtn{
    width:200px;
    height:50px;
    font-size:24px;
    border-radius:15px;
    color:#6cb7dc;
    background:#ffffff;
    border:2px solid #b9dced;
    
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.popup h3{
    color:#5E7485;      
    font-size:22px;     
    font-weight:normal; /* 굵기 제거 */
}










/* ===========================
모바일
=========================== */

@media (max-width:768px){

html,
body{
height:auto;
overflow-y:auto;
}

.world{
background:#eef7ff;
height:auto;
min-height:100vh;
padding:20px;
display:flex;
flex-direction:column;
align-items:center;
overflow:visible;
}

/* 사이드바 숨김 */
.sidebar{
display:none;
}

/* 오브젝트 전부 세로 배치 */
.object{
position:static;
margin:20px 0;
z-index:1;
}

/* 이미지 크기 */
.object img{
width:90vw;
max-width:420px;
height:auto;
}

/* 말풍선 숨김 */
.bubble{
display:none;
}

/* 팝업 크기 */
.popup{
width:95vw;
min-width:0;
padding:20px;
}

.letter-popup{
height:auto;
max-height:80vh;
}

.pond-popup{
width:800px;
    max-width:90vw;
    padding:25px;
}

.pond-image{
display:block;
    width:100%;
    height:auto;
    margin:20px auto;
}

}