/* ============================================================================
   Dee 会員システム — 共通スタイル
   見本: Dee Academy（web/src/app.css）。色・余白・角丸・影・部品の作法をそろえた。
   変更点は docs/DESIGN.md「14. 画面デザイン」に記録。

   方針
   - 外部 CDN は使わない（書体は端末の標準。日本語が綺麗に出る順に指定）
   - 文字と背景の明暗差は WCAG AA（本文 4.5:1）を満たす値だけを使う
   - 触る所は 44px 以上（指で操作する端末では小さいボタンも 44px に広げる）
   - 既存テンプレートの class 名は消さない・変えない。すべてここで新しい見た目に対応させる
   ============================================================================ */

/* ---------------------------------------------------------------- 1. 変数 */
:root{
  /* 面と線 */
  --bg:#F2F4F7;          /* ページの地 */
  --surface:#FFFFFF;     /* カード・入力欄 */
  --surface2:#F7F8FB;    /* 少し沈めた面（表の見出し・注記） */
  --line:#DDE3EC;        /* 罫線・枠 */

  /* 文字（対 --surface の比を併記） */
  --ink:#16233A;         /* 本文 15.7:1 */
  --muted:#5B6B82;       /* 補足 5.4:1 */
  --faint:#616F85;       /* 小さな注記 5.1:1（見本の #8C9AAE は 2.9:1 で不足のため濃くした） */

  /* 役割の色（既定＝会員。data-role でヘッダー側から差し替える） */
  --accent:#1F4FD8;      /* 6.6:1 */
  --accent-ink:#FFFFFF;  /* --accent の上で 6.6:1 */
  --accent-soft:#E6ECFB; /* --accent を載せて 5.6:1 */

  /* ブランドの色（GYM / Pilates。data-brand で差し替える） */
  --brand-tint:#1F4FD8;
  --brand-soft:#E6ECFB;

  /* 状態 */
  --good:#187A4E;        --good-soft:#E3F3EA;   /* 4.7:1 on soft */
  --attn:#8A5A00;        --attn-soft:#FBF1D6;   /* 5.3:1 on soft */
  --danger:#B3261E;      --danger-soft:#FAE3E3; /* 5.3:1 on soft */
  --warm:#9A5A12;        --warm-soft:#FBEEDF;   /* 4.8:1 on soft */
  --line-green:#06C755;  --line-green-ink:#16233A;  /* LINE の緑。白文字は 2.3:1 で不足なので濃い文字を載せる */

  /* 旧 base.html の変数名（テンプレートが使っているので残す。意味＝淡い背景色） */
  --ok:var(--good-soft);
  --warn:var(--attn-soft);
  --bad:var(--danger-soft);

  /* 影 */
  --shadow:0 1px 2px rgba(22,35,58,.06),0 6px 18px rgba(22,35,58,.06);
  --shadow-sm:0 1px 2px rgba(22,35,58,.06);

  /* 余白の刻み（4 の倍数） */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:26px; --s7:36px; --s8:48px;

  /* 角丸 */
  --r-xs:6px; --r-sm:8px; --r:10px; --r-lg:14px; --r-pill:999px;

  /* 文字の大きさ */
  --fs-xs:12px; --fs-sm:13px; --fs-meta:14px; --fs:16px; --fs-lg:18px;
  --fs-h3:17px; --fs-h2:19px; --fs-h1:26px; --fs-num:30px;

  /* 書体（CDN 無し。端末に入っているものだけ） */
  --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium","Yu Gothic",
         system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Noto Sans Mono",monospace;

  /* 本文の最大幅 */
  --wrap:1040px;
  color-scheme:light;
}

