/* =================================================================
 * CSSデコ盛りジェネレーター 専用スタイル
 * ================================================================= */

.tool-results-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 20px; /* ヘッダーの高さに合わせて調整 */
}

/* 透明度がわかる市松模様の背景 */
.checkerboard-bg {
    background-color: #f0f0f0;
    background-image: 
        linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
        linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

/* プレビュー要素の基本設定 */
#preview-element {
    transition: all 0.2s ease; /* スライダー操作時に滑らかに動かす */
}

/* タイトル用グラデーション */
.text-gradient {
    background: linear-gradient(135deg, #ff007f, #7f00ff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* タブのスタイル調整 */
.nav-sm .nav-link {
    font-size: 0.875rem;
}