/* 파일명 오버레이 스타일 */
.file-overlay {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
    transition: opacity 0.3s ease !important;
    min-width: 200px !important;
    max-width: 80vw !important;
    width: auto !important;
    word-break: break-all !important;
    border: 2px solid #4CAF50 !important;
    text-align: center !important;
    white-space: normal !important;
}

.file-overlay:hover {
    opacity: 1;
}

.file-overlay .file-path {
    color: #ffffff;
    font-weight: bold;
    white-space: normal !important;
    word-break: break-all !important;
    line-height: 1.2 !important;
}

.file-overlay .section-name {
    color: #ffffff;
    margin-top: 2px;
    opacity: 0.9;
    white-space: normal !important;
    word-break: break-word !important;
}

/* 개발 모드에서만 표시 */
body.dev-mode .file-overlay {
    display: block !important;
}

body:not(.dev-mode) .file-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 개발 모드 토글 버튼 */
.dev-toggle {
    position: fixed !important;
    bottom: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #e74c3c !important;
    color: white !important;
    border: none !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.dev-toggle:hover {
    background: #c0392b;
}

/* 섹션별 파일명 데이터 - JavaScript로 동적 업데이트됨 */