/* 役割で色を出し分ける（ヘッダーの data-role） */
[data-role="member"]{  --accent:#1F4FD8; --accent-soft:#E6ECFB; --accent-ink:#FFFFFF; }
[data-role="trainer"]{ --accent:#0B6B74; --accent-soft:#DFF0F2; --accent-ink:#FFFFFF; }  /* 6.2:1 */
[data-role="admin"]{   --accent:#4B39B3; --accent-soft:#E9E6F8; --accent-ink:#FFFFFF; }  /* 8.3:1 */

/* ブランドで色を出し分ける（data-brand） */
[data-brand="gym"]{     --brand-tint:#1F4FD8; --brand-soft:#E6ECFB; }
[data-brand="pilates"]{ --brand-tint:#A34068; --brand-soft:#F7E7EE; }  /* 6.0:1 */

/* 暗い配色（見本に合わせる） */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F1620; --surface:#172131; --surface2:#1C2739; --line:#2A3850;
    --ink:#E7ECF4; --muted:#A3B0C3; --faint:#93A0B4;
    --accent:#7C9DFF; --accent-ink:#0F1620; --accent-soft:#1E2B48;
    --brand-tint:#7C9DFF; --brand-soft:#1E2B48;
    --good:#4FCB8B; --good-soft:#163526;
    --attn:#E3B24B; --attn-soft:#3A2F12;
    --danger:#F07474; --danger-soft:#3F1B1B;
    --warm:#E9A05A; --warm-soft:#3A2A16;
    --line-green:#06C755; --line-green-ink:#0F1620;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
  :root:not([data-theme="light"]) [data-role="member"]{  --accent:#7C9DFF; --accent-soft:#1E2B48; --accent-ink:#0F1620; }
  :root:not([data-theme="light"]) [data-role="trainer"]{ --accent:#5FC9D4; --accent-soft:#123138; --accent-ink:#0F1620; }
  :root:not([data-theme="light"]) [data-role="admin"]{   --accent:#A99BFF; --accent-soft:#241F45; --accent-ink:#0F1620; }
  :root:not([data-theme="light"]) [data-brand="gym"]{     --brand-tint:#7C9DFF; --brand-soft:#1E2B48; }
  :root:not([data-theme="light"]) [data-brand="pilates"]{ --brand-tint:#F0A0BE; --brand-soft:#3A1F2B; }
}

/* ---------------------------------------------------------------- 2. 素の要素 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--fs); line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:anywhere;
}
h1,h2,h3,h4,h5{margin:0; line-height:1.4; letter-spacing:.01em; text-wrap:balance}
h1{font-family:var(--display); font-size:var(--fs-h1); font-weight:700}
h2{font-size:var(--fs-h2); font-weight:700}
h3{font-size:var(--fs-h3); font-weight:700}
h4{font-size:var(--fs); font-weight:700; margin:var(--s4) 0 var(--s1)}
p{margin:var(--s2) 0}
p:first-child{margin-top:0}
p:last-child{margin-bottom:0}
small{font-size:var(--fs-meta)}
b,strong{font-weight:700}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs)}
hr{border:0; border-top:1px solid var(--line); margin:var(--s4) 0}
ul,ol{margin:var(--s2) 0; padding-left:1.4em}
li{margin:2px 0}
code,pre,.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
code{background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-xs); padding:1px 6px; font-size:.92em}
pre{background:var(--surface2); border:1px solid var(--line); border-radius:var(--r); padding:var(--s3); overflow-x:auto; line-height:1.6}
img,svg{max-width:100%}
details{margin:var(--s2) 0}
summary{cursor:pointer; font-weight:600}
dl{margin:var(--s2) 0}
dt{color:var(--faint); font-size:var(--fs-meta)}
dd{margin:0 0 var(--s2)}

/* 読み上げ用（画面には出さない） */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:50; background:var(--surface); color:var(--ink);
      padding:var(--s2) var(--s3); border:1px solid var(--line); border-radius:var(--r)}
.skip:focus{left:var(--s3); top:var(--s2)}

/* ---------------------------------------------------------------- 3. 骨格（base.html） */
.appbar{position:sticky; top:0; z-index:10; background:var(--surface); border-bottom:1px solid var(--line)}
.appbar::before{content:""; display:block; height:3px; background:var(--brand-tint)}
.appbar-in{max-width:var(--wrap); margin:0 auto; padding:var(--s2) var(--s5);
           display:flex; align-items:center; gap:var(--s4); min-height:58px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:var(--s2); white-space:nowrap; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand b{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.03em}
.brand small{font-size:11px; color:var(--faint); letter-spacing:.16em; font-weight:700}
.appbar .who{display:flex; align-items:center; gap:var(--s2); margin-left:auto;
             font-size:var(--fs-meta); color:var(--muted); white-space:nowrap}
.appbar .who .name{max-width:12em; overflow:hidden; text-overflow:ellipsis}
.appbar .who a{color:var(--muted); font-size:var(--fs-sm); text-decoration:underline}

/* 役割の札 */
.rolechip{display:inline-flex; align-items:center; padding:2px 10px; border-radius:var(--r-pill);
          background:var(--accent-soft); color:var(--accent); font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em}

/* ナビ（横スクロールの帯） */
.nav{background:var(--surface); border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap); margin:0 auto; padding:0 var(--s5) var(--s2);
        display:flex; gap:var(--s1); overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
        /* 右端をぼかして「まだ続きがある」ことを見せる */
        -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
        mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
.nav-in::-webkit-scrollbar{height:4px}
.nav-in::-webkit-scrollbar-thumb{background:var(--line); border-radius:2px}
.nav-in a{display:inline-flex; align-items:center; min-height:38px; padding:var(--s1) var(--s3);
          border-radius:var(--r-sm); color:var(--muted); font-size:var(--fs-meta); font-weight:600; white-space:nowrap}
.nav-in a:hover{background:var(--surface2); color:var(--ink); text-decoration:none}
.nav-in a.on{background:var(--accent-soft); color:var(--accent)}
/* 画面が広いときは折り返して全部見せる（管理者は項目が多い） */
@media (min-width:900px){
  .nav-in{flex-wrap:wrap; overflow-x:visible; -webkit-mask-image:none; mask-image:none}
}

main{max-width:var(--wrap); margin:0 auto; padding:var(--s6) var(--s5) var(--s8)}
.pagefoot{max-width:var(--wrap); margin:0 auto; padding:var(--s5) var(--s5) var(--s7);
          border-top:1px solid var(--line); color:var(--faint); font-size:var(--fs-sm)}
.pagefoot a{color:var(--muted); display:inline-flex; align-items:center; min-height:44px}

/* 見出しブロック */
.page-h{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4);
        margin-bottom:var(--s5); flex-wrap:wrap}
.page-h h1{font-size:var(--fs-h1)}
.eyebrow{font-size:11px; letter-spacing:.14em; color:var(--faint); font-weight:700}
.lede{color:var(--muted); font-size:var(--fs-meta); max-width:62ch}

/* ---------------------------------------------------------------- 4. カード */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
      padding:var(--s5); margin-bottom:var(--s4); box-shadow:var(--shadow)}
.card > h2:first-child,.card > h3:first-child{margin-top:0}
.card h2,.card h3{margin:0 0 var(--s3)}
.card h2{font-size:var(--fs-h2)}
.card h3{font-size:var(--fs-h3)}
.card h4{margin:var(--s4) 0 var(--s1); font-size:var(--fs-meta); color:var(--muted); letter-spacing:.02em}
.card > :last-child{margin-bottom:0}
.box,.note,.copybox{background:var(--surface2); border:1px solid var(--line); border-radius:var(--r);
                    padding:var(--s3) var(--s4); font-size:var(--fs-meta); color:var(--muted)}
.note{border-style:dashed}
.copybox{font-family:var(--mono); color:var(--ink); overflow-x:auto; white-space:pre-wrap; word-break:break-all}

/* ---------------------------------------------------------------- 5. 文字の補助 */
.muted{color:var(--muted); font-size:var(--fs-meta)}
.small{font-size:var(--fs-meta)}
.tiny{font-size:var(--fs-sm); color:var(--faint)}
.meta{color:var(--muted); font-size:var(--fs-meta)}
.big{font-size:var(--fs-num); font-weight:700; font-family:var(--mono); font-variant-numeric:tabular-nums; line-height:1.2}
.sum{font-weight:700}
.sev1{color:var(--muted)}
.sev2{color:var(--attn); font-weight:700}
.sev3{color:var(--danger); font-weight:700}
.wrap{white-space:normal}

/* ---------------------------------------------------------------- 6. 並べ方 */
.row{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center}
.row.spread{justify-content:space-between}
.stack{display:flex; flex-direction:column; gap:var(--s3)}
.actions{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; margin-top:var(--s3)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s3); margin-bottom:var(--s4)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.stat{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--s2)}
.stat > div{background:var(--surface2); border:1px solid var(--line); border-radius:var(--r);
            padding:var(--s3); text-align:center}
.stat > div .muted,.stat > div span{display:block; font-size:var(--fs-sm); color:var(--muted)}
.stat > div b{display:block; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.3}
form.inline{display:inline}
.list{list-style:none; padding:0; margin:0}
.list > li{padding:var(--s3) 0; border-bottom:1px solid var(--line)}
.list > li:last-child{border-bottom:0}

/* KPI タイル（管理者トップ） */
.kpi{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
     padding:var(--s3) var(--s4); text-align:left; color:var(--muted); font-size:var(--fs-sm);
     box-shadow:var(--shadow-sm); text-decoration:none; transition:border-color .15s,transform .05s}
a.kpi:hover{border-color:var(--accent); color:var(--muted); text-decoration:none}
a.kpi:active{transform:translateY(1px)}
.kpi b{display:block; font-size:28px; font-weight:700; color:var(--ink);
       font-variant-numeric:tabular-nums; line-height:1.25; margin-bottom:2px}
.kpi b.sev2{color:var(--attn)}
.kpi b.sev3{color:var(--danger)}

/* ---------------------------------------------------------------- 7. ボタン */
button,.btn,input[type=submit],input[type=button]{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:10px 18px; border-radius:var(--r);
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  font-family:inherit; font-size:var(--fs); font-weight:700; line-height:1.4;
  text-decoration:none; cursor:pointer; transition:filter .15s,background .15s,transform .05s;
}
button:hover,.btn:hover{filter:brightness(1.08); text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
button[disabled],.btn[disabled],button:disabled{opacity:.5; cursor:not-allowed; filter:none}
button.secondary,.btn.secondary,button.sec,.btn.sec{
  background:var(--surface); color:var(--ink); border-color:var(--line); font-weight:600}
button.secondary:hover,.btn.secondary:hover,button.sec:hover,.btn.sec:hover{background:var(--surface2); filter:none}
button.ghost,.btn.ghost{background:transparent; border-color:transparent; color:var(--accent); font-weight:600}
button.danger,.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff}
button.small,.btn.small{min-height:38px; padding:6px 12px; font-size:var(--fs-meta)}
button.line,.btn.line{background:var(--line-green); border-color:var(--line-green); color:var(--line-green-ink)}
/* 指で操作する端末では小さいボタンも 44px */
@media (pointer: coarse){
  button.small,.btn.small{min-height:44px; padding:8px 14px}
  .nav-in a{min-height:44px}
  .appbar .who a,.brand{min-height:44px; display:inline-flex; align-items:center}
  .brand{align-items:baseline}
}

/* ---------------------------------------------------------------- 8. 入力欄 */
label{display:block; margin:var(--s4) 0 var(--s1); font-size:var(--fs-meta); font-weight:600; color:var(--muted)}
label + label{margin-top:var(--s3)}
input,select,textarea{
  font-family:inherit; font-size:var(--fs); /* 16px 未満にしない（iOS が拡大するため） */
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px; min-height:44px; max-width:100%;
  transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:96px; line-height:1.7; resize:vertical}
select{
  appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none}
input[type=checkbox],input[type=radio]{
  appearance:auto; -webkit-appearance:auto; width:20px; height:20px; min-height:0;
  padding:0; accent-color:var(--accent); vertical-align:-3px; cursor:pointer}
input[type=file]{padding:8px; min-height:0}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[readonly],input[disabled],select[disabled],textarea[disabled]{background:var(--surface2); color:var(--muted); cursor:not-allowed}
fieldset{border:1px solid var(--line); border-radius:var(--r); padding:var(--s3) var(--s4); margin:var(--s3) 0}
legend{font-size:var(--fs-meta); font-weight:700; color:var(--muted); padding:0 var(--s1)}
/* チェックの並び（1 行 1 項目。押せる範囲を広く） */
.bigcheck,label.bigcheck{display:flex; gap:var(--s2); align-items:flex-start; min-height:44px;
                         margin:0; padding:var(--s2) 0; font-weight:400; color:var(--ink); font-size:var(--fs)}

/* 段階式フォーム（_reserve_form.html の .step） */
.step{border-left:3px solid var(--line); padding-left:var(--s4); margin:var(--s4) 0}
.step.on{border-color:var(--accent)}
.step > label:first-child{margin-top:0}

/* 空き枠のチップ（.slots） */
.slots{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2)}
.slots label{margin:0; display:inline-flex; align-items:center; justify-content:center; min-height:44px;
             padding:var(--s2) var(--s4); border:1px solid var(--line); border-radius:var(--r);
             background:var(--surface); color:var(--ink); font-weight:600; font-size:var(--fs); cursor:pointer}
.slots label:hover{border-color:var(--accent)}
.slots input{display:none}
.slots input:checked + span{font-weight:700; text-decoration:none}
.slots label:has(input:checked){background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.slots label:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.slotbox{display:flex; flex-wrap:wrap; gap:var(--s2)}

/* ---------------------------------------------------------------- 9. 表 */
.tbl{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line);
     border-radius:var(--r); background:var(--surface)}
.tbl > table{border:0}
table{border-collapse:collapse; width:100%; font-size:var(--fs-meta); background:var(--surface)}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap}
th{font-size:var(--fs-sm); font-weight:700; color:var(--faint); letter-spacing:.04em;
   background:var(--surface2)}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface2)}
td.wrap,th.wrap{white-space:normal; min-width:14em}
td .btn,td button{margin:2px 0}
/* 表の中のリンクは行が詰まるので 44px にはしないが、押せる高さ 24px は確保する（WCAG 2.2 の 2.5.8） */
td a,th a{display:inline-block; min-height:24px; padding:3px 0}

/* ---------------------------------------------------------------- 10. 状態表示（バッジ） */
.badge,.pill,.tag{display:inline-flex; align-items:center; gap:var(--s1); white-space:nowrap;
  padding:2px 10px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:700;
  background:var(--surface2); color:var(--muted); border:1px solid var(--line)}
.badge.confirmed,.badge.done,.badge.created,.badge.ok,.badge.active,.badge.approved,.badge.paid,.badge.held,
.pill.good,.tag.good{background:var(--good-soft); color:var(--good); border-color:transparent}
.badge.pending,.badge.reassigning,.badge.queued,.badge.prospect,.badge.trial,.badge.asking,.badge.open,
.pill.warn,.tag.warn{background:var(--attn-soft); color:var(--attn); border-color:transparent}
.badge.unassigned,.badge.failed,.badge.no_show,.badge.withdrawn,.badge.rejected,.badge.at_risk,.badge.reselect,
.badge.cancelled,.badge.canceled,.pill.bad,.tag.bad{background:var(--danger-soft); color:var(--danger); border-color:transparent}
.badge.gym,.badge.pilates,.tag.brand{background:var(--brand-soft); color:var(--brand-tint); border-color:transparent}
.pill.acc{background:var(--accent-soft); color:var(--accent); border-color:transparent}

/* ---------------------------------------------------------------- 11. 通知・空状態 */
.flash,.error,.err,.warnbox{border-radius:var(--r); padding:var(--s3) var(--s4); margin-bottom:var(--s4);
  font-size:var(--fs-meta); border:1px solid transparent; line-height:1.7}
.flash{background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb,var(--good) 25%,transparent)}
.error,.err{background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 25%,transparent)}
.warnbox{background:var(--attn-soft); color:var(--attn); border-color:color-mix(in srgb,var(--attn) 25%,transparent)}
.flash a,.error a,.err a{color:inherit; text-decoration:underline; font-weight:700}
.empty{padding:var(--s6); text-align:center; color:var(--faint); border:1px dashed var(--line); border-radius:var(--r)}

