/* ============================================================ */
/* [Priority] Page-wide horizontal scroll block */
/* ============================================================ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

main {
  overflow-x: hidden;
  max-width: 100vw;
}

.main_container {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.main_container .com_center_wrap {
  overflow-x: hidden !important;
  overflow-y: visible;
  position: relative;
  max-width: 100% !important;
}

/* ============================================================ */
/* Daily Activity - Swiper Slider (3 cards per page) */
/* ============================================================ */
.main_daily_swiper {
  margin: 0;
  padding: 8px 0 0;
  width: 100%;
  overflow: hidden;
}

.DailySwiper {
  width: 100%;
  overflow: hidden;
}

.DailySwiper .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

.DailySwiper .swiper-slide .daily_card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  box-sizing: border-box;
}

.com_Main.p_Index .DailySwiper .swiper-horizontal > .swiper-pagination-bullets,
.com_Main.p_Index .DailySwiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.com_Main.p_Index .DailySwiper .swiper-pagination-custom,
.com_Main.p_Index .DailySwiper .swiper-pagination-fraction {
  position: relative;
  bottom: auto;
  margin-top: 20px;
}

/* ============================================================ */
/* Daily Card - Base (Mobile) */
/* ============================================================ */
.daily_card {
  width: 100%;
  min-height: 175px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1.5px solid #E5E5E5;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  text-decoration: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.daily_card.is_done {
  width: 100%;
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
  opacity: 0.75;
  padding: 14px 8px;
}

.daily_card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.daily_card__icon {
  margin-top: 18px;
  margin-bottom: 8px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily_card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.daily_card__title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px;
  line-height: 1.2;
}

.daily_card__sub {
  font-size: 11px;
  color: #999;
  margin: 0 0 auto;
}

.daily_card__sub_done {
  font-size: 11px;
  color: #BBB;
  margin: 0;
}

.daily_card__point {
  background: #E1F5EE;
  color: #0F6E56;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  line-height: 1;
}

.daily_card__point .png_icon {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  display: block;
  flex-shrink: 0;
}

/* Badge - common */
.daily_card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 600;
  z-index: 2;
}

/* Recommended card */
.daily_card.is_recommended {
  border: 2px solid #FF8C00;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F0 100%);
  box-shadow: 0 4px 16px rgba(255, 140, 0, 0.2);
  animation: card_rec_glow 2.5s ease-in-out infinite;
}

@keyframes card_rec_glow {
  0%, 100% { 
    box-shadow: 0 4px 16px rgba(255, 140, 0, 0.2);
  }
  50% { 
    box-shadow: 0 6px 22px rgba(255, 140, 0, 0.35);
  }
}

.daily_card__badge--rec {
  background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(255, 140, 0, 0.35);
  animation: badge_rec_pulse 1.8s ease-in-out infinite;
}

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


/* In-progress card */
.daily_card.is_progress {
  border: 2.5px solid #00A578;
  background: linear-gradient(135deg, #FFFFFF 0%, #F0FAF6 100%);
  box-shadow: 0 4px 16px rgba(0, 165, 120, 0.18);
  animation: card_progress_glow 2s ease-in-out infinite;
}

@keyframes card_progress_glow {
  0%, 100% { 
    box-shadow: 0 4px 16px rgba(0, 165, 120, 0.18);
  }
  50% { 
    box-shadow: 0 6px 20px rgba(0, 165, 120, 0.3);
  }
}

.daily_card__badge--ing {
  background: linear-gradient(135deg, #00A578 0%, #008A64 100%);
  color: #FFFFFF;
  font-weight: 700;
  padding-left: 18px !important;
  box-shadow: 0 2px 6px rgba(0, 165, 120, 0.35);
}

.daily_card__badge--ing::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #FFEB3B;
  border-radius: 50%;
  animation: live_dot_blink 1s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 235, 59, 0.8);
}

