/* =============================================================================
   MOBILE.CSS - カレンダーページ用モバイルスタイル
   ============================================================================= */

/* ================== PCモード（768px超）================== */
/* 画面幅を1240pxで固定（縮小しない） */
html,
body {
    min-width: 1240px;
}

.container {
    width: 1240px;
    max-width: none;
}

/* デフォルトでモバイル専用要素を非表示（PCモード） */
.sidebar-mobile-tools {
    display: none;
}

/* PCモードではハンバーガーメニューとサイドバーオーバーレイを非表示 */
@media (min-width: 769px) {

    .hamburger-menu,
    .sidebar-overlay,
    .mobile-view-controls,
    .category-section-header-mobile,
    .summary-section-header-mobile,
    .sidebar-mobile-tools,
    .size-adjust-row,
    .yearly-controls,
    .mobile-header-user,
    .mobile-header-sns {
        display: none !important;
    }

    /* data_monthlyページではPC表示でも表示設定を表示（開閉式ではなく通常表示） */
    .calendar-wrapper:has(.data-scale-wrapper) .mobile-view-controls {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin: 12px 0;
        padding: 10px 16px;
        background: #f1f5f9;
        border-radius: 8px;
    }

    /* 年間ページ、資産ページは設定項目がないのでPC表示では非表示 */
    .calendar-wrapper:has(.data-scale-wrapper) .mobile-view-controls.yearly-controls,
    .calendar-wrapper:has(.data-scale-wrapper) .mobile-view-controls.assets-controls {
        display: none !important;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .mobile-view-controls::before {
        content: '表示:';
        color: #64748b;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
    }

    /* PC表示では折りたたみトグルを非表示、パネルを常時表示 */
    .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-toggle {
        display: none !important;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-panel {
        display: flex !important;
        gap: 16px;
        padding: 0;
        border: none;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-panel .mobile-view-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        background: transparent;
        border: none;
        font-size: 12px;
        font-weight: 500;
        color: #64748b;
        line-height: 20px;
        cursor: pointer;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-panel .mobile-view-btn .toggle-switch {
        display: inline-block;
        width: 36px;
        height: 20px;
        background: #cbd5e1;
        border-radius: 10px;
        position: relative;
        transition: background 0.2s ease;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-panel .mobile-view-btn .toggle-switch::after {
        content: '';
        position: absolute;
        left: 2px;
        top: 2px;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: left 0.2s ease;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-panel .mobile-view-btn.active .toggle-switch {
        background: #3b82f6;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-panel .mobile-view-btn.active .toggle-switch::after {
        left: 18px;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-panel .mobile-view-btn.active {
        color: #1e40af;
    }

    /* PC表示では「スクロール表示」を非表示（モバイル専用機能） */
    .calendar-wrapper:has(.data-scale-wrapper) #scrollModeBtn {
        display: none !important;
    }

    /* PC版ダークモード対応 */
    [data-theme="dark"] .calendar-wrapper:has(.data-scale-wrapper) .mobile-view-controls {
        background: #334155;
        border: 1px solid #475569;
    }

    [data-theme="dark"] .calendar-wrapper:has(.data-scale-wrapper) .mobile-view-controls::before {
        color: #94a3b8;
    }

    [data-theme="dark"] .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-panel .mobile-view-btn {
        color: #94a3b8;
    }

    [data-theme="dark"] .calendar-wrapper:has(.data-scale-wrapper) .mobile-settings-panel .mobile-view-btn.active {
        color: #93c5fd;
    }
}

/* ================== モバイルモード（768px以下）================== */
@media (max-width: 768px) {

    /* モバイルで非表示にする要素 */
    .hide-on-mobile {
        display: none !important;
    }

    /* モバイルで通知ドロップダウンを表示 */
    .mobile-header-sns {
        display: block !important;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    /* モバイルでタイムライン・メッセージリンクを非表示（通知ドロップダウンに移動済み） */
    .header-nav-link[href*="timeline"],
    .header-nav-link[href*="messages"] {
        display: none !important;
    }

    /* PC固定幅を解除 */
    html,
    body {
        min-width: unset !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px 5px 5px !important;
        margin-top: 0 !important;
    }

    /* ヘッダー モバイル対応 */
    header .header-title {
        padding: 12px 16px !important;
    }

    header h1 {
        font-size: 24px !important;
    }

    /* モバイル時は時計を非表示 */
    .header-clock {
        display: none !important;
    }

    .site-logo {
        height: 32px !important;
    }

    /* 2段目を完全非表示（ログイン情報はハンバーガーメニューへ） */
    .header-nav {
        display: none !important;
    }

    /* モバイル用メインナビ */
    .mobile-main-nav {
        display: flex;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        background: #1C1C1C;
        padding: 8px 12px;
        gap: 4px;
        white-space: nowrap;
    }

    /* ドロップダウン展開時の設定（overflowは変更しない） */
    /* 注: overflow: visible に変更するとレイアウトが崩れるため削除 */

    .mobile-nav-item {
        color: #fff;
        text-decoration: none;
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 6px;
        transition: background 0.2s;
    }

    .mobile-nav-item.active {
        color: #4dabf7;
    }

    .mobile-nav-item.has-dropdown {
        position: relative;
        padding: 0;
    }

    .mobile-nav-trigger {
        display: flex;
        align-items: center;
        gap: 4px;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.2s;
    }

    .mobile-nav-trigger:active {
        background: #333;
    }

    .mobile-nav-item.has-dropdown.active .mobile-nav-trigger {
        color: #4dabf7;
    }

    .mobile-nav-item.has-dropdown .dropdown-arrow {
        font-size: 8px;
        transition: transform 0.2s;
    }

    .mobile-nav-item.has-dropdown.open .dropdown-arrow {
        transform: rotate(180deg);
    }

    .mobile-nav-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 140px;
        background: #2a2a2a;
        border-radius: 6px;
        padding: 4px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }

    .mobile-nav-item.has-dropdown.open .mobile-nav-dropdown {
        display: block;
    }

    .mobile-nav-dropdown a {
        display: block;
        padding: 10px 16px;
        color: #ccc;
        text-decoration: none;
        font-size: 14px;
        transition: background 0.2s;
        white-space: nowrap;
    }

    .mobile-nav-dropdown a:active {
        background: #3a3a3a;
    }

    .mobile-nav-dropdown a.active {
        color: #4dabf7;
        background: rgba(77, 171, 247, 0.1);
    }

    /* 開閉式ドロップダウントリガーボタン */
    .mobile-nav-dropdown-trigger {
        display: flex;
        align-items: center;
        gap: 4px;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.2s;
        white-space: nowrap;
    }

    .mobile-nav-dropdown-trigger:active {
        background: #333;
    }

    .mobile-nav-item.has-dropdown.active .mobile-nav-dropdown-trigger {
        color: #4dabf7;
    }

    .mobile-nav-dropdown-trigger .dropdown-arrow {
        font-size: 8px;
        transition: transform 0.2s;
    }

    .mobile-nav-item.has-dropdown.open .mobile-nav-dropdown-trigger .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* 開閉式ドロップダウンメニュー（position: fixedで親のoverflowに依存しない） */
    .mobile-nav-dropdown-menu {
        display: none;
        position: fixed;
        min-width: 160px;
        background: #2a2a2a;
        border-radius: 6px;
        padding: 4px 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 10000;
        /* 位置はJSで動的に設定 */
    }

    .mobile-nav-item.has-dropdown.open .mobile-nav-dropdown-menu {
        display: block;
    }

    .mobile-nav-dropdown-menu a {
        display: block;
        padding: 10px 16px;
        color: #ccc;
        text-decoration: none;
        font-size: 14px;
        transition: background 0.2s;
        white-space: nowrap;
    }

    .mobile-nav-dropdown-menu a:active {
        background: #3a3a3a;
    }

    .mobile-nav-dropdown-menu a.active {
        color: #4dabf7;
        background: rgba(77, 171, 247, 0.1);
    }

    /* モバイル用ユーザーボタン（ヘッダー右側に配置） */
    .header-title {
        position: relative;
    }

    .mobile-header-user {
        display: block !important;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .mobile-header-user-trigger {
        display: flex;
        align-items: center;
        gap: 4px;
        background: transparent;
        border: none;
        color: #ccc;
        font-size: 12px;
        padding: 3px 5px 3px 3px;
        cursor: pointer;
        border-radius: 6px;
        white-space: nowrap;
    }

    .mobile-header-user-trigger:active {
        background: rgba(255,255,255,0.1);
    }

    .mobile-header-user .mobile-user-number {
        color: #9ca3af;
        font-size: 11px;
    }

    .mobile-header-user-trigger .dropdown-arrow {
        font-size: 8px;
        margin-left: 4px;
        transition: transform 0.2s;
    }

    .mobile-header-user.open .dropdown-arrow {
        transform: rotate(180deg);
    }

    .mobile-header-user-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 4px;
        width: 160px;
        background: #2a2a2a;
        border-radius: 8px;
        padding: 4px 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        z-index: 9999;
    }

    .mobile-header-user.open .mobile-header-user-menu {
        display: block;
    }

    .mobile-header-user-menu a {
        display: block;
        padding: 12px 16px;
        color: #ccc;
        text-decoration: none;
        font-size: 14px;
    }

    .mobile-header-user-menu a:active {
        background: #3a3a3a;
        color: #fff;
    }

    .mobile-header-user-menu .debug-badge-inline {
        display: block;
        padding: 12px 16px;
        color: #fbbf24;
        font-size: 12px;
        background: rgba(251, 191, 36, 0.1);
    }

    /* モバイル用SNSドロップダウンのスタイル定義（表示/非表示はメディアクエリで制御） */

    .mobile-header-sns-trigger {
        display: flex;
        align-items: center;
        gap: 4px;
        background: transparent;
        border: none;
        color: #ccc;
        font-size: 12px;
        padding: 3px 5px 3px 3px;
        cursor: pointer;
        border-radius: 6px;
        white-space: nowrap;
    }

    .mobile-header-sns-trigger:active {
        background: rgba(255,255,255,0.1);
    }

    .mobile-header-sns-trigger .dropdown-arrow {
        font-size: 8px;
        margin-left: 4px;
        transition: transform 0.2s;
    }

    .mobile-header-sns.open .dropdown-arrow {
        transform: rotate(180deg);
    }

    .mobile-sns-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #ef4444;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        border-radius: 8px;
        margin-left: 4px;
    }

    .mobile-header-sns-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 4px;
        width: 180px;
        background: #2a2a2a;
        border-radius: 8px;
        padding: 4px 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        z-index: 9999;
    }

    .mobile-header-sns.open .mobile-header-sns-menu {
        display: block;
    }

    .mobile-header-sns-menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        color: #ccc;
        text-decoration: none;
        font-size: 14px;
    }

    .mobile-header-sns-menu a:active {
        background: #3a3a3a;
        color: #fff;
    }

    .mobile-header-sns-menu .menu-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: #ef4444;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        border-radius: 10px;
    }

    .mobile-header-login {
        color: #4dabf7;
        text-decoration: none;
        font-size: 12px;
    }

    /* サイドバー最上部にユーザー情報を表示 */
    .sidebar-user-section {
        display: flex !important;
    }

    /* モバイルではプロフィールセクションを非表示 */
    .sidebar-profile-section {
        display: none !important;
    }

    /* カレンダーのカード設定 */
    .calendar-wrapper {
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 12px !important;
    }

    /* カレンダースケーリング用 */
    .calendar-scale-wrapper {
        overflow: hidden;
        width: 100%;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }

    .calendar {
        transform-origin: top left;
    }

    .calendar-scale-wrapper {
        order: 3 !important;
    }

    /* サマリー部分をセンター揃え */
    .calendar-header-row {
        order: 1 !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 20px !important;
    }

    /* ナビを横並び: 前月 | 年月 | 翌月 */
    .calendar-nav {
        order: 1 !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    .calendar-nav h2 {
        order: 2;
        font-size: 32px !important;
        margin: 0;
    }

    .calendar-nav .nav-buttons {
        display: contents;
    }

    .calendar-nav .btn-nav:first-child {
        order: 1;
    }

    .calendar-nav .btn-nav:last-child {
        order: 3;
    }

    .summary-inline {
        align-items: center !important;
        width: 100%;
    }

    .summary-totals {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .summary-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .summary-cell {
        min-width: 0;
        overflow: hidden;
        padding: 10px 12px;
        border-left: none;
        border-top: 1px solid #b0bac7;
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .summary-cell .summary-value {
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }

    .summary-cell:first-child {
        border-top: none;
    }

    .summary-label {
        font-size: 18px !important;
        text-align: left !important;
        display: inline !important;
        width: auto !important;
        flex-shrink: 0;
    }

    .summary-value {
        font-size: 18px !important;
        text-align: right !important;
        display: inline !important;
        width: auto !important;
    }

    .summary-percent {
        font-size: 14px;
        text-align: right !important;
        display: block !important;
        width: 100% !important;
        margin-top: 2px;
    }

    .category-summary {
        justify-content: center;
        flex-wrap: wrap;
    }

    .two-column-layout {
        display: block !important;
    }

    /* モバイル表示切り替えボタン */
    .mobile-view-controls {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin: 5px 0 10px !important;
        flex-wrap: wrap;
    }

    .mobile-view-btn {
        padding: 6px 12px;
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 4px;
        background: var(--card-bg, #fff);
        color: var(--text, #1a202c);
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-view-btn.active {
        background: var(--positive, #3182ce);
        color: #fff;
        border-color: var(--positive, #3182ce);
    }

    .mobile-view-btn:hover {
        opacity: 0.8;
    }

    /* モバイル時にサマリーをカレンダーの下に移動 */
    .calendar-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    .calendar-header-row {
        order: 1 !important;
        flex-direction: column !important;
        margin-bottom: 0 !important;
    }

    .calendar-nav {
        order: 1 !important;
        margin: 10px 0 !important;
        padding: 0 !important;
    }

    .calendar-nav .btn-nav {
        font-size: 18px !important;
    }

    .summary-totals {
        order: 5 !important;
        margin: 0 5px 5px !important;
        padding: 12px 0 !important;
        background: transparent !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        max-width: calc(100% - 10px) !important;
    }

    .summary-totals .summary-cell {
        text-align: center !important;
    }

    .summary-totals .summary-label {
        text-align: center !important;
        display: block !important;
    }

    .summary-categories-inline {
        order: 7 !important;
        margin: 0 5px 16px !important;
        padding: 12px 8px !important;
        background: transparent !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        max-width: calc(100% - 10px) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .summary-categories-inline .category-item {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
        border: none !important;
        border-radius: 20px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .summary-categories-inline .category-item .category-name,
    .summary-categories-inline .category-item,
    .summary-categories-inline .cat-badge,
    .summary-categories-inline .cat-badge .cat-name,
    .summary-categories-inline .cat-badge .cat-amount {
        font-weight: 500 !important;
    }

    /* モバイル用カテゴリセクションヘッダー */
    .category-section-header-mobile {
        order: 6 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        width: calc(100% - 10px);
        font-size: 16px;
        font-weight: 700;
        color: #475569;
        margin: 0 5px 4px 5px;
        padding: 8px 12px;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border-radius: 8px;
        border-left: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    .category-section-header-mobile::before {
        content: "📊";
        font-size: 16px;
    }

    /* モバイル用サマリーセクションヘッダー */
    .summary-section-header-mobile {
        order: 4 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        width: calc(100% - 10px);
        font-size: 16px;
        font-weight: 700;
        color: #475569;
        margin: 20px 5px 4px 5px;
        padding: 8px 12px;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    .summary-section-header-mobile::before {
        content: "💰";
        font-size: 16px;
    }

    .mobile-view-controls {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin: 5px 5px 12px !important;
        background: #f1f5f9 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .mobile-view-controls::before {
        display: none !important;
    }

    /* 折りたたみトグルボタン */
    .mobile-settings-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 12px 16px !important;
        background: transparent !important;
        border: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #475569 !important;
        cursor: pointer !important;
    }

    .mobile-settings-toggle .toggle-arrow {
        transition: transform 0.2s ease !important;
    }

    .mobile-view-controls.open .mobile-settings-toggle .toggle-arrow {
        transform: rotate(180deg) !important;
    }

    /* 設定パネル（デフォルト非表示） */
    .mobile-settings-panel {
        display: none !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .mobile-view-controls.open .mobile-settings-panel {
        display: flex !important;
    }

    /* 設定パネル内のボタン */
    .mobile-settings-panel .mobile-view-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 12px 16px !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #334155 !important;
        cursor: pointer !important;
    }

    .mobile-settings-panel .mobile-view-btn:last-child {
        border-bottom: none !important;
    }

    .mobile-settings-panel .mobile-view-btn .toggle-switch {
        order: 2 !important;
    }

    /* 表示サイズ調整スライダー */
    .size-adjust-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .size-adjust-row label {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #334155 !important;
        white-space: nowrap !important;
    }

    .size-adjust-row input[type="range"] {
        flex: 1 !important;
        height: 6px !important;
        background: #e2e8f0 !important;
        border-radius: 3px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        cursor: pointer !important;
    }

    .size-adjust-row input[type="range"]::-webkit-slider-thumb {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 20px !important;
        height: 20px !important;
        background: #3b82f6 !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    .size-adjust-row #sizeAdjustValue {
        min-width: 45px !important;
        text-align: right !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #3b82f6 !important;
    }

    .mobile-view-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #64748b !important;
        cursor: pointer !important;
    }

    /* トグルスイッチ本体 */
    .mobile-view-btn .toggle-switch {
        display: inline-block !important;
        width: 36px !important;
        height: 20px !important;
        background: #cbd5e1 !important;
        border-radius: 10px !important;
        position: relative !important;
        transition: background 0.2s ease !important;
    }

    .mobile-view-btn .toggle-switch::after {
        content: '' !important;
        position: absolute !important;
        left: 2px !important;
        top: 2px !important;
        width: 16px !important;
        height: 16px !important;
        background: #fff !important;
        border-radius: 50% !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
        transition: left 0.2s ease !important;
    }

    .mobile-view-btn.active .toggle-switch {
        background: #3b82f6 !important;
    }

    .mobile-view-btn.active .toggle-switch::after {
        left: 18px !important;
    }

    .mobile-view-btn.active {
        color: #1e40af !important;
    }

    /* 平日のみモード：土日列を非表示 */
    /* 日曜（1列目）と土曜（7列目）を非表示 */
    .weekday-only .weekday-header.sun,
    .weekday-only .weekday-header.sat,
    .weekday-only .day-cell:nth-child(7n+1),
    .weekday-only .day-cell:nth-child(7n) {
        display: none !important;
    }

    /* 平日のみモード時のグリッドを5列に変更 */
    .weekday-only .calendar {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    /* スクロールモード：縮小せずに横スクロール */
    .scroll-mode .calendar-scale-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        height: auto !important;
    }

    .scroll-mode .calendar {
        transform: none !important;
        width: 1000px !important;
        min-width: 1000px !important;
        grid-template-columns: repeat(7, 1fr) !important;
    }

    /* 平日のみ + スクロールモード時は5列・700px */
    .weekday-only.scroll-mode .calendar {
        width: 700px !important;
        min-width: 700px !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    /* 文字サイズ調整（--font-scale CSS変数使用） */
    .data-body {
        --font-scale: 1;
    }

    .data-body .data-table td,
    .data-body .data-table th,
    .data-body .listview-table td,
    .data-body .listview-table th,
    .data-body .summary-table td,
    .data-body .summary-table th {
        font-size: calc(14px * var(--font-scale)) !important;
    }

    /* ハンバーガーメニューボタン */
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        position: fixed;
        bottom: 15px;
        left: 15px;
        z-index: 1001;
        width: 44px;
        height: 44px;
        padding: 10px;
        background: var(--card-bg, #fff);
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .hamburger-menu span {
        display: block;
        width: 24px;
        height: 3px;
        background: var(--text, #1e293b);
        border-radius: 2px;
    }

    /* サイドバーオーバーレイ */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* サイドバー（モバイル時は左から出現） */
    .main-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px;
        width: 260px !important;
        height: 100% !important;
        z-index: 1000;
        transition: left 0.3s ease;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: var(--card-bg, #fff) !important;
    }

    .main-sidebar.open {
        left: 0;
    }

    /* サイドバーメニューをリセット（layout.cssの上書き） */
    .sidebar-menu {
        display: flex !important;
        flex-direction: column !important;
        overflow-x: visible !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .sidebar-menu>li {
        width: 100% !important;
        min-width: unset !important;
    }

    .sidebar-menu a {
        white-space: normal !important;
    }

    /* ヘッダー2段構成 */
    header {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    header h1 {
        order: 1 !important;
        text-align: center !important;
        width: 100% !important;
        font-size: 32px !important;
        margin: 0 !important;
    }

    .user-info {
        order: 2 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ヘッダーの電卓・スクショボタンは非表示（サイドバーに移動） */
    .btn-header {
        display: none !important;
    }

    header .screenshot-dropdown {
        display: none !important;
    }

    /* サイドバー内モバイルツールセクション */
    .sidebar-mobile-tools {
        display: block !important;
        padding: 16px 12px;
        padding-bottom: 80px;
        margin-top: auto;
    }

    .mobile-tools-divider {
        height: 1px;
        background: var(--border, #e2e8f0);
        margin-bottom: 16px;
    }

    .mobile-tools-buttons {
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    .btn-mobile-tool {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        background: var(--card-bg, #fff);
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 8px;
        font-size: 24px;
        color: var(--text, #1e293b);
        cursor: pointer;
        transition: all 0.2s ease;
        line-height: 1;
    }

    .btn-mobile-tool:hover {
        background: var(--hover-bg, #f1f5f9);
        border-color: var(--primary, #3b82f6);
    }

    .btn-mobile-tool .tool-text {
        display: none;
    }

    /* サイドバー内スクショドロップダウン */
    .sidebar-mobile-tools .screenshot-dropdown {
        display: block !important;
        position: static;
    }

    .sidebar-mobile-tools .screenshot-menu {
        position: fixed;
        top: auto;
        bottom: 80px;
        left: 12px;
        right: auto;
        width: 220px;
        height: auto;
        overflow: visible;
        background: var(--card-bg, #fff);
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        display: none;
        z-index: 1100;
    }

    .sidebar-mobile-tools .screenshot-dropdown.open .screenshot-menu {
        display: block;
    }

    .sidebar-mobile-tools .screenshot-option {
        display: block;
        width: 100%;
        padding: 12px 16px;
        background: transparent;
        border: none;
        text-align: left;
        font-size: 14px;
        color: var(--text, #1e293b);
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .sidebar-mobile-tools .screenshot-option:hover {
        background: var(--hover-bg, #f1f5f9);
    }

    .sidebar-mobile-tools .screenshot-menu-section {
        padding: 8px 16px 4px;
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
    }

    .sidebar-mobile-tools .screenshot-menu-divider {
        height: 1px;
        background: var(--border, #e2e8f0);
        margin: 8px 0;
    }

    /* ================== data_monthly.php テーブルスケーリング ================== */

    /* テーブルスケーリング用ラッパー */
    .data-scale-wrapper {
        overflow: hidden;
        width: 100%;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }

    .data-body {
        transform-origin: top left;
    }

    .data-scale-wrapper {
        order: 3 !important;
    }

    /* 月間損益ページの日付列：CSS変数で幅を制御、改行表示 */
    .listview-table .th-date,
    .listview-table .day-cell {
        width: var(--date-column-width, 80px) !important;
        min-width: var(--date-column-width, 80px) !important;
        max-width: var(--date-column-width, 80px) !important;
        white-space: normal !important;
        word-break: break-all !important;
    }

    /* モバイル時は日のみ表示（1 (木)形式） */
    .date-pc {
        display: none !important;
    }
    .date-mobile {
        display: inline !important;
    }

    /* 月間損益ページのヘッダー行：省略表示 */
    .listview-table thead th {
        font-size: calc(14px * var(--font-scale, 1)) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 月間損益ページのデータセル（日付列以外）：改行表示 */
    .listview-table tbody td:not(.day-cell),
    .listview-table tfoot td:not(:first-child) {
        white-space: normal !important;
        word-break: break-all !important;
    }

    /* スクロールモード：縮小せずに横スクロール */
    .scroll-mode .data-scale-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        height: auto !important;
    }

    .scroll-mode .data-body {
        transform: none !important;
        width: 900px !important;
        min-width: 900px !important;
    }

    /* フィルターコントロールをモバイル用に調整 */
    .filter-controls {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }

    .filter-label {
        display: none;
    }

    .filter-btn {
        width: 100%;
        justify-content: center;
    }

    /* data_monthly: モバイル時の調整 */
    /* 下部ナビを表の下、収益サマリーの上に表示 */
    .calendar-wrapper:has(.data-scale-wrapper) .bottom-nav {
        order: 4 !important;
        margin: 12px 5px !important;
    }

    /* サマリー系のorderを調整（bottom-navより後に） */
    .calendar-wrapper:has(.data-scale-wrapper) .summary-section-header-mobile {
        order: 5 !important;
        margin-top: 16px !important;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .summary-totals {
        order: 6 !important;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .category-section-header-mobile {
        order: 7 !important;
    }

    .calendar-wrapper:has(.data-scale-wrapper) .summary-categories-inline {
        order: 8 !important;
    }

    /* 無効化されたボタンのスタイル */
    .mobile-settings-panel .mobile-view-btn.disabled,
    .mobile-settings-panel .size-adjust-row.disabled {
        opacity: 0.5 !important;
        pointer-events: none !important;
        color: #94a3b8 !important;
    }

    /* 合計のみ表示モード */
    /* ヘッダー：日付/月/年列と合計列とメモ列以外を非表示 */
    .total-only .data-table th:not(.th-date):not(.th-month):not(.th-year):not(.th-total):not(.th-comment) {
        display: none !important;
    }
    
    /* データセル（月間ページ用）：日付列、合計列、メモ列以外を非表示 */
    .total-only .listview-table td:not(.day-cell):not(.daily-total):not(.comment-cell) {
        display: none !important;
    }
    
    /* データセル（年間・生涯ページ用）：最初の列と最後の列以外を非表示 */
    .total-only .summary-table td:not(:first-child):not(:last-child) {
        display: none !important;
    }

    .total-only .data-scale-wrapper {
        overflow: visible !important;
        height: auto !important;
    }

    .total-only .data-body {
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .total-only .data-table {
        width: 100% !important;
    }

    /* 月間ページ用：3列レイアウト（日付、合計、メモ） */
    .total-only .listview-table .th-date,
    .total-only .listview-table .day-cell {
        width: 30% !important;
    }

    .total-only .listview-table .th-total,
    .total-only .listview-table .daily-total {
        width: 40% !important;
        text-align: center !important;
    }

    .total-only .listview-table .th-comment,
    .total-only .listview-table .comment-cell {
        width: 30% !important;
    }

    /* 年間・生涯ページ用：2列レイアウト（月/年、合計） */
    .total-only .summary-table .th-month,
    .total-only .summary-table .th-year,
    .total-only .summary-table td:first-child {
        width: 40% !important;
    }

    .total-only .summary-table .th-total,
    .total-only .summary-table td:last-child {
        width: 60% !important;
        text-align: center !important;
    }

    /* ========== 年間・生涯損益ページ（summary-table）用モバイルスタイル ========== */
    /* 月間損益ページと同じ仕組み: テーブル全体をtransformでスケーリング、文字サイズのみ変動 */

    .summary-table {
        font-size: 12px !important;
        table-layout: fixed !important;
    }

    .summary-table th,
    .summary-table td {
        padding: 8px 4px !important;
        font-size: calc(14px * var(--font-scale, 1)) !important;
    }

    /* ヘッダー行: 省略表示 */
    .summary-table thead th {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* データ行: 改行表示 */
    .summary-table tbody td,
    .summary-table tfoot td {
        white-space: normal !important;
        word-break: break-all !important;
    }

    .summary-table .th-year,
    .summary-table .th-month,
    .summary-table .month-cell {
        width: var(--date-column-width, 80px) !important;
        min-width: var(--date-column-width, 80px) !important;
        max-width: var(--date-column-width, 80px) !important;
        white-space: normal !important;
        word-break: break-all !important;
    }

    .summary-table .cell-category,
    .summary-table .cell-total {
        text-align: right !important;
    }

    /* スケーリングラッパー：月間ページと同様にスケーリング適用 */
    .data-scale-wrapper {
        overflow: hidden !important;
    }

    /* スクロールモード時のみ横スクロール許可 */
    .scroll-mode .data-scale-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ========== チャートページ用モバイルスタイル ========== */

    /* チャートページ全体のマージンを縮小 */
    .chart-container {
        padding: 5px !important;
    }

    /* PC用コントロールを非表示 */
    .chart-controls {
        display: none !important;
    }

    /* モバイル用折りたたみコントロール */
    .chart-controls-collapsible {
        display: block !important;
        margin: 8px 0;
        background: #f1f5f9;
        border-radius: 8px;
        overflow: hidden;
    }

    body[data-theme="dark"] .chart-controls-collapsible {
        background: #1e293b;
    }

    .chart-controls-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        background: transparent;
        border: none;
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
    }

    body[data-theme="dark"] .chart-controls-toggle {
        color: #94a3b8;
    }

    .chart-controls-toggle .toggle-arrow {
        transition: transform 0.2s ease;
    }

    .chart-controls-collapsible.open .toggle-arrow {
        transform: rotate(180deg);
    }

    .chart-controls-panel {
        display: none;
        padding: 0;
        border-top: 1px solid #e2e8f0;
    }

    body[data-theme="dark"] .chart-controls-panel {
        border-top-color: #334155;
    }

    .chart-controls-collapsible.open .chart-controls-panel {
        display: block;
    }

    .control-row {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        border-bottom: 1px solid #e2e8f0;
        gap: 12px;
    }

    body[data-theme="dark"] .control-row {
        border-bottom-color: #334155;
    }

    .control-row:last-child {
        border-bottom: none;
    }

    .control-label {
        font-size: 14px;
        font-weight: 500;
        color: #64748b;
        min-width: 40px;
    }

    .control-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        flex: 1;
    }

    .ctrl-btn {
        padding: 6px 12px;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #334155;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
    }

    body[data-theme="dark"] .ctrl-btn {
        border-color: #475569;
        background: #1e293b;
        color: #e2e8f0;
    }

    .ctrl-btn.active {
        background: #3b82f6;
        color: #fff;
        border-color: #3b82f6;
    }

    .visibility-row {
        flex-wrap: wrap;
    }

    .visibility-checkboxes {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .vis-checkbox {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #475569;
        cursor: pointer;
    }

    body[data-theme="dark"] .vis-checkbox {
        color: #94a3b8;
    }

    .vis-checkbox input {
        width: 16px;
        height: 16px;
    }

    /* PC用表示コントロールを非表示 */
    .visibility-controls {
        display: none !important;
    }

    /* チャートヘッダー調整 */
    .chart-header {
        flex-direction: column;
        gap: 8px;
    }

    .chart-container .nav-buttons {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .current-period {
        font-size: 28px !important;
        min-width: 140px;
    }

    .chart-container .nav-btn.year {
        display: none;
    }

    /* サマリーカード調整（カード内部を2行：ラベル・金額） */
    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .summary-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        gap: 2px;
    }

    .summary-label {
        font-size: 12px;
        margin-bottom: 0;
    }

    .summary-value {
        font-size: 14px;
        white-space: nowrap;
    }

    /* チャートラッパー高さ調整 */
    .chart-wrapper {
        height: 300px !important;
    }

    /* 単位コントロールグループ背景色 */
    .control-group-unit {
        background: #fef3c7;
    }

    body[data-theme="dark"] .control-group-unit {
        background: #422006;
    }
}

/* PC表示時はモバイル用コントロールを非表示 */
@media (min-width: 769px) {
    .chart-controls-collapsible {
        display: none !important;
    }
}

/* ========== モバイル時のカテゴリ別チャートグリッド ========== */
@media (max-width: 768px) {
    .category-charts-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .chart-card-canvas {
        height: 180px !important;
    }
}

/* ========== ブログページ用モバイルスタイル ========== */
@media (max-width: 768px) {
    /* ブログレイアウト：メインコンテンツを上に、サイドバーを下に */
    .main-content-area.blog-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .main-content-area.blog-layout .blog-main {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .main-content-area.blog-layout .blog-main .calendar-wrapper {
        order: -1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .main-content-area.blog-layout .blog-main .calendar-wrapper .back-link {
        order: 1 !important;
    }

    .main-content-area.blog-layout .blog-main .calendar-wrapper .calendar-header-row {
        order: 2 !important;
        margin-top: 0 !important;
    }

    .main-content-area.blog-layout .blog-main .calendar-wrapper .category-grid,
    .main-content-area.blog-layout .blog-main .calendar-wrapper .comment-list,
    .main-content-area.blog-layout .blog-main .calendar-wrapper .category-list,
    .main-content-area.blog-layout .blog-main .calendar-wrapper .category-card {
        order: 3 !important;
    }

    .main-content-area.blog-layout .blog-sidebar {
        order: 2 !important;
    }

    /* ブログ編集ページ専用：タイトル左揃え（body.blog-edit-pageで限定） */
    body.blog-edit-page .calendar-header-row {
        text-align: left !important;
        align-items: flex-start !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        margin-top: 0 !important;
    }

    body.blog-edit-page .calendar-nav {
        justify-content: flex-start !important;
    }

    body.blog-edit-page .calendar-nav h2 {
        font-size: 22px !important;
        text-align: left !important;
    }

    body.blog-edit-page .back-link {
        display: inline-block !important;
        margin-top: 20px !important;
        margin-bottom: 16px !important;
    }

    body.blog-edit-page .calendar-wrapper {
        display: block !important;
        padding: 0 10px !important;
    }

    /* カテゴリ一覧、カテゴリ編集、コメント一覧ページ用 */
    body.blog-category-list-page .back-link,
    body.blog-categories-page .back-link,
    body.blog-comment-list-page .back-link {
        display: inline-block !important;
        margin-top: 20px !important;
        margin-bottom: 16px !important;
    }

    body.blog-category-list-page .calendar-wrapper,
    body.blog-categories-page .calendar-wrapper,
    body.blog-comment-list-page .calendar-wrapper {
        padding: 0 10px 20px 10px !important;
    }

    /* ブログトップページのタイトル下マージン */
    .blog-header {
        margin-bottom: 40px !important;
    }
    
    /* モバイル用サブナビゲーション */
    .mobile-subnav {
        display: block;
        background: #1C1C1C;
        border-bottom: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    
    .mobile-subnav-scroll {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0;
        margin: 0;
        gap: 0;
    }
    
    .mobile-subnav-scroll::-webkit-scrollbar {
        display: none;
    }
    
    .mobile-subnav-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 12px 16px;
        border-radius: 0;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0;
        transition: all 0.2s ease;
        background: transparent;
    }
    
    .mobile-subnav-item:hover {
        background: #333;
    }
    
    .mobile-subnav-item.active {
        background: var(--primary);
        color: white;
    }
    
    .mobile-subnav-icon {
        font-size: 14px;
    }
    
    .mobile-subnav-text {
        font-size: 14px;
    }

    /* BBS スレッド参加ボタン - モバイル用（右上に配置） */
    .thread-item {
        position: relative !important;
    }

    .thread-item .btn-subscribe {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        margin-left: 0 !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 14px !important;
    }

    /* ========== ダークモード対応 ========== */
    [data-theme="dark"] .category-section-header-mobile,
    [data-theme="dark"] .summary-section-header-mobile {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
        color: #e2e8f0 !important;
    }

    [data-theme="dark"] .mobile-view-controls {
        background: #334155 !important;
        border: 1px solid #475569 !important;
    }

    [data-theme="dark"] .mobile-settings-toggle {
        color: #e2e8f0 !important;
    }

    [data-theme="dark"] .mobile-settings-panel {
        border-top-color: #475569 !important;
    }

    [data-theme="dark"] .mobile-settings-panel .mobile-view-btn {
        color: #e2e8f0 !important;
        border-bottom-color: #475569 !important;
    }

    [data-theme="dark"] .size-adjust-row {
        border-top-color: #475569 !important;
    }

    [data-theme="dark"] .size-adjust-row label {
        color: #e2e8f0 !important;
    }

    [data-theme="dark"] .size-adjust-row input[type="range"] {
        background: #475569 !important;
    }
}

/* PCモードではモバイル用サブナビを非表示 */
@media (min-width: 769px) {
    .mobile-subnav {
        display: none !important;
    }
}

/* モバイルモーダル調整 */
@media (max-width: 768px) {
    /* モーダルを上寄せ配置でスクロール可能に */
    .modal {
        align-items: flex-start !important;
        padding: 20px 0 100px 0 !important;
        overflow-y: auto !important;
    }

    .modal-content {
        margin: 0 auto !important;
        max-height: none !important;
        width: 95% !important;
    }
}