/* スクロールバー常時表示（初回読み込み問題対策） */
html {
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}

/* フォーカス時の角丸を削除 */
*:focus {
  outline: none !important;
  border-radius: 0 !important;
}

*:focus-visible {
  outline: none !important;
  border-radius: 0 !important;
}

/* カスタム絵文字スタイル */
.custom-emoji {
  display: inline-block !important;
  width: 1.2em !important;
  height: 1.2em !important;
  max-width: 1.2em !important;
  max-height: 1.2em !important;
  min-width: 1.2em !important;
  min-height: 1.2em !important;
  vertical-align: text-bottom !important;
  margin: 0 2px !important;
  object-fit: contain !important;
  border: none !important;
  background: none !important;
  flex-shrink: 0 !important;
}

/* 異なるコンテキスト用の絵文字サイズクラス */
.emoji-small {
  width: 1em !important;
  height: 1em !important;
  max-width: 1em !important;
  max-height: 1em !important;
}

.emoji-medium {
  width: 1.2em !important;
  height: 1.2em !important;
  max-width: 1.2em !important;
  max-height: 1.2em !important;
}

.emoji-large {
  width: 1.5em !important;
  height: 1.5em !important;
  max-width: 1.5em !important;
  max-height: 1.5em !important;
}

button:not([disabled]),
input[type="submit"]:not([disabled]),
input[type="button"]:not([disabled]),
.clickable,
[role="button"],
[onclick],
[data-turbo-method],
.cursor-pointer {
  cursor: pointer !important;
}

button:not([disabled]):hover,
input[type="submit"]:not([disabled]):hover,
input[type="button"]:not([disabled]):hover,
.clickable:hover,
[role="button"]:hover,
[onclick]:hover,
[data-turbo-method]:hover {
  filter: brightness(0.97);
  transition: filter 0.2s ease;
}

button:not([disabled]):active,
input[type="submit"]:not([disabled]):active,
input[type="button"]:not([disabled]):active,
.clickable:active,
[role="button"]:active,
[onclick]:active,
[data-turbo-method]:active {
  filter: brightness(0.94);
  transform: translateY(1px);
  transition: all 0.1s ease;
}

a:not(.no-hover):not(.btn-secondary):hover {
  filter: brightness(0.97);
  transition: filter 0.2s ease;
}

a:not(.no-hover):not(.btn-secondary):active {
  filter: brightness(0.94);
  transition: filter 0.1s ease;
}

/* すべてのリンクから下線を除去 */
a {
  text-decoration: none !important;
}

/* invisibleクラスでプロトコル部分を非表示 */
.invisible {
  display: none !important;
}

/* 行数制限クラス */
.line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* カスタムセレクトボックス */
.custom-select {
  position: relative;
  display: inline-block;
}

.custom-select select {
  appearance: none;
  background: var(--page-background-color, #fdfbfb);
  border: 1px solid #d1d5db;
  border-radius: 0;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
}

.custom-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #6b7280;
  pointer-events: none;
}

