/* マイページの見た目：土台・上の帯（動きを止める・ベル・アカウント）・タブ（パソコンは上、スマホの登録者は下のバー）・窓（アカウント・お店のこと・月額プランを始めない）・
   ログイン・カードの画面・本数の棒（無料の本数の箱）・お申し込みの内容の表・プラン・下のリンク・お店のことの問い・案件管理と週次管理・TikTok・知らせ。
   ホームは home.css、つくるは create.css、見本の動画は media.css、アイコンの絵は icons.css、お知らせは notices.css（この順に読む）。
   色・大きさ・線・丸みは assets/tokens.css の名前だけで書く（tokens.css をこのファイルの前に読む）。明るい配色だけ（暗い配色は無い）。
   字は --font（日本語は端末の字）。太さは 400 と 700 だけ。数字は tabular-nums（幅をそろえる）。
   スマホの形になるのは幅 767px まで（いちばん下の @media）。パソコンだけの決まりは @media (min-width: 768px)。区切りはこの 767px と 768px の間だけ。
   画面の状態は JS が付ける印で見分ける：body[data-view]（v-login・v-card・v-app）、body[data-role]（subscriber・staff）、
   body[data-tab]（タブの名前）、body[data-cstep]（つくるの 1・2）、html[data-motion]（on・off・reduce） */
* { box-sizing: border-box; }
html { line-break: strict; word-break: auto-phrase; } /* 言葉の途中で折り返さない（対応する端末だけ）。「ょ」「っ」などで行を始めない。条件の文は下の .nw のまとまりでも守る */
.nw { display: inline-block; max-width: 100%; overflow-wrap: anywhere; } /* 言葉のまとまり（3〜16 字。app.js の ph() が作る）。行の終わりに 1〜2 字だけ落ちない */
[hidden] { display: none !important; } /* display を指定した部品でも hidden で隠れるように */
html, body { margin: 0; background: var(--paper); color: var(--navy); }
body { font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: var(--navy); text-decoration-thickness: var(--ol-2); text-underline-offset: var(--ul-off); }
b, strong { font-weight: var(--w-bold); }
h1, h2, h3 { color: var(--navy); font-weight: var(--w-bold); line-height: var(--lh-head); text-wrap: balance; }
h1 { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-h2); }
h2 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-h3); }
h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-body); }
p, li, td, dd { text-wrap: pretty; } /* 最後の行に 1 字だけ落ちない */
.il { display: block; max-width: 100%; height: auto; flex: none; } /* 絵（img）。大きさは img の width・height（絵の決まり 1） */
.num { font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
button { min-height: var(--hit); padding: 0 var(--sp-4); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font-weight: var(--w-bold); line-height: var(--lh-ui); cursor: pointer; } /* 何も付けないボタン：chip と同じ線と角 */
button:disabled { border-color: var(--off-line); background: var(--off); color: var(--muted); box-shadow: none; transform: none; cursor: not-allowed; }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
#acctTitle:focus:not(:focus-visible), #shopTitle:focus:not(:focus-visible), #stopPlanTitle:focus:not(:focus-visible), #lastFreeTitle:focus:not(:focus-visible) { outline: none; } /* 開いたときにフォーカスを移す見出し（マウスで開いたときは枠を出さない） */
#cardTitle:focus { outline: none; } /* カードの画面の見出し：読み込みのあと自動でフォーカスを移す（読み上げのため）。押せない見出しなので、いつも枠は出さない */
/* 画面に 1 つだけの主なボタン（primary：黄色・紺の太い枠・下に固い影。押すと 3px 下がる）。ほかは白い枠（outline・btn）・小さい（small）・文字だけ（link）。赤で塗るボタンは無い（danger は赤い字と枠） */
.btn, button.outline, button.danger, button.primary, a.primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--btn-h); padding: var(--sp-2) var(--sp-5); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: var(--ls-btn); text-align: center; text-decoration: none; text-wrap: balance; cursor: pointer; }
.btn-primary, button.primary, a.primary { min-height: var(--cta-h); background: var(--yellow); box-shadow: var(--shadow-cta); }
/* 押せないボタン：上の button:disabled は、このすぐ上の button.primary・button.outline・button.danger と強さが同じで、あとの方が勝つので負けていた（押せないのに黄色い主なボタンのまま）。
   種類ごとに :disabled を足して強くする（押せないものは、うす灰の地・灰の枠・影なし。理由はボタンのすぐ上の一言 .why に書く。style.md 5） */
button.primary:disabled, button.outline:disabled, button.danger:disabled { background: var(--off); border-color: var(--off-line); color: var(--muted); box-shadow: none; transform: none; cursor: not-allowed; }
.btn-wide { display: flex; width: 100%; }
.btn-s, button.small, a.small { min-height: var(--hit); padding: 0 var(--sp-4); }
.btn-bad, button.danger { border-color: var(--red); color: var(--red); }
button.big, a.big { min-height: var(--cta-h); }
a.small:not(.primary) { display: inline-flex; border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font-weight: var(--w-bold); text-decoration: none; } /* 枠だけのリンク（TikTok とつなぐ など） */
@media (hover: hover) {
  .btn-primary:hover, button.primary:not(:disabled):hover, a.primary:hover { background: var(--y-hover); }
  .btn:not(.btn-primary):not(:disabled):hover, button.outline:not(:disabled):hover, button.danger:not(:disabled):hover { background: var(--sky-l); }
}
.btn-primary:focus-visible, button.primary:focus-visible, a.primary:focus-visible { outline-offset: calc(var(--cta-lift) + var(--focus-off)); }
.btn-primary:active, button.primary:not(:disabled):active, a.primary:active { transform: translateY(var(--press-shift)); box-shadow: var(--shadow-cta-down); }
.btn:not(.btn-primary):not(:disabled):active, button.outline:not(:disabled):active, button.danger:not(:disabled):active { background: var(--sky); }
.btn[disabled], .btn[aria-disabled="true"], a.primary[aria-disabled="true"] { background: var(--off); border-color: var(--off-line); color: var(--muted); box-shadow: none; transform: none; cursor: not-allowed; }
.link, button.link { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-s); background: none; color: var(--navy); font-weight: var(--w-bold); text-decoration: underline; text-decoration-thickness: var(--ol-2); text-underline-offset: var(--ul-off); cursor: pointer; }
@media (hover: hover) { button.link:not(:disabled):hover { background: var(--sky-l); } }
button.link:disabled { border: 0; background: none; color: var(--muted); }
input, select, textarea { width: 100%; min-height: var(--field-h); padding: 0 var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); }
textarea { padding: var(--sp-2) var(--sp-3); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="radio"], input[type="checkbox"] { width: auto; min-height: 0; }
/* 見えないが、読み上げとキーボードでは使える（#homeLive・#file など） */
.vh { position: absolute !important; width: var(--ol-1); height: var(--ol-1); padding: 0; margin: calc(var(--ol-1) * -1); overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- 上の帯（左に名前と印、パソコンはまん中にタブ、右に 動きを止める・お知らせのベル・アカウント。style.md 6 の Header） ----------
   ログインとカードの画面ではタブを出さない（下の .tabs）。スマホの登録者のタブは、帯の中にあっても画面の下に貼りつく（下のタブの節） */
.top { position: sticky; top: 0; z-index: var(--z-top); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--top-h); padding: env(safe-area-inset-top, 0px) max(var(--sp-4), env(safe-area-inset-right, 0px)) 0 max(var(--sp-4), env(safe-area-inset-left, 0px)); border-bottom: var(--ol-1) solid var(--line); background: var(--paper); }
html { scroll-padding-top: calc(var(--top-h) + env(safe-area-inset-top, 0px)); } /* キーボードで移ったとき、上の帯の下に隠れないように（WCAG 2.4.11） */
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; min-height: var(--hit); color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-ui); text-decoration: none; white-space: nowrap; }
/* 印（紺の角丸の四角・白い三角・黄色の点）。絵ファイルは使わず、形だけで描く（kit の mark と同じ比） */
.mark { position: relative; flex: none; display: block; width: var(--ic-l); height: var(--ic-l); border-radius: var(--r-m); background: var(--navy); }
.mark::before { content: ""; position: absolute; inset: 0; background: var(--white); clip-path: polygon(37.5% 30.4%, 70% 50%, 37.5% 69.6%); }
.mark::after { content: ""; position: absolute; left: 64.3%; top: 7.1%; width: 28.6%; height: 28.6%; border-radius: var(--r-pill); background: var(--yellow); }
.top-right { display: flex; flex: none; align-items: center; gap: var(--sp-2); }
.staff-pick { width: auto; min-width: 0; max-width: 46vw; min-height: var(--hit); padding: 0 var(--sp-2); text-overflow: ellipsis; } /* min-width: 0 が要る：選ぶ欄の最小の幅は、いちばん長い選択肢（番号とメール）で決まり、スマホの帯の幅を超えて横に動いてしまう */
/* ベル（#bellBtn。数の札は notices.css）とアカウント（#acctBtn）と 動きを止める：44px の丸・紺の 2px の枠・白地。名前は読み上げ用の文字（.vh）。メールは窓の中に出す */
.icon-btn, .acct-btn { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--hit); min-width: var(--hit); height: var(--hit); padding: 0; border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); color: var(--navy); cursor: pointer; }
.icon-btn .m-ic, .acct-btn .m-ic { width: var(--ic); height: var(--ic); }
.icon-btn[aria-expanded="true"], .acct-btn[aria-expanded="true"] { background: var(--sky-l); } /* 窓を開いているあいだ */
@media (hover: hover) { .icon-btn:hover, .acct-btn:hover { background: var(--sky-l); } }
.icon-btn:active, .acct-btn:active { background: var(--sky); }
.who { display: none; } /* 要素は残す（app.js が入れる）が、見せない：メールはアカウントの窓の中 */
/* ログインでは右に何も出さない。カードの画面ではアカウントだけ（ログアウトのため。追補 4.3・4.5） */
body[data-view="v-login"] #acctBtn, body[data-view="v-login"] #bellBtn, body[data-view="v-card"] #bellBtn { display: none; }
/* 動きを止める（アカウントの窓の 1 行。#motionBtn）：見本の動画を全部止める（押すと aria-pressed="true"。名前は変えない）。
   ヘッダーには置かない（3 つ並ぶ丸い絵のうち、押す人がほとんどいないものが、プランの一時停止に見えるため）。右のスイッチの絵で、入っているか切れているかを見せる。
   社員・カードの画面では行ごと出さない（下の .acct-sub の決まり）。端末が動きを減らす設定（reduce）でも出さない（もう止まっている） */