@keyframes live_dot_blink {
  0%, 100% { 
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% { 
    opacity: 0.5;
    transform: translateY(-50%) scale(1.3);
  }
}

/* Done card */
.daily_card.is_done .daily_card__icon {
  margin-top: 22px;
  width: 32px;
  height: 32px;
  filter: grayscale(0.4);
}

.daily_card.is_done .daily_card__title {
  font-size: 11px;
  font-weight: 500;
  color: #777;
}

.daily_card__badge--done {
  background: #999;
  color: #FFFFFF;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================ */
/* PC (1024px+) - Larger cards, 5 per page */
/* ============================================================ */
@media screen and (min-width: 1024px) {
  .daily_card {
    min-height: 230px;
    padding: 20px 16px;
    border-radius: 18px;
  }
  
  .daily_card.is_done {
    padding: 20px 10px;
  }
  
  .daily_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  
  .daily_card.is_recommended:hover {
    box-shadow: 0 8px 28px rgba(255, 140, 0, 0.28);
  }
  
  .daily_card.is_progress:hover {
    box-shadow: 0 8px 28px rgba(0, 165, 120, 0.25);
  }

  .daily_card__icon {
    width: 72px;
    height: 72px;
    margin-top: 22px;
    margin-bottom: 12px;
  }
  
  .daily_card.is_done .daily_card__icon {
    width: 44px;
    height: 44px;
    margin-top: 28px;
  }
  
  .daily_card__title {
    font-size: 17px;
    margin-bottom: 6px;
  }
  
  .daily_card.is_done .daily_card__title {
    font-size: 13px;
  }
  
  .daily_card__sub {
    font-size: 13px;
    margin-bottom: 12px;
  }
  
  .daily_card__sub_done {
    font-size: 12px;
  }
  
  .daily_card__point {
    font-size: 14px;
    padding: 7px 16px;
    margin-top: 4px;
  }
  
  .daily_card__point .png_icon {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
  }
  
  .daily_card__badge {
    font-size: 12px;
    padding: 4px 10px;
    top: 12px;
    left: 12px;
  }
  
  .daily_card__badge--done {
    width: 24px;
    height: 24px;
    font-size: 14px;
    top: 10px;
  }
}

/* Small mobile (max 360px) */
@media screen and (max-width: 360px) {
  .daily_card {
    min-height: 165px;
    padding: 12px 10px;
  }
  
  .daily_card__icon {
    width: 42px;
    height: 42px;
    margin-top: 16px;
  }
}

/* ============================================================ */
/* Quiz menu - New badge */
/* ============================================================ */
.quiz-menu {
  position: relative;
}

.badge-new {
  position: absolute;
  top: 0px;
  right: 0px;
  transform: translate(30%, -30%);
  background-color: #FF3B30;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 999px;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================================ */
/* Eco pet status notice */
/* ============================================================ */
.eco_pet_status_notice {
  background: #fff;
  padding: 20px 5px 0;
}

.pet_status_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 30px;
  padding: 10px 16px;
  background-color: #dcffe4;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  color: #000;
  border: 1px solid #005312;
}

.status_left {
  display: flex;
  align-items: center;
}

.status_icon {
  font-size: 16px;
  margin-right: 6px;
}

.status_text {
  font-weight: 500;
}

.status_btn {
  background: #005f4c;
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 30px;
  text-decoration: none;
  white-space: nowrap;
}

.pet_status_inner.healthy {
  background-color: #dcffe4;
  border-color: #005312;
}

.pet_status_inner.sick {
  background-color: #fff4d1;
  border-color: #e09600;
}

.pet_status_inner.dead {
  background-color: #ffe4e4;
  border-color: #d20000;
}

.pet_status_inner.no_pet {
  background-color: #f1f1f1;
  border-color: #aaa;
}

@media screen and (min-width: 1024px) {
  .pet_status_inner {
    justify-content: center;
    text-align: center;
    padding: 14px 24px;
    font-size: 20px;
  }

  .status_left {
    justify-content: center;
    width: 100%;
  }

  .status_btn {
    margin-left: 16px;
    font-size: 14px;
  }

  .status_btn:hover {
    background-color: #004438;
    transition: background-color 0.2s ease;
  }
}

/* ============================================================ */
/* System upgrade popup */
/* ============================================================ */
.pop_system_upgrade .pop_container {
  width: 100% !important;
  height: 100%;
  max-width: 100% !important;
  border-radius: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .pop_system_upgrade .pop_container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.pop_system_upgrade .content_container {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.pop_system_upgrade .system_upgrade_notice {
  text-align: center;
  padding: 20px 0;
}

.pop_system_upgrade .notice_icon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pop_system_upgrade .notice_icon img {
  width: 120px;
  height: auto;
  max-width: 100%;
}

.pop_system_upgrade .notice_tit {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 24px;
}

.pop_system_upgrade .notice_content {
  text-align: left;
}

.pop_system_upgrade .notice_date {
  background: #fff4e6;
  border: 1px solid #ffd89b;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pop_system_upgrade .date_label {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.pop_system_upgrade .date_value {
  font-size: 16px;
  color: #333;
  font-weight: 700;
}

.pop_system_upgrade .notice_desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
}

.pop_system_upgrade .notice_resume {
  background: #e8f5e9;
  border: 1px solid #81c784;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pop_system_upgrade .resume_label {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.pop_system_upgrade .resume_value {
  font-size: 16px;
  color: #2e7d32;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .pop_system_upgrade .pop_container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .pop_system_upgrade .content_container {
    max-width: 90%;
    padding: 0 15px;
  }

  .pop_system_upgrade .notice_icon {
    margin-bottom: 12px;
  }

  .pop_system_upgrade .notice_icon img {
    width: 100px;
  }

  .pop_system_upgrade .notice_tit {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .pop_system_upgrade .notice_date,
  .pop_system_upgrade .notice_resume {
    padding: 12px;
  }

  .pop_system_upgrade .date_value,
  .pop_system_upgrade .resume_value {
    font-size: 15px;
  }

  .pop_system_upgrade .notice_desc {
    font-size: 13px;
  }
}

/* Carbon info button (alert style) */
.carbon_info_btn {
  cursor: pointer;
  margin-left: 6px;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  opacity: 1;
  animation: carbon_btn_pulse 2s ease-in-out infinite;
  transition: transform 0.2s;
  vertical-align: -3px;
}

.tree_info_line {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.tree_info_line .carbon_info_btn {
  margin-left: 0 !important;
}

.carbon_info_btn:hover {
  transform: scale(1.15);
}

@keyframes carbon_btn_pulse {
  0%, 100% { 
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 107, 53, 0));
  }
  50% { 
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(255, 107, 53, 0.6));
  }
}

/* Carbon info popup content */
.carbon_info {
  padding: 10px 4px;
}

.carbon_info__head {
  text-align: center;
  margin-bottom: 20px;
}

.carbon_info__tit {
  font-size: 18px;
  font-weight: 700;
  color: #1D9E75;
  margin: 0 0 6px;
}

.carbon_info__sub {
  font-size: 13px;
  color: #888;
  margin: 0;
}

.carbon_info__measure {
  background: #E1F5EE;
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  margin-bottom: 16px;
}

.carbon_info__measure .label {
  font-size: 12px;
  color: #0F6E56;
  margin: 0 0 6px;
  font-weight: 500;
}

.carbon_info__measure .value {
  font-size: 26px;
  font-weight: 700;
  color: #0F6E56;
  margin: 0;
}

.carbon_info__measure .value span {
  font-size: 14px;
  font-weight: 500;
  margin-left: 4px;
}

.carbon_info__compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.carbon_info__compare__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F9F9F9;
  border-radius: 10px;
  padding: 14px 16px;
}

