/* =========================================
 * 1. Buttons
 * ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-md);
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-ease);

  /* 1. a태그 밑줄 제거 (hover에만 있어서 평소에 보일 수 있음) */
  text-decoration: none;

  /* 2. 버튼 태그가 폰트를 상속받지 않는 문제 해결 */
  font-family: inherit;
  font-size: var(--font-size-base);
  /* 1rem으로 명시적 고정 */

  /* 3. 높이 계산법 통일 (가장 중요!) */
  line-height: 1.5;

  /* 4. OS 기본 버튼 스타일(회색 입체감 등) 완전히 제거 */
  appearance: none;
  -webkit-appearance: none;
}

.btn:hover {
  text-decoration: none;
}

.btn--sm {
  padding: var(--spacing-xxs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

/* Variants (Primary, Secondary, etc.) */
.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
}

.btn--secondary {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
}

.btn--secondary:hover {
  background: var(--color-secondary-dark);
}

.btn--danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.btn--danger:hover {
  background: var(--color-danger-dark);
}

.btn--outline-secondary {
  color: var(--color-secondary);
  background: transparent;
  border-color: var(--color-secondary);
}

.btn--outline-secondary:hover {
  background: var(--color-secondary);
  color: #fff;
}

/* =========================================
 * 2. Forms & Inputs
 * ========================================= */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.form-label.required::after {
  content: " *";
  color: var(--color-danger);
  margin-left: 2px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  /* 패딩을 약간 늘려 시원하게 */
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-gray-900);
  /* 입력 텍스트 진하게 */
  background-color: var(--color-white);
  background-clip: padding-box;
  /* 테두리 명확하게 부여 */
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-sm);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* 입력창 포커스 시 강조 */
.form-control:focus {
  color: var(--color-gray-900);
  background-color: var(--color-white);
  /* 브랜드 컬러로 테두리 강조 및 그림자 */
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
  /* 부드러운 외곽선 */
}

select.form-control {
  /* 1. 브라우저 기본 화살표 제거 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 2. 커스텀 화살표 (SVG Data URI 사용 - 별도 이미지 파일 불필요) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;

  /* 3. 화살표 공간 확보 */
  padding-right: 2.5rem;
  cursor: pointer;
}

select option {
  background-color: var(--color-white);
  /* 배경을 강제로 흰색으로 */
  color: var(--color-gray-900);
  /* 글자색 진하게 */
  padding: 10px;
  /* 여백 확보 (일부 브라우저 지원) */
  font-size: 0.95rem;
}

/* Select가 비활성화 되었을 때 */
select.form-control:disabled {
  background-color: var(--color-gray-200);
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
 * [MISSING FIX] Textarea Custom Style (누락된 부분)
 * ------------------------------------------------------------------ */
textarea.form-control {
  min-height: 100px;
  /* 기본 높이 확보 */
  resize: vertical;
  /* 세로로만 리사이즈 허용 */
}

/* Checkbox & Radio */
.form-check {
  position: relative;
  padding-left: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
}

.form-check__input {
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  appearance: none;
  border: 1px solid var(--color-gray-400);
  background: #fff;
}

.form-check__input[type="checkbox"] {
  border-radius: var(--border-radius-sm);
}

.form-check__input[type="radio"] {
  border-radius: 50%;
}

.form-check__input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================
 * 3. Cards & Tables
 * ========================================= */
/* Modern Card */
/* Modern Card */
.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  /* 매우 연한 테두리 */
  border-radius: var(--border-radius-lg);
  /* 둥근 모서리 강화 */
  box-shadow: var(--box-shadow-sm);
  /* 기본: 얕은 그림자 */
  transition: all 0.2s ease;
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
}

.card:hover {
  box-shadow: var(--box-shadow-md);
  /* 호버 시 약간 뜸 */
  border-color: var(--color-gray-300);
}

/* Blog Card Special Styling */
.card--blog {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0;
  box-shadow: var(--box-shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card--blog:hover {
  transform: translateY(-5px);
  box-shadow: var(--box-shadow-xl);
}

.card--blog .card__image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 60%;
  /* 5:3 Aspect Ratio (Refined) */
  overflow: hidden;
  background-color: var(--color-gray-100);
}

.card--blog .card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card__image--placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.card--blog:hover .card__image {
  transform: scale(1.05);
}


.card--blog .card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.card__header {
  padding: var(--spacing-md) var(--spacing-lg);
  /* 헤더 하단 구분선 강화 */
  border-bottom: 1px solid var(--color-gray-200);
  background-color: var(--color-white);
  /* 또는 아주 연한 회색 var(--color-gray-50) */
}

.card__title {
  margin: 0;
  font-size: var(--font-size-h5);
}

.card__body {
  padding: var(--spacing-md);
}

.card__footer {
  padding: var(--spacing-md);
  background: var(--color-gray-100);
  border-top: 1px solid var(--color-gray-200);
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
  background: #fff;
}

.table th,
.table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-200);
  text-align: left;
}

.table th {
  font-weight: 600;
  color: var(--color-gray-700);
  background-color: var(--color-gray-50);
  /* 헤더 배경색 추가 */
  border-bottom: 2px solid var(--color-gray-200);
  /* 테두리 연하게 */
  text-transform: uppercase;
  /* 헤더 대문자 (선택 사항) */
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.table--hover tbody tr:hover {
  background: var(--color-gray-100);
}

/* =========================================
 * 4. Alerts & Badges
 * ========================================= */
.alert {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-radius: var(--border-radius-sm);
  border: 1px solid transparent;
}

.alert--success {
  color: var(--color-success-dark);
  background: var(--color-success-light);
  border-color: var(--color-success);
}

.alert--warning {
  color: var(--color-warning-dark);
  background: var(--color-warning-light);
  border-color: var(--color-warning);
}

.alert--danger {
  color: var(--color-danger-dark);
  background: var(--color-danger-light);
  border-color: var(--color-danger);
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #fff;
}

.status-badge--success {
  background: var(--color-success);
}

.status-badge--in-progress {
  background: var(--color-info);
}

/* =========================================
 * 5. Kanban Board
 * ========================================= */
.kanban-board {
  display: flex;
  overflow-x: auto;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--color-gray-200);
  border-radius: var(--border-radius-md);

  /* [핵심 변경] 최소 높이가 아니라 '고정 높이'를 줍니다. */
  height: 600px;
  /* 대시보드에서 적당한 높이 */
  min-height: auto;
  /* 기존 min-height 제거 */
  overflow: hidden;
  /* 둥근 모서리 밖으로 내용 튀어나감 방지 */
}

