/* ============================================================
   YouTube Helper - Premium Design System
   Pretendard + Creator Orange/Teal 팔레트 + Glassmorphism
   ============================================================ */

/* ── 0. CSS 변수 ──────────────────────────────────────────── */
:root {
  --primary:        #FF6B35;
  --primary-dark:   #E55A25;
  --primary-light:  #FF8C5A;
  --secondary:      #2EC4B6;
  --accent:         #2EC4B6;

  --bg-page:        #f5f5f7;
  --bg-card:        #ffffff;
  --bg-card-alt:    #fff8f5;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  --border-color:   #e2e8f0;
  --border-focus:   #FF6B35;

  /* 서피스 컬러 스케일 */
  --surface-1: #f8fafc;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;

  /* 타이포 스케일 */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg:   1.0625rem;  /* 17px */
  --text-xl:   1.25rem;    /* 20px */

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(255,107,53,.12), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 40px rgba(255,107,53,.18), 0 4px 12px rgba(0,0,0,.08);
  --shadow-btn: 0 4px 14px rgba(255,107,53,.40);

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;

  --nav-height: 60px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 1. 기본 리셋 & 타이포그래피 ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9375rem;  /* 15px */
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* ── 2. 네브바 ────────────────────────────────────────────── */
.navbar {
  background: linear-gradient(135deg, #1A2332 0%, #243447 65%, #2C3E50 100%) !important;
  height: var(--nav-height);
  padding: 0;
  box-shadow: 0 2px 20px rgba(26,35,50,.45);
  backdrop-filter: blur(10px);
}

.navbar .container {
  height: 100%;
  align-items: center;
}

.navbar-brand {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.navbar-brand .brand-sub {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.6);
  font-weight: 400;
  letter-spacing: 0;
  align-self: flex-end;
  margin-bottom: 2px;
}

.navbar .nav-link {
  color: rgba(255,255,255,.8) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.12);
}

/* 네브바 로그아웃 버튼 */
.navbar .btn-link {
  color: rgba(255,255,255,.8) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 6px 14px !important;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.navbar .btn-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12);
}

/* 헤더 리소스 바 */
.resource-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 20px;
  padding: 6px 12px;
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-md) !important;
  backdrop-filter: blur(8px);
}
/* 모바일에서 리소스 바 전체 너비 */
@media (max-width: 991px) {
  .resource-bar { margin: 10px 0; width: 100%; justify-content: center; }
}

/* 헤더 상태 바 라벨 (요금제 / 유료 크레딧 / 포인트) */
.resource-label {
  font-size: var(--text-xs);   /* 0.75rem (기존 0.6rem → 가독성 개선) */
  color: rgba(255,255,255,.7);
  line-height: 1.15;
}

/* 게이지 컨테이너 */
.resource-gauge-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resource-gauge {
  width: 100px;
  height: 8px;
  background: rgba(255,255,255,.25) !important;
  border-radius: 99px !important;
  overflow: hidden;
  position: relative;
}

.resource-gauge-fill {
  height: 100%;
  background: #28a745;
  border-radius: 99px !important;
  transition: width 0.3s;
}
.resource-gauge-fill.warning { background: #ffc107; }
.resource-gauge-fill.danger  { background: #dc3545; }

.resource-gauge-pending {
  position: absolute;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,193,7,.7),
    rgba(255,193,7,.7) 4px,
    rgba(255,219,77,.7) 4px,
    rgba(255,219,77,.7) 8px
  );
  border-radius: 4px;
  transition: all 0.3s;
}

