/* agora Web UI（docs/cloud-architecture.md §3.7）。外部フォント・画像は使わない。 */

:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-alt: #eef0f3;
  --text: #1c1f24;
  --muted: #5f6670;
  --border: #d8dce2;
  --accent: #2458d6;
  --accent-text: #ffffff;
  --danger: #c0392b;
  --online: #1e9e57;
  --offline: #a0a6ae;
  --mention: #fde68a;
  --mention-self: #fbbf24;
  --error-bg: #fdecec;
  --error-text: #8c1d1d;
  --info-bg: #e7efff;
  --info-text: #1f3f86;
  --warning-bg: #fff3d4;
  --warning-text: #6a4b00;
  /* 利用統計のグラフ（1 系列なので 1 色。明暗それぞれで明度帯とコントラストを検証した値） */
  --chart-bar: #2458d6;
  --chart-track: #dde6fa;
  --chart-warning: #b86e00;
  --radius: 8px;
  /* 送信欄に重ねるメンション補完の影（明暗で濃さを変える） */
  --shadow: 0 6px 16px rgb(0 0 0 / 18%);
  --font: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317;
    --surface: #1a1d22;
    --surface-alt: #23272e;
    --text: #e5e7eb;
    --muted: #9aa2ad;
    --border: #30353d;
    --accent: #6b95f2;
    --accent-text: #0b1222;
    --danger: #f07167;
    --online: #3fcf7f;
    --offline: #6b7280;
    --mention: #5c4a10;
    --mention-self: #8a6400;
    --error-bg: #3b1c1c;
    --error-text: #f4b4b4;
    --info-bg: #17263f;
    --info-text: #b8cdf6;
    --warning-bg: #3a2e0e;
    --warning-text: #f1d58c;
    --chart-bar: #5f8cee;
    --chart-track: #243251;
    --chart-warning: #e0a040;
    --shadow: 0 6px 16px rgb(0 0 0 / 55%);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* display を指定したクラスより hidden を優先する */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
}

h1,
h2 {
  margin: 0;
  line-height: 1.3;
}

h1 {
  font-size: 1.35rem;
}

h2 {
  font-size: 1rem;
}

p {
  margin: 0;
}

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

code,
pre {
  font-family: var(--mono);
  font-size: 0.85em;
}

/* ---- レイアウト ---------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.topbar-nav {
  display: flex;
  gap: 1rem;
}

.topbar-nav a {
  text-decoration: none;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1rem;
}

.view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.row-between {
  justify-content: space-between;
  flex-wrap: wrap;
}

.row-wrap {
  flex-wrap: wrap;
}

.hint {
  color: var(--muted);
  font-size: 0.85rem;
}

.empty {
  color: var(--muted);
  padding: 1rem;
  text-align: center;
}

.notice {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: var(--error-bg);
  color: var(--error-text);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.notice[data-kind="info"] {
  background: var(--info-bg);
  color: var(--info-text);
}

.notice[data-kind="warning"] {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.badge {
  display: inline-block;
  padding: 0 0.45em;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-waiting {
  border-color: var(--accent);
  color: var(--accent);
}

.badge-muted {
  opacity: 0.8;
}

.kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.kv dt {
  color: var(--muted);
}

.kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.secret {
  user-select: all;
  word-break: break-all;
}

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

input,
select,
textarea,
button,
.button {
  font: inherit;
  font-size: 16px; /* iOS がフォーカス時に拡大しない大きさ */
}

input:not([type="checkbox"]),
textarea {
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.row > input:not([type="checkbox"]) {
  flex: 1 1 12rem;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

select {
  max-width: 100%;
  min-height: calc(1.4em + 0.8rem + 2px); /* ボタンと同じ高さ（行の高さ + 上下の padding + 枠） */
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  line-height: 1.4;
  cursor: pointer;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
.button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--text);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

button:hover,
.button:hover {
  border-color: var(--muted);
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.danger {
  color: var(--danger);
}

.ghost {
  background: transparent;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ---- ルーム一覧 ---------------------------------------------------------- */

.room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.room-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.room-item-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.room-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}

.room-item-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* D19: 全員待機の通知を止めているルーム（色だけでなく文言で伝える） */
.room-item-notice-off {
  border-color: var(--warning-text);
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* D20: アーカイブ済みのルーム（バッジの文言で伝え、行は背景を沈める） */
.room-item-archived {
  border-color: var(--muted);
  color: var(--text);
}

.room-item.is-archived {
  background: var(--surface-alt);
}

/* D22: 一時ルーム（全員が退室して猶予を過ぎると自動削除される） */
.room-ephemeral {
  border-color: var(--accent);
  color: var(--accent);
}

.room-item-description {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.room-item-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.room-item-actions {
  display: flex;
  gap: 0.4rem;
}

/* D19: 行の下に開く編集フォーム（行の幅いっぱい） */
.room-edit {
  flex: 1 1 100%;
  min-width: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.room-edit-field {
  gap: 0.25rem;
}

/* ---- peek / chat ---------------------------------------------------------- */

.room-title {
  overflow-wrap: anywhere;
}

.room-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 1rem;
  align-items: start;
}

.room-main,
.room-side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.message-scroll {
  height: clamp(16rem, calc(100vh - 22rem), 48rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.message-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.message {
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.message:last-child {
  border-bottom: none;
}

.message-self {
  background: var(--surface-alt);
}

/* D18: サーバーのお知らせ（system。全員待機の通知） */
.message-system {
  background: var(--info-bg);
  color: var(--info-text);
}

.message-mentions-self {
  box-shadow: inset 3px 0 0 var(--accent);
}

.message-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.6rem;
}

.message-author {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.message-time,
.message-seq {
  color: var(--muted);
  font-size: 0.75rem;
}

.message-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mention {
  padding: 0 0.15em;
  border-radius: 4px;
  background: var(--mention);
  color: inherit;
}

.mention-self {
  background: var(--mention-self);
  font-weight: 600;
}

.message-metadata {
  margin-top: 0.25rem;
}

.message-metadata summary {
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.message-metadata pre {
  margin: 0.25rem 0 0;
  padding: 0.5rem;
  max-height: 20rem;
  overflow: auto;
  background: var(--surface-alt);
  border-radius: 6px;
}

#composer-count.over,
#composer-files-limit.over,
.room-edit-count.over {
  color: var(--danger);
  font-weight: 600;
}

/* ---- メンション補完（送信欄。§3.7） ------------------------------------------ */

/* 候補を入力欄に重ねるための基準。送信欄の他の行（添付・文字数）は押し下げない */
.composer-input-wrap {
  position: relative;
}

.mention-popup {
  position: absolute;
  z-index: 10;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.2rem;
  list-style: none;
  max-height: min(16rem, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 下に入りきらないときは入力欄の上に出す（狭い画面・ページの末尾） */
.mention-popup-above {
  top: auto;
  bottom: calc(100% + 2px);
}

.mention-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  min-width: 0;
}

.mention-option-name {
  overflow-wrap: anywhere;
}

.mention-option-hint {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.mention-option.is-waiting .mention-option-hint {
  color: var(--accent);
}

.mention-option.is-offline .mention-option-name {
  color: var(--muted);
}

/* 選んでいる候補（↑↓ と aria-selected に合わせる）とマウスの下の候補 */
.mention-option.is-selected,
.mention-option:hover {
  background: var(--surface-alt);
}

.mention-option.is-selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ---- 添付ファイル（D13） ---------------------------------------------------- */

.composer-files > input[type="file"] {
  flex: 1 1 14rem;
  padding: 0.25rem 0.4rem;
}

.file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.file {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  min-width: 0;
}

.file-name {
  overflow-wrap: anywhere;
}

.file-problem .file-name,
.file-problem-text {
  color: var(--danger);
}

.file-problem-text {
  font-size: 0.85rem;
}

.message-attachments {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
}

.message-attachment {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.attachment-link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  text-align: left;
  text-decoration: underline;
  white-space: normal;
  overflow-wrap: anywhere;
}

.attachment-link:hover {
  border-color: transparent;
}

.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.member {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.member-name {
  overflow-wrap: anywhere;
}

.member-offline .member-name {
  color: var(--muted);
}

.member-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--offline);
  flex: none;
}

.member-online .member-dot {
  background: var(--online);
}

/* 自己紹介（enter_room の profile）: role はバッジ、description は名前の下の 1 行（はみ出す分は …。全文は title） */
.member-role {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-profile {
  flex: 0 0 100%;
  min-width: 0;
  padding-left: 0.9rem; /* 印（.member-dot）の幅 + gap。名前の下に揃える */
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 在席（D20） ------------------------------------------------------------- */

/* 表示の切り替え（ルーム別 / エージェント別）と件数の行 */
.presence-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

/* ラジオを 1 本につながったボタンに見せる（キーボードの操作と読み上げはラジオのまま） */
.segmented {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.segmented label {
  position: relative;
  display: flex;
  cursor: pointer;
}

.segmented label + label {
  border-left: 1px solid var(--border);
}

/* ラジオ本体は見えないまま項目全体を覆い、押した場所によらず選べるようにする */
.segmented input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented span {
  padding: 0.3rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: nowrap;
}

.segmented label:hover input:not(:checked) + span {
  background: var(--surface-alt);
}

.segmented input:checked + span {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.segmented input:checked:focus-visible + span {
  outline-color: var(--accent-text);
}

/* ルーム別: 在室しているルームのカード（広い画面では複数列） */
.presence-rooms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: 0.75rem;
}

.presence-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.75rem 1rem;
}

.presence-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  min-width: 0;
}

.presence-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}

.presence-card-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.presence-card-name:hover {
  text-decoration: underline;
}

.presence-card-counts {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.presence-card-truncated {
  color: var(--warning-text);
}

/* チップの並び（ルーム別のエージェント、エージェント別のルーム）。入りきらなければ折り返す */
.presence-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.presence-chips > li {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

.presence-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.1rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
  text-decoration: none;
}

.presence-chip-state,
.presence-chip-archived {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.presence-chip-state {
  color: var(--muted);
}

.presence-chip-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.presence-chip-archived {
  padding: 0 0.4em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 500;
}

a.presence-chip:hover .presence-chip-name {
  text-decoration: underline;
}

/* 待機中は塗りつぶして先に並べる（色だけでなく「待機中」の文言でも伝える） */
.presence-chip.is-waiting {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.presence-chip.is-waiting .presence-chip-state {
  color: inherit;
}

/* 在席（待機していない）は枠だけの控えめなチップ */
.presence-chip.is-online {
  background: transparent;
  color: var(--muted);
}

/* ルーム別: 誰も在室していないルームは名前だけを 1 行に並べる */
.presence-idle {
  overflow-wrap: anywhere;
}

.presence-idle a {
  color: inherit;
}

/* エージェント別: 1 人 1 行（名前と、在室しているルームのチップ）。狭い画面ではチップが名前の下に回り、名前はその行の幅いっぱいに広がる
   （広い画面では余った幅をほぼすべてチップに渡すので、名前の列は 12rem でそろう） */
.presence-agents {
  list-style: none;
  margin: 0;
  padding: 0;
}

.presence-agent-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
}

.presence-agent-row:last-child {
  border-bottom: none;
}

.presence-agent-name {
  flex: 1 1 12rem;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.presence-agent-row > .presence-chips {
  flex: 999 1 16rem;
}

.presence-notes {
  white-space: pre-line;
}

/* ---- 利用統計（analyze。D17） ----------------------------------------------- */

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

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.stat-label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.meter {
  display: block;
  width: 100%;
  height: 6px;
}

.meter-track {
  fill: var(--chart-track);
}

.meter-fill {
  fill: var(--chart-bar);
}

.meter-fill[data-level="warning"] {
  fill: var(--chart-warning);
}

.meter-fill[data-level="critical"] {
  fill: var(--danger);
}

.bar-chart {
  display: block;
  width: 100%;
  height: auto;
}

/* 目盛り線は 1px の実線（破線にしない）で、面から 1 段だけ離した色 */
.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

.chart-tick,
.chart-label {
  fill: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.chart-bar-fill {
  fill: var(--chart-bar);
}

.chart-bar.is-active .chart-bar-fill {
  opacity: 0.7;
}

/* 棒の区画全体を覆う当たり判定（細い棒でも指しやすくする） */
.chart-hit {
  fill: transparent;
}

/* 30 日分の表は高さを抑えて中でスクロールする（見出しは上に残す） */
.table-scroll {
  max-height: 18rem;
  overflow: auto;
}

.daily-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.daily-table caption {
  padding-bottom: 0.3rem;
  text-align: left;
}

.daily-table th,
.daily-table td {
  padding: 0.25rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.daily-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--muted);
  font-weight: 500;
}

.daily-table th:first-child {
  text-align: left;
}

.daily-table tbody th {
  font-weight: 400;
}

/* ---- 狭い画面 ------------------------------------------------------------ */

@media (max-width: 760px) {
  .container {
    padding: 0.75rem;
  }

  /* 長いラベルのボタンが画面からはみ出さないよう、狭い画面では折り返す */
  button,
  .button {
    white-space: normal;
  }

  .row > input:not([type="checkbox"]) {
    flex-basis: 8rem;
  }

  .room-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .message-scroll {
    height: clamp(14rem, 55vh, 36rem);
  }

  .room-item-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .room-item-actions > * {
    /* 5 つのボタン（peek / chat / 編集 / アーカイブ / 削除）は左右の余白を詰める。基準の幅をラベルの幅（auto）にするので、
       1 行に収まらなければラベルではなく行を折り返し、それぞれの行を埋める */
    flex: 1 1 auto;
    padding-inline: 0.5rem;
  }
}