.mf-chok-title{
  margin: 6px 0 8px;
  font-weight: 700;
}

.mf-chok-wrap{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:8px 0;
  -webkit-overflow-scrolling: touch;
}

.mf-chok-wrap::-webkit-scrollbar{ display:none; }

.mf-chok-card{
  position:relative;
  width:110px;
  height:180px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 auto;
  text-decoration:none;
  color:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.mf-chok-thumb{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
}

.mf-chok-top{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
}

.mf-chok-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid #1877f2; /* Facebook風リング */
  background:#fff;
}

.mf-chok-bottom{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  z-index:2;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* 下部の読みやすさ（グラデ） */
.mf-chok-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:55%;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  z-index:1;
}

.mf-chok-empty{
  padding:10px 12px;
  color:#666;
  font-size:14px;
}
.mf-chok-uploader{
  padding:12px;
  border:1px solid #e5e5e5;
  border-radius:12px;
}
.mf-chok-uploader-title{ font-weight:700; margin-bottom:8px; }
.mf-chok-uploader-note{ font-size:12px; color:#777; margin-top:8px; }
/* 投稿ページ：サムネUI */
.mf-chok-thumb-tools{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
}
.mf-chok-make-thumb{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  font-weight:700;
}
.mf-chok-thumb-status{ font-size:12px; color:#666; }
.mf-chok-thumb-preview-wrap{ margin:10px 0; }
.mf-chok-thumb-preview{
  display:none;
  width:140px;
  height:auto;
  border-radius:12px;
  border:1px solid #eee;
}

/* モーダル */
.mf-chok-modal{ display:none; position:fixed; inset:0; z-index:99999; }
.mf-chok-modal.is-open{ display:block; }
.mf-chok-modal-bg{ position:absolute; inset:0; background:rgba(0,0,0,0.7); }
.mf-chok-modal-box{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw, 420px);
  background:#000;
  border-radius:14px;
  overflow:hidden;
}
.mf-chok-modal-video{ width:100%; height:auto; display:block; }
.mf-chok-modal-close{
  position:absolute;
  top:16px;
  left:16px;
  right:auto;
  z-index:9999;

  width:42px;
  height:42px;
  border-radius:50%;
  border:none;

  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:20px;
  font-weight:bold;

  display:flex;
  align-items:center;
  justify-content:center;
}

.mf-chok-modal-profile{
  display:block;
  padding:10px 12px;
  text-align:center;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:700;
}
/* FIX: iPhoneのスピーカーUIと×が被る問題 */
.mf-chok-modal-close{
  top: 16px;
  right: 60px; /* 被るなら60px、問題なければ16〜30pxへ */
  z-index: 99999;
}
/* 削除ボタンがタップできない問題（リンクが被ってるのを防ぐ） */
.mf-chok-uploader form {
  position: relative;
  z-index: 9999;
}

.mf-chok-uploader form button {
  position: relative;
  z-index: 10000;
  pointer-events: auto;
}

/* 万一、上に被さってる要素があってもボタンが勝つように */
.mf-chok-uploader .mf-chok-wrap,
.mf-chok-uploader a,
.mf-chok-uploader .mf-chok-card {
  z-index: 1;
}
.mf-chok-uploader form * {
  pointer-events: auto !important;
}