* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans JP",
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #fff8fc 0%,
            #f7f4ff 45%,
            #f2f7ff 100%
        );

    color: #292633;
}


/* ----------------------------------------
   ヘッダー
---------------------------------------- */


header h1 {
    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1;

    color: #604080;
}


/* ----------------------------------------
   ヘッダー右側
---------------------------------------- */


/* ----------------------------------------
   更新ボタン
---------------------------------------- */

.refresh-button {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0;

    width: 42px;

    height: 48px;

    padding: 0;

    border: none;

    background: transparent;

    color: #604080;

    cursor: pointer;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}


.refresh-button:hover {
    opacity: 0.7;

    transform: translateY(-1px);
}


.refresh-button:active {
    transform: scale(0.92);
}


.refresh-icon {
    display: block;

    font-size: 27px;

    line-height: 25px;

    font-weight: 500;
}


.refresh-text {
    display: block;

    margin-top: 1px;

    font-size: 9px;

    line-height: 12px;

    font-weight: 600;

    color: #604080;
}


/* ----------------------------------------
   メイン
---------------------------------------- */


/* ----------------------------------------
   カレンダー＋配信中
---------------------------------------- */

.calendar-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    gap: 20px;

    align-items: start;
}


/* ----------------------------------------
   カレンダー
---------------------------------------- */

.calendar {
    background: rgba(255, 255, 255, 0.82);

    border: 1px solid #ded4e8;

    border-radius: 10px;

    overflow: hidden;

    min-width: 0;

    box-shadow:
        0 4px 18px rgba(100, 70, 130, 0.08);
}


/* ----------------------------------------
   カレンダーヘッダー
---------------------------------------- */

.calendar-header {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 18px;
}


/* ----------------------------------------
   月切り替え部分
---------------------------------------- */

.calendar-month-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;
}


.calendar-month-nav > button {
    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background: #eee4f8;

    color: #68447f;

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.calendar-month-nav > button:hover {
    background: #dfd0ef;

    color: #57336f;

    transform: scale(1.05);
}


.calendar-header h2 {
    margin: 0;

    min-width: 180px;

    text-align: center;

    font-size: 22px;

    color: #68447f;

    font-weight: 800;
}


/* ----------------------------------------
   チャンネルフィルターボタン
---------------------------------------- */

.channel-filter-button {
    position: absolute;

    top: 50%;

    right: 18px;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-height: 34px;

    padding: 6px 10px;

    border: 1px solid #cdb8dc;

    border-radius: 7px;

    background: #ffffff;

    color: #68447f;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 2px 7px rgba(100, 70, 130, 0.08);

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


.channel-filter-button:hover {
    background: #faf4ff;

    border-color: #ae8bc4;

    box-shadow:
        0 3px 10px rgba(100, 70, 130, 0.14);
}


.channel-filter-button:active {
    transform:
        translateY(-50%)
        scale(0.96);
}


.filter-icon {
    font-size: 15px;

    line-height: 1;
}


.filter-text {
    white-space: nowrap;
}


/* ----------------------------------------
   チャンネルフィルターポップアップ
---------------------------------------- */

.channel-filter-popup {
    position: absolute;

    top: calc(100% - 4px);

    right: 18px;

    width: 300px;

    max-width: calc(100vw - 30px);

    padding: 14px;

    border: 1px solid #d9cbe3;

    border-radius: 10px;

    background: rgba(
        255,
        255,
        255,
        0.98
    );

    box-shadow:
        0 10px 30px rgba(
            70,
            45,
            90,
            0.18
        );

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-6px);

    pointer-events: none;

    z-index: 2000;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s ease;
}


.channel-filter-popup.open {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* ----------------------------------------
   ポップアップヘッダー
---------------------------------------- */

.channel-filter-popup-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

    padding-bottom: 10px;

    border-bottom: 1px solid #ece5f1;
}


.channel-filter-popup-header h3 {
    margin: 0;

    font-size: 15px;

    color: #604080;

    font-weight: 800;
}


.channel-filter-close {
    width: 28px;

    height: 28px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #f0eaf4;

    color: #68447f;

    font-size: 20px;

    line-height: 28px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.channel-filter-close:hover {
    background: #e2d5eb;

    transform: scale(1.05);
}


/* ----------------------------------------
   全選択・全解除
---------------------------------------- */

.channel-filter-actions {
    display: flex;

    gap: 7px;

    margin-bottom: 10px;
}


.channel-filter-actions button {
    flex: 1;

    padding: 7px 5px;

    border: 1px solid #dfd3e7;

    border-radius: 6px;

    background: #faf8fc;

    color: #68447f;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.channel-filter-actions button:hover {
    background: #f3eafa;

    border-color: #cdb8dc;
}


/* ----------------------------------------
   お気に入りセット
---------------------------------------- */

.favorite-filter-section {
    margin-bottom: 10px;

    padding: 10px;

    border: 1px solid #e4d8ed;

    border-radius: 8px;

    background: #fcf9ff;
}


.favorite-filter-title {
    margin-bottom: 7px;

    color: #68447f;

    font-size: 11px;

    font-weight: 800;
}


.favorite-filter-list {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-bottom: 8px;
}


.favorite-filter-item {
    display: flex;

    align-items: stretch;

    width: 100%;

    min-height: 32px;

    border: 1px solid #d9cbe3;

    border-radius: 6px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 1px 4px rgba(100, 70, 130, 0.05);
}


.favorite-filter-apply {
    flex: 1;

    min-width: 0;

    padding: 6px 9px;

    border: none;

    background: #ffffff;

    color: #68447f;

    font-size: 11px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition:
        background 0.15s ease;
}


.favorite-filter-apply:hover {
    background: #f7f0fb;
}


.favorite-filter-delete {
    width: 31px;

    flex-shrink: 0;

    padding: 0;

    border: none;

    border-left: 1px solid #e5ddea;

    background: #faf7fc;

    color: #9a7da8;

    font-size: 16px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.favorite-filter-delete:hover {
    background: #f5e9ef;

    color: #c05b79;
}


.favorite-filter-save {
    display: flex;

    gap: 6px;
}


.favorite-filter-save input {
    flex: 1;

    min-width: 0;

    height: 31px;

    padding: 5px 8px;

    border: 1px solid #d9cbe3;

    border-radius: 6px;

    background: #ffffff;

    color: #403847;

    font-size: 11px;

    outline: none;
}


.favorite-filter-save input:focus {
    border-color: #ae8bc4;

    box-shadow:
        0 0 0 2px rgba(
            174,
            139,
            196,
            0.12
        );
}


.favorite-filter-save button {
    flex-shrink: 0;

    height: 31px;

    padding: 0 11px;

    border: 1px solid #cdb8dc;

    border-radius: 6px;

    background: #eee4f8;

    color: #68447f;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.favorite-filter-save button:hover {
    background: #e4d5f2;

    border-color: #ae8bc4;
}


.favorite-filter-save button:active {
    transform: scale(0.96);
}


.favorite-filter-empty {
    padding: 4px 2px 7px;

    color: #9a909f;

    font-size: 10px;
}


/* ----------------------------------------
   チャンネル一覧
---------------------------------------- */

.channel-filter-list {
    display: flex;

    flex-direction: column;

    gap: 2px;

    max-height: 360px;

    overflow-y: auto;

    padding-right: 3px;
}


.channel-filter-item {
    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 40px;

    padding: 5px 7px;

    border-radius: 6px;

    cursor: pointer;

    user-select: none;

    transition:
        background 0.15s ease;
}


.channel-filter-item:hover {
    background: #faf5fd;
}


.channel-filter-item input {
    width: 16px;

    height: 16px;

    margin: 0;

    flex-shrink: 0;

    accent-color: #9b68bd;

    cursor: pointer;
}


.channel-filter-icon {
    width: 28px;

    height: 28px;

    min-width: 28px;

    border-radius: 50%;

    object-fit: cover;

    background: #eeeeee;
}


.channel-filter-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    color: #403847;
}


.channel-filter-empty {
    padding: 15px 5px;

    text-align: center;

    color: #888;

    font-size: 12px;
}


/* ----------------------------------------
   曜日
---------------------------------------- */

.weekdays {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    border-top: 1px solid #e4dce9;

    border-bottom: 1px solid #e4dce9;

    background: rgba(250, 247, 252, 0.82);
}


.weekdays div {
    padding: 10px;

    text-align: center;

    font-weight: bold;

    min-width: 0;

    color: #675d70;
}


.weekdays .sunday {
    color: #d94c70;

    background: rgba(255, 241, 245, 0.82);
}


.weekdays .saturday {
    color: #4e72b0;

    background: rgba(240, 245, 255, 0.82);
}


/* ----------------------------------------
   日付
---------------------------------------- */

.calendar-days {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    width: 100%;
}


.calendar-day {
    position: relative;

    min-width: 0;

    min-height: 125px;

    padding: 8px;

    border-right: 1px solid #e7e0eb;

    border-bottom: 1px solid #e7e0eb;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.82);

    overflow: hidden;

    transition:
        background 0.15s ease;
}


.calendar-day:hover {
    background: rgba(255, 248, 253, 0.82);
}


.calendar-day.sunday {
    background: rgba(255, 248, 250, 0.82);
}


.calendar-day.sunday:hover {
    background: rgba(255, 239, 244, 0.82);
}


.calendar-day.saturday {
    background: rgba(247, 250, 255, 0.82);
}


.calendar-day.saturday:hover {
    background: rgba(237, 244, 255, 0.82);
}


.calendar-day.other-month {
    background: rgba(229, 229, 229, 0.82);

    color: #888;
}


.calendar-day.other-month:hover {
    background: rgba(221, 221, 221, 0.82);
}


.calendar-day.other-month.sunday {
    background: rgba(229, 229, 229, 0.82);

    color: #a48f96;
}


.calendar-day.other-month.sunday:hover {
    background: rgba(220, 220, 220, 0.82);
}


.calendar-day.other-month.saturday {
    background: rgba(229, 229, 229, 0.82);

    color: #8c99aa;
}


.calendar-day.other-month.saturday:hover {
    background: rgba(220, 220, 220, 0.82);
}


.calendar-day.other-month .day-number {
    color: #888;
}


.calendar-day.other-month.sunday .day-number {
    color: #a48f96;
}


.calendar-day.other-month.saturday .day-number {
    color: #8c99aa;
}


/* ----------------------------------------
   今日
---------------------------------------- */

.calendar-day.today {
    box-shadow:
        inset 0 0 0 3px #c68cff;

    background:
        linear-gradient(
            135deg,
            rgba(255, 248, 255, 0.82),
            rgba(249, 243, 255, 0.82)
        );
}


/* ----------------------------------------
   日付番号
---------------------------------------- */

.day-number {
    position: relative;

    z-index: 50;

    height: 24px;

    font-size: 16px;

    font-weight: 800;

    line-height: 24px;

    color: #4d4355;
}


.calendar-day.sunday .day-number {
    color: #d44;
}


.calendar-day.saturday .day-number {
    color: #4477bb;
}


/* ----------------------------------------
   カレンダー内アイコンエリア
---------------------------------------- */

.schedule-indicator {
    position: absolute;

    top: 32px;

    left: 4px;

    right: 4px;

    height: 88px;

    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    grid-template-rows:
        repeat(3, 28px);

    align-items: center;

    justify-items: center;

    overflow: hidden;

    z-index: 10;
}


/* ----------------------------------------
   チャンネルアイコン
---------------------------------------- */

.schedule-icon {
    width: 27px;

    height: 27px;

    min-width: 27px;

    min-height: 27px;

    max-width: 27px;

    max-height: 27px;

    aspect-ratio: 1 / 1;

    display: block;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #ffffff;

    background: #eeeeee;

    cursor: pointer;

    box-shadow:
        0 2px 5px rgba(80, 50, 110, 0.20);

    position: relative;

    margin: 0;

    transition:
        transform 0.15s ease,
        z-index 0.15s ease;
}


.schedule-icon:nth-child(1) {
    z-index: 30;
}

.schedule-icon:nth-child(2) {
    z-index: 29;
}

.schedule-icon:nth-child(3) {
    z-index: 28;
}

.schedule-icon:nth-child(4) {
    z-index: 27;
}

.schedule-icon:nth-child(5) {
    z-index: 26;
}

.schedule-icon:nth-child(6) {
    z-index: 25;
}

.schedule-icon:nth-child(7) {
    z-index: 24;
}

.schedule-icon:nth-child(8) {
    z-index: 23;
}

.schedule-icon:nth-child(9) {
    z-index: 22;
}

.schedule-icon:nth-child(10) {
    z-index: 21;
}

.schedule-icon:nth-child(11) {
    z-index: 20;
}

.schedule-icon:nth-child(12) {
    z-index: 19;
}

.schedule-icon:nth-child(13) {
    z-index: 18;
}

.schedule-icon:nth-child(14) {
    z-index: 17;
}

.schedule-icon:nth-child(15) {
    z-index: 16;
}

.schedule-icon:nth-child(16) {
    z-index: 15;
}

.schedule-icon:nth-child(17) {
    z-index: 14;
}

.schedule-icon:nth-child(18) {
    z-index: 13;
}

.schedule-icon:nth-child(19) {
    z-index: 12;
}

.schedule-icon:nth-child(20) {
    z-index: 11;
}

.schedule-icon:nth-child(21) {
    z-index: 10;
}

.schedule-icon:nth-child(22) {
    z-index: 9;
}


@media (hover: hover) and (pointer: fine) {

    .schedule-icon:hover {
        transform: scale(1.5);

        z-index: 1000 !important;

        box-shadow:
            0 4px 14px rgba(90, 50, 130, 0.30);
    }
}


@media (max-width: 700px) {

    .schedule-icon {
        pointer-events: none;

        cursor: default;
    }
}


/* ----------------------------------------
   予定一覧
---------------------------------------- */

/*
   PageThemeと文字が直接重ならないよう、
   日付見出し・案内文だけをカレンダーと同じ透明度の
   白背景に載せる。
*/
#schedule-date {
    display: inline-block;
    margin: 0 0 15px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.schedule-empty-message {
    display: inline-block;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.schedule-section {
    margin-top: 30px;
}


.schedule-section > h2 {
    margin-top: 0;

    font-size: 22px;

    color: #604080;

    font-weight: 800;
}


.schedule-item {
    display: grid;

    grid-template-columns:
        180px
        1fr;

    gap: 20px;

    background: rgba(255, 255, 255, 0.82);

    border: 1px solid #e1d8e8;

    border-radius: 10px;

    padding: 15px;

    margin-bottom: 12px;

    box-shadow:
        0 3px 14px rgba(100, 70, 130, 0.06);
}


.thumbnail {
    width: 180px;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 6px;
}


.schedule-info {
    min-width: 0;
}


.schedule-time {
    font-size: 20px;

    font-weight: 800;

    color: #633d7d;

    margin-bottom: 5px;
}


.channel-name {
    color: #666;

    font-size: 14px;

    margin-bottom: 8px;
}


.schedule-title {
    font-size: 16px;

    line-height: 1.5;

    margin-bottom: 12px;
}


/* ----------------------------------------
   YouTube
---------------------------------------- */

.youtube-link {
    display: inline-block;

    padding: 8px 14px;

    border-radius: 5px;

    background: #ff0000;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}


.youtube-link:hover {
    opacity: 0.85;

    transform: translateY(-1px);
}


/* ----------------------------------------
   配信中
---------------------------------------- */

.live-status {
    background: rgba(255, 255, 255, 0.82);

    border: 1px solid #d8c9e2;

    border-radius: 12px;

    padding: 20px;

    min-width: 0;

    box-shadow:
        0 4px 18px rgba(100, 70, 130, 0.10);

    overflow: hidden;
}


/*
   配信中の上部に表示される内容がある場合も
   同じ枠の中で自然に配置する
*/
.live-status > * {
    max-width: 100%;
}


/* ----------------------------------------
   クォータ警告
---------------------------------------- */

.quota-warning {
    margin-bottom: 22px;

    padding: 11px 12px;

    border: 1px solid #f0c8d2;

    border-radius: 8px;

    background: #fff7f9;
}


.quota-warning-message {
    font-size: 10px;

    line-height: 1.45;

    font-weight: 700;

    color: #9d5269;
}


.quota-warning-next {
    margin-top: 5px;

    font-size: 10px;

    line-height: 1.4;

    color: #8a747d;
}


/* ----------------------------------------
   配信中タイトル
---------------------------------------- */

.live-status-title {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 4px;

    margin-bottom: 24px;

    padding-top: 4px;

    font-size: 16px;

    font-weight: bold;

    color: #604080;
}


.live-dot {
    width: 9px;

    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ff0000;

    animation: live-blink 1.2s infinite;
}


@keyframes live-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}


.live-channel {
    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    grid-template-rows:
        auto
        auto;

    column-gap: 10px;

    row-gap: 9px;

    margin-bottom: 20px;

    min-width: 0;
}


.live-channel:last-child {
    margin-bottom: 0;
}


.live-channel-icon {
    grid-column: 1;

    grid-row: 1;

    width: 48px;

    height: 48px;

    min-width: 48px;

    min-height: 48px;

    border-radius: 50%;

    object-fit: cover;

    display: block;
}


.live-channel-name {
    grid-column: 2;

    grid-row: 1;

    align-self: center;

    min-width: 0;

    font-size: 13px;

    line-height: 1.4;

    overflow: hidden;

    text-overflow: ellipsis;

    word-break: break-word;
}


.live-thumbnail-link {
    grid-column: 1 / 3;

    grid-row: 2;

    display: block;

    width: 100%;

    min-width: 0;

    text-decoration: none;
}


.live-thumbnail {
    display: block;

    width: 100%;

    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 7px;

    background: #eeeeee;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}


.live-thumbnail-link:hover .live-thumbnail {
    opacity: 0.85;

    transform: translateY(-1px);
}


/* ----------------------------------------
   エラー
---------------------------------------- */

.error {
    background: #fff0f4;

    border: 1px solid #ffc8d5;

    padding: 15px;

    border-radius: 8px;
}


/* ----------------------------------------
   Fan-made
---------------------------------------- */

.fan-made {
    position: relative;

    z-index: 10;
}


.fan-made-badge {
    display: inline-flex;

    align-items: center;

    padding: 5px 10px;

    border: 1px solid #c59ae8;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #fff4fb,
            #f2eaff
        );

    color: #7b42bd;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;

    cursor: help;

    box-shadow:
        0 2px 8px rgba(120, 70, 170, 0.10);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}


.fan-made:hover .fan-made-badge {
    background:
        linear-gradient(
            135deg,
            #ffeaf6,
            #eadcff
        );

    border-color: #a86bd5;

    color: #6930a5;

    box-shadow:
        0 5px 16px rgba(110, 60, 160, 0.18);
}


.fan-made-tooltip {
    position: absolute;

    top: calc(100% + 10px);

    right: 0;

    width: 280px;

    padding: 12px 14px;

    border: 1px solid rgba(120, 120, 120, 0.2);

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.97);

    color: #666;

    font-size: 11px;

    line-height: 1.6;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-4px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    pointer-events: none;
}


.fan-made:hover .fan-made-tooltip {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* ----------------------------------------
   スマホ
---------------------------------------- */

@media (max-width: 700px) {

    


    


    header h1 {
        padding-right: 150px;
    }


    


    


    


    .refresh-button {
        width: 38px;

        height: 45px;
    }


    .refresh-icon {
        font-size: 25px;

        line-height: 23px;
    }


    .refresh-text {
        font-size: 9px;
    }


    .calendar-layout {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .calendar-header {
        justify-content: flex-start;

        padding: 12px 8px;

        min-height: 60px;
    }


    .calendar-month-nav {
        width: calc(100% - 105px);

        justify-content: flex-start;

        gap: 8px;
    }


    .calendar-month-nav > button {
        width: 34px;

        height: 34px;

        flex-shrink: 0;

        font-size: 24px;
    }


    .calendar-header h2 {
        min-width: 0;

        flex: 1;

        font-size: 17px;

        white-space: nowrap;
    }


    .channel-filter-button {
        top: 50%;

        right: 8px;

        min-height: 32px;

        padding: 5px 8px;

        gap: 3px;

        font-size: 10px;
    }


    .filter-icon {
        font-size: 14px;
    }


    .channel-filter-popup {
        top: calc(100% - 3px);

        right: 8px;

        width: 280px;

        max-width: calc(100vw - 20px);

        padding: 12px;
    }


    .channel-filter-list {
        max-height: 300px;
    }


    .channel-filter-item {
        min-height: 42px;
    }


    .favorite-filter-section {
        padding: 9px;
    }


    .favorite-filter-apply {
        padding: 7px 8px;

        font-size: 11px;
    }


    .favorite-filter-delete {
        width: 32px;

        font-size: 16px;
    }


    .favorite-filter-save input {
        height: 32px;
    }


    .favorite-filter-save button {
        height: 32px;

        padding: 0 10px;
    }


    .calendar-day {
        min-height: 125px;

        padding: 6px;
    }


    .day-number {
        height: 22px;

        font-size: 13px;

        line-height: 22px;
    }


    .schedule-indicator {
        top: 31px;

        left: 3px;

        right: 3px;

        height: 87px;

        grid-template-rows:
            repeat(3, 27px);
    }


    .schedule-icon {
        width: 23px;

        height: 23px;

        min-width: 23px;

        min-height: 23px;

        max-width: 23px;

        max-height: 23px;

        pointer-events: none;

        cursor: default;
    }


    /* ----------------------------------------
       スマホ：配信中
    ---------------------------------------- */

    .live-status {
        padding: 15px;

        border-radius: 10px;
    }


    .live-status-title {
        margin-top: 4px;

        margin-bottom: 22px;
    }


    .live-channel {
        margin-bottom: 18px;
    }


    .live-channel-icon {
        width: 42px;

        height: 42px;

        min-width: 42px;

        min-height: 42px;
    }


    .live-channel-name {
        font-size: 12px;
    }


    .quota-warning {
        margin-bottom: 20px;
    }


    .schedule-item {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .thumbnail {
        width: 100%;
    }


    .schedule-time {
        font-size: 18px;
    }


    .schedule-title {
        font-size: 15px;
    }


    .fan-made-badge {
        padding: 4px 8px;

        font-size: 10px;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;
    }


    .fan-made-tooltip {
        width: 240px;

        pointer-events: auto;
    }


    .fan-made.mobile-active .fan-made-tooltip {
        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }

}


/* ==================================================
   すぺしゃりて仕様：タイトルロゴ
   ================================================== */


/*
   P02を画面左端で見切れさせないため、
   左側にキャラクター用の余白を確保する。

   ※カレンダー自体を左へ寄せるとP02がさらに見切れるため、
     見切れ防止を優先して左側に専用スペースを確保する。
*/


/*
   ヘッダーとカレンダーの間を広げる。
   P01がヘッダーに隠れず、カレンダー上辺に座れる高さを作る。
*/
.calendar-decoration-stage {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.calendar-layout {
    position: relative;
    z-index: 2;
}


/* ----------------------------------------
   キャラクター共通
---------------------------------------- */


/* ----------------------------------------
   1500px以下
---------------------------------------- */


/* ----------------------------------------
   1250px以下
   横幅を圧迫しすぎないよう少し縮小
---------------------------------------- */


/* ----------------------------------------
   タブレット以下
   情報を邪魔しないよう装飾は非表示
---------------------------------------- */


/* ----------------------------------------
   スマホ
---------------------------------------- */


/* ==================================================
   画面幅別：メイン上部余白
   キャラクター座標はここでは変更しない
   ================================================== */


/* P03は配信中パネルの右上角を基準に配置 */
.live-status {
    position: relative;
    overflow: visible;
}


/* ==================================================
   オリジナルSVG背景アニメーション
   公式のように「白地＋少量の小さな装飾」を意識した独自デザイン
   ================================================== */

/* 年月エリアは元のコンパクトな高さを維持 */
.calendar-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
}

.calendar-month-nav {
    margin: 0 !important;
    padding: 0 !important;
}

/* 以前の疑似要素背景を無効化 */
body::before,
body::after {
    content: none !important;
    display: none !important;
}

/* UI本体の背景 */
body {
    background:
        linear-gradient(
            135deg,
            #fffafd 0%,
            #faf8ff 48%,
            #f7fbff 100%
        );
}

/* 背景専用レイヤー */


/* ヘッダーとメインは背景より前面 */


/* 共通 */


/* 左上：ピンクの点 */


/* 左中：水色リング */


/* 右上：小さなスパーク */


/* 右中：斜線 */


/* 左下：点線の弧 */


/* 中央下：菱形 */


/* 右下：三角形の縦列 */


/* 中央やや上：小さな＋ */


/* それぞれ別方向にゆっくり漂わせる */
@keyframes bg-float-01 {
    from { transform: translate3d(0, 0, 0) rotate(-2deg); }
    to   { transform: translate3d(18px, 16px, 0) rotate(3deg); }
}

@keyframes bg-float-02 {
    from { transform: translate3d(0, 8px, 0); }
    to   { transform: translate3d(-20px, -12px, 0); }
}

@keyframes bg-float-03 {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(12px, 20px, 0) rotate(18deg); }
}

@keyframes bg-float-04 {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-24px, 14px, 0); }
}

@keyframes bg-float-05 {
    from { transform: translate3d(0, 0, 0) rotate(-6deg); }
    to   { transform: translate3d(16px, -18px, 0) rotate(4deg); }
}

@keyframes bg-float-06 {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(10px, -16px, 0) rotate(20deg); }
}

@keyframes bg-float-07 {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-12px, -20px, 0); }
}

@keyframes bg-float-08 {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(14px, 12px, 0) rotate(24deg); }
}

/* 動きを減らすOS設定を尊重 */


/* スマホでは少し控えめ */


/* ==================================================
   修正：余白・固定ヘッダー・SVG個別下方向ループ
   ================================================== */

/* ----------------------------------------
   ヘッダー固定
---------------------------------------- */


/* ----------------------------------------
   カレンダー上の余白
   現在の調整値を維持
---------------------------------------- */


/* ----------------------------------------
   背景レイヤー
---------------------------------------- */

body {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
}


/* ==================================================
   各SVGを別速度で上から下へ流す
   ================================================== */

/* ピンクのドット：ほぼ真下 */


/* 水色リング：ゆっくり右下 */


/* ピンクのスパーク：少し回転 */


/* ピンク斜線：ほぼ真下 */


/* 点線アーチ：ゆっくり右下 */


/* 薄紫の菱形：左下＋回転 */


/* 水色三角：真下＋微回転 */


/* 水色＋：左右に揺れながら下 */


/* ----------------------------------------
   下方向ループ
   上側から画面外へ入り、
   下側へ抜けたら再び上へ戻る
---------------------------------------- */

@keyframes motif-down-01 {
    from {
        transform:
            translate3d(
                0,
                -180px,
                0
            );
    }

    to {
        transform:
            translate3d(
                0,
                calc(100vh + 220px),
                0
            );
    }
}


@keyframes motif-down-02 {
    from {
        transform:
            translate3d(
                -12px,
                -190px,
                0
            );
    }

    to {
        transform:
            translate3d(
                34px,
                calc(100vh + 230px),
                0
            );
    }
}


@keyframes motif-down-03 {
    from {
        transform:
            translate3d(
                0,
                -160px,
                0
            )
            rotate(-12deg);
    }

    to {
        transform:
            translate3d(
                18px,
                calc(100vh + 200px),
                0
            )
            rotate(42deg);
    }
}


@keyframes motif-down-04 {
    from {
        transform:
            translate3d(
                8px,
                -170px,
                0
            );
    }

    to {
        transform:
            translate3d(
                -10px,
                calc(100vh + 210px),
                0
            );
    }
}


@keyframes motif-down-05 {
    from {
        transform:
            translate3d(
                -18px,
                -210px,
                0
            )
            rotate(-8deg);
    }

    to {
        transform:
            translate3d(
                30px,
                calc(100vh + 250px),
                0
            )
            rotate(10deg);
    }
}


@keyframes motif-down-06 {
    from {
        transform:
            translate3d(
                18px,
                -180px,
                0
            )
            rotate(-10deg);
    }

    to {
        transform:
            translate3d(
                -28px,
                calc(100vh + 220px),
                0
            )
            rotate(48deg);
    }
}


@keyframes motif-down-07 {
    from {
        transform:
            translate3d(
                0,
                -190px,
                0
            )
            rotate(-4deg);
    }

    to {
        transform:
            translate3d(
                12px,
                calc(100vh + 230px),
                0
            )
            rotate(16deg);
    }
}


@keyframes motif-down-08 {
    0% {
        transform:
            translate3d(
                -16px,
                -170px,
                0
            )
            rotate(-6deg);
    }

    25% {
        transform:
            translate3d(
                18px,
                calc(25vh - 70px),
                0
            )
            rotate(4deg);
    }

    50% {
        transform:
            translate3d(
                -12px,
                calc(50vh),
                0
            )
            rotate(10deg);
    }

    75% {
        transform:
            translate3d(
                20px,
                calc(75vh + 70px),
                0
            )
            rotate(18deg);
    }

    100% {
        transform:
            translate3d(
                -6px,
                calc(100vh + 210px),
                0
            )
            rotate(26deg);
    }
}


/* OSの動きを減らす設定でも完全停止はせず、ゆっくり流す */


/* ==================================================
   背景密度・発色アップ
   ================================================== */

/* 全体的に少し濃く */


/* 一部はさらに目立たせる */


/* 追加モチーフ */


@keyframes motif-down-09 {
    from { transform: translate3d(-8px, -160px, 0); }
    to   { transform: translate3d(18px, calc(100vh + 220px), 0); }
}

@keyframes motif-down-10 {
    from { transform: translate3d(12px, -210px, 0); }
    to   { transform: translate3d(-18px, calc(100vh + 250px), 0); }
}

@keyframes motif-down-11 {
    from { transform: translate3d(0, -170px, 0) rotate(-8deg); }
    to   { transform: translate3d(20px, calc(100vh + 210px), 0) rotate(38deg); }
}

@keyframes motif-down-12 {
    from { transform: translate3d(10px, -180px, 0); }
    to   { transform: translate3d(-16px, calc(100vh + 220px), 0); }
}

@keyframes motif-down-13 {
    from { transform: translate3d(16px, -190px, 0) rotate(-10deg); }
    to   { transform: translate3d(-20px, calc(100vh + 230px), 0) rotate(46deg); }
}

@keyframes motif-down-14 {
    from { transform: translate3d(-14px, -220px, 0) rotate(-7deg); }
    to   { transform: translate3d(22px, calc(100vh + 260px), 0) rotate(8deg); }
}

@keyframes motif-down-15 {
    from { transform: translate3d(0, -200px, 0) rotate(-4deg); }
    to   { transform: translate3d(10px, calc(100vh + 240px), 0) rotate(14deg); }
}

@keyframes motif-down-16 {
    from { transform: translate3d(-10px, -170px, 0) rotate(-5deg); }
    to   { transform: translate3d(22px, calc(100vh + 210px), 0) rotate(24deg); }
}


/* ==================================================
   背景SVG：発色をもう一段濃く
   ================================================== */


/* P01：カレンダー上辺に座る */


/* P02：カレンダー左側から覗く */


/* P03：配信中パネル右上 */


/*
   P01 / P02 は calendar-decoration-stage 内で前面表示。
   P03 も live-status 内で前面表示する。
*/


/* ----------------------------------------
   キャラクター個別装飾は廃止
---------------------------------------- */


/* ----------------------------------------
   P01/P02用に確保していた余白を廃止
   カレンダー本体の既存レイアウトへ戻す
---------------------------------------- */


.calendar-decoration-stage {
    position: relative;

    isolation: auto;

    overflow: visible;
}


/* ----------------------------------------
   スマホ
---------------------------------------- */


/* ----------------------------------------
   タブレット
---------------------------------------- */


.header-actions button,
.header-actions .fan-made,
.header-actions .fanmade,
.header-actions [class*="fan-made"],
.header-actions [class*="fanmade"] {
    position: relative;

    z-index: 1;
}


/* 更新ボタン */
#refresh-button,
.refresh-button {
    min-width: 58px;
    min-height: 46px;

    padding: 5px 10px;

    border: 1px solid #6f3f91;
    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 2px 8px rgba(52, 31, 79, 0.14);

    color: #4f2d69;

    font-weight: 700;
}


/* Fan-made */
.fan-made,
.fanmade,
[class*="fan-made"],
[class*="fanmade"] {
    background: #ffffff;

    box-shadow:
        0 2px 8px rgba(52, 31, 79, 0.14);

    font-weight: 700;
}


/* スマホでは右端にコンパクトに収める */
@media (max-width: 700px) {

    


    #refresh-button,
    .refresh-button {
        min-width: 44px;
        min-height: 40px;

        padding: 3px 6px;
    }
}


/* タイトルロゴ */


/* ----------------------------------------
   右側操作UI
   背景テーマと混ざらない独立UI
---------------------------------------- */


/* 更新 */
html body > header .refresh-button {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;

    padding: 4px !important;

    border: 2px solid #68447f !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.97) !important;

    color: #604080 !important;

    box-shadow:
        0 3px 12px rgba(42, 22, 62, 0.24) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-shadow: none !important;
}


html body > header .refresh-icon {
    font-size: 25px !important;
    line-height: 24px !important;
    color: #604080 !important;
}


html body > header .refresh-text {
    margin-top: 1px !important;

    font-size: 9px !important;
    line-height: 11px !important;

    font-weight: 800 !important;

    color: #604080 !important;
}


/* Fan-made */
html body > header .fan-made {
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}


html body > header .fan-made-badge {
    min-height: 38px !important;

    padding: 9px 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 2px solid #9b68bd !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.97) !important;

    box-shadow:
        0 3px 12px rgba(42, 22, 62, 0.24) !important;

    color: #704296 !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;

    text-shadow: none !important;
}


/* ヘッダー固定分のみ本文を下げる */


/* ----------------------------------------
   Smartphone
---------------------------------------- */

@media (max-width: 700px) {

    


    


    


    


    html body > header .refresh-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        border-width: 1px !important;
    }


    html body > header .refresh-icon {
        font-size: 20px !important;
        line-height: 19px !important;
    }


    html body > header .refresh-text {
        font-size: 7px !important;
        line-height: 8px !important;
    }


    html body > header .fan-made-badge {
        min-height: 32px !important;

        padding: 6px 8px !important;

        border-width: 1px !important;

        font-size: 9px !important;
    }


    
}


/* ----------------------------------------
   ヘッダー内の旧操作UIは使用しない
---------------------------------------- */


/* ----------------------------------------
   フローティング更新ボタン
   画面右下に固定してスクロール追従
---------------------------------------- */

.floating-refresh-button {
    position: fixed !important;

    right: 24px !important;
    bottom: 24px !important;

    top: auto !important;
    left: auto !important;

    transform: none !important;

    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 5px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    border: 2px solid #68447f !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.96) !important;

    color: #604080 !important;

    box-shadow:
        0 5px 18px rgba(42, 22, 62, 0.26) !important;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    cursor: pointer !important;

    z-index: 5000 !important;
}


.floating-refresh-button:hover {
    opacity: 1 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 7px 22px rgba(42, 22, 62, 0.32) !important;
}


.floating-refresh-button:active {
    transform: scale(0.94) !important;
}


.floating-refresh-button .refresh-icon {
    font-size: 27px !important;
    line-height: 25px !important;

    color: #604080 !important;
}


.floating-refresh-button .refresh-text {
    margin-top: 2px !important;

    font-size: 9px !important;
    line-height: 10px !important;

    font-weight: 800 !important;

    color: #604080 !important;
}


/* ----------------------------------------
   Fan-made
   配信中欄の上に配置
---------------------------------------- */

.live-fan-made {
    grid-column: 2;

    display: flex;
    justify-content: flex-end;

    margin: 0 0 8px 0;

    position: relative;

    z-index: 20;
}


.live-fan-made .fan-made {
    position: relative;

    margin: 0;

    background: transparent;

    box-shadow: none;
}


.live-fan-made .fan-made-badge {
    min-height: 34px;

    padding: 7px 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #b58bd0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 2px 8px rgba(75, 46, 96, 0.14);

    color: #704296;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;

    cursor: default;
}


/* Tooltipを配信中欄側でも利用 */
.live-fan-made .fan-made-tooltip {
    position: absolute;

    top: calc(100% + 7px);
    right: 0;

    width: 280px;

    padding: 9px 11px;

    border: 1px solid #d8c5e7;
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.98);

    color: #514758;

    font-size: 10px;
    line-height: 1.5;

    box-shadow:
        0 5px 16px rgba(62, 41, 75, 0.16);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 100;
}


.live-fan-made .fan-made:hover .fan-made-tooltip {
    opacity: 1;
    visibility: visible;
}


/* ----------------------------------------
   calendar-layout内でFan-madeを配信中列上に置くため
   レイアウトを3要素でも崩さない
---------------------------------------- */

.calendar-layout {
    position: relative;
}


/* ----------------------------------------
   スマホ
---------------------------------------- */

@media (max-width: 700px) {

    .floating-refresh-button {
        right: 12px !important;
        bottom: 12px !important;

        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;

        border-width: 1px !important;
    }


    .floating-refresh-button .refresh-icon {
        font-size: 23px !important;
        line-height: 21px !important;
    }


    .floating-refresh-button .refresh-text {
        font-size: 8px !important;
        line-height: 9px !important;
    }


    .live-fan-made {
        grid-column: 1;

        justify-content: flex-end;

        margin-bottom: 7px;
    }


    .live-fan-made .fan-made-tooltip {
        width: min(
            260px,
            calc(100vw - 30px)
        );
    }
}


/* ----------------------------------------
   カレンダー右列
   Fan-made → 配信中 の順で縦配置
---------------------------------------- */

.live-column {
    grid-column: 2;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;

    align-self: start;
}


/* Fan-madeは右列上部。
   grid itemにはしない。 */
.live-column .live-fan-made {
    grid-column: auto !important;

    width: 100%;

    display: flex;
    justify-content: flex-end;

    margin: 0 !important;

    position: relative;

    z-index: 20;
}


/* 配信中欄は従来の横幅をそのまま使用 */
.live-column .live-status {
    width: 100%;

    min-width: 0;

    margin: 0;
}


/* ----------------------------------------
   スマホ
   カレンダーの下に右列全体を配置
---------------------------------------- */

@media (max-width: 700px) {

    .live-column {
        grid-column: 1;

        width: 100%;

        gap: 7px;
    }


    .live-column .live-fan-made {
        justify-content: flex-end;
    }
}


.live-column {
    position: relative;

    grid-column: 2;

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 0;

    align-self: start;

    /* Fan-madeを置くための上部スペース */
    padding-top: 46px;
}


/* Fan-madeのための横長背景は作らない */
.live-column .live-fan-made {
    position: absolute !important;

    top: 4px !important;
    right: 0 !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    z-index: 30;
}


/* Fan-made本体も余計なコンテナ背景を持たせない */
.live-column .live-fan-made .fan-made {
    display: inline-block;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* バッジだけ表示 */
.live-column .live-fan-made .fan-made-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 34px !important;

    padding: 7px 13px !important;

    border: 1px solid #b58bd0 !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.92) !important;

    box-shadow:
        0 2px 8px rgba(75, 46, 96, 0.14) !important;

    color: #704296 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}


/* 配信中欄はFan-madeの下にそのまま表示 */
.live-column .live-status {
    width: 100%;

    min-width: 0;

    margin: 0 !important;
}


/* ----------------------------------------
   スマホ
---------------------------------------- */

@media (max-width: 700px) {

    .live-column {
        grid-column: 1;

        width: 100%;

        padding-top: 42px;
    }


    .live-column .live-fan-made {
        top: 2px !important;
        right: 4px !important;
    }
}


/* 2列を同じ高さに揃える */
.calendar-layout {
    align-items: stretch !important;
}


/* 右列全体をカレンダーと同じ高さまで伸ばす */
.live-column {
    position: relative;

    grid-column: 2;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    align-self: stretch !important;

    gap: 0;

    /* Fan-madeは絶対配置にするので余白不要 */
    padding-top: 0 !important;
}


/* Fan-madeは配信中欄の高さに含めず、上に浮かせる */
.live-column .live-fan-made {
    position: absolute !important;

    top: -42px !important;
    right: 0 !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    z-index: 30;
}


/* 配信中欄を右列いっぱいに伸ばす */
.live-column .live-status {
    flex: 1 1 auto !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    display: flex;
    flex-direction: column;
}


/* 配信リストが残りの高さを使う */
.live-column #live-list {
    flex: 1 1 auto;

    min-height: 0;
}


/* ----------------------------------------
   スマホ
   スマホでは従来どおり自然な高さ
---------------------------------------- */

@media (max-width: 700px) {

    .calendar-layout {
        align-items: start !important;
    }


    .live-column {
        grid-column: 1;

        align-self: auto !important;

        height: auto !important;
    }


    .live-column .live-fan-made {
        top: -38px !important;
        right: 4px !important;
    }


    .live-column .live-status {
        height: auto !important;
        min-height: 0 !important;
    }
}


/* ==================================================
   Theme switcher v1
   Fan-madeの左に配置
   ================================================== */

.live-column .live-fan-made {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 7px !important;

    overflow: visible !important;
}


/* ----------------------------------------
   テーマ切り替え
---------------------------------------- */

.theme-switcher {
    position: relative;

    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    box-shadow: none;

    z-index: 40;
}


.theme-switch-button {
    min-height: 34px;

    padding: 7px 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    border: 1px solid #b58bd0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.92);

    color: #704296;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(75, 46, 96, 0.14);

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.theme-switch-button:hover {
    background: #ffffff;

    border-color: #9266ae;

    transform: translateY(-1px);

    box-shadow:
        0 4px 11px rgba(75, 46, 96, 0.20);
}


.theme-switch-button:active {
    transform: scale(0.96);
}


.theme-switch-icon {
    font-size: 13px;
    line-height: 1;
}


.theme-switch-text {
    white-space: nowrap;
}


/* ----------------------------------------
   テーマ選択ポップアップ
---------------------------------------- */

.theme-switch-popup {
    position: absolute;

    top: calc(100% + 7px);
    right: 0;

    width: 150px;

    padding: 6px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    border: 1px solid #d9cbe3;
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.98);

    box-shadow:
        0 7px 20px rgba(62, 41, 75, 0.18);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);

    pointer-events: none;

    z-index: 100;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
}


.theme-switch-popup.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    pointer-events: auto;
}


.theme-option {
    width: 100%;

    padding: 8px 9px;

    border: none;
    border-radius: 6px;

    background: transparent;

    color: #514758;

    font-size: 11px;
    font-weight: 700;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.theme-option:hover {
    background: #f7f0fb;

    color: #68447f;
}


.theme-option.active {
    background: #eee4f8;

    color: #68447f;
}


/* ----------------------------------------
   スマホ
---------------------------------------- */

@media (max-width: 700px) {

    .live-column .live-fan-made {
        gap: 5px !important;
    }


    .theme-switch-button {
        min-height: 32px;

        padding: 6px 9px;

        font-size: 9px;
    }


    .theme-switch-icon {
        font-size: 11px;
    }


    .theme-switch-popup {
        width: 140px;
    }
}


/* スマホでも中央配置を維持 */


/* body自体を透明にし、固定背景を見せる */
html,
body {
    min-height: 100%;

    background-color: transparent !important;
}


/* テーマ未設定時は従来背景色へ戻す */
body.theme-default {
    background-color: #f8f4fb !important;
}


/* KozuyaNanoテーマでは固定背景を表示 */


/* ----------------------------------------
   PageTheme固定背景
---------------------------------------- */

.page-theme {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    pointer-events: none;
    user-select: none;

    z-index: -2;
}


/* body自体の背景は透明にする */
html,
body {
    min-height: 100%;

    background: transparent !important;
}


/* デフォルトテーマでは従来背景へ戻す */
body.theme-default {
    background:
        linear-gradient(
            135deg,
            #fff8fc 0%,
            #f7f4ff 45%,
            #f2f7ff 100%
        ) !important;
}


/* Kozuya NanoテーマではPageThemeを見せる */


/* ----------------------------------------
   ヘッダー
   PageTheme上部をそのまま見せる
---------------------------------------- */


/* ----------------------------------------
   カレンダー等の主要UIは可読性維持
---------------------------------------- */

.calendar,
.live-status,
.schedule-section {
    position: relative;

    z-index: 1;
}


/* ----------------------------------------
   スマホ
   同じPageThemeを中央基準でクロップ
---------------------------------------- */

@media (max-width: 700px) {

    .page-theme {
        background-position: center center;
        background-size: cover;
    }
}


/* ==================================================
   PageTheme v2
   ヘッダー＋背景を1枚の固定背景へ統合
   ================================================== */

.page-theme {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    pointer-events: none;
    user-select: none;

    z-index: -2;
}


html,
body {
    min-height: 100%;

    background: transparent !important;
}


body.theme-default {
    background:
        linear-gradient(
            135deg,
            #fff8fc 0%,
            #f7f4ff 45%,
            #f2f7ff 100%
        ) !important;
}


/* PageThemeをヘッダーにも見せる */


/* スマホも同じ1枚を中央基準で使用 */
@media (max-width: 700px) {

    .page-theme {
        background-position: center center;
        background-size: cover;
    }
}


/* ==================================================
   PageTheme v3
   PageThemeのみ固定。
   ヘッダーとタイトルロゴは通常スクロールさせる。
   ================================================== */


/* ----------------------------------------
   ヘッダー固定を解除
---------------------------------------- */


/* ----------------------------------------
   タイトルロゴ
   ヘッダー内中央配置は維持
---------------------------------------- */


/* ----------------------------------------
   main
   固定ヘッダー分の余白を廃止
---------------------------------------- */


/* ----------------------------------------
   スマホ
---------------------------------------- */


/* ==================================================
   PageTheme v4
   ヘッダーと本文の境界を完全に消す
   ================================================== */


/* ヘッダー直後に余計な線・影を作らない */


/* PageThemeとの間に色差が出ないようmainも透明維持 */


/* calendar-layout自体にも背景を持たせない */
.calendar-layout,
.calendar-decoration-stage {
    background: transparent !important;
}


/* ==================================================
   Theme auto discovery v1
   themes.jsonから選択肢を自動生成
   ================================================== */

.theme-switch-popup {
    max-height: min(420px, 60vh);

    overflow-y: auto;
    overflow-x: hidden;
}


/* ==================================================
   Theme static 21 v1
   21人分のテーマ選択肢
   ================================================== */

.theme-switch-popup {
    width: 190px;

    max-height: min(
        520px,
        68vh
    );

    overflow-y: auto;
    overflow-x: hidden;
}


.theme-option {
    flex: 0 0 auto;
}


@media (max-width: 700px) {

    .theme-switch-popup {
        width: 180px;

        max-height: 60vh;
    }
}


/* ==================================================
   ThemeStatic21 regression fix v2
   - Fan-madeの白ベタ化を解除
   - Fan-made + テーマ切替を配信中欄の上へ配置
   - 配信中欄をカレンダー右側・同じ高さへ復元
   ================================================== */


/* カレンダーと右列を同じ高さへ */
.calendar-layout {
    align-items: stretch !important;
}


/* 右列 */
.live-column {
    position: relative !important;

    grid-column: 2 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-self: stretch !important;

    gap: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* Fan-made + テーマ切替は配信中欄の上に浮かせる */
.live-column > .live-fan-made {
    position: absolute !important;

    top: -42px !important;
    right: 0 !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 7px !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    overflow: visible !important;

    z-index: 50 !important;
}


/* Fan-madeコンテナには背景を付けない */
.live-column > .live-fan-made > .fan-made {
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* Fan-madeバッジを元の淡いグラデーションへ戻す */
.live-column > .live-fan-made .fan-made-badge {
    min-height: 34px !important;

    padding: 7px 13px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #c59ae8 !important;
    border-radius: 999px !important;

    background: #ffffff !important;

    color: #7b42bd !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;

    box-shadow:
        0 2px 8px rgba(120, 70, 170, 0.10) !important;

    cursor: help !important;
}


.live-column > .live-fan-made .fan-made:hover .fan-made-badge {
    background: #ffffff !important;

    border-color: #a86bd5 !important;

    color: #6930a5 !important;

    box-shadow:
        0 5px 16px rgba(110, 60, 160, 0.18) !important;
}


/* テーマ切替ボタンもFan-madeと馴染ませる */
.live-column > .live-fan-made .theme-switch-button {
    min-height: 34px !important;

    background: #ffffff !important;

    border: 1px solid #c59ae8 !important;

    color: #7b42bd !important;

    box-shadow:
        0 2px 8px rgba(120, 70, 170, 0.10) !important;
}


/* 配信中欄を右列いっぱいに伸ばす */
.live-column > .live-status {
    flex: 1 1 auto !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
}


.live-column > .live-status #live-list {
    flex: 1 1 auto !important;

    min-height: 0 !important;
}


/* スマホでは自然な縦並び */
@media (max-width: 700px) {

    .calendar-layout {
        align-items: start !important;
    }


    .live-column {
        grid-column: 1 !important;

        width: 100% !important;
        height: auto !important;

        align-self: auto !important;
    }


    .live-column > .live-fan-made {
        top: -38px !important;
        right: 4px !important;

        gap: 5px !important;
    }


    .live-column > .live-status {
        height: auto !important;
        min-height: 0 !important;
    }
}


/* ----------------------------------------
   旧SVG / アニメーション背景を完全無効化
---------------------------------------- */


/* ----------------------------------------
   ヘッダー
   ロゴが下へはみ出せるようにする
---------------------------------------- */


/* ----------------------------------------
   タイトルロゴ
   ヘッダーの縦横中央を基準に大きく表示
---------------------------------------- */


/* ----------------------------------------
   ロゴ下端とカレンダーの間を少しだけ確保
---------------------------------------- */


/* ----------------------------------------
   スマホ
---------------------------------------- */




/* ==================================================
   現行ヘッダー / タイトルロゴ / メイン配置
   - PCヘッダー: 160px
   - スマホヘッダー: 100px
   - タイトルロゴはヘッダー内に必ず収める
   ================================================== */

html body > header {
    position: relative;
    width: 100%;
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    z-index: 10;
}

html body > header > h1.site-logo-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    margin: 0;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    z-index: 20;
}

html body > header .site-title-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(820px, 78vw);
    max-height: 148px;
    margin: 0 auto;
    object-fit: contain;
    object-position: center center;
    filter: drop-shadow(0 3px 6px rgba(70, 45, 90, 0.14));
}

html body > main {
    max-width: 1400px;
    margin: 16px auto 30px;
    padding: 0 10px;
    background: transparent;
}

@media (max-width: 700px) {
    html body > header {
        height: 100px;
        min-height: 100px;
        max-height: 100px;
    }

    html body > header > h1.site-logo-title {
        padding: 5px 8px;
    }

    html body > header .site-title-logo {
        width: auto;
        height: auto;
        max-width: 92vw;
        max-height: 90px;
    }

    html body > main {
        margin-top: 12px;
    }
}

/* ==================================================
   Theme/Fan-made click layer fix
   main上余白をPC 16px / スマホ 12pxへ縮めても、
   上方向へ浮かせた操作UIがheaderの下に潜らないようにする。
   ================================================== */

.calendar-decoration-stage {
    position: relative !important;
    overflow: visible !important;
    z-index: 20 !important;
}

.calendar-layout {
    position: relative !important;
    overflow: visible !important;
    z-index: 30 !important;
}

.live-column {
    position: relative !important;
    overflow: visible !important;
    z-index: 40 !important;
}

.live-column > .live-fan-made {
    z-index: 200 !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

.live-column > .live-fan-made .theme-switcher,
.live-column > .live-fan-made .theme-switch-button,
.live-column > .live-fan-made .fan-made,
.live-column > .live-fan-made .fan-made-badge {
    position: relative !important;
    z-index: 210 !important;
    pointer-events: auto !important;
}

.live-column > .live-fan-made .theme-switch-popup {
    z-index: 1000 !important;
    pointer-events: auto !important;
}

/* ロゴ画像は表示専用。重なった場所のクリックを奪わない。 */
html body > header,
html body > header > h1.site-logo-title,
html body > header .site-title-logo {
    pointer-events: none !important;
}

/* ==================================================
   配信中サムネイル：YouTube / Twitch PNGフレーム
   ==================================================

   フレーム画像実測:
     1536 × 1024 px 共通

   YouTube透明内側の安全領域（実測・α≦20基準）:
     X = 98 ～ 1450
     Y = 170 ～ 864
     W = 1353
     H = 695

   Twitch透明内側の安全領域（実測・α≦20基準）:
     X = 80 ～ 1455
     Y = 141 ～ 865
     W = 1376
     H = 725

   サムネイルをこの矩形に配置し、
   PNGフレームをその上へ重ねる。
   ================================================== */


/* 既存のサムネイルリンクをフレーム全体の基準にする */
.live-thumbnail-link {
    overflow: visible !important;
}


/* 1536:1024 = 3:2 のフレームキャンバス */
.live-thumbnail-frame {
    position: relative !important;

    width: 100% !important;

    aspect-ratio: 3 / 2 !important;

    overflow: hidden !important;

    background: transparent !important;

    border-radius: 0 !important;
}


/* 実際の配信サムネイル */
.live-thumbnail-frame .live-thumbnail {
    position: absolute !important;

    display: block !important;

    margin: 0 !important;

    max-width: none !important;

    height: auto;

    object-fit: cover !important;

    border-radius: 0 !important;

    background: #000000 !important;

    z-index: 1 !important;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease !important;
}


/* ----------------------------------------
   YouTube

   実測:
   X=98 / 1536   = 6.380208%
   Y=170 / 1024  = 16.601563%
   W=1353 /1536  = 88.085938%
   H=695 /1024   = 67.871094%
---------------------------------------- */

.live-thumbnail-frame-youtube .live-thumbnail {
    left: 6.380208% !important;
    top: 16.601563% !important;

    width: 88.085938% !important;
    height: 67.871094% !important;
}


/* ----------------------------------------
   Twitch

   実測:
   X=80 /1536    = 5.208333%
   Y=141 /1024   = 13.769531%
   W=1376 /1536  = 89.583333%
   H=725 /1024   = 70.800781%
---------------------------------------- */

.live-thumbnail-frame-twitch .live-thumbnail {
    left: 5.208333% !important;
    top: 13.769531% !important;

    width: 89.583333% !important;
    height: 70.800781% !important;
}


/* フレームPNGをサムネイルの上に完全一致で重ねる */
.live-thumbnail-overlay {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: fill !important;

    pointer-events: none !important;

    user-select: none !important;

    z-index: 2 !important;
}


/* hover時はフレームを動かさず、内側サムネイルだけ反応 */
.live-thumbnail-link:hover .live-thumbnail {
    opacity: 0.86 !important;
    transform: scale(1.008) !important;
}


/* 旧SVGプラットフォームバッジはPNGフレーム方式では使用しない */
.live-platform-badge,
.live-platform-logo,
.live-platform-name {
    display: none !important;
}

/* ==================================================
   Calendar / Schedule independent column layout
   2026-08-20

   PC:
     左列 = カレンダー → 選択日の予定
     右列 = 配信中

   配信中欄がカレンダーより高くなっても、
   左列の予定開始位置はカレンダー下端だけを基準にする。
   ================================================== */

.calendar-layout {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        290px !important;

    gap: 20px !important;

    align-items: start !important;
}


.calendar-main-column {
    grid-column: 1 !important;

    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-self: start !important;
}


.calendar-main-column > .calendar {
    width: 100% !important;

    min-width: 0 !important;
}


.calendar-main-column > .schedule-section {
    width: 100% !important;

    margin-top: 30px !important;

    min-width: 0 !important;
}


/*
   右側の配信中欄はカレンダーの高さへ引き伸ばさない。
   内容量に応じて下方向へ自然に伸びる。
*/
.calendar-layout > .live-column {
    grid-column: 2 !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    align-self: start !important;

    display: flex !important;
    flex-direction: column !important;
}


.calendar-layout > .live-column > .live-status {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    flex: 0 0 auto !important;
}


.calendar-layout > .live-column > .live-status #live-list {
    flex: 0 0 auto !important;

    min-height: 0 !important;
}


/* ----------------------------------------
   スマホ

   カレンダー
       ↓
   選択日の予定
       ↓
   配信中

   の順にする。
---------------------------------------- */

@media (max-width: 700px) {

    .calendar-layout {
        grid-template-columns: 1fr !important;

        gap: 15px !important;

        align-items: start !important;
    }


    .calendar-main-column {
        grid-column: 1 !important;

        width: 100% !important;
    }


    .calendar-main-column > .schedule-section {
        margin-top: 24px !important;
    }


    .calendar-layout > .live-column {
        grid-column: 1 !important;

        width: 100% !important;

        height: auto !important;

        align-self: start !important;
    }


    .calendar-layout > .live-column > .live-status {
        height: auto !important;
    }
}

/* ==================================================
   Mobile order override
   2026-08-20

   スマホ表示順:
     1. カレンダー
     2. 配信中
     3. 選択日の予定
   ================================================== */

@media (max-width: 700px) {

    .calendar-layout {
        display: flex !important;
        flex-direction: column !important;

        gap: 15px !important;
    }


    /*
       左列ラッパー自体はレイアウトボックスを持たせず、
       カレンダーと予定をcalendar-layout直下と同様に扱う。
    */
    .calendar-main-column {
        display: contents !important;
    }


    .calendar-main-column > .calendar {
        order: 1 !important;

        width: 100% !important;
    }


    .calendar-layout > .live-column {
        order: 2 !important;

        width: 100% !important;

        height: auto !important;

        align-self: stretch !important;
    }


    .calendar-main-column > .schedule-section {
        order: 3 !important;

        width: 100% !important;

        margin-top: 9px !important;
    }


    .calendar-layout > .live-column > .live-status {
        width: 100% !important;

        height: auto !important;
    }
}

/* ==================================================
   Temporary YouTube × Twitch platform theme
   キャラクターテーマ許可確認までの一時テーマ
   ================================================== */

body.temporary-platform-theme .page-theme {
    display: block !important;

    background:
        radial-gradient(
            circle at 10% 8%,
            rgba(255, 0, 0, 0.18) 0,
            rgba(255, 0, 0, 0.07) 18%,
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(145, 70, 255, 0.22) 0,
            rgba(145, 70, 255, 0.08) 20%,
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #fffafa 0%,
            #fffdfd 35%,
            #fbf8ff 68%,
            #f7f3ff 100%
        ) !important;
}


/* YouTube / Twitchを連想させる控えめな背景アクセント */
body.temporary-platform-theme .page-theme::before,
body.temporary-platform-theme .page-theme::after {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    border-radius: 50%;

    filter: blur(2px);

    opacity: 0.35;
}

body.temporary-platform-theme .page-theme::before {
    top: 11vh;
    left: -150px;

    background:
        radial-gradient(
            circle,
            rgba(255, 0, 0, 0.16),
            transparent 68%
        );
}

body.temporary-platform-theme .page-theme::after {
    right: -150px;
    bottom: 8vh;

    background:
        radial-gradient(
            circle,
            rgba(145, 70, 255, 0.18),
            transparent 68%
        );
}


/* ----------------------------------------
   Temporary title logo
---------------------------------------- */

html body > header > h1.site-logo-title {
    padding: 8px 10px !important;
}


.temporary-platform-title {
    display: grid;

    grid-template-columns: auto auto;
    grid-template-rows: auto auto;

    grid-template-areas:
        "marks main"
        "marks sub";

    column-gap: 18px;
    row-gap: 2px;

    align-items: center;
    justify-content: center;

    width: min(760px, 78vw);
    max-height: 144px;

    padding: 10px 24px;

    border: 1px solid rgba(255, 255, 255, 0.80);
    border-radius: 24px;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 250, 250, 0.82) 42%,
            rgba(250, 246, 255, 0.84) 100%
        );

    box-shadow:
        0 8px 28px rgba(60, 35, 80, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(8px);

    color: #26212c;
}


.temporary-platform-marks {
    grid-area: marks;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}


.temporary-youtube-mark {
    position: relative;

    width: 68px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            #ff2626,
            #e00000
        );

    box-shadow:
        0 4px 10px rgba(224, 0, 0, 0.24);
}


.temporary-youtube-play {
    width: 0;
    height: 0;

    margin-left: 4px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 17px solid #ffffff;
}


.temporary-platform-x {
    color: #8e7b9c;

    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}


.temporary-twitch-mark {
    position: relative;

    width: 50px;
    height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    border-radius: 8px 8px 8px 2px;

    background:
        linear-gradient(
            180deg,
            #a970ff,
            #7d3cff
        );

    box-shadow:
        0 4px 10px rgba(125, 60, 255, 0.22);
}


.temporary-twitch-mark::after {
    content: "";

    position: absolute;

    left: 8px;
    bottom: -7px;

    width: 12px;
    height: 12px;

    background: #7d3cff;

    clip-path: polygon(0 0, 100% 0, 0 100%);
}


.temporary-twitch-eye {
    width: 5px;
    height: 17px;

    border-radius: 2px;

    background: #ffffff;
}


.temporary-title-main {
    grid-area: main;

    align-self: end;

    font-size: clamp(26px, 3.1vw, 44px);
    line-height: 1;

    font-weight: 900;
    letter-spacing: 0.04em;

    color: #29222f;

    text-shadow:
        0 1px 0 #ffffff;
}


.temporary-title-sub {
    grid-area: sub;

    align-self: start;

    margin-top: 3px;

    font-size: clamp(12px, 1.2vw, 17px);
    line-height: 1;

    font-weight: 800;
    letter-spacing: 0.18em;

    background:
        linear-gradient(
            90deg,
            #e51b23 0%,
            #e51b23 42%,
            #9146ff 58%,
            #9146ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* キャラクターテーマ切替は一時停止 */
.temporary-theme-switch-disabled,
body.temporary-platform-theme .theme-switcher,
body.temporary-platform-theme #theme-switch-button,
body.temporary-platform-theme #theme-switch-popup {
    display: none !important;
}


/* Fan-madeをテーマボタン非表示時も自然な位置に維持 */
body.temporary-platform-theme .live-fan-made {
    justify-content: flex-end !important;
}


@media (max-width: 700px) {

    .temporary-platform-title {
        width: min(94vw, 620px);

        grid-template-columns: auto 1fr;

        column-gap: 10px;

        padding: 7px 12px;

        border-radius: 16px;
    }


    .temporary-platform-marks {
        gap: 6px;
    }


    .temporary-youtube-mark {
        width: 42px;
        height: 30px;

        border-radius: 8px;
    }


    .temporary-youtube-play {
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 11px;
    }


    .temporary-platform-x {
        font-size: 15px;
    }


    .temporary-twitch-mark {
        width: 32px;
        height: 30px;

        gap: 3px;

        border-radius: 5px 5px 5px 2px;
    }


    .temporary-twitch-mark::after {
        left: 5px;
        bottom: -4px;

        width: 8px;
        height: 8px;
    }


    .temporary-twitch-eye {
        width: 3px;
        height: 11px;
    }


    .temporary-title-main {
        font-size: clamp(21px, 7vw, 32px);
    }


    .temporary-title-sub {
        font-size: clamp(9px, 2.8vw, 13px);
        letter-spacing: 0.11em;
    }
}

/* ==================================================
   Temporary theme suspension notice
   ================================================== */

.temporary-theme-notice {
    position: fixed;

    right: 16px;
    bottom: 76px;

    z-index: 10000;

    padding: 6px 10px;

    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.88);

    color: #555;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08);

    backdrop-filter: blur(4px);

    pointer-events: none;
}


@media (max-width: 700px) {

    .temporary-theme-notice {
        right: 10px;
        bottom: 68px;

        padding: 5px 8px;

        font-size: 10px;
    }
}

/* ==================================================
   Temporary Platform Theme - reference UI refinement
   YouTube red × Twitch purple / clean white dashboard
   ================================================== */

body.temporary-platform-theme {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 42, 42, 0.11), transparent 25%),
        radial-gradient(circle at 100% 4%, rgba(145, 70, 255, 0.13), transparent 28%),
        linear-gradient(135deg, #fffafa 0%, #ffffff 48%, #faf7ff 100%) !important;
}

body.temporary-platform-theme .page-theme {
    background:
        radial-gradient(circle at 7% 8%, rgba(255, 30, 30, 0.14), transparent 24%),
        radial-gradient(circle at 92% 9%, rgba(145, 70, 255, 0.16), transparent 27%),
        linear-gradient(135deg, #fffafa 0%, #ffffff 50%, #f9f6ff 100%) !important;
}

/* subtle dot texture like the reference */
body.temporary-platform-theme .page-theme::before {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    opacity: 0.28;
    filter: none;
    background-image:
        radial-gradient(circle, rgba(255, 55, 55, 0.32) 1.4px, transparent 1.6px),
        radial-gradient(circle, rgba(145, 70, 255, 0.30) 1.4px, transparent 1.6px);
    background-size: 15px 15px, 15px 15px;
    background-position: -120px 80px, calc(100% + 110px) 75px;
    background-repeat: no-repeat;
    pointer-events: none;
}

body.temporary-platform-theme .page-theme::after {
    display: none !important;
}

/* Header: remove the large glass pill and make the platform title feel like a real site masthead */
body.temporary-platform-theme header {
    background: transparent !important;
}

body.temporary-platform-theme html body > header > h1.site-logo-title,
body.temporary-platform-theme header > h1.site-logo-title {
    justify-content: flex-start !important;
    padding: 16px 24px 12px !important;
}

body.temporary-platform-theme .temporary-platform-title {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;

    grid-template-columns: auto auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "marks main"
        "marks sub" !important;

    column-gap: 15px !important;
    row-gap: 3px !important;
    justify-content: start !important;
}

body.temporary-platform-theme .temporary-platform-marks {
    gap: 9px !important;
}

body.temporary-platform-theme .temporary-youtube-mark {
    width: 62px !important;
    height: 42px !important;
    border-radius: 12px !important;
}

body.temporary-platform-theme .temporary-twitch-mark {
    width: 46px !important;
    height: 42px !important;
}

body.temporary-platform-theme .temporary-title-main {
    font-size: clamp(30px, 3.2vw, 46px) !important;
    color: #17131b !important;
    letter-spacing: 0.015em !important;
    text-shadow: none !important;
}

body.temporary-platform-theme .temporary-title-sub {
    margin-top: 2px !important;
    font-size: clamp(13px, 1.25vw, 18px) !important;
    color: #26212c !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    letter-spacing: 0.12em !important;
}

/* Main panels: cleaner white cards */
body.temporary-platform-theme .calendar,
body.temporary-platform-theme .live-status,
body.temporary-platform-theme .schedule-section {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(78, 58, 94, 0.10) !important;
    box-shadow: 0 10px 30px rgba(62, 43, 78, 0.07) !important;
}

/* Temporary suspension notice: top-right, clear of the refresh button */
body.temporary-platform-theme .temporary-theme-notice {
    top: 14px !important;
    right: 16px !important;
    bottom: auto !important;

    padding: 9px 14px 9px 34px !important;

    border: 1px solid rgba(235, 65, 65, 0.65) !important;
    border-radius: 10px !important;

    background: rgba(255, 255, 255, 0.94) !important;
    color: #403742 !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    box-shadow: 0 5px 18px rgba(70, 40, 80, 0.08) !important;
    backdrop-filter: blur(8px) !important;
}

body.temporary-platform-theme .temporary-theme-notice::before {
    content: "!";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);

    display: grid;
    place-items: center;

    width: 16px;
    height: 16px;

    border-radius: 50%;
    background: #ef2f36;
    color: #fff;

    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

/* theme controls remain fully disabled */
body.temporary-platform-theme .temporary-theme-switch-disabled,
body.temporary-platform-theme .theme-switcher,
body.temporary-platform-theme #theme-switch-button,
body.temporary-platform-theme #theme-switch-popup {
    display: none !important;
}

@media (max-width: 700px) {
    body.temporary-platform-theme header > h1.site-logo-title {
        padding: 54px 12px 10px !important;
    }

    body.temporary-platform-theme .temporary-platform-title {
        column-gap: 8px !important;
    }

    body.temporary-platform-theme .temporary-youtube-mark {
        width: 42px !important;
        height: 29px !important;
    }

    body.temporary-platform-theme .temporary-twitch-mark {
        width: 31px !important;
        height: 29px !important;
    }

    body.temporary-platform-theme .temporary-title-main {
        font-size: clamp(21px, 7vw, 30px) !important;
    }

    body.temporary-platform-theme .temporary-title-sub {
        font-size: clamp(9px, 2.7vw, 12px) !important;
    }

    body.temporary-platform-theme .temporary-theme-notice {
        top: 8px !important;
        right: 8px !important;
        bottom: auto !important;

        max-width: calc(100vw - 16px);

        padding: 7px 10px 7px 29px !important;
        font-size: 10px !important;
    }

    body.temporary-platform-theme .temporary-theme-notice::before {
        left: 9px;
        width: 14px;
        height: 14px;
        font-size: 9px;
    }
}

/* ==================================================
   Temporary notice / Fan-made position correction
   2026-08-20

   1. 一時停止中表示 → 画面左上固定
   2. Fan-made       → 既存レイアウト位置を維持
   3. 更新ボタン     → 変更しない
   ================================================== */

/* 一時停止中表示を右上から左上へ移動 */
body.temporary-platform-theme .temporary-theme-notice {
    top: 14px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
}


/*
   一時テーマ導入時に追加したFan-madeへの強制右寄せを解除。
   元のCSSで定義されている配置へ戻す。
*/
body.temporary-platform-theme .live-fan-made {
    justify-content: revert !important;
}


/*
   更新ボタンには位置指定を追加しない。
   既存の .refresh-floating-button 等のルールをそのまま使用する。
*/


@media (max-width: 700px) {

    /* スマホでも一時停止中表示は画面左上 */
    body.temporary-platform-theme .temporary-theme-notice {
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
        bottom: auto !important;

        max-width: calc(100vw - 16px);
    }


    /*
       Fan-madeはスマホ既存CSSへ戻す。
       temporary-platform-theme側では配置を変更しない。
    */
    body.temporary-platform-theme .live-fan-made {
        justify-content: revert !important;
    }
}

/* ==================================================
   Fan-made / temporary notice fixed controls
   2026-08-20

   - 一時停止中表示は画面左上に固定
   - Fan-madeは画面に固定
   - スマホではFan-madeを画面右上に固定
   - 更新ボタンの位置は変更しない

   Fan-madeはHTML上ではlive-column内にあるが、
   position: fixed にすることで配信中欄のレイアウトから
   完全に切り離す。
   ================================================== */


/* ----------------------------------------
   一時停止中表示
   画面左上に固定
---------------------------------------- */

body.temporary-platform-theme .temporary-theme-notice {
    position: fixed !important;

    top: 14px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 12000 !important;
}


/* ----------------------------------------
   Fan-made
   PCでは従来の右列上部に近い位置を維持しつつ固定
---------------------------------------- */

body.temporary-platform-theme .live-column > .live-fan-made {
    position: fixed !important;

    top: 134px !important;

    right:
        max(
            10px,
            calc((100vw - 1400px) / 2 + 10px)
        ) !important;

    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    overflow: visible !important;

    z-index: 11900 !important;
}


/* テーマ切替停止中なのでFan-madeだけ表示 */
body.temporary-platform-theme .live-column > .live-fan-made > .theme-switcher {
    display: none !important;
}


body.temporary-platform-theme .live-column > .live-fan-made > .fan-made {
    position: relative !important;

    display: block !important;

    margin: 0 !important;
}


/* ----------------------------------------
   スマホ
   Fan-made = 画面の一番右上
   一時停止中 = 画面の一番左上
---------------------------------------- */

@media (max-width: 700px) {

    body.temporary-platform-theme .temporary-theme-notice {
        position: fixed !important;

        top: 8px !important;
        left: 8px !important;
        right: auto !important;
        bottom: auto !important;

        max-width:
            calc(100vw - 116px) !important;

        z-index: 12000 !important;
    }


    body.temporary-platform-theme .live-column > .live-fan-made {
        position: fixed !important;

        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 12100 !important;
    }


    body.temporary-platform-theme .live-column > .live-fan-made .fan-made-badge {
        min-height: 30px !important;

        padding: 6px 10px !important;

        font-size: 10px !important;
    }


    /*
       Fan-madeのツールチップは右端から画面外へ出ないよう
       右基準で開く。
    */
    body.temporary-platform-theme .live-column > .live-fan-made .fan-made-tooltip {
        left: auto !important;
        right: 0 !important;

        transform: none !important;

        max-width:
            calc(100vw - 16px) !important;
    }
}

/* ==================================================
   Top controls - scroll with page
   2026-08-20

   Fan-made / 一時停止中表示は fixed にしない。
   ページ上部に absolute 配置し、
   スクロール時は通常どおり画面外へ流れる。

   更新ボタンは既存仕様のまま変更しない。
   ================================================== */


/* ----------------------------------------
   一時停止中表示
   ページ左上
---------------------------------------- */

body.temporary-platform-theme .temporary-theme-notice {
    position: absolute !important;

    top: 14px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 12000 !important;
}


/* ----------------------------------------
   Fan-made
   ページ右上
---------------------------------------- */

body.temporary-platform-theme > .live-fan-made {
    position: absolute !important;

    top: 14px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    overflow: visible !important;

    z-index: 11900 !important;
}


/* テーマ切替停止中なのでFan-madeのみ表示 */
body.temporary-platform-theme > .live-fan-made > .theme-switcher {
    display: none !important;
}


body.temporary-platform-theme > .live-fan-made > .fan-made {
    position: relative !important;

    display: block !important;

    margin: 0 !important;
}


/* ----------------------------------------
   スマホ
   左上 = 一時停止中
   右上 = Fan-made
---------------------------------------- */

@media (max-width: 700px) {

    body.temporary-platform-theme .temporary-theme-notice {
        position: absolute !important;

        top: 8px !important;
        left: 8px !important;
        right: auto !important;
        bottom: auto !important;

        max-width:
            calc(100vw - 116px) !important;

        z-index: 12000 !important;
    }


    body.temporary-platform-theme > .live-fan-made {
        position: absolute !important;

        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 12100 !important;
    }


    body.temporary-platform-theme > .live-fan-made .fan-made-badge {
        min-height: 30px !important;

        padding: 6px 10px !important;

        font-size: 10px !important;
    }


    body.temporary-platform-theme > .live-fan-made .fan-made-tooltip {
        left: auto !important;
        right: 0 !important;

        transform: none !important;

        max-width:
            calc(100vw - 16px) !important;
    }
}

/* ==================================================
   Fan-made background cleanup
   外側コンテナの白背景・角張りを完全に除去
   ================================================== */

body.temporary-platform-theme > .live-fan-made {
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* Fan-made本体以外のラッパーにも背景を持たせない */
body.temporary-platform-theme > .live-fan-made > .fan-made {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/*
   表示されるバッジ本体だけを丸いピル型にする。
   外側に四角い白背景が残らないよう明示する。
*/
body.temporary-platform-theme > .live-fan-made .fan-made-badge {
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.92) !important;

    border: 1px solid rgba(105, 82, 120, 0.14) !important;

    box-shadow:
        0 3px 10px rgba(55, 35, 70, 0.08) !important;

    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ==================================================
   Fan-made purple outline restoration
   外側の四角い背景は戻さず、バッジ本体の紫縁取りだけ復元
   ================================================== */

body.temporary-platform-theme > .live-fan-made .fan-made-badge {
    border: 1px solid rgba(145, 70, 255, 0.72) !important;

    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.92) !important;

    box-shadow:
        0 0 0 1px rgba(145, 70, 255, 0.08),
        0 3px 10px rgba(55, 35, 70, 0.08) !important;
}




/* ============================================================
   PWA + Web Push 通知設定
   ============================================================ */

.notification-settings-button {
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 3600;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 92px;
    height: 42px;
    padding: 0 12px;

    border: 1px solid rgba(104, 68, 127, 0.28);
    border-radius: 21px;

    background: rgba(255, 255, 255, 0.94);
    color: #604080;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
    box-shadow: 0 4px 16px rgba(70, 45, 90, 0.16);
}

.notification-settings-button.enabled::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #53a86b;
}

.notification-settings-icon {
    font-size: 17px;
    line-height: 1;
}

.notification-settings-text {
    white-space: nowrap;
}

.notification-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
    background: rgba(34, 26, 42, 0.42);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.16s ease,
        visibility 0.16s ease;
}

.notification-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.notification-modal {
    width: min(620px, 100%);
    max-height: min(780px, calc(100vh - 48px));
    overflow-y: auto;

    padding: 20px;
    border: 1px solid #ded4e8;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 54px rgba(47, 30, 61, 0.25);
}

.notification-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.notification-modal-header h2 {
    margin: 0 0 5px;
    color: #604080;
    font-size: 20px;
}

.notification-modal-header p {
    margin: 0;
    color: #77707f;
    font-size: 12px;
}

.notification-modal-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f0eaf4;
    color: #68447f;
    font-size: 22px;
    cursor: pointer;
}

.notification-support-message {
    min-height: 38px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f7f3fa;
    color: #665d6d;
    font-size: 12px;
    line-height: 1.5;
}

.notification-support-message[data-type="success"] {
    background: #edf8f0;
    color: #367348;
}

.notification-support-message[data-type="warning"] {
    background: #fff8e7;
    color: #80641f;
}

.notification-support-message[data-type="error"] {
    background: #fff0f3;
    color: #9a445b;
}

.notification-settings-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #ece5f1;
}

.notification-settings-section-title {
    margin-bottom: 10px;
    color: #604080;
    font-size: 13px;
    font-weight: 800;
}

.notification-channel-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.notification-channel-actions button {
    padding: 6px 10px;
    border: 1px solid #d9cbe3;
    border-radius: 6px;
    background: #faf8fc;
    color: #68447f;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.notification-channel-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 260px;
    overflow-y: auto;
    padding: 2px;
}

.notification-channel-item {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
    padding: 7px 8px;

    border: 1px solid #e6ddec;
    border-radius: 8px;
    background: #fcfaff;

    color: #4d4553;
    font-size: 12px;
    cursor: pointer;
}

.notification-channel-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee8f2;
}

.notification-channel-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-type-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.notification-type-list label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4f4855;
    font-size: 12px;
}

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

#notify-before-minutes {
    min-width: 108px;
    height: 32px;
    padding: 4px 30px 4px 9px;

    border: 1px solid #d9cbe3;
    border-radius: 7px;

    font: inherit;
    color: #4f4855;
    background: #ffffff;

    cursor: pointer;
}

.notification-before-help {
    margin-top: 6px;
    color: #8a818f;
    font-size: 10px;
}

.notification-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #ece5f1;
}

.notification-modal-actions button {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.notification-disable-button {
    border: 1px solid #dfcbd2;
    background: #fff8fa;
    color: #9a5267;
}

.notification-disable-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.notification-save-button {
    border: 1px solid #68447f;
    background: #68447f;
    color: #ffffff;
}

@media (max-width: 700px) {
    .notification-settings-button {
        right: 14px;
        bottom: 82px;
        min-width: 84px;
        height: 38px;
        padding: 0 10px;
    }

    .notification-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .notification-modal {
        width: 100%;
        max-height: 88vh;
        padding: 16px;
        border-radius: 16px 16px 0 0;
    }

    .notification-channel-list {
        grid-template-columns: 1fr;
        max-height: 240px;
    }

    .notification-modal-actions {
        position: sticky;
        bottom: -16px;
        margin-left: -16px;
        margin-right: -16px;
        padding: 12px 16px 16px;
        background: rgba(255, 255, 255, 0.98);
    }
}


/* ============================================================
   Settings hub / notification guidance
   2026-08-21
   ============================================================ */

/* PC: Fan-made の右に設定ボタンを置く */
@media (min-width: 701px) {
    body.temporary-platform-theme > .live-fan-made {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    body.temporary-platform-theme > .live-fan-made > .fan-made {
        order: 1;
        flex: 0 0 auto;
    }

    .desktop-settings-control {
        position: relative;
        order: 2;
        flex: 0 0 auto;
    }

    .desktop-settings-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;

        width: 48px;
        height: 50px;
        padding: 0;

        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #604080;

        cursor: pointer;
        transition:
            background 0.15s ease,
            transform 0.15s ease,
            opacity 0.15s ease;
    }

    .desktop-settings-button:hover {
        background: rgba(255, 255, 255, 0.58);
        transform: translateY(-1px);
    }

    .desktop-settings-button:active {
        transform: scale(0.94);
    }

    .desktop-settings-icon {
        display: block;
        font-size: 26px;
        line-height: 27px;
        font-family: "Segoe UI Symbol", "Noto Sans JP", sans-serif;
    }

    .desktop-settings-text {
        display: block;
        margin-top: 1px;
        font-size: 9px;
        line-height: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .desktop-settings-popup {
        position: absolute;
        top: calc(100% + 7px);
        right: 0;
        z-index: 4200;

        width: 220px;
        padding: 8px;

        border: 1px solid #d9cbe3;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.985);
        box-shadow: 0 12px 34px rgba(55, 35, 70, 0.20);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-5px) scale(0.98);
        transform-origin: top right;

        transition:
            opacity 0.14s ease,
            visibility 0.14s ease,
            transform 0.14s ease;
    }

    .desktop-settings-popup.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .desktop-settings-popup-title {
        padding: 5px 8px 8px;
        color: #7a6885;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    .desktop-settings-menu-item {
        position: relative;
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;

        width: 100%;
        min-height: 44px;
        padding: 7px 9px;

        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #4d4355;
        text-align: left;
        cursor: pointer;

        transition: background 0.15s ease;
    }

    .desktop-settings-menu-item:not(.disabled):hover {
        background: #f7f0fb;
    }

    .desktop-settings-menu-item.enabled::after {
        content: "";
        position: absolute;
        top: 8px;
        right: 8px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #53a86b;
    }

    .desktop-settings-menu-item.enabled .desktop-settings-menu-arrow {
        margin-right: 11px;
    }

    .desktop-settings-menu-item.disabled {
        opacity: 0.46;
        cursor: default;
    }

    .desktop-settings-menu-icon {
        font-size: 17px;
        line-height: 1;
        text-align: center;
    }

    .desktop-settings-menu-label {
        font-size: 12px;
        font-weight: 700;
    }

    .desktop-settings-menu-status {
        padding: 2px 5px;
        border-radius: 999px;
        background: #f1edf4;
        color: #8d8194;
        font-size: 9px;
        font-weight: 700;
    }

    .desktop-settings-menu-arrow {
        color: #9a8ca2;
        font-size: 20px;
        line-height: 1;
    }

    /* PCでは旧ベルのフローティングボタンを設定メニューへ統合 */
    .notification-settings-button {
        display: none !important;
    }
}

/* 通知モーダル右上 */
.notification-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.notification-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 1px solid #b99bca;
    border-radius: 50%;
    background: #ffffff;
    color: #68447f;

    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    font-family: Arial, sans-serif;

    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.notification-info-button:hover,
.notification-info-button.active {
    border-color: #68447f;
    background: #68447f;
    color: #ffffff;
}

.notification-info-button:active {
    transform: scale(0.92);
}

.notification-platform-note {
    margin: 0 0 14px;
    padding: 12px 13px;

    border: 1px solid #e1d4e9;
    border-radius: 10px;
    background: #fbf8fd;

    color: #514957;
    font-size: 11px;
    line-height: 1.6;
}

.notification-platform-note[hidden] {
    display: none !important;
}

.notification-platform-note-title {
    margin-bottom: 7px;
    color: #604080;
    font-size: 12px;
    font-weight: 900;
}

.notification-platform-note-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.notification-platform-note-row + .notification-platform-note-row {
    margin-top: 5px;
}

.notification-platform-note-row strong {
    color: #68447f;
}

/* スマホは現状の通知ボタンを維持し、PC専用設定UIは非表示 */
@media (max-width: 700px) {
    .desktop-settings-control {
        display: none !important;
    }

    .notification-modal-header {
        align-items: flex-start;
    }

    .notification-modal-header-actions {
        gap: 5px;
    }

    .notification-info-button {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }

    .notification-platform-note-row {
        grid-template-columns: 1fr;
        gap: 1px;
    }
}


/* ============================================================
   Settings UI v7 - PC / Mobile unified final overrides
   ============================================================ */

/* Fan-made と設定ボタンを全画面サイズで横並び */
body.temporary-platform-theme > .live-fan-made {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

body.temporary-platform-theme > .live-fan-made > .fan-made {
    order: 1 !important;
    flex: 0 0 auto !important;
}

/* 旧ベルの独立通知ボタンはPC/スマホとも使用しない */
.notification-settings-button {
    display: none !important;
}

/* 設定UIはPC/スマホ共通で表示 */
.desktop-settings-control {
    position: relative !important;
    display: block !important;
    order: 2 !important;
    flex: 0 0 auto !important;
}

/* 更新ボタンと同系統の白い円形デザイン */
.desktop-settings-button {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 5px !important;

    border: 2px solid #68447f !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.96) !important;
    color: #604080 !important;

    box-shadow:
        0 5px 18px rgba(42, 22, 62, 0.26) !important;

    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;

    cursor: pointer !important;
    opacity: 1 !important;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease !important;
}

.desktop-settings-button:hover {
    background: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 7px 22px rgba(42, 22, 62, 0.32) !important;
}

.desktop-settings-button:active {
    transform: scale(0.94) !important;
}

/* SVG歯車を確実に表示 */
.desktop-settings-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 27px !important;
    height: 27px !important;

    line-height: 1 !important;
    color: #604080 !important;
}

.desktop-settings-icon .ui-icon-svg,
.desktop-settings-button .ui-icon-svg,
.desktop-settings-button svg {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;

    overflow: visible !important;
    color: currentColor !important;
}

.desktop-settings-text {
    display: block !important;

    margin-top: 2px !important;

    font-size: 9px !important;
    line-height: 10px !important;
    font-weight: 800 !important;

    color: #604080 !important;
}

/* 設定ポップアップをPC/スマホ共通化 */
.desktop-settings-popup {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    right: 0 !important;
    left: auto !important;

    z-index: 12000 !important;

    width: 220px !important;
    max-width: calc(100vw - 20px) !important;
    padding: 8px !important;

    border: 1px solid #d9cbe3 !important;
    border-radius: 12px !important;

    background: rgba(255, 255, 255, 0.985) !important;

    box-shadow:
        0 12px 34px rgba(55, 35, 70, 0.20) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-5px) scale(0.98) !important;
    transform-origin: top right !important;

    transition:
        opacity 0.14s ease,
        visibility 0.14s ease,
        transform 0.14s ease !important;
}

.desktop-settings-popup.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.desktop-settings-popup-title {
    padding: 5px 8px 8px !important;
    color: #7a6885 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
}

.desktop-settings-menu-item {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;

    width: 100% !important;
    min-height: 44px !important;
    padding: 7px 9px !important;

    border: 0 !important;
    border-radius: 8px !important;

    background: transparent !important;
    color: #4d4355 !important;

    text-align: left !important;
    cursor: pointer !important;
}

/* 通知設定右側にあった緑点は完全廃止 */
.desktop-settings-menu-item.enabled::after {
    display: none !important;
    content: none !important;
}

.desktop-settings-menu-item.enabled .desktop-settings-menu-arrow {
    margin-right: 0 !important;
}

.desktop-settings-menu-item:not(.disabled):hover {
    background: #f7f0fb !important;
}

.desktop-settings-menu-item.disabled {
    opacity: 0.46 !important;
    cursor: default !important;
}

/* メニュー内SVGベルもサイズ固定 */
.desktop-settings-menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 22px !important;
    height: 22px !important;

    color: #68447f !important;
}

.desktop-settings-menu-icon .ui-icon-svg,
.desktop-settings-menu-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    overflow: visible !important;
    color: currentColor !important;
}

.desktop-settings-menu-label {
    font-size: 12px !important;
    font-weight: 700 !important;
}

.desktop-settings-menu-status {
    padding: 2px 5px !important;
    border-radius: 999px !important;
    background: #f1edf4 !important;
    color: #8d8194 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

.desktop-settings-menu-arrow {
    color: #9a8ca2 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* スマホでは更新ボタンと同じ52px */
@media (max-width: 700px) {
    body.temporary-platform-theme > .live-fan-made {
        gap: 7px !important;
    }

    .desktop-settings-control {
        display: block !important;
    }

    .desktop-settings-button {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;

        border-width: 1px !important;
        padding: 4px !important;
    }

    .desktop-settings-icon {
        width: 23px !important;
        height: 23px !important;
    }

    .desktop-settings-icon .ui-icon-svg,
    .desktop-settings-button .ui-icon-svg,
    .desktop-settings-button svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }

    .desktop-settings-text {
        font-size: 8px !important;
        line-height: 9px !important;
    }

    .desktop-settings-popup {
        width: min(220px, calc(100vw - 16px)) !important;
    }
}


/* ============================================================
   Settings UI v8
   Safari-safe overlay visibility control
   ============================================================ */

/*
   設定メニューを開いている間:
   ポップアップのアンカーである設定ボタンは残し、
   Fan-made と一時停止表示だけを隠す。
*/
body.settings-menu-open > .live-fan-made > .fan-made,
body.settings-menu-open > .temporary-theme-notice {
    display: none !important;
}

/*
   通知設定モーダルを開いている間:
   iPhone Safariのposition:fixed / backdrop-filter由来の
   stacking contextに依存せず、固定UIそのものを描画しない。
*/
body.notification-modal-open > .live-fan-made,
body.notification-modal-open > .temporary-theme-notice,
body.notification-modal-open .desktop-settings-control,
body.notification-modal-open #desktop-settings-button,
body.notification-modal-open #desktop-settings-popup,
body.notification-modal-open #notification-settings-button {
    display: none !important;
}

/*
   モーダルは独立した最上位レイヤーとして扱う。
   isolationも指定しSafariの合成レイヤー干渉を避ける。
*/
body.notification-modal-open .notification-modal-backdrop,
body.notification-modal-open .notification-modal-backdrop.open {
    display: flex !important;
    z-index: 2147483000 !important;
    isolation: isolate !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.notification-modal-open .notification-modal {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
}

/* 注意書きを開いた状態でも上記非表示を必ず維持 */
body.notification-modal-open .notification-info-button.active {
    z-index: 2 !important;
}



/* ==================================================
   2026-08-22 UI REDESIGN v1
   Fixed header/footer + calendar + two scroll panels
   ================================================== */
:root{--app-header-h:96px;--app-footer-h:44px;--app-gap:16px;}
html,body{height:100%;}
body{overflow:hidden;}
header{position:fixed!important;inset:0 0 auto 0;height:var(--app-header-h);z-index:5000;display:flex;align-items:center;justify-content:space-between;padding:8px 24px;background:rgba(255,255,255,.90);backdrop-filter:blur(14px);border-bottom:1px solid rgba(104,68,127,.18);box-shadow:0 4px 18px rgba(70,45,90,.08);}
header h1{margin:0!important;max-width:none!important;height:78px;display:flex!important;justify-content:center;align-items:flex-start!important;overflow:hidden;}
.site-logo-title{flex:0 1 520px;}
.site-logo-title img,.title-logo{max-height:76px!important;max-width:500px!important;width:auto!important;object-fit:contain;}
.temporary-platform-title{transform:scale(.78);transform-origin:left center;}
header .live-fan-made{position:static!important;display:flex!important;align-items:center;justify-content:flex-end;gap:10px;margin:0!important;padding:0!important;background:none!important;flex:1;}
.header-refresh-button,.desktop-settings-button,.theme-switch-button{position:static!important;min-width:88px!important;height:42px!important;padding:0 14px!important;border:1px solid #d8c9e5!important;border-radius:10px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 2px 8px rgba(70,45,90,.08)!important;display:flex!important;flex-direction:row!important;gap:7px!important;color:#604080!important;}
.header-refresh-button .refresh-icon{font-size:21px!important}.header-refresh-button .refresh-text{font-size:12px!important;margin:0!important}.fan-made{margin-left:4px;}
main{position:fixed!important;top:var(--app-header-h);bottom:var(--app-footer-h);left:0;right:0;overflow:hidden!important;padding:var(--app-gap)!important;max-width:none!important;margin:0!important;}
.calendar-decoration-stage{height:100%!important;max-width:1600px!important;margin:0 auto!important;}
.calendar-layout{height:100%!important;grid-template-columns:minmax(650px,1.65fr) minmax(340px,.85fr)!important;gap:var(--app-gap)!important;align-items:stretch!important;}
.calendar-main-column{min-height:0!important;height:100%!important;}
.calendar{height:100%!important;display:flex!important;flex-direction:column!important;border-radius:14px!important;}
.calendar-header{flex:0 0 auto;padding:10px 16px!important;min-height:58px;}
.weekdays{flex:0 0 auto;}
.calendar-days{flex:1 1 auto!important;min-height:0!important;grid-template-rows:repeat(6,minmax(0,1fr));}
.calendar-day{min-height:0!important;padding:6px!important;}
.live-column{height:100%!important;min-height:0!important;display:grid!important;grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;gap:var(--app-gap)!important;}
.live-status,.schedule-section{min-height:0!important;height:auto!important;margin:0!important;border-radius:14px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;background:rgba(255,255,255,.88)!important;box-shadow:0 4px 18px rgba(70,45,90,.08)!important;}
.live-status-title,.schedule-section>h2{flex:0 0 auto!important;margin:0!important;padding:13px 16px!important;border-bottom:1px solid #e8dfef!important;font-size:16px!important;}
.quota-warning-container{flex:0 0 auto;}
#live-list,#schedule-list{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain;padding:10px!important;}
.site-footer{position:fixed;left:0;right:0;bottom:0;height:var(--app-footer-h);z-index:5000;background:rgba(55,36,91,.94);color:#fff;backdrop-filter:blur(12px);}
.site-footer-inner{height:100%;max-width:1600px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;font-size:11px;opacity:.92;}
.floating-refresh-button{display:none!important;}
.notification-settings-button{display:none!important;}
.page-theme{position:fixed!important;inset:0!important;}
.channel-filter-popup{z-index:6000!important;}
.desktop-settings-popup,.theme-switch-popup{z-index:6100!important;}
@media(max-width:900px){:root{--app-header-h:72px;--app-footer-h:38px;--app-gap:8px}header{padding:5px 8px}.site-logo-title{flex:1;min-width:0;height:60px!important}.temporary-platform-title{transform:scale(.56);transform-origin:left center}.header-refresh-button,.desktop-settings-button,.theme-switch-button{min-width:42px!important;width:42px!important;padding:0!important}.header-refresh-button .refresh-text,.desktop-settings-text,.theme-switch-text{display:none!important}header .fan-made{display:none}.calendar-layout{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1.25fr) minmax(0,.75fr)!important}.calendar-main-column{height:100%!important}.live-column{grid-template-columns:1fr 1fr!important;grid-template-rows:1fr!important}.calendar-day{padding:3px!important}.site-footer-inner{padding:0 10px}.footer-note{display:none}}
@media(max-width:620px){main{overflow-y:auto!important}.calendar-decoration-stage,.calendar-layout{height:auto!important}.calendar-layout{display:flex!important;flex-direction:column!important}.calendar-main-column{height:620px!important}.live-column{height:560px!important;grid-template-columns:1fr!important;grid-template-rows:1fr 1fr!important}.site-footer{display:none}:root{--app-footer-h:0px}}


/* ============================================================
   2026-08-22 UI REDESIGN v2
   Full-height dashboard / compact right panels
   ============================================================ */

:root {
    --app-header-h: 82px;
    --app-footer-h: 34px;
    --app-gap: 14px;
    --app-max-w: 1760px;
    --panel-bg: rgba(255, 255, 255, 0.90);
    --panel-border: rgba(118, 91, 145, 0.18);
    --panel-shadow: 0 6px 24px rgba(70, 45, 90, 0.09);
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden !important;
}

/* ---------- fixed header ---------- */

body > header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 5000 !important;

    width: 100% !important;
    height: var(--app-header-h) !important;
    min-height: var(--app-header-h) !important;

    padding: 6px max(16px, calc((100vw - var(--app-max-w)) / 2)) !important;

    display: grid !important;
    grid-template-columns: minmax(250px, 1fr) auto !important;
    align-items: center !important;
    gap: 20px !important;

    overflow: visible !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 238, 244, 0.94),
            rgba(255, 255, 255, 0.94) 50%,
            rgba(240, 231, 255, 0.94)
        ) !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;

    border-bottom: 1px solid var(--panel-border) !important;

    box-shadow:
        0 3px 18px rgba(70, 45, 90, 0.08) !important;
}

body > header > .site-logo-title {
    width: auto !important;
    height: 68px !important;
    min-width: 0 !important;
    max-width: 620px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    overflow: visible !important;
}

/*
   現在の一時タイトル。
   変形で小さくせず、ヘッダー内に自然に収める。
*/
body.temporary-platform-theme > header .temporary-platform-title {
    position: static !important;

    transform: none !important;

    width: auto !important;
    height: auto !important;

    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
}

body.temporary-platform-theme > header .temporary-platform-marks {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    transform: scale(0.72) !important;
    transform-origin: center !important;

    margin: 0 !important;
}

body.temporary-platform-theme > header .temporary-title-main {
    grid-column: 2 !important;
    grid-row: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 30px !important;
    line-height: 1 !important;
}

body.temporary-platform-theme > header .temporary-title-sub {
    grid-column: 2 !important;
    grid-row: 2 !important;

    margin: 4px 0 0 !important;
    padding: 0 !important;

    font-size: 11px !important;
    line-height: 1 !important;
}

/*
   テーマ有効版で site-title-logo を復活させる場合のサイズ。
   既存TitleLogoの比率を維持する。
*/
body > header .site-title-logo img,
body > header img.site-title-logo,
body > header .title-logo {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: min(600px, 48vw) !important;
    max-height: 68px !important;

    object-fit: contain !important;
    object-position: left center !important;

    margin: 0 !important;
}

/* ---------- header actions ---------- */

body > header > .live-fan-made {
    position: static !important;

    width: auto !important;
    height: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    pointer-events: auto !important;
}

body > header .refresh-button,
body > header .desktop-settings-button,
body > header .theme-switch-button {
    position: static !important;

    width: auto !important;
    min-width: 76px !important;
    height: 40px !important;
    min-height: 40px !important;

    padding: 0 12px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    border: 1px solid #d8c9e5 !important;
    border-radius: 10px !important;

    background: rgba(255, 255, 255, 0.96) !important;
    color: #604080 !important;

    box-shadow:
        0 2px 8px rgba(70, 45, 90, 0.08) !important;
}

body > header .refresh-icon,
body > header .desktop-settings-icon {
    width: 20px !important;
    height: 20px !important;

    font-size: 20px !important;
    line-height: 20px !important;
}

body > header .refresh-text,
body > header .desktop-settings-text,
body > header .theme-switch-text {
    display: inline !important;

    margin: 0 !important;

    font-size: 11px !important;
    line-height: 1 !important;
}

body > header .fan-made {
    position: relative !important;

    margin: 0 !important;
}

body > header .fan-made-badge {
    min-height: 40px !important;

    padding: 0 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;

    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid #d8c9e5 !important;

    box-shadow:
        0 2px 8px rgba(70, 45, 90, 0.06) !important;

    font-size: 10px !important;
}

/* ---------- main viewport ---------- */

body > main {
    position: fixed !important;

    top: var(--app-header-h) !important;
    right: 0 !important;
    bottom: var(--app-footer-h) !important;
    left: 0 !important;

    width: auto !important;
    height: auto !important;

    max-width: none !important;

    margin: 0 !important;
    padding: var(--app-gap) 16px !important;

    overflow: hidden !important;
}

body > main > .calendar-decoration-stage {
    width: min(100%, var(--app-max-w)) !important;
    height: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;
}

body > main .calendar-layout {
    width: 100% !important;
    height: 100% !important;

    display: grid !important;
    grid-template-columns:
        minmax(660px, 1.72fr)
        minmax(360px, 0.88fr) !important;

    gap: var(--app-gap) !important;
    align-items: stretch !important;
}

body > main .calendar-main-column {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* ---------- calendar ---------- */

body > main .calendar {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border: 1px solid var(--panel-border) !important;
    border-radius: 14px !important;

    background: var(--panel-bg) !important;

    box-shadow: var(--panel-shadow) !important;
}

body > main .calendar-header {
    flex: 0 0 54px !important;

    min-height: 54px !important;
    padding: 7px 14px !important;
}

body > main .calendar-month-nav {
    gap: 16px !important;
}

body > main .calendar-month-nav > button {
    width: 34px !important;
    height: 34px !important;

    font-size: 22px !important;
}

body > main .calendar-header h2 {
    min-width: 150px !important;

    font-size: 20px !important;
}

body > main .channel-filter-button {
    right: 12px !important;

    min-height: 32px !important;
}

body > main .weekdays {
    flex: 0 0 38px !important;
}

body > main .weekdays > div {
    padding: 8px 4px !important;

    font-size: 12px !important;
}

body > main .calendar-days {
    flex: 1 1 auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;

    overflow: hidden !important;
}

body > main .calendar-day {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    padding: 5px !important;
}

body > main .day-number {
    font-size: 12px !important;
}

/* Keep existing character icons, but fit dense months cleanly. */
body > main .schedule-indicator {
    max-width: 100% !important;
}

body > main .schedule-icon {
    width: clamp(19px, 1.65vw, 27px) !important;
    height: clamp(19px, 1.65vw, 27px) !important;

    min-width: 0 !important;
    min-height: 0 !important;
}

/* ---------- right side: two independent panels ---------- */

body > main .live-column {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: var(--app-gap) !important;
}

body > main .live-status,
body > main .schedule-section {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border: 1px solid var(--panel-border) !important;
    border-radius: 14px !important;

    background: var(--panel-bg) !important;

    box-shadow: var(--panel-shadow) !important;
}

body > main .live-status-title,
body > main .schedule-section > h2 {
    flex: 0 0 45px !important;

    min-height: 45px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;

    border-bottom: 1px solid #e8dfef !important;

    color: #4f3863 !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}

body > main .quota-warning-container {
    flex: 0 0 auto !important;
}

body > main #live-list,
body > main #schedule-list {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    padding: 8px 10px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;

    scrollbar-gutter: stable !important;
}

/* ---------- compact live list ---------- */

body > main #live-list .live-channel {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    grid-template-columns:
        38px
        minmax(0, 1fr)
        142px !important;

    grid-template-rows:
        auto
        auto
        auto !important;

    column-gap: 9px !important;
    row-gap: 2px !important;

    align-items: center !important;

    margin: 0 !important;
    padding: 9px 0 !important;

    border-bottom: 1px solid #eee7f2 !important;
}

body > main #live-list .live-channel:last-child {
    border-bottom: 0 !important;
}

body > main #live-list .live-channel-icon {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    align-self: start !important;
}

body > main #live-list .live-channel-name {
    grid-column: 2 !important;
    grid-row: 1 !important;

    min-width: 0 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body > main #live-list .live-channel-title {
    grid-column: 2 !important;
    grid-row: 2 !important;

    min-width: 0 !important;

    color: #3f3945 !important;

    font-size: 10px !important;
    line-height: 1.35 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
}

body > main #live-list .live-channel-time {
    grid-column: 2 !important;
    grid-row: 3 !important;

    color: #dd4b76 !important;

    font-size: 9px !important;
    font-weight: 700 !important;
}

body > main #live-list .live-thumbnail-link {
    grid-column: 3 !important;
    grid-row: 1 / 4 !important;

    width: 142px !important;
    min-width: 142px !important;

    align-self: center !important;
}

body > main #live-list .live-thumbnail-frame {
    width: 142px !important;

    aspect-ratio: 3 / 2 !important;
}

/* ---------- compact selected-date schedules ---------- */

body > main #schedule-list .schedule-item {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
        92px
        minmax(0, 1fr) !important;

    gap: 9px !important;

    margin: 0 !important;
    padding: 9px 0 !important;

    border: 0 !important;
    border-bottom: 1px solid #eee7f2 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}

body > main #schedule-list .schedule-item:last-child {
    border-bottom: 0 !important;
}

body > main #schedule-list .thumbnail {
    width: 92px !important;
    height: auto !important;

    aspect-ratio: 16 / 9 !important;

    border-radius: 7px !important;
}

body > main #schedule-list .schedule-info {
    min-width: 0 !important;
}

body > main #schedule-list .schedule-time {
    margin: 0 0 2px !important;

    font-size: 12px !important;
    line-height: 1.15 !important;
}

body > main #schedule-list .channel-name {
    margin: 0 0 3px !important;

    font-size: 9px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body > main #schedule-list .schedule-title {
    margin: 0 0 5px !important;

    font-size: 10px !important;
    line-height: 1.35 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
}

body > main #schedule-list .youtube-link {
    padding: 4px 8px !important;

    border-radius: 6px !important;

    font-size: 9px !important;
}

/* ---------- fixed footer ---------- */

body > .site-footer {
    position: fixed !important;

    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 5000 !important;

    width: 100% !important;
    height: var(--app-footer-h) !important;

    background: rgba(55, 36, 91, 0.94) !important;
    color: #ffffff !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

body > .site-footer .site-footer-inner {
    width: min(100%, var(--app-max-w)) !important;
    height: 100% !important;

    margin: 0 auto !important;
    padding: 0 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    font-size: 9px !important;
}

/* Old floating controls are not part of v2 desktop layout. */
body > .notification-settings-button,
body > .floating-refresh-button {
    display: none !important;
}

/* Keep menu/modals above the fixed shell. */
.channel-filter-popup {
    z-index: 7000 !important;
}

.desktop-settings-popup,
.theme-switch-popup {
    z-index: 7100 !important;
}

.notification-modal-backdrop {
    z-index: 2147483000 !important;
}

/* ---------- medium desktop / tablet ---------- */

@media (max-width: 1080px) {
    :root {
        --app-header-h: 72px;
        --app-footer-h: 30px;
        --app-gap: 9px;
    }

    body > header {
        grid-template-columns:
            minmax(200px, 1fr)
            auto !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        gap: 8px !important;
    }

    body.temporary-platform-theme > header .temporary-title-main {
        font-size: 24px !important;
    }

    body > header .refresh-button,
    body > header .desktop-settings-button,
    body > header .theme-switch-button {
        min-width: 42px !important;
        width: 42px !important;

        padding: 0 !important;
    }

    body > header .refresh-text,
    body > header .desktop-settings-text,
    body > header .theme-switch-text {
        display: none !important;
    }

    body > header .fan-made-badge {
        min-height: 40px !important;
        padding: 0 8px !important;
    }

    body > main {
        padding: var(--app-gap) !important;
    }

    body > main .calendar-layout {
        grid-template-columns:
            minmax(560px, 1.55fr)
            minmax(320px, 0.85fr) !important;
    }

    body > main #live-list .live-channel {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            116px !important;
    }

    body > main #live-list .live-channel-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    body > main #live-list .live-thumbnail-link,
    body > main #live-list .live-thumbnail-frame {
        width: 116px !important;
        min-width: 116px !important;
    }
}

/* ---------- smartphone ---------- */

@media (max-width: 760px) {
    :root {
        --app-header-h: 62px;
        --app-footer-h: 0px;
        --app-gap: 8px;
    }

    body {
        overflow: auto !important;
    }

    body > header {
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        height: var(--app-header-h) !important;
        min-height: var(--app-header-h) !important;

        padding: 4px 7px !important;
    }

    body > header > .site-logo-title {
        height: 54px !important;
    }

    body.temporary-platform-theme > header .temporary-platform-marks {
        display: none !important;
    }

    body.temporary-platform-theme > header .temporary-platform-title {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
    }

    body.temporary-platform-theme > header .temporary-title-main {
        grid-column: 1 !important;
        grid-row: 1 !important;

        font-size: 20px !important;
    }

    body.temporary-platform-theme > header .temporary-title-sub {
        grid-column: 1 !important;
        grid-row: 2 !important;

        font-size: 8px !important;
    }

    body > header .fan-made {
        display: none !important;
    }

    body > main {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        margin-top: var(--app-header-h) !important;
        padding: var(--app-gap) !important;

        overflow: visible !important;
    }

    body > main > .calendar-decoration-stage,
    body > main .calendar-layout {
        height: auto !important;
    }

    body > main .calendar-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    body > main .calendar-main-column {
        height: 560px !important;
    }

    body > main .live-column {
        height: auto !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows:
            380px
            380px !important;
    }

    body > main #live-list .live-channel {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            106px !important;
    }

    body > main #live-list .live-thumbnail-link,
    body > main #live-list .live-thumbnail-frame {
        width: 106px !important;
        min-width: 106px !important;
    }

    body > .site-footer {
        display: none !important;
    }
}



/* ============================================================
   2026-08-22 UI REDESIGN v3
   Right panels sized for ~3 streams each
   ============================================================ */

:root {
    --right-panel-header-h: 45px;
    --right-live-row-h: 104px;
    --right-schedule-row-h: 92px;
    --right-panel-pad-y: 16px;
}

/*
   右カラムは上下2枚。
   それぞれ「約3件分」の高さを基準に固定し、
   超過分は各パネル内部だけスクロールさせる。
*/
body > main .live-column {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--app-gap) !important;

    height: 100% !important;
    min-height: 0 !important;
}

/* 配信中：3件 + ヘッダー分 */
body > main .live-status {
    flex: 0 0 calc(
        var(--right-panel-header-h)
        + (var(--right-live-row-h) * 3)
        + var(--right-panel-pad-y)
    ) !important;

    max-height: calc(
        var(--right-panel-header-h)
        + (var(--right-live-row-h) * 3)
        + var(--right-panel-pad-y)
    ) !important;
}

/* 選択日の予定：3件 + ヘッダー分 */
body > main .schedule-section {
    flex: 0 0 calc(
        var(--right-panel-header-h)
        + (var(--right-schedule-row-h) * 3)
        + var(--right-panel-pad-y)
    ) !important;

    max-height: calc(
        var(--right-panel-header-h)
        + (var(--right-schedule-row-h) * 3)
        + var(--right-panel-pad-y)
    ) !important;
}

/*
   縦画面が低い場合は、右2枚が収まるように均等縮小。
   ただし各リストは独立スクロールのまま。
*/
@media (max-height: 820px) and (min-width: 761px) {
    body > main .live-column {
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    body > main .live-status,
    body > main .schedule-section {
        flex: initial !important;
        max-height: none !important;
    }
}

/* 配信中リスト：1件の高さを一定にして3件が綺麗に収まる */
body > main #live-list {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

body > main #live-list .live-channel {
    min-height: var(--right-live-row-h) !important;
    height: var(--right-live-row-h) !important;

    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* 選択日の予定：1件の高さを一定にして3件が綺麗に収まる */
body > main #schedule-list {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

body > main #schedule-list .schedule-item {
    min-height: var(--right-schedule-row-h) !important;
    height: var(--right-schedule-row-h) !important;

    align-items: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/*
   スクロールバーを常時占有させて、
   出現時にカード幅がズレないようにする。
*/
body > main #live-list,
body > main #schedule-list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    overscroll-behavior: contain !important;
}

/* 右パネル幅を少し広げる */
body > main .calendar-layout {
    grid-template-columns:
        minmax(620px, 1.55fr)
        minmax(410px, 0.95fr) !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
    body > main .calendar-layout {
        grid-template-columns:
            minmax(560px, 1.42fr)
            minmax(380px, 0.92fr) !important;
    }
}

/* スマホは従来通り縦積み。ただし各欄3件程度の高さ。 */
@media (max-width: 760px) {
    body > main .live-column {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    body > main .live-status,
    body > main .schedule-section {
        flex: 0 0 auto !important;
        height: 365px !important;
        max-height: 365px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v4
   Larger text + clickable schedule thumbnails
   ============================================================ */

/* ---------- live panel typography ---------- */

body > main #live-list .live-channel-name {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

body > main #live-list .live-channel-title {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

body > main #live-list .live-channel-time {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Slightly larger live avatar for readability */
body > main #live-list .live-channel-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
}

body > main #live-list .live-channel {
    grid-template-columns:
        42px
        minmax(0, 1fr)
        142px !important;
}

/* ---------- selected-date schedule typography ---------- */

body > main #schedule-list .schedule-item {
    grid-template-columns:
        104px
        minmax(0, 1fr) !important;

    gap: 11px !important;
}

/* Thumbnail itself is now the YouTube link */
body > main #schedule-list .schedule-thumbnail-link {
    display: block !important;

    width: 104px !important;
    aspect-ratio: 16 / 9 !important;

    align-self: center !important;

    border-radius: 8px !important;
    overflow: hidden !important;

    background: #ece7f0 !important;

    box-shadow:
        0 2px 8px rgba(70, 45, 90, 0.10) !important;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease !important;
}

body > main #schedule-list .schedule-thumbnail-link:hover {
    transform: translateY(-1px) !important;

    box-shadow:
        0 4px 12px rgba(70, 45, 90, 0.16) !important;
}

body > main #schedule-list .schedule-thumbnail-link:active {
    transform: scale(0.98) !important;
}

body > main #schedule-list .thumbnail {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    border-radius: 0 !important;
}

body > main #schedule-list .schedule-time {
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

body > main #schedule-list .channel-name {
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

body > main #schedule-list .schedule-title {
    font-size: 12px !important;
    line-height: 1.35 !important;

    margin-bottom: 0 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Old "配信を見る" button is no longer used */
body > main #schedule-list .youtube-link {
    display: none !important;
}

/* Panel headings a touch larger too */
body > main .live-status-title,
body > main .schedule-section > h2 {
    font-size: 15px !important;
}

/* Tablet: keep larger text but reduce thumbnail widths slightly */
@media (max-width: 1180px) and (min-width: 761px) {
    body > main #live-list .live-channel {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            124px !important;
    }

    body > main #live-list .live-channel-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    body > main #live-list .live-thumbnail-link,
    body > main #live-list .live-thumbnail-frame {
        width: 124px !important;
        min-width: 124px !important;
    }

    body > main #schedule-list .schedule-item {
        grid-template-columns:
            96px
            minmax(0, 1fr) !important;
    }

    body > main #schedule-list .schedule-thumbnail-link {
        width: 96px !important;
    }
}

/* Smartphone */
@media (max-width: 760px) {
    body > main #live-list .live-channel-name {
        font-size: 12px !important;
    }

    body > main #live-list .live-channel-title {
        font-size: 11px !important;
    }

    body > main #schedule-list .schedule-time {
        font-size: 13px !important;
    }

    body > main #schedule-list .channel-name {
        font-size: 10px !important;
    }

    body > main #schedule-list .schedule-title {
        font-size: 11px !important;
    }

    body > main #schedule-list .schedule-item {
        grid-template-columns:
            94px
            minmax(0, 1fr) !important;
    }

    body > main #schedule-list .schedule-thumbnail-link {
        width: 94px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v5
   Schedule: icon -> channel/time/title -> thumbnail
   ============================================================ */

/* 配信中：薄い赤 */
body > main .live-status {
    background: linear-gradient(180deg, rgba(255,242,245,.98), rgba(255,249,250,.96)) !important;
    border-color: rgba(232,75,99,.28) !important;
}
body > main .live-status-title {
    background: rgba(255,226,231,.78) !important;
    color: #c63b51 !important;
    border-bottom-color: rgba(232,75,99,.18) !important;
}
body > main #live-list .live-channel {
    border-bottom-color: rgba(232,75,99,.14) !important;
}

/* 予定：薄い青 */
body > main .schedule-section {
    background: linear-gradient(180deg, rgba(240,247,255,.98), rgba(248,252,255,.96)) !important;
    border-color: rgba(75,129,216,.26) !important;
}
body > main .schedule-section > h2 {
    background: rgba(221,236,255,.80) !important;
    color: #426daf !important;
    border-bottom-color: rgba(75,129,216,.18) !important;
}
body > main #schedule-list .schedule-item {
    grid-template-columns: 46px minmax(0,1fr) 116px !important;
    gap: 11px !important;
    align-items: center !important;
    border-bottom-color: rgba(75,129,216,.14) !important;
}
body > main #schedule-list .schedule-channel-icon {
    grid-column: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    display: block !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #edf4fd !important;
    border: 1px solid rgba(75,129,216,.20) !important;
}
body > main #schedule-list .schedule-info {
    grid-column: 2 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 2px !important;
}
body > main #schedule-list .channel-name {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #303846 !important;
}
body > main #schedule-list .schedule-time {
    order: 2 !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #4f78ba !important;
}
body > main #schedule-list .schedule-title {
    order: 3 !important;
    width: 100% !important;
    margin: 1px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #292d35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
body > main #schedule-list .schedule-thumbnail-link {
    grid-column: 3 !important;
    width: 116px !important;
    aspect-ratio: 16 / 9 !important;
    justify-self: end !important;
    align-self: center !important;
}

/* 3件表示＋独立スクロールはv3/v4の設定を継承 */
@media (max-width:1180px) and (min-width:761px) {
    body > main #schedule-list .schedule-item {
        grid-template-columns: 42px minmax(0,1fr) 104px !important;
        gap: 8px !important;
    }
    body > main #schedule-list .schedule-channel-icon {
        width:42px !important; height:42px !important;
        min-width:42px !important; min-height:42px !important;
    }
    body > main #schedule-list .schedule-thumbnail-link { width:104px !important; }
}
@media (max-width:760px) {
    body > main #schedule-list .schedule-item {
        grid-template-columns: 38px minmax(0,1fr) 92px !important;
        gap: 7px !important;
    }
    body > main #schedule-list .schedule-channel-icon {
        width:38px !important; height:38px !important;
        min-width:38px !important; min-height:38px !important;
    }
    body > main #schedule-list .schedule-thumbnail-link { width:92px !important; }
}


/* ============================================================
   2026-08-22 UI REDESIGN v6
   Softer panel colors + redesigned header controls
   ============================================================ */

/* ---------- Panel colors: one step lighter ---------- */

body > main .live-status {
    background:
        linear-gradient(
            180deg,
            rgba(255, 249, 250, 0.985),
            rgba(255, 252, 253, 0.975)
        ) !important;

    border-color: rgba(232, 75, 99, 0.16) !important;
}

body > main .live-status-title {
    background: rgba(255, 241, 244, 0.72) !important;
    color: #c84c60 !important;
    border-bottom-color: rgba(232, 75, 99, 0.10) !important;
}

body > main #live-list .live-channel {
    border-bottom-color: rgba(232, 75, 99, 0.08) !important;
}

body > main .schedule-section {
    background:
        linear-gradient(
            180deg,
            rgba(248, 251, 255, 0.99),
            rgba(252, 253, 255, 0.98)
        ) !important;

    border-color: rgba(75, 129, 216, 0.14) !important;
}

body > main .schedule-section > h2 {
    background: rgba(238, 246, 255, 0.76) !important;
    color: #537bb9 !important;
    border-bottom-color: rgba(75, 129, 216, 0.10) !important;
}

body > main #schedule-list .schedule-item {
    border-bottom-color: rgba(75, 129, 216, 0.08) !important;
}

/* ---------- Header control group ---------- */

body > header > .live-fan-made {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;
}

/* Shared modern pill/card design */
body > header .refresh-button,
body > header .desktop-settings-button,
body > header .fan-made-badge {
    position: relative !important;

    height: 42px !important;
    min-height: 42px !important;

    padding: 0 13px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border-radius: 13px !important;

    border: 1px solid rgba(117, 91, 144, 0.14) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(250, 247, 255, 0.94)
        ) !important;

    color: #5b416e !important;

    box-shadow:
        0 5px 14px rgba(84, 57, 105, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease !important;
}

/* Update */
body > header .refresh-button {
    min-width: 88px !important;
}

body > header .refresh-button:hover {
    opacity: 1 !important;

    transform: translateY(-2px) !important;

    border-color: rgba(132, 92, 163, 0.24) !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f0ff
        ) !important;

    box-shadow:
        0 8px 18px rgba(84, 57, 105, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body > header .refresh-button:active {
    transform: translateY(0) scale(0.97) !important;
}

body > header .refresh-icon {
    width: 24px !important;
    height: 24px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: rgba(145, 104, 177, 0.10) !important;
    color: #8056a3 !important;

    font-size: 17px !important;
    line-height: 1 !important;
}

body > header .refresh-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}

/* Settings */
body > header .desktop-settings-button {
    min-width: 88px !important;
}

body > header .desktop-settings-button:hover {
    transform: translateY(-2px) !important;

    border-color: rgba(132, 92, 163, 0.24) !important;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f0ff
        ) !important;

    box-shadow:
        0 8px 18px rgba(84, 57, 105, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body > header .desktop-settings-button:active {
    transform: translateY(0) scale(0.97) !important;
}

body > header .desktop-settings-icon {
    width: 24px !important;
    height: 24px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: rgba(145, 104, 177, 0.10) !important;
    color: #8056a3 !important;
}

body > header .desktop-settings-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}

/* Fan-made: softer badge, not a functional-button look */
body > header .fan-made-badge {
    min-width: 86px !important;

    color: #695476 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 248, 252, 0.90)
        ) !important;

    border-color: rgba(201, 131, 160, 0.16) !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

body > header .fan-made-badge::before {
    content: "♡" !important;

    width: 22px !important;
    height: 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: rgba(225, 134, 167, 0.10) !important;
    color: #cc6d93 !important;

    font-size: 12px !important;
}

body > header .fan-made:hover .fan-made-badge {
    transform: translateY(-1px) !important;

    border-color: rgba(201, 131, 160, 0.24) !important;

    box-shadow:
        0 7px 16px rgba(128, 80, 105, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

/* Header popups aligned cleanly to redesigned controls */
body > header .desktop-settings-popup {
    top: calc(100% + 10px) !important;
    right: 0 !important;

    border-radius: 14px !important;

    border: 1px solid rgba(117, 91, 144, 0.16) !important;

    box-shadow:
        0 16px 34px rgba(70, 45, 90, 0.16) !important;
}

/* Mobile: keep icons compact but retain same design language */
@media (max-width: 760px) {
    body > header .refresh-button,
    body > header .desktop-settings-button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;

        padding: 0 !important;

        border-radius: 12px !important;
    }

    body > header .refresh-text,
    body > header .desktop-settings-text {
        display: none !important;
    }

    body > header .refresh-icon,
    body > header .desktop-settings-icon {
        width: 24px !important;
        height: 24px !important;
    }

    body > header .fan-made {
        display: none !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v7
   Keep panel headings as v6; lighten stream information areas
   ============================================================ */

/* 配信中：見出し色はv6のまま。情報表示部分だけさらに薄く */
body > main .live-status {
    background: rgba(255, 253, 253, 0.99) !important;
}

body > main #live-list {
    background:
        linear-gradient(
            180deg,
            rgba(255, 252, 253, 0.78),
            rgba(255, 254, 254, 0.70)
        ) !important;
}

body > main #live-list .live-channel {
    background: rgba(255, 253, 253, 0.46) !important;
}

/* 予定：見出し色はv6のまま。情報表示部分だけさらに薄く */
body > main .schedule-section {
    background: rgba(253, 254, 255, 0.99) !important;
}

body > main #schedule-list {
    background:
        linear-gradient(
            180deg,
            rgba(252, 254, 255, 0.80),
            rgba(254, 255, 255, 0.72)
        ) !important;
}

body > main #schedule-list .schedule-item {
    background: rgba(253, 254, 255, 0.48) !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v9
   件数バッジ + 「すべて見る」展開
   ============================================================ */

body > main .live-status-title,
body > main .schedule-section > .schedule-panel-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

body > main .panel-title-main {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body > main .panel-title-actions {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

body > main .panel-count-badge {
    min-width: 38px !important;
    height: 25px !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body > main .live-count-badge {
    background: #ed4960 !important;
}

body > main .schedule-count-badge {
    background: #5d82d5 !important;
}

body > main .panel-expand-button {
    min-height: 30px !important;
    padding: 0 4px 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition:
        background .15s ease,
        transform .15s ease !important;
}

body > main .live-expand-button {
    color: #d13d54 !important;
}

body > main .schedule-expand-button {
    color: #4c72bb !important;
}

body > main .panel-expand-button:hover {
    background: rgba(255,255,255,.64) !important;
}

body > main .panel-expand-button:active {
    transform: scale(.96) !important;
}

body > main .panel-expand-arrow {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
    transition: transform .18s ease !important;
}

body > main .panel-expand-button[aria-expanded="true"] .panel-expand-arrow {
    transform: rotate(180deg) !important;
}

/*
   通常は3件分の上下2画面。
   すべて見る時は対象画面だけ右カラム全体へ展開。
*/
body > main .live-column.live-panel-expanded,
body > main .live-column.schedule-panel-expanded {
    display: block !important;
    height: 100% !important;
}

body > main .live-column.live-panel-expanded .live-status,
body > main .live-column.schedule-panel-expanded .schedule-section {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    flex: none !important;
}

body > main .live-column.live-panel-expanded .schedule-section {
    display: none !important;
}

body > main .live-column.schedule-panel-expanded .live-status {
    display: none !important;
}

body > main .live-column.live-panel-expanded #live-list,
body > main .live-column.schedule-panel-expanded #schedule-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

@media (max-width: 760px) {

    body > main .panel-title-actions {
        gap: 4px !important;
    }

    body > main .panel-count-badge {
        min-width: 33px !important;
        height: 23px !important;
        padding: 0 7px !important;
        font-size: 10px !important;
    }

    body > main .panel-expand-button {
        min-height: 27px !important;
        font-size: 10px !important;
    }

    body > main .live-column.live-panel-expanded .live-status,
    body > main .live-column.schedule-panel-expanded .schedule-section {
        height: min(72vh, 720px) !important;
        max-height: min(72vh, 720px) !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v10
   Header SVG icons
   ============================================================ */

body > main .panel-title-main,
body > main .schedule-title-main {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

body > main .panel-title-icon {
    display: block !important;
    flex: 0 0 auto !important;
    width: 21px !important;
    height: 21px !important;
    object-fit: contain !important;
}

body > main .panel-title-icon-live {
    width: 22px !important;
    height: 22px !important;
}

body > main .panel-title-icon-schedule {
    width: 20px !important;
    height: 20px !important;
}

/* 旧live-dotはSVGへ置き換えたため非表示 */
body > main .live-dot {
    display: none !important;
}

@media (max-width: 760px) {
    body > main .panel-title-icon {
        width: 18px !important;
        height: 18px !important;
    }

    body > main .panel-title-icon-live {
        width: 19px !important;
        height: 19px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v11
   Schedule heading vertical alignment
   ============================================================ */

body > main .schedule-section > .schedule-panel-title {
    align-items: center !important;
}

body > main .schedule-title-main {
    height: 100% !important;
    align-items: center !important;
    line-height: 1 !important;
}

body > main #schedule-date {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

body > main .schedule-title-main .panel-title-icon-schedule {
    align-self: center !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v12
   Schedule heading background matches surrounding panel
   ============================================================ */

body > main .schedule-section > .schedule-panel-title {
    background: transparent !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v13
   Restore schedule header blue
   ============================================================ */

body > main .schedule-section > .schedule-panel-title {
    background: rgba(238, 246, 255, 0.76) !important;
    border-bottom-color: rgba(75, 129, 216, 0.10) !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v14
   Make the entire schedule heading one continuous blue area
   ============================================================ */

body > main .schedule-section > .schedule-panel-title,
body > main .schedule-section > .schedule-panel-title .schedule-title-main,
body > main .schedule-section > .schedule-panel-title #schedule-date,
body > main .schedule-section > .schedule-panel-title .panel-title-actions {
    background: rgba(238, 246, 255, 0.76) !important;
}

/* Prevent the date text itself from looking like a separate pale strip */
body > main .schedule-section > .schedule-panel-title #schedule-date {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v15
   Restore calendar / right-panel vertical sizing
   ============================================================ */

/* メイン全体は固定ヘッダー〜フッターの間を100%使用 */
body > main,
body > main > .calendar-decoration-stage,
body > main .calendar-layout {
    min-height: 0 !important;
}

body > main > .calendar-decoration-stage,
body > main .calendar-layout {
    height: 100% !important;
}

/* 左カレンダーは縦いっぱい */
body > main .calendar-main-column,
body > main .calendar {
    height: 100% !important;
    min-height: 0 !important;
}

body > main .calendar {
    display: flex !important;
    flex-direction: column !important;
}

body > main .calendar-days {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* 右カラムは上下2段を維持 */
body > main .live-column {
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: var(--app-gap) !important;
}

/* 配信中：3件分 */
body > main .live-status {
    flex: 0 0 calc(
        var(--right-panel-header-h)
        + (var(--right-live-row-h) * 3)
        + var(--right-panel-pad-y)
    ) !important;

    height: auto !important;

    max-height: calc(
        var(--right-panel-header-h)
        + (var(--right-live-row-h) * 3)
        + var(--right-panel-pad-y)
    ) !important;

    min-height: 0 !important;
}

/* 予定：3件分 */
body > main .schedule-section {
    flex: 0 0 calc(
        var(--right-panel-header-h)
        + (var(--right-schedule-row-h) * 3)
        + var(--right-panel-pad-y)
    ) !important;

    height: auto !important;

    max-height: calc(
        var(--right-panel-header-h)
        + (var(--right-schedule-row-h) * 3)
        + var(--right-panel-pad-y)
    ) !important;

    min-height: 0 !important;
}

/* 各リストだけ内部スクロール */
body > main #live-list,
body > main #schedule-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 低い画面では右2段を均等割りしてはみ出し防止 */
@media (max-height: 820px) and (min-width: 761px) {

    body > main .live-column {
        display: grid !important;
        grid-template-rows:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
    }

    body > main .live-status,
    body > main .schedule-section {
        flex: initial !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* 「すべて見る」展開時だけ対象パネルを右側全体へ */
body > main .live-column.live-panel-expanded,
body > main .live-column.schedule-panel-expanded {
    display: block !important;
    height: 100% !important;
}

body > main .live-column.live-panel-expanded .live-status,
body > main .live-column.schedule-panel-expanded .schedule-section {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    flex: none !important;
}

/* スマホは従来通り縦積み */
@media (max-width: 760px) {

    body > main .calendar-main-column {
        height: 560px !important;
    }

    body > main .live-column {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body > main .live-status,
    body > main .schedule-section {
        flex: 0 0 auto !important;
        height: 365px !important;
        max-height: 365px !important;
    }

    body > main .live-column.live-panel-expanded .live-status,
    body > main .live-column.schedule-panel-expanded .schedule-section {
        height: min(72vh, 720px) !important;
        max-height: min(72vh, 720px) !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v16
   Desktop sizing corrected to match the previous ~75% browser
   zoom appearance without using CSS zoom.
   ============================================================ */

@media (min-width: 1181px) {

    /*
       75%ブラウザ縮尺でちょうどよかった状態を、
       CSS zoomではなく実レイアウト幅で再現する。
    */
    body > main {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body > main > .calendar-decoration-stage {
        width: 100% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body > main .calendar-layout {
        width: 100% !important;
        max-width: none !important;

        grid-template-columns:
            minmax(0, 1.72fr)
            minmax(430px, 0.92fr) !important;

        gap: 14px !important;
    }

    body > main .calendar-main-column,
    body > main .live-column {
        min-width: 0 !important;
    }

    /* カレンダー内部も利用可能な横幅いっぱいまで使う */
    body > main .calendar {
        width: 100% !important;
        max-width: none !important;
    }
}

/*
   1920px級の画面では右欄を必要以上に広げず、
   カレンダー側へ多めに横幅を渡す。
*/
@media (min-width: 1600px) {

    body > main .calendar-layout {
        grid-template-columns:
            minmax(0, 1fr)
            440px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v17
   Theme switching enabled
   ============================================================ */

.theme-switch,
.theme-switch-button,
.theme-toggle,
.theme-toggle-button,
#theme-switch,
#theme-switch-button,
#theme-toggle,
#theme-toggle-button,
[data-theme-control],
.settings-theme-section,
.theme-settings-section {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.theme-switch[disabled],
.theme-switch-button[disabled],
.theme-toggle[disabled],
.theme-toggle-button[disabled],
#theme-switch[disabled],
#theme-switch-button[disabled],
#theme-toggle[disabled],
#theme-toggle-button[disabled] {
    cursor: pointer !important;
    opacity: 1 !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v18
   Theme switching fully enabled
   ============================================================ */

/* テーマ選択用コンテナ自体は有効化。
   直接の旧テーマボタンは表示せず、設定メニューから開く。 */
body > header .theme-switcher {
    display: block !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body > header .theme-switcher > .theme-switch-button {
    display: none !important;
}

/* 設定から開くテーマ一覧 */
body > header .theme-switch-popup {
    position: fixed !important;

    top: calc(var(--app-header-h) + 10px) !important;
    right: 16px !important;
    left: auto !important;

    width: min(320px, calc(100vw - 24px)) !important;
    max-height: min(68vh, 620px) !important;

    padding: 10px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    border: 1px solid rgba(117, 91, 144, 0.18) !important;
    border-radius: 14px !important;

    background: rgba(255, 255, 255, 0.98) !important;

    box-shadow:
        0 18px 42px rgba(70, 45, 90, 0.18) !important;

    z-index: 7200 !important;
}

body > header .theme-switch-popup:not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-7px) !important;
}

body > header .theme-switch-popup.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Theme option visual */
body > header .theme-option {
    width: 100% !important;
    min-height: 38px !important;

    padding: 8px 11px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;
    color: #4f405b !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    text-align: left !important;

    cursor: pointer !important;
}

body > header .theme-option:hover {
    background: #f6f0fb !important;
}

body > header .theme-option.active {
    background: #eee2f8 !important;
    color: #714591 !important;
}

/* TitleLogo */
body > header .site-title-logo {
    display: none !important;

    width: auto !important;
    height: auto !important;

    max-width: min(620px, 48vw) !important;
    max-height: 68px !important;

    object-fit: contain !important;
    object-position: left center !important;
}

body.theme-enabled > header .site-title-logo {
    display: block !important;
}

body.theme-enabled > header .temporary-platform-title {
    display: none !important;
}

/* PageThemeを最背面固定で表示 */
body.theme-enabled .page-theme {
    display: block !important;
}

/* 設定メニューのテーマ項目は通常操作可能 */
#desktop-theme-settings-button {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* mobile */
@media (max-width: 760px) {
    body > header .site-title-logo {
        max-width: min(330px, 58vw) !important;
        max-height: 52px !important;
    }

    body > header .theme-switch-popup {
        top: calc(var(--app-header-h) + 7px) !important;
        right: 7px !important;

        width: min(310px, calc(100vw - 14px)) !important;
        max-height: 72vh !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v19
   Theme popup portal fix
   ============================================================ */

/*
   テーマ一覧は旧theme-switcher/header配下ではなく
   JSでbody直下へ移動する。
   これにより旧UIのdisplay/overflow/stacking contextの影響を受けない。
*/
body > .theme-switch-popup-portal {
    position: fixed !important;

    top: calc(var(--app-header-h) + 10px) !important;
    right: 16px !important;
    left: auto !important;

    width: min(320px, calc(100vw - 24px)) !important;
    max-height: min(68vh, 620px) !important;

    margin: 0 !important;
    padding: 10px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    border: 1px solid rgba(117, 91, 144, 0.18) !important;
    border-radius: 14px !important;

    background: rgba(255, 255, 255, 0.985) !important;

    box-shadow:
        0 18px 42px rgba(70, 45, 90, 0.20) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(-7px) !important;

    z-index: 2147482000 !important;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease !important;
}

body > .theme-switch-popup-portal.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) !important;
}

body > .theme-switch-popup-portal .theme-option {
    width: 100% !important;
    min-height: 40px !important;

    flex: 0 0 auto !important;

    padding: 8px 11px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;
    color: #4f405b !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    text-align: left !important;

    cursor: pointer !important;
}

body > .theme-switch-popup-portal .theme-option:hover {
    background: #f6f0fb !important;
}

body > .theme-switch-popup-portal .theme-option.active {
    background: #eee2f8 !important;
    color: #714591 !important;
}

@media (max-width: 760px) {

    body > .theme-switch-popup-portal {
        top: calc(var(--app-header-h) + 7px) !important;
        right: 7px !important;

        width: min(310px, calc(100vw - 14px)) !important;
        max-height: 72vh !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v20
   Final theme-enable regression fix
   ============================================================ */

/*
   旧「テーマ停止中」CSSには
     body.temporary-platform-theme #theme-switch-popup {
       display: none !important;
     }
   が残っている。

   applyTheme()で temporary-platform-theme を外すことに加え、
   portal化したテーマ一覧を最終ルールでも明示的に表示可能にする。
*/
body > #theme-switch-popup.theme-switch-popup-portal {
    display: flex !important;
}

body > #theme-switch-popup.theme-switch-popup-portal:not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body > #theme-switch-popup.theme-switch-popup-portal.open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* テーマ有効時は正式TitleLogoを表示 */
body.theme-enabled > header .site-title-logo {
    display: block !important;
}

body.theme-enabled > header .temporary-platform-title {
    display: none !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v21
   2-column theme list + more transparent content panels
   ============================================================ */

/* ------------------------------------------------------------
   テーマ一覧：2列
   ------------------------------------------------------------ */

body > #theme-switch-popup.theme-switch-popup-portal {
    width: min(560px, calc(100vw - 32px)) !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 6px !important;

    padding: 12px !important;
}

body > #theme-switch-popup.theme-switch-popup-portal .theme-option {
    min-width: 0 !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;

    padding: 9px 11px !important;

    border: 1px solid rgba(117, 91, 144, 0.10) !important;
    border-radius: 10px !important;

    background: rgba(255, 255, 255, 0.74) !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body > #theme-switch-popup.theme-switch-popup-portal .theme-option:hover {
    background: rgba(246, 240, 251, 0.96) !important;
    border-color: rgba(117, 91, 144, 0.18) !important;
}

body > #theme-switch-popup.theme-switch-popup-portal .theme-option.active {
    background: rgba(238, 226, 248, 0.98) !important;
    border-color: rgba(113, 69, 145, 0.22) !important;
}

/* ------------------------------------------------------------
   カレンダー
   PageThemeを見せるため本体背景を透明寄りへ
   ------------------------------------------------------------ */

body > main .calendar {
    background: rgba(255, 255, 255, 0.70) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

body > main .calendar-header {
    background: rgba(255, 255, 255, 0.74) !important;
}

body > main .weekdays {
    background: rgba(250, 247, 252, 0.78) !important;
}

body > main .weekdays .sunday {
    background: rgba(255, 241, 245, 0.78) !important;
}

body > main .weekdays .saturday {
    background: rgba(240, 245, 255, 0.78) !important;
}

body > main .calendar-day {
    background: rgba(255, 255, 255, 0.64) !important;
}

body > main .calendar-day:hover {
    background: rgba(255, 248, 253, 0.78) !important;
}

body > main .calendar-day.sunday {
    background: rgba(255, 248, 250, 0.66) !important;
}

body > main .calendar-day.saturday {
    background: rgba(247, 250, 255, 0.66) !important;
}

body > main .calendar-day.other-month,
body > main .calendar-day.other-month.sunday,
body > main .calendar-day.other-month.saturday {
    background: rgba(229, 229, 229, 0.62) !important;
}

/* 今日だけ少ししっかり見せる */
body > main .calendar-day.today {
    background:
        linear-gradient(
            135deg,
            rgba(255, 248, 255, 0.80),
            rgba(249, 243, 255, 0.80)
        ) !important;
}

/* ------------------------------------------------------------
   配信中：背景透過を上げる
   見出しは読みやすさ優先で少し濃く残す
   ------------------------------------------------------------ */

body > main .live-status {
    background: rgba(255, 250, 251, 0.68) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

body > main .live-status-title {
    background: rgba(255, 241, 244, 0.86) !important;
}

body > main #live-list {
    background:
        linear-gradient(
            180deg,
            rgba(255, 252, 253, 0.50),
            rgba(255, 254, 254, 0.42)
        ) !important;
}

body > main #live-list .live-channel {
    background: rgba(255, 253, 253, 0.56) !important;
}

/* ------------------------------------------------------------
   予定：背景透過を上げる
   見出しは青を維持して視認性を確保
   ------------------------------------------------------------ */

body > main .schedule-section {
    background: rgba(249, 252, 255, 0.68) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

body > main .schedule-section > .schedule-panel-title,
body > main .schedule-section > .schedule-panel-title .schedule-title-main,
body > main .schedule-section > .schedule-panel-title .panel-title-actions {
    background: rgba(238, 246, 255, 0.88) !important;
}

body > main #schedule-list {
    background:
        linear-gradient(
            180deg,
            rgba(252, 254, 255, 0.52),
            rgba(254, 255, 255, 0.44)
        ) !important;
}

body > main #schedule-list .schedule-item {
    background: rgba(253, 254, 255, 0.56) !important;
}

/* ------------------------------------------------------------
   文字・アイコンの視認性を落とさない
   ------------------------------------------------------------ */

body > main .calendar-day,
body > main .schedule-section,
body > main .live-status {
    color: #292633 !important;
}

body > main .day-number,
body > main .schedule-time,
body > main .schedule-title,
body > main .channel-name,
body > main .live-channel-name,
body > main .live-channel-title,
body > main .live-channel-time {
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.86) !important;
}

/* スマホは2列だと窮屈なので1列 */
@media (max-width: 560px) {

    body > #theme-switch-popup.theme-switch-popup-portal {
        width: min(330px, calc(100vw - 14px)) !important;

        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v22
   Highly transparent panels + highlighted information
   ============================================================ */

/* ------------------------------------------------------------
   大枠はかなり透明にしてPageThemeをしっかり見せる
   ------------------------------------------------------------ */

body > main .calendar,
body > main .live-status,
body > main .schedule-section {
    background: rgba(255, 255, 255, 0.28) !important;

    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;

    border-color: rgba(255, 255, 255, 0.32) !important;

    box-shadow:
        0 8px 28px rgba(55, 40, 75, 0.08) !important;
}

/* ------------------------------------------------------------
   カレンダー
   ------------------------------------------------------------ */

body > main .calendar-header {
    background: rgba(255, 255, 255, 0.46) !important;
}

body > main .weekdays {
    background: rgba(255, 255, 255, 0.42) !important;
}

body > main .weekdays .sunday {
    background: rgba(255, 238, 244, 0.44) !important;
}

body > main .weekdays .saturday {
    background: rgba(235, 244, 255, 0.44) !important;
}

body > main .calendar-day {
    background: rgba(255, 255, 255, 0.28) !important;
}

body > main .calendar-day:hover {
    background: rgba(255, 255, 255, 0.46) !important;
}

body > main .calendar-day.sunday {
    background: rgba(255, 245, 248, 0.30) !important;
}

body > main .calendar-day.saturday {
    background: rgba(245, 249, 255, 0.30) !important;
}

body > main .calendar-day.other-month,
body > main .calendar-day.other-month.sunday,
body > main .calendar-day.other-month.saturday {
    background: rgba(225, 225, 225, 0.24) !important;
}

/* 今日だけは判別しやすく */
body > main .calendar-day.today {
    background:
        linear-gradient(
            135deg,
            rgba(255, 250, 255, 0.54),
            rgba(247, 240, 255, 0.54)
        ) !important;

    box-shadow:
        inset 0 0 0 3px rgba(198, 140, 255, 0.78) !important;
}

/* 日付数字を局所ハイライト */
body > main .day-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 22px !important;
    min-height: 22px !important;

    padding: 1px 5px !important;

    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.66) !important;

    box-shadow:
        0 1px 5px rgba(40, 30, 55, 0.10) !important;

    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.96),
        0 0 5px rgba(255, 255, 255, 0.78) !important;
}

/* カレンダー上の配信アイコンを白リングで分離 */
body > main .schedule-icon,
body > main .calendar-channel-icon,
body > main .calendar-day img {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.84),
        0 3px 10px rgba(45, 35, 65, 0.14) !important;
}

/* ------------------------------------------------------------
   配信中：大枠は透明、情報だけ浮かせる
   ------------------------------------------------------------ */

body > main .live-status {
    background: rgba(255, 248, 250, 0.24) !important;
}

body > main .live-status-title {
    background: rgba(255, 238, 243, 0.72) !important;
}

body > main #live-list {
    background: transparent !important;
}

body > main #live-list .live-channel {
    margin: 6px 4px !important;
    padding: 8px !important;

    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 10px !important;

    background: rgba(255, 255, 255, 0.38) !important;

    box-shadow:
        0 4px 14px rgba(55, 40, 75, 0.08) !important;

    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

body > main #live-list .live-channel-icon {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.90),
        0 3px 10px rgba(50, 40, 70, 0.16) !important;
}

/* ------------------------------------------------------------
   予定：大枠は透明、情報だけ浮かせる
   ------------------------------------------------------------ */

body > main .schedule-section {
    background: rgba(245, 250, 255, 0.24) !important;
}

/* 見出しは今までの青を維持 */
body > main .schedule-section > .schedule-panel-title,
body > main .schedule-section > .schedule-panel-title .schedule-title-main,
body > main .schedule-section > .schedule-panel-title .panel-title-actions {
    background: rgba(238, 246, 255, 0.84) !important;
}

body > main #schedule-list {
    background: transparent !important;
}

body > main #schedule-list .schedule-item {
    margin: 6px 4px !important;
    padding: 8px !important;

    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 10px !important;

    background: rgba(255, 255, 255, 0.38) !important;

    box-shadow:
        0 4px 14px rgba(55, 40, 75, 0.08) !important;

    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

body > main #schedule-list .schedule-channel-icon {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.90),
        0 3px 10px rgba(50, 40, 70, 0.16) !important;
}

/* ------------------------------------------------------------
   文字ハイライト
   ------------------------------------------------------------ */

body > main .schedule-title,
body > main .channel-name,
body > main .schedule-time,
body > main .live-channel-name,
body > main .live-channel-title,
body > main .live-channel-time,
body > main .weekdays > div,
body > main .calendar-header h2 {
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.98),
        0 0 6px rgba(255, 255, 255, 0.88),
        0 0 10px rgba(255, 255, 255, 0.50) !important;
}

/* チャンネル名・時刻はさらに読みやすく */
body > main .channel-name,
body > main .schedule-time,
body > main .live-channel-name,
body > main .live-channel-time {
    font-weight: 800 !important;
}

/* サムネイルは不透明のまま */
body > main .live-thumbnail-frame,
body > main .schedule-thumbnail-link,
body > main .thumbnail {
    opacity: 1 !important;
}

/* ------------------------------------------------------------
   背景が派手なテーマでも境界を見失わないように
   ------------------------------------------------------------ */

body > main .calendar,
body > main .live-status,
body > main .schedule-section {
    outline:
        1px solid rgba(255, 255, 255, 0.22) !important;
}

/* スマホは少しだけ濃くして可読性優先 */
@media (max-width: 760px) {

    body > main .calendar,
    body > main .live-status,
    body > main .schedule-section {
        background: rgba(255, 255, 255, 0.34) !important;
    }

    body > main #live-list .live-channel,
    body > main #schedule-list .schedule-item {
        background: rgba(255, 255, 255, 0.46) !important;
    }
}



/* ============================================================
   2026-08-22 UI REDESIGN v30 DYNAMIC
   Dynamic live rows + schedule fills remaining height
   ============================================================ */

:root {
    --right-panel-gap: 14px;
    --right-panel-header-h: 45px;
    --right-list-gap: 6px;
    --right-list-pad: 8px;

    /* 16:9サムネイルの基準幅 */
    --right-thumb-w: 118px;
}

@media (min-width: 761px) {

    body > main .calendar-layout {
        align-items: stretch !important;
    }

    body > main .live-column {
        display: flex !important;
        flex-direction: column !important;

        gap: var(--right-panel-gap) !important;

        min-height: 0 !important;
        max-height: none !important;

        overflow: hidden !important;
    }

    body > main .live-status,
    body > main .schedule-section {
        flex: 0 0 auto !important;

        width: 100% !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    /* ---------------- 見出し ---------------- */

    body > main .live-status-title,
    body > main .schedule-section > .schedule-panel-title {
        flex: 0 0 var(--right-panel-header-h) !important;

        width: 100% !important;
        height: var(--right-panel-header-h) !important;

        min-height: var(--right-panel-header-h) !important;
        max-height: var(--right-panel-header-h) !important;

        box-sizing: border-box !important;
    }

    body > main .live-status-title {
        background: rgba(255, 238, 243, 0.92) !important;
    }

    body > main .schedule-section > .schedule-panel-title,
    body > main .schedule-section > .schedule-panel-title .schedule-title-main,
    body > main .schedule-section > .schedule-panel-title .panel-title-actions {
        background: rgba(238, 246, 255, 0.92) !important;
    }

    body > main .schedule-section > .schedule-panel-title #schedule-date {
        background: transparent !important;
    }

    /* ---------------- スクロール領域 ---------------- */

    body > main #live-list,
    body > main #schedule-list {
        flex: 0 0 auto !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        padding: var(--right-list-pad) !important;

        display: flex !important;
        flex-direction: column !important;

        gap: var(--right-list-gap) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain !important;
        scrollbar-gutter: stable !important;

        box-sizing: border-box !important;
    }

    /* ---------------- 共通カード高 ---------------- */

    body > main #live-list .live-channel,
    body > main #live-list .live-channel:nth-child(n),
    body > main #schedule-list .schedule-item,
    body > main #schedule-list .schedule-item:nth-child(n) {
        flex: 0 0 var(--right-row-height, 78px) !important;

        width: 100% !important;
        height: var(--right-row-height, 78px) !important;

        min-width: 0 !important;
        min-height: var(--right-row-height, 78px) !important;
        max-height: var(--right-row-height, 78px) !important;

        margin: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    /* ========================================================
       配信中カード
       ======================================================== */

    body > main #live-list .live-channel {
        padding: 6px 8px !important;

        display: grid !important;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            var(--right-thumb-w) !important;

        grid-template-rows:
            auto
            minmax(0, 1fr)
            auto !important;

        column-gap: 8px !important;
        row-gap: 1px !important;

        align-items: center !important;
    }

    body > main #live-list .live-channel-icon {
        grid-column: 1 !important;
        grid-row: 1 / 4 !important;

        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    body > main #live-list .live-channel-name {
        grid-column: 2 !important;
        grid-row: 1 !important;

        min-width: 0 !important;

        font-size: 11px !important;
        line-height: 1.15 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body > main #live-list .live-channel-title {
        grid-column: 2 !important;
        grid-row: 2 !important;

        min-width: 0 !important;
        min-height: 0 !important;

        font-size: 10px !important;
        line-height: 1.18 !important;

        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;
    }

    body > main #live-list .live-channel-time {
        grid-column: 2 !important;
        grid-row: 3 !important;

        min-width: 0 !important;

        font-size: 10px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /*
       サムネイルは幅固定 + 16:9。
       カード高いっぱいへ引き伸ばさない。
    */
    body > main #live-list .live-thumbnail-link {
        grid-column: 3 !important;
        grid-row: 1 / 4 !important;

        width: var(--right-thumb-w) !important;
        height: auto !important;

        aspect-ratio: 16 / 9 !important;

        align-self: center !important;

        overflow: hidden !important;
        border-radius: 8px !important;
    }

    body > main #live-list .live-thumbnail-frame {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        aspect-ratio: 16 / 9 !important;

        object-fit: cover !important;
    }

    /* ========================================================
       配信0件メッセージ
       1件分の枠の中に表示する
       ======================================================== */

    body > main #live-list .live-empty-message,
    body > main #live-list .empty-message,
    body > main #live-list > p,
    body > main #live-list > div:only-child:not(.live-channel) {
        flex: 0 0 var(--right-row-height, 78px) !important;

        width: 100% !important;
        height: var(--right-row-height, 78px) !important;

        min-height: var(--right-row-height, 78px) !important;
        max-height: var(--right-row-height, 78px) !important;

        margin: 0 !important;
        padding: 10px 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        border: 1px solid rgba(255, 255, 255, 0.55) !important;
        border-radius: 10px !important;

        background: rgba(255, 255, 255, 0.46) !important;

        box-shadow:
            0 4px 14px rgba(55, 40, 75, 0.06) !important;

        box-sizing: border-box !important;
    }

    /* ========================================================
       予定カード
       ======================================================== */

    body > main #schedule-list .schedule-item {
        padding: 6px 8px !important;

        display: grid !important;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            var(--right-thumb-w) !important;

        column-gap: 8px !important;

        align-items: center !important;
    }

    body > main #schedule-list .schedule-channel-icon {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        min-height: 36px !important;
    }

    body > main #schedule-list .schedule-info {
        min-width: 0 !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        gap: 1px !important;

        overflow: hidden !important;
    }

    body > main #schedule-list .channel-name {
        width: 100% !important;

        font-size: 10px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body > main #schedule-list .schedule-time {
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    body > main #schedule-list .schedule-title {
        width: 100% !important;

        font-size: 10px !important;
        line-height: 1.15 !important;

        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;
    }

    body > main #schedule-list .schedule-thumbnail-link {
        width: var(--right-thumb-w) !important;
        height: auto !important;

        aspect-ratio: 16 / 9 !important;

        align-self: center !important;

        overflow: hidden !important;
        border-radius: 8px !important;
    }

    body > main #schedule-list .thumbnail {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        aspect-ratio: 16 / 9 !important;

        object-fit: cover !important;
    }

    body > main #schedule-list .schedule-empty-message {
        flex: 0 0 auto !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 12px 14px !important;

        background: rgba(255, 255, 255, 0.42) !important;

        box-shadow: none !important;
    }

    /* ========================================================
       すべて見る
       ======================================================== */

    body > main .live-column.live-panel-expanded,
    body > main .live-column.schedule-panel-expanded {
        display: block !important;
        height: 100% !important;
    }

    body > main .live-column.live-panel-expanded .live-status,
    body > main .live-column.schedule-panel-expanded .schedule-section {
        width: 100% !important;
        height: 100% !important;
    }

    body > main .live-column.live-panel-expanded #live-list,
    body > main .live-column.schedule-panel-expanded #schedule-list {
        height:
            calc(
                100%
                - var(--right-panel-header-h)
            ) !important;
    }

    body > main .live-column.live-panel-expanded #live-list .live-channel,
    body > main .live-column.schedule-panel-expanded #schedule-list .schedule-item {
        flex: 0 0 96px !important;

        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;
    }
}

@media (max-width: 760px) {

    body > main .live-column {
        display: flex !important;
        flex-direction: column !important;

        height: auto !important;

        overflow: visible !important;
    }

    body > main .live-status,
    body > main .schedule-section {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v31
   Schedule heading color unification + larger typography
   ============================================================ */

/* ------------------------------------------------------------
   予定見出し：
   日付・件数・すべて見るまで同じ青背景へ統一
   ------------------------------------------------------------ */

body > main .schedule-section > .schedule-panel-title,
body > main .schedule-section > .schedule-panel-title .schedule-title-main,
body > main .schedule-section > .schedule-panel-title #schedule-date,
body > main .schedule-section > .schedule-panel-title .panel-title-actions,
body > main .schedule-section > .schedule-panel-title .panel-count-badge,
body > main .schedule-section > .schedule-panel-title .panel-expand-button {
    background: rgba(238, 246, 255, 0.92) !important;
}

/* 件数バッジ自体は青い丸を維持 */
body > main .schedule-section > .schedule-panel-title .schedule-count-badge {
    background: #5d82d5 !important;
    color: #ffffff !important;
}

/* 「すべて見る」は背景を持たず見出し青になじませる */
body > main .schedule-section > .schedule-panel-title .schedule-expand-button {
    background: transparent !important;
    color: #4c72bb !important;
}

/* hover時も見出し色から浮かない */
body > main .schedule-section > .schedule-panel-title .schedule-expand-button:hover {
    background: rgba(255, 255, 255, 0.26) !important;
}

/* ------------------------------------------------------------
   配信中・予定の文字を大きく
   ------------------------------------------------------------ */

/* 配信中 */
body > main #live-list .live-channel-name {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

body > main #live-list .live-channel-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

body > main #live-list .live-channel-time {
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

/* 予定 */
body > main #schedule-list .channel-name {
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

body > main #schedule-list .schedule-time {
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

body > main #schedule-list .schedule-title {
    font-size: 12px !important;
    line-height: 1.22 !important;
}

/* 見出し文字も少しだけ大きく */
body > main .live-status-title,
body > main .schedule-section > .schedule-panel-title {
    font-size: 15px !important;
    font-weight: 800 !important;
}

/* 件数・すべて見る */
body > main .panel-count-badge {
    font-size: 11px !important;
}

body > main .panel-expand-button {
    font-size: 11px !important;
}

/* 小さめ画面では少し抑える */
@media (max-width: 1180px) and (min-width: 761px) {

    body > main #live-list .live-channel-name {
        font-size: 12px !important;
    }

    body > main #live-list .live-channel-title {
        font-size: 11px !important;
    }

    body > main #schedule-list .channel-name {
        font-size: 11px !important;
    }

    body > main #schedule-list .schedule-time {
        font-size: 13px !important;
    }

    body > main #schedule-list .schedule-title {
        font-size: 11px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v32 PLATFORM
   YouTube = pale red / Twitch = pale blue
   ============================================================ */

/* ------------------------------------------------------------
   カレンダー内アイコン
   ------------------------------------------------------------ */

body > main .schedule-icon {
    border-radius: 50% !important;

    /* v22等の白リングよりプラットフォーム色を優先 */
    border: 2px solid transparent !important;

    background-clip: padding-box !important;

    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease !important;
}

/* YouTube：薄い赤丸 */
body > main .schedule-icon-youtube {
    border-color: rgba(235, 72, 92, 0.52) !important;

    box-shadow:
        0 0 0 3px rgba(255, 224, 229, 0.58),
        0 3px 9px rgba(120, 60, 75, 0.12) !important;
}

/* Twitch：薄い青丸 */
body > main .schedule-icon-twitch {
    border-color: rgba(70, 132, 225, 0.54) !important;

    box-shadow:
        0 0 0 3px rgba(220, 235, 255, 0.64),
        0 3px 9px rgba(55, 85, 135, 0.12) !important;
}

body > main .schedule-icon:hover {
    transform: translateY(-1px) scale(1.04) !important;
}

/* ------------------------------------------------------------
   選択日の予定カード
   ------------------------------------------------------------ */

body > main #schedule-list .schedule-item {
    border-width: 1px !important;
    border-style: solid !important;
}

/* YouTube：薄い赤フレーム */
body > main #schedule-list .schedule-item-youtube {
    border-color: rgba(235, 72, 92, 0.38) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255, 235, 239, 0.58),
        0 4px 14px rgba(90, 55, 70, 0.07) !important;
}

/* Twitch：薄い青フレーム */
body > main #schedule-list .schedule-item-twitch {
    border-color: rgba(70, 132, 225, 0.40) !important;

    box-shadow:
        inset 0 0 0 1px rgba(232, 242, 255, 0.64),
        0 4px 14px rgba(55, 75, 110, 0.07) !important;
}

/* アイコン側にも軽くプラットフォーム色 */
body > main #schedule-list .schedule-channel-icon-youtube {
    box-shadow:
        0 0 0 2px rgba(255, 226, 231, 0.90),
        0 3px 9px rgba(100, 55, 70, 0.12) !important;
}

body > main #schedule-list .schedule-channel-icon-twitch {
    box-shadow:
        0 0 0 2px rgba(224, 238, 255, 0.94),
        0 3px 9px rgba(55, 75, 110, 0.12) !important;
}

/* サムネイルもフレーム色に合わせる */
body > main #schedule-list .schedule-item-youtube
.schedule-thumbnail-link {
    outline:
        1px solid rgba(235, 72, 92, 0.22) !important;
}

body > main #schedule-list .schedule-item-twitch
.schedule-thumbnail-link {
    outline:
        1px solid rgba(70, 132, 225, 0.24) !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v33
   Browser 100% -> previous browser 75% appearance
   Desktop only
   ============================================================ */

/*
   これまでブラウザ倍率75%で確認していた見た目を、
   ブラウザ倍率100%のまま再現する。

   root(html)へzoomを掛けることで、
   ヘッダー・カレンダー・右パネル・フッター・
   ポップアップ・PageTheme・TitleLogoを
   個別に縮小せず同じ比率でまとめて縮小する。

   PC/タブレット横幅のみ適用し、
   スマホには適用しない。
*/
@media (min-width: 761px) {

    html {
        zoom: 0.75 !important;
    }
}

/*
   CSS zoom非対応環境向けのフォールバック。
   Chromium / Edge / Safariではzoomが優先されるため、
   通常はこちらは実質使用されない。
*/
@supports not (zoom: 1) {

    @media (min-width: 761px) {

        body {
            width: 133.333333% !important;
            min-height: 133.333333vh !important;

            transform: scale(0.75) !important;
            transform-origin: top left !important;
        }
    }
}

/* スマホは従来の100%表示を維持 */
@media (max-width: 760px) {

    html {
        zoom: 1 !important;
    }

    body {
        transform: none !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v34
   Desktop 75% zoom corrections
   - PageTheme viewport size
   - right panel/calendar height alignment
   ============================================================ */

@media (min-width: 761px) {

    /*
       html zoom:0.75 の状態では、fixed背景も
       75%のCSS座標系で計算される。

       PageThemeだけは実画面全体を覆う必要があるため、
       1 / 0.75 = 1.333333... 倍の仮想サイズを与える。
    */
    body > .page-theme,
    .page-theme {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: 133.333333vw !important;
        height: 133.333333vh !important;

        min-width: 133.333333vw !important;
        min-height: 133.333333vh !important;

        transform: none !important;

        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    /*
       右側はJSでzoom補正済みのカレンダー実レイアウト高を使用。
       余計なmax/min-height指定を打ち消す。
    */
    body > main .live-column {
        min-height: 0 !important;
        max-height: none !important;
    }

    body > main .live-status,
    body > main .schedule-section {
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* スマホは通常100%なのでPageThemeも通常サイズ */
@media (max-width: 760px) {

    body > .page-theme,
    .page-theme {
        width: 100vw !important;
        height: 100vh !important;

        min-width: 100vw !important;
        min-height: 100vh !important;

        background-size: cover !important;
        background-position: center top !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v35
   PageTheme always fits the viewport
   ============================================================ */

/*
   cover だと画面比率とPageTheme比率の差で
   上下または左右が必ず切れる。

   PageTheme全体を常に画面内へ収めるため、
   fixed背景領域いっぱいへ画像をフィットさせる。
*/
@media (min-width: 761px) {

    body > .page-theme,
    .page-theme {
        width: 133.333333vw !important;
        height: 133.333333vh !important;

        min-width: 133.333333vw !important;
        min-height: 133.333333vh !important;

        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

/* スマホも同様に画面全体へ合わせる */
@media (max-width: 760px) {

    body > .page-theme,
    .page-theme {
        width: 100vw !important;
        height: 100vh !important;

        min-width: 100vw !important;
        min-height: 100vh !important;

        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v36
   Theme list = notification-channel style
   ============================================================ */

body > #theme-switch-popup.theme-switch-popup-portal {
    width: min(600px, calc(100vw - 32px)) !important;

    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 7px !important;

    padding: 10px !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-option {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;

    padding: 7px 38px 7px 8px !important;

    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    border: 1px solid #e6ddec !important;
    border-radius: 9px !important;

    background: rgba(252, 250, 255, 0.96) !important;

    color: #4d4553 !important;

    text-align: left !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        transform 0.14s ease,
        box-shadow 0.14s ease !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-option:hover {
    background: #f7f2fc !important;
    border-color: #ccb9da !important;

    transform: translateY(-1px) !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-option.active {
    background: #f2e9fb !important;
    border-color: #a980c3 !important;

    box-shadow:
        inset 0 0 0 1px rgba(121, 83, 151, 0.08),
        0 3px 10px rgba(70, 45, 90, 0.08) !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-channel-icon {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    flex: 0 0 32px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    background: #eee8f2 !important;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.92),
        0 2px 7px rgba(60, 45, 75, 0.11) !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-channel-name {
    min-width: 0 !important;
    flex: 1 1 auto !important;

    overflow: hidden !important;

    color: #4d4553 !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-selected-mark {
    position: absolute !important;

    top: 50% !important;
    right: 10px !important;

    width: 22px !important;
    height: 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: rgba(126, 82, 157, 0.11) !important;
    color: #795397 !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    opacity: 0 !important;

    transform:
        translateY(-50%)
        scale(0.84) !important;

    transition:
        opacity 0.14s ease,
        transform 0.14s ease !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-option.active
.theme-selected-mark {
    opacity: 1 !important;

    transform:
        translateY(-50%)
        scale(1) !important;
}

@media (max-width: 560px) {

    body > #theme-switch-popup.theme-switch-popup-portal {
        width:
            min(
                340px,
                calc(100vw - 14px)
            ) !important;

        grid-template-columns:
            minmax(0, 1fr) !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v37
   Theme icons from /push/config
   ============================================================ */

body > #theme-switch-popup.theme-switch-popup-portal
.theme-channel-icon {
    color: transparent !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-channel-icon:not([src]),
body > #theme-switch-popup.theme-switch-popup-portal
.theme-channel-icon[src=""] {
    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.95) 0 34%,
            rgba(226,216,235,.95) 35% 100%
        ) !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v38
   Theme selector: fixed 2-column grid
   ============================================================ */

body > #theme-switch-popup.theme-switch-popup-portal {
    display: grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    grid-auto-flow: row !important;

    align-items: stretch !important;

    gap: 7px !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-option {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}

/*
   v36の560px以下1列指定も上書き。
   テーマ一覧は画面幅に関係なく2列を維持する。
*/
@media (max-width: 560px) {

    body > #theme-switch-popup.theme-switch-popup-portal {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        width:
            min(
                600px,
                calc(100vw - 14px)
            ) !important;
    }

    body > #theme-switch-popup.theme-switch-popup-portal
    .theme-channel-name {
        font-size: 11px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v39
   Theme popup: authoritative REAL 2-column grid
   ============================================================ */

html body #theme-switch-popup {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    grid-auto-columns: auto !important;
    grid-auto-rows: minmax(50px, auto) !important;
    grid-auto-flow: row !important;

    column-gap: 8px !important;
    row-gap: 8px !important;

    width: 600px !important;
    max-width: calc(100vw - 24px) !important;

    min-width: 0 !important;

    padding: 10px !important;

    box-sizing: border-box !important;
}

/*
   旧CSSの width / flex / grid-column / display:block 等を
   すべてここで打ち消す。
*/
html body #theme-switch-popup > .theme-option {
    display: flex !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    flex: none !important;
    flex-basis: auto !important;

    float: none !important;
    clear: none !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}

/* 75%アプリ表示時でも2列を維持 */
@media (min-width: 761px) {

    html body #theme-switch-popup {
        width: 600px !important;
        max-width: calc(133.333333vw - 24px) !important;
    }
}

/* 狭い画面でも2列 */
@media (max-width: 760px) {

    html body #theme-switch-popup {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;
    }

    html body #theme-switch-popup > .theme-option {
        padding:
            6px 30px 6px 6px !important;
    }

    html body #theme-switch-popup
    .theme-channel-icon {
        width: 28px !important;
        height: 28px !important;

        min-width: 28px !important;
        flex-basis: 28px !important;
    }

    html body #theme-switch-popup
    .theme-channel-name {
        font-size: 10px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v40
   Pixel-perfect calendar / schedule bottom alignment
   ============================================================ */

/*
   JSが最終下端を実測して補正するため、
   右カラム・予定パネルに余計なbottom/marginを持たせない。
*/
@media (min-width: 761px) {

    body > main .live-column,
    body > main .schedule-section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body > main .schedule-section {
        box-sizing: border-box !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v41
   Default theme enabled
   ============================================================ */

body > #theme-switch-popup.theme-switch-popup-portal
.theme-option[data-theme="default"] {
    background:
        linear-gradient(
            135deg,
            rgba(255, 246, 251, 0.98),
            rgba(241, 249, 255, 0.98)
        ) !important;
}

body > #theme-switch-popup.theme-switch-popup-portal
.theme-option[data-theme="default"].active {
    border-color:
        rgba(113, 129, 202, 0.62) !important;

    box-shadow:
        inset 0 0 0 1px rgba(112, 138, 211, 0.10),
        0 3px 10px rgba(65, 77, 125, 0.08) !important;
}


/* ============================================================
   2026-08-22 UI REDESIGN v42
   Glass header/footer + larger title logo
   ============================================================ */

/* ------------------------------------------------------------
   Header glass band
   ------------------------------------------------------------ */

body > header {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.62),
            rgba(248,244,255,0.46)
        ) !important;

    backdrop-filter:
        blur(16px)
        saturate(1.08) !important;

    -webkit-backdrop-filter:
        blur(16px)
        saturate(1.08) !important;

    border-bottom:
        1px solid
        rgba(255,255,255,0.66) !important;

    box-shadow:
        0 6px 24px
        rgba(58,42,78,0.08),
        inset 0 -1px 0
        rgba(139,107,170,0.08),
        inset 0 1px 0
        rgba(255,255,255,0.88) !important;
}

/* thin highlight line */
body > header::after {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(192,150,220,0.26),
            rgba(126,183,238,0.24),
            transparent
        ) !important;

    pointer-events: none !important;
}

/* ------------------------------------------------------------
   TitleLogo
   Bigger and visually prioritized
   ------------------------------------------------------------ */

body > header .site-logo-title {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    margin: 0 !important;

    pointer-events: none !important;

    z-index: 2 !important;
}

body > header .site-title-logo {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width:
        min(
            820px,
            58vw
        ) !important;

    max-height:
        calc(
            var(--app-header-h) * 1.03
        ) !important;

    object-fit: contain !important;
    object-position: center center !important;

    filter:
        drop-shadow(
            0 4px 12px
            rgba(52,38,72,0.12)
        ) !important;
}

/* ------------------------------------------------------------
   Header right-side actions
   ------------------------------------------------------------ */

body > header > .live-fan-made {
    position: relative !important;
    z-index: 4 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;
}

/*
   更新 / 設定は同一デザイン
*/
body > header .refresh-button,
body > header .desktop-settings-button {
    height: 42px !important;
    min-height: 42px !important;

    min-width: 88px !important;

    padding: 0 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    border:
        1px solid
        rgba(255,255,255,0.82) !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.76),
            rgba(251,247,255,0.64)
        ) !important;

    color: #574664 !important;

    box-shadow:
        0 4px 14px
        rgba(62,45,82,0.08),
        inset 0 1px 0
        rgba(255,255,255,0.94) !important;

    backdrop-filter:
        blur(12px) !important;

    -webkit-backdrop-filter:
        blur(12px) !important;

    transition:
        transform .15s ease,
        background .15s ease,
        box-shadow .15s ease,
        border-color .15s ease !important;
}

body > header .refresh-button:hover,
body > header .desktop-settings-button:hover {
    transform:
        translateY(-1px) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.92),
            rgba(247,239,255,0.80)
        ) !important;

    border-color:
        rgba(211,191,229,0.92) !important;

    box-shadow:
        0 7px 18px
        rgba(62,45,82,0.12),
        inset 0 1px 0
        rgba(255,255,255,0.98) !important;
}

body > header .refresh-button:active,
body > header .desktop-settings-button:active {
    transform:
        scale(.97) !important;
}

body > header .refresh-icon,
body > header .desktop-settings-icon {
    width: 25px !important;
    height: 25px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            135deg,
            rgba(243,229,255,0.92),
            rgba(228,240,255,0.90)
        ) !important;

    color: #7c5b97 !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.86) !important;
}

body > header .refresh-text,
body > header .desktop-settings-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
}

/* 更新時の回転に既存クラスがあれば自然に反映 */
body > header .refresh-button.loading .refresh-icon,
body > header .refresh-button.is-loading .refresh-icon {
    animation:
        header-refresh-spin .8s linear infinite !important;
}

@keyframes header-refresh-spin {
    to {
        transform:
            rotate(360deg);
    }
}

/* ------------------------------------------------------------
   Fan-made = information badge, not an action button
   ------------------------------------------------------------ */

body > header .fan-made {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 42px !important;
}

body > header .fan-made-status-badge {
    height: 30px !important;
    min-height: 30px !important;

    min-width: 0 !important;

    padding:
        0 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    border:
        1px solid
        rgba(226,184,204,0.42) !important;

    border-radius: 999px !important;

    background:
        rgba(255,246,251,0.48) !important;

    color: #8a6879 !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.78) !important;

    backdrop-filter:
        blur(10px) !important;

    -webkit-backdrop-filter:
        blur(10px) !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
}

body > header .fan-made-status-badge::before {
    content: "♡" !important;

    width: auto !important;
    height: auto !important;

    background: none !important;

    color: #ca7597 !important;

    font-size: 12px !important;
}

/* remove button-like hover feel */
body > header .fan-made:hover .fan-made-status-badge {
    transform: none !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.78) !important;
}

/* ------------------------------------------------------------
   Footer
   Slim glass band
   ------------------------------------------------------------ */

body > footer,
body > .app-footer-glass {
    background:
        linear-gradient(
            180deg,
            rgba(250,247,255,0.38),
            rgba(255,255,255,0.52)
        ) !important;

    backdrop-filter:
        blur(14px)
        saturate(1.06) !important;

    -webkit-backdrop-filter:
        blur(14px)
        saturate(1.06) !important;

    border-top:
        1px solid
        rgba(255,255,255,0.62) !important;

    box-shadow:
        0 -5px 20px
        rgba(55,40,75,0.06),
        inset 0 1px 0
        rgba(255,255,255,0.82) !important;

    min-height: 34px !important;
    height: 34px !important;

    padding:
        0 14px !important;

    font-size: 10px !important;

    color:
        rgba(77,67,86,0.78) !important;
}

/* footer inner elements compact */
body > footer > *,
body > .app-footer-glass > * {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   Desktop fine tune
   ------------------------------------------------------------ */

@media (min-width: 1181px) {

    body > header .site-title-logo {
        max-width:
            min(
                860px,
                60vw
            ) !important;
    }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    body > header .site-title-logo {
        max-width:
            min(
                420px,
                64vw
            ) !important;

        max-height:
            calc(
                var(--app-header-h) * .88
            ) !important;
    }

    body > header .refresh-button,
    body > header .desktop-settings-button {
        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;

        padding: 0 !important;

        border-radius: 12px !important;
    }

    body > header .refresh-text,
    body > header .desktop-settings-text {
        display: none !important;
    }

    body > header .fan-made {
        display: none !important;
    }

    body > footer,
    body > .app-footer-glass {
        height: 32px !important;
        min-height: 32px !important;

        padding:
            0 8px !important;

        font-size: 9px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v43
   Header logo left / footer update left / Fan-made right
   ============================================================ */

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

body > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding:
        0 14px !important;
}

/*
   ロゴは中央固定をやめ、左端から大きく表示。
   横長TitleLogoの比率を活かす。
*/
body > header .site-logo-title {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    transform: none !important;

    flex: 0 1 auto !important;

    height: 100% !important;

    display: flex !important;
    align-items: center !important;

    margin: 0 !important;

    pointer-events: none !important;

    z-index: 2 !important;
}

body > header .site-title-logo {
    width: auto !important;
    height: auto !important;

    /*
       ヘッダー高をほぼ使い切る。
       左右ボタンと干渉しない範囲で最大化。
    */
    max-height:
        calc(
            var(--app-header-h) * 0.96
        ) !important;

    max-width:
        min(
            920px,
            58vw
        ) !important;

    object-fit: contain !important;
    object-position: left center !important;

    margin-left: 4px !important;
}

/*
   右側は更新/設定だけ。
*/
body > header > .live-fan-made {
    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;
}

/* v42のFan-made関連はヘッダーでは無効化 */
body > header .fan-made,
body > header .fan-made-status-badge {
    display: none !important;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

body > footer,
body > .app-footer-glass {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 16px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding:
        0 16px !important;

    white-space: nowrap !important;
}

body > footer .footer-left,
body > footer .footer-right {
    display: flex !important;
    align-items: center !important;

    min-width: 0 !important;
}

body > footer .footer-left {
    justify-content: flex-start !important;

    color:
        rgba(73, 64, 84, 0.86) !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}

body > footer .footer-update-label {
    margin-right: 3px !important;

    color:
        rgba(91, 75, 105, 0.90) !important;
}

body > footer #footer-last-updated {
    color: #5d4c6c !important;

    font-weight: 800 !important;

    letter-spacing: .02em !important;
}

body > footer .footer-timezone {
    margin-left: 3px !important;

    color:
        rgba(102, 92, 112, 0.68) !important;
}

body > footer .footer-right {
    justify-content: flex-end !important;

    margin-left: auto !important;
}

body > footer .footer-fan-made {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 26px !important;

    padding:
        0 10px !important;

    border:
        1px solid
        rgba(218, 184, 206, 0.38) !important;

    border-radius: 999px !important;

    background:
        rgba(255, 248, 252, 0.42) !important;

    color:
        rgba(126, 91, 112, 0.86) !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    letter-spacing: .03em !important;
}

/* ------------------------------------------------------------
   Desktop wide
   ------------------------------------------------------------ */

@media (min-width: 1181px) {

    body > header .site-title-logo {
        max-width:
            min(
                980px,
                62vw
            ) !important;

        max-height:
            calc(
                var(--app-header-h) * 0.98
            ) !important;
    }
}

/* ------------------------------------------------------------
   Medium width
   ------------------------------------------------------------ */

@media (max-width: 1180px) and (min-width: 761px) {

    body > header .site-title-logo {
        max-width: 54vw !important;
        max-height:
            calc(
                var(--app-header-h) * 0.92
            ) !important;
    }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    body > header {
        padding:
            0 8px !important;
    }

    body > header .site-title-logo {
        max-width: 56vw !important;

        max-height:
            calc(
                var(--app-header-h) * 0.82
            ) !important;
    }

    body > footer,
    body > .app-footer-glass {
        height: 34px !important;
        min-height: 34px !important;

        padding:
            0 8px !important;

        gap: 8px !important;
    }

    body > footer .footer-left,
    body > footer .footer-fan-made {
        font-size: 8px !important;
    }

    body > footer .footer-fan-made {
        padding:
            0 7px !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v44
   Header settings click-area fix
   ============================================================ */

/*
   v43でロゴを左寄せした際、過去CSSのflex指定が残り
   .live-fan-made が設定ボタン側の領域まで広がる場合がある。
   ヘッダーの3要素を明示的に分離する。
*/
body > header {
    position: relative !important;

    overflow: visible !important;
}

/* 左：ロゴ */
body > header > .site-logo-title {
    flex: 0 1 auto !important;

    min-width: 0 !important;

    z-index: 2 !important;

    pointer-events: none !important;
}

/* 中〜右：更新・テーマ切替 */
body > header > .live-fan-made {
    position: relative !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: 8px !important;

    z-index: 10 !important;

    pointer-events: auto !important;
}

/*
   live-fan-made 自身の空白領域が設定ボタンへ被らないよう
   子要素だけをクリック対象にする。
*/
body > header > .live-fan-made {
    pointer-events: none !important;
}

body > header > .live-fan-made > *,
body > header > .live-fan-made button {
    pointer-events: auto !important;
}

/* 右端：設定 */
body > header > .desktop-settings-control {
    position: relative !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: max-content !important;

    margin: 0 !important;

    z-index: 50 !important;

    pointer-events: auto !important;
}

body > header #desktop-settings-button {
    position: relative !important;

    z-index: 51 !important;

    pointer-events: auto !important;

    cursor: pointer !important;
}

/* 設定ポップアップも確実に最前面 */
body > header #desktop-settings-popup {
    z-index: 20000 !important;

    pointer-events: none !important;
}

body > header #desktop-settings-popup.open {
    pointer-events: auto !important;
}

/*
   ヘッダー装飾線はクリックを奪わない
*/
body > header::before,
body > header::after {
    pointer-events: none !important;
}

/*
   ロゴ画像が大きくなっても操作領域へ干渉しない。
*/
body > header .site-title-logo,
body > header .temporary-platform-title {
    pointer-events: none !important;
}

/* ------------------------------------------------------------
   Narrow desktop
   ------------------------------------------------------------ */

@media (max-width: 1180px) and (min-width: 761px) {

    body > header > .live-fan-made {
        margin-right: 6px !important;
    }

    body > header > .desktop-settings-control {
        flex-shrink: 0 !important;
    }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    body > header > .live-fan-made {
        margin-right: 5px !important;
    }

    body > header > .desktop-settings-control {
        flex-shrink: 0 !important;
    }
}


/* ============================================================
   2026-08-22 v48 SAFE HEADER/FOOTER
   Based on v44 layout dimensions.
   Main calendar/right panels are intentionally untouched.
   ============================================================ */

/* Header dimensions are inherited from v44. */
body > header {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    padding-left: 8px !important;
    padding-right: 10px !important;

    overflow: visible !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.72),
            rgba(255,255,255,.44) 42%,
            rgba(255,255,255,.52)
        ) !important;

    backdrop-filter: blur(13px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(13px) saturate(1.08) !important;
}

/* Large left logo, but constrained to the EXISTING header box. */
body > header > .site-logo-title {
    position: relative !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    overflow: visible !important;

    pointer-events: none !important;
}

body > header .site-title-logo {
    width:
        min(
            620px,
            calc(100vw - 290px)
        ) !important;

    height: auto !important;

    max-width: none !important;

    /*
       Do not allow the logo to change header height.
       It may visually use almost all of the existing band.
    */
    max-height:
        calc(var(--app-header-h) - 4px) !important;

    object-fit: contain !important;
    object-position: left center !important;

    margin: 0 !important;

    transform: none !important;

    pointer-events: none !important;

    filter:
        drop-shadow(0 2px 6px rgba(55,42,70,.12)) !important;
}

/* Refresh container: no stretching over Settings. */
body > header > .live-fan-made {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: 7px !important;

    display: flex !important;
    align-items: center !important;

    pointer-events: none !important;

    z-index: 30 !important;
}

body > header > .live-fan-made > *,
body > header > .live-fan-made button {
    pointer-events: auto !important;
}

/* Fan-made stays footer-only. */
body > header .fan-made,
body > header .fan-made-status-badge {
    display: none !important;
}

/* Refresh and Settings: same horizontal card design. */
body > header .refresh-button,
body > header .desktop-settings-button {
    width: auto !important;
    min-width: 88px !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 0 12px !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    border:
        1px solid rgba(255,255,255,.90) !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.90),
            rgba(247,243,251,.76)
        ) !important;

    box-shadow:
        0 3px 10px rgba(57,43,73,.10),
        inset 0 1px 0 rgba(255,255,255,.96) !important;

    color: #5d496a !important;

    cursor: pointer !important;
    pointer-events: auto !important;
}

body > header .refresh-icon,
body > header .desktop-settings-icon {
    width: 22px !important;
    height: 22px !important;

    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
}

body > header .refresh-text,
body > header .desktop-settings-text {
    display: inline !important;

    margin: 0 !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}

/* Preserve v44 Settings click fix. */
body > header > .desktop-settings-control {
    position: relative !important;

    flex: 0 0 auto !important;

    min-width: max-content !important;

    z-index: 60 !important;

    pointer-events: auto !important;
}

body > header #desktop-settings-button {
    position: relative !important;
    z-index: 61 !important;
    pointer-events: auto !important;
}

body > header #desktop-settings-popup {
    z-index: 20000 !important;
}

/*
   Footer dimensions are NOT changed.
   Only contents/appearance are arranged.
*/
body > footer,
body > .app-footer-glass {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.46),
            rgba(250,246,252,.34),
            rgba(255,255,255,.46)
        ) !important;

    backdrop-filter: blur(11px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(11px) saturate(1.06) !important;
}

body > footer .footer-left {
    display: flex !important;
    align-items: center !important;

    margin-right: auto !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}

body > footer #footer-last-updated {
    font-weight: 800 !important;
}

body > footer .footer-right {
    display: flex !important;
    align-items: center !important;

    margin-left: auto !important;
}

body > footer .footer-fan-made {
    display: inline-flex !important;
    align-items: center !important;

    padding: 3px 9px !important;

    border:
        1px solid rgba(220,190,210,.34) !important;

    border-radius: 999px !important;

    background:
        rgba(255,250,252,.38) !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}

/* Do not let decorative pseudo-elements capture clicks. */
body > header::before,
body > header::after,
body > header .site-title-logo {
    pointer-events: none !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
    body > header .site-title-logo {
        width:
            min(
                520px,
                calc(100vw - 255px)
            ) !important;
    }

    body > header .refresh-button,
    body > header .desktop-settings-button {
        min-width: 80px !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 760px) {
    body > header .site-title-logo {
        width:
            min(
                350px,
                calc(100vw - 105px)
            ) !important;

        max-height:
            calc(var(--app-header-h) - 5px) !important;
    }

    body > header .refresh-button,
    body > header .desktop-settings-button {
        width: 38px !important;
        min-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;

        padding: 0 !important;
    }

    body > header .refresh-text,
    body > header .desktop-settings-text {
        display: none !important;
    }
}


/* ============================================================
   2026-08-22 UI REDESIGN v49
   Visual polish without changing main layout dimensions
   ============================================================ */

/* ------------------------------------------------------------
   1. TitleLogo
   ------------------------------------------------------------ */

/*
   過去CSSに max-height / max-width / flex-basis が多数あるため、
   h1とimgの両方を最終セレクタで固定。
   ヘッダー自体の高さは変更しない。
*/
html body > header > h1.site-logo-title {
    position: relative !important;

    flex:
        0 0
        min(
            720px,
            calc(100vw - 300px)
        ) !important;

    width:
        min(
            720px,
            calc(100vw - 300px)
        ) !important;

    max-width:
        min(
            720px,
            calc(100vw - 300px)
        ) !important;

    min-width: 0 !important;

    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;

    transform: none !important;

    overflow: visible !important;

    pointer-events: none !important;

    z-index: 2 !important;
}

html body > header > h1.site-logo-title > img.site-title-logo {
    display: block !important;

    width:
        min(
            700px,
            calc(100vw - 320px)
        ) !important;

    max-width:
        min(
            700px,
            calc(100vw - 320px)
        ) !important;

    height: auto !important;

    max-height: none !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;

    transform: none !important;

    transform-origin: left center !important;

    filter:
        drop-shadow(
            0 3px 8px
            rgba(45, 34, 62, 0.16)
        ) !important;

    pointer-events: none !important;
}

/*
   画像がヘッダー高より少し大きくても、
   上下方向だけ視覚的にはみ出させる。
   レイアウト上のheader heightは増やさない。
*/
html body > header > h1.site-logo-title > img.site-title-logo {
    scale: 1.08 !important;
}


/* ------------------------------------------------------------
   2. Refresh / Settings
   完全同寸・同形状
   ------------------------------------------------------------ */

html body > header .refresh-button,
html body > header .desktop-settings-button {
    box-sizing: border-box !important;

    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    padding: 0 12px !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    border:
        1px solid
        rgba(214, 198, 226, 0.92) !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.94),
            rgba(249,246,252,0.86)
        ) !important;

    box-shadow:
        0 4px 12px
        rgba(57,43,73,0.10),
        inset 0 1px 0
        rgba(255,255,255,0.98) !important;

    color: #5d496a !important;

    cursor: pointer !important;

    pointer-events: auto !important;
}

html body > header .refresh-button:hover,
html body > header .desktop-settings-button:hover {
    border-color:
        rgba(185, 157, 207, 0.94) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(246,239,251,0.94)
        ) !important;

    transform:
        translateY(-1px) !important;
}

html body > header .refresh-icon,
html body > header .desktop-settings-icon {
    width: 23px !important;
    height: 23px !important;

    flex: 0 0 23px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    border-radius: 8px !important;

    background:
        rgba(239, 231, 247, 0.90) !important;
}

html body > header .refresh-text,
html body > header .desktop-settings-text {
    display: inline !important;

    margin: 0 !important;

    font-size: 11px !important;
    line-height: 1 !important;

    font-weight: 800 !important;

    white-space: nowrap !important;
}


/* ------------------------------------------------------------
   3. Footer readability
   ------------------------------------------------------------ */

body > footer .footer-left,
body > footer .footer-right {
    min-height: 26px !important;

    display: flex !important;
    align-items: center !important;
}

body > footer .footer-left {
    padding:
        4px 10px !important;

    border:
        1px solid
        rgba(255,255,255,0.62) !important;

    border-radius: 999px !important;

    background:
        rgba(255,255,255,0.66) !important;

    box-shadow:
        0 2px 8px
        rgba(54,42,68,0.06),
        inset 0 1px 0
        rgba(255,255,255,0.90) !important;

    color: #56465f !important;

    font-size: 11px !important;
    line-height: 1 !important;

    font-weight: 800 !important;

    text-shadow:
        0 1px 0
        rgba(255,255,255,0.88) !important;
}

body > footer .footer-update-label,
body > footer #footer-last-updated,
body > footer .footer-timezone {
    font-size: 11px !important;
    line-height: 1 !important;

    color: #56465f !important;

    opacity: 1 !important;
}

body > footer #footer-last-updated {
    font-weight: 900 !important;
}

body > footer .footer-fan-made {
    min-height: 26px !important;

    padding:
        4px 11px !important;

    border:
        1px solid
        rgba(255,255,255,0.64) !important;

    border-radius: 999px !important;

    background:
        rgba(255,255,255,0.66) !important;

    box-shadow:
        0 2px 8px
        rgba(54,42,68,0.06),
        inset 0 1px 0
        rgba(255,255,255,0.90) !important;

    color: #73596a !important;

    font-size: 11px !important;
    line-height: 1 !important;

    font-weight: 900 !important;

    text-shadow:
        0 1px 0
        rgba(255,255,255,0.88) !important;
}


/* ------------------------------------------------------------
   4. Weekday white circles
   日付番号と同系統の白丸
   ------------------------------------------------------------ */

body > main .weekdays > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
}

body > main .weekdays .weekday-label {
    width: 27px !important;
    height: 27px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border:
        1px solid
        rgba(225, 222, 229, 0.92) !important;

    border-radius: 50% !important;

    background:
        rgba(255,255,255,0.88) !important;

    box-shadow:
        0 2px 6px
        rgba(45,40,52,0.08),
        inset 0 1px 0
        rgba(255,255,255,0.96) !important;

    color: #34303a !important;

    font-size: 11px !important;
    line-height: 1 !important;

    font-weight: 900 !important;
}

body > main .weekdays .sunday .weekday-label {
    color: #e93d4e !important;
}

body > main .weekdays .saturday .weekday-label {
    color: #3779d3 !important;
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 1180px) and (min-width: 761px) {

    html body > header > h1.site-logo-title {
        flex-basis:
            min(
                570px,
                calc(100vw - 270px)
            ) !important;

        width:
            min(
                570px,
                calc(100vw - 270px)
            ) !important;
    }

    html body > header > h1.site-logo-title > img.site-title-logo {
        width:
            min(
                555px,
                calc(100vw - 285px)
            ) !important;

        max-width:
            min(
                555px,
                calc(100vw - 285px)
            ) !important;
    }
}

@media (max-width: 760px) {

    html body > header > h1.site-logo-title {
        flex-basis:
            calc(100vw - 100px) !important;

        width:
            calc(100vw - 100px) !important;
    }

    html body > header > h1.site-logo-title > img.site-title-logo {
        width:
            calc(100vw - 110px) !important;

        max-width:
            calc(100vw - 110px) !important;

        scale: 1 !important;
    }

    html body > header .refresh-button,
    html body > header .desktop-settings-button {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 0 !important;
    }

    html body > header .refresh-text,
    html body > header .desktop-settings-text {
        display: none !important;
    }

    body > footer .footer-left,
    body > footer .footer-fan-made,
    body > footer .footer-update-label,
    body > footer #footer-last-updated,
    body > footer .footer-timezone {
        font-size: 8px !important;
    }

    body > main .weekdays .weekday-label {
        width: 23px !important;
        height: 23px !important;

        font-size: 10px !important;
    }
}


/* ============================================================
   2026-08-22 v50
   TitleLogo fit fix
   ============================================================ */

html body > header {
    /*
       ロゴがメイン領域へ視覚的にはみ出さないようにする。
       ヘッダー自体の高さは変更しない。
    */
    overflow: hidden !important;
}

html body > header > h1.site-logo-title {
    height: 100% !important;

    align-items: center !important;

    overflow: hidden !important;
}

html body > header > h1.site-logo-title > img.site-title-logo {
    /*
       v49の横幅優先は維持するが、
       縦方向は必ず既存ヘッダー内に収める。
    */
    width:
        min(
            610px,
            calc(100vw - 320px)
        ) !important;

    max-width:
        min(
            610px,
            calc(100vw - 320px)
        ) !important;

    height: auto !important;

    max-height:
        calc(
            var(--app-header-h) - 8px
        ) !important;

    object-fit: contain !important;
    object-position: left center !important;

    /*
       v49で被りの直接原因になった拡大を解除。
    */
    scale: 1 !important;
    transform: none !important;

    margin: 0 !important;
}

/* 大画面では少しだけ横幅を増やすが、縦制限は維持 */
@media (min-width: 1500px) {

    html body > header > h1.site-logo-title > img.site-title-logo {
        width:
            min(
                650px,
                calc(100vw - 330px)
            ) !important;

        max-width:
            min(
                650px,
                calc(100vw - 330px)
            ) !important;

        max-height:
            calc(
                var(--app-header-h) - 8px
            ) !important;
    }
}

@media (max-width: 1180px) and (min-width: 761px) {

    html body > header > h1.site-logo-title > img.site-title-logo {
        width:
            min(
                520px,
                calc(100vw - 285px)
            ) !important;

        max-width:
            min(
                520px,
                calc(100vw - 285px)
            ) !important;

        max-height:
            calc(
                var(--app-header-h) - 8px
            ) !important;
    }
}


/* ============================================================
   2026-08-22 v50
   Settings popup front fix - corrected
   IMPORTANT:
   header/main fixed layout is preserved exactly.
   ============================================================ */

/*
   元のheaderはfixed。
   relativeへ変更するとmainの固定レイアウトが崩れるため、
   positionは必ずfixedのまま維持する。
*/
html body > header {
    position: fixed !important;

    overflow: visible !important;

    z-index: 10000 !important;
}

/*
   header全体ではなく、ロゴだけをクリップする。
*/
html body > header > .site-logo-title,
html body > header > h1.site-logo-title {
    overflow: hidden !important;
}

/*
   設定コントロールをheader内で前面化。
   positionはheaderのfixed配置には影響しない。
*/
html body > header > .desktop-settings-control {
    position: relative !important;

    overflow: visible !important;

    z-index: 11000 !important;

    pointer-events: auto !important;
}

html body > header #desktop-settings-button {
    position: relative !important;

    z-index: 11001 !important;

    pointer-events: auto !important;
}

/*
   設定ポップアップをheaderの下へ表示。
*/
html body > header #desktop-settings-popup {
    position: absolute !important;

    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;

    z-index: 50000 !important;

    overflow: visible !important;
}

html body > header #desktop-settings-popup.open {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
}

/*
   mainのposition / top / bottom / height / overflowには
   一切触れない。
*/

/*
   ヘッダー装飾・ロゴ画像がクリックを奪わない。
*/
html body > header::before,
html body > header::after,
html body > header .site-title-logo {
    pointer-events: none !important;
}


/* ============================================================
   v53 - Unified glass action panel
   更新 ｜ 設定
   ============================================================ */

/*
   右側の2操作を1つのガラスパネルとして見せる。
   親コンテナ同士は隙間をなくし、各buttonの外枠を消す。
*/

/* 更新側コンテナ */
html body > header > .live-fan-made {
    position: relative !important;

    margin-right: 0 !important;

    border:
        1px solid
        rgba(190, 211, 230, 0.82) !important;

    border-right: 0 !important;

    border-radius:
        15px 0 0 15px !important;

    background:
        linear-gradient(
            135deg,
            rgba(221, 243, 255, 0.72),
            rgba(255, 232, 244, 0.58)
        ) !important;

    box-shadow:
        0 4px 14px
        rgba(54, 64, 84, 0.10),
        inset 0 1px 0
        rgba(255,255,255,0.92) !important;

    backdrop-filter:
        blur(13px)
        saturate(1.08) !important;

    -webkit-backdrop-filter:
        blur(13px)
        saturate(1.08) !important;

    overflow: visible !important;

    pointer-events: none !important;
}

/* 設定側コンテナ */
html body > header > .desktop-settings-control {
    position: relative !important;

    margin-left: 0 !important;

    border:
        1px solid
        rgba(224, 194, 214, 0.82) !important;

    border-left:
        1px solid
        rgba(183, 176, 196, 0.28) !important;

    border-radius:
        0 15px 15px 0 !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 236, 246, 0.58),
            rgba(226, 244, 255, 0.72)
        ) !important;

    box-shadow:
        0 4px 14px
        rgba(54, 64, 84, 0.10),
        inset 0 1px 0
        rgba(255,255,255,0.92) !important;

    backdrop-filter:
        blur(13px)
        saturate(1.08) !important;

    -webkit-backdrop-filter:
        blur(13px)
        saturate(1.08) !important;

    overflow: visible !important;

    pointer-events: auto !important;
}

/*
   中央の区切り線。
   popupより下に置く。
*/
html body > header > .desktop-settings-control::before {
    content: "" !important;

    position: absolute !important;

    left: -1px !important;
    top: 9px !important;
    bottom: 9px !important;

    width: 1px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(128, 116, 142, 0.28) 28%,
            rgba(128, 116, 142, 0.28) 72%,
            transparent
        ) !important;

    pointer-events: none !important;

    z-index: 0 !important;
}

/*
   button自身は「一体型パネル内のクリック領域」なので
   独立カード風のborder / shadow / backgroundを消す。
*/
html body > header .refresh-button,
html body > header .header-refresh-button,
html body > header .desktop-settings-button {
    appearance: none !important;
    -webkit-appearance: none !important;

    box-sizing: border-box !important;

    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #554b61 !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    transition:
        background .16s ease,
        color .16s ease,
        transform .12s ease !important;
}

/* 左右の外形だけ親に合わせる */
html body > header .refresh-button,
html body > header .header-refresh-button {
    border-radius:
        14px 0 0 14px !important;
}

html body > header .desktop-settings-button {
    border-radius:
        0 14px 14px 0 !important;
}

/* hoverした側だけ明るく */
html body > header .refresh-button:hover,
html body > header .header-refresh-button:hover,
html body > header .desktop-settings-button:hover {
    background:
        rgba(255,255,255,0.54) !important;

    color: #493d55 !important;

    box-shadow: none !important;

    transform: none !important;
}

/* 押した側だけ少し沈む */
html body > header .refresh-button:active,
html body > header .header-refresh-button:active,
html body > header .desktop-settings-button:active {
    background:
        rgba(255,255,255,0.68) !important;

    transform:
        translateY(1px) !important;
}

/* キーボード操作時だけ控えめな内側ハイライト */
html body > header .refresh-button:focus,
html body > header .header-refresh-button:focus,
html body > header .desktop-settings-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

