/* =========================================================
   landing.css  —  背景＆ランディング（ヒーロー）専用
   読み込み順（application.css）: tailwind -> landing -> drawer -> layout -> self
   ========================================================= */

/* =============== Base / 変数とリセット =============== */
@layer base {
  :root {
    --hero-blur: 1px;
    --hero-fog:  .015;
    --hero-veil-alpha: .08;
    --hero-veil-w: 1100px;
    --hero-veil-h: 520px;

    --hero-focal-x: 50%;
    --hero-focal-y: 45%;

    /* Mint palette（共通） */
    --mint-500: #49d8b7;
    --mint-600: #2cc6a6;
    --mint-700: #1da391;
    --mint-ring: rgba(73, 216, 183, 0.35);

    /* アウトライン色（使い方/ログイン系） */
    --login-outline: #2bb7a9;
  }

  @media (min-width: 768px) {
    :root { --hero-blur: 1px; --hero-fog: .02; }
  }

  body.landing-root::before,
  body.hero-bg::before {
    content: "";
    position: fixed; inset: 0;
    z-index: -3; pointer-events: none;
    background-image: var(--hero-bg, url(https://www.fastycalm.win/assets/landing/hero.jpg));
    background-size: cover;
    background-position: var(--hero-focal-x) var(--hero-focal-y);
    background-repeat: no-repeat;
    transform: scale(1.04);
    filter: contrast(1.03) brightness(1.02) saturate(0.96);
  }

  @media (max-width: 640px) {
    :root { --hero-veil-w: 900px; --hero-veil-h: 440px; --hero-focal-y: 40%; }
    body.landing-root::before,
    body.hero-bg::before {
      background-image: var(--hero-bg-mobile, var(--hero-bg, url(https://www.fastycalm.win/assets/landing/hero.jpg)));
      transform: scale(1);
    }
  }

  body.landing-root::after,
  body.hero-bg::after {
    content: "";
    position: fixed; inset: 0;
    z-index: -2; pointer-events: none;
    backdrop-filter: blur(var(--hero-blur));
    -webkit-backdrop-filter: blur(var(--hero-blur));
    background:
      radial-gradient(ellipse var(--hero-veil-w) var(--hero-veil-h) at 50% 45%,
        rgba(255,255,255,var(--hero-veil-alpha)) 0%,
        rgba(255,255,255,calc(var(--hero-veil-alpha) - .12)) 42%,
        rgba(255,255,255,0) 68%),
      linear-gradient(to bottom,
        rgba(255,255,255,.14) 0%,
        rgba(255,255,255,.06) 30%,
        rgba(255,255,255,0)   60%),
      rgba(255,255,255,var(--hero-fog));
  }

  header, main, footer { position: relative; z-index: 1; }
  html, body { margin: 0; padding: 0; }
  main { margin-top: 0 !important; padding-top: 0 !important; }
  main > :first-child { margin-top: 0 !important; }
}

/* =============== Landing Hero（トップの中身） =============== */
@layer components {
  body.landing-root .hero{
    position: relative; display:flex; align-items:center; justify-content:center;
    min-height: 74svh;
    padding-block: clamp(16px, 4vh, 40px);
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
  body.landing-root .hero.hero--compact{ min-height:68svh; padding-block:clamp(12px,3vh,28px); }

  /* タイトルを上寄せ（配置のみ） */
  body.landing-root .hero.hero--title-top{
    align-items:flex-start; justify-content:center; padding-top:clamp(20px,7vh,56px);
  }
  body.landing-root .hero.hero--title-top .hero__title{ margin-top:0; }

  body.landing-root .hero__inner{
    position:relative; z-index:1; width:100%; max-width:980px; margin-inline:auto;
    padding-inline:clamp(16px,4vw,32px); color:#111;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    --stack-gap: clamp(10px, 2.2vw, 20px); gap: var(--stack-gap);
  }

  /* ▼ 見た目は Tailwind ユーティリティで指定するため、装飾は持たない */
  body.landing-root .hero__title{ margin:0; user-select:none; }

  body.landing-root .hero__kicker{
    margin-top:0; font-weight:800; line-height:1.6; font-size:clamp(1.15rem,2.6vw,1.6rem);
    text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 10px rgba(255,255,255,.28);
  }

  /* 下寄せスタック */
  body.landing-root .hero__actions{
    margin-top:auto; padding-bottom:clamp(16px,6vh,56px);
    display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2vw,16px);
  }

  /* ===== 主役「アプリの使い方」だけボタン ===== */
  body.landing-root .hero__cta{
    margin-top: clamp(12px, 2.6vw, 22px);
    display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap;
  }
  body.landing-root .hero__cta .btn-hero{
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:9999px; min-width:auto; width:auto; white-space:nowrap; flex:0 0 auto;
    padding-block:clamp(10px,1.6vw,14px); padding-inline:clamp(18px,3vw,28px);
    font-size:clamp(15px,1.8vw,20px); font-weight:800; letter-spacing:.02em; line-height:1; text-decoration:none;
    min-height:44px; box-shadow:0 10px 28px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
    max-width:90vw;
  }
  body.landing-root .hero__cta .btn-hero:active{ transform:scale(.99); }

  /* 使い方＝ミントのアウトライン */
  body.landing-root .hero__cta .btn-hero--login{
    background:#fff; color:var(--login-outline); border:2px solid var(--login-outline);
  }
  body.landing-root .hero__cta .btn-hero--login:hover{
    background:#f8fffd; box-shadow:0 12px 28px rgba(43,212,195,.20); transform:translateY(-1px);
  }

  /* ===== 新規登録/ログイン/Google は “テキストリンク（ミント）” ===== */
  body.landing-root .hero__links{
    margin-top: clamp(6px, 1.6vw, 10px);
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  }
  body.landing-root .hero__links .sep{ color:rgba(0,0,0,.28); }

  .hero-link{
    font-size:clamp(14px,1.8vw,16px);
    color:#0b7669;  /* 濃いミント */
    text-decoration:underline;
    text-decoration-color: rgba(11,118,105,.65);
    text-underline-offset:3px;
    padding:8px 10px; border-radius:8px; /* タップ領域 */
    transition: background-color .12s ease, color .12s ease, text-decoration-color .12s ease;

    /* ボタンにも適用して“リンク風”にする */
    background:transparent;
    border:0;
    appearance:none;
    cursor:pointer;
  }
  .hero-link:hover{
    background:rgba(43,212,195,.08);
    color:#0a5f56;
    text-decoration-color:#0b7669;
  }
  .hero-link:focus-visible{
    outline:3px solid var(--mint-ring);
    outline-offset:2px;
  }

  /* --- Googleアイコン付きリンクの体裁 --- */
  .hero-link--google{
    display:inline-flex; align-items:center; gap:8px;
  }
  .hero-link--google .g-icon{
    display:inline-flex; width:18px; height:18px; flex:0 0 18px;
    transform: translateY(1px); /* ベースライン微調整 */
  }
  .hero-link--google .text{ line-height:1; }

  /* button_to の <form> を横並びに（セパレータと同列で表示） */
  form.inline { display:inline; }

  /* アニメ軽減 */
  @media (prefers-reduced-motion: reduce){
    body.landing-root .hero__cta .btn-hero{ transition:none; }
    .hero-link, .hero-link--google{ transition:none; }
  }

  /* 極小幅の保険 */
  @media (max-width:380px){
    body.landing-root .hero__inner{ --stack-gap: 12px; }
    body.landing-root .hero__cta{ margin-top: 16px; }
    body.landing-root .hero__actions{ padding-bottom: 20px; }
  }
}

/* ====== MyPage ほか（ここから下は既存のまま／変更なし） ====== */
@layer components {
  .mypage-bg{ position:relative; background:transparent; }
  .mypage-bg--full{ min-height:100svh; }
  .mypage-bg--compact{ padding-bottom:clamp(16px,6vh,40px); }
  .mypage-bg::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(1100px 520px at 50% 0%, rgba(59,130,246,0.04) 0%, rgba(59,130,246,0.00) 62%),
      linear-gradient(180deg, rgba(250,250,250,0.40) 0%, rgba(247,245,242,0.22) 58%, rgba(244,241,237,0.18) 100%);
  }
  .mypage-stack{ display:flex; flex-direction:column; gap:clamp(10px,2.2vw,18px); }

  /* 汎用ボタン（既存のまま） */
  .btn-mint{
    background-color:var(--mint-500); color:#fff; border-radius:.75rem;
    padding:.75rem 1.5rem; font-weight:700; box-shadow:0 6px 14px rgba(0,0,0,0.08);
    transition:background-color .15s ease, transform .06s ease, box-shadow .15s ease;
  }
  .btn-mint:hover{ background-color:var(--mint-600); box-shadow:0 8px 18px rgba(0,0,0,0.12); }
  .btn-mint:active{ background-color:var(--mint-700); transform:translateY(1px); }
  .btn-mint:disabled{ opacity:.6; cursor:not-allowed; }
  .btn-mint:focus-visible{ outline:3px solid var(--mint-ring); outline-offset:2px; }
}
/* ===== Devise: OAuth button (Google / LINE) ===== */
.devise-oauth{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top:10px;
}
.devise-oauth--center{
  display:flex;
  justify-content:center;
}

.oauth-btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  border-radius:9999px;
  padding:.68rem 1.1rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  border:2px solid transparent;
  background:#fff;
  color:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  transition:
    transform .12s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}

/* Google ボタン */
.oauth-btn--google{
  color:#2bb7a9;
  border-color:#2bb7a9;
  background:#fff;
}
.oauth-btn--google:hover{
  background:#f8fffd;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(43,212,195,.20);
}
.oauth-btn--google:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(43,212,195,.16);
}
.oauth-btn--google:focus-visible{
  outline:3px solid rgba(73,216,183,.35);
  outline-offset:2px;
}

/* Google ボタン（枠線なし・今のログイン画面用） */
.oauth-btn--google.oauth-btn--borderless{
  border-color:transparent;
  background:transparent;
  color:#2bb7a9;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.oauth-btn--google.oauth-btn--borderless:hover{
  background:rgba(43,212,195,.06);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(43,212,195,.16);
}
.oauth-btn--google.oauth-btn--borderless:active{
  transform:none;
  box-shadow:0 6px 14px rgba(43,212,195,.12);
}

/* LINE ボタン：文字色を Google と同じミント色に統一 */
.oauth-btn--line{
  color:#2bb7a9;
}
.oauth-btn--line .oauth-btn__label{
  color:inherit;
}

/* アイコン & ラベル */
.oauth-btn__icon{
  display:inline-flex;
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.oauth-btn__label{
  font-size:15px;
  font-weight:500;
  color:inherit; /* ボタン側の color をそのまま使う */
}

/* 無効状態 */
.oauth-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:0 0 0 rgba(0,0,0,0);
}

/* アニメーション減らす設定の人向け */
@media (prefers-reduced-motion: reduce){
  .oauth-btn{ transition:none; }
  .oauth-btn:hover,
  .oauth-btn:active{
    transform:none;
    box-shadow:0 10px 24px rgba(0,0,0,.05);
  }
}

/* スマホ幅調整 */
@media (max-width:420px){
  .devise-oauth{ padding-inline:0; }
  .oauth-btn{
    width:100%;
    justify-content:center;
  }
}

/* ヒーロー周りの微調整（既存） */
@media (max-width:380px){
  body.landing-root .hero__inner{ --stack-gap: 12px; }
  body.landing-root .hero__cta{ margin-top: 16px; }
  body.landing-root .hero__actions{ padding-bottom: 20px; }
}