:root {
    /* 기존 변수들 유지 */
    --background-color: #ffffff;
    --text-color: #000;
    --main-content-bg: #e7e7e7;
    --button-bg: #1e90ff;
    --button-hover-bg: #1e90ff;
    --button-text: white;
    --select-bg: white;
    --select-text: #333;
    --select-border: #ccc;
    --puzzle-space-bg: #ffffff;
    --filled-cell-bg: #fff;
    --filled-cell-text: #000;
    --empty-cell-bg: #222;
    --index-cell-bg: #dfd6b9;
    --border-color: #555;
    --loader-border: #000000;
    --loader-top-border: #3498db;
    
    /* 퍼즐 텍스트 색상 변수 추가 */
    --puzzle-text-color: #000;
    --puzzle-index-text-color: #000000;
    --masked-word-color: #4A90E2;  /* 네모문자와 초기 퍼즐 단어 색상 */
    --input-text-color: #000;  /* 기본 모드에서 입력된 텍스트 색상 */

    --highlight-color: #8df38f;
}

body.dark-mode {
    /* 기존 변수들 유지 */
    --background-color: #111;
    --text-color: #f0f0f0;
    --main-content-bg: #222;
    --button-bg: #0d4b8a;
    --button-hover-bg: #1e90ff;
    --button-text: #f0f0f0;
    --select-bg: #444;
    --select-text: #f0f0f0;
    --select-border: #666;
    --puzzle-space-bg: #111;
    --filled-cell-bg: #000;
    --filled-cell-text: #f0f0f0;
    --empty-cell-bg: #ccc;
    --index-cell-bg: #4c4941;
    --border-color: #777;
    --loader-border: #000000;
    --loader-top-border: #1e90ff;
    
    /* 다크 모드에서의 퍼즐 텍스트 색상 변수 */
    --puzzle-text-color: #fff;
    --puzzle-index-text-color: #f0f0f0;
    --input-text-color: #fff;  /* 다크 모드에서 입력된 텍스트 색상 */

    --highlight-color: #408441;
}

.dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 300px;
    width: 100%;
}

.dialog.hidden {
    display: none;
}

/* 출처 스타일 */
.puzzle-source {
    font-size: 12px; /* 작은 글씨 크기 */
    color: #666; /* 연한 회색 글자 */
    text-align: center; /* 좌측 정렬 */
    margin-top: 4px; /* 상단 마진 추가 */
    margin-bottom: 4px; /* 상단 마진 추가 */
}

/* 타이틀 스타일 */
.puzzle-title {
    font-size: 24px; /* 큰 글자 크기 */
    font-weight: bold; /* 굵은 글자 */
    color: var(--puzzle-text-color);
    text-align: center; /* 중앙 정렬 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 부드러운 그림자 효과 */
    font-family: 'Arial', sans-serif; /* 깔끔한 글꼴 */
    letter-spacing: 2px; /* 글자 간격 */
    margin-top: 10px;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* 색상 및 그림자 전환 효과 추가 */
}

/* 전체 레이아웃 설정 */
body {
    font-family: 'Noto Sans KR', Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
}

#main-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    /* max-width: 1200px; */
    max-width: 75vw;
    overflow: hidden;
    background-color: var(--main-content-bg);
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
    /* border-radius: 16px; */
    /* padding: 0 20px; */
    transition: background-color 0.3s;
}

/* 퍼즐 공간에 컨트롤 요소들을 상단에 배치 */
#puzzle-controls {
    display: flex; /* Flexbox 레이아웃으로 요소들을 수평으로 배치 */
    justify-content: center; /* 요소들 간의 공간을 고르게 배분 */
    align-items: center; /* 요소들을 수직 가운데 정렬 */
    padding: 10px 0; /* 위아래로 패딩을 추가하여 공간 확보 */
    width: 100%; /* 퍼즐 공간 전체 너비 사용 */
    gap: 16px; /* 요소 간의 고정 간격 */
    margin-bottom: 10px; /* 퍼즐 그리드와의 간격 추가 */
}

/* 버튼과 선택 요소들 스타일은 기존 스타일 유지 */
#generateButton {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
}

#generateButton:hover {
    transform: scale(1.2);
}

button, select {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
}

button:hover {
    background-color: var(--button-hover-bg);
}

select {
    background-color: var(--select-bg);
    color: var(--select-text);
    border: 1px solid var(--select-border);
}

