@charset "UTF-8";

/* アドレスバーと端末の安全領域を考慮し、操作部分の高さを先に確保する。 */
.comingsoon {
    --comingsoon-viewport: 100vh;
    --comingsoon-edge: max(16px, env(safe-area-inset-top), env(safe-area-inset-bottom), env(safe-area-inset-left), env(safe-area-inset-right));
    box-sizing: border-box;
    /* 画像の縦横比に合わせて幅も制限し、操作欄を画像の左右端に揃える。 */
    inline-size: min(900px, calc(100% - var(--comingsoon-edge) * 2), calc((var(--comingsoon-viewport) - var(--comingsoon-edge) * 2 - 104px) * 9 / 7));
    max-inline-size: none;
    max-block-size: calc(var(--comingsoon-viewport) - var(--comingsoon-edge) * 2);
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    overflow: auto;
    overscroll-behavior: contain;
}

@supports (height: 100dvh) {
    .comingsoon {
        --comingsoon-viewport: 100dvh;
    }
}

.comingsoon[open] {
    display: grid;
    grid-template-rows: 44px minmax(0, auto) auto;
    gap: 8px;
}

.comingsoon::backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.comingsoon__close {
    justify-self: end;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font: 40px / 1 sans-serif;
    cursor: pointer;
    /* 閉じるボタンはフォーカス時も枠を表示しない。 */
    outline: none;
}

.comingsoon__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    min-block-size: 0;
    /* 閉じるボタン44px、チェック欄44px、間隔16pxを画像の高さから除く。 */
    max-block-size: max(0px, calc(var(--comingsoon-viewport) - var(--comingsoon-edge) * 2 - 104px));
    object-fit: contain;
}

.comingsoon__preference {
    display: flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.comingsoon__preference input {
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    margin: 0;
    color-scheme: dark;
    accent-color: #fff;
}

.comingsoon__preference input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.comingsoon__close:active {
    opacity: 0.6;
}

.comingsoon__preference:active {
    opacity: 0.75;
}

@media (hover: hover) and (pointer: fine) {
    .comingsoon__close:hover {
        opacity: 0.8;
    }
}

/* 表示中は背景ページのスクロールを止める。 */
html.comingsoon-open,
html.comingsoon-open body {
    overflow: hidden;
}