/* ===== リニューアル案内ポップアップ (期間限定・全ページ) =====
 * 掲載期間内 (.env RENEWAL_POPUP_UNTIL) のときだけ layout が読み込む。掲載終了時は
 * このファイルごと削除できるよう common.css には混ぜない (login-modal.css と同じ扱い)。
 *
 * 器の配色は共通のお知らせポップアップ (common.css の .information-dialog) に合わせる。
 * 中身はバナー画像 1 枚なので、器は画像の実寸 (350x350) に張り付く大きさにする。 */

.renewal-dialog {
    width: 350px;
    max-width: calc(100vw - 32px);
    padding: 0;
    margin: auto;
    overflow: visible;
    color: var(--shop-text);
    background: var(--shop-bg);
    border: none;
    border-radius: 4px;
}

.renewal-dialog::backdrop {
    background: rgb(208 208 208 / 80%);
}

/* 画像の右上に重ねる。器に余白を持たせず画像を主役にするため、内側ではなく角へ載せる。 */
.renewal-dialog-close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background: #4e646f;
    border: none;
    border-radius: 2px;
}

.renewal-dialog-close img {
    width: 14px;
    height: 14px;
}

.renewal-dialog-link {
    display: block;
}

/* 画像は 350x350。SP で器が縮んだときは器の幅に追従させる (はみ出し・横スクロール防止)。 */
.renewal-dialog-img {
    display: block;
    width: 100%;
    height: auto;
}

.renewal-dialog-dismiss {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 0.85rem;
    color: var(--shop-muted);
    cursor: pointer;
    border-top: 1px solid var(--shop-border);
}

.renewal-dialog-dismiss input {
    cursor: pointer;
}