2452 lines
59 KiB
CSS
2452 lines
59 KiB
CSS
/* ═══════════════════════════════════════════════════
|
|
Sonic Forge — AI Music Studio
|
|
Aesthetic: Industrial Recording Studio + Amber VU Meter
|
|
Fonts: Bebas Neue (display) · Syne (body) · Courier Prime (mono)
|
|
═══════════════════════════════════════════════════ */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700&family=Courier+Prime:ital@0;1&display=swap');
|
|
|
|
/* ── CSS tokens ──────────────────────────────────────── */
|
|
.ms {
|
|
--ms-bg: #0c0b09;
|
|
--ms-surface: #151310;
|
|
--ms-surface2: #1e1a14;
|
|
--ms-line: rgba(245, 166, 35, 0.12);
|
|
--ms-line-2: rgba(245, 166, 35, 0.06);
|
|
--ms-text: #ede8e0;
|
|
--ms-muted: rgba(237, 232, 224, 0.42);
|
|
--ms-dim: rgba(237, 232, 224, 0.22);
|
|
--ms-accent: #f5a623;
|
|
--ms-ff-disp: 'Bebas Neue', Impact, sans-serif;
|
|
--ms-ff-body: 'Syne', system-ui, sans-serif;
|
|
--ms-ff-mono: 'Courier Prime', 'Courier New', monospace;
|
|
|
|
display: grid;
|
|
gap: 40px;
|
|
color: var(--ms-text);
|
|
font-family: var(--ms-ff-body);
|
|
transition: --ms-accent 0.4s ease;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
HEADER
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
|
|
gap: 32px;
|
|
align-items: center;
|
|
padding-bottom: 32px;
|
|
border-bottom: 1px solid var(--ms-line);
|
|
}
|
|
|
|
.ms-header__kicker {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.32em;
|
|
color: var(--ms-accent);
|
|
margin: 0 0 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ms-header__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: clamp(56px, 8vw, 96px);
|
|
line-height: 0.88;
|
|
margin: 0 0 18px;
|
|
letter-spacing: 0.02em;
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-header__title em {
|
|
font-style: normal;
|
|
color: var(--ms-accent);
|
|
display: block;
|
|
}
|
|
|
|
.ms-header__desc {
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 14px;
|
|
line-height: 1.8;
|
|
color: var(--ms-muted);
|
|
margin: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.ms-header__right {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 28px; /* status 라벨 공간 */
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
WAVEFORM CANVAS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-waveform-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
flex: 1;
|
|
min-height: 70px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
SONIC RADAR (헤더 비주얼)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-radar {
|
|
position: relative;
|
|
width: 160px;
|
|
height: 160px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* SVG 오버레이 */
|
|
.ms-radar__svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* 가이드 링 */
|
|
.ms-radar__ring {
|
|
fill: none;
|
|
stroke: var(--radar-accent, var(--ms-accent));
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.ms-radar__ring--outer {
|
|
stroke-opacity: 0.14;
|
|
stroke-dasharray: 5 4;
|
|
transform-origin: 80px 80px;
|
|
animation: radar-spin 14s linear infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__ring--outer {
|
|
stroke-opacity: 0.3;
|
|
animation-duration: 4s;
|
|
}
|
|
|
|
.ms-radar__ring--mid {
|
|
stroke-opacity: 0.07;
|
|
stroke-dasharray: 2 8;
|
|
transform-origin: 80px 80px;
|
|
animation: radar-spin-rev 22s linear infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__ring--mid {
|
|
stroke-opacity: 0.15;
|
|
}
|
|
|
|
.ms-radar__ring--inner {
|
|
stroke-opacity: 0.22;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__ring--inner {
|
|
stroke-opacity: 0.45;
|
|
}
|
|
|
|
@keyframes radar-spin { to { transform: rotate(360deg); } }
|
|
@keyframes radar-spin-rev { to { transform: rotate(-360deg); } }
|
|
|
|
/* 크로스헤어 틱 */
|
|
.ms-radar__tick {
|
|
stroke: var(--radar-accent, var(--ms-accent));
|
|
stroke-opacity: 0.28;
|
|
stroke-width: 1;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.ms-radar__tick--dim {
|
|
stroke-opacity: 0.1;
|
|
}
|
|
|
|
/* 스윕 라인 */
|
|
.ms-radar__sweep {
|
|
stroke: var(--radar-accent, var(--ms-accent));
|
|
stroke-width: 1.5;
|
|
stroke-opacity: 0;
|
|
stroke-linecap: round;
|
|
transform-origin: 80px 80px;
|
|
filter: drop-shadow(0 0 4px var(--radar-accent, var(--ms-accent)));
|
|
transition: stroke-opacity 0.4s ease;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__sweep {
|
|
stroke-opacity: 0.75;
|
|
animation: radar-spin 2.4s linear infinite;
|
|
}
|
|
|
|
/* 센터 글로우 링 */
|
|
.ms-radar__center-ring {
|
|
fill: none;
|
|
stroke: var(--radar-accent, var(--ms-accent));
|
|
stroke-opacity: 0.1;
|
|
stroke-width: 1;
|
|
animation: radar-center-ring 3s ease-in-out infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__center-ring {
|
|
animation-duration: 0.7s;
|
|
}
|
|
|
|
@keyframes radar-center-ring {
|
|
0%, 100% { stroke-opacity: 0.07; r: 14; }
|
|
50% { stroke-opacity: 0.28; r: 18; }
|
|
}
|
|
|
|
/* 방사형 바 — 피벗 (회전 기준) */
|
|
.ms-radar__pivot {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
transform: rotate(var(--angle));
|
|
transform-origin: center center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 방사형 바 — 실제 막대 */
|
|
.ms-radar__bar {
|
|
position: absolute;
|
|
left: -1px;
|
|
bottom: 26px; /* innerR — 바 시작 위치 */
|
|
width: 2px;
|
|
height: 2px;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(245, 166, 35, 0.08),
|
|
var(--radar-accent, #f5a623)
|
|
);
|
|
border-radius: 1px 1px 0 0;
|
|
transform-origin: bottom center;
|
|
animation: radar-bar-idle 2s ease-in-out var(--delay) infinite alternate;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__bar {
|
|
animation: radar-bar-active 0.38s ease-in-out var(--delay) infinite alternate;
|
|
box-shadow: 0 0 4px rgba(245, 166, 35, 0.5);
|
|
}
|
|
|
|
@keyframes radar-bar-idle {
|
|
from { height: 2px; opacity: 0.12; }
|
|
to { height: calc(18px * var(--rnd)); opacity: 0.52; }
|
|
}
|
|
|
|
@keyframes radar-bar-active {
|
|
from { height: calc(7px * var(--rnd)); opacity: 0.6; }
|
|
to { height: calc(26px * var(--rnd)); opacity: 1; }
|
|
}
|
|
|
|
/* 센터 도트 */
|
|
.ms-radar__center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--radar-accent, var(--ms-accent));
|
|
box-shadow: 0 0 10px var(--radar-accent, var(--ms-accent));
|
|
animation: radar-center-dot 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__center {
|
|
box-shadow: 0 0 22px var(--radar-accent, var(--ms-accent)),
|
|
0 0 44px rgba(245, 166, 35, 0.3);
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
@keyframes radar-center-dot {
|
|
0%, 100% { transform: translate(-50%, -50%) scale(1); }
|
|
50% { transform: translate(-50%, -50%) scale(0.6); }
|
|
}
|
|
|
|
/* 상태 레이블 */
|
|
.ms-radar__status {
|
|
position: absolute;
|
|
bottom: -22px;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.22em;
|
|
color: var(--ms-dim);
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
transition: color 0.4s ease;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__status {
|
|
color: var(--radar-accent, var(--ms-accent));
|
|
}
|
|
|
|
.ms-radar__status-dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
animation: radar-status-blink 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
.ms-radar.is-active .ms-radar__status-dot {
|
|
animation-duration: 0.45s;
|
|
}
|
|
|
|
@keyframes radar-status-blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.2; }
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LAYOUT
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
|
gap: 32px;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.ms-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.ms-header {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.ms-header__right {
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
CONTROLS (LEFT)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-controls {
|
|
display: grid;
|
|
gap: 28px;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
/* ── Section ──────────────────────────────────────── */
|
|
.ms-section {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.ms-section__head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ms-section__step {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-accent);
|
|
letter-spacing: 0.1em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-section__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 22px;
|
|
letter-spacing: 0.06em;
|
|
margin: 0;
|
|
color: var(--ms-text);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-section__hint {
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-mono);
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* ── 설명 토글 버튼 ──────────────────────────────── */
|
|
.ms-desc-toggle {
|
|
margin-left: auto;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-dim);
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
font-style: italic;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ms-desc-toggle:hover {
|
|
border-color: var(--ms-muted);
|
|
color: var(--ms-muted);
|
|
}
|
|
|
|
.ms-desc-toggle.is-open {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.1);
|
|
}
|
|
|
|
.ms-desc-toggle--sm {
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 9px;
|
|
font-style: normal;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
/* ── 설명 접기/펼치기 래퍼 (grid-template-rows 트릭) ── */
|
|
.ms-desc-wrap {
|
|
display: grid;
|
|
grid-template-rows: 0fr;
|
|
overflow: hidden;
|
|
transition: grid-template-rows 0.28s ease;
|
|
}
|
|
|
|
.ms-desc-wrap.is-open {
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
.ms-desc-wrap > * {
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ── 설명 텍스트 블록 ─────────────────────────────── */
|
|
.ms-section__desc {
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 12px;
|
|
line-height: 2;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
padding: 10px 14px;
|
|
border-left: 2px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.ms-section__desc strong {
|
|
color: var(--ms-muted);
|
|
font-weight: 600;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.ms-section__desc em {
|
|
color: color-mix(in srgb, var(--ms-accent) 65%, var(--ms-muted));
|
|
font-style: normal;
|
|
display: block;
|
|
padding-left: 8px;
|
|
border-left: 1px solid var(--ms-line);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ── 파라미터 라벨 행 ─────────────────────────────── */
|
|
.ms-param-label-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ms-param-hint {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
line-height: 1.75;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
padding: 6px 10px;
|
|
letter-spacing: 0.03em;
|
|
border-left: 2px solid var(--ms-line);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
GENRE GRID
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-genre-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.ms-genre-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.ms-genre-card {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 12px 10px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-genre-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--g-color);
|
|
opacity: 0;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
|
|
.ms-genre-card:hover::before { opacity: 0.06; }
|
|
.ms-genre-card.is-active::before { opacity: 0.14; }
|
|
|
|
.ms-genre-card.is-active {
|
|
border-color: var(--g-color);
|
|
box-shadow: 0 0 0 1px var(--g-color), 0 4px 20px rgba(0,0,0,0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ms-genre-card__icon {
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.ms-genre-card__label {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 14px;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ms-text);
|
|
position: relative;
|
|
}
|
|
|
|
.ms-genre-card__desc {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.06em;
|
|
position: relative;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
MOOD CHIPS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-mood-rack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ms-mood-chip {
|
|
padding: 7px 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-mood-chip::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--m-color);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.ms-mood-chip:hover::before { opacity: 0.08; }
|
|
.ms-mood-chip.is-active::before { opacity: 0.18; }
|
|
|
|
.ms-mood-chip.is-active {
|
|
border-color: var(--m-color);
|
|
color: var(--ms-text);
|
|
box-shadow: 0 0 10px color-mix(in srgb, var(--m-color) 30%, transparent);
|
|
}
|
|
|
|
.ms-mood-chip span {
|
|
position: relative;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
INSTRUMENTS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-instrument-rack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
}
|
|
|
|
.ms-instrument-chip {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 8px 14px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
cursor: pointer;
|
|
transition: border-color 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.ms-instrument-chip.is-active {
|
|
border-color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.1);
|
|
}
|
|
|
|
.ms-instrument-chip__label {
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-instrument-chip__freq {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.ms-instrument-chip.is-active .ms-instrument-chip__freq {
|
|
color: var(--ms-accent);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PARAMETERS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-param-group {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ms-param-label {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
color: var(--ms-muted);
|
|
}
|
|
|
|
.ms-param-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.ms-param-value {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 20px;
|
|
color: var(--ms-accent);
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.ms-param-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
/* Duration rail */
|
|
.ms-duration-rail {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-duration-btn {
|
|
padding: 6px 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.18s ease;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.ms-duration-btn.is-active {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
/* BPM presets */
|
|
.ms-bpm-presets {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ms-bpm-preset {
|
|
flex: 1;
|
|
padding: 6px 8px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1px;
|
|
transition: all 0.18s ease;
|
|
}
|
|
|
|
.ms-bpm-preset span {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
.ms-bpm-preset.is-active {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-text);
|
|
background: rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.ms-bpm-preset.is-active span {
|
|
color: var(--ms-accent);
|
|
}
|
|
|
|
/* BPM slider */
|
|
.ms-bpm-slider {
|
|
width: 100%;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
height: 3px;
|
|
background: var(--ms-surface2);
|
|
border-radius: 999px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-bpm-slider::-webkit-slider-thumb {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--ms-accent);
|
|
border: 2px solid var(--ms-bg);
|
|
box-shadow: 0 0 8px var(--ms-accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-bpm-slider::-moz-range-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--ms-accent);
|
|
border: 2px solid var(--ms-bg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Select */
|
|
.ms-select-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.ms-select-wrap::after {
|
|
content: '▾';
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--ms-muted);
|
|
font-size: 11px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ms-select {
|
|
width: 100%;
|
|
padding: 10px 32px 10px 12px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
color: var(--ms-text);
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
outline: none;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.ms-select:focus {
|
|
border-color: var(--ms-accent);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PROMPT
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-prompt-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.ms-prompt {
|
|
width: 100%;
|
|
padding: 14px;
|
|
border-radius: 14px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
color: var(--ms-text);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
resize: vertical;
|
|
outline: none;
|
|
transition: border-color 0.2s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ms-prompt::placeholder {
|
|
color: var(--ms-dim);
|
|
font-style: italic;
|
|
}
|
|
|
|
.ms-prompt:focus {
|
|
border-color: var(--ms-accent);
|
|
box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.ms-prompt__count {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 12px;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
STAGE (RIGHT)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-stage {
|
|
display: grid;
|
|
gap: 20px;
|
|
position: sticky;
|
|
top: 24px;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.ms-stage__viz {
|
|
position: relative;
|
|
height: 180px;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-stage__viz .ms-waveform-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.ms-stage__overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ms-stage__idle {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
color: var(--ms-dim);
|
|
text-align: center;
|
|
line-height: 2;
|
|
margin: 0;
|
|
}
|
|
|
|
.ms-stage__ready {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ms-stage__ready-icon {
|
|
font-size: 32px;
|
|
filter: drop-shadow(0 0 12px var(--ms-accent));
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
|
|
.ms-stage__ready-label {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 18px;
|
|
letter-spacing: 0.1em;
|
|
color: var(--ms-accent);
|
|
margin: 0;
|
|
}
|
|
|
|
.ms-stage__ready-moods {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.1em;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
GENERATE BUTTON
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-generate-btn {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 22px;
|
|
border-radius: 18px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
cursor: not-allowed;
|
|
transition: all 0.3s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-generate-btn.is-ready {
|
|
cursor: pointer;
|
|
border-color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.06);
|
|
}
|
|
|
|
.ms-generate-btn.is-ready:hover {
|
|
background: rgba(245, 166, 35, 0.12);
|
|
box-shadow: 0 0 32px rgba(245, 166, 35, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.ms-generate-btn.is-generating {
|
|
cursor: default;
|
|
border-color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
/* Pulsing ring */
|
|
.ms-generate-btn__ring {
|
|
position: absolute;
|
|
inset: -1px;
|
|
border-radius: 18px;
|
|
border: 1px solid var(--ms-accent);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.ms-generate-btn.is-generating .ms-generate-btn__ring {
|
|
opacity: 1;
|
|
animation: ring-pulse 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ring-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.4); }
|
|
50% { box-shadow: 0 0 0 12px rgba(245, 166, 35, 0); }
|
|
}
|
|
|
|
.ms-generate-btn__core {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--ms-line);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--ms-muted);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ms-generate-btn.is-ready .ms-generate-btn__core {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-accent);
|
|
box-shadow: 0 0 16px rgba(245, 166, 35, 0.3);
|
|
}
|
|
|
|
.ms-generate-btn__spinner {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(245, 166, 35, 0.2);
|
|
border-top-color: var(--ms-accent);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.ms-generate-btn__label {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 20px;
|
|
letter-spacing: 0.1em;
|
|
color: var(--ms-muted);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.ms-generate-btn.is-ready .ms-generate-btn__label {
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PROGRESS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-progress {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ms-progress__bar {
|
|
height: 3px;
|
|
background: var(--ms-surface2);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-progress__fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--ms-accent), #e85c3a);
|
|
border-radius: 999px;
|
|
transition: width 0.5s ease;
|
|
box-shadow: 0 0 10px var(--ms-accent);
|
|
}
|
|
|
|
.ms-progress__meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.ms-progress__msg {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.06em;
|
|
animation: blink-text 1s ease infinite alternate;
|
|
}
|
|
|
|
@keyframes blink-text {
|
|
from { opacity: 0.6; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.ms-progress__pct {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 13px;
|
|
color: var(--ms-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
SPEC CHIPS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-stage__spec {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ms-spec-chip {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding: 5px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-spec-chip__label {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
.ms-spec-chip__val {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
RESULT CARD
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-result {
|
|
border: 1px solid var(--result-accent, var(--ms-accent));
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
background: var(--ms-surface);
|
|
display: grid;
|
|
gap: 16px;
|
|
box-shadow: 0 0 40px rgba(245, 166, 35, 0.08);
|
|
animation: result-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
@keyframes result-in {
|
|
from { opacity: 0; transform: translateY(16px) scale(0.98); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.ms-result__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.ms-result__badge {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
color: #97c9aa;
|
|
border: 1px solid rgba(151, 201, 170, 0.3);
|
|
border-radius: 999px;
|
|
padding: 3px 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ms-result__time {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
.ms-result__title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.ms-result__icon {
|
|
font-size: 28px;
|
|
filter: drop-shadow(0 0 10px var(--result-accent, var(--ms-accent)));
|
|
}
|
|
|
|
.ms-result__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 18px;
|
|
letter-spacing: 0.05em;
|
|
margin: 0 0 4px;
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-result__meta {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
margin: 0;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* ── Player ──────────────────────────────────────── */
|
|
.ms-player {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.ms-player__play {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--result-accent, var(--ms-accent));
|
|
background: transparent;
|
|
color: var(--result-accent, var(--ms-accent));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: background 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.ms-player__play.is-playing {
|
|
background: rgba(245, 166, 35, 0.15);
|
|
box-shadow: 0 0 14px rgba(245, 166, 35, 0.3);
|
|
}
|
|
|
|
.ms-player__timeline {
|
|
flex: 1;
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.ms-player__bar {
|
|
height: 4px;
|
|
background: var(--ms-surface2);
|
|
border-radius: 999px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-player__fill {
|
|
height: 100%;
|
|
background: var(--result-accent, var(--ms-accent));
|
|
border-radius: 999px;
|
|
transition: width 1s linear;
|
|
}
|
|
|
|
.ms-player__thumb {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--result-accent, var(--ms-accent));
|
|
box-shadow: 0 0 6px var(--result-accent, var(--ms-accent));
|
|
transition: left 1s linear;
|
|
}
|
|
|
|
.ms-player__times {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
/* Result tags */
|
|
.ms-result__tags {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-result__tag {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--ms-line);
|
|
color: var(--ms-muted);
|
|
letter-spacing: 0.06em;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* Result actions */
|
|
.ms-result__actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-result__yt-hint {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
letter-spacing: 0.04em;
|
|
border-top: 1px solid var(--ms-line);
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
BUTTONS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-btn {
|
|
padding: 9px 18px;
|
|
border-radius: 10px;
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.ms-btn--ghost {
|
|
border-color: var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
}
|
|
|
|
.ms-btn--ghost:hover {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-btn--outline {
|
|
border-color: var(--ms-accent);
|
|
background: transparent;
|
|
color: var(--ms-accent);
|
|
}
|
|
|
|
.ms-btn--outline:hover {
|
|
background: rgba(245, 166, 35, 0.1);
|
|
}
|
|
|
|
.ms-btn--primary {
|
|
border-color: var(--ms-accent);
|
|
background: var(--ms-accent);
|
|
color: #0c0b09;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ms-btn--primary:hover {
|
|
background: #fbb740;
|
|
box-shadow: 0 4px 20px rgba(245, 166, 35, 0.35);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
STAGE FOOTER
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-stage__footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--ms-line-2);
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-stage__footer-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--ms-accent);
|
|
flex-shrink: 0;
|
|
margin-top: 4px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ms-stage__footer-text {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
line-height: 1.7;
|
|
letter-spacing: 0.04em;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
TAB NAV (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
border-bottom: 1px solid var(--ms-line);
|
|
padding-bottom: 0;
|
|
margin-bottom: -40px; /* collapse gap above layout */
|
|
}
|
|
|
|
.ms-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 10px 20px;
|
|
border-radius: 12px 12px 0 0;
|
|
border: 1px solid transparent;
|
|
border-bottom: none;
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
bottom: -1px;
|
|
}
|
|
|
|
.ms-tab:hover {
|
|
color: var(--ms-text);
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-tab.is-active {
|
|
border-color: var(--ms-line);
|
|
background: var(--ms-surface);
|
|
color: var(--ms-accent);
|
|
}
|
|
|
|
.ms-tab__icon {
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ms-tab__badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 5px;
|
|
border-radius: 999px;
|
|
background: var(--ms-accent);
|
|
color: #0c0b09;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
font-family: var(--ms-ff-mono);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
AUDIO PLAYER (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-audio-player {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.ms-volume {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
color: var(--ms-muted);
|
|
}
|
|
|
|
.ms-volume__slider {
|
|
width: 64px;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
height: 3px;
|
|
background: var(--ms-surface2);
|
|
border-radius: 999px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-volume__slider::-webkit-slider-thumb {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
background: var(--player-accent, var(--ms-accent));
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms-volume__slider::-moz-range-thumb {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
background: var(--player-accent, var(--ms-accent));
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
ICON BUTTONS (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-btn--icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--ms-line);
|
|
background: transparent;
|
|
color: var(--ms-muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.18s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-btn--icon:hover,
|
|
.ms-btn--icon.is-active {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-accent);
|
|
background: rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.ms-btn--icon.ms-btn--danger:hover {
|
|
border-color: #e85c3a;
|
|
color: #e85c3a;
|
|
background: rgba(232, 92, 58, 0.08);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
ERROR (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-gen-error {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(232, 92, 58, 0.4);
|
|
background: rgba(232, 92, 58, 0.07);
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 12px;
|
|
color: #e85c3a;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LIBRARY (Phase 2)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-library {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.ms-library--empty {
|
|
padding: 64px 24px;
|
|
text-align: center;
|
|
border: 1px dashed var(--ms-line);
|
|
border-radius: 20px;
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-library__empty-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.ms-library__empty-text {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 22px;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ms-muted);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.ms-library__empty-hint {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.ms-library__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ms-library__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 26px;
|
|
letter-spacing: 0.07em;
|
|
margin: 0;
|
|
color: var(--ms-text);
|
|
flex: 1;
|
|
}
|
|
|
|
.ms-library__count {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 999px;
|
|
padding: 3px 10px;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.ms-library__refresh {
|
|
font-size: 12px;
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.ms-library__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
align-items: start;
|
|
gap: 14px;
|
|
}
|
|
|
|
/* ── Library Card ─────────────────────────────────── */
|
|
.ms-lib-card {
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--ms-line);
|
|
background: var(--ms-surface);
|
|
display: grid;
|
|
gap: 10px;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.ms-lib-card.is-playing {
|
|
border-color: var(--lib-accent, var(--ms-accent));
|
|
box-shadow: 0 0 20px rgba(245, 166, 35, 0.1);
|
|
}
|
|
|
|
.ms-lib-card:hover {
|
|
border-color: color-mix(in srgb, var(--lib-accent, var(--ms-accent)) 60%, transparent);
|
|
}
|
|
|
|
.ms-lib-card__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ms-lib-card__icon {
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
filter: drop-shadow(0 0 6px var(--lib-accent, var(--ms-accent)));
|
|
}
|
|
|
|
.ms-lib-card__title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ms-text);
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ms-lib-card__controls {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-lib-card__sub {
|
|
padding-left: 28px;
|
|
}
|
|
|
|
.ms-lib-card__filename {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
margin: 0 0 2px;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ms-lib-card__meta {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.ms-lib-card__tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.ms-lib-card__date {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
margin: 0;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
MOBILE
|
|
═══════════════════════════════════════════════════ */
|
|
@media (max-width: 640px) {
|
|
.ms-header__title {
|
|
font-size: clamp(44px, 14vw, 70px);
|
|
}
|
|
|
|
.ms-stage {
|
|
position: static;
|
|
}
|
|
|
|
.ms-result__actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ms-btn {
|
|
text-align: center;
|
|
}
|
|
|
|
.ms-bpm-presets {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 크레딧 뱃지 */
|
|
.ms-credits {
|
|
position: static;
|
|
margin-bottom: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 모델 바 */
|
|
.ms-model-bar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ms-model-bar__options {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 프로바이더 바 */
|
|
.ms-provider-bar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ms-provider-btn__desc {
|
|
display: none;
|
|
}
|
|
|
|
/* 라이브러리 그리드 1열 */
|
|
.ms-library__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* 카드 액션 버튼 */
|
|
.ms-lib-card__actions {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PROVIDER BAR
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-provider-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ms-provider-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-align: left;
|
|
}
|
|
|
|
.ms-provider-btn:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
border-color: rgba(255,255,255,0.15);
|
|
}
|
|
|
|
.ms-provider-btn.is-active {
|
|
background: rgba(var(--ms-accent-rgb, 245,166,35), 0.12);
|
|
border-color: var(--ms-accent, #f5a623);
|
|
box-shadow: 0 0 12px rgba(var(--ms-accent-rgb, 245,166,35), 0.15);
|
|
}
|
|
|
|
.ms-provider-btn__icon {
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-provider-btn__name {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 15px;
|
|
letter-spacing: 0.04em;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.ms-provider-btn__desc {
|
|
font-size: 10px;
|
|
color: rgba(255,255,255,0.4);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
VOCALS & LYRICS (SUNO)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-vocal-toggle {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.ms-vocal-btn {
|
|
flex: 1;
|
|
padding: 10px 12px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 8px;
|
|
color: rgba(255,255,255,0.6);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.ms-vocal-btn:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.ms-vocal-btn.is-active {
|
|
background: rgba(var(--ms-accent-rgb, 245,166,35), 0.12);
|
|
border-color: var(--ms-accent, #f5a623);
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.ms-lyrics-wrap {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ms-lyrics-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.ms-lyrics {
|
|
width: 100%;
|
|
min-height: 160px;
|
|
padding: 12px;
|
|
background: rgba(0,0,0,0.3);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 8px;
|
|
color: #e0e0e0;
|
|
font-family: 'Courier Prime', monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
resize: vertical;
|
|
}
|
|
|
|
.ms-lyrics:focus {
|
|
outline: none;
|
|
border-color: var(--ms-accent, #f5a623);
|
|
}
|
|
|
|
.ms-lyrics-hint {
|
|
margin-top: 6px;
|
|
font-size: 11px;
|
|
color: rgba(255,255,255,0.35);
|
|
}
|
|
|
|
.ms-btn--sm {
|
|
font-size: 11px;
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
PROVIDER TAG
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-result__tag--provider {
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.ms-result__tag--provider.is-suno {
|
|
background: rgba(168, 85, 247, 0.15);
|
|
border-color: rgba(168, 85, 247, 0.3);
|
|
color: #c084fc;
|
|
}
|
|
|
|
.ms-result__tag--provider.is-local {
|
|
background: rgba(96, 165, 250, 0.15);
|
|
border-color: rgba(96, 165, 250, 0.3);
|
|
color: #60a5fa;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LYRICS IN RESULT
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-result__lyrics {
|
|
margin-top: 12px;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-result__lyrics summary {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: rgba(255,255,255,0.6);
|
|
background: rgba(255,255,255,0.02);
|
|
}
|
|
|
|
.ms-result__lyrics summary:hover {
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
.ms-result__lyrics-text {
|
|
padding: 12px;
|
|
margin: 0;
|
|
font-family: 'Courier Prime', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
color: rgba(255,255,255,0.7);
|
|
white-space: pre-wrap;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
ERROR BANNER
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-error-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(232, 92, 58, 0.3);
|
|
background: rgba(232, 92, 58, 0.08);
|
|
color: #e85c3a;
|
|
font-size: 12px;
|
|
font-family: var(--ms-ff-mono);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
SKELETON LOADING
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-lib-card--skeleton {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ms-skel {
|
|
display: block;
|
|
border-radius: 4px;
|
|
background: linear-gradient(90deg, var(--ms-surface2) 25%, rgba(255,255,255,0.06) 50%, var(--ms-surface2) 75%);
|
|
background-size: 200% 100%;
|
|
animation: ms-shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.ms-skel--icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-skel--title {
|
|
flex: 1;
|
|
height: 16px;
|
|
}
|
|
|
|
.ms-skel--btn {
|
|
width: 48px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-skel--filename {
|
|
width: 70%;
|
|
height: 10px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ms-skel--meta {
|
|
width: 45%;
|
|
height: 10px;
|
|
}
|
|
|
|
.ms-skel--tag {
|
|
width: 52px;
|
|
height: 18px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
@keyframes ms-shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
CREDITS BADGE (header)
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-credits {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 6px;
|
|
background: var(--ms-surface);
|
|
font-size: 11px;
|
|
color: var(--ms-muted);
|
|
z-index: 2;
|
|
}
|
|
|
|
.ms-credits__label {
|
|
font-family: var(--ms-ff-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.ms-credits__value {
|
|
font-weight: 700;
|
|
color: var(--ms-accent);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
MODEL SELECTOR BAR
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-model-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: var(--ms-surface);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ms-model-bar__label {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--ms-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-model-bar__options {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-model-btn {
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
font-family: var(--ms-ff-mono);
|
|
background: transparent;
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 4px;
|
|
color: var(--ms-muted);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.ms-model-btn:hover {
|
|
border-color: var(--ms-accent);
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-model-btn.is-active {
|
|
background: var(--ms-accent);
|
|
border-color: var(--ms-accent);
|
|
color: #0c0b09;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LIBRARY CARD — ACTION BUTTONS
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-lib-card__actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 6px 0 0;
|
|
border-top: 1px solid var(--ms-line-2);
|
|
margin-top: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ms-lib-card__actions .ms-btn--sm {
|
|
font-size: 10px;
|
|
padding: 3px 8px;
|
|
}
|
|
|
|
.ms-lib-card__actions .ms-btn--sm:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
LYRICS TAB
|
|
═══════════════════════════════════════════════════ */
|
|
.ms-lyrics-tab {
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.ms-lyrics-tab__head {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ms-lyrics-tab__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 28px;
|
|
letter-spacing: 0.06em;
|
|
margin: 0 0 8px;
|
|
color: var(--ms-text);
|
|
}
|
|
|
|
.ms-lyrics-tab__desc {
|
|
font-size: 12px;
|
|
color: var(--ms-muted);
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ── Input area ── */
|
|
.ms-lyrics-tab__form {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.ms-lyrics-tab__input-wrap {
|
|
display: grid;
|
|
gap: 8px;
|
|
background: var(--ms-surface);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.ms-lyrics-tab__input-wrap:focus-within {
|
|
border-color: var(--ms-accent);
|
|
}
|
|
|
|
.ms-lyrics-tab__input {
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--ms-text);
|
|
font-family: var(--ms-ff-body);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.ms-lyrics-tab__input::placeholder {
|
|
color: var(--ms-dim);
|
|
}
|
|
|
|
.ms-lyrics-tab__input-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ms-lyrics-tab__count {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
/* ── Accent button ── */
|
|
.ms-btn--accent {
|
|
padding: 8px 20px;
|
|
font-size: 13px;
|
|
font-family: var(--ms-ff-body);
|
|
font-weight: 600;
|
|
background: var(--ms-accent);
|
|
color: #0c0b09;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s, transform 0.15s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ms-btn--accent:hover:not(:disabled) {
|
|
opacity: 0.9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ms-btn--accent:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ms-btn--accent.is-loading {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ms-btn__spinner {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid rgba(12,11,9,0.2);
|
|
border-top-color: #0c0b09;
|
|
border-radius: 50%;
|
|
animation: ms-spin 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes ms-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ── Empty state ── */
|
|
.ms-lyrics-tab__empty {
|
|
text-align: center;
|
|
padding: 48px 20px;
|
|
border: 1px dashed var(--ms-line);
|
|
border-radius: 16px;
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-lyrics-tab__empty-icon {
|
|
font-size: 40px;
|
|
display: block;
|
|
margin-bottom: 12px;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.ms-lyrics-tab__empty p {
|
|
color: var(--ms-muted);
|
|
font-size: 13px;
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.ms-lyrics-tab__empty-hint {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px !important;
|
|
color: var(--ms-dim) !important;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ── Loading state ── */
|
|
.ms-lyrics-tab__loading {
|
|
text-align: center;
|
|
padding: 32px 20px;
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 16px;
|
|
background: var(--ms-surface);
|
|
}
|
|
|
|
.ms-lyrics-tab__loading p {
|
|
color: var(--ms-muted);
|
|
font-size: 12px;
|
|
font-family: var(--ms-ff-mono);
|
|
margin: 12px 0 0;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.ms-lyrics-tab__loading-bar {
|
|
height: 3px;
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
border-radius: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--ms-accent), transparent);
|
|
background-size: 200% 100%;
|
|
animation: ms-shimmer 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ── Results list ── */
|
|
.ms-lyrics-tab__results {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* ── Lyrics Card ── */
|
|
.ms-lyrics-card {
|
|
background: var(--ms-surface);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.ms-lyrics-card:hover {
|
|
border-color: color-mix(in srgb, var(--ms-accent) 50%, transparent);
|
|
}
|
|
|
|
.ms-lyrics-card__header {
|
|
padding: 14px 16px 10px;
|
|
border-bottom: 1px solid var(--ms-line-2);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ms-lyrics-card__title {
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 18px;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ms-text);
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.ms-lyrics-card__prompt {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 10px;
|
|
color: var(--ms-dim);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.ms-lyrics-card__text {
|
|
padding: 14px 16px;
|
|
margin: 0;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
color: rgba(255,255,255,0.75);
|
|
white-space: pre-wrap;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ms-lyrics-card__date {
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 9px;
|
|
color: var(--ms-dim);
|
|
letter-spacing: 0.04em;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms-lyrics-card__actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 8px 16px 12px;
|
|
border-top: 1px solid var(--ms-line-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── 수정 모드 ── */
|
|
.ms-lyrics-card.is-editing {
|
|
border-color: var(--ms-accent);
|
|
box-shadow: 0 0 16px rgba(245, 166, 35, 0.08);
|
|
}
|
|
|
|
.ms-lyrics-card__title-input {
|
|
width: 100%;
|
|
background: var(--ms-surface2);
|
|
border: 1px solid var(--ms-line);
|
|
border-radius: 6px;
|
|
padding: 6px 10px;
|
|
font-family: var(--ms-ff-disp);
|
|
font-size: 16px;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ms-text);
|
|
outline: none;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ms-lyrics-card__title-input:focus {
|
|
border-color: var(--ms-accent);
|
|
}
|
|
|
|
.ms-lyrics-card__text-input {
|
|
width: 100%;
|
|
background: var(--ms-surface2);
|
|
border: none;
|
|
border-top: 1px solid var(--ms-line-2);
|
|
border-bottom: 1px solid var(--ms-line-2);
|
|
padding: 14px 16px;
|
|
font-family: var(--ms-ff-mono);
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
color: rgba(255,255,255,0.85);
|
|
resize: vertical;
|
|
min-height: 200px;
|
|
outline: none;
|
|
}
|
|
|
|
.ms-btn--danger-text {
|
|
color: #e85c3a !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ms-btn--danger-text:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ms-btn--accent.ms-btn--sm {
|
|
padding: 3px 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════
|
|
REDUCED MOTION
|
|
═══════════════════════════════════════════════════ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ms-stage__ready-icon,
|
|
.ms-vu__bar,
|
|
.ms-generate-btn__ring,
|
|
.ms-progress__msg {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
/* ── Phase 1: Credits Badge ─────────────────────────────── */
|
|
.ms-credits-badge {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 6px 14px; border-radius: 20px;
|
|
background: rgba(245, 166, 35, 0.1);
|
|
border: 1px solid rgba(245, 166, 35, 0.25);
|
|
font-family: 'Courier Prime', monospace;
|
|
font-size: 0.85rem; color: var(--ms-accent);
|
|
}
|
|
.ms-credits-badge__icon { font-size: 1rem; }
|
|
.ms-credits-badge__value { font-weight: 700; font-size: 1.1rem; }
|
|
.ms-credits-badge__label { color: var(--ms-muted); font-size: 0.75rem; text-transform: uppercase; }
|
|
.ms-credits-badge.is-low {
|
|
background: rgba(231, 76, 60, 0.15);
|
|
border-color: rgba(231, 76, 60, 0.4);
|
|
color: #e74c3c;
|
|
animation: pulse-badge 1.5s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse-badge {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|