/* 全站交互提示：讓可點擊區域在懸停、按下與鍵盤聚焦時有一致反饋。 */
:root {
  --interactive-accent: #08a99f;
  --interactive-accent-soft: rgba(8, 169, 159, .10);
  --interactive-shadow: 0 12px 28px rgba(22, 54, 73, .12);
}

/* 圖標基礎尺寸不依賴首頁狀態，防止舊網址切換時 SVG 瞬間放大。 */
.cat-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:11px;background:#e7f6f7;color:#118f9a}
.cat-icon svg{width:21px;height:21px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

a,
button,
select,
[onclick],
[data-job],
[data-related],
[data-result],
[data-company],
[data-category],
[data-region],
[data-q],
[data-hero-q],
[data-job-title],
[data-path],
[data-route] {
  cursor: pointer;
}

a,
button,
.cat,
.home-job,
.home-company,
.district-card,
.path-card,
.company-job-row,
.card[onclick],
.insight-card,
.consumer-job,
.mode-card,
.result-card,
.related-job,
.filter-trigger,
.filter-option {
  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              box-shadow .22s ease,
              border-color .18s ease,
              background-color .18s ease,
              color .18s ease,
              opacity .18s ease;
}

button:hover,
a:hover {
  color: var(--interactive-accent);
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(8, 169, 159, .14);
}

button:active:not(:disabled),
a:active {
  transform: translateY(0) scale(.975);
  transition-duration: .08s;
}

.cat:hover,
.home-job:hover,
.home-company:hover,
.district-card:hover,
.path-card:hover,
.company-job-row:hover,
.card[onclick]:hover,
.insight-card:hover,
.consumer-job:hover,
.mode-card:hover,
.result-card:hover,
.related-job:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 169, 159, .58) !important;
  box-shadow: var(--interactive-shadow);
  background-color: #fff;
}

.consumer-job:hover,
.mode-card:hover {
  transform: translateX(4px);
}

.consumer-job:hover b,
.mode-card:hover b,
.result-card:hover b,
.related-job:hover b,
.home-job:hover b,
.home-company:hover h3,
.insight-card:hover h3 {
  color: var(--interactive-accent);
}

.district-card:hover,
.path-card:hover {
  background: var(--interactive-accent-soft);
}

.filter-trigger:hover,
select:hover,
input:hover {
  border-color: rgba(8, 169, 159, .65) !important;
}

.filter-option:hover {
  padding-left: 18px;
  color: var(--interactive-accent);
  background: var(--interactive-accent-soft);
}

.section-head a:hover,
.home-section a:hover,
footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(8, 169, 159, .28);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}