/* ============================================================
   ClubParty App — Global Stylesheet Entry
   ============================================================
   이 파일은 디자인 시스템 + 전역 스타일 + 컴포넌트별 CSS를
   한 번에 묶어 로드합니다. 페이지 단위로 분리되어 있어,
   해당 화면을 손볼 때 그 파일만 찾아서 수정하면 됩니다.

   로드 순서
     1) 디자인 토큰 (colors_and_type.css)
     2) 전역 리셋 + 키프레임 + 유틸리티 (이 파일 본체)
     3) 컴포넌트별 CSS (각 JSX 파일과 1:1 매칭)
   ============================================================ */

@import url("../../design-system/colors_and_type.css");

@import url("./primitives.css");
@import url("./loaders.css");
@import url("./tabbar.css");
@import url("./topbar.css");
@import url("./homescreen.css?v=20260618-home-review");
@import url("./listcontrols.css");
@import url("./screens.css");
@import url("./detail.css");
@import url("./mepage.css?v=20260618-me-profile");
@import url("./auth.css");
@import url("./install-prompt.css");

/* ============================================================
   1. RESET · 전역 리셋
   ============================================================ */
html,
body {
  margin: 0;
  padding: 0;
  background: #000;
  min-height: 100svh;
  font-family: 'Pretendard', system-ui, sans-serif;
  color: #fff;
}

* { box-sizing: border-box; }

::-webkit-scrollbar { width: 0; height: 0; }

/* 풀 화면 — 핸드폰 프레임 제거 */
.stage {
  min-height: 100svh;
  background: #07070A;
}

/* App container — 가운데 정렬, 최대 700px */
.cp-full-frame {
  max-width: 32rem;
  margin: 0 auto;
  min-height: 100svh;
  position: relative;
  background: #07070A;
  color: #fff;
}

/* Tab screen viewport (App.jsx 내) */
.cp-screen-viewport {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  max-width: 32rem;
  margin: 0 auto;
}

.cp-screen-slot {
  position: absolute;
  inset: 0;
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}
.cp-screen-slot[hidden] { display: none; }

.cp-screen-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ============================================================
   2. KEYFRAMES · 글로벌 애니메이션
   ============================================================ */

/* 펄스 (LIVE 도트, GlowDot 등) */
@keyframes cp-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* 이퀄라이저 바 (PulseBars) */
@keyframes cp-eq {
  0%   { height: 20%; }
  100% { height: 100%; }
}

/* 오로라 드리프트 (Aurora 컴포넌트) */
@keyframes cp-drift1 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(8%, 6%); }
}
@keyframes cp-drift2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-6%, -4%); }
}
@keyframes cp-drift3 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(4%, -8%); }
}

/* 페이드 / 슬라이드 (시트 모달 등장) */
@keyframes cp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cp-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* GlobeLoader — 회전 / 핀 펄스 */
@keyframes cp-globe-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes cp-city-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.6); opacity: 0.30; }
}

/* CosmicScale — 동심원 확장 */
@keyframes cp-cosmic-ring {
  0%   { transform: scale(0.05); opacity: 0.7; }
  100% { transform: scale(1.0);  opacity: 0; }
}

/* ============================================================
   3. UTILITIES · 자주 쓰이는 레이아웃
   ============================================================ */

.cp-row        { display: flex; align-items: center; }
.cp-row-center { display: flex; align-items: center; justify-content: center; }
.cp-row-between{ display: flex; align-items: center; justify-content: space-between; }
.cp-col        { display: flex; flex-direction: column; }
.cp-col-center { display: flex; flex-direction: column; align-items: center; }

.cp-button-reset {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
}

.cp-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-mono-num {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: 'tnum';
}

/* ============================================================
   4. SHARED · 여러 화면이 공유하는 패턴
   ============================================================ */

/* ----- Eyebrow (작은 대문자 라벨) ----- */
.cp-eyebrow-mini {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ----- 제네릭 카드 (다크 박스) ----- */
.cp-card {
  background: #15151E;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  box-sizing: border-box;
}
.cp-card-soft {
  background: rgba(36, 36, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}
.cp-card-elev {
  background: linear-gradient(180deg, #0E0E14 0%, #07070A 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* ----- 작은 원형 아이콘 버튼 (검색/벨/닫기 등) ----- */
.cp-icon-btn {
  all: unset;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  position: relative;
  box-sizing: border-box;
}
.cp-icon-btn--sm {
  width: 32px;
  height: 32px;
  background: rgba(36, 36, 46, 0.6);
  color: rgba(255, 255, 255, 0.6);
}

/* ----- 알림 빨간 점 ----- */
.cp-bell-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #FF1077;
  box-shadow: 0 0 6px #FF1077;
}

/* ----- 그라디언트 텍스트 (NOXIAHUB 로고, 헤드라인 등) ----- */
.cp-grad-text {
  background: linear-gradient(135deg, #FF7AB8 0%, #A07AFF 50%, #5AE3FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ----- 시트 모달 그립 핸들 ----- */
.cp-grip {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}
.cp-grip--lg {
  width: 48px;
  height: 6px;
  background: rgba(255, 255, 255, 0.10);
}

/* ----- 섹션 헤더 (제목 + 우측 '전체보기') ----- */
.cp-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cp-sec-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.cp-see-all {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}