/**
 * Utility: Glassmorphism (すりガラス効果)
 * 背景ぼかしと半透明を組み合わせたグラスモーフィズムスタイル
 */

/* グラスモーフィズム - 基本 */
.u-glass {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* グラスモーフィズム - 軽め（より透明） */
.u-glass-light {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* グラスモーフィズム - 濃いめ（より不透明） */
.u-glass-heavy {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* グラスモーフィズム - カラーバリエーション（ピンク） */
.u-glass-pink {
    background: rgba(255, 240, 245, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 182, 193, 0.3) !important;
}

/* グラスモーフィズム - カラーバリエーション（ゴールド） */
.u-glass-gold {
    background: rgba(255, 250, 240, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(218, 165, 32, 0.3) !important;
}

/* グラスモーフィズム - カラーバリエーション（グリーン） */
.u-glass-green {
    background: rgba(240, 255, 240, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(144, 238, 144, 0.3) !important;
}

/* グラスカード - 統一カードに適用 */
:is(.c-card-unified.u-glass),
:is(.c-card-010.u-glass),
:is(.c-card-020.u-glass) {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* グラスカード - ヘッダー部分 */
:is(.c-card-unified__header.u-glass),
:is(.c-card-010__header.u-glass) {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* グラスモーフィズム - フォーム */
:is(.c-form-002.u-glass) {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* グラスモーフィズム - セクション */
:is(.s-unified-search-001.u-glass),
:is(.s-pickup-unified-001.u-glass) {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* グラスモーフィズム - モーダル */
:is(.c-form-002__modal-content.u-glass) {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* グラスモーフィズム - ナビゲーション */
:is(.pc-header-002.u-glass),
:is(.sp-header-002.u-glass),
:is(.c-bnav-001.u-glass) {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* フォールバック - backdrop-filter未対応ブラウザ */
@supports not (backdrop-filter: blur(10px)) {
    .u-glass,
    .u-glass-light,
    .u-glass-heavy,
    .u-glass-pink,
    .u-glass-gold,
    .u-glass-green {
        background: rgba(255, 255, 255, 0.95) !important;
    }
}

/* アニメーション - グラス要素のホバー効果 */
:is(.u-glass:hover),
:is(.u-glass-light:hover),
:is(.u-glass-heavy:hover) {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* レスポンシブ - モバイルでは軽めのぼかし（パフォーマンス考慮） */
@media (max-width: 768px) {
    .u-glass,
    .u-glass-light,
    .u-glass-heavy,
    .u-glass-pink,
    .u-glass-gold,
    .u-glass-green,
    :is(.c-card-unified.u-glass),
    :is(.c-form-002.u-glass) {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* アクセシビリティ - 透明度削減設定時 */
@media (prefers-reduced-transparency) {
    .u-glass,
    .u-glass-light,
    .u-glass-heavy,
    .u-glass-pink,
    .u-glass-gold,
    .u-glass-green {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}