.kanban-board__column {
  flex: 1;
  /* 3개 컬럼 균등 분할 (width 고정 대신 flex 사용 권장) */
  min-width: 280px;
  /* 너무 작아짐 방지 */

  padding: var(--spacing-md);
  background-color: var(--color-gray-100);
  border-radius: var(--border-radius-sm);
  display: flex;
  flex-direction: column;

  /* 컬럼 자체의 높이도 부모(보드)에 맞춤 */
  height: 100%;
}

/* 헤더: 샘플의 디자인(밑줄, 여백) 계승 + Flex 배치 추가 */
.kanban-board__column-header {
  flex-shrink: 0;
  /* 높이 줄어듦 방지 */
  margin-bottom: var(--spacing-md);
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid var(--color-gray-300);
  padding-bottom: var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 헤더 제목 래퍼 (아이콘 + 텍스트) */
.kanban-board__column-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* 상태별 헤더 색상 포인트 */
.kanban-board__column-title--doing {
  color: var(--color-primary);
}

.kanban-board__column-title--done {
  color: var(--color-success);
}

/* 헤더 배지 (카운트) */
.kanban-board__column-badge {
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 50rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-600);
}

/* 태스크 리스트 컨테이너 */
.kanban-board__column-tasks {
  flex-grow: 1;
  overflow-y: auto;
  /* 내용이 넘치면 여기만 스크롤 생김 */
  overflow-x: hidden;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-right: 4px;
  /* 스크롤바와 카드 사이 간격 */

  /* 스크롤바 디자인 (크롬/사파리) */
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-400) transparent;
}

/* 웹킷 브라우저 스크롤바 커스텀 */
.kanban-board__column-tasks::-webkit-scrollbar {
  width: 6px;
}

.kanban-board__column-tasks::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-400);
  border-radius: 4px;
}

.kanban-board__column-tasks::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 게스트 모드 시 드래그 방지 시각 효과 */
.kanban-board__column-tasks.guest-mode {
  opacity: 0.8;
  cursor: not-allowed;
}

/* --- Task Card (기존 유지) --- */
.task-card {
  background-color: var(--color-white);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  box-shadow: var(--box-shadow-sm);
  cursor: grab;
  transition: var(--transition-ease);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  /* 요소 간 간격 일괄 처리 */
}

.task-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--box-shadow-md);
}

/* 1. 헤더 (우선순위) */
.task-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 2. 제목 */
.task-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.4;
}

.task-card__title a {
  text-decoration: none;
  color: inherit;
}

.task-card__title a:hover {
  text-decoration: underline;
}

/* 3. 메타 정보 (하단 영역) */
.task-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* 바닥 라인 맞춤 */
  margin-top: var(--spacing-xs);
}

/* 태그 그룹 */
.task-card__tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* 날짜 */
.task-card__date {
  font-size: 0.8rem;
  color: var(--color-gray-500);
  white-space: nowrap;
}

/* 담당자 아바타 */
.task-card__assignee-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-gray-300);
  background-size: cover;
  background-position: center;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-gray-200);
  /* 미세한 테두리 */

  /* 텍스트(이니셜)일 경우 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
}

.task-card__badges {
  display: flex;
  gap: 4px;
}

.task-card__priority {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.task-card__priority--high {
  background-color: var(--color-danger);
}

.task-card__priority--medium {
  background-color: var(--color-warning);
}

.task-card__priority--success {
  background-color: var(--color-success);
}

.task-card__priority--low {
  background-color: var(--color-secondary);
}

/* Django Message Alert 대응 */
.alert-container {
  margin-bottom: var(--spacing-md);
}

.alert {
  position: relative;
  /* 닫기 버튼 위치 잡기용 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 닫기 버튼 (Bootstrap btn-close 대체) */
.alert__close-btn {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  padding: 0 var(--spacing-xs);
}

.alert__close-btn:hover {
  opacity: 1;
}

/* Django 기본 태그(error)를 우리 시스템(danger) 색상으로 매핑 */
.alert--error {
  color: var(--color-danger-dark);
  background-color: var(--color-danger-light);
  border-color: var(--color-danger);
}

/* 1. 공통 위젯 컨테이너 */
.widget {
  margin-bottom: var(--spacing-lg);
}

.widget__title {
  font-size: var(--font-size-h6);
  font-weight: 700;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 2. 포스트잇 (Post-it) */
.widget-postit {
  background-color: #fff9c4;
  /* 연한 노란색 */
  padding: var(--spacing-md);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
  /* 손글씨 느낌 폰트(선택) */
  color: #5d4037;
  font-size: 0.9rem;
  line-height: 1.5;
  transform: rotate(-1deg);
  /* 살짝 기울여서 자연스럽게 */
  transition: transform 0.2s;
}

.widget-postit:hover {
  transform: rotate(0deg) scale(1.02);
}

/* 3. 미니 캘린더 (Simple Calendar Wrapper) */
.widget-calendar {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
  text-align: center;
}

/* 실제 달력 라이브러리(FullCalendar 등) 스타일은 라이브러리 CSS가 담당하지만, 
   컨테이너 크기를 제어하기 위해 사용 */

/* 4. 진행 중 작업 목록 (Compact List) */
.widget-task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget-task-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px dashed var(--color-gray-200);
  font-size: var(--font-size-sm);
}

.widget-task-item:last-child {
  border-bottom: none;
}

.widget-task-item__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.widget-task-item__text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 긴 글자 ... 처리 */
}

/* [NEW] Sidebar Stats Box (대시보드 미니 통계) */
.widget-stats-box {
  background-color: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
  text-align: center;
  box-shadow: var(--box-shadow-sm);
}

.widget-stats-count {
  font-size: 1.25rem;
  /* fs-5 대체 */
  font-weight: 700;
  margin-bottom: 2px;
}

.widget-stats-label {
  font-size: 0.75rem;
  /* small 대체 */
  color: var(--color-gray-600);
}

/* [NEW] Sidebar Memo Item (메모 리스트 아이템) */
.widget-memo-item {
  background-color: #fff;
  border: 1px solid var(--color-gray-200);
  border-left-width: 4px;
  /* 강조선 */
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--box-shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition-ease);
}

/* 완료 상태 */
.widget-memo-item--done {
  border-left-color: var(--color-success);
  opacity: 0.7;
}

.widget-memo-item--done .widget-memo-content {
  text-decoration: line-through;
  color: var(--color-gray-500);
}

/* 미완료 상태 */
.widget-memo-item--active {
  border-left-color: var(--color-warning);
}

.widget-memo-item--active .widget-memo-content {
  font-weight: 600;
}

/* =========================================
 * [NEW] Sidebar Widgets (Refactored)
 * ========================================= */

/* 1. 통계 위젯 (긴급/마감) */
.widget-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.widget-stats-box {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
  box-shadow: var(--box-shadow-sm);
}

