/* ====== 2/3-B: モバイル応用CSS（mobile-advanced.css） ====== */

/* ====== モバイル検索オーバーレイ ====== */
.mobile-search-container {
    background: rgba(255,255,255,0.95); 
    border-radius: 16px;
    padding: 1.5rem; 
    margin: 0 1rem; 
    width: calc(100% - 2rem);
    max-width: 500px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { 
        transform: translateY(-30px) scale(0.9); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0) scale(1); 
        opacity: 1; 
    }
}

.mobile-search-header {
    display: flex; 
    align-items: center; 
    gap: 1rem; 
    margin-bottom: 1.5rem;
}

.mobile-search-input {
    flex: 1; 
    padding: 1rem 1.25rem; 
    border: 2px solid #e1e8ed;
    border-radius: 12px; 
    font-size: 1rem; 
    outline: none;
}

.mobile-search-input:focus {
    border-color: #4286c6; 
    box-shadow: 0 0 0 4px rgba(66, 134, 198, 0.1);
}

.mobile-search-close {
    background: #ff6b6b; 
    color: white; 
    border: none; 
    border-radius: 12px;
    width: 44px; 
    height: 44px; 
    font-size: 1.3rem; 
    cursor: pointer;
}

.mobile-search-suggestions {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.search-suggestion {
    padding: 1rem; 
    background: #f8f9ff; 
    border-radius: 12px;
    cursor: pointer; 
    transition: all 0.3s; 
    text-align: center;
    font-weight: 600; 
    color: #333;
}

.search-suggestion:hover {
    background: linear-gradient(135deg, #4286c6, #6764ba);
    color: white; 
    transform: translateY(-2px);
}

.mobile-search-info {
    text-align: center; 
    color: #666; 
    padding: 0.5rem;
    background: rgba(102, 126, 234, 0.05); 
    border-radius: 8px;
}

@media (max-width: 480px) {
    .mobile-search-suggestions { 
        grid-template-columns: 1fr; 
    }
}

/* ====== アクセシビリティ対応 ====== */
@media (prefers-reduced-motion: reduce) {
    .native-tab-bar {
        transition: none;
    }
    
    .tab-item {
        transition: color 0.2s ease;
    }
    
    .tab-item.active::before {
        animation: none;
    }
    
    .tags-container .tag {
        transition: background 0.2s ease;
    }
    
    .mobile-search-container {
        animation: none;
    }
}

/* ====== セーフエリア対応 ====== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .native-tab-bar {
            padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
            height: calc(70px + env(safe-area-inset-bottom));
        }
        
        body:not(.tab-bar-hidden) {
            padding-bottom: calc(env(safe-area-inset-bottom) + 80px);
        }
        
        body.tab-bar-hidden {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ====== 横向き対応 ====== */
@media (max-width: 768px) and (orientation: landscape) {
    .native-tab-bar {
        padding: 0.25rem 0 calc(env(safe-area-inset-bottom) + 0.25rem);
        height: calc(60px + env(safe-area-inset-bottom));
    }
    
    .tab-icon {
        font-size: 1.3rem;
    }
    
    .tab-label {
        font-size: 0.6rem;
    }
    
    body {
        padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
    }
}

/* ====== 小さな画面対応 ====== */
@media (max-width: 440px) {
    :root {
        --mobile-header-height: 56px;
    }
    
    .logo {
        font-size: 1.4rem;
    }
    
    .tab-item {
        min-width: 50px;
        padding: 0.4rem;
        gap: 0.2rem;
    }
    
    .tab-icon {
        font-size: 1.3rem;
    }
    
    .tab-label {
        font-size: 0.6rem;
    }
}

@media (max-width: 375px) {
    .tags-title {
        font-size: 1.2rem;
        padding: 0 0.75rem;
    }
    
    .tags-container {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }
    
    .tags-container .tag {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

/* ====== ネイティブアプリ風UI ====== */
@media (max-width: 768px) {
    /* プルトゥリフレッシュ */
    .pull-to-refresh {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: var(--gradient);
        transform: translateY(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        z-index: 999;
    }
    
    .pull-to-refresh.visible {
        transform: translateY(0);
    }
    
    .pull-indicator {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
    }
    
    .pull-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    /* ネイティブスクロール */
    .native-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        overflow-scrolling: touch;
    }
    
    .native-scroll::-webkit-scrollbar {
        display: none;
    }
    
    /* ハプティックフィードバック風エフェクト */
    .haptic-feedback {
        transition: all 0.1s ease;
    }
    
    .haptic-feedback:active {
        transform: scale(0.98);
        opacity: 0.8;
    }
    
    /* iOS風のモーダル */
    .native-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(10px);
        z-index: 2000;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 1rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .native-modal.visible {
        opacity: 1;
        visibility: visible;
    }
    
    .modal-content {
        background: white;
        border-radius: 20px 20px 0 0;
        width: 100%;
        max-width: 500px;
        max-height: 80vh;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }
    
    .native-modal.visible .modal-content {
        transform: translateY(0);
    }
    
    .modal-handle {
        width: 40px;
        height: 4px;
        background: #c7c7cc;
        border-radius: 2px;
        margin: 12px auto 20px;
    }
    
    /* ネイティブ風カード */
    .native-card {
        background: white;
        border-radius: 16px;
        padding: 1rem;
        margin: 0.5rem 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }
    
    .native-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    }
    
    /* iOS風セグメントコントロール */
    .segment-control {
        background: #f2f2f7;
        border-radius: 10px;
        padding: 2px;
        display: flex;
        margin: 1rem 0;
        position: relative;
    }
    
    .segment-item {
        flex: 1;
        padding: 8px 12px;
        text-align: center;
        border-radius: 8px;
        color: #8e8e93;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: color 0.2s ease;
        position: relative;
        z-index: 2;
    }
    
    .segment-item.active {
        color: #000;
    }
    
    .segment-indicator {
        position: absolute;
        top: 2px;
        left: 2px;
        height: calc(100% - 4px);
        background: white;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }
    
    /* スワイプジェスチャー表示 */
    .swipe-hint {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        color: #c7c7cc;
        font-size: 1.2rem;
        animation: swipeHint 2s infinite ease-in-out;
    }
    
    @keyframes swipeHint {
        0%, 100% { transform: translateY(-50%) translateX(0); }
        50% { transform: translateY(-50%) translateX(-5px); }
    }
    
    /* ロングプレス効果 */
    .long-press {
        transition: transform 0.15s ease;
    }
    
    .long-press.pressing {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    /* ネイティブ風トースト */
    .native-toast {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 60px);
        left: 50%;
        transform: translateX(-50%) translateY(-100px);
        background: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 12px 20px;
        border-radius: 25px;
        font-size: 0.9rem;
        font-weight: 500;
        z-index: 3000;
        backdrop-filter: blur(10px);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .native-toast.visible {
        transform: translateX(-50%) translateY(0);
    }
    
    /* フローティングアクションボタン */
    .fab {
        position: fixed;
        bottom: calc(env(safe-area-inset-bottom) + 100px);
        right: 1rem;
        width: 56px;
        height: 56px;
        background: var(--gradient);
        border: none;
        border-radius: 50%;
        color: white;
        font-size: 1.5rem;
        box-shadow: 0 4px 20px rgba(66, 134, 198, 0.4);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
    }
    
    .fab:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(66, 134, 198, 0.5);
    }
    
    .fab:active {
        transform: scale(0.95);
    }
    
    /* スプラッシュスクリーン */
    .splash-screen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--gradient);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        z-index: 9999;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    
    .splash-screen.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    
    .splash-logo {
        font-size: 3rem;
        font-weight: 900;
        margin-bottom: 1rem;
        font-family: 'チェックアンドＵ－Ｆｏフォント', sans-serif;
    }
    
    .splash-tagline {
        font-size: 1.1rem;
        opacity: 0.8;
        margin-bottom: 2rem;
    }
    
    .splash-loader {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top: 3px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
}

/* ====== ダークモード対応（ネイティブUI） ====== */
.dark-mode .native-card {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .segment-control {
    background: #2c2c2e;
}

.dark-mode .segment-indicator {
    background: #3a3a3c;
}

.dark-mode .segment-item.active {
    color: white;
}

.dark-mode .mobile-search-container {
    background: rgba(28, 28, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .mobile-search-input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.dark-mode .mobile-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .search-suggestion {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.dark-mode .mobile-search-info {
    background: rgba(66, 134, 198, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

/* ====== ハイコントラストモード対応 ====== */
@media (prefers-contrast: high) {
    .native-tab-bar {
        border-top: 2px solid currentColor;
        background: rgba(255, 255, 255, 1);
    }
    
    .tab-item.active {
        background: var(--primary-color);
        color: white;
    }
    
    .tags-container .tag {
        border: 2px solid var(--primary-color);
    }
}

/* ====== iOS Safari特有の問題対応 ====== */
@supports (-webkit-touch-callout: none) {
    .native-tab-bar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .tags-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ====== Android Chrome特有の問題対応 ====== */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
    .native-tab-bar {
        will-change: transform, opacity;
    }
    
    .tags-container {
        will-change: scroll-position;
    }
}

/* ====== パフォーマンス最適化 ====== */
.tags-container {
    transform: translateZ(0);
    will-change: scroll-position;
}

.tags-container .tag {
    transform: translateZ(0);
    will-change: transform;
}

.native-tab-bar {
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* ====== メインコンテンツ調整 ====== */
@media (max-width: 768px) {
    .main-container {
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .sidebar {
        position: static;
        order: 2;
    }
    
    .page-title {
        font-size: 1.8rem;
    }
    
    .videos-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .tags-container-wrapper {
        padding: 0 1rem;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 1rem 1rem;
    }
}

@media (max-width: 640px) {
    .videos-grid {
        grid-template-columns: 1fr;
    }
    
    .content-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ====== デスクトップでは非表示 ====== */
@media (min-width: 769px) {
    .fab,
    .pull-to-refresh,
    .native-toast,
    .splash-screen,
    .mobile-search-container,
    .native-modal {
        display: none;
    }
}

/* ====== スクロールヒント用アニメーション ====== */
@keyframes bounce-left {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

@keyframes bounce-right {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* スクロールヒントスタイル */
.tags-scroll-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.9;
    transition: opacity 0.5s ease;
    background: rgba(66, 134, 198, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(66, 134, 198, 0.2);
}

.dark-mode .tags-scroll-hint {
    background: rgba(66, 134, 198, 0.2);
    border-color: rgba(66, 134, 198, 0.3);
    color: rgba(255, 255, 255, 0.8);
}
/* 🔥 タブバー強制表示・デバッグ用CSS */

/* 一時的にタブバーを強制表示 */
@media (max-width: 768px) {
    .native-tab-bar {
        /* 🔥 強制表示用スタイル */
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        
        /* 背景を目立つ色に変更（デバッグ用） */
        background: rgba(0, 162, 255, 0.8) !important; /* 赤色で一時的に表示 */
        border-top: 3px solid lime !important; /* 緑の枠線 */
        
        /* サイズ・パディング */
        height: 80px !important;
        padding: 0.5rem 0 !important;
        
        /* 確実に表示 */
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
        
        /* セーフエリア無視（テスト用） */
        padding-bottom: 0.5rem !important;
    }
    
    /* タブアイテムも強制表示 */
    .tab-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        color: white !important; /* 白文字で見えるように */
        font-weight: bold !important;
        padding: 0.5rem !important;
        min-width: 60px !important;
        text-decoration: none !important;
        background: rgba(0, 0, 0, 0.3) !important; /* 背景追加 */
        border-radius: 8px !important;
        margin: 0 2px !important;
    }
    
    .tab-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .tab-label {
        font-size: 0.7rem !important;
    }
    
    /* ボディの下パディング調整 */
    body {
        padding-bottom: 100px !important; /* タブバー分のスペース確保 */
    }
}