/* 団員ページでは旧デザインへの切り替えベルトを表示しない。 */
.site-switch-bar {
  display: none;
}

.brand__short-name {
  display: none;
}

/* ページヒーローの配色だけを団員ページ向けに差し替える。余白・文字サイズ等の
   メカニクスはsite.cssの.page-heroが共通トークン(--hero-*)経由で持つため、
   ここでは配色トークンの上書きのみ行う(2026-09-07一元化)。 */
.members-hero {
  --hero-gradient:
    radial-gradient(circle at 85% 20%, rgb(255 255 255 / 14%), transparent 28rem),
    linear-gradient(135deg, #173c4b, #245d6f);
  --hero-eyebrow-color: rgb(255 255 255 / 82%);
  --hero-description-color: rgb(255 255 255 / 82%);
}

.members-library {
  display: grid;
  gap: 1.5rem;
}

.members-login-wrap {
  width: min(100% - 2rem, 34rem);
}

.members-hero__path a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.members-hero__path a:hover {
  text-decoration-thickness: 0.13em;
}

.members-hero__notes {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--hero-description-color);
  font-size: 17px;
}

@media (max-width: 760px) {
  .members-hero__notes {
    margin-top: 8px;
    font-size: 15px;
  }
}

.members-hero__path-separator {
  white-space: pre;
}

.members-profile-wrap {
  width: min(100% - 2rem, 64rem);
}

.members-profile-section {
  padding-block: clamp(1.5rem, 5vw, 3rem);
}

.members-login-section,
.members-library-section,
.members-compact-section {
  padding-block: clamp(1.5rem, 5vw, 3rem);
}

.members-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

/* プロフィール画像カードと自己紹介カードを1つのグリッド枠に収め、
   常に画像のすぐ下(同じ列)に自己紹介が来るようにする。 */
.members-profile-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.members-profile-grid--onboarding {
  grid-template-columns: minmax(0, 36rem);
  justify-content: center;
}

.members-profile-card {
  align-content: start;
}

.members-profile-card h2,
.members-storage-summary {
  margin: 0;
}

.members-login {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.4rem, 4vw, 2.25rem);
  border: 1px solid rgb(24 68 82 / 14%);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1rem 2.5rem rgb(25 53 61 / 10%);
}

.members-login label,
.members-login label span {
  display: grid;
  gap: 0.45rem;
  font-weight: 700;
}

.members-login input[type="text"],
.members-login input[type="email"],
.members-login input[type="password"],
.members-login select,
.members-login textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgb(24 68 82 / 28%);
  border-radius: 0.65rem;
  background: #fff;
  color: inherit;
  font: inherit;
}

.members-login textarea {
  resize: vertical;
}

.members-bio-counter {
  margin: -0.2rem 0 0;
  color: #66757a;
  font-size: 0.8rem;
  text-align: right;
}

.members-account-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 1rem;
  margin: 0;
}

.members-account-details dt {
  color: #66757a;
  font-size: 0.85rem;
  font-weight: 700;
}

.members-account-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.members-storage-bar {
  height: 0.7rem;
  margin-bottom: 0.4rem;
  border-radius: 999px;
  background: #e6f2f4;
  overflow: hidden;
}

.members-storage-bar__used {
  height: 100%;
  border-radius: 999px;
  background: #176479;
}

.members-avatar-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

/* コンテナ幅を中央50%・左右チラ見せ20%ずつで分け合う。%指定は
   コンテナがどんな幅でも常に収まる(50+20+20=90%、残り10%は間の隙間分)。
   max-widthは、幅に余裕がある画面で不自然に大きくなりすぎないための上限
   (このmax-widthのぶん、デスクトップでの見た目はこれまでと変わらない)。
   aspect-ratio: 1で、%指定の幅に対して高さを追従させ正円を保つ。 */
.members-avatar-current__image {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 50%;
  max-width: 12rem;
  height: auto;
  aspect-ratio: 1;
}

.members-avatar-current__image-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #e6f2f4;
  box-shadow: 0 0.4rem 1rem rgb(25 53 61 / 10%);
}

.members-avatar-current__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .button__spinner等と同じ理由(UAスタイルシートよりこのdisplay指定の詳細度が
   勝ってしまう)で、:not([hidden])に限定しないとhidden属性があっても
   表示され続けてしまう(実機検証で確認：JS側はhidden=trueなのに見た目は
   バッジが消えなかった)。 */
.members-avatar-current__face-badge:not([hidden]) {
  position: absolute;
  right: 0.15rem;
  bottom: 0.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #2f9e5c;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0.15rem 0.35rem rgb(25 53 61 / 20%);
}

/* 顔認識APIの応答待ち（1〜2秒程度）の間、ボタンが固まって見えないように
   表示する簡易スピナー。currentColorを使うことで、置かれるボタンの配色
   （プライマリ・セカンダリなど）にそのまま馴染む。
   [hidden]は本来display:noneだが、.attendance-table__member等と同じ理由
   （UAスタイルシートよりこちらのdisplay指定の詳細度が勝ってしまう）で
   :not([hidden])に限定しないと、hidden属性があっても表示されてしまう
   （実機検証で確認：モーダルを開いた直後からスピナーが回っていた）。 */
.button__spinner:not([hidden]) {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: button-spinner-rotate 0.6s linear infinite;
}

/* 「確認中…」表示中もボタンの見た目のサイズ・位置が変わらないよう、
   通常時の幅(実機測定で136px = 8.5rem)を最小幅として固定する。 */
[data-avatar-crop-confirm] {
  min-width: 8.5rem;
}

@keyframes button-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.members-avatar-current__hint {
  margin: 0;
  color: #66757a;
  font-size: 0.85rem;
}

.members-avatar-carousel {
  display: flex;
  /* 親(.members-avatar-current)がalign-items: centerの縦方向flexのため、
     何も指定しないとこの要素は中身に合わせて縮む(shrink-to-fit)。中央画像・
     チラ見せの%指定はこのコンテナの幅が基準になるため、幅いっぱいに広げる。 */
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 横スワイプで前後の画像に切り替える。縦方向のページスクロールは
     妨げないよう、pan-yだけ許可する。 */
  touch-action: pan-y;
  cursor: grab;
}

.members-avatar-carousel:active {
  cursor: grabbing;
}

/* 前後の画像を、中央の画像と重ならない程度の間隔(コンテナのgap)を空けて
   チラ見せする。タップでその画像へ切り替えられる(クリックはJS側、見た目は
   ここだけで完結)。display は指定しない(buttonの既定display: inline-blockの
   ままにして、hidden属性のUAスタイル(display:none)をこちらのdisplay指定で
   上書きしてしまう既知のバグパターンを避ける)。
   幅はコンテナ幅の20%(中央は50%)。%指定はコンテナがどんな幅でも常に
   収まるため、画面幅ごとに縮小値を計算し直す必要がない。max-widthは、
   幅に余裕がある画面で不自然に大きくなりすぎないための上限。 */
.members-avatar-carousel__peek {
  position: relative;
  z-index: 1;
  flex: 0 0 20%;
  max-width: 6.5rem;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #e6f2f4;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.members-avatar-carousel__peek:hover,
.members-avatar-carousel__peek:focus-visible {
  opacity: 0.85;
}

.members-avatar-carousel__peek img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.members-avatar-current__counter {
  margin: 0;
  color: #66757a;
  font-size: 0.8rem;
}

.members-avatar-current__notice {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgb(199 155 75 / 12%);
  color: var(--color-navy-deep);
  font-size: 0.85rem;
}

.avatar-crop__hint {
  margin: -0.5rem 0 0;
  color: #66757a;
  font-size: 0.85rem;
}

.avatar-crop {
  display: flex;
  justify-content: center;
}

.avatar-crop__canvas {
  width: 17.5rem;
  height: 17.5rem;
  max-width: 100%;
  border-radius: 50%;
  background: #e6f2f4;
  touch-action: none;
  cursor: grab;
}

.avatar-crop__canvas:active {
  cursor: grabbing;
}

.members-login input:focus {
  border-color: #176479;
  outline: 3px solid rgb(23 100 121 / 18%);
}

.members-login__submit {
  width: 100%;
  margin-top: 0.25rem;
}

.members-login__error,
.members-login__notice {
  padding: 0.8rem 0.9rem;
  border-radius: 0.65rem;
}

.members-login__error {
  background: #fff0ef;
  color: #8b2622;
}

.members-login__notice {
  background: #eaf5f7;
  color: #174e5d;
}

/* 入力欄の直下に添える補足。エラー・お知らせほど目立たせない。 */
.members-login__hint {
  margin-top: -0.35rem;
  color: #66757a;
  font-size: 0.9rem;
  line-height: 1.5;
}

.members-login-help {
  margin-top: 1rem;
  color: #66757a;
  font-size: 1rem;
  text-align: center;
}

.members-login-help a {
  color: #176479;
  font-weight: 700;
}

.members-password-rule {
  color: #66757a;
  font-size: 0.88rem;
}

.members-login__error ul {
  margin: 0;
  padding-left: 1.25rem;
}

.members-account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(24 68 82 / 14%);
  border-radius: 0.8rem;
  background: #fff;
}

