.subtitle {
    text-align: left; color: #7f8c8d; margin-top: 0.5rem; 
    margin-bottom: 30px; max-width: 900px; margin-left: auto; margin-right: auto;
}
.converter-form {
    margin: 20px 0; padding: 25px 30px; background: #fff;
    border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.converter-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 15px;
}
.converter-grid .form-group {
    flex: 1;
    min-width: 120px;
}
.form-group label {
    display: block; font-size: 0.9em; margin-bottom: 5px; color: #555; font-weight: 500;
}
.form-group select {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;
}
.swap-icon {
    flex-shrink: 0;
    padding-bottom: 12px;
    font-size: 1.5em; color: #3498db; cursor: pointer; transition: transform 0.2s;
}
.swap-icon:hover { transform: scale(1.1); }
.date-input-group { display: flex; align-items: center; gap: 10px; }
.date-input-group input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.date-input-group button { flex-shrink: 0; background-color: #3498db; color: white; border: none; padding: 12px 20px; border-radius: 4px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.3s; }
.date-input-group button:hover { background-color: #2980b9; }
.conversion-result { margin-top: 30px; padding: 25px; background: #fdfdfd; border: 1px solid #e0e0e0; border-radius: 5px; text-align: center; }
.result-main { font-size: 2.5em; font-weight: 600; color: #2c3e50; margin-bottom: 5px; }

.result-calendar-name {
    display: inline-block;   
    padding-bottom: 3px;     
    border-bottom: 2px solid #000; 
    color: black;
}
.result-original-date { margin-top: 20px; font-size: 0.9em; color: #95a5a6; }
.highlight { background-color: #f1c40f; color: #333; padding: 2px 6px; border-radius: 4px; }
.error { color: #e74c3c; padding: 12px; background: #fadbd8; border: 1px solid #f5b7b1; border-radius: 4px; margin-bottom: 15px; text-align: center; }
.comparison-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.comparison-table th, .comparison-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.comparison-table thead th { background-color: #f2f2f2; }
@media (max-width: 600px) { .result-main { font-size: 2em; } }