:root {
  --bg: #F6F3EE;
  --ink: #2A2531;
  --muted: #857D8C;
  --card: #FFFFFF;
  --line: #EBE6DE;

  --purple: #7C5CFC;
  --purple-deep: #5C3FD6;
  --purple-tint: #EFE9FF;

  --green: #279A63;
  --green-deep: #1D7A4E;
  --green-tint: #E2F5EA;

  --red: #E0604B;
  --red-tint: #FBE6E1;

  --amber: #F0A93B;

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --shadow:
    0 6px 20px
    rgba(42, 37, 49, 0.06);

  --font-ui:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  --font-display:
    "Fraunces",
    serif;
}


/* =====================================================
   기본 설정
===================================================== */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;

  background:
    var(--bg);

  color:
    var(--ink);

  font-family:
    var(--font-ui);

  -webkit-tap-highlight-color:
    transparent;

  overscroll-behavior-y:
    none;
}


body {
  position: relative;

  max-width: 480px;
  min-height: 100vh;

  margin: 0 auto;
}


button,
input,
textarea {
  font: inherit;
}


button {
  border: 0;

  background:
    none;

  color:
    inherit;

  cursor:
    pointer;
}


input {
  font-family:
    inherit;
}


.tabpanel[hidden] {
  display: none;
}


/* =====================================================
   로고
===================================================== */

.rings-mark {
  position: relative;

  display:
    inline-block;
}


.rings-mark .ring {
  position: absolute;

  border-radius:
    50%;

  mix-blend-mode:
    multiply;

  opacity:
    0.88;
}


.rings-mark--lg {
  width: 92px;
  height: 60px;

  margin:
    8px auto 18px;
}


.rings-mark--lg .ring {
  width: 60px;
  height: 60px;
}


.rings-mark--sm {
  width: 34px;
  height: 22px;
}


.rings-mark--sm .ring {
  width: 22px;
  height: 22px;
}


.ring--purple {
  top: 0;
  left: 0;

  background:
    var(--purple);
}


.ring--green {
  top: 0;
  right: 0;

  background:
    var(--green);
}


/* =====================================================
   로그인 화면
===================================================== */

.screen {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding:
    48px 28px 32px;

  text-align:
    center;
}


.pin-title {
  margin:
    0 0 4px;

  font-family:
    var(--font-display);

  font-size:
    26px;

  font-weight:
    600;

  letter-spacing:
    -0.01em;
}


.pin-sub {
  margin:
    0 0 28px;

  color:
    var(--muted);

  font-size:
    14px;
}


.pin-display {
  display: flex;

  gap: 14px;

  margin:
    4px 0 8px;
}


.pin-dot {
  width: 14px;
  height: 14px;

  border:
    1.5px solid
    var(--muted);

  border-radius:
    50%;

  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s;
}


.pin-dot.filled {
  border-color:
    transparent;

  background:
    linear-gradient(
      135deg,
      var(--purple),
      var(--green)
    );

  transform:
    scale(1.1);
}


.pin-dot.shake {
  animation:
    shake 0.4s;
}


@keyframes shake {
  0%,
  100% {
    transform:
      translateX(0);
  }

  25% {
    transform:
      translateX(-4px);
  }

  75% {
    transform:
      translateX(4px);
  }
}


.pin-message {
  min-height: 20px;

  margin:
    0 0 12px;

  color:
    var(--red);

  font-size:
    13px;
}


.keypad {
  width: 100%;
  max-width: 300px;

  display: grid;

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

  gap: 14px;

  margin-top:
    auto;
}


.key {
  aspect-ratio:
    1;

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

  border-radius:
    50%;

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  font-size:
    20px;

  font-weight:
    600;

  transition:
    transform 0.08s;
}


.key:active {
  transform:
    scale(0.93);
}


.key--sub {
  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    500;
}


.key--pound {
  color:
    var(--purple-deep);

  font-size:
    24px;
}


