/* cb2b 受注機能A スタイル。PC=マトリクス表 / モバイル=色別サイズカード（単一DOM＋メディアクエリ）。 */
:root {
  --fg: #1c2530;
  --muted: #6b7684;
  --line: #d7dde5;
  --accent: #1f6feb;
  --warn: #c0392b;
  --ok: #1e7e34;
  --bg-soft: #f5f7fa;
  /* 画像サイズは実物を見て調整するため1箇所に集約（単位4）。 */
  --card-min: 180px;      /* 商品グリッドのカード下限幅（列数はこれで自動決定） */
  --thumb-matrix-head: 90px; /* マトリクスヘッダの小サムネイル（視覚確認用） */
  --thumb-matrix: 550px;  /* 最下部の M画像（横幅=原寸550px。幅不足は max-width:100% で縮小） */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--fg);
  line-height: 1.5;
  background: #fff;
}
.container { max-width: 960px; margin: 0 auto; padding: 16px 20px 64px; }
h1 { font-size: 1.4rem; margin: 0.2em 0; }
h2 { font-size: 1.1rem; margin: 1.4em 0 0.4em; border-left: 4px solid var(--accent); padding-left: 8px; }
.note, .crumb { color: var(--muted); font-size: 0.9rem; }
.crumb a { color: var(--accent); text-decoration: none; }
a { color: var(--accent); }

/* 得意先ピッカー */
.card-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.card-list a {
  display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; background: var(--bg-soft);
}
.card-list a:hover { border-color: var(--accent); }

/* 一覧テーブル */
.table-wrap { overflow-x: auto; }
table.list { border-collapse: collapse; width: 100%; }
table.list th, table.list td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; font-size: 0.92rem; }
table.list thead th { background: var(--bg-soft); color: var(--muted); font-weight: 600; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.78rem; border: 1px solid var(--line); }
.badge.method-1 { background: #eef6ff; color: #1554b0; border-color: #cfe2ff; }
.badge.method-2 { background: #fff5e9; color: #a15a00; border-color: #ffe0b8; }
.badge-service { background: #eef6ff; color: #1554b0; border-color: #cfe2ff; align-self: flex-start; }

.btn {
  display: inline-block; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; font-size: 0.9rem;
}
.btn:hover { filter: brightness(1.05); }

input.qty {
  width: 64px; padding: 4px 6px; font-size: 0.95rem; text-align: right;
  border: 1px solid var(--line); border-radius: 5px;
}
.unit { margin-left: 6px; color: var(--muted); font-size: 0.85rem; }

.btn-outline { background: #fff; color: var(--accent); }
.btn-outline:hover { background: var(--bg-soft); filter: none; }

/* ===== 商品画像（グリッドカード / マトリクスM画像 / プレースホルダー） ===== */
.thumb { display: block; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.thumb-matrix-head { width: var(--thumb-matrix-head); max-width: 100%; height: auto; }
.thumb-matrix-head.thumb-empty { width: var(--thumb-matrix-head); max-width: 100%; aspect-ratio: 5 / 6; height: auto; font-size: 0.55rem; }
.thumb-matrix { width: var(--thumb-matrix); max-width: 100%; height: auto; }
/* プレースホルダーは同寸の枠に「画像なし」（寸法を揃える）。 */
.thumb-empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--muted); background: var(--bg-soft); line-height: 1.2;
}
.thumb-matrix.thumb-empty { width: var(--thumb-matrix); max-width: 100%; aspect-ratio: 5 / 6; height: auto; font-size: 0.9rem; }

/* ===== 商品グリッド（一覧） ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: 14px;
}
.product-card {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.product-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(20, 28, 40, .10); }
/* カード画像枠: 4:5 の固定比で切り抜きの縦横バラつきを吸収。 */
.thumb-card { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 6px; }
.thumb-card.thumb-empty { width: 100%; height: auto; aspect-ratio: 4 / 5; font-size: 0.8rem; }
/* 役務カード: 商品カードと同寸法・同グリッド。画像枠の中身とバッジで区別する。
   「画像なし」プレースホルダー（灰地）と紛れないよう、地はアクセント淡色。 */
.service-card:hover { border-color: var(--accent); }
.thumb-service {
  display: flex; align-items: center; justify-content: center;
  background: #eef6ff; border-color: #cfe2ff; color: #1554b0;
  font-size: 2.6rem; line-height: 1;
}
.card-hinban { font-weight: 700; font-size: 1rem; }
.card-hinmei {
  font-size: 0.82rem; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* マトリクスのヘッダ（M画像＋テキストを横並び） */
#prod-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 0.2em 0 0.4em; }
#prod-head-text { flex: 1 1 auto; min-width: 0; }
#prod-head-text h1 { margin-top: 0; }
#prod-thumb { flex: 0 0 auto; }
#size-chart { margin: 4px 0 12px; }
#size-chart:empty { margin: 0; }
/* 最下部の M画像（原寸550px・max-width:100%）。画像なし品番は JS が空のまま＝非表示。 */
#prod-img-full { margin-top: 22px; }
#prod-img-full:empty { margin: 0; }

/* ===== S画像モーダル（素のJSのみ） ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 28, 40, 0.7);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay[hidden] { display: none; }
.modal-body {
  position: relative; background: #fff; border-radius: 10px; padding: 14px;
  max-width: 95vw; max-height: 92vh; overflow: auto;
}
.modal-close {
  position: absolute; top: 6px; right: 8px; z-index: 1;
  width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--line);
  background: #fff; color: var(--fg); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--bg-soft); }
.modal-img { display: block; width: min(1000px, 92vw); height: auto; }
.modal-note { color: var(--muted); padding: 24px; }

/* ===== マトリクス（PC: 表） ===== */
table.matrix { border-collapse: collapse; width: 100%; min-width: 520px; }
table.matrix th, table.matrix td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; vertical-align: middle; }
table.matrix thead th { background: var(--bg-soft); color: var(--muted); font-weight: 600; white-space: nowrap; }
table.matrix th.color { text-align: left; background: #fafbfc; white-space: nowrap; font-weight: 600; }
table.matrix td.cell .price { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
table.matrix td.cell.empty { background: repeating-linear-gradient(45deg, #fff, #fff 5px, #f4f6f8 5px, #f4f6f8 10px); }

/* サマリー */
.summary { margin-top: 16px; padding: 12px 14px; background: var(--bg-soft); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.summary strong { font-size: 1.15rem; }
.minlot { color: var(--muted); }
.minlot.warn { color: var(--warn); font-weight: 600; }
.validate.ok { color: var(--ok); font-weight: 600; }
.validate.ng { color: var(--warn); font-weight: 600; }

/* ===== 役務セクション（マトリクス下部） =====
   確認バー（.summary）は塗りあり。役務は白地＋上罫線にして、
   「商品の確認バーはここで終わり」が視覚的に切れるようにする。 */
#services-sec { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--line); }
#services-sec[hidden] { display: none; }
.sec-head { margin: 0 0 4px; font-size: 1.05rem; }
.svc-total { margin-top: 12px; color: var(--fg); }
.svc-total strong { font-size: 1.15rem; }

/* ===== カート ===== */
.cart-msg { color: var(--ok); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 10px; }
.cart-msg a { margin-left: 0; }
.cart-msg a.btn { color: #fff; }   /* ボタン化した「カートを見る」は白文字を維持 */
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

.cart-group { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.cart-group-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.cart-group-title { font-weight: 700; font-size: 1.02rem; }
.cart-group-actions { display: flex; gap: 12px; align-items: center; }
.cart-link { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.cart-del { border: 0; background: none; color: var(--warn); cursor: pointer; font-size: 0.9rem; padding: 0; }
.cart-del:hover { text-decoration: underline; }
table.cart-detail th.num, table.cart-detail td.num { text-align: right; white-space: nowrap; }
/* .table-wrap 内の明細テーブルは狭幅で潰さず横スクロールに逃がす（完了画面の7列など） */
.table-wrap > table.cart-detail { min-width: 440px; }
.cart-subtotal { margin-top: 8px; text-align: right; color: var(--fg); }
.cart-total { margin-top: 8px; padding: 12px 14px; background: var(--bg-soft); border-radius: 8px; text-align: right; line-height: 1.7; }
.cart-grand { font-size: 1.1rem; margin-top: 4px; }
.cart-grand strong { font-size: 1.3rem; }
.cart-ops { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* ===== 注文確認・完了 ===== */
.field { display: block; margin: 14px 0; font-weight: 600; }
.field input { display: block; margin-top: 4px; width: 100%; max-width: 380px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 1rem; font-weight: 400; }
.req { color: var(--warn); font-size: 0.78rem; margin-left: 6px; }
/* 全角40字が概ね見渡せる幅（狭いと「短く書け」の圧になる）。1em≒全角1字。 */
.note-input { width: 100%; max-width: 42em; }
.field input.note-input { max-width: 42em; }
.note-counter { display: inline-block; margin-left: 8px; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.note-counter.over { color: var(--warn); }
.order-form { margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--line); }
.svc-confirm-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.svc-confirm-head { font-weight: 600; margin-bottom: 6px; }
.svc-note-label { display: block; font-size: 0.85rem; color: var(--muted); }
.svc-note-label .note-input { margin-top: 3px; }
#order-error:empty { display: none; }
.order-done { margin: 8px 0 20px; padding: 16px; background: var(--bg-soft); border-radius: 8px; text-align: center; }
.order-no { font-size: 1.1rem; }
.order-no strong { font-size: 1.7rem; letter-spacing: 0.08em; color: var(--accent); }

/* ===== ログイン ===== */
.login-container { max-width: 420px; }
.login-form { margin-top: 16px; }
.login-form .field input { max-width: 100%; }
.check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 0.92rem; }
.check input { width: auto; }
.login-form .btn { width: 100%; margin-top: 8px; padding: 10px; font-size: 1rem; }
#login-error:empty { display: none; }
/* ログアウト直後の情報メッセージ（エラー枠と同じ場所・情報系の色） */
.validate.info { color: var(--accent); font-weight: 600; }
.page-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.text-link { color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.text-link:hover { color: var(--accent); text-decoration: underline; }

/* ===== モバイル: 色別サイズテーブル（表を色ごとのカードへ変形） ===== */
@media (max-width: 640px) {
  table.matrix { min-width: 0; border: 0; }
  table.matrix thead { display: none; }               /* サイズ見出し行は隠す（各セルにラベル付与） */
  table.matrix tbody, table.matrix tr, table.matrix th, table.matrix td { display: block; }
  table.matrix tr.color-row { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; padding: 6px 8px; }
  table.matrix th.color { border: 0; padding: 4px 4px 8px; font-size: 1.02rem; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  table.matrix td.cell { border: 0; display: flex; align-items: center; justify-content: space-between; padding: 5px 4px; text-align: left; }
  table.matrix td.cell::before { content: attr(data-size); font-weight: 600; color: var(--muted); min-width: 3.5em; }
  table.matrix td.cell .price { display: inline; margin: 0 0 0 8px; }
  table.matrix td.cell.empty { display: none; }        /* 非存在SKUはモバイルでは非表示 */
  input.qty { width: 72px; }

  /* ヘッダの M画像＋テキストは縦積み。画像はやや小さめ。 */
  /* ヘッダは base で wrap 済み。画像は原寸(550px)を上限に max-width:100% で縦積み時も画面幅に収める。 */
  #prod-head { gap: 10px; }
  .thumb-matrix, .thumb-matrix.thumb-empty { width: var(--thumb-matrix); max-width: 100%; }
}