/* ==========================================================================
   ⚠️ DO NOT EDIT ⚠️
   fff-foundation — 01-fff-8grid.css
   Locked Phase（2026-05-25 移行済）

   方眼紙（8カラム正方形グリッド）の本体。サイト全体の土台。
   このファイルを変更するとサイト全壊リスクあり。

   仕様:
   - 8カラム / gap 5px / padding 5px / max-width 1440px PC中央寄せ
   - 正方形セル（JS が --fff-grid-cell-size を計算）
   - PC / タブレット / SP すべて 8カラム維持
   - 配置は HTML の style 属性で --col / --row / --col-span / --row-span
   - SP/タブレット用は --col-sp / --row-sp / --col-span-sp / --row-span-sp

   見た目の調整は 02-tokens / 03-base / 04-layout / 05-components / pages/ 側で行う。
   どうしてもここを変える必要がある時は AGENTS.md の「LOCKED FILES」を読んで、
   修正理由・影響範囲・変更案を kasumi に提示して承認後に行う。
   ========================================================================== */

:root {
    --fff-grid-cols: 8;
    --fff-grid-gap: 5px;
    --fff-grid-padding: 5px;
    --fff-grid-max-width: 1440px;
    /* デバッグ: 文字は不透明、線は半透明（透けて下が見える） */
    --fff-grid-debug-color: #e60000;
    --fff-grid-debug-line-color: rgba(230, 0, 0, 0.5);
    /* セルサイズは JS が計算して px で上書き。JS 未動作時は auto で潰れ防止 */
    --fff-grid-cell-size: auto;
}

/* 方眼紙の枠 */
.fff-8grid {
    position: relative;
    box-sizing: border-box;
    max-width: var(--fff-grid-max-width);
    margin-inline: auto;
    padding: var(--fff-grid-padding);
    display: grid;
    grid-template-columns: repeat(var(--fff-grid-cols), 1fr);
    grid-auto-rows: var(--fff-grid-cell-size, auto);
    gap: var(--fff-grid-gap);
}

/* マス目に置く部品 */
.fff-8grid-item {
    grid-column: var(--col, auto) / span var(--col-span, 1);
    grid-row: var(--row, auto) / span var(--row-span, 1);
    min-width: 0;
    min-height: 0;
    /* デバッグ層より上に重ねて、赤線を隠す */
    position: relative;
    z-index: 1;
}

/* SP/タブレット（767px 以下）: SP 変数優先、なければ PC 流用 */
@media (max-width: 767px) {
    .fff-8grid-item {
        grid-column: var(--col-sp, var(--col, auto)) / span var(--col-span-sp, var(--col-span, 1));
        grid-row: var(--row-sp, var(--row, auto)) / span var(--row-span-sp, var(--row-span, 1));
    }
}

/* ==========================================================================
   デバッグモード（URLパラメータ ?grid=0/1/2 + localStorage 保存）
   - debug-1: 線 + 端番号（行1 と 列1 のみラベル）
   - debug-2: 線 + 全マス「行-列」
   - JS が body にクラス付与 + デバッグ層生成
   ========================================================================== */

/* デバッグは2層構造:
     - outline 層 (z-index 0): 赤線。item (z-index 1) の下に隠れる → ブロック上では赤線が消える
     - label 層 (z-index 2): 番号テキスト。item の上に乗る → ブロック上でも番号が見える
   両層とも grid と同じ8カラムレイアウトで重ねる */
.fff-grid-debug-outline-layer,
.fff-grid-debug-label-layer {
    position: absolute;
    inset: var(--fff-grid-padding);
    display: grid;
    grid-template-columns: repeat(var(--fff-grid-cols), 1fr);
    grid-auto-rows: var(--fff-grid-cell-size, auto);
    gap: var(--fff-grid-gap);
    pointer-events: none;
}

.fff-grid-debug-outline-layer { z-index: 0; }
.fff-grid-debug-label-layer   { z-index: 2; }

body:not(.fff-grid-debug-1):not(.fff-grid-debug-2) .fff-grid-debug-outline-layer,
body:not(.fff-grid-debug-1):not(.fff-grid-debug-2) .fff-grid-debug-label-layer {
    display: none;
}

/* outline 層のセル: 外側 5px に赤（半透明）。gap と padding を埋める */
.fff-grid-debug-cell {
    grid-column: var(--c) / span 1;
    grid-row: var(--r) / span 1;
    outline: var(--fff-grid-gap) solid var(--fff-grid-debug-line-color);
}

/* label 層のセル: 番号テキストのみ */
.fff-grid-debug-label {
    grid-column: var(--c) / span 1;
    grid-row: var(--r) / span 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fff-grid-debug-color);
    font: 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
    text-align: center;
}