:where([class^="ri-"])::before { content: "\f3c2"; }

body {
font-family: 'Noto Sans KR', sans-serif;
}

#hero-content {
transition: all 1s ease-out;
}
#hero-content.show {
opacity: 1;
transform: translateY(0);
}


#layout-title,
#input-table,
#process-arrow,
#output-table {
transition: all 1s ease-out;
}
#layout-title.show,
#input-table.show,
#process-arrow.show,
#output-table.show {
opacity: 1;
transform: translateY(0);
}

#service-title,
#feature-1,
#feature-2,
#feature-3 {
transition: all 1s ease-out;
}
#service-title.show,
#feature-1.show,
#feature-2.show,
#feature-3.show {
opacity: 1;
transform: translateY(0);
}

#process-section {
transition: all 1s ease-out;
}
#process-section.show {
opacity: 1;
transform: translateY(0);
}


#specs-title,
#specs-1,
#specs-2 {
transition: all 1s ease-out;
}
#specs-title.show,
#specs-1.show,
#specs-2.show {
opacity: 1;
transform: translateY(0);
}

#layout-title,
#input-table,
#process-arrow,
#output-table {
transition: all 1s ease-out;
}
#layout-title.show,
#input-table.show,
#process-arrow.show,
#output-table.show {
opacity: 1;
transform: translateY(0);
}


#layout-title,
#input-table,
#process-arrow,
#output-table {
transition: all 1s ease-out;
}
#layout-title.show,
#input-table.show,
#process-arrow.show,
#output-table.show {
opacity: 1;
transform: translateY(0);
}


#report-title,
#report-content {
transition: all 1s ease-out;
}
#report-title.show,
#report-content.show {
opacity: 1;
transform: translateY(0);
}


#layout-title,
#input-table,
#process-arrow,
#output-table {
transition: all 1s ease-out;
}
#layout-title.show,
#input-table.show,
#process-arrow.show,
#output-table.show {
opacity: 1;
transform: translateY(0);
}


#layout-title,
#input-table,
#process-arrow,
#output-table {
transition: all 1s ease-out;
}
#layout-title.show,
#input-table.show,
#process-arrow.show,
#output-table.show {
opacity: 1;
transform: translateY(0);
}



  @media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }

    /* Çì´õ¸¸ Ä«µå·Î º¯È¯ */
    thead tr {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      background: none;
      color: #333;
      border-bottom: none;
      padding: 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
      margin-bottom: 1rem;
    }
    thead th {
      flex: 1 1 30%;
      background-color: #3b82f6;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      text-align: center;
      font-weight: 600;
    }

    /* tbody ¹× tr ¼û±â±â */
    tbody, tbody tr, tbody td {
      display: none;
    }
  }