/* ============================================================
   キッズクラブ シフト管理 : 共通スタイル
   ============================================================
   2026-08-14 Claude Design で作ったデザインを移植（第3版）。
   土台は書き出された styles.css。そこにアプリ側で使っている
   部品名（.chip / .calCell / .primaryBtn など）を足して統合してある。

   ★守っていること（変えるときも守ること）
   ・外部フォント・CDNは使わない（画像は public/assets/ の中だけ）
   ・入力欄の文字は16pxを下回らせない（iPhoneの自動拡大を防ぐ）
   ・タップできるものは44px以上
   ・横スクロールを出さない
   ・「動きを減らす」設定の人には動かさない
   ============================================================ */

:root{
  --orange:#F5701E;
  --orange-d:#E9550A;
  --orange-l:#FF9A52;
  --orange-soft:#FFF1E8;
  --orange-line:#FFD9C2;
  --ink:#2A2320;
  --ink-2:#5B534E;
  --ink-3:#746C66;   /* ★2026-09-18 品質台帳 U2: #9A928C は白地で 3.06:1（読みにくい）→ 約5.1:1 */
  --bg:#F7F3F0;
  --card:#FFFFFF;
  --line:#EDE6E1;
  --radius:16px;
  --shadow:0 1px 2px rgba(42,35,32,.04), 0 8px 24px rgba(42,35,32,.06);
  --sans:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
         "Hiragino Sans", "Yu Gothic", Meiryo, "Segoe UI", Helvetica, Arial, sans-serif;
  --display:"Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", sans-serif;

  /* アプリ側で使っている呼び名（意味は上と同じ） */
  --accent:var(--orange);
  --accent-hi:var(--orange-l);
  --accent-dim:var(--orange-soft);
  --accent-line:var(--orange-line);
  --panel:var(--card);
  --panel2:var(--orange-soft);
  --text:var(--ink);
  --muted:var(--ink-3);
  /* ★2026-09-18 品質台帳 U2: 文字に使う色を 4.5:1 以上に（前は amber 3.05・ruby 3.86・sky 3.66） */
  --amber:#8A6410;
  --ruby:#B23A2E;
  --sky:#3F6FB5;
  --orange-text:#B0440A;   /* 文字に使うオレンジ（白地で約5.5:1）。塗り・枠線は --orange のまま */
  --grad:linear-gradient(90deg,var(--orange-l),var(--orange-d));
  --shadow-sm:0 1px 2px rgba(42,35,32,.05);
  --tabbar-h:74px;

  /* ★2026-09-18 品質台帳 U1: スタッフ画面・帯が使っていたのに定義が無かった6つ
     （無いと枠線・背景・角丸が黙って消える。お知らせの枠・提出済みの枠・帯のレール） */
  --bg2:#FAF7F5;
  --line2:var(--line);
  --r-lg:16px;
  --r-sm:12px;
  --text2:var(--ink-2);
  --shadow-btn:0 4px 10px rgba(233,85,10,.28);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img,svg{display:block;max-width:100%;}
a{color:var(--orange-text);text-decoration:none;}
button{font:inherit;color:inherit;}
h1{display:none;}   /* 旧デザインの見出し。左メニューに置き換えたので隠す */

/* ---------- ロゴ ---------- */
.logo-mark{width:64px;height:64px;flex:0 0 auto;object-fit:contain;}

/* ============================================================
   1. アプリの骨組み（左メニュー ＋ 本文）
   ============================================================ */
.app,.shell{display:flex;min-height:100vh;}

.sidebar{
  width:236px;flex:0 0 236px;
  background:var(--card);
  border-right:1px solid var(--line);
  padding:22px 16px 16px;
  display:flex;flex-direction:column;gap:22px;
  position:sticky;top:0;height:100vh;
}
/* ★2026-09-30 パソコンで画面の高さが低いと（1366×768 のノート・表示125% など）、左下の
   「連絡」「パスワードを変える」「ログアウト」が画面の外に出て、ページを下まで送っても出てこなかった
   （左メニューは高さ100vhで止まっているため）。→ 左メニューだけを縦に送れるようにする。
   ★スマホ（899px以下）は下タブバーのままで、ここは効かない */
@media (min-width:900px){
  .sidebar{overflow-y:auto;overflow-x:hidden;}
}
.sidebar .brand,.sideBrand{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.sidebar .brand .logo-mark,.sideBrand .logo-mark{width:78px;height:78px;}
.sidebar .brand-name,.sideBrand .nm{
  font-size:13px;font-weight:700;color:var(--orange);letter-spacing:.06em;
}

/* ★段階53: いま見ている校舎（校舎が2つ以上ある管理者だけ選ぶ欄が出る） */
#siteBox{display:flex;flex-direction:column;gap:4px;margin:0 0 6px;}
#siteBox:empty{display:none;}
#siteBox .siteLabel{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;}
#siteBox select{
  min-height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line, #ddd);
  font-size:14px;font-weight:700;color:var(--ink-2);background:#fff;
}
#siteBox.ng{font-size:12.5px;line-height:1.5;color:#b42318;white-space:pre-line;}

.nav,#navBar{display:flex;flex-direction:column;gap:4px;}
.nav a,#navBar a{
  display:flex;align-items:center;gap:12px;
  min-height:46px;padding:0 14px;border-radius:12px;
  color:var(--ink-2);font-size:14.5px;font-weight:600;
  border-left:3px solid transparent;
}
.nav a:hover,#navBar a:hover{background:#FAF7F5;color:var(--ink);}
.nav a.is-active,#navBar a.current{
  background:var(--orange-soft);color:var(--orange-d);
  border-left-color:var(--orange);
}
.nav .ico,#navBar .ico{width:20px;height:20px;flex:0 0 20px;}

/* 左メニュー下の利用者 */
.side-user,.sideFoot{margin-top:auto;}
#whoami{
  display:flex;align-items:center;gap:10px;
  min-height:56px;padding:8px 10px;border-radius:14px;
  background:#FAF7F5;border:1px solid var(--line);
  font-size:14px;font-weight:700;line-height:1.3;
  overflow-wrap:anywhere;
}
#whoami::before{
  content:"";width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  background:linear-gradient(150deg,var(--orange-l),var(--orange-d));
}
#whoami.ng{
  color:var(--ruby);background:#FDF0EE;border-color:#F3CFC8;
  font-size:12px;font-weight:500;white-space:pre-line;
}
#whoami.ng::before{display:none;}
.avatar{
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  background:linear-gradient(150deg,var(--orange-l),var(--orange-d));
  display:flex;align-items:center;justify-content:center;
}
#logoutBtn{
  display:none;width:100%;margin-top:8px;
  background:none;border:0;padding:10px;border-radius:10px;
  color:var(--ink-3);font-size:12.5px;text-decoration:underline;
}
#logoutBtn:hover{background:#FAF7F5;}
/* ★2026-09-22 困ったときの連絡（管理者画面の左下）。ログアウトより目立ち、メニューより目立たない */
#askBtn{
  display:none;width:100%;margin-top:10px;min-height:44px;
  background:#fff;border:1px solid var(--line);padding:10px 12px;border-radius:12px;
  color:var(--ink-2);font-size:12.5px;font-weight:700;cursor:pointer;text-align:left;
}
#askBtn::before{content:"？";display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--orange-soft);color:var(--orange-text);
  font-weight:800;margin-right:8px;vertical-align:-4px;}
#askBtn:hover{border-color:var(--accent);background:var(--orange-soft);}
/* ★2026-09-30 パスワードを変える（左下）。連絡より控えめ・ログアウトよりははっきり */
#pwChangeBtn{
  display:none;width:100%;margin-top:8px;min-height:40px;
  background:none;border:1px solid var(--line);padding:8px 12px;border-radius:12px;
  color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;
}
#pwChangeBtn:hover{background:#FAF7F5;}
/* 小窓の中（askBox の見た目を使う）。欄は input[type=password] の決まりで 16px */
#pwDlg .field{margin-bottom:12px;}
#pwMsg{color:var(--ruby);font-size:13.5px;line-height:1.7;white-space:pre-line;min-height:1.2em;margin:4px 0 0;}
#mhPwBtn{display:none;}

/* ---------- 本文 ---------- */
/* ★overflow:hidden が要る。
   背景の飾り（角のぼかし・リボン・3Dイラスト）は画面の外まではみ出す作りなので、
   これが無いとページ全体が横に広がってスクロールが出る
   （2026-08-14 実際に管理者画面で1515pxまで広がった）。 */
.main{flex:1;min-width:0;position:relative;overflow:hidden;}
.page,.appView{padding:26px 30px 40px;max-width:1180px;}
.appView{display:none;}
.main > *{position:relative;z-index:1;}
/* ★飾りは必ず絶対配置のまま。でないと場所を取って中身が押し下げられる */
.main > .cornerGlow,.main > .hero3d,.main > .scene,
.main > .ribbon,.main > .photo-glow,.main > .glass-band{position:absolute;z-index:0;}

/* ---------- 見出し ---------- */
.page-head,.pageHead{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;}
.pageHead{display:block;}
.page-head h1,.pageHead h2{margin:0;font-size:25px;letter-spacing:.01em;font-weight:800;}
.page-head p,.pageHead p{margin:4px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.75;}
.head-spacer{flex:1;}
.secHead{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;margin:22px 0 12px;}
.secHead small{color:var(--ink-3);font-size:12.5px;font-weight:400;}

/* ---------- ボタン ---------- */
.back,.iconBtn{
  width:44px;height:44px;flex:0 0 44px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.back:hover,.iconBtn:hover{background:#FAF7F5;}
.ghost-btn,.pillBtn,.subBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;
}
.ghost-btn:hover,.pillBtn:hover,.subBtn:hover{background:#FAF7F5;}
.btn,.primaryBtn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:52px;border:0;border-radius:14px;padding:0 20px;
  /* ★2026-09-18 品質台帳 U2（れおさん「濃くする」）: 前の #FF9A52→#E9550A は白い文字が 2.1〜3.6:1 で読みにくかった → 4.9〜6.4:1 */
  background:linear-gradient(90deg,#C4480A,#A83C08);
  color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 8px 20px rgba(233,85,10,.28);
}
.btn:hover,.primaryBtn:hover{filter:brightness(1.04);}
.btn:active,.primaryBtn:active{transform:translateY(1px);}
.primaryBtn:disabled{filter:grayscale(.55);opacity:.7;}
.primaryBtn.withArrow::after{
  content:"";width:22px;height:22px;background:currentColor;flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-outline{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;border-radius:14px;
  background:var(--card);border:1px dashed #D9D1CB;
  color:var(--ink-2);font-size:14px;font-weight:600;cursor:pointer;
}
.btn-outline:hover{border-color:var(--orange);color:var(--orange-d);}

/* ---------- カード ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
      padding:20px;margin-bottom:14px;}
.card h2{margin:0 0 14px;font-size:16px;}
.card-pad{padding:20px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.note{font-size:12.5px;color:var(--ink-3);margin:0 0 14px;line-height:1.8;}
.note.warn{color:var(--amber);}

/* ---------- フォーム ---------- */
.field,label.field{display:block;margin-bottom:16px;}
/* ★div.field[role=group] = ボタン群を包む欄（label で包むと文字を触ったとき最初のボタンが押される。品質台帳 H10） */
.label,label.field > span,div.field[role=group] > span{
  display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px;
}
.control{position:relative;display:flex;align-items:center;}
.control .lead,.control .trail{
  position:absolute;width:20px;height:20px;color:var(--ink-3);
}
.control .lead{left:14px;pointer-events:none;}
.control .trail{right:14px;background:none;border:0;padding:0;cursor:pointer;}
input[type=time]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer;}
input[type=text],input[type=email],input[type=password],input[type=time],
input[type=date],select,textarea,.inp{
  width:100%;min-height:48px;
  font-family:inherit;font-size:16px;color:var(--ink);   /* ★16px未満にしない */
  background:var(--card);
  border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;
  appearance:none;-webkit-appearance:none;
}
.control.has-lead input,.control.has-lead select{padding-left:44px;}
.control.has-trail input,.control.has-trail select{padding-right:44px;}
textarea,textarea.inp{min-height:86px;resize:vertical;line-height:1.6;}
input::placeholder,textarea::placeholder{color:#8A827C;}   /* ★U2: 2.0:1 → 約3.9:1 */
input:focus,select:focus,textarea:focus,.inp:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(245,112,30,.15);
}
.row-2,.twoCol{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;}
.row-2 .tilde,.twoCol .tilde{padding-bottom:13px;color:var(--ink-3);}

/* ---------- 区分の選択 ---------- */
.seg{display:grid;gap:8px;}
.seg-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.seg input{position:absolute;opacity:0;pointer-events:none;}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;}
.seg label,.chip{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-width:0;min-height:46px;padding:6px 8px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);
  font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
}
.seg label:hover,.chip:hover{background:#FAF7F5;}
.seg input:checked + label,.chip.on{
  background:var(--orange-soft);border-color:var(--orange);color:var(--orange-d);
}
.chip.off.on{background:#FDF0EE;border-color:var(--ruby);color:var(--ruby);}
/* ★段階54: 未定（あとで直す印）は黄色 */
.chip.und.on{background:#FBF3E2;border-color:var(--amber);color:var(--amber);}
/* 「予定がわからない」は長いので2つ分の幅（1つ分だと「予定がわ／からない」と途中で折れた。2026-09-28） */
.chips .chip.und{grid-column:span 2;white-space:nowrap;}
/* ★2026-09-18 品質台帳 U6: 選んだことを色だけで伝えない（色の見分けが苦手な人にも分かるように ✓ を付ける） */
.chip.on::before{content:"✓";margin-right:4px;font-weight:800;}
/* ★押せないボタンを、押せそうに見せない（前は見た目が変わらず、押しても無反応に見えた） */
.subBtn:disabled,.pillBtn:disabled,.ghost-btn:disabled{opacity:.45;cursor:default;}

/* ---------- チェックボックス ---------- */
.check,.checkLine{
  display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;
  font-size:13.5px;color:var(--ink-2);
}
.check input,.checkLine input[type=checkbox]{
  width:20px;height:20px;flex:0 0 20px;margin:0;min-height:0;padding:0;
  appearance:none;-webkit-appearance:none;
  border:2px solid #D8D0CA;border-radius:5px;background:var(--card);cursor:pointer;
}
.check input:checked,.checkLine input[type=checkbox]:checked{
  background:var(--orange);border-color:var(--orange);
}
.check input:checked::after,.checkLine input[type=checkbox]:checked::after{
  content:"";display:block;width:5px;height:10px;margin:1px 0 0 5px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* ---------- バッジ ---------- */
.badge{
  display:inline-block;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:8px;border:0;
  background:#F3EEEA;color:var(--ink-3);
}
.badge.q{color:var(--orange-d);background:var(--orange-soft);}
.badge.a{color:var(--ink-3);background:#F3EEEA;}
.badge.w{color:var(--amber);background:#FBF3E2;}
.badge.x{color:var(--ruby);background:#FDF0EE;}
.badge.f{color:var(--sky);background:#EEF3FB;}
.badge.o{color:var(--sky);background:#EEF3FB;}

/* ---------- カレンダー ---------- */
.cal-head,.calHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cal-head b,.calHead .mon{font-size:17px;font-weight:800;}
.cal-nav{
  width:44px;height:44px;border-radius:12px;border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;
}
.cal-nav:hover{background:#FAF7F5;}
.dow,.days,.calGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.dow span,.calDow{
  text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-3);padding:6px 0 10px;
}
.calDow.sun{color:#E0684F;}
.calDow.sat{color:#5B87C7;}
.days,.calGrid{gap:2px 0;}
.days label,.calCell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;max-width:54px;min-height:52px;aspect-ratio:1;
  border-radius:50%;margin:0 auto;border:0;background:transparent;
  /* ★日付は読みやすさ優先で大きく（2026-08-14 れおさんの指摘で 14.5px → 18px） */
  font-size:18px;font-weight:600;color:var(--ink);cursor:pointer;
  overflow:hidden;padding:2px;line-height:1.1;
}
.days label:hover,.calCell:hover{background:var(--orange-soft);}
.calCell.blank{background:none;cursor:default;}
.calCell.closed{color:#CCC4BE;}
.calCell.brk .d{color:var(--orange-d);}
.days input:checked + label,.calCell.sel{
  background:linear-gradient(150deg,var(--orange-l),var(--orange-d));color:#fff;
  box-shadow:0 6px 14px rgba(233,85,10,.3);
}
.calCell.sel .d,.calCell.sel .tag,.calCell.sel .hm{color:#fff;}
.calCell .d{line-height:1.05;font-weight:600;}
.calCell .d.sun{color:#E0684F;}
.calCell .d.sat{color:#5B87C7;}
.calCell .tag{font-size:10px;font-weight:700;line-height:1.1;color:var(--orange-d);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.calCell .tag.off{color:var(--ruby);}
.calCell .hm{font-size:9px;color:var(--ink-3);line-height:1;}
.dow span,.calDow{font-size:13.5px;}

/* ---------- 希望を出した日を色で塗る（2026-08-16 れおさんの要望） ----------
   カレンダーを開いただけで「どの日に何を出したか」が分かるようにする。
   マス（四角）ごと塗って、区分ごとに色を変える。
     終日=紫 ／ 午前=緑 ／ 午後=赤 ／ 17:00〜=青 ／ 出られない=灰
   ★選んでいる日はオレンジ。上の5色のどれとも違うので取り違えない。
   ★丸から角丸の四角に変えて背を高くした。日付・区分・入り時間の
     3行を入れるため（丸のままだと文字が入りきらない）。 */
.calCell{
  max-width:none;aspect-ratio:auto;border-radius:14px;
  min-height:66px;padding:5px 3px;gap:1px;
}
.calCell .d{font-size:17px;}
/* ★2026-09-18 品質台帳 U6: マスの時刻が9.5〜10pxで読みにくかった → 11px */
.calCell .tag{font-size:11px;}
.calCell .hm{font-size:11px;font-variant-numeric:tabular-nums;}

.calCell.c-full{background:#7A5AA8;}   /* 終日 */
/* ★2026-09-18 品質台帳 U2: 白い文字が 4.5:1 以上になる濃さに（前は 午前3.3・午後4.1・17:00〜4.4・出られない3.1） */
.calCell.c-am  {background:#2F7D4C;}   /* 午前 */
.calCell.c-pm  {background:#BD452E;}   /* 午後 */
.calCell.c-eve {background:#2F6AA3;}   /* 17:00〜 */
.calCell.c-off {background:#6F6862;}   /* 出られない */
.calCell.c-undecided{background:#8A6410;}   /* 未定（★段階54。黄土色。白い文字で 5.3:1） */
/* 確定したシフト（シフト確認の画面）。
   ★こちらは色で区分を分けない。知りたいのは「何時から何時まで」なので、
     色は1色にして時間を主役にする。ブランドのオレンジ＝自分の勤務日。 */
.calCell.c-work{background:linear-gradient(150deg,var(--orange-l),var(--orange-d));}
.calCell.c-work .hm{font-size:9.5px;white-space:nowrap;}
/* その日に勤務が2つある印（右上の白い点）。時刻の行に書き足すと折り返して読めないため */
.calCell.multi{position:relative;}
.calCell.multi::after{
  content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
  border-radius:50%;background:rgba(255,255,255,.95);
}
.calCell.has .d,.calCell.has .tag,.calCell.has .hm{color:#fff;}
.calCell.has:hover{filter:brightness(1.08);background-image:none;}

/* ★選んでいる日は、出した色より優先する。
     ここで書き直しているのは、上の .c-◯◯ と同じ強さなので
     「あとに書いたほうが勝つ」を使って確実に上書きするため。 */
.calCell.sel,.calCell.sel.has{
  background:linear-gradient(150deg,var(--orange-l),var(--orange-d));
  box-shadow:0 6px 14px rgba(233,85,10,.3);
}
.calCell.sel .d,.calCell.sel .tag,.calCell.sel .hm{color:#fff;}

/* 色の意味を示す凡例 */
.calLegend{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:12px;}
.calLegend span{display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--ink-2);white-space:nowrap;}
.calLegend i{width:12px;height:12px;border-radius:4px;flex:none;}

/* ---------- 一覧の行 ---------- */
.shift-row,.reqItem{
  display:flex;align-items:center;gap:8px;
  background:#FDFAF8;border:1px solid var(--line);border-radius:14px;
  padding:14px 12px 14px 14px;margin-bottom:10px;
}
.reqItem{display:block;}
.shift-row .date,.reqItem .dt{font-size:14px;font-weight:700;}
.shift-row .meta,.reqItem .ln{
  display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2);
  margin-top:4px;white-space:nowrap;
}
.shift-row .tag,.reqItem .ln .tag{color:var(--orange-d);font-weight:700;}
.kebab{
  width:44px;height:44px;flex:0 0 44px;margin-left:auto;border:0;background:transparent;
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);cursor:pointer;
}

/* ---------- 2段組み ---------- */
.cols,.reqGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;}
.cols > *,.reqGrid > *{min-width:0;}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0;}
.twoUp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;}
.twoUp > .span{grid-column:1/-1;}

/* ---------- 固定の保存ボタン ---------- */
#saveBar{
  position:fixed;left:236px;right:0;bottom:0;z-index:30;
  background:linear-gradient(0deg,var(--bg) 62%,rgba(247,243,240,0));
  padding:18px 20px 20px;display:none;justify-content:center;
}
#saveBar button{max-width:560px;width:100%;}

/* ---------- 通知 ---------- */
#toast{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  background:#fff;color:var(--orange-d);
  border:1px solid var(--orange-line);box-shadow:var(--shadow);
  padding:13px 22px;border-radius:14px;font-size:13.5px;font-weight:700;
  max-width:calc(100vw - 32px);text-align:center;line-height:1.55;
  overflow-wrap:anywhere;z-index:50;
  opacity:0;transition:opacity .25s;pointer-events:none;
}
#toast.show{opacity:1;}

/* ---------- 複数行を書いてもらう小窓（shared.js の askText・2026-09-18 品質台帳 S2） ---------- */
.askBox{border:1px solid var(--line);border-radius:16px;padding:20px;
  width:min(560px, calc(100vw - 32px));box-shadow:var(--shadow);color:var(--ink);}
.askBox::backdrop{background:rgba(42,35,32,.35);}
.askBox .askTitle{margin:0 0 6px;font-size:17px;}
.askBox .askHelp{margin:0 0 10px;font-size:13.5px;color:var(--ink-2);white-space:pre-wrap;line-height:1.7;}
.askBox .askArea{width:100%;font-size:16px;line-height:1.7;resize:vertical;}
.askBox .askBtns{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap;}
.askBox .askBtns .primaryBtn{width:auto;}
/* ボタンを押して選ぶ小窓（shared.js の askChoice・品質台帳 U4） */
.askBox .askChoices{display:flex;flex-direction:column;gap:8px;}
.askBox .askChoice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;}
.askBox .askChoice:hover{background:#FAF7F5;}
.askBox .askChoice:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}
.askBox .askChoice b{font-size:15px;color:var(--ink);}
.askBox .askChoice small{font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.askBox .askChoice.now{border-color:var(--orange);background:var(--orange-soft);}
.askBox .askChoice .nowTag{color:var(--orange-text);font-weight:700;}

/* ---------- 「見方」の説明 ---------- */
.howto{
  margin-top:20px;padding:16px 18px;border-radius:14px;
  background:#FDFAF8;border:1px solid var(--line);border-left:4px solid var(--orange);
  font-size:12.5px;color:var(--ink-3);line-height:1.9;
}
.howto b{color:var(--ink);font-weight:700;}

/* ============================================================
   2. ログイン画面
   ============================================================ */
#loginScreen{min-height:100vh;display:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}
#loginScreen.show{display:grid;}
/* ★ログインが切れたとき、画面の上に重ねる（下の入力は残す。品質台帳 H2） */
#loginScreen.relogin{position:fixed;inset:0;z-index:300;overflow:auto;}
#loginScreen .formSide{
  display:flex;flex-direction:column;justify-content:center;
  padding:54px 60px;background:var(--card);
}
#loginScreen .artSide{position:relative;overflow:hidden;background:#fff;}
#loginView{max-width:470px;width:100%;}
.loginBrand{display:flex;align-items:center;gap:14px;margin-bottom:44px;}
.loginBrand .logo-mark{width:64px;height:64px;}
.loginBrand .nm{font-size:19px;font-weight:700;letter-spacing:.04em;}
.loginTitle{
  font-family:var(--display);
  font-size:clamp(38px,5.2vw,62px);font-weight:800;font-style:italic;
  letter-spacing:-.015em;line-height:1;margin:0 0 14px;
}
.loginTitle em{font-style:italic;color:var(--orange);}
.loginSub{font-size:13px;letter-spacing:.42em;color:var(--ink-3);margin:0 0 18px;font-weight:600;}
.loginRule{
  width:88px;height:6px;border-radius:4px;margin:0 0 38px;
  background:linear-gradient(90deg,var(--orange-d),rgba(255,154,82,0));
}
.fieldLabel{
  display:block;font-size:11.5px;letter-spacing:.2em;color:var(--ink-3);
  margin-bottom:9px;font-weight:700;
}
.inpWrap{position:relative;margin-bottom:20px;display:flex;align-items:center;}
.inpWrap .lead,.inpWrap .trail{
  position:absolute;color:var(--ink-3);display:flex;
}
.inpWrap .lead{left:16px;pointer-events:none;}
.inpWrap .trail{right:14px;background:none;border:0;padding:6px;cursor:pointer;}
#loginView input{min-height:56px;padding-left:50px;}
.loginRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 24px;}
.linkA{color:var(--orange);font-size:13.5px;font-weight:600;}
.linkA:hover{text-decoration:underline;}
#loginError{
  color:var(--ruby);font-size:13px;margin-top:16px;min-height:1.2em;
  line-height:1.75;white-space:pre-line;
}
.loginFoot{margin-top:42px;font-size:11.5px;letter-spacing:.2em;color:var(--ink-3);font-weight:600;}

/* ログイン右側の光の帯 */
.lightBars{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.lightBars i{
  position:absolute;top:-10%;height:120%;display:block;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,rgba(255,154,82,.55) 18%,
    rgba(233,85,10,.95) 50%,rgba(255,154,82,.55) 82%,rgba(255,255,255,0) 100%);
  filter:blur(26px);
}

/* ★2026-08-19 れおさんのデザイン（login.html）の写真の帯。
   assets/stripes.png（オレンジのグラデーション写真）を、
   左が透明→右がはっきり、のマスクで敷く。
   写真が読めないときは、下の lightBars が代わりに見える。 */
.photoStripes{
  position:absolute;inset:0;pointer-events:none;
  background:url("/assets/stripes.png") center center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);
  mask-image:linear-gradient(90deg,transparent,#000 42%);
}

/* 角のぼかし */
.cornerGlow{
  position:absolute;width:260px;height:260px;pointer-events:none;
  border-radius:50%;filter:blur(52px);opacity:.5;
  background:radial-gradient(circle,rgba(245,112,30,.8) 0%,rgba(255,154,82,0) 70%);
}
.cornerGlow.tl{top:-110px;left:-80px;}
.cornerGlow.br{bottom:-120px;right:-90px;}

/* ============================================================
   3. スマホ（〜899px）
   ============================================================
   ★モックはパソコンの横長で描かれている。
     左メニューと2段組みは375pxに入らないので、
     見た目の言語はそのままに、形だけスマホに合わせる。 */
.tabbar{display:none;}
.mobile-top,.mHead{display:none;}

@media (max-width:899px){
  /* ★ログイン画面は1列にする。
     2026-08-19 それまで縦2列のままスマホに入れていたため、
     入力欄が半分の幅に潰れ、右半分は光の帯だけだった。
     デザイン（login.html）どおり、写真は下に薄く敷く。 */
  #loginScreen{grid-template-columns:1fr;}
  #loginScreen .artSide{display:none;}
  #loginScreen .formSide{
    justify-content:flex-start;position:relative;overflow:hidden;
    padding:36px 20px calc(34vh + 24px);
  }
  #loginScreen .formSide::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
    background:url("/assets/stripes.png") center center/cover no-repeat;
    opacity:.6;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);
    mask-image:linear-gradient(180deg,transparent,#000 60%);
  }
  #loginView{position:relative;z-index:1;}
  .loginBrand{margin-bottom:26px;}
  .loginBrand .logo-mark{width:52px;height:52px;}
  .loginFoot{margin-top:26px;font-size:10px;letter-spacing:.1em;}

  /* ★左メニューは消さず、そのまま下タブバーに変える。
     消してしまうとアプリ側の画面には移動手段が無くなる
     （2026-08-14 実際にメニューが丸ごと消えた）。 */
  .sidebar{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:auto;flex:none;height:auto;z-index:40;
    flex-direction:row;align-items:stretch;gap:0;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-right:0;border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    overflow:visible;
  }
  .sidebar .brand,.sideBrand,.side-user,.sideFoot{display:none;}
  /* ★min-width:0 が要る。
     flexの子は既定で「中身より狭くならない」ため、
     これが無いとタブの文字幅ぶん帯が広がり、横スクロールが出る
     （2026-08-14 実際に465pxまで広がった）。 */
  #navBar{flex-direction:row;flex:1 1 0;min-width:0;gap:2px;}
  #navBar a{
    flex:1 1 0;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;padding:6px 2px;border-radius:12px;border-left:0;
    font-size:10.5px;font-weight:600;
  }
  #navBar a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  #navBar a.current{background:var(--orange-soft);color:var(--orange-d);}
  #navBar .ico{width:22px;height:22px;}

  .page,.appView{padding:16px 16px 28px;}

  /* 上の帯 */
  .mobile-top,.mHead{
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:15;
  }
  .mobile-top .logo-mark,.mHead .logo-mark{width:36px;height:36px;}
  .mobile-top .brand-name,.mHead .nm{font-size:14px;font-weight:700;color:var(--orange);}
  .mHead .who{margin-left:auto;font-size:12.5px;color:var(--ink-3);
              display:flex;align-items:center;gap:8px;}
  .mHead .who::after{
    content:"";width:32px;height:32px;border-radius:50%;flex:none;
    background:linear-gradient(150deg,var(--orange-l),var(--orange-d));
  }
  .mobile-top .avatar{width:32px;height:32px;flex:0 0 32px;margin-left:auto;}
  /* ★2026-09-30 管理者の上の帯の「パスワードを変える」（スマホは左下が無いため）。狭ければ2段目に回る。
     ★/my/ の帯（id なし）には効かせない */
  #mHead{flex-wrap:wrap;row-gap:8px;}
  #mhPwBtn{
    display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;
    background:#fff;border:1px solid var(--line);border-radius:10px;
    color:var(--ink-2);font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;
  }

  /* 下タブバー */
  .tabbar,.sidebar.asTab{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .tabbar a,.sidebar.asTab #navBar a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;font-size:10.5px;font-weight:600;color:var(--ink-3);
    border-radius:12px;border-left:0;padding:6px 2px;
  }
  .tabbar a .ico{width:22px;height:22px;}
  .tabbar a.is-active{color:var(--orange-d);}

  .page-head h1,.pageHead h2{font-size:20px;}
  .row-2,.twoCol{grid-template-columns:1fr;}
  .row-2 .tilde,.twoCol .tilde{display:none;}
  .seg-5{grid-template-columns:repeat(2,1fr);}
  .cols,.reqGrid,.twoUp{grid-template-columns:1fr;gap:14px;}
  /* スマホは7列で幅が稼げないぶん、高さを取って押しやすく・読みやすくする */
  .days label{max-width:none;min-height:52px;aspect-ratio:auto;border-radius:14px;font-size:17px;}
  /* ★カレンダーは日付・区分・入り時間の3行が入るので、さらに高くする
       （2026-08-16。スマホは幅が狭いぶん、文字が折り返しやすいため） */
  .calCell{min-height:70px;font-size:17px;}
  /* ★11px だと区分の「17:00〜」が 375px で「17:0…」に切れた（2026-09-18 絵で確認）→ 10.5px＋字の間を少し詰める */
  .calCell .tag{font-size:10.5px;letter-spacing:-.03em;}
  .calCell .hm{font-size:10px;letter-spacing:-.03em;}
}

/* ============================================================
   4. スマホの位置決め（★必ずこの位置＝いちばん後ろで決める）
   ============================================================
   CSSは「あとに書いたほうが勝つ」。前のほうに書くと、
   下の共通指定に上書きされて保存ボタンがタブバーに重なる
   （2026-08-10 実際に発生）。 */
@media (max-width:899px){
  #saveBar{
    left:0;right:0;
    bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
    padding:12px 16px 14px;
    background:linear-gradient(0deg,var(--bg) 72%,rgba(247,243,240,0));
  }
  .main{padding-bottom:calc(var(--tabbar-h) + 110px);}
}

/* ============================================================
   5. 動きを減らす設定の人には動かさない
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .btn,.primaryBtn,.subBtn,.chip,.calCell,#navBar a{transition:none;}
  .scene,.hero3d{opacity:.4;}
}

/* ============================================================
   6. 印刷（QR配布シート）
   ============================================================ */
@media print{
  .sidebar,.tabbar,.mHead,.mobile-top,#saveBar,#toast,.howto,
  .cornerGlow,.lightBars,.scene,.ribbon,.photo-glow,.glass-band{display:none !important;}
  .app,.shell{display:block;}
  .main,.page,.appView{padding:0;}
  body{background:#fff;}
  .card{box-shadow:none;}
}

/* ============================================================
   7. 3D風イラスト（ホーム画面の飾り）
   ============================================================
   ★2026-08-19 my/index.html の中にだけ書いてあったものを、ここへ移した。
     管理者ホームでも同じ絵を使うため（れおさんが送ったデザイン2枚目）。
     組み立ては brand.js の scene3d()。
     見た目の要なので、数値は勝手に変えないこと。 */
.scene{
  position:absolute;top:60px;right:-60px;width:640px;height:520px;z-index:1;
  perspective:1200px;pointer-events:none;
}
.stage{position:absolute;inset:0;transform:rotateX(58deg) rotateZ(-38deg);transform-style:preserve-3d;}
.tile{position:absolute;border-radius:16px;transform-style:preserve-3d;}
.tile::before{ /* 天面の光沢 */
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(128deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.10) 30%,rgba(255,255,255,0) 52%);
}
.tile::after{ /* 縁のリム光 */
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.6);
}
.tile.ghost{
  background:linear-gradient(140deg,rgba(255,255,255,.72),rgba(255,236,224,.42));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:2px 2px 0 rgba(226,206,196,.5),4px 4px 0 rgba(222,201,191,.42),
    6px 6px 0 rgba(216,194,184,.34),8px 8px 0 rgba(210,187,177,.26),
    22px 26px 34px rgba(120,80,55,.14);
}
.tile.pale{
  background:linear-gradient(140deg,#FFFFFF,#F2E9E3);
  box-shadow:2px 2px 0 #EDE3DC,4px 4px 0 #E7DBD3,6px 6px 0 #E1D4CB,
    8px 8px 0 #DBCDC3,20px 24px 32px rgba(120,80,55,.16);
}
.tile.hot{
  background:linear-gradient(138deg,#FFC08A 0%,#FF8A3D 42%,#EA5507 100%);
  box-shadow:2px 2px 0 #DE5006,4px 4px 0 #D54B05,6px 6px 0 #CC4705,
    8px 8px 0 #C24304,10px 10px 0 #B93F04,
    26px 30px 40px rgba(233,85,10,.4),0 0 54px rgba(255,120,40,.45);
}
.tile.hot::after{border-color:rgba(255,236,220,.75);}
.tile .face{position:absolute;inset:0;display:flex;align-items:center;gap:11px;padding:0 15px;z-index:1;}
.tile .face .dot{width:13px;height:13px;border-radius:50%;flex:0 0 13px;
  background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(120,60,20,.2);}
.tile .face .lines{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
.tile .face .lines i{display:block;height:5px;border-radius:6px;background:rgba(255,255,255,.9);}
.tile .face .lines i:nth-child(2){width:56%;opacity:.7;}
.tile.pale .face .dot,.tile.ghost .face .dot{background:rgba(196,168,150,.55);box-shadow:none;}
.tile.pale .face .lines i,.tile.ghost .face .lines i{background:rgba(190,166,150,.45);}

.ribbon{position:absolute;pointer-events:none;z-index:0;}
.ribbon.r1{top:-34px;left:-16px;width:96px;height:104px;
  background:linear-gradient(150deg,#FFA469,#EA5507);
  border-radius:0 0 70% 10px;box-shadow:0 16px 28px rgba(233,85,10,.26);}
.ribbon.r2{right:0;bottom:0;width:420px;height:460px;
  background:linear-gradient(150deg,#FFD3B0,#F5701E 58%,#EA5507);
  border-radius:120px 0 0 0;
  -webkit-mask-image:radial-gradient(120% 120% at 100% 100%,#000 45%,transparent 78%);
  mask-image:radial-gradient(120% 120% at 100% 100%,#000 45%,transparent 78%);}
.photo-glow{position:absolute;top:60px;right:-40px;width:460px;height:460px;
  background:url("/assets/glow.png") center/contain no-repeat;
  opacity:.3;pointer-events:none;z-index:0;}
.glass-band{display:none;}
.grid-line{position:absolute;background:linear-gradient(90deg,rgba(233,85,10,0),rgba(233,85,10,.22),rgba(233,85,10,0));}
.grid-line.v{background:linear-gradient(180deg,rgba(233,85,10,0),rgba(233,85,10,.22),rgba(233,85,10,0));}
.blob{position:absolute;border-radius:50%;filter:blur(42px);}
.scene .b1{width:340px;height:340px;right:-50px;bottom:-50px;background:rgba(245,112,30,.22);}
.scene .b2{width:220px;height:220px;left:50px;top:-30px;background:rgba(255,175,120,.18);}
.scene .b3{width:170px;height:170px;left:250px;top:180px;background:rgba(255,90,0,.14);}
.tick{position:absolute;font-size:11px;font-weight:700;color:rgba(120,90,70,.45);letter-spacing:.06em;}

@media (max-width:1200px){ .scene{top:20px;right:-170px;transform:scale(.86);transform-origin:top right;} }

/* ★★スタッフ画面「その日のシフト（帯）」（2026-09-10 れおさん）
   ★管理者の帯（plan/lanes.css）とは別に、スマホで見やすい形にする。
   ★同じ決まりを2か所に持つのではなく、**見た目だけ**をここに書く。 */
/* ============================================================
   その日のシフト（帯）★2026-09-10 作り直し
   ============================================================
   れおさん「文字の重なり、、帯のわかれ目がない、見にくさがカンストしている」
   ★**一人につき1行**にした。横に重なることが起きない。
   ★名前・時刻・休憩は**帯の上に文字で**出す（帯の中に文字を入れない＝潰れない）。
   ★帯の左右に余白と枠線を付けて、隣とつながって見えないようにした。
   ============================================================ */
.dWrap{border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden;}

/* 時刻の目盛り（★shared.js の planDayTicks で、幅に入るぶんだけに間引いてある） */
.dAxis{position:relative;height:24px;background:var(--bg2);
  border-bottom:1px solid var(--line);margin:0 12px;}
.dTick{position:absolute;top:5px;font-size:0.68rem;color:var(--muted);
  transform:translateX(-50%);white-space:nowrap;letter-spacing:0;}
.dTick.edgeL{transform:none;}                    /* 左端は左づめ（はみ出さない） */
.dTick.edgeR{transform:translateX(-100%);}       /* 右端は右づめ */

/* 枠のまとまり（1単位目・2単位目・プラス配置…） */
.dGrp{border-top:1px solid var(--line);padding:2px 0 8px;}
.dGrp:first-of-type{border-top:0;}
.dGrpHead{padding:9px 12px 5px;font-size:0.86rem;font-weight:800;}
.dGrpHead small{font-weight:600;color:var(--muted);font-size:0.74rem;margin-left:6px;}

/* ★一人ぶん = 1行 */
.dPer{padding:5px 12px 7px;}
.dPer.isMine{background:#EAF1F8;}                /* ★自分の行だけ薄い青 */
.dWho{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;
  margin:0 0 4px;font-size:0.8rem;line-height:1.35;}
.dWho b{font-weight:800;}
.dJob{font-size:0.68rem;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:0 6px;}
.dTime{font-variant-numeric:tabular-nums;font-weight:700;}
.dBrk2{font-size:0.72rem;color:var(--muted);}

/* 帯そのもの（★文字は入れない） */
.dTrack{position:relative;height:15px;background:var(--bg2);border-radius:8px;}
.dGrid{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,0,0,0.07);}
.dBar{position:absolute;top:0;height:15px;border-radius:8px;box-sizing:border-box;
  border:1px solid rgba(0,0,0,0.16);overflow:hidden;}
.dBar.q{background:#C2521A;}
.dBar.a{background:#F0B98E;}
.dBar.mine{border:2px solid #2F6AA3;box-shadow:0 0 0 2px #fff;}
.dBrk{position:absolute;top:0;bottom:0;background:#fff;
  border-left:1px solid rgba(0,0,0,0.28);border-right:1px solid rgba(0,0,0,0.28);
  box-sizing:border-box;}

/* ★せまいスマホでは、もう少し詰める */
@media (max-width:400px){
  .dGrpHead{font-size:0.82rem;}
  .dWho{font-size:0.76rem;gap:2px 6px;}
  .dPer{padding:5px 10px 7px;}
  .dAxis{margin:0 10px;}
}

/* ★段階57（2026-10-03）: 管理者として登録されていない人への案内（common.js の showNoAdmin） */
.noAdminBox{max-width:680px;margin:26px 30px;}
@media (max-width:899px){ .noAdminBox{margin:16px;} }
.noAdminBox p{line-height:1.8;}
.noAdminBox .noAdminGo{display:inline-flex;width:auto;margin-top:14px;text-decoration:none;}