/* =============================================
   FUNマーケット テーマ設定
   ★ この :root の値を書き換えるだけで、サイト全体の
     色・角丸・フォントが一括で変わります。
     （GitHub上で編集 → コミットすればCloudflareに自動反映）

   デザイン：「未来大レッド」（2026-10-19 に函館ブルーの紺 → 未来大の赤に変更。配置はそのまま）
     赤＝ヘッダー・情報・選択中の状態（Tailwindでは fun-blue という名前のまま）
     赤は大学の公式アイコンから取った色（#A92D2A。アプリのアイコンと同じ）
     珊瑚色＝押してほしいボタン（出品・購入希望）だけに使う（fun-accent）
     写真のまわりは白〜薄いグレーにして、商品写真を主役にする

   例：函館ブルー（紺）に戻したい
     --color-main: #0B4F8A;  --color-main-light: #E6F1FA;
     --color-hero-from: #0B4F8A;  --color-hero-to: #1E88C8;
     --color-page-bg: #F4F8FB;  --color-text: #0B2545;
   ============================================= */
:root {
  /* メインカラー（選択中のタブ・リンク・価格などの強調色）＝未来大の赤 */
  --color-main: #A92D2A;

  /* メインカラーの薄い版（ワンポイント背景・バッジ・写真なしプレースホルダー） */
  --color-main-light: #F8E9E7;

  /* ヘッダーのグラデーション（上→下） */
  --color-hero-from: #A92D2A;
  --color-hero-to: #CF4F42;

  /* 押してほしいボタン（＋出品・購入希望）の色＝珊瑚色 */
  --color-accent: #FF7B54;

  /* ロゴの「FUN」の色 */
  --color-logo: #FFD166;

  /* ページ全体の背景色 */
  --color-page-bg: #FAF5F4;

  /* 写真の下地（写真が無い・読み込み中のとき） */
  --color-photo-bg: #F3EDEC;

  /* 基本の文字色 */
  --color-text: #3D1715;

  /* 補足の文字色 */
  --color-muted: #8E7876;

  /* カードなど大きめ要素の角丸 */
  --radius-card: 1rem;

  /* ボタン・入力欄の角丸 */
  --radius-control: 0.75rem;

  /* 基本フォント（丸ゴシック）。読み込めないときは端末のフォント */
  --font-app: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans",
    "BIZ UDPGothic", Meiryo, system-ui, sans-serif;

  /* 見出し・価格のフォント */
  --font-display: "RocknRoll One", var(--font-app);
}

body {
  background-color: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--font-app);
  font-weight: 500;
}

/* 見出し・価格用（class="font-display"） */
.font-display {
  font-family: var(--font-display);
  font-weight: 400;
}

/* カード共通の影（ふんわり、文字色と同じ系統） */
.shadow-soft {
  box-shadow: 0 4px 14px rgba(61, 23, 21, 0.07);
}

/* =============================================
   トップのヘッダー（赤のグラデーション）
   ============================================= */
.hero {
  background: linear-gradient(170deg, var(--color-hero-from), var(--color-hero-to));
  color: #fff;
}
.hero .logo-fun {
  color: var(--color-logo);
}

/* ヘッダー上の丸いアイコンボタン（マイページなど） */
.hero-icon-btn {
  background: rgba(255, 255, 255, 0.18);
}

/* =============================================
   絞り込みチップ
   選択中は is-active クラス（js/app.js が付け替える）
   ============================================= */
.chip {
  border-radius: 9999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.1s;
}
.chip:active {
  transform: scale(0.95);
}
/* 赤のヘッダーの上に置くチップ（カテゴリ） */
.hero .chip {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.hero .chip.is-active {
  background: #fff;
  color: var(--color-main);
}
/* まだ使えないカテゴリ（近日公開）：薄く表示し、右上に小さく SOON */
.hero .chip.is-soon {
  background: transparent;
  border: 1.5px dashed rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.7);
}
.chip .soon-tag {
  margin-left: 0.3rem;
  border-radius: 9999px;
  background: var(--color-logo);
  padding: 0.05rem 0.35rem;
  font-size: 0.5625rem;
  color: var(--color-text);
  vertical-align: 0.1em;
}
/* 白い帯の上に置くチップ（販売状況） */
.filter-bar .chip {
  background: #fff;
  color: var(--color-muted);
  border: 1.5px solid #E3EBF2;
}
.filter-bar .chip.is-active {
  background: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
}