.carbon_info__compare__item .icon {
  font-size: 30px;
  flex-shrink: 0;
}

.carbon_info__compare__item p {
  font-size: 15px;
  color: #444;
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.carbon_info__compare__item b {
  color: #1D9E75;
  font-weight: 700;
  font-size: 16px;
}

.carbon_info__note {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin: 0;
}

/* Carbon popup - PC */
@media screen and (min-width: 1024px) {
  .pop_carbon_info .pop_container.m {
    max-width: 480px;
  }
  
  .carbon_info {
    padding: 20px 10px;
  }
  
  .carbon_info__tit {
    font-size: 22px;
  }
  
  .carbon_info__sub {
    font-size: 14px;
  }
  
  .carbon_info__measure .value {
    font-size: 32px;
  }
  
  .carbon_info__measure .value span {
    font-size: 16px;
  }
  
  .carbon_info__compare__item p {
    font-size: 16px;
  }
  
  .carbon_info__compare__item b {
    font-size: 17px;
  }
  
  .carbon_info__compare__item .icon {
    font-size: 34px;
  }
}

/* ============================================================ */
/* Streak card (green tone + clover) */
/* ============================================================ */
.streak_card {
  background: linear-gradient(135deg, #E1F5EE 0%, #D4F0DE 100%);
  border-radius: 14px;
  margin: 16px 0 0 0;
  overflow: hidden;
  border: 1px solid rgba(29, 158, 117, 0.15);
}

.streak_card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px;
  cursor: pointer;
  user-select: none;
}

.streak_card__header__left {
  flex-shrink: 0;
  min-width: 0;
  margin-right: auto;
}

.streak_card__label {
  font-size: 14px;
  color: #0F6E56;
  font-weight: 500;
  margin: 0 0 2px;
}

.streak_card__days {
  font-size: 16px;
  color: #1D9E75;
  font-weight: 500;
  margin: 0 0 2px;
}

.streak_card__days b {
  font-size: 26px;
  font-weight: 700;
  color: #0F6E56;
  margin-right: 1px;
}

.streak_card__msg {
  font-size: 12px;
  color: #0F6E56;
  opacity: 0.75;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  transition: all 0.3s ease;
}

/* 페이지 로드 직후엔 트랜지션 없이 즉시 적용 */
.streak_card.no-transition,
.streak_card.no-transition * {
  transition: none !important;
}

.streak_card.collapsed .streak_card__msg {
  max-height: 0;
  opacity: 0;
  margin-top: -2px;
}

.streak_card__week {
  display: flex;
  gap: 5px;
  align-items: center;
  transition: max-width 0.3s ease, opacity 0.3s ease, gap 0.3s ease;
  overflow: hidden;
  max-width: 500px;
}

.streak_card.collapsed .streak_card__week {
  max-width: 0;
  opacity: 0;
  gap: 0;
}

.streak_day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.streak_day__label {
  font-size: 10px;
  color: #0F6E56;
  opacity: 0.5;
  font-weight: 500;
}

.streak_day.today .streak_day__label {
  font-weight: 700;
  opacity: 1;
  color: #1D9E75;
}

.streak_day__box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  transition: all 0.2s;
}

