/* PPUSUNO D안 · 마스터링 테마 — studio/index.html 전용. site.css → studio/styles.css(원본 앱) → 이 파일 순서로 덮어요.
   원칙(DESIGN_PLAN_V3.md): 밝은 회색 흑백, 잉크 #0C0C0C, 이름만 Galmuri 픽셀, 글은 IBM Plex Sans KR, 숫자는 Plex Mono.
   신호색(분홍 ■)은 '지금'에만: 지금 도구 탭, 지금 작업 단계, 고른 A/B·형식. 그림자·그라데이션·블러 없음, 모서리는 버튼·칩 2px, 나머지 0.
   처리 코드(studio/*.js)는 그대로예요. 파형 캔버스 색은 app.js에 박혀 있어(#087f89 등) CSS filter로만 흑백으로 바꿔요.
   선택자는 .studio(앱을 감싼 칸) 아래로 묶어 원본 styles.css보다 한 단 세게 이겨요. !important는 원본이 !important를 쓴 곳과
   모서리·그림자 일괄 정리에만 써요. */

/* ── 1. 토큰: 원본 이름을 D 값으로(원본 규칙이 var()로 읽는 곳은 이것만으로 바뀌어요) ── */
:root{
  --ink:#0C0C0C; --line:rgba(12,12,12,.14); --line-2:rgba(12,12,12,.3);
  --teal:#0C0C0C; --teal-bright:#0C0C0C; --teal-dark:#0C0C0C; --teal-soft:rgba(12,12,12,.06); --teal-light:rgba(12,12,12,.06);
  --navy:#0C0C0C; --slate:#3A3A38; --muted:#5E5E5A; --line-strong:rgba(12,12,12,.3);
  --soft:#F6F6F4; --surface:#F6F6F4; --page:#ECECEA; --border:rgba(12,12,12,.14); --card:#F6F6F4;
  --radius-lg:0; --radius-md:0; --radius-sm:2px;
  --shadow:none; --shadow-lift:none; --ring:0 0 0 2px #0C0C0C;
  --font:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0C0C' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* 고대비(앱 기능): 원본은 body.high-contrast에 청록 값을 다시 넣어요. D는 선·보조 글을 더 진하게 */
body.high-contrast{
  --teal:#000; --teal-dark:#000; --teal-bright:#000; --navy:#000; --ink:#000; --ink-2:#1A1A1A; --mute:#2E2E2C; --muted:#2E2E2C; --slate:#1A1A1A;
  --line:rgba(0,0,0,.55); --line-2:rgba(0,0,0,.8); --line-strong:rgba(0,0,0,.8); --teal-soft:rgba(0,0,0,.1); --shadow:none;
}
html,body,body.high-contrast{background:var(--paper)}
body{font-family:var(--sans);letter-spacing:-.005em;color:var(--ink)}

/* ── 2. 페이지 틀: 빵부스러기·도구 탭(왼쪽 이름 칸) + 앱 ── */
.spage{padding-bottom:56px}
.shead{padding-bottom:20px}
.stabs{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:8px}
.stabs__a{position:relative;display:inline-flex;align-items:center;min-height:56px;font:700 33px/1 var(--px);letter-spacing:0;font-synthesis:none;
  color:var(--mute);text-decoration:none;white-space:nowrap}
.stabs__a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.stabs__a:hover{color:var(--ink)}
.stabs__a:hover::after{transform:scaleX(1)}
.stabs__a:active{transform:translateY(1px)}
.stabs__a[aria-current="page"]{color:var(--ink)}
.stabs__a[aria-current="page"]::after{transform:scaleX(1)}
.stabs__a[aria-current="page"]::before{content:"";flex:none;width:9px;height:9px;margin-right:12px;background:var(--signal)}
.stabs__ext{margin-left:6px;font:400 .5em/1 var(--mono);transform:translateY(-.5em)}
.shead__lede{margin-top:16px;max-width:34rem;font:400 17px/1.65 var(--sans);color:var(--ink-2);text-wrap:pretty}
.shead__meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font:400 14px/1.5 var(--sans);color:var(--mute)}
.shead__meta .n{font-size:13px;color:var(--ink-2)}
.shead__links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:8px}
.shead__links a{display:inline-flex;align-items:center;min-height:44px;font:600 15px/1.3 var(--sans);color:var(--ink);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--line-2)}
.shead__links a:hover{text-decoration-color:var(--ink)}
.shead__links a::after{content:"↗";content:"↗" / "";margin-left:4px;font:400 12px/1 var(--mono);color:var(--mute)}

/* 중간 폭(960–1439): 도구 탭은 왼쪽, 한 줄·출처·링크는 오른쪽 칸에서 탭 바닥에 맞춰요(D 프로그램·유튜브 머리와 같은 문법) */
@media (min-width:960px) and (max-width:1439.98px){
  .shead{display:grid;grid-template-columns:auto minmax(0,34rem);column-gap:64px;align-items:end;padding-bottom:28px}
  .shead .crumbs{grid-column:1 / -1}
  .stabs{grid-column:1;grid-row:2 / span 3;align-self:end;gap:0 32px}
  .stabs__a{font-size:44px;min-height:64px}
  .shead__lede,.shead__meta,.shead__links{grid-column:2}
  .shead__lede{margin-top:20px}
}
/* 넓은 화면(1440 이상): 왼쪽 이름 칸(D 홈·CHO와 같은 문법) + 오른쪽 앱. 오른쪽 칸이 1028px 이상이라 앱의 넓은 배치(EQ 940px 등)가 들어가요.
   그보다 좁으면 머리를 앱 위에 쌓아 앱이 화면 폭을 다 써요. */
@media (min-width:1440px){
  .spage{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:40px;align-items:start}
  .shead{position:sticky;top:calc(var(--top-h) + 8px);padding-bottom:32px}
  .stabs{flex-direction:column;gap:0;margin-top:20px;border-top:1px solid var(--line)}
  .stabs__a{min-height:76px;font-size:44px;border-bottom:1px solid var(--line)}
  .stabs__a::after{bottom:-1px}
  .studio{padding-top:28px}
}

/* file:// 안내 · JS 꺼짐 안내 */
.snote{margin:8px 0 20px;padding:20px 22px;border:1px solid var(--ink);background:var(--sheet)}
.snote p{font:400 15px/1.6 var(--sans);color:var(--ink-2)}
.snote p + p{margin-top:8px}
.snote__t{font-weight:600!important;font-size:17px!important;color:var(--ink)!important}
.snote__cmd code{display:inline-block;padding:6px 10px;background:var(--ink);color:var(--paper);font:500 14px/1.4 var(--mono);overflow-wrap:anywhere}
.is-file .studio main,.is-file .studio .app-header{opacity:.45}

/* ── 3. 앱 전체: 틀·글자·모서리·그림자 ── */
.studio{min-width:0;font:400 15px/1.5 var(--sans);color:var(--ink)}
.studio *,.studio *::before,.studio *::after{box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important}
.studio :is(.surface-card,.upload-card,.processing-card,.eq-card,.effect-card,.sound-map,.ab-player,.export-panel,.result-master-settings,
  .compare-section,.optional-tools,.optional-tools > summary,.genre-required-choice,.fade-settings,.intro-fade-option,.drop-zone,.privacy-row,
  .uploaded-strip,.developer-entry,.studio-box,.batch-drop,.batch-progress,.file-icon,.waveform-overview,.analysis-panel,.analysis-tasks,
  .secure-note,.preset-card,.guide-grid details,.live-preview-panel,.browser-download-warning,.format-option > span,.trim-timeline,
  .trim-summary,.quality-gate-grid li,.metric-grid article,.spatial-card,.advanced-module,.studio-tuning-panel,.auto-eq-report,
  .master-chain-report,.batch-comparison,.session-resume,.job-banner,.toast,.settings-dialog,.export-recovery,.ready-download,.analysis-failure,
  .analysis-fallback,.safe-result-card,.wave-row,.listening-goal,.drum-settings,.ambience-settings,.separator-progress progress){border-radius:0!important}
.studio :is(button,select,input[type="number"],input[type="text"],.access-button,.outline-button,.primary-button,.text-button,.reset-button,
  .icon-button,.header-project,.listen-choice,.preset-card,.transport-play,.transport-seek,.guide-grid details button,.family-footer a,
  .disclosure-mark,.analysis-tasks em,.headphone-badge,.analysis-count,.trim-safe-badge,.studio-chain-badge,.safe-result-badge){border-radius:2px!important}
.studio :is(h1,h2,h3){letter-spacing:-.01em;word-break:keep-all;text-wrap:balance}
.studio :is(.wide-shell,.process-shell,.tune-shell,.compare-shell){width:auto!important;max-width:none!important;margin:0!important;padding-inline:0!important}
.studio :is(.process-shell,.compare-shell){max-width:1120px!important}   /* 원본 compare-shell 최대 폭. 왼쪽 여백 선에 붙여요 */
.studio :is(.wide-shell,.process-shell,.tune-shell,.compare-shell){padding-top:20px!important}
/* 숫자(시간·LUFS·dB·%)는 고정폭 + 표 숫자. 한글이 섞이면 Plex Sans KR로 떨어져요 */
.studio :is(time,output,.time-ticks,[data-current-time],[data-duration],[data-time-left],[data-gate-value],[data-file-meta],[data-export-summary],
  .metric-grid article p,.trim-time-readouts,.trim-ticks,.trim-duration-readout,.analysis-progress-number,.eq-axis,
  .separator-progress span,[data-batch-time],[data-progress-text],
  .workflow-steps li > span,.compact-stepper button span,.batch-list li > span){font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
/* 좁은 숫자 칸(EQ·Q·모듈 값·페이드 초)은 원본 칸 폭에 맞춰 비례 글꼴 + 표 숫자(고정폭은 '0.76'이 잘려요) */
.studio :is(.gain-readout input,.q-readout input,.studio-value-input input,.compact-gain-input input,.fade-duration input){font-family:var(--sans);font-variant-numeric:tabular-nums}
.studio .q-readout{font-family:var(--sans)}
/* EQ 무대: 원본 데스크톱 값 1120px 대신 원본 휴대폰 값 940px(D의 오른쪽 칸 1028px에 들어가요) */
.studio .eq-stage{min-width:940px}

/* 초점: D 공통(2px 잉크, 3px 띄움). 화면이 바뀔 때 앱이 제목(tabindex=-1)으로 옮기는 초점은 테두리를 그리지 않아요 */
.studio :is(button,a,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--ink)!important;outline-offset:3px!important;box-shadow:none!important}
.studio :is(h1,h2,h3,strong,main,section,div)[tabindex="-1"]:focus,.studio main:focus{outline:none!important}
.studio .wave-row:focus-within{outline:2px solid var(--ink)!important;outline-offset:-2px!important}