/* =============================================
   商品カード（トップの一覧）
   ============================================= */
.item-photo {
  background: var(--color-photo-bg);
}
/* 写真の上の価格ラベル */
.price-tag {
  background: var(--color-main);
  color: #fff;
  font-family: var(--font-display);
}
/* 「SOLD」のときは写真を白っぽくして、中央にラベル */
.sold-veil {
  background: rgba(255, 255, 255, 0.7);
}
.sold-veil span {
  background: var(--color-text);
}
/* 「取引中」は珊瑚色（相手が決まっている＝もうすぐ売れる） */
.sold-veil span.trading-label {
  background: var(--color-accent);
}
/* 写真が無いときの本アイコン */
.photo-placeholder {
  color: #D6C3C1;
}

/* アイコン（線画SVG）の共通サイズ */
.icon {
  width: 1.375rem;
  height: 1.375rem;
}

/* =============================================
   カテゴリタブ：スクロールバーを隠して
   スワイプで気持ちよく横スクロールできるようにする
   ============================================= */
.no-scrollbar {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;            /* Chrome/Safari */
}

/* =============================================
   iPhone対応：セーフエリア（ノッチ・ホームバー）
   ホーム画面に追加したPWAとして起動したときに、
   画面上下の表示が欠けないようにする。
   ※ !important はTailwindのユーティリティ（py-3等）に
     勝つために必要（通常のページ表示では値が0になるだけで無害）
   ============================================= */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 上部固定ヘッダー：py-3付き＝サブページ用（元の0.75remに上乗せ） */
header.sticky.py-3 {
  padding-top: calc(0.75rem + env(safe-area-inset-top)) !important;
}

/* 上部固定ヘッダー：py-3なし＝トップページ用 */
header.sticky:not(.py-3) {
  padding-top: env(safe-area-inset-top);
}

/* 下部固定バー（商品詳細・出品の確定ボタン）：元のp-4(1rem)に上乗せ */
.fixed.bottom-0 {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
}

/* 下部フローティングボタン（出品する・忘れ物を投稿） */
.fixed.bottom-5 {
  bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
}

/* =============================================
   ボトムナビ（js/bottomnav.js が挿入する画面下部メニュー）
   ============================================= */
/* ナビ本体：iPhoneのホームバー分だけ下に余白を足す */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ナビがあるページは、最後の要素がナビに隠れないよう下に余白を作る */
body.has-bottom-nav {
  padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}

/* フローティングボタン（忘れ物を投稿など）はナビの上に逃がす */
body.has-bottom-nav .fixed.bottom-5 {
  bottom: calc(5.25rem + env(safe-area-inset-bottom)) !important;
}

/* =============================================
   お気に入りボタン（ハート）：is-on で塗りつぶし
   ============================================= */
.fav-button {
  color: var(--color-muted);
}
.fav-button svg {
  fill: none;
}
.fav-button.is-on {
  color: var(--color-accent);
}
.fav-button.is-on svg {
  fill: currentColor;
}

/* ボトムナビ中央の「＋出品」ボタン（珊瑚色の丸） */
.bn-plus {
  background: var(--color-accent);
  box-shadow: 0 6px 16px rgba(255, 123, 84, 0.45);
}

/* =============================================
   取引画面（deal.html）の進み具合
   li に done（済み）/ now（いまここ）を付ける
   ============================================= */
.deal-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0.25rem 0.5rem 0;
}
.deal-steps::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 2rem;
  right: 2rem;
  height: 3px;
  border-radius: 2px;
  background: #E3EBF2;
}
.deal-steps li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 4.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-muted);
}
.deal-steps li i {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 3px solid #E3EBF2;
  background: #fff;
  font-style: normal;
  font-size: 0.75rem;
}
.deal-steps li.done,
.deal-steps li.now {
  color: var(--color-text);
}
.deal-steps li.done i {
  background: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
}
.deal-steps li.now i {
  border-color: var(--color-main);
  color: var(--color-main);
  box-shadow: 0 0 0 4px var(--color-main-light);
}

/* 受け渡し候補のラジオボタン行：選ぶと枠が紺になる */
.slot-option:has(input:checked) {
  border-color: var(--color-main);
  background: var(--color-main-light);
}