.resource-text {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}
.resource-text strong { color: #fff; }

/* 헤더 게이지 경고 깜빡임 */
.resource-bar.blink { animation: blink-warning 1s infinite; }
@keyframes blink-warning {
  0%, 100% { background: rgba(255,255,255,.22) !important; }
  50%       { background: rgba(255,193,7,.3) !important; }
}

/* 플랜 뱃지 */
.plan-badge {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.plan-badge.pro { background: linear-gradient(135deg, #2EC4B6, #0ea5a0) !important; }
.plan-badge.enterprise { background: linear-gradient(135deg, #dc2626, #e11d48) !important; }

.resource-gauge {
  background: rgba(255,255,255,.2) !important;
  border-radius: 99px !important;
}
.resource-gauge-fill { border-radius: 99px !important; }

/* ── 3. 페이지 배경 & 레이아웃 ───────────────────────────── */
main {
  padding-top: 2rem !important;
  padding-bottom: 3rem !important;
}

/* ── 4. 카드 ──────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

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

.card-header {
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 1rem 1.5rem;
  font-weight: 600;
  background: var(--bg-card-alt) !important;
}

.card-body { padding: 1.5rem; }

/* ── 5. 버튼 ──────────────────────────────────────────────── */
.btn {
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md) !important;
  transition: var(--transition);
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #2EC4B6 100%);
  box-shadow: 0 6px 20px rgba(255,107,53,.45);
  transform: translateY(-1px);
  color: #fff;
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
  color: var(--primary);
  border: 2px solid var(--primary) !important;
  background: transparent;
}
.btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border-color: transparent !important;
  box-shadow: var(--shadow-btn);
}

.btn-secondary {
  background: #e2e8f0;
  color: var(--text-primary);
}
.btn-secondary:hover {
  background: #cbd5e1;
  color: var(--text-primary);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}

.btn-lg {
  padding: 0.75rem 2rem !important;
  font-size: 1rem !important;
  border-radius: var(--radius-lg) !important;
}

.btn-sm {
  padding: 0.35rem 0.85rem !important;
  font-size: 0.8125rem !important;
}

/* ── 6. 폼 컨트롤 ─────────────────────────────────────────── */
.form-control, .form-select {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md) !important;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: #fff;
  transition: var(--transition);
}

.form-control:focus, .form-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(255,107,53,.12);
  outline: none;
}

.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

/* ── 7. 알림 / Alert ─────────────────────────────────────── */
.alert {
  border: none;
  border-radius: var(--radius-md) !important;
  font-size: 0.875rem;
  font-weight: 500;
}
.alert-danger  { background: #fef2f2; color: #991b1b; }
.alert-success { background: #f0fdf4; color: #166534; }
.alert-info    { background: #eff6ff; color: #1e40af; }
.alert-warning { background: #fffbeb; color: #92400e; }

/* ── 8. 배지 (Badge) ─────────────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px !important;
  padding: 0.35em 0.7em;
}

.bg-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; }

/* ── 9. 드롭존 (파일 업로드) ──────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-muted);
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--primary);
  background: rgba(255,107,53,.04);
  color: var(--text-secondary);
}

/* ── 10. 푸터 ─────────────────────────────────────────────── */
footer {
  background: #fff !important;
  border-top: 1px solid var(--border-color);
  padding: 1.25rem 0 !important;
  color: var(--text-muted) !important;
}
footer small { font-size: var(--text-xs); }
footer .footer-brand {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
}
footer .footer-brand:hover { color: var(--primary); }
footer .footer-links a {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
footer .footer-links a:hover { color: var(--primary); }

/* ── 10. 홈페이지 히어로 ──────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, #1A2332 0%, #FF6B35 55%, #2EC4B6 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 4rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(46,196,182,.25) 0%, transparent 60%);
}

.hero-section .display-4 {
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
}

.hero-section .lead {
  color: rgba(255,255,255,.8);
  font-size: 1.125rem;
}

/* Feature 카드 */
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg) !important;
  padding: 2rem;
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(255,107,53,.25);
}
.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}
.feature-icon.blue   { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #2563eb; }
.feature-icon.green  { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #16a34a; }
.feature-icon.amber  { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #d97706; }
.feature-icon.teal   { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); color: #0d9488; }

/* 요금제 카드 */
.pricing-card {
  border-radius: var(--radius-lg) !important;
  border: 1.5px solid var(--border-color);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.pricing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.pricing-card.featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,107,53,.18), var(--shadow-md);
}
.pricing-header {
  padding: 1.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}
.pricing-header.free      { background: #fff8f5; color: var(--text-primary); }
.pricing-header.basic     { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; }
.pricing-header.pro       { background: linear-gradient(135deg, #2EC4B6, #0ea5a0); color: #fff; }
.pricing-header.enterprise{ background: linear-gradient(135deg, #0f172a, #1e293b); color: #fff; }
.pricing-price {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}
.pricing-check {
  color: #22c55e;
  margin-right: 6px;
}

/* ── 11. 로그인 / 회원가입 (좌우 분할 레이아웃) ──────────── */

/* 인증 페이지 래퍼 — 화면 전체 높이에서 네브바 제외 */
.auth-split {
  min-height: calc(100vh - 60px);
  display: flex;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* 왼쪽 브랜드 패널 */
.auth-brand-panel {
  background: linear-gradient(160deg, #1A2332 0%, #FF6B35 60%, #2EC4B6 100%);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.auth-brand-panel .brand-logo {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-brand-panel .brand-tagline {
  font-size: 0.875rem;
  color: rgba(255,255,255,.65);
  margin-bottom: 2.5rem;
}

.auth-brand-panel .brand-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.auth-brand-panel .brand-feature i {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 오른쪽 폼 패널 */
.auth-form-panel {
  background: var(--bg-card);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 기존 auth-card (모바일 폴백용) */
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg);
  padding: 2.5rem 2rem;
}

.auth-logo {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
}

/* 모바일: 브랜드 패널 숨김 */
@media (max-width: 767px) {
  .auth-brand-panel { display: none; }
  .auth-split { box-shadow: none; }
  .auth-form-panel { padding: 2rem 1.5rem; }
}

/* ── 12. 업로드 페이지 step-card ─────────────────────────── */
.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

.step-card.disabled {
  opacity: .5;
  pointer-events: none;
}

.step-header {
  background: var(--bg-card-alt);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.step-number {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8125rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255,107,53,.35);
}

/* ── 13. 진행 바 ──────────────────────────────────────────── */
.progress {
  border-radius: 99px !important;
  background: #e2e8f0;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 99px !important;
  transition: width 0.4s ease;
}

/* ── 14. 모달 ─────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.2) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border-color);
  padding: 1.25rem 1.5rem;
}
.modal-footer {
  border-top: 1px solid var(--border-color);
  padding: 1rem 1.5rem;
}

/* ── 15. 테이블 ───────────────────────────────────────────── */
.table {
  font-size: 0.875rem;
  color: var(--text-primary);
}
.table thead th {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1.5px solid var(--border-color);
  background: var(--bg-card-alt);
}
.table td { vertical-align: middle; border-color: var(--border-color); }

/* ── 16. 체크박스 / 라디오 ───────────────────────────────── */
.form-check-input {
  border: 1.5px solid #cbd5e1;
  transition: var(--transition);
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(255,107,53,.15);
  border-color: var(--primary);
}

/* ── 17. 스크롤바 (webkit) ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── 18. 유틸리티 ─────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shadow-glow {
  box-shadow: 0 0 20px rgba(255,107,53,.25);
}

.divider {
  height: 1px;
  background: var(--border-color);
  margin: 1.5rem 0;
}

/* 페이드인 애니메이션 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── 19. 반응형 ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-section .display-4 { font-size: 2.25rem; }
}

@media (max-width: 768px) {
  .hero-section { padding: 2.5rem 1.25rem; }
  .hero-section .display-4 { font-size: 2rem; }
  .auth-card { padding: 1.75rem 1.25rem; }
}

@media (max-width: 480px) {
  .hero-section { padding: 2rem 1rem; }
  .hero-section .display-4 { font-size: 1.75rem; }
  .card-body { padding: 1rem; }
  .btn-lg { padding: 0.6rem 1.5rem !important; }
}