/* 食在南得 — 基礎樣式：重設、方格紙背景、字體排版 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 用鍵盤 Tab 移動時，被聚焦的元素不會躲在固定的頁首／底部分頁列後面 */
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-padding-bottom: 24px;
}
@media (max-width: 760px) { html { scroll-padding-bottom: calc(var(--tabbar-h) + 90px); } }
/* 滑鼠操作時不要整頁橡皮筋彈跳；觸控裝置保留下拉重新整理 */
@media (pointer: fine) { html { overscroll-behavior: none; } }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
  /* 方格紙：每 24px 一條淡淡的線 */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;   /* 刻意關掉：每個按鈕都有自己的按下效果 */
  touch-action: manipulation;                  /* 去掉手機點兩下放大的延遲 */
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
select { background-color: var(--card); color: var(--ink); }   /* Windows 深色模式下原生下拉選單也要清楚 */

h1, h2, h3 {
  font-family: var(--font-hand); font-weight: 700; line-height: 1.3; margin: 0;
  letter-spacing: .02em; text-wrap: balance;
}
p { max-width: var(--measure); text-wrap: pretty; }

/* 數字對齊（營業時間、統計） */
.num, time, kbd { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 6px; }

::selection { background: var(--yolk-tint); color: var(--ink); text-shadow: none; }  /* 深色底上的白字反白也看得到 */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 「跳到主要內容」：平常藏起來，按 Tab 時出現在左上角 */
.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 300;
  padding: 10px 16px; border-radius: var(--radius-s);
  background: var(--ink); color: var(--paper); font-weight: 700;
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus-visible { transform: translateY(72px); }

#app:focus { outline: none; }   /* 主要內容容器本身不是可點的東西，換頁移過來時不需要外框 */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* 換頁淡入（View Transitions API） */
::view-transition-old(root) { animation: vt-out .18s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .24s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes fade { from { opacity: 0; } }