@charset "UTF-8";
/* ============================================================
   SNSモード「ゆるハブ」専用スタイル
   SOFT HUB - soft-hub.jp
   テーマ：ゆるフワッと気軽に
   ============================================================ */

:root {
  --sns-bg:          #0b0e14;
  --sns-card:        #141a24;
  --sns-card-hover:  #18202c;
  --sns-sub:         #1b2330;
  --sns-border:      #242e3d;
  --sns-border-soft: #1d2634;
  --sns-text:        #ffffff;
  --sns-text-sub:    #9aa7b8;
  --sns-text-muted:  #6c7a8c;
  --sns-accent:      #d9f24e;   /* ネオンライム（サイト既存のneon-yellow寄り） */
  --sns-accent-dark: #b6cc2e;
  --sns-tag-bg:      #1b2a3a;
  --sns-tag-fg:      #7fc0f0;
  --sns-radius:      14px;
  --sns-radius-sm:   10px;
}

/* ============================================================
   ページ全体
   ============================================================ */
.sns-page {
  background: var(--sns-bg);
  padding-bottom: 60px;
}
/* 幅・余白は event.php など他ページ（.container / .main-content）と完全に揃える。
   ここで max-width / padding を上書きしないこと。 */
.sns-page .breadcrumb {
  font-size: 0.8rem;
  color: var(--sns-text-muted);
}
.sns-page .breadcrumb a { color: var(--sns-text-sub); text-decoration: none; }
.sns-page .breadcrumb a:hover { color: var(--sns-accent); }
.sns-page .bc-sep { margin: 0 6px; color: var(--sns-text-muted); }

/* ============================================================
   ページヒーロー
   ============================================================ */
.sns-hero {
  background: linear-gradient(135deg, rgba(217,242,78,0.10), rgba(217,242,78,0.02) 60%, transparent);
  border: 1px solid var(--sns-border);
  border-radius: var(--sns-radius);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.sns-hero-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}
.sns-hero-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--sns-text);
  margin: 0;
  letter-spacing: 0.02em;
}
.sns-hero-emoji { font-size: 1.35rem; }
.sns-hero-lead {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sns-accent);
  line-height: 1.5;
}
.sns-hero-desc {
  margin: 0;
  font-size: 0.86rem;
  color: var(--sns-text-sub);
  line-height: 1.8;
}
.sns-br-sp { display: none; }

/* ============================================================
   フラッシュ・アラート
   ============================================================ */
.sns-flash {
  background: rgba(217,242,78,0.12);
  border: 1px solid rgba(217,242,78,0.4);
  color: var(--sns-accent);
  border-radius: var(--sns-radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  animation: snsFadeIn 0.3s ease;
}
.sns-alert {
  background: rgba(232,64,64,0.10);
  border: 1px solid rgba(232,64,64,0.4);
  color: #ff8c8c;
  border-radius: var(--sns-radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 0.88rem;
}
.sns-alert ul { margin: 6px 0 0; padding-left: 20px; }
.sns-alert li { margin-top: 3px; }

@keyframes snsFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   アバター（共通）
   ============================================================ */
.sns-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  user-select: none;
}

/* ============================================================
   投稿フォーム（コンポーザー）
   ============================================================ */
.sns-composer {
  background: var(--sns-card);
  border: 1px solid var(--sns-border);
  border-radius: var(--sns-radius);
  padding: 16px;
  margin-bottom: 18px;
}
/* ---- 名前とアイコンの設定（常時表示） ---- */
.sns-identity {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--sns-border-soft);
}
.sns-identity-avatar {
  position: relative;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
}
.sns-identity-avatar:focus-visible { outline: 2px solid var(--sns-accent); outline-offset: 3px; }
.sns-identity-pen {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sns-accent);
  color: #0b0e14;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sns-card, #141b26);
  line-height: 1;
}
.sns-identity-body { flex: 1; min-width: 0; }
.sns-identity-namewrap { display: block; }
.sns-identity-label {
  display: block;
  font-size: 0.74rem;
  color: var(--sns-text-sub);
  margin-bottom: 4px;
  font-weight: 700;
}
.sns-identity-hint {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--sns-text-muted);
  line-height: 1.6;
}

/* ---- アイコン選択パネル ---- */
.sns-avatar-picker[hidden] { display: none !important; }
.sns-avatar-picker {
  display: block;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--sns-sub);
  border: 1px solid var(--sns-border-soft);
  border-radius: var(--sns-radius-sm);
}
.sns-avatar-picker-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sns-avatar-picker-row + .sns-avatar-picker-row { margin-top: 10px; }
.sns-avatar-picker-label {
  flex-shrink: 0;
  width: 34px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--sns-text-sub);
  padding-top: 7px;
}
.sns-avatar-colors,
.sns-avatar-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.sns-avatar-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s;
}
.sns-avatar-color:hover { transform: scale(1.12); }
.sns-avatar-color.is-selected {
  border-color: var(--sns-accent);
  box-shadow: 0 0 0 2px rgba(217,242,78,0.25);
}
.sns-avatar-icon {
  min-width: 32px;
  height: 32px;
  padding: 0 7px;
  border-radius: 8px;
  background: #0f1621;
  border: 1px solid var(--sns-border);
  color: var(--sns-text-sub);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.sns-avatar-icon:hover { background: #1b2533; transform: scale(1.06); }
.sns-avatar-icon.is-selected {
  border-color: var(--sns-accent);
  background: rgba(217,242,78,0.12);
  color: var(--sns-text);
}
.sns-avatar-icon[data-icon=""] { font-size: 0.72rem; font-weight: 700; }

/* 画像アイコンを使用中は色・絵柄を薄く */
.sns-avatar-colors.is-dimmed,
.sns-avatar-icons.is-dimmed { opacity: 0.38; }

/* ---- アイコン画像：ドロップゾーン ---- */
.sns-avatar-picker-row--img { align-items: stretch; }
.sns-avatar-imgarea { flex: 1; min-width: 0; }
.sns-avatar-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 16px 14px;
  border: 2px dashed var(--sns-border);
  border-radius: 10px;
  background: #0f1621;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, background 0.18s;
}
.sns-avatar-drop:hover,
.sns-avatar-drop:focus-visible {
  border-color: rgba(217,242,78,0.55);
  background: #131d2a;
  outline: none;
}
.sns-avatar-drop.is-dragover {
  border-color: var(--sns-accent);
  background: rgba(217,242,78,0.08);
}
.sns-avatar-drop.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.sns-avatar-drop i {
  font-size: 1.25rem;
  color: var(--sns-accent);
  margin-bottom: 2px;
}
.sns-avatar-drop-main {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--sns-text);
}
.sns-avatar-drop-sub {
  font-size: 0.7rem;
  color: var(--sns-text-muted);
  line-height: 1.5;
}

