/* 中古パソコン検索 v1.1.0 */
.upc-wrap { margin: 1.5em 0; font-size: 15px; line-height: 1.6; }
.upc-wrap * { box-sizing: border-box; }

/* ---- 絞り込みパネル ---- */
.upc-filter-panel { background: #f5f8fb; border: 1px solid #dce6ef; border-radius: 10px; padding: 16px; margin-bottom: 1em; }
.upc-filter-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.upc-filter-title { font-weight: 700; font-size: 1.05em; display: flex; align-items: center; gap: 8px; }
.upc-bar { display: inline-block; width: 5px; height: 20px; background: #2196f3; border-radius: 3px; }
.upc-btn-reset { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #789; border-radius: 8px; padding: 12px 22px; cursor: pointer; font-size: 1.05em; font-weight: 700; color: #345; box-shadow: 0 1px 3px rgba(30,60,100,.12); transition: all .12s; }
.upc-btn-reset::before { content: "↺"; font-size: 1.3em; line-height: 1; }
.upc-btn-reset:hover { background: #eef4fa; border-color: #2196f3; color: #1565c0; }
.upc-type-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.upc-type-btn { background: #fff; border: 2px solid #c3d3e2; border-radius: 999px; padding: 7px 20px; font-size: 0.95em; font-weight: 700; color: #345; cursor: pointer; user-select: none; transition: all .12s; }
.upc-type-btn:hover { border-color: #2196f3; }
.upc-type-btn.on { background: #234; border-color: #234; color: #fff; }
.upc-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.upc-fg { min-width: 0; }
.upc-fl { font-weight: 700; font-size: 0.92em; color: #345; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.upc-fnum { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #2196f3; color: #fff; font-size: 0.8em; flex: none; }
.upc-acc-arrow { display: none; margin-left: auto; color: #789; }
.upc-cg { display: flex; flex-wrap: wrap; gap: 6px; }
.upc-ci { background: #fff; border: 1px solid #c3d3e2; border-radius: 999px; padding: 3px 12px; font-size: 0.88em; cursor: pointer; color: #345; user-select: none; transition: all .12s; }
.upc-ci:hover { border-color: #2196f3; }
.upc-ci.on { background: #2196f3; border-color: #2196f3; color: #fff; font-weight: 700; }
.upc-search { width: 100%; border: 1px solid #c3d3e2; border-radius: 6px; padding: 6px 10px; font-size: 0.95em; }

/* ---- 件数・並び替え ---- */
.upc-count-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0.8em 0 0.2em; }
.upc-count-num { color: #e91e63; font-size: 1.25em; }
.upc-active-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.upc-atag { background: #e3f2fd; color: #1565c0; border-radius: 999px; padding: 2px 10px; font-size: 0.82em; cursor: pointer; }
.upc-atag:hover { background: #cde5fb; }
.upc-controls { display: flex; gap: 12px; margin-left: auto; font-size: 0.88em; color: #456; }
.upc-controls select { border: 1px solid #c3d3e2; border-radius: 6px; padding: 3px 6px; }
.upc-note { font-size: 0.8em; color: #789; margin: 0.3em 0 1em; }

/* ---- ショートコード生成 ---- */
.upc-sc-bar { margin: 0.5em 0; }
.upc-btn-sc { background: #345; color: #fff; border: none; border-radius: 6px; padding: 6px 16px; cursor: pointer; }
.upc-sc-output { background: #f0f4f8; border: 1px dashed #9ab; border-radius: 8px; padding: 10px 14px; margin-bottom: 1em; }
.upc-sc-label { font-size: 0.85em; color: #567; margin-bottom: 6px; }
.upc-sc-box { display: flex; gap: 8px; align-items: center; }
.upc-sc-code { flex: 1; background: #fff; padding: 6px 10px; border-radius: 4px; font-size: 0.85em; word-break: break-all; }
.upc-sc-copy { background: #2196f3; color: #fff; border: none; border-radius: 6px; padding: 5px 14px; cursor: pointer; flex: none; }

/* ---- カード ---- */
.upc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.upc-card { border: 1px solid #dce6ef; border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .15s; }
.upc-card:hover { box-shadow: 0 4px 16px rgba(30, 60, 100, .12); }
.upc-card-img { aspect-ratio: 4 / 3; background: #f7f9fb; display: flex; align-items: center; justify-content: center; position: relative; }
.upc-badge-gaming { position: absolute; top: 6px; left: 6px; z-index: 2; background: #1a237e; color: #fff; border-radius: 6px; padding: 3px 9px; font-size: 0.74em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.upc-badge-rank { position: absolute; top: 6px; right: 6px; z-index: 2; border-radius: 6px; padding: 3px 9px; font-size: 0.76em; font-weight: 700; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.upc-rank-s { background: #e91e63; }
.upc-rank-a { background: #f57c00; }
.upc-rank-b { background: #2e7d32; }
.upc-rank-c { background: #789; }
.upc-card-img-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: opacity 0.15s; }
.upc-card-img-link:hover { opacity: 0.85; }
.upc-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.upc-noimg { color: #abc; font-size: 0.9em; }
.upc-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.upc-card-maker { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.upc-chip { background: #eef2f6; color: #567; border-radius: 4px; padding: 1px 8px; font-size: 0.75em; }
.upc-chip-shop { background: #2196f3; color: #fff; font-weight: 700; }
.upc-chip-quality { background: #fff3e0; color: #b8560c; font-weight: 700; border: 1px solid #f0a860; }
.upc-card-name { font-weight: 700; font-size: 0.98em; margin-bottom: 2px; color: #234; }
.upc-card-price { color: #e91e63; font-weight: 700; font-size: 1.35em; }
.upc-card-price small { font-size: 0.6em; font-weight: 400; color: #789; margin-left: 2px; }
.upc-card-stock { font-size: 0.78em; color: #2e7d32; margin-bottom: 4px; }
.upc-card-shopinfo { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.upc-info-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8em; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.upc-info-warranty, .upc-info-return { background: #e3f2fd; color: #1565c0; }
.upc-spec { list-style: none; margin: 6px 0; padding: 8px 10px; background: #f7f9fb; border-radius: 8px; font-size: 0.85em; }
.upc-spec li { display: flex; gap: 8px; padding: 1px 0; margin: 0; }
.upc-spec li span { flex: none; width: 68px; color: #789; font-weight: 700; font-size: 0.9em; }
.upc-card-btn { display: block; text-align: center; background: #e91e63; color: #fff !important; text-decoration: none !important; border-radius: 8px; padding: 9px 0; font-weight: 700; margin-top: auto; transition: opacity .12s; }
.upc-card-btn:hover { opacity: .85; }
.upc-empty { grid-column: 1 / -1; text-align: center; color: #789; padding: 2em 0; }

/* ---- ページャ ---- */
.upc-pager { display: flex; justify-content: center; gap: 6px; margin: 1.2em 0; flex-wrap: wrap; }
.upc-pg { border: 1px solid #c3d3e2; background: #fff; border-radius: 6px; padding: 5px 12px; cursor: pointer; color: #345; }
.upc-pg.cur { background: #2196f3; border-color: #2196f3; color: #fff; font-weight: 700; }
.upc-pg:disabled { opacity: .4; cursor: default; }
.upc-pager span { color: #9ab; align-self: center; }

/* ---- レスポンシブ ---- */
@media (max-width: 979px) {
  .upc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .upc-filter-grid { grid-template-columns: 1fr; }
  .upc-acc-arrow { display: inline; }
  .upc-fl { cursor: pointer; }
  .upc-fg.closed .upc-acc-body { display: none; }
  .upc-controls { margin-left: 0; }
}
@media (max-width: 519px) {
  .upc-cards { grid-template-columns: 1fr; }
  .upc-filter-top { flex-wrap: wrap; gap: 10px; }
  .upc-btn-reset { flex: 1 1 100%; justify-content: center; }
}