:root {
  --mt-bg: #f3f7fb;
  --mt-bg-soft: #edf4f6;
  --mt-text: #1f2937;
  --mt-muted: #5f6f82;
  --mt-line: rgba(30, 41, 59, .12);
  --mt-blue: #2563eb;
  --mt-blue-dark: #1d4ed8;
  --mt-teal: #0f766e;
  --mt-green: #15803d;
  --mt-shadow: 0 18px 50px rgba(15, 23, 42, .10);
}

/* MasaTools 共通ナビゲーション */
.mt-sitebar {
  position: sticky;
  top: 0;
  z-index: 1000;
  color: var(--mt-text);
  background: rgba(245, 248, 251, .9);
  border-bottom: 1px solid var(--mt-line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.mt-sitebar__inner {
  width: min(100% - 40px, 1180px);
  min-height: 58px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.mt-sitebar__brand,
.mt-sitebar__back {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.mt-sitebar__brand { gap: 10px; font-weight: 800; letter-spacing: .02em; }
.mt-sitebar__mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--mt-blue), #14b8a6);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .22);
}
.mt-sitebar__back { gap: 6px; color: var(--mt-muted); font-size: 15px; }
.mt-sitebar__back:hover { color: var(--mt-blue); }
.mt-sitebar__back::before { content: "←"; }

/* 紹介ページの共通トーン。アプリ固有のアクセント色はページ側で指定する。 */
body.mt-product-page {
  --mt-product-accent: var(--mt-blue);
  --mt-product-accent-dark: var(--mt-blue-dark);
  --mt-product-soft: rgba(37, 99, 235, .12);
  --mt-product-border: rgba(37, 99, 235, .3);
  color: var(--mt-text);
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 99, 235, .13), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(20, 184, 166, .14), transparent 28%),
    linear-gradient(135deg, var(--mt-bg), var(--mt-bg-soft));
}
body.mt-product-android { --mt-product-accent: #22c55e; --mt-product-accent-dark: var(--mt-green); --mt-product-soft: rgba(34, 197, 94, .14); --mt-product-border: rgba(21, 128, 61, .32); }
body.mt-product-web { --mt-product-accent: #14b8a6; --mt-product-accent-dark: var(--mt-teal); --mt-product-soft: rgba(20, 184, 166, .14); --mt-product-border: rgba(15, 118, 110, .3); }

body.mt-product-page .mt-product-label {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--mt-product-accent-dark);
  background: var(--mt-product-soft);
  font-size: 13px;
  font-weight: 700;
}
body.mt-product-page .mt-simple-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mt-line);
}
body.mt-product-page .mt-simple-hero__icon {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}
body.mt-product-page .mt-simple-hero__copy { min-width: 0; }
body.mt-product-page .mt-simple-hero h1 { margin-top: 7px; }
body.mt-product-page .mt-primary-action {
  color: #fff !important;
  background: linear-gradient(135deg, var(--mt-product-accent), var(--mt-product-accent-dark)) !important;
  border-color: transparent !important;
}
body.mt-product-page .mt-secondary-action {
  color: var(--mt-product-accent-dark) !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--mt-product-border) !important;
}
body.mt-product-page :is(.button, .btn, .links a) {
  min-height: 48px;
  border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
body.mt-product-page :is(.button, .btn, .links a):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}
body.mt-product-page :is(.cta-row, .actions, .links) { gap: 10px; }

/* トップページの主・副ボタンを明確に分ける。 */
.card .button.secondary {
  color: var(--accent-dark);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(37, 99, 235, .24);
}
.card-web .button.secondary { color: var(--teal); border-color: rgba(15, 118, 110, .28); }
.card-android .button.secondary { color: var(--green); border-color: rgba(21, 128, 61, .28); }

/* 配布ファイルの更新日時。ページ本文の編集日時とは区別する。 */
p.mt-release-info {
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
}
.mt-release-info time { display: inline-block; }

@media (max-width: 640px) {
  .mt-sitebar__inner { width: min(100% - 28px, 1180px); min-height: 54px; }
  .mt-sitebar__mark { width: 28px; height: 28px; border-radius: 9px; }
  .mt-sitebar__back { font-size: 13px; }
  body.mt-product-page .mt-simple-hero { align-items: flex-start; }
  body.mt-product-page .mt-simple-hero__icon { width: 62px; height: 62px; border-radius: 15px; }
  body.mt-product-page :is(.cta-row, .actions, .links) > :is(a, button) {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }
}