/* ── 4. 버튼·입력 ── */
.studio .primary-button{min-height:44px;padding:0 22px;border:1px solid var(--ink);background:var(--ink)!important;color:var(--paper);
  font:600 15px/1.25 var(--sans);letter-spacing:-.005em;filter:none!important;transition:background-color .15s linear,color .15s linear}
.studio .primary-button:hover:not(:disabled){background:transparent!important;color:var(--ink);transform:none}
.studio .primary-button:active:not(:disabled){transform:translateY(1px)}
.studio .primary-button svg{width:20px;height:20px}
.studio :is(.outline-button,.reset-button,.icon-button,.header-project,.access-button){min-height:44px;border:1px solid var(--line-2);background:transparent;color:var(--ink);
  font:600 14px/1.2 var(--sans);transition:border-color .15s linear,background-color .15s linear,color .15s linear}
.studio :is(.outline-button,.reset-button,.icon-button,.header-project,.access-button):hover:not(:disabled){border-color:var(--ink);background:var(--wash);color:var(--ink)}
.studio :is(.outline-button,.reset-button,.icon-button,.access-button):active:not(:disabled){transform:translateY(1px)}
.studio :is(.access-button,.outline-button,.preview-toggle)[aria-pressed="true"],
.studio :is(.access-button,.outline-button,.preview-toggle)[aria-pressed="true"]:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:var(--paper)}
.studio .text-button{min-height:44px;padding:0 2px;border:0;background:none;color:var(--ink);font:600 14px/1.3 var(--sans);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--line-2);cursor:pointer}
.studio .text-button:hover{text-decoration-color:var(--ink)}
.studio a{color:var(--ink)}
.studio :is(.rights-note,.site-notices) a{color:var(--ink);text-decoration-color:var(--line-2)}
.studio :is(.rights-note,.site-notices) a:hover{text-decoration-color:var(--ink)}
.studio select,.studio .genre-required-choice select,.studio .result-genre-label select,.studio .batch-options select,.studio .settings-dialog select,
.studio .source-profile-select select{min-height:44px;border:1px solid var(--line-2);background:var(--paper) var(--select-arrow) no-repeat right 12px center / 16px;
  color:var(--ink);font:600 15px/1.2 var(--sans);appearance:none}
.studio select:hover{border-color:var(--ink)}
.studio input[type="number"],.studio input[type="text"]{border:1px solid var(--line-2);background:var(--paper);color:var(--ink)}
.studio input[type="checkbox"],.studio input[type="radio"],.studio input[type="range"],.studio progress{accent-color:var(--ink)}
.studio input[type="file"]{font:400 14px/1.4 var(--sans);color:var(--ink-2)}
.studio input[type="file"]::file-selector-button{min-height:40px;margin-right:12px;padding:0 14px;border:1px solid var(--ink);border-radius:2px;background:transparent;
  color:var(--ink);font:600 14px/1 var(--sans);cursor:pointer}
.studio input[type="file"]::file-selector-button:hover{background:var(--ink);color:var(--paper)}
/* 원본이 따로 칠한 막대 손잡이(청록) */
.studio input[type="range"]::-webkit-slider-thumb{background:var(--ink)!important;border-color:var(--ink)!important}
.studio input[type="range"]::-moz-range-thumb{background:var(--ink)!important;border-color:var(--ink)!important}
.studio .switch{color:var(--ink)}
.studio .switch i{width:40px;height:22px;border-radius:0!important;background:var(--line-2)}
.studio .switch i::after{top:3px;left:3px;width:16px;height:16px;border-radius:0!important;background:var(--paper)}
.studio .switch input:checked + i{background:var(--ink)}
.studio .switch input:focus-visible + i{outline:2px solid var(--ink);outline-offset:3px}

/* ── 5. 앱 머리(작업 막대) ── */
.studio .app-header{height:auto!important;min-height:64px;padding:8px 0!important;column-gap:20px;border-bottom:1px solid var(--line);background:transparent!important}
.studio .brand{gap:12px;color:var(--ink)!important;font:700 22px/1 var(--px)!important;letter-spacing:0!important;min-height:44px}
.studio .brand-mark,body:not([data-screen="tune"]) .studio .brand-mark{display:block;width:32px!important;height:32px!important;padding:6px!important;
  border-radius:0!important;background:var(--ink)!important;color:var(--paper)!important;stroke-width:2.2}
.studio .access-actions{gap:8px}
.studio .access-button{min-height:44px;padding:0 14px;font-size:14px}
.studio .access-button b{font-size:16px;font-weight:600}
.studio .support-link,.studio a.support-link,.studio a.access-button{background:transparent;color:var(--ink)}
.studio .contrast-dot{border-color:var(--ink);background:linear-gradient(90deg,var(--ink) 50%,var(--paper) 50%)}
.studio .access-button[aria-pressed="true"] .contrast-dot{border-color:var(--paper);background:linear-gradient(90deg,var(--paper) 50%,var(--ink) 50%)}
.studio .compact-stepper{border:0;background:transparent;padding:0}
.studio .compact-stepper button{min-height:44px;color:var(--ink-2);font:400 14px/1 var(--sans)}
.studio .compact-stepper button span{border-radius:0!important;border-color:var(--line-2)}
.studio .compact-stepper button[aria-current="step"]{color:var(--ink);font-weight:600}
.studio .compact-stepper button[aria-current="step"] span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.studio .compact-stepper i{color:var(--mute)}
.studio .export-shortcut{color:var(--ink)}
.studio .job-banner{background:var(--ink);color:var(--paper);font:400 14px/1.4 var(--sans)}
.studio .job-banner button{min-height:44px;color:var(--paper)}

/* ── 6. 작업 단계(1 파일 선택 → 2 자동 보정 → 3 듣고 저장) ── */
.studio .workflow-steps{width:auto!important;max-width:100%;margin:0 0 24px!important;padding:0!important;gap:0!important;border:0!important;
  background:transparent!important;justify-content:flex-start!important;color:var(--mute);font:400 14px/1.2 var(--sans)}
.studio .workflow-steps li{position:relative;gap:10px!important;min-height:44px;padding:0 20px 0 0!important;border-radius:0!important;background:transparent!important}
.studio .workflow-steps li + li{padding-left:20px!important;border-left:1px solid var(--line)}
.studio .workflow-steps li > span{width:26px!important;height:26px!important;border:1px solid var(--line-2)!important;border-radius:0!important;
  background:transparent!important;color:var(--ink-2);font-size:13px;font-weight:500}
.studio .workflow-steps [aria-current="step"]{color:var(--ink);font-weight:600}
.studio .workflow-steps [aria-current="step"] > span{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important}
.studio .workflow-steps [aria-current="step"]::after{content:"";position:absolute;left:0;right:20px;bottom:4px;height:2px;background:var(--ink)}
.studio .workflow-steps li + li[aria-current="step"]::after{left:20px}

