/* ---------- 全色フル展開：単一クラス（20色） ---------- */
:root {
    /* 20色パレット (brand = #6369FF) */
    --brand: #6369FF;
    --brand-rgb: 99,105,255;
    --slate: #64748B;
    --slate-rgb: 100,116,139;
    --mauve: #8B5CF6;
    --mauve-rgb: 139,92,246;
    --violet: #7C3AED;
    --violet-rgb: 124,58,237;
    --periwinkle: #9AA6FF;
    --periwinkle-rgb: 154,166,255;
    --royal: #4F46E5;
    --royal-rgb: 79,70,229;
    --azure: #3B82F6;
    --azure-rgb: 59,130,246;
    --ocean: #0EA5A4;
    --ocean-rgb: 14,165,164;
    --mint: #34D399;
    --mint-rgb: 52,211,153;
    --sea: #06B6D4;
    --sea-rgb: 6,182,212;
    --grass: #4ADE80;
    --grass-rgb: 74,222,128;
    --olive: #84CC16;
    --olive-rgb: 132,204,22;
    --amber: #F59E0B;
    --amber-rgb: 245,158,11;
    --sienna: #FB923C;
    --sienna-rgb: 251,146,60;
    --coral: #FB7185;
    --coral-rgb: 251,113,133;
    --rose: #F43F5E;
    --rose-rgb: 244,63,94;
    --magenta: #D946EF;
    --magenta-rgb: 217,70,239;
    --plum: #7E22CE;
    --plum-rgb: 126,34,206;
    --graphite: #374151;
    --graphite-rgb: 55,65,81;
    --charcoal: #0F172A;
    --charcoal-rgb: 15,23,42;
    --text-light: #ffffff;
    --text-dark: #0f172a;
}

/* ---------- テキスト色 ---------- */
.text-brand {
    color: var(--brand) !important;
}

.text-slate {
    color: var(--slate) !important;
}

.text-mauve {
    color: var(--mauve) !important;
}

.text-violet {
    color: var(--violet) !important;
}

.text-periwinkle {
    color: var(--periwinkle) !important;
}

.text-royal {
    color: var(--royal) !important;
}

.text-azure {
    color: var(--azure) !important;
}

.text-ocean {
    color: var(--ocean) !important;
}

.text-mint {
    color: var(--mint) !important;
}

.text-sea {
    color: var(--sea) !important;
}

.text-grass {
    color: var(--grass) !important;
}

.text-olive {
    color: var(--olive) !important;
}

.text-amber {
    color: var(--amber) !important;
}

.text-sienna {
    color: var(--sienna) !important;
}

.text-coral {
    color: var(--coral) !important;
}

.text-rose {
    color: var(--rose) !important;
}

.text-magenta {
    color: var(--magenta) !important;
}

.text-plum {
    color: var(--plum) !important;
}

.text-graphite {
    color: var(--graphite) !important;
}

.text-charcoal {
    color: var(--charcoal) !important;
}

/* subtle テキスト */
.text-brand-subtle {
    color: rgba(var(--brand-rgb), .85) !important;
}

.text-slate-subtle {
    color: rgba(var(--slate-rgb), .85) !important;
}

.text-mauve-subtle {
    color: rgba(var(--mauve-rgb), .85) !important;
}

.text-violet-subtle {
    color: rgba(var(--violet-rgb), .85) !important;
}

.text-periwinkle-subtle {
    color: rgba(var(--periwinkle-rgb), .85) !important;
}

.text-royal-subtle {
    color: rgba(var(--royal-rgb), .85) !important;
}

.text-azure-subtle {
    color: rgba(var(--azure-rgb), .85) !important;
}

.text-ocean-subtle {
    color: rgba(var(--ocean-rgb), .85) !important;
}

.text-mint-subtle {
    color: rgba(var(--mint-rgb), .85) !important;
}

.text-sea-subtle {
    color: rgba(var(--sea-rgb), .85) !important;
}

.text-grass-subtle {
    color: rgba(var(--grass-rgb), .85) !important;
}

.text-olive-subtle {
    color: rgba(var(--olive-rgb), .85) !important;
}

.text-amber-subtle {
    color: rgba(var(--amber-rgb), .85) !important;
}

.text-sienna-subtle {
    color: rgba(var(--sienna-rgb), .85) !important;
}

.text-coral-subtle {
    color: rgba(var(--coral-rgb), .85) !important;
}

.text-rose-subtle {
    color: rgba(var(--rose-rgb), .85) !important;
}

.text-magenta-subtle {
    color: rgba(var(--magenta-rgb), .85) !important;
}

.text-plum-subtle {
    color: rgba(var(--plum-rgb), .85) !important;
}

.text-graphite-subtle {
    color: rgba(var(--graphite-rgb), .85) !important;
}

.text-charcoal-subtle {
    color: rgba(var(--charcoal-rgb), .85) !important;
}

/* ---------- 背景色（濃色は白文字、明るめは濃色テキスト） ---------- */
/* 明るめカラーはダークテキストを指定 */
.bg-brand {
    background-color: var(--brand) !important;
    color: var(--text-light) !important;
}

.bg-slate {
    background-color: var(--slate) !important;
    color: var(--text-light) !important;
}

.bg-mauve {
    background-color: var(--mauve) !important;
    color: var(--text-light) !important;
}

.bg-violet {
    background-color: var(--violet) !important;
    color: var(--text-light) !important;
}

.bg-periwinkle {
    background-color: var(--periwinkle) !important;
    color: var(--text-dark) !important;
}

.bg-royal {
    background-color: var(--royal) !important;
    color: var(--text-light) !important;
}

.bg-azure {
    background-color: var(--azure) !important;
    color: var(--text-light) !important;
}

.bg-ocean {
    background-color: var(--ocean) !important;
    color: var(--text-light) !important;
}

.bg-mint {
    background-color: var(--mint) !important;
    color: var(--text-dark) !important;
}

.bg-sea {
    background-color: var(--sea) !important;
    color: var(--text-light) !important;
}

.bg-grass {
    background-color: var(--grass) !important;
    color: var(--text-dark) !important;
}

.bg-olive {
    background-color: var(--olive) !important;
    color: var(--text-dark) !important;
}

.bg-amber {
    background-color: var(--amber) !important;
    color: var(--text-dark) !important;
}

.bg-sienna {
    background-color: var(--sienna) !important;
    color: var(--text-dark) !important;
}

.bg-coral {
    background-color: var(--coral) !important;
    color: var(--text-light) !important;
}

.bg-rose {
    background-color: var(--rose) !important;
    color: var(--text-light) !important;
}

.bg-magenta {
    background-color: var(--magenta) !important;
    color: var(--text-light) !important;
}

.bg-plum {
    background-color: var(--plum) !important;
    color: var(--text-light) !important;
}

.bg-graphite {
    background-color: var(--graphite) !important;
    color: var(--text-light) !important;
}

.bg-charcoal {
    background-color: var(--charcoal) !important;
    color: var(--text-light) !important;
}

/* subtle 背景（薄塗り） */
.bg-brand-subtle {
    background-color: rgba(var(--brand-rgb), .08) !important;
    color: var(--brand) !important;
}

.bg-slate-subtle {
    background-color: rgba(var(--slate-rgb), .08) !important;
    color: var(--slate) !important;
}

.bg-mauve-subtle {
    background-color: rgba(var(--mauve-rgb), .08) !important;
    color: var(--mauve) !important;
}

.bg-violet-subtle {
    background-color: rgba(var(--violet-rgb), .08) !important;
    color: var(--violet) !important;
}

.bg-periwinkle-subtle {
    background-color: rgba(var(--periwinkle-rgb), .10) !important;
    color: var(--periwinkle) !important;
}

.bg-royal-subtle {
    background-color: rgba(var(--royal-rgb), .08) !important;
    color: var(--royal) !important;
}

