/* ============================================================
   掲示板サイト デザイン仕様書 v1.3 — 全ページ共通スタイル
   （デザイントークン / リセット / ヘッダー / グローバルメニュー /
     パンくず / 見出し / ボタン / フッター /
     スマホ下部固定メニュー / レスポンシブ）
   ページ固有のスタイルは css/<ページ名>.css 側に置く。
   読み込み順： common.css → <ページ名>.css（後者が上書き）
   ============================================================ */

/* ---------- 6-1 カラーパレット / 6-3 スペーシング / 6-2 タイポ ---------- */
:root{
  --primary:#c78e64;          /* ベースカラー：面・アクセント・選択状態 */
  --primary-strong:#9c6a45;   /* 主ボタン(白文字)・リンク・強調 */
  --primary-hover:#835838;    /* ボタンホバー */
  --primary-light:#e9d2c1;    /* 淡い背景・選択行・タグ */
  --primary-pale:#f7eee8;     /* セクション背景の薄い色 */
  --bg:#fbf8f5;               /* ページ背景 */
  --surface:#ffffff;          /* カード・入力欄の面 */
  --border:#e5dad0;           /* 罫線・枠線 */
  --text:#2b2521;             /* 本文テキスト */
  --text-sub:#7a6a5e;         /* 補足・日時・メタ */
  --link:#9c6a45;             /* リンク */
  --success:#3f8f5f;
  --error:#c0392b;

  /* スペーシング（4の倍数スケール） */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;

  /* タイポ（PC 既定） */
  --fs-h1:28px; --fs-h2:22px; --fs-h3:18px; --fs-body:16px; --fs-small:13px;

  --radius-btn:6px;
  --radius-card:4px;
  --footer-h:60px;            /* スマホ固定フッターメニュー高さ */
  --pad-x:24px;               /* PC / TB 左右パディング */

  --font: "Noto Sans", "Noto Sans JP", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
          "Hiragino Sans", "Meiryo", sans-serif;
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.7;                 /* 本文 1.7 */
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;   /* フッターを常に最下部へ */
}
h1,h2,h3{line-height:1.4;margin:0;font-weight:700;}   /* 見出し 1.4 */
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;color:var(--primary-hover);}
img{max-width:100%;height:auto;display:block;}
ul{margin:0;padding:0;list-style:none;}

/* 8. インタラクション：フォーカス可視化（9. アクセシビリティ） */
:focus-visible{outline:2px solid var(--primary-strong);outline-offset:2px;border-radius:2px;}

/* スキップリンク */
.skip-link{
  position:absolute;left:var(--sp-2);top:-48px;z-index:100;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-btn);
  padding:var(--sp-2) var(--sp-4);
}
.skip-link:focus{top:var(--sp-2);}

/* ============================================================
   4. 共通レイアウト（フルブリード：全要素 width:100% / max-width なし）
   ============================================================ */
.site-header{
  width:100%;
  background:var(--surface);
  border-top:5px solid #9c6a45;      /* ページ最上部のアクセント帯 */
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:30;
}
.site-header__bar{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) var(--pad-x);
}
.brand{
  font-size:20px;font-weight:700;letter-spacing:.02em;
  color:var(--text);white-space:nowrap;
}
.brand:hover{text-decoration:none;color:var(--text);}

.account{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-small);color:var(--text-sub);white-space:nowrap;
}
.account__name{color:var(--text);font-weight:700;}
.account__logout{
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-2);
  color:var(--text-sub);
}

/* 4-3 グローバルメニュー（PC / タブレット：ヘッダー内 横並び・7項目） */
.site-nav{
  width:100%;
  border-top:1px solid var(--border);
  padding:0 var(--pad-x);
  overflow-x:auto;                 /* 収まらない場合は横スクロール */
  scrollbar-width:thin;
}
.site-nav__list{display:flex;gap:var(--sp-1);flex-wrap:wrap;}   /* TB では折り返し */
.site-nav__link{
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 var(--sp-3);
  color:var(--text-sub);font-size:15px;font-weight:700;white-space:nowrap;
  border-bottom:3px solid transparent;
}
.site-nav__link:hover{color:var(--text);text-decoration:none;}
.site-nav__link[aria-current="page"]{
  color:var(--primary-strong);
  border-bottom-color:var(--primary);
}

/* ---------- メイン ---------- */
.main{
  width:100%;
  flex:1 0 auto;                   /* 残りの高さを埋めてフッターを押し下げる */
  padding:var(--sp-3) var(--pad-x) var(--sp-12);
}