.members-account-actions {
  display: grid;
  gap: 0.45rem;
}

.members-push-status {
  margin: 0;
  font-size: 0.85rem;
  color: #66757a;
}

.members-account-actions__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.members-account-actions form {
  margin: 0;
}

@media (max-width: 760px) {
  .site-link-label--long {
    display: none;
  }

  .site-header .site-link-label--short {
    display: inline;
  }

  .site-header .brand__text {
    display: flex;
    min-width: 0;
  }

  .site-header .brand__full-name {
    display: none;
  }

  .site-header .brand__short-name {
    display: inline;
  }

  .site-header .brand__text strong {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0;
    white-space: nowrap;
  }

  .site-header .brand__text strong::before {
    content: "新宿区吹";
    font-size: 13px;
  }

  .site-header .brand__text strong:has(.brand__short-name)::before {
    display: none;
  }

  .site-header .brand__text .brand__short-name {
    font-size: 13px;
  }

  .site-header .brand__badge {
    margin-left: 0;
    font-size: 7px;
  }

  .site-header .brand__text small {
    margin-top: 1px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .members-profile-grid {
    grid-template-columns: 1fr;
  }
}

.button--danger {
  border-color: #8b2622;
  background: #8b2622;
}

.button--danger:hover {
  border-color: #6e1e1a;
  background: #6e1e1a;
}

.members-back {
  gap: 0.5rem;
  justify-self: start;
}

.site-link-label--short {
  display: none;
}

.members-back__icon {
  display: grid;
  /* rem で固定していたため、ボタンの文字が小さくなる幅ではアイコンだけが
     大きいまま残り、文字1行分の高さを超えてボタンの背を押し上げていた。
     隣に並ぶ「アルバム全体をZIPでダウンロード」より高くなる原因。
     ボタンの文字サイズに追従させ、行の高さ(1.4)に収める。
     0.95em × 1.47 ≒ 1.4em。 */
  font-size: 0.95em;
  width: 1.47em;
  height: 1.47em;
  box-sizing: border-box;
  margin-left: -0.1em;
  margin-right: -0.1em;
  padding-top: 2px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgb(255 255 255 / 22%);
  font-weight: 900;
  line-height: 1;
  /* ボタン左側の円弧の中心と、アイコンの中心を一致させる */
  transform: translateX(-0.34rem);
}

.members-whats-new {
  display: block;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-gold, #c79b4b);
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgb(25 53 61 / 8%);
  color: inherit;
}

.members-whats-new__body {
  margin: 0;
  line-height: 1.5;
  color: inherit;
}

.members-whats-new__body a {
  color: var(--color-wine, #8d3140);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.members-whats-new__body ul {
  margin: 0.3rem 0;
  padding-left: 1.2em;
}

.members-whats-new__body li + li {
  margin-top: 0.15rem;
}

.members-mail {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgb(25 53 61 / 8%);
  margin-bottom: 1.5rem;
}

.members-mail__subject {
  margin: 0 0 0.5rem;
}

.members-mail__meta {
  margin: 0 0 1.25rem;
  color: #667;
  font-size: 0.9rem;
}

.members-mail__body {
  line-height: 1.7;
  white-space: normal;
  word-break: break-word;
}

.members-mail__body a {
  color: var(--color-wine, #8d3140);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.members-mail__attachments {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e3e9ec;
}

.members-mail__attachments h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.members-mail__attachments ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.members-mail__attachments a {
  color: var(--color-wine, #8d3140);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.members-mail__attachments small {
  color: #66757a;
}

.members-whats-new__ref {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
}

.members-whats-new__ref a {
  color: var(--color-wine, #8d3140);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.members-folder-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.members-folder {
  display: flex;
  min-height: 7.5rem;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgb(24 68 82 / 14%);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgb(25 53 61 / 8%);
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.members-folder:hover {
  transform: translateY(-2px);
  box-shadow: 0 1rem 2.4rem rgb(25 53 61 / 13%);
}

.members-folder__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.8rem;
  background: #e6f2f4;
  color: #176479;
  font-size: 1.15rem;
  font-weight: 800;
}

.members-folder__icon img {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
}

.members-folder__icon--doc { background: #e4edf8; color: #2b5a8c; }
.members-folder__icon--survey { background: #fbe9e0; color: #c2542a; }
.members-folder__icon--calc { background: #faf1de; color: #9c6b1c; }
.members-folder__icon--music { background: #f7e8ec; color: #8d3140; }
.members-folder__icon--audio { background: #e8e9f8; color: #4340a0; }
.members-folder__icon--video { background: #eceef5; color: #414b6b; }
.members-folder__icon--photo { background: #fdeaf1; color: #b23d6b; }
.members-folder__icon--attendance { background: #e6f5ec; color: #1f7a4d; }
.members-folder__icon--schedule { background: #e3f4fa; color: #146a8c; }
.members-folder__icon--playlist { background: #e1f4ee; color: #147a63; }
.members-folder__icon--roster { background: #f2e9fa; color: #7238a1; }
.members-folder__icon--recruitment { background: #fdf1de; color: #a86a13; }
.members-folder__icon--mail { background: #e6f0fb; color: #2a63a8; }
.members-folder__icon--settings { background: #edf0f1; color: #4c5a61; }
.members-folder__icon--general-meeting { background: #eaf0e6; color: #4a7a2a; }

.general-meeting-detail-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: #fff;
  margin-bottom: 0.8rem;
}

.general-meeting-detail-table th,
.general-meeting-detail-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgb(24 68 82 / 12%);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.general-meeting-detail-table td.general-meeting-detail-table__comment {
  white-space: normal;
  min-width: 12em;
}

/* スマホ幅では横スクロールが発見されにくいため、表そのものを
   1行=1カードのブロック表示に組み替える。各セルの見出しは
   data-label属性を::beforeで表示することでth行の代わりにする。 */
@media (max-width: 760px) {
  .general-meeting-detail-table {
    min-width: 0;
  }

  .general-meeting-detail-table thead {
    display: none;
  }

  .general-meeting-detail-table,
  .general-meeting-detail-table tbody,
  .general-meeting-detail-table tr,
  .general-meeting-detail-table td {
    display: block;
    width: 100%;
  }

  .general-meeting-detail-table tr {
    margin-bottom: 0.8rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgb(24 68 82 / 14%);
    border-radius: 0.65rem;
  }

  .general-meeting-detail-table td {
    padding: 0.3rem 0;
    border-bottom: 0;
    white-space: normal;
  }

  .general-meeting-detail-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 700;
  }

  .general-meeting-detail-table td.general-meeting-detail-table__comment {
    min-width: 0;
  }

  /* 「番号」「団員」は見出しを省き、"1．氏名"のように1行にまとめて
     縦の行数を減らす。display:blockのwidth:100%を引き継いだままだと
     inline-blockにしても折り返されるため、幅もautoに戻す。 */
  .general-meeting-detail-table td[data-label="番号"],
  .general-meeting-detail-table td[data-label="団員"] {
    display: inline-block;
    width: auto;
    padding: 0.3rem 0 0;
  }

  .general-meeting-detail-table td[data-label="番号"] {
    font-weight: 700;
    color: var(--color-navy);
  }

  .general-meeting-detail-table td[data-label="番号"]::before,
  .general-meeting-detail-table td[data-label="団員"]::before {
    display: none;
  }

  .general-meeting-detail-table td[data-label="番号"]::after {
    content: "．";
  }

  /* 「投票」「集計票数」は見出しと内容を"投票：委任 → ..."のように
     同じ行にまとめる(見出しの::beforeをinlineにして続けて表示する)。 */
  .general-meeting-detail-table td[data-label="投票"]::before,
  .general-meeting-detail-table td[data-label="集計票数"]::before {
    content: attr(data-label) "：";
    display: inline;
    margin-bottom: 0;
  }

  /* コメントが空の議案・団員は、「コメント」の見出し自体も表示しない。 */
  .general-meeting-detail-table td.general-meeting-detail-table__comment:empty {
    display: none;
  }
}

.general-meeting-detail-table th {
  color: var(--color-navy);
  background: var(--color-tint);
}

/* [hidden]の既定display:noneより、このクラスのdisplay指定の詳細度が
   勝ってしまう(.button__spinner等と同じ既知パターン)ため、:not([hidden])
   に限定する。 */
.survey-question__comment:not([hidden]) {
  display: block;
  margin-top: 1rem;
}

.survey-question__comment textarea,
.survey-question__comment select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgb(24 68 82 / 20%);
  border-radius: 0.65rem;
  background: #fff;
  color: inherit;
  font: inherit;
}

.survey-question__comment textarea {
  resize: vertical;
}

.general-meeting-agenda-card--error {
  border-color: #8b2622;
  box-shadow: 0 0 0 2px rgb(139 38 34 / 25%);
}

.general-meeting-agenda-error {
  margin: 0.4rem 0 0.6rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.4rem;
  background: #fff0ef;
  color: #8b2622;
  font-weight: 700;
}

.general-meeting-submit-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.general-meeting-submit-summary {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 40vh;
  overflow-y: auto;
}

.general-meeting-submit-summary li {
  padding: 0.6rem 0.8rem;
  border: 1px solid rgb(24 68 82 / 14%);
  border-radius: 0.6rem;
  background: #f7fafb;
}

.general-meeting-submit-summary li + li {
  margin-top: 0.5rem;
}

.general-meeting-attendance-toggle .survey-question__choice span {
  font-weight: 700;
}

/* [hidden]の既定display:noneより、このクラスのdisplay指定の詳細度が
   勝ってしまう(.button__spinner等と同じ既知パターン)ため、:not([hidden])
   に限定する。 */
.general-meeting-attendance-toggle__note:not([hidden]) {
  display: block;
  margin: 0.4rem 0 0 1.9rem;
  color: #c0392b;
  font-size: 0.82rem;
}

.general-meeting-bulk-delegate-block .survey-question__comment select {
  margin-top: 0.6rem;
}

/* 直接の親(.members-library)がdisplay:grid; gap:1.5remのため、関連する
   数行の<p>を個別のgrid項目のままにすると行間が広くなりすぎる。
   1つのブロックにまとめて中は狭いmarginで詰める。 */
.general-meeting-count-summary {
  display: grid;
  gap: 0.4rem;
}

.general-meeting-count-summary p {
  margin: 0;
}

.general-meeting-count-summary__key-line {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
}

/* .general-meeting-count-summary p { margin: 0; } (class+要素セレクタ)より
   詳細度を上げる必要があるため、親クラスと組み合わせて指定する。 */
.general-meeting-count-summary p.general-meeting-count-summary__key-line {
  margin-bottom: 0.8rem;
}

/* 議題本文・補足には資料リンクなど長いURLがそのまま貼られることがあり、
   折り返せないとスマホ幅で横にはみ出す。overflow-wrapは継承するため、
   カード側で指定しておけば本文・補足のどちらも折り返せる。 */
.general-meeting-agenda-card {
  margin-bottom: 1.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #d9e2ec;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 30px rgb(16 42 67 / 6%);
  overflow-wrap: anywhere;
}

/* 議題一覧の手前に表示する前文(開催案内・資料リンク等)。議題カードと
   同じ見た目にして、議題との連続性を持たせる。 */
.general-meeting-preface {
  margin-bottom: 1.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #d9e2ec;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 30px rgb(16 42 67 / 6%);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.general-meeting-agenda-card:has(textarea[name="comment"]) {
  padding-bottom: calc(clamp(1rem, 3vw, 2rem) * 2 / 3);
}

.general-meeting-agenda-card__title {
  margin: 0 0 0.8rem;
  font-size: 1.15rem;
  color: var(--color-navy);
}

.general-meeting-summary-tree {
  margin: 0.15rem 0;
  padding-left: 1.3em;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-navy);
}

.general-meeting-summary-tree > li {
  margin: 0.3rem 0;
}

.general-meeting-summary-list {
  margin: 0.3rem 0 0.15rem;
  padding-left: 1.4em;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-navy);
}

.general-meeting-summary-list li {
  margin: 0.1rem 0;
}

.general-meeting-invalid-vote {
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  background: #fff0ef;
  color: #8b2622;
  font-weight: 700;
}

/* 循環委任(無効票、赤)と違い、要確認委任(委任先が欠席者投票していないだけで
   無効ではない)は青系にして、両者のトーンを視覚的に区別する。 */
.general-meeting-pending-vote {
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  background: #eaf5f7;
  color: #174e5d;
  font-weight: 700;
}

/* 正常に解決した委任(循環でも要確認でもない)は、赤(無効)・青(要確認)と
   区別できるよう緑系にする。 */
.general-meeting-delegate-vote {
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  background: #eaf6ec;
  color: #1f6d3a;
  font-weight: 700;
}

.general-meeting-pending-alert {
  margin: 0.8rem 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid #8b2622;
  border-radius: 0.4rem;
  background: #fff0ef;
  color: #8b2622;
}

/* 循環委任(無効票、赤)と違い、欠席者投票以外への委任は無効ではないため、
   general-meeting-pending-voteと同じ青系のトーンにする。 */
.general-meeting-pending-alert--info {
  border-left-color: #174e5d;
  background: #eaf5f7;
  color: #174e5d;
}

.general-meeting-pending-alert p {
  margin: 0.3rem 0;
}

/* 締め切り後の案内。警告(赤)でも通常の空状態(グレー)でもない
   お知らせなので、general-meeting-pending-alert--infoと同じ青系にする。 */
.general-meeting-closed-notice {
  margin-bottom: 1.5rem;
  padding: 0.8rem 1rem;
  border-left: 4px solid #174e5d;
  border-radius: 0.4rem;
  background: #eaf5f7;
  color: #174e5d;
}

/* 本文は通常の太さにし、リンク(「コメント」→コメント欄)だけを太字+下線で
   目立たせる(本文まで太字だとリンクが埋もれるため)。 */
.general-meeting-closed-notice p {
  margin: 0;
}

.general-meeting-closed-notice a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.general-meeting-pending-alert ul {
  margin: 0.3rem 0;
  padding-left: 1.4em;
}

/* 事前投票の締切後に公開する事前コメント(general-meeting.php)。投票内容を推測
   させないよう、賛否による色分け・アイコンは付けず、全コメントを同じ見た目にする。 */
.general-meeting-comments {
  margin: 1rem 0;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--color-line, #d9d5ca);
}

.general-meeting-comments__title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--color-navy);
}

.general-meeting-comment {
  margin: 0.6rem 0;
}

.general-meeting-comment__name {
  margin: 0 0 0.2rem;
  font-weight: 700;
}

.general-meeting-comment__body {
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-left: 4px solid rgb(24 68 82 / 25%);
  background: #f7fafb;
  overflow-wrap: anywhere;
}

/* 議題ごとの事前投票の開票状態(締切後のみ表示)。 */
.general-meeting-open-status {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 0.3rem;
  background: #ececec;
  color: #444;
  font-size: 0.9rem;
  font-weight: 700;
}

.general-meeting-open-status--opened {
  background: #eaf5f7;
  color: #174e5d;
}

.general-meeting-open-form {
  margin: 0.8rem 0;
}

.general-meeting-audit-details {
  margin-top: 1rem;
}

.general-meeting-audit-details summary {
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-navy);
  padding: 0.5rem 0.9rem;
  border: 1px solid rgb(24 68 82 / 25%);
  border-radius: 0.5rem;
  background: #f3f7f9;
}

.general-meeting-audit-details summary:hover {
  border-color: var(--color-navy);
}

/* 総会議案の補足説明(FAQ)・訂正(general-meeting-agenda.php / general-meeting.php)。
   訂正の警告は赤(general-meeting-pending-alert)、補足のお知らせは青(--info)を流用し、
   ここでは FAQ・差分・履歴の見た目だけを定義する。 */
.general-meeting-supplements {
  margin: 1rem 0;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--color-line, #d9d5ca);
}

.general-meeting-supplements__title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--color-navy);
}

.general-meeting-supplements__manage {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.general-meeting-faq {
  margin: 0.6rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(24 68 82 / 18%);
  border-radius: 0.5rem;
  background: #f7fafb;
}

.general-meeting-faq--hidden {
  border-style: dashed;
  background: #f4f4f4;
  color: var(--color-muted);
}

.general-meeting-faq--preview {
  border: 2px dashed var(--color-gold, #c79b4b);
  background: #fffaf0;
}

.general-meeting-faq__badge {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 0.3rem;
  background: #ececec;
  color: #444;
  font-size: 0.85rem;
  font-weight: 700;
}

.general-meeting-faq__q {
  margin: 0 0 0.4rem;
  font-weight: 700;
  color: var(--color-navy);
  overflow-wrap: anywhere;
}

.general-meeting-faq__a {
  overflow-wrap: anywhere;
}

.general-meeting-faq__a ul {
  margin: 0.3rem 0;
  padding-left: 1.4rem;
}

.general-meeting-faq__a > p:first-child {
  margin-top: 0;
}

.general-meeting-faq__meta {
  margin: 0.4rem 0 0;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.general-meeting-faq__manage {
  margin-top: 0.6rem;
}

.general-meeting-faq__manage summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-navy);
}

.general-meeting-faq__edits {
  margin: 0.3rem 0 0;
  padding-left: 1.4em;
  font-size: 0.9rem;
}

.general-meeting-vote-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.general-meeting-notes-status {
  font-weight: 700;
  color: var(--color-navy);
}

.general-meeting-notes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.general-meeting-notes-form textarea,
.general-meeting-notes-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.general-meeting-correction-warning {
  border-left: 4px solid #8b2622;
}

.general-meeting-correction-preview {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border: 2px dashed var(--color-gold, #c79b4b);
  border-radius: 0.5rem;
  background: #fffaf0;
}

.general-meeting-diff {
  margin: 0.6rem 0;
}

.general-meeting-diff__label {
  margin: 0 0 0.2rem;
  font-weight: 700;
}

.general-meeting-diff ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-line, #d9d5ca);
  border-radius: 0.4rem;
  overflow: hidden;
}

.general-meeting-diff__line {
  display: flex;
  gap: 0.5rem;
  padding: 0.15rem 0.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.general-meeting-diff__line--added {
  background: #eaf6ec;
  color: #1f6d3a;
}

.general-meeting-diff__line--removed {
  background: #fff0ef;
  color: #8b2622;
  text-decoration: line-through;
}

.general-meeting-diff__mark {
  flex: 0 0 1em;
  font-weight: 700;
  text-decoration: none;
}

/* 色と記号だけに頼らず、読み上げでは「追加：」「削除：」と伝える。 */
.general-meeting-diff__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.general-meeting-history,
.general-meeting-notices {
  margin: 0;
  padding: 0;
  list-style: none;
}

.general-meeting-history__item,
.general-meeting-notices__item {
  margin: 0.8rem 0;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--color-navy);
  border-radius: 0.4rem;
  background: #f7fafb;
}

.general-meeting-history__version {
  margin: 0 0 0.3rem;
  font-weight: 700;
  color: var(--color-navy);
}

.general-meeting-history__diff summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-navy);
}

.members-folder__icon--thumbnail {
  overflow: hidden;
  padding: 0;
}

.members-folder__icon--thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.members-folder strong,
.members-folder small {
  display: block;
}

.members-folder strong {
  font-size: 1.05rem;
}

.members-folder small {
  margin-top: 0.3rem;
  color: #66757a;
}

.members-files {
  overflow: visible;
  border: 1px solid rgb(24 68 82 / 14%);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgb(25 53 61 / 8%);
}

.members-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
}

.members-file + .members-file {
  border-top: 1px solid rgb(24 68 82 / 10%);
}

.members-file__type {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: 0.8rem;
  background: #e6f2f4;
  color: #176479;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.members-file__type--icon img {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
}

.members-file__body {
  min-width: 0;
}

.members-file__body h2 {
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.5;
}

.members-file__inline-meta {
  margin-left: 0.55rem;
  color: #66757a;
  font-size: 0.78rem;
  font-weight: 400;
  white-space: nowrap;
}

.members-file__name-link {
  color: inherit;
  text-decoration: none;
}

.members-file__name-link:hover,
.members-file__name-link:focus-visible {
  text-decoration: underline;
}

.members-file__body p {
  margin-top: 0.25rem;
  color: #66757a;
  font-size: 0.84rem;
}

.members-file__body audio {
  width: min(100%, 26rem);
  height: 2.5rem;
  margin-top: 0.45rem;
}

.members-file__body video {
  display: block;
  width: min(100%, 42rem);
  max-height: 28rem;
  margin-top: 0.7rem;
  border-radius: 0.65rem;
  background: #102a43;
}

.members-file__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.members-file-menu,
.members-action-menu {
  position: relative;
}

.members-file-menu > summary,
.members-action-menu > summary {
  list-style: none;
  cursor: pointer;
}

.members-file-menu > summary::-webkit-details-marker,
.members-action-menu > summary::-webkit-details-marker {
  display: none;
}

.members-file-menu__panel,
.members-action-menu__panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.35rem);
  right: 0;
  display: grid;
  min-width: 7rem;
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid rgb(24 68 82 / 14%);
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 0.75rem 1.5rem rgb(25 53 61 / 16%);
}

.members-file-menu__panel .button,
.members-action-menu__panel .button {
  width: 100%;
  white-space: nowrap;
}

.members-file__thumbnail {
  display: block;
  width: 7.5rem;
  height: 4.75rem;
  overflow: hidden;
  border: 1px solid rgb(24 68 82 / 14%);
  border-radius: 0.65rem;
  background: #eef4f5;
}

.members-file__thumbnail--generic {
  display: flex;
}

.members-file__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
}

.members-file__thumbnail--photo img {
  object-fit: cover;
  object-position: center top;
}

.members-file__thumbnail--pdf img {
  object-fit: cover;
  object-position: center top;
  background: #fff;
}

.members-file__thumbnail--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #102a43;
  pointer-events: none;
}

.members-file__thumbnail--generic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: #176479;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.members-file__thumbnail--generic img {
  width: 2rem;
  height: 2rem;
}

.members-download.button--ghost {
  border-color: rgb(23 100 121 / 35%);
  color: #176479;
}

.members-empty {
  padding: 2.5rem 1.5rem;
  border: 1px dashed rgb(24 68 82 / 25%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 65%);
  color: #66757a;
  text-align: center;
}

.members-notice {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  /* 文言ぴったりの余白にする(共通の.noticeはpadding: 20px 22pxだが、
     他ページのnoticeには影響させたくないのでこのページ専用のクラスだけ
     上書きする)。 */
  padding-block: 0.6rem;
}

/* pの既定マージンを残すと、左の金色の縦線(border-left)が文言の上下に
   はみ出して見える(paddingだけでは上下マージン分だけ余計に伸びるため)。
   マージンを0にし、strongとpの間隔だけ明示的に付け直す。 */
.members-notice p {
  margin: 0;
}

.members-notice strong + p {
  margin-top: 0.4rem;
}

/* 「議長・管理者向け」の見出しを目立たせる。開票案内(議案数・開票可能日時)側は
   相対的に1段階小さくする(ユーザー指定でフォントサイズを入れ替え)。 */
.members-notice strong {
  font-size: 1.1rem;
}

.members-notice ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2em;
}

.members-notice li + li {
  margin-top: 0.2rem;
}

.members-mail-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.members-mail-list__item {
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgb(25 53 61 / 6%);
}

.members-mail-list__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.members-mail-list__item a {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  color: var(--color-wine, #8d3140);
  text-decoration: none;
}

.members-mail-list__item a:hover {
  text-decoration: underline;
}

.members-mail-list__item small {
  display: block;
  margin-top: 0.35rem;
  color: #66757a;
}

.members-mail-search {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgb(25 53 61 / 6%);
}

.members-mail-search label {
  display: grid;
  gap: 0.3rem;
  color: #334e68;
  font-size: 0.84rem;
  font-weight: 700;
}

.members-mail-search__query input[type="text"] {
  width: 100%;
  min-height: 2.6rem;
  border: 1px solid #bcccdc;
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-weight: 400;
  color: #102a43;
}

.members-mail-search__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.members-mail-search__checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.members-mail-search__checkbox input[type="checkbox"] {
  width: auto;
}

.members-mail-list__item--matched {
  background: #fffaf0;
  box-shadow: 0 0.5rem 1.5rem rgb(25 53 61 / 6%), inset 0 0 0 1px #f0d878;
}

.members-mail-highlight {
  background: #ffe58f;
  color: inherit;
  padding: 0 0.15em;
  border-radius: 0.2em;
}

.members-mail-list__snippet {
  margin: 0.35rem 0 0;
  color: #4a5a63;
  font-size: 0.88rem;
}

.members-mail-count {
  margin: 0.75rem 0 0;
  color: #66757a;
  font-size: 0.85rem;
}

.roster-section + .roster-section {
  margin-top: 2rem;
}

.roster-section h2 {
  font-size: 1.05rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgb(24 68 82 / 14%);
}

.roster-grid {
  display: grid;
  gap: 1.1rem 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}

.roster-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

/* .upload-modal { padding: 0; } と詳細度（クラス1つ）が同じで、かつ
   members.css内で.upload-modalの方が後ろにあるため、.roster-modalだけの
   指定だとpaddingが0で上書きされてしまう。dialog.roster-modalとして
   詳細度を上げ、確実にこちらのpaddingを効かせる。 */
dialog.roster-modal {
  width: min(100% - 2rem, 28rem);
  padding: clamp(1.8rem, 5vw, 2.6rem) clamp(1.4rem, 4vw, 2rem);
  text-align: center;
}

/* display:flex は [open] のときだけにする。無条件で指定すると、dialogが
   閉じている（open属性が無い）ときもブラウザ既定のdisplay:noneを上書きして
   表示されてしまい、中央寄せもbackdropも効かない崩れた見た目になる。 */
.roster-modal[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

/* members/profile.phpのアバターカルーセルと同じく、矢印ボタンではなく
   左右のチラ見せ画像のタップ／横スワイプで前後の画像に切り替える。 */
.roster-modal__avatar-wrap {
  display: flex;
  /* members-avatar-carouselと同じ理由。中央画像・チラ見せの%指定は
     このコンテナの幅が基準になるため、幅いっぱいに広げる。 */
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  touch-action: pan-y;
  cursor: grab;
}

.roster-modal__avatar-wrap:active {
  cursor: grabbing;
}

/* バッジ(右下)が円形クリップに巻き込まれて消えないよう、丸クリップは
   内側のavatar-innerだけに掛ける(members-avatar-current__imageと同じ構造)。
   幅はコンテナ幅の50%(members-avatar-current__imageと同じ理由)。 */
.roster-modal__avatar {
  position: relative;
  z-index: 2;
  flex: 0 0 50%;
  max-width: 11.62rem;
  height: auto;
  aspect-ratio: 1;
}

.roster-modal__avatar-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #e6f2f4;
  box-shadow: 0 0.4rem 1rem rgb(25 53 61 / 10%);
}

.roster-modal__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* members-avatar-current__face-badgeと同じ理由でdisplay指定は
   :not([hidden])に限定する。 */
.roster-modal__face-badge:not([hidden]) {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #2f9e5c;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0.15rem 0.35rem rgb(25 53 61 / 20%);
}

/* display は指定しない(buttonの既定display: inline-blockのままにして、
   hidden属性のUAスタイル(display:none)をこちらのdisplay指定で上書きして
   しまう既知のバグパターンを避ける。members-avatar-carousel__peekと同じ)。
   幅もmembers-avatar-carousel__peekと同じくコンテナ幅の20%。 */
.roster-modal__peek {
  position: relative;
  z-index: 1;
  flex: 0 0 20%;
  max-width: 6.2rem;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #e6f2f4;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.roster-modal__peek:hover,
.roster-modal__peek:focus-visible {
  opacity: 0.85;
}

.roster-modal__peek img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.roster-modal__counter {
  margin: 0;
  color: #66757a;
  font-size: 0.8rem;
}

.roster-modal__name {
  margin: 0.4rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.roster-modal__furigana {
  margin: 0;
  color: #66757a;
}

.roster-modal__bio {
  margin: 0.4rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-line, #e2e8ec);
  color: #33474f;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.roster-card__avatar {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: #e6f2f4;
  box-shadow: 0 0.4rem 1rem rgb(25 53 61 / 10%);
}

.roster-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roster-card__name {
  font-size: 0.85rem;
  line-height: 1.35;
  word-break: break-word;
}

@media (max-width: 680px) {
  .members-file {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .members-file__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .members-file__actions .button {
    flex: 0 0 auto;
    text-align: center;
  }

  .members-file__actions .members-file-menu {
    flex: 0 0 auto;
  }

  .members-file__actions .members-file-menu > summary {
    min-width: 3.5rem;
  }

  .members-file__thumbnail {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
  }

  .members-file__thumbnail--generic {
    display: flex;
    padding: 0.35rem;
    gap: 0.2rem;
    font-size: 0.62rem;
  }

  .members-file__thumbnail--generic img {
    width: 1.65rem;
    height: 1.65rem;
  }

  .members-file__thumbnail--generic.members-file__thumbnail--download {
    /* アイコンと拡張子の組を枠の視覚的な中央へ寄せる */
    padding-left: 0.15rem;
    padding-right: 0.55rem;
  }

}

.upload-modal {
  width: min(100% - 2rem, 32rem);
  padding: 0;
  border: none;
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3rem rgb(25 53 61 / 20%);
}

.upload-modal::backdrop {
  background: rgb(15 30 36 / 55%);
}

.upload-modal form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 4vw, 2rem);
}

.upload-modal h2 {
  margin: 0;
}

.upload-modal label {
  display: grid;
  gap: 0.45rem;
  font-weight: 700;
}

.upload-modal input[type="file"],
.upload-modal input[type="text"],
.upload-modal input[type="date"],
.upload-modal select {
  padding: 0.6rem;
  border: 1px solid rgb(24 68 82 / 28%);
  border-radius: 0.6rem;
  background: #fff;
  color: inherit;
  font: inherit;
}

.upload-modal__dropzone {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  padding: 1.2rem 1rem;
  border: 2px dashed rgb(24 68 82 / 30%);
  border-radius: 0.7rem;
  background: rgb(24 68 82 / 4%);
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-modal__dropzone p {
  margin: 0;
  font-size: 0.88rem;
  color: rgb(24 68 82 / 75%);
}

.upload-modal__dropzone.is-dragover {
  border-color: var(--color-navy);
  background: rgb(24 68 82 / 10%);
}

.upload-modal__selected-list,
.upload-modal__file-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 40vh;
  overflow-y: auto;
}

.upload-modal__selected-list li,
.upload-modal__file-list li {
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  background: rgb(24 68 82 / 6%);
  font-size: 0.88rem;
  word-break: break-all;
}

.upload-modal__selected-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.upload-modal__selected-remove {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: rgb(24 68 82 / 65%);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}

.upload-modal__filename-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.upload-modal__filename-field input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.upload-modal__filename-field span {
  color: rgb(24 68 82 / 65%);
  white-space: nowrap;
}

.upload-modal__formats {
  padding: 0.8rem 1rem;
  border-radius: 0.7rem;
  background: rgb(24 68 82 / 6%);
  font-size: 0.88rem;
}

.upload-modal__formats dl {
  display: grid;
  gap: 0.25rem;
  margin: 0.45rem 0 0;
}

.upload-modal__formats dl > div {
  display: grid;
  grid-template-columns: 3em 1fr;
  gap: 0.75rem;
}

.upload-modal__formats dt {
  font-weight: 700;
}

.upload-modal__formats dd {
  margin: 0;
}

.attendance-legend {
  /* 基本は左詰め、項目間の余白(gap)は常にこのまま維持する。5項目が1行に
     収まらない画面幅でだけ、attendance.jsが--attendance-legend-scaleを
     「ちょうど1行に収まる値」まで下げる(固定のブレークポイントで一律に
     縮めるのではなく、実際に必要な分だけ縮める)。
     直接の親(.members-library)はdisplay: gridで、grid直下の子は既定で
     min-width: auto(=中身の最小サイズ、nowrapなので折り返し前の全体幅)を
     持つ。これを明示的に解除しないと、この要素(と、それを内包する
     .members-library自体)が縮まずページ全体が横にはみ出す
     ――以前.attendance-table-shellで踏んだのと同じ不具合を実機で再度
     確認した。min-width: 0で解除し、JavaScriptによる縮小(scale)が実際の
     利用可能幅を正しく測れるようにする。 */
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 1.1rem;
  min-width: 0;
  /* 直接の親(.members-library)がgap: 1.5remを持つため、この要素自身に
     さらに下マージンを足すと出欠表との間が不自然に広くなる。マージンは
     0にし、間隔はgridのgapだけに任せる。 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.attendance-legend li {
  display: flex;
  align-items: center;
  gap: calc(0.3rem * var(--attendance-legend-scale, 1));
  font-size: calc(0.86rem * var(--attendance-legend-scale, 1));
  color: var(--color-muted);
  white-space: nowrap;
  min-width: 0;
}

.attendance-legend .attendance-mark {
  width: calc(1.8rem * var(--attendance-legend-scale, 1));
  height: calc(1.8rem * var(--attendance-legend-scale, 1));
  font-size: calc(0.95rem * var(--attendance-legend-scale, 1));
}

/* .attendance-table-wrapとその上に重なる日付行の複製(.attendance-table-head-
   overlay)をまとめて囲む。この要素自体はoverflowを指定しない(=兄弟である
   overlay側のposition: stickyが、この要素をスクロール基準として正しく
   ページ全体のスクロールに追従できるようにするため)。
   直接の親(.members-library)がdisplay: gridであり、grid直下の子は既定で
   min-width: auto(=中身の最小サイズ)を持つ。以前はoverflow-x: autoを持つ
   .attendance-table-wrap自身がgridの直接の子だったため自動的にmin-width:0
   扱いになっていたが、この要素を挟んだことでgridの直接の子がこちら側に
   変わり、中身(出欠表の全列ぶんの幅)がそのままこの要素の最小幅として
   扱われ、ページ全体が横にはみ出す不具合が実機(スマホ幅)で発生した。
   min-width: 0で明示的に解除する。 */
.attendance-table-shell {
  position: relative;
  min-width: 0;
  /* 出欠表だけ、ページ左右の余白(.page-widthが確保する20px/440px以下では
     14px)を2/3に縮める。他の要素(凡例・注意書き・ボタン等)の余白は
     変えたくないので、.page-width自体ではなくこの要素にだけ負のマージンを
     掛けてはみ出させる。 */
  margin-inline: calc(-20px / 3);
  /* 直接の親(.members-library)のgap: 1.5remぶん、凡例との間が空くが、
     それでもまだ広すぎるとの指摘があったため、さらに詰める。 */
  margin-top: -1rem;
}

@media (max-width: 440px) {
  .attendance-table-shell {
    margin-inline: calc(-14px / 3);
  }
}

.attendance-table-wrap {
  /* 縦方向はページ自体のスクロールに任せ、この要素では横方向だけ
     スクロールさせる。overflow-x: auto を指定すると、CSSの仕様上
     overflow-y も暗黙に auto 扱いになってしまう（ブラウザの既知の仕様、
     visible/非visibleを混在できない）が、max-height等で高さを制限
     しなければ中身がはみ出すことはなく、このauto扱いのoverflow-yが
     実際にスクロールバーとして働くことはない。
     ただし、この overflow-x: auto があることで、この要素自体が
     子孫のposition: stickyの基準にされてしまう(CSSの仕様)。この要素は
     実際には縦方向にスクロールしないため、子のsticky(top指定)はページの
     スクロールに対しては機能せず、基準ごとページと一緒に流れてしまう
     (実機検証で確認)。そのため日付行をページに対して固定表示する処理は
     ここ(overflow-xの内側)では行わず、.attendance-table-shellの直接の
     子として、このwrapの外側にある.attendance-table-head-overlay
     (position: sticky)で行っている。 */
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--color-line);
  border-top: none;
  /* 角丸にすると、日付行の固定表示用の複製(下記.attendance-table-head-overlay)
     との角の丸め方が揃わず、角の下地が見えてしまう。直角のままにする。 */
  border-radius: 0;
  background: #fff;
}

/* 日付行をページに対して固定表示するための複製(attendance.jsが生成)。
   .attendance-table-wrap自身はoverflow-xのせいでsticky基準にされてしまい
   使えないため(上記コメント参照)、代わりにwrapの外側・.attendance-table-
   shellの直接の子としてposition: stickyを使う。これは.site-header自身が
   使っているのとまったく同じ仕組みなので、ブラウザ標準のスクロール
   追従(モバイルのアドレスバー表示/非表示との協調を含む)がそのまま効く。
   横スクロール位置と列幅だけはJavaScriptで本物の表と同期させる。 */
.attendance-table-head-overlay {
  position: sticky;
  z-index: 90;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-bottom: none;
  border-radius: 0;
  background: #fff;
  /* 影は付けない(出席欄に影が落ちて見づらくなるため)。 */
  /* 列幅の同期が終わるまでの一瞬、不揃いな幅で見えてしまわないよう
     隠しておく(attendance.jsが同期後にis-visibleを付ける)。 */
  visibility: hidden;
}

.attendance-table-head-overlay.is-visible {
  visibility: visible;
}

.attendance-table-head-overlay__scroll {
  overflow: hidden;
}

.attendance-table-head-overlay table {
  border-collapse: separate;
  border-spacing: 0;
}

/* 1列目(氏名)の幅を本物の表とまったく同じ手順で計算させるために複製した
   tbody(attendance.js参照)。見た目には出さないためvisibility: hiddenに
   するが、table行はCSSのheight: 0だけでは高さが潰れない(実機で確認)ため、
   この要素自体の高さを0にはしない。表示側の外枠(.attendance-table-head-
   overlay__scroll)の高さをattendance.js側で見出し行ちょうどに固定し、
   overflow: hiddenで実際に切り取っている。 */
.attendance-table-head-overlay__measure {
  visibility: hidden;
}

.attendance-table {
  /* position: sticky のセルは border-collapse: collapse だと、横スクロール中に
     罫線の描画が乱れて消えることがある（ブラウザの既知の相性問題）ため separate にする。
     width は auto にする(min-width も 0)。100%にすると、ラップ要素いっぱいまで
     テーブルが常に引き伸ばされ、その「余り」がすべて団員列(下のwidth:0指定)に
     流れ込んでしまう。auto にして中身の合計サイズまで縮められるようにして初めて
     width:0 が効く(実機検証で確認済み。PC幅でも同じ現象が起きるため画面幅を
     問わず適用)。 */
  border-collapse: separate;
  border-spacing: 0;
  width: auto;
  min-width: 0;
  font-size: 0.88rem;
}

.attendance-table caption {
  caption-side: top;
  text-align: left;
  padding: 0.9rem 1rem 0;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.attendance-table th,
.attendance-table td {
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--color-line);
  text-align: center;
  white-space: nowrap;
}

/* 団員列(アバター+氏名)の左端の余白だけを2/3に縮める(右側は日付列との
   境界線までの間隔として保つため変えない)。 */
.attendance-table th:first-child {
  padding-left: calc(0.7rem * 2 / 3);
}

.attendance-table td {
  /* 出欠欄の長押しでテキスト選択やコールアウトが出ないようにする
     （長押しは列フォーカス表示のトリガーのため）。 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.attendance-table thead th {
  vertical-align: bottom;
  font-weight: 700;
  color: var(--color-navy-deep);
  /* ここでのposition: stickyは、下のthead th:first-childのleft:0(横スクロール
     時に団員見出しを固定する)のためだけに存在する。topオフセットは付けない
     ――.attendance-table-wrapはoverflow-x: autoのせいでCSS上sticky の基準に
     されてしまうが、実際には縦方向にスクロールしないため、topを指定しても
     ページのスクロールに対しては機能しない(基準ごとページと一緒に流れて
     しまい、団員の行と重なって表示が崩れる不具合を実機で確認した)。日付行を
     ページに対して固定表示する処理はattendance.js側でJavaScriptにより
     別途実装している(自前で複製した行をposition: fixedで重ねる方式)。 */
  position: sticky;
  z-index: 2;
  background: #fff;
}

.attendance-table thead th:first-child {
  left: 0;
  /* 縦横どちらにスクロールしても、左上の角(団員見出し)が常に一番上に来るように。 */
  z-index: 3;
  text-align: left;
  /* 日付列は「数字＋曜日」の2行分の高さに合わせて下揃え(vertical-align: bottom)
     だが、1行しかない「団員」がそれに引きずられて下に寄ってしまうため、
     この見出しだけ中央揃えに戻す。 */
  vertical-align: middle;
  border-right: 1px solid var(--color-line);
}

.attendance-table thead th small {
  display: block;
  font-weight: 400;
  color: var(--color-muted);
}

.attendance-table thead th.attendance-table__event {
  color: var(--color-wine);
}

.attendance-table thead th[data-attendance-date-col] {
  position: sticky;
}

/* 日付の桁数（例:「3/1」と「10/25」）で列幅が変わらないよう、
   団員列(1列目)以外はすべて同じ幅に固定する。
   width指定は auto テーブルレイアウトでは「最低限」でしかなく、
   中身がそれより広い列だけ実際には広がってしまう(実機検証で確認)。
   最長の見出し「11/12」のような月日2桁×2桁でもはみ出さない値でないと
   ずれてしまうため、日付見出しの文字サイズは0.75emに固定してある
   (下の--attendance-col-widthが管理画面の最小値34px相当のときだけ、
   長い日付の列がごく僅か(1px未満)広がることがあるが、実機で見分けが
   つかないレベルなので許容している。既定〜通常設定の44px以上では
   完全に揃う)。
   実際の幅の値は admin/settings.php の「出欠欄の列の間隔」で管理者が
   PC・スマホ別に調整でき、members/attendance/index.phpがCSS変数
   --attendance-col-width-pc / --attendance-col-width-mobile として
   インラインで注入する。ここでの44px/36pxはその値が来なかった場合の
   保険の既定値。 */
/* auto テーブルレイアウトの列幅算出は、なぜか width プロパティ内の
   var() を解決できず常にフォールバック値になってしまう(実機検証で
   確認したブラウザの挙動。min-width の var() は正しく解決できる)ため、
   width ではなく min-width を使う。中身は0.75emでほぼどの値でも収まるので、
   min-widthがそのまま実質的な列幅として機能する。 */
.attendance-table th:not(:first-child),
.attendance-table td:not(:first-child) {
  width: 0;
  min-width: var(--attendance-col-width-pc, 44px);
  padding-inline: 0.2333rem;
}

/* 出欠欄が並ぶエリアの左右の「外側」の余白(団員列との境界線からの間隔・
   表の右端までの間隔)だけを1.8倍にする。列どうしの間隔(上のpadding-inline)
   はそのまま。 */
.attendance-table tr > :nth-child(2) {
  padding-left: calc(0.2333rem * 1.8);
}

.attendance-table tr > :last-child {
  padding-right: calc(0.2333rem * 1.8);
}

@media (max-width: 760px) {
  .attendance-table th:not(:first-child),
  .attendance-table td:not(:first-child) {
    min-width: var(--attendance-col-width-mobile, 36px);
  }

  /* 出欠表全体をスマホでだけ縮小する（管理画面「サイト設定」の
     「出欠表の縮小率（スマホ）」で調整）。table-layoutのwidth系プロパティは
     var()解決の実機不具合があった(上記コメント参照)ため、ここではその影響を
     受けないzoomで縮小する。1.0(既定)なら見た目は変わらない。 */
  .attendance-table {
    zoom: var(--attendance-mobile-scale, 1);
  }

  /* 日付行の固定表示用の複製(.attendance-table-head-overlay内)は、
     .attendance-tableクラスを共有しているため上のzoomがそのままだと
     二重にかかってしまう。attendance.js側で、本物の表のzoomを一時的に
     外した状態(zoom: 1)で幅を測り、複製側にはその等倍の値をそのまま
     書き込んだ上で複製自身にも同じzoomを掛けて縮小させる(=本物とまったく
     同じ「等倍の値にzoomを掛ける」という手順を複製側でも踏むことで、
     zoomの丸め処理の結果を完全に一致させる)。複製をzoom:1のままにして
     本物側の縮小後(丸め済み)の値をpxで直接書き込む方式だと、丸め誤差で
     1px未満のズレが残ることがあった(実機で確認)。 */
}

.attendance-table__date-link {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.75em;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.attendance-table__date-link:hover {
  text-decoration: underline;
}

.attendance-table__date-link small {
  text-decoration: none;
}

.attendance-table.is-focused td {
  opacity: 0.32;
  filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

/* ヘッダーの日付セル自体は position: sticky で背景が不透明である必要が
   あるため、セルごと薄くはしない(薄くすると背景も半透明になり、スクロール
   で下に隠れているはずの出欠マークが透けて見えてしまう)。日付の文字だけを
   薄くする。 */
.attendance-table.is-focused thead th[data-attendance-date-col] .attendance-table__date-link {
  opacity: 0.32;
  filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.attendance-table.is-focused .attendance-table__col--focused {
  opacity: 1;
  filter: none;
}

.attendance-table.is-focused thead th[data-attendance-date-col].attendance-table__col--focused .attendance-table__date-link {
  opacity: 1;
  filter: none;
}

.attendance-note-bubble {
  position: fixed;
  z-index: 60;
  max-width: 14rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.6rem;
  background: var(--color-navy-deep);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.4;
  box-shadow: 0 0.5rem 1.2rem rgb(0 0 0 / 25%);
  /* 行の高さの半分ほど上へずらし、左端でスティッキー表示される団員名と
     高さが重ならないようにする。 */
  transform: translate(0, calc(-50% - 1rem));
  pointer-events: none;
}

.attendance-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: left;
  border-right: 1px solid var(--color-line);
}

.attendance-table__row--self td,
.attendance-table__row--self th {
  background: rgb(199 155 75 / 12%);
}

.attendance-table__member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.attendance-table__member-trigger {
  display: inline-flex;
  align-items: center;
  gap: calc(0.35rem * 1.2);
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.attendance-table__avatar {
  display: block;
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  overflow: hidden;
  background: #e6f2f4;
}

.attendance-table__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attendance-table tbody th strong {
  font-weight: 700;
}

.attendance-table tbody th small {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-weight: 400;
  font-size: 0.64em; /* 元は0.8emだったが、氏名との差を付けるためさらに0.8倍 */
}

.attendance-table tbody tr:last-child td,
.attendance-table tbody tr:last-child th {
  border-bottom: none;
}

/* width:0を指定すると、テーブル全体の余り幅をこの列には配らなくなる
   （auto table layoutの古典的な挙動）。中身は改行できない
   (white-space: nowrap)ため、実際には「氏名＋パート」がちょうど
   収まる幅までしか縮まらない＝一番長い組み合わせにぴったり合う。
   縦2段に積む案は行の高さが増えて表示件数が減るため採用しない。 */
.attendance-table thead th:first-child,
.attendance-table tbody th {
  width: 0;
}

/* 氏名にoverflow:hidden等を付けると、列の自動サイズ計算(width:0)が
   「この文字は省略してよい」と解釈し、他の行の氏名まで意図せず
   省略されてしまう不具合があった(実機検証で確認)。安全策としての
   上限は設けず、列の幅は実際の最長の氏名+パートにそのまま従わせる。 */

.attendance-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
}

.attendance-mark--has-note::after {
  content: "\1F4AC";
  position: absolute;
  top: -0.35rem;
  right: -0.4rem;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.65rem;
  text-align: center;
}

.attendance-mark--present {
  background: #d9f5e6;
  color: #17643a;
}

.attendance-mark--absent {
  background: #fde2e2;
  color: #9b2c2c;
}

.attendance-mark--pending {
  background: #fff3cd;
  color: #7a5200;
}

.attendance-mark--late {
  background: #dceafd;
  color: #1f5f99;
}

.attendance-mark--early {
  background: #e7e0f7;
  color: #5a3fa0;
}

.attendance-mark--empty {
  border: 1.5px dashed var(--color-line);
  background: transparent;
  color: var(--color-muted);
  font-weight: 400;
}

.attendance-quick-select-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  width: 1.8rem;
  height: 1.8rem;
}

.attendance-quick-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  inset: 0;
  padding: 0;
  border: 1.5px dashed var(--color-line);
  border-radius: 999px;
  background: transparent;
  color: transparent;
  font: inherit;
  font-weight: 400;
  font-size: 0.95rem;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

.attendance-quick-select::-ms-expand {
  display: none;
}

.attendance-quick-select:hover,
.attendance-quick-select:focus-visible {
  box-shadow: 0 0 0 2px var(--color-gold);
  outline: none;
}

.attendance-quick-select:disabled {
  opacity: 0.5;
  cursor: default;
}

.attendance-quick-select-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  pointer-events: none;
}

.attendance-quick-select-icon svg {
  display: block;
}

.attendance-quick-select:disabled ~ .attendance-quick-select-icon {
  opacity: 0.5;
}

.attendance-cell-button {
  display: inline-flex;
  border: 0;
  padding: 0.15rem;
  margin: -0.15rem;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  font: inherit;
}

.attendance-cell-button:hover .attendance-mark,
.attendance-cell-button:focus-visible .attendance-mark {
  box-shadow: 0 0 0 2px var(--color-gold);
}

.attendance-cell-button:focus-visible {
  outline: none;
}

.attendance-modal__counter {
  margin: -0.6rem 0 0;
  text-align: right;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.attendance-note {
  margin-top: 1.2rem;
}

.attendance-day-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-line);
  border-radius: 0.9rem;
  background: #fff;
  overflow: hidden;
}

.attendance-day-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-line);
}

.attendance-day-row:last-child {
  border-bottom: none;
}

.attendance-day-row__name {
  flex: 0 0 auto;
  min-width: 8rem;
  font-weight: 700;
}

.attendance-day-row__name small {
  display: block;
  color: var(--color-muted);
  font-weight: 400;
}

.attendance-day-row__message {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.members-back--top {
  margin-bottom: 1.2rem;
}

.attendance-piece-list {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-line);
  border-radius: 0.9rem;
  background: #fff;
  overflow: hidden;
}

.attendance-piece-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-line);
}

.attendance-piece-row:last-child {
  border-bottom: none;
}

.attendance-piece-row__position {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--color-tint);
  color: var(--color-navy-deep);
  font-weight: 700;
  font-size: 0.85rem;
}

.attendance-piece-row__title {
  font-weight: 700;
}

/* 曲名と、その下のメモ欄（その日のその曲についての補足。例：324小節目～）。 */
.attendance-piece-row__main {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
}

/* スマホ幅では曲名・メモ欄の横に並べると狭すぎるので、
   並び替え・外すのボタンを次の行（番号の幅だけ字下げ）に回す。 */
@media (max-width: 560px) {
  .attendance-piece-row {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .attendance-piece-row__main {
    flex-basis: calc(100% - 2.7rem);
  }

  .attendance-piece-row__actions {
    margin-left: 2.7rem;
  }
}

.attendance-piece-note-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.attendance-piece-note-form input[type="text"] {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgb(24 68 82 / 28%);
  border-radius: 0.5rem;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
}

.attendance-piece-row__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
}

.attendance-piece-row__actions form {
  margin: 0;
}

.attendance-piece-add-form {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.attendance-piece-add-form label {
  flex: 1 1 20rem;
  display: grid;
  gap: 0.45rem;
  font-weight: 700;
}

.attendance-piece-add-form input[type="text"] {
  padding: 0.6rem;
  border: 1px solid rgb(24 68 82 / 28%);
  border-radius: 0.6rem;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 400;
}

.attendance-piece-master-heading {
  margin-top: 2.5rem;
}

.attendance-piece-master-list {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-line);
  border-radius: 0.9rem;
  background: #fff;
  overflow: hidden;
}

.attendance-piece-master-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-line);
}

.attendance-piece-master-list li:last-child {
  border-bottom: none;
}

.attendance-piece-master-list li span {
  font-weight: 700;
}

.attendance-piece-master-list li small {
  display: block;
  color: var(--color-muted);
  font-weight: 400;
  font-size: 0.8rem;
}

.attendance-piece-master-list li form {
  margin: 0;
}

.attendance-detail-form,
.attendance-preset-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
  margin-bottom: 2rem;
}

.attendance-preset-form {
  align-items: flex-start;
}

.attendance-settings-save {
  justify-self: start;
}

.attendance-detail-form label,
.attendance-preset-form label {
  flex: 1 1 14rem;
  display: grid;
  gap: 0.45rem;
  font-weight: 700;
}

/* メモは他の項目より長くなりやすいので、1行まるごと使う。 */
.attendance-detail-form .attendance-detail-form__note {
  flex-basis: 100%;
}

.attendance-detail-form select,
.attendance-detail-form input[type="text"],
.attendance-preset-form textarea {
  padding: 0.6rem;
  border: 1px solid rgb(24 68 82 / 28%);
  border-radius: 0.6rem;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 400;
}

.attendance-preset-form textarea {
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

.upload-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* 「練習予定」は公式サイトの練習日程ページ（/new/schedule/）と同じ
   month-block・schedule-calendar・event-listを流用して見た目を揃えている。
   曲目は他の項目より重要な情報なので、他の詳細行（.event-list__detail span、
   14px・薄いグレー）より少しだけ濃くして視認性を上げる（サイズは他の詳細行と
   揃え、太字と色だけの控えめな強調にとどめる）。曲目は箇条書きにするため
   spanではなくulにしている。セレクタは.event-list__detail spanと同等の
   詳細度にするため2クラス指定にしている。 */
.event-list__detail .event-list__pieces {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-navy);
  font-size: 12.5px;
  font-weight: 600;
}

/* .event-list__pieces は .event-list（日付一覧）の入れ子になっているため、
   何もしないと .event-list li のスタイル（display: grid・上下余白19px・
   下線）まで曲目のliに及んでしまい、"・"と曲名が別々のグリッド行に分かれて
   縦に割れて表示される。ここで明示的に打ち消す。 */
.event-list__detail .event-list__pieces li {
  display: list-item;
  padding: 0;
  border-bottom: none;
  gap: 0;
}

.event-list__pieces li + li {
  margin-top: 2px;
}

.event-list__pieces li::before {
  content: "・";
}

/* 曲名のあとに括弧書きで添える、その日のその曲のメモ（例：324小節目～）。 */
.event-list__piece-note {
  color: var(--color-muted);
  font-size: inherit;
  font-weight: 400;
}

/* 練習日のメモ（例：★ギリシャの方が視察）。団員ページの練習予定にだけ出す。 */
.event-list__detail .event-list__note {
  margin: 4px 0 0;
  color: var(--color-wine);
  font-size: 13px;
  font-weight: 700;
}

/* 前月以前は非表示だが、今月分は月初めから表示するため、既に終わった
   練習日が混ざる。一目で「終わったもの」と分かるよう薄くし、色付きの
   タグ（本番等）と区別できるよう控えめな灰色のバッジも添える。バッジは
   日付と同じ列の上に置き、「この日程はもう終わった」がひと目で分かる
   ようにする（詳細欄の中ほどだと、読み進めるまで気づきにくいため）。 */
.event-list li.is-past .event-list__when time,
.event-list li.is-past .event-list__detail {
  opacity: 0.4;
}

.event-list__when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

/* サイト内の灰色塗りボタン(.button--secondary)と同じ色調にする。
   半透明・opacityは使わない(周りの薄れ表現や親要素のopacityに引きずられて
   意図せず薄くなる不具合の原因になっていたため)。 */
.tag--past {
  margin-top: 0;
  padding: var(--pill-pad-md);
  color: var(--pill-color-dark-fg);
  background: var(--pill-color-dark-bg);
  font-size: var(--pill-font-md);
}

.practice-schedule-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.practice-schedule-toolbar .members-back {
  margin-bottom: 0;
}

.event-list__edit-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-wine);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 練習予定のカレンダーの右下に、その月の練習場所の予約番号を小さく添える。 */
.month-calendar {
  width: min(100%, 430px);
  margin-bottom: 22px;
}

.month-calendar .schedule-calendar {
  width: 100%;
  margin-bottom: 0;
}

.month-reservation {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55em;
  margin: 14px 2px 0;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.month-reservation .month-reservation__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.month-reservation .month-reservation__number {
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.06em;
  user-select: all;
}

.month-reservation__edit {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-wine);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.members-login .survey-question {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.members-login .survey-question + .survey-question {
  margin-top: 0.6rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(24 68 82 / 12%);
}

.survey-question legend {
  padding: 0;
  font-weight: 700;
  font-size: 1.05rem;
}

.survey-question__note {
  margin: 0 0 1.35rem;
  color: #66757a;
  font-size: 0.85rem;
}

.survey-question__options {
  display: grid;
  gap: 0.6rem;
}

/* .members-login label, .members-login label span { display: grid; ... } という
   フォーム全体の既定スタイルが同じ詳細度(class+要素)で競合するため、親クラスを
   1つ加えて詳細度を上げ、必ずこちらが勝つようにしている。 */
.survey-question .survey-question__choice,
.general-meeting-agenda-card .survey-question__choice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(24 68 82 / 18%);
  border-radius: 0.65rem;
  background: #fff;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.survey-question .survey-question__choice:hover,
.general-meeting-agenda-card .survey-question__choice:hover {
  border-color: var(--color-wine);
}

.survey-question .survey-question__choice:has(input:checked),
.general-meeting-agenda-card .survey-question__choice:has(input:checked) {
  border-color: var(--color-wine);
  background: rgb(141 49 64 / 6%);
}

.survey-question__choice input[type="radio"],
.survey-question__choice input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  min-height: auto;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-wine);
}

