html {
    scroll-behavior: smooth; /* Enables smooth scrolling */
}


/* 모바일 전용 */
@media (max-width: 768px) {
    .content {
        font-size: 3vh;
        margin: 20px;
    }
}

body {

    font-family: 'Edu AU VIC WA NT Dots', sans-serif;
    cursor: url('custom-cursor.png'), auto;
    color: #e0e0e0;
    background-image: url('back.png'); /* 배경 이미지 URL */
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: center; /* 배경 이미지를 중앙에 배치 */
    background-attachment: fixed;
    height: 100vh; /* 전체 화면 높이 */
    margin: 0; /* 기본 마진 제거 */
    background-size: cover; /* 이미지가 화면을 가득 채우도록 설정 */

}



h1 {
    text-align: center;
    font-size: 40px;
    z-index: 1;
}


footer {
    position: fixed; /* 고정 위치 */
    bottom: 10px; /* 화면 하단에서의 거리 */
    left: 10px; /* 화면 왼쪽에서의 거리 */
    color: #e0e0e0; /* 글자 색상 */
    font-size: 14px; /* 글자 크기 */
    }

    .image-container2 {
    position: fixed; /* 고정 위치 */
    display: flex; /* 이미지들을 가로로 정렬하기 위한 설정 */
    gap: 20px; /* 이미지 사이의 간격 */
}

.qna-1 {
    width: 250px; /* 기본 이미지 크기 */
    height: auto; /* 비율 유지 */
    position: fixed; /* 고정 위치 설정 */
    top: 30%; /* 화면에서 수직 위치 */
    left: 85%; /* 화면에서 수평 위치 */
    margin-top: -150px; /* 이미지 높이의 절반을 마진으로 설정 */
    margin-left: -150px; /* 이미지 너비의 절반을 마진으로 설정 */
    transition: transform 0.3s; /* hover 효과에만 적용할 변환 */
    animation: rotateAnimation 5s linear infinite; /* 회전 애니메이션 추가 */
}

.qna-1:hover {
    transform: scale(1.3) rotate(360deg); /* hover 시 크기 확대 */
    cursor: pointer;
}

@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg); /* 시작 위치 */
    }
    100% {
        transform: rotate(360deg); /* 한 바퀴 회전 */
    }
}




.beergallery-1 {
    width: 470px; /* 기본 이미지 크기 */
    height: auto; /* 비율 유지 */
    position: fixed; /* 고정 위치 설정 */
    top: 50%; /* 화면 중앙에서 수직 위치 */
    left: 50%; /* 화면 중앙에서 수평 위치 */
    margin-top: -200px; /* 이미지 높이의 절반을 마진으로 설정 */
    margin-left: -50px; /* 이미지 너비의 절반을 마진으로 설정 */
    transition: transform 0.3s, border 0.3s; /* 변환 및 테두리 효과 추가 */
}
        .beergallery-1:hover {
            transform: scale(1.3); /* hover 시 크기 확대 */
            cursor: pointer;
        }


.look-1{
    width: 550px; /* 기본 이미지 크기 */
    height: auto; /* 비율 유지 */
    position: fixed; /* 고정 위치 설정 */
    top: 60%; /* 화면 중앙에서 수직 위치 */
    left: 0%; /* 화면 중앙에서 수평 위치 */
    margin-top: -150px; /* 이미지 높이의 절반을 마진으로 설정 */
    margin-left: -50px;
    transition: transform 0.3s, border 0.3s; /* 변환 및 테두리 효과 추가 */
    cursor: pointer;

}

.look-1:hover {
    transform: scale(1.3);
    cursor: pointer;

}


.home-image {
    position: absolute; 
    top: 0; 
    left: 0;
    padding: 50px;
    padding-top: 30px;
    cursor: pointer;
}

.homeimage {
    width: 70px; 
    height: auto; 
    cursor: pointer;
}

.homeimage:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
    cursor: pointer;
}

.content {

    text-align: center; 
    font-size: 6vh;
    margin: 70px;
    word-break: keep-all;

}

.button-container {
    display: flex;
    gap: 8px; /* 버튼 사이 간격 */
    margin-left: 130px;
    cursor: pointer;

}

.styled-button {
    background-color: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    color: white;
    text-align: center;
    display: flex;
    font-size: 12px;
    margin: 0; /* gap 속성으로 간격 조정하므로 마진 제거 */
    font-family: 'Edu AU VIC WA NT Dots', sans-serif;
    cursor: pointer;
    transition: transform 0.2s ease;
    width: 65px;
    height: 45px;
    position: relative;
}