html[data-motion="reduce"] #acctSheet .acct-motion { display: none; }
.tgl { flex: none; position: relative; width: 44px; height: 26px; border: var(--ol-2) solid var(--navy); border-radius: 13px; background: var(--white); }
.tgl::after { content: ''; position: absolute; top: 50%; left: 3px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--navy); }
#motionBtn[aria-pressed="true"] .tgl { background: var(--yellow); }
#motionBtn[aria-pressed="true"] .tgl::after { left: auto; right: 3px; }

/* ---------- 窓（dialog.sheet）：スマホは下から上がるシート（上の角は丸く・上に太い線）、パソコンはまん中の窓（幅は --w-dialog）。style.md の 5・6。
   アカウント #acctSheet・お知らせ #noticeSheet（中身は notices.css）・お店のこと #shopSheet。月額プランを始めない・無料の最後の 1 本も同じ土台。
   できた動画 #jobSheet と 何を撮ればいい？ #tipsSheet は home.css・create.css が、この土台の上に足す（そちらが勝つ） ---------- */
html:has(dialog.sheet[open]) { overflow: hidden; } /* 窓の後ろの画面は動かさない */
dialog.sheet { width: min(var(--w-dialog), calc(100vw - var(--sp-7))); max-width: none; height: fit-content; max-height: calc(100vh - var(--sp-7)); max-height: calc(100dvh - var(--sp-7)); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; color: var(--navy); background: var(--white); border: var(--ol-3) solid var(--navy); border-radius: var(--r-xl); }
dialog.sheet::backdrop { background: var(--scrim); }
.sheet .sheet-bar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-2) var(--sp-5); background: var(--white); }
.sheet .sheet-bar h2 { margin: 0; font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: var(--lh-head); }
.sheet .sheet-bar .link { min-height: var(--hit); padding: 0 var(--sp-2); } /* 文字の「閉じる」（できた動画・何を撮ればいい？） */
/* 閉じるの丸いボタン：押せる大きさの円・紺の枠・×の絵。名前は aria-label */
.sheet-x { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--hit); height: var(--hit); padding: 0; border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); color: var(--navy); cursor: pointer; }
.sheet-x .m-ic { width: var(--ic); height: var(--ic); }
@media (hover: hover) { .sheet-x:hover { background: var(--sky-l); } }
.sheet-x:active { background: var(--sky); }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ---------- アカウントの窓（#acctSheet。app-deck の AC-1・AC-2）：メールの行と、絵つきの 3 つの行。社員とカードの画面では、メールとログアウトだけ ---------- */
.acct-mail { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-5) var(--sp-3); color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); overflow-wrap: anywhere; }
.acct-mail .m-ic { width: var(--ic-s); height: var(--ic-s); color: var(--muted); }
.acct-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0 var(--sp-4) var(--sp-6); list-style: none; }
.acct-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: calc(var(--hit) + var(--sp-4)); padding: var(--sp-2) var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); text-align: left; cursor: pointer; }
.acct-row .m-ic { width: var(--ic); height: var(--ic); }
.acct-row .acct-t { flex: 1; min-width: 0; }
@media (hover: hover) { .acct-row:hover { background: var(--sky-l); } }
.acct-row:active { background: var(--sky); }
body[data-role="staff"] #acctSheet .acct-sub, body[data-view="v-card"] #acctSheet .acct-sub { display: none; } /* メールとログアウトだけ（追補 4.7） */

/* 月額プランを始めない（#stopPlanSheet。app-deck の SP-1 から SP-3）・無料の最後の 1 本（#lastFreeSheet。中身は create.js）：見出しと、絵つきの短い行と、ボタンだけの窓。
   窓の枠は上の dialog.sheet。ここは中の余白と並びだけ。始めないことにする は黄色の主なボタン（赤にしない。意味は斜線を引いた絵が運ぶ） */