/* 読み込み中のくるくる（liff などで使う .spin と同名） */
.spin{display:inline-block; width:18px; height:18px; border:2px solid var(--line);
      border-top-color:var(--accent); border-radius:50%; animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- 12. 携帯（375px で崩れないこと） */
@media (max-width:720px){
  :root{--fs-h1:22px; --fs-h2:18px; --fs-num:26px}
  .appbar-in{padding:var(--s2) var(--s3); gap:var(--s2); min-height:52px}
  .nav-in{padding:0 var(--s3) var(--s2)}
  main{padding:var(--s4) var(--s3) var(--s7)}
  .pagefoot{padding:var(--s4) var(--s3) var(--s6)}
  .card{padding:var(--s4); border-radius:var(--r-lg)}
  .grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s2)}
  .grid2{grid-template-columns:1fr}
  .kpi b{font-size:24px}
  th,td{padding:9px 10px}
  .appbar .who{width:100%; margin-left:0; justify-content:space-between}
  /* 画面が狭い＝ほぼ携帯。触る所を 44px にそろえる */
  .nav-in a{min-height:44px}
  .appbar .who a{min-height:44px; display:inline-flex; align-items:center}
  .brand{min-height:44px; display:inline-flex; align-items:baseline}
  button.small,.btn.small{min-height:44px; padding:8px 14px}
}
@media (max-width:400px){
  .grid{grid-template-columns:1fr 1fr}
  .kpi{padding:var(--s2) var(--s3)}
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation-duration:.001ms !important}
}

