/* ============================================================
   PointPocket — common.css
   Design Guide 기준 공통 스타일
   ============================================================ */

/* ── CSS 변수 (컬러 토큰) ── */
:root {
  --color-primary:        #4B7BF5;
  --color-primary-dark:   #2348C7;
  --color-primary-darker: #1A3BA5;
  --color-card-blue:      #3B6EF8;
  --color-card-blue-dark: #1E3FAB;
  --color-accent:         #F4845F;
  --color-gold:           #F5C518;
  --color-bg:             #F0F2FD;
  --color-surface:        #FFFFFF;
  --color-text-primary:   #1A1F3C;
  --color-text-secondary: #6B7280;
  --color-text-hint:      #C4C9D8;
  --color-border:         #E5E7EB;
  --color-border-light:   #F3F4F6;
  --color-success:        #10B981;
  --color-error:          #EF4444;
  --color-warning:        #F59E0B;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-full: 100px;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 2px 12px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 32px rgba(37,99,235,0.30);
  --shadow-btn: 0 4px 16px rgba(37,99,235,0.35);

  --font-base: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition: 0.2s ease;
}

/* ── 리셋 ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 72px; /* 하단 탭바 높이 확보 */
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* ── 타이포그래피 ── */
.t-hero    { font-size: 40px; font-weight: 800; line-height: 1.1; }
.t-h1      { font-size: 28px; font-weight: 700; line-height: 1.2; }
.t-h2      { font-size: 22px; font-weight: 700; line-height: 1.3; }
.t-h3      { font-size: 18px; font-weight: 600; line-height: 1.4; }
.t-body    { font-size: 15px; font-weight: 400; line-height: 1.6; color: #374151; }
.t-body-sm { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--color-text-secondary); }
.t-label   { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #9CA3AF; }
.t-caption { font-size: 11px; font-weight: 400; color: var(--color-text-hint); }
.t-number  { font-size: 36px; font-weight: 800; color: var(--color-gold); }

/* ── 레이아웃 ── */
.page-wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

.page-section { padding: 20px 0; }
.page-gap     { display: flex; flex-direction: column; gap: 16px; }

/* ── 상단 헤더 ── */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.screen-logo {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screen-bell  { font-size: 20px; color: var(--color-text-primary); }
.screen-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F4845F, #C74B1A);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 700;
}

/* 알림 벨 뱃지 */
.bell-btn { position: relative; }
.bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: var(--color-error);
  color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* PC GNB — 모바일에서 숨김 */
.pc-topbar {
  display: none;
  background: var(--color-surface);
  padding: 14px 32px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 60;
}
.pc-logo { font-size: 18px; font-weight: 800; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.pc-nav  { display: flex; gap: 28px; }
.pc-nav a { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); transition: color var(--transition); }
.pc-nav a:hover, .pc-nav a.active { color: var(--color-primary); }
.pc-actions { display: flex; gap: 10px; align-items: center; }

/* ── 하단 탭 내비게이션 ── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
  padding: 12px 0 max(8px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
  z-index: 100;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: opacity var(--transition);
}
.nav-item:hover { opacity: 0.75; }
.nav-icon  { font-size: 22px; color: var(--color-text-hint); transition: color var(--transition); }
.nav-label { font-size: 10px; font-weight: 600; color: var(--color-text-hint); }

.nav-item.active .nav-icon,
.nav-item.active .nav-label { color: var(--color-text-primary); }

.nav-pill {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,0.40);
}
.nav-item.active-blue .nav-label { color: var(--color-text-primary); }

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  font-family: inherit; font-weight: 600;
  transition: opacity var(--transition), transform 0.1s;
  border-radius: var(--radius-full);
}
.btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-size: 16px; padding: 16px 32px;
  box-shadow: var(--shadow-btn);
}
.btn-accent {
  background: var(--color-accent);
  color: #fff;
  font-size: 15px; padding: 14px 28px;
  box-shadow: 0 4px 14px rgba(244,132,95,0.35);
}
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 15px; padding: 13px 28px;
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  font-size: 14px; padding: 10px 20px;
  border: 1.5px solid var(--color-primary);
}
.btn-pill-sm {
  background: #EEF3FF;
  color: var(--color-primary);
  font-size: 13px; padding: 8px 16px;
  font-weight: 700;
}
.btn-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}

/* 사이즈 변형 */
.btn-sm  { font-size: 13px; padding: 8px 16px; }
.btn-lg  { font-size: 17px; padding: 18px 40px; }
.btn-full { width: 100%; }

/* ── 입력 필드 ── */
.input-wrap   { margin-bottom: 20px; }
.input-label  { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; display: block; }
.input-group  { position: relative; }
.input-field {
  width: 100%;
  padding: 14px 16px 14px 44px;
  background: var(--color-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--color-text-primary);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.input-field::placeholder { color: var(--color-text-hint); }
.input-field:focus        { border-color: var(--color-primary); background: var(--color-surface); }
.input-field.no-icon      { padding-left: 16px; }
.input-field.error        { border-color: var(--color-error); background: #FEF2F2; }
.input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-hint); font-size: 16px; pointer-events: none;
}
.input-icon-right {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-hint); font-size: 16px; cursor: pointer;
}
.input-error-msg { font-size: 12px; color: var(--color-error); margin-top: 6px; }
.input-hint      { font-size: 12px; color: var(--color-text-hint); margin-top: 6px; }

