/* cardpin.net 的樣式（018）：「明亮紙卡」。顏色、字型、圓角與陰影一律引用 /brand/tokens.css 的變數（tools/check_contrast.py 會擋寫死的色碼）。
   所有路徑為絕對路徑：/c/<識別碼> 與 /en 會被伺服器改寫，相對路徑會解析錯（018 research R-04）。 */

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

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

/* 頁首、內容、頁尾直排；內容不足一屏時頁尾貼齊視窗底部，不會浮在畫面中間（2026-10-19 使用者回報 /c/ 分享引導頁）。
   dvh 會隨手機瀏覽器的工具列伸縮；不支援 dvh 的舊瀏覽器用前一行的 vh。 */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  line-height: 1.7;
}

a { color: var(--brand-ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-display); color: var(--brand-navy-2); line-height: 1.3; }

img { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 var(--space-4); }

/* ---- 頁首 ---- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--brand-navy-2); }
.brand img { width: 2rem; height: 2rem; border-radius: var(--radius-sm); }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2); letter-spacing: 0.01em; }
.lang-switch { margin-left: auto; display: flex; gap: var(--space-2); font-size: var(--fs-0); }
.lang-switch a, .lang-switch span { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.lang-switch a { text-decoration: none; }
.lang-switch a:hover { background: var(--brand-soft); }
.lang-switch [aria-current="page"] { color: var(--muted); }

/* ---- 首頁：主視覺 ---- */
.hero { position: relative; overflow: hidden; padding: var(--space-6) 0; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-6); align-items: center; }
.hero h1 { font-size: var(--fs-5); font-weight: 700; margin: 0 0 var(--space-4); }
.hero .lead { font-size: var(--fs-2); color: var(--muted); margin: 0 0 var(--space-5); max-width: 32rem; }
.badge-soon {
  display: inline-block; background: var(--brand); color: var(--surface); font-weight: 700;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius); cursor: default; user-select: none;
}
.notify { margin: var(--space-3) 0 0; font-size: var(--fs-0); color: var(--muted); }
/* 046（審計 6-1）：H1 下一行講清楚這是什麼；商店區由 tools/share_page_stores.py 依 stores.json 產生（未上架為 .badge-soon，上架後為官方徽章） */
.hero .hero-what { font-size: var(--fs-2); font-weight: 600; color: var(--text); margin: 0 0 var(--space-3); max-width: 32rem; }
.hero .stores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.hero .trademark { font-size: var(--fs-0); color: var(--muted); margin: var(--space-2) 0 0; max-width: 32rem; }

/* App 畫面：網頁繪製的手機外框，地圖在前、卡片斜放在後 */
.hero-shots { position: relative; margin: 0; min-height: 30rem; display: flex; justify-content: center; }
.phone {
  position: relative; width: 14.5rem; border-radius: 2rem; padding: 0.55rem;
  background: var(--brand-navy-2); box-shadow: var(--shadow-pop);
}
.phone picture, .phone img { display: block; width: 100%; border-radius: 1.5rem; }
.phone.front { z-index: 2; }
.phone.back { position: absolute; top: 3rem; right: 0; width: 12rem; transform: rotate(8deg); z-index: 1; opacity: 0.95; }
.hero-shots .phone.front { margin-right: 5rem; }

/* 紙卡裝飾（不進入無障礙樹） */
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: 0; width: 9rem; height: 12rem; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-paper); pointer-events: none;
}
.hero::before { left: -3rem; bottom: 2rem; transform: rotate(-12deg); }
.hero::after { right: -2.5rem; top: 1.5rem; transform: rotate(10deg); }
.hero .wrap { position: relative; z-index: 1; }

/* ---- 首頁：三個特色 ---- */
.features { padding: 0 0 var(--space-6); }
.features h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.features .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.feature { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); }
.feature .icon { font-size: var(--fs-4); line-height: 1; display: block; margin-bottom: var(--space-3); }
.feature h3 { font-size: var(--fs-2); margin: 0 0 var(--space-2); }
.feature p { margin: 0; color: var(--muted); }
.privacy-note { margin: var(--space-4) 0 0; text-align: center; color: var(--muted); font-size: var(--fs-0); }
.privacy-note strong { color: var(--text); }

/* ---- 首頁：聯絡 ---- */
.contact { padding: 0 0 var(--space-6); }
.contact .card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); text-align: center; }
.contact h2 { font-size: var(--fs-3); margin: 0 0 var(--space-2); }
.contact p { margin: 0; }
.contact .mail { font-weight: 700; font-size: var(--fs-2); }
/* 長網址與信箱在大字級下可斷行，避免橫向捲動 */
.notify a, .contact .mail { overflow-wrap: anywhere; }

/* ---- 頁尾 ---- */
.site-footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: var(--fs-0); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; padding-top: var(--space-5); padding-bottom: var(--space-5); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.site-footer .copy { margin-left: auto; }

