/* 公開側の動画カード：サイトカラーに合わせた、くすみ紫系の統一配色 */
.video-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.video-card-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 25px;
    padding: 3px 8px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
}

/* タップできるタグは、見た目を崩さず軽く反応させる */
a.video-card-tag {
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

a.video-card-tag:hover {
    border-color: #bda9ca;
    transform: translateY(-1px);
}

a.video-card-tag:focus-visible {
    outline: 2px solid #8a5a9f;
    outline-offset: 2px;
}

/* 動画タイプ：3種類の中でいちばん濃いラベンダー */
.video-card-tag-type {
    border-color: #ceb9db;
    background: #e9deef;
    color: #62466f;
}

/* 人物：少しピンク味を足したモーヴ */
.video-card-tag-member {
    border-color: #dcc5d6;
    background: #f0e4ed;
    color: #6e5067;
}

/* 登録タグ：最も淡いグレイッシュライラック */
.video-card-tag-data {
    border-color: #ded4e4;
    background: #f3eff5;
    color: #63586a;
    font-weight: 500;
}

/* 4件目以降を開く「+N」。同系色のまま輪郭だけ少し強める */
.video-card-tag-more {
    appearance: none;
    border-color: #cfc0d8;
    background: #faf8fb;
    color: #6b5675;
    cursor: pointer;
    font-family: inherit;
}

.video-card-tag-more:hover,
.video-card-tag-more:focus-visible {
    background: #eee7f2;
    border-color: #bda9ca;
}

.video-card-tag-more:focus-visible {
    outline: 2px solid #8a5a9f;
    outline-offset: 2px;
}

.video-card-tag[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .video-card-tags {
        gap: 5px;
    }

    .video-card-tag {
        min-height: 24px;
        padding: 3px 7px;
        font-size: 0.72rem;
    }
}

/* ==========================
   ステージ別メンバー動画公開状況
========================== */

.video-card-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
    margin-top: 10px;
}

/*
 * タグ群と公開状況ボタンを同じ折り返し列へ流す。
 * 右側ボタン用の列を常時確保しないため、空いている幅をタグが使える。
 */
.video-card-footer-row .video-card-tags {
    display: contents;
}

.stage-status-mini-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    align-self: end;
    gap: 4px;
    margin-inline-start: auto;
    min-height: 25px;
    padding: 3px 7px;
    background: linear-gradient(135deg, #eee1f4, #f8f3fa);
    color: #5f426d;
    border: 1px solid #ccb7d6;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.stage-status-mini-button:hover {
    background: #e8d9ef;
    border-color: #b99fc6;
    transform: translateY(-1px);
}

.stage-status-mini-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: currentColor;
}

.stage-status-mini-label {
    color: #725181;
    font-weight: 650;
}

.stage-status-mini-count {
    color: #563961;
    font-size: inherit;
}

.stage-status-mini-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: rgba(255, 255, 255, 0.82);
    border-radius: 999px;
    color: #765784;
    font-size: 0.61rem;
}

.stage-status-mini-button:focus-visible,
.stage-status-close-button:focus-visible,
.stage-status-tab:focus-visible,
.stage-status-watch-link:focus-visible {
    outline: 3px solid rgba(195, 128, 224, 0.42);
    outline-offset: 2px;
}

.stage-status-dialog {
    width: min(calc(100% - 32px), 680px);
    max-height: min(84vh, 760px);
    padding: 0;
    overflow: hidden;
    background-color: #fffdfd;
    color: var(--color-text);
    border: 1px solid #ded4e4;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(40, 24, 45, 0.26);
}

.stage-status-dialog::backdrop {
    background-color: rgba(34, 24, 37, 0.54);
    backdrop-filter: blur(3px);
}

.stage-status-dialog-inner {
    display: flex;
    min-height: 0;
    max-height: min(84vh, 760px);
    flex-direction: column;
}

