/* =============================================================================
   生徒会Wiki - Keycloak ログインテーマ CSS
   PatternFly v5 (keycloak.v2) を上書きし、preview.html と統一されたデザインを適用

   構成:
     1. CSS変数
     2. ダークモード強制無効化（JS バックアップ）
     3. ページ全体・レイアウト
     4. ヘッダー（ロゴ）
     5. メインカード
     6. sk-* カスタムフォーム（login.ftl 用）
     7. PF5 フォーム上書き（register.ftl 用）
     8. ボタン
     9. エラー・アラート
    10. 登録リンク（フッター）
    11. ヘルパークラス
    12. レスポンシブ
    13. フッタークレジット
   ============================================================================= */


/* =============================================================================
   1. CSS変数
   ============================================================================= */
:root {
  --sk-primary: #1E2585;
  --sk-primary-light: #e0e7ff;
  --sk-primary-dark: #161b63;
  --sk-accent: #5c64e4;
  --sk-accent-light: #7b82ef;
  --sk-text-dark: #1e293b;
  --sk-text-mid: #64748b;
  --sk-text-light: #94a3b8;
  --sk-border: #e2e8f0;
  --sk-bg: #f8fafc;
  --sk-white: #ffffff;
  --sk-radius: 8px;
  --sk-radius-lg: 16px;
  --sk-shadow: 0 4px 24px rgba(30, 37, 133, 0.10);
  --sk-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
  --sk-font: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  --sk-danger: #dc2626;
  --sk-danger-bg: #fef2f2;
  --sk-success: #059669;

  /* custom.css 互換の CSS 変数（ヘッダー共通化用） */
  --primary: #1E2585;
  --primary-light: #2a32a0;
  --primary-dark: #141a5c;
  --primary-bg: #f0f1fa;
  --accent: #5c64e4;
  --accent-light: #7b82ef;
  --text-dark: #111827;
  --text-mid: #4b5563;
  --text-light: #6b7280;
  --bg-white: #ffffff;
  --border: #e5e7eb;
  --border-light: #f3f4f6;
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --radius-sm: 8px;
}


/* =============================================================================
   2. ダークモード強制無効化（CSS バックアップ — JS が主）
   ============================================================================= */
html.pf-v5-theme-dark {
  color-scheme: light !important;
}

/* PF5 ダークテーマの主要 CSS 変数をライト値に上書き */
.pf-v5-theme-dark,
.pf-v5-theme-dark body,
.pf-v5-theme-dark .pf-v5-c-login,
.pf-v5-theme-dark .pf-v5-c-login__main,
.pf-v5-theme-dark .pf-v5-c-login__main-body,
.pf-v5-theme-dark .pf-v5-c-login__main-header,
.pf-v5-theme-dark .pf-v5-c-login__main-footer,
.pf-v5-theme-dark .pf-v5-c-login__main-footer-band {
  --pf-v5-global--BackgroundColor--100: #fff !important;
  --pf-v5-global--BackgroundColor--200: #f8fafc !important;
  --pf-v5-global--BackgroundColor--dark-100: #fff !important;
  --pf-v5-global--BackgroundColor--dark-200: #fff !important;
  --pf-v5-global--BackgroundColor--dark-300: transparent !important;
  --pf-v5-global--BackgroundColor--dark-400: transparent !important;
  --pf-v5-global--Color--100: #1e293b !important;
  --pf-v5-global--Color--200: #64748b !important;
  --pf-v5-global--Color--light-100: #1e293b !important;
  --pf-v5-global--Color--light-200: #64748b !important;
  --pf-v5-global--Color--dark-100: #1e293b !important;
  --pf-v5-global--BorderColor--100: #e2e8f0 !important;
  --pf-v5-global--BorderColor--200: #e2e8f0 !important;
  --pf-v5-global--BorderColor--300: #e2e8f0 !important;
  --pf-v5-global--link--Color: #5c64e4 !important;
  --pf-v5-global--link--Color--hover: #7b82ef !important;
  background-color: transparent !important;
  color: var(--sk-text-dark) !important;
}

