body {
    font-family: 'sans-serif', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #333; /* 글자색은 나중에 배경 이미지에 맞춰 바꿀 수 있습니다 */

    /* --- 이 부분이 배경 이미지 설정입니다 --- */
    background-color: #f0f4f8; /* 이미지가 없을 경우를 위한 기본 배경색 */
    background-image: url('assets/images/bgr_img.PNG'); /* 이미지 경로를 입력하세요 */
    background-size: cover; /* 이미지가 화면을 가득 채우도록 설정 */
    background-position: center; /* 이미지를 중앙에 위치시킴 */
    background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
    background-attachment: fixed;
}

/* 모든 화면을 기본적으로 숨김 */
body > div {
    display: none;
    box-sizing: border-box;
    transition: opacity 0.5s ease-in-out;

    /* 화면 전체를 덮도록 고정 위치로 변경 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px; 
}

/* 현재 활성화된 화면만 보이게 설정 */
body > div.active {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 세로 중앙 정렬 추가 */
    align-items: center;
    gap: 20px;
}

h1, h2, h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    margin: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.1s ease;
}

button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

button:active {
    transform: translateY(0);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 900px;
    padding: 0px 10px 0px 40px;
    background-color: #ecf0f1;
    border-radius: 10px;
    border: 2px solid #bdc3c7;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* 패딩과 테두리를 너비에 포함시켜 레이아웃 유지 */
}

.score-info {
    display: flex;
    flex-direction: row; /* 가로(row) 정렬 */
    align-items: center; /* 세로축 중앙 정렬 */
    gap: 62px;           /* 각 항목 사이의 간격 추가 */
    font-size: 24px;
}

.image-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100vw;
    max-width: 1250px;
    flex-wrap: wrap;
}

.image-wrapper {
    flex: 1;
    min-width: 300px;
    border: 2px solid #bdc3c7;
    border-radius: 10px;
    padding: 10px;
    background-color: #ecf0f1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* 자식 요소의 absolute 위치를 위한 기준 */
}

.image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 10px;
}
/* 코드 박스(image-wrapper) 안의 h3 태그 스타일 수정 */
.image-wrapper h3 {
    margin-top: 5px;    /* 위쪽 여백 줄이기 */
    margin-bottom: 10px; /* 아래쪽 여백은 그대로 유지 (또는 원하는 값으로 조절) */
    font-size: 20px;
}

.timer-container {
    width: 90%;
    max-width: 900px;
    height: 30px;
    background-color: #ecf0f1;
    border-radius: 10px;
    /* margin-top: 20px; */
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid #596776; /* 어두운 회색 외곽선 추가 */
}

#timer-bar {
    width: 100%;
    height: 100%;
    background-color: #27ae60;
    transition: width 0.5s linear;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.click-indicator {
    position: absolute;
    width: 50px;  /* 원의 너비 */
    height: 50px; /* 원의 높이 */
    border: 3px solid red; /* 빨간색 테두리 */
    border-radius: 50%; /* 원 모양으로 만들기 */
    transform: translate(-50%, -50%); /* 원의 중심을 클릭 위치로 이동 */
    pointer-events: none; /* 원이 다른 클릭을 방해하지 않도록 설정 */
    box-sizing: border-box;
}

/* 오답 X 표시를 위한 스타일 추가 */
.error-marker {
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%); /* X의 중심을 클릭 위치로 이동 */
    pointer-events: none;
}

.error-marker::before,
.error-marker::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: red;
    top: 50%;
    left: 0;
    margin-top: -1.5px; /* 높이의 절반만큼 위로 올려서 중앙 정렬 */
}

.error-marker::before {
    transform: rotate(45deg);
}

.error-marker::after {
    transform: rotate(-45deg);
}

/* 테스트용 정답 위치 표시를 위한 스타일 */
.test-answer-marker {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 150, 255, 0.7); /* 반투명 파란색 테두리 */
    background-color: rgba(0, 150, 255, 0.2); /* 반투명 파란색 배경 */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 클릭 방해하지 않도록 설정 */
    box-sizing: border-box;
}

/* --- 시작 화면 꾸미기 --- */

/* 시작 화면을 위치 기준(도화지)으로 설정합니다. */
#start-screen {
    position: relative;
    width: 100%;
    height: 100vh; /* 화면 전체 높이를 차지하도록 설정 */
    overflow: hidden; /* 화면 밖으로 나가는 이미지를 숨김 */
    padding: 0; /* 안쪽 여백 제거 */
}