.stage-status-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex: 0 0 auto;
    padding: 20px 22px 17px;
    background:
        linear-gradient(
            135deg,
            rgba(244, 232, 249, 0.96),
            rgba(255, 255, 255, 0.98)
        );
    border-bottom: 1px solid #e7ddec;
}

.stage-status-dialog-kicker {
    margin: 0 0 5px;
    color: #8a5a9f;
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.stage-status-dialog-header h2 {
    margin: 0;
    color: var(--color-text-heading);
    font-size: clamp(1.18rem, 3vw, 1.55rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.stage-status-dialog-meta {
    margin: 6px 0 0;
    color: var(--color-text-sub);
    font-size: 0.82rem;
}

.stage-status-close-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.82);
    color: #67536f;
    border: 1px solid #d8c8df;
    border-radius: 50%;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.45rem;
    line-height: 1;
}

/* 放送動画・フルカムなど、メンバー指定のない同日動画 */
.stage-related-videos {
    flex: 0 0 auto;
    padding: 14px 18px;
    border-bottom: 1px solid #eee7f1;
}

.stage-related-videos h3,
.stage-status-member-heading {
    margin: 0 0 9px;
    color: var(--color-text-heading);
    font-size: 0.8rem;
    font-weight: 750;
}

.stage-related-video-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.stage-related-video-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 9px 6px 11px;
    background-color: #faf8fb;
    color: var(--color-text);
    border: 1px solid #ddd2e3;
    border-radius: 11px;
    font-size: 0.76rem;
    font-weight: 650;
    text-decoration: none;
}

.stage-related-video-link strong {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    background-color: #eee1f4;
    color: #684876;
    border-radius: 8px;
    font-size: 0.68rem;
    white-space: nowrap;
}

.stage-related-video-link:hover {
    background-color: #f2ebf5;
    border-color: #cbb8d5;
}

.stage-related-video-link.is-unavailable,
.stage-related-video-link.is-unavailable:hover {
    background-color: #f4f1f5;
    color: #847887;
    border-color: #e2dce5;
}

.stage-related-video-link.is-unavailable strong {
    background-color: #e8e2ea;
    color: #776d7a;
}

.stage-related-video-link:focus-visible {
    outline: 3px solid rgba(195, 128, 224, 0.42);
    outline-offset: 2px;
}

.stage-status-member-heading {
    flex: 0 0 auto;
    margin: 13px 18px 0;
}

.stage-status-tabs {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px 18px 11px;
    border-bottom: 1px solid #eee7f1;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.stage-status-tabs::-webkit-scrollbar {
    display: none;
}

.stage-status-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 39px;
    padding: 8px 12px;
    background-color: #faf8fb;
    color: #6f6374;
    border: 1px solid #ddd2e3;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 650;
}

.stage-status-tab strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 23px;
    padding: 2px 7px;
    background-color: #eee7f2;
    border-radius: 999px;
    font-size: 0.72rem;
}

.stage-status-tab.is-active {
    background-color: #8a5a9f;
    color: #ffffff;
    border-color: #8a5a9f;
}

.stage-status-tab.is-active strong {
    background-color: rgba(255, 255, 255, 0.2);
}

.stage-status-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 7px 18px 12px;
    scrollbar-color: #cbb8d2 transparent;
    scrollbar-width: thin;
}

.stage-status-panels::-webkit-scrollbar {
    width: 6px;
}

.stage-status-panels::-webkit-scrollbar-thumb {
    background-color: #cbb8d2;
    border-radius: 999px;
}

.stage-status-panel[hidden] {
    display: none;
}

.stage-status-member-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 7px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stage-status-member-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 100%;
    min-height: 52px;
    padding: 9px 11px;
    background-color: #ffffff;
    border: 1px solid #ece5ef;
    border-radius: 12px;
}

.stage-status-member-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    font-weight: 700;
}

.stage-status-state {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 7px;
    min-width: 0;
    color: var(--color-text-sub);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: end;
}

