/* サイトの見た目。1枚だけ。フレームワーク（Bootstrap 等）は入れない。
   外部フォント・外部CDNも読み込まない（表示が崩れる経路を作らないため）。

   デザインの土台は「案C あたたかい」（2026-07-29 決定）。
   生成りの地 ＋ 臙脂 ＋ 見出しだけ明朝。値の由来は docs/design-tokens-plan-c.css。

   **この下の :root 以外に、色・余白・角丸・文字の大きさを直に書かないこと。**
   直に書くと「もう少し余白がほしい」が全画面を触る作業になる。
   変数にしてあれば1行の変更で済む（overview §14「デザインとルールも同じ」）。

   満たすこと:
     - スマートフォン幅で横スクロールが出ない
     - 一覧がカード状に並び、1件ずつの区切りが分かる
     - キーボードだけで操作する人に、いまどこにいるかが見える */

:root {
  /* ---- 色 ---- */
  --bg:            #FBF7F6;  /* 地。生成り（わずかに赤み） */
  --card-bg:       #FFFFFF;  /* カード・入力欄の地 */
  --text:          #2B2422;  /* 本文。暖かい墨 */
  --muted:         #6E625E;  /* 補助的な文字 */
  --line:          #EADFDB;  /* 罫線・枠 */
  --accent:        #9B3B4E;  /* 主色。臙脂。リンクとボタン */
  --accent-text:   #FFFFFF;  /* 主色の上に載る文字 */
  --accent-weak:   #F5EAEC;  /* 主色の薄い面 */

  /* 状態の色。主色とは別に持つ。
     「待機中」を主色にすると、リンクと状態の区別がつかなくなる。 */
  --ok:            #37684A;  /* 待機中。生成りの上で 5.4:1 */
  --ok-line:       #A9CBB6;
  --warn:          #8A5A1F;

  /* 誤りの赤。**主色の臙脂が赤系なので、これだけでは区別がつかない。**
     エラーは色に加えて「左の太い罫」と「見出しの文言」でも示す（.errors）。 */
  --danger:        #A8322A;
  --danger-weak:   #FBF0EE;

  /* ---- 書体 ---- */
  /* 見出しだけ明朝。iPhone/Mac はヒラギノ明朝、Windows は游明朝になる。 */
  --font:      system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-head: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;

  /* ---- 文字の大きさ ---- */
  --size-xs:   0.78rem;   /* フッタ・注記 */
  --size-sm:   0.88rem;   /* 補助情報 */
  --size-base: 1rem;      /* 本文 */
  --size-md:   1.13rem;   /* カードの名前 */
  --size-lg:   1.28rem;   /* h2 */
  --size-xl:   1.5rem;    /* h1 */

  --lh:         1.8;      /* 本文の行間 */
  --lh-head:    1.45;     /* 見出しの行間 */
  --track-head: 0.04em;   /* 見出しの字間。明朝は少し空けた方が読みやすい */

  /* ---- 余白 ---- */
  /* 4px の倍数で刻む。中途半端な値を作らないため。 */
  --gap-xs:  0.25rem;
  --gap-sm:  0.5rem;
  --gap:     0.75rem;
  --gap-md:  1rem;
  --gap-lg:  1.375rem;   /* カードの内側 */
  --gap-xl:  2rem;

  /* ---- 形 ---- */
  --radius-sm:   6px;
  --radius:     14px;    /* カード・入力欄 */
  --radius-pill: 999px;  /* タグ・ボタン・状態 */

  --shadow: 0 2px 3px rgba(90, 50, 40, 0.05),
            0 14px 30px -20px rgba(120, 60, 50, 0.5);

  /* ---- 幅 ---- */
  --measure: 48rem;      /* 本文の最大幅 */

  /* ---- 写真 ---- */
  --thumb: 120px;        /* 一覧のロビー用写真の一辺 */
}

* {
  box-sizing: border-box;
}

html {
  /* 横スクロールを出さない。長い語（URL など）も折り返す。 */
  overflow-wrap: anywhere;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-base);
  line-height: var(--lh);
}

a {
  color: var(--accent);
}

/* ---- 見出し ---- */
/* 明朝にするのは見出しだけ。本文まで明朝にすると小さい字がつぶれて読みにくい。 */