/* ── 7. 1 업로드 ── */
.studio .upload-card{width:auto;max-width:1028px;margin:0!important;padding:32px 32px 28px!important;border:1px solid var(--line);background:var(--sheet)!important}
/* 카드(--sheet) 안의 칸은 바탕을 비우고 1px 선만: 종이 위에 한 장, 그 안은 선으로 나눠요 */
.studio .upload-card :is(.genre-required-choice,.fade-settings,.privacy-row,.optional-tools,.developer-entry,.drop-zone,.studio-box),
.studio .processing-card :is(.waveform-overview,.analysis-panel,.analysis-tasks,.secure-note),
.studio .ab-player .wave-row{background-color:transparent!important}
.studio .upload-card .optional-tools > summary:hover,.studio .upload-card .developer-entry:hover,.studio .upload-card .drop-zone:hover{background-color:var(--wash)!important}
.studio .upload-heading{gap:20px;margin-bottom:24px}
.studio .round-feature{flex:0 0 56px!important;width:56px!important;height:56px!important;border-radius:0!important;background:var(--ink)!important;color:var(--paper)}
.studio .round-feature::after{display:none}
.studio .round-feature svg{width:30px!important;height:30px!important}
.studio .upload-heading .eyebrow{display:none}    /* 'BROWSER AUDIO MASTERING' 대문자 라벨: 도구 이름은 위 탭이 말해요 */
.studio .upload-heading h1{margin:0 0 6px!important;font:600 28px/1.3 var(--sans)!important;letter-spacing:-.02em!important;color:var(--ink)}
.studio .upload-heading p{font-size:15px;line-height:1.65;color:var(--ink-2)}
.studio .developer-entry{padding:16px 18px!important;border:1px solid var(--line)!important;background:var(--paper)!important;color:var(--ink);transform:none!important}
.studio .developer-entry:hover{border-color:var(--ink)!important;background:var(--wash)!important}
.studio .developer-entry strong{color:var(--ink);font-weight:600}
.studio .developer-entry small{color:var(--ink-2)}
.studio .developer-entry > span:last-child{width:36px!important;height:36px!important;border:1px solid var(--line-2);border-radius:0!important;background:transparent!important;font-family:var(--mono)}
.studio .genre-required-choice{padding:18px 20px!important;border:1px solid var(--line-2)!important;background:var(--paper)!important}
.studio .genre-required-choice.is-selected{border-color:var(--ink)!important;background:var(--paper)!important}
.studio .genre-required-choice label{color:var(--ink);font:600 16px/1.3 var(--sans)}
.studio .genre-required-choice p{color:var(--ink-2);font-size:14px}
.studio .fade-settings,.studio .intro-fade-option{border:1px solid var(--line)!important;background:transparent!important}
.studio .fade-settings legend{color:var(--ink);font:600 15px/1.3 var(--sans)}
.studio .fade-settings legend small{color:var(--mute);font-weight:400}
.studio .fade-settings p{color:var(--ink-2)}
.studio .fade-duration input{min-height:44px;width:80px;border:1px solid var(--line-2)!important}
.studio .fade-enable{min-height:44px}   /* 체크 칸을 감싼 label 전체가 누르는 곳(44px) */
.studio .drop-zone{border:1px dashed var(--ink-2)!important;background:var(--paper)!important;transform:none!important}
.studio .drop-zone:hover{border-color:var(--ink)!important;background:var(--wash)!important}
.studio .drop-zone.dragging{border:1px solid var(--ink)!important;background:var(--wash)!important}
.studio .drop-zone > svg{width:56px!important;height:56px!important;padding:14px!important;border-radius:0!important;background:transparent!important;
  border:1px solid var(--ink);color:var(--ink)!important}
.studio .drop-zone h2{color:var(--ink);font:600 21px/1.35 var(--sans)}
.studio .drop-zone p{color:var(--ink-2)}
.studio .drop-zone small{color:var(--mute)}
.studio .rights-note,.studio .session-note,.studio .session-note span{color:var(--ink-2)}
.studio .privacy-row{border:1px solid var(--line);background:var(--paper)!important;color:var(--ink-2)}
.studio .privacy-row svg,.studio .secure-note > svg{color:var(--ink)!important}
.studio .optional-tools{margin-bottom:-1px!important;border:1px solid var(--line)!important;background:var(--paper)!important}
.studio .optional-tools:hover{border-color:var(--line-2)!important}
.studio .optional-tools[open]{position:relative;z-index:1;border-color:var(--ink)!important}
.studio .optional-tools > summary{min-height:64px}
.studio .optional-tools > summary:hover{background:var(--wash)}
.studio .optional-tools summary strong{color:var(--ink);font:600 16px/1.35 var(--sans)}
.studio .optional-tools summary small{color:var(--ink-2)}
.studio .disclosure-mark{width:32px!important;height:32px!important;border:1px solid var(--line-2);background:transparent!important;color:var(--ink);font-family:var(--mono)}
.studio .optional-tools > summary:hover .disclosure-mark{border-color:var(--ink);background:transparent!important}
.studio .optional-tools[open] > summary .disclosure-mark{background:var(--ink)!important;border-color:var(--ink);color:var(--paper);transform:none!important}
/* 원본은 '＋'를 45° 돌려 ×로 보여요. D는 네모를 돌리지 않고 + / − 로 바꿔요(글자는 그대로 두고 그림만) */
.studio .disclosure-mark{font-size:0!important}
.studio .disclosure-mark::before{content:"+";font:500 18px/1 var(--mono)}
.studio .optional-tools[open] > summary .disclosure-mark::before{content:"−"}
.studio .optional-intro{color:var(--ink-2)}
.studio .studio-box{border:1px solid var(--line);background:var(--sheet)}
.studio .studio-box p{color:var(--ink-2)}
.studio .batch-drop{border:1px dashed var(--ink-2)!important;background:var(--paper)!important}
.studio .batch-drop.dragging{outline:2px solid var(--ink)}
.studio .batch-progress{border:1px solid var(--line);background:var(--paper)!important}
.studio .batch-list li[data-state="processing"]{background:var(--wash)!important}
.studio .batch-list li[data-state="processing"] > span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:4px;background:var(--signal)}
.studio .batch-list a{color:var(--ink)!important;text-decoration:underline;text-underline-offset:4px}
.studio .browser-download-warning{border:1px solid var(--ink);background:var(--paper)}

