/* 信友火花 — 共用樣式
   原則：大字、高對比、觸控目標 >= 48px、離線不靠外部字型 */

:root{
  --bg:#F6F4EF; --card:#FFFFFF; --card-2:#EFEBE2;
  --ink:#221F1A; --ink-2:#4A453C; --muted:#7A7469;
  --line:#DDD7CB; --line-2:#C3BBAA;
  --brand:#9A4A18; --brand-2:#B96A33; --brand-soft:#F6E6D8;
  --ok:#2A6B45; --ok-soft:#E1EFE6;
  --shadow:0 1px 2px rgba(34,31,26,.06), 0 10px 26px -16px rgba(34,31,26,.35);
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14130F; --card:#1E1C17; --card-2:#282520;
    --ink:#F0EBE1; --ink-2:#C6BFB2; --muted:#948C7E;
    --line:#332F28; --line-2:#474137;
    --brand:#F0A15F; --brand-2:#D9843F; --brand-soft:#33220F;
    --ok:#7FC79B; --ok-soft:#16301F;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#14130F; --card:#1E1C17; --card-2:#282520;
  --ink:#F0EBE1; --ink-2:#C6BFB2; --muted:#948C7E;
  --line:#332F28; --line-2:#474137;
  --brand:#F0A15F; --brand-2:#D9843F; --brand-soft:#33220F;
  --ok:#7FC79B; --ok-soft:#16301F;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.8; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:700px){ body{font-size:18px} }

a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}

/* ── 頁首 ───────────────────────────── */
.hero{background:linear-gradient(180deg,var(--card-2),var(--bg));border-bottom:1px solid var(--line)}
.hero-in{max-width:1000px;margin:0 auto;padding:1.4rem 1.1rem 2rem}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.kicker{margin:0;font-size:.84rem;letter-spacing:.14em;color:var(--muted)}
.icon-btn{
  min-width:48px;min-height:48px;font-size:1.3rem;line-height:1;
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;
  color:var(--ink);cursor:pointer;
}
.icon-btn:hover{background:var(--card-2)}
h1{margin:0 0 .3rem;font-size:clamp(2.1rem,7vw,3.1rem);line-height:1.16;letter-spacing:.04em;font-weight:800}
.tagline{margin:0 0 1.2rem;font-size:1.02rem;color:var(--ink-2)}
.verse{
  margin:0;padding:.85rem 1.05rem;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--brand);border-radius:10px;
  font-size:1rem;color:var(--ink-2);max-width:38rem;
}
.verse span{display:block;margin-top:.25rem;font-size:.85rem;color:var(--muted)}

/* ── 區塊 ───────────────────────────── */
main{max-width:1000px;margin:0 auto;padding:0 1.1rem 1rem}
.sec{margin:2.6rem 0 0}
.sec h2{
  display:flex;align-items:center;gap:.55rem;margin:0 0 .25rem;
  font-size:1.35rem;font-weight:800;letter-spacing:.03em;
}
.sec h2 .ico{font-size:1.5rem}
.sec-note{margin:0 0 1rem;color:var(--muted);font-size:.94rem}

.grid{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:720px){ .grid{grid-template-columns:1fr 1fr} }

/* 內建瀏覽器提醒（LINE / FB / IG / 微信）—— 只提醒不擋，開場就講 */
.inapp-tip{
  margin:1.4rem 0 0;padding:.9rem 1.05rem;font-size:.95rem;line-height:1.72;
  background:var(--brand-soft);color:var(--ink);
  border:1px solid var(--brand-2);border-left:5px solid var(--brand);border-radius:10px;
}

/* ── 卡片 ───────────────────────────── */
.card{
  display:flex;gap:.95rem;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.15rem;min-height:88px;box-shadow:var(--shadow);
  transition:transform .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--brand-2)}
.card:active{transform:translateY(0)}
.card.accent{border-left:5px solid var(--brand)}
.card.soon{opacity:.72;cursor:default}
.card.soon:hover{transform:none;border-color:var(--line)}
.c-ico{font-size:2rem;line-height:1.2;flex:0 0 auto}
.c-body{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.c-t{font-size:1.14rem;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.c-d{font-size:.95rem;color:var(--ink-2);line-height:1.72}
.c-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}
.c-tags i,.pill{
  font-style:normal;font-size:.76rem;letter-spacing:.03em;
  background:var(--card-2);color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:.12em .6em;
}
.pill{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-2)}

/* ── 接下來 ─────────────────────────── */
.soonlist{margin:0;padding:0;list-style:none;display:grid;gap:.65rem}
.soonlist li{
  background:var(--card);border:1px dashed var(--line-2);border-radius:12px;
  padding:.85rem 1.05rem;font-size:.95rem;color:var(--ink-2);
}
.soonlist b{color:var(--ink);display:inline-block;margin-right:.35rem}

/* ── 頁尾 ───────────────────────────── */
footer{max-width:1000px;margin:2.8rem auto 0;padding:1.6rem 1.1rem 3rem;border-top:1px solid var(--line);text-align:center}
.install{
  min-height:52px;padding:0 1.5rem;font-size:1.02rem;font-weight:700;
  background:var(--brand);color:#fff;border:none;border-radius:12px;cursor:pointer;
}
.install:hover{background:var(--brand-2)}
.ios-tip{margin:.9rem auto 0;max-width:26rem;font-size:.9rem;color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem}
.foot-note{margin:1.1rem auto 0;max-width:32rem;font-size:.86rem;color:var(--muted)}
.foot-ver{margin:.5rem 0 0;font-size:.78rem;color:var(--muted)}

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