/* =====================================================
   画像変換ツール — 共通UI
   個別の変換ページは data 属性と変換アダプターだけを差し替えて使います。
   ===================================================== */

.converter-page-head {
  padding-top: 56px;
  max-width: 760px;
}

.converter-page-head__format {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.converter-page-head__lead {
  color: var(--text-muted);
  font-size: 16px;
}

.converter-shell {
  margin-top: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.converter-drop {
  display: grid;
  place-items: center;
  min-height: 244px;
  margin: 24px;
  padding: 36px 24px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-ui);
  background: var(--surface-muted);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.converter-drop.is-dragging {
  border-color: var(--accent);
  background: var(--accent-bg-hover);
}

.converter-drop__icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  color: var(--accent);
}

.converter-drop__title {
  margin-bottom: 8px;
  font-weight: 700;
}

.converter-drop__hint {
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: 13px;
}

.converter-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.converter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-ui);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.converter-button:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.converter-button:disabled { cursor: not-allowed; opacity: 0.48; }

.converter-button--secondary {
  background: var(--surface);
  color: var(--accent);
}

.converter-button--secondary:hover { background: var(--accent-bg-hover); color: var(--accent); }

.converter-privacy {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 24px 24px;
  color: var(--text-muted);
  font-size: 13px;
}

.converter-privacy svg { flex: none; margin-top: 3px; color: var(--accent); }

.converter-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  border-top: 1px solid var(--border);
}

.converter-preview,
.converter-controls,
.converter-result {
  min-width: 0;
  padding: 26px;
}

.converter-preview { border-right: 1px solid var(--border); }

.converter-section-label {
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.converter-preview__stage,
.converter-result__stage {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.converter-preview__stage img,
.converter-result__stage img {
  max-height: 360px;
  object-fit: contain;
}

.converter-file-meta,
.converter-result-meta {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.converter-field { margin-bottom: 20px; }
.converter-field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.converter-field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-ui);
  background: var(--surface);
}

.converter-field__help { display: block; margin-top: 5px; color: var(--text-faint); font-size: 12px; }
.converter-controls .converter-button { width: 100%; margin-top: 4px; }

.converter-status {
  min-height: 24px;
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.converter-status.is-error { color: #B13A2F; }

.converter-result {
  border-top: 1px solid var(--border);
}

.converter-result__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: 26px;
}

.converter-actions {
  display: grid;
  gap: 10px;
  align-content: start;
}

.converter-code-label { margin-top: 22px; }

.converter-code {
  display: block;
  width: 100%;
  min-height: 164px;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-ui);
  background: var(--surface-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
}

.converter-content {
  max-width: 760px;
}

.converter-steps {
  margin: 0;
  padding-left: 1.5em;
}

.converter-steps li { margin-bottom: 12px; padding-left: 5px; }

.converter-suitable {
  columns: 2;
  column-gap: 36px;
}

@media (max-width: 720px) {
  .converter-page-head { padding-top: 40px; }
  .converter-page-head__lead { font-size: 15px; }
  .converter-shell { margin-top: 30px; }
  .converter-drop { min-height: 216px; margin: 14px; padding: 28px 16px; }
  .converter-privacy { margin: 0 16px 18px; }
  .converter-workspace,
  .converter-result__grid { grid-template-columns: 1fr; }
  .converter-preview { border-right: 0; border-bottom: 1px solid var(--border); }
  .converter-preview,
  .converter-controls,
  .converter-result { padding: 20px 16px; }
  .converter-preview__stage,
  .converter-result__stage { min-height: 220px; }
  .converter-suitable { columns: 1; }
}