/* temoto メンバー版（member.html 専用）
   ⚠️ 配色はわざと本体と変えてある（本体＝クリーム×緑／メンバー＝淡い青×紺）。
   小泉さんが2画面を行き来しても取り違えないため（2026-08-27 小泉指示） */
:root { color-scheme: light; --ink:#232830; --muted:#68707c; --paper:#eaf0f6; --card:#fbfdff; --line:#d3dce6; --green:#31567e; --green-soft:#e0eaf4; --danger:#9b3f35; --gold:#b78636; --shadow:0 12px 34px rgb(36 43 52 / 8%); --font-display:26px; --font-section:17px; --font-body:15px; --font-meta:13px; --font-small:11px; font-family:Inter,"Noto Sans JP",system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; overflow-x:clip; color:var(--ink); background:var(--paper); }
button,input,textarea,select { font:inherit; }
button,select { min-height:44px; border:0; border-radius:12px; }
button { padding:0 16px; color:white; background:var(--green); cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
input,textarea,select { width:100%; min-width:0; border:1px solid var(--line); padding:0 13px; color:var(--ink); background:white; font-size:var(--font-body); }
input,select { height:48px; border-radius:12px; }
input[type="date"] { -webkit-appearance:none; appearance:none; max-width:100%; }
textarea { min-height:110px; padding-block:13px; border-radius:14px; resize:vertical; }
input:focus,textarea:focus,select:focus,button:focus-visible { outline:3px solid rgb(49 86 126 / 20%); outline-offset:1px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
h1 { margin:0; font-size:var(--font-display); line-height:1.15; letter-spacing:-.03em; }
h2 { margin:0 0 12px; font-size:var(--font-section); display:flex; align-items:center; gap:8px; }
h1,h2,p { overflow-wrap:anywhere; }
.muted,.empty { color:var(--muted); font-size:var(--font-meta); }
.eyebrow { margin:0 0 7px; color:var(--green); font-size:var(--font-small); font-weight:800; letter-spacing:.1em; }
.count { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--green-soft); color:var(--green); font-size:var(--font-small); font-weight:800; }

.auth-card { max-width:560px; margin:10vh auto; padding:32px 24px; border:1px solid var(--line); border-radius:24px; background:var(--card); box-shadow:var(--shadow); }
#login-form label,.composer label,#detail label,.report-card label { display:block; margin:13px 0 7px; font-size:var(--font-meta); font-weight:750; }
.login-row { display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:14px; }
.secondary,.text-button { color:var(--green); background:var(--green-soft); }
.danger-button { color:white; background:var(--danger); }
.text-button { min-height:36px; padding:0 12px; font-size:var(--font-meta); }

.workspace { width:min(760px,100%); margin:auto; padding:24px 18px calc(96px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:22px; }
.topbar-actions { display:flex; flex:0 0 auto; gap:6px; }
.block { margin-bottom:30px; }
.list { display:grid; gap:10px; }
.card { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:14px 16px; box-shadow:var(--shadow); cursor:pointer; text-align:left; width:100%; color:var(--ink); min-height:0; }
.card:active { transform:translateY(1px); }
.card .card-title { margin:0; font-weight:700; font-size:var(--font-body); }
.card .card-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:7px; font-size:var(--font-small); color:var(--muted); align-items:center; }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:var(--font-small); font-weight:750; background:var(--green-soft); color:var(--green); }
.badge.is-assigned { background:#dbe7f6; color:#24507f; }
.badge.is-review { background:#f4ead8; color:var(--gold); }
.badge.is-done { background:#eceff2; color:var(--muted); }
.badge.is-late { background:#f6e2df; color:var(--danger); }
.badge.is-rank { background:#eef1f5; color:var(--muted); }
.badge.rank-S,.badge.rank-A { background:#f4ead8; color:var(--gold); }

.quick-add { display:grid; grid-template-columns:1fr auto; gap:9px; margin-bottom:18px; }
.composer { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:6px 16px 16px; margin-bottom:14px; }
.composer-row { display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:12px; }
.note-card { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:14px 16px; box-shadow:var(--shadow); }
.note-body { margin:0; white-space:pre-wrap; font-size:var(--font-body); line-height:1.6; }

/* ⚠️ ボードは本体と同じ形（2026-08-28 小泉指示）＝横に並ぶ列・列ごとの「＋」。
   縦積みの2段組みだと、本体を触っている小泉さんが別物として読み替えることになる */
.kanban { display:flex; align-items:flex-start; gap:12px; max-width:100%; margin-top:10px; padding-bottom:12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; }
.kanban-column { flex:0 0 min(330px,88vw); min-height:180px; padding:0 12px 12px; border:1px solid var(--line); border-radius:12px; background:var(--column-body-bg,#e3ebf4); overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scroll-snap-align:start; }
.kanban-column>header { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; margin:0 -12px; padding:8px 12px; border-bottom:1px solid rgb(35 43 52 / 14%); background:var(--column-header-bg,#dae4ef); }
.kanban-column>header h2 { margin:0; font-size:var(--font-section); }
.kanban-column .card-list { display:grid; gap:8px; margin-top:10px; }
.kanban-column .card-list .empty { margin:6px 2px; }
.column-add-card { width:100%; min-height:44px; margin-top:10px; border:1px dashed rgb(35 43 52 / 26%); color:var(--green); background:rgb(255 255 255 / 55%); font-size:var(--font-section); font-weight:700; }
.column-add-card:hover { background:rgb(255 255 255 / 85%); }
.column-add-form { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:10px; }
.column-add-form input { height:44px; }
.column-add-form button { min-height:44px; }
/* 列の中のカードは本体と同じ密度に（大きな丸箱のままだと1列に2枚しか入らない） */
.kanban-column .card { padding:10px 12px; border-radius:10px; box-shadow:none; }
.kanban-column .card .card-title { font-size:var(--font-body); line-height:1.35; }
.kanban-column .card .card-meta { margin-top:5px; gap:6px; }
/* ボードのときだけ横幅を広く使う（列が3つ以上見える） */
body.board-active .workspace { width:min(1180px,100%); }
.report-card { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:6px 16px 16px; box-shadow:var(--shadow); }
.report-lead { margin:14px 0 7px; font-size:var(--font-meta); font-weight:750; }
.report-summary { white-space:pre-wrap; border-radius:12px; background:var(--green-soft); padding:12px 14px; font-size:var(--font-meta); line-height:1.7; }
.report-summary.is-empty { background:#eef1f5; color:var(--muted); }
.report-summary.small { margin-top:10px; background:#eef1f5; }
.report-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }

.primary-nav { position:fixed; z-index:20; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,minmax(44px,1fr)); padding:3px max(4px,env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)); border-top:1px solid var(--line); background:rgb(251 253 255 / 96%); backdrop-filter:blur(12px); }
.primary-nav button { display:grid; place-items:center; min-width:44px; min-height:48px; padding:2px 1px; border-radius:9px; color:var(--muted); background:transparent; }
.primary-nav .nav-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.primary-nav button b { font-size:var(--font-small); white-space:nowrap; }
.primary-nav button[aria-current="page"] { color:var(--green); background:var(--green-soft); }

.preview-banner { position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:center; padding:9px 16px; background:var(--gold); color:white; font-size:var(--font-meta); font-weight:750; text-align:center; }
.preview-banner a { color:white; text-decoration:underline; white-space:nowrap; }

.modal { position:fixed; inset:0; z-index:40; display:grid; place-items:end center; background:rgb(35 40 48 / 42%); }
.modal-card { width:min(680px,100%); max-height:88vh; overflow:auto; background:var(--card); border-radius:22px 22px 0 0; padding:20px 18px calc(24px + env(safe-area-inset-bottom)); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.modal-head h2 { margin:0; }
.body-text,.thread { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--font-body); line-height:1.65; }
.body-text { margin:12px 0; }
.thread { margin:12px 0; border-top:1px dashed var(--line); padding-top:12px; }
.thread .stamp { color:var(--muted); font-size:var(--font-small); font-weight:750; }
.reply-row,.detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.move-row { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; margin:14px 0 4px; }
.move-row label { margin:0; white-space:nowrap; }

.toast { position:fixed; left:50%; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:50; transform:translateX(-50%); padding:11px 18px; border-radius:999px; background:var(--ink); color:white; font-size:var(--font-meta); font-weight:700; box-shadow:var(--shadow); }
.toast.error { background:var(--danger); }

@media (min-width:640px) { .modal { place-items:center; } .modal-card { border-radius:22px; } }
@media (min-width:1024px) {
  .primary-nav { top:0; right:auto; bottom:0; left:0; width:180px; display:flex; flex-direction:column; gap:2px; padding:30px 14px; border-top:0; border-right:1px solid var(--line); }
  .primary-nav button { display:flex; justify-content:flex-start; gap:8px; padding:0 13px; }
  .primary-nav button b { font-size:var(--font-meta); }
  .workspace { margin-left:180px; padding-bottom:60px; }
  .preview-banner { padding-left:196px; }
}