/* 新しい項目名は一行に保つ。 */
.live-genre-label {
  white-space: nowrap;
}

/* 影ナレは名前と区切り文字の途中で折り返さない。 */
.live-kagenare-member {
  display: inline-block;
  white-space: nowrap;
}

/* 終演後のXポスト。高さはウィジェットに任せ、画面幅に合わせる。 */
.live-after-section {
  margin-top: 28px;
}
.live-after-embed {
  width: 100%;
  max-width: 550px;
  min-width: 0;
  margin: 0 auto;
}
.live-after-embed .twitter-tweet {
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.live-after-embed iframe {
  max-width: 100%;
}
.live-after-embed blockquote.twitter-tweet {
  padding: 12px;
  overflow-wrap: anywhere;
}

.title-common { font-size: 30px; }
.title-sub-common { font-size: 24px; }
.gradation-card .title-common.live-section-title { color: #000; text-align: left; font-size: 23px; }
.live-topics-section { margin-top: 20px; }
.live-topics-content { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.live-basic-info {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0 16px;
  margin: 12px 0 16px;
  padding: 6px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
}
.live-basic-info > div { display: flex; gap: 10px; padding: 6px 0; }
.live-basic-info .live-info-wide { grid-column: 1 / -1; }
.live-basic-info dt { flex: 0 0 auto; color: #777; font-size: 12px; padding-top: 2px; }
.live-basic-info dd { min-width: 0; margin: 0; font-weight: 600; }
.live-setlist { list-style: none; margin: 0; padding: 0; }
.live-setlist-section {
  margin: 16px 0 0;
  padding: 6px 0;
  border-bottom: 2px solid var(--main-color);
  color: var(--main-text-color, var(--main-color));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}
.live-setlist-section:first-child { margin-top: 0; }
.live-track { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e9e9e9; }
.live-track-number { flex: 0 0 44px; padding-top: 3px; color: #888; font-size: 12px; font-variant-numeric: tabular-nums; }
.live-track-body { --live-track-control-width: 132px; flex: 1; min-width: 0; position: relative; container-type: inline-size; }
.live-track-heading { display: flex; align-items: baseline; gap: 10px; }
.live-track-has-details .live-track-heading { min-height: 28px; padding-right: calc(var(--live-track-control-width) + 10px); }
.live-track .live-track-title { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1.5; }
.live-track-title a { text-decoration: none; }
.live-track-title a:hover { text-decoration: underline; }
.live-track .live-track-center, .live-track .live-track-note { font-size: 13px; line-height: 1.6; }
.live-track .live-track-center { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.live-track .live-track-note { margin: 3px 0 0; }
.live-track-center { color: #666; }
.live-track-note { color: #666; overflow-wrap: anywhere; }
.live-track-note > :first-child { margin-top: 0; }
.live-track-note > :last-child { margin-bottom: 0; }
.live-track-interlude { padding: 6px 0; }
.live-track-interlude .live-track-title { color: #888; font-size: 13px; font-weight: 500; }
.live-inline-member { display: inline-block; white-space: nowrap; }
.live-track-details { margin: 0; padding: 0; border: 0; }
.live-track-details > summary {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-flex;
  width: var(--live-track-control-width);
  box-sizing: border-box;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 3px 9px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  color: #555;
  font-size: 12px;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
/* 開閉表示は＋に統一し、共通CSSの矢印でボタン幅が増えないようにする。 */
.live-track-details > summary::before { content: none; }
.live-track-details > summary::-webkit-details-marker { display: none; }
.live-track-details > summary:hover { border-color: var(--main-color); }
.live-track-details > summary:focus-visible { outline: 2px solid var(--main-color); outline-offset: 3px; }
.live-track-details[open] > summary { color: var(--main-text-color, var(--main-color)); border-color: var(--main-color); }
.live-track-details[open] > summary span { transform: rotate(45deg); }
.live-member-comparison { margin-top: 8px; padding: 12px; background: #fafafa; border-radius: 12px; }
.live-formation-pair { --live-panel-gap: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--live-panel-gap); }
.live-formation-single { grid-template-columns: minmax(0, 1fr); }
.live-member-panel { min-width: 0; }
/* パネル間の余白に区切り線を置き、フォーメーションの幅を保つ。 */
.live-formation-pair > .live-member-panel + .live-member-panel { position: relative; }
.live-formation-pair > .live-member-panel + .live-member-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--live-panel-gap) / -2);
  width: 1px;
  background: #e2e2e2;
  pointer-events: none;
}
/* 端のメンバーの外側にも強調枠を表示する。 */
.live-member-panel .song-formation-fit { overflow: visible; }
.live-member-panel h4, .live-position-mappings h4 { margin: 0 0 8px; padding: 0; background: none; border: 0; font-size: 14px; }
.live-member-panel h4 > span { margin-left: 8px; color: #888; font-size: 12px; font-weight: normal; }
.live-member-panel .single-formation { --song-formation-gap: 4px; margin: 10px 0 6px; }
.live-member-panel .single-formation-member { padding: 8px 1px; border-radius: 5px; }
.live-member-panel .single-formation-name-pc { display: none; }
.live-member-panel .single-formation-name-sp { display: inline; }
.live-member-panel .live-position-changed { border-style: dashed; border-color: #af730f; }
.live-member-roster { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.live-member-roster > span { white-space: nowrap; }
.live-member-roster .live-member-roster-label { width: 100%; margin: 8px 0 0; color: #888; font-size: 11px; }
.live-member-legend { margin: 8px 0 0; font-size: 11px; color: #777; }
.live-position-mappings { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e2e2e2; }
.live-position-mappings h4 small { display: inline-block; margin-left: 8px; font-size: 11px; color: #888; font-weight: normal; }
.live-position-mappings ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.live-position-mappings li { display: inline-flex; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 5px; font-size: 12px; background: #fff; }
.live-position-mappings .live-mapping-changed { background: #fff1db; }
.live-mapping-arrow { color: #888; }
.live-member-comparison .live-position-highlight { outline: 2px solid #af730f; outline-offset: 2px; }
.live-mc-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; font-size: 13px; line-height: 1.7; }
.live-mc-line { display: flex; align-items: baseline; min-width: 0; }
.live-mc-line > div { min-width: 0; }
.live-mc-label { flex: 0 0 auto; white-space: nowrap; }
.live-mc-member { display: inline-block; white-space: nowrap; }
.live-mc-roles { min-width: 0; border-left: 1px solid #e2e2e2; padding-left: 12px; }
.live-mc-roles .live-mc-line + .live-mc-line { margin-top: 3px; }
@media (max-width: 768px) {
  .title-common { font-size: 24px; }
  .title-sub-common { font-size: 18px; }
  .live-topics-content { font-size: 13px; }
  .live-basic-info { grid-template-columns: minmax(0, 1fr); padding: 5px 10px; margin: 10px 0 14px; font-size: 13px; }
  .live-basic-info > div { padding: 5px 0; gap: 8px; }
  .live-basic-info dt { min-width: 60px; }
  .live-track { gap: 8px; padding: 8px 0; }
  .live-track-number { flex-basis: 34px; font-size: 10px; padding-top: 4px; }
  .live-track .live-track-title { font-size: 16px; }
  .live-track .live-track-center, .live-track .live-track-note { font-size: 12px; }
  .live-track-interlude { padding: 5px 0; }
  .live-track-interlude .live-track-title { font-size: 12px; }
  .live-member-comparison { margin-left: -42px; padding: 10px 8px; }
  .live-mc-panel { gap: 8px; font-size: 12px; }
  .live-mc-roles { padding-left: 8px; }
  .live-formation-pair { --live-panel-gap: 16px; grid-template-columns: minmax(0, 1fr); }
  .live-formation-pair > .live-member-panel + .live-member-panel::before {
    top: calc(var(--live-panel-gap) / -2);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }
  .live-position-mappings h4 small { display: block; margin: 3px 0 0; }
}


/* 曲名とセンターは同じ行。本文幅が狭いときだけ操作を次の行へ送る。 */
@container (max-width: 460px) {
  .live-track-has-details .live-track-heading { min-height: 0; padding-right: 0; }
  .live-track-details { margin-top: 4px; }
  .live-track-details > summary { position: static; }
}