:root{
    --bg:#F7F8FA;
    --panel:#FFFFFF;
    --ink:#1A2233;
    --ink-soft:#5B6472;
    --line:#E3E7EE;
    --line-strong:#CBD2DE;
    --weekend:#F0F2F6;
    --today:#D9534F;
    --c1:#2B4C7E;
    --c2:#0E9AA7;
    --c3:#C8881E;
    --c4:#4C9A6E;
    --c-accent:#0E9AA7;
    --row-h:40px;
    --head-h:54px;
    --label-w:200px;
    --day-w:30px;
    --radius:10px;
    --shadow:0 1px 3px rgba(26,34,51,.06),0 8px 24px rgba(26,34,51,.05);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1280px;margin:0 auto;padding:22px 20px 60px;}

  /* ---- ヘッダー ---- */
  header.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
  .titleblock{min-width:0;}
  .eyebrow{font-size:11px;letter-spacing:.18em;color:var(--ink-soft);font-weight:700;text-transform:uppercase;}
  #projName{
    font-size:24px;font-weight:800;letter-spacing:.01em;color:var(--ink);
    padding:2px 0;
  }

  .controls{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;}
  .field{display:flex;flex-direction:column;gap:3px;}
  .field label{font-size:10px;color:var(--ink-soft);font-weight:700;letter-spacing:.05em;padding-left:2px;}
  input[type="month"],input[type="date"],select,input[type="text"],textarea{
    font-family:inherit;font-size:14px;color:var(--ink);background:var(--panel);
    border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;outline:none;line-height:1.2;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(14,154,167,.12);}

  .btn{
    font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border-radius:8px;
    padding:9px 14px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);
    transition:background .12s,border-color .12s,transform .05s;line-height:1.2;
  }
  .btn:hover{border-color:var(--c-accent);}
  .btn:active{transform:translateY(1px);}
  .btn.primary{background:var(--c1);border-color:var(--c1);color:#fff;}
  .btn.primary:hover{background:#22406d;}
  .btn.ghost{background:transparent;}
  .btn.small{padding:7px 10px;font-size:12px;}

  /* ---- 担当名の編集 ---- */
  .assignee-config{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;box-shadow:var(--shadow);margin:0 0 12px;}
  .assignee-config .ac-label{font-size:12px;font-weight:700;color:var(--ink-soft);}
  .ac-item{display:inline-flex;align-items:center;gap:7px;}
  .ac-item .dot{width:12px;height:12px;border-radius:4px;flex:0 0 auto;}
  .ac-item input[type="text"]{font-size:13px;font-weight:700;background:var(--bg);border-radius:7px;padding:5px 9px;width:120px;}
  .ac-item input[type="text"]:focus{background:var(--panel);}

  /* ---- フィルタ・凡例 ---- */
  .legendbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
  .chip{
    display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;cursor:pointer;
    padding:5px 11px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);
    color:var(--ink-soft);user-select:none;transition:opacity .12s,background .12s;
  }
  .chip .dot{width:11px;height:11px;border-radius:3px;}
  .chip.on{color:var(--ink);}
  .chip.off{opacity:.4;text-decoration:line-through;}

  /* ---- ガント(PC) ---- */
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
  .gantt-scroll{overflow:auto;max-height:70vh;}
  .inner{position:relative;}

  .header-row{position:sticky;top:0;z-index:5;display:flex;background:var(--panel);box-shadow:0 1px 0 var(--line);}
  .corner{
    position:sticky;left:0;z-index:6;width:var(--label-w);min-width:var(--label-w);height:var(--head-h);
    background:var(--panel);border-right:1px solid var(--line-strong);
    display:flex;align-items:center;padding:0 14px;font-size:11px;font-weight:700;color:var(--ink-soft);
  }
  .head-days{display:flex;}
  .month-track{display:flex;flex-direction:column;}
  .month-cap{height:22px;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:800;color:var(--ink);border-bottom:1px solid var(--line);border-right:1px solid var(--line-strong);}
  .day-cells{display:flex;height:32px;}
  .day-cell{
    width:var(--day-w);min-width:var(--day-w);display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-size:10px;border-right:1px solid var(--line);color:var(--ink-soft);
  }
  .day-cell .dnum{font-size:11px;font-weight:700;color:var(--ink);line-height:1.1;}
  .day-cell.weekend{background:var(--weekend);}
  .day-cell.sun .dnum{color:#C0504D;}
  .day-cell.sat .dnum{color:#3a6ea5;}
  .day-cell.today{background:rgba(217,83,79,.10);}
  .day-cell.today .dnum{color:var(--today);}

  .row{display:flex;border-bottom:1px solid var(--line);height:var(--row-h);}
  .row:hover .label{background:#FBFCFE;}
  .label{
    position:sticky;left:0;z-index:3;width:var(--label-w);min-width:var(--label-w);height:var(--row-h);
    background:var(--panel);border-right:1px solid var(--line-strong);
    display:flex;align-items:center;gap:8px;padding:0 12px;cursor:pointer;overflow:hidden;
  }
  .label .lname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .label .lcolor{width:4px;height:20px;border-radius:2px;flex:0 0 auto;}
  .track{position:relative;height:var(--row-h);}
  .track .wk{position:absolute;top:0;bottom:0;background:var(--weekend);pointer-events:none;}
  .track .grid{position:absolute;top:0;bottom:0;border-right:1px solid var(--line);pointer-events:none;}
  .today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--today);z-index:4;pointer-events:none;}

  .bar{
    position:absolute;top:7px;height:calc(var(--row-h) - 14px);border-radius:6px;cursor:pointer;
    display:flex;align-items:center;padding:0 8px;overflow:hidden;color:#fff;font-size:11px;font-weight:700;
    box-shadow:0 1px 2px rgba(0,0,0,.12);z-index:2;
  }
  .bar .prog{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.30);border-right:1px solid rgba(255,255,255,.55);z-index:0;}
  .bar .blabel{position:relative;z-index:1;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.25);}

  .empty{padding:48px 20px;text-align:center;color:var(--ink-soft);}
  .empty strong{color:var(--ink);}

  /* ---- ガント(スマホ・転置: 横=担当 / 縦=週) ---- */
  .sched-mobile{display:none;}
  .m-gantt{max-height:72vh;overflow:auto;}
  .m-head{position:sticky;top:0;z-index:5;display:flex;background:var(--panel);box-shadow:0 1px 0 var(--line);}
  .m-corner{width:58px;min-width:58px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink-soft);border-right:1px solid var(--line-strong);}
  .m-hcols{display:flex;flex:1;}
  .m-hcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 2px;font-size:11px;font-weight:700;color:var(--ink);border-right:1px solid var(--line);overflow:hidden;}
  .m-hcol:last-child{border-right:none;}
  .m-hcol .dot{width:10px;height:10px;border-radius:3px;}
  .m-hcol .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .m-body{display:flex;}
  .m-dateaxis{width:58px;min-width:58px;border-right:1px solid var(--line-strong);}
  .m-week{display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid var(--line);font-size:9px;color:var(--ink-soft);line-height:1.1;}
  .m-week .d{font-size:11px;font-weight:700;color:var(--ink);}
  .m-area{position:relative;flex:1;}
  .m-wk{position:absolute;left:0;right:0;background:var(--weekend);pointer-events:none;}
  .m-hline{position:absolute;left:0;right:0;height:1px;background:var(--line);pointer-events:none;}
  .m-vline{position:absolute;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none;}
  .m-today{position:absolute;left:0;right:0;height:2px;background:var(--today);z-index:4;pointer-events:none;}
  .m-bar{position:absolute;border-radius:6px;overflow:hidden;cursor:pointer;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);z-index:2;}
  .m-bar .m-prog{position:absolute;left:0;right:0;top:0;background:rgba(255,255,255,.30);border-bottom:1px solid rgba(255,255,255,.55);}
  .m-bar .m-blabel{position:relative;z-index:1;display:block;padding:3px 5px;font-size:10px;font-weight:700;line-height:1.2;word-break:break-all;text-shadow:0 1px 1px rgba(0,0,0,.25);}

  @media (max-width:520px){
    .sched-pc{display:none;}
    .sched-mobile{display:block;}
    .controls{width:100%;}
    /* 担当名: ラベルの後ろで改行し、項目を1列にそろえる */
    .assignee-config{flex-direction:column;align-items:stretch;gap:8px;}
    .assignee-config .ac-label{width:100%;}
    .ac-item{width:100%;}
    .ac-item input[type="text"]{flex:1 1 auto;width:auto;min-width:0;}
    /* スマホ時のみ凡例の「全体」を担当1〜4の後ろに */
    .legendbar .chip-all{order:9;}
  }

  /* ---- フッター情報 ---- */
  .foot{margin-top:10px;font-size:12px;color:var(--ink-soft);display:flex;gap:16px;flex-wrap:wrap;align-items:center;}

  /* ---- モーダル ---- */
  .overlay{position:fixed;inset:0;background:rgba(26,34,51,.42);display:none;align-items:center;justify-content:center;z-index:50;padding:16px;}
  .overlay.show{display:flex;}
  .modal{background:var(--panel);border-radius:14px;box-shadow:0 24px 60px rgba(26,34,51,.3);width:min(440px,100%);max-height:92vh;overflow:auto;}
  .modal h2{margin:0;padding:18px 20px;font-size:16px;border-bottom:1px solid var(--line);}
  .mbody{padding:18px 20px;display:flex;flex-direction:column;gap:14px;}
  .mbody .field label{font-size:12px;}
  .mbody input,.mbody select,.mbody textarea{width:100%;}
  .two{display:flex;gap:12px;}
  .two>*{flex:1;}
  .rangeval{font-size:13px;font-weight:700;color:var(--c-accent);}
  .mfoot{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--line);gap:10px;}
  .mfoot .right{display:flex;gap:8px;}
  .btn.danger{color:var(--today);border-color:#E9C3C2;}
  .btn.danger:hover{background:#FBEDED;border-color:var(--today);}
  input[type="range"]{accent-color:var(--c-accent);}
  .hint{font-size:11px;color:var(--ink-soft);}
  .daybtn{align-self:flex-start;margin-top:-4px;}