* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: #f5f6f8; color: #222;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---- メニューバー ---- */
.menubar {
  display: flex; align-items: center; gap: 18px;
  padding: 8px 16px; background: #fff; border-bottom: 1px solid #ddd;
}
/* PC: ブランド・月送り・(右端)連携状態+同期 の1行。menubar-top は display:contents で
   子要素を menubar 直下の flex item として並べ、order で「右端」に送る */
.menubar-top { display: contents; }
.brand { order: 0; }
.month-nav { order: 1; }
.menubar-top .menubar-right { order: 2; }
.brand { font-size: 15px; font-weight: 700; white-space: nowrap; }
.month-nav { display: flex; align-items: center; gap: 6px; }
.month-nav button {
  border: 1px solid #ccc; background: #fff; border-radius: 6px;
  padding: 3px 11px; font-size: 14px; cursor: pointer;
}
.month-nav button:hover { background: #f0f0f0; }
#month-label { font-size: 17px; font-weight: 700; min-width: 118px; text-align: center; white-space: nowrap; }
.menubar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.menu-btn {
  border: 1px solid #ccc; background: #fff; border-radius: 6px;
  padding: 4px 12px; font-size: 12px; cursor: pointer; color: #333; white-space: nowrap;
}
.menu-btn:hover { background: #f0f0f0; }
.menu-btn.accent { border-color: #c00; color: #c00; }
.menu-btn.accent:hover { background: #fff0f0; }
.conn-status { color: #666; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.hidden { display: none !important; }

.error-banner {
  background: #fff3cd; color: #7a5c00; border-bottom: 1px solid #e6d48a;
  padding: 5px 16px; font-size: 12px;
}

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; font-size: 13px; padding: 8px 18px;
  border-radius: 20px; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* ---- カレンダー ---- */
main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 16px 12px; }
.legend-row { display: flex; gap: 10px; align-items: center; padding: 2px 0 8px; }
.legend-item { cursor: default !important; }
.legend-item b { font-weight: 700; margin-left: 2px; }

.weekday-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 4px;
}
.weekday { text-align: center; font-size: 11px; color: #555; padding: 2px 0; }
.weekday.sun { color: #c33; }
.weekday.sat { color: #36c; }

.calendar-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(72px, 1fr); gap: 4px;
  overflow-y: auto;
}
.day-cell {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  padding: 4px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
}
.day-cell:hover { border-color: #bbb; }
.day-cell.other-month { background: #f0f1f3; cursor: default; }
.day-cell.other-month .day-num { color: #bbb; }
.day-cell.today { border: 2px solid #f5a623; background: #fffdf7; }
.day-num { font-size: 12px; color: #444; font-weight: 600; }
.day-num.sun { color: #c33; }
.day-num.sat { color: #36c; }
.today .day-num {
  background: #f5a623; color: #fff !important;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ---- エントリチップ（3状態: 淡塗り＋左カラーバー） ---- */
.chip {
  font-size: 12px; line-height: 1.35; padding: 3px 6px; border-radius: 5px;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid transparent;
}
.chip:hover { filter: brightness(0.96); }
/* 予定 = 未確定: 無彩色・点線・淡いグレー塗り */
.chip.planned {
  border: 1px dashed #9aa1a8; border-left: 4px dashed #9aa1a8;
  background: #f2f3f5; color: #444;
}
/* 予約済み = 最も濃く・視線の主役 */
.chip.scheduled {
  border: 1px solid #f0b9b0; border-left: 4px solid #cc0000;
  background: #ffe9e6; color: #8a1500; font-weight: 700;
}
/* 投稿完了 = 淡く沈静（済んだもの） */
.chip.published {
  border: 1px solid #cfe6d8; border-left: 4px solid #7bbf95;
  background: #eef7f1; color: #4a705c;
}
.chip .time { font-weight: 700; margin-right: 3px; }

/* ---- ショート = 色反転（濃色塗り+淡色文字）。バーは左固定・バー色も反転 ---- */
.chip.short { position: relative; padding-right: 20px; }
.chip.short::after {
  content: "📱"; font-size: 9px;
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
}
.chip.short.planned {
  border: 1px dashed #6b7280; border-left: 4px dashed #e3e5e8;
  background: #6b7280; color: #f2f3f5;
}
.chip.short.scheduled {
  border: 1px solid #a30000; border-left: 4px solid #ffd2cb;
  background: #cc0000; color: #fff1ef;
}
.chip.short.published {
  border: 1px solid #3d5f4e; border-left: 4px solid #cfe6d8;
  background: #4a705c; color: #eef7f1;
}

.legend-note { font-size: 11px; color: #777; align-self: center; margin-left: 4px; }

/* ---- 限定公開パネル（凡例の下に独立した段。インディゴ系、濃色=ショートのルール共通） ---- */
.unlisted-panel {
  display: flex; flex-direction: column; gap: 6px;
  background: #f3f5fd; border: 1px solid #d6dcf3; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px;
}
.unlisted-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unlisted-label { font-size: 12px; font-weight: 700; color: #38439c; white-space: nowrap; }
.unlisted-label b { margin-left: 2px; }
.unlisted-hint { font-size: 11px; color: #6b74b0; }
.unlisted-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.unlisted {
  flex: 0 0 auto; max-width: 320px; cursor: grab;
  border: 1px solid #c3cbee; border-left: 4px solid #5b6bd6;
  background: #fff; color: #38439c;
}
.chip.short.unlisted {
  border: 1px solid #38439c; border-left: 4px solid #dfe4fa;
  background: #5b6bd6; color: #eef1fb;
}
/* 予約済みチップのドラッグ中: パネルを「戻し先」として必ず表示しヒントを出す */
.unlisted-drop-hint { display: none; font-size: 11px; color: #38439c; white-space: nowrap; }
body.dragging-scheduled .unlisted-panel { display: flex !important; }
body.dragging-scheduled .unlisted-hint { display: none; }
body.dragging-scheduled .unlisted-drop-hint { display: inline; }
.unlisted-panel.drop-target {
  outline: 2px dashed #5b6bd6; outline-offset: 2px; background: #e8ecfb;
}

/* ---- 予定と予約動画の食い違い確認 ---- */
.chip.confirm { box-shadow: 0 0 0 2px #1a73e8; }
.confirm-block { background: #e8f0fe; border: 1px solid #1a73e8; border-radius: 6px;
  padding: 8px 10px; margin-bottom: 10px; font-size: 13px; }
.confirm-block p { margin: 6px 0; }
.confirm-hint { margin-left: 8px; color: #555; font-size: 12px; }

/* 予約済み(連携)チップ: ドラッグ可能の手がかり */
.chip.scheduled.draggable-scheduled { cursor: grab; }
.chip.scheduled.draggable-scheduled:active { cursor: grabbing; }

/* ---- D&D ドロップ先ハイライト ---- */
.day-cell.drop-target { outline: 2px dashed #4a90d9; outline-offset: -2px; background: #f0f7ff; }

/* ---- 連携済みブロックのアクション ---- */
.yt-actions { display: flex; gap: 8px; margin-top: 8px; }
.yt-actions a.menu-btn { text-decoration: none; display: inline-block; }

/* ---- ダイアログ ---- */
dialog {
  border: none; border-radius: 12px; padding: 20px; width: 380px; max-width: 92vw;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h2 { font-size: 16px; margin-bottom: 12px; }
dialog label { display: block; font-size: 12px; color: #555; margin-bottom: 10px; }
dialog input:not([type="checkbox"]), dialog textarea, dialog select {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px;
  border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-family: inherit;
}
.toggle-label { display: flex !important; align-items: center; gap: 6px; font-size: 13px !important; }
.toggle-label input { width: auto !important; display: inline !important; margin: 0 !important; }
.yt-note { font-size: 12px; color: #666; background: #f5f5f5; border-radius: 6px; padding: 8px; margin-bottom: 8px; }
#yt-link { font-size: 13px; color: #06c; }
.dialog-buttons { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.dialog-buttons .spacer { flex: 1; }
.dialog-buttons button {
  border: 1px solid #ccc; background: #fff; border-radius: 6px;
  padding: 6px 14px; font-size: 13px; cursor: pointer;
}
.dialog-buttons button.primary { background: #c00; border-color: #c00; color: #fff; }
.dialog-buttons button.danger { border-color: #c00; color: #c00; }

/* ---- 日付セルのドット・アジェンダ・追加ボタン（PCでは非表示。スマホ用は下の @media） ---- */
.dots, .fab-add, .week-view, .week-strip, .view-toggle { display: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.planned { background: #9aa1a8; }
.dot.scheduled { background: #cc0000; }
.dot.published { background: #7bbf95; }
.dot.short { box-shadow: 0 0 0 1.5px #222; }
.dot.confirm { outline: 2px solid #1a73e8; outline-offset: 1px; }

/* ================= スマホ表示 (幅700px以下) =================
   月カレンダーは「日付+ドット」の小さな表にして、日付タップで下の一覧にジャンプ。
   一覧のチップは大きく・折り返して読める。ドラッグ操作はスマホでは使えないので
   日付変更などは動画をタップ→編集ダイアログで行う。 */
@media (max-width: 700px) {
  html, body { height: 100dvh; }
  body { font-size: 15px; padding-bottom: env(safe-area-inset-bottom); }

  .menubar { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 10px;
    padding-top: calc(8px + env(safe-area-inset-top)); }
  .menubar-top { display: flex; align-items: center; gap: 8px; }
  .brand { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .menubar-right { margin-left: 0; gap: 6px; }
  .conn-status { display: none; }
  .menu-btn { padding: 7px 10px; font-size: 13px; }
  .month-nav { gap: 6px; }
  .month-nav button { padding: 8px 12px; font-size: 16px; }
  #today-btn { font-size: 13px; padding: 8px 10px; }
  #month-label { font-size: 16px; min-width: 0; flex: 1; }

  main { padding: 6px 8px 8px; }
  .legend-row { flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
  .legend-item { font-size: 11px; padding: 2px 6px; }
  .legend-note { display: none; }

  .unlisted-panel { padding: 8px; margin-bottom: 6px; }
  .unlisted-hint, .unlisted-drop-hint { display: none !important; }
  .unlisted-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .chip.unlisted { max-width: 70vw; padding: 7px 9px; font-size: 13px; }

  .weekday-row { gap: 2px; }
  .calendar-grid {
    flex: 0 0 auto; grid-auto-rows: 46px; gap: 2px; overflow: visible;
  }
  .day-cell { padding: 3px 2px; align-items: center; gap: 2px; border-radius: 6px; }
  .day-cell .chip { display: none; }
  .day-cell .dots { display: flex; gap: 2px 3px; flex-wrap: wrap; justify-content: center;
    align-items: center; font-size: 9px; line-height: 9px; color: #666; max-width: 100%; }
  /* 予約中 = 赤い時刻ラベル（月表示でどこに予約があるか一目で分かる） */
  .mark-sched { background: #cc0000; color: #fff; font-size: 9px; font-weight: 700;
    line-height: 1; padding: 2px 3px; border-radius: 4px; white-space: nowrap; }
  .mark-sched.short { background: #fff; color: #cc0000; border: 1.5px solid #cc0000; padding: 1px 2px; }
  .mark-sched.confirm { outline: 2px solid #1a73e8; outline-offset: 1px; }
  .calendar-grid { grid-auto-rows: 52px; }

  /* 表示切替 月/週 */
  .view-toggle { display: inline-flex; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
  .view-toggle button { border: none; background: #fff; padding: 8px 12px; font-size: 14px; color: #333; }
  .view-toggle button + button { border-left: 1px solid #ccc; }
  .view-toggle button.active { background: #c00; color: #fff; }

  /* 週表示: 1日=1行（横長）、タイトルと投稿時間がそのまま読める */
  body.view-week .weekday-row, body.view-week .calendar-grid { display: none; }
  body.view-week .week-view { display: block; flex: 1 1 0; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 76px; }
  .week-month-head { position: sticky; top: 0; z-index: 2; background: #f5f6f8;
    font-size: 15px; font-weight: 700; color: #333; padding: 10px 4px 6px; }
  .week-row { display: flex; gap: 8px; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
    padding: 8px; margin-bottom: 6px; min-height: 56px; }
  .week-row.today { border: 2px solid #f5a623; background: #fffdf7; }
  .week-date { flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
  .week-dow { font-size: 11px; color: #555; }
  .week-num { font-size: 18px; font-weight: 700; color: #333; line-height: 1.2; }
  .week-date.sun .week-dow, .week-date.sun .week-num { color: #c33; }
  .week-date.sat .week-dow, .week-date.sat .week-num { color: #36c; }
  .week-date.other-month .week-num { color: #aaa; }
  .week-row.today .week-num { background: #f5a623; color: #fff; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 15px; }
  .week-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .week-body .chip { display: block; white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 14px; line-height: 1.45; padding: 9px 10px; }
  .week-body .chip.short { padding-right: 26px; }
  .week-body .chip.short::after { font-size: 12px; right: 7px; }
  .week-body .chip.scheduled .time { font-size: 15px; margin-right: 6px; }
  .week-add { align-self: flex-start; border: 1px dashed #bbb; background: #fff; border-radius: 14px;
    padding: 4px 10px; font-size: 12px; color: #666; }
  .day-cell.selected { border: 2px solid #1a73e8; background: #f0f6ff; }
  .day-cell.today.selected { border-color: #1a73e8; }

  .calendar-grid { flex: 0 0 auto; overflow: visible; }
  /* 月グリッドの下: 選んだ日の週だけ（タップで入れ替わる） */
  .week-strip { display: block; flex: 1 1 0; min-height: 0; overflow-y: auto; margin-top: 8px;
    -webkit-overflow-scrolling: touch; padding-bottom: 76px; }
  .week-strip-head { font-size: 13px; font-weight: 700; color: #555; padding: 2px 4px 6px; }
  .week-row.selected { border: 2px solid #1a73e8; }
  .week-row.today.selected { border-color: #1a73e8; }
  body.view-week .week-strip { display: none; }
  .fab-add {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30;
    width: 56px; height: 56px; border-radius: 50%; border: none;
    background: #c00; color: #fff; font-size: 30px; line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
  }

  /* ダイアログ: 画面幅いっぱい・タップしやすく・iOSの入力ズーム防止(16px) */
  dialog { width: 94vw; max-height: 92vh; overflow-y: auto; padding: 16px; }
  dialog input:not([type="checkbox"]), dialog textarea, dialog select { font-size: 16px; padding: 10px; }
  .toggle-label { font-size: 14px !important; padding: 4px 0; }
  .dialog-buttons { flex-wrap: wrap; gap: 8px; }
  .dialog-buttons button { flex: 1 1 auto; }
  .dialog-buttons .spacer { display: none; }
  dialog input:disabled { background: #f3f3f3; color: #777; }
  .dialog-buttons button { padding: 10px 16px; font-size: 14px; }
  .confirm-block { font-size: 14px; }
  .toast { bottom: 90px; max-width: 90vw; text-align: center; }
}