/* ==========================================================================
   さかもと村ウェブアプリ
   作成者：ソーゾーリンク株式会社
   作成日：2026-09-15（JST）
   Copyright (c) Sozolink Inc.

   画面モック（docs/projects/sakamoto/mock/sakamoto-member-card.html）の設計をそのまま実装。
   ビルド（vite/npm）を通さず1枚で完結させている。更新のたびに npm を要求すると、
   サーバー側の事情でデプロイが止まるため。
   色は全てカスタムプロパティで一元管理する（社内コーディング規約）。
   ブレークポイントは 1080 / 800 / 560（全社レスポンシブ規約 2026-08-29）。
   ========================================================================== */

/* ----- Reset ----- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
/* hidden を**必ず効かせる**（2026-10-03 実測で見つけた不具合）。
   ブラウザ既定の [hidden]{display:none} は、こちら側で display を書いた時点で負ける
   （作者の指定の方が強い）。そのため .btn[hidden] のボタンが画面に出たままになり、
   「できないボタンを置かない」つもりの所に押せないボタンが残っていた
   （QRの読み取りで、カメラを使えない端末にも「QRを読み込む」が出ていた）。 */
[hidden]{display:none !important}

:root{
  /* ========================================================================
     さかもと村 ブランドトークン（色）
     根拠：docs/projects/sakamoto/webapp-kikakusho-2026-09-15.md（v3.3）
          ＋ 社長指示 2026-09-17（地＝クリーム／キー＝モス／アクセント＝オレンジ／明るく）
     コントラストは全て実測済み。コンポーネントは「役割トークン」を参照し、
     スケールを直接参照しない。暗所で反転するのは役割トークンだけ。
     ======================================================================== */

  /* ---- キーカラー：モスグリーン ＝ 坂本の地面と山 ----------------------------
     根拠：④ウォーキング＝マップの本命（企画書 1-9-2）／L5「担った」＝草刈り（1-7）
     ＝ 行事の色ではなく「常にそこにある土台」の色。 */
  --moss-900:#2C3A1E;   /* 住民証の反転面の始点・全画面QRの終点 */
  --moss-800:#3A4B27;   /* 見出し・村役場バー。白文字 9.48:1 */
  --moss-700:#4A5F33;   /* 本文中のリンク。地の上 6.21:1 */
  --moss-600:#5C7640;   /* 面の主役。白文字 5.10:1 ＝ モスを面で置くときの明るさの上限 */
  --moss-500:#76924F;   /* 線・アイコン・区切り専用。面に使わない（白文字 3.50 ＝ 不合格） */
  --moss-400:#9AB16F;   /* 暗所の線・アイコン */
  --moss-300:#C2D49B;   /* 暗所の見出し（明側 moss-800 の反転相手） */
  --moss-200:#DEEAC3;   /* 淡い面。村マップの器（moss-100 は地と同化して使えない） */
  --moss-100:#EFF5E2;   /* 最淡。白い面の上でだけ使う */

  /* ---- アクセント：みかんのオレンジ ＝「灯る／実る」瞬間 ----------------------
     根拠：「700を超える行燈／10月14日点灯」（0-2）／「柑橘の産地。12月から1月が収穫」
     ＝ 行燈は夜に一点ずつ灯り、みかんは緑の中に一点実る。面ではなく点の色。 */
  --mikan-300:#FFD9A8;  /* 灯りの淡い面。あかりタグの地 */
  --mikan-400:#FFB35F;  /* 暗所のアクセント文字 */
  --mikan-500:#F5851B;  /* 主CTAの塗り。白文字は不可（2.54）＝必ず --on-accent の濃墨を載せる */
  --mikan-600:#D2660B;  /* 押下時の沈み */
  --mikan-700:#A34509;  /* オレンジの文字・線・フォーカス。地 5.41／面 6.00 */
  --mikan-800:#7E360A;  /* mikan-300 の上の文字 6.51:1 */

  /* ---- 地・面・線 ＝ 瓦版の紙 ----------------------------------------------
     根拠：「瓦版 B4・不定期発行」（0-2）／「実在した村の名簿を、もう一度つくり直す」（1-2）
     ＝ スクリーンの白ではなく生成りの紙。
     白い面は「浮かせる」。箱を積むほど濁らず、読む面を最も明るく保てる。
     日本の規範では影を使わないので、浮きは「白い面 ＋ 1px の線」で作る。 */
  --surface:#FFFCF4;    /* 浮いた面。読む面・カード・ナビ・フォームの器 */
  --ground:#F7F0DE;     /* 地。ページの地＝紙（面との明度差 ΔL*4.1） */
  --surface-2:#EDE1C5;  /* 沈んだ面＝「へこみ」。入力欄・表ヘッダ・非活性だけに使う */
  --line:#E0D4B4;       /* 通常の罫 */
  --line-2:#C9BA95;     /* 強い区切り・カードの縁 */

  /* ---- 文字（墨）。勝浦町の高齢化率は48.2%＝全ての地で 4.5:1 を満たす ---------- */
  --ink:#2A2820;        /* 本文。面14.40／地12.98 */
  --ink-2:#55503F;      /* 副文・ラベル。面7.86／地7.09 */
  --ink-3:#6B6456;      /* 補助。面5.72／地5.16 */
  --ink-4:#928A79;      /* 文字に使わない。非活性アイコン・装飾罫のみ */

  /* ---- 役割トークン（コンポーネントはここだけを見る）-------------------------
     暗所で反転するのはこの層だけ。スケールを直接参照すると暗所で見出しが消える。 */
  --key:var(--moss-800);          /* キーの文字（見出し・ブランド） */
  --key-2:var(--moss-700);
  --key-fill:var(--moss-600);     /* キーの面。ナビの現在地・住民証・マップのピン枠 */
  --key-edge:var(--moss-500);     /* キーの線・アイコン */
  --key-wash:var(--moss-200);     /* キーの淡い面。選択状態・マップの器 */
  --on-key:#FFFFFF;
  --accent:var(--mikan-700);      /* アクセントの文字・線。1画面2箇所まで */
  --accent-fill:var(--mikan-500); /* アクセントの塗り。1画面1箇所まで */
  --accent-wash:var(--mikan-300);
  --on-accent:#2A1C09;            /* 塗りの上は濃墨（6.51:1）。白は載らない */
  --link:var(--moss-700);         /* 閲覧の遷移＝モス。オレンジにしない */
  --focus:var(--mikan-700);

  /* ---- 立体（ニューモーフィズム・社長指示 2026-09-25）-------------------------
     「押せるものは立体的に」。地と同じ色のまま、左上から光が当たったように
     明るい影と暗い影を1対で置いて、浮き（押せる）と沈み（押した）を作る。
     ニューモーフィズムの弱点は**コントラストが落ちること**なので、
     この村では影だけに頼らず、輪郭（枠線）と文字の濃さはそのまま残す
     （勝浦町の高齢化率は48.2%。見えなくなるのがいちばん困る）。 */
  --nm-light:#FFFFFF;      /* 明側＝光。地（クリーム）より明るい */
  --nm-dark:#DDD1B2;       /* 暗側＝影。地より一段沈んだ紙の色 */

  /* ---- 状態色 ---------------------------------------------------------- */
  --ok-bg:#E7F1D2;   --ok-line:#BFD494;   --ok-ink:#3C5122;
  --ng-bg:#FBE6DC;   --ng-line:#EEBFA6;   --ng-ink:#8A3410;
  --warn-bg:#FDEFC8; --warn-line:#E8CE84; --warn-ink:#6F4A05;

  /* 消防・防災（社長指示 2026-09-21）。村のモス／みかんと混ざらない赤を1系統だけ持つ。
     色数を増やさないため、消防の画面でもアクセントはこの1色に絞る。 */
  --fire-600:#C0341C; --fire-700:#A32B16; --fire-800:#8A2412; --fire-900:#5E190C;
  /* 消防モードの面と線（社長指示 2026-09-29「画面の構成自体も変える」）。
     淡い面と線を足して、村のモスと同じ役割の組を作る＝役割トークンだけ差し替えれば
     画面ぜんぶが消防の顔になる（部品を1つも書き換えない）。 */
  --fire-500:#D4472C; --fire-200:#F7E1DA;

  /* ── 消防モードの顔（社長指示 2026-09-29）────────────────────────────
   「消防モードにしたら画面の構成自体も変える」。
   **役割トークンの層だけ**を消防の赤に差し替える＝見出し・ボタン・タイル・
   下のメニュー・現在地の印まで、部品を1つも書き換えずに画面ぜんぶが消防の顔になる。
   色数は増やさない（消防の赤1系統・既存の決まりどおり）。
   地（紙）はそのまま——文字の読みやすさは高齢化率48.2%の村でいちばん大事で、
   検証済みのコントラストを崩さない。 */
body.is-fire{
  --key:var(--fire-800); --key-2:var(--fire-700);
  --key-fill:var(--fire-600); --key-edge:var(--fire-500); --key-wash:var(--fire-200);
  --on-key:#FFFFFF;
  --accent:var(--fire-700); --accent-fill:var(--fire-600); --accent-wash:var(--fire-200);
  --on-accent:#FFFFFF;
  --link:var(--fire-700); --focus:var(--fire-700);
}

/* ---- 会員区分の帯 ---------------------------------------------------------
     条件A「実際に坂本に住んでいる人は、無料で最上位」（1-4）
     → 坂本住民だけが面ごと反転する＝明度で一目で最上位と分かる唯一の区分。
     序列は帯の明度が一列に下がることで表す
     （ゲスト78.0 → 無料62.0 → 初心57.1 → 有料52.1 → 大村民46.1 → 住民22.5）。 */
  /* 無料＝ブロンズ（社長指示 2026-09-18）。グリーンは坂本住民の専用色なので使わない。 */
  --bro-a:#5E3617;  --bro-b:#F2DFC6;  --bro-c:#B8834C;   /* 村民（無料）＝ブロンズ */
  --yel-a:#6B4D02;  --yel-b:#FBEBB8;  --yel-c:#A98413;   /* 初心（若葉マークの黄に由来） */
  --silv-a:#4E524A; --silv-b:#E7E9E2; --silv-c:#767F70;  /* 村民（有料）。旧・青みグレーは
                                                            地と同化していたため温かい無彩へ */
  --gold-a:#7A5810; --gold-b:#F7E3A4; --gold-c:#8A6811;  /* 大村民。旧 #DCB84A は有料より淡く、
                                                            序列が逆転していた */
  /* プラチナ。シルバーと見分けるため青みに振る（社長指示 2026-09-18）。 */
  --plat-a:#2A3A4A; --plat-b:#E9EEF4; --plat-c:#8FA4B8;
  --guest-c:#CBC0A7;
  --jumin-1:#2C3A1E; --jumin-2:#3A4B27; --jumin-3:#4A5F33; --jumin-4:#5C7640;

  /* 初心者（若葉）マーク。日本の道路標識の色をそのまま使う＝発明しない。 */
  --wakaba-g:#2E8B5F; --wakaba-y:#F5C518;

  /* 旧名の互換（参照箇所が多いため名前だけ残す・新規では使わない） */
  --ai-900:var(--moss-900); --ai-800:var(--moss-800); --ai-700:var(--moss-700);
  --wakaba:var(--moss-500);

  --font-ui:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Noto Sans JP",sans-serif;
  --font-mark:"Shippori Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;
  --font-data:"DM Mono","SFMono-Regular",ui-monospace,monospace;

  --navh:76px;

  /* 文字の大きさと太さ（社長指示 2026-09-22）。
     勝浦町の高齢化率は48.2%。既定を一段大きく・一段太くし、
     そのうえで本人が3段階／2段階で選べるようにする。
     全ての font-size が calc(◯px * var(--tscale)) で書いてあるので、
     ここを変えるだけで画面ぜんぶが同じ比で動く。 */
  --tscale:1.08;
  --tweight:500;
}

/* 本人の設定（マイページ）。<html> に付く。 */
/* 小さい（社長指示 2026-09-25）。既定を一段大きくしてあるので、
   「ふつうでも大きすぎる」方の逃げ道として、素のブラウザより少しだけ小さい所に置く。 */
:root[data-text="s"] { --tscale:0.96 }
:root[data-text="m"] { --tscale:1.08 }
:root[data-text="l"] { --tscale:1.20 }
:root[data-text="xl"]{ --tscale:1.34 }
:root[data-bold="1"] { --tweight:700 }

/* 地はクリーム。端末がダークモードでも暗くしない（社長指示 2026-09-22
   「アプリの背景をクリーム色にして。明るい色使いがいい」）。

   もともとは OS のダーク設定に自動で従っていたが、村の方の端末がダークだと
   地が #1B2015 の黒緑になり、アプリを開くたび暗い画面が出ていた。
   切り替える手立ても画面に無かったため、暗い方しか見られない人がいた。
   自動追従をやめ、暗い配色は data-theme="dark" を明示したときだけに残す。

   color-scheme:light は入力欄・プルダウン・スクロールバーまで明るいままにするため。
   これが無いと、地はクリームなのに入力欄だけ黒いという混ざり方をする。 */
:root{color-scheme:light}

/* 暗い配色（いまは自動では効かない。夜間モードを作るときの土台として残す）。 */
:root[data-theme="dark"]{
  --surface:#242B1C; --ground:#1B2015; --surface-2:#2E3624;
  --line:#414B33; --line-2:#5A6648;
  --ink:#F2EFE0; --ink-2:#CFC9B2; --ink-3:#A79F87; --ink-4:#7C7562;
  --key:var(--moss-300); --key-2:var(--moss-400); --key-fill:var(--moss-600);
  --key-edge:var(--moss-400); --key-wash:#38472A; --on-key:#FFFFFF;
  --accent:var(--mikan-400); --accent-fill:var(--mikan-500);
  --accent-wash:#4A3212; --on-accent:#2A1C09;
  --link:var(--moss-300); --focus:var(--mikan-400);
  --nm-light:#333D26; --nm-dark:#0F1309;
  --ok-bg:#2C3A1C;   --ok-line:#4E6630;   --ok-ink:#C9DFA0;
  --ng-bg:#3A2117;   --ng-line:#6B3A22;   --ng-ink:#F3B99A;
  --warn-bg:#3A2E10; --warn-line:#6B5520; --warn-ink:#F0CE86;
  --bro-b:#46301B;  --bro-c:#C89A63;
  --yel-b:#453714;  --yel-c:#C9A02A;
  --silv-b:#343830; --silv-c:#93998C;
  --gold-b:#453714; --gold-c:#B08526;
}

body{
  background:var(--ground);color:var(--ink);font-family:var(--font-ui);line-height:1.7;
  font-weight:var(--tweight);
  padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px));
  -webkit-text-size-adjust:100%;
}

/* ----- 画面の器 ----- */
/* 左右の余白は 1 か所（--gutter）で決める。
   画面いっぱいに広げるもの（写真の裁ち落とし等）はこれを打ち消すので、
   別々に書くと幅がズレて 2px はみ出す（＝横スクロールが出る）。 */
.shell{--gutter:16px;max-width:560px;margin:0 auto;padding:14px var(--gutter) 24px}
/* 表を広げて見る画面（権限マトリクス）だけ幅を広げる。スマホでは同じ。 */
.shell.wide{max-width:1120px}

/* 戻る（社長指示 2026-09-25）。ホーム画面から開くと端末の「戻る」が無いため、
   画面の中に置く。押す面積は指で押せる大きさ（高さ 36px 以上）を確保する。 */
/* 2026-09-26（社長指示）から、画面左上に**固定**する。
   スクロールしても左上に残る＝奥の画面で下まで読んでも、戻る道が指の届く所にある。
   position:sticky にしてあるのは、上のモードの帯（村役場・防災・災害）と重ならないため
   ——fixed にすると帯の文字の上に乗ってしまう。
   下の中身がボタンの裏を通るので、地の色で塗り、影で浮かせて読めるようにする。 */
.backbtn{position:sticky;top:calc(6px + env(safe-area-inset-top,0px));z-index:30;
  display:inline-flex;align-items:center;gap:4px;margin:2px 0 10px;
  padding:7px 12px 7px 8px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);color:var(--ink-2);text-decoration:none;
  box-shadow:2px 2px 6px var(--nm-dark), -2px -2px 6px var(--nm-light);
  font-size:calc(13px * var(--tscale));font-weight:700;line-height:1.4}
.backbtn svg{width:calc(17px * var(--tscale));height:calc(17px * var(--tscale));
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.backbtn:active{background:var(--surface-2)}
/* 画面いちばん上の帯（.topbar／言語・マイページのつまみ）は外した（社長指示 2026-09-26）。
   村の名前・言語・マイページ・ログインを全画面の上に置いていたが、
   ①全画面で1行ぶんを占める ②画面左上に置く「戻る」と場所が重なる ため、
   言語・マイページ・ログインはメニュー（/menu）の中へ移した。
   使わなくなった .topbar / .topbar-acts / .langmenu / .mymenu / .mylist の指定は消した
   （残すと、次に触る人が「まだ使っている」と読む）。言語の選び方は下の .langpick。 */

/* 言語の選び方（メニューの中）。4か国語以上あるので、押せる的を並べて2列以上に流す。 */
.langpick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.langpick button{
  font-family:inherit;font-size:calc(14px * var(--tscale));font-weight:700;cursor:pointer;
  padding:10px 14px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);color:var(--ink-2);
  box-shadow:2px 2px 5px var(--nm-dark), -2px -2px 5px var(--nm-light)}
.langpick button[aria-current="true"]{color:#fff;background:var(--key-fill);border-color:var(--key-fill)}
.langpick button:active{box-shadow:inset 2px 2px 5px var(--nm-dark), inset -2px -2px 5px var(--nm-light)}
.langpick button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* お知らせをブログの形で出す（社長指示 2026-09-22）。
   本文は改行をそのまま出し、写真はその下に大きく並べる。 */
.post{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:16px}
.post-t{font-size:calc(20px * var(--tscale));line-height:1.5;margin:6px 0 12px;color:var(--key)}
.post-body{font-size:calc(15px * var(--tscale));line-height:2;color:var(--ink)}
.post-fig{margin:16px 0 0}
.post-fig img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.post-fig figcaption{font-size:calc(12.5px * var(--tscale));color:var(--ink-3);margin-top:6px}

/* 一覧の1行。写真があれば左に小さく添える。 */
.news-row{display:flex;gap:10px;align-items:flex-start}
.news-thumb{width:84px;height:84px;flex:none;object-fit:cover;border-radius:8px;border:1px solid var(--line)}

/* 村役場の編集画面で、付いている写真を並べる。 */
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.thumbs li{position:relative;width:88px}
.thumbs img{width:88px;height:88px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.thumbs form{position:absolute;top:-6px;right:-6px}
.thumbs button{width:24px;height:24px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);cursor:pointer;line-height:1;
  font-size:calc(14px * var(--tscale))}

/* 数字を並べる枠（村役場のアクセス・社長指示 2026-09-22）。
   狭い画面では2列、広い画面では4列。数字を主役にして、ラベルは小さく添える。 */
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
@media (min-width:600px){ .statgrid{grid-template-columns:repeat(4,1fr)} }
.statgrid li{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  padding:12px 14px;text-align:center}
.statgrid b{display:block;font-family:var(--font-data);font-size:calc(24px * var(--tscale));
  font-weight:500;color:var(--key);font-variant-numeric:tabular-nums;line-height:1.2}
.statgrid span{font-size:calc(12px * var(--tscale));color:var(--ink-3)}

/* 日ごとの棒。高さだけで読ませ、数字は触れたときに出す。 */
.bars{display:flex;align-items:flex-end;gap:2px;height:72px;margin-bottom:6px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:8px;
  contain:paint}
.bar{flex:1;min-width:2px;height:100%;display:flex;align-items:flex-end}
.bar i{display:block;width:100%;background:var(--key-fill);border-radius:2px 2px 0 0}

/* 横の棒で割合を読ませる（お店の分析／社長指示 2026-10-03）。
   数字だけの表より、どこが多いかが一目で分かる。幅は狭い端末に合わせて
   「名前・棒・数」の3列で、棒だけが伸び縮みする（文字は折り返さない）。 */
.barlist{margin:0 0 4px}
.barlist li{display:flex;align-items:center;gap:8px;padding:5px 2px;
  font-size:calc(13px * var(--tscale))}
.bl-t{flex:0 0 7.4em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-bar{flex:1 1 auto;min-width:0;height:10px;background:var(--surface-2);
  border-radius:5px;overflow:hidden}
.bl-bar i{display:block;height:100%;background:var(--key-fill);border-radius:5px}
.bl-n{flex:0 0 auto;font-family:var(--font-data);font-variant-numeric:tabular-nums;
  color:var(--ink-3);white-space:nowrap}

/* 住所の章の中で「役割が違うもの」を1段下げて置く（社長指摘 2026-09-22）。
   小字は書く欄ではなく選ぶもの。並べただけだと住所の続きに見える。 */
.subfield{border-left:3px solid var(--key-edge);padding-left:12px;margin:14px 0 4px}

/* 姓と名を横に並べる（社長指示 2026-09-22）。狭い画面では1列に落とす。 */
.field2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){ .field2{grid-template-columns:1fr;gap:0} }
.req{font-size:calc(11px * var(--tscale));color:var(--accent);font-weight:700;margin-left:6px}

/* 写真。いまの写真と差し替え欄を横に並べる。 */
.photo-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.photo-now{width:84px;height:84px;flex:none;border-radius:10px;object-fit:cover;
  border:1px solid var(--line-2);background:var(--surface-2)}
.photo-now.is-empty{display:flex;align-items:center;justify-content:center;
  font-size:calc(12px * var(--tscale));color:var(--ink-3)}

/* 大項目ごとのトグル（社長指示 2026-09-22）。
   メディカルIDは項目が多く、全部を広げて置くと入れる人が気圧される。
   閉じているときも「入っているか」が右肩で分かるようにする。 */
.fold{border:1px solid var(--line-2);border-radius:10px;background:var(--surface);margin-bottom:10px}
.fold>summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;cursor:pointer;list-style:none;font-size:calc(15px * var(--tscale))}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"＋";color:var(--ink-3);font-size:calc(15px * var(--tscale));flex:none}
.fold[open]>summary::after{content:"−"}
.fold>summary span{font-size:calc(12px * var(--tscale));color:var(--ink-3);margin-left:auto;padding-right:4px}
.fold>summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:10px}
.fold-in{padding:0 14px 14px;border-top:1px solid var(--line)}
.fold-in .hint{font-size:calc(13px * var(--tscale));color:var(--ink-2);line-height:1.7;margin:10px 0}
/* 住民の申請の2つのボタン（社長指示 2026-10-11）。狭いと縦に積む。 */
.mybtns-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.mybtns-row .btn{flex:1 1 auto;min-width:0;text-align:center}
/* いま選んでいる側を塗って示す（どちらで出すのかを取り違えないように）。 */
.btn.ghost.on{background:var(--key-fill);color:var(--key)}

