/* ================================================================
   塾生ポータルの見た目
   ----------------------------------------------------------------
   if(塾) のサイトとは別の面。あちらは読み物、こちらは道具。
   色と書体は同じものを使い、部品だけ作り直している。
   いまはガワだけで、後ろに何もつながっていない。
   ================================================================ */

:root {
  --paper:#fffaf5; --surface:#ffffff; --tint:#fff3e7; --sunk:#faf3ec;
  --ink:#1a1310; --ink-2:#6b5d55; --ink-3:#9a8b81;
  --line:#efe0d2; --line-2:#e3d0bd;
  --brand:#ff7700; --brand-ln:#d96200; --brand-tx:#a85000; --brand-soft:#ffe9d4;
  --ok:#2f7d5a; --ok-soft:#e2f2ea;
  --warn:#c2410c; --warn-soft:#ffe6d8;
  --wait:#5b7794; --wait-soft:#e6edf4;
  --f-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --f-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --r:14px;
  --shadow:0 1px 2px rgba(26,19,16,.05), 0 10px 28px -14px rgba(26,19,16,.22);
}

* { box-sizing:border-box; }
html { scrollbar-gutter:stable; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--f-display); line-height:1.45; margin:0; text-wrap:balance; }
p { margin:0; }
a { color:var(--brand-tx); }
:focus-visible { outline:3px solid var(--brand-ln); outline-offset:2px; border-radius:6px; }

/* ---------- ヘッダー ---------- */
.top {
  position:sticky; top:0; z-index:40;
  background:rgba(255,250,245,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top__in {
  max-width:1180px; margin-inline:auto; padding:11px 20px;
  display:flex; align-items:center; gap:18px;
}
.top__logo { display:inline-flex; flex:none; text-decoration:none; }
.top__logo img { display:block; width:88px; height:auto; }
.top__who { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:14px; }
.top__who b { font-family:var(--f-display); font-weight:700; }
.top__out {
  font-family:var(--f-mono); font-size:12px; color:var(--ink-2);
  text-decoration:none; padding:7px 12px; border:1px solid var(--line-2); border-radius:9px;
}
.top__out:hover { background:var(--tint); }

.tabs { display:flex; gap:4px; overflow-x:auto; }
.tabs a {
  font-family:var(--f-display); font-weight:700; font-size:14.5px;
  text-decoration:none; color:var(--ink-2); white-space:nowrap;
  padding:8px 14px; border-radius:10px;
}
.tabs a:hover { background:var(--tint); color:var(--ink); }
.tabs a[aria-current="page"] { background:var(--ink); color:var(--paper); }

/* ---------- 版面 ---------- */
.wrap { max-width:1180px; margin-inline:auto; padding:34px 20px 96px; }
.head { margin-bottom:30px; }
.head h1 { font-size:clamp(24px,3.4vw,32px); font-weight:900; }
.head p { color:var(--ink-2); font-size:15.5px; margin-top:8px; }
/* 見出しを板に譲ったページ。導入の一文だけが残る */
.head--lead { margin-bottom:22px; }
.head--lead p { margin-top:0; }

.cols { display:grid; gap:26px; }
/* 表は最低420px要る。それを中で横スクロールさせるのが .tablewrap の役目だが、
   格子の列は既定で中身より狭くなれないので、表の幅がそのまま列の幅になり、
   狭い画面ではページ全体が横にはみ出していた。列が縮めるようにしておく */
.cols > * { min-width:0; }
@media (min-width:1000px) {
  .cols { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:stretch; }
  /* 左右の柱の下端を揃える。短い側は最後のカードが伸びて受ける */
  .cols > * { display:flex; flex-direction:column; }
  .cols > * > .card:last-child { flex:1; }
}

.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow);
}
.card + .card { margin-top:20px; }
.card__h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.card__h h2 { font-size:18px; font-weight:900; }
.card__h span { font-family:var(--f-mono); font-size:12px; color:var(--ink-3); margin-left:auto; }

/* ---------- しるし ---------- */
.tag {
  display:inline-block; font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  padding:3px 10px; border-radius:999px; border:1px solid currentColor; letter-spacing:.02em;
}
.tag--ok { color:var(--ok); background:var(--ok-soft); }
.tag--warn { color:var(--warn); background:var(--warn-soft); }
.tag--wait { color:var(--wait); background:var(--wait-soft); }
.tag--open { color:var(--ink-3); }
.tag--rank { color:var(--brand-tx); background:var(--brand-soft); }

.ranks { display:flex; flex-wrap:wrap; gap:8px; }
.ranks .tag { font-size:12px; }

/* ---------- 掲示板 ----------
   ギルドの掲示板。石の壁に、依頼書が何枚も重ねて留めてある。
   見本にした絵は、紙が板を埋め尽くして重なり合っているのが要点だった。
   だから紙は2列で少し重ね、その後ろに、読むためではない古い貼り紙を
   12枚敷いて板を埋めている。奥の紙には中身を持たせていない。
   ------------------------------------------- */