/* 設定中の画像 */
.sns-avatar-current[hidden] { display: none !important; }
.sns-avatar-current {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 8px 10px;
  background: rgba(217,242,78,0.07);
  border: 1px solid rgba(217,242,78,0.28);
  border-radius: 9px;
}
.sns-avatar-current-thumb {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #0f1621;
  display: block;
}
.sns-avatar-current-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sns-avatar-current-txt {
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--sns-text);
}
.sns-avatar-current-clear {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--sns-border);
  border-radius: 7px;
  color: var(--sns-text-sub);
  font-size: 0.72rem;
  padding: 5px 9px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.sns-avatar-current-clear:hover {
  background: rgba(255,90,122,0.12);
  border-color: rgba(255,90,122,0.5);
  color: #ff8fa3;
}

/* 区切り */
.sns-avatar-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 11px;
  font-size: 0.71rem;
  color: var(--sns-text-muted);
}
.sns-avatar-or::before,
.sns-avatar-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sns-border-soft);
}

/* 画像アバター本体（タイムライン・コメントでも使用） */
.sns-avatar--img {
  overflow: hidden;
  background: #0f1621;
  padding: 0;
}
.sns-avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sns-composer-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
/* 入力欄と「画像を追加」をひとつの枠にまとめる
   （ボタンは枠内の右下。文字とは重ならない） */
.sns-composer-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--sns-sub);
  border: 1px solid var(--sns-border-soft);
  border-radius: var(--sns-radius-sm);
  transition: border-color 0.2s, background 0.2s;
}
/* 入力中は枠全体をハイライト */
.sns-composer-field:focus-within {
  border-color: rgba(217,242,78,0.5);
  background: #1e2734;
}
.sns-composer-input {
  width: 100%;
  min-width: 0;
  /* 枠は親側で描くので入力欄自体は透明に */
  background: transparent;
  border: none;
  color: var(--sns-text);
  font-size: 0.95rem;
  line-height: 1.7;
  padding: 10px 14px 2px;
  /* 右下の斜めのつまみ（リサイズハンドル）を消す */
  resize: none;
  /* rows属性による高さを上書きして低くする。
     2行ぶん（25.84px × 2 ≒ 52px）＋上下パディング が収まる高さを最小値とし、
     入力が増えたぶんだけJS側で下に伸ばす（スクロールは発生させない） */
  height: 64px;
  min-height: 64px;
  /* スクロール禁止（バーも出さないし、ホイールでも動かない） */
  overflow: hidden;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 旧Edge/IE */
  font-family: inherit;
  box-sizing: border-box;
}
/* WebKit系（Chrome/Edge/Safari）のスクロールバーを非表示に */
.sns-composer-input::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* WebKit系のリサイズつまみも明示的に消す */
.sns-composer-input::-webkit-resizer { display: none; }
/* 枠内の右下（旧・リサイズつまみの位置）に置くボタン */
.sns-tool--inset {
  align-self: flex-end;
  margin: 0 4px 4px 0;
  font-size: 0.88rem;
  padding: 6px 9px;
}
.sns-tool--inset:hover {
  background: rgba(217,242,78,0.12);
  color: var(--sns-accent);
}
.sns-tool--inset i { font-size: 1rem; }
.sns-composer-input::placeholder { color: var(--sns-text-muted); }
.sns-composer-input:focus { outline: none; }

/* タグ（常時表示） */
.sns-composer-details {
  display: block;
  margin-top: 10px;
  padding: 14px;
  background: var(--sns-sub);
  border: 1px solid var(--sns-border-soft);
  border-radius: var(--sns-radius-sm);
}
.sns-field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sns-field-row--2 { grid-template-columns: repeat(2, 1fr); }
.sns-field { display: block; }
/* 折りたたみ内で単独表示されるときは上の余白を詰める */
.sns-composer-details > .sns-field--full:first-child { margin-top: 0; }
.sns-field--full { margin-top: 10px; }
.sns-field-label {
  display: block;
  font-size: 0.74rem;
  color: var(--sns-text-sub);
  margin-bottom: 4px;
  font-weight: 700;
}
.sns-field-input {
  width: 100%;
  background: #0f1621;
  border: 1px solid var(--sns-border);
  border-radius: 8px;
  color: var(--sns-text);
  font-size: 0.88rem;
  padding: 8px 10px;
  font-family: inherit;
  box-sizing: border-box;
}
.sns-field-input:focus {
  outline: none;
  border-color: rgba(217,242,78,0.5);
}
.sns-field-input::placeholder { color: var(--sns-text-muted); }
select.sns-field-input { cursor: pointer; }