/* =====================================================
   사용자 선택
===================================================== */

.user-pick {
  width: 100%;

  display: flex;

  gap: 16px;

  margin-top:
    12px;
}


.user-card {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;

  padding:
    28px 12px;

  border-radius:
    var(--radius-lg);

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.1s;
}


.user-card:active {
  transform:
    scale(0.96);
}


.user-card__dot {
  width: 40px;
  height: 40px;

  border-radius:
    50%;
}


.user-card--purple .user-card__dot {
  background:
    var(--purple);
}


.user-card--green .user-card__dot {
  background:
    var(--green);
}


.user-card__name {
  font-family:
    var(--font-display);

  font-size:
    18px;

  font-weight:
    600;
}


.user-cancel {
  margin-top:
    24px;
}


/* =====================================================
   앱 공통
===================================================== */

.app {
  min-height: 100vh;

  padding-bottom:
    88px;
}


.topbar {
  position: sticky;
  top: 0;
  z-index: 5;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    16px 20px 14px;

  background:
    var(--bg);
}


.topbar__title {
  flex: 1;

  font-family:
    var(--font-display);

  font-size:
    18px;

  font-weight:
    600;
}


.user-pill {
  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    7px 14px 7px 10px;

  border-radius:
    999px;

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  font-size:
    13px;

  font-weight:
    600;
}


.user-pill__dot {
  width: 16px;
  height: 16px;

  border-radius:
    50%;

  background:
    var(--purple);
}


body.user-미정 .user-pill__dot {
  background:
    var(--green);
}


.tabpanels {
  padding:
    4px 20px 24px;
}


.card {
  padding:
    18px 20px;

  border-radius:
    var(--radius-lg);

  background:
    var(--card);

  box-shadow:
    var(--shadow);
}


.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  margin:
    26px 2px 12px;
}


.section-head--tight {
  margin-top:
    6px;
}


.section-head h2 {
  margin:
    0;

  font-family:
    var(--font-display);

  font-size:
    17px;

  font-weight:
    600;
}


.link-btn {
  color:
    var(--muted);

  font-size:
    13px;

  font-weight:
    500;
}


/* =====================================================
   체중 입력
===================================================== */

.weight-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  margin-bottom:
    10px;
}


.eyebrow {
  color:
    var(--muted);

  font-size:
    12px;

  letter-spacing:
    0.04em;
}


.weight-delta {
  font-size:
    13px;

  font-weight:
    700;
}


.weight-delta.is-down {
  color:
    var(--green-deep);
}


.weight-delta.is-up {
  color:
    var(--red);
}


.weight-card__body {
  display: flex;
  align-items: center;

  gap: 8px;
}


.weight-input {
  width: 130px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--ink);

  font-family:
    var(--font-display);

  font-size:
    40px;

  font-weight:
    600;
}


.weight-input::placeholder {
  color:
    var(--line);
}


.weight-unit {
  margin-right:
    auto;

  color:
    var(--muted);

  font-size:
    14px;
}


.btn-save {
  padding:
    10px 18px;

  border-radius:
    999px;

  background:
    var(--ink);

  color:
    #FFFFFF;

  font-size:
    14px;

  font-weight:
    700;

  transition:
    transform 0.08s;
}


.btn-save:active {
  transform:
    scale(0.96);
}


body.user-민정 .btn-save {
  background:
    var(--purple-deep);
}


body.user-미정 .btn-save {
  background:
    var(--green-deep);
}


/* =====================================================
   식단
===================================================== */

.meal-row {
  display: grid;

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

  gap: 10px;
}


.meal-slot {
  position: relative;

  aspect-ratio:
    1;

  overflow:
    hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding:
    0;

  border-radius:
    var(--radius-md);

  background:
    var(--card);

  box-shadow:
    var(--shadow);
}


.meal-slot__icon {
  color:
    var(--muted);

  font-size:
    22px;
}


.meal-slot__label {
  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    500;
}