h1,
h2,
h3 {
  font-family: var(--font-head);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  font-weight: 600;
}

h1 {
  font-size: var(--size-xl);
  margin: 0 0 var(--gap-md);
}

h2 {
  font-size: var(--size-lg);
  margin: 0 0 var(--gap-sm);
}

/* ---- ヘッダとナビ ---- */

.site-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--line);
  padding: var(--gap) var(--gap-md);
}

.site-title {
  margin: 0 0 var(--gap-xs);
  font-family: var(--font-head);
  font-size: var(--size-md);
  letter-spacing: var(--track-head);
  font-weight: 600;
}

.site-title a {
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;      /* 狭い画面では折り返す。横スクロールを出さない */
  align-items: center;
  gap: var(--gap-xs) var(--gap-md);
  font-size: var(--size-sm);
}

.site-nav-user {
  color: var(--muted);
}

.logout-form {
  display: inline;
  margin: 0;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- 本文 ---- */

.site-main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--gap-md);
}

.lead {
  color: var(--muted);
}

/* ---- ボタン ---- */
/* 押せるものは塗りつぶす。枠だけだと押せるように見えない人がいる。 */

.button,
button[type="submit"] {
  display: inline-block;
  padding: var(--gap-sm) var(--gap-lg);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
button[type="submit"]:hover {
  background: var(--text);
  border-color: var(--text);
}

/* ---- 知らせと誤り ---- */

.messages,
.errors {
  max-width: var(--measure);
  margin: var(--gap-md) auto 0;
  padding: var(--gap) var(--gap-md);
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
}

/* **色だけで誤りを示さない。**
   主色（臙脂 #9B3B4E）が赤系なので、赤い文字というだけでは
   「リンクの色」と区別がつかない。左の太い罫と薄い面を必ず添える。
   加えて、画面側に「入力内容を確認してください」の見出しを置く（.errors-title）。 */
.errors {
  border-color: var(--danger);
  border-left-width: 5px;
  background: var(--danger-weak);
  color: var(--danger);
}

.errors-title {
  max-width: var(--measure);
  margin: var(--gap-md) auto 0;
  color: var(--danger);
  font-weight: bold;
}

/* 見出しのすぐ下に本体が続くときは、間の余白を詰める。 */
.errors-title + .errors {
  margin-top: var(--gap-xs);
}

/* ---- フォーム ---- */

form p {
  margin: 0 0 var(--gap);
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  max-width: 22rem;
  padding: var(--gap-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--size-base);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--accent);
}

.helptext {
  display: block;
  color: var(--muted);
  font-size: var(--size-sm);
}

/* Django が入力欄ごとのエラーに付けるクラス。
   .errors（フォーム全体）と同じ赤で揃える。 */
.errorlist {
  margin: 0 0 var(--gap-xs);
  padding: 0;
  list-style: none;
  color: var(--danger);
  font-size: var(--size-sm);
}

/* ---- キャスト一覧 ---- */

.cast-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);       /* 1件ずつの区切り。カード側に margin を持たせない */
  list-style: none;
  margin: 0;
  padding: 0;
}

.cast-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: var(--gap-lg);
}

/* ロビー用の写真（仕様008）。
   **縦横比を固定する。** いまはどのキャストも 400×400 だが、
   将来ちがう比のものが混ざったとき、固定していないとカードの高さが揃わず
   一覧がガタガタになる。cover で切り取って比を保つ。
   width / height は HTML 側にも書いてあるので、読み込み前から場所が確保され、
   写真が入った瞬間に文字が飛び跳ねない。 */
.cast-photo img {
  width: var(--thumb);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  margin-bottom: var(--gap-sm);
}

.cast-name {
  margin: 0;
  font-size: var(--size-md);
  font-weight: bold;
}

.cast-facts {
  margin: var(--gap-xs) 0;
  color: var(--muted);
  font-size: var(--size-sm);
}

.fact + .fact::before {
  content: " / ";
}

.cast-languages,
.cast-bio {
  margin: var(--gap-xs) 0;
  font-size: var(--size-sm);
}

.cast-section {
  margin-top: var(--gap-xl);
}

