/* =============================================
   FIRE PLAN 24 カスタムCSS
   ============================================= */

/* line-clamp ユーティリティ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* スクロールバー */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

/* =============================================
   モバイルボトムナビゲーション
   ============================================= */
#mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    height: 60px;
    align-items: stretch;
}
#mobile-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
    padding: 6px 2px;
    -webkit-tap-highlight-color: transparent;
}
#mobile-bottom-nav a i { font-size: 20px; line-height: 1; }
#mobile-bottom-nav a.active,
#mobile-bottom-nav a:active { color: #14b8a6; }
#mobile-bottom-nav a span { font-size: 10px; font-weight: 500; white-space: nowrap; }

/* =============================================
   銘柄テーブル → モバイルカードレイアウト
   ============================================= */
@media (max-width: 767px) {
    /* テーブルラッパーを縦スクロール可能に */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 個別株テーブルをカード化 */
    #stock-table thead,
    #fund-table thead {
        display: none;
    }

    #stock-table tbody tr,
    #fund-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 12px;
        position: relative;
    }

    #stock-table td,
    #fund-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0 !important;
        font-size: 13px;
        border: none;
        text-align: left !important;
    }

    #stock-table td::before,
    #fund-table td::before {
        content: attr(data-label);
        font-size: 11px;
        color: #9ca3af;
        font-weight: 600;
        min-width: 90px;
        flex-shrink: 0;
    }

    /* 銘柄名は全幅・上部固定 */
    #stock-table td:first-child,
    #fund-table td:first-child {
        display: block;
        padding-bottom: 8px !important;
        margin-bottom: 6px;
        border-bottom: 1px solid #f3f4f6;
    }
    #stock-table td:first-child::before,
    #fund-table td:first-child::before {
        display: none;
    }
    #stock-table td:first-child a,
    #fund-table td:first-child a {
        font-size: 14px;
        font-weight: 700;
    }
    #stock-table td:last-child div,
    #fund-table td:last-child div {
        align-items: flex-end;
        flex-direction: row;
        gap: 6px;
    }
}

/* =============================================
   モバイル全体スタイル
   ============================================= */