/* パンくず（メニューと見出しの間） */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);
  font-size:var(--fs-small);color:var(--text-sub);
  margin-bottom:var(--sp-4);
}
.breadcrumb a{color:var(--text-sub);}
.breadcrumb a:hover{color:var(--primary-strong);}
.breadcrumb .sep{color:var(--border);}
.breadcrumb [aria-current="page"]{color:var(--text);}

/* ページ見出し */
.page-title{margin:0 0 var(--sp-6);}

/* 6-4 ボタン */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:0 var(--sp-4);
  border-radius:var(--radius-btn);border:1px solid transparent;
  font:inherit;font-weight:700;font-size:var(--fs-body);cursor:pointer;
  white-space:nowrap;
}
.btn--primary{background:var(--primary-strong);color:#fff;}
.btn--primary:hover{background:var(--primary-hover);color:#fff;text-decoration:none;}
.btn--secondary{background:var(--surface);color:var(--primary-strong);border-color:var(--primary-strong);}
.btn--secondary:hover{background:var(--primary-pale);text-decoration:none;}
.btn--sm{font-size:var(--fs-small);padding:0 var(--sp-3);}

/* ---------- 無効状態（共通・汎用） ---------- */
:disabled{
  opacity:.55;
  cursor:not-allowed;
}
/* 無効時はホバーの色変化を打ち消す */
.btn--primary:disabled:hover,
.btn--primary[disabled]:hover{background:var(--primary-strong);color:#fff;}
.btn--secondary:disabled:hover,
.btn--secondary[disabled]:hover{background:var(--surface);}

/* ---------- アイコンボタンの ON 状態（共通・汎用）：塗りつぶし ----------
   各ページの .post__iconbtn / .fcard__btn 等の基本色より優先させるため、クラスを重ねて詳細度を上げる */
.post__iconbtn.post__iconbtn--on,
.fcard__btn.post__iconbtn--on{
  background:var(--primary-strong);border-color:var(--primary-strong);color:#fff;
}
.post__iconbtn.post__iconbtn--on:hover,
.fcard__btn.post__iconbtn--on:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff;}

/* ============================================================
   5-6 ページング（ページ番号方式 ＋ Prev / Next）
   ＋ ページ内移動ボタン（pagejump）　※全ページ共通
   ============================================================ */
.pager{
  display:flex;align-items:center;justify-content:center;
  gap:var(--sp-2);flex-wrap:wrap;
  margin-top:var(--sp-8);
}
.pager__list{display:flex;align-items:center;gap:var(--sp-1);}
.page-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 var(--sp-2);
  border:1px solid var(--border);border-radius:var(--radius-btn);
  background:var(--surface);color:var(--text-sub);font-weight:700;font-size:var(--fs-small);
}
.page-link:hover{background:var(--primary-pale);color:var(--text);text-decoration:none;}
.page-link.is-current{
  background:var(--primary-strong);color:#fff;border-color:var(--primary-strong);
}
.page-ellipsis{min-width:24px;text-align:center;color:var(--text-sub);}
.page-link.is-disabled{opacity:.45;pointer-events:none;}
.pager--top{margin:0;flex:0 1 auto;}   /* ツールバー内で1行に収める */

/* ページ内移動ボタン（右下・固定） */
.pagejump{
  position:fixed;right:var(--sp-4);bottom:var(--sp-6);z-index:35;
  display:flex;flex-direction:column;gap:var(--sp-1);
}
.pagejump__btn{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border:0;border-radius:var(--radius-btn);
  background:rgba(0,0,0,.6);color:#fff;
  box-shadow:0 1px 3px rgba(43,37,33,.18);
  text-decoration:none;
}
.pagejump__btn:hover{
  background:rgba(0,0,0,.8);color:#fff;
  text-decoration:none;
}
.pagejump__btn::before{
  content:"";display:block;flex:none;width:20px;height:20px;
  background-color:currentColor;
  -webkit-mask:var(--icon) center / contain no-repeat;
  mask:var(--icon) center / contain no-repeat;
}
.pagejump__btn--up  {--icon:url(../img/icon/chevron-up.svg);}
.pagejump__btn--down{--icon:url(../img/icon/chevron-down.svg);}

/* ---------- サイトフッター ---------- */
.site-footer{
  width:100%;
  flex-shrink:0;
  background:var(--primary-pale);
  border-top:1px solid var(--border);
  padding:var(--sp-8) var(--pad-x);
  color:var(--text-sub);font-size:var(--fs-small);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
}
.site-footer__links{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.site-footer__links a{color:var(--text-sub);}

/* ============================================================
   4-2 / 4-3 スマホ：画面下部固定フッターメニュー（5項目）
   ============================================================ */
.footer-nav{display:none;}
.more-sheet,.more-overlay{display:none;}

/* ============================================================
   7. レスポンシブ（ブレークポイント：1024 / 768 / 375）
   ============================================================ */

/* --- タブレット：768〜1023px --- */
@media (max-width:1023px){
  :root{--pad-x:24px;}
}

/* --- スマホ：〜767px --- */
@media (max-width:767px){
  :root{
    --pad-x:16px;
    --fs-h1:22px; --fs-h2:18px; --fs-h3:16px; --fs-body:15px; --fs-small:12px;
  }

  /* ヘッダーのPCメニューは隠し、下部固定メニューへ置換 */
  .site-nav{display:none;}
  .site-header{position:static;}

  /* ヘッダー上段：ブランド（左）＋アカウント（右）を縦に段組み。
     ブランド名が長い場合は折り返して2行以上になってもよい（全体で3行可）。 */
  .site-header__bar{
    flex-direction:column;
    gap:var(--sp-1);
  }
  .site-header__bar .brand{
    align-self:flex-start;
    white-space:normal;
  }
  .site-header__bar .account{
    align-self:flex-end;
    flex-wrap:wrap;
    justify-content:flex-end;
    text-align:right;
  }

  body{
    /* コンテンツ最下部が固定メニューに隠れないよう余白を確保 */
    padding-bottom:calc(var(--footer-h) + env(safe-area-inset-bottom) + var(--sp-2));
  }

  /* ページ内移動ボタンは固定フッターメニューに被らないよう持ち上げる */
  .pagejump{bottom:calc(var(--footer-h) + env(safe-area-inset-bottom) + var(--sp-2));}

  /* 下部固定メニュー（5項目） */
  .footer-nav{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--surface);
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .footer-nav__item{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:var(--footer-h);padding:var(--sp-1) 2px;
    background:transparent;border:0;
    font:inherit;font-size:11px;font-weight:700;color:#b0a79f;   /* 非アクティブ：グレーアウト */
    text-align:center;cursor:pointer;
  }
  .footer-nav__item:hover{text-decoration:none;color:var(--text);}
  .footer-nav__item[aria-current="page"]{color:var(--primary-strong);}   /* アクティブ：茶色 */
  .footer-nav__icon{
    width:26px;height:26px;flex:none;
    background-color:currentColor;                 /* アイコン色は .footer-nav__item の color を継承 */
    -webkit-mask:var(--nav-icon) center / contain no-repeat;
    mask:var(--nav-icon) center / contain no-repeat;
  }
  .footer-nav__icon--projects{--nav-icon:url(../img/icon/folder.svg);}
  .footer-nav__icon--threads {--nav-icon:url(../img/icon/list.svg);}
  .footer-nav__icon--new     {--nav-icon:url(../img/icon/list-plus.svg);}
  .footer-nav__icon--files   {--nav-icon:url(../img/icon/share.svg);}
  .footer-nav__icon--more    {--nav-icon:url(../img/icon/grid.svg);}
  .footer-nav__label{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* 「その他」展開シート */
  .more-overlay{
    display:block;position:fixed;inset:0;z-index:45;
    background:rgba(43,37,33,.35);
  }
  .more-sheet{
    display:block;position:fixed;left:0;right:0;z-index:46;
    bottom:calc(var(--footer-h) + env(safe-area-inset-bottom));
    background:var(--surface);
    border-top:1px solid var(--border);
    padding:var(--sp-2) var(--pad-x) var(--sp-4);
  }
  .more-sheet__title{
    font-size:var(--fs-small);color:var(--text-sub);font-weight:700;
    padding:var(--sp-2) 0;
  }
  .more-sheet a{
    display:flex;align-items:center;min-height:48px;
    color:var(--text);font-weight:700;
    border-top:1px solid var(--border);
  }
  .more-sheet a:hover{text-decoration:none;color:var(--primary-strong);}
  [hidden]{display:none !important;}
}

/* PC / TB では「その他」関連を常に非表示 */
@media (min-width:768px){
  .footer-nav,.more-sheet,.more-overlay{display:none !important;}
}