* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--vh: 1vh;

/* ===== Material Design 3 Color System ===== */

/* Primary Colors */
--md-primary: #6750a4;
--md-on-primary: #ffffff;
--md-primary-container: #eaddff;
--md-on-primary-container: #21005d;

/* Secondary Colors */
--md-secondary: #625b71;
--md-on-secondary: #ffffff;
--md-secondary-container: #e8def8;
--md-on-secondary-container: #1d192b;

/* Tertiary Colors */
--md-tertiary: #7d5260;
--md-on-tertiary: #ffffff;
--md-tertiary-container: #ffd8e4;
--md-on-tertiary-container: #31111d;

/* Error, Success, Warning */
--md-error: #b3261e;
--md-on-error: #ffffff;
--md-error-container: #f9dedc;
--md-on-error-container: #410e0b;
--md-success: #198754;
--md-on-success: #ffffff;
--md-warning: #f59e0b;
--md-on-warning: #ffffff;

/* Surface & Outline */
--md-surface: #fffbfe;
--md-on-surface: #1f1b28;
--md-surface-dim: #ece7f0;
--md-surface-bright: #fffbfe;
--md-surface-container-lowest: #ffffff;
--md-surface-container-low: #f7f2fb;
--md-surface-container: #f3eff5;
--md-surface-container-high: #ede9f0;
--md-surface-container-highest: #e8e4eb;
--md-on-surface-variant: #49454e;
--md-outline: #79747e;
--md-outline-variant: #cac4d0;
--md-scrim: #000000;

/* ===== Material Design 3 Typography Scale ===== */

/* Display Fonts */
--md-display-large-font: 57px;
--md-display-medium-font: 45px;
--md-display-small-font: 36px;

/* Headline Fonts */
--md-headline-large-font: 32px;
--md-headline-medium-font: 28px;
--md-headline-small-font: 24px;

/* Title Fonts */
--md-title-large-font: 22px;
--md-title-medium-font: 16px;
--md-title-small-font: 14px;

/* Body Fonts */
--md-body-large-font: 16px;
--md-body-medium-font: 14px;
--md-body-small-font: 12px;

/* Label Fonts */
--md-label-large-font: 14px;
--md-label-medium-font: 12px;
--md-label-small-font: 11px;

/* ===== Material Design 3 Spacing System ===== */

--md-spacing-1: 4px;
--md-spacing-2: 8px;
--md-spacing-3: 12px;
--md-spacing-4: 16px;
--md-spacing-5: 20px;
--md-spacing-6: 24px;
--md-spacing-7: 28px;
--md-spacing-8: 32px;

/* ===== Material Design 3 Elevation System ===== */

--md-elevation-0: none;
--md-elevation-1: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
--md-elevation-2: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
--md-elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 1px rgba(0,0,0,0.3);
--md-elevation-4: 0px 6px 10px 4px rgba(0,0,0,0.15), 0px 2px 3px 1px rgba(0,0,0,0.3);
--md-elevation-5: 0px 8px 12px 6px rgba(0,0,0,0.15), 0px 4px 4px 1px rgba(0,0,0,0.3);

/* ===== Material Design 3 Shape/Corner Radius ===== */

--md-corner-xs: 4px;
--md-corner-sm: 8px;
--md-corner-md: 12px;
--md-corner-lg: 16px;
--md-corner-xl: 28px;
--md-corner-full: 9999px;

/* ===== Legacy Aliases (Backward Compatibility) ===== */

--primary: var(--md-primary);
--primary-dark: #533e8a;
--primary-light: var(--md-primary-container);
--surface: var(--md-surface);
--surface-dim: var(--md-surface-container);
--outline: var(--md-outline);
--outline-variant: var(--md-outline-variant);
--text-primary: var(--md-on-surface);
--text-secondary: var(--md-on-surface-variant);
--success: var(--md-success);
--error: var(--md-error);
}

html {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f8f5ff 0%, #faf7ff 100%);
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text-primary);
overflow-x: hidden;
/* 모바일 키보드가 나올 때도 높이 유지 */
min-height: 100dvh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

body {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f8f5ff 0%, #faf7ff 100%);
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text-primary);
overflow-x: hidden;
/* 모바일 키보드가 나올 때도 높이 유지 */
min-height: 100dvh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 2px;
}

.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
background: var(--outline-variant);
border-radius: 3px;
}

.container {
width: 100%;
height: calc(100dvh + 50px); /* 헤더(50px) 제외한 높이 */
display: flex;
flex-direction: column;
padding: 6px 16px 16px 16px;
overflow: hidden;
box-sizing: border-box; /* padding 포함한 너비 계산 */
}

/* Menu Toggle Area */
/* 기본: 숨김 (미디어쿼리에서 표시) */
.menu-toggle-area {
display: none;
align-items: center;
justify-content: space-between; /* 좌우 끝에 배치 */
padding: 6px 8px; /* 좌우 패딩 고정 */
margin-bottom: 0px;
}

/* Hamburger Menu Button */
.hamburger-btn {
width: 35px;
height: 34.25px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
font-size: 24px;
transition: all 0.2s ease;
border-radius: 8px;
flex-shrink: 0;
padding-top: 0px;
}

.hamburger-btn .material-icons {
font-size: 22px;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
}

.side-menu.open .hamburger-btn {
padding-left: 8px; /* 열렸을 때는 왼쪽 정렬 */
padding-right: 8px;
}

/* 햄버거 버튼은 항상 왼쪽에 고정 */
.hamburger-btn:hover {
background: var(--primary-light);
}

.hamburger-btn:active {
background: rgba(103, 80, 164, 0.2);
}

/* 기본 숨김 (미디어쿼리에서 표시) */
#hamburger-btn-mobile,
#hamburger-btn-desktop,
#close-menu-btn,
#close-menu-btn-mobile {
display: none !important;
}

/* 모바일 Drawer 헤더 - 기본 숨김 */
.mobile-drawer-header {
display: none !important;
}

/* Side Menu */
.side-menu {
position: fixed;
top: 0;
left: 0;
width: 52px; /* 닫혔을 때 아이콘만 보이는 너비 */
height: 100dvh; /* 동적 viewport 높이 (iOS Safari 대응) */
background: var(--surface);
border-right: 1px solid var(--outline-variant);
z-index: 1000;
transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
flex-direction: column;
padding-top: 0px;
overflow: hidden;
}

/* 스크롤 가능한 메뉴 콘텐츠 wrapper */
.menu-content-wrapper {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--outline-variant) transparent;
}

.side-menu.open {
width: 260px; /* 열렸을 때 전체 너비 */
}

/* Container shifts when menu is open/closed */
.container {
margin-left: 52px; /* 기본적으로 아이콘 바 너비만큼 */
width: calc(100% - 52px);
transition: margin-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.container.menu-open {
margin-left: 260px;
width: calc(100% - 260px);
}

.menu-close-btn {
width: 40px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
display: none; /* 기본적으로 숨김 */
align-items: center;
justify-content: center;
color: var(--text-primary);
font-size: 24px;
transition: all 0.2s ease;
border-radius: 8px;
margin-left: auto; /* 우측으로 밀기 */
}

.side-menu.open .menu-close-btn {
display: flex; /* 열렸을 때만 우측에 보임 */
}

.menu-close-btn:hover {
background: var(--surface-dim);
}

/* 사이드바 닫혔을 때 텍스트 숨김 */
.side-menu span:not(.material-icons) {
opacity: 0;
white-space: nowrap;
transition: opacity 0.2s ease;
}

.side-menu.open span:not(.material-icons) {
opacity: 1;
}

/* 아이콘 좌측 정렬 */
.menu-action-btn,
.menu-file-item,
.menu-bottom-item {
justify-content: flex-start; /* 좌측 정렬로 변경 */
transition: justify-content 0.3s ease;
}

.side-menu.open .menu-action-btn,
.side-menu.open .menu-file-item,
.side-menu.open .menu-bottom-item {
justify-content: flex-start;
}

/* Menu Actions */
.menu-actions {
padding: 4px 8px 4px 8px; /* 좌우 패딩 고정 */
display: flex;
flex-direction: column;
gap: 0;
border-bottom: none; /* 닫혔을 때 border 제거 */
margin-bottom: 8px;
transition: border-bottom 0.3s ease;
}


.side-menu.open .menu-actions {
padding: 4px 8px 8px 8px; /* 동일한 패딩 유지 */
border-bottom: 1px solid var(--outline-variant); /* 열렸을 때 border 추가 */
}

.menu-action-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 8px; /* 좌우 패딩 고정 */
background: transparent;
border: none;
border-radius: 8px;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
width: 100%;
height: 36px;
}