/* 印刷（会員台帳などを紙で見るとき） */
@media print{
  .appbar,.nav,.pagefoot,.actions{display:none}
  body{background:#fff}
  .card{box-shadow:none; border-color:#ccc; break-inside:avoid}
}

/* ============================================================================
   新しい見た目（サイドメニュー型）。2026-09-26 代表の指示で着手。
   body.ui-new のときだけ効く。**色・余白・角丸・文字の大きさは上の変数をそのまま使う**
   （WCAG AA を確認済みの値なので作り直さない）。変えたのは画面の骨格だけ:
   上に並ぶメニュー 22 本 → 左のサイドメニュー（意味でまとめる）＋作業領域。
   サイドの帯だけは専用の色（--rail）。--ink は暗い画面だと明るい色になるため使えない。
   ============================================================================ */
:root{
  --rail:#16233A;        /* サイドの地。白文字 15.7:1 */
  --rail-ink:#E7ECF4;
  --rail-muted:#9BA9BF;  /* グループ見出し。--rail の上で 5.9:1 */
  --rail-hi:#22345A;     /* カーソルを載せたとき */
  --rail-sub:#1B2B47;    /* 中身の一覧の地。白文字 12.0:1 */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --rail:#131C29; --rail-sub:#18243A; --rail-hi:#22304A; }
}
.ui-new{margin:0; background:var(--bg)}
.ui-new .shell{display:grid; grid-template-columns:256px 1fr; min-height:100vh}
.ui-new .side{background:var(--rail); color:var(--rail-ink); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow:hidden}
.ui-new .side-logo{padding:var(--s4) var(--s4) var(--s3); background:var(--rail)}
.ui-new .side-logo a{display:flex; align-items:baseline; gap:var(--s2); color:#fff; text-decoration:none}
.ui-new .side-logo b{font-family:var(--display); font-size:var(--fs-lg); letter-spacing:.06em}
.ui-new .side-logo small{font-size:10px; letter-spacing:.18em; color:var(--rail-muted)}

/* 二段構え: 細いアイコンの列（かたまり）＋ その中身の一覧 */
.ui-new .side-two{display:grid; grid-template-columns:72px 1fr; flex:1; min-height:0}
.ui-new .rail{display:flex; flex-direction:column; overflow-y:auto; background:var(--rail)}
.ui-new .rail-b{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:var(--s3) 2px; min-height:64px; color:var(--rail-ink); text-decoration:none;
  font-size:11px; line-height:1.2; text-align:center; border:0; background:none; cursor:pointer}
.ui-new .rail-b .ic{width:22px; height:22px}
.ui-new .rail-b:hover{background:var(--rail-hi)}
.ui-new .rail-b.on{background:var(--accent); color:var(--accent-ink)}
.ui-new .rail-b:focus-visible{outline:2px solid #fff; outline-offset:-3px}

.ui-new .sublist{background:var(--rail-sub); overflow-y:auto; padding:var(--s2) 0 var(--s6)}
.ui-new .sublist a{display:block; padding:11px var(--s4); color:var(--rail-ink); text-decoration:none;
  font-size:var(--fs-meta); min-height:42px}
.ui-new .sublist a:hover{background:var(--rail-hi)}
.ui-new .sublist a[aria-current]{background:var(--accent); color:var(--accent-ink); font-weight:700}
.ui-new .sublist a:focus-visible{outline:2px solid #fff; outline-offset:-2px}

.ui-new .work{display:flex; flex-direction:column; min-width:0}
.ui-new .topbar{position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--line)}
.ui-new .topbar-in{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s5)}
.ui-new .topbar .page{font-size:var(--fs-h2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ui-new .topbar .sp{flex:1}
.ui-new .topbar .name{font-size:var(--fs-sm); color:var(--muted); white-space:nowrap}
.ui-new .topbar a{font-size:var(--fs-sm); white-space:nowrap}
.ui-new .side-toggle{display:none; font:inherit; font-size:20px; line-height:1; min-width:44px; min-height:44px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); cursor:pointer}
.ui-new main{padding:var(--s5); max-width:1180px; width:100%; display:flex; flex-direction:column; gap:var(--s4)}
.ui-new main>.card{margin:0}
.ui-new .pagefoot{padding:var(--s5); color:var(--faint); font-size:var(--fs-sm)}
.ui-new .pagefoot form.inline{display:inline}

/* スマホ: サイドメニューは引き出し（≡ で開く） */
@media (max-width:860px){
  .ui-new .shell{grid-template-columns:1fr}
  .ui-new .side{position:fixed; left:0; top:0; bottom:0; width:256px; transform:translateX(-100%);
    transition:transform .18s ease; z-index:20; height:100dvh}
  .ui-new.side-open .side{transform:none; box-shadow:0 0 0 100vmax rgba(22,35,58,.45)}
  .ui-new .side-toggle{display:inline-flex; align-items:center; justify-content:center}
  .ui-new .topbar-in{gap:var(--s2); padding:var(--s2) var(--s3)}
  .ui-new .topbar .page{font-size:var(--fs-h3)}
  .ui-new .topbar .rolechip{display:none}     /* 幅が足りないので役割の印は省く */
  .ui-new .topbar .name{display:none}
  .ui-new main{padding:var(--s3); gap:var(--s3)}
  .ui-new .pagefoot{padding:var(--s4) var(--s3)}
}
@media (prefers-reduced-motion:reduce){ .ui-new .side{transition:none} }

/* 一覧の見出し行と、折りたたみの検索条件（hacomono の一覧と同じ並び。2026-09-26） */
.page-top{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin:0 0 var(--s3)}
.page-top-t{display:flex; align-items:baseline; gap:var(--s2); min-width:0}
.page-top-t h2{margin:0}
.page-top-t .count{color:var(--muted); font-size:var(--fs-meta)}
.page-top-a{margin-left:auto; display:flex; gap:var(--s2); flex-wrap:wrap}
.filters{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin:0 0 var(--s4)}
.filters>summary{padding:var(--s3) var(--s4); cursor:pointer; font-size:var(--fs-meta); font-weight:700;
  list-style:none; display:flex; align-items:center; gap:var(--s2); min-height:44px}
.filters>summary::-webkit-details-marker{display:none}
.filters>summary::before{content:"\1F50D"; font-size:13px}
.filters>summary::after{content:"\25BE"; margin-left:auto; color:var(--faint)}
.filters[open]>summary::after{content:"\25B4"}
.filters[open]>summary{border-bottom:1px solid var(--line)}
.filters-in{padding:var(--s4)}
.filters-in .row{margin:0}

/* 横に並ぶタブ（会員詳細など）。hacomono と同じで、選んだものに下線が付く。2026-09-26 */
.tabs{display:flex; gap:var(--s4); overflow-x:auto; border-bottom:1px solid var(--line);
  margin:0 0 var(--s4); -webkit-overflow-scrolling:touch}
.tabs .tab{appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  padding:var(--s3) 2px; margin-bottom:-1px; font:inherit; font-size:var(--fs-meta); color:var(--muted);
  white-space:nowrap; cursor:pointer; min-height:44px}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab[aria-selected="true"]{color:var(--accent); font-weight:700; border-bottom-color:var(--accent)}
.tabs .tab:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-xs)}
.tabsec{display:flex; flex-direction:column; gap:var(--s4)}
.tabsec[hidden]{display:none}   /* display 指定は hidden より強いので、明示して打ち消す */
.tabsec>.card{margin:0}

/* 人の見出し（会員詳細）と、畳んだ「詳しい情報」。2026-09-26 */
.person .tags{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s3) 0}
.person .stat{margin:var(--s3) 0 0}
details.more{margin:var(--s3) 0 0; border-top:1px solid var(--line); padding-top:var(--s2)}
details.more>summary{cursor:pointer; font-size:var(--fs-meta); color:var(--muted); min-height:36px;
  display:flex; align-items:center; gap:var(--s2); list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"\25BE"}
details.more[open]>summary::after{content:"\25B4"}
dl.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s2) var(--s4); margin:var(--s3) 0 0}
dl.kv>div{display:flex; gap:var(--s2); align-items:baseline; min-width:0}
dl.kv dt{color:var(--faint); font-size:var(--fs-sm); min-width:5.5em}
dl.kv dd{margin:0; font-size:var(--fs-meta); word-break:break-all}

