/*
 * STEP 9-2
 * 별·자음 세트 스티커 UI
 */

.rewardSummaryHost{
  width:100%;
  margin:12px 0 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rewardSummaryCard{
  width:100%;
  box-sizing:border-box;
  border-radius:18px;
  padding:14px 16px;
  box-shadow:
    0 4px 10px rgba(44,35,0,.12);
}

.rewardSummaryStarCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:3px solid #ffe07a;
  background:
    linear-gradient(
      135deg,
      #fffdf1,
      #fff4bd
    );
}

.rewardSummaryStickerCard{
  border:3px solid #d7b6ff;
  background:
    linear-gradient(
      135deg,
      #fffaff,
      #f4e8ff
    );
}

.rewardSummaryCardLeft{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.rewardSummaryCardEmoji{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#fff;
  box-shadow:
    0 3px 8px rgba(72,49,0,.14);
  font-size:27px;
}

.rewardSummaryCardTexts{
  min-width:0;
}

.rewardSummaryCardTitle{
  color:#452d00;
  font-size:19px;
  font-weight:900;
  line-height:1.25;
}

.rewardSummaryStickerCard
.rewardSummaryCardTitle{
  color:#54218a;
}

.rewardSummaryCardDescription{
  margin-top:3px;
  color:#746027;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

.rewardSummaryStickerCard
.rewardSummaryCardDescription{
  color:#77569a;
}

.rewardSummaryValue{
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  gap:4px;
  padding:7px 13px;
  border:2px solid #ffcf3e;
  border-radius:999px;
  background:#fff;
  color:#674500;
}

.rewardSummaryValueNumber{
  font-size:26px;
  font-weight:1000;
  line-height:1;
}

.rewardSummaryValueUnit{
  font-size:14px;
  font-weight:900;
}

.rewardSummaryStickerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.rewardSummaryStickerCount{
  flex:0 0 auto;
  padding:7px 12px;
  border:2px solid #bb7cff;
  border-radius:999px;
  background:#fff;
  color:#6324a3;
  font-size:17px;
  font-weight:1000;
}

.rewardSummaryStickerGrid{
  margin-top:13px;
  display:grid;
  grid-template-columns:
    repeat(7,minmax(0,1fr));
  gap:7px;
}

.rewardSummaryStickerItem{
  position:relative;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  font-size:20px;
  font-weight:1000;
  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

.rewardSummaryStickerItem.acquired{
  border:2px solid #9b50ec;
  background:
    linear-gradient(
      145deg,
      #c487ff,
      #8b43db
    );
  color:#fff;
  box-shadow:
    0 3px 7px rgba(87,31,143,.25);
}

.rewardSummaryStickerItem.acquired:hover{
  transform:translateY(-2px);
}

.rewardSummaryStickerItem.locked{
  border:2px solid #e2d6ed;
  background:#f5f1f8;
  color:#b8aabd;
}

.rewardSummaryStickerLetter{
  line-height:1;
}

.rewardSummaryStickerState{
  position:absolute;
  top:-5px;
  right:-4px;
  width:17px;
  height:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#ffe34f;
  color:#5a3e00;
  font-size:11px;
  font-weight:1000;
}

.rewardSummaryLoading,
.rewardSummaryError{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  border:3px solid #e7ddba;
  background:#fffdf3;
}

.rewardSummaryError{
  border-color:#ffc0c0;
  background:#fff5f5;
}

.rewardSummaryLoadingEmoji{
  font-size:24px;
}

.rewardSummaryLoadingText,
.rewardSummaryErrorText{
  font-size:14px;
  font-weight:800;
  color:#705e2d;
}

.rewardSummaryErrorText{
  color:#a44141;
}

@media(max-width:520px){
  .rewardSummaryCard{
    padding:12px;
  }

  .rewardSummaryCardEmoji{
    width:40px;
    height:40px;
    flex-basis:40px;
    font-size:23px;
  }

  .rewardSummaryCardTitle{
    font-size:17px;
  }

  .rewardSummaryCardDescription{
    font-size:11px;
  }

  .rewardSummaryStickerGrid{
    grid-template-columns:
      repeat(7,minmax(0,1fr));
    gap:5px;
  }

  .rewardSummaryStickerItem{
    min-height:34px;
    font-size:18px;
  }
}


/*
 * STEP 9-3
 * 출석 현황 카드
 */

.rewardSummaryAttendanceCard{
  border:3px solid #8fd8bc;
  background:
    linear-gradient(
      135deg,
      #f4fff9,
      #ddf8ed
    );
}

.rewardAttendanceHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.rewardSummaryAttendanceCard
.rewardSummaryCardTitle{
  color:#176849;
}

.rewardSummaryAttendanceCard
.rewardSummaryCardDescription{
  color:#4e806d;
}

.rewardAttendanceToday{
  flex:0 0 auto;
  padding:7px 11px;
  border:2px solid #a6c7bb;
  border-radius:999px;
  background:#fff;
  color:#70887f;
  font-size:13px;
  font-weight:900;
}

.rewardAttendanceToday.completed{
  border-color:#3fc58f;
  background:#39bd86;
  color:#fff;
}

.rewardAttendanceStats{
  margin-top:13px;
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:7px;
}

.rewardAttendanceStat{
  min-width:0;
  padding:9px 7px;
  border:2px solid #bee9d8;
  border-radius:12px;
  background:#fff;
  text-align:center;
}

.rewardAttendanceStatLabel{
  display:block;
  color:#55806f;
  font-size:11px;
  font-weight:800;
}

.rewardAttendanceStatValue{
  display:block;
  margin-top:3px;
  color:#176849;
  font-size:18px;
  font-weight:1000;
}

.rewardAttendanceMilestones{
  margin-top:10px;
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:7px;
}

.rewardAttendanceMilestone{
  min-width:0;
  min-height:68px;
  padding:8px 5px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:2px solid #d7e7e1;
  border-radius:12px;
  background:#f5f8f7;
  color:#9ba9a4;
  text-align:center;
}

.rewardAttendanceMilestone.achieved{
  border-color:#47c994;
  background:
    linear-gradient(
      145deg,
      #e9fff6,
      #c9f5e3
    );
  color:#176849;
  box-shadow:
    0 3px 7px rgba(23,104,73,.14);
}

.rewardAttendanceMilestoneEmoji{
  font-size:21px;
  line-height:1;
}

.rewardAttendanceMilestoneDays{
  margin-top:4px;
  font-size:13px;
  font-weight:1000;
}

.rewardAttendanceMilestoneLabel{
  margin-top:2px;
  font-size:10px;
  font-weight:800;
}

.rewardAttendanceNext{
  margin-top:10px;
  padding:8px 10px;
  border-radius:11px;
  background:#fff;
  color:#38715c;
  font-size:12px;
  font-weight:900;
  text-align:center;
}

@media(max-width:520px){
  .rewardAttendanceHeader{
    align-items:flex-start;
  }

  .rewardAttendanceStats{
    gap:5px;
  }

  .rewardAttendanceStat{
    padding:8px 3px;
  }

  .rewardAttendanceStatLabel{
    font-size:10px;
  }

  .rewardAttendanceStatValue{
    font-size:16px;
  }

  .rewardAttendanceMilestones{
    gap:5px;
  }

  .rewardAttendanceMilestone{
    min-height:64px;
    padding:6px 3px;
  }
}

/* ===== STEP 9-3A DASHBOARD REWARD START ===== */

#rewardSummaryHost.rewardSummaryHost{
  margin:12px 0 0;
  gap:11px;
}

.dashboardLeft .rewardSummaryCard{
  padding:13px;
  border-radius:17px;
}

.dashboardLeft .rewardSummaryCardEmoji{
  width:42px;
  height:42px;
  flex-basis:42px;
  font-size:24px;
}

.dashboardLeft .rewardSummaryCardTitle{
  font-size:18px;
}

.dashboardLeft .rewardSummaryCardDescription{
  font-size:11px;
}

.dashboardLeft .rewardSummaryStickerGrid{
  grid-template-columns:
    repeat(7,minmax(0,1fr));
  gap:5px;
}

.dashboardLeft .rewardSummaryStickerItem{
  min-height:34px;
  font-size:18px;
}

.dashboardLeft .rewardAttendanceStats,
.dashboardLeft .rewardAttendanceMilestones{
  gap:5px;
}

.dashboardLeft .rewardAttendanceStat{
  padding:8px 3px;
}

.dashboardLeft .rewardAttendanceStatLabel{
  font-size:10px;
}

.dashboardLeft .rewardAttendanceStatValue{
  font-size:16px;
}

.dashboardLeft .rewardAttendanceMilestone{
  min-height:62px;
  padding:6px 3px;
}

@media(max-width:820px){
  #rewardSummaryHost.rewardSummaryHost{
    margin-top:12px;
  }

  .dashboardLeft .rewardSummaryCard{
    padding:14px;
  }
}

/* ===== STEP 9-3A DASHBOARD REWARD END ===== */

/* ===== STEP 9-3A-2 EQUAL HEIGHT START ===== */

/*
 * dashboardTop의 두 열을 같은 높이로 늘립니다.
 */
.dashboardTop{
  align-items:stretch !important;
}

.dashboardLeft,
.dashboardRight{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/*
 * 왼쪽 사용자 카드 아래의 보상 영역이
 * 오른쪽 탐험 그림 높이까지 자연스럽게 늘어납니다.
 */
#rewardSummaryHost.rewardSummaryHost{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/*
 * 별과 스티커는 원래 높이를 유지하고,
 * 마지막 출석 카드가 남은 높이를 채웁니다.
 */
#rewardSummaryHost
.rewardSummaryStarCard,
#rewardSummaryHost
.rewardSummaryStickerCard{
  flex:0 0 auto;
}

#rewardSummaryHost
.rewardSummaryAttendanceCard{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}

/*
 * 출석 카드의 다음 보상 안내를 카드 아래에 붙여
 * 오른쪽 컬렉션 카드와 하단선이 맞도록 합니다.
 */
#rewardSummaryHost
.rewardAttendanceNext{
  margin-top:auto;
}

/*
 * 모바일에서는 강제 높이 확장을 해제합니다.
 */
@media(max-width:820px){
  .dashboardLeft,
  .dashboardRight{
    height:auto;
  }

  #rewardSummaryHost.rewardSummaryHost{
    flex:none;
  }

  #rewardSummaryHost
  .rewardSummaryAttendanceCard{
    flex:none;
  }

  #rewardSummaryHost
  .rewardAttendanceNext{
    margin-top:10px;
  }
}

/* ===== STEP 9-3A-2 EQUAL HEIGHT END ===== */

/* ===== STEP 11-6A ATTENDANCE CALENDAR START ===== */

.rewardAttendanceCalendar{
  width:100%;
  margin-top:12px;
  padding:10px;
  box-sizing:border-box;
  border:2px solid #a9e4ce;
  border-radius:16px;
  background:
    linear-gradient(
      180deg,
      #f9fffc,
      #effcf6
    );
}

.rewardAttendanceCalendarHeader{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-bottom:7px;
  border-radius:12px;
  background:
    linear-gradient(
      135deg,
      #ddf8ed,
      #f8fff9
    );
}

.rewardAttendanceCalendarDecoration{
  font-size:16px;
}

.rewardAttendanceCalendarMonth{
  color:#176849;
  font-size:15px;
  font-weight:1000;
}

.rewardAttendanceWeekGrid,
.rewardAttendanceDayGrid{
  display:grid;
  grid-template-columns:
    repeat(7,minmax(0,1fr));
}

.rewardAttendanceWeekGrid{
  margin-bottom:4px;
  border-radius:9px;
  background:#fff;
}

.rewardAttendanceWeekDay{
  padding:5px 1px;
  color:#557467;
  font-size:10px;
  font-weight:1000;
  text-align:center;
}

.rewardAttendanceWeekDay.sunday,
.rewardAttendanceDay.sunday
.rewardAttendanceDayNumber{
  color:#e35b5b;
}

.rewardAttendanceWeekDay.saturday,
.rewardAttendanceDay.saturday
.rewardAttendanceDayNumber{
  color:#4c78d8;
}

.rewardAttendanceDayGrid{
  gap:3px;
}

.rewardAttendanceDay{
  position:relative;
  min-height:35px;
  padding:3px 1px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #dcebe5;
  border-radius:8px;
  background:#fff;
  color:#537065;
}

.rewardAttendanceDayNumber{
  font-size:9px;
  font-weight:900;
}

.rewardAttendanceDayMark{
  min-height:15px;
  margin-top:2px;
  color:#b3c4bd;
  font-size:13px;
  font-weight:1000;
}

.rewardAttendanceDay.attended{
  border-color:#72d5ad;
  background:
    linear-gradient(
      145deg,
      #e9fff5,
      #c9f5e1
    );
  box-shadow:
    0 2px 5px rgba(23,104,73,.12);
}

.rewardAttendanceDay.attended
.rewardAttendanceDayNumber{
  color:#176849;
}

.rewardAttendanceDay.attended
.rewardAttendanceDayMark{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#39bd86;
  color:#fff;
  font-size:12px;
}

.rewardAttendanceDay.today{
  border:2px solid #ffca48;
  background:#fff9dc;
}

.rewardAttendanceDay.today::after{
  content:"오늘";
  position:absolute;
  top:-5px;
  right:-4px;
  padding:1px 4px;
  border-radius:999px;
  background:#ffca48;
  color:#654600;
  font-size:7px;
  font-weight:1000;
}

.rewardAttendanceDay.outside{
  opacity:.34;
}

.rewardAttendanceDay.future{
  background:#f7f9f8;
  opacity:.55;
}

.rewardAttendanceCalendarLegend{
  margin-top:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#587568;
  font-size:9px;
  font-weight:900;
}

.rewardAttendanceLegendItem{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.rewardAttendanceLegendMark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.rewardAttendanceLegendMark.completed{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#39bd86;
  color:#fff;
  font-size:10px;
}

.rewardAttendanceLegendMark.today{
  padding:2px 5px;
  border:1px solid #ffca48;
  border-radius:999px;
  background:#fff9dc;
  color:#765400;
  font-size:8px;
}

@media(max-width:520px){
  .rewardAttendanceCalendar{
    padding:8px 6px;
  }

  .rewardAttendanceDayGrid{
    gap:2px;
  }

  .rewardAttendanceDay{
    min-height:32px;
  }

  .rewardAttendanceCalendarMonth{
    font-size:14px;
  }
}

/* ===== STEP 11-6A ATTENDANCE CALENDAR END ===== */