/* ===== Base / Layout / Typography ===== */
        :root{
        --ui-bg:#f7f2ea;
        --ui-card:#fdf9f4;
        --ui-card-border:rgba(160,60,32,0.13);
        --ui-primary:#a03c20;
        --ui-primary-dark:#6b2210;
        --ui-primary-gradient:linear-gradient(135deg, #c04c28 0%, #8c3218 100%);
        --ui-primary-fg:#ffffff;
        --ui-secondary:#f4e4dc;
        --ui-secondary-fg:#6b2210;
        --ui-accent:#d4957a;
        --ui-accent-border:rgba(212,149,122,0.75);
        --ui-muted:#ede5d8;
        --ui-muted-fg:#6e5c50;
        --ui-divider:rgba(160,60,32,0.13);
        --ui-shadow:0 8px 26px rgba(107,34,16,0.08), 0 1px 3px rgba(107,34,16,0.06);
        --c-bg:var(--ui-bg); --c-panel:var(--ui-card); --c-border:var(--ui-card-border);
        --c-text:#2d211c; --c-muted:var(--ui-muted-fg);
        --c-primary:var(--ui-primary); --c-primary-2:var(--ui-primary-dark); --c-accent:var(--ui-accent);
        --c-acc1:#d2e5b1; --c-acc2:#9ce78f; --c-acc2-dark:#6aa96a;
        --c-ok:#0a7; --c-err:#c33;
        --seg-child-border:#f59e9e;
        --seg-adult-border:#93c5fd;
        --seg-both-border:#e8e2f0;
        }
        body{
        margin:0; color:var(--c-text);
        font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
        letter-spacing:.02em;
        background:
            radial-gradient(760px 360px at 16% 0%, rgba(212,149,122,.16), transparent 46%),
            radial-gradient(780px 420px at 88% 66%, rgba(160,60,32,.08), transparent 48%),
            var(--c-bg);
        }
        h1,h2,h3{
        font-family: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
        letter-spacing: 0.03em;
        }
        .sectionTitle{
        font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
        font-weight: 700;
        letter-spacing: 0.02em;
        }
        .siteTitle{
        font-family: "Shippori Mincho","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif !important;
        font-weight: 600; letter-spacing: 0.03em;
        }

        header{
        padding:13px 18px 12px; font-size:18px;
        background:var(--ui-primary-dark); border-bottom:1px solid rgba(255,255,255,.12);
        color:#fff;
        display:flex; justify-content:space-between; align-items:center;
        box-shadow:0 2px 14px rgba(107,34,16,.22);
        }
        main{
        width:100%;
        max-width:480px;
        box-sizing:border-box;
        margin:0 auto;
        padding:20px 16px 40px;
        }
        .brandBlock{ display:flex; align-items:center; gap:11px; min-width:0; }
        .taikoMark{ width:28px; height:28px; flex:0 0 auto; opacity:.9; }
        .siteTitleWrap{ min-width:0; }
        .siteTitleSub{ font-size:10px; opacity:.72; letter-spacing:.06em; margin-top:1px; }
        .ver{ font-size:11px; color:rgba(255,255,255,.58); font-weight:600; white-space:nowrap; }

        .card{
        background:var(--ui-card);
        border:1px solid var(--c-border);
        border-radius:16px;
        padding:14px 16px;
        margin:14px 0;
        box-shadow:var(--ui-shadow);
        }
        .muted{ color:var(--c-muted); font-size:13px; }
        .row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
        .row-space{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
        .right{ text-align:right; }
        .badge{ display:inline-block; font-size:12px; padding:2px 6px; background:var(--c-accent); color:#fff; border-radius:999px; margin-left:8px; }
        .small{ font-size:12px; color:var(--c-muted); }

        [data-view]{ display:none; }
        [data-view].show{ display:block; }

        .spinner{ width:18px; height:18px; border:2px solid #ddd; border-top-color:var(--c-primary); border-radius:50%; animation:spin 1s linear infinite; display:inline-block; vertical-align:middle; }
        @keyframes spin{ to{ transform:rotate(360deg); } }

        label{ display:block; font-size:14px; margin:6px 0 4px; }
        input[type="text"], input[type="date"], input[type="time"], select, textarea{
        width:100%; border:1px solid var(--c-border); border-radius:8px; padding:8px; font-size:15px; background:#fff;
        }
        .listEmpty{ color:#888; font-size:14px; }

        .pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; background:#f5f5f5; border:1px solid var(--c-border); }
        .pill.sm{ font-size:11px; padding:2px 6px; }

        .stat-ok{ background:#e8f8f3; border:1px solid #cdeee4; color:#0a7; }
        .stat-ng{
        background:#eef2f7 !important;
        border:1px solid #d2d9e3 !important;
        color:#334155 !important;
        }
        .stat-pd{ background:#fff7d6; border:1px solid #f3d27a; color:#7a5b00; }
        .stat-na{ background:#f5f5f5; border:1px solid var(--c-border); color:#666; }

        .adminGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        @media (max-width:700px){ .adminGrid{ grid-template-columns:1fr; } }
        .hint{ font-size:12px; color:#777; }

        .tag{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--c-border); background:#f7f7f7; color:#444; }
        .tag.open{ background:#e8f8f3; border-color:#cdeee4; color:#0a7; }
        .tag.closed{ background:#fdeaea; border-color:#f6cccc; color:#c33; }

        header.is-sticky{
        position:sticky; top:0; z-index:50;
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
        }

        .warnBox{ background:#fff7d6; border:1px solid #f3d27a; padding:10px; border-radius:10px; color:#7a5b00; }
        
        /* レイアウト：フッターを最下部に固定（中身が少ないページでも） */
            html, body { height: 100%; }
            body { min-height: 100svh; display: flex; flex-direction: column; }
            main { flex: 1 0 auto; }
            
            /* フッターの見た目 */
            .siteFooter{
            text-align:center; font-size:12px; color:#777;
            padding: 10px 16px; border-top:1px solid var(--c-border);
            }
            .siteFooter a{ color: var(--c-primary-2); text-decoration:none; }
            .siteFooter .dot{ color:#bbb; margin:0 6px; }
        
        a.btn, button.btn{
        display:inline-flex; align-items:center; justify-content:center;
        min-height:40px; padding:10px 14px; border-radius:12px;
        border:1px solid var(--c-border); background:var(--ui-card); color:var(--c-text);
        text-decoration:none; font-size:15px; font-weight:600; letter-spacing:.01em; line-height:1;
        box-shadow:0 2px 8px rgba(107,34,16,.07);
        transition:transform .08s ease, filter .12s ease, box-shadow .12s ease;
        cursor:pointer;
        }
        .btn-primary{
        color:#fff !important;
        border-color:#8c3218 !important;
        background-image:var(--ui-primary-gradient) !important;
        background-color:var(--c-primary) !important;
        }
        .btn-outline{ background:var(--ui-card) !important; color:var(--c-primary-2) !important; border-color:var(--ui-accent-border) !important; }
        .btn-sm{ padding:8px 12px; min-height:36px; font-size:14px; border-radius:10px; }
        .btn-lg{ padding:12px 16px; min-height:44px; font-size:16px; border-radius:14px; }
        .btnRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; margin:8px 0; }
        .btnRow .btn{ flex:1 1 100%; }
        @media (min-width:600px){
        .btnRow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
        .btnRow .btn{ width:100%; }
        }
        a.btn:focus-visible,
        button.btn:focus-visible,
        summary:focus-visible,
        a:focus-visible,
        button:focus-visible{
        outline:2px solid rgba(160,60,32,.45);
        outline-offset:3px;
        }

        /* Base: セレクトをボタン風にする共通スタイル */
            .selectBtn{
            border: 1.5px solid var(--c-primary-2);
            background: #fff;
            color: var(--c-primary-2);
            border-radius: 10px;
            box-shadow: 0 1px 4px rgba(160,60,32,0.10);

            height: 36px;
            min-height: 36px;
            padding: 6px 12px;
            font-size: 14px;

            -webkit-appearance: none;
            appearance: none;
            }
        .selectBtn:focus{
            outline: none;
            box-shadow: 0 0 0 3px rgba(160,60,32,.16);
        }

            /* === disabledテキスト入力の見た目をselectと統一（iOS/Safari対応） === */
            .selectBtn:disabled,
            input[type="text"]:disabled,
            input[type="date"]:disabled,
            input[type="time"]:disabled,
            textarea:disabled {
            color: #888 !important;                     /* テキスト色 */
            -webkit-text-fill-color: #888 !important;   /* iOS/Safariで薄くなるのを防ぐ */
            opacity: 1 !important;                      /* iOSの透明度低下を打ち消す */
            background: #f6eee7 !important;             /* 既存ルールと統一 */
            border-color: #ead8ce !important;
            box-shadow: none;
            cursor: not-allowed;
            }
            
            /* placeholderも濃さを統一する */
            input[type="text"]:disabled::placeholder,
            input[type="date"]:disabled::placeholder,
            input[type="time"]:disabled::placeholder,
            textarea:disabled::placeholder {
            color: #888 !important;
            opacity: 1 !important;
            }
            
            /* Safari旧挙動の保険 */
            input[type="text"]:disabled::-webkit-input-placeholder,
            input[type="date"]:disabled::-webkit-input-placeholder,
            input[type="time"]:disabled::-webkit-input-placeholder,
            textarea:disabled::-webkit-input-placeholder {
            color: #888 !important;
            opacity: 1 !important;
            }

            /* 区切り線（Tailwindの .line 相当） */
            .line{
            height: 1px;
            margin: 12px 0;
            background: var(--c-border);
            }

            /* 入力のフォーカス時にうっすら紫リングを付けたい場合 */
            input[type="text"],
            input[type="date"],
            input[type="time"],
            select,
            textarea{
            outline: none;
            }

            input[type="text"]:focus,
            input[type="date"]:focus,
            input[type="time"]:focus,
            select:focus,
            textarea:focus{
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 25%, transparent);
            border-color: color-mix(in srgb, var(--c-primary-2) 40%, var(--c-border));
            }

            /* ---- 軽い削除ボタン（見た目を他ボタンと差別化） ---- */
            .btn-remove{
            background:#fff !important;
            color:#222 !important;                         /* 黒系文字 */
            border:1px solid #ead8ce !important;           /* ごく薄い朱色の枠 */
            box-shadow:
                0 2px 10px rgba(160,60,32,0.08),             /* 薄い朱色のソフトシャドウ */
                0 1px 0 rgba(0,0,0,0.02) inset;
            transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
            }
            .btn-remove:hover{
            filter: brightness(0.98);
            box-shadow:
                0 3px 12px rgba(160,60,32,0.12),
                0 1px 0 rgba(0,0,0,0.03) inset;
            }
            .btn-remove:active{
            transform: translateY(1px);
            }
            .btn-remove:focus-visible{
            outline: none;
            box-shadow:
                0 0 0 3px rgba(160,60,32,0.12),              /* フォーカス時に薄いリング */
                0 2px 10px rgba(160,60,32,0.10);
            }
            /* 無効時の視覚（全体ルールに準拠） */
            .btn-remove[disabled]{
            opacity: .55;
            pointer-events: none;
            cursor: not-allowed;
            filter: saturate(.6);
            }

            /* 汎用：コンパクトボタン */
            .btn-compact{
                min-height:30px;
                padding:6px 10px;
                font-size:13px;
                border-radius:9px;
            }     
        
        /* プレースホルダ行（value=""）の色 */
            .selectBtn option[value=""]{
                color: #9aa;
            }
        
        /* ===== Seg Badge（区分バッジ共通） ===== */
        .seg-badge{
        display:inline-flex; align-items:center; justify-content:center;
        height:20px; padding:0 8px; border-radius:999px;
        font-size:11px; font-weight:700; white-space:nowrap;
        border:1.5px solid; margin-right:8px;
        }
        .seg-adult { 
        color:#1d4ed8; background:#e6f0ff; border-color:#60a5fa; /* 青系(水色背景) */
        }
        .seg-child {
        color:#b91c1c; background:#ffecec; border-color:#f59e9e; /* 落ち着いた赤 */
        }
        .seg-both  {
        color:#6d5a93; background:#f1eaff; border-color:#bda8ea; /* 紫系 */
        }

        /* 「区分」セレクトを全幅 */
        #view-register .selectBtn{
        width: 100%;
        min-width: 0;
        }

        /* バッジの色設計 */
        .badge-att{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            height:22px;
            padding:0 8px;
            border-radius:999px;
            font-size:12px;
            font-weight:700;
            border:1.5px solid;
        }
        .badge-att.yes   { color:#047857; background:#ecfdf5; border-color:#a7f3d0; }
        .badge-att.no    { color:#b91c1c; background:#fef2f2; border-color:#fecaca; }
        .badge-att.maybe { color:#92400e; background:#fffbeb; border-color:#fde68a; }
        .badge-att.na    { color:#475569; background:#f1f5f9; border-color:#cbd5e1; }

        /* 区分バッジ：やや小さめ */
        .seg-badge.sm{
            height:20px;
            padding:0 8px;
            font-size:11px;
        }

        /* 種別バッジ：右端＆四角 */
        .kind-badge{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            height:20px;
            padding:0 10px;
            border-radius:6px;
            font-size:11px;
            border:1.5px solid var(--c-border);
            background:#f7f7f7;
            color:#444;
            line-height:1;
            white-space:nowrap;
        }
        
        /* 種別バッジの配色（発表 / 練習 / その他） */
        .kind-badge,
        .scKind{
        border-color: transparent;
        }

        /* 発表：黄系 */
        .kind-badge.badge--announce,
        .scKind.badge--announce{
        background:#FEF3C7;
        border-color:#F59E0B;
        color:#92400E;
        }

        /* 練習：緑系 */
        .kind-badge.badge--practice,
        .scKind.badge--practice{
        background:#ECFDF5;
        border-color:#10B981;
        color:#065F46;
        }

        /* その他：紫系 */
        .kind-badge.badge--other,
        .scKind.badge--other{
        background:#F5F3FF;
        border-color:#8B5CF6;
        color:#5B21B6;
        }

        /* 出欠カード全体を配置の基準にする */
        .fEvent{
            position: relative;
        }

        /* 出欠フォーム内の区分バッジだけ右上固定 */
        .fEvent .seg-badge{
            position: absolute;
            top: 10px;
            right: 16px;
            margin-right: 0;
        }

        /* バッジの幅＋余白ぶん。必要に応じて調整 */
        .fEvent .fRow1{
            padding-right: 80px; /* 必要なら調整 */
        }

        /* ===== 保存中オーバーレイ ===== */
        .saving-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        }

        .saving-overlay.show {
        display: flex;
        }

        .saving-dialog {
        background: #fff;
        border-radius: 12px;
        padding: 16px 20px;
        min-width: 220px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        text-align: center;
        font-size: 14px;
        }

        .saving-dialog .spinner {
        display: inline-block;
        margin-bottom: 8px;
        }

        .saving-message {
        white-space: nowrap;
        }
    /* ===== Attendance Form（出欠フォーム） ===== */
        .fEvent{ border:1px solid var(--c-border); border-radius:12px; background:#fff; margin:10px 0; }
        .fHead{ padding:10px 12px; cursor:pointer; }
        .fBody{ display:none; padding:0 12px 12px; }
        .fEvent.open .fBody{ display:block; }
        .fTitleRow{ display:flex; align-items:baseline; gap:6px; }
        .fTitleRow .t-date{ white-space:nowrap; }
        .fTitleRow .t-place{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto; }
        .fStatusRow{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
        .fSub{ margin-top:4px; font-size:12px; color:var(--c-muted); }
        .badge-unsaved{
            display:inline-flex; align-items:center; justify-content:center;
            padding:2px 8px; height:22px; border-radius:999px;
            font-size:11px; font-weight:600;
            color:#b45309; border:1.5px solid #f59e0b; background:#fff8e6; white-space:nowrap;
        }
        
        /* ===== 出欠フォーム：開いた時のヘッダー色を区分別に ===== */
        .fEvent[data-seg="child"].open .fHead { background:#ffecec; } /* 子ども=淡赤 */
        .fEvent[data-seg="adult"].open .fHead { background:#e6f0ff; } /* 大人=淡青 */
        .fEvent[data-seg="both"].open  .fHead { background:#efe7ff; } /* 両方=既存(紫) */
        /* ===== ① アコーディオン色：閉じた時/ホバー時/開いた時を区分別に統一 ===== */
        /* デフォルト（閉じている時）は透明にして枠色だけ見せる */
        .fEvent[data-seg] .fHead{ background: transparent; }
        
        /* ホバー時 */
        .fEvent[data-seg="child"] .fHead:hover { background:#fff5f5; } /* 淡い赤 */
        .fEvent[data-seg="adult"] .fHead:hover { background:#f2f7ff; } /* 淡い青 */
        .fEvent[data-seg="both"]  .fHead:hover { background:#f5efff; } /* 既存の淡紫 */
        
        /* 開いた時（既に設定済みでもOK。ここで最終上書き） */
        .fEvent[data-seg="child"].open .fHead { background:#ffecec; }
        .fEvent[data-seg="adult"].open .fHead { background:#e6f0ff; }
        .fEvent[data-seg="both"].open  .fHead { background:#efe7ff; }
        
        /* ===== ② 角のはみ出し対策（背景を枠内で丸めてクリップ） ===== */
        .fEvent{
        overflow: hidden;                 /* 子要素の背景が枠外へ出ないように */
        }
        .fEvent .fHead{
        border-top-left-radius:  inherit; /* コンテナの角丸に合わせる */
        border-top-right-radius: inherit;
        background-clip: padding-box;     /* Safari等のにじみ対策 */
        }

        /* イベントカード類（トップ/フォーム/予定/管理一覧） */
        .card[data-seg="child"], .fEvent[data-seg="child"], .eventRow[data-seg="child"]{
        border-color: var(--seg-child-border) !important;
        }
        .card[data-seg="adult"], .fEvent[data-seg="adult"], .eventRow[data-seg="adult"]{
        border-color: var(--seg-adult-border) !important;
        }
        .card[data-seg="both"], .fEvent[data-seg="both"], .eventRow[data-seg="both"]{
        border-color: var(--seg-both-border) !important;
        }
        
        /* ===== 出欠フォーム 見た目調整 ===== */
        /* ① 日付・時間・@場所 を太字に */
        .fTitleRow .t-date,
        .fTitleRow .t-place{
            font-weight: 700;
        }

        /* ② ガイド文（枠なし・背景なし・文字のみ） */
        #view-form #formEventsBox.guidePlain{
            background: transparent;
            border: 0;
            padding: 0;
            margin: 4px 0 8px;
        }

        /* ③ アコーディオン：選択中の色を少し濃い紫に */
        .fHead{ transition: background-color .12s ease; }
        .fHead:hover{ background: #f5efff; }
        .fEvent.open .fHead{ background: #efe7ff; } /* ←濃いめに */
    
        /* ④ 名前の丸い枠を廃止してシンプルに */
            .nameLabel{
                font-weight: 600;
                color: #444;
                /* 枠・背景なし */
                padding: 0;
                border: 0;
                background: transparent;
            }

            /* ⑤ 名前と小さめプルダウンを同一行に配置 */
            .row-att{
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
            }
            .attSel{
                min-width: 120px;
                width: auto;
                height: 34px;
                font-size: 14px;
                padding: 6px 10px;
            }

            /* 出欠フォーム：「名前 + セレクト」行で右側だけ固定幅にしたい */
            .row-att .selectBtn{
            width: 120px;
            min-width: 120px;
            }

            /* === 出欠フォーム ヘッダー2行化 === */
            .fRow1, .fRow2{ display:flex; align-items:baseline; gap:6px; }

            /* 1行目：左=日付時刻 / 右=区分バッジ */
            .fRow1 .t-date{ white-space:nowrap; }
            .fRow1 .seg-badge{ margin-left:auto; }    /* 右端寄せ */

            /* 2行目：左=タイトル（省略可） / 右= @場所（1行固定） */
            .fRow2 .t-title{
                min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
            }
            .fRow2 .t-place{ white-space:nowrap; }

            /* 既存の太字指定を新レイアウトにも適用（サイズ変更なし） */
            .fRow1 .t-date{ font-weight:700; }

            /* ===== 出欠：セグメントを独立行にしたときの余白 ===== */
            .fHead .seg-badge{
                margin: 0 0 4px 0;
            }
            
            /* ===== ガイドの赤強調 ===== */
            .em-red{
                color: var(--c-err);
                font-weight: 700;
            }

            /* ===== 送信ボタン：送信中は薄い紫＆操作不可 ===== */
            .btn-primary[disabled],
            .btn-primary:disabled{
                background: var(--ui-secondary) !important;
                border-color: #ead0c2 !important;
                color: var(--c-primary-2) !important;
                cursor: not-allowed !important;
                pointer-events: none !important;          /* タップ無効（多重送信防止） */
                box-shadow: none !important;
                filter: saturate(.85);
            }
            /* すべてのボタンの disabled 視覚 */
            button[disabled],
            .btn[disabled],
            button:disabled,
            .btn:disabled{
                opacity: .55;
                pointer-events: none;
                cursor: not-allowed;
                filter: saturate(.6);
            }

            /* =========================================================
            ゴーストボタン（#btnFetchSchedules など）を紫ボーダーに統一
            既存 .btn, .btn-sm を活かして「色味」だけを合わせます
            ========================================================= */
            .btn.btn-ghost{
                background: #fff !important;
                color: var(--c-primary-2) !important;
                border: 1px solid color-mix(in srgb, var(--c-primary-2), #000 10%) !important;
                box-shadow: 0 1px 4px rgba(160,60,32, 0.08); /* ごく薄い影 */
                transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
            }
            .btn.btn-ghost:hover{
                background: color-mix(in srgb, var(--c-primary), #fff 90%) !important; /* わずかに紫が乗る */
                border-color: var(--c-primary) !important;
                color: var(--c-primary-2) !important;
                box-shadow: 0 2px 8px rgba(160,60,32, 0.12);
            }
            .btn.btn-ghost:focus-visible{
                outline: 2px solid color-mix(in srgb, var(--c-primary), #000 0%) !important;
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary), #fff 80%) !important;
            }

            /* === 出欠フォーム見出し（2行目）：タイトルと @場所の調整 === */
                .fRow2 .t-title{
                /* タイトルを少し小さく＋太字 */
                font-size: 15px ;   /* お好みで 14〜16px に調整OK */
                font-weight: 700 ;  /* 太字 */
                }
                
                .fRow2 .t-place{
                /* @場所は少し小さく */
                font-size: 14px ;   /* お好みで 13〜15px に調整OK */
                font-weight: 400 ;  
                margin-left: .5em;            /* タイトルとの間を少し空ける（任意） */
                }

                .fEvent.readonly {
                opacity: 0.9;
                background: #f7f7f7;
                }

                .row-att-readonly .attLabel {
                margin-left: 8px;
                font-weight: 600;
                }

                .commentReadOnly .commentText {
                font-weight: 500;
                }

                .fEvent.readonly .selectBtn,
                .fEvent.readonly input.evComment {
                pointer-events: none;
                }
                /* 展開後の「＠場所」(締切済みカード内) を小さく・控えめに */
                .fPlaceDetail {
                font-size: 12px;          /* ← ここで小さくする。11〜13あたりお好みで */
                color: var(--c-muted);    /* 既存の muted とトーンを合わせる */
                margin-bottom: 4px;       /* 下にちょっと余白 */
                }
    /* ===== Schedules（今後の予定） ===== */   
        /* 2行のラベル プルダウン配置 */
        /* ラベル｜セレクト の2列グリッド。要素は [label, select, label, select, span2...] の順 */
        .schedControls{
        display: grid;
        grid-template-columns: auto max-content; /* 左=ラベル、右=プルダウン */
        gap: 10px 14px;
        align-items: center;
        justify-content: start;
        }    

        .schedControls .field{
        display: flex;
        flex-direction: column;
        min-width: 0;
        }
        .schedControls .span2{
        grid-column: 1 / -1; /* 2列ぶち抜きで下段にボタン */
        }
        
        /* プルダウンを短め幅に（内容量に応じて調整可） */
        .schedSel{
        width: 160px;          /* コンパクト幅（ご希望に応じて 140〜200pxで微調整可） */
        max-width: 100%;
        }
        
        /* モバイルで列落ちしても綺麗に見せる */
        @media (max-width: 420px){
        .schedControls{
            grid-template-columns: 1fr 1fr; /* 2列のままでもOK。1列にしたければ 1fr に */
        }
        .schedSel{
            width: 100%; /* 極端に狭い端末では全幅にして文字切れを防止 */
        }
        }
        
        /* ラベル側のスタイル（任意） */
        .scLabel{
        font-size: 14px;
        color: var(--c-text);
        white-space: nowrap;
        }
        
        /* プルダウンを短め幅に（前回より“半分”寄りのサイズ） */
        .schedSel.short{
        width: 120px;                  /* 目安：前回160px → 120px。さらに短くしたければ 96〜110pxなどに */
        max-width: 100%;
        }
        
        /* 端末幅が狭い時の保険：文字が見切れないように */
        @media (max-width: 420px){
        .schedSel.short{
            width: clamp(100px, 40vw, 128px); /* 端末に応じて少し伸縮 */
        }
        }
    
    /* ===== Schedules: カードレイアウト（ホーム） ===== */
        /* === 今後の予定：左日付カラム版 === */
        .scheduleCard{
            position:relative;
            cursor:pointer;
            display:grid;
            grid-template-columns:92px minmax(0,1fr);
            gap:12px;
            padding:12px;
        }
        .scDateCol{
            position:relative;
            padding-right:10px;
            display:flex;
            flex-direction:column;
            justify-content:center;
            min-width:0;
        }
        .scDateCol::after{
            content:"";
            position:absolute;
            top:6px;
            bottom:6px;
            right:0;
            width:1px;
            background:var(--c-border);
        }
        .scMonth{
            font-size:13px;
            color:var(--c-muted);
            line-height:1.2;
        }
        .scDay{
            font-size:48px;
            font-weight:800;
            line-height:1;
            margin:2px 0;
            letter-spacing:.01em;
        }
        .scDow{
            font-size:13px;
            color:var(--c-muted);
            line-height:1.2;
            min-height:1.2em;
        }
        .scBodyCol{
            min-width:0;
            display:grid;
            gap:8px;
            align-content:start;
        }
        .scTopRow{
            display:flex;
            align-items:flex-start;
            gap:8px;
            min-width:0;
        }
        .scTopRow .seg-badge{ margin-right:0; }
        .scRight{
            margin-left:auto;
            min-width:0;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .scRight .kind-badge{ margin-right:0; }
        .scTitleBtn{
            all:unset;
            cursor:pointer;
            min-width:0;
            width:100%;
            display:flex;
            align-items:baseline;
            gap:8px;
        }
        .scTitleBtn .scTime{
            flex:0 0 auto;
            font-weight:600;
            white-space:nowrap;
            color:#333;
        }
        .scTitleBtn .scTitle{
            flex:1 1 auto;
            min-width:0;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            font-weight:700;
        }
        .scTitleBtn[aria-expanded="true"] .scTitle{
            white-space:normal;
            overflow:hidden;
            text-overflow:clip;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
        }
        .scTitleBtn .scCaret{
            flex:0 0 auto;
            margin-left:8px;
            font-size:16px;
            line-height:1;
        }
        .scPanel{ margin-top:2px; }
        .scMemo{
            margin:0;
            font-size:13px;
            color:#444;
        }
        .scMeta{
            font-size:13px;
            color:var(--c-text);
            margin-top:4px;
            display:flex;
            flex-direction:column;
            gap:4px;
        }
        .scMeta .scLine{
            display:flex;
            align-items:flex-start;
            gap:.5em;
            min-width:0;
        }
        .scMeta .lbl{
            flex:0 0 4.6em;
            font-weight:700;
            white-space:nowrap;
        }
        @media (max-width:420px){
            .scheduleCard{
                grid-template-columns:84px minmax(0,1fr);
                gap:10px;
                padding:10px;
            }
            .scDay{ font-size:42px; }
            .scTitleBtn{ gap:6px; }
        }

    /* ===== Admin（管理画面） ===== */adminListFetch
        /* 管理アコーディオン：ラベル｜プルダウンの2列グリッド */
        .adminControls{
            display:grid;
            grid-template-columns: auto max-content;
            gap:10px 14px;
            align-items:center;
            justify-content:start;
        }
        .adminControls .span2{
            grid-column:1 / -1;
            display:flex;
            justify-content:flex-start;
            margin-top:4px;
        }
        .admLabel{
            font-size:14px;
            color:var(--c-text);
            white-space:nowrap;
        }

        @media (max-width: 420px){
            .adminControls{
            grid-template-columns:1fr 1fr;
            }
            .adminControls select{
            width:100%;
            }
        }

        /* 管理アコーディオン：プルダウン幅をさらに半分くらいに */
        #adminListAcc .adminControls .schedSel.short{
            width:100px !important;
            min-width:100px !important;
            max-width:100%;
        }
        @media (max-width: 420px){
            #adminListAcc .adminControls .schedSel.short{
            width:100px !important;
            min-width:100px !important;
            }
        }

        /* 上部アコーディオンのヘッダーを常時うす紫、open時は少し濃く */
        #adminListAcc .fHead{
            background:#fbf1eb !important;
            border-radius:10px;
        }
        #adminListAcc.open .fHead{
            background:var(--ui-secondary) !important;
        }

        /* アコーディオン内の編集ボタンを小さめ＆薄めトーンに */
        #adminListAcc .btn-edit{
            min-height: 32px;
            padding: 6px 10px;
            font-size: 13px;
            border-radius: 9px;
            background:#fff !important;
            color: color-mix(in srgb, var(--c-primary-2), #000 0%) !important;
            border: 1px solid color-mix(in srgb, var(--c-primary-2), #000 12%) !important;
            box-shadow: 0 1px 3px rgba(160,60,32,0.08);
        }
        #adminListAcc .btn-edit:hover{
            background:#fff8f4 !important;
            border-color: color-mix(in srgb, var(--c-primary-2), #000 20%) !important;
        }
        
        /* 管理アコーディオン：開閉をIDで強制表示 */
        #adminListAcc .fBody{ display:none; }
        #adminListAcc.open .fBody{ display:block; }

        /* 管理アコーディオン：再取得ボタンもコンパクトに */
        #adminListAcc #btnAdminFetch{
            min-height:30px;
            padding:6px 10px;
            font-size:13px;
            border-radius:9px;
        }

        /* 管理アコーディオン：中身の余白 */    
        #adminListAcc .fBody{ padding-top:12px !important; }
        #adminListAcc .adminControls{ margin-top:4px; }
        
        /* トップの未定/未回答のみ表示：シンプル表示 */
        #homeOnlyNALabel{
            display:inline-flex;
            align-items:center;
            gap:6px;
            background:transparent !important;
            border:0 !important;
            padding:0 !important;
            box-shadow:none !important;
            font-size:12px;
            color:var(--ui-muted-fg);
            cursor:pointer;
            white-space:nowrap;
        }
        #homeOnlyNALabel input{
            width:16px;
            height:16px;
            accent-color:var(--ui-primary);
        }

        /* 管理用カードのボタンをチップ型に */
        #adminMenu a.btn,
        #adminMenu button.btn{
            min-height:30px !important;
            padding:6px 12px !important;
            font-size:13px !important;
            border-radius:999px !important;
            background:var(--ui-secondary) !important;
            border-color:var(--ui-accent-border) !important;
            color:var(--ui-secondary-fg) !important;
            box-shadow:none !important;
        }

        #view-home{ padding-bottom:8px; }
        #hello{
            margin:0 0 18px;
            font-size:15px;
            line-height:1.7;
            color:var(--ui-muted-fg);
        }
        #hello .helloName{
            color:var(--ui-primary-dark);
            font-weight:700;
        }
        .adminMenuCard{
            overflow:hidden;
            padding:0;
        }
        .adminMenuSummary{
            list-style:none;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:13px 16px;
            cursor:pointer;
            user-select:none;
        }
        .adminMenuSummary::-webkit-details-marker{ display:none; }
        .adminMenuTitle{
            font-size:13px;
            font-weight:700;
            color:var(--ui-muted-fg);
            letter-spacing:.06em;
        }
        .adminMenuCaret{
            width:18px;
            height:18px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            color:var(--ui-muted-fg);
            transition:transform .14s ease;
        }
        #adminMenu[open] .adminMenuCaret{ transform:rotate(180deg); }
        .adminMenuBody{
            border-top:1px solid var(--ui-divider);
            padding:12px 14px 14px;
        }
        .adminMenuGrid{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .homeActions{
            display:grid;
            grid-template-columns:1fr;
            gap:12px;
            margin:10px 0 20px;
        }
        .homeActions .btn{ width:100%; box-sizing:border-box; }
        .homePrimary{
            position:relative;
            overflow:hidden;
            min-height:78px !important;
            padding:18px 22px !important;
            border-radius:18px !important;
            justify-content:space-between !important;
            text-align:left;
            box-shadow:0 8px 22px rgba(160,60,32,.22) !important;
        }
        .homePrimary::after{
            content:"";
            position:absolute;
            right:-28px;
            bottom:-38px;
            width:116px;
            height:116px;
            border-radius:50%;
            border:1px solid rgba(255,255,255,.30);
            box-shadow:
                0 0 0 18px rgba(255,255,255,.08),
                0 0 0 38px rgba(255,255,255,.06);
            pointer-events:none;
        }
        .homePrimaryText{
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            min-width:0;
        }
        .homePrimaryTitle{
            font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif;
            font-size:21px;
            line-height:1.25;
            font-weight:600;
            letter-spacing:.035em;
            word-break:keep-all;
        }
        .homePrimarySub{
            display:none;
            font-size:13px;
            line-height:1.45;
            opacity:.84;
            font-weight:500;
        }
        .homeArrow{
            position:relative;
            z-index:1;
            font-size:25px;
            line-height:1;
            opacity:.88;
        }
        .homeSecondary{
            min-height:60px !important;
            padding:12px 16px !important;
            border-radius:16px !important;
            justify-content:space-between !important;
            border-width:1.5px !important;
            box-shadow:0 3px 12px rgba(107,34,16,.06) !important;
        }
        .homeSecondaryInner{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
        }
        .homeIcon{
            width:40px;
            height:40px;
            flex:0 0 auto;
            border-radius:12px;
            background:var(--ui-secondary);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            color:var(--ui-primary);
        }
        .homeSecondaryText{
            display:flex;
            align-items:center;
            text-align:left;
            min-width:0;
        }
        .homeSecondaryTitle{
            font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif;
            font-size:16px;
            line-height:1.35;
            font-weight:600;
            letter-spacing:.03em;
            color:var(--ui-primary-dark);
        }
        .homeSecondarySub{
            display:none;
            font-size:12px;
            line-height:1.35;
            color:var(--ui-muted-fg);
            font-weight:500;
        }
        .homeProfileEditSlot{
            display:flex;
            justify-content:center;
            margin:10px 0 16px;
        }
        .homeProfileEditSlot.is-viewer{
            margin-top:-2px;
            margin-bottom:18px;
        }
        .homeEditLink{
            display:inline-flex !important;
            align-items:center;
            justify-content:center;
            gap:.45em;
            width:auto !important;
            min-height:44px !important;
            padding:5px 12px !important;
                border:1px solid rgba(160,60,32,.14) !important;
                border-radius:12px !important;
                background:rgba(253,249,244,.88) !important;
                color:var(--ui-primary-dark) !important;
                box-shadow:0 4px 14px rgba(107,34,16,.08) !important;
            justify-self:center;
            text-decoration:none;
            font-size:13px !important;
            font-weight:700;
            white-space:nowrap;
            word-break:keep-all;
        }
        .homeEditLinkIcon{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:1.55em;
            height:1.55em;
            border-radius:999px;
            background:rgba(160,60,32,.10);
            color:var(--ui-primary);
            font-size:.9em;
            line-height:1;
            flex:0 0 auto;
        }
        .homeEditLink:hover{
            background:rgba(244,228,220,.72) !important;
            border-color:rgba(160,60,32,.22) !important;
            box-shadow:0 6px 18px rgba(107,34,16,.12) !important;
        }
        .homeEditLink:focus-visible{
            background:rgba(244,228,220,.72) !important;
            border-color:rgba(160,60,32,.28) !important;
            box-shadow:0 0 0 3px rgba(160,60,32,.14), 0 6px 18px rgba(107,34,16,.12) !important;
        }
        .homeCardTitle{
            display:flex;
            align-items:center;
            gap:8px;
            color:var(--ui-primary-dark);
        }
        .homeCardTitle::before{
            content:"";
            width:3px;
            height:16px;
            border-radius:999px;
            background:var(--ui-primary);
            flex:0 0 auto;
        }
        .homePrimary:active,
        .homeSecondary:active,
        .homeEditLink:active{
            transform:translateY(1px) scale(.99);
        }

        /* 管理フォームのみ：注釈の文字をさらに小さく（10px） */
        #view-admin .hint{
            font-size: 10px !important;
            line-height: 1.55;
        }

        /* 管理フォーム：ラベル下の注釈 */
        #view-admin .admNote{
        display:block;
        font-size:10px;     /* hint と同じ */
        line-height:1.35;
        margin-top:2px;
        }

        /* 管理画面：備考 textarea を他inputと同じ見た目に寄せる */
        #view-admin #ad_note{
        -webkit-appearance: none;
        appearance: none;

        border: 1px solid var(--c-border) !important;
        border-radius: 8px !important;
        background: #fff !important;

        padding: 8px !important;
        font-size: 15px !important;
        line-height: 1.4;

        box-shadow: none !important;
        resize: none; /* つまみが出る端末対策 */
        }

        /* フォーカス時も他と同じ */
        #view-admin #ad_note:focus{
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 25%, transparent) !important;
        border-color: color-mix(in srgb, var(--c-primary-2) 40%, var(--c-border)) !important;
        }

        /* プレースホルダの見え方も揃える（必要なら） */
        #view-admin #ad_note::placeholder{
        color: #9aa;
        }

    /* ===== Register（氏名編集） ===== */
        .notify-row{
        display:flex;
        align-items:flex-start;
        gap:8px;
        margin:10px 0 0;
        cursor:pointer;
        }
        .notify-row input[type="checkbox"]{
        flex:0 0 auto;
        width:18px;
        height:18px;
        margin:2px 0 0;
        accent-color:var(--ui-primary);
        }
        .notify-main-label{
        min-width:0;
        font-size:13.5px;
        line-height:1.55;
        color:var(--c-text);
        }
        .notify-note{
        margin:4px 0 10px 26px;
        font-size:12px;
        line-height:1.65;
        color:var(--ui-muted-fg);
        word-break:normal;
        overflow-wrap:anywhere;
        }
        .regAddRow { 
        margin-top: 12px;               /* 上と詰まらないように余白を追加 */
        align-items:center;
        gap:12px;
        flex-wrap:nowrap;
        }
        .regAddRow .sectionTitle{
        min-width:0;
        font-size:.98em;
        line-height:1.35;
        word-break:keep-all;
        }
        #btnAddPerf{
        flex:0 0 auto;
        min-width:144px;
        padding-left:12px;
        padding-right:12px;
        font-size:13.5px;
        white-space:nowrap;
        word-break:keep-all;
        line-height:1.25;
        }
        #regNote {
        margin: 6px 0 8px;               /* タイトル直下の注意書きの行間 */
        font-size: 12px;
        color: var(--c-muted);
        }

        .perfRow{
        display: grid;
        grid-template-columns:minmax(0, 1fr) minmax(132px, 0.34fr);
        grid-auto-rows: auto;
        column-gap:10px;
        row-gap:10px;
        margin:12px 0;
        align-items: center;
        }
        .perfRow .perfLabel{
        grid-column: 1 / -1;               /* ラベルは2列ぶち抜き */
        font-size: 12px;
        color: var(--c-muted);
        }
        .perfRow .regPerf{
        grid-column: 1 / 2;                /* 左：名前 */
        width: 100%;
        height: 44px;
        min-width:0;
        }
        .perfRow .regPerfSeg{
        grid-column: 2 / 3;                /* 右（上段）：区分セレクト */
        width: 100%;
        min-width:132px;
        height: 44px;
        white-space:nowrap;
        word-break:keep-all;
        text-align:center;
        padding-left:10px;
        padding-right:10px;
        }
        .perfRow .btn-remove{
        grid-column: 2 / 3;                /* 右（下段）：削除ボタン */
        width: 100%;
        min-width:132px;
        min-height: 40px;
        height: 44px;
        padding: 0 12px;
        border-radius: 12px;
        justify-self: stretch;
        align-self: end;
        white-space:nowrap;
        word-break:keep-all;
        }
        #view-register .btn,
        #view-register .selectBtn{
        white-space:nowrap;
        word-break:keep-all;
        }
        @media (max-width: 430px){
        .regAddRow{
            display:grid;
            grid-template-columns:1fr;
            align-items:start;
            justify-content:stretch;
        }
        .regAddRow .sectionTitle{
            font-size:.95em;
        }
        #btnAddPerf{
            justify-self:end;
            min-width:0;
        }
        }
        @media (max-width: 380px){
        .perfRow{
            grid-template-columns:1fr;
        }
        .perfRow .regPerf,
        .perfRow .regPerfSeg,
        .perfRow .btn-remove{
            grid-column:1 / -1;
            width:100%;
            min-width:0;
        }
        }
    
    /* ===== Admin Report（出欠レポート） ===== */
        /* ===== 出欠結果一覧：プルダウンの行（ラベル右にセレクト） ===== */
        .repControls{
            display: grid;
            grid-template-columns: auto minmax(0, 1fr); 
            gap: 10px 14px;
            align-items: center;
            justify-content: start;
        }
        .repControls .span2{
            grid-column: 1 / -1;
            display: flex;
            justify-content: flex-start;
            margin-top: 4px;
        }
        .repLabel{
            font-size: 14px;
            color: var(--c-text);
            white-space: nowrap;
        }

        /* ===== 出欠結果バッジ（管理レポート・旧レイアウト） ===== */
        .repCard{
            background:#fff;
            border:1px solid var(--c-border);
            border-radius:12px;
            padding:12px;
        }
        .repHead{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            align-items:center;
            margin-bottom:8px;
        }
        .repTitle{ font-weight:700; }
        .repSub  { font-size:12px; color:var(--c-muted); }

        .repRow{
            display:flex;
            align-items:baseline;
            gap:8px;
            padding:6px 0;
            border-top:1px dashed #eee;
        }
        .repRow:first-child{ border-top:0; }

        .repName{ font-weight:600; min-width:9em; }
        .repAt  { font-size:12px; color:var(--c-muted); }

        
        .repNA{
            margin-top:10px;
            padding-top:8px;
            border-top:1px solid var(--c-border);
            font-size:13px;
            color:#475569;
        }

        /* 管理レポート：名前⇔コメントの間を固定ギャップで */
        #view-admin-report .repPersonRow{
            display:flex;
            align-items:flex-start;
            gap:10px;
        }
        #view-admin-report .repPersonRow .repName{
            flex:0 0 auto;
        }
        #view-admin-report .repPersonRow .repAt{
            flex:1 1 auto;
            min-width:0;
            display:flex;
            align-items:baseline;
            overflow-wrap:anywhere;
            word-break:break-word;
        }
        #view-admin-report .repComment{
            display:block;
            flex:1 1 auto;
            min-width:0;
            white-space:normal !important;
            overflow-wrap:anywhere;
            word-break:break-word;
        }
        #view-admin-report .repPersonRow .repAt:empty{
            display:none;
        }
        #view-admin-report .repComment::before{
            content:"｜";
            color:var(--c-muted);
            margin-right:.5em;
            opacity:.7;
            flex:0 0 auto;
        }

       /* 管理レポート内のセレクトをカード内いっぱいに */
        #view-admin-report .repControls select{
            display:block;
            width:100%;
            max-width:100%;
            box-sizing:border-box;
        }
        /* 各ステータスグループの間に点線を入れる */
        #view-admin-report .repGroup + .repGroup{
        margin-top: 14px;              /* グループ同士の間隔 */
        padding-top: 12px;
        border-top: 1px dashed var(--c-border);
        }

        /* 「参加 / 未定 / 欠席 / 未回答」見出しまわりの余白 */
        #view-admin-report .repGroupHead{
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
        }

        /* 1人分の行の上下に少し余白をつけて行間を広げる */
        #view-admin-report .repPersonRow{
        padding: 2px 0;
        }

        /* 名前とコメントの行間を気持ち広めに */
        #view-admin-report .repName,
        #view-admin-report .repComment{
        line-height: 1.5;
        }

        /* グループ末尾と次の点線の間が詰まりすぎないように */
        #view-admin-report .repGroup:last-child{
        margin-bottom: 4px;
        }
        /* ===== Admin Report：ヘッダーのレイアウト ===== */
        #view-admin-report .repHeader{
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px dashed var(--c-border); /* ← イベント情報の下に点線 */
        }

        #view-admin-report .repLine{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        }

        #view-admin-report .repLeft{
        flex: 1 1 auto;
        min-width: 0;
        }

        #view-admin-report .repRight{
        flex: 0 0 auto;
        }

        #view-admin-report .repTitle{
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 2px;
        }

        #view-admin-report .repMeta{
        font-size: 13px;
        color: var(--c-muted);
        }

        #view-admin-report .repPlace{
        margin-left: .25em;
        }

        /* ===== Admin Report：受付中 / 締切 バッジ ===== */
        #view-admin-report .badge-status{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        height: 24px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid transparent;
        box-sizing: border-box;
        }

        #view-admin-report .badge-status.open{
        color: #047857;
        background: #ecfdf5;
        border-color: #a7f3d0;
        }

        #view-admin-report .badge-status.closed{
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca;
        }

        /* ===== Admin Carpool（配車補助） ===== */
        #view-admin-carpool .carpoolControls{
            display:grid;
            grid-template-columns:auto minmax(0, 1fr) auto minmax(72px, 120px);
            gap:10px 14px;
            align-items:center;
        }
        #view-admin-carpool,
        #view-admin-carpool *{
            box-sizing:border-box;
        }
        #view-admin-carpool .carpoolControls select,
        #view-admin-carpool .carpoolControls input{
            width:100%;
            box-sizing:border-box;
            min-width:0;
        }
        #view-admin-carpool .carpoolSummary{
            display:grid;
            grid-template-columns:repeat(6, minmax(0, 1fr));
            gap:8px;
            margin:12px 0;
        }
        #view-admin-carpool .carpoolKpi{
            border:1px solid var(--c-border);
            border-radius:10px;
            background:#fff;
            padding:10px;
            min-height:58px;
        }
        #view-admin-carpool .carpoolKpiLabel{
            font-size:12px;
            color:var(--c-muted);
            margin-bottom:4px;
        }
        #view-admin-carpool .carpoolKpiValue{
            font-size:18px;
            font-weight:700;
            line-height:1.3;
        }
        #view-admin-carpool .carpoolKpiValue.ok{ color:#047857; }
        #view-admin-carpool .carpoolKpiValue.warn{ color:#b91c1c; }
        #view-admin-carpool .carpoolAlert{
            border:1px solid #fecaca;
            background:#fef2f2;
            color:#991b1b;
            border-radius:10px;
            padding:10px 12px;
            font-size:13px;
            margin:10px 0;
        }
        #view-admin-carpool .carpoolHint{
            color:var(--c-muted);
            font-size:12px;
            line-height:1.6;
            margin-top:6px;
        }
        #view-admin-carpool .carpoolTable{
            width:100%;
            border:1px solid var(--c-border);
            border-radius:12px;
            background:#fff;
            overflow:hidden;
            box-sizing:border-box;
        }
        #view-admin-carpool .carpoolHead{
            display:none;
        }
        #view-admin-carpool .carpoolRow{
            padding:10px 12px;
            border-top:1px dashed #eee;
            display:block;
            min-width:0;
        }
        #view-admin-carpool .carpoolHead + .carpoolRow{ border-top:0; }
        #view-admin-carpool .carpoolCompact{
            display:block;
            min-width:0;
        }
        #view-admin-carpool .carpoolTopLine{
            display:flex;
            align-items:center;
            gap:8px;
            min-width:0;
        }
        #view-admin-carpool .carpoolCellName{
            flex:1 1 auto;
            min-width:0;
        }
        #view-admin-carpool .carpoolCellAttend{
            flex:0 0 auto;
        }
        #view-admin-carpool .carpoolCellComment{
            margin-top:6px;
            min-width:0;
        }
        #view-admin-carpool .carpoolCellCandidate{
            flex:0 0 auto;
            display:inline-flex;
            align-items:center;
            gap:4px;
            margin:0;
            white-space:nowrap;
            font-size:13px;
        }
        #view-admin-carpool .carpoolCellCapacity{ min-width:0; }
        #view-admin-carpool .carpoolCellDrum{
            display:inline-flex;
            align-items:center;
            gap:4px;
            margin:0;
            white-space:nowrap;
            font-size:13px;
        }
        #view-admin-carpool .carpoolCellMemo{ min-width:0; }
        #view-admin-carpool .carpoolName{
            font-weight:700;
            line-height:1.45;
            overflow-wrap:anywhere;
            min-width:0;
        }
        #view-admin-carpool .carpoolParticipants{
            color:var(--c-muted);
            font-size:11px;
            line-height:1.45;
            margin-top:2px;
            overflow-wrap:anywhere;
        }
        #view-admin-carpool .carpoolComment{
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            overflow:hidden;
            color:#475569;
            font-size:12px;
            line-height:1.45;
            overflow-wrap:anywhere;
            word-break:break-word;
        }
        #view-admin-carpool .carpoolComment:empty::before{
            content:"";
        }
        #view-admin-carpool .carpoolRow.is-open .carpoolComment{
            display:block;
            overflow:visible;
        }
        #view-admin-carpool .carpoolAssist{
            display:inline-flex;
            align-items:center;
            margin-top:4px;
            padding:2px 8px;
            border-radius:999px;
            border:1px solid #c7d2fe;
            background:#eef2ff;
            color:#3730a3;
            font-size:11px;
            font-weight:700;
        }
        #view-admin-carpool .carpoolAssist.weak{
            border-color:#fed7aa;
            background:#fff7ed;
            color:#9a3412;
        }
        #view-admin-carpool .carpoolDetails{
            display:none;
            grid-template-columns:minmax(0, 1fr) auto;
            gap:8px 10px;
            align-items:end;
            margin-top:8px;
            padding-top:8px;
            border-top:1px dashed #eee;
        }
        #view-admin-carpool .carpoolRow.is-open .carpoolDetails{
            display:grid;
        }
        #view-admin-carpool .carpoolDetailLabel{
            display:block;
            color:var(--c-muted);
            font-size:12px;
            font-weight:700;
            margin:0 0 4px;
        }
        #view-admin-carpool .carpoolCellCapacity{
            grid-column:1 / 2;
        }
        #view-admin-carpool .carpoolCellDrum{
            grid-column:2 / 3;
            margin-bottom:3px;
        }
        #view-admin-carpool .carpoolCellMemo{
            grid-column:1 / -1;
        }
        #view-admin-carpool .carpoolCap,
        #view-admin-carpool .carpoolMemo{
            width:100%;
            box-sizing:border-box;
            border:1px solid var(--c-border);
            border-radius:8px;
            padding:7px 8px;
            font-size:16px;
            min-width:0;
        }
        #view-admin-carpool input:disabled{
            background:#f8fafc;
            color:#94a3b8;
        }
        @media (max-width: 900px){
            #view-admin-carpool{
                max-width:100%;
                overflow-x:clip;
            }
            #view-admin-carpool #carpoolBox{
                max-width:100%;
                overflow-x:clip;
            }
            #view-admin-carpool .carpoolControls{
                grid-template-columns:1fr;
            }
            #view-admin-carpool #carpoolEvent,
            #view-admin-carpool #carpoolExtraCount{
                font-size:16px;
            }
            #view-admin-carpool .carpoolSummary{
                grid-template-columns:repeat(2, minmax(0, 1fr));
                gap:6px;
            }
            #view-admin-carpool .carpoolKpi{
                min-width:0;
                padding:8px;
            }
            #view-admin-carpool .carpoolKpiValue{
                font-size:16px;
            }
            #view-admin-carpool .carpoolHead{
                display:none;
            }
            #view-admin-carpool .carpoolTable{
                border-radius:12px;
                overflow:hidden;
            }
            #view-admin-carpool .carpoolRow{
                padding:10px;
            }
            #view-admin-carpool .carpoolName{
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            #view-admin-carpool .carpoolAssist{
                margin-top:3px;
                max-width:100%;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }
        }

        .submitting-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        display: none;          /* JS で切り替え */
        align-items: center;
        justify-content: center;
        z-index: 9999;
        }

        .submitting-overlay .overlay-inner {
        background: #fff;
        padding: 16px 24px;
        border-radius: 12px;
        min-width: 220px;
        text-align: center;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        font-size: 14px;
        }

        .submitting-overlay .overlay-text {
        margin-top: 8px;
        }
    /* ===== Custom Push ===== */ 
        #view-custom-push .card{
        max-width: 720px;
        margin: 12px auto;
        padding: 16px;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0,0,0,.06);
        }
        #view-custom-push .sectionTitle{ margin-bottom: 8px; }

         #view-custom-push .cp-checks{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }
        #view-custom-push .cp-field{
            margin:12px 0;
            display:flex;
            flex-direction:column;
            gap:8px;
        }
        #view-custom-push .cp-textarea{
            width:100%;
            border:1.5px solid rgba(160,60,32,.34);
            background:#fff;
            border-radius:10px;
            padding:10px 12px;
            font-size:16px;
            box-sizing:border-box;
        }
        #view-custom-push .hint{
            color:var(--c-muted);
            font-size:12px;
        }

        #view-custom-push .cp-stat-row{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-start;
            margin-bottom:10px;
        }

        #view-custom-push .cp-pill{
            border:1.5px solid rgba(160,60,32,.16);
            background:rgba(253,249,244,.92);
            border-radius:10px;
            padding:12px;
            margin:10px 0;
            box-shadow:0 2px 10px rgba(107,34,16,.04);
        }
        #view-custom-push .cp-pill-title{
            font-weight:700;
            margin-bottom:4px;
            color:var(--ui-primary-dark);
        }
        #view-custom-push .cp-pill-body{
            color:var(--ui-muted-fg);
        }

        #cp_extra{
            font-size:14px;
            line-height:1.4;
            border-radius:10px !important;
        }

        #view-custom-push .cp-space-1line{
            height:14px;
        }

        #view-custom-push .statWrap.is-disabled{
            background:rgba(244,228,220,.72) !important;
            border:1.5px dashed rgba(160,60,32,.24) !important;
            border-radius:12px !important;
            padding:10px !important;
            opacity:.95 !important;
        }
        #view-custom-push .statWrap.is-disabled label{
            color:var(--ui-muted-fg) !important;
        }
        #view-custom-push .statWrap .lockTag{
            display:inline-flex !important;
            align-items:center;
            gap:6px;
            font-size:12px;
            color:var(--ui-primary-dark);
            background:rgba(253,249,244,.92);
            border:1px solid rgba(160,60,32,.18);
            border-radius:999px;
            padding:2px 8px;
            margin-left:8px;
        }
        #view-custom-push .statWrap .lockTag[hidden]{
            display:none !important;
        }

        #view-custom-push #cp_event{
            font-size:13px;
        }
        #view-custom-push .statWrap{
            background:rgba(253,249,244,.92);
            border:1px solid rgba(160,60,32,.16);
            border-radius:12px;
            padding:10px;
        }
        #view-custom-push .statWrap label{
            display:inline-flex;
            align-items:center;
            gap:5px;
            min-height:24px;
            padding:0;
            border:0;
            border-radius:0;
            background:transparent;
            color:var(--ui-primary-dark) !important;
            font-size:13px;
            cursor:pointer;
            box-shadow:none;
        }
        #view-custom-push .statWrap label:has(input:checked){
            background:transparent;
            border-color:transparent;
            box-shadow:none;
        }
        #view-custom-push .statWrap input[type="checkbox"]{
            accent-color:var(--ui-primary);
        }
        #view-custom-push .statWrap label:focus-within{
            outline:2px solid rgba(160,60,32,.35);
            outline-offset:2px;
        }
        .loadingHint{
            font-size:12px;
            color:var(--c-muted);
        }

        /* タイトル周りの余白を他ページと合わせる */
        #view-custom-push{
            padding:0 !important;
        }
        #view-custom-push > .row-space{
            margin:8px 0 8px !important;
        }
        #view-custom-push .card:first-of-type{
            margin-top:8px !important;
        }

        /* cp_extra_row：固定幅に変更 */
        #cp_extra_row{
            display:grid;
            grid-template-columns: 1fr 180px;
            gap:8px;
        }
        #cp_extra_row .row-att-note{
            grid-column:1 / -1;
            margin-top:4px;
        }

        #cp_auto_targets, #cp_auto,
        #cp_manual_targets, #cp_manual{
            white-space:pre-line;
            font-size:0.9rem;
            line-height:1.6;
        }

        #view-custom-push #cp_stat_wrap label,
        #view-custom-push #cp_stat_wrap .repLabel{
            color:var(--c-text) !important;
        }

        #cp_body.cp-textarea{
            font-size:13px !important;
            line-height:1.7;
        }

        /* ===== カスタム通知：送信プレビューモーダル ===== */
        .cpModalOverlay {
        position: fixed;
        inset: 0;                        /* top:0; right:0; bottom:0; left:0 と同じ */
        background: rgba(0, 0, 0, 0.35); /* 背景の黒半透明 */
        z-index: 9999;                   /* ほぼ最前面に */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;
        }

        .cpModal {
        max-width: 480px;
        width: 100%;
        max-height: 80vh;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
        padding: 16px 18px 14px;
        box-sizing: border-box;
        overflow: auto;
        font-size: 14px;
        line-height: 1.6;
        }

        .cpModal h3 {
        margin: 0 0 6px;
        font-size: 16px;
        font-weight: 600;
        }

        .cpModal .meta {
        font-size: 13px;
        color: #666;
        margin-bottom: 8px;
        }

        .cpModal pre {
        margin: 4px 0 0;
        padding: 8px 10px;
        border-radius: 10px;
        background: #fdf9f4;
        border:1px solid rgba(160,60,32,.14);
        font-family: inherit;
        font-size: 14px;
        line-height: 1.6;
        white-space: pre-wrap;  /* 折り返し */
        }

        .cpModal .muted {
        font-size: 12px;
        color: #777;
        }

        .cpModal .pill.sm {
        font-size: 11px;
        }

        .cpModal .actions {
        margin-top: 14px;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        }
    
    /* ===== Summary ===== */
        #summaryFreeQuotaBox .kv { display: grid; gap: 6px; }
        #summaryFreeQuotaBox .kvRow { display:flex; justify-content:space-between; padding:6px 8px; border:1px solid #ddd; border-radius:8px; }
        #summaryFreeQuotaBox .kvKey { color:#666; font-size:13px; }
        #summaryFreeQuotaBox .kvVal { font-weight:600; }

        .summaryCard .kpi { display:inline-block; min-width:120px; padding:8px 10px; margin:4px; border:1px solid #eee; border-radius:8px; }
        .summaryCard .kpiLabel { font-size:12px; color:#666; }
        .summaryCard .kpiValue { font-size:20px; font-weight:700; }
        .summaryCard .num { text-align:right; font-variant-numeric: tabular-nums; }
        .summaryCard .ok { color:#0a7; }
        .summaryCard .ng { color:#c33; }
        .summaryCard .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
        .summaryCard .summaryHeader { font-weight:700; margin:6px 0 8px; }
        .summaryCard .summarySubHeader { font-weight:700; margin:10px 0 6px; }
        .table.compact th, .table.compact td { padding:4px 6px; }

        /* サマリ見出し行：右端へボタン寄せ */
        #view-summary .card .row.header {
        display:flex; align-items:center; gap:8px; margin-bottom:8px;
        }
        #view-summary .card .row.header .sectionTitle { flex:1; } /* ← これでボタンが右端へ */
        
        /* サマリカードのグリッド */
        .metricsGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        }
        @media (min-width: 480px){
        .metricsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (min-width: 720px){
        .metricsGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }
        .metricCard {
        border: 1px solid #e6e6e6;
        border-radius: 12px;
        padding: 14px 12px;
        background: #fff;
        }
        .metricTitle { font-size: 12px; color:#666; margin-bottom: 6px; }
        .metricValue { font-size: 22px; font-weight: 700; }
        .tableSm { width:100%; border-collapse: collapse; }
        .tableSm th, .tableSm td { padding: 8px 6px; border-bottom: 1px solid #eee; }
        .sectionSub { font-weight:700; font-size:16px; margin:14px 0 6px; }
        .badgeMuted { font-size:12px; padding:2px 8px; border-radius:9999px; background:#f0f0f7; color:#555; }
        .ok { color:#14a44d; } .ng { color:#d62d20; }

        /* KPI：横4並び（スマホでも崩れないよう少し小さめ） */
        /* ── ① 4列を“常に”固定 ─────────────────────────── */
        .summaryKpis{
        display:grid;
        grid-template-columns:repeat(4, minmax(0,1fr)); /* ← 常に4列 */
        gap:6px;                                        /* 余白を少し詰める */
        margin-top:8px;
        }
        
        /* ── ② 子要素はグリッド前提のコンパクト化 ───────────── */
        .summaryKpis .kpi{
        display:block;
        width:100%;
        min-width:0;
        margin:0;                 /* gap 管理 */
        padding:8px 6px;          /* 余白を縮める */
        min-height:52px;          /* ボックス高さ控えめ */
        border:1px solid #e6e6e6;
        border-radius:10px;
        background:#fff;
        }
        .summaryKpis .kpi .kpiLabel{
        font-size:10px;           /* ラベルを小さく */
        line-height:1.1;
        letter-spacing:.01em;
        }
        .summaryKpis .kpi .kpiValue{
        font-size:16px;           /* 数字も少し小さく */
        line-height:1.05;
        font-weight:700;
        font-variant-numeric: tabular-nums;
        }
        
        /* ── ③ 極小端末(幅≤360px)はさらに詰める保険 ──────── */
        @media (max-width:360px){
        .summaryKpis{ gap:4px; }
        .summaryKpis .kpi{ padding:6px 4px; min-height:48px; }
        .summaryKpis .kpi .kpiLabel{ font-size:9px; }
        .summaryKpis .kpi .kpiValue{ font-size:15px; }
        }
        .table.compact.smalltext { font-size: 13px; }
        .table.compact.smalltext th, 
        .table.compact.smalltext td { padding: 6px 8px; }
        .table.compact.history td, .table.compact.history th{
        font-size: 0.9rem; line-height:1.2;
        }
        .table.compact.history .nowrap { white-space: nowrap; }
        #view-summary table.table.compact.history.verysmall td,
        #view-summary table.table.compact.history.verysmall th {
        font-size: 11px !important;
        line-height: 1.1 !important;
        padding: 3px 5px !important;
        }

        /* ヘッダーのタイトル */
        .pageTitle{ font-weight:700; font-size:18px; }

            .kpi{ border:1px solid #e6e6e6; border-radius:12px; padding:12px; background:#fff; }
            .kpiLabel{ font-size:12px; color:#666; margin-bottom:6px; }
            .kpiValue{ font-size:22px; font-weight:700; }
        /* タブボタンの下に余白を追加 */
        #view-summary .card .tabsRow { margin-bottom: 12px; }  /* ← クラス名を付ける（下でJSから設定） */
        
        /* ===== サマリ（当月配信）ブロック ===== */
        .summaryBlock {
        border: 1px solid #e5e5f0;
        border-radius: 12px;
        padding: 12px 12px 10px;
        background: #fff;
        margin-bottom: 14px;
        }
        
        /* 履歴ブロック */
        .summaryBlock.historyBlock {
        border: 1px solid #e5e5f0;
        border-radius: 12px;
        padding: 12px 12px 10px;
        background: #fff;
        margin-bottom: 12px;
        }
        
        /* テーブルと再取得ボタンの間に余白 */
        #btnSummaryReload {
        margin-top: 10px;
        }

        /* サマリ本体を薄い枠で囲む */
        .summaryCard .summaryBody {
        border: 1px solid #e9e9f2;
        border-radius: 12px;
        padding: 12px;
        background: #fff;
        margin-top: 8px;
        }
    
    /* ===== Feedback FAB ===== */
        #feedbackFab.fab{
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 56px;
        height: 56px;
        border: none;
        border-radius: 9999px;
        padding: 0;
        background: var(--ui-primary-gradient);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 26px rgba(107,34,16,.24);
        cursor: pointer;
        z-index: 1200;
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
        }
        #feedbackFab.fab img{
        width: 26px;
        height: 26px;
        display: block;
        pointer-events: none;
        filter: invert(1) brightness(100%);
        }
        @media (hover:hover){
        #feedbackFab.fab:hover{
            background:linear-gradient(135deg, #b84524 0%, #7b2a14 100%);
            box-shadow: 0 12px 30px rgba(107,34,16,.30);
            transform: translateY(-1px);
        }
        }
        #feedbackFab.fab:active{ transform: translateY(1px); }
        #feedbackFab.fab:focus-visible{
        outline: 3px solid rgba(160,60,32,.24);
        outline-offset: 2px;
        box-shadow:0 0 0 5px rgba(253,249,244,.9), 0 12px 30px rgba(107,34,16,.30);
        }
        @media (prefers-reduced-motion: reduce){
        #feedbackFab.fab{ transition: none; }
        }

        /* 視覚的に非表示（スクリーンリーダー用） */
        .sr-only{
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
        }

        /* ===== ご意見モーダル ===== */
        #feedbackModal .modal-backdrop{
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.42);
        z-index: 1300;
        }
        #feedbackModal .modal-card{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(90vw, 420px);
        max-height: 80vh;
        overflow: auto;
        background:#fff;
        border-radius: 14px;
        box-shadow: 0 16px 48px rgba(0,0,0,.25);
        padding: 12px 12px 10px;
        z-index: 1310;
        }
        #feedbackModal .modal-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        }
        #feedbackModal .modal-title{
        font-weight:700;
        font-size:16px;
        }
        #feedbackModal .modal-desc{
        margin:10px 0 12px;
        padding:10px 12px;
        border:1px solid rgba(160,60,32,.16);
        border-radius:10px;
        background:#fff8f3;
        color:#5f4b40;
        font-size:12px;
        line-height:1.65;
        }
        #feedbackModal .modal-desc p{
        margin:0;
        }
        #feedbackModal .modal-desc p + p{
        margin-top:4px;
        }
        #feedbackModal .modal-desc .important{
        color:#6b2210;
        font-weight:700;
        }
        #feedbackModal .icon-btn{
        border:none;
        background:transparent;
        font-size:20px;
        }
        #feedbackModal .label{
        font-size:13px;
        color:#555;
        display:block;
        margin-bottom:4px;
        }
        #feedbackModal .select,
        #feedbackModal .textarea{
        width:100%;
        border:1px solid #ddd;
        border-radius:8px;
        padding:6px 10px;
        font-size:16px;
        background:#fff;
        }
        #feedbackModal .counter{
        font-size:12px;
        color:#666;
        text-align:right;
        margin-top:4px;
        }
        #feedbackModal .modal-footer{
        margin-top:10px;
        display:flex;
        justify-content:flex-end;
        gap:8px;
        }
        #feedbackModal .btn{
        padding:6px 12px;
        border-radius:8px;
        }
        #feedbackModal .btn-outline{
        background:#fff;
        border:1px solid #bbb;
        }
        #feedbackModal .btn-primary{
        background:var(--ui-primary-gradient);
        color:#fff;
        border:1px solid #8c3218;
        }

        /* ===== スナックバー ===== */
        #snackbar.snackbar{
        position: fixed;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        background: rgba(35,35,35,.95);
        color:#fff;
        padding:10px 14px;
        border-radius:10px;
        font-size:14px;
        opacity:0;
        pointer-events:none;
        transition: opacity .2s ease, transform .2s ease;
        z-index: 1400;
        max-width: 90vw;
        box-sizing: border-box;
        text-align: center;
        }

        /* 表示中 */
        #snackbar.show{
        opacity:1;
        pointer-events:auto;
        transform:translateX(-50%) translateY(-4px);
        }

        /* 種別ごとの色（お好みで） */
        #snackbar.snackbar-info{
        background: rgba(35,35,35,.95);
        }
        #snackbar.snackbar-success{
        background: rgba(22,163,74,.96);   /* 緑っぽい */
        }
        #snackbar.snackbar-error{
        background: rgba(220,38,38,.96);   /* 赤っぽい */
        }
        /* 保存中（loading）のとき左に小さいスピナーを出す */
        #snackbar.loading::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 6px;
        border-radius: 999px;
        border: 2px solid rgba(255,255,255,.5);
        border-top-color: #fff;
        animation: fbsp 0.8s linear infinite;
        vertical-align: -2px;
        }

        /* お好みで成功/エラーの色だけ変えてもOK（任意） */
        #snackbar.success {
        background: rgba(22,163,74,.95);  /* 緑っぽい */
        }
        #snackbar.error {
        background: rgba(220,38,38,.95);  /* 赤っぽい */
        }
        /* ===== ご意見BOX（管理画面） ===== */
        .fb-cat{
        font-weight:700;
        margin:12px 0 6px;
        }
        .fb-acc{
        border:1px solid #eee;
        border-radius:10px;
        padding:8px 10px;
        margin:8px 0;
        background:#fff;
        }
        .fb-row{
        display:flex;
        align-items:center;
        gap:10px;
        flex-wrap:wrap;
        }
        .fb-meta{
        font-size:13px;
        color:#666;
        }
        .badge-st{
        font-size:11px;
        padding:2px 8px;
        border-radius:999px;
        background:#f0f0f7;
        color:#555;
        }
        .select-mini{
        font-size:13px;
        padding:6px 8px;
        border:1px solid #ddd;
        border-radius:8px;
        }
        .fb-msg{
        font-size:14px;
        line-height:1.6;
        flex:1 1 auto;
        white-space:pre-wrap;
        word-break:break-word;
        color:#333;
        }
        details.fb-acc > summary{
        cursor:pointer;
        list-style:none;
        }
        details.fb-acc > summary::-webkit-details-marker{ display:none; }

        /* 個別行レイアウト */
        .fb-item{
        border:1px solid #eee;
        border-radius:10px;
        padding:8px 10px;
        margin:8px 0;
        background:#fff;
        }
        .fb-sum{
        display:flex;
        align-items:center;
        gap:10px;
        }
        .fb-sum .mono{
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-weight:600;
        }
        .fb-sum .name{ font-weight:600; }
        .fb-sum .date{
        margin-left:auto;
        color:#666;
        font-size:12px;
        }

        /* 本文＋ステータス 2カラム */
        .fb-body-row{
        display:flex;
        align-items:flex-start;
        gap:10px;
        }
        .fb-status-wrap{
        flex:0 0 auto;
        margin-left:auto;
        display:flex;
        align-items:center;
        }

        /* ステータスのプルダウン */
        .fb-status{
        font-size:13px;
        padding:6px 8px;
        border:1px solid #ddd;
        border-radius:8px;
        background:#fff;
        color:#333;
        }
        #view-feedback .fb-status{
        min-width:112px;
        background:#f7f7f9;
        color:#444;
        }

        /* ステータス色（select 自体に色を付ける） */
        #view-feedback .fb-status.is-未対応{ background:#f3f4f6; color:#374151; }
        #view-feedback .fb-status.is-対応中{ background:#fef9c3; color:#92400e; }
        #view-feedback .fb-status.is-保留  { background:#e0f2fe; color:#1e3a8a; }
        #view-feedback .fb-status.is-完了  { background:#ecfdf5; color:#065f46; }
        #view-feedback .fb-status.is-却下  { background:#fee2e2; color:#991b1b; }

        /* ご意見BOX ヘッダー行：タイトル左／ボタン右 */
        #view-feedback .row.header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
        margin-bottom:8px;
        }
        #view-feedback .row.header .sectionTitle{
        flex:1 1 auto;
        }
        #btnFeedbackBack{
        margin-left:auto !important;
        }

        /* 行の境界線 */
        #view-feedback .fb-row{
        border-bottom:1px solid #eee;
        padding:8px 4px;
        }
        #view-feedback .fb-row:last-child{
        border-bottom:0;
        }

        /* 1行目：#No / 名前 / 日時 */
        #view-feedback .fb-row-head{
        display:flex;
        align-items:center;
        gap:8px;
        margin-bottom:4px;
        }
        #view-feedback .fb-row-head .mono{
        font-variant-numeric: tabular-nums;
        color:#666;
        }
        #view-feedback .fb-row-head .name{ font-weight:600; }
        #view-feedback .fb-row-head .date{
        margin-left:auto;
        color:#666;
        }

        /* 2行目：コメント + ステータス */
        #view-feedback .fb-row-body{
        display:flex;
        align-items:flex-start;
        gap:8px;
        width:100%;
        }
        #view-feedback .fb-row-body .fb-msg{
        flex:1 1 auto;
        white-space:pre-wrap;
        word-break:break-word;
        line-height:1.5;
        }
        #view-feedback .fb-status-wrap{
        flex:0 0 auto;
        margin-left:auto;
        display:flex;
        align-items:center;
        }

        /* カテゴリ summary 見た目 */
        #view-feedback .fb-cat-head{
        display:flex;
        align-items:center;
        gap:8px;
        padding:4px 2px;
        cursor:pointer;
        }
        #view-feedback .fb-cat-head .sectionTitle{
        font-size:17px;
        font-weight:700;
        color:#2b2346;
        }
        #view-feedback .fb-cat-head .fb-count{
        margin-left:auto;
        font-size:13px;
        color:#777;
        background:#f1f1f6;
        border-radius:999px;
        padding:2px 8px;
        }

        /* カテゴリタイトル右上の「新規あり」ドット */
        #view-feedback .fb-cat.has-unread > .fb-cat-head::after{
        content:"";
        display:inline-block;
        width:8px;
        height:8px;
        margin-left:6px;
        border-radius:9999px;
        background:#e11d48;
        }

        /* ご意見BOX用スピナー */
        #view-feedback .spinner{
        display:inline-block;
        width:14px;
        height:14px;
        border-radius:50%;
        border:2px solid #ccc;
        border-top-color:var(--ui-primary);
        animation: fbsp 0.8s linear infinite;
        vertical-align:-2px;
        margin-left:6px;
        }
        @keyframes fbsp{
        to{ transform: rotate(360deg); }
        }

        .fb-row.is-dirty {
        border-left: 4px solid #f0a000;
        }
        .fb-status.is-dirty {
        outline: 2px solid #f0a000;
        }
    /* ===== Changelog modal ===== */
        /* 初期は非表示 */
        #changelogModal[hidden]{
        display: none;
        }

        /* 背景（クリックで閉じる） */
        #changelogModal .modal-backdrop{
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.42);
        z-index: 1300;
        }

        /* 本体：中央固定＋見た目 */
        #changelogModal .modal-card{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(92vw, 560px);
        z-index: 1310;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 8px 28px rgba(0,0,0,.15);
        padding: 18px 16px;
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
        max-height: 80vh;              /* 画面の8割までの高さに制限 */
        overflow-y: auto;              /* 中身が増えたらカード内スクロール */
        -webkit-overflow-scrolling: touch; /* iOSでぬるっとスクロール */
        }
        /* リスト */
        .cg-item{
        border: 1px solid #e5e5ef;
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
        background: #fafafa;
        }
        .cg-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
        }
        .cg-title{
        font-size: 15px;
        font-weight: 600;
        color: #333;
        }
        .cg-tags{
        display: flex;
        gap: 6px;
        }
        .cg-tag{
        font-size: 11px;
        color: #666;
        background: #f1f1f6;
        padding: 2px 6px;
        border-radius: 6px;
        }
        .cg-date{
        font-size: 12px;
        color: #999;
        margin-bottom: 6px;
        }
        .cg-body{
        font-size: 13px;
        line-height: 1.5;
        color: #444;
        }

        /* フッター＆ボタン */
        #changelogModal .modal-footer{
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 12px;
        }
        #changelogModal .btn{
        border-radius: 8px;
        padding: 6px 14px;
        font-size: 13px;
        }
        #changelogModal .btn-outline{
        background: #fff;
        border: 1px solid #ccc;
        color: #444;
        }
        #changelogModal .btn-primary{
        background: #6f5dbd;
        border: 1px solid #6f5dbd;
        color: #fff;
        }

        /* タイトル控えめ */
        #changelogModal .modal-title{
        font-size: 16px;
        font-weight: 600;
        color: #222;
        }

        /* バージョン表示の未読ドット（1か所だけ） */
        #ver{
        position: relative;
        display: inline-block;
        }
        #ver.has-unread::after{
        content: "";
        position: absolute;
        top: -3px;
        right: -6px;
        width: 8px;
        height: 8px;
        background: #e11d48;
        border-radius: 9999px;
        }
        /* リスト部分だけスクロールさせる */
        #changelogList{
        margin-top: 8px;        /* タイトルとの余白が欲しければ */
        }
    /* ===== 回答受付中の公演リスト 専用 ===== */
        .evList { margin-top: 6px; }
        .eventRow{
            display:block;
            border:1px solid var(--c-border);
            border-radius:12px;
            background:rgba(255,255,255,.48);
            padding:11px 12px;
            margin:8px 0;
            transition:background-color .12s ease, transform .08s ease, box-shadow .12s ease;
            cursor:pointer;
        }
        .eventRow:active{
            transform:translateY(1px);
        }
        .eventRow.open{
            background:#fff;
            box-shadow:0 3px 12px rgba(107,34,16,.07);
        }
        .eventHead{
            display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;
        }
        .eventHead-left{ display:flex; align-items:center; gap:6px; }
        .eventHead-right{ display:flex; align-items:center; gap:6px; margin-left:auto; }
        .badge-new{
            display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;height:22px;
            border-radius:999px;font-size:11px;font-weight:600;color: var(--c-primary-2);
            border:1.5px solid var(--c-primary-2);background:#fff;white-space:nowrap;
        }
        .eventTitle{ display:flex; align-items:baseline; gap:4px; font-weight:700; font-size:15px; line-height:1.45; }
        .eventTitle .title-date{ white-space:nowrap; flex:0 0 auto; }
        .eventTitle .title-place{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto; }
        .eventSub{ font-size:12px; color:var(--c-muted); margin-top:2px; }
        .deadline{ color:#666; } .deadline-soon{ color:#c33; font-weight:600; }
        .eventDetail{
            display:none;
            margin:-2px 0 8px;
            padding:0 2px;
        }
        /* 区分バッジは既存 .seg-badge / .seg-adult / .seg-child / .seg-both を利用 */
    

        /* 本番用スタイルはすべて Base CSS に移管済み。
        ここは一時的なホットフィックス・検証用に空で残しておく。 */
        

/* Original CSS is retained verbatim above. Only safety/accessibility additions. */
[hidden]{display:none!important}
[data-view]:not(.show){display:none!important}
button:disabled{cursor:not-allowed;opacity:.55}
:focus-visible{outline:3px solid #527ba8;outline-offset:3px}
.parityStatus{font-size:12px;color:var(--c-muted);margin:0 0 12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.parityStatus #status{flex:1 1 100%}
.preparedNotice{font-size:12px;color:var(--c-muted);padding:8px 0}
.fHead[role=button]{cursor:pointer}
input,select,textarea{max-width:100%}
.scTitle,.nameLabel,.repRow,.eventDetail{overflow-wrap:anywhere;min-width:0}
.paritySave{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.eventDetail:not([hidden]){display:block}

.systemVersion{box-sizing:border-box;width:100%;padding:5px max(12px,env(safe-area-inset-right)) 5px max(12px,env(safe-area-inset-left));text-align:right;font-size:12px;line-height:1.5;color:#475569}.systemVersion small{display:block;font-size:10px;overflow-wrap:anywhere}