/* ダークモード時のフォームコントロール */
.pf-v5-theme-dark .pf-v5-c-form-control,
.pf-v5-theme-dark .pf-v5-c-form-control input,
.pf-v5-theme-dark .pf-v5-c-input-group,
.pf-v5-theme-dark .pf-v5-c-button,
.pf-v5-theme-dark .pf-v5-c-check__label,
.pf-v5-theme-dark .pf-v5-c-form__label-text,
.pf-v5-theme-dark .pf-v5-c-alert,
.pf-v5-theme-dark .pf-v5-c-helper-text {
  color: inherit !important;
}

/* ダークモード時の sk-* カスタム要素 */
.pf-v5-theme-dark .sk-input,
.pf-v5-theme-dark .sk-label,
.pf-v5-theme-dark .sk-btn-primary,
.pf-v5-theme-dark .sk-checkbox-label,
.pf-v5-theme-dark .sk-forgot-password a {
  color: inherit !important;
}


/* =============================================================================
   3. ページ全体・レイアウト
   ============================================================================= */
html.login-pf {
  background: linear-gradient(135deg, #f0f1fa 0%, #e0e2f4 100%) !important;
  min-height: 100vh;
}

body#keycloak-bg {
  background: transparent !important;
  font-family: var(--sk-font) !important;
  color: var(--sk-text-dark) !important;
}

/* メインコンテナ — 中央揃え */
.pf-v5-c-login {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  background: transparent !important;
  padding: 40px 20px !important;
  /* PF5 grid レイアウトの完全無効化 */
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
}

/* コンテナ — 単一カラム、最大幅制限 */
.pf-v5-c-login__container {
  max-width: 520px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  /* PF5 のデフォルト padding-left/right: 6.125rem (98px) を無効化 — モバイルで致命的に幅を圧迫するため */
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* PF5 グリッドレイアウトを無効化 */
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  grid-template-areas: unset !important;
  grid-column: unset !important;
  grid-row: unset !important;
  box-sizing: border-box !important;
  /* 確実に水平中央揃え（PF5 grid fallback） */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 登録フォームはフィールド数が多いため、幅を広げる */
.pf-v5-c-login__container:has(#kc-register-form) {
  max-width: 520px !important;
}

/* 登録フォーム: カードのパディングを preview.html に合わせる */
.pf-v5-c-login__main:has(#kc-register-form) {
  padding: 24px !important;
}

/* 登録フォーム: PF5 デフォルトの gap:24px を無効化し、form-group の margin-bottom のみで間隔制御 */
#kc-register-form {
  gap: 0 !important;
}

/* 登録フォーム: flexbox ではマージンが相殺されないため、hr の上マージンを調整 */
#kc-register-form hr {
  margin: 2px 0 20px 0 !important;
  border: none !important;
  border-top: 1px solid var(--sk-border) !important;
}


/* =============================================================================
   4. ヘッダー（ロゴ）
   ============================================================================= */
#kc-header.pf-v5-c-login__header {
  padding: 0 !important;
  margin-bottom: 28px !important;
  text-align: center !important;
  background: transparent !important;
  min-height: unset !important;
  grid-column: unset !important;
  grid-area: unset !important;
  width: 100% !important;
}

/* ロゴ文字 */
#kc-header-wrapper.pf-v5-c-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1.6em !important;
  font-weight: 800 !important;
  color: var(--sk-primary) !important;
  font-family: var(--sk-font) !important;
  background: transparent !important;
  justify-content: center !important;
}

/* "S" ロゴバッジ (CSS ::before) — JS差し替え後は非表示 */
#kc-header-wrapper.pf-v5-c-brand::before {
  content: "S";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--sk-primary);
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 0.7em;
  line-height: 1;
}
/* JS注入後は::beforeの"S"バッジを非表示 */
#kc-header-wrapper.pf-v5-c-brand[style*="--sk-hide-before"]::before {
  display: none;
}

/* <b> タグの色 — 「生徒会」 */
#kc-header-wrapper.pf-v5-c-brand b {
  color: var(--sk-primary);
  font-weight: 800;
}


