/* toppage_styles.css
 * トップページ（index.html） + ブラウザ対応表専用 軽量CSS
 * 更新日: 2026-04-22 (縦長完全対策・横並び強化版)
 */

:root {
  --color-background:      white;
  --color-link:             dodgerblue;
  --color-link-hover:       mediumblue;
  --color-button-green:     rgb(208, 252, 208);
  --color-button-green-hover: lightcyan;
  --color-button-blue:       lightblue;
  --color-button-blue-hover: lightsteelblue;
  --font-size-base:         16px;
  --border-color:           lightgray;
  --table-bg:               #f9f9f9;
  --table-row-hover-bg:     #f0f8ff;
}

* { box-sizing: border-box; }

body {
  text-align: center;
  font-family: Arial, 'Noto Color Emoji', 'Segoe UI', sans-serif;
  line-height: 1.45;
  margin: 20px;
  background-color: var(--color-background);
}

.center { text-align: center; margin: 0 auto; }

/* ツールリスト */
.tools-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.tools-list li {
  display: inline-block;
  margin: 0 10px;
}

.tools-list li a {
  color: var(--color-link);
  text-decoration: none;
}

.tools-list li a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* テーブル */
.table-responsive { overflow-x: auto; margin: 20px auto; }

table {
  border-collapse: collapse;
  margin: 0 auto;
  background-color: var(--table-bg);
  width: 100%;
  max-width: 960px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

th, td {
  border: 1px solid var(--border-color);
  padding: 7px 6px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.3;
}

#browser-table th {
  background-color: #f0f0f0;
  font-weight: bold;
  padding: 10px 6px;
}

/* Civitai列（1列目）の縦長対策 */
#browser-table td:first-child {
  padding: 6px 8px !important;
  min-width: 175px;
}

/* Civitaiセル横並び強制 */
.civitai-cell {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 4px 8px;
  line-height: 1.25;
}

.civitai-cell strong,
.civitai-cell .acct-link {
  white-space: nowrap;
  margin-right: 6px;
  font-weight: bold;
}

.link-icons {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.icon-link:hover {
  background-color: #f0f8ff;
  transform: scale(1.15);
}

.icon-link img {
  width: 19px;
  height: 19px;
}

/* その他 */
.new-tab-icon { margin-left: 4px; opacity: 0.75; }
.red_mini_memo { font-size: 0.75rem; color: #d32f2f; margin-top: 2px; }
.memo_small_font { font-size: 0.75rem; color: #555; margin-top: 2px; }

/* ブラウザ別色 */
.chrome-link  { color: #4285f4; }
.firefox-link { color: #ff7139; }
.edge-link    { color: #00a4ef; }
.brave-link   { color: #ff4d4d; }
.vivaldi-link { color: #8a6eff; }
.safari-link  { color: #1a9f6b; }
.rakuten-link { color: #e60012; font-weight: bold; }

/* レスポンシブ */
@media screen and (max-width: 767px) {
  th, td { padding: 6px 4px !important; font-size: 13.5px; }
  .civitai-cell { gap: 3px 6px; }
  .icon-link img { width: 17px; height: 17px; }
}