/* ============================================================
   user.css — ユーザープロフィールページ（Magazine テーマ）
   ・カード一覧は list.css の .lc 系を流用（pageCss=list.css）
   ・ここではユーザー固有のヘッダー/プロフィール/タブと、
     .lc の上書き（スニペット表示・下書きスタイル）だけ定義する
   ============================================================ */

.user-page {
  padding-bottom: 80px;
}

/* ── ダークヘッダー（list-page-head と統一） ─────────── */
.user-page-head {
  background: #191c22;
  border-bottom: 1.5px solid #252930;
  padding: 22px 0;
}

.user-page-head-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.user-head-ava-wrap { flex-shrink: 0; }

.user-head-ava {
  width: 64px; height: 64px;
  border-radius: 0;
  object-fit: cover;
  border: 1.5px solid #e4e6ed;
  display: block;
}
.user-head-ava-default {
  width: 64px; height: 64px;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: #2a2d35; font-size: 1.6rem;
  border: 1.5px solid #e4e6ed;
  color: #9aa2ae;
}

.user-head-info { flex: 1; min-width: 0; }

.user-head-name {
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #e4e6ed;
  margin: 0 0 6px;
  line-height: 1.2;
  word-break: break-word;
}

.user-head-stats {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: #9aa2ae;
  font-weight: 600;
}
.user-head-stats strong { color: #e4e6ed; font-weight: 900; }

/* ── プロフィールバー（bio・SNS）：Magazine 白カード ──── */
.user-profile-bar {
  background: var(--bg);
  border-bottom: 1.5px solid var(--text);
}
.user-profile-bar-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.user-bio {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.75;
  word-break: break-word;
  white-space: pre-wrap;
  margin: 0;
  font-weight: 500;
}
.user-bio-empty a {
  color: var(--accent); font-weight: 800; text-decoration: underline;
}
.user-bio-empty a:hover { text-decoration: none; }

/* SNSリンクバッジ：シャープエッジ */
.user-sns {
  display: flex; flex-wrap: wrap; gap: 8px;
  flex-shrink: 0;
}
.user-sns-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: opacity var(--trans);
}
.user-sns-btn:hover { opacity: 0.85; }
.user-sns-btn span { font-size: 0.85rem; font-weight: 900; }
.user-sns-yt { background: #ff0000; color: #fff; border-color: #ff0000; }
.user-sns-x  { background: #000; color: #fff; border-color: #000; }
.user-sns-ig {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  border-color: #dc2743;
}

/* ── カテゴリタブ（Magazine：太線下、選択時赤） ─────── */
.user-tabs-wrap {
  border-bottom: 1.5px solid var(--text);
  position: sticky; top: 0;
  background: var(--bg2);
  z-index: 10;
}
.user-tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 28px;
  gap: 0;
}
.user-tab {
  padding: 13px 18px;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text2);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;
  transition: color var(--trans), border-color var(--trans);
}
.user-tab:hover { color: var(--text); }
.user-tab.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── レビュー一覧コンテナ（list.css の .lc を流用） ──── */
.user-feed {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 28px 0;
}

/* スニペットは list.css ではトップページ用に display:none。
   ユーザーページではタイムライン表示なので可視に戻す */
.user-feed .lc-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0 0;
}

/* ── 下書きカード（.lc.lc-draft：アンバー強調） ──────── */
.lc.lc-draft {
  background: #fff8eb;
  border-color: #d97706;
}
.lc.lc-draft:hover {
  background: #fdeed0;
  border-color: #d97706;
}
.lc.lc-draft .lc-thumb {
  border-right-color: #d97706;
}
.lc-cat-draft {
  background: var(--bg2) !important;
  color: #b45309 !important;
  border-color: #d97706 !important;
}
.lc-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 0;
  background: #d97706;
  color: #fff;
  border: 1.5px solid #d97706;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: none;
}
.lc.lc-draft:hover .lc-edit-link {
  background: #b45309;
  border-color: #b45309;
}

.user-draft-saved-msg {
  background: var(--bg2);
  border: 1.5px solid #16a34a;
  border-left-width: 4px;
  border-radius: 0;
  padding: 12px 18px;
  margin: 16px 0;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: #166534;
  max-width: 880px;
}

/* ── レスポンシブ ────────────────────────────────────── */
@media (max-width: 600px) {
  .user-page-head { padding: 18px 0; }
  .user-page-head-inner { padding: 0 16px; gap: 12px; }
  .user-head-ava, .user-head-ava-default { width: 52px; height: 52px; }
  .user-head-name { font-size: var(--fs-lg); }
  .user-profile-bar-inner { padding: 14px 16px; }
  .user-feed { padding: 16px 16px 0; }

  /* カテゴリタブ：折り返さず横スクロール */
  .user-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 16px;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge legacy */
    -webkit-overflow-scrolling: touch;
  }
  .user-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .user-tab {
    flex-shrink: 0;                   /* 縮まずに横並びを維持 */
    padding: 12px 14px;
  }
}