nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

nav a {
    text-decoration: none;
    color: #3498db;
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

nav a:hover {
    background-color: #f0f0f0;
}

nav a.active {
    font-weight: bold;
    color: #2c3e50;
}

.file-upload-input {
    display: none;
}

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

.editor-header h2 {
    margin: 0;
}

.editor-header .file-upload-label {
    padding: 5px 10px;
    font-size: 0.9em;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
}

.editor-header .file-upload-label:hover {
    background-color: #e0e0e0;
}

/* CodeMirror 스타일 */
.CodeMirror {
    border: 1px solid #ddd;
    height: 500px;
    font-family: 'Fira Code', monospace;
    font-size: 0.95em;
    overflow: hidden; /* 이 부분을 추가하여 스크롤바가 에디터 내부에 생기도록 함 */
}

.line-removed {
    background-color: #ffeef0; /* 옅은 빨간색 */
}

.line-added {
    background-color: #e6ffed; /* 옅은 녹색 */
}

.char-removed {
    background-color: #ffcccc; /* 문자 강조용 더 진한 빨간색 */
    font-weight: bold;
}

.char-added {
    background-color: #ccffcc; /* 문자 강조용 더 진한 녹색 */
    font-weight: bold;
}

/* Gutter와 마커 스타일 */
.diff-gutter {
    width: 20px;
    background-color: #f7f7f7;
    border-right: 1px solid #ddd;
}

.diff-marker {
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-size: 1em;
    color: #fff;
    padding: 0; /* 상하 패딩 추가 */
    line-height: 1;
    border-radius: 5px; /* 다른 버튼과 통일 */
}

.diff-added {
    background-color: #28a745; /* 녹색 */
}

.diff-removed {
    background-color: #dc3545; /* 빨간색 */
}

.diff-marker:hover {
    opacity: 0.8;
}

.diff-delete {
    background-color: #6c757d; /* 회색 */
    margin-left: 2px; /* 화살표와의 간격 */
}

/* 드래그 앤 드롭 스타일 */
.CodeMirror.drag-over {
    border: 2px dashed #3498db !important; /* 파란색 점선 테두리 */
    background-color: #f0f8ff; /* 옅은 파란색 배경 */
}