/* ============================================================================
   ⚠️  DO NOT EDIT  ⚠️
   ============================================================================
   8ブロックグリッドフレーム本体（fff-grid）

   このファイルはテーマの「土台」です。
   配置・色・フォント・装飾の調整は theme.css 側で行うこと。

   仕様:
   - 横 8 マス固定（PC・タブレット・スマホ共通）
   - マスは正方形（JS が cell サイズを計算して --fff-grid-cell-size を設定）
   - マス間 / 上下左右端 = すべて 5px の余白（gap + padding）
   - 累積誤差ゼロ（CSS Grid の 1fr で完全等分）
   - PC: 1440px 頭打ち + 中央寄せ / タブレット・スマホ: 全幅

   使い方:
   <div class="fff-grid">
     <div class="fff-grid__block fff-grid__block--fill-black"
          style="--row:7; --col:2;"></div>                  ← 行7列2 に 1×1
     <div class="fff-grid__block fff-grid__block--fill-black"
          style="--row:12; --col:1; --w:4; --h:2;"></div>   ← 行12列1 から 横4×縦2
   </div>

   指示形式:
   - --row: 行（上から、1 始まり）
   - --col: 列（左から、1 始まり）
   - --w  : 横マス数（省略時 1）
   - --h  : 縦マス数（省略時 1）

   デバッグ表示（body クラスで切替、JS が制御）:
   - .is-grid-debug-lines    → 赤グリッド線 + 上端列番号 + 左端行番号
   - .is-grid-debug-numbers  → 上記 + 全マスに「行-列」番号（lines と併用）
   ============================================================================ */

/* ===== グリッド共通変数 ===== */
:root {
  --fff-grid-cols:    8;
  --fff-grid-line:    5px;
  --fff-grid-padding: 5px;
  --fff-grid-max:     1440px;
  --fff-grid-debug:   rgba(229, 57, 53, 0.55);
}

/* ===== グリッド本体 ===== */
.fff-grid {
  display: grid;
  grid-template-columns: repeat(var(--fff-grid-cols), 1fr);
  grid-auto-rows: var(--fff-grid-cell-size, 1fr);  /* JS が px で設定、正方形マス */
  gap: var(--fff-grid-line);
  padding: var(--fff-grid-padding);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
}

/* ===== ブロックの配置 ===== */
.fff-grid__block {
  --w: 1;
  --h: 1;
  grid-column: var(--col) / span var(--w);
  grid-row:    var(--row) / span var(--h);
  position: relative;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

/* ===== 装飾モディファイア ===== */
.fff-grid__block--fill-black { background: var(--fff-black, #0a0a0a); }
.fff-grid__block--fill-white { background: var(--fff-white, #ffffff); }

/* ===== デバイス別 ===== */
@media (min-width: 1024px) {
  .fff-grid { max-width: var(--fff-grid-max); }
}
@media (max-width: 1023px) {
  .fff-grid { max-width: 100%; }
}

/* ============================================================================
   デバッグモード：線描画
   .fff-grid::before に2つの描画で「線」を作る。
   1. 縦線 repeat（左→右）：5px赤 + cell透明
   2. 横線 repeat（上→下）：5px赤 + cell透明
   3. box-shadow inset で内側 5px の枠（上下左右端の保証）
   → マスは完全透明（背景画像が透ける）、線だけ赤
   ============================================================================ */
body.is-grid-debug-lines .fff-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to right, var(--fff-grid-debug) 0 var(--fff-grid-line), transparent 0)
      0 0 / calc(var(--fff-grid-cell-size, 0px) + var(--fff-grid-line)) 100% repeat-x,
    linear-gradient(to bottom, var(--fff-grid-debug) 0 var(--fff-grid-line), transparent 0)
      0 0 / 100% calc(var(--fff-grid-cell-size, 0px) + var(--fff-grid-line)) repeat-y;
  box-shadow: inset 0 0 0 var(--fff-grid-line) var(--fff-grid-debug);
}

/* 実ブロックは ::before の線より前面に */
body.is-grid-debug-lines .fff-grid__block {
  z-index: 1;
}

/* ============================================================================
   デバッグ番号表示（JS が生成）
   - .is-grid-debug-lines        → 上端列番号 + 左端行番号
   - .is-grid-debug-numbers 併用 → 全マスに「行-列」
   ============================================================================ */
.fff-grid__cell-label,
.fff-grid__col-label,
.fff-grid__row-label {
  pointer-events: none;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(229, 57, 53, 0.95);
  align-self: center;
  justify-self: center;
  z-index: 100;
}

.fff-grid__col-label {
  align-self: start;
  padding-top: 2px;
}

.fff-grid__row-label {
  justify-self: start;
  padding-left: 4px;
}