@media (max-width: 767px) {

    /* ボトムナビ表示・余白 */
    #mobile-bottom-nav { display: flex !important; }
    body { padding-bottom: 68px; }

    /* ======== ヘッダー ======== */
    #main-header .flex.items-center.justify-between {
        height: 56px !important;
    }
    div.header-spacer[style*="height:80px"] {
        height: 56px !important;
    }
    #main-header img[alt="FIRE PLAN 24"] {
        height: 32px !important;
    }
    #main-header .text-xl.font-bold {
        font-size: 14px !important;
    }
    #main-header .text-xs.text-gray-600 {
        font-size: 10px !important;
    }
    #mobile-menu-btn {
        width: 44px !important;
        height: 44px !important;
    }
    #mobile-menu nav {
        padding: 8px 12px 20px !important;
    }
    #mobile-menu a.mobile-nav-link {
        padding: 14px 16px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        margin-bottom: 3px;
        display: flex;
        align-items: center;
    }

    /* ======== ヒーローセクション（共通） ======== */
    main .relative.bg-gradient-to-br.from-teal-600 {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    main .relative.bg-gradient-to-br.from-teal-600 h1 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }
    main .relative.bg-gradient-to-br.from-teal-600 p.text-lg {
        font-size: 12px !important;
        margin-bottom: 0 !important;
    }

    /* TOPページ特有ヒーロー */
    main .relative.bg-gradient-to-br.from-teal-400 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    main .relative.bg-gradient-to-br.from-teal-400 h1 {
        font-size: 20px !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important;
    }
    main .relative.bg-gradient-to-br.from-teal-400 h1 span {
        font-size: 16px !important;
    }
    main .relative.bg-gradient-to-br.from-teal-400 p.text-lg {
        font-size: 12px !important;
        margin-bottom: 16px !important;
    }
    main .relative.bg-gradient-to-br.from-teal-400 .flex.flex-wrap.justify-center.gap-4 a {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
    /* SNSアイコンサイズ調整 */
    main .flex.justify-center.items-center.gap-4 a.w-14 {
        width: 40px !important;
        height: 40px !important;
    }
    main .flex.justify-center.items-center.gap-4 a i {
        font-size: 18px !important;
    }

    /* ======== メインコンテンツ余白 ======== */
    .max-w-\[1400px\].mx-auto.px-4,
    .max-w-7xl.mx-auto.px-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 16px !important;
    }
    .py-12 { padding-top: 16px !important; padding-bottom: 16px !important; }

    /* ======== セクション見出し ======== */
    section h2.text-2xl {
        font-size: 16px !important;
    }
    .text-xl.font-bold { font-size: 15px !important; }
    .text-2xl.font-bold { font-size: 17px !important; }

    /* ======== 運用状況カード（TOPページ） ======== */
    main section .bg-white.rounded-xl.shadow-sm.border.border-gray-100.p-6 {
        padding: 14px !important;
    }
    main section .bg-white.rounded-xl p.text-lg {
        font-size: 18px !important;
    }

    /* ======== 銘柄ページ：タブ・ソートコントロール ======== */
    .flex.items-center.space-x-3 {
        gap: 8px !important;
    }
    /* タブボタン（マネにゃん/ネギ王子） */
    .flex.items-center.space-x-3 > a {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    /* ソート・更新エリア */
    .flex.items-center.justify-between.flex-wrap.gap-3 {
        flex-wrap: wrap !important;
    }
    .flex.items-center.gap-2 select {
        font-size: 12px !important;
        padding: 6px 28px 6px 8px !important;
    }

    /* サマリーカード */
    #summary-card .grid.grid-cols-2.md\\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    #summary-card .text-lg {
        font-size: 14px !important;
    }

    /* ======== 銘柄ページ：テーブルヘッダーアイコン ======== */
    #refresh-stocks-btn,
    #refresh-funds-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    #stock-order-btn,
    #fund-order-btn {
        padding: 6px !important;
    }

    /* ======== 週末レポートカード ======== */
    .report-card .p-6 {
        padding: 14px !important;
    }
    /* 著者アバターを小さく */
    .report-card .w-16.h-16 {
        width: 44px !important;
        height: 44px !important;
    }
    .report-card h2.text-xl {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        line-height: 1.5 !important;
    }
    .report-card .text-xl.font-bold {
        font-size: 14px !important;
    }
    /* 3指標グリッドを2+1に変更 */
    .report-card .grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    .report-card .grid.grid-cols-3 > div {
        padding: 8px 4px !important;
    }
    .report-card .grid.grid-cols-3 .w-7.h-7 {
        width: 24px !important;
        height: 24px !important;
    }
    .report-card .grid.grid-cols-3 .text-sm.font-bold {
        font-size: 12px !important;
    }
    .report-card .grid.grid-cols-3 .text-xs {
        font-size: 10px !important;
    }
    /* サマリーテキスト */
    .report-card .bg-gray-50 p {
        font-size: 12px !important;
    }
    /* いいね・詳細 */
    .report-card .like-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* ======== レポートページ：ソートバー ======== */
    #reports-list + div,
    .bg-white.rounded-xl.shadow-sm.border.border-gray-100.px-4.py-3 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sort-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    /* ======== トピックページ：カテゴリボタン ======== */
    #topics-grid .topic-card {
        padding: 14px !important;
    }
    #topics-grid .topic-card h2 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    #topics-grid .topic-card p {
        font-size: 12px !important;
    }
    /* カテゴリボタン群を横スクロール */
    .flex.flex-wrap.items-center.justify-between.gap-3 > .flex.flex-wrap.gap-2 {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
        max-width: 100%;
    }
    .flex.flex-wrap.items-center.justify-between.gap-3 > .flex.flex-wrap.gap-2::-webkit-scrollbar {
        display: none;
    }
    .category-btn {
        white-space: nowrap;
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
    /* ソートボタングループ */
    .flex.items-center.gap-1.bg-white.border.border-gray-200.rounded-lg.p-1 {
        flex-shrink: 0;
    }
    .sort-btn.flex.items-center.gap-1\\.5 {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* トピックいいね・シェア */
    .topic-like-btn,
    .topic-share-container > button {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* ======== 左右サイドバー ======== */
    aside .bg-white.rounded-xl {
        padding: 14px !important;
    }
    aside h3 { font-size: 13px !important; }
    aside p, aside li, aside a { font-size: 12px !important; }
    aside img, aside table, aside iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    aside table { width: 100% !important; box-sizing: border-box; }

    /* ======== 広告バナー ======== */
    .grid.grid-cols-1.md\\:grid-cols-3 a.group.block {
        padding: 0 !important;
    }
    .grid.grid-cols-1.md\\:grid-cols-3 .h-44 {
        height: 140px !important;
    }
    .grid.grid-cols-1.md\\:grid-cols-3 .p-4 {
        padding: 10px !important;
    }

    /* ======== プロフィールページ ======== */
    /* プロフィールカード */
    .grid.grid-cols-1.lg\\:grid-cols-2 article.bg-white {
        margin-bottom: 0;
    }
    article .w-32.h-32 {
        width: 80px !important;
        height: 80px !important;
    }
    article h2.text-xl {
        font-size: 15px !important;
    }
    .bg-gray-50.rounded-lg.p-4 .grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .bg-gray-50.rounded-lg.p-4 .text-base.font-bold {
        font-size: 13px !important;
    }

    /* ======== お問い合わせフォーム ======== */
    form input,
    form textarea,
    form select {
        font-size: 16px !important; /* iOSのズーム防止 */
    }

    /* ======== フッター ======== */
    footer .py-12 {
        padding-top: 28px !important;
        padding-bottom: 100px !important; /* ボトムナビ分の余白 */
    }
    footer .grid.grid-cols-1 { gap: 20px !important; }
    footer .text-xl.font-bold { font-size: 15px !important; }
    footer p.text-sm { font-size: 12px !important; }
    footer .mt-8.pt-6 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center;
    }
    footer .flex.items-center.space-x-4 { margin-top: 4px !important; }
    /* SNS アイコン */
    footer .w-11.h-11 { width: 40px !important; height: 40px !important; }
}

/* =============================================
   モバイルモーダル → フルスクリーン
   ============================================= */
@media (max-width: 767px) {

    /* 週末レポートモーダル */
    #report-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    #report-modal > div {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        overflow-y: auto;
    }
    #report-modal .sticky.top-0 {
        padding: 14px 16px !important;
    }
    #report-modal .p-6 {
        padding: 16px !important;
    }
    /* モーダル3指標グリッド */
    #report-modal .grid.grid-cols-3 > div {
        padding: 10px 6px !important;
    }
    #report-modal .grid.grid-cols-3 .text-lg.font-bold {
        font-size: 14px !important;
    }
    #report-modal .grid.grid-cols-3 .w-10.h-10 {
        width: 32px !important;
        height: 32px !important;
    }
    /* モーダル著者アバター */
    #report-modal .w-14.h-14 {
        width: 40px !important;
        height: 40px !important;
    }

    /* トピックモーダル */
    #topic-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    #topic-modal > div {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        overflow-y: auto;
    }
    #topic-modal .sticky.top-0,
    #topic-modal .sticky.bottom-0 {
        padding: 12px 16px !important;
    }
    #topic-modal .p-6 { padding: 16px !important; }
    #topic-modal h2.text-2xl { font-size: 18px !important; }
    #topic-modal .w-20.h-20 {
        width: 52px !important;
        height: 52px !important;
    }

    /* 画像モーダル */
    #imageModal > div {
        padding: 8px !important;
    }
    #imageModal #closeModal {
        top: 8px !important;
        right: 8px !important;
    }
}

/* =============================================
   タブレット（768px〜1023px）
   ============================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    .max-w-\[1400px\].mx-auto { padding-left: 16px !important; padding-right: 16px !important; }

    /* 銘柄テーブルを横スクロール */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #stock-table th,
    #stock-table td,
    #fund-table th,
    #fund-table td {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }
}

/* =============================================
   タッチデバイス共通
   ============================================= */
@media (hover: none) and (pointer: coarse) {
    /* タップ領域を最低44px確保 */
    button, a, .cursor-pointer {
        min-height: 36px;
    }
    /* ホバースタイルを無効化 */
    .hover\:shadow-md:hover,
    .hover\:shadow-lg:hover {
        box-shadow: none;
    }
}