/* =========================================================
   PLAIN DAYS
   WELLNESS CALENDAR
========================================================= */

:root {
  --sage: #c8d9b2;
  --aqua: #a9d7d2;
  --sky: #a8cfea;
  --teal: #4aa7a3;

  --ink: #3f5853;
}


/* PAGE */

html {
  height: auto !important;

  overflow-x: hidden;
  overflow-y: auto !important;
}


body.wellness-page {
  min-height: 100vh;

  height: auto !important;

  margin: 0;

  overflow-y: auto !important;

  color:
    var(--ink);

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(200,217,178,.21),
      transparent 28%
    ),

    radial-gradient(
      circle at 88% 35%,
      rgba(168,207,234,.16),
      transparent 28%
    ),

    #f2f5f2;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;
}


body.wellness-page * {
  box-sizing: border-box;
}


body.wellness-page a {
  color: inherit;

  text-decoration: none;
}


/* SHELL */

.wellness-shell {
  width:
    min(1020px, calc(100vw - 60px));

  margin:
    0 auto;

  padding:
    28px
    0
    55px;
}



/* TOP BAR */

.wellness-topbar {
  height: 55px;

  padding:
    0
    23px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-radius: 999px;

  background:
    rgba(255,255,255,.47);

  border:
    1px solid rgba(255,255,255,.88);

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.95),
    0 6px 11px rgba(47,74,69,.07),
    0 18px 32px rgba(47,74,69,.07);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}


.wellness-back {
  display: flex;

  align-items: center;

  gap: 11px;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .16em;
}


.wellness-back span:first-child {
  font-size: 17px;
}


.wellness-index {
  font-size: 9px;

  font-weight: 600;

  letter-spacing: .14em;
}



/* HEADING */

.wellness-heading {
  padding:
    52px
    20px
    30px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;
}


.wellness-kicker {
  display: block;

  margin-bottom: 9px;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .14em;

  opacity: .50;
}


.wellness-heading h1 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 64px;

  line-height: .95;

  font-weight: 400;

  letter-spacing: -.045em;
}


.wellness-heading p {
  margin:
    13px 0 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 14px;

  line-height: 1.35;

  font-style: italic;

  opacity: .53;
}



/* YEAR CHIP */

.month-chip {
  min-width: 85px;

  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.58),
      rgba(169,215,210,.16)
    );

  border:
    1px solid rgba(255,255,255,.90);

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.95),
    0 6px 11px rgba(48,76,71,.06);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .12em;
}



/* CALENDAR GLASS */

.wellness-calendar {
  padding:
    26px;

  border-radius: 32px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.48),
      rgba(238,246,244,.17)
    );

  border:
    1px solid rgba(255,255,255,.84);

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.95),
    0 8px 14px rgba(48,73,69,.07),
    0 24px 42px rgba(48,73,69,.07);

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);
}



/* WEEK DAYS */

.calendar-weekdays {
  display: grid;

  grid-template-columns:
    repeat(7,1fr);

  padding:
    0
    5px
    18px;

  text-align: center;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .08em;

  opacity: .48;
}



/* CALENDAR */

.calendar-grid {
  display: grid;

  grid-template-columns:
    repeat(7,1fr);

  gap:
    12px
    10px;
}


.calendar-empty {
  min-height: 104px;
}



/* DAY */

.wellness-day {
  min-height: 104px;

  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 22px;

  border:
    1px solid rgba(255,255,255,.74);

  background:
    rgba(255,255,255,.20);

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.68),
    0 5px 9px rgba(48,73,69,.05);

  transition:
    transform .28s ease,
    box-shadow .28s ease;
}


.wellness-day:hover {
  transform:
    translateY(-4px);

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.84),
    0 9px 16px rgba(48,73,69,.08),
    0 16px 25px rgba(48,73,69,.06);
}



/* NUMBER */

.day-number {
  position: absolute;

  z-index: 5;

  top: 8px;
  left: 10px;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .06em;

  opacity: .55;
}



/* PHOTO */

.day-photo {
  padding: 5px;

  background:
    rgba(255,255,255,.38);
}


.day-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 17px;

  filter:
    saturate(.88)
    brightness(1.035);
}



/* SYMBOL */

.day-symbol {
  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);
}


.day-symbol.sage {
  background:
    rgba(200,217,178,.34);
}


.day-symbol.aqua {
  background:
    rgba(169,215,210,.32);
}


.day-symbol.sky {
  background:
    rgba(168,207,234,.30);
}


.day-symbol.teal {
  background:
    rgba(74,167,163,.25);
}


.day-emoji {
  font-size: 30px;

  filter:
    saturate(.80);

  transform:
    translateY(5px);
}



/* EMPTY */

.day-empty {
  background:
    rgba(255,255,255,.12);

  border:
    1px dashed rgba(65,95,89,.12);

  box-shadow: none;
}


.day-empty::after {
  content: "·";

  font-size: 18px;

  opacity: .15;
}



/* TODAY */

.wellness-day.today {
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.90),

    0 0 0 2px
    rgba(74,167,163,.18),

    0 8px 16px
    rgba(48,73,69,.08),

    -5px 8px 17px
    rgba(169,215,210,.14);
}



/* BOTTOM */

.wellness-bottom {
  min-height: 100px;

  padding:
    24px
    10px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;
}


.month-nav {
  border: 0;

  background: transparent;

  cursor: pointer;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .12em;

  color:
    rgba(54,81,76,.46);
}


.month-nav:last-child {
  justify-self: end;
}


.wellness-progress {
  text-align: center;
}


.wellness-progress span {
  display: block;

  margin-bottom: 5px;

  font-size: 7px;

  font-weight: 600;

  letter-spacing: .14em;

  opacity: .40;
}


.wellness-progress strong {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 16px;

  font-weight: 400;

  opacity: .68;
}



/* MOBILE */

@media (max-width: 700px) {

  .wellness-shell {
    width:
      calc(100vw - 18px);

    padding-top: 10px;
  }


  .wellness-heading {
    padding:
      38px
      10px
      24px;
  }


  .wellness-heading h1 {
    font-size: 50px;
  }


  .wellness-calendar {
    padding:
      16px
      8px;
  }


  .calendar-grid {
    gap:
      7px
      4px;
  }


  .wellness-day,
  .calendar-empty {
    min-height: 72px;
  }


  .wellness-day {
    border-radius: 15px;
  }


  .day-photo img {
    border-radius: 11px;
  }


  .day-emoji {
    font-size: 21px;
  }


  .day-number {
    top: 5px;
    left: 6px;

    font-size: 7px;
  }

}

@media (max-width: 650px) {

  .wellness-day img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;
  }

  .wellness-day {
    overflow: hidden;
  }

}

/* =========================================
   WELLNESS — DESKTOP CALENDAR SIZE FIX
   모든 날짜 칸 동일한 크기로 고정
========================================= */

@media (min-width: 769px) {

  /* 요일 */
  .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
  }

  /* 날짜 전체 그리드 */
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }

  /* 빈 시작 칸 포함 */
  .calendar-empty {
    width: 100%;
    min-width: 0;
  }

  /* 모든 날짜 칸 */
  .wellness-day {
    width: 100%;
    min-width: 0;
    height: 150px;

    box-sizing: border-box;

    position: relative;
    overflow: hidden;

    border-radius: 28px;
  }

  /* 사진 날짜도 동일 */
  .wellness-day.day-photo {
    width: 100%;
    height: 150px;
  }

  /* 사진 자체가 칸 크기에 영향 주지 않게 */
  .wellness-day.day-photo img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    max-width: none;
  }

  /* 이모지 칸 */
  .wellness-day.day-symbol {
    width: 100%;
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 비어있는 날짜 */
  .wellness-day.day-empty {
    width: 100%;
    height: 150px;
  }

  /* 오늘 날짜도 크기는 똑같게 */
  .wellness-day.today {
    width: 100%;
    height: 150px;
  }

  /* 날짜 숫자 */
  .day-number {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 3;
  }

  /* 이모지 */
  .day-emoji {
    position: relative;
    z-index: 2;
  }

}