/* ================================================================
MAKECALL Voice AI Agents — Component Library
Reusable UI components built on design tokens.
================================================================ */
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--font-medium);
line-height: var(--leading-tight);
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
white-space: nowrap;
user-select: none;
text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-text-inverse);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-secondary {
background: var(--color-bg-0);
color: var(--color-text-primary);
border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled) {
background: var(--color-bg-2);
border-color: var(--color-border-hover);
}
.btn-ghost {
background: transparent;
color: var(--color-text-secondary);
}
.btn-ghost:hover:not(:disabled) {
background: var(--color-bg-2);
color: var(--color-text-primary);
}
.btn-danger {
background: var(--color-danger);
color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-md); }
.btn-icon { padding: var(--space-2); }
/* ── Cards ── */
/* 2026-05-08 — 라이트 모드 카드/배경 구분 강화 (사용자 보고).
* bg-0 (#ffffff) 와 bg-1 (#f3f4f6) 의 명도차 4% + border #d1d5db 16%
* 콘트라스트로 카드 윤곽 명확. 추가로 default shadow-xs 적용.
* hover 시 shadow-sm 으로 elevation 시각 신호 강화. */
.card {
background: var(--color-bg-0);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: box-shadow var(--duration-normal) var(--ease-default),
border-color var(--duration-normal) var(--ease-default),
transform var(--duration-normal) var(--ease-default);
position: relative;
}
.card:hover {
box-shadow: var(--shadow-sm);
border-color: var(--color-border-hover);
}
/* ★ 공용 카드 상단 그라데이션 스트라이프 (통화 모니터링 .call-card 와 동일 시각 언어)
- 기본: 브랜드 그라데이션 (보라→시안)
- .card-accent-hot/warn/cool/brand/info/rainbow 로 색 테마 교체 가능
- .no-edge 로 제외 가능 (예: 모달/공지 카드)
- 호버 시 opacity 상승 + 살짝 두꺼워짐 */
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--card-edge,
linear-gradient(90deg,
var(--color-brand-400) 0%,
var(--color-primary) 35%,
#00bcd4 70%,
var(--color-brand-300) 100%));
opacity: 0.75;
transition: opacity var(--duration-normal) var(--ease-default),
height var(--duration-normal) var(--ease-default);
pointer-events: none;
z-index: 1;
}
.card:hover::before { opacity: 1; height: 4px; }
/* 테마별 색상 프리셋 */
.card.card-accent-hot { --card-edge: linear-gradient(90deg, #ef4444, #f59e0b, #ef4444); }
.card.card-accent-warn { --card-edge: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b); }
.card.card-accent-cool { --card-edge: linear-gradient(90deg, #10b981, #34d399, #10b981); }
.card.card-accent-brand { --card-edge: linear-gradient(90deg, var(--color-brand-400), var(--color-primary), var(--color-brand-400)); }
.card.card-accent-info { --card-edge: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6); }
.card.card-accent-rainbow{ --card-edge: linear-gradient(90deg, #ef4444, #f59e0b, var(--color-brand-400), #00bcd4, #10b981); }
/* 제외: 상단 스트라이프가 부적절한 카드 */
.card.card-no-edge::before,
.card.no-edge::before { display: none; }
.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-hover); }
.card-header {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
font-size: var(--text-md);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
}
.card-body { padding: var(--space-5); }
.card-footer {
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--color-border);
background: var(--color-bg-1);
}
/* ── KPI Stat Card ── */
.stat-card {
background: var(--color-bg-0);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.stat-label {
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stat-value {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--color-text-primary);
line-height: var(--leading-tight);
}
.stat-change {
font-size: var(--text-xs);
font-weight: var(--font-medium);
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.stat-change.up { color: var(--color-success); }
.stat-change.down { color: var(--color-danger); }
/* ── Badges ── */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
font-size: var(--text-xs);
font-weight: var(--font-medium);
border-radius: var(--radius-full);
line-height: var(--leading-normal);
}
.badge-primary { background: var(--color-primary-subtle); color: var(--color-primary); }
.badge-success { background: var(--color-success-subtle); color: var(--color-success); }
.badge-warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.badge-neutral { background: var(--color-bg-2); color: var(--color-text-secondary); }
/* ── Dot Status Indicator ── */
.dot {
width: 8px; height: 8px;
border-radius: var(--radius-full);
display: inline-block;
flex-shrink: 0;
}
.dot-success { background: var(--color-success); }
.dot-warning { background: var(--color-warning); }
.dot-danger { background: var(--color-danger); }
.dot-neutral { background: var(--color-text-tertiary); }
.dot-pulse {
animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ════════════════════════════════════════════════════════════════════
★ Form Controls — 2026 Senior-Grade UX
필수/선택/잠금 시각 구분 · 라벨 위계 · 포커스 피드백 · 검증 애니메이션
──────────────────────────────────────────────────────────────────── */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
}
/* 라벨 행: 제목 + 필수마커 + 힌트 아이콘을 한 줄에 */
.form-label {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 6px;
line-height: 1.35;
}
/* 필수 표시 — 빨간 별표 + pulse 애니메이션 */
.form-label .req,
.form-label .required {
color: var(--color-danger);
font-weight: var(--font-bold);
font-size: var(--text-md);
line-height: 1;
animation: fx-pulse-live 2.4s ease-in-out infinite;
}
/* 필수 pill 뱃지 (더 명시적) */
.form-label .req-badge {
display: inline-flex;
align-items: center;
padding: 1px 6px;
font-size: 10px;
font-weight: var(--font-bold);
letter-spacing: 0.05em;
color: var(--color-danger);
background: rgba(220, 38, 38, 0.10);
border: 1px solid rgba(220, 38, 38, 0.25);
border-radius: var(--radius-full);
text-transform: uppercase;
line-height: 1.2;
}
/* 선택 표시 — 차분한 회색 태그 */
.form-label .opt,
.form-label .optional {
display: inline-flex;
align-items: center;
padding: 1px 6px;
font-size: 10px;
font-weight: var(--font-medium);
color: var(--color-text-tertiary);
background: var(--color-bg-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.2;
}
/* 관리자 잠금 — 경고 톤 */
.form-label .locked {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px;
font-size: 10px;
font-weight: var(--font-semibold);
color: var(--color-warning);
background: rgba(234, 88, 12, 0.10);
border: 1px solid rgba(234, 88, 12, 0.25);
border-radius: var(--radius-full);
line-height: 1.2;
}
/* 라벨 오른쪽 메타 (예: 문자수 카운터) — margin-left:auto 로 자동 우측 정렬 */
.form-label .meta {
margin-left: auto;
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-text-tertiary);
font-variant-numeric: tabular-nums;
}
/* 힌트 — 정보 아이콘 접두사 + 부드러운 컬러 + 가독성 향상 */
.form-hint {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
line-height: 1.55;
display: flex;
align-items: flex-start;
gap: 5px;
padding-left: 2px;
}
.form-hint::before {
content: 'ℹ';
flex-shrink: 0;
font-size: 11px;
color: var(--color-brand-300);
opacity: 0.6;
margin-top: 1px;
}
.form-hint.no-icon::before { display: none; }
/* ★ 2026-05-08 — 멀티-라인 /
/ 등이 섞인 긴 설명용 변형.
* 기본 .form-hint 는 flex 라 inline 요소가 단어 단위로 분해돼 줄바꿈이 깨짐.
* .form-hint-block 은 일반 block 흐름으로 자연스러운 줄바꿈 보장. */
.form-hint.form-hint-block {
display: block;
padding-left: 16px; /* 아이콘 자리 보정 */
position: relative;
}
.form-hint.form-hint-block::before {
position: absolute;
left: 2px;
top: 1px;
}
.form-hint.form-hint-error {
color: var(--color-danger);
}
.form-hint.form-hint-error::before {
content: '⚠';
color: var(--color-danger);
opacity: 1;
}
.form-hint.form-hint-success {
color: var(--color-success);
}
.form-hint.form-hint-success::before {
content: '✓';
color: var(--color-success);
opacity: 1;
}
/* 인풋/셀렉트/텍스트에어리어 공통 */
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 10px var(--space-3);
font-family: var(--font-sans);
font-size: var(--text-base);
color: var(--color-text-primary);
background: var(--color-bg-0);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
outline: none;
transition:
border-color var(--duration-fast),
box-shadow var(--duration-normal),
background var(--duration-fast),
transform var(--duration-fast);
}
/* 호버 — 미묘한 테두리 강조 */
.form-input:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled),
.form-textarea:hover:not(:focus):not(:disabled):not([readonly]) {
border-color: var(--color-border-hover);
}
/* 포커스 — 브랜드 글로우 + 살짝 리프트 */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--color-brand-400);
box-shadow:
0 0 0 3px rgba(var(--brand-rgb), 0.14),
0 1px 2px rgba(0, 0, 0, 0.04);
background: var(--color-bg-0);
}
/* 비활성 / readonly — 시각적으로 "잠금" 명확히 */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
.form-input[readonly],
.form-textarea[readonly] {
background: var(--color-bg-2);
color: var(--color-text-secondary);
cursor: not-allowed;
opacity: 0.85;
}
/* placeholder */
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-tertiary);
opacity: 0.7;
}
/* textarea — 부드러운 기본 높이 + resize 지원 */
.form-textarea {
resize: vertical;
min-height: 88px;
line-height: 1.55;
}
/* 검증 상태 */
.form-input.error,
.form-select.error,
.form-textarea.error,
.form-group.invalid .form-input,
.form-group.invalid .form-select,
.form-group.invalid .form-textarea {
border-color: var(--color-danger);
background: rgba(220, 38, 38, 0.03);
}
.form-input.error:focus,
.form-group.invalid .form-input:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}
.form-group.invalid { animation: fx-shake 0.35s cubic-bezier(.36,.07,.19,.97); }
@keyframes fx-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
}
.form-input.success,
.form-group.valid .form-input {
border-color: var(--color-success);
}
.form-input.success:focus,
.form-group.valid .form-input:focus {
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}
/* ── Form Group 변형 ── */
/* 필수 그룹 — 좌측에 얇은 빨간 액센트 바 (선택적) */
.form-group.form-group-required {
padding-left: var(--space-3);
border-left: 2px solid transparent;
background: linear-gradient(90deg, rgba(220, 38, 38, 0.04), transparent 40%);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
transition: border-color var(--duration-normal);
}
.form-group.form-group-required:focus-within {
border-left-color: var(--color-danger);
}
/* 잠금 그룹 — 경고 톤 좌측 라인 */
.form-group.form-group-locked {
padding-left: var(--space-3);
border-left: 2px dashed rgba(234, 88, 12, 0.45);
background: linear-gradient(90deg, rgba(234, 88, 12, 0.04), transparent 40%);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
/* ── Inline / Compact 변형 ── */
.form-input-sm,
.form-select-sm {
padding: 6px 10px;
font-size: var(--text-sm);
}
.form-input-lg {
padding: 14px var(--space-4);
font-size: var(--text-md);
font-weight: var(--font-medium);
}
/* ── Form Row / Section ── */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
@media (max-width: 640px) {
.form-row { grid-template-columns: 1fr; }
}
/* ── Form Section (그룹 제목) ── */
.form-section-title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--font-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-secondary);
padding-bottom: var(--space-2);
margin-top: var(--space-4);
margin-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
}
.form-section-title::before {
content: '';
width: 3px; height: 14px;
background: linear-gradient(180deg, var(--color-brand-400), var(--color-primary));
border-radius: 2px;
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.form-label .req,
.form-label .required,
.form-group.invalid {
animation: none !important;
}
}
/* ── Toggle Switch ── */
.toggle {
position: relative;
width: 40px; height: 22px;
background: var(--color-bg-3);
border-radius: var(--radius-full);
cursor: pointer;
transition: background var(--duration-fast);
}
.toggle::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
background: #fff;
border-radius: var(--radius-full);
transition: transform var(--duration-fast);
box-shadow: var(--shadow-xs);
}
.toggle.active {
background: var(--color-primary);
}
.toggle.active::after {
transform: translateX(18px);
}
/* ── Tables ── */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.table th {
text-align: left;
padding: var(--space-3) var(--space-4);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
background: var(--color-bg-1);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.table td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
color: var(--color-text-primary);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-bg-1); }
/* ── Modal ── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-normal), visibility var(--duration-normal);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
background: var(--color-bg-0);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: 90%;
max-width: 520px;
max-height: 85vh;
overflow-y: auto;
transform: scale(0.95);
transition: transform var(--duration-normal) var(--ease-out);
}
.modal-overlay.open .modal { transform: scale(1); }
/* ★ 2026-05-10 — 모달 padding 표준 (CLAUDE.md "Modal padding standard").
좌우 var(--space-8) (32px) — 콘텐츠가 가장자리에 붙어 "에러 대화상자"
처럼 보이지 않도록. 위/아래는 layer 별 비대칭 (header/body 는 호흡 필요,
footer 는 액션 바라 짧게 OK). 모바일 (≤640px) 은 한 단계씩 환원. */
.modal-header {
padding: var(--space-5) var(--space-8);
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: var(--text-lg); font-weight: var(--font-semibold); }
.modal-body { padding: var(--space-6) var(--space-8); }
.modal-footer {
padding: var(--space-4) var(--space-8);
border-top: 1px solid var(--color-border);
display: flex;
justify-content: flex-end;
gap: var(--space-3);
}
@media (max-width: 640px) {
.modal-header { padding: var(--space-4) var(--space-5); }
.modal-body { padding: var(--space-5) var(--space-5); }
.modal-footer { padding: var(--space-3) var(--space-5); }
}
/* ── Toast Notifications ── */
.toast-container {
position: fixed;
top: var(--space-4);
right: var(--space-4);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-2);
pointer-events: none;
}
.toast {
pointer-events: all;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-bg-0);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
font-size: var(--text-sm);
max-width: 400px;
animation: toast-in var(--duration-slow) var(--ease-out);
}
.toast-success { border-left: 3px solid var(--color-success); }
.toast-error { border-left: 3px solid var(--color-danger); }
.toast-warning { border-left: 3px solid var(--color-warning); }
.toast-info { border-left: 3px solid var(--color-info); }
@keyframes toast-in {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
/* ── Skeleton Loading ── */
.skeleton {
background: linear-gradient(90deg, var(--color-bg-2) 25%, var(--color-bg-3) 50%, var(--color-bg-2) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* ── Avatar ── */
.avatar {
width: 32px; height: 32px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--color-text-inverse);
background: var(--color-brand-400);
flex-shrink: 0;
}
.avatar-sm { width: 24px; height: 24px; font-size: var(--text-xs); }
.avatar-lg { width: 40px; height: 40px; font-size: var(--text-md); }
/* ── Empty State (CLAUDE.md "Empty State 4요소 패턴" 기반) ──
기본 사용:
아이콘
← ripple 2중 링
제목
설명
보조 힌트(선택)
레거시 별칭: .empty-state-icon / -title / -desc (이전 단순 버전 호환용) */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* ★ 상하 padding 확대 — 아이콘 ripple + 텍스트 모두에 breathing room */
padding: var(--space-10) var(--space-8);
text-align: center;
color: var(--color-text-tertiary);
background: var(--color-bg-0);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
min-height: 320px;
/* ★ gap 확대 — .empty-icon ripple 이 scale(1.5) 까지 확장(+22px)되므로
3→6 로 늘려 title 과 시각적 충돌 방지 (CLAUDE.md 애니메이션 공백 원칙) */
gap: var(--space-6);
}
/* 레거시 단순 버전 호환 (campaign-templates.html 등) */
.empty-state-icon { font-size: 3rem; margin-bottom: var(--space-4); }
.empty-state-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--color-text-secondary);
margin-bottom: var(--space-2);
}
.empty-state-desc { font-size: var(--text-sm); max-width: 360px; }
/* ── Divider ── */
.divider {
height: 1px;
background: var(--color-border);
margin: var(--space-4) 0;
}
/* ── Utility ── */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-muted { color: var(--color-text-secondary); }
.text-center { text-align: center; }
.font-mono { font-family: var(--font-mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ── Team Picker Modal (Command Palette Style) ── */
.tp-modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1000;
display: flex; align-items: flex-start; justify-content: center;
padding-top: 10vh;
opacity: 0;
transition: opacity 0.15s ease;
}
.tp-modal-overlay.open { opacity: 1; }
.tp-modal {
width: 90%;
max-width: 720px;
max-height: 75vh;
background: var(--color-bg-0);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
display: flex; flex-direction: column;
overflow: hidden;
transform: scale(0.96);
transition: transform 0.15s ease;
}
.tp-modal-overlay.open .tp-modal { transform: scale(1); }
/* Search */
.tp-search-wrap {
display: flex; align-items: center; gap: 10px;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
}
.tp-search-icon { font-size: 16px; opacity: 0.6; }
.tp-search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: var(--color-text-primary);
font-family: inherit;
}
.tp-search-input::placeholder { color: var(--color-text-tertiary); }
.tp-search-hint {
font-size: 10px;
padding: 2px 6px;
background: var(--color-bg-2);
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-text-tertiary);
font-family: monospace;
}
.tp-close-btn {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: transparent;
border: 1px solid var(--color-border);
border-radius: 6px;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.12s ease;
padding: 0;
flex-shrink: 0;
}
.tp-close-btn:hover {
background: var(--color-bg-2);
color: var(--color-text-primary);
border-color: var(--color-text-tertiary);
}
.tp-close-btn:active { transform: scale(0.95); }
/* Body */
.tp-body {
flex: 1;
overflow-y: auto;
padding: 12px 20px 20px;
}
.tp-section { margin-bottom: 20px; }
.tp-section:last-child { margin-bottom: 0; }
.tp-section-label {
font-size: 11px;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 8px 0 10px;
position: sticky;
top: 0;
background: var(--color-bg-0);
z-index: 1;
display: flex; align-items: center; gap: 8px;
}
.tp-section-label .tp-count {
font-size: 10px;
padding: 1px 6px;
background: var(--color-bg-2);
border-radius: 8px;
text-transform: none;
letter-spacing: 0;
color: var(--color-text-tertiary);
}
.tp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 640px) {
.tp-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Card */
.tp-card {
position: relative;
padding: 12px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg-1);
cursor: pointer;
transition: all 0.12s ease;
display: flex; flex-direction: column; gap: 8px;
min-height: 92px;
}
.tp-card:hover, .tp-card.focused {
border-color: var(--color-primary);
background: var(--color-primary-subtle);
transform: translateY(-1px);
}
.tp-card.active {
border-color: var(--color-primary);
background: var(--color-primary-subtle);
box-shadow: 0 0 0 1px var(--color-primary);
}
.tp-card.tp-card-all {
background: linear-gradient(135deg, rgba(var(--brand-rgb),0.08), rgba(217,119,6,0.05));
border-color: rgba(var(--brand-rgb),0.2);
}
.tp-card-header {
display: flex; align-items: center; justify-content: space-between;
gap: 6px;
}
.tp-avatar {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--color-primary);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14px;
flex-shrink: 0;
}
.tp-avatar-all {
background: linear-gradient(135deg, #8b5cf6, #d97706);
font-size: 16px;
}
.tp-card-name {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-card-meta {
font-size: 11px;
color: var(--color-text-tertiary);
display: flex; align-items: center; gap: 6px;
}
.tp-card-meta .tp-dot { opacity: 0.5; }
.tp-check {
position: absolute;
top: 8px; right: 8px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 11px;
display: flex; align-items: center; justify-content: center;
font-weight: bold;
}
.tp-badge {
font-size: 9px;
padding: 1px 6px;
border-radius: 4px;
font-weight: 600;
white-space: nowrap;
}
.tp-badge-own { background: rgba(var(--brand-rgb),0.15); color: #8b5cf6; }
.tp-badge-sub { background: rgba(217,119,6,0.12); color: #d97706; }
/* Empty */
.tp-empty {
text-align: center;
padding: 40px 20px;
color: var(--color-text-secondary);
font-size: 14px;
line-height: 1.6;
}
/* Footer */
.tp-footer {
display: flex; align-items: center; justify-content: center;
gap: 16px;
padding: 10px 20px;
border-top: 1px solid var(--color-border);
font-size: 11px;
color: var(--color-text-tertiary);
background: var(--color-bg-1);
}
.tp-footer kbd {
display: inline-block;
padding: 1px 5px;
background: var(--color-bg-0);
border: 1px solid var(--color-border);
border-radius: 3px;
font-family: monospace;
font-size: 10px;
margin-right: 4px;
}
[data-theme="dark"] .tp-modal {
background: rgba(20,22,40,0.98);
border-color: rgba(var(--brand-rgb),0.2);
}
[data-theme="dark"] .tp-section-label { background: rgba(20,22,40,0.98); }
[data-theme="dark"] .tp-card { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .tp-card:hover, [data-theme="dark"] .tp-card.focused {
background: rgba(var(--brand-rgb),0.08);
}
[data-theme="dark"] .tp-card.active {
background: rgba(var(--brand-rgb),0.12);
}
[data-theme="dark"] .tp-footer { background: rgba(255,255,255,0.02); }
/* ================================================================
SaaS Page Primitives — CLAUDE.md UX/UI 가이드라인 공용 클래스
(layout.css 의 .page-header / .page-title / .page-description /
.page-inner 와 함께 사용. 아래는 그 확장 클래스들)
================================================================ */
/* ── Page header 확장: 제목행 + 부제 + 우측 액션 ── */
.page-title-row {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.page-subtitle {
font-size: var(--text-sm);
color: var(--color-text-tertiary);
margin-top: var(--space-1);
line-height: var(--leading-normal);
}
.page-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin-left: auto;
}
/* ── LIVE pill: 실시간 페이지 전용 ── */
.page-live-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05));
border: 1px solid rgba(239,68,68,0.3);
border-radius: var(--radius-lg);
font-size: 11px;
font-weight: var(--font-bold);
color: var(--color-danger);
letter-spacing: 0.05em;
}
.page-live-pill::before {
content: '';
width: 8px; height: 8px;
border-radius: var(--radius-full);
background: var(--color-danger);
box-shadow: 0 0 8px var(--color-danger);
animation: page-pulse-live 1.4s ease-in-out infinite;
}
@keyframes page-pulse-live {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.5; }
}
/* ── 연결 상태 pill (WebSocket/SSE 등) ── */
.page-conn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 6px 12px;
border-radius: var(--radius-xl);
background: var(--color-bg-0);
border: 1px solid var(--color-border);
font-size: var(--text-xs);
color: var(--color-text-secondary);
}
/* ── KPI Strip: 4열 그리드 (모바일 2열) ── */
.kpi-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.kpi-card {
position: relative;
padding: var(--space-4);
background: var(--color-bg-0);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--duration-normal) var(--ease-default),
border-color var(--duration-normal) var(--ease-default);
}
.kpi-card:hover {
transform: translateY(-1px);
border-color: var(--color-border-hover);
}
.kpi-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--kpi-accent-color, var(--color-primary)), transparent);
opacity: 0.7;
}
.kpi-card.kpi-hot { --kpi-accent-color: var(--color-danger); }
.kpi-card.kpi-warn { --kpi-accent-color: var(--color-warning); }
.kpi-card.kpi-cool { --kpi-accent-color: var(--color-success); }
.kpi-card.kpi-accent { --kpi-accent-color: var(--color-primary); }
.kpi-label {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.kpi-value {
font-size: 36px;
font-weight: var(--font-bold);
color: var(--color-text-primary);
line-height: 1.1;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.kpi-unit {
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-tertiary);
}
.kpi-hint {
font-size: 11px;
color: var(--color-text-tertiary);
margin-top: 6px;
}
.kpi-hint .up { color: var(--color-success); }
.kpi-hint .down { color: var(--color-danger); }
/* "hot" 카테고리 KPI 값에 호흡 glow (위험/활성 지표 강조용) */
.kpi-card.kpi-hot .kpi-value {
animation: kpi-breath 3s ease-in-out infinite;
}
@keyframes kpi-breath {
0%, 100% { text-shadow: 0 0 0 rgba(220,38,38,0); }
50% { text-shadow: 0 0 16px rgba(220,38,38,0.35); }
}
/* ── Section 제목 + 카운트 배지 ── */
.section-title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-md);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
margin: var(--space-5) 0 var(--space-3);
}
.section-title .count-badge {
font-size: 11px;
font-weight: var(--font-semibold);
padding: 2px var(--space-2);
border-radius: 10px;
background: var(--color-primary-subtle);
color: var(--color-primary);
}
/* ── Empty State 신규 4요소 (icon/title/desc/hint) ──
컨테이너 .empty-state 는 위쪽 섹션에 이미 정의됨.
아래는 ripple 아이콘 + 계층적 타이포 4요소 클래스만 추가. */
.empty-icon {
width: 88px; height: 88px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, rgba(var(--brand-rgb-deep),0.10), rgba(0,188,212,0.10));
display: flex;
align-items: center;
justify-content: center;
font-size: 38px;
position: relative;
/* ★ ripple scale(1.5) 까지 확장(+22px)되므로 주변 여백 넉넉히 확보
— title 과 겹침 완전 방지 (CLAUDE.md 애니메이션 공백 원칙) */
margin: var(--space-3) 0;
}
.empty-icon::before,
.empty-icon::after {
content: '';
position: absolute; inset: -4px;
border-radius: var(--radius-full);
border: 2px solid rgba(var(--brand-rgb-deep),0.2);
animation: empty-ripple 2.4s ease-out infinite;
}
.empty-icon::after { animation-delay: 1.2s; }
@keyframes empty-ripple {
0% { transform: scale(1); opacity: 0.8; }
/* scale 1.6 → 1.5 로 살짝 완화 — 텍스트와의 여유 공간 추가 확보 */
100% { transform: scale(1.5); opacity: 0; }
}
.empty-title {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--color-text-primary);
/* ★ title 과 icon ripple 간 호흡 공간 보장 (gap + margin 누적) */
margin-top: var(--space-2);
}
.empty-desc {
font-size: var(--text-sm);
max-width: 420px;
line-height: var(--leading-relaxed);
color: var(--color-text-tertiary);
}
.empty-hint {
font-size: 11px;
color: var(--color-text-tertiary);
margin-top: var(--space-3);
}
/* ── Empty State modifier: grid 내부에서 전체 폭 점유 ── */
.empty-state.empty-state-grid-span { grid-column: 1 / -1; }
/* ── Empty State 내부 CTA 영역 ── */
.empty-state .empty-cta { margin-top: var(--space-3); }
.empty-state .empty-cta-link {
color: var(--color-primary);
text-decoration: underline;
font-weight: var(--font-semibold);
}
.empty-state .empty-strong { color: var(--color-text-primary); }
/* ── Empty State modifier: 리스트 섹션 내부 삽입용 ── */
.empty-state.empty-state-list { margin: var(--space-4); }
/* ── Empty State modifier: 테이블 셀 내부 삽입용 (border/배경 제거, 축소) ── */
.empty-state.empty-state-inline-table {
min-height: auto;
border: none;
background: transparent;
padding: var(--space-8) var(--space-4);
gap: var(--space-4);
}
/* ── Empty State modifier: 카드 내부 등 좁은 영역용 ── */
.empty-state.empty-state-compact {
min-height: auto;
padding: var(--space-6) var(--space-4);
/* ★ compact 도 gap 살짝 보장 — 작은 영역에서도 아이콘 ripple 이 text 에 안 닿도록 */
gap: var(--space-4);
}
/* ── Empty Icon modifier: 컴팩트 사이즈 (60px) ── */
.empty-icon.empty-icon-compact {
width: 60px;
height: 60px;
font-size: 26px;
margin: var(--space-2) 0;
}
/* ── 반응형: KPI 스트립 2열로 ── */
@media (max-width: 768px) {
.kpi-strip { grid-template-columns: repeat(2, 1fr); }
.page-actions { margin-left: 0; width: 100%; }
}
/* ── 접근성: reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
.page-live-pill::before,
.kpi-card.kpi-hot .kpi-value,
.empty-icon::before,
.empty-icon::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ── Dark Mode: SaaS Page Primitives ── */
[data-theme="dark"] .page-conn {
background: rgba(15,17,30,0.4);
border-color: rgba(var(--brand-rgb),0.15);
}
[data-theme="dark"] .kpi-card {
background: linear-gradient(135deg, rgba(var(--brand-rgb),0.06) 0%, rgba(15,23,42,0.4) 100%);
border-color: rgba(var(--brand-rgb),0.12);
}
[data-theme="dark"] .kpi-card:hover {
border-color: rgba(var(--brand-rgb),0.3);
box-shadow: 0 0 20px rgba(var(--brand-rgb),0.15);
}
[data-theme="dark"] .empty-state {
background: rgba(var(--brand-rgb),0.02);
border-color: rgba(var(--brand-rgb),0.15);
}
[data-theme="dark"] .empty-icon {
background: linear-gradient(135deg, rgba(var(--brand-rgb),0.15), rgba(34,211,238,0.10));
}
[data-theme="dark"] .empty-icon::before,
[data-theme="dark"] .empty-icon::after {
border-color: rgba(var(--brand-rgb),0.3);
}
[data-theme="dark"] .section-title .count-badge {
background: rgba(var(--brand-rgb),0.18);
color: var(--color-brand-300);
}
/* ════════════════════════════════════════════════════════════════════
★ Premium Motion Library — 2026 SaaS UX (공용)
모든 페이지에서 재사용. reduced-motion 자동 비활성.
──────────────────────────────────────────────────────────────────── */
/* ── 공용 키프레임 ── */
@keyframes fx-pulse-live {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.5; }
}
@keyframes fx-ripple {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.6); opacity: 0; }
}
@keyframes fx-breath {
0%, 100% { text-shadow: 0 0 0 rgba(220,38,38,0); }
50% { text-shadow: 0 0 16px rgba(220,38,38,0.35); }
}
@keyframes fx-edge-flow {
0% { background-position: 0 0; }
100% { background-position: 0 300%; }
}
@keyframes fx-slide-bar {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes fx-card-enter {
0% { opacity: 0; transform: translateY(12px) scale(0.97); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fx-pulse-ring {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.35); opacity: 0; }
}
@keyframes fx-shimmer-x {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes fx-fade-in-up {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ── 엔트리 애니메이션: 카드/섹션이 처음 로드될 때 ── */
.fx-card-enter { animation: fx-card-enter 0.35s cubic-bezier(.17,.67,.5,1.15) both; }
.fx-fade-in-up { animation: fx-fade-in-up 0.4s ease-out both; }
/* stagger delay — 리스트 항목에 자연스러운 순차 등장 */
.fx-stagger > *:nth-child(1) { animation-delay: 0ms; }
.fx-stagger > *:nth-child(2) { animation-delay: 60ms; }
.fx-stagger > *:nth-child(3) { animation-delay: 120ms; }
.fx-stagger > *:nth-child(4) { animation-delay: 180ms; }
.fx-stagger > *:nth-child(5) { animation-delay: 240ms; }
.fx-stagger > *:nth-child(6) { animation-delay: 300ms; }
/* ── KPI Card 모션 향상 ── */
.kpi-card { animation: fx-card-enter 0.35s cubic-bezier(.17,.67,.5,1.15) both; }
/* hot(위험/활성) KPI 는 호흡 glow */
.kpi-card.kpi-hot .kpi-value { animation: fx-breath 3s ease-in-out infinite; }
/* ── Live pill pulse (기존 .page-live-pill 키프레임과 병행) ── */
.fx-pulse-live { animation: fx-pulse-live 1.4s ease-in-out infinite; }
/* ── Ripple 이중 링 (범용) ── */
.fx-ripple {
position: relative;
}
.fx-ripple::before,
.fx-ripple::after {
content: '';
position: absolute; inset: -4px;
border-radius: inherit;
border: 2px solid rgba(var(--brand-rgb-deep),0.2);
animation: fx-ripple 2.4s ease-out infinite;
pointer-events: none;
}
.fx-ripple::after { animation-delay: 1.2s; }
/* ── Edge Flow: 카드 좌측 엣지 수직 그라데이션 바 ── */
.fx-edge-flow {
position: relative;
}
.fx-edge-flow::before {
content: '';
position: absolute; top: 0; left: 0; width: 4px; height: 100%;
background: linear-gradient(180deg, #ef4444, #f59e0b, #7c4dff, #00bcd4);
background-size: 100% 300%;
animation: fx-edge-flow 6s linear infinite;
opacity: 0.85;
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
/* ── Slide-bar: 진행 표시 / 상단 액센트 바 ── */
.fx-slide-bar {
height: 3px;
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
background-size: 200% 100%;
animation: fx-slide-bar 1.6s linear infinite;
}
/* ── Shimmer placeholder (스켈레톤 로딩) ── */
.fx-skeleton {
background: linear-gradient(90deg,
var(--color-bg-1) 0%,
var(--color-bg-2) 50%,
var(--color-bg-1) 100%);
background-size: 200% 100%;
animation: fx-shimmer-x 1.6s linear infinite;
border-radius: var(--radius-md);
}
/* ── 연결 상태 dot ── */
.dot-conn { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot-conn.on {
background: var(--color-success);
box-shadow: 0 0 8px var(--color-success);
animation: fx-pulse-live 2s ease-in-out infinite;
}
.dot-conn.off { background: var(--color-text-tertiary); }
.dot-conn.err {
background: var(--color-danger);
box-shadow: 0 0 8px var(--color-danger);
}
/* ── 공용 리얼타임 뱃지: LIVE 이외 텍스트에도 사용 ── */
.badge-live {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05));
border: 1px solid rgba(239,68,68,0.3);
border-radius: var(--radius-lg);
font-size: 11px;
font-weight: var(--font-bold);
color: var(--color-danger);
letter-spacing: 0.05em;
}
.badge-live::before {
content: '';
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-danger);
box-shadow: 0 0 8px var(--color-danger);
animation: fx-pulse-live 1.4s ease-in-out infinite;
}
/* ════════════════════════════════════════════════════════════════════
★ Card Hover/Interactivity — 통일된 리프트 효과
──────────────────────────────────────────────────────────────────── */
.card-lift {
transition:
transform var(--duration-normal) var(--ease-default),
box-shadow var(--duration-normal) var(--ease-default),
border-color var(--duration-normal) var(--ease-default);
}
.card-lift:hover {
transform: translateY(-2px);
border-color: var(--color-border-hover);
box-shadow: var(--shadow-md);
}
/* ════════════════════════════════════════════════════════════════════
★ Dark Mode Neon — 카드/모달 에 네온 틴트 (공용)
──────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .tenant-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .gw-card,
[data-theme="dark"] .agent-card {
background: linear-gradient(135deg, rgba(var(--brand-rgb),0.04) 0%, rgba(15,23,42,0.4) 100%);
border-color: rgba(var(--brand-rgb),0.12);
}
[data-theme="dark"] .card-lift:hover,
[data-theme="dark"] .card:hover,
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .tenant-card:hover,
[data-theme="dark"] .plan-card:hover,
[data-theme="dark"] .gw-card:hover,
[data-theme="dark"] .agent-card:hover {
border-color: rgba(var(--brand-rgb),0.3);
box-shadow: 0 0 20px rgba(var(--brand-rgb),0.15);
}
/* ════════════════════════════════════════════════════════════════════
★ Legacy stat-card 업그레이드 — 상단 2px 그라데이션 액센트 바
stat-card 쓰는 구형 페이지도 자동으로 KPI 카드 느낌으로 격상됨
──────────────────────────────────────────────────────────────────── */
.stat-card {
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--stat-accent, var(--color-primary)), transparent);
opacity: 0.7;
pointer-events: none;
}
.stat-card.accent-hot { --stat-accent: var(--color-danger); }
.stat-card.accent-warn { --stat-accent: var(--color-warning); }
.stat-card.accent-cool { --stat-accent: var(--color-success); }
.stat-card.accent-brand { --stat-accent: var(--color-primary); }
.stat-card.accent-info { --stat-accent: var(--color-info); }
/* ════════════════════════════════════════════════════════════════════
★ Reduced Motion — 전체 fx-* 애니메이션 비활성화
──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.fx-card-enter,
.fx-fade-in-up,
.fx-pulse-live,
.fx-ripple::before,
.fx-ripple::after,
.fx-edge-flow::before,
.fx-slide-bar,
.fx-skeleton,
.dot-conn.on,
.badge-live::before,
.kpi-card.kpi-hot .kpi-value {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.card-lift:hover { transform: none; }
}
/* ============================================================
* 🎬 Demo Mode (2026-05-10)
* 데모 워터마크 배너 + 만료 모달 + 만료 카운트다운.
* ============================================================ */
/* ★ 2026-05-10 (revised) — code review 후 완전 재설계.
*
* 진짜 원인 (운영 사용자 보고 + 코드 리뷰):
* 1) 기존 .demo-banner 가 position: sticky; top:0
* 2) layout.css 의 .topbar 도 position: sticky; top:0
* → 둘 다 viewport 최상단을 노려 scroll 시 텍스트 겹침
* 3) workspace-mode 페이지 (Flow 빌더 등) 의 .page-inner 가
* `min-height: calc(100vh - --topbar-height)` — banner 높이
* 미반영 → 컨텐츠 overflow → scroll 발생 → 1)+2) 충돌 트리거
*
* 해결: --demo-banner-h CSS 변수 단일 진실원.
* · :root 기본 0px (데모 아닐 때 모든 calc 영향 0)
* · body.app-demo-mode 시 44px (모바일 38px)
* · banner: position: fixed + height: var(--demo-banner-h)
* · body padding-top: var(--demo-banner-h) — 페이지 내용 전체 push
* · .topbar (layout.css): top: var(--demo-banner-h) — sticky 자리 보정
* · .page-content / workspace-mode page-inner (layout.css):
* calc 에 var(--demo-banner-h) 도 빼서 viewport 정확히 맞춤
*
* 덕분에 모든 페이지 (대시보드 / Flow 빌더 / 통화 모니터링 / etc) 의
* sticky / 100vh height 계산이 일관성 있게 banner 영역을 빼고 동작.
*/
.demo-banner {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-5);
height: var(--demo-banner-h, 44px);
background: #1a1233; /* 솔리드 — alpha 누수 방지 */
background-image: linear-gradient(90deg,
rgba(139, 92, 246, 0.28),
rgba(99, 102, 241, 0.20));
color: var(--color-text-primary);
border-bottom: 1px solid rgba(139, 92, 246, 0.45);
font-size: var(--text-sm);
flex-wrap: nowrap;
overflow: hidden;
border-left: 4px solid var(--color-brand-500);
transition: background 0.3s, border-color 0.3s;
white-space: nowrap;
}
.demo-banner > * { min-width: 0; }
/* ★ 단일 진실원 — banner 높이를 모든 layout calc 에 일관 노출.
:root 기본 0 (데모 아닐 때 영향 0). body.app-demo-mode 만 44/38px.
layout.css 의 .topbar / .page-content / .page-inner 가 이 변수를 빼서
sticky 자리와 viewport calc 를 자동 보정. */
:root { --demo-banner-h: 0px; }
body.app-demo-mode {
--demo-banner-h: 44px;
}
@media (max-width: 640px) {
body.app-demo-mode { --demo-banner-h: 38px; }
}
/* ★ 2026-05-12 — body padding-top 제거 (이전 버그 — 폰에서 app-shell grid
+ position:fixed 사이드바가 body padding 을 인식하지 못해 좌측 가장자리에
사이드바 띠가 남거나 본문이 viewport 밖으로 밀려나는 문제 발생).
.topbar 는 top:var(--demo-banner-h) / .page-content 는 min-height calc 에
이미 banner-h 를 차감 중 → body padding 없이도 layout 정상.
.sidebar 는 position:fixed; top:0 이라 banner 와 겹치므로 별도 보정
(layout.css 의 .sidebar 룰 참조). */
.demo-banner-icon { font-size: 1.1rem; flex-shrink: 0; }
.demo-banner-text {
flex: 1;
min-width: 0;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.demo-banner-text strong {
font-weight: var(--font-bold);
color: var(--color-brand-300, #c4b5fd);
}
.demo-banner-time {
font-variant-numeric: tabular-nums;
font-weight: var(--font-semibold);
padding: 4px 10px;
background: rgba(139, 92, 246, 0.18);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: var(--radius-md);
font-size: var(--text-xs);
flex-shrink: 0;
}
.demo-banner-cta {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: var(--color-brand-500);
color: #ffffff;
border-radius: var(--radius-md);
font-weight: var(--font-semibold);
font-size: var(--text-xs);
text-decoration: none;
white-space: nowrap;
transition: background 0.18s, transform 0.12s;
flex-shrink: 0;
}
.demo-banner-cta:hover { background: var(--color-brand-600, #6d28d9); }
.demo-banner-cta:active { transform: translateY(1px); }
.demo-banner.demo-banner-warn {
background: linear-gradient(90deg,
rgba(245, 158, 11, 0.18),
rgba(217, 119, 6, 0.12));
border-bottom-color: rgba(245, 158, 11, 0.4);
border-left-color: var(--color-warning, #f59e0b);
}
.demo-banner.demo-banner-warn .demo-banner-time {
background: rgba(245, 158, 11, 0.22);
border-color: rgba(245, 158, 11, 0.5);
color: #fbbf24;
}
/* 만료 모달 (CLAUDE.md modal padding 표준 — 32px 수평 / 24px 수직) */
.demo-expired-modal-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: demoExpiredFadeIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.demo-expired-modal {
position: relative;
width: 92%;
max-width: 480px;
background: var(--color-bg-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-8) var(--space-6);
box-shadow: var(--shadow-xl, 0 24px 48px rgba(0, 0, 0, 0.4));
text-align: center;
overflow: hidden;
}
.demo-expired-accent {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-brand-500), var(--color-info, #06b6d4));
}
.demo-expired-icon { font-size: 3.6rem; line-height: 1; margin-bottom: var(--space-4); }
.demo-expired-title {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-text-primary);
margin: 0 0 var(--space-3);
}
.demo-expired-desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: 1.55;
margin: 0 0 var(--space-5);
}
.demo-expired-actions {
display: flex; gap: var(--space-3);
justify-content: center; flex-wrap: wrap;
}
.demo-expired-actions .btn,
.demo-expired-actions a.btn { min-width: 160px; }
.demo-expired-close {
position: absolute;
top: 12px; right: 14px;
background: transparent;
border: 0;
color: var(--color-text-tertiary);
font-size: var(--text-xs);
cursor: pointer;
padding: 4px 8px;
}
.demo-expired-close:hover { color: var(--color-text-primary); }
@keyframes demoExpiredFadeIn {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.demo-expired-modal-overlay,
.demo-expired-modal { animation: none; }
}
@media (max-width: 640px) {
/* height 는 위에서 var(--demo-banner-h) — 모바일에서 38px 자동 적용 */
.demo-banner { padding: 0 var(--space-4); font-size: var(--text-xs); }
.demo-expired-modal {
padding: var(--space-5) var(--space-5) var(--space-5);
}
.demo-expired-actions .btn,
.demo-expired-actions a.btn { min-width: 100%; }
}
/* ============================================================
Custom Dropdown — native