.streak_day.done .streak_day__box {
  background: #1D9E75;
}

.streak_day.today:not(.done) .streak_day__box {
  border: 1.5px dashed #1D9E75;
  background: rgba(255, 255, 255, 0.95);
}

.streak_day.future .streak_day__box {
  background: rgba(255, 255, 255, 0.4);
  opacity: 0.5;
}

.streak_day__clover {
  font-size: 17px;
  line-height: 1;
  filter: brightness(1.1) saturate(1.2);
}

.streak_day.missed .streak_day__box {
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(220, 100, 100, 0.2);
}

.streak_day__sad {
  font-size: 17px;
  line-height: 1;
  opacity: 0.7;
}

.streak_card__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  opacity: 0.6;
  width: 20px;
  height: 20px;
}

.streak_card.collapsed .streak_card__toggle {
  transform: rotate(-90deg);
}

/* Streak card - PC */
@media screen and (min-width: 1024px) {
  .streak_card {
    margin: 20px 0 0 0;
    border-radius: 18px;
  }
  
  .streak_card__header {
    padding: 24px 32px;
    gap: 28px;
  }
  
  .streak_card__label {
    font-size: 17px;
    margin-bottom: 8px;
    font-weight: 600;
  }
  
  .streak_card__days {
    font-size: 20px;
    margin-bottom: 6px;
  }
  
  .streak_card__days b {
    font-size: 42px;
  }
  
  .streak_card__msg {
    font-size: 15px;
    max-width: 280px;
    font-weight: 500;
  }
  
  .streak_card__week {
    gap: 10px;
  }
  
  .streak_day {
    gap: 8px;
  }
  
  .streak_day__label {
    font-size: 15px;
    font-weight: 600;
  }
  
  .streak_day__box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  
  .streak_day__clover,
  .streak_day__sad {
    font-size: 26px;
  }
  
  .streak_card__toggle {
    width: 28px;
    height: 28px;
  }
  
  .streak_card__toggle svg {
    width: 22px;
    height: 22px;
  }
}

@media screen and (max-width: 1023px) {
  .streak_card__header {
    padding: 16px 18px 18px;
    gap: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto auto;
    align-items: center;
    transition: padding 0.3s ease;
  }
  
  .streak_card__header__left {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
  }
  
  .streak_card__label {
    font-size: 13px;
    margin-bottom: 6px;
    font-weight: 600;
  }
  
  .streak_card__days {
    font-size: 15px;
    margin: 0;
    line-height: 1;
  }
  
  .streak_card__days b {
    font-size: 36px;
    line-height: 1;
    margin-right: 2px;
  }
  
  .streak_card__toggle {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 16px;
    height: 16px;
    align-self: center;
  }
  
  .streak_card__toggle svg {
    width: 14px;
    height: 14px;
  }
  
  /* Calendar - below N days, full width */
  .streak_card__week {
    grid-column: 1 / 3;
    grid-row: 3;
    gap: 6px;
    justify-content: space-between;
    margin-top: 18px;
    display: flex;
    width: 100%;
  }
  
  .streak_day {
    flex: 1;
    max-width: 42px;
  }
  
  .streak_day__box {
    width: 100%;
    height: 36px;
    border-radius: 6px;
  }
  
  .streak_day__label {
    font-size: 12px;
  }
  
  .streak_day__clover,
  .streak_day__sad {
    font-size: 17px;
  }
  
  /* Message - smaller */
  .streak_card__msg {
    display: block;
    grid-column: 1 / 3;
    grid-row: 4;
    font-size: 12px;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    margin-top: 14px;
    text-align: left;
    line-height: 1.4;
    font-weight: 500;
    color: #0F6E56;
    opacity: 0.8;
    transition: all 0.3s ease;
  }
  
  /* Collapsed state */
  .streak_card.collapsed .streak_card__header {
    padding: 14px 18px;
  }
  
  .streak_card.collapsed .streak_card__label {
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  .streak_card.collapsed .streak_card__days {
    font-size: 14px;
  }
  
  .streak_card.collapsed .streak_card__days b {
    font-size: 26px;
  }
  
  .streak_card.collapsed .streak_card__week,
  .streak_card.collapsed .streak_card__msg {
    display: none;
  }
}

/* Streak card - Small mobile (max 380px) */
@media screen and (max-width: 380px) {
  .streak_card__header {
    padding: 14px 14px 16px;
  }
  
  .streak_card__label {
    font-size: 12px;
  }
  
  .streak_card__days b {
    font-size: 30px;
  }
  
  .streak_card__week {
    gap: 4px;
    margin-top: 14px;
  }
  
  .streak_day__box {
    height: 32px;
  }
  
  .streak_day__label {
    font-size: 11px;
  }
  
  .streak_day__clover,
  .streak_day__sad {
    font-size: 15px;
  }
  
  .streak_card__msg {
    font-size: 11px;
    margin-top: 12px;
  }
}

/* Streak card - Smaller mobile (max 360px) */
@media screen and (max-width: 360px) {
  .streak_card__header {
    padding: 14px 12px 14px;
  }
  
  .streak_card__days b {
    font-size: 28px;
  }
  
  .streak_card__week {
    gap: 3px;
  }
  
  .streak_day__box {
    height: 30px;
  }
  
  .streak_day__label {
    font-size: 10px;
  }
  
  .streak_day__clover,
  .streak_day__sad {
    font-size: 14px;
  }
}

/* Streak card - 0 days (start state) */
.streak_card__days--start {
  font-size: 18px;
  color: #1D9E75;
  font-weight: 700;
}

@media screen and (min-width: 1024px) {
  .streak_card__days--start {
    font-size: 22px;
  }
}

@media screen and (max-width: 430px) {
  .streak_card__days--start {
    font-size: 16px;
  }
}

/* ============================================================ */
/* Today's active users LIVE bar */
/* ============================================================ */
.live_users_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid rgba(29, 158, 117, 0.2);
  border-radius: 100px;
  padding: 12px 20px;
  margin: 16px 0 0 0;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.live_users_bar:hover {
  background: #F5FBF8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29, 158, 117, 0.1);
}

.live_users_bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live_dot {
  width: 8px;
  height: 8px;
  background: #FF3B30;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  animation: live_pulse 1.5s ease-in-out infinite;
}

.live_dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: #FF3B30;
  border-radius: 50%;
  opacity: 0.4;
  animation: live_ping 1.5s ease-out infinite;
}

@keyframes live_pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes live_ping {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.live_text {
  font-size: 15px;
  color: #555;
  font-weight: 500;
}

.live_text b {
  color: #1D9E75;
  font-weight: 700;
  font-size: 16px;
}

.live_users_bar__arrow {
  color: #1D9E75;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

@media screen and (min-width: 1024px) {
  .live_users_bar {
    padding: 14px 24px;
    margin: 20px 0 0 0;
  }
  
  .live_text {
    font-size: 16px;
  }
  
  .live_text b {
    font-size: 18px;
  }
}

@media screen and (max-width: 360px) {
  .live_users_bar {
    padding: 10px 14px;
  }
  
  .live_text {
    font-size: 13px;
  }
  
  .live_text b {
    font-size: 14px;
  }
}

/* 이모지 흔들기 - 시간대별 */
.live_emoji {
  display: inline-block;
  transform-origin: 50% 80%;
  margin-right: 2px;
}

/* ☀️ 오전 - 빙글빙글 */
.live_emoji.sun_spin { 
  animation: sun_spin 4s linear infinite; 
}
@keyframes sun_spin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg) scale(1.1); }
}

/* 🔥 오후 - 활활 */
.live_emoji.fire_burn { 
  animation: fire_burn 0.8s ease-in-out infinite; 
}
@keyframes fire_burn {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50% { transform: scale(1.15) rotate(3deg); }
}

/* 🌙 저녁 - 둥실둥실 */
.live_emoji.moon_float { 
  animation: moon_float 3s ease-in-out infinite; 
}
@keyframes moon_float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-3px) rotate(5deg); }
}