/* すべてのselect要素にカスタムスタイル適用 */
select {
  appearance: none !important;
  background: var(--page-background-color, #fdfbfb) !important;
  border-radius: 0 !important;
}

select:focus {
  border-color: #6b7280 !important;
}

/* 投稿カード共通スタイル - 最高優先度 */
.post-card-avatar-container {
  height: 2.5rem !important;
  width: 2.5rem !important;
  background-color: #6b7280 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.post-card-avatar-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.post-card-avatar-fallback {
  color: white !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

.post-card-username {
  font-size: 1rem !important;
  color: #111827 !important;
  font-weight: 300 !important;
}

.post-card-username-link {
  transition: color 0.15s ease-in-out !important;
}

.post-card-username-link:hover {
  color: #4b5563 !important;
}

.post-card-handle {
  color: #6b7280 !important;
  font-size: 0.875rem !important;
  margin-left: 0.5rem !important;
  font-weight: 300 !important;
}

.post-card-timestamp {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  margin-top: 0.25rem !important;
  font-weight: 300 !important;
}

.post-card-time-link {
  transition: color 0.15s ease-in-out !important;
}

.post-card-time-link:hover {
  color: #374151 !important;
}

.post-card-content-container {
  color: #1f2937 !important;
  line-height: 1.625 !important;
}

.post-card-content-text {
  white-space: pre-wrap !important;
  word-break: break-words !important;
}

.post-card-replies-container {
  margin-top: 1rem !important;
  display: flex !important;
  align-items: center !important;
  color: #9ca3af !important;
}

.post-card-replies-icon {
  height: 1rem !important;
  width: 1rem !important;
  margin-right: 0.25rem !important;
}

.post-card-replies-count {
  font-size: 0.875rem !important;
  font-weight: 300 !important;
}

.post-card-media-container {
  margin-top: 1.5rem !important;
}

.post-card-media-item {
  margin-bottom: 1rem !important;
}

.post-card-media-image {
  max-width: 100% !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  border: 1px solid #e5e7eb !important;
}

.post-card-media-video {
  width: 100% !important;
  border: 1px solid #e5e7eb !important;
  max-height: 70vh !important;
  min-height: 300px !important;
}

.post-card-media-file {
  display: flex !important;
  align-items: center !important;
  padding: 1rem !important;
  background-color: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
}

.post-card-media-file-icon {
  height: 1.5rem !important;
  width: 1.5rem !important;
  color: #9ca3af !important;
  margin-right: 0.75rem !important;
}

.post-card-media-file-name {
  font-size: 0.875rem !important;
  color: #4b5563 !important;
}

/* 全ての投稿コンテンツ内のリンクスタイル統一 */
.post-reply-content a,
.post-card-content-container a,
.whitespace-pre-wrap a {
  color: #6b7280 !important;
  text-decoration: none !important;
}

.post-reply-content a:hover,
.post-card-content-container a:hover,
.whitespace-pre-wrap a:hover {
  color: #374151 !important;
}

/* カスタムチェックボックス */
.custom-checkbox {
  appearance: none !important;
  width: 1rem !important;
  height: 1rem !important;
  border: 1px solid #d1d5db !important;
  background-color: var(--page-background-color, #fdfbfb) !important;
  position: relative !important;
  cursor: pointer !important;
}

.custom-checkbox:checked {
  border-color: #6b7280 !important;
  background-color: var(--page-background-color, #fdfbfb) !important;
}

.custom-checkbox:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 1px !important;
  width: 6px !important;
  height: 10px !important;
  border: solid #6b7280 !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.custom-checkbox:hover {
  border-color: #9ca3af !important;
  filter: brightness(0.97) !important;
}

/* フォーム要素 */
.form-input {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid #d1d5db !important;
  transition: border-color 0.15s ease-in-out !important;
}

.form-input:focus {
  border-color: #6b7280 !important;
}

.form-select {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid #d1d5db !important;
  transition: border-color 0.15s ease-in-out !important;
}

.form-select:focus {
  border-color: #6b7280 !important;
}

/* ボタン */
.btn-secondary {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  background-color: var(--page-background-color, #fdfbfb) !important;
  transition: all 0.15s ease-in-out !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.btn-secondary:hover {
  filter: brightness(0.97) !important;
  border-color: #9ca3af !important;
  color: #374151 !important;
}

.btn-sm {
  padding: 0.25rem 0.75rem !important;
  font-size: 0.875rem !important;
  display: inline-block !important;
}

/* タブナビゲーション */
.tab-link {
  font-family: "Noto Sans JP", sans-serif !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: color 0.15s ease-in-out !important;
}

.tab-link-active {
  border-bottom: 1px solid #9ca3af !important;
  color: #111827 !important;
}

.tab-link-inactive {
  color: #6b7280 !important;
}

.tab-link-inactive:hover {
  color: #374151 !important;
}

/* 共通ラベル */
.form-label {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
  display: block !important;
  font-size: 0.875rem !important;
  color: #374151 !important;
  margin-bottom: 0.5rem !important;
}

.form-label-light {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 300 !important;
}

/* 共通見出し */
.section-heading {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
  color: #111827 !important;
}

.page-heading {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 300 !important;
  color: #111827 !important;
  font-size: 1rem !important; /* text-base */
}

@media (min-width: 640px) {
  .page-heading {
    font-size: 1.25rem !important; /* text-xl */
  }
}

/* 共通テキストスタイル */
.text-light {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 300 !important;
}

.text-normal {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
}

/* 5インチスマートフォン対応レスポンシブ強化 */
@media (max-width: 640px) {
  /* ヘッダー領域 */
  .max-w-4xl {
    max-width: 100% !important;
  }

  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-8 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* 検索ボックス */
  .w-20 {
    width: 4rem !important;
  }

  /* メディア要素 */
  .post-card-media-video {
    min-height: 200px !important;
    max-height: 50vh !important;
  }

  .post-card-media-image {
    max-height: 70vh !important;
  }

  /* マージン調整 */
  .mb-8 {
    margin-bottom: 1rem !important;
  }

  .p-6 {
    padding: 1rem !important;
  }

  .mt-16 {
    margin-top: 2rem !important;
  }

  /* フォント調整 */
  .text-lg {
    font-size: 1rem !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
  }

  /* タブリンク */
  .tab-link {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  /* ボタン */
  .btn-secondary {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
  }

  .btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }
}

/* 4インチ以下の極小デバイス対応 */
@media (max-width: 480px) {
  .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .py-8 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .p-6 {
    padding: 0.75rem !important;
  }

  .space-x-4 > * + * {
    margin-left: 0.5rem !important;
  }

  .btn-secondary {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }

  .btn-sm {
    padding: 0.3125rem 0.625rem !important;
    font-size: 0.75rem !important;
  }
}

/* 横画面スマートフォン対応 */
@media (max-width: 896px) and (orientation: landscape) {
  .py-8 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .post-card-media-video {
    max-height: 40vh !important;
  }

  .post-card-media-image {
    max-height: 40vh !important;
  }
}