@charset "utf-8";
/* ぱたぱたアニメ館 */
/* --- 横揺れ防止とCSSリセット --- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  font-family: 'Inter', 'Meiryo', sans-serif;
  background-color: #f7f7f7;
/* 画面下固定メニューの高さ分、bodyの下部に余白を設定 (約150px) */
  padding-bottom: 150px; 
}
*, *::before, *::after {
  box-sizing: border-box;
}
/* --- ヘッダーとコンテナ --- */
header { 
	padding: 15px; 
	text-align: center; 
	background: #2c3e50; 
	color: #fff; 
	font-size: 22px; 
	font-weight: bold;
}
.canvas-wrap {
	width:100%; 
	margin:0; 
	padding:10px; 
	background: #f0f0f0;
	}       
#canvas { 
  border: 2px solid #3498db; 
  display: block; 
  margin: 10px auto; 
  touch-action: none; 
  cursor: move; 
  max-width: 100%; 
  height: auto; 
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#imageToCrop { 
	display: none; 
	max-width: 100%; 
	height: auto; 
	margin: 10px auto; 
	border: 2px solid #e74c3c; 
	border-radius: 8px; 
}

/* --- [下部固定コントロールエリア] --- */
.controls-area {
  position: fixed; 
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff; 
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000; 
/* メニュー全体の高さを調整 (通常モード) */
  height: 140px; 
  max-height: 140px;
  transition: height 0.3s; /* 高さ変更をアニメーション */
  overflow: hidden; 
/* ⭐️ iOSなどのセーフエリアに対応 */
  padding-bottom: env(safe-area-inset-bottom);
}
        
/* 横スクロールさせるコンテナ */
#bottomControls {
  display: flex; 
  overflow-x: scroll; 
  flex-wrap: nowrap; 
  padding: 10px 40px; 
  gap: 15px; 
  -webkit-overflow-scrolling: touch; 
  height: 100%; 
  align-items: flex-start;
}

/* スクロール矢印のスタイル（デフォルト非表示） */
.scroll-arrow {
  position: absolute;
  top: 0;
  width: 35px;
  height: 100%; 
  z-index: 1001; 
  background: rgba(44, 62, 80, 0.85); 
  color: white;
  border: none;
  font-size: 28px;
  cursor: pointer;
  display: none; 
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.3s;
  line-height: 0; 
}

/* PCでのみ矢印を表示 */
@media (min-width: 768px) {
  .scroll-arrow {
    display: flex;
  }
}
.scroll-arrow:hover {
  background: rgba(52, 152, 219, 0.9);
}
.scroll-arrow.left {
  left: 0;
  border-radius: 0 5px 5px 0;
}
.scroll-arrow.right {
  right: 0;
  border-radius: 5px 0 0 5px;
}

/* 各コントロール項目 */
.control-item {
  flex-shrink: 0; 
  width: 300px; 
  height: 100%;
  padding: 0 10px;
  border-right: 1px solid #eee; 
  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
}

/* ファイル入力のスタイル */
.control-item.file-input {
  width: 300px; 
  padding-top: 5px;
  justify-content: center;
}
.control-item.file-input input[type="file"] {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  height: 40px;
  padding-left: 0;
}
/* 注意書きブロックのスタイル */
.control-item.note-block {
  width: 300px; 
  border-right: none;
  padding-right: 15px;
  justify-content: flex-start;
  padding-top: 10px;
}
.control-item.note-block .note {
  font-size: 12px;
  white-space: normal;
  border: 1px dashed #e74c3c;
  padding: 5px;
  border-radius: 4px;
  height: 90px; /* 高さを揃える */
}
        
