AWESOMEDEV
f8dd3f683d
취업준비생 대상 동기·유틸리티 3종: - 수료증(/certificate): 완료강좌·만점퀴즈·코딩통과·과제 집계를 인쇄/PDF 가능한 증명서로. 기존 진도 API 4개를 프론트에서 합산(새 백엔드 0), 대표 서명 형식. 인쇄 시 증명서만 나오게 @media print - 개발 용어 사전(/glossary): 다중 에이전트로 7카테고리 98개 용어 생성(카테고리당 14), 검색+카테고리 필터. 데이터(lib/glossary.js)와 화면 분리 - 학습 경로 안내: 대시보드 위젯에 '다음에 들을 강좌'(카탈로그 순 첫 미완료) 추가 - 대시보드에 용어사전·증명서 빠른이동 카드 검증: 빌드 통과, 운영 E2E — 용어 98개·해시검색 2건 필터·수료증 집계(1/83)· 다음강좌 추천(history→hardware)·콘솔에러0. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1291 lines
28 KiB
CSS
1291 lines
28 KiB
CSS
/* 이 파일이 하는 일: AWESOMEDEV 브랜드 색·폰트를 CSS 변수(토큰)로 정의하고,
|
|
버튼/카드/입력창 같은 공통 클래스를 제공한다.
|
|
학습 포인트: 색을 컴포넌트마다 하드코딩하지 않고 :root 변수 하나로 모아두면
|
|
다크 모드 전환이 @media 블록 하나로 끝난다. */
|
|
|
|
:root {
|
|
--bg: #FAFBFD;
|
|
--card: #FFFFFF;
|
|
--ink: #101A28;
|
|
--muted: #46536A;
|
|
--line: #E4E8F0;
|
|
--primary: #2159C5;
|
|
--primary-soft: #E5EDFB;
|
|
--amber: #B9772A;
|
|
--teal: #0E8C86;
|
|
--rose: #B4463C;
|
|
/* 배지 "글자"는 옅은 틴트 배경 위에 올라가므로, 배경용 색(--amber/--teal)보다
|
|
더 진하게 따로 둔다 — 저시력 사용자 기준 4.5:1 대비 확보(WCAG 1.4.3). */
|
|
--amber-text: #7A4D14;
|
|
--teal-text: #0A615C;
|
|
--radius: 14px;
|
|
--shadow: 0 1px 3px rgba(16, 26, 40, 0.06), 0 4px 14px rgba(16, 26, 40, 0.05);
|
|
--code-bg: #F1F4F9;
|
|
--ink-faint: #7B8798;
|
|
}
|
|
|
|
/* 학습 포인트: 사용자의 OS가 다크 모드면 이 블록이 변수 값만 바꿔치기한다.
|
|
아래의 모든 클래스는 변수를 참조하므로 코드를 더 고칠 필요가 없다. */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #0B1017;
|
|
--card: #131A24;
|
|
--ink: #E8EDF4;
|
|
--muted: #A4B0C0;
|
|
--line: #263140;
|
|
--primary: #6AA0F0;
|
|
--primary-soft: #172A44;
|
|
--shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
|
|
--code-bg: #161E28;
|
|
--ink-faint: #74808F;
|
|
/* 다크 모드에선 배경이 어두우므로 배지 글자는 반대로 밝게 둔다. */
|
|
--amber-text: #E0A95F;
|
|
--teal-text: #5FD0C6;
|
|
}
|
|
}
|
|
|
|
/* ---------- 기본 리셋 ---------- */
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body, #root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ---------- 레이아웃 ---------- */
|
|
.container {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 24px 20px 64px;
|
|
}
|
|
|
|
.topnav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background: var(--card);
|
|
border-bottom: 1px solid var(--line);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* 학습 포인트: 상단바는 로고·메뉴·사용자 영역이 한 줄의 폭을 나눠 갖는다.
|
|
메뉴가 늘어나면 셋이 서로 폭을 뺏는데, flex는 기본적으로 아이템을 "줄여서라도" 맞추려 한다.
|
|
그래서 메뉴 글자가 단어 중간에서 잘려 두 줄이 되는 사고가 났다.
|
|
해법은 세 가지를 함께 쓴다:
|
|
1) 메뉴 항목: white-space: nowrap + flex: none → 글자를 절대 쪼개지 않는다
|
|
2) 컨테이너: max-width를 본문(960)보다 넓게 → 메뉴가 쓸 폭을 확보
|
|
3) 그래도 넘치면 가로 스크롤 → 깨지는 대신 밀어서 볼 수 있게 */
|
|
.topnav-inner {
|
|
max-width: 1140px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.topnav-logo {
|
|
font-weight: 800;
|
|
font-size: 15px;
|
|
color: var(--ink);
|
|
white-space: nowrap;
|
|
flex: none;
|
|
}
|
|
|
|
.topnav-logo span {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.topnav-menu {
|
|
display: flex;
|
|
gap: 2px;
|
|
flex: 1;
|
|
min-width: 0; /* flex 자식이 내용보다 작아질 수 있게 — 이게 없으면 스크롤이 안 생긴다 */
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.topnav-menu::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.topnav-menu a {
|
|
padding: 6px 11px;
|
|
border-radius: 10px;
|
|
color: var(--muted);
|
|
font-weight: 500;
|
|
white-space: nowrap; /* 글자를 단어 중간에서 쪼개지 않는다 */
|
|
flex: none; /* 폭이 모자라도 줄어들지 않는다 */
|
|
}
|
|
|
|
.topnav-menu a.active {
|
|
background: var(--primary-soft);
|
|
color: var(--primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.topnav-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
flex: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.topnav-name {
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
max-width: 90px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* 화면이 좁아지면 로고의 부제("수습 플랫폼")부터 접어 메뉴에 폭을 양보한다.
|
|
학습 포인트: 무엇을 먼저 버릴지 정하는 것도 반응형 설계다 — 브랜드보다 기능이 먼저다. */
|
|
@media (max-width: 1080px) {
|
|
.topnav-logo span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ---------- 모바일 반응형 ----------
|
|
학습 포인트: 데스크톱 CSS를 다 짠 뒤 좁은 화면에서 깨지는 곳만 @media로 고친다.
|
|
상단 네비는 두 줄로 재배치(로고+사용자 / 메뉴), 메뉴는 가로 스크롤로 잘리지 않게 한다. */
|
|
@media (max-width: 640px) {
|
|
.topnav-inner {
|
|
height: auto;
|
|
flex-wrap: wrap;
|
|
padding: 8px 12px 6px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.topnav-logo {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.topnav-user {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* 좁은 화면에선 이름·역할 배지를 숨기고 버튼(🔑·로그아웃)만 남긴다.
|
|
내가 누구인지는 대시보드 인사말에 이미 나오므로, 좁은 화면에선 중복이다. */
|
|
.topnav-name,
|
|
.topnav-user > .badge {
|
|
display: none;
|
|
}
|
|
|
|
.topnav-menu {
|
|
order: 3; /* 두 번째 줄로 내려보낸다 */
|
|
flex-basis: 100%;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto; /* 메뉴가 많아도 가로 스크롤로 전부 접근 가능 */
|
|
white-space: nowrap;
|
|
scrollbar-width: none; /* 스크롤바는 숨긴다 (스와이프로 충분) */
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.topnav-menu::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.topnav-menu a {
|
|
flex: none;
|
|
font-size: 14px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.container {
|
|
padding: 16px 12px 56px;
|
|
}
|
|
}
|
|
|
|
/* ---------- 카드 ---------- */
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
padding: 20px;
|
|
}
|
|
|
|
.card + .card {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.card-clickable {
|
|
cursor: pointer;
|
|
transition: transform 0.12s ease, border-color 0.12s ease;
|
|
}
|
|
|
|
.card-clickable:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
/* 키보드로 카드에 포커스했을 때 위치를 분명히 보여준다(WCAG 2.4.7).
|
|
:focus-visible = 마우스 클릭엔 안 뜨고 키보드 이동일 때만 뜬다. */
|
|
.card-clickable:focus-visible {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ---------- 버튼 ---------- */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--line);
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
font: inherit;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:hover {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
color: #fff;
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-ghost {
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ---------- 입력 ---------- */
|
|
.input, .textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font: inherit;
|
|
}
|
|
|
|
.input:focus, .textarea:focus {
|
|
outline: 2px solid var(--primary-soft);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.textarea {
|
|
min-height: 96px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.field label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* ---------- 탭 (주차 선택) ---------- */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.tab {
|
|
padding: 6px 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
background: var(--card);
|
|
color: var(--muted);
|
|
font: inherit;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab.active {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ---------- 배지 ---------- */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.badge-primary { background: var(--primary-soft); color: var(--primary); }
|
|
.badge-amber { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber-text); }
|
|
.badge-teal { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal-text); }
|
|
.badge-rose { background: color-mix(in srgb, var(--rose) 14%, transparent); color: var(--rose); }
|
|
|
|
/* ---------- 진행률 바 ---------- */
|
|
.progress-track {
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
background: var(--primary-soft);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: var(--primary);
|
|
transition: width 0.25s ease;
|
|
}
|
|
|
|
/* ---------- 체크리스트 ---------- */
|
|
.check-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 4px;
|
|
border-bottom: 1px solid var(--line);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.check-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.check-row input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: var(--primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.check-row.done .check-label {
|
|
color: var(--muted);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* ---------- 테이블 (멘토 페이지) ---------- */
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.table th, .table td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
text-align: left;
|
|
}
|
|
|
|
/* 가로 스크롤 컨테이너 안에서 보는 표에만 붙인다 — 좁은 화면에서 "개발"→"개/발"처럼
|
|
세로로 꺾이지 않게 한다. (일반 .table에 전역으로 걸면 overflow: hidden 카드 안의
|
|
긴 제목 셀이 잘려 보이지 않게 되므로, 필요한 표에만 선택적으로 쓴다.) */
|
|
.table--nowrap th, .table--nowrap td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table th {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.table tbody tr {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: var(--primary-soft);
|
|
}
|
|
|
|
/* 클릭되지 않는 정보 표 — 전역 hover 하이라이트를 끈다.
|
|
학습 포인트: hover 배경은 인라인 스타일로 덮을 수 없다(:hover는 CSS에만 있음).
|
|
그래서 "클릭 안 되는 표"용 변형 클래스를 만들어 규칙 자체를 무효화한다. */
|
|
.table-static tbody tr {
|
|
cursor: default;
|
|
}
|
|
|
|
.table-static tbody tr:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
/* 좁은 화면에서 가로 스크롤해도 첫 열(이름)이 고정되게 */
|
|
.table-static th:first-child,
|
|
.table-static td:first-child {
|
|
position: sticky;
|
|
left: 0;
|
|
background: var(--card);
|
|
}
|
|
|
|
.table-static thead th:first-child {
|
|
background: var(--paper);
|
|
}
|
|
|
|
/* ---------- 기타 ---------- */
|
|
.page-title {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.page-desc {
|
|
color: var(--muted);
|
|
margin-bottom: 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
color: var(--muted);
|
|
margin: 22px 0 10px;
|
|
}
|
|
|
|
.error-text {
|
|
color: var(--rose);
|
|
font-size: 14px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.empty {
|
|
color: var(--muted);
|
|
text-align: center;
|
|
padding: 32px 0;
|
|
}
|
|
|
|
.grid-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
/* ---------- 가이드 페이지 전용 (교육 문서 세트와 같은 디자인 언어) ---------- */
|
|
/* 학습 포인트: 아래 클래스들은 SetupGuidePage 등 '읽는 페이지'의 완성도를 올리는 부품이다.
|
|
기존 페이지의 클래스는 건드리지 않고 추가만 했다 — 이렇게 하면 사이드이펙트가 없다. */
|
|
|
|
.eyebrow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.eyebrow::before {
|
|
content: "";
|
|
width: 22px;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
background: var(--primary);
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background:
|
|
radial-gradient(120% 150% at 100% 0%, var(--primary-soft) 0%, transparent 55%),
|
|
var(--card);
|
|
box-shadow: var(--shadow);
|
|
padding: 28px 28px 26px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(24px, 4vw, 32px);
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
margin: 10px 0 8px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.hero p {
|
|
color: var(--muted);
|
|
max-width: 56ch;
|
|
}
|
|
|
|
.chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
background: var(--bg);
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 5px 12px;
|
|
}
|
|
|
|
.chip::before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
}
|
|
|
|
/* 단계 이동 필 내비게이션 */
|
|
.pill-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.pill-nav a {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--muted);
|
|
border: 1px solid var(--line);
|
|
background: var(--card);
|
|
border-radius: 999px;
|
|
padding: 6px 13px;
|
|
transition: color 0.12s ease, border-color 0.12s ease;
|
|
}
|
|
|
|
.pill-nav a:hover {
|
|
color: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.pill-nav a b {
|
|
color: var(--primary);
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* 단계 카드 */
|
|
.step-card {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
margin-top: 16px;
|
|
scroll-margin-top: 76px; /* 앵커 이동 시 상단 네비에 가리지 않게 */
|
|
}
|
|
|
|
.step-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 15px 20px;
|
|
background: var(--primary-soft);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.step-num {
|
|
flex: none;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 11px;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-weight: 800;
|
|
font-size: 15px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.step-head h3 {
|
|
font-size: 16.5px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.step-head .step-sub {
|
|
display: block;
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.step-body {
|
|
padding: 18px 20px 20px;
|
|
}
|
|
|
|
.step-body > * + * {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* 번호 매긴 진행 순서 */
|
|
.olist {
|
|
padding-left: 4px;
|
|
list-style: none;
|
|
counter-reset: ol;
|
|
display: grid;
|
|
gap: 9px;
|
|
}
|
|
|
|
.olist li {
|
|
counter-increment: ol;
|
|
position: relative;
|
|
padding-left: 32px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.olist li::before {
|
|
content: counter(ol);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 2px;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 7px;
|
|
background: var(--primary-soft);
|
|
color: var(--primary);
|
|
font-weight: 800;
|
|
font-size: 12.5px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
/* 코드/명령어 블록 */
|
|
.code-block {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 13px 15px;
|
|
overflow-x: auto;
|
|
font-family: "Cascadia Code", "SF Mono", Consolas, ui-monospace, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.75;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* 팁/주의 박스 */
|
|
.tip, .warn {
|
|
border-radius: 10px;
|
|
padding: 12px 15px;
|
|
font-size: 13.5px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.tip {
|
|
background: color-mix(in srgb, var(--teal) 9%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent);
|
|
}
|
|
|
|
.tip b { color: var(--teal); }
|
|
|
|
.warn {
|
|
background: color-mix(in srgb, var(--amber) 10%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
|
|
}
|
|
|
|
.warn b { color: var(--amber); }
|
|
|
|
/* 메뉴 경로 표시: [File] > [Settings] 같은 클릭 경로 */
|
|
.kbd {
|
|
display: inline-block;
|
|
padding: 1px 8px;
|
|
border: 1px solid var(--line);
|
|
border-bottom-width: 2px;
|
|
border-radius: 6px;
|
|
background: var(--card);
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
inline-code, .icode {
|
|
font-family: "Cascadia Code", "SF Mono", Consolas, ui-monospace, monospace;
|
|
font-size: 0.92em;
|
|
background: var(--code-bg);
|
|
border-radius: 5px;
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
/* 컴팩트 히어로 — 대시보드·과제처럼 매일 보는 페이지용 (가이드 히어로보다 낮게) */
|
|
.hero.compact {
|
|
padding: 22px 24px 20px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.hero.compact h1 {
|
|
font-size: clamp(21px, 3.2vw, 26px);
|
|
margin: 8px 0 6px;
|
|
}
|
|
|
|
/* 큰 숫자 통계 (진행률 등) */
|
|
.stat-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 22px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
}
|
|
|
|
.stat .stat-num {
|
|
font-size: 34px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
color: var(--primary);
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stat .stat-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* 요일(일차) 섹션 헤더 — 배지 + 제목 */
|
|
.day-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 22px 0 10px;
|
|
}
|
|
|
|
.day-head .day-badge {
|
|
flex: none;
|
|
padding: 3px 12px;
|
|
border-radius: 8px;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-size: 12.5px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.day-head .day-count {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 제출 완료된 과제 카드 표시 — 왼쪽에 청록 띠 */
|
|
.assign-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.assign-card.submitted::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background: var(--teal);
|
|
}
|
|
|
|
.assign-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.assign-title {
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* 코스 완료 바 — 코스 페이지 하단에 sticky로 붙는다 (CourseShell.jsx) */
|
|
.course-complete-bar {
|
|
position: sticky;
|
|
bottom: 14px;
|
|
margin-top: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 14px;
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 6px 24px rgba(16, 26, 40, 0.14);
|
|
}
|
|
|
|
.course-complete-bar.done {
|
|
border-color: color-mix(in srgb, var(--teal) 45%, transparent);
|
|
}
|
|
|
|
.course-complete-label {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 좁은 화면: 완료 바를 두 줄로 — 제목이 윗줄, 버튼들이 아랫줄 */
|
|
@media (max-width: 640px) {
|
|
.course-complete-bar {
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.course-complete-label {
|
|
order: -1;
|
|
flex-basis: 100%;
|
|
white-space: normal;
|
|
}
|
|
|
|
.course-complete-bar .btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
padding: 8px 10px;
|
|
}
|
|
}
|
|
|
|
/* 코스 본문 안의 도해(SVG) 공통 — 항상 컨테이너 너비에 맞춘다 */
|
|
.diagram {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
/* 허브 카드 완료 상태 */
|
|
.card-completed {
|
|
border-color: color-mix(in srgb, var(--teal) 45%, transparent);
|
|
}
|
|
|
|
/* 접었다 펴는 상세 — 학습 포인트: <details>는 JS 없이도 접기/펼치기가 되는 HTML 기본 기능 */
|
|
.fold summary {
|
|
cursor: pointer;
|
|
font-size: 13.5px;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
list-style: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.fold summary::before {
|
|
content: "▸ ";
|
|
}
|
|
|
|
.fold[open] summary::before {
|
|
content: "▾ ";
|
|
}
|
|
|
|
.fold[open] summary {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* ── 코딩 문제 ──────────────────────────────────────────
|
|
학습 포인트: 색을 직접 쓰지 않고 :root의 변수(--ink, --line …)만 쓴다.
|
|
그래야 다크 모드에서 자동으로 같이 바뀐다 — 파일 맨 위 :root 정의를 보자. */
|
|
|
|
/* 성공 메시지 (에러의 반대쪽 짝) */
|
|
.success-text {
|
|
color: var(--teal);
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* 선택된 표의 행 */
|
|
.is-selected {
|
|
background: var(--primary-soft);
|
|
}
|
|
|
|
/* 언어 배지 */
|
|
.lang-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border: 1px solid var(--line);
|
|
}
|
|
.lang-badge--js {
|
|
background: color-mix(in srgb, var(--amber) 12%, transparent);
|
|
color: var(--amber);
|
|
}
|
|
.lang-badge--java {
|
|
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
|
color: var(--primary);
|
|
}
|
|
.lang-badge--sql {
|
|
background: color-mix(in srgb, var(--teal) 12%, transparent);
|
|
color: var(--teal);
|
|
}
|
|
|
|
/* SQL 문제 — 실행 결과 표 */
|
|
.sql-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13.5px;
|
|
}
|
|
.sql-table th,
|
|
.sql-table td {
|
|
border: 1px solid var(--line);
|
|
padding: 6px 10px;
|
|
text-align: left;
|
|
}
|
|
.sql-table th {
|
|
background: var(--surface-2, var(--primary-soft));
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* SQL 문제 — 준비 SQL(테이블+데이터) 보기 */
|
|
.sql-setup {
|
|
margin-top: 10px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface-2, var(--primary-soft));
|
|
font-size: 12.5px;
|
|
line-height: 1.6;
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* 풀이 상태 배지 */
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border: 1px solid var(--line);
|
|
color: var(--muted);
|
|
}
|
|
.status-badge--passed {
|
|
background: color-mix(in srgb, var(--teal) 14%, transparent);
|
|
color: var(--teal);
|
|
border-color: transparent;
|
|
}
|
|
.status-badge--submitted {
|
|
background: color-mix(in srgb, var(--amber) 14%, transparent);
|
|
color: var(--amber);
|
|
border-color: transparent;
|
|
}
|
|
.status-badge--reviewed {
|
|
background: var(--primary-soft);
|
|
color: var(--primary);
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* 문제 목록 */
|
|
.coding-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.coding-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
.coding-item:hover {
|
|
border-color: var(--primary);
|
|
}
|
|
.coding-item__main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
}
|
|
.coding-item__no {
|
|
font-variant-numeric: tabular-nums;
|
|
/* --ink-faint(#7B8798)는 흰 배경 대비 3.65:1로 4.5:1 미달이었다.
|
|
번호는 정보(문제 순서)이므로 대비가 충분한 --muted로 바꾼다. */
|
|
color: var(--muted);
|
|
font-weight: 700;
|
|
}
|
|
.coding-item__title {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
.coding-item__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.coding-item__difficulty {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.coding-item__status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
.coding-item__score {
|
|
font-size: 13px;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* 문제 설명·피드백 — \n 줄바꿈을 그대로 살린다 */
|
|
.coding-description {
|
|
white-space: pre-wrap;
|
|
line-height: 1.7;
|
|
margin: 0;
|
|
}
|
|
|
|
.coding-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.feedback-card {
|
|
border-left: 3px solid var(--primary);
|
|
}
|
|
|
|
/* 코드 에디터 — 줄번호(왼쪽) + textarea(오른쪽) */
|
|
.code-editor {
|
|
display: flex;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background: var(--code-bg);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
.code-editor__gutter {
|
|
padding: 12px 8px 12px 12px;
|
|
text-align: right;
|
|
color: var(--ink-faint);
|
|
user-select: none;
|
|
overflow: hidden;
|
|
border-right: 1px solid var(--line);
|
|
min-width: 42px;
|
|
}
|
|
/* 키보드로 코드 입력창에 들어왔을 때 테두리로 위치를 알린다(WCAG 2.4.7).
|
|
textarea 자체의 outline은 껐으므로(아래) 부모에 focus-within으로 표시한다. */
|
|
.code-editor:focus-within {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 1px;
|
|
}
|
|
.code-editor__area {
|
|
flex: 1;
|
|
border: 0;
|
|
outline: none;
|
|
resize: vertical;
|
|
padding: 12px;
|
|
background: transparent;
|
|
color: var(--ink);
|
|
font: inherit;
|
|
line-height: inherit;
|
|
/* 학습 포인트: 탭 문자를 2칸으로 보이게 한다(에디터 설정과 화면을 맞추기 위해) */
|
|
tab-size: 2;
|
|
white-space: pre;
|
|
overflow-wrap: normal;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* 멘토가 읽는 코드 — 읽기 전용 표시 */
|
|
.code-view {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
overflow-x: auto;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
/* 테스트 채점 결과 */
|
|
.test-results {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.test-results li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--line);
|
|
font-size: 14px;
|
|
}
|
|
.test--pass {
|
|
background: color-mix(in srgb, var(--teal) 8%, transparent);
|
|
}
|
|
.test--fail {
|
|
background: color-mix(in srgb, var(--rose) 8%, transparent);
|
|
}
|
|
.test__mark {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
}
|
|
.test--pass .test__mark {
|
|
background: var(--teal);
|
|
color: #fff;
|
|
}
|
|
.test--fail .test__mark {
|
|
background: var(--rose);
|
|
color: #fff;
|
|
}
|
|
.test__name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.test__detail {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.test__detail code {
|
|
background: var(--code-bg);
|
|
padding: 1px 5px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 채점 요약 색 */
|
|
.ok {
|
|
color: var(--teal);
|
|
}
|
|
.ng {
|
|
color: var(--rose);
|
|
}
|
|
|
|
/* ─────────── 학습 증명서(수료증) ─────────── */
|
|
.cert-sheet {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
}
|
|
.cert-border {
|
|
border: 2px solid var(--primary);
|
|
border-radius: 14px;
|
|
padding: clamp(28px, 5vw, 52px);
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(120% 120% at 50% 0%, var(--primary-soft) 0%, transparent 60%),
|
|
var(--card);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.cert-brand {
|
|
font-size: 13px; font-weight: 800; letter-spacing: 0.18em;
|
|
text-transform: uppercase; color: var(--primary);
|
|
}
|
|
.cert-title {
|
|
font-size: clamp(24px, 5vw, 34px); font-weight: 800;
|
|
letter-spacing: 0.08em; margin-top: 14px; color: var(--ink);
|
|
}
|
|
.cert-sub {
|
|
font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
|
|
color: var(--muted); margin-top: 4px;
|
|
}
|
|
.cert-body {
|
|
margin: 26px auto 0; max-width: 52ch; font-size: 14.5px;
|
|
line-height: 1.85; color: var(--ink-soft, var(--muted));
|
|
}
|
|
.cert-name-row {
|
|
margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px;
|
|
}
|
|
.cert-name {
|
|
font-size: clamp(24px, 5vw, 32px); font-weight: 800; color: var(--ink);
|
|
border-bottom: 2px solid var(--primary); padding: 0 24px 6px;
|
|
}
|
|
.cert-track { font-size: 13px; font-weight: 700; color: var(--primary); }
|
|
.cert-stats {
|
|
margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
|
|
}
|
|
@media (max-width: 520px) { .cert-stats { grid-template-columns: repeat(2, 1fr); } }
|
|
.cert-stat {
|
|
border: 1px solid var(--line); border-radius: 10px; padding: 14px 8px;
|
|
display: flex; flex-direction: column; gap: 4px;
|
|
}
|
|
.cs-num { font-size: 26px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
|
|
.cs-den { font-size: 15px; font-weight: 600; color: var(--muted); }
|
|
.cs-label { font-size: 12.5px; color: var(--muted); }
|
|
.cert-foot {
|
|
margin-top: 34px; display: flex; justify-content: space-between; align-items: flex-end;
|
|
flex-wrap: wrap; gap: 16px; text-align: left;
|
|
}
|
|
.cert-date { font-size: 13px; color: var(--muted); }
|
|
.cert-sign { text-align: right; margin-left: auto; }
|
|
.cert-sign-line { font-size: 13px; color: var(--muted); }
|
|
.cert-sign-ceo { font-size: 16px; font-weight: 800; color: var(--ink); margin-top: 4px; }
|
|
.cert-seal { color: var(--rose); font-weight: 700; margin-left: 4px; }
|
|
|
|
/* 인쇄 시: 히어로·네비 등은 숨기고 증명서만 깔끔하게 */
|
|
@media print {
|
|
header, .hero, .topnav, nav, .btn { display: none !important; }
|
|
.cert-sheet { max-width: 100%; }
|
|
.cert-border { box-shadow: none; border-color: #333; }
|
|
body { background: #fff; }
|
|
}
|