/**************************************************
 * Entity Profile Edit 共通
 **************************************************/
.sm-entity-edit-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  box-sizing: border-box;
  font-size: 14px;
}

/* ヘッダー（プロフィールと同系色） */
.sm-entity-header--edit {
  background: #f5f7fb;
  border-radius: 12px;
  padding: 20px 20px 18px;
  margin-bottom: 20px;
}

.sm-entity-header-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sm-entity-title--edit {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.sm-entity-note {
  margin: 0;
  font-size: 12px;
  color: #666;
}

/**************************************************
 * 編集フォームコンテナ
 **************************************************/
.sm-entity-edit-inner {
  background: #ffffff;
  border-radius: 12px;
  padding: 22px 18px 24px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

/**************************************************
 * エラー表示
 **************************************************/
.sm-entity-error,
.sm-entity-error-list {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff4f4;
  border: 1px solid #f1c0c0;
  color: #a72222;
  font-size: 13px;
}

.sm-entity-error-list ul {
  margin: 0;
  padding-left: 18px;
}

/**************************************************
 * フォームフィールド
 **************************************************/
.sm-entity-edit-form {
  margin: 0;
}

.sm-entity-form-field {
  margin-bottom: 14px;
}

.sm-entity-form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.sm-entity-form-field input[type="text"],
.sm-entity-form-field input[type="url"],
.sm-entity-form-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid #d1d5e4;
  background-color: #ffffff;
}

.sm-entity-form-field textarea {
  line-height: 1.6;
  resize: vertical;
}

/* ヘルプテキスト */
.sm-entity-form-help {
  margin: 4px 0 0;
  font-size: 12px;
  color: #777;
}

/**************************************************
 * アクションボタン
 * （プロフィール側の .sm-entity-btn と揃えて使う）
 **************************************************/
.sm-entity-form-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sm-entity-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

/* プライマリボタン */
.sm-entity-btn--primary {
  background-color: #016fcd;
  color: #ffffff;
  border-color: #016fcd;
  box-shadow: 0 2px 6px rgba(1, 111, 205, 0.25);
}

.sm-entity-btn--primary:hover {
  background-color: #005da9;
  border-color: #005da9;
}

/* アウトラインボタン */
.sm-entity-btn--outline {
  background-color: #ffffff;
  color: #016fcd;
  border-color: #016fcd;
}

.sm-entity-btn--outline:hover {
  background-color: #e8f2ff;
}

/**************************************************
 * スマホ最適化
 **************************************************/
@media (max-width: 768px) {
  .sm-entity-edit-page {
    padding: 16px 12px 32px;
  }

  .sm-entity-header--edit {
    padding: 16px 14px 14px;
  }

  .sm-entity-title--edit {
    font-size: 18px;
  }

  .sm-entity-edit-inner {
    padding: 14px 12px 18px;
  }

  .sm-entity-form-actions {
    flex-direction: column;
  }

  .sm-entity-btn {
    width: 100%;
  }
}

/**************************************************
 * メディア（ロゴ / ギャラリー）フィールド
 **************************************************/
.sm-entity-form-field--logo,
.sm-entity-form-field--gallery {
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px dashed #e1e4f0;
}

/* ロゴプレビュー */
.sm-entity-logo-preview {
  margin-bottom: 8px;
}

.sm-entity-logo-preview img {
  display: block;
  max-width: 140px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

/* ギャラリープレビュー（サムネイルグリッド） */
.sm-entity-gallery-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.sm-entity-gallery-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  background: #f3f4f8;
}

.sm-entity-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ファイル入力の見た目を少し整える（共通） */
.sm-entity-form-field input[type="file"] {
  font-size: 12px;
  margin-top: 4px;
}

/* ラベルとプレビューの間の余白を少し詰める */
.sm-entity-form-field--logo label,
.sm-entity-form-field--gallery label {
  margin-bottom: 2px;
}

/**************************************************
 * メディア削除トグル（ロゴ / ギャラリー共通）
 **************************************************/
.sm-entity-media-delete {
  margin-top: 4px;
}

/* 汎用チェックボックスラベル（ロゴ削除に使用） */
.sm-entity-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  user-select: none;
}

.sm-entity-checkbox input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
}

.sm-entity-checkbox-label {
  line-height: 1.4;
}

/**************************************************
 * ギャラリー削除UI
 **************************************************/
.sm-entity-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #555;
}

/* 既存の .sm-entity-gallery-thumb を活かして削除ラベルを下に */
.sm-entity-gallery-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.sm-entity-gallery-delete input[type="checkbox"] {
  margin: 0;
  width: 13px;
  height: 13px;
}

/* ちょっとだけホバー時に強調 */
.sm-entity-gallery-item:hover .sm-entity-gallery-thumb {
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18);
}

.sm-entity-gallery-item:hover .sm-entity-gallery-delete span {
  color: #016fcd;
}

/**************************************************
 * スマホ向け微調整（削除ラベルが詰まりすぎないように）
 **************************************************/
@media (max-width: 768px) {
  .sm-entity-gallery-item {
    font-size: 12px;
  }

  .sm-entity-gallery-delete {
    gap: 6px;
  }
}

/* 活動地域グループ */
.sm-entity-form-group {
  margin-top: 20px;
  padding: 16px 14px;
  border-radius: 12px;
  background: #f9fafb;
}

.sm-entity-form-group-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* 上段：都道府県 + 市区町村 */
.sm-entity-form-row--area-top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* PCでは横並び、モバイルでは縦積み */
.sm-entity-form-field--prefecture,
.sm-entity-form-field--city {
  flex: 1 1 160px;
}

/* 下段：住所テキストエリア */
.sm-entity-form-field--address {
  margin-top: 8px;
}

/* セレクトボックス（種目など） */
.sm-entity-form-field select {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 7px 32px 7px 8px; /* 右側は矢印分ちょっと広め */
  border-radius: 6px;
  border: 1px solid #d1d5e4;
  background-color: #ffffff;
  /* 各ブラウザでネイティブのスタイルを少し抑える */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 簡易的な矢印アイコン（CSSのみ） */
  background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%),
                    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: right 12px center, right 8px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* フォーカス時の枠線強調（inputと揃えるなら任意で追加） */
.sm-entity-form-field select:focus,
.sm-entity-form-field input[type="text"]:focus,
.sm-entity-form-field input[type="url"]:focus,
.sm-entity-form-field textarea:focus {
  outline: none;
  border-color: #016fcd;
  box-shadow: 0 0 0 1px rgba(1, 111, 205, 0.08);
}

/* PCのときだけ、種目プルダウンを少し細くする */
@media (min-width: 769px) {
  .sm-entity-form-field--sport,
  .sm-entity-form-field--entity-type {
    max-width: 260px;  /* 好みで 220〜320px くらいに調整可 */
  }
}

/* 対象年齢グループ */
.sm-entity-form-group--age {
  margin-top: 20px;
}

/* グループ全体（未就学 / 小学生 / 中学生 ...） */
.sm-entity-age-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 各グループのラベル（例：小学生） */
.sm-entity-age-group-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}

/* 各グループ内のチェックボックス横並び */
.sm-entity-age-group-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 対象年齢用のチェックボックス（既存 .sm-entity-checkbox を活かしつつ微調整） */
.sm-entity-checkbox--age {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #d1d5e4;
  background: #ffffff;
}

.sm-entity-checkbox--age input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.sm-entity-checkbox--age:hover {
  border-color: #016fcd;
}

/* モバイルでも詰まりすぎないように */
@media (max-width: 768px) {
  .sm-entity-age-group-options {
    gap: 6px;
  }
}