body {
  margin: 24px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  --accent-color: #076EFF;
  color: #202124;
}

/* Basic styles for top navigation - assuming Bootstrap classes are used for structure */
/* You might need to adjust or add more specific styles depending on your Bootstrap usage */
header {
  /* Example: if using fixed top navbar */
  /* position: fixed; */
  /* top: 0; */
  /* width: 100%; */
  /* z-index: 1030; */ /* Bootstrap's default navbar z-index */
  display: block;
}

#mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px; /* Adjust width as needed */
  height: 100%;
  background-color: #f8f9fa; /* Light background */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Shadow on the right */
  transform: translateX(-100%); /* Initially off-screen to the left */
  transition: transform 0.3s ease-in-out; /* Smooth slide animation */
  z-index: 1040; /* Above the header */
  overflow-y: auto; /* Enable scrolling if menu content is long */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack content vertically */
}

/* Class added by JavaScript to show the menu */
body.nav-open #mobile-nav {
  transform: translateX(0); /* Slide into view */
}

body.nav-open #mobile-nav {
  transform: translateX(0);
}

#mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1; /* Allow list to take up available space */
}

#mobile-nav ul li a .material-icons {
  margin-right: 10px; /* Space between icon and text */
  font-size: 20px; /* Adjust icon size */
  color: #555; /* Icon color */
}

/* Style for the close button container */
#mobile-nav .flex.justify-end {
    padding: 10px 20px; /* Padding around close button */
    flex-shrink: 0; /* Prevent container from shrinking */
    text-align: right; /* Align close button to the right */
}

/* Style for the close button */
#nav-close {
  font-size: 20px; /* Adjust close button icon size if it's an icon */
  padding: 5px; /* Add some padding */
  /* If it's a Bootstrap btn-close, additional styling might be needed for color/size */
}

/* Optional: Dark overlay when menu is open */
body.nav-open::before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 1035; /* Between header and mobile nav */
}

* {
  outline-color: var(--accent-color);
}

main {
  background-color: #fff;
  padding: 20px; /* Add some padding to the main content */
  margin-top: 20px; /* Add some top margin */
}

h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  font-size: 24px;
  padding-bottom: 15px;
}

form {
  margin: 0;
}

label {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
 font-size: 16px;
}

select,
input,
button {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: unset;
  font-size: 16px;
}

button {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  color: white;
  font-weight: bold;
  cursor: pointer;
  opacity: 1;
}

button:focus-visible {
  outline: 2px solid white;
  outline-offset: -4px;
}

button:hover {
  opacity: 0.95;
}

#download-button {
  margin-top: 20px;
  padding: 10px 20px; /* 예시 패딩 값, 필요에 따라 조정 가능 */
  transition: background-color 0.3s ease; /* 배경색 트랜지션 효과 */
}

#download-button:hover {
  background-color: #055bb5; /* 마우스 오버 시 배경색 (예시) */
}

.output {
  margin-top: 20px;
  border: 1px solid #ddd; /* Add a light grey border */
  border-radius: 8px; /* Rounded corners */
  padding: 20px; /* Add internal padding */
  background-color: #f9f9f9; /* Slightly different background */
  white-space: pre-wrap; /* Preserve whitespace and wrap text */
  word-wrap: break-word; /* Break long words */
}