.side-menu.open .menu-action-btn {
padding: 10px 8px; /* 패딩 동일하게 유지 */
}

.menu-action-btn:hover {
background: var(--surface-dim);
}

.menu-action-btn .material-icons {
font-size: 18px;
width: 18px; /* 아이콘 너비 고정 */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* 아이콘 크기 고정 */
}

/* Menu Section */
.menu-section {
display: none; /* 닫혔을 때 완전히 숨김 */
padding: 8px 12px;
border-bottom: 1px solid var(--outline-variant);
}

.side-menu.open .menu-section {
display: block; /* 열렸을 때만 보임 */
}

.side-menu.mobile-open .menu-section {
display: block; /* 모바일 drawer 열렸을 때도 보임 */
}

.menu-section-header {
display: flex;
align-items: center;
justify-content: center; /* 닫혔을 때 중앙 */
gap: 8px;
padding: 8px 12px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: justify-content 0.3s ease;
cursor: pointer;
user-select: none;
}

.menu-section-header:hover {
background-color: rgba(0, 0, 0, 0.05);
}

.menu-section-header .arrow-icon {
margin-left: auto;
transition: transform 0.3s ease;
}

.menu-section-header.collapsed .arrow-icon {
transform: rotate(-90deg);
}

.side-menu.open .menu-section-header {
justify-content: flex-start; /* 열렸을 때 왼쪽 정렬 */
}

.side-menu.mobile-open .menu-section-header {
justify-content: flex-start; /* 모바일 drawer에서도 왼쪽 정렬 */
}

.menu-section-header .material-icons {
font-size: 18px;
}

.menu-file-list {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 4px;
max-height: none;
overflow: visible;
transition: max-height 0.3s ease, opacity 0.3s ease;
opacity: 1;
}

.menu-file-list.collapsed {
max-height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
}

.menu-file-item {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
background: transparent;
border: none;
border-radius: 6px;
color: var(--text-primary);
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
position: relative;
margin-bottom: 4px;
}

.menu-file-item:hover {
background: var(--surface-dim);
}

.menu-file-item .material-icons {
font-size: 18px;
color: var(--text-secondary);
}

.menu-file-item .file-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0; /* 닫혔을 때 숨김 */
transition: opacity 0.2s ease;
}

.side-menu.open .menu-file-item .file-name {
opacity: 1; /* 열렸을 때 보임 */
}

/* List initial content & search results - 항상 보여야 함 */
#list-initial-content .menu-file-item .file-name,
#list-search-results .menu-file-item .file-name {
opacity: 1 !important;
color: var(--text-primary) !important;
}

.side-menu.mobile-open .menu-file-item .file-name {
opacity: 1; /* 모바일 drawer 열렸을 때 보임 */
}

.side-menu.mobile-open .menu-action-btn {
display: flex; /* 모바일 drawer에서도 표시 */
}

.side-menu.mobile-open .menu-action-btn span:not(.material-icons) {
display: inline; /* 텍스트 스팬 표시 */
color: var(--text-primary); /* 텍스트 색깔 명시 */
opacity: 1; /* 모바일 drawer 열렸을 때 액션 버튼 텍스트 보임 */
}

.menu-file-item .file-actions {
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 0.2s ease;
}

.side-menu.open .menu-file-item:hover .file-actions {
opacity: 1; /* 사이드바 열렸을 때만 hover 시 보임 */
}

.side-menu.mobile-open .menu-file-item:hover .file-actions {
opacity: 1; /* 모바일 drawer에서도 hover 시 보임 */
}

/* 검색 결과 모달에서 file-name 표시 */
#search-results-modal .menu-file-item .file-name {
opacity: 1; /* 검색 결과에서는 항상 보임 */
}

.menu-file-item .edit-icon-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
display: flex;
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 6px;
border-radius: 4px;
transition: all 0.2s ease;
font-size: 18px;
height: 32px;
width: 32px;
align-items: center;
justify-content: center;
opacity: 0;
}

.menu-file-item .edit-icon-btn:hover {
background: var(--surface-light);
color: var(--text-primary);
}

.side-menu.open .menu-file-item:hover .edit-icon-btn {
opacity: 1;
}

.side-menu.mobile-open .menu-file-item:hover .edit-icon-btn {
opacity: 1;
}

.file-action-btn {
width: 28px;
height: 28px;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s ease;
}

.file-action-btn:hover {
background: var(--primary-light);
color: var(--primary);
}

.file-action-btn .material-icons {
font-size: 18px;
}

/* Menu Bottom */
.menu-bottom {
padding: 8px 8px 16px 8px; /* 좌우 패딩 고정 */
border-top: none; /* 닫혔을 때 border 제거 */
transition: border-top 0.3s ease;
}

.side-menu.open .menu-bottom {
padding: 8px 8px 16px 8px; /* 동일한 패딩 유지 */
border-top: 1px solid var(--outline-variant); /* 열렸을 때 border 추가 */
}

.side-menu.mobile-open .menu-bottom {
padding: 8px 8px 16px 8px; /* 모바일에서도 동일한 패딩 */
border-top: 1px solid var(--outline-variant); /* 모바일 drawer에서도 border 추가 */
}

.menu-bottom-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 8px; /* 좌우 패딩 고정 */
background: transparent;
border: none;
border-radius: 8px;
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
width: 100%;
}

.side-menu.open .menu-bottom-item {
padding: 10px 8px; /* 패딩 동일하게 유지 */
}

.side-menu.mobile-open .menu-bottom-item {
padding: 10px 8px; /* 모바일에서도 동일한 패딩 */
}

.menu-bottom-item:hover {
background: var(--surface-dim);
}

.menu-bottom-item .material-icons {
font-size: 18px;
width: 18px; /* 아이콘 너비 고정 */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* 아이콘 크기 고정 */
}

/* Responsive Layout - 1024px breakpoint */
@media (max-width: 1023px) {
/* Hide side-menu completely on small screens */
.side-menu {
display: none !important;
}

/* Show side-menu only when it has mobile-open class */
.side-menu.mobile-open {
display: flex !important;
}

/* Hide desktop menu-toggle-area on mobile */
.menu-toggle-desktop {
display: none !important;
}

/* Show hamburger button on mobile */
#hamburger-btn-mobile {
display: flex !important;
position: fixed;
top: 6px;
left: 8px;
z-index: 9999;
}

/* Show mobile drawer header on mobile */
.mobile-drawer-header {
display: flex !important;
justify-content: flex-end;
align-items: center;
padding: 4px 8px;
margin-bottom: 8px;
flex-shrink: 0;
}

/* Adjust container for mobile (no top margin needed) */
.container {
margin-left: 0 !important;
width: 100% !important;
margin-top: 0;
}

/* Mobile drawer styling */
.side-menu.mobile-open {
position: fixed;
top: 0;
left: 0;
width: 260px !important;
height: 100dvh;
z-index: 999;
overflow: auto !important;
}

/* Show close button mobile */
.side-menu.mobile-open #close-menu-btn-mobile {
display: flex !important;
}

/* Hide menu sections until drawer is open */
.side-menu .menu-section {
display: none;
}

.side-menu.mobile-open .menu-section {
display: block;
}

/* Show menu actions in drawer */
.side-menu .menu-actions {
display: none;
}

.side-menu.mobile-open .menu-actions {
display: flex;
}

