/* ============================================
   ハブページ 専用CSS (index.css)
   計算機モチーフ：LCDディスプレイ＋電卓キー
   ============================================ */

.hub-hero{padding-bottom:40px}
.hub-hero h1{font-size:1.9rem}

/* ===== LCDディスプレイ ===== */
.lcd{
  margin-top:26px;max-width:560px;
  background:#0E211B;border-radius:14px;padding:14px 16px 12px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.lcd-screen{
  background:linear-gradient(180deg,#12352B,#0F2C23);
  border-radius:8px;padding:14px 16px;min-height:52px;
  font-family:var(--num);font-size:1.05rem;font-weight:600;letter-spacing:.04em;
  color:#7CE8AC;text-shadow:0 0 8px rgba(124,232,172,.4);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
  display:flex;align-items:center;overflow:hidden;white-space:nowrap;
}
@media(max-width:480px){.lcd-screen{font-size:.85rem;padding:12px}}
.lcd .cursor{animation:blink 1s steps(1) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.lcd .cursor{animation:none}}

/* 液晶下の演算キー（飾り） */
.lcd-keys{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.lcd-keys span{
  width:34px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:900;color:#CFE8DA;
  background:linear-gradient(180deg,#2A5346,#1F4438);
  box-shadow:0 2px 0 #122B23;
}
.lcd-keys .eq{background:linear-gradient(180deg,#3BB57E,#2F9E6B);color:#fff;box-shadow:0 2px 0 #1E7A50;width:52px}

/* ===== 電卓キー風ツールカード ===== */
.keypad{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
@media(max-width:720px){.keypad{grid-template-columns:1fr}}

.tool-key{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;
  box-shadow:0 5px 0 #C9D6CD, 0 6px 14px rgba(23,53,44,.08);
  transition:transform .12s ease, box-shadow .12s ease;
  position:relative;
}
.tool-key:hover{transform:translateY(2px);box-shadow:0 3px 0 #C9D6CD, 0 4px 10px rgba(23,53,44,.08)}
.tool-key:active{transform:translateY(5px);box-shadow:0 0 0 #C9D6CD, 0 1px 4px rgba(23,53,44,.1)}

.keycap{
  position:absolute;top:18px;right:18px;
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--num);font-size:1.3rem;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#2A5346,var(--shell));
  box-shadow:0 3px 0 #0E211B;
}
.tool-key h2{
  font-size:1.1rem;font-weight:900;color:var(--shell);margin-bottom:8px;padding-right:56px;line-height:1.5;
}
.tool-key .desc{font-size:.86rem;line-height:1.7;margin-bottom:12px}
.tool-key .io{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.tool-key .io span{
  font-size:.74rem;font-weight:700;border-radius:6px;padding:4px 10px;width:fit-content;
}
.tool-key .in{background:#F2F7F3;color:var(--leaf-dark)}
.tool-key .out{background:#FFF6E2;color:#8A6410}
.tool-key .use{font-size:.82rem;font-weight:900;color:var(--leaf-dark)}

/* ===== 4ステップフロー ===== */
.flow{margin-bottom:22px}
.flow-steps{list-style:none}
.flow-steps li{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px dashed var(--line);font-size:.88rem;line-height:1.75;
}
.flow-steps li:last-child{border-bottom:none}
.step-no{
  flex-shrink:0;font-family:var(--num);font-size:.72rem;font-weight:600;color:#fff;
  background:var(--leaf);border-radius:6px;padding:4px 10px;margin-top:3px;
}
.flow-steps a{color:var(--leaf-dark)}