/* 予約カレンダー（列＝トレーナー／行＝時間）。2026-09-26 */
.cal-card{padding:0; overflow:hidden}
.cal-scroll{overflow:auto; max-height:min(72vh,780px)}
table.cal{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:var(--fs-sm)}
table.cal th,table.cal td{border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:0; vertical-align:top}
table.cal thead th{position:sticky; top:0; z-index:2; background:var(--surface2); padding:var(--s2) var(--s3);
  white-space:nowrap; text-align:left; font-size:var(--fs-meta); min-width:140px}
table.cal thead th.me{color:var(--accent)}
table.cal thead th .count{color:var(--muted); font-weight:400; font-size:var(--fs-xs)}
table.cal .cal-time{position:sticky; left:0; z-index:1; background:var(--surface2); color:var(--faint);
  font-size:var(--fs-xs); font-weight:400; text-align:right; padding:2px var(--s2); width:52px; min-width:52px;
  white-space:nowrap}
table.cal thead .cal-time{z-index:3}
table.cal tbody tr{height:26px}
.cal-free a{display:block; height:100%; min-height:26px; color:transparent; text-align:center; line-height:26px}
.cal-free a:hover,.cal-free a:focus-visible{background:var(--accent-soft); color:var(--accent)}
.cal-ev{padding:2px}
.cal-ev .ev{height:100%; border-radius:var(--r-xs); padding:3px 6px; display:flex; flex-direction:column; gap:1px;
  overflow:hidden; border-left:3px solid var(--accent); background:var(--accent-soft)}
