/*
 * VAMOS Crew — コンポーネント別スタイル
 * base.css のトークンを var(--...) で参照する。生の #rrggbb は使わない。
 * Phase C5 Task 2: ボタン/フォーム/テーブル/カード/バッジ/アラート/定義リスト/ページング。
 * (この時点ではCSSのみ。テンプレへの適用はTask3/4)
 */

/* ── ボタン ── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.2;
  white-space: nowrap;
  min-height: var(--control-h);
  border: 1px solid transparent;
  /* 丸いボタン(本人指示・2026-09-23)。黄の上は墨文字（白は読めない） */
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
}

.button:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

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

.button--ghost {
  background: transparent;
  color: var(--color-primary);
  border: var(--border);
}

.button--ghost:hover {
  background: var(--color-surface);
  color: var(--color-primary-hover);
}

/* 文字だけのボタン（「あとで設定する」のように、主役ではない操作に使う） */
.button--link {
  background: transparent;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-inline: var(--space-1);
}

.button--link:hover {
  background: transparent;
  color: var(--color-primary-hover);
}

.button--danger {
  background: var(--color-danger);
  color: var(--color-primary-contrast);
}

.button--danger:hover {
  background: var(--color-danger);
  filter: brightness(0.9);
}

.button--small {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-2);
  font-size: var(--fs-small);
}

/* ── フォーム ── */
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-2);
}

.field label {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-0);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control-h);
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: var(--lh-body);
}

.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--color-danger);
}

.form-error {
  color: var(--color-danger);
  font-size: var(--fs-small);
  margin-top: var(--space-0);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* スマホ: ボタンを全幅・縦積みにして押しやすく（改行の乱れも防ぐ） */
@media (max-width: 40rem) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .button {
    width: 100%;
  }
}

/* ── テーブル ── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

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

.table th {
  background: var(--color-surface);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* スマホ切替: .table--cards は行をカード化しラベルを付ける */
@media (max-width: 40rem) {
  .table--cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .table--cards,
  .table--cards tbody,
  .table--cards tr {
    display: block;
    width: 100%;
  }

  .table--cards tr {
    margin-bottom: var(--space-2);
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--space-1);
  }

  .table--cards td {
    display: block;
    border-bottom: none;
    padding: var(--space-0) var(--space-1);
    text-align: right;
  }

  .table--cards td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    color: var(--color-text-muted);
    margin-inline-end: var(--space-2);
  }
}

/* ── カード/タイル ── */
.card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: clamp(var(--space-2), 3vw, var(--space-3));
}

