/* ============================================================ * mobile.css * -------------------------------------------------------------- * 役割: レスポンシブ対応（@media） * - 〜900px: 中間ブレークポイント（タブレット・狭PC） * - 〜640px: スマホ向けカード＆タップフレンドリー UI * - 〜380px: 極小画面の縮小 * 依存: dashboard.css の後ろに読み込む（上書き前提） * 元: ui/index.html L617-712 * ============================================================ */ @media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } .grid-main, .grid-bottom { grid-template-columns: 1fr; } .container { padding: 10px; } #carrier-chart-wrap { gap: 12px; } } /* スマホ（〜640px）：モダンなカード＆タップフレンドリーUI */ @media (max-width: 640px) { body { background: #f3f4f6; font-size: 14px; } /* ヘッダー高さ変数（overlay top に連動） */ :root { --header-h: calc(60px + env(safe-area-inset-top, 0px)); } /* ヘッダー：安全領域対応＋ロゴ中央寄せ */ .header { padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .header .logo { height: 28px; } /* フィルターバー：白背景カード化 */ .filter-bar { background: #fff; border-bottom: none; padding: 12px 14px; gap: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); border-radius: 0 0 16px 16px; } .filter-bar.collapsed { padding: 0 14px; box-shadow: none; } .filter-row { flex-wrap: nowrap; gap: 8px; width: 100%; justify-content: center; align-items: stretch; } .filter-row.filter-row-actions { justify-content: flex-end; } .filter-field { flex: 1 1 0; min-width: 0; gap: 0; flex-direction: column; align-items: stretch; display: flex; } .filter-field .filter-label { font-size: 10px; color: #888; font-weight: 600; margin-bottom: 3px; letter-spacing: 0.02em; text-transform: uppercase; } .filter-bar select { min-width: 0; width: 100%; padding: 8px 10px; font-size: 14px; border-radius: 8px; border: 1px solid #d1d5db; background: #f9fafb; color: #111827; height: 40px; font-weight: 500; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } .filter-bar select:focus { border-color: #6c69b4; background: #fff; box-shadow: 0 0 0 3px rgba(108,105,180,0.2); } .filter-row > .btn { align-self: flex-end; padding: 0 14px; height: 40px; font-size: 13px; border-radius: 8px; flex-shrink: 0; font-weight: 600; } .btn-primary { box-shadow: 0 1px 2px rgba(108,105,180,0.28); } .btn-ghost { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; } /* 更新情報（モバイル）：テキストのみ */ .filter-row-update { flex-direction: row !important; gap: 8px !important; border-top: 1px dashed #ccc; padding-top: 8px; width: 100%; align-items: center; } .filter-row-update .updated { font-size: 11px; color: #6b7280; background: transparent; padding: 0; border-radius: 0; flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; height: auto; } .btn-refresh, .btn-capture { padding: 0 12px !important; height: 32px !important; font-size: 12px !important; border-radius: 8px; font-weight: 600; } /* メイン余白 */ .container { padding: 14px 14px 32px; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); } /* KPI：立体感ある白カード */ .kpi-row { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .kpi-card { padding: 14px 8px 12px; border-radius: 12px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); } .kpi-card .label { font-size: 10px; color: #6b7280; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 6px; } .kpi-card .value { font-size: 28px; font-weight: 700; color: #111827; letter-spacing: -0.02em; } /* パネル：丸みと影 */ .panel { border-radius: 12px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); padding: 14px 14px 16px; } .panel-title { font-size: 12px; background: transparent; padding: 0 0 10px; border-left: none; border-bottom: 2px solid #6c69b4; display: inline-block; color: #111827; font-weight: 700; margin-bottom: 10px; } /* カレンダー */ .cal-day { height: 48px; border-radius: 6px; } .cal-day .day-count { font-size: 16px; } .cal-header { font-size: 11px; } /* 稼働場所ランキング */ .loc-name { width: 100px; font-size: 12px; } .loc-bar, .loc-bar-wrap { height: 12px; } .loc-count { font-size: 12px; } /* 人別ランキング */ .person-table { font-size: 12px; } .person-table th, .person-table td { padding: 6px 4px; } .person-table thead tr.head-row th { height: 30px; } .person-table thead tr.total-row th { top: 30px; height: 30px; padding: 6px 4px; } /* 列幅: # 2桁／氏名 全角5文字 保障。バー幅は合計行と個人行で統一 */ .person-table .col-rank { width: 26px; min-width: 26px; padding-right: 2px; } .person-table .col-name { width: 130px; min-width: 130px; } .person-table .col-bar { width: calc((100% - 156px) / 2); min-width: 0; } .person-table .col-work { width: 50px; min-width: 50px; } .person-table .col-count { width: 48px; min-width: 48px; } .person-table .col-seisan { width: 48px; min-width: 48px; } .person-table .col-value { width: calc((100% - 156px) / 2); min-width: 0; padding-right: 20px; } .person-table tbody tr:not(.selected) .person-bar-wrap, .person-table thead tr.total-row .level-stack-bar { width: 100%; } .person-table.cross-filter .col-bar { width: 36px; min-width: 36px; } .person-table.cross-filter tbody tr:not(.selected) .person-bar-wrap, .person-table.cross-filter thead tr.total-row .level-stack-bar { width: 100%; } .person-table.cross-filter .col-work { width: 36px; min-width: 36px; } .person-table.cross-filter .col-count { width: 34px; min-width: 34px; } .person-table.cross-filter .col-seisan { width: 34px; min-width: 34px; } /* コメント */ .comment-table { font-size: 12px; } .comment-table th, .comment-table td { padding: 6px 8px; } /* ステータスバー */ .status-bar { padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); } } /* 極小（〜380px）：最低限の縮小 */ @media (max-width: 380px) { .filter-bar select { font-size: 13px; padding-right: 24px; } .kpi-card .value { font-size: 24px; } .btn-capture { display: none; } .update-bar .updated { font-size: 10px; } }