#stopPlanSheet, #lastFreeSheet { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
#stopPlanTitle, #lastFreeTitle { margin: 0 0 var(--sp-4); font-size: var(--fs-h2); line-height: var(--lh-head); }
#lastFreeBody p { margin: 0 0 var(--sp-3); }
.stop-rows { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.stop-rows li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-body); line-height: var(--lh-cond); }
.stop-rows li.is-key { font-weight: var(--w-bold); }
.stop-ic { position: relative; flex: none; width: var(--ic); height: var(--ic); margin-top: calc((var(--fs-body) * var(--lh-cond) - var(--ic)) / 2); color: var(--navy); }
.stop-ic .m-ic { position: absolute; inset: 0; width: var(--ic); height: var(--ic); }
#stopMsg { margin: 0 0 var(--sp-3); }
.btn-row { display: grid; gap: var(--sp-3); }
.btn-row .link { justify-self: center; }
#lastFreeSheet > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 0; }
/* お店のこと（#shopSheet。app-deck の SH-1・SH-2）：どの問いも任意。下に 保存する の帯を貼りつける */
.shop-lead { margin: 0; padding: var(--sp-1) var(--sp-5) 0; color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); }
#shopSheet #hearing { display: grid; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5) 0; }
.shop-foot { position: sticky; bottom: 0; z-index: var(--z-sticky); display: grid; gap: var(--sp-2); margin: 0 calc(var(--sp-5) * -1); padding: var(--sp-3) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); border-top: var(--ol-1) solid var(--line); background: var(--white); }
#hearMsg { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; color: var(--red); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
#hearMsg:empty { min-height: 0; margin-bottom: calc(var(--sp-2) * -1); } /* 知らせが無いときは場所を取らない（読み上げの欄としては残す） */
#hearMsg .m-ic { width: var(--ic); height: var(--ic); margin-top: calc(var(--sp-1) / -2); }
#shopSave { display: flex; align-items: center; justify-content: center; min-height: var(--cta-h); padding: 0 var(--sp-5); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--yellow); color: var(--navy); font: inherit; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: var(--ls-btn); box-shadow: var(--shadow-cta); cursor: pointer; }
@media (hover: hover) { #shopSave:hover { background: var(--y-hover); } }
#shopSave:active { transform: translateY(var(--press-shift)); box-shadow: var(--shadow-cta-down); }
#shopSave:focus-visible { outline-offset: calc(var(--cta-lift) + var(--focus-off)); }
#shopSave:disabled { border-color: var(--off-line); background: var(--off); color: var(--muted); box-shadow: none; transform: none; cursor: not-allowed; opacity: 1; }
.shop-foot .link { justify-self: start; min-height: var(--hit); padding: 0 var(--sp-2); border: 0; background: none; color: var(--navy); font: inherit; font-size: var(--fs-body); font-weight: var(--w-bold); text-decoration: underline; text-decoration-thickness: var(--ol-2); text-underline-offset: var(--ul-off); cursor: pointer; }

main { max-width: calc(var(--w-app) + var(--gut) * 2); margin: 0 auto; padding: var(--sp-4) var(--gut); } /* 中身は上の帯・下のリンクと同じ幅（--w-app）。記録の表も、ホーム・つくると同じ縁にそろう */
.view.narrow { max-width: var(--w-col); margin: var(--sp-6) auto; }
.fine { color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); }
.sub { color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); }
/* 失敗の知らせ（role="alert"）：赤い太い字と ×の丸の絵（色だけにしない）。空のときは場所を取らない（読み上げの欄としては残す） */
.msg { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-2) 0; color: var(--red); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.msg:empty { margin: 0; }
.ok { color: var(--navy); font-size: var(--fs-label); }
.err { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-1) 0; color: var(--red); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.err .m-ic, .msg .m-ic { flex: none; width: var(--ic); height: var(--ic); margin-top: calc((var(--fs-body) * var(--lh-ui) - var(--ic)) / 2); }
.warn { color: var(--warn); }
.empty { color: var(--muted); }
.banner { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--ol-2) solid var(--warn); border-radius: var(--r-m); background: var(--y4); color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); }
.banner .m-ic { flex: none; width: var(--ic); height: var(--ic); color: var(--warn); }
.card { padding: var(--sp-4); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); }
.card .k { color: var(--muted); font-size: var(--fs-label); }
.badge { display: inline-flex; align-items: center; padding: 0 var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--white); color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.s-done .badge { background: var(--sky-l); }
.s-failed .badge { border-color: var(--red); background: var(--red-l); color: var(--red); }
.s-processing .badge, .s-queued .badge { background: var(--y3); }
progress { width: var(--il-m); accent-color: var(--navy); }

/* ---------- ログイン（#v-login。見出し・絵・Google のボタン・同意の文だけ。ここには「無料」の言葉を書かない） ---------- */
#v-login { display: grid; justify-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-4) var(--sp-5); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); text-align: center; }
#v-login h1 { margin: 0; }
#v-login .il { width: var(--il-l); height: var(--il-l); }
.gsi { display: flex; justify-content: center; width: 100%; min-height: var(--hit); max-width: 100%; margin: var(--sp-2) 0 0; } /* Google のボタンが自分で付ける幅の指定（style 属性）は CSP で止まるので、いちばん広い幅だけここで決める */
#v-login .msg { justify-content: center; margin: 0; text-align: left; }
.consent-line { margin: 0; color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); } /* 条件の文は 16px 以上。言葉のまとまり（.nw）で折り返す */

