body, html {
  height: 100%;
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  background-color: #f5f5f5;
}

.svg-preview {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  background: #fff;
}

.info {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
    text-align: center;
}

.container {
  width: 50%;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative; /* Added for absolute positioning of children */
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
}

.note {
  font-size: 12px;
  color: #888;
  margin-bottom: 20px;
}

.input-group, .color-picker {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.input-field {
  flex: 1;
  margin-right: 20px;
}

.input-field:last-child {
  margin-right: 0;
}

input[type="text"],
input[type="color"],
input[type="range"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Ensures padding is included in total width/height */
}

input[type="color"] {
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

.buttons {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.buttons button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  color: white;
  margin-bottom: 10px;
  cursor: pointer;
}

.svg { background-color: #3498db; }
.png { background-color: #2ecc71; }
.jpg { background-color: #9b59b6; }

.buttons button:hover {
  opacity: 0.9;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="range"] {
  -webkit-appearance: none;
  margin: 10px 0;
}

input[type="range"]:focus {
  outline: none;
}

/* Adjusted the styling for the slider track */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #666;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

/* Adjusted the styling for the slider thumb */
input[type="range"]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
  position: relative;
}

/* Adjusted the styling for Firefox */
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #3071A9;
  border-radius: 1.3px;
}

input[type="range"]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
}

/* Adjusted the styling for IE */
input[type="range"]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}

input[type="range"]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
}

/* Style for the label to display the range value */
.range-value {
  position: absolute;
  right: 0;
  top: -30px; /* Adjust as necessary */
  text-align: center;
  font-size: 12px;
  color: #666;
  padding: 2px 5px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
}


.slider-container label {
  white-space: nowrap; /* Prevents wrapping and keeps the label and span on the same line */
}

#rangeValue {
  /* You may want to add some padding or margin if needed, for example: */
  padding-left: 8px; /* Or use margin-left if you prefer */
}


#xmlInput {
  width: 100%; /* This will make it as wide as its parent container */
  max-width: 1000px; /* Adjust the max-width to align with other elements */
  resize: vertical; /* Allows only vertical resizing */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}


/* Mobile-specific styles */
@media (max-width: 768px) {
  .container {
    width: 90%; /* or 100% if you want the container to take full width */
    margin: 0 auto;
    box-shadow: none;
  }

  .input-group, .color-picker {
    flex-direction: column;
  }

  .input-field {
    margin-right: 0;
    margin-bottom: 10px; /* add space between stacked elements */
  }

  textarea#xmlInput {
    width: 100%;
    max-width: 100%; /* ensures the textarea does not exceed the width of its container */
    margin-bottom: 10px; /* adjust as needed */
  }

  .buttons button {
    width: 100%; /* full width buttons on mobile */
  }

  /* Adjust inputs and range slider sizes as well if necessary */
  input[type="text"],
  input[type="color"],
  input[type="range"] {
    width: 100%; /* make sure they don't exceed their container's width */
  }
}