/* style-sw.css — theme built from the 띠부띠부씰 메이커 palette:
   #f4f6fb page bg · #ffffff card · #2c3140 ink · #7d8598 muted ·
   #3bb4a6 mint accent · #e5e8f0 border, plus the #eef4ff→#f7f5ff
   sky-to-lavender header gradient and the rgba(20,30,60,0.06) shadow tint.
   Same component structure as style.css — only the color tokens differ.
   To use this theme, open index.html and change
   <link rel="stylesheet" href="style.css"> to href="style-sw.css". */

:root{
  /* ---- color roles — mint / blue-grey palette ---- */
  --md-primary: #3BB4A6;
  --md-on-primary: #2C3140;
  --md-primary-container: #DDF3EF;
  --md-on-primary-container: #0F3D37;

  --md-secondary: #7D8598;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #EEF0F7;
  --md-on-secondary-container: #2C3140;

  --md-error: #BA1A1A;
  --md-on-error: #FFFFFF;
  --md-error-container: #FFDAD6;
  --md-on-error-container: #410002;

  --md-surface: #F4F6FB;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #FAFBFE;
  --md-surface-container: #F4F6FB;
  --md-surface-container-high: #EEF0F7;
  --md-surface-container-highest: #E5E8F0;
  --md-on-surface: #2C3140;
  --md-on-surface-variant: #7D8598;
  --md-outline: #B7BFD1;
  --md-outline-variant: #E5E8F0;
  --md-inverse-surface: #2C3140;
  --md-inverse-on-surface: #F4F6FB;

  --stage-bg: #171A24;
  --stage-ink: #D7DCEA;
  --stage-outline: #323A4D;

  /* ---- shape ---- */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-full: 999px;

  /* ---- elevation (the exact panel shadow tint given: rgba(20,30,60,·)) ---- */
  --elevation-1: 0 1px 2px rgba(20,30,60,0.06), 0 1px 4px rgba(20,30,60,0.04);
  --elevation-2: 0 2px 8px rgba(20,30,60,0.08), 0 1px 3px rgba(20,30,60,0.06);
  --elevation-3: 0 6px 16px rgba(20,30,60,0.10), 0 2px 6px rgba(20,30,60,0.06);

  --state-hover: rgba(59, 180, 166, 0.08);
  --state-focus: rgba(59, 180, 166, 0.12);
  --state-press: rgba(59, 180, 166, 0.12);

  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'D2Coding', Consolas, 'SFMono-Regular', Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --md-primary: #56C9BB;
    --md-on-primary: #12151D;
    --md-primary-container: #17423C;
    --md-on-primary-container: #DDF3EF;

    --md-secondary: #A9B0C4;
    --md-on-secondary: #1B2030;
    --md-secondary-container: #262B3A;
    --md-on-secondary-container: #D7DCEA;

    --md-error-container: #93000A;
    --md-on-error-container: #FFDAD6;

    --md-surface: #12151D;
    --md-surface-container-lowest: #0D0F16;
    --md-surface-container-low: #171A24;
    --md-surface-container: #1B1F2A;
    --md-surface-container-high: #232838;
    --md-surface-container-highest: #2C3140;
    --md-on-surface: #E7EAF3;
    --md-on-surface-variant: #A9B0C4;
    --md-outline: #6B7488;
    --md-outline-variant: #323A4D;
    --md-inverse-surface: #E7EAF3;
    --md-inverse-on-surface: #2C3140;

    --state-hover: rgba(86, 201, 187, 0.10);
    --state-focus: rgba(86, 201, 187, 0.14);
    --state-press: rgba(86, 201, 187, 0.14);
  }
}

*{ box-sizing: border-box; }
/* Several elements below set an explicit `display` (flex/grid) for their
   shown state; without this, that declaration would outrank the browser's
   own `[hidden]{ display:none }` rule and the element would stay visible
   even while its `hidden` attribute is set. */