/* 퍼즐 및 단어 정보 공간 배치 */
#puzzle-and-word-content {
    display: flex;
    flex-direction: row; /* 기본적으로 수평 배치 */
    flex-grow: 1;
    height: 100%;
    padding: 0 10px; /* 좌우 패딩 줄이기 */
    box-sizing: border-box;
    overflow: hidden;
    align-items: stretch;
    gap: 5px; /* 두 공간 사이의 간격을 더 좁게 설정 */
    max-width: 100%; /* 부모 요소의 최대 너비를 화면 너비로 제한 */
}

/* 퍼즐 공간(puzzle-space)에 대한 스타일 */
#puzzle-space {
    background-color: var(--puzzle-space-bg); /* 단어 정보 공간 배경색 */
    flex-grow: 1; /* Flexbox 레이아웃에서 균등하게 공간 차지 */
    display: flex; /* Flexbox 레이아웃 */
    overflow-x: hidden; /* 가로 스크롤바 숨기기 */
    flex-direction: column; /* 자식 요소를 수직으로 배치 */
    width: 50%; /* 단어 정보 공간의 너비를 50%로 설정 */
    max-height: 100%; /* 단어 정보 공간의 최대 높이 설정 */
    box-sizing: border-box; /* 패딩과 테두리를 포함한 박스 크기 설정 */
    overflow-y: auto; /* 필요 시 수직 스크롤바 표시 */
    transition: background-color 0.3s, overflow-y 0.3s ease; /* 배경색 전환 및 스크롤바 전환 애니메이션 */
    align-items: center; /* 내용물을 가운데 정렬 */
    justify-content: flex-start; /* 수직 정렬을 시작 위치로 설정 */
    border-radius: 8px;
    margin-top: 10px;  /* 상부 마진 10px */
    margin-bottom: 10px;  /* 하부 마진 20px */
    padding-left: 10px;  /* 좌측 패딩 10px */
    padding-right: 10px;  /* 우측 패딩 10px */
}

#puzzle-space:hover {
    overflow-y: auto; /* 마우스를 올리면 스크롤바가 나타남 */
}

#puzzleGrid {
    display: grid; /* 그리드 레이아웃을 사용하여 퍼즐 배치 */
    gap: 1px; /* 퍼즐 셀 간의 간격 */
    max-height: 100%; /* 퍼즐 그리드의 최대 높이 */
    overflow-y: hidden; /* 기본적으로 스크롤바를 숨김 */
    transition: overflow-y 0.3s ease; /* 스크롤바 전환 애니메이션 */

    justify-self: center; /* 가로 중앙 정렬 */
}

#puzzleGrid:hover {
    overflow-y: auto; /* 마우스를 올리면 스크롤바가 나타남 */
}

table {
    border-collapse: collapse; /* 테이블의 테두리를 합침 */
    margin: 0 auto; /* 퍼즐 그리드 테이블을 중앙에 배치 */
    max-height: 100%; /* 테이블의 최대 높이 */
}

td, th {
    width: 36px; /* 퍼즐 셀의 너비 */
    height: 36px; /* 퍼즐 셀의 높이 */
    text-align: center; /* 퍼즐 셀 내용 중앙 정렬 */
    font-size: 18px; /* 셀의 글자 크기 */
    border: 1px solid var(--border-color); /* 셀의 테두리 색상 */
    transition: background-color 0.3s, color 0.3s; /* 셀의 배경색 및 텍스트 색상 전환 애니메이션 */
}

td.filled {
    background-color: var(--filled-cell-bg); /* 채워진 셀의 배경색 */
    /* color: var(--filled-cell-text); 채워진 셀의 텍스트 색상 */
    color: var(--puzzle-text-color);
}

td.empty {
    background-color: var(--empty-cell-bg); /* 빈 셀의 배경색 */
}

th.index {
    background-color: var(--index-cell-bg); /* 인덱스 셀의 배경색 */
    font-weight: bold; /* 인덱스 셀의 굵은 텍스트 */
}

