/*
 * Schema.org 構造化データ生成ツール（ショートコード [om_schema_org_tool] / post 22885）
 *
 * 【2026-09-02 に xyz-ips スニペットから移設】
 * 移設前は記事本文の <style> にベタ書きで、色は Google の 4 色（#4285f4 / #34a853 /
 * #fbbc04 / #ea4335）とクリーム色の背景（#fff8e1）で組まれていた。どちらも CLAUDE.md の
 * 禁止事項（Google 4 色の多用・暖色系の背景色）に当たるため、v3 のトークンへ置き換えている。
 *
 * 変数は --om-* を使う（グローバルの :root に定義がある唯一のセット）。接頭辞なしの
 * --primary 等は body.om-ad-traffic でしか定義されず、オーガニック訪問者では var() が
 * 解決せずに宣言ごと落ちる（2026-05-21 / 2026-07-16 に同じ事故が 2 回）。
 *
 * .om-schema__cta は本文リンクの一括指定に負けないよう、site-base.css の除外リストへ
 * 登録済み（登録を忘れると背景は出るのに文字色だけ青い素リンクになる）。
 */

.om-schema [hidden] {
  display: none !important;
}

.om-schema {
  margin: 2em 0;
}

/* ---- パネル ---------------------------------------------------------- */

.om-schema__panel {
  background: var(--om-bg-page);
  border: 1px solid var(--om-border);
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 20px;
}

.om-schema__heading {
  font-size: 1.05rem;
  color: var(--om-primary);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--om-primary-tint);
}

.om-schema__heading--sub {
  margin-top: 28px;
}

.om-schema__lead {
  color: var(--om-text-2);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.om-schema__hint {
  font-size: 0.8rem;
  color: var(--om-text-2);
  margin: 6px 0 0;
}

.om-schema__placeholder {
  text-align: center;
  color: var(--om-text-2);
  background: var(--om-bg-alt);
}

.om-schema__placeholder p {
  margin: 0;
}

/* ---- 入力欄 ---------------------------------------------------------- */

.om-schema__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.om-schema__field {
  margin-bottom: 16px;
}

.om-schema__label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--om-text-1);
  margin-bottom: 6px;
}

.om-schema__input,
.om-schema__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--om-border);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--om-text-1);
  background: var(--om-bg-page);
}

.om-schema__input:focus,
.om-schema__textarea:focus {
  outline: 2px solid var(--om-primary-light);
  outline-offset: 1px;
  border-color: var(--om-primary-light);
}

.om-schema__input[readonly],
.om-schema__textarea[readonly] {
  background: var(--om-bg-alt);
  cursor: default;
}

.om-schema__textarea {
  min-height: 120px;
  resize: vertical;
}

/* Google のオートコンプリート要素は自前の shadow DOM を持つので、枠だけ合わせる。 */
.om-schema__autocomplete gmp-basic-place-autocomplete {
  display: block;
  width: 100%;
}

/* ---- カテゴリーと @type --------------------------------------------- */

.om-schema__badges {
  margin-top: 8px;
}

.om-schema__badge {
  display: inline-block;
  background: var(--om-primary-tint);
  color: var(--om-primary-dark);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  margin: 2px 4px 2px 0;
}

.om-schema__badge--empty {
  background: transparent;
  color: var(--om-text-2);
  padding-left: 0;
}

.om-schema__type {
  margin-top: 10px;
}

.om-schema__type-value {
  display: inline-block;
  background: var(--om-primary);
  color: var(--om-bg-page);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* 一致するカテゴリーが無く LocalBusiness へ落ちた時は、確定した値と見分けられるようにする。 */
.om-schema__type-value--default {
  background: var(--om-bg-alt);
  color: var(--om-text-1);
  border: 1px solid var(--om-border);
}

.om-schema__type-note {
  font-size: 0.8rem;
  color: var(--om-text-2);
  margin-left: 8px;
}

/* ---- 画像 ------------------------------------------------------------ */

.om-schema__preview {
  margin-top: 8px;
}

.om-schema__preview img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.om-schema__no-image {
  background: var(--om-bg-alt);
  color: var(--om-text-2);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.85rem;
}

/* ---- メールアドレス欄 ------------------------------------------------ */

.om-schema__gate {
  background: var(--om-bg-alt);
  border: 1px solid var(--om-border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
}

.om-schema__gate-note {
  color: var(--om-text-2);
  font-size: 0.85rem;
  margin: 0 0 12px;
}

.om-schema__input--email {
  background: var(--om-bg-page);
}

.om-schema__input--valid {
  border-color: var(--om-primary-light);
}

.om-schema__input--invalid {
  border-color: var(--om-cta);
}

.om-schema__error {
  color: var(--om-cta);
  font-size: 0.8rem;
  margin: 6px 0 0;
}

/* ---- ボタン ---------------------------------------------------------- */

/* ボタンとコピー後の CTA は同じ配色。色を 1 箇所で決めて、片方だけ変わる崩れを防ぐ。 */
.om-schema__button,
.om-schema__cta {
  background: var(--om-cta);
  color: var(--om-bg-page);
  border: none;
  border-radius: 4px;
  font-weight: 700;
}

.om-schema__button:hover:not(:disabled),
.om-schema__cta:hover,
.om-schema__cta:focus {
  background: var(--om-cta-hover);
  color: var(--om-bg-page);
}

.om-schema__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 0.95rem;
  cursor: pointer;
}

.om-schema__button:disabled {
  background: var(--om-bg-alt);
  color: var(--om-text-2);
  cursor: not-allowed;
}

.om-schema__icon {
  flex: none;
}

/* ---- コピー後 -------------------------------------------------------- */

.om-schema__success {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--om-bg-alt);
  border: 1px solid var(--om-border);
  border-radius: 4px;
}

.om-schema__success-title {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--om-primary);
  font-size: 0.9rem;
}

.om-schema__success-body {
  margin: 0 0 12px;
  color: var(--om-text-1);
  font-size: 0.85rem;
  line-height: 1.8;
}

.om-schema__cta {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 0.85rem;
}

.om-schema__cta:hover,
.om-schema__cta:focus {
  text-decoration: none;
}

/* ---- 表示できない時 -------------------------------------------------- */

.om-schema-notice {
  color: var(--om-text-2);
}

.om-schema-notice__admin {
  color: var(--om-cta);
  font-size: 0.85rem;
}

/* ---- 狭い画面 -------------------------------------------------------- */

/* 設計書のモバイル上限に合わせる（docs/design-system/01_design-tokens.md）。 */
@media (max-width: 768px) {
  .om-schema__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .om-schema__panel {
    padding: 16px;
  }
}