/* 画像プレビュー */
.sns-image-preview {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sns-image-preview.has-items { display: flex; }
.sns-image-preview-item {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--sns-border);
}
.sns-image-preview-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sns-image-preview-remove {
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sns-image-preview-remove:hover { background: #e84040; }

/* ----------------------------------------------------------
   選んだ写真をドラッグで並べ替える（投稿フォーム）
   消して入れ直さなくても、つまんで動かせば順番を変えられる。
   ---------------------------------------------------------- */
.sns-image-preview-item.is-sortable {
  cursor: grab;
  overflow: visible;        /* つまんだ時の枠線が切れないように */
  touch-action: none;       /* 指でつまむ操作をページのスクロールに取られない */
  transition: transform 0.15s, box-shadow 0.15s;
}
.sns-image-preview-item.is-sortable img,
.sns-image-preview-item.is-sortable video {
  pointer-events: none;     /* 画像ごとつまめるように */
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 8px;
}
.sns-image-preview-item.is-dragging {
  opacity: 0.35;
  cursor: grabbing;
}
/* 落とす先になっている枠 */
.sns-image-preview-item.is-dropzone {
  outline: 2px solid var(--sns-accent);
  outline-offset: 1px;
  transform: scale(1.06);
}
/* 何番目かの番号（1 2 3 4） */
.sns-image-preview-order {
  position: absolute;
  left: 3px;
  bottom: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
}
/* 「ドラッグで並べ替えできます」の案内 */
.sns-image-preview-hint {
  width: 100%;
  margin: 2px 0 0;
  font-size: 0.73rem;
  color: var(--sns-text-sub);
  display: flex;
  align-items: center;
  gap: 5px;
}
/* 指でつまんで運んでいる最中の分身 */
.sns-image-drag-ghost {
  position: fixed;
  z-index: 9999;
  margin: 0;
  opacity: 0.8;
  pointer-events: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.sns-image-drag-ghost img,
.sns-image-drag-ghost video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* エリア・カテゴリ＋投稿ボタン（タグの下／同じ行） */
.sns-meta-row {
  display: flex;
  align-items: center;
  gap: 8px 28px;
  margin-top: 12px;
  flex-wrap: wrap;
}
/* 投稿ボタンだけ右端へ寄せる */
.sns-meta-row .sns-submit { margin-left: auto; }

.sns-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--sns-text-sub);
  font-size: 0.92rem;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}
.sns-tool:hover {
  background: var(--sns-sub);
  color: var(--sns-text);
}
.sns-tool.is-active {
  background: rgba(217,242,78,0.12);
  color: var(--sns-accent);
}
.sns-tool i { font-size: 1.05rem; }

/* タグの下に並ぶエリア・カテゴリ */
.sns-inline-field {
  display: inline-flex;
  align-items: center;
  /* アイコン・ラベル・プルダウンの間を広めに */
  gap: 12px;
  padding: 2px;
}
/* アイコンは「画像を追加」と同じ見た目に揃える */
.sns-inline-field > i {
  font-size: 1.05rem;
  color: var(--sns-text-sub);
  line-height: 1;
}
.sns-inline-label {
  font-size: 0.92rem;
  color: var(--sns-text-sub);
  white-space: nowrap;
}
.sns-inline-select {
  background: #0f1621;
  border: 1px solid var(--sns-border);
  border-radius: 7px;
  color: var(--sns-text);
  font-size: 0.88rem;
  padding: 7px 9px;
  font-family: inherit;
  cursor: pointer;
  /* 内容に合わせて最小限の幅にする（広がりすぎないよう上限も指定） */
  width: auto;
  max-width: 150px;
  box-sizing: border-box;
}
.sns-inline-select:focus {
  outline: none;
  border-color: rgba(217,242,78,0.5);
}

.sns-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sns-accent);
  color: #0b0e14;
  border: none;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 10px 22px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
}
.sns-submit:hover {
  background: #e4ff5c;
  box-shadow: 0 4px 16px rgba(217,242,78,0.3);
  transform: translateY(-1px);
}
.sns-submit:active { transform: translateY(0); }
.sns-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   フィルタータブ
   ============================================================ */
.sns-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.sns-tabs::-webkit-scrollbar { height: 4px; }
.sns-tabs::-webkit-scrollbar-thumb { background: var(--sns-border); border-radius: 2px; }
.sns-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sns-sub);
  border: 1px solid var(--sns-border-soft);
  border-radius: 999px;
  color: var(--sns-text-sub);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sns-tab:hover {
  background: var(--sns-card-hover);
  color: var(--sns-text);
}
.sns-tab.active {
  background: var(--sns-accent);
  border-color: var(--sns-accent);
  color: #0b0e14;
}
/* 絞り込み表示 */
.sns-filter-note {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--sns-sub);
  border: 1px solid var(--sns-border-soft);
  border-radius: var(--sns-radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--sns-text-sub);
}
.sns-filter-note strong { color: var(--sns-accent); }
.sns-filter-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--sns-text-muted);
}
.sns-filter-clear {
  color: var(--sns-text-sub);
  text-decoration: none;
  font-size: 0.8rem;
  padding: 4px 10px;
  border: 1px solid var(--sns-border);
  border-radius: 999px;
  transition: all 0.2s;
}
.sns-filter-clear:hover {
  color: #ff8c8c;
  border-color: rgba(232,64,64,0.5);
}

/* ============================================================
   レイアウト
   ============================================================ */
.sns-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
.sns-timeline { min-width: 0; }
/* カテゴリ切替中（Ajax読み込み中）の表示 */
.sns-timeline.is-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* ============================================================
   投稿カード
   ============================================================ */
