/* FM 営業フォローボード */
:root{
  --ground:#EDF0F3; --panel:#FFFFFF; --panel-2:#F2F5F8;
  --ink:#1B2430; --ink-2:#4B5A6B; --ink-3:#7A8899;
  --line:#D5DCE4; --line-strong:#B9C4D0;
  --accent:#9A5D12; --accent-soft:#F0E2CE;
  --p1:#A63A28; --p2:#9A7315; --p3:#41637F;
  --ok:#3F7A5E; --ok-soft:#DDEDE4; --err:#A63A28; --err-soft:#F7E2DD;
  --mono:"SFMono-Regular",Consolas,"Courier New",monospace;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  --shadow:0 1px 2px rgba(27,36,48,.06),0 6px 18px rgba(27,36,48,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);letter-spacing:.01em;margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- ヘッダ ---------- */
.topbar{background:var(--panel);border-bottom:2px solid var(--line-strong)}
.topbar-inner{max-width:1400px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.brand-mark{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent);border:1px solid var(--accent);padding:2px 6px;border-radius:2px}
.brand-name{font-family:var(--serif);font-weight:700;font-size:18px}
.mainnav{display:flex;gap:4px;flex-wrap:wrap}
.mainnav a{text-decoration:none;font-size:14px;padding:4px 12px;border-radius:3px;color:var(--ink-2)}
.mainnav a:hover{background:var(--panel-2);color:var(--ink)}
.mainnav a.on{background:var(--ink);color:var(--panel)}
.whoami{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.whoami .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;border:1px solid var(--line-strong);border-radius:2px;padding:1px 6px}
.whoami .logout{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-strong)}

.wrap{max-width:1180px;margin:0 auto;padding:24px 20px 70px}
.wrap.wide{max-width:1600px}
.foot{max-width:1180px;margin:0 auto;padding:0 20px 40px;font-size:12px;color:var(--ink-3)}

.flash{padding:10px 14px;border-radius:3px;margin-bottom:16px;font-size:14px}
.flash.ok{background:var(--ok-soft);border:1px solid var(--ok);color:#2B5744}
.flash.error{background:var(--err-soft);border:1px solid var(--err);color:#7C2A1D}

/* ---------- ログイン ---------- */
.auth{max-width:420px;margin:60px auto;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);padding:32px}
.auth h1{font-size:22px;margin-bottom:6px}
.auth .lead{color:var(--ink-3);font-size:13.5px;margin:0 0 22px}
.auth .code-input{font-family:var(--mono);font-size:30px;letter-spacing:.42em;text-align:center;padding:12px}

/* ---------- フォーム ---------- */
label{display:block;font-size:13px;color:var(--ink-2);margin:14px 0 4px;font-weight:700}
label .hint{font-weight:400;color:var(--ink-3);font-size:12px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line-strong);
  border-radius:3px;background:var(--panel);color:var(--ink)}
textarea{min-height:70px;resize:vertical}
.btn{display:inline-block;font:inherit;font-size:14px;padding:7px 18px;border-radius:3px;border:1px solid var(--ink);
  background:var(--ink);color:var(--panel);cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);opacity:1}
.btn.danger{background:var(--err);border-color:var(--err)}
.btn.small{font-size:12.5px;padding:4px 11px}
.btn.block{display:block;width:100%;margin-top:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}

/* ---------- パネル ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:20px;margin-bottom:20px}
.panel > h2{font-size:17px;margin-bottom:4px}
.panel > .desc{color:var(--ink-3);font-size:13px;margin:0 0 14px}

/* ---------- タイル ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-bottom:20px}
.tile{background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit}
.tile:hover{background:var(--panel-2)}
.tile.on{background:var(--accent-soft)}
.tile .n{font-family:var(--mono);font-size:27px;line-height:1.1}
.tile .lbl{font-size:13px;font-weight:700}
.tile .hint{font-size:11.5px;color:var(--ink-3)}

/* ---------- 絞り込み ---------- */
.controls{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-bottom:6px;padding:13px 16px;background:var(--panel);border:1px solid var(--line);border-radius:3px}
.group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-3)}
.chip{font-size:13px;padding:3px 11px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-2);text-decoration:none}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.controls input[type=search]{min-width:190px;width:auto}
.countline{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:14px 2px 8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- 一覧 ---------- */
.list{display:flex;flex-direction:column;gap:8px}
.item{display:grid;grid-template-columns:4px 1fr auto;gap:0 16px;background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow);overflow:hidden}
.item .stripe{background:var(--p3)}
.item.p1 .stripe{background:var(--p1)} .item.p2 .stripe{background:var(--p2)}
.item .body{padding:12px 2px 12px 0;min-width:0}
.line1{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 10px}
.cust{font-family:var(--serif);font-weight:700;font-size:17px}
.badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;padding:2px 7px;border-radius:2px;white-space:nowrap}
.b-p{color:#fff}
.p1 .b-p{background:var(--p1)} .p2 .b-p{background:var(--p2)} .p3 .b-p{background:var(--p3)}
.b-cat{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line)}
.b-kind{color:var(--accent);border:1px solid var(--accent)}
.b-st{border:1px solid var(--line-strong);color:var(--ink-2)}
.b-st.doing{background:#E2EDF6;border-color:#2F6FA8;color:#1E4E77}
.b-st.done{background:#DDEDE4;border-color:#3F7A5E;color:#2B5744}
.sub{color:var(--ink-2);font-size:13.5px;overflow-wrap:anywhere}
.why{margin-top:6px;font-size:13.5px;border-left:2px solid var(--line-strong);padding-left:10px}
.extra{margin-top:5px;font-size:12.5px;color:var(--ink-3);overflow-wrap:anywhere}
.side{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;padding:12px 14px 12px 0;white-space:nowrap}
.owner{font-size:12.5px;color:var(--ink-2)}
.owner b{color:var(--ink)}
.open-link{font-family:var(--mono);font-size:11.5px;text-decoration:none;border:1px solid var(--line-strong);border-radius:3px;padding:3px 10px;color:var(--ink-2)}
.open-link:hover{border-color:var(--accent);color:var(--accent)}
.empty{padding:44px 10px;text-align:center;color:var(--ink-3)}

/* ---------- 付箋ボード ---------- */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.lane{background:var(--panel-2);border:1px solid var(--line);border-radius:4px;min-height:320px;display:flex;flex-direction:column}
.lane-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel-2);z-index:2;border-radius:4px 4px 0 0}
.lane-dot{width:10px;height:10px;border-radius:50%;flex:none}
.lane-title{font-weight:700;font-size:14px}
.lane-count{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-left:auto}
.lane-body{padding:12px;display:flex;flex-direction:column;gap:10px;min-height:120px;
  max-height:calc(100vh - 250px);overflow-y:auto;overscroll-behavior:contain}
.lane.dragover{outline:2px dashed var(--accent);outline-offset:-4px}
.lane.dragover .lane-body{background:rgba(154,93,18,.05)}

.note{border-radius:3px;padding:11px 13px 10px;box-shadow:0 1px 2px rgba(27,36,48,.12),0 4px 10px rgba(27,36,48,.08);
  cursor:grab;position:relative;border-left:5px solid var(--p3);color:#20293A}
.note:active{cursor:grabbing}
.note.dragging{opacity:.4}
.note .n-title{font-family:var(--serif);font-weight:700;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.note .n-meta{font-family:var(--mono);font-size:10px;letter-spacing:.06em;margin-top:3px;opacity:.72}
.note .n-why{font-size:12.5px;margin-top:6px;line-height:1.55;overflow-wrap:anywhere}
.note .n-foot{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;opacity:.85;flex-wrap:wrap}
.note .n-foot a{color:inherit}
.note .n-note{margin-top:7px;font-size:12px;background:rgba(255,255,255,.55);border-radius:2px;padding:5px 7px;white-space:pre-wrap;overflow-wrap:anywhere}
.note .n-actions{display:flex;gap:6px;margin-left:auto}
.note button.mini{font:inherit;font-size:11px;padding:1px 7px;border-radius:2px;border:1px solid rgba(32,41,58,.3);background:rgba(255,255,255,.5);cursor:pointer;color:inherit}
.note button.mini:hover{background:#fff}
.lane-empty{color:var(--ink-3);font-size:12.5px;text-align:center;padding:22px 6px;border:1px dashed var(--line-strong);border-radius:3px}

/* ---------- テーブル ---------- */
table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
table.grid th,table.grid td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
table.grid th{font-size:12px;color:var(--ink-3);font-weight:700;background:var(--panel-2)}
.tablewrap{overflow-x:auto}

/* ---------- 色設定 ---------- */
.colorgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.colorcell{border:1px solid var(--line);border-radius:3px;padding:12px}
.colorcell .cname{font-size:13px;font-weight:700;margin-bottom:8px}
.colorcell .crow{display:flex;align-items:center;gap:8px}
.colorcell input[type=color]{width:44px;height:32px;padding:0;border:1px solid var(--line-strong);border-radius:3px;background:none;cursor:pointer}
.colorcell input[type=text]{font-family:var(--mono);font-size:12.5px;width:100px}
.preview-note{margin-top:10px;border-radius:3px;padding:9px 11px;font-size:12.5px;border-left:5px solid #999;color:#20293A}

@media (max-width:1000px){ .board{grid-template-columns:1fr} .tiles{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){
  .item{grid-template-columns:4px 1fr}
  .side{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;padding:0 0 12px}
  .row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- 同期の進捗表示 ---------- */
.ln{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);padding:2px 0;border-bottom:1px solid var(--line)}
.ln:last-child{border-bottom:0}
p.ok{background:var(--ok-soft);border:1px solid var(--ok);color:#2B5744;padding:10px 14px;border-radius:3px}
p.err{background:var(--err-soft);border:1px solid var(--err);color:#7C2A1D;padding:10px 14px;border-radius:3px}