/* 🎨 글로벌 스타일 */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    color: #333;
    overflow: hidden; 
    min-height: 100vh;
}

@font-face {
    font-family: 'DX고딕 40';
    /* 👇 파일명을 영어로 바꾼 것과 똑같이 수정 */
    src: url('DXGothic40.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

body {
    /* 모든 페이지의 본문에 이 폰트 적용 */
    font-family: 'MyDXGothic', sans-serif !important;
}

/* 툴팁이나 버튼 등에도 강제로 적용 */
button, .tool-tooltip, input, textarea {
    font-family: 'MyDXGothic', sans-serif !important;
}

.container {
    /* 전역에서 max-width와 중앙 정렬 기본값만 유지 */
    max-width: 1200px; /* index.html의 main-container와 일치시켜 중앙 정렬 기준 확보 */
    margin: 0 auto;
    padding: 20px;
    /* 💡 position, height, overflow 관련 설정 제거 */
}

.header {
    /* 헤더 위치 고정 및 로고 클릭 가능하도록 수정 (laboratory_x.html 스타일 반영) */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
}
.logo {
    font-size: 24px;
    font-weight: bold;
}
.logo a {
    text-decoration: none;
    color: #333;
}

/* 🖼️ 이미지 플레이스홀더 */
.image-placeholder {
    background-color: #ccc;
    border: 2px dashed #999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

/* 🌟 섹션별 스타일 */

/* 1. 메인/도구 선택 페이지 (index.html에서만 사용) */
#main-page {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    min-height: 80vh;
}

.tool-item {
    cursor: pointer;
    height: 100px;
    transition: transform 0.3s;
}

/* 2. 실험실 페이지 (laboratory_x.html) */
#laboratory-page {
    min-height: 100vh;
    background-color: #fff;
    position: relative;
    /* 💡 수정 1: 실험실 페이지도 스크롤 안되게 설정 */
    overflow: hidden; 
}

/* 💡 도구 5개 우측 상단 배치 */
.lab-tools {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 15;
}

/* 💡 각 도구 항목을 정사각형(100px)으로 설정 */
.lab-tool {
    width: 100px;
    height: 100px; /* 정사각형 */
    border: 1px solid #000;
    cursor: pointer;
    background-color: #eee;
}

/* 가운데 사람 이미지 위치 */
.human-body-graphic {
    position: absolute;
    top: 50%; /* 중앙 세로 기준 */
    left: 50%; /* 중앙 가로 기준 */
    transform: translate(-50%, -50%);
    width: 300px;
    height: 600px; /* 길게 표시 */
    border: 3px dashed transparent; 
}

/* 실험종료 버튼 (laboratory_x.html 스타일 반영) */
.end-experiment-btn {
    position: absolute;
    bottom: 50px; 
    left: 50%; 
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}

/* 3. 실험 일지 페이지 */
#journal-page {
    display: none;
    min-height: 100vh;
    background-color: #f9f9f9;
    padding-top: 50px;
    text-align: center;
}

/* 4. 최종 결과 페이지 */
#result-page {
    display: none;
    min-height: 100vh;
    background-color: #fff;
    position: relative;
}

/* 💡 툴팁 스타일은 laboratory_2.html 내부 스타일로 유지됨 */