/* ---------- お店のことの問い（#shopSheet の中の form#hearing。どれも任意） ---------- */
form label { display: block; margin: 0 0 var(--sp-4); font-weight: var(--w-bold); }
form label input, form label select, form label textarea { margin-top: var(--sp-1); font-weight: var(--w-regular); }
details { margin: var(--sp-1) 0 var(--sp-4); }
summary { cursor: pointer; color: var(--muted); margin-bottom: var(--sp-3); }
#hearing .q { margin: 0; }
#hearing fieldset { border: 0; margin-inline: 0; padding: 0; min-width: 0; }
#hearing legend { padding: 0; margin-bottom: var(--sp-2); color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); }
#hearing label.q, #hearing details.later label { display: grid; gap: var(--sp-2); margin: 0; color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); }
#hearing input:not([type="radio"]), #hearing textarea { width: 100%; min-height: var(--field-h); margin: 0; padding: 0 var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-ui); }
#hearing textarea { padding: var(--sp-2) var(--sp-3); }
#hearing input::placeholder, #hearing textarea::placeholder { color: var(--muted); opacity: 1; }
/* 選ぶもの（業種・来てほしいお客さん）：押せる大きさの枠つき。選ぶと水色になり、チェックの絵が出る。業種の中のラジオは見えなくして（キーボードと読み上げでは使える） */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
#hearing .tiles, #hearing #targetChips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
#hearing .tiles { margin-bottom: 0; }
#hearing .pick { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); margin: 0; padding: 0 var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); text-align: left; cursor: pointer; }
#hearing .pick .m-ic { width: var(--ic); height: var(--ic); }
#hearing .pick .pick-ck { width: var(--ic-s); height: var(--ic-s); visibility: hidden; }
#hearing .pick:has(> input:checked), #hearing .pick[aria-pressed="true"] { background: var(--sky-l); }
#hearing .pick:has(> input:checked) .pick-ck, #hearing .pick[aria-pressed="true"] .pick-ck { visibility: visible; }
#hearing .pick > input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
#hearing .pick:has(> input:focus-visible) { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
@media (hover: hover) { #hearing .pick:hover { background: var(--sky-l); } }
/* 動画の雰囲気：見本の絵（3:4 に切り抜く。動画の中身は media.js）。選ぶと紺の太い枠とチェックの丸。見本の注意書きは本文と同じ大きさ */
#hearing .moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
#hearing label.mood { position: relative; display: grid; align-content: start; justify-items: center; gap: var(--sp-1); margin: 0; color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); text-align: center; cursor: pointer; }
#hearing .mood > input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
#hearing .mood .clip-slot { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: var(--ol-3) solid var(--line); border-radius: var(--r-m); background: var(--paper); }
#hearing .mood .clip-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
#hearing .mood > input:checked ~ .clip-slot { border-color: var(--navy); }
#hearing .mood > input:focus-visible ~ .clip-slot { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
#hearing .mood-ck { position: absolute; top: var(--sp-2); right: var(--sp-2); display: none; place-items: center; width: var(--ic); height: var(--ic); border-radius: var(--r-pill); background: var(--navy); color: var(--white); }
#hearing .mood-ck .m-ic { width: var(--ic-s); height: var(--ic-s); }
#hearing .mood > input:checked ~ .mood-ck { display: grid; }
#hearing .sample-note { grid-column: 1 / -1; margin: var(--sp-1) 0 0; color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-cond); }
/* ほかの項目：開く帯（＋が－になる）。中は 3 つの欄 */
#hearing details.later { margin: 0; }
#hearing details.later > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--btn-h); margin: 0; padding: var(--sp-2) var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); list-style: none; cursor: pointer; }
#hearing details.later > summary::-webkit-details-marker { display: none; }
#hearing details.later[open] > summary { margin-bottom: var(--sp-4); background: var(--sky-l); }
#hearing details.later > summary:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
#hearing details.later label + label { margin-top: var(--sp-4); }
#hearing details.later .pm { position: relative; flex: none; width: var(--pm); height: var(--pm); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); }
#hearing details.later .pm::before, #hearing details.later .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--pm) * var(--pm-bar)); height: var(--ol-3); margin: calc(var(--ol-3) / -2) 0 0 calc(var(--pm) * var(--pm-bar) / -2); border-radius: var(--ol-2); background: var(--navy); transition: transform var(--t-ui) var(--e-io); }
#hearing details.later .pm::after { transform: rotate(90deg); }
#hearing details.later[open] .pm::after { transform: rotate(0deg); }

/* ---------- カードの画面（#v-card。特商法の最終確認の画面。app-deck 4.3 の K-1 から K-5）。上から 1 本の流れ：見出し・手順の点・本数の箱・12 の行・
   同意（印なし）・失敗の知らせ・一言・ボタン・あとで。何もたたまず、ボタンも貼りつけない（全部を読んでから押す。行と同意と一言は 16px 以上） ---------- */
#v-card { display: grid; gap: var(--sp-4); }
#v-card.narrow { max-width: var(--w-read); }
#v-card > * { margin: 0; }
#v-card h1 { font-size: var(--fs-h2); }
.stepper { display: flex; gap: var(--sp-2); } /* 3 つの点（いまは 1 つめ）。言葉は aria-label だけ */
.stepper span { width: var(--sp-6); height: var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); }
.stepper span.on { background: var(--navy); }
#cardBody { display: grid; gap: var(--sp-5); }
#cardBody > * { margin: 0; }
#cardBody .empty { text-align: center; }
.soon { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); text-align: center; } /* K-3 プランの申し込みが準備中 */
.soon p { margin: 0; font-weight: var(--w-bold); }
.pic-pair { display: flex; align-items: center; gap: var(--sp-3); color: var(--navy); }
.pic-pair .m-ic { width: var(--ic-l); height: var(--ic-l); }
.consent { display: grid; gap: var(--sp-3); }
.minors { margin: 0; color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); } /* 18 歳未満の方へ。同意の箱のすぐ上 */
/* 同意の箱：行ぜんたいが押せる（44px 以上）。印は紺の枠の四角で、入れるとチェックが出る（形でも分かる）。前もって印は付けない */
.check { position: relative; display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--hit); padding: var(--sp-2) 0; cursor: pointer; }
.check > .check-in { position: absolute; left: 0; top: 0; width: var(--hit); height: var(--hit); min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.check-box { display: grid; place-items: center; flex: none; width: var(--check); height: var(--check); margin-top: calc(var(--sp-1) / 2); border: var(--ol-3) solid var(--navy); border-radius: var(--r-s); background: var(--white); color: var(--white); }
.check-box .m-ic { width: var(--ic-s); height: var(--ic-s); opacity: 0; }
.check-in:checked + .check-box { background: var(--navy); }
.check-in:checked + .check-box .m-ic { opacity: 1; }
.check-in:focus-visible + .check-box { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
.check-tx { min-width: 0; color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); }
.fine-line { color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); } /* ボタンのすぐ上の一言（申し込みが済むところ）。小さくしない */
/* ボタンが押せないわけ（同意の印がまだ）：ボタンのすぐ上に、絵と 16px の太い字で 1 行。印を付けると消える（app.js が hidden を付け外しする） */
.why { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0 0 var(--sp-3); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.why .m-ic { flex: none; width: var(--ic); height: var(--ic); margin-top: calc((var(--fs-body) * var(--lh-ui) - var(--ic)) / 2); }
#cardMsg:empty { margin-bottom: calc(var(--sp-4) * -1); } /* 空のあいだは場所を取らない（読み上げの欄としては残す） */
#cardGo { width: 100%; margin-bottom: var(--cta-lift); text-wrap: balance; } /* 狭い画面で 2 行になるとき、2 行目が 2〜3 字だけにならないように。下の影の分だけ空ける */
#cardGo .m-ic { width: var(--ic); height: var(--ic); }
#v-card .later { text-align: center; }
#cardLater { min-height: var(--hit); }

/* ---------- 本数の箱（FreeBar。app-deck 3.1。「無料」と言えるのはここだけ）。ホーム（#homeCbar：ボタンの中なので span だけ）とプランの画面・カードの画面 ----------
   箱の並びは飾り（aria-hidden）。名前と数と条件は、いつも文字で書く（箱の下の行は、どれも 16px 以上・同じ大きさ・同じ太さ）。
   区切りは色だけでなく形でも分ける：できた＝紺の塗りとチェック・つくっている＝斜めの縞・残り＝黄色・これからの月額プラン＝点線の枠と薄い斜線。
   長い本数（13 以上）の箱は、本数の幅の 3 つの区切りにする（幅は app.js が CSSOM の flexGrow で入れる。style= は CSP で使えない） */
.cbar-card { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--r-l); background: none; color: var(--navy); font: inherit; font-weight: var(--w-regular); text-align: left; cursor: pointer; } /* ホームの箱は 1 つのボタン（プランの画面へ） */
@media (hover: hover) { .cbar-card:hover .fb { background: var(--sky-l); } }
.cbar-card:active .fb { background: var(--sky); }
.fb { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy); text-align: left; }
.fb-bar { display: flex; align-items: center; gap: var(--sp-1); height: var(--box-m); }
.fb-bar.is-s { height: var(--box-s); }
.fb-bar.is-l { height: var(--box-l); gap: var(--sp-2); }
.fb-card { flex: none; width: var(--ic); height: var(--ic); margin-right: var(--sp-1); }
.bx { display: grid; place-items: center; flex: 1; align-self: stretch; min-width: 0; border: var(--ol-3) solid var(--navy); border-radius: var(--r-s); background: var(--yellow); color: var(--white); }
.bx .m-ic { width: var(--ic-s); height: var(--ic-s); }
.is-l .bx .m-ic { width: var(--ic); height: var(--ic); }
.bx.done { background: var(--navy); }
.bx.making { background: repeating-linear-gradient(135deg, var(--yellow) 0 var(--sp-2), var(--navy) var(--sp-2) var(--sp-3)); }
.bx.plan { flex: var(--bx-plan); border-style: dashed; background: repeating-linear-gradient(135deg, var(--sky) 0 var(--ol-2), var(--white) var(--ol-2) var(--sp-2)); color: var(--navy); }
.fb-leg { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); color: var(--navy); font-size: var(--fs-label); line-height: var(--lh-ui); }
.fb-lg { display: inline-flex; align-items: center; gap: var(--sp-2); }
.key { flex: none; width: var(--ic); height: var(--ic-s); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--yellow); }
.key.done { background: var(--navy); }
.key.making { background: repeating-linear-gradient(135deg, var(--yellow) 0 var(--sp-1), var(--navy) var(--sp-1) var(--sp-2)); }
.key.plan { border-style: dashed; background: repeating-linear-gradient(135deg, var(--sky) 0 var(--ol-1), var(--white) var(--ol-1) var(--sp-1)); }
/* 見出しの行（数・札）と、その下の条件の行。数だけ大きい（言葉は条件と同じ大きさ） */
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-cond); font-weight: var(--w-bold); line-height: var(--lh-cond); }
.fb-head > .m-ic { width: var(--ic); height: var(--ic); }
.fb[data-tone="warn"] .fb-head > .m-ic { color: var(--warn); }
.fb[data-tone="bad"] .fb-head > .m-ic { color: var(--red); }
.cbar-card .fb-head { position: relative; padding-right: calc(var(--ic) + var(--sp-3)); }
.fb .fb-head > .m-ic.fb-go { position: absolute; top: 0; right: 0; margin-top: calc((var(--fs-cond) * var(--lh-cond) - var(--ic)) / 2); color: var(--navy); } /* ホームの箱の右はしの「>」（押すとプランの画面へ）。見出しの 1 行目（数の行）の高さの中ほど：札が 2 行目に回っても、2 行の間に浮かない。色は状態に関わらず紺 */
.fb-t { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-1); }
.fb-num { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; }
.fb.is-big .fb-num { font-size: var(--fs-h1); }
.fb-of { font-size: var(--fs-label); font-weight: var(--w-regular); line-height: var(--lh-ui); }
.fb-lines { display: grid; gap: var(--sp-1); font-size: var(--fs-cond); font-weight: var(--w-bold); line-height: var(--lh-cond); }
.fb-l { display: block; }
.fb-l > .m-ic { width: var(--ic); height: var(--ic); vertical-align: middle; margin-right: var(--sp-2); }
.fb-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* 札（chip）：事実を言う。押せない。印つきの札は水色（登録したカード） */
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--chip-h); padding: var(--sp-1) var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.chip.is-sky { background: var(--sky-l); padding-left: var(--sp-2); }
.chip.is-warm { background: var(--y4); }
.chip.is-warn { background: var(--y4); border-color: var(--warn); padding-left: var(--sp-2); } /* 期限切れのカード：琥珀の枠と、琥珀の絵 */
.chip.is-warn .m-ic { color: var(--warn); }
.chip .m-ic { width: var(--ic-s); height: var(--ic-s); }
/* 強制色（ハイコントラスト）のモードでも、形で見分けられるように */
@media (forced-colors: active) {
  .bx, .key { forced-color-adjust: none; border-color: CanvasText; background: Canvas; color: CanvasText; }
  .bx.done, .key.done { background: CanvasText; }
  .bx.done .m-ic { background-color: Canvas; }
  .bx.making, .key.making { background: repeating-linear-gradient(135deg, Canvas 0 var(--sp-1), CanvasText var(--sp-1) var(--sp-2)); }
  .bx.plan, .key.plan { background: repeating-linear-gradient(135deg, Canvas 0 var(--ol-2), CanvasText var(--ol-2) var(--sp-2)); }
}

