/* 施設側の見た目の調整層（2026-08-13・第2AIレビュー）
   ⚠ このファイルは各ページの CSS より「あと」に読み込むこと。
      base.css に書いていたら、あとから読まれる home2.css / record.css に負けていた（実測で確認）。
      束ね版では build_bundle.py の PAGES の追加CSSの最後に置いている。

   実測：ホーム第一画面に 面15種・角丸9種・影6種・文字18段・赤8箇所（意味5つ）。
   赤の規律（配信中と中止だけ）が実装で壊れていて、未読バッジ・「本日」・すぐ呼ぶまで赤かった。
   赤が飾り色として学習されると、本当に中止が出た日に見落とされる。
*/

/* --- 赤は「配信中」と「中止・変更」だけ --- */
.ob-n{background:#26406e}
.opsbell.has-new{border-color:#dfe4ec;background:#eef1f7;color:#26406e}
.sn-live{background:#fbf3e2;color:#8a6414;border:1px solid #ecd9ac;font-size:13px}
.sc-ic{background:#26406e}
.k-live{background:#26406e;font-size:13px}
.prep.today{border-left-color:var(--gold)}
.prep-cnt.live{background:#26406e}
/* .opsbar.urgent と .oi-tag.t-chg と .hero .flag だけ赤のまま */

/* --- 金のグラデーションと色付きグローをやめる（ベタ1色） --- */
.btn-gold{background:var(--goldb)}
.btn-gold:hover{filter:brightness(1.06);transform:none}

/* --- 影は「浮いているもの」（モーダル・ドロワー・メニュー）だけ --- */
.card,.grid,.box,.footbar,.form,.nextbar,.hero,.preview,.offhero,.todaybar,.panel,
.steps li.now,.oa-card,.oah{box-shadow:none}

/* --- バッジ・タグの下限を13pxに（実測：home2 39箇所・record 69箇所が13px未満だった） --- */
.pill,.sn-live,.k-live,.k-auto,.k-fac,.ob-n,.oi-new,.oi-tag,.oi-keep,
.am-plan,.am-role,.freq,.fopt,.fauto,.tag-auto,.tag-in,.tag-opt,.tag-tpl,
.st,.st-fampub,.nlist .st,.blist .st,.rlist .st,.mini,.chint,.pk-n,.cap-c,
.fb-st,.ubtn,.hd-meta,.sn-t em,.dw-list .cat,.oi-d,.oi-from{font-size:13px}

/* --- タップ領域の下限44px（実測 .mini 33px / .kv-edit 28px / .oba-x 34px） --- */
.mini{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center}
.kv-edit{min-height:44px;padding:0 16px;display:inline-flex;align-items:center}
.oba-x,.opsm-close,.dw-close,.um-close,.pv-close,.acct-btn .ac{min-width:44px;min-height:44px}
.opsbell{width:46px;height:46px}
.foot-links a{display:inline-block;padding:8px 0}
.ynb,.chip{min-height:44px;display:inline-flex;align-items:center}

/* --- 見出しの前のアイコンタイルを外す（面と色が減る） --- */
.card .ic,.prep-h .ic{display:none}
/* 脈打つドットは、実際にライブ中のときだけ */
.hero .flag .b{animation:none}
/* hero の金のインナーリングとポスターの影 */
.hero::after{display:none}
.hero .poster{box-shadow:none}
/* 決めた3色の外にあった紫 */
.ic-help{background:#eef1f7;color:#26406e}

/* --- 待機中でも「これがボタン」と分かる形にする --- */
.hero .enter.waiting{background:rgba(255,255,255,.10);color:#ffffff;
  border:2px solid var(--goldb);box-shadow:none}
.hero .enter.waiting .enter-lb{color:#ffffff}
.hero .enter.waiting svg{opacity:1;color:var(--goldb)}
.hero .enter-note{font-size:14px;color:rgba(255,255,255,.86)}

/* --- 一覧：完了した行を目立たせない。状態は文字で読ませる --- */
.nlist .st-fampub,.blist .st-fampub,.rlist .st-fampub,.st.st-fampub{
  background:#eef1f7;color:#5b6577;border:1px solid #dfe4ec}

/* --- スマホでヘッダーが横にはみ出していた（実測 390px で scrollWidth 516px） --- */
@media (max-width:640px){
  .topbar{height:auto;padding:10px 12px}
  .tb-inner{flex-wrap:wrap;gap:10px}
  .topbar .logo{flex:none}
  .topbar .sp{display:none}
  .tel{order:3;flex:1 1 100%;justify-content:center}
  .acct-wrap{margin-left:auto}
  .acct-btn{min-height:46px}
}

/* 実測して残った13px未満のうち、状態・操作にかかわるものを引き上げる。
   写真タイルの通し番号（.pk-n / .cap-n）は「読む文字」ではないので対象外。 */
.kv-edit,.st-todo,.st-done,.st-draft,.eyebrow,.gtag,.cd-lb,.hero .flag,
.tel .tlb,.acct-btn .an-user,.sn-h,.tb-flag,.oh-lb,.pstat,
.foot-links a,.ju-lb,.js-txt span{font-size:13px}
.st-todo small,.st-done small,.st-draft small{font-size:12px}

/* --- 押した先のカードを見つけやすくする（2026-08-13） ---
   「職員アカウントの管理」のように、タブの中ほどにあるカードへ飛ぶとき。
   ヘッダーの下に隠れないよう scroll-margin を取り、2秒だけ枠を光らせる。 */
.card,.box{scroll-margin-top:96px}
.jump-hl{animation:jumpHl 2.4s ease}
@keyframes jumpHl{
  0%,55%{box-shadow:0 0 0 3px rgba(193,145,58,.5)}
  100%{box-shadow:0 0 0 3px rgba(193,145,58,0)}
}

/* --- 「まだ作っていません」のお知らせ（2026-08-13） ---
   運営側（console.css）にしか無く、施設側では data-stub を付けても何も起きなかった。
   ＝押しても無反応のボタンになる。施設側にも同じものを置く。HTML は build/gen_common.py。 */
.nr-modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px}
.nr-modal[hidden]{display:none}
.nr-backdrop{position:absolute;inset:0;background:rgba(23,36,63,.42)}
.nr-card{position:relative;background:#ffffff;border-radius:8px;padding:26px 28px 22px;
  width:min(420px,100%);text-align:center;box-shadow:0 26px 60px -18px rgba(31,39,64,.5);
  max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
.nr-ic{width:48px;height:48px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;
  background:#fbf3e2;color:#8a6414}
.nr-ic svg{width:24px;height:24px}
.nr-tag{display:inline-block;font-size:13px;font-weight:700;color:#8a6414;background:#fbf3e2;
  border-radius:4px;padding:4px 12px}
.nr-card h3{font-size:18px;font-weight:700;color:var(--ink);margin:10px 0 8px;line-height:1.5}
.nr-card p{font-size:14px;color:#3a4157;line-height:1.85}
.nr-acts{margin-top:16px}

/* 家族の公開状態は、一覧（home2）と同じ言い方・同じ形にそろえる（2026-08-13） */
.fv .fst small{display:block;font-size:12px;font-weight:600;opacity:.85;margin-top:1px}

.oi-f .oi-ok{margin-left:0}

/* --- 配信当日の2画面：スマートフォンで「← ホーム」を消さない（2026-08-14） ---
   setting.css は 640px 以下で .join-back を display:none にしていた。
   当日の画面から戻る唯一の導線なので、消さずに折り返す。
   （実測：390px で 398px はみ出していた） */
@media (max-width:640px){
  .join-brandbar{height:auto;min-height:60px;flex-wrap:wrap;row-gap:8px;padding:10px 12px}
  .join-back{display:inline-flex;align-items:center;min-height:44px;order:3;margin-left:auto}
  /* 3つとも出す。1つだけ隠すと CSS の連番がずれて「3」が「1」に見える */
  .join-steps{flex:1 1 100%;order:4;margin:0;justify-content:center;gap:6px;font-size:12px}
  .join-steps li:not(.cur){display:flex}
  .join-steps li::after{margin-left:6px}
}


/* 7枚目を押したときの手応え。選ばないので、押しても何も起きないように見える */
@keyframes ls-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.pk.shake{animation:ls-shake .2s 2}
/* 6枚に達したら、まだ選んでいない写真は「これ以上は選べない」と分かる見た目にする */
.pick.full .pk:not(.on){opacity:.55}
.pick.full .pk:not(.on):hover{border-color:#e6e0d3;cursor:not-allowed}

/* ============================================================
   2026-08-16 施設側のデザイン調整（運営コンソールの型を移植）
   ユーザー選択：A群6件／B1 説明文の形／B3 カードの器／C群3件
   出発点は「運営が良く見えるのは色ではなく、器と説明文の型が1つに決まっているから」。
   ⚠ ここは調整層。各ページのCSSより「あと」に読まれる前提で書いている。
   ============================================================ */

/* --- A2 配信当日の2画面で、お知らせの帯だけ幅が縮んで中央に浮いていた ---
   .join-wrap は align-items:center の縦 flex なので、.opsbar（display:flex）が
   内容ぶんの幅になっていた。実測：setting は 帯538 / 電話・主ボタン600 / 本体940 の3種、
   live は 帯538 / 困ったとき640 / 本体900 / 外枠940 の4種が縦に並んでいた。
   .prep-list（3つの確認）も同じ理由で 892px と、帯より 4px 内側に入っていた。 */
.join-wrap>.opsbar,.join-wrap>.prep-list{align-self:stretch;width:auto}

/* --- A4 同じ状態が5〜6箇所で別々に定義されていた ---
   「済」は .st-ok / .st-pub / .us.ok / .pstat.ok の4系統あり、.st-pub だけ地が #e9f4ee だった。
   運営（console.css:44-50）は .tag の6色だけで全画面をまかなっている。 */
.nlist .st-ok,.blist .st-ok,.rlist .st-ok,.st.st-pub,.pstat.ok{
  background:#e4f1ea;color:#1f6f49}
.nlist .st-todo,.blist .st-wait,.rlist .st-todo,.st.st-wait{
  background:#fbf3e2;color:#8a6414}

/* --- A5 金のグラデーションの取りこぼし ---
   上の .btn-gold だけベタにしていたので、同じ画面に「金＝ベタ」と「金＝グラデ」が並んでいた。
   そろえるのは押せるもの（ボタン）だけ。番号の丸やロゴの箱まで触ると影響が広がる。 */
/* 2026-10-01：運営側と同じ明るいほうの金（--goldb）に揃えた。押したときは --gold-h */
.c-btn,.mini.gold,.hero .enter,.join-btn,.oa-btn{background:var(--goldb)}
.btn-gold:hover,.c-btn:not(.line):hover,.mini.gold:hover,.hero .enter:hover,.join-btn:hover,.oa-btn:hover,.oi-ok:hover{background:var(--gold-h);filter:none;transform:none}
.c-btn:hover,.mini.gold:hover,.hero .enter:hover,.join-btn:hover,.oa-btn:hover{
  filter:brightness(1.06);transform:none}

/* --- B1 画面の説明の形を1種類にする ---
   運営は6画面すべてが .page-lead（console.css:263）の1本だけ＝「金の縦線が付いていたら説明」。
   施設側は「見出しの右にインライン」「地の文3行」「薄い注記」の3種類が混在していた。
   ⚠ .h span は5タブでは画面の説明、ホームだけ日付。日付は .h-date で外してある。 */
.h{display:block}
.h span:not(.h-date){display:block;margin:10px 0 0;font-size:14px;font-weight:500;
  color:#4a5162;line-height:1.85}
.h .h-date{font-size:14px;font-weight:500;color:var(--muted);margin-left:12px}
.guide{font-size:14px;color:#4a5162;line-height:1.85;margin:0 0 18px;max-width:78ch}
/* ワイヤーフレームの注記は、いちばん薄いまま。ただし #a4aab8 はアイボリー地で約2.0:1 しかなく、
   setting.css の #9a9a9a を直したとき（F10）と同じ理由で読めない。 */
.wf-note{color:#7b8494}

/* --- B3 カードの器 ---
   施設側は .grid が gap:1px＋ベージュ地でカードを罫線でつなぎ、その外側をさらに
   .panel.dash .grid の枠（border＋radius:16px）で囲っていた。
   実測：ホーム1枚 / 感動レク3枚 / レク3枚 / ご家族へ1枚 / ご契約・設定5枚。
   ＝1枚しか無いタブでは「1枚を囲うためだけの二重の器」になっていた。
   運営（admin.css:44）と同じ「独立したカードを余白で並べる」に揃える。 */
/* ⚠ box-shadow も必ずここで消すこと。上の 22行目「影は浮いているものだけ」は
   `.grid`（詳細度 0,1,0）なので、home2.css の `.panel.dash .grid`（0,3,0）に負ける。
   枠と背景だけ消して影を残すと、**中身の見えない四角い器がそのまま影を落とす**。
   カードとカードの継ぎ目や、器の左右の端に、影の切れ端だけが出る
   （2026-08-17 に施設側の全ページで発生していた）。 */
.panel.dash .grid{border:none;border-radius:0;overflow:visible;background:none;gap:16px;
  box-shadow:none}
.panel.dash .grid>.card{background:#ffffff;border:1px solid var(--line);border-radius:8px}

/* ============================================================
   2026-09-25 施設側9画面の作り直し（説明文を外す・画面の並びの組み直し）
   先方「機能には一定の満足。見た目や分かりづらさが不評」を受けて。
   ⚠ 施設側の上書きはここ（tune.css 末尾）にまとめる。配色・部品の形は変えない。
   ============================================================ */

/* --- 左メニュー：各項目の説明文（em）を外したので、バッジに中身を添える（「1」→「未記録 1」） --- */

/* --- ヘッダーのお知らせ：絵と数字だけでは何の件数か分からないので「お知らせ」を添える --- */
.opsbell{width:auto;min-width:46px;padding:0 13px;display:inline-flex;align-items:center;
  justify-content:center;gap:6px}
.ob-lb{font-size:13px;font-weight:700;white-space:nowrap}
@media (max-width:640px){.opsbell{width:42px;min-width:0;padding:0}.ob-lb{display:none}}
.join-brandbar .ob-lb{display:none}
.join-brandbar .opsbell{width:46px;padding:0}

/* --- 本日の配信：開場はボタンにせず時刻の表示に。押すのは「準備を確認して参加する」1つ --- */
.hero .cd-open{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.16);
  font-size:14px;font-weight:700;color:#ffffff}
.hero .cd-open.open{color:var(--goldb)}
.hero .enter{min-height:58px;font-size:16px;padding:0 16px;color:#2a1e05}
.hero .enter .enter-lb{color:#2a1e05}

/* --- ホームの一覧：390幅で名前が1文字ずつ縦に並んでいた（.nlist li が1行に全部詰めていた）。
       640px以下は折り返し、1段目＝日付と名前、2段目＝状態とボタン --- */
@media (max-width:640px){
  .nlist li{flex-wrap:wrap;row-gap:8px}
  .nlist .pth{display:none}
  .nlist .n{flex:1 1 calc(100% - 52px)}
  .nlist .n + *{margin-left:52px}
  .nlist li>.mini{margin-left:auto}
}

/* --- ログイン後の画面末尾：大きな紺のフッターをやめて1行に --- */
.app-foot{margin-left:264px;padding:14px 28px 26px;display:flex;flex-wrap:wrap;align-items:center;
  gap:0 18px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.app-foot a{color:#5b6577;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.app-foot a:hover{text-decoration:underline}
.app-foot span{margin-left:auto}
@media (max-width:900px){.app-foot{margin-left:0;padding:10px 16px 22px}.app-foot span{margin-left:0;flex-basis:100%}}

/* --- 記録（record / record-view）：自動で入る欄を1ブロックにまとめる --- */
.autobox{margin:18px 0 8px;background:#f6f8fc;border:1px solid #dfe4ec;border-radius:8px;padding:2px 18px 4px}
.autobox .ab-h{font-size:13px;font-weight:700;color:#5b6577;padding:12px 0 8px;border-bottom:1px solid #dfe4ec}
.autobox .frow{padding:10px 0;border-bottom:1px solid #eef1f7}
.autobox .frow:last-child{border-bottom:none}
.autobox .frow>.fl{padding-top:8px;color:#6b7284}
.autobox .fv .ro{padding-top:7px}
.autobox .fv .kv-edit{margin-top:0;margin-left:auto}
.form .autobox + .frow{border-top:none}
@media (max-width:640px){.autobox{padding:2px 12px 4px}}

/* 写真の欄（record）：追加は記録の1欄。ボタンは金にしない（金は「記録を保存する」1つ） */
.fv .drop .dacts .mini{background:#ffffff}

/* --- 保存された記録：ご家族へのレポートは1行の要約。未公開のあいだは「ご家族へ公開する」が主ボタン --- */
.famsum{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:18px 0 4px;
  padding:12px 16px;background:#fffaf0;border:1px solid #ecd9ac;border-radius:8px}
.famsum .fs-l{font-size:14px;font-weight:700;color:#8a6414}
.famsum .fs-v{flex:1;min-width:180px;font-size:14px;color:#3a4157;display:inline-flex;align-items:center;
  gap:10px;flex-wrap:wrap}
.famsum .fst{font-size:13px;font-weight:700;color:#8a6414;background:#fbf3e2;border:1px solid #ecd9ac;
  padding:4px 12px;border-radius:4px}
.famsum .btn-gold{min-height:46px;padding:0 22px;font-size:14px;font-weight:700;border-radius:8px}
.famsum .btn-line{min-height:46px;padding:0 18px;font-size:14px;font-weight:700;border-radius:8px}
.famsum .fs-note{flex:1 1 100%;font-size:13px;color:#6b6047;line-height:1.7}
@media (max-width:640px){.famsum .btn-gold,.famsum .btn-line{flex:1 1 100%}}

/* --- ご家族へのレポート（family）：写真のひとことを写真カードの中（写真の真下）へ --- */
.pick-st{flex-basis:100%;font-size:14px;font-weight:700;color:#3a4157;margin:4px 0 2px}
.phcards{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex-basis:100%}
.phcards .phc{flex-direction:column;align-items:stretch;gap:8px;padding:8px;flex-wrap:nowrap}
.phcards .phc .pk{width:100%}
.phcards .cap-in{order:0;width:auto;flex:none;gap:6px}
.phcards .cap-t{padding:0 10px;font-size:14px}
.phcards .cap-hero{margin-left:0;min-height:44px}
.phcards .phc.off{background:#faf7f0}
.phcards .phc.off .cap-in,.phcards .phc.off .cap-hero{display:none}
@media (max-width:900px){.phcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.phcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* 390幅で、画面下の操作バーのボタンが縦書きになっていた（説明文と2つのボタンを1行に詰めていた） */
@media (max-width:640px){
  .footbar{padding:14px 16px}
  .footbar .fb-note{flex-basis:100%}
  .footbar .sp{display:none}
  .footbar .btn-line,.footbar .btn-gold{flex:1 1 100%;min-width:0;white-space:nowrap}
}

/* --- 配信中（live）：終演前の「実施の記録をつける」は枠線のボタン。つながっているように見える緑の点はやめる --- */
.join-btn.line{background:#ffffff;color:#8a6414;border:2px solid var(--gold);box-shadow:none}
.join-btn.line .sub{color:#8a6414}
.join-btn.line:hover{background:#fffaf0;filter:none}
.oa-flag .b{background:#a9b0c0;box-shadow:none;animation:none}

/* --- レクの予定（rec-plan）：カレンダーのレクを押すと、くわしい内容のモーダルが開く（2026-10-05）。
   以前の小さなメニュー（.chip-menu）と小さい × はやめた --- */
.chip.c-kando{cursor:default}
.chip.c-plan,.chip.c-done{cursor:pointer}
.chip.c-plan:focus-visible,.chip.c-done:focus-visible{outline:2px solid var(--goldb);outline-offset:1px}
.idet-when{font-size:13px;font-weight:700;color:#26406e;margin-bottom:8px}
.idet-acts .danger{color:#a63a22}

/* --- ホーム（感動レク・レク・ご契約）：説明文を外したあとの余白の調整 --- */
.panel.dash .card>details.more{margin-top:12px}
/* 印刷して使う：「中身の出どころ」の列を外したので、1回ごとの用紙の行の導線（.plink）に形を当て直す
   （以前は .plist の中でだけ定義していて、.perlist ではブラウザ既定のボタンの見た目になっていた） */
.perlist .plink{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:auto;
  border:1px solid #c7cfe0;background:#ffffff;border-radius:6px;padding:0 14px;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:700;color:#26406e;text-align:left}
.perlist .plink::after{content:"›";font-size:16px;line-height:1;color:#8fa3c4}
.perlist .plink:hover{background:#eef1f7}
/* family：ひとことの欄が細くならないよう、写真カードは3列（900px以下は2列）。文字数は欄の下に小さく */
.phcards{grid-template-columns:repeat(3,minmax(0,1fr))}
.phcards .cap-in{flex-direction:column;align-items:stretch;gap:3px}
.phcards .cap-t{width:100%}
.phcards .cap-c{align-self:flex-end}
@media (max-width:900px){.phcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* family の操作バー：record-view.css の .fb-note（箱の形）が当たって、説明が囲み枠に見えていた */
.footbar .fb-note{margin-top:0;background:none;border:none;padding:0;font-size:13px;color:#5b6577}
/* 一覧の行が狭いカード（ダイジェスト動画など半分幅）で、名前が1文字ずつ縦に並んでいた。
   名前に最低幅を持たせ、入りきらない状態・ボタンは次の段へ送る */
.nlist li{flex-wrap:wrap}
.nlist .n{min-width:7em}
/* 1024幅の本日の配信で「特別グループ」の札が途中で折れていた */
.gtag{white-space:nowrap}
/* family：写真カードは1200px以下で2列（ひとことの欄が細くならないように）。
   操作バーは説明を1段目、ボタンを2段目の右に */
@media (max-width:1200px){
  .phcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footbar:not([data-savebar]) .fb-note{flex-basis:100%}
}

.acct-btn .an-f{white-space:nowrap}

/* 配信当日の2画面の「← ホーム」：ホームへ戻る手段はこれだけなので、押せる高さを施設側の決まり（44px）にする（2026-10-04。以前は22px） */
.join-back{display:inline-flex;align-items:center;min-height:44px}

/* --- ログイン後の画面のヘッダーは上に固定する（2026-10-05 ユーザー指定） ---
   2026-08-25 に「スクロールすると上へ流れて消える」に変えたのを戻した。電話番号・お知らせのベル・
   アカウントメニューがスクロールしても常に見える。左メニュー（z-index:20）より手前に出す。
   配信当日の2画面（setting / live）の帯も同じ扱い。
   ⚠ 祖先に overflow:hidden を付けると sticky が効かなくなる（束ね版の .scr も含む）。 */
.topbar,.join-brandbar{position:sticky;top:0;z-index:30}
/* ページ内のカードへ送るとき（data-scrollto）、ヘッダーの下に隠れないようにする */
.panel [id],.card[id]{scroll-margin-top:90px}
/* スマホ幅：固定したまま 200px あると画面の4分の1をふさぐので、2段に詰める（2026-10-05）
   1段目＝ロゴの印・ベル・アカウント、2段目＝サポート窓口（ラベルと番号を横1行に） */
@media (max-width:640px){
  .topbar{padding:8px 12px}
  .tb-inner{gap:8px}
  .topbar .logo{font-size:0;gap:0}
  .tel{padding:4px 12px}
  .tel .tt{flex-direction:row;align-items:baseline;gap:10px}
  .tel .thr{padding-left:10px}
}

/* 本日の配信のバナー：配信日を毎回出し、本日のときだけ赤い「本日」の札を付ける（2026-10-05 ユーザー指示） */
.hero .when{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.hero .when .hd{font-size:18px;font-weight:700;color:#ffffff;font-variant-numeric:tabular-nums}

/* 記録の入力画面：決まっている欄も最初から入力欄にした（2026-10-05）。灰色の箱は外し、ほかの欄と同じ並びにする。
   表示画面（record-view）の .autobox は箱のまま */
.autobox.ab-in{margin:0;background:none;border:none;border-radius:0;padding:0}
.autobox.ab-in .frow{padding:15px 0;border-bottom:1px solid #f0ebe0}
.autobox.ab-in .frow>.fl{padding-top:11px;color:#3a4157}
@media (max-width:640px){.autobox.ab-in .frow>.fl{padding-top:0}}
textarea.tin{resize:vertical;line-height:1.7}

/* 感動レク：今後の配信予定・開催済みの感動レク。行を押すと、その回の詳細が下に開く（2026-10-05 ユーザー指示） */
.nlist li.evx{display:block;padding:0}
.evx>details>summary{display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer;list-style:none;min-height:44px}
.evx>details>summary::-webkit-details-marker{display:none}
.evx>details>summary:hover .n{color:#26406e}
.evx .evx-ch{width:18px;height:18px;flex:none;color:#7b8494;transition:transform .15s}
.evx>details[open] .evx-ch{transform:rotate(180deg)}
.evkv{display:grid;grid-template-columns:96px minmax(0,1fr);margin:0 0 14px 52px;padding:12px 16px;
  background:#faf7f0;border-radius:6px;font-size:14px;line-height:1.7}
.evkv dt{font-weight:700;color:#5b6577;padding:6px 12px 6px 0}
.evkv dd{color:var(--ink);padding:6px 0}
.evkv dt:not(:first-of-type),.evkv dt:not(:first-of-type)+dd{border-top:1px solid #efe9dc}
.evkv .songs{line-height:1.8}
/* 一覧（.nlist li）の行の形が、詳細の中の曲目にまで当たらないようにする */
.nlist .evkv .songs li{display:list-item;padding:0;border:none;font-size:14px}
@media (max-width:640px){
  .evkv{grid-template-columns:1fr;margin-left:0}
  .evkv dt{padding-bottom:0}
  .evkv dt:not(:first-of-type)+dd{border-top:none}
}

/* ご契約・設定：「直す」をやめ、その場で入力する欄（2026-10-05 ユーザー指示）。変えたら自動で保存 */
.kv-in{height:44px;min-width:0;border:1px solid #d8d0be;border-radius:6px;background:#ffffff;
  padding:0 12px;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink)}
.kv-in:focus{outline:3px solid rgba(193,145,58,.35);outline-offset:1px;border-color:var(--gold)}
.fackv dd .kv-in{width:min(360px,100%)}
.ulist .u-role{flex:1;min-width:150px;max-width:220px}
.ulist .u-st{flex:none;width:110px}
.ulist .last{margin-left:auto}
.ulist li.off{opacity:1}
.ulist li.off .n,.ulist li.off .last{color:var(--muted)}

/* レクの記録の公開：ON／OFF のスイッチ（2026-10-05） */
.share-row{display:flex;align-items:center;gap:20px}
.share-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.share-t b{font-size:16px;font-weight:700;color:var(--ink)}
.share-t em{font-style:normal;font-size:13px;color:#5b6577;line-height:1.7}
.sw{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:none;background:none;
  cursor:pointer;font-family:var(--sans)}
.sw .sw-k{position:relative;width:52px;height:30px;border-radius:100px;background:#c9cdd6;transition:background .15s}
.sw .sw-k::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#ffffff;transition:transform .15s}
.sw.on .sw-k{background:#2c8a5f}
.sw.on .sw-k::after{transform:translateX(22px)}
.sw .sw-lb{width:32px;text-align:left;font-size:14px;font-weight:700;color:#5b6577}
.sw.on .sw-lb{color:#1f6f49}
.sw:focus-visible{outline:2px solid var(--goldb);outline-offset:2px;border-radius:6px}
@media (max-width:640px){.share-row{flex-direction:column;align-items:flex-start;gap:10px}}

/* 参加人数は任意。「参加人数は記載しない」にチェックすると、人数をグレーにする（2026-10-05） */
.cskip{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-size:14px;font-weight:700;color:#4a5162;cursor:pointer}
.cskip input{width:20px;height:20px;accent-color:var(--gold)}
.counter.off .cnum,.counter.off .cunit,.counter.off .chint{color:#a9b0c0}
.counter.off .cbtn{opacity:.4;cursor:not-allowed}

/* 準備画面の開演までのカウントダウン（2026-10-05 ユーザー指示）。値は gen_common.py の HERO と同じ */
.join-cd{display:inline-flex;align-items:center;gap:16px;margin-top:16px;padding:12px 24px;
  background:#17243f;border-radius:8px;color:#ffffff}
.join-cd .cd-lb{font-size:13px;font-weight:700;color:var(--goldb)}
.join-cd .cd{font-size:28px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1.2}
.join-cd .cd-open{font-size:14px;font-weight:700;color:#c7cfe0;padding-left:16px;border-left:1px solid rgba(255,255,255,.2)}
.join-cd .cd-open.open{color:#ffffff}
@media (max-width:640px){
  .join-cd{flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:10px 16px}
  .join-cd .cd-open{flex:1 1 100%;text-align:center;padding-left:0;border-left:none}
}

/* ご契約・設定：ページ内の項目へ移るメニュー（2026-10-05 ユーザー指示） */
.admnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.admnav button{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:6px;background:#ffffff;
  cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:700;color:#26406e}
.admnav button:hover{background:#faf7f0}

/* 本日の配信のバナー：開場・開演・終演を見出し付きで並べる（2026-10-05 ユーザー指示） */
.hero .htimes{display:flex;flex-wrap:wrap;gap:8px 28px;margin:4px 0 0}
.hero .htimes div{display:flex;align-items:baseline;gap:8px}
.hero .htimes dt{font-size:13px;font-weight:700;color:var(--goldb)}
.hero .htimes dd{font-size:22px;font-weight:700;color:#ffffff;font-variant-numeric:tabular-nums;line-height:1.3}
.hero .htimes dd small{font-size:13px;font-weight:700;color:#c7cfe0;margin-left:4px}


/* ===== 記録 → ご家族への公開設定 → 公開 のステップバー（record / record-view / family・2026-10-05） =====
   ユーザー指示：色が変わるだけでは見づらいので、ステップごとに地の色を変える（矢印形の帯）。
   済み＝緑の地（白抜き文字）、いま＝金の地、次はこちら＝薄い金の地、まだ＝青灰の地。
   2026-10-05 追記：済みの淡い緑が見づらいと指摘。済みは濃い緑の地に白い文字にした。
   2026-10-05 追記：2以降が画面の地（--ivory）とほぼ同じ色で見づらいと指摘。どの段も地と見分けられる濃さにした。 */
.recsteps{list-style:none;counter-reset:rs;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 20px}
.recsteps li{counter-increment:rs;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 22px 8px 30px;
  font-size:14px;color:#4a5162;background:#dfe4ec;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}
.recsteps li:first-child{padding-left:16px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
.recsteps li::before{content:counter(rs);width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#ffffff;color:var(--muted);font-size:14px;font-weight:700}
.recsteps .rs-t{display:flex;flex-direction:column;line-height:1.4}
.recsteps em{font-style:normal;font-size:12px;font-weight:400}
.recsteps li.done{background:var(--good);color:#ffffff}
.recsteps li.done::before{content:"✓";background:#ffffff;color:#1f6f49}
.recsteps li.done em{color:#ffffff}
.recsteps li.cur{background:var(--goldb);color:#2a1e05;font-weight:700}
.recsteps li.cur::before{background:#ffffff;color:#8a6414}
.recsteps li.next{background:#ecd9ac;color:#5a4410;font-weight:700}
.recsteps li.next::before{background:var(--goldb);color:#2a1e05}
.recsteps li.next em{font-weight:700}
@media (max-width:640px){
  .recsteps li{flex-direction:column;justify-content:center;gap:4px;padding:8px 14px 8px 20px;text-align:center;font-size:12px}
  .recsteps li:first-child{padding-left:8px}
  .recsteps li{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%)}
  .recsteps li:first-child{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
  .recsteps li::before{width:24px;height:24px;font-size:13px}
  .recsteps .rs-t{align-items:center}
  .recsteps em{display:none}   /* 幅110pxほどで補足が3〜4行に折れ、段の高さがそろわないため（2026-10-05） */
}

/* 施設側の一覧の「さらに表示」（開催済みの感動レク・請求書・2026-10-05）。li に display を当てているので hidden を効かせ直す */
li.more-row[hidden]{display:none}
.ev-more{display:flex;justify-content:center;margin-top:12px}
.ev-more[hidden]{display:none}
.ev-more .mini{min-height:40px;padding:0 20px}

/* 感動レクのタブ「本日の内容」の見出し：開催日・開演・配信時間（2026-10-05） */
.prep-t .prep-when{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:#4a5162}
.prep-t .prep-when strong{font-size:16px;font-weight:700;color:var(--ink);margin-left:4px}

/* 左メニューの「すぐ呼ぶ」「すぐ相談」を大きく（2026-10-06 ユーザー指示「売りの機能のひとつなので」）。
   大きくするのはボタン（余白・アイコン）だけ。文字は元の大きさのまま（22pxにしたら「文字が大きすぎ」と指摘、同日）。
   元の定義は home2.css / record.css に同じものが2つある。両方を直さず、ここで上書きする。 */
.sn-call,.sn-consult{gap:14px;padding:18px 14px;border-width:1.5px}
.sn-consult{margin-top:12px}
.sc-ic{width:48px;height:48px}
.sc-ic svg{width:24px;height:24px}
.sc-t em{margin-top:4px}
/* 狭い画面（メニューが上に並ぶ）：2つを同じ幅で1段に並べる。以前は「すぐ呼ぶ」だけ小さく、
   「すぐ相談」だけが1段を占めていて、大きさがそろっていなかった */
@media (max-width:900px){
  .sn-call,.sn-consult{flex:1 1 calc(50% - 3px);width:auto;margin-top:6px;padding:14px 14px;gap:10px}
  .sc-ic{width:42px;height:42px}
  .sc-ic svg{width:21px;height:21px}
}

/* ===== 写真の追加・削除（family.html と record-view.html で共通・2026-10-06） =====
   はじめは family.css に置いたが、record-view.html は family.css を読まないので、両方が読む tune.css に移した。 */
/* 写真の追加。ご家族への公開設定でも、記録に付けていない写真を足せるようにした。
   写真カードの並びの最後に、同じ大きさの枠で置く。中身は data-stub（record.html の「写真を追加」と同じ） */
.ph-add{display:flex}
.ph-add-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:150px;padding:12px;border-radius:8px;cursor:pointer;text-align:center;
  border:1.6px dashed #d8d0be;background:#faf7f0;font-family:var(--sans);color:#4a5162}
.ph-add-btn:hover{background:#f5f1e8;border-color:#d3c3a0}
.ph-add-btn svg{width:26px;height:26px;color:var(--gold)}
.ph-add-btn b{font-size:14px;font-weight:700}
.ph-add-btn em{font-style:normal;font-size:12px;color:var(--muted);line-height:1.6}
.ph-add-note{flex-basis:100%;font-size:12px;color:var(--muted);line-height:1.7;margin-top:8px}

/* 写真の削除（2026-10-06）。カードのいちばん下、右寄せ。選んでいない写真（.off）でも出す */
.ph-del{align-self:flex-end;display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 10px;
  border:none;border-radius:6px;background:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:700;color:var(--muted)}
.ph-del:hover{color:#a63a22;background:#faf7f0}
.ph-del svg{width:15px;height:15px}
.um-acts .ph-del-go{color:#a63a22;border-color:#eecfc4}

/* 用意するもの：品目ごとの「すぐ購入」（2026-10-07 打合せで追加。運営の代理店のお店へのリンク）
   箇条書きの点をやめて1品目1行にし、お店で買える品目だけ右にボタンを出す */
.idet-th{padding-left:0;list-style:none}
.idet-th li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:38px;border-bottom:1px solid var(--line2);line-height:1.6}
.idet-th li:last-child{border-bottom:none}
/* 2026-10-07 「大きすぎて見づらい」→ 枠を外して小さな文字のリンクに */
.th-buy{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 6px;
  border:none;border-radius:6px;background:none;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-size:12px;font-weight:700;color:var(--gold-t)}
.th-buy:hover{background:#faf7f0;text-decoration:underline}
.th-buy svg{width:12px;height:12px}
/* 2026-10-08 押せる範囲は高さ44px以上（第2AIレビュー M9）。見た目の文字は小さいまま。上下に3pxずつはみ出させて、行の高さ（38px）は変えない */
.th-buy{min-height:44px;min-width:44px;margin:-3px 0;padding:0 8px;justify-content:center}

/* 2026-10-07 「モーダルが少し小さい」→ 720px から広げる */
.idet-card{width:min(880px,100%);padding:26px 30px 20px}

/* ==== 施設側共通：未作成だった操作（2026-10-07） ====
   パスワードの変更・職員の追加・パスワードの再発行のモーダル（型は「運営からのお知らせ」の .opsmodal を流用）、
   すぐ呼ぶの「連絡先を追加・編集」、すぐ相談の写真。押せるところは高さ44px以上。 */
.fx-card{width:min(520px,100%)}
.fx-body{padding-top:16px}
.fx-body[hidden]{display:none}
.fx-f{display:block;margin-bottom:14px}
.fx-f>span{display:block;font-size:13px;font-weight:700;color:#3a4157;margin-bottom:6px}
.fx-f>span em{font-style:normal;font-weight:600;color:var(--muted);margin-left:8px;font-size:12px}
.fx-f .kv-in{width:100%}
.fx-err{font-size:13px;font-weight:700;color:var(--warn);margin:-4px 0 12px}
.fx-err[hidden]{display:none}
.fx-acts{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:6px}
.fx-acts .btn-line,.fx-acts .btn-gold{min-height:44px;padding:0 20px;font-size:14px}
.fx-acts .btn-line{background:#ffffff}
.fx-lead{font-size:14px;color:#3a4157;line-height:1.8}
.fx-lead b{font-weight:700;color:var(--ink)}
.fx-pw{margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:#faf7f0;
  text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:28px;font-weight:700;
  letter-spacing:.12em;color:#26406e;user-select:all}
.fx-note{font-size:13px;color:#4a5162;line-height:1.8;margin-bottom:12px}
.fx-del{display:block;margin:14px 0 0 auto;min-height:44px;padding:0 12px;border:none;background:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:700;color:var(--warn);border-radius:6px}
.fx-del:hover{background:#fbe9e4}
.fx-del[hidden],.fx-delq[hidden]{display:none}
.fx-delq{margin-top:12px;padding:12px 14px;border:1px solid #eecfc4;border-radius:6px;background:#fbe9e4}
.fx-delq p{font-size:13px;font-weight:700;color:var(--warn)}
.fx-danger{color:var(--warn);border-color:#eecfc4}

/* すぐ呼ぶ：編集の状態 */
.dw-form{padding-top:14px}
.dw-form[hidden]{display:none}
.dw-fh{font-size:16px;font-weight:700;color:#26406e;margin-bottom:12px}
.dw-list[hidden],.dw-acts[hidden]{display:none}
.dw-list li{position:relative}
.dw-list li.ed{padding-right:84px}
.dw-ed{position:absolute;right:0;top:14px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:6px;
  background:#ffffff;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:#3a4157}
.dw-ed:hover{background:#faf7f0}
.dw-fix{display:block;margin-top:6px;font-size:12px;color:var(--muted)}

/* ご契約・設定 › 職員アカウント：パスワードを再発行 */
.ulist .u-pw{flex:none}
.ulist .u-pw[hidden]{display:none}

/* すぐ相談：添える写真（3枚まで） */
.cs-thumbs{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cs-thumbs[hidden]{display:none}
.cs-thumbs li{position:relative;width:104px;height:78px;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#faf7f0}
.cs-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.cs-x{position:absolute;top:4px;right:4px;width:44px;height:44px;border:none;background:none;cursor:pointer;
  display:grid;place-items:start end;padding:0}
.cs-x svg{width:26px;height:26px;padding:5px;border-radius:50%;background:rgba(23,36,63,.72);color:#ffffff}
.cs-x:hover svg{background:#a63a22}
.cs-fn{font-weight:700;color:var(--muted);margin-left:2px}
.cs-file:disabled{opacity:.5;cursor:not-allowed}

/* ==== 施設側レク・記録・家族：未作成だった操作（2026-10-07） ==== */
/* 写真を追加したカード：選んだ写真をそのまま見せる（既存の見本カードは灰色の「写真」のまま） */
.pk.ph-img{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent}
/* 使用した物を足す：名前を入れる欄（札と同じ高さ）。入れている間は「＋ 足す」を隠す */
.th-new{min-height:44px;width:180px;max-width:100%;padding:0 12px;border:1.5px solid var(--gold);border-radius:6px;
  background:#ffffff;font-family:var(--sans);font-size:13px;font-weight:700;color:#3a4157}
.th-add[hidden]{display:none}
/* ご家族へのレポート（home2）：公開を止めて「公開中」が0件になったら群ごと隠す */
.fgrp[hidden]{display:none}
/* 共有URLのQRコード・公開を止める の確認（.opsmodal の型） */
.fq-card{width:min(460px,100%)}
.fq-qr{display:flex;justify-content:center;padding:18px 0 6px}
.fq-img svg{display:block;width:220px;height:220px}
.fq-img[hidden]{display:none}
.fq-url{text-align:center;font-size:13px;margin-top:6px}
.fq-url code{font-family:var(--sans);font-weight:700;color:var(--ink);word-break:break-all;user-select:all}
.fq-note,.fq-lead{font-size:14px;color:#3a4157;line-height:1.85;margin-top:12px}
.fq-list{margin:10px 0 0 1.2em;font-size:14px;color:#3a4157;line-height:1.85}
.fq-acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.fq-acts .btn-line,.fq-acts .btn-gold{min-height:48px;padding:0 22px;font-size:14px;font-weight:700;border-radius:8px}
.fq-acts .fq-stop{color:#a63a22;border-color:#eecfc4}
@media (max-width:560px){.fq-acts .btn-line,.fq-acts .btn-gold{flex:1}}
/* 用紙プレビューの「URLを共有」：公開する前（URLが無い）は押せない */
.pv-btn.share:disabled{opacity:.45;cursor:not-allowed}
/* 2026-10-07 施設側の取り消せない操作の確認ボタン（公開を止める・写真の削除・写真を外す・連絡先の削除）。
   赤い文字＋薄い赤の枠だけだと、隣の「やめる」と同じ枠線の型に見えて区別しにくい（第2AIの指摘 N10）。
   色は今までと同じ赤（--warn）のまま、薄い赤の地を敷いて、3つの型をそろえる */
.fq-acts .fq-stop,.um-acts .ph-del-go,.fx-acts .fx-danger{background:#fff7f4;border-color:#e8bfae;color:var(--warn)}
.fq-acts .fq-stop:hover,.um-acts .ph-del-go:hover,.fx-acts .fx-danger:hover{background:#fbe9e4}

/* ==== 施設側：第1期に戻した操作（2026-10-07） ====
   ホームの「ご家族へのレポート」の公開後のボタン、データの書き出しのモーダル（パスコードは 2026-10-08 ユーザー決定で外した）。
   用紙・ご家族向けページの規則は preview.css の同じ目印。動きは app.js の同じ目印 */
/* ホームの「ご家族へのレポート」：公開したら出す4つのボタン（行の中にそのまま並べる） */
.fam-pubacts{display:contents}
.fam-pubacts[hidden]{display:none}
/* データの書き出し：期間（いつから・いつまで） */
.fx-range{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.fx-range .kv-in{min-height:44px}
@media (max-width:480px){.fx-range{grid-template-columns:1fr}}
/* 公開の確認の「共有URL」の行は、もう一度公開するときだけ出す（.pubck li の display に hidden が負けるので） */
.pubck li[hidden]{display:none}