/*!
 * Grant Archive UI/UX Improvements v19.0
 * スマホ・PC両対応の完璧なUI/UX
 * 
 * @package Grant_Insight_Perfect
 * @version 19.0.0
 * @date 2025-11-01
 */

/* =============================================
   📱 1. iOS自動ズーム防止（最重要）
   ============================================= */
.search-input,
.select-trigger,
.select-search-input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
textarea {
    font-size: 16px !important; /* iOS自動ズーム防止 */
}

/* =============================================
   👆 2. タップターゲット最適化（iOS標準44px）
   ============================================= */
.select-trigger,
.btn-portal,
.button,
.search-execute-btn,
.filter-toggle-btn {
    min-height: 44px;
    padding: 14px 20px;
}

/* =============================================
   📏 3. カード間隔のレスポンシブ対応
   ============================================= */
.portal-card-item,
.grant-card-item {
    margin-bottom: 16px; /* スマホ: 16px */
}

@media (min-width: 768px) {
    .portal-card-item,
    .grant-card-item {
        margin-bottom: 24px; /* タブレット: 24px */
    }
}

@media (min-width: 1024px) {
    .portal-card-item,
    .grant-card-item {
        margin-bottom: 32px; /* PC: 32px */
    }
}

/* =============================================
   📱 4. スマホ専用フィルター開閉ボタン
   ============================================= */
.mobile-filter-toggle {
    display: none; /* デフォルトは非表示 */
}

@media (max-width: 767px) {
    /* スマホではフィルター開閉ボタンを表示 */
    .mobile-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 56px; /* 大きめのタップエリア */
        padding: 16px 24px;
        background: #000000;
        color: #FFFFFF;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        position: relative;
        margin-bottom: 20px;
    }

    .mobile-filter-toggle:active {
        transform: scale(0.98);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .mobile-filter-toggle .icon {
        transition: transform 0.3s ease;
    }

    .mobile-filter-toggle[aria-expanded="true"] .icon {
        transform: rotate(180deg);
    }

    /* AIボタンと同じデザイン言語 */
    .mobile-filter-toggle::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
        border-radius: 12px;
        pointer-events: none;
    }

    /* フィルターセクションの開閉 */
    .dropdown-filter-section .filter-content-wrapper {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
    }

    .dropdown-filter-section.filters-open .filter-content-wrapper {
        max-height: 5000px; /* 十分大きな値 */
        overflow: visible;
        transition: max-height 0.6s ease-in;
    }

    /* PCではすべて表示 */
    .dropdown-filters-grid {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .dropdown-filter-section.filters-open .dropdown-filters-grid {
        opacity: 1;
    }
}

@media (min-width: 768px) {
    /* PC・タブレットでは常に表示 */
    .dropdown-filter-section .filter-content-wrapper {
        max-height: none !important;
        overflow: visible !important;
    }

    .dropdown-filters-grid {
        opacity: 1 !important;
    }
}

/* =============================================
   🗂 5. フィルターグリッドのレスポンシブ化
   ============================================= */
.dropdown-filters-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホ: 1列 */
    gap: 16px;
}

@media (min-width: 640px) {
    .dropdown-filters-grid {
        grid-template-columns: repeat(2, 1fr); /* タブレット: 2列 */
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .dropdown-filters-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* PC: 自動調整 */
        gap: 20px;
    }
}

/* =============================================
   📤 6. ドロップダウン自動位置調整
   ============================================= */
.select-dropdown {
    max-height: min(400px, 60vh); /* ビューポートに応じて調整 */
    overscroll-behavior: contain;
}

.custom-select.dropdown-above .select-dropdown {
    bottom: calc(100% + 4px);
    top: auto;
}

/* =============================================
   📜 7. スクロール改善
   ============================================= */
.select-options-wrapper {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
}

/* =============================================
   📦 8. コンテナ幅の拡張（PC対応）
   ============================================= */
.container {
    max-width: 1200px; /* デスクトップ標準 */
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 1600px) {
    .container {
        max-width: 1400px; /* ワイドモニター対応 */
        padding: 0 40px;
    }
}

/* =============================================
   🎯 9. フォーカス表示の強化
   ============================================= */
*:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =============================================
   🔗 10. リンク動作の改善
   ============================================= */
/* 新しいタブで開くリンクのアイコン表示 */
a[target="_blank"]::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    vertical-align: middle;
}

/* ボタン内のリンクはアイコン非表示 */
.btn-portal[target="_blank"]::after,
button a[target="_blank"]::after {
    display: none;
}

/* =============================================
   🎨 11. ホバーエフェクト統一
   ============================================= */
.card,
.feature-card,
.portal-card-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover,
.feature-card:hover,
.portal-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

.button:hover,
.btn-portal:hover {
    transform: scale(1.02);
}

/* =============================================
   📄 12. ページネーション改善
   ============================================= */
.pagination {
    scroll-margin-top: 100px; /* ヘッダー高さ分の余白 */
}

/* ページ移動時のスムーズスクロール */
html {
    scroll-behavior: smooth;
}

/* =============================================
   🎯 13. 検索結果トップへのスクロール位置調整
   ============================================= */
#grants-container {
    scroll-margin-top: 120px; /* ヘッダー + 余白 */
}

.results-section-optimized {
    scroll-margin-top: 100px;
}

/* =============================================
   💫 14. スクロール位置記憶時の視覚フィードバック
   ============================================= */
.scroll-restored {
    animation: scroll-highlight 1s ease-out;
}

@keyframes scroll-highlight {
    0% {
        background: rgba(255, 235, 59, 0.2);
    }
    100% {
        background: transparent;
    }
}

/* =============================================
   📱 15. スマホ専用の調整
   ============================================= */
@media (max-width: 767px) {
    /* 検索バーの拡大 */
    .search-input-container {
        border-radius: 12px;
    }

    .search-input {
        padding: 16px 16px 16px 48px;
        font-size: 16px !important;
    }

    /* フィルターラベルの見やすさ向上 */
    .filter-label {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    /* アクティブフィルターの表示改善 */
    .active-filters-display {
        padding: 16px;
        border-radius: 12px;
    }

    /* カードのパディング調整 */
    .portal-card-item {
        padding: 16px;
    }

    /* ボタンの最適化 */
    .btn-portal {
        min-height: 48px;
        font-size: 15px;
        font-weight: 700;
    }
}

/* =============================================
   💻 16. PC専用の調整
   ============================================= */
@media (min-width: 1024px) {
    /* ホバー時のツールチップ */
    [title]:hover::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        font-size: 12px;
        white-space: nowrap;
        border-radius: 4px;
        pointer-events: none;
        z-index: 1000;
        margin-bottom: 8px;
    }

    /* カードのグリッド表示時の最適化 */
    .grants-container-optimized[data-view="grid"] .portal-card-item {
        margin-bottom: 24px;
    }
}

/* =============================================
   🌐 17. アクセシビリティ改善
   ============================================= */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* キーボードナビゲーション強化 */
.keyboard-nav *:focus {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

/* =============================================
   ⚡ 18. パフォーマンス最適化
   ============================================= */
/* GPU加速 */
.portal-card-item,
.btn-portal,
.select-dropdown {
    will-change: transform;
}

/* レイアウトシフト防止 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

picture {
    display: block;
}

/* =============================================
   🎯 19. ローディング状態の改善
   ============================================= */
.loading-overlay {
    backdrop-filter: blur(4px);
}

.loading-spinner {
    animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =============================================
   📊 20. レスポンシブテーブル対応
   ============================================= */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}