/* FM-081 手机对应 M1（基础層＋外壳）。方案図: docs/ui-mockups/mobile/00_mobile.html。
   規則はすべて窄い画面（≤900px）だけ。桌面のスタイルは変えない。外すときはこのファイルと mobile.js の読み込みを消す。 */
.m-burger,.m-scrim,.m-sessbtn,.m-tools{display:none}
@media (max-width:900px){
  /* 文字が小さい（既存の CSS は 10〜13px が 211 か所）ため、画面全体を一律に拡大する。vw は zoom で一緒に広がるので --mz で割る */
  :root{--mz:1.1}
  body{min-width:0;overflow-x:hidden;zoom:var(--mz)}
  img{max-width:100%;height:auto}
  /* 顶栏: ☰／标题／项目／用户。検索・言語・取込み状態は菜单抽屉の下へ移す（mobile.js） */
  .top{height:auto;min-height:52px;padding:4px 8px;gap:8px;flex-wrap:nowrap}
  .top b{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .chip{max-width:calc(44vw / var(--mz));overflow:hidden}
  .top .chip select{max-width:100%}
  .top .pjall{display:none}
  .top .who>span:not(.av),.top .who>form,.top .who>a{display:none}
  .m-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:0;border-radius:8px;background:transparent;color:#fff;font-size:22px;cursor:pointer}
  .m-burger:focus-visible{outline:2px solid #fff}
  /* 菜单抽屉 */
  .wrap{display:block;min-height:0}
  .side{position:fixed;top:0;bottom:0;left:0;width:290px;max-width:calc(86vw / var(--mz));z-index:60;overflow-y:auto;transform:translateX(-102%);transition:transform .2s ease;box-shadow:none;visibility:hidden}
  body.m-menu-open .side{transform:translateX(0);visibility:visible;box-shadow:8px 0 24px rgba(16,24,40,.35)}
  .m-scrim{position:fixed;inset:0;z-index:55;background:rgba(16,24,40,.45)}
  body.m-menu-open .m-scrim{display:block}
  body.m-menu-open{overflow:hidden}
  .side a,.side .gh{min-height:44px;align-items:center}
  .m-foot{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:10px;font-size:12px;color:#d5dfeb}
  .m-foot .sbox{display:flex;width:100%;margin:0}
  .m-foot .sbox input{flex:1;min-width:0;font-size:16px}
  .m-foot .sbox kbd{display:none}
  .m-foot .lang{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:#d5dfeb}
  .m-foot .lang .seg{display:flex;flex-wrap:wrap;gap:6px}
  .m-foot .lang .seg a,.m-foot .lang a{min-height:36px;display:inline-flex;align-items:center}
  .m-foot .chip,.m-foot .ui_context_chip,.m-foot .authband{white-space:normal;display:block}
  .m-foot .who{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .m-foot .who>span:not(.av){display:inline}
  .m-foot .who button{min-height:36px}
  /* 主区 */
  .main,body.dr-open .main{padding:12px}
  .main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .main pre{overflow-x:auto;max-width:100%}
  /* 触れる大きさ。16px 未満の入力欄は iOS が勝手に拡大するので 16px にする */
  .main button,.main .btn,.main input[type=submit],.main select{min-height:40px}
  .main input,.main select,.main textarea{font-size:16px;max-width:100%}
}
@media (max-width:600px){:root{--mz:1.2}}

/* M2 質問と回答（P1）: 見出し・絞込み・一覧のカード化。方案図 ③ と docs/手机对应方案.md §3.3。一覧は HTML を変えず、12 列の表を CSS だけでカードにする */
@media (max-width:900px){
  .ph{flex-wrap:wrap;gap:8px 12px}
  .ph h1{font-size:20px;white-space:nowrap}
  .ph .note{flex:1 1 100%;order:3;min-width:0}
  .ph .sp{display:none}
  .ph .btn{margin-left:auto}
  /* 絞込み: 項目名を上、入力欄を全幅。状態の切替は折り返す（切れない） */
  .flt{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .flt .seg{display:flex;flex-wrap:wrap;border:0;gap:6px;overflow:visible}
  .flt .seg a{border:1px solid var(--line);border-radius:999px;white-space:nowrap;min-height:36px;display:inline-flex;align-items:center;padding:4px 12px}
  .flt .seg a.on{border-color:var(--primary)}
  .flt select.in,.flt input.in,.flt .btn{width:100%;min-width:0}
  .flt .btn{min-height:44px}
  /* 一覧 → カード */
  .qtbl{overflow:visible;border:0;background:transparent;box-shadow:none}
  .qtbl table,.qtbl tbody{display:block;min-width:0;overflow:visible;width:100%}
  .qtbl thead{display:none}
  .qtbl tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;position:relative}
  .qtbl tr.sel{background:#eef5fc;border-color:var(--primary)}
  .qtbl tr.rnew{border-left:4px solid #6b46c1}
  .qtbl td{display:block;border:0;padding:0;background:transparent !important;text-align:left}
  .qtbl td:nth-child(1){order:1;font-weight:700;color:var(--primary)}
  .qtbl td:nth-child(2){order:2}
  .qtbl td:nth-child(7){order:3;margin-left:auto;font-size:12px;color:var(--sub)}
  .qtbl td:nth-child(3){order:4;flex:1 1 100%;min-width:0;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
  .qtbl td:nth-child(10){order:5}
  .qtbl td:nth-child(11){order:6}
  .qtbl td:nth-child(4),.qtbl td:nth-child(5),.qtbl td:nth-child(6),.qtbl td:nth-child(8),.qtbl td:nth-child(9),.qtbl td:nth-child(12){display:none}
  .qtbl td:empty,.qtbl td:nth-child(10):empty,.qtbl td:nth-child(11):empty{display:none}
  .qtbl tr#qempty{display:block;text-align:center;color:var(--sub)}
  .qtbl tr#qempty td{display:block}
}

/* 顶栏の整理（利用者の指摘）: タイトル文字を外し、☰／プロジェクト（全幅）／アバターにする。プロジェクトの選択欄は白抜きの箱をやめて顶栏に溶け込ませる */
@media (max-width:900px){
  .top b{display:none}
  .top .chip{flex:1;max-width:none;background:transparent;padding:0}
  .top .pjsw{display:block;font-size:0}
  .top .pjsw select{width:100%;min-height:38px;font-size:15px;font-weight:600;color:#fff;background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;border:0;border-radius:999px;padding:6px 32px 6px 14px;-webkit-appearance:none;appearance:none;text-overflow:ellipsis}
  .top .pjsw select option{color:#22303d;background:#fff}
  .top .pjnone{font-size:13px}
  .top .pjnote{display:none}
}

/* M2 AI 会話（P1）: 画面いっぱいに会話を出し、入力欄は下に固定。読み進める間は上の帯を隠す（mobile.js） */
@media (max-width:900px){
  body.m-chat{overflow:hidden}
  body.m-chat .main{position:fixed;left:0;right:0;top:52px;bottom:0;display:flex;flex-direction:column;padding:8px 8px 0;overflow:hidden}
  body.m-chat .top{transition:none}
  body.m-chat.m-chat-focus .ch-sess{display:none}      /* 顶栏と見出し行は常に表示。読み進める間に隠すのは会話情報の帯だけ */
  body.m-chat .crumb,body.m-chat .ph .note{display:none}
  body.m-chat .ph{margin-bottom:6px}
  body.m-chat .ch-sess{margin-bottom:6px}
  body.m-chat .ch-sess .bd{padding:8px 12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
  body.m-chat .ch-wrap{flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:0;border-radius:12px 12px 0 0}
  body.m-chat .ch-stream{flex:1;height:auto;min-height:0;padding:8px 10px}
  body.m-chat .ch-in{flex:none;padding:8px}
  body.m-chat .ch-in textarea{min-height:44px;height:52px;resize:none}
  body.m-chat .ui_attach_hint,body.m-chat .ui_attach_warn:not(.quota),body.m-chat .m-notice{display:none}
}

/* M2 ToDo（P1）: 件数の札・絞込み・一覧のカード化（あなたの待ち／AI の処理待ち 共通）。HTML は変えず、10 列の表を CSS だけでカードにする */
@media (max-width:900px){
  .td .tabs{overflow-x:auto;white-space:nowrap}
  .td .tabs a{padding:10px 14px;font-size:14px}
  .td .kpis,.td .kpis.ai,.td .kpis:not(.ai){grid-template-columns:repeat(3,1fr);gap:8px}
  .td .kpi{padding:8px 10px;min-height:56px}
  .td .kpi small{font-size:12px;line-height:1.3}
  .td .kpi.sys{grid-column:1 / -1}
  .td .flt{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .td .flt label{text-align:left;font-size:12px}
  .td .flt .in{height:44px;width:100%}
  .td .seg{display:flex;flex-wrap:wrap;border:0;gap:6px}
  .td .seg a{border:1px solid var(--line);border-radius:999px;min-height:36px;display:inline-flex;align-items:center;padding:4px 14px;font-size:13px}
  .td .seg a.on{border-color:var(--primary)}
  .td .card{border:0;background:transparent;box-shadow:none;overflow:visible}
  .td table,.td tbody{display:block;min-width:0;width:100%;overflow:visible}
  .td thead{display:none}
  .td tr.row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
  .td tr.row.open{border-color:var(--primary);background:#f4f8fc}
  .td tr.row.sn{opacity:.6}
  .td td{display:block;border:0;padding:0;background:transparent !important;text-align:left;white-space:normal}
  .td tr.row>td:nth-child(1){order:1}
  .td tr.row>td:nth-child(2){order:2}
  .td tr.row>td:nth-child(6){order:3;margin-left:auto;text-align:right;font-size:12px;color:var(--sub)}
  .td tr.row>td:nth-child(3){order:4;flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
  .td tr.row>td:nth-child(3) .t{font-size:15px;line-height:1.5}
  .td tr.row>td:nth-child(3) .bg{font-size:13px;margin-top:2px}
  .td tr.row>td:nth-child(7):not(.rec){order:5}
  .td tr.row>td:nth-child(8).l{order:6;flex:1 1 100%;font-size:12px;color:var(--sub)}
  .td tr.row>td:nth-child(10){order:9;flex:1 1 100%;margin-top:6px}
  .td tr.row>td:nth-child(4),.td tr.row>td:nth-child(5),.td tr.row>td:nth-child(9),.td tr.row>td.rec,.td tr.row>td:nth-child(8):not(.l){display:none}
  .td tr.row>td:nth-child(10) .stk,.td tr.row>td:nth-child(10){display:flex;flex-wrap:wrap;gap:8px}
  .td tr.row>td:nth-child(10) .btn,.td tr.row>td:nth-child(10) button{flex:1 1 0;min-width:84px;min-height:44px;justify-content:center;font-size:14px}
  .td tr.row>td:nth-child(10) .stk{width:100%}
  /* 詳細（行をタップすると開く）: 1 列に */
  .td tr.exp{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;margin:-6px 0 10px;padding:0}
  .td tr.exp>td{display:block;padding:12px}
  .td .exp .g{grid-template-columns:1fr;gap:2px}
  .td .exp .g dt{margin-top:8px}
  .td .exp .opt{min-height:44px;display:inline-flex;align-items:center;font-size:14px}
  .td #td-recent{overflow-x:auto}
}

/* 仕上げ: 会話の入力欄を 1 行に（送信＋添付）、絞込みの項目名を左寄せ */
@media (max-width:900px){
  body.m-chat .ch-bar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
  body.m-chat .ch-bar>.btn{flex:1 1 0;width:auto;min-height:44px;justify-content:center}
  body.m-chat .ch-bar>.ui_attach_btn{flex:1 1 0;min-height:44px;justify-content:center}
  body.m-chat .ch-bar>.note:not(.ch-msg),body.m-chat .ch-bar>.sp{display:none}
  body.m-chat .ch-bar>.ch-msg{flex:1 1 100%}
  .flt>label{align-self:flex-start;text-align:left}
  .flt>.seg{align-self:flex-start}
  .td .flt>label{align-self:flex-start;text-align:left}
  .td .flt>.seg{align-self:flex-start}
  .td .flt>.chk{align-self:flex-start}
}
@media (max-width:900px){
  .td tr.row>td,.qtbl tr>td{border:0 !important}
  .td tr.row>td:nth-child(10) .stk{flex-direction:row;flex-wrap:wrap;width:100%}
  .td tr.row>td:nth-child(10) .stk .btn{flex:1 1 0}
}
@media (max-width:900px){
  body.m-chat .m-sessbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--sub);font-size:20px;cursor:pointer;padding:0}
  body.m-chat .m-sessbtn[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-l);color:var(--primary)}
  body.m-chat:not(.m-chat-sess) .ch-sess{display:none}
}

/* 顶栏と見出し行（タイトル＋件数の説明）を常に表示する。会話ページと同じ扱い（利用者の指示）。一覧だけがその下でスクロールする。
   ページ末尾の注記（.legend-note＝データソースなどの説明）は手机では出さない */
@media (max-width:900px){
  .top{position:sticky;top:0;z-index:40}
  body:not(.m-chat) .ph{position:sticky;top:52px;z-index:30;background:var(--bg);margin:0 -12px 8px;padding:8px 12px}
}

/* M3 表 → カード（共通）。mobile.js が各セルに表頭の文字を data-label で付ける。『ラベル（左・薄い）＋値（右へ回り込み）』の行を積む。
   質問・ToDo の専用カード、markdown の表、抽屉内の表は対象外（mobile.js 側で m-cardtbl を付けない）。 */
@media (max-width:900px){
  .card:has(>table.m-cardtbl){border:0;background:transparent;box-shadow:none;overflow:visible}
  table.m-cardtbl{display:block;min-width:0 !important;width:100%;overflow:visible}
  table.m-cardtbl>thead,table.m-cardtbl tr.m-hrow{display:none}
  table.m-cardtbl>tbody,table.m-cardtbl>tfoot{display:block}
  table.m-cardtbl tr{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:10px}
  table.m-cardtbl tr.m-wide{padding:12px;text-align:center;color:var(--sub)}
  table.m-cardtbl tr.m-wide>td,table.m-cardtbl tr.m-wide>th{display:block;border:0;padding:0}
  table.m-cardtbl td,table.m-cardtbl th{display:grid;grid-template-columns:34% minmax(0,1fr);gap:12px;align-items:baseline;border:0 !important;padding:5px 0 !important;text-align:left !important;white-space:normal !important;min-width:0 !important;background:transparent !important;width:auto !important;overflow-wrap:anywhere}
  table.m-cardtbl td::before{content:attr(data-label);font-size:12px;font-weight:700;color:var(--sub);overflow-wrap:anywhere}
  table.m-cardtbl td[data-label=""],table.m-cardtbl th{display:block}
  table.m-cardtbl td[data-label=""]::before{display:none}
  table.m-cardtbl td>.m-v{min-width:0;overflow-wrap:anywhere}
  table.m-cardtbl td:empty,table.m-cardtbl td[data-empty]{display:none}      /* 空欄・『—』だけのセルは出さない */
  table.m-cardtbl th{font-weight:700}
}

/* 横幅のはみ出し対策（共通の格子）。固定列数・最小幅つきの格子は手机では 1〜2 列にする */
@media (max-width:900px){
  .g2,.g3,.fv-2col,.fv-deliv,.gcmp-sbs,.pg-cd-g,.rv-ov,.e-cols2,.e-cols2.users,.mfa-grid,.ag-cards,.pg-cards,.pg-lg-grid,.gal-strip,.ui_mode_cards,.ui_form_row{grid-template-columns:minmax(0,1fr) !important}
  .g4,.df-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .gal-grid,.gal-mem,.fcols{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important}
  table.m-cardtbl td div,table.m-cardtbl td span.bar{max-width:100%}
}
@media (max-width:900px){
  .step{overflow-x:auto;padding-bottom:4px}
  .step .st{flex:0 0 76px}
  .main a{max-width:100%;overflow-wrap:anywhere}
  .main input.in,.main .in{max-width:100%}
}
/* 説明帯（ⓘ）と検索・絞込み（漏斗）は、見出し行のボタンを押したときだけ表示（mobile.js が m-info／m-filter を付ける） */
@media (max-width:900px){
  .ph>.m-tools{display:inline-flex;gap:8px;order:2}
  .ph:not(:has(.btn)) >.m-tools{margin-left:auto}
  .m-tbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--sub);font-size:20px;cursor:pointer;padding:0}
  .m-tbtn[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-l);color:var(--primary)}
  body:not(.m-show-info) .m-info{display:none !important}
  body:not(.m-show-filter) .m-filter{display:none !important}
}
/* 文書ビュー（/repodoc の markdown）: 表はカード、コード・長い語は折り返すかその場でスクロール */
@media (max-width:900px){
  .mdtbl:has(>table.m-cardtbl){overflow:visible;margin:8px 0}
  .mdtbl>table.m-cardtbl{min-width:0 !important;border:0 !important;width:100%}
  .mdv{overflow-wrap:anywhere;min-width:0}
  .mdv pre{max-width:100%;overflow-x:auto}
  .mdv img{max-width:100%;height:auto}
  .mono{overflow-wrap:anywhere;word-break:break-all}
  #rd-r{white-space:pre-wrap;overflow-wrap:anywhere}
}
/* 画像の拡大表示（imgzoom.js の .iz-box）の上部メニュー: 項目名の縦書きを止め、ボタンは折り返して 44px 以上、閉じるを先頭の行に */
@media (max-width:900px){
  .iz-bar{flex-wrap:wrap;gap:8px;padding:8px 10px;padding-top:max(8px, env(safe-area-inset-top))}
  .iz-bar b,.iz-bar .iz-sp{display:none}
  .iz-bar button{flex:1 1 auto;min-height:44px;padding:6px 12px;white-space:nowrap;font-size:14px}
  .iz-bar button[data-a="close"]{order:-2;flex:1 1 40%;background:#344054}
  .iz-bar .iz-zoom{flex:0 0 auto;min-width:56px;white-space:nowrap}
  .iz-bar button[data-a="out"],.iz-bar button[data-a="in"]{flex:0 0 52px}
  .iz-bar button[data-a="win"]{order:-1;flex:1 1 40%}
}
/* 顶栏の中身が幅を超えてアバターが外へ押し出される（実機で確認）対策: プロジェクト選択だけが縮む */
@media (max-width:900px){
  .top>*{flex-shrink:0}
  .top>.chip{flex:1 1 0;min-width:0}
  .top .pjsw,.top .pjsw select{min-width:0;max-width:100%}
  .top>.who{flex:none}
}
/* カードのセルが重なる問題（実機のプロジェクト一覧）: 全体の td{height:40px} と、列固定用の max-width・sticky（操作列）がカードでも効いていた */
@media (max-width:900px){
  table.m-cardtbl td,table.m-cardtbl th{height:auto !important;min-height:0 !important;max-width:none !important;position:static !important;box-shadow:none !important;text-overflow:clip !important}
  table.m-cardtbl td>.m-v{line-height:1.7}
  table.m-cardtbl td .badge{margin:2px 4px 2px 0;line-height:1.6;white-space:nowrap}
  table.m-cardtbl td .fv-q>div,table.m-cardtbl td .fv-cost2>div{white-space:normal;flex-wrap:wrap}
  table.m-cardtbl td.pj_op .pj_ops{width:auto;max-width:100%;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin:0}
  table.m-cardtbl td .btn.pj_ic{width:44px;height:44px}
}
/* 詳細ドロワー共通（質問・AI 報告・工程など）の見出し: 言語切替が縦書きに潰れる問題。1 行目＝題名と閉じる、2 行目＝言語切替 */
@media (max-width:900px){
  .dr-hd{flex-wrap:wrap;gap:8px 10px;padding:10px 12px !important;align-items:flex-start}
  .dr-hd>.sp{display:none}
  .dr-hd>.dr-title{order:1;flex:1 1 0;min-width:0}
  .dr-hd>.dr-close,.dr-hd>[data-close]{order:2;flex:none;min-width:44px;min-height:44px}
  .dr-hd>.lang,.dr-hd>.langseg,.dr-hd>.seg,.dr-hd>span:has(.seg){order:3;flex:1 1 100%;margin:0 !important}
  .dr-hd .seg{display:flex;width:100%}
  .dr-hd .seg a,.dr-hd .seg span,.dr-hd .langseg a{flex:1 1 0;white-space:nowrap;text-align:center;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:4px 8px !important;font-size:13px !important}
  .dr-bd{padding:10px 12px 24px !important}
  .dr-title .note{flex:1 1 100%}
}
/* ドロワー下部に固定される操作ボタン群: 縦に 4 つ積むと本文の領域が狭いので、2 列に並べる */
@media (max-width:900px){
  .dr-form .flt{flex-direction:row !important;flex-wrap:wrap;align-items:stretch;gap:8px;padding:8px 0 10px}
  .dr-form .flt>.btn,.dr-form .flt>button{flex:1 1 calc(50% - 8px);width:auto;min-height:44px;justify-content:center;white-space:normal;font-size:14px}
  .dr-form .flt>.btn.p:first-child,.dr-form .flt>button.p:first-child{flex-basis:100%}
}

/* CH-182: ToDo 完了済み（履歴）のカード化。9 列 = 種別・起票者・題／背景・関連要求・登録・完了日時・所要・対応者・結果。ボタンは 44px 以上、検索・絞り込みは折りたたみ */
@media (max-width:900px){
  .td .hflt-toggle{display:inline-flex;width:100%;min-height:44px;justify-content:center;font-size:14px}
  .td .hflt-body{display:none;flex-direction:column;align-items:stretch;width:100%;gap:6px}
  .td .hflt-body.open{display:flex}
  .td .hq{min-width:0;width:100%;height:44px;flex:none}
  .td .hsub{min-height:44px;justify-content:center;font-size:14px}
  .td .hflt{flex-direction:column;align-items:stretch}
  .td .hmore .btn{min-height:44px;width:100%;justify-content:center;font-size:14px}
  .td tr.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
  .td tr.hrow.open{border-color:var(--primary);background:#f4f8fc}
  .td tr.hrow>td{border:0 !important}
  .td tr.hrow>td:nth-child(1){order:1}
  .td tr.hrow>td:nth-child(2){order:2}
  .td tr.hrow>td:nth-child(9){order:3}
  .td tr.hrow>td:nth-child(6){order:4;margin-left:auto;text-align:right;font-size:12px;color:var(--sub)}
  .td tr.hrow>td:nth-child(3){order:5;flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
  .td tr.hrow>td:nth-child(3) .t{font-size:15px;line-height:1.5}
  .td tr.hrow>td:nth-child(3) .bg{font-size:13px;margin-top:2px}
  .td tr.hrow>td:nth-child(4),.td tr.hrow>td:nth-child(5),.td tr.hrow>td:nth-child(7),.td tr.hrow>td:nth-child(8){order:6;font-size:12px;color:var(--sub);display:inline-flex;gap:4px}
  .td tr.hrow>td[data-label]:not([data-label=""])::before{content:attr(data-label);font-weight:700}
  .td tr.hrow>td.r{text-align:left}
}