/* 人生考勤系統 App 網站：沿用 App 的紙本手帳風格——米色紙底、墨色邊線、螢光筆重點。不載入外部字體，用系統字型。 */
/* 色彩取自 App 的 PaperColors（site_test 比對），亮色與深色各一組，跟著系統切換。 */
:root {
  --paper: #f5eedf;
  --paper-raised: #fff9ee;
  --ink: #282723;
  --graphite: #6b665e;
  --ink-blue: #315d70;
  --highlighter: #e6d66b;
  --rule: rgba(49, 93, 112, 0.12);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #24231f;
    --paper-raised: #302e29;
    --ink: #f2e8d8;
    --graphite: #bdb5a8;
    --ink-blue: #7db0c5;
    --highlighter: #b8a94c;
    --rule: rgba(125, 176, 197, 0.1);
  }
}

* { box-sizing: border-box; }

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

/* 紙底是橫線筆記本：每 32px 一條淡藍線。 */
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(transparent 31px, var(--rule) 31px);
  background-size: 100% 32px;
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", "Microsoft JhengHei", Roboto, sans-serif;
}
body:lang(zh-Hans) {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Roboto, sans-serif;
}

a { color: var(--ink-blue); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--ink-blue); outline-offset: 2px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 24px 16px 48px; }

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
}
.brand img { width: 40px; height: 40px; border-radius: 9px; }
.langs { display: flex; flex-wrap: wrap; gap: 8px; }
.lang {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--ink);
  padding: 2px 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.card {
  background: var(--paper-raised);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 5px 0 var(--ink);
  padding: 20px 20px 22px;
  margin: 0 0 28px;
}

h1 { font-size: clamp(28px, 7vw, 42px); line-height: 1.3; margin: 0 0 12px; }
h2 { font-size: 21px; line-height: 1.4; margin: 0 0 8px; }
h3 { font-size: 17px; margin: 18px 0 4px; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 22px; }
li { margin: 4px 0; }
.lead { font-size: 18px; color: var(--graphite); }
.meta { color: var(--graphite); font-size: 14px; }

/* 螢光筆：只畫字的下半部，像手帳裡劃重點。 */
mark {
  color: inherit;
  background: linear-gradient(transparent 55%, var(--highlighter) 55%);
  padding: 0 2px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 16px 32px;
  align-items: center;
}
.hero-icon {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 44px;
  box-shadow: 4px 5px 0 var(--ink);
}
@media (max-width: 720px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-icon { max-width: 128px; border-radius: 28px; order: -1; }
}

/* 商店按鈕：上架前是不能點的 span，上架後換成連結（延後 SITE-D01、SITE-D02）。 */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.store {
  display: inline-flex;
  flex-direction: column;
  min-width: 170px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 16px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper-raised);
}
.store[aria-disabled="true"] { border-style: dashed; }
.store strong { font-size: 17px; }
.store span { font-size: 13px; color: var(--graphite); }

/* 三個步驟：手機上下排、寬螢幕左右排。 */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  padding: 12px 14px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--highlighter);
  color: #282723;
  font-weight: 800;
}
.steps strong { font-size: 17px; }
.steps p { margin: 6px 0 0; font-size: 15px; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 14px 0 4px;
}
.feature {
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  padding: 12px 14px;
}
.feature h3 { margin: 0 0 4px; }
.feature p { margin: 0; font-size: 15px; }

/* 教練：圖底是紙色圓，名字下方是一句 App 內的台詞。 */
.coaches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 14px 0 4px;
}
.coach { margin: 0; text-align: center; }
.coach img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--paper);
}
.coach figcaption strong { display: block; font-size: 17px; }
.coach q { display: block; color: var(--graphite); font-size: 15px; }

/* muted 在紙色底上對比剛好 AA，頁尾用 ink 比較穩。 */
footer { color: var(--ink); font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }