/* ══════════════════════════════════════════════
   テーマ 26c（7色ラインは27aのやわらげた色。本文の銀色の光は止めた）
   ・本文：オフホワイト＋大きなダイヤの透かし（64px格子）
   ・ヘッダー：白地＋細線のダイヤ格子（22b）＋下端に流れる7色ライン（25a）
   ・フッター：現行の黒（15c）のまま＋上端に流れる7色ライン
   premium_gallery_theme.css の「後」に読み込む上書きファイル。
   このファイルの <link> を外せば、現行テーマ（黒ヘッダー＋アイボリー）に戻る。
   ══════════════════════════════════════════════ */

html body {
  --text: #252422;
  --text-muted: #64625d;
  --text-dim: #64625d;
  --border: #e3e2de;
  --line: #e3e2de;
  --line-strong: #252422;
  --brand-yellow: #b99653;
  --gold-text: #8a6d2f;
  --rgb-line: linear-gradient(90deg, #e86a6a, #e8a85a, #e0c96a, #7cc79a, #6ab8d8, #7a8fd8, #a77ad8, #e86a6a);
  /* 64px × √2。ページの長さによる格子のずれを防ぐ。 */
  --lattice-tile: 90.509668px;
  --lattice-64:
    repeating-linear-gradient(45deg, rgba(185, 150, 83, .09) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(-45deg, rgba(185, 150, 83, .09) 0 1px, transparent 1px 64px);
  position: relative;
  isolation: isolate;
  background-color: #f6f6f4 !important;
  background-image: var(--lattice-64) !important;
  background-size: var(--lattice-tile) var(--lattice-tile) !important;
  background-position: 0 0 !important;
  color: var(--text);
}

/* ── ヘッダー：白地＋細線のダイヤ格子＋放射光＋下端の7色ライン ──
   7色ラインは1枚目の背景レイヤー（高さ3px、横に繰り返し）。枠と角マークは既存の ::before / ::after の色だけ変更 */
html body .app-header {
  background-color: #ffffff !important;
  background-image:
    var(--rgb-line),
    radial-gradient(ellipse 420px 180px at 8% 0%, rgba(185, 150, 83, .14), transparent 68%),
    radial-gradient(ellipse 420px 180px at 100% 100%, rgba(185, 150, 83, .08), transparent 68%),
    repeating-linear-gradient(45deg, rgba(185, 150, 83, .09) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(185, 150, 83, .09) 0 1px, transparent 1px 14px) !important;
  background-size: 300% 3px, auto, auto, auto, auto !important;
  background-repeat: repeat-x, no-repeat, no-repeat, repeat, repeat !important;
  /* !important を付けるとキーフレームの位置指定が効かず、ラインが停止する。 */
  background-position: 0% 100%, 0 0, 0 0, 0 0, 0 0;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06) !important;
  color: var(--text) !important;
  animation: gvc-rgbflow-header 6s linear infinite;
}
@keyframes gvc-rgbflow-header {
  from { background-position: 0% 100%, 0 0, 0 0, 0 0, 0 0; }
  /* 幅300%の背景を右へ1周期分動かす（要素幅と背景幅の差は -200%）。 */
  to   { background-position: -150% 100%, 0 0, 0 0, 0 0, 0 0; }
}
html body .app-header::before {
  border-color: rgba(185, 150, 83, .45) !important;
}
html body .app-header::after {
  background:
    linear-gradient(rgba(138, 109, 47, .8), rgba(138, 109, 47, .8)) top left / 16px 1px no-repeat,
    linear-gradient(rgba(138, 109, 47, .8), rgba(138, 109, 47, .8)) top left / 1px 16px no-repeat,
    linear-gradient(rgba(138, 109, 47, .8), rgba(138, 109, 47, .8)) bottom right / 16px 1px no-repeat,
    linear-gradient(rgba(138, 109, 47, .8), rgba(138, 109, 47, .8)) bottom right / 1px 16px no-repeat !important;
}

/* 画面名（SALES DASHBOARD 等）は金、サブタイトルはグレー */
html body .app-header h1 {
  color: var(--gold-text) !important;
}
html body .app-header .sub {
  color: #64625d !important;
}

/* 会員情報：名前は黒、会員IDは金、来店日はグレー */
html body .app-header .search-wrap {
  border-top-color: rgba(185, 150, 83, .35) !important;
}
html body .app-header .verified-at-group .input-group-label {
  color: #5f5d58 !important;
}
/* 共通テーマに後から追加された4画面へのリンクも、白いヘッダーに合わせる。 */
/* ヘッダーのボタンは、フッターのボタン（黒地に白6%の重ね）が実際に見える色を白地の上でも単色で再現する。
   通常は rgb(35,34,29)、ホバーは金18%の重ねの rgb(51,43,27)。 */
html body .app-header-nav__link {
  background: #23221d;
  color: #fff;
}
html body .app-header-nav__link:hover,
html body .app-header-nav__link:focus-visible {
  background: #332b1b;
}
html body .app-header-nav__link[aria-current="page"] {
  background: #e0c787;
  color: #15140f;
}
html body .app-header.member-header #ownerNameInput,
html body .app-header.member-header #currentOwnerName,
html body .app-header.member-header #ownerName {
  color: var(--text) !important;
}
html body .app-header.member-header #memberIdInput,
html body .app-header.member-header #currentMemberId,
html body .app-header.member-header #memberId {
  color: var(--gold-text) !important;
}
html body .app-header.member-header #verifiedAtInput,
html body .app-header.member-header #currentVerifiedAt,
html body .app-header.member-header #verifiedAt {
  color: #5f5d58 !important;
}

/* ── フッター：現行の黒（15c）のまま、上端に7色ラインだけ追加 ──
   既存の放射光2枚はそのまま残し、1枚目に7色ラインのレイヤーを足す */
html body .app-brand-footer {
  border-top: 0 !important;
  background-color: #15140f !important;
  background-image:
    var(--rgb-line),
    radial-gradient(ellipse 420px 180px at 8% 0%, rgba(185, 150, 83, .16), transparent 68%),
    radial-gradient(ellipse 420px 180px at 100% 100%, rgba(185, 150, 83, .10), transparent 68%) !important;
  background-size: 300% 3px, auto, auto !important;
  background-repeat: repeat-x, no-repeat, no-repeat !important;
  background-position: 0% 0%, 0 0, 0 0;
  animation: gvc-rgbflow-footer 6s linear infinite;
}
@keyframes gvc-rgbflow-footer {
  from { background-position: 0% 0%, 0 0, 0 0; }
  to   { background-position: -150% 0%, 0 0, 0 0; }
}

/* ── 本文 ── */
html body .sec-title,
html body.page-index .section-heading {
  border-bottom-color: var(--line-strong) !important;
}
html body .kpi-hero {
  background: #f3eee2 !important;
  border-color: #cbb684 !important;
}
html body .kpi-card .k-value {
  color: var(--gold-text) !important;
}
html body.page-index .tab-button.active,
html body .tab-btn.active {
  border-bottom-color: var(--gold-text) !important;
  color: var(--text) !important;
}

/* 動きを減らす設定の端末では、7色ラインの流れを止める（色と模様はそのまま） */
@media (prefers-reduced-motion: reduce) {
  html body .app-header,
  html body .app-brand-footer { animation: none; }
}