/* ============================================
   A안 · Cozy Crayon — 공통 스타일시트
   모든 페이지에서 <link rel="stylesheet" href="styles.css">로 import
   ============================================ */

/* --- 베이스 --- */
body {
  font-family: 'Jua', system-ui, sans-serif;
  background: #FFF8E7;
  color: #5D4037;
}
.handwriting { font-family: 'Gaegu', cursive; }

/* --- 종이 질감 --- */
.paper { background: #FFFDF7; }
.paper-dotted {
  background:
    linear-gradient(#FFFDF7,#FFFDF7),
    radial-gradient(#F5E6D3 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px;
}

/* --- 시그니처 그림자 (스티커북 입체감) --- */
.sticker-shadow { box-shadow: 4px 4px 0 rgba(93,64,55,.12); }

/* --- 떠다니는 애니메이션 (배경 데코) --- */
.float-slow { animation: float 6s ease-in-out infinite; }
.float-fast { animation: float 4s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-10px) rotate(3deg); }
}

/* --- 마스킹 테이프 데코 --- */
.tape {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 70px; height: 20px;
  background: #FFD97D; opacity: .75;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.tape-top { position: relative; }
.tape-top::before {
  content: '';
  position: absolute; top: -10px; left: 24px;
  width: 60px; height: 18px;
  background: #FFD97D; opacity: .8;
  border-radius: 2px;
  transform: rotate(-4deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

/* --- 카드 호버 --- */
.card-hover { transition: transform .25s, box-shadow .25s; }
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 6px 8px 0 rgba(93,64,55,.15);
}

/* --- 네비게이션 --- */
.nav-link { transition: background .15s; }
.nav-link:hover { background: #FFF0F0; }
.nav-link.active { background: #FFE8DA; color: #F08080; }

/* --- 진행률 바 --- */
.progress-track {
  background: #F5E6D3;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFB5A7, #F08080);
}

/* --- 로그인: 이름 카드 --- */
.name-card { transition: transform .18s, box-shadow .18s; }
.name-card:hover {
  transform: translateY(-4px) rotate(-2deg);
  box-shadow: 6px 8px 0 rgba(93,64,55,.15);
}
.name-card.selected {
  transform: translateY(-4px) rotate(-2deg) scale(1.03);
  box-shadow: 6px 8px 0 rgba(240,128,128,.35);
  background: #FFF0F0;
}

/* --- 로그인: PIN 입력 --- */
.pin-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 3px solid #5D4037;
  background: #FFF;
  transition: background .15s;
}
.pin-dot.filled { background: #F08080; }
.keypad-btn { transition: transform .08s; }
.keypad-btn:active { transform: scale(.94); }

/* --- 뱃지 스티커 --- */
.badge-sticker { transition: transform .2s; }
.badge-sticker:hover { transform: rotate(-6deg) scale(1.08); }

/* --- 마켓: 카테고리 칩 --- */
.chip { transition: all .15s; }
.chip.active {
  background: #F08080; color: #fff;
  border-color: #F08080;
}

/* --- 마켓: 가격 태그 --- */
.price-tag {
  background: #FFD97D;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- 마켓: 상품 카드 --- */
.product-card { transition: transform .2s, box-shadow .2s; }
.product-card:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 6px 10px 0 rgba(93,64,55,.18);
}