/* ===== テーマトークン ===== */
:root {
  color-scheme: light dark;
  --font-base: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Montserrat', 'Noto Sans JP', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --lh-tight: 1.25;
  --lh-base: 1.7;
  --ls-heading: -0.01em;
  --ls-body: 0.01em;
  --clr-base: #f4f7fb;
  --clr-surface: #ffffff;
  --clr-surface-subtle: #f8fafc;
  --clr-surface-muted: #edf2f7;
  --clr-text: #111827;
  --clr-text-muted: #4b5563;
  --clr-text-subtle: #64748b;
  --clr-primary: #2563eb;
  --clr-primary-strong: #1d4ed8;
  --clr-primary-soft: rgba(37, 99, 235, 0.12);
  --clr-accent: #f97316;
  --clr-accent-soft: rgba(249, 115, 22, 0.14);
  --clr-border: rgba(148, 163, 184, 0.35);
  --clr-border-strong: rgba(100, 116, 139, 0.4);
  --clr-card-indigo: #4338ca;
  --clr-card-teal: #0f766e;
  --clr-card-amber: #b45309;
  --clr-card-rose: #db2777;
  --clr-card-emerald: #047857;
  --shadow-border: 0 0 0 1px rgba(15, 23, 42, 0.05);
  --shadow-soft: 0 18px 38px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 22px 42px rgba(15, 23, 42, 0.12);
  --radius-card: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --space-2xs: 6px;
  --space-xs: 10px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 44px;
  --transition-base: 180ms ease;

  /* セマンティックカラー */
  --clr-success: #059669;
  --clr-success-soft: rgba(5, 150, 105, 0.12);
  --clr-warning: #d97706;
  --clr-warning-soft: rgba(217, 119, 6, 0.12);
  --clr-danger: #dc2626;
  --clr-danger-soft: rgba(220, 38, 38, 0.12);

  /* サービス別カラー */
  --clr-service-used: #2563eb;
  --clr-service-used-strong: #1d4ed8;
  --clr-service-used-soft: rgba(37, 99, 235, 0.10);
  --clr-service-joint: #0f766e;
  --clr-service-joint-strong: #0d9488;
  --clr-service-joint-soft: rgba(15, 118, 110, 0.10);
  --clr-service-partner: #4338ca;
  --clr-service-partner-strong: #6366f1;
  --clr-service-partner-soft: rgba(67, 56, 202, 0.10);

  /* カード・テーブル背景 */
  --clr-card-bg: #ffffff;
  --clr-card-bg-subtle: #f8fafc;
  --clr-card-bg-muted: #f9f9f9;
  --clr-card-border: #e5e7eb;
  --clr-table-header: #f0fdf4;
  --clr-table-header-text: #166534;
  --clr-table-border: #e5e7eb;
  --clr-faq-bg: #f9f9f9;
  --clr-faq-hover: #f0f0f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-base: #0f172a;
    --clr-surface: #111c30;
    --clr-surface-subtle: #16213a;
    --clr-surface-muted: #1c2843;
    --clr-text: #e2e8f0;
    --clr-text-muted: #cbd5e1;
    --clr-text-subtle: #94a3b8;
    --clr-primary: #63a5f9;
    --clr-primary-strong: #3b82f6;
    --clr-primary-soft: rgba(99, 165, 249, 0.22);
    --clr-accent: #fb923c;
    --clr-accent-soft: rgba(251, 146, 60, 0.18);
    --clr-border: rgba(148, 163, 184, 0.35);
    --clr-border-strong: rgba(148, 163, 184, 0.5);
    --clr-card-indigo: #a5b4fc;
    --clr-card-teal: #34d399;
    --clr-card-amber: #fbbf24;
    --clr-card-rose: #f9a8d4;
    --clr-card-emerald: #6ee7b7;
    --shadow-border: 0 0 0 1px rgba(148, 163, 184, 0.2);
    --shadow-soft: 0 14px 32px rgba(8, 15, 35, 0.45);
    --shadow-hover: 0 22px 46px rgba(8, 15, 35, 0.55);

    /* セマンティックカラー (dark) */
    --clr-success: #34d399;
    --clr-success-soft: rgba(52, 211, 153, 0.18);
    --clr-warning: #fbbf24;
    --clr-warning-soft: rgba(251, 191, 36, 0.18);
    --clr-danger: #f87171;
    --clr-danger-soft: rgba(248, 113, 113, 0.18);

    /* サービス別カラー (dark) */
    --clr-service-used: #63a5f9;
    --clr-service-used-strong: #3b82f6;
    --clr-service-used-soft: rgba(99, 165, 249, 0.18);
    --clr-service-joint: #34d399;
    --clr-service-joint-strong: #2dd4bf;
    --clr-service-joint-soft: rgba(52, 211, 153, 0.18);
    --clr-service-partner: #a5b4fc;
    --clr-service-partner-strong: #818cf8;
    --clr-service-partner-soft: rgba(165, 180, 252, 0.18);

    /* カード・テーブル背景 (dark) */
    --clr-card-bg: #1e293b;
    --clr-card-bg-subtle: #1c2843;
    --clr-card-bg-muted: #16213a;
    --clr-card-border: #334155;
    --clr-table-header: #14532d;
    --clr-table-header-text: #86efac;
    --clr-table-border: #334155;
    --clr-faq-bg: #1c2843;
    --clr-faq-hover: #1e3a5f;
  }
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-body);
  color: var(--clr-text);
  background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.04), transparent 42%),
              radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.04), transparent 45%),
              var(--clr-base);
  -webkit-text-size-adjust: 100%;
}
a {
  color: var(--clr-primary);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover,
a:focus-visible {
  color: var(--clr-primary-strong);
}

body, button, input, textarea, select {
  font-feature-settings: 'palt' 1;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--ls-heading);
  color: var(--clr-text);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-sm);
}

h1 { font-size: clamp(2.2rem, 3vw + 1rem, 3rem); }
h2 { font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem); }
h3 { font-size: clamp(1.35rem, 1.2vw + 1rem, 1.6rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; }

p {
  margin: 0 0 var(--space-sm);
  color: var(--clr-text);
  font-size: var(--fs-base);
}

small,
.text-muted {
  font-size: var(--fs-sm);
  color: var(--clr-text-subtle);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-subtle);
}

.bg-base { background: var(--clr-base); }
.text-primary { color: var(--clr-primary); }
.rounded-card { border-radius: var(--radius-card); }
.shadow-card { box-shadow: var(--shadow-soft); }

.page-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg) clamp(20px, 4vw, 48px);
}

.section {
  margin: 0 0 var(--space-xl);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.section-header .section-meta {
  font-size: var(--fs-sm);
  color: var(--clr-text-subtle);
}

.mypage-hero {
  position: relative;
  margin-bottom: var(--space-xl);
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(14, 165, 233, 0.12));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.mypage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.22), transparent 58%);
  pointer-events: none;
}

.mypage-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-md), 2vw, var(--space-xl));
  align-items: stretch;
  margin-bottom: var(--space-lg);
}

.mypage-hero__intro {
  flex: 1 1 320px;
  min-width: 260px;
  color: var(--clr-text);
}

.mypage-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(37, 99, 235, 0.16);
  color: var(--clr-primary-strong);
}

.mypage-hero__description {
  margin: var(--space-sm) 0 var(--space-2xs);
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-medium);
}

.mypage-hero__description strong {
  display: inline-block;
  margin-left: 6px;
  font-size: clamp(2rem, 2vw + 1rem, 2.6rem);
  font-family: var(--font-heading);
}

.mypage-hero__meta {
  margin: 0;
  color: var(--clr-text-muted);
  max-width: 32ch;
}

.mypage-hero__alerts {
  flex: 1 1 260px;
  min-width: 240px;
  display: grid;
  gap: var(--space-sm);
}

.hero-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.hero-alert--active {
  background: var(--clr-accent-soft);
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: var(--shadow-hover);
}

.hero-alert__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.14);
  color: var(--clr-primary-strong);
  font-size: 1.1rem;
}

.hero-alert--active .hero-alert__icon {
  background: rgba(249, 115, 22, 0.18);
  color: var(--clr-accent);
}

.hero-alert__title {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-medium);
  color: var(--clr-text);
}

.hero-alert__summary {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.hero-alert__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  font-size: 0.9rem;
  transition: transform var(--transition-base), color var(--transition-base);
}

.hero-alert:hover,
.hero-alert:focus-visible {
  transform: translateY(-2px);
  border-color: var(--clr-border-strong);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.hero-alert:hover .hero-alert__chevron,
.hero-alert:focus-visible .hero-alert__chevron {
  color: var(--clr-primary-strong);
  transform: translateX(2px);
}

.hero-alert:focus-visible {
  outline: 3px solid var(--clr-primary-soft);
  outline-offset: 2px;
}

.mypage-hero__stats-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
}

.stat-card {
  padding: var(--space-md);
  background: var(--clr-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.stat-card:hover,
.stat-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.stat-card__label {
  margin: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-text-subtle);
}

.stat-card__value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 2vw + 1.2rem, 2.8rem);
  line-height: var(--lh-tight);
  color: var(--clr-text);
}

.stat-card__meta {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.due-soon-intro {
  margin: clamp(20px, 4vw, 32px) 0 var(--space-md);
  max-width: 60ch;
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
}

.due-soon-list {
  display: grid;
  gap: clamp(var(--space-sm), 2vw, var(--space-md));
  margin-bottom: clamp(32px, 6vw, 48px);
}

.due-soon-card {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  box-shadow: var(--shadow-border);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.due-soon-card:hover,
.due-soon-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--clr-border-strong);
  box-shadow: var(--shadow-hover);
}

.due-soon-card:focus-visible {
  outline: 3px solid var(--clr-primary-soft);
  outline-offset: 2px;
}

.due-soon-card__thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--clr-surface-subtle);
}

@media (min-width: 640px) {
  .due-soon-card__thumb {
    flex-basis: 118px;
    width: 118px;
    height: 88px;
  }
}

.due-soon-card__body {
  flex: 1;
  display: grid;
  gap: 6px;
}

.due-soon-card__type {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
}

.due-soon-card__type--listing {
  background: var(--clr-primary-soft);
  color: var(--clr-primary-strong);
}

.due-soon-card__type--joint {
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
}

.due-soon-card__title {
  margin: 0;
  font-size: clamp(1rem, 0.8vw + 0.8rem, 1.1rem);
  color: var(--clr-text);
  font-family: var(--font-heading);
}

.due-soon-card__subtitle {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.due-soon-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.due-soon-card__deadline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-medium);
  color: var(--clr-accent);
}

.due-soon-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.due-soon-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mypage-activity {
  margin-bottom: clamp(32px, 6vw, 56px);
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-card);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-soft);
}

.activity-accordion {
  margin: 0;
  border: none;
}

.activity-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  list-style: none;
  cursor: pointer;
  padding: 0;
  outline: none;
}

.activity-accordion__summary::-webkit-details-marker {
  display: none;
}

.activity-accordion__summary:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
  border-radius: var(--radius-sm);
}

.mypage-activity__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.mypage-activity__title {
  margin: 4px 0 0;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
}

.mypage-activity__meta {
  margin: 0;
  max-width: 32ch;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.activity-accordion__indicator {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-surface-subtle);
  color: var(--clr-text-muted);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-border);
}

.activity-accordion[open] .activity-accordion__indicator {
  transform: rotate(180deg);
}

.activity-accordion__panel {
  margin-top: var(--space-md);
}

.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.activity-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-subtle);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-border);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.activity-item:hover,
.activity-item:focus-within {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.activity-item__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-surface);
  color: var(--clr-primary);
  font-size: 1.15rem;
  box-shadow: var(--shadow-border);
}

.activity-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.activity-item__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.activity-item__type {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-text-subtle);
}

.activity-item__time {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.activity-item__summary {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-text);
  line-height: 1.6;
}

.activity-item__subject-link,
.activity-item__subject-text {
  font-weight: var(--font-weight-bold);
}