.meal-slot img {
  width: 100%;
  height: 100%;

  display:
    block;

  object-fit:
    cover;
}


.meal-slot.has-photo {
  box-shadow:
    none;
}


.meal-slot.has-photo .meal-slot__label {
  position: absolute;

  left: 8px;
  bottom: 6px;

  color:
    #FFFFFF;

  text-shadow:
    0 1px 4px
    rgba(0, 0, 0, 0.55);
}


/* =====================================================
   운동 입력
===================================================== */

.exercise-card {
  display: flex;
  flex-direction: column;

  gap: 16px;
}


.exercise-field {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.exercise-field__label {
  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    700;
}


.exercise-input {
  width: 100%;

  padding:
    11px 12px;

  border:
    0;

  outline:
    0;

  border-radius:
    var(--radius-sm);

  background:
    var(--bg);

  color:
    var(--ink);

  font-size:
    18px;

  font-weight:
    700;
}


.exercise-input:disabled {
  opacity:
    0.5;
}


.intensity-chips {
  display: grid;

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

  gap: 7px;
}


.chip-toggle {
  min-width: 0;

  padding:
    9px 5px;

  border-radius:
    999px;

  background:
    var(--bg);

  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    700;

  text-align:
    center;
}


.chip-toggle.is-active {
  background:
    var(--ink);

  color:
    #FFFFFF;
}


body.user-민정 .chip-toggle.is-active {
  background:
    var(--purple-deep);
}


body.user-미정 .chip-toggle.is-active {
  background:
    var(--green-deep);
}


.chip-toggle--rest.is-active {
  background:
    var(--red) !important;
}


.star-picker {
  display: flex;

  gap: 6px;
}


.star {
  padding:
    0;

  color:
    var(--line);

  font-size:
    26px;

  line-height:
    1;

  transition:
    color 0.1s,
    transform 0.1s;
}


.star.is-active {
  color:
    var(--amber);
}


.star:active {
  transform:
    scale(0.9);
}


.star:disabled {
  opacity:
    0.35;

  cursor:
    default;
}


.exercise-field.is-disabled {
  opacity:
    0.55;
}


.exercise-save {
  align-self:
    flex-start;
}


/* =====================================================
   운동 기록 목록
===================================================== */

.exercise-list,
.exercise-history-list {
  display: flex;
  flex-direction: column;

  gap: 9px;
}


.exercise-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding:
    11px 12px;

  border-radius:
    var(--radius-sm);

  background:
    var(--bg);
}


.exercise-item.is-done {
  border-left:
    4px solid
    var(--green);
}


.exercise-item.is-rest {
  border-left:
    4px solid
    var(--red);
}


.exercise-item strong {
  display: block;

  font-size:
    13px;
}


.exercise-item small {
  display: block;

  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    11px;
}


.exercise-item__del {
  width: 28px;
  height: 28px;

  flex-shrink:
    0;

  border-radius:
    50%;

  color:
    var(--muted);

  font-size:
    18px;

  line-height:
    1;
}


.exercise-item__del:active {
  background:
    var(--line);
}


.exercise-history__intro {
  margin:
    0 0 14px 2px;

  color:
    var(--muted);

  font-size:
    13px;
}


/* =====================================================
   갤러리
===================================================== */

.gallery-list {
  display: flex;
  flex-direction: column;

  gap: 18px;
}


.gallery-day__date {
  margin:
    0 0 8px 2px;

  color:
    var(--muted);

  font-size:
    13px;

  font-weight:
    700;
}


.gallery-day__row {
  display: grid;

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

  gap: 8px;
}


.gallery-photo {
  position: relative;

  aspect-ratio:
    1;
}


.gallery-photo img,
.ph-empty {
  width: 100%;
  height: 100%;

  display:
    block;

  aspect-ratio:
    1;

  border-radius:
    var(--radius-sm);

  background:
    var(--line);

  object-fit:
    cover;
}


.ph-empty {
  opacity:
    0.5;
}


