/* ============================================================================
   ネオヘルスケア シフト管理 — デザイントークン（2026-09-19 再改訂）

   参考元は1本、指定どおり SmartHR Design System (https://smarthr.design/) のみ。
   公開されている「規則の数値」を実際にページから取得し、この案件の制約に当てはめた。
   コードのコピーはしていない（採ったのは色のhex・サイズの刻み・余白の単位という数値だけ）。

   取得できたページと、そこに書かれていた具体的な数値:
     - /basics/colors/
         プライマリ SmartHR Blue #00c4cc／グレースケール Stone01 #f8f7f6〜Stone04 #4e4c49／
         セカンダリ Black #23221f・Orange #ff9900・White／
         拡張カラー群 Aqua・Sakura・Momiji 等（各01〜04の4段階、hex付き）
     - /basics/typography/
         和文は游ゴシック体（システムフォント）を推奨。ウェイトは全7段階のうち
         M と B の2種類だけを使う、と明記。px・行間の実数値はこのページ自体には無い。
     - /basics/spacing/ … 404。取得できなかった。
         代わりに /products/design-tokens/spacing/ で数値を取得（プリミティブトークン）:
         0 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64px。基準16px・すべて4pxの倍数。
     - /products/design-patterns/
         個別コンポーネントの数値仕様は無く、「概要→用語定義→考え方→構成→レイアウト→
         バリエーション」という11項目のテンプレート構成の説明のみだった。
         ステータス表示は StatusLabel コンポーネントへ誘導されていたため、
         /products/components/status-label/ も追加取得:
         color props は error/grey/blue/green/red/warning の6種、hex値は非公開。
         「色のみでステータスを伝えず、適切な名前を付ける」という方針が明記されていた。
     - /products/components/table/
         「画面幅を越えたテーブルは2次元スクロールを招くため、横スクロールでなく
         垂直方向に積み上げることを推奨」という記述のみ。padding・罫線色の数値は非公開。
     - /products/components/button/
         サイズは「通常／小」、色は primary/secondary/tertiary/danger/text/skeletonの
         6分類。px・hexの実数値は非公開。
     - /products/design-tokens/color/ … 実際のhex一覧を取得（本ファイルの主数値ソース）
     - /products/design-tokens/typography/ … フォントサイズ・行送りの実数値を取得
     - /products/design-tokens/radius/ … 角丸の実数値を取得（s4 / m6 / l8 / full10000）

   数値をこの案件にどう当てはめたか（曜日3色との衝突回避を含む）:
     1) MAIN(#0077c7)は不採用。土曜固定色 #1155cc と同じ青の色域で衝突するため。
        代わりに拡張カラー Aqua-04(#0f7f85・色相約185°)を構造色/操作の基準色に採用。
        白文字との コントラスト比を計算し 4.78:1（AA基準4.5:1をクリア）を確認した。
     2) DANGER(#e01e5a)も不採用。色相を計算すると約341°で、日曜固定色 #cc0000(色相0°)
        とは約19°しか離れておらず、見分けにくいリスクがあると判断。
        代わりに Sakura-04(#82407c・色相約308°)をエラー/危険色に採用。赤の色域から
        明確に離れており、白文字コントラストも 7.06:1 と余裕がある。
     3) Orange(#ff9900)は白文字ボタンで使うとコントラスト比 2.14:1 で不合格（実測）。
        明度だけ落とした #b35900 に調整し 4.83:1（AA達成）。色相は約33°のまま維持し、
        日曜(赤・色相0°)・祝日(緑・色相96°)・土曜(青・色相224°)のどこにも属さない。
     4) WARNING_YELLOW(#ffcc17)は文字色に使うと 1.51:1 で不合格（実測）。文字・枠用には
        暗くした #806600（5.50:1）を使い、生の #ffcc17 は「濃い文字を乗せる塗り帯」
        専用として残した（白文字を乗せない）。
     5) グレースケール・境界線・本文色・背景色は Stone/Greyscale の実測値をそのまま採用
        （#23221e / #706d65 / #d6d3d0 / #f8f7f6 / #edebe8 / #f2f1f0）。
     6) 角丸は s=4 / m=6 / l=8 / full を実測値のまま採用（fullは10000pxの機能的等価として999pxに丸めた）。
     7) 余白は /products/design-tokens/spacing/ の4px刻みプリミティブをそのまま採用
        （--sp-N は N×4px。例: --sp-4 = 16px）。
     8) フォントサイズは /products/design-tokens/typography/ の実測値をそのまま採用
        （XS12 / S13.71 / M16 / L19.2 / XL24）。行送りは TIGHT=1.25（見出し）/
        NORMAL=1.5（本文）/ NONE=1（ラベル）の比率をそのまま適用。
        フォントウェイトは basics/typography/ の指示どおり M(500)とB(700)の2種類のみ使う。

   動かせない制約（今回も維持）:
     1) 曜日配色は固定 = 祝日 #38761d > 日曜 #cc0000 > 土曜 #1155cc
        → アクセント/操作色/状態色はこの3色域を避ける（根拠は上の2)3)に実測値で明記）
     2) 全文日本語 → 和文フォントを明示（Zen Kaku Gothic New、フォールバックに
        SmartHR推奨の游ゴシック体を明記）
     3) 勤務パターン文字列が長い → .dayrow はグリッド列を minmax(0,1fr) にして収める
     4) 管理者の調整グリッドは 30名×31日。横スクロールは .tablewrap の中だけ
        （SmartHRのTableページが言う「2次元スクロールを避ける」の裏返しとして、
        せめて横方向のスクロール領域を1箇所に閉じ込めて縦方向は素直に伸ばす）
     5) ライト/ダーク両対応。:root(ライト全定義) → prefers-color-scheme(トークンのみ
        再定義) → [data-theme] で明示切替、の3段構え
     6) スマホのタップ領域は44px以上を維持する（components.css側の実測済みブロックは
        本改訂でも一切変更していない）
   ============================================================================ */