/* 단어 정보 공간(word-info-space)에 대한 스타일 */
#word-info-space {
    background-color: var(--puzzle-space-bg); /* 단어 정보 공간 배경색 */
    flex-grow: 1; /* Flexbox 레이아웃에서 균등하게 공간 차지 */
    display: flex; /* Flexbox 레이아웃 */
    flex-direction: column; /* 자식 요소를 수직으로 배치 */
    width: 50%; /* 단어 정보 공간의 너비를 50%로 설정 */
    max-height: 100%; /* 단어 정보 공간의 최대 높이 설정 */
    box-sizing: border-box; /* 패딩과 테두리를 포함한 박스 크기 설정 */
    overflow-y: auto; /* 필요 시 수직 스크롤바 표시 */
    transition: background-color 0.3s, overflow-y 0.3s ease; /* 배경색 전환 및 스크롤바 전환 애니메이션 */
    align-items: center; /* 내용물을 가운데 정렬 */
    justify-content: flex-start; /* 수직 정렬을 시작 위치로 설정 */
    border-radius: 8px;
    margin-top: 10px;  /* 상부 마진 10px */
    margin-bottom: 10px;  /* 하부 마진 20px */
    padding-left: 10px;  /* 좌측 패딩 10px */
    padding-right: 10px;  /* 우측 패딩 10px */
}


#word-info-space:hover {
    overflow-y: auto; /* 마우스를 올리면 스크롤바가 나타남 */
}

#wordList {
    text-align: left; /* 죄측 정렬 */
    margin-top: 0; /* 리스트 상단 여백 제거 */
    width: 100%; /* 단어 목록의 너비를 100%로 설정 */
    overflow-y: hidden; /* 기본적으로 스크롤바를 숨김 */
    transition: overflow-y 0.3s ease; /* 스크롤바 전환 애니메이션 */
}

#wordList:hover {
    overflow-y: auto; /* 마우스를 올리면 스크롤바가 나타남 */
}

.direction-header {
    align-self: flex-start; /* 헤더를 좌측으로 정렬 */
    font-size: 20px; /* 원하는 글자 크기로 설정 */
    font-weight: bold; /* 글자 굵기 설정 (선택 사항) */
    color: #4A90E2; /* 텍스트 색상을 파란색으로 변경 (예시) */
    text-align: center; /* 중앙 정렬 */
}

.word-direction {
    margin-bottom: 10px; /* 각 단어 방향(Across, Down)의 하단 여백 */
}

.word-direction h4 {
    margin-top: 0; /* 단어 방향 헤더의 상단 여백 제거 */
    margin-bottom: 10px; /* 단어 방향 헤더의 하단 여백 */
}

.word-direction:first-child {
    margin-top: 10px; /* 첫 번째 단어 방향(Across)에 상단 여백 추가 */
}

.word-item {
    transition: all 0.3s ease;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 4px;
}

.word-item.correct {
    background-color: var(--highlight-color);;
}

.masked-word {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 1.0em;  /* 마스킹된 단어를 20% 더 크게 *
    font-weight: bold;
    letter-spacing: 2px;  /* 원 사이의 간격을 늘림 */
}

.masked-word:hover {
    background-color: var(--button-hover-bg);  /* 연한 파란색 배경 */
}

.masked-word span {
    font-weight: bold;
    color: var(--input-text-color);  /* 입력된 글자 색상 */
}

.revealed-word {
    font-size: 1.0em;
    font-weight: bold;
    color: #499b6d;  /* 초록색으로 강조 */
}

.word-item .position {
    font-weight: bold;
    margin-right: 5px;
}

.word-item .info {
    font-style: italic;
    color: #666;
}

.word-item .meaning {
    margin-left: 20px;
    color: #333;
}

.pre-filled.auto-completed {
    color: orange;
    font-weight: bold;
}

.congratulations-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 1000;
    text-align: center;
}

.congratulations-dialog h2 {
    margin-top: 0;
}

.congratulations-dialog button {
    margin-top: 15px;
    padding: 5px 15px;
    cursor: pointer;
}

.input-field-container {
    position: relative;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
}

.square-input {
    display: flex;
    gap: 5px;
}

.input-square {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.hidden-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: text;
}

.input-field-container:focus-within .input-square {
    border-color: #4CAF50;
}

.input-square.filled {
    background-color: #e0e0e0;
}

.input-field-container:focus-within .input-square.filled {
    background-color: #c8e6c9;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

.overlay.active {
    display: block;
}

.input-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    z-index: 1001;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
}

.input-square.focused {
    background-color: #d4f8e8;  /* 옅은 녹색 배경색 */
    border: 1px solid #5cb85c;  /* 테두리 */
    position: relative;
}

.input-square.focused::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 80%;
    background-color: #000;
    top: 10%;
    left: 5%;
    animation: blink 1s step-start infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* 다크 모드 적용 시 */