.survey-question .survey-question__choice span {
  display: inline;
  font-weight: 400;
}

.survey-results__voters {
  font-size: 1.05rem;
}

.survey-results__question {
  display: grid;
  gap: 0.5rem;
}

.survey-results__choices {
  margin: 0;
  padding-left: 1.2rem;
}

.survey-replies__list {
  padding-left: 0;
  list-style: none;
}

.survey-replies__item {
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-line);
}

.survey-replies__item:first-child {
  padding-top: 0;
  border-top: none;
}

.survey-replies__comment {
  margin: 0 0 0.5rem;
  /* .survey-replies__replyのpadding-left(0.9rem)ぶん、コメント側にも
     同じ左paddingを付け、ピルバッジのX位置を両方で揃える。 */
  padding-left: 0.9rem;
}

.survey-replies__reply {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  background: rgb(141 49 64 / 6%);
}

.survey-replies__reply-label,
.survey-replies__comment-label {
  display: inline-block;
  box-sizing: border-box;
  width: 5.2em;
  margin-right: 0.5em;
  padding: 0.15em 0;
  border-radius: 999px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.survey-replies__reply-label {
  background: var(--color-wine);
}

.survey-replies__comment-label {
  background: #485b64;
}

/* survey.php・survey-results.phpのヒーロー直下に独立させたバナー。
   ヒーローの説明文に埋もれて見えにくかった(2026-09-08に指摘)ため、
   独立したカードにして目立たせる。 */
.survey-replies-banner {
  margin-block: 2.5rem;
  padding-block: 1.75rem;
}

.survey-replies-banner strong {
  display: block;
  margin-bottom: 0.3rem;
}

.survey-replies-banner p {
  margin: 0 0 0.5rem;
  color: var(--color-muted);
}

/* [hidden]の既定display:noneより、このクラスのdisplay指定の詳細度が
   勝ってしまう(.button__spinner等と同じ既知パターン)ため、:not([hidden])
   に限定する。 */
.upload-modal__step:not([hidden]) {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 4vw, 2rem);
}