/* ── 8. 2 자동 보정(처리 중) ── */
.studio .processing-card{padding:28px 28px 24px!important;border:1px solid var(--line);background:var(--sheet)!important}
.studio .file-icon{border:1px solid var(--ink)!important;background:var(--paper)!important;color:var(--ink)}
.studio .file-summary strong{color:var(--ink);font-weight:600}
.studio .file-summary small{color:var(--ink-2)}
.studio .waveform-overview{border:1px solid var(--line)!important;background:var(--paper)!important}
.studio .time-ticks{color:var(--ink-2);font-size:13px}
.studio .analysis-panel{border:1px solid var(--line)!important;background:var(--paper)}
/* 둥근 진행 고리 → 네모 계기: 원본의 --progress(0~100)를 그대로 써서 아래에서 위로 채워요 */
.studio .progress-orb{border-radius:0!important;border:1px solid var(--ink);
  background:linear-gradient(to top,var(--ink) calc(var(--progress) * 1%),var(--paper) 0)!important}
.studio .progress-orb::after{display:none}
.studio .progress-orb > div{border-radius:0!important;background:var(--paper);color:var(--ink)!important;border:1px solid var(--ink)}
.studio .progress-orb[data-progress-indeterminate="true"]{background:repeating-linear-gradient(to top,var(--ink) 0 4px,var(--paper) 4px 8px)!important}
.studio .analysis-copy h1{color:var(--ink);font:600 26px/1.3 var(--sans)!important;letter-spacing:-.02em}
.studio .analysis-copy p{color:var(--ink-2)}
.studio .progress-line{height:8px!important;border-radius:0!important;background:var(--line)!important}
.studio .progress-line span{border-radius:0!important;background:var(--ink)!important}
.studio .progress-meta > strong{color:var(--ink);font-weight:500}
.studio .progress-meta b{font-family:var(--mono);font-weight:500}
.studio .progress-meta button{min-height:44px;color:var(--ink)}
.studio .phase-progress-help,.studio .background-help{color:var(--mute)}
.studio .analysis-tasks{border:1px solid var(--line)!important;background:var(--paper)}
.studio .analysis-tasks li{color:var(--ink-2)}
.studio .analysis-tasks em{border:1px solid var(--line-2);background:transparent!important;color:var(--ink-2)!important;font-weight:500}
.studio .analysis-tasks li.active{color:var(--ink);font-weight:600}
.studio .analysis-tasks li.active em{border-color:var(--ink);background:var(--ink)!important;color:var(--paper)!important}
.studio .analysis-tasks li.active em::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;background:var(--signal);vertical-align:middle}
.studio .analysis-tasks li.done em{border-color:var(--ink);color:var(--ink)!important}
.studio .analysis-tasks li.active svg,.studio .analysis-tasks li.done svg{color:var(--ink)!important}
.studio .secure-note{border:1px solid var(--line)!important;background:var(--paper);color:var(--ink-2)}
.studio .processing-attempt{color:var(--ink-2)!important;background:transparent!important}

/* ── 9. 3 미세 조정 ── */
.studio .page-title h1{color:var(--ink);font:600 28px/1.3 var(--sans)!important;letter-spacing:-.02em}
.studio .page-title p{color:var(--ink-2)}
.studio .live-preview-panel{border:1px solid var(--line);background:var(--sheet)}
.studio .live-preview-panel p{color:var(--ink-2)!important}
.studio .preview-toggle{min-height:44px;border:1px solid var(--line-2);border-radius:2px;background:transparent;color:var(--ink)}
.studio .preset-card{border:1px solid var(--line-2)!important;background:var(--sheet)!important;color:var(--ink);transform:none!important}
.studio .preset-card:hover{border-color:var(--ink)!important;background:var(--wash)!important}
.studio .preset-card > svg:first-child{color:var(--ink)!important}
.studio .preset-card strong{color:var(--ink);font-weight:600}
.studio .preset-card .chevron{color:var(--ink)}
.studio .eq-card,.studio .effect-card,.studio .sound-map{border:1px solid var(--line)!important;background:var(--sheet)!important}
.studio #eqFill stop{stop-color:#0C0C0C}
.studio .eq-line{stroke:var(--ink)!important}
.studio .eq-grid-lines path{stroke:var(--line)}
.studio .eq-band{color:var(--ink)}
.studio .effect-icon{color:var(--ink)!important}
.studio .effect-copy strong{color:var(--ink);font-weight:600}
.studio .effect-copy small{color:var(--ink-2)}
.studio .sound-map header strong{color:var(--ink)}
.studio .guide-grid details{border:1px solid var(--line)!important;background:var(--paper)!important}
.studio .guide-grid summary{min-height:44px;display:flex;align-items:center;color:var(--ink-2);font-size:14px}
.studio .guide-grid details[open] summary{color:var(--ink)}
.studio .guide-grid details button{min-height:36px;border:1px solid var(--ink)!important;background:transparent!important;color:var(--ink)!important;font-size:13px}
.studio .guide-grid details button:hover{background:var(--ink)!important;color:var(--paper)!important}

