/*
 * VAMOS Crew — デザイントークン + リセット + レイアウト基盤
 * ブランド差し替えは :root のトークンのみで完結させる想定（Phase C5）。
 */

:root {
  /* 色: VAMOSロゴ準拠(黄色を主役に・紺/ピンク/緑/青は状態色として使う)
     ロゴから抽出した色: 黄#e0b010 紺#203080 ピンク#d03080 緑#30a050 青#2060a0 橙#d07020
     ★黄色は明るすぎて白文字が乗らないため、
       - 面で塗るとき  … --color-accent（黄）＋ --color-on-accent（墨文字）
       - 文字/線に使うとき … --color-primary（濃い山吹。白背景でAA 5.1:1）
       の2本立てにしている。ここを混ぜると文字が読めなくなる。 */
  --color-primary: #9a6200;          /* 濃い山吹(リンク・文字・線。白背景で5.1:1) */
  --color-primary-hover: #7e5000;
  --color-primary-contrast: #ffffff; /* --color-primary の上に載せる文字 */
  --color-accent: #ffc61e;           /* ロゴの黄(ボタン・帯など面で使う) */
  --color-accent-hover: #f2b400;
  --color-on-accent: #2c2c2c;        /* 黄の上に載せる文字(9.5:1) */
  --color-highlight: #fff0c2;        /* さらに薄い黄(下地・強調ブロック) */
  --color-text: #2c2c2c;             /* 墨(ロゴの輪郭と同じ) */
  --color-text-muted: #6f6f6f;
  --color-bg: #ffffff;
  --color-surface: #fffbf2;          /* ほんのり黄みのある地(カード/ヘッダー) */
  --color-border: #ece5d6;
  --color-border-strong: #d8cdb6;
  --color-overlay: rgba(44, 44, 44, 0.45);   /* ボトムシート等のバックドロップ */
  /* 状態色(バッジ/アラート)。ロゴの緑・青・ピンク・橙から、文字が読める濃さに調整 */
  --color-success: #1f7a3d; --color-success-bg: #e9f6ec;
  --color-warning: #a55a00; --color-warning-bg: #fff1d9;
  --color-danger:  #c2185b; --color-danger-bg:  #fde7f0;
  --color-info:    #24558f; --color-info-bg:    #e9f0f9;
  --color-selected: #8a5a00; --color-selected-bg: #fff0c2;  /* 参加決定(黄の下地) */
  /* カレンダーの印。升目の中の小さな丸なので、地味だと見分けられない。
     ロゴのピンク/青/緑を、白地でもはっきり見える濃さにして使う(本人指示・2026-09-23) */
  --color-mark-fixed:   #e0006c;   /* 決まった取材(ピンク) */
  --color-mark-applied: #0b5fd0;   /* 申請中(青) */
  --color-mark-open:    #0f9b46;   /* 募集中の取材(緑) */
  --color-mark-intern:  #7a3fd0;   /* 募集中のインターン(紫)。取材と見分けるため別の色にする */
  /* 写真を登録していない人の丸いアイコン（本人指示・2026-10-13）。
     ブランドの黄色だと主張が強すぎるので、LINEのような落ち着いた灰色にする */
  --color-avatar-bg: #cfd4db;
  --color-avatar-bg-hover: #bfc5ce;
  --color-avatar-mark: #ffffff;
  --color-applied-bg: #fff6e0;                              /* 申請済み(黄の薄地・文字は--color-primary) */
  /* タイポ(相対・clamp) */
  --font-sans: "Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,-apple-system,sans-serif;
  --fs-1: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);  /* h1 */
  --fs-2: clamp(1.3rem, 1.05rem + 1vw, 1.6rem);   /* h2 */
  --fs-3: 1.1rem;                                  /* h3 */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-body: 1.7;
  /* 余白スケール(rem) */
  --space-0: 0.25rem; --space-1: 0.5rem; --space-2: 1rem;
  --space-3: 1.5rem;  --space-4: 2rem;   --space-5: 3rem;
  /* 形 */
  /* 形: 旅行アプリのように角を大きく丸める(本人指示・2026-09-23) */
  --radius: 16px; --radius-sm: 10px; --radius-pill: 999px;
  --border: 1px solid var(--color-border);
  --shadow-1: 0 1px 2px rgba(44,44,44,.06), 0 1px 3px rgba(44,44,44,.08);
  --container-max: 75rem;
  --header-h: 3.5rem;
  /* 操作要素の最小高さ(タッチ44px相当・全端末で押しやすさを統一) */
  --control-h: 2.75rem;      /* ボタン・入力・トリガの標準高さ */
  --control-h-sm: 2.25rem;   /* 補助的な小ボタン・ページャ・ナビ */
  /* コンテナ左右余白(スマホ24px→PC32px。端に貼り付かないよう明確に確保) */
  --container-pad-inline: clamp(1.5rem, 6vw, 2rem);
}

