/* ==========================================================================
   ざいのーと [財布管理] スマホ横画面（Landscape）専用スタイル
   ========================================================================== */

/* ==========================================================================
   スマホ横画面対応（Landscape Mode & 画面低）
   シート幅を広く使って2大カラム（商品情報列 / 金額・数量列）に展開し、
   スクロール無しで1画面にすべて収める最適化レイアウト
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 520px),
       screen and (min-width: 600px) and (max-height: 520px) {
    /* 全体の横スクロール防止 */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    .mobile-detail-sheet {
        width: 96vw !important;
        max-width: 920px !important;
        max-height: 98vh !important;
        border-radius: 12px 12px 0 0 !important;
        bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .sheet-drag-handle {
        width: 36px !important;
        height: 3px !important;
        margin: 3px auto 1px !important;
    }

    .sheet-header {
        padding: 3px 14px 4px !important;
    }

    .sheet-title {
        font-size: 14px !important;
    }

    .sheet-no-badge {
        font-size: 11.5px !important;
        padding: 2px 6px !important;
    }

    .sheet-close-btn {
        padding: 2px 8px !important;
        font-size: 18px !important;
    }

    /* ボディ: 左右2大カラムグリッド */
    .sheet-body {
        padding: 4px 14px 2px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 16px !important;
        row-gap: 4px !important;
        overflow-y: auto !important;
        align-content: start !important;
        flex: 1 1 auto !important;
    }

    .sheet-field-group {
        gap: 1px !important;
    }

    .sheet-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-bottom: 1.5px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .sheet-grid-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .sheet-input,
    .sheet-select {
        height: 29px !important;
        font-size: 13px !important;
        padding: 2px 7px !important;
        border-radius: 4px !important;
        min-width: 0 !important;
    }

    .sheet-name-input {
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }

    /* 左列: 商品名(1) ➡ 分類・メーカー(2) ➡ 店舗・ジャンル(3) ➡ 特記メモ(4) */
    .sheet-field-prod {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }
    .sheet-field-gen-maker {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
    }
    .sheet-field-shop-genre {
        grid-column: 1 / 2 !important;
        grid-row: 3 !important;
    }
    .sheet-field-memo {
        grid-column: 1 / 2 !important;
        grid-row: 4 !important;
    }

    /* 右列: 内容量・単位(1) ➡ 税込・税抜/税率(2) ➡ 換算単価・記録日サマリー(3) */
    .sheet-field-qty-unit {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
    }
    .sheet-field-price {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
    }
    .sheet-field-meta {
        grid-column: 2 / 3 !important;
        grid-row: 3 / 5 !important;
        padding: 6px 10px !important;
        font-size: 11.5px !important;
        border-radius: 4px !important;
        margin-top: 2px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* フッターアクションバー: 更新ボタンと削除ボタンを右列側だけで完結（左側は空白） */
    .sheet-footer {
        padding: 4px 14px 6px !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .sheet-btn {
        height: 29px !important;
        font-size: 12.5px !important;
        padding: 0 10px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }

    .sheet-footer .sheet-btn-update {
        margin-left: auto !important;
        width: calc((100% - 16px) / 2 * 0.66) !important;
        max-width: 250px !important;
        flex: 0 0 auto !important;
    }

    .sheet-footer .sheet-btn-delete {
        width: calc((100% - 16px) / 2 * 0.34 - 8px) !important;
        max-width: 120px !important;
        flex: 0 0 auto !important;
    }
}

/* デスクトップ通常時のベーススタイル */
.mobile-title-tip {
    display: none;
}

/* 強制スマホモード時のツールチップ */
body.force-mobile-mode .app-title-group {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    width: 100% !important;
    row-gap: 2px !important;
    column-gap: 8px !important;
    position: relative !important;
}

/* 左列 (Column 1): ざいのーと アイコン (上) ＆ [アプリ名] (下) */
body.force-mobile-mode .app-title {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    justify-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

body.force-mobile-mode .app-title a {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    color: inherit !important;
    text-decoration: none !important;
}

body.force-mobile-mode .app-title-main,
body.force-mobile-mode .app-title-tag {
    font-size: 17px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    display: block !important;
}

/* スマホモード（縦・横）: tipは完全非表示 */
body.force-mobile-mode .mobile-title-tip,
body.force-mobile-mode .mobile-title-tip.active {
    display: none !important;
}
body.force-mobile-mode .tab-button.management-help-anchor.help-visible::after {
    display: none !important;
}
[data-tooltip]::before,
[data-tooltip]::after {
    display: none !important;
}

/* 中央列 (Column 2): 補足文 (上下2行エリア) */
body.force-mobile-mode .app-subtitle {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 3 !important;
    justify-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    line-height: 1.25 !important;
}

body.force-mobile-mode .subtitle-line1,
body.force-mobile-mode .subtitle-line2 {
    font-size: 11px !important;
    opacity: 0.85 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    display: block !important;
}

/* 右列 (Column 3): 1行目: 契約アイコン（プランバッジ） */
body.force-mobile-mode #zainotePlanBadge,
body.force-mobile-mode .zainote-plan-badge {
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
}

/* 右列 (Column 3): 2行目: 画面モード切替ボタン */
body.force-mobile-mode #zainoteModeToggleBtn,
body.force-mobile-mode .zainote-mode-toggle-btn {
    grid-column: 3 / 4 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    margin: 0 !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
}



/* ==========================================================================
   スマホ横画面（Landscape）ヘッダー配置:
   5ボタン（.header-links）を「説明文」と「アイコン」の間に右寄せで割り込み配置
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 600px) {
    .app-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        padding: 4px 8px !important;
        column-gap: 6px !important;
        row-gap: 2px !important;
        white-space: nowrap !important;
    }

    .app-title-group {
        display: contents !important;
    }

    /* 1. 左列: タイトル (ざいのーと アイコン / [アプリ名]) */
    .app-title {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        justify-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 1px !important;
        margin: 0 !important;
        line-height: 1.15 !important;
        flex-shrink: 0 !important;
    }

    .app-title-main,
    .app-title-tag {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        color: #ffffff !important;
        display: block !important;
    }

    /* 2. 中央-左: 補足説明文 (上下2行エリア - 画面幅が狭い時は柔軟に縮小しプロジェクトボタンを保護) */
    .app-subtitle {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 3 !important;
        justify-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 1px !important;
        margin: 0 !important;
        min-width: 0 !important;
        max-width: 140px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
    }

    .subtitle-line1,
    .subtitle-line2 {
        font-size: 10px !important;
        opacity: 0.85 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    /* 3. 中央-右: 5ボタン（最優先配置・絶対に追い出されないよう縮小・非表示ガード） */
    .header-links {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 0 !important;
        margin-left: auto !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        min-width: max-content !important;
    }

    .header-links a,
    .header-links .current-app {
        font-size: 10px !important;
        padding: 2.5px 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
    }

    /* 4. 最右列: 契約アイコン & 画面切替ボタン */
    #zainotePlanBadge,
    .zainote-plan-badge {
        grid-column: 4 / 5 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        margin: 0 !important;
        font-size: 10px !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    #zainoteModeToggleBtn,
    .zainote-mode-toggle-btn {
        grid-column: 4 / 5 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        margin: 0 !important;
        font-size: 9.5px !important;
        padding: 2px 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* PC等の横長画面でスマホモード（force-mobile-mode）にした場合の完全対応 */
@media screen and (orientation: landscape) {
    body.force-mobile-mode:not(.force-pc-mode) .app-header,
    html.force-mobile-mode:not(.force-pc-mode) .app-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        padding: 4px 8px !important;
        column-gap: 6px !important;
        row-gap: 2px !important;
        white-space: nowrap !important;
        flex-direction: row !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .app-title-group,
    html.force-mobile-mode:not(.force-pc-mode) .app-title-group {
        display: contents !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .app-title,
    html.force-mobile-mode:not(.force-pc-mode) .app-title {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        justify-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 1px !important;
        margin: 0 !important;
        line-height: 1.15 !important;
        flex-shrink: 0 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .app-title-main,
    body.force-mobile-mode:not(.force-pc-mode) .app-title-tag,
    html.force-mobile-mode:not(.force-pc-mode) .app-title-main,
    html.force-mobile-mode:not(.force-pc-mode) .app-title-tag {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        color: #ffffff !important;
        display: block !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .app-subtitle,
    html.force-mobile-mode:not(.force-pc-mode) .app-subtitle {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 3 !important;
        justify-self: start !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 1px !important;
        margin: 0 !important;
        min-width: 0 !important;
        max-width: 140px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .subtitle-line1,
    body.force-mobile-mode:not(.force-pc-mode) .subtitle-line2,
    html.force-mobile-mode:not(.force-pc-mode) .subtitle-line1,
    html.force-mobile-mode:not(.force-pc-mode) .subtitle-line2 {
        font-size: 10px !important;
        opacity: 0.85 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .header-links,
    html.force-mobile-mode:not(.force-pc-mode) .header-links {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        align-items: center !important;
        gap: 3px !important;
        margin: 0 !important;
        margin-left: auto !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        min-width: max-content !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .header-links a,
    body.force-mobile-mode:not(.force-pc-mode) .header-links .current-app,
    html.force-mobile-mode:not(.force-pc-mode) .header-links a,
    html.force-mobile-mode:not(.force-pc-mode) .header-links .current-app {
        font-size: 10px !important;
        padding: 2.5px 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) #zainotePlanBadge,
    body.force-mobile-mode:not(.force-pc-mode) .zainote-plan-badge,
    html.force-mobile-mode:not(.force-pc-mode) #zainotePlanBadge,
    html.force-mobile-mode:not(.force-pc-mode) .zainote-plan-badge {
        grid-column: 4 / 5 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        margin: 0 !important;
        font-size: 10px !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) #zainoteModeToggleBtn,
    body.force-mobile-mode:not(.force-pc-mode) .zainote-mode-toggle-btn,
    html.force-mobile-mode:not(.force-pc-mode) #zainoteModeToggleBtn,
    html.force-mobile-mode:not(.force-pc-mode) .zainote-mode-toggle-btn {
        grid-column: 4 / 5 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        margin: 0 !important;
        font-size: 9.5px !important;
        padding: 2px 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}




/* ==========================================================================
   スマホ横画面（Landscape）データ管理タブ＆ソートエリア:
   - アクションバー: 1行集約配置・20列
   - データ管理タブ: 1行3ボタン横並び（左タイトル108px + 右3ボタン）
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 600px),
       screen and (max-width: 1024px) and (orientation: landscape) {

    /* グローバルアクションバー（スマホ横画面: 1行集約配置・上ラベル化・不要ボタン非表示: zaiko / price / recipe 踏襲） */
    .action-bar-container,
    .global-action-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 4px 10px !important;
        margin-top: 1px !important;
        margin-bottom: 2px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        height: auto !important;
        min-height: 52px !important;
    }

    /* 一括保存ボタン・ソートボタンを完全非表示 */
    #saveAllButton,
    #sortExecuteButton,
    .save-group-label,
    .action-group.save-action-group,
    .sort-execute-button {
        display: none !important;
    }

    /* 共通上ラベル（recipe同様に高さを確保し縮小・切断を完全防止） */
    .action-bar-item-label,
    .sort-group-label,
    .color-priority-label {
        display: block !important;
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        line-height: 16px !important;
        font-size: 12.5px !important;
        color: #475569 !important;
        font-weight: 500 !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
    }

    .action-bar-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
    }

    .action-bar-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 12px !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        height: auto !important;
    }

    .action-bar-left .filter-input-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    /* .action-bar-left .filter-input-group label displayed via .action-bar-item-label */

    .action-bar-left .filter-input-group:has(#genreFilter),
    .action-bar-left .filter-input-group:has(#shopFilter),
    .action-bar-left .filter-input-group:has(#searchInput) {
        display: none !important;
    }

    .action-bar-left .filter-input-group:has(#statusFilterSelect) select,
    #statusFilterSelect {
        width: auto !important;
        min-width: 125px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 11.5px !important;
        padding: 1px 4px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    .action-bar-left .filter-input-group:has(#sortSelect) select,
    #sortSelect {
        width: auto !important;
        min-width: 155px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 11.5px !important;
        padding: 1px 4px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    /* 文字色ブロック（上ラベル + 下ボタン: recipe準拠で絶対につぶれない設計） */
    .color-priority-control {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        flex: 0 0 auto !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
    }

    .color-priority-buttons {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        height: 30px !important;
        flex: 0 0 auto !important;
    }

    .color-priority-buttons button,
    .color-priority-control button {
        box-sizing: border-box !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        padding: 0 8px !important;
        border: 1px solid #aebdca !important;
        border-radius: 4px !important;
        background: #f5f8fa !important;
        color: #263746 !important;
        font-size: 12px !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: background-color 0.15s, border-color 0.15s;
    }

    .color-priority-buttons button.active,
    .color-priority-control button.active {
        background-color: #54456b !important;
        color: #ffffff !important;
        border-color: #423557 !important;
    }

    .meta-info-control {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #lastSavedTime,
    .save-time-display {
        font-size: 11px !important;
        color: #433559 !important;
        height: 30px !important;
        line-height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* データ管理タブ（1行3ボタン横並び: 左タイトル108px + 右3ボタン） */
    .management-tab-content {
        width: 100% !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    .management-group {
        display: grid !important;
        grid-template-columns: 94px repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        margin-bottom: 3px !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .management-group:last-child {
        margin-bottom: 1px !important;
    }

    #tab-manage {
        padding-bottom: 1px !important;
    }

    body:not(.force-pc-mode) .management-group-title,
    .management-group-title {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        width: 94px !important;
        min-width: 94px !important;
        max-width: 94px !important;
        height: 36px !important;
        border-right: 2px solid #d5cee0 !important;
        border-bottom: none !important;
        padding: 2px 6px !important;
        margin: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
            justify-content: flex-start !important;
        text-align: left !important;
        display: inline-flex !important;
        align-items: center !important;
}
}


/* ==========================================================================
   スマホ全モード共通（縦・横・強制スマホ）:
   - タブ余白削減 (padding: 4px 8px 3px)
   - ドロップダウン・テキストボックス・日付: 上下サイズ30pxに圧縮
   - 価格登録フォームのサイズばらつき完全解消（ラベル高さを16px固定、換算単価・税率ボタン枠・追加ボタンを完全統一）
   - データ管理タブボタン: 30px統一
   - ソートエリア: 30px統一
   ========================================================================== */
@media (max-width: 768px), (max-height: 600px) and (orientation: landscape), (orientation: portrait) and (max-width: 768px) {
    #tab-search,
    #tab-add,
    #tab-manage,
    .tab-content-panel {
        padding: 4px 8px 3px !important;
        margin-bottom: 4px !important;
        min-height: 0 !important;
    }

    .search-tab-content .form-item label {
        font-size: 10.5px !important;
        margin-bottom: 1px !important;
    }

    #tabGenreFilter,
    #tabShopFilter,
    #tabSearchInput,
    #tabSearchButton,
    #tabClearFilterButton,
    #tabFilterStatus {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 11.5px !important;
        line-height: 28px !important;
        box-sizing: border-box !important;
    }

    /* データ管理タブ: ボタン上下サイズを30pxに統一 */
    .management-tab-content .custom-button,
    .management-group .custom-button,
    .management-group a,
    .management-group button,
    .management-group label {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 12px !important;
        padding: 2px 4px !important;
        box-sizing: border-box !important;
        border-radius: 5px !important;
        line-height: 1.2 !important;
    }

    /* ソートエリア: 上下サイズを30pxに統一 */
    .action-bar-left .filter-input-group:has(#sortSelect) select,
    .action-bar-left .filter-input-group:has(#sortSelect) .sort-execute-button,
    .action-bar-left .filter-input-group:has(#periodFilter) select,
    .action-bar-left .filter-input-group:has(#displayModeSelect) select,
    .action-bar-container #saveAllButton,
    #saveAllButton,
    #periodFilter,
    #displayModeSelect,
    #sortSelect,
    #sortExecuteButton {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        box-sizing: border-box !important;
    }

    /* タブ内: ドロップダウン・テキストボックスの上下サイズを30pxに圧縮（上下余白・パディングを削減） */
    .tab-content-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .tab-content-panel select,
    #tab-search input,
    #tab-search select,
    #tab-add input,
    #tab-add select,
    #addPriceForm input,
    #addPriceForm select,
    #itemDate,
    #itemShop,
    #itemGenre,
    #itemGenericName,
    #itemMaker,
    #itemProductName,
    #itemQuantity,
    #itemUnit,
    #itemTaxRate,
    #itemPriceEx,
    #itemPriceIn,
    #itemMemo {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
    }

    /* 換算単価表示枠のサイズを完全一致（30px） */
    #calcUnitPriceDisplay {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        font-size: 12px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 5px !important;
    }

    /* 税率プリセットボタン枠 */
    .form-item:has(#itemTaxRate) > div {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        box-sizing: border-box !important;
    }

    .tax-preset-btn {
        font-size: 10px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* タブ内ボタンの高さも30pxで揃える */
    #addPriceSubmitBtn,
    #tabSearchButton,
    #tabClearFilterButton {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        box-sizing: border-box !important;
    }

    /* 価格登録フォームの全ラベル高さを16px固定にして要素間の上下ずれ・ばらつきを解消 */
    #addPriceForm label,
    .add-form-container label,
    .form-item label {
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        line-height: 16px !important;
        font-size: 11px !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    #addPriceForm label strong,
    .form-item label strong {
        font-size: 11px !important;
        line-height: 16px !important;
    }
}

/* 強制スマホモード（PCでの検証用）にも同一ルールを適用 */
body.force-mobile-mode #tab-search,
body.force-mobile-mode #tab-add,
body.force-mobile-mode #tab-manage,
body.force-mobile-mode .tab-content-panel {
    padding: 4px 8px 3px !important;
    margin-bottom: 4px !important;
    min-height: 0 !important;
}

body.force-mobile-mode #tabGenreFilter,
body.force-mobile-mode #tabShopFilter,
body.force-mobile-mode #tabSearchInput,
body.force-mobile-mode #tabSearchButton,
body.force-mobile-mode #tabClearFilterButton,
body.force-mobile-mode #tabFilterStatus,
body.force-mobile-mode .management-tab-content .custom-button,
body.force-mobile-mode .management-group .custom-button,
body.force-mobile-mode .management-group a,
body.force-mobile-mode .management-group button,
body.force-mobile-mode .management-group label,
body.force-mobile-mode .action-bar-left .filter-input-group:has(#sortSelect) select,
body.force-mobile-mode .action-bar-left .filter-input-group:has(#sortSelect) .sort-execute-button,
body.force-mobile-mode #saveAllButton,
body.force-mobile-mode #periodFilter,
body.force-mobile-mode #displayModeSelect,
body.force-mobile-mode #sortSelect,
body.force-mobile-mode #sortExecuteButton,
body.force-mobile-mode .tab-content-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.force-mobile-mode .tab-content-panel select,
body.force-mobile-mode #calcUnitPriceDisplay,
body.force-mobile-mode #addPriceSubmitBtn {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    box-sizing: border-box !important;
}

body.force-mobile-mode #addPriceForm label,
body.force-mobile-mode .form-item label {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    line-height: 16px !important;
    font-size: 11px !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}



/* ==========================================================================
   PCでの強制スマホモード（横長モニタ環境）:
   画面解像度（max-width/max-height）に縛られず、横長時は確実に横モードレイアウトを適用
   ========================================================================== */
@media screen and (orientation: landscape) {
    /* 1. メイン表横スクロール */
    body.force-mobile-mode:not(.force-pc-mode) .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        scrollbar-width: thin !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .table-container::-webkit-scrollbar {
        display: block !important;
        height: 6px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .table-container::-webkit-scrollbar-thumb {
        background: #c9b27a !important;
        border-radius: 3px !important;
    }

    /* 2. グローバルアクションバー（スマホ横画面: recipe完全準拠・底揃え・上ラベル潰れ完全防止） */
    body.force-mobile-mode:not(.force-pc-mode) .action-bar-container,
    body.force-mobile-mode:not(.force-pc-mode) .global-action-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 4px 10px !important;
        margin-top: 1px !important;
        margin-bottom: 2px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        height: auto !important;
        min-height: 52px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .action-bar-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 12px !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        height: auto !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    /* body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group label displayed */

    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#genreFilter),
    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#shopFilter),
    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#searchInput) {
        display: none !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#periodFilter) select {
        width: auto !important;
        max-width: 90px !important;
        height: 30px !important;
        font-size: 11.5px !important;
        padding: 1px 3px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#displayModeSelect) select {
        width: auto !important;
        max-width: 116px !important;
        min-width: 0 !important;
        height: 30px !important;
        font-size: 11.5px !important;
        padding: 1px 3px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#sortSelect) {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#sortSelect) select {
        width: auto !important;
        max-width: 155px !important;
        min-width: 0 !important;
        height: 30px !important;
        font-size: 11.5px !important;
        padding: 1px 3px !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#sortSelect) .sort-execute-button,
    body.force-mobile-mode:not(.force-pc-mode) #saveAllButton {
        display: none !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .meta-info-control {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) #lastSavedTime {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        color: #433559 !important;
        white-space: nowrap !important;
        height: 30px !important;
        line-height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .color-priority-control {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        flex: 0 0 auto !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .color-priority-label {
        display: block !important;
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        line-height: 16px !important;
        font-size: 12.5px !important;
        color: #475569 !important;
        font-weight: 500 !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .color-priority-buttons {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        height: 30px !important;
        flex: 0 0 auto !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .color-priority-buttons button,
    body.force-mobile-mode:not(.force-pc-mode) .color-priority-control button {
        box-sizing: border-box !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        line-height: 28px !important;
        padding: 0 8px !important;
        border: 1px solid #aebdca !important;
        border-radius: 4px !important;
        background: #f5f8fa !important;
        color: #263746 !important;
        font-size: 12px !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .color-priority-buttons button.active,
    body.force-mobile-mode:not(.force-pc-mode) .color-priority-control button.active {
        background-color: #54456b !important;
        color: #ffffff !important;
        border-color: #423557 !important;
    }


    /* 3. データ管理タブ（1行3ボタン横並び: 左タイトル108px + 右3ボタン） */
    body.force-mobile-mode:not(.force-pc-mode) .management-tab-content {
        width: 100% !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .management-group {
        display: grid !important;
        grid-template-columns: 94px repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        margin-bottom: 3px !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .management-group:last-child {
        margin-bottom: 1px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) #tab-manage {
        padding-bottom: 1px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) body:not(.force-pc-mode) .management-group-title,
 .management-group-title {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        width: 94px !important;
        min-width: 94px !important;
        max-width: 94px !important;
        height: 36px !important;
        border-right: 2px solid #d5cee0 !important;
        border-bottom: none !important;
        padding: 2px 6px !important;
        margin: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
            justify-content: flex-start !important;
        text-align: left !important;
        display: inline-flex !important;
        align-items: center !important;
}

    /* 4. モバイル詳細シート（横画面最適化: 左右2大カラムグリッド） */
    body.force-mobile-mode:not(.force-pc-mode) .mobile-detail-sheet {
        width: 96vw !important;
        max-width: 920px !important;
        max-height: 98vh !important;
        border-radius: 12px 12px 0 0 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-drag-handle {
        width: 36px !important;
        height: 3px !important;
        margin: 3px auto 1px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-header {
        padding: 3px 14px 4px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-title {
        font-size: 14px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-no-badge {
        font-size: 11.5px !important;
        padding: 2px 6px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-close-btn {
        padding: 2px 8px !important;
        font-size: 18px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-body {
        padding: 4px 14px 2px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 16px !important;
        row-gap: 4px !important;
        overflow-y: auto !important;
        align-content: start !important;
        flex: 1 1 auto !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-field-group {
        gap: 1px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-bottom: 1.5px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-grid-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-input,
    body.force-mobile-mode:not(.force-pc-mode) .sheet-select {
        height: 29px !important;
        font-size: 12px !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-name-input {
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-field-prod {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) .sheet-field-gen-maker {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) .sheet-field-shop-genre {
        grid-column: 1 / 2 !important;
        grid-row: 3 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) .sheet-field-memo {
        grid-column: 2 / 3 !important;
        grid-row: 3 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-field-qty-unit {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) .sheet-field-price {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) .sheet-field-meta {
        grid-column: 2 / 3 !important;
        grid-row: 3 / 5 !important;
        padding: 6px 10px !important;
        font-size: 11.5px !important;
        border-radius: 4px !important;
        margin-top: 2px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-footer {
        padding: 4px 14px 6px !important;
        gap: 6px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) .sheet-btn {
        height: 31px !important;
        font-size: 12.5px !important;
        padding: 0 10px !important;
        border-radius: 4px !important;
    }
}

/* 記録日列の飛び出し防止・左右均等の隙間（モード共通） */

.price-table input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
}





/* スマホ横画面モード時：No列の数字をクリッカブルとしてアンダーライン表示 */
#priceTable tbody tr td:first-child,
#priceTable tbody tr td:first-child .no-text,
#priceTable tbody tr td:first-child .no-cell-content,
body.force-mobile-mode #priceTable tbody td:first-child,
body.force-mobile-mode #priceTable tbody td:first-child .no-text,
body.force-mobile-mode #priceTable tbody td:first-child .no-cell-content,
body:not(.force-pc-mode) #priceTable tbody td:first-child,
body:not(.force-pc-mode) #priceTable tbody td:first-child .no-text,
body:not(.force-pc-mode) #priceTable tbody td:first-child .no-cell-content {
    cursor: pointer !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    border-bottom: 1px solid #ccc !important;
}

#priceTable tbody tr td:first-child:hover,
#priceTable tbody tr td:first-child:hover .no-text {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    text-decoration: underline !important;
}

#priceTable tbody tr td:first-child:active {
    background-color: #fde68a !important;
}


/* ==========================================================================
   財布管理 (wallet) 専用: スマホ横画面 (Landscape) ＆ 強制スマホ横モード最適化
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 600px),
       screen and (max-width: 1024px) and (orientation: landscape) {
    /* 1. カードの登録タブ: 20列グリッド・2行構成 */
    #addWalletForm,
    .add-form-container {
        display: grid !important;
        grid-template-columns: repeat(20, minmax(0, 1fr)) !important;
        gap: 4px 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: end !important;
    }

    #addWalletForm .form-row,
    .add-form-container .form-row {
        display: contents !important;
    }

    #addWalletForm .form-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 1px !important;
    }

    #addWalletForm input,
    #addWalletForm select {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 12px !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }

    /* 1行目: テンプレ(5) + 保管場所(4) + 分類(4) + カード名(5) + 下4桁(2) = 20列 */
    #addWalletForm .form-item:has(#itemPresetSelect) {
        grid-column: 1 / 6 !important;
        grid-row: 1 !important;
    }
    #addWalletForm .form-item:has(#itemLocation) {
        grid-column: 6 / 10 !important;
        grid-row: 1 !important;
    }
    #addWalletForm .form-item:has(#itemCategory) {
        grid-column: 10 / 14 !important;
        grid-row: 1 !important;
    }
    #addWalletForm .form-item:has(#itemName) {
        grid-column: 14 / 19 !important;
        grid-row: 1 !important;
    }
    #addWalletForm .form-item:has(#itemLast4) {
        grid-column: 19 / 21 !important;
        grid-row: 1 !important;
    }

    /* 2行目: 有効期限(3) + 緊急連絡先(4) + 公式URL(4) + 状態(3) + メモ(4) + 追加ボタン(2) = 20列 */
    #addWalletForm .form-item:has(#itemExpiry) {
        grid-column: 1 / 4 !important;
        grid-row: 2 !important;
    }
    #addWalletForm .form-item:has(#itemTel) {
        grid-column: 4 / 8 !important;
        grid-row: 2 !important;
    }
    #addWalletForm .form-item:has(#itemUrl) {
        grid-column: 8 / 12 !important;
        grid-row: 2 !important;
    }
    #addWalletForm .form-item:has(#itemStatus) {
        grid-column: 12 / 15 !important;
        grid-row: 2 !important;
    }
    #addWalletForm .form-item:has(#itemMemo) {
        grid-column: 15 / 19 !important;
        grid-row: 2 !important;
    }
    #addWalletSubmitBtn {
        grid-column: 19 / 21 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 0 4px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        align-self: end !important;
        justify-content: center !important;
    }

    /* 2. 検索タブ: 独自の表示（期限警告・安全設計・緊急ボタン）を完全維持したスリム2行レイアウト */
    #tab-search,
    body:not(.force-pc-mode) #tab-search {
        padding: 4px 8px !important;
        margin: 0 0 3px 0 !important;
        box-sizing: border-box !important;
    }
    #tab-search .search-tab-content,
    body:not(.force-pc-mode) #tab-search .search-tab-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #tab-search .search-tab-content .form-row,
    body:not(.force-pc-mode) #tab-search .search-tab-content .form-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #tab-search .search-tab-content .form-row .form-item,
    body:not(.force-pc-mode) #tab-search .search-tab-content .form-row .form-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* ラベル表示を完全維持 */
    #tab-search label,
    body:not(.force-pc-mode) #tab-search label {
        display: inline !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        margin: 0 !important;
        color: #312740 !important;
    }
    #tabLocationFilter,
    #tabCategoryFilter,
    #tabSearchInput,
    body:not(.force-pc-mode) #tabLocationFilter,
    body:not(.force-pc-mode) #tabCategoryFilter,
    body:not(.force-pc-mode) #tabSearchInput {
        height: 28px !important;
        min-height: 28px !important;
        font-size: 11.5px !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    #tabLocationFilter { width: 115px !important; }
    #tabCategoryFilter { width: 115px !important; }
    #tabSearchInput { width: 140px !important; flex: 1 1 auto !important; }

    #tab-search #tabSearchButton,
    #tab-search #tabExpiringButton,
    #tab-search #tabClearFilterButton,
    body:not(.force-pc-mode) #tab-search #tabSearchButton,
    body:not(.force-pc-mode) #tab-search #tabExpiringButton,
    body:not(.force-pc-mode) #tab-search #tabClearFilterButton {
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 28px !important;
        min-height: 28px !important;
        font-size: 11px !important;
        padding: 0 6px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }
    #tab-search #tabFilterStatus,
    body:not(.force-pc-mode) #tab-search #tabFilterStatus {
        display: inline-block !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        color: #64748b !important;
    }

    /* 独自表示: 期限警告設定 ＆ 🔒安全設計 ＆ 🚨緊急ボタンを横画面でも完全表示 */
    #tab-search .residual-warning-row,
    body:not(.force-pc-mode) #tab-search .residual-warning-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 1px 0 !important;
        box-sizing: border-box !important;
    }
    #tab-search .residual-warning-controls,
    body:not(.force-pc-mode) #tab-search .residual-warning-controls {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
    #tab-search .residual-warning-controls input[type="number"],
    body:not(.force-pc-mode) #tab-search .residual-warning-controls input[type="number"] {
        width: 40px !important;
        height: 24px !important;
        font-size: 11px !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
    }
    #tab-search .wallet-security-note,
    body:not(.force-pc-mode) #tab-search .wallet-security-note {
        display: inline !important;
        font-size: 10.5px !important;
        color: #6b5b7b !important;
        white-space: nowrap !important;
        opacity: 0.9 !important;
    }
    #tab-search #openEmergencyModalBtn,
    body:not(.force-pc-mode) #tab-search #openEmergencyModalBtn {
        height: 25px !important;
        font-size: 10.5px !important;
        padding: 0 8px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    /* メイン表コンテナ（表示領域を広げ、横スクロールを保証） */
    .table-container,
    body:not(.force-pc-mode) .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        scrollbar-width: thin !important;
    }
}

/* PC等での強制スマホモード（横長画面時）にも同一の20列2行レイアウトを適用 */
@media screen and (orientation: landscape) {
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm,
    body.force-mobile-mode:not(.force-pc-mode) .add-form-container {
        display: grid !important;
        grid-template-columns: repeat(20, minmax(0, 1fr)) !important;
        gap: 4px 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: end !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-row {
        display: contents !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        gap: 1px !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm input,
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm select {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: 12px !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemPresetSelect) {
        grid-column: 1 / 6 !important;
        grid-row: 1 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemLocation) {
        grid-column: 6 / 10 !important;
        grid-row: 1 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemCategory) {
        grid-column: 10 / 14 !important;
        grid-row: 1 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemName) {
        grid-column: 14 / 19 !important;
        grid-row: 1 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemLast4) {
        grid-column: 19 / 21 !important;
        grid-row: 1 !important;
    }

    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemExpiry) {
        grid-column: 1 / 4 !important;
        grid-row: 2 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemTel) {
        grid-column: 4 / 8 !important;
        grid-row: 2 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemUrl) {
        grid-column: 8 / 12 !important;
        grid-row: 2 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemStatus) {
        grid-column: 12 / 15 !important;
        grid-row: 2 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #addWalletForm .form-item:has(#itemMemo) {
        grid-column: 15 / 19 !important;
        grid-row: 2 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #addWalletSubmitBtn {
        grid-column: 19 / 21 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 0 4px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        align-self: end !important;
        justify-content: center !important;
    }

    /* 検索タブ: 独自の表示（期限警告・安全設計・緊急ボタン）を完全維持したスリム2行レイアウト */
    body.force-mobile-mode:not(.force-pc-mode) #tab-search {
        padding: 4px 8px !important;
        margin: 0 0 3px 0 !important;
        box-sizing: border-box !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search .search-tab-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search .search-tab-content .form-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search .search-tab-content .form-row .form-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search label {
        display: inline !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        margin: 0 !important;
        color: #312740 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tabLocationFilter,
    body.force-mobile-mode:not(.force-pc-mode) #tabCategoryFilter,
    body.force-mobile-mode:not(.force-pc-mode) #tabSearchInput {
        height: 28px !important;
        min-height: 28px !important;
        font-size: 11.5px !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tabLocationFilter { width: 115px !important; }
    body.force-mobile-mode:not(.force-pc-mode) #tabCategoryFilter { width: 115px !important; }
    body.force-mobile-mode:not(.force-pc-mode) #tabSearchInput { width: 140px !important; flex: 1 1 auto !important; }

    body.force-mobile-mode:not(.force-pc-mode) #tab-search #tabSearchButton,
    body.force-mobile-mode:not(.force-pc-mode) #tab-search #tabExpiringButton,
    body.force-mobile-mode:not(.force-pc-mode) #tab-search #tabClearFilterButton {
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 28px !important;
        min-height: 28px !important;
        font-size: 11px !important;
        padding: 0 6px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search #tabFilterStatus {
        display: inline-block !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        color: #64748b !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search .residual-warning-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 1px 0 !important;
        box-sizing: border-box !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search .residual-warning-controls {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search .residual-warning-controls input[type="number"] {
        width: 40px !important;
        height: 24px !important;
        font-size: 11px !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search .wallet-security-note {
        display: inline !important;
        font-size: 10.5px !important;
        color: #6b5b7b !important;
        white-space: nowrap !important;
        opacity: 0.9 !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) #tab-search #openEmergencyModalBtn {
        height: 25px !important;
        font-size: 10.5px !important;
        padding: 0 8px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    /* 常時表示アクションバーの statusFilterSelect 対応 */
    body.force-mobile-mode:not(.force-pc-mode) .action-bar-left .filter-input-group:has(#statusFilterSelect) select {
        width: auto !important;
        max-width: 125px !important;
        min-width: 0 !important;
        height: 30px !important;
        font-size: 11.5px !important;
        padding: 1px 4px !important;
    }
}

/* ==========================================================================
   スマホ横画面（Landscape）ではアイコンを通常表示に復元し、元のボタン幅・高さを維持
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 600px) {
    .header-links .nav-icon {
        display: inline !important;
    }
    .header-links {
        width: auto !important;
        justify-content: flex-end !important;
    }
    .header-links a,
    .header-links .current-app {
        flex: 0 0 auto !important;
    }
}

@media screen and (orientation: landscape) {
    body.force-mobile-mode:not(.force-pc-mode) .header-links .nav-icon,
    html.force-mobile-mode:not(.force-pc-mode) .header-links .nav-icon {
        display: inline !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) .header-links,
    html.force-mobile-mode:not(.force-pc-mode) .header-links {
        width: auto !important;
        justify-content: flex-end !important;
    }
    body.force-mobile-mode:not(.force-pc-mode) .header-links a,
    body.force-mobile-mode:not(.force-pc-mode) .header-links .current-app,
    html.force-mobile-mode:not(.force-pc-mode) .header-links a,
    html.force-mobile-mode:not(.force-pc-mode) .header-links .current-app {
        flex: 0 0 auto !important;
    }
}

/* ==========================================================================
   財布管理 (wallet) 専用: レコード詳細・直接編集ボトムシート (スマホ横画面・左右2大カラム均等配置)
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 600px),
       screen and (min-width: 600px) and (max-height: 600px) {
    .mobile-detail-sheet {
        width: 96vw !important;
        max-width: 940px !important;
        max-height: 98vh !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .sheet-drag-handle {
        width: 36px !important;
        height: 3px !important;
        margin: 2px auto 1px !important;
    }

    .sheet-header {
        padding: 2px 14px 3px !important;
    }

    .sheet-title {
        font-size: 14px !important;
    }

    .sheet-no-badge {
        font-size: 11.5px !important;
        padding: 2px 6px !important;
    }

    .sheet-close-btn {
        padding: 2px 8px !important;
        font-size: 18px !important;
    }

    /* 左右2大カラム構成（均等2分割・すっきり3行整列） */
    .sheet-body {
        padding: 3px 14px 4px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 16px !important;
        row-gap: 4px !important;
        overflow-y: auto !important;
        align-content: start !important;
        flex: 1 1 auto !important;
    }

    .sheet-field-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
    }

    .sheet-grid-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .sheet-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        margin-bottom: 1.5px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .sheet-input,
    .sheet-select {
        height: 29px !important;
        font-size: 13px !important;
        padding: 2px 7px !important;
        border-radius: 4px !important;
        min-width: 0 !important;
    }

    .sheet-name-input {
        font-size: 13.5px !important;
        font-weight: 700 !important;
    }

    /* 
       【全3行の完全2カラム構成（メモを右列3行目に移動し、下の余白1行を完全削減）】
       
       左列 (Column 1):
       1行目: カード・機関名 (.sheet-field-prod)
       2行目: 公式紛失・盗難案内URL (.sheet-field-gen-maker)
       3行目: 保管場所 & 分類 (.sheet-field-shop-genre)
       
       右列 (Column 2):
       1行目: 番号下4桁 & 有効期限 (.sheet-field-qty-unit)
       2行目: 緊急連絡先(電話) & カード状態 (.sheet-field-price)
       3行目: メモ・備考 (.sheet-field-memo)
    */
    .sheet-field-prod {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }
    .sheet-field-gen-maker {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
    }
    .sheet-field-shop-genre {
        grid-column: 1 / 2 !important;
        grid-row: 3 !important;
    }

    .sheet-field-qty-unit {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
    }
    .sheet-field-price {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
    }
    .sheet-field-memo {
        grid-column: 2 / 3 !important;
        grid-row: 3 !important;
    }

    .wallet-tel-link,
    .wallet-url-link {
        height: 26px !important;
        padding: 0 8px !important;
        font-size: 11.5px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .sheet-footer {
        padding: 3px 14px 4px !important;
        gap: 6px !important;
    }

    .sheet-btn {
        height: 31px !important;
        font-size: 12.5px !important;
        padding: 0 10px !important;
        border-radius: 4px !important;
    }

    .sheet-btn-update {
        background: #7c3aed !important;
    }
}

/* 財布管理用: 横画面モード時の3行×2列強制適用 */
body.force-mobile-mode .sheet-body,
@media screen and (orientation: landscape) {
    .sheet-body {
        grid-template-columns: 1fr 1fr !important;
    }
    .sheet-field-prod { grid-column: 1 / 2 !important; grid-row: 1 !important; }
    .sheet-field-gen-maker { grid-column: 1 / 2 !important; grid-row: 2 !important; }
    .sheet-field-shop-genre { grid-column: 1 / 2 !important; grid-row: 3 !important; }
    .sheet-field-qty-unit { grid-column: 2 / 3 !important; grid-row: 1 !important; }
    .sheet-field-price { grid-column: 2 / 3 !important; grid-row: 2 !important; }
    .sheet-field-memo { grid-column: 2 / 3 !important; grid-row: 3 !important; }
}

/* スマホ横画面: 枠線・矢印・背景を削ってテキスト化 ＆ 入力禁止（スクロール誤タップ防止: zaiko / price踏襲） */
@media screen and (orientation: landscape) and (max-height: 600px),
       screen and (max-width: 768px) and (orientation: landscape) {
    body:not(.force-pc-mode) #priceTable tbody td input,
    body:not(.force-pc-mode) #priceTable tbody td select,
    body:not(.force-pc-mode) #priceTable tbody td .table-input,
    body:not(.force-pc-mode) #priceTable tbody td .table-select {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
        user-select: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        color: inherit !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: 1.25 !important;
    }

    

    body:not(.force-pc-mode) #priceTable tbody td input::-webkit-inner-spin-button,
    body:not(.force-pc-mode) #priceTable tbody td input::-webkit-outer-spin-button,
    body:not(.force-pc-mode) #priceTable tbody td input::-webkit-calendar-picker-indicator {
        display: none !important;
        -webkit-appearance: none !important;
    }

    body:not(.force-pc-mode) #priceTable th:nth-child(11),
    body:not(.force-pc-mode) #priceTable td:nth-child(11),
    body:not(.force-pc-mode) #priceTable th:last-child,
    body:not(.force-pc-mode) #priceTable td:last-child,
    body:not(.force-pc-mode) #priceTable .row-action-cell,
    body:not(.force-pc-mode) #priceTable .row-action-trigger,
    body:not(.force-pc-mode) #priceTable .row-action-menu {
        display: none !important;
    }

    body:not(.force-pc-mode) #priceTable tbody td {
        vertical-align: middle !important;
        padding: 4px 2px !important;
    }
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td select,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td .table-input,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td .table-select {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input::-webkit-inner-spin-button,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input::-webkit-outer-spin-button,
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td input::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(11),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(11),
body.force-mobile-mode:not(.force-pc-mode) #priceTable th:last-child,
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:last-child,
body.force-mobile-mode:not(.force-pc-mode) #priceTable .row-action-cell,
body.force-mobile-mode:not(.force-pc-mode) #priceTable .row-action-trigger,
body.force-mobile-mode:not(.force-pc-mode) #priceTable .row-action-menu {
    display: none !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td {
    vertical-align: middle !important;
    padding: 4px 2px !important;
}


/* スマホ横: 保存アクションブロック完全非表示 */
@media screen and (max-width: 1024px) and (orientation: landscape), screen and (max-height: 520px) and (orientation: landscape) {
    body:not(.force-pc-mode) .save-action-group,
    body:not(.force-pc-mode) .save-action-group * {
        display: none !important;
    }
}
body.force-mobile-mode:not(.force-pc-mode) .save-action-group,
body.force-mobile-mode:not(.force-pc-mode) .save-action-group * {
    display: none !important;
}

/* スマホ横画面: th 内側パディング調整 */
@media screen and (orientation: landscape) and (max-height: 600px), screen and (max-width: 900px) and (orientation: landscape) {
    #priceTable thead th, .price-table th { padding: 4px 2px !important; }
}
body.force-mobile-mode:not(.force-pc-mode) #priceTable thead th,
body.force-mobile-mode:not(.force-pc-mode) .price-table th { padding: 4px 2px !important; }

/* ==========================================================================
   スマホ横画面専用: メイン表列幅最適化 & URL/電話ボタン右寄せ
   ※ PC画面（全画面表示）には絶対に影響を与えないよう厳格にメディアクエリで遮断
   ========================================================================== */
@media screen and (orientation: landscape) and (max-height: 600px),
       screen and (max-width: 1024px) and (orientation: landscape) {
    #priceTable {
        min-width: 1090px !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* 2列目: 保管場所 (105px) */
    #priceTable th:nth-child(2),
    #priceTable td:nth-child(2) {
        width: 105px !important;
        min-width: 105px !important;
    }

    /* 3列目: 分類 (5文字分拡幅: 164px) */
    #priceTable th:nth-child(3),
    #priceTable td:nth-child(3) {
        width: 164px !important;
        min-width: 164px !important;
    }

    /* 4列目: 名前 (5文字分拡幅: 164px) */
    #priceTable th:nth-child(4),
    #priceTable td:nth-child(4) {
        width: 136px !important;
        min-width: 136px !important;
    }

    /* 5列目: 下4桁 (50px) */
    #priceTable th:nth-child(5),
    #priceTable td:nth-child(5) {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }

    /* 6列目: 有効期限 (84px) */
    #priceTable th:nth-child(6),
    #priceTable td:nth-child(6) {
        width: 84px !important;
        min-width: 84px !important;
        max-width: 84px !important;
    }

    /* 7列目: 緊急連絡先 (電話) (126px) */
    #priceTable th:nth-child(7),
    #priceTable td:nth-child(7) {
        width: 126px !important;
        min-width: 126px !important;
        max-width: 126px !important;
    }

    /* 8列目: 公式案内URL (140px) */
    #priceTable th:nth-child(8),
    #priceTable td:nth-child(8) {
        width: 140px !important;
        min-width: 140px !important;
    }

    /* 9列目: 状態 (82px) */
    #priceTable th:nth-child(9),
    #priceTable td:nth-child(9) {
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
    }

    /* 10列目: メモ (140px) */
    #priceTable th:nth-child(10),
    #priceTable td:nth-child(10) {
        width: 140px !important;
        min-width: 140px !important;
    }

    /* URL・電話番号入力欄を伸ばしてボタンをセルの右端に配置 */
    #priceTable tbody td > div {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #priceTable tbody td [data-field="url"],
    #priceTable tbody td [data-field="tel"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .wallet-tel-link,
    .wallet-url-link {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
}

/* 強制モバイルモード時（PC上でのスマホ横シミュレーション用: body.force-mobile-mode が必須） */
body.force-mobile-mode:not(.force-pc-mode) #priceTable {
    min-width: 1090px !important;
    width: 100% !important;
    table-layout: fixed !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(2),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(2) {
    width: 105px !important;
    min-width: 105px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(3),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(3) {
    width: 164px !important;
    min-width: 164px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(4),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(4) {
    width: 136px !important;
    min-width: 136px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(5),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(5) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(6),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(6) {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(7),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(7) {
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(8),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(8) {
    width: 140px !important;
    min-width: 140px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(9),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(9) {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable th:nth-child(10),
body.force-mobile-mode:not(.force-pc-mode) #priceTable td:nth-child(10) {
    width: 140px !important;
    min-width: 140px !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td > div {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td [data-field="url"],
body.force-mobile-mode:not(.force-pc-mode) #priceTable tbody td [data-field="tel"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.force-mobile-mode:not(.force-pc-mode) .wallet-tel-link,
body.force-mobile-mode:not(.force-pc-mode) .wallet-url-link {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* スマホ横: ヘッダー統一 (zaiko基準 height:24px, font-size:10px) */
@media screen and (orientation: landscape) and (max-height: 600px),
       screen and (max-width: 900px) and (orientation: landscape) {
    #priceTable thead th,
    .price-table th {
        height: 24px !important;
        max-height: 24px !important;
        box-sizing: border-box !important;
        font-size: 10px !important;
        line-height: normal !important;
        text-align: center !important;
        vertical-align: middle !important;
        padding: 4px 2px !important;
        white-space: nowrap !important;
    }
}
body.force-mobile-mode:not(.force-pc-mode) #priceTable thead th,
body.force-mobile-mode:not(.force-pc-mode) .price-table th {
    height: 24px !important;
    max-height: 24px !important;
    box-sizing: border-box !important;
    font-size: 10px !important;
    line-height: normal !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 4px 2px !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   【スマホモード統一】タブエリア（タブナビゲーション＋タブパネル内）ボタン統一スタイル
   ※タブの外（アクションバー・ヘッダー・テーブル等）には干渉しないようタブ内に完全限定
   ========================================================================== */

/* 1. タブナビゲーションボタン（フォント11px・太さ600・システムフォント統一） */
body.force-mobile-mode:not(.force-pc-mode) .tab-navigation .tab-button,
body.force-mobile-mode:not(.force-pc-mode) .tab-navigation .tab-manual-btn,
body.force-mobile-mode:not(.force-pc-mode) .tab-button,
body.force-mobile-mode:not(.force-pc-mode) .tab-manual-btn {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: normal !important;
}

/* 2. タブパネル内の全ボタン（データ管理・追加・検索パネル内：高さ30px・フォント12px・太さ600統一） */
body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel button,
body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel .custom-button,
body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel a.custom-button,
body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel input[type="button"],
body.force-mobile-mode:not(.force-pc-mode) .tab-content-panel input[type="submit"],
body.force-mobile-mode:not(.force-pc-mode) .management-tab-content .custom-button,
body.force-mobile-mode:not(.force-pc-mode) .management-group .custom-button,
body.force-mobile-mode:not(.force-pc-mode) .management-group a,
body.force-mobile-mode:not(.force-pc-mode) .management-group button,
body.force-mobile-mode:not(.force-pc-mode) .management-group label,
body.force-mobile-mode:not(.force-pc-mode) .search-tab-content button,
body.force-mobile-mode:not(.force-pc-mode) .search-tab-content .custom-button,
body.force-mobile-mode:not(.force-pc-mode) .search-tab-content #searchButton,
body.force-mobile-mode:not(.force-pc-mode) .search-tab-content #outOfStockButton,
body.force-mobile-mode:not(.force-pc-mode) .search-tab-content #clearFilterButton,
body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search button,
body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #searchButton,
body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #outOfStockButton,
body.force-mobile-mode:not(.force-pc-mode) #tab-panel-search #clearFilterButton,
body.force-mobile-mode:not(.force-pc-mode) #tab-panel-add button,
body.force-mobile-mode:not(.force-pc-mode) #tab-panel-manage button,
body.force-mobile-mode:not(.force-pc-mode) #tab-search button,
body.force-mobile-mode:not(.force-pc-mode) #tab-add button,
body.force-mobile-mode:not(.force-pc-mode) #tab-manage button,
body.force-mobile-mode:not(.force-pc-mode) .form-section button,
body.force-mobile-mode:not(.force-pc-mode) .add-form-row .custom-button,
body.force-mobile-mode:not(.force-pc-mode) #addButton,
body.force-mobile-mode:not(.force-pc-mode) #scanButton,
body.force-mobile-mode:not(.force-pc-mode) #addButton2,
body.force-mobile-mode:not(.force-pc-mode) #compressButton,
body.force-mobile-mode:not(.force-pc-mode) #addPriceSubmitBtn,
body.force-mobile-mode:not(.force-pc-mode) #addWalletSubmitBtn,
body.force-mobile-mode:not(.force-pc-mode) #submit-record-button,
body.force-mobile-mode:not(.force-pc-mode) #searchButton,
body.force-mobile-mode:not(.force-pc-mode) #searchButtonNew,
body.force-mobile-mode:not(.force-pc-mode) #tabSearchButton,
body.force-mobile-mode:not(.force-pc-mode) #search-button,
body.force-mobile-mode:not(.force-pc-mode) #clearFilterButton,
body.force-mobile-mode:not(.force-pc-mode) #clearFilterButtonNew,
body.force-mobile-mode:not(.force-pc-mode) #tabClearFilterButton,
body.force-mobile-mode:not(.force-pc-mode) #clear-filters-button,
body.force-mobile-mode:not(.force-pc-mode) #outOfStockButton,
body.force-mobile-mode:not(.force-pc-mode) #tabExpiringButton {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important;
    height: 30px !important;
    min-height: 30px !important;
    line-height: 28px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
}

/* レスポンシブ (max-width: 768px) 用ルール */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
    body:not(.force-pc-mode) .tab-navigation .tab-button,
    body:not(.force-pc-mode) .tab-navigation .tab-manual-btn,
    body:not(.force-pc-mode) .tab-button,
    body:not(.force-pc-mode) .tab-manual-btn {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: normal !important;
    }

    body:not(.force-pc-mode) .tab-content-panel button,
    body:not(.force-pc-mode) .tab-content-panel .custom-button,
    body:not(.force-pc-mode) .tab-content-panel a.custom-button,
    body:not(.force-pc-mode) .tab-content-panel input[type="button"],
    body:not(.force-pc-mode) .tab-content-panel input[type="submit"],
    body:not(.force-pc-mode) .management-tab-content .custom-button,
    body:not(.force-pc-mode) .management-group .custom-button,
    body:not(.force-pc-mode) .management-group a,
    body:not(.force-pc-mode) .management-group button,
    body:not(.force-pc-mode) .management-group label,
    body:not(.force-pc-mode) .search-tab-content button,
    body:not(.force-pc-mode) .search-tab-content .custom-button,
    body:not(.force-pc-mode) .search-tab-content #searchButton,
    body:not(.force-pc-mode) .search-tab-content #outOfStockButton,
    body:not(.force-pc-mode) .search-tab-content #clearFilterButton,
    body:not(.force-pc-mode) #tab-panel-search button,
    body:not(.force-pc-mode) #tab-panel-search #searchButton,
    body:not(.force-pc-mode) #tab-panel-search #outOfStockButton,
    body:not(.force-pc-mode) #tab-panel-search #clearFilterButton,
    body:not(.force-pc-mode) #tab-panel-add button,
    body:not(.force-pc-mode) #tab-panel-manage button,
    body:not(.force-pc-mode) #tab-search button,
    body:not(.force-pc-mode) #tab-add button,
    body:not(.force-pc-mode) #tab-manage button,
    body:not(.force-pc-mode) .form-section button,
    body:not(.force-pc-mode) .add-form-row .custom-button,
    body:not(.force-pc-mode) #addButton,
    body:not(.force-pc-mode) #scanButton,
    body:not(.force-pc-mode) #addButton2,
    body:not(.force-pc-mode) #compressButton,
    body:not(.force-pc-mode) #addPriceSubmitBtn,
    body:not(.force-pc-mode) #addWalletSubmitBtn,
    body:not(.force-pc-mode) #submit-record-button,
    body:not(.force-pc-mode) #searchButton,
    body:not(.force-pc-mode) #searchButtonNew,
    body:not(.force-pc-mode) #tabSearchButton,
    body:not(.force-pc-mode) #search-button,
    body:not(.force-pc-mode) #clearFilterButton,
    body:not(.force-pc-mode) #clearFilterButtonNew,
    body:not(.force-pc-mode) #tabClearFilterButton,
    body:not(.force-pc-mode) #clear-filters-button,
    body:not(.force-pc-mode) #outOfStockButton,
    body:not(.force-pc-mode) #tabExpiringButton {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif !important;
        height: 30px !important;
        min-height: 30px !important;
        line-height: 28px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        box-sizing: border-box !important;
    }
}
/* 緊急紛失モーダル（横画面・1行キープ・コンパクト） */
.emergency-item-card {
    border: 1px solid #e5a0a0;
    background: #fff;
    border-radius: 5px;
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box;
}
.emergency-item-card.is-done {
    border-color: #cbd5e1;
    background: #f1f5f9;
    opacity: 0.68;
}
.emergency-item-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.emergency-item-meta {
    font-size: 11px !important;
    color: var(--muted-color);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.emergency-item-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.emergency-item-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}
.emergency-item-actions .wallet-tel-link {
    height: 25px !important;
    padding: 0 7px !important;
    font-size: 11.5px !important;
}
.emergency-item-actions .wallet-url-link {
    height: 25px !important;
    padding: 0 7px !important;
    font-size: 11.5px !important;
}
.emergency-item-actions .emg-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* スマホモード（縦画面・横画面・強制スマホモード）: ソート実行ボタンを完全非表示 */
@media screen and (max-width: 1024px) {
    body:not(.force-pc-mode) #sortExecuteButton,
    body:not(.force-pc-mode) .sort-execute-button,
    body:not(.force-pc-mode) .action-group .sort-execute-button,
    body:not(.force-pc-mode) .sort-control-wrap .sort-execute-button {
        display: none !important;
    }
}
@media screen and (orientation: landscape) and (max-height: 600px) {
    body:not(.force-pc-mode) #sortExecuteButton,
    body:not(.force-pc-mode) .sort-execute-button,
    body:not(.force-pc-mode) .action-group .sort-execute-button,
    body:not(.force-pc-mode) .sort-control-wrap .sort-execute-button {
        display: none !important;
    }
}
body.force-mobile-mode:not(.force-pc-mode) #sortExecuteButton,
body.force-mobile-mode:not(.force-pc-mode) .sort-execute-button,
body.force-mobile-mode:not(.force-pc-mode) .action-group .sort-execute-button,
body.force-mobile-mode:not(.force-pc-mode) .sort-control-wrap .sort-execute-button {
    display: none !important;
}