.sns-card {
  background: var(--sns-card);
  border: 1px solid var(--sns-border);
  border-radius: var(--sns-radius);
  padding: 16px;
  margin-bottom: 14px;
  transition: border-color 0.2s;
}
.sns-card:hover { border-color: #2e3a4b; }

/* カードヘッダー */
.sns-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.sns-card-meta { flex: 1; min-width: 0; }
.sns-card-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.sns-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sns-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 固定幅をやめて、カードの余白いっぱいまで名前を表示する */
  min-width: 0;
  max-width: 100%;
}
.sns-card-sub {
  display: flex;
  align-items: center;
  font-size: 0.76rem;
  color: var(--sns-text-muted);
  margin-top: 2px;
}
.sns-card-dot { margin: 0 2px; }
.sns-card-cat {
  display: inline-block;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sns-card-menu {
  background: transparent;
  border: none;
  color: var(--sns-text-muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.sns-card-menu:hover {
  background: var(--sns-sub);
  color: var(--sns-text);
}

/* ===== 三点リーダーのメニュー（編集・削除） ===== */
.sns-card-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.sns-menu-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 150px;
  padding: 6px;
  background: #1b2430;
  border: 1px solid var(--sns-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sns-menu-pop[hidden] { display: none; }
.sns-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--sns-text);
  font-size: 0.88rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sns-menu-item i { width: 14px; text-align: center; font-size: 0.92rem; }
.sns-menu-item:hover {
  background: rgba(217,242,78,0.12);
  color: var(--sns-accent);
}
.sns-menu-item--danger { color: #ff8a8a; }
.sns-menu-item--danger:hover {
  background: rgba(255,90,90,0.14);
  color: #ff6b6b;
}

/* 編集中は本文を隠す（.sns-card-body は display:flex のため
   hidden 属性だけでは消えない。明示的に打ち消す） */
.sns-card-body[hidden] { display: none !important; }

/* ===== 投稿の編集フォーム ===== */
.sns-edit-form {
  margin-top: 4px;
  padding: 14px;
  background: var(--sns-sub);
  border: 1px solid var(--sns-border-soft);
  border-radius: var(--sns-radius-sm);
}
.sns-edit-form[hidden] { display: none; }
.sns-edit-label {
  display: block;
  font-size: 0.82rem;
  color: var(--sns-text-sub);
  margin-bottom: 5px;
}
.sns-edit-input {
  width: 100%;
  box-sizing: border-box;
  background: #0f1621;
  border: 1px solid var(--sns-border);
  border-radius: 8px;
  color: var(--sns-text);
  font-size: 0.92rem;
  line-height: 1.7;
  padding: 10px 12px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 12px;
}
.sns-edit-input--one { resize: none; }
.sns-edit-input:focus {
  outline: none;
  border-color: rgba(217,242,78,0.5);
}
.sns-edit-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sns-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 160px;
  min-width: 0;
}
.sns-edit-field .sns-edit-label { margin-bottom: 0; }
.sns-edit-select {
  background: #0f1621;
  border: 1px solid var(--sns-border);
  border-radius: 8px;
  color: var(--sns-text);
  font-size: 0.88rem;
  padding: 9px 10px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.sns-edit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.sns-edit-cancel {
  background: transparent;
  border: 1px solid var(--sns-border);
  border-radius: 999px;
  color: var(--sns-text-sub);
  font-size: 0.86rem;
  padding: 9px 18px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sns-edit-cancel:hover {
  background: var(--sns-border);
  color: var(--sns-text);
}
.sns-edit-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sns-accent);
  border: none;
  border-radius: 999px;
  color: #10210a;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 22px;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.2s, opacity 0.2s;
}
.sns-edit-save:hover { filter: brightness(1.08); }
.sns-edit-save:disabled { opacity: 0.6; cursor: default; }
.sns-edit-error {
  margin: 10px 0 0;
  color: #ff8a8a;
  font-size: 0.84rem;
}
.sns-edit-error[hidden] { display: none; }

/* 本文＋画像（イメージ画像どおり2カラム） */
.sns-card-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sns-card-text { flex: 1; min-width: 0; }
.sns-card-content {
  font-size: 0.93rem;
  line-height: 1.85;
  color: var(--sns-text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* 長いURLも省略せず全部見せる（枠からはみ出さないよう折り返す） */
.sns-card-content a.auto-link {
  color: var(--sns-tag-fg);
  word-break: break-all;
  overflow-wrap: anywhere;
}
.sns-inline-tag {
  color: var(--sns-tag-fg);
  text-decoration: none;
}
.sns-inline-tag:hover { text-decoration: underline; }

.sns-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.sns-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sns-tag-bg);
  color: var(--sns-tag-fg);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.sns-tag:hover {
  background: #25384c;
  color: #a8d8ff;
}
/* 画像（右側） */
.sns-card-images {
  width: 260px;
  flex-shrink: 0;
  display: grid;
  gap: 4px;
}
.sns-card-images.count-1 {
  grid-template-columns: 1fr;
  /* 1枚だけのときは、その画像の高さで見せるぶん少し広めにとる */
  width: 320px;
}
.sns-card-images.count-2 { grid-template-columns: 1fr 1fr; }
.sns-card-images.count-3,
.sns-card-images.count-4 { grid-template-columns: 1fr 1fr; }
.sns-card-image {
  display: block;
  border-radius: 9px;
  overflow: hidden;
  background: var(--sns-sub);
  aspect-ratio: 16 / 10;
  cursor: zoom-in;
}
.sns-card-images.count-2 .sns-card-image,
.sns-card-images.count-3 .sns-card-image,
.sns-card-images.count-4 .sns-card-image { aspect-ratio: 1 / 1; }
.sns-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.sns-card-image:hover img { transform: scale(1.04); }

/* --- 1枚だけのときは、その画像の高さをそのまま使う ---
   枠の比率も高さの上限も設けず、画像の縦横比どおりに表示する。
   こちらで切ったり縮めたりの調整は一切しない。 */
.sns-card-images.count-1 .sns-card-image {
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  cursor: zoom-in;
  background: var(--sns-sub);
  display: block;
}
.sns-card-images.count-1 .sns-card-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: fill;   /* 画像そのままの形で表示する（切らない・縮めない） */
}
/* 1本だけの動画も同じ考え方 */
.sns-card-images.count-1 .sns-card-video {
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  display: block;
}
.sns-card-images.count-1 .sns-card-video video {
  height: auto;
  max-height: none;
  object-fit: contain;   /* 動画は切らずに全体を見せる */
}

/* カードフッター（リアクション） */
.sns-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sns-border-soft);
  flex-wrap: wrap;
}
.sns-reactions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sns-react {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sns-sub);
  border: 1px solid var(--sns-border-soft);
  border-radius: 999px;
  color: var(--sns-text);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  line-height: 1;
}
.sns-react:hover {
  background: var(--sns-card-hover);
  border-color: #33404f;
  transform: translateY(-1px);
}
.sns-react:active { transform: translateY(0) scale(0.96); }
.sns-react.active {
  background: rgba(217,242,78,0.14);
  border-color: rgba(217,242,78,0.5);
}
.sns-react.active .sns-react-count { color: var(--sns-accent); }
.sns-react-emoji { font-size: 1rem; line-height: 1; }
.sns-react-count {
  font-size: 0.8rem;
  min-width: 8px;
  color: var(--sns-text);
}
.sns-react.zero .sns-react-count { color: var(--sns-text-muted); }
/* リアクション時のポップアニメーション */
.sns-react.just-reacted .sns-react-emoji {
  animation: snsPop 0.4s cubic-bezier(.3,1.6,.5,1);
}
@keyframes snsPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* コメント・保存 */
.sns-card-tools {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.sns-card-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--sns-text-sub);
  font-size: 0.82rem;
  padding: 7px 11px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.sns-card-tool:hover {
  background: var(--sns-sub);
  color: var(--sns-text);
}
.sns-card-tool.is-open {
  background: var(--sns-sub);
  color: var(--sns-text);
}

/* ============================================================
   コメントエリア
   ============================================================ */
.sns-comments {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--sns-border-soft);
  border-radius: var(--sns-radius-sm);
}
.sns-comment-list { display: block; }
.sns-comment {
  display: flex;
  gap: 9px;
  padding: 7px 0;
  align-items: flex-start;
}
.sns-comment.is-hidden { display: none; }
.sns-comment-main { flex: 1; min-width: 0; }
.sns-comment-head {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--sns-text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.sns-comment-name {
  font-weight: 700;
  margin-right: 8px;
  color: var(--sns-text);
}
.sns-comment-text { color: var(--sns-text-sub); }
.sns-comment-text a.auto-link,
.sns-comment-text .sns-inline-tag { color: var(--sns-tag-fg); }
.sns-comment-text a.auto-link { word-break: break-all; overflow-wrap: anywhere; }
.sns-comment-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 3px;
  font-size: 0.74rem;
  color: var(--sns-text-muted);
}
.sns-comment-act {
  background: transparent;
  border: none;
  color: var(--sns-text-muted);
  font-size: 0.74rem;
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
  transition: color 0.2s;
}
.sns-comment-act:hover { color: var(--sns-text); }
.sns-comment-act.liked { color: #ff5a7a; font-weight: 700; }
.sns-clike-count { margin-left: 3px; }

.sns-comment-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--sns-text-sub);
  font-size: 0.79rem;
  cursor: pointer;
  padding: 6px 2px;
  font-family: inherit;
  transition: color 0.2s;
}
.sns-comment-more:hover { color: var(--sns-accent); }
.sns-comment-more i { font-size: 0.7rem; transition: transform 0.25s; }
.sns-comment-more.is-open i { transform: rotate(180deg); }

