/* UTF-8 (no BOM) ===========================================================
Coloring For Anyone - FULL CSS
- パレット横並び（1行あたり列数は --cfa-cols、サイズは --cfa-sz）
- layout=top/bottom で「キャンバスとツールバー」の上下を切替
- layout=bottom では「ボタンをキャンバス直下 → その下にパレット」
- tools_pos=overlay でボタンをゲームエリア内オーバーレイ表示
========================================================================== */

/* 全体の積み方（上下を order で制御） */
.cfa-wrap {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 100%;
}

/* キャンバスのラッパ（overlay配置用に相対） */
.cfa-canvas-wrap { position: relative; }

/* ツールバー（パレットとボタンを縦積み） */
.cfa-toolbar {
display: flex;
flex-direction: column;
gap: 10px;
}

/* ─────────────────────────────
layout（上下の順序）
- top: 上にツールバー、下にキャンバス
- bottom: 上にキャンバス、下にツールバー
───────────────────────────── */
.cfa-layout-top .cfa-toolbar { order: 1; }
.cfa-layout-top .cfa-canvas-wrap { order: 2; }

.cfa-layout-bottom .cfa-canvas-wrap { order: 1; }
.cfa-layout-bottom .cfa-toolbar { order: 2; }

/* ─────────────────────────────
ツールバー内部の並び（パレットとボタン）
- top: パレット→ボタン
- bottom: ボタン→パレット（＝キャンバス直下にボタンが来る）
───────────────────────────── */
.cfa-layout-top .cfa-palette { order: 1; }
.cfa-layout-top .cfa-tools { order: 2; }

.cfa-layout-bottom .cfa-tools { order: 1; }
.cfa-layout-bottom .cfa-palette { order: 2; }

/* パレット：グリッド横並び（列数/サイズはCSS変数で） */
.cfa-palette {
display: grid;
grid-template-columns: repeat(var(--cfa-cols, 8), var(--cfa-sz, 48px));
grid-auto-rows: var(--cfa-sz, 48px);
gap: 10px 10px;
justify-content: start;
}

/* 色スウォッチ */
.cfa-swatch {
width: var(--cfa-sz, 48px);
height: var(--cfa-sz, 48px);
border: 1px solid #ccc;
border-radius: 8px;
cursor: pointer;
display: inline-block;
}
.cfa-swatch.is-active { outline: 2px solid #000; }

/* ボタン・スライダー周り */
.cfa-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.cfa-guest-timer { font-weight: 600; }

/* オーバーレイ（ゲスト時間切れなど） */
.cfa-overlay {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
}
.cfa-overlay-inner {
background: #fff;
border: 1px solid #ddd;
padding: 16px 20px;
border-radius: 10px;
}

/* tools_pos=overlay: ボタンをゲームエリア内の下辺中央に配置 */
.cfa-tools-overlay .cfa-tools {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
background: rgba(255,255,255,0.92);
border: 1px solid #ddd;
border-radius: 10px;
padding: 8px 12px;
z-index: 2;
}

/* 初心者向けプリセット（低/中/高） */
.cfa-presets { display: flex; gap: 8px; align-items: center; }
.cfa-preset {
padding: 6px 10px;
border: 1px solid #ccc;
background: #fff;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
.cfa-preset.is-active { border-color: #333; outline: 2px solid #000; }

/* 作品一覧（[coloring_list]） */
.cfa-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 16px;
}
.cfa-card {
border: 1px solid #e2e2e2;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
background: #fff;
display: flex;
flex-direction: column;
}
.cfa-thumb {
aspect-ratio: 1 / 1;
background: #f7f7f7;
display: flex;
align-items: center;
justify-content: center;
}
.cfa-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cfa-title {
padding: 8px 10px;
font-size: 14px;
line-height: 1.4;
color: #333;
}

/* モバイル最適化 */
@media (max-width: 768px) {
.cfa-toolbar { gap: 14px; }
.cfa-palette { gap: 12px; }
.cfa-swatch { border-radius: 10px; }
.cfa-tools button { padding: 10px 14px; font-size: 16px; }
.cfa-tools input[type="range"] { height: 34px; }
.cfa-preset { padding: 10px 14px; font-size: 16px; border-radius: 10px; }

.cfa-list { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cfa-title { font-size: 13px; }
}