/* 디자인 토큰: Wanted Design System (Montage) — Figma 변수에서 그대로 옮긴 값 */
:root {
  color-scheme: light dark;
  --primary-normal: #0066ff; --primary-strong: #005eeb; --primary-heavy: #0054d1;
  --label-strong: #000000; --label-normal: #171719; --label-neutral: #2e2f33e0; --label-alternative: #37383c9c; --label-assistive: #37383c47; --label-disable: #37383c29;
  --background-normal: #ffffff; --background-alternative: #f7f7f8;
  --background-elevated: #ffffff;
  --line-normal: #70737c38; --line-neutral: #70737c29; --line-alternative: #70737c14; --line-strong: #70737c85;
  --fill-normal: #70737c14; --fill-strong: #70737c29; --fill-alternative: #70737c0d;
  --interaction-inactive: #989ba2; --interaction-disable: #f4f4f5;
  --status-positive: #00bf40; --status-cautionary: #ff9200; --status-negative: #ff4242;
  --accent-fg-green: #009632; --accent-fg-red: #e52222; --accent-fg-violet: #5b37ed;
  --inverse-background: #1b1c1e; --inverse-label: #f7f7f8; --inverse-primary: #3385ff;
  --static-white: #ffffff;
  /* 오디오 편집 전용 */
  --wave-active: var(--primary-normal); --wave-idle: var(--interaction-inactive);
  --trim-region: rgba(0, 102, 255, 0.08); --fade-curve: var(--accent-fg-violet);
  --primary-tint: rgba(0, 102, 255, 0.08);
  /* 간격 · 모양 · 그림자 */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px;
  --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; --radius-12: 12px; --radius-16: 16px; --radius-20: 20px; --radius-full: 9999px;
  --shadow-normal: 0 0 1px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12);
  --shadow-emphasize: 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.12);
  --shadow-strong: 0 0 4px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.08), 0 6px 12px rgba(0,0,0,.12);
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary-normal: #3385ff; --primary-strong: #1a75ff; --primary-heavy: #0066ff;
    --label-strong: #ffffff; --label-normal: #f7f7f8; --label-neutral: #c2c4c8e0; --label-alternative: #aeb0b69c; --label-assistive: #aeb0b647; --label-disable: #989ba229;
    --background-normal: #1b1c1e; --background-alternative: #0f0f10; --background-elevated: #212225;
    --line-normal: #70737c52; --line-neutral: #70737c47; --line-alternative: #70737c38; --line-strong: #c2c4c885;
    --fill-normal: #70737c38; --fill-strong: #70737c47; --fill-alternative: #70737c1f;
    --interaction-inactive: #5a5c63; --interaction-disable: #2e2f33;
    --status-positive: #1ed45a; --status-cautionary: #ffa938; --status-negative: #ff6363;
    --accent-fg-green: #1ed45a; --accent-fg-red: #ff6363; --accent-fg-violet: #9e86fc;
    --inverse-background: #ffffff; --inverse-label: #171719; --inverse-primary: #0066ff;
    --trim-region: rgba(51, 133, 255, 0.14); --primary-tint: rgba(51, 133, 255, 0.14);
    --wave-idle: #70737c;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--background-alternative); color: var(--label-normal); font: 500 15px/1.467 var(--font-sans); letter-spacing: .0096em;
  display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

/* 타이포그래피 (Wanted 스케일) */
.heading1 { font: 700 22px/1.364 var(--font-sans); letter-spacing: -.0194em; }
.headline2 { font: 600 17px/1.412 var(--font-sans); letter-spacing: 0; }
.label1-bold { font: 600 14px/1.429 var(--font-sans); letter-spacing: .0145em; }
.label1 { font: 500 14px/1.429 var(--font-sans); letter-spacing: .0145em; }
.caption1 { font: 400 12px/1.334 var(--font-sans); letter-spacing: .0252em; }
.caption1-medium { font: 500 12px/1.334 var(--font-sans); letter-spacing: .025em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--label-alternative); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }
.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }
.btn .icon { width: 18px; height: 18px; }
.icon-lg { width: 40px; height: 40px; }

/* 상단/하단 바 */
.topbar { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-24); }
.logo { border-radius: var(--radius-12); background: var(--background-normal); box-shadow: var(--shadow-normal); }
.lang-btns { display: inline-flex; gap: var(--space-4); }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-8); border: 0; border-radius: var(--radius-10); cursor: pointer;
  background: none; color: var(--label-neutral); font: 600 12px/1 var(--font-sans); letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--line-normal); }
.lang-btn:hover { background: var(--fill-normal); }
.lang-btn.is-selected { box-shadow: inset 0 0 0 2px var(--primary-normal); color: var(--primary-normal); }
.lang-btn svg { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; }
@media (max-width: 480px) { .lang-btn span { display: none; } .lang-btn { padding: 0 6px; } }

/* 레이아웃 */
.panel { background: var(--background-normal); border-radius: var(--radius-20); padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; box-shadow: var(--shadow-normal); }
.panel-head { display: flex; align-items: center; gap: var(--space-8); justify-content: space-between; min-height: 40px; }

/* 버튼: Solid Primary · Solid Assistive(tonal) · Outlined · Text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); height: 40px; padding: 0 var(--space-20); border: 0;
  border-radius: var(--radius-10); font: 600 15px/1.467 var(--font-sans); letter-spacing: .0096em; cursor: pointer; white-space: nowrap; color: inherit; background: none; position: relative; }
.btn:has(.icon) { padding-left: var(--space-16); }
.btn-filled { background: var(--primary-normal); color: var(--static-white); }
.btn-filled:hover:not(:disabled) { background: var(--primary-strong); }
.btn-filled:active:not(:disabled) { background: var(--primary-heavy); }
.btn-tonal { background: var(--fill-normal); color: var(--label-neutral); }
.btn-outlined { color: var(--primary-normal); box-shadow: inset 0 0 0 1px var(--line-normal); background: var(--background-normal); }
.btn-text { color: var(--primary-normal); padding: 0 var(--space-8); height: 32px; }
.btn-outlined:hover:not(:disabled), .btn-text:hover:not(:disabled), .btn-tonal:hover:not(:disabled) { background-image: linear-gradient(var(--fill-alternative), var(--fill-alternative)); }
.btn:disabled { background: var(--interaction-disable); color: var(--label-assistive); box-shadow: none; cursor: default; }
.btn-text:disabled { background: none; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--label-alternative); cursor: pointer; flex: none; }
.icon-btn:hover:not(:disabled) { background: var(--fill-normal); color: var(--label-normal); }
.icon-btn-filled { background: var(--primary-normal); color: var(--static-white); width: 48px; height: 48px; }
.icon-btn-filled:hover:not(:disabled) { background: var(--primary-strong); color: var(--static-white); }
.icon-btn:disabled { background: var(--interaction-disable); color: var(--label-assistive); cursor: default; }
.icon-btn:not(.icon-btn-filled):disabled { background: none; }
:focus-visible { outline: 2px solid var(--primary-normal); outline-offset: 2px; }

.progress { height: 4px; border-radius: var(--radius-full); background: var(--fill-strong); overflow: hidden; }
.progress-bar { height: 100%; width: 0; border-radius: var(--radius-full); background: var(--primary-normal); transition: width .2s; }

.check { display: flex; align-items: flex-start; gap: var(--space-8); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary-normal); flex: none; }
.check-text { display: flex; flex-direction: column; gap: 2px; }
/* 칩: Chip/Filter (pill) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chip { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 var(--space-12); border: 0; border-radius: var(--radius-full);
  background: var(--background-normal); color: var(--label-neutral); box-shadow: inset 0 0 0 1px var(--line-normal); font: 500 14px/1.429 var(--font-sans); letter-spacing: .0145em; cursor: pointer; }
.chip:hover { background: var(--background-alternative); }
.chip.is-selected { padding-left: var(--space-8); background: var(--primary-tint); color: var(--primary-normal); box-shadow: inset 0 0 0 1px var(--primary-normal); font-weight: 600; }
.chip .icon { width: 16px; height: 16px; }

/* 스낵바 */
.snackbar { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 15px var(--space-20);
  border-radius: var(--radius-12); background: var(--inverse-background); color: var(--inverse-label); box-shadow: var(--shadow-strong); z-index: 10;
  font: 500 15px/1.467 var(--font-sans); }

/* ===== GIF 메이커 전용 ===== */
.layout { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--space-24) var(--space-32); }
@media (max-width: 860px) { .layout { padding: 0 var(--space-16) var(--space-24); } .topbar { padding-left: var(--space-16); padding-right: var(--space-16); } }
.pane { display: flex; flex-direction: column; gap: var(--space-16); }