.gallery-photo__label {
  position: absolute;

  left: 7px;
  bottom: 6px;

  color:
    #FFFFFF;

  font-size:
    11px;

  text-shadow:
    0 1px 4px
    #000000;
}


.gallery-photo__del {
  position: absolute;

  top: 4px;
  right: 4px;

  width: 24px;
  height: 24px;

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

  border-radius:
    50%;

  background:
    rgba(0, 0, 0, 0.6);

  color:
    #FFFFFF;

  font-size:
    16px;

  line-height:
    1;
}


.gallery-photo__del:active {
  background:
    rgba(0, 0, 0, 0.82);
}


/* =====================================================
   빈 상태
===================================================== */

.empty-note {
  margin-top:
    40px;

  color:
    var(--muted);

  font-size:
    13px;

  text-align:
    center;
}


.empty-note--tight {
  margin:
    4px 0 0;

  font-size:
    12px;
}


/* =====================================================
   체중 그래프
===================================================== */

.legend {
  display: flex;

  gap: 18px;

  margin-bottom:
    12px;
}


.legend__item {
  display: flex;
  align-items: center;

  gap: 6px;

  color:
    var(--muted);

  font-size:
    13px;
}


.legend__dot {
  display: inline-block;

  width: 10px;
  height: 10px;

  border-radius:
    50%;
}


.legend__dot--purple {
  background:
    var(--purple);
}


.legend__dot--green {
  background:
    var(--green);
}


.range-chips {
  display: flex;

  gap: 8px;

  margin-bottom:
    16px;
}


.chip {
  padding:
    7px 14px;

  border-radius:
    999px;

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  color:
    var(--muted);

  font-size:
    12px;

  font-weight:
    700;
}


.chip.is-active {
  background:
    var(--ink);

  color:
    #FFFFFF;
}


.chart-wrap {
  height: 280px;

  padding:
    16px 12px;

  border-radius:
    var(--radius-lg);

  background:
    var(--card);

  box-shadow:
    var(--shadow);
}


/* =====================================================
   캘린더 사용자 선택
===================================================== */

.cal-user-toggle {
  display: flex;

  gap: 8px;

  margin-bottom:
    14px;
}


.cal-user-btn {
  padding:
    7px 16px;

  border-radius:
    999px;

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  color:
    var(--muted);

  font-size:
    13px;

  font-weight:
    700;
}


.cal-user-btn.is-active[data-cal-user="민정"] {
  background:
    var(--purple);

  color:
    #FFFFFF;
}


.cal-user-btn.is-active[data-cal-user="미정"] {
  background:
    var(--green);

  color:
    #FFFFFF;
}


/* =====================================================
   캘린더 월 이동
===================================================== */

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;

  margin-bottom:
    10px;
}


.cal-nav__btn {
  width: 32px;
  height: 32px;

  color:
    var(--muted);

  font-size:
    20px;
}


.cal-nav__label {
  min-width: 110px;

  font-family:
    var(--font-display);

  font-size:
    16px;

  font-weight:
    600;

  text-align:
    center;
}


.cal-weekdays {
  display: grid;

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

  margin-bottom:
    4px;

  color:
    var(--muted);

  font-size:
    11px;

  text-align:
    center;
}


/* =====================================================
   캘린더 날짜 셀
===================================================== */

.cal-grid {
  display: grid;

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

  gap: 4px;

  padding:
    10px 6px;

  border-radius:
    var(--radius-lg);

  background:
    var(--card);

  box-shadow:
    var(--shadow);
}


.cal-cell {
  position: relative;

  min-width: 0;
  height: 94px;

  display: grid;

  grid-template-rows:
    18px 1fr 1fr;

  overflow:
    hidden;

  padding:
    4px 2px;

  border-radius:
    var(--radius-sm);

  background:
    #FFFFFF;
}


.cal-cell.is-empty {
  visibility:
    hidden;
}


