@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
    :root{
      --topbar-h:56px;
      --botnav-h:66px;
    }
    html,body{
      height:100%;
      min-height: 100%;
      margin:0;
      background:#f1f5f9;
      font-family:'Noto Sans JP',sans-serif;
      overscroll-behavior: none;
    }
    /* ✅ ここ重要：body側はスクロールさせない（#screenだけスクロール） */
    html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

#screen{
  position:fixed;
  inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
  padding:calc(var(--topbar-h) + 10px) 0 calc(var(--botnav-h) + 16px);
}

.page-wrap{
  display:block;
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.detail-grid{
  display:block;
}


    .topbar{
      position:fixed; top:0; left:0; right:0;
      height:var(--topbar-h);
      z-index:1200;
      background:#0f172a;
      color:#fff;
      transform:translateY(0);
      transition:transform .18s ease;
      will-change: transform;
    }
    .topbar.hide{ transform:translateY(-110%); }

    .botnav{
      position:fixed; left:0; right:0; bottom:0;
      height:var(--botnav-h);
      z-index:1200;
      background:#fff;
      border-top:1px solid #e2e8f0;
      display:flex;
      justify-content:space-around;
      align-items:center;
      transform:translateY(0);
      transition:transform .18s ease;
      will-change: transform;
    }
    .botnav.hide{ transform:translateY(110%); }

    .nav-item{
      display:flex; flex-direction:column; align-items:center; gap:4px;
      font-size:10px; font-weight:800; color:#94a3b8;
      cursor:pointer; user-select:none; position:relative;
      width:72px;
    }
    .nav-item.active{color:#0f172a;}
    .nav-item i{font-size:18px;}
    .badge{
      position:absolute; top:-4px; right:10px;
      min-width:18px; height:18px; padding:0 5px;
      border-radius:999px; background:#ef4444; color:#fff;
      font-size:10px; font-weight:900;
      display:flex; align-items:center; justify-content:center;
      border:2px solid #fff;
    }

    /* ===== 進行一覧（テーブル風） ===== */
    .list-table{
  width:100%;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #f1f5f9;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}


    .list-row{
  display:grid;
  grid-template-columns:
    minmax(130px, 1.4fr)
    minmax(140px, 1.6fr)
    86px
    54px;
  align-items:center;
  gap:10px;
  padding:12px 12px;
}

#overviewCutList{
  display:flex;
  flex-direction:column;
  gap:2px;
  width:100%;
  clear:both;
}

    .list-row:last-child{border-bottom:none;}



    .cut-label{
  /* フォントはTailwind/既存のままにする */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

    /* 追加：CUT名編集ボタン */
    .cut-label-wrap{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }
    .cut-edit-btn{
      width:34px;
      height:34px;
      border-radius:12px;
      border:1px solid #e2e8f0;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#0f172a;
      flex:0 0 auto;
      cursor:pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .cut-edit-btn i{ font-size:14px; }

    .status-pill{
  min-width:0;
  overflow:visible;          /* ← hiddenをやめる */
}
.status-pill span{
  overflow:visible;          /* ← 省略させない */
  text-overflow:clip;
  white-space:nowrap;
}

.pill-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.pill-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.pill-chip.orange{
  background:#ffedd5;
  color:#c2410c;
}

.pill-chip.gray{
  background:#f1f5f9;
  color:#64748b;
}

.pill-chip.done{
  background:#fce7f3;
  color:#9d174d;
}

    .dot{width:10px;height:10px;border-radius:999px;background:#94a3b8;flex:0 0 auto;}

    .comment-btn{
      position:relative;
      height:34px;
      border-radius:12px;
      border:1px solid #e2e8f0;
      background:#fff;
      display:flex; align-items:center; justify-content:center;
      gap:6px;
      font-weight:900; color:#0f172a;
      width:78px;
      cursor:pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .comment-btn{ width:78px; }

.trash-btn{
  width:52px;
  height:34px;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#dc2626;
  font-weight:900;
  -webkit-tap-highlight-color: transparent;
}

    .row-tap{
      cursor:pointer;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }

    /* ===== 詳細カード ===== */
    .cut-card{
      background:#fff;
      border:1px solid #f1f5f9;
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 1px 2px rgba(0,0,0,.04);
    }
    .cut-head{
  background:#f8fafc;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
    .cut-head .cut-title{
  flex:1 1 auto;
  min-width:0;
  font-weight:900;
  font-size:22px;
  color:#0f172a;
}

.cut-head .cut-head-setting-btn{
  flex:0 0 auto;
  margin-left:auto !important;
}
    .preview-wrap{
      background:#000;
      height:185px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:hidden;
    }
    .preview-wrap img{width:100%;height:100%;object-fit:contain;display:block;}
    .preview-wrap video{width:100%;height:100%;object-fit:contain;display:block;background:#000;}
    .preview-placeholder{
      color:#94a3b8;font-weight:900;
      display:flex;align-items:center;justify-content:center;
      width:100%;height:100%;
      text-align:center;padding:0 16px;
    }
    .set-img-btn{
      position:absolute; top:10px; right:10px;
      background:rgba(255,255,255,.12); color:#fff;
      font-weight:900; font-size:12px;
      padding:8px 10px; border-radius:12px;
      border:1px solid rgba(255,255,255,.18);
      cursor:pointer;
      display:flex; gap:8px; align-items:center;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }

    /* 参考（下だけ） */
    .ref-row{
      background:#0b1220;
      padding:10px 12px 12px;
      display:flex; gap:10px;
      overflow-x:auto;
      scrollbar-width:none;
    }
    .ref-row::-webkit-scrollbar{display:none;}
    .ref-card{
      flex:0 0 120px;
      height:74px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      overflow:hidden; position:relative;
      cursor:pointer;
      background:#111827;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }
    .ref-card img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;}
    .ref-card video{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;}
    .ref-label{
      position:absolute; left:10px; right:10px; bottom:8px;
      font-size:12px; font-weight:900; color:#fff;
      text-shadow:0 2px 10px rgba(0,0,0,.45);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }

    /* ===== 工程行（ゲージ） ===== */
    .task-row{
      display:grid;
      grid-template-columns: 6.2em 4.6em 1fr 22px;
      gap:6px;
      align-items:center;
      padding:10px 0;
      border-bottom:1px solid #f1f5f9;
    }
    .task-name{
      font-size:13px; font-weight:900; color:#0f172a;
      white-space:nowrap;
      overflow:visible;
      text-overflow:clip;
      user-select:none;
    }
    .staff-select{
      width:100%;
      height:36px;
      border-radius:10px;
      background:#f8fafc;
      border:1px solid #e2e8f0;
      font-size:11px;
      font-weight:800;
      min-width:0;
    }

    .gauge-container{
      position:relative;
      height:40px;
      width:100%;
      background:#f1f5f9;
      border-radius:20px;
      border:1px solid #cbd5e1;
      overflow:hidden;
      touch-action: pan-y;
    }
    .gauge-fill{
      position:absolute;top:0;left:0;height:100%;
      transition:width .02s linear;
      z-index:5;
      will-change: width;
    }
    .gauge-knob{
      position:absolute; top:50%;
      width:12px; height:12px;
      border-radius:999px;
      background:#fff;
      border:2px solid rgba(15,23,42,.28);
      transform:translate(-50%,-50%);
      box-shadow:0 2px 6px rgba(0,0,0,.10);
      z-index:10;
      pointer-events:none;
      opacity:.95;
      will-change: left;
    }
    .gauge-input{
      position:absolute; inset:0;
      width:100%; height:100%;
      opacity:0;
      z-index:20;
      touch-action: pan-y;
      -webkit-appearance:none;
      appearance:none;
    }
    .gauge-text{
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      font-size:12px; font-weight:900;
      z-index:15;
      pointer-events:none;
      user-select:none;
      color:#0f172a;
      text-shadow:0 1px 0 rgba(255,255,255,.75);
    }

    .status-box{
      width:100%;
      height:40px;
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      font-size:12px; font-weight:900;
      cursor:pointer; user-select:none;
      -webkit-tap-highlight-color: transparent;
    }
    .st-none{background:#f1f5f9;color:#94a3b8;}
    .st-doing{background:#fff7ed;color:#f97316;border:1px solid #fed7aa;}
    .st-done{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;}

    /* コメント */
    .comment-box{
      border-top:1px solid #f1f5f9;
      background:#fff;
      padding:12px 12px 14px;
      width:100%;
      overflow:hidden;
    }
    .comment-list{
      max-height:220px;
      overflow-y:auto;
      padding-right:4px;
    }
    .comment-item{
      background:#f8fafc;
      border:1px solid #f1f5f9;
      border-radius:14px;
      padding:10px;
      margin-bottom:8px;
    }
    .comment-row{display:flex;gap:8px;width:100%;align-items:center;}
    .comment-row input{flex:1;min-width:0;}
    .comment-row button{flex-shrink:0;}
    textarea, input, select {outline: none;}
    input, textarea {scroll-margin-bottom: 200px;}

    .modal{
      position:fixed; inset:0;
      background:rgba(0,0,0,.8);
      z-index:2000;
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
    }

    /* ページめくり（詳細内に置く） */
    .pager-inline{
      display:flex;
      justify-content:center;
      margin:10px 0 8px;
    }
    .pager-inner{
      display:flex;
      gap:10px;
      background:rgba(255,255,255,.92);
      border:1px solid #e2e8f0;
      box-shadow:0 10px 30px rgba(0,0,0,.12);
      border-radius:999px;
      padding:8px;
      backdrop-filter: blur(6px);
    }
    .pager-btn{
      width:46px; height:40px;
      border-radius:999px;
      border:1px solid #e2e8f0;
      background:#fff;
      font-weight:900;
      color:#0f172a;
    }

    .backup-modal-inner{
      width:min(520px, 92vw);
      background:#fff;
      border-radius:22px;
      padding:16px;
    }

    /* 設定：削除ボタンのはみ出し対策 */
    .row-grid{
      display:grid;
      grid-template-columns: 1fr auto;
      gap:10px;
      align-items:center;
    }
    .shrink-0{flex-shrink:0;}



  @media (min-width: 900px){
  .detail-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }

  .detail-grid .cut-card{
    margin-bottom:0;
  }

  .list-row{
    grid-template-columns:minmax(180px, 1.4fr) minmax(220px, 2fr) 100px 70px;
    padding:14px 18px;
  }

  .comment-btn{
    width:90px;
  }

  .trash-btn{
    width:60px;
  }
}

.clip-preview-box {
  width: 100%;
  min-height: 180px;
  border-radius: 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.clip-preview-box {
  width: 100%;
  min-height: 120px;
  border-radius: 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
}

.download-btn:hover {
  opacity: 0.9;
}

.gauge-container {
  min-height: 48px;
  padding: 10px 0;
}

.gauge-input {
  height: 44px;
  cursor: pointer;
}

.gauge-input::-webkit-slider-thumb {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
}

.gauge-input::-moz-range-thumb {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
}

.drag-chosen {
  opacity: 0.9;
  transform: scale(1.02);
}

.drag-ghost {
  opacity: 0.35;
}

.list-row {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.pill-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 900;
  white-space: nowrap;
  line-height: 1;
}

.trash-btn {
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================
  一覧：担当者＋工程チップ 最終版
========================= */

.overview-stage-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}

.staff-pill,
.stage-pill {
  min-width: 64px;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
  flex: 0 0 auto;
}

/* スマホ：一覧 さらに10%大きめ版 */
@media (max-width: 640px) {
  .list-row {
    display: grid !important;
    grid-template-columns: minmax(96px, 1fr) 144px 48px 40px !important;
    gap: 6px !important;
    min-height: 61px !important;
    padding: 8px 9px !important;
  }

  .cut-label-wrap {
    gap: 4px !important;
    min-width: 0 !important;
  }

  .cut-label {
    font-size: 18.5px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .status-pill {
    justify-self: start !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .pill-wrap {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .overview-stage-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .staff-pill,
  .stage-pill {
    min-width: 67px !important;
    max-width: 70px !important;
    min-height: 31px !important;
    padding: 6px 8px !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    border-width: 1.6px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .pill-dot {
    width: 6px !important;
    height: 6px !important;
    margin-right: 4px !important;
  }

  .comment-btn {
    width: 48px !important;
    min-width: 48px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    gap: 3px !important;
  }

  .comment-btn i {
    font-size: 14px !important;
  }

  .comment-btn span {
    font-size: 14px !important;
  }

  .trash-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  .trash-btn i {
    font-size: 15px !important;
  }
}

/* =========================
  一覧：PC・タブレット用 担当者＋工程チップ拡大
========================= */
@media (min-width: 641px) {
  .list-row {
    grid-template-columns: minmax(140px, 0.9fr) minmax(320px, 1.9fr) 96px 64px !important;
    min-height: 72px !important;
    padding: 16px 18px !important;
    gap: 14px !important;
  }

 .status-pill {
  justify-self: start !important;
}

.pill-wrap {
  justify-content: flex-start !important;
}

.overview-stage-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

  .cut-label {
    font-size: 22px !important;
    font-weight: 900 !important;
  }

  .staff-pill,
  .stage-pill {
    min-width: 96px !important;
    max-width: 130px !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .pill-dot {
    width: 8px !important;
    height: 8px !important;
    margin-right: 6px !important;
  }

  .comment-btn {
    width: 96px !important;
    min-width: 96px !important;
    height: 42px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }

  .comment-btn i,
  .comment-btn span {
    font-size: 16px !important;
  }

  .trash-btn {
    width: 64px !important;
    min-width: 64px !important;
    height: 42px !important;
    font-size: 18px !important;
    border-radius: 14px !important;
  }

  .trash-btn i {
    font-size: 18px !important;
  }
}

/* =========================
  スマホ：一覧 / PJ管理 / 設定を少し遠く見せる
========================= */
@media (max-width: 640px) {
  .page-zoom-sm {
    transform: scale(0.95);
    transform-origin: top center;
    width: 105.26%;
    margin-left: -2.63%;
  }
}

/* =========================
  PC・タブレット：担当者左 / 工程を右寄せ気味に固定
  ※スマホには影響しない
========================= */
@media (min-width: 641px) {
  .list-table .list-row {
    grid-template-columns: minmax(160px, 1fr) 360px 96px 64px !important;
  }

  .list-table .list-row .status-pill {
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    justify-self: start !important;
    overflow: visible !important;
  }

  .list-table .list-row .pill-wrap {
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
  }

  .list-table .list-row .overview-stage-box {
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    height: 42px !important;
    position: relative !important;
    display: block !important;
    overflow: visible !important;
  }

  .list-table .list-row .overview-staff-slot {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 120px !important;
  }

  .list-table .list-row .overview-stage-slot {
    position: absolute !important;
    left: 160px !important;
    top: 0 !important;
    width: 120px !important;
  }

  .list-table .list-row .staff-pill,
  .list-table .list-row .stage-pill {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 38px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* =========================
  新方式：一覧チップ位置調整
  古い overview-stage-box の影響を受けない
========================= */

/* スマホは今の見た目を維持 */
.overview-chip-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.overview-chip-staff,
.overview-chip-stage {
  flex: 0 0 auto;
}

/* PC・タブレットだけ担当者左、工程を少し右へ */
@media (min-width: 641px) {
  .list-table .list-row {
    grid-template-columns: minmax(160px, 1fr) 360px 96px 64px !important;
  }

  .list-table .list-row .status-pill {
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    justify-self: start !important;
    overflow: visible !important;
  }

  .list-table .list-row .pill-wrap {
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    overflow: visible !important;
  }

  .list-table .list-row .overview-chip-line {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 42px !important;
    overflow: visible !important;
  }

  .list-table .list-row .overview-chip-staff,
  .list-table .list-row .overview-chip-stage {
    flex: 0 0 auto !important;
  }

  .list-table .list-row .staff-pill,
  .list-table .list-row .stage-pill {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 38px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* =========================
  一覧：工程チップの点だけ少し大きく
========================= */
.stage-pill .pill-dot {
  width: 10px !important;
  height: 10px !important;
  margin-right: 7px !important;
}

/* スマホでは少しだけ大きく */
@media (max-width: 640px) {
  .stage-pill .pill-dot {
    width: 8px !important;
    height: 8px !important;
    margin-right: 5px !important;
  }
}

/* =========================
  担当者チップの「・」を完全に消す
========================= */
.staff-pill .pill-dot {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* =========================
  工程チップの「・」を大きくする
========================= */
.stage-pill .pill-dot {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  margin-right: 8px !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

/* スマホでも工程の「・」を大きめにする */
@media (max-width: 640px) {
  .stage-pill .pill-dot {
    width: 12px !important;
    height: 12px !important;
    min-width: 11px !important;
    min-height: 11px !important;
    margin-right: 6px !important;
  }
}

/* =========================
  PC・タブレット：担当者・工程チップを少し大きく
  ※スマホには影響しない
========================= */
@media (min-width: 641px) {
  .list-table .list-row .staff-pill,
  .list-table .list-row .stage-pill {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    height: 42px !important;
    min-height: 42px !important;

    padding: 9px 14px !important;
    border-radius: 15px !important;

    font-size: 17px !important;
    font-weight: 900 !important;
    border-width: 2.2px !important;
    line-height: 1 !important;
  }

  .list-table .list-row .overview-chip-line {
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    gap: 48px !important;
  }

  .list-table .list-row .status-pill,
  .list-table .list-row .pill-wrap {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
  }

  .list-table .list-row {
    grid-template-columns: minmax(160px, 1fr) 390px 96px 64px !important;
  }

  .stage-pill .pill-dot {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin-right: 8px !important;
  }
}

/* =========================
  詳細画面：素材プレビュー内ボタン
========================= */
.preview-wrap {
  position: relative;
}


/* 画面内の「設定」ボタン：サイズ・形は前のまま、色だけ付ける */
.set-img-btn {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #ffffff !important;
}

/* 右下の拡大ボタン */
.expand-img-btn {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 20 !important;

  background: #2563eb !important;
  color: #ffffff !important;

  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;

  padding: 9px 13px !important;
  font-size: 12px !important;
  font-weight: 900 !important;

  display: flex !important;
  align-items: center !important;
  gap: 6px !important;

  box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
}

/* =========================
  素材拡大ビュー
========================= */
.media-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;

  display: none;
  flex-direction: column;

  background: rgba(2, 6, 23, 0.96);
}

.media-viewer-head {
  height: 56px;
  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #ffffff;
  background: rgba(15, 23, 42, 0.96);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.media-viewer-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-viewer-close {
  width: 42px;
  height: 42px;

  border: none;
  border-radius: 999px;

  background: rgba(255,255,255,0.12);
  color: #ffffff;

  font-size: 20px;
  font-weight: 900;
}

.media-viewer-body {
  flex: 1;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 14px;
}

.media-viewer-content {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  border-radius: 12px;
}

.media-viewer-file {
  width: min(92vw, 420px);
  padding: 20px;

  background: #ffffff;
  color: #0f172a;

  border-radius: 20px;
}

/* =========================
  設定ボタン：前のサイズ・形に戻して色だけ付ける
========================= */
.preview-wrap .set-img-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  padding: 8px 10px !important;
  border-radius: 12px !important;

  font-size: 12px !important;
  font-weight: 900 !important;

  background: rgba(15, 23, 42, 0.88) !important;
  color: #ffffff !important;

  border: 1px solid rgba(255,255,255,.18) !important;

  display: flex !important;
  gap: 8px !important;
  align-items: center !important;

  box-shadow: none !important;
}

/* スマホでも設定ボタンは前のサイズのまま */
@media (max-width: 640px) {
  .preview-wrap .set-img-btn {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  .expand-img-btn {
    padding: 8px 11px !important;
    font-size: 11px !important;
  }
}

/* =========================
  アップロード中表示
========================= */
.uploading-box {
  width: 100%;
  padding: 18px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.uploading-spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 4px solid #dbeafe;
  border-top-color: #2563eb;
  animation: cutoria-spin 0.8s linear infinite;
  margin-bottom: 10px;
}

@keyframes cutoria-spin {
  to {
    transform: rotate(360deg);
  }
}

.uploading-preview{
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.96);
  border-radius: 16px;
  overflow: hidden;
  padding: 12px;
  box-sizing: border-box;
}

.uploading-preview-title{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
}

.uploading-preview-name{
  margin-top: 4px;
  max-width: 100%;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  text-align: center;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uploading-preview .uploading-spinner{
  width: 28px;
  height: 28px;
}

.media-video-preview{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  border-radius: 16px;
  display: block;
  object-fit: contain;
}

.media-video-preview{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  border-radius: 16px;
  display: block;
  object-fit: contain;
}

.media-viewer-video{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 130px);
  object-fit: contain;
  background: #000;
}

.media-viewer-actions{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 12px 0;
  box-sizing: border-box;
}

.media-viewer-download{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

/* =========================
  詳細画面：素材プレビュー読み込み表示
========================= */
.media-preview-loading-wrap{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:#000;
}

.media-preview-loading{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  color:#64748b;
}

.media-preview-loading-wrap img,
.media-preview-loading-wrap video{
  position:relative;
  z-index:1;
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center;
  background:#000;
}

/* 素材表示部分を暗い背景に固定 */
.media-preview-loading,
.preview-placeholder,
.uploading-preview,
.clip-preview-box{
  background:#0b1220 !important;
  color:#e2e8f0 !important;
}

.media-preview-loading{
  z-index:2;
}

.media-preview-loading .text-slate-600,
.media-preview-loading .text-slate-500{
  color:#cbd5e1 !important;
}

.preview-placeholder{
  width:100%;
  height:100%;
  min-height:185px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8 !important;
}

.uploading-preview-name,
.clip-preview-box .text-slate-500,
.clip-preview-box .text-slate-700{
  color:#94a3b8 !important;
}

/* =========================
  進行一覧ヘッダー
========================= */
.overview-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-bottom:12px;
}

.overview-title{
  flex:0 0 auto;
  color:#000;
  font-weight:900;
  white-space:nowrap;
  line-height:1;
}

.cut-action-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
  flex-wrap:nowrap;
}

.cut-action-button{
  appearance:none;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  white-space:nowrap;
  font-family:inherit;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.cut-action-button-primary{
  background:#0f172a;
  color:#fff;
}

.cut-action-button-secondary{
  background:transparent;
  color:#334155;
}

.cut-action-button-accent{
  background:#2563eb;
  color:#fff;
}

/* スマホ */
@media (max-width:640px){
  .overview-header{
    gap:6px;
  }

  .overview-title{
    font-size:27px;
  }

  .cut-action-row{
    gap:5px;
  }

  .cut-action-button{
    height:42px;
    padding:0 11px;
    border-radius:12px;
    font-size:12.5px;
  }
}

/* PC・タブレット */
@media (min-width:641px){
  .overview-header{
    gap:14px;
  }

  .overview-title{
    font-size:27px;
  }

  .cut-action-row{
    gap:12px;
  }

  .cut-action-button{
    height:48px;
    padding:0 20px;
    border-radius:14px;
    font-size:15px;
  }
}

/* 進行一覧レイアウトの強制修正 */
[data-tab-view="overview"] .page-wrap{
  display:block !important;
  width:100% !important;
  max-width:1100px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
}

[data-tab-view="overview"] .overview-header{
  display:flex !important;
  position:static !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 12px 0 !important;
  float:none !important;
}

[data-tab-view="overview"] #overviewCutList{
  display:flex !important;
  position:static !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  float:none !important;
  clear:both !important;
}

/* スマホ */
@media (max-width:640px){
  [data-tab-view="overview"] .page-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  [data-tab-view="overview"] .overview-header{
    gap:6px !important;
  }

  [data-tab-view="overview"] .overview-title{
    font-size:24px !important;
  }

  [data-tab-view="overview"] .cut-action-row{
    display:flex !important;
    gap:5px !important;
    margin-left:auto !important;
  }

  [data-tab-view="overview"] .cut-action-button{
    height:40px !important;
    padding:0 10px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }
}

/* PC・タブレット */
@media (min-width:641px){
  [data-tab-view="overview"] .overview-title{
    font-size:27px !important;
  }

  [data-tab-view="overview"] .cut-action-row{
    display:flex !important;
    gap:12px !important;
    margin-left:auto !important;
  }

  [data-tab-view="overview"] .cut-action-button{
    height:48px !important;
    padding:0 20px !important;
    border-radius:14px !important;
    font-size:15px !important;
  }
}

/* =========================
   進行一覧：YouTube風サムネイルレイアウト
========================= */
[data-tab-view="overview"] .overview-media-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0 0 8px;
}

[data-tab-view="overview"] .overview-media-toolbar-label{
  font-size:12px;
  font-weight:900;
  color:#64748b;
  white-space:nowrap;
}

[data-tab-view="overview"] .overview-media-select{
  height:36px;
  min-width:110px;
  padding:0 12px;
  border:1px solid #e2e8f0;
  border-radius:11px;
  background:#fff;
  color:#0f172a;
  font-family:inherit;
  font-size:13px;
  font-weight:900;
  outline:none;
}

[data-tab-view="overview"] #overviewCutList{
  gap:6px !important;
}

[data-tab-view="overview"] .overview-cut-row.list-row{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:center !important;
  width:100% !important;
  min-height:82px !important;
  padding:8px !important;
  gap:10px !important;
  border:0 !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  overflow:hidden !important;
}

[data-tab-view="overview"] .overview-cut-thumb-wrap{
  position:relative;
  flex:0 0 110px;
  width:110px;
  height:62px;
  border-radius:8px;
  overflow:hidden;
  background:#0f172a;
}

[data-tab-view="overview"] .overview-cut-thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#0f172a;
}

[data-tab-view="overview"] .overview-cut-thumb-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:#e2e8f0;
  color:#64748b;
  font-size:10px;
  font-weight:900;
}

[data-tab-view="overview"] .overview-cut-thumb-empty i{
  font-size:18px;
}

[data-tab-view="overview"] .overview-cut-thumb-label{
  position:absolute;
  left:4px;
  bottom:4px;
  max-width:calc(100% - 8px);
  padding:2px 5px;
  border-radius:5px;
  background:rgba(15,23,42,.75);
  color:#fff;
  font-size:9px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

[data-tab-view="overview"] .overview-cut-main{
  flex:1 1 auto;
  min-width:0;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

[data-tab-view="overview"] .overview-cut-title-line{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

[data-tab-view="overview"] .overview-cut-title{
  flex:1 1 auto;
  min-width:0;
  color:#0f172a;
  font-size:18px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

[data-tab-view="overview"] .overview-cut-menu-btn.trash-btn{
  position:relative;
  flex:0 0 30px !important;
  width:30px !important;
  min-width:30px !important;
  height:30px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#475569 !important;
  font-size:18px !important;
}

[data-tab-view="overview"] .overview-cut-menu-btn.trash-btn i{
  font-size:18px !important;
}

[data-tab-view="overview"] .overview-menu-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  min-width:14px;
  height:14px;
  padding:0 3px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:8px;
  font-weight:900;
  line-height:14px;
  text-align:center;
}

[data-tab-view="overview"] .overview-cut-meta{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin-top:6px;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}

[data-tab-view="overview"] .overview-cut-meta-item{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}

[data-tab-view="overview"] .overview-cut-meta-label{
  flex:0 0 auto;
  color:#94a3b8;
  font-size:9px;
  font-weight:900;
}

[data-tab-view="overview"] .overview-cut-meta-value{
  min-width:0;
  max-width:68px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

[data-tab-view="overview"] .overview-cut-stage-dot{
  flex:0 0 7px;
  width:7px;
  height:7px;
  border-radius:999px;
}

[data-tab-view="overview"] .overview-cut-comment-link.comment-btn{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#64748b !important;
  font-size:10px !important;
  gap:3px !important;
}

[data-tab-view="overview"] .overview-cut-comment-link.comment-btn i,
[data-tab-view="overview"] .overview-cut-comment-link.comment-btn span{
  font-size:10px !important;
}

@media (max-width:640px){
  [data-tab-view="overview"] .page-zoom-sm{
    transform:none !important;
    width:100% !important;
    margin-left:0 !important;
  }

  [data-tab-view="overview"] .overview-cut-row.list-row{
    min-height:80px !important;
    padding:6px 7px !important;
    gap:9px !important;
  }

  [data-tab-view="overview"] .overview-cut-thumb-wrap{
    flex-basis:108px;
    width:108px;
    height:61px;
  }

  [data-tab-view="overview"] .overview-cut-title{
    font-size:16px;
  }

  [data-tab-view="overview"] .overview-cut-meta{
    gap:7px;
    margin-top:5px;
  }

  [data-tab-view="overview"] .overview-cut-meta-value{
    max-width:62px;
  }
}

@media (min-width:641px){
  [data-tab-view="overview"] .overview-cut-row.list-row{
    min-height:104px !important;
    padding:10px 12px !important;
    gap:14px !important;
  }

  [data-tab-view="overview"] .overview-cut-thumb-wrap{
    flex-basis:150px;
    width:150px;
    height:84px;
    border-radius:10px;
  }

  [data-tab-view="overview"] .overview-cut-title{
    font-size:21px;
  }

  [data-tab-view="overview"] .overview-cut-meta{
    font-size:13px;
    gap:14px;
  }

  [data-tab-view="overview"] .overview-cut-meta-label{
    font-size:10px;
  }

  [data-tab-view="overview"] .overview-cut-meta-value{
    max-width:150px;
  }
}

/* =========================
   新一覧：担当・工程チップ
========================= */

[data-tab-view="overview"]
.overview-cut-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:7px;
  min-width:0;
}

[data-tab-view="overview"]
.overview-cut-pill-group{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

[data-tab-view="overview"]
.overview-cut-pill-group .pill-chip{
  min-width:0 !important;
  max-width:92px !important;
  min-height:30px !important;
  height:30px !important;

  padding:0 10px !important;

  border-radius:11px !important;
  border-width:1.6px !important;

  font-size:13.5px !important;
  font-weight:900 !important;
  line-height:1 !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* 担当者には点を表示しない */
[data-tab-view="overview"]
.overview-cut-pill-group
.staff-pill .pill-dot{
  display:none !important;
}

/* 工程の点 */
[data-tab-view="overview"]
.overview-cut-pill-group
.stage-pill .pill-dot{
  display:inline-block !important;

  width:10px !important;
  height:10px !important;
  min-width:10px !important;
  min-height:10px !important;

  margin-right:6px !important;

  border-radius:999px !important;

  flex:0 0 auto !important;
}

/* スマホ */
@media (max-width:640px){

  [data-tab-view="overview"]
  .overview-cut-title{
    font-size:17px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group .pill-chip{
    min-height:30px !important;
    height:30px !important;

    max-width:82px !important;

    padding:0 9px !important;

    font-size:13px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group
  .stage-pill .pill-dot{
    width:10px !important;
    height:10px !important;
    min-width:10px !important;
    min-height:10px !important;
  }
}

/* PC・タブレット */
@media (min-width:641px){

  [data-tab-view="overview"]
  .overview-cut-title{
    font-size:21px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group .pill-chip{
    min-height:34px !important;
    height:34px !important;

    max-width:130px !important;

    padding:0 12px !important;

    border-radius:12px !important;

    font-size:15.5px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group
  .stage-pill .pill-dot{
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    min-height:12px !important;
  }
}

/* =========================
   新一覧：担当・工程を小型化
========================= */

[data-tab-view="overview"]
.overview-cut-pill-group{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

[data-tab-view="overview"]
.overview-cut-info-block{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}

[data-tab-view="overview"]
.overview-cut-info-label{
  flex:0 0 auto;
  color:#94a3b8;
  font-size:10px;
  font-weight:900;
  line-height:1;
}

/* 担当・工程の枠 */
[data-tab-view="overview"]
.overview-cut-pill-group .pill-chip{
  min-width:0 !important;
  max-width:76px !important;

  height:25px !important;
  min-height:25px !important;

  padding:0 7px !important;

  border-width:1.3px !important;
  border-radius:9px !important;

  font-size:11.5px !important;
  font-weight:900 !important;
}

/* 工程の点 */
[data-tab-view="overview"]
.overview-cut-pill-group
.stage-pill .pill-dot{
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;

  margin-right:4px !important;
}

/* スマホ */
@media (max-width:640px){

  [data-tab-view="overview"]
  .overview-cut-pill-group{
    gap:7px;
  }

  [data-tab-view="overview"]
  .overview-cut-info-block{
    gap:3px;
  }

  [data-tab-view="overview"]
  .overview-cut-info-label{
    font-size:9px;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group .pill-chip{
    max-width:70px !important;

    height:24px !important;
    min-height:24px !important;

    padding:0 6px !important;

    border-radius:8px !important;

    font-size:11px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group
  .stage-pill .pill-dot{
    width:7px !important;
    height:7px !important;
    min-width:7px !important;
    min-height:7px !important;
  }
}

/* PC・タブレット */
@media (min-width:641px){

  [data-tab-view="overview"]
  .overview-cut-info-label{
    font-size:11px;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group .pill-chip{
    max-width:105px !important;

    height:28px !important;
    min-height:28px !important;

    padding:0 9px !important;

    border-radius:9px !important;

    font-size:13px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group
  .stage-pill .pill-dot{
    width:9px !important;
    height:9px !important;
    min-width:9px !important;
    min-height:9px !important;
  }
}

/* =========================
   一覧：担当・工程ラベルを見やすく
========================= */

[data-tab-view="overview"] .overview-cut-pill-group{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

[data-tab-view="overview"] .overview-cut-info-block{
  display:flex;
  align-items:center;
  gap:5px;
}

/* 「担当」「工程」 */
[data-tab-view="overview"] .overview-cut-info-label{
  color:#64748b;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  flex-shrink:0;
}

/* チップ */
[data-tab-view="overview"] .overview-cut-pill-group .pill-chip{
  min-height:26px !important;
  height:26px !important;

  padding:0 8px !important;

  border-radius:9px !important;

  font-size:12px !important;
  font-weight:900 !important;

  max-width:90px !important;
}

/* 工程の● */
[data-tab-view="overview"] .overview-cut-pill-group .stage-pill .pill-dot{
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  margin-right:5px !important;
}

/* スマホ */
@media (max-width:640px){

  [data-tab-view="overview"] .overview-cut-info-label{
    font-size:11px;
  }

  [data-tab-view="overview"] .overview-cut-pill-group .pill-chip{
    height:24px !important;
    min-height:24px !important;

    font-size:11px !important;

    max-width:72px !important;
  }

}

/* PC */
@media (min-width:641px){

  [data-tab-view="overview"] .overview-cut-info-label{
    font-size:13px;
  }

  [data-tab-view="overview"] .overview-cut-pill-group .pill-chip{
    height:28px !important;
    min-height:28px !important;

    font-size:13px !important;

    max-width:110px !important;
  }

}

/* =========================
   一覧：担当・工程 最終微調整
========================= */

[data-tab-view="overview"] .overview-cut-pill-group{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

[data-tab-view="overview"] .overview-cut-info-block{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
}

[data-tab-view="overview"] .overview-cut-info-label{
  flex:0 0 auto !important;
  color:#64748b !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

/* 担当・工程チップ */
[data-tab-view="overview"] .overview-cut-pill-group .pill-chip{
  min-width:0 !important;
  width:auto !important;

  height:29px !important;
  min-height:29px !important;

  padding:0 9px !important;

  border-radius:10px !important;
  border-width:1.5px !important;

  font-size:12.5px !important;
  font-weight:900 !important;

  max-width:92px !important;
}

/* 工程の点 */
[data-tab-view="overview"]
.overview-cut-pill-group
.stage-pill .pill-dot{
  width:9px !important;
  height:9px !important;
  min-width:9px !important;
  min-height:9px !important;

  margin-right:5px !important;
}

/* コメントアイコンを大きく */
[data-tab-view="overview"]
.overview-cut-comment-link.comment-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  min-width:42px !important;
  height:30px !important;

  padding:0 6px !important;

  color:#475569 !important;
}

[data-tab-view="overview"]
.overview-cut-comment-link.comment-btn i{
  font-size:16px !important;
}

[data-tab-view="overview"]
.overview-cut-comment-link.comment-btn span{
  font-size:13px !important;
  font-weight:900 !important;
}

/* スマホ */
@media (max-width:640px){

  [data-tab-view="overview"] .overview-cut-pill-group{
    gap:11px !important;
  }

  [data-tab-view="overview"] .overview-cut-info-label{
    font-size:10px !important;
  }

  [data-tab-view="overview"] .overview-cut-pill-group .pill-chip{
    height:27px !important;
    min-height:27px !important;

    padding:0 8px !important;

    font-size:12px !important;

    max-width:82px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn i{
    font-size:17px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn span{
    font-size:13px !important;
  }
}

/* PC・タブレット */
@media (min-width:641px){

  [data-tab-view="overview"] .overview-cut-pill-group{
    gap:16px !important;
  }

  [data-tab-view="overview"] .overview-cut-info-label{
    font-size:12px !important;
  }

  [data-tab-view="overview"] .overview-cut-pill-group .pill-chip{
    height:31px !important;
    min-height:31px !important;

    padding:0 10px !important;

    font-size:14px !important;

    max-width:115px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn i{
    font-size:18px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn span{
    font-size:14px !important;
  }
}

/* =========================
   コメント：宛先選択
========================= */

.comment-recipient-picker{
  margin-top:12px;
  margin-bottom:10px;
}

.comment-recipient-label{
  margin-bottom:6px;

  color:#475569;

  font-size:12px;
  font-weight:900;
}

.comment-recipient-selected{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  min-height:30px;

  margin-bottom:7px;
}

.comment-recipient-empty{
  color:#94a3b8;

  font-size:11px;
  font-weight:800;
}

.comment-recipient-chip{
  appearance:none;
  border:1px solid #bfdbfe;

  display:inline-flex;
  align-items:center;

  gap:6px;

  min-height:28px;

  padding:0 9px;

  border-radius:999px;

  background:#eff6ff;
  color:#2563eb;

  font-family:inherit;
  font-size:11px;
  font-weight:900;

  cursor:pointer;
}

.comment-recipient-chip i{
  font-size:10px;
}

.comment-recipient-search-wrap{
  position:relative;

  display:flex;
  align-items:center;

  width:100%;
}

.comment-recipient-search-wrap > i{
  position:absolute;

  left:12px;

  color:#94a3b8;

  font-size:13px;

  pointer-events:none;
}

.comment-recipient-search-wrap input{
  width:100%;
  height:40px;

  padding:
    0
    12px
    0
    35px;

  border:1px solid #e2e8f0;
  border-radius:11px;

  background:#f8fafc;
  color:#0f172a;

  font-family:inherit;
  font-size:12px;
  font-weight:800;
}

.comment-recipient-results{
  max-height:190px;

  margin-top:6px;

  overflow-y:auto;

  border:1px solid #e2e8f0;
  border-radius:12px;

  background:#fff;
}

.comment-recipient-result{
  appearance:none;

  width:100%;

  border:0;
  border-bottom:1px solid #f1f5f9;

  display:flex;
  align-items:center;

  gap:9px;

  padding:8px 10px;

  background:#fff;

  text-align:left;

  font-family:inherit;

  cursor:pointer;
}

.comment-recipient-result:last-child{
  border-bottom:0;
}

.comment-recipient-result:hover{
  background:#f8fafc;
}

.comment-recipient-result.selected{
  background:#eff6ff;
}

.comment-recipient-avatar{
  flex:0 0 30px;

  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:#e2e8f0;
  color:#475569;

  font-size:12px;
  font-weight:900;
}

.comment-recipient-result-text{
  flex:1 1 auto;
  min-width:0;
}

.comment-recipient-result-name{
  color:#0f172a;

  font-size:12px;
  font-weight:900;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.comment-recipient-result-email{
  margin-top:1px;

  color:#94a3b8;

  font-size:9px;
  font-weight:700;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.comment-recipient-check{
  flex:0 0 auto;

  color:#2563eb;

  font-size:13px;
}

.comment-recipient-no-result{
  padding:12px;

  color:#94a3b8;

  font-size:11px;
  font-weight:800;

  text-align:center;
}


/* =========================
   コメント：件数＋未読赤点
========================= */

.cut-comment-button{
  position:relative !important;
}

.cut-comment-icon-wrap{
  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.comment-unread-dot{
  position:absolute;

  top:-4px;
  right:-5px;

  width:8px;
  height:8px;

  border-radius:999px;

  background:#ef4444;

  border:2px solid #fff;

  box-sizing:content-box;
}

.cut-comment-count{
  font-weight:900;
}

/* 一覧のコメントは少し大きめ */
[data-tab-view="overview"]
.overview-cut-comment-link.comment-btn i{
  font-size:17px !important;
}

[data-tab-view="overview"]
.overview-cut-comment-link.comment-btn
.cut-comment-count{
  font-size:13px !important;
}

@media (min-width:641px){

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn i{
    font-size:19px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn
  .cut-comment-count{
    font-size:14px !important;
  }

}

/* =========================
   CUT付箋
========================= */

.cut-sticky-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  font-size:14px;
  line-height:1;
}

.overview-cut-title{
  display:flex;
  align-items:center;
  gap:6px;
}


/* 付箋色選択 */
.cut-sticky-color-grid{
  display:grid;

  grid-template-columns:
    repeat(5, minmax(0,1fr));

  gap:6px;
}

.cut-sticky-color-btn{
  appearance:none;

  min-width:0;

  padding:9px 4px;

  border:1px solid #e2e8f0;
  border-radius:10px;

  background:#fff;
  color:#475569;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:5px;

  font-family:inherit;
  font-size:10px;
  font-weight:900;

  cursor:pointer;
}

.cut-sticky-color-btn.selected{
  border-color:#0f172a;

  box-shadow:
    0 0 0 1px #0f172a;
}

.cut-sticky-color-dot{
  display:block;

  width:18px;
  height:18px;

  border-radius:999px;

  border:
    2px
    solid
    rgba(15,23,42,.08);
}


/* スマホ */
@media (max-width:640px){

  .cut-sticky-icon{
    font-size:13px;
  }

  .cut-sticky-color-grid{
    gap:5px;
  }

  .cut-sticky-color-btn{
    padding:8px 3px;

    font-size:9px;
  }

  .cut-sticky-color-dot{
    width:16px;
    height:16px;
  }

}


/* PC */
@media (min-width:641px){

  .cut-sticky-icon{
    font-size:16px;
  }

}

/* =========================
   進行一覧：現在の比率のまま少し拡大
========================= */

/* スマホ */
@media (max-width:640px){

  [data-tab-view="overview"]
  .overview-cut-row.list-row{
    min-height:88px !important;
    padding:7px 8px !important;
    gap:10px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-thumb-wrap{
    flex:0 0 119px !important;
    width:119px !important;
    height:67px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-title{
    font-size:18px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-meta{
    margin-top:6px !important;
  }

  /* 担当・工程も同比率で少し拡大 */
  [data-tab-view="overview"]
  .overview-cut-pill-group .pill-chip{
    height:29px !important;
    min-height:29px !important;

    padding:0 8px !important;

    font-size:12.5px !important;
  }

  /* コメント */
  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn i{
    font-size:18px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn
  .cut-comment-count{
    font-size:14px !important;
  }
}


/* PC・タブレット */
@media (min-width:641px){

  [data-tab-view="overview"]
  .overview-cut-row.list-row{
    min-height:114px !important;
    padding:11px 13px !important;
    gap:15px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-thumb-wrap{
    flex:0 0 165px !important;
    width:165px !important;
    height:93px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-title{
    font-size:22px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group .pill-chip{
    height:33px !important;
    min-height:33px !important;

    font-size:14px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn i{
    font-size:20px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn
  .cut-comment-count{
    font-size:15px !important;
  }
}


/* =========================
   宛先検索：スマホの自動ズーム防止
========================= */

.comment-recipient-search-wrap input{
  font-size:16px !important;
}

/* iPhone / Safari対策 */
@media (max-width:640px){

  .comment-recipient-search-wrap input{
    font-size:16px !important;
  }

}

/* =========================
   進行一覧：比率そのまま・さらに15%拡大
========================= */

/* スマホ */
@media (max-width:640px){

  [data-tab-view="overview"]
  .overview-cut-row.list-row{
    min-height:101px !important;
    padding:8px 9px !important;
    gap:11px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-thumb-wrap{
    flex:0 0 137px !important;
    width:137px !important;
    height:77px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-title{
    font-size:20px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-meta{
    margin-top:7px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group .pill-chip{
    height:31px !important;
    min-height:31px !important;
    padding:0 9px !important;
    font-size:13px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn i{
    font-size:20px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn
  .cut-comment-count{
    font-size:15px !important;
  }
}


/* PC・タブレット */
@media (min-width:641px){

  [data-tab-view="overview"]
  .overview-cut-row.list-row{
    min-height:131px !important;
    padding:13px 15px !important;
    gap:17px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-thumb-wrap{
    flex:0 0 190px !important;
    width:190px !important;
    height:107px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-title{
    font-size:25px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-pill-group .pill-chip{
    height:36px !important;
    min-height:36px !important;
    font-size:15px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn i{
    font-size:22px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-comment-link.comment-btn
  .cut-comment-count{
    font-size:16px !important;
  }
}


/* 宛先検索：スマホ自動ズーム防止 */
.comment-recipient-search-wrap input{
  font-size:16px !important;
}

/* =========================
   進行一覧：比率そのまま・約16%拡大
========================= */

/* スマホ */
@media (max-width:640px){

  [data-tab-view="overview"]
  .overview-cut-row.list-row{
    min-height:93px !important;
    padding:7px 8px !important;
    gap:10px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-thumb-wrap{
    flex:0 0 125px !important;
    width:125px !important;
    height:70px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-title{
    font-size:18px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-meta{
    margin-top:6px !important;
  }

  .overview-cut-pill-group .pill-chip{
    height:30px !important;
    min-height:30px !important;
    padding:0 8px !important;
    font-size:12.5px !important;
  }

  .overview-cut-comment-link.comment-btn i{
    font-size:19px !important;
  }

  .overview-cut-comment-link.comment-btn
  .cut-comment-count{
    font-size:14px !important;
  }
}


/* PC・タブレット */
@media (min-width:641px){

  [data-tab-view="overview"]
  .overview-cut-row.list-row{
    min-height:120px !important;
    padding:12px 14px !important;
    gap:16px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-thumb-wrap{
    flex:0 0 174px !important;
    width:174px !important;
    height:98px !important;
  }

  [data-tab-view="overview"]
  .overview-cut-title{
    font-size:23px !important;
  }

  .overview-cut-pill-group .pill-chip{
    height:34px !important;
    min-height:34px !important;
    font-size:14px !important;
  }

  .overview-cut-comment-link.comment-btn i{
    font-size:21px !important;
  }

  .overview-cut-comment-link.comment-btn
  .cut-comment-count{
    font-size:15px !important;
  }
}


/* 宛先検索：スマホ自動ズーム防止 */
.comment-recipient-search-wrap input{
  font-size:16px !important;
}