.widget-stats-count {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.widget-stats-count--danger {
  color: var(--color-danger);
}

.widget-stats-count--primary {
  color: var(--color-primary);
}

.widget-stats-label {
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

/* 2. Today's Focus 위젯 */
.widget-card {
  background-color: var(--color-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-sm);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

.widget-card__header {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-100);
  background-color: var(--color-white);
}

.widget-card__title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-gray-600);
  font-weight: 700;
}

.widget-list {
  display: flex;
  flex-direction: column;
}

.widget-list__item {
  padding: var(--spacing-xs) var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-100);
}

.widget-list__item:last-child {
  border-bottom: none;
}

.widget-list__link {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--color-gray-900);
  transition: background-color 0.2s;
}

.widget-list__link:hover {
  background-color: var(--color-gray-100);
}

.widget-list__icon {
  margin-right: var(--spacing-xs);
  font-size: 1.1rem;
  color: var(--color-primary);
}

.widget-list__text {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  /* CSS로 이동 */
}

.widget-badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--spacing-xs);
  flex-shrink: 0;
}

.widget-empty-msg {
  text-align: center;
  color: var(--color-gray-500);
  font-size: 0.85rem;
  padding: var(--spacing-md) 0;
}

/* 3. 구분선 */
.widget-separator {
  margin: var(--spacing-lg) 0;
  border: 0;
  border-top: 1px solid var(--color-gray-300);
  opacity: 0.5;
}

/* 4. 메모 위젯 (Sticky) */
.widget-sticky-container {
  position: sticky;
  top: 20px;
  z-index: 1;
}

.widget-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-gray-300);
  display: flex;
  align-items: center;
}

.widget-section-icon {
  margin-right: var(--spacing-xs);
  color: var(--color-warning);
}

.widget-input-group {
  display: flex;
  margin-bottom: var(--spacing-md);
  gap: 0;
  /* 버튼과 인풋을 붙이기 위해 */
}

/* 메모 리스트 */
.widget-memo-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.widget-memo-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left-width: 4px;
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs);
  box-shadow: var(--box-shadow-sm);
}

.widget-memo-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget-memo-link {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  /* 텍스트 넘침 방지 */
  color: var(--color-gray-900);
}

.widget-memo-icon {
  margin-right: var(--spacing-xs);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.widget-memo-text {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-memo-delete {
  margin-left: var(--spacing-xs);
  color: var(--color-danger);
  opacity: 0.3;
  transition: opacity 0.2s;
  cursor: pointer;
}

.widget-memo-delete:hover {
  opacity: 1;
}

/* 메모 상태별 스타일 */
.widget-memo-item--active {
  border-left-color: var(--color-warning);
}

.widget-memo-item--active .widget-memo-icon {
  color: var(--color-warning);
}

.widget-memo-item--done {
  border-left-color: var(--color-success);
  opacity: 0.7;
}

.widget-memo-item--done .widget-memo-icon {
  color: var(--color-success);
}

.widget-memo-item--done .widget-memo-text {
  text-decoration: line-through;
  color: var(--color-gray-500);
}

/* 메모 입력 폼 미세조정 */
.widget-input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.widget-input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: var(--color-gray-800);
  color: var(--color-white);
}

/* =========================================
 * [NEW] Navbar Components
 * ========================================= */

/* 1. Brand (Logo) */
.navbar-brand-custom {
  font-family: sans-serif;
  font-weight: 800;
  color: var(--color-gray-900);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.brand-badge {
  background-color: var(--color-gray-900);
  color: var(--color-white);
  font-size: 0.65rem;
  padding: 4px 6px 2px;
  /* 상단 패딩 보정 */
  border-radius: var(--border-radius-sm);
  font-weight: 400;
}

/* 2. Navigation Items */
.nav-link-custom {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-gray-800);
  font-weight: 600;
  font-size: 0.85rem;
  transition: var(--transition-ease);
}

.nav-link-custom:hover,
.nav-link-custom.active-link,
.nav-link-custom[aria-expanded="true"] {
  color: var(--color-primary);
  background-color: var(--color-gray-100);
  border-radius: var(--border-radius-sm);
}

.nav-icon {
  font-size: 0.9rem;
  color: var(--color-gray-600);
}

.nav-link-custom:hover .nav-icon {
  color: var(--color-primary);
}

/* 3. Dropdown Menu Custom */
.dropdown-menu-custom {
  border: 0;
  box-shadow: var(--box-shadow-card);
  border-radius: var(--border-radius-md);
  margin-top: 0;
  padding: var(--spacing-xs) 0;
  background-color: var(--color-white);
}

.dropdown-item-custom {
  padding: var(--spacing-xs) var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-gray-700);
  font-size: 0.85rem;
  transition: background-color 0.2s;
}

.dropdown-item-custom:hover,
.dropdown-item-custom.active {
  background-color: var(--color-gray-100);
  color: var(--color-primary);
}

.dropdown-item-icon {
  font-size: 0.8rem;
  opacity: 0.5;
}

/* 4. User Profile Area */
.user-profile-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-gray-900);
}

.user-greeting {
  font-size: 0.7rem;
  color: var(--color-gray-600);
}

.user-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

.dropdown-header-custom {
  font-size: 0.7rem;
  color: var(--color-gray-500);
  padding: var(--spacing-xs) var(--spacing-md);
}

/* 5. Guest Badge */
.guest-badge {
  display: flex;
  align-items: center;
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  padding: 4px 10px;
  border-radius: 50rem;
  /* pill shape */
  font-size: 0.7rem;
  color: var(--color-gray-600);
  transition: var(--transition-ease);
}

.guest-badge:hover {
  background-color: var(--color-gray-200);
}

/* =========================================
 * [NEW] Dropdown Interaction & Animation
 * ========================================= */

/* 1. 드롭다운 부모 컨테이너 (위치 기준점) */
.custom-dropdown {
  position: relative;
  /* 자식(.dropdown-menu)의 기준점이 됨 */
  height: 100%;
  display: flex;
  align-items: center;
}

/* 2. 드롭다운 메뉴 (숨김 상태 기본) */
.custom-dropdown .dropdown-menu {
  /* 위치 및 크기 */
  position: absolute;
  top: 100%;
  /* 부모 바로 밑에 위치 */
  left: 0;
  min-width: 200px;
  /* 너무 좁지 않게 최소 너비 설정 */
  z-index: 1000;

  /* 디자인 */
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: var(--spacing-xs) 0;
  margin-top: var(--spacing-xs);
  /* 살짝 띄우기 */

  /* 숨김 처리 (애니메이션 준비) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 3. Hover Interaction (마우스 올렸을 때 보이기) */
.custom-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 4. 드롭다운 아이템 디자인 */
.custom-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-gray-700);
  font-size: 0.9rem;
  transition: background-color 0.2s;
  white-space: nowrap;
  /* 줄바꿈 방지 */
}

