/* 디자인 토큰: 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); }
.bottombar { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-24);
  background: var(--background-normal); border-top: 1px solid var(--line-neutral); }
.export-status { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); color: var(--label-neutral); }

/* 레이아웃 */
.layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-24) var(--space-24); align-items: start; }
@media (max-width: 860px) { .layout { padding: 0 var(--space-16) var(--space-16); } .topbar, .bottombar { padding-left: var(--space-16); padding-right: var(--space-16); } }
.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; }
.hint { margin-top: calc(-1 * var(--space-4)); }
.editor-panel { gap: var(--space-12); }

/* 버튼: 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; }

/* 파일 목록: 편집기 위 가로 한 줄 */
.file-list { display: flex; gap: var(--space-8); overflow-x: auto; padding-bottom: 2px; }
.file { flex: 0 0 248px; min-width: 0; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-4) var(--space-8) var(--space-8);
  background: var(--background-normal); border-radius: var(--radius-12); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-neutral); }
.file:hover { background: var(--background-alternative); }
.file.is-selected { background: var(--primary-tint); box-shadow: inset 0 0 0 1.5px var(--primary-normal); }
.file-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--radius-10); background: var(--fill-normal); color: var(--label-alternative); }
.file.is-selected .file-avatar { background: var(--primary-normal); color: var(--static-white); }
.file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-name { font: 600 15px/1.467 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--label-alternative); font: 500 13px/1.385 var(--font-sans); letter-spacing: .0192em; font-variant-numeric: tabular-nums; }
.file-error { color: var(--accent-fg-red); font: 500 12px/1.334 var(--font-sans); }
/* 상태 배지: Content Badge(Solid) */
.status { flex: none; padding: 3px var(--space-8); border-radius: var(--radius-6); font: 600 12px/1.334 var(--font-sans); letter-spacing: .025em; }
.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); }
.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; }

/* 파형 */
.wave { position: relative; height: 136px; background: var(--background-alternative); border-radius: var(--radius-12); touch-action: none; }
.wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wave-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--space-16); }
.drop-prompt { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.drop-prompt .icon-lg { color: var(--primary-normal); margin-bottom: var(--space-4); }
.wave.is-empty { cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.wave.is-empty:hover { box-shadow: inset 0 0 0 1.5px var(--primary-normal); }
body.is-dragging .wave { background: var(--primary-tint); box-shadow: inset 0 0 0 1.5px var(--primary-normal); }
.handle { position: absolute; top: 0; bottom: 0; width: 24px; margin-left: -12px; cursor: ew-resize; display: none; }
.wave.has-file .handle { display: block; }
.handle::after { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--primary-normal); }
.handle::before { content: ''; position: absolute; left: 4px; top: 50%; width: 16px; height: 40px; margin-top: -20px; border-radius: var(--radius-full);
  background: var(--static-white); box-shadow: inset 0 0 0 2px var(--primary-normal), var(--shadow-emphasize); }
.handle:focus-visible { outline: none; }
.handle:focus-visible::before { background: var(--primary-normal); }
.trim-row { display: flex; align-items: flex-end; gap: var(--space-12); flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: var(--space-4); }
.field input { width: 112px; height: 40px; padding: 0 var(--space-12); border-radius: var(--radius-10); border: 0; box-shadow: inset 0 0 0 1px var(--line-normal);
  background: var(--background-normal); color: var(--label-normal); font: 500 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary-normal); }
.field input:disabled { background: var(--interaction-disable); color: var(--label-disable); }
.trim-row #trimLen { padding-bottom: 10px; font-variant-numeric: tabular-nums; }

/* 설정 카드 */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--background-alternative); border-radius: var(--radius-16); padding: var(--space-16) var(--space-20); display: flex; flex-direction: column; gap: var(--space-16); }
.sl { display: flex; flex-direction: column; gap: var(--space-8); }
.sl-head { display: flex; justify-content: space-between; align-items: baseline; }
.sl-label { font: 500 14px/1.429 var(--font-sans); color: var(--label-neutral); }
.sl-value { font: 600 14px/1.429 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--primary-normal); border: 0; background: none; padding: 0; cursor: pointer; }
.sl input { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; }
.sl input::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--primary-normal) var(--fill), var(--fill-strong) var(--fill)); }
.sl input::-moz-range-track { height: 4px; border-radius: var(--radius-full); background: var(--fill-strong); }
.sl input::-moz-range-progress { height: 4px; border-radius: var(--radius-full); background: var(--primary-normal); }
.sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: var(--radius-full); background: var(--static-white); border: 0; box-shadow: var(--shadow-emphasize); }
.sl input::-moz-range-thumb { width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--static-white); border: 0; box-shadow: var(--shadow-emphasize); }
.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; }
.sl-sub { margin-top: calc(-1 * var(--space-4)); text-align: right; font-variant-numeric: tabular-nums; }
/* 카드 제목 + 도움말(?) 툴팁 */
.card-head { position: relative; display: flex; align-items: center; gap: var(--space-4); }
.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; }
.help:hover, .help:focus-visible { background: var(--primary-tint); color: var(--primary-normal); }
.tooltip { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; 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); opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
.help:hover + .tooltip, .help:focus-visible + .tooltip { opacity: 1; visibility: visible; }
/* 칩: 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; }
/* 음질 칩: 단어 + 아래 작은 kbps */
.chips-quality { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips-quality .chip, .chips-quality .chip.is-selected { height: auto; min-height: 44px; padding: var(--space-4) var(--space-4); justify-content: center; border-radius: var(--radius-12); }
.chips-quality .chip .icon { display: none; }
.chip-text { display: flex; flex-direction: column; align-items: center; line-height: 1.3; text-align: center; }
.chip-main { white-space: nowrap; }
.chip-sub { font: 500 10px/1.3 var(--font-sans); letter-spacing: .02em; color: var(--label-alternative); font-variant-numeric: tabular-nums; }
.chip.is-selected .chip-sub { color: var(--primary-normal); opacity: .8; }

/* 스낵바 */
.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); }

/* 낮은 PC 화면(노트북 등): 세로 여백을 줄여 한 화면에 들어오게 */
@media (min-width: 861px) and (max-height: 780px) {
  .topbar { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .layout { padding-bottom: var(--space-12); }
  .panel { padding: var(--space-12) var(--space-16); }
  .wave { height: 96px; }
  .wave-empty { padding: var(--space-8); }
  .drop-prompt { gap: 0; }
  .drop-prompt .icon-lg { width: 24px; height: 24px; margin-bottom: 2px; }
  .card { padding: var(--space-12) var(--space-16); gap: var(--space-8); }
  .bottombar { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}