/* =============================================================================
   5. メインカード
   ============================================================================= */
.pf-v5-c-login__main {
  background: var(--sk-white) !important;
  border-radius: var(--sk-radius-lg) !important;
  box-shadow: var(--sk-shadow) !important;
  padding: 32px 28px !important;
  border: 1px solid var(--sk-border) !important;
  color: var(--sk-text-dark) !important;
  overflow: visible !important;
  grid-column: unset !important;
  grid-area: unset !important;
  width: 100% !important;
}

/* ログインページ: カード外枠を透過（中身の sk-login-card がカードになる） */
.pf-v5-c-login__main:has(.sk-login-card) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ログインページ: PF5 ヘッダー非表示（空のため） */
.pf-v5-c-login__main:has(.sk-login-card) > .pf-v5-c-login__main-header {
  display: none !important;
}

/* カードヘッダー */
.pf-v5-c-login__main-header {
  padding: 0 !important;
  margin-bottom: 20px !important;
  background: transparent !important;
}

/* ページタイトル */
#kc-page-title,
h1#kc-page-title.pf-v5-c-title {
  font-size: 1.15em !important;
  font-weight: 700 !important;
  color: var(--sk-text-dark) !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--sk-font) !important;
  line-height: 1.4 !important;
}

/* 言語セレクタ非表示（日本語のみ） */
.pf-v5-c-login__main-header-utilities {
  display: none !important;
}

/* フォームボディ */
.pf-v5-c-login__main-body {
  padding: 0 !important;
  background: transparent !important;
}


/* =============================================================================
   6. sk-* カスタムフォーム（login.ftl 用）
   — PF5 マクロを使わず、直接 HTML を記述するため、独自クラスでスタイリング
   ============================================================================= */

.sk-form-group {
  margin-bottom: 16px;
}

.sk-form-group--last {
  margin-bottom: 20px;
}

.sk-label {
  display: block;
  font-weight: 600;
  font-size: 0.86em;
  color: var(--sk-text-mid);
  margin-bottom: 5px;
  font-family: var(--sk-font);
}

.sk-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}

.sk-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--sk-border);
  border-radius: var(--sk-radius);
  font-size: 0.94em;
  box-sizing: border-box;
  transition: border-color 0.2s;
  font-family: var(--sk-font);
  background: var(--sk-white);
  color: var(--sk-text-dark);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.sk-input:focus {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 1px var(--sk-accent);
}

.sk-input[aria-invalid="true"] {
  border-color: var(--sk-danger);
}

.sk-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--sk-danger);
}

/* ログインボタン */
.sk-btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--sk-primary);
  color: #fff;
  border: none;
  border-radius: var(--sk-radius);
  font-size: 0.96em;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s;
  font-family: var(--sk-font);
  line-height: 1.4;
}

.sk-btn-primary:hover {
  background: var(--sk-primary-dark);
}

.sk-btn-primary:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
}

.sk-btn-primary:active {
  transform: translateY(1px);
}

/* パスワードを忘れた場合 */
.sk-forgot-password {
  text-align: center;
  margin-top: 14px;
}

.sk-forgot-password a {
  font-size: 0.84em;
  color: var(--sk-accent);
  text-decoration: none;
}

.sk-forgot-password a:hover {
  text-decoration: underline;
  color: var(--sk-accent-light);
}

/* ログイン状態の保存 */
.sk-remember-me {
  margin-bottom: 16px;
}

.sk-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88em;
  color: var(--sk-text-mid);
  cursor: pointer;
  font-family: var(--sk-font);
}

.sk-checkbox {
  accent-color: var(--sk-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* フィールドエラー */
.sk-field-error {
  font-size: 0.82em;
  color: var(--sk-danger);
  margin-top: 4px;
}


/* =============================================================================
   6b. ログインカード — 独立カードレイアウト（login.ftl 用）
   ============================================================================= */

/* ログインカード */
.sk-login-card {
  background: var(--sk-white);
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow);
  padding: 32px 28px;
  border: 1px solid var(--sk-border);
}

/* カードタイトル */
.sk-card-title {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--sk-text-dark);
  text-align: center;
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--sk-font);
  line-height: 1.4;
}

