/* TSUKUTTO ワイヤーフレーム表示用CSS（レイヤー3の代替）
 *
 * core（汎用スキャフォールド public/*）で描画されるとき、装飾(decoration.css/サイト固有)の
 * 代わりに読み込む。脚色を排し、レイアウトと出力内容（テキスト）はそのまま、
 * 画像はグレーのプレースホルダ箱（画像アイコン）にして「未デザインのワイヤー」を見せる。
 * structure.css（レイアウト）はそのまま効くので配置・並びは本番同様。
 */

:root {
    --wf-line: #cdd1d6;     /* 枠線 */
    --wf-fill: #e7eaee;     /* セクション/ブロックの箱の塗り */
    --wf-img: #d4d8dd;      /* 画像プレースホルダ（一段濃いグレー） */
    --wf-text: #3f4651;     /* 本文 */
    --wf-heading: #232a33;  /* 見出し */
    --wf-muted: #79818b;    /* 副文字 */
    --wf-accent: #3b6fd4;   /* リンク等の控えめなアクセント */
}

body {
    color: var(--wf-text);
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

h1, h2, h3, h4, h5, h6 { color: var(--wf-heading); font-weight: 600; }
a { color: var(--wf-accent); text-decoration: none; }
a:hover { opacity: 1; }

/* アニメーション・影などの脚色は排除 */
* { transition: none !important; box-shadow: none !important; }

/* ===== 画像プレースホルダ（中核） ===== */
/* x-media がワイヤー時に出力する箱。呼び出し側の style（aspect-ratio 等）を引き継ぐ */
.wf-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;     /* 既定。呼び出し側 style の aspect-ratio があれば優先 */
    min-height: 56px;
    background: var(--wf-fill);
    border: 1px solid var(--wf-line);
    border-radius: 3px;
    color: var(--wf-muted);
    box-sizing: border-box;
    overflow: hidden;
}
.wf-img { background: var(--wf-img); }
.wf-img svg { width: 30px; height: 30px; opacity: 0.5; }
/* 万一 x-media を通さない <img> が出ても箱に均す */
img { border: 1px solid var(--wf-line); border-radius: 3px; background: var(--wf-img); }

/* ===== ヘッダー / フッター（クリーンな区切りだけ） ===== */
.site-header { background: #fff; border-bottom: 1px solid var(--wf-line); }
.site-footer { background: var(--wf-fill); border-top: 1px solid var(--wf-line); }
.site-logo { color: var(--wf-heading); font-weight: 700; letter-spacing: 0.04em; }
.site-nav a { color: var(--wf-text); }

/* ===== 各セクション・ブロック・カードを「グレーの箱」に =====
   外側のコンテナ（.tsuk-partial / .site-sidebar）は塗らず、中の実ブロックだけ箱にして
   グレーの入れ子（箱in箱）を避ける。 */
.tsuk-block,
.card,
.article,
.post-group,
.post-entry,
.tsuk-repeater__item {
    background: var(--wf-fill);
    border: 1px solid var(--wf-line);
    border-radius: 3px;
    padding: 1.25rem;
}
/* ブロックの「もっと見る」等は箱の中で詰める */
.tsuk-block__heading { margin-top: 0; }
/* グリッド内のカードは余白をグリッドgapに任せ、箱の内側だけ詰める */
.card-grid { gap: 1.25rem; }

.card__meta,
.post-entry__meta,
.article__meta,
.tsuk-post-list__date,
.text-muted,
time { color: var(--wf-muted); }

/* ===== ボタン・CTA（アウトライン） ===== */
.button,
.btn-cta,
.tsuk-block__action a,
button[type="submit"] {
    background: #fff;
    color: var(--wf-text);
    border: 1px solid var(--wf-line);
    border-radius: 3px;
    font-weight: 500;
    text-decoration: none;
}

/* ===== フォーム入力欄 ===== */
input,
textarea,
select {
    border: 1px solid var(--wf-line) !important;
    background: #fff;
    border-radius: 3px;
}

/* ===== バナー等の濃色/背景画像を箱に均す ===== */
.tsuk-block--banner,
.tsuk-block--banner-bg {
    background: var(--wf-fill) !important;
    color: var(--wf-text) !important;
    border: 1px solid var(--wf-line);
}
.tsuk-block--banner-bg::before { background: transparent !important; }