:root{
  /* 面と文字（SmartHR Greyscale/Stone の実測値） */
  --bg:#f8f7f6;        /* GREY_5 / BACKGROUND */
  --surface:#ffffff;
  --sunk:#f2f1f0;       /* GREY_7 / OVER_BACKGROUND（hover等） */
  --head:#edebe8;       /* GREY_9 / HEAD（表ヘッダー専用） */
  --ink:#23221e;        /* GREY_100 / TEXT_BLACK */
  --muted:#706d65;      /* GREY_65 / TEXT_GREY */
  --line:#d6d3d0;       /* GREY_20 / BORDER */
  --line-strong:#c1bdb7;/* GREY_30 */

  /* 構造色（トップバー・見出し帯）。SmartHR拡張カラー Aqua-04。土曜の青(#1155cc)とは
     色相を約40°離してある（詳細は上部コメント1)） */
  --accent:#0f7f85;
  --accent-soft:#d4f4f5; /* Aqua-01（実測値そのまま） */
  --accent-ink:#ffffff;

  /* 操作色（主ボタン・締切バナー・選択済みチップ）。SmartHR Secondary Orange(#ff9900)を
     白文字コントラスト確保のため暗く調整（詳細は上部コメント3)） */
  --action:#b35900;
  --action-soft:#fdecd6;
  --btn-ink:#ffffff;

  /* 状態色（アクセント/操作色とは別枠。曜日3色と被らないよう根拠つきで選定） */
  --ok:var(--accent);        /* 「確定済み」はaccentと同じ色相を再利用し、形（チェック）で差別化。
                                 新しい色相を増やすと曜日3色との衝突リスクが増えるため */
  --ok-soft:var(--accent-soft);
  --warn:#806600;            /* WARNING_YELLOW(#ffcc17)を文字用に暗く調整（詳細は上部4)） */
  --warn-fill:#ffcc17;       /* 実測値そのまま。塗り帯専用、白文字は乗せない */
  --warn-soft:#fff6d9;
  --danger:#82407c;          /* Sakura-04 実測値そのまま（詳細は上部2)） */
  --danger-soft:#f9e9f7;     /* Sakura-01 実測値そのまま */

  /* 曜日（現行GASの定数をそのまま・優先度固定） */
  --day-hol:#38761d;
  --day-hol-soft:#e7f0e2;
  --day-sun:#cc0000;
  --day-sun-soft:#fbe6e6;
  --day-sat:#1155cc;
  --day-sat-soft:#e4ebfa;
  --day-def:var(--ink);

  /* 書体（basics/typography/ の指示: 游ゴシック体・ウェイトはM/Bの2種のみ） */
  --font-jp:"Zen Kaku Gothic New","Yu Gothic Medium","Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* サイズ（design-tokens/typography/ の実測値） */
  --fs-xs:12px;
  --fs-s:13.7px;
  --fs-m:16px;
  --fs-l:19.2px;
  --fs-xl:24px;
  --lh-tight:1.25;  /* 見出し */
  --lh-normal:1.5;  /* 本文 */
  --lh-none:1;      /* ラベル */

  /* 余白（design-tokens/spacing/ の4px刻みプリミティブ。--sp-N = N×4px） */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;

  /* 角丸（design-tokens/radius/ の実測値。full=10000pxは機能的に999pxへ丸めた） */
  --radius-s:4px;
  --radius-m:6px;
  --radius-l:8px;
  --radius-full:999px;
  --radius:var(--radius-l); /* 既存セレクタとの後方互換エイリアス */

  --shadow:0 2px 6px rgba(35,34,30,.10);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141019;
    --surface:#1d1721;
    --sunk:#241d2a;
    --head:#2a2130;
    --ink:#efe9ee;
    --muted:#a79aac;
    --line:#332a3b;
    --line-strong:#4a3d54;

    --accent:#5fd6dc;
    --accent-soft:#123a3c;
    --accent-ink:#072022;

    --action:#ffb04d;
    --action-soft:#3a2408;
    --btn-ink:#2a1a00;

    --ok:var(--accent);
    --ok-soft:var(--accent-soft);
    --warn:#f0cf6b;
    --warn-fill:#ffcc17;
    --warn-soft:#3a2c08;
    --danger:#dba0d4;
    --danger-soft:#3a1f38;

    --day-hol:#7bc257;
    --day-hol-soft:#1b2a18;
    --day-sun:#ff7a72;
    --day-sun-soft:#301c1a;
    --day-sat:#7fb0f5;
    --day-sat-soft:#18232f;

    --shadow:0 2px 8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#141019;
  --surface:#1d1721;
  --sunk:#241d2a;
  --head:#2a2130;
  --ink:#efe9ee;
  --muted:#a79aac;
  --line:#332a3b;
  --line-strong:#4a3d54;

  --accent:#5fd6dc;
  --accent-soft:#123a3c;
  --accent-ink:#072022;

  --action:#ffb04d;
  --action-soft:#3a2408;
  --btn-ink:#2a1a00;

  --ok:var(--accent);
  --ok-soft:var(--accent-soft);
  --warn:#f0cf6b;
  --warn-fill:#ffcc17;
  --warn-soft:#3a2c08;
  --danger:#dba0d4;
  --danger-soft:#3a1f38;

  --day-hol:#7bc257;
  --day-hol-soft:#1b2a18;
  --day-sun:#ff7a72;
  --day-sun-soft:#301c1a;
  --day-sat:#7fb0f5;
  --day-sat-soft:#18232f;

  --shadow:0 2px 8px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------- 基本 */
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-jp);
  font-size:var(--fs-s);
  font-weight:500; /* SmartHR推奨のM相当 */
  line-height:var(--lh-normal);
  overflow-x:hidden; /* 制約4: bodyは横に動かさない。横スクロールは .tablewrap だけ */
  -webkit-font-smoothing:antialiased;
}
button,select,input,textarea{font-family:inherit} /* 和文フォントをフォーム部品にも明示継承 */
.num,.tabular{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;line-height:var(--lh-tight);text-wrap:balance;font-weight:700}
h1{font-size:var(--fs-l)}
h2{font-size:var(--fs-m)}
h3{font-size:var(--fs-s)}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* --------------------------------------------------------------- 骨格 */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;gap:var(--sp-5);padding:0 var(--sp-5);height:54px;flex:none;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  position:relative;z-index:5;
}
.topbar .brand{font-weight:700;font-size:var(--fs-s);letter-spacing:.02em;white-space:nowrap;display:flex;align-items:center}
.topbar .brand::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--action);margin-right:var(--sp-2);flex:none;
}
.topbar nav{display:flex;gap:2px;margin-left:var(--sp-2);overflow-x:auto}
.topbar nav button{
  background:none;border:none;color:inherit;opacity:.72;cursor:pointer;
  font:inherit;padding:7px 13px;border-radius:var(--radius-m);white-space:nowrap;
}
.topbar nav button:hover{opacity:1;background:rgba(255,255,255,.18)}
.topbar nav button[aria-current="page"]{
  opacity:1;background:var(--action);color:var(--btn-ink);font-weight:700;
}
.topbar .who{margin-left:auto;font-size:var(--fs-xs);opacity:.85;white-space:nowrap}
.topbar .who button{
  background:none;border:1px solid currentColor;color:inherit;opacity:.85;
  font:inherit;font-size:11.5px;padding:2px 9px;border-radius:var(--radius-full);cursor:pointer;margin-left:var(--sp-3);
}
main{flex:1;padding:var(--sp-6) var(--sp-5) 64px;max-width:1280px;width:100%;margin:0 auto}