.custom-dropdown .dropdown-item:hover {
  background-color: var(--color-gray-100);
  color: var(--color-primary);
  text-decoration: none;
}

.custom-dropdown .dropdown-item.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

/* 모바일 대응 (선택사항: 모바일에서는 숨기고 클릭 필요 시 추가 JS 필요하지만 일단 Hover 유지) */
@media (max-width: 992px) {
  .custom-dropdown .dropdown-menu {
    position: static;
    /* 모바일에서는 그냥 아래로 밀어내기 */
    box-shadow: none;
    border: none;
    background-color: var(--color-gray-100);
    margin-top: 0;
    padding-left: var(--spacing-md);

    /* 항상 보이게 하거나 JS로 토글 (여기서는 CSS Hover 유지) */
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    /* 기본 숨김 */
  }

  .custom-dropdown:hover .dropdown-menu {
    display: block;
  }
}

/* =========================================
 * [NEW] Navbar Components (Guest Badge Animation)
 * ========================================= */

/* 1. 애니메이션 정의 (Bootstrap spinner-grow 재현) */
@keyframes guest-pulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* 2. 게스트 스피너 스타일 */
.guest-spinner {
  display: inline-block;
  width: 8px;
  /* 0.5rem 크기 */
  height: 8px;
  margin-right: 6px;

  background-color: var(--color-danger);
  /* 빨간색 */
  border-radius: 50%;
  /* 원형 */

  /* 애니메이션 적용: 1초마다 무한 반복 */
  animation: guest-pulse 1s linear infinite;
}

/* =========================================
 * [FIX] Dashboard Specific Styles (인라인 제거분)
 * ========================================= */

/* 1. 대시보드 상단 카드 (기존 style="border-radius: 20px..." 제거) */
.dashboard-card {
  border: 0;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  /* 1rem (약 16px) 또는 별도 변수 */
  overflow: visible;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  background-color: var(--color-white);
}

/* 2. 빠른 업무 등록 폼 (기존 style="height: 60px" 제거) */
.quick-work-form {
  display: flex;
  align-items: center;
  height: 60px;
  /* 고정 높이 CSS로 이관 */
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
}

/* 3. 인풋 아이콘 위치 (기존 style="z-index..." 제거) */
.input-icon-wrapper {
  flex-grow: 1;
  position: relative;
  height: 100%;
}

.input-icon-overlay {
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  color: var(--color-primary);
  opacity: 0.5;
  pointer-events: none;
  /* 클릭 통과 */
}

.folder-icon-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-left: 0.5rem;
  color: var(--color-secondary);
  font-size: 0.85rem;
  z-index: 1;
  /* z-index CSS로 이관 */
}

/* 4. 인풋 필드 (기존 style="font-size: 1.1rem..." 제거) */
.quick-input-field {
  height: 100%;
  border: 0;
  background-color: transparent;
  padding-left: 3rem;
  /* 아이콘 공간 확보 */
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gray-900);
  width: 100%;
}

.quick-input-field:focus {
  outline: none;
  box-shadow: none;
}

/* 5. 우측 액션 영역 (프로젝트 선택 등) */
.quick-form-actions {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-md);
  gap: var(--spacing-xs);
  background-color: #f9fafb;
  border-top-right-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
}

/* 6. 프로젝트 셀렉트 박스 (기존 style="width: 120px..." 제거) */
.project-select-custom {
  /* 1. 박스 형태 잡기 (테두리 추가) */
  height: 36px;
  width: 140px;
  border: 1px solid var(--color-gray-300);
  /* 경계선 추가 */
  border-radius: 12px;
  background-color: var(--color-white);

  /* 2. 텍스트 스타일 */
  color: var(--color-gray-800);
  font-weight: 700;
  font-size: 0.8rem;

  /* 3. 내부 여백 (아이콘 공간 확보) */
  padding-left: 1.8rem;
  /* 좌측 폴더 아이콘 공간 */
  padding-right: 2rem;
  /* [핵심] 우측 화살표 아이콘 공간 */

  /* 4. [핵심] 드롭다운 화살표 추가 (SVG) */
  cursor: pointer;
  appearance: none;
  /* 브라우저 기본 스타일 제거 */
  -webkit-appearance: none;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  /* 우측 정렬 */
  background-size: 10px 8px;
  /* 화살표 크기 */

  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  /* 살짝 입체감 */
}

.project-select-custom option {
  background-color: var(--color-white);
  color: var(--color-gray-900);
}

/* 호버 효과: 사용자가 올렸을 때 반응 */
.project-select-custom:hover {
  border-color: var(--color-primary);
  /* 테두리 강조 */
  background-color: var(--color-gray-100);
  /* 배경색 변경 */
  color: var(--color-primary);
}

/* 포커스 효과: 키보드 이동 시 */
.project-select-custom:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.15);
  /* 파란색 글로우 */
}

/* 7. 칸반 헤더 (기존 style 제거) */
.kanban-col-wrapper {
  padding: var(--spacing-xs);
  height: 100%;
}

/* 8. 시스템 태그 (동적 컬러용 CSS 변수 활용) */
.system-tag-label {
  /* Flex 대신 Inline-Block 사용 (말줄임표 ... 적용을 위해) */
  display: inline-block;
  vertical-align: middle;

  /* [핵심] 길어지면 자르고 ... 처리 */
  max-width: 110px;
  /* 태그 최대 너비 제한 (140px 래퍼 안에 쏙 들어감) */
  white-space: nowrap;
  /* 줄바꿈 금지 (항상 한 줄 유지) */
  overflow: hidden;
  /* 넘치는 텍스트 숨김 */
  text-overflow: ellipsis;
  /* 말줄임표(...) 표시 */

  padding: 4px 10px;
  border-radius: 50rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  background-color: var(--color-white);
  border: 1px solid transparent;
  color: var(--sys-color, #333);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/* 아이콘 수직 정렬 보정 */
.system-tag-label i {
  vertical-align: middle;
  margin-top: -2px;
  /* 미세 조정 */
}

/* [추가] Focus 상태 (키보드 탭 이동 시) */
.system-tag-label.focused {
  /* 기존 JS: label.style.boxShadow = "0 0 0 3px rgba(55, 136, 216, 0.3)" */
  box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.3);

  /* 기존 JS: label.style.borderColor = "#3788d8" */
  border-color: #3788d8;
}

/* (참고) 선택된(Checked) 상태는 JS나 :checked 셀렉터로 처리되므로, 
   여기서는 테두리 색상만 sys-color로 덮어씌웁니다. */
.btn-check:checked+.system-tag-label {
  border-color: var(--sys-color);
  box-shadow: none;
}

.system-tag-wrapper {
  position: relative;
  outline: none;
  /* [핵심] 브라우저 기본 검은 테두리 제거 */
}

/* 3. [핵심] 래퍼가 포커스(Tab)를 받았을 때 라벨 스타일 */
.system-tag-wrapper:focus .system-tag-label {
  box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.3);
  /* 파란색 글로우 */
  border-color: #3788d8;
  /* 파란색 테두리 */
}

.system-tag-wrapper:focus .btn-check:checked+.system-tag-label {
  box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.3);
  border-color: #3788d8;
  /* 테두리도 파란색 유지 */
}

.system-tag-wrapper:hover::after {
  content: attr(data-title);
  /* HTML의 data-title 속성 값을 가져옴 */

  position: absolute;
  top: 100%;
  /* 래퍼 바로 아래 */
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;

  width: max-content;
  max-width: 250px;
  white-space: normal;
  /* 툴팁 내부는 줄바꿈 허용 */
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  background-color: rgba(33, 37, 41, 0.95);
  /* 다크 그레이 배경 */
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;

  z-index: 10000;
  pointer-events: none;
  /* 툴팁이 마우스 이벤트를 가리지 않도록 */

  opacity: 0;
  animation: tooltip-fadeInDown 0.2s forwards;
  /* 등장 애니메이션 */
}

/* 툴팁 등장 키프레임 */
@keyframes tooltip-fadeInDown {
  from {
    opacity: 0;
    transform: translate(-50%, -5px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* =========================================
 * [NEW] Badge Styles (Refactored)
 * ========================================= */

/* 테두리만 있는 배지 (Task Type 등) */
.status-badge--outline {
  background-color: transparent;
  border: 1px solid var(--color-gray-400);
  color: var(--color-gray-600);
}

/* 시스템 배지 (기존 회색 배경) */
.status-badge--gray {
  background-color: var(--color-gray-200);
  color: var(--color-gray-800);
  border: 1px solid var(--color-gray-300);
}

/* 숨겨진 태그 (기본 상태) */
.hidden-tag {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: -4px;
  /* 살짝 겹쳐 보이게 */
  padding: 0;
  /* 내부 여백도 없애야 완전히 숨겨짐 */
  border: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* 쫀득한 텐션 */
}

/* 컨테이너에 마우스를 올리거나 포커스가 가면 펼쳐짐 */
.system-tags-container:hover .hidden-tag,
.system-tags-container:focus-within .hidden-tag {
  max-width: 140px;
  /* 라벨 길이에 맞춰 넉넉하게 */
  opacity: 1;
  margin-left: 4px;
  overflow: visible !important;
  /* 툴팁 등이 잘리지 않게 */
  padding: 0 4px;
  /* 여백 복구 (필요 시 조정) */
}

/* (참고) 컨테이너 간격 조정: 애니메이션을 위해 gap을 줄이거나 없애는 것을 권장 */
.system-tags-container {
  gap: 0 !important;
  /* 애니메이션 마진으로 간격 제어 */
  padding-right: 10px;
  /* 펼쳐질 때 공간 확보 */
}

/* =========================================
 * [FIX] System Tag Container & Empty Msg
 * ========================================= */

.system-tags-container {
  display: flex;
  /* [핵심] 가로 나열 */
  align-items: center;
  /* 수직 중앙 정렬 */
  gap: 0;
  /* 애니메이션을 위해 갭 제거 (마진으로 제어) */
  padding-right: 10px;
  /* 펼쳐질 공간 확보 */
  min-height: 40px;
  /* 높이 확보 */
  transition: all 0.3s ease;
}

/* 시스템 없음 메시지 스타일 (인라인/Bootstrap 대체) */
.system-tag-empty-msg {
  color: var(--color-gray-500);
  /* text-muted 대체 */
  font-size: 0.8rem;
  /* small 대체 */
  padding-left: var(--spacing-xs);
  /* ps-2 대체 */
  white-space: nowrap;
}

/* (참고) 기존 애니메이션 관련 스타일은 그대로 유지하거나 아래 내용과 함께 두세요 */
.system-tags-container:hover .hidden-tag,
.system-tags-container:focus-within .hidden-tag {
  max-width: 140px;
  opacity: 1;
  margin-left: 4px;
  overflow: visible !important;
  padding: 0 4px;
}

/* =========================================
 * [NEW] List & Search Components
 * ========================================= */

/* 1. 검색 및 필터 영역 */
.search-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  align-items: center;
  justify-content: space-between;
}

/* 검색 입력창 그룹 (Input Group 대체) */
.search-input-group {
  display: flex;
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-sm);
  padding: 4px 8px;
  width: 100%;
  max-width: 320px;
  transition: var(--transition-ease);
}

.search-input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.15);
}

.search-input-group input {
  border: none;
  background: transparent;
  padding: 6px;
  width: 100%;
  outline: none;
  font-size: 0.95rem;
}

.search-input-group button {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 4px;
}

/* 2. 탭 스타일 버튼 (Nav Tabs 대체) */
.nav-tab-group {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--spacing-lg);
  overflow-x: auto;
  padding-bottom: 8px;
}

.nav-tab-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  color: var(--color-gray-600);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-ease);
  white-space: nowrap;
}

.nav-tab-btn:hover {
  background-color: var(--color-gray-100);
}

.nav-tab-btn.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* 3. 페이지네이션 (Pagination) */
.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 4px;
  margin-top: var(--spacing-xl);
  padding: 0;
}

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition-ease);
}

.page-link:hover:not(.disabled) {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

.page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-gray-100);
}

/* =========================================
 * [NEW] Form Components (Toggle & Editor)
 * ========================================= */

/* 1. 토글 스위치 (Bootstrap form-switch 대체) */
.toggle-switch-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--color-gray-300);
  border-radius: 50rem;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 체크박스가 체크되었을 때 */
input[type="checkbox"]:checked+.toggle-switch {
  background-color: var(--color-primary);
}

input[type="checkbox"]:checked+.toggle-switch::after {
  transform: translateX(20px);
}

/* 실제 체크박스는 숨김 */
.toggle-input {
  display: none;
}

/* 2. 코드 에디터 컨테이너 */
.code-editor-container {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

/* 3. 상세 화면 코드 블록 (<pre>) */
.code-block {
  background-color: #282c34;
  /* Dark Theme bg */
  color: #abb2bf;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  overflow-x: auto;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

/* =========================================
 * [MISSING] From Style Guide (Form & Utils)
 * ========================================= */

/* 1. 인라인 폼 그룹 (날짜 ~ 날짜 등 가로 배치) */
.form-control-inline-group {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

/* 모바일에서는 세로로 떨어지게 처리 */
@media (max-width: 768px) {
  .form-control-inline-group {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 2. 체크박스/라디오 그룹 (가로 배치) */
.form-check-group {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-xs) 0;
  flex-wrap: wrap;
}

/* 3. 카드 헤더 양쪽 정렬 유틸리티 */
.card__header--align-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 4. 유틸리티: 오른쪽 여백 자동 (버튼 좌측 정렬 시 사용) */
.u-mr-auto {
  margin-right: auto !important;
}

/* =========================================
 * [NEW] List Component Additions
 * ========================================= */

/* 하위 업무 카운트 배지 (회색) */
.badge-count {
  margin-left: var(--spacing-xs);
  font-size: 0.75rem;
  color: var(--color-gray-500);
  background-color: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* =========================================
 * [FINAL] Form Utilities & Colors
 * ========================================= */

/* 1. Text Colors */
.u-text-primary {
  color: var(--color-primary) !important;
}

.u-text-success {
  color: var(--color-success) !important;
}

/* 2. Layout & Display */
.u-d-none {
  display: none !important;
}

.u-inline-block {
  display: inline-block !important;
}

.u-justify-end {
  justify-content: flex-end !important;
}

.u-w-auto {
  width: auto !important;
}

.u-h-400 {
  height: 400px !important;
}

/* 에디터 높이 */

/* 3. Spacing & Borders */
.u-gap-lg {
  gap: 2rem !important;
}

.u-rounded-sm {
  border-radius: var(--border-radius-sm) !important;
}

/* 4. Dark Input Style (기술 명세용) */
.u-input-dark {
  background-color: #282c34 !important;
  color: #abb2bf !important;
  border: 1px solid var(--color-gray-300) !important;
}

.u-input-dark::placeholder {
  color: #5c6370 !important;
}

/* =========================================
 * [MISSING] Work List Page Specifics
 * ========================================= */

/* 1. 페이지 헤더 (타이틀 + 설명) */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--spacing-lg);
}

.page-header__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-gray-900);
}

.page-header__desc {
  margin: 4px 0 0;
  color: var(--color-gray-600);
  font-size: 0.9rem;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
}

/* 2. 필터 칩 (Status 필터 버튼) */
.filter-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.filter-label {
  font-weight: 700;
  margin-right: var(--spacing-sm);
  color: var(--color-gray-800);
}

.filter-chip {
  padding: 6px 12px;
  border-radius: 50rem;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-chip:hover {
  background-color: var(--color-gray-100);
}

/* 활성화 된 필터 칩 */
input[type="checkbox"]:checked+.filter-chip,
.filter-chip.active {
  background-color: var(--color-gray-800);
  color: var(--color-white);
  border-color: var(--color-gray-800);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 실제 체크박스 숨김 */
.filter-input-hidden {
  display: none;
}


/* 3. 리스트 아이템 레이아웃 (Modern Card Row) */
.work-list-container {
  /* 컨테이너 자체의 테두리는 제거하고, 각 아이템을 카드로 만듦 */
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.work-list-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-white);

  /* Modern Card Style for Items */
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-sm);

  transition: all 0.2s ease;
}

.work-list-item:hover {
  background-color: var(--color-white);
  /* 배경색 변경보다는 그림자와 위치 이동으로 강조 */
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-md);
  border-color: var(--color-primary-light);
  z-index: 1;
  /* 호버 시 다른 요소 위에 뜨도록 */
}

/* 리스트 내부 컬럼 너비 설정 */
.work-item-status {
  width: 100px;
  text-align: center;
  margin-right: var(--spacing-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-item-content {
  flex: 1;
  min-width: 0;
  /* 말줄임표(...) 작동 필수 조건 */
  display: flex;
  flex-direction: column;
}

.work-item-meta {
  width: 140px;
  text-align: right;
  margin-left: var(--spacing-md);
  color: var(--color-gray-500);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* 모바일 리스트 대응 */
@media (max-width: 768px) {
  .work-list-item {
    flex-wrap: wrap;
  }

  .work-item-status {
    margin-bottom: var(--spacing-xs);
  }

  .work-item-meta {
    width: 100%;
    text-align: left;
    margin-left: 0;
    margin-top: var(--spacing-xs);
    display: flex;
    gap: var(--spacing-md);
  }
}

/* 4. 트리 구조 뎁스 (Depth) & 연결선 */
.depth-1 {
  padding-left: 30px !important;
}

.depth-2 {
  padding-left: 60px !important;
}

.depth-3 {
  padding-left: 90px !important;
}

/* 자식 노드 연결선 (ㄴ 모양) */
.child-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-left: 2px solid var(--color-gray-400);
  border-bottom: 2px solid var(--color-gray-400);
  margin-right: 8px;
  margin-bottom: 4px;
}

/* =========================================
 * [NEW] Portfolio Landing Components
 * ========================================= */

/* 1. 다크 모드 버튼 (포트폴리오 전용) */
.btn--dark {
  background-color: var(--color-gray-900);
  color: var(--color-white);
  border: 1px solid var(--color-gray-900);
}

.btn--dark:hover {
  background-color: var(--color-black);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 2. 타이핑 커서 애니메이션 */
.typing-cursor::after {
  content: '|';
  display: inline-block;
  vertical-align: text-bottom;
  margin-left: 2px;
  color: var(--color-gray-900);
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* 3. 포트폴리오 카드 (인터랙티브) */
.portfolio-card {
  display: block;
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
  /* 링크일 경우 밑줄 제거 */
}

/* 호버 시 붕 뜨는 효과 */
.portfolio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary-light);
}

/* 카드 내부 요소 스타일 */
.portfolio-card__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

.portfolio-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-sm);
}

.portfolio-card__desc {
  font-size: 0.95rem;
  color: var(--color-gray-600);
  line-height: 1.6;
}

.portfolio-card__footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-gray-100);
  font-size: 0.85rem;
  color: var(--color-gray-500);
}

/* 소셜 아이콘 링크 */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
  font-size: 1.5rem;
  margin: 0 var(--spacing-sm);
  transition: all 0.2s;
}

.social-link:hover {
  background-color: var(--color-gray-900);
  color: var(--color-white);
  transform: scale(1.1);
}

/* =========================================
 * [MOVED] Landing Page Components
 * ========================================= */

/* 2. 포트폴리오 카드 (Hover Lift Effect) */
.portfolio-card {
  display: block;
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
}

/* 호버 시 붕 뜨는 효과 */
.portfolio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary-light);
}

/* 카드 내부 요소 */
.portfolio-card__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

.portfolio-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-sm);
}

.portfolio-card__desc {
  font-size: 0.95rem;
  color: var(--color-gray-600);
  line-height: 1.6;
}