/* 資料の本文（坂本のこと）。1段落が長いので、行間を広げて読む面を作る。 */
.longread{font-size:calc(14.5px * var(--tscale));line-height:2;color:var(--ink);margin:10px 0}

/* 選ぶだけの一覧（アレルギー・手助け）。指で押せる大きさを保つ。 */
.chk-h{font-size:calc(13px * var(--tscale));color:var(--key);margin:12px 0 6px;font-weight:700}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px}
/* だれが読めるか（社長指示 2026-09-26「その下から2列で」）。
   会員区分は必ず2列。幅で列数が変わると、同じ画面でも端末ごとに並びが変わって覚えられない。 */
.chk-2col{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-top:2px}
.aud-guest{border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:5px}
.chk{display:flex;align-items:center;gap:8px;padding:9px 8px;border-radius:7px;
  font-size:calc(14px * var(--tscale));cursor:pointer}
.chk:hover{background:var(--surface-2)}
/* 入力欄の幅（.field input{width:100%}）はこのファイルの後ろにあり、詳細度が同じだと
   後ろが勝つ。.chk を .field の中に置いたとき、チェックボックスが行いっぱいに広がって
   文字が1文字ずつ縦に割れた（村民登録の同意欄で発覚・2026-09-22）。
   置き場所に関わらず部品として成り立つよう、ここだけ詳細度を1つ上げる。 */
/* ラジオも同じ（社長指示 2026-11-15 のプラン選択で、同じことが起きた）。
   type=checkbox だけに書いてあったため、.field の中に置いたラジオが行いっぱいに
   広がり、プラン名が「ベーシ／ック」と縦に割れた。 */
.chk input[type=checkbox],
.chk input[type=radio]{width:18px;height:18px;flex:none;accent-color:var(--key-fill)}
.chk span{min-width:0}
/* 選ぶために要る中身（プランの値段・説明）は、1行目の下に小さく続ける。 */
.chk span .hint{display:block;margin-top:2px}

/* ----- 村民証（ID-1判 1.586:1・寸法はカード幅 cqw 基準）----- */
.cardwrap{width:100%;max-width:400px;container-type:inline-size;margin-inline:auto}
.card{
  /* 村民証は現物のカードに相当するため、暗所でも見た目を変えない＝役割トークンを参照しない。
     これは書き忘れではなく意図（物理カードの同一性）。 */
  --c-ink:#2A2820; --c-ink-3:#6B6456; --c-line:#E0D4B4; --c-bg:#FFFCF4; --c-bg2:#EDE1C5;
  /* ID-1判の比は**最低の高さ**として持つ（2026-09-25 に気づいた）。
     バッジが3つ付く方（自主防災＋役場職員＋坂本住民 等）で、いちばん下の
     「村民になって◯日」が切れていた。比で固定すると、中身が増えたぶんが
     はみ出して消える——規約④「下端が切れない」に反する。 */
  position:relative;overflow:hidden;border-radius:4cqw;min-height:calc(100cqw / 1.586);
  display:flex;flex-direction:column;padding:3cqw 3.4cqw 4cqw;
  background:var(--c-bg);border:.62cqw solid var(--lc-c);
  box-shadow:0 6px 16px rgba(44,58,30,.18);color:var(--c-ink);line-height:1.3;
  text-decoration:none;
}
.card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2cqw;z-index:2;
  background:linear-gradient(90deg,var(--lc-a),var(--lc-b) 42%,var(--lc-c) 70%,var(--lc-a))}
/* 大村民（ゴールド）だけ帯を2本にする。色だけではブロンズと見分けにくい場面が
   あるため、本数という色に頼らない差をつける（社長指示 2026-09-18）。 */
.card.dai::before{
  height:3.6cqw;
  background:
    linear-gradient(90deg,var(--lc-a),var(--lc-b) 42%,var(--lc-c) 70%,var(--lc-a)) left top/100% 1.35cqw no-repeat,
    linear-gradient(90deg,var(--lc-a),var(--lc-b) 42%,var(--lc-c) 70%,var(--lc-a)) left bottom/100% 1.35cqw no-repeat;
}
.card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(198deg,var(--lc-b) 0%,transparent 46%);opacity:.62}
.card>*{position:relative;z-index:1}

.card.muryo  {--lc-a:var(--bro-a); --lc-b:var(--bro-b); --lc-c:var(--bro-c); --lc-chip:var(--bro-b); --lc-ink:var(--bro-a)}
.card.yuryo  {--lc-a:var(--silv-a);--lc-b:var(--silv-b);--lc-c:var(--silv-c);--lc-chip:var(--silv-b);--lc-ink:var(--silv-a)}
.card.dai    {--lc-a:var(--gold-a);--lc-b:var(--gold-b);--lc-c:var(--gold-c);--lc-chip:var(--gold-b);--lc-ink:var(--gold-a)}
/* プラチナ：カード全体をプラチナに。シルバーと区別するため青みのグラデーション
   （社長指示 2026-09-18）。用途は未定で、区分だけ先に用意している。 */