/* 탭 */
.tabs { display: flex; gap: var(--space-4); padding: 0 var(--space-24) var(--space-12); max-width: 1440px; width: 100%; margin: 0 auto; flex-wrap: wrap; }
@media (max-width: 860px) { .tabs { padding: 0 var(--space-16) var(--space-12); } }
.tab { height: 40px; padding: 0 var(--space-16); border: 0; border-radius: var(--radius-full); cursor: pointer; background: transparent; color: var(--label-neutral);
  font: 600 15px/1 var(--font-sans); box-shadow: inset 0 0 0 1px var(--line-normal); }
.tab:hover { background: var(--fill-alternative); }
.tab.is-selected { background: var(--primary-tint); color: var(--primary-normal); box-shadow: inset 0 0 0 1.5px var(--primary-normal); }

/* 파일 놓는 영역 */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-24) var(--space-16); text-align: center; cursor: pointer;
  background: var(--background-normal); border-radius: var(--radius-20); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.dropzone:hover, .dropzone:focus-visible, body.is-dragging .dropzone { background: var(--primary-tint); box-shadow: inset 0 0 0 1.5px var(--primary-normal); }
.dropzone .icon-lg { color: var(--primary-normal); }
.mk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-16); align-items: start; }
@media (max-width: 1000px) { .mk-grid { grid-template-columns: minmax(0, 1fr); } }
.mk-left, .mk-right { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }

/* 폼 */
.row { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.inline { display: inline-flex; align-items: center; gap: var(--space-8); }
.num, select, input[type=color] { height: 36px; border: 0; border-radius: var(--radius-10); box-shadow: inset 0 0 0 1px var(--line-normal); background: var(--background-normal); color: var(--label-normal);
  font: 500 14px/1 var(--font-sans); padding: 0 var(--space-8); }
.num { width: 76px; font-variant-numeric: tabular-nums; }
input[type=color] { width: 44px; padding: 3px; cursor: pointer; }
.num:focus, select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary-normal); }
.num:disabled { background: var(--interaction-disable); color: var(--label-disable); }
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-12); border-radius: var(--radius-full); background: var(--background-normal); color: var(--label-neutral);
  box-shadow: inset 0 0 0 1px var(--line-normal); font: 500 13px/1 var(--font-sans); white-space: nowrap; }
.seg label:hover span { background: var(--background-alternative); }
.seg input:checked + span { background: var(--primary-tint); color: var(--primary-normal); box-shadow: inset 0 0 0 1px var(--primary-normal); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--primary-normal); outline-offset: 2px; }
.check.inline { align-items: center; }
.check.inline input { margin: 0; }
.warn { color: var(--status-cautionary); }
.btn-sm { height: 32px; padding: 0 var(--space-12); font-size: 14px; }
a.btn { text-decoration: none; }
.toolbar { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }

/* 미리보기 플레이어 */
.stage { display: grid; place-items: center; min-height: 200px; padding: var(--space-12); border-radius: var(--radius-12); position: relative;
  background: repeating-conic-gradient(var(--fill-alternative) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px, var(--background-alternative); }
.stage canvas { max-width: 100%; max-height: 360px; width: auto; height: auto; display: block; }
.stage .stage-empty { position: absolute; }

/* 프레임 목록 */
.frames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-8); }
.fr { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-12); background: var(--background-alternative);
  box-shadow: inset 0 0 0 1px var(--line-neutral); position: relative; min-width: 0; }
.fr.is-skipped .fr-thumb { opacity: .35; }
.fr.is-over { box-shadow: inset 0 0 0 2px var(--primary-normal); }
.fr.is-dragging { opacity: .4; }
.fr-thumb { position: relative; height: 84px; display: grid; place-items: center; border-radius: var(--radius-8); cursor: grab; overflow: hidden;
  background: repeating-conic-gradient(var(--fill-alternative) 0% 25%, transparent 0% 50%) 0 0 / 12px 12px, var(--background-normal); }
.fr-thumb img { max-width: 100%; max-height: 100%; display: block; pointer-events: none; }
.fr-n { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: var(--radius-full); background: var(--inverse-background); color: var(--inverse-label); font: 600 11px/1.4 var(--font-sans); }
.fr-name { font: 500 12px/1.3 var(--font-sans); color: var(--label-alternative); }
.fr-delay { display: flex; align-items: center; gap: 4px; }
.fr-delay .num { width: 100%; min-width: 0; height: 30px; }
.fr-delay.is-warn .num { box-shadow: inset 0 0 0 2px var(--status-cautionary); }
.fr-act { display: flex; align-items: center; justify-content: space-between; }
.fr-act .icon-btn { width: 30px; height: 30px; }
.fr-act .icon { width: 18px; height: 18px; }
.fr-skip { display: flex; align-items: center; gap: 4px; font: 500 12px/1.3 var(--font-sans); color: var(--label-neutral); cursor: pointer; }
.fr-skip input { accent-color: var(--primary-normal); margin: 0; }