.activity-item__detail {
  margin-left: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.activity-item__deadline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.activity-item__deadline-countdown {
  font-weight: var(--font-weight-medium);
  color: var(--clr-text);
}

.activity-item--type-bid .activity-item__icon {
  color: var(--clr-card-indigo);
}

.activity-item--type-favorite .activity-item__icon {
  color: var(--clr-card-rose);
}

.activity-item--type-joint_apply .activity-item__icon {
  color: var(--clr-card-teal);
}

.activity-item--due-soon {
  border-color: rgba(249, 115, 22, 0.45);
  background: var(--clr-accent-soft);
}

.activity-item--due-soon .activity-item__deadline-countdown {
  color: var(--clr-accent);
}

.activity-item--closed {
  opacity: 0.85;
}

.activity-empty {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

@media (max-width: 640px) {
  .activity-item {
    grid-template-columns: 1fr;
  }

  .activity-item__icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .activity-item__body {
    gap: var(--space-2xs);
  }
}

.mypage-shortcuts {
  margin-top: clamp(28px, 6vw, 48px);
}

.mypage-shortcuts__inner {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 960px) {
  .mypage-shortcuts__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.shortcut-block {
  background: var(--clr-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-border);
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.shortcut-block__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.shortcut-block__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-text-subtle);
}

.shortcut-block__title {
  margin: 0;
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.65rem);
  color: var(--clr-text);
}

.shortcut-block__description {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.shortcut-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.shortcut-card {
  --shortcut-icon-bg: var(--clr-primary-soft);
  --shortcut-icon-color: var(--clr-primary-strong);
  --shortcut-badge-bg: rgba(37, 99, 235, 0.12);
  --shortcut-badge-border: rgba(37, 99, 235, 0.25);
  --shortcut-badge-color: var(--clr-primary-strong);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-subtle);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.shortcut-card:hover,
.shortcut-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  background: var(--clr-surface);
  border-color: var(--clr-border-strong);
}

.shortcut-card.is-active {
  border-color: var(--clr-primary);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.16);
}

.shortcut-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--shortcut-icon-bg);
  color: var(--shortcut-icon-color);
  font-size: 1.25rem;
}

.shortcut-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.shortcut-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--clr-text);
  line-height: 1.35;
}

.shortcut-card__description {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  line-height: 1.4;
}

.shortcut-card__badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--shortcut-badge-bg);
  border: 1px solid var(--shortcut-badge-border);
  color: var(--shortcut-badge-color);
  min-width: 88px;
}

.shortcut-card__badge-value {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1.35rem;
  line-height: 1;
  color: inherit;
}

.shortcut-card__badge-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.72;
}

.shortcut-card--tone-indigo {
  --shortcut-icon-bg: rgba(67, 56, 202, 0.14);
  --shortcut-icon-color: var(--clr-card-indigo);
  --shortcut-badge-bg: rgba(67, 56, 202, 0.12);
  --shortcut-badge-border: rgba(67, 56, 202, 0.28);
  --shortcut-badge-color: var(--clr-card-indigo);
}

.shortcut-card--tone-teal {
  --shortcut-icon-bg: rgba(15, 118, 110, 0.16);
  --shortcut-icon-color: var(--clr-card-teal);
  --shortcut-badge-bg: rgba(15, 118, 110, 0.12);
  --shortcut-badge-border: rgba(15, 118, 110, 0.28);
  --shortcut-badge-color: var(--clr-card-teal);
}

.shortcut-card--tone-amber {
  --shortcut-icon-bg: rgba(214, 158, 46, 0.16);
  --shortcut-icon-color: var(--clr-card-amber);
  --shortcut-badge-bg: rgba(214, 158, 46, 0.12);
  --shortcut-badge-border: rgba(214, 158, 46, 0.32);
  --shortcut-badge-color: var(--clr-card-amber);
}

.shortcut-card--tone-rose {
  --shortcut-icon-bg: rgba(219, 39, 119, 0.16);
  --shortcut-icon-color: var(--clr-card-rose);
  --shortcut-badge-bg: rgba(219, 39, 119, 0.12);
  --shortcut-badge-border: rgba(219, 39, 119, 0.28);
  --shortcut-badge-color: var(--clr-card-rose);
}

.shortcut-card--tone-emerald {
  --shortcut-icon-bg: rgba(16, 185, 129, 0.16);
  --shortcut-icon-color: var(--clr-card-emerald);
  --shortcut-badge-bg: rgba(16, 185, 129, 0.12);
  --shortcut-badge-border: rgba(16, 185, 129, 0.28);
  --shortcut-badge-color: var(--clr-card-emerald);
}

.shortcut-card--tone-accent {
  --shortcut-icon-bg: rgba(249, 115, 22, 0.16);
  --shortcut-icon-color: var(--clr-accent);
  --shortcut-badge-bg: rgba(249, 115, 22, 0.12);
  --shortcut-badge-border: rgba(249, 115, 22, 0.3);
  --shortcut-badge-color: var(--clr-accent);
}

.shortcut-card--tone-primary {
  --shortcut-icon-bg: var(--clr-primary-soft);
  --shortcut-icon-color: var(--clr-primary-strong);
  --shortcut-badge-bg: rgba(37, 99, 235, 0.12);
  --shortcut-badge-border: rgba(37, 99, 235, 0.25);
  --shortcut-badge-color: var(--clr-primary-strong);
}

@media (max-width: 640px) {
  .shortcut-card {
    grid-template-columns: auto 1fr;
  }

  .shortcut-card__badge {
    justify-self: start;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
  }
}

@media (max-width: 768px) {
  .mypage-hero {
    padding: var(--space-lg);
  }

  .mypage-hero__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .mypage-hero__alerts {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .mypage-hero__stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .mypage-hero__description strong {
    font-size: clamp(1.8rem, 4vw + 1rem, 2.2rem);
  }
}

@media (prefers-color-scheme: dark) {
  .shortcut-block {
    background: rgba(15, 23, 42, 0.58);
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: none;
  }

  .shortcut-card {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(148, 163, 184, 0.18);
  }

  .shortcut-card:hover,
  .shortcut-card:focus-visible {
    background: rgba(15, 23, 42, 0.62);
    border-color: rgba(148, 163, 184, 0.36);
  }
}

.site-header {
  position: relative;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(14px);
  color: #fff;
  z-index: 5000;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

/* ── 共通ヒーローセクション ── */
/* 背景: ブランドカラーをベースに濃色寄りに調整（白文字とのコントラスト比 AA 以上を確保） */
.page-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 48px 24px;
  margin: -20px -20px 30px -20px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
/* 中古設備売買: 深い青 */
.page-hero--used {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
}
/* 共同購入: 深いティール */
.page-hero--joint {
  background: linear-gradient(135deg, #115e59 0%, #0f766e 55%, #14b8a6 100%);
}
/* パートナー: 深いインディゴ */
.page-hero--partner {
  background: linear-gradient(135deg, #312e81 0%, #4338ca 55%, #6366f1 100%);
}
.page-hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}
/* eyebrow: 色付きチップ風に変更して視認性を大幅改善 */
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  margin-bottom: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.page-hero__eyebrow i { color: #fff; }
/* h1 / p はグローバルの color: var(--clr-text) を上書き */
.page-hero h1,
.page-hero .page-hero__title {
  margin: 0 0 10px;
  font-size: 1.85rem;
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-tight);
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.page-hero__subtitle,
.page-hero__sub,
.page-hero p {
  margin: 0;
  font-size: var(--fs-base);
  max-width: 520px;
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.page-hero__sub strong { color: #fff; }
/* __inner は __content と同等に扱う */
.page-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}
.page-hero__image {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 200px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
/* 装飾：右下に薄い円 */
.page-hero::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  z-index: 1;
}
@media (max-width: 768px) {
  .page-hero {
    padding: 32px 16px;
    flex-direction: column;
    text-align: center;
  }
  .page-hero h1,
  .page-hero .page-hero__title {
    font-size: 1.5rem;
  }
  .page-hero__eyebrow {
    margin-left: auto;
    margin-right: auto;
  }
  .page-hero__subtitle,
  .page-hero__sub {
    max-width: 100%;
  }
  .page-hero__image {
    width: 160px;
    height: 110px;
  }
}

/* ── パンくずナビ ── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  margin-bottom: var(--space-sm);
  padding: 8px 0;
}
.breadcrumb__link {
  color: var(--clr-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}
.breadcrumb__link:hover {
  color: var(--clr-primary);
}
.breadcrumb__sep {
  color: var(--clr-text-subtle);
  font-size: 0.9em;
}
.breadcrumb__current {
  color: var(--clr-text);
  font-weight: var(--font-weight-medium);
}

/* ── 共通リストカード ── */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.list-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.list-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--clr-border-strong);
}
.list-card a {
  text-decoration: none;
  color: inherit;
}
.list-card__thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--clr-surface-muted);
}
.list-card__body {
  padding: var(--space-sm);
}
.list-card__badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-medium);
  margin-bottom: 8px;
}
.list-card__badge--green  { background: var(--clr-success-soft); color: #16a34a; }
.list-card__badge--yellow { background: var(--clr-warning-soft); color: #d97706; }
.list-card__badge--gray   { background: var(--clr-surface-muted); color: var(--clr-text-muted); }
.list-card__badge--red    { background: var(--clr-danger-soft);  color: #dc2626; }
.list-card__category {
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-medium);
  margin-bottom: 6px;
}
.list-card__category--used    { color: var(--clr-service-used); }
.list-card__category--joint   { color: var(--clr-service-joint); }
.list-card__category--partner { color: var(--clr-service-partner); }
.list-card__title {
  font-size: 1.05rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 8px;
  line-height: var(--lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-card__price {
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
  color: var(--clr-service-used);
  margin-bottom: 10px;
}
.list-card__price--unset {
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
}
.list-card__desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-card__meta {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.list-card__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.list-card__meta-item i,
.list-card__meta-item svg {
  color: var(--clr-text-subtle);
  width: 16px;
}
.list-card__progress {
  margin: 10px 0;
}
.list-card__progress-bar {
  background: var(--clr-surface-muted);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.list-card__progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--clr-service-joint), var(--clr-service-joint-strong));
  transition: width 0.3s;
}
.list-card__progress-fill--over {
  background: linear-gradient(90deg, var(--clr-warning), #d97706);
}
.list-card__progress-text {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}
.list-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px var(--space-sm);
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface-subtle);
}
.list-card__stats {
  display: flex;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}
.list-card__stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.list-card__remain {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}
.list-card__remain i { margin-right: 4px; }
.list-card__remain--urgent {
  color: var(--clr-danger);
  font-weight: var(--font-weight-medium);
  animation: pulse-urgent 1.8s ease-in-out infinite;
}

/* ── 共通 fav-btn ── */
.fav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  color: #ccc;
  transition: color 0.2s;
  padding: 4px;
}
.fav-btn:hover,
.fav-btn.active {
  color: #e74c3c;
}

/* ── 共通 no-results ── */
.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--clr-text-muted);
}
.no-results i,
.no-results svg {
  font-size: 3em;
  color: var(--clr-surface-muted);
  margin-bottom: 15px;
}
.no-results p {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .list-grid {
    grid-template-columns: 1fr;
  }
}