/* --------------------------------------------------------------- 見出し */
.pagehead{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:2px solid var(--line)}
.pagehead h1{position:relative;padding-left:13px}
.pagehead h1::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:2px;background:var(--action);
}
.pagehead .sub{color:var(--muted);font-size:var(--fs-xs)}
.pagehead .spacer{margin-left:auto}

/* --------------------------------------------------------------- 部品 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow)}
.card + .card{margin-top:var(--sp-4)}
.card-head{padding:11px var(--sp-4);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-3)}
.card-head h2{position:relative;padding-left:11px}
.card-head h2::before{
  content:"";position:absolute;left:0;top:1px;bottom:1px;width:3px;border-radius:2px;background:var(--accent);
}
.card-body{padding:var(--sp-4)}

button.btn{
  font:inherit;font-weight:700;cursor:pointer;border-radius:var(--radius-l);
  padding:7px var(--sp-4);border:1px solid var(--action);background:var(--action);color:var(--btn-ink);
  transition:filter .12s ease, transform .12s ease;
}
button.btn:hover:not(:disabled){filter:brightness(1.07)}
button.btn:active:not(:disabled){transform:translateY(1px)}
button.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
button.btn.ghost:hover:not(:disabled){background:var(--sunk);filter:none}
button.btn:disabled{opacity:.45;cursor:not-allowed}

select,input[type=text],input[type=password],textarea{
  font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-m);padding:5px 8px;
}
textarea{width:100%;resize:vertical}

.pill{
  display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  line-height:var(--lh-none);
  padding:2px var(--sp-2);border-radius:var(--radius-full);white-space:nowrap;
}
/* 状態は色だけで示さない。記号（形）も併用する */
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.ok::before{content:"\2713"}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.warn::before{content:"!"}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
.pill.danger::before{content:"\2715"}
.pill.flat{background:var(--sunk);color:var(--muted)}