.board {
  --stone-1:#3a4642; --stone-2:#242e2b; --stone-3:#161d1b;
  --paper-1:#f6ecd6; --paper-2:#e9dabb;
  --paper-ink:#241a10; --paper-ink-2:#6a5439;
  position:relative; border-radius:10px; padding:0 0 26px;
  border:13px solid #4a4740;
  background:
    /* 石の面の当たり */
    radial-gradient(58% 42% at 18% 12%, rgba(255,255,255,.05), rgba(0,0,0,0) 70%),
    radial-gradient(46% 38% at 82% 84%, rgba(255,255,255,.03), rgba(0,0,0,0) 70%),
    /* 石の目地 */
    repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 2px, rgba(0,0,0,0) 2px 64px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.17) 0 2px, rgba(0,0,0,0) 2px 96px),
    linear-gradient(170deg, var(--stone-1), var(--stone-2) 58%, var(--stone-3));
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.55),
    inset 0 0 70px rgba(0,0,0,.6),
    0 22px 40px -24px rgba(0,0,0,.75);
}

/* 板の頭に彫り込んだ看板 */
.board__head {
  position:relative; z-index:3;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:-1px -1px 24px; padding:15px 24px 14px;
  border-radius:5px 5px 0 0;
  background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.16));
  border-bottom:2px solid rgba(0,0,0,.45);
}
.board__head h1 {
  font-size:20px; font-weight:900; letter-spacing:.06em;
  color:#efe4cb; text-shadow:0 -1px 0 rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.1);
}
.board__head span {
  margin-left:auto; font-family:var(--f-mono); font-size:12px;
  color:rgba(239,228,203,.6);
}

/* 依頼書を貼る面。2列に並べ、少し重ねる */
.board__pin {
  position:relative;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  /* 隙間はほぼ無し。重ねる分は下の負の余白でつくる */
  gap:10px 6px; padding:14px 22px 10px;
}
@media (max-width:820px) { .board__pin { grid-template-columns:minmax(0, 1fr); } }

.board__note {
  position:relative; z-index:3;
  margin:24px 22px 0; font-size:13px; line-height:1.85;
  color:rgba(239,228,203,.58);
}

/* ---------- 奥の貼り紙 ----------
   板を埋めるためだけの紙。字は書いていないが、遠目に文字の連なりに
   見えるよう、細い横線を等間隔で引いてある。押せないし読めない */
/* 奥の紙は飾りなので、板の内側で切ってしまう。
   端の紙は枠の下に差し込まれているように見える */
