/*
 * beigang.ioa.tw 的共用樣式（首頁、隱私權政策）。
 * 主色規則在 00-docs/03-Beigang/B05-V2-Assets/design.md §5。不載網路字型，用系統的宋體與黑體。
 * 印章的 SVG 從 B05-V2-Assets/logo 複製來（原檔不改）
 */
:root {
  --red: #be0028;
  --red-deep: #86001a;
  --white: #fff;
  --ink: #2a1416;
  --ash: #7c6a6c;
  --line: #ecdfe0;
  --serif: "Songti TC", "Noto Serif TC", "Noto Serif CJK TC", serif;
  --sans: -apple-system, "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
  --gutter: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 3px;
}

/* ---------- 印章：外框與字分開兩張，疊在一起（同 App 的開場畫面） ---------- */
.seal {
  position: relative;
  width: var(--seal-size, 240px);
  aspect-ratio: 1;
}

.seal-border,
.seal-text {
  position: absolute;
  inset: 0;
  background-color: var(--white);
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
}

.seal-border {
  /* 不透明度 0.86 在 meander.svg 裡，這裡再設會疊乘 */
  --mask: url("../img/meander.svg");
}

/*
 * 字和回紋的 SVG 畫布相同（B05-V2-Assets/logo/v3），滿版疊起來就是定稿的比例。
 * inMazu.svg 本身是白色，直接當背景圖，不用遮罩。印章一律不加陰影（00-docs/03-Beigang/B05-V2-Assets/design.md §5）
 */
.seal-text {
  background: url("../img/inMazu.svg") center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

/* 外框 180 秒逆時針轉一圈（每秒 2°，2026-11-10 使用者決定，App 的開場畫面還是順時針） */
.seal.is-turning .seal-border {
  animation: seal-turn 180s linear infinite reverse;
}

@keyframes seal-turn {
  to {
    rotate: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seal.is-turning .seal-border {
    animation: none;
  }
}

/* ---------- 頁尾 ---------- */
.site-footer {
  padding: 32px var(--gutter) calc(32px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  color: var(--ash);
  font-size: 14px;
  text-align: center;
}

.site-footer nav {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 8px;
}

.site-footer a {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    color: var(--red);
  }
}

.site-footer p {
  margin: 0;
}