/* 상태 배지 */
.status { flex: none; padding: 3px var(--space-8); border-radius: var(--radius-6); font: 600 12px/1.334 var(--font-sans); letter-spacing: .025em; white-space: nowrap; }
.status-queued, .status-loading { background: var(--fill-normal); color: var(--label-alternative); }
.status-processing { background: var(--primary-tint); color: var(--primary-normal); }
.status-done { background: rgba(0, 191, 64, 0.1); color: var(--accent-fg-green); }
.status-error { background: rgba(255, 66, 66, 0.1); color: var(--accent-fg-red); }

/* GIF → WebP 표 */
.table-wrap { overflow-x: auto; }
table.files { width: 100%; border-collapse: collapse; font: 500 14px/1.4 var(--font-sans); }
.files th { text-align: left; padding: var(--space-8); color: var(--label-alternative); font: 500 12px/1.3 var(--font-sans); border-bottom: 1px solid var(--line-neutral); white-space: nowrap; }
.files td { padding: var(--space-8); border-bottom: 1px solid var(--line-alternative); vertical-align: middle; font-variant-numeric: tabular-nums; }
.files .num-col { text-align: right; }
.files tr.is-selected td { background: var(--primary-tint); }
.files tbody tr { cursor: pointer; }
.files .nm { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.files .err { color: var(--accent-fg-red); font-size: 12px; white-space: normal; max-width: 280px; }
.files .good { color: var(--accent-fg-green); }
.files .bad { color: var(--accent-fg-red); }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
@media (max-width: 600px) { .compare { grid-template-columns: 1fr; } }
.compare figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; padding: var(--space-8); border-radius: var(--radius-12);
  background: repeating-conic-gradient(var(--fill-alternative) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px, var(--background-alternative); }
.compare img { max-width: 100%; max-height: 360px; display: block; }
.result-img { display: grid; place-items: center; padding: var(--space-12); border-radius: var(--radius-12);
  background: repeating-conic-gradient(var(--fill-alternative) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px, var(--background-alternative); overflow: auto; }
.result-img img { max-width: 100%; display: block; }

/* 옵션 그룹: 제목과 내용을 구분선·굵기·간격으로 나눔 */
.opts { gap: 0; }
.opts > .headline2 { padding-bottom: var(--space-4); }
.opt { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-20) 0; border-top: 1px solid var(--line-neutral); min-width: 0; }
.opt-head { display: flex; align-items: center; gap: var(--space-8); }
.opt-title { margin: 0; font: 700 16px/1.375 var(--font-sans); letter-spacing: -.0058em; color: var(--label-strong); }
.opt-body { display: flex; flex-direction: column; gap: var(--space-12); color: var(--label-neutral); min-width: 0; }
.opt-actions { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-20); border-top: 1px solid var(--line-neutral); }
.sublabel { display: inline-flex; align-items: center; gap: var(--space-4); font: 500 13px/1.385 var(--font-sans); color: var(--label-alternative); }
.field-col { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.field-col .check.inline { height: 36px; }
.toolbar .sublabel { white-space: nowrap; }

/* ? 도움말 버튼 + 툴팁 */
.help { width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--fill-strong); color: var(--label-alternative);
  font: 700 12px/18px var(--font-sans); text-align: center; cursor: help; flex: none; }
.help:hover, .help:focus-visible, .help[aria-expanded="true"] { background: var(--primary-tint); color: var(--primary-normal); }
.tooltip { position: fixed; left: 0; top: 0; z-index: 30; width: max-content; max-width: 280px; padding: var(--space-8) var(--space-12); border-radius: var(--radius-10);
  background: var(--inverse-background); color: var(--inverse-label); box-shadow: var(--shadow-strong); font: 500 13px/1.45 var(--font-sans); letter-spacing: .01em;
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
.tooltip.is-open { opacity: 1; visibility: visible; }
.icon-btn-tonal { background: var(--fill-normal); color: var(--label-neutral); width: 48px; height: 48px; }
.icon-btn-tonal:hover:not(:disabled) { background: var(--fill-strong); color: var(--label-normal); }

.estimate { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--label-neutral); font-variant-numeric: tabular-nums; }