html {
    box-sizing: border-box;
    /* 기본 폰트 크기를 설정하여 rem 단위의 기준을 만듭니다. */
    font-size: 16px;
}

*, *::before, *::after {
    /* 모든 요소가 border-box 모델을 상속받도록 설정하여 레이아웃 안정성을 높입니다. */
    box-sizing: inherit;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column; /* footer를 아래에 배치하기 위해 변경 */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f8f9fa; /* 더 부드러운 배경색 */
    color: #343a40; /* 가독성 좋은 어두운 회색 */
}

.converter-container {
    background-color: #ffffff;
    padding: 1.5rem; /* 모바일 화면에 맞게 내부 여백을 줄입니다. */
    border-radius: 16px; /* 더 둥근 모서리 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 10px 30px rgba(0,0,0,0.08); /* 은은한 그림자 효과 */
    width: 100%;
    max-width: 450px;
    text-align: center;
    margin: 1rem; /* 화면 가장자리에 여백 추가 */
}

h1 {
    color: #1a2b4d;
    margin-bottom: 1.5rem;
}

.input-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
}

input[type="number"],
input[type="text"],
select {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #dee2e6; /* 더 연한 테두리 */
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #f8f9fa; /* 입력창 배경색 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus {
    outline: none;
    border-color: #7950f2; /* 세련된 보라색 계열 */
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(121, 80, 242, 0.2);
}

.japanese-input-container {
    display: flex;
    gap: 0.5rem;
}

#japanese-era {
    flex: 3; /* Era dropdown takes more space */
}

#japanese-era-year {
    flex: 2; /* Year input takes less space */
}

#error-message {
    color: #d93025;
    margin-top: 1rem;
    min-height: 1.2em;
    font-weight: 500;
}

footer {
    /* position: fixed 대신 일반적인 흐름에 배치하여 스크롤에 따라 움직이도록 함 */
    padding: 2rem;
    text-align: center;
    color: #adb5bd; /* 더 연한 회색으로 중요도 낮춤 */
    font-size: 0.9rem;
}

/* 데스크톱 화면을 위한 미디어 쿼리 */
@media (min-width: 768px) {
    html {
        /* 데스크톱에서 기본 폰트 크기를 키워 전체적인 UI를 확대 */
        font-size: 18px;
    }
    .converter-container {
        /* 데스크톱에서 변환기 최대 너비를 늘림 */
        max-width: 650px;
        /* 데스크톱에서는 기존의 넓은 여백을 다시 적용합니다. */
        padding: 2.5rem;
    }
}