/* ===== DARECA Auth Card — FINAL (single source of truth) ===== */

/* 背景 & UA 余白リセット */
body.page-id-74{
  margin:0;
  min-height:100dvh;
  background:
    radial-gradient(1200px 800px at 30% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(160deg,#0f172a 0%,#162a3f 100%) fixed;
  color:#e5e7eb;
  overflow-x:hidden;   /* 横スクロール抑止 */
}

/* 画面中央配置 */
body.page-id-74 .entry-content{
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,32px);
  width:100%;
}

/* カード本体：幅70%（最大420px）＋中央＋内側余白 */
body.page-id-74 .wp-block-shortcode.dareca-login-card{
  width:clamp(280px,70vw,420px);   /* ←要望どおり“70%くらい”、上限420px */
  margin:0 auto;
  padding:20px;
  border-radius:18px;
  background:rgba(15,23,42,.82);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  box-sizing:border-box;
  overflow:hidden;                /* わずかなはみ出しも封じる */
}

/* カード内はみ出しゼロ */
body.page-id-74 .wp-block-shortcode.dareca-login-card *,
body.page-id-74 .wp-block-shortcode.dareca-login-card *::before,
body.page-id-74 .wp-block-shortcode.dareca-login-card *::after{
  box-sizing:border-box; max-width:100%;
}

/* ラベル（左寄せ） */
body.page-id-74 label{
  display:block; text-align:left; margin:10px 0 6px;
  color:#cfd8e6; font-weight:700;
}

/* 入力欄（カード幅にフィット） */
body.page-id-74 .wp-block-shortcode.dareca-login-card input[type="text"],
body.page-id-74 .wp-block-shortcode.dareca-login-card input[type="password"],
body.page-id-74 .wp-block-shortcode.dareca-login-card input[type="email"]{
  display:block; width:100%; max-width:100%;
  border-radius:12px; padding:14px 16px;
  background:linear-gradient(180deg,rgba(12,16,28,.60),rgba(12,16,28,.50));
  border:1px solid rgba(255,255,255,.16);
  color:#eaf1ff; box-shadow:0 18px 28px rgba(0,0,0,.35);
}

/* チェック行 */
body.page-id-74 .login-remember,
body.page-id-74 .forgetmenot{
  display:flex; align-items:center; gap:8px; justify-content:flex-start; margin:10px 0;
}
body.page-id-74 input[type="checkbox"]{ margin:0; }

/* 送信ボタン（カード幅にフィット） */
body.page-id-74 .wp-block-shortcode.dareca-login-card input[type="submit"],
body.page-id-74 .wp-block-shortcode.dareca-login-card .wp-block-button__link{
  display:block; width:100%; max-width:100%;
  border-radius:12px; padding:13px 16px;
  font-weight:800; font-size:15px;
  background:linear-gradient(135deg,#22d3ee,#60a5fa);
  color:#0b1220; border:0; box-shadow:0 22px 28px rgba(37,99,235,.35);
}

/* SNS ログイン：等幅・中央（固定幅を無効化） */
body.page-id-74 .nsl-container{
  display:flex; flex-direction:column; gap:12px; margin-top:12px;
  width:100%; max-width:100%;
}
body.page-id-74 .nsl-container .nsl-button{
  width:100%; max-width:100%; margin:0; border-radius:12px; padding:14px 16px;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#eaf1ff !important;
}
body.page-id-74 [class*="nsl-"][style*="min-width"]{ min-width:0 !important; }
body.page-id-74 [class*="nsl-"][style*="width"]{ width:100% !important; }

/* ラッパーまで横スクロール禁止（保険） */
html,
body.page-id-74 #app,
body.page-id-74 main,
body.page-id-74 .dareca-brand,
body.page-id-74 .dareca-copy{
  width:100%; max-width:100vw; overflow-x:hidden;
}

/* === 強制補強パッチ === */

/* 入力欄を必ずカードデザインに */
body.page-id-74 .wp-block-shortcode.dareca-login-card input[type="text"],
body.page-id-74 .wp-block-shortcode.dareca-login-card input[type="password"],
body.page-id-74 .wp-block-shortcode.dareca-login-card input[type="email"]{
  background:linear-gradient(180deg,rgba(12,16,28,.60),rgba(12,16,28,.50)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#eaf1ff !important;
  box-shadow:0 18px 28px rgba(0,0,0,.35) !important;
  font-size:15px !important;
}

/* プレースホルダーも見やすく */
body.page-id-74 .wp-block-shortcode.dareca-login-card ::placeholder{
  color:rgba(255,255,255,.55) !important;
}

/* 送信ボタンも強制 */
body.page-id-74 .wp-block-shortcode.dareca-login-card input[type="submit"]{
  background:linear-gradient(135deg,#22d3ee,#60a5fa) !important;
  color:#0b1220 !important;
  font-weight:800 !important;
  border:0 !important;
}

/* === APPLY STYLE TO SHORTCODE-RENDERED #loginform (outside the block) === */

/* フォーム本体をカード化＋中央寄せ（70%・最大420px） */
body.page-id-74 form#loginform{
  width: clamp(280px, 90vw, 420px) !important;
  margin: 0 auto !important;
  padding: 20px !important;
  border-radius: 18px !important;
  background: rgba(15,23,42,.82) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* はみ出しガード */
}

/* ラベル（左寄せ・くっきり） */
body.page-id-74 form#loginform label{
  display:block !important;
  margin:10px 0 6px !important;
  color:#cfd8e6 !important;
  font-weight:700 !important;
  text-align:left !important;
}

/* 入力欄：親幅100%にフィット＆ダーク調 */
body.page-id-74 form#loginform input[type="text"],
body.page-id-74 form#loginform input[type="password"]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  border-radius:12px !important;
  padding:14px 16px !important;
  background: linear-gradient(180deg,rgba(12,16,28,.60),rgba(12,16,28,.50)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#eaf1ff !important;
  box-shadow:0 18px 28px rgba(0,0,0,.35) !important;
  box-sizing:border-box !important;
}
body.page-id-74 form#loginform ::placeholder{ color:rgba(255,255,255,.55) !important; }

/* チェック行：□左・テキスト右 */
body.page-id-74 form#loginform .forgetmenot,
body.page-id-74 form#loginform .login-remember{
  display:flex !important; align-items:center !important; gap:8px !important;
  justify-content:flex-start !important; margin:10px 0 12px !important;
}
body.page-id-74 form#loginform input[type="checkbox"]{ margin:0 !important; }

/* 送信ボタン：幅100%で青グラデ */
body.page-id-74 form#loginform .login-submit input[type="submit"]{
  display:block !important;
  width:100% !important; max-width:100% !important;
  border-radius:12px !important; padding:13px 16px !important;
  font-weight:800 !important; font-size:15px !important;
  background: linear-gradient(135deg,#22d3ee,#60a5fa) !important;
  color:#0b1220 !important; border:0 !important;
  box-shadow:0 22px 28px rgba(37,99,235,.35) !important;
  box-sizing:border-box !important;
}

/* SNS をカード幅にフィット（中央・等幅） */
body.page-id-74 .nsl-container{
  width: clamp(280px, 70vw, 420px) !important;
  margin: 12px auto 0 !important;
  display:flex !important; flex-direction:column !important; gap:12px !important;
  align-items:stretch !important;
}
body.page-id-74 .nsl-container .nsl-button{
  width:100% !important; max-width:100% !important; margin:0 !important;
  border-radius:12px !important; padding:14px 16px !important;
  box-sizing:border-box !important;
}

/* 横スクロールを全階層で無効化（保険） */
html,
body.page-id-74,
body.page-id-74 #app,
body.page-id-74 main,
body.page-id-74 .entry-content{ width:100% !important; max-width:100vw !important; overflow-x:hidden !important; }

/* === ① 「新規アカウント作成はこちら」を中央寄せ === */
/* フォーム直後やSNS直後に出る案内リンクを想定して広めに捕捉 */
body.page-id-74 .register-link,
body.page-id-74 .login-register,
body.page-id-74 form#loginform + p,
body.page-id-74 .nsl-container + p{
  text-align:center !important;
  margin-top:14px !important;
}
body.page-id-74 .register-link a,
body.page-id-74 form#loginform + p a,
body.page-id-74 .nsl-container + p a{
  display:inline-block !important;
  color:#86b6ff !important;
  text-decoration:none !important;
  padding:6px 10px;
  border-radius:8px;
}
body.page-id-74 .register-link a:hover,
body.page-id-74 form#loginform + p a:hover,
body.page-id-74 .nsl-container + p a:hover{
  text-decoration:underline !important;
}

/* === ② ロゴを白化（画像でもSVGでもOK） === */
/* ヘッダーのブランド領域のロゴを白に見せる */
body.page-id-74 .dareca-brand img{
  display:block;
  margin:0 auto;
  filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(255,255,255,.25));
  opacity:.95;
}
/* ロゴが inline SVG の場合はこちらも効くように */
body.page-id-74 .dareca-brand svg,
body.page-id-74 .dareca-brand svg *{
  fill:#fff !important;
  color:#fff !important;
}

