:root {
  --ink: #26302f;
  --muted: #71807b;
  --line: #dce7e2;
  --surface: #f4f8f7;
  --green: #3fb49a;
  --dark: #238f7b;
  font-family: Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--surface);
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  border: 0;
  border-radius: 8px;
  background: var(--dark);
  color: #fff;
  padding: 10px 13px;
  font-weight: bold;
  cursor: pointer;
}
button.alt {
  background: #eff6f3;
  color: var(--dark);
}
button:disabled {
  background: #dce7e2;
  color: #81908b;
  cursor: not-allowed;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  background: #fff;
  color: var(--ink);
}
.shell {
  min-height: 100vh;
  padding-left: 164px;
}
.nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: 164px;
  padding: 18px 12px;
  background: var(--green);
  color: #fff;
}
.nav strong {
  display: block;
  padding: 9px;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.nav a,
.nav button {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 4px 0;
  padding: 10px 8px;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  text-align: left;
  text-decoration: none;
  font-size: 13px;
}
.nav a.active {
  background: #fff;
  color: var(--dark);
}
.nav button {
  margin-top: 24px;
}
.signed-in {
  position: absolute;
  right: 14px;
  bottom: 22px;
  left: 14px;
  border-top: 1px solid #ffffff66;
  padding: 14px 7px 0;
  font-size: 11px;
}
.signed-in b {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.page {
  /* ⚠️ 案件一覧は7列ある。1060pxだと納品日が枠の外へ出て見えない（2026-08-31） */
  max-width: 1440px;
  margin: auto;
  padding: 24px 30px;
}
header h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
header p,
.hint,
.card > p {
  color: var(--muted);
  line-height: 1.65;
}
.card {
  margin: 12px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.card h2 {
  margin: 0 0 14px;
  font-size: 18px;
}
.form {
  display: grid;
  /* 4列。ふつうの項目は2列ぶん、氏名など短いものは1列ぶん（.q） */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  max-width: 760px;   /* ⚠️ 広い画面で入力欄だけ間延びするのを止める */
}
.form > label { grid-column: span 2; }
.form > label.q { grid-column: span 1; }
.form-section {
  grid-column: 1/-1;
  margin: 10px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.form-section:first-child { margin-top: 0; }
.form label,
.card label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: bold;
}
.full {
  grid-column: 1/-1 !important;
}
/* 🔴 [hidden] を効かせる。⛔ 上の `.form label { display: grid }` が [hidden] の既定
   （display:none）に勝つので、hidden を立てても**消えない**（2026-09-28 実測。
   支払い方法をクラウドワークスにしても銀行欄が出たままだった）。
   ⚠️ .bill-next[hidden] / .bar[hidden] と同じ理由。⛔ 個別に書き足していくと必ず漏れる。 */
.form [hidden], .card [hidden] { display: none !important; }

/* 支払い方法の2択。⛔ ラジオを label の grid に乗せない（丸が文字の上に来る）。 */
.pay-pick { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.form .pay-pick label.pay-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
}
.pay-pick input { width: 18px; height: 18px; accent-color: var(--dark, #238f7b); }
.postal-row {
  display: flex;
  gap: 6px;
}
.postal-row input {
  min-width: 0;
}
.postal-row button {
  white-space: nowrap;
}
.alert {
  border: 1px solid #eedda6;
  border-radius: 8px;
  background: #fff7df;
  color: #75601b;
  padding: 10px;
  font-size: 13px;
}
.login {
  max-width: 430px;
  /* ⚠️ 下マージンを持たせない。すぐ下の .admin-entry（管理者の入口）が離れて浮き、
     区切り線だけが宙に出る。間隔は .admin-entry 側の margin-top で持つ */
  margin: 12vh auto 0;
}
.admin-entry {
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e7eeeb;
  font-size: 12px;
  color: #71807b;
}
/* ⛔ !important を外さない。IDで display を指定したセクション（#knowledge の grid など）は
   詳細度でこの規則に勝つため、hidden を付けても消えずに全タブへ出てしまう。
   実際 /mypage の「資料」が案件・請求・アカウントの下に「読み込み中…」のまま出続けていた
   （2026-09-09）。views を足すたびに同じ事故が起きるので、ここで一律に止める。 */
.view[hidden],
.login[hidden] {
  display: none !important;
}
.deadline-label {
  /* ⚠️ 既定の背景を必ず持たせる。色を持つのは 2/3/4 だけなので、
     継続（0営業日）を入れたとき白文字が白地に乗って消えた（2026-08-31） */
  background: #718984;
  display: inline-block;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 9px;
  white-space: nowrap;
}
.deadline-2 {
  background: #238f7b;
}
.deadline-3 {
  background: #4d9a91;
}
.deadline-4 {
  background: #718984;
}
.deadline-none {
  color: #6b7a80;
  font-size: 12px;
}
@media (max-width: 640px) {
  .shell {
    padding-left: 0;
  }
  .nav {
    position: sticky;
    top: 0;
    width: 100%;
    height: 54px;
    padding: 7px 8px;
    display: flex;
    gap: 3px;
    z-index: 2;
  }
  .nav strong,
  .nav span,
  .signed-in {
    display: none;
  }
  .nav a,
  .nav button {
    justify-content: center;
    flex: 1;
    margin: 0;
    padding: 9px;
    font-size: 18px;
  }
  .nav button {
    margin: 0;
  }
  .page {
    padding: 28px 16px;
  }
  .form {
    grid-template-columns: 1fr;
  }
}
:root {
}
.freelancer-table-wrap tbody tr[data-assignment] {
  cursor: pointer;
}
.freelancer-table-wrap tbody tr[data-assignment]:hover {
  background: #f3fbf7;
}
.job-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #132b2588;
}
.job-modal[hidden] {
  display: none;
}
.job-modal > section {
  width: min(680px, 100%);
  max-height: 80vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px #142e2733;
}
.job-summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 18px 98px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.job-deadline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  background: var(--green);
  border-radius: 14px 0 0 0;
  padding: 0 16px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}
.job-title,
.job-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-title {
  font-size: 18px;
  font-weight: bold;
}
.job-separator {
  color: var(--muted);
}
.assignment-modal-body {
  padding: 22px;
  line-height: 1.75;
}
.assignment-modal-body p {
  margin: 0;
  white-space: pre-wrap;
}
.assignment-modal-body dl {
  display: grid;
  /* ⚠️ 幅を固定すると「クライアント」「初稿の提出期限」が2行に折り返す。
     一番長い見出しに合わせて自動で決めさせる（2026-08-31） */
  grid-template-columns: max-content 1fr;
  gap: 8px 14px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.assignment-modal-body dt {
  color: var(--muted);
  white-space: nowrap;
}
.assignment-modal-body dd {
  margin: 0;
}
.agreement-check {
  display: block !important;
}
.agreement-check input {
  width: auto;
  margin-right: 6px;
}
.agreement-check + button {
  margin-top: 4px;
}
#agreement-document {
  margin-top: 18px;
}
#agreement-document iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
@media (max-width: 640px) {
  .nav a {
    font-size: 9px;
  }
  .job-modal {
    padding: 10px;
  }
  .job-modal > section {
    max-height: 88vh;
  }
  .job-summary {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 16px 12px 14px 100px;
  }
  .job-title,
  .job-name {
    width: 100%;
  }
  .job-separator {
    display: none;
  }
  .assignment-modal-body {
    padding: 18px;
  }
  .assignment-modal-body dl {
    grid-template-columns: max-content 1fr;
  }
  #agreement-document iframe {
    height: 520px;
  }
}
.backup-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 18px;
}
.backup-setting b {
  font-size: 15px;
  line-height: 1.5;
}
.switch {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  width: 76px;
  height: 40px;
  flex: 0 0 76px;
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
}
.switch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #9ba7a2;
  transition: 0.2s;
}
.switch span:after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
}
.switch em {
  position: absolute;
  left: 13px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
  pointer-events: none;
}
.switch input:checked + span {
  background: #f24c82;
}
.switch input:not(:checked) ~ em {
  font-size: 0;
}
.switch input:not(:checked) ~ em:after {
  content: "OFF";
  font-size: 12px;
}
.switch input:not(:checked) + span:after {
  transform: translateX(-36px);
}
.invoice-cc {
  display: grid !important;
  gap: 7px;
  margin: 14px 0 0;
  font-size: 13px;
}
.invoice-cc input {
  min-width: 0;
}
.invoice-cc #invoice-cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.email-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eff6f3;
  color: var(--dark);
  font-size: 12px;
  font-weight: normal;
  overflow-wrap: anywhere;
}
.email-tag button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.email-change {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.email-change p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.email-change .hint {
  width: 100%;
}
/* 押印の3つ（ボタン・画像選択・状態）を1行にまとめる。
   ⚠️ 縦に散ると「押印済み」バッジと本文が二重に見えて崩れる（2026-08-31） */
.seal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdfc;
}
.seal-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 2px;
}
.seal-state {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.seal-row.done .seal-state { color: var(--dark); }
.seal-row.done .btn { opacity: 0.5; pointer-events: none; }
.agreement-seal-upload { line-height: 34px; }
.email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.email-row button {
  margin: 0;
  white-space: nowrap;
}
.email-change-message {
  margin: 0 !important;
}
@media (max-width: 640px) {
  .email-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .email-row button {
    padding: 11px 9px;
    font-size: 12px;
  }
}

/* 長い依頼詳細・クライアント名は列を広げず … で切る（2026-08-31） */
.freelancer-table-wrap td.cell-clip {
  max-width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 案件一覧の状態表示（2026-08-31）
   ⚠️ 色は増やさない。既にある緑（ブランド）と灰だけで、
      「終わったものは沈める・手が要るものだけ立てる」で区別する。
      支払済み＝薄く／支払予定＝実線の緑／納品待ち＝点線の緑 */
.freelancer-table-wrap tbody tr[data-state] td:first-child {
  border-left: 3px solid transparent;
  padding-left: 9px;
}
.freelancer-table-wrap tbody tr[data-state="paid"] {
  /* ⚠️ 薄くしすぎると読めない。0.55 は読めなかった。
     沈めるのは背景の色でやり、文字は読める濃さを保つ */
  opacity: 1;
  color: #7b8a85;
}
.freelancer-table-wrap tbody tr[data-state="paid"] td {
  background: #f2f5f4;
  color: #62716c;
}
.freelancer-table-wrap tbody tr[data-state="completed"] td:first-child {
  border-left-color: #238f7b;
}
.freelancer-table-wrap tbody tr[data-state="assigned"] td:first-child,
.freelancer-table-wrap tbody tr[data-state="delivery_pending"] td:first-child,
.freelancer-table-wrap tbody tr[data-state="director_approved"] td:first-child {
  border-left-style: dotted;
  border-left-color: #238f7b;
}
.freelancer-table-wrap tbody tr[data-state="lost"] {
  opacity: 1;
  color: #93a09b;
}
.freelancer-table-wrap tbody tr[data-state="lost"] td:nth-child(2) {
  text-decoration: line-through;
}

/* API開発キー（2026-08-31） */
.apikey-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 14px 0;
}
.apikey-form label {
  display: grid;
  gap: 4px;
  flex: 1 1 260px;
  font-size: 13px;
}
#apikey-new {
  background: #eef8f5;
  border: 1px solid #b7ded4;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
}
.apikey-value {
  display: block;
  margin-top: 6px;
  padding: 8px;
  background: #fff;
  border-radius: 6px;
  word-break: break-all;
  user-select: all;
}
.apikey-sample {
  background: #f4f7f7;
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  font-size: 12px;
}

