/* ===== 寯 空間：站內樣式（Tailwind 外的微調） ===== */

/* 平滑捲動、避免水平捲軸 */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Skip link（鍵盤使用者友善） */
.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: #000;
  color: #fff;
  padding: .5rem .75rem;
  border-radius: .5rem;
  z-index: 9999;
}
.skip-link:focus {
  left: 8px;
  outline: 2px solid #0ea5e9; /* sky-500 */
  outline-offset: 2px;
}

/* Sticky header 避免錨點被蓋住 */
:target { scroll-margin-top: 88px; }

/* iOS Safari 對 backdrop-blur 的回退 */
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  header { background-color: rgba(255,255,255,0.98) !important; }
}

/* 聚焦樣式（鍵盤無障礙） */
a:focus-visible, button:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* 品牌 logo 最小寬 */
.brand-logo { min-width: 40px; }

/* 作品圖：固定高度、圓角與 hover 效果 */
.work-img {
  width: 100%;
  height: 16rem;           /* h-64 對齊 Tailwind 區塊 */
  object-fit: cover;
  border-radius: 1rem;     /* rounded-2xl */
  transition: transform .5s ease, box-shadow .3s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.work-img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(2,6,23,.12);
}

/* 卡片陰影一致性（若有加 .shadow 的元素） */
.rounded-2xl.shadow { box-shadow: 0 10px 30px rgba(2,6,23,.08); }

/* 徵才泡泡（badge） */
.badge {
  display: inline-block;
  padding: .75rem 1.5rem;
  background: #fff;
  color: #0f172a;           /* slate-900 */
  border: 1px solid #e2e8f0;/* slate-200 */
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(2,6,23,.06);
  transition: box-shadow .2s ease, transform .12s ease;
}
.badge:hover {
  box-shadow: 0 6px 18px rgba(2,6,23,.12);
  transform: translateY(-1px);
}

/* Footer 字型抗鋸齒 */
footer { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }