/* ===========================================
   こまこまアニメメーカー CSS
   プレフィックス: komakoma-
   カラーコンセプト: 簡単！ICT活用 統一カラー
   =========================================== */

/* --- CSS変数定義 --- */
.komakoma-root {
  --base: #FFFFFF !important;
  --base-light: #FAFAFA !important;
  --base-dark: #F5F5F5 !important;
  --main: #1e3a5f !important;
  --main-light: #2d5a8f !important;
  --main-dark: #0f1e3a !important;
  --accent: #d4af37 !important;
  --accent-light: #f4cf5f !important;
  --accent-dark: #b8941f !important;
  --text: #2C3E50 !important;
  --text-light: #7F8C8D !important;
  --border: #E8E8E8 !important;
  --shadow: 0 4px 20px rgba(30, 58, 95, 0.1) !important;
  --shadow-hover: 0 8px 30px rgba(30, 58, 95, 0.15) !important;
  --view-max: 640px !important;
  --panel-min: 320px !important;
}

/* --- リセット --- */
.komakoma-root * {
  box-sizing: border-box !important;
}
.komakoma-root {
  font-family: "BIZ UDGothic", "Hiragino Sans", "Meiryo", sans-serif !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 50%, #F0F2F5 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 10px !important;
  color: var(--text) !important;
}

/* --- ヘッダー --- */
.komakoma-header {
  background: var(--main) !important;
  border-top: 3px solid var(--accent) !important;
  border-bottom: 3px solid var(--accent) !important;
  border-radius: 20px !important;
  padding: clamp(12px, 2vh, 20px) clamp(20px, 4vw, 40px) !important;
  margin-top: 20px !important;
  box-shadow: 0 4px 20px rgba(30, 58, 95, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  width: fit-content !important;
}
.komakoma-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 200% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15), transparent) !important;
  animation: komakoma-shine 3s infinite !important;
}
@keyframes komakoma-shine {
  0% { left: -100%; }
  100% { left: 100%; }
}
.komakoma-header-title {
  color: #ffffff !important;
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* --- レイアウト切り替えボタン --- */
.komakoma-layout-controls {
  width: min(1220px, 98vw) !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}
.komakoma-layout-btn {
  border: 2px solid var(--border) !important;
  background: var(--base) !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.12) !important;
  transition: all 0.3s ease !important;
  font-family: inherit !important;
}
.komakoma-layout-btn:hover {
  background: var(--base-light) !important;
  border-color: var(--accent) !important;
}
.komakoma-layout-btn.active {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%) !important;
  border-color: var(--accent-dark) !important;
  color: var(--main-dark) !important;
}

/* --- エラーメッセージ --- */
.komakoma-error {
  max-width: 600px !important;
  background: #fff5f5 !important;
  border: 2px solid #e74c3c !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin: 20px !important;
  text-align: left !important;
}
.komakoma-error h3 {
  color: #e74c3c !important;
  margin-top: 0 !important;
}
.komakoma-error ul {
  text-align: left !important;
  line-height: 1.8 !important;
}
.komakoma-error-tip {
  background: var(--base) !important;
  padding: 10px !important;
  border-radius: 8px !important;
  margin-top: 15px !important;
  border: 1px solid var(--border) !important;
}

/* --- ワークスペース --- */
.komakoma-workspace {
  margin-top: 20px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: min(1220px, 98vw) !important;
  position: relative !important;
}

/* --- パネル共通 --- */
.komakoma-panel {
  background: var(--base) !important;
  border: 2px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 100% !important;
  position: relative !important;
  box-shadow: var(--shadow) !important;
}
.komakoma-panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent)) !important;
  border-radius: 16px 16px 0 0 !important;
  z-index: 1 !important;
}

.komakoma-playback-panel,
.komakoma-camera-panel {
  flex: 1 1 0 !important;
  min-width: var(--panel-min) !important;
}
.komakoma-camera-panel {
  align-items: stretch !important;
  position: relative !important;
}

/* --- パネルタイトル --- */
.komakoma-panel-title {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--main) !important;
  text-align: center !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* --- パネルヘッダー --- */
.komakoma-panel-header {
  min-height: 34px !important;
  margin: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}

/* 枚数カウンター */
.komakoma-frame-counter {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  font-size: 14px !important;
  color: var(--main-dark) !important;
  font-weight: 800 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(212, 175, 55, 0.2) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  user-select: none !important;
}

/* --- キャンバスコンテナ --- */
.komakoma-canvas-container {
  width: 100% !important;
  max-width: var(--view-max) !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  background: var(--base) !important;
  border: 3px dashed var(--accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  position: relative !important;
  touch-action: pan-y !important;
  border-radius: 12px !important;
}
.komakoma-canvas-container video,
.komakoma-canvas-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- カメラ切替ボタン --- */
.komakoma-camera-toggle-overlay {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(212, 175, 55, 0.9) !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  z-index: 100 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s !important;
}
.komakoma-camera-toggle-overlay:hover {
  background: rgba(244, 207, 95, 1) !important;
  transform: scale(1.1) !important;
}
.komakoma-camera-toggle-overlay:active {
  transform: scale(0.95) !important;
}
.komakoma-camera-toggle-overlay.active {
  background: rgba(184, 148, 31, 0.95) !important;
}

/* --- サイドバー --- */
.komakoma-sidebar {
  width: 100% !important;
  background: var(--base) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  max-width: var(--view-max) !important;
  margin: 0 auto !important;
}

/* --- ミニモニター --- */
.komakoma-mini-monitor {
  width: 100% !important;
  max-width: var(--view-max) !important;
  aspect-ratio: 16 / 9 !important;
  border: 3px dashed var(--accent) !important;
  border-radius: 12px !important;
  background: var(--base-dark) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: var(--text-light) !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 0 !important;
  user-select: none !important;
  touch-action: pan-y !important;
}
.komakoma-mini-monitor img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- スライダー --- */
.komakoma-frame-slider {
  width: 100% !important;
  max-width: var(--view-max) !important;
  accent-color: var(--accent) !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  height: 28px !important;
}

/* --- コントロールエリア --- */
.komakoma-side-controls {
  width: 100% !important;
  max-width: var(--view-max) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto auto 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 0 !important;
}
.komakoma-slider-item {
  width: 100% !important;
}
.komakoma-slider-item .komakoma-frame-slider {
  width: 100% !important;
  margin: 0 !important;
}

.komakoma-main-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: var(--view-max) !important;
  margin: 0 auto !important;
  gap: 8px !important;
}

.komakoma-bottom-controls {
  margin-top: 0 !important;
  width: 100% !important;
  max-width: var(--view-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  justify-content: center !important;
  gap: 14px !important;
}

/* --- ボタン共通 --- */
.komakoma-control-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: 72px !important;
}
.komakoma-ctrl-btn {
  width: 64px !important;
  height: 64px !important;
  border-radius: 14px !important;
  border: none !important;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%) !important;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;
  cursor: pointer !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: bold !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.komakoma-ctrl-btn svg {
  pointer-events: none !important;
}
.komakoma-ctrl-btn:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4) !important;
}
.komakoma-ctrl-btn:active {
  transform: scale(0.95) !important;
}
.komakoma-control-label {
  font-size: 13px !important;
  color: var(--text) !important;
  text-align: center !important;
  margin-top: 0 !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

/* --- サムネイル --- */
.komakoma-thumbnail-wrapper {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  width: 90% !important;
  max-width: 660px !important;
  border-top: 3px solid var(--accent) !important;
  border-bottom: 3px solid var(--accent) !important;
  padding: 10px 0 !important;
  overflow-x: auto !important;
}
.komakoma-thumbnails {
  display: flex !important;
  gap: 5px !important;
  padding: 5px !important;
}
.komakoma-thumb-container {
  position: relative !important;
  flex-shrink: 0 !important;
}
.komakoma-thumb {
  width: 60px !important;
  height: 60px !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
  display: block !important;
}
.komakoma-thumb:hover {
  border-color: var(--accent) !important;
}
.komakoma-thumb.selected {
  border-color: var(--main) !important;
  border-width: 3px !important;
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.2) !important;
}
.komakoma-delete-button {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 24px !important;
  height: 24px !important;
  background: #e74c3c !important;
  color: white !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  z-index: 10 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}
.komakoma-thumb-container:hover .komakoma-delete-button,
.komakoma-thumb-container.selected .komakoma-delete-button {
  display: flex !important;
}
.komakoma-delete-button:hover {
  background: #c0392b !important;
  transform: scale(1.1) !important;
}

/* --- ローディング --- */
.komakoma-loading-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.7) !important;
  display: none !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 1000 !important;
}
.komakoma-loading-overlay.active {
  display: flex !important;
}
.komakoma-loading-content {
  background: var(--base) !important;
  padding: 30px !important;
  border-radius: 16px !important;
  text-align: center !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}
.komakoma-spinner {
  border: 4px solid var(--base-dark) !important;
  border-top: 4px solid var(--accent) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  animation: komakoma-spin 1s linear infinite !important;
  margin: 0 auto 10px !important;
}
@keyframes komakoma-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==================================
   レイアウト切り替え
   ================================== */

/* equal: 同じサイズ */
.komakoma-workspace[data-layout="equal"] .komakoma-playback-panel,
.komakoma-workspace[data-layout="equal"] .komakoma-camera-panel {
  flex: 1 1 0 !important;
}

/* focus-camera: 撮影を大きく */
.komakoma-workspace[data-layout="focus-camera"] {
  display: block !important;
  width: min(1220px, 98vw) !important;
}
.komakoma-workspace[data-layout="focus-camera"] .komakoma-camera-panel {
  max-width: min(1220px, 98vw) !important;
  margin: 0 auto !important;
}

/* focus-playback: 再生を大きく */
.komakoma-workspace[data-layout="focus-playback"] {
  display: block !important;
  width: min(1220px, 98vw) !important;
}
.komakoma-workspace[data-layout="focus-playback"] .komakoma-playback-panel {
  max-width: min(1220px, 98vw) !important;
  margin: 0 auto !important;
}

