* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: var(--surface-page);
color: var(--text-primary);
min-height: 100vh;
}
a { color: var(--brand-hover); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Layout */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid var(--border-subtle);
background: var(--surface-card);
}
.app-header h1 {
font-size: 20px;
font-weight: 700;
background: linear-gradient(135deg, var(--brand-default), var(--brand-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.app-header .subtitle {
font-size: 12px;
color: var(--text-muted);
margin-left: 8px;
}
nav {
display: flex;
gap: 4px;
}
nav a {
padding: 6px 14px;
border-radius: 6px;
font-size: 14px;
color: var(--text-muted);
transition: all 0.15s;
}
nav a:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
nav a.active { background: var(--brand-default); color: white; }
.nav-user {
display: flex;
align-items: center;
gap: .25rem;
margin-left: .25rem;
padding-left: .75rem;
border-left: 1px solid var(--border-subtle);
}
.nav-user-name {
font-size: .8rem;
color: var(--text-muted);
padding: 0 .25rem;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-logout-btn {
background: none;
border: 1px solid var(--border-warm);
border-radius: 6px;
cursor: pointer;
color: var(--text-secondary);
font-size: .8rem;
padding: .25rem .625rem;
transition: background .15s, color .15s;
}
.nav-logout-btn:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
/* ── 로그인 페이지 ──────────────────────────────────────── */
.login-page {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-page);
padding: 1.5rem;
z-index: 100;
}
.login-card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 16px;
padding: 2.5rem 2rem;
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
gap: 1.5rem;
box-shadow: var(--shadow-card-hover);
}
.login-logo {
display: flex;
align-items: baseline;
gap: .625rem;
}
.login-logo-ko {
font-size: 2rem;
font-weight: 800;
letter-spacing: .04em;
background: linear-gradient(135deg, var(--brand-default), var(--brand-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.login-logo-han {
font-size: 1rem;
color: var(--text-muted);
font-weight: 400;
}
.login-desc {
font-size: .85rem;
color: var(--text-secondary);
line-height: 1.6;
}
.login-field {
display: flex;
flex-direction: column;
gap: .375rem;
}
.login-label {
font-size: .8rem;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: .03em;
}
.login-input {
padding: .625rem .875rem;
border: 1px solid var(--border-warm);
border-radius: 8px;
background: var(--surface-raised);
color: var(--text-primary);
font-size: .9rem;
outline: none;
transition: border-color .15s;
}
.login-input:focus {
border-color: var(--brand-default);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-default) 18%, transparent);
}
.login-input::placeholder {
color: var(--text-muted);
}
.login-tabs {
display: flex;
border-bottom: 1px solid var(--border-subtle);
gap: 0;
}
.login-tab {
flex: 1;
padding: .5rem;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: .875rem;
font-weight: 500;
color: var(--text-muted);
transition: color .15s, border-color .15s;
margin-bottom: -1px;
}
.login-tab.active {
color: var(--brand-default);
border-bottom-color: var(--brand-default);
}
.login-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.login-error {
font-size: .8rem;
color: var(--status-error);
background: color-mix(in srgb, var(--status-error) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--status-error) 20%, transparent);
border-radius: 6px;
padding: .5rem .75rem;
}
.login-submit-btn {
padding: .75rem;
background: var(--brand-default);
color: var(--white-pure);
border: none;
border-radius: 8px;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.login-submit-btn:hover:not(:disabled) {
background: var(--brand-hover);
}
.login-submit-btn:disabled {
opacity: .6;
cursor: not-allowed;
}
/* Cards */
.card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 16px;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.card-header h2 {
font-size: 16px;
font-weight: 600;
}
/* File Browser */
.breadcrumb {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--text-muted);
margin-bottom: 12px;
flex-wrap: wrap;
}
.breadcrumb button {
background: none;
border: none;
color: var(--brand-hover);
cursor: pointer;
font-size: 13px;
padding: 2px 4px;
border-radius: 4px;
}
.breadcrumb button:hover { background: var(--surface-hover); }
.file-list {
list-style: none;
}
.file-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 0.1s;
border-bottom: 1px solid var(--border-subtle);
}
.file-item:last-child { border-bottom: none; }
.file-item:hover { background: var(--surface-hover); }
.file-item .icon {
width: 20px;
text-align: center;
flex-shrink: 0;
}
.file-item .name {
flex: 1;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-item .size {
font-size: 12px;
color: var(--text-muted);
flex-shrink: 0;
}
.file-item.selected {
background: var(--overlay-brand-mid);
border-color: var(--brand-default);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.btn-primary {
background: var(--brand-default);
color: white;
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-outline {
background: transparent;
border: 1px solid var(--border-subtle);
color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--brand-default); color: var(--brand-hover); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { opacity: 0.9; }
/* Progress */
.progress-bar {
width: 100%;
height: 6px;
background: var(--border-subtle);
border-radius: 3px;
overflow: hidden;
margin: 8px 0;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--brand-default), var(--brand-hover));
border-radius: 3px;
transition: width 0.3s ease;
}
.status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
font-weight: 500;
}
.status-completed { background: color-mix(in srgb, var(--status-success) 15%, transparent); color: var(--success); }
.status-failed { background: color-mix(in srgb, var(--status-error) 15%, transparent); color: var(--danger); }
.status-running { background: var(--overlay-brand-mid); color: var(--brand-hover); }
.status-pending { background: var(--overlay-hover-warm); color: var(--text-muted); }
/* Score display */
.score-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.score-card {
background: var(--surface-page);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 14px;
text-align: center;
}
.score-card .label {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 6px;
}
.score-card .value {
font-size: 28px;
font-weight: 700;
}
.score-card .value.high { color: var(--success); }
.score-card .value.mid { color: var(--warning); }
.score-card .value.low { color: var(--danger); }
.total-score {
font-size: 48px;
font-weight: 800;
text-align: center;
padding: 20px;
}
/* Chart container */
.chart-container {
position: relative;
width: 100%;
height: 250px;
margin: 12px 0;
}
/* Table */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.data-table th, .data-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border-subtle);
}
.data-table th {
color: var(--text-muted);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
}
.data-table tr:hover { background: var(--surface-hover); }
/* Checkbox */
.checkbox-wrapper {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.checkbox-wrapper input[type="checkbox"] {
accent-color: var(--brand-default);
width: 16px;
height: 16px;
}
/* Utilities */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.text-sm { font-size: 13px; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.empty-state .icon { font-size: 36px; margin-bottom: 12px; }
/* Tabs */
.tabs {
display: flex;
gap: 2px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 16px;
}
.tab {
padding: 8px 16px;
font-size: 14px;
color: var(--text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.15s;
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--brand-hover); border-bottom-color: var(--brand-default); }
/* Hamburger toggle — hidden on desktop */
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
z-index: 1001;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: all 0.25s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Responsive */
@media (max-width: 768px) {
.container { padding: 12px; }
.score-grid { grid-template-columns: repeat(2, 1fr); }
.app-header {
flex-wrap: nowrap;
padding: 12px 16px;
}
.nav-toggle { display: flex; }
nav {
position: fixed;
top: 0;
right: -260px;
width: 260px;
height: 100vh;
background: var(--surface-card);
border-left: 1px solid var(--border-subtle);
flex-direction: column;
padding: 72px 16px 24px;
gap: 2px;
z-index: 1000;
transition: right 0.25s ease;
}
nav.open { right: 0; }
nav a {
padding: 12px 16px;
font-size: 15px;
border-radius: 8px;
}
/* History table → card layout on mobile */
.data-table thead { display: none; }
.data-table,
.data-table tbody,
.data-table tr,
.data-table td {
display: block;
width: 100%;
}
.data-table tr {
padding: 12px 0;
border-bottom: 1px solid var(--border-subtle);
position: relative;
}
.data-table td {
padding: 4px 0;
border: none;
text-align: left;
}
.data-table td:first-child {
position: absolute;
top: 14px;
right: 0;
width: auto;
}
.data-table td:last-child {
margin-top: 8px;
}
/* Studio mobile */
.studio-header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.studio-header-left { min-width: 0; flex: 1; }
.studio-header-left .btn { white-space: nowrap; flex-shrink: 0; }
.studio-header-controls { flex-wrap: wrap; gap: 6px; }
.studio-header-right { width: 100%; justify-content: flex-end; }
.studio-tracks { width: 200px; }
}
/* --- Separation Player --- */
.sep-tracks {
border-top: 1px solid var(--border-subtle);
}
.sep-track-row {
display: flex;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--border-subtle);
gap: 8px;
}
.sep-guitar-highlight {
background: color-mix(in srgb, var(--brand-hover) 6%, transparent);
}
.sep-track-icon {
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: var(--text-inverse);
flex-shrink: 0;
}
.sep-track-name {
width: 120px;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}
.sep-btn {
background: var(--surface-hover);
border: 1px solid var(--border-subtle);
color: var(--text-muted);
padding: 2px 10px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
flex-shrink: 0;
}
.sep-btn.active {
background: var(--danger);
color: var(--text-inverse);
border-color: var(--danger);
}
/* Mute active = Blue (Logic Pro standard) */
.sep-btn-mute.active {
background: var(--chart-blue);
color: var(--text-inverse);
border-color: var(--chart-blue);
}
/* Solo active = Yellow (Logic Pro standard) */
.sep-btn-solo.active {
background: var(--status-warning);
color: var(--text-primary);
border-color: var(--status-warning);
}
.sep-volume {
flex: 1;
height: 4px;
accent-color: var(--brand-default);
cursor: pointer;
}
.sep-vol-label {
width: 36px;
font-size: 11px;
color: var(--text-muted);
text-align: right;
flex-shrink: 0;
}
.sep-playback {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-top: 2px solid var(--border-subtle);
background: var(--surface-page);
}
.sep-time {
font-size: 12px;
color: var(--text-muted);
min-width: 36px;
font-variant-numeric: tabular-nums;
}
.sep-seekbar {
flex: 1;
height: 6px;
background: var(--border-subtle);
border-radius: 3px;
cursor: pointer;
position: relative;
}
.sep-seekbar-fill {
height: 100%;
background: var(--brand-default);
border-radius: 3px;
transition: width 0.1s linear;
}
/* --- AI Studio --- */
/* Cockpit 패턴: 헤더+트랙+waveform+transport 는 sticky 로 viewport 고정,
분석 패널은 자연 높이로 페이지(바깥) 스크롤 */
.container-studio {
padding: 8px 8px 0;
}
.studio-layout {
display: flex;
flex-direction: column;
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
}
/* Cockpit: 헤더 + main + transport — 초기엔 viewport 채우고 페이지와 함께 위로 스크롤 */
.studio-cockpit {
display: flex;
flex-direction: column;
height: calc(100vh - var(--header-h) - 8px);
background: var(--surface-card);
overflow: hidden;
}
.studio-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid var(--border-subtle);
background: var(--surface-page);
gap: 12px;
flex-wrap: wrap;
}
.studio-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.studio-filename {
font-size: 14px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.studio-header-meta {
display: flex;
gap: 8px;
align-items: center;
}
.studio-meta-tag {
font-size: 12px;
color: var(--text-muted);
padding: 2px 8px;
background: var(--surface-hover);
border-radius: 4px;
}
.studio-header-right {
display: flex;
gap: 6px;
align-items: center;
}
.studio-speed-select {
background: var(--surface-hover);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
cursor: pointer;
}
.studio-main {
display: flex;
flex: 1;
overflow: hidden;
}
.studio-tracks {
width: 300px;
flex-shrink: 0;
border-right: 1px solid var(--border-subtle);
overflow-y: auto;
overflow-x: hidden;
}
.studio-track-row {
display: flex;
align-items: center;
padding: 8px 10px 8px 0;
border-bottom: 1px solid var(--border-subtle);
gap: 5px;
border-left: 3px solid transparent;
transition: background 0.1s;
position: relative;
}
.studio-track-row:hover {
background: var(--overlay-hover-soft);
}
.studio-guitar-hl {
background: color-mix(in srgb, var(--brand-hover) 6%, transparent);
}
.studio-track-name {
flex: 1;
min-width: 0;
font-size: 11px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.studio-pan {
width: 36px;
height: 4px;
accent-color: var(--text-muted);
cursor: pointer;
flex-shrink: 0;
}
.sep-volume-compact {
width: 48px;
height: 5px;
accent-color: var(--brand-default);
cursor: pointer;
flex-shrink: 0;
}
.studio-waveform-wrap {
flex: 1;
position: relative;
background: var(--surface-page);
overflow: hidden;
}
.studio-waveform-wrap canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Transport bar */
.studio-transport {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
border-top: 1px solid var(--border-subtle);
background: var(--surface-card);
}
.transport-left {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.transport-rec {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid var(--status-error);
background: transparent;
color: var(--status-error);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
line-height: 1;
padding: 0;
}
.transport-rec:hover { background: color-mix(in srgb, var(--status-error) 10%, transparent); }
.transport-rec.active {
background: var(--status-error);
color: var(--text-inverse);
animation: rec-pulse 1.5s ease-in-out infinite;
}
.transport-play {
width: 40px;
height: 40px;
background: var(--brand-default);
border: none;
border-radius: 50%;
color: var(--text-inverse);
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.transport-play:hover { background: var(--brand-hover); }
.transport-btn {
width: 30px;
height: 30px;
background: var(--surface-hover);
border: 1px solid var(--border-subtle);
border-radius: 6px;
color: var(--text-muted);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.transport-btn.active {
background: var(--brand-default);
color: var(--text-inverse);
border-color: var(--brand-default);
}
.transport-btn.transport-btn-text {
width: auto;
padding: 0 12px;
gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
.transport-btn-text .transport-btn-icon {
font-size: 14px;
line-height: 1;
}
.transport-lcd {
display: flex;
align-items: baseline;
gap: 4px;
flex-shrink: 0;
padding: 4px 12px;
background: var(--overlay-hover-warm);
border-radius: 6px;
border: 1px solid var(--border-subtle);
}
.transport-time {
font-size: 22px;
font-weight: 700;
color: var(--text-inverse);
font-variant-numeric: tabular-nums;
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
letter-spacing: 0.5px;
}
.transport-divider {
color: var(--text-muted);
font-size: 14px;
}
.transport-duration {
font-size: 14px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
}
.loop-range-label {
font-size: 11px;
color: var(--brand-hover);
background: var(--overlay-brand-soft);
padding: 2px 8px;
border-radius: 4px;
font-variant-numeric: tabular-nums;
font-family: 'SF Mono', 'Menlo', monospace;
white-space: nowrap;
flex-shrink: 0;
}
.transport-seekbar-wrap {
flex: 1;
display: flex;
align-items: center;
}
.studio-analysis {
padding: 16px 16px;
border-top: 1px solid var(--border-subtle);
}
.studio-chords {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px 0;
}
.studio-chord {
padding: 4px 12px;
background: var(--surface-hover);
border-radius: 4px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
}
.studio-chord.active {
background: var(--brand-default);
color: white;
}
.studio-chord:hover {
background: var(--surface-hover);
color: var(--text-primary);
}
.studio-lyrics {
padding: 8px 0;
max-height: 150px;
overflow-y: auto;
}
.studio-lyric-line {
padding: 4px 8px;
font-size: 14px;
color: var(--text-muted);
cursor: pointer;
border-radius: 4px;
transition: all 0.15s;
line-height: 1.6;
}
.studio-lyric-line.active {
color: var(--text-primary);
background: var(--overlay-brand-mid);
font-weight: 600;
}
.studio-lyric-line:hover {
background: var(--surface-hover);
}
.studio-sections {
display: flex;
gap: 2px;
padding: 8px 0;
height: 40px;
}
.studio-section-block {
background: var(--surface-hover);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
min-width: 40px;
transition: all 0.15s;
}
.studio-section-block.active {
background: var(--brand-default);
color: white;
}
.studio-section-block:hover {
opacity: 0.8;
}
.studio-section-block:nth-child(odd) {
background: var(--overlay-brand-soft);
}
.studio-section-block:nth-child(even) {
background: color-mix(in srgb, var(--status-success) 12%, transparent);
}
.studio-section-block.active:nth-child(odd),
.studio-section-block.active:nth-child(even) {
background: var(--brand-default);
color: white;
}
/* --- BPM / Key Controls --- */
.studio-header-controls {
display: flex;
gap: 12px;
align-items: center;
}
.studio-bpm-control,
.studio-key-control {
display: flex;
align-items: center;
gap: 2px;
background: var(--surface-hover);
border: 1px solid var(--border-subtle);
border-radius: 6px;
padding: 2px;
}
.studio-ctrl-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 14px;
font-weight: 700;
cursor: pointer;
border-radius: 4px;
transition: background 0.15s;
}
.studio-ctrl-btn:hover {
background: var(--border-subtle);
}
.studio-ctrl-value {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
padding: 0 6px;
min-width: 60px;
text-align: center;
white-space: nowrap;
}
/* --- Recording --- */
@keyframes rec-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-error) 50%, transparent); }
50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--status-error) 0%, transparent); }
}
.studio-rec-separator {
height: 2px;
background: linear-gradient(90deg, transparent, var(--chart-violet), transparent);
margin: 4px 12px;
}
.studio-rec-track {
background: color-mix(in srgb, var(--status-error) 6%, transparent);
}
.studio-rec-level {
height: 4px;
background: var(--surface-hover);
margin: 0 12px 4px;
border-radius: 2px;
overflow: hidden;
}
.studio-rec-level-bar {
height: 100%;
background: linear-gradient(90deg, var(--status-success), var(--status-warning), var(--status-error));
border-radius: 2px;
transition: width 0.05s linear;
}
.tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--status-error);
color: var(--text-inverse);
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 8px;
padding: 0 4px;
margin-left: 4px;
line-height: 1;
}
.studio-takes {
padding: 8px 0;
}
.studio-take-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
}
.studio-take-row:hover {
background: var(--surface-hover);
}
.studio-take-row.active {
background: color-mix(in srgb, var(--status-error) 10%, transparent);
border-left: 3px solid var(--status-error);
}
.studio-take-number {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
min-width: 28px;
}
.studio-take-time {
font-size: 12px;
color: var(--text-muted);
}
.studio-take-score {
font-size: 13px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
margin-left: auto;
}
.studio-take-score.score-good {
color: var(--status-success);
background: color-mix(in srgb, var(--status-success) 12%, transparent);
}
.studio-take-score.score-mid {
color: var(--status-warning);
background: color-mix(in srgb, var(--status-warning) 12%, transparent);
}
.studio-take-score.score-low {
color: var(--status-error);
background: color-mix(in srgb, var(--status-error) 12%, transparent);
}
.studio-take-delete {
margin-left: 4px;
font-size: 11px;
opacity: 0.5;
transition: opacity 0.15s;
}
.studio-take-delete:hover {
opacity: 1;
color: var(--status-error);
}
/* Tab generate button in track row */
.studio-tab-btns {
display: inline-flex;
align-items: center;
margin-left: 4px;
}
.sep-btn-tab {
font-size: 12px;
min-width: 28px;
padding: 2px 6px;
}
.sep-btn-tab.active {
background: var(--accent);
color: var(--text-inverse);
}
.sep-btn-tab-del {
font-size: 10px;
min-width: 20px;
padding: 2px 4px;
color: var(--text-muted);
opacity: 0;
transition: opacity 0.15s;
}
.studio-track-row:hover .sep-btn-tab-del { opacity: 1; }
.sep-btn-tab-del:hover { color: var(--status-error); }
.sep-btn-tab-progress {
font-size: 10px;
color: var(--text-muted);
min-width: 32px;
text-align: center;
}
/* Track level meter — 트랙 행 하단 오버레이 */
.track-level-meter {
position: absolute;
left: 3px;
right: 0;
bottom: 0;
height: 2px;
background: transparent;
overflow: hidden;
}
.track-level-fill {
height: 100%;
background: var(--chart-blue);
border-radius: 0;
transition: width 0.05s linear;
}
.track-level-fill.level-warn {
background: var(--status-warning);
}
.track-level-fill.level-hot {
background: var(--status-error);
}
/* Tab analysis panel */
.studio-tab-panel {
display: flex;
flex-direction: column;
}
.studio-tab-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
flex-shrink: 0;
border-bottom: 1px solid var(--overlay-hover-soft);
}
.studio-tab-toolbar-spacer {
flex: 1;
}
.studio-tab-select {
background: var(--surface-sunken);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 4px 8px;
font-size: 13px;
}
.studio-tab-dl-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: 1px solid var(--overlay-hover-warm);
color: var(--text-muted);
border-radius: 4px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
}
.studio-tab-dl-btn:hover {
color: var(--surface-card);
border-color: var(--overlay-hover-warm);
background: var(--overlay-hover-soft);
}
/* #alphaTabContainer 통합 규칙은 아래 "alphaTab 컨테이너 — 통합 스타일" 블록 참고 */
/* Tab fullscreen — Claude Parchment */
.studio-tab-fullscreen {
position: fixed !important;
inset: 0;
z-index: 9999;
background: var(--surface-page);
min-height: unset !important;
display: flex;
flex-direction: column;
}
.studio-tab-fullscreen .studio-tab-toolbar {
padding: 10px 20px;
border-bottom: 1px solid var(--border-warm);
}
.studio-tab-fullscreen #alphaTabContainer {
flex: 1;
padding: 16px 24px;
}
/* Separation upload dropzone */
.sep-dropzone {
margin: 12px 16px;
padding: 32px 24px;
border: 2px dashed var(--border-subtle);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.sep-dropzone:hover,
.sep-dropzone.drag-over {
border-color: var(--brand-default);
background: var(--overlay-brand-soft);
}
.sep-dropzone-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.sep-dropzone-icon {
font-size: 32px;
opacity: 0.6;
}
.sep-dropzone-text {
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
}
.sep-dropzone-hint {
font-size: 12px;
color: var(--text-muted);
}
/* === Studio Section Panel === */
.studio-section-panel {
position: absolute;
top: 56px;
right: 0;
bottom: 56px;
width: 260px;
background: var(--surface-card);
border-left: 1px solid var(--border-subtle);
box-shadow: -8px 0 24px var(--overlay-modal);
z-index: 50;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.2s ease-out;
pointer-events: none;
}
.studio-section-panel.open {
transform: translateX(0);
pointer-events: auto;
}
.section-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.section-panel-title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.05em;
}
.section-panel-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
.section-panel-close:hover {
color: var(--text-primary);
}
.section-panel-list {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.section-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 4px;
background: var(--surface-sunken);
border-radius: 6px;
border-left: 3px solid transparent;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.section-row:hover {
background: var(--surface-hover);
}
.section-row.active {
border-left-color: var(--brand-hover);
background: var(--surface-hover);
}
.section-row.looping {
border-left-color: var(--brand-default);
background: var(--overlay-brand-mid);
box-shadow: inset 0 0 0 1px var(--overlay-brand-strong);
}
.section-badge {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.section-label {
flex: 1;
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
text-transform: capitalize;
}
.section-time {
font-size: 11px;
color: var(--text-muted);
font-family: monospace;
}
.section-loop-icon {
font-size: 13px;
color: var(--brand-hover);
margin-left: 4px;
}
/* >>> BML_DESIGN_EXPERIMENT_2 — typography hierarchy + breathing */
.container {
max-width: 1280px;
padding: 32px;
}
.card {
padding: 24px;
border-radius: 14px;
}
.app-header h1 {
font-size: 24px;
font-weight: 800;
}
.card-header h2 {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
}
body {
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* <<< BML_DESIGN_EXPERIMENT_2 */
/* >>> BML_DESIGN_EXPERIMENT_1 — depth & motion (delight) */
.card {
box-shadow: var(--shadow-card);
transition: transform 180ms var(--ease-default),
box-shadow 220ms var(--ease-default),
border-color 180ms var(--ease-default);
}
.card:hover {
border-color: color-mix(in srgb, var(--brand-hover) 35%, transparent);
transform: translateY(-1px);
box-shadow: var(--shadow-card-hover);
}
.btn-primary {
box-shadow: 0 6px 20px -8px var(--overlay-brand-strong),
0 1px 0 var(--overlay-hover-warm) inset;
transition: transform 160ms var(--ease-default),
box-shadow 200ms var(--ease-default),
background 160ms var(--ease-default);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--brand-hover) 80%, transparent),
0 1px 0 var(--overlay-hover-warm) inset;
}
/* .app-header 의 최종 규칙은 Claude 블록(뒤쪽) 에서 정의 — 이 블록은 dead */
.app-header h1 {
background: linear-gradient(135deg, var(--brand-hover) 0%, var(--chart-cyan) 60%, var(--chart-cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.01em;
}
/* <<< BML_DESIGN_EXPERIMENT_1 */
/* >>> BML_DESIGN_EXPERIMENT_3 — lucide-style icon unification */
.lucide-icon {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
.lucide-icon-sm { width: 14px; height: 14px; }
.lucide-icon-md { width: 20px; height: 20px; }
.lucide-icon-lg {
width: 48px;
height: 48px;
stroke-width: 1.5;
}
/* Transport bar icons — tighter stroke, filled play/pause */
.transport-play .lucide-icon {
width: 18px;
height: 18px;
fill: currentColor;
stroke: currentColor;
}
.transport-btn .lucide-icon { width: 16px; height: 16px; }
.transport-rec .lucide-icon {
width: 12px;
height: 12px;
fill: currentColor;
stroke: none;
}
/* Track-row round icon background — white stroke inside colored pill */
.sep-track-icon .lucide-icon {
width: 14px;
height: 14px;
stroke: var(--text-inverse);
}
/* Dropzone hero icon */
.sep-dropzone-icon .lucide-icon {
width: 56px;
height: 56px;
stroke-width: 1.5;
opacity: 0.75;
}
.sep-dropzone-icon { font-size: 0; line-height: 0; }
/* Back button: align arrow with Korean label */
.btn .lucide-icon {
margin-right: 6px;
margin-top: -1px;
}
/* <<< BML_DESIGN_EXPERIMENT_3 */
/* >>> BML_DESIGN_EXPERIMENT_6 — a11y v2 (no layout shift) */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--brand-hover);
outline-offset: 2px;
border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
.btn:focus-visible,
.tab-btn:focus-visible {
outline: 2px solid var(--brand-hover);
outline-offset: 2px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-hover) 45%, transparent);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--brand-hover);
outline-offset: 1px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-hover) 45%, transparent);
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* <<< BML_DESIGN_EXPERIMENT_6 */
/* >>> BML_DESIGN_EXPERIMENT_7 — bolder hierarchy + breathing */
/* Stronger type scale (overrides exp2) */
.app-header h1 {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.02em;
}
.card-header h2 {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.015em;
}
/* Container — wider, taller breathing */
.container {
padding: 40px 32px;
}
/* Card — bigger gap between cards (vertical rhythm via :not(:last-child)) */
.card {
padding: 28px;
margin-bottom: 24px;
}
.card:last-child {
margin-bottom: 0;
}
/* Card header — accent stripe on left for visual hierarchy */
.card-header {
position: relative;
padding-left: 14px;
margin-left: -14px;
border-left: 3px solid var(--brand-default);
margin-bottom: 20px;
}
.card-header h2 {
margin: 0;
}
/* Body line-height + base size — improves readability */
body {
line-height: 1.6;
}
/* Buttons: a touch more padding for substance (no min-height) */
.btn {
padding: 9px 18px;
}
.btn-sm {
padding: 6px 12px;
}
/* Subtle uppercase label treatment for nav */
nav a {
letter-spacing: 0.01em;
font-weight: 500;
}
nav a.active {
font-weight: 600;
}
/* <<< BML_DESIGN_EXPERIMENT_7 */
/* >>> BML_DESIGN_EXPERIMENT_8 — icon prominence */
/* Bigger, bolder icons across the board (overrides exp3 base sizes) */
.lucide-icon {
width: 20px;
height: 20px;
stroke-width: 2.25;
}
.lucide-icon-sm { width: 16px; height: 16px; }
.lucide-icon-md { width: 22px; height: 22px; }
.lucide-icon-lg { width: 64px; height: 64px; stroke-width: 1.5; }
/* Transport: bigger play, more visual weight */
.transport-play .lucide-icon {
width: 22px;
height: 22px;
fill: currentColor;
stroke: currentColor;
}
.transport-btn .lucide-icon {
width: 18px;
height: 18px;
}
.transport-rec .lucide-icon {
width: 14px;
height: 14px;
fill: var(--status-error);
stroke: none;
}
/* Track icons: brighter, more presence */
.sep-track-icon .lucide-icon {
width: 16px;
height: 16px;
stroke: var(--text-inverse);
stroke-width: 2.5;
}
/* Dropzone: hero-sized icon with accent tint */
.sep-dropzone-icon .lucide-icon {
width: 72px;
height: 72px;
stroke-width: 1.5;
opacity: 0.9;
stroke: var(--brand-hover);
}
/* Buttons: icon + text balance */
.btn .lucide-icon {
width: 16px;
height: 16px;
margin-right: 8px;
margin-top: -1px;
}
.btn-sm .lucide-icon {
width: 14px;
height: 14px;
}
/* Tab buttons icons brighter */
.tab-btn .lucide-icon {
width: 16px;
height: 16px;
margin-right: 6px;
}
/* <<< BML_DESIGN_EXPERIMENT_8 */
/* >>> BML_DESIGN_EXPERIMENT_10 — fill the void: waveform placeholder + bigger studio rhythm */
/* The waveform-wrap area is empty when no audio is loaded — give it a
subtle "mock waveform" pattern so the screen doesn't read as broken. */
.studio-waveform-wrap {
background:
/* fake waveform peaks: alternating vertical gradient bars */
repeating-linear-gradient(
90deg,
var(--overlay-brand-soft) 0px,
var(--overlay-brand-soft) 1px,
transparent 1px,
transparent 4px
),
/* center horizontal axis line */
linear-gradient(180deg, transparent 49.5%, var(--overlay-hover-soft) 49.5%, var(--overlay-hover-soft) 50.5%, transparent 50.5%),
/* subtle radial glow center */
radial-gradient(ellipse 60% 80% at 30% 50%, var(--overlay-brand-soft), transparent 70%),
var(--surface-page);
}
/* When canvas is mounted (real audio), it covers everything */
.studio-waveform-wrap canvas {
background: transparent;
}
/* Track rows: more breathing + slightly bigger track name */
.studio-track-row {
padding: 12px 12px 12px 0;
gap: 8px;
}
.studio-track-name {
width: 76px;
font-size: 12px;
}
.sep-volume-compact {
width: 80px;
height: 6px;
}
.studio-pan {
width: 40px;
height: 5px;
}
/* Transport bar: more substantial */
.studio-transport {
padding: 14px 24px;
gap: 16px;
}
.transport-play {
width: 44px;
height: 44px;
box-shadow: 0 6px 16px -4px var(--overlay-brand-strong);
}
.transport-rec {
width: 36px;
height: 36px;
}
/* Time display: bigger and more prominent */
.studio-transport .transport-time,
.transport-time {
font-size: 18px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: var(--text-primary); /* was var(--text-inverse) — 라이트 parchment 에서 invisible */
}
/* <<< BML_DESIGN_EXPERIMENT_10 */
/* >>> BML_DESIGN_EXPERIMENT_12 — project list table polish */
/* Bigger row padding + bolder filenames + clearer hierarchy */
.data-table {
font-size: 14px;
border-spacing: 0;
}
.data-table th {
padding: 14px 16px 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--text-muted);
text-transform: uppercase;
border-bottom: 2px solid var(--border-subtle);
}
.data-table td {
padding: 18px 16px;
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle;
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tbody tr {
transition: background 160ms ease;
}
.data-table tbody tr:hover {
background: var(--overlay-brand-soft);
}
/* First column = filename, make it bold */
.data-table td:first-child {
font-weight: 600;
font-size: 14.5px;
color: var(--text-primary);
}
/* Status pills get better treatment */
.status-badge {
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
}
.status-badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.status-completed {
background: color-mix(in srgb, var(--status-success) 14%, transparent);
color: var(--status-success);
border: 1px solid color-mix(in srgb, var(--status-success) 30%, transparent);
}
.status-running {
background: var(--overlay-brand-mid);
color: var(--brand-hover);
border: 1px solid var(--overlay-brand-strong);
}
.status-failed {
background: color-mix(in srgb, var(--status-error) 14%, transparent);
color: var(--status-error);
border: 1px solid color-mix(in srgb, var(--status-error) 30%, transparent);
}
.status-pending {
background: var(--overlay-hover-soft);
color: var(--text-muted);
border: 1px solid var(--overlay-hover-warm);
}
/* <<< BML_DESIGN_EXPERIMENT_12 */
/* >>> BML_DESIGN_EXPERIMENT_21 — 동양화 빈 파형 placeholder (공산청음) */
/* Replaces EXPERIMENT_13 (fake bar waveform) with brand-aligned ink-wash SVG.
See docs/superpowers/specs/2026-04-08-studio-empty-background-design.md */
.studio-waveform-wrap {
background-image: url('/img/studio-empty-knowsound.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.studio-waveform-wrap canvas {
/* Canvas is transparent so the SVG placeholder shows when no audio.
When real audio loads, the canvas paints opaque waveform pixels. */
background: transparent;
}
/* <<< BML_DESIGN_EXPERIMENT_21 */
/* >>> BML_DESIGN_EXPERIMENT_14 — chord pills + tab bar polish */
/* Bigger, more refined chord pills */
.studio-chord {
padding: 8px 16px;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
font-family: 'Oxanium', -apple-system, sans-serif;
letter-spacing: 0.02em;
background: var(--overlay-brand-soft);
color: var(--brand-hover);
border: 1px solid var(--overlay-brand-mid);
min-width: 36px;
text-align: center;
transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.studio-chord:hover {
background: var(--overlay-brand-mid);
border-color: var(--overlay-brand-strong);
transform: translateY(-1px);
}
.studio-chord.active {
background: linear-gradient(135deg, var(--brand-default), var(--brand-hover));
color: var(--text-inverse);
border-color: transparent;
box-shadow: 0 4px 12px -2px var(--overlay-brand-strong),
0 1px 0 var(--overlay-hover-warm) inset;
}
.studio-chords {
gap: 8px;
padding: 12px 0;
}
/* Tab bar — refined typography + accent stripe */
.tab {
padding: 12px 18px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
border-bottom-width: 2px;
}
.tab:hover {
color: var(--text-primary);
background: var(--overlay-hover-soft);
}
.tab.active {
color: var(--brand-hover);
border-bottom-color: var(--brand-default);
background: linear-gradient(180deg, transparent, var(--overlay-brand-soft));
}
/* Studio header bar polish — bigger title */
.studio-header {
padding: 14px 20px;
}
/* <<< BML_DESIGN_EXPERIMENT_14 */
/* >>> BML_DESIGN_EXPERIMENT_15 — track level meters + DAW richness */
/* Bigger, more prominent level meters with gradient + glow */
.track-level-meter {
width: 56px;
height: 6px;
background: var(--overlay-hover-soft);
border-radius: 3px;
position: relative;
box-shadow: inset 0 0 4px var(--overlay-modal);
}
.track-level-meter::before {
/* segmented LED-like markers via gradient */
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
transparent 0,
transparent 5px,
var(--overlay-modal) 5px,
var(--overlay-modal) 6px
);
border-radius: 3px;
pointer-events: none;
z-index: 2;
}
.track-level-fill {
background: linear-gradient(90deg, var(--status-success), var(--status-success) 60%, var(--status-warning) 80%, var(--status-warning) 100%);
box-shadow: 0 0 6px color-mix(in srgb, var(--status-success) 55%, transparent);
border-radius: 3px;
}
.track-level-fill.level-warn {
background: linear-gradient(90deg, var(--status-success), var(--status-warning) 60%, var(--status-warning) 100%);
box-shadow: 0 0 8px color-mix(in srgb, var(--status-warning) 55%, transparent);
}
.track-level-fill.level-hot {
background: linear-gradient(90deg, var(--status-success), var(--status-warning) 50%, var(--status-error) 80%, var(--status-error) 100%);
box-shadow: 0 0 10px color-mix(in srgb, var(--status-error) 65%, transparent);
}
/* Bigger, more refined sep-track-icon (the colored circle avatars) */
.sep-track-icon {
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 12px;
font-weight: 800;
color: var(--text-inverse);
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px var(--overlay-modal),
0 0 0 2px var(--overlay-hover-soft) inset;
flex-shrink: 0;
}
/* M / S buttons — clearer DAW look */
.sep-btn {
min-width: 26px;
height: 26px;
padding: 0 7px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
border: 1px solid var(--border-subtle);
background: var(--overlay-hover-soft);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 140ms ease;
}
.sep-btn:hover {
background: var(--overlay-hover-soft);
color: var(--text-primary);
}
.sep-btn-mute.active {
background: color-mix(in srgb, var(--status-error) 18%, transparent);
color: var(--status-error);
border-color: color-mix(in srgb, var(--status-error) 40%, transparent);
}
.sep-btn-solo.active {
background: color-mix(in srgb, var(--status-warning) 18%, transparent);
color: var(--status-warning);
border-color: color-mix(in srgb, var(--status-warning) 40%, transparent);
}
/* Track row left border (color stripe) more visible */
.studio-track-row {
border-left-width: 4px;
}
/* <<< BML_DESIGN_EXPERIMENT_15 */
/* >>> BML_DESIGN_EXPERIMENT_16 — mobile header + responsive polish */
@media (max-width: 768px) {
/* Keep header in a row on mobile so nav doesn't wrap into a column.
Nav becomes horizontally scrollable if needed. */
.app-header {
flex-direction: row;
align-items: center;
padding: 12px 16px;
gap: 12px;
flex-wrap: nowrap;
}
.app-header h1 {
font-size: 20px;
flex-shrink: 0;
}
.app-header .subtitle {
display: none;
}
nav {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 2px;
flex: 1;
justify-content: flex-end;
-ms-overflow-style: none;
scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }
nav a {
padding: 6px 10px;
font-size: 12px;
white-space: nowrap;
flex-shrink: 0;
}
/* Container padding tighter on mobile */
.container {
padding: 16px 14px;
}
/* Cards: less inner padding on mobile */
.card {
padding: 18px 16px;
border-radius: 12px;
margin-bottom: 16px;
}
/* Studio: hide some elements that don't fit */
.studio-header {
flex-wrap: wrap;
gap: 8px;
}
}
/* <<< BML_DESIGN_EXPERIMENT_16 */
/* >>> BML_DESIGN_EXPERIMENT_17 — studio header polish + nav active gradient */
/* Studio header bar: bigger title, taller bar, subtle bottom gradient */
.studio-header {
padding: 16px 20px;
background: linear-gradient(180deg, var(--surface-card) 0%, var(--surface-page) 100%);
border-bottom: 1px solid var(--border-subtle);
}
.studio-filename {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
max-width: 280px;
letter-spacing: -0.005em;
}
.studio-meta-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: var(--overlay-brand-soft);
color: var(--brand-hover);
border: 1px solid var(--overlay-brand-mid);
}
/* BPM/Key control chips: refined */
.studio-bpm-control,
.studio-key-control {
background: var(--overlay-hover-soft);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 3px;
}
.studio-ctrl-btn {
width: 30px;
height: 30px;
font-size: 15px;
color: var(--text-muted);
border-radius: 6px;
}
.studio-ctrl-btn:hover {
background: var(--overlay-brand-mid);
color: var(--brand-hover);
}
.studio-ctrl-value {
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
letter-spacing: 0.01em;
}
/* Studio Export / Download buttons more prominent */
.studio-header-right .btn {
padding: 8px 16px;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.01em;
}
/* Top nav active state — gradient pill matches "Tuner" highlight */
nav a.active {
background: linear-gradient(135deg, var(--brand-default), var(--brand-hover));
color: var(--text-inverse);
box-shadow: 0 4px 12px -4px var(--overlay-brand-strong),
0 1px 0 var(--overlay-hover-warm) inset;
font-weight: 600;
}
nav a {
font-weight: 500;
}
/* Header h1 — slightly bigger gradient */
.app-header h1 {
font-size: 22px;
letter-spacing: -0.02em;
}
/* <<< BML_DESIGN_EXPERIMENT_17 */
/* >>> BML_DESIGN_EXPERIMENT_18 — dropzone hero + active task polish */
/* Dropzone: more presence, gradient background, prettier dashed border */
.sep-dropzone {
margin: 20px 0 28px;
padding: 48px 32px;
border: 2px dashed var(--overlay-brand-strong);
border-radius: 16px;
background:
radial-gradient(ellipse 80% 50% at 50% 40%, var(--overlay-brand-soft), transparent 70%),
var(--overlay-brand-soft);
cursor: pointer;
transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.sep-dropzone:hover,
.sep-dropzone.drag-over {
border-color: var(--brand-default);
background:
radial-gradient(ellipse 80% 50% at 50% 40%, var(--overlay-brand-soft), transparent 70%),
var(--overlay-brand-soft);
transform: translateY(-2px);
box-shadow: 0 12px 28px -10px var(--overlay-brand-strong);
}
.sep-dropzone-content {
gap: 14px;
}
.sep-dropzone-text {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.005em;
}
.sep-dropzone-hint {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.02em;
font-weight: 500;
}
.sep-dropzone-icon .lucide-icon {
width: 64px;
height: 64px;
stroke: var(--brand-hover);
stroke-width: 1.5;
opacity: 0.85;
}
/* Active task progress: more polished single-row block */
.sep-active-task,
.task-active-row {
padding: 16px 20px;
background: var(--overlay-brand-soft);
border: 1px solid var(--overlay-brand-mid);
border-radius: 12px;
margin-bottom: 20px;
}
/* Card-header h2 of "트랙 분리" — refine */
.card-header h2 {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
}
/* Section title typography boost */
.section-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
/* <<< BML_DESIGN_EXPERIMENT_18 */
/* >>> BML_DESIGN_EXPERIMENT_19 — mobile polish + consistency */
@media (max-width: 768px) {
/* Dropzone — tighter on mobile */
.sep-dropzone {
margin: 16px 0 20px;
padding: 32px 20px;
border-radius: 14px;
}
.sep-dropzone-icon .lucide-icon {
width: 48px;
height: 48px;
}
.sep-dropzone-text {
font-size: 14px;
}
.sep-dropzone-hint {
font-size: 11px;
}
/* Card header h2 a touch smaller on mobile */
.card-header h2 {
font-size: 18px;
}
/* Table — use vertical card layout instead of horizontal table on mobile */
.data-table th {
font-size: 10px;
padding: 10px 12px 8px;
}
.data-table td {
padding: 14px 12px;
font-size: 13px;
}
.data-table td:first-child {
font-size: 13.5px;
}
/* Status pill smaller */
.status-badge {
padding: 4px 9px;
font-size: 10px;
}
/* Studio header on mobile */
.studio-filename {
font-size: 14px;
max-width: 180px;
}
.studio-header {
padding: 12px 14px;
}
/* Studio chord pills */
.studio-chord {
padding: 6px 12px;
font-size: 13px;
min-width: 30px;
}
/* Tab bar smaller */
.tab {
padding: 10px 14px;
font-size: 13px;
}
}
/* Universal: consistent border radius across all major elements */
.btn,
.card,
.data-table,
.tab-pane {
border-radius: 12px;
}
/* Dropzone icon centered properly */
.sep-dropzone-icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
/* <<< BML_DESIGN_EXPERIMENT_19 */
/* >>> BML_DESIGN_EXPERIMENT_20 — project list row icons + tuner a11y contrast */
/* Target weakest sub-scores: icon 6.17, a11y 6.17 (from exp19 mean).
Project list: add music-note ::before icon on filename cell so every row
has a visible icon affordance (scored low because rows were icon-less text).
Tuner/global: bump the dimmest text variants (text-dim, muted captions)
for readable contrast against dark bg — no layout shift. */
/* 1. Project list filename: music note + waveform icon before filename */
.data-table td:first-child {
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
font-size: 14.5px;
color: var(--text-primary);
}
.data-table td:first-child::before {
content: "";
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
background-color: var(--overlay-brand-soft);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
border: 1px solid var(--overlay-brand-mid);
transition: background-color 160ms ease, border-color 160ms ease;
}
.data-table tbody tr:hover td:first-child::before {
background-color: var(--overlay-brand-mid);
border-color: var(--overlay-brand-strong);
}
/* 2. Global a11y: bump text-muted slightly for stronger contrast */
/* 3. Secondary text pieces that use explicit low-alpha colors — bump them */
.text-muted,
.card p.text-sm:not([x-text*="file_name"]),
.section-title {
color: var(--text-muted);
}
/* 4. Ensure critical button labels and pills stay readable */
.btn-sm,
.btn-outline,
.status-badge {
color-scheme: dark;
}
/* <<< BML_DESIGN_EXPERIMENT_20 */
/* =============================================================================
BML 트랙 영역 분리 — 충돌 방지를 위한 ownership boundary
=============================================================================
tokens.css : 디자인 토큰 SSOT — index.html 에서 직접 로드 (Design 트랙)
layout.css : 레이아웃 + 인터랙션 (UX 트랙 전용, index.html 에서 직접 로드)
style.css : legacy + 공통 컴포넌트 (수정 자제, 양쪽 트랙 read-only)
============================================================================= */
/* NOTE: @import 는 CSS 규칙 뒤에 오면 무시되므로 layout.css 는 index.html 에서
로 직접 로드한다. 이전 `@import url("./layout.css")` 는 이 위치에서
동작하지 않았다. */
/* Legacy sep-list-claude / sep-dropzone-claude / sep-task-claude / sep-list-card
removed in EXPERIMENT_22 redesign (2026-04-08).
See style.css 끝부분의 BML_DESIGN_EXPERIMENT_22 블록 + index.html 의 .sep-page. */
/* ============================================================================
Claude 디자인: 글로벌 nav + app header + body background
기존 .app-header / nav 룰보다 뒤에 위치하므로 cascade로 덮어쓴다.
============================================================================ */
body {
background: var(--surface-page);
color: var(--text-primary);
font-family: var(--font-sans);
}
.app-header {
background: var(--surface-page);
border-bottom: 1px solid var(--border-subtle);
padding: 18px 32px;
}
.app-header h1 {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 500;
background: none;
-webkit-text-fill-color: initial;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.app-header .subtitle {
font-family: var(--font-serif);
font-size: 0.88rem;
color: var(--text-muted);
font-style: italic;
margin-left: 10px;
letter-spacing: 0.02em;
}
nav {
display: flex;
gap: 2px;
align-items: center;
}
nav a {
font-family: var(--font-sans);
font-size: 0.94rem;
font-weight: 500;
padding: 8px 16px;
border-radius: var(--radius-sm);
color: var(--text-secondary);
transition: color 0.15s, background 0.15s;
}
nav a:hover {
background: transparent;
color: var(--text-primary);
text-decoration: none;
}
nav a.active {
background: var(--text-primary);
color: var(--surface-card);
box-shadow: 0 0 0 1px var(--text-primary);
}
/* Mobile hamburger + drawer — Claude tones */
.nav-toggle span {
background: var(--text-primary);
}
@media (max-width: 768px) {
.app-header {
padding: 14px 20px;
}
.app-header h1 { font-size: 1.3rem; }
nav {
background: var(--surface-card);
border-left: 1px solid var(--border-subtle);
box-shadow: -12px 0 32px color-mix(in srgb, var(--ink-950) 6%, transparent);
padding: 80px 18px 24px;
align-items: stretch;
}
nav a {
padding: 14px 16px;
font-size: 1rem;
}
nav a.active {
/* 모바일에서도 어두운 버튼 유지 */
background: var(--text-primary);
color: var(--surface-card);
}
}
/* ============================================================================
Claude 디자인 (M4): 스튜디오 화면 디테일 리디자인
M1의 :root 리맵이 기본 색상을 처리했으므로, M4는 주로 타이포 + 탭 +
디테일 surface 에 집중. STEM_DISPLAY 색상은 백엔드에서 Claude 팔레트로 교체됨.
============================================================================ */
/* --- Studio header — filename 세리프 --- */
.studio-filename {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- BPM / Key 컨트롤 --- */
.studio-bpm-control,
.studio-key-control {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 4px 8px;
}
.studio-ctrl-btn {
background: transparent;
color: var(--text-secondary);
border: none;
font-family: var(--font-sans);
font-size: 1.1rem;
font-weight: 500;
width: 20px;
height: 20px;
cursor: pointer;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.studio-ctrl-btn:hover {
color: var(--brand-default);
background: var(--cream-400);
}
.studio-ctrl-value {
font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
font-size: 0.82rem;
color: var(--text-primary);
font-weight: 500;
padding: 0 8px;
letter-spacing: -0.02em;
}
.studio-meta-tag {
font-family: "JetBrains Mono", monospace;
font-size: 0.82rem;
color: var(--text-muted);
letter-spacing: -0.02em;
}
/* --- Studio transport — LCD & time 세리프 mono --- */
.transport-lcd {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
}
.transport-time,
.transport-duration {
font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.transport-divider {
color: var(--text-muted);
}
.loop-range-label {
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
color: var(--brand-default);
letter-spacing: -0.02em;
}
.sep-seekbar {
background: var(--border-warm);
border-radius: 999px;
height: 4px;
}
.sep-seekbar-fill {
background: var(--brand-default);
border-radius: 999px;
}
/* --- Tracks panel --- */
.studio-tracks {
background: var(--surface-card);
border-right: 1px solid var(--border-subtle);
}
.studio-track-row {
border-bottom: 1px solid var(--border-subtle);
background: transparent;
}
.studio-track-row:hover {
background: color-mix(in srgb, var(--surface-hover) 40%, transparent);
}
.studio-track-name {
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 500;
color: var(--text-primary);
}
/* M/S 버튼 */
.sep-btn {
background: transparent;
border: 1px solid var(--border-warm);
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
border-radius: 4px;
padding: 3px 7px;
cursor: pointer;
transition: all 0.12s;
}
.sep-btn:hover {
border-color: var(--text-muted);
color: var(--text-primary);
}
.sep-btn-mute.active {
background: var(--status-error);
color: var(--surface-card);
border-color: var(--status-error);
}
.sep-btn-solo.active {
background: var(--brand-default);
color: var(--surface-card);
border-color: var(--brand-default);
}
.sep-btn-tab,
.sep-btn-tab.active {
background: transparent;
border: 1px solid var(--border-warm);
}
.sep-btn-tab:hover {
color: var(--brand-default);
border-color: var(--brand-default);
}
.sep-btn-tab.active {
color: var(--brand-default);
border-color: var(--brand-default);
}
.sep-btn-tab-del:hover {
color: var(--status-error);
border-color: var(--status-error);
}
.track-level-meter {
background: var(--border-warm);
}
.track-level-fill {
background: var(--brand-default);
}
.track-level-fill.level-warn {
background: var(--status-warning);
}
.track-level-fill.level-hot {
background: var(--status-error);
}
/* Recording track — Error Crimson tone */
.studio-rec-separator {
border-top: 1px solid var(--border-warm);
height: 1px;
margin: 8px 0;
}
.studio-rec-track .studio-track-name {
color: var(--status-error) !important;
font-weight: 600;
}
.studio-rec-track .sep-track-icon {
background: var(--status-error) !important;
}
/* Recording level bar */
.studio-rec-level-bar {
background: var(--status-error);
}
/* --- Analysis resize handle --- */
.studio-resize-handle {
background: transparent;
border-top: 1px solid var(--border-subtle);
}
.studio-resize-grip {
background: var(--border-warm);
}
/* --- Analysis bottom panel tabs --- */
.studio-analysis {
background: var(--surface-card);
border-top: 1px solid var(--border-subtle);
}
.studio-analysis .tabs {
border-bottom: 1px solid var(--border-subtle);
gap: 0;
}
.studio-analysis .tab {
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--text-muted);
padding: 12px 20px;
border-bottom: 2px solid transparent;
background: transparent;
border-top: none;
border-left: none;
border-right: none;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.studio-analysis .tab:hover {
color: var(--text-primary);
}
.studio-analysis .tab.active {
color: var(--brand-default);
border-bottom-color: var(--brand-default);
}
.tab-badge {
display: inline-block;
background: var(--brand-default);
color: var(--surface-card);
font-family: "JetBrains Mono", monospace;
font-size: 0.63rem;
font-weight: 600;
padding: 1px 6px;
border-radius: 999px;
margin-left: 6px;
min-width: 14px;
text-align: center;
}
/* Chords tab */
.studio-chords {
padding: 16px 20px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.studio-chord {
font-family: "JetBrains Mono", monospace;
font-size: 0.82rem;
font-weight: 500;
background: var(--cream-400);
color: var(--text-secondary);
padding: 4px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.12s;
letter-spacing: -0.01em;
}
.studio-chord:hover {
background: var(--brand-default);
color: var(--surface-card);
}
.studio-chord.active {
background: var(--brand-default);
color: var(--surface-card);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-default) 25%, transparent);
}
/* Lyrics tab */
.studio-lyrics {
padding: 16px 24px;
overflow-y: auto;
}
.studio-lyric-line {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.6;
color: var(--text-muted);
padding: 4px 0;
cursor: pointer;
transition: color 0.15s;
}
.studio-lyric-line:hover {
color: var(--text-secondary);
}
.studio-lyric-line.active {
color: var(--text-primary);
font-weight: 500;
}
/* Takes tab */
.studio-takes {
padding: 12px;
}
.studio-take-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
background: var(--surface-page);
margin-bottom: 6px;
cursor: pointer;
transition: all 0.12s;
}
.studio-take-row:hover {
border-color: var(--brand-default);
}
.studio-take-row.active {
border-color: var(--brand-default);
background: color-mix(in srgb, var(--brand-default) 8%, transparent);
}
.studio-take-number {
font-family: "JetBrains Mono", monospace;
font-size: 0.82rem;
color: var(--text-muted);
min-width: 32px;
}
.studio-take-time {
font-family: "JetBrains Mono", monospace;
font-size: 0.82rem;
color: var(--text-secondary);
min-width: 56px;
}
.studio-take-score {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 500;
min-width: 40px;
}
.studio-take-score.score-good { color: var(--brand-hover); }
.studio-take-score.score-mid { color: var(--brand-default); }
.studio-take-score.score-low { color: var(--text-muted); }
/* --- Studio header buttons --- */
.studio-header {
background: var(--surface-page);
border-bottom: 1px solid var(--border-subtle);
padding: 14px 24px;
}
.studio-header .btn.btn-primary,
.studio-header .btn.btn-sm.btn-primary {
background: var(--brand-default);
color: var(--surface-card);
border: 1px solid var(--brand-default);
border-radius: var(--radius-md);
padding: 8px 16px;
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
}
.studio-header .btn.btn-primary:hover {
background: var(--brand-strong);
border-color: var(--brand-strong);
}
.studio-header .btn.btn-outline,
.studio-header .btn.btn-sm.btn-outline {
background: var(--surface-card);
color: var(--text-primary);
border: 1px solid var(--border-warm);
border-radius: var(--radius-md);
padding: 8px 16px;
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
}
.studio-header .btn.btn-outline:hover {
border-color: var(--text-muted);
}
/* "← 목록" 돌아가기 버튼 — ghost sand */
.studio-header-left .btn {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-warm);
}
.studio-header-left .btn:hover {
color: var(--text-primary);
border-color: var(--text-muted);
}
/* --- Transport bar 전체 --- */
.studio-transport {
background: var(--surface-page);
border-top: 1px solid var(--border-subtle);
padding: 10px 20px;
}
.transport-rec {
background: var(--surface-card);
border: 1px solid var(--border-warm);
color: var(--status-error);
border-radius: var(--radius-sm);
}
.transport-rec:hover {
border-color: var(--status-error);
background: color-mix(in srgb, var(--status-error) 6%, transparent);
}
.transport-rec.active {
background: var(--status-error);
color: var(--surface-card);
border-color: var(--status-error);
animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-error) 50%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-error) 0%, transparent); }
}
.transport-play {
background: var(--brand-default);
color: var(--surface-card);
border: none;
border-radius: var(--radius-sm);
}
.transport-play:hover {
background: var(--brand-strong);
}
/* --- Section panel (기존 M1과 조화 확인) --- */
.studio-section-panel {
background: var(--surface-card);
border-left: 1px solid var(--border-subtle);
box-shadow: -12px 0 32px color-mix(in srgb, var(--ink-950) 8%, transparent);
}
.section-panel-title {
font-family: var(--font-sans);
letter-spacing: 0.5px;
}
/* Tab view (alphaTab renderer container) */
.studio-tab-view {
background: var(--surface-page);
}
/* === Stem Selection Modal === */
@keyframes stem-modal-in {
0% { opacity: 0; transform: translateY(16px) scale(0.95); }
60% { opacity: 1; transform: translateY(-3px) scale(1.005); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sep-stem-modal {
position: fixed;
inset: 0;
background: var(--overlay-modal);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 24px;
}
.sep-stem-modal-card {
background: var(--surface-card);
color: var(--text-primary);
border-radius: 24px;
border: 1px solid var(--border-subtle);
box-shadow: 0 40px 80px color-mix(in srgb, var(--ink-950) 28%, transparent),
0 8px 24px color-mix(in srgb, var(--ink-950) 12%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--white-pure) 60%, transparent);
width: 100%;
max-width: 480px;
max-height: calc(100vh - 48px);
overflow: auto;
display: flex;
flex-direction: column;
animation: stem-modal-in 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sep-stem-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 22px 24px 16px;
border-bottom: 1px solid var(--border-subtle);
gap: 12px;
position: relative;
}
.sep-stem-modal-head-meta {
flex: 1;
min-width: 0;
padding-right: 36px;
}
.sep-stem-modal-head h3 {
margin: 0;
font-size: 18px;
font-weight: 650;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.3;
}
.sep-stem-modal-head p {
margin: 4px 0 0;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
}
.sep-stem-modal-close {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--surface-sunken);
border: 0;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transition: background 120ms, color 120ms;
position: absolute;
right: 18px;
top: 20px;
}
.sep-stem-modal-close:hover {
color: var(--text-primary);
background: var(--overlay-hover-soft);
}
/* --- list --- */
.sep-stem-modal-list {
list-style: none;
margin: 0;
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 0;
}
/* --- stem item --- */
.sep-stem-modal-item {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 12px;
border-radius: 14px;
background: transparent;
cursor: pointer;
transition: background 150ms var(--ease-default);
position: relative;
}
.sep-stem-modal-item + .sep-stem-modal-item {
border-top: 1px solid color-mix(in srgb, var(--ink-950) 4%, transparent);
}
.sep-stem-modal-item:hover {
background: var(--overlay-hover-soft);
}
.sep-stem-modal-item:hover + .sep-stem-modal-item {
border-top-color: transparent;
}
.sep-stem-modal-item:active {
transform: scale(0.985);
}
/* --- icon badge (SVG) --- */
.sep-stem-modal-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.sep-stem-modal-icon svg {
width: 20px;
height: 20px;
}
/* per-instrument icon colors */
.sep-stem-modal-item[data-stem="vocals"] .sep-stem-modal-icon { background: var(--stem-vocals-bg); color: var(--stem-vocals-fg); }
.sep-stem-modal-item[data-stem="drums"] .sep-stem-modal-icon { background: var(--stem-drums-bg); color: var(--stem-drums-fg); }
.sep-stem-modal-item[data-stem="bass"] .sep-stem-modal-icon { background: var(--stem-bass-bg); color: var(--stem-bass-fg); }
.sep-stem-modal-item[data-stem="piano"] .sep-stem-modal-icon { background: var(--stem-piano-bg); color: var(--stem-piano-fg); }
.sep-stem-modal-item[data-stem="other"] .sep-stem-modal-icon { background: var(--surface-sunken); color: var(--text-muted); }
.sep-stem-modal-item[data-stem="guitar"] .sep-stem-modal-icon { background: var(--stem-guitar-bg); color: var(--stem-guitar-fg); }
/* --- label --- */
.sep-stem-modal-label { flex: 1; font-size: 15px; font-weight: 500; }
/* --- iOS toggle switch --- */
.sep-stem-modal-toggle {
width: 44px;
height: 26px;
border-radius: 13px;
flex: 0 0 auto;
position: relative;
cursor: pointer;
background: var(--ring-warm);
transition: background 200ms var(--ease-default);
}
.sep-stem-modal-toggle::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--white-pure);
box-shadow: 0 1px 3px color-mix(in srgb, var(--ink-950) 15%, transparent),
0 0 0 0.5px color-mix(in srgb, var(--ink-950) 4%, transparent);
transition: left 200ms var(--ease-default);
}
.sep-stem-modal-toggle.is-on {
background: var(--brand-default);
}
.sep-stem-modal-toggle.is-on::after {
left: 20px;
}
/* --- guitar segmented control --- */
.sep-stem-guitar-seg {
display: flex;
margin: 0 24px 8px 66px;
padding: 2px;
background: var(--surface-sunken);
border-radius: 9px;
gap: 1px;
transition: opacity 160ms;
}
.sep-stem-guitar-seg.is-disabled {
opacity: 0.3;
pointer-events: none;
}
.sep-stem-guitar-seg-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 7px 2px;
border: none;
border-radius: 7px;
background: transparent;
cursor: pointer;
text-align: center;
transition: background 150ms var(--ease-default),
box-shadow 150ms var(--ease-default);
}
.sep-stem-guitar-seg-btn:hover {
background: var(--overlay-hover-soft);
}
.sep-stem-guitar-seg-btn.is-active {
background: var(--surface-card);
box-shadow: 0 1px 4px color-mix(in srgb, var(--ink-950) 8%, transparent),
0 0 0 0.5px color-mix(in srgb, var(--ink-950) 4%, transparent);
}
.sep-stem-guitar-seg-title {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
}
.sep-stem-guitar-seg-btn.is-active .sep-stem-guitar-seg-title {
font-weight: 600;
color: var(--text-primary);
}
.sep-stem-guitar-seg-sub {
font-size: 10px;
color: var(--text-muted);
line-height: 1.2;
white-space: nowrap;
}
/* --- footer --- */
.sep-stem-modal-foot {
padding: 14px 20px 20px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
.sep-stem-modal-cancel {
background: none;
border: none;
color: var(--brand-default);
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
transition: color 120ms, background 120ms;
}
.sep-stem-modal-cancel:hover {
color: var(--brand-hover);
background: var(--overlay-hover-soft);
}
/* CTA pill badge */
.sep-stem-modal-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
padding: 1px 7px;
border-radius: 8px;
background: color-mix(in srgb, var(--white-pure) 25%, transparent);
font-size: 12px;
font-weight: 700;
line-height: 1;
margin-left: 2px;
}
/* modal CTA — btn-brand ring shadow 제거, 목업 일치 */
.sep-stem-modal-foot .btn-brand {
box-shadow: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
padding: 11px 22px;
}
.sep-stem-modal-foot .btn-brand:hover {
box-shadow: none;
}
.sep-stem-modal-card button[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
/* ============================================================================
Claude 디자인 (M5): 스튜디오 구석 디테일 — 미적용 영역 일괄 정리
tab toolbar/select/dl-btn, fullscreen mode, volume slider, spinners,
alphaTab 컨테이너 패딩, 빈 상태 메시지
============================================================================ */
/* --- 타브 패널 toolbar --- */
.studio-tab-panel {
background: var(--surface-page);
}
.studio-tab-toolbar {
background: var(--surface-card);
border-bottom: 1px solid var(--border-subtle) !important;
padding: 8px 14px;
gap: 10px;
}
/* --- 타브 stem 선택 dropdown --- */
.studio-tab-select {
background: var(--surface-card);
color: var(--text-primary);
border: 1px solid var(--border-warm);
border-radius: var(--radius-sm);
padding: 5px 30px 5px 10px;
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5d59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.studio-tab-select:hover {
border-color: var(--text-muted);
}
.studio-tab-select:focus {
outline: none;
border-color: var(--brand-default);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-default) 15%, transparent);
}
/* --- 타브 PNG / 전체화면 버튼 --- */
.studio-tab-dl-btn {
background: transparent;
border: 1px solid var(--border-warm);
color: var(--text-secondary);
border-radius: var(--radius-sm);
padding: 5px 11px;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
transition: all 0.12s;
}
.studio-tab-dl-btn:hover {
color: var(--brand-default);
border-color: var(--brand-default);
background: transparent;
}
/* --- 전체화면 모드 --- */
.studio-tab-fullscreen {
background: var(--surface-page) !important;
}
.studio-tab-fullscreen .studio-tab-toolbar {
background: var(--surface-card);
border-bottom: 1px solid var(--border-subtle) !important;
padding: 12px 24px;
}
/* =================================================================
alphaTab 컨테이너 — 통합 스타일
semantic token 만 참조. 색상 수정은 tokens.css 한 곳.
================================================================= */
#alphaTabContainer {
/* 자연 높이 — 페이지(바깥) 가 스크롤 */
padding: 12px 16px;
background: var(--surface-page);
}
#alphaTabContainer .at-surface,
#alphaTabContainer .at-surface svg {
background: var(--surface-page) !important;
}
#alphaTabContainer .at-cursor-bar {
background: var(--stave-cursor-bar) !important;
}
#alphaTabContainer .at-cursor-beat {
background: var(--stave-cursor-beat) !important;
}
/* --- 볼륨 슬라이더 (트랙 row) — Claude warm --- */
.sep-volume-compact {
-webkit-appearance: none;
appearance: none;
background: var(--border-warm);
height: 4px;
border-radius: 999px;
accent-color: var(--brand-default);
cursor: pointer;
outline: none;
}
.sep-volume-compact::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--brand-default);
border: 2px solid var(--surface-card);
box-shadow: 0 0 0 1px var(--border-warm);
cursor: pointer;
transition: transform 0.1s;
}
.sep-volume-compact::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.sep-volume-compact::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--brand-default);
border: 2px solid var(--surface-card);
box-shadow: 0 0 0 1px var(--border-warm);
cursor: pointer;
}
/* --- Pan 슬라이더 (있다면) --- */
.studio-pan {
-webkit-appearance: none;
appearance: none;
background: var(--border-warm);
height: 4px;
border-radius: 999px;
accent-color: var(--text-muted);
}
/* --- 빈 상태 / 안내 메시지 --- */
.studio-analysis .text-sm.text-muted,
.studio-analysis p.text-sm {
font-family: var(--font-sans);
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.6;
}
.studio-analysis code {
font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
font-size: 0.82rem;
background: var(--cream-400);
color: var(--text-secondary);
padding: 1px 6px;
border-radius: 4px;
letter-spacing: -0.02em;
}
/* --- 로딩 텍스트 (분석 중) --- */
.studio-analysis .text-center.text-muted {
font-family: var(--font-sans);
font-size: 0.94rem;
color: var(--text-secondary);
padding: 32px 20px;
}
/* --- Take 행 안의 spinner / 상태 텍스트 --- */
.studio-take-row .text-xs.text-muted {
font-size: 0.7rem;
color: var(--text-muted);
}
/* Take 삭제 버튼 — 작은 ghost */
.studio-take-delete {
background: transparent !important;
border: none !important;
color: var(--text-muted) !important;
padding: 4px !important;
margin-left: auto;
border-radius: 4px;
cursor: pointer;
}
.studio-take-delete:hover {
color: var(--status-error) !important;
background: color-mix(in srgb, var(--status-error) 8%, transparent) !important;
}
/* --- Tab badge "준비 중" 진행 표시 (sep-btn-tab-progress) --- */
.sep-btn-tab-progress {
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
color: var(--brand-default);
font-weight: 500;
padding: 2px 6px;
background: color-mix(in srgb, var(--brand-default) 10%, transparent);
border-radius: 999px;
letter-spacing: -0.02em;
}
/* --- 트랙 row 의 텍스트 디테일 --- */
.studio-tracks .text-xs.text-muted {
font-size: 0.7rem;
color: var(--text-muted);
}
/* --- "Take 1" 등 녹음 트랙 메타 --- */
.studio-rec-track .text-xs {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
color: var(--status-error);
}
/* --- 분리 옵션 모달 (separation 새 분리 시작 시) --- */
.modal-overlay {
background: color-mix(in srgb, var(--ink-950) 55%, transparent);
}
.modal-content {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: 0 12px 48px color-mix(in srgb, var(--ink-950) 18%, transparent);
}
.modal-content h3 {
font-family: var(--font-serif);
font-weight: 500;
color: var(--text-primary);
}
/* --- 진행률 바 (활성 분리 작업 카드) --- */
.progress-bar {
background: var(--border-warm);
border-radius: 999px;
height: 4px;
overflow: hidden;
}
.progress-fill {
background: var(--brand-default);
height: 100%;
}
.status-badge {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.status-badge.status-running {
background: color-mix(in srgb, var(--brand-default) 15%, transparent);
color: var(--brand-default);
}
.status-badge.status-completed {
background: color-mix(in srgb, var(--status-success) 12%, transparent);
color: var(--status-success);
}
.status-badge.status-failed {
background: color-mix(in srgb, var(--status-error) 12%, transparent);
color: var(--status-error);
}
/* --- alphaTab 안의 SVG 텍스트 (Bravura 외 라벨/마디 번호) --- */
#alphaTabContainer text,
#alphaTabContainer .at-track-name {
fill: var(--text-primary) !important;
}
/* >>> BML_DESIGN_EXPERIMENT_22 — separation list 라이브러리-퍼스트 리디자인 */
/* Spec: docs/superpowers/specs/2026-04-08-separation-list-redesign.md */
/* ----- 페이지 헤더 ----- */
.sep-page {
max-width: 1200px;
margin: 0 auto;
padding: 32px 32px 64px;
}
.sep-page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.sep-page-head-text .label-overline {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
.sep-page-head-text h1 {
font-family: 'Noto Serif KR', Georgia, serif;
font-size: 32px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 0;
}
.sep-page-head-meta {
font-size: 13px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* ----- Drop strip ----- */
.sep-strip {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 22px;
border: 1.5px dashed var(--cream-400);
border-radius: 12px;
background: var(--overlay-hover-warm);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
margin-bottom: 24px;
}
.sep-strip:hover,
.sep-strip.is-drag {
background: color-mix(in srgb, var(--brand-default) 6%, transparent);
border-color: var(--brand-default);
}
.sep-strip-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 10px;
background: color-mix(in srgb, var(--brand-default) 12%, transparent);
color: var(--brand-default);
flex-shrink: 0;
}
.sep-strip-icon svg { width: 18px; height: 18px; }
.sep-strip-text {
flex: 1;
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
}
.sep-strip-formats {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ----- 진행 중 banner ----- */
.sep-active {
margin-bottom: 24px;
}
.sep-active-head {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 10px;
}
.sep-active-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 14px;
align-items: center;
padding: 12px 16px;
background: var(--overlay-hover-warm);
border: 1px solid var(--border-subtle);
border-radius: 10px;
margin-bottom: 6px;
}
.sep-active-name {
font-size: 13px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sep-active-step {
font-size: 12px;
color: var(--text-muted);
}
.sep-active-pct {
font-size: 12px;
color: var(--brand-default);
font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 36px;
text-align: right;
}
.sep-active-bar {
grid-column: 1 / -1;
height: 3px;
background: var(--overlay-hover-soft);
border-radius: 2px;
overflow: hidden;
}
.sep-active-fill {
height: 100%;
background: var(--brand-default);
border-radius: 2px;
transition: width 0.3s;
}
/* ----- Toolbar (search + sort) ----- */
.sep-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.sep-search {
position: relative;
flex: 0 1 320px;
}
.sep-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--text-muted);
pointer-events: none;
}
.sep-search input {
width: 100%;
height: 38px;
padding: 0 14px 0 38px;
font-size: 14px;
font-family: inherit;
background: var(--overlay-hover-warm);
border: 1px solid var(--border-subtle);
border-radius: 8px;
color: var(--text-primary);
transition: border-color 0.15s, background 0.15s;
}
.sep-search input::placeholder { color: var(--text-muted); }
.sep-search input:focus {
outline: none;
border-color: var(--brand-default);
background: var(--text-inverse);
}
.sep-sort {
height: 38px;
padding: 0 32px 0 14px;
font-size: 13px;
font-family: inherit;
background: var(--overlay-hover-warm) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
border: 1px solid var(--border-subtle);
border-radius: 8px;
color: var(--text-primary);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.sep-sort:focus { outline: none; border-color: var(--brand-default); }
/* ----- 라이브러리 grid ----- */
.sep-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 980px) { .sep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sep-grid { grid-template-columns: 1fr; } }
/* ----- 카드 ----- */
.sep-card {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 18px 16px;
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: 12px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.sep-card:hover,
.sep-card:focus-visible {
background: var(--text-inverse);
border-color: var(--cream-400);
transform: translateY(-1px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--ink-950) 4%, transparent);
outline: none;
}
.sep-card:hover .sep-card-menu,
.sep-card:focus-visible .sep-card-menu { opacity: 1; }
.sep-card-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.35;
}
.sep-card-subtitle {
font-size: 13px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.35;
margin-top: 2px;
min-height: 1.35em;
}
.sep-card-meta {
display: flex;
align-items: center;
gap: 14px;
font-size: 12px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.sep-card-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.sep-card-meta-item svg {
width: 12px;
height: 12px;
opacity: 0.7;
}
.sep-card-meta-item.is-empty { opacity: 0.4; }
.sep-card-menu {
position: absolute;
top: 12px;
right: 12px;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 6px;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
}
.sep-card-menu:hover { background: var(--overlay-hover-soft); color: var(--text-primary); }
.sep-card-menu svg { width: 16px; height: 16px; }
.sep-card.is-running { cursor: wait; opacity: 0.92; }
.sep-card.is-running:hover { transform: none; box-shadow: none; }
.sep-card-progress {
height: 3px;
background: var(--overlay-hover-soft);
border-radius: 2px;
overflow: hidden;
margin-top: 4px;
}
.sep-card-progress-fill {
height: 100%;
background: var(--brand-default);
transition: width 0.3s;
}
.sep-card-step {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
.sep-card.is-failed { border-left: 3px solid var(--danger); }
.sep-card-error {
font-size: 12px;
color: var(--danger);
margin-top: 4px;
}
/* ----- 빈 상태 ----- */
.sep-empty {
padding: 80px 24px;
text-align: center;
color: var(--text-muted);
}
.sep-empty-icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
opacity: 0.35;
}
.sep-empty-title {
font-size: 15px;
color: var(--text-primary);
margin-bottom: 4px;
}
.sep-empty-hint {
font-size: 13px;
color: var(--text-muted);
}
/* ----- Drag-anywhere overlay ----- */
.sep-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--surface-page) 92%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
}
.sep-overlay-inner {
border: 2px dashed var(--brand-default);
border-radius: 16px;
padding: 64px 96px;
text-align: center;
background: var(--overlay-hover-warm);
}
.sep-overlay-icon {
width: 64px;
height: 64px;
color: var(--brand-default);
margin: 0 auto 16px;
}
.sep-overlay-title {
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.sep-overlay-formats {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* <<< BML_DESIGN_EXPERIMENT_22 */
/* >>> STUDIO_MIXER_REDESIGN_2026_04_08 — 트랙 행 2-row grid + 헤더 단순화 */
/* --- Tracks panel 폭 확장 --- */
.studio-tracks {
width: 340px;
}
@media (max-width: 1199px) {
.studio-tracks { width: 320px; }
}
@media (max-width: 899px) {
.studio-tracks { width: 280px; }
}
/* --- Track row: 2-row grid --- */
.studio-track-row {
display: grid;
grid-template-columns: 16px 1fr auto;
grid-template-rows: auto auto;
column-gap: 10px;
row-gap: 6px;
padding: 12px 14px 12px 12px;
border-bottom: 1px solid var(--border-subtle);
border-left: 4px solid var(--track-color, transparent);
background: transparent;
transition: background 0.12s ease;
position: relative;
/* flex 잔재 무력화 */
align-items: initial;
gap: initial;
}
.studio-track-row:hover {
background: var(--overlay-hover-warm);
}
/* Row A — dot */
.studio-track-dot {
grid-column: 1;
grid-row: 1;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--track-color, var(--text-muted));
align-self: center;
flex-shrink: 0;
}
/* Row A — name */
.studio-track-name {
grid-column: 2;
grid-row: 1;
width: auto;
min-width: 0;
font-family: var(--font-sans, sans-serif);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: center;
letter-spacing: -0.005em;
}
/* Row A — level meter (3rd column) */
.studio-track-row .track-level-meter {
grid-column: 3;
grid-row: 1;
width: 56px;
align-self: center;
}
/* Row B — controls */
.studio-track-controls {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
align-items: center;
gap: 8px;
padding-left: 22px;
}
.studio-track-controls .sep-volume-compact {
flex: 1;
width: auto;
max-width: 160px;
min-width: 80px;
}
/* 기타 트랙 강조 (배경) */
.studio-guitar-hl {
background: color-mix(in srgb, var(--brand-default) 6%, transparent);
}
/* Recording track — 같은 그리드 구조 + 빨강 톤 */
.studio-rec-track {
background: color-mix(in srgb, var(--status-error) 6%, transparent);
}
.studio-rec-track .studio-track-name {
color: var(--status-error) !important;
font-weight: 700;
}
.studio-rec-track .studio-track-dot {
background: var(--status-error) !important;
}
/* --- Icon-only button (헤더 ← 등) --- */
.btn-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border-warm);
color: var(--text-primary);
border-radius: 8px;
cursor: pointer;
padding: 0;
transition: all 0.15s ease;
flex-shrink: 0;
}
.btn-icon:hover {
background: var(--overlay-hover-soft);
border-color: var(--text-muted);
}
.btn-icon:active {
transform: scale(0.96);
}
.btn-icon .lucide-icon {
width: 18px;
height: 18px;
}
/* studio filename — h1 격상 */
h1.studio-filename {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
margin: 0;
padding: 0;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 360px;
}
@media (max-width: 1199px) {
h1.studio-filename { max-width: 280px; font-size: 17px; }
}
@media (max-width: 899px) {
h1.studio-filename { max-width: 220px; font-size: 16px; }
}
/* <<< STUDIO_MIXER_REDESIGN_2026_04_08 */
/* =============================================================================
Studio Track Row — Redesign (2026-04-09)
spec: docs/superpowers/specs/2026-04-09-studio-track-row-redesign.md
mockup: /mockup/track-rows/index.html
Option A · Moises-inspired 60px 1-row
- 좌 4px color strip
- 이름 아래 얇은 full-width level meter (flex 나머지)
- 22px 원형 M/S ghost chip
- 96px inline volume slider
- 단일 tab badge + hover × slide-in
이 섹션은 이전 m4/m5 작업이 쌓아 놓은 .studio-track-row 중복 규칙을
cascade 로 덮어쓴다. 기존 .sep-btn-mute/solo/tab, .track-level-meter
등은 건드리지 않고 새 네이밍(.track-chip/vol/tab-*, .studio-track-strip/
body/meter) 으로 분리.
============================================================================= */
.studio-track-row {
display: grid;
grid-template-columns: 4px 1fr auto auto 96px auto;
grid-template-rows: auto;
column-gap: 10px;
row-gap: 0;
align-items: center;
height: 60px;
/* padding-right = 14px (원래 row gutter) + 22px (track-tab-delete slide-in 공간)
delete 버튼이 .track-tab-slot 의 right: -22px 로 바깥에 absolute 배치되므로
최소 22 + 14 = 36px 의 right gutter 가 없으면 상위 overflow 에 잘린다. */
padding: 0 36px 0 0;
background: var(--surface-card);
border-bottom: 1px solid var(--border-subtle);
border-left: 0;
transition: background 0.12s;
position: relative;
}
.studio-track-row:last-child { border-bottom: 0; }
.studio-track-row:hover {
background: color-mix(in srgb, var(--surface-hover) 35%, var(--surface-card));
}
.studio-track-strip {
grid-column: 1 / 2;
grid-row: 1;
display: block;
width: 4px;
height: 100%;
background: var(--c, var(--text-muted));
}
.studio-track-body {
grid-column: 2 / 3;
grid-row: 1;
min-width: 0;
padding-left: 12px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.studio-track-body .studio-track-name {
grid-column: auto;
grid-row: auto;
font-family: var(--font-sans, "Noto Sans KR", sans-serif);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
padding: 0;
}
.studio-track-body .studio-track-meter {
position: relative;
width: 100%;
height: 3px;
background: var(--border-warm);
border-radius: 999px;
overflow: hidden;
}
.studio-track-body .studio-track-meter-fill {
display: block;
height: 100%;
background: linear-gradient(90deg,
var(--brand-default) 0%,
var(--brand-default) 60%,
var(--status-warning) 75%,
var(--status-error) 95%);
border-radius: 999px;
transition: width 0.08s linear;
}
/* M/S chip */
.studio-track-row .track-chip {
grid-row: 1;
background: transparent;
border: 1px solid var(--border-warm);
color: var(--text-muted);
font-family: var(--font-sans, "Noto Sans KR", sans-serif);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
width: 22px;
height: 22px;
padding: 0;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.12s;
flex-shrink: 0;
}
.studio-track-row .track-chip-m { grid-column: 3 / 4; }
.studio-track-row .track-chip-s { grid-column: 4 / 5; }
.studio-track-row .track-chip:hover {
color: var(--text-primary);
border-color: var(--text-muted);
}
.studio-track-row .track-chip:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 1px;
}
.studio-track-row .track-chip-m.active {
background: var(--status-error);
color: var(--text-inverse);
border-color: var(--status-error);
}
.studio-track-row .track-chip-s.active {
background: var(--brand-default);
color: var(--text-inverse);
border-color: var(--brand-default);
}
/* Volume slider */
.studio-track-row .track-vol {
grid-column: 5 / 6;
grid-row: 1;
-webkit-appearance: none;
appearance: none;
width: 96px;
height: 16px;
background: transparent;
cursor: pointer;
padding: 0;
margin: 0;
}
.studio-track-row .track-vol::-webkit-slider-runnable-track {
height: 3px;
background: var(--border-warm);
border-radius: 999px;
}
.studio-track-row .track-vol::-moz-range-track {
height: 3px;
background: var(--border-warm);
border-radius: 999px;
}
.studio-track-row .track-vol::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--brand-default);
border: 2px solid var(--surface-card);
box-shadow: 0 0 0 1px var(--brand-default);
margin-top: -5px;
cursor: pointer;
}
.studio-track-row .track-vol::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--brand-default);
border: 2px solid var(--surface-card);
box-shadow: 0 0 0 1px var(--brand-default);
cursor: pointer;
}
.studio-track-row .track-vol:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: 999px;
}
/* Tab badge slot + delete × */
.studio-track-row .track-tab-slot {
grid-column: 6 / 7;
grid-row: 1;
position: relative;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.studio-track-row .track-tab-badge {
background: transparent;
border: 1px solid var(--border-warm);
color: var(--text-muted);
width: 22px;
height: 22px;
padding: 0;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.12s;
font-size: 9px;
font-weight: 700;
font-family: "Oxanium", var(--font-sans, sans-serif);
font-variant-numeric: tabular-nums;
}
.studio-track-row .track-tab-badge svg {
width: 12px;
height: 12px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.studio-track-row .track-tab-badge:hover {
color: var(--brand-default);
border-color: var(--brand-default);
}
.studio-track-row .track-tab-badge.completed {
color: var(--brand-default);
border-color: var(--brand-default);
background: var(--overlay-brand-soft);
}
.studio-track-row .track-tab-badge.generating {
cursor: wait;
color: var(--brand-default);
border-color: var(--brand-default);
}
.studio-track-row .track-tab-badge:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 1px;
}
.studio-track-row .track-tab-badge[disabled] {
cursor: wait;
}
.studio-track-row .track-tab-delete {
position: absolute;
right: -22px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
padding: 0;
background: var(--surface-card);
border: 1px solid var(--border-warm);
color: var(--text-muted);
border-radius: 50%;
font-size: 13px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.12s, color 0.12s, border-color 0.12s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.studio-track-row:hover .track-tab-delete { opacity: 1; }
.studio-track-row .track-tab-delete:hover {
color: var(--status-error);
border-color: var(--status-error);
}
/* Guitar highlight (Lead/Rhythm) */
.studio-track-row.studio-guitar-hl {
background: var(--overlay-brand-soft);
}
.studio-track-row.studio-guitar-hl:hover {
background: color-mix(in srgb, var(--overlay-brand-mid) 55%, var(--surface-card));
}
/* Recording 트랙 — status-error 톤 + Monitor/Take 변형 */
.studio-track-row.studio-rec-track {
background: color-mix(in srgb, var(--status-error) 7%, var(--surface-card));
}
.studio-track-row.studio-rec-track .studio-track-strip {
background: var(--status-error);
}
.studio-track-row.studio-rec-track .studio-track-name {
color: var(--status-error);
font-weight: 700;
}
.studio-track-row.studio-rec-track .studio-track-meter-fill {
background: var(--status-error);
}
.studio-track-row .track-chip-monitor {
grid-column: 3 / 4;
}
.studio-track-row .track-chip-monitor svg {
width: 12px;
height: 12px;
}
.studio-track-row .track-chip-monitor.active {
background: var(--status-error);
color: var(--text-inverse);
border-color: var(--status-error);
}
.studio-track-row .track-chip-placeholder {
grid-column: 4 / 5;
grid-row: 1;
display: inline-block;
width: 22px;
height: 22px;
}
.studio-track-row .track-take-counter {
grid-column: 5 / 6;
grid-row: 1;
font-family: "Oxanium", var(--font-sans, sans-serif);
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-align: center;
letter-spacing: 0.04em;
}