/* 앱 쉘 — 폰 캔버스 느낌을 PC에서도 유지 */
.app {
  width: 100%;
  max-width: var(--container-max);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--color-bg);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 데스크톱에서 캔버스 경계 강조 */
@media (min-width: 1024px) {
  body { background: var(--color-surface); }
  .app {
    min-height: 100vh;
    box-shadow: var(--shadow-lg);
  }
}

/* 헤더 (sticky) */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--header-height);
  padding: 0 var(--space-4);
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-header .logo {
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* 앱 아이콘 (로고 좌측) */
.app-header .app-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(91,91,255,.35);
  flex-shrink: 0;
}
.app-header .app-icon svg { width: 28px; height: 28px; display: block; }

/* 로고 — 부분 모핑 애니메이션 */
.app-header .logo-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 180px;
  height: 28px;
  overflow: visible;
}
.app-header .logo-slot {
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-text);
  letter-spacing: -0.2px;
}

/* 타임라인 (애니메이션 모드일 때만):
   0.0 – 1.4s  :  The → 더 (롤링, 나머지 "랜덤박스"는 유지)
   2.8s        :  더와 랜 사이에 ~ 물결 삽입 (랜덤박스를 오른쪽으로 밀어냄)
   4.2s        :  . 두 개가 랜/덤, 덤/박스 사이로 각각 삽입
   5.6s        :  끝에 🎉 등장 + 축하 팝/윙글 (2초 유지)
   7.6s –  ∞   :  더.랜.덤. 최종 고정 */

/* morph 컨테이너 — stages 1~5 사이 존재, 7.6s 에 페이드아웃 */
.logo-morph {
  display: inline-flex;
  align-items: baseline;
  gap: 1.5px;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-text);
  letter-spacing: -0.2px;
  animation: morphOut 0.4s ease 7.6s forwards;
}
@keyframes morphOut {
  to { opacity: 0; transform: translateY(-30%) scale(1.02); filter: blur(1.5px); }
}

/* Zone 1: prefix — "The" ↕ "더" 수직 롤링 */
.zone-prefix {
  position: relative;
  display: inline-block;
  height: 28px;
  line-height: 28px;
  overflow: hidden;
  vertical-align: middle;
}
.pre-the, .pre-deo {
  display: block;
  height: 28px;
  line-height: 28px;
}
.pre-deo { transform: translateY(100%); }
.pre-the { animation: preTheRoll 1.4s cubic-bezier(.6,0,.4,1) 0s forwards; }
.pre-deo { animation: preDeoRoll 1.4s cubic-bezier(.6,0,.4,1) 0s forwards; }
@keyframes preTheRoll {
  0%, 85% { transform: translateY(0); opacity: 1; }
  100%    { transform: translateY(-100%); opacity: 0; }
}
@keyframes preDeoRoll {
  /* pre-deo 는 pre-the 뒤에 블록으로 쌓여 자연 y=28 에서 시작한다.
     translateY(100%) → y=56(컨테이너 밖 아래), translateY(-100%) → y=0(가시 영역 상단) */
  0%, 85% { transform: translateY(100%); opacity: 0; }
  100%    { transform: translateY(-100%); opacity: 1; }
}

/* Zone 2: wave — 2.8s 에 0 → 16px 폭으로 확장하며 뒤 텍스트를 오른쪽으로 민다 */
.zone-wave {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: waveExpand 0.4s ease 2.8s forwards;
}
@keyframes waveExpand {
  to { max-width: 16px; }
}
.wave {
  display: inline-block;
  color: #ff9a3d;
  font-weight: 900;
  margin: 0 1px;
  opacity: 0;
  transform-origin: center;
  animation: waveFadeIn 0.3s ease 2.85s forwards,
             waveBounce 1.4s ease-in-out 3.3s infinite;
}
@keyframes waveFadeIn { to { opacity: 1; } }
@keyframes waveBounce {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50%      { transform: translateY(-2px) scaleX(1.25); }
}

/* Zone 3: suffix — "랜덤박스" 는 항상 유지, 내부에 숨은 . . 이 4.2s에 확장 */
.zone-suffix {
  display: inline-block;
  white-space: nowrap;
}
.zone-suffix .dot {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 900;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
}
.zone-suffix .dot.d1 { animation: dotExpand 0.4s ease 4.2s forwards; }
.zone-suffix .dot.d2 { animation: dotExpand 0.4s ease 4.35s forwards; }
@keyframes dotExpand {
  to { max-width: 10px; opacity: 1; margin: 0 1px; }
}