/* 新規登録カード（独立カード） */
.sk-registration-card {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--sk-white);
  border-radius: 12px;
  border: 1px solid var(--sk-border);
  box-shadow: var(--sk-shadow-sm);
  text-align: center;
  font-size: 0.9em;
  color: var(--sk-text-mid);
  font-family: var(--sk-font);
}

.sk-registration-card a {
  color: var(--sk-accent);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}

.sk-registration-card a:hover {
  text-decoration: underline;
  color: var(--sk-accent-light);
}

/* エラー・情報メッセージ（ログインカード内） */
.sk-alert {
  padding: 12px 16px;
  border-radius: var(--sk-radius);
  margin-bottom: 16px;
  font-size: 0.9em;
  line-height: 1.5;
  font-family: var(--sk-font);
}

.sk-alert-danger {
  background: var(--sk-danger-bg);
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

.sk-alert-success {
  background: #f0fdf4;
  border: 1px solid #6ee7b7;
  color: #047857;
}

.sk-alert-info {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1d4ed8;
}

.sk-alert-warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}


/* =============================================================================
   7. PF5 フォーム上書き（register.ftl / terms.ftl 用）
   — register.ftl は ${properties.kcInputClass!} 等の PF5 クラスを使用
   ============================================================================= */

/* フォームグループの間隔（preview.html と統一） */
.pf-v5-c-form__group {
  margin-bottom: 18px !important;
}

/* ラベル */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-weight: 600 !important;
  font-size: 0.88em !important;
  color: var(--sk-text-dark) !important;
  font-family: var(--sk-font) !important;
}

.pf-v5-c-form__label {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}

/* テキスト入力（PF5 フォームコントロール） */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderTopColor: var(--sk-border) !important;
  --pf-v5-c-form-control--BorderRightColor: var(--sk-border) !important;
  --pf-v5-c-form-control--BorderBottomColor: var(--sk-border) !important;
  --pf-v5-c-form-control--BorderLeftColor: var(--sk-border) !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
  background-color: var(--sk-white) !important;
  background-image: none !important;
  color: var(--sk-text-dark) !important;
  font-family: var(--sk-font) !important;
  font-size: 0.92em !important;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control input[type="text"],
.pf-v5-c-form-control input[type="email"],
.pf-v5-c-form-control input[type="number"],
.pf-v5-c-form-control input[type="password"] {
  background: transparent !important;
  color: var(--sk-text-dark) !important;
  font-family: var(--sk-font) !important;
  font-size: inherit !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--sk-accent) !important;
  box-shadow: 0 0 0 1px var(--sk-accent) !important;
  outline: none !important;
}