/* --- [項目別スタイル] --- */
/* トリミングと文字入力 (このブロックの高さ: 120px) */
.control-item.fit-height {
  height: 120px; 
}
/* 1. トリミングボタン群 (通常モードではボタン1つを100pxにするため、paddingを調整) */
.control-item.trim-block {
  justify-content: flex-start; 
  padding-top: 5px; 
}
/* ⭐️ Normal Mode: 「トリミングの開始」ボタンの単独表示時 */
.control-item.trim-block:not(.cropping-active) #toggleCropBtn {
  height: 100px !important; /* 文字入力ボックスと同じ100px */
  font-size: 22px !important; 
  font-weight: bold;
  margin-bottom: 5px !important;
  padding: 8px !important;
  display: block !important; 
}
/* ⭐️ Normal Mode: Hide the two "inactive" cropping buttons */
.control-item.trim-block:not(.cropping-active) #doCropBtn,
.control-item.trim-block:not(.cropping-active) #resetCropBtn {
  display: none; 
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  flex-grow: 0;
}
/* 2. 文字入力エリア */
.control-item.text-input {
  padding-top: 10px; 
  height: 120px; 
}
.control-item.text-input textarea {
  height: 100px; /* 基準となる高さ: 100px */
  font-size: 16px;
  resize: none;
  flex-grow: 0; 
  margin-top: 0; 
  margin-bottom: 5px;
}
/* 3. ボタン・セレクトボックスの独立項目 */
.control-item.single-action {
  width: 300px; 
  padding-top: 10px;
  justify-content: flex-start;
}
/* 単独のアクションボタンの高さを100pxに */
.control-item.single-action button {
  height: 100px; 
  font-size: 22px; 
  font-weight: bold;
}
/* --- [入力要素の共通スタイル] --- */
.control-item label {
  font-size: 16px; 
  margin-bottom: 2px;
  font-weight: bold;
  white-space: nowrap;
  color: #333;
  display: block;
}
.control-item input, 
.control-item select, 
.control-item:not(.single-action):not(.trim-block) button { 
  width: 100%;
  font-size: 18px; 
  padding: 8px;
  height: 40px; /* その他のinput/selectの高さ: 40px */
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 5px;
}
button { 
  background: #3498db; 
  color: #fff; 
  border: none; 
  cursor: pointer; 
  font-weight: 600;
}
input[type="color"], input[type="range"] {
  height: 40px;
  padding: 0;
  margin: 0 0 5px 0;
}
/* トリミングボタン（通常モードでは非表示または100pxになる） */
.trim-button {
  padding: 5px 8px; 
  font-size: 16px;
  margin-bottom: 3px; 
}
/* トリミングモード専用のスタイル */
/* モバイル向けに高さを 150px に増加 */
.controls-area.cropping-active {
  height: 150px; 
  max-height: 150px;
}
.controls-area.cropping-active #bottomControls {
/* 横スクロール機能を無効化し、フル幅を使用 */
  overflow-x: hidden; 
  padding: 10px; 
  gap: 0; 
  align-items: center; 
  width: 100%;
}
/* PC (768px以上) での高さを修正 */
@media (min-width: 768px) {
.controls-area.cropping-active {
  height: 80px; /* 80pxに増加して、隠れるのを防ぐ */
  max-height: 80px;
}
.scroll-arrow {
  display: flex;
  }
}
/* ⭐️ トリミングモード中は矢印と、トリミングブロック以外の全コントロールを非表示にする */
.controls-area.cropping-active .scroll-arrow,
.controls-area.cropping-active .control-item:not(.trim-block) {
  display: none !important; 
}
/* ⭐️ トリミングボタン群を横いっぱいに広げ、横並びにする */
.controls-area.cropping-active .control-item.trim-block {
  width: 100%; 
  flex-direction: row; /* 横並びに変更 */
  gap: 10px; 
  padding: 0 10px; 
  justify-content: space-between; 
  height: 100%; 
  border-right: none; 
  padding-top: 0; 
  align-items: center; 
  flex-shrink: 1;
}
/* ⭐️ 最終修正: セレクタの先頭に `button` を追加し、詳細度を最大化して、
           通常モードの `!important` を確実に上書きする */
.controls-area.cropping-active .control-item.trim-block button#toggleCropBtn,
.controls-area.cropping-active .control-item.trim-block button#doCropBtn,
.controls-area.cropping-active .control-item.trim-block button#resetCropBtn {
  display: block !important;
  visibility: visible !important; 
  width: auto !important;
  height: 60px !important; /* <-- 高さ60pxを強制適用 */
  margin-bottom: 0 !important;
  flex-grow: 1; 
  flex-basis: 33.33%; 
  max-width: calc(33.33% - 7px);
  font-size: 20px !important;
}