App Components
폼 · 입력 심화
앱 폼은 전부 .field 한 패턴으로 통일됩니다 — 라벨 13px/500, 입력은 surface-2 배경에 포커스 시 accent 보더 + 2px 링. 이미지 드롭존 · 인라인 체크박스 · copyrow · auth 카드까지 음원 대시보드의 실제 입력 표면을 그대로 재현했습니다.
필드 · 필드행
.field — 라벨 13/500 + 입력 surface-2. 포커스는 accent 보더 + 2px 링. .field-row는 2열 그리드(640px↓ 1열).
.field · .field-row · 포커스 border-color:accent + box-shadow 0 0 0 2px · :disabled = surface-2/muted-2
이미지 드롭존
.imgdrop — 1.5px 점선 + surface-2. 호버/포커스는 accent 보더, 드래그 시 .drag tint 배경. URL 직접 입력 폴백 포함.
.imgdrop(dashed line-strong) · :hover→accent · .drag→tint · .imgdrop-url 폴백
인라인 체크박스
.check — 16px 박스에 accent-color 적용. 라벨과 한 줄 정렬, gap 8.
.check input[type=checkbox]{accent-color:var(--accent)}
copyrow
읽기 전용 입력 + 복사 버튼 — .copyrow. 생성된 링크/임베드 코드 노출용. 입력은 12px · tabular-nums.
.copyrow{flex} · input flex:1 readonly · .btn-sm 복사
auth 카드
.auth-card — max-width 420, surface + 보더 + radius 8 + 그림자. .brandrow 로고/이름, 내부는 동일한 .field 패턴.
.auth-card(420/surface/shadow) · .brandrow · .logo(42 그라데이션) · .field · .btn-block
토글 스위치
.sw — 42×24 checkbox 슬라이더. off는 surface-2, on은 green(.on), 18px 화이트 knob 21px 이동. 포커스는 accent outline. JS 없이 순수 CSS.
.sw input:checked+.track{green} · knob left 3→21px · :focus-visible outline accent · :disabled .45
색상 피커 페어
native input[type=color] 42×38 + hex 텍스트 입력 한 줄. color 변경 시 hex 동기화(앱은 oninput). 텍스트는 tabular-nums.
.colorpair{flex gap8} · input[type=color] 42×38 radius8 · hex input flex:1 tabular-nums
2FA · 인증 코드
QR placeholder(static) + 수동 키(monospace·자간) + 6자리 코드 입력(가운데·자간·inputmode=numeric). 인증 앱 등록 플로우.
K7QF 4M2A 9XPL 3VTD 6RWN 8ZBC.qr(170 static) · 수동 키 monospace letter-spacing .05em · .code-input centered letter-spacing .25em numeric
사용 규칙
- · 모든 입력은
.field한 패턴 — 라벨 13/500 + surface-2 입력 - · 2개 한 줄 입력은
.field-row그리드(모바일 1열) - · 포커스는 항상 accent 보더 + 2px 링 — 키보드 접근성
- · 체크박스는
accent-color로 브랜드 통일 - · 생성된 링크/코드는 readonly +
.copyrow복사
- · 라벨 대문자·자간 — 앱 라벨은 소문자 13px/500
- · 큰 라운드(12/16) 입력 — 앱은 6px(
.imgdrop만 8px) - · 보라/라임 포커스 링 — 포커스는 accent(red) 고정
- · readonly 값에 일반 입력처럼 편집 인터랙션 부여
- · 밝은 배경 위 폼 배치 — 입력은 항상 화이트 표면