.cal-cell.is-today {
  box-shadow:
    inset 0 0 0 1.5px
    var(--ink);
}


.cal-cell__day {
  font-size:
    11px;

  font-weight:
    700;

  text-align:
    center;
}


/* =====================================================
   캘린더 위쪽: 운동 여부
===================================================== */

.cal-cell__exercise {
  min-width: 0;

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

  padding:
    2px;

  border-bottom:
    1px solid
    rgba(42, 37, 49, 0.08);

  background:
    transparent;

  text-align:
    center;
}


.cal-cell__exercise small {
  max-width: 100%;

  overflow:
    hidden;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* 운동한 날: 초록색 배경 */

.cal-cell__exercise.is-done {
  background:
    var(--green-tint);

  color:
    var(--green-deep);

  border-radius:
    6px 6px 0 0;
}


/* 운동안한 날: 빨간색 배경 */

.cal-cell__exercise.is-rest {
  background:
    var(--red-tint);

  color:
    var(--red);

  border-radius:
    6px 6px 0 0;
}


/* 운동 기록이 없는 날 */

.cal-cell__exercise.is-none {
  background:
    transparent;

  color:
    transparent;

  border-radius:
    6px 6px 0 0;
}

/* =====================================================
   캘린더 아래쪽: 체중
===================================================== */

.cal-cell__weight-part {
  min-width: 0;

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

  padding:
    2px;

  border-radius:
    0 0 6px 6px;

  background:
    transparent;

  color:
    var(--muted);

  text-align:
    center;
}


.cal-cell__weight-part small {
  max-width: 100%;

  overflow:
    hidden;

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* 전날보다 체중 감소: 초록색 */

.cal-cell__weight-part.down {
  background:
    var(--green-tint);

  color:
    var(--green-deep);
}


/* 전날보다 체중 증가: 빨간색 */

.cal-cell__weight-part.up {
  background:
    var(--red-tint);

  color:
    var(--red);
}


/* 전날과 체중 동일: 빨간색 */

.cal-cell__weight-part.same {
  background:
    var(--red-tint);

  color:
    var(--red);
}


/* 전날 체중 기록이 없는 경우: 기본 회색 */

.cal-cell__weight-part.none {
  background:
    transparent;

  color:
    var(--muted);
}


.cal-cell:disabled {
  cursor:
    default;
}


/* =====================================================
   캘린더 범례
===================================================== */

.cal-legend--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;

  margin-top:
    12px;
}


.cal-legend__row {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  color:
    var(--muted);

  font-size:
    11px;
}


.cal-legend__exercise {
  padding:
    3px 7px;

  border-radius:
    999px;

  font-weight:
    700;
}


.cal-legend__exercise--done {
  background:
    var(--green-tint);

  color:
    var(--green-deep);
}


.cal-legend__exercise--rest {
  background:
    var(--red-tint);

  color:
    var(--red);
}


.cal-legend__dot {
  display: inline-block;

  width: 8px;
  height: 8px;

  margin-right:
    5px;

  border-radius:
    50%;
}


.cal-legend__dot--down {
  background:
    var(--green);
}


.cal-legend__dot--up {
  background:
    var(--red);
}


/* =====================================================
   하단 메뉴
===================================================== */

.bottomnav {
  position: fixed;

  left: 50%;
  bottom: 0;
  z-index: 10;

  width: 100%;
  max-width: 480px;

  display: grid;

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

  transform:
    translateX(-50%);

  padding:
    8px 6px
    calc(
      8px +
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid
    var(--line);

  background:
    var(--card);
}


.navbtn {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 2px;

  padding:
    5px 0;

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    500;
}


.navbtn__icon {
  font-size:
    18px;

  opacity:
    0.55;
}


.navbtn.is-active {
  color:
    var(--ink);

  font-weight:
    800;
}


.navbtn.is-active .navbtn__icon {
  opacity:
    1;
}


/* =====================================================
   토스트
===================================================== */

.toast {
  position: fixed;

  left: 50%;
  bottom: 98px;
  z-index: 50;

  max-width:
    calc(100% - 40px);

  overflow:
    hidden;

  transform:
    translateX(-50%);

  padding:
    10px 18px;

  border-radius:
    999px;

  background:
    var(--ink);

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.2);

  color:
    #FFFFFF;

  font-size:
    13px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =====================================================
   작은 휴대폰
===================================================== */

@media (max-width: 360px) {
  .tabpanels {
    padding-left:
      12px;

    padding-right:
      12px;
  }


  .intensity-chips {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .cal-cell {
    height:
      88px;
  }


  .cal-cell__exercise small {
    font-size:
      8px;
  }


  .cal-cell__weight-part small {
    font-size:
      7.5px;
  }


  .weight-input {
    width:
      105px;

    font-size:
      34px;
  }
}  
/* =====================================================
   지난 기록 추가·수정 폼
===================================================== */

.history-editor,
.past-weight-editor {
  margin-bottom:
    20px;
}


.history-editor__title {
  margin:
    0 0 16px;

  font-family:
    var(--font-display);

  font-size:
    15px;

  font-weight:
    600;
}


.history-editor__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    14px 10px;
}


.history-editor__field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}


.history-editor__field > span {
  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;
}


.history-editor__input {
  width: 100%;
  min-width: 0;
  height: 42px;

  padding:
    8px 10px;

  border:
    1px solid
    var(--line);

  outline:
    none;

  border-radius:
    var(--radius-sm);

  background:
    var(--bg);

  color:
    var(--ink);

  font-size:
    13px;

  font-weight:
    600;
}


.history-editor__input:focus {
  border-color:
    var(--purple);
}


body.user-미정
.history-editor__input:focus {
  border-color:
    var(--green);
}


.history-editor__input:disabled {
  opacity:
    0.45;

  cursor:
    default;
}


.history-editor__actions {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-top:
    18px;
}


.history-editor__cancel {
  padding:
    8px 4px;
}


/* =====================================================
   지난 체중 입력
===================================================== */

.past-weight-editor__row {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-bottom:
    16px;
}


.past-weight-editor__weight {
  display: flex;
  align-items: center;

  gap: 7px;
}


.past-weight-editor__weight
.history-editor__input {
  flex: 1;
}


.past-weight-editor__weight span {
  color:
    var(--muted);

  font-size:
    12px;
}


/* =====================================================
   운동 목록 수정·삭제 버튼
===================================================== */

.exercise-item__content {
  min-width: 0;

  flex: 1;
}


.exercise-item__actions {
  flex-shrink: 0;

  display: flex;
  align-items: center;

  gap: 4px;
}


.exercise-item__edit {
  padding:
    6px 8px;

  border-radius:
    999px;

  background:
    var(--card);

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;
}


.exercise-item__edit:active {
  background:
    var(--line);
}


@media (max-width: 360px) {
  .history-editor__grid,
  .past-weight-editor__row {
    grid-template-columns:
      1fr;
  }
}  

/* =====================================================
   AI 코치
===================================================== */

.navbtn__icon--ai {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    -0.06em;
}


.ai-coach-card {
  display: flex;
  flex-direction: column;

  gap: 18px;

  margin-bottom:
    16px;
}


.ai-coach-date {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


.ai-coach-date > span {
  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;
}


.ai-source-summary {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 8px;
}


.ai-source-item {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;

  padding:
    11px 8px;

  border-radius:
    var(--radius-sm);

  background:
    var(--bg);

  text-align:
    center;
}


.ai-source-item__label {
  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    700;
}


.ai-source-item strong {
  overflow:
    hidden;

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.35;

  text-overflow:
    ellipsis;
}


.ai-meal-preview {
  display: grid;

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

  gap: 8px;
}


.ai-meal-preview__item {
  position: relative;

  overflow:
    hidden;

  aspect-ratio:
    1;

  border-radius:
    var(--radius-sm);

  background:
    var(--line);
}


.ai-meal-preview__item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit:
    cover;
}


.ai-meal-preview__item span {
  position: absolute;

  left: 6px;
  bottom: 5px;

  color:
    #FFFFFF;

  font-size:
    10px;

  font-weight:
    700;

  text-shadow:
    0 1px 4px
    rgba(0, 0, 0, 0.75);
}


.ai-no-meal {
  grid-column:
    1 / -1;

  margin:
    0;

  padding:
    18px 10px;

  border-radius:
    var(--radius-sm);

  background:
    var(--bg);

  color:
    var(--muted);

  font-size:
    12px;

  text-align:
    center;
}


.ai-evaluate-btn {
  align-self:
    stretch;

  min-height:
    44px;
}


.ai-evaluate-btn:disabled {
  opacity:
    0.55;

  cursor:
    wait;
}


.ai-privacy-note {
  margin:
    -6px 0 0;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.5;
}


.ai-coach-status {
  margin:
    0 2px 14px;

  padding:
    10px 12px;

  border-radius:
    var(--radius-sm);

  background:
    var(--card);

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.45;

  text-align:
    center;
}


.ai-coach-status.is-loading {
  background:
    var(--purple-tint);

  color:
    var(--purple-deep);
}


.ai-coach-status.is-stale {
  background:
    #FFF3D9;

  color:
    #8A6422;
}


.ai-coach-status.is-error {
  background:
    var(--red-tint);

  color:
    var(--red);
}


.ai-result {
  display: flex;
  flex-direction: column;

  gap: 12px;
}


.ai-score-card {
  display: flex;
  align-items: center;

  gap: 18px;
}


.ai-score {
  width: 78px;
  height: 78px;

  flex-shrink:
    0;

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

  padding-top:
    17px;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      var(--purple-tint),
      var(--green-tint)
    );
}