/* Fix overflow for mobile drawer to show text */
.side-menu {
overflow: visible !important;
}

/* Show all text spans in mobile drawer */
.side-menu.mobile-open span:not(.material-icons) {
opacity: 1 !important;
display: inline !important;
}
}

@media (min-width: 1024px) {
/* Show side-menu on large screens */
.side-menu {
display: flex !important;
position: fixed;
}

/* Hide mobile hamburger button on desktop */
#hamburger-btn-mobile {
display: none !important;
}

/* Hide mobile drawer header on desktop */
.mobile-drawer-header {
display: none !important;
}

/* Show desktop menu-toggle-area */
.menu-toggle-desktop {
display: flex !important;
position: static;
width: 100%;
height: auto;
background: transparent;
border: none;
padding: 4px 8px 16px 8px;
margin-bottom: 8px;
z-index: auto;
}

/* Show hamburger button on desktop */
#hamburger-btn-desktop {
display: flex !important;
}

/* Hide close button by default on desktop */
#close-menu-btn {
display: none !important;
}

/* Show close button only when sidebar is open on desktop */
.side-menu.open #close-menu-btn {
display: flex !important;
}

/* Show menu actions on large screens */
.side-menu .menu-actions {
display: flex !important;
}

/* Hide menu sections by default on large screens */
.side-menu .menu-section {
display: none !important;
}

/* Show menu sections only when sidebar is open on large screens */
.side-menu.open .menu-section {
display: block !important;
}

/* Restore container margins on large screens */
.container {
margin-left: 52px;
width: calc(100% - 52px);
margin-top: 0;
}

.container.menu-open {
margin-left: 260px;
width: calc(100% - 260px);
}

/* game-info-row responsive to sidebar */
.game-info-row {
margin-left: 52px;
width: calc(100% - 52px);
}

.container.menu-open ~ #game-section .game-info-row,
.side-menu.open ~ #game-section .game-info-row {
margin-left: 260px;
width: calc(100% - 260px);
}
}

/* Slide in animation */
@keyframes slideInFromLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}

/* Slide out animation */
@keyframes slideOutToLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

/* Settings Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
}

.modal-overlay.active {
display: flex;
}

.modal-content {
background: var(--surface);
border-radius: 16px;
box-shadow: var(--md-elevation-4);
width: 90%;
max-width: 400px;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}

.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--outline-variant);
}

.modal-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}

.modal-close-btn {
width: 32px;
height: 32px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--text-secondary);
transition: all 0.2s ease;
}

.modal-close-btn:hover {
background: var(--surface-dim);
}

.modal-body {
padding: 24px;
flex: 1;
overflow-y: auto;
}

.setting-group {
margin-bottom: 20px;
}

.setting-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
}

.radio-group {
display: flex;
flex-direction: column;
gap: 12px;
}

.radio-option {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border: 2px solid var(--outline-variant);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}

.radio-option:hover {
border-color: var(--primary);
background: var(--primary-light);
}

.radio-option input[type="radio"] {
margin-top: 2px;
accent-color: var(--primary);
}

.radio-option input[type="radio"]:checked ~ * {
color: var(--primary);
}

.radio-option span {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}

.radio-description {
margin: 4px 0 0 0;
font-size: 12px;
color: var(--text-secondary);
}

.difficulty-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}

.difficulty-hint {
font-size: 12px;
color: var(--text-secondary);
background: var(--surface-light);
padding: 4px 8px;
border-radius: 6px;
}

.slider-container {
display: flex;
flex-direction: column;
gap: 12px;
}

.difficulty-slider {
width: 100%;
height: 6px;
border-radius: 3px;
background: var(--outline-variant);
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}

.difficulty-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}

.difficulty-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.difficulty-slider::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}

.difficulty-slider::-moz-range-thumb:hover {
transform: scale(1.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.slider-labels {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-secondary);
}

.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--outline-variant);
display: flex;
gap: 12px;
justify-content: flex-end;
}

.modal-btn {
padding: 10px 24px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}

.modal-btn-cancel {
background: transparent;
color: var(--text-primary);
}

.modal-btn-cancel:hover {
background: var(--surface-dim);
}

.modal-btn-primary {
background: var(--primary);
color: white;
}

.modal-btn-primary:hover {
background: var(--primary-dark);
}


/* Mode-based layout */
.content-area {
flex: 1;
display: flex;
gap: 4px;
min-height: 0;
overflow-x: hidden; /* 좌우 스크롤 방지 */
}

/* List Mode */
#list-section {
display: none;
flex: 1;
margin-top: 50px; /* fixed header 높이만큼 여백 - 헤더 밑에서 시작 */
overflow: hidden; /* 내부 div에서 관리 */
overflow-x: hidden; /* 좌우 스크롤 방지 */
}

#list-section.active {
display: flex;
flex-direction: column;
}

/* List section 내부 wrapper - 로고와 검색 입력 필드는 스크롤 안 함 */
#list-section > div {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 40px 0px;
overflow: hidden; /* 내부 스크롤 제거 */
}

/* 검색 결과 영역에만 스크롤 적용 */
#list-search-results {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--outline-variant) transparent;
}

/* 초기 콘텐츠에도 스크롤 적용 (검색 결과 대신 표시될 때) */
#list-initial-content {
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--outline-variant) transparent;
}

/* List Search Container - Responsive Design */
#list-search-container {
width: 100%;
max-width: 768px;
margin-bottom: 40px;
padding: 0px 16px;
padding-bottom: 12px;
background-color: transparent;
}

#list-search-container[data-sticky="true"] {
padding-top: 8px;
position: sticky;
top: 0;
z-index: 50; /* 검색 결과가 보이도록 z-index 낮춤 */
background-color: transparent;
}

#list-search-container > div {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface);
border: 2px solid var(--outline-variant);
border-radius: 24px;
padding: 12px 16px;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
min-width: 0; /* Allow container to shrink */
overflow: hidden; /* Prevent content from overflowing */
will-change: auto; /* Optimize for sticky positioning */
}

#list-search-input {
flex: 1;
min-width: 0; /* Allow input to shrink properly */
border: none;
background: transparent;
outline: none;
font-size: 16px;
color: var(--text-primary);
font-family: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#list-search-btn {
flex-shrink: 0; /* Prevent button from shrinking */
white-space: nowrap;
border: none;
background: var(--primary);
color: white;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
font-family: inherit;
transition: all 0.2s ease;
min-width: fit-content;
}

#list-search-btn:hover {
background: var(--primary-dark);
box-shadow: 0 2px 8px rgba(103, 80, 164, 0.3);
}

#list-search-btn:active {
transform: scale(0.95);
}

/* Mobile Responsive - Reduce padding and adjust sizing */
@media (max-width: 600px) {
#list-search-container {
padding: 0px 12px;
}

#list-search-container > div {
padding: 10px 12px;
gap: 6px;
}

#list-search-btn {
padding: 6px 10px;
font-size: 13px;
flex-shrink: 0;
}

#list-search-input {
font-size: 14px;
}
}

/* List Content - Horizontal Padding */
#list-initial-content,
#list-search-results {
width: 100%;
max-width: 740px;
padding: 0px 16px;
flex: 1; /* 남은 공간을 모두 차지 */
min-height: 0; /* flex 아이템이 내용보다 작아질 수 있도록 */
}

@media (max-width: 600px) {
#list-initial-content,
#list-search-results {
padding: 0px 12px;
}
}


.file-manager {
background: var(--surface);
border-radius: 24px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
padding: 20px;
}

.file-manager-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}

.file-manager-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}

.create-btn {
padding: 10px 16px;
background: var(--success);
color: white;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2);
}

.create-btn:hover {
background: #42961b;
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
transform: translateY(-1px);
}

.file-list {
display: flex;
flex-direction: column;
gap: 8px;
}

.file-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
background: var(--surface-dim);
border: 1px solid var(--outline-variant);
border-radius: 8px;
transition: all 0.2s;
cursor: pointer;
position: relative;
}

.file-item:hover {
background: rgba(103, 80, 164, 0.05);
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(103, 80, 164, 0.1);
}

.file-item:active {
transform: scale(0.98);
}

.file-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}

.file-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
word-break: break-word;
line-height: 1.4;
}

.file-date {
font-size: 11px;
color: var(--text-secondary);
}

.file-actions {
display: flex;
align-items: center;
}

.delete-icon-btn {
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: transparent;
color: var(--error);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}

.delete-icon-btn:hover {
background: rgba(245, 34, 45, 0.1);
}

.delete-icon-btn:active {
transform: scale(0.9);
}

.delete-icon-btn .material-icons {
font-size: 20px;
}

.empty-message {
text-align: center;
padding: 20px;
color: var(--text-secondary);
font-size: 13px;
}

/* Create/Edit Mode */
#editor-section {
display: none;
flex-direction: column;
overflow-x: hidden; /* 좌우 스크롤 방지 */
width: 100%;
}

#editor-section.active {
display: flex;
}

.editor-container {
width: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
box-sizing: border-box; /* padding 포함한 너비 계산 */
max-height: calc(100dvh - 32px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-top: 60px;
}

.editor-header {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 12px;
}

.editor-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
padding: 6px 16px;
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--surface);
border-bottom: 2px solid var(--primary);
z-index: 500;
box-sizing: border-box;
}

.editor-title-id {
display: none;
}

.editor-file-id-hidden {
display: none !important;
}

.editor-title-buttons {
display: flex;
gap: 6px;
align-items: center;
word-break: break-all;
}

.editor-title-buttons .toolbar-btn {
padding: 6px 12px;
font-size: 11px;
height: 32px;
}

.editor-title-buttons .btn-back,
.editor-title-buttons .btn-save {
padding: 6px 12px;
font-size: 11px;
height: 32px;
}

.panel-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}

.panel-icon {
font-size: 20px;
}

.editor-toolbar {
display: flex;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--outline-variant);
flex-wrap: wrap;
}

.toolbar-btn {
padding: 8px 16px;
background: var(--primary);
color: white;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
box-shadow: 0 2px 8px rgba(103, 80, 164, 0.2);
}

.toolbar-btn:hover {
background: var(--primary-dark);
box-shadow: 0 4px 12px rgba(103, 80, 164, 0.3);
transform: translateY(-1px);
}

.toolbar-btn:active {
transform: translateY(0);
}

.toolbar-btn.secondary {
background: var(--outline);
}

.toolbar-btn.secondary:hover {
background: #655f6b;
}

.toolbar-btn.copy {
background: var(--success);
}

.toolbar-btn.copy:hover {
background: #42961b;
}

.editor-area {
display: flex;
flex-direction: column;
}

#editor {
padding: 16px;
border: 2px solid var(--outline-variant);
border-radius: 12px;
font-size: 14px;
line-height: 1.8;
resize: none;
font-family: 'Noto Sans KR', monospace;
color: var(--text-primary);
background: white;
transition: border-color 0.2s;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}

#editor:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(103, 80, 164, 0.1);
}

.stats {
display: flex;
gap: 16px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--outline-variant);
font-size: 13px;
color: var(--text-secondary);
}

.stat {
display: flex;
align-items: center;
gap: 4px;
}

.stat-label {
font-weight: 100;
font-size: 10px;
}

.stat-value {
color: var(--primary);
font-weight: 700;
}

.hint {
background: rgba(250, 173, 20, 0.1);
border: 1px solid #faad14;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
font-size: 13px;
color: var(--md-warning);
line-height: 1.5;
}

.hint-icon {
margin-right: 6px;
font-weight: 700;
}

.editor-actions {
display: flex;
flex-direction: row;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--outline-variant);
}

.btn-back {
padding: 10px 12px;
background: var(--error);
color: white;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
flex: 1;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
min-width: 0;
}

.btn-back:hover {
background: #d81b1f;
}

.btn-save {
padding: 10px 12px;
background: var(--success);
color: white;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2);
flex: 1;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
min-width: 0;
}

.btn-save:hover {
background: #42961b;
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
transform: translateY(-1px);
}

/* Scrollbar styling */
#editor {
scrollbar-width: thin;
scrollbar-color: var(--outline-variant) transparent;
}

/* Loading Spinner */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 3000;
}

.loading-overlay.active {
display: flex;
}

.loading-spinner {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}

.spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

.loading-text {
color: white;
font-size: 14px;
font-weight: 500;
}

/* Responsive */

/* ========================================
GAME SECTION STYLES (from Memory.html)
======================================== */

#game-section {
display: none;
flex: 1;
overflow-y: auto;
overflow-x: hidden; /* 좌우 스크롤 방지 */
}

#game-section.active {
display: flex;
flex-direction: column;
}

.game-container {
width: 100%;
margin: 0;
margin-top: 50px; /* fixed header 높이만큼 여백 - 헤더 밑에서 시작 */
padding: 6px 0px 16px 0px;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--outline-variant) transparent;
}

.header-top {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 12px;
padding: 12px 0px;
border-bottom: 1px solid var(--outline-variant);
}

.header-top h1 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.5px;
margin: 0;
color: var(--text-primary);
}

.title-buttons {
display: flex;
gap: 8px;
align-items: center;
}

.subtitle {
text-align: center;
font-size: 13px;
font-weight: 400;
color: var(--text-secondary);
margin: 0 0 24px 0;
padding: 8px 0;
line-height: 1.5;
letter-spacing: 0.2px;
}

/* Points Display */
.share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 2px solid var(--outline-variant);
border-radius: 12px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
color: var(--primary);
padding: 0;
}

.share-btn:hover {
background: var(--primary-light);
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(102, 51, 153, 0.2);
}

.share-btn:active {
transform: scale(0.95);
}

.share-btn .material-icons {
font-size: 24px;
color: var(--primary);
}

@media (min-width: 480px) {
.share-btn {
opacity: 0.87;
line-height: 1;
}
}

.playing-screen {
display: none;
width: 100%;
padding-top: 0px;
}

.gameover-screen {
display: none;
width: 100%;
padding-top:0px;
}        
.playing-screen.active, .gameover-screen.active {
display: block;
animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Playing Screen - Unified Header */
.game-header {
background: var(--surface);
border-bottom: 1px solid var(--outline-variant);
padding: 0px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.game-info {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
gap: 0px;
width: 100vw;
margin-bottom: 0px;
background: var(--surface);
border-bottom: 1px solid var(--outline-variant);
padding: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
top: 0;
z-index: 100;
box-sizing: border-box;
}

.game-info-row {
display: flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
padding-left: 16px;
padding-right: 16px;
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, #f8f5ff 0%, #faf7ff 100%);
border-bottom: 1px solid var(--outline-variant);
z-index: 100;
box-sizing: border-box;
height: 50px;
/* 모바일에서 키보드가 나올 때도 상단에 유지 */
position: fixed !important;
top: 0 !important;
}

.game-info .header-buttons {
margin-left: auto;
}

.game-info .progress-bar {
width: calc(100% + 32px);
margin: 8px -16px -8px -16px;
border-radius: 0;
}

.info-card {
background: var(--surface-dim);
padding: 6px 10px;
border-radius: 8px;
text-align: center;
border: 1px solid var(--outline-variant);
display: flex;
flex-direction: column;
justify-content: center;
height: 34.25px;
}

#alarm-card {
border-color: #ccc0d9 !important;
}

.info-label {
font-size: 9px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: 0.3px;
}

.info-value {
font-size: 14px;
font-weight: 700;
color: var(--primary);
}

.header-buttons {
display: flex;
gap: 8px;
align-items: center;
}

.progress-bar {
width: 100%;
height: 3px;
background: var(--outline-variant);
border-radius: 1.5px;
overflow: hidden;
position: fixed;
top: 50px;
left: 0;
right: 0;
z-index: 99;
box-sizing: border-box;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary) 0%, var(--md-tertiary) 100%);
transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.test-display {
padding: 2px;
line-height: 2;
font-size: 16px;
margin-bottom: 20px;
color: var(--text-primary);
}

