の下に #browser-tbody がある構造 */ .toppage-icons-scope #browser-tbody td { position: relative; box-sizing: border-box; /* セルはみ出し計算を安定化 */ } /* 票の中セル（リンクを列で並べる場合） */ .toppage-icons-scope #browser-tbody td.has-link { padding: 0; /* 内側で .service-link に余白を持たせる */ vertical-align: top; } /* リンクの縦積みコンテナ（1セル内に複数行のリンクが入る想定） */ .toppage-icons-scope .link-container { display: flex; flex-direction: column; gap: 8px; height: 100%; min-width: 0; /* テキスト省略を有効化 */ } /* サービスリンク（アイコン+テキスト） */ .toppage-icons-scope .service-link { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: #1a4b7a; transition: background-color .2s, color .2s, outline-color .2s; width: 100%; box-sizing: border-box; line-height: 1.1; } .toppage-icons-scope .service-link:hover, .toppage-icons-scope .service-link:focus-visible { background: #f5f8ff; text-decoration: none; outline: 2px solid #6aa9ff; outline-offset: 2px; } /* サービス丸アイコン（PNG/SVG両対応・欠損耐性） */ .toppage-icons-scope .service-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: contain; /* PNGもSVGも綺麗に収める */ background: #f0f0f0; flex-shrink: 0; display: inline-block; } .toppage-icons-scope .service-icon:not([src]), .toppage-icons-scope .service-icon[src=""] { visibility: hidden; /* 画像未設定/空を不可視に */ } /* onerror等で付与して隠す用途（後方互換） */ .toppage-icons-scope .icon-error { display: none !important; } /* テキスト情報（縦積み） */ .toppage-icons-scope .service-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; /* 省略記号用 */ } .toppage-icons-scope .service-name { font-weight: 600; color: #0f2f4f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toppage-icons-scope .service-note { font-size: 0.70rem; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 明示的な省略ユーティリティ（旧 .no-overflow は廃止） */ .toppage-icons-scope .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toppage-icons-scope .cell-ellipsis { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Civitai専用の2段構成ラッパ（共通UIとして必要最低限は残す） */ .toppage-icons-scope .civitai-cell .line1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; /* 長いIDでも折返し可 */ min-width: 0; } .toppage-icons-scope .civitai-cell .line2 { margin-top: 2px; } /* トップページ上部の丸アイコングリッド（汎用） */ .toppage-icons-scope .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px; margin: 16px auto; max-width: 720px; } .toppage-icons-scope .icon-card { text-align: center; font-size: 11px; color: #666; } .toppage-icons-scope .icon-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 1px solid #ddd; display: block; margin: 0 auto 4px; background: #f5f5f5; } .toppage-icons-scope .icon-title { margin: 14px 0 6px; font-weight: 700; } /* レスポンシブ最小縮小 */ @media (max-width: 768px) { .toppage-icons-scope .service-icon { width: 20px; height: 20px; } }