.ai-score strong {
  font-family:
    var(--font-display);

  font-size:
    30px;

  line-height:
    1;
}


.ai-score span {
  margin-left:
    2px;

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;
}


.ai-score-card__text {
  min-width: 0;

  flex: 1;
}


.ai-score-card__text > span {
  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;
}


.ai-score-card__text p {
  margin:
    7px 0 0;

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1.55;
}


.ai-result-section {
  padding:
    16px 18px;
}


.ai-result-section h3 {
  margin:
    0 0 9px;

  font-family:
    var(--font-display);

  font-size:
    14px;

  font-weight:
    600;
}


.ai-result-section p {
  margin:
    0;

  color:
    var(--ink);

  font-size:
    12px;

  line-height:
    1.65;
}


.ai-result-section--good {
  border-left:
    4px solid
    var(--green);
}


.ai-result-section--improve {
  border-left:
    4px solid
    var(--red);
}


.ai-result__list {
  display: flex;
  flex-direction: column;

  gap: 7px;

  margin:
    0;

  padding-left:
    18px;

  font-size:
    12px;

  line-height:
    1.5;
}


.ai-result__empty {
  color:
    var(--muted) !important;
}


.ai-goal-card {
  display: flex;
  flex-direction: column;

  gap: 8px;

  background:
    linear-gradient(
      145deg,
      var(--purple-tint),
      var(--green-tint)
    );
}