/* === © を登録リンクと同じブロック幅＆位置に、色も合わせる === */
body.page-id-74 .dareca-copy{
  width: clamp(280px, 70vw, 420px) !important; /* カードと同じ幅感 */
  margin: 4px auto 8px !important;            /* リンク直下に寄せて、下は短く */
  text-align:center !important;
  color:#86b6ff !important;                    /* リンクと同じ色調 */
  opacity:.85;
}

/* === ページ下の余白をさらに詰める（全体） === */
body.page-id-74 .entry-content{
  padding-bottom: 8px !important;              /* 既存のclampより優先 */
}

/* --- Registerリンクを確実にセンター配置（URLで拾う） --- */
body.page-id-74 .entry-content a[href*="action=register"],
body.page-id-74 .entry-content a[href*="/register"]{
  display:inline-block !important;
  width:100% !important;
  text-align:center !important;
  margin:12px auto 4px !important;
  color:#86b6ff !important;
  text-decoration:none !important;
}
body.page-id-74 .entry-content a[href*="action=register"]:hover,
body.page-id-74 .entry-content a[href*="/register"]:hover{
  text-decoration:underline !important;
}

/* --- © をカードと同じレーンへ、色も合わせて少し上に持ち上げる --- */
body.page-id-74 .dareca-copy{
  width:clamp(280px, 70vw, 420px) !important; /* カード幅に合わせる */
  margin:4px auto 8px !important;            /* Register直下に寄せる */
  text-align:center !important;
  color:#86b6ff !important;
  opacity:.85;
  transform: translateY(-10px) !important;   /* ← 境界より少し上へ */
}
body.page-id-74 .dareca-copy a{
  color:#86b6ff !important;
  text-decoration:none !important;
}

/* --- ページ最下部の余白をさらに詰める（親側も保険で） --- */
body.page-id-74 .entry-content{ padding-bottom:8px !important; }
body.page-id-74 .wp-block-shortcode.dareca-login-card{ margin-bottom:8px !important; }