/* =====================================
   Gazolab - Image Trimming Tool (Crop) 専用CSS
   ・共通スタイル: /assets/css/tool.css
   ・ここには .gz-tool-crop から始まるルールだけを書く
===================================== */

.gz-tool-crop {
  /* Crop 専用の上書き・調整が必要になったらここに追記 */
}

/* 例）クロップ枠の見え方を変えたい場合
.gz-tool-crop .gz-crop-overlay {
  border-radius: 8px;
}
*/

/* crop */
.gz-crop-preview {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.gz-crop-container {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  max-width: 100%;
  /* 指スワイプを全部この中のドラッグ扱いにする */
  touch-action: none;
}

.gz-crop-image {
  display: block;
  width: 100%;
  height: auto;

  /* 画像としてのドラッグ＆選択を殺す */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* 枠の内側もクリックを拾えるようにする */
.gz-crop-overlay {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.gz-settings-label-inline {
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 1.0rem;
  cursor: pointer;
}

.gz-settings-label-inline input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

/* ハンドルは少し大きめにして当たり判定アップ */
.gz-crop-handle {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  position: absolute;
}

.gz-crop-handle-nw { top: -7px;  left: -7px;  cursor: nwse-resize; }
.gz-crop-handle-ne { top: -7px;  right: -7px; cursor: nesw-resize; }
.gz-crop-handle-sw { bottom: -7px; left: -7px;  cursor: nesw-resize; }
.gz-crop-handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }

/* SP ではハンドルを隠す（ピンチ操作メイン） */
@media (max-width: 768px) {
  .gz-crop-handle {
    display: none;
  }
}
/* live preview */
.gz-live-preview-card {
  margin-top: 1.5rem;
}

.gz-live-preview-frame {
  border-radius: 14px;
  overflow: hidden;
  background: #141414;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
}

.gz-live-preview-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.gz-crop-container,
.gz-crop-overlay,
.gz-crop-handle {
  touch-action: none;
}

.gz-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}
/* 設定カード */
.gz-settings-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.gz-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.gz-settings-label {
  font-size: 0.95rem;
  font-weight: 500;
}

.gz-settings-control {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gz-settings-control input[type="range"] {
  flex: 1;
}

.gz-settings-control input[type=range]{
  touch-action: pan-y;
}

.gz-settings-value {
  min-width: 2.5rem;
  text-align: right;
  font-size: 0.9rem;
  color: #374151;
}

/* Stats + Download */
.gz-stats-row {
  display: flex;
  /*align-items: center;*/
  justify-content: space-between;
  gap: 5rem;
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
    .gz-stats-row {
  gap: 1rem;
}}

.gz-stats-text {
  color: #4b5563;
}