/*
 * 会員画面のスタイル（Bootstrap 5.3.8 の上に重ねる）
 * 色は layouts/member の <style> で導入企業ごとの値（--au-brand・--au-accent）を流し込む。
 * 方針：商品写真と「現在価格・残り時間」を主役にし、それ以外は余白と細い線で静かに整える。
 */
:root {
    --au-ink: #1B1F24;
    --au-muted: #5F6670;
    --au-line: #E3E5E8;
    --au-canvas: #F5F6F7;
    --au-urgent: #B23A26;
    --au-serif: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    --au-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
    --bs-body-font-family: var(--au-sans);
    --bs-body-color: var(--au-ink);
    --bs-border-color: var(--au-line);
    --bs-secondary-color: var(--au-muted);
}

body { background: #fff; line-height: 1.75; display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
a { text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--au-brand); outline-offset: 2px; }

/* 見出しと商品名は明朝体 */
h1, h2, h3, .au-serif { font-family: var(--au-serif); font-weight: 600; letter-spacing: .02em; color: var(--au-ink); }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.4; }
h2 { font-size: 1.25rem; line-height: 1.5; }
.au-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ボタン：Bootstrap の primary を導入企業の基調色に */
.btn-primary {
    --bs-btn-bg: var(--au-brand); --bs-btn-border-color: var(--au-brand);
    --bs-btn-hover-bg: var(--au-brand-dark); --bs-btn-hover-border-color: var(--au-brand-dark);
    --bs-btn-active-bg: var(--au-brand-dark); --bs-btn-active-border-color: var(--au-brand-dark);
    --bs-btn-disabled-bg: var(--au-brand); --bs-btn-disabled-border-color: var(--au-brand);
    --bs-btn-focus-shadow-rgb: var(--au-brand-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--au-brand); --bs-btn-border-color: var(--au-brand);
    --bs-btn-hover-bg: var(--au-brand); --bs-btn-hover-border-color: var(--au-brand);
    --bs-btn-active-bg: var(--au-brand-dark); --bs-btn-active-border-color: var(--au-brand-dark);
    --bs-btn-focus-shadow-rgb: var(--au-brand-rgb);
}
.btn { border-radius: 4px; padding-inline: 1.25rem; }
.form-control, .form-select { border-radius: 4px; }
.form-control:focus, .form-select:focus { border-color: var(--au-brand); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-label { font-size: .875rem; color: var(--au-muted); margin-bottom: .25rem; }

/* ヘッダー：サイト名の下に差し色の細い線 */
.au-header { border-bottom: 1px solid var(--au-line); background: #fff; }
.au-brand { font-family: var(--au-serif); font-weight: 600; font-size: 1.25rem; color: var(--au-ink); text-decoration: none; letter-spacing: .04em; }
.au-brand img { max-height: 40px; width: auto; }
.au-brand-rule { height: 2px; background: var(--au-accent); }
.au-header .nav-link { color: var(--au-ink); font-size: .9375rem; }
.au-header .nav-link:hover, .au-header .nav-link.active { color: var(--au-brand); }

/* ページの見出し帯 */
.au-page-head { padding: 2rem 0 1.25rem; }
.au-page-head p { color: var(--au-muted); margin: .25rem 0 0; }

/* 絞り込み（カテゴリ・状態・並べ替え）は文字のタブ */
.au-tabs { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; border-bottom: 1px solid var(--au-line); margin-bottom: 1.5rem; }
.au-tabs a { padding: .5rem 0; color: var(--au-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .9375rem; }
.au-tabs a:hover { color: var(--au-ink); }
.au-tabs a.active { color: var(--au-ink); border-bottom-color: var(--au-brand); }

/* 商品カード：写真を主役に、枠や影は使わない */
.au-item { display: block; color: inherit; text-decoration: none; }
.au-item-photo { aspect-ratio: 4 / 3; background: var(--au-canvas); border-radius: 4px; overflow: hidden; }
.au-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.au-item:hover .au-item-photo img { transform: scale(1.03); }
.au-item-name { font-family: var(--au-serif); font-weight: 600; line-height: 1.5; margin: .75rem 0 .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.au-item-price { font-family: var(--au-serif); font-size: 1.25rem; font-weight: 600; }
.au-item-meta { font-size: .8125rem; color: var(--au-muted); }
.au-item-meta .au-soon { color: var(--au-urgent); }

/* 状態の表示 */
.au-status { display: inline-block; font-size: .75rem; padding: .125rem .5rem; border-radius: 2px; border: 1px solid currentColor; line-height: 1.6; color: var(--au-muted); }
.au-status[data-status="open"] { color: var(--au-brand); }
.au-status[data-status="sold"], .au-status[data-status="completed"], .au-status[data-status="second_chance_won"] { color: #2E6B47; }
.au-status[data-status="forfeited"], .au-status[data-status="payment_overdue"] { color: var(--au-urgent); }

/* 商品ページの見せ場：現在価格と残り時間 */
.au-panel { border-top: 2px solid var(--au-accent); padding-top: 1.25rem; }
@media (min-width: 992px) { .au-panel-sticky { position: sticky; top: 1.5rem; } }
.au-price-label { font-size: .875rem; color: var(--au-muted); }
.au-price { font-family: var(--au-serif); font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.2; letter-spacing: .01em; }
.au-clock { display: flex; align-items: baseline; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--au-line); border-bottom: 1px solid var(--au-line); margin: 1rem 0; }
.au-clock strong { font-size: 1.5rem; font-weight: 600; }
.au-clock.is-soon strong { color: var(--au-urgent); }
.au-facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font-size: .9375rem; margin: 0; }
.au-facts dt { color: var(--au-muted); font-weight: 400; }
.au-facts dd { margin: 0; }
.au-you { background: var(--au-brand-soft); border-radius: 4px; padding: .75rem 1rem; font-size: .9375rem; }

/* 商品写真のギャラリー */
.au-gallery-main { background: var(--au-canvas); border-radius: 4px; overflow: hidden; }
.au-gallery-main img { width: 100%; max-height: 640px; object-fit: contain; display: block; }
.au-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem; margin-top: .75rem; }
.au-thumbs button { padding: 0; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: var(--au-canvas); aspect-ratio: 1; }
.au-thumbs button[aria-current="true"] { border-color: var(--au-brand); }
.au-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-description { white-space: pre-wrap; line-height: 1.9; }

/* 入札履歴などの表 */
.au-table { font-size: .9375rem; }
.au-table td, .au-table th { padding: .625rem .5rem; border-color: var(--au-line); }
.au-table th { font-weight: 400; color: var(--au-muted); font-size: .8125rem; }

/* フォームの画面（ログイン・会員情報など）は幅をしぼる */
.au-narrow { max-width: 480px; margin-inline: auto; }
.au-medium { max-width: 760px; }
.au-section { padding: 1.5rem 0; border-bottom: 1px solid var(--au-line); }
.au-section:last-child { border-bottom: 0; }
.au-or { display: flex; align-items: center; gap: 1rem; color: var(--au-muted); font-size: .875rem; margin: 1.25rem 0; }
.au-or::before, .au-or::after { content: ""; flex: 1; border-top: 1px solid var(--au-line); }

/* マイページの手順（メール確認 → 会員情報 → 運営者の確認）は順番のある一覧 */
.au-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.au-steps li { counter-increment: step; display: flex; gap: .75rem; align-items: center; padding: .625rem 0; border-bottom: 1px solid var(--au-line); }
.au-steps li::before { content: counter(step); width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8125rem; border: 1px solid var(--au-line); color: var(--au-muted); flex: none; }
.au-steps li.is-done::before { content: "✓"; background: var(--au-brand); border-color: var(--au-brand); color: #fff; }

/* フッター */
.au-footer { border-top: 1px solid var(--au-line); background: var(--au-canvas); color: var(--au-muted); font-size: .875rem; margin-top: 4rem; }
.au-footer a { color: var(--au-muted); }

@media (prefers-reduced-motion: reduce) {
    .au-item-photo img { transition: none; }
    .au-item:hover .au-item-photo img { transform: none; }
}

/* 商品ページの並び：パソコンは「写真・説明（左）／価格の欄（右）」、スマートフォンは「写真 → 価格の欄 → 説明」 */
.au-item-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "panel" "details"; padding-bottom: 1.5rem; }
.au-item-gallery { grid-area: gallery; }
.au-item-panel { grid-area: panel; }
.au-item-details { grid-area: details; }
@media (min-width: 992px) {
    .au-item-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "gallery panel" "details panel"; column-gap: 3rem; align-items: start; }
}
.breadcrumb a { text-decoration: none; }
.au-search { min-width: min(100%, 300px); }

/* ページ送り：Bootstrap の標準の青ではなく、導入企業の基調色にする */
.pagination {
    --bs-pagination-color: var(--au-brand);
    --bs-pagination-hover-color: var(--au-brand-dark);
    --bs-pagination-focus-color: var(--au-brand-dark);
    --bs-pagination-active-bg: var(--au-brand);
    --bs-pagination-active-border-color: var(--au-brand);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
    font-variant-numeric: tabular-nums;
}

/* フッターのリンク */
.au-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.au-footer-links a { text-decoration: none; }
.au-footer-links a:hover { text-decoration: underline; }

/* ページの本文（管理画面で Markdown で書いたもの） */
.au-prose { line-height: 1.9; }
.au-prose h2 { margin: 2.25rem 0 .75rem; padding-bottom: .375rem; border-bottom: 1px solid var(--au-line); }
.au-prose h3 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; }
.au-prose p, .au-prose ul, .au-prose ol { margin-bottom: 1rem; }
.au-prose blockquote { border-left: 3px solid var(--au-accent); background: var(--au-canvas); padding: .75rem 1rem; color: var(--au-muted); margin: 0 0 1.25rem; }
.au-prose blockquote p:last-child { margin-bottom: 0; }
.au-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .9375rem; }
.au-prose th, .au-prose td { border: 1px solid var(--au-line); padding: .625rem .75rem; vertical-align: top; text-align: left; }
.au-prose thead th { background: var(--au-canvas); font-weight: 600; }
.au-prose tbody td:first-child { width: 30%; background: #FAFBFB; }