/* =============================================================================
충남 고교학점제 온마당 · 디자인 시스템 v1.0
components.css — 핵심 컴포넌트 라이브러리
전제: design-tokens.css가 먼저 로드되어 있어야 함.
포함:
1. 헤더 (.kk-header)
2. 버튼 (.kk-btn)
3. 카드 (.kk-card)
4. 입력 폼 (.kk-field, .kk-input ...)
5. 표 (.kk-table)
+ 배지 시스템 (.kk-badge) — ★권장/◆핵심/온라인
+ 빈 상태 (.kk-empty) — 캐릭터 활용
+ 관리자 표면 (.surface-admin) — 187개교 데이터 화면
============================================================================= */
/* -----------------------------------------------------------------------------
레이아웃 헬퍼
----------------------------------------------------------------------------- */
.kk-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.kk-container--wide { max-width: var(--container-wide); }
.kk-content { max-width: var(--content-max); margin-inline: auto; }
/* =============================================================================
1. 헤더 — .kk-header
우산 사이트 공통 상단바. 진블루 배경 + 꾸꾸클럽 마스코트 + 내비.
============================================================================= */
.kk-header {
background: var(--color-brand);
color: var(--color-text-on-brand);
position: sticky; top: 0; z-index: var(--z-sticky);
box-shadow: var(--shadow-md);
}
.kk-header__inner {
max-width: var(--container-wide);
margin-inline: auto;
padding: var(--space-3) var(--space-4);
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-4);
}
.kk-header__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.kk-header__mascot {
width: 38px; height: 38px; flex-shrink: 0;
background: var(--color-surface);
border-radius: var(--radius-md);
padding: 3px;
color: var(--kkuk-ink); /* 마스코트 윤곽선 색 */
display: grid; place-items: center;
}
.kk-header__mascot svg { width: 100%; height: 100%; }
.kk-header__title { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.2; }
.kk-header__subtitle { font-size: var(--text-xs); opacity: 0.85; line-height: 1.2; margin-top: 2px; }
.kk-header__nav { display: flex; align-items: center; gap: var(--space-4); }
.kk-header__nav a {
color: var(--color-text-on-brand); text-decoration: none;
font-size: var(--text-sm); font-weight: var(--weight-medium);
opacity: 0.88; transition: opacity var(--duration-fast) var(--ease-out);
}
.kk-header__nav a:hover { opacity: 1; }
.kk-header__nav a[aria-current="page"] { opacity: 1; border-bottom: 2px solid var(--kkuk-sky-200); padding-bottom: 2px; }
@media (max-width: 640px) {
.kk-header__title { font-size: var(--text-body); }
.kk-header__nav { gap: var(--space-3); }
}
/* =============================================================================
2. 버튼 — .kk-btn
변형: primary(기본) / secondary(외곽선) / ghost / accent(그린)
크기: sm / (기본) / lg
============================================================================= */
.kk-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
line-height: 1; white-space: nowrap;
padding: 0.625rem 1.125rem;
border: 1px solid transparent; border-radius: var(--radius-sm);
cursor: pointer; text-decoration: none;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.kk-btn:active { transform: translateY(1px); }
.kk-btn--primary { background: var(--color-brand); color: var(--color-text-on-brand); }
.kk-btn--primary:hover { background: var(--color-brand-hover); }
.kk-btn--primary:active { background: var(--color-brand-active); }
.kk-btn--secondary { background: transparent; color: var(--color-brand); border-color: var(--color-brand); }
.kk-btn--secondary:hover { background: var(--kkuk-blue-50); }
.kk-btn--ghost { background: transparent; color: var(--color-text-brand); }
.kk-btn--ghost:hover { background: var(--kkuk-blue-50); }
.kk-btn--accent { background: var(--kkuk-green-400); color: #fff; }
.kk-btn--accent:hover { background: var(--kkuk-green-500); }
.kk-btn--sm { padding: 0.4rem 0.75rem; font-size: var(--text-xs); }
.kk-btn--lg { padding: 0.8rem 1.5rem; font-size: var(--text-body); }
.kk-btn:disabled, .kk-btn[aria-disabled="true"] {
opacity: 0.45; cursor: not-allowed; transform: none;
}
/* =============================================================================
3. 카드 — .kk-card
기본 카드 + 과목 카드(.kk-card--course) 변형
============================================================================= */
.kk-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.kk-card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.kk-card__eyebrow {
font-size: var(--text-xs); font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide); color: var(--color-text-brand);
margin-bottom: var(--space-2);
}
.kk-card__title { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--color-heading); margin: 0 0 var(--space-2); }
.kk-card__body { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.kk-card__footer { margin-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
/* 과목 카드: 헤더에 캐릭터 아이콘 자리 + 단위/계열 메타 */
.kk-card--course .kk-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.kk-card--course .kk-card__icon { width: 34px; height: 24px; color: var(--kkuk-ink); flex-shrink: 0; }
.kk-card--course .kk-card__icon svg { width: 100%; height: 100%; }
/* =============================================================================
4. 입력 폼 — .kk-field / .kk-input / .kk-select / .kk-label
============================================================================= */
.kk-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.kk-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.kk-label__hint { font-weight: var(--weight-regular); color: var(--color-text-subtle); margin-left: var(--space-2); }
.kk-input, .kk-select, .kk-textarea {
width: 100%; font-family: var(--font-sans); font-size: var(--text-body);
color: var(--color-text); background: var(--color-surface);
border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
padding: 0.625rem 0.75rem;
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.kk-input::placeholder, .kk-textarea::placeholder { color: var(--color-text-subtle); }
.kk-input:focus, .kk-select:focus, .kk-textarea:focus {
outline: none; border-color: var(--color-brand); box-shadow: var(--shadow-focus);
}
.kk-textarea { min-height: 6rem; resize: vertical; line-height: var(--leading-snug); }
/* 검색바: 입력 + 버튼 한 줄 */
.kk-searchbar { display: flex; gap: var(--space-2); align-items: center; }
.kk-searchbar .kk-input { flex: 1; }
/* 인라인 에러/도움말 */
.kk-field__error { font-size: var(--text-xs); color: var(--kkuk-danger); }
.kk-field--invalid .kk-input { border-color: var(--kkuk-danger); }
/* =============================================================================
5. 표 — .kk-table
187개교 데이터 등 행정 표. 등폭 숫자, 호버 강조, sticky 헤더 지원.
============================================================================= */
.kk-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.kk-table {
width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface);
}
.kk-table thead th {
text-align: left; font-weight: var(--weight-semibold); font-size: var(--text-xs);
color: var(--color-text-muted); background: var(--kkuk-sky-50);
padding: var(--space-3); border-bottom: 1px solid var(--color-border);
position: sticky; top: 0; z-index: 1;
}
.kk-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
.kk-table tbody tr:last-child td { border-bottom: none; }
.kk-table tbody tr:hover { background: var(--kkuk-sky-50); }
.kk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.kk-table .num--emph { font-weight: var(--weight-semibold); color: var(--color-brand); }
/* =============================================================================
배지 시스템 — .kk-badge
꾸꾸클럽 의미 매핑:
★ 권장(recommend) → 그린(네잎클로버=토꾸미 부적, '행운/추천')
◆ 핵심(core) → 진블루(브랜드 핵심)
온라인 개설(online) → 라이트블루
============================================================================= */
.kk-badge {
display: inline-flex; align-items: center; gap: 0.25em;
font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1;
padding: 0.25rem 0.5rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.kk-badge--recommend { background: var(--kkuk-green-50); color: var(--kkuk-green-500); }
.kk-badge--core { background: var(--kkuk-blue-50); color: var(--kkuk-blue-600); }
.kk-badge--online { background: var(--kkuk-sky-100); color: var(--kkuk-blue-600); }
.kk-badge--neutral { background: var(--kkuk-gray-100); color: var(--kkuk-gray-700); }
.kk-badge--unit { background: transparent; color: var(--color-text-subtle); border: 1px solid var(--color-border); }
/* =============================================================================
빈 상태 / 안내 — .kk-empty
꾸꾸클럽 캐릭터를 활용한 빈 화면·결과 없음·로딩 등.
============================================================================= */
.kk-empty {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: var(--space-3); padding: var(--space-8) var(--space-4); color: var(--color-text-muted);
}
.kk-empty__char { width: 120px; height: auto; color: var(--kkuk-ink); }
.kk-empty__char svg { width: 100%; height: 100%; }
.kk-empty__title { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--color-text); margin: 0; }
.kk-empty__body { font-size: var(--text-sm); margin: 0; max-width: 28rem; }
/* 로딩 시 캐릭터가 살짝 흔들리는 모션 (꾸물꾸물) */
@keyframes kk-wiggle {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
.kk-empty--loading .kk-empty__char { animation: kk-wiggle 1.6s var(--ease-in-out) infinite; transform-origin: bottom center; }
/* =============================================================================
관리자 표면 — .surface-admin
187개교 데이터·강사인력풀 등 행정 화면에서 컨테이너에 적용.
학생 화면과 분기하되 같은 색조 유지(C-1 안에서 차분한 변형).
============================================================================= */
.surface-admin {
--color-bg: var(--color-admin-bg);
--color-surface: var(--color-admin-surface);
--color-border: var(--color-admin-border);
background: var(--color-admin-bg);
}
.surface-admin .kk-header { background: var(--color-admin-header); }
.surface-admin .kk-table thead th { background: #EEF1F8; }
/* =============================================================================
섹션 제목 패턴 — .kk-section-title (캐릭터 PDF의 eyebrow + 제목 구조 재현)
============================================================================= */
.kk-section-title { margin-bottom: var(--space-5); }
.kk-section-title__eyebrow {
display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-medium);
color: var(--color-text-on-brand); background: var(--color-brand);
padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); margin-bottom: var(--space-2);
}
.kk-section-title__heading { font-size: var(--text-h1); font-weight: var(--weight-bold); color: var(--color-heading); margin: 0; line-height: var(--leading-tight); }
.kk-section-title__sub { font-size: var(--text-sm); color: var(--color-text-subtle); margin-top: var(--space-1); letter-spacing: var(--tracking-wide); }