/* 로고 이미지 (중앙 상단) */
.logo-image {
    position: absolute;
    top: 10%;
    left: 70%;
    transform: translateX(-50%);
    
    /* 너비(vw)와 높이(vh) 중 더 작은 값을 기준으로 크기 조절 */
    width: min(60vw, 110vh);
}

/* 캐릭터 이미지 (좌측 하단) */
.character-image {
    position: absolute;
    bottom: 0;
    left: 0;
    
    /* 너비(vw)와 높이(vh) 중 더 작은 값을 기준으로 크기 조절 */
    width: min(50vw, 100vh);
}

/* 버튼들을 담는 컨테이너 (정중앙) */
.start-buttons {
    position: absolute;
    top: 70%;
    left: 70%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 30px; /* 버튼 사이 간격 */
}

/* 버튼 이미지 공통 스타일 */
.button-image {
    width: min(20vw, 30vh); /* 버튼 크기 */
    cursor: pointer; /* 마우스를 올리면 손가락 모양으로 변경 */
    transition: transform 0.2s ease; /* 부드러운 효과를 위한 설정 */
}

/* 버튼 이미지에 마우스를 올렸을 때 살짝 커지는 효과 */
.button-image:hover {
    transform: scale(1.05);
}

/* --- 게임 화면 꾸미기 --- */

/* 하트 생명 컨테이너 스타일 */
#life-hearts {
    display: flex; /* 하트들을 가로로 나란히 배치 */
    gap: 5px;      /* 하트 사이의 간격 */
    align-items: center;
}

/* 하트 이미지 크기 조절 */
#life-hearts img {
    width: 55px;   /* 하트 너비 (원하는 크기로 조절) */
    height: auto;  /* 높이는 비율에 맞게 자동 조절 */
}
/* 하트가 흔들리는 애니메이션 효과 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* 흔들림 애니메이션을 적용할 클래스 */
.shake {
  animation: shake 0.5s ease-in-out;
}

/* 비활성화된 힌트 버튼 스타일 */
#hint-button.disabled {
    background-color: #7f8c8d; /* 진한 회색 */
    cursor: not-allowed;      /* 금지 커서 모양 */
    transform: none;          /* 호버 효과 제거 */
}

.code-container {
    width: 100%;
    flex-grow: 1; /* wrapper 안에서 남은 공간을 모두 차지하도록 설정 */
    position: relative; /* 정답/오답 표시의 기준점이 되도록 명시 */
}

/* Prism.js가 생성하는 pre, code 태그의 기본 여백을 초기화 */
.code-container pre,
.code-container code {
    margin: 0 !important;
    padding: 1em !important; /* 모든 방향의 여백을 동일하게 재설정 */
    height: 100%; /* 부모 컨테이너 높이를 꽉 채움 */
    box-sizing: border-box;
    overflow: auto !important; /* 스크롤 기능을 여기서 담당! */
    font-size: 12px; /* 코드의 글자 크기 */
}

/* 힌트, 닫기, 다음 단계 버튼 색상 변경 */
#hint-button,
#hint-screen button,
#stage-clear-screen button,
#game-over-screen button,
#complete-screen button{
    background-color: #1e8348; /* 원하는 기본 색상 (예: 초록색) */
    border: none;
    border: 2px solid #0d4123; /* 2px 두께의 진한 초록색 테두리 추가 */
}

/* 위 버튼들에 마우스를 올렸을 때 색상 변경 */
#hint-button:hover,
#hint-screen button:hover,
#stage-clear-screen button:hover {
    background-color: #1e8348; /* 더 진한 색상 */
    border: 2px solid #0d4123;
}

/* 정보 화면 박스 스타일 */
.modal-box {
    width: 90%;
    max-width: 700px; /* 박스의 최대 가로 넓이 */
    background-color: #ecf0f1; /* 코드 블록과 같은 배경색 */
    border: 2px solid #bdc3c7;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: center;
}

/* 글씨 스타일 */
.modal-box h2 {
    margin-top: 5px;    /* 위쪽 여백 줄이기 */
    margin-bottom: 20px; /* 아래쪽 여백은 그대로 유지 (또는 원하는 값으로 조절) */
    font-size: 40px;
}