.card-grid {
  display: grid;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* 統計カード(件数表示。数字を大きく・ラベルを下に) */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

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

/* カード内も縦リズムを揃える(dl/注意事項/ボタン等が詰まらないように) */
.card > * + * {
  margin-block-start: var(--space-3);
}

/* 統計カードは flex gap で詰めるので上記リズムを打ち消す */
.card.stat > * + * {
  margin-block-start: 0;
}

/* 補助の文字（一覧の中の学年やLINE名など、主役ではない情報） */
.muted {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ── バッジ(状態色) ── */
.badge {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: var(--space-0) var(--space-1);
  font-size: var(--fs-small);
  line-height: 1.4;
  /* 「インタ／ーン」のように語の途中で折り返さない（本人指摘・2026-10-13） */
  white-space: nowrap;
}

.badge--draft {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.badge--open {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--closed {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--selected {
  background: var(--color-selected-bg);
  color: var(--color-selected);
}

.badge--done {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.badge--cancelled {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge--applied {
  background: var(--color-applied-bg);
  color: var(--color-primary);
}

.badge--completed {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--absent {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* 募集状況（RecruitmentStatus）。案件の状態とは別軸のため、状態バッジと色が被らないようにする */
.badge--partial {
  background: var(--color-applied-bg);
  color: var(--color-primary);
}

.badge--full {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--extra {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.badge--none {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

/* ── お知らせ（アプリ内通知） ── */
.nav-badge {
  display: inline-block;
  min-width: 1.25em;
  margin-left: 0.25em;
  padding: 0 0.35em;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-primary-contrast);
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: center;
}

.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.notice {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.notice--unread {
  border-color: var(--color-accent);
  background: var(--color-highlight);
}

.notice-body {
  display: block;
  padding: var(--space-2);
  color: inherit;
  text-decoration: none;
}

.notice-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-0);
}

.notice-title {
  font-weight: 600;
}

.notice-text {
  display: block;
}

.notice-date {
  display: block;
  margin-top: var(--space-0);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ── 取材カレンダー（月表示・自前実装） ── */
.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.cal-title {
  margin: 0;
  flex: 1 1 auto;
}

/* インターンの升目。取材と見分けが付くように紫の線を引く（本人指示・2026-09-24） */
.cal-item--intern {
  box-shadow: inset 3px 0 0 var(--color-mark-intern);
}

/* 実績がまだ登録されていない取材。升目の中で目立たせ、押すと登録画面へ（本人指示・2026-09-23） */
.cal-item--todo {
  background: var(--color-danger-bg);
  box-shadow: inset 3px 0 0 var(--color-danger);
}

.cal-todo {
  display: block;
  color: var(--color-danger);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* 「案件を作成」はカレンダーの右上（本人指示・2026-09-23） */
.cal-new { margin-inline-start: auto; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* 幅が足りないときは横スクロールさせ、本文側が横に伸びないようにする */
.cal-scroll {
  overflow-x: auto;
}

/* 管理のトップ（本人指示・2026-09-23）。パソコンで見る前提で、
   左にカレンダー、右に気づきたいこと（実績未登録・締切・件数）を並べる。
   幅が狭いときは縦に積む */
.admin-grid {
  display: grid;
  gap: var(--space-3);
  align-items: start;
}

@media (min-width: 64rem) {
  .admin-grid {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.admin-main { min-width: 0; }

.admin-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 右側の一覧。1件を3行（日付・企業名・補足）で出す */
.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.side-list a {
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
}

.side-list a:hover { background: var(--color-highlight); }

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

.side-name { font-weight: 700; }

/* 右側のカードは中身を詰めて出す（カード共通の縦リズムは効かせない） */
.admin-side .card > * + * { margin-block-start: var(--space-1); }

.cal {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.cal-dow {
  padding: var(--space-0) var(--space-1);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.cal-dow--0 { color: var(--color-danger); }
.cal-dow--6 { color: var(--color-primary); }

.cal-cell {
  vertical-align: top;
  height: 7.5rem;   /* パソコンで見る前提。1日に2件入っても読める高さ */
  padding: var(--space-0);
  border: 1px solid var(--color-border);
}

.cal-cell--out {
  background: var(--color-surface);
}

.cal-cell--today {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.cal-daybar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-0);
}

.cal-day {
  font-size: var(--fs-small);
  font-weight: 600;
}

.cal-day--0 { color: var(--color-danger); }
.cal-day--6 { color: var(--color-primary); }

.cal-cell--out .cal-day {
  color: var(--color-text-muted);
}

.cal-add {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  padding: 0 var(--space-0);
}

.cal-add:hover,
.cal-add:focus {
  color: var(--color-primary);
}

.cal-item {
  display: block;
  margin-top: 2px;
  padding: 2px var(--space-0);
  border-radius: var(--radius-sm);
  border-left: 3px solid currentColor;
  font-size: var(--fs-small);
  line-height: 1.3;
  text-decoration: none;
  overflow: hidden;
}

.cal-item .cal-name {
  display: block;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-item .cal-time,
.cal-item .cal-count {
  color: var(--color-text-muted);
  font-size: 0.85em;
}

.cal-item .cal-count {
  margin-left: 0.25em;
}

/* 募集状況の色。バッジと同じ配色を使い、一覧・詳細と見た目を揃える */
.cal-item--open    { background: var(--color-success-bg); color: var(--color-success); }
.cal-item--partial { background: var(--color-applied-bg); color: var(--color-primary); }
.cal-item--full    { background: var(--color-warning-bg); color: var(--color-warning); }
.cal-item--extra   { background: var(--color-info-bg);    color: var(--color-info); }
.cal-item--closed  { background: var(--color-warning-bg); color: var(--color-warning); }
.cal-item--none    { background: var(--color-surface);    color: var(--color-text-muted); }

@media (max-width: 40rem) {
  .cal-cell {
    height: 5rem;
  }

  .cal-item .cal-time,
  .cal-item .cal-count {
    display: none;   /* 狭い画面では企業名だけにする */
  }
}

/* ── 学生カレンダー（/calendar・スマホで予定を見る）──
 * 管理者用(.cal)と違い、スマホ幅でも横スクロールさせずに7列を収める。
 * 升目には印(点)だけを付け、中身は下の一覧で読ませる（狭いマスに文字を詰めない）。 */
.scal-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-1);
}

.scal-title {
  justify-content: center;
  margin: 0;
  white-space: nowrap;   /* 「新着」が付いても月の文字を折り返さない */
}

/* 前後の月のボタンは、月の文字を押し出さないところまで縮める */
.scal-head .button {
  padding: 0 var(--space-1);
  min-width: 0;
}

/* 次の月に募集中の取材があるときの吹き出し（本人指示・2026-09-23）。
   ボタンの見た目は変えず、その上に小さな吹き出しを出して知らせる */
.scal-bubble {
  position: relative;
  width: fit-content;
  margin: 0 0 0.6rem auto;   /* 右寄せ＝「次の月」のボタンの上 */
  padding: var(--space-0) var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-mark-open);
  color: var(--color-primary-contrast);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
}

/* 吹き出しのしっぽ。ボタンの方（下）を向かせる */
.scal-bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 1.2rem;
  border: 0.35rem solid transparent;
  border-block-start-color: var(--color-mark-open);
}

.scal-thismonth {
  text-align: center;
  font-size: var(--fs-small);
  margin-block: var(--space-1) 0;
}

.scal-legend {
  display: flex;
  /* 1行に収める（本人指示・2026-10-13）。折り返すとカレンダーが下へ押し下がる */
  flex-wrap: nowrap;
  justify-content: center;
  /* 幅の狭い端末では間隔も詰めて、4つを横1列に収める */
  gap: clamp(0.35rem, 2vw, var(--space-1));
  margin-block-end: var(--space-1);
  /* 狭い画面では少しだけ縮めて1行を保つ（最小でも12pxは確保する） */
  font-size: clamp(0.75rem, 3.2vw, var(--fs-small));
  color: var(--color-text);   /* 薄い灰色だと読みにくい（本人指示・2026-09-23） */
}

.scal-key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0);
  white-space: nowrap;
}

.scal-key::before,
.scal-dot {
  content: "";
  display: inline-block;
  inline-size: 0.7rem;   /* 小さいと何色か分からないので、はっきり見える大きさにする */
  block-size: 0.7rem;
  border-radius: 50%;
}

/* 印は3種類（本人指示・2026-09-23）。決まった取材／申請中（返事待ち）／募集中の取材。
   3つとも塗りつぶして、色そのもので見分けられるようにする */
.scal-key--fixed::before,
.scal-dot--fixed { background: var(--color-mark-fixed); }

.scal-key--applied::before,
.scal-dot--applied { background: var(--color-mark-applied); }

.scal-key--open::before,
.scal-dot--open { background: var(--color-mark-open); }

/* インターンは取材と色を分ける（本人指示・2026-09-24） */
.scal-key--intern::before,
.scal-dot--intern { background: var(--color-mark-intern); }

/* もう申請できない取材（満員・締切・参加者決定）。説明には並べず、押したときに言葉で出す */
.scal-dot--closed { background: var(--color-text-muted); }

/* 学校の学年暦は、升目の中に言葉で出す（印は取材だけ・本人指示 2026-09-23）。
   マスが狭いので、小さい文字で1行に収め、はみ出す分は … で切る */
/* 帯の高さぶんの場所取り（帯そのものは absolute で重ねるため） */
.scal-tagspace {
  display: block;
  block-size: 0.95rem;
}

/* 帯本体。2日以上続く予定は span で横に伸ばし、1本につなげる */
.scal-tag {
  position: absolute;
  inset-inline-start: 2px;
  inset-block-end: 3px;
  inline-size: calc(100% - 4px);
  padding-inline: 2px;
  border-radius: var(--radius-sm);
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--color-info-bg);
  color: var(--color-info);
  z-index: 1;
}

/* 週をまたぐ帯は週ごとに区切れる（Calendar::weeks の1行が上限＝7マス） */
.scal-tag--span2 { inline-size: calc(200% - 4px); }
.scal-tag--span3 { inline-size: calc(300% - 4px); }
.scal-tag--span4 { inline-size: calc(400% - 4px); }
.scal-tag--span5 { inline-size: calc(500% - 4px); }
.scal-tag--span6 { inline-size: calc(600% - 4px); }
.scal-tag--span7 { inline-size: calc(700% - 4px); }

.scal-tag--exam {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.scal-tag--holiday {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.scal-school {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-0);
  margin-block: 0 var(--space-1);
}

.badge--school {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* 種類ごとの色（試験は注意を引く、休みは控えめに） */
.badge--school-exam {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.badge--school-holiday {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.scal-source {
  margin-block-start: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.scal {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.scal-cell {
  position: relative;   /* 学校の予定の帯（.scal-tag）をこのマス基準で重ねる */
  padding: 2px;
  text-align: center;
  vertical-align: top;
  /* 枠線も塗りも置かない（本人指示・2026-09-23）。日付と印だけで見せる */
}

.scal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-block-size: var(--control-h);
  padding-block: var(--space-0);
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.scal-day--0 { color: var(--color-danger); }
.scal-day--6 { color: var(--color-primary); }

/* 押せる日でも色は塗らない。触ったときだけ薄く反応する */
a.scal-day:hover,
a.scal-day:focus-visible { background: var(--color-surface); }

.scal-cell--out .scal-day {
  color: var(--color-text-muted);
  font-weight: 400;
}

.scal-num {
  display: inline-grid;
  place-items: center;
  inline-size: 1.9em;
  block-size: 1.9em;
  line-height: 1;
  border-radius: 50%;
}

.scal-cell--today .scal-num {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* いま下に出している日（押した日）。マスを四角のまま黄色で塗り、枠で囲む（本人指示・2026-09-23） */
/* 枠線は border ではなく outline で描く。表の線をまとめる仕組み（border-collapse）だと、
   上の線だけ隣のマスの薄い線に負けて、四方が同じ色にならないため */
.scal-cell--selected {
  background: var(--color-highlight);
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}

/* 選んだ日の学校の予定（正式な名前で出す） */
.scal-schoolcard { padding: var(--space-2); }
.scal-schoolrow { margin: 0; }
.scal-schoolrow + .scal-schoolrow { margin-block-start: var(--space-1); }

.scal-dots {
  display: flex;
  gap: 4px;
  min-block-size: 0.7rem;   /* 印の大きさに合わせる。予定が無い日もこの高さを取る */
}

.scal-dayblock + .scal-dayblock {
  margin-block-start: var(--space-3);
}

.scal-date {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* 升目から飛んできた日を目立たせる */
.scal-dayblock:target .scal-date { color: var(--color-primary); }

.scal-today {
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--fs-small);
  font-weight: 600;
}

.scal-list {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.scal-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-0) var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-1);
  color: var(--color-text);
  text-decoration: none;
}

.scal-item:hover,
.scal-item:focus-visible {
  background: var(--color-surface);
  color: var(--color-text);
}

.scal-item-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
}

.scal-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scal-sub {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ── 学生ホーム（旅行アプリの「予約中の便」にあたる画面・本人指示 2026-09-23）── */
/* 画面に出さず、読み上げソフトにだけ伝える見出し（本人指示・2026-09-24で挨拶を消したため） */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 次の取材カード。ベタ塗りの黄は目に痛いので薄い黄にする。
   枠の左に濃い線は置かない（本人指示・2026-09-23） */
.next-card {
  display: block;
  background: var(--color-highlight);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  text-decoration: none;
}

.next-card--empty {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  text-align: center;
}

.next-card > * + * { margin-block-start: var(--space-1); }

.next-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.next-label {
  font-size: var(--fs-small);
  font-weight: 700;
}

/* 募集のタイトルと、その下の要約（インターン・本人指示 2026-09-24） */
.pv-title {
  margin: 0;
  font-weight: 700;
}

.pv-lead {
  margin-block: var(--space-1) var(--space-2);
  color: var(--color-text);
  white-space: pre-wrap;   /* 自由記述の改行をそのまま出す */
}

/* 自由記述は長くなるので、入力欄も高めにする */
.textarea--tall { min-height: 9rem; }

/* 会社名（参加が決まった取材だけに出る・本人指示 2026-09-23） */
.next-company {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary);
}

.next-date {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.next-countdown {
  margin: 0;
  font-weight: 700;
}

.next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  gap: var(--space-1);
  padding-block-start: var(--space-1);
  border-block-start: 1px solid var(--color-border-strong);
}

.next-key {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.next-value {
  display: block;
  font-weight: 700;
}

/* 薄い黄の上なので、ボタンだけは濃い黄で押せる場所だと分かるようにする */
.next-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-h-sm);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  font-size: var(--fs-small);
}

.next-card:hover .next-more,
.next-card:focus-visible .next-more { background: var(--color-accent-hover); }

.next-empty { margin: 0; }

/* ホームの見出しと中身のまとまり */
.home-section > h2 { margin-block-end: var(--space-1); }

/* 画面の中の切り替え（決まった取材/申請中/取材済み）。ふつうのリンクで、JSは使わない */
.segs {
  display: flex;
  gap: var(--space-0);
  margin-block-end: var(--space-2);
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: var(--border);
}

.seg {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-block-size: var(--control-h-sm);
  padding-inline: var(--space-0);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.seg[aria-current] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.seg-count {
  padding-inline: 0.35em;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: 0.7rem;
}

.seg[aria-current] .seg-count {
  background: var(--color-on-accent);
  color: var(--color-accent);
}

/* 「取材」タブ（自分の取材を 決まった/申請中/終わった に分けて並べる・本人指示 2026-09-23）。
   会社名はここには出さない。詳細を開いたときにだけ出る */
.iv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.iv {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  color: var(--color-text);
  text-decoration: none;
}

/* カード共通の縦リズム（.card > * + *）は、この中では gap に任せる */
.iv > * + * { margin-block-start: 0; }

.iv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.iv-date {
  font-weight: 700;
}

/* 会社名（参加が決まった取材だけに出る・本人指示 2026-09-23） */
.iv-company {
  font-weight: 700;
  color: var(--color-primary);
}

.iv-row {
  display: flex;
  gap: var(--space-1);
  font-size: var(--fs-small);
}

.iv-key {
  flex: 0 0 3em;
  color: var(--color-text-muted);
}

.iv-more {
  margin-block-start: var(--space-0);
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: 700;
}

.iv-note {
  margin-block-start: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* おすすめの取材（申請できるものを取材日の近い順に数件）。
   横に並べて指で送る（本人指示・2026-09-23）。ページ全体は横に動かさず、この帯の中だけで動かす */
.reco-list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* カードの影が切れないよう、上下に少し余白を取る */
  padding-block: 2px;
  /* ★右だけ画面の端まで伸ばし、次のカードの端をのぞかせる（本人指示・2026-10-14）。
     こうするとカード自体は他のカードと同じ幅のまま、「まだ続きがある」ことが分かる。
     padding-inline-end は、最後まで送ったときに右の余白を他の画面と合わせるため */
  margin-inline-end: calc(-1 * var(--container-pad-inline));
  padding-inline-end: var(--container-pad-inline);
  scroll-padding-inline: 0;
}

/* ★カードは件数に関わらず幅いっぱい（本人指摘・2026-10-13）。
   以前は「次のカードが少し見える」ように80%幅にしていたが、
   上の「決まっている予定」のカードより小さく、左に寄って見えてしまうため揃える。
   指で送る動きは今までどおり（1枚ずつ止まる） */
.reco-list > .reco {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.reco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  /* 狭い画面では、日付とラベルを無理に同じ行へ押し込まず、入らなければ下の行へ送る */
  flex-wrap: wrap;
}

.reco-date {
  /* 日付は折り返さない（「2026/10/15」と「（木）」が泣き別れないように） */
  white-space: nowrap;
  font-size: 1.15rem;
  font-weight: 700;
}

.reco > * + * { margin-block-start: var(--space-2); }

.reco-actions {
  display: flex;
  gap: var(--space-1);
}

.reco-actions .button { flex: 1 1 0; }

.reco-more {
  margin-block: var(--space-1) 0;
  text-align: center;
  font-size: var(--fs-small);
}

/* VAMOSマガジンの新着記事（サムネイル＋見出し） */
/* 記事は横に並べて指で送る（本人指示・2026-09-24。縦に積むと写真が小さくなるため）。
   おすすめの取材と同じ送り方にそろえている（.reco-list 参照） */
.mag-list {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block: 2px;
  scroll-padding-inline: var(--space-1);
}

.mag {
  flex: 0 0 min(72%, 17rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-1);
  color: var(--color-text);
  text-decoration: none;
}

.mag:hover,
.mag:focus-visible { background: var(--color-surface); }

.mag-thumb {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;   /* 横並びでは写真を上に大きく出す */
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.mag-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  min-inline-size: 0;
}

.mag-title {
  font-weight: 700;
  line-height: 1.4;
  /* 長い見出しは3行で打ち切る */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

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

/* よく使う入口（丸いアイコンの並び） */
.quick {
  display: flex;
  gap: var(--space-2);
}

.quick a {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0);
  padding-block: var(--space-1);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-small);
}

.quick-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--color-highlight);
  color: var(--color-primary);
}

.quick a:hover .quick-icon,
.quick a:focus-visible .quick-icon {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.quick-label { font-weight: 600; }

.quick-count {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 15%;
  min-inline-size: 1.4em;
  padding-inline: 0.3em;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-primary-contrast);
  font-size: 0.7rem;
  line-height: 1.6;
  text-align: center;
}

/* ── ロゴ（ヘッダー・開いた直後の表示）── */
/* スマホ幅ではブランド行が横いっぱいに広がるため、中央寄せは justify-content で行う
   （margin auto だけでは効かない。base.css の .brand / @media 参照） */
.student-header .container { position: relative; }

.brand--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

.brand--logo img {
  block-size: 2rem;
  inline-size: auto;
}

/* ヘッダー右端の丸いアイコン（本人指示・2026-09-24）。押すとプロフィール画面へ。
   ロゴを中央に保つため、場所を取らないよう右端に重ねて置く */
.header-profile {
  position: absolute;
  overflow: hidden;   /* 写真・人の影を丸で切り取る */
  inset-inline-end: var(--container-pad-inline);
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--color-avatar-bg);
  color: var(--color-avatar-mark);
  font-weight: 700;
  text-decoration: none;
}

.header-profile:hover,
.header-profile:focus-visible {
  background: var(--color-avatar-bg-hover);
  color: var(--color-avatar-mark);
}

.header-profile-initial { line-height: 1; }

/* 写真を登録している人は、頭文字の代わりに写真を丸く出す（本人指示・2026-10-13） */
.header-profile-photo {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* アイコンを押すと出るメニュー（本人指示・2026-09-24）。details/summary なのでJSなしで開く */
.header-menu {
  position: absolute;
  inset-inline-end: var(--container-pad-inline);
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.header-menu .header-profile {
  position: static;
  transform: none;
  inset: auto;
  cursor: pointer;
  list-style: none;   /* summary の三角を消す */
}

.header-menu .header-profile::-webkit-details-marker { display: none; }

.header-menu-list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-1));
  z-index: 30;
  min-inline-size: 11rem;
  display: flex;
  flex-direction: column;
  padding: var(--space-0);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-1);
}

.header-menu-list a,
.header-menu-list button {
  display: block;
  inline-size: 100%;
  min-block-size: var(--control-h-sm);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.header-menu-list a:hover,
.header-menu-list a:focus-visible,
.header-menu-list button:hover,
.header-menu-list button:focus-visible {
  background: var(--color-highlight);
  color: var(--color-primary);
}

.header-menu-list form { margin: 0; }

/* プロフィール画面の頭の部分 */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.profile-avatar {
  display: inline-flex;
  overflow: hidden;   /* 人の影の肩を丸で切り取る */
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  background: var(--color-avatar-bg);
  color: var(--color-avatar-mark);
  font-size: 1.5rem;
  font-weight: 700;
  /* 写真のときは丸に合わせて切り取る（縦長・横長でも顔が真ん中に来る・本人指示 2026-10-13） */
  object-fit: cover;
}

.profile-name {
  font-size: var(--fs-3);
  font-weight: 700;
}

/* プロフィールの写真（丸いアイコン・本人指示 2026-10-13）。
   写真が無い人は頭文字を出すので、img と span のどちらでも同じ丸になるようにしている */
.avatar {
  display: inline-flex;
  overflow: hidden;   /* 人の影の肩を丸で切り取る */
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--color-avatar-bg);
  color: var(--color-avatar-mark);
  font-weight: 700;
  object-fit: cover;
}

/* 一覧に並べる小さいアイコン（管理画面の学生一覧・本人指示 2026-10-13） */
.avatar--sm {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  font-size: 1rem;
}

.student-photo-cell { inline-size: 3.5rem; }

/* URLとコピーボタンを横に並べる（ボタンはJSが作る） */
.copy-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.copy-row .input { flex: 1 1 16rem; }

.avatar--lg {
  inline-size: 6rem;
  block-size: 6rem;
  font-size: 2.25rem;
}

/* 写真を登録していない人は、頭文字ではなく人の影を出す（本人指示・2026-10-13）。
   肩のところは丸からはみ出させ、丸い枠側で切り取る（LINEの既定のアイコンと同じ見え方） */
.avatar-silhouette {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  color: inherit;
}

/* 写真を選ぶ欄（Authのプロフィール編集画面）。今の写真を左、操作を右に置く */
.photo-field-label {
  display: block;
  margin-block-end: var(--space-1);
}

.photo-field-body {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.photo-field-controls {
  flex: 1 1 14rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* 「ファイルを選択／選択されていません」というブラウザ既定の表示は出さず、
   ボタン1つ（写真を選ぶ）に見せる（本人指示・2026-10-13）。
   中のinputは隠すだけで消さないので、押せば今までどおり写真の選択が開く */
/* 見た目と文字の位置は .button とまったく同じにする（自前で組むと文字がずれるため）。
   ここでは「ラベルをボタンとして使う」ための差分だけを足す */
.photo-pick {
  align-self: flex-start;
  cursor: pointer;
}

/* ★入力欄の見出し用の指定（.field label）が勝ってしまい、
   文字が上に寄って小さくなっていた（本人指摘・2026-10-13）。ボタンとしての見え方を取り戻す */
.field label.photo-pick,
label.photo-pick {
  display: inline-flex;
  font-size: var(--fs-body);
  color: var(--color-on-accent);
  margin-bottom: 0;
}

/* キーボード操作でも、押せる場所がはっきり分かるようにする */
.photo-pick:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 選んだ写真の名前（JSが動く環境だけ中身が入る） */
.photo-chosen {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.photo-chosen:empty { display: none; }

.photo-field-controls .form-hint {
  margin-block-end: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* 最初のログインで出す「写真を設定しますか？」の画面（本人指示・2026-10-13） */
.photo-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-end: var(--space-3);
}

.photo-prompt-lead {
  font-size: var(--fs-3);
  font-weight: 700;
  margin-block-end: var(--space-0);
}

/* 開いた直後にロゴだけを中央に出し、短い時間で消える（JSなし・CSSのみ） */
.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  animation: splash-out .45s ease 1.1s forwards;
}

.splash img {
  inline-size: min(68vw, 22rem);
  block-size: auto;
  animation: splash-in .5s ease both;
}

@keyframes splash-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}

/* 動きを減らす設定の端末では出さない（画面を覆ったままにしない） */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}

/* ── 学生の画面下タブバー（スマホアプリと同じ位置に移動の入口を置く）──
 * アイコンはテンプレート内のインラインSVG（外部アイコンは使わない＝CSP維持）。
 * iPhoneのホームバーに重ならないよう、下端の余白は safe-area を足す。 */
/* 下のメニューは常に画面の下に貼り付ける（本人指示・2026-09-24）。
   ★スマホのブラウザはスクロール中に上下のバーが伸縮する。translateZ で自前の層にしておくと、
     その最中もちらついたりずれたりしにくい */
.tabbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 20;
  transform: translateZ(0);
  display: flex;
  background: var(--color-bg);
  border-top: var(--border);
  padding-block-end: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 3px rgba(44, 44, 44, .08);
}

.tabbar a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-block-size: var(--control-h);
  padding-block: var(--space-0);
  color: var(--color-text-muted);
  text-decoration: none;
}

.tabbar a[aria-current] { color: var(--color-primary); }

.tabbar a:hover,
.tabbar a:focus-visible { color: var(--color-primary); }

/* バッジを角に置くため、アイコンを基準にする */
.tabbar-icon {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

.tabbar-label {
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 600;
}

.tabbar-badge {
  position: absolute;
  inset-block-start: -0.3em;
  inset-inline-start: 60%;
  min-inline-size: 1.25em;
  padding-inline: 0.3em;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: var(--color-primary-contrast);
  font-size: 0.65rem;
  line-height: 1.5;
  text-align: center;
}

/* タブバーに隠れないよう、本文の下に余白を作る */
body.has-tabbar .site-footer {
  margin-block-end: calc(var(--control-h) + var(--space-3) + env(safe-area-inset-bottom, 0px));
}

/* 画面が短いときでも、いちばん下の内容がタブに隠れないようにする */
body.has-tabbar {
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

/* ── デモ表示の帯（管理者が学生画面を見ているとき）── */
.demo-bar {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--fs-small);
}

.demo-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.demo-bar a {
  color: inherit;
  font-weight: 600;
}

/* ── 一覧の絞り込み ── */
.filter {
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-row .field {
  flex: 1 1 10rem;
  min-width: 0;
}

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

/* ── アラート/通知 ── */
.alert {
  border-radius: var(--radius);
  padding: var(--space-2);
  border: 1px solid currentColor;
}

.alert--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.alert--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.alert--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.alert--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* ── 定義リスト ── */
.dl dt {
  font-weight: 700;
  color: var(--color-text);
}

.dl dd {
  margin-inline-start: 0;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
}

@media (min-width: 40rem) {
  .dl {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--space-1) var(--space-2);
  }

  .dl dt,
  .dl dd {
    margin-bottom: 0;
  }
}

/* ── ページング ── */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h-sm);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-1);
  border: var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
}

.pager a:hover {
  border-color: var(--color-border-strong);
  color: var(--color-primary);
}

.pager .pager__current,
.pager [aria-current="page"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* ── iOS「ホーム画面に追加」ヒント(Phase C7 Task3) ──
   iOS/iPadOSはインストールバナー非対応のため出す控えめな案内。
   既存の popover(60)/backdrop(65)/sheet(70) と衝突しないz-indexにする。 */
.pwa-ios-hint {
  position: fixed;
  z-index: 55;
  inset-inline: var(--space-2);
  bottom: var(--space-2);
  margin-inline: auto;
  max-width: min(28rem, calc(100vw - var(--space-2) * 2));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: opacity 160ms ease, transform 160ms ease;
}

.pwa-ios-hint__text {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text);
}

.pwa-ios-hint__close {
  flex: 0 0 auto;
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-0);
  font-size: var(--fs-3);
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

.pwa-ios-hint__close:hover {
  color: var(--color-text);
}

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

@media (prefers-reduced-motion: reduce) {
  .pwa-ios-hint {
    transition: none;
  }
}

/* ── 認証ページ(ログイン/リセット/2FA)の中央シェル ── */
.auth-shell {
  max-width: 24rem;
  margin-inline: auto;
  padding-block: var(--space-4);
}
.auth-head {
  text-align: center;
  margin-block-end: var(--space-3);
}
/* ログイン等の見出しはロゴを出す（本人指示・2026-09-23）。文字のVAMOSは使わない */
.auth-logo {
  display: block;
  inline-size: min(60%, 13rem);
  margin-inline: auto;
  block-size: auto;
}

.auth-title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.1;
  margin: 0;
  color: var(--color-text);
}
.auth-title .mark { color: var(--color-accent); }
.auth-sub {
  color: var(--color-text);
  font-weight: 700;
  margin-block-start: var(--space-2);
}
/* 認証カードのボタンは全幅で押しやすく */
.auth-card .form-actions .button { width: 100%; }
.auth-foot {
  text-align: center;
  margin-block-start: var(--space-3);
  font-size: var(--fs-small);
}

/* ── ポータル: 挨拶＋アプリカード ── */
.portal-head { margin-block-end: var(--space-3); }
.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* app-cardは gap で間隔を作るので .card の縦リズムを打ち消す */
.card.app-card > * + * { margin-block-start: 0; }
.app-ico {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 12px;
  background: var(--color-accent);
  color: var(--color-primary-contrast);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.25rem;
}
.app-body { flex: 1 0 auto; }
.app-body h3 { margin-block-end: var(--space-0); }
.app-body p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-small); }
.app-card .button { align-self: flex-start; }

/* ── 一覧/詳細カードの見出し行(日付＋状態を目立たせる) ── */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  flex-wrap: wrap;
}
.card-date {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
  letter-spacing: .01em;
}
/* 案件カード内の日付は詰めて、以降のメタ情報と分離 */
.card-head + .dl { margin-block-start: var(--space-2); }

/* ── 管理ページの見出し行(タイトル＋主アクションを両端に) ── */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  flex-wrap: wrap;
  margin-block-end: var(--space-3);
}
.page-head h1 { margin: 0; }
.page-head > .button { flex: 0 0 auto; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* テーブル行末のアクションは右寄せ・詰めて */
.table .row-action { white-space: nowrap; }
/* ページ見出し直下の補足行(案件の日付・企業名など) */
.page-sub {
  color: var(--color-text-muted);
  margin-block-start: calc(var(--space-3) * -1 + var(--space-1));
  margin-block-end: var(--space-3);
}
/* フォームのセクション分け(fieldset を素の枠に見せず、見出しで区切る) */
.form-section {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.form-section > legend {
  padding: 0;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-end: var(--space-2);
}
.form-section > legend::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 1.05em;
  background: var(--color-accent);
  border-radius: 2px;
}
.form-section .form-hint {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-block-start: calc(var(--space-1) * -1);
  margin-block-end: var(--space-2);
}