/* GUYZ - Reusable Components */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide); transition: all var(--duration-normal) var(--ease-out);
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; transition: opacity var(--duration-fast);
}
.btn:hover::before { opacity: 1; }

.btn-primary {
  background: var(--color-accent); color: #fff;
  box-shadow: 0 4px 20px rgba(255,107,53,0.3);
}
.btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,107,53,0.4); }

.btn-secondary {
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-border-light);
}
.btn-secondary:hover { border-color: var(--color-secondary); color: var(--color-secondary); background: rgba(232,213,183,0.05); }

.btn-kakao {
  background: var(--color-kakao); color: var(--color-kakao-text);
  font-weight: var(--font-bold); box-shadow: 0 4px 20px rgba(254,229,0,0.2);
}
.btn-kakao:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(254,229,0,0.3); filter: brightness(1.05); }

.btn-glass {
  background: var(--color-surface-glass); color: var(--color-text);
  border: 1px solid var(--color-border-light); backdrop-filter: blur(var(--blur-md));
}
.btn-glass:hover { background: var(--color-surface-glass-hover); border-color: var(--color-secondary); }

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-lg); }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.card:hover { transform: translateY(-4px); border-color: var(--color-border-light); box-shadow: var(--shadow-lg); }

.card-glass {
  background: var(--color-surface-glass); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl); backdrop-filter: blur(var(--blur-lg));
  overflow: hidden; transition: all var(--duration-normal) var(--ease-out);
}
.card-glass:hover { background: var(--color-surface-glass-hover); border-color: var(--color-border-accent); }

/* Portfolio Card */
.portfolio-card {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  cursor: pointer; background: var(--color-surface);
}
.portfolio-card .card-image {
  width: 100%; aspect-ratio: auto; overflow: hidden;
}
.portfolio-card .card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.portfolio-card:hover .card-image img { transform: scale(1.08); }

.portfolio-card .card-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-6); background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 70%);
  opacity: 0; transition: opacity var(--duration-normal) var(--ease-out);
}
.portfolio-card:hover .card-overlay { opacity: 1; }

.portfolio-card .card-category {
  display: inline-block; padding: var(--space-1) var(--space-3);
  background: rgba(232,213,183,0.2); backdrop-filter: blur(var(--blur-sm));
  border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--color-secondary);
  font-weight: var(--font-medium); letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2); width: fit-content;
}
.portfolio-card .card-title {
  font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}
.portfolio-card .card-company {
  font-size: var(--text-sm); color: var(--color-text-secondary);
}

/* Company Card */
.company-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5); background: var(--color-surface-glass);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--blur-md)); transition: all var(--duration-normal) var(--ease-out);
}
.company-card:hover { border-color: var(--color-border-accent); transform: translateY(-2px); }
.company-card .company-logo {
  width: 56px; height: 56px; border-radius: var(--radius-lg); object-fit: cover;
  border: 1px solid var(--color-border-light);
}
.company-card .company-name { font-weight: var(--font-semibold); font-size: var(--text-base); }
.company-card .company-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* ---------- Category Filter Tabs ---------- */
.filter-tabs {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.filter-tab {
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-secondary);
  border: 1px solid var(--color-border); transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}
.filter-tab:hover { color: var(--color-text); border-color: var(--color-border-light); }
.filter-tab.active {
  color: var(--color-text-inverse); background: var(--color-secondary);
  border-color: var(--color-secondary); font-weight: var(--font-semibold);
}

/* ---------- Modal / Lightbox ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.9);
  backdrop-filter: blur(var(--blur-lg)); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all var(--duration-normal) var(--ease-out);
}
.modal-backdrop.active { opacity: 1; visibility: visible; }

.modal-close {
  position: absolute; top: var(--space-6); right: var(--space-6);
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: rgba(255,255,255,0.1);
  color: #fff; font-size: 1.5rem; cursor: pointer;
  transition: all var(--duration-fast); z-index: 10;
}
.modal-close:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--font-medium);
}
.badge-success { background: rgba(52,211,153,0.15); color: var(--color-success); }
.badge-warning { background: rgba(251,191,36,0.15); color: var(--color-warning); }
.badge-error { background: rgba(248,113,113,0.15); color: var(--color-error); }

/* ---------- Toast ---------- */
.toast-container {
  position: fixed; bottom: var(--space-8); right: var(--space-8);
  z-index: var(--z-top); display: flex; flex-direction: column; gap: var(--space-3);
}
.toast {
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-xl); font-size: var(--text-sm);
  animation: slideInRight var(--duration-slow) var(--ease-spring);
  max-width: 360px;
}
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ---------- Empty State ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-16) var(--space-8); text-align: center; color: var(--color-text-muted);
}
.empty-state svg { width: 64px; height: 64px; margin-bottom: var(--space-6); opacity: 0.4; }
.empty-state p { font-size: var(--text-lg); margin-bottom: var(--space-4); }

/* ---------- Loading Skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-hover) 50%, var(--color-surface) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md);
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ---------- Form Elements ---------- */
.form-group { margin-bottom: var(--space-6); }
.form-label {
  display: block; font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--color-text-secondary); margin-bottom: var(--space-2);
}
.form-input, .form-textarea, .form-select {
  width: 100%; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg); color: var(--color-text); font-size: var(--text-base);
  transition: all var(--duration-fast);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(232,213,183,0.1);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-select { appearance: none; cursor: pointer; }