/* css/tables_css/blowzermap_for_tensorart.css
   2026-07-04 TensorArt 専用スタイル
   注意：
   - グローバル衝突回避のため、できるだけスコープクラス（.tensor-table など）を活用
   - base.css はHTML側<link>で読み込むことを推奨。@importは遅延のため非推奨
*/

/* 推奨: HTMLで
   base.css を先に読み込み、このファイルは後段で読み込む、
   どうしても@importを使う場合のみ以下を有効化
*/
/* @import url("../common/base.css"); */

/* ========== スコープ（任意。存在する場合に安全に適用） ========== */
/* .tensor-page や .tensor-table をラッパー要素に付与できると衝突が減る */
.tensor-page .tensor-icon-container,
.tensor-table .tensor-icon-container,
.tensor-icon-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  margin-right: 8px;
}

.tensor-page .tensor-icon-link,
.tensor-table .tensor-icon-link,
.tensor-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: transform 0.12s ease, background-color 0.18s ease, opacity 0.18s ease;
  font-size: 1.12em; /* ベースより少し大きめ */
  line-height: 1;
  text-decoration: none;
  opacity: .85;
  color: inherit; /* 絵文字・アイコンの色は継承 */
}

.tensor-page .tensor-icon-link:hover,
.tensor-table .tensor-icon-link:hover,
.tensor-icon-link:hover {
  background-color: #f0f4ff;
  transform: translateY(-1px) scale(1.08);
  opacity: 1;
}

/* 連続URLの省略記号（…） */
.tensor-page .tensor-ditto,
.tensor-table .tensor-ditto,
.tensor-ditto {
  color: #999;
  vertical-align: middle;
  margin-left: 2px;
}

/* アカウントリンク（既存の .acct-link を尊重しつつ色味だけ強化） */
.tensor-page .acct-link,
.tensor-table .acct-link {
  color: var(--c-primary, #007bff);
  font-weight: 600;
  text-decoration: none;
}
.tensor-page .acct-link:hover,
.tensor-table .acct-link:hover {
  text-decoration: underline;
}

/* テーブル密度を少し高めに（スコープ付きで衝突回避） */
.tensor-page table th,
.tensor-page table td,
.tensor-table th,
.tensor-table td {
  padding: 8px 10px;
}

@media (max-width: 768px) {
  .tensor-page table th,
  .tensor-page table td,
  .tensor-table th,
  .tensor-table td {
    padding: 7px 8px;
  }

  /* モバイルでアイコンを少しだけ小さく */
  .tensor-page .tensor-icon-link,
  .tensor-table .tensor-icon-link,
  .tensor-icon-link {
    font-size: 1.02em;
  }
}

/* ローディング/エラー用（共通CSSの.loading-row/.loading-cellがあればそれを優先） */
.tensor-page .loading-cell,
.tensor-table .loading-cell {
  text-align: center;
  padding: 14px;
}

/* もしSVGアイコン化する場合の推奨クラス（将来拡張用） */
.tensor-icon-svg {
  width: 20px;
  height: 20px;
  display: block;
}
@media (max-width: 768px) {
  .tensor-icon-svg { width: 18px; height: 18px; }
}
