/* /var/www/html/style-login.css */
/* ============================================
   Project MIRROR - Login Page
   白黒・グレー世界観（Registerと同型）
   SP：キーボード回避は CSS のみ
============================================ */

/* ===============================
   CSS Variables
=============================== */
:root {
  --bg: #ffffff;
  --card-bg: #ffffff;
  --text: #000000;
  --text-sub: #555555;
  --border: #000000;
}

html.dark {
  --bg: #242424;
  --card-bg: #2a2a2a;
  --text: #ffffff;
  --text-sub: #cccccc;
  --border: #dddddd;
}

/* ===============================
   全体（PC / 共通）
=============================== */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* ===============================
   コンテナ（PC / 共通）
=============================== */
.container {
  width: 100%;
  max-width: 380px;
  padding: 24px;
  box-sizing: border-box;
}

/* ===============================
   ロゴ
=============================== */
.logo-text {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.tagline {
  text-align: center;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 22px;
}

/* ===============================
   フォームカード
=============================== */
form {
  background: var(--card-bg);
  padding: 26px 24px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* ===============================
   ラベル / 入力
=============================== */
label {
  display: block;
  font-size: 13px;
  margin-top: 14px;
}

input {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  font-size: 14px;

  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);

  box-sizing: border-box;
}

input:focus {
  outline: none;
  background: transparent;
}

/* ===============================
   ボタン（黒反転）
=============================== */
button {
  width: 100%;
  margin-top: 18px;
  height: 36px;

  border: none;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);

  font-size: 14px;
  cursor: pointer;
}

button:hover {
  opacity: 0.85;
}

/* ===============================
   メッセージ
=============================== */
#msg {
  margin-top: 10px;
  min-height: 1em;
  font-size: 13px;
  text-align: center;
  color: #c00000;
}

/* ===============================
   補助テキスト
=============================== */
p {
  margin-top: 14px;
  font-size: 12px;
  text-align: center;
  color: var(--text-sub);
}

a {
  color: var(--text);
  text-decoration: underline;
}

/* =================================================
   SP専用：キーボード回避（CSSのみ・安全版）
   ・ユーザー操作を要求しない
   ・にゅっと動かない
   ・投稿モーダルと同型反復
================================================= */
@media screen and (max-width: 599px) {

  /* body はスクロールさせない */
  body {
    overflow: hidden;
  }

  /* container を唯一のスクロール逃げ道に */
  .container {
    height: 100vh;

    overflow-y: auto;
    overflow-x: hidden;

    /* ★ キーボード分の逃げ */
    padding-bottom: 260px;

    -webkit-overflow-scrolling: touch;
  }
}