:root {
    --bg-color: #f4f4f9;
    --container-bg-color: #fff;
    --editor-border-color: #ccc;
    --text-color: #000;
    --textarea-bg-color: #fff;
    --textarea-border-color: #ccc;
    --footer-bg-color: #f9f9f9;
    --codemirror-bg: #fff;
    --footer-border-color: #eee;
    --footer-text-color: #333;
}

.dark-mode {
    --bg-color: #121212;
    --container-bg-color: #1e1e1e;
    --editor-border-color: #444;
    --text-color: #e0e0e0;
    --textarea-bg-color: #252525;
    --textarea-border-color: #444;
    --footer-bg-color: #1e1e1e;
    --codemirror-bg: #1e1e1e; /* CodeMirror 배경색을 다크모드에 맞게 설정 */
    --footer-border-color: #333;
    --footer-text-color: #e0e0e0;
}
/* 아랍어(RTL) 지원 */
.rtl {
    direction: rtl;
}



body {
    font-family: Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    width: 100%;
    min-width: 600px;
    margin: 0 auto;
    background: var(--container-bg-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
}

.main-content-wrapper {
    display: flex;
    gap: 15px;
    margin: 20px 0 15px;
    height: 40vh; /* 에디터와 트리뷰의 전체 높이 */
}

.editor-container {
    border: 1px solid var(--editor-border-color);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    flex: 1; /* 남은 공간을 모두 차지 */
}

.tree-container {
    border: 1px solid var(--editor-border-color);
    border-radius: 4px;
    overflow: auto; /* 내용이 많으면 스크롤 */
    flex: 1; /* 남은 공간을 모두 차지 */
    padding: 10px;
    display: none; /* 기본적으로 숨김 */
}

/* CodeMirror 스타일 */
.CodeMirror {
    height: 100%;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    background-color: var(--codemirror-bg);
    color: var(--text-color);
}

.error-message {
    color: #dc3545; /* 빨간색 텍스트 */
    background-color: #f8d7da; /* 연한 빨간색 배경 */
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: none; /* 기본적으로 숨김 */
    white-space: pre-wrap; /* 줄바꿈 및 공백 유지 */
}

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

.controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#languageSelector {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--textarea-border-color);
}

.logo-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-title img {
    width: 50px;
    height: auto;
}

.button-group {
    display: flex;
    gap: 10px; /* 버튼 사이의 간격 */
}

button {
    padding: 10px 15px;
    color: white;
    border: none;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease-in-out;
}

/* 개별 버튼 색상 */
#formatBtn {
    background-color: #007bff; /* 파란색 */
}

#treeViewBtn {
    background-color: #563d7c; /* 진한 보라색 */
}

#clearBtn {
    background-color: #dc3545; /* 빨간색 */
}

#copyBtn {
    background-color: #28a745; /* 녹색 */
}

#uploadBtn {
    background-color: #6c757d; /* 회색 */
}

#fetchUrlBtn {
    background-color: #17a2b8; /* 청록색 */
}

#darkModeToggle {
    background-color: #6f42c1; /* 보라색 */
}

#validateBtn {
    background-color: #ffc107; /* 노란색 */
    color: #212529; /* 가독성을 위한 어두운 글자색 */
}

#pasteBtn {
    background-color: #fd7e14; /* 주황색 */
}


/* 호버 효과 */
#formatBtn:hover {
    background-color: #0056b3; 
}
#treeViewBtn:hover {
    background-color: #453164;
}

#clearBtn:hover {
    background-color: #c82333;
}
#uploadBtn:hover {
    background-color: #5a6268;
}
#fetchUrlBtn:hover {
    background-color: #138496;
}
#darkModeToggle:hover {
    background-color: #5a32a3;
}

#validateBtn:hover {
    background-color: #e0a800;
}

#pasteBtn:hover {
    background-color: #e86a00;
}


.ad-placeholder {
    max-width: 1128px;
    min-height: 90px;
    margin: 30px auto;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-size: 16px;
    padding: 10px;
    box-sizing: border-box;
}

.site-footer {
    max-width: 1280px;
    margin: 40px auto 20px;
    padding: 20px;
    background-color: var(--footer-bg-color);
    border-top: 2px solid var(--footer-border-color);
    border-radius: 8px;
    text-align: center;
}

.site-footer h2 {
    color: var(--footer-text-color);
    margin-bottom: 10px;
}

#copyBtn:hover {
    background-color: #218838;
}

.features-manual {
    margin-top: 30px;
    text-align: left;
    border-top: 1px solid var(--footer-border-color);
    padding-top: 20px;
}

.features-manual h3 {
    text-align: center;
    margin-bottom: 15px;
    color: var(--footer-text-color);
}

.features-manual ul {
    list-style-type: none;
    padding-left: 0;
}

.features-manual li {
    margin-bottom: 10px;
}