body.dark-mode .input-dialog {
    background-color: #333;  /* 다크 모드 배경색: 어두운 회색 */
    color: #fff;  /* 다크 모드 글자색: 흰색 */
    border: 1px solid #555;  /* 다크 모드 테두리색 */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

body.dark-mode .input-dialog button {
    background-color: #444;  /* 버튼 배경색 */
    color: #fff;  /* 버튼 글자색 */
    border: 1px solid #666;  /* 버튼 테두리색 */
}

body.dark-mode .input-dialog button:hover {
    background-color: #555;  /* 버튼 호버 배경색 */
}

body.dark-mode .input-square {
    background-color: #555;  /* 다크 모드에서 네모 상자 배경색 */
    color: #000;  /* 다크 모드에서 네모 상자 글자색 */
    border: 1px solid #777;  /* 다크 모드에서 네모 상자 테두리색 */
}

body.dark-mode .input-square.focused {
    background-color: #333;  /* 포커스된 네모 상자의 배경색 */
    border-color: #5cb85c;  /* 포커스된 네모 상자의 테두리색 */
}

.puzzle-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    padding: 0 10px;
}

.puzzle-source {
    font-size: 12px;
    color: #666;
}

/* 기존 퍼즐 타이머 스타일 수정 */
.puzzle-timer {
    font-family: 'Courier New', monospace;
    font-size: 18px; /* 타이틀과 비슷한 크기로 조정 */
    font-weight: bold;
    color: var(--puzzle-text-color);
    background-color: #4fd1f9;
    padding: 10px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    white-space: nowrap;
    line-height: 1; /* 줄 높이 조정 */
    display: flex;
    align-items: center; /* 내부 요소 수직 중앙 정렬 */
}

/* 타이틀과 타이머 컨테이너 스타일 */
#title-and-timer {
    display: flex;
    align-items: center;
    justify-content: center;  /* 중앙 정렬 */
    gap: 15px;
    flex-grow: 1;  /* 남은 공간을 차지하도록 설정 */
}

.puzzle-timer::before {
    content: '⏱';
    margin-right: 5px;
    font-size: 16px;
}

/* 퍼즐이 완성되었을 때의 스타일 */
.puzzle-timer.completed {
    color: #fff;
    background-color: #4CAF50;
}

/* 다크 모드 대응 */
body.dark-mode .puzzle-timer {
    color: #f0f0f0;
    background-color: #333;
    box-shadow: 0 2px 5px rgba(255,255,255,0.1);
}

body.dark-mode .puzzle-source {
    color: #aaa;
}

/* 퍼즐이 완성되었을 때의 스타일 */
.puzzle-timer.completed {
    color: #fff;
    background-color: #4CAF50;
}

/* 로딩 화면 스타일 */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loader {
    border: 5px solid var(--loader-border);
    border-top: 5px solid var(--loader-top-border);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loading-message {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color);
}

/* 다크 모드 토글 버튼 */
#darkModeToggle {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}

#darkModeToggle:hover {
    transform: scale(1.2); /* 호버 시 버튼 크기 증가 */
}

.pre-filled {
    color: var(--masked-word-color);  /* 퍼즐 생성 시 초기 단어 색상 */
    font-size: 14px;
}

.pre-filled.user-input {
    color: var(--input-text-color);  /* 사용자 입력 단어 색상 */
    font-weight: bold;  /* 사용자 입력은 굵은 폰트 */
    font-size: 18px;
}

.word-coordinate {
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: 10px;
    color: #f74c4c;
    font-weight: bold;
    z-index: 0;
}

td {
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
}

.filled {
    cursor: default;  /* 기본 커서로 변경 */
}

.filled[data-has-coordinate="true"] {
    cursor: pointer;  /* 좌표가 있는 셀만 포인터 커서 */
}

.highlighted {
    background-color: #e6f3ff;
}

#input-area {
    margin: 20px 0;
    text-align: center;
}

#selected-word-info {
    font-weight: bold;
    margin-bottom: 10px;
}

#word-input-container {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.word-input {
    width: 30px;
    height: 30px;
    font-size: 18px;
    text-align: center;
    border: 1px solid #ccc;
}

td {
    cursor: default;
}

td[data-has-coordinate="true"] {
    cursor: pointer;
}

.input-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333; /* 다이얼로그 상자의 텍스트 색상을 어두운 회색으로 설정 */
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.input-dialog h3 {
    margin-top: 0;
}

.input-dialog input[type="text"] {
    width: calc(100% - 20px); /* 양쪽에 10px씩 여백 추가 */
    padding: 8px;
    font-size: 16px; /* 텍스트 크기 증가 */
    margin: 5px 0;
}