/* ---------- タブ（上の帯の中の nav.tabs。app-deck 4.1）。登録者：4 つ（ホーム・つくる・記録・プラン）。スマホは画面の下に貼りつくバー、パソコンは帯のまん中。
   社員：幅にかかわらず帯の中に 3 つ（案件管理・週次管理・お知らせ）。ログインとカードの画面には出さない。
   選んでいるタブは、黄色の丸い札に紺の枠・名前は太い字（色だけでなく形でも分かる） ---------- */
.tabs { display: flex; align-items: center; gap: var(--sp-2); }
body:not([data-view="v-app"]) .tabs { display: none; }
.tabs button { display: grid; justify-items: center; align-content: center; gap: var(--sp-1); min-width: calc(var(--sp-10) + var(--sp-4)); min-height: var(--tab-h); margin: 0; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-m); background: none; color: var(--muted); font-size: var(--fs-label); font-weight: var(--w-regular); line-height: var(--lh-ui); letter-spacing: var(--ls-body); cursor: pointer; }
.tabs .pill { display: grid; place-items: center; width: calc(var(--ic-l) * 2); height: calc(var(--ic-l) + var(--sp-1)); border: var(--ol-2) solid transparent; border-radius: var(--r-pill); }
.tabs .pill .m-ic { width: var(--ic); height: var(--ic); }
.tabs .t-name { white-space: nowrap; }
.tabs button[aria-selected="true"], body[data-role="subscriber"][data-tab="weekly"] .tabs [data-tab="posts"] { color: var(--navy); font-weight: var(--w-bold); } /* 登録者は週次管理が「記録」の中なので、そこを開いているときも「記録」を選んだ見た目に */
.tabs button[aria-selected="true"] .pill, body[data-role="subscriber"][data-tab="weekly"] .tabs [data-tab="posts"] .pill { border-color: var(--navy); background: var(--yellow); }
@media (hover: hover) {
  .tabs button:hover .pill { background: var(--sky-l); }
  .tabs button[aria-selected="true"]:hover .pill { background: var(--y-hover); }
}
.tabs button:active .pill { background: var(--sky); }
/* 名前の出し分け：1 つの場所に 2 つの言い方を書き（index.html）、body[data-role] の印で 1 つだけ見せる。
   .l-sub ＝ 登録者の言い方（タブ「記録」「週ごと」・見出し「投稿の予定と結果」「週ごとの数字」。紹介ページと同じ言葉）、.l-staff ＝ 社員の言い方（社内のシートの名前「案件管理」「週次管理」）。
   どの幅でも同じ（スマホとパソコンで名前を替えない）。登録の前（印がまだ無い間）は、どちらも見えない画面なので気にしない */
.l-sub { display: none; }
body[data-role="subscriber"] .l-staff { display: none; }
body[data-role="subscriber"] .l-sub { display: inline; }
/* 週次管理のタブは登録者には出さない（記録の中の「週次」の札から開く）。お知らせのタブ（追補 4.14）は社員だけ。
   hidden ではなく CSS で隠すのは、patch.js の resetUi がタブのボタンの hidden を外すため */
body[data-role="subscriber"] .tabs [data-tab="weekly"], body[data-role="subscriber"] .staff-only, body[data-role="subscriber"] .tabs .staff-only { display: none; }

/* つくるの中の見た目（素材を選ぶ枠 #fileLabel・素材の一覧 #uploads・形式のカード・こだわる・ボタンの帯など）は create.css が決める */

/* ---------- 記録（案件管理・週次管理。app-deck の R-1 から R-5）。パソコンは表、スマホはカード（いちばん下の @media） ---------- */
/* 切り替え：「投稿」「週ごと」の 2 つの丸いタブ（登録者だけ。社員は上のタブ「案件管理」「週次管理」で切り替える）。選んだ方は黄色で太い字。カードの「くわしく」はスマホだけ */
.rec-switch { display: none; }
body[data-role="subscriber"] .rec-switch { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.rec-switch button { min-width: calc(var(--sp-10) + var(--sp-4)); min-height: var(--hit); padding: 0 var(--sp-5); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-ui); cursor: pointer; }
.rec-switch button[aria-selected="true"] { background: var(--yellow); font-weight: var(--w-bold); }
@media (hover: hover) { .rec-switch button[aria-selected="false"]:hover { background: var(--sky-l); } }
/* 「投稿を足す」「今週の数字を足す」の帯。見出しは登録者には見えない文字（切り替えの名前が見出しの代わり。読み上げには「投稿の予定と結果」「週ごとの数字」）、社員には見える（「案件管理」「週次管理」） */
.rec-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.rec-h { margin: 0; color: var(--navy); font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: var(--lh-head); }
body[data-role="subscriber"] .rec-h { position: absolute; width: var(--ol-1); height: var(--ol-1); margin: calc(var(--ol-1) * -1); padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.rec-add, .rec-btn, .rec-go { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--hit); padding: 0 var(--sp-4); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: var(--ls-btn); text-decoration: none; text-wrap: balance; cursor: pointer; }
.rec-add .m-ic, .rec-btn .m-ic { width: var(--ic); height: var(--ic); }
@media (hover: hover) { .rec-add:hover, .rec-btn:hover { background: var(--sky-l); } }
.rec-add:active, .rec-btn:active { background: var(--sky); }
.rec-add:disabled, .rec-btn:disabled { border-color: var(--off-line); background: var(--off); color: var(--muted); cursor: not-allowed; opacity: 1; }
.rec-who, .rec-help { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0 0 var(--sp-4); color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); }
.rec-who .m-ic { width: var(--ic); height: var(--ic); }
.rec-help .m-ic { width: var(--ic-s); height: var(--ic-s); margin-top: var(--sp-1); }
/* 表の入れ物（この 3 つの画面だけ。プランの画面の表は別） */
#t-posts .table-wrap, #t-weekly .table-wrap, #t-notices .table-wrap { overflow-x: auto; border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); }
table.grid { --col-s: var(--sp-11); --col-m: calc(var(--sp-11) + var(--sp-7)); --col-l: calc(var(--sp-11) * 2); border-collapse: collapse; width: 100%; font-size: var(--fs-label); } /* 欄の幅（小・中・大）。長さは名前だけで書く */
.grid th { position: sticky; top: 0; padding: var(--sp-2) var(--sp-3); background: var(--paper); color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); text-align: left; white-space: nowrap; }
.grid td { padding: var(--sp-2); border-top: var(--ol-1) solid var(--line); vertical-align: middle; }
.grid input, .grid select { width: auto; min-width: 0; min-height: var(--hit); margin: 0; padding: 0 var(--sp-2); border: var(--ol-1) solid var(--muted); border-radius: var(--r-s); background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-label); line-height: var(--lh-ui); }
.grid input[type="date"] { width: var(--col-m); }
.grid input[type="number"] { width: var(--col-s); }
.grid tr.dirty td { background: var(--y4); } /* 保存していない行（保存のボタンも黄色になる） */
.grid .acts { white-space: nowrap; }
.grid td[data-key="week"] { white-space: nowrap; }
/* 行の中の丸い絵のボタン：保存（チェック）・消す（ごみ箱）・くわしく（くの字）。名前は aria-label */
.rec-ib { display: inline-grid; place-items: center; flex: none; width: var(--hit); height: var(--hit); padding: 0; border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); background: var(--white); color: var(--navy); cursor: pointer; }
.rec-ib .m-ic { width: var(--ic); height: var(--ic); }
.rec-ib.rec-more { display: none; }
.rec-ib.is-bad { border-color: var(--red); color: var(--red); }
.grid tr.dirty .rec-ib.is-save { background: var(--yellow); }
@media (hover: hover) { .rec-ib:hover { background: var(--sky-l); } .grid tr.dirty .rec-ib.is-save:hover { background: var(--y-hover); } }
.rec-more[aria-expanded="true"] .m-ic { transform: rotate(-90deg); }
.rec-more .m-ic { transform: rotate(90deg); }
/* 案件管理・週次管理の 1 行は、スマホもパソコンも 1 枚のカード。欄の見出しは CSS で描く（thead は隠す。読み上げは欄の aria-label で）。
   スマホ（幅 767px まで）は、閉じたカードに題・状態・日付の 3 つと「くわしく」だけ、開くと全部の欄（いちばん下の @media）。パソコンは最初から全部の欄を出す（@media (min-width: 768px)）。
   表のままだと、パソコンでも 1300px 以上の横幅になり、横に送らないと「投稿日」「メモ」と 保存・消す に届かない（貼りつけた列が欄の上に重なって日付も切れる）ため */