/* stage-5 축하 🎉 */
.zone-suffix .celebrate {
  display: inline-block;
  margin-left: 4px;
  font-size: 16px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform-origin: center;
  animation: celebrateExpand 0.2s ease 5.8s forwards,
             celebratePop 0.8s cubic-bezier(.2,.8,.2,1.4) 5.9s forwards,
             celebrateWiggle 1.0s ease-in-out 7.0s 1 forwards;
}
@keyframes celebrateExpand { to { max-width: 24px; } }
@keyframes celebratePop {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  40%  { opacity: 1; transform: scale(1.3) rotate(10deg); }
  70%  { transform: scale(0.95) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes celebrateWiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-10deg); }
  75%      { transform: rotate(10deg); }
}

/* stage-final "더.랜.덤." — 7.8s 에 페이드인, 이후 무한 유지 */
.stage-final .ch { display: inline-block; }
.stage-final .dot {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 900;
  margin: 0 1px;
}
.stage-final {
  animation: finalIn 0.5s ease 7.8s both;
}
@keyframes finalIn {
  0%   { opacity: 0; transform: translateY(-30%) scale(.96); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(-50%) scale(1);    filter: blur(0); }
}

/* body.logo-static — 애니메이션 스킵 (최근 30분 이내 한번 본 경우) */
body.logo-static .logo-morph { display: none; }
body.logo-static .stage-final {
  animation: none;
  opacity: 1;
  transform: translateY(-50%);
}

/* 접근성: 모션 감소 선호 시 즉시 최종 상태 */
@media (prefers-reduced-motion: reduce) {
  .logo-morph { display: none; }
  .stage-final { animation: none; opacity: 1; transform: translateY(-50%); }
}
.header-right { display: flex; align-items: center; gap: var(--space-2); }
.header-right .icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-sub);
  background: var(--color-surface);
  transition: background .15s ease, color .15s ease;
}
.header-right .icon-btn:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  text-decoration: none;
}
.header-right .icon-btn svg { width: 20px; height: 20px; }

/* 콘텐츠 */
/* iOS Safari 하단 URL 바가 안전영역에 포함되지 않아 콘텐츠가 가려지는 현상이 있어
   safe-area + 여분 buffer를 더 넉넉히 준다. */
.app-main {
  flex: 1;
  padding: var(--space-4);
  padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + var(--space-6));
}

/* 하단 네비 (fixed) */
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--container-max);
  height: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--color-border);
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color .15s ease;
}
.bottom-nav a:hover { color: var(--color-text-sub); text-decoration: none; }
.bottom-nav a.active { color: var(--color-primary); }
.bottom-nav svg { width: 22px; height: 22px; }
.bottom-nav .tab-icon { display: inline-flex; align-items: center; justify-content: center; }

/* 박스구매 탭 — 중앙 강조 (원형 배지) */
.bottom-nav a.featured {
  position: relative;
  justify-content: flex-end;
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}
.bottom-nav a.featured .tab-icon {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg,#7b5bff 0%,#5b5bff 55%,#3d7bff 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 8px 20px rgba(91,91,255,.45), 0 0 0 4px var(--color-bg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bottom-nav a.featured .tab-icon svg { width: 28px; height: 28px; }
.bottom-nav a.featured span:last-child {
  margin-top: 24px;
  font-size: 11px;
}
.bottom-nav a.featured:hover .tab-icon { transform: translateX(-50%) translateY(-2px); }
.bottom-nav a.featured:hover { color: var(--color-primary); }
.bottom-nav a.featured.active .tab-icon {
  box-shadow: 0 10px 24px rgba(91,91,255,.6), 0 0 0 4px var(--color-bg);
}

/* 섹션 */
.section { margin-bottom: var(--space-7); }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.section-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.section-more {
  color: var(--color-text-sub);
  font-size: var(--text-sm);
}

/* 가로 스크롤 */
.hscroll {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex-shrink: 0; }

/* hover 글로우(box-shadow)가 위/아래로 퍼지는 카드 영역엔 별도 변형 클래스로 충분한 패딩을 줘서 잘리지 않도록 한다 */
.hscroll.hscroll-glow {
  padding-top: 12px;
  padding-bottom: 16px;
  margin-top: -12px;
  margin-bottom: -16px;
}

/* 토스트 */
.toast-layer {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + var(--space-4));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  width: calc(100% - 2 * var(--space-4));
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  width: 100%;
  box-sizing: border-box;
  background: rgba(17,24,39,0.92);
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-md);
  animation: toast-in .2s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}