/* ===== 하루마음 디자인 토큰 ===== */
:root {
  /* 라운드 */
  --radius-card: 24px;        /* 기본 라운드(카드) */
  --radius-small: 16px;       /* 소형 요소(버튼/칩) */
  
  /* 글래스 blur */
  --blur-default: 12px;       /* 기본 blur */
  --blur-modal: 18px;         /* 모달/상단바 blur */
  --blur-performance: 10px;   /* 성능 이슈 시 blur */
  
  /* 포인트 컬러 (#A8E6CF 기반) */
  --color-point: #A8E6CF;           /* 기본 포인트 컬러 */
  --color-point-hover: #B8F6DF;    /* hover 상태 */
  --color-point-active: #98D6BF;   /* active 상태 */
  --color-point-disabled: #78C6AF; /* disabled 상태 */
  
  /* 기존 변수 (호환성 유지) */
  --header-height: 56px;
  --header-gap: 8px;
  --header-radius: var(--radius-card);
  --header-bg: rgba(255, 255, 255, 0.06);
  --header-border: rgba(255, 255, 255, 0.1);
  --header-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* 페이지 기본 여백 통일 */
body {
  padding: 20px;
}

/* 상단 컨테이너: 좌우 정렬 + 하단 여백 (일시정지 오버레이 위에 표시) */
.top-container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 8px 16px;       /* 위/좌우/아래 */
  box-sizing: border-box;
  z-index: 1500;
  position: relative;
}

/* 상단바: sticky + blur */
.top-bar {
  position: sticky;
  top: 8px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: var(--header-gap);
  height: var(--header-height);
  padding: 0 8px;
  background: var(--header-bg);
  border: 1px solid var(--header-border);
  border-radius: var(--header-radius);
  backdrop-filter: blur(var(--blur-modal, 18px));
  -webkit-backdrop-filter: blur(var(--blur-modal, 18px));
  box-shadow: var(--header-shadow);
}

/* 제목 */
.top-title {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 버튼 */
.nav-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-small, 16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
  backdrop-filter: blur(var(--blur-performance, 10px));
}

.nav-btn:active {
  transform: scale(0.97);
}

.nav-btn.off {
  opacity: 0.5;
}

/* ===== 통일된 완료 모달 ===== */
#completionModal,
.completion-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 18px;
}

#completionModal.isOpen,
.completion-modal.isOpen {
  display: flex;
}

.completion-modal-content {
  width: min(420px, 90vw);
  background: rgba(20, 27, 63, 0.85);
  backdrop-filter: blur(var(--blur-modal, 18px)) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-card, 24px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  animation: slideUpModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

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

.completion-emoji {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
  animation: bounce 0.7s ease infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

.completion-base-message {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 8px;
}

.completion-difficulty-message {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  opacity: 0.9;
}

.completion-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.completion-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-small, 16px);
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.completion-btn-home {
  background: linear-gradient(135deg, var(--color-point, #A8E6CF), var(--color-point-active, #98D6BF));
  color: #0b1020;
  box-shadow: 0 4px 15px rgba(168, 230, 207, 0.4);
}

.completion-btn-home:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 230, 207, 0.6);
}

.completion-btn-home:active {
  transform: translateY(0);
}

.completion-btn-finish {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  backdrop-filter: blur(var(--blur-default, 12px));
}

.completion-btn-finish:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.completion-btn-finish:active {
  transform: scale(0.98);
}

/* ===== Daily Limit Screen ===== */
#dailyLimitScreen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(var(--blur-modal, 18px));
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: pointer;
  padding: 20px;
}

#dailyLimitScreen.isOpen {
  display: flex;
}

.daily-limit-content {
  text-align: center;
  color: var(--text);
  max-width: 400px;
  padding: 40px 24px;
  animation: fadeInUp 0.5s ease-out;
}

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

.daily-limit-emoji {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 24px;
  animation: gentlePulse 3s ease-in-out infinite;
}

@keyframes gentlePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.95;
  }
}

.daily-limit-message {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 16px;
}

.daily-limit-constellation {
  font-size: 14px;
  color: var(--muted);
  opacity: 0.85;
  margin-top: 12px;
  line-height: 1.5;
  font-weight: 400;
}

.daily-limit-hint {
  font-size: 14px;
  color: var(--muted);
  opacity: 0.8;
  margin-top: 24px;
  display: none; /* 기본값 숨김 (FOUC 방지) */
}

/* ===== Constellation Trace (Day 12) ===== */
.constellation-trace {
  display: flex;
  gap: 6px;
  opacity: 0.20;
  pointer-events: none;
  margin-top: 12px;
}

.trace-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-point);
}

body.is-locked-today .constellation-trace {
  opacity: 0.25;
}

/* ===== 세션 전환 (진입 준비 / 완료 머무름) ===== */
.session-transition {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(var(--blur-modal, 18px));
  padding: 20px;
}
.session-transition.isOpen {
  display: flex;
}
.session-transition-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  max-width: 320px;
  line-height: 1.6;
}

/* ===== 일시정지 오버레이 ===== */
.pause-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
body.harumind-paused .pause-overlay {
  display: flex;
}
.pause-overlay-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.95;
}

/* 모바일 미세 조정 */
@media (max-width: 520px) {
  .top-bar {
    padding: 6px;
    gap: 6px;
  }
  .nav-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .top-title {
    font-size: 0.95rem;
  }
  
  .completion-modal-content {
    padding: 24px 20px;
  }
  
  .completion-emoji {
    font-size: 56px;
  }
  
  .completion-base-message {
    font-size: 16px;
  }
  
  .daily-limit-content {
    padding: 32px 20px;
  }
  
  .daily-limit-emoji {
    font-size: 64px;
    margin-bottom: 20px;
  }
  
  .daily-limit-message {
    font-size: 16px;
  }
  
  .daily-limit-hint {
    font-size: 13px;
  }
}