/* 一覧（/）のタイルの格子（2026-10-07 夜。社長「画面が見にくいのでブラッシュアップしてください。」）。一覧だけが読み込む。
   スマホ（〜559px）は 2列・タブレットは 3列・広い画面は 4列。組ごとに <ul> を分ける＝組の違う物が、同じ行に横に並ばない（法務部の条件）。
   タイルの全体が 1つのリンク。字は 4段: 組の見出し 14px・名前 14px 太字・説明 13px（2行で切る。全文は /apps/<id>）・札 12px */
/* 一覧の大きな題（h1）は、すぐ上の帯（左上）に同じ名前が出ているので、見た目だけ隠す（読み上げと検索には残る）。最初の 1画面に、タイルを多く入れるため */
.main > h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.main { padding-top: 12px; }
.shelf-title { font-size: 16px; margin: 0 0 2px; }
.shelf-note { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 6px; }
/* 2026-10-13: 組が、会社のキャッチフレーズと同じ 3つの大項目（AI・暗号資産・メタバース）になったので、見出しを少し強く（15px・本文の色・左の線） */
.tile-group { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--text); margin: 10px 0 4px; padding-left: 8px; border-left: 4px solid var(--link); }
.tiles { list-style: none; padding: 0; margin: 0 0 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tiles > li { margin: 0; display: flex; min-width: 0; }
.tile { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; min-height: 44px; padding: 8px; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; }
.tile:hover { background: #f1f5fb; }
.tile:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.tile-head { display: flex; gap: 8px; align-items: center; min-height: 40px; }
.tile-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: #e6eaf1; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; }
.tile-name { font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--link); min-width: 0; overflow-wrap: anywhere; }
.tile-sum { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tile-note { font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.tile .chips { gap: 4px; margin-top: auto; }
.tile .chip { font-size: 12px; line-height: 1.4; padding: 1px 7px; }
.tiles-dev .tile-name { color: var(--text); }
.shelf-gap { margin-top: 18px; }
.page-links { list-style: none; padding: 0; margin: 0; }
.page-links li { margin: 0; }
.page-links a { display: flex; align-items: center; min-height: 44px; }
.below { margin-top: 18px; }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 2026-10-07 23:3x 社長「PCブラウザだと若干横に寄ってますね。バランスが悪いようです。」: 広い画面（720px〜）は 4列だが、組のタイルが 3つだと右の 1列が空き、左に寄って見えた。
   → 720px から上だけ、タイルの数が 2・3・5・6・9 の格子は、その数で幅いっぱいに割る（3つ＝3等分・5つ＝5等分・6つと 9つ＝3列）。4つ・8つは 4列のまま。
   1つ・7つ・10から上は、4列のまま（最後の行の右が空く）。:has() を読めない古いブラウザは、前の 4列のまま。スマホ（2列）と 560〜719px（3列）は変えていない。字・並びの順は変えていない */
@media (min-width: 720px) {
  .tiles:has(> li:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles:has(> li:last-child:nth-child(3)),
  .tiles:has(> li:last-child:nth-child(6)),
  .tiles:has(> li:last-child:nth-child(9)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles:has(> li:last-child:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}