.test-word {
position: relative;
}

.blank-input {
display: inline-block;
border: none;
border-bottom: 2px solid var(--outline-variant);
background: transparent;
padding: 2px 8px;
font-size: 16px;
font-family: 'Noto Sans KR', sans-serif;
color: var(--text-primary);
transition: border-color 0.2s, background-color 0.2s;
margin: 0 2px;
}

.blank-input:focus {
outline: none;
border-bottom: 2px solid var(--primary);
background: rgba(103, 80, 164, 0.05);
}

.blank-input.correct {
border-bottom: 2px solid var(--success);
background: rgba(82, 196, 26, 0.1);
color: var(--success);
}

.blank-input.wrong {
border-bottom: 2px solid var(--error);
background: rgba(245, 34, 45, 0.1);
color: var(--error);
animation: shake 0.3s;
}

.word-blank-container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px;
}

.word-input {
display: inline-block;
border: none;
border-bottom: 2px solid var(--outline-variant);
background: transparent;
padding: 2px 2px;
font-size: 16px;
font-family: 'Noto Sans KR', sans-serif;
color: var(--text-primary);
transition: border-color 0.2s, background-color 0.2s;
margin: 0px 2px;
word-break: break-word; /* 단어 경계 존중하며 줄바꿈 */
white-space: normal;
width: auto;
min-width: 0;
vertical-align: middle;
}

.word-visible {
word-break: break-word; /* 단어 경계 존중하며 줄바꿈 */
white-space: normal;
display: inline-block; /* 부모 너비 제약을 받도록 설정 - 단어 잘림 허용 */
}

.word-input:focus {
outline: none;
border-bottom: 2px solid var(--primary);
background: rgba(103, 80, 164, 0.05);
}

.word-input.correct {
border-bottom: 2px solid var(--success);
background: rgba(82, 196, 26, 0.1);
color: var(--success);
}

.word-input.wrong {
border-bottom: 2px solid var(--error);
background: rgba(245, 34, 45, 0.1);
color: var(--text-primary);
animation: shake 0.3s;
}

/* 글자 단위 색상 표시용 클래스 */
.word-input.partial-correct {
border-bottom: 2px solid #faad14;
background: rgba(250, 173, 20, 0.1);
}

/* 힌트 사용한 경우 - 황색으로 표시, 맞은 갯수에 포함 안 함 */
.word-input.hint-used {
border-bottom: 2px solid #faad14;
background: rgba(250, 173, 20, 0.2);
color: var(--md-warning);
}

/* 틀린 답변 확대 표시 - 화려하고 멋있게 */
.word-input.enlarged {
font-size: 26px;
width: auto;
color: white;
background: linear-gradient(135deg, #d32f2f 0%, #ff5252 100%);
border: 3px solid #ffd700;
font-weight: bold;
letter-spacing: 1px;
box-shadow: 0 8px 20px rgba(211, 47, 47, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
padding: 8px 12px;
transition: all 0.3s ease;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.word-input.partial-correct::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: linear-gradient(to right, var(--success), transparent);
}

/* 입력 필드와 체크박스 컨테이너 */
.word-blank-container {
display: inline-flex;
align-items: center;
gap: 4px;
}

/* Italic 체크박스 */
.italic-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--primary);
margin-left: 2px;
}

/* Italic 표시 */
.word-input.italic-marked,
span.italic-marked {
font-style: italic;
opacity: 0.7;
}

/* 토스트 팝업 */
.toast-notification {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: #ffffff;
color: var(--on-surface);
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10000;
max-width: 90%;
animation: slideUp 0.3s ease-out;
border-left: 4px solid var(--primary);
}

@keyframes slideUp {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}

/* 생일 파티 폭죽 애니메이션 */
@keyframes birthday-burst {
0% {
opacity: 1;
transform: translateY(0) translateX(0) scale(1) rotateZ(0deg);
}
10% {
opacity: 1;
transform: translateY(var(--ty-burst)) translateX(var(--tx-burst)) scale(1) rotateZ(180deg);
}
50% {
opacity: 1;
transform: translateY(var(--ty)) translateX(var(--tx)) scale(0.8) rotateZ(360deg);
}
100% {
opacity: 0;
transform: translateY(calc(var(--ty) * 2)) translateX(var(--tx)) scale(0) rotateZ(720deg);
}
}

.confetti {
position: fixed;
pointer-events: none;
animation: birthday-burst 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}


/* 포인트 플로팅 애니메이션 */
@keyframes points-float {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-80px) scale(1.2);
}
}

.points-popup {
position: fixed;
font-weight: 700;
font-size: 80px;
color: var(--success);
pointer-events: none;
animation: points-float 5s ease-out forwards;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
z-index: 10000;
}

.answer-display {
display: inline-block;
color: var(--success);
font-weight: 600;
margin-left: 4px;
font-size: 14px;
transition: font-size 0.2s ease;
word-break: break-word; /* 긴 정답도 줄바꿈 허용 */
white-space: normal;
max-width: 100%; /* 부모 너비 존중 */
}

/* 결과보기 버튼으로 폰트 확대 상태 */
.answer-display.enlarged {
font-size: 28px;
}

/* Submit Button */
.submit-button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}

/* Game Controls Container */
.game-controls {
display: none;
}

.game-controls.active {
display: flex;
}

.submit-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 6px;
background: var(--success);
color: white;
border: none;
cursor: pointer;
transition: all 0.2s ease;
width: 34.25px;
height: 34.25px;
font-size: 18px;
}

.submit-btn.active {
display: flex;
}

.submit-btn:hover {
background: #42961b;
transform: scale(1.05);
}

.submit-btn:active {
transform: scale(0.95);
}

.submit-btn:disabled {
background: var(--outline);
cursor: not-allowed;
opacity: 0.5;
transform: none;
}

/* Game Over Screen */
.gameover-content {
text-align: center;
width: 100%;
margin: 0;
}

.final-score-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 32px;
margin-left: auto;
margin-right: auto;
width: 100%;
padding: 24px 32px;
background: linear-gradient(135deg, rgba(103, 80, 164, 0.08), rgba(103, 80, 164, 0.04));
border: 2px solid var(--primary);
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
font-family: inherit;
}

.final-score-container:hover {
background: linear-gradient(135deg, rgba(103, 80, 164, 0.15), rgba(103, 80, 164, 0.1));
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(103, 80, 164, 0.2);
}

.final-score-container:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(103, 80, 164, 0.15);
}

.final-score {
font-size: 64px;
font-weight: 700;
color: var(--primary);
text-shadow: 0 4px 12px rgba(103, 80, 164, 0.2);
margin: 0;
}

.final-points {
font-size: 16px;
font-weight: 600;
color: var(--primary);
opacity: 0.9;
margin: 0;
}

.final-score-next-btn {
font-size: 14px;
font-weight: 600;
color: var(--primary);
background: white;
border: 1.5px solid var(--primary);
padding: 6px 20px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}

.final-score-next-btn:hover {
background: var(--primary);
color: white;
}

.final-points {
font-size: 32px;
font-weight: 700;
color: var(--success);
text-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
}

.total-points-container {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
padding: 16px;
background: rgba(82, 196, 26, 0.1);
border-radius: 12px;
border: 2px solid var(--success);
}

.total-points-label {
font-size: 18px;
font-weight: 600;
color: var(--text-secondary);
}

.total-points-value {
font-size: 28px;
font-weight: 700;
color: var(--success);
text-shadow: 0 2px 6px rgba(82, 196, 26, 0.3);
}

.button-group {
display: flex;
flex-direction: row;
justify-content: center;
gap: 12px;
margin-bottom: 32px;
width: 100%;
}

