/* base.css — reset, 디자인 토큰, 공통 타이포·버튼 (메인 시안 기준) */

:root {
  --bg: #f7fbfd;
  --surface: #ffffff;
  --surface-soft: #eef7fb;
  --surface-strong: #dff0f7;
  --border: rgba(15, 55, 84, 0.14);
  --text: #102438;
  --text-secondary: #587184;
  --accent: #0057b8;
  --accent-secondary: #00a0b8;
  --navy: #092642;
  --positive: #12866f;
  --warning: #cc7a00;
  --shadow: 0 22px 70px rgba(9, 38, 66, 0.16);
  --radius: 8px;
  --container: 1180px;
  /* 확장 토큰 (2026-06-10 사용자 색 결정) */
  --gold: #B5965A;          /* 샴페인 골드 — CTA 버튼 */
  --cta-bg: #172040;        /* CTA 바 배경(딥네이비) */
  --nav-text: #27485f;      /* 네비 글자색 */
  --border-neutral: #e5e5e5;/* 중립 회색 테두리(게시판) */
  --surface-muted: #f5f5f5; /* 중립 회색 배경(게시판 헤더) */
  --text-muted: #6e8192;    /* 빈 화면 안내 글자 */
  --danger: #c0392b;        /* 에러·필수 표시(관리자 admin.css 와 동일값) */
  --deep-navy: #061b30;     /* 푸터 배경 (navy 보다 더 어두움) */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  line-height: 1.55;
  letter-spacing: 0;
  font-kerning: normal;
  word-break: keep-all;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
.button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* QA(260807 3차) — 조건 미충족(승인 전·진도율 미달 등)일 때 site 전역에서 `<span class="button
   ghost" aria-disabled="true">텍스트</span>` 패턴을 써 왔는데, 이 규칙이 전에는 `.class-card`
   안에서만 있었다(content.css). 그 밖(02_lecture·06_mypage·04_archive·lecture_list 등)에서는
   활성 버튼과 똑같아 보여 눌러도 반응이 없는 게 "고장난 버튼"처럼 보였다 — 전역으로 올려
   흐리게+커서 변경으로 비활성 상태를 항상 시각적으로 구분한다. */
.button[aria-disabled="true"],
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.button.primary {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 14px 30px rgba(0, 87, 184, 0.25);
}

.button.secondary {
  color: var(--navy);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.button.ghost {
  color: var(--accent);
  background: #fff;
  border: 1px solid rgba(0, 87, 184, 0.18);
}

.button:hover {
  transform: translateY(-2px);
}

.button.primary:hover {
  background: #00499c;
  box-shadow: 0 18px 34px rgba(0, 87, 184, 0.32);
}

.button.secondary:hover {
  background: #fff;
  box-shadow: 0 14px 28px rgba(9, 38, 66, 0.16);
}

.button.ghost:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 14px 28px rgba(0, 87, 184, 0.18);
}

a:focus-visible,
button:focus-visible,
.button:focus-visible {
  outline: 3px solid rgba(0, 160, 184, 0.36);
  outline-offset: 4px;
}