@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap'); /* ═══════════════════════════════════════════════════════ CSS 변수 — 디자인 토큰 ═══════════════════════════════════════════════════════ */ :root { /* 중립 표면 — Efferd 스타일 zinc 톤 (admin/settings 콘솔과 동일). 페이지 바탕(--bg)은 작업면(--card)보다 확실히 어둡다. 둘이 붙어 있으면 패널이 "얹혀 있는 면"으로 읽히지 않고 전부 한 장의 종이가 된다 (사용자 지적 2026-08-12: "보이지도 않는 선으로 만들어 놔서 눈에 안 보인다"). */ --bg: #f1f1f4; --card: #ffffff; --surface-var: #f4f4f5; --paper: #ffffff; --paper-ink: #18181b; /* 구분선 3단 — DESIGN.md §8. 한 굵기로만 나누면 "여기가 목록인지, 위쪽 설명인지"를 구분할 수 없다. soft=목록 안의 행 사이, border=형제 섹션 사이·패널 테두리, strong=목록·표가 시작하는 자리(데이터의 머리). 세 값 모두 실제로 **보이는** 명도여야 한다 — 흰 배경 위 #f1f1f3 같은 선은 디자인상 존재할 뿐 눈에는 없는 선이다. */ --border-soft: #e6e6ea; --border: #d7d7de; --border-strong: #b9b9c2; --border-mid: #b3c2d6; --border-focus: #40679c; /* 브랜드 액센트 — 스틸 블루 (1차 액션·링크) */ --primary: #40679c; --primary-dark: #2d4f7d; --primary-soft: #eaeff5; --primary-mid: #b3c2d6; --primary-action: #40679c; --primary-action-hover: #2d4f7d; --primary-grad: var(--primary); /* 플랫 디자인 — 그라데이션 제거 */ /* 텍스트 — zinc 그레이스케일 */ --text: #18181b; --text-sub: #52525b; --muted: #71717a; --success: #5db882; --success-soft: #e7f4ec; --success-text: #237a49; --success-action: #237a49; --success-action-hover: #1b653b; --success-border: #a7f3d0; --warning: #F59E0B; --warning-soft: #FFFBEB; --warning-text: #92400e; --warning-border: #fde68a; --error: #c23836; --error-soft: #f8e7e6; --error-text: #b42318; --error-action: #b42318; --error-action-hover: #981b16; --error-border: #fecaca; --info-text: #3730a3; --info-border: #c7d2fe; --orange: #fa7c0b; --header: #ffffff; /* 헤더는 라이트 (다크 헤더 폐지) */ --sidebar-bg: #f4f4f5; --sidebar-w: 220px; /* 반경 — DESIGN.md §8. 이 세 값만 쓴다. 12~24px 같은 큰 반경을 컨테이너에 일괄 적용하지 않는다(그게 "바이브 코딩" 인상의 절반이다). */ --radius: 6px; /* 패널·카드·독립 객체 미리보기·드롭존 */ --radius-sm: 5px; /* 버튼·입력·작은 컨트롤 */ --radius-overlay: 8px; /* 모달·메뉴 — 이 이상 키우지 않는다 */ /* 그림자 — DESIGN.md §8. 실제로 다른 내용 위에 뜨는 것(모달·드롭다운·드래그 미리보기)만 이 한 단계를 쓴다. 본문 레이아웃·버튼·선택 상태·내비게이션· 고정 액션바·통계·독립 객체 카드에는 box-shadow 를 쓰지 않는다. 레거시 --shadow/--shadow-md/--shadow-lg 는 none 으로 중화해 두었다 — 남아 있는 참조가 조용히 그림자를 되살리지 않게 하기 위한 것이며, 새 코드는 이 토큰들을 쓰지 않는다. */ --elevation-overlay: 0 4px 16px rgba(24,24,27,.12); --shadow: none; --shadow-md: none; --shadow-lg: none; --transition: .14s ease; --hover: #eeeef1; /* 중립 hover 배경 (흰 표면 위에서 읽히는 한 톤) */ --scrollbar-thumb: #d4d4d8; --scrollbar-thumb-hover: #b4b4bb; --control-track: #d9d9de; --overlay: rgba(255,255,255,.82); /* 처리 중 오버레이 */ color-scheme: light; } /* ═══════════════════════════════════════════════════════ 다크 모드 — 토큰만 뒤집으면 토큰 기반 컴포넌트가 따라온다 (html[data-theme="dark"] 를 에 설정 → 깜빡임 방지 위해 head 에서 일찍 적용) ═══════════════════════════════════════════════════════ */ html[data-theme="dark"] { --bg: #161619; /* 다크에서 바탕↔작업면 명도 차가 13밖에 안 돼, 패널 채움이 없으면 테두리 한 줄만 남고 "여기부터 저기까지가 한 덩어리"가 안 읽혔다(사용자 지적 2026-08-13). 20 으로 벌린다 — 라이트(242→255)와 같은 체감 간격이다. */ --card: #2a2a2f; /* 작업면보다 한 톤 낮은 자리(표 머리·트랙·비활성 배지). 라이트에서 흰 면보다 어두운 톤인 것과 방향을 맞춘다 — 작업면보다 밝게 두면 그 위의 --border-soft 구분선이 묻힌다. */ --surface-var: #212126; --border-soft: #33333a; --border: #42424b; --border-strong: #5b5b66; --border-mid: #4a4a55; --border-focus: #6b91c9; --primary: #6b91c9; --primary-dark: #84a5d6; --primary-soft: #29344a; --primary-mid: #3a4a63; --primary-action-hover: #4b6f9c; --text: #ededef; --text-sub: #b4b4bb; --muted: #92929c; --success: #5db882; --success-soft: #1d3528; --success-text: #8fd6ab; --success-action-hover: #2f8558; --success-border: #2c4a38; --warning: #f59e0b; --warning-soft: #38300f; --warning-text: #e8c06a; --warning-border: #5a4a1d; --error: #e2706e; --error-soft: #3a2422; --error-text: #f0a3a1; --error-action-hover: #c2413b; --error-border: #5a2e2c; --info-text: #9db8e8; --info-border: #33445f; --header: #1f1f23; --sidebar-bg: #1f1f23; --hover: #35353c; /* 밝아진 --card 위에서도 한 톤 차가 남게 함께 올린다 */ --scrollbar-thumb: #45454d; --scrollbar-thumb-hover: #55555f; --control-track: #4a4a55; --overlay: rgba(20,20,23,.82); --elevation-overlay: 0 4px 16px rgba(0,0,0,.5); color-scheme: dark; } /* 다크: 토큰 기반 공통 컴포넌트 보정 */ html[data-theme="dark"] .badge-muted { background: var(--surface-var); color: var(--muted); } /* 다크: 표 테두리·행 hover (하드코딩 라이트 보정) */ html[data-theme="dark"] td { border-bottom-color: var(--border-soft); } html[data-theme="dark"] tr:hover td { background: var(--surface-var); } /* 인쇄물은 사용자의 화면 테마와 무관하게 흰 종이 기준으로 출력한다. */ @media print { html[data-theme="dark"] { --bg: #f1f1f4; --card: #ffffff; --surface-var: #f4f4f5; --border-soft: #e6e6ea; --border: #d7d7de; --border-strong: #b9b9c2; --border-mid: #b3c2d6; --border-focus: #40679c; --primary: #40679c; --primary-dark: #2d4f7d; --primary-soft: #eaeff5; --primary-mid: #b3c2d6; --primary-action-hover: #2d4f7d; --text: #18181b; --text-sub: #52525b; --muted: #71717a; --success: #5db882; --success-soft: #e7f4ec; --success-text: #237a49; --success-action-hover: #1b653b; --success-border: #a7f3d0; --warning: #f59e0b; --warning-soft: #fffbeb; --warning-text: #92400e; --warning-border: #fde68a; --error: #c23836; --error-soft: #f8e7e6; --error-text: #b42318; --error-action-hover: #981b16; --error-border: #fecaca; --info-text: #3730a3; --info-border: #c7d2fe; --header: #ffffff; --sidebar-bg: #f4f4f5; --hover: #eeeef1; --overlay: rgba(255,255,255,.82); --scrollbar-thumb: #d4d4d8; --scrollbar-thumb-hover: #b4b4bb; --control-track: #d9d9de; color-scheme: light; } } /* 테마 선택 세그먼트 컨트롤 (설정 페이지) */ .theme-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); } .theme-seg button { padding: 8px 16px; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text-sub); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background var(--transition), color var(--transition); } .theme-seg button:last-child { border-right: 0; } .theme-seg button:hover:not([aria-pressed="true"]) { background: var(--hover); } .theme-seg button[aria-pressed="true"] { background: var(--primary-action); color: #fff; } /* 반 팔레트 8가지 */ .palette-0 { --p-bg: #40679c; --p-soft: #eaeff5; } .palette-1 { --p-bg: #5db882; --p-soft: #e7f4ec; } .palette-2 { --p-bg: #fa7c0b; --p-soft: #fff3e0; } .palette-3 { --p-bg: #9334ea; --p-soft: #f3e8ff; } .palette-4 { --p-bg: #0d9488; --p-soft: #ccfbf1; } .palette-5 { --p-bg: #e11d6f; --p-soft: #fce7f3; } .palette-6 { --p-bg: #ca8a04; --p-soft: #fef9c3; } .palette-7 { --p-bg: #475569; --p-soft: #e2e8f0; } /* ═══════════════════════════════════════════════════════ 리셋 & 기본 ═══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Malgun Gothic', -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 키보드 포커스 가시화 (마우스 클릭에는 안 뜸) */ button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(64,103,156,.4); outline-offset: 2px; } /* 커스텀 스크롤바 */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; } img { display: block; max-width: 100%; } /* ═══════════════════════════════════════════════════════ 레이아웃 — 인증 페이지 (login) ═══════════════════════════════════════════════════════ */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; } .auth-box { width: 100%; max-width: 420px; } /* auth-card: card용 박스 (login.html) */ .auth-card { width: 100%; max-width: 440px; background: var(--card); border-radius: var(--radius); padding: 40px 36px; border: 1px solid var(--border); } .auth-logo { text-align: center; margin-bottom: 32px; } .auth-logo h1 { font-size: 32px; font-weight: 700; letter-spacing: -.5px; } .auth-logo h1 span { color: var(--primary); } .auth-logo p { color: var(--muted); font-size: 15px; margin-top: 6px; } /* ═══════════════════════════════════════════════════════ 레이아웃 — 글로벌 헤더 (라이트 · 얇은 보더) ═══════════════════════════════════════════════════════ */ .global-header { background: var(--card); border-bottom: 1px solid var(--border); height: 56px; display: flex; align-items: center; padding: 0 28px; gap: 14px; position: sticky; top: 0; z-index: 100; } .global-header .logo { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.3px; } .global-header .logo span { color: var(--primary); } .header-gap { flex: 1; } /* ─── 반 목록 페이지 — 흰색 헤더 ─────────────────────────── */ .classes-header { height: 64px; background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 28px; gap: 8px; position: sticky; top: 0; z-index: 100; flex-shrink: 0; } .classes-header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .classes-header-logo-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--primary-action); display: flex; align-items: center; justify-content: center; font-size: 21px; color: #fff; } .classes-header-logo-text { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.3px; line-height: 1.2; } .classes-header-logo-sub { font-size: 12px; color: var(--muted); line-height: 1.2; } .classes-header-gap { flex: 1; } /* ── 전역 앱 내비게이션 (DESIGN.md §2·§9) ──────────────────────────────────── auth.js 가 `.classes-header` 를 쓰는 모든 앱 화면에 같은 항목을 심는다. 둥근 버튼 묶음으로 만들지 않는다 — 현재 위치는 굵기와 얇은 액센트 선으로만 말하고, 채워진 버튼은 그 화면의 주 액션 하나에만 쓴다(§9). */ .gf-nav { display: flex; align-items: center; gap: 2px; } .gf-nav-link { background: none; border: 0; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-sub); padding: 8px 10px; cursor: pointer; position: relative; white-space: nowrap; border-radius: var(--radius-sm); text-decoration: none; } .gf-nav-link:hover { color: var(--text); background: var(--hover); } .gf-nav-link.is-current { color: var(--text); font-weight: 700; } .gf-nav-link.is-current::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--primary); } /* 사용량은 본문 패널이 아니라 크롬의 한 줄이다(§9) — 늘 신경 쓰는 수치라 찾아 들어가야만 보이면 안 되고, 본문에 패널로 두면 홈이 기능 카탈로그가 된다. */ .gf-nav-usage { display: flex; align-items: center; gap: 8px; margin-left: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-sub); white-space: nowrap; transition: background var(--transition), border-color var(--transition); } .gf-nav-usage:hover { background: var(--hover); border-color: var(--border-mid); } .gf-nav-usage-bar { width: 64px; height: 5px; background: var(--hover); overflow: hidden; flex: none; } .gf-nav-usage-bar i { display: block; height: 100%; background: var(--primary); } .gf-nav-usage.is-warn .gf-nav-usage-bar i { background: var(--warning); } .gf-nav-usage.is-crit .gf-nav-usage-bar i { background: var(--error); } .gf-nav-usage-val { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; } @media (max-width: 920px) { .gf-nav-usage { display: none; } } /* 좁아지면 현재 위치와 '더보기'만 남긴다 — 나머지는 더보기 안에서 간다. */ @media (max-width: 860px) { .gf-nav > .gf-nav-link:not(.is-current) { display: none; } } .classes-header-btn { display: flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); font-size: 14px; font-weight: 500; color: var(--text-sub); cursor: pointer; transition: background var(--transition); white-space: nowrap; } .classes-header-btn:hover { background: var(--bg); } .classes-header-user-pill { display: flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border: 1px solid var(--border); border-radius: 99px; background: var(--card); cursor: pointer; transition: background var(--transition); } .classes-header-user-pill:hover { background: var(--bg); } /* 헤더 아바타 드롭다운 (설정·로그아웃) — auth.js 가 pill 을 감싸며 hydrate */ .gf-user-menu-wrap { position: relative; display: flex; } .gf-user-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-overlay); box-shadow: var(--elevation-overlay); padding: 5px; z-index: 1000; } .gf-user-menu.hidden { display: none; } .gf-user-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 11px; border: none; background: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 550; color: var(--text); cursor: pointer; font-family: inherit; transition: background var(--transition); } .gf-user-menu button:hover { background: var(--bg); } .gf-user-menu .gf-user-menu-danger { color: var(--error-text); } .classes-header-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--text); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--bg); font-weight: 700; flex-shrink: 0; } .classes-header-user-name { font-size: 13px; font-weight: 600; color: var(--text); } /* ═══════════════════════════════════════════════════════ 레이아웃 — 반 목록 페이지 ═══════════════════════════════════════════════════════ */ .classes-page { /* 초광폭에서 표가 한없이 늘어나면 열 사이가 벌어져 한 행을 눈으로 잇기 어렵다. 그렇다고 좁게 가두면 §9 가 요구한 "여러 반을 한 화면에서 비교하는 밀도"를 잃는다. 1440px 는 8열 업무 표가 줄바꿈 없이 들어가면서 행이 읽히는 상한이다. */ padding: 28px 32px; max-width: 1440px; min-height: calc(100vh - 64px); } .classes-page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; } .classes-page-header h2 { font-size: 32px; font-weight: 700; letter-spacing: -.5px; } .classes-page-header p { font-size: 17px; color: var(--muted); margin-top: 6px; } .class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } /* 반 카드 래퍼 */ .class-card-wrapper { position: relative; } /* 반 카드 — Google Classroom 스타일 */ .class-card { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; overflow: hidden; cursor: pointer; text-align: left; display: flex; flex-direction: column; min-height: 160px; transition: background var(--transition), border-color var(--transition); } .class-card:hover { background: var(--hover); border-color: var(--border-mid); } .class-card-band { height: 56px; background: var(--p-bg, var(--primary)); display: flex; align-items: center; padding: 0 18px; position: relative; flex-shrink: 0; } .class-card-band-name { font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -.3px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 36px; } .class-card-band-emoji { position: absolute; right: 46px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-size: 15px; } .class-card-body { padding: 14px 18px 16px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; } .class-card-subject { font-size: 13px; color: var(--text-sub); font-weight: 500; } .class-card-meta-row { display: flex; align-items: center; justify-content: space-between; } .class-card-count { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text); font-weight: 600; } .class-card-last { font-size: 12px; color: var(--muted); } /* 반 카드 ⋯ 메뉴 버튼 */ .class-card-menu-btn { position: absolute; right: 12px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.3); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 21px; font-weight: 700; line-height: 1; padding: 0; z-index: 2; } .class-card-menu-btn:hover { background: rgba(255,255,255,.5); } /* ⋯ 드롭다운 */ .class-card-dropdown { position: absolute; right: 8px; top: 48px; background: var(--card); border-radius: var(--radius-overlay); box-shadow: var(--elevation-overlay); border: 1px solid var(--border); padding: 6px; z-index: 40; min-width: 140px; } .class-card-dropdown.hidden { display: none; } .class-card-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; background: none; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: var(--radius-sm); text-align: left; } .class-card-dropdown-item:hover { background: var(--bg); } .class-card-dropdown-item.danger { color: var(--error-text); } .class-card-dropdown-item.danger:hover { background: var(--error-soft); } /* ── ⋯ 액션 메뉴 (전 페이지 공용) ──────────────────────────────────────────── 자주 쓰지 않는 보조 동작을 버튼 하나 뒤로 접는다. 화면 폭을 통짜 버튼으로 채우는 대신 제목 줄 오른쪽에 둔다. 여는 것은 api.js 의 gfToggleMenu. */ .gf-menu { position: relative; display: inline-block; flex: none; } .gf-menu-btn { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text-sub); font-size: 17px; line-height: 1; font-weight: 700; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .gf-menu-btn:hover { border-color: var(--primary); color: var(--primary); } .gf-menu-list { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-overlay); box-shadow: var(--elevation-overlay); padding: 6px; z-index: 40; min-width: 210px; } .gf-menu-list.hidden { display: none; } /* 하단 고정 액션바 안의 ⋯ — 아래로 열면 화면 밖이라 위로 편다 */ .gf-menu-list.up { top: auto; bottom: calc(100% + 6px); } .gf-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; color: var(--text); font-size: 14px; font-weight: 500; text-align: left; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; } .gf-menu-item:hover:not(:disabled) { background: var(--bg); } .gf-menu-item:disabled { opacity: .45; cursor: default; } .gf-menu-item.danger { color: var(--error-text); } .gf-menu-item.danger:hover:not(:disabled) { background: var(--error-soft); } /* ── 고정 액션바 (DESIGN.md §1) ────────────────────────────────────────────── 길이가 데이터에 따라 변하는 목록 아래에 결정 버튼을 두면, 목록이 길어졌을 때 사용자는 그 버튼이 거기 있다는 사실 자체를 알 수 없다. 목록에 대한 결정 (승인·확정·생성·제출)은 이 바에 담아 스크롤과 무관하게 항상 보이게 한다. 스크롤 컨테이너(패널·모달 본문·문서) 안의 마지막 요소로 두면 내용이 길 때만 화면 하단에 붙고, 짧으면 원래 자리에 그대로 놓인다. 왼쪽=대상 요약, 오른쪽= 주 액션 1개. 보조 동작은 .gf-menu(⋯), 취소는 .btn-ghost 로 주 액션 왼쪽에. */ .gf-actionbar { position: sticky; /* 바닥에 딱 붙이지 않고 한 뼘 띄운다 — 아래로 살짝 보이는 목록 자락이 "이건 목록 위에 얹힌 별개의 바"라고 말해 준다. 모바일 하단 안전영역이 그보다 크면 그쪽을 따른다. */ bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; /* 불투명 표면 — 목록 글자가 비치면 "떠 있는 바"가 아니라 반투명 겹침으로 읽힌다. **사방 테두리 + 그림자는 액션바만의 명시적 예외**다(사용자 확정 2026-08-11). 위쪽 보더 한 줄만으로는 본문의 여느 구분선과 구별되지 않아 "이게 액션바인지"를 알 수 없었다. 테두리가 바의 경계를 긋고, 위로 드리운 그림자가 목록에서 띄운다. 블러는 여전히 금지다. */ padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); box-shadow: 0 -4px 16px rgba(24,24,27,.12); } html[data-theme="dark"] .gf-actionbar { box-shadow: 0 -4px 16px rgba(0,0,0,.5); } .gf-actionbar-sum { flex: 1; min-width: 110px; font-size: 14px; line-height: 1.45; color: var(--text-sub); } .gf-actionbar-sum b { color: var(--text); font-weight: 700; } .gf-actionbar > .btn { flex: none; } /* 모바일: 요약을 한 줄 위로 올리고 버튼이 가로를 채운다 */ @media (max-width: 560px) { .gf-actionbar-sum { flex-basis: 100%; } .gf-actionbar > .btn-primary { flex: 1; justify-content: center; } } /* ── 빈 상태 (전 페이지 공용) ──────────────────────────────────────────────── "없습니다"만 말하고 끝내지 않는다 — 무엇이 없고, 그래서 무엇을 하면 되는지까지. 별도 카드와 장식용 아이콘 타일은 만들지 않는다(§9). 현재 작업 영역 안에 제목·설명·다음 행동만 직접 놓는다. 한 문장에 시선을 모으는 자리라 가운데 정렬은 허용된다(§7). */ .gf-empty { text-align: center; padding: 44px 20px; color: var(--muted); } .gf-empty-title { font-size: 17px; font-weight: 650; color: var(--text-sub); margin-bottom: 6px; } .gf-empty-desc { font-size: 14px; line-height: 1.7; } .gf-empty-action { margin-top: 16px; } /* 새 반 만들기 빈 카드 */ .class-card-new { background: transparent; border: 1px dashed var(--border); border-radius: var(--radius); min-height: 160px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-weight: 500; font-size: 14px; transition: all .15s; width: 100%; } .class-card-new:hover { border-color: var(--primary); color: var(--primary); background: rgba(64,103,156,.04); } .class-card-new-icon { width: 40px; height: 40px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 300; line-height: 1; } /* 빈 상태 (레거시 마크업용 — 신규는 emptyStateHtml/.gf-empty 를 쓴다) */ .empty-state { text-align: center; padding: 56px 20px; grid-column: 1 / -1; } .empty-state-icon { display: none; } /* 장식용 이모지 타일 — §7·§10 에 따라 표시하지 않는다 */ .empty-state h3 { font-size: 21px; font-weight: 600; color: var(--text-sub); margin-bottom: 8px; } .empty-state p { font-size: 15px; color: var(--muted); margin-bottom: 24px; } /* ═══════════════════════════════════════════════════════ 레이아웃 — Workspace (사이드바 + 메인) ═══════════════════════════════════════════════════════ */ .workspace { display: flex; height: 100vh; overflow: hidden; } /* 사이드바 */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto; } .sidebar-back-btn { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 8px; border-radius: 6px; text-align: left; transition: background var(--transition), color var(--transition); margin-bottom: 12px; } .sidebar-back-btn:hover { background: var(--hover); color: var(--text); } /* 반 헤더 카드 — 흰 카드 + 얇은 보더 (클래스 색은 아이콘에만) */ .sidebar-class-card { border-radius: var(--radius-sm); padding: 11px 12px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); } .sidebar-class-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--p-bg, var(--primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; flex-shrink: 0; } .sidebar-class-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-class-sub { font-size: 12px; color: var(--text-sub); margin-top: 1px; } /* 탭 내비게이션 버튼 */ .sidebar-nav { display: flex; flex-direction: column; gap: 4px; } .sidebar-tab-btn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border: none; background: transparent; border-radius: var(--radius-sm); font-size: 17px; font-weight: 500; color: var(--text-sub); cursor: pointer; text-align: left; position: relative; transition: background var(--transition), color var(--transition), padding var(--transition); } .sidebar-tab-btn:hover { background: var(--hover); } /* 활성 탭은 "배경 한 톤 + 반색 좌측 바"다(§9). 흰 카드로 띄우면 사이드바 안에 또 하나의 표면이 생기고, 선택 상태가 부양으로 읽힌다. */ .sidebar-tab-btn.active { background: var(--hover); color: var(--text); font-weight: 600; } .sidebar-tab-btn.active::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 3px; height: 54%; border-radius: 99px; background: var(--p-bg, var(--primary)); } .sidebar-spacer { flex: 1; min-height: 16px; } .sidebar-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; } .sidebar-action-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: none; background: transparent; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-sub); cursor: pointer; text-align: left; transition: background var(--transition), color var(--transition); } .sidebar-action-btn:hover { background: var(--hover); } /* 사용자 위젯 */ .sidebar-user { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition); margin-top: 4px; } .sidebar-user:hover { background: var(--hover); } .sidebar-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-user-name { font-size: 13px; font-weight: 600; } .sidebar-user-email { font-size: 12px; color: var(--muted); } /* 메인 영역 */ .main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* 브레드크럼 */ .breadcrumb { height: 42px; flex-shrink: 0; background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 28px; gap: 6px; font-size: 14px; } .breadcrumb-sep { color: var(--muted); } .breadcrumb-link { color: var(--text-sub); cursor: pointer; } .breadcrumb-link:hover { color: var(--text); } /* §7 예외: 구분점(·)은 글자가 아니라 도형이라 8단 스케일을 따르지 않는다. */ .breadcrumb-dot { font-size: 8px; } .breadcrumb-class { font-weight: 600; } .breadcrumb-tab { color: var(--text-sub); } /* 탭 패널 */ .tab-panels { flex: 1; overflow-y: auto; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* 탭 페이지 헤더 */ .tab-page-header { margin-bottom: 24px; } .tab-page-header h2 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; } .tab-page-header p { font-size: 14px; color: var(--muted); margin-top: 4px; } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 의미형 프리미티브 (DESIGN.md §9) 정적 콘텐츠를 구분하려고 흰 사각형을 만들지 않는다. 정보 위계는 제목·정렬· 간격·구분선·표로 만든다. 아래 프리미티브가 그 기본 단위다. ═══════════════════════════════════════════════════════ */ /* ── 패널(.gf-panel) / 섹션(.gf-section): 제목 + 선택적 한 줄 설명 + 내용 ── 페이지 바탕 위에 **경계가 있는 작업면**을 만든다. 구분선 한 줄만으로 영역을 나누면 넓은 화면에서 "여기부터 저기까지가 한 덩어리"라는 것이 읽히지 않는다 (사용자 지적 2026-08-12). 테두리는 1px --border, 반경은 --radius 토큰 하나, 그림자는 없다 — 띄우는 게 아니라 **가두는** 것이 목적이다. .gf-section 과 .gf-panel 은 같은 표면이다. 둘 다 있는 이유는 이미 쓰이는 이름을 그대로 두기 위해서다(신규 마크업은 어느 쪽을 써도 된다). */ .gf-section, .gf-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; } .gf-section + .gf-section, .gf-panel + .gf-panel, .gf-section + .gf-panel, .gf-panel + .gf-section { margin-top: 14px; } /* 표면 위의 표면을 만들지 않는다(카드 안의 카드 금지). 이미 --card 면 위에 있는 섹션은 테두리를 벗고 평범한 콘텐츠 그룹으로 돌아가며, 형제끼리는 구분선으로 나눈다. 모달 본문·패널 내부·콘솔 카드 안이 여기 해당한다. */ .gf-section .gf-section, .gf-panel .gf-section, .gf-section .gf-panel, .gf-panel .gf-panel, .modal-body .gf-section, .modal-body .gf-panel, .gf-flat > .gf-section, .gf-flat > .gf-panel { background: none; border: 0; border-radius: 0; padding: 20px 0; margin-top: 0; } .gf-section .gf-section + .gf-section, .gf-panel .gf-section + .gf-section, .modal-body .gf-section + .gf-section, .gf-flat > .gf-section + .gf-section { border-top: 1px solid var(--border); } .gf-section .gf-section:first-child, .gf-panel .gf-section:first-child, .modal-body .gf-section:first-child, .gf-flat > .gf-section:first-child { padding-top: 0; } .gf-section .gf-section:last-child, .gf-panel .gf-section:last-child, .modal-body .gf-section:last-child, .gf-flat > .gf-section:last-child { padding-bottom: 0; } /* 제목·설명 묶음과 그 아래 데이터 사이는 여백으로도 한 번 끊어 준다 — 구분선 하나만으로는 "설명의 밑줄"인지 "목록의 머리"인지 읽히지 않는다. */ .gf-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .gf-section-title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--text); } .gf-section-desc { font-size: 14px; color: var(--muted); line-height: 1.6; } .gf-section-head .gf-section-desc { flex-basis: 100%; margin-top: -4px; } .gf-section-gap { flex: 1; } /* 제목 줄 오른쪽에 ⋯·보조 컨트롤을 밀어 붙일 때 */ /* ── 목록·행: 반복 객체. 행 높이·열 정렬을 상태와 무관하게 유지한다 ── 배지·부제가 붙고 빠지며 행 높이가 출렁이면 같은 목록으로 보이지 않는다(§2). */ .gf-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-strong); } .gf-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; min-height: 46px; border-bottom: 1px solid var(--border-soft); text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; font-family: inherit; font-size: 14px; color: var(--text); } button.gf-row, .gf-row.is-clickable { cursor: pointer; transition: background var(--transition); } button.gf-row:hover, .gf-row.is-clickable:hover { background: var(--hover); } .gf-row-main { flex: 1; min-width: 0; } .gf-row-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gf-row-sub { font-size: 13px; color: var(--muted); margin-top: 1px; } .gf-row-meta { font-size: 13px; color: var(--text-sub); white-space: nowrap; flex: none; } .gf-row-actions { display: flex; align-items: center; gap: 6px; flex: none; } /* 선택 상태는 **배경 한 톤**으로만 말한다. 옅은 배경 + 왼쪽 굵은 선 조합은 쓰지 않는다(사용자 지시 2026-08-12). 띄우기·확대·그림자도 금지(§8). */ .gf-row { position: relative; } .gf-row.selected { background: var(--primary-soft); } .gf-row.selected .gf-row-title { color: var(--primary-dark); } /* ── 요약 수치: 숫자마다 박스를 만들지 않는다. 한 줄 정의 목록 ── 가장 중요한 수치 하나만 .is-lead 로 앞세우고 나머지는 보조 통계로 둔다. */ .gf-summary { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: flex-end; } .gf-summary > div { display: flex; flex-direction: column; gap: 2px; } .gf-summary dt { font-size: 13px; color: var(--muted); font-weight: 500; } .gf-summary dd { font-size: 21px; font-weight: 700; color: var(--text); letter-spacing: -.3px; font-variant-numeric: tabular-nums; } .gf-summary .is-lead dd { font-size: 32px; } .gf-summary-note { flex-basis: 100%; font-size: 13px; color: var(--muted); margin-top: 6px; } /* ── 작업 상태: 장시간 작업(채점·생성·인식) ── AI 작업을 마법 같은 그래픽으로 표현하지 않는다. 어디까지 갔는지(n/N), 얼마나 지났는지, 화면을 떠나도 되는지, 취소·재시도를 글로 말한다(§5·§9). **왼쪽에만 굵은 색 선을 긋는 알림 모양은 쓰지 않는다**(사용자 지시 2026-08-12). 사방 테두리를 두른 박스로 영역을 긋고, 상태는 테두리 색과 제목 색으로 말한다. */ .gf-job-status { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card); padding: 13px 15px; margin: 12px 0; } .gf-job-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .gf-job-name { font-size: 15px; font-weight: 650; color: var(--text); } .gf-job-count { font-size: 14px; color: var(--text-sub); font-variant-numeric: tabular-nums; } .gf-job-elapsed { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .gf-job-step { font-size: 14px; color: var(--text-sub); margin-top: 4px; } .gf-job-leave { font-size: 13px; color: var(--muted); margin-top: 4px; } .gf-job-status .progress-track { margin-top: 10px; } .gf-job-actions { display: flex; gap: 8px; margin-top: 10px; } .gf-job-status.is-error { border-color: var(--error-border); background: var(--error-soft); } .gf-job-status.is-error .gf-job-name { color: var(--error-text); } .gf-job-status.is-done { border-color: var(--success-border); background: var(--success-soft); } .gf-job-status.is-done .gf-job-name { color: var(--success-text); } /* ── 상태 안내: 오류·경고·차단·부분 성공처럼 실제 상태에만 ── **옅은 배경 + 왼쪽 굵은 색 선** 조합은 쓰지 않는다(사용자 지시 2026-08-12). 사방 1px 테두리로 영역을 긋고, 심각도는 테두리·제목 색으로 말한다. 배경은 그 상태의 --*-soft 한 톤까지만 — 화면 절반을 색으로 칠하지 않는다. */ .gf-callout { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card); padding: 12px 15px; margin: 12px 0; font-size: 14px; line-height: 1.65; color: var(--text-sub); } .gf-callout-title { font-weight: 650; color: var(--text); margin-bottom: 2px; } .gf-callout-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; } .gf-callout.is-error { border-color: var(--error-border); background: var(--error-soft); color: var(--error-text); } .gf-callout.is-error .gf-callout-title { color: var(--error-text); } .gf-callout.is-warning { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning-text); } .gf-callout.is-warning .gf-callout-title { color: var(--warning-text); } .gf-callout.is-success { border-color: var(--success-border); background: var(--success-soft); color: var(--success-text); } .gf-callout.is-success .gf-callout-title { color: var(--success-text); } .gf-callout.is-info { border-color: var(--primary-mid); background: var(--primary-soft); color: var(--text-sub); } .gf-callout.is-info .gf-callout-title { color: var(--primary-dark); } /* ── 독립 객체 타일 (§8 카드 예외) ── 독립적으로 선택·이동·미리보기하는 객체에만 쓴다: 문서 썸네일, 업로드 파일, 양식 미리보기. 그림자는 없고, 안에 또 타일을 넣지 않는다. */ .gf-object { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition), background var(--transition); } .gf-object.is-clickable { cursor: pointer; } .gf-object.is-clickable:hover { border-color: var(--border-mid); } .gf-object.selected { border-color: var(--primary); background: var(--primary-soft); } .gf-object-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } /* ═══════════════════════════════════════════════════════ 카드 (.card) — .gf-panel 과 같은 표면 (DESIGN.md §8·§9) 카드는 다시 쓸 수 있다(사용자 확정 2026-08-12). 다만 **무자비하게** 쓰지 않는다: 한 줄짜리 정적 설명·통계 숫자 하나·설정 항목마다 카드를 만들지 않고, 카드 안에 카드를 넣지 않으며, 반경은 --radius 토큰 하나만 쓴다. 그림자는 여전히 없다. KPI 격자용 레거시 카드 셀렉터 세 개는 계약 테스트가 계속 막는다(DESIGN.md §9) — 그게 실제로 "바이브 코딩" 인상을 만들던 쪽이다. ═══════════════════════════════════════════════════════ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; } .card + .card { margin-top: 14px; } /* 카드 안의 섹션은 다시 카드가 되지 않는다(위 .gf-section 중첩 규칙과 같은 계약) */ .card > .gf-section, .card > .gf-panel { background: none; border: 0; border-radius: 0; padding: 20px 0; margin-top: 0; } .card > .gf-section + .gf-section { border-top: 1px solid var(--border); } .card > .gf-section:first-child { padding-top: 0; } .card > .gf-section:last-child { padding-bottom: 0; } .card-title { font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } .step-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-action); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 버튼 ═══════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all var(--transition); white-space: nowrap; text-decoration: none; font-family: inherit; line-height: 1; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--primary-action); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--primary-action-hover); } .btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); } .btn-outline:hover:not(:disabled) { background: var(--primary-soft); } .btn-ghost { background: transparent; color: var(--text-sub); border: 1px solid var(--border); } .btn-ghost:hover:not(:disabled) { background: var(--hover); } .btn-danger { background: var(--error-action); color: #fff; } .btn-danger:hover:not(:disabled) { background: var(--error-action-hover); } .btn-success { background: var(--success-action); color: #fff; } .btn-success:hover:not(:disabled) { background: var(--success-action-hover); } .btn-sm { padding: 5px 12px; font-size: 13px; } .btn-lg { padding: 11px 24px; font-size: 17px; } .btn-full { width: 100%; } .btn-icon { padding: 8px; border-radius: var(--radius-sm); } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 폼 ═══════════════════════════════════════════════════════ */ .form-group { margin-bottom: 18px; } .form-group:last-child { margin-bottom: 0; } label.field-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-sub); margin-bottom: 6px; } .field-hint { font-size: 13px; color: var(--muted); margin-top: 5px; } /* 폼 입력 — 태그 + .input 클래스 모두 커버(date/search/tel 등 브라우저 기본형이 토큰을 안 타 어색해 보이던 문제 해결). 색·반경·포커스링은 DESIGN.md 토큰만 사용. */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel], input[type=url], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input.input, textarea, textarea.input, select, select.input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit; background: var(--card); color: var(--text); outline: none; transition: border-color var(--transition); } input:hover:not(:focus):not(:disabled), input.input:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled) { border-color: var(--border-mid); } .input:focus, input:focus, input.input:focus, textarea:focus, select:focus { border-color: var(--border-focus); outline: 2px solid var(--border-focus); outline-offset: -1px; } input::placeholder, textarea::placeholder { color: var(--muted); } textarea { resize: vertical; min-height: 120px; } /* 탭 그룹 (로그인 페이지) */ .tab-switch { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 24px; } .tab-switch-btn { flex: 1; padding: 10px; background: none; border: none; font-size: 15px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition); font-family: inherit; } .tab-switch-btn.active { color: var(--primary); border-bottom-color: var(--primary); } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 알림 / 배지 ═══════════════════════════════════════════════════════ */ .alert { padding: 11px 15px; border-radius: var(--radius); font-size: 14px; font-weight: 500; margin-bottom: 16px; } .alert-error { background: var(--error-soft); color: var(--error-text); border: 1px solid var(--error-border); } .alert-success { background: var(--success-soft); color: var(--success-text); border: 1px solid var(--success-border); } .alert-info { background: var(--primary-soft); color: var(--info-text); border: 1px solid var(--info-border); } .alert-warning { background: var(--warning-soft); color: var(--warning-text); border: 1px solid var(--warning-border); } /* 상태·개수·짧은 분류만. 기능 설명·AI 강조·섹션 eyebrow 를 배지로 만들지 않는다(§9). pill 반경은 의미가 원형인 개수 배지(.badge-count)만 쓴다(§8). */ .badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 3px; font-size: 12px; font-weight: 600; } .badge-count { border-radius: 999px; min-width: 18px; justify-content: center; } .badge-primary { background: var(--primary-soft); color: var(--primary); } .badge-success { background: var(--success-soft); color: var(--success-text); } .badge-warning { background: var(--warning-soft); color: var(--warning-text); } .badge-error { background: var(--error-soft); color: var(--error-text); } .badge-muted { background: var(--surface-var); color: var(--muted); } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 모달 ═══════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(16,18,42,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; animation: fade-in .18s ease; } .modal-overlay.hidden { display: none; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* 열림은 짧은 opacity 전환만 허용한다(§9·§11). 스프링 팝·스케일 진입 금지. */ .modal { background: var(--card); border-radius: var(--radius-overlay); width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; box-shadow: var(--elevation-overlay); } .modal-wide { max-width: 720px; } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--card); z-index: 1; } .modal-title { font-size: 17px; font-weight: 700; } .modal-close { background: none; border: none; cursor: pointer; font-size: 21px; color: var(--muted); line-height: 1; padding: 4px; border-radius: var(--radius-sm); transition: color var(--transition); } .modal-close:hover { color: var(--text); } .modal-body { padding: 24px; } /* 내용 없이 남은 footer 가 빈 띠로 보이지 않게 (모달을 여러 용도로 재사용할 때) */ .modal-footer:empty { display: none; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: var(--card); } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 팔레트 선택기 ═══════════════════════════════════════════════════════ */ .palette-grid { display: flex; gap: 10px; flex-wrap: wrap; } .palette-chip { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: border-color var(--transition); flex-shrink: 0; } .palette-chip:hover { border-color: var(--border-mid); } .palette-chip.selected, .palette-chip.active { border-color: var(--text); } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 스피너 / 프로그레스 ═══════════════════════════════════════════════════════ */ .spinner { width: 20px; height: 20px; border: 2.5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; } .spinner-sm { width: 14px; height: 14px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } .progress-track { background: var(--hover); height: 6px; overflow: hidden; } .progress-fill { height: 100%; background: var(--primary); transition: width .4s ease; } /* 움직이는 줄무늬는 §11 에서 금지 — 레거시 클래스가 붙어도 무늬가 없다. */ .progress-fill.is-active { background-image: none; animation: none; } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 테이블 ═══════════════════════════════════════════════════════ */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { background: var(--surface-var); padding: 10px 14px; text-align: left; font-weight: 600; font-size: 13px; letter-spacing: .02em; color: var(--text-sub); /* 헤더 아래는 데이터가 시작하는 자리라 행 사이보다 진하다(§8 구분선 3단) */ border-bottom: 1px solid var(--border-strong); white-space: nowrap; } /* 숫자는 우측 정렬 + tabular-nums, 첫 열의 식별자는 보존한다(§9). */ td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--bg); } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 학생 태그 ═══════════════════════════════════════════════════════ */ .student-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .student-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--primary-soft); color: var(--primary); border-radius: 3px; padding: 4px 10px 4px 12px; font-size: 14px; font-weight: 500; } .student-tag-remove { background: none; border: none; cursor: pointer; color: var(--primary); font-size: 15px; line-height: 1; padding: 0 2px; opacity: .6; transition: opacity var(--transition); } .student-tag-remove:hover { opacity: 1; } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 드롭존 ═══════════════════════════════════════════════════════ */ .dropzone { border: 2px dashed var(--border-mid); border-radius: var(--radius); padding: 36px 20px; text-align: center; cursor: pointer; transition: border-color var(--transition), background var(--transition); background: var(--bg); } .dropzone:hover { border-color: var(--primary); background: var(--primary-soft); } .dropzone.drag-over { border-color: var(--primary); background: var(--primary-soft); } .dropzone-icon { display: none; } /* 장식용 이모지 — §10 */ .dropzone-text { font-size: 15px; color: var(--text-sub); } .dropzone-text strong { color: var(--primary); } .dropzone-hint { font-size: 13px; color: var(--muted); margin-top: 4px; } /* ═══════════════════════════════════════════════════════ 공통 컴포넌트 — 파일 목록 ═══════════════════════════════════════════════════════ */ .file-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-var); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; } .file-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--muted); } .file-name { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-size { font-size: 13px; color: var(--muted); white-space: nowrap; } .file-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 17px; padding: 0 4px; transition: color var(--transition); } .file-remove:hover { color: var(--error-text); } /* ═══════════════════════════════════════════════════════ 유틸리티 ═══════════════════════════════════════════════════════ */ .hidden { display: none !important; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .flex-1 { flex: 1; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .text-muted { color: var(--muted); } .text-sm { font-size: 13px; } .text-center { text-align: center; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .w-full { width: 100%; } /* ═══════════════════════════════════════════════════════ 모션 (DESIGN.md §11) 모션은 상태 변화와 공간 이동을 설명할 때만 쓴다. 장식·진입 연출·"제품다움"을 위한 모션은 없다. 허용: hover/focus 색·보더 변화(120~150ms), 아코디언·메뉴 열림의 짧은 opacity, 모바일 드로어처럼 실제 공간이 이동하는 전환, 진행률을 모르는 작업의 단순 인디케이터. 금지: 화면·카드·행의 fade-up 과 스태거 진입, 모달 spring/pop, hover lift, 버튼·카드 scale/translate, 통계 숫자 카운트업, shimmer·움직이는 줄무늬· 글로우·플로팅 오브·문자별 생성 애니메이션, 상시 will-change. ═══════════════════════════════════════════════════════ */ /* 메뉴·아코디언 열림에 쓰는 짧은 opacity 전환. 이동·스케일 없음. */ @keyframes gf-fade-in { from { opacity: 0; } to { opacity: 1; } } /* 레거시 진입 유틸 — 마크업에 남아 있는 클래스가 조용히 애니메이션을 되살리지 않도록 no-op 으로 중화한다. 새 마크업에 쓰지 않는다. */ .anim-fade-up, .anim-fade-in, .anim-pop, .anim-stagger > * { animation: none; } /* ═══════════════════════════════════════════════════════ 로딩 인디케이터 (DESIGN.md §9) 정확한 진행률을 알 수 있으면 결정형 진행 막대(.progress-track/.progress-fill), 모르는 경우에만 단순 인디케이터(.gf-progress-indeterminate)를 쓴다. 회전 그라데이션·글로우·떠다니는 오브·문자별 생성 애니메이션은 쓰지 않는다. ═══════════════════════════════════════════════════════ */ .spinner-lg { width: 40px; height: 40px; border-width: 4px; } /* 큰 영역/페이지 위에 덮는 처리 중 오버레이 — 중립 스피너와 문장만 */ .gf-overlay { position: absolute; inset: 0; background: var(--overlay); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 50; border-radius: inherit; } .gf-overlay-label { font-size: 17px; font-weight: 700; color: var(--text-sub); } .gf-overlay-sub { font-size: 14px; color: var(--muted); margin-top: -6px; } /* 진행률을 모를 때 쓰는 단순 인디케이터 (§11 허용) */ .gf-progress-indeterminate { position: relative; height: 6px; background: var(--border); overflow: hidden; } .gf-progress-indeterminate::after { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--primary); animation: gf-bar-slide 1.1s cubic-bezier(.4,0,.2,1) infinite; } @keyframes gf-bar-slide { 0% { left: -40%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { /* 움직임을 끈 상태에서 막대를 가득 채우면 "다 됐다"로 읽힌다 — 진행률을 모르는 작업이므로 채우지 않고 중립 트랙만 남긴다. 무슨 일이 얼마나 진행됐는지는 .gf-job-status 의 단계 문구와 경과 시간이 말한다. */ .gf-progress-indeterminate::after { display: none; } } /* 스켈레톤 — 최종 레이아웃과 같은 자리·높이의 정적인 중립 면. shimmer 없음(§9). */ .skeleton { background: var(--surface-var); } /* 스켈레톤 레이아웃 프리셋 — api.js 의 skeletonListHtml 등이 사용 */ .sk-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-strong); } .sk-row { display: flex; align-items: center; gap: 10px; padding: 12px 2px; min-height: 46px; border-bottom: 1px solid var(--border-soft); } .sk-cards { display: flex; flex-direction: column; border-top: 1px solid var(--border-strong); } .sk-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 2px; border-bottom: 1px solid var(--border-soft); } /* 데이터 로딩 실패 시 인라인 오류 + 다시 시도 (내용을 지우고 alert 만 띄우지 않는다). .gf-callout.is-error 와 같은 모양 — 왼쪽 선 알림 패턴은 쓰지 않는다(§9). */ .gf-inline-error { border: 1px solid var(--error-border); border-radius: var(--radius); background: var(--error-soft); padding: 13px 15px; color: var(--error-text); font-size: 14px; } .gf-inline-error .btn { margin-top: 10px; } /* 오버레이 라벨 — showLoadingOverlay/gfBusyOverlay 가 쓰는 한 줄 문구. 문자별 생성 애니메이션(옛 gf-gen-loader)은 §11 에서 폐지됐고, 오브·스캔 그래픽은 마크업까지 제거했다. 장시간 작업은 .gf-job-status 를 쓴다(§9). */ .gf-gen-loader { font-weight: 650; font-size: 15px; color: var(--text-sub); } /* 모바일 전용 컨트롤은 데스크탑에선 숨김 (워크스페이스 드로어용) */ .mobile-menu-btn { display: none; } .sidebar-backdrop { display: none; } /* ═══════════════════════════════════════════════════════ 반응형 — 모바일 / 태블릿 (데스크탑 레이아웃은 그대로 유지) ※ 데스크탑 스타일을 건드리지 않도록 모든 규칙을 미디어쿼리 안에만 둔다. ═══════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── 워크스페이스: 사이드바를 슬라이드 드로어로 ── */ .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 4px 0 -6px; flex-shrink: 0; border: none; background: none; font-size: 21px; line-height: 1; color: var(--text); cursor: pointer; border-radius: 8px; } .mobile-menu-btn:hover { background: var(--bg); } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: min(82vw, 300px); z-index: 300; /* 실제 공간이 이동하는 전환 — §11 허용 */ transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--elevation-overlay); } .sidebar.open { transform: none; } .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .sidebar-backdrop.show { opacity: 1; pointer-events: auto; } .main-area { width: 100%; } .breadcrumb { padding: 0 14px; } .tab-panels { overflow-x: hidden; } .tab-page-wrap { padding: 18px 14px !important; } #alert-area { padding: 0 14px !important; } /* ── 반 목록 페이지 ── */ .global-header { padding: 0 14px; } .classes-header { padding: 0 14px; gap: 6px; } .classes-page { padding: 18px 14px; } .classes-page-header { flex-direction: column; align-items: flex-start; gap: 10px; } .classes-page-header h2 { font-size: 26px; } .classes-page-header p { font-size: 14px; } .class-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } /* ── 카드 / 본문 여백 축소 ── */ .card { padding: 18px 16px; } .tab-page-header h2 { font-size: 21px; } /* ── 모달: 화면을 거의 꽉 채우게 ── */ .modal-overlay { padding: 10px; align-items: flex-end; } /* 인라인 max-width(예: style="max-width:820px") 를 이기도록 !important */ .modal, .modal-wide { max-width: 100% !important; max-height: 92vh; border-radius: var(--radius-overlay) var(--radius-overlay) 0 0; } .modal-header { padding: 16px 18px 12px; } .modal-body { padding: 18px; } .modal-footer { padding: 12px 18px; flex-wrap: wrap; } .modal-footer .btn { flex: 1; } /* ── 인증/업로드 카드 ── */ .auth-card { padding: 26px 20px; } /* ── 표는 가로 스크롤 보장 ── */ .table-wrap { -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { body { font-size: 15px; } .class-grid { grid-template-columns: 1fr; } .classes-header-user-name { display: none; } .classes-header-logo-sub { display: none; } /* 헤더 액션 버튼은 아이콘만 (텍스트는 font-size:0 으로 숨기고 .ic 는 width/height 라 유지) */ .classes-header-btn { font-size: 0; gap: 0; padding: 7px 9px; } .auth-card { padding: 22px 16px; } .auth-logo h1 { font-size: 26px; } .btn-lg { padding: 11px 16px; font-size: 15px; } } /* 인라인 아이콘(메뉴/버튼용 SVG) 기본 정렬 — #13 */ .ic { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; } .ic-sm { width: 15px; height: 15px; } .ic-lg { width: 22px; height: 22px; } /* 모션 최소화 선호 사용자 배려 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* 수식 렌더 공통(api.js gfRenderMath) — 페이지 로컬 스타일이 있으면 그쪽이 이긴다 */ .math-eq { cursor: pointer; border-radius: 4px; padding: 0 2px; } .math-eq:hover { background: var(--primary-soft, rgba(64,103,156,.12)); } .eq-chip { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--primary-soft, rgba(64,103,156,.12)); color: var(--primary); padding: 1px 5px; border-radius: 5px; }