/* Setting */

:root {
  --font-base: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont,
    sans-serif;
  --font-display: "GmarketSans", "Pretendard", sans-serif;
  --fs-base: clamp(14px, 3.2vw, 16px);

  /* 핵심 브랜드 */
  --c-primary: #1f80ff; /* 로고 컬러 / 메인 버튼 */
  --c-secondary: #4fa3ff; /* 보조 버튼 / 링크 / 포커스 */

  /* 상태 강조 */
  --c-empty: #22c55edd; /* EMPTY (여유, 정상) */
  --c-occupied: #ef4444dd; /* OCCUPIED / 경고 */
  --c-warning: #f59e0bdd; /* 주의 / 변동 상태 */

  /* 텍스트 계열 */
  --c-text: #151a23; /* 카드 / 패널 */
  --c-text-muted: #273041; /* 구분선 */

  /* 배경 */
  --c-bg: #e5e7eb; /* 기본 텍스트 */
  --c-bg-soft: #9ca3af; /* 보조 텍스트 */

  /* Border */
  --c-border: #e6e6e6;

  /* size */
  --header-h: 56px;
  --header-icon-size: 22px;
  --header-icon-touch: 40px;
  --footer-h: 70px;
  --footer-up-h: 140px;
}

body {
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-bg);
  width: 100vw;
  height: 100vh;
}

h1 {
  font-size: clamp(1.6rem, 3.6vw, 2rem);
}
h2 {
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
}
h3 {
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
}
h4 {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
}
h5 {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}
h6 {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}

h1,
h2 {
  font-weight: 700;
}
h3,
h4 {
  font-weight: 600;
}
h5,
h6 {
  font-weight: 600;
}

small {
  font-size: 13px;
  color: var(--c-text-sub);
}

.text-shadow-l {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.text-shadow {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.shadow-xs {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.shadow-sm {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.shadow-lg {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.ease {
  transition: all 0.25s ease;
}

.ease-fast {
  transition: all 0.15s ease;
}

.tap {
  -webkit-tap-highlight-color: transparent;
}

.tap:active {
  transform: scale(0.97);
  opacity: 0.85;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fadeUp 0.35s ease-out;
}

.glow-primary {
  box-shadow: 0 0 12px rgba(255, 107, 129, 0.45);
}

.badge {
  position: relative;
}

.badge::after {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-primary);
  animation: badge 1s infinite;
}

@keyframes badge {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}