.bg-azure-subtle {
    background-color: rgba(var(--azure-rgb), .08) !important;
    color: var(--azure) !important;
}

.bg-ocean-subtle {
    background-color: rgba(var(--ocean-rgb), .08) !important;
    color: var(--ocean) !important;
}

.bg-mint-subtle {
    background-color: rgba(var(--mint-rgb), .08) !important;
    color: var(--mint) !important;
}

.bg-sea-subtle {
    background-color: rgba(var(--sea-rgb), .08) !important;
    color: var(--sea) !important;
}

.bg-grass-subtle {
    background-color: rgba(var(--grass-rgb), .08) !important;
    color: var(--grass) !important;
}

.bg-olive-subtle {
    background-color: rgba(var(--olive-rgb), .08) !important;
    color: var(--olive) !important;
}

.bg-amber-subtle {
    background-color: rgba(var(--amber-rgb), .08) !important;
    color: var(--amber) !important;
}

.bg-sienna-subtle {
    background-color: rgba(var(--sienna-rgb), .08) !important;
    color: var(--sienna) !important;
}

.bg-coral-subtle {
    background-color: rgba(var(--coral-rgb), .08) !important;
    color: var(--coral) !important;
}

.bg-rose-subtle {
    background-color: rgba(var(--rose-rgb), .08) !important;
    color: var(--rose) !important;
}

.bg-magenta-subtle {
    background-color: rgba(var(--magenta-rgb), .08) !important;
    color: var(--magenta) !important;
}

.bg-plum-subtle {
    background-color: rgba(var(--plum-rgb), .08) !important;
    color: var(--plum) !important;
}

.bg-graphite-subtle {
    background-color: rgba(var(--graphite-rgb), .06) !important;
    color: var(--graphite) !important;
}

.bg-charcoal-subtle {
    background-color: rgba(var(--charcoal-rgb), .06) !important;
    color: var(--charcoal) !important;
}

/* ---------- アウトライン ---------- */
.outline-brand {
    background: transparent !important;
    border: 1px solid var(--brand) !important;
    color: var(--brand) !important;
}

.outline-slate {
    background: transparent !important;
    border: 1px solid var(--slate) !important;
    color: var(--slate) !important;
}

.outline-mauve {
    background: transparent !important;
    border: 1px solid var(--mauve) !important;
    color: var(--mauve) !important;
}

.outline-violet {
    background: transparent !important;
    border: 1px solid var(--violet) !important;
    color: var(--violet) !important;
}

.outline-periwinkle {
    background: transparent !important;
    border: 1px solid var(--periwinkle) !important;
    color: var(--periwinkle) !important;
}

.outline-royal {
    background: transparent !important;
    border: 1px solid var(--royal) !important;
    color: var(--royal) !important;
}

.outline-azure {
    background: transparent !important;
    border: 1px solid var(--azure) !important;
    color: var(--azure) !important;
}

.outline-ocean {
    background: transparent !important;
    border: 1px solid var(--ocean) !important;
    color: var(--ocean) !important;
}

.outline-mint {
    background: transparent !important;
    border: 1px solid var(--mint) !important;
    color: var(--mint) !important;
}

.outline-sea {
    background: transparent !important;
    border: 1px solid var(--sea) !important;
    color: var(--sea) !important;
}

.outline-grass {
    background: transparent !important;
    border: 1px solid var(--grass) !important;
    color: var(--grass) !important;
}

.outline-olive {
    background: transparent !important;
    border: 1px solid var(--olive) !important;
    color: var(--olive) !important;
}

.outline-amber {
    background: transparent !important;
    border: 1px solid var(--amber) !important;
    color: var(--amber) !important;
}

.outline-sienna {
    background: transparent !important;
    border: 1px solid var(--sienna) !important;
    color: var(--sienna) !important;
}

.outline-coral {
    background: transparent !important;
    border: 1px solid var(--coral) !important;
    color: var(--coral) !important;
}

.outline-rose {
    background: transparent !important;
    border: 1px solid var(--rose) !important;
    color: var(--rose) !important;
}