.styled-button span {
    position: absolute; /* 텍스트 위치 조정 */
    top: 30%; /* 텍스트 위쪽 간격 조정 */
    left: 50%; /* 텍스트 왼쪽 중앙 정렬 */
    transform: translate(-50%, -50%); /* 텍스트를 중앙으로 이동 */
}


        /* 각 버튼에 고유한 이미지 설정 */
        .styled-button:nth-child(1) {
            background-image: url('bottlecap.png');
        }

        .styled-button:nth-child(2) {
            background-image: url('bottlecap.png');
        }

        .styled-button:nth-child(3) {
            background-image: url('bottlecap.png');
        }

        .styled-button:hover {
            transform: scale(1.1);
        }


.highlight {
    color: #df9f05;
    text-decoration: none;
    cursor: pointer;
}


.highlight:hover {
    color: white;
    text-decoration: underline;
    cursor: pointer;

}


#p1 {
    font-size: 16px;

}


html {
    scroll-behavior: smooth; /* Enables smooth scrolling */
}




.go-top-image {
    position: fixed; /* 화면의 고정 위치 */
    bottom: 20px; /* 하단에서 20px 위치 */
    right: 20px; /* 우측에서 20px 위치 */
    width: 70px; /* 버튼의 너비 */
    height: 70px; /* 버튼의 높이 */
    cursor: cursor: pointer;
}


.go-top-image:hover {
    content : url('background2.jpg');
    cursor: pointer;
}


.popup-button-yes

{
    margin: 10px;
    padding: 5px 15px;
    border: 2px dotted #e0e0e0;
    border-radius: 5px;
    background-color: black;
    color: #e0e0e0;
    font-size : 16px;
    font-family: 'Edu AU VIC WA NT Dots', sans-serif;
    transition: background-color 0.3s;


}

.popup-button-yes:hover {
    background-color: #e0e0e0;
    color: black;
    cursor: pointer;

}

.popup {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;

}

.popup-content {
    background-image: url("popup.jpg");
    background-size: contain; /* 원본 비율 유지 */
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: center; /* 이미지 중앙 정렬 */
    color: black;
    text-align: center;
    font-size: 50px;
    padding: 30px 30px 105px;
    border: none; /* 테두리 색상 및 스타일 설정 */
    cursor: pointer;
    z-index: 1; /* 배경 이미지와 겹치도록 설정 */
    position: relative; /* 부모 요소의 상대적 위치 설정 */
}

.comment {
            border: 1px solid #ccc;
            margin-bottom: 10px;
            padding: 10px;

        }

#unique-link {
    color: #e0e0e0;
    text-decoration: none;
    cursor: pointer;
}

#unique-link:hover {
    color: #e0e0e0;
    text-decoration: underline;
    cursor: pointer;
}


#commentForm {
    position: fixed; /* 고정 위치 설정 */
    top: 20%; /* 상단에서 20% 아래로 */
    left: 5%; /* 왼쪽에서 5% 위치 */
    background-color: transparent; /* 배경색 설정 */
    padding: 10px; /* 내부 여백 추가 */
    border-radius: 5px; /* 모서리 둥글게 */
}

#comment {
    width: 200px; /* 가로 크기 */
    height: 10px; /* 세로 크기 */
    border: 1px solid #ccc; /* 테두리 추가 */
    border-radius: 5px; /* 모서리 둥글게 */
}

/* 댓글 영역을 commentForm 오른쪽에 위치 */
#commentsSection {
    position: fixed;
    top: 40%; /* commentForm과 같은 높이 */
    left: 30%; /* commentForm 오른쪽에 위치 */
    margin-left: 20px; /* 약간의 여백 추가 */
}

.comment-box {
    background-color: transparent; /* 박스 배경색 */
    border: none; /* 테두리 없음 */
    padding: 5px 10px; /* 내부 여백 */
    margin-top: 8px; /* 댓글 간격 */
    color: #e0e0e0; /* 텍스트 색상 */
    max-width: 400px; /* 최대 너비 */
    word-wrap: break-word; /* 텍스트 줄바꿈 */
}

#main-title {
    text-align: center;
    display: flex;
    justify-content: center; /* 수평 중앙 */
    align-items: center; /* 수직 중앙 */
    height: 100vh; /* 전체 화면 높이 설정 */
}