/* ============================================================
 * ks_legacy_compat.css (v13.1 / OPS-H3 注記 2026-05-27)
 * 旧テーマ (style.css) のクラス命名で書かれた旧ページが
 * 新テーマ (monsterclub.css) の上に乗っても破綻しないようにする互換層。
 *
 * 対象ページ: settings.php / contact.php / notifications.php /
 *             my_contacts.php / settings_history.php / settings_reset.php /
 *             presets.php / results.php
 *
 * --------------------------------------------------------------
 * OPS-H3 (v18, 2026-05-27): 全ページ読込の影響範囲調査
 *   - .page-content / .page-title : contact.php, notifications.php,
 *     results.php, my_contacts.php, presets.php (410化対象),
 *     settings.php (410化対象), settings_history.php (410化対象),
 *     settings_reset.php (410化対象), admin/news-edit.php,
 *     admin/user-detail.php, admin/users.php で使用中。
 *   - .role-premium / .role-regular / .role-admin :
 *     admin/users.php, admin/user-detail.php 等で使用中。
 *   - .form-common : 各種フォームページ (login.php 等) で間接利用。
 *
 *   結論: 使用箇所が残っているため header からの link を外せない。
 *   TODO: 上記ファイルを .ks-* 系の新クラスに置き換え後、
 *         本ファイルと <link rel="stylesheet" ... ks_legacy_compat.css>
 *         を削除する。
 *
 *   410 化済みファイル (settings.php / presets.php / settings_history.php /
 *   settings_reset.php) を実際に削除する場合は本ファイル更新不要。
 * ============================================================ */

/* 旧 .page-content → ks-wrap 相当のレスポンシブ幅へ */
.page-content {
  max-width: var(--ks-max-width, 1100px);
  margin: 16px auto 80px;
  padding: 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ks-text, #1f2a23);
}

/* 旧 .page-title → セクション見出し相当 */
.page-title {
  font-family: var(--ks-font-serif, serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ks-primary, #8b0000);
  margin: 4px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ks-border-soft, #e6efe9);
  letter-spacing: 0.02em;
}

/* 旧 .mypage-section / .settings-* を ks_section 風カードに */
.mypage-section {
  background: #ffffff;
  border: 1px solid var(--ks-border-soft, #e6efe9);
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.mypage-section-title {
  background: linear-gradient(180deg, #fafdfb 0%, #ffffff 100%);
  padding: 12px 14px 10px;
  font-family: var(--ks-font-serif, serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ks-primary, #8b0000);
  border-bottom: 1px solid var(--ks-border-soft, #e6efe9);
  letter-spacing: 0.02em;
}

/* 旧変数の代理を monsterclub.css の値で */
.page-content,
.page-content :where(*) {
  --accent-gold: #c8a14a;
  --accent-gold-bright: #c8a14a;
  --accent-blue: #4a8fff;
  --text-muted: #6b7a72;
  --text: var(--ks-text, #1f2a23);
  --border: var(--ks-border-soft, #e6efe9);
  --bg: var(--ks-surface, #ffffff);
  --bg-card: var(--ks-surface, #ffffff);
  --font-display: var(--ks-font-serif, serif);
  --font-mono: var(--ks-font-mono, ui-monospace, monospace);
}

/* 旧 .settings-radio-row */
.settings-radio-row,
.settings-toggle-row,
.settings-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--ks-border-soft, #e6efe9);
  font-size: 13px;
  color: var(--ks-text, #1f2a23);
}
.settings-radio-row:first-of-type,
.settings-toggle-row:first-of-type,
.settings-select-row:first-of-type { border-top: none; }
.settings-radio-row input[type="radio"],
.settings-toggle-row input[type="checkbox"] {
  accent-color: var(--ks-primary, #8b0000);
}
.settings-radio-mark { display: none; }   /* 旧の独自ラジオ → ネイティブラジオ表示 */
.settings-toggle-switch { display: none; }
.settings-radio-label,
.settings-toggle-label,
.settings-select-label {
  flex: 1;
  color: var(--ks-text, #1f2a23);
}
.settings-radio-group { padding: 0; }
.settings-select {
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--ks-border, #d3e4d8);
  border-radius: 6px;
  background: #fff;
  color: var(--ks-text, #1f2a23);
  font-size: 13px;
}

/* 旧 .btn / form-common ボタン互換 */
.page-content button,
.page-content input[type="submit"]:not(.ks-btn-primary):not(.ks-btn-secondary),
.page-content .btn {
  font-family: inherit;
}
.page-content button[type="submit"]:not(.btn-sm) {
  /* デフォルト送信ボタンを保存風に */
  background: linear-gradient(180deg, #8b0000 0%, #5e0000 100%);
  color: #ffffff;
  border: 0;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
}

/* フォーム共通 (contact, change-* 等) */
.form-common, .form-common input, .form-common textarea, .form-common select {
  font-family: inherit;
  color: var(--ks-text, #1f2a23);
}
.form-common input[type="text"],
.form-common input[type="email"],
.form-common input[type="password"],
.form-common textarea,
.form-common select,
.page-content input[type="text"]:not(.ks-input):not(.ks-date-input),
.page-content input[type="email"],
.page-content input[type="password"],
.page-content textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ks-border, #d3e4d8);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--ks-text, #1f2a23);
}
.page-content textarea { min-height: 120px; line-height: 1.6; }
.page-content input:focus,
.page-content textarea:focus,
.page-content select:focus {
  outline: 2px solid var(--ks-accent, #c8a14a);
  outline-offset: 1px;
  border-color: var(--ks-primary, #8b0000);
}

/* テーブル類 (my_contacts, settings_history 等) */
.page-content table:not(.ksp-table):not(.admin-table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.page-content table:not(.ksp-table):not(.admin-table) th {
  text-align: left;
  background: #fafdfb;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ks-border-soft, #e6efe9);
  color: var(--ks-text-mid, #4a5a51);
  font-weight: 600;
  font-size: 12px;
}
.page-content table:not(.ksp-table):not(.admin-table) td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ks-border-soft, #e6efe9);
}

/* 旧 .role-badge / status バッジ簡易対応 */
.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  margin-right: 6px;
}
.role-premium { background: linear-gradient(135deg, #c8a14a, #9a7a35); }
.role-regular { background: #94a3b8; }
.role-admin   { background: #8b0000; }

/* レスポンシブ調整 */
@media (max-width: 720px) {
  .page-content { padding: 0 14px; margin-bottom: 80px; }
  .page-title { font-size: 18px; }
}

/* 古い PREMIU 風 .header-* / .footer-nav-inner 等は今回 header/footer が新テーマに
   置き換わったので使われないが、誤って残った場合は非表示にする */
.header-status,
#header,
#footer-nav,
#app .legacy-only { display: none !important; }