/* 領収書めくり - 専用スタイル */

.container { 
  max-width: 900px; 
  margin: 0 auto; 
}

.service-title { 
  text-align: center; 
  font-size: 2em; 
  color: #333; 
  margin-bottom: 0.5em; 
}

/* ファイル入力 */
.file-input { 
  display: none; 
}

.upload-button {
  background: #0087F7; 
  color: #fff; 
  border: none; 
  border-radius: 8px;
  font-size: 1em; 
  font-weight: bold; 
  padding: 10px 20px; 
  cursor: pointer;
}

/* セグメント分割リスト */
.split-list { 
  margin-top: 20px; 
  background: #fff; 
  border: 1px solid #ddd; 
  border-radius: 6px; 
  padding: 16px; 
}

.segment-item {
  padding: 10px; 
  border-bottom: 1px solid #eee; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
}

.segment-item:last-child { 
  border-bottom: none; 
}

.segment-btn {
  background: #009688; 
  color: #fff; 
  border: none; 
  border-radius: 6px; 
  padding: 6px 12px; 
  cursor: pointer;
}

.segment-btn:hover { 
  background: #00897b; 
}

.segment-btn.done { 
  background: #ccc; 
  color: #666; 
  cursor: not-allowed; 
}

/* 一括解析ボタン */
.batch-analyze-button {
  background: #ff9800; 
  color: #fff; 
  border: none; 
  border-radius: 6px; 
  padding: 8px 14px; 
  cursor: pointer;
  margin-top: 10px; 
  font-weight: bold;
}

.batch-analyze-button:hover { 
  background: #f57c00; 
}

/* 結果表示 */
.results-container { 
  margin-top: 20px; 
}

.result-item {
  background: #fff; 
  border: 1px solid #ddd; 
  border-radius: 8px; 
  padding: 16px; 
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
  position: relative;
}

.copy-button {
  background: #4caf50; 
  color: #fff; 
  border: none; 
  border-radius: 8px; 
  font-size: 1em; 
  font-weight: bold;
  padding: 8px 16px; 
  cursor: pointer; 
  margin-bottom: 15px;
}

.copy-button:hover { 
  background: #43a047; 
}

/* まとめて回転・拡大ボタン */
.global-controls {
  margin-bottom: 10px;
}

.global-controls button {
  margin: 2px;
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  background: #888;
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  vertical-align: middle;
}

.global-controls button:hover {
  background: #555;
}

/* サムネイル表示 */
.thumb-container {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16/9; 
  position: relative; 
  overflow: hidden;
  background: #eee; 
  border: 1px solid #ccc; 
  border-radius: 8px; 
  margin: 20px auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.thumb-img {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform-origin: center center;
}

/* 調整コントロール */
.adjustment-controls { 
  margin-top: 8px; 
}

.adjustment-controls button {
  margin: 2px; 
  padding: 6px 8px; 
  border: none; 
  border-radius: 4px; 
  background: #888; 
  color: #fff; 
  cursor: pointer; 
  font-size: 0.85rem;
}

.adjustment-controls button:hover { 
  background: #555; 
}

.time-display, .angle-display {
  display: inline-block; 
  margin-left: 8px; 
  color: #444; 
  font-size: 0.85rem; 
  vertical-align: middle;
}

/* 編集可能フィールド */
.editable-field {
  display: inline-block; 
  min-width: 60px; 
  padding: 2px 4px; 
  cursor: pointer;
}

.editable-field.editing {
  background: #fff; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  padding: 2px;
}

/* カテゴリ選択 */
.category-select, .category-custom {
  display: none; 
  margin-left: 8px; 
  border: 1px solid #ccc; 
  border-radius: 4px;
}

.category-label {
  display: inline-block; 
  padding: 2px 6px; 
  border-radius: 4px; 
  margin-left: 6px; 
  color: #fff;
}

.cat-交通費 { background: #f44336; }
.cat-消耗品費 { background: #9c27b0; }
.cat-通信費 { background: #3f51b5; }
.cat-水道光熱費{ background: #009688; }
.cat-交際費 { background: #ff5722; }
.cat-会議費 { background: #607d8b; }
.cat-旅費 { background: #795548; }
.cat-その他 { background: #757575; }
.cat-カスタム { background: #37474f; }

/* サムネイル表示のレスポンシブ対応 */
@media (max-width: 768px) {
  .thumb-container {
    max-width: 90vw;
    margin: 15px auto;
  }
  
  .result-item {
    padding: 15px;
    margin-bottom: 15px;
  }
  
  .adjustment-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .adjustment-controls button {
    padding: 8px 12px;
    font-size: 0.9em;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .thumb-container {
    max-width: 70vw;
  }
}