/* AI Mastering Engine — namespaced so it doesn't leak into the host theme.
   Dark "studio" look, red accent, Noto Sans KR. Self-contained so it works
   inside any theme; goes full-bleed when the page uses the plugin's
   "AI 마스터링 (전체 화면)" page template (body.ame-fullscreen-page). */

.ame-mastering-engine, .ame-mastering-engine * {
  font-family: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ame-mastering-engine {
  color-scheme: dark;
  max-width: 760px;
  margin: 40px auto;
  padding: 0 20px;
  line-height: 1.5;
}

.ame-mastering-engine .ame-panel {
  background: radial-gradient(120% 140% at 50% -10%, #2a1414 0%, #170f0f 55%, #0d0908 100%);
  border: 1px solid #3a2323;
  border-radius: 28px;
  padding: 40px 32px 32px;
  color: #e5e7eb;
}

.ame-mastering-engine .ame-hero { text-align: center; margin-bottom: 28px; }
.ame-mastering-engine .ame-h1 { font-size: 1.5rem; margin: 0 0 10px; color: #f8fafc; }
.ame-mastering-engine .ame-intro { margin: 0 auto; max-width: 46em; color: #9ca3af; font-size: 0.92rem; }

/* --- Hero stage (dropzone circle + genre petals ringed around it) --------
   Each petal sits at the stage's exact center (top/left 50% + negative
   margins), then a rotate -> translateX(radius) -> counter-rotate chain
   pushes it straight out to its spot on the ring while keeping the label
   upright (translateX with a fixed px radius, not %, since transform
   percentages resolve against the element's own box, not the container --
   the fixed radius matches the dropzone circle's own fixed 340px diameter,
   see .ame-dropzone below). */
.ame-mastering-engine .ame-hero-stage {
  position: relative;
  /* Diagonal petals (angles other than 0/180deg) stick out ~38px above/below
     the circle's own edge (216px ring radius + 21px half-petal - 170px circle
     radius). Padding reserves that space in normal flow so the intro text
     above and the options card below don't collide with them. It's padding
     (not margin) specifically so the petals' top:50%/left:50% -- which
     resolves against this element's padding box -- still lands on the
     circle's true center. */
  padding: 48px 0;
}

.ame-mastering-engine .ame-genre-petals {
  position: absolute; inset: 0; pointer-events: none;
}
.ame-mastering-engine .ame-genre-petal {
  position: absolute;
  top: 50%; left: 50%;
  width: 92px; height: 42px;
  margin: -21px 0 0 -46px;
  transform: rotate(var(--ame-a, 0deg)) translateX(216px) rotate(calc(-1 * var(--ame-a, 0deg)));
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; border: 1px solid #3a2626;
  background: #1c1414; color: #a8a0a0;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
  cursor: pointer; pointer-events: auto;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ame-mastering-engine .ame-genre-petal:hover { border-color: #a3433f; color: #f1f5f9; }
.ame-mastering-engine .ame-genre-petal-active {
  background: linear-gradient(135deg, #dc2626, #f87171);
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.7);
  z-index: 2;
}

@media (max-width: 640px) {
  .ame-mastering-engine .ame-genre-petals {
    position: static; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; margin-top: 16px; pointer-events: auto;
  }
  .ame-mastering-engine .ame-genre-petal {
    position: static; width: auto; height: auto; margin: 0; padding: 9px 16px;
    transform: none !important;
  }
  .ame-mastering-engine .ame-genre-petal-active { transform: none !important; }
}

/* --- Dropzone -------------------------------------------------------- */
.ame-mastering-engine .ame-dropzone {
  position: relative;
  width: min(340px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto 28px;
  border-radius: 50%;
  border: 2px dashed #a3433f;
  background: radial-gradient(circle at 50% 40%, #2c1616 0%, #1a1010 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.ame-mastering-engine .ame-dropzone.ame-dropzone-active {
  border-color: #f87171;
  border-style: solid;
  transform: scale(1.015);
}
.ame-mastering-engine .ame-dropzone-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ame-mastering-engine .ame-dropzone-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 28px;
}
.ame-mastering-engine .ame-dropzone-icon {
  width: 40px; height: 40px;
  color: #f87171;
  margin-bottom: 14px;
}
.ame-mastering-engine .ame-dropzone-icon svg { width: 100%; height: 100%; }
.ame-mastering-engine .ame-dropzone-title { font-weight: 600; color: #f1f5f9; margin-bottom: 6px; font-size: 1.02rem; }
.ame-mastering-engine .ame-dropzone-sub { color: #a08787; font-size: 0.85rem; margin-bottom: 12px; }
.ame-mastering-engine .ame-upload-btn {
  padding: 9px 22px; font-size: 0.9rem; font-weight: 600;
  border: none; border-radius: 999px; color: white; cursor: pointer;
  background: linear-gradient(135deg, #dc2626, #f87171);
  box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.7);
}
.ame-mastering-engine .ame-upload-btn:hover { filter: brightness(1.08); }
.ame-mastering-engine .ame-dropzone-filename {
  margin-top: 12px; font-size: 0.78rem; color: #6b7280; word-break: break-all; max-width: 220px;
}

/* --- Options (toggle + strength slider) --------------------------------- */
.ame-mastering-engine .ame-options {
  background: #170f0f; border: 1px solid #3a2323; border-radius: 16px;
  padding: 8px 20px; margin-bottom: 24px;
}
.ame-mastering-engine .ame-option { padding: 16px 0; }
.ame-mastering-engine .ame-option + .ame-option { border-top: 1px solid #2a1c1c; }
.ame-mastering-engine .ame-option-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ame-mastering-engine .ame-option-label { font-weight: 600; color: #f1f5f9; font-size: 0.95rem; margin: 0; }

.ame-mastering-engine .ame-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.ame-mastering-engine .ame-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ame-mastering-engine .ame-switch-track {
  position: absolute; inset: 0; border-radius: 999px; background: #3a2c2c;
  transition: background-color 0.15s ease;
}
.ame-mastering-engine .ame-switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #e5e7eb; transition: transform 0.15s ease;
}
.ame-mastering-engine .ame-switch input:checked + .ame-switch-track { background: linear-gradient(135deg, #dc2626, #f87171); }
.ame-mastering-engine .ame-switch input:checked + .ame-switch-track .ame-switch-thumb { transform: translateX(20px); }
.ame-mastering-engine .ame-switch input:focus-visible + .ame-switch-track { outline: 2px solid #f87171; outline-offset: 2px; }

.ame-mastering-engine .ame-strength-row {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  transition: opacity 0.15s ease;
}
.ame-mastering-engine .ame-strength-row.ame-disabled { opacity: 0.35; pointer-events: none; }
.ame-mastering-engine .ame-strength-row label { color: #a08787; font-size: 0.82rem; margin: 0; flex-shrink: 0; }

/* 7-step slider: see AI Vocal Cleaner's identical component for the layout
   rationale (dots below the track so the thumb never covers them). */
.ame-mastering-engine .ame-step-slider { position: relative; flex: 1; height: 38px; }
.ame-mastering-engine .ame-step-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: absolute; top: 15px; left: 0; width: 100%; height: 4px; border-radius: 999px;
  background: #3a2626; accent-color: #ef4444; cursor: pointer; margin: 0;
}
.ame-mastering-engine .ame-step-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #f5f5f5; border: 3px solid #ef4444; cursor: grab; margin-top: 0;
}
.ame-mastering-engine .ame-step-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.ame-mastering-engine .ame-step-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #f5f5f5; border: 3px solid #ef4444; cursor: grab;
}
.ame-mastering-engine .ame-step-slider input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 999px; background: #3a2626;
}
.ame-mastering-engine .ame-step-dots {
  position: absolute; left: 9px; right: 9px; top: 29px;
  display: flex; justify-content: space-between; pointer-events: none;
}
.ame-mastering-engine .ame-step-dots span { width: 4px; height: 4px; border-radius: 50%; background: #6b5252; }

/* --- Form fields ------------------------------------------------------ */
.ame-mastering-engine .ame-field { margin-bottom: 20px; }
.ame-mastering-engine label { display: block; font-weight: 600; margin-bottom: 6px; color: #cbd5e1; font-size: 0.9rem; }
.ame-mastering-engine select {
  padding: 8px 10px; font-size: 0.92rem; width: 100%;
  background: #1d1414; color: #e5e7eb; border: 1px solid #3a2626; border-radius: 8px;
}
.ame-mastering-engine .ame-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.ame-mastering-engine .ame-row .ame-field { margin-bottom: 0; flex: 1 1 140px; }

/* --- Stereo width knob -------------------------------------------------- */
.ame-mastering-engine .ame-knob-card {
  background: #170f0f; border: 1px solid #3a2323; border-radius: 16px; padding: 28px 20px 22px;
  text-align: center; margin-bottom: 24px; user-select: none;
}
.ame-mastering-engine .ame-knob-title { color: #e5e7eb; font-weight: 600; margin-bottom: 12px; }
.ame-mastering-engine .ame-knob-badge {
  display: inline-block; background: #0d0808; color: #f1f5f9;
  border-radius: 999px; padding: 6px 18px; font-variant-numeric: tabular-nums;
  font-size: 1.05rem; margin-bottom: 8px; min-width: 3em;
}
.ame-mastering-engine .ame-knob-wrap { display: flex; justify-content: center; }
.ame-mastering-engine .ame-knob-svg { width: 320px; height: 160px; touch-action: none; cursor: grab; max-width: 100%; }
.ame-mastering-engine .ame-knob-svg:active { cursor: grabbing; }
.ame-mastering-engine .ame-knob-track { fill: none; stroke: #2e1c1c; stroke-width: 9; stroke-linecap: round; }
.ame-mastering-engine .ame-knob-value-arc { fill: none; stroke: #ef4444; stroke-width: 9; stroke-linecap: round; }
.ame-mastering-engine .ame-knob-body { fill: #1c1414; stroke: #3a2626; stroke-width: 2; }
.ame-mastering-engine .ame-knob-dot { fill: #f5f5f5; }
.ame-mastering-engine .ame-width-line { stroke: #ef4444; stroke-width: 5; stroke-linecap: round; }
.ame-mastering-engine .ame-knob-hint { color: #6b7280; font-size: 0.8rem; margin-top: 10px; }

/* --- Buttons / status / result ----------------------------------------- */
.ame-mastering-engine button {
  padding: 11px 22px; font-size: 1rem; font-weight: 600;
  border: none; border-radius: 999px; color: white;
  cursor: pointer;
  background: linear-gradient(135deg, #dc2626, #f87171);
  box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.7);
}
.ame-mastering-engine button.ame-secondary { background: #2a1c1c; box-shadow: none; }
.ame-mastering-engine button:disabled { background: #3a2c2c; box-shadow: none; cursor: not-allowed; color: #6b7280; }
.ame-mastering-engine .ame-actions { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.ame-mastering-engine .ame-result { margin-top: 28px; padding-top: 20px; border-top: 1px solid #3a2323; }
.ame-mastering-engine .ame-result label { color: #cbd5e1; }
.ame-mastering-engine audio { width: 100%; margin-top: 6px; }
.ame-mastering-engine .ame-error { color: #f87171; margin-top: 14px; white-space: pre-wrap; text-align: center; }
.ame-mastering-engine .ame-status { color: #9ca3af; margin-top: 14px; text-align: center; }
.ame-mastering-engine a.ame-download { display: inline-block; margin-top: 10px; color: #f87171; }

/* --- Info cards ---------------------------------------------------------- */
.ame-mastering-engine .ame-info-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 32px;
}
.ame-mastering-engine .ame-info-card {
  background: #170f0f; border: 1px solid #3a2323; border-radius: 14px; padding: 16px;
}
.ame-mastering-engine .ame-info-label { color: #a08787; font-size: 0.78rem; font-weight: 600; margin-bottom: 8px; }
.ame-mastering-engine .ame-info-value { color: #e5e7eb; font-size: 0.85rem; }

@media (max-width: 560px) {
  .ame-mastering-engine .ame-info-grid { grid-template-columns: 1fr; }
  .ame-mastering-engine .ame-panel { padding: 28px 18px 24px; border-radius: 20px; }
}

/* --- Full-bleed mode ------------------------------------------------------
   Applied automatically when the page uses the "AI 마스터링 (전체 화면)"
   template (templates/page-fullscreen.php sets body.ame-fullscreen-page):
   the dark background fills the whole viewport and the card chrome is
   dropped since there's no surrounding light page to separate it from.
   Also responds to body.avc-fullscreen-page / body.avh-fullscreen-page /
   body.aar-fullscreen-page (the AI Vocal Cleaner / AI Vocal Harmony / AI AR
   Maker plugins' own fullscreen templates) so any combination of the four
   tools can share one page/template and still all go full-bleed, whichever
   plugin's template was picked. */
body.ame-fullscreen-page, body.avc-fullscreen-page, body.avh-fullscreen-page, body.aar-fullscreen-page {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 90% at 50% -10%, #2a1414 0%, #170f0f 45%, #0d0908 100%);
}
body.ame-fullscreen-page .ame-mastering-engine, body.avc-fullscreen-page .ame-mastering-engine, body.avh-fullscreen-page .ame-mastering-engine, body.aar-fullscreen-page .ame-mastering-engine {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 20px;
}
body.ame-fullscreen-page .ame-panel, body.avc-fullscreen-page .ame-panel, body.avh-fullscreen-page .ame-panel, body.aar-fullscreen-page .ame-panel {
  background: none;
  border: none;
  padding: 0;
}