/* =========================================================
   カシャリ UI v2
   - 配色は現行を維持
   - 視認性 / 可読性 / モバイル操作性を最優先
   - 既存のクラス名はすべて維持
   ========================================================= */

/* ----- 1. デザイントークン（ウェブオク ラグジュアリー / ゴールド×オニキス） ----- */
:root{
  /* ゴールド系 */
  --gold-1:#FBEFB6;  /* シャンパン */
  --gold-2:#E7C65A;  /* 明るい金 */
  --gold-3:#C9A227;  /* リッチゴールド */
  --gold-4:#A8801C;  /* 深い金・ブロンズ */
  --gold-line:rgba(201,162,39,.30);
  --gold-grad:linear-gradient(135deg,#FBEFB6,#E7C65A 38%,#C9A227 70%,#E7C65A 88%,#A8801C);
  --onyx:#15131A;    /* 漆黒（やや暖） */
  --ink:#221F2A;     /* 本文 */
  --crimson:#D6322B; /* 価格・LIVEアクセント */
  --wash:#FFFBF0;    /* 淡い金の地 */
  --wash-2:#FEF6E2;

  /* 既存クラス互換のためのエイリアス（名称は維持しつつ配色を金×墨へ） */
  --primary:#C9A227;
  --primary-2:#A8801C;
  --primary-3:#9A7B1A;            /* リンク等 */
  --primary-3-soft:rgba(201,162,39,.12);
  --primary-soft:rgba(201,162,39,.10);
  --primary-2-soft:rgba(231,198,90,.20);
  --success:#1f8f5f;
  --success-soft:rgba(31,143,95,.12);
  --danger:#D6322B;
  --danger-soft:rgba(214,50,43,.10);
  --warning:#C9821B;
  --warning-soft:rgba(201,130,27,.14);

  /* 中性色 */
  --bg:#FFFBF0;
  --bg-subtle:#FDF4DE;
  --surface:#ffffff;
  --surface-2:#FFFCF4;
  --text:#221F2A;
  --text-2:#4A4452;
  --muted:#7C7568;
  --line:#ECE4CF;
  --line-strong:#DCCFA8;
  --border:#ECE4CF;              /* 旧コンポーネントが参照する境界線 */

  /* タイポグラフィ */
  --font-sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-disp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --font-num:"Oswald","Helvetica Neue",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* 形 */
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --radius-pill:999px;

  /* 影（金の柔らかい陰影） */
  --shadow:0 1px 2px rgba(20,18,24,.04), 0 10px 28px rgba(201,162,39,.10);
  --shadow-sm:0 1px 2px rgba(20,18,24,.06);
  --shadow-lg:0 6px 18px rgba(20,18,24,.08), 0 24px 60px rgba(201,162,39,.18);

  /* レイアウト */
  --container:1180px;
  --topbar-h:56px;
  --mobile-nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 12px)}
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  font-size:15px;
  letter-spacing:.01em;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--primary-3);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* タイポ */
h1,h2,h3,h4{margin:0;line-height:1.35;color:var(--text);font-weight:700;letter-spacing:.005em}
h1{font-size:1.6rem}
h2{font-size:1.3rem}
h3{font-size:1.08rem}
h4{font-size:.98rem}
p{margin:0;line-height:1.75}
.small{font-size:.86rem;color:var(--muted);line-height:1.7}
.muted{color:var(--muted)}

/* ----- 2. トップバー ----- */
.topbar{
  position:sticky;top:0;z-index:30;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--container);margin:0 auto;
  padding:7px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:var(--topbar-h);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);flex:none;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-logo{
  width:38px;height:38px;border-radius:10px;object-fit:cover;
  box-shadow:var(--shadow-sm);flex:none;
}
.brand-title{font-size:.98rem;font-weight:800;letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.brand-sub{font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.3;white-space:nowrap}

/* デスクトップナビ（1行固定・はみ出しは横スクロールで吸収して改行させない） */
.nav{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;justify-content:flex-end;min-width:0;position:relative;overflow:visible}
.nav a{
  color:var(--text-2);font-weight:600;font-size:.85rem;
  padding:6px 9px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid transparent;white-space:nowrap;flex:none;
  transition:background .15s, border-color .15s, color .15s;
}
.nav a:hover{background:var(--bg-subtle);text-decoration:none}
.nav a.is-active{
  background:var(--primary-3-soft);
  color:var(--primary-3);
  border-color:rgba(21,94,239,.18);
}
.user-chip{
  padding:5px 10px;border-radius:var(--radius-pill);
  background:var(--bg-subtle);color:var(--text-2);
  font-size:.78rem;font-weight:600;white-space:nowrap;flex:none;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;
}
.nav-alert-link{position:relative;display:inline-flex;align-items:center}
.nav-alert-dot{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;margin-left:8px;padding:0 6px;
  border-radius:var(--radius-pill);background:var(--danger);color:#fff;
  font-size:.72rem;font-weight:700;line-height:1;
}

/* ===== アカウントメニュー / ハンバーガー ===== */
.nav-acc{position:relative;display:inline-flex;align-items:center;flex:none;margin-left:4px}
.nav-acc-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  padding:4px 9px 4px 5px;border-radius:var(--radius-pill);
  background:var(--bg-subtle);border:1px solid var(--line);color:var(--text-2);
  font-size:.82rem;font-weight:700;white-space:nowrap;max-width:230px;
  transition:background .15s,border-color .15s;
}
.nav-acc-btn:hover{background:var(--primary-3-soft);border-color:rgba(201,162,39,.3)}
.nav-acc-av{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--gold-grad,linear-gradient(135deg,#E7C65A,#C9A227));color:#3a2c08;font-weight:800;font-size:.85rem;
}
.nav-acc-name{overflow:hidden;text-overflow:ellipsis;max-width:120px}
.nav-acc-caret{font-size:.66rem;color:var(--muted);transition:transform .2s}
.nav-acc.open .nav-acc-caret{transform:rotate(180deg)}
.nav-burger{
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  width:42px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  cursor:pointer;position:relative;flex:none;
}
.nav-burger span{display:block;width:18px;height:2px;background:var(--text-2);border-radius:2px;transition:.25s}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-burger-dot{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:1.5px solid var(--surface)}
/* ドロップダウン */
.nav-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:232px;max-width:calc(100vw - 28px);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:7px;display:none;
}
.nav-menu.open{display:block;animation:navMenuIn .16s ease}
@keyframes navMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav-menu .nav-menu-link{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border-radius:10px;border:none;background:transparent;
  color:var(--text);font-size:.9rem;font-weight:600;white-space:nowrap;text-decoration:none;
}
.nav-menu .nav-menu-link:hover{background:var(--bg-subtle);text-decoration:none}
.nav-menu .nav-menu-link.is-active{background:var(--primary-3-soft);color:var(--primary-3)}
.nav-menu-ic{width:20px;text-align:center;font-size:1rem;flex:none}
.nav-menu-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--danger);color:#fff;font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.nav-menu .nav-menu-link.is-logout{color:var(--crimson,#D6322B)}
.nav-menu .nav-menu-link.is-logout:hover{background:rgba(214,50,43,.08)}
.nav-menu .nav-menu-link.is-cta{color:var(--primary-3);font-weight:700}
.nav-menu-sep{height:1px;background:var(--line);margin:6px 4px}
.nav-menu .only-mobile{display:none}
.nav-guest-cta{background:var(--gold-grad,linear-gradient(135deg,#E7C65A,#C9A227))!important;color:#3a2c08!important;font-weight:700}

/* ----- 3. メインコンテナ / ページヘッド ----- */
.container{
  max-width:var(--container);margin:0 auto;
  padding:12px 16px calc(40px + env(safe-area-inset-bottom));
}
.page-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.page-head h1,.page-head h2,.page-head h3{margin:0}
.page-head p{margin:6px 0 0;color:var(--muted);font-size:.92rem;line-height:1.7}
.section-title{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.section-title h2,.section-title h3{margin:0}
.section-title p{margin:4px 0 0;color:var(--muted);font-size:.88rem;line-height:1.7}

/* ----- 4. カード ----- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:14px;
}
.card.soft{background:var(--surface-2)}
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.feature-card,.role-card,.stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}
.role-card h3,.feature-card h3,.stat-card h3{margin:0 0 6px;font-size:1rem}
.feature-card p,.role-card p,.stat-card p{margin:0;color:var(--muted);line-height:1.7;font-size:.9rem}

/* ----- 5. ヒーロー (ランディングのみ) ----- */
.hero{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  padding:28px 24px;margin-bottom:20px;
  background:linear-gradient(135deg, #0e2235 0%, #156073 50%, #1fc6c4 100%);
  color:#fff;
}
.hero::before{
  content:"";position:absolute;
  top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, rgba(140,217,79,.35), transparent 65%);
  pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:24px;
  align-items:center;position:relative;z-index:1;
}
.hero h1,.hero h2{
  margin:10px 0 12px;
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  line-height:1.2;color:#fff;
}
.hero p{font-size:.98rem;line-height:1.8;color:rgba(255,255,255,.92);margin:0}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.hero-badges .badge{
  background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.24);
}
.hero-card,.glass-card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:16px;
  backdrop-filter:blur(8px);
}
.hero-card{padding:18px;text-align:center}
.hero-card img{max-width:140px;margin:0 auto 12px}
.hero-card .small{color:rgba(255,255,255,.85)}
.glass-card .kpi{color:#fff !important}
.glass-card .small{color:rgba(255,255,255,.86)}

/* ヒーロー内のグリッド（KPI用）はモバイルでも横並びを維持 */
.hero .card-grid{grid-template-columns:repeat(3,1fr);gap:10px}
.hero .glass-card{padding:14px;text-align:center}

/* ----- 6. KPI ----- */
.kpi{
  font-size:1.9rem;font-weight:800;line-height:1.1;
  color:var(--primary-3);
  font-feature-settings:"tnum";
  margin:0 0 4px;
}
.kpi-label{color:var(--muted);font-size:.86rem}
.contact-kpi{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;margin-bottom:14px;
}
.contact-card{
  padding:16px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.contact-card .kpi{margin-bottom:2px}
.card-link{display:block;text-decoration:none;color:inherit}
.card-link:hover{text-decoration:none}
.card-link:hover .contact-card,
.card-link:hover .pickup-card{border-color:var(--primary);transform:translateY(-1px);transition:.15s}

/* ----- 7. ピックアップ / 注目カード ----- */
.pickup-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;margin-bottom:16px;
}
.pickup-card{
  position:relative;
  padding:16px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--primary-3);
}
.pickup-card.is-alert{border-left-color:var(--danger)}
.pickup-card.is-warm{border-left-color:var(--warning)}
.pickup-label{
  display:inline-block;padding:4px 10px;
  border-radius:var(--radius-pill);font-size:.76rem;font-weight:700;
  background:var(--primary-3-soft);color:var(--primary-3);
  letter-spacing:.04em;
}
.pickup-card.is-alert .pickup-label{background:var(--danger-soft);color:var(--danger)}
.pickup-card.is-warm .pickup-label{background:var(--warning-soft);color:var(--warning)}
.pickup-card h3{margin:10px 0 6px;font-size:1.1rem}
.pickup-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.7}
.pickup-card .actions{margin-top:12px}

/* ----- 8. バッジ / ピル ----- */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--bg-subtle);color:var(--text-2);
  font-size:.76rem;font-weight:700;
  border:1px solid transparent;
}
.notification-tag{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--primary-3-soft);color:var(--primary-3);
  font-size:.76rem;font-weight:700;letter-spacing:.02em;
}
.tab-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tab-chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text-2);
  border:1px solid var(--line);font-size:.88rem;font-weight:600;
  text-decoration:none;
}
.tab-chip:hover{text-decoration:none;border-color:var(--line-strong)}
.tab-chip.is-active{
  background:var(--primary-3-soft);color:var(--primary-3);
  border-color:rgba(21,94,239,.20);
}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.keyword-chip,.tag-chip,.status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:var(--surface);
  font-size:.84rem;font-weight:600;color:var(--text-2);
}
.keyword-chip form{display:inline}
.keyword-chip button{
  min-height:26px;padding:0 10px;font-size:.74rem;
  margin-left:4px;border-radius:var(--radius-pill);
}

/* ----- 9. ボタン ----- */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 18px;
  border:none;border-radius:var(--radius-pill);
  cursor:pointer;font-weight:700;font-size:.92rem;
  background:var(--primary);color:#fff;
  font-family:inherit;letter-spacing:.02em;
  transition:transform .12s, background-color .15s, box-shadow .15s, opacity .15s;
  box-shadow:0 1px 2px rgba(31,198,196,.30);
}
button:hover,.btn:hover{background:#1ab6b4;text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-secondary{
  background:var(--surface);color:var(--text-2);
  border:1px solid var(--line-strong);box-shadow:none;
}
.btn-secondary:hover{background:var(--bg-subtle);border-color:var(--text-2)}
.btn-danger{
  background:var(--danger);color:#fff;
  box-shadow:0 1px 2px rgba(198,58,84,.25);
}
.btn-danger:hover{background:#b73149}
.btn-success,button.btn-success{
  background:var(--success);color:#fff;
  box-shadow:0 1px 2px rgba(20,148,93,.25);
}
.btn-success:hover{background:#127a4d}
.btn-dark{
  background:#14304a;color:#fff;
  box-shadow:0 1px 2px rgba(20,48,74,.30);
}
.btn-dark:hover{background:#0e2538}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions form{display:inline}

/* ----- 10. フォーム ----- */
.form-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
label{
  display:block;margin:0 0 6px;
  font-weight:700;font-size:.86rem;color:var(--text-2);
}
input,select,textarea{
  width:100%;padding:11px 12px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);
  font-family:inherit;font-size:15px;line-height:1.5;
  outline:none;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
input[type=checkbox],input[type=radio]{
  width:18px;height:18px;padding:0;
  border:1px solid var(--line-strong);border-radius:4px;
  background:transparent;accent-color:var(--primary-3);
  vertical-align:middle;
}
input[type=radio]{border-radius:50%}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary-3);
  box-shadow:0 0 0 3px var(--primary-3-soft);
}
input::placeholder,textarea::placeholder{color:#a1adc1}
input:read-only,input[readonly]{background:var(--bg-subtle);color:var(--text-2)}
textarea{resize:vertical;min-height:110px;line-height:1.7}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23697791' d='M5 8l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:18px;padding-right:34px}

.inline-field{display:flex;gap:8px;align-items:stretch}
.inline-field input{flex:1}
.inline-field .btn,.inline-field button{min-height:44px}
.postal-result{margin-top:8px;font-size:.84rem;color:var(--muted)}

/* チェックボックス並びの行 (同意確認など) */
.consent-boxes{display:grid;gap:10px}
.consent-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);
  line-height:1.7;font-size:.92rem;color:var(--text-2);
}
.consent-row input{margin-top:2px;flex:none}

/* ----- 11. テーブル (デスクトップ) ----- */
.table-wrap{
  overflow:auto;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
}
.table{width:100%;border-collapse:collapse;min-width:680px}
.table th,.table td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top;font-size:.9rem;
}
.table th{
  background:var(--surface-2);color:var(--text-2);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1px solid var(--line);
}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--surface-2)}
.table .actions{gap:6px}
.table .actions .btn,.table .actions button{
  min-height:34px;padding:0 12px;font-size:.84rem;
}

/* ----- 12. お知らせ / 通知 ----- */
.notice-stack{display:grid;gap:10px}
.notice-item{
  padding:14px 16px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.notice-item.unread{
  background:var(--surface);border-color:rgba(21,94,239,.30);
  border-left:3px solid var(--primary-3);
}
.notice-item h4{margin:0 0 4px;font-size:.96rem}
.notice-item p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.7}
.notice-meta{
  display:flex;justify-content:space-between;gap:10px;
  align-items:center;flex-wrap:wrap;margin-top:10px;
  font-size:.8rem;color:var(--muted);
}
.notice-item-link{display:block;color:inherit;text-decoration:none}
.notice-item-link:hover{text-decoration:none}
.notice-item-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center;
}

/* ----- 13. 情報行 (info row / rich summary) ----- */
.rich-summary{
  padding:14px 16px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--line);
}
.info-list{display:grid;gap:0}
.info-row{
  display:flex;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.info-row:first-child{padding-top:0}
.info-row:last-child{border-bottom:none;padding-bottom:0}
.info-row strong{
  display:block;font-size:.84rem;color:var(--text-2);
  font-weight:700;margin-bottom:3px;
}
.info-row span,.info-row div{
  color:var(--text);line-height:1.7;font-size:.92rem;
}

/* ----- 14. 詳細グリッド / KV ----- */
.rich-detail-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;margin-top:14px;
}
.rich-detail-card{
  padding:16px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.rich-detail-card h3{margin:0 0 8px;font-size:.96rem}
.rich-detail-card ul{
  margin:0;padding-left:18px;color:var(--text-2);
  line-height:1.85;font-size:.9rem;
}
.detail-kv{
  padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);
}
.detail-kv strong{
  display:block;margin-bottom:6px;font-size:.82rem;
  color:var(--muted);font-weight:700;letter-spacing:.02em;
}
.detail-kv div{font-weight:600;color:var(--text);font-size:.94rem;line-height:1.6}
.detail-kv small{
  display:block;margin-top:6px;
  color:var(--muted);font-size:.82rem;line-height:1.65;
}
.contact-detail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.contact-detail-hero{
  display:grid;grid-template-columns:120px 1fr;gap:14px;
  align-items:start;
}
.contact-detail-hero img{
  width:120px;height:120px;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);
}
.contact-detail-summary{display:grid;gap:8px}
.contact-detail-card{margin-top:14px}
.contact-meta-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;margin-top:12px;
}
.address-note{
  color:var(--muted);font-size:.84rem;line-height:1.7;margin-top:6px;
}

/* ----- 15. プロフィール ----- */
.profile-summary-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
}
.profile-summary-card{
  padding:14px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.profile-summary-card h3{margin:0 0 6px;font-size:.86rem;color:var(--muted);font-weight:700;letter-spacing:.02em}
.profile-summary-card p{font-size:.94rem;color:var(--text);line-height:1.6;margin:0}

/* ----- 16. 認証 (ログイン / 新規登録) ----- */
.auth-shell{
  display:grid;grid-template-columns:1.1fr .9fr;gap:18px;
  align-items:stretch;
}
.auth-card{padding:24px}
.auth-visual{
  min-height:100%;
  background:linear-gradient(155deg, #0e2235, #1fc6c4 60%, #8cd94f);
  color:#fff;border-radius:var(--radius);
  padding:24px;position:relative;overflow:hidden;
}
.auth-visual h2{color:#fff;margin:12px 0 10px}
.auth-visual p{color:rgba(255,255,255,.92);font-size:.92rem;line-height:1.75}
.auth-visual img{max-width:120px;margin:18px 0 14px}
.auth-visual ul{
  padding-left:18px;margin:10px 0 0;
  line-height:1.9;color:rgba(255,255,255,.92);font-size:.92rem;
}
.auth-visual .badge{
  background:rgba(255,255,255,.18);color:#fff;
  border:1px solid rgba(255,255,255,.24);
}

/* ----- 17. 商品画像 ----- */
.image-thumb{
  width:100%;max-width:240px;aspect-ratio:1/1;
  object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);
}
.image-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}

/* ----- 18. 出品作成 (upload stage / preview / ai panel) ----- */
.upload-stage{
  display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.2fr);
  gap:14px;align-items:stretch;
}
.upload-stage-box,
.ai-draft-panel{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}
.upload-stage-box label{font-size:.94rem}
.preview-grid-large{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-top:14px;
}
.preview-slot{
  position:relative;min-height:170px;
  border-radius:var(--radius);
  border:1px dashed var(--line-strong);
  background:var(--surface);
  overflow:hidden;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:10px;
}
.preview-slot img{
  width:100%;height:120px;object-fit:cover;
  border-radius:var(--radius-sm);
}
.preview-slot-number{
  position:absolute;top:8px;left:8px;
  min-width:24px;height:24px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;
  background:var(--primary-3);color:#fff;
  padding:0 7px;
}
.preview-slot-remove{
  position:absolute;top:6px;right:6px;
  width:26px;height:26px;min-height:26px;
  padding:0;border-radius:var(--radius-pill);
  background:rgba(14,31,51,.78);color:#fff;
  border:none;font-size:.86rem;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:background-color .15s;
  z-index:2;
}
.preview-slot-remove:hover{background:var(--danger)}
.preview-slot-remove:active{transform:scale(0.95)}
.preview-placeholder{
  color:var(--muted);font-size:.86rem;font-weight:600;
}
.preview-meta{
  width:100%;margin-top:8px;
  font-size:.78rem;color:var(--muted);
  line-height:1.45;word-break:break-word;
}

/* ----- 19. 買取業者 登録パネル ----- */
.buyer-required-panel{
  margin-top:16px;padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface-2);
}
.buyer-register-grid{margin-top:8px}
.register-file-preview{
  margin-top:8px;min-height:120px;max-width:260px;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  background:var(--surface);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:10px;color:var(--muted);
  text-align:center;overflow:hidden;font-size:.86rem;
}
.register-file-preview img{
  width:100%;max-height:150px;object-fit:contain;
  border-radius:var(--radius-sm);background:var(--surface-2);
}
.register-file-name{
  margin-top:6px;font-size:.82rem;color:var(--text);word-break:break-word;
}
.register-file-icon{
  width:54px;height:54px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:.84rem;font-weight:800;color:#fff;
  background:var(--primary-3);
}
.buyer-type-panel{margin-top:14px;padding-top:2px}

/* ----- 20. AI待機オーバーレイ ----- */
.ai-wait-overlay[hidden]{display:none !important}
.ai-wait-overlay{
  position:fixed;inset:0;z-index:1200;
  background:rgba(14,31,51,.40);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.ai-wait-card{
  width:min(440px,100%);
  border-radius:var(--radius-lg);
  padding:24px 22px;
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  text-align:center;
  border:1px solid var(--line);
}
.ai-spinner-ring{
  width:56px;height:56px;margin:0 auto 14px;
  border-radius:50%;
  border:5px solid var(--primary-3-soft);
  border-top-color:var(--primary-3);
  animation:spin360 .9s linear infinite;
}
.ai-wait-title{font-size:1.1rem;font-weight:700;color:var(--text)}
.ai-wait-text{margin-top:8px;color:var(--muted);line-height:1.7;font-size:.92rem}
.ai-wait-dots{
  margin-top:14px;display:flex;justify-content:center;gap:6px;
}
.ai-wait-dots span{
  width:8px;height:8px;border-radius:50%;
  background:var(--primary-3);
  animation:dotBounce 1.1s ease-in-out infinite;
}
.ai-wait-dots span:nth-child(2){animation-delay:.12s}
.ai-wait-dots span:nth-child(3){animation-delay:.24s}
body.waiting{overflow:hidden}
.badge-loading{position:relative;padding-left:30px}
.badge-loading::before{
  content:'';position:absolute;left:10px;top:50%;
  width:10px;height:10px;margin-top:-5px;border-radius:50%;
  border:2px solid var(--primary-3-soft);
  border-top-color:var(--primary-3);
  animation:spin360 .8s linear infinite;
}

/* ----- 21. オファー比較画面 (利益サマリー / メモ) ----- */
.offer-profit-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;margin-bottom:16px;
}
.offer-profit-summary .stat-card{
  background:var(--surface);border:1px solid var(--line);
  text-align:left;padding:14px;
}
.offer-profit-summary .kpi{
  color:var(--primary-3);font-size:1.5rem;
}
.mini-note-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;margin-top:12px;
}
.mini-note{
  padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;
  color:var(--muted);font-size:.86rem;line-height:1.7;
}
.mini-note strong{color:var(--text-2);font-size:.82rem;font-weight:700}

/* ----- 22. ブックマーク ----- */
.bookmark-btn.is-active{
  background:#ffb12a;color:#3b1f00;
  box-shadow:0 1px 2px rgba(255,177,42,.30);
}
.bookmark-btn.is-active:hover{background:#f0a51a}
.bookmark-meta{
  display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;margin-top:8px;
}
.bookmark-meta .small{margin:0}

/* ----- 23. レイアウト分割 ----- */
.split-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}

/* ----- 24. コンタクト ステージ カード ----- */
.contact-stage-card{
  padding:16px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
  margin-bottom:14px;
  border-left:3px solid var(--primary-3);
}
.contact-stage-card.is-action{
  border-left-color:var(--warning);
  background:linear-gradient(180deg, var(--warning-soft), var(--surface) 60%);
}
.contact-stage-card.is-waiting{
  border-left-color:var(--primary-3);
  background:linear-gradient(180deg, var(--primary-3-soft), var(--surface) 60%);
}
.contact-stage-card.is-success{
  border-left-color:var(--success);
  background:linear-gradient(180deg, var(--success-soft), var(--surface) 60%);
}
.contact-stage-head{
  display:flex;justify-content:space-between;gap:12px;
  align-items:flex-start;flex-wrap:wrap;
}
.contact-stage-head h3{margin:8px 0 4px;font-size:1.05rem}
.contact-stage-head p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.7}
.contact-stage-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--line-strong);
  font-weight:700;font-size:.82rem;color:var(--text-2);
}

/* ----- 25. 訪問予定フォーカスカード ----- */
.visit-focus-card{
  margin-top:14px;padding:18px;
  border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.visit-focus-head{
  display:flex;justify-content:space-between;gap:14px;
  align-items:flex-start;flex-wrap:wrap;margin-bottom:12px;
}
.visit-focus-head h3{margin:6px 0 4px;font-size:1.05rem}
.visit-focus-head p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.7}
.visit-focus-badges{display:flex;gap:6px;flex-wrap:wrap}
.visit-focus-hero{
  display:grid;grid-template-columns:120px 1fr;gap:14px;
  align-items:stretch;margin-bottom:14px;
}
.visit-focus-hero.is-noimage{grid-template-columns:1fr}
.visit-focus-media img{
  width:120px;height:120px;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);
}
.visit-summary-stack{display:grid;gap:10px}
.schedule-emphasis{
  padding:14px 16px;border-radius:var(--radius);
  background:var(--primary-3-soft);
  border:1px solid rgba(21,94,239,.16);
}
.schedule-emphasis .label{
  font-size:.78rem;color:var(--primary-3);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
.schedule-emphasis .value{
  margin-top:6px;font-size:1.2rem;font-weight:800;
  line-height:1.4;color:var(--text);
}
.schedule-emphasis small{
  display:block;margin-top:6px;
  color:var(--text-2);line-height:1.65;font-size:.84rem;
}
.quick-note{
  padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px dashed var(--line-strong);
  color:var(--muted);line-height:1.65;font-size:.86rem;
}

/* ワークフロー ステップ */
.workflow-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:8px;
}
.workflow-step{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);
  color:var(--muted);font-weight:600;font-size:.84rem;
}
.workflow-step.is-active{
  border-color:rgba(217,119,6,.30);
  background:var(--warning-soft);color:#8a5b00;
}
.workflow-step.is-done{
  border-color:rgba(20,148,93,.30);
  background:var(--success-soft);color:#0f6845;
}
.workflow-dot{
  width:10px;height:10px;border-radius:var(--radius-pill);
  background:var(--line-strong);flex:none;
}
.workflow-step.is-active .workflow-dot{background:var(--warning)}
.workflow-step.is-done .workflow-dot{background:var(--success)}

.visit-focus-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
}
.visit-focus-kv{
  padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);
}
.visit-focus-kv strong{
  display:block;margin-bottom:6px;font-size:.78rem;
  color:var(--muted);font-weight:700;letter-spacing:.02em;
}
.visit-focus-kv div{font-weight:700;color:var(--text);line-height:1.55;font-size:.94rem}
.visit-focus-kv small{
  display:block;margin-top:6px;color:var(--muted);
  line-height:1.65;font-size:.82rem;
}

.visit-form-shell{padding:18px}
.visit-preset-list{display:flex;gap:8px;flex-wrap:wrap}
.visit-preset{
  min-height:auto;padding:9px 14px;
  border-radius:var(--radius-pill);
  background:var(--surface);color:var(--primary-3);
  border:1px solid rgba(21,94,239,.20);box-shadow:none;
  font-size:.86rem;
}
.visit-preset:hover{background:var(--primary-3-soft);color:var(--primary-3)}

.visit-preference-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;margin-top:6px;
}
.visit-preference-card{
  padding:12px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
}
.visit-preference-card h4{margin:0 0 8px;font-size:.92rem;color:var(--text-2)}
.visit-preference-card .small{margin-top:6px}
.visit-slot-extra[hidden]{display:none !important}

/* ----- 26. フラッシュ / アラート / 空状態 ----- */
.flash{
  padding:12px 14px;border-radius:var(--radius);
  margin-bottom:12px;font-weight:600;font-size:.92rem;
}
.flash-success{
  background:var(--success-soft);color:#0f6845;
  border:1px solid rgba(20,148,93,.20);
}
.flash-error{
  background:var(--danger-soft);color:#8d1e35;
  border:1px solid rgba(198,58,84,.20);
}
.flash-warn{
  background:var(--warning-soft);color:#8a5b00;
  border:1px solid rgba(201,130,27,.28);
}
.alert{
  padding:12px 14px;border-radius:var(--radius);
  margin-bottom:12px;font-size:.92rem;
}
.alert-error{
  background:var(--danger-soft);color:#8d1e35;
  border:1px solid rgba(198,58,84,.20);
}
.empty{
  padding:24px 18px;border-radius:var(--radius);
  border:1px dashed var(--line-strong);text-align:center;
  color:var(--muted);background:var(--surface-2);font-size:.92rem;
}
.notify-help{
  margin-top:8px;padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--success-soft);color:#0f6845;
  line-height:1.6;font-size:.84rem;
}

/* ----- 27. 価格・住所・小要素 ----- */
.price-highlight{
  font-size:1.02rem;font-weight:800;color:var(--text);
  font-feature-settings:"tnum";
}
.contact-stage-card .badge,
.visit-focus-badges .badge{font-size:.74rem}

/* prose */
.prose-like p{line-height:1.8}

/* ----- 28. チャットボット (控えめに) ----- */
.kashari-bot{
  position:fixed;right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:50;
  display:flex;align-items:flex-end;gap:10px;
}
/* デスクトップではトップバー右下、モバイルでは下部ナビの上に避ける */
.kashari-bot-panel{
  width:min(360px,calc(100vw - 40px));
  max-height:min(560px,calc(100vh - 110px));
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.kashari-bot-head{
  display:flex;justify-content:space-between;align-items:center;flex:none;
  padding:11px 14px;
  background:linear-gradient(120deg,var(--primary-3-soft),var(--surface));
  border-bottom:1px solid var(--line);
}
.kashari-bot-head-main{display:flex;align-items:center;gap:10px;min-width:0}
.kashari-bot-head-main img{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:none}
.kashari-bot-head-main strong{font-size:.94rem;color:var(--text);display:block;line-height:1.2}
.kashari-bot-status{font-size:.74rem;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px}
.kbot-dot{width:7px;height:7px;border-radius:50%;background:#34c759;display:inline-block;box-shadow:0 0 0 2px rgba(52,199,89,.18)}
.kashari-bot-head-actions{display:flex;align-items:center;gap:4px;flex:none}
.kashari-bot-iconbtn{
  width:32px;height:32px;border-radius:9px;border:none;cursor:pointer;background:transparent;
  font-size:1rem;line-height:1;color:var(--text-2);display:grid;place-items:center;transition:background .15s;
}
.kashari-bot-iconbtn:hover{background:rgba(0,0,0,.05)}
.kashari-bot-iconbtn.is-on{filter:none}
.kashari-bot-iconbtn:disabled{opacity:.5;cursor:default}
/* 通知バナー（クリック可能） */
.kashari-bot-push{
  flex:none;display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;cursor:pointer;
  padding:10px 14px;border:none;border-bottom:1px solid var(--line);
  background:var(--warning-soft);color:#8a5b00;font-size:.82rem;line-height:1.5;font-family:inherit;
}
.kashari-bot-push[hidden]{display:none}
.kbot-push-ic{flex:none;font-size:1rem}
.kbot-push-tx b{font-weight:700}
/* 会話フィード（スクロール領域） */
.kashari-bot-feed{
  flex:1 1 auto;min-height:120px;overflow-y:auto;
  padding:12px 14px;display:flex;flex-direction:column;gap:8px;
  background:var(--surface-2);
}
.kbot-msg{
  max-width:88%;padding:9px 12px;border-radius:14px;font-size:.86rem;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;
}
.kbot-msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--text)}
.kbot-msg.user{align-self:flex-end;background:var(--primary-3-soft);color:var(--primary-3);font-weight:600;border-bottom-right-radius:4px}
.kbot-msg.is-typing{color:var(--muted);font-weight:400;letter-spacing:.1em}
/* フィード内のクリック可能チップ（リンク/項目移動） */
.kbot-links{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:100%}
.kbot-chip{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:inherit;
  padding:6px 11px;border-radius:var(--radius-pill);font-size:.8rem;font-weight:600;
  background:var(--surface);color:var(--primary-3);border:1px solid rgba(21,94,239,.28);
  text-decoration:none;transition:background .15s,border-color .15s;
}
.kbot-chip:hover{background:var(--primary-3-soft);text-decoration:none}
.kbot-chip-ic{font-size:.92rem}
/* 質問候補チップ */
.kashari-bot-suggest{
  flex:none;display:flex;gap:6px;overflow-x:auto;padding:9px 12px;border-top:1px solid var(--line);
  background:var(--surface);scrollbar-width:none;
}
.kashari-bot-suggest::-webkit-scrollbar{display:none}
.kbot-suggest-chip{
  flex:none;cursor:pointer;font-family:inherit;white-space:nowrap;
  padding:6px 12px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:600;
  background:var(--surface-2);color:var(--text-2);border:1px solid var(--line);transition:background .15s,color .15s,border-color .15s;
}
.kbot-suggest-chip:hover{background:var(--primary-3-soft);color:var(--primary-3);border-color:rgba(201,162,39,.3)}
/* チャット入力 */
.kashari-bot-input{flex:none;display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface)}
.kashari-bot-input input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:10px 14px;font-family:inherit;font-size:.86rem;outline:none;background:var(--surface-2);color:var(--text);
}
.kashari-bot-input input:focus{border-color:var(--primary-3);box-shadow:0 0 0 3px var(--primary-3-soft);background:var(--surface)}
.kashari-bot-input button{
  flex:none;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:var(--gold-grad,var(--primary-3));color:#3a2c08;font-size:1rem;display:grid;place-items:center;font-weight:700;
}
.kashari-bot-input button:hover{filter:brightness(1.04)}
/* ランチャーの未読バッジ */
.kashari-bot-badge{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--radius-pill);
  background:var(--danger);color:#fff;font-size:.66rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--surface);
}
.kashari-bot-badge[hidden]{display:none}
/* 項目移動時のハイライト */
.kbot-flash{animation:kbotFieldFlash 1.6s ease}
@keyframes kbotFieldFlash{0%,100%{box-shadow:none}30%,70%{box-shadow:0 0 0 3px var(--primary-3-soft),0 0 0 1px var(--primary-3)}}
.kashari-bot-launcher,.kashari-bot-toggle{border:none;cursor:pointer;font-family:inherit}
.kashari-bot-launcher{
  position:relative;
  width:52px;height:52px;border-radius:var(--radius-pill);
  padding:6px;background:var(--surface);
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
}
.kashari-bot-launcher img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
}
.kashari-bot-toggle{
  width:30px;height:30px;border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text-2);
  box-shadow:none;border:1px solid var(--line);
  font-size:1rem;line-height:1;
}
.kashari-bot.is-collapsed .kashari-bot-panel{display:none}

/* ----- 29. モバイル下部ナビ (新規追加) ----- */
.mobile-nav{display:none}

/* ----- 30. レスポンシブ調整 ----- */
@media (max-width: 920px){
  .auth-shell{grid-template-columns:1fr}
  .auth-visual{order:-1;min-height:auto;padding:18px}
  .auth-visual img{max-width:84px;margin:10px 0}
  .split-layout{grid-template-columns:1fr}
  .contact-detail-grid{grid-template-columns:1fr}
  .contact-detail-hero{grid-template-columns:1fr}
  .contact-detail-hero img{width:100%;height:auto;max-height:240px}
  .upload-stage{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .hero{padding:24px 20px}
  .visit-focus-hero{grid-template-columns:1fr}
  .visit-focus-media img{width:100%;height:auto;max-height:240px}
}

/* タブレット〜小型ノート：上部ナビが収まらない幅では下部ナビへ集約して改行/崩れを防ぐ */
@media (max-width: 960px){
  /* インラインの主要リンク・アカウントボタンは隠し、ハンバーガーに集約 */
  .nav-primary{display:none}
  .nav-acc-btn{display:none}
  .nav-guest-login,.nav-guest-cta{display:none}
  .user-chip{display:none}
  .nav-burger{display:inline-flex}
  .nav-menu .only-mobile{display:flex}
  .container{padding-bottom:calc(var(--mobile-nav-h) + 24px + env(safe-area-inset-bottom))}

  .mobile-nav{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around;align-items:stretch;
    box-shadow:0 -2px 8px rgba(15,32,53,.04);
  }
  .mobile-nav-item{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;
    padding:6px 4px;text-decoration:none;
    color:var(--muted);font-size:.7rem;font-weight:600;
    border-radius:var(--radius-sm);min-height:52px;line-height:1.2;position:relative;
  }
  .mobile-nav-item:hover{text-decoration:none}
  .mobile-nav-item.is-active{color:var(--primary-3)}
  .mobile-nav-item.is-active .mobile-nav-icon{background:var(--primary-3-soft)}
  .mobile-nav-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:8px;font-size:1.1rem;color:inherit;
  }
  .mobile-nav-dot{
    position:absolute;top:4px;right:50%;transform:translateX(20px);
    min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);
    background:var(--danger);color:#fff;font-size:.66rem;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;line-height:1;
  }
}

@media (max-width: 640px){
  body{font-size:14.5px}
  h1{font-size:1.4rem}
  h2{font-size:1.15rem}
  h3{font-size:1rem}
  .container{padding:14px 12px calc(var(--mobile-nav-h) + 24px + env(safe-area-inset-bottom))}
  .topbar-inner{padding:8px 12px;min-height:54px;gap:10px}
  .brand-logo{width:34px;height:34px}
  .brand-title{font-size:.92rem}
  .brand-sub{display:none}

  .card{padding:14px;border-radius:var(--radius)}
  .hero{padding:22px 18px;border-radius:var(--radius)}
  .hero h1,.hero h2{font-size:1.5rem}
  .hero .card-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .hero .glass-card{padding:10px}
  .hero .glass-card .kpi{font-size:1.4rem}
  .hero .glass-card .small{font-size:.74rem}

  .page-head{flex-direction:column;align-items:stretch}
  .page-head .actions{justify-content:flex-start}
  .actions{gap:6px}
  .actions .btn,.actions button{flex:1 1 auto;min-width:fit-content}

  .card-grid,.grid{grid-template-columns:1fr;gap:10px}
  .pickup-strip{grid-template-columns:1fr}
  .contact-kpi{grid-template-columns:repeat(3,1fr);gap:8px}
  .contact-kpi .contact-card{padding:12px 10px;text-align:center}
  .contact-kpi .kpi{font-size:1.4rem}
  .contact-kpi .small{font-size:.78rem}
  .profile-summary-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .offer-profit-summary{grid-template-columns:1fr}
  .contact-meta-grid{grid-template-columns:1fr}
  .visit-focus-grid{grid-template-columns:1fr}
  .workflow-steps{grid-template-columns:repeat(2,1fr)}
  .preview-grid-large{grid-template-columns:repeat(2,1fr)}
  .image-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .rich-detail-grid{grid-template-columns:1fr}

  /* テーブルをカード化 (スマホでは横スクロールから縦カードへ) */
  .table-wrap{
    overflow:visible;border:none;background:transparent;
  }
  .table{
    min-width:0;border-collapse:separate;border-spacing:0 8px;
    display:block;
  }
  .table thead{display:none}
  .table tbody{display:block}
  .table tr{
    display:block;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius);
    padding:12px;margin-bottom:0;
  }
  .table td{
    display:flex;justify-content:space-between;gap:10px;
    padding:6px 0;border-bottom:1px solid var(--line);
    font-size:.88rem;text-align:right;
  }
  .table td::before{
    content:attr(data-label);
    font-weight:700;color:var(--muted);font-size:.78rem;
    text-align:left;flex:none;letter-spacing:.02em;
  }
  .table td:last-child{border-bottom:none}
  .table td:only-child{justify-content:flex-start}
  .table td .actions{justify-content:flex-end;flex-wrap:wrap}
  .table tr:hover td{background:transparent}

  /* 認証画面はモバイルで縦並び */
  .auth-visual{padding:16px}
  .auth-visual h2{font-size:1.2rem;margin:8px 0 6px}
  .auth-visual p{font-size:.86rem}

  /* チャットボットはモバイル下部ナビの上に避ける */
  .kashari-bot{
    right:12px;
    bottom:calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-bottom));
  }
  .kashari-bot-launcher{width:46px;height:46px}

  /* 入力 UI: ボタンを大きく */
  button,.btn{min-height:46px;padding:0 16px}
  .table .actions .btn,.table .actions button{min-height:38px}

  /* モバイル下部ナビ */
  .mobile-nav{
    display:flex;
    position:fixed;left:0;right:0;
    bottom:0;
    z-index:40;
    background:var(--surface);
    border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around;align-items:stretch;
    box-shadow:0 -2px 8px rgba(15,32,53,.04);
  }
  .mobile-nav-item{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;
    padding:6px 4px;text-decoration:none;
    color:var(--muted);font-size:.7rem;font-weight:600;
    border-radius:var(--radius-sm);
    min-height:52px;line-height:1.2;
    position:relative;
  }
  .mobile-nav-item:hover{text-decoration:none}
  .mobile-nav-item.is-active{color:var(--primary-3)}
  .mobile-nav-item.is-active .mobile-nav-icon{
    background:var(--primary-3-soft);
  }
  .mobile-nav-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:8px;
    font-size:1.1rem;color:inherit;
  }
  .mobile-nav-dot{
    position:absolute;top:4px;right:50%;
    transform:translateX(20px);
    min-width:18px;height:18px;padding:0 5px;
    border-radius:var(--radius-pill);
    background:var(--danger);color:#fff;
    font-size:.66rem;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;line-height:1;
  }
}

/* ----- 31. 小さなスマホ ----- */
@media (max-width: 380px){
  .hero .card-grid{grid-template-columns:1fr 1fr}
  .hero .card-grid .glass-card:last-child{grid-column:1 / -1}
  .contact-kpi{grid-template-columns:1fr 1fr}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn,.actions button{width:100%}
  .inline-actions{flex-direction:row}
}

/* ----- 32. フッター ----- */
.footer{
  max-width:var(--container);margin:0 auto;
  padding:0 16px 28px;color:var(--muted);font-size:.82rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 18px;
}
.footer .footer-links{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;
  font-size:.82rem;
}
.footer .footer-links a{
  color:var(--muted);text-decoration:none;
  padding:2px 4px;border-radius:4px;
  transition:color .15s ease,background .15s ease;
}
.footer .footer-links a:hover{
  color:var(--primary-deep,#0E8579);
  background:rgba(31,198,196,.10);
  text-decoration:none;
}
.footer .footer-links span{color:var(--rule,#E3E7EE)}
@media (max-width:560px){
  .footer{justify-content:center;text-align:center}
}

/* ----- 33. アニメーション ----- */
@keyframes spin360{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes dotBounce{
  0%,80%,100%{transform:translateY(0);opacity:.45}
  40%{transform:translateY(-6px);opacity:1}
}
@keyframes kbotPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

/* ----- 34. その他のページ専用 (旧スタイルとの互換) ----- */
.contact-stage-card .badge{background:rgba(255,255,255,.7)}
.visit-focus-card .badge{background:var(--bg-subtle)}

/* ----- 34a. AI フィールド補完 (出品編集画面) ----- */
.ai-fill-banner{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;padding:14px 16px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, var(--primary-3-soft) 0%, var(--primary-soft) 100%);
  border:1px solid rgba(21,94,239,.18);
}
.ai-fill-banner-main{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
}
.ai-fill-banner-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--radius-pill);
  background:var(--primary-3);color:#fff;
  font-size:18px;flex:none;
}
.ai-fill-banner-title{
  font-size:1.02rem;font-weight:700;color:var(--text);
}
.ai-fill-banner-actions{flex:none}
.ai-fill-banner-actions .btn{min-height:42px}

.ai-fill-field{position:relative}
.ai-fill-label{
  display:flex;align-items:center;gap:8px;
}
label .ai-fill-btn{margin-left:auto}

.ai-fill-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;height:24px;width:auto;min-width:24px;
  padding:0 8px;
  border-radius:var(--radius-pill);
  background:var(--primary-3-soft);color:var(--primary-3);
  border:1px solid rgba(21,94,239,.20);
  font-size:.78rem;font-weight:700;line-height:1;
  cursor:pointer;font-family:inherit;
  box-shadow:none;letter-spacing:.02em;
  transition:background-color .15s, transform .12s;
}
.ai-fill-btn:hover{background:var(--primary-3);color:#fff}
.ai-fill-btn:active{transform:scale(0.95)}
.ai-fill-btn:disabled{opacity:.6;cursor:not-allowed}
.ai-fill-btn.is-loading{
  background:var(--primary-3);color:#fff;
  position:relative;
}
.ai-fill-btn.is-loading::after{
  content:"";position:absolute;
  width:10px;height:10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin360 .8s linear infinite;
  margin-left:4px;
}
input.ai-just-filled,textarea.ai-just-filled{
  background-color:rgba(31,198,196,.16) !important;
  transition:background-color 1.2s ease;
}

@media (max-width: 640px){
  .ai-fill-banner{padding:12px;gap:10px}
  .ai-fill-banner-actions{width:100%}
  .ai-fill-banner-actions .btn{width:100%}
}

/* ----- 34b. AI処理中パネル (汎用) ----- */
.ai-loading-panel{
  margin-top:14px;padding:18px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, var(--surface) 0%, var(--primary-3-soft) 200%);
  border:1px solid rgba(21,94,239,.18);
  display:none;
  animation:aiPanelIn .25s ease;
}
.ai-loading-panel.is-visible{display:block}
.ai-loading-panel.is-error{
  background:linear-gradient(135deg, var(--surface) 0%, var(--danger-soft) 200%);
  border-color:rgba(198,58,84,.22);
}
.ai-loading-panel.is-success{
  background:linear-gradient(135deg, var(--surface) 0%, var(--success-soft) 200%);
  border-color:rgba(20,148,93,.22);
}
.ai-loading-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:12px;flex-wrap:wrap;
}
.ai-loading-spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--primary-3-soft);
  border-top-color:var(--primary-3);
  animation:spin360 .9s linear infinite;
  flex:none;
}
.ai-loading-panel.is-success .ai-loading-spinner{
  border:3px solid var(--success);background:var(--success);
  animation:none;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:800;
}
.ai-loading-panel.is-success .ai-loading-spinner::before{content:"✓"}
.ai-loading-panel.is-error .ai-loading-spinner{
  border:3px solid var(--danger);background:var(--danger);
  animation:none;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:800;
}
.ai-loading-panel.is-error .ai-loading-spinner::before{content:"!"}
.ai-loading-status{flex:1;min-width:0}
.ai-loading-title{
  font-size:.96rem;font-weight:700;color:var(--text);
  line-height:1.4;margin:0 0 2px;
}
.ai-loading-stage{
  font-size:.84rem;color:var(--muted);line-height:1.5;
  margin:0;
}
.ai-loading-time{
  font-size:.78rem;color:var(--text-2);font-weight:600;
  display:flex;gap:12px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.ai-loading-time strong{color:var(--text);font-weight:800}
.ai-loading-bar{
  position:relative;height:6px;border-radius:var(--radius-pill);
  background:var(--bg-subtle);overflow:hidden;margin-top:8px;
}
.ai-loading-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--primary), var(--primary-3));
  width:0%;
  transition:width .4s ease;
}
.ai-loading-panel.is-success .ai-loading-bar-fill{
  background:linear-gradient(90deg, var(--success), var(--primary-2));
  width:100% !important;
}
.ai-loading-panel.is-error .ai-loading-bar-fill{
  background:linear-gradient(90deg, var(--danger), #e07090);
}
.ai-loading-tips{
  display:grid;grid-template-columns:1fr;gap:6px;
  margin-top:10px;font-size:.8rem;color:var(--text-2);
  line-height:1.6;
}
.ai-loading-tip{
  padding:8px 10px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6);border:1px solid var(--line);
  display:flex;align-items:flex-start;gap:6px;
}
.ai-loading-tip-icon{flex:none;font-size:.9rem;line-height:1.4}
@keyframes aiPanelIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
@media (max-width: 640px){
  .ai-loading-panel{padding:14px}
  .ai-loading-time{font-size:.74rem;gap:8px}
}

/* ----- 35. 案件進捗バー (新規) ----- */
.deal-progress{
  padding:14px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--line);
  margin-top:12px;
}
.deal-progress-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.deal-progress-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:var(--radius-pill);
  background:var(--primary-3-soft);color:var(--primary-3);
  font-size:.82rem;font-weight:700;
  white-space:nowrap;
}
.deal-progress-status.is-completed{background:var(--success-soft);color:var(--success)}
.deal-progress-bar{
  position:relative;height:6px;border-radius:var(--radius-pill);
  background:var(--bg-subtle);overflow:hidden;margin-bottom:14px;
  width:100%;
}
.deal-progress-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--primary), var(--primary-3));
  transition:width .4s ease;
}
.deal-progress-bar.is-completed .deal-progress-bar-fill{
  background:linear-gradient(90deg, var(--success), var(--primary-2));
}
/* 5列のステップ表示 - flexで実装 (grid非対応環境でも崩れない) */
.deal-progress-steps{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:4px;
  width:100%;
  list-style:none;
  padding:0;
  margin:0;
}
.deal-progress-step{
  flex:1 1 0;
  min-width:0;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start;
  gap:4px;
  font-size:.72rem;
  text-align:center;
  color:var(--muted);
  font-weight:600;
  line-height:1.25;
  word-break:keep-all;
}
.deal-progress-step > span:not(.deal-progress-step-dot){
  display:block;
  width:100%;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.deal-progress-step-dot{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px;
  height:22px;
  border-radius:var(--radius-pill);
  background:var(--surface);
  border:2px solid var(--line-strong);
  font-size:.7rem;
  color:var(--muted);
  font-weight:800;
  flex:none;
  line-height:1;
  box-sizing:border-box;
}
.deal-progress-step.is-active{color:var(--primary-3)}
.deal-progress-step.is-active .deal-progress-step-dot{
  background:var(--primary-3);border-color:var(--primary-3);color:#fff;
  box-shadow:0 0 0 4px var(--primary-3-soft);
}
.deal-progress-step.is-done{color:var(--success)}
.deal-progress-step.is-done .deal-progress-step-dot{
  background:var(--success);border-color:var(--success);color:#fff;
}
@media (max-width: 640px){
  .deal-progress-step{font-size:.64rem;line-height:1.2}
  .deal-progress-step-dot{width:18px;height:18px;font-size:.6rem}
  .deal-progress-status{font-size:.74rem;padding:3px 9px}
  .deal-progress{padding:12px 10px}
}
@media (max-width: 380px){
  .deal-progress-step{font-size:.58rem}
}

/* 案件カード（ダッシュボードの進行中・完了リスト） */
.deal-card{
  padding:14px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  margin-bottom:10px;
}
.deal-card-body{
  display:flex;gap:14px;align-items:flex-start;
  margin-bottom:8px;
}
.deal-card-thumb{
  flex:0 0 96px;width:96px;height:96px;
  border-radius:var(--radius-sm);overflow:hidden;
  background:var(--bg-subtle);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.deal-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.deal-card-thumb.is-placeholder{
  color:var(--muted);font-size:.72rem;text-align:center;padding:8px;line-height:1.3;
}
.deal-card-main{flex:1 1 auto;min-width:0}
.deal-card-head{
  display:flex;justify-content:space-between;
  gap:10px;align-items:flex-start;flex-wrap:wrap;
  margin-bottom:6px;
}
.deal-card-head > div:first-child{
  flex:1 1 200px;
  min-width:0;
}
.deal-card-head .actions{
  flex:0 0 auto;
}
.deal-card-head h4{margin:0;font-size:.98rem;line-height:1.4;word-break:break-word}
.deal-card-meta{
  display:flex;gap:10px;flex-wrap:wrap;
  color:var(--muted);font-size:.84rem;margin:6px 0 0;
}
.deal-card-meta strong{color:var(--text);font-weight:700}
.deal-card.is-completed{background:var(--surface-2);opacity:.92}
.deal-card.is-completed .deal-card-head h4{color:var(--text-2)}
@media (max-width: 640px){
  .deal-card-body{flex-direction:column;gap:10px}
  .deal-card-thumb{width:100%;height:auto;aspect-ratio:16/9;flex:none}
  .deal-card-head{flex-direction:column}
  .deal-card-head .actions{width:100%;justify-content:flex-start}
}

/* 詳細フォームのチェックボックス並び: 縦の列を読みやすく */
label.consent-row{font-weight:500}

/* リンクボタンは下線抑制 */
a.btn{text-decoration:none}
a.btn:hover{text-decoration:none}

/* =========================================================
   カシャリ運営への秘匿通報 - 報告ボタン & モーダル
   ========================================================= */
.kashari-report-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;font-size:.74rem;line-height:1.4;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line-strong);
  cursor:pointer;
  transition:all .15s ease;
  margin-left:6px;vertical-align:middle;
  white-space:nowrap;
}
.kashari-report-btn:hover{
  background:var(--danger-soft);
  color:var(--danger);
  border-color:var(--danger);
}
.kashari-report-btn::before{
  content:"⚠";font-size:.78rem;line-height:1;
}

.kashari-modal-backdrop{
  position:fixed;inset:0;
  background:rgba(15,32,53,.55);
  display:none;align-items:center;justify-content:center;
  z-index:1000;padding:14px;
}
.kashari-modal-backdrop.is-open{display:flex}
.kashari-modal{
  background:var(--surface);
  border-radius:var(--radius-lg);
  width:100%;max-width:520px;
  max-height:calc(100vh - 28px);
  overflow-y:auto;
  box-shadow:var(--shadow-lg);
  padding:22px 22px 18px;
}
.kashari-modal h3{margin:0 0 4px;font-size:1.1rem;color:var(--text)}
.kashari-modal .modal-lead{
  color:var(--muted);font-size:.85rem;line-height:1.6;margin:0 0 14px;
}
.kashari-modal .modal-target{
  background:var(--bg-subtle);
  border-radius:var(--radius-sm);
  padding:10px 12px;margin-bottom:14px;
  font-size:.85rem;
}
.kashari-modal .modal-target strong{color:var(--text);display:block;margin-bottom:2px}
.kashari-modal-field{margin-bottom:12px}
.kashari-modal-field label{
  display:block;font-size:.82rem;color:var(--text-2);
  font-weight:700;margin-bottom:6px;
}
.kashari-modal-field select,
.kashari-modal-field textarea,
.kashari-modal-field input[type="text"]{
  width:100%;padding:9px 11px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  font-size:.92rem;font-family:inherit;
  background:var(--surface);
}
.kashari-modal-field textarea{
  min-height:88px;resize:vertical;line-height:1.6;
}
.kashari-modal-field .field-help{
  font-size:.76rem;color:var(--muted);margin-top:4px;
}
.kashari-modal-score{
  display:flex;gap:6px;flex-wrap:wrap;
}
.kashari-modal-score label{
  flex:1 1 0;min-width:62px;
  text-align:center;cursor:pointer;
  padding:8px 4px;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--surface);
  font-size:.78rem;color:var(--text-2);
  font-weight:600;transition:all .15s ease;
}
.kashari-modal-score label.is-selected{
  background:var(--primary-3-soft);
  border-color:var(--primary-3);
  color:var(--primary-3);
}
.kashari-modal-score input[type="radio"]{display:none}
.kashari-modal-notice{
  background:rgba(20,148,93,.06);
  border-left:3px solid var(--success);
  padding:8px 12px;border-radius:var(--radius-sm);
  font-size:.78rem;color:var(--text-2);
  margin-bottom:14px;line-height:1.6;
}
.kashari-modal-actions{
  display:flex;gap:8px;justify-content:flex-end;
  margin-top:8px;flex-wrap:wrap;
}
.kashari-modal-actions .btn{min-width:84px}
.kashari-modal-status{
  margin-top:10px;font-size:.82rem;
  padding:8px 10px;border-radius:var(--radius-sm);
  display:none;
}
.kashari-modal-status.is-error{
  display:block;background:var(--danger-soft);color:var(--danger);
}
.kashari-modal-status.is-success{
  display:block;background:var(--success-soft);color:var(--success);
}
@media (max-width: 480px){
  .kashari-modal{padding:18px 16px 14px}
  .kashari-modal-score label{font-size:.72rem;padding:7px 2px}
}

/* 管理者: 通報一覧テーブル */
.kashari-report-severity{
  display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);
  font-size:.72rem;font-weight:700;
}
.kashari-report-severity.is-high{background:var(--danger-soft);color:var(--danger)}
.kashari-report-severity.is-medium{background:var(--warning-soft);color:var(--warning)}
.kashari-report-severity.is-low{background:var(--bg-subtle);color:var(--text-2)}
.kashari-report-status{
  display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);
  font-size:.72rem;font-weight:700;background:var(--bg-subtle);color:var(--text-2);
}
.kashari-report-status.is-open{background:var(--primary-3-soft);color:var(--primary-3)}
.kashari-report-status.is-resolved{background:var(--success-soft);color:var(--success)}
.kashari-report-status.is-dismissed{background:var(--bg-subtle);color:var(--muted)}
.kashari-warning-banner{
  background:var(--danger-soft);
  border-left:4px solid var(--danger);
  padding:12px 14px;border-radius:var(--radius-sm);
  margin-bottom:14px;color:var(--text);
}
.kashari-warning-banner strong{color:var(--danger)}


/* ==========================================================================
   27. ウェブオークション 追加コンポーネント
   ========================================================================== */

/* 汎用 */
.btn-primary{background:var(--primary);color:#fff}
.btn-text{background:transparent;color:var(--primary-3);box-shadow:none;border:none;min-height:38px;padding:0 10px}
.btn-text:hover{background:var(--primary-3-soft)}
.btn-text.btn-danger{background:transparent;color:var(--danger)}
.btn-text.btn-danger:hover{background:var(--danger-soft)}
.btn-block{width:100%}
.btn-sm{min-height:34px;padding:0 12px;font-size:.82rem}
.flash-info{background:var(--primary-3-soft);color:#15489f;border:1px solid rgba(21,94,239,.20);padding:12px 14px;border-radius:var(--radius);margin-bottom:12px;font-weight:600;font-size:.92rem}
.empty-state{text-align:center;color:var(--muted);padding:28px 18px}
.empty-state p{margin:0 0 12px}
.req{display:inline-block;font-size:.7rem;color:var(--danger);background:var(--danger-soft);border-radius:var(--radius-pill);padding:1px 8px;font-style:normal;margin-left:4px;vertical-align:middle}
.page-head{margin:6px 0 18px}
.page-head h1{font-size:1.5rem;margin-bottom:4px}
.page-head .muted{font-size:.92rem}
.section-actions{margin:8px 0 22px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 12px;gap:12px}
.crumbs{color:var(--muted);margin:4px 0 14px}
.crumbs a{color:var(--primary-3)}
.badge-good{background:var(--success-soft);color:var(--success)}
.badge-warn{background:var(--warning-soft);color:var(--warning)}

/* フィールド */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.field>span,.field>legend{font-size:.86rem;font-weight:600;color:var(--text-2)}
.field input,.field select,.field textarea{width:100%}
.field-wide{grid-column:1 / -1}
.field-block{border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin:14px 0}
.field-block legend{font-size:.9rem;font-weight:700;padding:0 6px}
.check-row,.radio-row{display:flex;align-items:center;gap:8px;min-height:38px;font-size:.92rem}
.check-row input,.radio-row input{width:auto;min-height:auto}
/* ラベルのクリック範囲を「チェックボックス＋文字」の内容幅だけに限定する。
   （flex の label は既定で行幅いっぱいに広がり、枠外の離れた位置を押しても反応してしまうため） */
.check-row{width:-webkit-fit-content;width:fit-content;max-width:100%;cursor:pointer}

/* 統計カード */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:8px}
.stat-card{padding:16px 18px}
.stat-num{font-size:1.6rem;font-weight:800;color:var(--text);line-height:1.1}
.stat-sub{font-size:.9rem;color:var(--muted);font-weight:600}
/* マイページ統計カードの項目名（出品中・入札中など）：見やすいように大きく・太く表示 */
.stat-label{font-size:1.02rem;font-weight:800;color:var(--text);margin-top:6px;line-height:1.3}

/* オークションカード一覧 */
.auction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.auction-card{display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;color:inherit;transition:transform .12s, box-shadow .15s}
.auction-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,31,51,.10);text-decoration:none}
.auction-thumb{position:relative;aspect-ratio:4/3;background:var(--bg-subtle);overflow:hidden}
.auction-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.auction-thumb-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:.8rem;letter-spacing:.08em;background:var(--bg-subtle)}
.auction-timer{position:absolute;left:8px;bottom:8px;background:rgba(14,31,51,.78);color:#fff}
.auction-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.auction-title{font-size:.98rem;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;overflow-wrap:anywhere}
.auction-meta{display:flex;flex-wrap:wrap;gap:8px}
.auction-price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto}
.auction-price{font-size:1.18rem;font-weight:800;color:var(--primary-3)}
.auction-bidcount{white-space:nowrap}
.filter-card{margin-bottom:14px}

/* オークション詳細 */
.auction-detail{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.auction-detail-main{display:flex;flex-direction:column;gap:16px;min-width:0}
/* v124: 写真側と金額・入札側が別々に動いてギクシャクするため、追従（sticky）をやめて
   ページ全体で一体にスクロールする固定レイアウトに変更。 */
.auction-detail-side{display:flex;flex-direction:column;gap:16px}
.auction-gallery-main{aspect-ratio:4/3;background:var(--bg-subtle);border-radius:var(--radius);overflow:hidden}
.auction-gallery-main img{width:100%;height:100%;object-fit:contain;display:block}
.auction-gallery-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.auction-gallery-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid var(--border)}
.auction-detail-title{font-size:1.35rem;margin-bottom:8px}
.spec-list{display:flex;flex-direction:column;gap:0;margin:14px 0}
.spec-list>div{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.spec-list dt{flex:0 0 90px;color:var(--muted);font-size:.86rem;margin:0}
.spec-list dd{margin:0;font-size:.92rem}
.auction-description{white-space:normal;line-height:1.8;font-size:.94rem}
.delivery-list{margin:8px 0;padding-left:18px;line-height:1.9}
.auction-bid-card{padding:18px}
.auction-price-lg{font-size:2rem;font-weight:800;color:var(--primary-3);line-height:1.1;margin:2px 0 8px}
.auction-side-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px}
.bid-form-message{margin-top:8px;color:var(--muted)}
.bid-form-message.is-error{color:var(--danger)}

/* 出品者チップ */
.seller-chip{display:flex;align-items:center;gap:12px}
.seller-avatar{width:42px;height:42px;border-radius:50%;background:var(--primary-2-soft);color:var(--text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem}
.seller-avatar-lg{width:64px;height:64px;font-size:1.6rem}
.seller-profile-head{display:flex;align-items:center;gap:16px}
.seller-profile-name{font-size:1.3rem}

/* Q&A */
.qa-form,.qa-answer-form{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.qa-thread,.qa-admin-list{display:flex;flex-direction:column;gap:14px;list-style:none;padding:0;margin:0}
.qa-item{border-bottom:1px solid var(--border);padding-bottom:12px}
.qa-q,.qa-a{display:flex;gap:8px;align-items:flex-start;line-height:1.7;font-size:.92rem;margin:4px 0}
.qa-a{margin-left:18px;color:var(--text-2)}
.qa-tag{flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--primary-3-soft);color:var(--primary-3);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem}
.qa-tag-a{background:var(--success-soft);color:var(--success)}
.qa-time{margin-left:auto;white-space:nowrap}
.qa-admin-item{display:flex;flex-direction:column;gap:8px}
.qa-admin-head{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* リスト行（出品・取引・入札） */
.listing-rows{display:flex;flex-direction:column;gap:12px}
.listing-row{display:flex;align-items:center;gap:14px;padding:12px 14px}
.listing-row-thumb{flex:0 0 72px;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--bg-subtle)}
.listing-row-thumb img{width:100%;height:100%;object-fit:cover}
.listing-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.listing-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.listing-row-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* 通知センター */
.contacts-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.filter-tabs{display:flex;gap:4px;flex-wrap:wrap}
.filter-tabs a{padding:6px 14px;border-radius:var(--radius-pill);font-size:.86rem;font-weight:600;color:var(--text-2);background:var(--surface);border:1px solid var(--border)}
.filter-tabs a.is-active{background:var(--primary-3);color:#fff;border-color:var(--primary-3)}
.notify-list{display:flex;flex-direction:column;gap:10px}
.notify-item{display:flex;gap:12px;align-items:flex-start;padding:14px}
.notify-item.is-unread{border-left:3px solid var(--primary-3)}
.notify-item-body{flex:1;display:flex;flex-direction:column;gap:4px}
.notify-item-head{display:flex;align-items:center;gap:8px}
.notify-item-action{flex:0 0 auto}

/* 取引管理 */
.tx-list{display:flex;flex-direction:column;gap:12px}
.tx-item{display:flex;gap:16px;align-items:flex-start;padding:14px 16px}
.tx-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.tx-item-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tx-figures{display:flex;flex-wrap:wrap;gap:10px;color:var(--text-2)}
.tx-item-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* バナー */
.banner-strip{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.banner-slot{position:relative;flex:1;min-width:200px;min-height:72px;border-radius:var(--radius);overflow:hidden;background:var(--bg-subtle);display:flex;align-items:center;justify-content:center;color:var(--text-2);font-weight:700;border:1px solid var(--border)}
.banner-slot img{width:100%;height:100%;object-fit:cover}
.banner-pr{position:absolute;top:6px;right:6px;font-size:.66rem;background:rgba(14,31,51,.7);color:#fff;padding:1px 6px;border-radius:4px}
.banner-admin-list{display:flex;flex-direction:column;gap:12px}
.banner-admin-item{display:flex;gap:14px;align-items:center;padding:12px 14px}
.banner-admin-thumb{flex:0 0 96px;width:96px;height:54px;border-radius:8px;overflow:hidden;background:var(--bg-subtle)}
.banner-admin-thumb img{width:100%;height:100%;object-fit:cover}
.banner-admin-body{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.banner-admin-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.banner-admin-controls select{min-height:34px;width:auto}

/* 使い方 */
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:12px}
.how-step{display:flex;flex-direction:column;gap:6px}
.how-num{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}

/* 画像管理 */
.image-manage-grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.image-manage-item{width:120px;display:flex;flex-direction:column;gap:4px;position:relative}
.image-manage-item img{width:120px;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.img-order-btns{display:flex;gap:2px;justify-content:center;align-items:center}
.img-order-btns .btn{padding:2px 7px;font-size:.8rem;line-height:1.4;min-width:0}
.img-order-btns .btn[disabled]{opacity:.35;cursor:default;pointer-events:none}
.inline-upload{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.publish-card{text-align:center}

@media (max-width:860px){
  .auction-detail{grid-template-columns:1fr}
  .auction-detail-side{position:static}
}

/* ==========================================================================
   28. ウェブオク ラグジュアリーテーマ・オーバーレイ
   （ゴールド×オニキス。トップページのデザイン言語に統一）
   ========================================================================== */

/* 見出しはゴシックディスプレイ書体に */
h1,h2,h3,
.brand-title,.section-title h2,.section-title h3,
.page-head h1,.auction-detail-title,.seller-profile-name,
.hero h1,.stat-num{
  font-family:var(--font-disp);
  letter-spacing:.01em;
}
.page-head h1{color:var(--onyx);font-weight:800}
.section-title h2,.section-title h3{color:var(--onyx);font-weight:800}

/* 金のあしらいの細い上罫 */
.section-title{position:relative}

/* リンク */
a{color:var(--gold-4)}
a:hover{color:var(--gold-3)}

/* 既定ボタン＝ゴールド */
button,.btn,.btn-primary{
  background:var(--gold-grad);
  color:#3a2c08;
  font-weight:700;
  border:0;
  box-shadow:0 8px 22px rgba(201,162,39,.40);
}
button:hover,.btn:hover,.btn-primary:hover{
  background:var(--gold-grad);
  filter:brightness(1.03);
  transform:translateY(-1px);
  box-shadow:0 12px 30px rgba(201,162,39,.52);
}
button:active,.btn:active{transform:translateY(0)}

/* セカンダリ＝白地に金枠 */
.btn-secondary{
  background:#fff;color:var(--gold-4);
  border:1.5px solid var(--gold-3);box-shadow:none;
}
.btn-secondary:hover{background:var(--wash-2);border-color:var(--gold-4);color:var(--gold-4);filter:none;transform:translateY(-1px)}

/* テキストボタン */
.btn-text{background:transparent;color:var(--gold-4);box-shadow:none;border:0}
.btn-text:hover{background:var(--primary-soft);filter:none;transform:none}
.btn-text.btn-danger{background:transparent;color:var(--crimson)}
.btn-text.btn-danger:hover{background:var(--danger-soft)}

/* 危険・成功・ダークは個別色を維持（金より優先） */
.btn-danger{background:var(--crimson);color:#fff;box-shadow:0 6px 16px rgba(214,50,43,.28)}
.btn-danger:hover{background:#bf2a24;filter:none}
.btn-success,button.btn-success{background:var(--success);color:#fff;box-shadow:0 6px 16px rgba(31,143,95,.25)}
.btn-success:hover{background:#1a7a51;filter:none}
.btn-dark{background:var(--onyx);color:#fff}
.btn-dark:hover{background:#221F2A;filter:none}

/* バッジ＝淡い金 */
.badge{
  background:linear-gradient(135deg,rgba(251,239,182,.55),rgba(231,198,90,.30));
  color:#8a6a17;border:1px solid var(--gold-line);font-weight:700;
}
.badge-good{background:var(--success-soft);color:var(--success);border-color:rgba(31,143,95,.25)}
.badge-warn{background:var(--warning-soft);color:var(--warning);border-color:rgba(201,130,27,.30)}

/* 数値・価格は Oswald＋朱 */
.stat-num{font-family:var(--font-num);font-weight:700;color:var(--onyx)}
.auction-price,.auction-price-lg{font-family:var(--font-num);color:var(--crimson);font-weight:700;font-variant-numeric:tabular-nums}
.auction-timer{font-family:var(--font-num);letter-spacing:.04em}

/* カードの陰影をやや温かく＋金縁 */
.card{border:1px solid var(--line);box-shadow:var(--shadow)}
.auction-card:hover{box-shadow:0 16px 40px rgba(201,162,39,.22)}
.auction-bid-card{border:1.5px solid var(--gold-line);box-shadow:0 18px 48px rgba(201,162,39,.20)}

/* フィルタタブのアクティブを金に */
.filter-tabs a.is-active{background:var(--gold-grad);color:#3a2c08;border-color:transparent}

/* 通知の未読インジケータを金に */
.notify-item.is-unread{border-left:3px solid var(--gold-3)}

/* ヒーロー（共通ヘッダ下の簡易ヒーローを使う画面向け） */
.hero h1{color:var(--onyx)}

/* 出品者アバター・how-num を金に */
.seller-avatar{background:var(--gold-grad);color:#3a2c08}
.how-num{background:var(--gold-grad);color:#3a2c08}

/* テーブル見出し */
.table th{color:var(--text-2);background:var(--wash-2)}

/* スクロールバー（任意のリッチ感） */
*{scrollbar-color:var(--gold-3) transparent}

/* ---- ヘッダー（トップバー）をラグジュアリーに ---- */
.topbar{
  background:rgba(255,251,240,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gold-line);
}
.brand-mark{
  position:relative;width:38px;height:38px;border-radius:10px;flex:none;
  background:var(--gold-grad);display:grid;place-items:center;overflow:hidden;
  font-family:var(--font-disp);font-weight:800;color:#3a2c08;font-size:1.25rem;
  box-shadow:0 4px 16px rgba(201,162,39,.5);
}
.brand-mark::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.9),transparent);
  transform:skewX(-20deg);animation:sheen 3.8s infinite;
}
@keyframes sheen{0%{left:-70%}55%{left:160%}100%{left:160%}}
.brand-title{color:var(--onyx);letter-spacing:.04em}
.brand-sub{font-family:var(--font-num);color:var(--gold-4);letter-spacing:.22em;font-size:.62rem}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--gold-4);background:var(--primary-soft)}
.nav a.is-active{
  background:linear-gradient(135deg,rgba(251,239,182,.6),rgba(231,198,90,.32));
  color:#8a6a17;border-color:var(--gold-line);
}
.user-chip{color:var(--text-2)}
.nav-logout{color:var(--muted)}
.nav-logout:hover{color:var(--crimson)}
.mobile-nav-item.is-active{color:var(--gold-4)}

/* フッターのリンクを金系に */
.footer .footer-links a:hover{color:var(--gold-4);background:var(--primary-soft)}
.footer .footer-links span{color:var(--line-strong)}

/* ---- 認証画面ビジュアル / ヒーロー / インフォを金×墨へ ---- */
.auth-visual{
  background:linear-gradient(155deg,#1a1620 0%,#2a2330 42%,#C9A227 100%);
}
.auth-visual h2{font-family:var(--font-disp)}
.auth-visual .badge{background:rgba(231,198,90,.22);color:#FBEFB6;border:1px solid rgba(231,198,90,.4)}
.hero{
  background:
    radial-gradient(680px 420px at 82% -6%,rgba(231,198,90,.28),transparent 60%),
    radial-gradient(620px 460px at 2% 108%,rgba(201,162,39,.18),transparent 60%),
    linear-gradient(135deg,#1a1620,#2a2330);
  color:#fff;
}
.hero h1{color:#fff}
.hero .badge{background:rgba(231,198,90,.20);color:#FBEFB6;border:1px solid rgba(231,198,90,.38)}
.flash-info{
  background:var(--wash-2);color:#6b5618;
  border:1px solid var(--gold-line);border-left:3px solid var(--gold-3);
}

/* ==========================================================================
   29. AI出品（画像アップ→AI自動入力）
   ========================================================================== */
.ai-upload{
  border:1.5px solid var(--gold-line);border-radius:16px;
  background:linear-gradient(135deg,var(--wash-2),#fff);
  padding:18px;margin-bottom:18px;
}
.ai-upload-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.ai-badge{
  flex:0 0 auto;display:inline-flex;align-items:center;
  background:var(--gold-grad);color:#3a2c08;font-weight:800;
  font-size:.74rem;letter-spacing:.04em;padding:4px 12px;border-radius:999px;
  box-shadow:0 4px 12px rgba(201,162,39,.4);
}
.ai-upload-head strong{font-family:var(--font-disp);font-size:1.05rem;color:var(--onyx)}
.ai-drop{
  display:block;border:2px dashed var(--gold-3);border-radius:14px;
  background:#fff;padding:22px 16px;text-align:center;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.ai-drop:hover{background:var(--wash);border-color:var(--gold-4)}
.ai-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ai-drop-inner{display:flex;flex-direction:column;align-items:center;gap:6px}
.ai-drop-icon{font-size:2rem}
.ai-drop-text{font-weight:700;color:var(--gold-4)}
.ai-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ai-preview img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.ai-status{
  margin-top:12px;padding:10px 14px;border-radius:10px;font-size:.9rem;font-weight:600;
  background:var(--wash-2);color:#6b5618;border:1px solid var(--gold-line);
}
.ai-status-loading{
  background:var(--wash-2);color:#6b5618;border-color:var(--gold-line);
  position:relative;padding-left:38px;
}
.ai-status-loading::before{
  content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;
  border:2px solid var(--gold-line);border-top-color:var(--gold-3);border-radius:50%;
  animation:spin360 .8s linear infinite;
}
@keyframes spin360{to{transform:rotate(360deg)}}
.ai-status-success{background:var(--success-soft);color:var(--success);border-color:rgba(31,143,95,.3)}
.ai-status-warn{background:var(--warning-soft);color:var(--warning);border-color:rgba(201,130,27,.3)}
.ai-status-error{background:var(--danger-soft);color:var(--crimson);border-color:rgba(214,50,43,.25)}
/* AIが入力した瞬間のハイライト */
.ai-filled{
  animation:aiflash 1.6s ease;
}
@keyframes aiflash{
  0%{background-color:rgba(231,198,90,.45);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
  100%{background-color:#fff;box-shadow:none}
}

/* ==========================================================================
   30. ライブオークション演出（LIVE・歓声・クイック入札・アバター）
   ========================================================================== */
.bid-live-row{display:flex;align-items:center;justify-content:space-between}
.live-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-num);font-size:.72rem;letter-spacing:.14em;font-weight:700;
  color:#fff;background:var(--crimson);padding:3px 10px;border-radius:999px;
  box-shadow:0 4px 14px rgba(214,50,43,.4);
}
.live-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:livepulse 1.1s infinite}
@keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.price-pop{animation:pricepop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pricepop{0%{transform:scale(1)}35%{transform:scale(1.14);text-shadow:0 0 18px rgba(214,50,43,.45)}100%{transform:scale(1)}}

/* 歓声ステージ */
.cheer-stage{position:relative;height:0;overflow:visible;pointer-events:none;z-index:3}
.cheer-word{
  position:absolute;top:0;transform:translateY(0);
  font-family:var(--font-disp);font-weight:800;font-size:1rem;color:var(--crimson);
  text-shadow:0 2px 8px rgba(255,251,240,.9);white-space:nowrap;
  animation:cheerfloat 1.8s ease-out forwards;
}
@keyframes cheerfloat{
  0%{opacity:0;transform:translateY(6px) scale(.85)}
  18%{opacity:1;transform:translateY(-6px) scale(1.08)}
  100%{opacity:0;transform:translateY(-46px) scale(1)}
}
.confetti{
  position:absolute;top:-4px;width:8px;height:12px;border-radius:2px;opacity:.95;
  animation:confettifall 1.5s ease-in forwards;
}
@keyframes confettifall{
  0%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(120px) rotate(540deg);opacity:0}
}

/* クイック入札ボタン */
.quick-bids{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 8px}
.quick-bid{
  min-height:38px;padding:0 4px;border-radius:10px;font-weight:800;font-size:.82rem;
  background:#fff;color:var(--gold-4);border:1.5px solid var(--gold-3);box-shadow:none;cursor:pointer;
  white-space:nowrap;overflow:hidden; /* v193(①): 「+5,000円」等が2行に折り返さないようにする */
}
@media (max-width:640px){
  /* v193(①): スマホの4列グリッドでも「+10,000円」まで1行で収まるサイズにする */
  .quick-bids{gap:4px}
  .quick-bid{font-size:.72rem;padding:0 2px;letter-spacing:0}
}
.quick-bid:hover{background:var(--wash-2);transform:translateY(-1px);filter:none}
.quick-bid:active{transform:translateY(0)}

/* 入札履歴（ライブリスト・アバター） */
.bid-live-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bid-live-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);
}
.bid-live-item.is-new{animation:bidslide .6s ease}
@keyframes bidslide{0%{transform:translateY(-8px);opacity:0;background:rgba(231,198,90,.35)}100%{transform:translateY(0);opacity:1}}
.bidder-avatar{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.9rem;color:#3a2c08;background:var(--gold-grad);
}
.bidder-avatar[data-initial="A"],.bidder-avatar[data-initial="E"],.bidder-avatar[data-initial="I"]{background:linear-gradient(135deg,#9bd4c0,#3f9d7a);color:#fff}
.bidder-avatar[data-initial="K"],.bidder-avatar[data-initial="S"],.bidder-avatar[data-initial="T"]{background:linear-gradient(135deg,#a9c4f5,#3a6fd8);color:#fff}
.bid-live-name{flex:0 0 auto;font-size:.88rem}
.bid-live-amount{font-family:var(--font-num);font-weight:700;color:var(--crimson);margin-left:auto}
.bid-live-time{flex:0 0 auto}

/* ==========================================================================
   31. LIVE競りカード（トップページ準拠の派手なオークションUI）
   ========================================================================== */
.live-card{padding:0;overflow:hidden;border:1.5px solid var(--gold-line)}
.live-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(135deg,#15131A,#2a2330);
  padding:12px 16px;
}
.live-head .live-pill{box-shadow:none}
.live-pill-ended{background:#5a5562}
.live-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.live-clock-time{
  font-family:var(--font-num);font-weight:700;font-size:1.25rem;letter-spacing:.06em;
  color:var(--gold-2);font-variant-numeric:tabular-nums;
}
.live-clock-time.is-final{color:#ff6b61;animation:livepulse 1s infinite}
.live-clock-label{font-size:.64rem;color:#bdb6a6;letter-spacing:.12em}
.live-body{padding:16px}
.live-chips{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.chip-gold{
  display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;
  background:var(--gold-grad);color:#3a2c08;font-size:.76rem;font-weight:800;
}
.chip-dark{
  display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:999px;
  background:rgba(21,19,26,.85);color:#fff;font-size:.76rem;font-weight:700;
}
.live-price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px}
.live-bidcount-box{text-align:right}
.live-bidcount-num{font-family:var(--font-num);font-weight:700;font-size:1.5rem;color:var(--onyx);line-height:1.1}
.live-bidcount-unit{font-size:.8rem;color:var(--muted);font-weight:600}
.side-bid-list{list-style:none;margin:0 0 12px;padding:0}
.side-bid-list li{
  display:flex;align-items:center;gap:8px;
  padding:8px 2px;border-bottom:1px solid var(--line);font-size:.88rem;
}
.side-bid-list li:last-child{border-bottom:none}
.side-bid-name{color:var(--text-2)}
.side-bid-amount{margin-left:auto;font-family:var(--font-num);font-weight:700;color:var(--crimson)}
.btn-join{
  min-height:52px;font-size:1.02rem;letter-spacing:.04em;border-radius:999px;
  box-shadow:0 12px 30px rgba(201,162,39,.5);
}

/* 落札速報ティッカー */
.sold-ticker{
  display:flex;align-items:center;gap:0;overflow:hidden;
  background:linear-gradient(135deg,#15131A,#2a2330);
  border:1px solid var(--gold-line);border-radius:12px;
  margin:0 0 16px;min-height:42px;
  position:sticky;top:var(--ticker-top, calc(var(--topbar-h) + 22px));z-index:25;
  box-shadow:0 8px 22px rgba(20,18,24,.18);
}
.sold-ticker-label{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  background:var(--gold-grad);color:#3a2c08;font-weight:800;font-size:.8rem;
  padding:0 14px;align-self:stretch;white-space:nowrap;
}
.sold-ticker-track{flex:1;overflow:hidden;position:relative}
.sold-ticker-inner{
  display:inline-flex;gap:48px;white-space:nowrap;padding-left:100%;
  animation:tickerscroll 80s linear infinite;
}
.sold-ticker:hover .sold-ticker-inner{animation-play-state:paused}
@keyframes tickerscroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.sold-ticker-item{display:inline-flex;align-items:center;gap:6px;color:#e9e2d2;font-size:.85rem}
.sold-ticker-item .t-price{font-family:var(--font-num);font-weight:700;color:#ff8d85}
.sold-ticker-item .t-name{color:var(--gold-2);font-weight:700}

/* ==========================================================================
   32. オンボーディング「次にやること」＆ガイド誘導ハイライト
   ========================================================================== */
.onboarding{
  margin:0 0 16px;border:1.5px solid var(--gold-line);border-radius:14px;
  background:linear-gradient(135deg,var(--wash-2),#fff);overflow:hidden;
  box-shadow:0 8px 24px rgba(201,162,39,.14);
}
.onboarding.is-quiet{opacity:.92}
.onboarding-bar{
  display:flex;align-items:center;gap:10px;width:100%;
  background:transparent;border:0;box-shadow:none;color:var(--onyx);
  padding:12px 16px;min-height:48px;cursor:pointer;font-family:inherit;
  font-size:.94rem;text-align:left;
}
.onboarding-bar:hover{background:rgba(231,198,90,.10);filter:none;transform:none}
.onboarding-spark{animation:sparkle 2.2s ease-in-out infinite}
@keyframes sparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(12deg)}}
.onboarding-bar strong{font-family:var(--font-disp);letter-spacing:.02em}
.onboarding-progress{font-size:.8rem;color:var(--gold-4);font-weight:700;white-space:nowrap}
.onboarding-meter{flex:1;max-width:160px;height:6px;border-radius:999px;background:rgba(201,162,39,.18);overflow:hidden}
.onboarding-meter span{display:block;height:100%;background:var(--gold-grad);border-radius:999px;transition:width .4s}
.onboarding-caret{margin-left:auto;color:var(--gold-4);transition:transform .2s}
.onboarding.is-open .onboarding-caret{transform:rotate(180deg)}
.onboarding-panel{padding:0 16px 16px;border-top:1px dashed var(--gold-line)}
.onboarding-lead{margin:12px 0}
.onboarding-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.onboarding-step-link{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  transition:box-shadow .15s,transform .12s,border-color .15s;
}
.onboarding-step-link:hover{border-color:var(--gold-3);box-shadow:0 8px 20px rgba(201,162,39,.18);transform:translateY(-1px);text-decoration:none}
.onboarding-num{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-grad);color:#3a2c08;font-weight:800;font-family:var(--font-num);font-size:1rem;
  box-shadow:0 4px 12px rgba(201,162,39,.35);
}
.onboarding-step.is-done .onboarding-num{background:var(--success);color:#fff;box-shadow:none}
.onboarding-step.is-done .onboarding-step-body strong{text-decoration:line-through;color:var(--muted)}
.onboarding-step-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.onboarding-go{margin-left:auto;white-space:nowrap;color:var(--gold-4);font-weight:800;font-size:.86rem;animation:nudgemove 1.6s ease-in-out infinite}
@keyframes nudgemove{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.onboarding-foot{margin-top:12px;text-align:right}

/* ガイド誘導: 対象を金の波紋で光らせる */
.guide-glow{
  position:relative;z-index:2;border-radius:14px;
  animation:guidepulse 1.4s ease-in-out infinite;
  outline:3px solid var(--gold-3);outline-offset:3px;
}
@keyframes guidepulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.55)}
  50%{box-shadow:0 0 0 14px rgba(201,162,39,0)}
}
.guide-callout{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--onyx);color:var(--gold-2);font-weight:800;font-size:.9rem;
  padding:8px 16px;border-radius:999px;margin:0 0 10px;
  box-shadow:0 10px 26px rgba(21,19,26,.35);
  animation:calloutbob 1.2s ease-in-out infinite;
}
@keyframes calloutbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ===== ver.3 追加：ウォッチ機能 / 即決価格 ===== */
/* 詳細ページのウォッチボタン（チップ風） */
.chip-watch{
  display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:999px;
  background:#fff;color:var(--gold-4);border:1.5px solid var(--gold-3);
  font-size:.76rem;font-weight:800;cursor:pointer;line-height:1.6;transition:all .15s ease;
}
.chip-watch:hover{background:var(--wash-2)}
.chip-watch.is-watching{background:var(--gold-grad);color:#3a2c08;border-color:transparent}

/* 即決価格表示 */
.live-buynow-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 0 10px;padding:6px 10px;border:1px dashed var(--gold-line);border-radius:10px;background:var(--wash-2)}
.buynow-price{font-family:var(--font-num);font-weight:800;color:var(--gold-4);font-size:1.05rem}
.btn-buynow{margin-top:8px}

/* カタログカードのウォッチトグル */
.auction-thumb .card-watch-btn{
  position:absolute;right:8px;top:8px;z-index:2;
  width:34px;height:34px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(20,18,24,.55);color:#fff;font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease, background .15s ease;
}
.auction-thumb .card-watch-btn:hover{transform:scale(1.08)}
.auction-thumb .card-watch-btn.is-watching{background:var(--gold-grad);color:#3a2c08}

/* ウォッチリスト：LIVE入札カードのグリッド（複数同時入札） */
.live-badge-inline{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 10px;border-radius:999px;background:linear-gradient(135deg,#D6322B,#a31f1a);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;animation:livepulse 1.4s infinite}
.watch-live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
.watch-live-card{padding:0;transition:transform .25s ease, box-shadow .25s ease, opacity .3s ease}
.watch-live-card:hover{transform:translateY(-3px);box-shadow:0 22px 56px rgba(201,162,39,.28)}
.watch-live-card .live-body{padding:14px 16px 16px}
.watch-live-title{display:block;margin-bottom:10px;color:var(--onyx);line-height:1.35;min-height:2.7em}
.watch-live-title:hover strong{color:var(--gold-4)}
/* 商品写真（小さめのギャラリー） */
.watch-photos{display:flex;gap:6px;margin:0 0 12px;align-items:stretch}
.watch-photo-main{flex:1 1 auto;border-radius:10px;overflow:hidden;background:var(--bg-subtle);aspect-ratio:4/3;display:block}
.watch-photo-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.watch-photos:hover .watch-photo-main img{transform:scale(1.05)}
.watch-photo-thumbs{flex:0 0 56px;display:flex;flex-direction:column;gap:6px;position:relative}
.watch-photo-thumb{position:relative;flex:1 1 0;border-radius:8px;overflow:hidden;background:var(--bg-subtle);min-height:0}
.watch-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.watch-photo-more{position:absolute;right:3px;bottom:3px;padding:1px 7px;border-radius:999px;background:rgba(20,18,24,.72);color:#fff;font-size:.66rem;font-weight:800}
.watch-live-card .chip-watch{cursor:pointer;font-size:.72rem;padding:2px 10px}
.watch-live-card.is-won{box-shadow:0 0 0 2px var(--gold-3),0 22px 56px rgba(201,162,39,.4)}
.watch-live-card.is-removing{opacity:0;transform:scale(.92)}
.live-pill-won{background:var(--gold-grad)!important;color:#3a2c08!important}
.quick-bid.pulse{animation:qpulse .5s ease}
.side-bid-list li.just-in{animation:justin .6s ease}
@keyframes qpulse{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes justin{0%{background:rgba(231,198,90,.45);transform:translateX(-8px);opacity:0}100%{background:transparent;transform:translateX(0);opacity:1}}
.btn.is-loading{position:relative;color:transparent!important}
.btn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:btnspin .6s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media(max-width:560px){
  .watch-live-grid{grid-template-columns:1fr;gap:14px}
}

/* ===== 売り買い切替（一本化） ===== */
.nav-mode-switch{
  display:inline-flex;align-items:center;gap:4px;padding:.3rem .8rem;border-radius:999px;
  border:1.5px solid var(--gold-3);color:var(--gold-4);font-weight:700;font-size:.8rem;white-space:nowrap;
}
.nav-mode-switch:hover{background:var(--gold-grad);color:#3a2c08;border-color:transparent}
.mode-badge{
  display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  background:var(--gold-grad);color:#3a2c08;font-size:.7rem;font-weight:800;vertical-align:middle;
}

/* ===== カテゴリ新着・絞り込み・速報・画面内トースト ===== */
/* NEWバッジ（カタログ） */
.auction-new-badge{position:absolute;left:8px;top:8px;background:linear-gradient(135deg,#D6322B,#a31f1a);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:2px 8px;border-radius:999px;box-shadow:0 4px 10px rgba(214,50,43,.4)}
/* 新着案内バナー */
.new-arrival-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:var(--wash-2);border:1px solid var(--gold-line);font-size:.9rem}
.new-arrival-flag{background:linear-gradient(135deg,#D6322B,#a31f1a);color:#fff;font-size:.66rem;font-weight:800;padding:2px 9px;border-radius:999px}
.new-arrival-hint a{margin-left:auto;color:var(--gold-4);font-weight:700;white-space:nowrap}
/* ウォッチのツールバー・絞り込み */
.watch-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.watch-filter{display:flex;align-items:center;gap:8px;margin:0}
.watch-filter select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;max-width:62vw}
.watch-new-badge{margin-left:auto;background:linear-gradient(135deg,#D6322B,#a31f1a);color:#fff;font-size:.62rem;font-weight:800;padding:2px 8px;border-radius:999px;align-self:center}
.watch-live-card .live-head{position:relative}
/* 速報ティッカーの種別色 */
.sold-ticker-item .t-ico{margin-right:2px}
.sold-ticker-item.t-bid .t-price{color:#E7C65A}
.sold-ticker-item.t-new{color:#FBEFB6}
/* 画面内トースト（見逃し防止） */
.webauc-toast-host{position:fixed;right:16px;top:16px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:360px;pointer-events:none}
.webauc-toast{pointer-events:auto;cursor:pointer;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--gold-line);box-shadow:0 16px 44px rgba(20,18,24,.22);transform:translateX(120%);opacity:0;transition:transform .35s cubic-bezier(.2,1.3,.4,1),opacity .35s}
.webauc-toast.is-in{transform:translateX(0);opacity:1}
.webauc-toast.is-warn{border-color:#e7a; box-shadow:0 16px 44px rgba(214,50,43,.28); animation:toastShake .5s}
.webauc-toast-ico{font-size:1.3rem;line-height:1.4}
.webauc-toast-body{flex:1 1 auto;min-width:0}
.webauc-toast-title{font-weight:800;font-size:.92rem;color:var(--onyx);margin-bottom:2px}
.webauc-toast-text{font-size:.82rem;color:var(--muted);line-height:1.4}
.webauc-toast-close{pointer-events:auto;border:0;background:transparent;font-size:1.1rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
@keyframes toastShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@media(max-width:560px){
  .webauc-toast-host{left:12px;right:12px;top:12px;max-width:none}
  .webauc-toast{transform:translateY(-120%)}
  .webauc-toast.is-in{transform:translateY(0)}
}

/* ティッカー固定位置はヘッダー実高さ(--ticker-top)に追従（_footer.php で設定） */

/* ===== v68: 本人確認ステータス ===== */
.id-verify-status{
  margin:10px 0 6px;padding:10px 14px;border-radius:12px;font-size:.86rem;font-weight:700;line-height:1.5;
  border:1.5px solid var(--border);background:var(--wash-2);color:var(--muted);
}
.id-verify-status[data-state="loading"]{border-color:var(--gold-3);background:#fffdf3;color:var(--gold-4);}
.id-verify-status[data-state="ok"]{border-color:#2faf64;background:#f0fbf4;color:#1d7d44;}
.id-verify-status[data-state="error"]{border-color:#d9534f;background:#fdf2f2;color:#b23b38;}
/* v207②: 案内文を出さない待機状態は枠ごと非表示（わかりにくい説明文の廃止） */
.id-verify-status:empty{display:none;}
/* v207①: 未入力項目の入力待ち（エラーではなく案内として表示） */
.id-verify-status[data-state="pending"]{border-color:var(--gold-3);background:#fffdf3;color:var(--gold-4);}

/* ===== v68: マイページ＝あなたのお店 ハブ ===== */
.shop-hub{
  position:relative;overflow:hidden;border-radius:20px;padding:20px 22px;margin:0 0 18px;
  background:linear-gradient(135deg,#1f1a24,#2c2533 60%,#3a2f1c);color:#fff;
  box-shadow:0 14px 38px rgba(21,19,26,.28);
}
.shop-hub::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 200px at 88% -10%,rgba(231,198,90,.28),transparent 60%);}
.shop-hub-top{position:relative;z-index:2;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.shop-hub-avatar{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;
  background:linear-gradient(135deg,#e7c65a,#c9a227);color:#3a2c08;box-shadow:0 6px 16px rgba(201,162,39,.45);flex:0 0 auto;}
.shop-hub-name{font-family:var(--disp,inherit);font-weight:800;font-size:1.25rem;line-height:1.2;margin:0;}
.shop-hub-sub{font-size:.8rem;color:rgba(255,255,255,.72);margin-top:3px;}
.shop-hub-verify{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 10px;border-radius:999px;
  font-size:.74rem;font-weight:800;background:rgba(47,175,100,.18);color:#7be0a4;border:1px solid rgba(47,175,100,.4);}
.shop-hub-verify.is-warn{background:rgba(217,83,79,.16);color:#ff9a97;border-color:rgba(217,83,79,.45);}
.shop-hub-badge-dealer{display:inline-flex;align-items:center;gap:5px;margin-top:6px;margin-left:6px;padding:3px 10px;border-radius:999px;
  font-size:.74rem;font-weight:800;background:rgba(231,198,90,.16);color:#f0d985;border:1px solid rgba(231,198,90,.4);}
.shop-modes{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.shop-mode{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);color:#fff;transition:transform .14s ease,background .14s ease,border-color .14s ease;
}
.shop-mode:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);}
.shop-mode .ic{font-size:1.5rem;flex:0 0 auto;}
.shop-mode b{display:block;font-size:1rem;}
.shop-mode span{display:block;font-size:.76rem;color:rgba(255,255,255,.72);margin-top:1px;}
.shop-mode.is-current{background:linear-gradient(135deg,#e7c65a,#c9a227);border-color:transparent;color:#3a2c08;}
.shop-mode.is-current span{color:rgba(58,44,8,.72);}
@media(max-width:560px){.shop-modes{grid-template-columns:1fr;}}

/* ===== v68: オンボーディングの主要アクション・ピル ===== */
.onb-cta-pill{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 16px;padding:13px 16px;border-radius:14px;
  background:linear-gradient(135deg,#fff7e0,#fdeecb);border:1.5px solid var(--gold-3);
  box-shadow:0 8px 22px rgba(201,162,39,.18);
}
.onb-cta-pill .ic{font-size:1.3rem;}
.onb-cta-pill .tx{flex:1 1 200px;}
.onb-cta-pill .tx b{display:block;font-size:.96rem;color:var(--onyx,#1f1a24);}
.onb-cta-pill .tx span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;}
.onb-cta-pill .btn{flex:0 0 auto;}

/* ===== v69: 特定商取引法テーブル ===== */
.legal-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.legal-table th,.legal-table td{border:1px solid var(--border,#e6e0d4);padding:11px 14px;text-align:left;vertical-align:top;}
.legal-table th{width:34%;background:var(--wash-2,#faf7ef);font-weight:800;color:var(--text-2,#5b5443);white-space:nowrap;}
@media(max-width:560px){
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table th,.legal-table td{display:block;width:100%;}
  .legal-table th{border-bottom:none;}
  .legal-table td{border-top:none;margin-bottom:6px;}
}

/* ===== v72: デポジット入金 ===== */
.deposit-presets{display:flex;flex-wrap:wrap;gap:8px;}
.deposit-presets .deposit-preset{flex:0 0 auto;}
.btn-sm{padding:6px 12px;font-size:.85rem;}

/* ===== v73: デポジット残高警告 ===== */
.deposit-warn{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 16px;padding:12px 16px;border-radius:14px;
  background:linear-gradient(135deg,#fff6e0,#ffe9c7);border:1.5px solid #e6b450;
  box-shadow:0 6px 18px rgba(214,158,46,.16);
}
.deposit-warn-ic{font-size:1.3rem;flex:0 0 auto;}
.deposit-warn-body{flex:1 1 240px;font-size:.86rem;color:#7a5a12;line-height:1.5;}
.deposit-warn-body strong{display:block;color:#5b4109;margin-bottom:2px;}
.deposit-warn .btn{flex:0 0 auto;}

/* ===== v74: ウォッチ（ライブ入札）カードを縦圧縮し、入札ボタンを画面内に収める ===== */
.watch-live-card .live-body{padding:12px 14px 14px}
/* タイトルは2行までにクランプ（固定の高さ確保をやめる） */
.watch-live-card .watch-live-title{
  margin-bottom:6px;min-height:0;font-size:.9rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 写真ギャラリーを小さく（縦を大幅に節約） */
.watch-live-card .watch-photos{margin:0 0 8px;height:110px}
.watch-live-card .watch-photo-main{aspect-ratio:auto;height:110px}
.watch-live-card .watch-photo-thumbs{flex:0 0 44px}
/* 各セクションの余白を詰める */
.watch-live-card .live-chips{margin-bottom:8px}
.watch-live-card .live-buynow-row{margin:0 0 8px;padding:4px 10px}
.watch-live-card .live-price-row{padding-bottom:8px;margin-bottom:6px}
.watch-live-card .auction-price-lg{font-size:1.5rem;margin:0}
.watch-live-card .live-bidcount-num{font-size:1.1rem}
/* 入札履歴は最大3行ぶんの高さに収め、超過はスクロール */
.watch-live-card .side-bid-list{margin:0 0 8px;max-height:96px;overflow:auto}
.watch-live-card .side-bid-list li{padding:3px 0;font-size:.8rem}
.watch-live-card .cheer-stage{min-height:0}
/* 入札操作エリアを詰める */
.watch-live-card .watch-bid .field{margin-bottom:6px}
.watch-live-card .watch-bid .field > span{font-size:.78rem}
.watch-live-card .watch-bid .js-amount{padding:8px 10px}
.watch-live-card .quick-bids{gap:5px;margin:4px 0 8px}
.watch-live-card .quick-bid{padding:6px 2px;font-size:.76rem}
.watch-live-card .watch-bid fieldset.field{margin-bottom:8px;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:center}
.watch-live-card .watch-bid fieldset.field legend{font-size:.76rem;flex:1 1 100%;margin-bottom:2px}
.watch-live-card .watch-bid .radio-row{font-size:.82rem;padding:2px 0;gap:6px;display:inline-flex;align-items:center}
/* 参加（入札）ボタンを目立たせつつコンパクトに */
.watch-live-card .btn-join{padding:11px;font-size:.95rem}
.watch-live-card .btn-buynow{margin-top:6px;padding:9px;font-size:.85rem}

/* ===== v75: 領収証 ===== */
.receipt-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.receipt-sheet{
  max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:32px 36px;box-shadow:0 10px 30px rgba(20,18,24,.08);color:#1c1a22;
}
.receipt-title{font-size:1.7rem;font-weight:800;letter-spacing:.4em;text-align:center;margin:0 0 18px;border-bottom:2px solid #1c1a22;padding-bottom:10px}
.receipt-meta{display:flex;justify-content:space-between;font-size:.85rem;color:#555;margin-bottom:18px}
.receipt-to{font-size:1.1rem;margin:6px 0 18px;border-bottom:1px solid #999;padding-bottom:8px}
.receipt-to-name{font-weight:700;font-size:1.25rem}
.receipt-amount{display:flex;align-items:baseline;gap:14px;background:var(--wash-2,#faf6ec);border:1px solid var(--gold-line,#e3cf9b);border-radius:10px;padding:14px 18px;margin:0 0 14px}
.receipt-amount-label{font-size:.9rem;color:#555;flex:0 0 auto}
.receipt-amount-value{font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.receipt-subject{font-size:1rem;margin:0 0 6px}
.receipt-note{font-size:.85rem;color:#555;margin:0 0 16px}
.receipt-breakdown{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.9rem}
.receipt-breakdown th,.receipt-breakdown td{border:1px solid #ddd;padding:7px 12px;text-align:left}
.receipt-breakdown td{text-align:right;font-variant-numeric:tabular-nums;width:40%}
.receipt-breakdown .receipt-total th,.receipt-breakdown .receipt-total td{background:#faf6ec;font-weight:800}
.receipt-issuer{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:18px}
.receipt-issuer-info{font-size:.85rem;line-height:1.7}
.receipt-seal{flex:0 0 auto;width:64px;height:64px;border:2px solid #c0392b;border-radius:8px;color:#c0392b;display:flex;align-items:center;justify-content:center;font-size:1.6rem;opacity:.75}
.receipt-stamp-note{font-size:.74rem;color:#888;margin-top:16px}
@media print{
  /* v177: Androidで2枚目が白紙になる対策。
     body の min-height:100vh が印刷ページ高に化けて溢れるのが主因のため、
     高さ指定を解除し、領収証シート以外（ガイド・案内・固定UI）を印刷から除外する。 */
  html,body{height:auto!important;min-height:0!important;background:#fff!important;padding:0!important;margin:0!important;overflow:visible!important}
  .no-print,.site-header,.site-footer,header,footer,nav{display:none!important}
  .onboarding,.onb-cta-pill,.sold-ticker,.deposit-warn,.help-toggle-row,.crumbs,.flash,
  .mobile-nav,.mode-float,.sp-bid-bar,.kashari-bot,.kashari-bot-launcher,.webauc-toast-host{display:none!important}
  .receipt-sheet{box-shadow:none;border:none;max-width:none;margin:0;padding:0;page-break-inside:avoid;page-break-after:avoid;break-inside:avoid}
  .main-wrap,main,.container{margin:0!important;padding:0!important;max-width:none!important;min-height:0!important}
}
@page{margin:10mm}

/* ===== v76: ウォッチカードの折りたたみ（入札履歴・受け渡し方法） ===== */
.watch-collapse{border:1px solid var(--line);border-radius:10px;margin:0 0 8px;background:#fff;overflow:hidden}
.watch-collapse>summary{
  cursor:pointer;list-style:none;padding:8px 12px;font-size:.82rem;font-weight:700;color:var(--onyx);
  display:flex;align-items:center;gap:8px;user-select:none;
}
.watch-collapse>summary::-webkit-details-marker{display:none}
.watch-collapse>summary::after{content:"▾";margin-left:auto;color:var(--muted);transition:transform .2s ease}
.watch-collapse[open]>summary::after{transform:rotate(180deg)}
.watch-collapse>summary:hover{background:var(--wash-1,#faf6ec)}
.watch-collapse .wc-sub{font-weight:500;color:var(--muted);font-size:.78rem}
.watch-collapse[open]>summary{border-bottom:1px solid var(--line)}
/* 中身の余白を整える（折りたたみ内では既存マージンを打ち消す） */
.watch-collapse .side-bid-list{margin:0;padding:6px 10px;max-height:140px;overflow:auto}
.watch-collapse fieldset.field{margin:0;padding:8px 12px;border:none}
.watch-collapse fieldset.field legend{font-size:.76rem;margin-bottom:4px}

/* ===== 出品写真マネージャ（v79） ===== */
.pm-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pm-grid.has-items{margin-bottom:6px}
.pm-item{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2,#f4f2ee);cursor:grab;touch-action:none;box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* 並び替えボタン付き：画像の下に操作バーを置くため、タイルを縦に伸ばす */
.pm-item.pm-has-controls{width:104px;height:auto;cursor:default}
.pm-item.pm-has-controls .pm-thumb{height:104px}
.pm-controls{display:flex;align-items:stretch;gap:2px;padding:3px;background:var(--surface,#fff);border-top:1px solid var(--line)}
.pm-move{flex:1 1 0;min-width:0;min-height:32px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text,#222);font-size:.95rem;line-height:1;cursor:pointer;box-shadow:none;font-weight:700}
.pm-move:hover:not(:disabled){background:var(--wash-2,#f3efe3);border-color:var(--gold-3,#c9a227)}
.pm-move:disabled{opacity:.32;cursor:default}
.pm-move-main{color:var(--gold-4,#b8860b)}
.pm-item:active{cursor:grabbing}
.pm-item.pm-dragging{opacity:.45}
.pm-item.pm-over{outline:2px dashed var(--primary-3,#155eef);outline-offset:-2px}
.pm-thumb{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pm-badge{position:absolute;top:3px;left:3px;min-width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:rgba(21,19,26,.82);color:#fff;font-weight:700;font-size:.86rem;font-family:'Oswald',sans-serif;padding:0 2px;z-index:2}
.pm-badge-main{background:var(--gold-4,#b8860b)}
.pm-main-tag{position:absolute;bottom:3px;left:3px;background:var(--gold-4,#b8860b);color:#fff;font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:6px;z-index:2;letter-spacing:.04em}
.pm-item.pm-has-controls .pm-main-tag{top:3px;right:3px;left:auto;bottom:auto}
.pm-remove{position:absolute;top:2px;right:2px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(200,30,30,.92);color:#fff;font-size:.8rem;font-weight:700;line-height:1;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;padding:0}
.pm-remove:hover{background:#b01818}
.pm-drop-active{outline:2px dashed var(--primary-3,#155eef);outline-offset:3px;background:var(--primary-3-soft,rgba(21,94,239,.06))}
.pm-hint{font-size:.78rem;color:var(--muted);margin-top:6px}

/* ===== 管理ページ（サブナビ・テーブル・分析） ===== */
.admin-subnav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.admin-subnav a{
  padding:7px 14px;border-radius:var(--radius-pill);font-size:.86rem;font-weight:600;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);text-decoration:none;transition:background .15s,color .15s;
}
.admin-subnav a:hover{background:var(--bg-subtle);text-decoration:none}
.admin-subnav a.is-active{background:var(--primary-3-soft);color:var(--primary-3);border-color:rgba(201,162,39,.3)}
.admin-search{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.admin-search input{flex:1;min-width:200px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.9rem;background:var(--surface)}
.table-card{padding:0;overflow:hidden}
.table-card.card{padding:0}
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th,.data-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table thead th{background:var(--surface-2);font-weight:700;color:var(--text-2);font-size:.8rem;white-space:nowrap}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--bg-subtle)}
.data-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.data-table .link-strong{font-weight:700;color:var(--primary-3)}
.badge-danger{background:rgba(214,50,43,.12);color:var(--crimson,#D6322B)}
.admin-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.admin-2col{grid-template-columns:1fr}}
/* 棒グラフ（日別） */
.bar-chart{display:flex;align-items:flex-end;gap:8px;min-height:150px;padding:8px 4px;overflow-x:auto}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:34px;flex:1}
.bar-col .bar{width:60%;min-width:14px;background:var(--gold-grad,linear-gradient(180deg,#E7C65A,#C9A227));border-radius:6px 6px 0 0}
.bar-col .bar-val{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bar-col .bar-x{font-size:.68rem;color:var(--muted);white-space:nowrap}
/* ミニバー（種別シェア） */
.mini-bar{margin-top:5px;height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.mini-bar span{display:block;height:100%;background:var(--primary-3);border-radius:3px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ===== コンタクト（通知）項目の操作性 ===== */
.notify-item.is-clickable{cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .05s}
.notify-item.is-clickable:hover{box-shadow:var(--shadow-md,0 6px 20px rgba(15,32,53,.08));border-color:rgba(201,162,39,.35)}
.notify-item.is-clickable:active{transform:translateY(1px)}
.notify-action{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:7px 14px;border-radius:var(--radius-pill);font-size:.84rem;font-weight:700;
  background:var(--primary-3-soft);color:var(--primary-3);text-decoration:none;border:1px solid rgba(201,162,39,.28);
}
.notify-action:hover{background:var(--gold-grad,var(--primary-3));color:#3a2c08;text-decoration:none}
.badge-unread{background:var(--crimson,#D6322B);color:#fff}
.notify-item.is-unread{border-left:3px solid var(--crimson,#D6322B)}

/* ==========================================================================
   v98: 買う/売るの色分け・カタログ残り時間・受け渡し・プレビュー・一括入札
   ========================================================================== */

/* --- 買う＝青系 / 売る＝金系 のアクセント変数 --- */
:root{
  --buy-accent:#2f6fd8; --buy-accent-2:#5b8def;
  --buy-grad:linear-gradient(135deg,#5b8def,#2f6fd8 70%,#1f57b8);
  --buy-soft:rgba(47,111,216,.12);
  --sell-accent:#C9A227; --sell-accent-2:#E7C65A;
  --sell-grad:linear-gradient(135deg,#FBEFB6,#E7C65A 40%,#C9A227 80%);
  --sell-soft:rgba(201,162,39,.14);
}

/* マイページ上部ハブ：現在モードのフラグ（どちらをやっているか一目で分かる） */
.shop-hub-mode-flag{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;
  margin-bottom:12px;padding:5px 14px;border-radius:999px;
  font-size:.82rem;font-weight:800;letter-spacing:.02em;
}
.shop-hub-mode-flag .ic{font-size:1rem;}
.shop-hub-buyer .shop-hub-mode-flag{background:var(--buy-soft);color:#bcd4ff;border:1px solid rgba(91,141,239,.5);}
.shop-hub-seller .shop-hub-mode-flag{background:var(--sell-soft);color:#f0d985;border:1px solid var(--gold-line);}

/* ハブ全体の縁取りも現在モードの色に */
.shop-hub-buyer{box-shadow:0 14px 38px rgba(21,19,26,.28),0 0 0 2px rgba(91,141,239,.45) inset;}
.shop-hub-seller{box-shadow:0 14px 38px rgba(21,19,26,.28),0 0 0 2px rgba(231,198,90,.45) inset;}

/* 切り替えボタン：選択中は各モードの色で塗る（買う＝青・売る＝金） */
.shop-mode-buyer.is-current{background:var(--buy-grad);border-color:transparent;color:#fff;}
.shop-mode-buyer.is-current span{color:rgba(255,255,255,.82);}
.shop-mode-seller.is-current{background:var(--sell-grad);border-color:transparent;color:#3a2c08;}
.shop-mode-seller.is-current span{color:rgba(58,44,8,.72);}

/* ページ全体のモード色：買う＝青系 / 売る＝金系 をはっきり分ける。
   （data-mode は会員がログイン中のみ body に付与される：buyer=入札 / seller=出品） */

/* --- ページ背景をモードごとにはっきり色分け --- */
body[data-mode="buyer"]{background:#E8F0FD;}   /* 買う＝ライトブルー */
body[data-mode="seller"]{background:#FBF3D9;}  /* 売る＝ウォームゴールド */

/* --- 見出し（ページタイトル）の下線をモード色に --- */
body[data-mode="buyer"] .page-head h1{border-bottom:3px solid var(--buy-accent);display:inline-block;padding-bottom:4px;}
body[data-mode="seller"] .page-head h1{border-bottom:3px solid var(--sell-accent);display:inline-block;padding-bottom:4px;}

/* --- セクション見出しにモード色の縦バーを付ける（各ページで一目で分かる） --- */
body[data-mode="buyer"] .section-title h2,body[data-mode="buyer"] .section-title h3{border-left:5px solid var(--buy-accent);padding-left:10px;}
body[data-mode="seller"] .section-title h2,body[data-mode="seller"] .section-title h3{border-left:5px solid var(--sell-accent);padding-left:10px;}

/* --- 統計カードの上辺をモード色に --- */
body[data-mode="buyer"] .stat-card{border-top:3px solid var(--buy-accent);}
body[data-mode="seller"] .stat-card{border-top:3px solid var(--sell-accent);}

/* --- 主要ボタン（CTA）をモード色に。買うモードは青、売るモードは金（既定）。 --- */
body[data-mode="buyer"] .btn-primary,
body[data-mode="buyer"] button[type="submit"].btn-primary{
  background:var(--buy-grad);color:#fff;box-shadow:0 8px 22px rgba(47,111,216,.38);
}
body[data-mode="buyer"] .btn-primary:hover{background:var(--buy-grad);filter:brightness(1.04);box-shadow:0 12px 30px rgba(47,111,216,.5);}
body[data-mode="buyer"] .btn-secondary{color:var(--buy-accent);border-color:var(--buy-accent);}
body[data-mode="buyer"] .btn-secondary:hover{background:var(--buy-soft);border-color:var(--buy-accent);color:var(--buy-accent);}

/* --- ナビの現在モードバッジ：買う＝青 / 売る＝金 --- */
body[data-mode="buyer"] .mode-badge{background:var(--buy-grad);color:#fff;}
body[data-mode="seller"] .mode-badge{background:var(--sell-grad);color:#3a2c08;}

/* --- カード等の面は白のまま可読性を確保（背景色に埋もれないように） --- */
body[data-mode="buyer"] .card,body[data-mode="seller"] .card{background:var(--surface);}

/* --- カタログ：残り時間バッジを見やすく --- */
.auction-timer{
  display:inline-flex;align-items:center;gap:4px;
  left:8px;bottom:8px;padding:5px 10px;border-radius:999px;
  background:rgba(14,31,51,.86);color:#fff;font-weight:800;font-size:.82rem;
  box-shadow:0 4px 12px rgba(14,31,51,.28);backdrop-filter:blur(2px);
}
.auction-timer .auction-timer-ic{font-size:.9rem;line-height:1;}
.auction-timer .auction-timer-text{font-family:var(--font-num);letter-spacing:.02em;}
.auction-timer.is-soon{background:linear-gradient(135deg,#c97a1a,#e0992a);color:#fff;}
.auction-timer.is-urgent{background:linear-gradient(135deg,#c0271f,#e23b30);color:#fff;animation:timerpulse 1.1s ease-in-out infinite;}
@keyframes timerpulse{0%,100%{transform:scale(1);box-shadow:0 4px 12px rgba(214,50,43,.35);}50%{transform:scale(1.05);box-shadow:0 6px 18px rgba(214,50,43,.55);}}

/* --- 入札詳細：受け渡し方法（行頭マークと折返しを揃える） --- */
.delivery-list{list-style:none;margin:8px 0;padding:0;}
.delivery-list li{display:flex;align-items:flex-start;gap:8px;padding:6px 0;line-height:1.7;}
.delivery-list .delivery-mark{flex:0 0 auto;color:var(--primary-3);font-size:.7rem;line-height:1.9;}
.delivery-list .delivery-text{flex:1;min-width:0;}
.delivery-list .delivery-fee{color:var(--muted);font-size:.9em;white-space:nowrap;}

/* --- 出品プレビュー --- */
.preview-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:12px 16px;border-radius:14px;
  background:linear-gradient(135deg,#2a2333,#3a2f1c);color:#fff;
  border:1px solid var(--gold-line);box-shadow:0 8px 22px rgba(20,18,24,.18);
  /* v163: プレビュー画面の最上部に常時表示（スクロールしても画面上部に固定） */
  position:sticky;top:calc(var(--topbar-h) + 8px);z-index:28;
}
@media (max-width:640px){
  .preview-bar{top:calc(var(--topbar-h) + 4px);padding:10px 12px;}
  .preview-bar-msg{font-size:.84rem;}
}
.preview-bar-msg{font-size:.9rem;line-height:1.6;flex:1 1 280px;}
.preview-bar-badge{display:inline-block;margin-right:8px;padding:3px 12px;border-radius:999px;background:var(--gold-grad);color:#3a2c08;font-weight:800;font-size:.78rem;}
.preview-bar-actions{display:flex;gap:8px;flex-wrap:wrap;flex:0 1 auto;min-width:0;max-width:100%;}
.live-pill-preview{background:linear-gradient(135deg,#e7c65a,#c9a227);color:#3a2c08;}

/* --- 入札成立バナー（商品トップで確認） --- */
.bid-success-banner{
  display:flex;align-items:center;gap:10px;
  margin:0 0 16px;padding:14px 18px;border-radius:14px;
  background:linear-gradient(135deg,#1f8f5f,#2fae74);color:#fff;font-weight:800;
  box-shadow:0 10px 28px rgba(31,143,95,.35);animation:bidbanner .4s ease;
}
.bid-success-banner.is-fading{opacity:0;transition:opacity .6s ease;}
.bid-success-banner.is-outbid{
  background:linear-gradient(135deg,#a8322e,#c74b3f);
  box-shadow:0 10px 28px rgba(168,50,46,.35);
}
.bid-success-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);font-size:1rem;}
@keyframes bidbanner{from{transform:translateY(-8px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* --- 出品者ダッシュボード：行内フォーム（再出品・削除） --- */
.listing-row-actions .inline-form{margin:0;}

/* --- マイページ：入札中の一括表示・その場入札 --- */
.livebid-list{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.livebid-row{display:flex;align-items:stretch;gap:16px;padding:14px 16px;flex-wrap:wrap;}
.livebid-main{display:flex;gap:12px;flex:1 1 260px;min-width:0;}
.livebid-thumb{flex:0 0 72px;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--bg-subtle);}
.livebid-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.livebid-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.livebid-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.livebid-head a{text-decoration:none;color:inherit;}
.livebid-figures{line-height:1.7;}
.livebid-cur{font-family:var(--font-num);color:var(--crimson);}
.livebid-timer{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--bg-subtle);color:var(--muted);font-size:.8rem;font-weight:700;}
.livebid-action{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;min-width:220px;border-left:1px solid var(--line);padding-left:16px;}
.livebid-input-wrap{display:flex;flex-direction:column;gap:6px;}
.livebid-amount{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-family:var(--font-num);font-size:1rem;}
.livebid-amount.ai-filled{background:var(--sell-soft);}
.livebid-quick{display:flex;gap:6px;}
.livebid-quick .quick-bid{flex:1;padding:6px 4px;font-size:.8rem;}
.livebid-delivery{padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-size:.86rem;}
.livebid-msg{min-height:1em;color:var(--muted);}
.livebid-msg.is-error{color:var(--danger);}
.livebid-msg.is-ok{color:var(--success);font-weight:700;}
/* 「入札したオークション」一覧の行内入札（ダブルタップ不要でそのまま入札できる） */
.history-inline-bid{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
}
.history-inline-bid .livebid-input-row{flex:1 1 220px;min-width:200px;}
.history-inline-bid .livebid-amount{max-width:220px;}
.history-inline-bid .livebid-quick{max-width:220px;}
.history-inline-bid .livebid-delivery{flex:0 0 auto;}
.history-inline-bid .livebid-submit{flex:0 0 auto;}
.history-inline-bid .livebid-msg{flex:1 1 100%;}
@media(max-width:640px){
  .livebid-action{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:12px;min-width:0;width:100%;}
}

/* ===== 現在モードの常時表示バッジ（売／買）＝左下フローティング ===== */
/* 出品（売り）＝金 / 入札（買い）＝青。クリックで各マイページへ。 */
.mode-float{
  position:fixed;left:10px;bottom:14px;z-index:45;
  display:inline-flex;align-items:center;text-decoration:none;
}
.mode-float:hover{text-decoration:none}
.mode-float-ic{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;line-height:1;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}
body[data-mode="seller"] .mode-float-ic{background:var(--sell-grad);color:#3a2c08}
body[data-mode="buyer"] .mode-float-ic{background:var(--buy-grad);color:#fff}
.mode-float-tx{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  margin-left:0;padding:4px 0;border-radius:999px;
  background:#fff;color:var(--ink,#2b2b2b);
  font-size:.75rem;font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:max-width .25s ease,opacity .25s ease,padding .25s ease,margin-left .25s ease;
}
.mode-float:hover .mode-float-tx,
.mode-float:focus-visible .mode-float-tx{
  max-width:130px;opacity:1;padding:4px 12px;margin-left:6px;
}
@media (max-width: 900px){
  /* モバイルは下部ナビの上に退避 */
  .mode-float{
    left:8px;
    bottom:calc(var(--mobile-nav-h) + 12px + env(safe-area-inset-bottom));
  }
  .mode-float-ic{width:32px;height:32px;font-size:.9rem}
}
@media print{ .mode-float{display:none} }

/* ========== 商品の受け渡し連絡（落札後の当事者間メッセージ v121） ========== */
.badge-alert{background:var(--danger-soft);color:var(--danger);border-color:rgba(214,50,43,.30)}
.deal-unread-total{margin-left:8px;vertical-align:middle;font-size:.74rem}
/* 集計カード「落札・取引中」の新着コンタクトバッジ（気付きやすいよう軽く点滅） */
.stat-unread-badge{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin-left:6px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--danger);color:#fff;font-size:.72rem;font-weight:700;line-height:1.4;animation:statUnreadPulse 1.6s ease-in-out infinite}
@keyframes statUnreadPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.stat-unread-badge{animation:none}}
.listing-row.has-deal-unread{border-left:3px solid var(--danger)}
.deal-contact-btn{position:relative;white-space:nowrap}
.deal-unread-pill{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:var(--radius-pill);background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;line-height:1}

.deal-contact-card{border-left:3px solid var(--primary-3)}
.deal-contact-summary{margin-bottom:10px}
/* ---------- v124: 取引の進行状況バー ---------- */
.deal-steps{display:flex;list-style:none;margin:14px 0 10px;padding:0;counter-reset:none}
.deal-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;gap:6px;min-width:0}
.deal-step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--border)}
.deal-step:first-child::before{display:none}
.deal-step.is-done::before{background:var(--primary-3)}
.deal-step-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;background:var(--bg-subtle);border:2px solid var(--border);color:var(--muted);position:relative;z-index:1}
.deal-step.is-done .deal-step-dot{background:var(--primary-3);border-color:var(--primary-3);color:#fff}
.deal-step.is-current .deal-step-dot{border-color:var(--primary-3);color:var(--primary-3);background:#fff;box-shadow:0 0 0 4px rgba(154,123,26,.15);animation:deal-step-pulse 1.8s ease-in-out infinite}
@keyframes deal-step-pulse{0%,100%{box-shadow:0 0 0 3px rgba(154,123,26,.12)}50%{box-shadow:0 0 0 6px rgba(154,123,26,.22)}}
.deal-step-label{font-size:.72rem;line-height:1.3;color:var(--muted);word-break:keep-all}
.deal-step.is-done .deal-step-label{color:var(--text)}
.deal-step.is-current .deal-step-label{color:var(--primary-3);font-weight:700}
.deal-step-now{display:block;font-size:.62rem;color:#fff;background:var(--primary-3);border-radius:999px;padding:1px 7px;margin-top:2px;font-weight:700;letter-spacing:.05em}
.deal-steps-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.deal-confirm-chip{font-size:.75rem;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-subtle);color:var(--muted)}
.deal-confirm-chip.is-done{border-color:var(--primary-3);color:var(--primary-3);background:rgba(154,123,26,.08);font-weight:700}
.deal-steps-note{margin:0 0 12px}
@media (max-width:640px){
  .deal-step-label{font-size:.64rem}
  .deal-step-dot{width:22px;height:22px;font-size:.72rem}
}

.deal-msg-thread{display:flex;flex-direction:column;gap:10px;max-height:380px;overflow-y:auto;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-subtle);margin-bottom:12px}
.deal-msg{display:flex;flex-direction:column;max-width:78%}
.deal-msg.is-mine{align-self:flex-end;align-items:flex-end}
.deal-msg.is-other{align-self:flex-start;align-items:flex-start}
.deal-msg-meta{margin-bottom:2px}
.deal-msg-bubble{padding:9px 12px;border-radius:12px;line-height:1.7;font-size:.92rem;word-break:break-word;white-space:normal}
.deal-msg.is-mine .deal-msg-bubble{background:var(--primary-3-soft);border:1px solid rgba(201,162,39,.35);border-bottom-right-radius:4px}
.deal-msg.is-other .deal-msg-bubble{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.deal-msg-form{display:flex;flex-direction:column;gap:8px}
.deal-msg-form textarea{resize:vertical}
.deal-msg-form-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.deal-msg-status.is-ok{color:var(--success)}
.deal-msg-status.is-error{color:var(--danger)}
@media (max-width:640px){
  .deal-msg{max-width:92%}
  .deal-msg-thread{max-height:320px}
}

/* ========== 出品一覧のグループ分け（v122） ========== */
/* 出品中バッジ：緑（開催中であることをひと目で） */
.badge-live{background:var(--success-soft);color:var(--success);border:1px solid rgba(31,143,95,.35);display:inline-flex;align-items:center;gap:5px;font-weight:700}
.badge-live .live-dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:livepulse 1.1s infinite}
/* 落札なしで終了バッジ：ダークグレー（終わった商品であることをひと目で） */
.badge-ended{background:#3A3A3A;color:#D9D9D9;border:1px solid #555}

.listing-group{margin-bottom:26px}
.listing-group-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.listing-group-title{margin:0;font-size:1.02rem}
.listing-group-mark{font-size:.9rem;line-height:1}
.mark-ended{color:#7A7A7A}
.mark-live{color:var(--success);animation:livepulse 1.1s infinite}
.mark-draft{color:var(--text-2)}

/* 落札なしで終了の行：全体をトーンダウンし、左に濃いグレーの帯 */
.listing-row-ended{border-left:4px solid #5A5A5A;background:var(--bg-subtle)}
.listing-row-ended .listing-row-thumb img{filter:grayscale(.85);opacity:.75}
.listing-row-ended .listing-row-head strong{color:var(--text-2)}

/* 出品中の行：左に緑の帯で「動いている」ことを強調 */
.listing-row-live{border-left:4px solid var(--success)}

/* 下書きの行：点線ボーダーで未公開を表現 */
.listing-group-draft .listing-row{border-left:4px dashed var(--border)}

/* ===== マイページ：集計カードのクリックでしぼり込み（①） ===== */
.stat-card-filter,
.stat-card-link{
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:box-shadow .15s ease, border-color .15s ease, transform .05s ease;
  position:relative;
}
.stat-card-filter:hover,
.stat-card-link:hover{
  box-shadow:var(--shadow-md,0 6px 20px rgba(15,32,53,.10));
  border-color:rgba(201,162,39,.45);
}
.stat-card-filter:focus-visible,
.stat-card-link:focus-visible{
  outline:2px solid var(--primary-3,#9A7B1A);
  outline-offset:2px;
}
.stat-card-filter:active,
.stat-card-link:active{ transform:translateY(1px); }
/* クリックできることを示す小さな目印 */
.stat-card-filter::after,
.stat-card-link::after{
  content:"⌕";
  position:absolute;
  top:8px;right:10px;
  font-size:.8rem;
  color:var(--muted);
  opacity:.5;
}
.stat-card-link::after{ content:"›"; font-size:1rem; }
/* 選択中のカードを強調（v186: 大きな金色バッジ✓＋背景色ではっきり分かるように） */
.stat-card-filter.is-active{
  border-color:var(--primary-3,#9A7B1A);
  background:linear-gradient(135deg,#fffdf3,#fcf3d8);
  box-shadow:0 0 0 2.5px var(--primary-3,#9A7B1A), var(--shadow-md,0 6px 20px rgba(15,32,53,.10));
}
.stat-card-filter.is-active .stat-label{color:var(--primary-3,#9A7B1A);font-weight:800}
.stat-card-filter.is-active::after{
  content:"✓";
  top:-10px;right:-10px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#c9a227,#9A7B1A);
  color:#fff;font-size:1rem;font-weight:800;line-height:1;
  opacity:1;
  box-shadow:0 3px 10px rgba(154,123,26,.5);
  border:2px solid #fff;
}
@media (max-width:640px){
  .stat-card-filter.is-active::after{width:22px;height:22px;font-size:.86rem;top:-8px;right:-8px}
  .stat-grid{overflow:visible;padding-top:6px} /* はみ出すバッジが切れないように */
}

/* しぼり込み状態バー */
.dash-filter-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:6px 0 14px;padding:9px 14px;
  background:rgba(154,123,26,.08);
  border:1px solid rgba(154,123,26,.28);
  border-radius:10px;
}
.dash-filter-label{font-weight:700;color:var(--text);font-size:.92rem}
.dash-filter-msg{margin:6px 0 14px}

/* ================= 落札お祝い演出（webaucCelebrate / celebration.js） ================= */
#webauc-celebration{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
#webauc-celebration.cele-out{opacity:0;transition:opacity .6s ease}
.cele-canvas{position:absolute;top:0;left:0;inset:0;width:100%;height:100%}
/* 金色フラッシュ：発火の瞬間に画面全体を一瞬光らせる */
.cele-flash{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:radial-gradient(circle at 50% 35%, rgba(255,244,200,.95), rgba(231,198,90,.55) 45%, rgba(231,198,90,0) 75%);opacity:0;animation:celeFlash .9s ease-out forwards}
@keyframes celeFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
/* 中央バナー＋回転する後光 */
.cele-banner-wrap{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.cele-rays{position:absolute;width:560px;height:560px;border-radius:50%;background:conic-gradient(from 0deg, rgba(231,198,90,.35) 0deg 14deg, rgba(231,198,90,0) 14deg 28deg, rgba(231,198,90,.35) 28deg 42deg, rgba(231,198,90,0) 42deg 56deg, rgba(231,198,90,.35) 56deg 70deg, rgba(231,198,90,0) 70deg 84deg, rgba(231,198,90,.35) 84deg 98deg, rgba(231,198,90,0) 98deg 112deg, rgba(231,198,90,.35) 112deg 126deg, rgba(231,198,90,0) 126deg 140deg, rgba(231,198,90,.35) 140deg 154deg, rgba(231,198,90,0) 154deg 168deg, rgba(231,198,90,.35) 168deg 182deg, rgba(231,198,90,0) 182deg 196deg, rgba(231,198,90,.35) 196deg 210deg, rgba(231,198,90,0) 210deg 224deg, rgba(231,198,90,.35) 224deg 238deg, rgba(231,198,90,0) 238deg 252deg, rgba(231,198,90,.35) 252deg 266deg, rgba(231,198,90,0) 266deg 280deg, rgba(231,198,90,.35) 280deg 294deg, rgba(231,198,90,0) 294deg 308deg, rgba(231,198,90,.35) 308deg 322deg, rgba(231,198,90,0) 322deg 336deg, rgba(231,198,90,.35) 336deg 350deg, rgba(231,198,90,0) 350deg 360deg);filter:blur(2px);animation:celeRays 6s linear infinite;mask-image:radial-gradient(circle, #000 30%, transparent 70%);-webkit-mask-image:radial-gradient(circle, #000 30%, transparent 70%)}
@keyframes celeRays{to{transform:rotate(360deg)}}
.cele-banner{position:relative;background:linear-gradient(160deg, #FFF8E1, #FBEFB6 55%, #F3DE8F);border:3px solid var(--primary-3, #9A7B1A);border-radius:18px;box-shadow:0 12px 40px rgba(154,123,26,.45), 0 0 0 6px rgba(255,255,255,.55);padding:22px 34px;text-align:center;animation:celeBanner .8s cubic-bezier(.22,1.6,.36,1) both}
@keyframes celeBanner{0%{transform:scale(.2) rotate(-6deg);opacity:0}60%{transform:scale(1.12) rotate(2deg);opacity:1}80%{transform:scale(.96) rotate(-1deg)}100%{transform:scale(1) rotate(0)}}
.cele-banner-title{font-family:var(--font-heading, serif);font-weight:800;font-size:clamp(1.3rem, 4.2vw, 2.2rem);color:#7A5E10;letter-spacing:.04em;text-shadow:0 2px 0 rgba(255,255,255,.8)}
.cele-banner-sub{margin-top:6px;font-weight:700;color:#8a6a17;font-size:clamp(.85rem, 2.4vw, 1.05rem)}
/* モノ降り（絵文字） */
.cele-fall{position:absolute;top:-48px;animation-name:celeFall;animation-timing-function:linear;animation-fill-mode:forwards;will-change:transform;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
@keyframes celeFall{0%{transform:translate(0,-48px) rotate(0deg)}25%{transform:translate(var(--sway,20px),25vh) rotate(90deg)}50%{transform:translate(calc(var(--sway,20px) * -1),50vh) rotate(200deg)}75%{transform:translate(var(--sway,20px),78vh) rotate(300deg)}100%{transform:translate(0,108vh) rotate(390deg)}}
/* 画面シェイク（発火直後の短時間だけ） */
body.cele-shake{animation:celeShake .55s ease-in-out}
@keyframes celeShake{0%,100%{transform:translate(0,0)}15%{transform:translate(-6px,3px)}30%{transform:translate(5px,-4px)}45%{transform:translate(-4px,-3px)}60%{transform:translate(4px,3px)}75%{transform:translate(-2px,2px)}90%{transform:translate(2px,-1px)}}
/* 動きを抑える設定へのフォールバック */
#webauc-celebration.cele-reduced .cele-flash,#webauc-celebration.cele-reduced .cele-rays{animation:none;opacity:.25}
#webauc-celebration.cele-reduced .cele-banner{animation:none}
@media (prefers-reduced-motion: reduce){body.cele-shake{animation:none}.cele-fall{animation-duration:.01s !important;opacity:0}}

/* 落札演出 強化版：バナーの鼓動＋輝きの掃引＋大粒モノ降り */
.cele-banner{animation:celeBanner .8s cubic-bezier(.22,1.6,.36,1) both, celePulse 1.4s ease-in-out .9s infinite;overflow:hidden}
@keyframes celePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.cele-banner::after{content:'';position:absolute;top:-60%;left:-30%;width:34%;height:220%;transform:rotate(20deg);background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));animation:celeShine 1.8s ease-in-out .5s infinite}
@keyframes celeShine{0%{left:-40%}60%,100%{left:120%}}
.cele-fall-big{filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));z-index:2}
@media (prefers-reduced-motion: reduce){.cele-banner{animation:none}.cele-banner::after{animation:none;display:none}}

/* ---------- ページ切り替えタブ（マイページ・下書き・終了・質問・通知などの常時表示タブ） ---------- */
.page-tabs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 8px;margin:2px 0 10px;border-bottom:1px solid var(--border)}
.page-tabs::-webkit-scrollbar{display:none}
.page-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-pill);font-size:.88rem;font-weight:600;color:var(--text-2);background:var(--surface);border:1px solid var(--border);white-space:nowrap;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.page-tab:hover{border-color:var(--primary-3);color:var(--primary-3)}
.page-tab.is-active{background:var(--gold-grad, var(--primary-3));color:#3a2c08;border-color:transparent;pointer-events:none}
.page-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--primary-3);color:#fff;font-size:.74rem;font-weight:700;font-family:var(--num);line-height:1}
.page-tab.is-active .page-tab-count{background:rgba(58,44,8,.85);color:#fff}

/* ================= v152: マイページ整理・買うモードの配色統一 ================= */
/* --- 買う（入札）モードは青系ファミリーに統一する ---
   商品ページ（価格・リンク・入札カード）やデポジット関連が「売る（金）」と同じ色で
   紛らわしかったため、買うモードではゴールドの基調色を青系へ差し替える。
   （data-mode は会員ログイン中のみ body に付与：buyer=入札 / seller=出品） */
body[data-mode="buyer"]{
  --primary:#2f6fd8;
  --primary-2:#1f57b8;
  --primary-3:#2b66c8;              /* リンク・価格・アクセント */
  --primary-3-soft:rgba(47,111,216,.12);
  --primary-soft:rgba(47,111,216,.10);
  --primary-2-soft:rgba(91,141,239,.18);
  --bg-subtle:#EDF3FD;              /* 淡い青の地（金の地から差し替え） */
  --surface-2:#F7FAFF;
  --line:#DCE6F6;
  --line-strong:#C2D4EF;
  --border:#DCE6F6;
  --gold-line:rgba(47,111,216,.28);
  --shadow:0 1px 2px rgba(20,24,32,.04), 0 10px 28px rgba(47,111,216,.10);
}

/* デポジット残高の警告バナーも、買うモードでは青系にする（金＝売ると紛らわしいため） */
body[data-mode="buyer"] .deposit-warn{
  background:linear-gradient(135deg,#eef4ff,#dce9ff);
  border-color:#7ba3e8;
  box-shadow:0 6px 18px rgba(47,111,216,.16);
}
body[data-mode="buyer"] .deposit-warn-body{color:#2a4d8f;}
body[data-mode="buyer"] .deposit-warn-body strong{color:#1c3a70;}

/* デポジット情報カード：各モードの同系色の面にして、売る／買うで迷わない */
body[data-mode="buyer"] .stat-card[data-guide="deposit"]{background:var(--buy-soft);}
body[data-mode="seller"] .stat-card[data-guide="deposit"]{background:var(--sell-soft);}

/* デポジット情報セクション（＋デポジット入金・入出金一覧を1箇所に集約） */
.deposit-info-card{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:18px 20px;
}
.deposit-info-balance{flex:1 1 220px;min-width:0;}
.deposit-info-actions{flex:0 0 auto;gap:10px;flex-wrap:wrap;}

/* ---------- 欲しい物の事前登録（v157）：複数選択＋まとめて登録 ---------- */
/* 複数選択のチェックリスト（カテゴリはスクロール、地域はグリッド） */
.alert-check-box{
  max-height:240px;overflow-y:auto;
  border:1px solid var(--line, #e3ddcf);border-radius:10px;
  background:var(--bg-subtle, #faf8f2);padding:6px 8px;
}
.alert-check-item{
  display:flex;align-items:center;gap:8px;
  padding:5px 6px;border-radius:8px;cursor:pointer;
  font-size:.92rem;line-height:1.35;
}
.alert-check-item:hover{background:rgba(154,123,26,.08)}
body[data-mode="buyer"] .alert-check-item:hover{background:rgba(47,111,216,.08)}
.alert-check-item input{flex:0 0 auto;width:16px;height:16px;accent-color:var(--primary-3,#9A7B1A)}
body[data-mode="buyer"] .alert-check-item input{accent-color:#2f6fd8}
.alert-check-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:0 4px;max-height:220px;
}
.alert-picked-count{font-weight:400;margin-left:8px}
.alert-picked-count b{font-family:'Oswald',sans-serif}

/* 登録中の条件：種類ごとに1枚のカードへチップでひとまとめ */
.alert-group-card{margin-bottom:12px}
.alert-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.alert-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 6px 5px 12px;border-radius:999px;
  background:var(--bg-subtle,#faf8f2);border:1px solid var(--line,#e3ddcf);
  font-size:.9rem;max-width:100%;
}
.alert-chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.alert-chip .inline-form{display:inline-flex;margin:0}
.alert-chip-del{
  border:0;background:transparent;cursor:pointer;
  color:var(--muted,#8a8577);font-size:.85rem;line-height:1;
  padding:4px 6px;border-radius:999px;
}
.alert-chip-del:hover{color:#c0392b;background:rgba(192,57,43,.1)}
@media (max-width:560px){
  .alert-chip-label{max-width:200px}
  .alert-check-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* ===== v161: 商品グリッドの表示列数切替（1〜4列） ===== */
.grid-cols-bar{display:flex;align-items:center;gap:6px;margin:2px 0 10px;justify-content:flex-end}
.grid-cols-label{margin-right:2px}
.grid-cols-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 9px;min-height:36px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--muted);
  font-size:.78rem;font-weight:700;cursor:pointer;line-height:1;
  transition:background .12s,color .12s,border-color .12s;
}
.grid-cols-btn:hover{border-color:var(--primary-3);color:var(--primary-3)}
.grid-cols-btn.is-active{background:var(--primary-3);border-color:var(--primary-3);color:#fff}
.grid-cols-ic{display:inline-flex;gap:2px}
.grid-cols-ic i{display:block;width:4px;height:12px;border-radius:1px;background:currentColor;opacity:.85}
/* v162: PC／スマホでボタンセットを出し分け（保存値も別々） */
.grid-cols-btn.for-sp{display:none}
.grid-cols-btn.for-pc{display:inline-flex}
@media (max-width:640px){
  .grid-cols-btn.for-sp{display:inline-flex}
  .grid-cols-btn.for-pc{display:none}
}
.grid-cols-unit{font-size:.62rem;font-weight:600;margin-left:1px;opacity:.8}
/* 列数の指定（切替バーで選択された場合）。未選択（data-cols無し）は従来のauto-fill。 */
.auction-grid[data-cols="1"]{grid-template-columns:1fr !important}
.auction-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr) !important}
.auction-grid[data-cols="3"]{grid-template-columns:repeat(3,1fr) !important}
.auction-grid[data-cols="4"]{grid-template-columns:repeat(4,1fr) !important}
.auction-grid[data-cols="6"]{grid-template-columns:repeat(6,1fr) !important;gap:12px}
.auction-grid[data-cols="8"]{grid-template-columns:repeat(8,1fr) !important;gap:10px}
.auction-grid[data-cols="12"]{grid-template-columns:repeat(12,1fr) !important;gap:8px}
/* PC多列時の圧縮表示（6列〜） */
.auction-grid[data-cols="6"] .auction-card-body,
.auction-grid[data-cols="8"] .auction-card-body{padding:8px 9px 10px;gap:5px}
.auction-grid[data-cols="12"] .auction-card-body{padding:6px 7px 8px;gap:4px}
.auction-grid[data-cols="6"] .auction-title{font-size:.84rem;line-height:1.3}
.auction-grid[data-cols="8"] .auction-title{font-size:.76rem;line-height:1.25}
.auction-grid[data-cols="12"] .auction-title{font-size:.68rem;line-height:1.2;-webkit-line-clamp:2}
.auction-grid[data-cols="6"] .auction-price{font-size:1rem}
.auction-grid[data-cols="8"] .auction-price{font-size:.88rem}
.auction-grid[data-cols="12"] .auction-price{font-size:.78rem}
.auction-grid[data-cols="8"] .auction-meta,
.auction-grid[data-cols="12"] .auction-meta{display:none}
.auction-grid[data-cols="8"] .auction-bidcount{font-size:.66rem}
.auction-grid[data-cols="12"] .auction-bidcount{display:none}
.auction-grid[data-cols="6"] .auction-timer,
.auction-grid[data-cols="8"] .auction-timer{font-size:.66rem;padding:2px 6px;left:5px;bottom:5px}
.auction-grid[data-cols="12"] .auction-timer{font-size:.6rem;padding:1px 5px;left:4px;bottom:4px}
.auction-grid[data-cols="12"] .auction-timer-ic{display:none}
.auction-grid[data-cols="8"] .card-watch-btn{transform:scale(.85);transform-origin:top right}
.auction-grid[data-cols="12"] .card-watch-btn{transform:scale(.72);transform-origin:top right}
.auction-grid[data-cols="12"] .auction-new-badge{font-size:.56rem;padding:1px 5px}
/* 多列時は文字・余白を詰めて1画面に多く収める */
/* v163: 文字の被り・縦1文字折れ対策（全列数共通の安全策） */
.auction-card-body{min-width:0}
.auction-card-body>*{min-width:0}
.auction-timer{white-space:nowrap}
.auction-price{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.auction-price-row{min-width:0}
/* PC 8・12列（カード幅が狭い）：価格行を縦積みにして被りを防ぐ */
.auction-grid[data-cols="8"] .auction-price-row,
.auction-grid[data-cols="12"] .auction-price-row{flex-direction:column;align-items:flex-start;gap:1px}
/* v163: 3・4列の圧縮スタイルはスマホ専用に変更（PCの4列は既定表示のため通常サイズで表示する） */
@media (max-width:640px){
  .auction-grid[data-cols="3"] .auction-card-body{padding:7px 8px 9px;gap:4px}
  .auction-grid[data-cols="4"] .auction-card-body{padding:6px 7px 8px;gap:3px}
  .auction-grid[data-cols="3"] .auction-title{font-size:.78rem;line-height:1.3}
  .auction-grid[data-cols="4"] .auction-title{font-size:.7rem;line-height:1.25}
  .auction-grid[data-cols="3"] .auction-price{font-size:.92rem}
  .auction-grid[data-cols="4"] .auction-price{font-size:.8rem}
  .auction-grid[data-cols="3"] .auction-meta,
  .auction-grid[data-cols="4"] .auction-meta{display:none}
  /* 価格行：横並び（価格⇔入札件数）をやめて縦積みにし、狭いカードでの被りをなくす */
  .auction-grid[data-cols="3"] .auction-price-row,
  .auction-grid[data-cols="4"] .auction-price-row{flex-direction:column;align-items:flex-start;gap:1px}
  .auction-grid[data-cols="3"] .auction-bidcount{font-size:.62rem}
  .auction-grid[data-cols="4"] .auction-bidcount{display:none}
  .auction-grid[data-cols="3"] .auction-timer{font-size:.62rem;padding:1px 5px;left:4px;bottom:4px}
  .auction-grid[data-cols="4"] .auction-timer{font-size:.58rem;padding:1px 4px;left:3px;bottom:3px}
  .auction-grid[data-cols="4"] .auction-timer-ic{display:none}
  .auction-grid[data-cols="4"] .auction-new-badge{font-size:.56rem;padding:1px 4px}
  .auction-grid[data-cols]{gap:10px}
  .auction-grid[data-cols="3"]{gap:8px}
  .auction-grid[data-cols="4"]{gap:6px}
  .auction-grid[data-cols="3"] .card-watch-btn{transform:scale(.85);transform-origin:top right}
  .auction-grid[data-cols="4"] .card-watch-btn{transform:scale(.7);transform-origin:top right}
  .grid-cols-bar{position:sticky;top:0;z-index:5;background:var(--bg,#f6f4ee);padding:6px 0;margin:0 0 8px;justify-content:flex-end}
}

/* ===== v161: スマホUI/UX改善 ===== */
@media (max-width:640px){
  /* iOSでフォーカス時に画面が拡大されないよう、入力系は16px以上にする */
  input[type="text"],input[type="number"],input[type="email"],input[type="tel"],
  input[type="password"],input[type="search"],input[type="date"],select,textarea{
    font-size:16px;min-height:44px;
  }
  /* タップしやすいボタンサイズ（44px目安） */
  .btn,button.btn{min-height:44px}
  .btn-sm{min-height:38px}
  /* 表は横スクロールで崩れを防ぐ（.table-scroll で包んだ表／素の .table 両対応） */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
  .table-scroll .table{min-width:520px}
  /* v182: .table-stack（ウォレット等のカード積み上げ表）は横スクロール化の対象外にする。
     ここが table-stack にも効いてしまい、見出し行が残る・値が右へはみ出す崩れの原因だった。 */
  .card > table.table:not(.table-stack){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .card > table.table:not(.table-stack) thead,.card > table.table:not(.table-stack) tbody,.card > table.table:not(.table-stack) tr{display:table;width:100%;table-layout:auto}
  /* カード内の余白・見出しの整理 */
  .section-title{font-size:1.02rem}
  .page-head h1{line-height:1.3}
  /* フィルタフォームは折りたたみ感を出すため余白を詰める */
  .filter-card{padding:12px}
  .filter-card .form-grid{gap:8px}
  /* デポジット関連 */
  .deposit-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .deposit-presets .deposit-preset{width:100%}
  .refund-route-note{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-subtle,#faf8f2)}
  /* 通知やフラッシュの読みやすさ */
  .flash{line-height:1.6}
}
@media (min-width:641px){
  .refund-route-note{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-subtle,#faf8f2)}
  .table-scroll{overflow-x:auto}
}
.payout-schedule-box{margin:8px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-subtle,#faf8f2)}

/* ===== v164: カテゴリー段階選択（大分類→中分類→小分類） ===== */
.cat-cascade-row{display:flex;flex-direction:column;gap:8px}
.cat-cascade-row select{width:100%}
@media (min-width:641px){
  .cat-cascade-row{flex-direction:row;flex-wrap:wrap}
  .cat-cascade-row select{flex:1 1 200px;min-width:180px;width:auto}
}
.cat-cascade select.ai-filled{outline:2px solid var(--gold-line,#c9a227);transition:outline .3s}
/* 欲しいもの登録：追加したカテゴリのチップ */
.alert-cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.alert-cat-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg-subtle,#faf8f2);font-size:.86rem;line-height:1.4}
.alert-cat-chip-del{border:0;background:transparent;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;padding:2px 4px;border-radius:50%}
.alert-cat-chip-del:hover{color:var(--danger,#c0392b);background:rgba(192,57,43,.08)}

/* ===== v166: 一覧カードのウォッチ数 ===== */
.auction-watchers{margin-left:8px;color:var(--gold-4,#a8842c);font-weight:700;white-space:nowrap}
.live-chips .chip-dark{white-space:nowrap}

/* ===== v166: スマホで文字が縦に間延びする問題の対策 ===== */
/* はじめの設定ステップ（全ページ共通のガイドバー）：
   タイトルが潰れて1文字ずつ縦に折れていたため、スマホでは
   1行目＝✨＋タイトル＋▾、2行目＝進捗＋メーターの2段組みにする。 */
@media (max-width:640px){
  .onboarding-bar{flex-wrap:wrap;row-gap:6px;padding:10px 12px;font-size:.9rem}
  .onboarding-bar strong{flex:1 1 0;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
  .onboarding-caret{margin-left:0}
  .onboarding-progress{flex:0 0 auto;order:4;margin-left:2px}
  .onboarding-meter{flex:1 1 auto;order:5;max-width:none;min-width:80px}
  .onb-cta-pill{padding:11px 12px;gap:8px}
  .onb-cta-pill .tx{flex:1 1 100%;min-width:0}
  .onb-cta-pill .tx b,.onb-cta-pill .tx span{overflow-wrap:anywhere}
  .onb-cta-pill .btn{flex:1 1 auto;text-align:center}
}
/* 文字を含むフレックス子要素が極端に潰れないようにする共通の安全策 */
.page-head>*,
.section-title,
.live-chips>*,
.onboarding-step-body{min-width:0}
.page-head h1,.page-head h2,.page-head h3,
.section-title,
.onboarding-step-body strong,
.live-head,
.card h2,.card h3{overflow-wrap:anywhere}

/* v166: ウォッチリストの絞り込み行（スマホでラベルが縦に折れないように） */
@media (max-width:640px){
  .watch-filter{flex-wrap:wrap}
  .watch-filter>span{flex:0 0 auto;white-space:nowrap}
  .watch-filter select{flex:1 1 160px;max-width:100%;min-width:0}
}

/* ===== v167: スマホの縦間延び対策（第2弾：取引・出品などの一覧行） ===== */
/* .listing-row（マイページの落札取引中・取引終了・出品中・入札なし一覧などの共通行）は
   サムネ＋本文＋右端ボタン列の横並びのため、スマホでは本文が潰れて1文字ずつ縦に折れていた。
   スマホでは「1行目＝サムネ＋本文」「2行目＝ボタン列（全幅・横並び）」の2段組みにする。 */
@media (max-width:640px){
  .listing-row{flex-wrap:wrap;align-items:flex-start;gap:10px;padding:10px 12px}
  .listing-row-thumb{flex:0 0 64px;width:64px;height:64px}
  .listing-row-body{flex:1 1 0;min-width:0}
  .listing-row-head{min-width:0}
  .listing-row-head strong{overflow-wrap:anywhere;line-height:1.4}
  .listing-row-body .small{overflow-wrap:anywhere}
  .listing-row-actions{
    flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:flex-end;gap:8px;margin-top:2px;
  }
  .listing-row-actions .btn{white-space:nowrap;flex:0 0 auto}
  .listing-row-actions .small{flex:0 0 auto}
  /* 通知センターの行も同様に（本文＋右端ボタン → 2段組み） */
  .notify-item{flex-wrap:wrap}
  .notify-item-body{flex:1 1 0;min-width:0}
  .notify-item-body,.notify-item-head{overflow-wrap:anywhere}
  .notify-item-action{flex:1 1 100%;display:flex;justify-content:flex-end}
}

/* ===== v168: スマホ初期画面の再デザイン（コンパクト化＝開いてすぐ使えるUI） =====
   PC版は変更なし。スマホ（640px以下）でマイページ上部の各ブロックを圧縮し、
   最初の1〜2画面で「状況の把握 → 目的の操作」に到達できるようにする。 */
@media (max-width:640px){
  /* 1) 統計カード：縦積み → 2列のコンパクトグリッド（奇数枚なら最後だけ全幅） */
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat-grid .stat-card{padding:10px 12px;border-radius:12px;min-width:0}
  .stat-num{font-size:1.18rem;line-height:1.25;overflow-wrap:anywhere}
  .stat-unread-badge{font-size:.64rem}
  .stat-label{font-size:.76rem;margin-top:2px}
  .stat-grid > .stat-card:last-child:nth-child(odd){grid-column:1 / -1}

  /* 2) お店ハブ：あいさつ文・モード帯を省略し、モード切替を2列のコンパクトなボタンに */
  .shop-hub{padding:12px 12px 10px;border-radius:14px}
  .shop-hub-mode-flag{display:none}
  .shop-hub-sub{display:none}
  .shop-hub-top{gap:10px}
  .shop-hub-avatar{width:38px;height:38px;font-size:1.1rem;border-radius:10px}
  .shop-hub-name{font-size:1.02rem}
  .shop-hub-verify,.shop-hub-badge-dealer{margin-top:4px;font-size:.7rem;padding:2px 8px}
  .shop-hub-profile-btn{font-size:.74rem;padding:6px 10px;min-height:34px}
  .shop-modes{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .shop-mode{padding:10px;border-radius:11px}
  .shop-mode .ic{font-size:1.1rem}
  .shop-mode b{font-size:.86rem}
  .shop-mode .tx > span{display:none} /* 補足文は省略（現在モードは配色で判別） */

  /* 3) デポジット警告：要点1行＋入金ボタンに圧縮（詳細はデポジットページに記載） */
  .deposit-warn{padding:10px 12px;gap:8px;align-items:center}
  .deposit-warn-body{flex:1 1 150px;font-size:.8rem;line-height:1.45}
  .deposit-warn-body strong{margin-bottom:0}
  .deposit-warn-body > span{display:none}
  .deposit-warn .btn{white-space:nowrap;flex:0 0 auto}

  /* 4) 「次にやること」ピル：1行に圧縮（タイトル＋進むボタン） */
  .onb-cta-pill{padding:9px 12px;gap:8px;align-items:center}
  .onb-cta-pill .ic{font-size:1.05rem}
  .onb-cta-pill .tx{flex:1 1 0;min-width:0}
  .onb-cta-pill .tx b{font-size:.85rem;overflow-wrap:anywhere}
  .onb-cta-pill .tx span{display:none}
  .onb-cta-pill .btn{flex:0 0 auto;min-height:38px;padding:8px 12px;font-size:.82rem}

  /* 5) 見出し直下の説明文は2行まで（それ以上は省略。詳細は各画面・ガイド参照） */
  #dash-deal > .small.muted, #dash-done > .small.muted, #dash-bidding > .small.muted,
  #dash-listings > .small.muted, #dash-deposit > .small.muted,
  .section-title + p.small.muted{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* 6) 全体の密度：カード余白と縦マージンを圧縮して初期画面を短くする */
  .card{padding:13px 12px}
  .stat-grid{margin-bottom:6px}
  .section-title{margin:14px 0 6px}
  .section-actions{gap:8px}
  .section-actions .btn{flex:1 1 auto;text-align:center}
}

/* ===== v169: スマホのカタログは「写真は写真だけ」（写真の上に文字を載せない） ===== */
/* 本文側の残り時間行（PCでは非表示。写真上のオーバーレイはPCのみ） */
.auction-body-timer{display:none}
.auction-new-inline{
  display:inline-block;background:linear-gradient(135deg,#D6322B,#a31f1a);color:#fff;
  font-size:.6rem;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:1px;
}
@media (max-width:640px){
  /* 写真上のオーバーレイ（残り時間・NEWバッジ）はスマホでは表示しない */
  .auction-thumb .auction-timer{display:none}
  .auction-thumb .auction-new-badge{display:none}
  /* 残り時間・NEW は本文（写真の下）に表示 */
  .auction-body-timer{
    display:flex;align-items:center;gap:4px;color:var(--text-2);
    font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .auction-body-timer .auction-timer-text{font-family:var(--font-num);letter-spacing:.02em}
  .auction-body-timer.is-soon{color:#c97a1a}
  .auction-body-timer.is-urgent{color:#c0271f}
  /* ウォッチ☆ボタンは残すが、写真を隠さないよう小さく・端に */
  .auction-thumb .card-watch-btn{width:28px;height:28px;font-size:.92rem;top:4px;right:4px;opacity:.92}
  /* 3・4列時は本文タイマーも小さく */
  .auction-grid[data-cols="3"] .auction-body-timer,
  .auction-grid[data-cols="4"] .auction-body-timer{font-size:.68rem}
  .auction-grid[data-cols="4"] .auction-new-inline{display:none}
}

/* ===== v170: 「説明文を隠す」設定＆スマホの出品一覧の縦圧縮 ===== */
/* --- 説明文の表示切り替え（なれてきた利用者向け・会員ごとにサーバー保存） --- */
.help-toggle-row{display:flex;justify-content:flex-end;flex:1 1 auto}
.help-toggle{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;min-height:32px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--text-2);font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;
}
.help-toggle:hover{border-color:var(--gold-3);color:var(--gold-4)}
/* 非表示の対象：ガイドバー・各セクション見出し下の説明・統計カード下のヒント */
body.hide-help .onboarding{display:none}
body.hide-help .section-title + p.small.muted,
body.hide-help #dash-deal > .small.muted,
body.hide-help #dash-done > .small.muted,
body.hide-help #dash-bidding > .small.muted,
body.hide-help #dash-listings > .small.muted,
body.hide-help #dash-deposit > .small.muted,
body.hide-help .stat-grid + .small.muted,
body.hide-help .page-head > p.muted{display:none}

/* --- スマホ：出品一覧（listing-row）の縦の間延びをさらに圧縮 --- */
@media (max-width:640px){
  .listing-rows{gap:8px}
  .listing-row{padding:8px 10px;gap:8px}
  .listing-row-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:8px}
  .listing-row-body{gap:2px}
  .listing-row-head{gap:6px;row-gap:2px}
  .listing-row-head strong{font-size:.88rem;line-height:1.35}
  .listing-row-head .badge{font-size:.62rem;padding:2px 7px}
  .listing-row-body .small{font-size:.74rem;line-height:1.5}
  .listing-row-actions{gap:6px;margin-top:0}
  .listing-row-actions .btn,
  .listing-row-actions .btn-sm{min-height:32px;padding:5px 10px;font-size:.78rem}
}

/* ===== v171: スマホの固定入札バー（入札までの距離を短縮） ===== */
.sp-bid-bar{display:none}
@media (max-width:640px){
  .sp-bid-bar{
    position:fixed;left:0;right:0;z-index:60;
    bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;
    background:rgba(255,253,246,.97);border-top:1.5px solid var(--gold-line);
    box-shadow:0 -6px 18px rgba(31,26,36,.12);
    backdrop-filter:blur(6px);
  }
  .sp-bid-info{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.15}
  .sp-bid-label{font-size:.62rem;color:var(--muted)}
  .sp-bid-price{font-family:var(--font-num);font-weight:800;font-size:1.02rem;color:var(--onyx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sp-bid-goto{flex:0 0 auto;min-height:40px;padding:7px 10px;font-size:.76rem;white-space:nowrap}
  .sp-bid-now{flex:1 1 auto;min-height:44px;padding:9px 10px;font-size:.9rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* バーの分だけ本文下部に余白を足して、フッター・フォームが隠れないようにする */
  body.has-sp-bid-bar .container{padding-bottom:calc(var(--mobile-nav-h) + 92px + env(safe-area-inset-bottom))}
}

/* ===== v172: 写真のドラッグ並び替え（マウス・指） ===== */
.pm-item{cursor:grab}
.pm-item.pm-dragging,.image-manage-item.pm-dragging{opacity:.55}
.pm-item.pm-touch-dragging,.image-manage-item.pm-touch-dragging{
  opacity:.85;transform:scale(1.06);box-shadow:0 10px 24px rgba(31,26,36,.28);z-index:5;
}
.pm-item.pm-over,.image-manage-item.pm-over{outline:2.5px solid var(--gold-3);outline-offset:2px;border-radius:10px}
.image-manage-item[draggable="true"]{cursor:grab;position:relative;transition:transform .12s ease}
.image-manage-item[draggable="true"] img{-webkit-user-drag:none}

/* ===== v173: スマホの出品・取引一覧をさらに圧縮（行の高さを約半分に） ===== */
@media (max-width:640px){
  .listing-rows{gap:6px}
  .listing-row{padding:6px 8px;gap:8px}
  .listing-row-thumb{flex:0 0 44px;width:44px;height:44px;border-radius:6px}
  .listing-row-body{gap:1px}
  .listing-row-head{gap:5px;row-gap:0;align-items:center}
  .listing-row-head>a{min-width:0;flex:1 1 auto;overflow:hidden}
  .listing-row-head strong{
    display:block;font-size:.84rem;line-height:1.35;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .listing-row-head .badge{font-size:.58rem;padding:1px 6px}
  /* 情報行は1行に省略表示（詳細は各取引・出品の画面で確認できる） */
  .listing-row-body .small{
    font-size:.72rem;line-height:1.45;max-width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* 2行目以降の情報行（終了日時・受け渡し方法など）はスマホでは省略 */
  .listing-row-body .small + .small{display:none}
  .listing-row-actions{gap:4px;margin-top:0}
  .listing-row-actions .btn,
  .listing-row-actions .btn-sm{min-height:28px;padding:3px 9px;font-size:.74rem}
  .listing-row-actions .small{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* ===== v174: 落札取引中＝ステップバーを最上部へ（SP）・取引一覧の縦幅をさらに半分に ===== */
/* ページ最上部のステップバー（スマホのみ。PCは従来どおり受け渡し連絡カード内） */
.deal-steps-top{display:none}
@media (max-width:640px){
  .deal-steps-top{
    display:block;margin:0 0 10px;padding:8px 10px 6px;
    background:var(--surface);border:1.5px solid var(--gold-line);border-radius:12px;
    box-shadow:0 4px 14px rgba(201,162,39,.12);
  }
  .deal-steps-top-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .deal-steps-top-head strong{font-size:.82rem}
  .deal-steps-top-link{font-size:.74rem;font-weight:700;color:var(--gold-4);white-space:nowrap}
  .deal-steps-top .deal-steps{margin:6px 0 2px}
  .deal-steps-top .deal-step-dot{width:20px;height:20px;font-size:.66rem;border-width:1.5px}
  .deal-steps-top .deal-step::before{top:10px}
  .deal-steps-top .deal-step-label{font-size:.58rem;line-height:1.25}
  .deal-steps-top .deal-step-now{font-size:.52rem}
  /* 重複を避けるため、スマホでは受け渡し連絡カード内のステップバーは出さない */
  .deal-contact-card .deal-steps{display:none}
}

/* 取引・出品一覧の行：ボタン行をサムネイルの横に格納して、行の高さをさらに圧縮 */
@media (max-width:640px){
  .listing-row{
    display:grid;grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:"thumb body" "thumb actions";
    column-gap:8px;row-gap:3px;align-items:start;
  }
  .listing-row-thumb{grid-area:thumb}
  .listing-row-body{grid-area:body;min-width:0}
  .listing-row-actions{
    grid-area:actions;flex:none;width:100%;
    flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;
    gap:4px;margin-top:0;
  }
  .listing-row-actions .btn,
  .listing-row-actions .btn-sm{min-height:26px;padding:2px 8px;font-size:.72rem}
  /* 取引行の状態バッジはさらに小さく（1行に収める） */
  .listing-row-head .badge{font-size:.56rem;padding:1px 5px}
}

/* ===== v175: 出品画面（新規出品・編集）でも「説明文を隠す」を有効に ===== */
/* 動的な状態表示（#ai-hint＝解析状況・#end-at-warn＝時刻の警告）は隠さない。 */
body.hide-help[data-page^="public/seller/auction_create.php"] .field > span.small.muted,
body.hide-help[data-page^="public/seller/auction_create.php"] .field > .small.muted,
body.hide-help[data-page^="public/seller/auction_create.php"] p.small.muted,
body.hide-help[data-page^="public/seller/auction_create.php"] #pm-hint,
body.hide-help[data-page^="public/seller/auction_edit.php"] .field > span.small.muted,
body.hide-help[data-page^="public/seller/auction_edit.php"] .field > .small.muted,
body.hide-help[data-page^="public/seller/auction_edit.php"] p.small.muted,
body.hide-help[data-page^="public/seller/auction_edit.php"] #pm-hint{display:none}
body.hide-help[data-page^="public/seller/auction_create.php"] #ai-hint,
body.hide-help[data-page^="public/seller/auction_edit.php"] #ai-hint{display:inline}

/* ===== v176: 取引の詳細ビュー（取引終了後の閲覧ページ） ===== */
.deal-view-head{align-items:flex-start}
.deal-view-table th{width:38%;text-align:left;font-weight:700;color:var(--text-2);white-space:nowrap}
.deal-view-table td{overflow-wrap:anywhere}
.deal-steps-view{margin:10px 0 8px}
.deal-msg-thread-view{max-height:none}
@media (max-width:640px){
  .deal-view-table th{width:44%;font-size:.78rem}
  .deal-view-table td{font-size:.82rem}
}

/* ===== v179: 領収証の商品紐づけ表示・宛名設定 ===== */
.receipt-item{
  margin:4px 0 10px;padding:7px 12px;border:1px dashed var(--line);border-radius:8px;
  font-size:.82rem;color:var(--text-2);line-height:1.6;overflow-wrap:anywhere;
}
.receipt-addressee{margin:0 0 12px;padding:12px 14px}
.receipt-addressee>summary{cursor:pointer;font-weight:700;font-size:.88rem;color:var(--text-2)}
.receipt-addressee-form{margin-top:10px;display:flex;flex-direction:column;gap:8px;max-width:460px}

/* ===== v180: スマホのウォレット（デポジット入出金）は横スクロールなしのカード積み上げ表示 ===== */
@media (max-width:640px){
  /* 既存の「表はSPで横スクロール」指定（.card > table.table）を打ち消し、
     1レコード＝1カードの縦積みに変換する（data-label が項目名になる）。 */
  .card > table.table.table-stack,
  table.table-stack{display:block;overflow-x:visible;white-space:normal}
  .table-stack thead{display:none}
  .table-stack tbody{display:block;width:100%}
  .table-stack tr{
    display:block;border:1px solid var(--line);border-radius:10px;
    margin:0 0 8px;padding:8px 10px;background:var(--surface);
  }
  .table-stack td{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:2px 0;border:none;white-space:normal;overflow-wrap:anywhere;text-align:right;
  }
  .table-stack td::before{
    content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:600;
    flex:0 0 auto;text-align:left;white-space:nowrap;
  }
  .table-stack td:empty{display:none}
  .table-stack td[data-label=""]::before{content:none}
}

/* ===== v181: カタログは写真が主役（SP）・ウォッチ☆は写真に載せない・料金/デポジットのSP改善 ===== */
/* ウォッチ☆：マークアップは価格行へ移動。PCは従来どおり写真右上に重ねて表示する。 */
.auction-card{position:relative}
.auction-card .card-watch-btn{
  position:absolute;right:8px;top:8px;z-index:2;
  width:34px;height:34px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(20,18,24,.55);color:#fff;font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease, background .15s ease;
}
.auction-card .card-watch-btn:hover{transform:scale(1.08)}
.auction-card .card-watch-btn.is-watching{background:linear-gradient(135deg,#e7c65a,#c9a227);color:#3a2c08}

@media (max-width:640px){
  /* 1) 列数は最大2列（保存済みの3・4列も2列へ丸め。JS側でも丸めるが保険でCSSでも固定） */
  /* v184: スマホは4列まで対応。PC専用の6/8/12列だけは保険で2列へ丸める。 */
  .auction-grid[data-cols="6"],
  .auction-grid[data-cols="8"],
  .auction-grid[data-cols="12"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  /* 2) 写真を主役に：正方形・隙間最小・本文は1〜2行だけ */
  .auction-grid{gap:6px !important}
  .auction-thumb{aspect-ratio:1/1}
  .auction-card{border-radius:10px}
  .auction-card-body{padding:6px 8px 8px;gap:2px}
  .auction-title{font-size:.76rem;line-height:1.3;-webkit-line-clamp:1}
  .auction-meta{display:none}
  .auction-body-timer{font-size:.64rem;gap:3px}
  .auction-price-row{align-items:center;gap:6px;margin-top:0}
  .auction-price-row > div:first-child .small{display:none} /* 「現在価格」ラベルは省略 */
  .auction-price{font-size:.92rem}
  .auction-bidcount{font-size:.62rem}
  .auction-watchers{margin-left:5px}
  /* 3) ウォッチ☆は写真の上に載せない：価格行の右端に小さく表示 */
  .auction-card .card-watch-btn{
    position:static;flex:0 0 auto;width:28px;height:28px;font-size:.95rem;
    background:transparent;color:var(--gold-4);border:1.5px solid var(--gold-line);
  }
  .auction-card .card-watch-btn.is-watching{background:linear-gradient(135deg,#e7c65a,#c9a227);color:#3a2c08;border-color:transparent}

  /* 4) Web使用料・デポジットのページを読みやすく */
  .prose-like{font-size:.88rem}
  .prose-like p,.prose-like li{line-height:1.75}
  .prose-like .delivery-list{padding-left:18px}
  .prose-like .delivery-list li{margin-bottom:6px}
  .legal-table.table-stack th{white-space:normal}
  .deposit-presets{gap:6px}
  .deposit-presets .deposit-preset{flex:1 1 calc(33.33% - 6px);min-height:38px;padding:6px 4px;font-size:.8rem;white-space:nowrap}
  #deposit-balance{font-size:1.5rem}
  .form-grid{grid-template-columns:1fr}
}

/* ===== v182: スマホの表示崩れ・間延びの修正一式 ===== */
@media (max-width:640px){
  /* 1) table-stack の保険（後発ルールに負けないよう明示・値は右端に揃える） */
  .card > table.table.table-stack{display:block !important;overflow-x:visible !important;white-space:normal !important}
  .card > table.table.table-stack thead{display:none !important}
  .card > table.table.table-stack tbody{display:block !important;width:100%}
  .card > table.table.table-stack tr{display:block !important;width:auto !important}
  .table-stack td{width:auto}
  .table-stack td::before{margin-right:auto}

  /* 2) カタログの縦間延び：タイトル・タイマー・価格行をさらに詰める */
  .auction-card-body{padding:5px 7px 7px;gap:1px}
  .auction-body-timer{margin:0}
  .auction-price-row{min-height:30px}

  /* 3) 入札なし・取り下げ一覧：チェックボックスは行の左上（縦の無駄をなくす） */
  .listing-row-ended{
    grid-template-columns:auto 44px minmax(0,1fr);
    grid-template-areas:"check thumb body" "check thumb actions";
  }
  .listing-row-ended .bulk-check-cell{grid-area:check;align-self:start;padding:2px 2px 0 0}
  .listing-row-ended .bulk-check-cell input{width:18px;height:18px}

  /* 4) 取引の詳細（取引終了ビュー）：1画面で見渡せるよう圧縮 */
  body[data-page^="public/deal_view.php"] .card{padding:10px 10px;margin-bottom:8px}
  body[data-page^="public/deal_view.php"] .section-title{margin:0 0 6px;font-size:.94rem}
  body[data-page^="public/deal_view.php"] .page-head{margin-bottom:8px}
  .deal-view-table th,.deal-view-table td{padding:5px 6px;font-size:.78rem;border-bottom:1px solid var(--line)}
  .deal-view-table tr:last-child th,.deal-view-table tr:last-child td{border-bottom:none}
  .deal-steps-view{margin:4px 0 6px}
  .deal-steps-view .deal-step-dot{width:20px;height:20px;font-size:.66rem;border-width:1.5px}
  .deal-steps-view .deal-step::before{top:10px}
  .deal-steps-view .deal-step-label{font-size:.56rem;line-height:1.25}
  .deal-msg-thread-view{padding:8px;gap:6px}
  .deal-msg-thread-view .deal-msg-bubble{padding:6px 9px;font-size:.82rem;line-height:1.55}
  .deal-view-head .listing-row-actions .btn{min-height:28px}
}

/* ===== v183: 落札取引中の「取り消す」は折りたたみの中へ（誤タップ防止） ===== */
.deal-danger{width:100%;margin-top:2px}
.deal-danger>summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;
  font-size:.76rem;font-weight:600;color:var(--muted);
  padding:3px 10px;border:1px dashed var(--line);border-radius:999px;user-select:none;
}
.deal-danger>summary::-webkit-details-marker{display:none}
.deal-danger>summary:hover{color:var(--danger);border-color:var(--danger)}
.deal-danger[open]>summary{color:var(--danger);border-color:var(--danger);border-style:solid}
.deal-danger-body{
  margin-top:6px;padding:9px 11px;border:1px solid rgba(217,83,79,.4);
  border-radius:10px;background:rgba(217,83,79,.05);
}
.deal-danger-body p{margin:0 0 8px;line-height:1.6;color:var(--text-2)}
@media (max-width:640px){
  .listing-row-actions .deal-danger{flex:1 1 100%}
  .deal-danger-body p{font-size:.74rem}
}

/* ===== v184: SPカタログ3・4列は文字省略の写真主体表示／取引中ボタンの1行化 ===== */
@media (max-width:640px){
  /* --- カタログ：3列以上は文字を省略して写真主体に --- */
  .auction-grid[data-cols="3"] .auction-card-body,
  .auction-grid[data-cols="4"] .auction-card-body{padding:3px 5px 5px;gap:0}
  .auction-grid[data-cols="3"] .auction-title{font-size:.6rem;line-height:1.25}
  .auction-grid[data-cols="4"] .auction-title{display:none} /* 4列はタイトル省略（写真＋価格のみ） */
  .auction-grid[data-cols="3"] .auction-body-timer,
  .auction-grid[data-cols="4"] .auction-body-timer{display:none} /* 残り時間は省略（詳細で確認） */
  .auction-grid[data-cols="3"] .auction-bidcount,
  .auction-grid[data-cols="4"] .auction-bidcount{display:none}
  .auction-grid[data-cols="3"] .auction-price{font-size:.76rem}
  .auction-grid[data-cols="4"] .auction-price{font-size:.7rem}
  .auction-grid[data-cols="3"] .auction-card .card-watch-btn,
  .auction-grid[data-cols="4"] .auction-card .card-watch-btn{width:22px;height:22px;font-size:.78rem;border-width:1px}
  .auction-grid[data-cols="3"] .auction-price-row,
  .auction-grid[data-cols="4"] .auction-price-row{min-height:24px;gap:3px}

  /* --- 落札取引中：ボタンは横1行（サムネ下の全幅に並べる） --- */
  .listing-row{
    grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:"thumb body" "actions actions";
  }
  .listing-row-ended{
    grid-template-columns:auto 44px minmax(0,1fr);
    grid-template-areas:"check thumb body" "check actions actions";
  }
  .listing-row-actions{flex-wrap:nowrap;overflow:hidden;justify-content:flex-start;gap:4px}
  .listing-row-actions .btn,
  .listing-row-actions .btn-sm{min-height:26px;padding:2px 7px;font-size:.7rem;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* 「受け渡し確認待ち」「削除は◯日後」などの補足文は縮めて省略表示（1行に収める） */
  .listing-row-actions > span.small,
  .listing-row-actions > span.small.muted{
    display:block;flex:0 1 auto;min-width:0;font-size:.64rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* 取消の折りたたみ：ピルだけを行内に並べ、開いたときだけ警告ボックスが下に全幅で出る */
  .listing-row-actions .deal-danger{display:contents}
  .listing-row-actions .deal-danger>summary{flex:0 0 auto;font-size:.66rem;padding:2px 8px;white-space:nowrap}
  .listing-row-actions .deal-danger-body{flex:1 1 100%;margin-top:4px}
}

/* ===== v185: スマホは横スクロール禁止の全体ガード＆「取引の詳細」ボタンのSP省略 ===== */
@media (max-width:640px){
  /* ウォレット等の表はカード化済み（v180/v182）。さらに全ページで
     横方向のはみ出し自体を遮断し、スマホでは横スクロールを発生させない。 */
  html,body{overflow-x:clip}
  /* 取引終了の行は写真・商品名のタップで「取引の詳細」が開けるため、
     スマホでは重複する「取引の詳細」ボタンを省略する（PCは表示のまま）。 */
  .listing-row-actions .deal-view-btn{display:none}
}

/* ===== v187: スマホUI改善（①ハブ圧縮 ③入札中の行を1/3 ⑦ウォッチ複数列 ⑧説明文バグ ⑨カタログ余白削減） ===== */

/* --- ⑧ 説明文の表示バグ修正（全画面共通・スマホ/PC共通） ---
   .delivery-list li に一律で display:flex が効いていたため、
   料金ページ・ご利用ガイドなど「印なしの文章 li」ではテキストと <strong> が
   別々のフレックス項目に分割され、文章が段組みのように壊れて表示されていた。
   flex は auction_detail の「受け渡し方法」リスト（.delivery-methods）だけに限定する。 */
.delivery-list{list-style:disc;margin:8px 0;padding-left:20px;line-height:1.8}
.delivery-list li{display:list-item;padding:2px 0}
ol.delivery-list{list-style:decimal}
.delivery-list.delivery-methods{list-style:none;padding-left:0}
.delivery-list.delivery-methods li{display:flex;align-items:flex-start;gap:8px;padding:6px 0;line-height:1.7}

@media (max-width:640px){
  /* --- ① マイページ最上部（あなたのお店ハブ）を約半分の高さに ---
     左上の🏪アイコンは廃止し、店名・バッジ・モード切替を最小の余白で詰める。 */
  .shop-hub{padding:8px 10px 8px;border-radius:12px;margin-bottom:8px}
  .shop-hub-avatar{display:none}
  .shop-hub-top{gap:8px;align-items:center}
  .shop-hub-name{font-size:.92rem;line-height:1.25}
  .shop-hub-verify,.shop-hub-badge-dealer{margin-top:2px;font-size:.64rem;padding:1px 7px}
  .shop-hub-profile-btn{font-size:.7rem;padding:4px 8px;min-height:30px}
  .shop-modes{grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
  .shop-mode{padding:7px 8px;border-radius:9px;gap:8px}
  .shop-mode .ic{font-size:1rem}
  .shop-mode b{font-size:.8rem}
  /* ページ見出し（入札マイページ／出品マイページ）まわりの余白も圧縮 */
  .page-head{margin:2px 0 8px}
  .page-head h1{font-size:1.2rem;margin-bottom:2px}
  .page-head p{margin-top:2px;font-size:.78rem;line-height:1.5}
  .stat-grid + .small.muted{margin:4px 0 0;font-size:.72rem;line-height:1.5}
  .section-actions{margin-top:6px !important}
  /* 統計カード（項目ボタン）も余白を圧縮して初期画面を短く */
  .stat-grid{gap:6px}
  .stat-grid .stat-card{padding:7px 10px;border-radius:10px}
  .stat-num{font-size:1.05rem;line-height:1.2}
  .stat-label{font-size:.72rem;margin-top:1px}
  .section-actions .btn{min-height:38px;padding:7px 10px;font-size:.82rem}
  .section-actions .btn-sm{min-height:34px}

  /* --- ③ 【買う】入札中の行を約1/3に圧縮 ---
     行内の入札フォームは「入札する ▾」を押したときだけ展開する。 */
  .history-row .history-inline-bid{display:none;flex:1 1 100%}
  .history-row.bid-open .history-inline-bid{display:block;margin-top:4px}
  .sp-inline-bid-toggle{display:inline-flex;align-items:center;gap:4px}
  .history-row .listing-row-actions .btn-see{display:none} /* 「見る」は写真・商品名タップで代替 */

  /* --- ⑦ ウォッチリスト：スマホでも複数商品を並べて表示（2列） --- */
  .watch-live-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  .watch-live-card .live-body{padding:8px 8px 9px}
  .watch-live-title{margin-bottom:6px;min-height:auto;font-size:.78rem;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .watch-live-card .live-head{padding:5px 8px;gap:4px;flex-wrap:wrap}
  .watch-live-card .live-pill{font-size:.6rem;padding:2px 7px}
  .watch-live-card .live-clock-time{font-size:.72rem}
  .watch-live-card .live-clock-label{display:none}
  .watch-photos{margin:0 0 6px}
  .watch-photo-thumbs{display:none} /* サブ写真は省略（詳細ページで確認） */
  .watch-photo-main{aspect-ratio:1/1;border-radius:8px}
  .watch-live-card .live-chips{gap:4px}
  .watch-live-card .live-chips .chip-dark,
  .watch-live-card .live-chips .chip-gold{display:none} /* 参加人数などは省略 */
  .watch-live-card .chip-watch{font-size:.62rem;padding:1px 8px}
  .watch-live-card .live-buynow-row{margin:2px 0}
  .watch-live-card .buynow-price{font-size:.8rem}
  .watch-live-card .live-price-row{margin:2px 0 4px;gap:6px}
  .watch-live-card .auction-price-lg{font-size:1.02rem;margin:0}
  .watch-live-card .live-bidcount-box{display:none}
  .watch-live-card .cheer-stage{display:none}
  .watch-live-card > .live-body > .watch-collapse{display:none} /* 入札履歴の折りたたみは省略 */
  /* 入札フォームは「入札する ▾」で展開（閉じているときは高さゼロ） */
  .watch-live-card .watch-bid{display:none}
  .watch-live-card.bid-open .watch-bid{display:flex;flex-direction:column;gap:6px}
  .watch-live-card .sp-watch-bid-toggle{width:100%;min-height:34px;padding:5px 8px;font-size:.78rem}
  .watch-live-card.bid-open .sp-watch-bid-toggle{display:none}
  .watch-live-card .quick-bids{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
  .watch-live-card .quick-bid{font-size:.7rem;padding:5px 4px}
  .watch-live-card .btn-join,.watch-live-card .btn-buynow{min-height:38px;font-size:.8rem;padding:7px 8px}

  /* --- ⑨ カタログ3列以上：余白を最小化して写真をヤフオク・メルカリ並みの大きさに --- */
  body[data-page^="public/buyer/catalog.php"] .container{padding-left:5px;padding-right:5px}
  .auction-grid[data-cols="3"]{gap:3px !important}
  .auction-grid[data-cols="4"]{gap:2px !important}
  .auction-grid[data-cols="3"] .auction-card,
  .auction-grid[data-cols="4"] .auction-card{border:none;border-radius:6px;box-shadow:none;margin-bottom:0}
  .auction-grid[data-cols="3"] .auction-thumb,
  .auction-grid[data-cols="4"] .auction-thumb{border-radius:6px 6px 0 0}
  .auction-grid[data-cols="3"] .auction-card-body{padding:2px 3px 4px;gap:0}
  .auction-grid[data-cols="4"] .auction-card-body{padding:2px 2px 3px;gap:0}
  .auction-grid[data-cols="3"] .auction-title{font-size:.66rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .auction-grid[data-cols="3"] .auction-price{font-size:.8rem}
  .auction-grid[data-cols="4"] .auction-price{font-size:.74rem}
  /* 1・2列も余白を少し圧縮して1画面の情報量を増やす */
  .auction-grid[data-cols="1"],.auction-grid[data-cols="2"]{gap:5px !important}
  .auction-grid[data-cols="2"] .auction-card-body{padding:4px 6px 6px}
}

/* ③⑦ 展開ボタンはPCでは不要（PCは従来どおり常時表示） */
@media (min-width:641px){
  .sp-inline-bid-toggle,.sp-watch-bid-toggle{display:none}
}

/* ===== v188: カタログは「まず商品」・検索は「🔍 商品をさがす」で開閉 ===== */
.catalog-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.catalog-search-toggle{white-space:nowrap}
.catalog-search-toggle[aria-expanded="true"]{box-shadow:0 0 0 2px var(--gold-line) inset}
.catalog-active-filters{color:var(--text-2);min-width:0;overflow-wrap:anywhere}
.catalog-count{margin-left:auto;white-space:nowrap}
#catalog-search[hidden]{display:none}
@media (max-width:640px){
  .catalog-toolbar{gap:8px;margin:0 0 8px}
  .catalog-count{flex:0 0 auto}
  /* カタログの見出しまわりも圧縮して、開いてすぐ商品が見えるように */
  body[data-page^="public/buyer/catalog.php"] .page-head{margin:2px 0 8px}
  body[data-page^="public/buyer/catalog.php"] .page-head h1{font-size:1.15rem}
  body[data-page^="public/buyer/catalog.php"] .page-head p{display:none}
}

/* 下部ナビが6個のときはラベル・アイコンを少し縮めて1行に収める */
@media (max-width:640px){
  .mobile-nav-6{padding:5px 2px calc(5px + env(safe-area-inset-bottom))}
  .mobile-nav-6 .mobile-nav-item{font-size:.58rem;padding:5px 1px;min-height:48px;letter-spacing:0}
  .mobile-nav-6 .mobile-nav-item>span:nth-child(2){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-nav-6 .mobile-nav-icon{width:26px;height:26px;font-size:1rem}
}

/* ===== v189: カタログ改善（②既定3列 ③写真を限界まで大きく・手書きイメージのカード） ===== */
/* ウォッチ数の写真右下オーバーレイ（既定は非表示。SPの3・4列でのみ表示） */
.thumb-watch{
  display:none;position:absolute;right:4px;bottom:4px;align-items:center;gap:1px;
  background:rgba(14,31,51,.72);color:#fff;font-size:.66rem;font-weight:700;
  padding:1px 6px;border-radius:999px;line-height:1.5;pointer-events:none;
}
.auction-buynow{white-space:nowrap}

@media (max-width:640px){
  /* --- ③ 3・4列：手書きイメージどおり「写真最大・余白最小・規則正しい密集配列」 ---
     写真＝正方形で端まで、右下に☆ウォッチ数。下は「商品名（1行）」＋「現在◯◯円 ⏱残り時間」だけ。 */
  .auction-grid[data-cols="3"] .auction-thumb,
  .auction-grid[data-cols="4"] .auction-thumb{aspect-ratio:1/1;border-radius:4px 4px 0 0}
  .auction-grid[data-cols="3"] .auction-card,
  .auction-grid[data-cols="4"] .auction-card{border-radius:4px}
  .auction-grid[data-cols="3"] .thumb-watch,
  .auction-grid[data-cols="4"] .thumb-watch{display:inline-flex}
  .auction-grid[data-cols="4"] .thumb-watch{font-size:.6rem;padding:0 5px;right:3px;bottom:3px}
  /* ウォッチ操作ボタンは一覧では出さない（商品ページで操作。一覧は数がわかればOK） */
  .auction-grid[data-cols="3"] .card-watch-btn,
  .auction-grid[data-cols="4"] .card-watch-btn{display:none}
  /* 本文：商品名1行 → 価格＋残り時間を同じ行に */
  .auction-grid[data-cols="3"] .auction-card-body,
  .auction-grid[data-cols="4"] .auction-card-body{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    column-gap:4px;row-gap:0;padding:3px 4px 4px;
  }
  .auction-grid[data-cols="3"] .auction-title,
  .auction-grid[data-cols="4"] .auction-title{
    order:1;flex:1 1 100%;display:block;-webkit-line-clamp:unset;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-weight:600;margin:0;
  }
  .auction-grid[data-cols="3"] .auction-title{font-size:.68rem;line-height:1.45}
  .auction-grid[data-cols="4"] .auction-title{font-size:.6rem;line-height:1.4}
  .auction-grid[data-cols="3"] .auction-price-row,
  .auction-grid[data-cols="4"] .auction-price-row{
    order:2;flex:1 1 auto;display:block;margin:0;min-height:0;
  }
  /* 「現在価格」ラベル・入札件数・即決行は省略し、価格に小さく「現在」を前置 */
  .auction-grid[data-cols="3"] .auction-price-row .small.muted,
  .auction-grid[data-cols="4"] .auction-price-row .small.muted{display:none}
  .auction-grid[data-cols="3"] .auction-bidcount,
  .auction-grid[data-cols="4"] .auction-bidcount{display:none}
  .auction-grid[data-cols="3"] .auction-buynow,
  .auction-grid[data-cols="4"] .auction-buynow{display:none}
  .auction-grid[data-cols="3"] .auction-price::before,
  .auction-grid[data-cols="4"] .auction-price::before{
    content:"現在";font-size:.62em;font-weight:600;color:var(--muted);margin-right:2px;
  }
  .auction-grid[data-cols="3"] .auction-price{font-size:.8rem;font-weight:800}
  .auction-grid[data-cols="4"] .auction-price{font-size:.72rem;font-weight:800}
  /* 残り時間は価格の隣に表示（⏱2日 のように） */
  .auction-grid[data-cols="3"] .auction-body-timer,
  .auction-grid[data-cols="4"] .auction-body-timer{
    display:flex;order:3;flex:0 0 auto;margin:0;gap:1px;align-items:baseline;
  }
  .auction-grid[data-cols="3"] .auction-body-timer{font-size:.6rem}
  .auction-grid[data-cols="4"] .auction-body-timer{font-size:.56rem}
  .auction-grid[data-cols="3"] .auction-body-timer .auction-new-inline,
  .auction-grid[data-cols="4"] .auction-body-timer .auction-new-inline{display:none} /* NEWは写真上のバッジで表示済み */
  /* 3列の隙間・カード余白は最小（v187: 3列=3px／4列=2px を継続） */
}

/* v189: JS適用前・JS無効時のフォールバック（data-cols未設定でもスマホは3列で表示） */
@media (max-width:640px){
  .auction-grid:not([data-cols]){grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
}
@media (min-width:641px){
  .auction-grid:not([data-cols]){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===== v190: スマホUI改善（①ログイン直行 ②売る/買うボタンの改行 ③デポ警告の非表示 ⑤「状態」全幅 ⑥余白圧縮） ===== */

/* --- ① ログイン・新規登録：スマホでは紹介パネル（KASHARI）を出さず、すぐ入力フォームを表示 --- */
@media (max-width:920px){
  .auth-visual{display:none}
}

/* --- ② 売る/買う切替ボタン：（）部分の中途半端な折り返しをやめる ---
   PCは従来どおり1行（買う（入札する））。スマホは「買う」を1行目、「（入札する）」を2行目に固定。 */
.shop-mode b .shop-mode-paren{display:inline;font-size:1em;font-weight:inherit;color:inherit;margin:0}
@media (max-width:640px){
  .shop-mode b .shop-mode-paren{
    display:block;font-size:.74em;font-weight:600;line-height:1.25;margin-top:1px;opacity:.85;
  }
  .shop-mode.is-current b .shop-mode-paren{color:inherit}
}

/* --- ③ デポジット警告の「✕ 表示しない」ボタン --- */
.deposit-warn{position:relative}
/* v193(③): .deposit-warn の display:flex が hidden 属性（UAの display:none）に勝ってしまい、
   「✕ 表示しない」を押しても見た目上消えなかった不具合の修正。 */
.deposit-warn[hidden]{display:none !important}
.deposit-warn-hide{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
  border:1px solid rgba(122,90,18,.35);border-radius:999px;background:transparent;
  color:#7a5a12;font-size:.7rem;font-weight:600;padding:3px 9px;min-height:26px;
  cursor:pointer;font-family:inherit;white-space:nowrap;
}
.deposit-warn-hide:hover{background:rgba(122,90,18,.08)}
@media (max-width:640px){
  .deposit-warn-hide{position:absolute;top:6px;right:8px;padding:2px 8px;min-height:24px;font-size:.66rem}
  .deposit-warn{padding-right:12px}
  .deposit-warn-body strong{padding-right:78px} /* 右上の「✕表示しない」と重ならないように */
}

/* --- ⑤ 商品ページ「状態」など：スマホでは見出しの下から全幅で表示（左1/3の空白をなくす） --- */
@media (max-width:640px){
  .spec-list{margin:8px 0}
  .spec-list>div{display:block;padding:6px 0}
  .spec-list dt{flex:none;font-size:.76rem;margin:0 0 1px}
  .spec-list dd{font-size:.9rem;line-height:1.65}
}

/* --- ⑥ 枠と枠の間の余白を全体的に圧縮（スマホのみ。ほとんど余白なしの密度に） --- */
@media (max-width:640px){
  .container{padding-top:6px}
  .card{margin-bottom:6px}
  .section-title{margin:8px 0 4px}
  .page-head{margin:2px 0 6px}
  .stat-grid{margin-bottom:4px}
  .filter-card{margin-bottom:6px}
  .deposit-warn{margin:0 0 6px}
  .shop-hub{margin-bottom:6px}
  .flash{margin-bottom:6px}
  .listing-rows{gap:5px}
  .catalog-toolbar{margin:0 0 6px}
  .auction-detail-main{gap:6px}
  .auction-detail-side{gap:6px}
  #dash-deal > .small.muted, #dash-done > .small.muted, #dash-bidding > .small.muted,
  #dash-listings > .small.muted, #dash-deposit > .small.muted,
  .section-title + p.small.muted{margin-bottom:4px}
}

/* ===== v191: スマホUI改善（①ウォッチ横並び ②「入札なし・取り下げ」の説明を隠す ③カタログ写真を白枠いっぱいに ④入札なし・取り下げは商品一覧へ直行） ===== */

/* --- ② 「説明文を隠す」の対象に .help-text を追加（入札なし・取り下げページ等の冒頭説明） --- */
body.hide-help .help-text{display:none}

/* --- ④ 項目ボタンから ended.php#ended-list に着地したとき、固定ヘッダーに隠れないように --- */
#ended-list{scroll-margin-top:70px}

/* --- ① ウォッチリスト：スマホは他の一覧と同じ「写真左・情報右」の横並び行 --- */
@media (max-width:640px){
  .watch-live-grid{grid-template-columns:1fr !important;gap:6px !important}
  .watch-live-card .live-head{padding:4px 8px;gap:6px;flex-wrap:nowrap}
  .watch-live-card .live-body{
    display:grid;grid-template-columns:96px minmax(0,1fr);
    column-gap:8px;row-gap:2px;align-items:start;padding:8px;
  }
  /* 写真：左列に固定（正方形サムネ1枚。サブ写真は従来どおり省略） */
  .watch-live-card .watch-photos{grid-column:1;grid-row:1 / span 6;margin:0}
  .watch-live-card .watch-photo-main{width:96px;aspect-ratio:1/1;border-radius:8px}
  /* 右列：商品名 → 即決 → 現在価格 の縦並び */
  .watch-live-card .watch-live-title{
    grid-column:2;margin:0;min-height:auto;font-size:.82rem;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .watch-live-card .live-chips{grid-column:2;margin:0;gap:4px}
  .watch-live-card .live-buynow-row{grid-column:2;margin:0}
  .watch-live-card .live-price-row{grid-column:2;margin:0;padding-bottom:0;border-bottom:none;gap:6px}
  .watch-live-card .auction-price-lg{font-size:1.05rem;margin:0}
  .watch-live-card .cheer-stage{grid-column:2}
  /* 入札ボタン・展開フォームは行の下に全幅で（押しやすさ優先） */
  .watch-live-card .sp-watch-bid-toggle{grid-column:1 / -1;margin-top:4px}
  .watch-live-card .watch-bid{grid-column:1 / -1}
  .watch-live-card.bid-open .watch-bid{margin-top:4px}
  .watch-live-card .btn-join,.watch-live-card .btn-buynow{grid-column:1 / -1}
}

/* --- ③ カタログ3・4列：写真を白枠いっぱいに（画面端まで・角丸なし。仕切りは背景の細い青ライン） --- */
@media (max-width:640px){
  /* コンテナの左右5pxぶんを打ち消して、グリッドを画面幅いっぱいに広げる */
  body[data-page^="public/buyer/catalog.php"] .auction-grid[data-cols="3"],
  body[data-page^="public/buyer/catalog.php"] .auction-grid[data-cols="4"],
  body[data-page^="public/buyer/catalog.php"] .auction-grid:not([data-cols]){
    margin-left:-5px;margin-right:-5px;
  }
  /* 角丸・影をやめて写真をセルの縁まで（白い縁を残さない） */
  .auction-grid[data-cols="3"] .auction-card,
  .auction-grid[data-cols="4"] .auction-card{border-radius:0}
  .auction-grid[data-cols="3"] .auction-thumb,
  .auction-grid[data-cols="4"] .auction-thumb{border-radius:0}
  /* 仕切りは背景（青系）の細いラインだけ：3列=2px／4列=2px */
  .auction-grid[data-cols="3"]{gap:2px !important}
  .auction-grid[data-cols="4"]{gap:2px !important}
}

/* ===== v192: スマホUI修正（①使い方ガイドバーの縦文字バグ ②一括出品の説明文も隠せる） ===== */

/* --- ① 使い方ガイド（はじめの設定ステップ）バー：タイトルが1文字ずつ縦に潰れるバグの修正 ---
   原因：タイトルの flex-basis が 0 のため、完了時の長い進捗文（すべて完了 ✓・いつでも見返せます）が
   同じ行に収まってしまうと、タイトルの幅がほぼ0になり縦書き状態になっていた。
   タイトルの基準幅を内容サイズ（auto）にして、進捗・メーターを確実に2行目へ折り返す。 */
@media (max-width:640px){
  .onboarding-bar strong{flex:1 1 auto}
}

/* ===== v196: カタロググリッドの隙間を極細線に（写真をいっぱいに敷き詰める） ===== */
/* 列数（1/2/3/4/6/8/12）やPC・SPを問わず、商品間の間隔は1pxの細線のみ。
   カードの枠線・角丸・影を外し、写真がタイル状にぴったり並ぶようにする。 */
.auction-grid{gap:1px !important}
.auction-grid .auction-card,
.auction-grid .card.auction-card{
  border:none !important;
  border-radius:0 !important;
  box-shadow:0 0 0 1px var(--line);   /* 隣接カード同士で重なり、1pxの細線に見える */
  margin:0 !important;
}
.auction-grid .auction-card:hover{transform:none;box-shadow:0 0 0 1px var(--line)}
.auction-grid .auction-thumb{border-radius:0 !important}
/* カタログページは左右の余白も詰めて、写真を画面いっぱいに */
body[data-page^="public/buyer/catalog.php"] .container{padding-left:2px;padding-right:2px}
@media (max-width:640px){
  .auction-grid{gap:1px !important}
  .auction-grid[data-cols="1"],.auction-grid[data-cols="2"],
  .auction-grid[data-cols="3"],.auction-grid[data-cols="4"]{gap:1px !important}
  .auction-grid .auction-card{border-radius:0 !important}
  .auction-grid[data-cols="3"] .auction-thumb,
  .auction-grid[data-cols="4"] .auction-thumb{border-radius:0}
  body[data-page^="public/buyer/catalog.php"] .container{padding-left:0;padding-right:0}
}

/* ===== v197: スマホUI微修正（②金額指定のズレ ⑦受け渡し連絡のズレ ⑧⑨ボタン文字の見切れ） ===== */
/* ②: 金額指定タップで金額欄へ移動するとき、固定ヘッダー・固定入札バーに隠れないよう余白を確保 */
#bid-amount,
.bid-form .field{scroll-margin-top:calc(var(--topbar-h) + 16px);scroll-margin-bottom:calc(var(--mobile-nav-h) + 120px)}
/* ⑦: #deal-contact へのアンカー移動時、固定ヘッダー分だけ下げてピッタリ合わせる */
.deal-contact-card{scroll-margin-top:calc(var(--topbar-h) + 12px)}

@media (max-width:640px){
  /* ⑧⑨: 取引行のボタン（受け渡し連絡・領収証（Web使用料）など）の文字が
     省略記号で欠けないようにする。ボタンは縮めず全文表示し、
     「落札者の受け渡し確認待ち」「取引終了から◯日後…」などの補足文だけを省略表示。
     それでも収まらない場合はクリップせず2行目へ折り返す。 */
  .listing-row-actions{flex-wrap:wrap;overflow:visible;row-gap:4px}
  .listing-row-actions .btn,
  .listing-row-actions .btn-sm{flex:0 0 auto;min-width:auto;overflow:visible;text-overflow:clip;white-space:nowrap}
  .listing-row-actions .deal-danger>summary{flex:0 0 auto}
}

/* ===== v198: ①プレビュー画面の操作ボタン見切れ修正 ②「取引の内容」の値の見切れ修正 ===== */

/* --- ① プレビュー案内バー（SP）：
   「下書き保存のまま戻る」「この内容で出品する」の2ボタンが縮小できず
   （旧 flex:0 0 auto）、フォント設定によっては横幅を超えて右端が切れていた。
   スマホでは2ボタンを均等幅で横並びにし、文字サイズは画面幅に応じて自動縮小。
   それでも収まらない極小幅（〜374px）では縦積みに切り替える。 --- */
@media (max-width:640px){
  .preview-bar-actions{flex:1 1 100%;min-width:0}
  .preview-bar-actions>.btn,
  .preview-bar-actions>form{flex:1 1 0;min-width:0}
  .preview-bar-actions>form{display:flex !important}
  .preview-bar-actions>form .btn{flex:1 1 auto;width:100%;min-width:0}
  .preview-bar-actions .btn{
    padding-left:8px;padding-right:8px;white-space:nowrap;
    font-size:clamp(.7rem, 3.4vw, .82rem);
  }
}
@media (max-width:374px){
  .preview-bar-actions{flex-direction:column}
  .preview-bar-actions>.btn{width:100%}
}

/* --- ② 「取引の内容」（deal_view.php）の詳細表：
   v161のSP表ルール（.card > table.table を display:block ＋ white-space:nowrap ＋横スクロール化）が
   この定義表にも効いて、右寄せの値（金額・氏名）が折り返せず右端で見切れていた。
   deal-view-table は table-stack と同様に横スクロール化の対象から外し、
   通常の表として th/td とも折り返しを許可する（列幅は th 40% / td 60% 固定）。 --- */
@media (max-width:640px){
  .card > table.table.deal-view-table{
    display:table;width:100%;overflow-x:visible;white-space:normal;table-layout:fixed;
  }
  .card > table.table.deal-view-table tbody{display:table-row-group;width:auto}
  .card > table.table.deal-view-table tr{display:table-row;width:auto}
  .deal-view-table th{white-space:normal;width:40%;overflow-wrap:anywhere}
  .deal-view-table td{white-space:normal;overflow-wrap:anywhere}
}

/* ===== v200: AIナビの通知バナー：長い本文・切れない折り返し ===== */
/* 通知本文に長い連続文字列（URL・識別子など）が含まれても、パネル幅の中で必ず折り返し、
   バナーは最大4行で省略表示にする（全文はタップで開く通知先で確認できる）。 */
.kashari-bot-push{min-width:0;overflow:hidden}
.kbot-push-tx{
  flex:1 1 auto;min-width:0;
  overflow-wrap:anywhere;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* ===== v207: 登録情報の変更：変更可／変更不可バッジ ===== */
.edit-badge{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.05em;white-space:nowrap;}
.edit-badge.ok{background:#f0fbf4;border:1px solid #2faf64;color:#1d7d44;}
.edit-badge.no{background:#f4f4f6;border:1px solid #b9b9c0;color:#6d6d76;}
input[readonly].edit-locked, input[disabled].edit-locked{background:#f4f4f6;color:#6d6d76;cursor:not-allowed;}
.edit-legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 0;font-size:.82rem;color:var(--muted);}

/* ===== v240: スマホ（①商品ページ入札履歴の改行ズレ ②入札中一覧に入札ステータス表示） ===== */
/* ① 見出しの「入札履歴（ 2 ）」：見出し文を1項目に包む（flex の space-between で散らない） */
.section-title-text{display:inline;flex:0 1 auto;min-width:0}
/* ① 履歴行のバッジ（最高額／更新済）と名前・時刻は途中で改行させない */
.bid-live-item .badge{white-space:nowrap;flex:0 0 auto}
.bid-live-name,.bid-live-time{white-space:nowrap}
.bid-live-amount{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){
  .bid-live-item{gap:6px;padding:7px 8px}
  .bidder-avatar{width:26px;height:26px;font-size:.8rem}
  .bid-live-name{font-size:.8rem}
  .bid-live-amount{font-size:.92rem}
  .bid-live-item .badge{font-size:.6rem;padding:1px 6px}
  .bid-live-time{font-size:.7rem}
}
/* ② 入札中一覧（スマホ）：「入札する ▾」の横に「最高額入札中」「上回られています」を表示。
   PCは本文中に同じバッジがあるため出さない。 */
.sp-bid-status{display:none}
@media (max-width:640px){
  .history-row .listing-row-actions .sp-bid-status{
    display:inline-flex;align-items:center;flex:0 0 auto;
    white-space:nowrap;font-size:.66rem;padding:2px 8px;min-height:26px;
  }
}

/* ===== v241: 商品ページのカテゴリー表示（大分類 ＞ 中分類 ＞ 小分類・各階層がカタログ絞り込みリンク） ===== */
.cat-path-link{color:var(--primary-3);text-decoration:none;border-bottom:1px dotted currentColor;font-weight:600}
.cat-path-link:hover{color:var(--gold-4);border-bottom-style:solid}
.cat-path-sep{color:var(--muted);margin:0 2px}
.cat-path{display:inline;overflow-wrap:anywhere}
a.chip-gold-link{text-decoration:none;cursor:pointer}
a.chip-gold-link:hover{filter:brightness(.96)}
@media (max-width:640px){
  .cat-path-nav{white-space:normal;line-height:1.7}
  .cat-path-sep{margin:0 1px}
}

/* ===== v242: プレビュー案内バーの「説明を隠す」（主にスマホ用・PCでも使える） ===== */
.preview-bar-toggle{
  float:right;margin-left:8px;padding:3px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;
  font-size:.74rem;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1.4;
}
.preview-bar-toggle:hover{background:rgba(255,255,255,.18)}
.preview-bar.is-collapsed{padding-top:6px;padding-bottom:6px;gap:0}
.preview-bar.is-collapsed .preview-bar-text,
.preview-bar.is-collapsed .preview-bar-actions{display:none}
.preview-bar.is-collapsed .preview-bar-msg{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1 1 100%}
.preview-bar.is-collapsed .preview-bar-toggle{float:none;margin-left:auto}
@media (max-width:640px){
  .preview-bar-toggle{font-size:.7rem;padding:2px 9px}
  .preview-bar.is-collapsed{padding:5px 10px}
  .preview-bar.is-collapsed .preview-bar-badge{margin-right:0}
}

/* ===== v244: 「買う」モードはブルー系で統一（金＝売るの色が混在して迷わないように） =====
   ロゴ（競マーク・WEB AUCTION）と価格の赤はブランド共通なので金のまま。それ以外で
   買うモードの画面に出る金色のアクセント（ナビの選択中・リンク・バッジ・案内カード・
   設定ステップ・速報ラベル・カテゴリーチップ・ウォッチ中・列数切替・入力欄のフォーカス・
   モバイルナビ・アバター・ボタン既定色）をすべてブルーに置き換える。 */
body[data-mode="buyer"]{
  --buy-soft-2:rgba(47,111,216,.20);
  --buy-line:rgba(47,111,216,.30);
  --buy-wash:#EEF4FE;
  --buy-wash-2:#E3ECFC;
  --buy-deep:#1f57b8;
}
/* リンク（クラス無しの通常リンク・パンくず・カテゴリーパス・テキストボタン） */
body[data-mode="buyer"] a:not([class]),
body[data-mode="buyer"] .crumbs a,
body[data-mode="buyer"] .cat-path-link,
body[data-mode="buyer"] .catalog-active-filters a,
body[data-mode="buyer"] .deposit-info-actions a.btn-text,
body[data-mode="buyer"] .btn-text{color:var(--buy-accent)}
body[data-mode="buyer"] a:not([class]):hover,
body[data-mode="buyer"] .cat-path-link:hover{color:var(--buy-deep)}
body[data-mode="buyer"] .btn-text:hover{background:var(--buy-soft)}
/* ヘッダーナビ・タブ・モバイルナビの選択中 */
body[data-mode="buyer"] .nav a.is-active,
body[data-mode="buyer"] .nav-menu .nav-menu-link.is-active,
body[data-mode="buyer"] .tab-chip.is-active{background:var(--buy-soft);color:var(--buy-accent);border-color:var(--buy-line)}
body[data-mode="buyer"] .mobile-nav-item.is-active{color:var(--buy-accent)}
body[data-mode="buyer"] .mobile-nav-item.is-active .mobile-nav-icon{background:var(--buy-soft)}
/* 既定ボタン（.btn-primary 以外の .btn も。素の <button>（ハンバーガー等）は対象外） */
body[data-mode="buyer"] .btn:not(.btn-secondary):not(.btn-text):not(.btn-danger):not(.btn-block-secondary){
  background:var(--buy-grad);color:#fff;box-shadow:0 8px 22px rgba(47,111,216,.32);
}
body[data-mode="buyer"] .btn:not(.btn-secondary):not(.btn-text):not(.btn-danger):hover{background:var(--buy-grad);filter:brightness(1.04);box-shadow:0 12px 30px rgba(47,111,216,.45)}
body[data-mode="buyer"] .btn-secondary,
body[data-mode="buyer"] button.btn-secondary{background:#fff;color:var(--buy-accent);border:1.5px solid var(--buy-accent);box-shadow:none}
body[data-mode="buyer"] .btn-join{box-shadow:0 12px 30px rgba(47,111,216,.45)}
/* バッジ（状態バッジの金） */
body[data-mode="buyer"] .badge:not(.badge-good):not(.badge-warn):not(.badge-alert):not(.badge-danger){
  background:linear-gradient(135deg,rgba(91,141,239,.18),rgba(47,111,216,.14));color:var(--buy-deep);border-color:var(--buy-line);
}
/* 案内カード（次にやること）・はじめの設定ステップ */
body[data-mode="buyer"] .onb-cta-pill{background:linear-gradient(135deg,#f3f7ff,#e3ecfc);border-color:var(--buy-accent);box-shadow:0 8px 22px rgba(47,111,216,.16)}
body[data-mode="buyer"] .onboarding{border-color:var(--buy-line);background:linear-gradient(135deg,var(--buy-wash-2),#fff);box-shadow:0 8px 24px rgba(47,111,216,.14)}
body[data-mode="buyer"] .onboarding-bar:hover{background:rgba(47,111,216,.08)}
body[data-mode="buyer"] .onboarding-progress,
body[data-mode="buyer"] .onboarding-caret{color:var(--buy-accent)}
body[data-mode="buyer"] .onboarding-meter{background:rgba(47,111,216,.16)}
body[data-mode="buyer"] .onboarding-meter span{background:var(--buy-grad)}
body[data-mode="buyer"] .onboarding-panel{border-top-color:var(--buy-line)}
body[data-mode="buyer"] .onboarding-step-link:hover{border-color:var(--buy-accent);box-shadow:0 8px 20px rgba(47,111,216,.18)}
body[data-mode="buyer"] .onboarding-num{background:var(--buy-grad);color:#fff;box-shadow:0 4px 12px rgba(47,111,216,.35)}
body[data-mode="buyer"] .onboarding-step.is-done .onboarding-num{background:var(--success)}
/* 速報ティッカー */
body[data-mode="buyer"] .sold-ticker{border-color:var(--buy-line)}
body[data-mode="buyer"] .sold-ticker-label{background:var(--buy-grad);color:#fff}
/* 商品ページ：カテゴリーチップ・ウォッチ中・アバター */
body[data-mode="buyer"] .chip-gold{background:var(--buy-grad);color:#fff}
body[data-mode="buyer"] .chip-watch.is-watching,
body[data-mode="buyer"] .auction-thumb .card-watch-btn.is-watching{background:var(--buy-grad);color:#fff}
body[data-mode="buyer"] .bidder-avatar,
body[data-mode="buyer"] .seller-avatar,
body[data-mode="buyer"] .how-num{background:var(--buy-grad);color:#fff}
/* カタログ：列数切替・絞り込みタブ・検索の開閉 */
body[data-mode="buyer"] .grid-cols-btn:hover{border-color:var(--buy-accent);color:var(--buy-accent)}
body[data-mode="buyer"] .grid-cols-btn.is-active{background:var(--buy-accent);border-color:var(--buy-accent);color:#fff}
body[data-mode="buyer"] .filter-tabs a.is-active{background:var(--buy-grad);color:#fff}
body[data-mode="buyer"] .catalog-search-toggle[aria-expanded="true"]{box-shadow:0 0 0 2px var(--buy-line) inset}
/* 入力欄のフォーカス・チェック */
body[data-mode="buyer"] input:focus,
body[data-mode="buyer"] select:focus,
body[data-mode="buyer"] textarea:focus{border-color:var(--buy-accent);box-shadow:0 0 0 3px var(--buy-soft)}
body[data-mode="buyer"] input[type="checkbox"],
body[data-mode="buyer"] input[type="radio"]{accent-color:var(--buy-accent)}
/* マイページ上部（あなたのお店）の「登録情報の変更」・モード切替の枠 */
body[data-mode="buyer"] .nav-mode-switch{border-color:var(--buy-accent);color:var(--buy-accent)}
body[data-mode="buyer"] .nav-mode-switch:hover{background:var(--buy-grad);color:#fff}
body[data-mode="buyer"] .shop-hub-profile-btn{background:transparent;border-color:var(--buy-accent-2);color:#dbe7ff}
body[data-mode="buyer"] .shop-hub-profile-btn:hover{background:rgba(91,141,239,.18);color:#fff}
/* あなたのお店ハブの地色：金の残る茶色を外して紺色寄りに */
body[data-mode="buyer"] .shop-hub{background:linear-gradient(135deg,#1c1b2a,#232b45 60%,#1f3a6b)}
/* 表の見出し・カード枠は薄いブルー */
body[data-mode="buyer"] .table th{background:var(--buy-wash)}
body[data-mode="buyer"] .card{border-color:rgba(47,111,216,.16)}
body[data-mode="buyer"] .section-title h2,body[data-mode="buyer"] .section-title h3{border-left-color:var(--buy-accent)}
/* ロゴは共通ブランドのため金のまま（上書きしない） */
body[data-mode="buyer"] .brand-sub{color:var(--gold-4)}
/* ヘッダーのアカウントボタンとハブのアイコンも金→青 */
body[data-mode="buyer"] .nav-acc-av{background:var(--buy-grad);color:#fff}
body[data-mode="buyer"] .shop-hub-avatar{background:linear-gradient(135deg,#5b8def,#2f6fd8);color:#fff;box-shadow:0 6px 16px rgba(47,111,216,.45)}
body[data-mode="buyer"] .new-arrival-hint{background:linear-gradient(135deg,#f3f7ff,#e3ecfc);border-color:var(--buy-line)}
body[data-mode="buyer"] .new-arrival-hint a{color:var(--buy-accent)}
/* 速報の文字色（名前・新着）は金系→淡い青 */
body[data-mode="buyer"] .sold-ticker-item .t-name,
body[data-mode="buyer"] .sold-ticker-item.t-bid .t-price{color:#a9c8ff}
body[data-mode="buyer"] .sold-ticker-item.t-new{color:#dbe7ff}
/* 商品ページ：ウォッチ（未登録）・クイック加算ボタンの枠色 */
body[data-mode="buyer"] .chip-watch{color:var(--buy-accent);border-color:var(--buy-accent);background:#fff}
body[data-mode="buyer"] .chip-watch:hover{background:var(--buy-wash)}
body[data-mode="buyer"] .quick-bid{color:var(--buy-accent);border-color:var(--buy-accent);background:#fff}
body[data-mode="buyer"] .quick-bid:hover{background:var(--buy-wash)}
body[data-mode="buyer"] .live-clock-time{color:#a9c8ff}

/* ===== v245: スマホの入出金（table-stack）の改行ズレ修正 =====
   従来は td を display:flex にしていたため、セル内のテキスト・<strong>・<div>（取引番号や補足）が
   それぞれ横並びの項目になり、「102 / 円」「送金完 / 了」「商品名 | 取引番号」のように
   細い列へ押し込まれて不自然に改行していた。ラベル（::before）を左に浮かせ、値は通常の
   文章として流す（補足の <div> は自然に次の行へ）。 */
@media (max-width:640px){
  .table-stack td,
  .card > table.table.table-stack td{
    display:block;text-align:right;padding:3px 0;line-height:1.55;
    white-space:normal;overflow-wrap:anywhere;
  }
  .table-stack td::before{
    float:left;margin-right:10px;padding-top:1px;
    content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:600;
    white-space:nowrap;text-align:left;max-width:48%;
  }
  .table-stack td::after{content:"";display:block;clear:both}
  .table-stack td[data-label=""]::before{content:none}
  /* 金額（「102円」）・状態の見出し（「送金完了」）は途中で折らない */
  .table-stack td strong{white-space:nowrap}
  /* 補足行（取引番号・着金予定など）は値の下に右寄せで1〜2行 */
  .table-stack td > div{clear:right;margin-top:1px}
  .table-stack td > div.small{font-size:.7rem;line-height:1.45}
  /* ラベルが長いセル（送金額（Web使用料差引後））は値が狭くならないよう、ラベルを2行まで許容 */
  .table-stack td[data-label^="送金額"]::before{white-space:normal;max-width:52%}
  /* 領収証などのリンクはラベルの横に収まらなければ次行へ落とす */
  .table-stack td a{display:inline-block;max-width:100%}
}

/* ===== v246: ①プレビュー案内バー：「説明を隠す」でも操作ボタンは残す =====
   v242 では説明文と一緒に「下書き保存のまま戻る」「この内容で出品する」も畳んでいたため、
   出品するにはいったん「説明を表示」を開く必要があった。畳んだ状態では説明文だけを隠し、
   2ボタンは細めのまま常に表示する（PC：バッジ・切替ボタンの右側に横並び／SP：2段目に均等幅）。 */
.preview-bar.is-collapsed{gap:8px 12px}
.preview-bar.is-collapsed .preview-bar-actions{display:flex}
.preview-bar.is-collapsed .preview-bar-msg{flex:0 1 auto}
.preview-bar.is-collapsed .preview-bar-actions .btn{padding-top:6px;padding-bottom:6px}
@media (max-width:640px){
  .preview-bar.is-collapsed{padding:6px 10px 8px}
  .preview-bar.is-collapsed .preview-bar-msg{flex:1 1 100%}
  .preview-bar.is-collapsed .preview-bar-actions{flex:1 1 100%;margin-top:0}
  .preview-bar.is-collapsed .preview-bar-actions .btn{padding-top:7px;padding-bottom:7px}
}

/* v246②: 取引の詳細（取引終了後）のメッセージ期限の案内。SPの2行省略（v187）の対象外にする */
.deal-msg-deadline{margin:0 0 8px;color:var(--text-2);line-height:1.6}

/* ===== v247: ①「取り消しなどの操作」を開くと文字が縦一列になるバグ ②入札履歴の表示名フル表示＋所在地ポップアップ ③質問・回答の名前表示 ===== */

/* --- ① 落札取引中の行：右側の操作列（.listing-row-actions）に幅の上限が無く、折りたたみ（.deal-danger）を
   開くと中の長い説明文の「本来の幅」で列が広がり、左の本文（flex:1;min-width:0）が幅ゼロ近くまで
   潰されて1文字ずつ縦に並んでいた。PCでは操作列に上限幅を設け、折りたたみ内は上限幅で折り返す。 --- */
@media (min-width:641px){
  .listing-row-actions{flex:0 1 auto;max-width:min(50%, 460px);min-width:0}
  .listing-row-actions .deal-danger{width:100%;max-width:440px;min-width:0}
  .deal-danger-body{overflow-wrap:anywhere}
  .deal-danger-body p{white-space:normal}
}

/* --- ② 入札者の表示名（ボタン化）とポップアップ --- */
/* 共通の button 装飾（白地ピル・影・min-height 44px 等）を打ち消し、テキストリンク風にする */
.bidder-name-btn,.bidder-name-btn:hover,.bidder-name-btn:active{
  appearance:none;-webkit-appearance:none;display:inline;background:none;border:0;box-shadow:none;
  border-radius:0;padding:0;margin:0;min-height:0;height:auto;line-height:inherit;letter-spacing:normal;transform:none;
  font:inherit;font-weight:600;color:inherit;cursor:pointer;text-align:left;
  text-decoration:underline dotted rgba(0,0,0,.35);text-underline-offset:3px;
  min-width:0;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:baseline;
}
.bidder-name-btn:hover{color:var(--gold-4);text-decoration-style:solid}
body[data-mode="buyer"] .bidder-name-btn:hover{color:var(--primary-3)}
.bid-live-name.bidder-name-btn{flex:0 1 auto;font-size:.88rem}
.side-bid-name.bidder-name-btn{flex:0 1 auto;color:var(--text-2)}
.bidder-pop-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:120;background:rgba(20,18,24,.45);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.bidder-pop-overlay[hidden]{display:none}
.bidder-pop{position:relative;width:100%;max-width:380px;padding:18px 18px 16px;margin:0;box-shadow:0 18px 44px rgba(20,18,24,.28)}
.bidder-pop-close{
  position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;
  background:var(--bg-subtle);color:var(--text-2);font-size:1.1rem;line-height:1;cursor:pointer;
}
.bidder-pop-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding-right:32px}
.bidder-pop-avatar{width:44px;height:44px;font-size:1.1rem;flex:0 0 44px}
.bidder-pop-name{font-weight:800;font-size:1.05rem;line-height:1.3;overflow-wrap:anywhere}
.bidder-pop-note{margin:6px 0 0;line-height:1.6}
.bidder-pop-cancel{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.bidder-pop-cancel p{margin:0 0 8px;line-height:1.6}
body.bidder-pop-open{overflow:hidden}

/* --- ③ 質問・回答の投稿者名（文章の前に表示） --- */
.qa-name{flex:0 0 auto;margin-top:2px;
  display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;
  background:var(--bg-subtle);color:var(--text-2);font-size:.76rem;font-weight:700;line-height:1.6;
  max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:baseline;
}
.qa-name-seller{background:var(--gold-grad);color:#3a2c08}
body[data-mode="buyer"] .qa-name-seller{background:var(--gold-grad);color:#3a2c08}
@media (max-width:640px){
  .qa-name{font-size:.7rem;padding:0 7px;max-width:10em}
  .bid-live-name.bidder-name-btn{max-width:9em}
}

/* ===== v249: 取引取消申請（落札者の申請モーダル・出品者の承認パネル・管理画面）＋税区分表示 ===== */
.deal-cancel-state{width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--danger);border-radius:var(--radius);background:rgba(200,40,40,.05);text-align:left}
.deal-cancel-state.deal-cancel-completed{border-color:var(--line)}
.deal-cancel-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.deal-cancel-badge{background:var(--danger);color:#fff}
.deal-cancel-meta{line-height:1.6}
.deal-cancel-note{margin:6px 0 0;line-height:1.6}
.deal-cancel-dl{display:flex;flex-wrap:wrap;margin:8px 0;font-size:.86rem;line-height:1.6}
.deal-cancel-dl dt{flex:0 0 11em;color:var(--text-2);font-weight:700;padding:2px 0}
.deal-cancel-dl dd{flex:1 1 calc(100% - 11em);min-width:0;margin:0;padding:2px 0;overflow-wrap:anywhere}
.deal-cancel-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.deal-cancel-form{margin-top:8px}
.deal-cancel-actions .deal-cancel-form{margin-top:0}
.deal-cancel-area{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.deal-cancel-area .deal-danger{max-width:560px}
.deal-cancel-history .deal-cancel-record{padding:8px 0;border-top:1px dashed var(--line)}
.deal-cancel-history .deal-cancel-record:first-of-type{border-top:0}
.deal-cancel-overlay{position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:130;background:rgba(20,18,24,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.deal-cancel-overlay[hidden]{display:none}
.deal-cancel-modal{position:relative;width:100%;max-width:460px;max-height:92vh;overflow:auto;padding:18px 18px 16px;margin:0;box-shadow:0 18px 44px rgba(20,18,24,.3)}
.deal-cancel-modal h3{margin:0 24px 6px 0;color:var(--danger)}
.deal-cancel-close{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;background:var(--bg-subtle);color:var(--text-2);font-size:1.1rem;line-height:1;cursor:pointer}
.deal-cancel-modal-item{margin:0 0 8px;overflow-wrap:anywhere}
.deal-cancel-reasons .radio-row{display:flex;gap:8px;align-items:flex-start;padding:4px 0}
.deal-cancel-text textarea{width:100%}
.deal-cancel-notice{margin:10px 0;padding:10px 12px;border-radius:var(--radius);background:rgba(200,40,40,.06);border:1px solid rgba(200,40,40,.25)}
.deal-cancel-notice p{margin:0 0 6px;line-height:1.6}
.deal-cancel-notice p:last-child{margin-bottom:0}
.deal-cancel-error{color:var(--danger);font-weight:700;margin:6px 0 0}
.deal-cancel-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
body.deal-cancel-open{overflow:hidden}
.price-tax-note{margin-top:2px;line-height:1.5}
.cancel-detail-table th{white-space:nowrap;width:11em}
.cancel-error{color:var(--danger);font-weight:700}
.cancel-raw{white-space:pre-wrap;word-break:break-all;max-height:200px;overflow:auto;background:var(--bg-subtle);padding:8px;border-radius:6px}
.cancel-decide-form .radio-row{display:flex;gap:8px;align-items:flex-start;padding:4px 0}
.cancel-list-table{font-size:.86rem}
@media (max-width:640px){
  .deal-cancel-dl dt{flex:1 1 100%;margin-top:6px;padding-bottom:0}
  .deal-cancel-dl dd{flex:1 1 100%}
  .deal-cancel-actions{flex-direction:column}
  .deal-cancel-actions .btn{width:100%}
  .deal-cancel-modal{padding:16px 14px 14px}
  .deal-cancel-modal-actions{flex-direction:column}
  .deal-cancel-modal-actions .btn{width:100%}
  .listing-row-actions .deal-cancel-state{flex:1 1 100%}
  .cancel-list-table{display:block;overflow-x:auto;white-space:nowrap}
}
/* 行の操作列（SP）の nowrap/省略の影響を受けないように（申請パネル・モーダル・折りたたみ内の説明文） */
.listing-row-actions .deal-cancel-state .small,.listing-row-actions .deal-cancel-modal .small,.listing-row-actions .deal-danger-body .small,
.deal-cancel-modal .small,.deal-cancel-state .small{white-space:normal;overflow:visible;text-overflow:clip;max-width:none}
/* 申請中の行：パネルは行の下に全幅（サムネ・本文・操作列の下に折り返す） */
.listing-row.has-cancel-panel{flex-wrap:wrap}
.listing-row-cancel{flex:1 1 100%;min-width:0;margin-top:8px}
.listing-row-cancel .deal-cancel-state{margin-top:0}

/* --- v249: 停止中（制限ログイン）バナー・利用再開の手続き --- */
.account-restricted-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.account-restricted-banner .btn{margin-left:auto}
.recovery-steps{list-style:none;margin:0;padding:0}
.recovery-steps li{display:flex;align-items:flex-start;gap:8px;padding:6px 0;color:var(--text-2);line-height:1.6}
.recovery-steps li.is-current{color:var(--text);font-weight:700}
.recovery-steps li.is-done{color:var(--text-2)}
.recovery-step-dot{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;background:var(--bg-subtle);color:var(--text-2)}
.recovery-steps li.is-done .recovery-step-dot{background:#e7f6ec;color:#1a7f37}
.recovery-steps li.is-current .recovery-step-dot{background:var(--danger);color:#fff}
.unpaid-list{display:flex;flex-direction:column;gap:10px}
.unpaid-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--danger);border-radius:var(--radius);background:rgba(200,40,40,.04)}
.unpaid-item-body{flex:1 1 auto;min-width:0}
.unpaid-item-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
.unpaid-item-actions{flex:0 0 auto}
.unpaid-amount{font-size:1.15rem;font-weight:800;margin-top:4px}
@media (max-width:640px){
  .account-restricted-banner .btn{margin-left:0;width:100%}
  .unpaid-item{flex-direction:column;align-items:stretch;gap:8px}
  .unpaid-item-actions .btn{width:100%}
}

/* --- v249: ページ内の確認ダイアログ（window.confirm の代替）と入力エラーの一覧 --- */
.wa-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;inset:0;z-index:140;background:rgba(20,18,24,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.wa-confirm-overlay[hidden]{display:none}
.wa-confirm{background:var(--surface,#fff);border-radius:var(--radius);width:100%;max-width:420px;max-height:90vh;overflow:auto;padding:18px 18px 14px;box-shadow:0 18px 44px rgba(20,18,24,.3)}
.wa-confirm-title{margin:0 0 8px;font-size:1.05rem}
.wa-confirm-msg{line-height:1.7;overflow-wrap:anywhere;white-space:normal}
.wa-confirm-input{display:block;margin-top:10px}
.wa-confirm-input[hidden]{display:none}
.wa-confirm-input span{display:block;font-size:.82rem;color:var(--text-2);margin-bottom:4px}
.wa-confirm-input textarea{width:100%}
.wa-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.wa-confirm-actions .btn{min-width:6em}
body.wa-confirm-open{overflow:hidden}
.wa-form-errors{margin:0 0 12px}
.wa-form-errors ul{margin:6px 0 0;padding-left:1.3em}
.wa-form-errors li{line-height:1.6}
.cat-cascade-missing{display:block;margin:4px 0 0;color:var(--danger);font-weight:700;font-size:.82rem}
@media (max-width:640px){
  .wa-confirm-actions{flex-direction:column-reverse}
  .wa-confirm-actions .btn{width:100%}
}

/* ===== v250① 質問・回答の本文がスマホで1文字ずつ縦に崩れる不具合の修正 =====
 * 原因：.qa-q / .qa-a は flex で、本文が「テキストノードのまま」置かれていたため
 *       匿名フレックス項目となり、投稿者名ピル・日時・削除ボタンに押されて最小幅（1文字）まで縮んでいた。
 * 対策：本文を .qa-body で包み、伸びる項目（flex:1）＋min-width:0 にする。
 *       幅が足りない場合は日時・削除ボタンだけを次の行へ折り返す（本文は投稿者名の横に残る）。 */
.qa-q,.qa-a{flex-wrap:wrap}
.qa-body{flex:1 1 0;min-width:10em;overflow-wrap:anywhere;word-break:normal;line-height:1.7}
.qa-q .qa-time,.qa-a .qa-time{margin-left:auto;flex:0 0 auto}
.qa-q .qa-delete-btn,.qa-a .qa-delete-btn{flex:0 0 auto}
.qa-q .qa-tag,.qa-a .qa-tag{flex:0 0 auto}
@media (max-width:640px){
  .qa-body{min-width:8em}
}

/* ===== v250③ 確認ダイアログのボタン配置（PCでも縦並び：上「キャンセル」／下「出品を取り消す」＋補足を2行目に） =====
 * 「出品を取り消す（取消Web使用料16%）」の文言が横並びのボタン内で中途半端に折り返され、
 * 改行位置がずれて見えていたため、画面幅に関わらず縦並び・全幅とし、
 * 「（…）」の補足は webauc-confirm.js（setOkLabel）で2行目（.wa-confirm-ok-sub）に分けて表示する。 */
.wa-confirm-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:16px}
.wa-confirm-actions .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:0;white-space:normal;line-height:1.4;padding-top:10px;padding-bottom:10px;text-align:center}
.wa-confirm-ok-main,.wa-confirm-ok-sub{display:block}
.wa-confirm-ok-sub{font-size:.82em;font-weight:600;opacity:.95;margin-top:2px}
@media (max-width:640px){
  .wa-confirm-actions{flex-direction:column}
}

/* ===== v250② 入札ありの出品取消：2段階（①取消予告の追加説明 → ②取消）の表示 ===== */
.cancel-flow-manner{margin:10px 0 14px;line-height:1.7}
.cancel-flow-step{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-top:12px;background:var(--surface,#fff)}
.cancel-flow-step.is-current{border-color:var(--primary-3);box-shadow:0 0 0 2px var(--primary-3-soft)}
.cancel-flow-step.is-done{border-color:var(--success);background:var(--success-soft)}
.cancel-flow-step.is-locked{opacity:.65}
.cancel-flow-step-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;line-height:1.5}
.cancel-flow-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--primary-3);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.cancel-flow-step.is-done .cancel-flow-num{background:var(--success)}
.cancel-flow-step.is-locked .cancel-flow-num{background:var(--text-2)}
.cancel-flow-step .field{margin-top:6px}
.cancel-flow-step textarea{width:100%}
.cancel-flow-resend summary{cursor:pointer;color:var(--primary-3);margin:4px 0}
.cancel-flow-locked-msg{margin:0 0 8px}

/* ===== v253: 入出金一覧 — 取消・返金となった取引（取引中止）の行 ===== */
.ledger-row-cancelled td[data-label="状態"] strong{color:var(--danger,#b23a3a)}
.ledger-row-cancelled .ledger-cancel-fee{margin-top:4px;color:var(--crimson,#c0392b)}
.ledger-row-cancelled .ledger-cancel-refund{margin-top:4px}
.ledger-row-cancelled .ledger-cancel-refund strong{color:var(--success,#1d7d44)}
.receipt-note-sub{font-size:.8rem;color:#777;margin:-8px 0 16px}

/* ===== v255: ①②商品ページ 入札フォームの説明文を折りたたみ可能に（デポジット警告はフォームの下へ） ===== */
.bid-help{margin:4px 0 8px;border:1px solid var(--line);border-radius:10px;background:var(--wash-2,#FEF6E2)}
.bid-help>summary{
  cursor:pointer;list-style:none;padding:6px 10px;font-weight:700;color:var(--onyx);
  display:flex;align-items:center;gap:8px;user-select:none;
}
.bid-help>summary::-webkit-details-marker{display:none}
.bid-help>summary::before{content:"ℹ️";font-size:.9em}
.bid-help .bid-help-toggle{margin-left:auto;color:var(--muted);font-weight:500;font-size:.78rem}
.bid-help .bid-help-toggle::before{content:"✕ 隠す"}
.bid-help:not([open]) .bid-help-toggle::before{content:"▾ 表示"}
.bid-help>p{margin:0 !important;padding:0 10px 8px;line-height:1.6}
.bid-form .bid-help + .quick-bids{margin-top:6px}
/* 入札フォームの下へ移した警告バナー：ボタン（入札する）とくっつかないよう上に余白 */
.bid-form + .deposit-warn{margin-top:12px}

/* ===== v255③ 入出金一覧：タブ切り替え＋「さらに表示」 ===== */
.ledger-tabs{
  display:flex;gap:6px;margin:0 0 12px;padding:4px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface,#fff);box-shadow:var(--shadow);
}
.ledger-tabs[hidden]{display:none}
.ledger-tab{
  flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 6px;border:none;border-radius:9px;background:transparent;color:var(--text-2,#555);
  font-weight:700;font-size:.86rem;cursor:pointer;line-height:1.3;white-space:nowrap;
}
.ledger-tab:hover{background:var(--wash-2,#FEF6E2)}
.ledger-tab.is-active{background:var(--gold-grad);color:var(--onyx);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ledger-tab:focus-visible{outline:2px solid var(--primary-3);outline-offset:2px}
.ledger-tab-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:rgba(0,0,0,.08);font-size:.72rem;font-weight:800;color:inherit;
}
.ledger-tab.is-active .ledger-tab-count{background:rgba(255,255,255,.55)}
/* hidden 属性が .card / .table-stack tr の display 指定に負けないようにする */
.ledger-section[hidden]{display:none !important}
.ledger-table tbody tr[hidden]{display:none !important}
.ledger-more{margin-top:10px}
@media (max-width:640px){
  .ledger-tab{font-size:.78rem;padding:8px 4px;gap:4px;flex-direction:column}
  .ledger-tab-count{min-width:18px;height:18px;font-size:.66rem}
  .ledger-tabs{position:sticky;top:calc(var(--topbar-h, 56px) + 6px);z-index:5}
}

/* =========================================================
   v259: 公開状態（オープン／準備中）
   ========================================================= */
.maintenance-bypass-banner{
  margin:0 0 12px;padding:10px 14px;border-radius:var(--radius);
  background:var(--onyx);color:#fff;font-size:.9rem;line-height:1.6;
  border:1px solid var(--gold-3);box-shadow:0 4px 14px rgba(21,19,26,.18);
}
.maintenance-bypass-banner strong{color:var(--gold-2)}
.maintenance-bypass-banner a{color:var(--gold-1);font-weight:700;margin-left:6px}
.admin-subnav a.is-maintenance{color:var(--crimson);font-weight:700}
.mt-admin-status{border-left:6px solid var(--success)}
.mt-admin-status.is-maintenance{border-left-color:var(--crimson);background:linear-gradient(90deg,var(--danger-soft),transparent 60%),var(--surface)}
.mt-admin-status-head{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mt-admin-state{display:flex;align-items:center;gap:10px;font-size:1.45rem;font-weight:900;color:var(--text);line-height:1.3;margin-top:2px}
.mt-admin-dot{width:12px;height:12px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px var(--success-soft);flex:none}
.mt-admin-status.is-maintenance .mt-admin-state{color:var(--crimson)}
.mt-admin-status.is-maintenance .mt-admin-dot{background:var(--crimson);box-shadow:0 0 0 4px var(--danger-soft)}
.mt-admin-toggle .btn{min-width:180px}
.mt-admin-note{margin:12px 0 0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--warning-soft);color:#6b4a0c}
@media (max-width:640px){
  .mt-admin-toggle,.mt-admin-toggle .btn{width:100%}
}

/* ===== v260: 発送（元払い／着払い）・発送情報・送料連絡／送料決済・領収証の電子印 ===== */
/* 出品フォーム：発送の詳細 */
.ship-detail{margin:8px 0 4px 26px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--wash-2)}
.ship-detail-label{font-size:.86rem;font-weight:700;margin:0 0 4px}
.ship-payer{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.ship-payer-opt{align-items:flex-start}
.ship-payer-opt .small{display:block;font-weight:400}
.ship-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
.ship-grid .field{margin-bottom:6px}
.ship-grid select,.ship-grid input{width:100%}
.ship-detail-help{margin:4px 0 8px}
.ship-detail-preview{border-top:1px dashed var(--border);padding-top:8px;color:var(--muted)}
.ship-detail-preview-head{font-weight:700;margin-bottom:2px}
.ship-detail-preview ul{margin:0;padding-left:1.2em}
@media (max-width:640px){
  .ship-detail{margin-left:0;padding:10px 12px}
  .ship-grid{grid-template-columns:1fr}
}
/* 商品ページ：発送情報と推奨事項 */
.ship-info-list{margin:6px 0 10px}
.ship-info-list dt{flex-basis:110px}
.ship-notice{margin:0 0 10px;padding:10px 14px;border:1px solid var(--gold-line);border-left:4px solid var(--gold-3);border-radius:10px;background:var(--wash-2);font-size:.88rem}
.ship-notice-head{font-weight:700;font-size:.84rem;margin:0 0 4px}
.ship-notice ul{margin:0;padding-left:1.2em;line-height:1.7}
.ship-notice-ask{display:inline-block;margin-top:4px}
/* 受け渡し連絡：送料連絡／送料のお支払い */
.deal-shipping{margin:10px 0;padding:12px 14px;border:1px solid var(--gold-line);border-radius:var(--radius);background:#fff;text-align:left}
.deal-shipping-collect{background:var(--wash-2)}
.deal-shipping-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 6px}
.deal-shipping-title{font-size:.98rem}
.deal-shipping-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:4px 0 8px;font-size:.9rem}
.deal-shipping-dl dt{color:var(--muted);margin:0}
.deal-shipping-dl dd{margin:0;overflow-wrap:anywhere}
.deal-shipping-note{margin:4px 0 8px;line-height:1.7}
.deal-shipping-error{color:var(--danger);margin:0 0 8px}
.deal-shipping-form{display:inline-block;margin:2px 8px 4px 0}
.deal-shipping-edit{margin:6px 0}
.deal-shipping-edit>summary{list-style:none;display:inline-flex;cursor:pointer}
.deal-shipping-edit>summary::-webkit-details-marker{display:none}
.deal-shipping-edit[open]>summary{margin-bottom:8px}
.deal-shipping-reqform{padding:10px 12px;border:1px dashed var(--border);border-radius:10px;background:var(--wash-2)}
.deal-shipping-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:4px 12px}
.deal-shipping-grid input{width:100%}
.deal-shipping-reqform textarea{width:100%}
.deal-shipping-history{margin:8px 0 0;padding-left:1.2em}
.ledger-ship-line{margin-top:2px}
@media (max-width:640px){
  .deal-shipping{padding:10px 12px}
  .deal-shipping-grid{grid-template-columns:1fr}
  .deal-shipping-form,.deal-shipping-form .btn,.deal-shipping-edit>summary.btn{width:100%}
  .deal-shipping-edit>summary{justify-content:center}
}
/* 領収証・預り証：電子印（角印）。発行者欄の右端に社名へ少し重ねて押印する */
.receipt-issuer{justify-content:flex-end;align-items:flex-start;position:relative}
.receipt-issuer-info{position:relative;padding-right:40px;text-align:right}
.receipt-seal-img{flex:0 0 auto;width:84px;height:84px;margin:-12px 0 0 -58px;position:relative;z-index:1;opacity:.92;pointer-events:none;user-select:none}
@media (max-width:480px){
  .receipt-issuer-info{padding-right:0}
  .receipt-seal-img{width:68px;height:68px;margin:-6px 0 0 6px}
}
@media print{ .receipt-seal-img{opacity:1} }

/* ===== v261: 取消申請中パネルの縦崩れ修正・金額の（税込）表示 ===== */
/* スマホの取引一覧は .listing-row がグリッド（サムネ44px列＋本文列）になるため、
   行の下に置く取消申請中パネル（.listing-row-cancel）が44px列に入り縦書きのように崩れていた。全列にまたがらせる。 */
.listing-row > .listing-row-cancel{grid-column:1 / -1;width:100%}
.listing-row-cancel .deal-cancel-state{width:100%;box-sizing:border-box;writing-mode:horizontal-tb}
/* 金額の横に小さく（税込） */
.price-with-tax{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 4px}
.price-with-tax .auction-price-lg{margin-right:0}
.price-tax-in{font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap;letter-spacing:0}
.buynow-price .price-tax-in{margin-left:2px}
.sp-bid-price-wrap{display:inline-flex;align-items:baseline;white-space:nowrap}
.sp-bid-info .price-tax-in{font-size:.62rem;margin-left:1px}

/* ===== v262: 出品フォームの受け渡し方法・送料の支払いのチェックを大きく見やすく／元払いの送料の負担 ===== */
/* スマホ（iOS Safari）では .check-row input{width:auto} のためチェックボックス・ラジオが極小で表示され、
   チェックの有無が見分けにくかった。出品フォームの「受け渡し方法」と「送料の支払い／負担」だけ、
   ブラウザ標準の描画をやめて大きな枠＋塗りつぶし＋白いチェック（ラジオは二重丸）で描く。 */
.deliv-check input[type=checkbox],
.ship-choice input[type=radio]{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;
  width:24px;height:24px;min-width:24px;min-height:24px;margin:0;padding:0;
  border:2px solid #8a7a52;border-radius:5px;background:#fff center/78% no-repeat;
  box-shadow:none;cursor:pointer;vertical-align:middle;
  transition:background-color .12s, border-color .12s, box-shadow .12s;
}
.ship-choice input[type=radio]{border-radius:50%;background-image:none}
.deliv-check input[type=checkbox]:checked{
  background-color:var(--primary-3);border-color:var(--primary-3);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-9'/></svg>");
}
.ship-choice input[type=radio]:checked{
  border-color:var(--primary-3);
  background:radial-gradient(circle at center, var(--primary-3) 0 46%, #fff 50%);
}
.deliv-check input:focus-visible,.ship-choice input:focus-visible{outline:3px solid var(--primary-3-soft, rgba(154,123,26,.35));outline-offset:2px}
.ship-choice input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
/* 行全体：押しやすい高さ、選択中は背景と枠で強調（チェックが見えにくくても選択中とわかるように） */
.deliv-check{min-height:44px;gap:10px;padding:4px 12px 4px 8px;border:1px solid transparent;border-radius:10px}
.deliv-check span{font-size:1rem}
.deliv-check:has(input:checked){background:var(--wash-2);border-color:var(--gold-line)}
.deliv-check:has(input:checked) span{font-weight:700}
.ship-choice{gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;margin:0 0 6px}
.ship-choice > input[type=radio]{margin-top:1px}
.ship-choice:has(input:checked){border:2px solid var(--primary-3);padding:7px 9px;background:var(--wash-2)}
.ship-payer{gap:0}
/* 元払いの「送料の負担」：元払いの下に字下げして表示 */
.ship-bearer{margin:-2px 0 8px 22px;padding:8px 10px 2px;border-left:3px solid var(--gold-3);background:rgba(255,255,255,.55);border-radius:0 8px 8px 0}
.ship-bearer[hidden]{display:none}
.ship-bearer .ship-detail-label{margin-bottom:6px}
@media (max-width:640px){
  .deliv-check input[type=checkbox],
  .ship-choice input[type=radio]{width:28px;height:28px;min-width:28px;min-height:28px}
  .deliv-check{min-height:50px;width:100%}
  .deliv-check span{font-size:1.05rem}
  .ship-choice{padding:10px 10px}
  .ship-choice:has(input:checked){padding:9px 9px}
  .ship-choice strong{font-size:1.02rem}
  .ship-bearer{margin-left:10px}
}
/* 買い手モード（青）の配色でも同じ見え方にする */
body[data-mode="buyer"] .deliv-check input[type=checkbox]:checked{background-color:var(--buy-accent);border-color:var(--buy-accent)}
body[data-mode="buyer"] .ship-choice input[type=radio]:checked{border-color:var(--buy-accent);background:radial-gradient(circle at center, var(--buy-accent) 0 46%, #fff 50%)}

/* ===== v263: 送料連絡の自動の案内文・取引の内容（スマホの縦崩れ）・領収証の電子印の位置 ===== */
/* ① 送料連絡メッセージの末尾の自動の案内文：出品者が入力した文章と区切って小さく表示 */
.deal-msg-sysnote{margin-top:8px;padding-top:7px;border-top:1px dashed rgba(0,0,0,.18);font-size:.8em;line-height:1.6;color:var(--muted)}
.deal-msg-sysnote-label{display:inline-block;margin:0 6px 3px 0;padding:0 7px;border-radius:999px;background:rgba(0,0,0,.06);font-size:.92em;font-weight:700;color:var(--text-2);line-height:1.7;vertical-align:1px}

/* ② 取引の詳細「取引の内容」：スマホでは .table td{display:flex;justify-content:space-between} が残っていたため、
   値と補足（「（正式な登録情報：…）」「（ヤマト・決済…）」など）が横並びの別の列になり、
   「創庫生活館」が1文字ずつ縦に並んだり、金額が「1 / 円」と崩れていた。通常の表のセルに戻し、補足は値の下に置く。 */
.deal-view-table td .small{display:block;margin-top:2px;line-height:1.5}
@media (max-width:640px){
  .card > table.table.deal-view-table td{
    display:table-cell;text-align:left;vertical-align:top;
    word-break:normal;overflow-wrap:anywhere;line-break:strict;
  }
  .card > table.table.deal-view-table td::before{content:none;display:none}
  .card > table.table.deal-view-table th{vertical-align:top;width:36%}
  .deal-view-table td strong{white-space:nowrap}
}

/* ③ 領収証・預り証の電子印：v260 は印を社名・住所の上に重ねていたため、パソコンでは住所・登録番号の文字に
   かぶって位置がずれて見えた。発行者の文字と重ねず、発行者欄の右横（社名の高さ）に並べる。 */
.receipt-issuer{display:flex;justify-content:flex-end;align-items:flex-start;gap:12px;position:relative}
.receipt-issuer-info{position:static;padding-right:0;text-align:right;min-width:0}
.receipt-seal-img{flex:0 0 auto;width:80px;height:80px;margin:-6px 0 0 0;position:static;opacity:.95;mix-blend-mode:multiply}
.receipt-issuer .receipt-seal{margin:0}
@media (max-width:480px){
  .receipt-issuer{gap:8px}
  .receipt-issuer-info{padding-right:0;font-size:.8rem}
  .receipt-seal-img{width:64px;height:64px;margin:-4px 0 0 0}
}
@media print{ .receipt-seal-img{opacity:1} }
/* 領収証の内訳：スマホで金額の「¥」と数字が別の行に分かれないように */
.receipt-breakdown td{white-space:nowrap}

/* ===== v264: ①取引の進行状況の見出しが隣と重なる ②ウォッチボタンを押すと文字が消える（スマホ） =====
 * ① 見出しは word-break:keep-all のため、狭い画面では「落札者の受け渡し確認」等が1行のままはみ出して隣と重なっていた。
 *    意味の切れ目（<wbr>）で折り返し、それでも入らない場合は列の幅で折り返す。「いまここ」は1行のまま列の中に収める。
 * ② スマホではタップ後も :hover が残るため、「ウォッチ中」（白文字）に未登録用の白っぽい背景が重なって文字が見えなくなっていた。
 *    ウォッチ中は hover/focus でもウォッチ中の背景のまま。hover の色変えはマウスのある端末だけにする。 */
.deal-step-label{max-width:100%;padding:0 1px;overflow-wrap:anywhere;word-break:keep-all;line-break:strict}
.deal-step-now{white-space:nowrap;max-width:100%;margin-left:auto;margin-right:auto;width:max-content;padding-left:5px;padding-right:5px}
.chip-watch.is-watching:hover,.chip-watch.is-watching:focus,.chip-watch.is-watching:active{background:var(--gold-grad);color:#3a2c08;border-color:transparent}
body[data-mode="buyer"] .chip-watch.is-watching:hover,body[data-mode="buyer"] .chip-watch.is-watching:focus,body[data-mode="buyer"] .chip-watch.is-watching:active{background:var(--buy-grad);color:#fff;border-color:transparent}
.chip-watch:focus{outline:none}
.chip-watch:focus-visible{outline:2px solid var(--buy-accent,#2a5bd7);outline-offset:2px}
.chip-watch:disabled{opacity:1;cursor:wait}
@media (hover:none){
  .chip-watch:not(.is-watching):hover{background:#fff}
  body[data-mode="buyer"] .chip-watch:not(.is-watching):hover{background:#fff}
}

/* ===== v265: 取引の進行状況 ④「落札者の受け取り確認」をボタンに・「いまここ」廃止 =====
 * ④は落札者にだけボタンとして表示（押すと確認ダイアログ → 取引終了）。誤操作を防ぐため、枠・色でボタンと分かる見た目にし、
 * 押した後（送信中）は押せない状態にする。スマホでは受け渡し連絡カード内のステップバーも表示する（ボタンを受け渡し連絡の中でも押せるように）。 */
.deal-step-now{display:none}
.deal-step.is-action::before{top:15px}
.deal-step-action{
  -webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  width:100%;max-width:112px;box-sizing:border-box;margin:0 auto;padding:0 3px 6px;
  border:2px solid var(--primary-3);border-radius:12px;background:var(--surface,#fff);
  box-shadow:0 3px 10px rgba(0,0,0,.10);color:var(--primary-3);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.deal-step-action .deal-step-dot{background:var(--primary-3);border-color:var(--primary-3);color:#fff;animation:none;box-shadow:none}
.deal-step-action .deal-step-label{color:var(--primary-3);font-weight:700}
.deal-step-action:hover{background:rgba(154,123,26,.07)}
.deal-step-action:focus-visible{outline:2px solid var(--primary-3);outline-offset:2px}
.deal-step-action:active{transform:translateY(1px)}
.deal-step-action:disabled,.deal-step-action.is-busy{opacity:.55;cursor:wait;transform:none}
@media (max-width:640px){
  .deal-contact-card .deal-steps{display:flex}
  .deal-contact-card .deal-step::before{top:11px}
  .deal-contact-card .deal-step.is-action::before{top:13px}
  .deal-steps-top .deal-step.is-action::before{top:12px}
  .deal-steps-top .deal-step-action{padding:0 2px 4px;border-radius:9px;gap:3px}
  .deal-steps-view .deal-step.is-action::before{top:12px}
}
@media (max-width:420px){
  .deal-step-action{padding:0 1px 5px;border-radius:9px}
}

/* ===== v265: 受け渡し方法は落札後に選択（入札フォームでは表示のみ・受け渡し連絡で選択） ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bid-delivery-info{margin:10px 0 8px;padding:8px 10px;border:1px dashed var(--border);border-radius:10px;background:var(--bg-subtle,#faf8f2)}
.bid-delivery-legend{display:block;font-size:.84rem;font-weight:700;margin-bottom:4px}
.bid-delivery-list{margin:0 0 4px;padding:0;list-style:none}
.bid-delivery-list li{display:flex;gap:6px;align-items:baseline;font-size:.86rem;color:var(--text)}
.bid-delivery-list .delivery-mark{font-size:.6rem;color:var(--muted)}
.bid-delivery-note{margin:2px 0 0}
.deal-delivery-choice{margin:10px 0 12px;padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface,#fff)}
.deal-delivery-choice.is-buyer{border-color:var(--danger,#D6322B);box-shadow:0 2px 10px rgba(214,50,43,.08)}
.deal-delivery-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.deal-delivery-options{margin:0 0 8px;border:0;padding:0}
.deal-delivery-options .radio-row{padding:6px 0}
.history-inline-bid .livebid-delivery-info{flex:0 1 auto;align-self:center;max-width:240px;line-height:1.4}
.watch-delivery-info{margin:6px 0 8px;line-height:1.5}
/* v265: 入札履歴の案内（入札者を押すと入札者情報が表示されます） */
.bid-history-hint{margin:-4px 0 8px;font-size:.78rem}

/* ===== v266: 送金実績の確認（管理画面） ===== */
.transfer-check .transfer-check-table th{text-align:left;font-weight:600}
.transfer-check .transfer-check-table td{text-align:right;white-space:nowrap}
.transfer-check .transfer-check-total th,.transfer-check .transfer-check-total td{font-weight:700;border-top:2px solid var(--border)}
.transfer-check-alert{margin:10px 0;padding:8px 12px;border-radius:10px;background:#fdecec;color:#b42318}
.transfer-check tr.is-current td{background:var(--bg-subtle,#faf8f2);font-weight:600}
.tx-transfer-check{display:inline-block;margin-top:6px}
.transfer-check .section-title{margin-top:22px}

/* ===== v271: ④の白抜き・「競り終了」を大きく・発送連絡・発送後は取消不可・処理中の表示・未ログインのマイページ閲覧 ===== */
/* ② 受け渡し連絡のステップバー ④「落札者の受け取り確認」（ボタン）の丸を塗りつぶしから白抜きに */
.deal-step-action .deal-step-dot{background:#fff;border-color:var(--primary-3);color:var(--primary-3)}
.deal-step-action:hover .deal-step-dot{background:#fff}

/* ⑥ 落札後（終了後）の商品ページ上部の「競り終了」を大きく目立つ表示に */
.live-head:has(.live-ended-banner){justify-content:center;padding:14px 16px}
.live-ended-banner{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,#b4231d,#d6322b 55%,#8f1b16);
  border:2px solid var(--gold-2);box-shadow:0 6px 18px rgba(214,50,43,.35),inset 0 1px 0 rgba(255,255,255,.25);text-align:center}
.live-ended-text{font-family:var(--font-disp);font-weight:900;font-size:2rem;line-height:1.1;letter-spacing:.24em;padding-left:.24em;
  color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.live-ended-time{font-size:.86rem;font-weight:700;color:var(--gold-2);letter-spacing:.04em;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .live-ended-text{font-size:1.75rem}
  .live-ended-banner{padding:10px 12px}
}

/* ⑨⑩ 発送連絡（配送業者・お問い合わせ番号） */
.deal-ship-notice{margin:10px 0;padding:12px 14px;border:1px solid var(--gold-line);border-radius:var(--radius);background:#fff;text-align:left}
.deal-ship-notice.is-shipped{border-color:#9fd3b6;background:#f3fbf6}
.deal-ship-notice-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 6px}
.deal-ship-notice-title{font-size:.98rem}
.deal-ship-notice-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:4px 0 8px;font-size:.9rem}
.deal-ship-notice-dl dt{color:var(--muted);margin:0}
.deal-ship-notice-dl dd{margin:0;overflow-wrap:anywhere}
.deal-ship-tracking{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.04em;user-select:all}
.deal-ship-notice-note{margin:4px 0 6px;line-height:1.7}
.deal-ship-notice-warn{margin:4px 0 8px;line-height:1.6;color:var(--danger)}
.deal-ship-notice-new>summary,.deal-ship-notice-edit>summary{list-style:none;display:inline-flex;cursor:pointer}
.deal-ship-notice-new>summary::-webkit-details-marker,.deal-ship-notice-edit>summary::-webkit-details-marker{display:none}
.deal-ship-notice-new[open]>summary{margin-bottom:8px}
.deal-ship-notice-body p{margin:0 0 6px}
.deal-ship-notice-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:6px 0 2px}
.deal-ship-notice-form .field{flex:1 1 220px;margin:0}
.deal-ship-notice-form .field .small{display:block;margin-top:2px}
.deal-ship-notice-form .btn{flex:0 0 auto}
@media (max-width:640px){
  .deal-ship-notice-form .field,.deal-ship-notice-form .btn{flex:1 1 100%}
}

/* ⑪ 発送連絡の後は取り消し不可（説明文のみ） */
.deal-cancel-locked{margin:8px 0 2px;padding:8px 12px;border-radius:10px;background:var(--bg-subtle,#f6f3ea);border:1px dashed var(--line);line-height:1.6;color:var(--text-2,#4a4550);white-space:normal}
.listing-row-actions .deal-cancel-locked{flex:1 1 100%;max-width:440px}
.deal-cancel-lead{font-weight:600}

/* ⑱ 取り消し・決済の送信後の「処理中」表示（固まったように見えないように） */
.wa-processing{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,18,24,.55)}
.wa-processing[hidden]{display:none}
.wa-processing-box{max-width:360px;width:100%;padding:22px 20px 18px;border-radius:16px;background:#fff;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.wa-processing-spinner{display:inline-block;width:38px;height:38px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--primary-3);animation:wa-spin .9s linear infinite}
@keyframes wa-spin{to{transform:rotate(360deg)}}
.wa-processing-text{margin:12px 0 6px;font-weight:700;line-height:1.6}
.wa-processing-sub{margin:0;font-size:.82rem;color:var(--muted);line-height:1.6}
body.wa-processing-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.wa-processing-spinner{animation-duration:2.4s}}

/* ① 未ログインでもマイページを閲覧（操作時にログイン／新規登録を案内） */
.guest-gate-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 14px;padding:12px 16px;
  border:1.5px solid var(--gold-line);border-radius:var(--radius);background:linear-gradient(135deg,#fffaf0,#fff5dc)}
.guest-gate-banner-body{flex:1 1 320px;display:flex;flex-direction:column;gap:4px;line-height:1.6}
.guest-gate-banner-body span{font-size:.86rem;color:var(--text-2,#4a4550)}
.guest-gate-banner-actions{display:flex;flex-wrap:wrap;gap:8px}
.guest-gate-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,18,24,.55)}
.guest-gate-overlay[hidden]{display:none}
.guest-gate-dialog{position:relative;width:100%;max-width:380px;margin:0;padding:22px 20px 16px;text-align:center}
.guest-gate-dialog h3{margin:0 0 8px}
.guest-gate-msg{margin:0 0 14px;line-height:1.7}
.guest-gate-actions{display:flex;flex-direction:column;gap:8px}
.guest-gate-close{position:absolute;top:8px;right:10px;border:0;background:none;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--muted);box-shadow:none;padding:4px 8px}
body.guest-gate-open{overflow:hidden}
.shop-hub-guest .shop-hub-mode-flag{margin-bottom:10px}
@media (max-width:640px){
  .guest-gate-banner-actions{width:100%}
  .guest-gate-banner-actions .btn{flex:1 1 0}
}
/* ⑥ スマホ：ページ上部にも「競り終了」を大きく（PCは右列の入札カードに表示） */
.live-ended-top{display:none}
@media (max-width:860px){
  .live-ended-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:0 0 12px;padding:10px 12px;
    border-radius:14px;background:linear-gradient(135deg,#b4231d,#d6322b 55%,#8f1b16);border:2px solid var(--gold-2);
    box-shadow:0 6px 18px rgba(214,50,43,.3);text-align:center}
  .live-ended-top .live-ended-text{font-size:1.9rem}
}
.deal-ship-notice-form .field .small{font-weight:400;color:var(--muted)}

/* v271: ヘッダーのロゴを新しいサービスアイコン（weboku ウェブオク）の画像に */
.brand-mark-img{display:block;background:none;padding:0;object-fit:cover;border-radius:10px}

/* v271: 準備中の2種類目「新規登録・ログインのみ停止」 */
.maintenance-auth-banner{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 12px;padding:9px 14px;border-radius:12px;
  background:#fff4e5;border:1.5px solid #f0b45c;color:#5a3a06;font-size:.88rem;line-height:1.6}
.maintenance-auth-banner strong{color:#8a4b00}
.maintenance-auth-note{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:#fff8ec;border:1.5px solid var(--gold-3,#C9A227);display:flex;flex-direction:column;gap:6px;line-height:1.7}
.maintenance-auth-pill{align-self:flex-start;display:inline-block;padding:2px 12px;border-radius:999px;background:var(--danger,#d6322b);color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.06em}
.maintenance-auth-title{font-size:1.02rem}
.maintenance-auth-msg{font-size:.9rem}
.maintenance-auth-reopen{font-size:.88rem}
.mt-admin-modes{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.mt-admin-mode-list{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mt-admin-mode{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.mt-admin-mode input{margin-top:4px;width:20px;height:20px;flex:none}
.mt-admin-mode > span{display:flex;flex-direction:column;gap:2px}
.mt-admin-mode.is-current{border-color:var(--gold-3,#C9A227);background:#fffaf0}
.mt-admin-mode:has(input:checked){border-color:var(--primary-3);box-shadow:0 0 0 2px rgba(154,123,26,.15)}
.mt-admin-modes .btn{align-self:flex-start}

/* ===================== v273: 体験デモ（練習モード） public/demo.php ===================== */
.demo-banner{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#fff8e1;border:1.5px dashed var(--gold-3);font-size:.88rem;line-height:1.6}
.demo-banner-pill{flex:0 0 auto;padding:2px 10px;border-radius:999px;background:var(--gold-grad);color:#3a2c08;font-weight:900;font-size:.76rem;letter-spacing:.06em}
.demo-tag{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 10px;border-radius:999px;background:var(--gold-grad);color:#3a2c08;font-size:.72rem;font-weight:900}
.demo-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 14px}
.demo-pick-card{display:flex;gap:14px;align-items:flex-start;padding:18px;text-decoration:none;color:inherit;border:1.5px solid var(--gold-line);transition:transform .15s,box-shadow .2s}
.demo-pick-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(201,162,39,.22);text-decoration:none}
.demo-pick-ic{flex:0 0 auto;width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:#1d1924}
.demo-pick-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.demo-pick-body strong{font-size:1.12rem}
.demo-pick-time{align-self:flex-start;font-size:.74rem;font-weight:800;color:var(--gold-4);background:var(--primary-soft);padding:1px 8px;border-radius:999px}
.demo-pick-desc{font-size:.88rem;line-height:1.7;color:var(--muted)}
.demo-pick-desc b{color:var(--ink,#221F2A)}
.demo-pick-go{margin-top:4px;font-weight:800;color:var(--primary-3)}
@media (max-width:640px){.demo-pick{grid-template-columns:1fr}.demo-pick-card{padding:14px}}
/* いまやること（画面上部に固定） */
.demo-coach{position:sticky;top:calc(var(--ticker-top,64px) + 6px);z-index:30;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border-radius:14px;background:#1d1924;color:#fff;box-shadow:0 10px 26px rgba(15,10,20,.28);border:1.5px solid rgba(231,198,90,.55)}
.demo-coach-step{flex:0 0 auto;padding:2px 9px;border-radius:999px;background:var(--gold-grad);color:#3a2c08;font-size:.72rem;font-weight:900;letter-spacing:.04em}
.demo-coach-tx{flex:1 1 260px;display:flex;gap:6px;align-items:flex-start;font-size:.92rem;line-height:1.65}
.demo-coach-tx b{color:#F3E3A2}
.demo-coach-ic{flex:0 0 auto}
.demo-coach-tools{display:flex;gap:8px;align-items:center;margin-left:auto}
.demo-coach-link{color:#d8c98a;font-size:.78rem}
.demo-coach-reset{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:999px;padding:4px 10px;font:inherit;font-size:.78rem;cursor:pointer}
.demo-coach-reset:hover{background:rgba(255,255,255,.12)}
.demo-warn{display:inline-block;margin-top:2px;color:#ffb4a8;font-weight:700}
.demo-glow{position:relative} /* v283: 枠の見た目は末尾の v283 ブロックへ（旧：角丸12px・外側7pxの枠で周りの文字に被っていた） */
@keyframes demoglow{0%,100%{box-shadow:0 0 0 0 rgba(231,198,90,.6)}50%{box-shadow:0 0 0 12px rgba(231,198,90,0)}}
@media (prefers-reduced-motion:reduce){.demo-glow{animation:none}}
/* 通知（右下） */
.demo-toasts{position:fixed;left:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.demo-toast{padding:10px 14px;border-radius:12px;background:#221F2A;color:#fff;font-size:.86rem;line-height:1.6;box-shadow:0 10px 26px rgba(0,0,0,.28);border-left:4px solid var(--gold-2);animation:demotoast .3s ease both;transition:opacity .35s,transform .35s}
.demo-toast.is-ok{border-left-color:#3fb26b}.demo-toast.is-warn{border-left-color:#e2533f}
.demo-toast.is-out{opacity:0;transform:translateY(8px)}
@keyframes demotoast{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:960px){.demo-toasts{left:10px;right:10px;max-width:none;bottom:calc(var(--mobile-nav-h,64px) + 12px + env(safe-area-inset-bottom))}}
/* 出品デモ */
.demo-samples{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 4px}
.demo-sample{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:1.5px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;font:inherit;font-size:.84rem;font-weight:700;color:inherit;text-align:center}
.demo-sample img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.demo-sample:hover{border-color:var(--gold-3)}
.demo-sample.is-picked{border-color:var(--gold-3);box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.demo-sample-own{justify-content:center;min-height:120px;background:var(--bg-subtle,#faf8f2);border-style:dashed}
.demo-sample-own small{font-weight:500;color:var(--muted);font-size:.72rem}
.demo-own-ic{font-size:1.8rem}
@media (max-width:640px){.demo-samples{grid-template-columns:repeat(2,1fr)}}
.demo-photo-row{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.demo-photo-thumb{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:#f3efe6}
.demo-photo-thumb[src=""]{visibility:hidden}
.demo-price-area{margin-top:6px}
.demo-invalid{border-color:var(--danger,#c0271f)!important;box-shadow:0 0 0 3px rgba(192,39,31,.15)!important;border-radius:10px}
.demo-preview-bar{position:static;margin:0 0 12px}
.demo-preview-card .actions{margin:0}
.demo-item .auction-gallery-main img{width:100%;max-height:520px;object-fit:contain;background:#f3efe6}
.demo-start{margin:6px 0 10px;font-size:1.05rem}
.live-clock.is-urgent .live-clock-time{color:#ff6a5c}
.demo-mytop{margin:6px 0 2px;padding:7px 10px;border-radius:10px;line-height:1.6}
.demo-mytop.is-top{background:#eaf7ee;color:#1f6b3a;border:1px solid #bfe3cb}
.demo-mytop.is-lost{background:#fff1ef;color:#a3261b;border:1px solid #f3c7c0}
.bid-form-message.is-ok{color:#1f6b3a;font-weight:700}
.bid-form-message.is-error{font-weight:700}
.bid-live-item.is-me .bid-live-name{font-weight:900;color:var(--primary-3)}
.bid-live-item.is-outbid{opacity:.6}
.demo-note{font-size:.72rem;color:var(--muted);font-weight:500}
.demo-hist-empty{list-style:none;padding:4px 0}
.demo-published{margin:0 0 12px}
/* 結果・取引 */
.live-ended-top.demo-ended{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:0 0 12px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#7a1512,#c0271f);color:#fff}
.demo-ended .live-ended-text{font-size:1.5rem;font-weight:900;letter-spacing:.2em}
.demo-result{border:2px solid var(--gold-3)}
.demo-calc{width:100%;max-width:460px;border-collapse:collapse;margin:8px 0 10px;font-size:.95rem}
.demo-calc th,.demo-calc td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left}
.demo-calc td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.demo-calc tr.is-total th,.demo-calc tr.is-total td{font-size:1.08rem;font-weight:900;color:var(--primary-3);border-bottom:2px solid var(--gold-3)}
.demo-steps{display:block!important;margin:0 0 12px;padding:10px 12px 8px;background:var(--surface,#fff);border:1.5px solid var(--gold-line);border-radius:12px}
.demo-steps .deal-steps{margin:8px 0 2px}
.demo-sub{margin:4px 0 6px;font-size:1rem}
.demo-ship-form,.demo-pay,.demo-quick{margin-top:10px;padding:12px;border:1.5px solid var(--gold-line);border-radius:12px;background:#fffdf6}
.demo-wait{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:var(--bg-subtle,#faf8f2)}
.demo-final{margin-top:12px;padding:16px;border-radius:14px;background:linear-gradient(135deg,#fffbea,#fff3c9);border:2px solid var(--gold-3)}
.demo-final h3{margin:0 0 6px;font-size:1.2rem}
.demo-final-cta{flex-wrap:wrap;gap:8px;margin-top:10px}
.qa-item .demo-answer{margin-top:6px}
@media (max-width:640px){
  .demo-coach{gap:6px 8px;padding:8px 10px;border-radius:12px}
  .demo-coach-tx{order:3;flex:1 1 100%;font-size:.84rem;line-height:1.55}
  .demo-coach-tools{gap:6px}
  .demo-coach-link{font-size:.72rem}
  .demo-coach-reset{padding:2px 8px;font-size:.72rem}
  .demo-banner{font-size:.8rem;padding:8px 10px}
}

/* ===================== v274: 自動延長 ===================== */
.chip-extend{display:inline-flex;align-items:center;gap:2px;padding:3px 10px;border-radius:999px;background:#fff4d6;color:#7a5c0c;border:1px solid var(--gold-3);font-size:.76rem;font-weight:800;white-space:nowrap;cursor:help}
.live-extend-note{margin:6px 0 2px;padding:7px 10px;border-radius:10px;background:#fff1ef;color:#a3261b;border:1px solid #f3c7c0;font-weight:700;line-height:1.6}
.live-extend-note.is-pop{animation:extpop .6s ease}
@keyframes extpop{0%{transform:scale(.96);opacity:.4}60%{transform:scale(1.02);opacity:1}100%{transform:none}}
.live-extend-rule{margin:4px 0 6px;line-height:1.55}
.auto-extend-status{margin:6px 0 10px;padding:8px 12px;border-radius:10px;font-size:.9rem}
.auto-extend-status.is-on{background:#eaf7ee;border:1px solid #bfe3cb;color:#1f6b3a}
.auto-extend-status.is-off{background:#f4f2ee;border:1px solid var(--border);color:var(--muted)}

/* ===================== v275: 担当者ログイン ===================== */
.nav-acc-staff{display:block;font-size:.66rem;font-weight:700;color:var(--gold-4);line-height:1.1}
.staff-login-id code,.staff-id-example code,.staff-login-id-code,.staff-next-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff8e1;border:1px solid var(--gold-line);border-radius:6px;padding:2px 7px;word-break:break-all}
.staff-login-id{font-size:1.05rem;margin:4px 0}
.staff-id-example{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 10px}
.staff-id-example div{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--bg-subtle,#faf8f2)}
@media (max-width:640px){.staff-id-example{grid-template-columns:1fr}}
.staff-rows{display:flex;flex-direction:column;gap:10px}
.staff-row{padding:12px;border:1.5px solid var(--gold-line);border-radius:12px;background:#fff}
.staff-row.is-disabled{background:#f6f4ef;opacity:.85}
.staff-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.staff-no{font-size:.74rem;font-weight:800;color:#3a2c08;background:var(--gold-grad);padding:1px 8px;border-radius:999px}
.staff-name{font-size:1rem}
.staff-row-id{margin:2px 0}
.staff-edit{margin:6px 0}
.staff-inline-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:8px 0}
.staff-inline-form .field{margin:0;flex:1 1 180px}
.staff-row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.staff-delete{color:var(--danger,#c0271f)}
.login-staff-hint{margin:4px 0 0;line-height:1.6}

/* ===================== v276: 操作の記録 ===================== */
.activity-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0 0 14px}
.activity-sum-card{display:flex;flex-direction:column;gap:2px;padding:12px;text-decoration:none;color:inherit;border:1.5px solid var(--border)}
.activity-sum-card:hover{border-color:var(--gold-3);text-decoration:none}
.activity-sum-card.is-current{border-color:var(--gold-3);box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.activity-sum-who{font-weight:800;font-size:.92rem}
.activity-sum-cnt b{font-size:1.3rem;font-family:var(--num,inherit)}
.activity-sum-ng{color:var(--danger,#c0271f);font-size:.8rem;margin-left:4px}
.activity-rows{display:flex;flex-direction:column}
.activity-row{display:grid;grid-template-columns:118px 210px 1fr 110px;gap:10px;align-items:start;padding:10px 4px;border-bottom:1px solid var(--border)}
.activity-row:last-child{border-bottom:0}
.activity-row.is-ng{background:#fff7f5}
.activity-time{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--muted)}
.activity-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.activity-who .badge{align-self:flex-start}
.activity-badge-staff{background:#fff4d6;color:#7a5c0c;border:1px solid var(--gold-3)}
.activity-badge-owner{background:#eef3fb;color:#2c4f86;border:1px solid #c8d6ee}
.activity-login{word-break:break-all}
.activity-what{min-width:0}
.activity-cat{display:inline-block;font-size:.72rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:0 8px;margin-right:4px}
.activity-label{font-size:.95rem}
.activity-result{margin-left:6px;font-size:.8rem;font-weight:800}
.activity-row.is-ok .activity-result{color:#1f6b3a}
.activity-row.is-ng .activity-result{color:var(--danger,#c0271f)}
.activity-target,.activity-msg{margin-top:2px;line-height:1.6;word-break:break-word}
.activity-detail{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px;color:#5a4a1a}
.activity-detail span{background:#faf6e8;border-radius:6px;padding:0 6px}
.activity-ip{text-align:right;word-break:break-all}
.activity-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.staff-activity-link{display:inline-block;margin-top:4px}
@media (max-width:860px){
  .activity-row{grid-template-columns:1fr;gap:4px}
  .activity-ip{text-align:left}
}
.activity-filter-wrap{margin:0 0 14px}
.activity-filter-sum{cursor:pointer;font-weight:800;padding:8px 12px;border:1.5px solid var(--gold-line);border-radius:12px;background:#fffdf6;list-style:none}
.activity-filter-wrap[open] .activity-filter-sum{margin-bottom:8px}
.activity-filter-sum::-webkit-details-marker{display:none}

/* ===== v280: お問い合わせフォーム（public/contact.php）・管理画面「お問い合わせ」 ===== */
.contact-card{max-width:880px;margin-left:auto;margin-right:auto}
.contact-steps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 18px;counter-reset:none}
.contact-steps li{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:var(--radius-sm,8px);background:var(--bg-subtle);color:var(--muted);font-size:.86rem;font-weight:700;text-align:center}
.contact-steps li span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid var(--border);font-size:.78rem}
.contact-steps li.is-current{background:var(--primary-3-soft);color:var(--primary-3)}
.contact-steps li.is-current span{background:var(--primary);border-color:var(--primary);color:#fff}
.contact-steps li.is-done{color:var(--success)}
.contact-steps li.is-done span{border-color:var(--success)}
.contact-notes{background:var(--wash-2,#FEF6E2);border:1px solid var(--border);border-radius:var(--radius-sm,8px);padding:10px 14px;margin:0 0 16px}
.contact-notes p{margin:2px 0;line-height:1.7}
.contact-form .field{margin-bottom:14px}
.contact-grid{margin-bottom:0}
.contact-form .opt{display:inline-block;font-size:.7rem;color:var(--muted);background:var(--bg-subtle);border-radius:var(--radius-pill,999px);padding:1px 8px;font-style:normal;margin-left:4px;vertical-align:middle;font-weight:600}
.contact-form textarea{min-height:180px;resize:vertical}
.contact-count{align-self:flex-end;font-weight:500}
.contact-err{color:var(--danger);font-size:.84rem;font-weight:700}
.contact-form .has-error input,.contact-form .has-error select,.contact-form .has-error textarea{border-color:var(--danger);background:var(--danger-soft)}
.contact-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.contact-agree .check-row{display:flex;gap:8px;align-items:flex-start;font-weight:600}
.contact-agree .check-row input{width:auto;margin-top:4px}
.contact-actions{justify-content:center;margin-top:8px}
.contact-actions .btn,.contact-confirm-actions .btn{min-width:220px}
.contact-lead{margin:0 0 12px}
.contact-confirm-table th{width:28%}
.contact-body-text{white-space:normal;overflow-wrap:anywhere;line-height:1.75}
.contact-confirm-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.contact-confirm-actions form{display:block}
.contact-done{text-align:center;padding:10px 4px 6px}
.contact-done-mark{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:var(--success-soft);color:var(--success);font-size:1.7rem;font-weight:900}
.contact-done h3{margin:0 0 8px;font-size:1.25rem}
.contact-done-no{font-size:1.05rem;margin:0 0 12px}
.contact-done-no strong{font-family:Oswald,'Zen Kaku Gothic New',sans-serif;letter-spacing:.04em;font-size:1.3rem;color:var(--primary-3)}
.contact-done p{line-height:1.8}
.contact-warn{color:var(--danger)}
.contact-done-actions{justify-content:center;margin-top:16px}
.footer-links .footer-contact{font-weight:700}
@media (max-width:640px){
  .contact-steps li{font-size:.78rem;padding:7px 4px}
  .contact-confirm-table th{width:auto;white-space:normal}
  .contact-confirm-table th,.contact-confirm-table td{display:block;width:auto;border-bottom:0}
  .contact-confirm-table tr:last-child td{border-bottom:1px solid var(--border,#e6e0d4)}
  .contact-actions .btn,.contact-confirm-actions .btn,.contact-confirm-actions form{width:100%}
}
/* 管理画面 */
.admin-subnav a.has-new-contact{color:var(--danger);font-weight:700}
.contact-admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.contact-admin-tabs a{padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-pill,999px);background:var(--surface);color:var(--text-2);font-size:.86rem;font-weight:700;text-decoration:none}
.contact-admin-tabs a span{color:var(--muted);font-weight:600;margin-left:2px}
.contact-admin-tabs a.is-active{background:var(--primary-3-soft);color:var(--primary-3);border-color:rgba(201,162,39,.3)}
.contact-admin-tabs a.has-new{border-color:rgba(214,50,43,.35)}
.contact-admin-tabs a.has-new span{color:var(--danger)}
.contact-admin-filter{display:grid;grid-template-columns:minmax(160px,1.2fr) minmax(200px,2fr) minmax(130px,1fr) minmax(130px,1fr) auto;gap:10px;align-items:end}
.contact-admin-filter .field{margin:0}
@media (max-width:860px){.contact-admin-filter{grid-template-columns:1fr 1fr}.contact-admin-filter .actions{grid-column:1 / -1}}
.contact-admin-table-list td{vertical-align:top}
.contact-row-new td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.contact-snippet{margin-top:2px;overflow-wrap:anywhere}
.contact-mail.is-ok{color:var(--success);font-weight:700}
.contact-mail.is-ng{color:var(--danger);font-weight:700}
.contact-mail-error{color:var(--danger);margin-top:6px;overflow-wrap:anywhere}
.contact-resend{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.contact-admin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.contact-admin-no{margin:0;font-family:Oswald,'Zen Kaku Gothic New',sans-serif;letter-spacing:.04em}
.contact-admin-table th{width:24%}
.contact-mail-card .contact-mail-status{margin:6px 0 12px}
.contact-smtp{margin:12px 0;border:1px solid var(--border);border-radius:var(--radius-sm,8px);padding:10px 14px;background:var(--surface-2,#FFFCF4)}
.contact-smtp summary{cursor:pointer;font-weight:700}
.contact-mail-test{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:16px;padding-top:14px;border-top:1px dashed var(--border)}
.contact-mail-test .field{flex:1 1 260px;margin:0}
.field>.contact-err,.contact-err{color:var(--danger);font-size:.84rem;font-weight:700}
.contact-done p{text-align:left;max-width:600px;margin-left:auto;margin-right:auto}
.contact-done p.contact-done-no{text-align:center}

/* ===== v281: アカウントメニュー（右上）が画面の下で見切れ、ログアウトまで届かない対策 =====
   ・ヘッダー（z-index:30）の中にあるため、スマホの下部ナビ（40）・固定入札バー（60）の下に隠れていた
     → 開いている間はヘッダーを前面へ（確認ダイアログなど 1200 番台よりは下）
   ・項目が画面に収まらないときは、メニューの中だけスクロールできるように（高さ＝画面の高さまで） */
body.nav-menu-open .topbar{z-index:1100}
.nav-menu{
  max-height:calc(100vh - var(--topbar-h, 56px) - 24px);
  max-height:calc(100dvh - var(--topbar-h, 56px) - 24px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}

/* ===== v283: 体験デモ「👉 いまやること」の光る枠が、周りの文字（説明文・ラベル・ボタン）に被らないように =====
   旧：外側 7px（太さ3px＋すき間4px）＋角丸12px の枠 → 上下の文字や、フォームの角の文字・ボタンに重なっていた。
   新：ボタン・入力欄 … 要素にぴったり沿う 3px の枠（外へのにじみも 6px まで・薄く）
       フォーム・欄 … あらかじめ内側に余白と透明の枠線を用意しておき、光るときは枠線の色だけ変える（中身も周りも動かない） */
.demo-glow{outline:none;outline-offset:0;box-shadow:0 0 0 3px var(--gold-2);animation:demoglow283 1.5s ease-in-out infinite}
@keyframes demoglow283{0%,100%{box-shadow:0 0 0 3px var(--gold-2),0 0 0 3px rgba(231,198,90,.35)}50%{box-shadow:0 0 0 3px var(--gold-2),0 0 0 6px rgba(231,198,90,0)}}
#demo-answer,#demo-bid-form,#demo-deliv-form,#demo-final-cta,#demo-msg-form,#demo-price-area,#demo-samples,#demo-ship-form{padding:10px;border:2px solid transparent;border-radius:12px;transition:border-color .2s,background-color .2s}
.demo-glow.demo-glow-box{animation:demoglowbox283 1.5s ease-in-out infinite;border-color:var(--gold-2)!important;border-radius:12px;box-shadow:none}
.demo-glow.demo-glow-box:not(.card){background-color:rgba(231,198,90,.08)}
@keyframes demoglowbox283{0%,100%{border-color:var(--gold-2)}50%{border-color:rgba(201,162,39,.45)}}
@media (prefers-reduced-motion:reduce){.demo-glow,.demo-glow.demo-glow-box{animation:none}}
.demo-result .actions{margin-top:14px}
/* v283: 商品ページ「あなたの入札」（本人にだけ表示） */
.my-bid-status{margin:10px 0 4px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface-2,#FFFCF4);font-size:.86rem;line-height:1.6}
.my-bid-status.is-top{border-color:rgba(31,143,95,.35);background:var(--success-soft)}
.my-bid-status.is-top .my-bid-head{color:var(--success)}
.my-bid-status.is-outbid{border-color:rgba(214,50,43,.35);background:var(--danger-soft)}
.my-bid-status.is-outbid .my-bid-head{color:var(--danger)}
.my-bid-head{font-size:.95rem}
.my-bid-amount{margin-top:2px}
.my-bid-amount strong{font-size:1.02rem}
.my-bid-sub{color:var(--muted);font-size:.78rem;margin-left:2px}
.my-bid-note{margin-top:4px;color:var(--text-2);font-size:.78rem}
.my-bid-status.is-pop{animation:myBidPop .5s ease}
@keyframes myBidPop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.bid-you{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--primary-3-soft);color:var(--primary-3);font-size:.7rem;font-weight:800;vertical-align:middle;white-space:nowrap}
/* v283: デモの入札フォームは内側に余白を取ったため、クイック入札ボタンの文字（+10,000円）が切れないよう2列に */
#demo-bid-form .quick-bids{grid-template-columns:repeat(2,1fr)}

/* ===== v284: 運営設定「📮 メールが届かないときの診断」 ===== */
.mail-diag{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border)}
.mail-diag-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mail-diag-head h3{margin:0;font-size:1rem}
.mail-diag-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.mail-diag-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface)}
.mail-diag-item .small{margin-top:3px;line-height:1.7;overflow-wrap:anywhere}
.mail-diag-mark{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:900}
.mail-diag-item.is-ok .mail-diag-mark{background:var(--success-soft);color:var(--success)}
.mail-diag-item.is-warn{border-color:rgba(201,130,27,.35)}
.mail-diag-item.is-warn .mail-diag-mark{background:var(--warning-soft);color:var(--warning)}
.mail-diag-item.is-ng{border-color:rgba(214,50,43,.4);background:var(--danger-soft)}
.mail-diag-item.is-ng .mail-diag-mark{background:var(--danger);color:#fff}
.mail-diag-log{margin-top:10px}
.mail-smtp-howto{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--wash-2,#FEF6E2);line-height:1.8}

/* ===== v286: お問い合わせへの AI 自動回答 ===== */
.badge-ai{background:rgba(76,110,245,.12);color:#3b5bdb;border-color:rgba(76,110,245,.3)}
.contact-ai-box{margin-top:14px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface-2,#FFFCF4)}
.contact-ai-box.is-sent{border-color:rgba(76,110,245,.35);background:rgba(76,110,245,.05)}
.contact-ai-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.contact-ai-note{margin:6px 0;color:var(--text-2)}
.contact-ai-sent{margin-top:6px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:.9rem;line-height:1.8;overflow-wrap:anywhere}
.contact-ai-form{margin-top:8px}
.contact-ai-settings{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border)}
.contact-ai-settings h3{margin:0 0 6px;font-size:1rem}
.contact-ai-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 12px}
.contact-ai-knowledge{white-space:pre-wrap;font-size:.74rem;line-height:1.6;max-height:320px;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px;margin:6px 0 0}
.contact-ai-try{margin-top:14px}
.contact-ai-result{margin-top:10px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--border)}
.contact-ai-result.is-send{border-color:rgba(31,143,95,.4);background:var(--success-soft)}
.contact-ai-result.is-hold{border-color:rgba(201,130,27,.35);background:var(--warning-soft)}

/* ===== v287: 入札ボタン・終了時刻・残り時間を1つの画面で ===== */
/* 商品詳細：入札額の欄と「入札する」を1行に */
.bid-main-row{display:flex;gap:8px;align-items:flex-end;scroll-margin-top:calc(var(--topbar-h,56px) + 90px)}
.bid-main-row .bid-amount-field{flex:1 1 auto;min-width:0;margin:0}
.bid-main-row .bid-amount-field input{min-height:48px}
.bid-main-row .bid-main-btn{flex:0 0 auto;min-height:48px;padding:10px 18px;font-size:1rem;font-weight:800;white-space:nowrap}
.bid-main-row + .quick-bids{margin-top:8px}
.auction-bid-card .my-bid-status{margin-top:12px}
/* スマホの固定入札バー：上の行に残り時間・終了時刻 */
@media (max-width:640px){
  .sp-bid-bar{flex-wrap:wrap;row-gap:6px}
  .sp-bid-time{flex:1 0 100%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.76rem;color:var(--text-2);line-height:1.2}
  .sp-bid-left strong{font-family:var(--font-num);font-size:.92rem;color:var(--onyx,#221F2A);letter-spacing:.02em}
  .sp-bid-left.is-final strong{color:var(--danger)}
  .sp-bid-end{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
  body.has-sp-bid-bar .container{padding-bottom:calc(var(--mobile-nav-h) + 120px + env(safe-area-inset-bottom))}
}
@media (min-width:641px){.sp-bid-time{display:none}}
/* 商品一覧：カード下の「入札バー」（残り時間・終了時刻・入札する） */
.auction-card.has-bid-bar .auction-card-body{display:flex;flex-direction:column}
.auction-card.has-bid-bar .auction-thumb .auction-timer,
.auction-card.has-bid-bar .auction-body-timer{display:none !important}  /* 残り時間はバーにまとめる */
.card-bid-bar{margin-top:auto;padding-top:8px;border-top:1px dashed var(--border);display:flex;align-items:center;gap:8px}
.card-bid-times{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.3}
.card-bid-left{display:flex;align-items:center;gap:3px;font-weight:800;font-size:.84rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-bid-left-text{font-family:var(--font-num);letter-spacing:.02em}
.card-bid-left.is-soon{color:#c97a1a}
.card-bid-left.is-urgent{color:#c0271f}
.card-bid-left.is-ended{color:var(--muted)}
.card-bid-end{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-bid-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 14px;border-radius:999px;font-size:.84rem;font-weight:800;white-space:nowrap;
  background:linear-gradient(135deg,#4f8ef7,#2f5fd0);color:#fff;box-shadow:0 4px 10px rgba(47,95,208,.25);cursor:pointer}
.card-bid-btn:hover{filter:brightness(1.06)}
.card-bid-btn.is-own,.card-bid-btn.is-disabled{background:var(--bg-subtle);color:var(--muted);box-shadow:none;cursor:default;font-weight:700}
/* 列が多い（カードが小さい）ときは、縦に並べて小さく */
.auction-grid[data-cols="6"] .card-bid-bar,.auction-grid[data-cols="8"] .card-bid-bar,.auction-grid[data-cols="12"] .card-bid-bar{flex-direction:column;align-items:stretch;gap:5px;padding-top:6px}
.auction-grid[data-cols="6"] .card-bid-btn,.auction-grid[data-cols="8"] .card-bid-btn,.auction-grid[data-cols="12"] .card-bid-btn{min-height:30px;padding:4px 8px;font-size:.76rem}
.auction-grid[data-cols="8"] .card-bid-left{font-size:.72rem}
.auction-grid[data-cols="8"] .card-bid-end{font-size:.64rem}
.auction-grid[data-cols="12"] .card-bid-left{font-size:.62rem}
.auction-grid[data-cols="12"] .card-bid-end{font-size:.56rem}
.auction-grid[data-cols="12"] .cbb-end-date,.auction-grid[data-cols="12"] .cbb-end-suffix{display:none}
.auction-grid[data-cols="12"] .card-bid-btn{min-height:24px;font-size:.62rem;padding:2px 4px}
@media (max-width:640px){
  .card-bid-bar{gap:6px;padding-top:6px}
  .card-bid-left{font-size:.78rem}
  .card-bid-end{font-size:.68rem}
  .card-bid-btn{min-height:32px;padding:5px 10px;font-size:.78rem}
  .auction-grid[data-cols="2"] .card-bid-bar,.auction-grid[data-cols="3"] .card-bid-bar,.auction-grid[data-cols="4"] .card-bid-bar,.auction-grid:not([data-cols]) .card-bid-bar{flex-direction:column;align-items:stretch;gap:4px}
  .auction-grid[data-cols="3"] .card-bid-left,.auction-grid[data-cols="4"] .card-bid-left{font-size:.64rem}
  .auction-grid[data-cols="3"] .card-bid-end,.auction-grid[data-cols="4"] .card-bid-end{font-size:.56rem}
  .auction-grid[data-cols="3"] .cbb-end-suffix,.auction-grid[data-cols="4"] .cbb-end-suffix,.auction-grid[data-cols="4"] .cbb-end-date{display:none}
  .auction-grid[data-cols="3"] .card-bid-btn,.auction-grid[data-cols="4"] .card-bid-btn{min-height:26px;padding:3px 4px;font-size:.64rem}
}

/* ===== v291: 入札中一覧の残り時間・終了日時／入札時の画面ズレ防止／お問い合わせのお断り文言／スマホのカタログの商品名 ===== */
/* ① 入札中一覧：残り時間・終了日時（PC・スマホ） */
.history-times{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;font-size:.84rem;line-height:1.4;color:var(--text-2)}
.history-times .history-left,.history-times .history-end{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;min-width:0}
.history-times .history-left{font-weight:800}
.history-times .history-left-text,.history-times .history-end-text{font-family:var(--font-num);letter-spacing:.02em}
.history-times .history-end{color:var(--muted)}
.history-times .ht-label{font-size:.74rem;font-weight:600;color:var(--muted)}
.history-times.is-soon .history-left{color:#c97a1a}
.history-times.is-urgent .history-left{color:#c0271f}
.history-times.is-ended .history-left{color:var(--muted)}
.history-row.is-time-up .history-inline-bid{opacity:.55}
@media (max-width:640px){
  .history-times{flex-wrap:nowrap;gap:8px;font-size:.72rem;line-height:1.45}
  .history-times .ht-label{display:none}
  .history-times .history-left{flex:0 0 auto}
  .history-times .history-end{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
}
/* ② 入札結果のバナー：本文に差し込まず画面上部に重ねて固定（表示・消去で画面がズレない） */
.bid-success-banner.is-floating{
  position:fixed;z-index:1200;left:12px;right:12px;top:calc(var(--topbar-h) + 10px);
  max-width:720px;margin:0 auto;cursor:pointer;
}
.bid-success-banner.is-floating .bid-success-ic{flex:0 0 26px}
.bid-success-banner.is-floating .bid-success-text{min-width:0;line-height:1.5}
@media (max-width:640px){
  .bid-success-banner.is-floating{left:8px;right:8px;top:calc(var(--topbar-h) + 6px);padding:10px 12px;font-size:.86rem;border-radius:12px}
}
/* ② 一覧からのその場入札：メッセージ欄の高さを先に確保して、「入札中…」などの表示で行が伸び縮みしない */
.history-inline-bid .livebid-msg{min-height:1.5em;line-height:1.5}
/* ③ お問い合わせ：お断りの文言 */
.contact-refuse{margin:0 0 12px;padding:10px 14px;border:1.5px solid rgba(214,50,43,.35);border-radius:var(--radius-sm,8px);background:var(--danger-soft,#FDECEA)}
.contact-refuse-head{margin:0 0 4px;font-weight:800;color:var(--danger,#D6322B)}
.contact-refuse ul{margin:0 0 4px;padding-left:1.3em;font-size:.86rem;line-height:1.7}
.contact-refuse p.small{margin:4px 0 0;line-height:1.7}
.contact-refuse-mini{margin:-6px 0 12px;color:var(--danger,#D6322B)}
/* ④ スマホのカタログ（3・4列）：v287 の入札バーで本文が縦並び（column）＋折り返し（wrap）になり、
      商品名（1行省略・nowrap）が横にはみ出して見えなくなっていた（1文字だけ右端に出る）。縦1列・折り返しなしに固定する。 */
@media (max-width:640px){
  .auction-grid[data-cols="3"] .auction-card.has-bid-bar .auction-card-body,
  .auction-grid[data-cols="4"] .auction-card.has-bid-bar .auction-card-body{
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;
  }
  .auction-grid[data-cols="3"] .auction-card.has-bid-bar .auction-title,
  .auction-grid[data-cols="4"] .auction-card.has-bid-bar .auction-title{
    flex:0 0 auto;width:100%;max-width:100%;min-width:0;
  }
  .auction-grid[data-cols="3"] .auction-card.has-bid-bar .auction-price-row,
  .auction-grid[data-cols="4"] .auction-card.has-bid-bar .auction-price-row{flex:0 0 auto}
  /* 並び：商品名 → 現在価格 → 入札バー（残り時間・終了時刻・入札する）はカードの下端 */
  .auction-grid[data-cols="3"] .auction-card.has-bid-bar .card-bid-bar,
  .auction-grid[data-cols="4"] .auction-card.has-bid-bar .card-bid-bar{order:3}
}

/* ===== v292: 担当者ログインの管理 — 「ログイン中」の表示 ===== */
.staff-presence{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.staff-presence:empty{display:none}
.staff-online-badge{display:inline-flex;align-items:center;gap:5px;background:var(--success-soft,#E6F4EC);color:var(--success,#1F8F5F);border:1px solid rgba(31,143,95,.35);font-weight:800}
.staff-online-dot{width:8px;height:8px;border-radius:50%;background:var(--success,#1F8F5F);box-shadow:0 0 0 0 rgba(31,143,95,.5);animation:staff-online-pulse 1.8s ease-out infinite}
@keyframes staff-online-pulse{0%{box-shadow:0 0 0 0 rgba(31,143,95,.5)}70%{box-shadow:0 0 0 6px rgba(31,143,95,0)}100%{box-shadow:0 0 0 0 rgba(31,143,95,0)}}
@media (prefers-reduced-motion:reduce){.staff-online-dot{animation:none}}
.staff-seen{white-space:nowrap}
.staff-online-count{margin-left:10px;font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap}
.staff-online-count.has-online{color:var(--success,#1F8F5F)}
.staff-row.is-online{border-color:rgba(31,143,95,.55)}

/* ===== v293 新規オープンの準備（出品・入札・落札・お問い合わせ・通知の削除） ===== */
.lr-status{border-left:4px solid var(--crimson)}
.lr-status.is-open{border-left-color:var(--muted)}
.lr-state{font-size:1.15rem;font-weight:700;margin-top:2px}
.lr-status.is-ready .lr-state{color:var(--crimson)}
.lr-lock{margin:8px 0 0;color:var(--crimson);font-weight:600}
.lr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
.lr-grid>.card{min-width:0;box-sizing:border-box}
@media (max-width:860px){.lr-grid{grid-template-columns:1fr}}
.lr-grid>.card{margin:0}
.table.lr-table{width:100%;min-width:0;table-layout:fixed}
.lr-table td,.lr-table th{white-space:normal;overflow-wrap:anywhere}
.lr-table th.num,.lr-table td.num{width:6.5em}
.lr-table .lr-actions{width:12em}
.lr-table td,.lr-table th{vertical-align:top}
.lr-table .num{text-align:right;white-space:nowrap}
.lr-table tr.is-empty td{color:var(--muted)}
.lr-table tr.has-data td:last-child{font-weight:700}
.lr-total{margin:10px 0 8px;padding:8px 10px;border-radius:8px;background:var(--danger-soft,#fbecec);font-size:.95rem}
.lr-table td .small{overflow-wrap:anywhere}
.lr-money{border-left:4px solid #C98A00;background:linear-gradient(90deg,rgba(201,138,0,.08),transparent 60%),var(--surface)}
.lr-money ul{margin:0 0 8px;padding-left:1.2em}
.lr-money li{margin:4px 0}
.lr-run{border:2px solid var(--crimson)}
.lr-run.is-locked{opacity:.7}
.lr-check{display:flex;gap:8px;align-items:flex-start;margin:6px 0;overflow-wrap:anywhere}
.lr-check input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.lr-check{font-weight:600;margin:0 0 12px}
.lr-fields{margin-bottom:6px}
#lr-submit{margin-top:6px}
.lr-actions{white-space:nowrap;text-align:right}
.lr-result{border-left:4px solid var(--success,#1F8F5F)}
@media (max-width:720px){
  .table.lr-table{display:table;border-collapse:collapse;border-spacing:0}
  .table.lr-table thead{display:table-header-group}
  .table.lr-table tbody{display:table-row-group}
  .table.lr-table tr{display:table-row;background:none;border:none;border-radius:0;padding:0}
  .table.lr-table td,.table.lr-table th{display:table-cell;text-align:left;padding:7px 4px;font-size:.85rem;border-bottom:1px solid var(--line)}
  .table.lr-table td::before{content:none}
  .table.lr-table .num{text-align:right;width:5.2em}
  .table.lr-table .lr-actions{width:auto;white-space:normal}
  .lr-actions .btn{margin:2px 0}
}

/* ===== v294 ログイン・新規登録の右側パネル（ウェブオクの紹介・漆黒×金の細枠・明朝の見出し） ===== */
.auth-visual.auth-brand{
  --ab-ink:#14111A; --ab-lacquer:#221B26; --ab-gold:#E7C65A; --ab-gold-deep:#C9A227; --ab-champagne:#FBEFB6; --ab-text:rgba(255,251,240,.84);
  background:
    radial-gradient(120% 70% at 100% 0%,rgba(231,198,90,.20),transparent 55%),
    radial-gradient(90% 60% at 0% 100%,rgba(168,128,28,.16),transparent 60%),
    linear-gradient(170deg,var(--ab-lacquer),var(--ab-ink) 70%);
  padding:14px;border-radius:var(--radius);color:var(--ab-text);
  box-shadow:0 18px 40px -22px rgba(20,17,26,.55);
}
.auth-brand-frame{
  position:relative;height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;gap:18px;
  padding:26px 26px 22px;border-radius:calc(var(--radius) - 6px);
  border:1px solid rgba(231,198,90,.38);
  box-shadow:inset 0 0 0 4px rgba(20,17,26,.6),inset 0 0 0 5px rgba(231,198,90,.14);
}
.auth-brand-mark{display:flex;align-items:center;gap:12px}
.auth-visual.auth-brand .auth-brand-mark img{width:56px;height:56px;max-width:none;margin:0;border-radius:14px;box-shadow:0 6px 18px -6px rgba(231,198,90,.45)}
.auth-brand-name{display:flex;flex-direction:column;font-weight:900;font-size:1.05rem;letter-spacing:.06em;color:var(--ab-champagne);line-height:1.3}
.auth-brand-name small{font-weight:500;font-size:.74rem;letter-spacing:.04em;color:rgba(251,239,182,.62)}
.auth-visual.auth-brand .auth-brand-title{
  margin:6px 0 0;font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  font-weight:700;font-size:clamp(1.7rem,2.6vw,2.35rem);line-height:1.38;letter-spacing:.04em;
  background:linear-gradient(180deg,#FFF6D2 0%,#F1D57A 45%,#C9A227 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance;
}
.auth-brand-title span{display:block}
.auth-visual.auth-brand .auth-brand-lead{margin:0;font-size:.95rem;line-height:1.85;color:var(--ab-text);max-width:30em}
.auth-brand-points{margin:4px 0 0;display:grid;gap:14px}
.auth-brand-points>div{padding-left:14px;border-left:2px solid rgba(231,198,90,.55)}
.auth-brand-points dt{font-weight:700;color:var(--ab-champagne);font-size:.95rem;line-height:1.5}
.auth-brand-points dd{margin:3px 0 0;font-size:.84rem;line-height:1.7;color:rgba(255,251,240,.7)}
.auth-brand-live{
  margin:auto 0 0;padding-top:16px;border-top:1px solid rgba(231,198,90,.22);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.88rem;color:var(--ab-text)
}
.auth-brand-live b{font-family:var(--font-num);font-size:1.15rem;color:var(--ab-champagne);font-weight:600;letter-spacing:.02em}
.auth-brand-live-dot{width:8px;height:8px;border-radius:50%;background:#E5483F;box-shadow:0 0 0 0 rgba(229,72,63,.6);animation:abLive 2s ease-out infinite}
@keyframes abLive{0%{box-shadow:0 0 0 0 rgba(229,72,63,.55)}70%{box-shadow:0 0 0 8px rgba(229,72,63,0)}100%{box-shadow:0 0 0 0 rgba(229,72,63,0)}}
.auth-brand-live a{margin-left:auto;color:var(--ab-gold);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(231,198,90,.45);padding-bottom:1px}
.auth-brand-live a:hover{color:var(--ab-champagne);border-bottom-color:var(--ab-champagne)}
.auth-brand-live a:focus-visible{outline:2px solid var(--ab-gold);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.auth-brand-live-dot{animation:none}}
@media (max-width:1100px){.auth-brand-frame{padding:22px 20px 18px}}

/* ===== v295 出品写真：縮小・回転・拡大表示／発送サイズ・重量の選択ボタン ===== */
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.pm-grid:not(.has-items){display:none}
.pm-item.pm-has-controls{width:auto;height:auto;touch-action:manipulation}
.pm-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#efece4}
button.pm-view{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:zoom-in;transform:none}
button.pm-view:hover{background:transparent;box-shadow:none}
button.pm-view:focus-visible{outline:3px solid var(--gold-3);outline-offset:-3px}
.pm-item.pm-has-controls .pm-thumb{width:100%;height:100%;object-fit:cover}
.pm-item.pm-has-controls .pm-main-tag{top:auto;bottom:6px;left:6px;right:auto;font-size:.68rem;padding:2px 7px;pointer-events:none}
.pm-media .pm-badge{top:6px;left:6px;pointer-events:none}
button.pm-remove{top:5px;right:5px;width:28px;height:28px;min-height:0;min-width:0;padding:0;border-radius:50%;background:rgba(200,30,30,.92);color:#fff;font-size:.82rem;box-shadow:0 1px 4px rgba(0,0,0,.25)}
button.pm-remove:hover{background:#b01818}
button.pm-rotate{position:absolute;right:6px;bottom:6px;z-index:3;width:34px;height:34px;min-height:0;padding:0;border-radius:50%;background:rgba(255,255,255,.94);color:#3a2c08;font-size:1.15rem;font-weight:700;line-height:1;box-shadow:0 1px 5px rgba(0,0,0,.28);border:1px solid rgba(201,162,39,.55)}
button.pm-rotate:hover{background:#fff8e1}
.pm-controls button.pm-move{min-height:34px;border-radius:6px;padding:0;background:#fff;color:var(--text,#222);box-shadow:none}
.pm-progress{grid-column:1/-1;font-size:.86rem;font-weight:700;color:var(--primary-3);display:flex;align-items:center;gap:8px;padding:6px 2px}
.pm-progress::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--gold-line);border-top-color:var(--gold-3);animation:pmSpin .8s linear infinite}
@keyframes pmSpin{to{transform:rotate(360deg)}}

/* 拡大表示 */
.pm-lightbox{position:fixed;inset:0;z-index:10050;background:#0e0c08;display:flex;flex-direction:column;color:#fff;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.pm-lightbox[hidden]{display:none}
.pm-lb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.pm-lb-count{font-weight:700;font-size:1rem;font-family:var(--font-num,inherit)}
.pm-lightbox button.pm-lb-btn{min-height:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none;font-size:.92rem;font-weight:700}
.pm-lightbox button.pm-lb-btn:hover{background:rgba(255,255,255,.24)}
.pm-lightbox button.pm-lb-btn:disabled{opacity:.3}
.pm-lightbox button.pm-lb-btn[hidden]{display:none}
.pm-lb-stage{position:relative;flex:1 1 auto;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.pm-lb-img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.pm-lightbox.is-zoomed .pm-lb-stage{display:block}
.pm-lightbox.is-zoomed .pm-lb-img{max-width:none;max-height:none;width:250%;cursor:zoom-out}
@media (min-width:900px){.pm-lightbox.is-zoomed .pm-lb-img{width:auto;min-width:160%}}
.pm-lb-busy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);padding:8px 14px;border-radius:999px;font-weight:700;font-size:.9rem}
.pm-lb-busy[hidden]{display:none}
.pm-lb-bar{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px 12px 4px}
.pm-lb-hint{margin:0;padding:4px 14px 12px;font-size:.78rem;color:rgba(255,255,255,.7);text-align:center}

/* 編集画面の保存済み画像：タップで拡大・回転 */
.image-manage-item img.js-zoomable{cursor:zoom-in}
.img-rotate-btn{font-size:1rem}

/* 発送サイズ・重量：選択ボタン（直接入力も可） */
.ship-grid .field.ship-pick{grid-column:1/-1}
.ship-pick>label{font-size:.86rem;font-weight:600;color:var(--text-2)}
.ship-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin:2px 0 6px}
.ship-chips button.ship-chip{min-height:44px;padding:3px 4px;border-radius:10px;background:#fff;color:var(--text,#222);border:1.5px solid var(--border,#e2dccb);box-shadow:none;font-size:.86rem;font-weight:700;line-height:1.2;flex-direction:column;gap:1px;letter-spacing:0;transform:none;white-space:normal;text-align:center}
.ship-chips button.ship-chip small{font-size:.64rem;font-weight:500;color:var(--muted)}
.ship-chips button.ship-chip:hover{background:#fffaf0;border-color:var(--gold-3)}
.ship-chips button.ship-chip[aria-pressed="true"]{background:var(--gold-1,#FBEFB6);border-color:var(--gold-4,#A8801C);color:#3a2c08;box-shadow:inset 0 0 0 1px var(--gold-4,#A8801C)}
.ship-chips button.ship-chip[aria-pressed="true"] small{color:#5b4a1a}
.ship-chips button.ship-chip-wide{grid-column:span 2}
@media (min-width:700px){.ship-chips button.ship-chip-wide{grid-column:span 3}}
.ship-pick input{max-width:100%}
.ship-pick .ship-pick-note{font-size:.76rem;color:var(--muted)}

/* ===== v296 スマホのログイン画面：ログインボタンを最初の画面に・下部ナビやAIナビと重ねない ===== */
.login-field{margin-bottom:14px}
.login-field>label{display:block}
.login-actions{margin-top:18px}
.login-reauth{margin-top:18px}
.login-register-sub{font-size:.78em;font-weight:600;margin-left:2px}
details.login-staff-hint{margin:6px 0 0}
details.login-staff-hint>summary{cursor:pointer;color:var(--primary-3);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:4px;min-height:28px}
details.login-staff-hint>summary::-webkit-details-marker{display:none}
details.login-staff-hint>summary::before{content:"▸";font-size:.85em;transition:transform .15s}
details.login-staff-hint[open]>summary::before{transform:rotate(90deg)}
details.login-staff-hint>p{margin:4px 0 0;line-height:1.6}
.login-status-line{margin:0 0 12px;padding:8px 10px;border:1px solid var(--gold-line);border-radius:10px;background:#fff8e1;font-size:.84rem;line-height:1.55;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.login-status-line a{font-weight:700;white-space:nowrap;margin-left:4px}
.login-status-line .maintenance-auth-pill{font-size:.74rem;padding:2px 8px}
.login-return-note{margin:14px 0 0}
.login-card .maintenance-auth-note{margin:18px 0 0}
@keyframes loginPulse{0%{box-shadow:0 0 0 0 rgba(201,162,39,.65)}100%{box-shadow:0 0 0 14px rgba(201,162,39,0)}}
.login-submit.is-pulse{animation:loginPulse .9s ease-out 2}
@media (max-width:640px){
  .login-card{padding:18px 16px}
  .login-card .page-head{margin-bottom:8px}
  .login-card .login-lead{display:none}
  .login-card .page-head h2{font-size:1.3rem;margin:0}
  .login-card .maintenance-login-note{padding:7px 10px;font-size:.8rem;line-height:1.5;margin-bottom:10px}
  .login-status-line{font-size:.8rem;padding:6px 8px;margin-bottom:10px}
  .login-field{margin-bottom:10px}
  .login-field>label{margin-bottom:4px}
  .login-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
  .login-actions .login-submit{width:100%;min-height:54px;font-size:1.08rem;letter-spacing:.12em}
  .login-actions .login-register{width:100%;min-height:46px}
}
/* AIナビ（右下の丸いボタン）がログイン・新規登録のボタンに重ならないよう、スマホのログイン・新規登録画面では出さない */
@media (max-width:920px){
  body[data-page^="public/login.php"] #kashari-bot,
  body[data-page^="public/register.php"] #kashari-bot{display:none}
}

/* ===== v297 出品画面：状態・配送業者の選択／写真の説明の表示切り替え／拡大の目印／待機中のアニメーション ===== */
/* 写真の説明文の表示／隠す */
.ai-upload-title{flex:1 1 auto;min-width:0}
.ai-upload-title>strong{margin-right:8px}
button.photo-help-toggle{min-height:30px;padding:2px 12px;border-radius:999px;background:#fff;color:var(--primary-3);border:1px solid var(--gold-line);box-shadow:none;font-size:.78rem;font-weight:700;vertical-align:middle;transform:none}
button.photo-help-toggle:hover{background:#fff8e1}
.photo-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.photo-card-head .section-title{margin-bottom:0}
.is-photo-help-hidden .js-photo-help{display:none !important}
.is-photo-help-hidden .ai-drop{padding-top:12px;padding-bottom:12px}
/* 写真の拡大の目印（🔍）。メインの表示は番号の右へ */
.pm-zoom-tag{position:absolute;left:6px;bottom:6px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:.85rem;box-shadow:0 1px 4px rgba(0,0,0,.2);pointer-events:none}
.pm-item.pm-has-controls .pm-main-tag{top:7px;left:34px;bottom:auto;right:auto}
/* 商品ページの画像：タップで拡大 */
.auction-gallery-main{position:relative}
.auction-gallery-main img.is-zoomable{cursor:zoom-in}
.gallery-zoom-hint{position:absolute;right:8px;bottom:8px;padding:3px 10px;border-radius:999px;background:rgba(20,18,24,.62);color:#fff;font-size:.74rem;font-weight:700;pointer-events:none}
/* 商品の状態の選択ボタン（発送サイズと同じ見た目） */
.cond-pick>label{font-size:.86rem;font-weight:600;color:var(--text-2)}
.cond-chips{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.cond-chips button.ship-chip-wide{grid-column:auto}
@media (max-width:420px){.cond-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ship-carrier-chips{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.ship-carrier-chips button.ship-chip-wide{grid-column:span 2}
@media (max-width:420px){.ship-carrier-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 待機中のアニメーション（金のハンマー＋回る輪＋流れる進行バー＋％） */
.wa-processing-anim{position:relative;width:64px;height:64px;margin:0 auto}
.wa-processing-anim .wa-processing-spinner{position:absolute;inset:0;width:64px;height:64px;border-width:4px;border-color:rgba(201,162,39,.18);border-top-color:var(--gold-3,#C9A227);border-right-color:var(--gold-2,#E7C65A)}
.wa-processing-icon{position:absolute;left:10px;top:10px;width:44px;height:44px;border-radius:11px;transform-origin:70% 80%;animation:waHammer 1.1s ease-in-out infinite}
@keyframes waHammer{0%,100%{transform:rotate(0)}35%{transform:rotate(-16deg)}55%{transform:rotate(6deg)}70%{transform:rotate(0)}}
.wa-processing-bar{position:relative;height:8px;margin:2px auto 6px;max-width:260px;border-radius:999px;background:rgba(201,162,39,.16);overflow:hidden}
.wa-processing-bar>span{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--gold-grad,linear-gradient(90deg,#E7C65A,#C9A227));transition:width .25s ease}
.wa-processing-bar.is-indeterminate>span{width:38%;animation:waBar 1.3s ease-in-out infinite}
@keyframes waBar{0%{left:-40%}100%{left:100%}}
.wa-processing-pct{margin:0 0 6px;font-family:var(--font-num,inherit);font-weight:700;font-size:1.05rem;color:var(--primary-3)}
.wa-processing-pct[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.wa-processing-icon{animation:none}.wa-processing-bar.is-indeterminate>span{animation-duration:3s}}
.ai-upload-title>strong{display:block;margin-right:0}
.ai-upload-title>button.photo-help-toggle{margin:4px 0 2px}

/* ===== v298 登録情報の変更（法人／個人）・携帯電話番号の案内・商品の状態（選択式） ===== */
.cond-pick-label{font-size:.86rem;font-weight:600;color:var(--text-2)}
.cond-chips button.cond-chip{min-height:48px}
.cond-chips button.cond-chip small{display:block;font-size:.66rem;font-weight:700;color:var(--muted);letter-spacing:.08em}
.cond-chips button.cond-chip[aria-pressed="true"] small{color:#5b4a1a}
.cond-moved-note{display:block;margin:2px 0 4px;padding:6px 10px;border-radius:8px;background:#fff8e1;border:1px solid var(--gold-line);color:#5b4a1a;font-weight:600}
.profile-kind-badge{background:var(--gold-1,#FBEFB6);color:#5b4a1a;border:1px solid var(--gold-line);font-weight:700}
.mobile-phone-warn{line-height:1.7}
.mobile-phone-warn a{font-weight:700;white-space:nowrap}
.mobile-phone-field.is-warn input{border-color:var(--danger,#d6322b);box-shadow:0 0 0 3px rgba(214,50,43,.12)}
.mobile-phone-note{margin:4px 0 0}
.mobile-phone-live{margin:4px 0 0;font-weight:700}
.mobile-phone-live.is-ok{color:#1d7d44}
.mobile-phone-live.is-ng{color:var(--danger,#d6322b)}
.connect-mobile-warn{line-height:1.7}
#f-mobile-phone,#mobile-phone-warn{scroll-margin-top:110px}

/* v301: 途中まで保存した下書き（出品までに未入力の項目） */
.draft-missing{margin-top:4px;color:#9a5b00;font-weight:600;}
.draft-missing-box strong{margin-right:4px;}

/* =====================================================================
 * v303: 管理画面「アクセス分析」
 *   グラフは1色（金茶）の濃淡だけで量を表す。値は必ず文字でも表示し、ポイント／タップで詳細を出す。
 * ===================================================================== */
:root{--an-bar:#9A7B1A;--an-track:#F3EBD6;--an-heat-0:#FAF7EF;}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.an-filter{padding:12px 14px;margin:0 0 12px}
.an-range{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.an-chip{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);font-size:.84rem;line-height:1.3;text-decoration:none;white-space:nowrap}
.an-chip:hover{background:var(--bg-subtle);text-decoration:none}
.an-chip.is-active{background:var(--primary-3-soft);border-color:rgba(201,162,39,.45);color:var(--primary-3);font-weight:700}
.an-filter-row{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end}
.an-field{display:flex;flex-direction:column;gap:3px;font-size:.84rem;color:var(--text-2)}
.an-field > span{font-size:.76rem;color:var(--muted)}
.an-field input[type=date],.an-field select{padding:5px 8px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;font-size:.88rem;max-width:100%}
.an-field:first-child{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 6px;flex:0 1 360px}
.an-field input[type=date]{width:auto;min-width:0;flex:0 1 150px}
.an-field select{width:auto;min-width:7em}
.an-field:first-child > span{width:100%}
.an-period{margin:8px 0 0}
.an-badge{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--warning-soft);color:#7a4d0c;font-size:.76rem}
.an-tabs{display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 14px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.an-tabs a{flex:0 0 auto;padding:8px 12px;font-size:.88rem;color:var(--text-2);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.an-tabs a:hover{color:var(--text);text-decoration:none}
.an-tabs a.is-active{color:var(--primary-3);border-bottom-color:var(--an-bar);font-weight:700}
.an-kpis .stat-card{padding:12px 14px}
.an-kpis .stat-label{font-size:.8rem;color:var(--muted)}
.an-kpis .stat-num{font-family:var(--font-num);font-size:1.55rem;line-height:1.25;color:var(--text)}
.an-kpi-sub{margin-top:2px}
.an-delta{display:inline-block;font-size:.78rem;font-weight:700;margin-top:2px}
.an-delta.is-good{color:var(--success)}
.an-delta.is-bad{color:var(--danger)}
.an-delta.is-flat{color:var(--muted);font-weight:500}
.an-note{margin:6px 2px 14px}
.an-more{float:right;font-size:.8rem;font-weight:500}
.an-table{overflow-x:auto}
.an-table .data-table th,.an-table .data-table td{white-space:nowrap}
.an-table .data-table td:first-child{white-space:normal;min-width:11em}
.an-table-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;border-top:1px solid var(--line)}
.an-table-foot .btn{margin-left:auto}
.card > .an-table-foot{border-top:0;padding:6px 0 0}
/* 横棒 */
.an-hbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.an-hbars li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "t t";gap:3px 10px;align-items:baseline}
.an-hbar-label{grid-area:l;font-size:.86rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-hbar-val{grid-area:v;font-size:.86rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.an-hbar-val small{margin-left:6px;font-weight:500;color:var(--muted);font-size:.76rem}
.an-hbar-track{grid-area:t;display:block;height:8px;border-radius:4px;background:var(--an-track);overflow:hidden}
.an-hbar-track > span{display:block;height:100%;background:var(--an-bar);border-radius:4px}
@media (min-width:1100px){
  .an-hbars li{grid-template-columns:minmax(0,40%) minmax(0,1fr) auto;grid-template-areas:"l t v";align-items:center}
}
/* 縦棒（推移） */
.an-chart-card{padding:14px 14px 10px}
.an-cols{position:relative;padding-top:16px}
.an-cols-max{position:absolute;top:0;left:0}
.an-cols-plot{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;align-items:end;height:170px;border-bottom:1px solid var(--line-strong);background:linear-gradient(to top,transparent calc(50% - .5px),var(--line) calc(50% - .5px),var(--line) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(to bottom,var(--line) 1px,transparent 1px)}
.an-col{position:relative;height:100%;display:flex;align-items:flex-end;cursor:default;outline:none}
.an-col-bar{display:block;width:100%;max-width:28px;margin:0 auto;min-height:1px;background:var(--an-bar);border-radius:4px 4px 0 0}
.an-col:hover .an-col-bar,.an-col:focus .an-col-bar{background:#6E500C}
.an-cols-x{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;margin-top:4px;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.an-cols-x span{white-space:nowrap;overflow:visible}
.an-details{margin-top:10px}
.an-details summary{cursor:pointer;font-size:.84rem;color:var(--primary-3)}
.an-details .an-table{margin-top:8px;max-height:360px;overflow:auto}
/* ポイント／タップで出す説明 */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:30;padding:6px 9px;border-radius:8px;background:var(--onyx);color:#fff;font-size:.76rem;line-height:1.4;white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-sm)}
.an-col:nth-child(-n+4)[data-tip]:hover::after,.an-col:nth-child(-n+4)[data-tip]:focus::after,.an-heat-cell:nth-child(-n+5)[data-tip]:hover::after,.an-heat-cell:nth-child(-n+5)[data-tip]:focus::after{left:0;transform:none}
.an-col:nth-last-child(-n+4)[data-tip]:hover::after,.an-col:nth-last-child(-n+4)[data-tip]:focus::after,.an-heat-cell:nth-last-child(-n+5)[data-tip]:hover::after,.an-heat-cell:nth-last-child(-n+5)[data-tip]:focus::after{left:auto;right:0;transform:none}
/* 曜日×時間帯 */
.an-heat-card{padding:14px;overflow-x:auto}
.an-heat{min-width:520px;display:flex;flex-direction:column;gap:2px;padding-top:34px}
.an-heat-row{display:grid;grid-template-columns:2.2em repeat(24,minmax(0,1fr));gap:2px;align-items:center}
.an-heat-head span{font-size:.7rem;color:var(--muted);text-align:left;font-variant-numeric:tabular-nums}
.an-heat-wd{font-size:.8rem;color:var(--text-2);text-align:center}
.an-heat-wd.is-weekend{font-weight:700}
.an-heat-cell{display:block;height:22px;border-radius:3px;outline:none}
.an-heat-cell:focus,.an-heat-cell:hover{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--onyx)}
.an-heat-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.an-heat-scale{display:inline-block;width:140px;height:10px;border-radius:3px;background:linear-gradient(90deg,rgb(251,243,218),rgb(212,182,108) 40%,rgb(110,80,12))}
.an-heat-legend .btn{margin-left:auto}
/* 導線 */
.an-funnel{padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.an-funnel-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.an-funnel-no{flex:0 0 auto;width:1.6em;height:1.6em;border-radius:50%;background:var(--primary-3-soft);color:var(--primary-3);font-size:.78rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.an-funnel-label{flex:1 1 auto;font-size:.9rem;font-weight:600}
.an-funnel-n{font-weight:700;font-variant-numeric:tabular-nums}
.an-funnel-track{height:12px;border-radius:4px}
.an-funnel-rate{margin-top:3px}
.an-compare{margin-top:4px;padding-top:12px;border-top:1px dashed var(--line-strong);display:flex;flex-direction:column;gap:8px}
.an-compare-title{font-weight:700;font-size:.9rem}
.an-compare-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l r" "t t";gap:3px 10px;align-items:baseline}
.an-compare-label{grid-area:l;font-size:.86rem}
.an-compare-label small{margin-left:6px}
.an-compare-row .an-hbar-track{grid-area:t}
.an-compare-rate{grid-area:r;font-variant-numeric:tabular-nums}
.an-subfilter{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.an-explain ul{margin:0;padding-left:1.2em;line-height:1.8}
@media (max-width:640px){
  .an-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .an-kpis .stat-num{font-size:1.3rem}
  .an-cols-plot{height:140px}
  .an-more{float:none;display:inline-block;margin-left:6px}
}

/* ===== v304: 未ログイン時の出品者欄（個人情報の代わりにログイン案内） ===== */
.seller-chip-guest{align-items:flex-start}
.seller-chip-guest .seller-avatar{background:var(--border,#ddd);color:var(--muted,#777)}
.seller-guest-note{margin:4px 0 8px;line-height:1.7}
.seller-guest-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.seller-guest-actions .btn{flex:0 0 auto}
@media (max-width:480px){.seller-guest-actions .btn{flex:1 1 140px;text-align:center}}

/* ===== v305: 出品マイページ「出品中」一覧：入札件数・ウォッチ件数を行の中に表示（「公開ページ」ボタンは廃止） ===== */
.listing-stats{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;white-space:nowrap}
.listing-stat{
  display:inline-flex;align-items:baseline;gap:2px;
  padding:2px 8px;border-radius:999px;line-height:1.5;
  font-size:.76rem;font-weight:600;white-space:nowrap;
  background:var(--bg-subtle);border:1px solid var(--border);color:var(--muted);
}
.listing-stat b{font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-2)}
/* 1件以上のときだけ色を付けて、一目で動きのある出品が分かるようにする */
.listing-stat-bid.is-on{background:var(--success-soft);border-color:rgba(31,143,95,.35);color:var(--success)}
.listing-stat-bid.is-on b{color:var(--success)}
.listing-stat-watch.is-on{background:var(--gold-1);border-color:var(--gold-line);color:var(--gold-4)}
.listing-stat-watch.is-on b{color:var(--gold-4)}
@media (max-width:640px){
  /* 1行：［入札 n件］［☆ウォッチ n］ 管理 取り下げ（無料）。行の高さは従来のまま */
  .listing-row-live .listing-row-actions{column-gap:4px}
  .listing-row-live .listing-stat{font-size:.68rem;padding:1px 6px}
  .listing-row-live .listing-stat b{font-size:.84rem}
  .listing-row-live .listing-row-actions .btn-text{padding-left:6px;padding-right:6px}
}
@media (max-width:380px){
  /* 幅の狭いスマホ（iPhone SE など）：「件」「ウォッチ」の文字を省き［入札 3］［☆ 5］にして1行に収める（読み上げは aria-label で「入札 3件」「ウォッチ 5件」） */
  .listing-row-live .listing-stat-unit,
  .listing-row-live .listing-stat-word{display:none}
  .listing-row-live .listing-stat{padding:1px 5px}
  .listing-row-live .listing-row-actions .btn-sm{padding-left:6px;padding-right:6px}
}

/* ===== v306: 早期終了・入札中の即決価格・管理者の代理ログイン ===== */
/* 早期終了 */
.early-end-card{border-left:4px solid var(--gold-3)}
.early-end-spec{margin:8px 0}
.early-end-note{margin:8px 0 10px;line-height:1.7}
.live-ended-early{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--gold-1);color:var(--gold-4);border:1px solid var(--gold-line);white-space:nowrap}
/* 入札中の即決価格 */
.buy-now-late{padding:12px 14px;border:1.5px solid var(--gold-line);border-radius:12px;background:var(--bg-subtle)}
.buy-now-late-title{margin:0 0 6px;font-size:1rem}
.buy-now-late-rules{margin:6px 0 10px;padding-left:1.2em;line-height:1.7}
.buy-now-late-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.buy-now-late-form .field{flex:1 1 180px;margin:0}
.buy-now-late-form .actions{margin:0}
/* 代理ログインの帯（全画面の上部・ヘッダーの下） */
.impersonation-bar{position:sticky;top:var(--topbar-h,56px);z-index:60;background:#7A1F1A;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.impersonation-bar-inner{max-width:1200px;margin:0 auto;padding:6px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.impersonation-bar-text{flex:1 1 260px;font-size:.84rem;line-height:1.5}
.impersonation-bar-form{margin:0;flex:0 0 auto}
.impersonation-bar-btn{background:#fff;color:#7A1F1A;border:1px solid #fff;font-weight:700;white-space:nowrap}
.impersonation-bar-btn:hover{background:#FBEFB6}
.impersonation-bar .ib-short{display:none}
@media (max-width:640px){
  /* スマホは1行（約36px）に収める：［🛡 運営の代理操作中：「会員名」］［終了して戻る］ */
  .impersonation-bar-inner{padding:4px 10px;gap:8px;flex-wrap:nowrap}
  .impersonation-bar .ib-long{display:none}
  .impersonation-bar .ib-short{display:inline}
  .impersonation-bar-text{flex:1 1 auto;min-width:0;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .impersonation-bar .impersonation-bar-form .impersonation-bar-btn{min-height:28px;height:28px;padding:2px 10px;font-size:.74rem;line-height:1.2}
}
/* 管理画面：代理ログイン */
.impersonate-card{border-left:4px solid #7A1F1A}
.impersonate-rules{margin:6px 0 10px;padding-left:1.2em;line-height:1.7}
.impersonate-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.impersonate-form .field{flex:1 1 260px;margin:0}
.impersonate-log{margin-top:10px}
/* 操作の記録：運営の代理操作 */
.activity-badge-proxy{background:#7A1F1A;color:#fff;border-color:#7A1F1A}

/* v311: 未払いの案内はスマホ・説明非表示でも省略せず表示する。 */
.stat-card-attention .stat-label{color:var(--danger);white-space:normal;line-height:1.4}
.deal-attention-intro{font-size:.85rem;line-height:1.6}
.deal-payment-attention{grid-column:1 / -1;flex:1 1 100%;width:100%;min-width:0;box-sizing:border-box;padding:10px 12px;margin-top:8px;border:1px solid rgba(180,65,40,.35);border-radius:10px;background:#fff8ef;color:#713a20;font-size:.82rem;line-height:1.65;white-space:normal;overflow-wrap:anywhere}
.deal-payment-attention p{margin:0 0 6px}
.deal-payment-attention p:last-child{margin-bottom:0}
.deal-payment-attention .btn{max-width:100%;white-space:normal}
@media(max-width:640px){.deal-payment-attention{font-size:.78rem;padding:9px 10px}.deal-payment-attention .btn{min-height:36px}}