#t-posts > .table-wrap, #t-weekly > .table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; }
table.cards thead { display: none; }
table.cards tr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin: 0 0 var(--sp-3); padding: var(--sp-4); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); }
table.cards td { order: 4; flex: 1 1 calc(50% - var(--sp-3) / 2); min-width: 0; padding: 0; border: 0; }
table.cards td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: var(--sp-1); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); } /* 見出し（読み上げは欄の aria-label で） */
table.cards td.acts::before { content: none; }
table.grid.cards input, table.grid.cards select { width: 100%; min-height: var(--field-h); padding: 0 var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); font-size: var(--fs-body); }
table.grid.cards tr.dirty { background: var(--y4); }
table.grid.cards tr.dirty td { background: none; }
#postsTable td[data-key="title"], #weeklyTable td[data-key="week"] { order: 1; }
#postsTable td[data-key="post_status"], #weeklyTable td[data-key="signal"] { order: 2; }
#postsTable td[data-key="planned_date"], #weeklyTable td[data-key="views"] { order: 3; }
#weeklyTable td[data-key="week"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
#weeklyTable td[data-key="week"]::before { flex-basis: 100%; margin: 0; }
#weeklyTable td[data-key="week"] input { flex: 0 1 var(--col-l); width: auto; }
#weeklyTable td[data-key="week"] .tag { margin: 0; }
table.cards td.acts { order: 9; display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; margin-left: auto; }
/* TikTok の取り込みで作られ、まだ誰も保存していない週の印（自動） */
.grid .tag { display: inline-flex; align-items: center; margin-left: var(--sp-2); padding: 0 var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--sky-l); color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); vertical-align: middle; white-space: nowrap; }
/* 空のとき・カードの登録がまだのとき（絵・ひとこと・ボタン） */
.rec-empty { display: grid; justify-items: center; gap: var(--sp-3); margin: 0; padding: var(--sp-6) var(--sp-4); text-align: center; }
.rec-empty[hidden] { display: none; }
.rec-empty .il { display: block; width: var(--il-s); height: var(--il-s); }
.rec-empty p { margin: 0; color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.rec-gate .il { width: var(--il-m); height: var(--il-m); }
.rec-go { min-width: calc(var(--il-l) + var(--sp-7)); min-height: var(--cta-h); border-color: var(--navy); background: var(--yellow); box-shadow: var(--shadow-cta); }
@media (hover: hover) { .rec-go:hover { background: var(--y-hover); } }
.rec-go:active { transform: translateY(var(--press-shift)); box-shadow: var(--shadow-cta-down); }
.rec-go:focus-visible { outline-offset: calc(var(--cta-lift) + var(--focus-off)); }
.tab.gated .table-wrap, .tab.gated .rec-add, .tab.gated .rec-who, .tab.gated .rec-help, .tab.gated .tt-line, .tab.gated #ttVideosBox { display: none; } /* app.js の recEmpty.gate */

/* ---------- TikTok（週次管理の 1 行と最近の動画。ホームのカードの中身と見た目は home.js・home.css） ---------- */
/* 週次管理の TikTok の 1 行（つないでいるか・最後の取り込み・今すぐ取り込む）と、最近の動画の表 */
.tt-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--sky-l); color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); }
.tt-line .tt-st { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); min-width: 0; font-weight: var(--w-bold); }
.tt-line .tt-st > .m-ic { width: var(--ic); height: var(--ic); }
.tt-line .tt-st > .warn { color: var(--warn); }
.tt-line .rec-btn { margin-left: auto; background: var(--white); }
#ttVideosBox { margin: var(--sp-6) 0 0; }
.th-h { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-head); }
.th-h .m-ic { width: var(--ic); height: var(--ic); }
.th-note { margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); }
.grid.videos td { padding: var(--sp-2); }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid .nowrap { white-space: nowrap; }
.grid .title { min-width: var(--col-l); overflow-wrap: anywhere; }
.grid th .th-ic .m-ic { display: none; width: var(--ic-s); height: var(--ic-s); } /* 見出しの絵は、スマホだけ（パソコンは言葉） */

/* ---------- プラン（#t-plan。app-deck 4.9 と 4.10）：上に絵か本数の箱、その下に「いまの 1 つのこと」。申し込みの内容は箱の中にたたむ。
   本数がないときの申し込み（最終確認の画面）は、行・同意・一言・ボタンを全部ひろげて出す（たたまない） ---------- */