.outline-magenta {
    background: transparent !important;
    border: 1px solid var(--magenta) !important;
    color: var(--magenta) !important;
}

.outline-plum {
    background: transparent !important;
    border: 1px solid var(--plum) !important;
    color: var(--plum) !important;
}

.outline-graphite {
    background: transparent !important;
    border: 1px solid var(--graphite) !important;
    color: var(--graphite) !important;
}

.outline-charcoal {
    background: transparent !important;
    border: 1px solid var(--charcoal) !important;
    color: var(--charcoal) !important;
}

/* ---------- バッジ ---------- */
.badge-brand {
    background: var(--brand) !important;
    color: var(--text-light) !important;
}

.badge-slate {
    background: var(--slate) !important;
    color: var(--text-light) !important;
}

.badge-mauve {
    background: var(--mauve) !important;
    color: var(--text-light) !important;
}

.badge-violet {
    background: var(--violet) !important;
    color: var(--text-light) !important;
}

.badge-periwinkle {
    background: var(--periwinkle) !important;
    color: var(--text-dark) !important;
}

.badge-royal {
    background: var(--royal) !important;
    color: var(--text-light) !important;
}

.badge-azure {
    background: var(--azure) !important;
    color: var(--text-light) !important;
}

.badge-ocean {
    background: var(--ocean) !important;
    color: var(--text-light) !important;
}

.badge-mint {
    background: var(--mint) !important;
    color: var(--text-dark) !important;
}

.badge-sea {
    background: var(--sea) !important;
    color: var(--text-light) !important;
}

.badge-grass {
    background: var(--grass) !important;
    color: var(--text-dark) !important;
}

.badge-olive {
    background: var(--olive) !important;
    color: var(--text-dark) !important;
}

.badge-amber {
    background: var(--amber) !important;
    color: var(--text-dark) !important;
}

.badge-sienna {
    background: var(--sienna) !important;
    color: var(--text-dark) !important;
}

.badge-coral {
    background: var(--coral) !important;
    color: var(--text-light) !important;
}

.badge-rose {
    background: var(--rose) !important;
    color: var(--text-light) !important;
}

.badge-magenta {
    background: var(--magenta) !important;
    color: var(--text-light) !important;
}

.badge-plum {
    background: var(--plum) !important;
    color: var(--text-light) !important;
}

.badge-graphite {
    background: var(--graphite) !important;
    color: var(--text-light) !important;
}

.badge-charcoal {
    background: var(--charcoal) !important;
    color: var(--text-light) !important;
}

/* バッジ subtle */
.badge-brand-subtle {
    background: rgba(var(--brand-rgb), .12) !important;
    color: var(--brand) !important;
    border: 1px solid rgba(var(--brand-rgb), .12) !important;
}

.badge-periwinkle-subtle {
    background: rgba(var(--periwinkle-rgb), .12) !important;
    color: var(--periwinkle) !important;
    border: 1px solid rgba(var(--periwinkle-rgb), .12) !important;
}
/* 必要なら他色も同様に追加可能 */

/* ---------- チップ ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .16rem .5rem;
    border-radius: 999px;
    font-size: .82rem;
    line-height: 1;
    white-space: nowrap;
}

.chip-brand {
    background: rgba(var(--brand-rgb), .06);
    color: var(--brand);
    border: 1px solid rgba(var(--brand-rgb), .08);
}

.chip-periwinkle {
    background: rgba(var(--periwinkle-rgb), .06);
    color: var(--periwinkle);
    border: 1px solid rgba(var(--periwinkle-rgb), .08);
}

/* ---------- ホバー / フォーカス効果 ---------- */
.hover-brand:hover, .focus-brand:focus {
    background-color: rgba(var(--brand-rgb), .06) !important;
    color: var(--brand) !important;
    transition: background-color .12s ease, color .12s ease;
}

.hover-azure:hover {
    background-color: rgba(var(--azure-rgb), .06) !important;
    color: var(--azure) !important;
    transition: .12s;
}