.card.platina{
  --lc-a:var(--plat-a);--lc-b:var(--plat-b);--lc-c:var(--plat-c);--lc-chip:rgba(255,255,255,.62);
  --lc-ink:#1E2B38;
  --c-ink:#1E2B38;--c-ink-3:#54657A;--c-line:#B9C6D4;--c-bg2:rgba(255,255,255,.5);
  border-color:var(--plat-c);
  background:linear-gradient(140deg,#E9EEF4 0%,#CBD8E6 26%,#F4F7FA 46%,#BFCEDF 66%,#DCE5EE 100%);
}
.card.platina::after{display:none}
/* お店。村民でも職員でもない区分なので、地の紙色に濃い縁で「別のもの」に見せる。 */
.card.shop{--lc-a:#4A3A22;--lc-b:#E8DCC2;--lc-c:#8A6B3C;--lc-chip:#E8DCC2;--lc-ink:#4A3A22;
  border-color:#8A6B3C}
.card.jumin{
  --lc-a:var(--jumin-1);--lc-b:var(--moss-200);--lc-c:var(--jumin-4);--lc-chip:rgba(247,250,238,.22);--lc-ink:#F7FAEE;
  --c-ink:#F7FAEE;--c-ink-3:rgba(247,250,238,.74);--c-line:rgba(247,250,238,.3);
  --c-bg2:rgba(255,255,255,.16);border-color:var(--jumin-2);
  background:linear-gradient(140deg,var(--jumin-1) 0%,var(--jumin-2) 38%,var(--jumin-4) 58%,var(--jumin-3) 78%,var(--jumin-1) 100%);
}
.card.jumin::after{display:none}
/* 村役場職員：面はグリーン、帯はゴールド（社長指示 2026-09-18）。
   坂本住民と同じ緑の面に金の帯が入ることで、職員だけが見分けられる。 */
.card.yakuba{
  --lc-a:var(--gold-a);--lc-b:var(--gold-b);--lc-c:var(--gold-c);
  --lc-chip:rgba(247,250,238,.22);--lc-ink:#F7FAEE;
  --c-ink:#F7FAEE;--c-ink-3:rgba(247,250,238,.74);--c-line:rgba(247,250,238,.3);
  --c-bg2:rgba(255,255,255,.16);border-color:var(--gold-c);
  background:linear-gradient(140deg,var(--jumin-1) 0%,var(--jumin-2) 38%,var(--jumin-4) 58%,var(--jumin-3) 78%,var(--jumin-1) 100%);
}
.card.yakuba::after{display:none}
.card.guest{
  --lc-a:var(--jumin-1);--lc-b:var(--moss-200);--lc-c:var(--jumin-4);--lc-chip:rgba(247,250,238,.22);--lc-ink:#F7FAEE;
  --c-ink:#F7FAEE;--c-ink-3:rgba(247,250,238,.74);--c-line:rgba(247,250,238,.3);
  --c-bg2:rgba(255,255,255,.16);border-color:var(--jumin-2);
  background:linear-gradient(140deg,var(--jumin-2) 0%,var(--jumin-4) 46%,var(--jumin-3) 100%)}
.card.guest::after{display:none}

.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2.2cqw;flex:none}
.mark{font-family:var(--font-mark);font-size:4.1cqw;font-weight:700;letter-spacing:.06em;line-height:1.15;color:var(--lc-ink)}
.mark-en{font-family:var(--font-data);font-size:1.95cqw;line-height:1.2;letter-spacing:.2em;color:var(--c-ink-3);margin-top:.5cqw}
.top-r{display:flex;align-items:center;gap:1.7cqw}
.badges{display:flex;gap:1.1cqw;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.badge{font-size:2.75cqw;font-weight:700;padding:.7cqw 2.4cqw;border-radius:999px;white-space:nowrap;
  letter-spacing:.04em;line-height:1.5;border:0;background:var(--lc-chip);color:var(--lc-ink)}
.badge.yakuba{background:var(--ai-800);color:#fff;display:inline-flex;align-items:center;gap:.8cqw}
.badge.yakuba svg{width:2.6cqw;height:2.6cqw;fill:currentColor}
.wakaba{width:3.4cqw;height:3.9cqw;flex:none}
.mypage-btn{flex:none;width:6.8cqw;height:6.8cqw;border-radius:2cqw;border:.4cqw solid var(--lc-c);
  background:transparent;color:var(--c-ink);display:grid;place-items:center;cursor:pointer;padding:0;text-decoration:none}
.mypage-btn svg{width:3.7cqw;height:3.7cqw;stroke:currentColor;fill:none;stroke-width:1.8}

.card-main{display:flex;gap:2.5cqw;margin-top:2.4cqw;flex:0 0 auto;align-items:flex-start}
.photo{flex:none;width:24cqw;height:30cqw;border-radius:1.4cqw;background:var(--c-bg2);
  border:.45cqw solid var(--lc-c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;
  overflow:hidden}
.photo svg{width:46%;height:auto;color:var(--c-ink-3)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo span{font-size:2.2cqw;color:var(--c-ink-3);letter-spacing:.06em}
.who{min-width:0;flex:1;line-height:1.3;padding-top:1.4cqw}
.kana{font-size:2.5cqw;color:var(--c-ink-3);letter-spacing:.1em;line-height:1.25}
.name{font-size:5.8cqw;font-weight:700;margin-top:.6cqw;letter-spacing:.03em;line-height:1.2}

.qrbox{flex:none;display:flex;flex-direction:column;align-items:center;gap:.9cqw}
.qr-l{font-size:2.1cqw;letter-spacing:.14em;color:var(--c-ink-3);line-height:1}
.qr{width:25cqw;height:25cqw;border-radius:1.4cqw;background:#fff;
  border:.45cqw solid var(--lc-c);padding:1.3cqw;box-shadow:0 1px 3px rgba(58,69,42,.18)}
.qr svg,.qr img{width:100%;height:100%;display:block}

.rows{margin:auto 0 0;padding-top:1.6cqw;display:flex;flex-wrap:wrap;gap:1cqw 5cqw;align-items:baseline;flex:none}
.row{display:flex;gap:1.6cqw;align-items:baseline;min-width:0}
.row dt{flex:none;font-size:2.4cqw;color:var(--c-ink-3);letter-spacing:.06em}
.row dd{font-family:var(--font-data);font-size:3.1cqw;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.row dd.no{font-size:4.4cqw;letter-spacing:.09em;font-weight:500;color:var(--lc-ink)}
.hidden-val{display:inline-block;width:14cqw;height:2.6cqw;border-radius:.6cqw;background:currentColor;opacity:.16;vertical-align:middle}

.card-foot{display:flex;justify-content:space-between;align-items:baseline;gap:2.2cqw;
  margin-top:1.6cqw;padding-top:1.6cqw;border-top:.34cqw solid var(--lc-c);flex:none}
.days{display:flex;align-items:center;gap:1.3cqw;min-width:0}
.days-l{font-size:2.5cqw;color:var(--c-ink-3);letter-spacing:.06em}
.days-n{font-family:var(--font-data);font-size:4cqw;font-variant-numeric:tabular-nums;font-weight:500;color:var(--c-ink)}
.foot-hint{font-size:2.3cqw;color:var(--c-ink-3);letter-spacing:.04em;white-space:nowrap}
/* 発行元（社長指示 2026-09-26）。左上を「村民証」にしたので、
   村の名前とロゴマークはカードの下・右端へ移した。
   文字はカードの幅に連れて伸び縮みする単位（cqw）で書く
   ——文字の大きさの設定を変えても村民証だけは変えない、という決まりのため。 */
.issuer{display:inline-flex;align-items:center;gap:1.3cqw;flex:none;color:var(--c-ink)}
.issuer-m{width:4.6cqw;height:4.6cqw;flex:none;color:var(--lc-ink)}
.issuer-n{font-family:var(--font-mark);font-size:2.8cqw;font-weight:700;letter-spacing:.06em;
  line-height:1.2;white-space:nowrap;color:var(--lc-ink)}
/* ゲストのカードは下の欄が発行元だけなので、右端に寄せる。 */
.card.guest .card-foot{justify-content:flex-end}

.guest-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.6cqw;flex:1;text-align:center}
.guest-cta .qr{width:30cqw;height:30cqw;padding:1.6cqw}
/* 村民登録とログインは QR の下に横並び（社長指示 2026-09-26）。
   カードの丈は決まっているので、縦に積まず1行に収める。 */
.guest-acts{display:flex;align-items:center;justify-content:center;gap:2.6cqw;flex-wrap:wrap;margin:0}
.guest-btn{background:var(--accent-fill);color:var(--on-accent);border:0;border-radius:999px;padding:2.4cqw 5cqw;
  font-family:inherit;font-size:3.6cqw;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;
  white-space:nowrap}
/* ログインは「もう村民の方」の道なので、登録より一段おとなしく見せる。 */
.guest-btn.sub{background:transparent;color:var(--lc-ink);border:.34cqw solid var(--lc-c)}
.guest-note{font-size:2.6cqw;color:var(--c-ink-3)}

/* 会員証（村民証）の文字は、文字の大きさの設定では変えない（社長指示 2026-09-25）。
   身分証なので、見せる相手にいつも同じ体裁で見えている必要がある。
   カードの中の文字はカードの幅（cqw）で決まるので元から連動しないが、
   **全画面表示と全画面QRだけ** var(--tscale) を使っていた。ここで既定値に固定する
   （px の直書きにはしない＝「全ての font-size は var(--tscale) 経由」の規約を守る）。 */
.cardwrap,.fullcard,.fullqr{--tscale:1.08}

/* 見出しの下に小さく英語を添える（日本の見出しの型）。
   見出しと1組で読ませるので、見出しの直下に詰めて置く。 */
.sec-en{margin:-8px 0 12px;font-family:var(--font-mark);font-size:calc(11.5px * var(--tscale));
  letter-spacing:.14em;color:var(--ink-3)}

/* ----- ログインしていない方の入口（社長指示 2026-09-28）-----
   村民登録が上、プロジェクトの説明が下。指示どおり縦に積む（横に並べない）。
   カードと同じ幅で中央に置く＝画面が広いときにボタンだけが横へ伸びない。
   ボタンの立体（浮き・沈み）は .btn の規定をそのまま使う。 */
.joincta{display:flex;flex-direction:column;gap:10px;max-width:400px;margin:14px auto 4px}
.joincta .btn{width:100%}
/* ログアウトだけは小さく、右に寄せる（社長指示 2026-09-29）。
   幅いっぱいのボタンにすると、登録・ログインと同じ重さに見えてしまう。 */
.logout-row{display:flex;justify-content:flex-end}
.logout-row .btn{width:auto}

/* ----- クーポンの案内（会員証の下・社長指示 2026-09-18）-----
   使えるクーポンがあるときだけ出る。0件のときは出さない。 */
.coupon-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding:14px 16px;border-radius:12px;text-decoration:none;
  background:var(--accent-wash);border:2px solid var(--mikan-500);color:var(--mikan-800);
  font-size:calc(15px * var(--tscale));font-weight:700}
.coupon-banner b{font-family:var(--font-data);white-space:nowrap}
.coupon-banner:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* クーポンのQR（お店に見せる面） */
.couponqr{display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:20px}
.couponqr .qr{width:min(70vw,300px);aspect-ratio:1;background:#fff;border-radius:12px;padding:10px;
  border:1px solid var(--line-2)}
.couponqr .qr svg{width:100%;height:100%;display:block}

/* クーポンの券面（社長指示 2026-09-25）。割引の大きさは、いちばん先に目に入る所に置く。
   画像は無くてもよいので、無いときに隙間が残らないようにしている。 */
.coupon-b{display:inline-block;background:var(--accent);color:#fff;border-radius:6px;
  padding:2px 8px;font-size:calc(14px * var(--tscale));font-weight:700}
.coupon-img{width:100%;height:auto;max-height:180px;object-fit:cover;border-radius:10px;
  display:block;margin-bottom:8px;background:var(--surface-2)}
/* お店のページとチェックイン後の「このお店で使えるクーポンがあります」 */
.coupon-here{background:var(--accent-wash);border:1px solid var(--accent);border-radius:10px;
  padding:12px 14px;margin:14px 0}
.coupon-here p{margin:0;font-size:calc(13px * var(--tscale));line-height:1.7;color:var(--ink)}
.coupon-here ul{margin:8px 0 0;padding-left:1.1em}
.coupon-here li{font-size:calc(13px * var(--tscale));line-height:1.8}

/* ----- 一覧・見出し ----- */
.sec-row{display:flex;align-items:center;justify-content:space-between;margin:44px 0 14px;gap:10px}
/* 見出しは明朝をやめてゴシックに。明朝の細い横画は高齢者に最も読みにくい。 */
.sec-t{font-family:var(--font-ui);font-size:calc(18px * var(--tscale));font-weight:700;letter-spacing:.04em;color:var(--key)}
.sec-t::before{display:none}
.sec-more{font-size:calc(14px * var(--tscale));color:var(--link);font-weight:700;text-decoration:none;white-space:nowrap}
.pnote{margin-bottom:12px;font-size:calc(14px * var(--tscale));color:var(--ink-2);line-height:1.8}
.pnote b{color:var(--ink-2)}

.news{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.news li{background:var(--surface);padding:14px 15px}

.news .meta{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.news time{font-family:var(--font-data);font-size:calc(13px * var(--tscale));color:var(--ink-2);font-variant-numeric:tabular-nums}
.tag{font-size:calc(12px * var(--tscale));font-weight:700;padding:3px 10px;border-radius:4px;letter-spacing:.04em}
/* お知らせの区分（社長指示 2026-09-22）。中身の種類で色を分ける。
   色は1画面に並ぶので、地の上で読める淡い面＋濃い文字に揃える。 */
.tag.notice{background:var(--key-wash);color:var(--moss-800)}
.tag.event{background:var(--accent-wash);color:var(--mikan-800)}
.tag.kawara{background:var(--surface-2);color:var(--ink)}
.tag.system{background:var(--warn-bg);color:var(--warn-ink)}
.tag.other{background:var(--surface-2);color:var(--ink-2)}
/* fureai は「お知らせの発信元」だった名残だが、いまは緑のタグの見た目として
   配信・申込・出動可否など9か所で使われている。名前は合わないが、消すとそちらが
   崩れるので残す（呼び名を揃えるのは、その画面を触る用があるときに一緒に）。 */
.tag.fureai{background:var(--key-wash);color:var(--moss-800)}

/* 限定ライブ配信（社長指示 2026-09-19）。
   16:9 を保ったまま、どの幅でも崩れない。 */
.live-wrap{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--ink)}
/* 映す枠は**必ず .live-wrap の中**に限る（2026-09-29 に見つけた事故）。
   ただの .live にしていたため、`<span class="tag live">配信</span>` の小さな印まで
   16:9・幅いっぱいの黒い箱になり、カレンダーの一覧で赤い大きな塊が出ていた。 */
.live-wrap .live{position:relative;aspect-ratio:16/9;width:100%;background:#000}
.live-wrap .live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 誰が見ているかの帯。プレーヤーの**上下**に置く（中には重ねない）。
   YouTube の規約が、プレーヤーの上に何かを重ねること・プレーヤー内のリンクを
   覆うことを禁じているため。録画されても、誰の画面かが一緒に写る。 */
.live-mark{margin:0;padding:7px 12px;background:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--font-data);font-size:calc(11px * var(--tscale));letter-spacing:.1em;
  color:rgba(255,255,255,.46)}
.live-mark span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 全画面ボタン。操作バーを出していないぶん、枠の外に置く
   （プレーヤーの上には重ねない＝YouTube の規約）。 */
.live-fs{flex:none;border:1px solid rgba(255,255,255,.34);background:transparent;
  color:rgba(255,255,255,.78);border-radius:999px;padding:5px 14px;
  font-family:var(--font-ui);font-size:calc(12px * var(--tscale));letter-spacing:.06em;cursor:pointer}
.live-fs:hover{background:rgba(255,255,255,.1)}
.live-fs:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* 配信のコメント欄（社長指示 2026-09-20）。
   高さを決めて中だけ流す——ページ全体が伸び続けると、
   下の注意書きや操作に手が届かなくなるため。 */
.chat{list-style:none;margin:0;padding:10px 12px;height:min(46vh,380px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:12px}
.chat li{display:flex;align-items:baseline;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:calc(15px * var(--tscale));line-height:1.7}
.chat li:last-child{border-bottom:0}
.chat li b{flex:none;font-size:calc(13px * var(--tscale));color:var(--key);font-weight:700}
.chat li span{flex:1;min-width:0;color:var(--ink);word-break:break-word}
.chat li time{flex:none;font-family:var(--font-data);font-size:calc(11px * var(--tscale));color:var(--ink-4)}
.chat .chat-empty{display:block;color:var(--ink-3);font-size:calc(14px * var(--tscale));border-bottom:0}
/* 村役場が伏せたもの。本人と職員にだけ見える。 */
.chat li.hidden-c{opacity:.45}
.chat li.hidden-c span{text-decoration:line-through}
.chat-hide{flex:none;border:1px solid var(--line-2);background:transparent;color:var(--ink-3);
  border-radius:999px;padding:2px 10px;font-size:calc(11px * var(--tscale));cursor:pointer}
.chat-hide:hover{background:var(--surface-2)}

.chat-form{display:flex;gap:8px;margin-top:10px}
.chat-form input{flex:1;min-width:0;padding:11px 14px;font-size:calc(16px * var(--tscale));
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink)}
.chat-form input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.chat-form button{flex:none}
.chat-note{margin-top:8px;font-size:calc(12px * var(--tscale));line-height:1.8;color:var(--ink-3)}

/* 窓口で再発行した仮パスワード（社長指示 2026-09-19）。
   1回しか出ないものなので、見落とさない強さで置く。
   読み上げて伝える前提なので、文字は大きく・字間を空ける。 */
.temppw{margin:0 0 14px;padding:14px 16px;border-radius:12px;
  background:var(--accent-wash);border:2px solid var(--accent)}
.temppw h3{font-family:var(--font-ui);font-size:calc(14px * var(--tscale));font-weight:700;color:var(--mikan-800);margin-bottom:8px}
.temppw .pw{font-family:var(--font-data);font-size:calc(28px * var(--tscale));font-weight:700;letter-spacing:.16em;
  color:var(--ink);word-break:break-all;line-height:1.3}
.temppw .note{margin-top:8px;font-size:calc(12px * var(--tscale));line-height:1.8;color:var(--ink-2)}

/* 金額（有料の行事・社長決定 2026-09-18）。
   値段は隠さない。ただし大きく張り上げもしない——押し売りにしないため。 */
.price{margin-top:4px;font-family:var(--font-ui);font-size:calc(15px * var(--tscale));font-weight:700;color:var(--key)}
.price span{font-size:calc(12px * var(--tscale));font-weight:400;color:var(--ink-3)}
.news p{font-size:calc(16px * var(--tscale));line-height:1.7}

.ev{display:grid;gap:8px}
.ev li{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  padding:0;overflow:hidden}
/* 行ごと押せる（社長指示 2026-09-28「一覧は日付とタイトルのみ。押すと詳細」）。 */
.ev-row{display:flex;gap:12px;align-items:center;padding:12px 13px;
  text-decoration:none;color:var(--ink)}
.ev-row:active{background:var(--surface-2)}
.ev-b{flex:1;min-width:0}
.ev-b b{display:block;font-size:calc(15.5px * var(--tscale));font-weight:700;line-height:1.5;
  overflow-wrap:anywhere}
.ev-m2{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-top:4px}
.ev-t{font-family:var(--font-data);font-size:calc(12px * var(--tscale));color:var(--ink-3)}
.ev-go{flex:none;color:var(--ink-4);font-size:calc(20px * var(--tscale));line-height:1}
.ev .d{flex:none;text-align:center;font-family:var(--font-data);line-height:1.1;min-width:46px;
  background:var(--key-fill);color:var(--on-key);border-radius:8px;padding:8px 5px}
.ev .d b{display:block;font-size:calc(24px * var(--tscale));font-weight:500;font-variant-numeric:tabular-nums}
.ev .d span{font-size:calc(11px * var(--tscale));color:rgba(255,255,255,.8)}
.ev h4{font-size:calc(16px * var(--tscale));font-weight:700;margin-bottom:3px}
.ev p{font-size:calc(14px * var(--tscale));color:var(--ink-2);line-height:1.7}

.cardlist{display:grid;gap:9px}
.cardlist li{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:14px 14px}
.cardlist h4{font-size:calc(16px * var(--tscale));font-weight:700;margin-bottom:3px}
.cardlist p{font-size:calc(14px * var(--tscale));color:var(--ink-2);line-height:1.7}

/* 「坂本のこと」の逸話のイラスト（社長指示 2026-09-25）。
   本文の上に1枚置く。横幅いっぱい・角を丸めて、写真ではなく挿絵に見える大きさにする。 */
.about-img{width:100%;height:auto;border-radius:10px;display:block;margin:2px 0 12px;
  background:var(--surface-2)}

/* ----- 村マップ（Leaflet ＋ OpenStreetMap。S-CONNECT と同じ無料の地図）-----
   タイル画像は openstreetmap.org から取る。端末の位置情報は一切使わない
   （geolocation を呼ばない＝村民の居場所は誰にも渡らない）。 */
.mapview{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:3/2;margin-bottom:12px;background:var(--key-wash);z-index:0}
.mapview.tall{aspect-ratio:1/1}

/* 大きな地図（社長指示 2026-10-03「ほぼ全画面で地図表示して」）。
   iOS の Safari は動画以外で全画面（requestFullscreen）を出せないので、
   API に頼らず**画面いっぱいに置き直す**。どの端末でも同じに動く。
   下のメニューごと覆う代わりに、閉じる口（✕）を右上に必ず出す。 */
.mapview.is-big{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;
  margin:0;border:0;border-radius:0;aspect-ratio:auto;z-index:1200}
.mapview.is-big > div{height:100%}
body.mapbig-on{overflow:hidden}
/* 「大きな地図を表示」は右寄せのテキストリンク（社長指示 2026-10-13）。
   地図のすぐ下は、絞り込みと登録に使いたい場所なので、箱で占領しない。 */
.mapbig-open{display:block;margin:-2px 0 10px auto;padding:4px 2px;background:none;border:0;
  font-size:calc(13px * var(--tscale));font-weight:700;color:var(--link);cursor:pointer}

/* 現在地は地図の右下（社長指示 2026-10-13・Google マップと同じ場所）。
   Leaflet の帰属表示の帯（下端）に重ならない高さに置く。
   z-index は Leaflet の操作部品と同じ段（800）＝タイルや札より上、吹き出しより下。 */
.map-locate{position:absolute;right:10px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:800;
  width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.28)}
.map-locate svg{width:23px;height:23px}
.map-locate.is-on{color:var(--link);border-color:var(--link)}
/* 押すまでは何も出さない＝地図の下を重くしない。 */
.maplocate-note{margin:0 2px 10px;font-size:calc(12px * var(--tscale));color:var(--ink-3)}
.maplocate-note:empty{display:none}

/* 登録の入口を見出しの横に出したときは、下の欄の見出しを畳む（入口を2つ並べない）。 */
.mapadd-open{background:none;border:0;cursor:pointer;font-family:inherit}
.mapmore.is-headed > summary{display:none}
/* 閉じるボタンは地図の中（.mapview の子）。小さいときは出さない。
   位置は端末の切り欠き（ノッチ）を避ける。 */
.mapbig-close{position:absolute;z-index:1201;
  top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}

/* 吹き出しの「この地点を直す ›」（社長指示 2026-10-03）。
   出るのは直せる人だけ（出し分けはサーバー側＝FireMap::editUrl）。 */
.pop-edit{display:inline-block;margin-top:6px;font-weight:600}
.leaflet-container{width:100%;height:100%;font-family:var(--font-ui);background:var(--key-wash)}
.leaflet-container a{color:var(--key)}
.map-pin{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--surface);border:2px solid var(--key-fill);font-size:calc(15px * var(--tscale));line-height:1;
  box-shadow:0 2px 5px rgba(58,69,42,.3)}
.map-pin.is-hidden{border-color:var(--ink-4);border-style:dashed;opacity:.75}
/* いま置いている最中のピン（登録・修正の画面）。触れる的なので少し大きく見せる。 */
.map-pin.is-picked{border-color:var(--accent-fill);box-shadow:0 3px 8px rgba(58,69,42,.38)}
/* 消防・防災の地点は、村の地点と一目で見分けられるように縁の色を変える。
   形まで変えないのは、同じ地図の上で並ぶ以上「同じ種類のもの」に見えていてほしいため。 */
.map-pin-fire{border-color:var(--accent-fill)}
/* 防火水槽（社長の紙の地図では赤い点・2026-10-03）。紙と同じ色で探せるようにする。 */
.map-pin-tank{border-color:#dc2626;border-width:3px}

/* 地図に重ねる層の出し入れ（社長指示 2026-09-21）。
   2026-09-26（社長指示）から、スイッチは**地図の外**に置く
   ——地図の中に畳んで置くと、開いた panel が地図そのものを覆い、
   「どれを消したか」を見ながら押せなかった。 */
.maplayers{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  border:0;padding:0;margin:0 0 12px}
.maplayers legend{float:left;width:100%;font-size:calc(12px * var(--tscale));font-weight:700;color:var(--key);margin-bottom:6px}
.maplayers label{display:flex;align-items:center;gap:6px;font-size:calc(13px * var(--tscale));color:var(--ink-2);cursor:pointer}
.maplayers input{width:18px;height:18px;accent-color:var(--accent-fill);flex:none}

/* アイコンの付いた押し札（チップ）。地図の外のスイッチはこの形にする。
   押している＝出している。押していない＝消している、が一目で分かるよう、
   立体（浮いている）と凹み（沈んでいる）で見せる（ニューモーフィズム）。 */
.maplayers.chips{gap:6px}
.maplayers-t{flex:0 0 100%;font-size:calc(12px * var(--tscale));font-weight:700;color:var(--key);margin-bottom:2px}
.mapchip{cursor:pointer}
.mapchip input{position:absolute;opacity:0;width:1px;height:1px}
.mapchip span{display:inline-flex;align-items:center;gap:5px;
  padding:7px 11px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);color:var(--ink-3);
  font-size:calc(12.5px * var(--tscale));font-weight:700;line-height:1.4;white-space:nowrap;
  box-shadow:2px 2px 5px var(--nm-dark), -2px -2px 5px var(--nm-light)}
/* 出している＝押し込まれている（沈む）。消している＝浮いている。
   沈むだけだと一覧の中で弱いので、地の色も変えて「入っている」を明示する。 */
.mapchip input:checked + span{color:var(--ink);border-color:var(--key-fill);background:var(--key-wash);
  box-shadow:inset 2px 2px 5px var(--nm-dark), inset -2px -2px 5px var(--nm-light)}
.mapchip input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
/* 種類の色の丸。一覧の行の丸・地図のピンの縁と同じ色を使う。 */
.mapchip i{width:9px;height:9px;border-radius:50%;flex:none;opacity:.35}
.mapchip input:checked + span i{opacity:1}
.mapchip em{font-family:var(--font-data);font-style:normal;font-size:calc(11px * var(--tscale));color:var(--ink-3)}

/* 現在地（社長指示 2026-09-28）。ボタンと添え書きを分けて置く
   ——同じ行に流すと、添え書きがボタンの周りを回り込んで読みにくい。 */
/* 現在地の印。村の地点（絵文字のピン）と混ざらないよう、青い丸1つにする。 */
.map-me{width:16px;height:16px;border-radius:50%;background:#2563eb;border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(37,99,235,.5)}
/* これから置く場所の印。押して確かめるためのものなので、少し浮かせる。 */
.map-pin-plot{border-color:var(--fire-600);animation:plot-in .18s ease}
@keyframes plot-in{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
/* 一覧の行の色の丸（地図のピンの縁と同じ色）。 */
.spot-c{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
  vertical-align:middle}

/* 重ねる地図（ハザード）は、ふだん畳んでおく。 */
.mapmore{margin:0 0 12px}
.mapmore summary{cursor:pointer;font-size:calc(12.5px * var(--tscale));font-weight:700;color:var(--key);
  padding:7px 2px;list-style:none;display:flex;align-items:center;gap:6px}
.mapmore summary::-webkit-details-marker{display:none}
.mapmore summary::before{content:"＋";font-weight:700}
.mapmore[open] summary::before{content:"−"}
.mapmore .hint{margin:0 2px}

/* 地図から登録する欄（社長指示 2026-10-01：水源地登録なども1つのマップにまとめる）。
   種類を変えると、使う束（fieldset）だけが出る。fieldset の既定の枠・余白は
   .form の並び（grid）を崩すので消し、中の .field はそのまま縦に並べる。 */
.mapane{border:0;margin:0;padding:0;min-width:0;display:grid;gap:14px}
.mapane[disabled]{display:none}
.mapane > .pnote{margin:0}
/* 入力の取りこぼし（名前が空など）を、欄のすぐ上で返す。 */
.formerr{list-style:none;margin:0;padding:10px 12px;display:grid;gap:4px;
  background:var(--warn-bg);border:1px solid var(--fire-600);border-radius:10px;
  font-size:calc(13px * var(--tscale));color:var(--ink);line-height:1.7}
/* 旧・個別画面から「1つの地図」へ送る案内。 */
.mapgo{margin:0 0 6px}
/* 層の出し入れのつまみ（社長指示 2026-09-26「消防アプリの水源地マップを踏襲」）。
   Leaflet の既定は絵（images/layers.png）で出すが、弊社は画像を置いていないため
   **白い四角**に見えていた。画像を足さずに、文字で「≡ 表示」と描く
   （増やす資産を減らす／何のつまみか読めるようにする、の両取り）。 */
/* 指で触る端末では Leaflet が 44px 角に固定してくるので、そちらにも同じ指定を当てる
   （当てないと「表示」の字が枠からはみ出して切れる）。 */
.leaflet-control-layers-toggle,
.leaflet-touch .leaflet-control-layers-toggle{background-image:none !important;width:auto;height:auto;
  display:flex;align-items:center;gap:4px;padding:6px 10px;
  font-size:calc(13px * var(--tscale));font-weight:700;color:var(--ink-2);line-height:1.2;white-space:nowrap}
.leaflet-control-layers-toggle::before{content:"≡";font-size:calc(16px * var(--tscale));line-height:1}
.leaflet-control-layers-toggle::after{content:"表示"}
.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}
.leaflet-control-layers-list{font-size:calc(12.5px * var(--tscale));line-height:1.9}
.leaflet-control-layers-list label{display:flex;align-items:center;gap:6px}
.leaflet-control-layers-selector{width:16px;height:16px;flex:none;accent-color:var(--key-fill);margin:0}

.leaflet-popup-content{margin:10px 12px;font-size:calc(12.5px * var(--tscale));line-height:1.6}
.leaflet-popup-content b{display:block;font-size:calc(14px * var(--tscale));margin-bottom:3px;color:var(--key)}
.leaflet-popup-content-wrapper{border-radius:10px}
.leaflet-control-attribution{font-size:calc(9px * var(--tscale));background:rgba(255,253,246,.85)}
.leaflet-bar a{color:var(--ink);background:var(--surface)}
.leaflet-bar a:hover{background:var(--surface-2)}
.map-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:12px;font-size:calc(11px * var(--tscale));color:var(--ink-2)}
.map-legend span{display:inline-flex;align-items:center;gap:4px}
.nocoord{font-size:calc(11px * var(--tscale));color:var(--ink-3);margin-left:4px}

/* ----- お店（社長指示 2026-09-18）----- */
.shoplist{display:grid;gap:12px}
.shoplist li{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.shoplist a{display:flex;gap:12px;text-decoration:none;color:inherit;align-items:stretch}
.shop-thumb{flex:none;width:112px;background:var(--surface-2);display:grid;place-items:center}
.shop-thumb img{width:100%;height:100%;object-fit:cover}
.shop-sum{padding:12px 14px 12px 0;min-width:0}
.shop-sum h4{font-size:calc(16px * var(--tscale));font-weight:700;margin-bottom:3px;color:var(--key)}
.shop-sum p{font-size:calc(14px * var(--tscale));color:var(--ink-2);line-height:1.6}
.shop-main{border-radius:12px;overflow:hidden;border:1px solid var(--line-2);margin-bottom:10px;aspect-ratio:3/2}
.shop-main img{width:100%;height:100%;object-fit:cover}
.shop-subs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px}
.shop-subs li{border-radius:8px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1}
.shop-subs img{width:100%;height:100%;object-fit:cover}
.shop-marks{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px}
.markbtn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;cursor:pointer;
  padding:11px 18px;font-size:calc(14px * var(--tscale));font-weight:700;font-family:inherit;
  background:var(--surface);border:2px solid var(--key-fill);color:var(--key)}
.markbtn b{font-family:var(--font-data);font-weight:500}
.markbtn.is-on{background:var(--key-fill);color:var(--on-key);border-color:var(--key-fill)}
.markbtn.is-off{opacity:.55;cursor:default}
.markbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* 言語の切り替え（社長指示 2026-09-18） */
/* ----- プロジェクトの進み具合（社長指示 2026-09-18）-----
   できあがってからではなく、進んでいる途中を積み上げて見せる。 */
.updates{display:grid;gap:0;position:relative;margin-left:8px;
  border-left:2px solid var(--key-edge);padding-left:18px}
.updates li{position:relative;padding:0 0 22px}
.updates li::before{content:"";position:absolute;left:-25px;top:6px;width:12px;height:12px;
  border-radius:50%;background:var(--key-fill);border:2px solid var(--surface)}
.updates time{display:block;font-family:var(--font-data);font-size:calc(13px * var(--tscale));color:var(--ink-3)}
.updates h4{font-size:calc(16px * var(--tscale));font-weight:700;margin:2px 0 4px;color:var(--key)}
.updates p{font-size:calc(15px * var(--tscale));line-height:1.8;color:var(--ink-2)}
.updates li.is-locked::before{background:var(--surface);border-color:var(--ink-4)}
.updates li.is-locked h4{color:var(--ink-3)}
.locked-note{background:var(--surface-2);border-radius:10px;padding:12px 14px;font-size:calc(14px * var(--tscale))}

/* マイページの「見るだけ」の並び（社長指示 2026-09-25）。
   入力欄ではないので、枠で囲わず、左に項目名・右に中身を置く。 */
.mylist-v{margin:0 0 6px}
/* 長い項目名（例：手助けが要ることを自主防災組織にも渡す）は、文字を
   大きくすると1行に収まらない。縮められない指定にしていたため、
   文字「もっと大きい」×390px で横にはみ出していた（2026-09-25）。
   折り返しを許し、入らなければ値を次の行に送る。 */
.mylist-v>div{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;
  justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--line-1)}
.mylist-v dt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;
  font-size:calc(13px * var(--tscale));color:var(--ink-3);font-weight:700}
.mylist-v dd{flex:0 1 auto;margin:0;text-align:right;font-size:calc(14px * var(--tscale));
  color:var(--ink);line-height:1.7;min-width:0;overflow-wrap:anywhere}

/* ----- フォーム ----- */
.form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:16px}
.field{display:grid;gap:4px}
.field label{font-size:calc(14px * var(--tscale));font-weight:700;color:var(--key)}
.field .hint{font-size:calc(13px * var(--tscale));color:var(--ink-2);line-height:1.7}
/* .field は「ラベル＋入力」を縦に積むための箱（display:grid）。
   説明文そのものに .field を付けると、文中の <b> や <br> までが1行ずつの
   グリッド行になり、文の途中で改行が入る（メニューの各モードの説明で発覚・2026-09-21）。
   説明文のときは箱をやめて、ふつうの段落として流す。 */
.field.hint{display:block}
.field label.check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:calc(12.5px * var(--tscale));color:var(--ink)}
.field label.check input{width:auto;accent-color:var(--key-fill)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;border:2px solid var(--key-fill);border-radius:8px;background:var(--surface-2);font-size:calc(16px * var(--tscale))}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}
.btn{display:inline-block;background:var(--accent-fill);color:var(--on-accent);border:0;border-radius:999px;
  padding:14px 28px;font-weight:700;font-size:calc(17px * var(--tscale));cursor:pointer;text-decoration:none;text-align:center}
.btn.ghost{background:transparent;color:var(--key);border:2px solid var(--key-fill)}
.btn.small{padding:9px 18px;font-size:calc(14px * var(--tscale))}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ==========================================================================
   押せるものの立体（ニューモーフィズム・社長指示 2026-09-25）
   浮き＝明側の影を左上・暗側の影を右下に。押した瞬間は内側に入れて沈ませる。
   触れる面（.btn/.markbtn/.cardact/.tile/.backbtn/.mode）にだけ付ける
   ——押せないものまで浮かせると、どれが押せるのか分からなくなる。
   ========================================================================== */
.btn,.markbtn,.cardact,.backbtn,.mode{
  box-shadow:5px 5px 11px var(--nm-dark), -5px -5px 11px var(--nm-light);
  transition:box-shadow .12s ease, transform .12s ease}
.btn:active,.markbtn:active,.cardact:active,.backbtn:active,.mode:active{
  box-shadow:inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light);
  transform:translateY(1px)}
/* 塗ってあるボタン（主CTA）は、沈みを自分の色の濃い方で作る。
   地の色の影を内側に入れると、塗りが濁って文字が読みにくくなる。 */
.btn:not(.ghost):active{box-shadow:inset 3px 3px 8px var(--mikan-600), inset -2px -2px 6px rgba(255,255,255,.35)}
/* 枠線のボタンは、地と同じ面にして浮かせる（＝ニューモーフィズムの素の形）。
   枠線は残す＝影が見えない環境でも「押せる」と分かる。 */
.btn.ghost{background:var(--ground)}
.tile{box-shadow:4px 4px 9px var(--nm-dark), -4px -4px 9px var(--nm-light)}
.tile:hover{background:transparent}
.tile:active{background:transparent;
  box-shadow:inset 3px 3px 7px var(--nm-dark), inset -3px -3px 7px var(--nm-light)}
/* 動きを減らす設定の方には、沈む動き（transform）だけ止める（影は残す）。 */
@media (prefers-reduced-motion:reduce){
  .btn,.markbtn,.cardact,.backbtn,.mode{transition:none}
  .btn:active,.markbtn:active,.cardact:active,.backbtn:active,.mode:active{transform:none}
}

