/* ---------------------------------------------------------------------------
 * type-a への追補。デモに無い部品をここに足す（hall-aio.css は生成物なので
 * 手で触らない）。追加した理由を必ず書くこと。
 * ------------------------------------------------------------------------- */

/* Google マップの実埋め込み。デモは装飾の .ha-map だけだが、現行仕様では
 * 実際の地図を埋め込む。装飾用の道路線（::before/::after）は消す。 */
.ha-map--embed { position: relative; min-height: 280px; }
.ha-map--embed::before, .ha-map--embed::after { content: none; }
.ha-map--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* 多列データ表（店舗比較・新台一覧）。type-a の .ha-table は定義表（2列）
 * 前提のため、列見出しつきの表では th 幅の固定を外し、横スクロールを許す。 */
.ha-table--data { display: block; overflow-x: auto; white-space: nowrap; }
.ha-table--data th { width: auto; }

/* ページ最終更新日（公式サイト構築仕様書 §3-3）。全ページのフッタ先頭に出す。
 * デモに無い部品のため追補。フッタの階調（#b7b7b7 系）に合わせて控えめにする。 */
.ha-footer .ha-updated { margin-bottom: 6px; color: #8f8f8f; font-size: 10px; }

/* 記事内画像（image ブロック）。テキストが主・画像は補助（仕様書 §1）。 */
.ha-prose .ha-article-figure { margin: 14px 0; }
.ha-prose .ha-article-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ---------------------------------------------------------------------------
 * 12ページ構成の共通部品（2026-08-27 移設）。
 * デザイナー版（2026-08-18）の逆輸入時に tenants/himawari/brand.css（法人
 * レイヤー）へ入っていた全法人共通の構造ルールを、規約どおり共通レイヤーへ
 * 移した。色はテナント変数（--ha-accent 等）経由で、ひまわりは brand.css の
 * 変数定義により従来色のまま（typea 計測ハーネスで不変を確認）。
 * 二法人目（モナコパレス）でナビ折り返し・新台情報の未装飾として顕在化した。
 * ------------------------------------------------------------------------- */

/* グローバルナビ（店舗）: 項目数に関わらず1段に収める。
 * hall-aio.css の既定は repeat(6) で、12ページ構成の9項目が2段に折り返す。
 * 列を自動生成（列方向の流し込み）にすると、9項目でも8項目（データ未着で
 * ページが減った店舗）でも等分1段になる。ひまわりの brand.css にある
 * repeat(9) は計測値（grid-template-columns）を変えないために残している。 */
.ha-desktop-nav--store {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* 出典・確認日の注記（デザイナー版 2026-08-18）。左罫はテナント変数
 * --ha-active（ひまわり=緑 / モナコパレス=赤）、リンクは --ha-accent。
 * margin の !important はひまわり brand.css 時代の値をそのまま踏襲
 * （.ha-body 外に置かれた場合でも間隔が保たれるようにしている）。 */
.ha-source-note {
  margin: 12px 0 0 !important;
  padding: 10px 12px;
  color: var(--ha-sub);
  background: var(--ha-soft);
  border-left: 3px solid var(--ha-active);
  border-radius: 0;
  font-size: 11px;
  line-height: 1.8;
}

.ha-source-note a {
  color: var(--ha-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ha-table + .ha-source-note {
  margin-top: 12px !important;
}

/* トップの新台情報「最新掲載1件」レイアウト（デザイナー版 2026-08-18）。
 * 日付チップの地色のみテナント変数（--ha-accent）。 */
.ha-front-top .ha-home-new-latest {
  position: relative;
  overflow: hidden;
}

.ha-front-top .ha-home-new-latest-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 14px 16px;
}

.ha-front-top .ha-home-new-latest-copy {
  padding: 15px;
}

.ha-front-top .ha-home-new-latest-date {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: center;
  margin: 0;
  color: #444;
  font-size: 11px;
  line-height: 1.6;
}

.ha-front-top .ha-home-new-latest-date span {
  padding: 3px 7px;
  color: #fff;
  background: var(--ha-accent);
  font-weight: 700;
}

.ha-front-top .ha-home-new-latest-date strong {
  font-weight: 700;
}

.ha-front-top .ha-home-new-latest-copy h3 {
  margin: 11px 0 0;
  padding: 12px 20px;
  color: var(--ha-ink);
  background: transparent;
  border: 1px solid var(--ha-border);
  border-left: 7px solid #888;
  border-radius: 0;
  font-size: 17px;
  line-height: 1.55;
}

.ha-front-top .ha-home-new-latest-copy > p:not(.ha-home-new-latest-date) {
  margin-top: 8px;
  color: #444;
  font-size: 12px;
  line-height: 1.8;
}

@media screen and (min-width: 960px) {
  .ha-front-top .ha-home-new-latest-layout {
    padding: 0 32px 24px;
  }

  .ha-front-top .ha-home-new-latest-copy {
    padding: 22px;
  }

  .ha-front-top .ha-home-new-latest-copy h3 {
    font-size: 21px;
  }

  .ha-front-top .ha-home-new-latest-date,
  .ha-front-top .ha-home-new-latest-copy > p:not(.ha-home-new-latest-date) {
    font-size: 13px;
  }
}

@media screen and (min-width: 600px) and (max-width: 959px) {
  .ha-front-top .ha-home-new-latest-layout {
    padding-right: 24px;
    padding-bottom: 20px;
    padding-left: 24px;
  }
}

/* おすすめ機種ページ（/machines/weekly/）の機種カード。店舗TOPの
 * 「おすすめ機種」セクション（.ha-home-new-latest）と同じ見た目に揃える
 * （バッジ＋掲載数の行、左に太い罫のある機種名、補足文）。2026-09-17 */
.ha-prose .ha-reco {
  margin-top: 12px;
}

.ha-prose .ha-reco-date {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: center;
  margin: 0;
  color: #444;
  font-size: 11px;
  line-height: 1.6;
}

.ha-prose .ha-reco-date span {
  padding: 3px 7px;
  color: #fff;
  background: var(--ha-accent);
  font-weight: 700;
}

.ha-prose .ha-reco-date strong {
  font-weight: 700;
}

.ha-prose .ha-reco-item h3 {
  margin: 11px 0 0;
  padding: 12px 20px;
  color: var(--ha-ink);
  background: transparent;
  border: 1px solid var(--ha-border);
  border-left: 7px solid #888;
  border-radius: 0;
  font-size: 17px;
  line-height: 1.55;
}

.ha-prose .ha-reco-item h3 small {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 7px;
  color: #555;
  background: #f1f1f1;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}

.ha-prose .ha-reco-item h3 a {
  color: inherit;
  text-decoration: none;
}

.ha-prose .ha-reco-item h3 a:hover,
.ha-prose .ha-reco-item h3 a:focus-visible {
  color: var(--ha-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ha-prose .ha-reco-item p {
  margin: 6px 0 0 27px;
  color: #444;
  font-size: 12px;
  line-height: 1.8;
}

.ha-prose .ha-reco + p {
  margin-top: 16px;
}

@media screen and (min-width: 960px) {
  .ha-prose .ha-reco-item h3 {
    font-size: 21px;
  }

  .ha-prose .ha-reco-date,
  .ha-prose .ha-reco-item p {
    font-size: 13px;
  }
}