/* ── 카드 ── */
.card-white {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-md);
}

.card-balance {
  background: linear-gradient(135deg, var(--color-card-blue) 0%, var(--color-card-blue-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 24px 24px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.card-balance::before {
  content: '';
  position: absolute; right: -30px; top: -30px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.card-balance-tag   { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; opacity: 0.7; text-transform: uppercase; margin-bottom: 8px; }
.card-balance-name  { font-size: 24px; font-weight: 800; line-height: 1.2; margin-bottom: 4px; }
.card-balance-pts   { font-size: 36px; font-weight: 900; color: var(--color-gold); line-height: 1; }
.card-balance-pts span { font-size: 18px; font-weight: 600; }
.card-balance-label { font-size: 12px; opacity: 0.65; margin-bottom: 12px; }
.card-balance-meta  { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }

.card-stat {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-stat-icon  { font-size: 22px; }
.card-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: #9CA3AF; text-transform: uppercase; }
.card-stat-value { font-size: 26px; font-weight: 800; color: var(--color-text-primary); }
.card-stat-value.positive { color: var(--color-success); }
.card-stat-value.negative { color: var(--color-error); }

/* ── 프로그레스바 ── */
.progress-bar-wrap {
  background: rgba(255,255,255,0.20);
  border-radius: var(--radius-full);
  height: 8px;
}
.progress-bar-wrap.dark { background: var(--color-bg); }
.progress-bar-fill      { height: 8px; border-radius: var(--radius-full); background: var(--color-gold); }
.progress-bar-fill.blue { background: var(--color-primary); }

/* ── 뱃지 ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 700;
}
.badge-blue   { background: #EEF3FF;  color: var(--color-primary); }
.badge-gold   { background: #FEF9C3;  color: #B45309; }
.badge-hot    { background: var(--color-gold); color: var(--color-text-primary); }
.badge-orange { background: #FEE2D5;  color: #C4561A; }
.badge-green  { background: #D1FAE5;  color: #065F46; }
.badge-red    { background: #FEE2E2;  color: #991B1B; }
.badge-pts    { background: #EEF3FF;  color: var(--color-primary); font-size: 14px; padding: 6px 14px; }

/* ── 탭바 ── */
.tab-bar { display: flex; border-bottom: 2px solid var(--color-border); margin-bottom: 20px; }
.tab-item {
  padding: 12px 20px;
  font-size: 15px; font-weight: 600;
  color: #9CA3AF; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}
.tab-item.active { color: var(--color-text-primary); border-bottom-color: var(--color-primary); }

/* ── 리스트 메뉴 ── */
.list-menu  { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.list-item  { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--color-border-light); cursor: pointer; transition: background var(--transition); }
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: #F9FAFB; }
.list-icon-wrap { width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.list-text    { flex: 1; }
.list-title   { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.list-desc    { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
.list-chevron { color: var(--color-text-hint); font-size: 14px; }
.badge-dot    { width: 8px; height: 8px; border-radius: 50%; background: var(--color-error); flex-shrink: 0; }

/* ── 구분선 ── */
.divider { border: none; border-top: 1px solid var(--color-border); margin: 20px 0; }

/* ── 섹션 헤더 ── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title  { font-size: 16px; font-weight: 700; color: var(--color-text-primary); }
.section-more   { font-size: 13px; font-weight: 600; color: var(--color-primary); }

/* ── 빈 상태 ── */
.empty-state { text-align: center; padding: 48px 24px; }
.empty-state-icon  { font-size: 48px; margin-bottom: 16px; color: var(--color-text-hint); }
.empty-state-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.empty-state-desc  { font-size: 14px; color: var(--color-text-secondary); }

/* ── 스켈레톤 로딩 ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── 토스트 알림 ── */
#toast-container {
  position: fixed;
  top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  width: calc(100% - 40px);
  max-width: 400px;
  pointer-events: none;
}
.toast {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600;
  background: var(--color-text-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
}
.toast-visible          { opacity: 1; transform: translateY(0); }
.toast-success          { background: var(--color-success); }
.toast-error            { background: var(--color-error); }
.toast-info             { background: var(--color-primary); }

/* ── PC 반응형 (768px 이상) ── */
@media (min-width: 768px) {
  .screen-header { display: none; }
  .pc-topbar     { display: flex; }
  .bottom-nav    { display: none; }

  body { padding-bottom: 0; padding-top: 0; }

  .page-wrap { max-width: 1200px; padding: 0 24px; }

  #app-content { padding-top: 24px; }
}