/* 部署間相談。グループ連携ツールの見た目をもとにしている。スマホでも押しやすいよう、ボタンは大きめ */
:root{
  --bg:#f4f6f8; --card:#fff; --ink:#1f2933; --muted:#6b7280; --line:#e3e7ec; --soft:#f1f4f7;
  --brand:#0f766e; --brand-d:#0b5e57; --brand-soft:#e6f4f2;
  --ok:#15803d; --ok-soft:#dcfce7; --warn:#b45309; --warn-soft:#fef3c7; --err:#b91c1c; --err-soft:#fee2e2;
  --idea:#6d28d9; --idea-soft:#ede9fe;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 "Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif}
a{color:var(--brand)}
.hidden{display:none !important}
.muted{color:var(--muted)} .small{font-size:13px} .ok{color:var(--ok)} .err{color:var(--err);min-height:1em;white-space:pre-line}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:16px}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:transparent}
button{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:9px 14px}
button:disabled{opacity:.5;cursor:not-allowed}
.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.primary:hover{background:var(--brand-d)}
.big{width:100%;padding:14px;font-size:16px;margin-top:6px}
.ghost{background:transparent}
.btn{display:inline-block;text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:var(--ink)}
.danger{color:var(--err);border-color:#f3c4c4}
.mini{padding:5px 10px;font-size:13px;border-radius:8px}
.mini.primary{color:#fff}

/* ---- 上の帯とタブ ---- */
.topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:800;text-decoration:none;color:var(--brand);font-size:17px;margin-right:auto}
.me{font-size:13px;color:var(--muted)}
.me-link{font-size:13px}
.tabs{display:flex;gap:4px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:0;z-index:5}
.tabs a{white-space:nowrap;text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:999px;font-size:14px}
.tabs a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.tabs a.tab-new{background:var(--brand);color:#fff;font-weight:700}
.badge{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--err);color:#fff;font-size:12px;text-align:center;line-height:20px}

#app{max-width:820px;margin:0 auto;padding:16px 16px 60px}
.view-title{font-size:20px;margin:6px 0 12px}
.sec{font-size:16px;margin:22px 0 8px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.panel h3{margin:0 0 10px;font-size:16px}
.form .field,.field{display:block;margin:0 0 12px;font-weight:600;font-size:14px}
.field input,.field select,.field textarea{margin-top:4px;font-weight:400}
.hint{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:3px}
.check{display:flex;align-items:center;gap:8px;margin:6px 0}
.check input{width:auto}
.note{background:var(--soft);border-radius:10px;padding:10px 12px;font-size:14px}
.empty{color:var(--muted);text-align:center;padding:24px 0}
.loading{color:var(--muted)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}

/* ---- ホーム ---- */
.philosophy{background:linear-gradient(135deg,var(--brand),#155e75);color:#fff;border-radius:16px;padding:18px 20px;margin-bottom:16px}
.philosophy h2{margin:0 0 8px;font-size:15px;opacity:.9;letter-spacing:.1em}
.philosophy ol{margin:0;padding-left:1.4em}
.philosophy li{margin:6px 0;font-size:17px}
.philosophy .sub{display:block;font-size:14px;opacity:.9;font-weight:400}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.qbtn{display:block;text-decoration:none;border-radius:14px;padding:16px;color:#fff}
.qbtn b{display:block;font-size:16px}
.qbtn span{font-size:13px;opacity:.92}
.q-consult{background:var(--brand)}
.q-idea{background:var(--idea)}
.alert{display:block;background:var(--warn-soft);color:var(--warn);border:1px solid #f5d38a;border-radius:12px;padding:12px 14px;font-weight:700;text-decoration:none;margin-bottom:10px}

/* ---- カード ---- */
.list{display:flex;flex-direction:column;gap:10px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink)}
a.card:hover{border-color:var(--brand)}
.card.closed{opacity:.7}
.card.pending{border-color:#f5d38a;background:#fffdf5}
.card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card-title{font-weight:700;font-size:15.5px;overflow-wrap:anywhere}
.card-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted);margin-top:4px}
.chip{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.k-consult{background:var(--brand-soft);color:var(--brand)}
.k-idea{background:var(--idea-soft);color:var(--idea)}
.c-closed{background:#e5e7eb;color:#4b5563}
.c-wait{background:var(--warn-soft);color:var(--warn);border:1px solid #f5c66b}
.c-parent{background:#e0f2fe;color:#075985}
.a-yes{background:var(--ok-soft);color:var(--ok)}
.a-maybe{background:#e0f2fe;color:#075985}
.a-no{background:#f3f4f6;color:#4b5563}

/* ---- 一覧の絞り込み ---- */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.fbtn{padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:13.5px;background:var(--card)}
.fbtn.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---- 種類・回答の切り替えボタン ---- */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.seg3{grid-template-columns:1fr 1fr 1fr;margin-bottom:12px}
.segbtn{padding:12px 6px;font-weight:700;font-size:14px}
.segbtn.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.segbtn.a-yes.on{border-color:var(--ok);color:var(--ok);background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)}
.segbtn.a-maybe.on{border-color:#0369a1;color:#075985;background:#e0f2fe;box-shadow:inset 0 0 0 1px #0369a1}
.segbtn.a-no.on{border-color:#6b7280;color:#374151;background:#f3f4f6;box-shadow:inset 0 0 0 1px #6b7280}
.segbtn.a-yes,.segbtn.a-maybe,.segbtn.a-no{background:var(--card);color:var(--ink)}
.answer{border-color:var(--brand)}

/* ---- 中身 ---- */
.post-title{font-size:19px;margin:8px 0 10px;overflow-wrap:anywhere}
.post-body{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--soft);border-radius:10px;padding:10px 12px}
.kv{display:grid;grid-template-columns:7.5em 1fr;gap:4px 10px;margin:0 0 10px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.kv dd.pre{white-space:pre-wrap}
.files{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.file-row{display:flex;align-items:center;gap:8px;justify-content:space-between;overflow-wrap:anywhere;font-size:14px}
.resp{border-top:1px solid var(--line);padding:10px 0}
.resp-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.resp-contact{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;margin-top:4px}
.resp-comment{margin:6px 0 2px;white-space:pre-wrap}

/* ---- ログイン ---- */
.login-page{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;padding:24px 16px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;width:100%;max-width:420px}
.login-title{font-size:20px;margin:0;color:var(--brand)}
.login-motto{color:var(--muted);margin:4px 0 18px;font-size:14px}
.login-card h2{font-size:17px;margin:0 0 6px}
.links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;margin-top:12px}
.msg{color:var(--err);white-space:pre-line;min-height:1em}
.msg.ok{color:var(--ok)}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#1f2933;color:#fff;
  padding:10px 16px;border-radius:10px;opacity:0;transition:.2s;pointer-events:none;z-index:50;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.err{background:var(--err)}

@media (max-width:560px){
  #app{padding:12px 12px 60px}
  .me{display:none}
  .quick{grid-template-columns:1fr}
  .kv{grid-template-columns:6em 1fr}
  .seg3{grid-template-columns:1fr}
}
@media (prefers-color-scheme:dark){
  :root{--bg:#111518;--card:#1a2025;--ink:#e6e9ec;--muted:#9aa4ae;--line:#2c343b;--soft:#222a31;
    --brand:#2bb3a3;--brand-d:#239787;--brand-soft:#173a36;--ok:#4ade80;--ok-soft:#15301f;--warn:#fbbf24;--warn-soft:#3a2e10;
    --err:#f87171;--err-soft:#3a1717;--idea:#a78bfa;--idea-soft:#2a2340}
  .philosophy{background:linear-gradient(135deg,#0f5f57,#164e63)}
  .card.pending{background:#2a2410}
  .c-parent,.a-maybe,.segbtn.a-maybe.on{background:#12324a;color:#7dd3fc}
  .c-closed,.a-no,.segbtn.a-no.on{background:#2a3036;color:#cbd2d9}
  .alert{border-color:#6b5414}
}

/* ===== 部署間相談 ===== */
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.s-open{background:var(--warn-soft);color:var(--warn);border:1px solid #f5c66b}
.s-overdue{background:var(--err);color:#fff}
.s-answered{background:var(--ok-soft);color:var(--ok)}
.s-answered_late{background:#fde68a;color:#78350f}
.s-withdrawn{background:#e5e7eb;color:#4b5563}
.a-cond{background:#e0f2fe;color:#075985}
.o-chip{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.o-outsource{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.dir{font-weight:700;color:var(--brand)}
.due{font-weight:700}
.due.over{color:var(--err)}
.due.soon{color:var(--warn)}
.card.overdue{border-color:var(--err);border-width:2px}
.card.waiting{border-color:#f5d38a;background:#fffdf5}
.segbtn.a-cond{background:var(--card);color:var(--ink)}
.segbtn.a-cond.on{border-color:#0369a1;color:#075985;background:#e0f2fe;box-shadow:inset 0 0 0 1px #0369a1}
.comment{border-top:1px solid var(--line);padding:8px 0}
.comment .who{font-size:13px;color:var(--muted)}
.history{font-size:13px;color:var(--muted)}
.history summary{cursor:pointer;font-weight:700}
.history li{margin:2px 0}
/* 集計の表 */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{border-collapse:collapse;width:100%;font-size:14px;background:var(--card)}
.tbl th,.tbl td{border:1px solid var(--line);padding:6px 8px;text-align:right;white-space:nowrap}
.tbl th{background:var(--soft);font-weight:700;text-align:center}
.tbl td.l{text-align:left}
.tbl td.bad{color:var(--err);font-weight:700}
.tbl td.good{color:var(--ok);font-weight:700}
.rule{border-left:6px solid var(--brand);background:var(--card);border-radius:12px;padding:12px 16px;margin-bottom:14px;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.rule h2{margin:0 0 6px;font-size:15px;color:var(--brand)}
.rule ol{margin:0;padding-left:1.4em}
.rule li{margin:3px 0}
.monthnav{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.monthnav input{width:auto}
.admin-row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;border-top:1px solid var(--line);padding:6px 0;font-size:14px}
.admin-row .grow{flex:1;min-width:10em}
@media (prefers-color-scheme:dark){
  .card.waiting{background:#2a2410}
  .s-withdrawn{background:#2a3036;color:#cbd2d9}
  .a-cond,.segbtn.a-cond.on{background:#12324a;color:#7dd3fc}
  .s-answered_late{background:#3a2e10;color:#fbbf24}
  .o-outsource{background:#3a1717;color:#fca5a5;border-color:#5b2323}
}
/* 相手を選ぶ欄（回覧板と同じ形。2026-11-07） */
.picker{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:4px;font-weight:400;background:var(--card)}
.picker input[type=search]{margin:6px 0}
.pick-all{font-weight:700}
.pick-groups{max-height:340px;overflow:auto;border-top:1px solid var(--line);margin-top:4px}
.pick-dept{border-bottom:1px solid var(--line);padding:2px 0}
.pick-dept summary{cursor:pointer;list-style-position:outside;margin-left:18px}
.pick-dept summary .check{display:inline-flex;margin:4px 0;font-weight:600}
.pick-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0 10px;padding:2px 0 6px 26px}
.pick-person{margin:3px 0}
.check input:disabled + *,.check:has(input:disabled){opacity:.6}
.pick-sum{margin:8px 0 0;font-weight:700;color:var(--brand)}
.pick-sum.err{color:var(--err)}
.recips summary{cursor:pointer;color:var(--muted);font-size:13px;display:inline}
.recips{display:inline}
.recip-list{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:4px;font-size:14px}
.recip.answered{font-weight:700;color:var(--ok)}
/* 回答の一覧（追加式。2026-11-07） */
.resp.old{opacity:.55}
.resp-top b{font-size:14px}

/* ===== 画面の配色（1人ずつ「設定」で選ぶ。2026-11-07。既定は青緑＝上の :root のまま） ===== */
:root[data-theme="blue"]{--brand:#1d4ed8;--brand-d:#1e40af;--brand-soft:#e0eaff}
:root[data-theme="navy"]{--brand:#1e3a8a;--brand-d:#172c6b;--brand-soft:#e3e8f6}
:root[data-theme="green"]{--brand:#15803d;--brand-d:#166534;--brand-soft:#dcfce7}
:root[data-theme="purple"]{--brand:#7c3aed;--brand-d:#6d28d9;--brand-soft:#efe7ff}
:root[data-theme="orange"]{--brand:#c2410c;--brand-d:#9a3412;--brand-soft:#ffedd5}
:root[data-theme="pink"]{--brand:#db2777;--brand-d:#be185d;--brand-soft:#fce7f3}
:root[data-theme="gray"]{--brand:#475569;--brand-d:#334155;--brand-soft:#e9edf2}
/* 上の帯（考え方の欄）も選んだ色に合わせる */
:root[data-theme]:not([data-theme="teal"]) .philosophy{background:linear-gradient(135deg,var(--brand),var(--brand-d))}
.themes{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.theme-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:13px;font-weight:400}
.theme-btn.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);font-weight:700}
.sw{width:16px;height:16px;border-radius:50%;display:inline-block}
.sw-teal{background:#0f766e}.sw-blue{background:#1d4ed8}.sw-navy{background:#1e3a8a}.sw-green{background:#15803d}
.sw-purple{background:#7c3aed}.sw-orange{background:#c2410c}.sw-pink{background:#db2777}.sw-gray{background:#475569}
@media (prefers-color-scheme:dark){
  :root[data-theme]:not([data-theme="teal"]){--brand-soft:color-mix(in srgb,var(--brand) 28%,#1a2025)}
  :root[data-theme="blue"]{--brand:#60a5fa;--brand-d:#3b82f6}
  :root[data-theme="navy"]{--brand:#818cf8;--brand-d:#6366f1}
  :root[data-theme="green"]{--brand:#4ade80;--brand-d:#22c55e}
  :root[data-theme="purple"]{--brand:#a78bfa;--brand-d:#8b5cf6}
  :root[data-theme="orange"]{--brand:#fb923c;--brand-d:#f97316}
  :root[data-theme="pink"]{--brand:#f472b6;--brand-d:#ec4899}
  :root[data-theme="gray"]{--brand:#94a3b8;--brand-d:#64748b}
  :root[data-theme]:not([data-theme="teal"]) .philosophy{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 55%,#000),color-mix(in srgb,var(--brand-d) 45%,#000))}
}