/* frontend/style.css */
body {
    font-family: sans-serif;
    background-color: #1e1e1e;
    color: #d4d4d4;
    margin: 0;
    padding: 20px;
}
.container {
    max-width: 900px;
    margin: 0 auto;
}
h1, h2 {
    color: #569cd6;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}
.CodeMirror { /* CodeMirror 에디터 스타일 */
    border: 1px solid #333;
    height: 400px;
    font-size: 16px;
}
#run-button {
    background-color: #0e639c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 15px;
}
#run-button:hover {
    background-color: #1177bb;
}
#output-container {
    background-color: #252526;
    border: 1px solid #333;
    padding: 15px;
    min-height: 100px;
    white-space: pre-wrap; /* 자동 줄바꿈 */
    word-wrap: break-word;
    font-family: monospace;
    font-size: 15px;
}
.error {
    color: #f44747;
}

.input-container {
    /* 실행 버튼과의 간격을 위해 아래쪽에 여백을 줍니다. */
    margin-bottom: 15px;
}

#input-box {
    width: 100%;
    min-height: 100px;
    padding: 15px;
    
    /* 패딩과 테두리가 너비에 포함되도록 설정하여 레이아웃이 깨지지 않게 합니다. */
    box-sizing: border-box; 
    
    /* 출력창과 동일한 배경색, 테두리, 글자색을 사용합니다. */
    background-color: #252526;
    border: 1px solid #333;
    color: #d4d4d4;
    
    /* 코드 및 출력창과 동일한 글꼴과 크기를 사용합니다. */
    font-family: monospace;
    font-size: 15px;
    
    /* 사용자가 세로로만 크기를 조절할 수 있게 합니다. */
    resize: vertical;
}

/* 입력창의 placeholder 텍스트 스타일 */
#input-box::placeholder {
    color: #888;
}