/* ===================================
   Tool: image-converter
   =================================== */

  /* Page-specific variables */
  :root {
    --success: #4caf50;
    --success-light: #e8f5e9;
    --warning: #ff9800;
    --warning-light: #fff3e0;
    --error: #f44336;
    --error-light: #ffebee;
  }

  .tool-main { padding: var(--space-2xl) var(--space-lg); max-width: 1200px; margin: 0 auto; }

  .drop-zone { background: var(--bg-card); border: 3px dashed var(--border-color); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-xl); text-align: center; cursor: pointer; transition: all var(--transition-normal); margin-bottom: var(--space-xl); }
  .drop-zone.compact { padding: var(--space-lg) var(--space-xl); }
  .drop-zone.compact .drop-zone-icon { font-size: 2rem; margin-bottom: var(--space-sm); }
  .drop-zone.compact .drop-zone-title { font-size: 1rem; margin-bottom: var(--space-xs); }
  .drop-zone.compact .drop-zone-text, .drop-zone.compact .drop-zone-formats, .drop-zone.compact .drop-zone-limit { display: none; }
  .drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-light); }
  .drop-zone-icon { font-size: 4rem; margin-bottom: var(--space-md); display: block; }
  .drop-zone-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
  .drop-zone-text { font-size: 0.9rem; color: var(--text-muted); margin-bottom: var(--space-md); }
  .drop-zone-formats { display: flex; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; }
  .format-tag { padding: 4px 12px; background: var(--brown-100); color: var(--text-secondary); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
  .drop-zone input[type="file"] { display: none; }
  .drop-zone-limit { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-md); }

  .settings-panel { background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--space-xl); margin-bottom: var(--space-xl); }
  .settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); }
  .settings-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: var(--space-sm); }
  .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
  .setting-group { background: var(--brown-50); padding: var(--space-lg); border-radius: var(--radius-lg); }
  .setting-label { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
  .setting-value { font-weight: 700; color: var(--accent); }
  .setting-slider { width: 100%; height: 8px; -webkit-appearance: none; background: var(--brown-100); border-radius: 4px; outline: none; cursor: pointer; }
  .setting-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--accent); border-radius: 50%; cursor: pointer; }
  .setting-slider::-moz-range-thumb { width: 20px; height: 20px; background: var(--accent); border-radius: 50%; border: none; cursor: pointer; }
  .setting-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: var(--space-sm); }
  .setting-select { width: 100%; padding: var(--space-sm) var(--space-md); font-family: var(--font-main); font-size: 0.9rem; color: var(--text-primary); background: var(--bg-input); border: 2px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; }
  .setting-select:focus { outline: none; border-color: var(--accent); }
  .setting-row { display: flex; gap: var(--space-md); align-items: center; }
  .setting-input { width: 100px; padding: var(--space-sm) var(--space-md); font-family: var(--font-main); font-size: 0.9rem; color: var(--text-primary); background: var(--bg-input); border: 2px solid var(--border-color); border-radius: var(--radius-md); }
  .setting-input:focus { outline: none; border-color: var(--accent); }
  .setting-checkbox { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
  .setting-checkbox input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
  .setting-checkbox span { font-size: 0.9rem; color: var(--text-secondary); }

  /* Button styles inherited from main style.css */

  .actions-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); flex-wrap: wrap; }
  .actions-left, .actions-right { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }

  .stats-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); scroll-margin-top: 80px; }
  @media (max-width: 768px) { .stats-summary { grid-template-columns: repeat(2, 1fr); } }
  .stat-card { background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--space-lg); text-align: center; }
  .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--accent); margin-bottom: var(--space-xs); }
  .stat-value.success { color: var(--success); }
  .stat-label { font-size: 0.85rem; color: var(--text-muted); }

  .image-list { display: flex; flex-direction: column; gap: var(--space-md); }
  .image-item { background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--space-lg); display: grid; grid-template-columns: 120px 1fr auto; gap: var(--space-lg); align-items: center; transition: all var(--transition-fast); }
  @media (max-width: 768px) { .image-item { grid-template-columns: 80px 1fr; gap: var(--space-md); } .image-item-actions { grid-column: 1 / -1; justify-content: flex-end; } }
  .image-item:hover { background: var(--brown-50); }
  .image-preview { position: relative; width: 120px; height: 80px; border-radius: var(--radius-md); overflow: hidden; background: var(--brown-100); cursor: pointer; }
  @media (max-width: 768px) { .image-preview { width: 80px; height: 60px; } }
  .image-preview img { width: 100%; height: 100%; object-fit: cover; }
  .image-preview-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-fast); }
  .image-preview:hover .image-preview-overlay { opacity: 1; }
  .image-preview-overlay span { color: white; font-size: 0.75rem; font-weight: 600; }
  .image-info { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
  .image-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .image-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: 0.8rem; color: var(--text-muted); }
  .image-meta-item { display: flex; align-items: center; gap: 4px; }
  .image-size-comparison { display: flex; align-items: center; gap: var(--space-sm); }
  .size-original { color: var(--text-muted); text-decoration: line-through; }
  .size-compressed { color: var(--success); font-weight: 600; }
  .size-savings { padding: 2px 8px; background: var(--success-light); color: var(--success); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
  .size-increased { padding: 2px 8px; background: var(--warning-light); color: var(--warning); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
  .exif-badge { padding: 2px 8px; background: #e3f2fd; color: #1976d2; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
  .format-badge-small { padding: 2px 6px; background: var(--brown-100); color: var(--text-secondary); border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
  .image-progress { width: 100%; height: 4px; background: var(--brown-100); border-radius: 2px; overflow: hidden; }
  .image-progress-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width var(--transition-normal); }
  .image-status { font-size: 0.8rem; color: var(--text-muted); }
  .image-status.success { color: var(--success); }
  .image-status.error { color: var(--error); }
  .image-status.ready { color: var(--accent); }
  .image-item-actions { display: flex; gap: var(--space-sm); }

  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); opacity: 0; visibility: hidden; transition: all var(--transition-normal); }
  .modal-overlay.active { opacity: 1; visibility: visible; }
  .modal-content { background: var(--bg-primary); border-radius: var(--radius-xl); max-width: 1000px; width: 100%; max-height: 90vh; overflow: auto; }
  .modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--bg-primary); z-index: 10; }
  .modal-title { font-size: 1.1rem; font-weight: 600; }
  .modal-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--brown-100); border: none; border-radius: 50%; cursor: pointer; font-size: 1.2rem; }
  .modal-close:hover { background: var(--brown-200); }
  .modal-body { padding: var(--space-lg); }
  .comparison-container { position: relative; width: 100%; aspect-ratio: 16/10; background: var(--brown-100); border-radius: var(--radius-lg); overflow: hidden; user-select: none; }
  .comparison-original, .comparison-compressed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .comparison-original { clip-path: inset(0 50% 0 0); z-index: 2; }
  .comparison-compressed { z-index: 1; }
  .comparison-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .comparison-image.original { clip-path: inset(0 50% 0 0); }
  .comparison-slider { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: white; cursor: ew-resize; transform: translateX(-50%); z-index: 10; }
  .comparison-slider::before { content: '◀ ▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; box-shadow: var(--shadow-md); }
  .comparison-labels { position: absolute; bottom: var(--space-md); left: var(--space-md); right: var(--space-md); display: flex; justify-content: space-between; pointer-events: none; }
  .comparison-label { padding: var(--space-sm) var(--space-md); background: rgba(0,0,0,0.7); color: #FFFFFF !important; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
  .comparison-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); }
  .comparison-stat { text-align: center; }
  .comparison-stat .comparison-label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: var(--space-xs); }
  .comparison-stat .comparison-value { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
  .comparison-info-card { background: var(--bg-card); padding: var(--space-lg); border-radius: var(--radius-lg); }
  .comparison-info-title { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-bottom: var(--space-sm); }
  .comparison-info-value { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
  .comparison-info-value.success { color: var(--success); }
  .individual-quality { background: var(--brown-50); padding: var(--space-lg); border-radius: var(--radius-lg); margin-top: var(--space-lg); }
  .individual-quality .input-label { font-size: 0.9rem; font-weight: 600; margin-bottom: var(--space-md); display: block; }
  .individual-quality .quality-control { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
  .individual-quality .quality-control input[type="range"] { flex: 1; }
  .individual-quality .btn { width: 100%; }
  .individual-settings { background: var(--brown-50); padding: var(--space-lg); border-radius: var(--radius-lg); margin-top: var(--space-lg); }
  .individual-settings-title { font-size: 0.9rem; font-weight: 600; margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); }
  .individual-settings-row { display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: center; }

  .guide-section { background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--space-xl); margin-top: var(--space-xl); }
  .guide-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
  .guide-header h3 { font-size: 1rem; font-weight: 600; }
  .guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
  .guide-item { background: var(--brown-50); padding: var(--space-lg); border-radius: var(--radius-lg); border-left: 4px solid var(--accent); }
  .guide-item-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
  .guide-item-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
  .format-table { width: 100%; border-collapse: collapse; margin-top: var(--space-lg); font-size: 0.85rem; }
  .format-table th, .format-table td { padding: var(--space-md); text-align: left; border-bottom: 1px solid var(--border-color); }
  .format-table th { background: var(--brown-50); font-weight: 600; color: var(--text-primary); }
  .format-table td { color: var(--text-secondary); }
  .format-badge { display: inline-block; padding: 2px 8px; background: var(--accent-light); color: var(--accent); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
  .format-badge.best { background: var(--success-light); color: var(--success); }

  .notice-section { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-xl); }
  .notice-item { padding: var(--space-lg); border-radius: var(--radius-lg); }
  .notice-item.warning { background: var(--warning-light); border-left: 4px solid var(--warning); }
  .notice-item.info { background: #e3f2fd; border-left: 4px solid #2196f3; }
  .notice-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
  .notice-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; }
  .notice-text ul { margin: var(--space-sm) 0 var(--space-sm) var(--space-lg); padding: 0; }
  .notice-text li { margin-bottom: var(--space-xs); }

  .empty-state { text-align: center; padding: var(--space-3xl); color: var(--text-muted); }
  .empty-state-icon { font-size: 4rem; margin-bottom: var(--space-md); opacity: 0.5; }
  .empty-state-text { font-size: 1rem; }
  .hidden { display: none !important; }

  .footer { padding: var(--space-2xl) var(--space-lg); text-align: center; background: var(--bg-primary); border-top: 1px solid var(--border-color); }
  .footer-logo { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); }
  .footer-text { font-size: 0.85rem; color: var(--text-muted); }

  /* Resize inputs */
  .resize-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-sm); align-items: center; margin-top: var(--space-sm); }
  .resize-inputs input { width: 100%; }
  .resize-x { color: var(--text-muted); font-weight: 600; }
  .percent-input { margin-top: var(--space-sm); }
  .preset-select { margin-top: var(--space-sm); }

  /* Toast styles inherited from main style.css */

  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  .animate-in { animation: fadeIn var(--transition-normal) ease-out; }

  /* ===================================
     Mobile Responsive Fixes
     =================================== */
  
  /* 全体のオーバーフロー防止 */
  .tool-main {
    overflow-x: hidden;
  }

  /* テーブルを横スクロール可能に */
  .format-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media (max-width: 768px) {
    .tool-main {
      padding: var(--space-lg) var(--space-md);
    }

    /* ドロップゾーン */
    .drop-zone {
      padding: var(--space-xl) var(--space-md);
    }
    .drop-zone-icon {
      font-size: 3rem;
    }
    .drop-zone-title {
      font-size: 1.1rem;
    }

    /* 設定パネル */
    .settings-panel {
      padding: var(--space-lg) var(--space-md);
    }
    .settings-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-sm);
    }
    .settings-grid {
      grid-template-columns: 1fr;
    }
    .setting-group {
      padding: var(--space-md);
    }

    /* アクションバー */
    .actions-bar {
      flex-direction: column;
      gap: var(--space-md);
    }
    .actions-left, .actions-right {
      width: 100%;
      justify-content: center;
    }
    .actions-right {
      flex-direction: column;
    }
    .actions-right .btn {
      width: 100%;
    }

    /* 画像アイテム */
    .image-item {
      padding: var(--space-md);
    }
    .image-info {
      overflow: hidden;
    }
    .image-name {
      font-size: 0.85rem;
    }
    .image-meta {
      font-size: 0.75rem;
    }
    .image-size-comparison {
      flex-wrap: wrap;
      font-size: 0.75rem;
    }

    /* モーダル */
    .modal-content {
      margin: var(--space-md);
      max-height: calc(100vh - var(--space-xl));
    }
    .modal-body {
      padding: var(--space-md);
    }
    .comparison-info {
      grid-template-columns: 1fr;
      gap: var(--space-md);
    }
    .comparison-stat .comparison-value {
      font-size: 1rem;
    }
    .individual-quality .quality-control {
      flex-direction: column;
      align-items: stretch;
    }
    .individual-quality .quality-control input[type="range"] {
      width: 100%;
    }

    /* ガイドセクション */
    .guide-section {
      padding: var(--space-lg) var(--space-md);
    }
    .guide-grid {
      grid-template-columns: 1fr;
    }
    .format-table th, .format-table td {
      padding: var(--space-sm);
      font-size: 0.75rem;
      white-space: nowrap;
    }

    /* 注意事項 */
    .notice-item {
      padding: var(--space-md);
    }
    .notice-title {
      font-size: 0.9rem;
    }
    .notice-text {
      font-size: 0.8rem;
    }
    .notice-text ul {
      margin-left: var(--space-md);
    }
  }

  @media (max-width: 480px) {
    .drop-zone.compact {
      padding: var(--space-md);
    }
    .drop-zone.compact .drop-zone-icon {
      font-size: 1.5rem;
    }
    .drop-zone.compact .drop-zone-title {
      font-size: 0.9rem;
    }

    .stat-card {
      padding: var(--space-md);
    }
    .stat-value {
      font-size: 1.25rem;
    }
    .stat-label {
      font-size: 0.75rem;
    }

    .image-item {
      grid-template-columns: 60px 1fr;
      gap: var(--space-sm);
    }
    .image-preview {
      width: 60px;
      height: 45px;
    }
    .image-item-actions .btn {
      padding: var(--space-xs) var(--space-sm);
      font-size: 0.75rem;
    }
  }