#t-plan { max-width: var(--w-read); margin-inline: auto; }
.tab-h { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-h2); }
.plan { display: grid; gap: var(--sp-4); }
.plan > * { margin: 0; }
.plan-hero { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; } /* 絵と見出し（本数がない・カード・お支払い） */
.plan-hero .il { width: var(--il-m); height: var(--il-m); }
.plan-hero h2 { margin: 0; }
.plan-hero p { margin: 0; color: var(--navy); font-size: var(--fs-cond); line-height: var(--lh-cond); }
.il-still { display: none; } /* 動いている絵の、止めた絵（動きを止めているときだけ見せる） */
html[data-motion="off"] .il-live, html[data-motion="reduce"] .il-live { display: none; }
html[data-motion="off"] .il-still, html[data-motion="reduce"] .il-still { display: block; }
.iline { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--navy); font-size: var(--fs-cond); line-height: var(--lh-cond); } /* 絵つきの 1 行（条件・期限）。16px 以上 */
.iline > .m-ic { width: var(--ic); height: var(--ic); margin-top: calc((var(--fs-cond) * var(--lh-cond) - var(--ic)) / 2); }
.iline.is-key { font-weight: var(--w-bold); }
.iline.is-warn > .m-ic { color: var(--warn); }
.iline.is-bad > .m-ic { color: var(--red); }
.plan .note { display: grid; grid-template-columns: var(--ic) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--sky-l); color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); } /* 知らせの囲み（水色）。条件の文は 16px 以上 */
.plan .note > .m-ic { width: var(--ic); height: var(--ic); margin-top: calc((var(--fs-body) * var(--lh-cond) - var(--ic)) / 2); }
.plan .note.is-warn { border-color: var(--warn); background: var(--y4); }
.plan .note.is-warn > .m-ic { color: var(--warn); }
.plan .note p { margin: 0; }
.plan-acts { display: grid; gap: var(--sp-3); }
.plan-acts > * { margin: 0; }
.plan-acts > button, .plan-acts > a { width: 100%; text-wrap: balance; } /* 長い名前のボタンが 2 行になるとき、最後の 2 字だけが下に落ちないように */
.plan-acts > .primary { margin-bottom: var(--cta-lift); } /* 下の影の分だけ空ける */
.plan-acts .m-ic { width: var(--ic); height: var(--ic); }
.plan > .plan-more { margin: calc(var(--sp-2) * -1) 0 0 calc(var(--sp-2) * -1); } /* 押せる高さ（44px）は残したまま、字を上のボタンと左の縁にそろえる（link の横の余白と、上下の余白の分だけ引き寄せる） */
.card-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: calc(var(--hit) + var(--sp-4)); padding: var(--sp-2) var(--sp-4); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-ui); } /* 登録したカード（印・名前・カードを変える） */
.card-row > .m-ic { width: var(--ic); height: var(--ic); }
.card-row .card-t { flex: 1 1 auto; min-width: 0; font-weight: var(--w-bold); } /* 名前が 1 行に入らないほど狭いときは、「カードを変える」が次の行へ */
.card-row .link { margin-left: auto; }
.card-row .link .m-ic { width: var(--ic-s); height: var(--ic-s); margin-left: var(--sp-1); }
.card-row.is-warn { border-color: var(--warn); background: var(--y4); }
.card-row.is-warn > .m-ic { color: var(--warn); }
.plan-name { display: flex; align-items: center; gap: var(--sp-2); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.plan-name .m-ic { width: var(--ic); height: var(--ic); }
.plan-fine { color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); } /* 解約の期限など。ボタンのすぐ近くに、16px で */
.plan-hint { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); } /* プランの管理ボタンの先でできること（絵と言葉）。ボタンのすぐ下、16px で */
.plan-hint > span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.plan-hint .m-ic { width: var(--ic-s); height: var(--ic-s); }
#planMsg:empty { margin-bottom: calc(var(--sp-4) * -1); }
#planGo { width: 100%; margin-bottom: var(--cta-lift); text-wrap: balance; }
#planGo .m-ic { width: var(--ic); height: var(--ic); }
/* 申し込みの内容（箱の中にたたむ。+ が - になる）。シートの FAQ と同じ形 */
details.plan-terms { margin: 0; border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); overflow: hidden; }
details.plan-terms > summary { display: flex; align-items: center; gap: var(--sp-3); min-height: calc(var(--hit) + var(--sp-4)); margin: 0; padding: var(--sp-2) var(--sp-4); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); list-style: none; cursor: pointer; }
details.plan-terms > summary::-webkit-details-marker { display: none; }
details.plan-terms > summary:focus-visible { outline-offset: calc(var(--focus-w) * -1); }
details.plan-terms > summary .m-ic { width: var(--ic); height: var(--ic); }
details.plan-terms > summary .q { flex: 1; min-width: 0; }
details.plan-terms[open] > summary { border-bottom: var(--ol-2) solid var(--navy); background: var(--sky-l); }
details.plan-terms .pm { position: relative; flex: none; width: var(--pm); height: var(--pm); border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); }
details.plan-terms .pm::before, details.plan-terms .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--pm) * var(--pm-bar)); height: var(--ol-3); margin: calc(var(--ol-3) / -2) 0 0 calc(var(--pm) * var(--pm-bar) / -2); border-radius: var(--ol-2); background: var(--navy); transition: transform var(--t-ui) var(--e-io); }
details.plan-terms .pm::after { transform: rotate(90deg); }
details.plan-terms[open] .pm::after { transform: rotate(0deg); }
details.plan-terms .terms-wrap { padding: 0 var(--sp-4); }
details.plan-terms .terms tbody { border-top: 0; }
/* お申し込みの内容の行（TermsRow。app-deck 3.2）：絵・短い名前・値。値は 16px で、はじめの言葉だけ太い。スマホは名前の下に値、入れ物が 640px 以上なら名前の列 140px */
.terms-wrap { container-type: inline-size; }
.terms { display: block; width: 100%; border-collapse: collapse; }
.terms tbody { display: block; border-top: var(--ol-3) solid var(--navy); }
.terms tr { display: grid; gap: var(--sp-1); padding: var(--sp-4) 0; border-bottom: var(--ol-1) solid var(--line); }
.terms tr:last-child { border-bottom: 0; }
.terms th { display: flex; align-items: center; gap: var(--sp-2); padding: 0; background: none; color: var(--navy); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); text-align: left; }
.terms th .m-ic { width: var(--ic); height: var(--ic); }
.terms td { padding: 0; color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-body); }
@container (min-width: 640px) {
  .terms tr { grid-template-columns: var(--w-label) minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; }
  .terms th { min-height: var(--sp-6); }
}

/* ---------- 下のリンク（規約など。どの画面にも出す。カードの画面の同意の文のリンクも、ここから道を取る） ---------- */
.app-foot { margin-top: var(--sp-8); padding: var(--sp-6) max(var(--sp-4), calc((100% - var(--w-app)) / 2)) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px)); border-top: var(--ol-3) solid var(--navy); background: var(--paper); color: var(--navy); font-size: var(--fs-label); line-height: var(--lh-cond); }
.app-foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.app-foot a { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--navy); }
.app-foot .op { margin: var(--sp-2) 0 0; }