/* パスワード入力グループ（PF5） */
.pf-v5-c-input-group {
  border: 1px solid var(--sk-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: var(--sk-white) !important;
  transition: border-color 0.2s !important;
}

.pf-v5-c-input-group:focus-within {
  border-color: var(--sk-accent) !important;
  box-shadow: 0 0 0 1px var(--sk-accent) !important;
}

.pf-v5-c-input-group .pf-v5-c-form-control {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* パスワード表示/非表示トグルボタン */
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--sk-border) !important;
  color: var(--sk-text-light) !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover {
  color: var(--sk-accent) !important;
  background: var(--sk-primary-light) !important;
}

/* パスワード忘れリンク（PF5 ヘルパーテキスト） */
.pf-v5-c-form__helper-text a,
.pf-v5-c-helper-text a,
.pf-v5-c-helper-text__item-text a {
  font-size: 0.84em !important;
  color: var(--sk-accent) !important;
  text-decoration: none !important;
}

.pf-v5-c-form__helper-text a:hover,
.pf-v5-c-helper-text a:hover,
.pf-v5-c-helper-text__item-text a:hover {
  text-decoration: underline !important;
  color: var(--sk-accent-light) !important;
}

/* チェックボックス（PF5） */
.pf-v5-c-check__label {
  font-size: 0.88em !important;
  color: var(--sk-text-mid) !important;
  font-family: var(--sk-font) !important;
}

.pf-v5-c-check__input:checked {
  accent-color: var(--sk-accent) !important;
}

/* セレクトボックス（PF5） */
select.pf-v5-c-form-control,
.pf-v5-c-form-control select {
  background: var(--sk-white) !important;
  color: var(--sk-text-dark) !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-family: var(--sk-font) !important;
  font-size: 0.92em !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* =============================================================================
   8. ボタン（PF5 ボタン上書き — register.ftl のsubmit等）
   ============================================================================= */
.pf-v5-c-button.pf-m-primary {
  background: var(--sk-primary) !important;
  border: none !important;
  border-radius: var(--sk-radius) !important;
  padding: 12px !important;
  font-size: 0.96em !important;
  font-weight: 700 !important;
  font-family: var(--sk-font) !important;
  letter-spacing: 0.02em !important;
  transition: background 0.2s !important;
  box-shadow: none !important;
  color: #fff !important;
  width: 100%;
  line-height: 1.4 !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: var(--sk-primary-dark) !important;
}

.pf-v5-c-button.pf-m-primary:focus-visible {
  outline: 2px solid var(--sk-accent) !important;
  outline-offset: 2px !important;
}

/* セカンダリボタン（terms.ftl の「拒否」等） */
.pf-v5-c-button.pf-m-secondary {
  background: var(--sk-white) !important;
  border: 1.5px solid var(--sk-border) !important;
  border-radius: var(--sk-radius) !important;
  color: var(--sk-text-mid) !important;
  font-family: var(--sk-font) !important;
  transition: all 0.2s !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background: var(--sk-bg) !important;
  border-color: var(--sk-text-light) !important;
}


/* =============================================================================
   9. エラー・アラートメッセージ
   ============================================================================= */
.pf-v5-c-alert {
  font-family: var(--sk-font) !important;
  margin-bottom: 16px !important;
}

.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-warning {
  border-radius: var(--sk-radius) !important;
  background: var(--sk-danger-bg) !important;
  border: 1px solid var(--sk-danger) !important;
}

.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title {
  color: var(--sk-danger) !important;
  font-weight: 600 !important;
  font-family: var(--sk-font) !important;
}

.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon,
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon {
  color: var(--sk-danger) !important;
}

.pf-v5-c-alert.pf-m-success {
  border-radius: var(--sk-radius) !important;
  background: #f0fdf4 !important;
  border: 1px solid var(--sk-success) !important;
}

.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title {
  color: var(--sk-success) !important;
}

.pf-v5-c-alert.pf-m-info {
  border-radius: var(--sk-radius) !important;
  background: #eff6ff !important;
  border: 1px solid #3b82f6 !important;
}

.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__title {
  color: #3b82f6 !important;
}

/* フォームバリデーションエラー（PF5） */
.pf-v5-c-form-control[aria-invalid="true"],
.pf-v5-c-form-control:has(input[aria-invalid="true"]) {
  border-color: var(--sk-danger) !important;
}

/* エラーメッセージテキスト（PF5） */
.pf-v5-c-form__helper-text .pf-m-error,
.pf-v5-c-helper-text .pf-m-error .pf-v5-c-helper-text__item-text {
  color: var(--sk-danger) !important;
  font-size: 0.82em !important;
}


/* =============================================================================
   10. 登録リンク（register.ftl の「ログインに戻る」リンク用）
   NOTE: ログインページでは sk-registration-card (section 6b) を使用
   ============================================================================= */

/* メインカード内のフッター領域（空だが余白を消す） */
.pf-v5-c-login__main-footer {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  grid-column: unset !important;
  grid-area: unset !important;
}

/* #kc-info — register.ftl 等での「ログインに戻る」リンク */
#kc-info.login-pf-signup {
  padding: 20px 0 0 0 !important;
  background: transparent !important;
}

#kc-info-wrapper {
  padding: 0 !important;
}

#kc-registration-container {
  text-align: center;
}

