/* ============================================================
   ClubParty App — Global Stylesheet (전역 리셋 + 키프레임 + 유틸리티)
   ============================================================
   ⚠️ CSS 로드는 index.php의 $cssFiles 목록에서 <link>로 직접 함(이 파일 포함).
      더 이상 @import 안 씀 → 캐시 버전은 index.php $cssVer 한 곳에서만 관리.
      새 CSS 파일을 추가하면 index.php $cssFiles 에도 등록해야 로드됨.
   이 파일은 컴포넌트 CSS들 "다음"에 로드되어 전역 리셋/유틸을 마지막에 적용함.
   ============================================================ */

/* ============================================================
   1. RESET · 전역 리셋
   ============================================================ */
html,
body {
  margin: 0;
  background: #000;
  font-family: 'Pretendard', system-ui, sans-serif;
  color: #fff;
}
/* 문서 스크롤(주소창 축소) + 콘텐츠 끝에 하단 고정 탭바 자리 확보.
   height:100% 대신 min-height → 콘텐츠가 늘어나면 body도 늘어나서 padding-bottom이 콘텐츠 끝에 붙음(탭바와 안 겹침) */
body {
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 0 0 calc(70px + env(safe-area-inset-bottom, 0px)) 0;
}

* { box-sizing: border-box; }

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

/* 풀 화면 — 핸드폰 프레임 제거 */
.stage {
  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;
}

/* 내부 스크롤 모멘텀(iOS). 과스크롤 체인은 막지 않음 → 안드로이드 당겨서 새로고침 동작 유지 */
[data-scroll-tab],
.cp-screen-scroll {
  -webkit-overflow-scrolling: touch;
}

/* 상단 히어로 유튜브 영상 — 검은 여백 없이 영역을 꽉 채움(cover) */
.cp-hero-video { position: absolute; inset: 0; overflow: hidden; }
.cp-hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  pointer-events: none;
}

/* ============================================================
   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;
}

/* ----- 그라디언트 텍스트 (HOTPLER 로고, 헤드라인 등) ----- */
.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;
}