/* ---- 最上位画面の表示切り替え（メイン / シフト希望入力 / Excel印刷範囲指定） ---- */
.top-screen{ display:none; }
.top-screen.active{ display:block; }

.back-btn{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--navy-deep);
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}
.back-btn:hover{ background:var(--accent-soft); border-color:var(--accent); }

/* ---- ホーム画面 ---- */
.home-hero{ padding:36px 0 26px; text-align:center; }
.home-hero h1{ font-size:24px; margin:0 0 8px; color:var(--navy-deep); font-weight:700; }
.home-hero .sub{ font-size:13px; color:#8792a0; }

.home-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  max-width:760px;
  margin:0 auto;
}
.home-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  text-align:left;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px 24px;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
.home-card:hover{
  border-color:var(--accent);
  box-shadow:0 8px 22px rgba(21,42,69,.08);
  transform:translateY(-2px);
}
.home-card .home-card-icon{
  width:42px;height:42px;
  border-radius:10px;
  background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  margin-bottom:4px;
}
.home-card .home-card-title{ font-size:16px; font-weight:700; color:var(--navy-deep); }
.home-card .home-card-desc{ font-size:12.5px; color:#8792a0; line-height:1.6; }
.home-card .home-card-arrow{
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  color:var(--accent);
}

@media (max-width:640px){
  .home-hero{ padding:24px 0 18px; }
  .home-hero h1{ font-size:20px; }
  .home-card{ padding:20px 18px; }
}