html body > header .refresh-button:focus-visible,
html body > header .desktop-settings-button:focus-visible {
    outline:
        2px solid
        rgba(150, 181, 211, 0.42) !important;

    outline-offset:
        -3px !important;
}

/* 旧デザインの疑似要素・リングを完全に除去 */
html body > header .refresh-button::before,
html body > header .refresh-button::after,
html body > header .header-refresh-button::before,
html body > header .header-refresh-button::after,
html body > header .desktop-settings-button::before,
html body > header .desktop-settings-button::after {
    content: none !important;
    display: none !important;
}

/* アイコンは小さな独立丸ではなく、そのまま配置 */
html body > header .refresh-icon,
html body > header .desktop-settings-icon {
    width: 22px !important;
    height: 22px !important;

    flex: 0 0 22px !important;

    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #685975 !important;
}

html body > header .refresh-text,
html body > header .desktop-settings-text {
    display: inline !important;

    margin: 0 !important;

    font-size: 11px !important;
    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: .02em !important;

    white-space: nowrap !important;
}

/*
   設定popupの前面表示修正は維持。
*/
html body > header #desktop-settings-popup {
    z-index: 50000 !important;
}

/*
   モバイルでは従来どおりアイコン中心の省スペース表示。
*/
@media (max-width: 760px) {

    html body > header .refresh-button,
    html body > header .header-refresh-button,
    html body > header .desktop-settings-button {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        padding: 0 !important;
    }

    html body > header .refresh-text,
    html body > header .desktop-settings-text {
        display: none !important;
    }
}


/* ============================================================
   v54 - True unified action panel
   [ 更新 | 設定 ]
   ============================================================ */

/*
   右側操作グループ全体の隙間をゼロ固定。
*/
html body > header {
    column-gap: 0 !important;
}

/*
   更新側親コンテナ。
   右端は直角、外周だけ角丸。
*/
html body > header > .live-fan-made {
    position: relative !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;

    border:
        1px solid
        rgba(190, 211, 230, 0.82) !important;

    border-right:
        0 !important;

    border-radius:
        15px 0 0 15px !important;

    background:
        linear-gradient(
            135deg,
            rgba(221, 243, 255, 0.72),
            rgba(255, 232, 244, 0.58)
        ) !important;

    box-shadow:
        0 4px 14px
        rgba(54, 64, 84, 0.10),
        inset 0 1px 0
        rgba(255,255,255,0.92) !important;

    overflow: visible !important;

    pointer-events: none !important;
}

/*
   設定側親コンテナ。
   左端は直角、更新側に完全接続。
*/
html body > header > .desktop-settings-control {
    position: relative !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px solid
        rgba(224, 194, 214, 0.82) !important;

    border-left:
        0 !important;

    border-radius:
        0 15px 15px 0 !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 236, 246, 0.58),
            rgba(226, 244, 255, 0.72)
        ) !important;

    box-shadow:
        0 4px 14px
        rgba(54, 64, 84, 0.10),
        inset 0 1px 0
        rgba(255,255,255,0.92) !important;

    overflow: visible !important;

    pointer-events: auto !important;
}

/*
   更新/設定の接合位置にだけ縦線。
*/
html body > header > .desktop-settings-control::before {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    top: 8px !important;
    bottom: 8px !important;

    width: 1px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(120, 113, 133, 0.26) 25%,
            rgba(120, 113, 133, 0.26) 75%,
            transparent
        ) !important;

    z-index: 2 !important;

    pointer-events: none !important;
}

/*
   button自身は同じサイズ。
   接合部側は角丸なし。
*/
html body > header .refresh-button,
html body > header .header-refresh-button,
html body > header .desktop-settings-button {
    box-sizing:
        border-box !important;

    width:
        94px !important;

    min-width:
        94px !important;

    max-width:
        94px !important;

    height:
        44px !important;

    min-height:
        44px !important;

    max-height:
        44px !important;

    margin:
        0 !important;

    padding:
        0 13px !important;

    border:
        0 !important;

    outline:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px !important;
}

html body > header .refresh-button,
html body > header .header-refresh-button {
    border-radius:
        14px 0 0 14px !important;
}

html body > header .desktop-settings-button {
    border-radius:
        0 14px 14px 0 !important;
}

/*
   hoverも各半分だけ。
*/
html body > header .refresh-button:hover,
html body > header .header-refresh-button:hover,
html body > header .desktop-settings-button:hover {
    background:
        rgba(255,255,255,0.50) !important;

    transform:
        none !important;
}

/*
   activeは少しだけ沈む。
*/
html body > header .refresh-button:active,
html body > header .header-refresh-button:active,
html body > header .desktop-settings-button:active {
    background:
        rgba(255,255,255,0.66) !important;

    transform:
        translateY(1px) !important;
}

/*
   過去の外枠/疑似要素を完全無効化。
*/
html body > header .refresh-button::before,
html body > header .refresh-button::after,
html body > header .header-refresh-button::before,
html body > header .header-refresh-button::after,
html body > header .desktop-settings-button::before,
html body > header .desktop-settings-button::after {
    content:
        none !important;

    display:
        none !important;
}

/*
   親同士の見た目の接合に隙間が出ないよう、
   設定側を1pxだけ左へ重ねる。
*/
html body > header > .desktop-settings-control {
    margin-left:
        -1px !important;
}

/*
   設定popupの前面表示は維持。
*/
html body > header #desktop-settings-popup {
    z-index:
        50000 !important;
}

@media (max-width: 760px) {

    html body > header .refresh-button,
    html body > header .header-refresh-button,
    html body > header .desktop-settings-button {
        width:
            42px !important;

        min-width:
            42px !important;

        max-width:
            42px !important;

        height:
            42px !important;

        min-height:
            42px !important;

        max-height:
            42px !important;

        padding:
            0 !important;
    }
}


/* ============================================================
   v55 - Header grid structure fix
   Explicit columns: LOGO | UPDATE | SETTINGS
   ============================================================ */

/*
   根本原因:
   headerは元々2列Gridだったが、直下要素は
   1. site-logo-title
   2. live-fan-made
   3. desktop-settings-control
   の3要素。
   設定が暗黙の3列目へ送られ、更新との間に余白が発生していた。

   3列を明示し、更新と設定の列間gapを0にする。
*/
html body > header {
    display: grid !important;

    grid-template-columns:
        minmax(250px, 1fr)
        auto
        auto !important;

    align-items: center !important;

    column-gap: 0 !important;
    row-gap: 0 !important;
}

/*
   ロゴと操作パネルの間だけ余白を作る。
   更新と設定の間には余白を作らない。
*/
html body > header > .live-fan-made {
    grid-column: 2 !important;

    justify-self: end !important;

    margin:
        0 0 0 20px !important;

    padding: 0 !important;

    gap: 0 !important;

    align-self: center !important;
}

html body > header > .desktop-settings-control {
    grid-column: 3 !important;

    justify-self: start !important;

    margin:
        0 !important;

    padding:
        0 !important;

    align-self: center !important;
}

/*
   theme-switcherは更新側コンテナ内に残っているが、
   実ボタンは設定メニュー経由なのでレイアウト幅を持たせない。
*/
html body > header > .live-fan-made > .theme-switcher {
    position: absolute !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

/*
   更新側と設定側を1px重ね、サブピクセルやborderによる
   白い隙間も出さない。
*/
html body > header > .desktop-settings-control {
    transform:
        translateX(-1px) !important;
}

/*
   見た目は1枚の外枠。
*/
html body > header > .live-fan-made {
    border:
        1px solid
        rgba(190, 211, 230, 0.82) !important;

    border-right:
        0 !important;

    border-radius:
        15px 0 0 15px !important;
}

html body > header > .desktop-settings-control {
    border:
        1px solid
        rgba(224, 194, 214, 0.82) !important;

    border-left:
        0 !important;

    border-radius:
        0 15px 15px 0 !important;
}

/* 中央区切り線だけ残す */
html body > header > .desktop-settings-control::before {
    left: 0 !important;
    top: 8px !important;
    bottom: 8px !important;

    width: 1px !important;
}

/*
   buttonの接合部側に独自角丸・borderを持たせない。
*/
html body > header .refresh-button,
html body > header .header-refresh-button {
    border-radius:
        14px 0 0 14px !important;
}

html body > header .desktop-settings-button {
    border-radius:
        0 14px 14px 0 !important;
}

/*
   スマホでも3列構造を維持。
   ロゴ→操作2ボタンの順。
*/
@media (max-width: 760px) {

    html body > header {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto !important;

        column-gap: 0 !important;
    }

    html body > header > .live-fan-made {
        margin-left:
            6px !important;
    }
}


/* ============================================================
   v56b - Theme popup explicit close button only
   ============================================================ */

#theme-switch-popup {
    position: relative;
}

#theme-popup-close-button {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;

    width: 28px !important;
    height: 28px !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(190, 180, 205, 0.75) !important;
    border-radius: 50% !important;

    background: rgba(255,255,255,0.92) !important;
    color: #62536e !important;

    font-size: 18px !important;
    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 10 !important;
}

#theme-popup-close-button:hover {
    background: rgba(248,241,252,0.98) !important;
}


/* ============================================================
   v57 - Mobile TitleLogo maximum fit
   Smartphone only
   ============================================================ */

@media (max-width: 760px) {

    /*
       ヘッダー高さは変更しない。
       ロゴ用コンテナだけ既存ヘッダー高をフルに使う。
    */
    html body > header > .site-logo-title,
    html body > header > h1.site-logo-title {
        height: 100% !important;

        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        overflow: hidden !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
       横長TitleLogoなので高さを基準に最大化する。
       上下2px程度の安全余白だけ残す。
       width:autoで縦横比は維持。
    */
    html body > header .site-title-logo,
    html body > header > h1.site-logo-title > img.site-title-logo {
        display: block !important;

        width: auto !important;
        height: calc(var(--app-header-h) - 4px) !important;

        max-width: calc(100vw - 92px) !important;
        max-height: calc(var(--app-header-h) - 4px) !important;

        object-fit: contain !important;
        object-position: left center !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        scale: 1 !important;

        transform-origin: left center !important;

        pointer-events: none !important;
    }

    /*
       更新・設定側のスペースを確保して
       ロゴが操作ボタンへ被らないようにする。
    */
    html body > header > .live-fan-made,
    html body > header > .desktop-settings-control {
        flex-shrink: 0 !important;
    }
}


/* ============================================================
   v58 - Mobile logo max fit + filter popup front layer
   ============================================================ */

@media (max-width: 760px) {

    /* --------------------------------------------------------
       1. TitleLogo: use the header more aggressively
       -------------------------------------------------------- */

    html body > header > .site-logo-title,
    html body > header > h1.site-logo-title {
        height: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        overflow: hidden !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
       v57はheader高-4pxだったため下側に見た目余白が残った。
       今回はheader高いっぱいを使い、さらに画像を少しだけ拡大。
       overflow:hiddenはロゴコンテナ側だけなので、
       ヘッダー外にはみ出さない。
    */
    html body > header .site-title-logo,
    html body > header > h1.site-logo-title > img.site-title-logo {
        display: block !important;

        width: auto !important;
        height: var(--app-header-h) !important;

        max-width: calc(100vw - 86px) !important;
        max-height: var(--app-header-h) !important;

        object-fit: contain !important;
        object-position: left center !important;

        margin: 0 !important;
        padding: 0 !important;

        transform:
            translateY(1px)
            scale(1.08) !important;

        transform-origin:
            left center !important;

        pointer-events: none !important;
    }

    /*
       右側操作ボタンとの干渉は防ぐ。
    */
    html body > header > .live-fan-made,
    html body > header > .desktop-settings-control {
        flex-shrink: 0 !important;
        z-index: 20 !important;
    }


    /* --------------------------------------------------------
       2. Calendar filter popup/front layer
       -------------------------------------------------------- */

    /*
       スマホではカレンダー側の設定UIを右パネルより上へ。
       カレンダー本体の高さや配置は変更しない。
    */
    html body > main .calendar-main-column,
    html body > main .calendar {
        position: relative !important;
        z-index: 100 !important;

        overflow: visible !important;
    }

    /*
       右側（スマホでは下側）の配信中/予定パネルは通常層へ。
    */
    html body > main .live-column,
    html body > main .live-status,
    html body > main .schedule-section {
        position: relative !important;
        z-index: 1 !important;
    }

    /*
       既存のフィルター/チャンネル設定ポップアップを
       まとめて最前面へ。
    */
    html body .filter-popup,
    html body .channel-filter-popup,
    html body .channel-filter-panel,
    html body .filter-panel,
    html body .filter-menu,
    html body .channel-filter-menu,
    html body #filter-popup,
    html body #channel-filter-popup,
    html body #channel-filter-panel,
    html body #filter-panel {
        position: absolute !important;

        z-index: 50000 !important;

        overflow: visible !important;
    }

    /*
       設定ボタン周辺の親要素もstacking contextを前面へ。
    */
    html body .calendar-filter,
    html body .channel-filter,
    html body .filter-controls,
    html body .calendar-controls {
        position: relative !important;
        z-index: 49999 !important;

        overflow: visible !important;
    }
}

@media (max-width: 760px) {
html body #channel-filter-button,
html body #channel-filter-clear-all,
html body #channel-filter-close,
html body #channel-filter-list,
html body #channel-filter-popup,
html body #channel-filter-select-all,
html body #favorite-filter-list,
html body #favorite-filter-name,
html body #favorite-filter-save-button,
html body .channel-filter-actions,
html body .channel-filter-button,
html body .channel-filter-close,
html body .channel-filter-list,
html body .channel-filter-popup-header,
html body .favorite-filter-list,
html body .favorite-filter-save,
html body .favorite-filter-section,
html body .favorite-filter-title,
html body .filter-icon,
html body .filter-text {
    position: relative !important;
    z-index: 50000 !important;
}
}


/* ============================================================
   v59
   Mobile TitleLogo crop/zoom + channel-filter real portal
   ============================================================ */

/* ------------------------------------------------------------
   Mobile TitleLogo
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    /*
       ロゴコンテナ自体はヘッダー内に固定。
       画像だけ大きくして透明余白を切り落として見せる。
    */
    html body > header > h1.site-logo-title,
    html body > header > .site-logo-title {
        position: relative !important;

        height: 100% !important;
        min-height: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        overflow: hidden !important;
    }

    /*
       「画像全体をヘッダーに収める」のをやめる。
       intrinsic canvasごと約1.4倍にし、
       コンテナからはみ出した透明余白をクリップする。
    */
    html body.theme-enabled > header .site-title-logo,
    html body > header > h1.site-logo-title > img.site-title-logo {
        display: block !important;

        width: auto !important;
        height: 142% !important;

        max-width: none !important;
        max-height: none !important;

        flex: 0 0 auto !important;

        object-fit: contain !important;
        object-position: left center !important;

        margin: 0 !important;
        padding: 0 !important;

        transform:
            translate(
                -2%,
                6%
            ) !important;

        transform-origin:
            left center !important;

        scale: 1 !important;

        pointer-events: none !important;
    }

    /*
       右側の更新/設定領域は縮めない。
       ロゴは自分のGridセル内だけでクリップされる。
    */
    html body > header > .live-fan-made,
    html body > header > .desktop-settings-control {
        position: relative !important;
        z-index: 20 !important;
    }
}


/* ------------------------------------------------------------
   Channel filter portal
   ------------------------------------------------------------ */

/*
   body直下へ移動したpopup。
   カレンダー/配信中/予定のstacking contextとは完全に独立。
*/
html body > #channel-filter-popup.channel-filter-popup-portal {
    position: fixed !important;

    top:
        var(
            --channel-filter-portal-top,
            80px
        ) !important;

    left:
        var(
            --channel-filter-portal-left,
            8px
        ) !important;

    right: auto !important;

    width:
        var(
            --channel-filter-portal-width,
            300px
        ) !important;

    max-width:
        calc(100vw - 16px) !important;

    max-height:
        calc(
            100dvh
            - var(
                --channel-filter-portal-top,
                80px
            )
            - 8px
        ) !important;

    padding: 12px !important;

    overflow: hidden !important;

    z-index: 60000 !important;

    box-sizing: border-box !important;

    transform:
        translateY(-6px) !important;
}

html body > #channel-filter-popup.channel-filter-popup-portal.open {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateY(0) !important;

    pointer-events: auto !important;
}

/*
   popup全体は固定し、中のチャンネル一覧だけスクロール。
*/
html body > #channel-filter-popup.channel-filter-popup-portal
.channel-filter-list {
    max-height:
        min(
            42dvh,
            330px
        ) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;
}

@media (max-width: 760px) {

    html body > #channel-filter-popup.channel-filter-popup-portal {
        width:
            var(
                --channel-filter-portal-width
            ) !important;

        max-width:
            calc(100vw - 16px) !important;

        z-index: 60000 !important;
    }

    html body > #channel-filter-popup.channel-filter-popup-portal
    .channel-filter-list {
        max-height:
            min(
                45dvh,
                360px
            ) !important;
    }
}


/* ============================================================
   v60
   Mobile header logo + calendar filter button position fix
   ============================================================ */

@media (max-width: 760px) {

    /* --------------------------------------------------------
       1. TitleLogo
       v59の142%クロップは文字自体を切ってしまったため撤回。
       ロゴ全体を必ず見せつつ、既存の透明余白をできるだけ詰める。
       -------------------------------------------------------- */

    html body > header > h1.site-logo-title,
    html body > header > .site-logo-title {
        position: relative !important;

        height: 100% !important;
        min-height: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    html body.theme-enabled > header .site-title-logo,
    html body > header > h1.site-logo-title > img.site-title-logo {
        /*
           全体表示優先。
           height:auto + width基準にして「すぺしゃりて」全体を残す。
        */
        width:
            min(
                430px,
                calc(100vw - 92px)
            ) !important;

        height: auto !important;

        max-width:
            min(
                430px,
                calc(100vw - 92px)
            ) !important;

        max-height:
            calc(
                var(--app-header-h) + 10px
            ) !important;

        object-fit: contain !important;
        object-position: left center !important;

        margin: 0 !important;
        padding: 0 !important;

        /*
           透明余白の見た目だけ少し詰める。
           v59のscale/142%は完全に解除。
        */
        transform:
            translate(
                -2px,
                3px
            ) !important;

        scale: 1 !important;

        transform-origin:
            left center !important;

        pointer-events: none !important;
    }


    /* --------------------------------------------------------
       2. Calendar filter button
       月移動ボタンとは別の行/位置へ逃がす。
       -------------------------------------------------------- */

    /*
       カレンダーヘッダー/操作部はfilterボタン用の余白を確保。
    */
    html body > main .calendar-header,
    html body > main .calendar-controls,
    html body > main .calendar-toolbar {
        position: relative !important;

        overflow: visible !important;
    }

    /*
       チャンネルフィルターボタンを右上の月送りボタン領域から外し、
       カレンダー左上側へ独立配置する。
    */
    html body > main #channel-filter-button,
    html body > main .channel-filter-button {
        position: absolute !important;

        left: 8px !important;
        right: auto !important;

        top: 48px !important;

        z-index: 300 !important;

        margin: 0 !important;

        transform: none !important;
    }

    /*
       フィルターボタンが2段目へ来る分だけ、
       曜日行との間に必要な余白を確保。
       カレンダー全体の高さは変えず、内部の上余白だけ調整。
    */
    html body > main .weekdays {
        margin-top: 38px !important;
    }

    /*
       月移動ナビは右側をそのまま自由に使える。
    */
    html body > main .calendar-navigation,
    html body > main .month-navigation,
    html body > main .calendar-nav {
        position: relative !important;

        z-index: 100 !important;
    }

    html body > main .calendar-navigation button,
    html body > main .month-navigation button,
    html body > main .calendar-nav button {
        position: relative !important;

        z-index: 110 !important;
    }


    /* --------------------------------------------------------
       3. Filter popup portal
       v59のportal方式は維持。
       -------------------------------------------------------- */

    html body > #channel-filter-popup.channel-filter-popup-portal {
        z-index: 60000 !important;
    }
}


/* ============================================================
   v61
   Mobile logo full visibility + filter dedicated row
   ============================================================ */

@media (max-width: 760px) {

    /* --------------------------------------------------------
       1. TitleLogo
       全体表示を最優先。切り抜き・scale・translateを完全解除。
       -------------------------------------------------------- */

    html body > header > h1.site-logo-title,
    html body > header > .site-logo-title {
        position: relative !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    html body.theme-enabled > header .site-title-logo,
    html body > header .site-title-logo,
    html body > header > h1.site-logo-title > img.site-title-logo {
        display: block !important;

        /*
           横幅を基準にする。
           更新/設定ボタン分を確実に残しながら、
           ロゴ全体が必ず見えるサイズにする。
        */
        width: calc(100vw - 104px) !important;
        max-width: calc(100vw - 104px) !important;

        height: auto !important;
        max-height: calc(var(--app-header-h) - 2px) !important;

        object-fit: contain !important;
        object-position: left center !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        scale: 1 !important;

        clip-path: none !important;

        pointer-events: none !important;
    }


    /* --------------------------------------------------------
       2. Calendar header
       月移動ナビ + フィルター専用行
       -------------------------------------------------------- */

    html body > main .calendar-header {
        position: relative !important;

        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;

        row-gap: 6px !important;

        overflow: visible !important;
    }

    /*
       月切替は1段目。
    */
    html body > main .calendar-header > .calendar-month-nav {
        grid-row: 1 !important;
        grid-column: 1 !important;

        position: relative !important;

        width: 100% !important;

        margin: 0 !important;

        z-index: 10 !important;
    }

    /*
       フィルターボタンは2段目。
       月移動ボタンの下に「重なる」のではなく、
       独立した専用行として配置。
    */
    html body > main .calendar-header > #channel-filter-button,
    html body > main .calendar-header > .channel-filter-button {
        grid-row: 2 !important;
        grid-column: 1 !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        justify-self: start !important;

        margin: 0 !important;

        transform: none !important;

        z-index: 20 !important;
    }

    /*
       v60で入れた曜日行の余分な押し下げを解除。
       gridの2段構成で自然に下へ配置される。
    */
    html body > main .weekdays {
        margin-top: 0 !important;
    }

    /*
       popup本体はv59からのbody portalをそのまま利用。
    */
    html body > #channel-filter-popup.channel-filter-popup-portal {
        z-index: 60000 !important;
    }
}


/* ============================================================
   v62
   Mobile filter row spacing fix only
   TitleLogo remains exactly as v61.
   ============================================================ */

@media (max-width: 760px) {

    /*
       v61でcalendar-headerを2段Gridにしたが、
       過去CSSの固定height/min-heightが残っていたため
       2段目のフィルターボタンが曜日行へ重なっていた。

       高さをautoへ戻し、2段分を内容として確保する。
    */
    html body > main .calendar-header {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 36px 34px !important;

        row-gap: 7px !important;

        align-items: center !important;

        padding-bottom: 7px !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /*
       1段目：月切替
    */
    html body > main .calendar-header > .calendar-month-nav {
        grid-row: 1 !important;
        grid-column: 1 !important;

        height: 36px !important;
        min-height: 36px !important;

        margin: 0 !important;

        align-self: center !important;
    }

    /*
       2段目：フィルター専用。
       absolute指定を完全に解除。
    */
    html body > main .calendar-header > #channel-filter-button,
    html body > main .calendar-header > .channel-filter-button {
        grid-row: 2 !important;
        grid-column: 1 !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        justify-self: start !important;
        align-self: center !important;

        height: 32px !important;
        min-height: 32px !important;

        margin: 0 !important;

        transform: none !important;

        z-index: 20 !important;
    }

    /*
       曜日行はcalendar-headerの通常フローの後に続く。
       手動の負margin/上移動を打ち消す。
    */
    html body > main .weekdays {
        position: relative !important;

        top: auto !important;

        margin-top: 0 !important;

        transform: none !important;

        z-index: 1 !important;
    }
}


/* ============================================================
   v63
   Mobile calendar header: 2 rows, filter aligned right
   ============================================================ */

@media screen and (max-width: 760px) {

    /*
       1段目=月切替、2段目=フィルター。
       過去のheight/position/flex指定をすべてここで確定する。
    */
    html body > main .calendar-decoration-stage
    .calendar-layout
    .calendar-main-column
    section.calendar
    > .calendar-header {
        position: relative !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 38px 34px !important;

        width: 100% !important;

        height: 86px !important;
        min-height: 86px !important;
        max-height: 86px !important;

        row-gap: 7px !important;

        align-items: center !important;

        margin: 0 !important;
        padding: 0 8px 7px 8px !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /*
       1段目: 月切替。
    */
    html body > main .calendar-decoration-stage
    .calendar-layout
    .calendar-main-column
    section.calendar
    > .calendar-header
    > .calendar-month-nav {
        position: relative !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: center !important;
        justify-self: stretch !important;

        transform: none !important;

        z-index: 10 !important;
    }

    /*
       2段目: フィルターを右寄せ。
       absolute/fixed指定は完全に解除。
    */
    html body > main .calendar-decoration-stage
    .calendar-layout
    .calendar-main-column
    section.calendar
    > .calendar-header
    > button#channel-filter-button.channel-filter-button {
        position: relative !important;

        grid-column: 1 !important;
        grid-row: 2 !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        justify-self: end !important;
        align-self: center !important;

        width: auto !important;
        min-width: 88px !important;
        max-width: none !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;

        margin: 0 !important;
        padding: 0 11px !important;

        transform: none !important;

        z-index: 20 !important;
    }

    /*
       曜日は必ずcalendar-headerの次の通常フローに置く。
    */
    html body > main .calendar-decoration-stage
    .calendar-layout
    .calendar-main-column
    section.calendar
    > .weekdays {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        margin-top: 0 !important;

        transform: none !important;

        z-index: 1 !important;
    }

    /*
       既存のスマホ用フィルター位置指定を無効化。
    */
    html body > main #channel-filter-button {
        float: none !important;
    }
}


/* ============================================================
   v64
   Mobile calendar: highlight dates with streams
   ============================================================ */

@media screen and (max-width: 760px) {

    /*
       配信予定・配信情報が1件以上ある日は、
       通常の白丸を淡い黄色へ変更。
       PC版のアイコン表示には影響しない。
    */
    html body > main
    .calendar-day.has-schedule
    > .day-number {
        background:
            rgba(255, 231, 115, 0.94) !important;

        border-color:
            rgba(224, 190, 58, 0.72) !important;

        box-shadow:
            0 2px 7px
            rgba(178, 137, 24, 0.16),
            inset 0 1px 0
            rgba(255, 255, 255, 0.72) !important;
    }

    /*
       今日 + 配信ありでも黄色を優先しつつ、
       今日であることは外周リングで残す。
    */
    html body > main
    .calendar-day.today.has-schedule
    > .day-number {
        background:
            rgba(255, 226, 92, 0.98) !important;

        border-color:
            rgba(207, 165, 27, 0.90) !important;

        box-shadow:
            0 0 0 2px
            rgba(255, 255, 255, 0.86),
            0 0 0 4px
            rgba(238, 191, 43, 0.38),
            inset 0 1px 0
            rgba(255, 255, 255, 0.72) !important;
    }
}


/* ============================================================
   v65
   Live / schedule card unified information order and thumbnails
   Order: icon | channel | time | title | thumbnail
   ============================================================ */

/* ---------- shared text order ---------- */

body > main #live-list .live-channel-name {
    order: 1 !important;
}

body > main #live-list .live-channel-time {
    order: 2 !important;
}

body > main #live-list .live-channel-title {
    order: 3 !important;
}

body > main #schedule-list .channel-name {
    order: 1 !important;
}

body > main #schedule-list .schedule-time {
    order: 2 !important;
}

body > main #schedule-list .schedule-title {
    order: 3 !important;
}


/* ---------- schedule YouTube PNG frame ---------- */

body > main #schedule-list
.schedule-item-youtube
.schedule-thumbnail-link {
    outline: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body > main #schedule-list
.schedule-thumbnail-frame {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;

    background: transparent !important;
}

body > main #schedule-list
.schedule-thumbnail-frame-youtube
.thumbnail {
    position: absolute !important;

    left: 6.380208% !important;
    top: 16.601563% !important;

    width: 88.085938% !important;
    height: 67.871094% !important;

    max-width: none !important;

    object-fit: cover !important;

    border-radius: 0 !important;

    z-index: 1 !important;
}

body > main #schedule-list
.schedule-thumbnail-overlay {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: fill !important;

    pointer-events: none !important;

    z-index: 2 !important;
}


/* ---------- desktop ---------- */

@media (min-width: 761px) {

    /*
       Both panels use the same thumbnail column.
       Slightly narrower than v64 and shifted left by the grid itself,
       preventing the live thumbnail's right edge from being clipped.
    */
    :root {
        --right-thumb-w-v65: 108px;
    }

    body > main #live-list .live-channel,
    body > main #schedule-list .schedule-item {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            var(--right-thumb-w-v65) !important;

        column-gap: 7px !important;

        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    body > main #live-list .live-channel {
        grid-template-rows:
            auto
            auto
            minmax(0, 1fr) !important;
    }

    body > main #live-list .live-channel-icon,
    body > main #schedule-list .schedule-channel-icon {
        grid-column: 1 !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    body > main #live-list .live-channel-icon {
        grid-row: 1 / 4 !important;
    }

    body > main #live-list .live-channel-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body > main #live-list .live-channel-time {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    body > main #live-list .live-channel-title {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    body > main #live-list .live-thumbnail-link,
    body > main #schedule-list .schedule-thumbnail-link {
        grid-column: 3 !important;

        width: var(--right-thumb-w-v65) !important;
        min-width: var(--right-thumb-w-v65) !important;

        aspect-ratio: 16 / 9 !important;

        justify-self: start !important;
        align-self: center !important;

        overflow: hidden !important;
    }

    body > main #live-list .live-thumbnail-link {
        grid-row: 1 / 4 !important;
    }

    body > main #live-list .live-thumbnail-frame,
    body > main #schedule-list .schedule-thumbnail-frame {
        width: 100% !important;
        height: 100% !important;
    }

    /*
       Keep the scheduled panel aligned with the live panel.
    */
    body > main #schedule-list .schedule-info {
        grid-column: 2 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        gap: 1px !important;
    }
}


/* ---------- smartphone ---------- */

@media (max-width: 760px) {

    /*
       Live and schedule now share exactly the same 3-column geometry,
       so their thumbnail positions cannot drift apart.
    */
    body > main #live-list .live-channel,
    body > main #schedule-list .schedule-item {
        display: grid !important;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            96px !important;

        grid-template-rows:
            auto
            auto
            minmax(0, 1fr) !important;

        column-gap: 7px !important;
        row-gap: 1px !important;

        align-items: center !important;

        padding: 7px !important;
    }

    body > main #live-list .live-channel-icon,
    body > main #schedule-list .schedule-channel-icon {
        grid-column: 1 !important;
        grid-row: 1 / 4 !important;

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        align-self: center !important;
    }

    body > main #live-list .live-channel-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body > main #live-list .live-channel-time {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    body > main #live-list .live-channel-title {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    body > main #schedule-list .schedule-info {
        grid-column: 2 !important;
        grid-row: 1 / 4 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        gap: 1px !important;
    }

    body > main #live-list .live-thumbnail-link,
    body > main #schedule-list .schedule-thumbnail-link {
        grid-column: 3 !important;
        grid-row: 1 / 4 !important;

        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;

        height: auto !important;

        aspect-ratio: 16 / 9 !important;

        justify-self: end !important;
        align-self: center !important;

        overflow: hidden !important;

        border-radius: 8px !important;
    }

    body > main #live-list .live-thumbnail-frame,
    body > main #schedule-list .schedule-thumbnail-frame {
        width: 100% !important;
        height: 100% !important;

        aspect-ratio: 16 / 9 !important;
    }
}


/* ============================================================
   v66
   Larger live/schedule thumbnails
   - keep live/schedule aligned
   - allow titles up to 2 lines
   ============================================================ */

/* ------------------------------------------------------------
   Shared title behavior
   ------------------------------------------------------------ */

body > main #live-list .live-channel-title,
body > main #schedule-list .schedule-title {
    white-space: normal !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ------------------------------------------------------------
   Desktop
   ------------------------------------------------------------ */

@media (min-width: 761px) {

    /*
       v65: 108px
       v66: 132px

       YouTubeフレーム内の実サムネイル領域は
       外枠より小さいため、外側を少し大きめにする。
    */
    :root {
        --right-thumb-w-v65: 132px !important;
    }

    body > main #live-list .live-channel,
    body > main #schedule-list .schedule-item {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            132px !important;

        column-gap: 6px !important;

        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body > main #live-list .live-channel-icon,
    body > main #schedule-list .schedule-channel-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    body > main #live-list .live-thumbnail-link,
    body > main #schedule-list .schedule-thumbnail-link {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;

        justify-self: start !important;
    }

    body > main #live-list .live-channel-name,
    body > main #schedule-list .channel-name {
        font-size: 10px !important;
        line-height: 1.12 !important;
    }

    body > main #live-list .live-channel-time,
    body > main #schedule-list .schedule-time {
        font-size: 11px !important;
        line-height: 1.12 !important;
    }

    body > main #live-list .live-channel-title,
    body > main #schedule-list .schedule-title {
        font-size: 10px !important;
        line-height: 1.22 !important;

        -webkit-line-clamp: 2 !important;
    }
}