[hidden]{ display: none !important; }
html, body{ height: 100%; }
body{
  margin: 0;
  /* the given sky-blue → lavender header wash, not a flat token */
  background: linear-gradient(180deg, #EEF4FF 0%, #F7F5FF 100%);
  color: var(--md-on-surface);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top app bar ---------- */
.topbar{
  background: transparent;
  padding: 18px 28px;
  position: relative;
  z-index: 2;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark{
  color: var(--md-primary);
  flex: none;
}
.brand-name{
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--md-on-surface);
}
.brand-tag{
  margin: 6px 0 0;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.4;
  max-width: 62ch;
}

/* ---------- layout ---------- */
.layout{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  min-height: 0;
}
@media (max-width: 780px){
  .layout{ grid-template-columns: 1fr; }
}

/* ---------- stage ---------- */
.stage{
  position: relative;
  background: var(--stage-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 32px;
  overflow: auto;
}
@media (max-width: 780px){
  /* Cap the whole preview area on phones so a tall portrait photo can't
     balloon it and push the strength/scale/detail sliders further down
     the page — it scrolls internally instead. */
  .stage{
    min-height: 0;
    max-height: 52vh;
  }
}

.dropzone{
  position: relative;
  overflow: hidden;
  width: min(560px, 100%);
  border: 1.5px dashed var(--stage-outline);
  border-radius: var(--shape-lg);
  padding: 56px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--stage-ink);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.dropzone::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-primary);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.dropzone:hover::before{ opacity: 0.06; }
.dropzone:focus-visible{
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}
.dropzone:hover, .dropzone:focus-visible{
  border-color: var(--md-primary);
}
.dropzone.dragover{
  border-color: var(--md-primary);
  border-style: solid;
}
.dropzone.dragover::before{ opacity: 0.10; }
.dropzone-inner{
  position: relative;
  text-align: center;
  color: var(--stage-ink);
}
.dropzone-inner svg{ color: var(--md-primary); margin-bottom: 14px; }
.dz-title{ margin: 0 0 8px; font-size: 1rem; font-weight: 600; }
.dz-sub{
  display: inline-block;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--md-on-secondary-container);
  background: var(--md-secondary-container);
  padding: 4px 12px;
  border-radius: var(--shape-full);
}

.workspace{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.workspace canvas#previewCanvas,
.workspace img#gifOutput{
  max-width: 100%;
  max-height: 60vh;
  border-radius: var(--shape-lg);
  box-shadow: var(--elevation-3);
  border: 1px solid var(--stage-outline);
  background: #000;
}
@media (max-width: 780px){
  .workspace canvas#previewCanvas,
  .workspace img#gifOutput{
    max-height: 36vh;
  }
}

.slot-strip{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.slot{
  width: 64px;
  height: 64px;
  border-radius: var(--shape-sm);
  background: rgba(215, 220, 234, 0.10);
  border: 1px solid var(--stage-outline);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}
@media (max-width: 780px){
  /* smaller frame thumbnails on phones so the sliders below have more
     visual room and can be sized up for touch */
  .slot{ width: 42px; height: 42px; }
}
.slot-num{
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--stage-ink);
  font-size: 0.9rem;
}
.slot.filled{
  border-color: var(--md-primary);
  box-shadow: var(--elevation-1);
}
.slot.filled canvas{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stage-overlay{
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 21, 30, 0.92);
  border: 1px solid var(--stage-outline);
  color: var(--stage-ink);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 18px 9px 14px;
  border-radius: var(--shape-full);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  box-shadow: var(--elevation-2);
}
.spinner{
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2.5px solid rgba(215, 220, 234, 0.25);
  border-top-color: var(--md-primary);
  animation: spin 0.7s linear infinite;
  flex: none;
}
@media (prefers-reduced-motion: reduce){
  .spinner{ animation: none; }
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.stage-error{
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--shape-xs);
  max-width: 90%;
  text-align: center;
  box-shadow: var(--elevation-3);
}

/* ---------- panel ---------- */
.panel{
  background: transparent;
  border-left: 1px solid var(--md-outline-variant);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
@media (max-width: 780px){
  .panel{ border-left: none; border-top: 1px solid var(--md-outline-variant); }
}

.panel-section.file-info{
  background: var(--md-surface-container-lowest);
  border-radius: var(--shape-md);
  padding: 14px 16px;
  box-shadow: var(--elevation-1);
}
.file-info .file-name{
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--md-on-surface);
  word-break: break-all;
}
.file-info .file-dims{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--md-on-surface-variant);
}

.control{
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--md-surface-container-lowest);
  border-radius: var(--shape-lg);
  padding: 20px 18px;
  box-shadow: var(--elevation-1);
}
.control-row{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.control-label{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-on-surface);
}
.control-val{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--md-primary);
  font-weight: 700;
}

