@layer theme-custom {
/* 全站字型統一：Noto Sans TC */
body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body button,
body input,
body textarea,
body select,
body label,
body strong,
body small,
body li,
body dt,
body dd,
body blockquote,
body table,
body nav.navbar,
body footer,
body .wb-home,
body .wb-home .wb-intro-title,
body .wb-home .wb-thesis strong,
body .wb-home .wb-proof-title,
body .wb-home-end {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif !important;
}

body h1,
body .wb-home h1,
body .wb-home .wb-thesis strong,
body .wb-home-end h2 {
  font-weight: 700 !important;
}

body h2,
body h3,
body .wb-home .wb-intro-title,
body .wb-home .wb-proof-title {
  font-weight: 700 !important;
}

body h4,
body h5,
body h6,
body nav.navbar a,
body .wb-home .wb-btn,
body .wb-home .wb-arrow {
  font-weight: 600 !important;
}

body p,
body li,
body dd,
body blockquote,
body input,
body textarea,
body select {
  font-weight: 400 !important;
}

/* 首頁產業觀察：三欄文章圖卡 */
#index-blog {
  padding: clamp(64px, 8vw, 104px) 0 !important;
  background: #f8f4ee !important;
}

#index-blog > .container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
  align-items: stretch !important;
}

#index-blog .page-title,
#index-blog .text-center {
  grid-column: 1 / -1 !important;
}

#index-blog .page-title {
  margin: 0 0 18px !important;
  text-align: center !important;
}

#index-blog .page-title .title {
  margin: 0 !important;
  color: #584833 !important;
}

#index-blog .blog-row {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #fffdf9 !important;
  border: 1px solid #e3d8c8 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 26px rgba(88, 72, 51, 0.07) !important;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

#index-blog .blog-row:hover {
  transform: translateY(-6px) !important;
  border-color: #c9ae7b !important;
  box-shadow: 0 16px 38px rgba(88, 72, 51, 0.13) !important;
}

#index-blog .blog-row .img-box {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  background: #eee7dc !important;
}

#index-blog .blog-row .img-box > a,
#index-blog .blog-row .img-box picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

#index-blog .blog-row .img-box > a {
  position: relative !important;
  z-index: 3 !important;
}

#index-blog .blog-row .img-box img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  transition: transform .45s ease !important;
}

#index-blog .blog-row:hover .img-box img {
  transform: scale(1.035) !important;
}

#index-blog .blog-row .text-box {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  padding: 25px 25px 23px !important;
  background: #fffdf9 !important;
}

#index-blog .blog-row .info-group {
  flex: 1 1 auto !important;
}

#index-blog .blog-row .info-group > a:first-child {
  position: static !important;
  color: inherit !important;
  text-decoration: none !important;
}

#index-blog .blog-row .info-group > a:first-child::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

#index-blog .blog-row .info-group > a:first-child:focus-visible::after {
  outline: 3px solid #af801b !important;
  outline-offset: -5px !important;
  border-radius: 20px !important;
}

#index-blog .blog-row .middle-title {
  display: -webkit-box !important;
  min-height: 3em !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #493b2b !important;
  font-size: clamp(20px, 1.65vw, 23px) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: .01em !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#index-blog .blog-row .info-group > p {
  display: -webkit-box !important;
  min-height: 5.4em !important;
  margin: 14px 0 0 !important;
  overflow: hidden !important;
  color: #756a5d !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

#index-blog .blog-row .article-info {
  margin: 20px 0 0 !important;
  padding: 15px 0 0 !important;
  border-top: 1px solid #eee6da !important;
  color: #8a7d6d !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#index-blog .blog-row .article-info li {
  margin: 0 !important;
}

#index-blog .blog-row .article-classify {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 13px 0 0 !important;
  padding: 0 !important;
}

#index-blog .blog-row .article-classify a {
  position: relative !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 5px 11px !important;
  color: #755b27 !important;
  background: #f2eadb !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

#index-blog .blog-row .article-classify a:hover {
  color: #fff !important;
  background: #af801b !important;
}

#index-blog .text-center {
  margin: 14px 0 0 !important;
}

#index-blog .text-center a {
  position: relative !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 10px 23px !important;
  color: #584833 !important;
  background: transparent !important;
  border: 1px solid #b99b65 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color .2s ease, background .2s ease !important;
}

#index-blog .text-center a:hover {
  color: #fff !important;
  background: #af801b !important;
}

@media (max-width: 991px) {
  #index-blog > .container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

@media (max-width: 767px) {
  #index-blog {
    padding: 58px 0 68px !important;
  }

  #index-blog > .container {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  #index-blog .page-title {
    margin-bottom: 8px !important;
  }

  #index-blog .blog-row .text-box {
    padding: 22px 20px 21px !important;
  }

  #index-blog .blog-row .middle-title {
    min-height: auto !important;
    font-size: 21px !important;
  }

  #index-blog .blog-row .info-group > p {
    min-height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #index-blog .blog-row,
  #index-blog .blog-row .img-box img {
    transition: none !important;
  }

  #index-blog .blog-row:hover,
  #index-blog .blog-row:hover .img-box img {
    transform: none !important;
  }
}

/* 首頁文章封面完整顯示：保留原始比例與圖片文字 */
#index-blog .blog-row .img-box {
  aspect-ratio: auto !important;
  height: auto !important;
  overflow: hidden !important;
}

#index-blog .blog-row .img-box > a,
#index-blog .blog-row .img-box picture {
  height: auto !important;
}

#index-blog .blog-row .img-box img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

#index-blog .blog-row:hover .img-box img {
  transform: none !important;
}

/* 關於我：新圖與首屏左右進場 */
@keyframes wb-about-copy-enter {
  0% {
    opacity: 0;
    transform: translateX(-52px);
    filter: blur(4px);
  }
  70% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: none;
  }
}

@keyframes wb-about-photo-enter {
  0% {
    opacity: 0;
    transform: translateX(52px);
    filter: blur(4px);
  }
  70% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: none;
  }
}

body.b_about_detail .wb-about .wb-hero .wb-htext {
  animation: wb-about-copy-enter .82s cubic-bezier(.22, .8, .25, 1) both;
  will-change: transform, opacity, filter;
}

body.b_about_detail .wb-about .wb-hero .wb-hphoto {
  animation: wb-about-photo-enter .82s .08s cubic-bezier(.22, .8, .25, 1) both;
  will-change: transform, opacity, filter;
}

body.b_about_detail .wb-about .wb-hero .wb-hphoto img {
  content: url("https://wubread.com/images/wubread.com/upload_file/03328921-2237-40f5-b40a-b3f49e759751.png");
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-radius: 0 !important;
}

@media (max-width: 640px) {
  body.b_about_detail .wb-about .wb-hero .wb-hphoto {
    width: min(100%, 320px);
    max-width: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.b_about_detail .wb-about .wb-hero .wb-htext,
  body.b_about_detail .wb-about .wb-hero .wb-hphoto {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* 服務項目：照片與文字共用整張卡片連結 */
body.b_service_list main .info-list > li {
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}

body.b_service_list main .info-list > li::before {
  pointer-events: none;
}

body.b_service_list main .info-list > li > a {
  position: static !important;
  padding-bottom: 37px !important;
  overflow: visible !important;
}

body.b_service_list main .info-list > li > a::after {
  content: "了解更多  ↗";
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-start;
  width: auto;
  height: auto;
  padding: 0 30px 24px;
  box-sizing: border-box;
}

body.b_service_list main .info-list > li:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(88, 72, 51, .10);
}

body.b_service_list main .info-list > li:focus-within {
  outline: 3px solid rgba(178, 138, 59, .45);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body.b_service_list main .info-list > li {
    transition: none;
  }

  body.b_service_list main .info-list > li:hover {
    transform: none;
  }
}

/* 服務項目：移除 hover 位移，避免圖片區反覆觸發 */
body.b_service_list main .info-list > li {
  transition: box-shadow .22s ease !important;
}

body.b_service_list main .info-list > li > a {
  transition: box-shadow .18s ease, color .18s ease, background-color .18s ease, border-color .18s ease !important;
}

body.b_service_list main .info-list > li:hover,
body.b_service_list main .info-list > li > a:hover {
  transform: none !important;
}

}