/*
Theme Name: Yuragi
Theme URI: https://yuragi-note.space/
Author: Yuragi
Description: Minimal theme for "Yuragi" flow (top + flow pages)
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: yuragi
*/

:root {
  --fg: #111111;
  --fg-mute: #666;
  --bg: #fff;
  --grad-a: #0B0F1C;
  --grad-b: #1B2236;
  --btn-bg: #F2F2F2;
  --btn-fg: #222;
}

/* ====== Sticky Footer の土台 ====== */
html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  display: flex;            /* 縦方向レイアウト */
  flex-direction: column;
}

/* 残りの高さを main が埋める → フッターが一番下へ */
main {                      /* ← 追加 */
  flex: 1;
  display: block;           /* 念のため既定に戻す */
}

/* 共通 */
a {
  text-decoration: none;
  color: inherit;
}

/* ====== Top (hero) ====== */
.yuragi-hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 20%, var(--grad-b), var(--grad-a));
  color: #F2F6FD;
  padding: 24px;
}

.yuragi-hero-inner { text-align: center; max-width: 700px; }
.yuragi-title      { font-size: 40px; margin-bottom: 12px; }
.yuragi-lead       { font-size: 18px; margin-bottom: 24px; }

.yuragi-btn{
  display: inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #F2F6FD;
}

/* ====== Flow ====== */
.flow-wrap {
  /* main 要素自体が flex:1 で高さを担保するので 100vh は不要 */
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.flow-inner { max-width: 720px; width: 100%; }

.flow-card {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .7s ease, transform .7s ease;
}
.flow-card.is-enter { opacity: 1; transform: translateY(0); }

.q     { font-size: 18px; margin-bottom: 16px; text-align: left; }
.last  { text-align: center; }
.hint  { font-size: 13px; color: var(--fg-mute); margin: 8px 0; }

.next-btn{
  margin-top: 22px;
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 12px;
  border: 1px solid #e7e7e7;
  cursor: pointer;
}

/* ====== Footer ====== */
.site-footer{
  margin-top: auto;              /* ← これで一番下に固定 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  font-size: 13px;
  background: #f8f8f8;
  border-top: 1px solid #eee;
}

.footer-right a{
  margin-left: 16px;
  text-decoration: none;
  color: inherit;
  opacity: 0.7;
}
.footer-right a:hover{ opacity: 1; }

/* （任意）スマホで縦並びにしたい場合
@media (max-width: 480px){
  .site-footer{ flex-direction: column; gap: 6px; }
  .footer-right a{ margin-left: 12px; }
}
*/