.ai-goal-card span {
  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;
}


.ai-goal-card strong {
  font-size:
    15px;

  line-height:
    1.5;
}


.ai-limitations {
  padding:
    4px 4px 0;

  color:
    var(--muted);
}


.ai-limitations h3 {
  margin:
    0 0 6px;

  font-size:
    11px;
}


.ai-limitations
.ai-result__list {
  font-size:
    10px;
}


.ai-model-note {
  margin:
    0 4px;

  color:
    var(--muted);

  font-size:
    9px;

  text-align:
    right;
}


@media (max-width: 360px) {
  .bottomnav {
    padding-left:
      2px;

    padding-right:
      2px;
  }


  .navbtn {
    font-size:
      9px;
  }


  .navbtn__icon {
    font-size:
      16px;
  }


  .navbtn__icon--ai {
    font-size:
      11px;
  }


  .ai-source-summary {
    grid-template-columns:
      1fr;
  }


  .ai-source-item {
    flex-direction:
      row;

    justify-content:
      space-between;

    text-align:
      left;
  }
}  

/* AI 코치 사진 화면 밖으로 나가는 문제 강제 수정 */

#tab-ai,
.ai-coach-card,
.ai-meal-preview,
.ai-meal-preview__item {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#tab-ai {
  width: 100% !important;
  overflow-x: hidden !important;
}