.cal-ev .ev b{font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-ev .ev span{font-size:var(--fs-xs); color:var(--muted)}
.cal-ev .ev.done{border-left-color:var(--ok, #1E7A46); background:var(--surface2)}
.cal-ev .ev.consumed{border-left-color:var(--bad, #B3261E); background:var(--surface2)}
/* 体験は回数を使わないので、消化と見分けられる色にする（2026-10-01 代表の指示） */
.cal-ev .ev.trial{border-left-color:var(--acc, #6B4EFF); background:var(--surface2)}

/* 予約カレンダーの操作パネル（コマを押すと開く）。2026-09-26 */
.seg{display:inline-flex; gap:var(--s1); flex-wrap:wrap}
dialog.evbox{border:0; border-radius:var(--r-lg); padding:var(--s5); max-width:min(680px,92vw); width:100%;
  background:var(--surface); color:var(--ink); box-shadow:0 18px 48px rgba(22,35,58,.28)}
dialog.evbox::backdrop{background:rgba(22,35,58,.45)}
dialog.evbox h3{margin:0 0 var(--s1)}
dialog.evbox .evbox-x{float:right; margin:-4px -4px 0 var(--s3)}
dialog.evbox .row{gap:var(--s3) var(--s3)}
dialog.evbox label{display:block; font-size:var(--fs-sm); color:var(--muted)}
dialog.evbox details.more{border-top:1px solid var(--line)}
dialog.evbox details.more>summary{font-weight:700; color:var(--ink)}

/* 同じ担当・同じ時間に 2 件あるとき（ダブルブッキング）。両方出して赤で知らせる。2026-09-27 */
.cal-ev.many{display:flex; flex-direction:column; gap:2px}
.cal-ev .ev.over{border-left-color:var(--bad,#B3261E)}
.cal-ev.many .ev{min-height:0}

/* 回数のまとめ（項目ごと）。2026-09-30 代表の指示で今月・来月・チケットを分けた。 */
.counts{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s3); margin:var(--s3) 0 0}
.counts-b{background:var(--surface2); border:1px solid var(--line); border-radius:var(--r); padding:var(--s3)}
.counts-h{margin:0; font-size:var(--fs-xs); color:var(--muted); letter-spacing:.04em}
.counts-v{margin:2px 0 0; font-family:var(--display); font-size:var(--fs-num); line-height:1.1}
.counts-u{font-size:var(--fs-meta); font-family:inherit; color:var(--muted)}
.counts-s{margin:2px 0 0; font-size:var(--fs-sm); color:var(--muted)}

/* 長い選択欄の絞り込み（2026-10-06 代表の指示「施設選択の際は検索できるように」）。
   base.html の JS が選択欄の直前に差し込む。打った言葉に合う項目だけを残す。 */
.selsearch{display:block; width:100%; max-width:22rem; margin:0 0 .3rem;
  padding:.4rem .55rem; font-size:var(--fs-sm); border:1px solid var(--line); border-radius:var(--r-xs);
  background:var(--surface); color:var(--fg)}
.selsearch::placeholder{color:var(--muted)}
.selsearch:focus{outline:2px solid var(--accent); outline-offset:1px}
.selsearch.none{border-color:var(--bad,#B3261E)}

/* 管理者が会員の画面を覗いている間の帯（2026-10-26）。見落とさない色にする。 */
.viewas{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap;
        background:#7a2f12; color:#fff; padding:10px var(--s4); font-size:var(--fs-meta)}
.viewas b{font-size:var(--fs-body)}
.viewas form{margin:0}
.viewas .btn, .viewas button{background:#fff; color:#7a2f12; border-color:#fff}