/* 支払予定日。ステータスの下に小さく添える（2026-08-31） */
.pay-due {
  display: block;
  margin-top: 2px;
  color: #71807b;
  font-size: 11px;
  white-space: nowrap;
}

/* 案件一覧の上に出す「今月の請求」（2026-09-01 作り直し）
   ⚠️ 不足項目を1文に並べると読めない。金額と箇条書きに分ける */
.bill-bar {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 18px 20px;
}
.bill-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bill-sum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cw-lead { margin: 0 0 14px; font-size: 14px; }
.cw-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cw-period { color: var(--muted); font-size: 13px; font-weight: 700; }
.cw-amount { font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cw-count {
  color: var(--muted); font-size: 12px; font-weight: 700;
  background: #eef3f1; border-radius: 999px; padding: 3px 10px;
}
#cw-months { margin-top: 18px; }
.cw-past { display: block; font-size: 13px; margin-bottom: 6px; }
.cw-list { list-style: none; margin: 0; padding: 0; }
.cw-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px;
}
.cw-list li span { flex: 1; min-width: 0; }
.cw-list li i { color: var(--muted); font-size: 12px; font-style: normal; }
.cw-list li b { font-variant-numeric: tabular-nums; }
.bill-period { color: var(--muted); font-size: 13px; font-weight: 700; }
.bill-amount { font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bill-count {
  color: var(--muted); font-size: 12px; font-weight: 700;
  background: #eef3f1; border-radius: 999px; padding: 3px 10px;
}
.bill-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
/* 足りないものがあるとき。⚠️ 色は警告用の橙だけ。増やさない */
.bill-bar.not-ready { border-left: 4px solid #e08a2e; }
.bill-todo {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff9f0;
  border: 1px solid #f0ddc0;
}
.bill-todo[hidden] { display: none !important; }
.bill-todo b { font-size: 13px; color: #8a5a00; }
.bill-todo ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bill-todo li {
  background: #fff; border: 1px solid #ecd9b8; border-radius: 999px;
  padding: 4px 11px; font-size: 12px; color: #6b5324;
}
.bill-todo .btn { justify-self: start; }
@media (max-width: 640px) {
  .bill-main { align-items: flex-start; }
  .bill-main .btn { width: 100%; }
}
/* 支払予定日。ステータスの下に小さく添える（2026-08-31） */
.pay-due {
  display: block;
  margin-top: 2px;
  color: #71807b;
  font-size: 11px;
  white-space: nowrap;
}

/* 案件一覧の上に出す「今月の請求」（2026-08-31） */
.bill-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bill-bar .bill-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
#bill-period { font-size: 15px; }
#bill-detail { display: block; margin-top: 3px; }
#bill-amount { font-size: 20px; font-variant-numeric: tabular-nums; }
.bill-bar.not-ready #bill-amount { font-size: 14px; color: #71807b; font-weight: 400; }
/* 請求対象は文字で示す。⚠️ 色だけの印は凡例が要るし、色が見えない人に伝わらない */
.chip-bill {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f4f0;
  color: #1d7866;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* 未完了の案内（2026-08-31）。⚠️ 色は増やさず、警告用の橙だけ使う */
.todo-card {
  border-left: 4px solid #e08a2e;
  background: #fff9f0;
  margin-bottom: 14px;
}
.todo-card b { display: block; margin-bottom: 6px; }
.todo-card ul { margin: 0; padding-left: 20px; color: #6b5a3f; font-size: 13px; line-height: 1.9; }
#nda-card { margin-top: 14px; }

/* 「メールが届かない」報告（2026-08-31） */
.not-arrived {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #f0d8b4;
  border-radius: 10px;
  background: #fff9f0;
}
.not-arrived b { display: block; margin-bottom: 4px; }
.not-arrived input {
  width: 100%;
  margin: 8px 0;
  border: 1px solid #e4d5bd;
  border-radius: 8px;
  padding: 9px 11px;
}

/* 案件一覧は列が多い。狭い画面では表の中だけ横スクロールさせる（2026-08-31） */
#jobs .freelancer-table-wrap { overflow-x: auto; }
#jobs .freelancer-table-wrap table { min-width: 1080px; }
#jobs .freelancer-table-wrap td:last-child,
#jobs .freelancer-table-wrap th:last-child { white-space: nowrap; padding-right: 16px; }

/* 請求書の確認シート（2026-08-31）
   PCは左に請求書、右に修正申告と送信。⚠️ 縦積みだと長いPDFの下まで
   スクロールしないと送信ボタンに届かず、内容を見ずに下だけ探すことになる */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.sheet[hidden] { display: none !important; }
.sheet-back { position: absolute; inset: 0; background: rgba(20, 38, 34, 0.5); }
.sheet-body {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1320px, calc(100% - 40px));
  height: min(90vh, 940px);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20, 38, 34, 0.28);
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line); flex: none;
}
.sheet-close {
  border: 0; background: transparent; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.sheet-cols { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.sheet-doc { min-height: 0; padding: 16px; background: #f4f7f7; overflow-x: hidden; overflow-y: auto; }
/* 請求書はA4幅で組まれている。⚠️ 幅を狭めると中で折り返して別物になるので、
   A4のまま描いて丸ごと縮小する（見切れさせない） */
.sheet-zoom { width: max-content; margin: 0 auto; }
#sheet-preview {
  display: block;
  width: 794px;                 /* A4の幅（96dpi） */
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transform-origin: top left;   /* 高さはJSが中身から測る */
}
.sheet-side {
  min-height: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-left: 1px solid var(--line); overflow-y: auto;
}
.sheet-confirm {
  display: grid; gap: 7px;
  padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc;
}
.sheet-confirm .btn { width: 100%; }
.hint.warn { color: #b45309; font-weight: 700; margin: 0; font-size: 11px; }
/* 送信先まわりは小さく。自分のアドレスだけ目立たせる */
#sheet-summary { display: block; font-size: 11px; line-height: 1.7; color: var(--muted); }
#sheet-summary .k { display: inline-block; min-width: 3.6em; color: #9aa8a3; }
#sheet-summary b { color: var(--ink); }
#sheet-summary .own-mail { color: #1d7866; background: #e6f4f0; border-radius: 4px; padding: 0 4px; }
#sheet-summary .note { display: block; margin-top: 3px; }
#sheet-summary .k { display: block; margin-top: 4px; }
#sheet-summary .k:first-child { margin-top: 0; }
.correction { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.correction:not([open]) { padding: 10px 12px; }
.correction summary { font-size: 13px; }
.correction summary { cursor: pointer; font-weight: 700; }
.correction label { display: block; margin-top: 10px; font-size: 13px; }
.correction textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font: inherit; }
.correction .btn { margin-top: 10px; }
#invoice-history td.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  /* 狭い画面は縦積み。送信は最後に置く */
  .sheet-body { height: 94vh; width: 100%; border-radius: 0; }
  .sheet-cols { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sheet-doc { overflow: visible; padding: 12px; min-height: 0; height: auto; }
  .sheet-side { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
}
.invoice-note { margin-top: 14px; line-height: 1.9; }

/* アカウントの詳細設定（2026-08-31）
   ⚠️ ログイン履歴・バックアップ・APIキーは利用頻度が低い。
      左メニューの一等地を与えず、ここに畳んでおく */
.settings { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.settings:first-of-type { border-top: 0; }
.settings > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 4px 0; }
.settings > summary::marker { color: var(--muted); }
.settings > .card { border: 0; padding: 12px 0 0; box-shadow: none; }

/* ページ内タブ（2026-08-31）
   ⚠️ 画面を1つに集約したぶん縦に長い。上から順に探させない */
.page-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 8px 0;
  background: var(--surface);
  overflow-x: auto;
}
.page-tabs a {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.page-tabs a:hover { background: #f0f8f6; }
.page-tabs a.active { background: var(--dark); border-color: var(--dark); color: #fff; }
/* 追従するタブの下に見出しが潜らないようにする */
#profile h2[id] { scroll-margin-top: 62px; }

/* 次の締めに回る分。⚠️ 請求できる金額と見間違えないよう、金額を太字にしない */
.bill-next { color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 6px; }
.bill-next[hidden] { display: none !important; }

/* Googleでログイン（2026-08-31）。管理画面と同じ見た目に揃える */
.login .google-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 8px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 750;
  font-size: 15px;
  text-decoration: none;
}
.login .google-go:hover { border-color: #c3d5ce; background: #fbfdfc; }
.login .google-go svg { width: 19px; height: 19px; flex: none; }
/* 登録が足りないときの案内。⚠️ 金額は出す（請求できること自体は事実） */
.bill-bar.not-ready #bill-amount { font-size: 20px; color: var(--ink); font-weight: 700; }
.bill-bar.not-ready { border-left: 4px solid #e08a2e; }
#bill-detail b { color: #8a5a00; }
#bill-detail a { margin-left: 6px; }

/* 秘密保持誓約書の改定中（2026-09-01） */
.nda-locked {
  display: block !important;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #f0d8b4;
  border-radius: 10px;
  background: #fff9f0;
  color: #8a5a00;
  font-size: 13px;
  line-height: 1.8;
}
.seal-row.locked { opacity: .5; pointer-events: none; }

/* ⚠️ .nav a{display:flex} が [hidden] を打ち消すので、明示的に消す。
   これが無いと「許可された人にだけ出す」が効かず、資料メニューが全員に見える。 */
.nav a[hidden] { display: none; }

/* ナレッジ。本文はサーバー側で knowledge/*.md から組み立てている。 */
#knowledge { display: grid; grid-template-columns: 210px minmax(0, 720px); gap: 32px; align-items: start; }
#knowledge > h1 { grid-column: 1 / -1; }

.knowledge-toc { position: sticky; top: 24px; font-size: 13px; line-height: 1.8; }
.knowledge-toc b { display: block; margin: 0 0 8px; color: #71807b; font-size: 11px; letter-spacing: .08em; }
.knowledge-toc ul { list-style: none; margin: 0; padding: 0; }
.knowledge-toc ul ul { margin: 2px 0 8px; padding-left: 10px; border-left: 1px solid #dce7e2; }
.knowledge-toc a { display: block; padding: 3px 0; color: #4a5b64; text-decoration: none; }
.knowledge-toc > ul > li > a { color: #26302f; font-weight: 700; margin-top: 10px; }
.knowledge-toc a:hover { color: #238f7b; }

.knowledge-doc article { background: #fff; border: 1px solid #dce7e2; border-radius: 14px; padding: 28px 32px; margin: 0 0 20px; }
.knowledge-doc h2 { font-size: 20px; margin: 0 0 4px; padding-bottom: 14px; border-bottom: 1px solid #edf1ef; }
.knowledge-doc h3 { font-size: 15px; margin: 30px 0 10px; scroll-margin-top: 20px; }
.knowledge-doc h4 { font-size: 14px; margin: 20px 0 6px; color: #4a5b64; }
.knowledge-doc p, .knowledge-doc li { line-height: 1.95; }
.knowledge-doc p { margin: 0 0 12px; }
.knowledge-doc ul, .knowledge-doc ol { padding-left: 1.4em; margin: 10px 0 16px; }
.knowledge-doc li { margin: 4px 0; }
.knowledge-doc strong { background: linear-gradient(transparent 62%, #d9f2ea 62%); }
.knowledge-doc code { background: #f2f6f5; border-radius: 4px; padding: 2px 6px; font-size: 13px; word-break: break-all; }
.knowledge-doc pre { background: #2a2e2d; color: #f2f6f5; border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 10px 0 16px; }
.knowledge-doc pre code { background: none; padding: 0; color: inherit; }
.knowledge-doc a { color: #238f7b; }
.knowledge-doc svg { display: block; margin: 18px 0 22px; }

@media (max-width: 900px) {
  #knowledge { display: block; }
  .knowledge-toc { position: static; margin: 0 0 22px; padding: 16px 18px; background: #fff; border: 1px solid #dce7e2; border-radius: 12px; }
  .knowledge-toc ul ul { display: none; }   /* 幅が無いときは資料名だけ。階層まで出すと目次が本文より長くなる */
  .knowledge-doc article { padding: 20px 18px; }
}

/* スキル・対応範囲（応募情報の編集）。⚠️ 応募フォームのタグ選択と同じ操作感にする。
   ⛔ セレクタを `.skill-tag` だけにしない。`.form label,.card label{display:grid}` は
      詳細度 (0,1,1) でこちらの (0,1,0) に勝つため、チェックボックスが文字の上に
      積まれて背の高い楕円になる（2026-09-10に実際そうなった）。必ず .form / .card を前に付ける。 */
.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.form .skill-tag,
.card .skill-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;   /* ⚠️ label の bold を打ち消す。全部太いと選択中が見分けられない */
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.form .skill-tag:hover,
.card .skill-tag:hover { background: #f4fbf8; border-color: #b9cec7; }
/* ⛔ padding と border も打ち消す。`input,select,textarea{width:100%;padding:11px;border:...}`
   が全部の入力欄に当たっているので、消さないとチェックボックスが大きな四角い枠になる。 */
.form .skill-tag input,
.card .skill-tag input {
  width: 16px;
  height: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  flex: none;
  background: none;
  accent-color: var(--dark);
}
/* 選択中。⚠️ :has が無い環境では色が変わらないだけで、チェック自体は見えるので機能は落ちない */
.form .skill-tag:has(input:checked),
.card .skill-tag:has(input:checked) {
  background: #e6f4f0;
  border-color: var(--dark);
  color: var(--dark);
  font-weight: 700;
}
.form-section small { font-weight: 400; color: var(--muted); margin-left: 8px; }
/* 自動保存の状態表示。⛔ 失敗を目立たせる（本人は結果を見ていないので、静かに消すと気づけない） */
.hint.is-ok { color: var(--dark); font-weight: 700; }
.hint.is-error { color: #b42318; font-weight: 700; }
/* 自動保存の案内。⚠️ 保存ボタンが無いことを先に言う（探して見つからないと不安になる） */
.autosave-note { grid-column: 1/-1; margin: 4px 0 0; color: var(--muted); font-size: 12px; }

/* 招待（2026-09-28）。⛔ 独自の表を作らない＝既存の見た目に寄せる */
.fs-inv-add { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.fs-inv-add select, .fs-inv-add input { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; background: #fff; }
.fs-inv-add .combo { flex: 0 0 190px; width: 190px; min-width: 190px; }
#fs-invite-role { width: 100% !important; min-width: 0 !important; }
.fs-inv-add input { flex: 1 1 auto; }
.fs-inv-add button { margin-left: auto; white-space: nowrap; }
.fs-inv-add input, .fs-inv-add button, .fs-inv-add .combo { height: 36px; box-sizing: border-box; font-size: 14px; }
.fs-inv-add .combo .trigger { height: 36px; padding: 0 28px 0 10px; font-size: 14px; line-height: 34px; }
.fs-inv-add button { padding: 0 11px; text-align: center; }
.members-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 12px; }
.members-title h1 { margin: 0; }
.members-title .fs-inv-add { flex: 0 0 800px; width: 800px; margin: 0; }
.member-note { margin: 0 0 10px; font-size: 12px; }
.fs-staff-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fs-staff-title #fs-month { flex: none; width: 145px; padding: 6px 9px; font-size: 13px; }
@media (max-width: 900px) { .members-title { align-items: start; flex-direction: column; gap: 8px; } .members-title .fs-inv-add { flex-basis: auto; width: 100%; } }
@media (max-width: 640px) {
  #members .fs-inv-add { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 6px; flex-wrap: nowrap; width: 100%; }
  #members .fs-inv-add .combo { flex: none; width: auto; min-width: 0; }
  #members .fs-inv-add input, #members .fs-inv-add button, #members .fs-inv-add .combo { height: 40px; min-width: 0; font-size: 13px; }
  #members .fs-inv-add .combo .trigger { height: 40px; padding: 0 25px 0 9px; font-size: 13px; line-height: 38px; }
  #members .fs-inv-add button { margin-left: 0; padding: 0 8px; }
}
.fs-cp.mini { font-size: 11px; padding: 3px 8px; }