#kc-registration span {
  font-size: 0.9em;
  color: var(--sk-text-mid);
  font-family: var(--sk-font);
}

#kc-registration a {
  color: var(--sk-accent);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}

#kc-registration a:hover {
  text-decoration: underline;
}


/* =============================================================================
   11. ヘルパークラス
   ============================================================================= */

/* 登録フォームの説明バナー */
.register-info {
  background: var(--sk-primary-light);
  border-radius: var(--sk-radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.86em;
  color: var(--sk-primary);
  line-height: 1.6;
}

/* 登録フォームのセクション見出し */
.register-section-title {
  font-size: 0.92em;
  font-weight: 700;
  color: var(--sk-text-dark);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--sk-primary-light);
}

/* フォームヒントテキスト */
.help-text {
  font-size: 0.78em;
  color: var(--sk-text-light);
  margin-top: 2px;
  line-height: 1.5;
}

/* 必須項目の注記（登録フォーム上部） */
.register-required-note {
  font-size: 0.78em;
  color: var(--sk-text-light);
  margin-bottom: 14px;
}

.register-required-note .req {
  color: var(--sk-danger);
}

/* 空タイトルを非表示 */
#kc-page-title:empty {
  display: none !important;
}

/* フォームオプション（「すでにアカウントをお持ちの方」等） */
#kc-form-options {
  text-align: center;
  margin-top: 12px;
}

#kc-form-options a {
  color: var(--sk-accent);
  text-decoration: none;
  font-size: 0.88em;
}

#kc-form-options a:hover {
  text-decoration: underline;
}

/* リンク全般 */
a {
  color: var(--sk-accent);
}

a:hover {
  color: var(--sk-accent-light);
}

/* フォーカス可視化（アクセシビリティ） */
a:focus-visible,
input:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sk-accent) !important;
  outline-offset: 2px !important;
}


/* =============================================================================
   12. レスポンシブ
   ============================================================================= */

/* --- 768px以下: タブレット〜スマホ --- */
@media (max-width: 768px) {
  /* ログインエリア: パディング縮小 */
  .pf-v5-c-login {
    padding: 32px 16px !important;
  }

  /* コンテナ: 全幅使用（デスクトップの520px制限を解除） */
  .pf-v5-c-login__container {
    max-width: 100% !important;
  }

  /* ロゴヘッダー: マージン縮小 */
  #kc-header.pf-v5-c-login__header {
    margin-bottom: 20px !important;
  }

  #kc-header-wrapper.pf-v5-c-brand {
    font-size: 1.3em !important;
  }
}

/* --- 480px以下: スマホ --- */
@media (max-width: 480px) {
  .pf-v5-c-login {
    padding: 20px 16px !important;
  }

  .pf-v5-c-login__main {
    padding: 24px 20px !important;
    border-radius: 12px !important;
  }

  #kc-header.pf-v5-c-login__header {
    margin-bottom: 16px !important;
  }

  #kc-header-wrapper.pf-v5-c-brand {
    font-size: 1.2em !important;
  }

  #kc-header-wrapper.pf-v5-c-brand::before {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 0.65em;
  }

  /* ログインカード */
  .sk-login-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .sk-registration-card {
    margin-top: 16px;
    padding: 14px 16px;
  }

  .sk-input {
    padding: 10px 12px;
    font-size: 16px; /* iOS ズーム防止 */
  }
}

/* --- 375px以下: 小型スマホ --- */
@media (max-width: 375px) {
  .pf-v5-c-login__main {
    padding: 20px 16px !important;
  }

  .sk-login-card {
    padding: 20px 16px;
  }

  #kc-header-wrapper.pf-v5-c-brand {
    font-size: 1.1em !important;
  }
}


/* =============================================================================
   13. フッタークレジット（CSS 疑似要素）
   — site-chrome.js が実行された場合は .sk-has-footer で非表示化
   ============================================================================= */
.pf-v5-c-login__container::after {
  content: "Powered by Keycloak \2014  \4E00\822C\793E\56E3\6CD5\4EBA\751F\5F92\4F1A\6D3B\52D5\652F\63F4\5354\4F1A";
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 0.76em;
  color: var(--sk-text-light);
  font-family: var(--sk-font);
}

/* site-chrome.js でフッターが注入された場合、疑似要素を非表示 */
.pf-v5-c-login__container.sk-has-footer::after {
  display: none;
}


/* =============================================================================
   14. サイトクロム（ナビバー＋フッター — site-chrome.js で注入）
   XWiki の custom.css と完全に同一の CSS ルールを使用してヘッダーを統一
   ============================================================================= */

/* --- Bootstrap ベースリセット（Keycloak には Bootstrap が無いため） --- */
.navbar {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  font-family: var(--sk-font);
}
.navbar .container-fluid {
  display: flex;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
}
.navbar .nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;         /* Bootstrap 3 では float:left だが、Keycloak は Bootstrap 非搭載のため flex で代替 */
  align-items: center;
}
.navbar .nav > li {
  list-style: none;
}
.navbar .nav > li > a {
  line-height: 20px;   /* Bootstrap 3: .navbar-nav > li > a { line-height: 20px } */
}
.navbar-header {
  float: left;
}

/* --- 以下、custom.css lines 1900-2199 と同一のルール --- */

/* Navbar container */
.navbar.navbar-default.actionmenu {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: 0 4px 20px rgba(20,26,92,0.3) !important;
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: auto;
  font-size: 14px;    /* XWiki は Bootstrap body(14px) を継承。Keycloak は PF5(16px) なので明示指定 */
  line-height: 1.7;   /* XWiki は body.skin-flamingo { line-height:1.7 } を継承 */
}
.navbar.navbar-default .container-fluid {
  max-width: 1280px;
  margin: 0 auto;
}

/* Logo */
#companylogo .navbar-brand {
  padding: 10px 15px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35em;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -0.02em;
  text-decoration: none !important;
}
#companylogo .navbar-brand img {
  display: none !important;
}
#companylogo .navbar-brand .sr-only {
  display: none !important;
}
#companylogo .navbar-brand::before {
  content: 'S';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  font-size: 0.65em;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
#companylogo .navbar-brand::after {
  content: '生徒会 Wiki';
  color: #fff;
  font-size: 1em;
  font-weight: 700;
}
#companylogo .navbar-brand .logo-text-wiki {
  color: var(--accent-light);
  font-weight: 500;
}
/* JS注入後は::after/::beforeを非表示 */
#companylogo .navbar-brand[style*="--hide-after"]::after {
  display: none;
}
#companylogo .navbar-brand[style*="--hide-after"]::before {
  display: none;
}
/* SVGロゴ（site-chrome.jsで注入） */
.seitokai-logo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.seitokai-logo-icon {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}
.seitokai-logo-typo {
  height: 18px;
  width: auto;
  flex-shrink: 0;
  margin-top: 5px;
}

/* Nav links container */
#xwikimainmenu {
  display: flex;
  align-items: center;
  flex: 1;
}
#xwikimainmenu .navbar-nav.navbar-left {
  display: flex;
  align-items: center;
  margin-left: 16px;
  flex: 1;
}
#xwikimainmenu .nav.navbar-nav > li > a {
  color: rgba(255,255,255,0.75) !important;
  font-weight: 500;
  font-size: 0.88em;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  text-shadow: none;
  white-space: nowrap;
  text-decoration: none;
}
#xwikimainmenu .nav.navbar-nav > li > a:hover,
#xwikimainmenu .nav.navbar-nav > li > a:focus {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* Navigation icons */
.nav-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 5px;
  opacity: 0.7;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.2s;
}
#xwikimainmenu .nav.navbar-nav > li > a:hover .nav-icon { opacity: 1; }

/* Login / Register buttons */
#xwikimainmenu .nav.navbar-nav > li > a#tmRegister {
  background: #ffffff !important;
  color: var(--primary) !important;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 8px 20px;
  margin: 8px 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(92,100,228,0.2);
}
#xwikimainmenu .nav.navbar-nav > li > a#tmRegister:hover {
  background: #f0f1fa !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(92,100,228,0.3);
}
#xwikimainmenu .nav.navbar-nav > li > a#tmLogin {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 8px 20px;
  margin: 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#xwikimainmenu .nav.navbar-nav > li > a#tmLogin:hover {
  background: rgba(255,255,255,0.25) !important;
}
.login-icon {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* --- レイアウト調整（ヘッダー・フッター付き） --- */
.pf-v5-c-login.sk-with-chrome {
  min-height: calc(100vh - 54px - 52px) !important;  /* navbar(54px) + footer(52px) を差し引き */
  align-items: flex-start !important;   /* 垂直中央→上寄せ（ナビ直下の余白を削減） */
  padding-top: 48px !important;         /* 上余白を固定値に */
}

/* --- フッター --- */
.sk-site-footer {
  background: #141a5c;
  padding: 20px 32px;
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  letter-spacing: 0.02em;
  font-family: var(--sk-font);
}

/* --- レスポンシブ（サイトクロム） --- */
@media (max-width: 768px) {
  /* ナビバー: 1行レイアウト（ロゴ + ボタン） */
  header.navbar .container-fluid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    padding: 0 8px;
  }
  .navbar-header {
    flex: 0 0 auto;
  }
  /* #xwikimainmenu: 右寄せ、ボタン類のみ表示 */
  #xwikimainmenu {
    display: flex !important;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
  }
  /* ナビリンク: 非表示（Keycloak にはハンバーガードロワーが無いが、リンクが多すぎるため非表示） */
  #xwikimainmenu .navbar-nav.navbar-left {
    display: none !important;
  }
  /* 右側ボタン（新規登録/ログイン） */
  .navbar-nav.navbar-right {
    margin-left: auto;
    display: flex !important;
    align-items: center;
    gap: 6px;
  }
  .navbar-nav.navbar-right > li {
    flex-shrink: 0;
  }
  #xwikimainmenu .nav.navbar-nav > li > a#tmRegister,
  #xwikimainmenu .nav.navbar-nav > li > a#tmLogin {
    font-size: 0.78em !important;
    padding: 4px 12px !important;
    margin: 4px 0 !important;
  }
  .seitokai-logo-typo {
    height: 14px;
  }
  .seitokai-logo-icon {
    height: 24px;
  }
  .sk-site-footer {
    padding: 16px;
  }
  /* ログインエリア: サイトクロム付きの上余白を縮小（※ 基本ルールの後に記述して cascade で勝つ） */
  .pf-v5-c-login.sk-with-chrome {
    padding-top: 24px !important;
  }
}

@media (max-width: 480px) {
  #companylogo .navbar-brand {
    font-size: 1.15em;
    padding: 8px 10px;
  }
  #companylogo .navbar-brand::before {
    width: 28px;
    height: 28px;
    font-size: 0.6em;
    border-radius: 6px;
  }
  /* ボタンをさらに縮小 */
  #xwikimainmenu .nav.navbar-nav > li > a#tmRegister,
  #xwikimainmenu .nav.navbar-nav > li > a#tmLogin {
    font-size: 0.74em !important;
    padding: 4px 10px !important;
    gap: 4px !important;
  }
  /* ログインエリア: 上余白をさらに縮小 */
  .pf-v5-c-login.sk-with-chrome {
    padding-top: 16px !important;
  }
}

/* --- 360px以下: 極小画面 --- */
@media (max-width: 360px) {
  #companylogo .navbar-brand {
    font-size: 1.05em;
    padding: 8px 6px;
    gap: 6px;
  }
  /* ボタンのアイコンを非表示（テキストのみ） */
  #xwikimainmenu .nav.navbar-nav > li > a#tmRegister .login-icon,
  #xwikimainmenu .nav.navbar-nav > li > a#tmLogin .login-icon {
    display: none;
  }
  #xwikimainmenu .nav.navbar-nav > li > a#tmRegister,
  #xwikimainmenu .nav.navbar-nav > li > a#tmLogin {
    font-size: 0.72em !important;
    padding: 3px 8px !important;
  }
}