/* kokoto 首頁：各項季節預測的入口。配色、字型跟紅葉地圖一樣 */
:root{--bg:#fbf8f4;--card:#fff;--ink:#2b2522;--sub:#7a6f68;--line:#ece4dc;--accent:#c2410c}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif}
body{padding-inline:16px}
.home{max-width:880px;margin:0 auto;padding-block:calc(56px + env(safe-area-inset-top, 0px)) calc(40px + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap:36px;min-height:100dvh}
.hd{display:flex;flex-direction:column;gap:6px}
.logo{margin:0;font-size:40px;font-weight:700;letter-spacing:.02em;line-height:1.1}
.tag{margin:0;font-size:15px;color:var(--sub)}

/* 卡片：電腦版一排四張，平板兩張，手機一張一排 */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px 18px 18px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);color:inherit;text-decoration:none}
.card .ic{width:44px;height:44px;margin-bottom:8px}
.card .t{font-size:17px;font-weight:700}
.card .d{font-size:13px;line-height:1.6;color:var(--sub)}
.card .go{margin-top:auto;padding-top:10px;font-size:13px;font-weight:500;color:var(--accent)}
.card.on{box-shadow:0 1px 4px rgba(60,30,10,.06);transition:border-color .15s,box-shadow .15s,transform .15s}
.card.on:hover{border-color:#e7c7b4;box-shadow:0 4px 14px rgba(60,30,10,.1);transform:translateY(-1px)}
.card.on:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 開發中：淡一點、不能點 */
.card.off{background:transparent;border-style:dashed;cursor:default}
.card.off .ic{opacity:.55}
.card.off .t{color:var(--sub)}

.ft{margin-top:auto;font-size:13px;color:var(--sub)}
.ft a{color:var(--sub)}
.ft a:hover{color:var(--accent)}

@media (max-width:760px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .home{padding-block:calc(36px + env(safe-area-inset-top, 0px)) calc(28px + env(safe-area-inset-bottom, 0px));gap:28px}
  .logo{font-size:34px}
  .cards{grid-template-columns:1fr}
  /* 一張一排時改成橫的：圖示在左、文字在右 */
  .card{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;align-items:center;padding:16px}
  .card .ic{grid-row:1 / span 3;margin:0}
  .card .go{padding-top:4px}
}