.portfolio-card__footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-gray-100);
  font-size: 0.85rem;
  color: var(--color-gray-500);
}

/* 3. 소셜 링크 아이콘 */
.social-link-icon {
  color: var(--color-gray-900);
  margin: 0 var(--spacing-md);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
  /* transform 적용을 위해 */
}

.social-link-icon:hover {
  color: var(--color-primary);
  transform: scale(1.1);
}

/* 4. 다크 버튼 (View All Logs) */
.btn--dark {
  background-color: var(--color-gray-900);
  color: var(--color-white);
  border: 1px solid var(--color-gray-900);
}

.btn--dark:hover {
  background-color: var(--color-black);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* =========================================
 * [NEW] Blog Post Components (Dev Log/Tips)
 * ========================================= */

/* 포스트 카드 (텍스트 중심) */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  /* 프로젝트 카드보다 조금 덜 둥글게 */
  padding: var(--spacing-lg);
  transition: all 0.2s ease;
  text-decoration: none;
  /* 링크 밑줄 제거 */
}

/* 호버 시 살짝 떠오르며 테두리 강조 */
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary);
  /* 브랜드 컬러로 포인트 */
}

/* 상단 메타 정보 (날짜, 카테고리) */
.post-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
  font-size: 0.8rem;
  color: var(--color-gray-500);
}

/* 제목 */
.post-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;

  /* 긴 제목 2줄 말줄임 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* [필수] 현재 브라우저용 */
  line-clamp: 2;
  /* [추가] 미래 표준 호환용 (경고 제거) */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 요약문 (Excerpt) */
.post-card__summary {
  font-size: 0.9rem;
  color: var(--color-gray-600);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: var(--spacing-md);

  /* 3줄 말줄임 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* [필수] 현재 브라우저용 */
  line-clamp: 3;
  /* [추가] 미래 표준 호환용 (경고 제거) */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 태그 영역 */
.post-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* 태그 스타일 (작고 심플하게) */
.post-tag {
  font-size: 0.75rem;
  color: var(--color-gray-600);
  background-color: var(--color-gray-100);
  padding: 2px 8px;
  border-radius: 4px;
}

/* =========================================
 * [MISSING] From Style Guide
 * ========================================= */

/* 1. Table Striped (줄무늬 테이블) */
.table--striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-gray-100);
}

/* 2. Card Image (카드 상단 이미지) */
.card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  /* 이미지 하단 공백 제거 */
}

/* 3. Alert Info (파란색 알림창) */
.alert--info {
  color: var(--color-info-dark);
  background-color: var(--color-info-light);
  border-color: var(--color-info);
}

/* 4. Task Card Description (칸반 카드 설명) */
.task-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: 0;
  margin-top: var(--spacing-xs);
}

/* =========================================
 * [NEW] Auth Page (Login)
 * ========================================= */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-100);
  padding: var(--spacing-md);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-lg);
  /* 좀 더 깊은 그림자 */
  padding: 2.5rem;
  /* 내부 여백 넉넉하게 */
}

.auth-footer {
  margin-top: var(--spacing-xl);
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-gray-500);
}

/* =========================================
 * [FIX] User Profile Dropdown
 * ========================================= */

/* 1. 드롭다운 래퍼 (기준점 설정) */
.user-dropdown-wrapper {
  position: relative;
  /* 자식(.dropdown-menu)의 기준점 */
  height: 100%;
  display: flex;
  align-items: center;
}

/* 2. 드롭다운 메뉴 (위치 및 디자인 수정) */
.user-dropdown-wrapper .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  /* 우측 정렬 */
  left: auto;
  /* 좌측 정렬 해제 */

  min-width: 200px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  padding: var(--spacing-xs) 0;
  margin-top: var(--spacing-xs);
  list-style: none;
  /* ul 점 제거 */
  z-index: 1000;

  /* 애니메이션 및 숨김 처리 (CSS Hover 방식) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 3. 호버 시 표시 (JS 없이 작동) */
.user-dropdown-wrapper:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 4. 드롭다운 내부 아이템 */
.dropdown-header {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dropdown-divider {
  height: 0;
  margin: var(--spacing-xs) 0;
  overflow: hidden;
  border-top: 1px solid var(--color-gray-200);
}

.dropdown-item-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.9rem;
  color: var(--color-gray-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: background-color 0.2s;
}

.dropdown-item-btn:hover {
  background-color: var(--color-gray-100);
  color: var(--color-danger);
  /* 로그아웃은 위험 색상으로 포인트 */
}

/* =========================================
 * [FIX] Navbar User Avatar (인라인 제거용)
 * ========================================= */
.nav-user-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-800);
  color: var(--color-white);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  /* 찌그러짐 방지 */
}

/* [NEW] Extra Small Font Size (0.7rem) */
.u-fs-xxs {
  font-size: 0.7rem !important;
}

/* =========================================
 * [NEW] Overview Page Components
 * ========================================= */

/* 1. 로드맵 컨테이너 */
.roadmap-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 20px;
}

.roadmap-header {
  text-align: center;
  margin-bottom: 60px;
}

/* 2. 타임라인 (Timeline) */
.timeline {
  position: relative;
  padding-left: 40px;
  margin-top: 3rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-gray-300);
}

.timeline-item {
  position: relative;
  margin-bottom: 50px;
  opacity: 0.7;
  transition: all 0.5s ease;
}

.timeline-item.active {
  opacity: 1;
}

.timeline-item.completed {
  opacity: 0.6;
}

/* 타임라인 점 (Dot) */
.timeline-dot {
  position: absolute;
  left: -45.5px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-gray-400);
  z-index: 1;
}

/* 활성 상태 애니메이션 */
@keyframes blink-active {
  0% {
    box-shadow: 0 0 0 0px rgba(33, 37, 41, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(33, 37, 41, 0);
  }

  100% {
    box-shadow: 0 0 0 0px rgba(33, 37, 41, 0);
  }
}

.timeline-item.active .timeline-dot {
  border-color: var(--color-gray-900);
  background: var(--color-gray-900);
  animation: blink-active 1.5s infinite;
}

.timeline-item.completed .timeline-dot {
  background: var(--color-gray-300);
  border-color: var(--color-gray-300);
}

/* 타임라인 박스 내용 */
.timeline-content {
  background: var(--color-white);
  padding: 22px;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-gray-200);
  transition: border-color 0.2s;
}

.timeline-item.active .timeline-content {
  border-left: 4px solid var(--color-gray-900);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 버전 태그 */
.version-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-gray {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.tag-blue {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.tag-purple {
  background: #f3f0ff;
  color: #5f3dc4;
}

.tag-gold {
  background: #fff9db;
  color: #e67700;
}

.tag-dark {
  background: var(--color-gray-900);
  color: var(--color-white);
}

/* 리스트 스타일 */
.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-gray-700);
}

.task-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 5px;
}