.btn-base {
padding: 14px 28px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary {
background: var(--primary);
color: white;
}

.btn-primary:hover {
background: var(--primary-dark);
box-shadow: 0 6px 16px rgba(103, 80, 164, 0.3);
transform: translateY(-2px);
}

.btn-secondary {
background: var(--md-tertiary);
color: white;
}

.btn-secondary:hover {
background: var(--md-tertiary);
box-shadow: 0 6px 16px rgba(125, 82, 96, 0.3);
transform: translateY(-2px);
}

.btn-tertiary {
background: var(--outline);
color: white;
}

.btn-tertiary:hover {
background: #655f6b;
box-shadow: 0 6px 16px rgba(121, 116, 126, 0.3);
transform: translateY(-2px);
}

/* ===== Material Design 3 Button System ===== */

/* Base Button */
.md-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--md-spacing-2);
font-size: var(--md-label-large-font);
font-weight: 500;
letter-spacing: 0.1px;
border: none;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
font-family: inherit;
}

/* Filled Button (Primary) */
.md-button-filled {
background-color: var(--md-primary);
color: var(--md-on-primary);
border-radius: 20px;
padding: 10px 24px;
height: 40px;
box-shadow: var(--md-elevation-1);
}

.md-button-filled:hover {
background-color: var(--md-primary);
box-shadow: var(--md-elevation-2);
transform: translateY(-1px);
}

.md-button-filled:active {
transform: translateY(0);
box-shadow: var(--md-elevation-1);
}

/* Filled Tonal Button (Secondary) */
.md-button-filled-tonal {
background-color: var(--md-secondary-container);
color: var(--md-on-secondary-container);
border-radius: 20px;
padding: 10px 24px;
height: 40px;
box-shadow: none;
}

.md-button-filled-tonal:hover {
background-color: var(--md-secondary-container);
box-shadow: var(--md-elevation-1);
transform: translateY(-1px);
}

/* Outlined Button */
.md-button-outlined {
background-color: transparent;
color: var(--md-primary);
border: 1px solid var(--md-outline);
border-radius: 20px;
padding: 10px 24px;
height: 40px;
}

.md-button-outlined:hover {
background-color: rgba(103, 80, 164, 0.08);
box-shadow: none;
}

/* Text Button */
.md-button-text {
background-color: transparent;
color: var(--md-primary);
border-radius: 20px;
padding: 10px 12px;
height: 40px;
box-shadow: none;
}

.md-button-text:hover {
background-color: rgba(103, 80, 164, 0.08);
}

/* Elevated Button */
.md-button-elevated {
background-color: var(--md-surface-container);
color: var(--md-primary);
border-radius: 20px;
padding: 10px 24px;
height: 40px;
box-shadow: var(--md-elevation-1);
}

.md-button-elevated:hover {
box-shadow: var(--md-elevation-2);
transform: translateY(-1px);
}

/* Button Size Variants */
.md-button-small {
height: 32px;
padding: 6px 16px;
font-size: var(--md-label-medium-font);
}

.md-button-large {
height: 48px;
padding: 14px 32px;
}

/* Button Color Variants */
.md-button-error {
background-color: var(--md-error);
color: var(--md-on-error);
}

.md-button-error:hover {
box-shadow: var(--md-elevation-2);
transform: translateY(-1px);
}

.md-button-success {
background-color: var(--md-success);
color: var(--md-on-success);
}

.md-button-success:hover {
box-shadow: var(--md-elevation-2);
transform: translateY(-1px);
}

.md-button-tertiary {
background-color: var(--md-tertiary);
color: var(--md-on-tertiary);
}

.md-button-tertiary:hover {
box-shadow: var(--md-elevation-2);
transform: translateY(-1px);
}

.md-button-warning {
background-color: var(--md-warning);
color: var(--md-on-warning);
}

.md-button-warning:hover {
box-shadow: var(--md-elevation-2);
transform: translateY(-1px);
}

/* Icon Button */
.md-icon-button {
width: 40px;
height: 40px;
padding: 8px;
border-radius: 50%;
background: transparent;
color: var(--md-on-surface-variant);
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.md-icon-button:hover {
background-color: rgba(73, 69, 78, 0.08);
}

.md-icon-button-small {
width: 32px;
height: 32px;
padding: 4px;
}

.md-icon-button-large {
width: 48px;
height: 48px;
padding: 12px;
}

/* FAB (Floating Action Button) */
.md-fab {
width: 56px;
height: 56px;
border-radius: 16px;
background-color: var(--md-primary);
color: var(--md-on-primary);
box-shadow: var(--md-elevation-3);
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.md-fab:hover {
box-shadow: var(--md-elevation-4);
transform: scale(1.05);
}

.word-item {
display: inline;
padding: 2px 4px;
border-radius: 3px;
}

.word-item.correct {
color: #52c41a;
font-weight: 600;
}

.word-item.wrong {
color: #f5222d;
font-weight: 600;
}

/* ===== Material Design 3 Typography Utility Classes ===== */

/* Display Styles */
.md-display-large {
font-size: 57px;
line-height: 64px;
font-weight: 400;
letter-spacing: -0.25px;
}

.md-display-medium {
font-size: 45px;
line-height: 52px;
font-weight: 400;
letter-spacing: 0px;
}

.md-display-small {
font-size: 36px;
line-height: 44px;
font-weight: 400;
letter-spacing: 0px;
}

/* Headline Styles */
.md-headline-large {
font-size: 32px;
line-height: 40px;
font-weight: 400;
letter-spacing: 0px;
}

.md-headline-medium {
font-size: 28px;
line-height: 36px;
font-weight: 400;
letter-spacing: 0px;
}

.md-headline-small {
font-size: 24px;
line-height: 32px;
font-weight: 400;
letter-spacing: 0px;
}

/* Title Styles */
.md-title-large {
font-size: 22px;
line-height: 28px;
font-weight: 400;
letter-spacing: 0px;
}

.md-title-medium {
font-size: 16px;
line-height: 24px;
font-weight: 500;
letter-spacing: 0.15px;
}

.md-title-small {
font-size: 14px;
line-height: 20px;
font-weight: 500;
letter-spacing: 0.1px;
}

/* Body Styles */
.md-body-large {
font-size: 16px;
line-height: 24px;
font-weight: 400;
letter-spacing: 0.15px;
}

.md-body-medium {
font-size: 14px;
line-height: 20px;
font-weight: 400;
letter-spacing: 0.25px;
}

.md-body-small {
font-size: 12px;
line-height: 16px;
font-weight: 400;
letter-spacing: 0.4px;
}

/* Label Styles */
.md-label-large {
font-size: 14px;
line-height: 20px;
font-weight: 500;
letter-spacing: 0.1px;
}

.md-label-medium {
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.5px;
}

.md-label-small {
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.5px;
}

/* ===== Material Design 3 Component Patterns ===== */

/* List Item */
.md-list-item {
display: flex;
align-items: center;
padding: var(--md-spacing-4) var(--md-spacing-4);
cursor: pointer;
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
color: var(--md-on-surface);
text-decoration: none;
background-color: transparent;
border: none;
width: 100%;
text-align: left;
font-family: inherit;
font-size: var(--md-body-large-font);
}

.md-list-item:hover {
background-color: rgba(103, 80, 164, 0.08);
}

.md-list-item:active {
background-color: rgba(103, 80, 164, 0.12);
}

.md-list-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: var(--md-spacing-4);
color: var(--md-on-surface-variant);
}

.md-list-item-text {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--md-spacing-1);
}

.md-list-item-headline {
font-size: var(--md-body-large-font);
color: var(--md-on-surface);
}

.md-list-item-supporting {
font-size: var(--md-body-small-font);
color: var(--md-on-surface-variant);
}

.md-list-item-trailing {
display: flex;
align-items: center;
justify-content: center;
margin-left: var(--md-spacing-3);
color: var(--md-on-surface-variant);
}