.stage-status-state-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    background-color: #b8afb9;
    border-radius: 50%;
}

.stage-status-member-row.is-published {
    background-color: #fbf8fc;
    border-color: #d8c8df;
}

.stage-status-member-row.is-not-confirmed .stage-status-state-dot {
    background-color: #b7a691;
}

.stage-status-member-row.is-unavailable .stage-status-state-dot {
    background-color: #9f8da7;
}

.stage-status-member-row.is-hiatus,
.stage-status-member-row.is-absent {
    background-color: #fbf9f3;
    border-color: #e4dcc8;
}

.stage-status-member-row.is-hiatus .stage-status-state,
.stage-status-member-row.is-absent .stage-status-state {
    color: #77683f;
    font-weight: 650;
}

.stage-status-member-row.is-hiatus .stage-status-state-dot,
.stage-status-member-row.is-absent .stage-status-state-dot {
    background-color: #b79a51;
}

.stage-status-member-row.is-unchecked {
    opacity: 0.76;
}

.stage-status-watch-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    min-height: 32px;
    padding: 6px 10px;
    background-color: #f0e4ed;
    color: #6e5067;
    border: 1px solid #dcc5d6;
    border-radius: 9px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.stage-status-watch-link:hover {
    background-color: #e8d7e3;
    color: #5d4055;
}

.stage-status-note {
    margin: 0;
    padding: 11px 20px 16px;
    color: var(--color-text-sub);
    font-size: 0.72rem;
    line-height: 1.65;
}

.stage-member-notices {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 10px 20px 0;
    color: #716440;
    font-size: 0.74rem;
    line-height: 1.55;
    list-style: none;
}

.stage-member-notices + .stage-status-note {
    padding-top: 7px;
}


@media (max-width: 600px) {
    .video-card-footer-row {
        gap: 5px;
    }

    .stage-status-mini-button {
        padding: 3px 6px;
    }

    .stage-status-mini-label {
        display: none;
    }
}

@media (max-width: 360px) {
    .stage-status-mini-icon {
        display: none;
    }
}

@media (max-width: 600px) {
    .stage-status-inline-button {
        gap: 4px;
        min-height: 24px;
        padding: 3px 7px;
        font-size: 0.66rem;
    }

    .stage-status-inline-label {
        display: none;
    }

    .stage-status-dialog {
        width: 100%;
        max-width: none;
        max-height: 86dvh;
        margin: auto 0 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 20px 20px 0 0;
    }

    .stage-status-dialog-inner {
        max-height: 86dvh;
    }

    .stage-status-dialog-header {
        padding: 17px 16px 14px;
    }

    .stage-status-tabs {
        padding: 12px 14px 9px;
    }

    .stage-status-panels {
        padding: 6px 12px 10px;
    }

    .stage-status-member-list {
        gap: 6px;
    }

    .stage-status-member-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px 9px;
    }

    .stage-status-member-name {
        font-size: 0.82rem;
    }

    .stage-status-state {
        gap: 5px;
        font-size: 0.7rem;
    }

    .stage-status-state-dot {
        width: 7px;
        height: 7px;
    }

    .stage-status-watch-link {
        grid-column: auto;
    }

    .stage-status-watch-link {
        width: auto;
        min-height: 28px;
        padding: 4px 7px;
        font-size: 0.68rem;
    }

    .stage-status-note {
        padding: 9px 14px 14px;
    }

    .stage-member-notices {
        padding: 8px 14px 0;
    }
}

@media (max-width: 340px) {
    .stage-status-member-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .stage-related-videos {
        padding: 12px 14px;
    }

    .stage-related-video-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .stage-related-video-link {
        justify-content: space-between;
        min-width: 0;
        padding: 6px 7px 6px 9px;
    }

    .stage-related-video-link > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .stage-status-member-heading {
        margin: 11px 14px 0;
    }
}

@media (max-width: 360px) {
    .stage-related-video-list {
        grid-template-columns: 1fr;
    }
}