/* サイトのページ（トップの案内ページ・Privacy・Terms・Contact）の UI 規格。
   見た目は data-uispec の値そのものをセレクタにして書く — 同じ規格なら同じ見た目になる。規格の一覧は SITE.md。
   土台（背景・文字・page.document の枠 = .page）は legal.css。 */

/* 英語の添え書き（日本語の下に小さく） */
.text-en {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* image.hero — ページ最上部の大きな絵。横長に切り出す（元は縦長。顔と花が入る位置 object-position で選ぶ）。
   枠の中に収め、角は page.document に合わせて丸める */
[data-uispec="image.hero"] {
  margin: 0 0 20px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}

[data-uispec="image.hero"] img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 36%;
}

.site-intro h1 {
  margin-bottom: 8px;
}

.site-intro p {
  margin: 0 0 4px;
}

/* nav.site — ページの上で、サイトの中を行き来するリンクの列 */
[data-uispec="nav.site"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 14px;
  padding: 2px 0 6px;
}

/* 隅ラベルを出しているとき（手元。公開サイトの訪問者には出さない）だけ、上に帯を空ける。
   狭い画面で列が折り返すと、1 行目の右端のリンクにラベルが重なるため */
body:not(.ui-region-tags-off) [data-uispec="nav.site"] {
  padding-top: 18px;
}

/* nav.legal — 規約などへのリンクの列（トップの下端。TrainingDraw の画面の .legal-links と同じ役割） */
[data-uispec="nav.legal"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

[data-uispec="nav.site"] a,
[data-uispec="nav.legal"] a {
  text-decoration: none;
}

[data-uispec="nav.site"] a:hover,
[data-uispec="nav.legal"] a:hover {
  text-decoration: underline;
}

/* list.card — カードを縦に並べる一覧（1 列）。
   上端 16px は一覧そのものの隅ラベル用（カードの隅ラベルと重ねない） */
[data-uispec="list.card"] {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* card.app — アプリへの入口。カード全体が 1 つのリンク。上の帯はアプリごとの色を --band で渡す（規格は同じ） */
[data-uispec="card.app"] {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition:
    border-color 120ms,
    box-shadow 120ms,
    transform 120ms;
}

[data-uispec="card.app"]:hover {
  border-color: var(--ink-soft);
  box-shadow: 0 6px 18px rgba(23, 32, 49, 0.08);
  transform: translateY(-1px);
}

[data-uispec="card.app"]:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* 中は 2 列: 左に正方形のスクリーンショット、右にリンクの文。色の帯は 2 列にまたがって上端に置く */
[data-uispec="card.app"] > a {
  display: grid;
  grid-template-columns: var(--shot-size, 168px) 1fr;
  align-items: start;
  gap: 0 16px;
  height: 100%;
  /* 下の 18px は隅ラベル（左下・高さ 14px）の帯。狭いと「開く」とラベルが横に重なるので、縦で分ける */
  padding: 0 16px 18px;
  color: inherit;
  text-decoration: none;
}

[data-uispec="card.app"] > a:focus-visible {
  outline: none;
}

.app-card-band {
  display: block;
  grid-column: 1 / -1;
  height: 10px;
  margin: 0 -16px 14px;
  background: var(--band, var(--line));
}

/* 正方形のスクリーンショット（480x480 の画像を --shot-size に縮めて出す） */
.app-card-shot {
  display: block;
  width: var(--shot-size, 168px);
  height: var(--shot-size, 168px);
  border-radius: 8px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.app-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
  min-width: 0;
}

.app-card-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}

.app-card-desc {
  color: var(--ink-soft);
  line-height: 1.6;
}

/* 使える環境などの注記（小さく、説明の下に） */
.app-card-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.app-card-go {
  margin-top: auto;
  padding-top: 6px;
  align-self: flex-end;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 520px) {
  [data-uispec="card.app"] {
    --shot-size: 112px;
  }

  [data-uispec="card.app"] > a {
    gap: 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-uispec="card.app"] {
    transition: none;
  }

  [data-uispec="card.app"]:hover {
    transform: none;
  }
}