.ai-coach-card {
  width: 100% !important;
  overflow: hidden !important;
}

.ai-meal-preview {
  width: 100% !important;

  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 8px !important;

  overflow: hidden !important;
}

.ai-meal-preview__item {
  width: 100% !important;
  height: 120px !important;

  position: relative !important;
  overflow: hidden !important;

  border-radius: 10px !important;
}

.ai-meal-preview__item img {
  width: 100% !important;
  max-width: 100% !important;

  height: 100% !important;
  max-height: 120px !important;

  display: block !important;

  object-fit: cover !important;
  object-position: center !important;
}

/* 사진이 1장이어도 너무 커지지 않도록 제한 */

.ai-meal-preview__item:only-child {
  grid-column: 1 / -1;

  width: 100% !important;
  height: 180px !important;
}

.ai-meal-preview__item:only-child img {
  max-height: 180px !important;
}
.ai-meal-image {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
}  


/* =====================================================
   식단 사진 크게 보기
===================================================== */

body.meal-preview-open {
  overflow:
    hidden;
}


.meal-preview {
  position: fixed;
  inset: 0;
  z-index: 100;

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

  padding:
    24px;
}


.meal-preview[hidden] {
  display:
    none !important;
}


.meal-preview__backdrop {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background:
    rgba(0, 0, 0, 0.78);
}


.meal-preview__dialog {
  position: relative;
  z-index: 1;

  width:
    min(92vw, 420px);

  max-height:
    82vh;

  overflow:
    hidden;

  border-radius:
    18px;

  background:
    #111111;

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.38);
}


.meal-preview__dialog img {
  width: 100%;
  height: auto;
  max-height: 82vh;

  display: block;

  object-fit:
    contain;
}


.meal-preview__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;

  width: 34px;
  height: 34px;

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

  border-radius:
    50%;

  background:
    rgba(0, 0, 0, 0.62);

  color:
    #FFFFFF;

  font-size:
    24px;

  line-height:
    1;
}

/* =====================================================
   AI 코치 식단 상세설명
===================================================== */

.ai-meal-note {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.ai-meal-note__title {
  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;
}


.ai-meal-note__input {
  width: 100%;
  min-height: 150px;

  resize: vertical;

  padding:
    13px 14px;

  border:
    1px solid
    var(--line);

  outline:
    none;

  border-radius:
    var(--radius-sm);

  background:
    var(--bg);

  color:
    var(--ink);

  font-size:
    13px;

  line-height:
    1.65;
}


.ai-meal-note__input::placeholder {
  color:
    var(--muted);

  opacity:
    0.75;
}


.ai-meal-note__input:focus {
  border-color:
    var(--purple);

  background:
    #FFFFFF;
}


body.user-미정
.ai-meal-note__input:focus {
  border-color:
    var(--green);
}


.ai-meal-note__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;

  margin-top:
    -10px;
}


.ai-meal-note__footer p {
  flex: 1;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.5;
}


.ai-meal-note__save {
  flex-shrink: 0;

  padding:
    2px 0;

  color:
    var(--purple-deep);

  font-weight:
    800;
}


body.user-미정
.ai-meal-note__save {
  color:
    var(--green-deep);
}


.ai-meal-note__save:disabled {
  opacity:
    0.5;

  cursor:
    wait;
}