/* =========================================================
   共通トースト通知（ページ上部・中央）
   - フォント: Noto Sans JP / 角丸5px
   - success=緑 / error=赤(#cc0000) / info=ネイビー(#0b377d)
   ========================================================= */

#gtoast-container {
    position: fixed;
    top: var(--gtoast-top, 1rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
    /* コンテナ自体はクリックを透過し、各トーストだけ受け取る */

    /* popover として使う場合のデフォルトスタイルを打ち消す
       （popover は border/padding/margin と inset:auto が既定で付くため） */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

/* popover 属性が付いた要素は、UAスタイルで閉状態が display:none になる。
   開状態(:popover-open)のときだけ flex 表示にし、fixed配置を維持する。
   popover非対応環境では属性自体が付かないため、上の #gtoast-container の
   display:flex がそのまま効く（フォールバック）。 */
#gtoast-container[popover] {
    display: none;
}

#gtoast-container[popover]:popover-open {
    display: flex;
    inset: unset;
    top: var(--gtoast-top, 1rem);
    left: 50%;
    transform: translateX(-50%);
}

.gtoast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 280px;
    max-width: 480px;
    padding: 0.85rem 0.9rem;
    background: #ffffff;
    color: #2a2a2a;
    border-radius: 5px;
    border-left: 4px solid #999999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.gtoast-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gtoast-is-leaving {
    opacity: 0;
    transform: translateY(-12px);
}

.gtoast__icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1.45;
}

.gtoast__msg {
    flex: 1 1 auto;
    padding-top: 1px;
    word-break: break-word;
    white-space: pre-line; /* メッセージ内の改行(\n)を表示しつつ通常の折り返しも有効にする */
}

.gtoast__close {
    flex: 0 0 auto;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.2rem;
    color: #999999;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}

.gtoast__close:hover {
    color: #333333;
}

.gtoast__close .material-symbols-outlined {
    font-size: 1.1rem;
}

/* 種別ごとのアクセント */
.gtoast--success {
    border-left-color: #1a7f37;
}
.gtoast--success .gtoast__icon {
    color: #1a7f37;
}

.gtoast--error {
    border-left-color: #cc0000;
}
.gtoast--error .gtoast__icon {
    color: #cc0000;
}

.gtoast--info {
    border-left-color: #0b377d;
}
.gtoast--info .gtoast__icon {
    color: #0b377d;
}

@media (max-width: 520px) {
    #gtoast-container {
        top: var(--gtoast-top, 0.5rem);
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }
    .gtoast {
        min-width: 0;
    }
}