.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1em;
    
}

.main_body .container select {
    color: #1f1f1f; /* 글씨 색상 */
    background-color: #eeeeee; /* 배경색 */
    border: 1px solid #888888; /* 테두리 색상 */
}

.main_body .container select:hover {
    background-color: #dddddd; /* 마우스 오버 시 배경색 */
    border-color: #888888; /* 마우스 오버 시 테두리 색 */
}

.main_body .container select:focus {
    outline: none;
    border-color: #666666; /* 포커스 시 테두리 색 */
}

body.dark .main_body .container select {
    color: #f1f1f1; /* 글씨 색상 */
    background-color: #333333; /* 배경색 */
    border: 1px solid #666666; /* 테두리 색상 */
}

body.dark .main_body .container select:hover {
    background-color: #444444; /* 마우스 오버 시 배경색 */
    border-color: #888888; /* 마우스 오버 시 테두리 색 */
}

body.dark .main_body .container select:focus {
    outline: none;
    border-color: #aaaaaa; /* 포커스 시 테두리 색 */
}

.character-dropdown {
    width: 200px;
}

.character-dropdown select {
    width: 200px; /* 드롭다운 너비 조절 */
    height: 40px; /* 드롭다운 높이 조절 */
    padding: 5px;
    font-size: 16px; /* 글씨 크기 조절 */
    border-radius: 5px; /* 테두리 둥글게 */
    appearance: none; /* 기본 화살표 아이콘 제거 */
}

.engrave-section {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    gap: 1em; /* 열 간의 여백 */
}

.stat_table {
    margin: 0 1em; /* 스탯 테이블 양쪽 여백 */
}

.engrave-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    padding: 10px;
    box-sizing: border-box;
    width: 45%; /* 각 열의 너비 */
    margin : 1em;
}

body.dark .engrave-column {
    border: 2px solid white;
}

.engrave-set-left, .engrave-set-right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5em 0;
}

.engrave-dropdown-left, .engrave-dropdown-right {
    width: 60%; /* 드롭다운 너비 */
    max-width: 100px;
    height: 30px; /* 드롭다운 높이 */
    padding: 5px;
    font-size: 14px; /* 글씨 크기 */
    border-radius: 5px; /* 테두리 둥글게 */
    appearance: none; /* 기본 화살표 아이콘 제거 */
}

.engrave-dropdown option {
    background-color: #333333; /* 옵션 배경색 */
    color: #ffffff; /* 옵션 글씨 색상 */
}

input[type="text"] {
    padding: 5px;
    margin: 0 5px;
    width: 40%; /* 인풋 필드의 너비 조절 */
    max-width: 100px;
}

@media (max-width: 768px) {
    .engrave-section {
        gap: 0.25em;
    }

    .engrave-column {
        padding: 5px;
        margin: 0.5em;
        box-sizing: border-box;
        width: 47.5%; /* 각 열의 너비 */
    }
}

@media (max-width: 480px) {
    .engrave-section {
        gap: 0;
    }

    .engrave-column {
        padding: 5px;
        box-sizing: border-box;
        width: 50%; /* 각 열의 너비 */
    }

    .engrave-set-left, .engrave-set-right {
        flex-direction: column;
        margin: 10px 0;
    }

    .engrave-dropdown-left, .engrave-dropdown-right {
        width: 100%; /* 드롭다운 너비 */
        max-width: 120px;
        height: 30px; /* 드롭다운 높이 */
        padding: 5px;
        font-size: 14px; /* 글씨 크기 */
        border-radius: 5px; /* 테두리 둥글게 */
        appearance: none; /* 기본 화살표 아이콘 제거 */
    }

    input[type="text"] {
        padding: 5px;
        margin: 0 5px;
        width: 100%; /* 인풋 필드의 너비 조절 */
        max-width: 120px;
    }
}