/* ── 10. 3 듣고 저장(A/B 비교·내보내기) ── */
.studio .beginner-result h1{color:var(--ink);font:600 30px/1.3 var(--sans)!important;letter-spacing:-.02em}
.studio .beginner-result p{color:var(--ink-2)}
.studio .beginner-result[data-result-state="blocked"] h1,.studio .beginner-result[data-result-state="error"] h1{color:var(--ink)}
.studio .beginner-result[data-result-state="error"] h1::before,.studio .beginner-result[data-result-state="blocked"] h1::before{content:"!";display:inline-grid;
  place-items:center;width:1.1em;height:1.1em;margin-right:.35em;background:var(--ink);color:var(--paper);font:700 .8em/1 var(--px);vertical-align:.08em}
.studio .uploaded-strip{border:1px solid var(--line)!important;background:var(--sheet)!important}
.studio .uploaded-strip strong{color:var(--ink);font-weight:600}
.studio .result-master-settings{border:1px solid var(--line)!important;background:var(--sheet)!important}
.studio .result-master-settings h2{color:var(--ink)!important;font:600 18px/1.35 var(--sans)}
.studio .result-master-settings p{color:var(--ink-2)}
.studio .ab-player{border:1px solid var(--ink)!important;background:var(--sheet)!important}
.studio .ab-player > header{border-bottom:1px solid var(--line);color:var(--ink-2)}
.studio .active-track-label{border:1px solid var(--ink);border-radius:2px;background:transparent!important;color:var(--ink)!important;font-weight:600}
.studio .listen-choice{border:1px solid var(--line-2)!important;background:var(--paper)!important;color:var(--ink)!important;font:600 15px/1.2 var(--sans)}
.studio .listen-choice:not([aria-pressed="true"]):not(:disabled):hover{border-color:var(--ink)!important;background:var(--wash)!important}
.studio .listen-choice[aria-pressed="true"]{border-color:var(--ink)!important;background:var(--ink)!important;color:var(--paper)!important}
.studio .listen-choice[aria-pressed="true"]::before{content:"";flex:none;width:7px;height:7px;background:var(--signal)}
.studio .listen-choice span{font-family:var(--px);font-weight:700;font-size:15px;letter-spacing:0}
.studio .wave-row{background:var(--paper)!important}
.studio .wave-row.selected{background:var(--paper)!important;box-shadow:inset 3px 0 0 var(--ink)!important}
.studio .wave-source-label{color:var(--ink-2)!important;font:600 12px/1 var(--sans)}
.studio .wave-row.selected .wave-source-label{color:var(--ink)!important}
/* 파형: app.js가 청록·회색으로 칠해요 → 흑백으로만 바꿔요(고른 줄은 진하게, 안 고른 줄은 옅게) */
.studio canvas.wave-canvas{filter:grayscale(1) brightness(.62)}
.studio .wave-row:not(.selected) canvas.wave-canvas{filter:grayscale(1) brightness(1.06)}
.studio .playhead,.studio .playhead::before{background:var(--ink)!important}
.studio .playhead::before{border-radius:0!important}
.studio .transport{border-top:1px solid var(--line)}
.studio .transport button{color:var(--ink)}
.studio .transport .transport-play{border:1px solid var(--ink)!important;background:var(--ink)!important;color:var(--paper)!important;font:600 14px/1 var(--sans)}
.studio .transport .transport-play:hover{background:transparent!important;color:var(--ink)!important}
.studio .transport .transport-seek:hover{background:var(--wash)!important;color:var(--ink)!important}
.studio .transport time{color:var(--ink-2);font-size:13px}
.studio .playback-note{color:var(--ink-2)}
.studio .export-panel{border:1px solid var(--line)!important;background:var(--sheet)!important}
.studio .export-panel-heading strong{color:var(--ink);font:700 22px/1.2 var(--px)!important;letter-spacing:0}
.studio .export-panel-heading small{color:var(--ink-2)}
.studio .format-option > span{grid-template-columns:auto minmax(0,1fr);column-gap:14px;border:1px solid var(--line-2)!important;background:var(--paper)!important;color:var(--ink-2)!important}
.studio .format-option b{white-space:nowrap}
.studio .format-option > span:hover{border-color:var(--ink)!important}
.studio .format-option b{color:var(--ink);font:700 22px/1 var(--px);letter-spacing:0}
.studio .format-option small{color:var(--ink-2)}
.studio .format-option > span::after{border-radius:0!important;border-color:var(--line-2)!important}
.studio .format-option input:checked + span{border-color:var(--ink)!important;background:var(--paper)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--ink)!important}
.studio .format-option input:checked + span::after{border-color:var(--ink)!important;background:var(--ink)!important;color:var(--paper)!important}
.studio .format-option input:focus-visible + span{outline:2px solid var(--ink)!important;outline-offset:3px!important}
.studio .export-cta > span{color:var(--ink-2)}
.studio .export-progress > i{border-radius:0!important;background:var(--line)!important}
.studio .export-progress > i span{border-radius:0!important;background:var(--ink)!important}
.studio .export-progress > b{color:var(--ink)!important}
.studio .compare-section{border:1px solid var(--line)!important;background:var(--sheet)!important}
.studio .compare-section h2{color:var(--ink)}
.studio .trim-safe-badge,.studio .headphone-badge,.studio .analysis-count{border:1px solid var(--line-2);background:transparent!important;color:var(--ink)!important}
.studio .trim-timeline{background:var(--paper)!important;border:1px solid var(--line)}
.studio .trim-selection{background:rgba(12,12,12,.08)!important;border-color:var(--ink)!important}
.studio .trim-selection i{background:var(--ink)!important}
.studio .trim-outside{background:rgba(236,236,234,.78)!important}
.studio .trim-summary{border:1px solid var(--line)!important;background:var(--paper)!important;color:var(--ink-2)!important}
.studio .trim-summary strong,.studio .trim-summary > svg{color:var(--ink)!important}
.studio .trim-action-group button:hover,.studio .trim-utility-button:hover{background:var(--wash)!important;color:var(--ink)!important;border-color:var(--ink)!important}
.studio .trim-action-group button.is-active,.studio .trim-utility-button[aria-pressed="true"]{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.studio .choice-row button.active,.studio .compact-eq-actions .eq-enable.active,.studio .eq-enable[aria-pressed="true"]{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.studio .compact-curve [data-mini-eq-line]{stroke:var(--ink)!important}
.studio .compact-curve .mini-node{fill:var(--ink)!important}
.studio .spatial-card{border:1px solid var(--line)!important;background:var(--paper)!important}
.studio .spatial-card::before{display:none}
.studio .spatial-orbit,.studio .spatial-orbit i,.studio .spatial-orbit b{border-color:var(--ink)!important}
.studio .spatial-orbit b{background:var(--ink)!important}
.studio .spatial-kicker{color:var(--ink-2)!important}
.studio .advanced-module{border:1px solid var(--line);background:var(--paper)}
.studio .metric-grid article p b{color:var(--ink)!important}

/* ── 11. 설정 창 · 알림 · 안내 꼬리말 ── */
.studio .settings-dialog{border:1px solid var(--ink)!important;background:var(--sheet);color:var(--ink)}
.studio .settings-dialog::backdrop{background:rgba(12,12,12,.32)}
.studio .settings-dialog p svg{color:var(--ink)!important}
.studio .toast{border:1px solid var(--ink)!important;background:var(--ink)!important;color:var(--paper)!important;font:400 15px/1.5 var(--sans)}
.studio .site-notices{margin-top:40px;padding:20px 0 0!important;justify-content:flex-start!important;gap:4px 20px!important;border-top:1px solid var(--line);
  color:var(--ink-2);font:400 14px/1.5 var(--sans)}
.studio .site-notices > span{font:700 22px/1 var(--px);color:var(--ink);align-self:center;margin-right:8px}
.studio .site-notices > a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.studio .family-footer{justify-content:flex-start!important;gap:8px!important;margin-top:4px}
.studio .family-footer a{min-height:44px;border:1px solid var(--line-2)!important;background:transparent!important;color:var(--ink)!important;font:600 14px/1 var(--sans)}
.studio .family-footer a:hover{border-color:var(--ink)!important;background:var(--wash)!important}

/* ── 12. 휴대폰 ── */
@media (max-width:719.98px){
  .stabs{gap:0 20px}
  .stabs__a{min-height:52px;font-size:28px}
  .shead__lede{font-size:16px}
  .studio .upload-card,.studio .processing-card{padding:20px 16px!important}
  .studio .upload-heading h1,.studio .page-title h1{font-size:23px!important}
  .studio .beginner-result h1{font-size:24px!important}
  .studio .analysis-copy h1{font-size:21px!important}
  .studio .round-feature{flex-basis:44px!important;width:44px!important;height:44px!important}
  .studio .round-feature svg{width:24px!important;height:24px!important}
  .studio .workflow-steps li{padding-right:12px!important;font-size:13px}
  .studio .workflow-steps li + li{padding-left:12px!important}
  .studio .workflow-steps [aria-current="step"]::after{right:12px}
  .studio .workflow-steps li + li[aria-current="step"]::after{left:12px}
  .studio .app-header{padding:8px 0!important}
  .studio .brand{font-size:22px!important}
  body[data-screen] .studio .access-actions{margin-inline:calc(-1 * var(--padL)) calc(-1 * var(--padR))!important;padding:2px var(--padR) 6px var(--padL)!important}
  .studio .site-notices > span{flex-basis:100%}
}
@media (max-width:379.98px){
  .stabs__a{font-size:22px}
}

/* ── 13. 움직임 줄이기 ── */
@media (prefers-reduced-motion:reduce){
  .stabs__a::after{transition:none}
  .studio *,.studio *::before,.studio *::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}
}