/* コメント入力 */
.sns-comment-form {
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--sns-border-soft);
}
/* 入力欄＋送信ボタンの行（通知欄を下に足したので内側で横並びにする） */
.sns-comment-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sns-comment-input {
  flex: 1;
  min-width: 0;
  background: var(--sns-sub);
  border: 1px solid var(--sns-border-soft);
  border-radius: 999px;
  color: var(--sns-text);
  font-size: 0.85rem;
  padding: 9px 16px;
  font-family: inherit;
}
.sns-comment-input::placeholder { color: var(--sns-text-muted); }
.sns-comment-input:focus {
  outline: none;
  border-color: rgba(217,242,78,0.45);
}
.sns-comment-send {
  width: 34px; height: 34px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--sns-text-sub);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}
.sns-comment-send:hover {
  background: rgba(217,242,78,0.14);
  color: var(--sns-accent);
}
.sns-comment-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   空状態
   ============================================================ */
.sns-empty {
  background: var(--sns-card);
  border: 1px dashed var(--sns-border);
  border-radius: var(--sns-radius);
  padding: 48px 24px;
  text-align: center;
}
.sns-empty-emoji { font-size: 2.6rem; margin-bottom: 10px; }
.sns-empty-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--sns-text);
  margin: 0 0 6px;
}
.sns-empty-desc {
  font-size: 0.86rem;
  color: var(--sns-text-sub);
  margin: 0 0 18px;
}
.sns-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sns-accent);
  color: #0b0e14;
  border: none;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 10px 22px;
  cursor: pointer;
  font-family: inherit;
}
.sns-empty-btn:hover { background: #e4ff5c; }

/* ============================================================
   ページネーション
   ============================================================ */
.sns-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.sns-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sns-card);
  border: 1px solid var(--sns-border);
  border-radius: 999px;
  color: var(--sns-text-sub);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 9px 18px;
  text-decoration: none;
  transition: all 0.2s;
}
.sns-page-btn:hover {
  background: var(--sns-card-hover);
  color: var(--sns-text);
  border-color: #33404f;
}
.sns-page-now {
  font-size: 0.85rem;
  color: var(--sns-text-muted);
  font-weight: 700;
}

/* ============================================================
   サイドバー
   ============================================================ */
.sns-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 86px;
}
.sns-side-card {
  background: var(--sns-card);
  border: 1px solid var(--sns-border);
  border-radius: var(--sns-radius);
  padding: 15px;
}
.sns-side-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--sns-text);
  margin: 0 0 12px;
}
.sns-side-title i { color: var(--sns-accent); font-size: 0.85rem; }
.sns-side-empty {
  font-size: 0.8rem;
  color: var(--sns-text-muted);
  margin: 0;
}
.sns-side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sns-side-search {
  display: flex;
  gap: 6px;
}
.sns-side-search .sns-field-input { flex: 1; }
.sns-side-search-btn {
  background: var(--sns-accent);
  border: none;
  border-radius: 8px;
  color: #0b0e14;
  padding: 0 13px;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sns-side-search-btn:hover { background: #e4ff5c; }

.sns-side-cats { list-style: none; margin: 0; padding: 0; }
.sns-side-cats li + li { margin-top: 2px; }
.sns-side-cats a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--sns-text-sub);
  font-size: 0.84rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.sns-side-cats a:hover {
  background: var(--sns-sub);
  color: var(--sns-text);
}
.sns-side-cats a.active {
  background: rgba(217,242,78,0.1);
  color: var(--sns-accent);
  font-weight: 700;
}
.sns-side-cat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sns-side-guide p {
  font-size: 0.8rem;
  line-height: 1.85;
  color: var(--sns-text-sub);
  margin: 0 0 11px;
}
.sns-side-guide strong { color: var(--sns-accent); }
.sns-side-guide-list {
  list-style: none;
  margin: 0 0 13px;
  padding: 0;
}
.sns-side-guide-list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--sns-text-sub);
  line-height: 1.7;
  margin-top: 5px;
}
.sns-side-guide-list i {
  color: var(--sns-accent);
  font-size: 0.7rem;
  margin-top: 4px;
}
.sns-side-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 11px;
  border-top: 1px solid var(--sns-border-soft);
}
.sns-side-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--sns-text-sub);
  text-decoration: none;
  padding: 7px 9px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.sns-side-links a:hover {
  background: var(--sns-sub);
  color: var(--sns-accent);
}
.sns-side-links i { font-size: 0.8rem; }

/* ============================================================
   ライトボックス
   ============================================================ */
.sns-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  cursor: zoom-out;
}
.sns-lightbox[hidden] { display: none !important; }
.sns-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}
.sns-lightbox-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.sns-lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ============================================================
   トースト
   ============================================================ */
.sns-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(14px);
  background: #1e2734;
  border: 1px solid var(--sns-border);
  color: var(--sns-text);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 10000;
}
.sns-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sns-toast.error {
  border-color: rgba(232,64,64,0.5);
  color: #ff9a9a;
}

/* ============================================================
   タブレット
   ============================================================ */
@media screen and (max-width: 980px) {
  .sns-layout {
    grid-template-columns: 1fr;
  }
  .sns-side {
    position: static;
  }
  .sns-card-images { width: 210px; }
  /* 1枚だけのときは全体を見せるぶん、やや広めに */
  .sns-card-images.count-1 { width: 250px; }
}

/* ============================================================
   スマートフォン
   ============================================================ */
