@charset "utf-8";

/* ================================
   WAGWAG × Ultimate Member カスタム
   ログイン誘導／共通ボタン見た目
   ================================ */
/* ---- 基本的なCSS ---- */
.tac {
  text-align: center;
}

/* ---- 色・影（必要ならここだけ差し替え） ---- */
:root{
  --um-primary: #0ABAB5;
  --um-primary-hover: #08a7a3;
  --um-secondary-bg: #0c6170;
  --um-secondary-hover: #078282;
  --um-secondary-border: #e5e7eb;
  --um-shadow: 0 8px 18px rgba(10,186,181,.18);
  --um-shadow-sm: 0 3px 10px rgba(0,0,0,.06);
  --um-text: #fff;
}

/* ================================
   1) 非ログイン時の案内ブロック（任意）
   ================================ */
.um-lock-msg{
  max-width: 760px;
  margin: 20px auto 10px;
  padding: 0 16px;
  text-align: center;
}
.um-lock-msg .um-lock-text{
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--um-text);
}

/* ================================
   2) ボタンの並び（messages等の誘導用）
   markup 例：
   <div class="um-login-cta">
     <a class="um-button" href="/register/">新規登録</a>
     <a class="um-button um-button--secondary" href="/login/">ログイン</a>
   </div>
   ================================ */
.um-login-cta{
  max-width: 760px;
  margin: 8px auto 0;
  padding: 0 16px;
  display: flex;
  flex-direction: column;   /* きれいに縦に積む */
  align-items: center;      /* 中央寄せ（幅は下で揃える） */
  gap: 14px;                /* ボタン間の余白 */
}

/* ボタン共通 */
.um-login-cta .um-button,
a.um-button{
  display: flex;                /* ← 修正: flexboxで中央寄せ */
  align-items: center;          /* ← 縦中央 */
  justify-content: center;      /* ← 横中央 */
  width: min(720px, 100%);
  height: 56px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border-radius: 10px;
  border: 0;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  cursor: pointer;
}

/* プライマリ（ミント） */
.um-login-cta .um-button:not(.um-button--secondary),
a.um-button:not(.um-button--secondary){
  background: var(--um-primary);
  color: #fff;
  box-shadow: var(--um-shadow);
}
.um-login-cta .um-button:not(.um-button--secondary):hover,
a.um-button:not(.um-button--secondary):hover{
  background: var(--um-primary-hover);
  transform: translateY(-1px);
}

/* セカンダリ（グレー） */
.um-button--secondary{
  background: var(--um-secondary-bg);
  color: var(--um-text);
  border: 1px solid var(--um-secondary-border);
  box-shadow: var(--um-shadow-sm);
}
.um-button--secondary:hover{
  background: var(--um-secondary-hover);
  transform: translateY(-1px);
}

/* スマホ最適化 */
@media (max-width: 480px){
  .um-login-cta .um-button,
  a.um-button{
    height: 54px;
    border-radius: 10px;
    font-size: 15px; /* モバイルでは少しだけ調整 */
  }
}

/* ================================
   3) UMの「ロック」テンプレ側でボタンを使う場合
   （以前の .um-lock-actions を同じ見た目に寄せる）
   ================================ */
.um-lock-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.um-lock-actions a{
  display: block;
  width: min(720px, 100%);
  height: 56px;
  line-height: 56px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border-radius: 10px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.um-lock-actions .btn-login{
  background: var(--um-primary);
  color: #fff;
  box-shadow: var(--um-shadow);
}
.um-lock-actions .btn-login:hover{
  background: var(--um-primary-hover);
  transform: translateY(-1px);
}
.um-lock-actions .btn-outline{
  background: var(--um-secondary-bg);
  color: var(--um-text);
  border: 1px solid var(--um-secondary-border);
  box-shadow: var(--um-shadow-sm);
}
.um-lock-actions .btn-outline:hover{
  background: var(--um-secondary-hover);
  transform: translateY(-1px);
}