/* ---------- 知らせ ---------- */
/* 開いている窓より上に出すため、いちばん上の層（popover）にも置く。そのときの決まった見た目は、ここで全部打ち消す */
.toast { position: fixed; inset: auto auto var(--toast-bottom, var(--sp-6)) 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-3); width: max-content; max-width: calc(100vw - var(--sp-7)); min-height: var(--btn-h); height: auto; margin: 0; padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--r-l); overflow: visible; background: var(--navy); color: var(--white); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); z-index: var(--z-toast); }
.toast[hidden] { display: none; }
.toast::backdrop { display: none; }
.toast > .m-ic { width: var(--ic); height: var(--ic); color: var(--yellow); } /* 絵（チェック・i・三角・×の丸）は黄色。文字だけに頼らない */
.toast > .toast-t { min-width: 0; overflow-wrap: anywhere; }
@keyframes toast-in { from { transform: translateX(-50%) translateY(var(--sp-4)); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .toast:not([hidden]) { animation: toast-in var(--t-toast-in) var(--e-io) both; } }

/* ---------- パソコン（幅 768px から） ---------- */
@media (min-width: 768px) {
  /* 案件管理・週次管理：カードの形は上の共通の決まり。パソコンは最初から全部の欄を出し、1 行に入るだけ並べる（欄の基本の幅は --col-m。長い欄は広めに）。
     行の 保存・消す はカードの右下。表の右に貼りつけていた列は無い（貼りつけた列が欄の上に重なって、日付が切れていた） */
  table.cards td { flex: 1 1 var(--col-m); }
  #postsTable td[data-key="staff_name"] { flex: 1 1 var(--col-s); }
  #postsTable td[data-key$="_date"], #weeklyTable td[data-key="week"] { flex: 1 1 calc(var(--col-m) + var(--sp-6)); } /* 日付の欄は、年まで切れずに見える幅（カレンダーの絵の分も） */
  #postsTable td[data-key="title"], #postsTable td[data-key="job_id"], #postsTable td[data-key="post_url"], #postsTable td[data-key="memo"], #weeklyTable td[data-key="review"], #weeklyTable td[data-key="action"] { flex: 2 1 var(--col-l); }
  #postsTable td[data-key="title"], #postsTable td[data-key="post_status"], #postsTable td[data-key="planned_date"], #weeklyTable td[data-key="week"], #weeklyTable td[data-key="signal"], #weeklyTable td[data-key="views"] { order: 4; } /* 見える順 = Tab で進む順 = 前の表の列の順。「題名が先」は、せまいスマホのカードだけ */
  #weeklyTable td[data-key="week"] { position: relative; }
  #weeklyTable td[data-key="week"] .tag { position: absolute; top: calc(var(--sp-1) * -1); right: 0; } /* 「自動」の印は欄の名前と同じ行の右端へ（日付の下に落ちて、この欄だけ高くならないように。日付の枠には触れない） */
  /* お店のこと：保存する と あとで を横に並べる */
  .shop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
  #hearMsg { flex-basis: 100%; }
  #shopSave { min-width: calc(var(--il-l) + var(--sp-8)); }
}

/* ---------- パソコン：上の帯（幅 768px から。76px の白い帯・下に 3px の紺の線。名前は左・タブはまん中・動きを止める/ベル/アカウントは右。幅は中身の 960px にそろえる） ---------- */
@media (min-width: 768px) {
  .top { min-height: var(--top-h-l); padding-inline: max(var(--sp-5), calc((100% - var(--w-app)) / 2)); border-bottom: var(--ol-3) solid var(--navy); background: var(--white); }
  html { scroll-padding-top: calc(var(--top-h-l) + env(safe-area-inset-top, 0px)); }
  .tabs { margin-inline: auto; }
  .staff-pick { max-width: min(46vw, 20em); }
  .app-foot nav { gap: 0 var(--sp-6); }
}

/* ---------- スマホ（幅 767px まで） ---------- */
@media (max-width: 767px) {
  main { padding: var(--sp-3) var(--sp-4); }
  /* キーボードで移ったとき、下のバーの下に隠れないように（つくるの 2 は、ボタンの帯の高さ --action-h の分） */
  html { scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-7)); }
  html:has(> body[data-tab="edit"][data-cstep="2"]) { scroll-padding-bottom: calc(var(--action-h, 140px) + var(--sp-4)); }
  input, select, textarea { font-size: 16px; } /* iPhone で欄を押したときに画面が大きくならないように */

  /* 上の帯：右の 3 つはどれも 44px の丸（名前は読み上げ用の文字に残す）。ここで足す決まりは、名前と右の丸が 320px でも収まるようにする分だけ */
  .top { gap: var(--sp-2); padding-inline: max(var(--sp-3), env(safe-area-inset-left, 0px)) max(var(--sp-3), env(safe-area-inset-right, 0px)); }
  /* 社員：登録者を選ぶ欄は 1 行を全部使い、タブは 3 つを 1 行に並べる（帯は貼りつけず、上に流す）。ベルとアカウントは右に寄せる */
  body[data-role="staff"] .top { position: static; flex-wrap: wrap; row-gap: var(--sp-2); padding-bottom: var(--sp-2); }
  body[data-role="staff"] .top-right { display: contents; }
  body[data-role="staff"] .staff-pick { order: 3; flex: 1 1 100%; max-width: none; }
  body[data-role="staff"] #bellBtn { margin-left: auto; }
  body[data-role="staff"] .tabs { order: 4; flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  body[data-role="staff"] .tabs button { grid-auto-flow: column; justify-content: center; min-width: 0; min-height: var(--hit); padding: 0 var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); }
  body[data-role="staff"] .tabs button[aria-selected="true"] { background: var(--yellow); }
  body[data-role="staff"] .tabs .pill, body[data-role="staff"] .tabs button:hover .pill, body[data-role="staff"] .tabs button[aria-selected="true"]:hover .pill { width: var(--ic); height: var(--ic); border: 0; background: none; }

  /* 窓：下から上がるシート（上の角は丸く・上に太い線・幅いっぱい）。長いときは窓の中で動かす（上の帯と、お店のことの下の帯は貼りつく） */
  dialog.sheet { width: 100%; max-width: 100%; max-height: calc(100vh - var(--sp-6)); max-height: calc(100dvh - var(--sp-6)); margin: auto 0 0; border-width: var(--ol-3) 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .sheet .sheet-bar { padding-inline: var(--sp-4); }
  .acct-mail, .shop-lead { padding-inline: var(--sp-4); }
  .acct-list { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
  #shopSheet #hearing { padding: var(--sp-4) var(--sp-4) 0; }
  .shop-foot { margin: 0 calc(var(--sp-4) * -1); padding-inline: var(--sp-4); }
  @media (prefers-reduced-motion: no-preference) { dialog.sheet[open] { animation: sheet-up var(--t-sheet) var(--e-io) both; } }
  /* 最後の 1 本（#lastFreeSheet）と撮り方（#tipsSheet）の中身と見た目は、create.js・create.css が決める。ここは枠（dialog.sheet）だけ */

  /* 登録者：タブは画面の下に貼りつくバー（ホーム・つくる・記録・プラン。上に 3px の紺の線・白地。丸い札の下に名前）。
     ログインとカードの画面には出さない（[data-view="v-app"] を付けているので、上の「出さない」の決まりに勝つ）。
     週次管理のボタンは CSS だけで隠す（上のタブの節）。下の余白は、バーの高さ（--tabbar-h）と安全な余白の分を、ページの下にあける */
  body[data-role="subscriber"][data-view="v-app"] .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); border-top: var(--ol-3) solid var(--navy); background: var(--white); }
  body[data-role="subscriber"][data-view="v-app"] .tabs button { min-width: 0; min-height: 0; height: 100%; padding: 0 var(--sp-1); border-radius: 0; }
  body[data-role="subscriber"][data-view="v-app"] { padding-bottom: calc(var(--tabbar-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
  body[data-role="subscriber"][data-view="v-app"] .app-foot { margin-top: var(--sp-7); padding-bottom: var(--sp-6); }
  /* つくるの 2（素材と仕上がり）では、下のバーを出さない。下には「つくる」のボタンの帯が貼りつくので、ページの下をその高さ（--actionbar-h。create.css）の分あける。下のリンクは、フォームの下にそのまま出す */
  body[data-role="subscriber"][data-view="v-app"][data-tab="edit"][data-cstep="2"] { padding-bottom: var(--actionbar-h, 88px); }
  body[data-role="subscriber"][data-view="v-app"][data-tab="edit"][data-cstep="2"] .tabs { display: none; }

  /* お店のことの問い：雰囲気の見本は 4 つ並びのまま（間を少し詰める） */
  #hearing .moods { gap: var(--sp-2) var(--sp-1); }

  /* 記録のカード（形は上の共通の決まり）：スマホは、閉じたカードに題・状態・日付の 3 つの欄と「くわしく」だけ。開くと全部の欄と 保存・消す */
  table.cards td[data-key="post_url"], table.cards td[data-key="memo"], table.cards td[data-key="review"], table.cards td[data-key="action"] { flex-basis: 100%; }
  #postsTable td[data-key="title"], #weeklyTable td[data-key="week"] { flex: 1 1 calc(var(--col-m) + var(--sp-3)); }
  #postsTable td[data-key="post_status"], #weeklyTable td[data-key="signal"] { flex: 0 1 var(--col-m); }
  #postsTable tr:not(.open) td:not(.acts):not([data-key="title"]):not([data-key="post_status"]):not([data-key="planned_date"]),
  #weeklyTable tr:not(.open) td:not(.acts):not([data-key="week"]):not([data-key="signal"]):not([data-key="views"]) { display: none; }
  table.cards tr.open td.acts { flex-basis: 100%; margin-left: 0; }
  table.cards .rec-ib.rec-more { display: inline-grid; margin-left: auto; }
  table.cards tr:not(.open) td.acts > .rec-ib:not(.rec-more) { display: none; }
  table.cards tr.dirty:not(.open) td.acts > .rec-ib.is-save { display: inline-grid; } /* 閉じたまま直したときは「保存」も出す（直したまま気づかずに離れないように） */
  /* 最近の動画の表：見出しは絵だけ（言葉は見えない文字で残す） */
  .grid th .th-ic .m-ic { display: block; }
  .grid th .th-w { position: absolute; width: var(--ol-1); height: var(--ol-1); margin: calc(var(--ol-1) * -1); padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .grid.videos th { padding: var(--sp-2) var(--sp-1); text-align: center; }
  .grid.videos td { padding: var(--sp-2) var(--sp-1); }
  .grid.videos .title { min-width: 0; } /* 題が幅をとりすぎて、右の数が画面の外に出ないように */

  /* 知らせは、下のバーか「つくる」のボタンの帯のすぐ上（帯の高さ --action-h は app.js が測って入れる） */
  body[data-role="subscriber"][data-view="v-app"] .toast { --toast-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3)); }
  body[data-role="subscriber"][data-view="v-app"][data-tab="edit"][data-cstep="2"] .toast { --toast-bottom: calc(var(--action-h, calc(var(--sp-11) + var(--sp-9))) + var(--sp-3)); }
}

/* ---------- 小さいスマホ（幅 359px まで） ---------- */
@media (max-width: 359px) {
  .top-right { gap: var(--sp-1); } /* 右の 3 つの丸の間を詰めて、名前との間を少しあける（320px） */
  body[data-role="staff"] .tabs { gap: var(--sp-1); } /* 社員の 3 つのタブ（幅 1 つぶんが約 96px）：名前の字（4 字）が枠にくっつかないように、この幅だけ絵を外して字だけにする */
  body[data-role="staff"] .tabs .pill { display: none; }
}