/* ホーム（home.js）の見た目：ビルボード（絵・見出し・ボタン 1 つ）・下の 1 行（送っている途中・先週のふりかえり）・つくった動画・TikTok のカード・
   できた動画の窓（#jobSheet）。色・長さ・太さ・角・動きは tokens.css の名前だけで書く（数で書くのは、切り替えの幅 640px だけ）。
   スマホは 1 列（絵が上）、コンテナ #t-home の幅が 640px 以上は、絵が左・字が右（画面ではなく入れ物の幅で決める）。
   部品（.btn・.link・.chip・.note・.tag・.ring）は、ほかの画面の同じ名前とぶつからないよう #t-home と #jobSheet の中だけで決める。
   本数の棒（#homeCbar の中）の見た目は app.css、アイコンは icons.css、窓の土台（dialog.sheet・.sheet-bar・.sheet-x）は app.css。
   絵は /assets/ill の描いた絵（img.il）。つくっている間の輪だけ home.js が描く <svg>。動きは落ち着いて、止める・減らす設定のときは止める */

/* ---------- 土台 ---------- */
#t-home { container: home / inline-size; max-width: var(--w-app); margin-inline: auto; }
#t-home [hidden], #jobSheet [hidden] { display: none !important; }
:where(#t-home, #jobSheet) :where(p, ul, ol, li) { margin: 0; padding: 0; list-style: none; } /* 言い分けの弱い初期化（あとの規則が勝つ） */
:is(#t-home, #jobSheet) .nw { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
:is(#t-home, #jobSheet) :focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
:is(#t-home, #jobSheet) .m-ic { flex: none; width: var(--ic); height: var(--ic); vertical-align: middle; }
html:has(#jobSheet[open]) { overflow: hidden; } /* 窓の後ろの画面は動かさない */

/* ---------- 部品 ---------- */
/* ボタン：押せるものは白（.btn）か黄色（.btn-primary。画面に 1 つ）か文字（.link）。どれも高さは 44px 以上 */
:is(#t-home, #jobSheet) .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--btn-h); margin: 0; 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: inherit; 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; }
:is(#t-home, #jobSheet) .btn-primary { min-height: var(--cta-h); background: var(--yellow); box-shadow: var(--shadow-cta); }
:is(#t-home, #jobSheet) .btn-wide { display: flex; width: 100%; }
:is(#t-home, #jobSheet) .btn-s { min-height: var(--hit); padding: 0 var(--sp-4); }
:is(#t-home, #jobSheet) .btn-primary:focus-visible { outline-offset: calc(var(--cta-lift) + var(--focus-off)); }
@media (hover: hover) {
  :is(#t-home, #jobSheet) .btn-primary:hover { background: var(--y-hover); }
  :is(#t-home, #jobSheet) .btn:not(.btn-primary):hover { background: var(--sky-l); }
}
:is(#t-home, #jobSheet) .btn-primary:active { transform: translateY(var(--press-shift)); box-shadow: var(--shadow-cta-down); }
:is(#t-home, #jobSheet) .btn:not(.btn-primary):active { background: var(--sky); }
:is(#t-home, #jobSheet) .btn[aria-disabled="true"]:active { background: var(--off); transform: none; box-shadow: none; }
/* 準備している間の「保存」：押せない見た目（disabled にはしない。フォーカスが外れないように）。ことばも「準備しています…」に変わる */
:is(#t-home, #jobSheet) .btn[aria-disabled="true"] { border-color: var(--off-line); background: var(--off); color: var(--muted); box-shadow: none; transform: none; cursor: progress; }
:is(#t-home, #jobSheet) .link { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--hit); margin: 0; padding: 0 var(--sp-2); border: 0; border-radius: 0; background: none; color: var(--navy); font: inherit; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); text-decoration: underline; text-decoration-thickness: var(--ol-2); text-underline-offset: var(--ul-off); cursor: pointer; }
:is(#t-home, #jobSheet) .link:active { color: var(--navy2); }

/* 札（chip）：事実を言う。押せない。tag：状態の小さな札（印つき） */
:is(#t-home, #jobSheet) .chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--chip-h); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2); 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); text-wrap: balance; }
:is(#t-home, #jobSheet) .chip.is-sky { background: var(--sky-l); }
:is(#t-home, #jobSheet) .chip.is-warm { background: var(--y4); } /* 前の期間の分（このファイルの .chip が app.css の色に勝つので、ここで言い直す） */
:is(#t-home, #jobSheet) .chip.is-warn { background: var(--y4); border-color: var(--warn); } /* 期限切れのカード */
:is(#t-home, #jobSheet) .chip.is-warn .m-ic { color: var(--warn); }
:is(#t-home, #jobSheet) .chip.is-dash { border-style: dashed; }
:is(#t-home, #jobSheet) .tag { display: inline-flex; align-items: center; gap: var(--sp-1); 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); white-space: nowrap; }
:is(#t-home, #jobSheet) .tag .m-ic { width: var(--ic-s); height: var(--ic-s); }
:is(#t-home, #jobSheet) .tag.is-done { background: var(--sky-l); }
:is(#t-home, #jobSheet) .tag.is-wip { background: var(--y3); }
:is(#t-home, #jobSheet) .tag.is-bad { border-color: var(--red); background: var(--red-l); color: var(--red); }

/* お知らせの囲み（印と文）：お知らせは水色、できなかったことは赤（印の形でも見分ける）。受け取った文 .nt は長くても折り返す */
:is(#t-home, #jobSheet) .note { display: grid; grid-template-columns: var(--ic) minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: start; 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); text-align: left; }
:is(#t-home, #jobSheet) .note.is-bad { border-color: var(--red); background: var(--red-l); }
:is(#t-home, #jobSheet) .note.is-bad > .m-ic { color: var(--red); }
:is(#t-home, #jobSheet) .note .nt { min-width: 0; overflow-wrap: anywhere; }
:is(#t-home, #jobSheet) .note.is-bad .nt { font-weight: var(--w-bold); }

/* 進みぐあいの輪：100 の円・太さ 12。長さは home.js が stroke-dashoffset で置く。順番待ちは点線の輪と砂時計 */
:is(#t-home, #jobSheet) .ring { position: relative; display: grid; place-items: center; width: var(--il-l); height: var(--il-l); }
:is(#t-home, #jobSheet) .ring .rg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
:is(#t-home, #jobSheet) .ring .trk { fill: none; stroke: var(--sky-l); stroke-width: var(--rg-w); }
:is(#t-home, #jobSheet) .ring .val { fill: none; stroke: var(--navy); stroke-width: var(--rg-w); stroke-linecap: round; transition: stroke-dashoffset var(--t-ring) var(--e-io); }
:is(#t-home, #jobSheet) .ring .val.is-zero { opacity: 0; } /* 0% のとき、丸い端の点を出さない */
:is(#t-home, #jobSheet) .ring .wait { fill: none; stroke: var(--navy); stroke-width: var(--rg-w-s); stroke-dasharray: var(--rg-dash); stroke-linecap: round; }
:is(#t-home, #jobSheet) .ring-n { position: relative; display: inline-flex; align-items: baseline; gap: var(--sp-1); line-height: 1; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
:is(#t-home, #jobSheet) .ring-n b { font-size: var(--fs-h1); font-weight: var(--w-bold); letter-spacing: var(--ls-num); }
:is(#t-home, #jobSheet) .ring-n small { font-size: var(--fs-label); font-weight: var(--w-bold); }
:is(#t-home, #jobSheet) .ring > .m-ic { position: relative; width: var(--ic-xl); height: var(--ic-xl); }
:is(#t-home, #jobSheet) .ring.is-s { width: var(--hit); height: var(--hit); }
:is(#t-home, #jobSheet) .ring.is-s .ring-n { gap: 0; }
:is(#t-home, #jobSheet) .ring.is-s .ring-n b, :is(#t-home, #jobSheet) .ring.is-s .ring-n small { font-size: var(--fs-micro); letter-spacing: 0; }
:is(#t-home, #jobSheet) .ring.is-s > .m-ic { width: var(--ic); height: var(--ic); }
/* 一覧の左の 44px の札（できた・できなかった・順番待ち）：印の形と色で見分ける */
:is(#t-home, #jobSheet) .ring.is-tile { border: var(--ol-2) solid var(--navy); border-radius: var(--r-pill); }
:is(#t-home, #jobSheet) .s-done .ring.is-tile { background: var(--navy); color: var(--white); }
:is(#t-home, #jobSheet) .s-failed .ring.is-tile { border-color: var(--red); background: var(--red-l); color: var(--red); }
:is(#t-home, #jobSheet) .s-queued .ring.is-tile { border-style: dashed; background: var(--y3); }

/* 絵が読めなかったとき：点線の枠だけ残す（大きさは変えない） */
:is(#t-home, #jobSheet) .is-missing { border: var(--ol-2) dashed var(--muted); border-radius: var(--r-m); background: var(--off); }
:is(#t-home, #jobSheet) .is-missing > img { visibility: hidden; }

/* ---------- ビルボード ---------- */
#billboard { position: relative; isolation: isolate; display: grid; justify-items: center; gap: var(--sp-5); padding: var(--sp-5) 0 var(--sp-4); text-align: center; }
#billboard:not([data-state]) { visibility: hidden; } /* 1 回目の読み込みが終わるまで、空の欄を見せない */
#bbMedia { position: relative; display: grid; place-items: center; max-width: 100%; }
#bbMedia > img.il, :is(#t-home, #jobSheet) .js-pic > img.il { display: block; max-width: 100%; height: auto; }
:is(#t-home, #jobSheet) .bb-text { display: grid; justify-items: center; gap: var(--sp-3); width: 100%; min-width: 0; }
:is(#t-home, #jobSheet) .bb-title { margin: 0; color: var(--navy); font-size: var(--fs-h1); font-weight: var(--w-bold); line-height: var(--lh-head); letter-spacing: var(--ls-head); text-wrap: balance; }
:is(#t-home, #jobSheet) .bb-sub { margin: calc(var(--sp-1) * -1) 0 0; color: var(--navy); font-size: var(--fs-lead); font-weight: var(--w-regular); line-height: var(--lh-cond); text-wrap: balance; }
/* 絵の下の行（時間・待つこと・できなかった理由・本数は戻しました・できた動画の名前） */
:is(#t-home, #jobSheet) .bb-lines { display: grid; justify-items: center; gap: var(--sp-2); width: 100%; }
:is(#t-home, #jobSheet) .bb-lines > .note { justify-self: stretch; }
:is(#t-home, #jobSheet) .bb-line { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-ui); }
:is(#t-home, #jobSheet) .bb-line .m-ic { color: var(--navy); }
:is(#t-home, #jobSheet) .bb-line.is-eta { color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
:is(#t-home, #jobSheet) .bb-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-ui); }
:is(#t-home, #jobSheet) .bb-meta .m-n { font-weight: var(--w-bold); }
:is(#t-home, #jobSheet) .bb-meta .m-t { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-variant-numeric: tabular-nums; }
:is(#t-home, #jobSheet) .bb-meta .m-t .m-ic { color: var(--navy); }
/* ボタン（1 つ）と文字のリンク。ボタンの影（下に 5px）の分だけ、下に余白を取る */
:is(#t-home, #jobSheet) .bb-acts { display: grid; gap: var(--sp-2); width: 100%; margin-top: var(--sp-3); }
:is(#t-home, #jobSheet) .bb-acts > span { display: block; min-width: 0; }
:is(#t-home, #jobSheet) .bb-acts > span:empty { display: none; }
#bbAct { padding-bottom: var(--cta-lift); }
#bbAlt { justify-self: center; }
#bbAlt .bb-alts { display: grid; justify-items: center; gap: var(--sp-1); } /* 文字のリンクが 2 つ（お支払い待ちのとき） */
#bbNote { margin: 0; color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-ui); }
/* 本数の棒（中身は app.css）：ボタンのすぐ下 */
#homeCbar { width: 100%; margin: var(--sp-3) 0 0; text-align: left; }
:is(#t-home, #jobSheet) .bb-ask { margin: var(--sp-1) 0 0; }
/* はじめて：撮る・送る・できる（3 つの小さな絵と大きな数） */
#bbMedia:has(> .steps) { display: block; width: 100%; }
:is(#t-home, #jobSheet) .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); width: 100%; }
:is(#t-home, #jobSheet) .steps li { display: grid; justify-items: center; align-content: start; gap: var(--sp-2); min-width: 0; }
:is(#t-home, #jobSheet) .steps img.il { display: block; max-width: 100%; height: auto; }
:is(#t-home, #jobSheet) .steps .st-r { display: inline-flex; align-items: baseline; gap: var(--sp-2); }
:is(#t-home, #jobSheet) .steps .sn { font-size: var(--fs-h1); font-weight: var(--w-bold); line-height: 1; letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums; }
:is(#t-home, #jobSheet) .steps .sl { font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }

/* ---------- 下の 1 行（素材を送っている途中・先週のふりかえり） ---------- */
:is(#t-home, #jobSheet) .up-strip, :is(#t-home, #jobSheet) .nudge { margin: 0 0 var(--sp-3); }
:is(#t-home, #jobSheet) .up-strip { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); }
:is(#t-home, #jobSheet) .up-ic { display: grid; place-items: center; flex: none; }
:is(#t-home, #jobSheet) .up-main { display: grid; flex: 1; gap: var(--sp-2); min-width: 0; }
:is(#t-home, #jobSheet) .up-t { font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
:is(#t-home, #jobSheet) .up-bar { display: block; height: var(--sp-3); overflow: hidden; border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--sky-l); }
:is(#t-home, #jobSheet) .up-fill { display: block; width: 0; height: 100%; background: var(--navy); transition: width var(--t-ui) var(--e-io); }
:is(#t-home, #jobSheet) .up-strip .link { flex: none; }
:is(#t-home, #jobSheet) .up-strip.is-bad { border-color: var(--red); background: var(--red-l); }
:is(#t-home, #jobSheet) .up-strip.is-bad .up-ic, :is(#t-home, #jobSheet) .up-strip.is-bad .up-t { color: var(--red); }
:is(#t-home, #jobSheet) .up-strip.is-bad .up-bar { display: none; }
:is(#t-home, #jobSheet) .nudge-btn { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: calc(var(--hit) + var(--sp-2)); margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--y4); 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; }
:is(#t-home, #jobSheet) .nudge-btn .lb { flex: 1; min-width: 0; }
@media (hover: hover) { :is(#t-home, #jobSheet) .nudge-btn:hover { background: var(--y3); } }
:is(#t-home, #jobSheet) .nudge-btn:active { background: var(--y2); }

/* ---------- つくった動画（新しい 3 本と、すべて見る）と TikTok ---------- */
:is(#t-home, #jobSheet) .home-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sp-6); margin-top: var(--sp-4); }
:is(#t-home, #jobSheet) .home-jobs h2 { margin: 0 0 var(--sp-3); color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-head); }
:is(#t-home, #jobSheet) .home-jobs > p { margin-top: var(--sp-1); }
:is(#t-home, #jobSheet) .job-rows { display: grid; gap: var(--sp-2); }
:is(#t-home, #jobSheet) .job-rows + .job-rows, :is(#t-home, #jobSheet) .home-jobs > p + .job-rows { margin-top: var(--sp-2); }
:is(#t-home, #jobSheet) .job-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: calc(var(--hit) + var(--sp-4)); margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m); background: var(--white); color: var(--navy); font: inherit; text-align: left; cursor: pointer; }
:is(#t-home, #jobSheet) .job-row.s-failed { border-color: var(--red); }
@media (hover: hover) { :is(#t-home, #jobSheet) .job-row:hover { background: var(--sky-l); } }
:is(#t-home, #jobSheet) .job-row:active { background: var(--sky); }
:is(#t-home, #jobSheet) .job-row > .m-ic { color: var(--muted); }
:is(#t-home, #jobSheet) .tile { display: grid; place-items: center; flex: none; width: var(--hit); height: var(--hit); }
:is(#t-home, #jobSheet) .jr-tx { display: grid; flex: 1; gap: var(--sp-1); min-width: 0; }
:is(#t-home, #jobSheet) .jr-n { overflow: hidden; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); text-overflow: ellipsis; white-space: nowrap; }
:is(#t-home, #jobSheet) .jr-s { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
:is(#t-home, #jobSheet) .job-eta { display: none; } /* できあがりの目安は入れ物が広いときだけ（下） */
:is(#t-home, #jobSheet) .job-row.s-failed .jr-s { color: var(--red); }
#jobsMore { margin-left: calc(var(--sp-2) * -1); }

/* TikTok のカード（つなぐ前・切れた・つながっている）：白い枠。数は 3 つ、ことばは目に見えない名前に */
#ttCard { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-4); border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy); }
#ttCard .k { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--navy); font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-head); }
#ttBody { min-width: 0; }
:is(#t-home, #jobSheet) .tk { display: grid; justify-items: start; gap: var(--sp-3); }
:is(#t-home, #jobSheet) .tk > p, :is(#t-home, #jobSheet) .tk > ul { margin: 0; }
:is(#t-home, #jobSheet) .tk-l, :is(#t-home, #jobSheet) .tk-trust { color: var(--navy); font-size: var(--fs-body); line-height: var(--lh-cond); }
:is(#t-home, #jobSheet) .tk-trust { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--muted); }
:is(#t-home, #jobSheet) .tk-trust .m-ic { color: var(--navy); }
:is(#t-home, #jobSheet) .tk-warn { display: grid; grid-template-columns: var(--ic) minmax(0, 1fr); gap: var(--sp-3); align-items: start; justify-self: stretch; padding: var(--sp-3) var(--sp-4); border: var(--ol-2) solid var(--warn); border-radius: var(--r-m); background: var(--warn-l); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
:is(#t-home, #jobSheet) .tk-warn > .m-ic { color: var(--warn); }
:is(#t-home, #jobSheet) .tk-warn > span:not(.m-ic) { min-width: 0; overflow-wrap: anywhere; }
:is(#t-home, #jobSheet) .tk-name { font-size: var(--fs-h3); font-weight: var(--w-bold); line-height: var(--lh-head); overflow-wrap: anywhere; }
:is(#t-home, #jobSheet) .tk-nums { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-self: stretch; } /* 数は切らない：入らなければ次の段へ */
:is(#t-home, #jobSheet) .tk-nums li { display: grid; flex: 1 1 auto; justify-items: start; gap: var(--sp-1); min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--sky-l); }
:is(#t-home, #jobSheet) .tk-nums b { max-width: 100%; overflow-wrap: anywhere; font-size: var(--fs-h2); font-weight: var(--w-bold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
:is(#t-home, #jobSheet) .tk-sync { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
:is(#t-home, #jobSheet) .tk-sync .m-ic { color: var(--navy); }
:is(#t-home, #jobSheet) .tk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }

/* ---------- できた動画の窓（#jobSheet。土台は app.css の dialog.sheet：スマホは下から上がるシート、パソコンはまん中の窓） ---------- */
#sheetTitle { display: flex; flex-wrap: wrap; align-items: center; flex: 1; gap: var(--sp-1) var(--sp-2); min-width: 0; }
#sheetBody { display: grid; gap: var(--sp-4); padding: var(--sp-2) var(--sp-5) var(--sp-5); }
:is(#t-home, #jobSheet) .js-pic { display: grid; place-items: center; justify-self: center; max-width: 100%; }
:is(#t-home, #jobSheet) .js-info { display: grid; justify-items: start; gap: var(--sp-3); min-width: 0; }
:is(#t-home, #jobSheet) .js-info > .note { justify-self: stretch; }
#jobSheet .bb-line { justify-self: stretch; justify-content: center; }
:is(#t-home, #jobSheet) .js-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
:is(#t-home, #jobSheet) .jw { display: inline-flex; align-items: center; gap: var(--sp-1); }
:is(#t-home, #jobSheet) .js-used { display: inline-grid; place-items: center; width: var(--ic-l); height: var(--ic-l); border: var(--ol-2) solid var(--navy); border-radius: var(--r-s); background: var(--sky-l); }
#jobSheet .js-used .m-ic { width: var(--ic-s); height: var(--ic-s); }
:is(#t-home, #jobSheet) .chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
#jobSheet .chips .chip { min-height: var(--box-m); font-size: var(--fs-label); }
:is(#t-home, #jobSheet) .chips-k { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); }
:is(#t-home, #jobSheet) .js-note { display: grid; grid-template-columns: var(--ic) minmax(0, 1fr); gap: var(--sp-2); align-items: start; justify-self: stretch; color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-ui); overflow-wrap: anywhere; }
:is(#t-home, #jobSheet) .js-note .m-ic { color: var(--navy); }
:is(#t-home, #jobSheet) .js-acts { display: grid; gap: var(--sp-3); }
:is(#t-home, #jobSheet) .js-acts > .btn-primary { margin-bottom: var(--cta-lift); }
:is(#t-home, #jobSheet) .js-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--il-l) + var(--sp-2)), 1fr)); gap: var(--sp-2); }
:is(#t-home, #jobSheet) .js-more .btn { padding-inline: var(--sp-3); }
:is(#t-home, #jobSheet) .js-ios { margin: 0; color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-ui); text-align: center; }
#sheetMsg { margin: 0; padding: 0 var(--sp-5) var(--sp-5); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); }
#sheetMsg:empty { padding: 0; }
#sheetMsg .link { font-weight: var(--w-bold); }
@media (max-width: 767px) { #sheetBody { padding-inline: var(--sp-4); } #sheetMsg:not(:empty) { padding-inline: var(--sp-4); } } /* スマホは窓の字の左右を 16px に（土台の .sheet-bar と同じ） */

/* ---------- 入れ物が広いとき（#t-home の幅 640px から）：絵が左、字が右。ボタンは横いっぱいにしない ---------- */
@container home (min-width: 640px) {
  #billboard { grid-template-columns: var(--il-l) minmax(0, 1fr); align-items: center; justify-items: start; column-gap: var(--sp-8); padding: var(--sp-6) 0; text-align: left; }
  #billboard[data-state="new"] { grid-template-columns: calc(var(--il-s) * 3 + var(--sp-3) * 2) minmax(0, 1fr); }
  #bbMedia { justify-self: center; }
  :is(#t-home, #jobSheet) .bb-text { justify-items: start; max-width: var(--w-read); }
  :is(#t-home, #jobSheet) .bb-lines { justify-items: start; }
  :is(#t-home, #jobSheet) .bb-line, :is(#t-home, #jobSheet) .bb-meta { justify-content: flex-start; }
  :is(#t-home, #jobSheet) .bb-acts { justify-items: start; }
  #bbAct .btn-wide { display: inline-flex; width: auto; min-width: calc(var(--il-l) + var(--sp-8)); }
  #bbAlt { justify-self: start; }
  #bbAlt .bb-alts { justify-items: start; }
  #bbAlt .link { margin-left: calc(var(--sp-2) * -1); }
  #homeCbar { max-width: var(--w-read); }
  :is(#t-home, #jobSheet) .up-strip, :is(#t-home, #jobSheet) .nudge { max-width: var(--w-read); }
  :is(#t-home, #jobSheet) .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-7); }
  :is(#t-home, #jobSheet) .job-eta { display: inline; }
  :is(#t-home, #jobSheet) .job-eta:empty { display: none; }
}

/* ---------- 動きを止めている・減らす設定のとき：動かさない（輪は長さだけ変わる） ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(#t-home, #jobSheet) *, :is(#t-home, #jobSheet) *::before, :is(#t-home, #jobSheet) *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
html[data-motion="off"] :is(#t-home, #jobSheet) *, html[data-motion="off"] :is(#t-home, #jobSheet) *::before, html[data-motion="off"] :is(#t-home, #jobSheet) *::after { transition-duration: 0s !important; animation-duration: 0s !important; }