/* キャスト詳細の写真（仕様008）。縦横比はばらばらなので、幅だけを抑える。
   HTML の width / height 属性から、ブラウザが読み込み前に比を算出する
   （height: auto がその条件。消すと写真が入った瞬間に文字が飛ぶ）。 */
.cast-photos {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cast-photos img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  list-style: none;
  margin: var(--gap-xs) 0;
  padding: 0;
}

.tag {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--accent-weak);
  padding: 0 var(--gap);
  font-size: var(--size-sm);
}

.empty {
  color: var(--muted);
}

.pagination {
  display: flex;
  gap: var(--gap-md);
  align-items: center;
  margin: var(--gap-md) 0;
}

/* 「2 / 5」の表示。前後のリンクより弱く見せて、押せないことを分からせる。 */
.page-current {
  color: var(--muted);
  font-size: var(--size-sm);
}

.breadcrumb {
  font-size: var(--size-sm);
  margin-top: 0;
}

/* ---- 記事（ブログ・仕様009） ---- */

/* このサービスの入口はマッチング画面ではなくブログ（overview §1）。
   **一覧で読ませるのではなく、開かせるのが仕事。**
   だから抜粋は控えめにして、題名だけを強く見せる。

   カードの作りは .cast-list / .cast-card と揃える。
   一覧が2種類あって見え方が違うと、同じサイトに見えなくなる。 */

.article-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);       /* 区切りは gap で作る。カード側に margin を持たせない */
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: var(--gap-lg);
}

/* 題名。**カードの中で唯一の主色**にして、押せる場所を1つに絞る。
   見出しなので明朝（案Cの決め事は「見出しだけ明朝」）。
   下線は常時は出さず、乗せたときだけ出す。
   赤い題名が縦に並ぶと圧が強いので、常時下線までは足さない。 */
.article-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--size-md);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  font-weight: 600;
}

.article-title a {
  text-decoration: none;
}

.article-title a:hover {
  text-decoration: underline;
}

/* 書いた人と日付。**書いた人へ行けることが、このサービスでは本題**（§1）。
   日付より先に名前が来る並びを、テンプレート側で保っている。 */
.article-meta {
  margin: var(--gap-xs) 0 0;
  color: var(--muted);
  font-size: var(--size-sm);
}

.article-date {
  color: var(--muted);
}

/* 抜粋。読ませるためではなく「何の話か」を伝えるためのもの。
   本文より弱く見せる。 */
.article-excerpt {
  margin: var(--gap-sm) 0 0;
  color: var(--muted);
  font-size: var(--size-sm);
}

/* ---- 記事の本文（詳細ページ） ---- */

.article {
  margin: 0;
}

/* 本文は linebreaksbr で改行だけが効く（仕様009: 記法を覚えさせない）。
   段落の区切りが <br> だけなので、**行間を詰めると段落が見分けられなくなる。**
   --lh（1.8）をそのまま効かせる。 */
.article-body {
  margin: var(--gap-md) 0 0;
  line-height: var(--lh);
}

/* 記事の写真。縦横比はばらばらなので幅だけ抑える（.cast-photos と同じ考え方）。
   HTML の width / height 属性から読み込み前に比が決まる
   （height: auto がその条件。消すと写真が入った瞬間に文字が飛ぶ）。 */
.article-photos {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  list-style: none;
  margin: var(--gap-lg) 0 0;
  padding: 0;
}

.article-photos img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* 記事の終わりに置く導線（書いた人へ／この人の記事をすべて見る）。
   本文と地続きに見えないよう、罫で区切る。 */
.article-footer-links {
  margin: var(--gap-xl) 0 0;
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line);
  font-size: var(--size-sm);
}

/* トップの「新着記事」のかたまり。.cast-section と同じ間隔にする。 */
.home-section {
  margin-top: var(--gap-xl);
}

/* ---- フッタ ---- */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--gap-xl);
  padding: var(--gap-md);
  color: var(--muted);
  font-size: var(--size-xs);
}

/* ---- キーボードで操作する人のために ---- */
/* :focus ではなく :focus-visible。マウスで押したときには出ず、
   キーボード操作のときだけ出る。「押すたびに枠が出る」煩わしさが無い。 */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 動きを減らす設定にしている人への配慮。
   いまアニメーションは無いが、後から足したときに効くよう先に置いておく。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}