/* モードの入口（社長指示 2026-09-25「メニューの一番上に横並び」） */
.modes{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.modes form{flex:1 1 150px;min-width:0;display:flex}
/* 高さを減らす（社長指示 2026-09-29）。縦積み（絵の下に文字）をやめ、
   **絵を左・文字を右**に置く。押せる大きさ（44px）は保ったまま、
   ボタン1つぶんの高さが3割ほど低くなり、下のメニューが早く見えてくる。 */
.mode{flex:1;display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:9px;row-gap:1px;
  padding:8px 12px;border-radius:12px;cursor:pointer;font-family:inherit;
  background:var(--ground);border:2px solid var(--key-edge);color:var(--key);
  text-align:left;min-width:0;min-height:44px}
.mode-i{grid-row:1 / 3;width:calc(22px * var(--tscale));height:calc(22px * var(--tscale));fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mode-t{font-size:calc(14px * var(--tscale));font-weight:700;line-height:1.3}
.mode-n{font-size:calc(11px * var(--tscale));color:var(--ink-3);line-height:1.35;
  overflow-wrap:anywhere}
.mode:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 防災は村の緑と混ぜない（消防の赤1系統・既存の決まりに合わせる）。 */
.mode-fire{border-color:var(--fire-600);color:var(--fire-700)}
.mode-fire .mode-n{color:var(--fire-800)}

/* メニューの項目のアイコン（社長指示 2026-09-25） */
.cardlist.has-ico li{display:flex;gap:12px;align-items:flex-start}
.cardlist.has-ico li>div{min-width:0;flex:1}
.li-i{width:calc(24px * var(--tscale));height:calc(24px * var(--tscale));flex:none;
  margin-top:2px;fill:none;stroke:var(--key-edge);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* マイページのかたまり（社長指示 2026-09-25「区切りをわかりやすく」）。
   2026-09-29 に組み直したマイページでは使っていないが、ほかの画面が使っている。 */
.mygroup{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:4px 14px 16px;margin:22px 0}
.mygroup-t{margin:0 -14px 2px;padding:9px 14px;background:var(--key-wash);
  border-radius:13px 13px 0 0;color:var(--key);font-size:calc(13px * var(--tscale));
  font-weight:700;letter-spacing:.06em}
.mygroup .sec-row{margin:18px 0 10px}
.mygroup .sec-row:first-of-type{margin-top:12px}

/* ── プロフィールの1行ずつ（社長指示 2026-09-29「FBを参考に」）──────────
   見出しの右に鉛筆、その下に「絵＋ひと言」の行が並ぶ。
   囲みを作らず、絵の列と文字の列の整列だけで読ませる（枠を積まない）。 */
.infohead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:20px 0 6px}
.infohead-t{margin:0;font-size:calc(17px * var(--tscale));font-weight:700;color:var(--ink)}
.infohead-e{flex:none;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;color:var(--ink-2);background:var(--surface-2)}
.infohead-i{width:calc(19px * var(--tscale));height:calc(19px * var(--tscale));fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.infohead-e:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.infolist{list-style:none;padding:0;margin:0}
.infolist li{display:flex;align-items:flex-start;gap:13px;padding:9px 2px}
.info-i{width:calc(24px * var(--tscale));height:calc(24px * var(--tscale));flex:none;
  margin-top:1px;fill:none;stroke:var(--ink-3);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.info-b{min-width:0;flex:1}
.info-b b{display:block;font-size:calc(15px * var(--tscale));font-weight:600;line-height:1.55;
  overflow-wrap:anywhere}
.info-s{display:block;font-size:calc(11.5px * var(--tscale));color:var(--ink-3);line-height:1.5}

/* 1行ずつの中に「スイッチ・公開範囲の札・鉛筆」を並べる（社長指示 2026-09-29）。
   絵／中身／操作 の3列。狭い画面では操作だけ次の行に落として、中身を潰さない。 */
.infolist.is-rows li{flex-wrap:wrap}
.info-a{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.info-tag{font-size:calc(11px * var(--tscale));color:var(--ink-3);background:var(--surface-2);
  border-radius:999px;padding:2px 9px;white-space:nowrap}
.info-b b.is-none{color:var(--ink-3);font-weight:400}
.swform{display:flex;flex:none;margin:0}
/* スイッチは押した瞬間に切り替わる（フォームを送る）。見た目は既存の .sw と同じ。 */
.swform .sw{cursor:pointer}

/* マイページの頭（写真＋名前）。Facebook と同じで、顔と名前をいちばん上に置く。 */
.myacts{margin-top:4px}
.myhead{display:flex;align-items:center;gap:13px;margin:18px 0 2px}
.myface{width:calc(72px * var(--tscale));height:calc(72px * var(--tscale));border-radius:50%;
  object-fit:cover;flex:none;background:var(--paper-2)}
.myface.is-empty{display:grid;place-items:center;text-decoration:none;
  border:1px dashed var(--line-2);color:var(--ink-3);
  font-size:calc(12px * var(--tscale))}
.myhead-b{min-width:0;flex:1}
.myhead-n{display:block;font-size:calc(19px * var(--tscale));line-height:1.4}
.myhead-k{display:block;font-size:calc(12px * var(--tscale));color:var(--ink-3)}
.myhead-no{display:block;font-family:var(--font-data);font-size:calc(12.5px * var(--tscale));
  color:var(--ink-3);letter-spacing:.08em}

/* そのほかは全部ボタン（社長指示 2026-09-29「それ以外の設定はボタンでリンク」）。
   2列で並べ、押せる面は他と同じ立体にそろえる。 */
.mybtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:4px 0 6px}
.mybtn{position:relative;display:flex;align-items:center;gap:9px;min-height:52px;
  padding:9px 12px;border-radius:12px;text-decoration:none;color:var(--ink);
  background:var(--surface);font-size:calc(13.5px * var(--tscale));font-weight:700;
  box-shadow:3px 3px 7px var(--nm-dark),-3px -3px 7px var(--nm-light)}
.mybtn:active{box-shadow:inset 3px 3px 7px var(--nm-dark),inset -3px -3px 7px var(--nm-light)}
.mybtn span{min-width:0;flex:1;line-height:1.35;overflow-wrap:anywhere}
.mybtn-i{width:calc(22px * var(--tscale));height:calc(22px * var(--tscale));flex:none;
  fill:none;stroke:var(--key-edge);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mybtn em{flex:none;font-style:normal;font-family:var(--font-data);
  font-size:calc(12px * var(--tscale));font-weight:700;color:var(--on-key);
  background:var(--key-fill);border-radius:999px;padding:1px 8px}
/* 状態のような「言葉」は、名前の下に小さく回す（横に並べると名前が潰れる）。 */
.mybtn span small{display:block;font-size:calc(11px * var(--tscale));font-weight:400;
  color:var(--ink-3);line-height:1.4}
.mybtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.flash{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-ink);border-radius:10px;padding:10px 13px;font-size:calc(13px * var(--tscale));margin-bottom:12px}
.errors{background:var(--ng-bg);border:1px solid var(--ng-line);color:var(--ng-ink);border-radius:10px;padding:10px 13px;font-size:calc(13px * var(--tscale));margin-bottom:12px}
.errors li{list-style:disc;margin-left:18px}

.tgl{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:calc(13px * var(--tscale));border-top:1px solid var(--line);gap:12px}
.tgl:first-of-type{border-top:0}
.sw{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;flex:none;border:0;cursor:pointer;padding:0}
.sw[aria-pressed="true"]{background:var(--key-fill)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.sw[aria-pressed="true"]::after{left:21px}

/* ----- 村民証の全画面表示（社長指示 2026-09-18）-----
   カードを押すとこの面が上に重なる。縦横比は無視して画面いっぱいに使い、
   QRを大きく出す。もう一度押すと閉じる。
   パソコンでは画面いっぱいにすると何が起きたか分かりにくいので、
   スマホの画面を模した縦長の枠の中に同じものを出す（挙動は同じ）。 */
/* 村民証の「横長カードのモーダル」は 2026-10-01 に廃止した（社長指示）。
   拡大表示は全画面（縦）の村民証（.fullqr）に一本化——横長のままでは
   写真もQRも小さく、身分証として見せられないため。
   下の .fc-* は、その全画面の面でいまも使っている。 */
/* 拡大した村民証の見出し（社長指示 2026-09-26）。
   ロゴ＋さかもと村（発行元）と、村民証（券種）を1行で出す。
   受付で相手に見せる面なので、QR だけでなく「何の証か」がその場で読める。 */
.fc-brand{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:0;color:#fff}
.fc-mark{width:calc(26px * var(--tscale));height:calc(26px * var(--tscale));flex:none;color:#fff}
.fc-village{font-family:var(--font-mark);font-size:calc(17px * var(--tscale));font-weight:700;letter-spacing:.06em}
.fc-type{font-size:calc(13px * var(--tscale));font-weight:700;letter-spacing:.14em;
  padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.18)}
/* 立場の印（消防団・自主防災・役場職員・お店・区分）。社長指示 2026-09-26。
   カードの中の .badge はカード幅に連れる単位（cqw）で書いてあるが、
   拡大した面にはカードという器が無いので、ここは別に持つ（px 側）。
   色はカードの印と同じものを使う＝同じ立場が同じ色で出る。 */
.fc-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0}
.fc-badge{font-size:calc(12px * var(--tscale));font-weight:700;letter-spacing:.04em;line-height:1.5;
  padding:3px 11px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.2);color:#fff}
.fc-badge.dan{background:var(--fire-600)}
.fc-badge.jishubo{background:var(--mikan-700)}
.fc-badge.yakuba{background:var(--ai-800)}
.fc-badge.shop{background:var(--moss-700)}

.fc-hint{font-size:calc(13px * var(--tscale));color:rgba(255,255,255,.72)}
.fc-qr{width:min(78vw,340px);aspect-ratio:1;background:#fff;border-radius:16px;padding:14px}
.fc-qr svg,.fc-qr img{width:100%;height:100%;display:block}
.fc-name{font-size:calc(24px * var(--tscale));font-weight:700;letter-spacing:.04em}
.fc-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px}
.fc-meta dt{font-size:calc(12px * var(--tscale));color:rgba(255,255,255,.7);letter-spacing:.08em;margin-bottom:3px}
.fc-meta dd{font-family:var(--font-data);font-size:calc(17px * var(--tscale));font-variant-numeric:tabular-nums}

/* 小さなボタンを横に並べる（お知らせの「出す／消す」等）。
   <p> の中に <form> を置くとブラウザが <p> を閉じてしまい、並ばない＝入れ物は <div>。 */
.rowbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* 店主の紹介（社長指示 2026-10-03）。顔と一言を横に並べる。
   写真が無い店もあるので、写真はあるときだけ場所を取る。 */
.ownerbox{display:flex;align-items:flex-start;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:14px}
.owner-face{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover}
.owner-n{font-weight:700;margin:0 0 4px}

/* ----- 全画面QR（直接 /card を開いたとき）----- */
/* 画面が短いときに**上下が切れたまま動かせない**のを防ぐ（社長報告 2026-10-03「崩れてる」）。
   もとは justify-content:center だけで中身を真ん中に置いていたが、中身が画面より高いと
   flex の中央寄せは**上にもはみ出す**（しかも overflow が無いのでスクロールもできない）。
   実測：390×620 で券面の頭が -31px、下は 651px（画面は 620px）＝両端が切れていた。
   いまは「入るときは真ん中・入らないときは上から並べてスクロールできる」にしてある
   （margin:auto は余白があるときだけ効き、無いときは 0 になる）。 */
.fullqr{position:fixed;inset:0;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(160deg,var(--moss-700),var(--moss-900));color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;
  padding:calc(62px + env(safe-area-inset-top,0px)) 26px calc(26px + env(safe-area-inset-bottom,0px));
  text-align:center;z-index:50}
/* 入る高さのときだけ、上下の余りを分け合って中央に見せる。
   上は「閉じる」の下から始める（重ならない）。 */
.fullqr>.fc-brand{margin-top:auto}
.fullqr>:last-child{margin-bottom:auto}
.fullqr .bigqr{width:min(70vw,280px);aspect-ratio:1;background:#fff;border-radius:14px;padding:12px}
.fullqr .bigqr svg,.fullqr .bigqr img{width:100%;height:100%}
.fq-no{font-family:var(--font-data);font-size:calc(28px * var(--tscale));letter-spacing:.14em;font-variant-numeric:tabular-nums}
.fq-name{font-size:calc(15px * var(--tscale));font-weight:700}
.fq-meta{display:flex;gap:22px}
.fq-meta dt{font-size:calc(10px * var(--tscale));color:rgba(255,255,255,.62);letter-spacing:.08em;margin-bottom:2px}
.fq-meta dd{font-family:var(--font-data);font-size:calc(15px * var(--tscale));font-variant-numeric:tabular-nums}
.fq-close{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:18px;
  background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:999px;padding:7px 16px;font-size:calc(12px * var(--tscale));text-decoration:none}
/* 画面を移らずに、いまの画面の上へ重ねて出す（社長指示 2026-10-13）。
   .fullqr は display:flex を持っているので、hidden 属性だけでは隠れない
   （[hidden] の display:none が同じ詳細度で負ける）。ここで明示して閉じる。
   開いている間は後ろの画面を動かさない＝指が券面の外をなぞっても下が流れない。 */
.fullqr[hidden]{display:none}
body.card-open{overflow:hidden}

/* ----- リアクション・コメント・保存（社長指示 2026-10-14）-----
   > インスタグラムなどのように、❤️💬とブックマークみたいな感じ
   行事（カレンダー／動画）と広場の投稿で**同じ見た目**にする。
   指で押す画面なので、押せるところは 40px 四方を下回らせない。 */
.ixbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:10px 0 0}
.ixbar form{margin:0}
.ixbtn{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:6px 10px;
  background:none;border:1px solid transparent;border-radius:999px;cursor:pointer;
  font-size:calc(13px * var(--tscale));color:var(--ink-2);font-family:inherit;line-height:1}
.ixbtn:hover{background:var(--surface-2)}
.ixbtn.is-on{color:var(--key);border-color:var(--line);background:var(--surface-2);font-weight:700}
.ixbtn.is-off{cursor:default}
.ixn{font-family:var(--font-data);font-variant-numeric:tabular-nums;min-width:.6em}
/* ラベルは出す。2026-09-28 から村の方が見ていた「いいね」「ありがとう」の文字を、
   作り直しのついでに消さない。入りきらないぶんは折り返す。
   文字を大きくしている方だけ、絵と数に絞る（下の data-text="xl" の並びで畳む）。 */
.ixlabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ixcomments{margin:8px 0 0;padding:10px 12px;background:var(--surface-2);border-radius:10px}
.ixcomments[hidden]{display:none}
.ixclist{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.ixclist li{display:grid;gap:2px}
.ixc-who{margin:0;font-size:calc(11.5px * var(--tscale));color:var(--ink-3);
  display:flex;gap:8px;align-items:baseline}
.ixc-body{margin:0;font-size:calc(13.5px * var(--tscale));line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ixc-del{justify-self:start;background:none;border:0;padding:2px 0;cursor:pointer;
  font-size:calc(11px * var(--tscale));color:var(--ink-3);text-decoration:underline;font-family:inherit}
.ixcform{display:flex;gap:6px;align-items:center}
.ixcform input{flex:1;min-width:0}

/* ----- ボトムナビ（村民は4つ・村マップを一番目立たせる）-----
   もとは5つだったが、5つ目は機能ではなく「中央」を作るための枠で、
   そこを埋めるために中身の無いタブが載っていた。枠ごと畳んだ
   （社長指示 2026-09-17「中央じゃなくてもいい」）。
   4つにした分、タップ標的とラベルを大きくできる＝高齢者が使う前提に効く。 */
/* タブの数はモードで変わる（村民5・村役場5・消防5）。数を書かずに等分する。 */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border-top:2px solid var(--key-fill);background:var(--surface);
  box-shadow:0 -6px 18px rgba(58,69,42,.12);
  padding:9px 2px calc(12px + env(safe-area-inset-bottom,0px))}
.nav a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;
  color:var(--ink-2);font-size:calc(11px * var(--tscale));text-decoration:none;border-radius:8px}
.nav a svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 村マップは「中央」ではなく大きさと色で立てる */
.nav a.hero{color:var(--key)}
.nav a.hero svg{width:30px;height:30px;stroke-width:2}
.nav a[aria-current="page"]{color:var(--key);font-weight:700}
.nav a[aria-current="page"] svg{stroke-width:2.2}
.nav a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nav.nav-yakuba a,.nav.nav-yakuba button{font-size:calc(11px * var(--tscale))}
/* お店モードの下メニュー（社長指示 2026-10-03）。項目の名前が長い（来てくれた人）ので、
   村役場モードと同じく字を少し小さくして、5つが1行に収まるようにする。 */
.nav.nav-shop{background:var(--mikan-700);border-top-color:var(--mikan-500,var(--mikan-700))}
.nav.nav-shop a,.nav.nav-shop button{font-size:calc(10px * var(--tscale));color:rgba(255,255,255,.66)}
.nav.nav-shop a[aria-current="page"]{color:#fff;font-weight:700}

/* ----- 村役場モード ----- */
.yakuba-bar{
  position:sticky;top:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--moss-800);color:#fff;font-size:calc(13px * var(--tscale));
  padding:calc(9px + env(safe-area-inset-top,0px)) 16px 9px;
}
.yakuba-bar b{font-weight:700;letter-spacing:.04em}
.yakuba-bar span{min-width:0}
.yakuba-bar button{
  flex:none;background:rgba(255,255,255,.18);border:0;color:#fff;
  border-radius:999px;padding:5px 14px;font-size:calc(12px * var(--tscale));font-weight:700;cursor:pointer;
}
.yakuba-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* お店モードの帯。村役場（モス）と取り違えないよう、みかん側で出す。 */
.shop-bar{
  position:sticky;top:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--mikan-700);color:#fff;font-size:calc(13px * var(--tscale));
  padding:calc(9px + env(safe-area-inset-top,0px)) 16px 9px;
}
.shop-bar b{font-weight:700;letter-spacing:.04em}
/* 村役場・防災の帯と同じく、長い説明文の側を縮める。これが無いと説明文が縮まず、
   はみ出した分のしわ寄せでボタンの「終了」が縦に割れていた（2026-10-02 実測で発見）。 */
.shop-bar span{min-width:0}
.shop-bar button{flex:none;background:rgba(255,255,255,.2);border:0;color:#fff;
  border-radius:999px;padding:5px 14px;font-size:calc(12px * var(--tscale));font-weight:700;cursor:pointer}
.shop-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 消防モードの帯。村役場（モス）・お店（みかん）と取り違えないよう、消防の赤で出す。
   社長指示 2026-09-21。 */
.fire-bar{
  position:sticky;top:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--fire-800);color:#fff;font-size:calc(13px * var(--tscale));
  padding:calc(9px + env(safe-area-inset-top,0px)) 16px 9px;
}
.fire-bar b{font-weight:700;letter-spacing:.04em}
.fire-bar span{min-width:0}
.fire-bar button{flex:none;background:rgba(255,255,255,.2);border:0;color:#fff;
  border-radius:999px;padding:5px 14px;font-size:calc(12px * var(--tscale));font-weight:700;cursor:pointer}
.fire-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* モードの帯のボタン（終了／通常モードへ）は、どの幅・どの文字の大きさでも1行のまま。
   全社規約「崩れない」の③＝文字を縦に割らない。 */
.yakuba-bar button,
.shop-bar button,
.fire-bar button{white-space:nowrap}

/* ── 防災モードのホーム（社長指示 2026-09-29「消防アプリの画面構成」）──────
   もとの消防アプリと同じ組み立て：赤い帯 → 連絡 → 予定 → ボタン。 */

/* 災害が出ているときの、押せる赤い帯（もとの disaster-banner）。 */
.fire-alert{display:grid;gap:3px;padding:14px 16px;border-radius:12px;margin:0 0 16px;
  background:var(--fire-700);color:#fff;text-decoration:none}
.fa-badge{justify-self:start;background:rgba(255,255,255,.22);border-radius:999px;
  padding:2px 10px;font-size:calc(12px * var(--tscale));font-weight:700;letter-spacing:.04em}
.fa-title{font-size:calc(17px * var(--tscale));font-weight:700;line-height:1.45}
.fa-sub{font-size:calc(12.5px * var(--tscale));opacity:.9;line-height:1.6}
.fa-cta{margin-top:4px;font-size:calc(13px * var(--tscale));font-weight:700}

/* 連絡・予定の短い一覧。1行1件で、日付は右に逃がす。 */
.firelist{list-style:none;padding:0;margin:0 0 4px}
.firelist li{border-top:1px solid var(--line)}
.firelist li:first-child{border-top:0}
.firelist a{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:11px 2px;text-decoration:none;color:var(--ink)}
.fl-pin{flex:none}
.fl-t{flex:1 1 8em;min-width:0;font-size:calc(14.5px * var(--tscale));font-weight:600;line-height:1.5}
.fl-d{flex:none;font-family:var(--font-data);font-size:calc(12px * var(--tscale));color:var(--ink-3)}
.fl-d.is-when{flex:1 1 100%;color:var(--key)}
.fl-p{flex:1 1 100%;font-size:calc(12px * var(--tscale));color:var(--ink-3)}

/* まとめメニュー（もとの more.php）。まとまりの名前 → 行の一覧。 */
.menu-group{margin:20px 0 6px;font-size:calc(13px * var(--tscale));font-weight:700;
  color:var(--key);letter-spacing:.06em}
.menu-list{list-style:none;padding:0;margin:0;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.menu-list li + li{border-top:1px solid var(--line)}
.menu-list a{display:flex;align-items:center;gap:11px;padding:13px 14px;
  text-decoration:none;color:var(--ink);font-size:calc(14.5px * var(--tscale));font-weight:600}
.menu-list a>span:not(.chev){min-width:0;flex:1;line-height:1.45}
.menu-i{width:calc(22px * var(--tscale));height:calc(22px * var(--tscale));flex:none;
  fill:none;stroke:var(--key-edge);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.menu-list em{flex:none;font-style:normal;font-family:var(--font-data);
  font-size:calc(12px * var(--tscale));font-weight:700;color:var(--on-key);
  background:var(--key-fill);border-radius:999px;padding:1px 8px}
.menu-list em.is-on{font-family:inherit;background:var(--fire-700)}
.menu-list .chev{flex:none;color:var(--ink-4)}
.menu-list a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.fire-exit{margin:22px 0 4px;display:flex;justify-content:center}
.fire-exit .btn{width:100%;max-width:400px}

/* 災害宣言が出ているときの帯。消防モードかどうかに関わらず全員に出す。
   ここだけは点滅も強調もしない——目立たせるより、いつでも同じ場所にあることを優先する。 */
.disaster-bar{
  position:sticky;top:0;z-index:46;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--fire-600);color:#fff;font-size:calc(13px * var(--tscale));text-decoration:none;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
}
.disaster-bar b{font-weight:700;letter-spacing:.06em;
  background:rgba(255,255,255,.22);border-radius:999px;padding:3px 11px;flex:none}
.disaster-bar .disaster-go{margin-left:auto;font-weight:700;white-space:nowrap}
/* 帯の中に「戻す／戻る」を置く（社長指示 2026-09-24・発災モードは強制切り替え）。
   リンクの中にボタンは入れられないので、横に並べる。 */
.disaster-bar .disaster-go1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  min-width:0;color:#fff;text-decoration:none}
.disaster-bar form{margin-left:auto}
.disaster-bar button{flex:none;background:rgba(255,255,255,.2);border:0;color:#fff;
  border-radius:999px;padding:5px 14px;font-size:calc(12px * var(--tscale));font-weight:700;cursor:pointer}
.disaster-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 消防モードは5つ（終了ボタンを含む） */
.nav.nav-fire{background:var(--fire-900);border-top-color:var(--fire-700)}
.nav.nav-fire a,.nav.nav-fire button{font-size:calc(11px * var(--tscale));color:rgba(255,255,255,.64)}
.nav.nav-fire a[aria-current="page"]{color:#fff;font-weight:700}
.nav.nav-fire button{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:calc(10px * var(--tscale));
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;border-radius:8px;
}
.nav.nav-fire button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* モード中は下のメニューも色を変えて、村民の画面と取り違えないようにする */
.nav.nav-yakuba{background:var(--ai-900);border-top-color:var(--ai-700)}
.nav.nav-yakuba a,.nav.nav-yakuba button{color:rgba(255,255,255,.62)}
.nav.nav-yakuba a[aria-current="page"]{color:#fff;font-weight:700}
.nav.nav-yakuba button,
.nav.nav-shop button{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:calc(10px * var(--tscale));
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;border-radius:8px;
}
.nav.nav-yakuba button svg,
.nav.nav-shop button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 行事の一覧（社長指示 2026-09-26：一覧だけ・行を押すと直せる）。
   表を横スクロールさせるより、1行1件のカードのほうがスマホで押しやすい。 */
/* 押すと開く一覧の行（行事・地点で共用）。
   2026-09-26：地点の一覧でも同じ形にしたので、行事だけの名前（.evrow）から
   中立の名前に変えた。部品を増やさない＝同じ見た目を2つ書かない。 */
/* コンセプトとテーマ（社長の言葉・2026-09-28）。
   囲み枠を作らず、文字の大きさと余白だけで見せる（枠で飾るとAIっぽい標語箱になる）。
   書体は見出し用の明朝＝村の声として読ませる。 */
.concept{margin:22px 0;padding:0;text-align:center}
.concept b{display:block;font-family:var(--font-mark);font-size:calc(19px * var(--tscale));
  font-weight:700;line-height:1.8;color:var(--key)}
.concept span{display:block;margin-top:8px;font-family:var(--font-mark);
  font-size:calc(14px * var(--tscale));letter-spacing:.14em;color:var(--ink-3)}

/* ----- メニューのいちばん上の立場（社長指示 2026-09-28）-----
   村民証と同じ印を、同じ並びで出す。囲みは作らず、名前と印を1行に流す。 */
.mybadges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 2px 12px}
.mb-name{font-size:calc(14.5px * var(--tscale));font-weight:700;color:var(--ink);
  margin-right:2px}
.mybadges .badge{font-size:calc(11.5px * var(--tscale));padding:3px 9px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.mybadges .badge.dan,.mybadges .badge.yakuba{color:var(--accent);border-color:var(--accent-wash)}

/* ----- 起動したときのオープニング（社長指示 2026-09-28）-----
   背景の絵とキャッチコピーだけ。文字は絵の上に乗るので、下に濃い影を敷いて読ませる。
   出ているあいだは後ろを動かさない（.is-splash）。 */
.splash{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:var(--key-fill) center/cover no-repeat;
  background-image:linear-gradient(rgba(20,28,18,.34), rgba(20,28,18,.62)), url("/img/splash.webp");
  animation:splash-in .5s ease both}
/* **hidden のときは必ず消す**（2026-09-28 の実測で見つけた事故）。
   display を持つクラスは hidden 属性（ブラウザ既定の display:none）に勝つため、
   2回目以降の画面（JS が「もう出した」と判断して何もしない回）で、
   押せない板が画面いっぱいに残っていた＝アプリが使えなくなっていた。 */
.splash[hidden]{display:none}
.splash.is-out{animation:splash-out .5s ease both;pointer-events:none}
html.is-splash,html.is-splash body{overflow:hidden}

.splash-copy{margin:0;padding:0 24px;text-align:center;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.5)}
.splash-copy b{display:block;font-family:var(--font-mark);font-weight:700;
  font-size:calc(27px * var(--tscale));line-height:1.9;letter-spacing:.06em}
.splash-copy span{display:block;margin-top:14px;font-family:var(--font-mark);
  font-size:calc(15px * var(--tscale));line-height:1.9;letter-spacing:.16em;
  color:rgba(255,255,255,.92)}

@keyframes splash-in{from{opacity:0}to{opacity:1}}
@keyframes splash-out{from{opacity:1}to{opacity:0;visibility:hidden}}

/* 動きを減らす設定の方には、出入りの動きを付けない（出ること自体は同じ）。 */
@media (prefers-reduced-motion:reduce){
  .splash,.splash.is-out{animation-duration:.01s}
}

/* ----- 立場を切り替えて見ているときの帯（社長指示 2026-09-28）-----
   村役場モードの帯と同じ置き方。戻る道を必ず横に置く。 */
.sim-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--mikan-800);color:#fff;padding:7px 14px;
  font-size:calc(12.5px * var(--tscale))}
.sim-bar b{color:#fff}
.sim-bar button{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:999px;
  padding:5px 13px;font-family:inherit;font-size:calc(12px * var(--tscale));font-weight:700;
  cursor:pointer}

/* ----- 行事1件（社長指示 2026-09-28）----- */
.evd-when{font-size:calc(15px * var(--tscale));color:var(--ink);margin:0 0 8px}
.evd-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}

/* ----- 村民の区分（社長指示 2026-09-28「2コラム 1:3 とドーナツ」）-----
   左に輪、右に数字。狭い画面では縦に積む（1:3 のまま狭めると輪が潰れる）。 */
/* 狭い画面では縦に積む（1:3 のまま狭めると、輪が潰れて読めない）。
   2コラムにするのは幅に余裕が出てから＝メディアクエリはCSSの最後にまとめてある。 */
.ranksplit{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;margin:8px 0 4px;
  justify-items:center}
.rs-fig{min-width:0;display:flex;justify-content:center}
.rs-fig .donut-fig{width:132px;max-width:100%;aspect-ratio:1;height:auto}
.rs-body{width:100%}
.rs-body{min-width:0}
.rs-list{list-style:none;padding:0;margin:8px 0 0}
.rs-list li{display:flex;align-items:center;gap:8px;padding:4px 0;
  font-size:calc(13px * var(--tscale));color:var(--ink-2)}
.rs-list i{flex:none;width:12px;height:12px;border-radius:3px;display:block}
.rs-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-list b{font-family:var(--font-data);color:var(--ink)}
.rs-p{font-family:var(--font-data);color:var(--ink-3);min-width:3.2em;text-align:right}

/* ----- パンくず（社長指示 2026-09-28）-----
   「戻る」の下に1行。長くなったら折り返す（横に伸ばして画面を割らない）。
   いまいる場所だけ濃い色にして、上の階層はリンクの色にする。 */
.crumbs{margin:2px 2px 10px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;
  list-style:none;margin:0;padding:0}
.crumbs li{display:flex;align-items:center;gap:6px;min-width:0;
  font-size:calc(12px * var(--tscale));color:var(--ink-3);line-height:1.6}
.crumbs li + li::before{content:"›";color:var(--ink-4)}
.crumbs a{color:var(--link);text-decoration:none}
.crumbs span[aria-current]{color:var(--ink-2);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(100%,22em)}

/* ----- 村の広場への入口（社長指示 2026-09-28「他の村民は今何してる？」）-----
   タイルの列より前に置く1行。押せるものなので、他の押せる面と同じ立体にする。 */
.snsin{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:13px 15px;
  background:var(--surface);border-radius:14px;text-decoration:none;color:var(--ink);
  box-shadow:5px 5px 11px var(--nm-dark), -5px -5px 11px var(--nm-light);
  transition:box-shadow .12s ease, transform .12s ease}
.snsin:active{box-shadow:inset 4px 4px 9px var(--nm-dark), inset -4px -4px 9px var(--nm-light);
  transform:translateY(1px)}
.snsin-i{position:relative;flex:none;width:34px;height:34px;color:var(--key-edge)}
.snsin-i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.snsin-n{position:absolute;top:-4px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;background:var(--accent-fill);
  color:var(--on-accent);font-size:calc(10.5px * var(--tscale));font-weight:700}
.snsin-b{flex:1;min-width:0}
.snsin-b b{display:block;font-size:calc(15px * var(--tscale));line-height:1.5}
.snsin-b span{display:block;margin-top:2px;font-size:calc(12.5px * var(--tscale));
  color:var(--ink-3);line-height:1.6}
.snsin-go{flex:none;color:var(--ink-4);font-size:calc(20px * var(--tscale));line-height:1}

/* ----- 利用率の輪（社長指示 2026-09-28「円グラフで利用率」）-----
   見せたいのは1つの割合なので、円を切り分けず**輪**で出す。
   色は2つだけ（村の鍵色＝使った／罫の色＝まだ）。色だけで読ませず、
   右の凡例に人数を文字でも出す。数字は HTML 側に置く＝文字サイズの設定に連れて伸びる。 */
.donut{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 0 4px}
.donut-fig{position:relative;flex:none;width:118px;height:118px}
.donut-fig svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.donut-n{position:absolute;inset:0;display:grid;place-items:center;align-content:center;margin:0;text-align:center;line-height:1.2}
.donut-n b{font-size:calc(23px * var(--tscale));color:var(--ink);font-family:var(--font-data)}
.donut-n span{display:block;font-size:calc(11px * var(--tscale));color:var(--ink-3)}
.donut-l{flex:1;min-width:min(100%,13em);margin:0;list-style:none;padding:0}
.donut-l li{display:flex;align-items:center;gap:8px;padding:3px 0;
  font-size:calc(13.5px * var(--tscale));color:var(--ink-2)}
.donut-l i{flex:none;width:12px;height:12px;border-radius:3px;display:block}
.donut-l b{color:var(--ink);font-family:var(--font-data)}

/* 行の下に並べる操作ボタン（出す／取り下げる 等）。
   フォームごとに分かれていても1行に並ぶようにする（社長指示 2026-09-28 の作り直しで共通化）。 */
.rowacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}

.taplist li{padding:0}
/* 行の中に置く編集・削除（社長指示 2026-09-28）。
   行そのものは詳細への入口なので、ボタンは行の下に小さく並べる。 */
.rowacts-in{margin:0;padding:0 14px 12px;border-top:1px solid var(--line-2);padding-top:10px}
.taprow{display:flex;align-items:center;gap:10px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.taprow-d{flex:none;font-family:var(--font-data);font-size:calc(13px * var(--tscale));color:var(--ink-3)}
/* 種類の色の丸（消防アプリの水源地一覧と同じ・社長指示 2026-09-26）。
   一覧で見た色が、そのまま地図のピンの縁の色になっている。 */
.taprow-dot{flex:none;width:12px;height:12px;border-radius:50%;display:block}
.taprow-b{flex:1;min-width:0}
.taprow-b b{display:block;font-size:calc(15px * var(--tscale));line-height:1.5;overflow-wrap:anywhere}
.taprow-m{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px;align-items:center}
.taprow-s{font-size:calc(12px * var(--tscale));color:var(--ink-3);overflow-wrap:anywhere}
.taprow-go{flex:none;color:var(--ink-4);font-size:calc(20px * var(--tscale));line-height:1}
.taprow:active{background:var(--surface-2)}

/* プランの行（プラン名・金額・準備数）。狭い画面では縦に積む。 */
.planrow{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px;margin-bottom:6px}
.planrow input{width:100%;min-width:0}

/* ----- 表（村役場）----- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.grid{width:100%;border-collapse:collapse;font-size:calc(15px * var(--tscale));background:var(--surface)}
table.grid th,table.grid td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
table.grid th{font-size:calc(13px * var(--tscale));letter-spacing:.06em;color:var(--ink-2);font-weight:700;background:var(--surface-2)}
/* ----- 災害のときの手引き（社長指示 2026-09-21・消防アプリから移植）-----
   ここは「探す」のではなく「上から読む」画面。読み物として組む。 */
.callbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.callbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:60px;border-radius:12px;text-decoration:none;color:#fff;
  background:var(--fire-600);border:2px solid var(--fire-800)}
.callbar a b{font-family:var(--font-data);font-size:calc(22px * var(--tscale));letter-spacing:.06em}
.callbar a small{font-size:calc(11px * var(--tscale));opacity:.95}
.callbar a.police{background:var(--ink);border-color:var(--ink)}
.callbar a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.man-toc{display:grid;gap:2px;margin:0 0 18px;padding:12px 14px;
  background:var(--surface-2);border-radius:12px}
.man-toc a{display:block;padding:7px 0;font-size:calc(15px * var(--tscale));color:var(--key);text-decoration:none;
  border-bottom:1px solid var(--line)}
.man-toc a:last-child{border-bottom:0}

.man-sec{margin:0 0 28px;scroll-margin-top:16px}
.man-sec h3{font-family:var(--font-mark);font-size:calc(19px * var(--tscale));font-weight:700;color:var(--key);
  margin:0 0 10px;padding-bottom:7px;border-bottom:2px solid var(--key-fill)}
.man-sec h4{font-size:calc(15px * var(--tscale));font-weight:700;color:var(--ink);margin:16px 0 6px}
.man-sec p{font-size:calc(15px * var(--tscale));line-height:1.85;margin:0 0 10px}
.man-sec ul,.man-sec ol{margin:0 0 12px;padding-left:1.4em}
.man-sec li{font-size:calc(15px * var(--tscale));line-height:1.85;margin:0 0 6px}
.man-sec ol{list-style:decimal}
.man-sec ul{list-style:disc}

.callout{background:var(--surface-2);border-radius:10px;padding:12px 14px;margin:12px 0;
  font-size:calc(14px * var(--tscale));line-height:1.8}
.callout.danger{background:var(--ng-bg);color:var(--ng-ink)}

/* トリアージの色分け。色だけに意味を持たせず、必ず文字（赤・黄・緑・黒）も添える。 */
.tri{list-style:none;padding:0;display:grid;gap:8px;margin:12px 0}
.tri li{border-radius:10px;padding:11px 14px;color:#fff;font-size:calc(14px * var(--tscale));line-height:1.75}
.tri li b{display:block;margin-bottom:2px}
.tri .red{background:#C0341C}
.tri .yellow{background:#9A6206}
.tri .green{background:#3F6B2B}
.tri .black{background:#3A3F33}

/* SAKAMOTUBE!（社長指示 2026-09-22）。番組はサムネイルで選ぶものなので、
   村の配信（題名と日付で読む）とは並べ方を変える。狭い画面では1列。 */
.cardlist.tube{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cardlist.tube li{padding:0;overflow:hidden}
.cardlist.tube a{display:block;text-decoration:none;color:inherit}
.cardlist.tube img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-bottom:1px solid var(--line)}
.cardlist.tube h4{font-size:calc(13.5px * var(--tscale));line-height:1.5;padding:8px 10px 0}
.cardlist.tube p{font-size:calc(12px * var(--tscale));padding:2px 10px 10px;color:var(--ink-3)}
.tag.live{background:var(--fire-700);color:#fff}

/* SakamoTV（社長指示 2026-09-21）。見られない配信も一覧には出す
   ——「そこに何かある」を隠すと、村民になる理由が見えなくなる。
   ただし見た目で「いまは開いていない」と分かるようにする。 */
.cardlist.tv li.is-locked{background:var(--surface-2)}
.cardlist.tv li.is-locked h4{color:var(--ink-3)}

/* 当日の受付の答え（社長指示 2026-09-21）。
   受付は片手にスマホ、もう片手に名簿。3つの色を離れて見て分かる大きさで出す。
   色だけに意味を持たせず、必ず言葉（受付できます／申込がありません／…）も一緒に出す。 */
.uketsuke{display:grid;gap:4px;padding:16px 18px;border-radius:12px;margin:0 0 14px;color:#fff}
.uketsuke b{font-size:calc(20px * var(--tscale));font-weight:700;line-height:1.4}
.uketsuke .u-who{font-family:var(--font-data);font-size:calc(15px * var(--tscale));letter-spacing:.06em;opacity:.95}
.uketsuke .u-note{font-size:calc(13.5px * var(--tscale));line-height:1.75;opacity:.95}
.uketsuke.ok{background:#3F6B2B}
.uketsuke.warn{background:#9A6206}
.uketsuke.ng{background:var(--fire-600)}
/* 受け付けたことを、判定の見出しより先に伝える印（社長指示 2026-09-28）。
   帯の色はそのまま（緑＝申込あり／黄＝申込なし等）で、記録が残ったかだけを足す。 */
.uketsuke .u-done{justify-self:start;padding:2px 10px;border-radius:999px;
  background:rgba(255,255,255,.22);font-size:calc(12px * var(--tscale));font-weight:700;letter-spacing:.04em}
.uketsuke form{margin-top:8px}
.uketsuke .btn{background:#fff;color:var(--c-ink);box-shadow:none}

/* 行事の名簿から受付アプリへの入口（社長指示 2026-09-28）。
   受け付けた事実を残せるのは受付アプリだけなので、入口を1つにする。 */
.uketsuke-go{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:14px 16px;background:var(--surface-2);border-radius:12px}
.uketsuke-go p{flex:1 1 15em;margin:0;font-size:calc(13px * var(--tscale));line-height:1.75;color:var(--ink-2)}
.uketsuke-go .btn{flex:none}

/* QRの読み取り（受付アプリ）。カメラが無い端末では手で打つ欄だけになる。 */
.qrscan{margin:0 0 16px}
.qrscan .qr-open{width:100%}
.qr-stage{margin-top:12px;padding:12px;background:var(--surface-2);border-radius:12px;text-align:center}
.qr-video{width:100%;max-width:420px;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#000}
.qr-msg{margin:8px 0;font-size:calc(13px * var(--tscale));line-height:1.7;color:var(--ink-2)}
/* 手で打つ欄。カメラが使える端末では畳む（カードが読めないときだけ開く）。 */
.qr-hand{margin-top:10px}
.qr-hand>summary{cursor:pointer;padding:9px 2px;font-weight:700;
  font-size:calc(13.5px * var(--tscale));color:var(--ink-2)}

/* いま来ている方・申し込みリスト。名前／時刻／ボタンの3つだけ。 */
.uke-here li,.uke-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.uke-here .uke-n,.uke-list .uke-n{flex:1 1 10em;font-size:calc(15px * var(--tscale));font-weight:600}
.uke-sub{display:block;font-size:calc(12px * var(--tscale));font-weight:400;color:var(--ink-3)}
.uke-here .uke-t{font-family:var(--font-data);font-size:calc(14px * var(--tscale));color:var(--ink-2)}
.uke-list li.is-here{border-left:4px solid var(--key)}

/* 来訪者パス（社長指示 2026-09-21）。カードのすぐ下に、小さく添える。
   ここを大きくすると「村民登録」より目立ってしまう＝入口の順番が狂う。 */
.guest-pass{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:12px 0 4px;padding:12px 14px;background:var(--surface-2);border-radius:12px}
/* 文字を大きくすると、横並びのままでは本文が1行2〜3文字まで潰れる
   （社長指示 2026-09-22 の「もっと大きい」で発覚）。
   本文に必要な幅を割り、足りなければ縦積みに落とす。 */
.guest-pass p{font-size:calc(13px * var(--tscale));line-height:1.7;color:var(--ink-2);margin:0;
  min-width:min(100%, 15em);flex:1 1 15em}
.guest-pass p span{font-size:calc(11.5px * var(--tscale));color:var(--ink-3)}
.guest-pass form{flex:none}
/* 縦積みに落ちたときは、ボタンを幅いっぱいにして押しやすくする。 */
.guest-pass form:only-of-type{flex:1 1 auto}
.guest-pass form .btn{width:100%}
/* 来訪者番号はカードの中で、会員番号と同じ見え方にする（読む側の手順を変えない）。 */
.guest-no{font-family:var(--font-data);font-size:6cqw;letter-spacing:.14em;font-weight:500;
  color:var(--c-ink);margin:2cqw 0 0}

/* 出欠の取りまとめの ○△×。指で押せる大きさにする。 */
.markpick{position:relative;display:inline-flex}
.markpick input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.markpick span{display:grid;place-items:center;min-width:56px;min-height:44px;
  border:2px solid var(--key-fill);border-radius:10px;background:var(--surface);
  font-size:calc(20px * var(--tscale));font-weight:700;color:var(--key)}
.markpick input:checked + span{background:var(--key-fill);color:var(--on-key)}
.markpick input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}

/* 権限マトリクス（縦＝機能 × 横＝立場）。社長指示 2026-09-21。
   列が多いので横スクロールに逃がし、機能名の列だけ左に貼り付けて見失わないようにする。 */
/* 機能名の列は左に貼り付けて見失わないようにする。
   ただし position:sticky を横スクロールの中に置くと、Chromium ではページ全体が
   横にスクロールしてしまう（レスポンシブ規約①「横スクロールを出さない」に反する）。
   囲いに contain:paint を掛けて、はみ出しをその中で閉じる。 */
/* 権限マトリクス。横も縦も、見出しを貼り付けたまま読ませる（社長指示 2026-09-28
   「スクロールした時に、最上行は次の項目が現れるまで固定して」）。
   縦に貼り付けるには、その表自身が縦に転がる入れ物である必要があるので、
   高さに上限を付ける（付けないと、貼り付く相手＝スクロールする枠が無い）。
   まとまりごとに枠が分かれるので、次のまとまりに入れば見出しも入れ替わる。 */
.table-scroll.pinned{contain:paint;max-height:min(70vh, 620px);overflow:auto}
table.grid.matrix thead th{position:sticky;top:0;z-index:2}
/* 左上の角は、縦と横の両方に貼り付くので、いちばん手前に置く。 */
table.grid.matrix thead th:first-child{left:0;z-index:3}
table.grid.matrix th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--surface-2);
  white-space:normal;min-width:190px;font-weight:700}
table.grid.matrix td{text-align:center;padding:6px 10px}
table.grid.matrix thead th{white-space:normal;min-width:96px;vertical-align:bottom;font-size:calc(12px * var(--tscale))}
table.grid.matrix input{width:20px;height:20px;accent-color:var(--key-fill);cursor:pointer}
/* 読み上げにだけ渡す文字。目には出さないが、消すとチェックが何のものか分からなくなる。
   （カードの伏せ字 .hidden-val とは別物。あちらは「見えている灰色の帯」。） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.matrix-key{font-family:var(--font-data);font-size:calc(10.5px * var(--tscale));color:var(--ink-3);font-weight:400}

/* 読ませる表（特商法・手数料）。数字の表と違って折り返す＝スマホで横に溢れさせない。 */
table.grid.wrap th,table.grid.wrap td{white-space:normal}
table.grid.wrap th{width:38%}

.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat div{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:13px 15px}
.stat dt{font-size:calc(13px * var(--tscale));color:var(--ink-2)}
.stat dd{font-family:var(--font-data);font-size:calc(22px * var(--tscale));font-variant-numeric:tabular-nums;font-weight:500}

/* 店内に貼るチェックインのQR（社長指示 2026-09-25）。印刷して貼るものなので大きく出す。 */
.shopqr{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  padding:16px;text-align:center;margin:0 0 14px}
.shopqr-img{width:min(240px,70vw);margin:0 auto}
.shopqr-img svg{width:100%;height:auto;display:block}
.shopqr code{font-family:var(--font-data);font-size:calc(10.5px * var(--tscale));
  word-break:break-all;color:var(--ink-3)}

/* お店の「いまいます」「行きます」（社長指示 2026-09-25）。
   村の中で誰がどこにいるかが分かると、人が人に会いに行ける。 */
.visit-form{margin:0 0 12px}
.visit-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.visit-mine{background:var(--key-wash);border:1px solid var(--key);border-radius:12px;
  padding:13px 15px;margin:0 0 12px}
.visit-mine p{font-size:calc(13.5px * var(--tscale));line-height:1.75;margin:0 0 9px}
.visit-h{font-size:calc(12.5px * var(--tscale));font-weight:700;color:var(--ink-2);margin:12px 2px 6px}
.visits{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.visits li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;
  font-size:calc(13px * var(--tscale))}
.visits b{font-weight:700}
.visit-c{color:var(--ink-2);min-width:0}
.visits time{margin-left:auto;font-family:var(--font-data);font-size:calc(11.5px * var(--tscale));color:var(--ink-3)}

/* 瓦版の号に入っている記事の目次（社長指示 2026-09-24）。
   紙面を開く前に「何が載っているか」が分かるようにする。 */
.kawa-secs{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.kawa-secs li{font-size:calc(12.5px * var(--tscale));line-height:1.7;color:var(--ink-2)}
.kawa-secs b{color:var(--ink)}
.kawa-secs span{color:var(--ink-3)}

/* 月の枡（社長指示 2026-09-24）。枡は小さいので、中身は「印」だけにする。
   数字と印だけなら、スマホの幅でも7列が読める。 */
.calgrid{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  padding:10px 8px 8px;margin:0 0 12px}
.cal-h,.cal-r{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-w{text-align:center;font-size:calc(11.5px * var(--tscale));font-weight:700;
  color:var(--ink-3);padding:0 0 6px}
.cal-w.sun{color:var(--fire-600)}
.cal-w.sat{color:var(--moss-700)}

/* 枡は**縦に伸ばす**（社長指示 2026-09-28）。印を2×2で入れるので、
   日付の行＋印2段ぶんの高さを確保する。日付は**左上**に置く。 */
.cal-d{min-height:calc(58px * var(--tscale));border-top:1px solid var(--line);
  display:block;padding:3px 3px 4px}
.cal-d b{display:block;font-family:var(--font-data);font-size:calc(12.5px * var(--tscale));
  font-weight:500;color:var(--ink-2);line-height:1.25;text-align:left}
.cal-d.out b{color:var(--line-2)}
.cal-d.today b{background:var(--key-fill);color:var(--on-key);border-radius:999px;
  width:fit-content;min-width:calc(20px * var(--tscale));text-align:center;padding:1px 5px}
.cal-d a{display:block;text-decoration:none}
.cal-d a b{color:var(--link);font-weight:700}

/* 印は**2×2**（社長指示 2026-09-28）。種類ごとに1つだけ絵を置き、
   2件以上あるときだけ数を添える。枡は7列なので、390px では1枡が約46px。 */
.cal-icos{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:3px;
  justify-items:start}
.cal-i{display:inline-flex;align-items:center;gap:1px;color:var(--key-2)}
.cal-i.is-broadcast{color:var(--fire-700)}
.cal-i.is-fire{color:var(--fire-600)}
.cal-i.is-meeting{color:var(--ink-3)}
.cal-i.is-other{color:var(--ink-4)}
.cal-i svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.cal-i em{font-family:var(--font-data);font-style:normal;font-weight:700;line-height:1;
  font-size:min(10px, calc(9px * var(--tscale)))}

/* 印の見方。絵だけでは何の日か分からないので、カレンダーの下に並べる。 */
.cal-k{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:calc(11px * var(--tscale));color:var(--ink-3);margin:8px 2px 14px}
.cal-k span{display:inline-flex;align-items:center;gap:3px}

/* 月送り（社長指示 2026-09-26「カレンダーの下に。画面遷移なしでシームレスに」）。
   カレンダーの下に横並びで置く。押した先は fetch で中身だけ差し替えるが、
   JS が動かない端末でも素のリンクとして働く。 */
.calnav{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.calnav .btn{min-width:calc(92px * var(--tscale))}
/* 差し替えている間だけ、うっすら薄くして「いま入れ替わっている」を見せる。 */
[data-cal][aria-busy="true"]{opacity:.55;transition:opacity .12s}

/* 一覧に次月以降も並ぶので、月の変わり目に見出しを挟む（社長指示 2026-09-26）。 */
.ev .ev-m{display:block;background:none;border:0;border-radius:0;padding:14px 2px 2px}
.ev .ev-m h3{font-family:var(--font-mark);font-size:calc(15px * var(--tscale));font-weight:700;
  color:var(--ink-3);border-bottom:1px solid var(--line);padding-bottom:5px}
.ev .ev-m:first-child{padding-top:2px}

/* SakamoTV の番組一覧（社長指示 2026-09-24・階層化）。
   サムネと題名だけの札を並べる。押す先が1つなので、面ぜんぶを押せるようにする。 */
.progs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.progs > li > a{display:block;background:var(--surface);border:1px solid var(--line-2);
  border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink)}
.prog-th{display:block;aspect-ratio:16 / 9;background:var(--surface-2);position:relative}
.prog-th img{width:100%;height:100%;object-fit:cover;display:block}
.prog-noth{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mark);font-size:calc(14px * var(--tscale));color:var(--ink-3);letter-spacing:.08em}
.prog-t{display:block;padding:10px 12px 0;font-size:calc(14px * var(--tscale));font-weight:700;line-height:1.5}
.prog-s{display:block;padding:3px 12px 11px;font-size:calc(11.5px * var(--tscale));color:var(--ink-3)}

/* 番組の詳細。メインサムネは横いっぱいに1枚。 */
.prog-hero{border-radius:12px;overflow:hidden;background:var(--surface-2);margin:0 0 14px}
.prog-hero img{width:100%;height:auto;display:block}
.proginfo{display:grid;gap:8px;margin:0}
.proginfo div{display:grid;grid-template-columns:5.5em 1fr;gap:10px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:10px 13px}
.proginfo dt{font-size:calc(12.5px * var(--tscale));color:var(--ink-2);font-weight:700}
.proginfo dd{font-size:calc(13.5px * var(--tscale));line-height:1.75;margin:0}

/* 村民証の下の2つ（社長指示 2026-09-24）。マイページと通知。
   カードと同じ幅に収め、押しやすい高さ（44px以上）を確保する。 */
.cardacts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:11px 0 16px}
.cardact{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  font-size:calc(14px * var(--tscale));font-weight:700;color:var(--ink);text-decoration:none}
.cardact svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cardact-n{position:absolute;top:-6px;right:-4px;min-width:calc(20px * var(--tscale));
  height:calc(20px * var(--tscale));padding:0 calc(5px * var(--tscale));border-radius:999px;
  background:var(--fire-600);color:#fff;font-family:var(--font-data);
  font-size:calc(11px * var(--tscale));font-weight:700;line-height:calc(20px * var(--tscale));
  text-align:center}

/* 立場の印。消防団は赤、自主防災は橙、役場は金、お店はモス、区分は地の色。 */
.badge.dan{background:var(--fire-600);color:#fff}
.badge.jishubo{background:var(--mikan-700);color:#fff}
.badge.shop{background:var(--moss-700);color:#fff}
/* 坂本出身（村外）。村役場が承認した方の印（社長指示 2026-09-27）。
   色は増やさない（この画面の色数を増やさないのが弊社の決まり）。
   塗りではなく**線**で出す＝「つながりはあるが、いまは村の外」が形で分かる。 */
.badge.hometown{background:transparent;border:.28cqw solid var(--lc-c);color:var(--lc-ink)}
.fc-badge.hometown{background:transparent;border:1px solid rgba(255,255,255,.55)}

/* 通知の一覧。1件ずつが行き先を持つので、面ぜんぶを押せるようにする。 */
.notif{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.notif > li > a{display:block;background:var(--surface);border:1px solid var(--line-2);
  border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.notif > li.is-new > a{border-color:var(--key);background:var(--key-wash)}
.notif-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:calc(11.5px * var(--tscale));color:var(--ink-3)}
.notif-new{background:var(--fire-600);color:#fff;border-radius:999px;padding:1px 8px;font-weight:700}
.notif-t{font-size:calc(14.5px * var(--tscale));font-weight:700;line-height:1.6;margin:5px 0 0}
.notif-b{font-size:calc(12.5px * var(--tscale));color:var(--ink-2);line-height:1.7;margin:3px 0 0}

/* 名刺の画面（社長指示 2026-09-24）。刷り上がりの見え方を1枚だけ出す。
   実物と同じ 91×55mm の比で描き、紙のつもりで見てもらう。 */
.meishi-prev{margin:12px 0 0}
.meishi-card{aspect-ratio:91 / 55;max-width:340px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:6px;padding:14px 16px;
  display:flex;flex-direction:column;justify-content:center}
.mc-name{font-family:var(--font-mark);font-size:calc(19px * var(--tscale));
  font-weight:700;margin:0;letter-spacing:.06em}
.mc-kana{font-size:calc(11px * var(--tscale));color:var(--ink-3);margin:3px 0 0;letter-spacing:.1em}
.mc-vil{font-size:calc(12px * var(--tscale));color:var(--ink-2);margin:9px 0 0}
.mc-no{font-family:var(--font-data);font-size:calc(11px * var(--tscale));color:var(--ink-3);margin:2px 0 0}

/* 読めない記事の出し方（社長指示 2026-09-24）。冒頭だけ出して、続きの代わりに入口を置く。
   冒頭の終わりを白くぼかす＝「ここで切れている」を、線を引かずに示す。 */
.gate{margin:10px 0 0}
.gate-teaser{position:relative;max-height:8.5em;overflow:hidden;
  font-size:calc(14.5px * var(--tscale));line-height:1.9;color:var(--ink-2);margin:0}
.gate-teaser::after{content:'';position:absolute;inset:auto 0 0 0;height:3.2em;
  background:linear-gradient(to bottom,transparent,var(--ground))}
.gate-cta{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;
  padding:14px 15px;margin:10px 0 0}
.gate-t{font-size:calc(14px * var(--tscale));margin:0}
.gate-b{font-size:calc(13px * var(--tscale));color:var(--ink-2);line-height:1.75;margin:5px 0 0}
.gate-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:11px 0 0}

/* チェックイン（社長指示 2026-09-24）。坂本に住んでいない方にだけ出る箱。 */
.chkin{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  padding:14px 15px;margin:0 0 14px}
.chkin-t{font-size:calc(15px * var(--tscale));margin:0}
.chkin-b{font-size:calc(13px * var(--tscale));color:var(--ink-2);line-height:1.75;margin:6px 0 10px}

/* 発災モードの状況マップ（社長指示 2026-09-24・消防アプリの発災モードを本移植）。
   現場で手袋のまま押せるように、対応状況のボタンは大きく・3つ並べる。 */
.dstat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.dstat div{border-radius:12px;padding:9px 4px;text-align:center;color:#fff}
.dstat b{display:block;font-family:var(--font-data);font-size:calc(24px * var(--tscale));
  font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.dstat span{font-size:calc(12px * var(--tscale));font-weight:700}
.dstat-0{background:var(--fire-600)}      /* 未対応 */
.dstat-1{background:var(--mikan-700)}  /* 対応中 */
.dstat-2{background:var(--moss-700)}   /* 対応済 */

.dtabs{display:flex;gap:8px;margin:0 0 10px}
.dtab{flex:1;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  padding:11px 6px;font-size:calc(13px * var(--tscale));font-weight:700;color:var(--ink-2);cursor:pointer}
.dtab.on{background:var(--key-wash);border-color:var(--key);color:var(--moss-800)}

.dbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:9px 0 0}
.dbtn{width:100%;border-radius:10px;padding:13px 4px;font-size:calc(13px * var(--tscale));
  font-weight:700;background:var(--surface);cursor:pointer;line-height:1.2}
.dbtn-0{border:2px solid var(--fire-600);color:var(--fire-600)}
.dbtn-1{border:2px solid var(--mikan-700);color:var(--mikan-700)}
.dbtn-2{border:2px solid var(--moss-700);color:var(--moss-700)}
.dbtn-0.on{background:var(--fire-600);color:#fff}
.dbtn-1.on{background:var(--mikan-700);color:#fff}
.dbtn-2.on{background:var(--moss-700);color:#fff}
.dbtn[disabled]{cursor:default}

/* 必要な支援は「書かせず選ばせる」。絵と言葉を一緒に出して、迷わず押せるようにする。 */
.needs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.needs label{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--surface);border:2px solid var(--line-2);border-radius:10px;
  padding:9px 3px;font-size:calc(11.5px * var(--tscale));font-weight:600;cursor:pointer;text-align:center}
.needs label:has(input:checked){border-color:var(--fire-600);background:var(--warn-bg)}
.needs input{position:absolute;opacity:0;width:1px;height:1px}
.needs-i{font-size:calc(21px * var(--tscale));line-height:1.1}

/* 過去の記録を開いていることを、必ず画面に出す（いまの話と取り違えない）。 */
.pastbar{background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;
  padding:9px 13px;margin:0 0 14px;font-size:calc(13px * var(--tscale));color:var(--ink-2)}

/* 発災緊急モードの箱（社長指示 2026-09-24）。ホームのいちばん上と /emergency の見出し。
   点滅も動きも付けない——急いでいる人に動くものを見せない。読めることだけを優先する。 */
.emg{background:var(--fire-600);color:#fff;border-radius:14px;padding:16px 17px;margin:0 0 16px}
.emg-k{display:inline-block;background:rgba(255,255,255,.22);border-radius:999px;
  padding:3px 12px;font-size:calc(12px * var(--tscale));font-weight:700;letter-spacing:.06em;margin:0 0 8px}
.emg-t{font-size:calc(19px * var(--tscale));font-weight:700;line-height:1.45;margin:0}
.emg-m{font-size:calc(12.5px * var(--tscale));color:rgba(255,255,255,.82);margin:5px 0 0}
.emg-b{font-size:calc(14px * var(--tscale));line-height:1.75;margin:10px 0 0}
.emg-a{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0 0}
.emg-a .btn{background:#fff;color:var(--fire-700);border-color:#fff}
.emg-a .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}

/* ==========================================================================
   村の広場・村民台帳・プロフィール（社長指示 2026-09-28）
   囲みを増やさない：投稿は罫1本で区切るだけにして、枠線のカードを並べない
   （AIっぽい見た目の筆頭＝細枠カードの列を避ける／学習規範 _global）。
   色は無彩色ベース＋アクセント1色。押せるものだけニューモーフィズムで立てる。
   ========================================================================== */

/* ── 投稿（フィード）────────────────────────────────────
   社長指示 2026-09-28「村の広場の UI を Facebook のフィードのようにして」。
   1件＝1枚のカード。白い面に載せ、写真はカードの端まで伸ばす。
   下に「リアクションの数」→ 罫 → 「押すボタンの列」の順に積む。
   罫1本で区切る前の形（2026-09-28 午前）から、カードの並びに作り替えた。 */
/* 村の広場＝フィードの顔（社長指示 2026-09-29「FBのようなインターフェイス」）。
   ここだけは地を一段沈め、投稿は**画面いっぱいの白いカード**で流す。
   ほかの画面（紙の上に読みもの）とは役割が違う：ここは人の声が流れていく場所で、
   1枚ずつがはっきり分かれていることが読みやすさになる。 */
.feed{margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 6px;background:var(--paper-2)}
.feed .postnew{margin:10px 0}
/* 画面が狭いときは、カードを端まで伸ばす（FB と同じ見え方）。 */
@supports (width: 100%){
  .feed .vpostlist{gap:10px}
}
/* 書く欄の右端に「＋」を添える＝押すと開くことが読める。 */
.pn-go{flex:none;width:28px;height:28px;border-radius:50%;background:var(--key-wash);color:var(--key);
  display:grid;place-items:center;font-weight:700;font-size:calc(15px * var(--tscale))}
.postnew[open] .pn-go{transform:rotate(45deg)}

.vpostlist{margin:10px 0 0;display:grid;gap:12px}
.vpost{--pad:13px;background:var(--surface);border-radius:14px;padding:var(--pad);
  box-shadow:0 1px 2px rgba(42,40,32,.07), 0 4px 12px rgba(42,40,32,.05)}

.vpost-h{display:flex;align-items:center;gap:10px}
.vpost-face{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--surface-2)}
.vpost-face.is-empty{display:grid;place-items:center;font-weight:700;color:var(--ink-3);
  font-size:calc(17px * var(--tscale))}
.vpost-who{min-width:0;flex:1}
.vpost-who b{display:block;font-size:calc(14.5px * var(--tscale));line-height:1.4}
.vpost-who a{text-decoration:none;color:inherit}
/* 日時と公開範囲は名前の下に小さく1行（フィードの作法）。 */
.vpost-at{font-size:calc(12px * var(--tscale));color:var(--ink-3)}
.vpost-aud{font-size:calc(11.5px * var(--tscale));color:var(--ink-3);white-space:nowrap}
.vpost-aud::before{content:"・"}
.vpost-b{font-size:calc(15px * var(--tscale));line-height:1.8;margin:10px 0 0}

/* 写真・動画はカードの端まで（左右の余白を打ち消す）。
   1枚は大きく、複数は2列。縦長の写真で画面が埋まらないよう高さを抑える。 */
.vpost-m{margin:12px calc(var(--pad) * -1) 0;display:grid;gap:2px}
.vpost-m.is-many{grid-template-columns:1fr 1fr}
.vpost-m img,.vpost-m video{width:100%;height:auto;max-height:70vh;object-fit:cover;
  display:block;background:var(--surface-2)}
.vpost-m.is-many img,.vpost-m.is-many video{aspect-ratio:1;max-height:none}
.vpost-v{margin:0}
.vpost-hq{font-size:calc(12px * var(--tscale));color:var(--ink-3);margin:0;
  padding:6px var(--pad) 0}

/* リアクションの数（罫の上）。押す前でも「何人が押したか」が分かる。 */
.vpost-sum{display:flex;align-items:center;gap:6px;margin:11px 0 0;
  font-size:calc(12.5px * var(--tscale));color:var(--ink-3)}
.vpost-sum i{font-style:normal}

/* 押すボタンの列。4つを等分に並べ、押している間は沈める。
   隙間を空けて、浮き・沈みが読めるようにする（社長指摘 2026-09-28）。 */
.vpost-f{margin:9px 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
.react{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.react form{margin:0;display:flex}
.rbtn{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  border:0;cursor:pointer;background:var(--surface);color:var(--ink-2);border-radius:10px;
  padding:9px 4px;font-size:calc(12.5px * var(--tscale));font-family:inherit;line-height:1.3;
  box-shadow:3px 3px 7px var(--nm-dark),-3px -3px 7px var(--nm-light)}
.rbtn:active{box-shadow:inset 3px 3px 7px var(--nm-dark),inset -3px -3px 7px var(--nm-light)}
.rbtn.is-on{color:var(--accent);font-weight:700;
  box-shadow:inset 3px 3px 7px var(--nm-dark),inset -3px -3px 7px var(--nm-light)}
.rbtn b{font-size:calc(12px * var(--tscale))}
.rlabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 消す・伏せるは、押すボタンの列とは別の行に小さく置く（押し間違いを避ける）。 */
.vpost-own{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0 0}

/* 投稿する欄。畳んだ状態は一行だけ（開くまで流れを押し下げない）。
   フィードに合わせて、こちらも白いカードに載せる。 */
.postnew{margin:6px 0 4px;background:var(--surface);border-radius:14px;padding:11px 12px;
  box-shadow:0 1px 2px rgba(42,40,32,.07), 0 4px 12px rgba(42,40,32,.05)}
.postnew>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer}
.postnew>summary::-webkit-details-marker{display:none}
.postnew[open]>summary{padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--line)}
.pn-face{width:36px;height:36px;border-radius:50%;background:var(--surface-2);flex:0 0 auto;
  display:grid;place-items:center;font-weight:700;color:var(--ink-3);
  font-size:calc(15px * var(--tscale))}
/* 入力欄に見える丸い受け皿（押すと開く）。 */
.pn-ph{flex:1;min-width:0;color:var(--ink-3);font-size:calc(13.5px * var(--tscale));
  background:var(--surface-2);border-radius:999px;padding:9px 14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 中の折りたたみ（公開範囲）。既定のままでよい人に7行を見せない。 */
.subfold>summary{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  cursor:pointer;padding:9px 2px;font-size:calc(13.5px * var(--tscale));font-weight:700;
  border-top:1px solid var(--line)}
.subfold>summary span{font-weight:400;color:var(--ink-3);font-size:calc(12px * var(--tscale))}

/* 読み上げには渡すが画面には出さないラベル。 */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ── 村民台帳 ───────────────────────────────────────────── */
.rosterlist{list-style:none;padding:0;margin:8px 0 0}
.rosterlist li{border-top:1px solid var(--line)}
.rosterlist li:first-child{border-top:0}
.rosterlist a{display:flex;gap:11px;align-items:flex-start;padding:12px 2px;
  text-decoration:none;color:inherit}
.ro-face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--paper-2)}
.ro-face.is-empty{display:grid;place-items:center;font-weight:700;color:var(--ink-3);
  font-size:calc(17px * var(--tscale))}
.ro-body{min-width:0;flex:1}
.ro-body b{display:block;font-size:calc(15px * var(--tscale))}
.ro-bio{display:block;font-size:calc(12.5px * var(--tscale));color:var(--ink-3);margin:2px 0 0}
.ro-sk{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 0}
.ro-tag{font-size:calc(11.5px * var(--tscale));color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.ro-tag.more{color:var(--ink-3);background:transparent}
/* イベント参加中のバッジ（社長指示 2026-09-28）。台帳と、プロフィールの頭に付く。
   淡い面＋キーの文字（--key-fill は濃い面なので、文字色と組むと読めない）。 */
.ro-att{display:inline-flex;align-items:baseline;gap:6px;margin:4px 0 0;padding:2px 9px;
  border-radius:999px;background:var(--key-wash);color:var(--key);
  font-size:calc(11.5px * var(--tscale));font-weight:700}
.ro-att span{font-weight:400;color:var(--ink-2)}
.pf-badge.is-att{color:var(--key);background:var(--key-wash);border-color:var(--key-wash);font-weight:700}

/* いまイベントに参加中（本人の画面・社長指示 2026-09-28）。
   村民証のすぐ下に出す。受付の記録から導くので、終わりの時刻を過ぎれば自然に消える。
   濃い面に白文字＝「いま起きていること」として、周りのカードより一段前に出す。 */
.attending{margin:12px 0 4px;padding:14px 16px;border-radius:12px;
  background:var(--key-fill);color:var(--on-key)}
.attending p{margin:0;color:var(--on-key)}
.att-t{display:flex;align-items:center;gap:7px;font-size:calc(12.5px * var(--tscale));
  font-weight:700;opacity:.92}
.att-dot{width:9px;height:9px;border-radius:50%;background:var(--on-key);flex:none}
.att-e{margin-top:4px !important;font-size:calc(17px * var(--tscale));font-weight:700;line-height:1.45}
.att-m{margin-top:2px !important;font-size:calc(12.5px * var(--tscale));opacity:.88}
.att-b{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.att-b .btn{flex:1 1 auto}
/* 「参加を終える」は濃い面の上に出るので、白抜きにする（既定の ghost は読めない）。 */
.att-b .btn.ghost{background:transparent;color:var(--on-key);border:1px solid var(--on-key);
  box-shadow:none}
.att-b form{flex:1 1 auto;display:flex}
.att-b form .btn{width:100%}

/* 自分が載っていないときの案内。囲みは1つだけ（案内は目立たせる価値がある）。 */
.notebox{background:var(--paper-2);border-radius:12px;padding:13px 14px;margin:8px 0 14px}
.notebox p{font-size:calc(13.5px * var(--tscale));line-height:1.75;margin:0}
.nb-a{margin-top:10px !important}

/* ── プロフィール ─────────────────────────────────────────── */
.profile{display:flex;gap:13px;align-items:center;margin:8px 0 0}
.pf-face{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--paper-2)}
.pf-face.is-empty{display:grid;place-items:center;font-weight:700;color:var(--ink-3);
  font-size:calc(34px * var(--tscale))}
.pf-head{min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pf-name{font-size:calc(19px * var(--tscale));width:100%}
.pf-badge{font-size:calc(11.5px * var(--tscale));color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.pf-badge.dan,.pf-badge.yakuba{color:var(--accent);border-color:var(--accent-wash)}
.pf-bio{font-size:calc(15px * var(--tscale));line-height:1.85;margin:13px 0 0}

/* ── 資格・特技 ──────────────────────────────────────────── */
.skilllist{list-style:none;padding:0;margin:8px 0 0}
.skilllist li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;
  padding:9px 2px;border-top:1px solid var(--line)}
.skilllist li:first-child{border-top:0}
.skilllist b{font-size:calc(14.5px * var(--tscale))}
.skill-k{font-size:calc(11.5px * var(--tscale));color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;flex:0 0 auto}
.skill-n{font-size:calc(12.5px * var(--tscale));color:var(--ink-3)}
.skill-p{font-size:calc(11.5px * var(--tscale));margin-left:auto}
.skill-p.on{color:var(--accent)}
.skill-p.off{color:var(--ink-3)}

/* 資格・特技の編集。行ごとに区切る。 */
.skillrow{padding:12px 0;border-top:1px solid var(--line)}
.skillrow:first-child{border-top:0;padding-top:4px}

footer.foot{text-align:center;font-size:calc(13px * var(--tscale));color:var(--ink-3);padding:36px 0 8px}

/* 文字をいちばん大きくすると、4つ並べた名前が入らない。
   そのときだけ名前を畳んで、絵と数だけにする（押せる幅を優先する）。 */
:root[data-text="xl"] .rlabel{display:none}
:root[data-text="xl"] .ixlabel{display:none}

/* ==========================================================================
   メディアクエリはCSSの最後にまとめる（全社規約：途中に置くと後続に上書きされて効かない）
   ========================================================================== */
@media (min-width:560px){
  /* 幅に余裕が出たら、割合の輪といまの数字を横に並べる
     （社長指示 2026-09-28「2コラム（1:3くらいの比率）」）。 */
  .ranksplit{grid-template-columns:1fr 3fr;gap:16px;justify-items:stretch}
}

@media (min-width:800px){
  /* 広い画面ではボタンを広げすぎない（4つが間延びして押しにくくなる）。 */
  .react{grid-template-columns:repeat(4,minmax(0,160px));justify-content:start}

  /* パソコンでは画面いっぱいにせず、スマホの画面を模した縦長の枠に出す。
     挙動（押すと開く・もう一度押すと閉じる）はスマホと同じ。 */
  .fullcard{padding:24px}
  .fullcard-inner{width:min(420px,92vw);height:min(860px,92vh);border-radius:26px;
    box-shadow:0 24px 60px rgba(0,0,0,.42)}
  .shell{--gutter:24px;max-width:720px}
  .nav{max-width:720px;margin-inline:auto;border-inline:1px solid var(--line);border-radius:14px 14px 0 0}
}
@media (min-width:1080px){
  .shell{max-width:840px}
  .nav{max-width:840px}
}
@media (max-width:560px){
  .shell{--gutter:14px}
  /* 狭い画面でも文字は縮めない（高齢者が使う前提） */
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ----- ホーム画面への追加の案内（社長指示 2026-09-22）----- */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.steps>li{display:flex;align-items:flex-start;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.steps>li>div:last-child{min-width:0;flex:1 1 auto}
.steps b{display:block;font-size:calc(15px * var(--tscale));line-height:1.6}
.step-fig{flex:none;width:96px}
.figure{width:100%;height:auto;display:block}
.figure .f-screen{fill:var(--surface-2);stroke:var(--line-2);stroke-width:2}
.figure .f-page{fill:var(--key-wash)}
.figure .f-menu{fill:var(--surface);stroke:var(--line-2);stroke-width:1.5}
.figure .f-bar{fill:var(--key-wash)}
.figure .f-pick{fill:var(--accent-wash);stroke:var(--accent);stroke-width:1.5}
.figure .f-text{fill:var(--line-2)}
.figure .f-dots{fill:var(--ink-2)}
.figure .f-cta{fill:var(--accent-fill)}
.figure .f-tiles{fill:var(--line-2)}
.figure .f-ours{fill:var(--key-fill)}
.figure .f-ring{fill:none;stroke:var(--accent);stroke-width:2.5}
.figure .f-hot{fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* 細い画面では図を上に置き、文が潰れないようにする */
@media (max-width:420px){
  .steps>li{gap:12px}
  .step-fig{width:80px}
}

/* ホーム画面に置くことの案内。下のメニューに隠れないよう、本文の最後に置く。 */
.addhome{background:var(--key-wash);border:1px solid var(--key-edge);border-radius:12px;
  padding:12px 14px;margin:18px 0 0}
.addhome p{margin:0;font-size:calc(13.5px * var(--tscale));line-height:1.7}
.addhome-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px!important}

/* 地点の場所の決め方（現在地・住所・地図）。社長指示 2026-09-22 */
.findrow{display:flex;flex-wrap:wrap;gap:8px}
/* 緯度と経度を横に並べる行。既定の入力欄の幅（約20文字）のままだと、
   2つ並べた時点で390pxの画面からはみ出す。必ず縮められるようにしておく。 */
.coordrow{display:flex;gap:8px;margin-top:7px}
.coordrow input{flex:1 1 0;min-width:0;width:100%}
.findrow input{flex:1 1 12em;min-width:0}
.hits{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.hits .hit{width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:8px;padding:9px 11px;font-size:calc(14px * var(--tscale));cursor:pointer;color:var(--ink)}
.hits .hit:hover{background:var(--key-wash)}
.hits .hit:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pop-hint{color:var(--ink-3);font-size:calc(12px * var(--tscale))}

/* 名刺の案内（社長指示 2026-09-22）。等倍で刷る注意は、読み飛ばされると全部無駄になる。 */
.warnbox{background:var(--accent-wash);border:1px solid var(--accent);border-radius:10px;
  padding:11px 13px;margin:10px 0}
.warnbox p{margin:0;font-size:calc(13px * var(--tscale));line-height:1.7;color:var(--ink)}
.meishi-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}

/* ログインするときに打つもの。1文字ずつ見分けられるよう等幅で大きく出す
   （社長指示 2026-09-24。打ち間違いがいちばん多いところ）。 */
.loginid{font-family:var(--font-data);font-size:calc(19px * var(--tscale));font-weight:700;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;
  padding:10px 12px;margin:0;word-break:break-all;letter-spacing:.02em}

/* 村民帳の「いま打つもの」。長いメールアドレスが列を押し広げないよう、折り返す。 */
.loginnow{margin:0 0 4px;font-size:calc(11px * var(--tscale));color:var(--ink-2);
  max-width:190px;word-break:break-all;line-height:1.5}
.loginnow span{color:var(--ink-3)}

/* ----- ホームの入口タイル（社長指示 2026-09-24）-----
   下のメニューに置けない行き先を、ファーストビューに出す。
   学習規範に従い、**枠線のカードを並べない**（細枠カードの整列と要素ごとの
   カラー帯は、AIが作った画面の典型）。囲まず、余白と整列で読ませる。
   絵が上・文字が下の縦並び。フラット・直線基調。色はキーの緑ひとつ。 */
/* マス目の間は**空ける**（社長指摘 2026-09-28「ボタンの隙間がないので立体が分かりにくい」）。
   2px しか空いていないと、隣どうしの影が重なって、浮いているのか沈んでいるのか読めない。
   影が落ちるぶん（8px）より広く取る。 */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 4px}
.tile{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 2px 8px;border-radius:10px;text-decoration:none;color:var(--ink);
  -webkit-tap-highlight-color:transparent}
.tile:hover{background:var(--surface-2)}
.tile:active{background:var(--key-wash)}
.tile:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.tile-i{position:relative;display:flex}
.tile-i svg{width:27px;height:27px;fill:none;stroke:var(--key-edge);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.tile-t{font-size:calc(11px * var(--tscale));font-weight:600;line-height:1.3;
  text-align:center;letter-spacing:-.01em}
/* まだ開いていない入口（社長指示 2026-09-28 のメニュー再編）。
   押せないことが色の濃さで分かるようにし、下に小さく「準備中」と書く。 */
.tile.is-soon{color:var(--ink-4);cursor:default}
.tile.is-soon svg{stroke:var(--ink-4)}
.tile.is-soon small{font-size:calc(9.5px * var(--tscale));font-weight:400}
/* 数の印は「いま動いているもの」だけに付ける（全部に付けると選べなくなる）。 */
/* 丸ごと文字の設定に連動させる。数字だけ固定にすると、文字を大きくした方に
   小さい数字が残って読めない（丸の大きさも一緒に動かす）。 */
.tile-n{position:absolute;top:-5px;right:calc(-8px * var(--tscale));
  min-width:calc(16px * var(--tscale));height:calc(16px * var(--tscale));
  padding:0 calc(4px * var(--tscale));
  border-radius:999px;background:var(--accent-fill);color:var(--on-accent);
  font-size:calc(10px * var(--tscale));font-weight:700;
  line-height:calc(16px * var(--tscale));text-align:center}
/* 文字を大きくすると4列では入らなくなるので、そのときだけ2段に割る。 */
@media (max-width:360px){ .tiles{grid-template-columns:repeat(4,1fr)} }
:root[data-text="xl"] .tile-t{font-size:calc(10px * var(--tscale))}

/* プランの3つ（名前・金額・準備数）は、狭い画面では縦に積む
   （3列のままだと、どれが何の欄か読めない幅になる）。 */
@media (max-width:520px){
  .planrow{grid-template-columns:1fr}
}

/* 村の広場のフィードは、狭い画面で端まで伸ばす（社長指示 2026-09-29）。
   メディアクエリは CSS の最後にまとめて置く（全社規約）。 */
@media (max-width: 560px){
  .feed{padding-left:0;padding-right:0}
  .feed .postnew,.feed .vpost{border-radius:0}
  .feed .vpost{--pad:14px}
}

/* ===== 検証環境（stg）の帯（社長指示 2026-09-29）=================================
   本番と見分けがつかないテスト環境は事故る。だから2つの印を出す：
     ① 画面のいちばん上に、スクロールで流れる説明の帯（何をしても本番に出ないと書く）
     ② 上端に貼りついたままの斜縞の線（帯が流れていっても消えない目印）
   ②は fixed だが pointer-events:none なので、押せるものの邪魔をしない。
   オープニング（z-index 90）より前に出す＝起動直後から検証だと分かる。
   本番ではこのクラスが付かないので、1行も効かない。 */
.stgbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#6B4A00;color:#FFF6E0;
  font-size:calc(12px * var(--tscale));line-height:1.5;
  padding:calc(9px + env(safe-area-inset-top,0px)) 14px 9px;
}
.stgbar-t{flex:none;font-weight:700;letter-spacing:.08em;
  background:#FFD166;color:#3A2700;border-radius:999px;padding:2px 11px}
.stgbar-b{flex:1 1 auto;min-width:0}
.stgbar-d{color:#E8CF9A;font-style:normal;white-space:nowrap}
.stgbar-go{flex:none;color:#FFF6E0;font-weight:700;text-decoration:underline;white-space:nowrap}
.stgbar-go:focus-visible{outline:2px solid #FFD166;outline-offset:2px}

/* ② 上端に残る目印。斜縞にするのは、色だけだと本番の帯（災害＝赤）と
   見間違える余地を残すため（形でも違えておく）。 */
body.is-stg::before{
  content:"";position:fixed;left:0;right:0;top:0;height:4px;z-index:95;pointer-events:none;
  background:repeating-linear-gradient(135deg,#6B4A00 0 8px,#FFD166 8px 16px);
}

/* 検証の帯は、狭い画面では説明を折り返して2行にする（社長指示 2026-09-29）。
   メディアクエリは CSS の最後にまとめて置く（全社規約）。 */
@media (max-width: 560px){
  .stgbar{gap:6px;padding-left:12px;padding-right:12px}
  /* 1行目＝［検証環境］…［本番へ］、2行目＝説明文（日付はその末尾）。 */
  .stgbar-b{flex:1 1 100%;order:3}
  .stgbar-go{margin-left:auto}
}

/* ===== 有料会員の月数バッジ（社長指示 2026-10-01）===============================
   「大きめに金色のバッジの上に数字が入るイメージで、何ヶ月目かという月表示にする」

   ・村民歴（村民になって◯日）とは別の欄。置き換えではなく並べて出す。
   ・金は**メダルの色**なので、暗所でも金のままにする（役割トークンを参照しない）。
     カード本体が「現物のカードだから暗所でも見た目を変えない」のと同じ理由。
   ・平らに塗る（影・艶・グラデを足さない＝デザイン学習の規範「フラット／影抑制」）。
     メダルらしさは二重の輪で出す。
   ・大きさは1つの変数（--pb-size）で決め、中の文字はそこから割り出す。
     置く場所ごとに --pb-size だけ差し替えれば、比率は崩れない。 */
.paidbadge{
  --pb-size:calc(54px * var(--tscale));
  --medal-face:#F6E4A8; --medal-edge:#B08A14; --medal-ring:#E2C871; --medal-ink:#5A4209;
  flex:none;display:inline-grid;place-content:center;justify-items:center;
  width:var(--pb-size);height:var(--pb-size);border-radius:50%;
  background:var(--medal-face);border:calc(var(--pb-size) * .055) solid var(--medal-edge);
  color:var(--medal-ink);line-height:1;position:relative;overflow:hidden;
}
/* 内側の輪。メダル・勲章の形はここで出す（影を使わずに立体感に代える）。 */
.paidbadge::before{
  content:"";position:absolute;inset:calc(var(--pb-size) * .085);border-radius:50%;
  border:calc(var(--pb-size) * .028) solid var(--medal-ring);
}
.paidbadge-n{
  font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:calc(var(--pb-size) * .44);letter-spacing:.01em;
}
.paidbadge-u{font-style:normal;font-size:calc(var(--pb-size) * .17);letter-spacing:.04em;
  margin-top:calc(var(--pb-size) * .02)}

/* 村民証の中は、カード幅に連れる単位にする（文字の大きさ設定で村民証は変えない規範）。 */
/* 15cqw まで大きくすると、下の欄が1行に収まらず「さかもと村」だけが2行目に
   落ちた（実機幅で測って気づいた）。13.5cqw が、大きさと1行の両立する上限。 */
.card .paidbadge{--pb-size:13.5cqw;border-width:.75cqw}
.card .paidbadge::before{inset:1.15cqw;border-width:.38cqw}

/* 村民証の下の欄は、バッジが入ると3つでは収まらないので折り返しを許す。
   折り返しても下端が切れないのは、カードの高さが比の固定でなく最低値だから。 */
.card-foot{flex-wrap:wrap;row-gap:1.8cqw}
.card-foot .paidbadge{margin-right:auto}

/* マイページの頭（写真・名前の行）に並べる。
   ここだけメダルの下に「有料会員」と小さく添える——意味を1か所で覚えてもらえば、
   村民証の上の金色のメダルも同じものだと分かる（カードは場所が狭いので文字は足さない）。 */
.myhead .paidbadge{--pb-size:calc(56px * var(--tscale))}
.paidmedal{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.paidmedal-l{font-size:calc(10.5px * var(--tscale));color:var(--ink-3);letter-spacing:.04em;white-space:nowrap}

/* プランごとの内訳（社長指示 2026-10-01）。
   小さい横長の村民証はゴールドバッジ（合計の月数）だけ。
   **タップして開く全画面の村民証**でだけ、各区分で何日だったかを開く。 */
.fq-medal{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.paidbreak{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.paidbreak > div{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.paidbreak dt{font-size:calc(11.5px * var(--tscale));color:rgba(255,255,255,.7);letter-spacing:.04em}
.paidbreak dd{font-family:var(--font-data);font-size:calc(13px * var(--tscale));
  font-variant-numeric:tabular-nums;color:#fff}
.paidbreak .is-total dt,.paidbreak .is-total dd{font-weight:700;color:#fff}

/* 全画面の村民証に写真を戻す（社長指示 2026-10-01「写真がなくなってる」）。
   拡大表示は横長カードをやめてこの縦の面に一本化したので、
   身分証として要る「顔・名前・番号・QR」がここに全部そろっている必要がある。 */
.fq-who{display:flex;align-items:center;gap:12px}
.fq-face{flex:none;width:calc(62px * var(--tscale));height:calc(62px * var(--tscale));border-radius:50%;
  overflow:hidden;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.34);
  display:grid;place-items:center;color:rgba(255,255,255,.72)}
.fq-face img{width:100%;height:100%;object-fit:cover}
.fq-face svg{width:56%;height:56%}
.fq-whob{display:flex;flex-direction:column;gap:2px;min-width:0}
.fq-kana{font-size:calc(11px * var(--tscale));color:rgba(255,255,255,.7);letter-spacing:.08em}

/* ── 村マップの地点1件（社長指示 2026-10-19）────────────────────────
   地図の吹き出しの「詳しく見る」から、そして今後は QR から直に開かれる画面。
   新しい見た目を作らず、行事1件（.longread / .stat / .rowacts）と
   お店の写真（.shop-main / .shop-subs）と同じ組み方に合わせてある
   ——画面ごとに作りが違うと、1つ直したときに他とずれる。
   学習済みの規範どおり、カードを細い枠線で囲んで並べることはしない
   （硬い・AIっぽい見え方の正体がそれ）。区切りは余白と地色で作る。 */
.pop-more{display:inline-block;margin-top:6px;font-weight:700}
/* 「詳しく見る」と「この地点を直す」が両方出るときは、縦に2行で並べる
   （横に並べると、狭い吹き出しの中で押し間違える）。 */
.pop-more + .pop-edit{display:block;margin-top:4px}

.spot-ic{margin-right:6px}
.spotkind{display:flex;align-items:center;font-size:calc(12.5px * var(--tscale));
  color:var(--ink-2);margin:2px 0 0}
/* 住所と座標。囲みカードにせず、横罫1本で行を分ける（学習済みの規範）。
   .stat（数字用・22px・1列120px〜）を流用すると、狭い画面で住所が1行3文字になり、
   座標が数字の途中で折り返す。実機で確かめて作り直したもの（2026-10-19）。 */
.spotfacts{margin-top:12px;border-top:1px solid var(--line-2)}
.spotfacts div{display:flex;gap:12px;align-items:baseline;
  padding:9px 2px;border-bottom:1px solid var(--line-2)}
.spotfacts dt{flex:none;width:7.5em;font-size:calc(12.5px * var(--tscale));color:var(--ink-2)}
.spotfacts dd{margin:0;font-size:calc(14.5px * var(--tscale));line-height:1.7;min-width:0}
/* 座標は数字の途中で割らない。入り切らないときだけ、横にずらして読む。 */
.spotfacts code{font-size:calc(13px * var(--tscale));font-variant-numeric:tabular-nums;
  white-space:nowrap;display:block;overflow-x:auto}

.spot-main{border-radius:12px;overflow:hidden;margin:12px 0 0;aspect-ratio:3/2;background:var(--surface-2)}
.spot-main img{width:100%;height:100%;object-fit:cover}
.spot-subs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 0}
.spot-subs li{border-radius:8px;overflow:hidden;aspect-ratio:1;background:var(--surface-2)}
.spot-subs img{width:100%;height:100%;object-fit:cover}

/* 地点の地図は、確かめるための1枚なので低くてよい（下の戻るボタンを画面に残す）。 */
.spotmap{margin-top:14px}

/* リンクを送る。リンクの文字は JS が動かない端末の最後の手なので、必ず読める形で出す。 */
.sharerow{margin-top:10px}
.sharelink{margin-top:8px;word-break:break-all}
.sharelink code{font-size:calc(12px * var(--tscale))}
.sharesaid{display:block;margin-top:4px;color:var(--moss-800);font-weight:700}

/* ここから下はメディアクエリ（全社規約：CSS の最後にまとめて置く）。
   途中に置くと、後ろの同詳細度のルールに上書きされて効かない。 */
@media (max-width:560px){
  /* スマホでは写真を3列に落とす。4列のままだと1枚が親指より小さくなる。 */
  .spot-subs{grid-template-columns:repeat(3,1fr)}
  /* 住所の見出しと中身を上下に積む。横に並べたままだと、狭い画面で住所が
     1行3文字まで潰れる（実機で確認）。 */
  .spotfacts div{display:block}
  .spotfacts dt{width:auto;margin-bottom:2px}
}

/* ── 売上の表（社長指示 2026-10-19）────────────────────────────────
   役場の売上管理と団体の収支で同じものを使う。 */
.saletable{width:100%;margin-top:8px}
.saletable .num{font-family:var(--font-data);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.saletable form{margin:0}

/* 団体の構成員の立場を変える1行（選択と押すボタンを横に並べる）。 */
.orgrole{display:flex;gap:8px;align-items:center;margin:4px 0}
.orgrole select{flex:1;min-width:0}

/* 団体の権限表。升目は指で押せる大きさにする。 */
.matrix th[scope=row]{text-align:left;font-weight:600}
.matrix td{text-align:center}
.matrix input[type=checkbox]{width:20px;height:20px}
.mx-no{color:var(--ink-4)}

/* ここから下はメディアクエリ（全社規約：CSS の最後にまとめて置く）。 */
@media (max-width:560px){
  /* 狭い画面では表をやめて、1件ずつ積む。
     6列のまま狭めると「支払い済み」「返金する」が1文字ずつ縦に割れる
     （実機で確認。全社規約の「文字を縦に割らない」に当たる）。 */
  .saletable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .saletable, .saletable tbody, .saletable tr, .saletable td{display:block;width:auto}
  .saletable tr{padding:10px 2px;border-bottom:1px solid var(--line-2)}
  .saletable td{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:3px 0;border:0}
  .saletable td::before{content:attr(data-label);flex:none;
    font-size:calc(12.5px * var(--tscale));color:var(--ink-2)}
  .saletable .num{text-align:right}

  /* 権限表は列が3つなので表のまま。升目だけ詰め、機能の名前を折り返して
     表そのものを画面に収める（横スクロールを出さない＝全社規約）。 */
  .matrix{table-layout:fixed;width:100%}
  .matrix th,.matrix td{padding:8px 2px}
  .matrix th[scope=row]{width:auto;word-break:auto-phrase;overflow-wrap:anywhere;
    font-size:calc(12.5px * var(--tscale));line-height:1.5}
  .matrix thead th:not(:first-child),.matrix td:not(:first-child){width:3.4em}
  .matrix thead th{font-size:calc(11.5px * var(--tscale))}
}

/* ── 管理する画面（役場・団体・消防）のレイアウト（社長指示 2026-10-19）────
   > パソコンで閲覧時は、もっといろんなものが管理しやすいようにレイアウトを調整したい
   > スマホで見るときは、基本的な設定のみにして、それ以外はパソコンで見るように促す

   スマホでの見え方は変えない（村民が使う画面と同じ幅・同じ組み方のまま）。
   広げるのはパソコンのときだけで、下のメディアクエリで効かせている。 */
.pcnote{display:none}

/* ここから下はメディアクエリ（全社規約：CSS の最後にまとめて置く）。 */
@media (max-width:899px){
  /* スマホ・タブレットのときだけ、パソコンを勧める一言を出す。 */
  .shell.admin .pcnote{display:block;
    background:var(--warn-bg);color:var(--warn-ink);
    border-radius:10px;padding:10px 12px;margin:0 0 12px;
    font-size:calc(12.5px * var(--tscale));line-height:1.7}
}

@media (min-width:900px){
  /* パソコンでは管理の画面を広げる。村民の画面（560px）は広げない。 */
  .shell.admin{max-width:1180px}

  /* 一覧を2列に。項目が多い画面ほど、縦に延々と伸びるのが一番つらい。 */
  .shell.admin .cardlist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .shell.admin .cardlist li{margin:0}

  /* 入力の欄は横に2つ並べる（行き来が減る）。 */
  .shell.admin .form{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}
  .shell.admin .form > .field{margin-bottom:12px}
  /* 幅を取るもの・まとまりの区切りは1行ぶん使う。 */
  .shell.admin .form > .field:has(textarea),
  .shell.admin .form > .tgl,
  .shell.admin .form > p,
  .shell.admin .form > .mapane,
  .shell.admin .form > .coordrow{grid-column:1 / -1}

  /* 表は広い画面でこそ読める。数字は右に揃えて、桁を比べられるようにする。 */
  .shell.admin .grid{width:100%}
  .shell.admin .saletable td,.shell.admin .saletable th{padding:9px 10px}

  /* 絞り込みの列は1行に収める（折り返すと、どれを選んだか見失う）。 */
  .shell.admin .findrow{flex-wrap:nowrap}
}

/* ── 予約に紐づいた連絡（社長指示 2026-10-19）────────────────────
   村民同士のDMではない。相手は予約が決まっているので、
   相手を選ぶ画面も、遮断する画面も無い。 */
.talklist li{border-left:3px solid var(--line-2);padding-left:10px}
.talklist li.is-mine{border-left-color:var(--key)}
.talklist .ixc-body{white-space:pre-wrap}

/* ── 宿の画面（社長指示 2026-10-19「宿の画面を作って、予約できるところまで」）──── */

/* 空きを調べるところ。日程を変えて何度も押す所なので、まとまりを地から浮かせる。 */
.askrow{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px}

/* 空いていた、の知らせ。金額がこの画面でいちばん大事な数字。 */
.yadofree{background:var(--key-wash);border-radius:12px;padding:12px 14px;margin:12px 0}
.yadofree p{font-size:calc(14px * var(--tscale));color:var(--ink)}
.yadoamount{display:inline-block;margin-left:8px;font-weight:900;color:var(--key);
  font-size:calc(19px * var(--tscale))}

/* 取り消しの決まり。読まずに同意させないよう、本文と同じ大きさで出す。 */
.cancelbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin:14px 0}
.cancelbox-t{font-weight:700;color:var(--ink);font-size:calc(14px * var(--tscale));margin-bottom:8px}
.canceltable{width:100%;border-collapse:collapse;font-size:calc(13px * var(--tscale))}
.canceltable th,.canceltable td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left}
.canceltable thead th{color:var(--ink-3);font-weight:500;font-size:calc(12px * var(--tscale))}
.canceltable tbody th{font-weight:500;color:var(--ink)}
.canceltable td{color:var(--ink);font-weight:700}
.canceltable tr:last-child th,.canceltable tr:last-child td{border-bottom:0}
.canceltable input{width:100%;min-width:0;padding:7px 8px;border:1px solid var(--line-2);
  border-radius:8px;background:var(--ground)}

/* 予約番号。受付で読み上げるためのものなので、**この画面の主役として大きく出す**。 */
.donebox{background:var(--key-wash);border-radius:14px;padding:18px 16px;text-align:center;margin-bottom:14px}
.donebox-l{font-size:calc(12px * var(--tscale));color:var(--ink-2);font-weight:700;letter-spacing:.08em}
.donecode{font-family:'DM Mono',ui-monospace,monospace;font-weight:500;color:var(--key);
  font-size:calc(34px * var(--tscale));letter-spacing:.08em;line-height:1.25;margin:6px 0 10px;
  /* 番号は折り返さない。途中で折れると、読み上げるときに桁を見失う。 */
  white-space:nowrap}
.donebox-n{font-size:calc(13px * var(--tscale));color:var(--ink-2);line-height:1.8}

/* 予約番号で開く入口。打ち込む欄なので、幅をとって打ちやすくする。 */
.codefind input{font-family:'DM Mono',ui-monospace,monospace;letter-spacing:.12em;
  font-size:calc(17px * var(--tscale))}

/* 全社レスポンシブ規約（2026-08-29）：メディアクエリは CSS の最後にまとめる。
   途中に置くと、後続の同詳細度ルールに上書きされて効かない。 */
@media (max-width:560px){
  /* 予約番号は折り返さない代わりに、狭い画面では文字を詰める
     （折り返すと、受付で読み上げるときに桁を見失う）。 */
  .donecode{font-size:calc(27px * var(--tscale));letter-spacing:.05em}
  .donebox{padding:16px 10px}
  /* 空きを調べる器は、狭い画面では内側の余白を削って入力欄に幅を回す。 */
  .askrow{padding:12px 10px 10px}
  .cancelbox{padding:10px 11px}
  .canceltable th,.canceltable td{padding:6px 5px}
}

/* ── SAKAMOTUBE! の1本ごとの設定（社長指示 2026-10-20）────────────────
   役場の画面。チェックを先に、題をあとに置く＝何本に入れたかが縦に読める。 */
.tubeset li{display:grid;gap:4px}
.tubeset .chk{margin:0}
.tubeset h4{font-size:calc(13px * var(--tscale));font-weight:500;color:var(--ink-2)}

/* 見られない回のカード（村民の画面）。絵と題は出すが、入れないことが分かる濃さにする。 */
.cardlist.tube li.is-locked img{opacity:.55}
.cardlist.tube li.is-locked h4{color:var(--ink-2)}

/* 地点に付ける写真（社長指示 2026-11-11）。
   「＋写真を追加」から カメラ／ライブラリ／ファイル の3つに分かれる。
   指で押す的なので、狭い画面では縦に落として押し間違いを減らす。 */
.ppick-btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.ppick-btns .btn{flex:1 1 auto;min-width:9.5em}
@media (max-width:420px){ .ppick-btns .btn{flex:1 1 100%} }
.ppick-sink.is-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  clip-path:inset(50%);overflow:hidden}
/* 選んだ写真を小さく並べる（.thumbs を流用）。外すボタンは form ではなく素のボタン。 */
.ppick .thumbs{margin:8px 0 0}
.ppick-del{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;
  line-height:1;font-size:calc(14px * var(--tscale));padding:0}
.ppick-del:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ppick [data-ppick-status]{margin:8px 0 0}
/* 吹き出しの中の写真（社長指示 2026-11-11）。横に並べ、吹き出しを広げない。 */
.pop-shots{display:flex;gap:4px;margin:6px 0 2px}
.pop-shots img{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
/* 一覧の行に出す地点の写真（社長指示 2026-11-11）。
   一覧は .cardlist の中なので、.cardlist li の札の見た目（枠・余白・背景）が
   写真の1枚ずつにも降りてくる。写真に札は要らないので、ここで外す。 */
.shots{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.cardlist .shots li,.shots li{background:none;border:0;border-radius:0;padding:0;margin:0}
.shots img{width:76px;height:76px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.shots a{display:block;line-height:0}

/* 地図の下のパネル（社長指示 2026-11-12）。
   タップした地点のことと、新規追加の入口を、地図のすぐ下の同じ場所に置く。
   吹き出しに入れないのは、地図を覆うと写真も報告の履歴も置けないため。 */
.mappanel{margin:10px 0 2px}
.mappanel-add{margin:0 0 8px}
.mappanel-add .btn{width:100%}
.mappanel-box{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  padding:12px 14px 14px}
.mappanel-box .sec-row{margin-top:0}
.mappanel-box .form{margin-top:10px}
.mp-h{font-size:calc(14px * var(--tscale));font-weight:700;color:var(--ink-2);margin:12px 0 6px}
.mp-edit{margin:8px 0 0;font-size:calc(13px * var(--tscale))}
/* 報告は札にせず、1本の線で区切って積む（地点の中の出来事なので、札にすると入れ子が深い）。 */
.mp-reports li{background:none;border:0;border-radius:0;padding:10px 0;margin:0;
  border-bottom:1px solid var(--line)}
.mp-reports li:last-child{border-bottom:0}
.mp-reports p{font-size:calc(14px * var(--tscale));color:var(--ink-2);line-height:1.7;margin:0}
.mp-who{margin-top:4px!important;color:var(--ink-3);font-size:calc(12px * var(--tscale))!important}
.mp-none{color:var(--ink-3);font-size:calc(13px * var(--tscale))}

/* 地図の下のパネルの押し口（社長指示 2026-11-13）。
   「写真を追加」「コメント」は押したときだけ欄が開く＝ふだんは詳細がすっと読める。 */
.mp-acts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.mp-acts .btn{flex:1 1 auto;min-width:9em}
@media (max-width:420px){ .mp-acts .btn{flex:1 1 100%} }
/* 吹き出しのジャンル（名称の下に小さく）。 */
.pop-genre{display:block;color:var(--ink-3);font-size:calc(12px * var(--tscale));margin-top:2px}

/* 地図のすぐ下の道具立て（社長指示 2026-11-14）。
   左に「＋ 新規追加」、右に「大きな地図を表示」。地図から指を離さずに届く所にまとめる。 */
.maptools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 2px}
.maptools .mapbig-open{margin-left:auto}

/* 説明の「i」とライトボックス（社長指示 2026-11-14）。
   入力の画面は欄が多い。欄ごとに小さい説明が付くと、入れるものより読むものが多くなる。
   ふだんは1文字だけにして、要るときに開く。 */
.info{display:inline-flex;align-items:center}
.info-btn{width:18px;height:18px;flex:none;margin-left:6px;padding:0;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);cursor:pointer;
  font-size:calc(11px * var(--tscale));font-weight:700;line-height:1;font-family:var(--font-data)}
.info-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.info-body{font-size:calc(13px * var(--tscale));color:var(--ink-2);line-height:1.7}
.infobox{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:20px}
.infobox-card{background:var(--surface);border-radius:14px;padding:18px 18px 14px;
  max-width:420px;width:100%;max-height:80vh;overflow:auto}
.infobox-body{font-size:calc(14px * var(--tscale));color:var(--ink);line-height:1.8}
.infobox-body .info-t{display:block;font-weight:700;color:var(--key);margin-bottom:6px}
.infobox-close{margin-top:14px;width:100%}

/* 管理の入力欄はスリムに（社長指示 2026-11-14）。
   役場・消防の画面は欄が多い。1欄ずつの高さと余白を詰めて、1画面に収まる数を増やす。 */
.form.slim{gap:10px;padding:12px}
.form.slim .field{gap:3px}
.form.slim .field input,.form.slim .field select,.form.slim .field textarea{padding:9px 11px}
.form.slim .field label{font-size:calc(13px * var(--tscale))}
/* 緯度・経度は横並び（社長指示 2026-11-14）。狭い画面でも2列は保ち、ボタンだけ下へ落とす。 */
.findrow.latlng{display:flex;gap:6px;flex-wrap:wrap}
.findrow.latlng input{flex:1 1 7em;min-width:0}
.findrow.latlng .btn{flex:0 0 auto}
@media (max-width:420px){ .findrow.latlng .btn{flex:1 1 calc(50% - 3px)} }

/* ── 予定（カレンダー）──────────────────────────────────────────
   社長指示 2026-11-14：
   > 消防の予定管理、坂本の予定管理は、GoogleカレンダーのUIのように入力したい。
   > カレンダー（日・3日・週・月）表示＞該当の日をタップして予定追加。
   > ドラッグで移動や時間の伸縮ができる。
   指で押す画面で使うので、札は小さくしすぎない（最小 22px）。
   メディアクエリはこのファイルの最後にまとめてあるので、ここには書かない。 */
.cal{margin:0 0 18px}
.cal-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 2px 10px}
.cal-title{font-size:calc(17px * var(--tscale));font-weight:700;min-width:7.5em}
.cal-nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  font-size:calc(18px * var(--tscale));line-height:1;cursor:pointer;color:var(--ink)}
.cal-nav:hover{background:var(--moss-50)}
.cal-views{display:flex;gap:0;margin-left:auto;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.cal-views button{border:0;background:var(--card);color:var(--ink-2);padding:7px 12px;font-size:calc(13px * var(--tscale));cursor:pointer}
.cal-views button+button{border-left:1px solid var(--line)}
.cal-views button.is-on{background:var(--moss-500);color:#fff;font-weight:700}

.calt{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.calt-head{display:flex;border-bottom:1px solid var(--line);background:var(--moss-50)}
.calt-head .calt-gut{flex:0 0 46px}
.calt-head b{flex:1 1 0;min-width:0;text-align:center;padding:7px 2px;font-size:calc(12px * var(--tscale));font-weight:600;color:var(--ink-2)}
.calt-head b.is-today{color:var(--moss-700)}
.calt-head b em{display:block;font-style:normal;font-size:calc(16px * var(--tscale));font-weight:700;color:var(--ink)}
.calt-head b.is-today em{color:#fff;background:var(--moss-500);border-radius:999px;width:1.7em;margin:1px auto 0}
.calt-allday{display:flex;border-bottom:1px solid var(--line);min-height:26px}
.calt-allday .calt-gut{flex:0 0 46px;font-size:calc(11px * var(--tscale));color:var(--ink-3);padding:4px 4px 0;text-align:right}
.calt-allday .calt-ad{flex:1 1 0;min-width:0;border-left:1px solid var(--line-2);padding:3px}
.calt-body{display:flex;max-height:62vh;overflow:auto;position:relative}
.calt-gutter{flex:0 0 46px;position:relative}
.calt-gutter span{position:absolute;right:5px;font-size:calc(11px * var(--tscale));color:var(--ink-3);transform:translateY(-50%)}
.calt-cols{flex:1 1 0;display:flex;position:relative}
.calt-col{flex:1 1 0;min-width:0;position:relative;border-left:1px solid var(--line-2)}
.calt-col.is-today{background:rgba(124,160,96,.06)}
.calt-h{position:absolute;left:0;right:0;border-top:1px solid var(--line-2)}
.calt-h.half{border-top-style:dotted}
.calt-now{position:absolute;left:0;right:0;height:2px;background:#dc2626;z-index:4;pointer-events:none}

.calev{position:absolute;left:2px;right:2px;min-height:22px;border-radius:7px;padding:3px 6px;
  background:var(--card);border-left:4px solid var(--moss-500);box-shadow:0 1px 3px rgba(0,0,0,.14);
  font-size:calc(12px * var(--tscale));line-height:1.3;overflow:hidden;cursor:grab;z-index:3;touch-action:none}
.calev.is-fixed{cursor:pointer;opacity:.92;border-left-style:double}
.calev.is-drag{opacity:.85;cursor:grabbing;z-index:9}
.calev b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calev span{display:block;color:var(--ink-3);font-size:calc(11px * var(--tscale))}
.calev-h{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize}
.calev-ad{display:block;border-radius:6px;padding:2px 6px;margin:0 0 2px;font-size:calc(12px * var(--tscale));
  background:var(--moss-50);border-left:4px solid var(--moss-500);cursor:grab;touch-action:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.calm{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.calm-head{display:grid;grid-template-columns:repeat(7,1fr);background:var(--moss-50);border-bottom:1px solid var(--line)}
.calm-head b{text-align:center;padding:6px 0;font-size:calc(12px * var(--tscale));font-weight:600;color:var(--ink-2)}
.calm-row{display:grid;grid-template-columns:repeat(7,1fr)}
.calm-row+.calm-row{border-top:1px solid var(--line-2)}
.calm-cell{min-height:86px;border-left:1px solid var(--line-2);padding:3px;cursor:pointer}
.calm-cell:first-child{border-left:0}
.calm-cell.is-out{background:var(--moss-50);opacity:.72}
.calm-cell.is-today .calm-d{background:var(--moss-500);color:#fff;border-radius:999px}
.calm-d{display:inline-block;min-width:1.7em;text-align:center;font-size:calc(12px * var(--tscale));font-weight:700;color:var(--ink-2)}
.calm-chip{display:block;border-radius:5px;padding:1px 5px;margin:2px 0 0;font-size:calc(11px * var(--tscale));line-height:1.5;
  background:var(--moss-50);border-left:3px solid var(--moss-500);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:grab;touch-action:none}
.calm-more{display:block;font-size:calc(11px * var(--tscale));color:var(--ink-3);padding:1px 5px}

/* 予定の欄（開く紙）。説明は「i」に畳んであるので、欄だけが並ぶ。 */
.sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(23,28,20,.46);padding:0}
.sheet[hidden]{display:none}
.sheet-card{width:100%;max-width:560px;max-height:92vh;overflow:auto;background:var(--card);
  border-radius:16px 16px 0 0;padding:16px 16px 22px;box-shadow:0 -8px 30px rgba(0,0,0,.22)}
.sheet-row{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.sheet-row h3{font-size:calc(16px * var(--tscale));margin:0;flex:1}
.sheet-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  font-size:calc(16px * var(--tscale));line-height:1;cursor:pointer;color:var(--ink-2)}
.sheet-meta{font-size:calc(11px * var(--tscale));color:var(--ink-3);margin:8px 0 0}
.sheet-btns{display:flex;gap:8px;align-items:center;margin:12px 0 0}
.sheet-btns .btn{flex:1}
.sheet-del{margin-left:auto;background:none;border:0;color:#b91c1c;font-size:calc(13px * var(--tscale));cursor:pointer;
  text-decoration:underline;padding:6px}
.whenrow{display:flex;gap:6px;flex-wrap:wrap}
.whenrow input[type=date]{flex:1 1 9.5em}
.whenrow input[type=time]{flex:0 1 7em}
@media (max-width:560px){
  .cal-title{font-size:calc(15px * var(--tscale));min-width:6.5em}
  .cal-views button{padding:7px 9px;font-size:calc(12px * var(--tscale))}
  .calt-head .calt-gut,.calt-allday .calt-gut,.calt-gutter{flex-basis:38px}
  .calt-body{max-height:58vh}
  .calm-cell{min-height:64px}
  .calev{font-size:calc(11px * var(--tscale));padding:2px 4px}
}
@media (max-width:420px){
  .cal-bar{gap:6px}
  .cal-views{margin-left:0;width:100%}
  .cal-views button{flex:1}
  .sheet-card{border-radius:14px 14px 0 0;padding:14px 12px 20px}
}
/* 畳んだ説明（社長指示 2026-11-14）。「i」を押すとライトボックスで出る。
   元の文は消さずに置いておく＝押された瞬間に、いまの文を写せる。 */
.hint.is-folded{display:none}
.info-btn.is-loose{margin:0 0 8px}