/* mobile-v2.css — スマホ表示の作り直し（2026-09-09）
   ・出品台帳の1行を「カード」に組み替えて縦を詰める
   ・Homeの余白を詰める
   このファイルは最後に読み込む。既存CSSは変更しない。 */

@media (max-width: 700px) {

  /* ---------- 出品台帳 ---------- */

  body:not(.home-mode):not(.purchase-mode) .ledger-table,
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody {
    display: block !important;
    width: 100% !important;
  }

  body:not(.home-mode):not(.purchase-mode) .ledger-table thead {
    display: none !important;
  }

  /* 1件 = 3列のカード。列は「内容 / 数値 / 数値」 */
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px 56px !important;
    gap: 3px 6px !important;
    align-items: center !important;
    margin: 0 0 6px !important;
    padding: 7px 8px !important;
    border: 1px solid #2c3f52 !important;
    border-radius: 10px !important;
  }

  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody tr.selected {
    border-color: #2f9bdd !important;
  }

  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 1行目：商品名を最優先で見せる */
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td.ledger-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    white-space: normal !important;
  }
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td.ledger-title strong {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  /* 2行目：管理番号 / 仕入値 / 滞留日数 */
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td:nth-child(5) { grid-column: 1 !important; grid-row: 2 !important; }
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td:nth-child(7) { grid-column: 2 !important; grid-row: 2 !important; }
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td:nth-child(8) { grid-column: 3 !important; grid-row: 2 !important; text-align: right !important; font-weight: 700 !important; }

  /* 3行目：購入日 / 仕入先 / グレード */
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td:nth-child(1) { grid-column: 1 !important; grid-row: 3 !important; }
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td:nth-child(2) { grid-column: 2 !important; grid-row: 3 !important; color: #9fb3c8 !important; }
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td:nth-child(6) { grid-column: 3 !important; grid-row: 3 !important; text-align: right !important; color: #9fb3c8 !important; }

  /* 4行目：注文番号（売れたら入力） */
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td:nth-child(3) { grid-column: 1 / 3 !important; grid-row: 4 !important; }

  /* 4行目右端〜：状態と操作 */
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td.ledger-actions {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-top: 2px !important;
  }
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td.ledger-actions .status-badge {
    margin-right: auto !important;
    font-size: 11px !important;
  }
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td.ledger-actions button {
    min-height: 28px !important;
    padding: 2px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  /* 入力欄は行の高さを決めてしまうので、必ず低く保つ */
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody input,
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody select {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  body:not(.home-mode):not(.purchase-mode) .ledger-table tbody td.number input {
    text-align: right !important;
  }

  /* 台帳の上にある操作群を詰める */
  body:not(.home-mode):not(.purchase-mode) .ledger-head,
  body:not(.home-mode):not(.purchase-mode) .ledger-aging-toolbar,
  body:not(.home-mode):not(.purchase-mode) .ledger-tracking-toolbar {
    gap: 4px !important;
    margin: 0 0 6px !important;
    padding: 6px !important;
  }
  body:not(.home-mode):not(.purchase-mode) .ledger-head .eyebrow { display: none !important; }
  body:not(.home-mode):not(.purchase-mode) .ledger-head h3 { margin: 0 !important; font-size: 16px !important; }
  body:not(.home-mode):not(.purchase-mode) .ledger-summary { margin: 0 !important; font-size: 11px !important; }
  body:not(.home-mode):not(.purchase-mode) .ledger-maintenance-btn,
  body:not(.home-mode):not(.purchase-mode) .ledger-new-btn {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
  }
  /* 保守用の3つは常時出す必要がない。折りたたんで縦を稼ぐ */
  body:not(.home-mode):not(.purchase-mode) .ledger-head-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  body:not(.home-mode):not(.purchase-mode) .ledger-search-input {
    grid-column: 1 / -1 !important;
    height: 32px !important;
    font-size: 13px !important;
  }
  body:not(.home-mode):not(.purchase-mode) .ledger-new-btn { grid-column: 1 / -1 !important; }

  /* ---------- Home ---------- */

  body.home-mode .home-tool-group {
    margin: 0 0 8px !important;
    padding: 8px !important;
  }
  body.home-mode .home-tool-group-head { margin: 0 0 6px !important; }
  body.home-mode .home-tool-group-head h2 { margin: 0 !important; font-size: 15px !important; }
  body.home-mode .home-section-note { font-size: 11px !important; }
  body.home-mode .home-menu-grid { gap: 6px !important; }

  /* カードは「名前」と「開く」の2つだけ。高さを内容ぶんに戻す */
  body.home-mode .home-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px 10px !important;
  }
  body.home-mode .home-card h3 {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  body.home-mode .home-card p {
    grid-column: 1 !important;
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #9fb3c8 !important;
  }
  body.home-mode .home-card .home-primary-btn {
    grid-row: 1 / span 2 !important;
    grid-column: 2 !important;
    min-height: 34px !important;
    padding: 5px 16px !important;
    font-size: 13px !important;
  }
  body.home-mode .home-card-kicker { font-size: 10px !important; }

  body.home-mode .home-research-grid { gap: 6px !important; }
  body.home-mode .home-finder-strip,
  body.home-mode .home-finder-desk {
    gap: 6px !important;
    padding: 8px !important;
  }
  body.home-mode .home-field input { height: 34px !important; font-size: 13px !important; }
}

/* ==========================================================================
   v253（2026-10-06）スマホ表示の見直し
   ・出品台帳：1件が約330px（画面の4割）もあり、商品名が1行で切れていた。カードを組み直す
   ・編集画面：基本情報のカードが固定幅で横に並び、商品タイプ・グレードが画面の外で触れなかった
   ・仕入管理：見出しが大きすぎ、分類タブ・一覧タブがはみ出していた
   ほかの CSS に同じ要素への !important が何重にもあるので、ここは ID を重ねた強い指定（#listingLedger#listingLedger・:not(#v253m)）で上書きする。
   PC（761px 以上）には効かない。
   ========================================================================== */
@media (max-width: 760px) {

  /* ---------- 出品台帳：カード ---------- */
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-scroll {
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    background: transparent !important;
    border: 0 !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger {
    display: block !important;
    width: 100% !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 6px 6px !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 10px 12px 12px !important;
    border: 1px solid #cfdbe7 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(10, 30, 50, .08) !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr.selected {
    border-color: #2f9bdd !important;
    box-shadow: 0 0 0 2px rgba(47, 155, 221, .25) !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td {
    display: block !important;
    position: static !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td::before {
    content: none !important;
  }
  /* 出品に必要な設定が欠けている行：表ではセルごとの赤い線だったが、カードでは左の赤い帯と薄い赤の背景で示す */
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td {
    box-shadow: none !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr.ledger-missing-required {
    border-color: #f1b4b4 !important;
    background: #fff6f6 !important;
    box-shadow: inset 4px 0 0 #dc2626, 0 1px 2px rgba(10, 30, 50, .08) !important;
  }
  /* 1行目：商品名（2行まで） */
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(4) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(4) strong {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    white-space: normal !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    word-break: break-word !important;
  }
  /* 2行目：グレード・購入場所（小さな灰色）と滞留日数（右端のバッジ）。列は12等分 */
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(6) {
    grid-column: 1 / 6 !important;
    grid-row: 2 !important;
    color: #5b6b7d !important;
    font-size: 12px !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(2) {
    grid-column: 6 / 10 !important;
    grid-row: 2 !important;
    color: #5b6b7d !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(8) {
    grid-column: 10 / 13 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: #eef3f8 !important;
    color: #33475b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
    overflow: visible !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td.ledger-age-cell.is-warning { background: #fde047 !important; color: #422006 !important; }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td.ledger-age-cell.is-danger { background: #dc2626 !important; color: #ffffff !important; }
  /* 3行目：管理番号・仕入値・購入日（入力欄。上に小さな見出し） */
  /* 購入日「26/01/27(火)」がいちばん長いので広めに取る */
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(5) { grid-column: 1 / 5 !important; grid-row: 3 !important; }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(7) { grid-column: 5 / 8 !important; grid-row: 3 !important; }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(1) { grid-column: 8 / 13 !important; grid-row: 3 !important; }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(5)::before,
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(7)::before,
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(1)::before,
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(3)::before {
    display: block !important;
    margin: 0 0 2px !important;
    color: #6b7c90 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(5)::before { content: "管理番号" !important; }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(7)::before { content: "仕入値" !important; }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(1)::before { content: "購入日" !important; }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(3)::before { content: "注文番号" !important; }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(7) small { display: none !important; }
  /* 4行目：注文番号。出品前の状態で空のときは出さない（売れたら入れる欄なので） */
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr:has(.ledger-status-select:is(.status-draft, .status-arrival_waiting, .status-photo_waiting, .status-upload_waiting)) > td:nth-child(3):has(.ledger-order-input:placeholder-shown) {
    display: none !important;
  }
  /* 5行目：状態と操作。指で押しやすい高さにする */
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td.ledger-actions {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 2px !important;
    overflow: visible !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td.ledger-actions select {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 4px 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td.ledger-actions button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td.ledger-actions .ledger-delete {
    margin-left: 4px !important;
  }
  /* 入力欄：iPhone で押したときに画面が拡大されないよう 16px にする */
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border: 1px solid #d3dde8 !important;
    border-radius: 8px !important;
    background: #f7f9fc !important;
    color: #10243a !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td input::placeholder {
    color: #9aa8b8 !important;
    font-size: 14px !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #listingLedger#listingLedger > tr > td.ledger-empty {
    grid-column: 1 / -1 !important;
    white-space: normal !important;
    font-size: 14px !important;
  }

  /* ---------- 出品台帳：上の操作 ---------- */
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-head-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-search-input {
    grid-column: 1 / -1 !important;
    height: 42px !important;
    font-size: 16px !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-new-btn {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    font-size: 15px !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-maintenance-btn {
    min-height: 40px !important;
    height: auto !important;
    padding: 4px 6px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* 配送追跡・滞留のチップは折り返さず、横にスクロールする（枠は画面の幅に収める） */
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-toolbar-row,
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-tracking-toolbar,
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-aging-toolbar {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-tracking-actions,
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-aging-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-tracking-actions::-webkit-scrollbar,
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-aging-actions::-webkit-scrollbar {
    display: none !important;
  }
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-tracking-actions .filter-chip,
  :root body:not(.home-mode):not(.purchase-mode) #ledgerPanel#ledgerPanel .ledger-aging-actions .filter-chip {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* ---------- 編集画面 ---------- */
  /* 上の操作ボタンは折り返して全部見えるようにする（以前は右の3つが画面の外） */
  :root body.listing-editor-mode:not(#v253m) .listing-editor-toolbar {
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 6px !important;
  }
  :root body.listing-editor-mode:not(#v253m) .listing-editor-toolbar .listing-editor-actions {
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  :root body.listing-editor-mode:not(#v253m) .listing-editor-toolbar .listing-editor-actions > button {
    flex: 1 1 calc(50% - 6px) !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  /* Item Specifics・出品HTML・Condition Description は3つで1行 */
  :root body.listing-editor-mode:not(#v253m) .listing-editor-toolbar .listing-editor-actions > button:nth-of-type(n + 3) {
    flex-basis: calc(33.333% - 6px) !important;
    min-height: 36px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  /* 選択中の商品：商品名は2行まで、管理番号は切らない */
  :root body.listing-editor-mode:not(#v253m) #editorSelectedItemBar,
  :root body.listing-editor-mode:not(#v253m) #editorSelectedItemBar .editor-selected-ledger-table {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  :root body.listing-editor-mode:not(#v253m) #editorSelectedItemBar .editor-selected-ledger-row {
    height: auto !important;
    max-height: none !important;
    grid-template-rows: auto auto !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas: "title title title" "sku status date" !important;
    gap: 4px 8px !important;
    align-items: center !important;
  }
  :root body.listing-editor-mode:not(#v253m) #editorSelectedItemBar .editor-selected-ledger-row strong {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  :root body.listing-editor-mode:not(#v253m) #editorSelectedItemBar .editor-selected-ledger-row > .editor-selected-title-cell,
  :root body.listing-editor-mode:not(#v253m) #editorSelectedItemBar .editor-selected-ledger-row > .editor-selected-title-cell strong {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }
  :root body.listing-editor-mode:not(#v253m) #editorSelectedItemBar .editor-selected-ledger-row > :not(.editor-selected-title-cell),
  :root body.listing-editor-mode:not(#v253m) #editorSelectedItemBar .editor-selected-ledger-row > :not(.editor-selected-title-cell) strong {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  /* ステップの見出し：「付属・価格」が2行に割れて重なっていた */
  :root body.listing-editor-mode:not(#v253m) .step[data-step] {
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
  }
  /* 基本情報：3枚のカード（購入・商品タイプ・グレード）は縦に並べる */
  :root body.listing-editor-mode:not(#v253m) .basic-fast-grid.basic-fast-grid--setup {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  :root body.listing-editor-mode:not(#v253m) .basic-fast-grid.basic-fast-grid--setup > .basic-fast-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* 付属・価格：配送サービスの選択・利益のカード・ポリシー名がはみ出していた */
  :root body.listing-editor-mode:not(#v253m) .shipping-service-grid {
    flex-wrap: wrap !important;
  }
  :root body.listing-editor-mode:not(#v253m) .shipping-service-grid > .service-check-card {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
  }
  :root body.listing-editor-mode:not(#v253m) .profit-card.profit-card--split {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  :root body.listing-editor-mode:not(#v253m) .profit-card.profit-card--split > * {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  :root body.listing-editor-mode:not(#v253m) .policy-label-line {
    white-space: normal !important;
  }

  /* ---------- 仕入管理 ---------- */
  :root body.purchase-mode:not(#v253m) .purchase-hero {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
  }
  :root body.purchase-mode:not(#v253m) .purchase-hero-title {
    flex: 1 1 100% !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    text-align: left !important;
    transform: none !important;
  }
  :root body.purchase-mode:not(#v253m) .purchase-hero-title > * {
    font-size: inherit !important;
    letter-spacing: 0 !important;
  }
  :root body.purchase-mode:not(#v253m) .purchase-hero-title .app-version-badge {
    font-size: 11px !important;
    vertical-align: middle !important;
  }
  :root body.purchase-mode:not(#v253m) .purchase-hero-actions {
    display: flex !important;
    flex: 1 1 100% !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  :root body.purchase-mode:not(#v253m) .purchase-hero-actions > button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
  }
  /* 分類タブ（すべて・在庫あり…）と一覧タブ（監視対象・調査候補…）は折り返さず横にスクロール */
  :root body.purchase-mode:not(#v253m) .purchase-workflow-controls,
  :root body.purchase-mode:not(#v253m) .purchase-catalog-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  :root body.purchase-mode:not(#v253m) .purchase-workflow-controls::-webkit-scrollbar,
  :root body.purchase-mode:not(#v253m) .purchase-catalog-tabs::-webkit-scrollbar {
    display: none !important;
  }
  :root body.purchase-mode:not(#v253m) .purchase-workflow-controls > .purchase-workflow-mode,
  :root body.purchase-mode:not(#v253m) .purchase-catalog-tabs > .purchase-catalog-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  :root body.purchase-mode:not(#v253m) .purchase-primary-toolbar > .purchase-catalog-tabs {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  /* 「実績 18件 / 直近3か月…（実績が少なく参考値）」は折り返す（右が切れていた） */
  :root body.purchase-mode:not(#v253m) #purchaseList .purchase-overview-evidence {
    white-space: normal !important;
    overflow: visible !important;
  }
  /* カードの商品名は2行まで出す（1行だと型番が切れていた） */
  :root body.purchase-mode:not(#v253m) #purchaseList .purchase-row-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }
}

/* v271 の続き（このファイルは最後に読み込まれるので、ここに置く）：既存の列指定（台帳は section.status-grid[aria-label="summary"] の repeat(7/8)、
   編集画面は .editor-count-strip の repeat(5)）より強いセレクタで 2 列（5:3）に固定する */
@media (min-width: 801px) {
  body:not(.home-mode):not(.purchase-mode):not(.listing-editor-mode) section.status-grid[aria-label="summary"],
  body.home-mode section.status-grid[aria-label="summary"],
  body.listing-editor-mode:not(.home-mode):not(.purchase-mode) #editorCountStrip {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  body:not(.home-mode):not(.purchase-mode):not(.listing-editor-mode) section.status-grid[aria-label="summary"] > .status-group,
  body.home-mode section.status-grid[aria-label="summary"] > .status-group,
  body.listing-editor-mode:not(.home-mode):not(.purchase-mode) #editorCountStrip > .status-group {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    padding: 18px 6px 6px !important;
  }
  body:not(.home-mode):not(.purchase-mode):not(.listing-editor-mode) section.status-grid[aria-label="summary"] > .status-group--listed,
  body.home-mode section.status-grid[aria-label="summary"] > .status-group--listed,
  body.listing-editor-mode:not(.home-mode):not(.purchase-mode) #editorCountStrip > .status-group--listed {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.listing-editor-mode:not(.home-mode):not(.purchase-mode) #editorCountStrip > .status-group {
    padding: 14px 4px 4px !important;
    min-height: 0 !important;
    font-size: inherit !important;
  }
  body.listing-editor-mode:not(.home-mode):not(.purchase-mode) #editorCountStrip > .status-group > .editor-count-chip {
    min-height: 34px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
}
@media (min-width: 801px) and (max-width: 900px) {
  /* 801〜900px は枠を外して 1 列に流す（上の max-width:900 と同じ扱い） */
  body:not(.home-mode):not(.purchase-mode):not(.listing-editor-mode) section.status-grid[aria-label="summary"],
  body.home-mode section.status-grid[aria-label="summary"],
  body.listing-editor-mode:not(.home-mode):not(.purchase-mode) #editorCountStrip {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  body:not(.home-mode):not(.purchase-mode):not(.listing-editor-mode) section.status-grid[aria-label="summary"] > .status-group,
  body.home-mode section.status-grid[aria-label="summary"] > .status-group,
  body.listing-editor-mode:not(.home-mode):not(.purchase-mode) #editorCountStrip > .status-group {
    display: contents !important;
  }
}

/* v276（10/15 ユーザー）：出品台帳の列幅。購入日・注文番号・状態・操作を狭くして、商品名に幅を回す（PC 幅）。
   ledger-edit-hotfix.css の listing-ledger-mode の指定（9 列目 262px など）より後に読まれるので、同じ強さのセレクタで上書きする */
@media (min-width: 901px) {
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-table :is(th, td):nth-child(1) { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-table :is(th, td):nth-child(2) { width: 92px !important; min-width: 92px !important; max-width: 92px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-table :is(th, td):nth-child(3) { width: 104px !important; min-width: 104px !important; max-width: 104px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-table :is(th, td):nth-child(4) { width: auto !important; min-width: 260px !important; max-width: none !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-table :is(th, td):nth-child(5) { width: 86px !important; min-width: 86px !important; max-width: 86px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-table :is(th, td):nth-child(6) { width: 118px !important; min-width: 118px !important; max-width: 118px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-table :is(th, td):nth-child(7) { width: 70px !important; min-width: 70px !important; max-width: 70px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-table :is(th, td):nth-child(8) { width: 64px !important; min-width: 64px !important; max-width: 64px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-table :is(th, td):nth-child(9) { width: 218px !important; min-width: 218px !important; max-width: 218px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-date-input { width: 90px !important; min-width: 0 !important; max-width: 90px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel .ledger-order-input { width: 94px !important; min-width: 0 !important; max-width: 94px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel td.ledger-row-controls { white-space: nowrap !important; padding-inline: 4px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel td.ledger-row-controls.ledger-actions { gap: 4px !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel #listingLedger .ledger-status-select { flex: 0 0 92px !important; width: 92px !important; min-width: 92px !important; max-width: 92px !important; margin: 0 !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel td.ledger-row-controls button { flex: 0 0 36px !important; min-width: 36px !important; width: 36px !important; max-width: 36px !important; padding: 4px 0 !important; font-size: 12px !important; margin: 0 !important; text-align: center !important; }
  html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel td.ledger-row-controls .ledger-edit, html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel td.ledger-row-controls .ledger-clone, html body.listing-ledger-mode:not(.home-mode):not(.purchase-mode) #ledgerPanel td.ledger-row-controls .ledger-delete { flex: 0 0 36px !important; min-width: 36px !important; width: 36px !important; max-width: 36px !important; }
}

/* v277（10/15）：在庫ラベルの範囲はチェックボックス（複数選択）。まとめて選ぶボタンはチェックの並びに小さく置く */
.stock-label-dialog .stock-label-scope .stock-label-preset {
  padding: 4px 10px !important;
  font-size: 12px !important;
  min-height: 0 !important;
  border-radius: 999px !important;
}