/* ---------- ダークテーマ微調整 ---------- */
[data-bs-theme=dark] .bg-*-subtle {
    filter: none;
}
/* 個別微調整が必要な場合は追加してください */
[data-bs-theme=dark] .outline-brand {
    border-color: rgba(var(--brand-rgb), .24) !important;
}

/* ---------- Quill微調整 ---------- */
.ql-editor {
    box-shadow: none !important;
}
.ql-toolbar.ql-snow {
    box-shadow: none !important;
    border: var(--bs-border-width) solid var(--bs-border-color-translucent) !important;
}
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
        box-shadow: none !important;
        padding: 3px 5px !important;
    }

    .ql-toolbar.ql-snow + .ql-container.ql-snow {
        border-top: 0 !important;
    }

.ql-container.ql-snow {
    border: var(--bs-border-width) solid var(--bs-border-color-translucent) !important;
}

.ql-editor.ql-blank::before {
    color: rgba(var(--bs-body-color-rgb), 0.65) !important;
    font-style: normal !important;
}



/* =========================================================
   モバイル固定ボトムナビ
   ========================================================= */

:root {
    --mobile-bottom-nav-height: 68px;
}

.mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: /*1040*/ 999;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    height: calc( var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) );
    padding-bottom: env(safe-area-inset-bottom);
    background-color: rgba(var(--bs-body-bg-rgb), 0.96);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/*
 * Bootstrapのlgブレークポイント未満で表示する
 */
@media (max-width: 991.98px) {
    .mobile-bottom-nav {
        display: grid !important;
    }

    /*
     * ページ末尾の内容が固定メニューに隠れないようにする
     */
    .page-content {
        padding-bottom: calc( var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) );
    }

        .page-content > footer {
            margin-bottom: 8px;
        }
}

.mobile-bottom-nav__item {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 7px 2px 5px;
    color: var(--bs-secondary-color);
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/*
 * QRメニューはbutton要素なので、
 * ブラウザ標準のボタン表示を解除する
 */
button.mobile-bottom-nav__item {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.mobile-bottom-nav__item::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 28px;
    height: 3px;
    background-color: transparent;
    border-radius: 0 0 4px 4px;
    content: "";
    transform: translateX(-50%);
}

.mobile-bottom-nav__item > .material-symbols-rounded {
    font-size: 25px;
    line-height: 1;
}

.mobile-bottom-nav__label {
    overflow: hidden;
    width: 100%;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-bottom-nav__item.is-active {
    color: var(--bs-primary);
}

    .mobile-bottom-nav__item.is-active::before {
        background-color: var(--bs-primary);
    }

.mobile-bottom-nav__item:focus-visible {
    color: var(--bs-primary);
    outline: 2px solid var(--bs-primary);
    outline-offset: -3px;
}

.mobile-bottom-nav__item:active {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

/* 中央のマイQRメニュー */
.mobile-bottom-nav__item--primary {
    padding-top: 0;
}

.mobile-bottom-nav__primary-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-top: -23px;
    margin-bottom: 1px;
    place-items: center;
    color: #fff;
    background-color: var(--bs-primary);
    border: 4px solid var(--bs-body-bg);
    border-radius: 50%;
    /*box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb), 0.4);*/
}

    .mobile-bottom-nav__primary-icon .material-symbols-rounded {
        font-size: 30px;
    }

/* マイQRのラベルも少し強調 */
.mobile-bottom-nav__item--primary .mobile-bottom-nav__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--bs-primary);
}

/* =========================================================
   マイQRコードモーダル
   ========================================================= */

.my-qr-modal {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.my-qr-modal__image-wrapper {
    display: inline-flex;
    max-width: 100%;
    padding: 12px;
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
}

.my-qr-modal__image {
    display: block;
    width: min(220px, 65vw);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    image-rendering: pixelated;
}

@media (max-width: 575.98px) {
    #myQrModal .modal-dialog {
        margin-right: 20px;
        margin-left: 20px;
    }
}