@media screen and (max-width: 767px) {
  /* .container の余白は style_v2.css の共通指定に従う（上書きしない） */

  .sns-hero {
    padding: 16px;
    margin-bottom: 14px;
  }
  .sns-hero-main { gap: 8px; margin-bottom: 8px; }
  .sns-hero-title { font-size: 1.24rem; }
  .sns-hero-emoji { font-size: 1.15rem; }
  .sns-hero-lead { font-size: 0.86rem; }
  .sns-hero-desc { font-size: 0.8rem; line-height: 1.75; }
  .sns-br-sp { display: inline; }

  /* 投稿フォーム */
  .sns-composer { padding: 13px; }
  .sns-composer-top { gap: 9px; }
  /* スマホは従来の高さを維持（縮めるのはPCのみ）。
     3行ぶん（24.48px × 3 ≒ 74px）＋上下パディング が収まる高さを最小値とし、
     入力が増えたぶんだけJS側で下に伸ばす（スクロールは発生させない） */
  .sns-composer-input {
    font-size: 0.9rem;
    padding: 10px 12px 4px;
    height: 88px;
    min-height: 88px;
  }
  .sns-field-row { grid-template-columns: 1fr; gap: 9px; }
  .sns-field-row--2 { grid-template-columns: repeat(2, 1fr); }
  .sns-composer-details { padding: 11px; }

  /* エリア・カテゴリ：スマホでは2つ並べて折り返す
     （アイコンとラベルは1行目、プルダウンは2行目） */
  .sns-inline-field {
    /* 必ず横2列で並ぶようにする */
    flex: 1 1 calc(50% - 7px);
    min-width: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 9px;
    row-gap: 5px;
  }
  .sns-inline-field > i { grid-column: 1; grid-row: 1; font-size: 0.95rem; }
  .sns-inline-label {
    grid-column: 2; grid-row: 1;
    font-size: 0.85rem;
    justify-self: start;
  }
  .sns-inline-select { grid-column: 1 / -1; grid-row: 2; }
  .sns-inline-select {
    width: 100%;
    max-width: none;
    font-size: 0.88rem;
    /* 矢印を描く分の余白を右に確保 */
    padding: 8px 30px 8px 9px;
    /* iOS/Android の標準矢印（黒くて見えない）を消して
       白い上下矢印を自前で描く */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
      url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,6 5,3 8,6'/%3E%3Cpolyline points='2,10 5,13 8,10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 16px;
  }

  /* 名前とアイコン */
  .sns-identity { gap: 10px; }
  .sns-identity-hint { font-size: 0.68rem; }
  .sns-avatar-picker { padding: 10px 11px; }
  .sns-avatar-picker-row { flex-direction: column; gap: 6px; }
  .sns-avatar-picker-row + .sns-avatar-picker-row { margin-top: 11px; }
  .sns-avatar-picker-label { width: auto; padding-top: 0; }
  .sns-avatar-color { width: 30px; height: 30px; }
  .sns-avatar-icon { min-width: 34px; height: 34px; font-size: 1.1rem; }
  .sns-avatar-drop { padding: 14px 11px; }
  .sns-avatar-drop-main { font-size: 0.8rem; }
  .sns-avatar-drop-sub { font-size: 0.66rem; }
  .sns-avatar-current { flex-wrap: wrap; gap: 8px; }
  .sns-avatar-current-txt { flex: 1 1 auto; font-size: 0.73rem; }
  .sns-avatar-current-clear { flex: 0 0 auto; }
  .sns-avatar-or { margin: 11px 0 10px; }

  /* エリア・カテゴリは半分ずつの2列。
     投稿ボタンは幅が足りないため次の行へ全幅で回す */
  .sns-meta-row {
    gap: 12px 14px;
  }
  .sns-meta-row .sns-submit {
    flex: 1 0 100%;
    margin-left: 0;
    margin-top: 3px;
  }
  /* 「画像を追加」（入力欄の右下） */
  .sns-tool {
    font-size: 0.88rem;
    padding: 7px 9px;
    gap: 6px;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .sns-tool i { font-size: 1.05rem; }
  .sns-submit {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 0.9rem;
  }
  /* タブ */
  .sns-tabs {
    gap: 6px;
    margin: 0 -12px 14px;
    padding: 0 12px 4px;
  }
  .sns-tab {
    font-size: 0.8rem;
    padding: 7px 14px;
  }

  /* カード：SPは画像を本文の下に回す */
  .sns-card { padding: 13px; }
  .sns-card-head { gap: 9px; margin-bottom: 10px; }
  /* SPでも名前を優先して長く出す（固定の max-width で切らない）。
     それでも入りきらない長い名前は2行まで折り返して表示する */
  .sns-card-name {
    font-size: 0.89rem;
    max-width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-break: break-word;
    line-height: 1.3;
  }
  .sns-card-sub { font-size: 0.72rem; }
  /* カテゴリバッジは名前の邪魔をしないよう小さめに（文言は省略しない） */
  .sns-card-cat {
    font-size: 0.64rem;
    padding: 3px 8px;
  }
  /* 三点リーダーのメニュー：画面からはみ出さないように */
  .sns-menu-pop {
    min-width: 142px;
  }
  .sns-menu-item {
    padding: 11px 12px;
    font-size: 0.86rem;
  }
  /* 編集フォーム：SPはエリア・カテゴリを縦並びに */
  .sns-edit-form { padding: 12px; }
  .sns-edit-row { flex-direction: column; gap: 10px; }
  .sns-edit-field { flex: 1 1 auto; }
  .sns-edit-actions { gap: 8px; }
  .sns-edit-cancel,
  .sns-edit-save {
    flex: 1 1 0;
    justify-content: center;
    padding: 11px 12px;
  }
  .sns-card-body {
    flex-direction: column;
    gap: 11px;
  }
  .sns-card-content { font-size: 0.88rem; line-height: 1.8; }
  .sns-card-images,
  .sns-card-images.count-1 {
    width: 100%;
    gap: 4px;
  }
  /* 1枚だけのときは、その画像の高さをそのまま使う（PCと同じ考え方）。
     高さの上限は設けず、画像の縦横比どおりに表示する。 */
  .sns-card-images.count-1 .sns-card-image,
  .sns-card-images.count-1 .sns-card-video {
    aspect-ratio: auto;
    height: auto;
    max-height: none;
  }
  .sns-card-images.count-1 .sns-card-image img {
    height: auto;
    max-height: none;
    object-fit: fill;
  }
  .sns-card-images.count-1 .sns-card-video video {
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* リアクション */
  .sns-card-foot {
    gap: 9px;
    margin-top: 12px;
    padding-top: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .sns-reactions {
    gap: 5px;
    justify-content: space-between;
  }
  .sns-react {
    padding: 7px 10px;
    gap: 5px;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  .sns-react-emoji { font-size: 0.95rem; }
  .sns-react-count { font-size: 0.76rem; }
  .sns-card-tools {
    margin-left: 0;
    /* ツールがコメントのみになったので左端に揃える */
    justify-content: flex-start;
    border-top: 1px solid var(--sns-border-soft);
    padding-top: 8px;
  }
  .sns-card-tool { font-size: 0.78rem; padding: 7px 9px; }

  /* コメント */
  .sns-comments { padding: 10px; margin-top: 10px; }
  .sns-comment-head { font-size: 0.82rem; }
  .sns-comment-input { font-size: 0.82rem; padding: 8px 14px; }

  /* サイドバー */
  .sns-side { gap: 12px; margin-top: 18px; }
  .sns-side-card { padding: 13px; }

  .sns-empty { padding: 36px 18px; }
  .sns-lightbox { padding: 14px; }
}

/* 極小画面 */
@media screen and (max-width: 380px) {
  .sns-react { padding: 6px 7px; }
  .sns-react-emoji { font-size: 0.88rem; }
  /* 極小画面でも名前は残りの幅いっぱいまで使う */
  .sns-card-name { max-width: 100%; }
  .sns-card-cat { font-size: 0.62rem; padding: 3px 7px; }
}

/* ===================================================== */
/* 動画・メディア編集まわり                                */
/* ===================================================== */

/* --- タイムラインの動画（カード内で再生できる） --- */
.sns-card-video {
  cursor: default;          /* 画像のような zoom-in カーソルにしない */
  position: relative;
  background: #000;
}
.sns-card-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* --- 動画であることが一目で分かるバッジ --- */
.sns-video-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 11px;
  pointer-events: none;   /* 再生操作の邪魔をしない */
}

/* --- サムネイルを用意している間の目印（真っ黒に見せない） --- */
.sns-card-video.is-thumb-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, #1b2430 0%, #263141 50%, #1b2430 100%);
  background-size: 200% 200%;
  animation: snsThumbShine 1.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes snsThumbShine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .sns-card-video.is-thumb-loading::before { animation: none; }
}

/* --- 新規投稿プレビューの動画 --- */
.sns-image-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* --- 編集フォームの画像・動画 --- */
.sns-edit-media {
  margin-bottom: 14px;
}
.sns-edit-media-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}
.sns-edit-media-list:empty { margin: 0; }

.sns-edit-media-item {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--sns-border);
  background: #000;
  transition: opacity 0.2s, filter 0.2s;
}
.sns-edit-media-item img,
.sns-edit-media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 追加予定のものは枠をアクセント色にして区別 */
.sns-edit-media-item.is-new {
  border-color: rgba(217,242,78,0.6);
}
/* 削除予約されたものは薄く＋取り消し線のような見た目に */
.sns-edit-media-item.is-removed {
  opacity: 0.35;
  filter: grayscale(1);
}
.sns-edit-media-item.is-removed::after {
  content: '削除';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200,40,40,0.55);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* 動画バッジ */