/* ── スケルトンローディング ── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--clr-surface-muted) 25%,
    var(--clr-surface-subtle) 37%,
    var(--clr-surface-muted) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
.skeleton-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.skeleton-card__thumb {
  width: 100%;
  height: 160px;
}
.skeleton-card__body {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-card__line {
  height: 14px;
  border-radius: 6px;
}
.skeleton-card__line--short { width: 40%; }
.skeleton-card__line--medium { width: 70%; }
.skeleton-card__line--long { width: 100%; }
.skeleton-card__line--price {
  height: 20px;
  width: 50%;
}

/* ── スクロールリビール ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] {
  transform: none;
}
[data-reveal="fade"].is-revealed {
  opacity: 1;
}
/* カードは1枚ずつ少しずらして出現 */
.list-card[data-reveal] {
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── トラストバー ── */
.trust-bar {
  background: var(--clr-surface-subtle);
  border-bottom: 1px solid var(--clr-border);
  padding: 8px 0;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  overflow: hidden;
}
.trust-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: nowrap;
}
.trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
}
.trust-bar__item i {
  color: var(--clr-service-used);
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .trust-bar__inner {
    justify-content: flex-start;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .trust-bar__inner::-webkit-scrollbar { display: none; }
}

/* ── お気に入りハートアニメーション ── */
@keyframes heart-pop {
  0%   { transform: scale(1); color: #ccc; }
  25%  { transform: scale(1.5); color: #e74c3c; }
  50%  { transform: scale(0.85); color: #e74c3c; }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes heart-break {
  0%   { transform: scale(1); color: #e74c3c; }
  30%  { transform: scale(0.6); color: #ccc; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); color: #ccc; }
}
.fav-btn.is-animating i,
.fav-btn.is-animating svg {
  display: inline-block;
  animation: heart-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.fav-btn.is-removing i,
.fav-btn.is-removing svg {
  display: inline-block;
  animation: heart-break 0.4s ease-out forwards;
}

/* ── 締切間近パルス ── */
@keyframes pulse-urgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.deadline--urgent {
  color: var(--clr-danger);
  font-weight: var(--font-weight-medium);
  animation: pulse-urgent 1.8s ease-in-out infinite;
}

.site-header .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-sm) clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-logo {
  font-size: 1.4rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links { display: flex; }
.nav-links__panel {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(148, 163, 184, 0.18);
  color: #fff;
}

.nav-links__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  padding: 0 var(--space-2xs);
  margin-left: var(--space-2xs);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.nav-links__badge--alert {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.2);
}

.nav-toggle {
  display: none;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.card-list {
  display: grid;
  gap: clamp(var(--space-sm), 2vw, var(--space-md));
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

@media (min-width: 1280px) {
  .card-list { grid-template-columns: repeat(4, 1fr); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  background: var(--clr-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--clr-border-strong);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}
.card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-badge {
  position:absolute;
  top:8px;
  left:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:700;
  color:#fff;
  line-height:1;
  z-index:1;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.card-badge.badge-accepting {
  background:#15803d;
}

.card-badge.badge-before {
  background:#4b5563;
}

.card-badge.badge-closed {
  background:#9ca3af;
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 4vw, var(--space-md));
  font-size: 0.95rem;
  color: var(--clr-text);
}

.card-body .eyebrow,
.card-body small {
  margin-bottom: -4px;
}

.card-body h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.85rem;
  color: var(--clr-text-muted);
}

.card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-meta i {
  font-size: 1rem;
  color: var(--clr-primary);
}

.card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-price__label {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}
.card-price__value {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--clr-primary);
}

.deadline {
  margin-top: var(--space-xs);
  text-align: center;
  font-size: 0.82rem;
  color: var(--clr-text-subtle);
  min-height: 1.2em;
}

.text-gray-500 { color: var(--clr-text-muted); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ===== テーブル ===== */
.table,
table          { width:100%; border-collapse:collapse; margin-bottom:1.5rem; }
.table th,
.table td,
table th,
table td       { border:1px solid #e0e0e0; padding:8px 10px; font-size:0.95rem; }
.table-nowrap th,
.table-nowrap td { white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.table th,
table th       { background:#f5f5f5; text-align:left; }
.table-striped tr:nth-child(even),
table tr:nth-child(even) { background:#fafafa; }

.tbl{border-collapse:collapse;width:100%;}
.tbl th{background:#f8f8f8;text-align:left;padding:6px 8px;border:1px solid #ccc;width:160px;}
.tbl td{padding:6px 8px;border:1px solid #ccc;}
.tier_tbl td{padding:4px 8px;border:1px solid #ccc;}

@media (prefers-color-scheme: dark) {
  /* テーブル共通 */
  .table th,
  .table td,
  table th,
  table td       { border-color: var(--clr-table-border); }
  .table th,
  table th       { background: var(--clr-card-bg-subtle); color: var(--clr-text); }
  .table-striped tr:nth-child(even),
  table tr:nth-child(even) { background: var(--clr-surface-subtle); }
  .tbl th { background: var(--clr-card-bg-subtle); border-color: var(--clr-table-border); color: var(--clr-text); }
  .tbl td { background: var(--clr-surface); border-color: var(--clr-table-border); color: var(--clr-text); }
  .tier_tbl td { background: var(--clr-surface); border-color: var(--clr-table-border) !important; color: var(--clr-text); }

  /* Card — ダークテーマ対応 */
  .card { background: var(--clr-card-bg); color: var(--clr-text); }
  .card-body h3 { color: var(--clr-text); }

  /* Callout */
  .estimate-callout { color: var(--clr-text); }

  /* Modal */
  .modal-content { background: var(--clr-card-bg); color: var(--clr-text); }

  /* MyPage tab */
  .tab-btn { background: var(--clr-surface-muted); color: var(--clr-text); }
  .tab-btn.active { background: var(--clr-card-bg); color: var(--clr-text); border-color: var(--clr-border); }

  /* Light-background elements */
  .search-control,
  .page-item,
  .page-select,
  .pending-message,
  .stat-card,
  .news-item {
    color: var(--clr-text);
  }

  /* ボトムタブバー */
  .mobile-tab-bar {
    background: var(--clr-surface);
    border-top-color: var(--clr-border);
  }
  .mobile-tab-bar__link { color: var(--clr-text-subtle); }
  .mobile-tab-bar__link--active { color: var(--clr-primary); }
}

/* ===== フォーム ===== */
.form-group {
  margin-bottom: var(--space-sm);
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-medium);
  color: var(--clr-text);
  letter-spacing: 0.02em;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  font-size: var(--fs-base);
  color: var(--clr-text);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15), 0 0 0 4px rgba(37, 99, 235, 0.15);
  outline: none;
}

.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 1px;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--clr-text-subtle);
}

.form-wrapper {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-sm) 0;
}

.estimate-notice {
  max-width: 640px;
  margin: var(--space-md) auto var(--space-lg);
  padding: var(--space-md);
  border-left: 4px solid var(--clr-primary);
  background: rgba(37, 99, 235, 0.08);
  border-radius: var(--radius-card);
  color: var(--clr-text);
  line-height: 1.6;
  box-shadow: var(--shadow-border);
}

.estimate-notice p {
  margin: 0;
}

.estimate-notice p + p {
  margin-top: var(--space-xs);
}

.estimate-callout {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.05), rgba(148, 163, 184, 0.08));
  text-align: center;
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-border);
}

.estimate-result p {
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-bold);
  margin: 6px 0;
}

/* ===== Estimate page v2 ===== */

/* ヒント notice */
.estimate-hint {
  max-width: 640px;
  margin: 0 auto var(--space-md);
  padding: 10px 14px;
  background: rgba(37,99,235,0.06);
  border-left: 3px solid var(--clr-primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  line-height: 1.6;
}
.estimate-hint a { color: var(--clr-primary); }

/* 設備ID行 */
.estimate-id-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.estimate-id-row .form-control { flex: 1; }
.estimate-id-row .btn { flex-shrink: 0; white-space: nowrap; }

/* 自動入力ステータス */
.estimate-fill-status {
  margin-top: 6px;
  font-size: var(--fs-sm);
  min-height: 1.4em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.estimate-fill-status.is-success { color: #059669; }
.estimate-fill-status.is-error   { color: #dc2626; }

/* フォームフィールド 2カラムグリッド */
.estimate-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-sm);
}
@media (max-width: 520px) {
  .estimate-fields-grid { grid-template-columns: 1fr; }
}

/* 結果カードグリッド */
.estimate-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-sm);
}
@media (max-width: 520px) {
  .estimate-result-grid { grid-template-columns: 1fr; }
}

/* 個別カード */
.estimate-card {
  background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(148,163,184,0.06));
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-border);
  transition: box-shadow 0.2s;
}
.estimate-card:hover { box-shadow: var(--shadow-card); }

.estimate-card--price {
  background: linear-gradient(135deg, rgba(5,150,105,0.07), rgba(148,163,184,0.06));
}

.estimate-card__icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
  line-height: 1;
}
.estimate-card__label {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  margin-bottom: 4px;
}
.estimate-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.1;
  font-family: 'Montserrat', sans-serif;
}
.estimate-card--price .estimate-card__value { color: #059669; }
.estimate-card__unit {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  margin-top: 2px;
}

/* カード更新アニメーション */
@keyframes estimateFlash {
  0%   { opacity: 0.3; transform: scale(0.97); }
  100% { opacity: 1;   transform: scale(1); }
}
.estimate-card.is-updated {
  animation: estimateFlash 0.35s ease-out forwards;
}

/* 計算内訳 */
.estimate-breakdown {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
}
.estimate-breakdown__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text-muted);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.estimate-breakdown__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.estimate-breakdown__list div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--clr-border);
  font-size: var(--fs-sm);
  gap: 12px;
}
/* 左列: 右にボーダーで区切り */
.estimate-breakdown__list div:nth-child(odd) {
  border-right: 1px solid var(--clr-border);
  padding-right: 20px;
}
/* 右列: 左に余白 */
.estimate-breakdown__list div:nth-child(even) {
  padding-left: 20px;
}
.estimate-breakdown__list div:nth-last-child(-n+2) {
  border-bottom: none;
}
.estimate-breakdown__list dt { color: var(--clr-text-muted); white-space: nowrap; }
.estimate-breakdown__list dd { font-weight: 600; color: var(--clr-text); margin: 0; white-space: nowrap; }

@media (max-width: 520px) {
  .estimate-breakdown__list { grid-template-columns: 1fr; }
  .estimate-breakdown__list div:nth-child(odd) {
    border-right: none;
    padding-right: 12px;
  }
  .estimate-breakdown__list div:nth-child(even) {
    padding-left: 12px;
  }
  /* 1列では最後の項目だけ border-bottom なし（3番目は復活させる） */
  .estimate-breakdown__list div:nth-last-child(2) {
    border-bottom: 1px solid var(--clr-border);
  }
  .estimate-breakdown__list div:nth-last-child(1) { border-bottom: none; }
}

/* 出品ボタン */
.estimate-submit {
  width: 100%;
  margin-top: var(--space-sm);
  padding: 14px;
  font-size: 1rem;
}
.estimate-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ボタンローディング */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  .estimate-card { color: var(--clr-text); }
  .estimate-breakdown { color: var(--clr-text); }
}

/* ===== Notice list ===== */
.notice-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
  gap: 8px;
  flex-wrap: wrap;
}
.notice-toolbar__actions { display: flex; gap: 8px; }
.notice-toolbar__count {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.notice-list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.notice-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
  transition: background 0.15s;
}
.notice-item:last-child { border-bottom: none; }
.notice-item--unread { background: rgba(37, 99, 235, 0.04); }
.notice-item:hover { background: var(--clr-hover, rgba(0,0,0,0.03)); }

.notice-item__check {
  padding: 14px 8px 14px 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.notice-item__link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 14px 4px;
  text-decoration: none;
  color: var(--clr-text);
  min-width: 0;
}
.notice-item__link:hover { text-decoration: none; color: var(--clr-text); }

.notice-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--clr-primary);
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.notice-item__title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
}
.notice-item--unread .notice-item__title { font-weight: 600; }
.notice-item__date {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ===== お知らせ詳細 ===== */
.notice-detail {
  max-width: 780px;
  margin: clamp(24px, 4vw, 40px) auto clamp(40px, 6vw, 64px);
  padding: 0 clamp(16px, 4vw, 32px);
}
.notice-detail__card {
  background: var(--clr-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 4vw, 40px);
}
.notice-detail__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--clr-border);
  font-size: 0.85rem;
  color: var(--clr-text-muted);
}
.notice-detail__date { font-variant-numeric: tabular-nums; }
.notice-detail__body {
  line-height: 1.9;
  color: var(--clr-text);
  word-break: break-word;
  white-space: pre-wrap;
}
.notice-detail__link-wrap {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--clr-border);
}

.notice-nav {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.notice-nav__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--clr-text);
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.notice-nav__item:hover {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
  text-decoration: none;
  color: var(--clr-text);
}
.notice-nav__item--next { justify-content: flex-end; text-align: right; }
.notice-nav__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-nav__arrow { flex-shrink: 0; color: var(--clr-primary); font-size: 0.8rem; }

.notice-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--clr-text-muted);
}
.notice-back-link:hover { color: var(--clr-primary); }

@media (max-width: 600px) {
  .notice-nav { flex-direction: column; }
}