/* ============================================================ */
/* App version update popup */
/* ============================================================ */
.pop_app_update .notice_icon {
  margin: 8px 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pop_app_update .bell_wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop_app_update .bell_emoji {
  font-size: 56px;
  position: relative;
  z-index: 2;
  animation: bounce_emoji 1.5s ease-in-out infinite;
  display: inline-block;
}

@keyframes bounce_emoji {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  20% {
    transform: translateY(-8px) rotate(-15deg);
  }
  40% {
    transform: translateY(0) rotate(15deg);
  }
  60% {
    transform: translateY(-4px) rotate(-8deg);
  }
  80% {
    transform: translateY(0) rotate(8deg);
  }
}

.pop_app_update .ping_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 166, 81, 0.2);
  transform: translate(-50%, -50%);
  animation: ping_animation 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.pop_app_update .ping_circle.ping1 {
  animation-delay: 0s;
}

.pop_app_update .ping_circle.ping2 {
  animation-delay: 0.6s;
}

.pop_app_update .ping_circle.ping3 {
  animation-delay: 1.2s;
}

@keyframes ping_animation {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.pop_app_update .notice_desc {
  font-size: 14px;
  color: #888;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 8px;
  font-weight: 400;
}

.pop_app_update .btn_container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  padding-bottom: 20px !important;
}