/* ── リセット ── */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* hidden属性を付けたら必ず消える（display指定のあるクラスに負けないようにする）。
   JSで出し入れする部分が「隠したのに出たまま」になるのを防ぐ */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* ページ全体を左右に動かさない(横スクロールは幅広テーブルの.table-scroll内だけに限定) */
  overflow-x: hidden;
}

body {
  /* スマホのブラウザは、上下のバーが出たり消えたりして画面の高さが変わる。
     dvh はその変化に追従するので、下のタブが浮いたりずれたりしにくい（本人指示・2026-09-24）。
     dvh を知らないブラウザ向けに vh も残す */
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  /* 長い文字列(メール/ID/URL等)が枠をはみ出さないよう折り返す */
  overflow-wrap: break-word;
  /* 横あふれによるページの左右ズレを防ぐ(縦スクロールは通常どおり) */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

img, picture, svg { max-width: 100%; height: auto; display: block; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

th, td {
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--border);
  text-align: left;
  vertical-align: top;
}

a {
  color: var(--color-primary);
  text-decoration-thickness: from-font;
}

a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* ── タイポグラフィ ── */
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-1); margin-block-end: var(--space-3); letter-spacing: -.01em; }
/* 署名: セクション見出し(h2)の頭に短い朱色アクセントバー */
h2 {
  font-size: var(--fs-2);
  margin-block-end: var(--space-2);
  display: flex;
  /* ★中央ではなく上に合わせる（本人指摘・2026-10-13）。
     見出しが2行になったとき、中央だと黄色いバーが行と行の間に来てずれて見える */
  align-items: flex-start;
  gap: var(--space-1);
}
h2::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 1.05em;
  /* 1行目（行の高さ1.3em）の中で上下中央に見えるよう、上に少しだけ余白を入れる */
  margin-block-start: calc((1.3em - 1.05em) / 2);
  background: var(--color-accent);
  border-radius: 2px;
}
h3 { font-size: var(--fs-3); margin-block-end: var(--space-1); }

/* 補助ラベル(アイキャッチ・任意利用) */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-primary);
  margin-block-end: var(--space-0);
}

p {
  margin-block-end: var(--space-2);
}

ul, ol {
  padding-inline-start: var(--space-3);
  margin-block-end: var(--space-2);
}

small { font-size: var(--fs-small); color: var(--color-text-muted); }

/* ── レイアウト基盤 ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--container-pad-inline);
}

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

main.container {
  flex: 1 0 auto;
}

/* 本文の縦リズムを統一(トップレベル要素の間隔を揃える) */
main.container > * + * {
  margin-block-start: var(--space-3);
}

/* ── ヘッダー/ナビ ── */
.site-header {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--header-h);
  background: var(--color-surface);
  border-bottom: var(--border);
  padding-block: var(--space-1);
}
/* ヘッダー左端の縦バーは置かない（本人指示・2026-09-23。ロゴだけで見せる） */
.brand { position: relative; }

.site-header .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  width: 100%;
}

.brand {
  font-weight: 700;
  font-size: var(--fs-3);
  color: var(--color-text);
  margin-inline-end: auto;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  padding-inline: var(--space-1);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}

.main-nav a:hover {
  color: var(--color-primary);
  background: var(--color-bg);
}

.portal-user {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.logout {
  display: inline-flex;
}

.logout button {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  background: none;
  border: var(--border);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-2);
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.logout button:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

/* スマホ: ブランドを1行目・ナビ/ログアウトを2行目に段組みして詰まりを防ぐ */
@media (max-width: 40rem) {
  .brand { flex: 1 1 100%; }
  .main-nav { flex: 1 1 auto; }
}

/* ── フッター ── */
.site-footer {
  background: var(--color-surface);
  border-top: var(--border);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  padding-block: var(--space-3);
  margin-block-start: var(--space-5);
}