/* Card */
.md-card {
background-color: var(--md-surface);
border-radius: var(--md-corner-md);
padding: var(--md-spacing-4);
box-shadow: var(--md-elevation-1);
transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.md-card:hover {
box-shadow: var(--md-elevation-2);
transform: translateY(-1px);
}

.md-card-elevated {
box-shadow: var(--md-elevation-2);
}

.md-card-filled {
background-color: var(--md-surface-container);
}

.md-card-outlined {
background-color: transparent;
border: 1px solid var(--md-outline);
box-shadow: none;
}

/* Surface Container (for alternate backgrounds) */
.md-surface-container {
background-color: var(--md-surface-container);
border-radius: var(--md-corner-sm);
padding: var(--md-spacing-3);
}

.md-surface-container-low {
background-color: var(--md-surface-container-low);
}

.md-surface-container-high {
background-color: var(--md-surface-container-high);
}

/* Auth Modal Styles */
.auth-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 2500;
}

.auth-modal-overlay.active {
display: flex;
}

.auth-modal-content {
background: white;
border-radius: 8px;
padding: 32px;
width: 90%;
max-width: 400px;
box-shadow: var(--md-elevation-4);
}

.auth-modal-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
position: relative;
}

.auth-modal-header h2 {
margin: 0;
color: var(--primary);
font-size: 24px;
font-weight: 500;
flex: 1;
}

.auth-modal-header .search-close-btn {
margin: -12px;
width: 32px;
height: 32px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--text-secondary);
transition: all 0.2s ease;
}

.auth-modal-header .search-close-btn:hover {
background: var(--surface-dim);
}

.auth-tabs {
display: flex;
gap: 16px;
margin-bottom: 24px;
border-bottom: 2px solid #e0e0e0;
}

.auth-tab {
padding: 12px 0;
cursor: pointer;
color: #757575;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all 0.2s ease;
background: none;
border: none;
font-size: 14px;
font-family: inherit;
}

.auth-tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}

.auth-form {
display: none;
}

.auth-form.active {
display: block;
}

.form-group {
margin-bottom: 16px;
}

.form-group label {
display: block;
margin-bottom: 8px;
color: #212121;
font-size: 14px;
font-weight: 500;
}

.form-group input {
width: 100%;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
transition: border-color 0.2s ease;
box-sizing: border-box;
}

.form-group input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.1);
}

.auth-btn {
width: 100%;
padding: 12px;
background: var(--primary);
color: white;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
margin-top: 16px;
}

.auth-btn:hover {
background: var(--primary-dark);
}

.error-message {
color: #f5222d;
font-size: 12px;
margin-top: 8px;
display: none;
}

.error-message.show {
display: block;
}

.success-message {
color: #52c41a;
font-size: 12px;
margin-top: 8px;
display: none;
}

.success-message.show {
display: block;
}

/* Test Name Modal */
.test-name-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 2600;
}

.test-name-modal.active {
display: flex;
}

.test-name-content {
background: white;
border-radius: 8px;
padding: 32px;
width: 90%;
max-width: 400px;
box-shadow: 0 8px 32px rgba(0,0,0,0.24);
}

.test-name-header {
margin-bottom: 0px;
text-align: center;
}

.test-name-header h2 {
margin: 0 0 12px 0;
color: var(--primary);
font-size: 24px;
font-weight: 600;
}

.test-name-header p {
margin: 0;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
}

#testNameInput {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--outline-variant);
border-radius: 8px;
font-size: 16px;
font-family: 'Noto Sans KR';
box-sizing: border-box;
margin: 20px 0;
transition: border-color 0.2s;
}

#testNameInput:focus {
outline: none;
border-color: var(--primary);
}

.test-name-buttons {
display: flex;
gap: 12px;
}

.test-name-buttons button {
flex: 1;
padding: 12px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: 'Noto Sans KR';
}

#testNameCancel {
background: #f5f5f5;
color: #212121;
}

#testNameCancel:hover {
background: #e0e0e0;
}

#testNameStart {
background: var(--primary);
color: white;
}

#testNameStart:hover {
background: var(--primary-dark);
}

/* MyPage Popup */
.mypage-popup {
position: fixed;
opacity: 0;
pointer-events: none;
z-index: 3000;
transition: opacity 0.2s ease;
}

.mypage-popup.active {
opacity: 1;
pointer-events: auto;
}

.mypage-popup-content {
background: white;
border-radius: 12px;
width: 240px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
max-height: 70vh;
overflow-y: auto;
}

.mypage-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--outline-variant);
}

.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.user-avatar .material-icons {
font-size: 24px;
}

.user-info {
flex: 1;
min-width: 0;
}

.user-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.user-status {
font-size: 12px;
color: var(--text-secondary);
}

.mypage-close-btn {
width: 32px;
height: 32px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
border-radius: 8px;
flex-shrink: 0;
}

.mypage-close-btn:hover {
background: var(--surface-dim);
color: var(--text-primary);
}

.mypage-menu {
display: flex;
flex-direction: column;
gap: 0;
padding: 8px 0;
}

.mypage-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: none;
border: none;
cursor: pointer;
color: var(--text-primary);
font-size: 14px;
transition: all 0.2s;
text-align: left;
}

.mypage-menu-item .material-icons {
font-size: 20px;
color: var(--text-secondary);
flex-shrink: 0;
}

.mypage-menu-item:hover {
background: var(--surface);
}

.mypage-menu-item:active {
background: var(--surface-dim);
}

.mypage-divider {
height: 1px;
background: var(--outline-variant);
margin: 4px 0;
}

.mypage-menu-item.mypage-logout {
color: var(--error);
}

.mypage-menu-item.mypage-logout .material-icons {
color: var(--error);
}

.mypage-menu-item.mypage-logout:hover {
background: rgba(245, 34, 45, 0.08);
}

/* Overlay click to close */
.mypage-popup {
animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* ============ 게시판 스타일 ============ */
.board-post-item {
padding: 16px;
border-bottom: 1px solid var(--outline-variant);
cursor: pointer;
transition: all 0.2s ease;
border-radius: 8px;
margin-bottom: 8px;
}

.board-post-item:hover {
background: var(--surface-dim);
transform: translateX(4px);
}

.board-post-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text-primary);
}

.board-post-meta {
display: flex;
gap: 12px;
font-size: 13px;
color: var(--text-secondary);
flex-wrap: wrap;
}

.board-detail-header {
border-bottom: 2px solid var(--outline-variant);
padding-bottom: 20px;
margin-bottom: 24px;
}

.board-detail-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text-primary);
}

.board-detail-content {
padding: 24px 0;
line-height: 1.7;
white-space: pre-wrap;
color: var(--text-primary);
}

.board-delete-btn {
padding: 6px 12px;
background: var(--error);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: background 0.2s ease;
}

.board-delete-btn:hover {
background: #ef4444;
}

.comment-section {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--outline-variant);
}

.comment-header {
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
color: var(--text-primary);
}

.comment-item {
padding: 12px;
margin-bottom: 12px;
background: var(--surface-dim);
border-radius: 8px;
border-left: 3px solid var(--primary);
}

.comment-user {
font-weight: 600;
color: var(--primary);
margin-bottom: 4px;
font-size: 13px;
}

.comment-content {
font-size: 14px;
color: var(--text-primary);
margin-bottom: 8px;
line-height: 1.5;
}

.comment-meta {
font-size: 12px;
color: var(--text-secondary);
display: flex;
justify-content: space-between;
align-items: center;
}

.comment-delete-btn {
padding: 4px 8px;
background: var(--error);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background 0.2s ease;
}

.comment-delete-btn:hover {
background: #ef4444;
}

.comment-input-area {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--outline-variant);
}

.comment-input-field {
width: 100%;
padding: 12px;
border: 1px solid var(--outline-variant);
border-radius: 8px;
background: var(--surface);
color: var(--text-primary);
font-family: inherit;
font-size: 14px;
resize: vertical;
min-height: 80px;
transition: border-color 0.2s ease;
}

.comment-input-field:focus {
outline: none;
border-color: var(--primary);
}

.comment-submit-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--primary);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.2s ease;
}

.comment-submit-btn:hover {
background: #5f3fa1;
}

/* 게시판 제출 버튼 */
#board-submit-btn {
height: 32px !important;
flex: unset;
}