.sns-edit-media-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 0.64rem;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
}
.sns-edit-media-badge i { font-size: 0.62rem; }

/* メディアの✕ボタン */
.sns-edit-media-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.2s;
}
.sns-edit-media-del:hover { background: rgba(220,40,40,0.9); }

/* 「画像・動画を追加」ボタン */
.sns-edit-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px dashed var(--sns-border);
  border-radius: 8px;
  color: var(--sns-text-sub);
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sns-edit-add:hover {
  background: rgba(217,242,78,0.1);
  color: var(--sns-accent);
  border-color: rgba(217,242,78,0.5);
}
.sns-edit-hint {
  margin: 6px 0 0;
  font-size: 0.74rem;
  color: var(--sns-text-muted);
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .sns-edit-media-item {
    width: 72px;
    height: 72px;
  }
  .sns-edit-add {
    width: 100%;
    justify-content: center;
    padding: 11px 12px;
  }
  .sns-edit-hint { font-size: 0.72rem; }
}

/* ===================================================== */
/* コメント通知メール                                     */
/* ===================================================== */

/* --- 投稿フォームの通知欄 --- */
.sns-notify-box {
  margin-top: 10px;
  padding: 11px 13px;
  background: var(--sns-sub);
  border: 1px solid var(--sns-border-soft);
  border-radius: 10px;
}
.sns-notify-box .sns-field { margin: 0; }
.sns-notify-box .sns-field-label i { margin-right: 4px; color: var(--sns-accent); }
.sns-notify-hint {
  margin: 7px 0 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--sns-text-muted);
}
.sns-notify-hint i { margin-right: 4px; }

/* --- 編集フォームの通知欄 --- */
.sns-edit-notify { margin-bottom: 11px; }
.sns-edit-field--full { width: 100%; }
.sns-edit-notify .sns-edit-label i { margin-right: 4px; color: var(--sns-accent); }

/* --- コメント欄の「返信をメールで受け取る」 --- */
.sns-cnotify { margin: 7px 0 0 39px; }   /* アイコンぶん字下げして入力欄と揃える */
.sns-cnotify-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 3px 0;
  color: var(--sns-text-muted);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s;
}
.sns-cnotify-toggle:hover { color: var(--sns-text); }
.sns-cnotify-toggle.is-open { color: var(--sns-accent); }
.sns-cnotify-arrow {
  font-size: 0.65rem;
  transition: transform 0.2s;
}
.sns-cnotify-toggle.is-open .sns-cnotify-arrow { transform: rotate(180deg); }
.sns-cnotify-body { padding: 7px 0 2px; }
.sns-cnotify-input {
  width: 100%;
  max-width: 320px;
  background: var(--sns-bg);
  border: 1px solid var(--sns-border);
  border-radius: 8px;
  color: var(--sns-text);
  font-size: 0.82rem;
  font-family: inherit;
  padding: 8px 12px;
}
.sns-cnotify-input:focus {
  outline: none;
  border-color: var(--sns-accent);
}
.sns-cnotify-input::placeholder { color: var(--sns-text-muted); }
.sns-cnotify-hint {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--sns-text-muted);
}

/* --- SP --- */
@media screen and (max-width: 767px) {
  .sns-notify-box { padding: 10px 11px; }
  .sns-notify-hint { font-size: 0.71rem; }
  .sns-cnotify { margin-left: 0; }
  .sns-cnotify-input { max-width: 100%; font-size: 0.8rem; }
}

/* ===================================================== */
/* ドラッグ＆ドロップでの画像・動画追加                     */
/* ===================================================== */

/* --- 投稿フォームの入力枠 --- */
.sns-composer-field { position: relative; }

/* ファイルを枠の上に持ってきたときの見た目 */
.sns-composer-field.is-dragover {
  border-color: var(--sns-accent);
  border-style: dashed;
  background: rgba(217, 242, 78, 0.06);
}
/* 「ここにドロップ」のオーバーレイ（枠いっぱいに重ねる） */
.sns-composer-field.is-dragover::after {
  content: "ここにドロップして追加";
  font-weight: 700;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--sns-radius-sm);
  /* 下の文字が透けないようしっかり覆う */
  background: #121820;
  color: var(--sns-accent);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  pointer-events: none;   /* ドロップ判定を邪魔しない */
  z-index: 5;
}