.input-dialog button {
    margin-top: 10px;
    padding: 5px 10px;
    margin-right: 10px;
}

.word-meanings {
    font-size: 0.9em;
    color: #1f1f1f;
    margin-top: 5px;
    max-height: 100px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.word-meaning {
    margin: 0;
    padding: 2px 0;
    line-height: 1.2;
}

.input-dialog div {
    margin-bottom: 15px;
}

/* 다크 모드에서 의미 상자 스타일 */
body.dark-mode .word-meanings {
    background-color: #444;  /* 다크 모드에서 의미 상자의 배경색 */
    border: 1px solid #666;  /* 다크 모드에서 의미 상자의 테두리 색상 */
    color: #fff;  /* 다크 모드에서 의미 상자 내의 글자색 */
}

body.dark-mode .word-meaning {
    color: #ddd;  /* 다크 모드에서 개별 의미 텍스트 색상 */
}

/* 토글 버튼 스타일 수정 */
.toggle-button {
    font-size: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s;
    color: var(--puzzle-text-color);
}

.toggle-button:hover {
    transform: scale(1.2);
}

/* 초기 단어 숨김 처리 */
.pre-filled.hidden {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 초기 단어 표시 */
.pre-filled:not(.hidden) {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* 하이라이트된 단어 스타일 */
.highlight {
    background-color: yellow;  /* 하이라이트 색상 설정 */
    font-weight: bold;  /* 강조 표시 */
}

.hidden {
    display: none !important;
}

#completion-dialog .dialog-content {
    background-color: white;
    color: #333;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#completion-dialog h2 {
    color: #4CAF50;
    margin-bottom: 20px;
}

#completion-dialog p {
    margin-bottom: 15px;
}

#completion-dialog button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

#completion-dialog #newPuzzleButton {
    background-color: #4CAF50;
    color: white;
}

#completion-dialog #newPuzzleButton:hover {
    background-color: #45a049;
}

#completion-dialog #closeDialogButton {
    background-color: #f44336;
    color: white;
}

#completion-dialog #closeDialogButton:hover {
    background-color: #da190b;
}

/* 다크 모드 대응 */
body.dark-mode #completion-dialog .dialog-content {
    background-color: #333;
    color: #f0f0f0;
}

body.dark-mode #completion-dialog h2 {
    color: #81c784;
}

.dev-mode-text {
    color: var(--masked-word-color);
}

.dev-mode-text.hidden {
    display: none;
}

/* 반응형 디자인 조정 */
@media (max-width: 800px) {
    #puzzle-and-word-content {
        flex-direction: column; /* 좁은 화면에서는 수직 배치 */
        gap: 5px; /* 간격을 더 좁게 */
        padding: 5px; /* 패딩을 더 줄임 */
        margin: 0; /* 불필요한 마진 제거 */
        align-items: stretch; /* 두 공간을 동일한 너비로 맞춤 */
    }

    #puzzle-space {
        width: 100%; /* 각 공간이 100% 너비 사용 */
        flex-grow: 0; /* 균등하게 공간을 차지하지 않도록 수정 */
        flex-basis: auto; /* 기본 너비를 자동으로 설정 */
        max-height: 60%; /* 최대 높이 설정 */
        padding: 5px; /* 각 공간의 내부 패딩 */
        overflow-y: auto; /* 필요시 스크롤 표시 */
        margin-top: 10px;  /* 상부 마진 10px */
        margin-bottom: 0px;  /* 하부 마진 20px */
    }

    #word-info-space {
        width: 100%; /* 각 공간이 100% 너비 사용 */
        flex-grow: 0; /* 균등하게 공간을 차지하지 않도록 수정 */
        flex-basis: auto; /* 기본 너비를 자동으로 설정 */
        max-height: 40%; /* 최대 높이 설정 */
        padding: 5px; /* 각 공간의 내부 패딩 */
        overflow-y: auto; /* 필요시 스크롤 표시 */
        margin-bottom: 10px;  /* 하부 마진 20px */
    }

    td, th {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }

    button {
        width: 100%;
        margin-bottom: 10px;
    }

    form {
        flex-direction: column;
    }

    #wordList {
        flex-direction: column;
        overflow-y: hidden; /* 기본적으로 스크롤바를 숨김 */
        transition: overflow-y 0.3s ease; /* 스크롤바 전환 애니메이션 */
    }

    #wordList:hover {
        overflow-y: auto; /* 마우스를 올리면 스크롤바가 나타남 */
    }

    .word-direction {
        margin: 10px 0;
    }
}