/* THIS IS A PLACEHOLDER FILE
   place a css file at $static_dir/static/custom.css
   to apply custom styles to your frontend
*/


/* ============================================================
   Akkoma / Pleroma-fe 視認性向上カスタムCSS（統合版）
   1. 高コントラスト・グレースケール
   2. 文字サイズ・太さ・全角半角バランス調整
   3. 画像サムネイルの高さ制限
   ============================================================ */

/* --- 1. カラー定義と基本設定 --- */
:root {
  /* 背景を漆黒、文字を純白に固定 */
  --body-bg: #121212 !important;
  --bg: #121212 !important;
  --fg: #ffffff !important;
  --text: #ffffff !important;
  --link: #80bfff !important;
  
  /* 日本語と英数字の太さが揃いやすいフォントセット */
  --interface-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Inter", "system-ui", sans-serif !important;
}

body {
  font-family: var(--interface-font);
  font-size: 14px !important;
  color: #ffffff !important;
  background-color: #121212 !important;
  
  /* 文字のレンダリング調整（細くなる補正を抑制） */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-shadow: 0 0 1px rgba(255,255,255,0.1);
}

/* --- 2. 投稿本文・テキストの調整 --- */
.status-content {
  font-family: var(--interface-font);
  font-size: 1.1rem !important;
  /* 500(Medium)〜600(Semi-Bold)で全角・半角の差を埋める */
  font-weight: 400 !important; 
  line-height: 1.6 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em;
}

/* ユーザー名とアカウント名 */
.status-header .display-name {
  font-weight: 400 !important;
  color: #ffffff !important;
}

.status-header .account-name {
  color: #bbbbbb !important;
}

/* --- 3. タイムラインの区切りとUI要素 --- */
.status {
  border-bottom: 1px solid #444 !important;
  background-color: #000000 !important;
}

input, textarea, select {
  background-color: #222 !important;
  color: #fff !important;
  border: 1px solid #666 !important;
  font-weight: 400 !important;
}

/* --- 4. 画像サムネイルの高さ制限 --- */
/* 投稿内の画像コンテナの最大高さを制限 */
.status-content .attachments-container {
  max-height: 50px !important; 
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* 画像自体の表示方法を調整 */
.status-content .attachment {
  max-height: 50px !important;
  width: auto !important;
  max-width: 100%;
  /* 枠に収まらない分は切り抜き、高さを揃える */
  object-fit: cover; 
  border: 1px solid #444;
  border-radius: 4px;
}

.status-content .attachments-container .attachment {
  margin: 2px !important;
  flex-grow: 1;
}

/* 動画プレイヤーも同様に制限 */
.status-content video {
  max-height: 50px !important;
  width: auto !important;
}