/* ===== マニュアル（PDF） ===== */
.manual-modal-content {
  width: min(1100px, 96vw);
  height: min(86vh, 860px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.manual-frame {
  width: 100%;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.manual-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== 全体スケジュール（Google Sheets 埋め込み） ===== */
.schedule-modal-content {
  width: min(1100px, 96vw);
  height: min(80vh, 780px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.schedule-modal-frame {
  width: 100%;
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.schedule-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* JS will adjust width/height inversely to scale so that the scaled iframe fills the frame */
}

.schedule-open-wrap {
  text-align: center;
  padding: 8px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-btn {
  /* timecode-btn の見た目に寄せつつ、クラス分離 */
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.schedule-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Zoom controls for schedule modal */
/* Header row (title + zoom on the right) */
.schedule-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Right-top minimal zoom controls */
.schedule-zoom-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.schedule-zoom-text {
  font-size: 12px;
  opacity: 0.9;
  white-space: nowrap;
}

.schedule-zoom-btn {
  min-width: 52px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.schedule-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}


/* Make the iframe actually scale */
.schedule-iframe {
  transform-origin: top left;
}
body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          "YuGothic", "Yu Gothic", "Meiryo", sans-serif;
      background: #0c0c0c;
      color: #fafafa;
  }

  .app-wrapper {
      max-width: 480px;
      margin: 0 auto;
      background: #121212;
      min-height: 100vh;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  }

  /* ヘッダー */
  .app-header {
      background: #000000;
      color: #fafafa;
      text-align: center;
      padding: 12px 8px;
      font-weight: 700;
      font-size: 18px;
  }

  /* 演目ナビゲーション行 */
  .piece-nav {
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      align-items: center;
      border-bottom: 1px solid #333333;
      background: transparent;
      padding: 4px 0;
  }

  .piece-nav button {
      flex: 1;
      padding: 8px 6px;
      border: none;
      font-size: 11px;
      opacity: 0.4;
      cursor: default;
      color: #fafafa;
  }

  .piece-nav button:disabled {
      opacity: 0.2;
      cursor: default;
  }

  .piece-nav button span.arrow {
      font-size: 10px;
      margin: 0 2px;
      opacity: 0.3;
  }

  .piece-nav .nav-center {
      flex: 2;
      border-left: 1px solid #333333;
      border-right: 1px solid #333333;
      font-weight: 700;
      font-size: 15px;
      opacity: 1;
      color: #ffffff;
      text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
      padding: 4px 0;
      background: #0c0c0c;
  }

  .nav-center:disabled {
      opacity: 1 !important;
      background: #0c0c0c !important;
      color: #ffffff !important;
  }

  .prev-piece-text,
  .next-piece-text {
      font-size: 11px;
      color: #666666;
      text-align: center;
      padding: 4px 0;
  }

  .arrow-left,
  .arrow-right {
      font-size: 11px;
      color: #666666;
      padding: 0 4px;
  }

  .timing-left,
  .timing-right {
      font-size: 12px;
      padding: 2px 6px;
      text-align: center;
  }

  /* コンテンツ共通 */
  .content {
      padding: 16px 16px 24px;
  }

  /* 演目タイトル */
  .piece-title {
      text-align: center;
      font-size: 28px;
      font-weight: 700;
      margin: 0px 0 4px;
      color: #fafafa;
      padding: 6px 0;
      border-bottom: 2px solid #444444;
  }

  /* 解説ボックス */
  .box {
      border-radius: 14px;
      border: 1px solid #444444;
      background: #1e1e1e;
      padding: 12px 16px;
      margin-top: 8px;
      margin-bottom: 24px;
  }

  .box-title {
      text-align: center;
      font-weight: 600;
      margin-bottom: 6px;
  }

  /* 長文スクロール領域 */
  .scroll-area {
      max-height: 140px;
      /* ここで高さを制限 */
      overflow-y: auto;
      font-size: 13px;
      line-height: 1.6;
  }

  .scroll-area p {
      margin: 0 0 0.5em;
  }

  /* 連絡事項ボックス（色だけ少し変える） */
  .notice-box {
      border-radius: 14px;
      border: 1px solid #444444;
      background: #262626;
      padding: 12px 16px;
      margin: 0 0 24px;
  }

  .notice-title {
      text-align: center;
      font-weight: 600;
      margin-bottom: 8px;
  }

  .notice-body {
      max-height: 100px;
      overflow-y: auto;
      font-size: 13px;
      line-height: 1.6;
  }

  .notice-body strong {
      color: #ff6666;
  }

  #notice-important {
      border-left: 3px solid #ff6666;
      padding-left: 10px;
  }

  #notice-normal {
      border-left: 3px solid #555555;
      padding-left: 10px;
  }

  /* テーブルエリア */
  .status-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
  }

  .status-table th,
  .status-table td {
      border: 1px solid #333333;
      padding: 6px 8px;
      text-align: center;
      color: #e0e0e0;
  }

  .status-table thead th {
      background: #111111;
      color: #fafafa;
      font-weight: 700;
  }

  .status-table tbody th {
      background: #1a1a1a;
      font-weight: 600;
      width: 25%;
      color: #e0e0e0;
  }

  .status-table tbody td {
      background: #1e1e1e;
      height: 28px;
  }

  .sd-id,
  .batt-id {
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 2px;
  }

  .sd-need,
  .batt-need {
      font-size: 11px;
      color: #cccccc;
  }

  /* 下余白 */
  .footer-space {
      height: 16px;
  }

  /* Scrollbar styling for dark mode */
  .scroll-area::-webkit-scrollbar,
  .notice-body::-webkit-scrollbar {
      width: 6px;
  }

  .scroll-area::-webkit-scrollbar-thumb,
  .notice-body::-webkit-scrollbar-thumb {
      background: #444444;
      border-radius: 3px;
  }

  /* ポップアップ（全体注目用） */
  .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.75);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 2000;
  }

  .modal-content {
      background: #1a1a1a;
      border: 1px solid #ff6666;
      padding: 24px;
      width: 80%;
      max-width: 420px;
      border-radius: 12px;
      text-align: center;
      color: #fafafa;
      font-size: 16px;
      line-height: 1.6;
  }

  .checklist-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #ffdddd;
  }

  .checklist-list {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: left;
  }

  .checklist-list li {
      margin: 6px 0;
      padding-left: 20px;
      position: relative;
      font-size: 14px;
  }

  .checklist-list li::before {
      content: "□";
      position: absolute;
      left: 0;
      top: 0;
      color: #ff6666;
      font-size: 16px;
  }

  .modal-close {
      margin-top: 18px;
      font-size: 14px;
      color: #cccccc;
      cursor: pointer;
      padding: 6px 12px;
      border: 1px solid #666666;
      border-radius: 8px;
  }

  .modal-close:hover {
      color: #ffffff;
      border-color: #ffffff;
  }

  /* ===== タイムコード ===== */
  .timecode-btn {
      background: #262626;
      border: 1px solid #555;
      color: #fafafa;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
  }

  .timecode-btn:hover {
      border-color: #ffffff;
  }

  .timecode-display {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 36px;
      font-weight: 700;
      color: #ff6666;
      letter-spacing: 1px;
      margin: 8px 0 24px;
  }

  /* 担当者選択モーダル */
  .operator-select-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.85);
      display: none; /* JSで flex にして表示 */
      justify-content: center;
      align-items: center;
      z-index: 3000;
  }

  .operator-select-box {
      background: #1a1a1a;
      border: 1px solid #888888;
      padding: 28px;
      width: 80%;
      max-width: 420px;
      border-radius: 12px;
      text-align: center;
      color: #fafafa;
      font-size: 16px;
  }

  .operator-select-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 12px;
  }

  .operator-select-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 6px;
  }

  .operator-select-btn {
      display: block;
      width: 100%;
      background: #262626;
      border: 1px solid #555555;
      color: #fafafa;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 15px;
      cursor: pointer;
      margin: 0;
  }

  .operator-select-btn:hover {
      border-color: #ffffff;
  }

  /* ===== タイムコード ===== */
  .timecode-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .timecode-date {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 28px;
      font-weight: 700;
      color: #ff6666;
      letter-spacing: 1px;
        margin-top: 12px;
  }

  .timecode-sync-status {
      font-size: 12px;
      color: #b5b5b5;
      letter-spacing: 0.3px;
      margin-top: 6px;
      padding: 4px 10px;
      border: 1px solid #2f2f2f;
      border-radius: 999px;
      background: #141414;
  }

  .timecode-row {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .timecode-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #ff4444;
      opacity: 0;
      margin-bottom: 18px;
  }

  .timecode-dot.flash {
      animation: dot-flash 150ms ease-out;
  }

  #timecode-sensor {
      font-size: 24px;
      line-height: 1.7;
      margin-top: 16px;
      color: #f3f3f3;
      display: grid;
      gap: 6px;
      text-align: center;
      width: 100%;
      max-width: 520px;
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
  }

  #timecode-sensor div {
      font-weight: 700;
      letter-spacing: 0.3px;
  }

  @keyframes dot-flash {
      from {
          opacity: 1;
      }

      to {
          opacity: 0;
      }
  }

  /* ===== ステータス連動ギミック ===== */
  .status-gimmick {
      display: none;
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid #444444;
      background: #161616;
      color: #fafafa;
      text-align: center;
      animation: gimmick-fade-in 220ms ease-out;
  }

  .status-gimmick-message {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 10px;
      white-space: pre-wrap;
  }

  .status-gimmick-image {
      width: 100%;
      max-width: 360px;
      height: auto;
      border-radius: 12px;
      border: 1px solid #333333;
      display: none;
      margin: 0 auto;
  }

  @keyframes gimmick-fade-in {
      from {
          opacity: 0;
          transform: translateY(6px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }