/* ========================================
   スマホ対応修正用CSS
   ======================================== */

/* ヘッダーテキストの色を白色に修正 */
header h1,
header .site-title,
header .site-name,
.header h1,
.header .site-title,
.header .site-name,
#header h1,
#header .site-title,
#header .site-name {
  color: white !important;
}

/* ナビゲーション等のヘッダー内テキストも白色に */
header a,
header nav a,
.header a,
.header nav a,
#header a,
#header nav a {
  color: white !important;
}

/* ヘッダー内の全てのテキストを白色に */
header,
header *,
.header,
.header *,
#header,
#header * {
  color: white !important;
}

/* ただし、ボタンやフォーム要素は除外 */
header button,
header input,
header select,
header textarea,
.header button,
.header input,
.header select,
.header textarea,
#header button,
#header input,
#header select,
#header textarea {
  color: initial !important;
}

/* H1タイトルのレスポンシブ調整 */
.container h1 {
  font-size: 1.8rem;
  line-height: 1.4;
  margin: 20px 0 15px 0;
  padding: 0 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  color: #333;
  font-weight: bold;
}

/* PC表示（768px以上） */
@media (min-width: 768px) {
  h1 {
    font-size: 2.2rem;
    line-height: 1.3;
    margin: 25px 0 20px 0;
    padding: 0;
  }
}

/* タブレット表示（481px-767px） */
@media (min-width: 481px) and (max-width: 767px) {
  h1 {
    font-size: 2rem;
    line-height: 1.35;
    margin: 22px 0 18px 0;
    padding: 0 5px;
  }
}

/* スマホ表示（480px以下） */
@media (max-width: 480px) {
  h1 {
    font-size: 1.6rem;
    line-height: 1.45;
    margin: 18px 0 15px 0;
    padding: 0 15px;
    text-align: left;
  }
  
  /* 30文字を超える場合の特別調整 */
  h1.long-title {
    font-size: 1.4rem;
    line-height: 1.5;
  }
}

/* 非常に小さなスマホ（320px以下） */
@media (max-width: 320px) {
  h1 {
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 15px 0 12px 0;
    padding: 0 10px;
  }
  
  h1.long-title {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  
  h1.very-long-title {
    font-size: 1.1rem;
    line-height: 1.7;
  }
}

/* 超長いタイトル用のクラス */
h1.very-long-title {
  font-size: 1.5rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  h1.very-long-title {
    font-size: 2rem;
    line-height: 1.4;
  }
}

/* いいね数の表示修正 */
.like-count {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin-top: 8px !important;
  left: 0 !important;
  bottom: auto !important;
  font-size: 0.9em !important;
  color: #666 !important;
  z-index: 10 !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .like-count {
    font-size: 0.85em !important;
    margin-top: 6px !important;
    padding: 2px 0 !important;
  }
  
  .thread-item {
    padding-bottom: 40px !important; /* いいね数用の余白確保 */
  }
  
  .thread-item .like-count {
    position: absolute !important;
    left: 16px !important;
    bottom: 8px !important;
    margin-top: 0 !important;
  }
}

/* 非常に小さなスマホ */
@media (max-width: 480px) {
  .like-count {
    font-size: 0.8em !important;
  }
  
  .thread-item .like-count {
    left: 12px !important;
    bottom: 6px !important;
  }
}

/* メニューボタンのスマホ対応 */
.menu-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
}

/* アクションボタン全般のスマホ対応 */
.action-btn {
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 6px 8px !important;
  touch-action: manipulation !important;
}

@media (max-width: 768px) {
  .menu-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 10px !important;
  }
  
  .action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    margin: 2px !important;
  }
  
  .action-buttons {
    gap: 4px !important;
  }
}

/* タップ時のビジュアルフィードバック */
.menu-btn:active,
.action-btn:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
}