/* ===== News 2-column layout ===== */
.news-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: var(--space-lg);
}
.news-sidebar {
  position: sticky;
  top: 24px;
}
.news-sidebar-widget {
  background: var(--clr-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 20px;
}
.news-sidebar-widget + .news-sidebar-widget {
  margin-top: 16px;
}
.news-sidebar-widget__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px;
}
.sidebar-cat-list,
.sidebar-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-cat-list a,
.sidebar-archive-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  font-size: 0.9rem;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}
.sidebar-cat-list a:hover,
.sidebar-archive-list a:hover {
  background: var(--clr-base, #f1f5f9);
}
.sidebar-cat-list a.is-active,
.sidebar-archive-list a.is-active {
  color: var(--clr-primary);
  font-weight: 600;
}
.sidebar-count {
  font-size: 0.78rem;
  color: var(--clr-text-subtle);
  flex-shrink: 0;
}

/* タブレット: サイドバーを横スクロールウィジェットに変換 */
@media (max-width: 1023px) {
  .news-layout {
    grid-template-columns: 1fr;
    margin-top: var(--space-md);
  }
  .news-sidebar {
    position: static;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .news-sidebar-widget {
    min-width: 220px;
    flex-shrink: 0;
  }
  .news-sidebar-widget + .news-sidebar-widget {
    margin-top: 0;
  }
}

/* モバイル: 縦並びに戻す */
@media (max-width: 767px) {
  .news-sidebar {
    flex-direction: column;
    overflow: visible;
  }
  .news-sidebar-widget {
    min-width: 0;
  }
}

/* ===== News filter bar ===== */
.news-filter {
  margin-bottom: var(--space-md);
}
.news-filter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.news-filter__search {
  flex: 1;
  min-width: 160px;
}
.news-filter__cat {
  width: auto;
  min-width: 130px;
}
.news-filter__date-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.news-filter__date-range .form-control {
  width: 140px;
}
.news-filter__sep {
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
}
.news-results-count {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  margin-bottom: var(--space-sm);
}
@media (max-width: 640px) {
  .news-filter__form { flex-direction: column; align-items: stretch; }
  .news-filter__search,
  .news-filter__cat { width: 100%; }
  .news-filter__date-range { width: 100%; }
  .news-filter__date-range .form-control { flex: 1; width: auto; }
}

.form-range {
  display: flex;
  gap: var(--space-xs);
}

.form-range input {
  flex: 1;
}

@media (max-width: 640px) {
  .form-range {
    flex-direction: column;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
  background: var(--clr-primary);
  color: #fff;
  box-shadow: var(--shadow-border);
}

.btn:hover:not(:disabled),
.btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.btn-primary {
  background: var(--clr-primary);
  border-color: transparent;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--clr-primary-strong);
}

.btn-secondary {
  background: var(--clr-surface);
  border-color: var(--clr-border);
  color: var(--clr-text);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--clr-border-strong);
  background: var(--clr-surface-subtle);
}

.btn-outline {
  background: transparent;
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  box-shadow: none;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--clr-primary-soft);
  border-color: var(--clr-primary-strong);
  color: var(--clr-primary-strong);
}

.btn-full {
  width: 100%;
  display: inline-flex;
}

/* ===== 高度な検索フォーム ===== */
.advanced-search {
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.08), rgba(15, 23, 42, 0.05));
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  padding: var(--space-lg) clamp(24px, 4vw, 40px);
  max-width: 1080px;
  margin: 0 auto var(--space-xl);
  box-shadow: var(--shadow-border);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-md);
}

.grid-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.advanced-search label {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-medium);
  color: var(--clr-text-muted);
  margin-right: 0;
}

.search-control {
  flex: 1;
}

.form-grid select[name="prefecture"],
.form-grid select[name="is_fit"],
.form-grid input[name="min_capacity"],
.form-grid input[name="max_capacity"],
.form-grid input[name="keyword"] {
  width: auto;
  flex: 1;
}

.form-grid input[name="min_capacity"],
.form-grid input[name="max_capacity"] {
  flex: 0 1 160px;
}

.form-inline .form-control {
  margin-bottom: 10px;
}

.tilde {
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-sm);
  margin: 0 6px;
  color: var(--clr-text-subtle);
}

.btn-search {
  width: min(240px, 100%);
  margin: 0 auto;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  background: var(--clr-primary);
  border-color: transparent;
}

.btn-search:hover,
.btn-search:focus-visible {
  background: var(--clr-primary-strong);
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== メインエリア ===== */
.main-area  { flex: 1 1 650px; margin-top: 30px; margin-bottom: 30px;}

/* ===== Toast ===== */

.toast {
  position: fixed;
  z-index: 3000;
  bottom: clamp(16px, 5vw, 32px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  min-width: 280px;
  max-width: min(480px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: var(--radius-card);
  color: #fff;
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}
.toast__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.toast__msg {
  flex: 1;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast.success {
  background: linear-gradient(135deg, var(--clr-success), #047857);
}
.toast.success .toast__icon { background: rgba(255,255,255,0.25); }

.toast.error {
  background: linear-gradient(135deg, var(--clr-danger), #b91c1c);
}
.toast.error .toast__icon { background: rgba(255,255,255,0.25); }

.toast.warning {
  background: linear-gradient(135deg, var(--clr-warning), #b45309);
}
.toast.warning .toast__icon { background: rgba(255,255,255,0.25); }

.toast.info {
  background: linear-gradient(135deg, var(--clr-primary), #1d4ed8);
}
.toast.info .toast__icon { background: rgba(255,255,255,0.25); }

@media (max-width: 768px) {
  .toast {
    min-width: 0;
    width: calc(100vw - 32px);
    bottom: 16px;
    font-size: 0.9rem;
    padding: 12px 16px;
  }
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  padding: var(--space-lg) var(--space-sm);
}

.modal.open { display: flex; }

body.modal-open {
  overflow: hidden;
}

.modal-content {
  background: var(--clr-surface);
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-card);
  max-width: 520px;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--clr-border);
}

/* ===== マイページタブ ===== */
.tab-nav {
  display: flex;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--clr-border);
}

.tab-btn {
  position: relative;
  flex: 1;
  padding: 12px;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  text-align: center;
  border: none;
  color: var(--clr-text-subtle);
  transition: color var(--transition-base), background var(--transition-base);
}

.tab-btn::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background var(--transition-base), transform var(--transition-base);
}

.tab-btn:hover,
.tab-btn:focus-visible {
  color: var(--clr-text);
  background: var(--clr-surface-subtle);
}

.tab-btn.active {
  color: var(--clr-primary);
  font-weight: var(--font-weight-bold);
  background: var(--clr-surface);
}
.tab-btn.active::after {
  background: var(--clr-primary);
  transform: scaleX(1);
}

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ===== ナビゲーションボタン ===== */
.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
}

@media (min-width: 768px) {
  .nav-buttons { justify-content: center; }
}

.nav-button {
  position: relative;
  width: 150px;
  height: 150px;
  padding: var(--space-sm);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  color: var(--clr-text);
  text-decoration: none;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.nav-button svg {
  font-size: 40px;
  color: var(--clr-primary);
}

.nav-button:hover,
.nav-button:focus-visible {
  transform: translateY(-3px);
  border-color: var(--clr-border-strong);
  box-shadow: var(--shadow-hover);
}

.nav-button.is-current {
  opacity: 0.6;
  pointer-events: none;
}

.btn-myasset,
.btn-bid,
.btn-sell,
.btn-estimate,
.btn-market,
.btn-order {
  background: var(--clr-surface);
  color: var(--clr-text);
}
@media (max-width:640px){.nav-button{width:48%;flex:1 1 auto;}}

/* ===== ニュース一覧 ===== */
.news-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.news-item a{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.news-item img{
  width:100%;
  height:80px;
  object-fit:cover;
  border-radius:4px;
}
.news-title{
  margin-top:4px;
  font-size:0.85rem;
  text-align:center;
  color: #000;
}

/* ===== 統計カード ===== */
.stat-card { background:#fff; border:1px solid #ddd; border-radius:6px; }
.stat-card:hover{ box-shadow:0 2px 6px rgba(0,0,0,.12); }

/* ===== 管理ページ ===== */
.admin-link{display:flex;align-items:center;gap:6px;}
.admin-link i{font-size:1rem;}
/* Chart area responsive */
canvas{max-width:100%;}
/* KPI カードリンク装飾を消す */
.stat-link{display:block;color:inherit;text-decoration:none;}
.stat-link:hover .stat-card{box-shadow:0 2px 6px rgba(0,0,0,.18);}

/* ===== 管理ダッシュボード ===== */
.admin-section {
  background: var(--clr-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-border);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.admin-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 14px var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--clr-border);
}

.admin-section__header i { font-size: 0.9rem; }

/* カテゴリカラー（左ボーダー4px） */
.admin-section--urgent .admin-section__header  { border-left: 4px solid var(--clr-danger);          color: var(--clr-danger); }
.admin-section--used .admin-section__header    { border-left: 4px solid var(--clr-service-used);    color: var(--clr-service-used); }
.admin-section--joint .admin-section__header   { border-left: 4px solid var(--clr-service-joint);   color: var(--clr-service-joint); }
.admin-section--partner .admin-section__header { border-left: 4px solid var(--clr-service-partner); color: var(--clr-service-partner); }
.admin-section--content .admin-section__header { border-left: 4px solid var(--clr-card-emerald);    color: var(--clr-card-emerald); }
.admin-section--system .admin-section__header  { border-left: 4px solid #64748b;                    color: #64748b; }

/* アクショングリッド */
.admin-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 1px;
  background: var(--clr-border);
}

.admin-action {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 14px var(--space-md);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background var(--transition-base);
}

.admin-action:hover {
  background: var(--clr-surface-subtle);
  text-decoration: none;
  color: var(--clr-text);
}

/* アイコン（34x34 角丸） */
.admin-action__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
}

/* 未対応バッジ */
.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 9999px;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0;
}

/* カテゴリ別アイコン背景色 */
.admin-section--urgent .admin-action__icon  { background: var(--clr-danger); }
.admin-section--used .admin-action__icon    { background: var(--clr-service-used); }
.admin-section--joint .admin-action__icon   { background: var(--clr-service-joint); }
.admin-section--partner .admin-action__icon { background: var(--clr-service-partner); }
.admin-section--content .admin-action__icon { background: var(--clr-card-emerald); }
.admin-section--system .admin-action__icon  { background: #64748b; }

/* KPI グリッド */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.admin-kpi-grid .stat-card {
  padding: var(--space-md) var(--space-sm);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  box-shadow: none;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.admin-kpi-grid .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.admin-kpi-grid .stat-card__label {
  margin: 0;
  font-size: 0.78rem;
  color: var(--clr-text-muted);
}

.admin-kpi-grid .stat-card__value {
  margin: 4px 0 0;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
}

/* チャートエリア */
.admin-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.admin-chart-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  transition: box-shadow 0.2s;
}
.admin-chart-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.admin-chart-card h2 {
  margin: 0 0 var(--space-sm);
  font-size: 0.95rem;
  font-weight: 700;
}
.admin-chart-card h2 i { margin-right: 6px; color: #2563eb; }

/* レスポンシブ */
@media (max-width: 1024px) {
  .admin-section__grid { grid-template-columns: repeat(2, 1fr); }
  .admin-charts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .admin-section__grid { grid-template-columns: 1fr; }
}

/* 表操作系 */

.form-inline>*{margin-right:6px;margin-bottom:6px;}

/* ===== ユーティリティ ===== */
.bg-gradient-primary {
  background: linear-gradient(135deg, #1E88E5 0%, #64B5F6 100%);
  color: #fff;
}

/* ===== ページネーション ===== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 20px 0;
}
.page-item {
  display: inline-block;
  min-width: 32px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  background: #fff;
  color: inherit;
}
.page-item.active {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
}
.page-select {
  min-width: 60px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

/* ===== 承認待ちメッセージ ===== */
.pending-message {
  max-width: 480px;
  margin: 60px auto;
  padding: 40px 20px;
  background: #fff;
  text-align: center;
  line-height: 1.7;
}
.pending-message h1 {
  margin-top: 0;
  margin-bottom: 20px;
}

/* ===== カルーセル ===== */
.carousel-wrapper {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 200px;
  overflow: hidden;
}
.carousel {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease;
}
.carousel-slide {
  flex: 0 0 100vw;
  height: 100%;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: #fff;
  z-index: 1;
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.6);
}
.carousel-indicators button.active {
  background: #fff;
}

/* ===== 引っ張って更新機能 ===== */
.pull-refresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: var(--clr-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  transition: transform .3s;
  z-index: 2600;
}
.pull-refresh.show { transform: translateY(0); }
.pull-refresh .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #ccc;
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== レスポンシブ ===== */
@media (max-width: 1024px){
  .page-mypage{
    grid-template-columns: 1fr;
  }
  .side-area{
    order:-1;
    width:100%;
  }
  .news-list{
    flex-direction:row;
    overflow-x:auto;
  }
  .news-item{
    flex:0 0 120px;
  }
}

@media (max-width:768px){
  body.nav-open {
    overflow:hidden;
  }
  .nav-toggle {
    display:block;
    color:var(--clr-accent);
    font-size:1.6rem;
    position:absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
  }
  /* お知らせ未読バッジ（ハンバーガー） */
  .nav-toggle__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid #0f172a;
    animation: badge-pop 0.3s ease;
    pointer-events: none;
  }
  @keyframes badge-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
  }
  .nav-backdrop {
    display:none;
    position:fixed;
    top:var(--site-header-height, 68px);
    left:0;
    right:0;
    bottom:0;
    background:rgba(15, 23, 42, 0.55);
    backdrop-filter:blur(4px);
    z-index:3990;
  }
  .nav-backdrop.open { display:block; }
  .nav-links {
    position:fixed;
    top:var(--site-header-height, 68px);
    left:0;
    right:0;
    display:none;
    z-index:4000;
    height:auto;
    padding:0;
  }
  .nav-links__panel {
    width:100%;
    background:var(--clr-primary);
    border-radius:0;
    box-shadow:none;
    padding:var(--space-md) clamp(24px, 8vw, 32px);
    display:flex;
    flex-direction:column;
    gap:var(--space-xs);
    min-height:auto;
    max-height:none;
  }
  .nav-links__panel a {
    width:100%;
    padding:14px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    border:none;
    border-radius:var(--radius-sm);
  }
  .nav-links.open { display:flex; }
  .card { width:100%; }
  .page-main { max-width:none; width:100%; padding:var(--space-md) clamp(16px, 6vw, 24px); }
}

@media (max-width: 640px) {
  .card-list { grid-template-columns: repeat(2, 1fr); }
  .card{ width: 100% }
  label input{ font-size: 1rem; }
}

/* ===== Latest News Section ===== */
.news-header {
  align-items: center;
  gap: var(--space-xs);
}

.news-header .news-more {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--clr-primary);
}

.news-items {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.news-item {
  flex: 1 1 calc(20% - var(--space-sm));
  min-width: 180px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--clr-text);
  box-shadow: var(--shadow-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.news-item:hover,
.news-item:focus-visible {
  transform: translateY(-3px);
  border-color: var(--clr-border-strong);
  box-shadow: var(--shadow-hover);
}

.news-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.news-item .news-title {
  display: block;
  padding: var(--space-sm);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--clr-text);
}

@media (max-width: 1024px) {
  .news-item { flex: 1 1 calc(33.33% - var(--space-sm)); }
}

@media (max-width: 768px) {
  .news-items {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

.news-item {
    flex: 0 0 calc(70% - var(--space-xs));
    min-width: calc(70% - var(--space-xs));
    scroll-snap-align: start;
  }
  
  .list-controls .btn-primary { display: none; }
}

/* ===== Recommendation Hub ===== */
.recommendation-hub {
  max-width: 1200px;
  margin: var(--space-3xl, 4rem) auto var(--space-2xl);
  padding: 0 var(--space-lg);
}
.recommendation-hub__header {
  margin-bottom: var(--space-xl);
  display: grid;
  gap: var(--space-xs);
  max-width: 720px;
}
.recommendation-hub__eyebrow {
  font-size: 0.85rem;
  color: var(--clr-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.recommendation-hub__title {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin: 0;
}
.recommendation-hub__lead {
  margin: 0;
  color: var(--clr-text-muted);
  line-height: 1.7;
}
.recommendation-hub__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.recommendation-tile {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-border);
  padding: clamp(var(--space-md), 2vw, var(--space-xl));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.recommendation-tile--carousel {
  grid-column: 1 / -1;
}
.recommendation-tile__header {
  display: grid;
  gap: var(--space-2xs);
}
.recommendation-tile__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-text-muted);
}
.recommendation-tile__title {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  margin: 0;
}
.recommendation-tile__subtitle {
  margin: 0;
  color: var(--clr-text-muted);
}
.recommendation-tile__action {
  margin-top: var(--space-xs);
  font-size: 0.9rem;
  color: var(--clr-primary);
  text-decoration: none;
  justify-self: start;
}

.recommendation-hub__carousel.carousel-wrapper {
  width: 100%;
  margin: 0;
  border-radius: var(--radius-card);
  height: clamp(220px, 25vw, 320px);
  box-shadow: none;
}
.recommendation-hub__carousel .carousel {
  border-radius: inherit;
}
.recommendation-hub__carousel .carousel-slide {
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: block;
}
.recommendation-hub__carousel .carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-base);
}
.recommendation-hub__carousel .carousel-slide:hover img {
  transform: scale(1.02);
}
.recommendation-carousel__overlay {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: var(--space-2xs);
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  color: #fff;
  background: linear-gradient(180deg, rgba(4, 9, 20, 0) 0%, rgba(4, 9, 20, 0.85) 85%);
}
.recommendation-carousel__tag {
  align-self: start;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 999px;
}
.recommendation-carousel__headline {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
}
.recommendation-carousel__description {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.recommendation-hub__carousel .carousel-prev,
.recommendation-hub__carousel .carousel-next {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.45);
}
.recommendation-hub__carousel .carousel-indicators {
  bottom: var(--space-sm);
}

.recommendation-news {
  display: flex;
  gap: var(--space-md);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.recommendation-news--featured {
  min-height: 160px;
}
.recommendation-news:hover,
.recommendation-news:focus-visible {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.recommendation-news__thumb {
  width: clamp(160px, 22vw, 220px);
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--clr-border);
}
.recommendation-news__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
}
.recommendation-news__category {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.recommendation-news__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recommendation-news__summary {
  color: var(--clr-text-muted);
  line-height: 1.6;
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recommendation-news__meta {
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}
.recommendation-news__empty {
  margin: 0;
  color: var(--clr-text-muted);
}
.recommendation-news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.recommendation-news-list__item {
  display: contents;
}
.recommendation-news-top {
  margin-bottom: 20px;
}
.recommendation-news--stacked {
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}
.recommendation-news--stacked .recommendation-news__content {
  padding: var(--space-sm) var(--space-sm) 0;
  gap: var(--space-2xs);
}
.recommendation-news--stacked .recommendation-news__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  align-self: stretch;
  border-top: 1px solid var(--clr-border);
}
.recommendation-news--stacked .recommendation-news__meta {
  margin-top: 0;
}

.recommendation-shortcuts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.recommendation-shortcuts__item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.recommendation-shortcuts__item:hover,
.recommendation-shortcuts__item:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.recommendation-shortcuts__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.7);
}
.recommendation-shortcuts__body {
  display: grid;
  gap: 2px;
}
.recommendation-shortcuts__label {
  font-weight: 600;
}
.recommendation-shortcuts__description {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
}
.recommendation-shortcuts__item--tone-primary {
  background: rgba(33, 150, 243, 0.08);
  border-color: rgba(33, 150, 243, 0.16);
}
.recommendation-shortcuts__item--tone-indigo {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.18);
}
.recommendation-shortcuts__item--tone-emerald {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.18);
}
.recommendation-shortcuts__item--tone-primary .recommendation-shortcuts__icon {
  color: rgba(33, 150, 243, 0.85);
}
.recommendation-shortcuts__item--tone-indigo .recommendation-shortcuts__icon {
  color: rgba(79, 70, 229, 0.85);
}
.recommendation-shortcuts__item--tone-emerald .recommendation-shortcuts__icon {
  color: rgba(16, 185, 129, 0.85);
}

