/* ============================================================
QA Manager — 전자재료사업부 품질경영팀 포털
Design System · global_style.css
============================================================
목차
1. 폰트 로드
2. 리셋
3. 디자인 토큰 (CSS 변수)
3-A. 포털 크롬 변수 — 항상 라이트 고정 (--portal-*)
3-B. 앱 콘텐츠 변수 — 라이트 기본 (:root)
3-C. 앱 콘텐츠 변수 — 다크 오버라이드 (html[data-theme="dark"]) ← 미구현, 필요 시 추가
3-D. 구형 변수명 aliases (각 앱 하위 호환)
4. 기반 타이포그래피
5. 포털 레이아웃 (topbar · 탭 내비게이션 · frame 영역 · 로더)
6. 공통 컴포넌트
6-A. 카드
6-B. 버튼
6-C. 폼 인풋 / 셀렉트 / 레이블
6-D. 데이터 테이블
6-E. 뱃지
6-F. 드롭존
6-G. 프로그레스 바
6-H. 얼럿 / 상태 알림
6-I. 구분선 / 노트 박스
7. 스크롤바
8. 애니메이션 키프레임
9. 유틸리티
============================================================ */
/* ─────────────────────────────────────────────────────────────
1. 폰트 로드
── 각 HTML 파일 에서 +
방식으로 로드합니다. (@import는 CSS 파싱을 블로킹하여 제거됨)
───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
2. 리셋
───────────────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ─────────────────────────────────────────────────────────────
3-A. 포털 사이드바 변수 — 항상 라이트 고정 (html[data-theme="dark"]에서 재정의 안 함)
───────────────────────────────────────────────────────────── */
:root {
--portal-bg: #fdf5f6;
--portal-surface: #ffffff;
--portal-surface-2: #f5eaec;
--portal-border: #e8d0d4;
--portal-text: #1e1a1b;
--portal-text-muted: #6b7280;
--portal-accent: #be0039;
--portal-accent-hover: #d4004a;
--portal-accent-glow: rgba(190, 0, 57, 0.10);
--portal-success: #10b981;
--portal-danger: #ef4444;
--portal-warning: #f59e0b;
}
/* ─────────────────────────────────────────────────────────────
3-B. 앱 콘텐츠 변수 — 라이트 기본값 (다크 오버라이드는 3-C에서 추가)
───────────────────────────────────────────────────────────── */
:root {
/* 배경 계층 */
--bg: #fdf5f6;
--surface: #ffffff;
--surface-2: #f5eaec;
--bg-deep: #ede0e3;
/* 테두리 */
--border: #e8d0d4;
--border-hover: #d4b0b7;
/* 텍스트 */
--text: #1e1a1b;
--text-muted: #6b7280;
--text-faint: #9ca3af;
/* 강조색 */
--accent: #be0039;
--accent-hover: #d4004a;
--accent-glow: rgba(190, 0, 57, 0.08);
/* 시맨틱 컬러 */
--success: #10b981;
--success-bg: rgba(16, 185, 129, 0.08);
--danger: #ef4444;
--danger-bg: rgba(239, 68, 68, 0.08);
--warning: #f59e0b;
--warning-bg: rgba(245, 158, 11, 0.08);
--info: #3b82f6;
--info-bg: rgba(59, 130, 246, 0.08);
/* IVL 특수 색상 (OLED 앱) */
--color-ref1: #4a9eff;
--color-ref2: #a855f7;
--color-smp1: #ef4444;
--color-smp2: #f59e0b;
--color-excellent: #7c3aed;
/* 그림자 */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
/* 반경 */
--radius: 12px;
--radius-sm: 8px;
--radius-xs: 4px;
/* 폰트 */
--font-body: 'Inter', 'Noto Sans KR', sans-serif;
--font-mono: 'JetBrains Mono', Consolas, monospace;
}
/* ─────────────────────────────────────────────────────────────
3-C. 구형 변수명 Aliases — 각 앱 하위 호환
───────────────────────────────────────────────────────────── */
:root {
/* OLED (ivl_lt) 앱 변수명 */
--card: var(--surface);
--bdr: var(--border);
--input: var(--bg);
--tx: var(--text);
--tx2: var(--text-muted);
--acc: var(--accent);
--red: var(--danger);
--hdr: var(--surface-2);
--row1: var(--surface);
--row2: var(--surface-2);
--row-hl: #fde8ec;
/* HPLC/DSC 앱 변수명 */
--ink: var(--text);
--ink2: var(--text-muted);
--line: var(--border);
--panel: var(--surface);
--white: var(--bg);
--green: var(--success);
--amber: var(--warning);
--mono: var(--font-mono);
--body: var(--font-body);
/* LGD 앱 변수명 */
--bg-secondary: var(--surface);
--primary: var(--accent);
--primary-light: var(--accent-hover);
--primary-bg: var(--accent-glow);
--error: var(--danger);
--error-bg: var(--danger-bg);
--text-secondary: var(--text-muted);
--text-tertiary: var(--text-faint);
}
/* ─────────────────────────────────────────────────────────────
4. 기반 타이포그래피
───────────────────────────────────────────────────────────── */
html, body {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mono, code, pre, kbd {
font-family: var(--font-mono);
}
/* ─────────────────────────────────────────────────────────────
5. 포털 레이아웃
───────────────────────────────────────────────────────────── */
/* 5-A. 사이드바 ────────────────────────────────────────────── */
.sidebar {
width: 260px;
background: var(--portal-surface);
border-right: 1px solid var(--portal-border);
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
display: flex;
flex-direction: column;
user-select: none;
color: var(--portal-text);
}
/* 5-B. 사이드바 헤더 (브랜드) ──────────────────────────────── */
.sidebar-header {
padding: 20px 16px 16px;
border-bottom: 1px solid var(--portal-border);
flex-shrink: 0;
}
.brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.brand-logo {
height: 24px;
width: auto;
object-fit: contain;
max-width: 100%;
}
.brand-name {
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: var(--portal-text);
word-break: keep-all;
}
.brand-sub {
font-size: 12px;
color: var(--portal-text-muted);
}
.brand-email {
font-size: 11px;
color: var(--portal-accent);
text-decoration: none;
}
.brand-email:hover {
text-decoration: underline;
}
/* 5-C. 탭 내비게이션 (세로) ─────────────────────────────────── */
.tab-nav {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
overflow-y: auto;
padding: 10px 8px;
scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 9px;
padding: 9px 12px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--portal-text-muted);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
width: 100%;
text-align: left;
line-height: 1.4;
}
.tab-btn:hover {
background: var(--portal-surface-2);
color: var(--portal-text);
}
.tab-btn.active {
background: var(--portal-accent-glow);
color: var(--portal-accent-hover);
border-color: rgba(190, 0, 57, 0.35);
}
.tab-badge {
font-size: 9px;
font-weight: 700;
padding: 1px 5px;
border-radius: 4px;
background: var(--portal-accent);
color: #fff;
line-height: 1.4;
letter-spacing: 0.02em;
}
/* 5-D. 사이드바 하단 (테마 + 상태) ──────────────────────────── */
.sidebar-footer {
padding: 12px 16px;
border-top: 1px solid var(--portal-border);
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.theme-btn {
width: 30px;
height: 30px;
border-radius: 6px;
border: 1px solid var(--portal-border);
background: var(--portal-surface-2);
color: var(--portal-text-muted);
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s, color 0.15s;
flex-shrink: 0;
line-height: 1;
}
.theme-btn:hover {
border-color: var(--portal-accent);
color: var(--portal-accent-hover);
}
/* 5-E. 상태 표시기 ───────────────────────────────────────── */
.status {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--portal-text-muted);
flex-shrink: 0;
}
.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--portal-success);
animation: qs-blink 3s ease-in-out infinite;
}
/* 5-F. frame 콘텐츠 영역 ─────────────────────────────────── */
.frame-area {
position: fixed;
top: 0;
left: 260px;
right: 0;
bottom: 0;
}
.frame-wrap {
display: none;
width: 100%;
height: 100%;
position: relative;
}
.frame-wrap.active { display: block; }
.frame-wrap iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* 5-G. 로더 (iframe 로딩 오버레이) ──────────────────────── */
.loader {
position: absolute;
inset: 0;
background: var(--portal-bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
z-index: 10;
transition: opacity 0.4s;
}
.loader.hidden {
opacity: 0;
pointer-events: none;
}
.spinner {
width: 36px;
height: 36px;
border: 3px solid var(--portal-border);
border-top-color: var(--portal-accent);
border-radius: 50%;
animation: qs-spin 0.7s linear infinite;
}
.loader-text {
font-size: 13px;
color: var(--portal-text-muted);
}
/* ─────────────────────────────────────────────────────────────
6-A. 카드
───────────────────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 24px;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
position: relative;
}
.card-sm {
padding: 14px 16px;
border-radius: var(--radius-sm);
}
.card-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.card-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 0.6rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--border);
}
/* ─────────────────────────────────────────────────────────────
6-B. 버튼
───────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px 18px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s,
box-shadow 0.15s, transform 0.12s;
text-decoration: none;
white-space: nowrap;
line-height: 1.4;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* Primary — 강조색 배경 */
.btn-primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-hover);
border-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(190, 0, 57, 0.35);
}
/* Secondary — 테두리 + 서피스 배경 */
.btn-secondary {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
background: var(--surface-2);
border-color: var(--border-hover);
}
/* Ghost — 투명 배경, 강조색 텍스트 */
.btn-ghost {
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
.btn-ghost:hover:not(:disabled) {
background: var(--accent-glow);
}
/* Danger — 삭제/오류 계열 */
.btn-danger {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow: 0 4px 14px var(--danger-bg);
}
/* Success — 완료/다운로드 계열 */
.btn-success {
background: var(--success);
color: #0d1117;
border-color: var(--success);
}
.btn-success:hover:not(:disabled) {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 4px 14px var(--success-bg);
}
/* 크기 변형 */
.btn-sm {
padding: 4px 12px;
font-size: 12px;
border-radius: var(--radius-xs);
}
.btn-lg {
padding: 12px 28px;
font-size: 15px;
}
.btn-block {
width: 100%;
}
/* 인라인 스피너 (버튼 내부) */
.btn .btn-spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(255,255,255,0.25);
border-top-color: #fff;
border-radius: 50%;
animation: qs-spin 0.55s linear infinite;
}
/* ─────────────────────────────────────────────────────────────
6-C. 폼 인풋 / 셀렉트 / 레이블
───────────────────────────────────────────────────────────── */
.form-field {
margin-bottom: 14px;
}
.form-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.form-label .req { color: var(--danger); font-size: 10px; margin-left: 2px; }
.form-label .opt { color: var(--text-faint); font-size: 10px; margin-left: 2px; }
.form-input,
.form-select {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 9px 12px;
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
appearance: none;
-webkit-appearance: none;
}
.form-input:focus,
.form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-input::placeholder { color: var(--text-faint); }
/* 숫자 인풋 스핀 숨김 */
.form-input[type="number"]::-webkit-inner-spin-button,
.form-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.form-input[type="number"] { -moz-appearance: textfield; }
/* 셀렉트 화살표 커스텀 */
.form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237b84a8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
.form-select option {
background: var(--surface);
color: var(--text);
}
/* 모노스페이스 인풋 (데이터 입력용) */
.form-input-mono {
font-family: var(--font-mono);
font-size: 12px;
}
/* 인라인 인풋 (좁은 공간) */
.form-input-inline {
width: auto;
padding: 3px 8px;
font-size: 12px;
border-radius: var(--radius-xs);
}
/* ─────────────────────────────────────────────────────────────
6-D. 데이터 테이블
───────────────────────────────────────────────────────────── */
.data-table-wrap {
overflow-x: auto;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
white-space: nowrap;
font-family: var(--font-mono);
}
.data-table th,
.data-table td {
border: 1px solid var(--border);
padding: 5px 9px;
text-align: center;
vertical-align: middle;
}
/* 헤더 행 */
.data-table th {
background: var(--surface-2);
color: var(--accent);
font-weight: 600;
position: sticky;
top: 0;
z-index: 1;
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.03em;
}
/* 행 헤더 (첫 번째 열) */
.data-table .row-header,
.data-table td:first-child {
text-align: left;
font-weight: 600;
color: var(--text);
background: var(--surface);
}
/* 교번 행 */
.data-table .row-odd td { background: var(--surface); }
.data-table .row-even td { background: var(--surface-2); }
/* 강조 행 */
.data-table .row-highlight td {
background: var(--row-hl);
font-weight: 700;
}
/* 셀 색상 코딩 (IVL 분석 결과) — 브랜드 테마와 독립적으로 고정값 사용 */
.data-table td.cell-ok { color: #1d6fd6; }
.data-table td.cell-ng { color: #ef4444; }
.data-table td.cell-excellent { color: var(--color-excellent); }
.data-table td.cell-success { color: var(--success); }
.data-table td.cell-warning { color: var(--warning); }
/* 작은 테이블 (패딩 축소) */
.data-table.table-sm th,
.data-table.table-sm td {
padding: 3px 6px;
font-size: 0.72rem;
}
/* ─────────────────────────────────────────────────────────────
6-E. 뱃지
───────────────────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 100px;
font-size: 11px;
font-weight: 600;
line-height: 1.6;
border: 1px solid transparent;
white-space: nowrap;
}
.badge-primary {
background: var(--accent-glow);
color: var(--accent-hover);
border-color: rgba(190, 0, 57, 0.30);
}
.badge-success {
background: var(--success-bg);
color: var(--success);
border-color: rgba(52, 211, 153, 0.30);
}
.badge-danger {
background: var(--danger-bg);
color: var(--danger);
border-color: rgba(248, 113, 113, 0.30);
}
.badge-warning {
background: var(--warning-bg);
color: var(--warning);
border-color: rgba(251, 191, 36, 0.30);
}
.badge-info {
background: var(--info-bg);
color: var(--info);
border-color: rgba(96, 165, 250, 0.30);
}
.badge-neutral {
background: var(--surface-2);
color: var(--text-muted);
border-color: var(--border);
}
/* 상태 점 뱃지 */
.badge .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* ─────────────────────────────────────────────────────────────
6-F. 드롭존
───────────────────────────────────────────────────────────── */
.dropzone {
border: 2px dashed var(--border);
border-radius: var(--radius-sm);
padding: 32px 20px;
text-align: center;
cursor: pointer;
background: var(--surface);
transition: border-color 0.2s, background 0.2s;
position: relative;
}
.dropzone:hover,
.dropzone.active,
.dropzone.over {
border-color: var(--accent);
background: var(--accent-glow);
}
.dropzone input[type="file"] { display: none; }
.dropzone-icon {
font-size: 2.2rem;
display: block;
margin-bottom: 10px;
opacity: 0.5;
}
.dropzone-title {
font-weight: 700;
font-size: 14px;
color: var(--text);
margin-bottom: 4px;
}
.dropzone-hint {
font-size: 11px;
color: var(--text-muted);
line-height: 1.5;
}
/* ─────────────────────────────────────────────────────────────
6-G. 프로그레스 바
───────────────────────────────────────────────────────────── */
.progress-track {
height: 4px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
background: var(--accent);
border-radius: 2px;
transition: width 0.3s ease;
}
.progress-fill.success { background: var(--success); }
.progress-fill.danger { background: var(--danger); }
/* 메타 텍스트 (퍼센트, 레이블) */
.progress-meta {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-bottom: 6px;
}
/* ─────────────────────────────────────────────────────────────
6-H. 얼럿 / 상태 알림
───────────────────────────────────────────────────────────── */
.alert {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: var(--radius-sm);
font-size: 13px;
line-height: 1.5;
border: 1px solid transparent;
margin-bottom: 12px;
}
.alert-success {
background: var(--success-bg);
border-color: rgba(52, 211, 153, 0.30);
color: var(--success);
}
.alert-danger {
background: var(--danger-bg);
border-color: rgba(248, 113, 113, 0.30);
color: var(--danger);
}
.alert-warning {
background: var(--warning-bg);
border-color: rgba(251, 191, 36, 0.30);
color: var(--warning);
}
.alert-info {
background: var(--info-bg);
border-color: rgba(96, 165, 250, 0.30);
color: var(--info);
}
/* 로그 박스 (HPLC 스타일) */
.log-box {
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--surface);
font-family: var(--font-mono);
}
.log-header {
padding: 8px 14px;
border-bottom: 1px solid var(--border);
font-size: 10px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
background: var(--surface-2);
}
.log-led {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--warning);
flex-shrink: 0;
}
.log-led.running { background: var(--accent); animation: qs-blink 0.8s infinite; }
.log-led.ok { background: var(--success); animation: none; }
.log-led.error { background: var(--danger); animation: none; }
.log-content {
padding: 10px 14px;
height: 140px;
overflow-y: auto;
font-size: 11px;
line-height: 1.8;
color: var(--text-muted);
}
.log-line-ok { color: var(--success); }
.log-line-err { color: var(--danger); }
.log-line-info { color: var(--accent); }
/* ─────────────────────────────────────────────────────────────
6-I. 구분선 / 노트 박스
───────────────────────────────────────────────────────────── */
.section-divider {
height: 1px;
background: var(--border);
margin: 24px 0;
border: none;
}
.note-box {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono);
background: var(--accent-glow);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
padding: 10px 12px;
line-height: 1.6;
}
.note-box strong { color: var(--text); }
/* 매칭 실패 / 경고 메시지 (OLED 앱 스타일) */
.unmatched-warning {
padding: 8px 10px;
background: var(--warning-bg);
border: 1px solid rgba(245, 158, 11, 0.4);
border-radius: var(--radius-xs);
font-size: 0.75rem;
color: var(--warning);
margin-top: 8px;
}
.unmatched-error {
padding: 8px 10px;
background: var(--danger-bg);
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: var(--radius-xs);
font-size: 0.75rem;
color: var(--danger);
margin-top: 8px;
}
/* ─────────────────────────────────────────────────────────────
7. 스크롤바 — 전역 + 개별 요소
───────────────────────────────────────────────────────────── */
/* 전역 (WebKit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
/* 스크롤바 숨김 유틸리티 */
.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
/* ─────────────────────────────────────────────────────────────
8. 애니메이션 키프레임
───────────────────────────────────────────────────────────── */
@keyframes qs-spin {
to { transform: rotate(360deg); }
}
@keyframes qs-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@keyframes qs-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@keyframes qs-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes qs-slide-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes qs-slide-in {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
/* 편의 애니메이션 클래스 */
.anim-fade-in { animation: qs-fade-in 0.25s ease; }
.anim-slide-up { animation: qs-slide-up 0.35s ease; }
/* ─────────────────────────────────────────────────────────────
9. 유틸리티
───────────────────────────────────────────────────────────── */
/* 텍스트 색상 */
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-mono { font-family: var(--font-mono); }
/* 텍스트 크기 */
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 16px; }
/* 폰트 굵기 */
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
/* 레이아웃 플렉스 */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: 6px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 20px; }
/* 간격 */
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
/* 기타 */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}