/* ============================================================
   base.css — GadgetSnap 共通スタイル
   全ページで読み込む。ヘッダー・フッター・CSS変数を管理。
   ============================================================ */

/* ─ リセット ─ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; overflow-wrap: break-word; word-break: break-word; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif;
  background: #f2f4f8;
  color: #1a1c24;
  min-height: 100vh;
  line-height: 1.6;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─ CSS変数（デザイントークン） ─ */
:root {
  /* カラー — ライトテーマ */
  --bg:           #f2f4f8;
  --bg2:          #ffffff;
  --bg3:          #edf0f7;
  --bg4:          #e2e6f0;
  --border:       #dde1eb;
  --border2:      #c8cdd9;
  --accent:       #c83333;
  --accent-dark:  #a82828;
  --accent-light: rgba(200, 51, 51, 0.08);
  --accent-glow:  rgba(200, 51, 51, 0.18);
  --text:         #1a1c24;
  --text2:        #1a1c24;
  --text3:        #1a1c24;
  --text4:        #b0b6c4;   /* placeholder・入力例 */
  --star:         #e8a000;
  --heart-bg:     rgba(200, 51, 51, 0.08);
  --shadow:       0 2px 12px rgba(0, 0, 0, 0.07);
  --shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.13);
  --trans:        0.2s ease;

  /* 角丸 */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 10px;

  /* フォントサイズ（5種類 / 基準: 1rem = 16px） */
  --fs-xs:   0.72rem;                       /*  11.5px  最小ラベル（カテゴリ・評価 等） */
  --fs-sm:   0.85rem;                       /*  13.6px  補助テキスト・タグ・バッジ */
  --fs-base: 1.00rem;                       /*  16.0px  基準（ほぼ全てのUI）      */
  --fs-lg:   1.15rem;                       /*  18.4px  スタッツ数値・フッターロゴ */
  --fs-lg2:  1.25rem;                       /*  20.0px  カードタイトル等          */
  --fs-xl:   1.35rem;                       /*  21.6px  サイトロゴ               */
  --fs-2xl:  2rem;                          /*  32.0px  ページ見出し             */
  --fs-h1:   clamp(2.00rem, 4vw, 3.00rem); /*  32〜48px ヒーロー見出し           */
}

/* ===========================
   HEADER — 常にダーク（ライトテーマ上書き）
   =========================== */
.hd {
  position: sticky; top: 0; z-index: 100;
  background: #000000;
  border-bottom: 1px solid #1a1c22;
}
.hd-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 28px; height: 60px;
  display: flex; align-items: center; gap: 28px;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xl); font-weight: 900; letter-spacing: -0.5px;
  color: #e4e6ed;
}
.logo-mark {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); color: #fff;
  overflow: hidden;
}
.logo-mark img { width: 100%; height: 100%; display: block; }
.logo span { color: var(--accent); }

.hd-nav { display: flex; gap: 2px; }
.hd-nav a {
  padding: 6px 13px; border-radius: var(--r-xs);
  font-size: var(--fs-base); font-weight: 600; color: #9aa2ae;
  transition: all var(--trans);
}
.hd-nav a:hover { color: #e4e6ed; background: #20242a; }
.hd-nav a.on   { color: var(--accent); background: rgba(200, 51, 51, 0.12); }

.hd-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.btn-post {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px; border-radius: 0;
  background: var(--accent); color: #fff;
  font-size: var(--fs-base); font-weight: 700;
  transition: all var(--trans);
}
.btn-post:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200,51,51,0.35);
}
.hd-ava {
  width: 40px; height: 40px; border-radius: 0;
  object-fit: cover; border: 0;
}

/* ヘッダー ユーザーエリア */
.hd-user { position: relative; display: flex; align-items: center; color: #e4e6ed; text-decoration: none; }
.hd-user-menu {
  display: none;
  position: absolute; top: calc(100% + 10px); right: 0;
  background: #20242a; border: 1px solid #30353e;
  border-radius: var(--r-xs); padding: 8px 0;
  min-width: 140px; box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  z-index: 200;
}
.hd-user:hover .hd-user-menu { display: block; }
.hd-user-name {
  display: block; padding: 8px 16px;
  font-size: var(--fs-sm); font-weight: 700; color: #929aa4;
  border-bottom: 1px solid #252930;
}
.hd-menu-item {
  display: block; padding: 8px 16px;
  font-size: var(--fs-sm); color: #929aa4;
  transition: all var(--trans);
}
.hd-menu-item:hover { color: var(--accent); background: rgba(200,51,51,0.1); }
.hd-logout {
  display: block; padding: 8px 16px;
  font-size: var(--fs-sm); color: #929aa4;
  transition: all var(--trans);
  background: none; border: none; cursor: pointer;
  font-family: inherit; width: 100%; text-align: left;
}
.hd-logout:hover { color: var(--accent); background: rgba(200,51,51,0.1); }
.hd-ava-default {
  width: 40px; height: 40px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background: #20242a; border: 0;
  font-size: 0.95rem; color: #929aa4;
}

/* ===========================
   FOOTER — 常にダーク（ライトテーマ上書き）
   =========================== */
.ft {
  border-top: 1px solid #252930;
  background: #191c20;
  padding: 26px; text-align: center;
  color: #929aa4; font-size: var(--fs-sm);
}
@media (min-width: 901px) {
  .list-page-head h1 { font-size: var(--fs-2xl); }
}
.ft-logo { font-size: var(--fs-lg); font-weight: 900; color: var(--accent); margin-bottom: 7px; display: inline-flex; align-items: center; gap: 6px; }
.ft-logo-icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.ft-links { display: flex; justify-content: center; gap: 18px; margin: 9px 0; }
.ft-links a { color: #929aa4; transition: color var(--trans); }
.ft-links a:hover { color: #e4e6ed; }
.ft p { color: #929aa4; }

/* ===========================
   スマホ対応（〜640px）
   =========================== */
@media (max-width: 640px) {

  /* はみ出し根本防止 */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* ヘッダー：2段構成に */
  .hd-inner {
    padding: 0 14px;
    gap: 8px;
    height: auto;
    flex-wrap: wrap;
    padding-top: 8px;
  }

  /* 1段目：ロゴ ＋ 右エリア */
  .logo      { font-size: 1.1rem; flex: 1; order: 1; }
  .logo-mark { width: 24px; height: 24px; }
  .hd-right  { margin-left: auto; order: 2; flex-shrink: 0; }



  /* 投稿ボタンをコンパクトに */
  .btn-post {
    height: 32px;
    padding: 0 12px;
    font-size: 0.82rem;
  }

  /* アバターも投稿ボタンと同サイズに */
  .hd-ava,
  .hd-ava-default {
    width: 32px;
    height: 32px;
  }

  /* 2段目：ナビメニュー */
  .hd-nav {
    display: flex;
    width: 100%;
    order: 3;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 6px;
    gap: 0;
  }
  .hd-nav::-webkit-scrollbar { display: none; }
  .hd-nav a {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    font-size: var(--fs-sm);
    white-space: nowrap;
    min-width: max-content;
  }
}