/* --------------------------------------------------------------- 表 */
.tablewrap{overflow-x:auto} /* 制約4: 横スクロールはここだけで起こす */
table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--fs-s)}
th,td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
thead th{
  background:var(--head);color:var(--muted);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.08em;position:sticky;top:0;z-index:2;
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 1px 0 var(--line-strong);
}
tbody tr:hover td{background:var(--sunk)}
td.n,th.n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sticky-l{position:sticky;left:0;background:var(--surface);z-index:1}
tbody tr:hover .sticky-l{background:var(--sunk)}
thead .sticky-l{background:var(--head);z-index:3}

/* 曜日の色（現行GASの優先度: 祝日 > 日 > 土 > 平日）。色だけでなく帯（背景）も併用する */
.d-hol{color:var(--day-hol);font-weight:700}
.d-sun{color:var(--day-sun);font-weight:700}
.d-sat{color:var(--day-sat);font-weight:700}
thead th.d-hol{background:var(--day-hol-soft);box-shadow:inset 0 -2px 0 var(--day-hol)}
thead th.d-sun{background:var(--day-sun-soft);box-shadow:inset 0 -2px 0 var(--day-sun)}
thead th.d-sat{background:var(--day-sat-soft);box-shadow:inset 0 -2px 0 var(--day-sat)}