@media (max-width: 1080px) {
  .recommendation-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recommendation-tile--carousel {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .recommendation-hub {
    padding: 0 var(--space-md);
  }
  .recommendation-hub__grid {
    grid-template-columns: 1fr;
  }
  .recommendation-news {
    flex-direction: column;
  }
  .recommendation-news__thumb {
    width: 100%;
    height: clamp(160px, 48vw, 220px);
  }
  .recommendation-shortcuts__item {
    flex-direction: row;
  }
}

/* ===== News Category Buttons ===== */
.news-category-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  flex-wrap: wrap;
}

.news-category-buttons .category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--clr-text);
  min-width: 120px;
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.news-category-buttons .icon-wrapper {
  width: clamp(60px, 16vw, 76px);
  height: clamp(60px, 16vw, 76px);
  border-radius: 50%;
  background: var(--clr-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  font-size: clamp(1.1rem, 4vw, 1.75rem);
  box-shadow: var(--shadow-border);
}
.news-category-buttons .category-btn span {
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  text-align: center;
  line-height: 1.3;
}

.news-category-buttons .category-btn:hover,
.news-category-buttons .category-btn:focus-visible {
  border-color: var(--clr-border-strong);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .news-category-buttons { gap: var(--space-xs); }
}

/* ===== Listing Controls ===== */
.list-controls {
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:center;
}
.list-controls select { padding:6px 8px; }

/* ===== Skeleton Loading ===== */
.card.skeleton {
  background: linear-gradient(90deg, #eee 25%, #ddd 37%, #eee 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  height:250px;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ===== Favorites carousel ===== */
.favorites-section { max-width:1200px; margin:0 auto 20px; }
.favorites-wrapper {
  position:relative;
  overflow:hidden;
}
.favorites-container {
  display:inline-flex;
  gap:16px;
  padding:0 42px 10px;
  transition:transform .3s ease;
}
.favorites-container .card {
  width:auto;
  flex:0 0 auto;
}
.favorites-container::-webkit-scrollbar { display:none; }

/* ===== Search / Listing list page ===== */
.user-actions { display:flex; justify-content:flex-end; gap:10px; margin-bottom:20px; }
.btn-hero-action { background:#fff; color:var(--clr-text) !important; border:none; border-radius:var(--radius-pill); padding:8px 18px; font-size:0.88rem; font-weight:var(--font-weight-medium); box-shadow:0 1px 4px rgba(0,0,0,0.12); transition:background var(--transition-base), box-shadow var(--transition-base); }
.btn-hero-action:hover { background:#f1f5f9; box-shadow:0 2px 8px rgba(0,0,0,0.18); }

.filter-section { background:var(--clr-surface-subtle); padding:20px; border-radius:12px; margin-bottom:30px; }
.filter-section__title { margin:0; font-size:1em; color:var(--clr-text-muted); display:flex; align-items:center; gap:8px; }
.filter-section__title i { color:var(--clr-service-used); }
.filter-section__toggle { display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; cursor:pointer; padding:0; color:inherit; }
.filter-section__arrow { font-size:0.8em; color:var(--clr-text-subtle); transition:transform 0.3s; }
.filter-section--collapsible .filter-section__body { max-height:0; overflow:hidden; opacity:0; transition:max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease; margin-top:0; }
.filter-section--collapsible.is-open .filter-section__body { max-height:600px; opacity:1; margin-top:16px; }
.filter-section--collapsible.is-open .filter-section__arrow { transform:rotate(180deg); }

.region-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.region-chip { display:inline-flex; align-items:center; padding:8px 16px; background:#fff; border:1px solid #e2e8f0; border-radius:20px; font-size:0.9em; color:#333; text-decoration:none; transition:all 0.2s; }
.region-chip:hover { background:#eff6ff; border-color:#2563eb; }
.region-chip.active { background:#2563eb; border-color:#2563eb; color:#fff; }
.region-chip i { margin-right:6px; }

.detail-filter-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; align-items:end; }
.filter-group { min-width:0; }
.filter-group label { display:block; margin-bottom:6px; font-size:0.85em; font-weight:600; color:#374151; }
.filter-group select, .filter-group input[type="number"], .filter-group input[type="text"] { width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:0.95em; background:#fff; box-sizing:border-box; }
.filter-group select:focus, .filter-group input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.filter-range { display:flex; align-items:center; gap:6px; }
.filter-range input { flex:1; min-width:60px; }
.filter-range span { color:var(--clr-text-subtle); flex-shrink:0; }
.filter-checkbox-group { display:flex; gap:16px; flex-wrap:wrap; padding:10px 0; }
.filter-checkbox-group label { display:flex; align-items:center; gap:6px; font-weight:normal; cursor:pointer; white-space:nowrap; }
.filter-buttons { display:flex; gap:10px; grid-column:1/-1; justify-content:flex-start; margin-top:8px; padding-top:16px; border-top:1px solid #e5e7eb; }
.btn-search { display:inline-flex; align-items:center; gap:6px; background:#2563eb; color:#fff; border:none; padding:10px 24px; border-radius:8px; font-size:0.95em; cursor:pointer; transition:background 0.2s; }
.btn-search:hover { background:#1d4ed8; }
.btn-reset { display:inline-flex; align-items:center; gap:6px; background:#fff; color:#666; border:1px solid #d1d5db; padding:10px 24px; border-radius:8px; font-size:0.95em; text-decoration:none; transition:all 0.2s; }
.btn-reset:hover { background:#f3f4f6; border-color:#9ca3af; }
.filter-group--options { grid-column:1/-1; }
.filter-group--options .filter-checkbox-group { background:#f9fafb; padding:12px 16px; border-radius:8px; border:1px solid #e5e7eb; }

.quick-filter-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; padding:12px 16px; background:#eff6ff; border-radius:8px; }
.quick-filter-title { font-size:0.85em; color:#1d4ed8; margin-right:8px; }
.quick-filter-tag { background:#2563eb; color:#fff; padding:4px 10px; border-radius:12px; font-size:0.8em; }

.results-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:20px; }
.results-info { color:#666; font-size:0.95em; }
.sort-form { display:flex; align-items:center; gap:10px; }
.sort-form label { font-size:0.9em; color:#666; }
.sort-form select { padding:8px 12px; border:1px solid #d1d5db; border-radius:6px; font-size:0.9em; background:#fff; }
.sort-form button { padding:8px 18px; background:transparent; border:1.5px solid var(--clr-primary,#2563eb); color:var(--clr-primary,#2563eb); border-radius:6px; font-size:0.9em; font-weight:600; cursor:pointer; transition:background 0.15s, color 0.15s; }
.sort-form button:hover { background:rgba(37,99,235,0.08); }
.sort-form button.is-applied { background:var(--clr-primary,#2563eb); color:#fff; }
.sort-form button.is-applied:hover { background:#1d4ed8; }

.back-link { display:inline-flex; align-items:center; gap:6px; margin-top:30px; color:#666; text-decoration:none; font-size:0.95em; }
.back-link:hover { color:#2563eb; }

@media (max-width:768px) {
  .filter-section { padding:15px; }
  .detail-filter-form { grid-template-columns:1fr; }
  .filter-group { width:100%; }
  .filter-buttons { flex-direction:column; }
  .filter-buttons .btn-search, .filter-buttons .btn-reset { width:100%; justify-content:center; }
  .filter-group--options .filter-checkbox-group { flex-direction:column; gap:10px; }
  .results-header { flex-direction:column; align-items:flex-start; }
  .sort-form { width:100%; flex-wrap:wrap; }
  .region-chips { flex-direction:column; }
  .region-chip { justify-content:center; }
}

/* ===== Listing detail redesign ===== */
.listing-detail-page { display:flex; flex-direction:column; gap: var(--space-lg); }
.listing-back .back-link { display:inline-flex; align-items:center; gap:6px; font-size:0.95rem; color: var(--clr-primary); }
.listing-images-section { border-radius:var(--radius-card); overflow:hidden; }
.page-hero .listing-deadline--hero { color:#fff; font-size:0.95rem; margin:8px 0 0; }
.page-hero .listing-deadline--hero .deadline-countdown { margin-left:6px; }
.listing-slider { position:relative; overflow:hidden; border-radius:var(--radius-card); background:var(--clr-surface-muted); }
.listing-slider--empty { display:flex; align-items:center; justify-content:center; min-height:240px; color:var(--clr-text-subtle); font-size:0.95rem; }
.listing-slider-track { display:flex; transition:transform .3s ease; touch-action:pan-y; }
.listing-slide { min-width:100%; display:flex; align-items:center; justify-content:center; background:#000; }
.listing-slide img { width:100%; height:100%; max-height:360px; object-fit:cover; }
.slider-control { position:absolute; top:50%; transform:translateY(-50%); background:rgba(15,23,42,0.55); color:#fff; border:none; width:40px; height:40px; border-radius:var(--radius-pill); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.slider-control--prev { left:12px; }
.slider-control--next { right:12px; }
.slider-control:hover { background:rgba(15,23,42,0.7); }
.slider-indicator { position:absolute; bottom:12px; right:12px; background:rgba(15,23,42,0.75); color:#fff; padding:4px 10px; border-radius:var(--radius-pill); font-size:0.8rem; }
.listing-status-badge { align-self:flex-start; padding:6px 12px; border-radius:var(--radius-pill); font-size:0.8rem; font-weight:var(--font-weight-medium); color:var(--clr-text); background:var(--clr-primary-soft); border:1px solid rgba(37,99,235,0.2); }
.listing-status-badge.is-open { background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.24); color:#15803d; }
.listing-status-badge.is-interest { background:rgba(14,165,233,0.14); border-color:rgba(14,165,233,0.24); color:#0369a1; }
.listing-status-badge.is-pending { background:rgba(148,163,184,0.16); border-color:rgba(148,163,184,0.28); color:#475569; }
.listing-status-badge.is-paused { background:var(--clr-accent-soft); border-color:rgba(249,115,22,0.24); color:var(--clr-accent); }
.listing-status-badge.is-closed { background:rgba(71,85,105,0.16); border-color:rgba(71,85,105,0.28); color:#1f2937; }
.listing-status-badge.is-awarded { background:rgba(139,92,246,0.16); border-color:rgba(139,92,246,0.28); color:#6d28d9; }
.listing-deadline { font-size:0.95rem; color:var(--clr-text-muted); }

.listing-highlights { display:grid; gap:var(--space-sm); }
.highlight-card { background:var(--clr-surface); padding:var(--space-sm); border-radius:var(--radius-card); box-shadow:var(--shadow-border); border:1px solid var(--clr-border); display:flex; flex-direction:column; gap:4px; }
.highlight-card h2 { margin:0; font-size:1rem; }
.highlight-value { font-size:1.4rem; font-weight:var(--font-weight-bold); color:var(--clr-text); }
.highlight-sub { font-size:0.85rem; color:var(--clr-text-subtle); }

/* 投資シミュレーション */
.invest-sim {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.invest-sim__title {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
}
.invest-sim__title i { margin-right: 6px; color: #2563eb; }
.invest-sim__note {
  margin: 0 0 16px;
  font-size: 0.82rem;
  color: var(--clr-text-muted);
}
.invest-sim__input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.invest-sim__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  display: block;
  margin-bottom: 4px;
}
.invest-sim__input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.invest-sim__input {
  width: 140px;
  height: 42px;
  padding: 0 12px;
  border: 2px solid var(--clr-border);
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  color: var(--clr-text);
  background: var(--clr-bg);
}
.invest-sim__input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  outline: none;
}
.invest-sim__unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}
.invest-sim__tag {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 600;
}
.invest-sim__tag--land {
  background: #dcfce7;
  color: #166534;
}
.invest-sim__hint {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
}

/* KPIカード */
.invest-sim__kpi {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.invest-kpi-card {
  text-align: center;
  padding: 14px 8px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.invest-kpi-card__num {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.2;
}
.invest-kpi-card__label {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 4px;
  display: block;
}

/* 回収バー */
.invest-sim__bar-wrap { margin-bottom: 12px; }
.invest-sim__bar {
  height: 28px;
  background: #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.invest-sim__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  border-radius: 14px 0 0 14px;
  transition: width 0.4s ease;
}
.invest-sim__bar-label {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  margin-top: 6px;
}
.invest-sim__bar-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 4px;
}
.invest-sim__bar-legend span { display: flex; align-items: center; gap: 4px; }

/* 回収判定メッセージ */
.invest-sim__verdict {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.invest-sim__verdict i { margin-right: 6px; }
.invest-sim__verdict--ok {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}
.invest-sim__verdict--warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.invest-sim__verdict--ng {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* FIT残余カード */
.invest-kpi-card--remain .invest-kpi-card__num { color: #d97706; }

.invest-sim__disclaimer {
  margin: 0;
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.5;
}
.invest-sim__disclaimer i { margin-right: 4px; }

@media (max-width: 768px) {
  .invest-sim__kpi { grid-template-columns: repeat(2, 1fr); }
  .invest-sim__kpi .invest-kpi-card:last-child { grid-column: 1 / -1; }
  .invest-sim__input { width: 120px; }
}
@media (prefers-color-scheme: dark) {
  .invest-kpi-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
  .invest-sim__tag { background: rgba(255,255,255,0.06); color: #94a3b8; }
  .invest-sim__tag--land { background: rgba(22,163,74,0.15); color: #4ade80; }
  .invest-sim__bar { background: rgba(255,255,255,0.1); }
  .invest-sim__verdict--ok { background: rgba(22,163,74,0.1); border-color: rgba(134,239,172,0.3); color: #4ade80; }
  .invest-sim__verdict--warn { background: rgba(217,119,6,0.1); border-color: rgba(253,211,77,0.3); color: #fbbf24; }
  .invest-sim__verdict--ng { background: rgba(239,68,68,0.1); border-color: rgba(254,202,202,0.3); color: #fca5a5; }
}

.listing-layout { display:flex; flex-direction:column; gap:var(--space-lg); }
.listing-main { display:flex; flex-direction:column; gap:var(--space-md); }
.listing-accordion { border:1px solid var(--clr-border); border-radius:var(--radius-card); background:var(--clr-surface); overflow:hidden; box-shadow:var(--shadow-border); transition: box-shadow var(--transition-base), border-color var(--transition-base); }
.listing-accordion summary { cursor:pointer; list-style:none; font-weight:var(--font-weight-medium); padding:var(--space-sm) var(--space-md); position:relative; display:flex; align-items:center; gap:var(--space-xs); }
.listing-accordion summary::-webkit-details-marker { display:none; }
.listing-accordion summary .accordion-icon { color:var(--clr-primary); font-size:0.8rem; transition:transform var(--transition-base); }
.listing-accordion[open] { border-color: var(--clr-border-strong); box-shadow: var(--shadow-soft); }
.listing-accordion[open] summary .accordion-icon { transform:rotate(180deg); }
.listing-accordion[open] summary { border-bottom:1px solid var(--clr-border); }
.listing-accordion .accordion-body { padding:var(--space-sm) var(--space-md); font-size:0.95rem; color:var(--clr-text); background:var(--clr-surface-subtle); }
.listing-description { white-space:pre-line; line-height:1.6; }
.listing-table { width:100%; border-collapse:collapse; font-size:0.95rem; }
.listing-table th,
.listing-table td { border:1px solid var(--clr-border); padding:10px 14px; text-align:left; }
.listing-table th { width:160px; background:var(--clr-surface-muted); color:var(--clr-text-muted); }

.listing-aside { display:flex; flex-direction:column; gap:var(--space-md); }
.cta-card { background:var(--clr-surface); border-radius:var(--radius-card); padding:var(--space-md); box-shadow:var(--shadow-border); border:1px solid var(--clr-border); position:static; top:96px; display:flex; flex-direction:column; gap:var(--space-sm); }
.cta-status { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); font-weight:var(--font-weight-medium); color:var(--clr-text); }
.status-info { background:none; border:none; color:var(--clr-text-muted); cursor:pointer; display:flex; align-items:center; gap:4px; }
.cta-note { font-size:0.9rem; color:var(--clr-text-muted); margin:0; }
.cta-note.success { color:#15803d; font-weight:var(--font-weight-medium); }
.cta-form { display:flex; flex-direction:column; gap:var(--space-xs); margin-top:4px; }
.cta-label { display:flex; flex-direction:column; gap:6px; font-size:0.9rem; color:var(--clr-text); }
.cta-feedback { font-size:0.85rem; color:var(--clr-primary); margin:0; }
.cta-feedback.error { color:#dc2626; }
.cta-deadline { display:flex; align-items:flex-start; gap:10px; background:var(--clr-primary-soft); border:1px solid rgba(37,99,235,0.15); border-radius:var(--radius-card); padding:10px 14px; font-size:0.88rem; color:var(--clr-text); }
.cta-deadline i { color:var(--clr-primary); margin-top:2px; }
.cta-deadline__date { display:block; font-weight:var(--font-weight-medium); }
.cta-deadline__remain { display:block; font-size:0.82rem; font-weight:var(--font-weight-bold); color:var(--clr-primary); margin-top:2px; }
.cta-my-bid { background:var(--clr-surface-muted); border-radius:var(--radius-card); padding:12px 14px; display:flex; align-items:center; justify-content:space-between; }
.cta-my-bid__label { font-size:0.85rem; color:var(--clr-text-muted); }
.cta-my-bid__amount { font-size:1.15rem; font-weight:var(--font-weight-bold); color:var(--clr-text); }

/* 手数料注記 */
.cta-fee-notice {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--clr-text-muted);
}
.cta-fee-notice i { color: #3b82f6; margin-right: 4px; }
.cta-fee-notice a { color: #2563eb; font-weight: 600; margin-left: 2px; }
.bid-fee-info {
  margin-top: 12px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #1e40af;
}
.bid-fee-info i { margin-right: 6px; }
@media (prefers-color-scheme: dark) {
  .bid-fee-info { background: rgba(37,99,235,0.1); border-color: rgba(59,130,246,0.25); color: #93c5fd; }
}

.cta-phase { background:var(--clr-surface-alt, #f3f4f6); border-radius:var(--radius-sm); padding:var(--space-sm) var(--space-md); margin-bottom:var(--space-xs); }
.cta-phase__label { font-weight:var(--font-weight-bold); font-size:0.95rem; color:var(--clr-text); display:block; margin-bottom:4px; }
.cta-phase__note { font-size:0.85rem; color:var(--clr-text-muted); margin:0; line-height:1.5; }

/* ===== 取引進捗ステップバー ===== */
.trade-progress { background:var(--clr-surface); border-radius:var(--radius-card); padding:var(--space-md); border:1px solid var(--clr-border); transition:border-color 0.2s, box-shadow 0.2s; }
a.trade-progress:hover { border-color:var(--clr-primary); box-shadow:0 2px 12px rgba(37,99,235,0.12); }
.trade-progress__bar { display:flex; align-items:flex-start; justify-content:space-between; position:relative; padding:0 4px; }
.trade-progress__bar::before { content:''; position:absolute; top:16px; left:24px; right:24px; height:2px; background:var(--clr-border); z-index:0; }
.trade-step { display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; z-index:1; flex:1; min-width:0; }
.trade-step__circle { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; border:2px solid var(--clr-border); background:var(--clr-surface); color:var(--clr-text-muted); transition:all 0.2s; }
.trade-step__label { font-size:0.7rem; color:var(--clr-text-muted); text-align:center; line-height:1.3; white-space:nowrap; }
.trade-step--completed .trade-step__circle { background:#166534; border-color:#166534; color:#fff; }
.trade-step--completed .trade-step__label { color:var(--clr-text); font-weight:600; }
.trade-step--active .trade-step__circle { background:#2563eb; border-color:#2563eb; color:#fff; animation:pulse-step 2s infinite; }
.trade-step--active .trade-step__label { color:#2563eb; font-weight:700; }
@keyframes pulse-step { 0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0.3)} 50%{box-shadow:0 0 0 6px rgba(37,99,235,0)} }
.trade-step--upcoming .trade-step__circle { background:var(--clr-surface); border-color:var(--clr-border); color:var(--clr-text-muted); }
.trade-step--canceled .trade-step__circle { background:#991b1b; border-color:#991b1b; color:#fff; }
.trade-step--canceled .trade-step__label { color:#991b1b; }
.trade-progress--canceled { border-color:#fca5a5; }
.trade-progress__action { display:flex; align-items:flex-start; gap:8px; margin-top:var(--space-sm); padding:var(--space-sm) var(--space-md); background:var(--clr-surface-alt,#f3f4f6); border-radius:var(--radius-sm); font-size:0.85rem; color:var(--clr-text); line-height:1.5; }
.trade-progress__action i { color:#2563eb; flex-shrink:0; }
.trade-progress--canceled .trade-progress__action i { color:#991b1b; }
/* コンパクト表示（モバイル用） */
.trade-progress__compact { display:none; }
.trade-progress__full { display:block; }
.trade-progress__action-link { margin-left:auto; color:var(--clr-primary); font-weight:600; font-size:0.82rem; white-space:nowrap; }

/* コンパクト: プログレスバー + テキスト縦積み */
.tp-c__bar-wrap { height:4px; border-radius:2px; background:var(--clr-border); overflow:hidden; }
.tp-c__bar-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,#166534,#2563eb); transition:width 0.3s; }
.tp-c__bar-fill--canceled { background:#991b1b; }
.tp-c__body { margin-top:10px; }
.tp-c__step-row { display:flex; align-items:center; gap:8px; }
.tp-c__step-name { font-size:0.92rem; font-weight:700; color:var(--clr-text); }
.tp-c__step-name i { color:#2563eb; margin-right:4px; }
.tp-c__step-name--canceled { color:#ef4444; }
.tp-c__step-name--canceled i { color:#ef4444; }
.tp-c__step-num { font-size:0.75rem; color:var(--clr-text-muted); background:var(--clr-surface-subtle,#f1f5f9); padding:2px 8px; border-radius:10px; font-weight:600; }
.tp-c__arrow { margin-left:auto; color:var(--clr-text-subtle); font-size:0.75rem; }
.tp-c__action { margin:6px 0 0; font-size:0.82rem; color:var(--clr-text-muted); line-height:1.5; }

@media(max-width:640px) {
  .trade-progress__compact { display:block; }
  .trade-progress__full { display:none; }
  a.trade-progress { padding:var(--space-sm) var(--space-md); }
}
@media(min-width:641px) {
  .trade-step__label { font-size:0.7rem; }
  .trade-step__circle { width:32px; height:32px; }
}
/* ダークモード対応 */
@media(prefers-color-scheme:dark) {
  .trade-progress { background:var(--clr-surface); border-color:var(--clr-border); }
  .trade-step__label { color:var(--clr-text-subtle); }
  .trade-step__circle { background:var(--clr-surface); border-color:var(--clr-border); color:var(--clr-text-subtle); }
  .trade-step--completed .trade-step__circle { background:#166534; border-color:#166534; color:#fff; }
  .trade-step--completed .trade-step__label { color:#6ee7b7; }
  .trade-step--active .trade-step__circle { background:#3b82f6; border-color:#3b82f6; color:#fff; }
  .trade-step--active .trade-step__label { color:#93c5fd; }
  .trade-step--upcoming .trade-step__label { color:var(--clr-text-subtle); }
  .trade-progress__action { background:rgba(30,58,95,0.5); color:var(--clr-text); }
  .trade-progress__action i { color:#60a5fa; }
  .trade-progress--canceled .trade-progress__action i { color:#f87171; }
  .trade-progress__bar::before { background:var(--clr-border); }
  .trade-card { background:var(--clr-surface); border-color:var(--clr-border); }
  .trade-card__equip a { color:var(--clr-text); }
  .trade-card__equip a:hover { color:#93c5fd; }
  .trade-card__role--buyer { background:rgba(59,130,246,0.2); color:#93c5fd; }
  .trade-card__role--seller { background:rgba(22,101,52,0.3); color:#6ee7b7; }
  .trade-card__actions { background:rgba(146,64,14,0.15); border-color:rgba(252,211,77,0.3); }
  .trade-card__payment-label { color:#fcd34d; }
  .trade-card__payment-deadline { color:#fbbf24; }
  .trade-card__other-status { background:var(--clr-surface-subtle); color:var(--clr-text-muted); }
  .trade-timeline__label { color:var(--clr-text); }
  .trade-timeline__detail { color:var(--clr-text-muted); }
  /* コンパクト表示 */
  .tp-c__bar-wrap { background:rgba(148,163,184,0.25); }
  .tp-c__step-name { color:var(--clr-text); }
  .tp-c__step-name i { color:#60a5fa; }
  .tp-c__step-num { background:rgba(148,163,184,0.2); color:var(--clr-text-muted); }
  .tp-c__arrow { color:var(--clr-text-subtle); }
  .tp-c__action { color:var(--clr-text-muted); }
  .trade-progress__action-link { color:#60a5fa; }
  /* 設備詳細ステータスバッジ */
  .listing-status-badge.is-open { background:rgba(34,197,94,0.2); border-color:rgba(34,197,94,0.35); color:#6ee7b7; }
  .listing-status-badge.is-interest { background:rgba(14,165,233,0.2); border-color:rgba(14,165,233,0.35); color:#7dd3fc; }
  .listing-status-badge.is-pending { background:rgba(148,163,184,0.2); border-color:rgba(148,163,184,0.35); color:#cbd5e1; }
  .listing-status-badge.is-closed { background:rgba(100,116,139,0.2); border-color:rgba(100,116,139,0.35); color:#94a3b8; }
  .listing-status-badge.is-awarded { background:rgba(139,92,246,0.2); border-color:rgba(139,92,246,0.35); color:#c4b5fd; }
  /* CTA フェーズボックス */
  .cta-phase { background:rgba(30,58,95,0.5); }
  .cta-phase__label { color:var(--clr-text); }
  .cta-phase__note { color:var(--clr-text-muted); }
  .cta-note.success { color:#6ee7b7; }
}

/* ===== 取引カード（マイページ） ===== */
.trade-card { background:var(--clr-surface); border-radius:var(--radius-card); padding:var(--space-md); border:1px solid var(--clr-border); box-shadow:var(--shadow-border); }
.trade-card + .trade-card { margin-top:var(--space-md); }
.trade-card__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-sm); }
.trade-card__equip { font-weight:var(--font-weight-bold); font-size:0.95rem; }
.trade-card__role { font-size:0.75rem; padding:2px 8px; border-radius:10px; font-weight:600; white-space:nowrap; flex-shrink:0; }
.trade-card__role--buyer { background:#dbeafe; color:#1d4ed8; }
.trade-card__role--seller { background:#dcfce7; color:#166534; }
.trade-card__meta { display:flex; gap:var(--space-md); font-size:0.82rem; color:var(--clr-text-muted); margin-bottom:var(--space-sm); flex-wrap:wrap; }

/* 入金報告・アクションエリア */
.trade-card__actions {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.trade-card__payment-info { flex: 1; min-width: 200px; }
.trade-card__payment-label { margin: 0; font-size: 0.88rem; color: #92400e; }
.trade-card__payment-deadline { margin: 4px 0 0; font-size: 0.82rem; color: #b45309; }
.trade-card__report-btn { white-space: nowrap; }
.trade-card__other-status {
  margin-top: var(--space-xs);
  padding: 6px var(--space-md);
  font-size: 0.82rem;
  color: var(--clr-text-muted);
  background: var(--clr-bg);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.trade-card__other-label { font-weight: 600; }

/* 取引タイムライン */
.trade-card__timeline-toggle {
  margin-top: var(--space-sm);
  font-size: 0.82rem;
}
.trade-card__timeline-toggle summary {
  cursor: pointer;
  color: var(--clr-text-muted);
  padding: 6px 0;
  user-select: none;
}
.trade-card__timeline-toggle summary:hover { color: var(--clr-text); }
.trade-timeline { padding: var(--space-sm) 0 0 8px; }
.trade-timeline__item {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  position: relative;
}
.trade-timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--clr-border);
}
.trade-timeline__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 0.6rem;
}
.trade-timeline__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trade-timeline__label { font-weight: 600; font-size: 0.85rem; color: var(--clr-text); }
.trade-timeline__detail { font-size: 0.8rem; color: var(--clr-text-muted); }
.trade-timeline__time { font-size: 0.75rem; color: #9ca3af; }

@media (max-width: 640px) {
  .trade-card__actions { flex-direction: column; align-items: stretch; }
}

.side-card { background:var(--clr-surface); border-radius:var(--radius-card); padding:var(--space-md); box-shadow:var(--shadow-border); border:1px solid var(--clr-border); display:flex; flex-direction:column; gap:var(--space-xs); }
.side-card h3 { margin:0; font-size:1rem; }
.side-stats { display:flex; flex-direction:column; gap:6px; font-size:0.9rem; }
.side-stats div { display:flex; justify-content:space-between; }
.side-stats dt { color:var(--clr-text-subtle); }
.side-stats dd { margin:0; font-weight:var(--font-weight-medium); color:var(--clr-text); }
.side-owner { font-weight:var(--font-weight-medium); }
.side-note { font-size:0.8rem; color:var(--clr-text-subtle); margin:0; }

.listing-back-bottom { text-align:center; font-size:0.9rem; }

/* ===== モバイルタブバー ===== */
.mobile-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
  z-index: 999;
  display: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-tab-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.mobile-tab-bar__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 4px 6px;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mobile-tab-bar__link:hover {
  color: var(--clr-primary);
  text-decoration: none;
}

.mobile-tab-bar__link--active {
  color: var(--clr-primary);
}

.mobile-tab-bar__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-tab-bar__label {
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-tab-bar {
    display: block;
  }
}

@media (min-width: 768px) {
  .listing-highlights { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .listing-layout { flex-direction:row; align-items:flex-start; }
  .listing-main { flex:2; }
  .listing-aside { flex:1; position:relative; }
  .cta-card { top:120px; }
}

@media (max-width: 767px) {
  .slider-control { display:none; }
  .listing-slide img { max-height:240px; }
  .listing-status-badge { font-size:0.75rem; }
}

/* ===== マイページ新レイアウト（2カラム） ===== */
.mypage-layout {
  display: flex;
  gap: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-md);
}

/* サイドメニュー */
.mypage-sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: sticky;
  top: 100px;
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.sidebar-section {
  background: var(--clr-surface);
  border-radius: var(--radius-card);
  padding: var(--space-sm);
  box-shadow: var(--shadow-border);
  border: 1px solid var(--clr-border);
}

.sidebar-section h3 {
  margin: 0 0 var(--space-xs);
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* サイドメニュー - 主要アクション */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  font-weight: var(--font-weight-regular);
  font-size: 0.9rem;
  transition: background var(--transition-base), color var(--transition-base);
}

.sidebar-nav a:hover {
  background: var(--clr-primary-soft);
  color: var(--clr-primary);
}

.sidebar-nav a i {
  width: 20px;
  text-align: center;
  color: var(--clr-text-muted);
  font-size: 1rem;
}

.sidebar-nav a:hover i {
  color: var(--clr-primary);
}

/* サイドバー iPhone風アイコン */
.sidebar-nav--icons {
  gap: 2px;
}

.sidebar-nav--icons .sidebar-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  font-weight: var(--font-weight-medium);
  font-size: 0.88rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.sidebar-nav--icons .sidebar-nav__item:hover {
  background: var(--clr-bg-alt);
}

.sidebar-nav__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
  transition: box-shadow 0.2s ease;
}

.sidebar-nav__item:hover .sidebar-nav__icon {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* サイドバー カラーバリエーション */
.sidebar-nav__item--blue .sidebar-nav__icon   { background: var(--clr-service-used); }
.sidebar-nav__item--sky .sidebar-nav__icon    { background: #0ea5e9; }
.sidebar-nav__item--amber .sidebar-nav__icon  { background: #d97706; }
.sidebar-nav__item--teal .sidebar-nav__icon   { background: var(--clr-service-joint); }
.sidebar-nav__item--indigo .sidebar-nav__icon { background: var(--clr-service-partner); }
.sidebar-nav__item--gray .sidebar-nav__icon   { background: #64748b; }

/* サイドメニュー - 最近のアクティビティ */
.activity-list--compact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-list--compact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--clr-text);
  line-height: 1.4;
}

.activity-list--compact .activity-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.activity-list--compact time {
  display: block;
  font-size: 0.75rem;
  color: var(--clr-text-subtle);
  margin-top: 2px;
}

/* サイドメニュー - 統計 */
.sidebar-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.stat-row span:first-child {
  color: var(--clr-text-muted);
}

.stat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
}

.stat-badge--warning {
  background: rgba(251, 191, 36, 0.15);
  color: #b45309;
}

.stat-badge--info {
  background: var(--clr-primary-soft);
  color: var(--clr-primary);
}

/* メインエリア */
.mypage-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* セクション共通 */
.mypage-section {
  background: var(--clr-surface);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  box-shadow: var(--shadow-border);
  border: 1px solid var(--clr-border);
}

.mypage-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.mypage-section__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--clr-text);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.mypage-section__title i {
  color: var(--clr-primary);
}

.mypage-section__more {
  font-size: 0.85rem;
  color: var(--clr-primary);
}

/* サブタブ */
.sub-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--clr-border);
  padding-bottom: 2px;
}

.sub-tab {
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  color: var(--clr-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
  margin-bottom: -3px;
}

.sub-tab:hover {
  color: var(--clr-text);
}

.sub-tab.active {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
}

.sub-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: var(--clr-surface-muted);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
}

.sub-tab.active .sub-tab__count {
  background: var(--clr-primary-soft);
  color: var(--clr-primary);
}

/* タブコンテンツ */
.sub-tab-content {
  display: none;
}

.sub-tab-content.active {
  display: block;
}

/* コンパクトカード共通 */
.compact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm);
}

.compact-card {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-xs);
  background: var(--clr-surface-subtle);
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  max-width: 100%;
}

.compact-card:hover {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-soft);
}

.compact-card__img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--clr-surface-muted);
}

.compact-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compact-card__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-card__meta {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}

.compact-card__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: var(--font-weight-medium);
  align-self: flex-start;
}

.compact-card__badge--deadline {
  background: rgba(251, 191, 36, 0.15);
  color: #b45309;
}

.compact-card__badge--active {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.compact-card__badge--pending {
  background: var(--clr-primary-soft);
  color: var(--clr-primary);
}

/* 空状態 */
.empty-state {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  color: var(--clr-text-muted);
}

.empty-state i {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
  color: var(--clr-text-subtle);
}

.empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

/* 履歴リンク */
.history-link-section {
  text-align: center;
  padding: var(--space-md) 0;
}

/* ===== 締切間近ティッカー ===== */
.deadline-ticker {
  max-width: var(--max-w, 1200px);
  margin: 0 auto var(--space-md);
  padding: 0 var(--space-md);
}
.deadline-ticker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.deadline-ticker__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 6px;
}
.deadline-ticker__label--new {
  color: #2563eb;
}
.deadline-ticker__more {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  text-decoration: none;
}
.deadline-ticker__more:hover {
  color: var(--clr-primary);
}

/* マーキー基本スタイル（frontpage.css非読込ページ用） */
.deadline-ticker .partners-marquee {
  position: relative;
  overflow: hidden;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  padding: 12px 0;
  touch-action: pan-x;
}
.deadline-ticker .partners-marquee__track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 0 12px;
  will-change: transform;
}
.deadline-ticker .partners-marquee--static {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.deadline-ticker .partners-marquee--static .partners-marquee__track {
  padding-right: 24px;
}

/* ティッカーカード */
.ticker-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 128px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  background: var(--clr-bg);
  text-decoration: none;
  color: var(--clr-text);
  transition: box-shadow 0.2s, transform 0.15s;
  position: relative;
}
.ticker-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.ticker-card__img {
  width: 128px;
  height: 84px;
  object-fit: cover;
  display: block;
}
.ticker-card__deadline {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  line-height: 1.3;
}
.ticker-card__deadline--urgent {
  background: #dc2626;
  animation: ticker-pulse 1.5s ease-in-out infinite;
}
@keyframes ticker-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.ticker-card__info {
  display: flex;
  flex-direction: column;
  padding: 6px 8px 8px;
  gap: 2px;
}
.ticker-card__location {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-card__price {
  font-size: 0.68rem;
  color: var(--clr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-card__bids {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(37,99,235,0.85);
  color: #fff;
}

@media (max-width: 768px) {
  .deadline-ticker {
    padding: 0 var(--space-sm);
    margin-bottom: var(--space-sm);
  }
  .ticker-card {
    width: 110px;
  }
  .ticker-card__img {
    width: 110px;
    height: 72px;
  }
}

/* モバイル用クイックアクション - iPhone風 */
.mobile-quick-actions {
  display: none;
  justify-content: space-around;
  padding: 16px 4px 12px;
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px;
  color: #1e293b;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
  letter-spacing: 0.02em;
}

.quick-btn:hover {
  text-decoration: none;
}

.quick-btn:active {
  transform: scale(0.92);
}

.quick-btn__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  transition: box-shadow 0.2s ease;
}

.quick-btn:hover .quick-btn__icon {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* カラーバリエーション */
.quick-btn--blue .quick-btn__icon   { background: var(--clr-service-used); }
.quick-btn--sky .quick-btn__icon    { background: #0ea5e9; }
.quick-btn--amber .quick-btn__icon  { background: #d97706; }
.quick-btn--teal .quick-btn__icon   { background: var(--clr-service-joint); }
.quick-btn--indigo .quick-btn__icon { background: var(--clr-service-partner); }
.quick-btn--gray .quick-btn__icon   { background: #64748b; }

/* レスポンシブ */
@media (max-width: 1024px) {
  .mypage-sidebar {
    width: 220px;
  }
}

@media (max-width: 768px) {
  .mypage-layout {
    flex-direction: column;
    padding: 0;
  }

  .mypage-sidebar {
    display: none;
  }

  .mobile-quick-actions {
    display: flex;
  }

  .mypage-main {
    padding: var(--space-sm);
  }

  .compact-cards {
    grid-template-columns: 1fr;
  }

  .mypage-section {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* モバイル: quick-btnラベルを2行に */
  .quick-btn {
    font-size: 0.7rem;
    max-width: 60px;
    text-align: center;
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .quick-btn--indigo {
    font-size: 0.62rem;
  }
}

/* ===== ダークモード追加修正 ===== */
@media (prefers-color-scheme: dark) {

  /* --- 白文字にすべき要素 --- */

  /* マイページ quick-btn ラベル */
  .quick-btn { color: var(--clr-text); }

  /* 検索結果カウント・並び替え */
  .results-info { color: var(--clr-text-muted); }
  .sort-form label { color: var(--clr-text-muted); }
  .sort-form select {
    background: var(--clr-surface-subtle);
    color: var(--clr-text);
    border-color: var(--clr-border);
  }

  /* 共同購入 phase-chip（非アクティブ） */
  .phase-chip {
    background: var(--clr-surface-subtle);
    border-color: var(--clr-border);
    color: var(--clr-text);
  }
  .phase-chip:hover {
    background: var(--clr-surface-muted);
  }
  .phase-section__title { color: var(--clr-text); }

  /* ご利用ガイドボタン */
  .btn-hero-action {
    background: var(--clr-surface-subtle) !important;
    color: var(--clr-text) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }
  .btn-hero-action:hover {
    background: var(--clr-surface-muted) !important;
  }

  /* --- 黒文字（ライト背景）にすべき要素 --- */

  /* お問い合わせページ */
  .inquiry-hub__section {
    background: var(--clr-card-bg);
    border-color: var(--clr-card-border);
    color: var(--clr-text);
  }
  .inquiry-hub__section h2 { color: var(--clr-text); }
  .inquiry-hub__section p { color: var(--clr-text-muted); }
  .inquiry-hub__chip {
    background: var(--clr-surface-subtle);
    color: var(--clr-text);
  }
  .inquiry-hub__chip:hover {
    background: var(--clr-surface-muted);
    color: var(--clr-text);
  }
  .inquiry-history-table thead {
    background: var(--clr-card-bg-subtle);
    color: var(--clr-text);
  }
  .inquiry-history-table th,
  .inquiry-history-table td {
    border-color: var(--clr-table-border);
    color: var(--clr-text);
  }
  .inquiry-history-table tbody tr:hover {
    background: var(--clr-surface-subtle);
  }

  /* フッター copyright */
  footer { background: var(--clr-surface) !important; }

  /* おすすめタブ empty-hint */
  .empty-hint { color: var(--clr-text-muted); }
}

/* ===== メインタブ（マイページ トップレベル） ===== */
.main-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--clr-border);
  margin-bottom: 24px;
}
.main-tab {
  position: relative;
  padding: 10px 20px;
  border: none;
  background: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--clr-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}
.main-tab--active,
.main-tab:focus-visible {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
  outline: none;
}
.main-tab__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  letter-spacing: .03em;
}
.main-tab-pane { display: none; }
.main-tab-pane--active { display: block; }

/* おすすめページレイアウト */
.recommend-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.empty-hint {
  color: var(--clr-text-muted);
  font-size: 0.88rem;
  text-align: center;
  padding: 24px;
}

/* モバイル: タブをスクロール可能に */
@media (max-width: 480px) {
  .main-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-tab {
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 0.88rem;
  }
}

/* ===== アクセス解析ダッシュボード ===== */
.analytics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--clr-card-bg, #fff);
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--shadow-border);
}
.analytics-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.analytics-filter-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}
.analytics-filter-group select {
  padding: 6px 10px;
  border: 1px solid var(--clr-border, #ddd);
  border-radius: 8px;
  font-size: 0.88rem;
  background: var(--clr-surface, #fff);
  color: var(--clr-text);
}
.analytics-period-btns {
  display: flex;
  gap: 4px;
}
.analytics-period-btn {
  padding: 6px 14px;
  border: 1px solid var(--clr-border, #ddd);
  border-radius: 8px;
  background: var(--clr-surface, #fff);
  color: var(--clr-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.analytics-period-btn--active,
.analytics-period-btn:hover {
  background: var(--clr-primary, #2563eb);
  color: #fff;
  border-color: var(--clr-primary, #2563eb);
}
.analytics-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: #6b7280;
}
.analytics-type-badge--listing  { background: var(--clr-service-used, #2563eb); }
.analytics-type-badge--search   { background: #0ea5e9; }
.analytics-type-badge--joint,
.analytics-type-badge--joint_list { background: var(--clr-service-joint, #0f766e); }
.analytics-type-badge--partner  { background: var(--clr-service-partner, #4338ca); }
.analytics-type-badge--frontpage { background: #f59e0b; }
.analytics-type-badge--mypage   { background: #8b5cf6; }

@media (max-width: 640px) {
  .analytics-filters { flex-direction: column; align-items: stretch; }
}