/* ============================================================
   KM캠퍼스 현대 테마 레이어 (디자인 토큰 + 공통 컴포넌트 리프레시)
   레거시 userStyle.css 이후에 로드되어 시각적 톤을 갱신한다.
   구조/마크업은 유지하고 색·타이포·버튼·카드 등 표면을 현대화한다.
   ============================================================ */

:root {
  /* 브랜드 팔레트 — 파인사이버 로고 컬러(#00489c) 기준 */
  --km-primary:        #00489c;   /* 로고 메인 네이비블루 */
  --km-primary-dark:   #00386f;
  --km-primary-light:  #e3edf9;
  --km-accent:         #2f7fd6;   /* 밝은 블루 포인트 */
  --km-success:        #16a34a;
  --km-danger:         #dc2626;
  --km-warning:        #f59e0b;

  /* 중립 */
  --km-ink:            #1f2937;   /* 본문 텍스트 */
  --km-ink-soft:       #4b5563;
  --km-muted:          #9ca3af;
  --km-line:           #e5e7eb;   /* 경계선 */
  --km-bg:             #f8fafc;   /* 페이지 배경 */
  --km-surface:        #ffffff;   /* 카드 표면 */

  /* 형태 */
  --km-radius:         10px;
  --km-radius-sm:      6px;
  --km-shadow-sm:      0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --km-shadow:         0 4px 12px rgba(16,24,40,.08);
  --km-shadow-lg:      0 12px 32px rgba(16,24,40,.12);

  /* 타이포 */
  --km-font: 'Pretendard Variable','Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

/* ---- 기본 타이포/배경 톤 ---- */
body {
  font-family: var(--km-font);
  color: var(--km-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 링크 ---- */
a { transition: color .15s ease; }
a:hover { color: var(--km-primary-dark); }

/* ---- 버튼 계열(레거시 클래스 + 신규 km-btn) ---- */
.km-btn,
button.btn, .btn, input[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--km-font);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--km-radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.km-btn:active, .btn:active { transform: translateY(1px); }

.km-btn-primary,
.btn-primary {
  background: var(--km-primary);
  border-color: var(--km-primary);
  color: #fff;
  box-shadow: var(--km-shadow-sm);
}
.km-btn-primary:hover,
.btn-primary:hover { background: var(--km-primary-dark); border-color: var(--km-primary-dark); color:#fff; }

.km-btn-ghost {
  background: var(--km-surface);
  border-color: var(--km-line);
  color: var(--km-ink);
}
.km-btn-ghost:hover { border-color: var(--km-primary); color: var(--km-primary); }

/* ---- 카드 ---- */
.km-card {
  background: var(--km-surface);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  box-shadow: var(--km-shadow-sm);
  padding: 20px;
}
.km-card:hover { box-shadow: var(--km-shadow); }

/* ---- 배지 ---- */
.km-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--km-primary-light);
  color: var(--km-primary-dark);
}
.km-badge-archive { background: #ecfeff; color: #0e7490; }   /* 아카이브 훈련 표식 */

/* ---- 입력 폼 톤 ---- */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"],
select, textarea {
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius-sm);
  padding: 9px 12px;
  font-family: var(--km-font);
  color: var(--km-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--km-primary);
  box-shadow: 0 0 0 3px var(--km-primary-light);
}

/* ---- 테이블 톤(레거시 게시판/목록 가독성 향상) ---- */
table.km-table { border-collapse: collapse; width: 100%; }
table.km-table th {
  background: #f1f5f9;
  color: var(--km-ink);
  font-weight: 700;
  border-bottom: 2px solid var(--km-line);
  padding: 12px;
}
table.km-table td {
  border-bottom: 1px solid var(--km-line);
  padding: 12px;
}
table.km-table tr:hover td { background: #f8fafc; }

/* ---- 스크롤바(웹킷) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--km-muted); }

/* ---- 품질 디테일(디자인 시스템 페이지 한정 — body.kmHome 스코프, 레거시 무영향) ---- */
body.kmHome{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body.kmHome ::selection{ background:var(--km-primary); color:#fff; }
/* 키보드 포커스 링(마우스 클릭엔 미표시) */
body.kmHome a:focus-visible, body.kmHome button:focus-visible,
body.kmHome input:focus-visible, body.kmHome select:focus-visible, body.kmHome textarea:focus-visible{
  outline:2px solid var(--km-primary); outline-offset:2px; border-radius:4px; }
/* 카드/버튼 인터랙션 일관화 */
body.kmHome .kmCourseCard, body.kmHome .kmArchiveCard, body.kmHome .kmRoadCard{ transition:transform .16s ease, box-shadow .16s ease; }
body.kmHome .kmCourseCard:hover, body.kmHome .kmArchiveCard:hover, body.kmHome .kmRoadCard:hover{
  transform:translateY(-3px); box-shadow:0 10px 28px rgba(20,40,80,.10); }
/* 모션 최소화 선호 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  body.kmHome *{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}