/* ------------------------------------------------------------
   Smartphone
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    /*
       v65: 96px
       v66: 112px

       配信中と予定で完全に同じ幅・位置。
    */
    body > main #live-list .live-channel,
    body > main #schedule-list .schedule-item {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            112px !important;

        column-gap: 6px !important;

        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body > main #live-list .live-channel-icon,
    body > main #schedule-list .schedule-channel-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    body > main #live-list .live-thumbnail-link,
    body > main #schedule-list .schedule-thumbnail-link {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;

        justify-self: end !important;
    }

    body > main #live-list .live-channel-title,
    body > main #schedule-list .schedule-title {
        -webkit-line-clamp: 2 !important;
        line-height: 1.22 !important;
    }
}


/* ============================================================
   v67
   Desktop live / schedule typography enlargement only
   Smartphone remains unchanged from v66.
   ============================================================ */

@media (min-width: 761px) {

    /* チャンネル名 */
    body > main #live-list .live-channel-name,
    body > main #schedule-list .channel-name {
        font-size: 12px !important;
        line-height: 1.18 !important;
    }

    /* 開始時間 / 予定時間 */
    body > main #live-list .live-channel-time,
    body > main #schedule-list .schedule-time {
        font-size: 13px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    /* 配信タイトル */
    body > main #live-list .live-channel-title,
    body > main #schedule-list .schedule-title {
        font-size: 12px !important;
        line-height: 1.28 !important;

        white-space: normal !important;

        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}


/* ============================================================
   v69
   Thumbnail rendering rebuild
   16:9 thumbnail is the base; PNG frame is decoration only.
   ============================================================ */

/* ------------------------------------------------------------
   Shared outer thumbnail box
   ------------------------------------------------------------ */

body > main #live-list .live-thumbnail-link,
body > main #schedule-list .schedule-thumbnail-link {
    position: relative !important;

    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;

    background: #000 !important;

    border-radius: 8px !important;

    isolation: isolate !important;
}


/* ------------------------------------------------------------
   LIVE: frame container becomes a transparent overlay host
   ------------------------------------------------------------ */

body > main #live-list .live-thumbnail-frame {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;

    background: #000 !important;

    border-radius: inherit !important;
}


/*
   The actual image now fills the whole 16:9 thumbnail box.
   Old frame-hole percentages are completely overridden.
*/
body > main #live-list
.live-thumbnail-frame-youtube
.live-thumbnail,
body > main #live-list
.live-thumbnail-frame-twitch
.live-thumbnail,
body > main #live-list
.live-thumbnail-frame
.live-thumbnail {
    position: absolute !important;

    inset: 0 !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 0 !important;

    transform: none !important;

    z-index: 1 !important;
}


/*
   Frame PNG is decorative only.
   Because source frame is 3:2 and thumbnail is 16:9,
   use contain so the PNG itself is never stretched.
   Transparent parts do not affect thumbnail geometry.
*/
body > main #live-list .live-thumbnail-overlay {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    pointer-events: none !important;

    user-select: none !important;

    z-index: 2 !important;
}


/* ------------------------------------------------------------
   SCHEDULE: same rendering structure as LIVE
   ------------------------------------------------------------ */

body > main #schedule-list
.schedule-thumbnail-frame {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;

    background: #000 !important;

    border-radius: inherit !important;
}


/*
   YouTube schedule image also fills the full 16:9 base.
   This overrides v65's 6.38%/16.60% frame-hole placement.
*/
body > main #schedule-list
.schedule-thumbnail-frame-youtube
.thumbnail,
body > main #schedule-list
.schedule-thumbnail-frame
.thumbnail {
    position: absolute !important;

    inset: 0 !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 0 !important;

    transform: none !important;

    z-index: 1 !important;
}


body > main #schedule-list
.schedule-thumbnail-overlay {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    pointer-events: none !important;

    user-select: none !important;

    z-index: 2 !important;
}


/* ------------------------------------------------------------
   Twitch schedule thumbnails have no PNG frame.
   Keep normal full 16:9 rendering.
   ------------------------------------------------------------ */

body > main #schedule-list
.schedule-item-twitch
.schedule-thumbnail-link
> .thumbnail {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 0 !important;
}


/* ------------------------------------------------------------
   Hover: do not zoom image, which can make it look softer.
   Use opacity only.
   ------------------------------------------------------------ */

body > main #live-list
.live-thumbnail-link:hover
.live-thumbnail,
body > main #schedule-list
.schedule-thumbnail-link:hover
.thumbnail {
    transform: none !important;

    opacity: 0.92 !important;
}


/* ------------------------------------------------------------
   Image rendering
   Let browser use normal high-quality resampling.
   No pixelated/crisp-edges modes.
   ------------------------------------------------------------ */

body > main #live-list .live-thumbnail,
body > main #schedule-list .thumbnail {
    image-rendering: auto !important;
}


/* ============================================================
   v70
   High-quality frame fitting
   Keep thumbnail at full 16:9 render size and clip only the
   visible area to the PNG frame opening.
   ============================================================ */

/*
   Important:
   - v69 quality improvement is retained.
   - The thumbnail image itself remains full-size.
   - It is NOT resized down into the frame hole.
   - clip-path only hides the parts behind/outside the opening.
   - Frame PNG is stretched to the same outer 16:9 box, so the
     measured opening percentages align with the clipping area.
*/


/* ------------------------------------------------------------
   LIVE / YouTube
   Frame source measured opening:
   X = 6.380208%
   Y = 16.601563%
   W = 88.085938%
   H = 67.871094%

   Right inset  = 100 - X - W = 5.533854%
   Bottom inset = 100 - Y - H = 15.527343%
   ------------------------------------------------------------ */

body > main #live-list
.live-thumbnail-frame-youtube
.live-thumbnail {
    position: absolute !important;

    inset: 0 !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    /*
       Full-size image remains rendered.
       Only visibility is clipped to the frame opening.
    */
    clip-path:
        inset(
            16.601563%
            5.533854%
            15.527343%
            6.380208%
        ) !important;

    -webkit-clip-path:
        inset(
            16.601563%
            5.533854%
            15.527343%
            6.380208%
        ) !important;

    transform: none !important;

    z-index: 1 !important;
}


/* ------------------------------------------------------------
   LIVE / Twitch
   X = 5.208333%
   Y = 13.769531%
   W = 89.583333%
   H = 70.800781%

   Right inset  = 5.208334%
   Bottom inset = 15.429688%
   ------------------------------------------------------------ */

body > main #live-list
.live-thumbnail-frame-twitch
.live-thumbnail {
    position: absolute !important;

    inset: 0 !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    clip-path:
        inset(
            13.769531%
            5.208334%
            15.429688%
            5.208333%
        ) !important;

    -webkit-clip-path:
        inset(
            13.769531%
            5.208334%
            15.429688%
            5.208333%
        ) !important;

    transform: none !important;

    z-index: 1 !important;
}


/* ------------------------------------------------------------
   SCHEDULE / YouTube
   Same YouTube frame opening as LIVE.
   ------------------------------------------------------------ */

body > main #schedule-list
.schedule-thumbnail-frame-youtube
.thumbnail {
    position: absolute !important;

    inset: 0 !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    clip-path:
        inset(
            16.601563%
            5.533854%
            15.527343%
            6.380208%
        ) !important;

    -webkit-clip-path:
        inset(
            16.601563%
            5.533854%
            15.527343%
            6.380208%
        ) !important;

    transform: none !important;

    z-index: 1 !important;
}


/* ------------------------------------------------------------
   Frame PNG
   Stretch overlay to the exact same outer 16:9 box.
   Since clipping uses the same source-frame percentages,
   the frame opening and thumbnail visibility now align.
   ------------------------------------------------------------ */

body > main #live-list
.live-thumbnail-overlay,
body > main #schedule-list
.schedule-thumbnail-overlay {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    /*
       Deliberately fill the same box.
       Do not use contain here, otherwise the source 3:2 frame
       gets letterboxed inside the 16:9 thumbnail and the opening
       percentages no longer line up.
    */
    object-fit: fill !important;
    object-position: center center !important;

    pointer-events: none !important;

    z-index: 2 !important;
}


/* ------------------------------------------------------------
   Preserve v69 quality behavior
   ------------------------------------------------------------ */

body > main #live-list
.live-thumbnail-frame
.live-thumbnail,
body > main #schedule-list
.schedule-thumbnail-frame
.thumbnail {
    image-rendering: auto !important;
}


/*
   Hover does not scale/resample the image.
*/
body > main #live-list
.live-thumbnail-link:hover
.live-thumbnail,
body > main #schedule-list
.schedule-thumbnail-link:hover
.thumbnail {
    transform: none !important;

    opacity: 0.94 !important;
}


/* ============================================================
   v71
   Maximize visible thumbnail area inside PNG frames
   Keep v70 full-size rendering / quality improvements.
   ============================================================ */

/*
   v70 used the conservative measured frame opening.
   v71 expands the visible thumbnail underneath the frame itself
   so as little image as possible is hidden.

   The image is still rendered at full 16:9 size.
   Only clip-path is loosened.
*/


/* ------------------------------------------------------------
   YouTube
   v70:
     top    16.60%
     right   5.53%
     bottom 15.53%
     left    6.38%

   v71:
     top    10.5%
     right   2.5%
     bottom  9.5%
     left    2.5%
   ------------------------------------------------------------ */

body > main #live-list
.live-thumbnail-frame-youtube
.live-thumbnail,
body > main #schedule-list
.schedule-thumbnail-frame-youtube
.thumbnail {
    clip-path:
        inset(
            10.5%
            2.5%
            9.5%
            2.5%
        ) !important;

    -webkit-clip-path:
        inset(
            10.5%
            2.5%
            9.5%
            2.5%
        ) !important;
}


/* ------------------------------------------------------------
   Twitch
   v70:
     top    13.77%
     right   5.21%
     bottom 15.43%
     left    5.21%

   v71:
     top     9.0%
     right   2.2%
     bottom 10.0%
     left    2.2%
   ------------------------------------------------------------ */

body > main #live-list
.live-thumbnail-frame-twitch
.live-thumbnail {
    clip-path:
        inset(
            9%
            2.2%
            10%
            2.2%
        ) !important;

    -webkit-clip-path:
        inset(
            9%
            2.2%
            10%
            2.2%
        ) !important;
}


/*
   Keep the frame overlay itself unchanged.
   It sits above the enlarged visible image and naturally hides
   only the portions covered by the actual PNG artwork.
*/
body > main #live-list
.live-thumbnail-overlay,
body > main #schedule-list
.schedule-thumbnail-overlay {
    object-fit: fill !important;
}


/*
   Do not reintroduce any scaling/resampling on hover.
*/
body > main #live-list
.live-thumbnail-link:hover
.live-thumbnail,
body > main #schedule-list
.schedule-thumbnail-link:hover
.thumbnail {
    transform: none !important;
}


/*
   Preserve normal high-quality browser interpolation.
*/
body > main #live-list .live-thumbnail,
body > main #schedule-list .thumbnail {
    image-rendering: auto !important;
}


/* ============================================================
   v72
   Decorative PNG frame + independent platform label
   ============================================================ */

/* Thumbnail itself uses almost the complete 16:9 box. */
body > main #live-list .live-thumbnail-frame .live-thumbnail,
body > main #schedule-list .schedule-thumbnail-frame .thumbnail {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    clip-path: inset(2.5%) !important;
    -webkit-clip-path: inset(2.5%) !important;
    transform: none !important;
    image-rendering: auto !important;
    z-index: 1 !important;
}

/* Decorative PNG only: center/large logos were removed from the generated assets. */
body > main #live-list .live-thumbnail-overlay,
body > main #schedule-list .schedule-thumbnail-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    object-position: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Independent platform label */
body > main .thumbnail-platform-label {
    position: absolute !important;
    top: 4px !important;
    left: 5px !important;
    z-index: 4 !important;

    height: 18px !important;
    padding: 0 7px 0 4px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;

    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,.40) !important;

    color: #fff !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;

    box-shadow:
        0 2px 6px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.15) !important;

    pointer-events: none !important;
}

body > main .thumbnail-platform-label-youtube {
    background:
        linear-gradient(180deg, rgba(34,34,37,.97), rgba(7,7,9,.97)) !important;
}

body > main .thumbnail-platform-label-twitch {
    background:
        linear-gradient(180deg, rgba(83,42,151,.98), rgba(37,18,72,.98)) !important;
}

body > main .thumbnail-platform-mark {
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
}

/* YouTube play mark */
body > main .thumbnail-platform-label-youtube .thumbnail-platform-mark {
    width: 17px !important;
    height: 11px !important;
    border-radius: 3px !important;
    background: #ff0033 !important;
}

body > main .thumbnail-platform-label-youtube .thumbnail-platform-mark::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 3px solid transparent !important;
    border-bottom: 3px solid transparent !important;
    border-left: 5px solid #fff !important;
    transform: translate(-38%,-50%) !important;
}

/* Compact Twitch-style chat mark */
body > main .thumbnail-platform-label-twitch .thumbnail-platform-mark {
    width: 13px !important;
    height: 13px !important;
    border-radius: 3px 3px 3px 1px !important;
    background: #9146ff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.95) !important;
}

body > main .thumbnail-platform-label-twitch .thumbnail-platform-mark::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;
    width: 2px !important;
    height: 5px !important;
    background: #fff !important;
    box-shadow: 4px 0 0 #fff !important;
}

@media (max-width: 760px) {
    body > main .thumbnail-platform-label {
        top: 3px !important;
        left: 4px !important;
        height: 16px !important;
        padding: 0 5px 0 3px !important;
        gap: 3px !important;
        font-size: 8px !important;
    }

    body > main .thumbnail-platform-label-youtube .thumbnail-platform-mark {
        width: 15px !important;
        height: 10px !important;
    }

    body > main .thumbnail-platform-label-twitch .thumbnail-platform-mark {
        width: 12px !important;
        height: 12px !important;
    }
}

/* No hover scaling: preserve sharpness. */
body > main #live-list .live-thumbnail-link:hover .live-thumbnail,
body > main #schedule-list .schedule-thumbnail-link:hover .thumbnail {
    transform: none !important;
}


/* ============================================================
   v73
   Original PNG frame outside the thumbnail
   - original Youtube_frame.png / Twitch_frame.png
   - no independent platform label
   - thumbnail stays full 16:9 / high-quality
   ============================================================ */

/* ------------------------------------------------------------
   Base thumbnail
   ------------------------------------------------------------ */

body > main #live-list .live-thumbnail-link,
body > main #schedule-list .schedule-thumbnail-link {
    position: relative !important;

    overflow: visible !important;

    background: transparent !important;

    isolation: isolate !important;
}

body > main #live-list .live-thumbnail-frame,
body > main #schedule-list .schedule-thumbnail-frame {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    aspect-ratio: 16 / 9 !important;

    overflow: visible !important;

    background: transparent !important;
}

/*
   Thumbnail itself remains the full current 16:9 area.
   No clip, no inset, no shrink.
*/
body > main #live-list
.live-thumbnail-frame
.live-thumbnail,
body > main #schedule-list
.schedule-thumbnail-frame
.thumbnail {
    position: absolute !important;

    inset: 0 !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    border-radius: 6px !important;

    transform: none !important;

    image-rendering: auto !important;

    z-index: 1 !important;
}


/* ------------------------------------------------------------
   YouTube original frame
   Original measured transparent opening:
     X = 6.380208%
     Y = 16.601563%
     W = 88.085938%
     H = 67.871094%

   The frame itself is enlarged so that the transparent opening
   matches the entire 16:9 thumbnail box.
   ------------------------------------------------------------ */

body > main #live-list
.live-thumbnail-frame-youtube
.live-thumbnail-overlay,
body > main #schedule-list
.schedule-thumbnail-frame-youtube
.schedule-thumbnail-overlay {
    position: absolute !important;

    /*
       1 / 0.88085938 = 1.135255...
       1 / 0.67871094 = 1.473380...
    */
    width: 113.526% !important;
    height: 147.338% !important;

    /*
       Offset the original opening to exactly cover the thumbnail.
       X/W = 0.06380208 / 0.88085938 = 7.243%
       Y/H = 0.16601563 / 0.67871094 = 24.461%
    */
    left: -7.243% !important;
    top: -24.461% !important;

    right: auto !important;
    bottom: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: fill !important;
    object-position: center center !important;

    pointer-events: none !important;

    transform: none !important;

    z-index: 3 !important;
}


/* ------------------------------------------------------------
   Twitch original frame
   Original measured transparent opening:
     X = 5.208333%
     Y = 13.769531%
     W = 89.583333%
     H = 70.800781%
   ------------------------------------------------------------ */

body > main #live-list
.live-thumbnail-frame-twitch
.live-thumbnail-overlay {
    position: absolute !important;

    /*
       1 / 0.89583333 = 1.116279...
       1 / 0.70800781 = 1.412414...
    */
    width: 111.628% !important;
    height: 141.242% !important;

    /*
       X/W = 0.05208333 / 0.89583333 = 5.814%
       Y/H = 0.13769531 / 0.70800781 = 19.448%
    */
    left: -5.814% !important;
    top: -19.448% !important;

    right: auto !important;
    bottom: auto !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: fill !important;
    object-position: center center !important;

    pointer-events: none !important;

    transform: none !important;

    z-index: 3 !important;
}


/* ------------------------------------------------------------
   Disable v72 independent labels entirely
   ------------------------------------------------------------ */

body > main .thumbnail-platform-label,
body > main .youtube-thumbnail-label {
    display: none !important;
}


/* ------------------------------------------------------------
   Give the frame some visual breathing room without changing
   the thumbnail itself.
   ------------------------------------------------------------ */

body > main #live-list .live-channel,
body > main #schedule-list .schedule-item {
    overflow: visible !important;
}

body > main #live-list,
body > main #schedule-list {
    overflow-x: visible !important;
}


/*
   Keep hover sharp: no resampling scale.
*/
body > main #live-list
.live-thumbnail-link:hover
.live-thumbnail,
body > main #schedule-list
.schedule-thumbnail-link:hover
.thumbnail {
    transform: none !important;
    opacity: 0.96 !important;
}


/* ------------------------------------------------------------
   Mobile:
   frame expansion remains identical in ratio.
   Keep z-order above the thumbnail but below unrelated popups.
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    body > main #live-list .live-thumbnail-overlay,
    body > main #schedule-list .schedule-thumbnail-overlay {
        z-index: 3 !important;
    }

    body > main #live-list .live-thumbnail-link,
    body > main #schedule-list .schedule-thumbnail-link {
        overflow: visible !important;
    }
}


/* ============================================================
   v73 FIX
   Calendar/schedule red border cleanup + vertical thumbnail center
   ============================================================ */

/* ------------------------------------------------------------
   1. カレンダーの配信アイコン
   YouTube由来の赤いリング/縁取りを削除
   ------------------------------------------------------------ */

body > main .schedule-icon,
body > main .schedule-icon-youtube,
body > main .schedule-icon-twitch {
    border-color: transparent !important;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.90),
        0 2px 7px rgba(55, 40, 75, 0.14)
        !important;
}


/* ------------------------------------------------------------
   2. 予定カード
   YouTube/Twitchのプラットフォーム別赤/青外枠を削除
   通常の薄いニュートラル枠だけ残す
   ------------------------------------------------------------ */

body > main #schedule-list .schedule-item,
body > main #schedule-list .schedule-item-youtube,
body > main #schedule-list .schedule-item-twitch {
    border:
        1px solid
        rgba(255, 255, 255, 0.48)
        !important;

    box-shadow:
        0 4px 14px
        rgba(55, 40, 75, 0.08)
        !important;
}


/*
   予定側チャンネルアイコンのプラットフォーム色リングも
   カード本体に合わせてニュートラル化
*/
body > main #schedule-list .schedule-channel-icon,
body > main #schedule-list .schedule-channel-icon-youtube,
body > main #schedule-list .schedule-channel-icon-twitch {
    border-color:
        rgba(255, 255, 255, 0.70)
        !important;

    box-shadow:
        0 0 0 2px
        rgba(255, 255, 255, 0.90),
        0 3px 9px
        rgba(55, 40, 75, 0.12)
        !important;
}


/* ------------------------------------------------------------
   3. 予定サムネイル
   カード内で縦軸中央に固定
   ------------------------------------------------------------ */

body > main #schedule-list .schedule-thumbnail-link {
    align-self: center !important;

    justify-self: end !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}


/*
   grid側でも中央揃えを明示して、
   旧定義の上寄せを確実に打ち消す
*/
body > main #schedule-list .schedule-item {
    align-items: center !important;
}


/*
   サムネイル内部のフレーム構造も中央配置の基準に合わせる
*/
body > main #schedule-list .schedule-thumbnail-frame {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}





/* ============================================================
   v73-fix3
   Smartphone PageTheme two-layer rendering
   ============================================================ */

@media (max-width: 760px) {

    /*
       The real PageTheme becomes the foreground layer.
       Width is preserved so the left/right artwork remains visible.
    */
    body > .page-theme,
    .page-theme {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        background-size: 100% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;

        overflow: hidden !important;

        isolation: isolate !important;
    }


    /*
       Back layer:
       reuse the same PageTheme image as a soft cover backdrop.
       This fills the tall smartphone viewport without leaving an
       abrupt blank area below the foreground image.
    */
    body > .page-theme::before,
    .page-theme::before {
        content: "" !important;

        position: absolute !important;

        inset: -28px !important;

        z-index: -1 !important;

        background-image: inherit !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        filter:
            blur(22px)
            saturate(0.92)
            brightness(1.06)
            !important;

        opacity: 0.52 !important;

        transform: scale(1.08) !important;

        pointer-events: none !important;
    }


    /*
       A very light glass veil keeps the blurred lower backdrop from
       becoming visually stronger than the actual foreground artwork.
    */
    body > .page-theme::after,
    .page-theme::after {
        content: "" !important;

        position: absolute !important;

        inset: 0 !important;

        z-index: -1 !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.02) 0%,
                rgba(245,249,255,0.06) 45%,
                rgba(250,242,250,0.12) 100%
            )
            !important;

        pointer-events: none !important;
    }
}


/* ============================================================
   2026-08-22 PageTheme device-specific final override
   PC:     PageTheme/pc/*_PageTheme.png
   Mobile: PageTheme/mobile/*_PageTheme_Mobile.png
   ============================================================ */

@media (max-width: 760px) {
    body > .page-theme,
    .page-theme {
        width: 100vw !important;
        height: 100dvh !important;
        min-width: 100vw !important;
        min-height: 100dvh !important;
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* 旧スマホ背景のぼかし補完レイヤーは不要。 */
    body > .page-theme::before,
    .page-theme::before,
    body > .page-theme::after,
    .page-theme::after {
        content: none !important;
        display: none !important;
    }
}

/* ----------------------------------------
   スマホ: Pull to Refresh
---------------------------------------- */

.pull-to-refresh-indicator {
    display: none;
}

@media (max-width: 760px) {

    html,
    body {
        overscroll-behavior-y: contain;
    }

    .pull-to-refresh-indicator {
        position: fixed;
        top: 0;
        left: 50%;
        z-index: 10000;

        display: flex;
        align-items: center;
        justify-content: center;

        min-width: 132px;
        height: 38px;
        padding: 0 16px;

        border-radius: 0 0 18px 18px;

        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);

        color: #333;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;

        opacity: 0;
        pointer-events: none;

        transform:
            translate(
                -50%,
                calc(-100% + var(--pull-distance, 0px))
            );

        transition:
            opacity 0.12s ease,
            transform 0.12s ease;
    }

    .pull-to-refresh-indicator.visible {
        opacity: 1;
    }

    .pull-to-refresh-indicator.ready {
        font-weight: 800;
    }

    .pull-to-refresh-indicator.refreshing {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}



/* ----------------------------------------
   v76: Pull to Refresh 視認性強化
---------------------------------------- */

@media (max-width: 760px) {

    .pull-to-refresh-indicator {
        min-width: 190px;
        height: 48px;
        padding: 0 24px;

        border: 3px solid rgba(255, 255, 255, 0.98);
        border-radius: 0 0 24px 24px;

        background: rgba(20, 20, 20, 0.92);
        box-shadow:
            0 6px 20px rgba(0, 0, 0, 0.32),
            0 0 0 2px rgba(0, 0, 0, 0.10);

        color: #fff;
        font-size: 17px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
    }

    .pull-to-refresh-indicator.ready {
        min-width: 210px;
        transform:
            translate(
                -50%,
                calc(-100% + var(--pull-distance, 0px))
            )
            scale(1.06);

        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.38),
            0 0 0 3px rgba(255, 255, 255, 0.42);
    }

    .pull-to-refresh-indicator.refreshing {
        transform: translate(-50%, 0) scale(1.06);
    }
}


/* ----------------------------------------
   v77: Pull to Refresh 2段階デザイン
---------------------------------------- */

@media (max-width: 760px) {

    .pull-to-refresh-indicator {
        position: fixed;
        top: 0;
        left: 50%;
        z-index: 10000;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 9px;

        min-width: 176px;
        height: 46px;
        padding: 0 20px;

        border:
            1px solid
            rgba(255, 255, 255, 0.72);

        border-radius:
            0 0 22px 22px;

        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.90),
                rgba(240, 246, 255, 0.86),
                rgba(255, 240, 248, 0.88)
            );

        backdrop-filter:
            blur(14px)
            saturate(1.12);

        -webkit-backdrop-filter:
            blur(14px)
            saturate(1.12);

        box-shadow:
            0 8px 24px
            rgba(42, 48, 78, 0.18),
            inset 0 1px 0
            rgba(255, 255, 255, 0.86);

        color:
            rgba(72, 72, 92, 0.92);

        opacity: 0;

        pointer-events: none;

        transform:
            translate(
                -50%,
                calc(
                    -100%
                    +
                    var(
                        --pull-distance,
                        0px
                    )
                )
            )
            scale(
                calc(
                    0.96
                    +
                    var(
                        --pull-progress,
                        0
                    ) * 0.04
                )
            );

        transition:
            opacity 0.12s ease,
            transform 0.12s ease,
            background 0.16s ease,
            color 0.16s ease,
            box-shadow 0.16s ease,
            border-color 0.16s ease;
    }


    .pull-to-refresh-indicator.visible {
        opacity: 1;
    }


    .pull-to-refresh-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 27px;
        height: 27px;

        border-radius: 50%;

        background:
            rgba(255, 255, 255, 0.72);

        box-shadow:
            inset 0 0 0 1px
            rgba(110, 120, 160, 0.12);

        font-size: 17px;
        line-height: 1;
        font-weight: 900;

        color:
            rgba(92, 93, 119, 0.90);

        transition:
            transform 0.18s ease,
            background 0.16s ease,
            color 0.16s ease,
            box-shadow 0.16s ease;
    }


    .pull-to-refresh-text {
        font-size: 14px;
        line-height: 1;
        font-weight: 800;

        letter-spacing:
            0.03em;

        white-space: nowrap;
    }


    /*
       120px到達:
       色・文言・アイコン・サイズをまとめて変えることで
       「今離せば更新」が一目で分かる状態にする。
    */
    .pull-to-refresh-indicator.ready {
        min-width: 196px;

        border-color:
            rgba(255, 255, 255, 0.96);

        background:
            linear-gradient(
                135deg,
                rgba(113, 110, 214, 0.97),
                rgba(177, 102, 200, 0.97),
                rgba(238, 117, 164, 0.97)
            );

        color: #ffffff;

        box-shadow:
            0 10px 28px
            rgba(111, 82, 175, 0.34),
            0 0 0 3px
            rgba(255, 255, 255, 0.28),
            inset 0 1px 0
            rgba(255, 255, 255, 0.26);
    }


    .pull-to-refresh-indicator.ready
    .pull-to-refresh-icon {
        background:
            rgba(255, 255, 255, 0.22);

        color: #ffffff;

        box-shadow:
            inset 0 0 0 1px
            rgba(255, 255, 255, 0.36);

        animation:
            pull-refresh-icon-spin
            0.55s
            ease-out
            1;
    }


    .pull-to-refresh-indicator.ready
    .pull-to-refresh-text {
        font-size: 15px;
        font-weight: 900;

        text-shadow:
            0 1px 4px
            rgba(73, 38, 112, 0.24);
    }


    /*
       到達した瞬間だけ「ポン」と弾ませる。
    */
    .pull-to-refresh-indicator.ready-pop {
        animation:
            pull-refresh-ready-pop
            0.30s
            cubic-bezier(
                0.18,
                0.89,
                0.32,
                1.28
            )
            1;
    }


    .pull-to-refresh-indicator.refreshing {
        opacity: 1;

        min-width: 168px;

        background:
            linear-gradient(
                135deg,
                rgba(113, 110, 214, 0.97),
                rgba(177, 102, 200, 0.97)
            );

        color: #ffffff;

        transform:
            translate(-50%, 0)
            scale(1);
    }


    .pull-to-refresh-indicator.refreshing
    .pull-to-refresh-icon {
        background:
            rgba(255, 255, 255, 0.22);

        color: #ffffff;

        animation:
            pull-refresh-loading-spin
            0.7s
            linear
            infinite;
    }


    @keyframes pull-refresh-ready-pop {

        0% {
            transform:
                translate(
                    -50%,
                    calc(
                        -100%
                        +
                        var(
                            --pull-distance,
                            0px
                        )
                    )
                )
                scale(1);
        }

        55% {
            transform:
                translate(
                    -50%,
                    calc(
                        -100%
                        +
                        var(
                            --pull-distance,
                            0px
                        )
                    )
                )
                scale(1.10);
        }

        100% {
            transform:
                translate(
                    -50%,
                    calc(
                        -100%
                        +
                        var(
                            --pull-distance,
                            0px
                        )
                    )
                )
                scale(1.04);
        }
    }


    @keyframes pull-refresh-icon-spin {

        from {
            transform:
                rotate(-120deg);
        }

        to {
            transform:
                rotate(0deg);
        }
    }


    @keyframes pull-refresh-loading-spin {

        from {
            transform:
                rotate(0deg);
        }

        to {
            transform:
                rotate(360deg);
        }
    }
}


/* ----------------------------------------
   v79: Pull to Refresh スムーズ切替
   外寸を固定し、状態変化でレイアウトを動かさない
---------------------------------------- */

@media (max-width: 760px) {

    .pull-to-refresh-indicator,
    .pull-to-refresh-indicator.ready,
    .pull-to-refresh-indicator.refreshing {
        min-width: 196px;
        width: 196px;
        height: 46px;
        padding: 0 18px;

        gap: 9px;

        border-width: 1px;
        border-style: solid;
        border-radius: 0 0 22px 22px;

        font-size: 14px;

        will-change:
            transform,
            opacity;

        transition:
            opacity 0.16s ease,
            transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
            background 0.28s ease,
            color 0.24s ease,
            border-color 0.24s ease,
            box-shadow 0.28s ease;
    }


    .pull-to-refresh-indicator {
        border-color:
            rgba(255, 255, 255, 0.72);

        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.91),
                rgba(244, 247, 255, 0.89),
                rgba(255, 243, 249, 0.90)
            );

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);

        box-shadow:
            0 6px 18px
            rgba(42, 48, 78, 0.16);

        color:
            rgba(72, 72, 92, 0.92);
    }


    .pull-to-refresh-indicator.ready,
    .pull-to-refresh-indicator.refreshing {
        border-color:
            rgba(255, 255, 255, 0.90);

        background:
            linear-gradient(
                135deg,
                rgba(113, 110, 214, 0.97),
                rgba(177, 102, 200, 0.97),
                rgba(238, 117, 164, 0.97)
            );

        box-shadow:
            0 8px 22px
            rgba(111, 82, 175, 0.27);

        color: #ffffff;
    }


    .pull-to-refresh-icon,
    .pull-to-refresh-indicator.ready
    .pull-to-refresh-icon,
    .pull-to-refresh-indicator.refreshing
    .pull-to-refresh-icon {
        flex: 0 0 27px;

        width: 27px;
        height: 27px;

        transition:
            color 0.22s ease,
            background 0.22s ease,
            box-shadow 0.22s ease,
            transform 0.24s ease;
    }


    .pull-to-refresh-text,
    .pull-to-refresh-indicator.ready
    .pull-to-refresh-text {
        flex: 1 1 auto;

        font-size: 14px;
        font-weight: 850;
        line-height: 1;

        text-align: center;
        white-space: nowrap;

        transition:
            opacity 0.18s ease,
            color 0.22s ease,
            transform 0.22s ease;
    }


    .pull-to-refresh-indicator.ready
    .pull-to-refresh-icon {
        transform: rotate(360deg);
    }


    /*
       150px到達時は外寸を変えず、
       ごく小さいscaleだけで到達感を出す。
    */
    .pull-to-refresh-indicator.ready-pop {
        animation:
            pull-refresh-ready-pop-smooth
            0.26s
            cubic-bezier(
                0.22,
                0.61,
                0.36,
                1
            )
            1;
    }


    .pull-to-refresh-indicator.refreshing {
        opacity: 1;

        transform:
            translate(-50%, 0)
            scale(1);
    }


    .pull-to-refresh-indicator.refreshing
    .pull-to-refresh-icon {
        animation:
            pull-refresh-loading-spin
            0.75s
            linear
            infinite;
    }


    @keyframes pull-refresh-ready-pop-smooth {

        0% {
            scale: 1;
        }

        50% {
            scale: 1.035;
        }

        100% {
            scale: 1;
        }
    }
}