/* ---- 內頁：法務文件（沿用 009 的類別：main.doc、.langbar、.updated、表格的 data-label） ---- */
main.doc {
  width: 100%; max-width: 47.5rem; margin: var(--space-5) auto var(--space-6); padding: var(--space-6) var(--space-5);
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
main.doc h1 { font-size: var(--fs-4); margin: 0 0 var(--space-3); }
.doc h2 { font-size: var(--fs-3); margin: var(--space-6) 0 var(--space-2); padding-top: var(--space-1); }
.doc h3 { font-size: var(--fs-2); margin: var(--space-5) 0 var(--space-2); }
.doc p, .doc li { font-size: 0.95rem; }
.doc table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: 0.88rem; }
.doc th, .doc td { border: 1px solid var(--line); padding: var(--space-2); text-align: left; vertical-align: top; }
.doc th { background: var(--bg); font-weight: 600; }
.doc .langbar { display: flex; gap: var(--space-3); justify-content: flex-end; margin: 0 0 var(--space-2); font-size: 0.88rem; color: var(--muted); }
.doc .updated { color: var(--muted); font-size: var(--fs-0); margin: 0 0 var(--space-1); }
.doc footer { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-0); }

/* ---- 內頁：信箱驗證、密碼重設、Apple 登入回呼、分享引導（白色紙卡；類別沿用 .btn、.muted、.error、ul.rules） ---- */
main.form-card {
  width: 100%; max-width: 30rem; margin: var(--space-6) auto; padding: var(--space-5);
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
}
main.form-card h1 { font-size: var(--fs-3); margin: 0 0 var(--space-3); }
/* 大字級時長字（例如 CardPin、網址）可斷行，按鈕不超出卡片 */
main.form-card { overflow-wrap: anywhere; }
main.form-card .btn { max-width: 100%; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.btn {
  display: inline-block; padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--radius);
  background: var(--brand); color: var(--surface); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--brand-ink); }
.btn[disabled] { opacity: 0.5; cursor: default; }
main.form-card label { display: block; margin: var(--space-3) 0 var(--space-1); font-weight: 600; }
main.form-card input {
  width: 100%; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: var(--surface); color: var(--text);
}
ul.rules { padding-left: var(--space-5); margin: var(--space-2) 0; }

/* 分享引導頁（/c/<識別碼>）：像一張邀請卡。圖示置頂、標題與按鈕置中，按鈕在手機上撐滿卡片寬度 */
main.form-card.invite { text-align: center; padding: var(--space-6) var(--space-5); }
.invite .invite-mark { display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.invite h1 { font-size: var(--fs-4); }
.invite .btn { display: block; width: 100%; max-width: 20rem; margin: var(--space-2) auto; text-align: center; }
.invite ul.rules { display: inline-block; margin: var(--space-1) auto 0; text-align: left; }
/* 034：分享連結頁的三步驟、商店徽章（官方圖檔、等高、四周留白至少徽章高度的四分之一）與「即將推出」 */
.invite [hidden] { display: none !important; }
.invite ol.steps { display: inline-block; margin: var(--space-3) auto; padding-left: var(--space-5); text-align: left; }
.invite .stores { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin: var(--space-4) 0; }
.store-badge { display: inline-block; padding: 0.625rem; line-height: 0; }
.store-badge img { height: 2.5rem; width: auto; }
.store-soon {
  display: inline-block; background: var(--brand); color: var(--surface); font-weight: 700;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius);
}
.invite .trademark { font-size: var(--fs-0); margin-top: var(--space-5); }

/* ---- 窄螢幕 ---- */
@media (max-width: 45rem) {
  .hero { padding: var(--space-5) 0; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .hero h1 { font-size: var(--fs-4); }
  .hero-shots { min-height: 22rem; }
  .phone { width: min(11rem, 56%); }
  .phone.back { width: min(9rem, 44%); top: 2rem; right: 0.5rem; }
  .hero-shots .phone.front { margin-right: 30%; }
  .hero::before, .hero::after { display: none; }
  .features .grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer .copy { margin-left: 0; }
  main.doc { margin: 0; padding: var(--space-5) var(--space-4); border-radius: 0; box-shadow: none; }
  /* 卡片在 flex 直排容器內：拿掉 width 後由 align-items: stretch 撐滿（保留 width: 100% 會加上左右邊距而橫向溢出） */
  main.form-card { width: auto; margin: var(--space-4); }
}

/* 法務頁的表格在窄螢幕改為每列一張卡片（009） */
@media (max-width: 32.5rem) {
  .doc table, .doc thead, .doc tbody, .doc tr, .doc td, .doc th { display: block; }
  .doc thead { display: none; }
  .doc tr { margin-bottom: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
  .doc td { border: 0; border-bottom: 1px solid var(--line); }
  .doc td:last-child { border-bottom: 0; }
  .doc td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--muted); font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}