input[type="range"]{
  --pct: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--shape-full);
  background: linear-gradient(to right,
    var(--md-primary) 0%, var(--md-primary) var(--pct),
    var(--md-surface-container-highest) var(--pct), var(--md-surface-container-highest) 100%);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--md-primary);
  cursor: pointer;
  border: 3px solid var(--md-surface-container-lowest);
  box-shadow: var(--elevation-1);
  transition: box-shadow 0.15s ease;
}
input[type="range"]:hover::-webkit-slider-thumb{
  box-shadow: 0 0 0 8px var(--state-hover), var(--elevation-1);
}
input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 8px var(--state-focus), var(--elevation-1);
}
input[type="range"]::-moz-range-track{
  height: 8px;
  border-radius: var(--shape-full);
  background: var(--md-surface-container-highest);
}
input[type="range"]::-moz-range-progress{
  height: 8px;
  border-radius: var(--shape-full);
  background: var(--md-primary);
}
input[type="range"]::-moz-range-thumb{
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--md-primary);
  cursor: pointer;
  border: 3px solid var(--md-surface-container-lowest);
  box-shadow: var(--elevation-1);
}
@media (max-width: 780px){
  /* bigger touch target for fingers — thicker track, bigger thumb */
  input[type="range"]{ height: 14px; }
  input[type="range"]::-webkit-slider-thumb{ width: 30px; height: 30px; }
  input[type="range"]::-moz-range-track{ height: 14px; }
  input[type="range"]::-moz-range-progress{ height: 14px; }
  input[type="range"]::-moz-range-thumb{ width: 30px; height: 30px; }
}

.collect-status{
  margin: 0;
  align-self: center;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--md-on-secondary-container);
  background: var(--md-secondary-container);
  padding: 6px 16px;
  border-radius: var(--shape-full);
  border: 1px solid var(--md-outline-variant);
}

.button-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 11px 20px;
  border-radius: var(--shape-full);
  border: 1px solid transparent;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.btn::before{
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: -1;
}
.btn:hover::before{ opacity: 0.08; }
.btn:focus-visible{ outline: 2px solid var(--md-primary); outline-offset: 2px; }
.btn:active{ transform: scale(0.98); }

.btn-accent{
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.btn-accent:hover{ box-shadow: var(--elevation-1); }

.btn-ghost{
  background: transparent;
  color: var(--md-primary);
  border-color: transparent;
}

.btn-outline{
  background: transparent;
  color: var(--md-on-surface);
  border-color: var(--md-outline);
}

.btn-block{ width: 100%; }
.btn:disabled{
  opacity: 1;
  background: rgba(125, 133, 152, 0.12);
  color: rgba(125, 133, 152, 0.38);
  cursor: default;
  box-shadow: none;
  transform: none;
}
.btn:disabled::before{ display: none; }

.ripple{
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  transform: scale(0);
  animation: rippleAnim 480ms ease-out;
  pointer-events: none;
}
@keyframes rippleAnim{ to{ transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .ripple{ display: none; }
}

.panel-note{
  margin: 4px 2px 0;
  font-size: 0.78rem;
  color: var(--md-on-surface-variant);
  line-height: 1.6;
}

/* ---------- theme editor (color picker overlay) ---------- */
.theme-fab{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--elevation-3);
  z-index: 60;
}
.theme-fab:hover{ filter: brightness(1.05); }

.theme-editor{
  position: fixed;
  right: 20px;
  bottom: 84px;
  width: min(320px, calc(100vw - 40px));
  max-height: 72vh;
  overflow-y: auto;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-lg);
  box-shadow: var(--elevation-3);
  padding: 18px;
  z-index: 60;
}
.theme-editor-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.theme-editor-head h2{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-on-surface);
}
.theme-editor-close{
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  color: var(--md-on-surface-variant);
}
.theme-editor-list{ margin: 4px 0 4px; }
.theme-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: 0.82rem;
  color: var(--md-on-surface);
}
.theme-row:last-child{ border-bottom: none; }
.theme-row input[type="color"]{
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 28px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-sm);
  padding: 0;
  cursor: pointer;
  background: none;
  flex: none;
}
.theme-row input[type="color"]::-webkit-color-swatch-wrapper{ padding: 2px; }
.theme-row input[type="color"]::-webkit-color-swatch{ border: none; border-radius: 4px; }

.theme-editor-actions{ margin: 10px 0 14px; }
.theme-editor-code-label{
  display: block;
  font-size: 0.72rem;
  color: var(--md-on-surface-variant);
  line-height: 1.5;
  margin: 0 0 6px;
}
.theme-editor-code{
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  padding: 10px;
  border-radius: var(--shape-sm);
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  resize: vertical;
}