/**
 * 会員フォーム（ログイン / 会員登録 / リマインド 等）の見た目を統一・整える。
 * CMS の素朴なテンプレート（reg_form.twig 等）を、テーマのデザイントークンに合わせて
 * カード化・整形する。すべて body.member-page 配下にスコープする。
 */

.member-page .site-main {
    padding-top: var(--space-4);
}

/* 見出し・説明を中央寄せのカラム幅に */
.member-page .entry-content {
    max-width: 460px;
    margin-inline: auto;
    text-align: center;
}
.member-page .entry-content p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.9;
}

/* ---- 会員登録フォーム（#user-registration-form）をカード化 ---- */
.member-page #user-registration-form {
    max-width: 460px;
    margin: 1.5rem auto 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 4vw, 2rem);
    text-align: left;
    display: flex;
    flex-direction: column;
}
.member-page #user-registration-form label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text);
    margin: .85rem 0 .35rem;
}
.member-page #user-registration-form label:first-of-type {
    margin-top: 0;
}
.member-page #user-registration-form input[type="text"],
.member-page #user-registration-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    padding: .75rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
}
.member-page #user-registration-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.member-page #user-registration-form button[name="register_user"] {
    margin-top: 1.25rem;
    width: 100%;
    padding: .85rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity .15s ease;
}
.member-page #user-registration-form button[name="register_user"]:hover {
    opacity: .9;
}

/* ---- Google の登録/ログインリンクをボタン化（G ロゴ付き） ----
 * member_login.twig はインライン style（display:block 等）を持つため、
 * 両ページで見た目を揃えるため主要プロパティは !important で上書きする。 */
.member-page a[href*="google_oauth_redirect"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    max-width: 460px;
    margin: 1rem auto 0 !important;
    padding: .8rem 1rem !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none !important;
    transition: background .15s ease;
}
.member-page a[href*="google_oauth_redirect"]:hover {
    background: var(--surface-2) !important;
    opacity: 1;
}
.member-page a[href*="google_oauth_redirect"]::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.9 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.3 0-9.7-3.1-11.3-7.6l-6.5 5C9.6 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.1-4.1 5.6l6.2 5.2C40.9 36.5 44 30.8 44 24c0-1.3-.1-2.3-.4-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- ログインフォーム（member_login.twig）をカードで統一 ---- */
.member-page .necosuke-member-login .login-container,
.member-page .necosuke-login-form .login-container {
    max-width: 460px;
    margin: 1.5rem auto 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 4vw, 2rem);
    text-align: left;
}
.member-page .necosuke-member-login input,
.member-page .necosuke-login-form input {
    font-family: inherit;
    border-radius: var(--radius-sm);
}

/* ---- ログイン⇄会員登録の導線 ---- */
.member-page .member-nav {
    max-width: 460px;
    margin: 1.25rem auto 0;
    text-align: center;
    font-size: .95rem;
    color: var(--muted);
}
.member-page .member-nav a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    margin-left: .25rem;
}
.member-page .member-nav a:hover {
    text-decoration: underline;
}