/* Yumi 的公開頁面。兩頁共用。
   刻意做成單一檔案就能看的樣子 —— 這兩頁的唯一目的是「Apple 打得開、
   使用者看得懂」，不需要任何框架或建置流程。 */
:root{
  --bg:#F7F7F5; --card:#FFF; --ink:#14242D; --soft:#5A6B73;
  --line:rgba(20,36,45,.10); --lime:#527D14;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0C1418; --card:#18272E; --ink:#F5F7F2; --soft:#9BAAB2;
         --line:rgba(255,255,255,.12); --lime:#B7F35C; }
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink); line-height:1.75;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",
              "Microsoft JhengHei",sans-serif;
  padding:32px 20px 80px;
}
main{max-width:720px; margin:0 auto}
h1{font-size:28px; letter-spacing:-.5px; margin-bottom:6px}
.updated{color:var(--soft); font-size:14px; margin-bottom:28px}
h2{font-size:19px; margin:34px 0 10px}
p,li{font-size:16px; color:var(--ink)}
p{margin-bottom:12px}
ul{margin:0 0 14px 22px}
li{margin-bottom:6px}
a{color:var(--lime)}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px;
      padding:18px 20px; margin:16px 0}
.soft{color:var(--soft); font-size:14px}
table{width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:15px}
th,td{text-align:left; padding:9px 8px; border-bottom:1px solid var(--line);
      vertical-align:top}
th{color:var(--soft); font-weight:600}

/* 手機上兩欄表格會被壓成「一個字一行」—— 那不是排版難看，是根本讀不了。
   窄螢幕就改成上下堆疊：標題一行、說明一行。 */
@media (max-width:620px){
  table,tbody,tr,th,td{display:block; width:100%}
  tr{border-bottom:1px solid var(--line); padding:10px 0}
  tr:last-child{border-bottom:0}
  th,td{border:0; padding:0}
  th{color:var(--ink); font-weight:700; margin-bottom:4px}
  td{color:var(--soft)}
}
footer{margin-top:48px; padding-top:18px; border-top:1px solid var(--line);
       color:var(--soft); font-size:14px}