.tool-contents {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tool-contents>.input-area,
.tool-contents>.whatis-area,
.tool-contents>.howto-area,
.tool-contents>.faq-area,
.tool-contents>.units-info-area{
  transition: all 0.3s;
  margin: 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.tool-contents>.input-area>.conversion-form {
  padding: 1rem;
}

.tool-contents>.input-area>.result-title{
  border-top: 1px dashed var(--color-border);
  padding: 1rem 1rem 0.5rem 1rem;
}

.tool-contents>.input-area>.conversion-result {
  padding: 0.5rem 1rem 1rem 1rem;
}

.tool-contents .form-data-info {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.tool-contents .form-data-info>.input-value-area,
.tool-contents .form-data-info>.from-unit-area,
.tool-contents .form-data-info>.to-unit-area,
.tool-contents .form-action-btn>.decimal-places-area  {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}


.tool-contents .form-action-btn {
  margin-top: 0.8rem;
}

.tool-contents>.input-area label {
  font-size: 0.9rem;
}

.tool-contents>.input-area input,
.tool-contents>.input-area select,
.tool-contents>.input-area button {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  background-color: var(--color-background-light);
  color: var(--color-text);
  transition: all 0.3s;
}

.tool-contents>.input-area input:focus,
.tool-contents>.input-area select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}

.tool-contents>.input-area button:hover {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}


.tool-contents>.whatis-area>p.title,
.tool-contents>.howto-area>p.title,
.tool-contents>.faq-area>p.title,
.tool-contents>.units-info-area>p.title {
  padding: 1rem;
  font-weight: bold;
}

.tool-contents>.whatis-area>p.title::before,
.tool-contents>.howto-area>p.title::before,
.tool-contents>.faq-area>p.title::before,
.tool-contents>.units-info-area>p.title::before {
  content: "· ";
}


.tool-contents>.whatis-area>p.content,
.tool-contents>.howto-area>p.content {
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  transition: all 0.3s;
}


.tool-contents>.faq-area>ul.content>li,
.tool-contents>.units-info-area>ul.content {
  border-top: 1px solid var(--color-border);
  transition: all 0.3s;
}

.tool-contents>.faq-area>ul.content>li>p {
  padding: 1rem;
}

.tool-contents>.faq-area>ul.content>li>p.title::before {
  content: "Q. ";
}

.tool-contents>.faq-area>ul.content>li>p.title:hover {
  background-color: var(--color-primary);
  color: white;
  cursor: pointer;
}

.tool-contents>.faq-area>ul.content>li>p.content {
  display: none;
  background-color: var(--color-background-light2);
  border-top: 1px dashed var(--color-border);
  transition: all 0.3s;
}

.tool-contents>.faq-area>ul.content>li>p.content::before {
  content: "A. ";
}

.tool-contents>.units-info-area>ul.content>p {
  padding: 1rem;

}

.tool-contents>.units-info-area .unit-info {
  border-top: 1px dashed var(--color-border);
}

.tool-contents>.units-info-area .unit-info>p.title {
  padding: 1rem 1rem 0.3rem 1.5rem;
}
.tool-contents>.units-info-area .unit-info>p.content {
  padding: 0.3rem 1rem 1rem 1.5rem;
}

.units-info>div>.unit-info>.name,
.units-info>div>.unit-info>.content,
.converter-faq-area>.qna-area>p {
  padding: 1rem;
}

.units-info>div>.unit-info>.content,
.converter-faq-area>.qna-area>p.answer {
  border-top: 1px dashed var(--color-border);
  transition: all 0.3s;  
}


@media (min-width: 767px) {
  .tool-contents .form-data-info {
    flex-direction: row;
    justify-content: space-between;
  }
  .tool-contents .form-data-info>div {
    width: 30%;
  }
}