.pop_app_update .btn_container .com_btn {
  width: 100% !important;
  max-width: none !important;
  height: 54px !important;
  line-height: 54px !important;
  font-size: 16px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pop_app_update .btn_update_later {
  background: none;
  border: none;
  color: #999;
  font-size: 13px;
  cursor: pointer;
  padding: 12px 8px;
  font-family: inherit;
  margin-top: 4px;
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.pop_app_update .btn_update_later:hover {
  color: #555;
}

/* ============================================
   🏆 메인 - 명예의 전당 (가로 3등분)
   실시간 인증 영역과 높이 매칭
   ============================================ */
.com_Main.p_Index .hof_main_card{
	display: flex;
	flex-direction: column;
	background: transparent;
	border: 0;
	padding: 0;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease;
}

.com_Main.p_Index .hof_main_card:hover{
	transform: translateY(-1px);
}

.com_Main.p_Index .hof_main_card__champs{
	display: flex;
	gap: 6px;
	flex: 1;
}

.com_Main.p_Index .hof_main_card__champ{
	flex: 1;
	min-width: 0;
	border-radius: 12px;
	padding: 14px 6px 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: transform 0.15s ease;
}

.com_Main.p_Index .hof_main_card__champ--nation{ background: #e8f4f0; }
.com_Main.p_Index .hof_main_card__champ--area  { background: #eef4f8; }
.com_Main.p_Index .hof_main_card__champ--eco   { background: #f5efe8; }

.com_Main.p_Index .hof_main_card__champ:hover{
	transform: scale(1.02);
}

.com_Main.p_Index .hof_main_card__badge{
	width: 44px;
	height: 44px;
	margin: 0 auto 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.com_Main.p_Index .hof_main_card__badge img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.com_Main.p_Index .hof_main_card__label{
	font-size: 11px;
	font-weight: 700;
	margin: 0 0 3px;
	letter-spacing: -0.2px;
}

.com_Main.p_Index .hof_main_card__champ--nation .hof_main_card__label{ color: #005f4c; }
.com_Main.p_Index .hof_main_card__champ--area   .hof_main_card__label{ color: #0c3a5c; }
.com_Main.p_Index .hof_main_card__champ--eco    .hof_main_card__label{ color: #b27400; }

.com_Main.p_Index .hof_main_card__nick{
	font-size: 13px;
	font-weight: 800;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.3px;
}

.com_Main.p_Index .hof_main_card__champ--nation .hof_main_card__nick{ color: #002d23; }
.com_Main.p_Index .hof_main_card__champ--area   .hof_main_card__nick{ color: #042c53; }
.com_Main.p_Index .hof_main_card__champ--eco    .hof_main_card__nick{ color: #4b3900; }

@media screen and (min-width: 1023.9px){
	/* 카드 자체를 부모 inner 안에서 flex: 1로 늘림 */
	.com_Main.p_Index .hof_main_card{
		flex: 1;
	}
	
	.com_Main.p_Index .hof_main_card__champs{
		gap: 14px;
		height: 100%;
	}
	
	.com_Main.p_Index .hof_main_card__champ{
		padding: 32px 12px 28px;
		border-radius: 16px;
	}
	
	.com_Main.p_Index .hof_main_card__badge{
		width: 90px;
		height: 90px;
		margin-bottom: 16px;
	}
	
	.com_Main.p_Index .hof_main_card__label{
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 6px;
	}
	
	.com_Main.p_Index .hof_main_card__nick{
		font-size: 20px;
		font-weight: 700;
	}
}

/* 배지 컨테이너 - position 기준점 + overflow visible (반짝이 별이 박스 밖으로 나가야 함) */
.com_Main.p_Index .hof_main_card__badge{
	position: relative;
	overflow: visible;
}

/* A. 부드러운 글로우 - 배지 주변 후광 (펄스) */
.com_Main.p_Index .hof_main_card__badge::before{
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 215, 0, 0.45) 0%, transparent 70%);
	z-index: 0;
	animation: hofBadgeGlow 2.4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes hofBadgeGlow{
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.15); }
}

/* C. 반짝이 별 - 배지 모서리에 작은 ✨ */
.com_Main.p_Index .hof_main_card__badge::after{
	content: '✨';
	position: absolute;
	top: -4px;
	right: -2px;
	font-size: 12px;
	line-height: 1;
	z-index: 3;
	animation: hofBadgeSparkle 2.2s ease-in-out infinite;
	pointer-events: none;
	filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
}

@keyframes hofBadgeSparkle{
	0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.7; }
	50%      { transform: scale(1.2) rotate(20deg); opacity: 1; }
}

/* 박스별로 반짝이 타이밍 살짝 다르게 (자연스러움) */
.com_Main.p_Index .hof_main_card__champ--nation .hof_main_card__badge::before{ animation-delay: 0s; }
.com_Main.p_Index .hof_main_card__champ--area   .hof_main_card__badge::before{ animation-delay: 0.4s; }
.com_Main.p_Index .hof_main_card__champ--eco    .hof_main_card__badge::before{ animation-delay: 0.8s; }

.com_Main.p_Index .hof_main_card__champ--nation .hof_main_card__badge::after{ animation-delay: 0.2s; }
.com_Main.p_Index .hof_main_card__champ--area   .hof_main_card__badge::after{ animation-delay: 0.7s; }
.com_Main.p_Index .hof_main_card__champ--eco    .hof_main_card__badge::after{ animation-delay: 1.2s; }

/* C. 샤인 스와이프 - 배지 이미지 위로 빛이 스쳐감 */
.com_Main.p_Index .hof_main_card__badge img{
	position: relative;
	z-index: 2;
}

.com_Main.p_Index .hof_main_card__badge{
	isolation: isolate;
}

.com_Main.p_Index .hof_main_card__champ{
	position: relative;
}

/* PC에서는 더 크게 + 더 화려하게 */
@media screen and (min-width: 1023.9px){
	.com_Main.p_Index .hof_main_card__badge::before{
		inset: -10px;
	}
	
	.com_Main.p_Index .hof_main_card__badge::after{
		font-size: 18px;
		top: -6px;
		right: -4px;
		filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.9));
	}
}

/* 호버 시 효과 강화 */
.com_Main.p_Index .hof_main_card__champ:hover .hof_main_card__badge::before{
	opacity: 1 !important;
	animation-duration: 1.2s;
}

.com_Main.p_Index .hof_main_card__champ:hover .hof_main_card__badge::after{
	animation-duration: 1.2s;
}

/* 모션 감소 설정 사용자 대응 */
@media (prefers-reduced-motion: reduce){
	.com_Main.p_Index .hof_main_card__badge::before,
	.com_Main.p_Index .hof_main_card__badge::after{
		animation: none;
		opacity: 0.5;
	}
}