/* --------------------------------------------------------------- 希望入力（スマホ） */
.kibou{max-width:560px;margin:0 auto}
.deadline{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  background:var(--action-soft);border:1px solid var(--action);color:var(--action);
  border-radius:var(--radius-l);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-s);font-weight:700;margin-bottom:var(--sp-4);
  transition:background .15s ease;
}
.deadline.closed{background:var(--sunk);border-color:var(--line-strong);color:var(--muted)}
/* 残り日数が少ない（pill.danger＝あと3日以内）ときだけ塗りバナーへ昇格させて注意を引く。 */
.deadline:has(.pill.danger){background:var(--action);color:var(--btn-ink);border-color:var(--action)}
.deadline:has(.pill.danger) .pill.danger{background:#fff;color:var(--action);font-weight:800}
.daylist{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l)}
.dayrow{
  display:grid;grid-template-columns:var(--sp-12) minmax(0,1fr); /* minmax(0,…) が無いと長い選択肢でグリッドがはみ出す */
  align-items:center;gap:var(--sp-3);padding:7px var(--sp-3);border-bottom:1px solid var(--line);
}
.dayrow:last-child{border-bottom:none}
.dayrow.off{background:var(--sunk)}
.dayrow .date{font-family:var(--font-mono);font-size:var(--fs-s);font-variant-numeric:tabular-nums;white-space:nowrap}
.dayrow .date.d-hol,.dayrow .date.d-sun,.dayrow .date.d-sat{
  display:inline-block;padding:1px 5px;border-radius:var(--radius-s); /* 例外日は帯（チップ）でも示す。平日は無地のまま */
}
.dayrow .date.d-hol{background:var(--day-hol-soft)}
.dayrow .date.d-sun{background:var(--day-sun-soft)}
.dayrow .date.d-sat{background:var(--day-sat-soft)}
.dayrow select{width:100%;min-width:0;padding:5px 6px;font-size:var(--fs-s)} /* 制約3: 長い勤務パターン文字列の収まり優先 */
.holname{font-size:var(--fs-xs);color:var(--day-hol);font-weight:700}

/* 375px幅など極小画面ではさらに切り詰める（例: 8:45〜18:30（8.75）（1時間休憩）を1行で見せる） */
@media (max-width:420px){
  main{padding:14px 10px 48px}
  .dayrow{grid-template-columns:40px minmax(0,1fr);gap:6px;padding:6px 8px}
  .dayrow .date{font-size:12px}
  .dayrow select{font-size:12.5px;padding:4px 5px}
}

/* --------------------------------------------------------------- 調整グリッド（縦30名×横31日） */
.grid-legend{display:flex;gap:var(--sp-5);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--sp-3);font-weight:500}
.grid-legend i{display:inline-block;width:12px;height:12px;border-radius:var(--radius-s);margin-right:6px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
td.cell{padding:2px 3px;position:relative}
td.cell select{border-color:transparent;background:transparent;padding:2px 3px;font-size:12px;width:52px}
td.cell select:hover{border-color:var(--line-strong)}
td.cell select:focus-visible{background:var(--action-soft)}
/* 希望と違うセル: 帯（背景）＋角の三角形の2重サイン */
td.cell.diff{background:var(--warn-soft)}
td.cell.diff::before{
  content:"";position:absolute;top:0;left:0;width:0;height:0;
  border-style:solid;border-width:7px 7px 0 0;border-color:var(--warn) transparent transparent transparent;
}
/* 備考あり: 下の帯＋右上の丸ドットの2重サイン。diff と同時に立っても区別できる */
td.cell.hasnote{box-shadow:inset 0 -3px 0 var(--action)}
td.cell.hasnote::after{
  content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--action);
}
/* 出勤人数の不足: 背景だけでなく▼アイコンとピル形状で強調 */
td.short{
  background:var(--danger-soft);color:var(--danger);font-weight:700;
  border-radius:var(--radius-full);box-shadow:inset 0 0 0 1px var(--danger);
}
td.short::before{content:"\25BC";font-size:8px;margin-right:3px;vertical-align:1px}
/* 出勤人数の合計行（tbody最終行）は専用の強調行として扱う。
   :has(.cell) で調整グリッドのテーブルだけに絞る（他画面の一覧表の最終行に誤爆させない） */
table:has(td.cell) tbody tr:last-child td{background:var(--sunk);font-weight:700;border-top:2px solid var(--line-strong)}
table:has(td.cell) tbody tr:last-child .sticky-l{background:var(--sunk)}
table:has(td.cell) tbody tr:last-child:hover td{background:var(--sunk)}

/* --------------------------------------------------------------- ログイン */
.login{max-width:340px;margin:12vh auto 0}
.login .card-body{display:flex;flex-direction:column;gap:var(--sp-3)}
.login label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--muted)}
.login input{font-size:15px}
.msg{font-size:var(--fs-xs);color:var(--danger)}
.hint{font-size:var(--fs-xs);color:var(--muted)}

/* --------------------------------------------------------------- 開発バナー */
.devbar{
  background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--warn);
  font-size:var(--fs-xs);font-weight:700;padding:5px var(--sp-5);text-align:center;
}
.empty{padding:48px 16px;text-align:center;color:var(--muted);font-size:var(--fs-s)}