/* ============================================================
   basic-style token 已由 base.html 載入的 basic-style.css 提供
   此檔只包含本頁專屬樣式，請勿在此重複定義全站共用規則
   ============================================================ */
.set-h5 {
  padding-top: 1rem;
}

.set-table-word-center {
  vertical-align: middle;
  font-size: 1.125rem;
}

.set-principle {
  margin: 2rem 0rem;
}

.set-principle .set-flex-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 圖標底座：淺藍圓形，hover 時填滿品牌藍、圖標轉白 */
.set-principle .set-flex-icon .set-img-size {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #e6f0fa;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.set-principle .set-flex-icon .set-img-size img {
  width: 55%;
  height: 55%;
  object-fit: contain;
  padding: 0;
  filter: invert(43%) sepia(63%) saturate(7178%) hue-rotate(207deg) brightness(23%) contrast(91%);
  transition: filter 0.3s;
}

.set-principle .set-flex-icon h6 {
  color: var(--color-primary);
  text-align: center;
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent-dark), var(--color-accent-dark));
  background-position: left bottom;
  background-size: 0 2.5px;
  background-repeat: no-repeat;
  transition: background-size 0.35s, color 0.3s;
}

.set-principle .set-flex-icon:hover .set-img-size {
  background-color: var(--color-accent-dark);
  transform: translateY(-0.5rem);
  box-shadow: 0 8px 18px rgba(13, 111, 187, 0.28);
}

.set-principle .set-flex-icon:hover img {
  filter: brightness(0) invert(1);
}

.set-principle .set-flex-icon:hover h6 {
  color: var(--color-accent-dark);
  background-size: 100% 0.5rem;
}

.set-guideline {
  max-width: 100%;
  margin: 0 auto;
}

.set-guideline img {
  padding-top: 1rem;
}

.mobile-touch {
  display: none;
  font-weight: 600;
  color: var(--color-accent, #1d8fe0);
  font-size: 1.125rem;
}

.set-table-big {
  width: 70%;
}

.set-text-center p {
  margin: 0.5rem 0;
}

@media (max-width: 1200px) {
  .set-guideline {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .container .columns {
    display: flex;
    flex-wrap: wrap;
  }

  .container .columns .set-principle {
    margin: 1rem 2rem;
  }

  .container .columns .set-principle .set-flex-icon .set-img-size {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 600px) {
  .container .columns .column {
    flex-basis: auto;
    padding: 0.5rem;
  }

  .container .columns .column .set-h5 {
    padding-top: 1rem;
  }

  .container .columns .column p {
    margin: 0.5rem 0rem;
  }

  .container .columns .set-principle {
    margin: 1rem 0rem;
  }

  .container .columns .set-principle .set-flex-icon .set-img-size {
    width: 90px;
    height: 90px;
  }

  .container .columns .set-principle .set-flex-icon h6 {
    font-size: 1rem;
  }

  .table-wrapper {
    overflow-x: auto;
  }

  .set-guideline img {
    min-width: 1024px;
  }

  .set-table-size {
    width: 1024px;
  }

  .mobile-touch {
    display: block;
  }
}