/* Material Design Accordion Styles */
.test-accordion-item {
border: 1px solid var(--outline-variant);
border-radius: 8px;
margin-bottom: 8px;
overflow: hidden;
background: white;
transition: all 0.2s ease;
}

.test-accordion-item:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
cursor: pointer;
background: white;
border: none;
width: 100%;
transition: all 0.2s ease;
user-select: none;
}

.accordion-header:hover {
background: var(--surface-dim);
}

.accordion-header-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}

.accordion-header-title {
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}

.accordion-expand-icon {
color: var(--text-secondary);
font-size: 24px;
transition: transform 0.3s ease;
flex-shrink: 0;
}

.test-accordion-item.expanded .accordion-expand-icon {
transform: rotate(180deg);
}

.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: var(--surface-dim);
border-top: 1px solid var(--outline-variant);
}

.test-accordion-item.expanded .accordion-body {
max-height: 600px;
}

.accordion-body-content {
padding: 16px;
}

.accordion-body-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary);
}

.accordion-result-item {
padding: 12px 16px;
background: white;
border-radius: 8px;
margin-bottom: 12px;
border-left: 4px solid var(--outline-variant);
transition: all 0.2s ease;
}

.accordion-result-item:last-child {
margin-bottom: 0;
}

.accordion-result-item.perfect {
border-left-color: var(--success);
background: rgba(82, 196, 26, 0.04);
}

.accordion-result-name {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
font-size: 14px;
}

.accordion-result-score {
font-size: 16px;
font-weight: 700;
color: var(--primary);
margin-bottom: 4px;
}

.accordion-result-score.perfect {
color: var(--success);
}

.accordion-result-meta {
font-size: 12px;
color: var(--text-secondary);
display: flex;
gap: 8px;
align-items: center;
}

.perfect-badge {
display: inline-block;
background: var(--success);
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
}

/* 풀팝업 공통 헤더 스타일 */
.modal-header-common {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid var(--outline-variant);
flex-shrink: 0;
height: 60px;
}

.modal-header-common h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}

.modal-header-common .material-icons {
font-size: 24px;
color: var(--primary);
}

.modal-close-btn-common {
background: transparent;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 8px;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}

.modal-close-btn-common:hover {
background: var(--surface-dim);
}

/* Material Design 탭 스타일 */
.step-tab-btn {
position: relative;
}

.step-tab-btn.active {
color: var(--primary) !important;
font-weight: 600;
}

.step-tab-btn.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 3px;
background-color: var(--primary);
border-radius: 3px 3px 0 0;
}

/* 풀팝업 모달 공통 스타일 */
.test-results-fullmodal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
z-index: 11000;
flex-direction: column;
}

/* 공통 모달 버튼 스타일 */
.modal-action-btn {
flex: 1;
min-height: 36px;
padding: 16px 20px;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}

.modal-action-btn:hover:not(.disabled) {
transform: scale(1.02);
}

.modal-action-btn:active:not(.disabled) {
transform: scale(0.98);
}

/* 명예의 전당 버튼 */
.hall-of-fame-btn {
background-color: var(--md-warning);
}

.hall-of-fame-btn:hover {
background-color: var(--md-warning);
opacity: 0.8;
}

/* 최종 수료 버튼 - 수료 상태 */
.final-test-completion-btn {
background-color: var(--md-success);
}

.final-test-completion-btn:hover {
background-color: var(--md-success);
opacity: 0.8;
}

/* 최종 수료 버튼 - 미수료 상태 */
.final-test-completion-btn.disabled {
background-color: #9ca3af;
cursor: not-allowed;
}

.final-test-completion-btn.disabled:hover {
background-color: #9ca3af;
transform: none;
}

/* 명예의 전당 모달 오버레이 */
.hall-of-fame-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
z-index: 11001;
align-items: center;
justify-content: center;
}

.hall-of-fame-modal-overlay.active {
display: flex;
}

/* 명예의 전당 모달 콘텐츠 */
.hall-of-fame-modal-content {
background: white;
border-radius: 12px;
width: 90%;
max-width: 600px;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* 명예의 전당 모달 헤더 */
.hall-of-fame-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid #e5e7eb;
}

.hall-of-fame-modal-header h2 {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #1f2937;
}

/* 명예의 전당 모달 닫기 버튼 */
.hall-of-fame-close-btn {
width: 36px;
height: 36px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
transition: all 0.2s;
border-radius: 8px;
}

.hall-of-fame-close-btn:hover {
background-color: #f3f4f6;
color: #1f2937;
}

/* 명예의 전당 모달 콘텐츠 영역 */
.hall-of-fame-modal-body {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}

/* 학습 단계 선택 모달 버튼 */
.modal-action-btn {
padding: 6px 12px;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
transition: all 0.2s ease;
}

/* Update 버튼 */
.modal-action-btn.update-btn {
background-color: #3b82f6;
}

.modal-action-btn.update-btn:hover {
background-color: #2563eb;
transform: scale(1.05);
}

.modal-action-btn.update-btn:active {
transform: scale(0.95);
}

/* 초기화 버튼 */
.modal-action-btn.reset-btn {
background-color: #ef4444;
}

.modal-action-btn.reset-btn:hover {
background-color: #dc2626;
transform: scale(1.05);
}

.modal-action-btn.reset-btn:active {
transform: scale(0.95);
}

/* 게임 시작 버튼 (아는 단어 제거, 최종 테스트) */
.modal-action-btn.start-game-btn {
padding: 16px 20px;
background-color: #6750a4;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.2s ease;
}

.modal-action-btn.start-game-btn:hover {
background-color: #533e8a;
transform: scale(1.02);
}

.modal-action-btn.start-game-btn:active {
transform: scale(0.98);
}

/* Typing Game */
#typing-game-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(10, 10, 30, 0.75);
z-index: 20000;
}

.typing-game-content {
width: min(1100px, 94vw);
height: min(700px, 90vh);
background: #0f172a;
color: #e2e8f0;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
position: relative;
overflow: hidden;
}

.typing-main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 12px;
flex: 1;
min-height: 0;
}

.typing-canvas-wrapper {
position: relative;
border-radius: 12px;
overflow: hidden;
background: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.18), transparent 40%),
radial-gradient(circle at 80% 10%, rgba(56, 189, 248, 0.2), transparent 35%),
linear-gradient(160deg, #0b1021, #111827);
border: 1px solid rgba(255, 255, 255, 0.05);
z-index: 1;
}

#typing-canvas {
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}

.typing-sidebar {
background: #111827;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 5;
height: 100%;
}

.typing-stat {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
}

.typing-stat .material-icons {
font-size: 18px;
color: #94a3b8;
margin-right: 6px;
}

.typing-slider {
display: flex;
flex-direction: column;
gap: 6px;
}

.typing-slider label {
font-size: 13px;
color: #cbd5e1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}

.typing-slider input[type="range"] {
width: 100%;
accent-color: #6366f1;
cursor: pointer;
}

.typing-controls {
display: flex;
gap: 8px;
}

.typing-btn {
flex: 1;
padding: 10px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
color: #0f172a;
background: #38bdf8;
transition: transform 0.1s ease, background 0.2s ease;
position: relative;
z-index: 5;
}

.typing-btn:hover {
background: #22d3ee;
transform: translateY(-1px);
}

.typing-btn.secondary {
background: #1f2937;
color: #e2e8f0;
}

.typing-input {
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #0b1224;
color: #e2e8f0;
font-size: 15px;
outline: none;
position: relative;
z-index: 5;
}

.typing-bottom {
width: 100%;
}

.typing-input:focus {
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.typing-close-btn {
position: absolute;
top: 10px;
right: 10px;
border: none;
background: rgba(255, 255, 255, 0.06);
color: #e2e8f0;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
z-index: 10;
}

.typing-close-btn:hover {
background: rgba(255, 255, 255, 0.12);
}

.typing-lives {
display: flex;
gap: 4px;
}

.typing-life-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #f87171;
box-shadow: 0 0 12px rgba(248, 113, 113, 0.6);
}

.typing-life-dot.inactive {
opacity: 0.2;
box-shadow: none;
}