:root{
  --ground:#F6F7F9; --surface:#FFFFFF; --ink:#1F2328; --muted:#5B636C; --faint:#8A929B;
  --rule:#E3E6EA; --rule-soft:#F1F3F5; --accent:#1B5FBF; --accent-soft:#E9F0FA; --accent-hover:#F4F7FC;
  --ok:#1E7A50; --ok-soft:#E8F2EC; --err:#B23B32; --err-soft:#FAECEB; --warn:#9A7314; --warn-soft:#FAF3E2;
  --ba:#1B5FBF; --nxn:#7A4BB5; --nxn-soft:#F1EBF8;
  --r:8px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);
  font:14px/1.6 "Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}

/* レイアウト */
.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--rule);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.brand{font-weight:700;font-size:15px;padding:0 8px 2px}
.brand small{display:block;font-weight:400;color:var(--faint);font-size:11px}
.proj{margin:10px 8px 12px;padding:10px;border:1px solid var(--rule);border-radius:var(--r);font-size:12px;color:var(--muted)}
.proj b{display:block;color:var(--ink);font-size:13px;line-height:1.4}
.nav a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--ink)}
.nav a:hover{background:var(--accent-hover)}
.nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav .cnt{margin-left:auto;font-size:11px;background:var(--rule-soft);color:var(--muted);border-radius:10px;padding:0 7px}
.side .foot{margin-top:auto;font-size:12px;color:var(--muted);padding:8px;border-top:1px solid var(--rule)}
.side .foot select{width:100%;margin-top:4px}
main{padding:22px 28px 60px;min-width:0}
.head{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.head h1{font-size:20px;margin:0}
.head .sub{color:var(--muted);font-size:13px}
.head .sp{flex:1}
.demo-bar{background:var(--warn-soft);color:var(--warn);border:1px solid #EFDFB5;border-radius:var(--r);padding:8px 12px;margin-bottom:14px;font-size:12.5px}

/* 部品 */
.btn{border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:6px 12px;cursor:pointer}
.btn:hover{background:var(--accent-hover)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{filter:brightness(1.08)}
.btn.sm{padding:3px 9px;font-size:12px}
.btn.danger{color:var(--err)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:16px}
.card h2{font-size:14px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.card h2 .more{margin-left:auto;font-size:12px;font-weight:400}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:2fr 1fr}
.kpi .n{font-size:26px;font-weight:700;line-height:1.2}
.kpi .l{color:var(--muted);font-size:12px}
.kpi.warn .n{color:var(--warn)} .kpi.err .n{color:var(--err)}
.hero{display:flex;gap:18px;align-items:center}
.hero .days{font-size:34px;font-weight:700;color:var(--accent);line-height:1}
.hero .days small{font-size:13px;color:var(--muted);font-weight:400}
.ball{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--rule-soft);margin:8px 0 4px}
.ball i{display:block}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:1px}

.pill{display:inline-block;font-size:11.5px;border-radius:10px;padding:0 8px;white-space:nowrap;border:1px solid transparent;line-height:19px}
.st-todo,.st-discuss{background:var(--rule-soft);color:var(--muted)}
.st-checking{background:#EEF4FB;color:#3C6FA8;border-color:#D6E3F3}
.st-approval{background:var(--nxn-soft);color:var(--nxn)}
.st-doing{background:var(--accent-soft);color:var(--accent)}
.st-waiting{background:var(--warn-soft);color:var(--warn)}
.st-done{background:var(--ok-soft);color:var(--ok)}
.st-hold{background:#fff;border-color:var(--rule);color:var(--faint)}
.ms-tbd{background:#fff;border:1px dashed var(--faint);color:var(--muted)}
.ms-tentative{background:var(--warn-soft);color:var(--warn)}
.ms-fixed{background:var(--accent-soft);color:var(--accent)}
.ms-done{background:var(--ok-soft);color:var(--ok)}
.ms-cancel{background:var(--rule-soft);color:var(--faint);text-decoration:line-through}
.org{font-size:11px;font-weight:600;border-radius:4px;padding:0 5px}
.org-1{background:var(--accent-soft);color:var(--ba)} .org-2{background:var(--nxn-soft);color:var(--nxn)} .org-3{background:var(--rule-soft);color:var(--muted)}
.lock{font-size:11px;color:var(--err);background:var(--err-soft);border-radius:4px;padding:0 5px;white-space:nowrap}
.pri1{color:var(--err);font-weight:700}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12px}
.over{color:var(--err);font-weight:600}

/* 表 */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar input[type=search]{min-width:220px}
.toolbar select,.toolbar input{border:1px solid var(--rule);border-radius:6px;padding:5px 8px;background:#fff}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.seg button{border:0;background:#fff;padding:5px 11px;cursor:pointer;border-right:1px solid var(--rule)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
table.t{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.t th{font-size:12px;color:var(--muted);font-weight:600;text-align:left;background:#FAFBFC;padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
.t td{padding:9px 10px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t tr.click{cursor:pointer} .t tr.click:hover td{background:var(--accent-hover)}
.t .ttl{font-weight:500}
.t .ans{font-size:12px;color:var(--muted);margin-top:2px}
.empty{padding:30px;text-align:center;color:var(--faint)}

/* リスト */
.list{list-style:none;margin:0;padding:0}
.list li{padding:8px 0;border-bottom:1px solid var(--rule-soft);display:flex;gap:10px;align-items:baseline}
.list li:last-child{border-bottom:0}
.list .d{color:var(--muted);font-size:12px;min-width:82px;font-variant-numeric:tabular-nums}
.list .x{flex:1;min-width:0}

/* タイムライン */
.month{margin:18px 0 6px;font-weight:700;color:var(--muted);font-size:13px}
.tl{border-left:2px solid var(--rule);margin-left:6px;padding-left:16px}
.tl .ev{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:9px 12px;margin-bottom:8px;cursor:pointer}
.tl .ev:hover{border-color:var(--accent)}
.tl .ev:before{content:"";position:absolute;left:-23px;top:14px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--faint)}
.tl .ev.k-本番:before{background:var(--accent);border-color:var(--accent)}
.tl .ev.past{opacity:.72}
.tl .when{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.today-line{margin:10px 0 10px -22px;font-size:11px;color:var(--err);font-weight:600}

/* 会議 */
.mtg{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:10px}
.mtg summary{padding:10px 14px;cursor:pointer;display:flex;gap:10px;align-items:baseline;list-style:none}
.mtg summary::-webkit-details-marker{display:none}
.mtg .body{padding:0 14px 12px;border-top:1px solid var(--rule-soft)}
.mtg .body h4{margin:10px 0 2px;font-size:12px;color:var(--muted)}
.pre{white-space:pre-wrap}

/* 出張 */
.trip{margin-bottom:18px}
.trip .tt{display:flex;gap:10px;align-items:baseline;margin-bottom:8px}
.trip .tt h3{margin:0;font-size:15px}

/* メンバー */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.person{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:10px 12px}
.person b{font-size:14px}
.person .co{font-size:12px;color:var(--muted)}
.role{font-size:11px;border-radius:4px;padding:0 5px;background:var(--rule-soft);color:var(--muted)}
.role.admin{background:var(--accent);color:#fff} .role.editor{background:var(--accent-soft);color:var(--accent)}

/* ドロワー／モーダル */
.veil{position:fixed;inset:0;background:rgba(15,20,30,.28);z-index:40}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,100vw);background:var(--surface);z-index:41;
  box-shadow:-8px 0 30px rgba(0,0,0,.08);display:flex;flex-direction:column}
.drawer .dh{padding:14px 18px;border-bottom:1px solid var(--rule);display:flex;gap:8px;align-items:center}
.drawer .dh h3{margin:0;font-size:15px;flex:1}
.drawer .db{padding:16px 18px;overflow:auto;flex:1}
.drawer .df{padding:12px 18px;border-top:1px solid var(--rule);display:flex;gap:8px}
.drawer .df .sp{flex:1}
.f{margin-bottom:12px}
.f label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--rule);border-radius:6px;padding:7px 9px;background:#fff}
.f textarea{min-height:80px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.f.chk label{display:flex;gap:6px;align-items:center;color:var(--ink);font-size:13px}
.f.chk input{width:auto}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.comments{margin-top:18px;border-top:1px solid var(--rule);padding-top:12px}
.cm{padding:8px 10px;background:var(--ground);border-radius:6px;margin-bottom:6px}
.cm .who{font-size:12px;color:var(--muted)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:6px;z-index:60;font-size:13px}
.toast.err{background:var(--err)}

@media (max-width:900px){
  .trip .g2{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:10px}
  .side .proj,.side .foot{display:none}
  .nav{display:flex;flex-wrap:wrap;gap:2px}
  main{padding:16px}
  .g4{grid-template-columns:1fr 1fr} .g2,.g3{grid-template-columns:1fr}
  .t .hide-m{display:none}
}
.t .btn{white-space:nowrap}
@media (min-width:901px){.trip .g2{grid-template-columns:3fr 2fr}}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:6px}
.thumb{display:block;text-decoration:none;color:var(--muted);font-size:11px}
.thumb img{width:100%;height:96px;object-fit:cover;border:1px solid var(--rule);border-radius:6px;display:block;margin-bottom:2px}
input.qty{width:64px;text-align:right;border:1px solid var(--rule);border-radius:4px;padding:2px 4px}

/* タスク詳細 */
.crumb{margin:-6px 0 8px;font-size:13px}
.ihead{display:flex;gap:10px;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap}
.ihead h1{font-size:20px;margin:2px 0 0;line-height:1.4}
.ihead .sp{flex:1}
.ihead select{border:1px solid var(--rule);border-radius:6px;padding:6px 8px;background:#fff}
.idetail{grid-template-columns:minmax(0,2fr) minmax(260px,1fr);align-items:start}
.idetail .card{margin-bottom:14px}
.card .body{font-size:14px;line-height:1.8}
.card.answer{border-left:3px solid var(--ok)}
dl.meta{display:grid;grid-template-columns:84px 1fr;gap:8px 10px;margin:0;font-size:13px}
dl.meta dt{color:var(--muted)} dl.meta dd{margin:0}
.cnt-ic{font-size:11px;color:var(--faint);font-weight:400;white-space:nowrap}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.gal figure{margin:0}
.gal figcaption{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.gal figcaption .x{color:var(--err);text-decoration:none;margin-left:4px}
.gimg{display:block;width:100%;padding:0;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--rule-soft);cursor:zoom-in}
.gimg img{display:block;width:100%;height:120px;object-fit:cover}
.gimg.sm{width:72px}.gimg.sm img{height:52px}
.cgal .gal{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));margin:8px 0 0}
.cgal .gimg img{height:84px}
.ficon{display:inline-block;width:72px;text-align:center;font-size:20px;color:var(--faint)}
.dz{border:2px dashed var(--rule);border-radius:8px;padding:18px;text-align:center;color:var(--muted);cursor:pointer;font-size:13px}
.dz:hover,.dz.on{border-color:var(--accent);background:var(--accent-hover);color:var(--accent)}
.composer{margin-top:10px;border-top:1px solid var(--rule-soft);padding-top:10px}
.composer textarea{width:100%;min-height:70px;border:1px solid var(--rule);border-radius:6px;padding:8px}
.crow{display:flex;gap:8px;align-items:center;margin-top:6px}.crow .sp{flex:1}
.pend{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-size:12px;background:var(--accent-soft);color:var(--accent);border-radius:12px;padding:1px 9px}
.chip a{text-decoration:none;margin-left:3px}
.lb{position:fixed;inset:0;background:rgba(10,12,16,.9);z-index:80;display:flex;align-items:center;justify-content:center;flex-direction:column}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.lb-cap{color:#fff;font-size:13px;margin-top:10px}.lb-cap span{color:#aaa;margin:0 8px}.lb-cap a{color:#9cc2ff}
.lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:26px;cursor:pointer;line-height:1}
.lb button:hover{background:rgba(255,255,255,.25)}
.lb-x{top:16px;right:16px}.lb-p{left:16px;top:50%}.lb-n{right:16px;top:50%}
@media (max-width:900px){.idetail{grid-template-columns:1fr}}

/* 画像＋図説 */
.figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:12px}
.fig{margin:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.fimg{display:block;width:100%;padding:0;border:0;background:#F4F5F7;cursor:zoom-in}
.fimg img{display:block;width:100%;height:230px;object-fit:contain}
.fig figcaption{padding:9px 12px 10px;border-top:1px solid var(--rule-soft)}
.fig .cap{font-size:13.5px;line-height:1.7;white-space:pre-wrap}
.fig .fno{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:0 6px;margin-right:4px}
.fig .fmeta{font-size:11px;color:var(--faint);margin-top:4px;display:flex;gap:4px;flex-wrap:wrap;align-items:baseline}
.fig .fmeta>span:first-child{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fig .fact{margin-left:auto;white-space:nowrap}.fig .fact a{margin-left:6px}.fig .fact .x{color:var(--err)}
.capin{width:100%;border:1px solid var(--accent);border-radius:6px;padding:6px 8px;font-size:13px}
.lb-txt{color:#fff;font-size:15px;max-width:80vw;text-align:center;margin-top:12px;white-space:pre-wrap;line-height:1.6}
.fig.wide{grid-column:1/-1}.fig.wide .fimg img{height:auto;max-height:420px}
@media (max-width:900px){.figs{grid-template-columns:1fr}}
.side-h{margin:22px 0 2px;padding:6px 10px;font-size:15px;border-left:4px solid var(--rule);background:var(--surface);border-radius:4px}
.side-h.side-jp{border-left-color:#7B4FB8}
.side-h.side-tw{border-left-color:#1B5FBF}
#pp .side-h:first-child{margin-top:4px}