/* ===========================================================================
   /iphone/used/ — 中古の状態別ページ(U3-2 / 2026-09-22)

   土台は capacity.css → hub.css。ここは **差分だけ**。
   ソフトカード(薄いグレーの地 --paper に白い角丸カード --card + 柔らかい影)を守る。
   色はすべて :root の変数を経由する(ハードコードしない)。
   =========================================================================== */

/* 状態へのページ内リンク。ハブのシリーズタブと同じ形だが、文字が「開封済」「中古A」と
   幅がまちまちなので、数字用の固定幅を外して内容に合わせる。390px で 2 行に折り返す。 */
.used-tabs {
  flex-wrap: wrap;
  gap: 6px;
}

.used-tabs__tab {
  /*
   * ⚠️ `.top-tabs__tab` は `flex: 1 1 0`(数字の 1〜6 を等分する形)。
   * ここは「開封済」「損傷」など幅がまちまちなので **内容の幅で置いて折り返す**。
   * `flex: 1 1 0` のままにすると、gap(6px × 5)がはみ出しに乗って
   * **390px で 3px 横スクロール**する(2026-09-22 に design/0916/verify.mjs が検出)。
   */
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/*
 * 価格の注記(.cap-caveat)を main の直下に置くと、左右の余白が無く画面の端に付く
 * (容量ページでは余白のある器の中にあるので top.css の margin: 10px 2px 0 で足りていた)。
 * 2026-09-24 に damaged の CSS を配線したとき 390px で見つけた。used にも同じ形で出ていた。
 * 左右は冒頭文(.hub-lede)と同じ 18px / 28px にそろえる。
 */
.used-main > .cap-caveat {
  margin: 10px 0 0;
  padding: 0 18px;
}

@media (min-width: 769px) {
  .used-main > .cap-caveat { padding-inline: 28px; }
}

/* 段の節。見出しの右に「N 容量 · N 社」。 */
.used-sec__n {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* 段の定義(手続き定義)。見出しのすぐ下に本文サイズより少し小さく。畳まない。 */
.used-sec__def {
  margin: 6px 2px 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* 行: 機種容量 / 業者・段名・社数 / 価格。
   Zen Kaku は等幅数字を持たないので価格は右寄せで受ける(CLAUDE.md)。 */
.used-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name  px"
    "meta  px";
  align-items: center;
  gap: 2px 12px;
}

.used-row__name {
  grid-area: name;
}

.used-row__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.used-row__px {
  grid-area: px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  justify-self: end;
  text-align: right;
  min-width: 96px;   /* 等幅数字が無いので幅を確保して桁を揃える */
}

/* 価格の下の「N 社中の上限」(C-09 の 6。2026-09-24)。業者名の直後にあると店舗数に読めたので価格の側へ */
.used-row__of {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

/* 業者が実際に使っている段の呼び名。applesama の区分と違うことがあるので、
   「これは業者の言葉である」と分かる見た目にする(薄い地の小さなチップ)。 */
.used-row__tier {
  padding: 1px 6px;
  border-radius: var(--r-chip);
  background: var(--card-2);
  font-size: 11.5px;
  color: var(--muted);
}

/* 行ごとの取得時刻と業者の更新日(C-13 / §3b #17。2026-09-24)。業者・社数と同じ行に小さく */
.used-row__when {
  font-size: 11.5px;
  white-space: nowrap;
}

/* 段の見出しの「MM-DD HH:MM 時点」(段ごとの最新の取得時刻) */
.used-sec__at {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* 狭い幅では見出しの後ろで折り返すので、最初から 2 段目に置く(折り返した行頭に 8px の字下げが残らないように) */
@media (max-width: 600px) {
  .used-sec__at {
    display: block;
    margin: 2px 0 0;
  }
}

/* ---- 機種(シリーズ)へのジャンプ・畳み・節の足(2026-09-24 §3b #18 / #19・C-09 の 1・2・4)---- */

/* 「機種へ(中古A の一覧)」。状態のタブとジャンプの間に置く小さな見出し。段の名前だけ濃く */
.used-jump__lbl {
  margin: 12px 0 0;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.used-jump__lbl span {
  font-weight: 700;
  color: var(--ink);
}

/* シリーズのタブはハブの .top-tabs / .hub-tabs そのまま(数字を等分)。見出しとの間だけ詰める */
.used-jump.hub-tabs { margin-top: 6px; }

/* ジャンプで着いた行(シリーズの最初の行)。価格順の中で場所が分かるように地を変える */
.used-row { scroll-margin-top: 12px; }
.used-row:target { background: var(--card-2); }

/* 一覧の足: 「残り N 件を見る」(左)と「↑ 状態・機種を選ぶ」(右)。損傷の全行への案内は 1 行まるごと */
.used-sec__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  margin-top: 2px;
}

/* ボタンの見た目はハブの .hub-fold__btn。左の余白はカードの行(16px)にそろえる */
.used-fold,
.used-fold.hub-fold__btn { padding-inline: 16px; }
.used-fold.is-closed .hub-fold__chev { transform: none; }

.used-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.used-sec__more {
  flex: 1 1 100%;
  margin: 12px 0 0;
  padding: 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
}

.used-sec__more a {
  display: inline-block;
  padding-block: 4px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--rule);
}

@media (hover: hover) {
  .used-back:hover { color: var(--ink); }
}

/* 769px 以上は h1・見出しの行(.hub-meta)と同じく左右の余白 0(main が 28px を持つ)。タブのカードの左端にそろう */
@media (min-width: 769px) {
  .used-jump__lbl { padding-inline: 0; font-size: 13px; }
}

/* 損傷の節の頭の打消し表示(/iphone/damaged/。故障の価格が準備中であること)。畳まない・本文サイズ・--ink */
.used-sec__notice {
  margin: 0 2px 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.used-sec__notice b { font-weight: 700; }

/* 1 段も出せないときの案内。数字を出さない。 */
.used-empty {
  color: var(--ink);
}

/* ---- 区分の定義 ---- */

/* 上限価格から下がる主な条件(#deductions。価格の注記のリンクの着地。2026-09-24 UX-08)。
   定義表より前に置く短い箇条書き。地の色はカードの 2 段目で、表と区別する。 */
.used-ded {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--r-cell);
  background: var(--card-2);
  scroll-margin-top: 72px;   /* 追従ヘッダーの下に着地させる */
}

.used-ded .used-def__h3 {
  margin-bottom: 6px;
}

.used-ded__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
}

.used-ded__list li + li {
  margin-top: 4px;
}

.used-ded__list a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.used-def__note,
.used-def__foot {
  margin: 0 2px 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.used-def__foot {
  margin-top: 14px;
  margin-bottom: 0;
}

.used-def__list {
  margin: 0 0 20px;
}

.used-def__row {
  padding: 10px 0;
  border-top: 1px solid var(--hairline-soft);
}

.used-def__row:first-child {
  border-top: 0;
}

.used-def__dt {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

.used-def__dd {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.used-def__h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* 表は幅が要るので、狭い画面では **この表だけ** 横スクロールさせる
   (ページ本体は横スクロールさせない)。 */
.used-def__tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /*
   * ⚠️ **min-width: 0 が要る。** 親が格子(grid)だと既定が `min-width: auto` で、
   * 中身(min-width 680px の表)がそのまま器を押し広げ、`overflow-x: auto` が効かない。
   * 2026-09-22 に 390px で **本体ごと 3px 横スクロール**した(design/0916/verify.mjs が検出)。
   */
  min-width: 0;
  max-width: 100%;
}

.used-def__table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
}

.used-def__table th,
.used-def__table td {
  padding: 8px 10px;
  border-top: 1px solid var(--hairline-soft);
  text-align: left;
  vertical-align: top;
}

.used-def__table thead th {
  border-top: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.used-def__shop {
  white-space: nowrap;
  font-weight: 700;
}

/* 表の行見出しの業者リンク。指で押せる高さを少し稼ぐ(行は詰まっているので 44px までは取らない)。
   業者ページが無い業者は文字だけの span(C-20)。同じ余白を付けて、リンクのある行と高さをそろえる(2026-09-24) */
.used-def__shop a,
.used-def__shop > span {
  display: inline-block;
  padding-block: 4px;
}

.used-def__pairs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.used-def__pair {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.used-def__tier {
  color: var(--ink);
}

.used-def__arrow {
  color: var(--muted);
}

.used-def__code {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.used-def__src a {
  display: inline-block;
  padding-block: 4px;   /* 指で押せる高さを少し稼ぐ(design/0916/verify.mjs の 44px 検査) */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.used-def__nosrc,
.used-def__checked,
.used-def__srcnote {
  display: block;
  color: var(--muted);
}

.used-def__checked {
  font-size: 11.5px;
}

.used-def__srcnote {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.6;
}

/* 700px 以上: 行を 1 段にして、業者と社数を価格の手前に並べる */
@media (min-width: 700px) {
  .used-row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "name meta px";
    gap: 12px;
  }

  .used-row__meta {
    justify-content: flex-end;
  }
}