/* --- 編集フォームのメディア欄 --- */
.sns-edit-media { position: relative; }
.sns-edit-media.is-dragover {
  outline: 2px dashed var(--sns-accent);
  outline-offset: 3px;
  border-radius: 10px;
  background: rgba(217, 242, 78, 0.05);
}

/* --- 「追加」ボタンの説明（ドロップできることを伝える） --- */
.sns-drop-note {
  margin: 6px 0 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--sns-text-muted);
}
.sns-drop-note i { margin-right: 4px; }

/* --- SP：タッチ端末ではドラッグできないので案内を出さない --- */
@media screen and (max-width: 767px) {
  .sns-drop-note { display: none; }
  .sns-composer-field.is-dragover::after { font-size: 0.85rem; }
}

/* ===================================================== */
/* 動画の自動圧縮オーバーレイ                               */
/* ===================================================== */
.sns-compress {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 12, 18, 0.88);
}
.sns-compress.show { display: flex; }
.sns-compress-box {
  width: 100%;
  max-width: 400px;
  padding: 26px 22px;
  background: var(--sns-card);
  border: 1px solid var(--sns-border);
  border-radius: 14px;
  text-align: center;
}
.sns-compress-icon {
  font-size: 1.9rem;
  color: var(--sns-accent);
  margin-bottom: 12px;
  animation: snsCompressPulse 1.4s ease-in-out infinite;
}
@keyframes snsCompressPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.sns-compress-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sns-text);
}
.sns-compress-name {
  margin: 0 0 14px;
  font-size: 0.8rem;
  color: var(--sns-text-sub);
  word-break: break-all;
}
.sns-compress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--sns-sub);
  overflow: hidden;
}
.sns-compress-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--sns-accent);
  transition: width 0.3s ease;
}
.sns-compress-note {
  margin: 14px 0 0;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--sns-text-muted);
}

@media screen and (max-width: 767px) {
  .sns-compress-box { padding: 22px 18px; }
  .sns-compress-title { font-size: 0.94rem; }
  .sns-compress-note { font-size: 0.73rem; }
}

/* ============================================================
   編集フォームのお名前・アイコン
   （投稿したあとでも名前とアイコンを変えられるようにする）
   ============================================================ */
.sns-edit-identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.sns-edit-avatar {
  position: relative;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
  margin-top: 18px;          /* ラベルのぶん下げて、入力欄と高さをそろえる */
}
.sns-edit-avatar:focus-visible {
  outline: 2px solid var(--sns-accent);
  outline-offset: 3px;
}
.sns-edit-avatar-pen {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sns-accent);
  color: #0b0e14;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sns-card, #141b26);
  line-height: 1;
}
.sns-edit-identity .sns-edit-field--full { flex: 1; min-width: 0; }

/* アイコン選択パネル（編集フォーム内） */
.sns-edit-avatar-picker {
  margin: 0 0 12px;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .sns-edit-identity { gap: 10px; }
  .sns-edit-avatar { margin-top: 16px; }
}

/* ============================================================
   複数枚の写真をスライドで見る（Instagram のような切り替え）
   小さく並べず、1枚ずつ大きく表示して ●○ で切り替える。
   ============================================================ */
.sns-card-images.is-slider {
  display: block;             /* グリッド並べをやめる */
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background: var(--sns-sub);
  /* 小さく並べていたときより広くとる（1枚表示と同じ見やすさに揃える） */
  width: 320px;
}

/* 横に並べて、スワイプで送る */
.sns-slider-track {
  display: flex;
  align-items: flex-start;          /* 写真ごとの高さをそのまま使う */
  overflow-x: auto;
  overflow-y: hidden;
  /* proximity にしておく：
     写真の読み込み中など一瞬だけ高さが決まらない間に、
     ブラウザが勝手に「2枚目が近い」と判断して飛ぶのを防ぐ。
     指で送ったときは下の scroll-snap-align でちゃんと止まる。 */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox：スクロールバーを隠す */
  /* 読み込み中に中身の高さが変わっても、見ている位置を動かさない */
  overflow-anchor: none;
  /* 横に送りきっても親ページが動かないようにする
     （touch-action は指定しない。既定のままで縦スクロールも横送りも両方できる） */
  overscroll-behavior-x: contain;
  /* 枠の高さは「今見ている写真」に合わせてJSが決める。
     切り替えのときになめらかに伸び縮みさせる。 */
  transition: height 0.25s ease;
}
.sns-slider-track::-webkit-scrollbar { display: none; }

/* 1枚ぶんの枠（横幅いっぱい・高さは画像なり） */
.sns-card-images.is-slider .sns-card-image {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  /* center ではなく start にする。
     center だと、写真の高さが決まる前に「2枚目のほうが中心に近い」と
     判断されて飛ぶことがあるため。 */
  scroll-snap-align: start;
  scroll-snap-stop: always;         /* 一度に2枚飛ばさない */
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  border-radius: 0;
}
.sns-card-images.is-slider .sns-card-image img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;        /* 切り取らず、写真そのままの形で見せる */
  display: block;
}
.sns-card-images.is-slider .sns-card-image:hover img { transform: none; }
.sns-card-images.is-slider .sns-card-video video {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* 左右の送りボタン */
.sns-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
}
.sns-slider-arrow:hover { background: rgba(0, 0, 0, .78); }
.sns-slider-arrow:focus-visible { outline: 2px solid var(--sns-accent); outline-offset: 2px; }
.sns-slider-arrow--prev { left: 8px; }
.sns-slider-arrow--next { right: 8px; }
.sns-slider-arrow[hidden] { display: none; }

/* 「1/4」の枚数表示 */
.sns-slider-count {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 2px 9px;
  border-radius: 11px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ●○の切り替えボタン */
.sns-slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;      /* 枠全体では拾わず、丸だけ押せるようにする */
}
.sns-slider-dot {
  pointer-events: auto;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}
.sns-slider-dot:hover { background: rgba(255, 255, 255, .75); }
.sns-slider-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}
.sns-slider-dot:focus-visible { outline: 2px solid var(--sns-accent); outline-offset: 2px; }

/* タブレット幅：本文が縦積みになる手前は、少しだけ控えめに */
@media screen and (max-width: 980px) {
  .sns-card-images.is-slider { width: 250px; }
}

/* スマホ：指で送るのが主なので、矢印は出さない。幅はいっぱいに使う */
@media screen and (max-width: 767px) {
  .sns-card-images.is-slider { width: 100%; }
  .sns-slider-arrow { display: none; }
  .sns-slider-dots { bottom: 10px; }
  .sns-slider-dot { width: 7px; height: 7px; }
}