/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ Preset Pose ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */






        .preset-card-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1vw;
            padding: 1.5vw; /* Sample と同じ */
            justify-content: center;
            scrollbar-gutter: stable both-edges; /* Sampleと同じ中心軸を維持する */
            align-items: flex-start; /* 少数表示でもカードが縦に伸びないようにする */
            overflow-y: auto;
            overflow-x: auto;
            flex: 1; /* サイズがあってもフィルター部分が移動しないように調整 */
        }
        .preset-card {
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            width: 23.7%; /* 23.7%だと４枚ぎりぎり並ぶ */
            min-width: 140px;
            max-width: 320px; /* 正方形画像(=幅) + 識別/下部情報が 450px に収まる目安 */
            max-height: 450px; /* Sample(680px) の約2/3 */
        }
         .preset-card img {
             display: block;
             width: 100%;
             aspect-ratio: 1 / 1; /* Preset Pose 画像は正方形(1000x1000) */
             object-fit: contain;
             background-color: transparent;
         }
.preset-card-content {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: clamp(4px, 0.25vw, 6px);
            padding: clamp(6px, 0.5vw, 9px); /* Sample と余白を揃える */
            text-align: left;
        }
  .preset-card-content h2 {
             margin-left: 20px;
             font-size: clamp(16px, 1vw, 24px);
             margin-bottom: 10px;
         }
        
/* Preset card identifier styling */
.preset-card-identifier {
    background-color: #ff9d4d36;
    color: white;
    padding: 2px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

.preset-card-identifier p {
    margin: 0;
    font-size: clamp(6px, 0.8vw, 18px);
}
        .preset-card-content p {
            margin-left: 20px;
            font-size: clamp(12px, 0.75vw, 18px);
        }

        /* ---- Preset: ラベル「：」の縦位置を揃える ---- */
        .preset-card-content .kv-grid {
            margin-left: 20px;
            font-size: clamp(12px, 0.75vw, 18px);
            display: grid;
            grid-template-columns: max-content 0.9em 1fr;
            column-gap: 0.2em;
            row-gap: 0.15em;
            align-items: baseline;
        }

        .preset-card-content .kv-row {
            display: contents;
        }

        .preset-card-content .kv-label {
            font-weight: 0;
            text-align: left;
            white-space: nowrap;
        }

        .preset-card-content .kv-sep {
            font-weight: 700;
            text-align: center;
            opacity: 0.95;
        }

        .preset-card-content .kv-value {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .preset-card-content .kv-value:empty::before {
            content: "\00a0";
        }
         /* カードの編集と削除ボタン */
          .preset-card-actions {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: clamp(4px, 0.35vw, 8px); /* Sample と間隔を揃える */
              margin-top: auto;
          }

          /* 画面が大きくても縦が膨らみすぎないようにクランプ */
          .preset-card-actions .preset-edit-button,
          .preset-card-actions .toggle-public-button,
          .preset-card-actions .delete-button {
              height: clamp(24px, 1.6vw, 32px);
          }
/* ■■■■■■■■ Preset Pose 用のフィルターボタンスタイル ■■■■■■■■ */
.samplefilter-group-preset .toggle-button-filter-preset {
    width: 2.7vw;
    height: 3.6vw;
    cursor: pointer;
}

#resetButtonPreset {
    font-size: clamp(8px, 0.9vw, 25px);
    color: #ff8661;
    background-color: #ff6d495e;
    padding: 0vw 4vw;
    display: inline-block;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#resetButtonPreset:hover {
    color: #283027;
    background-color: #88ff98;
}