/* ==================================
   PiP（ミニプレイヤー）モード
   ================================== */
.komakoma-workspace[data-layout="focus-camera"] .komakoma-playback-panel,
.komakoma-workspace[data-layout="focus-playback"] .komakoma-camera-panel {
  position: fixed !important;
  width: 320px !important;
  height: auto !important;
  max-width: none !important;
  z-index: 100 !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  cursor: default !important;
}
/* PiPではアクセントライン非表示 */
.komakoma-workspace[data-layout="focus-camera"] .komakoma-playback-panel::before,
.komakoma-workspace[data-layout="focus-playback"] .komakoma-camera-panel::before {
  display: none !important;
}

/* PiP位置 */
.komakoma-workspace[data-pip-pos="br"][data-layout="focus-camera"] .komakoma-playback-panel,
.komakoma-workspace[data-pip-pos="br"][data-layout="focus-playback"] .komakoma-camera-panel {
  right: 16px !important; bottom: 16px !important; left: auto !important; top: auto !important;
}
.komakoma-workspace[data-pip-pos="tr"][data-layout="focus-camera"] .komakoma-playback-panel,
.komakoma-workspace[data-pip-pos="tr"][data-layout="focus-playback"] .komakoma-camera-panel {
  right: 16px !important; top: 16px !important; left: auto !important; bottom: auto !important;
}
.komakoma-workspace[data-pip-pos="bl"][data-layout="focus-camera"] .komakoma-playback-panel,
.komakoma-workspace[data-pip-pos="bl"][data-layout="focus-playback"] .komakoma-camera-panel {
  left: 16px !important; bottom: 16px !important; right: auto !important; top: auto !important;
}
.komakoma-workspace[data-pip-pos="tl"][data-layout="focus-camera"] .komakoma-playback-panel,
.komakoma-workspace[data-pip-pos="tl"][data-layout="focus-playback"] .komakoma-camera-panel {
  left: 16px !important; top: 16px !important; right: auto !important; bottom: auto !important;
}

/* PiPコーナー切替ボタン */
.komakoma-pip-corner-switch {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  border: 2px solid rgba(255,255,255,0.95) !important;
  background: rgba(212, 175, 55, 0.95) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  z-index: 999 !important;
  display: none !important;
  user-select: none !important;
  font-size: 14px !important;
  padding: 0 !important;
}
.komakoma-workspace[data-layout="focus-camera"] .komakoma-playback-panel .komakoma-pip-corner-switch,
.komakoma-workspace[data-layout="focus-playback"] .komakoma-camera-panel .komakoma-pip-corner-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* PiP内部の不要UI非表示 */
.komakoma-workspace[data-layout="focus-camera"] .komakoma-playback-panel .komakoma-panel-title,
.komakoma-workspace[data-layout="focus-playback"] .komakoma-camera-panel .komakoma-panel-title,
.komakoma-workspace[data-layout="focus-camera"] .komakoma-playback-panel .komakoma-panel-header,
.komakoma-workspace[data-layout="focus-playback"] .komakoma-camera-panel .komakoma-panel-header {
  display: none !important;
}
.komakoma-workspace[data-layout="focus-camera"] .komakoma-playback-panel .komakoma-side-controls,
.komakoma-workspace[data-layout="focus-camera"] .komakoma-playback-panel .komakoma-frame-slider,
.komakoma-workspace[data-layout="focus-playback"] .komakoma-camera-panel .komakoma-bottom-controls,
.komakoma-workspace[data-layout="focus-playback"] .komakoma-camera-panel .komakoma-camera-toggle-overlay {
  display: none !important;
}

/* PiP映像エリアだけ表示 */
.komakoma-workspace[data-layout="focus-camera"] .komakoma-playback-panel .komakoma-mini-monitor,
.komakoma-workspace[data-layout="focus-playback"] .komakoma-camera-panel .komakoma-canvas-container {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* パネル内のモニターサイズ揃え */
.komakoma-camera-panel .komakoma-canvas-container,
.komakoma-playback-panel .komakoma-mini-monitor {
  width: 100% !important;
  max-width: var(--view-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==================================
   レスポンシブ
   ================================== */
@media (max-width: 720px) {
  .komakoma-side-controls {
    grid-template-columns: auto auto !important;
  }
  .komakoma-slider-item {
    grid-column: 1 / -1 !important;
  }
  .komakoma-side-controls .komakoma-control-item {
    justify-self: center !important;
  }
}

@media (max-width: 700px) {
  .komakoma-workspace {
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .komakoma-playback-panel,
  .komakoma-camera-panel,
  .komakoma-sidebar {
    width: 95vw !important;
    max-width: 640px !important;
  }
  .komakoma-side-controls {
    width: 100% !important;
  }
  .komakoma-canvas-container {
    width: 95vw !important;
    max-width: var(--view-max) !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  .komakoma-header-title {
    font-size: 20px !important;
  }
  .komakoma-ctrl-btn {
    width: 60px !important;
    height: 60px !important;
    font-size: 16px !important;
  }
}