/* =========================================================================
   自治会サプリ 共通CSS v4「あたたかい掲示板」（GATE 2 版）

   使い方（body に区分クラスを付ける）
     <body class="app t-portal">            住民側（深緑）
     <body class="app t-admin">             スタッフ（藍）
     <body class="app t-console">           運営コンソール（深紫）

   - 1ファイルを全テナント・全画面で共有。トークンは :root の CSS変数。
   - 既存 app.css のクラス名（.card .btn .badge .tile .notice .steps .qr-block .tbl
     .p-top .a-nav …）を継承。PHP側の変更を最小にする。
   - レスポンシブは .app を基準にした @container（幅 900px で PC/スマホ切替）。
     body に付けた場合の挙動は @media と同じ（@media に書き換えても動く）。
   - 書体: M PLUS Rounded 1c（<link> で読込。無ければ端末の丸ゴ→UD→ゴシック）。
   - 文字サイズは 18px 固定。切替UIは置かない。拡大は OS/ブラウザに任せる。
   - アイコンは SVG スプライト: <svg class="icon"><use href="#i-xxx"></use></svg>
   ========================================================================= */

/* ---------- 1. トークン ---------- */
:root {
    /* 区分カラー（4区分＋派生） */
    --c-resident: #3E7C52;  --c-resident-dark: #2E5F3E;  --c-resident-tint: #EAF3ED;  --c-resident-line: #BFDCCB;
    --c-staff:    #26456B;  --c-staff-dark:    #1B3350;  --c-staff-tint:    #EAF0F8;  --c-staff-line:    #C3D2E6;
    --c-console:  #6A4A85;  --c-console-dark:  #52386A;  --c-console-tint:  #EFE9F4;  --c-console-line:  #D3C4E0;

    /* 主色（既定=住民。区分クラスで上書き） */
    --c-primary:       var(--c-resident);
    --c-primary-dark:  var(--c-resident-dark);
    --c-primary-faint: var(--c-resident-tint);
    --c-primary-line:  var(--c-resident-line);

    /* アクセント（杏）— 件数・新着・まちぷらすの目印だけに使う */
    --c-accent:      #E0A458;
    --c-accent-tint: #FDF1DF;
    --c-accent-text: #8A5200;   /* 杏地の上の文字 */
    --c-accent-ink:  #3B2A00;   /* 杏バッジの上の数字 */
    --c-accent-icon: #B06D12;   /* まちぷらすの★ */

    /* 意味色（全区分共通） */
    --c-ok:     #2E6B45;  --c-ok-tint:     #E8F3EC;  --c-ok-line:     #BFDCCB;
    --c-info:   #2F4E7A;  --c-info-tint:   #EAF0F8;  --c-info-line:   #C3D2E6;
    --c-warn:   #8A5200;  --c-warn-tint:   #FDF3E3;  --c-warn-line:   #F0D6A8;
    --c-danger: #B4304F;  --c-danger-tint: #FBEAF0;  --c-danger-line: #F0C2D2;
    --c-off:    #5A5A5A;  --c-off-tint:    #F1EBDE;  --c-off-line:    #E2DCCC;

    /* 基調色 */
    --c-text: #2A2A2A;  --c-muted: #5A5A5A;  --c-faint: #8A8577;
    --c-border: #E2DCCC;  --c-border-soft: #EFE9DD;
    --c-bg: #F7F3EA;  --c-bg-alt: #F1EBDE;  --c-card: #FFFFFF;

    /* 文字 */
    --font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', 'Yu Gothic UI', sans-serif;
    --fs-xs: 13px;  --fs-sm: 15px;  --fs-md: 18px;  --fs-lg: 21px;  --fs-xl: 25px;  --fs-2xl: 28px;
    --lh: 1.7;

    /* 余白（4の倍数） */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;

    /* 角丸・影・線 */
    --radius-sm: 10px;  /* 小ボタン・カレンダーのマス */
    --radius: 14px;     /* ボタン・入力欄 */
    --radius-md: 18px;  /* タイル・一覧の行カード */
    --radius-lg: 22px;  /* カード */
    --radius-xl: 28px;  /* 帯の下端 */
    --radius-pill: 999px;
    --shadow: 0 4px 12px rgba(20, 35, 64, .05);
    --shadow-md: 0 4px 14px rgba(20, 35, 64, .06);
    --line: 1px solid var(--c-border);

    /* 寸法 */
    --tap: 52px;            /* タップ領域の最小 */
    --w-portal: 720px;      /* 住民側 スマホ〜タブレットの本文幅 */
    --w-portal-pc: 960px;   /* 住民側 PC の本文幅（2カラム）。0918: 1040→960（間延び対策） */
    --w-staff: 1200px;
    --nav-w: 240px;
    --tabbar-h: 76px;
}
.t-portal           { --c-primary: var(--c-resident); --c-primary-dark: var(--c-resident-dark); --c-primary-faint: var(--c-resident-tint); --c-primary-line: var(--c-resident-line); }
.t-admin            { --c-primary: var(--c-staff);    --c-primary-dark: var(--c-staff-dark);    --c-primary-faint: var(--c-staff-tint);    --c-primary-line: var(--c-staff-line); }
.t-console          { --c-primary: var(--c-console);  --c-primary-dark: var(--c-console-dark);  --c-primary-faint: var(--c-console-tint);  --c-primary-line: var(--c-console-line); }

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
.app {
    container: app / inline-size;
    display: flex; flex-direction: column; min-height: 100dvh;
    font-family: var(--font); font-weight: 500; font-size: var(--fs-md); line-height: var(--lh);
    color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.app :where(a) { color: var(--c-primary); }          /* :where で優先度を下げ、.btn などの色指定が勝つようにする */
.app :where(a:hover) { color: var(--c-primary-dark); }
.app :focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; border-radius: 6px; }
.app img { max-width: 100%; height: auto; }
.app p { margin: 0; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.icon-bold { stroke-width: 3; }
.icon-fill { fill: currentColor; stroke-width: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hint { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.7; }
.sub { color: var(--c-faint); font-size: .8em; }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.tabular { font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: 12px; }
.stack-lg { display: grid; gap: 20px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.row-pair { display: inline-flex; align-items: center; gap: 6px; }   /* 0947 r3: 見出しと入力欄を1組で折り返す（.row の中で使う） */
.spacer { flex: 1; }
.center { text-align: center; }

/* ---------- 3. 枠1: 住民ポータル（.t-portal） ---------- */
.p-top { flex: none; background: var(--c-primary); color: #fff; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.p-top-in { width: 100%; max-width: var(--w-portal); margin: 0 auto; padding: 16px 18px 24px; display: flex; align-items: center; gap: 12px; }
.p-top-in.is-page { display: grid; gap: 8px; padding-bottom: 22px; }
.p-logo { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; font-size: 11px; font-weight: 700; overflow: hidden; }   /* 0920: 破線枠を撤去（切り取り線に見えるため） */
.p-logo img { width: 100%; height: 100%; object-fit: cover; }
.p-org-wrap { min-width: 0; flex: 1; }
.p-org-sub { font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; }
.p-org { font-size: 22px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.p-top-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 500; min-height: 24px; }
.p-title { margin: 0; font-size: var(--fs-xl); font-weight: 800; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.p-title .icon { width: 26px; height: 26px; }
.p-title-sub { font-size: var(--fs-sm); }
.p-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: #fff; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.app .p-back:hover { color: #fff; opacity: .9; }
.p-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.p-nav { display: none; }
.p-top-app { font-weight: 800; }
.p-org-lead { font-size: var(--fs-sm); opacity: .9; margin-top: 2px; }
.p-top-sep { margin: 0 4px; opacity: .7; }
.p-main { flex: 1; width: 100%; max-width: var(--w-portal); margin: 0 auto; padding: 18px 16px 28px; display: grid; gap: 20px; align-content: start; }
.p-col { display: grid; gap: 20px; align-content: start; }
.p-foot { text-align: center; color: var(--c-muted); font-size: var(--fs-xs); line-height: 1.7; }

/* 下タブ（.app の最後の子。使わないテナントは出力しない） */
.tabbar { position: sticky; bottom: 0; z-index: 30; flex: none; background: var(--c-card); border-top: var(--line); }
.tabbar-in { max-width: var(--w-portal); margin: 0 auto; height: var(--tabbar-h); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--c-muted); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; }
.tab .icon { width: 26px; height: 26px; }
.app .tab:hover { color: var(--c-primary); }
.app .tab.is-active { color: var(--c-primary); }
.tab.is-active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c-primary); }

@container app (min-width: 900px) {
    .tabbar { display: none; }
    .p-top-in, .p-main { max-width: var(--w-portal-pc); }
    .p-top-in { padding: 18px 28px 26px; }
    .p-main { padding: 24px 24px 44px; gap: 22px; }
    .p-nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
    .p-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); color: #fff; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
    .p-nav a .icon { width: 20px; height: 20px; }
    .p-nav a.is-active, .p-nav a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
    .p-cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }   /* 0918: 主列を広く・副列は 350px 前後 */
    .p-main.p-narrow { max-width: 780px; }                  /* フォーム系は PC でも 1カラム */
    .p-cols-read { grid-template-columns: minmax(0, 1fr) 320px; }
    .col-main { grid-column: 1; grid-row: 1; }
    .col-side { grid-column: 2; grid-row: 1; }
    .p-col { gap: 24px; }
}

/* ---------- 4. 枠2: スタッフ画面（.t-admin） ---------- */
.a-shell { flex: 1; display: flex; align-items: flex-start; }
.a-nav { position: sticky; top: 0; height: 100dvh; width: var(--nav-w); flex: none; z-index: 40; background: var(--c-primary); color: #fff; padding: 18px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.a-brand { padding: 6px 12px 14px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.a-brand-sub { font-size: 12px; color: rgba(255, 255, 255, .7); letter-spacing: .06em; }
.a-brand-name { font-size: 18px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.a-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.a-menu-h { padding: 16px 12px 6px; font-size: 12px; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.a-menu-link { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; color: #D7E1EC; text-decoration: none; font-size: 16px; font-weight: 500; }
.a-menu-link .icon { width: 20px; height: 20px; }
.app .a-menu-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.app .a-menu-link.is-active { background: #fff; color: var(--c-primary); font-weight: 800; }
.a-menu-badge { margin-left: auto; background: var(--c-accent); color: var(--c-accent-ink); font-size: 12px; font-weight: 800; border-radius: var(--radius-pill); padding: 1px 8px; line-height: 1.5; }
.a-right { flex: 1; min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
.a-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 10px 24px; background: var(--c-card); border-bottom: var(--line); flex-wrap: wrap; }
.a-title { margin: 0; font-size: 22px; font-weight: 800; flex: 1; min-width: 0; line-height: 1.3; }
.a-title-sub { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); line-height: 1.4; }
.a-user { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-muted); }
.a-menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; cursor: pointer; }
.a-main { width: 100%; max-width: var(--w-staff); padding: 20px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.a-main.a-narrow { max-width: 920px; }
.a-overlay { position: fixed; inset: 0; z-index: 30; background: rgba(14, 37, 64, .45); }
@container app (max-width: 899px) {
    .a-nav { position: fixed; inset: 0 auto 0 0; height: auto; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 24px rgba(14, 37, 64, .35); }
    .app.nav-open .a-nav { transform: none; }
    .a-top { background: var(--c-primary); color: #fff; padding: 8px 14px; min-height: 60px; gap: 12px; }
    .a-title { font-size: 18px; }
    .a-title-sub { font-size: 11px; color: rgba(255, 255, 255, .85); }
    .a-user { display: none; }
    .a-menu-btn { display: flex; }
    .a-main { padding: 16px 14px 32px; gap: 14px; }
}

/* ---------- 5. カード・見出し ---------- */
.card { background: var(--c-card); border: var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px; margin: 0; }
.card-h { margin: 0 0 12px; font-size: 17px; font-weight: 800; line-height: 1.4; border-left: 5px solid var(--c-primary); padding-left: 10px; }
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head-row .card-h { margin: 0; }
.sec-h { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--c-muted); }
.card-title { margin: 0; font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 8px; }

/* ヒーロー（トップの導入カード） */
.hero { display: grid; gap: 14px; box-shadow: var(--shadow-md); }
.hero-art { height: 136px; border-radius: 90px 90px 16px 16px; background: var(--c-accent-tint); border: 2px dashed var(--c-accent); display: flex; align-items: center; justify-content: center; color: var(--c-accent-text); font-size: var(--fs-xs); text-align: center; line-height: 1.5; overflow: hidden; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-title { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 800; color: var(--c-primary-dark); text-wrap: pretty; }

/* 写真・地図の枡（実装時は img / Leaflet に置換） */
.ph { border-radius: 16px; background: var(--c-bg-alt); border: 1.5px dashed #B8B2A7; display: flex; align-items: center; justify-content: center; color: var(--c-faint); font-size: var(--fs-xs); text-align: center; line-height: 1.5; }
.ph-arch { border-radius: 90px 90px 16px 16px; }
.ph-map { background: #E7EDE3; border-color: #9CBFA9; color: var(--c-primary); position: relative; overflow: hidden; }
.pin { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--c-primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.map-fab { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--c-card); color: var(--c-primary); font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }

/* ---------- 6. タイル（機能の入口・2列） ---------- */
.tile-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 124px; padding: 14px 10px; background: var(--c-card); border: var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); text-decoration: none; color: var(--c-text); font-weight: 700; font-size: 17px; text-align: center; line-height: 1.3; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.app .tile:hover { color: var(--c-text); border-color: var(--c-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tile-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--c-primary-faint); color: var(--c-primary); display: flex; align-items: center; justify-content: center; }
.tile-ic .icon { width: 28px; height: 28px; }
.tile-warm .tile-ic { background: var(--c-accent-tint); color: var(--c-accent-icon); }
.tile-sub { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 500; margin-top: -6px; }
.tile-wide { grid-column: 1 / -1; flex-direction: row; min-height: 58px; gap: 10px; font-size: 16px; }
@container app (max-width: 340px) { .tile-list { grid-template-columns: 1fr; } }

/* 行カード（一覧の1件） */
.rowcard { display: flex; gap: 14px; align-items: center; background: var(--c-card); border: var(--line); border-radius: var(--radius-md); padding: 16px; text-decoration: none; color: inherit; min-height: var(--tap); }
.app .rowcard:hover { color: inherit; border-color: var(--c-primary); }
.rowcard-body { min-width: 0; flex: 1; }
.rowcard-cap { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-muted); flex-wrap: wrap; }
.rowcard-title { font-size: 19px; font-weight: 700; line-height: 1.4; }
.rowcard-lead { font-size: 14px; color: var(--c-muted); line-height: 1.6; margin-top: 2px; }
.rowcard-thumb { width: 60px; height: 80px; border-radius: 8px; background: var(--c-bg-alt); border: var(--line); flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--c-faint); overflow: hidden; }
.rowcard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rowcard-thumb.is-square { width: 68px; height: 68px; border-radius: 14px; }
.rowcard-chev { color: var(--c-primary); flex: none; width: 22px; height: 22px; }
.rowcard-perk { font-size: var(--fs-sm); color: var(--c-accent-text); font-weight: 700; line-height: 1.5; }
.rowcard-list { display: grid; gap: 12px; }

/* ---------- 7. ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: .4em 20px; border-radius: var(--radius); border: 1.5px solid transparent; font: inherit; font-weight: 700; font-size: 17px; line-height: 1.4; text-decoration: none; cursor: pointer; white-space: normal; transition: background-color .15s ease, border-color .15s ease; }
.btn .icon { width: 20px; height: 20px; }
.btn-primary { background: var(--c-primary); color: #fff; }
.app .btn-primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn-ghost { background: var(--c-card); color: var(--c-primary); border-color: var(--c-primary); }
.app .btn-ghost:hover { background: var(--c-primary-faint); color: var(--c-primary-dark); }
.btn-quiet { background: var(--c-card); color: var(--c-text); border-color: var(--c-border); }
.app .btn-quiet:hover { color: var(--c-text); border-color: var(--c-faint); }
.btn-danger { background: var(--c-danger); color: #fff; }
.app .btn-danger:hover { background: #952740; color: #fff; }
.btn-danger-ghost { background: var(--c-card); color: var(--c-danger); border-color: var(--c-danger); }
.btn-lg { min-height: 58px; font-size: 18px; border-radius: 16px; }
.btn-xl { min-height: 62px; font-size: 20px; font-weight: 800; border-radius: 16px; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: var(--radius-sm); }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-wide { width: 100%; }
.btn-icon { width: var(--tap); padding: 0; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-row form { margin: 0; }
.link { color: var(--c-primary); font-weight: 700; text-decoration: none; }
.link-inline { color: var(--c-primary); font-weight: 700; }
.link-quiet { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-primary); font-weight: 700; text-decoration: none; font-size: var(--fs-sm); }

/* ---------- 8. バッジ・チップ・タグ ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; white-space: nowrap; }
.badge .icon { width: 13px; height: 13px; }
.badge-lg { font-size: var(--fs-sm); padding: 4px 13px 4px 10px; }
.badge-lg .icon { width: 15px; height: 15px; }
.badge-on     { color: var(--c-ok);     background: var(--c-ok-tint);     border-color: var(--c-ok-line); }
.badge-info   { color: var(--c-info);   background: var(--c-info-tint);   border-color: var(--c-info-line); }
.badge-warn   { color: var(--c-warn);   background: var(--c-warn-tint);   border-color: var(--c-warn-line); }
.badge-danger { color: var(--c-danger); background: var(--c-danger-tint); border-color: var(--c-danger-line); }
.badge-off    { color: var(--c-off);    background: var(--c-off-tint);    border-color: var(--c-off-line); }
.badge-inverse { color: var(--c-primary-dark); background: #fff; border-color: #fff; font-size: var(--fs-sm); padding: 5px 13px 5px 10px; }  /* 帯の上に置く */
.badge-inverse .icon { width: 15px; height: 15px; }
.badge-inverse.is-warn { color: var(--c-warn); }
.tag { display: inline-flex; align-items: center; background: var(--c-accent-tint); color: var(--c-accent-text); font-size: 12px; font-weight: 700; border-radius: var(--radius-pill); padding: 1px 9px; white-space: nowrap; }
.tag-quiet { background: var(--c-off-tint); color: var(--c-muted); }
.tag-primary { background: var(--c-primary); color: #fff; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--c-accent); color: var(--c-accent-ink); font-size: 12px; font-weight: 800; }

/* 状態サマリー（一覧の上・押すと絞り込み） */
.summary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sum { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--c-card); border: var(--line); color: var(--c-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.app .sum.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.sum-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--c-ok); } .dot-info { background: var(--c-info); } .dot-warn { background: var(--c-accent); } .dot-off { background: #B8B2A7; }

/* 絞り込みチップ（単一選択） */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--c-card); border: var(--line); color: var(--c-text); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit; }
.app .chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* 公開／非公開 切替 */
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
.switch-track { width: 52px; height: 30px; border-radius: var(--radius-pill); background: #C9C2B4; position: relative; flex: none; transition: background-color .15s ease; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s ease; }
.switch.is-on .switch-track { background: var(--c-ok); }
.switch.is-on .switch-track::after { left: 25px; }
.switch.is-disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 9. お知らせ枠・注意バナー ---------- */
.notice { display: flex; gap: 12px; padding: 16px; background: var(--c-card); border: var(--line); border-left: 6px solid var(--c-primary); border-radius: 16px; font-size: 16px; line-height: 1.65; margin: 0; }
.notice .icon { width: 24px; height: 24px; color: var(--c-primary); margin-top: 2px; }
.notice-warn   { border-left-color: var(--c-accent); }  .notice-warn .icon   { color: var(--c-accent-icon); }
.notice-danger { border-left-color: var(--c-danger); }  .notice-danger .icon { color: var(--c-danger); }
.notice-ok     { border-left-color: var(--c-ok); }      .notice-ok .icon     { color: var(--c-ok); }

/* ---------- 10. 定義リスト・表 ---------- */
.kv { margin: 0; }
.kv > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--c-border-soft); align-items: center; }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--c-muted); font-size: var(--fs-sm); font-weight: 500; }
.kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.kv-tight > div { grid-template-columns: 6em 1fr; padding: 6px 0; border: 0; }
.kv-tight dt { font-weight: 700; }
.kv-tight dd { font-weight: 500; }

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th { padding: 12px; text-align: left; font-size: var(--fs-xs); color: var(--c-muted); font-weight: 700; background: var(--c-bg); white-space: nowrap; }
.tbl td { padding: 13px 12px; border-bottom: 1px solid var(--c-border-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: 18px; }
.tbl th:last-child,  .tbl td:last-child  { padding-right: 18px; }
.tbl .nowrap { white-space: nowrap; }
/* 表の折り返し（core_20260925）: 幅が足りないとき、日本語が1文字ずつ縦に割れて崩れていた。
   語の途中では折り返さず（keep-all）、足りない分は .tbl-wrap の横スクロールに逃がす。
   識別子・補助表記・バッジ・ボタンは常に1行。長い文章のセルは .wrap で明示的に折り返す。 */
.tbl th, .tbl td { word-break: keep-all; overflow-wrap: normal; }
.tbl th[scope="row"], .tbl td .sub, .tbl td .badge, .tbl td .btn, .tbl td .a-inline-form { white-space: nowrap; }
.tbl td.wrap { white-space: normal; overflow-wrap: anywhere; min-width: 16em; max-width: 32em; }
.tbl .sub-line { display: block; }   /* 0945: セルの補足を次の行に（役職・時刻など） */
/* セルの中で状態（バッジ）と操作（ボタン）を縦に積む（幅で並びが変わらない） */
.cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cell-stack .a-inline-form { display: block; }
.cell-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 生年月日の3プルダウン（core_20260931）。狭い画面でも1行に収める */
.birth-group { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }   /* 0947 r3: 折り返さず縮める（wrap だと縮む前に「日」が2行目に落ちる） */
.app .field .birth-group select, .app .birth-group select { width: 3.9em; flex: 1 1 auto; min-width: 0; padding-left: 8px; padding-right: 22px; }   /* 0947 r3: 幅を明示して欄の広さに合わせる（width:auto だと中身の幅が最小幅になり、狭い画面で縮まず「日」が2行目に落ちる・320px では枠ごとはみ出す） */
.app .birth-group select:first-child { width: 5.5em; max-width: 8.5em; }
.app .birth-group select:not(:first-child) { max-width: 6em; }
@media (max-width: 359px) { .app .field .birth-group select, .app .birth-group select { font-size: 16px; padding-left: 6px; padding-right: 6px; } }   /* 0947 r3: 320px 幅でも「1980年」「12月」が切れない（16px 未満は iOS が拡大するので下限） */
.field-grid-2 .field-wide { grid-column: 1 / -1; }   /* 生年月日は2列グリッドの中でも1行を占める */
.birth-sep { color: var(--c-muted); font-size: var(--fs-sm); white-space: nowrap; }
/* 登録情報のカード間隔（F-53） */
.form-card + .form-card { margin-top: 20px; }
.tbl-card { padding: 0; overflow: hidden; }
.row-ok   td:first-child { border-left: 4px solid var(--c-ok); }
.row-info td:first-child { border-left: 4px solid var(--c-info); }
.row-warn td:first-child { border-left: 4px solid var(--c-accent); }
.row-off  td:first-child { border-left: 4px solid #D6D0C4; }
.next-step { display: block; font-size: 12px; color: var(--c-muted); }

/* ---------- 11. フォーム ---------- */
.field { margin: 0; }
.field-label { display: block; font-weight: 700; margin-bottom: 6px; }
.field-note { display: block; font-size: var(--fs-xs); color: var(--c-muted); font-weight: 500; margin-top: 2px; }
.req { display: inline-flex; align-items: center; margin-left: .4em; padding: 0 .5em; border: 1px solid var(--c-danger-line); border-radius: 6px; background: var(--c-danger-tint); color: var(--c-danger); font-size: .75em; font-weight: 700; vertical-align: middle; }
.opt-tag { display: inline-flex; align-items: center; margin-left: .4em; padding: 0 .5em; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-bg); color: var(--c-muted); font-size: .75em; font-weight: 700; vertical-align: middle; }
.input, .field input, .field select, .field textarea { width: 100%; min-height: var(--tap); padding: .5em 14px; border: var(--line); border-radius: var(--radius); font: inherit; color: var(--c-text); background: var(--c-card); }
.field input[type="checkbox"], .field input[type="radio"] { width: 24px; min-height: 0; }
.field textarea { min-height: calc(var(--tap) * 2); resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: 3px solid var(--c-primary-line); border-color: var(--c-primary); }
/* 入力欄の既定（core_20260923）: .field の外（表の中・絞り込み行・インラインフォーム）でも同じ枠にする。
   :where() で詳細度を .app の1つ分に抑え、.field / .code-input / .check など既存の個別指定を必ず勝たせる。
   まちぷらす区民SPA（.mp-root）は自前の入力スタイルを持つため対象外。 */
.app :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="image"]), select, textarea):where(:not(.mp-root *)) { width: 100%; max-width: 100%; min-height: var(--tap); padding: .5em 14px; border: var(--line); border-radius: var(--radius); font: inherit; color: var(--c-text); background: var(--c-card); }
.app :where(textarea):where(:not(.mp-root *)) { min-height: calc(var(--tap) * 2); resize: vertical; }
.app :where(input, select, textarea):where(:not(.mp-root *)):focus { outline: 3px solid var(--c-primary-line); border-color: var(--c-primary); }
.row > :where(input, select), .filters > :where(input, select), .a-inline-form :where(input, select) { width: auto; flex: 1 1 12em; }
.tbl :where(input[type="number"]) { width: 6.5em; }
.tbl :where(td, th) > :where(input, select) { min-width: 8em; }
.input-fake { display: flex; align-items: center; gap: 8px; color: var(--c-text); }         /* 入力済みの見た目（プロト用） */
.input-fake.is-empty { color: var(--c-faint); }
.input-select { justify-content: space-between; font-weight: 700; }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap); padding: 12px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius); background: var(--c-card); cursor: pointer; font-weight: 700; }
.check-list { display: grid; gap: 10px; margin-top: 6px; }   /* 0921: チェック行を縦に詰めない */
.check-list .check { margin: 0; }
.check .box { width: 24px; height: 24px; flex: none; margin-top: 2px; border-radius: 6px; border: 2px solid #B8B2A7; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.check.is-checked .box { background: var(--c-primary); border-color: var(--c-primary); }
.check.is-disabled { color: var(--c-faint); background: var(--c-bg); cursor: not-allowed; }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-sm); color: var(--c-muted); cursor: pointer; }
.opt-list { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 12px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius); background: var(--c-card); cursor: pointer; }
.opt .radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #B8B2A7; background: #fff; flex: none; }
.opt.is-selected { border-color: var(--c-primary); background: var(--c-primary-faint); font-weight: 700; }
.opt.is-selected .radio { border: 7px solid var(--c-primary); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.select-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: var(--line); border-radius: 12px; background: var(--c-card); font-size: var(--fs-sm); font-weight: 700; }
.upload { display: grid; justify-items: center; gap: 10px; padding: 22px 16px; border: 2px dashed var(--c-primary-line); border-radius: var(--radius-md); background: var(--c-primary-faint); text-align: center; color: var(--c-muted); font-size: var(--fs-sm); }
.file-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: var(--line); border-radius: 14px; background: var(--c-card); min-height: var(--tap); }
.file-row .icon { width: 26px; height: 26px; color: var(--c-primary); }
.file-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.file-name .sub { display: block; }
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; background: var(--c-bg); border: 1px dashed var(--c-border); border-radius: var(--radius-sm); padding: 12px 14px; overflow-wrap: anywhere; user-select: all; }
/* 同意ゲート（読んで確認するまでチェック不可） */
.consent { display: grid; gap: 10px; padding: 16px; border: 1.5px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-bg); }
.consent-body { max-height: 46vh; overflow-y: auto; background: var(--c-card); border: var(--line); border-radius: 12px; padding: 14px 16px; line-height: 1.9; font-size: 16px; }
.consent-progress { height: 6px; border-radius: 3px; background: var(--c-bg-alt); overflow: hidden; }
.consent-progress > span { display: block; height: 100%; background: var(--c-primary); border-radius: 3px; }
.code-input { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 64px; font-size: 28px; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.code-input .sep { color: var(--c-faint); font-weight: 500; }
.form-actions { display: grid; gap: 10px; margin-top: 8px; }

/* ---------- 12. カレンダー（○△×）と時間帯 ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-title { margin: 0; font-size: 18px; font-weight: 800; }
.cal-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: var(--line); background: var(--c-card); color: var(--c-primary); cursor: pointer; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-w { text-align: center; font-size: 12px; font-weight: 700; color: var(--c-muted); padding: 2px 0 6px; }
.cal-sun { color: #C0392B; }  .cal-sat { color: #1F5BA8; }
.cal-cell { appearance: none; border: 1px solid var(--c-border); background: var(--c-card); border-radius: var(--radius-sm); min-height: var(--tap); padding: 6px 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; color: var(--c-text); cursor: pointer; }
.cal-blank { border: 0; background: transparent; cursor: default; }
.cal-d { font-size: 12px; line-height: 1.3; color: var(--c-muted); }
.cal-m { font-size: 20px; font-weight: 800; line-height: 1.3; }
.cal-ok  { background: var(--c-ok-tint);   border-color: var(--c-ok-line); }    .cal-ok  .cal-m { color: var(--c-ok); }
.cal-few { background: var(--c-warn-tint); border-color: var(--c-warn-line); }  .cal-few .cal-m { color: var(--c-warn); }
.cal-ng  { background: var(--c-bg-alt); }                                       .cal-ng  .cal-m, .cal-ng .cal-d { color: var(--c-faint); }
.cal-past { opacity: .45; cursor: default; }
.cal-today .cal-d { color: var(--c-primary); font-weight: 800; }
.cal-sel { outline: 3px solid var(--c-primary); outline-offset: 1px; }
.cal-mini .cal-cell { min-height: 0; }
.cal-legend { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.slots { display: grid; gap: 8px; }
.slot { appearance: none; font: inherit; text-align: left; cursor: pointer; min-height: var(--tap); padding: 10px 14px; border-radius: var(--radius); border: 1.5px solid var(--c-border); background: var(--c-card); color: var(--c-text); display: flex; align-items: center; gap: 12px; }
.slot-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--c-faint); }
.slot-open { border-color: var(--c-ok-line); } .slot-open .slot-dot { background: var(--c-ok); }
.slot-few .slot-dot { background: var(--c-accent); }
.slot-ng { background: var(--c-bg); color: var(--c-muted); cursor: not-allowed; }
.slot-sel { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }
.slot-sel .slot-dot { background: #fff; }
.slot-state { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }

/* ---------- 13. お知らせ（号） ---------- */
.latest { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; box-shadow: var(--shadow-md); border-top: 6px solid var(--c-primary); }
.latest-cover { width: 84px; height: 112px; border-radius: 8px; background: var(--c-bg-alt); border: var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--c-faint); }
.latest-body { display: grid; gap: 6px; min-width: 0; }
.latest .btn { grid-column: 1 / -1; }
.issue-year { color: var(--c-muted); font-weight: 700; margin: 8px 0 0; font-size: var(--fs-sm); }
.issue-head { display: grid; gap: 4px; }
.issue-date { color: var(--c-muted); font-size: var(--fs-sm); }
.issue-title { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.35; }
.issue-lead { margin: 6px 0 0; }
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.doc-h { margin: 0; font-size: 18px; font-weight: 800; padding-left: 10px; border-left: 5px solid var(--c-primary); line-height: 1.4; }
.doc-pages { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.doc-page { display: flex; align-items: center; justify-content: center; width: auto; min-width: 0; aspect-ratio: 1 / 1.414; background: var(--c-card); border: var(--line); border-radius: 8px; color: var(--c-faint); font-size: var(--fs-xs); }
.pdf-card { display: flex; align-items: center; gap: 12px; background: var(--c-card); border: var(--line); border-radius: 14px; padding: 12px 14px; color: inherit; text-decoration: none; min-height: var(--tap); }
.pdf-card .icon { width: 28px; height: 28px; color: var(--c-primary); }
.issue-nav { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.toc a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: var(--fs-sm); }
.app .toc a:hover { background: var(--c-primary-faint); }

/* ---------- 14. 会員証・特典（まちぷらす） ---------- */
.mcard { border-top: 6px solid var(--c-accent); box-shadow: var(--shadow-md); display: grid; gap: 14px; }
.mcard-cap { font-size: 14px; color: var(--c-muted); font-weight: 700; letter-spacing: .06em; }
.mcard-name { font-size: 28px; font-weight: 800; line-height: 1.3; }
.mcard-name small { font-size: 16px; font-weight: 500; }
.mcard-meta { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 4px; line-height: 1.6; }
.mcard-qr { display: grid; justify-items: center; gap: 10px; padding: 16px; background: var(--c-bg); border-radius: var(--radius-md); }
.mcard-qr-img { width: 160px; height: 160px; border-radius: 12px; background: #fff; border: 1px dashed #B8B2A7; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--c-faint); text-align: center; line-height: 1.5; }
.mcard-qr p { font-size: 16px; text-align: center; line-height: 1.7; }
.mcard-note { font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.mcard.is-ng { border-top-color: #B8B2A7; }
.mcard.is-ng .mcard-qr-img { opacity: .35; }
.perk { border-top: 6px solid var(--c-accent); box-shadow: var(--shadow-md); display: grid; gap: 12px; }
.perk-cap { font-size: 14px; color: var(--c-accent-text); font-weight: 700; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
.perk-title { font-size: 23px; font-weight: 800; line-height: 1.4; }
/* 店舗側：読み取りと判定 */
.scan { position: relative; aspect-ratio: 1 / 1; border-radius: 20px; background: #1F2A24; color: #fff; display: grid; place-items: center; overflow: hidden; text-align: center; font-size: var(--fs-sm); }
.scan-frame { position: absolute; inset: 14%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px; }
.scan-line { position: absolute; left: 18%; right: 18%; top: 50%; height: 3px; background: var(--c-accent); border-radius: 2px; box-shadow: 0 0 12px var(--c-accent); }
.verdict { display: grid; justify-items: center; gap: 8px; padding: 24px 18px; border-radius: var(--radius-lg); text-align: center; }
.verdict-ok { background: var(--c-ok-tint); color: var(--c-ok); }
.verdict-ng { background: var(--c-bg-alt); color: var(--c-muted); }
.verdict-ic { width: 72px; height: 72px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.verdict-ic .icon { width: 40px; height: 40px; stroke-width: 2.6; }
.verdict-title { font-size: 26px; font-weight: 800; line-height: 1.3; }
.verdict-sub { color: var(--c-text); font-size: 16px; }

/* ---------- 15. STEP流（スタッフ画面の標準） ---------- */
.steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.step { display: inline-flex; align-items: center; gap: 8px; background: var(--c-card); border: var(--line); border-radius: var(--radius-pill); padding: 6px 14px 6px 6px; color: var(--c-muted); font-weight: 700; font-size: var(--fs-sm); }
.step-no { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg-alt); color: var(--c-muted); font-size: 14px; }
.step-no .icon { width: 16px; height: 16px; }
.step-done { color: var(--c-ok); border-color: var(--c-ok-line); }
.step-done .step-no { background: var(--c-ok); color: #fff; }
.step-current { color: var(--c-primary); border-color: var(--c-primary); background: var(--c-primary-faint); }
.step-current .step-no { background: var(--c-primary); color: #fff; }
.step-now { background: var(--c-primary); color: #fff; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.step-opt { font-weight: 500; font-size: .85em; color: var(--c-faint); margin-left: .2em; }
.step-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-left: 0; padding-left: 0; }
.step-chip { border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 800; flex: none; background: var(--c-bg-alt); color: var(--c-muted); letter-spacing: .04em; }
.step-chip-done { background: var(--c-ok); color: #fff; }
.step-chip-current { background: var(--c-primary); color: #fff; }
.step-mark { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.step-mark .icon { width: 16px; height: 16px; }
.step-mark-done { color: var(--c-ok); }
.step-mark-current { color: var(--c-primary); }
.step-card-current { border-left: 5px solid var(--c-primary); box-shadow: var(--shadow-md); }
.step-card-todo { background: transparent; box-shadow: none; border-style: dashed; }
.step-card-todo .card-h, .step-card-todo .step-h { color: var(--c-muted); }
.done-strip { border-left: 5px solid var(--c-ok); box-shadow: var(--shadow-md); }
.done-h { display: flex; align-items: center; gap: 6px; color: var(--c-ok); font-weight: 800; margin: 0 0 6px; font-size: 19px; }
.done-h .icon { width: 24px; height: 24px; }
.manage { border-style: dashed; background: transparent; box-shadow: none; }

/* ---------- 16. QRブロック（URLを渡す画面は URL の直下に置く） ---------- */
.qr-block { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 10px 0 0; }
.qr-img { width: 132px; height: 132px; background: #fff; border: var(--line); border-radius: 8px; padding: 4px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--c-faint); text-align: center; }
.qr-side { min-width: 200px; flex: 1; display: grid; gap: 8px; }

/* ---------- 17. トースト・モーダル・空状態・ページ送り ---------- */
.toast-wrap { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 12px); transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(92cqw, 460px); }  /* cqw = .app の幅基準（320px の端末でも収まる） */
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--c-card); border: var(--line); border-left: 6px solid var(--c-primary); border-radius: 14px; box-shadow: var(--shadow-md); font-size: 16px; }
.toast .icon { width: 22px; height: 22px; color: var(--c-primary); margin-top: 2px; }
.toast-ok { border-left-color: var(--c-ok); }   .toast-ok .icon { color: var(--c-ok); }
.toast-err { border-left-color: var(--c-danger); } .toast-err .icon { color: var(--c-danger); }
.modal { position: fixed; inset: 0; z-index: 1000; background: rgba(40, 35, 28, .55); display: flex; align-items: center; justify-content: center; padding: 14px; }
.modal-box { background: var(--c-card); border-radius: var(--radius-lg); max-width: 560px; width: 100%; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-h { padding: 16px 18px; border-bottom: var(--line); font-weight: 800; font-size: 18px; }
.modal-body { padding: 16px 18px; overflow-y: auto; line-height: 1.9; }
.modal-foot { padding: 14px 18px; border-top: var(--line); display: grid; gap: 8px; }
.empty { display: grid; justify-items: center; gap: 10px; padding: 32px 16px; text-align: center; color: var(--c-muted); }
.empty-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--c-bg-alt); color: var(--c-faint); display: flex; align-items: center; justify-content: center; }
.empty-ic .icon { width: 30px; height: 30px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 14px; color: var(--c-muted); flex-wrap: wrap; }
.pager-between { justify-content: space-between; }

/* ---------- 18. 細かい最適化 ---------- */
@container app (max-width: 430px) {
    .card { padding: 18px 16px; }
    .kv > div { grid-template-columns: 7em 1fr; }
}
@container app (max-width: 340px) {
    .app { font-size: 17px; }
    .p-org { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .tile, .a-nav, .btn, .switch-track, .switch-track::after { transition: none; } }

/* ---------- 19. 実装追補（core_20260914・PHP写像で必要になった最小限。デザインの再解釈はしない） ---------- */
/* hidden 属性を display 指定のクラス（.notice など）より優先する */
.app [hidden] { display: none !important; }
/* 帯（is-page）の見出し行: スマホは縦積み、PC は見出しとバッジを横並び（納品HTMLの .row-between 相当） */
.p-head-row { display: grid; gap: 8px; }
.p-head-row .p-chips:empty { display: none; }
@container app (min-width: 900px) {
    .p-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .p-top-row > .p-top-org::before { content: "・"; margin: 0 .35em; }   /* PC: 「マイページ ・ 組織名」 */
    .p-top-row > .p-top-org.is-alone::before { content: none; }           /* 左上ラベルが無い画面は「・」を付けない */
}
/* 実装の .check は本物の checkbox/radio を置く（納品HTMLの .box はプロト用） */
.check input[type="checkbox"], .check input[type="radio"] { width: 24px; height: 24px; flex: none; margin: 2px 0 0; accent-color: var(--c-primary); }
.check-row input[type="checkbox"], .check-row input[type="radio"] { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--c-primary); }
.check.is-disabled input { opacity: .6; }
/* 帯の下に置く行カード（B1 最新のお知らせ）のサムネ画像 */
.rowcard-thumb img, .latest-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 号の閲覧: 画像に変換したページ（実装は img。枡 .doc-page の実物） */
.doc-page-img { display: block; width: 100%; height: auto; background: var(--c-card); border: var(--line); border-radius: 8px; }
/* トップの「集会所の空き（今週）」: サーバー描画の7マス */
.cal-week { grid-template-columns: repeat(7, 1fr); }
/* 同意モーダルの本文（サーバー文言を改行込みで出す） */
.consent-text { white-space: normal; }   /* 0944: 同意文言は書式つきで組み立てる（member_consent_text_html）。段落の中の改行は <br> */
.consent-text p { margin: 0 0 .9em; }
.consent-text h3, .consent-text h4, .consent-text h5 { margin: 1.2em 0 .5em; line-height: 1.5; font-weight: 800; }
.consent-text h3 { font-size: 1.12em; } .consent-text h4 { font-size: 1.04em; } .consent-text h5 { font-size: 1em; }
.consent-text > :first-child { margin-top: 0; }
.consent-text ul { margin: 0 0 .9em; padding-left: 1.3em; }
.consent-text ol { margin: 0 0 .9em; padding-left: 2em; }   /* 番号つき（1. 2. …・番号は本文のまま value で出す） */
.consent-text li { margin: .2em 0; }
.consent-text hr { border: 0; border-top: 1px solid var(--c-border-soft); margin: 1.2em 0; }
.consent-tbl { overflow-x: auto; margin: 0 0 .9em; }
.consent-tbl table { border-collapse: collapse; font-size: .92em; line-height: 1.6; min-width: 100%; }
.consent-tbl th, .consent-tbl td { border: 1px solid var(--c-border-soft); padding: 6px 8px; text-align: left; vertical-align: top; }
.consent-tbl th { background: var(--c-bg); font-weight: 700; }
.consent-tbl tr > :first-child { min-width: 5.5em; }   /* 項目名の列（生年月日・電話番号など4文字）を1文字ずつ折らない */
/* 未読ゲート中の進み具合の帯の文言 */
.consent-meter { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-muted); }
.consent-meter.is-done { color: var(--c-ok); font-weight: 700; }
/* 連携コード入力欄（本物の input） */
.code-input input { text-align: center; font: inherit; font-size: 28px; font-weight: 800; letter-spacing: .12em; border: 0; width: 100%; background: transparent; min-height: 0; padding: 0; }
/* エラー画面の文言 */
.e-msg { font-size: var(--fs-lg); font-weight: 700; color: var(--c-text); }
/* 納品HTMLがインライン style で書いていた微調整（B4 まちぷらすの★色・予約行カードの詰め・脇の注記） */
.icon-accent { color: var(--c-accent-icon); }
.rowcard-compact { padding: 12px 14px; }
.rowcard-compact .rowcard-title { font-size: 17px; }
.p-side-note { padding: 0 4px; }
.p-side-note .btn { width: fit-content; }
/* PC/スマホの一方だけに出す要素（納品HTMLで PC 版・スマホ版に差がある文言や補足に使う） */
@container app (max-width: 899px) { .pc-only { display: none !important; } }
@container app (min-width: 900px) { .sp-only { display: none !important; } }
/* ヒーロー: スマホは全幅ボタン、PC は内容幅（納品 b1-1 / b1-2 のとおり） */
.hero .btn { width: 100%; }
@container app (min-width: 900px) {
    .hero-title { font-size: 26px; }
    .hero .btn { width: fit-content; padding-left: 28px; padding-right: 28px; }
    .hero-art { height: 200px; }
}
.icon-primary { color: var(--c-primary); }
/* B7 お知らせ: 納品HTMLのインライン微調整の置き換え */
.latest-title { font-size: 21px; }
.issue-year + .rowcard-list { margin-top: 8px; }
.toc-pages { margin-left: auto; }
.issue-lead { margin: 0 4px 8px; }
.doc-body { margin: 0 0 10px; }
.issue-nav .btn { flex: 1 1 100%; }   /* 0947 r3: 号の名前入りの「前の号・次の号」が2列だと語の途中で3行に折れる → スマホは1列（PC は .stack の縦積みのまま） */
.sp-only .issue-nav { margin-bottom: 10px; }
/* B8 予約: 納品HTMLのインライン微調整の置き換え */
.modal-strong { font-weight: 700; }
.confirm-list { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.chips a.chip { text-decoration: none; }
.app .chips a.chip:hover { color: inherit; }
/* B3 同意の完読ゲート（納品 b3-5/6 のインライン指定の置き換え） */
.consent-lead { font-weight: 700; margin: 0; }
.modal-box-tall { max-height: 92%; }
.modal-h-icon { display: flex; align-items: center; gap: 8px; }
.terms-text { font-size: 16px; line-height: 1.9; }
.consent .btn { width: fit-content; }
/* B2/D1 登録: 納品HTMLのインライン指定の置き換え */
.p-org-chip { flex: none; margin-left: auto; }
.card-title-lg { font-size: 21px; }
.center-link { justify-content: center; text-align: center; }
.lead-text { padding: 0 4px; margin: 0 0 12px; }
.form-card { gap: 18px; }
.field-grid-2 { display: grid; gap: 16px; }
@container app (min-width: 900px) {
    .field-grid-2 { grid-template-columns: 1fr 1fr; }
    .form-card { padding: 24px; }
    .form-actions.pc-start { justify-items: start; }
}
.fold { margin-top: 14px; }
.fold > summary { cursor: pointer; font-weight: 700; color: var(--c-muted); min-height: var(--tap); display: flex; align-items: center; }
.fold[open] > summary { color: var(--c-text); margin-bottom: 8px; }
.prewrap-text { white-space: pre-wrap; }
.icon-warn { color: var(--c-warn); }
/* B5/B6 登録情報・通知設定 */
.check-body { display: grid; gap: 2px; }
.check-main { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.side-hint { padding: 0 4px; margin: 0; }
/* 320〜359px: 下タブ5項目の文言（まちぷらす／マイページ）が折り返さないよう1段小さく */
@container app (max-width: 359px) {
    .tab { font-size: 11px; letter-spacing: -.03em; }
    .tabbar-in { gap: 0; }
}
/* E系（スタッフ側）: 納品HTMLのインライン指定の置き換え */
.rowcard.edge-ok { border-left: 4px solid var(--c-ok); }
.rowcard.edge-info { border-left: 4px solid var(--c-info); }
.rowcard.edge-warn { border-left: 4px solid var(--c-accent); }
.rowcard.edge-off { border-left: 4px solid var(--c-border); }
.row-badges { gap: 6px; margin-top: 6px; flex-wrap: wrap; }
/* F-73（0940）: 名簿一覧の行カードは詰める（上下余白・行間・補助情報を1行に。タップ領域 --tap と操作の矢印は保つ） */
.rowcard-list.is-dense { gap: 8px; }
.rowcard.rowcard-dense { padding: 10px 12px 10px 14px; gap: 10px; }
.rowcard-dense .rowcard-title { font-size: 17px; line-height: 1.3; }
.rowcard-dense .rowcard-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; margin-top: 4px; font-size: 13px; color: var(--c-muted); line-height: 1.4; min-height: 22px; }
.rowcard-dense .rowcard-sub .rowcard-lead { margin-top: 0; font-size: 13px; line-height: 1.4; }
.rowcard-dense .rowcard-sub .badge { padding: 1px 9px 1px 7px; line-height: 1.4; }
.rowcard-dense .rowcard-sub .tag { padding: 1px 8px; line-height: 1.5; }
.rowcard-dense .next-step { display: inline; font-size: 12px; }
/* #56（0941→0942 F-75 で整え）: 名簿から探して照合する（本人の登録内容・探す条件・候補カード・一致マーク・確認モーダル・補完リスト）
   原則: 語の途中で折らない（.tbl の規則と同じ）／間隔は 8・10・12・16 の4段だけ／マークは候補カードとモーダルで同じ部品（.mm-mark） */
/* 本人の登録内容（項目のチップ。1項目は折らず、足りなければ項目単位で折り返す） */
.mm-self { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 16px; padding: 10px 14px; background: var(--c-bg); border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: 1.7; }
.mm-self > span { white-space: nowrap; }
.mm-self > span.is-long { white-space: normal; }   /* 照合の状態など長い項目は項目内で折り返す */
.mm-self .mm-k { color: var(--c-muted); font-size: var(--fs-xs); font-weight: 700; margin-right: 5px; }
/* 探す: 条件は格子（PC＝氏名を広く4列／スマホ＝2列で氏名・町字は全幅）。ボタンと案内は次の行 */
.mm-form { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: start; margin: 0; }
.mm-form .field { margin: 0; min-width: 0; }
.mm-form input { width: 100%; }
.mm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.mm-actions .hint { margin: 0; }
/* 一致の凡例・候補の見出し行 */
.mm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 16px 0 0; padding: 0 4px; }
.mm-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mm-legend > span.is-long { white-space: normal; display: inline; }
/* 一致マーク（○×—）。バッジと同じ色、記号だけなので左右対称に */
.mm-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; white-space: nowrap; }
.mm-mark.is-ok   { color: var(--c-ok);   background: var(--c-ok-tint);   border-color: var(--c-ok-line); }
.mm-mark.is-ng   { color: var(--c-warn); background: var(--c-warn-tint); border-color: var(--c-warn-line); }
.mm-mark.is-none { color: var(--c-off);  background: var(--c-off-tint);  border-color: var(--c-off-line); }
/* 候補カード: 見出し行 → 一致の行（3つ横並び）→ 名簿の内容（kv）→ 操作 */
.mm-cand { margin-top: 10px; }
.mm-cand.is-off { opacity: .72; }
.mm-cand .card-head-row { margin-bottom: 10px; }
.mm-cand .card-h .sub { font-weight: 500; margin-left: 6px; white-space: nowrap; }
.mm-marks { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0; border-top: 1px solid var(--c-border-soft); border-bottom: 1px solid var(--c-border-soft); font-size: var(--fs-sm); }
.mm-marks > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mm-marks .mm-k { color: var(--c-muted); font-size: var(--fs-xs); font-weight: 700; }
.mm-kv { margin-top: 4px; }
.mm-kv > div { grid-template-columns: 6em 1fr; padding: 5px 0; }
.mm-kv dd { font-weight: 500; }
.mm-cand-act { margin-top: 12px; }
.mm-cand-act .hint { margin: 0; }
/* 確認モーダル: 画面の高さに収める（上: 見出し／中: 本文だけスクロール／下: ボタン行は常に見える・F-59 の規約）。.dlg の後に書かれた同順位の指定に負けないよう .dlg.mm-dlg */
.dlg.mm-dlg { max-width: 640px; width: min(92vw, 640px); padding: 0; max-height: 92vh; }
.mm-dlg[open] { display: flex; flex-direction: column; }
.mm-dlg-h { padding: 16px 18px 10px; flex: none; }
.mm-dlg-h .card-h { margin: 0 0 6px; }
.mm-dlg-h .hint { margin: 0; }
.mm-dlg-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mm-dlg-body { overflow-y: auto; padding: 0 18px 14px; flex: 1; min-height: 0; }
.mm-dlg-foot { padding: 12px 18px; border-top: var(--line); flex: none; margin: 0; }
.mm-cmp { font-size: var(--fs-sm); }
.mm-cmp th, .mm-cmp td { padding: 8px; vertical-align: top; white-space: normal; word-break: keep-all; overflow-wrap: normal; }
.mm-cmp th:first-child, .mm-cmp td:first-child { padding-left: 8px; }
.mm-cmp th:last-child,  .mm-cmp td:last-child  { padding-right: 8px; }
.mm-cmp thead th { white-space: nowrap; }
.mm-cmp th[scope="row"] { width: 7em; font-size: var(--fs-xs); white-space: normal; }
.mm-cmp td.wrap { min-width: 0; max-width: none; }   /* 住所だけ任意の位置で折ってよい（.tbl td.wrap の幅指定は外す） */
.mm-cmp td .mm-mark { margin-left: 6px; vertical-align: 1px; }
.mm-dlg .check { margin: 4px 0; min-height: 44px; padding: 8px 12px; }
.mm-dlg .field { margin: 12px 0 0; }
.mm-dlg fieldset.field { border: 0; padding: 0; }
.mm-dlg fieldset.field legend { padding: 0; }
/* 補完リスト: 操作の行と注記 */
.mm-gaps-act { margin-top: 12px; }
/* 名簿詳細の「次の一手」（箇条書き） */
.mm-next { margin: 4px 0 0; padding-left: 1.3em; }
.mm-next li { margin: 2px 0; }
/* 名簿詳細の操作ボタン行（連携コード・再照合・名簿から探す・取り消し・解除）。スマホでは全幅でそろえる */
.mm-link-act { margin-top: 12px; gap: 8px 10px; }
@container app (max-width: 640px) {
    .mm-self { gap: 2px 14px; padding: 10px 12px; }
    .mm-form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }   /* 0947 r3: 生年月日（date 入力）が末尾1桁とカレンダーの印で重なっていた */
    .mm-form .mm-f-name, .mm-form .mm-f-town { grid-column: 1 / -1; }
    .mm-actions .btn { width: 100%; }
    .mm-actions .hint { width: 100%; }
    .mm-cand-act .btn { width: 100%; }
    .mm-link-act .btn { width: 100%; }
    .mm-link-act form { width: 100%; }
    /* 縦積みの表（.tbl-stack）: 狭い画面では 1行＝1ブロックにし、各セルの前に列名（data-l）を出す。
       横に並べると番号や住所が途中で折れる・列が見切れるため（比較表と補完リストで使用）。列名の幅は --stack-l */
    .tbl-stack { --stack-l: 7.5em; }
    .tbl-stack thead { display: none; }
    .tbl-stack tbody, .tbl-stack tr, .tbl-stack th, .tbl-stack td { display: block; width: auto; }
    .tbl-stack tr { padding: 8px 0; border-bottom: 1px solid var(--c-border-soft); }
    .tbl-stack tr:last-child { border-bottom: 0; }
    .tbl-stack th[scope="row"] { padding: 0 0 4px; background: none; width: auto; font-weight: 700; color: var(--c-muted); white-space: normal; }
    .tbl-stack td, .tbl-stack td:first-child, .tbl-stack td:last-child { padding: 2px 0; border: 0; display: flex; align-items: baseline; gap: 8px; white-space: normal; }
    .tbl-stack td::before { content: attr(data-l); flex: none; width: var(--stack-l); color: var(--c-muted); font-size: var(--fs-xs); font-weight: 700; }
    .tbl-stack td > span.mm-v { min-width: 0; }
    .mm-cmp { --stack-l: 4.2em; }
    .mm-promo { --stack-l: 10.5em; }   /* 0944 #68 加入促進リスト: 列名「照合できなかった理由」が1行に収まる幅 */
    .a-orgs { --stack-l: 5.5em; }      /* 0945 運営コンソール「参加団体」 */
    .mm-gaps .tbl-wrap { overflow: visible; }
}
.a-main .tile-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container app (min-width: 900px) {
    .a-main .tile-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .a-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .a-cols-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
    .a-cols-manage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
    .todo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.a-cols-2, .a-cols-detail, .a-cols-manage { display: grid; gap: 16px; }
/* 0945 運営コンソール「参加団体」: 団体の編集（1団体＝1つの開閉） */
.a-orgs .a-org-id { display: block; font-weight: 500; }
.a-orgs th[scope="row"] { width: auto; }
.a-org-edit { padding: 10px 0; border-top: 1px solid var(--c-border-soft); }
.a-org-edit:first-of-type { border-top: 0; }
.a-org-edit[open] > summary { margin-bottom: 10px; }
.todo-list .rowcard { padding: 12px 16px; }
.todo-list .tile-ic { width: 44px; height: 44px; }
.todo-list .rowcard-title { font-size: 17px; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--c-accent-tint); color: var(--c-accent-text); font-size: 13px; font-weight: 800; }
.card-h.card-h-danger { border-left-color: var(--c-danger); }
.tbl-card .card-head-row { padding: 16px 18px 0; }
/* スタッフ側の残り部品（旧 app.css からトークンv3で再表現・E4/E5/E6） */
.a-inline-form { display: inline-block; margin: 0; }
.tbl th[scope="row"] { color: var(--c-muted); font-weight: 500; width: 15em; }
.tbl thead + tbody th[scope="row"] { width: auto; color: var(--c-text); font-weight: 700; white-space: nowrap; }
.tbl td .sub, .tbl .btn, .tbl .badge { white-space: nowrap; }
.progress { background: var(--c-bg-alt); border-radius: 999px; height: 14px; overflow: hidden; margin: .5rem 0; }
.progress-bar { background: var(--c-primary); height: 100%; width: 0; transition: width .3s; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumb { display: block; width: 120px; text-align: center; color: var(--c-muted); text-decoration: none; font-size: var(--fs-xs); }
.thumb img { display: block; width: 120px; height: auto; border: var(--line); border-radius: 6px; background: #fff; margin-bottom: 4px; }
.cal-adm { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-adm .cal-cell { min-height: 64px; text-decoration: none; justify-content: flex-start; align-items: stretch; padding: 4px; }
.cal-adm .cal-cell .cal-d { text-align: right; }
.cal-adm .tag { display: block; margin-top: 2px; font-size: 12px; }
.row-off td { color: var(--c-faint); }
.code-box { word-break: break-all; }
/* <dialog> 型の絞り込み（E6 予約の一覧） */
.dlg { border: var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px 20px; max-width: 460px; width: 92vw; background: var(--c-card); color: var(--c-text); }
.dlg::backdrop { background: rgba(14, 37, 64, .35); }
.dlg .row { display: block; }
.opt input[type="radio"] { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--c-primary); }
/* 0916: Chrome検証 E'-4 / E'-12 の修正 */
.kv dd.row-badges { flex-wrap: wrap; }
.kv dd .badge { white-space: normal; }
/* 0925: 0916 で入れた「.tbl td は任意の位置で折り返す（overflow-wrap: anywhere）」は撤回。
   幅が足りないスマホで日本語が1文字ずつ縦に割れる原因だった。長文のセルだけ .cell-wide／.wrap で折り返し、
   ほかは語の途中で折らず .tbl-wrap の横スクロールに逃がす（§14 の規則に一本化） */
.tbl td.cell-wide { white-space: normal; overflow-wrap: anywhere; min-width: 12rem; max-width: 26rem; }
.tbl td.nowrap .sub { white-space: nowrap; }

/* ---------- 20. 区分色 第5色（店舗担当・杏）＋ 旧ブリッジの残り（0916 で bridge.css を撤去） ---------- */
.t-portal.aud-shop { --c-primary: #B8722A; --c-primary-dark: #8F571F; --c-primary-faint: #FBF0E2; --c-primary-line: #EBD1AE; }
.field { margin: 0 0 1.1rem; }
.stack .field, .stack-lg .field, .form-card .field, .card.stack .field { margin: 0; }
form h3.card-h { border-top: 2px solid var(--c-border); margin-top: 1.6rem; padding-top: 1.2rem; }
.sum.sum-danger { border-color: var(--c-danger-line); color: var(--c-danger); }
.sum.sum-danger .sum-dot { background: var(--c-danger); }

/* ---------- 21. 行事カレンダー schedule（core_20260946）。画面＋印刷。色値はここだけ ---------- */
/* 分類の色（8色）: --sc-ink（文字）／--sc-tint（地）／--sc-dot（印・帯） */
.sc-c-green  { --sc-ink: #2E6B45; --sc-tint: #E8F3EC; --sc-dot: #3E9B62; }
.sc-c-blue   { --sc-ink: #2F4E7A; --sc-tint: #EAF0F8; --sc-dot: #4A7BC8; }
.sc-c-orange { --sc-ink: #8A5200; --sc-tint: #FDF1DF; --sc-dot: #E8923A; }
.sc-c-red    { --sc-ink: #A3273F; --sc-tint: #FBEAF0; --sc-dot: #D9536C; }
.sc-c-purple { --sc-ink: #5B3F86; --sc-tint: #F0EAF7; --sc-dot: #8A62C4; }
.sc-c-teal   { --sc-ink: #1F6F67; --sc-tint: #E6F4F2; --sc-dot: #2FA398; }
.sc-c-pink   { --sc-ink: #9C3A6E; --sc-tint: #FBEAF3; --sc-dot: #D9679F; }
.sc-c-gray   { --sc-ink: #5A5A5A; --sc-tint: #F1EBDE; --sc-dot: #9A958A; }
.sc-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--sc-dot, #9A958A); flex: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.sc-dot-lg { width: 20px; height: 20px; }
.sc-cat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); background: var(--sc-tint); color: var(--sc-ink); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.sc-cat-sm { font-size: 12px; padding: 1px 8px 1px 6px; }
.sc-cat-sm .sc-dot { width: 9px; height: 9px; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 0; }
.sc-off-text, .sc-off .rowcard-title, .sc-off .sc-yt-text, .sc-off .sc-p-tt, .sc-off .sc-chip, .sc-chip.sc-off { text-decoration: line-through; color: var(--c-faint); }
.sc-off .sc-dot, .sc-dot.sc-off { opacity: .45; }

/* 月の格子（住民） */
.sc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sc-w { text-align: center; font-size: 12px; font-weight: 700; color: var(--c-muted); padding: 2px 0 4px; }
.sc-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; min-height: 56px; padding: 4px 3px 3px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-card); color: var(--c-text); text-decoration: none; font: inherit; }
a.sc-cell:hover { border-color: var(--c-primary-line); background: var(--c-primary-faint); }
.sc-blank { border: 0; background: transparent; }
.sc-d { font-size: 13px; line-height: 1.2; color: var(--c-muted); text-align: right; }
.sc-hol .sc-d { color: #C0392B; }  .sc-sat .sc-d { color: #1F5BA8; }
.sc-holname { font-size: 10px; line-height: 1.1; color: #C0392B; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sc-today { outline: 2px solid var(--c-primary); outline-offset: -1px; }  .sc-today .sc-d { color: var(--c-primary); font-weight: 800; }
.sc-sel { box-shadow: 0 0 0 3px var(--c-primary-line); background: var(--c-primary-faint); }
.sc-marks { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.sc-chip { display: none; }
.sc-chip-n { display: inline-block; white-space: nowrap; font-weight: 500; }
.sc-more { font-size: 11px; color: var(--c-muted); }
.sc-grid-hint { margin: 8px 0 0; }
.sc-tools { margin-top: 12px; }
@container app (min-width: 900px) {
  .sc-cell { min-height: 84px; padding: 4px 5px; }
  .sc-marks { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; }
  .sc-marks .sc-dot { display: none; }
  .sc-chip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 11px; line-height: 1.3; font-weight: 700; padding: 1px 4px 1px 8px; border-radius: 3px; box-shadow: inset 4px 0 0 var(--sc-dot); background: var(--sc-tint); color: var(--sc-ink); white-space: normal; overflow-wrap: anywhere; overflow: hidden; }
}
/* その月の一覧・選んだ日 */
.sc-day { margin: 0 0 16px; }
.sc-day-h { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.sc-day-h .sub { margin-left: 6px; }
.sc-row { box-shadow: inset 6px 0 0 var(--sc-dot); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.sc-time { font-weight: 700; color: var(--c-muted); }
.sc-date { font-weight: 800; color: var(--c-text); }
.sc-month-list .sec-h { margin-top: 4px; }
/* 年間一覧 */
.sc-year-switch .chip.is-active, .sc-filters .chip.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.sc-month-jump { margin-top: 10px; }
.sc-month-jump .chip { min-height: 36px; padding: 0 12px; }
.sc-year { display: grid; gap: 12px; margin-top: 12px; }
.sc-mblock { padding: 12px 14px; }
.sc-mblock-h { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.sc-mblock-h a { color: inherit; text-decoration: none; }
.sc-mblock-h .sub { margin-left: 6px; font-weight: 500; }
.sc-mblock-empty { margin: 0; }
.sc-yrow { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 0 8px; padding: 6px 0; border-top: 1px solid var(--c-border-soft); color: var(--c-text); text-decoration: none; }
.sc-dpart { display: inline-block; white-space: nowrap; }
.sc-nb { white-space: nowrap; }   /* 0947 r3: 打ち消し線を保ったまま折らない（行事の詳細の日時） */
.sc-yrow:first-of-type { border-top: 0; }
.sc-yrow:hover .sc-yt { text-decoration: underline; }
.sc-yd { font-weight: 700; font-size: var(--fs-sm); line-height: 1.5; }
.sc-yt { font-weight: 700; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.sc-yt .sc-dot { vertical-align: middle; margin: -2px 5px 0 0; }
.sc-yt .tag { vertical-align: middle; margin-left: 2px; }
.sc-ym { grid-column: 2; font-size: var(--fs-xs); color: var(--c-muted); word-break: keep-all; overflow-wrap: anywhere; }
@container app (min-width: 900px) {
  .sc-year { grid-template-columns: repeat(3, 1fr); }
}
/* 詳細 */
.sc-detail .kv > div { grid-template-columns: 6em 1fr; }
.sc-desc { line-height: 1.8; overflow-wrap: anywhere; }
/* 日付の dialog（schedule.js） */
.dlg.sc-dlg { max-width: 560px; width: min(92vw, 560px); padding: 0; max-height: 88vh; display: flex; flex-direction: column; }
.dlg.sc-dlg[open] { display: flex; }
.sc-dlg-h { padding: 16px 18px 8px; }
.sc-dlg-body { padding: 0 18px; overflow: auto; }
.sc-dlg-foot { padding: 12px 18px 16px; display: flex; justify-content: flex-end; }

/* 役員画面 */
.sc-now { gap: 12px; }
.sc-now-card { display: grid; gap: 8px; align-content: start; padding: 12px; border: var(--line); border-radius: var(--radius-md); background: var(--c-bg); }
.sc-now-h { font-weight: 800; font-size: 17px; }
.sc-tbl-head { padding: 16px 18px 8px; }
.sc-tbl-hint { padding: 0 18px 16px; }
.sc-url-h { margin-top: 16px; }
.sc-grid-2 { display: grid; gap: 12px; }
.sc-time-row { display: grid; gap: 8px; }
.sc-times { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sc-times label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.app .sc-times input[type="time"] { width: auto; min-width: 7.5em; flex: 0 0 auto; }
.sc-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; min-height: var(--tap); }
.sc-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--c-primary); }
.sc-repeat { display: grid; gap: 4px; border: var(--line); border-radius: var(--radius-md); padding: 10px 14px; }
.sc-repeat legend { padding: 0 6px; }
.sc-fold summary { display: inline-flex; list-style: none; cursor: pointer; }
.sc-fold summary::-webkit-details-marker { display: none; }
.sc-fold .sc-status-form { margin-top: 12px; }
.sc-status-pick .chip input { width: 20px; height: 20px; margin: 0 2px 0 0; accent-color: var(--c-primary); }
.sc-copy-chk { display: inline-flex; align-items: center; min-height: var(--tap); }
.sc-copy-chk input { width: 24px; height: 24px; margin: 0; accent-color: var(--c-primary); }
.app .sc-copy-date { width: auto; min-width: 10.5em; }
.sc-copy-tbl td.wrap { min-width: 9em; max-width: 16em; }
.sc-copy-tbl td.wrap .sub { white-space: normal; }
.sc-copy-tools, .sc-list-tools { margin-top: 10px; }
.app .sc-cat-sort { width: 5.5em; }
.app .sc-cat-name { min-width: 10em; }
.app .sc-cat-color { width: auto; min-width: 6em; }
.sc-cat-tbl .cell-row { gap: 8px; flex-wrap: nowrap; }
.sc-ev-tbl .sub { display: block; }
.sc-ev-tbl td.sc-ev-state { white-space: normal; min-width: 7em; }
.sc-ev-tbl td.sc-ev-state .next-step { white-space: nowrap; }
.sc-log-tbl .cell-stack { gap: 2px; }
.sc-organizer-note { display: block; }
/* 実施報告・写真（住民の詳細） */
.sc-report-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sc-report-h .card-title { margin: 0; }
.sc-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sc-photo { margin: 0; display: grid; gap: 4px; align-content: start; min-width: 0; }
.sc-photo > a { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-bg-alt); }
.sc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-photo figcaption { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; overflow-wrap: anywhere; }
.sc-photo.is-staff > a { outline: 2px dashed var(--c-warn-line); outline-offset: -2px; }
.sc-photo-note { margin: 0; }
.sc-report-tag { background: var(--c-info-tint); color: var(--c-info); }
.sc-report .kv > div { grid-template-columns: 6em 1fr; }
.sc-ical-help > p { margin: 0; }
.sc-ical > .sc-ical-help { margin-top: 4px; }
/* 実施報告・写真（役員） */
.notice.sc-report-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sc-vis-pick .chip input { width: 20px; height: 20px; margin: 0 2px 0 0; accent-color: var(--c-primary); }
.sc-consent-note { margin: 4px 0 14px; }
.sc-photo-add { padding: 12px 14px; border: 1.5px dashed var(--c-border); border-radius: var(--radius-md); background: var(--c-bg); }
.sc-photo-add .field { margin: 0; }
.sc-photo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.sc-photo-card { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px; border: var(--line); border-radius: var(--radius-md); background: var(--c-bg); scroll-margin-top: 96px; }
.sc-photo-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-bg-alt); }
.sc-photo-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-photo-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sc-photo-meta { margin: 0; font-size: var(--fs-xs); line-height: 1.5; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sc-photo-form { gap: 8px; }
.sc-photo-form .field { margin: 0; }
.sc-photo-form p:last-child { margin: 0; }
.sc-takedown[open] { border-top: var(--line); padding-top: 8px; }
.sc-takedown form { margin-top: 8px; }
.sc-photo-del { color: var(--c-danger); }
.sc-notify-preview { font-family: inherit; user-select: text; line-height: 1.7; margin: 8px 0 12px; }
@container app (min-width: 560px) {
  .sc-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container app (min-width: 900px) {
  .sc-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container app (min-width: 640px) {
  .sc-grid-2 { grid-template-columns: 1fr 1fr; }
}
@container app (max-width: 640px) {
  .sc-copy-tbl { --stack-l: 5.5em; }
  .sc-copy-tbl td:empty { display: none; }
  .sc-copy-tbl td.wrap { max-width: none; }
  .sc-copy-tbl .sc-copy-chk { min-height: 0; }
}

/* 印刷専用ページ（/schedule/print）。画面では紙面を白いカードに見せ、印刷時は紙そのもの */
.sc-printpage { background: var(--c-bg); }
.sc-p-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; background: var(--c-card); border-bottom: var(--line); position: sticky; top: 0; z-index: 2; }
.sc-p-toolbar .hint { flex-basis: 100%; margin: 0; }
.sc-p-opts { gap: 6px; }
.app .sc-p-opts select { width: auto; min-width: 9em; }
.sc-p-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 8px; }   /* 0947 r3: 紙面は A4 の幅のまま。画面が狭ければ横スクロール（縮めて1文字ずつ折らない） */
.sc-p-sheet { box-sizing: border-box; width: 297mm; margin: 16px auto; padding: 10mm; background: #fff; color: #222; box-shadow: var(--shadow-md); font-size: 11pt; line-height: 1.35; }
.sc-p-portrait { width: 210mm; }
.sc-p-scrollhint[hidden] { display: none; }
.sc-p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 2px solid #333; padding-bottom: 6px; margin-bottom: 8px; }
.sc-p-title { margin: 0; font-size: 18pt; font-weight: 800; }
.sc-p-org { font-size: 11pt; color: #444; }
.sc-legend-print { margin: 0; justify-content: flex-end; max-width: 50%; }
.sc-p-year { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; }
.sc-p-month { border: 1px solid #999; border-radius: 4px; padding: 4px 6px 6px; break-inside: avoid; }
.sc-p-mh { margin: 0 0 3px; font-size: 12pt; font-weight: 800; border-bottom: 1px solid #bbb; }
.sc-p-mh span { font-size: 8pt; font-weight: 500; color: #666; margin-left: 6px; }
.sc-p-none { margin: 0; color: #999; font-size: 9pt; }
.sc-p-row { display: grid; grid-template-columns: 4.4em minmax(0, 1fr) auto; column-gap: 6px; align-items: baseline; padding: 1px 0 1px 6px; border-left: 4px solid var(--sc-dot, #999); margin: 2px 0; font-size: 9.5pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.sc-p-d { font-weight: 700; }
.sc-p-t { font-weight: 700; min-width: 0; }
.sc-p-m { grid-column: 2; font-size: 8pt; color: #555; word-break: keep-all; overflow-wrap: anywhere; }
.sc-p-cat { grid-column: 3; grid-row: 1; font-size: 7.5pt; color: var(--sc-ink, #555); white-space: nowrap; }
.sc-p-mark { font-weight: 700; color: #A3273F; font-size: 8.5pt; }
.sc-p-dense1 .sc-p-row { font-size: 8.5pt; margin: 1px 0; }   .sc-p-dense1 .sc-p-m { font-size: 7.5pt; }
.sc-p-dense2 .sc-p-row { font-size: 7.5pt; margin: 0; padding-top: 0; padding-bottom: 0; }  .sc-p-dense2 .sc-p-m { display: none; }  .sc-p-dense2 .sc-p-cat { font-size: 7pt; }
.sc-p-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.sc-p-table th, .sc-p-table td { border: 1px solid #999; padding: 3px 6px; text-align: left; vertical-align: top; }
.sc-p-table th { background: #eee; font-size: 9pt; }
.sc-p-table tr { border-left: 4px solid var(--sc-dot, #999); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.sc-p-table td.nowrap { white-space: nowrap; }
.sc-grid-print { gap: 2px; }
.sc-grid-print .sc-cell { min-height: 22mm; border-color: #999; border-radius: 2px; padding: 2px 3px; }
.sc-grid-print .sc-marks { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 1px; }
.sc-grid-print .sc-marks .sc-dot { display: none; }
.sc-grid-print .sc-chip { display: block; font-size: 8pt; line-height: 1.25; font-weight: 700; padding: 0 3px 0 6px; border-radius: 2px; box-shadow: inset 3px 0 0 var(--sc-dot); background: var(--sc-tint); color: var(--sc-ink); white-space: normal; overflow-wrap: anywhere; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.sc-grid-print .sc-d { font-size: 9pt; }
.sc-grid-print .sc-holname { font-size: 7pt; }
.sc-p-mlist { margin-top: 8px; }
.sc-p-mlist .sc-p-row { font-size: 10pt; grid-template-columns: 6.4em minmax(0, 1fr) auto; }
.sc-p-extra { font-size: 8.5pt; color: #444; margin: 0 0 4px 16px; }
.sc-p-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 10px; border-top: 1px solid #999; padding-top: 6px; font-size: 8.5pt; color: #444; }
.sc-p-meta { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sc-p-qr svg { width: 20mm; height: 20mm; display: block; }
.sc-p-empty { margin: 24px 0; text-align: center; color: #666; }
@media print {
  .sc-printpage { background: #fff; }
  .sc-p-toolbar { display: none !important; }
  .sc-p-scroll { overflow: visible; padding: 0; }
  .sc-p-sheet { margin: 0; padding: 0; box-shadow: none; max-width: none; width: auto; }
  .sc-p-month { break-inside: avoid; page-break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}   /* 0947 r3: 0946 の載せ直しで schedule の @media print の閉じ括弧が落ち、22 の実績レポートの CSS が印刷時にしか効かなくなっていた（役員画面の実績レポートが素の文字と表になる） */
/* ---------- 22. 実績レポート report（core_20260943）。役員画面＋印刷。色値はここだけ。画面の間隔は 8・10・12・16（紙面は pt／mm で組む） ---------- */
/* グラフは表と並べる（表が正）。色だけに頼らない: 値は数字で書き、2系列は塗りと斜線で分ける */
.rp-defs { position: absolute; }
.rp-period { display: grid; gap: 12px; }
.rp-period-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.app .rp-period-form select { width: auto; min-width: 9.5em; flex: 0 1 auto; }
.rp-tilde { color: var(--c-muted); }
.rp-period-now { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; font-size: var(--fs-md); }
.rp-period-now .sub { font-size: var(--fs-sm); color: var(--c-muted); }
.rp-actions form { margin: 0; }
.rp-chips .chip { min-height: 40px; padding: 0 12px; text-decoration: none; }
/* 見出しの数字 */
.rp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rp-kpi { background: var(--c-card); border: var(--line); border-top: 5px solid var(--c-primary); border-radius: var(--radius-md); padding: 12px 16px; min-width: 0; }
.rp-kpi-l { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); }
.rp-kpi-v { font-size: 30px; font-weight: 800; line-height: 1.25; color: var(--c-primary-dark); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rp-kpi-s { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }
@container app (min-width: 900px) { .rp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rp-kpi-v { font-size: 34px; } }
/* 節 */
.rp-sec { display: grid; gap: 10px; }
.rp-sec > .card-h { margin-bottom: 0; }
.rp-h3 { margin: 16px 0 0; font-size: 16px; font-weight: 800; padding-top: 12px; border-top: 1px solid var(--c-border-soft); }
.rp-sec > .card-h + .rp-h3 { border-top: 0; padding-top: 0; margin-top: 0; }
.rp-h3 .sub { font-size: var(--fs-xs); font-weight: 500; margin-left: 8px; }   /* 基本の .sub は .8em なので、最小の 13px を明示する */
.rp-empty { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.rp-foot { margin: 0; font-size: var(--fs-xs); }
/* 表（数字は右寄せ・等幅の数字） */
.rp-tbl { font-size: var(--fs-sm); }
.rp-tbl .rp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-tbl th[scope="row"] { white-space: normal; font-weight: 700; color: var(--c-text); width: auto; background: none; border-bottom: 1px solid var(--c-border-soft); }
.rp-tbl tr:last-child th[scope="row"] { border-bottom: 0; }
.rp-tbl-narrow { max-width: 560px; }
@container app (max-width: 640px) {   /* スマホ: 文字は最小の 13px のまま、余白を詰めて画面の幅に収める */
  .rp-tbl { font-size: var(--fs-xs); }
  .app .rp-tbl th, .app .rp-tbl td { padding: 8px 5px; }
  .rp-tbl thead th { white-space: normal; line-height: 1.35; }
  .rp-tbl tbody th[scope="row"] { min-width: 10.4em; }
  .rp-tbl-funnel tbody th[scope="row"] { min-width: 8.6em; }
  .app .rp-tbl .rp-barcol { width: 22%; min-width: 56px; }   /* あとの基本の指定（34%・90px）に負けないよう .app を付ける */
  .rp-tbl-funnel .rp-barcol { display: none; }
  .app .rp-tbl-tight th, .app .rp-tbl-tight td { padding: 8px 5px; }
  .app .rp-tbl th:first-child, .app .rp-tbl td:first-child { padding-left: 6px; }
  .app .rp-tbl th:last-child, .app .rp-tbl td:last-child { padding-right: 6px; }
  .rp-tbl.rp-tbl-tight tbody th[scope="row"] { min-width: 0; }   /* 月・日の表は行の見出しが短い（数字の列に幅を回す） */
  .rp-ym-y { display: block; font-weight: 500; color: var(--c-muted); }   /* 年は月の上の行へ */
  .rp-ym-to { display: block; }   /* まとめた月（9月〜10月）は「〜10月」を次の行へ */
  .app .rp-band { display: none; }   /* 時間帯の範囲は、表の下の注記で読む */
  /* グラフ: 棒が 8 本以上のときは、数字（表にある）と横軸の見出しを間引く。文字は 13px のまま */
  .rp-chart.is-mid .rp-val:not(.rp-val-end) { display: none; }
  .rp-chart.is-mid .rp-ax-2 { display: none; }
  .rp-chart.is-mid.is-long .rp-axis { display: none; }
  .rp-chart.is-mid.is-long .rp-axis:not(.rp-ax-3) { display: inline; }
}
.tbl.rp-tbl thead + tbody th[scope="row"], .tbl.rp-tbl tbody th[scope="row"] { white-space: normal; overflow-wrap: anywhere; word-break: normal; word-break: auto-phrase; }   /* 行の見出し（区分名＋補足）は長文のセル（.wrap と同じ折り返し） */
.rp-tbl .rp-note { overflow-wrap: anywhere; word-break: normal; word-break: auto-phrase; }
.rp-tbl .rp-msg { white-space: normal; text-align: left; font-weight: 500; color: var(--c-muted); }
.rp-band { display: block; }
.tbl.rp-tbl.rp-tbl-tight thead + tbody th[scope="row"] { white-space: nowrap; }   /* 月・日の見出しは折らない */
.rp-tbl .rp-note { display: block; font-size: var(--fs-xs); font-weight: 500; white-space: normal; }
.rp-tbl .sub { font-size: var(--fs-xs); }
.rp-tbl th, .rp-tbl td { padding: 9px 10px; }
.rp-tbl th:first-child, .rp-tbl td:first-child { padding-left: 10px; }
.rp-tbl th:last-child, .rp-tbl td:last-child { padding-right: 10px; }
.rp-tbl-tight th, .rp-tbl-tight td { padding: 5px 10px; }
.rp-tbl .rp-barcol { width: 34%; min-width: 90px; }
.rp-tbl .rp-row-total td, .rp-tbl .rp-row-total th[scope="row"] { border-top: 2px solid var(--c-border); background: var(--c-bg); }
.rp-row-base th, .rp-row-base td { color: var(--c-muted); font-weight: 500; }
.rp-row-other th { font-weight: 700; }
/* 棒（表の中） */
.rp-bar { display: block; }
.rp-bar-bg { fill: #EFE9DD; }
.rp-pat-bg { fill: #fff; }
.rp-pat-fg { fill: #26456B; }
.rp-pat-dot { fill: #5A5A5A; }
.rp-swatch rect { stroke: #26456B; }
.rp-sw-a { fill: #26456B; }
.rp-bar-main .rp-bar-fg { fill: #26456B; }   /* その他＝斜線・内訳＝点描は SVG の fill 属性（模様）で塗る */
.rp-bar-other .rp-bar-fg, .rp-bar-sub .rp-bar-fg { stroke: #26456B; stroke-width: 1; }
/* グラフ（SVG）。横は親に合わせて伸び縮み、文字は縮まない */
.rp-figs { display: grid; gap: 12px; }
@container app (min-width: 900px) { .rp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-fig { margin: 0; padding: 10px 12px 8px; border: var(--line); border-radius: var(--radius-sm); background: var(--c-card); min-width: 0; }
.rp-fig figcaption { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); margin-bottom: 0; }
.rp-chart { display: block; overflow: visible; }
.rp-chart text { font-family: inherit; fill: #2A2A2A; }
.rp-chart .rp-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-chart .rp-axis { font-size: 13px; fill: #5A5A5A; }
.rp-chart .rp-tick { font-size: 13px; fill: #6F6A5E; }
.rp-chart .rp-col-a { fill: #26456B; }
.rp-chart .rp-col-b { stroke: #26456B; stroke-width: 1; }   /* 斜線は SVG の fill 属性（模様）で塗る */
.rp-chart .rp-base { stroke: #2A2A2A; stroke-width: 1.2; }
.rp-chart .rp-grid-line { stroke: #D9D3C5; stroke-width: 1; stroke-dasharray: 3 3; }
.rp-chart .rp-line { stroke: #26456B; stroke-width: 2; }
.rp-chart .rp-dot { fill: #fff; stroke: #26456B; stroke-width: 2; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.rp-legend span { display: inline-flex; align-items: center; gap: 8px; }
/* 曜日×時間帯（濃淡は補助。数字が正） */
.rp-grid th, .rp-grid td { text-align: center; }
.rp-grid td.rp-num { text-align: center; }
.rp-grid .rp-heat0 { color: var(--c-muted); }
.rp-grid .rp-heat1 { background: #EAF0F8; }
.rp-grid .rp-heat2 { background: #C3D2E6; }
.rp-grid .rp-heat3 { background: #8FAAD0; }
.rp-grid .rp-heat4 { background: #3F6498; color: #fff; font-weight: 700; }
.rp-grid .rp-heat-x { color: var(--c-muted); }
.rp-grid td, .rp-bar rect, .rp-chart rect, .rp-kpi { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.rp-grid thead th { white-space: normal; line-height: 1.35; text-align: center; }
.rp-grid tbody th[scope="row"] { text-align: center; white-space: nowrap; min-width: 0; }
.rp-notes-list { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: var(--fs-sm); }

/* 印刷用ページ（/staff/report/print）。画面では紙面を白い紙に見せ、印刷時は紙そのもの。紙面の文字は 9pt 以上 */
.rp-printpage { background: var(--c-bg); }
.rp-p-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; background: var(--c-card); border-bottom: var(--line); position: sticky; top: 0; z-index: 2; }
.rp-p-toolbar .hint { flex-basis: 100%; margin: 0; }
.rp-p-opts { gap: 8px; margin: 0; align-items: center; min-width: 0; max-width: 100%; }   /* 0947 r3: スマホで選択肢の長い文言ぶんはみ出さない（縮められるように） */
.app .rp-p-opts select { width: auto; min-width: 12em; max-width: 100%; }
@media (max-width: 479px) { .app .rp-p-opts select { min-width: 0; flex: 1 1 10em; } }   /* 0947 r3: スマホで「様式」の選択肢が画面からはみ出さない */
.rp-p-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 8px; }   /* 0947 r3: 紙面は A4 の幅のまま。画面が狭ければ横スクロール（schedule の印刷ページと同じ） */
.rp-p-scrollhint[hidden] { display: none; }
.rp-p-sheet { box-sizing: border-box; margin: 16px auto; padding: 12mm; background: #fff; color: #222; box-shadow: var(--shadow-md); width: 210mm; font-size: 10.5pt; line-height: 1.5; }
.rp-p-sheet > * + * { margin-top: 10px; }   /* 紙面は grid にしない（ページをまたぐ表が重ならないように、ふつうの縦積み） */
.rp-p-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid #333; padding-bottom: 6px; }
.rp-p-title { margin: 0; font-size: 17pt; font-weight: 800; line-height: 1.3; }
.rp-p-org { font-size: 11pt; color: #444; }
.rp-p-meta { font-size: 9pt; color: #444; text-align: right; line-height: 1.5; white-space: nowrap; }
.rp-p-foot { display: flex; justify-content: space-between; border-top: 1px solid #999; padding-top: 4px; font-size: 9pt; color: #555; }
.rp-p-sheet .rp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rp-p-sheet .rp-kpi { border-radius: 4px; border-color: #999; border-top-color: #26456B; padding: 6px 8px; }
.rp-p-sheet .rp-kpi-l { font-size: 9pt; color: #444; }
.rp-p-sheet .rp-kpi-v { font-size: 17pt; color: #1B3350; }
.rp-p-sheet .rp-kpi-s { font-size: 9pt; color: #444; }
.rp-p-sheet .card { border: 0; border-radius: 0; box-shadow: none; padding: 0; background: transparent; }
.rp-p-sheet .card-h { font-size: 13pt; border-left: 6px solid #26456B; margin: 6px 0 0; }
.rp-p-sheet .rp-h3 { font-size: 11pt; margin: 10px 0 0; padding-top: 0; border-top: 0; break-after: avoid; }
.rp-p-sheet .rp-h3 .sub { font-size: 9pt; }
.rp-p-sheet .rp-sec { display: block; }
.rp-p-sheet .rp-sec > * + * { margin-top: 6px; }
.rp-p-sheet .rp-tbl { font-size: 10pt; }
.rp-p-sheet .rp-tbl th, .rp-p-sheet .rp-tbl td { padding: 2.5px 6px; border-bottom: 1px solid #bbb; }
.rp-p-sheet .rp-tbl thead th { background: #eee; color: #222; font-size: 9pt; border-top: 1px solid #999; border-bottom: 1px solid #999; }
.rp-p-sheet .rp-tbl .rp-note, .rp-p-sheet .rp-tbl .sub { font-size: 9pt; color: #555; }
.rp-p-sheet .rp-row-total td, .rp-p-sheet .rp-row-total th { background: #f3f3f3; border-top: 1.5px solid #666; }
.rp-p-sheet .rp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rp-p-sheet .rp-fig { border-color: #bbb; border-radius: 4px; padding: 6px 8px 2px; break-inside: avoid; }
.rp-p-sheet .rp-fig figcaption { font-size: 9pt; color: #333; }
.rp-p-sheet .rp-chart .rp-val, .rp-p-sheet .rp-chart .rp-axis, .rp-p-sheet .rp-chart .rp-tick { font-size: 9pt; }
.rp-p-sheet .rp-ym-y, .rp-p-sheet .rp-ym-to { display: inline; }
.rp-p-sheet .rp-foot, .rp-p-sheet .hint { font-size: 9pt; color: #444; line-height: 1.5; }
.rp-p-sheet .rp-empty { font-size: 9.5pt; color: #444; }
.rp-p-sheet .rp-notes-list { font-size: 9pt; }
.rp-p-sheet .tbl-wrap { overflow: visible; }
.rp-p-sheet table { break-inside: auto; }
.rp-p-sheet tr { break-inside: avoid; }
.rp-p-sheet .rp-grid thead th { font-size: 9pt; }
.rp-p-sheet .rp-legend { font-size: 9pt; margin: 0 0 2px; }
.rp-p-sheet .card-h, .rp-p-sheet .rp-h3 { break-after: avoid; }
.rp-p-sheet .rp-sec + .rp-sec:not(.rp-notes) { break-before: page; }   /* 登録と利用で紙を分ける */
.rp-p-sheet .rp-notes { break-inside: avoid; }
.rp-p-foot { break-before: avoid; }
@media print {
  .rp-printpage { background: #fff; }
  .rp-p-toolbar { display: none !important; }
  .rp-p-scroll { overflow: visible; padding: 0; }
  .rp-p-sheet { margin: 0; padding: 0; box-shadow: none; max-width: none; width: auto; }
  .rp-printpage a { color: inherit; text-decoration: none; }
}