.survey-confirm-list {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
}

.survey-confirm-list dt {
  margin-top: 0.9rem;
  color: #66757a;
  font-size: 0.85rem;
}

.survey-confirm-list dt:first-child {
  margin-top: 0;
}

.survey-confirm-list dd {
  margin: 0;
  font-weight: 700;
}

.survey-modal-spinner {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0.5rem auto 0;
  border: 3px solid rgb(24 68 82 / 18%);
  border-right-color: var(--color-wine);
  border-radius: 50%;
  animation: button-spinner-rotate 0.6s linear infinite;
}

.survey-modal-status-text {
  margin: 0;
  text-align: center;
  color: #66757a;
}

.recruitment-status-table {
  /* パート名をマイクロラベル(Fl/Ob等)にしたのはPC幅でも常に効くが、
     フォント縮小はスマホ幅で「変更する」ボタンまで収めるためのものなので、
     PCでは読みにくくならないよう下の@media側だけに限定する。 */
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.recruitment-status-table th,
.recruitment-status-table td {
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid rgb(24 68 82 / 12%);
  text-align: left;
  vertical-align: middle;
}

@media (max-width: 760px) {
  .recruitment-status-table {
    font-size: 0.85rem;
  }
}

.recruitment-status-table th:first-child,
.recruitment-status-table td:first-child {
  width: 1%;
  white-space: nowrap;
}

.recruitment-status-table th {
  color: var(--color-navy);
  background: var(--color-tint);
}

.recruitment-status-table td:last-child {
  white-space: nowrap;
}

.recruitment-edit-modal textarea {
  padding: 0.6rem;
  border: 1px solid rgb(24 68 82 / 28%);
  border-radius: 0.6rem;
  background: #fff;
  color: inherit;
  font: inherit;
  resize: vertical;
}

.recruitment-field__count {
  font-weight: 400;
  color: #66757a;
  text-align: right;
}

.recruitment-field__error {
  margin: 0;
  color: #b3261e;
  font-weight: 700;
}

.recruitment-confirm-table {
  width: 100%;
  border-collapse: collapse;
}

.recruitment-confirm-table th,
.recruitment-confirm-table td {
  padding: 0.5rem;
  border-bottom: 1px solid rgb(24 68 82 / 12%);
  text-align: left;
  vertical-align: top;
}

.recruitment-confirm-table td[data-confirm-after] {
  font-weight: 700;
  color: var(--color-wine);
}