.task-list li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--color-gray-500);
}

.task-list li.done {
  text-decoration: line-through;
  color: var(--color-gray-500);
}

/* 3. 아키텍처 다이어그램 (Architecture) */
.arch-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  margin: 40px 0;
  flex-wrap: wrap;
}

.arch-box {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  padding: 20px;
  width: 250px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s;
  text-align: center;
}

.arch-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.arch-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-gray-900);
  margin-bottom: 10px;
  display: block;
  border-bottom: 2px solid var(--color-gray-100);
  padding-bottom: 5px;
}

.arch-content {
  font-size: 0.8rem;
  color: var(--color-gray-600);
}

.arch-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  margin-right: 4px;
  margin-bottom: 4px;
  display: inline-block;
}

/* 화살표 (데스크탑 전용) */
.arch-arrow {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  color: var(--color-gray-500);
  font-size: 1.2rem;
}

@media (max-width: 992px) {
  .arch-arrow {
    display: none;
  }

  /* 모바일 숨김 */
}

/* 4. 특징 카드 (Feature Card) */
.feature-card {
  background: var(--color-gray-100);
  border-radius: 12px;
  padding: 25px;
  height: 100%;
  border: 1px solid transparent;
  transition: all 0.3s;
}

.feature-card:hover {
  background: var(--color-white);
  border-color: var(--color-gray-200);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 15px;
  color: var(--color-gray-800);
}

/* =========================================
 * [FIX] Overview Inline Styles Removal
 * ========================================= */

/* 1. 로드맵 헤더 타이틀 (폰트 크기 & 자간) */
.roadmap-header__title {
  font-size: 2.5rem;
  letter-spacing: -0.5px;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-md);
}

/* 2. 아키텍처 박스 - 코어 (진한 테두리) */
.arch-box--core {
  border-color: var(--color-gray-800) !important;
}

/* 3. 아키텍처 배지 - 컬러 변형 */
.arch-badge--info {
  background-color: var(--color-info-light);
  color: var(--color-info-dark);
}

.arch-badge--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning-dark);
}

/* 4. 타임라인 - 미래 영역 (배경색) */
.timeline-content--future {
  background-color: #fbfbfc;
  /* 아주 연한 회색 */
}

/* =========================================
 * [FIX] Index & Overview Inline Styles
 * ========================================= */

/* 1. Index: Side Project 카드 전용 스타일 
.portfolio-card--highlight {
  background-color: #f0f7ff; 
  border-color: var(--color-primary-light) !important;
}
*/

/* =========================================
 * 6. Knowledge Hub (Tabs & List)
 * ========================================= */

/* 1. Tab Navigation */
.nav-tabs-custom {
  display: flex;
  gap: var(--spacing-sm);
  border-bottom: 2px solid var(--color-gray-200);
  margin-bottom: var(--spacing-lg);
}

.nav-link-tab {
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 600;
  color: var(--color-gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  /* 라인 겹치기 */
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.nav-link-tab:hover {
  color: var(--color-gray-700);
  background-color: var(--color-gray-50);
}

.nav-link-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.nav-link-tab .badge-count {
  display: inline-block;
  background-color: var(--color-gray-200);
  color: var(--color-gray-600);
  padding: 2px 8px;
  border-radius: 50rem;
  font-size: 0.75rem;
  margin-left: var(--spacing-xs);
}

.nav-link-tab.active .badge-count {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* 2. Knowledge List Item (Card Style) */
.knowledge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  transition: var(--transition-ease);
}

.knowledge-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-sm);
  border-color: var(--color-gray-300);
}

.knowledge-item__content {
  flex: 1;
  min-width: 0;
  /* 말줄임 위해 필수 */
  margin-right: var(--spacing-md);
}

.knowledge-item__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xxs);
}

.knowledge-item__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  text-decoration: none;
}

.knowledge-item__title:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.knowledge-item__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--color-gray-500);
  font-size: 0.85rem;
}

.knowledge-item__meta-icon {
  display: flex;
  align-items: center;
  gap: 4px;
}

.knowledge-item__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

/* 상태별 뱃지 컬러 확장 */
.status-badge--draft {
  background-color: var(--color-gray-500);
}

.status-badge--pending {
  background-color: var(--color-warning-dark);
  color: #fff;
}

.status-badge--dirty {
  background-color: #fd7e14;
  color: #fff;
}

/* 주황색 */
.status-badge--synced {
  background-color: var(--color-success);
}


/* 2. Overview: 인라인 스타일 대체 클래스들 */
.overview-lead-desc {
  font-size: 0.9em;
  opacity: 0.7;
}

.arch-box--core {
  border-color: var(--color-gray-800) !important;
  /* #2c3e50 대체 */
}

.timeline-content--future {
  background-color: #fbfbfc;
  /* 미래 계획 영역 배경 */
}

.roadmap-version-list {
  font-size: 0.85rem;
  /* v1.3, v1.4 소제목 폰트 */
}

/* 3. Overview: 로드맵 헤더 타이틀 */
.roadmap-title-text {
  font-size: 2.5rem;
  letter-spacing: -0.5px;
}

/* =========================================
 * [FIX] Index Page Components (Moved from HTML)
 * ========================================= */

/* 2. 호버 리프트 카드 (인터랙션) */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  /* 높이 꽉 채우기 */
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
}

.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--color-primary-light);
}

/* 3. Side Project 강조 카드 (뿌연 파랑 배경 해결) */
.portfolio-card--highlight {
  background-color: #f0f7ff;
  /* 아주 연한 파랑 */
  border: 1px solid var(--color-primary-light);
}

/* =========================================
 * [NEW] Knowledge Hub Styles (Unified)
 * ========================================= */

.knowledge-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.knowledge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-white);

  /* Modern Card Row Style */
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-sm);

  transition: all 0.2s ease;
}

.knowledge-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-md);
  border-color: var(--color-primary-light);
  z-index: 1;
}

.knowledge-item__content {
  flex: 1;
  min-width: 0;
  margin-right: var(--spacing-lg);
}

.knowledge-item__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xxs);
}

.knowledge-item__title {
  font-weight: 600;
  color: var(--color-gray-900);
  text-decoration: none;
  font-size: 1rem;
}

.knowledge-item__title:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.knowledge-item__meta {
  font-size: 0.85rem;
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.knowledge-item__meta-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.knowledge-item__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

/* 탭 스타일 통일을 위한 추가 */
.nav-tabs-custom {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--spacing-lg);
  padding-bottom: 8px;
}

.nav-link-tab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  color: var(--color-gray-600);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link-tab:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.nav-link-tab.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}