.board__old { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.board__old i {
  position:absolute; display:block; opacity:.5;
  background:linear-gradient(163deg, #f0e3c6, #ddc9a0);
  border-radius:2px 3px 2px 3px;
  box-shadow:0 7px 11px -7px rgba(0,0,0,.85), inset 0 0 0 1px rgba(120,92,48,.25);
}
.board__old i::before {
  content:""; position:absolute; inset:14% 12%;
  background:repeating-linear-gradient(rgba(92,70,40,.42) 0 1px, rgba(0,0,0,0) 1px 6px);
}
/* 奥の紙にも画鋲は刺さっている */
.board__old i::after {
  content:""; position:absolute; top:5px; left:50%; translate:-50% 0;
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 33% 28%, #d8b48a 0 16%, #8a6238 55%, #4d3418);
}
@media (max-width:560px) { .board__old { display:none; } }
/* ---------- 依頼書 ----------
   ギルドが出した依頼書を、羊皮紙に刷って板に留めてある。
   前は下の辺をちぎっていたが、それだと紙の切れ端に見えた。
   書類らしく見せているのは、次の4つ。
     ・辺はまっすぐ。大きさもそろえる。同じ用紙で刷られたもの
     ・上に「依 頼」の見出し、真ん中に件名、下に項目を並べる
     ・羊皮紙は縁から古びる。内側に向かって焼けた色を入れる
     ・傾きだけ一枚ずつ変える。刷り物だが、貼ったのは人の手
   ------------------------------------------- */
.quest {
  position:relative;
  padding:28px 26px 24px; text-align:center;
  color:var(--paper-ink);
  background:
    /* 縁の焼け */
    radial-gradient(120% 92% at 50% 50%, rgba(0,0,0,0) 52%, rgba(146,104,44,.2) 88%, rgba(120,82,30,.34)),
    /* 紙の目 */
    repeating-linear-gradient(52deg, rgba(120,92,48,.05) 0 1px, rgba(0,0,0,0) 1px 5px),
    repeating-linear-gradient(-38deg, rgba(120,92,48,.03) 0 1px, rgba(0,0,0,0) 1px 7px),
    linear-gradient(162deg, var(--paper-1), var(--paper-2));
  /* 断ちがほんの少し不揃い。ちぎるのではなく、切り口の甘さだけ */
  border-radius:3px 5px 3px 4px / 4px 3px 5px 3px;
  box-shadow:
    inset 0 0 0 1px rgba(120,92,48,.22),
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 16px -9px rgba(0,0,0,.75),
    0 2px 4px rgba(0,0,0,.3);
  transition:rotate .18s ease, translate .18s ease, box-shadow .18s ease;
}

/* 同じ用紙で刷られた書類なので、大きさはそろえる。
   変えるのは傾きと、紙の焼け具合だけ。
   傾きは見本の絵に寄せて強めにし、隣とわずかに重なるようにしてある */
.quest { z-index:1; }
/* 左の列は右へ、右の列は左へはみ出させて、真ん中で重ねる。
   上下も引き上げて、段のあいだでも重なるようにする */
/* 重ねる幅は、紙の余白（左右26px・下24px）より小さくしてある。
   上に乗った紙が隠すのは余白だけで、字には届かない */
.quest:nth-child(4n+1) { rotate:-1.5deg; margin:0 -12px 0 0; }
.quest:nth-child(4n+2) { rotate: 1.1deg; margin:16px 0 0 -10px; z-index:2;
  --paper-1:#f4e8ce; --paper-2:#e7d6b2; }
.quest:nth-child(4n+3) { rotate: .8deg;  margin:-16px -10px 0 0; z-index:3;
  --paper-1:#f7efdc; --paper-2:#ecdfc5; }
.quest:nth-child(4n+4) { rotate:-1.2deg; margin:0 0 0 -12px; z-index:4;
  --paper-1:#f3e7cd; --paper-2:#e5d3ae; }
.quest:nth-child(n+5) { z-index:5; }
/* 狭い画面では1列になるので、重ねずに素直に積む */
@media (max-width:820px) { .quest { margin:0 !important; } }

/* 画鋲。紙を貫いて板に刺さっている */
.quest::before {
  content:""; position:absolute; z-index:2;
  top:10px; left:50%; translate:-50% 0;
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 33% 28%, #ffb98a 0 14%, #e8562f 46%, #9d1e0c 100%);
  box-shadow:0 3px 5px -1px rgba(90,60,20,.55), inset 0 -2px 3px rgba(0,0,0,.35);
}
.quest:nth-child(4n+2)::before { background:radial-gradient(circle at 33% 28%, #cfe6ff 0 14%, #3f7fd0 46%, #1b3f78 100%); }
.quest:nth-child(4n+3)::before { background:radial-gradient(circle at 33% 28%, #ffe9a8 0 14%, #d8a12a 46%, #8a5f0d 100%); }
.quest:nth-child(4n+4)::before { background:radial-gradient(circle at 33% 28%, #d8f0d2 0 14%, #4a8f4a 46%, #22522a 100%); }

/* 書類の頭。両側に罫を引いて、二文字を離して置く */
.quest__kind {
  display:flex; align-items:center; gap:12px;
  font-family:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight:700; font-size:12px; letter-spacing:.5em; text-indent:.5em;
  color:rgba(120,82,30,.75);
}
.quest__kind::before, .quest__kind::after {
  content:""; flex:1; height:1px; background:rgba(120,92,48,.32);
}

.quest__t {
  font-family:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight:700; font-size:17.5px; line-height:1.6;
  margin:14px auto 16px; max-width:22em; text-wrap:balance;
}

/* 依頼の中身。項目名と中身を二列に並べる */
.quest__spec {
  display:grid; grid-template-columns:max-content 1fr; gap:7px 18px;
  width:fit-content; max-width:100%; margin:0 auto;
  text-align:left; font-size:13.5px; line-height:1.7;
  padding-top:15px; border-top:1px solid rgba(120,92,48,.3);
}
.quest__spec dt {
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--paper-ink-2); padding-top:3px;
}
.quest__spec dd { margin:0; }

/* 受けるボタン。書類の下に置く */
.quest__take {
  position:relative; z-index:2; margin-top:22px;
  font-family:var(--f-display); font-weight:700; font-size:14px;
  padding:10px 30px; border-radius:999px; cursor:pointer; white-space:nowrap;
  background:var(--brand); color:#2a1a0e; border:1.5px solid #8f3f00;
  box-shadow:0 2px 0 #8f3f00, 0 6px 10px -6px rgba(0,0,0,.6);
  transition:translate .12s ease, box-shadow .12s ease;
}
/* 触ると、紙をつまんで見るように真っ直ぐ起きて浮く。
   受けられない札は動かさない。押せないことが手触りで分かる */
.quest:not(.quest--locked):hover {
  z-index:9;
  rotate:0deg; translate:0 -3px;
  box-shadow:
    inset 0 0 0 1px rgba(120,92,48,.22),
    inset 0 1px 0 rgba(255,255,255,.45),
    0 20px 26px -12px rgba(0,0,0,.8),
    0 2px 4px rgba(0,0,0,.3);
}
.quest__take:hover { translate:0 -2px; box-shadow:0 4px 0 #8f3f00, 0 10px 14px -6px rgba(0,0,0,.6); }
.quest__take:active { translate:0 2px; box-shadow:0 0 0 #8f3f00; }

/* ランクが届かない依頼書。日に焼けて色が抜けている。
   消さずに残すのは、いま何が見えていないかを本人に伝えるため */
.quest--locked { filter:grayscale(.5) brightness(.95); opacity:.76; }
.quest--locked .quest__take {
  background:transparent; color:#5c4a34; border:1.5px dashed #9c866a;
  box-shadow:none; cursor:not-allowed;
}

/* すでに受けられた依頼書。赤い判子を押す */
.quest--taken { filter:none; opacity:.92; }
.quest--taken .quest__take {
  background:transparent; color:#a3271a; border:2.5px double #a3271a;
  border-radius:5px; padding:7px 18px; font-weight:900; letter-spacing:.1em;
  rotate:-6deg; box-shadow:none; cursor:default; opacity:.85;
}
.quest--taken .quest__take:hover { translate:0 0; box-shadow:none; }

@media (max-width:560px) {
  .board { border-width:7px; }
  .board__head { padding:13px 16px 12px; margin-bottom:20px; }
  .board__pin { padding-inline:14px; gap:18px; }
  .board__note { margin-inline:14px; }
  .quest { padding:28px 16px 24px; }
  .quest__t { font-size:17.5px; margin:12px auto 14px; }
  .quest__spec { gap:6px 14px; font-size:13px; }
  .quest__take { width:100%; }
  .quest--taken .quest__take { width:auto; }
}

@media (prefers-reduced-motion:reduce) { .quest { rotate:0deg !important; } }
/* ---------- 案件の進み ---------- */
.job + .job { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.job__h { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; }
.job__h b { font-family:var(--f-display); font-weight:900; font-size:16.5px; }
.job__h span { font-family:var(--f-mono); font-size:12px; color:var(--ink-2); }
.job__h .right { margin-left:auto; }
.bar { display:flex; gap:4px; margin:12px 0 14px; }
.bar i { height:8px; flex:1; border-radius:3px; background:var(--line-2); }
.bar i.ok { background:var(--ok); }
.bar i.wait { background:var(--wait); }
.bar i.late { background:var(--warn); }

/* ---------- 表 ---------- */
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; min-width:420px; font-size:14.5px; }
th, td { text-align:left; padding:11px 14px 11px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-family:var(--f-mono); font-size:11.5px; font-weight:500; color:var(--ink-3); letter-spacing:.04em; }
td.num { font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; padding-right:0; }
tr:last-child td { border-bottom:0; }

/* ---------- たまり ---------- */
.pool { display:grid; gap:10px; }
.pool__row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.pool__n { font-family:var(--f-mono); font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.pool__bar { height:8px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.pool__bar i { display:block; height:100%; background:var(--brand); }

/* ---------- 入口 ---------- */
.gate {
  min-height:100svh; display:grid; place-items:center;
  padding:40px 20px 78px; position:relative; isolation:isolate; overflow:hidden;
}
/* 背景のにじみ。紙の上に置いた照明のつもり */
.gate::before, .gate::after {
  content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(70px);
}
.gate::before { width:540px; height:540px; background:var(--brand-soft); opacity:.6; top:-170px; left:-150px; }
.gate::after { width:480px; height:480px; background:var(--tint); bottom:-190px; right:-130px; }
.gate__in {
  width:100%; max-width:980px;
  display:grid; grid-template-columns:minmax(0,1fr) 400px;
  gap:52px; align-items:stretch;
}
.gate__logo { display:block; width:104px; height:auto; margin:0 0 16px; }
.gate h1 { font-size:clamp(26px,3.4vw,34px); font-weight:900; }
.gate p.sub { color:var(--ink-2); font-size:15.5px; margin-top:10px; }
.gate__feats { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px; }
.gate__feats li { display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--ink-2); }
.fico {
  width:34px; height:34px; flex:none; padding:7px; color:var(--brand-ln);
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:11px;
  box-shadow:0 1px 2px rgba(26,19,16,.06);
}
/* 左の柱は右の柱と同じ高さ。中身は中央、戻るリンクは下端で揃う */
.gate__brand { display:flex; flex-direction:column; justify-content:center; }
.gate__entry { display:grid; gap:14px; min-width:0; }
.gcard { padding:20px 22px 17px; }
.gcard .card__h { margin-top:2px; }
.kick { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); }
.btn--big {
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:46px; font-size:15px;
}
.bico { width:20px; height:20px; flex:none; }
.btn {
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  font-family:var(--f-display); font-weight:700; font-size:15.5px;
  padding:14px 20px; border-radius:12px; cursor:pointer; text-decoration:none;
  border:1.5px solid var(--brand-ln); background:var(--brand); color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(217,98,0,.7); }
.btn--discord { background:#5865f2; border-color:#4752c4; color:#fff; }
.btn--discord:hover { box-shadow:0 8px 18px -8px rgba(88,101,242,.8); }
/* 小さいほう。行の中や札の下に置く */
.btn--sm { width:auto; font-size:14px; padding:9px 18px; border-radius:10px; }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover { background:var(--tint); box-shadow:none; }
.field { display:grid; gap:6px; margin-bottom:14px; }
.field label { font-family:var(--f-mono); font-size:12px; color:var(--ink-2); }
.field input {
  font-family:var(--f-body); font-size:16px; padding:12px 14px;
  border:1.5px solid var(--line-2); border-radius:10px; background:var(--surface); color:var(--ink);
}
.field input:focus { outline:3px solid var(--brand-ln); outline-offset:1px; border-color:var(--brand-ln); }
.sep {
  display:flex; align-items:center; gap:12px; margin:22px 0;
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3);
}
.sep::before, .sep::after { content:""; flex:1; height:1px; background:var(--line); }

/* ---------- いま受けている1件 ----------
   状態を札で言うだけだと、あと何が残っているのか分からない。
   受注から支払いまでの4段を出して、いまどこかを示す */
.run { padding:18px 0; border-top:1px solid var(--line); }
.run:first-of-type { border-top:0; padding-top:4px; }
.run__h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.run__h b { font-family:var(--f-display); font-weight:700; font-size:16px; }
.run__h .tag { margin-left:auto; }
.run__m { font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); margin-top:6px; }

.rail { display:flex; list-style:none; margin:16px 0 0; padding:0; }
.rail li {
  flex:1; position:relative; text-align:center; padding-top:20px;
  font-family:var(--f-mono); font-size:11px; color:var(--ink-3);
}
/* 段と段をつなぐ線。最初の段の左側だけは引かない */
.rail li::before {
  content:""; position:absolute; top:5px; right:50%; width:100%; height:2px;
  background:var(--line-2);
}
.rail li:first-child::before { display:none; }
.rail li::after {
  content:""; position:absolute; top:0; left:50%; translate:-50% 0;
  width:12px; height:12px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line-2);
}
.rail li.done { color:var(--ok); }
.rail li.done::after { background:var(--ok); border-color:var(--ok); }
.rail li.done::before { background:var(--ok); }
.rail li.now { color:var(--brand-tx); font-weight:600; }
.rail li.now::after { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.rail li.now::before { background:var(--ok); }
.run .btn { margin-top:16px; width:auto; }

/* ---------- 10本たまったときの選択 ---------- */
.choice {
  margin-top:12px; padding:14px 16px; border-radius:11px;
  background:var(--brand-soft); border:1px solid var(--line-2);
}
.choice p { font-size:13.5px; font-weight:500; }
.choice__b { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.choice .btn { width:auto; flex:1; min-width:130px; }

/* ---------- ランクの進み ----------
   段は報酬の高さではなく、任される範囲。だから横一列で、
   いまどこまで来たかと、次に何があるかを同時に見せる */
.ladder { display:grid; gap:16px; }
.ladder__row { display:grid; gap:7px; }
.ladder__dom {
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3);
}
.ladder__steps { display:flex; list-style:none; margin:0; padding:0; gap:4px; }
.ladder__steps li {
  flex:1; text-align:center; font-size:11.5px; padding:7px 2px;
  border-radius:7px; background:var(--sunk); color:var(--ink-3);
  border:1px solid transparent;
}
.ladder__steps li.past { background:var(--ok-soft); color:var(--ok); }
.ladder__steps li.here {
  background:var(--brand); color:#2a1a0e; font-weight:700;
  border-color:var(--brand-ln);
}

/* ---------- 記録につく理由 ----------
   金額が動くこと自体は問題にならない。理由なく動くことが信頼を壊す */
.why {
  display:block; font-style:normal; font-size:11.5px; color:var(--ink-3);
  font-family:var(--f-mono); line-height:1.7; margin-top:3px;
}
tfoot th, tfoot td { border-top:2px solid var(--line-2); border-bottom:0; padding-top:12px; }
tfoot th { font-family:var(--f-display); font-weight:900; }
tfoot td.num { font-weight:700; }

/* ---------- 読むもの ---------- */
.links { display:grid; gap:2px; }
.links li { display:grid; gap:1px; padding:10px 0; border-bottom:1px solid var(--line); }
.links li:last-child { border-bottom:0; }
.links a { font-family:var(--f-display); font-weight:700; font-size:15px; text-decoration:none; }
.links a:hover { text-decoration:underline; }
.links span { font-size:12.5px; color:var(--ink-3); }

/* ---------- 子の切り替え ----------
   きょうだいで通う家庭がある。誰の話かを常に上に出しておく */
.who { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.who__b {
  display:grid; gap:1px; text-align:left; cursor:pointer;
  font-family:var(--f-display); font-weight:700; font-size:15px;
  padding:11px 20px; border-radius:12px;
  background:var(--surface); color:var(--ink-2); border:1.5px solid var(--line-2);
}
.who__b small { font-family:var(--f-mono); font-size:10.5px; font-weight:400; color:var(--ink-3); }
.who__b.is-on { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.who__b.is-on small { color:rgba(255,250,245,.6); }

/* ---------- 同意 ---------- */
.consent { display:grid; gap:2px; }
.consent__row {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.consent__row:last-child { border-bottom:0; }
.consent__row > div { display:grid; gap:2px; }
.consent__row b { font-family:var(--f-display); font-weight:700; font-size:15px; }
.consent__row span { font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
.consent__row .tag, .consent__row .btn { margin-left:auto; width:auto; }
.consent__row--todo { background:var(--brand-soft); border-radius:11px; padding:14px 16px; }

/* ---------- 案件の内訳 ---------- */
.job__sum {
  display:flex; flex-wrap:wrap; gap:6px 8px; margin:-4px 0 14px;
  font-family:var(--f-mono); font-size:11.5px;
}
.job__sum span { padding:3px 10px; border-radius:999px; border:1px solid currentColor; }
.job__sum .s-all { color:var(--ink-3); }
.job__sum .s-ok { color:var(--ok); background:var(--ok-soft); }
.job__sum .s-wait { color:var(--wait); background:var(--wait-soft); }
.job__sum .s-open { color:var(--ink-3); }
.job__sum .s-late { color:var(--warn); background:var(--warn-soft); }
tr.is-late td { background:var(--warn-soft); }
tr.is-late td:first-child { border-radius:7px 0 0 7px; }
tr.is-late td:last-child { border-radius:0 7px 7px 0; }

/* ---------- 検収待ち ---------- */
.check-list { display:grid; gap:2px; }
.check-list__row {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.check-list__row:last-child { border-bottom:0; }
.check-list__row > div:first-child { display:grid; gap:2px; }
.check-list__row b { font-family:var(--f-display); font-weight:700; font-size:15px; }
.check-list__row span { font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
.check-list__file { font-size:12.5px; }
.check-list__b { margin-left:auto; display:flex; gap:8px; }
.check-list__b .btn { width:auto; }

/* ---------- 支払い待ち ---------- */
.pay { display:grid; gap:2px; }
.pay__row { padding:16px 0; border-bottom:1px solid var(--line); }
.pay__row:last-child { border-bottom:0; }
.pay__h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pay__h b { font-family:var(--f-display); font-weight:700; font-size:15px; }
.pay__h span:not(.tag) { font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
.pay__h .tag { margin-left:auto; }
.pay__why { font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); margin-top:6px; }
/* 画面が広くても、この札自体が狭い列に置かれることがある。
   画面幅ではなく、入る幅で折り返す */
.pay__f {
  display:grid; gap:10px; margin-top:12px;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
}
.pay__f label { min-width:0; }
.pay__f label {
  display:grid; gap:5px;
  font-family:var(--f-mono); font-size:11px; color:var(--ink-2);
}
.pay__f input {
  width:100%; min-width:0;
  font-family:var(--f-body); font-size:14.5px; padding:9px 12px;
  border:1.5px solid var(--line-2); border-radius:9px;
  background:var(--surface); color:var(--ink);
}
.pay .btn { width:auto; margin-top:12px; }
.check { display:inline-flex; align-items:center; gap:9px; margin-top:12px; font-size:14px; }
.check input { width:18px; height:18px; accent-color:var(--brand); }

/* ---------- 授業の記録 ----------
   Discord bot が録音し、話者を Discord のアカウントで切り分ける。
   誰の声かを取り違えないので、報告は生徒ひとりずつになる。
   同意のない子は、行は残すが記録しない。名前だけ並べて、
   記録していないことが運営から見えるようにしておく */
.rec__meta {
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3);
  line-height:1.8; margin:-8px 0 14px;
}
.rec { display:grid; gap:2px; }
.rec__row {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.rec__row:last-child { border-bottom:0; }
.rec__row > div:first-child { display:grid; gap:2px; }
.rec__row b { font-family:var(--f-display); font-weight:700; font-size:15px; }
.rec__row span { font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
.rec__row > .tag, .rec__b { margin-left:auto; }
.rec__b { display:flex; gap:8px; }
.rec__b .btn { width:auto; }
.rec__row--warn { background:var(--warn-soft); border-radius:9px; padding-inline:14px; }
.rec__row--warn span { color:var(--warn); }
.rec__row--off b, .rec__row--off span { opacity:.6; }

/* ---------- 送った報告 ----------
   承認を挟まず自動で送るので、ここは確かめる場所。
   何が家庭に届いたのかが、そのまま読める */
.sentbox {
  margin-top:20px; padding:18px 20px; border-radius:12px;
  background:var(--sunk); border:1px solid var(--line);
}
.sentbox__h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.sentbox__h b { font-family:var(--f-display); font-weight:900; font-size:15.5px; }
.sentbox__h span {
  margin-left:auto; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3);
}
.sentbox__b, .report dl {
  display:grid; gap:9px 16px; margin:14px 0 0;
  font-size:14.5px; line-height:1.85;
}
@media (min-width:520px) {
  .sentbox__b, .report dl { grid-template-columns:max-content minmax(0,1fr); }
}
.sentbox__b dt, .report dt {
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-3); padding-top:4px; white-space:nowrap;
}
.sentbox__b dd, .report dd { margin:0; }

/* ---------- 届いた報告 ---------- */
.report { padding:18px 0; border-bottom:1px solid var(--line); }
.report:first-of-type { padding-top:2px; }
.report:last-of-type { border-bottom:0; }
.report__h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.report__h b { font-family:var(--f-display); font-weight:700; font-size:15.5px; }
.report__h span { font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); margin-left:auto; }

/* ---------- 札の性質と、出さない相手 ---------- */
.field2 { display:grid; gap:0 14px; }
@media (min-width:520px) { .field2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
/* 入力欄と選択欄は、放っておくと自分の既定の幅を主張して列からはみ出す。
   列に合わせて縮むようにしておく */
.field2 > * { min-width:0; }
.field input, .field select { width:100%; min-width:0; }
.field select {
  font-family:var(--f-body); font-size:15px; padding:11px 12px;
  border:1.5px solid var(--line-2); border-radius:10px;
  background:var(--surface); color:var(--ink);
}
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip {
  font-family:var(--f-mono); font-size:12px; cursor:pointer;
  padding:9px 14px; border-radius:999px; line-height:1.4;
  background:transparent; color:var(--ink-2); border:1px solid var(--line-2);
}
.chip.is-on { background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* 触れない試作なので、押せない見た目にしすぎない。
   何が押せる想定かは分かるようにしておく */
.btn[disabled], .chip[disabled], .who__b[disabled],
.pay__f input[disabled], .field input[disabled], .field select[disabled],
.check input[disabled] { opacity:1; cursor:default; }

/* ---------- ログインの周り ---------- */
.formerr { color:var(--warn); font-size:13px; margin:2px 0 12px; }
.formok { color:var(--ok); font-size:13px; margin:2px 0 12px; line-height:1.8; }
.fine { text-align:center; font-size:12.5px; margin-top:14px; }
.fine a { color:var(--ink-2); }
#pform .fine { margin:10px 0 0; }
.btn[aria-disabled="true"] { opacity:.55; pointer-events:none; }
#pform .btn { width:100%; }

/* ---------- ロール整理盤 ---------- */
#tbl select {
  font-family:var(--f-body); font-size:13.5px; padding:6px 8px;
  border:1.5px solid var(--line-2); border-radius:8px;
  background:var(--surface); color:var(--ink);
}
#tbl input[type="checkbox"] { width:17px; height:17px; accent-color:var(--brand); }
#tbl td, #tbl th { padding:8px 12px 8px 0; white-space:nowrap; }
#tbl td.rcell { white-space:normal; min-width:260px; }
/* 名前のマス。td自体は表のマスのまま、中の箱が横並びを受け持つ。
   tdにflexを当てると表の行の線がズレる */
.rnamew { display:flex; align-items:center; gap:9px; }
.rnamew img { width:30px; height:30px; border-radius:50%; flex:none; }
.rnamew > div { display:grid; gap:0; }
.rnamew b { font-weight:700; font-family:var(--f-display); font-size:14.5px; line-height:1.4; }
.rnamew small { font-family:var(--f-mono); font-size:10px; color:var(--ink-3); cursor:pointer; }
.rnamew small:hover { color:var(--brand-tx); }
.rwrap { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.rchip {
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--f-mono); font-size:11px; line-height:1.5;
  padding:2px 4px 2px 9px; border-radius:999px;
  background:var(--tint); border:1px solid var(--line-2); color:var(--ink-2);
}
.rchip--lock { opacity:.55; padding-right:9px; }
.rchip button {
  border:0; background:transparent; cursor:pointer; color:var(--ink-3);
  font-size:13px; line-height:1; padding:2px 5px; border-radius:999px;
}
.rchip button:hover { color:var(--warn); background:var(--warn-soft); }
.radd { font-size:11.5px; padding:3px 6px; max-width:110px; }
.rchip__l { cursor:pointer; }
.rchip__l:hover { color:var(--brand-tx); text-decoration:underline; }
.rpop {
  position:absolute; z-index:90; width:min(430px, 92vw);
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px;
  padding:14px 16px; box-shadow:var(--shadow); font-size:12.5px; line-height:1.7;
}
.rpop__h { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.rpop__h b { font-family:var(--f-display); font-size:14px; margin-right:auto; }
.rpop__b {
  font-family:var(--f-mono); font-size:11.5px; cursor:pointer;
  padding:5px 11px; border-radius:8px;
  background:transparent; color:var(--ink-2); border:1px solid var(--line-2);
}
.rpop__b:hover { background:var(--tint); }
.rpop__b--danger { color:var(--warn); border-color:var(--warn-ln); }
.rpop__b--danger:hover { background:var(--warn-soft); }
.rpop__b--save { background:var(--brand); color:#2a1a0e; border-color:var(--brand-ln); font-weight:600; }
.rpop__perms {
  display:grid; grid-template-columns:1fr 1fr; gap:2px 14px;
  max-height:290px; overflow-y:auto; padding:8px 2px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.rpop__perms label { display:flex; align-items:center; gap:7px; font-size:12px; cursor:pointer; }
.rpop__perms input { width:14px; height:14px; accent-color:var(--brand); flex:none; }
.rpop__f { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.rpop__name {
  flex:1; min-width:0; font-family:var(--f-display); font-weight:700; font-size:14px;
  padding:7px 10px; border:1.5px solid var(--line-2); border-radius:8px;
  background:var(--surface); color:var(--ink);
}
.rpop__name:disabled { border-color:transparent; background:transparent; }
.rpop__opts { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:8px; font-size:12.5px; }
.rpop__opts label { display:flex; align-items:center; gap:6px; cursor:pointer; }

/* 2枚切り替えと道具列 */
.vtabs { display:flex; gap:6px; margin-bottom:14px; }
.vtabs button {
  font-family:var(--f-display); font-weight:700; font-size:14px; cursor:pointer;
  padding:8px 18px; border-radius:10px;
  background:transparent; color:var(--ink-2); border:1.5px solid var(--line-2);
}
.vtabs button.is-on { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.rtools { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.rtools input[type="search"], .rtools input[type="text"] {
  flex:1; min-width:200px; font-family:var(--f-body); font-size:14px;
  padding:9px 13px; border:1.5px solid var(--line-2); border-radius:10px;
  background:var(--surface); color:var(--ink);
}
.rtools input[type="color"] {
  width:44px; height:38px; padding:2px; border:1.5px solid var(--line-2);
  border-radius:10px; background:var(--surface); cursor:pointer;
}

/* ロール表 */
.sw { display:inline-block; width:11px; height:11px; border-radius:50%; flex:none; }
.sw--lg { width:14px; height:14px; }
.rlink {
  border:0; background:transparent; cursor:pointer; text-align:left;
  font-family:var(--f-display); font-weight:700; font-size:14px; color:var(--ink);
  padding:2px 4px; border-radius:6px;
}
.rlink:hover { color:var(--brand-tx); text-decoration:underline; }
.rlocktag {
  font-family:var(--f-mono); font-size:9.5px; color:var(--brand-tx);
  background:var(--brand-soft); padding:2px 7px; border-radius:999px;
}
.rrow--lock td { opacity:.55; }
.grip {
  cursor:grab; user-select:none; color:var(--ink-3); font-size:15px;
  padding:4px 8px; border-radius:7px; display:inline-block;
}
.grip:hover { background:var(--tint); color:var(--ink); }
.grip:active { cursor:grabbing; }
.grip { touch-action:none; }
tr.is-drag td { opacity:.6; background:var(--tint); }
body.rowdrag { user-select:none; cursor:grabbing; }
.pmck {
  display:inline-flex; align-items:center; gap:4px; margin-left:8px;
  font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3);
}
.pmck input { width:14px; height:14px; accent-color:var(--brand); }

/* ---------- 人ごとのメモ ---------- */
.nbtn {
  font-family:var(--f-body); font-size:11.5px; cursor:pointer; white-space:nowrap;
  padding:4px 10px; border-radius:99px;
  border:1.5px solid var(--line-2); background:transparent; color:var(--ink-3);
}
.nbtn:hover { border-color:var(--brand); color:var(--brand); }
.nbtn--has { border-color:var(--brand); color:var(--brand); background:var(--tint); }
.rpop--note { width:min(340px, 92vw); }
.npop__ta {
  width:100%; box-sizing:border-box; font-family:var(--f-body); font-size:13px;
  line-height:1.6; padding:8px 10px; margin-top:8px;
  border:1.5px solid var(--line-2); border-radius:8px;
  background:var(--surface); color:var(--ink); resize:vertical;
}
.npop__ta:focus { border-color:var(--brand); outline:none; }

/* ---------- 生徒台帳 ---------- */
.savatar {
  width:26px; height:26px; border-radius:50%; vertical-align:middle;
  margin-right:7px; background:var(--tint);
}
.sdis { display:inline-flex; flex-direction:column; vertical-align:middle; line-height:1.25; }
.sdis b { font-size:13px; font-weight:600; }
.sdis small { font-size:10.5px; color:var(--ink-3); }
.sgone { font-size:12px; color:var(--warn); }
.srank {
  display:inline-block; font-size:10.5px; padding:2px 7px; margin:1px 3px 1px 0;
  border-radius:99px; background:var(--tint); color:var(--ink-2); white-space:nowrap;
}
.srank--none { opacity:.45; }
.srow--left td { opacity:.5; }
.scol-name input, .scol-mc input {
  font-family:var(--f-body); font-size:13.5px; padding:6px 8px; width:130px;
  border:1.5px solid transparent; border-radius:8px; background:transparent; color:var(--ink);
}
.scol-date input { width:96px; }
.scol-date input, .scol-g .radd {
  font-family:var(--f-body); font-size:12.5px; padding:5px 7px;
  border:1.5px solid transparent; border-radius:8px; background:transparent; color:var(--ink);
}
.scol-name input:hover, .scol-mc input:hover, .scol-date input:hover { border-color:var(--line-2); }
.scol-name input:focus, .scol-mc input:focus, .scol-date input:focus {
  border-color:var(--brand); background:var(--surface); outline:none;
}
.sbtn {
  font-family:var(--f-body); font-size:12px; font-weight:600; cursor:pointer;
  padding:6px 10px; margin-right:6px; border-radius:8px;
  border:1.5px solid var(--brand); background:var(--brand); color:#fff;
}
.sbtn--sub { background:transparent; color:var(--brand); }
.sbtn:hover { opacity:.85; }
.sbtn:disabled { opacity:.5; cursor:default; }

/* ---------- ガワである断り ---------- */
.mock {
  position:sticky; bottom:0; z-index:50;
  background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:12px; line-height:1.7;
  padding:11px 20px; text-align:center;
}
.mock b { color:var(--brand); font-weight:600; }

/* ここは道具の面なので、if(塾) のサイトへ戻る道を必ず一本出しておく。
   ヘッダーのロゴも同じ場所へ行く */
.back { margin-top:30px; text-align:center; font-size:14px; }
.back a { color:var(--ink-2); text-decoration:none; }
.back a::before { content:"\2190"; margin-right:7px; }
.back a:hover { color:var(--ink); text-decoration:underline; }
.gate__home { display:inline-block; }
.pwwrap { position:relative; display:block; }
.pwwrap input { padding-right:60px; }
.pweye {
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  font-family:var(--f-mono); font-size:11px; color:var(--ink-2); cursor:pointer;
  background:var(--sunk); border:1px solid var(--line-2); border-radius:7px; padding:4px 9px;
}
.pweye:hover { background:var(--tint); }
.gcard .card__h { margin-bottom:12px; }
.gcard .field { margin-bottom:11px; }
.gcard .hint { font-size:12.5px; line-height:1.7; margin-top:10px; }
.gcard .sep { margin:13px 0; }
.gate__forgot { text-align:right; margin-top:8px; }
.gmsg {
  margin-top:12px; font-size:13.5px; line-height:1.7; color:var(--warn);
  background:var(--warn-soft); border:1.5px solid #f3c6ad; border-radius:10px; padding:10px 12px;
}
.gate__dev {
  margin-top:12px; font-family:var(--f-mono); font-size:11px; line-height:1.6;
  color:var(--ink-2); background:var(--sunk);
  border:1.5px dashed var(--line-2); border-radius:10px; padding:8px 11px;
}
.gate__backd { margin-top:auto; padding-top:26px; text-align:left; }
.gate__backm { display:none; }
@media (max-width:900px) {
  .gate { padding:34px 18px 56px; }
  .gate__in { grid-template-columns:1fr; gap:30px; max-width:440px; }
  .gate__brand { text-align:center; }
  .gate__logo { margin:0 auto 20px; width:110px; }
  .gate h1 { font-size:clamp(26px,7vw,32px); }
  .gate__feats { max-width:340px; margin:22px auto 0; text-align:left; }
  .gate__backd { display:none; }
  .gate__backm { display:block; text-align:center; margin-top:6px; }
}
@media (prefers-reduced-motion:no-preference) {
  .gate__brand, .gate__entry .gcard { animation:gin .5s cubic-bezier(.2,.7,.3,1) both; }
  .gate__entry .gcard + .gcard { animation-delay:.08s; }
  @keyframes gin { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
}

.empty { color:var(--ink-3); font-size:14.5px; padding:10px 0; }
.hint { font-size:13px; color:var(--ink-3); margin-top:12px; line-height:1.8; }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }