/* 이슈 #179: 웹폰트는 CSS @import 대신 뷰 head의 <link id="webFontStylesheet">로 불러온다.
   @import는 main.css 파싱 이후에 발견되어 직렬 왕복을 만들고, 폰트 297KB가
   부팅 구간(core.js 전송)과 대역폭을 다퉜다. */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --line: #e7e9ed;
  --ink: #0e1116;
  --ink-2: #505866;
  --ink-3: #636b78;
  --ink-4: #8b93a1;
  --cta: #0e1116;
  --cta-ink: #ffffff;
  --brand: #ff8c48;
  --brand-soft: #fff3ec;
  --brand-border: color-mix(in srgb, var(--brand) 28%, var(--line));
  --brand-strong: color-mix(in srgb, var(--brand) 62%, var(--ink));
  --carb: #ffc933;
  --carb-soft: color-mix(in srgb, var(--carb) 16%, var(--surface));
  --carb-border: color-mix(in srgb, var(--carb) 36%, var(--line));
  --carb-strong: color-mix(in srgb, var(--carb) 42%, var(--ink));
  --protein: #4a7dff;
  --protein-soft: color-mix(in srgb, var(--protein) 9%, var(--surface));
  --protein-border: color-mix(in srgb, var(--protein) 28%, var(--line));
  --protein-strong: color-mix(in srgb, var(--protein) 68%, var(--ink));
  --fat: #ff5c9d;
  --fat-soft: color-mix(in srgb, var(--fat) 10%, var(--surface));
  --fat-border: color-mix(in srgb, var(--fat) 30%, var(--line));
  --fat-strong: color-mix(in srgb, var(--fat) 52%, var(--ink));
  --success: #22c55e;
  --success-soft: color-mix(in srgb, var(--success) 9%, var(--surface));
  --success-border: color-mix(in srgb, var(--success) 32%, var(--line));
  --success-strong: color-mix(in srgb, var(--success) 58%, var(--ink));
  --danger: #f04438;
  --danger-soft: color-mix(in srgb, var(--danger) 8%, var(--surface));
  --danger-border: color-mix(in srgb, var(--danger) 28%, var(--line));
  --danger-strong: color-mix(in srgb, var(--danger) 52%, var(--ink));
  /* 외부 브랜드 색: 각 사 로그인 버튼 가이드 값. 앱 토큰이나 테마로 바꾸지 않는다. */
  --kakao-bg: #fee500;
  --kakao-ink: rgba(0, 0, 0, 0.85);
  --naver-bg: #03c75a;
  --naver-ink: #ffffff;
  --font:
    'Wanted Sans Variable', 'Wanted Sans', 'Pretendard Variable', -apple-system,
    'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --track-body: 0;
  --track-head: -0.01em;
  --track-title: -0.015em;
  --track-display: -0.02em;
  --w-display: 700;
  --w-head: 700;
  --w-strong: 600;
  --w-label: 500;
  --w-body: 400;
  --lh-body: 1.65;
  --fs-caption-min: 13px;
  --radius-card: 24px;
  --radius-control: 16px;
  --radius-pill: 999px;
  --space-section: 32px;
  --shadow-card: 0 1px 2px rgba(14, 17, 22, 0.04), 0 8px 24px -12px rgba(14, 17, 22, 0.12);
  --glass: rgba(255, 255, 255, 0.78);
  --page-glow: color-mix(in srgb, var(--brand) 12%, transparent);
  --shadow-ink: #0e1116;
  --scrim-faint: rgba(14, 17, 22, 0.1);
  --scrim-soft: rgba(14, 17, 22, 0.38);
  --scrim: rgba(14, 17, 22, 0.48);
  --scrim-strong: rgba(14, 17, 22, 0.62);
  --scrim-heavy: rgba(14, 17, 22, 0.78);
  --media-surface: #000000;
  --media-ink: #ffffff;
  /* 사진 위 원형 버튼: 테마와 무관하게 라이트 모양 유지 (#201) */
  --media-control-bg: rgba(255, 255, 255, 0.92);
  --media-control-ink: #0e1116;
  --media-control-shadow: 0 1px 2px rgba(14, 17, 22, 0.04), 0 8px 24px -12px rgba(14, 17, 22, 0.12);
  --google-bg: var(--surface);
  --google-border: var(--line);
  --google-ink: var(--ink);
  --checkmark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-12'/%3E%3C/svg%3E");

  color-scheme: light;

  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-variant-numeric: tabular-nums;

  /* Legacy status and medal styles now use the shared palette. */
  --gold-1: var(--carb-soft);
  --gold-2: var(--carb);
  --gold-3: var(--carb-strong);

  /* Motion system: 짧고 정확하게(HIG), 등장은 감속·퇴장은 가속(M3 easing).
     --ease-spring은 과한 튕김 없이 2% 안쪽으로만 넘친다. 작은 확인 표시만 --ease-spring-pop을 쓴다. */
  --dur-instant: 90ms;
  --dur-fast: 150ms;
  --dur-med: 260ms;
  --dur-slow: 420ms;
  --dur-page: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring: cubic-bezier(0.34, 1.12, 0.64, 1);
  --ease-spring-pop: cubic-bezier(0.34, 1.36, 0.64, 1);

  /* Elevation & shape */
  --shadow-soft: var(--shadow-card);
  --shadow-lift: 0 2px 8px rgba(14, 17, 22, 0.08), 0 18px 42px -22px rgba(14, 17, 22, 0.2);
  --radius-sm: 12px;
  --radius-md: var(--radius-control);
  --radius-lg: var(--radius-card);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0b0d10;
    --surface: #15181d;
    --surface-2: #1e2228;
    --line: #2a2f37;
    --ink: #f3f4f6;
    --ink-2: #b4bac5;
    --ink-3: #8e96a3;
    --ink-4: #6b7380;
    --cta: #f3f4f6;
    --cta-ink: #0e1116;
    --brand: #ff8c48;
    --brand-soft: #3a2415;
    --carb: #ffc933;
    --protein: #5b8cff;
    --fat: #ff5c9d;
    --success: #22c55e;
    --danger: #ff6b5e;
    --shadow-card: none;
    --shadow-soft: none;
    --shadow-lift: none;
    --glass: rgba(21, 24, 29, 0.78);
    --page-glow: transparent;
    --shadow-ink: #000000;
    --scrim-faint: rgba(0, 0, 0, 0.1);
    --scrim-soft: rgba(0, 0, 0, 0.38);
    --scrim: rgba(0, 0, 0, 0.48);
    --scrim-strong: rgba(0, 0, 0, 0.62);
    --scrim-heavy: rgba(0, 0, 0, 0.78);
    --google-bg: #131314;
    --google-border: #8e918f;
    --google-ink: #e3e3e3;
    --checkmark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e1116' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-12'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #0b0d10;
  --surface: #15181d;
  --surface-2: #1e2228;
  --line: #2a2f37;
  --ink: #f3f4f6;
  --ink-2: #b4bac5;
  --ink-3: #8e96a3;
  --ink-4: #6b7380;
  --cta: #f3f4f6;
  --cta-ink: #0e1116;
  --brand: #ff8c48;
  --brand-soft: #3a2415;
  --carb: #ffc933;
  --protein: #5b8cff;
  --fat: #ff5c9d;
  --success: #22c55e;
  --danger: #ff6b5e;
  --shadow-card: none;
  --shadow-soft: none;
  --shadow-lift: none;
  --glass: rgba(21, 24, 29, 0.78);
  --page-glow: transparent;
  --shadow-ink: #000000;
  --scrim-faint: rgba(0, 0, 0, 0.1);
  --scrim-soft: rgba(0, 0, 0, 0.38);
  --scrim: rgba(0, 0, 0, 0.48);
  --scrim-strong: rgba(0, 0, 0, 0.62);
  --scrim-heavy: rgba(0, 0, 0, 0.78);
  --google-bg: #131314;
  --google-border: #8e918f;
  --google-ink: #e3e3e3;
  --checkmark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e1116' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-12'/%3E%3C/svg%3E");
  color-scheme: dark;
}

@supports (animation-timing-function: linear(0, 1)) {
  :root {
    /* 감쇠비 0.78 스프링(최대 2% 초과). 시트·토글·탭처럼 움직임이 큰 곳의 기본값이다. */
    --ease-spring: linear(
      0,
      0.021 2.6%,
      0.112 6.6%,
      0.27 11.4%,
      0.461 16.8%,
      0.646 22.7%,
      0.8 29%,
      0.909 35.7%,
      0.976 42.8%,
      1.009 50.2%,
      1.019 57.8%,
      1.016 69.9%,
      1.008 82.4%,
      1.002 95.5%,
      1
    );
    /* 감쇠비 0.62 스프링(최대 8% 초과). 체크 배지처럼 작은 확인 표시에만 쓴다. */
    --ease-spring-pop: linear(
      0,
      0.031 2.6%,
      0.17 6.6%,
      0.401 11.4%,
      0.66 16.8%,
      0.879 22.7%,
      1.019 29%,
      1.078 35.7%,
      1.078 42.8%,
      1.051 50.2%,
      1.021 57.8%,
      0.996 69.9%,
      0.994 82.4%,
      0.998 95.5%,
      1
    );
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes chip-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shimmer-sweep {
  to {
    background-position: -200% 0;
  }
}

body.js-reveal-ready [data-reveal]:not(.is-revealed),
body.js-reveal-ready .anim-reveal:not(.is-revealed) {
  opacity: 0;
}

[data-reveal].is-revealed,
.anim-reveal.is-revealed {
  animation: fade-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}

body.js-reveal-ready .anim-stagger:not(.is-revealed) > * {
  opacity: 0;
}

.anim-stagger.is-revealed > * {
  animation: fade-rise var(--dur-slow) var(--ease-out) both;
}

.skeleton-shimmer {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep 1.2s linear infinite;
}

body {
  margin: 0;
  min-height: 100vh;
}

button,
input,
textarea {
  font: inherit;
}

.app {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 12px 18px calc(96px + env(safe-area-inset-bottom));
}

h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
}

p {
  margin: 0;
}

.dashboard-view,
.log-view {
  display: grid;
  gap: 10px;
}

.personal-progress-heading,
.personal-progress-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.personal-progress-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.personal-progress-heading p,
.personal-progress-item small {
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}

.personal-progress-heading button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.personal-progress-heading button {
  padding: 5px 9px;
  white-space: nowrap;
}
.personal-progress-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  border-radius: 7px;
  background: var(--surface-2);
}
.personal-progress-tabs button {
  min-height: 30px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.personal-progress-tabs button.is-selected {
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 12%, transparent);
}
.personal-meal-status {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.personal-meal-status span {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.personal-meal-status span.is-recorded {
  border-color: var(--success-border);
  background: var(--success-soft);
  color: var(--success-strong);
}
.personal-meal-status b {
  min-height: 11px;
  font-size: 10px;
}
.personal-nutrition-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.personal-nutrition-status span {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--surface-2);
}
.personal-nutrition-status b {
  color: var(--ink-3);
  font-size: 10px;
}
.personal-nutrition-status strong {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.personal-nutrition-status small {
  color: var(--ink-3);
  font-size: 10px;
}
.personal-progress-list {
  display: grid;
  gap: 8px;
}
.personal-progress-item {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.personal-progress-item strong {
  color: var(--ink-2);
  font-size: 13px;
}
.personal-progress-item > div:first-child span {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}
.personal-progress-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}
.personal-progress-bar span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--protein);
  transform-origin: left center;
  animation: personalGoalProgress 520ms var(--ease-out) both;
}
.personal-progress-empty {
  margin: 0;
  padding: 8px 0 2px;
  color: var(--ink-3);
  font-size: 13px;
}
.personal-progress-skeleton {
  height: 52px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2));
  background-size: 200% 100%;
  animation: personalGoalSkeleton 1.1s linear infinite;
}
.personal-progress-skeleton.short {
  height: 26px;
}

@keyframes personalGoalProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes personalGoalSkeleton {
  to {
    background-position: -200% 0;
  }
}

.subpage-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.carbs-dot {
  background: var(--carb);
}

.protein-dot {
  background: var(--protein);
}

.fat-dot {
  background: var(--fat);
}

@keyframes badgeSheen {
  from {
    transform: translateX(-35%) rotate(20deg);
  }
  to {
    transform: translateX(290%) rotate(20deg);
  }
}
@keyframes achievementExit {
  to {
    opacity: 0;
  }
}
@keyframes achievementHalo {
  0% {
    opacity: 0;
    transform: scale(0.48);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

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

@keyframes trendLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes trendBarEnter {
  from {
    opacity: 0.35;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

.log-view-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.log-view-header strong {
  min-height: 34px;
  display: flex;
  align-items: center;
}

.log-view.is-editing .capture-panel {
  display: none;
}

.log-view.is-reregistering .capture-panel {
  display: none;
}

.log-view.is-editing [data-save-meal] {
  display: none;
}

.placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  place-items: center;
  color: var(--ink);
  font-weight: 800;
  text-shadow:
    0 1px 3px color-mix(in srgb, var(--shadow-ink) 86%, transparent),
    0 0 10px var(--scrim);
  text-align: center;
  padding: 20px;
}

body[data-page='record'] .preview:not(.has-image) .preview-sample-image:not([hidden]),
body[data-page='edit'] .preview:not(.has-image) .preview-sample-image:not([hidden]) {
  filter: none;
  transform: none;
}

.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid color-mix(in srgb, var(--line) 25%, transparent);
  border-top-color: var(--success-border);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.analysis-card strong {
  font-size: 17px;
}

.weight-field {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.weight-field label {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

.body-weight-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.body-weight-readout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-sizing: border-box;
}

.body-weight-readout {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.body-weight-editor {
  display: grid;
  gap: 8px;
}

.body-weight-editor[hidden] {
  display: none;
}

.body-weight-done {
  justify-self: end;
}

.weight-field .body-weight-readout-row {
  min-height: 42px;
}

.weight-wheel {
  width: 100%;
}

.weight-wheel-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    var(--surface-2) 0%,
    var(--surface) 45%,
    var(--surface) 55%,
    var(--surface-2) 100%
  );
}

.weight-wheel-highlight {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  z-index: 1;
  height: 36px;
  border-top: 1px solid color-mix(in srgb, var(--success-border) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--success-border) 18%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}

.weight-wheel-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
}

.weight-wheel-column {
  position: relative;
  z-index: 2;
  height: 180px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--ink) 18%,
    var(--ink) 82%,
    transparent 100%
  );
}

.weight-wheel-column::-webkit-scrollbar {
  display: none;
}

.weight-wheel-item {
  display: grid;
  place-items: center;
  height: 36px;
  scroll-snap-align: center;
  color: var(--ink-2);
  font-size: 22px;
  font-weight: 700;
  transition:
    color 120ms ease,
    transform 120ms ease;
}

.weight-wheel-item[aria-selected='true'] {
  color: var(--ink);
  font-size: 28px;
  font-weight: 900;
}

.weight-wheel-item.is-spacer {
  pointer-events: none;
  visibility: hidden;
}

.weight-wheel-separator,
.weight-wheel-unit {
  color: var(--ink-2);
  font-size: 24px;
  font-weight: 800;
  padding-bottom: 2px;
}

.body-metrics-height-span {
  grid-column: 1 / -1;
}

.log-view.is-manual-entry .comment-field,
.log-view.is-manual-entry .hashtag-field,
.log-view.is-manual-entry .analyze-button,
.log-view.is-manual-entry .manual-entry-button {
  display: none;
}

.log-view.is-manual-entry .result {
  margin-top: 0;
}

.status {
  min-height: 22px;
  margin-top: 12px;
  color: var(--ink-2);
}

.status.error {
  color: var(--danger-strong);
}

.meal-filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.result-header,
.confidence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.result-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--carb-border);
}

.result-header span,
.confidence span {
  color: var(--ink-3);
}

.confidence {
  margin-top: 16px;
}

meter {
  flex: 1;
  height: 12px;
}

.note {
  margin-top: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}

@keyframes input-save-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@keyframes input-save-check {
  to {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

@keyframes food-card-enter {
  from {
    opacity: 0;
    transform: translateY(-14px) scaleY(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes food-card-remove {
  to {
    opacity: 0;
    transform: translateX(14px) scaleY(0.82);
  }
}

.history-empty.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 72px;
}

.history-empty.is-loading::before,
.preview.is-image-loading .placeholder::before {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--protein-border) 38%, transparent);
  border-top-color: var(--protein);
  border-radius: 50%;
  content: '';
  animation: spin 0.8s linear infinite;
}

.meal-analysis-pending {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 10px;
  background: var(--surface-2);
}
.meal-analysis-pending div {
  display: grid;
  gap: 3px;
}
.meal-analysis-pending span {
  color: var(--ink-2);
  font-size: 0.9rem;
}
.meal-analysis-percent {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
/* 2단계 분석: 사진에서 찾은 음식을 영양 계산이 끝나기 전에 먼저 보여 준다. */
.meal-analysis-preview-foods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0 18px 12px;
  list-style: none;
  background: var(--surface-2);
}
.meal-analysis-preview-foods li {
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.meal-analysis-preview-foods li span {
  color: var(--ink-2);
  font-weight: 500;
}
.meal-analysis-progress {
  height: 5px;
  overflow: hidden;
  background: var(--protein-soft);
}
.meal-analysis-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  /* 이슈 #387: 채움색이 트랙과 같으면 채워져도 움직이는지 보이지 않는다. 색을 분리하고 흐르는 결을 준다. */
  background-image: linear-gradient(90deg, var(--protein), var(--carb), var(--protein));
  background-size: 220% 100%;
  animation: meal-analysis-bar-flow 1.8s linear infinite;
  transition: width 0.3s linear;
}
@keyframes meal-analysis-bar-flow {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: -220% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .meal-analysis-progress span {
    animation: none;
  }
}
.meal-analysis-failed {
  padding: 18px;
  background: var(--danger-soft);
}
.meal-analysis-failed div {
  display: grid;
  gap: 3px;
}
.meal-analysis-failed strong {
  color: var(--danger-strong);
}
.meal-analysis-failed span {
  color: var(--ink-2);
  font-size: 0.9rem;
}
/* 이슈 #482: 분석 중·실패 카드도 완료 카드와 같은 틀(사진 헤더 + 본문)을 쓴다.
   사진 아래 본문 배경·여백을 완료 카드의 캡션 영역과 맞춘다. */
.meal-feed-card-analyzing .meal-analysis-pending {
  padding: 14px 12px 8px;
  background: transparent;
}
.meal-feed-card-analyzing .meal-analysis-preview-foods {
  padding: 0 12px 10px;
  background: transparent;
}
.meal-feed-card .meal-analysis-failed {
  padding: 14px 12px;
}
/* 실패 카드의 사진 자리는 로딩이 아니므로 깜빡이지 않는다. */
.meal-feed-photo-static .meal-feed-photo-placeholder {
  animation: none;
}
.meal-analysis-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--protein-border);
  border-top-color: var(--protein);
  border-radius: 50%;
  animation: meal-analysis-spin 0.9s linear infinite;
}
@keyframes meal-analysis-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes meal-feed-photo-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes photo-placeholder-pulse {
  to {
    opacity: 0.58;
  }
}

@keyframes meal-feedback-confirm {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  24% {
    opacity: 1;
    transform: translateY(0);
  }
  82% {
    opacity: 1;
  }
  to {
    opacity: 0.3;
    transform: translateY(-4px);
  }
}
@keyframes meal-feedback-thumb {
  from {
    opacity: 0;
    transform: scale(0.45) rotate(-16deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.16) rotate(7deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.standalone-view {
  min-height: calc(100vh - 180px);
}
.standalone-heading {
  margin: 10px 0 16px;
}
.standalone-heading h1 {
  font-size: 25px;
}
.standalone-heading p {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 14px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 380px) {
  .app {
    padding-inline: 12px;
  }

  h1 {
    font-size: 28px;
  }
}

@keyframes dashboardRingGlow {
  0% {
    opacity: 0.5;
    transform: scale(0.9);
    box-shadow: 0 0 0 color-mix(in srgb, var(--protein) 0%, transparent);
  }

  65% {
    opacity: 1;
    transform: scale(1.03);
    box-shadow: 0 0 28px color-mix(in srgb, var(--protein) 32%, transparent);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 color-mix(in srgb, var(--protein) 0%, transparent);
  }
}

@keyframes scanMeal {
  0% {
    top: 0;
    opacity: 0;
  }

  12%,
  88% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-med);
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

html {
  background: var(--bg);
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 480px at 88% -8%, var(--page-glow), transparent 62%),
    radial-gradient(820px 460px at -12% 18%, var(--page-glow), transparent 58%);
  background-attachment: fixed;
}

input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='file']),
select,
textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='file']):focus,
select:focus,
textarea:focus {
  outline: none;
  background: var(--surface);
  box-shadow:
    0 0 0 2px var(--brand),
    0 10px 26px -10px color-mix(in srgb, var(--brand) 24%, transparent);
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
  font-weight: 500;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--brand), var(--brand)) 0 / var(--goal-progress, 50%) 100% no-repeat,
    var(--protein-soft);
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
  transition: transform var(--dur-fast) var(--ease-spring);
}

input[type='range']:active::-webkit-slider-thumb {
  transform: scale(1.18);
}

input[type='range']::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--protein-soft);
}

input[type='range']::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand));
}

input[type='range']::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

.personal-goal-input-grid,
.goal-grid,
.auth-form,
.meal-context-fields {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 480px) {
  .personal-goal-input-grid,
  .goal-grid,
  .auth-form,
  .meal-context-fields {
    grid-template-columns: 1fr !important;
  }
}

@keyframes wizard-enter-next {
  from {
    opacity: 0;
    transform: translateX(56px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes wizard-enter-prev {
  from {
    opacity: 0;
    transform: translateX(-56px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.confetti-piece {
  position: absolute;
  top: -14px;
  left: var(--cx, 50%);
  width: 8px;
  height: 13px;
  border-radius: 2px;
  background: var(--clr, var(--brand));
  opacity: 0;
  animation: confetti-fall var(--cdur, 1.9s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--cdel, 0s)
    forwards;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    opacity: 0.85;
    transform: translate3d(var(--dx, 0px), 108vh, 0) rotate(var(--rot, 560deg));
  }
}

@keyframes badge-flip-in {
  0% {
    transform: rotateY(0deg) scale(0.3);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: rotateY(360deg) scale(1);
    opacity: 1;
  }
}

@keyframes badge-idle-float {
  from {
    transform: translateY(0) rotate(-2.5deg);
  }
  to {
    transform: translateY(-5px) rotate(2.5deg);
  }
}

@keyframes celebration-in {
  from {
    opacity: 0;
    transform: translateY(46px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.celebration-sparkle {
  position: absolute;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  width: var(--ss, 7px);
  height: var(--ss, 7px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-soft) 0%, var(--brand) 60%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  animation: sparkle-twinkle var(--sd, 1.8s) ease-in-out var(--sdel, 0s) infinite;
}

@keyframes sparkle-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.25) rotate(180deg);
  }
}

.log-view .comment-input-row textarea {
  height: auto;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  padding: 12px 16px;
  font-size: 16px;
}

.log-view .comment-input-row textarea:focus {
  outline: none;
  background: var(--surface);
  box-shadow:
    0 0 0 2px var(--brand),
    0 10px 26px -10px color-mix(in srgb, var(--brand) 24%, transparent);
}

.log-view .mic-button {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
}

.log-view .mic-button.is-listening {
  background: var(--cta);
  border-color: transparent;
  color: var(--cta-ink);
}

.log-view .manual-entry-button {
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
}

.log-view .manual-entry-button:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}

.skeleton-value {
  display: inline-block;
  min-width: var(--sv-w, 4ch);
  min-height: var(--sv-h, 1em);
  border-radius: 6px;
}

.is-loading .skeleton-value,
.skeleton-value.is-forced-loading {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep 1.2s linear infinite;
  user-select: none;
}

.value-revealed {
  display: inline-block;
  animation: value-rise var(--dur-med, 300ms) var(--ease-out, ease-out) both;
}

@keyframes value-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.value-revealed.is-fail {
  color: var(--ink-3);
  opacity: 0.8;
}

@keyframes dayBarEnter {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- 시트·대화상자·메뉴 ----------
   아래에서 올라오는 시트(사진 소스·식단 필터·추이 상세·식단 상세의 기록 정보와 더 보기), 확인·안내 대화상자
   (appConfirmDelete·appAlert)와 목표 저장 대화상자, 피드 카드 ⋯ 메뉴. hidden을 켜고 끄는 스크립트는 그대로
   두고, display를 비연속 전환해 들어올 때와 나갈 때 모두 움직인다. */
body.photo-source-sheet-open,
body.meal-filter-sheet-open,
body.trend-sheet-open,
body.meal-detail-sheet-open {
  overflow: hidden;
}

.photo-source-sheet,
.meal-filter-sheet,
.trend-detail-sheet,
.meal-detail-sheet {
  position: fixed;
  z-index: var(--z-sheet);
  inset: 0;
  transition: display var(--dur-med) allow-discrete;
}

:is(.photo-source-sheet, .meal-filter-sheet, .meal-detail-sheet, .trend-detail-sheet)[hidden] {
  pointer-events: none;
}

/* 식단 상세의 시트는 뒤 막을 시트 자체의 배경으로 그리고, 닫기용 투명 버튼을 깐다. */
.meal-detail-sheet {
  display: grid;
  align-items: end;
  justify-items: center;
  background: var(--scrim-sheet);
  transition:
    background-color var(--dur-med) var(--ease-standard),
    display var(--dur-med) allow-discrete;
}

.meal-detail-sheet[hidden] {
  background-color: transparent;
}

@starting-style {
  .meal-detail-sheet:not([hidden]) {
    background-color: transparent;
  }
}

.meal-detail-sheet-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: default;
}

.photo-source-backdrop,
.meal-filter-backdrop,
.trend-detail-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-sheet);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity var(--dur-med) var(--ease-standard);
}

:is(.photo-source-sheet, .meal-filter-sheet, .trend-detail-sheet)[hidden]
  :is(.photo-source-backdrop, .meal-filter-backdrop, .trend-detail-backdrop) {
  opacity: 0;
}

@starting-style {
  :is(.photo-source-sheet, .meal-filter-sheet, .trend-detail-sheet):not([hidden])
    :is(.photo-source-backdrop, .meal-filter-backdrop, .trend-detail-backdrop) {
    opacity: 0;
  }
}

.photo-source-panel,
.meal-filter-sheet-panel,
.trend-detail-panel,
.meal-detail-sheet-panel {
  border: 0;
  box-shadow: var(--elev-overlay);
  transition: transform var(--dur-slow) var(--ease-spring);
}

:is(.photo-source-sheet, .meal-filter-sheet, .meal-detail-sheet, .trend-detail-sheet)[hidden]
  :is(
    .photo-source-panel,
    .meal-filter-sheet-panel,
    .meal-detail-sheet-panel,
    .trend-detail-panel
  ) {
  transform: translateY(104%);
  transition-duration: var(--dur-med);
  transition-timing-function: var(--ease-exit);
}

@starting-style {
  :is(.photo-source-sheet, .meal-filter-sheet, .meal-detail-sheet, .trend-detail-sheet):not(
      [hidden]
    )
    :is(
      .photo-source-panel,
      .meal-filter-sheet-panel,
      .meal-detail-sheet-panel,
      .trend-detail-panel
    ) {
    transform: translateY(104%);
  }
}

.meal-filter-sheet-panel,
.trend-detail-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--surface);
}

.trend-detail-panel {
  max-height: min(72vh, 560px);
  overflow: auto;
}

.photo-source-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  max-height: min(86vh, 620px);
  margin: 0 auto;
  overflow-y: auto;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--surface);
}

.meal-detail-sheet-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(100%, 560px);
  max-height: min(86dvh, 700px);
  overflow-y: auto;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--surface);
}

.photo-source-grab,
.meal-filter-grab,
.trend-detail-grab,
.meal-detail-sheet-grabber {
  width: 40px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--line);
}

.meal-detail-sheet-grabber {
  margin-bottom: 4px;
}

.photo-source-head,
.meal-filter-sheet-head,
.trend-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.photo-source-head strong,
.meal-filter-sheet-head strong,
.trend-detail-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-source-head strong {
  font-size: 16px;
  font-weight: var(--w-head);
}

.photo-source-close,
.meal-filter-close,
.trend-detail-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}

.meal-filter-close,
.trend-detail-close {
  border-radius: 50%;
  color: var(--ink-3);
}

.photo-source-close::before,
.meal-filter-close::before,
.trend-detail-close::before {
  width: 18px;
  height: 18px;
}

/* 사진 소스 시트: 촬영·앨범·영상·직접 입력 버튼과 안내·상태 문구 */
.photo-source-hint {
  margin: 0;
  line-height: 1.5;
}

.photo-source-hint,
.photo-source-status {
  color: var(--ink-3);
  font-size: var(--fs-caption-min);
}

.photo-source-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.photo-source-action {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 88px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: var(--w-strong);
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.photo-source-action-icon {
  display: grid;
  color: var(--brand);
  font-size: 20px;
  line-height: 1;
  place-items: center;
}

.photo-source-action-icon svg {
  display: block;
}

/* #148 영상 기록은 베타로 공개한다: 영상 진입 버튼마다 붙는 작은 표시 */
.beta-badge {
  display: inline-block;
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: var(--w-strong);
  line-height: 1.5;
  vertical-align: 1px;
  white-space: nowrap;
}

.photo-source-status {
  min-height: 18px;
  margin: 0;
  line-height: 1.45;
  text-align: center;
}

.photo-source-status.error {
  color: var(--danger-strong);
}

.photo-source-cancel {
  min-height: 46px;
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.photo-source-close,
.photo-source-action,
.photo-source-cancel {
  border-color: var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
}

.photo-source-action:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.photo-source-action:focus-visible,
.photo-source-close:focus-visible,
.photo-source-cancel:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 식단 필터 시트: 칩 목록은 칩 규칙(.meal-filter-panel)에, 여기는 아래 초기화·완료 버튼 */
.meal-filter-sheet-foot {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 8px;
}

.meal-filter-reset,
.meal-filter-done {
  min-height: 46px;
  border: 0;
  border-radius: var(--radius-control);
  box-shadow: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--w-strong);
  transition: transform var(--dur-med) var(--ease-spring);
}

.meal-filter-done {
  background: var(--cta);
  color: var(--cta-ink);
}

.meal-filter-reset {
  background: var(--surface-2);
  color: var(--ink);
}

.meal-filter-done:active,
.meal-filter-reset:active {
  transform: scale(0.97);
  transition-duration: var(--dur-instant);
}

/* 추이 상세 시트: 고른 날의 식단 목록 */
.trend-detail-list ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trend-detail-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}

.trend-detail-list li strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-detail-list li b {
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.trend-detail-empty {
  margin: 0;
  padding: 18px 10px;
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
}

/* 상세 본문의 기록 정보(#409): 시트가 아니라 본문 흐름에 놓는다. */
.meal-record-info-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meal-record-info-heading h2,
.meal-actions-panel h2 {
  flex: 1;
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.meal-record-info-heading .input-save-indicator {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 17px;
  transform: none;
}

.meal-record-info {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.meal-record-info .meal-context-fields {
  border-top: 0;
  padding: 0;
}

.meal-record-info .meal-type-picker {
  padding: 0;
}

body[data-page='edit'] .meal-record-info .meal-context-fields textarea {
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  padding: 9px 11px;
  resize: vertical;
}

.meal-actions-panel {
  gap: 4px;
}

.meal-actions-panel h2 {
  margin: 0 0 6px;
}

/* 더 보기 시트의 행: 무엇을 하는 행인지 앞에 선 아이콘을 둔다. */
.meal-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.meal-action-row:last-child {
  border-bottom: 0;
}

.meal-action-row::before {
  content: '';
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background-color: var(--ink-3);
  -webkit-mask: var(--row-icon, var(--icon-edit)) center / contain no-repeat;
  mask: var(--row-icon, var(--icon-edit)) center / contain no-repeat;
}

.meal-action-row[data-meal-action='retake'] {
  --row-icon: var(--icon-camera);
}

.meal-action-row[data-meal-action='replace'] {
  --row-icon: var(--icon-image);
}

.meal-action-row[data-meal-action='video'] {
  --row-icon: var(--icon-video);
}

.meal-action-row[data-meal-action='info'] {
  --row-icon: var(--icon-edit);
}

.meal-action-row[data-meal-action='delete'] {
  --row-icon: var(--icon-trash);
}

.meal-action-row[data-meal-action='report'] {
  --row-icon: var(--icon-flag);
}

.meal-action-row.is-danger,
.meal-action-row.is-danger::before {
  color: var(--danger-strong);
}

.meal-action-row.is-danger::before {
  background-color: currentColor;
}

.meal-action-row:active {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* 이슈 #134: 분석 결과 신고 시트. 사유 한 줄씩, 고른 줄은 주 색 테두리로 보인다. */
.meal-report-form,
.meal-report-done {
  display: grid;
  gap: 12px;
}

.meal-report-form[hidden],
.meal-report-done[hidden] {
  display: none;
}

.meal-report-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.meal-report-reasons {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.meal-report-reasons legend,
.meal-report-detail-label {
  margin-bottom: 4px;
  padding: 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

.meal-report-reason {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.meal-report-reason input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
}

.meal-report-reason:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

.meal-report-reason:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.meal-report-panel textarea {
  min-height: 84px;
}

.meal-report-note,
.meal-report-done p {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.5;
}

.meal-report-done p {
  color: var(--ink-2);
  font-size: 15px;
}

.meal-report-status {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}

.meal-report-status:empty {
  display: none;
}

.meal-report-status.error {
  color: var(--danger-strong);
}

.meal-report-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.meal-report-cancel,
.meal-report-submit {
  min-height: 48px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
}

.meal-report-cancel {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

.meal-report-submit {
  border: 0;
  background: var(--cta);
  color: var(--cta-ink);
}

.meal-report-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.meal-report-done:focus {
  outline: none;
}

/* 확인·안내·목표 저장 대화상자: 탭바까지 덮고, 살짝 커지며 나타난다. */
.delete-confirm-modal,
.goal-save-modal {
  position: fixed;
  z-index: var(--z-dialog);
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--scrim-sheet);
  transition:
    opacity var(--dur-med) var(--ease-standard),
    display var(--dur-med) allow-discrete;
}

.delete-confirm-modal {
  padding: 24px;
}

.goal-save-modal {
  padding: 20px;
}

.delete-confirm-modal[hidden],
.goal-save-modal[hidden] {
  opacity: 0;
  pointer-events: none;
}

@starting-style {
  .delete-confirm-modal:not([hidden]),
  .goal-save-modal:not([hidden]) {
    opacity: 0;
  }
}

.delete-confirm-dialog,
.goal-save-dialog {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-overlay);
  transition: transform var(--dur-slow) var(--ease-spring);
}

:is(.delete-confirm-modal, .goal-save-modal)[hidden]
  :is(.delete-confirm-dialog, .goal-save-dialog) {
  transform: translateY(6px) scale(0.97);
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-exit);
}

@starting-style {
  :is(.delete-confirm-modal, .goal-save-modal):not([hidden])
    :is(.delete-confirm-dialog, .goal-save-dialog) {
    transform: translateY(10px) scale(0.95);
  }
}

.delete-confirm-dialog {
  width: min(100%, 340px);
  padding: 22px;
}

.delete-confirm-dialog h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.delete-confirm-dialog p {
  margin: 10px 0 20px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
}

.delete-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.delete-confirm-actions button {
  min-height: 42px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
}

.delete-confirm-cancel {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

.delete-confirm-approve {
  position: relative;
  overflow: hidden;
  border: none;
  background: var(--danger);
  color: var(--cta-ink);
  letter-spacing: -0.01em;
}

.delete-confirm-approve:hover,
.delete-confirm-approve:focus-visible {
  background: var(--danger-strong);
}

/* 안내(appAlert)는 확인 버튼 하나를 주 버튼 색으로 보인다. */
.delete-confirm-modal[data-mode='alert'] .delete-confirm-actions {
  grid-template-columns: 1fr;
}

.delete-confirm-modal[data-mode='alert'] .delete-confirm-approve {
  background: var(--cta);
  color: var(--cta-ink);
}

.delete-confirm-modal[data-mode='alert'] .delete-confirm-approve:hover,
.delete-confirm-modal[data-mode='alert'] .delete-confirm-approve:focus-visible {
  background: var(--cta);
}

.goal-save-dialog {
  display: grid;
  gap: 18px;
  width: min(100%, 320px);
  padding: 22px;
}

.goal-save-dialog p {
  color: var(--ink-2);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.goal-save-dialog button {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 800;
}

/* 피드 카드 ⋯ 메뉴: 버튼 쪽(오른쪽 위)에서 펼쳐진다. */
.history-context-menu {
  position: fixed;
  z-index: var(--z-menu);
  width: 128px;
  overflow: hidden;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--elev-float);
  transform-origin: top right;
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-med) var(--ease-spring),
    display var(--dur-fast) allow-discrete;
}

.history-context-menu[hidden] {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  transition-timing-function: var(--ease-exit);
}

@starting-style {
  .history-context-menu:not([hidden]) {
    opacity: 0;
    transform: scale(0.92);
  }
}

.history-context-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 132px;
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--danger-strong);
  cursor: pointer;
  font-weight: 800;
  text-align: left;
  padding: 0 10px;
}

.history-context-menu button:hover {
  background: var(--danger-soft);
}

.history-context-menu [data-history-action='delete']::before {
  content: '';
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon-trash) center / contain no-repeat;
  mask: var(--icon-trash) center / contain no-repeat;
}

@media (max-width: 420px) {
  .photo-source-panel {
    gap: 8px;
    padding-inline: 14px;
  }
}

@keyframes wizard-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wizard-rec-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.video-capture-button {
  display: block;
  width: 100%;
  margin: 10px 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--protein-border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.video-capture-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--media-surface);
}

.video-capture-notice {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  margin: 0 auto;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--scrim-heavy);
  color: var(--media-ink);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.video-capture-countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 84px;
  padding: 18px 0;
  border-radius: 50%;
  background: var(--scrim);
  color: var(--media-ink);
  font-size: 40px;
  font-weight: 800;
  text-align: center;
  line-height: 1;
}

.video-capture-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
}

.video-capture-start-button {
  flex: 1;
  max-width: 260px;
  padding: 14px 18px;
  border: none;
  border-radius: 999px;
  background: var(--danger-strong);
  color: var(--cta-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.video-capture-close-button {
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--media-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

body {
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}

h1,
h2,
h3 {
  font-family: var(--font);
  font-weight: var(--w-head);
  letter-spacing: var(--track-head);
}

h1 {
  letter-spacing: var(--track-title);
}

small:not(.app-tab small) {
  font-size: max(var(--fs-caption-min), 0.8125rem);
  line-height: 1.45;
}

.app {
  padding-bottom: calc(108px + env(safe-area-inset-bottom));
}

/* ---------- 상단바 ----------
   브랜드 표시·화면 모드 버튼·오른쪽 자리. 맨 위에서는 배경 없이 두고, 스크롤하면 유리 재질과 헤어라인이 나타난다.
   화면별로 상단바를 숨기거나 바꾸는 규칙은 각 화면 구역에 있다. */

.topbar p {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
  display: none;
}

.topbar {
  /* 상단바는 고정하지 않고 페이지와 함께 위로 스크롤되어 사라진다(앱·웹 같다). */
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
  gap: 4px;
  border-bottom-color: transparent;
  background: transparent;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.brand-icon {
  display: block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* 워드마크는 layout.js의 인라인 SVG(글자 윤곽선)다. 크기는 글자 크기(font-size) 기준이라 1em이 예전
   텍스트(line-height: 1)의 줄 높이와 같고, 폭은 자간을 넣은 글자 폭(viewBox 4131/1000)이다. */
.brand-name {
  display: block;
  flex: 0 0 auto;
  width: 4.131em;
  height: 1em;
  font-size: 20px;
  overflow: visible;
}

.brand-word-bap {
  fill: var(--brand);
}

.brand-word-snap {
  fill: var(--ink);
}

.topbar-trailing-slot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

.topbar-theme-button,
.topbar-search-button {
  --icon: var(--icon-moon);
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--elev-card);
  color: var(--ink-2);
  cursor: pointer;
}

.topbar-theme-button[data-resolved-theme='dark'] {
  --icon: var(--icon-sun);
}

.topbar-search-button {
  --icon: var(--icon-search);
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease-spring);
}

.topbar-search-button:active {
  transform: scale(0.92);
  transition-duration: var(--dur-instant);
}

.topbar-theme-button::before,
.topbar-search-button::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

@media (max-width: 359px) {
  .topbar .brand-lockup {
    gap: 5px;
  }

  .topbar .brand-name {
    font-size: 18px;
  }
}

/* 목표 마법사 안에도 상단바가 하나 더 있으므로, 화면의 주 상단바에만 전환 이름을 준다(중복이면 전환이 취소된다). */
.app > .topbar {
  view-transition-name: app-topbar;
}

/* ---------- 하단 탭바·카메라 버튼·맨 위로 버튼 ----------
   탭바와 카메라 버튼은 화면 아래 가운데 한 줄(.app-footer)에 유리 캡슐로 뜬다. 선택한 탭은 뒤에 깐
   .app-tab-indicator로 표시하고, 화면을 옮기면 새 탭 자리로 미끄러진다(화면 전환 구역). */
.app-footer {
  position: fixed;
  z-index: 60;
  right: auto;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(520px, 100%);
  margin: 0;
  padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
  transform: translateX(-50%);
}

/* 로그인·가입·재설정 화면의 푸터: 탭바 없이 로그아웃 버튼만 담는다. */
.app-footer-login {
  position: static;
  display: block;
  width: 100%;
  pointer-events: auto;
  transform: none;
}

.app-tabbar {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 2px;
  width: auto;
  min-width: 0;
  min-height: 60px;
  padding: 5px;
  border: 0;
  border-radius: 30px;
  background: var(--glass-float);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-float);
  pointer-events: auto;
  view-transition-name: app-tabbar;
}

/* 앱 셸(이슈 #162): 하단 탭바는 네이티브가 그린다. 웹 탭바는 숨기고 카메라 버튼만 오른쪽 아래에 남긴다. */
html.is-native-app .app-tabbar {
  display: none;
}

html.is-native-app .app-footer {
  justify-content: flex-end;
}

/* 앱 셸 플로팅 배치(iOS 26 이상, 이슈 #162). 웹뷰가 상태바·홈 표시줄 밑까지 차고(viewport-fit=cover), 하단
   유리 탭바와 카메라 버튼은 네이티브가 내용 위에 띄운다. 웹 바닥글은 숨기되 카메라 버튼의 동작(기록 방법 선택)은
   네이티브 버튼이 그대로 부른다. 화면 아래 여백은 브라우저 플로팅 탭바 여백을 그대로 쓴다. 상단바는 유리 캡슐로
   띄우고, 상태바 밑으로 지나가는 내용은 배경색으로 흐려 가린다. */
html.is-native-floating body {
  padding-top: env(safe-area-inset-top);
}

html.is-native-floating .app-footer:not(.app-footer-login) {
  visibility: hidden;
}

html.is-native-floating::after {
  content: '';
  position: fixed;
  z-index: 59;
  top: 0;
  right: 0;
  left: 0;
  height: calc(env(safe-area-inset-top) + 12px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
  pointer-events: none;
}

/* 앱(플로팅)에서는 상단바를 유리 캡슐로 그린다. 상단바는 화면 전환 이름(view-transition-name)이 있어
   안쪽 요소의 흐림은 페이지를 읽지 못하므로(backdrop root) 유리 재질을 상단바 자신에 준다. */
html.is-native-floating .topbar {
  min-height: 52px;
  margin-top: 6px;
  /* 캡슐 그림자가 아래 콘텐츠(제목)에 겹치지 않게 띄운다. */
  margin-bottom: 14px;
  padding: 4px 4px 4px 14px;
  border-radius: 999px;
  background: var(--glass-float);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-float);
}

html.is-native-floating .topbar-theme-button,
html.is-native-floating .topbar-search-button {
  background: transparent;
  box-shadow: none;
}

/* 앱 셸 업데이트 안내(최소·권장 버전, native-app.js). 최소 버전 미만이면 화면 전체를 덮는다. */
.app-update-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--scrim-sheet);
}

/* 띠는 화면 맨 위에 두고 페이지와 함께 스크롤한다. 고정하면 상단바와 내용을 가리고, 앱(플로팅)에서는
   닫기 버튼이 상태바 밑에 깔린다. */
.app-update-banner {
  width: min(100% - 24px, 720px);
  margin: 10px auto 0;
}

.app-update-panel {
  position: relative;
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--elev-float);
}

.app-update-banner .app-update-panel {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border-radius: var(--radius-control);
}

.app-update-panel p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.app-update-link {
  display: grid;
  place-items: center;
  min-height: 48px;
  margin-top: 8px;
  border-radius: 16px;
  background: var(--cta);
  color: var(--cta-ink);
  font-weight: 800;
  text-decoration: none;
}

.app-update-banner .app-update-link {
  min-height: 40px;
  margin-top: 4px;
}

/* 이슈 #162: 첫 사진 접수 뒤 한 번 보이는 분석 완료 알림 안내. 업데이트 띠와 같은 모양에 버튼만 쓴다. */
button.app-update-link {
  width: 100%;
  border: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.app-update-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.app-tab {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 1 1 0;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  overflow: visible;
  padding: 5px 3px;
  border-radius: 25px;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: var(--w-label);
  line-height: 1.2;
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-med) var(--ease-spring);
}

.app-tab.is-active {
  color: var(--ink);
}

.app-tab:active {
  transform: scale(0.94);
  transition-duration: var(--dur-instant);
}

/* 탭마다 이름을 줘서, 카메라 버튼 유무로 탭바 폭이 달라져도 각 탭이 겹치지 않고 제자리로 옮겨 간다. */
.app-tab[href='/views/dashboard.html'] {
  view-transition-name: app-tab-home;
}

.app-tab[href='/views/trends.html'] {
  view-transition-name: app-tab-trends;
}

/* 식단 상세에만 있는 신규 등록 링크(#219). */
.app-tab[href='/views/record.html'] {
  view-transition-name: app-tab-record;
}

.app-tab[href='/views/achievements.html'] {
  view-transition-name: app-tab-achievements;
}

.app-tab[href='/views/profile.html'] {
  view-transition-name: app-tab-profile;
}

.app-tab-indicator {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--brand-soft);
  view-transition-name: app-tab-indicator;
}

.app-tab-icon {
  display: grid;
  width: 24px;
  height: 22px;
  place-items: center;
  color: var(--ink-4);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.app-tab.is-active .app-tab-icon {
  color: var(--brand);
  transform: translateY(-1px);
}

.app-tab-icon svg {
  display: block;
  transition: transform var(--dur-med) var(--ease-spring);
}

.app-tab.is-active .app-tab-icon svg {
  stroke-width: 2.1;
}

.app-tab small {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-caption-min);
  font-weight: var(--w-label);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-record-button {
  position: static;
  z-index: auto;
  display: grid;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--cta);
  box-shadow: var(--elev-float);
  color: var(--cta-ink);
  cursor: pointer;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  pointer-events: auto;
  transition:
    transform var(--dur-med) var(--ease-spring),
    box-shadow var(--dur-med) var(--ease-standard);
  view-transition-name: app-fab;
}

.floating-record-button svg {
  display: block;
}

/* 누르는 동안과 사진 소스 시트가 열려 있는 동안 작게 눌린 모양을 유지한다. */
.floating-record-button:active,
.floating-record-button[aria-expanded='true'] {
  transform: scale(0.92);
  transition-duration: var(--dur-instant);
}

/* 맨 위로 버튼: 카메라 버튼 바로 위에 같은 유리 재질로 쌓이고, 작게 튀어 오르며 나타난다. */
.scroll-to-top-button {
  --icon: var(--icon-arrow-up);
  position: fixed;
  z-index: 15;
  right: 18px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-float);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-float);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.86);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-med) var(--ease-spring);
}

.scroll-to-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.scroll-to-top-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (max-width: 420px) {
  .app-footer {
    gap: 8px;
    padding-inline: 10px;
  }

  .app-tab {
    padding-inline: 2px;
  }

  .app-tab-icon {
    width: 23px;
    height: auto;
    font-size: inherit;
  }

  .app-tab-icon svg {
    width: 21px;
    height: 21px;
  }
}

@media (max-width: 359px) {
  .app-tabbar {
    min-height: 56px;
    border-radius: 28px;
  }

  .floating-record-button {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }
}

/* ---------- 카드 ----------
   화면 카드는 표면 색·카드 반경·그림자 토큰을 쓴다. 화면마다 모양이 다른 곳만 화면별로 덮어쓴다.
   등록 화면 촬영 영역(.capture-panel)의 겉모습은 .record-capture-panel이 정한다. 성과 화면 패널과
   마이 화면 카드는 각 화면 규칙과 순서가 얽혀 있어 그 화면 규칙과 함께 둔다. */

/* 홈·목표의 요약 카드 */
.dashboard-card {
  display: grid;
  gap: 20px;
  padding: 24px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-card);
}

/* 홈: 요약과 칼로리 링을 두 칸으로 놓는다. */
body[data-page='dashboard'] .dashboard-card {
  grid-template-columns: minmax(0, 1fr) clamp(88px, 27vw, 108px);
  column-gap: 12px;
}

/* 목표: 카드 겉모습 없이 제목과 목표 설정만 보인다. */
body[data-page='goals'] .dashboard-card {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* 홈 기록 패널. 스크립트가 피드로 바꾸면(history-feed-panel) 목록 틀은 투명해지고 안의 식단 카드가
   표면을 가진다. 그 전이나 스크립트가 없을 때는 카드 표면으로 보인다. */
.history-panel {
  margin-top: 0;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.history-panel.history-feed-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* 스크롤 연동 등장 애니메이션이 transform을 쓰므로, 누름 반응은 별도 scale 속성으로 준다. */
.meal-feed-card {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-card);
  transition: scale var(--dur-med) var(--ease-spring);
}

/* Feed card photo header (#197 mockup): meal·time chip and ⋯ menu sit on the photo. */
.meal-feed-card.has-photo-header {
  position: relative;
}

.meal-feed-card.is-entering {
  transform-origin: top;
  animation: food-card-enter 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.meal-feed-card.is-removing {
  pointer-events: none;
  transform-origin: top;
  animation: food-card-remove 220ms ease-in both;
}

/* 등록·상세 화면의 본문 틀: 카드 겉모습 없이 화면마다 간격·배경만 다르다. */
body[data-page='record'] .log-view {
  gap: 12px;
}

body[data-page='edit'] .log-view {
  width: 100%;
  gap: 0;
  background: var(--bg);
}

.record-photo-card {
  min-width: 0;
  padding: 22px 20px 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-card);
}

/* 등록 화면 사진 위 분석 안내. 사진 위에 뜨므로 표면색 대신 테마와 상관없이 어두운 막과 밝은 글자를 쓴다. */
.analysis-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(86%, 330px);
  padding: 18px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--scrim-heavy);
  box-shadow: var(--shadow-card);
  color: var(--media-ink);
}

/* 등록·상세의 분석 결과 */
.result {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

body[data-page='edit'] .result {
  margin-top: 0;
}

.edit-result-header {
  display: block;
  margin-top: 24px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* 상세: 식단 머리는 카드 없이 본문 위에 놓는다. */
body[data-page='edit'] .edit-result-header {
  display: grid;
  /* 한 칸짜리 auto 트랙은 내용 너비로 줄어들어 식단명 줄이 본문 오른쪽 끝까지 가지 않는다.
     1fr로 채워 칼로리를 오른쪽 끝에 붙인다(#409). */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-self: stretch;
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 로그인·가입·재설정·닉네임·동의·약관 화면의 본문 카드(로그인은 .login-view가 카드 없이 덮는다) */
.auth-view {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 520px;
  margin: 10px auto 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

@media (max-width: 380px) {
  .dashboard-card {
    gap: 18px;
    padding: 20px 16px;
  }

  .record-photo-card {
    padding: 19px 15px 16px;
  }
}

@media (max-width: 360px) {
  .auth-view {
    padding: 18px;
  }
}

@keyframes dashboardStreakEmphasis {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
  }
}

.dashboard-nutrition-details summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style-position: inside;
}

/* 이슈 #401: 홈의 기간 코칭 한 줄. 추이 화면의 전체 코칭 카드로 가는 링크라 카드처럼 보이게 두고,
   한 줄 요약이 길어지면 말줄임으로 잘라 홈 높이를 늘리지 않는다. */
.dashboard-coaching-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
}

.dashboard-coaching-link:hover {
  background: var(--surface-2);
}

.dashboard-coaching-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: var(--w-strong);
}

.dashboard-coaching-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-coaching-text strong {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: var(--w-strong);
}

.dashboard-coaching-text > span {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-caption-min);
  font-weight: var(--w-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-coaching-arrow {
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
}

/* ---------- AI 조언·분석 피드백 ----------
   홈 피드 카드와 식단 상세가 같이 쓰는 AI 조언 말풍선·진행 표시·다시 시도 버튼, 분석 결과 피드백(엄지 버튼)과
   저장 확인 표시. 상세 화면에서만 다른 모양은 식단 편집기·상세 화면 구역에서 덮는다. */

.meal-ai-advice-panel {
  display: grid;
  color: var(--ink-2);
}

.meal-ai-advice-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  grid-column: 1;
  grid-row: 1;
  width: 30px;
  height: 30px;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}

.meal-ai-advice-icon {
  display: block;
  flex: 0 0 16px;
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  color: var(--brand);
}

.meal-ai-advice-panel p,
.meal-feed-ai-advice p {
  margin: 0;
  min-height: 1.4em;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap;
}

.meal-feed-ai-advice {
  display: grid;
  color: var(--ink-2);
}

.meal-feed-ai-advice p {
  font-size: 12px;
  line-height: 1.45;
}

.meal-ai-advice-progress {
  display: flex;
  align-items: center;
  gap: 7px;
}

.meal-ai-advice-progress .meal-analysis-spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.meal-ai-advice-reason {
  color: var(--ink-2);
  font-size: 12px;
}

/* 이슈 #603(App Store 1.4.1): 건강 정보 옆의 근거와 출처 링크. */
.health-source-link,
.meal-ai-advice-panel .health-source-link {
  margin: 0;
  min-height: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.health-source-link a,
.trend-coaching-notice a,
.goal-preset-description-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.meal-ai-advice-panel[data-advice-state='failed'],
.meal-ai-advice-panel[data-advice-state='empty'],
.meal-feed-ai-advice[data-advice-state='failed'],
.meal-feed-ai-advice[data-advice-state='empty'] {
  border-color: var(--danger-border);
  border: 0;
  background: transparent;
  color: var(--ink-2);
}

.meal-ai-advice-panel .meal-analysis-retry,
.meal-feed-ai-advice .meal-analysis-retry {
  margin-top: 0;
  justify-self: start;
  padding: 6px 10px;
  grid-column: 2;
  font-size: 13px;
}

.meal-analysis-retry {
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--protein-border);
  color: var(--ink-2);
  font: inherit;
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.meal-analysis-retry:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--protein-border) 35%, transparent);
  outline-offset: 2px;
  outline-color: color-mix(in srgb, var(--ink) 25%, transparent);
}

.meal-analysis-retry:active {
  transform: translateY(1px);
}

.meal-card-feedback {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 9px 12px 10px;
  border-top: 1px solid var(--carb-border);
  border-top-color: var(--line);
  background: transparent;
}

.meal-card-feedback > span {
  margin-right: auto;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.meal-card-feedback > div {
  display: flex;
  align-items: center;
  gap: 2px;
}

.meal-card-feedback button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    color 130ms ease,
    background 130ms ease;
}

.meal-card-feedback button:active {
  transform: scale(0.92);
}

.meal-card-feedback button svg {
  width: auto;
  height: 17px;
  transition: transform 140ms ease;
}

.meal-card-feedback button svg.feedback-best-icon {
  /* 이슈 #483: viewBox를 내용에 맞춰 넓혀(30:22) 같은 높이에서 가로가 길어졌다. 32px 버튼 안에 들어오게 줄인다. */
  height: 20px;
  stroke-width: 1.4;
}

.meal-card-feedback button:hover svg {
  fill: currentColor;
  transform: scale(1.08);
}

.meal-card-feedback.is-saving {
  opacity: 0.58;
  pointer-events: none;
}

.meal-card-feedback.is-confirming {
  display: grid;
  min-height: 82px;
  place-items: center;
  background: var(--success-soft);
}

body[data-page='dashboard'] .meal-card-feedback > span {
  font-weight: var(--w-strong);
}

.meal-ai-advice-panel,
.meal-feed-ai-advice {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 6px 10px;
  margin: 16px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.meal-ai-advice-panel > p,
.meal-feed-ai-advice > p {
  grid-column: 2;
  padding: 12px 15px;
  border-radius: 20px 20px 20px 5px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--w-body);
  line-height: var(--lh-body);
}

.meal-ai-advice-panel > #mealAiAdviceText,
.meal-feed-ai-advice > .meal-ai-advice-body {
  grid-column: 2;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
  background: var(--surface-2);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.meal-ai-advice-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.meal-ai-advice-body > p,
.meal-ai-advice-section p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.meal-ai-advice-body .meal-ai-advice-summary {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.meal-ai-advice-section {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.meal-ai-advice-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.meal-ai-advice-section ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.meal-ai-advice-recommendations {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.meal-ai-advice-recommendation {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

.meal-ai-advice-recommendation strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.meal-ai-advice-tip {
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

/* 홈 피드 조언은 카드 테두리에서 떨어뜨리고, 긴 문구도 말풍선 안에서 줄바꿈한다. */
body[data-page='dashboard'] .meal-feed-ai-advice {
  min-width: 0;
  margin-inline: 12px;
}

body[data-page='dashboard'] .meal-feed-ai-advice > p,
body[data-page='dashboard'] .meal-feed-ai-advice > .meal-ai-advice-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-page='dashboard'] .meal-feed-ai-advice .meal-analysis-spinner {
  flex-shrink: 0;
}

.meal-card-feedback button:hover {
  background: var(--surface-2);
}

/* 피드백 저장 확인: 버튼과 같은 선 엄지 아이콘을 크게 보여 준다(core.js showCardFeedbackConfirmation). */
.meal-feedback-confirmation {
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--success-strong);
  font-size: 12px;
  font-weight: 800;
  animation: meal-feedback-confirm 800ms ease-out both;
}

.meal-feedback-confirmation i {
  font-size: 30px;
  font-style: normal;
  line-height: 1;
  animation: meal-feedback-thumb 620ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
  display: grid;
  place-items: center;
}

.meal-feedback-confirmation i svg {
  width: 28px;
  height: 28px;
}

/* ---------- 식단 편집기·상세 화면 ----------
   식단 상세(사진 헤더·보기 모드·영양 요약)와 등록·상세가 같이 쓰는 편집기(식단명·끼니·식사 시각·음식 카드와 양 조절·
   영양 상세·저장 상태). 화면 틀(.log-view·.result·.result-header)은 카드 구역 앞뒤, 사진 미리보기는 등록 화면 구역,
   끼니 선택은 세그먼트 컨트롤 구역, 상세 시트는 시트 구역, 홈 피드와 같이 쓰는 AI 조언·분석 피드백은 바로 앞 구역에
   있다. */

body[data-page='edit'] .subpage-header {
  margin-bottom: 0;
}

.edit-photo-status {
  min-height: 20px;
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

body[data-page='edit'] .edit-photo-status:empty {
  min-height: 0;
  margin-top: 0;
}

.edit-photo-status.is-saving::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 7px;
  border: 2px solid var(--protein-border);
  border-top-color: var(--protein);
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}

.edit-photo-status.is-saved {
  color: var(--success-strong);
}

.edit-photo-status.is-error {
  color: var(--danger-strong);
}

.meal-context-fields .weight-wheel {
  margin-top: 6px;
}

.meal-type-picker {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.meal-type-picker legend {
  margin-bottom: 8px;
  font-weight: 700;
}

.result-header strong {
  text-align: right;
}

.meal-name-field {
  display: grid;
  gap: 4px;
  min-width: min(58%, 220px);
}

.meal-name-field > span:first-child {
  font-size: 12px;
  text-align: right;
}

.meal-name-field input,
.meal-name-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 9px;
  text-align: right;
}

.meal-name-field input:focus,
.meal-name-field textarea:focus {
  border-color: var(--success-border);
  outline: 2px solid color-mix(in srgb, var(--success-border) 18%, transparent);
}

.edit-result-header .meal-name-field {
  width: 100%;
  min-width: 0;
}

.edit-result-header .meal-name-field > span:first-child {
  text-align: left;
}

.edit-result-header .meal-name-field input,
.edit-result-header .meal-name-field textarea {
  text-align: left;
}

.edit-result-header .meal-name-field textarea {
  min-height: 40px;
  resize: none;
  overflow: hidden;
  line-height: 1.45;
}

.edit-result-header .meal-name-field .input-save-indicator {
  top: 19px;
}

.edit-nutrition-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--carb-border);
}

.edit-macro-ring {
  width: 128px;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
}

.edit-macro-ring strong {
  font-size: 22px;
  line-height: 1;
}

.edit-macro-ring span {
  font-size: 12px;
  color: var(--ink-3);
}

.edit-macro-legend {
  width: min(100%, 158px);
  justify-self: end;
  align-content: center;
}

.nutrition-detail-table div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--carb-border);
}

.nutrition-detail-table {
  margin: 0;
}

.nutrition-detail-table h3 {
  font-size: 16px;
  margin: 14px 0 8px;
}

.nutrition-detail-table span {
  color: var(--ink-2);
}

.nutrition-detail-table .nutrition-child {
  padding-left: 18px;
}

.nutrition-detail-table .nutrition-child span::before {
  content: '- ';
  color: var(--ink-3);
}

.food-breakdown {
  padding-top: 14px;
  margin-top: 26px;
}

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-title-copy {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.section-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.section-title span {
  font-weight: 800;
}

.section-title small {
  color: var(--ink-3);
}

.food-nutrition-bulk-button {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--success-border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.food-nutrition-bulk-button:hover:not(:disabled),
.food-nutrition-bulk-button:focus-visible:not(:disabled) {
  background: var(--success-soft);
}

.food-nutrition-bulk-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.editable-input {
  position: relative;
  display: block;
}

.editable-input input,
.editable-input textarea {
  padding-right: 40px;
}

.input-save-indicator {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 17px;
  height: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}

.input-save-indicator.is-saving {
  box-sizing: border-box;
  border: 2px solid var(--protein-border);
  border-top-color: var(--protein);
  border-radius: 50%;
  animation: input-save-spin 0.75s linear infinite;
}

.input-save-indicator.is-saved::after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--success-border);
  border-bottom: 2px solid var(--success-border);
  content: '';
  opacity: 0;
  transform: rotate(45deg) scale(0.5);
  animation: input-save-check 0.32s ease-out forwards;
}

.food-list {
  display: grid;
  gap: 0;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.food-item {
  --food-accent: var(--brand);
  --food-accent-soft: var(--brand-soft);
  --food-accent-ink: var(--ink-2);
  gap: 10px;
  border-left: 4px solid var(--food-accent);
  display: block;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.food-item-accent-1 {
  --food-accent: var(--brand);
  --food-accent-soft: var(--brand-soft);
  --food-accent-ink: var(--ink-2);
}

.food-item-accent-2 {
  --food-accent: var(--protein);
  --food-accent-soft: var(--surface-2);
  --food-accent-ink: var(--ink-2);
}

.food-item-accent-3 {
  --food-accent: var(--ink-2);
  --food-accent-soft: var(--surface-2);
  --food-accent-ink: var(--ink-2);
}

.food-item-index {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--food-accent-soft);
  color: var(--food-accent-ink);
  font-size: 11px;
  font-weight: 800;
}

.food-item-index b {
  font-size: 13px;
}

.food-item-kcal {
  margin-left: auto;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.meal-context {
  border: 1px solid var(--success-border);
  border-radius: 7px;
  margin: 12px 0;
  background: var(--surface-2);
}

.template-applied-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  border: 1px solid var(--protein-border);
  border-radius: 7px;
  background: var(--protein-soft);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  padding: 9px 10px;
}

.template-applied-note button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid var(--protein-border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
}

.public-nutrition-match-panel {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 11px 13px;
  border: 1px solid var(--success-border);
  border-radius: 7px;
  background: var(--success-soft);
  color: var(--success-strong);
}

.public-nutrition-match-panel.has-conflict {
  border-color: var(--brand-border);
  background: var(--brand-soft);
  color: var(--ink-2);
}

.public-nutrition-match-ref {
  margin: 0;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.88;
}

.public-nutrition-match-panel strong {
  font-size: 12px;
  line-height: 1.4;
}

.public-nutrition-match-panel ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  line-height: 1.35;
}

.meal-context summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  padding: 11px 12px;
}

.food-template-details summary,
.food-nutrition-details summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  padding: 11px 2px;
}

.meal-context summary span,
.food-template-details summary span,
.food-nutrition-details summary span {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

.meal-context-fields {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--success-border);
  padding: 12px;
}

.meal-context-fields > label,
.meal-context-fields fieldset {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

.meal-context-fields label,
.meal-context-fields legend {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.meal-context-fields input {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  padding: 7px 9px;
}

.meal-context-fields input[type='datetime-local'] {
  font-size: 16px;
}

.meal-context-fields small {
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.45;
}

.food-item.is-entering {
  transform-origin: top;
}

.food-item.is-removing {
  overflow: hidden;
  pointer-events: none;
  animation: food-card-remove 220ms ease-in both;
}

.food-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.food-field-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.food-amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.amount-display {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding-block: 6px;
}

.food-template-details,
.food-nutrition-details {
  border-top: 1px solid var(--protein-border);
}

.food-nutrition-details {
  overflow: hidden;
}

.food-template-details > div {
  display: grid;
  gap: 10px;
  padding: 2px 0 12px;
}

.food-template-details label {
  display: grid;
  gap: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.delete-food-button {
  min-height: 32px;
  border: 1px solid var(--danger-border);
  border-radius: 999px;
  color: var(--danger-strong);
  cursor: pointer;
  font-size: 12px;
  padding: 0 11px;
}

.amount-adjust-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(58px, auto));
  gap: 6px;
  padding-bottom: 6px;
}

.amount-adjust-buttons button {
  min-height: 40px;
  border: 1px solid var(--protein-border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
}

.food-nutrition-list {
  display: grid;
  overflow: hidden;
}

.food-nutrient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--protein-border);
  color: var(--ink-2);
  font-size: 13px;
}

.food-nutrient-row strong {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.food-calories-row {
  color: var(--ink);
  font-weight: 700;
}

.food-nutrient-children .food-nutrient-row {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  justify-content: initial;
  column-gap: 8px;
  min-height: 30px;
  padding-left: 24px;
  color: var(--ink-2);
  font-size: 12px;
}

.food-nutrient-children .food-nutrient-row::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-4);
}

.food-nutrition-list > .food-nutrient-row:last-child,
.food-nutrient-children .food-nutrient-row:last-child {
  border-bottom: 0;
}

.food-confidence {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
}

.food-empty {
  color: var(--ink-3);
}

.save-button {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 800;
}

.edit-video-preview {
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  background: var(--media-surface);
  display: block;
}

.meal-detail-feedback {
  margin: 10px 0 12px;
  border: 1px solid var(--protein-border);
  border-radius: 7px;
  border-color: var(--line);
  background: var(--surface-2);
}

/* #198 식단 상세: 사진 헤더와 보기 모드 */
body[data-page='edit'] .app {
  width: min(100%, 720px);
  padding: 0 0 calc(104px + env(safe-area-inset-bottom));
}

body[data-page='edit'] .topbar,
body[data-page='edit'] .log-view-header,
body[data-page='edit'] #videoCaptureButton,
body[data-page='edit'] #scrollToTopButton {
  display: none;
}

body[data-page='edit'] #result {
  margin: 0;
  padding: 0 0 20px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page='edit'] .edit-photo-picker {
  position: relative;
  height: clamp(250px, 72vw, 430px);
  min-height: 250px;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0 0 28px 28px;
  background: var(--surface-2);
}

body[data-page='edit'] .preview.has-image #previewImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: fade-in var(--dur-slow) var(--ease-standard) both;
}

body[data-page='edit'] .preview .placeholder,
body[data-page='edit'] .preview-sample-image,
body[data-page='edit'] .preview-source-button {
  display: none !important;
  pointer-events: none;
}

.edit-photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}

.edit-photo-placeholder svg {
  width: 52px;
  height: 52px;
  color: var(--ink-4);
}

body[data-page='edit'] #preview.has-image .edit-photo-placeholder,
body[data-page='edit'] #preview.is-image-loading .edit-photo-placeholder {
  display: none;
}

.detail-hero-button {
  position: absolute;
  z-index: 8;
  top: max(16px, env(safe-area-inset-top));
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--media-control-bg);
  color: var(--media-control-ink);
  cursor: pointer;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--media-control-shadow);
  backdrop-filter: blur(10px);
  transition: transform var(--dur-med) var(--ease-spring);
}

/* 앱(플로팅)은 본문이 이미 상태바 아래에서 시작하므로(body padding-top) 안전 영역을 다시 더하지 않는다. */
html.is-native-floating .detail-hero-button {
  top: 16px;
}

.detail-hero-back {
  left: 16px;
}

.detail-hero-more {
  right: 16px;
}

body[data-page='edit'] [data-meal-editor] {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 12px;
}

.meal-detail-title-row,
.edit-handoff-title {
  --meal-title-size: clamp(23px, 6vw, 32px);
  --meal-title-leading: 1.2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* 칼로리 숫자를 식단명 첫 줄의 기준선에 맞춘다. 이름이 여러 줄이어도 숫자는 첫 줄 옆에 남는다(#219). */
  align-items: first baseline;
  gap: 12px;
}

.meal-name-read-button,
.edit-handoff-name {
  grid-area: 1 / 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: text;
  font-size: var(--meal-title-size);
  font-weight: 800;
  letter-spacing: var(--track-title);
  line-height: var(--meal-title-leading);
  overflow-wrap: anywhere;
  text-align: left;
}

.meal-name-edit-wrap {
  grid-area: 1 / 1;
  min-width: 0;
}

/* 편집으로 바꿔도 첫 줄 글자가 읽기 모드와 같은 자리·크기에 머물게 위 여백 없이 같은 글꼴 기준을 쓴다. */
.meal-name-edit-wrap textarea {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 0 36px 6px 0;
  border: 0;
  border-bottom: 2px solid var(--brand);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--meal-title-size);
  font-weight: 800;
  letter-spacing: var(--track-title);
  line-height: var(--meal-title-leading);
  resize: none;
}

.detail-title-calories,
.edit-handoff-calories {
  grid-area: 1 / 2;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink-3);
  white-space: nowrap;
}

.detail-title-calories strong,
.edit-handoff-calories strong {
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
}

.detail-title-calories span,
.edit-handoff-calories span {
  font-size: 13px;
  font-weight: 700;
}

body[data-page='edit'] #editMacroRing,
body[data-page='edit'] .detail-calorie-total,
body[data-page='edit'] .detail-macro-values {
  display: none;
}

body[data-page='edit'] .edit-nutrition-summary {
  display: block;
  margin-top: 18px;
  padding: 0;
  border: 0;
}

.detail-macro-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.detail-macro-card {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.detail-mini-ring {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: conic-gradient(
    var(--macro-color, var(--brand)) 0 var(--macro-share, 0%),
    var(--line) var(--macro-share, 0%) 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}

.detail-mini-ring.carbs-dot {
  border-top-color: var(--carb);
  border-right-color: var(--carb);
}

.detail-mini-ring.protein-dot {
  border-top-color: var(--protein);
  border-right-color: var(--protein);
}

.detail-mini-ring.fat-dot {
  border-top-color: var(--fat);
  border-right-color: var(--fat);
}

.detail-macro-card strong {
  max-width: 100%;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.detail-macro-card small {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}

body[data-page='edit'] .nutrition-detail-disclosure {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.nutrition-detail-disclosure > summary {
  min-height: 48px;
  padding: 14px 2px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 800;
}

.nutrition-detail-disclosure[open] > summary {
  border-bottom: 1px solid var(--line);
}

body[data-page='edit'] .nutrition-detail-table {
  padding: 4px 2px 10px;
}

.nutrition-estimate-note {
  margin: 8px 0 0;
  color: var(--ink-3);
  line-height: 1.5;
}

.food-breakdown > .section-title {
  min-height: 42px;
  padding: 0 0 10px;
  margin-bottom: 12px;
  border-bottom: 0;
}

.food-breakdown .section-title-copy > span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.food-breakdown .section-title-copy small {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 12px;
}

.food-item-summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: minmax(28px, auto) minmax(24px, auto);
  align-items: center;
  width: 100%;
  min-height: 86px;
  gap: 2px 10px;
  padding: 13px 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.food-item-summary .food-item-index {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 10px;
  font-size: 0;
  background: var(--surface-2);
  color: var(--ink-2);
}

.food-item-summary .food-item-index b {
  font-size: 14px;
}

.food-summary-copy {
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: 3px;
  min-width: 0;
}

.food-summary-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.food-summary-macros {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
}

.food-item-summary .food-item-kcal {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.food-summary-amount {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  max-width: 108px;
  overflow: hidden;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-summary-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.food-summary-title .food-summary-name {
  min-width: 0;
}

.food-summary-chevron {
  display: none;
}

/* 상세(#409)는 음식명 오른쪽 화살표로 행을 눌러 편집할 수 있음을 알린다. 펼치면 아래를 가리킨다. */
body[data-page='edit'] .food-summary-chevron {
  display: block;
  transition: transform var(--dur-med) var(--ease-spring);
}

body[data-page='edit'] .food-item-summary[aria-expanded='true'] .food-summary-chevron {
  transform: rotate(90deg);
}

.food-edit-panel:not([hidden]) {
  display: grid;
  gap: 12px;
  padding: 12px 0 16px 40px;
}

.food-edit-panel.is-entering:not([hidden]) {
  animation: food-card-enter 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.food-edit-panel.is-collapsing {
  overflow: hidden;
  pointer-events: none;
  animation: food-card-remove 220ms ease-in both;
}

.food-edit-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.food-edit-heading .food-field {
  min-width: 0;
}

.food-edit-heading input,
.food-template-details input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  padding: 8px 38px 8px 10px;
}

.food-edit-panel .food-amount-row {
  align-items: end;
}

.food-edit-panel .food-template-details,
.food-edit-panel .food-nutrition-details {
  border-top-color: var(--line);
}

.food-edit-panel .food-template-details summary,
.food-edit-panel .food-nutrition-details summary {
  color: var(--ink-2);
}

.food-edit-panel .delete-food-button {
  min-height: 38px;
}

.food-item.is-entering {
  animation: food-card-enter 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.auto-save-hint {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
}

.meal-detail-notes {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 15px;
  border-radius: 18px;
  background: var(--surface-2);
}

.meal-detail-notes p {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.meal-detail-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meal-detail-hashtags span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}

/* 조언은 기록 정보 뒤, 피드백 앞에 온다(#409). 아래 간격은 피드백의 margin-top이 맡는다. */
body[data-page='edit'] #mealAiAdvicePanel {
  margin-bottom: 0;
}

@media (max-width: 380px) {
  body[data-page='edit'] [data-meal-editor] {
    padding-right: 16px;
    padding-left: 16px;
  }

  .detail-macro-rings {
    gap: 7px;
  }

  .detail-macro-card {
    padding: 10px 8px;
    border-radius: 16px;
  }

  .detail-macro-card strong {
    font-size: 17px;
  }

  .food-item-summary {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 2px 7px;
  }

  .food-item-summary .food-item-index {
    width: 28px;
    height: 28px;
  }

  .food-summary-name {
    font-size: 15px;
  }

  .food-item-summary .food-item-kcal {
    font-size: 13px;
  }

  .food-edit-panel:not([hidden]) {
    padding-left: 35px;
  }
}

body[data-page='record'] #editMacroRing > strong,
body[data-page='record'] #editMacroRing > span {
  position: relative;
  z-index: 2;
}

body[data-page='edit'] .edit-photo-picker:not(.has-image):not(.is-image-loading) {
  height: clamp(156px, 42vw, 220px);
  min-height: 156px;
}

body[data-page='edit'] .meal-detail-title-row,
.edit-handoff-title {
  width: 100%;
  min-width: 0;
}

body[data-page='edit'] .meal-name-read-button,
.edit-handoff-name {
  width: 100%;
  font-weight: var(--w-display);
}

body[data-page='edit'] .detail-title-calories strong,
.edit-handoff-calories strong,
body[data-page='edit'] .detail-macro-card strong {
  font-weight: var(--w-display);
}

body[data-page='edit'] .food-summary-macros,
body[data-page='edit'] .food-summary-amount,
body[data-page='edit'] .auto-save-hint,
body[data-page='edit'] .food-breakdown .section-title-copy small,
body[data-page='edit'] #expandAllFoodNutritionButton,
body[data-page='edit'] .meal-detail-feedback > span {
  font-size: 13px;
}

body[data-page='edit'] .food-summary-macros,
body[data-page='edit'] .auto-save-hint {
  font-weight: var(--w-body);
}

body[data-page='edit'] .food-summary-amount,
body[data-page='edit'] .meal-detail-feedback > span {
  font-weight: var(--w-label);
}

.meal-context-fields,
.food-breakdown,
.food-nutrition-details {
  border-top-color: var(--line);
}

.edit-nutrition-summary,
.nutrition-detail-table div,
.food-nutrient-row {
  border-bottom-color: var(--line);
}

/* The record editor folds the 11-nutrient table like the detail screen (#198). */
body[data-page='record'] .nutrition-detail-disclosure {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body[data-page='record'] .nutrition-detail-table {
  padding: 4px 2px 10px;
}

body[data-page='edit'] .edit-photo-picker.has-image {
  border-radius: 0;
}

body[data-page='edit'] [data-meal-editor] {
  position: relative;
  /* 이슈 #483: 사진 헤더 위로 올라와 둥근 상단 경계가 사진에 덮이지 않게 한다(헤더의 버튼은 z-index 8). */
  z-index: 1;
  border-radius: 28px 28px 0 0;
  background: var(--bg);
}

body[data-page='edit'] .edit-photo-picker.has-image ~ [data-meal-editor] {
  margin-top: -24px;
}

.food-breakdown {
  border-top: 0;
}

.food-list > .food-item:last-child {
  border-bottom: 0;
}

.meal-save-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

.meal-save-error > span {
  flex: 1 1 180px;
}

.meal-save-error button {
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--cta);
  color: var(--cta-ink);
  font: inherit;
  cursor: pointer;
}

.input-save-indicator.is-error {
  color: var(--danger-strong);
  font-size: 15px;
  font-weight: var(--w-strong);
  text-align: center;
}

.input-save-indicator.is-error::after {
  content: '!';
}

.macro-ring-legend {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 6px;
}

.macro-ring-legend > .macro-legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 5px;
  row-gap: 1px;
  min-height: 28px;
  padding: 4px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
}

.macro-ring-legend .macro-legend-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.macro-ring-legend small {
  color: var(--ink-3);
  font-size: 10px;
}

.macro-ring-legend small b,
.macro-ring-legend small strong {
  color: var(--ink-2);
  font-weight: 800;
}

.macro-ring-legend i {
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* 사진 위 날짜·kcal 겹침은 바로 아래 끼니·시각·kcal과 같은 정보라 상세에서는 숨긴다. */
body[data-page='edit'] #previewMetadata {
  display: none;
}

/* 피드에서 넘어올 때 첫 프레임에 그리는 대체 사진 헤더(components/page-transitions.js).
   사진이 있는 실제 헤더(.edit-photo-picker.has-image)와 같은 크기라, 식단을 불러오면 같은 자리에서 바뀐다.
   사진을 다시 받는 동안에는 .skeleton-shimmer 배경이 보인다. */
.detail-hero-ghost {
  height: clamp(250px, 72vw, 430px);
  min-height: 250px;
  overflow: hidden;
  border-radius: 0;
}

.detail-hero-ghost img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 전환이 끝나기 전에 식단이 오면, 걷기 전까지 실제 헤더와 같은 자리에 겹쳐 둔다(.app과 같은 폭·가운데). */
.detail-hero-ghost.is-overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  width: min(100%, 720px);
  margin-inline: auto;
  pointer-events: none;
}

/* 대체 헤더가 겹쳐 있는 동안(전환 중)에는 실제 헤더를 가려, 커지는 사진 아래로 같은 사진이 먼저 비치지 않게 한다. */
.detail-hero-ghost.is-overlay + #logView #preview {
  visibility: hidden;
}

/* 식단을 불러오는 동안 상세와 같은 모양(사진 헤더 → 둥근 시트 → 제목·음식 카드)의 자리를 먼저 그린다.
   불러온 상세로 바뀔 때 모양이 크게 달라 깜빡여 보이지 않게 한다. 피드에서 사진을 넘겨받았으면 사진 자리는
   대체 헤더(.detail-hero-ghost)가 채운다. */
.edit-page-skeleton {
  display: grid;
}

.edit-skeleton-photo {
  height: clamp(250px, 72vw, 430px);
  min-height: 250px;
  border-radius: 0;
}

.detail-hero-ghost + #logView .edit-skeleton-photo {
  display: none;
}

.edit-skeleton-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  margin-top: -24px;
  padding: 24px 22px 12px;
  border-radius: 28px 28px 0 0;
  background: var(--bg);
}

.edit-skeleton-sheet i {
  display: block;
}

.edit-skeleton-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 24px;
  align-items: center;
}

.edit-skeleton-title i {
  height: 30px;
}

.edit-skeleton-title i:first-child {
  width: 78%;
}

/* 피드에서 넘겨받은 식단명·칼로리(page-transitions.js). 불러온 상세의 제목 줄과 같은 자리에 둔다. */
.edit-handoff-title {
  margin-top: 12px;
}

.edit-skeleton-heading {
  width: 110px;
  height: 20px;
  margin-top: 20px;
}

.edit-skeleton-foods {
  display: grid;
  gap: 10px;
}

.edit-skeleton-foods i {
  height: 64px;
  border-radius: var(--radius-card);
}

@media (max-width: 380px) {
  .edit-skeleton-sheet {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* 원본 사진을 받는 동안 넘겨받은 썸네일을 같은 자리에 겹쳐 둔다(core.js showEditPreviewImageWhenReady). */
body[data-page='edit'] .edit-preview-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* 넘겨받은 사진으로 헤더를 채웠으면 대체 헤더와 한 프레임에 바뀌도록 등장 애니메이션을 생략한다. */
body[data-page='edit'] #result.is-hero-handoff,
body[data-page='edit'] #result.is-hero-handoff #previewImage {
  animation: none;
}

.detail-hero-button:active {
  transform: scale(0.92);
  transition-duration: var(--dur-instant);
}

/* 식사 시각: 체중과 같은 읽기 줄 + 휠(날짜 · 시 : 분, components/datetime-wheel-picker.js). */
.meal-time-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.meal-time-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.meal-time-field .body-weight-readout,
.datetime-wheel .weight-wheel-item {
  font-variant-numeric: tabular-nums;
}

.datetime-wheel .weight-wheel-columns {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) auto minmax(0, 1fr);
}

.datetime-wheel .weight-wheel-item {
  font-size: 20px;
  white-space: nowrap;
}

.datetime-wheel .weight-wheel-item[aria-selected='true'] {
  font-size: 24px;
}

.datetime-wheel [data-part='day'] .weight-wheel-item {
  font-size: 15px;
}

.datetime-wheel [data-part='day'] .weight-wheel-item[aria-selected='true'] {
  font-size: 17px;
}

.amount-adjust-buttons button,
.amount-adjust-buttons button:first-child,
.amount-adjust-buttons button:last-child {
  border-color: var(--line);
  color: var(--ink);
  font-weight: var(--w-strong);
}

.delete-food-button,
.food-edit-panel .delete-food-button {
  border-color: transparent;
  background: var(--danger-soft);
  font-weight: var(--w-strong);
}

/* ---------- 등록 화면 ----------
   사진 카드(미리보기·뷰파인더 모서리·분석 오버레이), 촬영·대체 버튼, 코멘트·해시태그·체중 입력, 끼니 자동 안내.
   카드 겉모습은 카드 구역, 분석 버튼은 버튼 구역에 있고, 상세 화면과 같이 쓰는 편집기는 식단 편집기·상세 화면 구역에 있다. */

.log-view.is-reregistering .record-meal-type-picker,
.log-view.is-reregistering .meal-type-auto-hint {
  display: none;
}

.body-weight-field .record-body-weight-row {
  display: flex;
  min-height: 64px;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.record-body-weight-row .body-weight-readout {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  margin-left: auto;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.record-body-weight-row > svg {
  flex: 0 0 auto;
}

.record-body-weight-row:focus-visible,
.record-hashtag-chip:focus-visible,
.record-photo-action:focus-visible,
.record-alternate-action:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

body[data-page='record'] .subpage-header {
  margin-bottom: 4px;
}

.preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(
      45deg,
      color-mix(in srgb, var(--surface) 28%, transparent) 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      color-mix(in srgb, var(--surface) 28%, transparent) 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      color-mix(in srgb, var(--surface) 28%, transparent) 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      color-mix(in srgb, var(--surface) 28%, transparent) 75%
    ),
    var(--carb-soft);
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  background-size: 20px 20px;
  border: 1px solid var(--carb-border);
}

.preview.has-image {
  display: block;
  aspect-ratio: auto;
  min-height: 0;
}

.camera-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--shadow-ink) 86%, transparent))
    drop-shadow(0 0 10px var(--scrim));
}

.preview-sample-image,
.preview #previewImage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.preview-sample-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  object-fit: contain;
  object-position: center center;
  background: var(--carb-soft);
}

.preview-sample-image[hidden],
.preview #previewImage[hidden],
.preview:not(.has-image) #previewImage {
  display: none !important;
}

.preview #previewImage {
  z-index: 1;
  object-fit: contain;
  object-position: center;
}

.preview.has-image #previewImage {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: initial;
}

.preview-source-button {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.preview-source-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--protein-border) 90%, transparent);
  outline-offset: -3px;
}

.preview-source-button:disabled {
  cursor: wait;
}

.preview-metadata {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--media-ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 80%, transparent);
}

.preview-metadata strong {
  font-size: 14px;
}

.analysis-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--scrim-faint), var(--scrim-strong)), var(--scrim-soft);
  backdrop-filter: blur(2px);
}

.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--success-soft), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--success) 90%, transparent);
  animation: scanMeal 2.2s ease-in-out infinite;
}

.analysis-steps {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analysis-steps li {
  position: relative;
  padding-left: 24px;
  color: color-mix(in srgb, var(--media-ink) 62%, transparent);
  font-size: 14px;
}

.analysis-steps li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--media-ink) 30%, transparent);
  transform: translateY(-50%);
}

.analysis-steps li.is-active {
  color: var(--media-ink);
  font-weight: 700;
}

.analysis-steps li.is-active::before {
  background: var(--success-soft);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 18%, transparent);
}

.analysis-steps li.is-done {
  color: color-mix(in srgb, var(--media-ink) 82%, transparent);
}

.analysis-steps li.is-done::before {
  background: var(--success-soft);
}

.file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.comment-field {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.comment-field label {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

.comment-input-row {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  align-items: stretch;
}

.comment-input-row textarea {
  width: 100%;
  min-height: 42px;
  height: 42px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
  line-height: 1.35;
}

.comment-input-row textarea:focus {
  border-color: var(--success-border);
  outline: 2px solid color-mix(in srgb, var(--success-border) 18%, transparent);
}

.hashtag-field {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.hashtag-field label {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

.hashtag-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 14px;
}

.hashtag-field input:focus {
  border-color: var(--success-border);
  outline: 2px solid color-mix(in srgb, var(--success-border) 18%, transparent);
}

.weight-insight {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.4;
}

.mic-button {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}

.mic-icon {
  width: 26px;
  height: 26px;
}

.mic-button.is-listening {
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--protein-border);
}

.mic-button.is-unavailable {
  background: var(--carb-soft);
  color: var(--ink-2);
  border-color: var(--carb-border);
}

.mic-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.manual-entry-button {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border: 1px solid var(--protein-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.manual-entry-button:hover {
  border-color: var(--brand);
  background: var(--surface-2);
}

.preview-photo-loading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 72px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

/* 이슈 #483: 상세 사진을 불러오는 동안 헤더가 빈 공백으로 보이지 않게 로더가 사진 자리를 가운데에서 채운다. */
body[data-page='edit'] .preview-photo-loading {
  position: absolute;
  inset: 0;
  flex-direction: column;
  gap: 10px;
}

.preview-photo-loading i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--protein-border) 38%, transparent);
  border-top-color: var(--protein);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.preview.is-image-loading .camera-icon {
  display: none;
}

.video-capture-preview {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  background: var(--media-surface);
}

/* #199 식단 기록 진입·메모·해시태그 입력 */
body[data-page='record'] .app {
  width: min(100%, 720px);
  padding: 16px 16px calc(116px + env(safe-area-inset-bottom));
}

.record-meal-type-picker .meal-type-picker {
  margin: 0;
}

.record-meal-type-picker .meal-type-picker legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.meal-type-auto-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 20px;
  margin: -6px 2px 0;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}

.meal-type-auto-hint svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--ink-3);
}

.record-capture-panel {
  display: grid;
  gap: 14px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.record-photo-card > h2 {
  margin: 0;
  font-size: clamp(21px, 5.2vw, 24px);
  font-weight: var(--w-head);
  letter-spacing: var(--track-title);
  line-height: 1.2;
}

.record-photo-card > p {
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.record-photo-preview {
  aspect-ratio: 1.84 / 1;
  margin: 18px 0 0;
  border-radius: 18px;
  background: var(--surface-2);
}

/* 이슈 #387: 사진을 고른 뒤에도 뷰파인더 비율을 지킨다. `.preview.has-image`의 `aspect-ratio: auto`가
   이기면 높이가 0으로 접혀, absolute 이미지가 overflow: hidden에 잘려 사진이 보이지 않는다. */
body[data-page='record'] .record-photo-preview.preview.has-image {
  aspect-ratio: 1.84 / 1;
}

.record-photo-preview .preview-sample-image,
.record-photo-preview #previewImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.record-photo-preview.preview.has-image #previewImage {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.record-photo-preview .preview-sample-image {
  filter: saturate(1.05);
}

body[data-page='record'] .record-photo-preview:not(.has-image) .placeholder {
  display: none;
}

/* 기록 화면 뷰파인더 모서리: 처음 열릴 때 초점을 맞추듯 한 번 안쪽으로 모인다. */
.record-preview-corner {
  position: absolute;
  z-index: 4;
  width: 26px;
  height: 26px;
  border: 3px solid var(--media-ink);
  pointer-events: none;
  animation: viewfinder-focus 640ms var(--ease-spring) 120ms both;
}

.record-preview-corner-top-left {
  top: 14px;
  left: 14px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0;
  --focus-from: -10px -10px;
}

.record-preview-corner-top-right {
  top: 14px;
  right: 14px;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 8px 0 0;
  --focus-from: 10px -10px;
}

.record-preview-corner-bottom-left {
  bottom: 14px;
  left: 14px;
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 8px;
  --focus-from: -10px 10px;
}

.record-preview-corner-bottom-right {
  right: 14px;
  bottom: 14px;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 8px;
  --focus-from: 10px 10px;
}

.record-photo-actions,
.record-alternate-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.record-photo-actions {
  margin-top: 18px;
}

.record-photo-action,
.record-alternate-action {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font: inherit;
  font-weight: var(--w-strong);
}

.record-photo-action {
  min-height: 56px;
  padding: 10px 14px;
  font-size: 16px;
}

.record-photo-action-primary {
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: var(--elev-cta);
}

.record-photo-action-secondary {
  background: var(--surface-2);
  color: var(--ink);
}

.record-photo-action:active,
.record-alternate-action:active {
  transform: scale(0.98);
}

.record-alternate-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 이슈 #480: 촬영·앨범 버튼 묶음과 영상·글로 입력 묶음 사이 간격을 확보한다. */
  margin-top: 12px;
}

.record-alternate-action {
  min-height: 48px;
  margin: 0;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
}

.record-alternate-action svg {
  flex: 0 0 auto;
}

.record-alternate-action span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.record-alternate-action:hover {
  border-color: var(--brand);
  background: var(--surface-2);
}

.record-photo-card .file-input {
  inset: auto;
}

.record-capture-panel > .comment-field,
.record-capture-panel > .hashtag-field,
.record-capture-panel > .weight-field {
  margin-top: 4px;
}

.record-capture-panel > .comment-field > label,
.record-capture-panel .record-field-label-row > label {
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--w-strong);
}

.record-capture-panel .comment-field {
  gap: 8px;
}

.record-capture-panel .comment-input-row {
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 8px;
}

.record-capture-panel .comment-input-row textarea {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shadow-ink) 3%, transparent);
  font-size: 15px;
}

.record-capture-panel .comment-input-row textarea:focus {
  background: var(--surface);
}

.record-capture-panel .mic-button {
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink-2);
}

.record-field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.record-field-hint {
  color: var(--ink-3);
  font-size: 13px;
}

.meal-hashtag-editor {
  display: flex;
  min-height: 56px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--shadow-ink) 3%, transparent);
}

.meal-hashtag-editor:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
}

.record-hashtag-chip {
  display: inline-flex;
  min-height: 34px;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.record-hashtag-chip span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.record-hashtag-chip-remove {
  color: var(--ink-3);
  font-weight: 500;
}

.meal-hashtag-editor input#mealHashtagDraft {
  flex: 1 1 72px;
  width: auto;
  min-width: 64px;
  min-height: 34px;
  padding: 5px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
}

.meal-hashtag-editor input#mealHashtagDraft:focus {
  border: 0;
  outline: 0;
}

.record-field-status {
  min-height: 0;
  margin: 0;
  color: var(--danger-strong);
  font-size: 12px;
}

.record-field-status:empty {
  display: none;
}

.record-weight-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.record-weight-label svg {
  flex: 0 0 auto;
  color: var(--ink-2);
}

.record-capture-panel > .manual-entry-button {
  margin-top: 0;
}

@media (max-width: 380px) {
  body[data-page='record'] .app {
    padding-right: 14px;
    padding-left: 14px;
  }

  .record-photo-preview {
    border-radius: 15px;
  }

  .record-alternate-action {
    gap: 5px;
    font-size: 13px;
  }
}

@keyframes viewfinder-focus {
  from {
    opacity: 0;
    translate: var(--focus-from, 0 0);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ---------- 목표 화면 ----------
   목표 설정(편집 모드 #goalEditMode)과 목표 마법사(#goalWizardMode), 추천 결과, 프리셋 카드.
   저장·다음·이전·건너뛰기 같은 버튼은 버튼 구역, 목표 저장 대화상자는 시트·대화상자 구역에 있다. */

.goal-settings {
  border: 1px solid var(--carb-border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
}

.goal-settings summary {
  cursor: pointer;
  font-weight: 800;
}

.goal-settings-page-header {
  display: none;
}

.goal-presets {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--carb-border);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.goal-presets-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.goal-presets-heading span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}

.goal-presets-heading small {
  color: var(--ink-3);
  font-size: 11px;
}

.goal-preset-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.goal-preset-buttons button {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  overflow: hidden;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
}

.goal-preset-card > span {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3px;
}

.goal-preset-card img {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  opacity: 0.88;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 42%);
  mask-image: linear-gradient(to right, transparent, var(--ink) 42%);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.goal-preset-buttons button.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--protein) 16%, transparent);
}

.goal-preset-buttons button.is-selected strong {
  color: var(--ink-2);
}

.goal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.goal-grid label {
  gap: 5px;
}

.goal-grid span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}

.goal-grid b {
  color: var(--ink);
}

.goal-grid input[type='range'] {
  --goal-color: var(--protein);
  width: 100%;
  accent-color: var(--goal-color);
  cursor: pointer;
}

#goalCarbs {
  --goal-color: var(--carb);
}

#goalProtein {
  --goal-color: var(--protein);
}

#goalFat {
  --goal-color: var(--fat);
}

.goal-grid input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--goal-color, var(--brand));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

.goal-grid input[type='number'] {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 9px;
}

.personal-goals-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.personal-goal-choice-grid input,
.personal-goal-check-grid input {
  accent-color: var(--protein);
}

.personal-goal-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.personal-goal-input-grid label {
  display: grid;
  gap: 5px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}

.optional-body-metrics {
  padding: 9px;
  border: 1px solid var(--carb-border);
  border-radius: 6px;
  background: var(--surface-2);
}

.optional-body-metrics summary {
  color: var(--ink-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.optional-body-metrics .personal-goal-input-grid {
  margin-top: 9px;
}

.personal-consent {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
}

.personal-goal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.goal-utility-actions {
  margin-top: 10px;
  margin-bottom: 36px;
}

body[data-page='goals'] .dashboard-card > :not(.dashboard-heading):not(.goal-settings),
body[data-page='goals'] .history-panel {
  display: none;
}

body[data-page='dashboard'] .goal-settings {
  display: none;
}

body[data-page='goals'] .dashboard-heading {
  display: none;
}

body[data-page='goals'] .goal-settings {
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page='goals'] .goal-settings > summary {
  display: none;
}

body[data-page='goals'] .goal-settings-page-header h2,
body[data-page='goals'] .goal-settings-page-header p {
  margin: 0;
}

body[data-page='goals'] .goal-settings-page-header h2 {
  font-size: 18px;
}

body[data-page='goals'] .goal-settings-page-header p {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 13px;
}

.personal-goal-input-grid .weight-wheel-frame,
.wizard-step-fields .weight-wheel-frame,
.body-metrics-stack .weight-wheel-frame {
  margin-top: 6px;
}

.body-metrics-stack {
  display: grid;
  gap: 12px;
  margin-top: 9px;
}

.body-metrics-stack label {
  display: grid;
  gap: 5px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}

#goalEditMode .body-metrics-stack input[type='number'] {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  padding: 7px 8px;
}

@media (hover: hover) {
  .goal-preset-buttons button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
  }
}

.goal-wizard-nav button:disabled {
  opacity: 0.55;
  cursor: default;
}

.goal-mode-loading {
  display: grid;
  gap: 10px;
  padding: 6px 2px;
}

.goal-mode-loading .skeleton-shimmer {
  height: 74px;
}

.goal-mode-loading .skeleton-shimmer.tall {
  height: 190px;
}

.goal-mode-loading .skeleton-shimmer.short {
  height: 42px;
}

#goalEditMode:not([hidden]),
#goalWizardMode:not([hidden]) {
  animation: fade-rise var(--dur-med) var(--ease-out) both;
}

#goalEditMode .goal-settings-page-header {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-top: 14px;
}

#goalEditMode .goal-presets {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

#goalEditMode .personal-goals-panel {
  border-radius: var(--radius-md);
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

#goalEditMode .save-goals-button {
  border-radius: 10px;
  margin-top: 2px;
}

/* 편집 화면: 카드(.goal-edit-card)와 같은 좌우 여백을 머리·요약·선택 신체정보·저장/보조 버튼에도
   준다(#490-A 1·2·11·12). 여백값은 이 한 곳에서만 정한다. */
#goalEditMode .goal-settings-page-header,
#goalEditMode .goal-edit-summary,
#goalEditMode .optional-body-metrics,
#goalEditMode .goal-save-all-button,
#goalEditMode .goal-utility-actions {
  margin-left: 12px;
  margin-right: 12px;
}

/* 목표 저장은 폭이 100%라 좌우 여백만큼 폭을 줄여야 가로 스크롤이 생기지 않는다. */
#goalEditMode .goal-save-all-button {
  width: calc(100% - 24px);
}

.goal-wizard {
  gap: 14px;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-width: 0;
  max-width: none;
  padding: max(10px, env(safe-area-inset-top)) 20px max(14px, env(safe-area-inset-bottom));
  overflow: hidden;
  background: var(--bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.goal-wizard-header {
  display: grid;
  gap: 8px;
  flex: none;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 6px 0 2px;
  background: var(--bg);
  position: relative;
  z-index: 1;
}

.goal-wizard-progress {
  background: var(--carb-soft);
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}

.goal-wizard-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-soft), var(--surface-2));
  transform: scaleX(var(--wizard-progress, 0));
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.goal-wizard-bubble {
  position: relative;
  max-width: 100%;
  border-radius: 4px 18px 18px 18px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--ink);
  font-size: clamp(24px, 6.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

/* 문항이 바뀌면 화면 읽기 프로그램을 위해 제목에 포커스를 옮긴다(goals.js). 누를 수 있는 요소가 아니므로
   WebKit이 그리는 포커스 테두리는 지운다. */
.goal-wizard-bubble:focus {
  outline: none;
}

.goal-wizard-step.is-active .goal-wizard-bubble {
  animation: bubble-in var(--dur-slow) var(--ease-spring) both;
}

.wizard-check-grid label:has(input:checked) {
  animation: chip-pop var(--dur-med) var(--ease-spring);
}

#wizardGoalCarbs {
  --goal-color: var(--carb);
}

#wizardGoalProtein {
  --goal-color: var(--protein);
}

#wizardGoalFat {
  --goal-color: var(--fat);
}

.goal-wizard-nav button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  min-height: 54px;
  padding: 12px 22px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
}

.goal-wizard-success {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 36px 12px;
  text-align: center;
  margin: auto 0;
}

.goal-wizard-success-badge {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  box-shadow: var(--shadow-lift);
  font-size: 32px;
  animation: scale-in var(--dur-slow) var(--ease-spring) both;
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--brand) 65%, transparent);
}

.goal-wizard-success strong {
  color: var(--ink-2);
  font-size: 17px;
  animation: fade-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: 120ms;
}

.goal-wizard-success p {
  color: var(--ink-3);
  font-size: 13px;
  animation: fade-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: 220ms;
}

.personal-goal-choice-grid label,
.personal-goal-check-grid label,
.wizard-check-grid label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  user-select: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-out);
}

.personal-goal-choice-grid label:active,
.personal-goal-check-grid label:active,
.wizard-check-grid label:active {
  transform: scale(0.97);
}

.personal-goal-choice-grid input[type='radio'],
.personal-goal-check-grid input[type='checkbox'],
.wizard-check-grid input[type='checkbox'],
.wizard-check-grid input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.personal-goal-choice-grid label::before,
.personal-goal-check-grid label::before,
.wizard-check-grid label::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 2px solid var(--protein-border);
  background: var(--surface);
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    transform var(--dur-fast) var(--ease-spring);
}

.personal-goal-choice-grid label:has(input:checked),
.personal-goal-check-grid label:has(input:checked),
.wizard-check-grid label:has(input:checked) {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--ink);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand) 24%, transparent);
}

.personal-goal-choice-grid label:has(input:checked)::before,
.personal-goal-check-grid label:has(input:checked)::before,
.wizard-check-grid label:has(input:checked)::before {
  border-color: transparent;
  background-color: var(--cta);
  background-image: var(--checkmark-image);
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(1.05);
}

.personal-goal-choice-grid,
.personal-goal-check-grid,
.wizard-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  min-width: 0;
}

.personal-consent {
  color: var(--ink-2);
  font-weight: 600;
}

.personal-consent input {
  accent-color: var(--brand);
  width: 20px;
  height: 20px;
}

/* 건강 상태(민감정보) 별도 동의 상자(이슈 #153). 고지 항목을 빠짐없이 보이되 본문보다 작게 둔다. */
.health-consent {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-control);
  background: var(--brand-soft);
}

.health-consent-title {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--w-head);
}

.health-consent-terms {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
  word-break: keep-all;
}

.health-consent .personal-consent {
  align-items: center;
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
}

.goal-wizard-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
}

.goal-wizard-step-label {
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--shadow-ink) 20%, transparent);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.goal-wizard-spacer {
  width: 64px;
}

#goalWizardProgressFill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--cta);
  transform-origin: 0 50%;
  transform: scaleX(var(--wizard-progress, 0.14));
  transition: transform 560ms var(--ease-spring);
}

.goal-wizard-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: 560px;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: 20px 2px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.goal-wizard-step {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 0 2px 8px;
  /* 문항은 진행 막대 바로 아래에서 시작한다. 가운데 정렬하면 짧은 문항 위아래가 크게 빈다. */
  margin: 4px 0 auto;
}

.goal-wizard-step.is-active[data-wizard-dir='next'] {
  animation: wizard-enter-next 600ms var(--ease-spring) both;
}

.goal-wizard-step.is-active[data-wizard-dir='prev'] {
  animation: wizard-enter-prev 600ms var(--ease-spring) both;
}

.goal-wizard-bubble small {
  display: block;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.goal-wizard .goal-preset-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.goal-preset-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  text-align: left;
  transition:
    transform 260ms var(--ease-spring),
    border-color var(--dur-fast),
    box-shadow var(--dur-med);
}

.goal-preset-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.goal-preset-card strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.goal-preset-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.goal-preset-card.is-selected {
  border-color: var(--brand);
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--brand) 24%, transparent);
  animation: chip-pop 480ms var(--ease-spring);
}

#goalEditMode .goal-preset-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px;
  text-align: left;
  scroll-snap-align: start;
}

#goalWizardMode .goal-preset-card > span,
#goalEditMode .goal-preset-card > span {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-left: 8px;
  flex: 1;
}

#goalEditMode .goal-preset-card strong {
  font-size: 16px;
}

#goalEditMode .goal-preset-card small {
  font-size: 13px;
}

#goalWizardMode .goal-preset-card img,
#goalEditMode .goal-preset-card img {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  object-fit: cover;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--ink) 45%);
  mask-image: linear-gradient(to right, transparent 0%, var(--ink) 45%);
}

#goalEditMode .goal-preset-card img {
  width: 55%;
  height: 100%;
  border-radius: 0;
}

#goalWizardMode .personal-goal-input-grid input,
#goalWizardMode .personal-goal-input-grid select {
  min-height: 50px;
}

#goalWizardMode .personal-consent {
  margin-top: 2px;
}

/* 목표 유형 4개는 넓은 화면에서도 3+1로 나뉘지 않게 2열로 둔다(#511). */
@media (min-width: 360px) {
  #wizardOutcomeTypeChoices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#goalWizardMode .wizard-check-grid label:has(input:checked)::before {
  border: 0;
  background: var(--brand);
  mask: var(--checkmark-image) center / 18px 18px no-repeat;
}

#goalEditMode .goal-edit-card {
  display: grid;
  gap: 14px;
  margin: 12px 12px 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

#goalEditMode .goal-edit-card-title {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 800;
}

#goalEditMode .goal-edit-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#goalEditMode .goal-edit-card-heading p {
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}

#goalEditMode .goal-presets.goal-edit-card {
  margin-top: 12px;
  padding: 16px;
}

#goalEditMode .goal-grid {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#goalEditMode #personalGoalsContent {
  display: grid;
  gap: 12px;
}

#goalEditMode #personalGoalsContent .goal-edit-card {
  margin-top: 0;
}

#goalEditMode .personal-goal-input-grid {
  gap: 12px;
}

#goalEditMode .personal-goal-input-grid input,
#goalEditMode .personal-goal-input-grid select {
  min-height: 48px;
}

#goalEditMode .personal-goal-choice-grid,
#goalEditMode .personal-goal-check-grid {
  gap: 10px;
}

#goalEditMode .personal-goal-choice-grid label,
#goalEditMode .personal-goal-check-grid label {
  min-height: 44px;
  padding: 10px 12px;
}

#goalEditMode .optional-body-metrics {
  margin-top: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

#goalEditMode .optional-body-metrics summary {
  font-size: 14px;
}

#goalEditMode .goal-weight-stack {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

#goalEditMode .goal-weight-stack .body-weight-field {
  min-width: 0;
}

#goalEditMode .goal-weight-stack .personal-consent {
  margin-top: 4px;
}

#goalEditMode [data-goal-duration-editor] select,
#goalWizardMode [data-goal-duration-editor] select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

#goalWizardMode .goal-weight-stack {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.goal-grid label {
  display: block;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-soft);
}

.goal-grid label span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

.goal-grid label b {
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

#wizardMacroCalories {
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 13px;
}

.wizard-step-fields {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.wizard-field-label {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.goal-wizard-status {
  flex: none;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: 20px;
  text-align: center;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  background: var(--bg);
  position: relative;
  z-index: 1;
}

.goal-wizard-status.is-error {
  color: var(--danger-strong);
}

.goal-wizard-nav {
  flex: none;
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(72px, 1fr) minmax(112px, 1.5fr);
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 0;
  padding: 4px 0 8px;
  background: var(--bg);
  position: relative;
  z-index: 2;
}

#goalWizardConfetti {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.goal-wizard-nav button[hidden] + button {
  grid-column: 1 / -1;
}

#goalEditMode .goal-preset-buttons {
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow-x: visible;
  scroll-snap-type: none;
  padding: 0;
  justify-content: stretch;
}

.goal-grid input[type='range']::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--goal-color, var(--brand)) 0 var(--goal-progress, 0%),
    var(--protein-soft) var(--goal-progress, 0%) 100%
  );
}

.goal-grid input[type='range']::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--protein-soft);
}

.goal-grid input[type='range']::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--goal-color, var(--brand));
}

.goal-grid input[type='range']::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid var(--goal-color, var(--brand));
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow-ink) 22%, transparent);
}

#goalEditMode .goal-preset-buttons button {
  min-height: 96px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

#goalEditMode .goal-preset-buttons button.is-selected {
  border-color: transparent;
  background: var(--surface);
  box-shadow:
    0 0 0 2px var(--brand),
    var(--shadow-soft);
}

#goalEditMode .goal-preset-buttons button.is-selected strong {
  color: var(--ink);
}

.personal-goal-input-grid input,
.personal-goal-input-grid select,
#wizardOutcomeUnit,
#personalOutcomeUnit {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  padding: 12px 16px;
  font-size: 16px;
}

.personal-goal-input-grid select,
#wizardOutcomeUnit,
#personalOutcomeUnit {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.personal-goal-input-grid input:focus,
.personal-goal-input-grid select:focus,
#wizardOutcomeUnit:focus,
#personalOutcomeUnit:focus {
  outline: none;
  background-color: var(--surface);
  box-shadow:
    0 0 0 2px var(--brand),
    0 10px 26px -10px color-mix(in srgb, var(--brand) 24%, transparent);
}

#goalEditSummary {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand-soft), var(--surface));
  box-shadow: var(--shadow-soft);
}

#goalEditSummary:empty {
  display: none;
}

.goal-edit-recommendation {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding: 12px 14px;
}

.goal-edit-recommendation .goal-edit-recommendation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.goal-edit-recommendation .goal-edit-recommendation-head strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-2);
}

.goal-edit-recommendation .goal-edit-recommendation-head span {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-2);
}

.goal-edit-recommendation p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: keep-all;
}

.goal-edit-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.goal-edit-summary-top strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.goal-edit-summary-kcal {
  font-size: 14px;
  font-weight: 800;
  padding: 6px 12px;
}

#goalEditMode .goal-preset-buttons .goal-preset-card {
  scroll-snap-align: none;
}

#goalEditMode .goal-preset-buttons .goal-preset-card > span {
  padding-left: 8px;
}

#goalEditMode .goal-preset-buttons .goal-preset-card img {
  top: 0;
  right: 0;
}

#goalEditMode .goal-preset-buttons .goal-preset-card.is-selected strong {
  color: var(--ink);
}

#goalEditMode .goal-preset-buttons .goal-preset-card.is-selected::after {
  content: '✓';
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 50%, transparent);
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--cta);
  color: var(--cta-ink);
}

#goalEditMode .goal-grid label:first-child {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  #goalEditMode .goal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #goalEditMode .goal-grid label:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 359px) {
  #goalEditMode .goal-grid {
    grid-template-columns: 1fr !important;
  }
}

.goal-grid-single {
  grid-template-columns: 1fr;
}

.wizard-rec-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.wizard-rec-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid color-mix(in srgb, var(--protein-border) 20%, transparent);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: wizard-spin 1s linear infinite;
}

.wizard-rec-loading-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.wizard-rec-loading-sub {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: -8px;
}

.wizard-rec-result {
  padding: 16px;
  animation: wizard-rec-fade-in 0.4s ease;
  max-width: 100%;
  box-sizing: border-box;
}

.wizard-rec-calories {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  padding: 8px 14px;
}

.wizard-rec-label {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 600;
}

.wizard-rec-calories strong {
  font-size: 28px;
  font-weight: 800;
}

.wizard-rec-unit {
  font-size: 14px;
  font-weight: 600;
}

.wizard-meal-examples {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}

.wizard-meal-examples-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.wizard-meal-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 이슈 #398: 시니어 프리셋 안내. .wizard-example-info와 같은 톤을 쓴다. */
.wizard-meal-tip {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.wizard-meal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: background 0.2s ease;
}

.wizard-meal-card:hover {
  background: var(--surface);
}

.wizard-meal-card-img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.wizard-meal-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wizard-meal-type {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.wizard-meal-foods {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}

.wizard-calorie-slider {
  display: grid;
  gap: 6px;
}

.wizard-calorie-slider span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}

.wizard-calorie-slider input[type='range'] {
  --goal-color: var(--protein);
  width: 100%;
  accent-color: var(--goal-color);
  cursor: pointer;
}

.wizard-calorie-slider input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--goal-color) 0 var(--goal-progress, 0%),
    var(--line) var(--goal-progress, 0%) 100%
  );
}

.wizard-calorie-slider input[type='range']::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -6px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--goal-color);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
  appearance: none;
}

.wizard-calorie-slider input[type='range']::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
}

.wizard-calorie-slider input[type='range']::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--goal-color);
}

.wizard-calorie-slider input[type='range']::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--goal-color);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
}

/* #200: goals, trends, achievements, profile, and auth screens */
body[data-page='goals'] #goalEditSummary {
  margin-inline: 12px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

#goalWizardMode .goal-preset-buttons,
#goalEditMode .goal-preset-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
}

#goalWizardMode .goal-preset-card,
#goalEditMode .goal-preset-buttons .goal-preset-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: left;
}

#goalWizardMode .goal-preset-card img,
#goalEditMode .goal-preset-buttons .goal-preset-card img {
  position: relative;
  z-index: 0;
  inset: auto;
  order: -1;
  width: 100%;
  height: auto;
  aspect-ratio: 1.35 / 1;
  object-fit: cover;
  border-radius: 0;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

#goalWizardMode .goal-preset-card > span,
#goalEditMode .goal-preset-buttons .goal-preset-card > span {
  position: relative;
  z-index: 1;
  order: 1;
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 10px 11px 12px;
}

#goalWizardMode .goal-preset-card strong,
#goalEditMode .goal-preset-buttons .goal-preset-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--w-strong);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#goalWizardMode .goal-preset-card small,
#goalEditMode .goal-preset-buttons .goal-preset-card small {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: var(--w-label);
}

#goalWizardMode .goal-preset-card .preset-macro-bar,
#goalEditMode .goal-preset-buttons .goal-preset-card .preset-macro-bar {
  margin-top: 4px;
  background: var(--surface-2);
}

#goalWizardMode .goal-preset-card.is-selected,
#goalEditMode .goal-preset-buttons .goal-preset-card.is-selected {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--brand),
    var(--shadow-card);
}

.goal-edit-summary-kcal,
.wizard-rec-calories {
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--ink);
  box-shadow: none;
}

.wizard-rec-calories strong,
.wizard-rec-unit {
  color: var(--ink);
}

.goal-edit-recommendation,
.wizard-rec-result {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.goal-edit-recommendation .recommendation-guide-body,
.wizard-rec-guide .recommendation-guide-body {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

.goal-edit-recommendation .recommendation-guide-body h4,
.wizard-rec-guide .recommendation-guide-body h4 {
  margin: 10px 0 4px;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: var(--w-strong);
}

.goal-edit-recommendation .recommendation-guide-body h4:first-child,
.wizard-rec-guide .recommendation-guide-body h4:first-child {
  margin-top: 0;
}

.goal-edit-recommendation .recommendation-guide-body ul,
.wizard-rec-guide .recommendation-guide-body ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.goal-edit-recommendation .recommendation-guide-body li,
.wizard-rec-guide .recommendation-guide-body li {
  line-height: var(--lh-body);
}

.recommendation-guide-paragraph {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* #490-C: 프리셋 목록 + 설명 패널. 모바일은 한 열(설명은 목록 아래), 넓은 화면은 두 열에 패널을 고정한다. */
.goal-preset-layout {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.goal-preset-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.goal-preset-description {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
}

.goal-preset-description-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.goal-preset-description-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.goal-preset-description-head span {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.goal-preset-description-summary,
.goal-preset-description-suits,
.goal-preset-description-caution,
.goal-preset-description-note {
  margin: 0;
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

.goal-preset-description-caution {
  color: var(--danger-strong);
}

.goal-preset-description-meals-title {
  margin: 0;
  color: var(--ink-2);
  font-weight: 800;
}

.goal-preset-description-note {
  color: var(--ink-3);
  font-size: 12px;
}

.goal-preset-macros,
.goal-preset-meals {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.goal-preset-macros li,
.goal-preset-meals li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.goal-preset-macros strong,
.goal-preset-meals strong {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

@media (min-width: 700px) {
  .goal-preset-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .goal-preset-description {
    position: sticky;
    top: 10px;
  }
}

@media (max-width: 360px) {
  #goalWizardMode .goal-preset-buttons,
  #goalEditMode .goal-preset-buttons {
    gap: 7px;
  }

  #goalWizardMode .goal-preset-card > span,
  #goalEditMode .goal-preset-buttons .goal-preset-card > span {
    padding: 8px 9px 10px;
  }

  #goalWizardMode .goal-preset-card strong,
  #goalEditMode .goal-preset-buttons .goal-preset-card strong {
    font-size: 13px;
  }
}

body[data-page='goals'] .personal-goal-choice-grid label,
body[data-page='goals'] .personal-goal-check-grid label,
body[data-page='goals'] .personal-goal-input-grid label,
body[data-page='goals'] .personal-consent,
body[data-page='goals'] .optional-body-metrics summary,
body[data-page='goals'] .wizard-meal-examples-title,
body[data-page='goals'] .wizard-meal-tip,
body[data-page='goals'] .wizard-meal-type,
body[data-page='goals'] #restartGoalWizardButton,
body[data-page='goals'] .preset-macro-legend span,
body[data-page='goals'] #exportPersonalGoalsButton,
body[data-page='goals'] #deletePersonalGoalsButton {
  font-size: 13px;
}

body[data-page='goals'] #goalEditMode .goal-edit-card-heading p {
  font-size: 13px;
}

body[data-page='goals'] .personal-goal-choice-grid label,
body[data-page='goals'] .personal-goal-check-grid label,
body[data-page='goals'] .personal-goal-input-grid label,
body[data-page='goals'] .optional-body-metrics summary,
body[data-page='goals'] .wizard-meal-type {
  font-weight: var(--w-label);
}

body[data-page='goals'] .personal-consent {
  font-weight: var(--w-body);
}

body[data-page='goals'] .wizard-meal-examples-title {
  font-weight: var(--w-strong);
}

body[data-page='goals'] .preset-macro-legend span,
body[data-page='goals'] #goalEditMode .goal-edit-card-heading p {
  font-weight: var(--w-body);
}

body[data-page='goals'] #restartGoalWizardButton,
body[data-page='goals'] #exportPersonalGoalsButton,
body[data-page='goals'] #deletePersonalGoalsButton {
  font-weight: var(--w-strong);
}

/* ---------- 추이 화면 ----------
   기간 이동·차트(막대·목표선·라벨)·탄단지 점·체중 그래프·일별 보기·로딩. 기간 탭은 세그먼트 컨트롤 구역,
   고른 날의 식단 목록 시트는 시트 구역, 이전·다음 화살표는 아이콘 버튼 구역에 있다. */

.dashboard-trends {
  display: grid;
  gap: 9px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.trend-heading,
.trend-period-navigation,
.trend-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trend-heading h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.trend-period-navigation {
  min-height: 34px;
}

.trend-period-navigation button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.trend-period-navigation strong {
  min-width: 0;
  color: var(--ink-2);
  font-size: 13px;
  text-align: center;
}

.trend-goal-note {
  color: var(--ink-2);
  text-align: right;
}

.trend-loading,
.trend-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 168px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}

.trend-loading i {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--protein-border) 38%, transparent);
  border-top-color: var(--protein);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.trend-error {
  flex-direction: column;
}

.trend-error button {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 800;
}

.trend-empty {
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11px;
  text-align: center;
}

.trend-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--carb-border);
  border-bottom: 1px solid var(--carb-border);
}

.trend-chart {
  --trend-color: var(--brand);
  min-width: 0;
  padding: 10px 8px 9px;
}

.trend-chart:nth-child(odd) {
  border-right: 1px solid var(--carb-border);
}

.trend-chart:nth-child(-n + 2) {
  border-bottom: 1px solid var(--carb-border);
}

.trend-carbs {
  --trend-color: var(--carb);
}

.trend-protein {
  --trend-color: var(--protein);
}

.trend-fat {
  --trend-color: var(--fat);
}

.trend-chart-heading {
  align-items: baseline;
}

.trend-chart-heading strong {
  color: var(--ink-2);
  font-size: 12px;
}

.trend-chart-heading span {
  min-width: 0;
  color: var(--ink-3);
  font-size: 9px;
  text-align: right;
}

.trend-chart-heading b {
  color: var(--ink-2);
  font-size: 11px;
}

.trend-chart-visual {
  display: grid;
  grid-template-rows: 82px 16px;
  gap: 2px;
  margin-top: 7px;
}

.trend-plot {
  position: relative;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  border-bottom-color: var(--line);
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 25%);
}

.trend-goal-line {
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink-4) 50%, transparent);
  pointer-events: none;
  border-top-color: var(--ink-4);
}

.trend-bars,
.trend-bar-labels {
  display: flex;
  gap: 3px;
  width: 100%;
  height: 100%;
}

.trend-bars {
  position: absolute;
  inset: 0;
  align-items: stretch;
}

.trend-bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding: 0 1px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.trend-bar i {
  display: block;
  width: min(100%, 14px);
  height: var(--trend-height);
  min-height: 2px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 4px 4px 1px 1px;
  background: var(--trend-color);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--trend-color) 48%, transparent);
  transform-origin: bottom;
  animation: trendBarEnter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.trend-bar.is-selected i {
  outline: 2px solid color-mix(in srgb, var(--ink-4) 38%, transparent);
  outline-offset: 1px;
}

.trend-bar:focus-visible {
  outline: 2px solid var(--protein);
  outline-offset: 1px;
}

.trend-bar-labels {
  align-items: center;
}

/* Chart labels may be wider than a bar column; center them over their bar instead of clipping. */
.trend-bar-labels span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  overflow: visible;
}

.trend-chart-detail {
  min-height: 14px;
  margin-top: 4px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-extra {
  display: grid;
  gap: 28px;
  padding-bottom: 20px;
}

.trend-macro-dots {
  padding-bottom: 12px;
}

.trend-weight {
  padding-bottom: 28px;
}

.trend-dot-board,
.trend-weight-chart {
  min-height: 72px;
}

.trend-dot-row {
  display: grid;
  align-items: center;
  margin-bottom: 6px;
  animation: trendExtraEnter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 6px;
}

.trend-dot-row span {
  font-weight: 700;
}

.trend-dot-cells {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
}

.trend-dot {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--carb-soft);
}

.trend-dot.is-carbs {
  background: var(--carb);
}

.trend-dot.is-protein {
  background: var(--protein);
}

.trend-dot.is-fat {
  background: var(--fat);
}

.trend-weight-chart {
  position: relative;
}

.trend-weight-svg {
  display: block;
  width: 100%;
  height: 176px;
}

.trend-weight-date {
  fill: var(--ink-3);
  font-weight: 700;
}

.trend-weekday {
  font-weight: 700;
}

.trend-weekday.is-sat {
  color: var(--ink-2);
  fill: var(--protein);
}

.trend-weekday.is-sun {
  color: var(--danger-strong);
  fill: var(--danger);
}

.trend-weight-grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

.trend-weight-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  animation: trendLineDraw 900ms ease-out forwards;
}

.trend-weight-point {
  fill: var(--cta-ink);
  stroke: var(--brand);
  stroke-width: 2;
}

.trend-weight-photos {
  position: relative;
  height: 36px;
  margin-top: 4px;
  margin-bottom: 16px;
}

.trend-weight-photo {
  position: absolute;
  top: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-soft);
  box-shadow: var(--shadow-card);
  transform: translateX(-50%);
  cursor: pointer;
}

.trend-weight-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trend-weight-tip {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 4px;
  width: 200px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: var(--shadow-lift);
}

.trend-weight-tip img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
}

.trend-weight-tip strong {
  font-size: 13px;
}

.trend-weight-tip span {
  color: color-mix(in srgb, var(--surface) 76%, transparent);
  font-size: 12px;
}

.trend-empty-inline {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: var(--fs-caption-min);
}

@media (prefers-reduced-motion: reduce) {
  .trend-bar i {
    animation: none;
  }
}

.trend-skeleton-charts {
  display: grid;
  gap: 14px;
  width: 100%;
}

.trend-skeleton-chart {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.trend-skeleton-chart .skeleton-shimmer {
  height: 12px;
  width: 38%;
}

.trend-skeleton-chart .skeleton-shimmer.tall {
  height: 110px;
  width: 100%;
}

#trendLoading {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

#trendLoading .trend-loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.trend-day-view {
  display: grid;
  gap: 10px;
  padding: 6px 2px 2px;
}

.trend-day-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.trend-day-row:focus-visible {
  outline: 2px solid var(--protein);
  outline-offset: 2px;
  border-radius: 8px;
}

.trend-day-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.trend-day-track {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.trend-day-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--day-width, 0%);
  min-width: 3px;
  border-radius: inherit;
  transform-origin: left center;
  animation: dayBarEnter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  background: var(--brand);
}

.trend-day-row strong {
  color: var(--ink-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.trend-meal-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}

#mealTrends .trend-heading h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: var(--w-head);
  letter-spacing: var(--track-title);
}

.trend-chart:nth-child(odd),
.trend-chart:nth-child(-n + 2),
.trend-charts {
  border-color: var(--line);
}

.trend-bar-labels span,
.trend-chart-detail,
.trend-dot-row span,
.trend-weight-date {
  color: var(--ink-3);
}

.trend-dot.is-empty {
  background: var(--surface-2);
}

.trend-day-row:focus-visible,
.trend-bar:focus-visible {
  outline-color: var(--brand);
}

@media (max-width: 360px) {
  #mealTrends .trend-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

.trend-weight-date {
  font-size: 13px;
}

body[data-page='trends'] .trend-chart-heading strong,
body[data-page='trends'] .trend-chart-heading span,
body[data-page='trends'] .trend-chart-heading b,
body[data-page='trends'] .trend-day-label,
body[data-page='trends'] .trend-loading,
body[data-page='trends'] .trend-error,
body[data-page='trends'] .trend-empty {
  font-size: 13px;
}

body[data-page='trends'] .trend-chart-heading strong,
body[data-page='trends'] .trend-chart-heading b {
  font-weight: var(--w-strong);
}

body[data-page='trends'] .trend-chart-heading span,
body[data-page='trends'] .trend-day-label,
body[data-page='trends'] .trend-loading,
body[data-page='trends'] .trend-error,
body[data-page='trends'] .trend-empty {
  font-weight: var(--w-body);
}

/* Edge labels grow inward so they stay inside the card. */
.trend-bar-labels span:first-child {
  justify-content: flex-start;
}

.trend-bar-labels span:last-child {
  justify-content: flex-end;
}

/* 추이 화면: 상단바 바로 아래 구분선은 상단바 헤어라인과 겹쳐 보이므로 없앤다. */
#mealTrends {
  border-top: 0;
}

/* ---------- 식단 기록 화면(이슈 #546) ----------
   일간·주간·월간 달력과 고른 날의 식단 목록. 보기 탭·기간 이동은 섭취 추이와 같은 모양을 쓰고,
   움직임은 transform·opacity만 써서 레이아웃을 다시 계산하지 않는다. */
.meal-history {
  display: grid;
  gap: 14px;
  padding-bottom: 104px;
}

.meal-history-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: var(--w-head);
  letter-spacing: var(--track-title);
}

/* 섭취 추이의 4칸 규칙보다 뒤에 와도 이기도록 머리글까지 적는다. */
#mealHistory .meal-history-heading .trend-period-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 168px;
}

.meal-history-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 14px 10px 12px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-card);
}

.meal-history-card .trend-period-navigation {
  padding: 0 4px;
}

.meal-history-card .trend-period-navigation strong {
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.meal-history-stage {
  touch-action: pan-y;
}

.meal-history-stage.is-moving-next {
  --history-slide-from: 18px;
}

.meal-history-stage.is-moving-prev {
  --history-slide-from: -18px;
}

.meal-history-stage:is(.is-moving-next, .is-moving-prev) > :not([hidden]) {
  animation: history-slide-in var(--dur-med) var(--ease-out) both;
}

.meal-history-stage.is-fading > :not([hidden]) {
  animation: fade-in var(--dur-med) var(--ease-standard) both;
}

@keyframes history-slide-in {
  from {
    opacity: 0;
    transform: translateX(var(--history-slide-from, 0));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.history-weekdays,
.history-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.history-weekdays {
  margin-bottom: 2px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: var(--w-label);
  text-align: center;
}

.history-weekdays .is-sun,
.history-day-cell.is-sun .history-day-number,
.history-week-date.is-sun {
  color: var(--danger-strong);
}

.history-month-grid {
  gap: 2px 0;
}

.history-day-cell {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1px;
  min-width: 0;
  min-height: 54px;
  padding: 4px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-med) var(--ease-spring);
}

.history-day-cell:active {
  transform: scale(0.92);
  transition-duration: var(--dur-instant);
}

.history-day-number {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 14px;
  font-weight: var(--w-label);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-standard);
}

/* 선택 원은 고른 칸에서 커지며 나타나고 이전 칸에서는 줄며 사라진다. */
.history-day-number::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 50%;
  background: var(--cta);
  content: '';
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-med) var(--ease-spring);
}

.history-day-cell.is-today .history-day-number {
  color: var(--brand-strong);
  font-weight: var(--w-head);
}

.history-day-cell.is-today .history-day-number::before {
  background: var(--brand-soft);
  opacity: 1;
  transform: scale(1);
}

.history-day-cell.is-selected .history-day-number,
.history-day-cell.is-selected.is-sun .history-day-number {
  color: var(--cta-ink);
  font-weight: var(--w-head);
}

.history-day-cell.is-selected .history-day-number::before {
  background: var(--cta);
  opacity: 1;
  transform: scale(1);
}

.history-day-cell.is-outside {
  opacity: 0.38;
}

.history-day-kcal {
  min-height: 14px;
  overflow: hidden;
  max-width: 100%;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: var(--w-label);
  line-height: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.history-day-cell.has-record .history-day-kcal {
  color: var(--ink-2);
}

.history-month-grid.is-fresh .history-day-kcal,
.history-week.is-fresh .history-week-kcal {
  animation: fade-in var(--dur-med) var(--ease-standard) both;
}

.history-week {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-week-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.history-week-row.is-selected {
  background: var(--surface-2);
}

.history-week-date {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease-spring);
}

.history-week-date:active {
  transform: scale(0.92);
  transition-duration: var(--dur-instant);
}

.history-week-date strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.history-week-date span {
  font-size: 11px;
  opacity: 0.8;
}

.history-week-row.is-today .history-week-date strong {
  color: var(--brand-strong);
}

.history-week-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.history-week-kcal {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--w-strong);
  font-variant-numeric: tabular-nums;
}

.history-week-kcal.is-empty {
  color: var(--ink-4);
  font-weight: var(--w-label);
}

.history-week-meals {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.history-week-meals:empty {
  display: none;
}

.history-week-meals::-webkit-scrollbar {
  display: none;
}

.history-week-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  max-width: 168px;
  min-height: 30px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: chip-pop var(--dur-med) var(--ease-spring);
}

.history-week-row.is-selected .history-week-chip {
  background: var(--surface);
}

.history-week-chip b {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-weight: var(--w-label);
}

.history-day-summary {
  margin-top: 0;
}

.history-day-summary strong {
  font-variant-numeric: tabular-nums;
}

.history-selected-day {
  display: grid;
  gap: 10px;
}

.history-selected-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}

.history-selected-heading h2 {
  margin: 0;
  font-size: 17px;
  font-weight: var(--w-head);
}

.history-selected-heading span {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: var(--w-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.history-meal-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-meal-list.is-entering > li {
  animation: fade-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.history-meal-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--elev-card);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease-spring);
}

.history-meal-row:active {
  transform: scale(0.98);
  transition-duration: var(--dur-instant);
}

.history-meal-thumb {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-4);
}

.history-meal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-standard);
}

.history-meal-thumb.has-photo img {
  opacity: 1;
}

.history-meal-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.history-meal-text small {
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.history-meal-text strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: var(--w-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-meal-kcal {
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--w-head);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.history-meal-kcal small {
  margin-left: 2px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: var(--w-label);
}

.history-meal-skeleton {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 8px;
  border-radius: var(--radius-control);
  background: var(--surface);
}

.history-meal-skeleton > .skeleton-shimmer {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
}

.history-meal-skeleton > span:last-child {
  display: grid;
  gap: 6px;
}

.history-meal-empty {
  margin: 0;
  padding: 18px 4px;
  color: var(--ink-3);
  font-size: 14px;
  text-align: center;
  animation: fade-in var(--dur-med) var(--ease-standard);
}

/* 검색(이슈 #546 3단계). 검색어가 있으면 달력 카드·고른 날 목록 대신 결과를 보여 준다. */
.meal-history.is-searching > :is(.meal-history-card, .history-selected-day) {
  display: none;
}

.meal-history .meal-history-heading .trend-period-tabs {
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.meal-history.is-searching .meal-history-heading .trend-period-tabs {
  opacity: 0;
  pointer-events: none;
}

.meal-history.is-returning > :is(.meal-history-card, .history-selected-day) {
  animation: fade-in var(--dur-med) var(--ease-standard) both;
}

.history-search {
  display: grid;
  gap: 0;
  margin: 0;
}

.history-search-field {
  position: relative;
}

.history-search-field::before {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  background: var(--ink-3);
  content: '';
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-mask: var(--icon-search) center / contain no-repeat;
  mask: var(--icon-search) center / contain no-repeat;
}

/* 공통 입력 규칙(:not() 여러 개)보다 구체적이어야 아이콘·지우기 버튼 자리를 비운다. */
#historySearchInput {
  min-height: 46px;
  padding: 10px 46px 10px 40px;
  border-color: transparent;
  border-radius: var(--radius-pill);
  box-shadow: var(--elev-card);
  -webkit-appearance: none;
  appearance: none;
}

#historySearchInput:focus {
  box-shadow:
    0 0 0 2px var(--brand),
    0 10px 26px -10px color-mix(in srgb, var(--brand) 24%, transparent);
}

#historySearchInput::-webkit-search-cancel-button,
#historySearchInput::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.history-search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transform: translateY(-50%);
  animation: scale-in var(--dur-fast) var(--ease-out);
}

.history-search-clear::before {
  width: 16px;
  height: 16px;
  background: currentColor;
  content: '';
  -webkit-mask: var(--icon-close) center / contain no-repeat;
  mask: var(--icon-close) center / contain no-repeat;
}

/* 높이 대신 grid 줄 크기(0fr→1fr)로 펼친다. 안쪽 내용은 opacity·transform만 움직인다. */
.history-search-options {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}

.history-search-options.is-open {
  grid-template-rows: 1fr;
}

.history-search-options-inner {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-med) var(--ease-out);
}

.history-search-options.is-open .history-search-options-inner {
  padding-top: 10px;
  opacity: 1;
  transform: translateY(0);
}

.history-search-options:not(.has-query) .history-search-chips {
  display: none;
}

.history-search-chips,
.history-hashtag-suggestions {
  display: flex;
  gap: 6px;
  margin: 0 -2px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.history-search-chips::-webkit-scrollbar,
.history-hashtag-suggestions::-webkit-scrollbar {
  display: none;
}

.history-search-chips button {
  flex: 0 0 auto;
  font-family: inherit;
  white-space: nowrap;
}

.history-hashtag-suggestion {
  flex: 0 0 auto;
  gap: 5px;
  font-family: inherit;
  white-space: nowrap;
  animation: fade-in var(--dur-fast) var(--ease-standard);
}

.history-hashtag-suggestion small {
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.history-hashtag-suggestion.is-picked {
  animation: chip-pop var(--dur-med) var(--ease-spring);
}

.history-search-results {
  display: grid;
  gap: 14px;
  animation: fade-in var(--dur-med) var(--ease-standard);
}

.history-search-summary {
  min-height: 18px;
  margin: 0;
  padding: 0 4px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: var(--w-label);
  font-variant-numeric: tabular-nums;
}

.history-search-list {
  display: grid;
  gap: 16px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.history-search-list.is-stale {
  opacity: 0.55;
}

.history-search-group {
  display: grid;
  gap: 8px;
}

.history-search-group h3 {
  margin: 0;
  padding: 0 4px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: var(--w-head);
}

.history-search-group.is-entering h3,
.history-search-group li.is-entering {
  animation: fade-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.history-search-match {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 12px;
  white-space: nowrap;
}

.history-search-match-foods {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-search-match-tag {
  flex: 0 0 auto;
  color: var(--ink-2);
}

.history-search-results mark {
  border-radius: 3px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: var(--w-head);
}

.history-search-sentinel {
  height: 1px;
}

.history-search-sentinel.is-loading {
  height: auto;
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
}

.history-search-sentinel.is-loading::after {
  content: '더 불러오는 중…';
}

.history-search-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px 4px;
  color: var(--ink-3);
  font-size: 14px;
  text-align: center;
  animation: fade-in var(--dur-med) var(--ease-standard);
}

.history-search-empty p {
  margin: 0;
  overflow-wrap: anywhere;
}

.history-search-widen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.history-search-widen button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: var(--w-strong);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .meal-history-stage > *,
  .history-month-grid .history-day-kcal,
  .history-week .history-week-kcal,
  .history-week-chip,
  .history-meal-list > li,
  .history-meal-empty,
  .meal-history.is-returning > *,
  .history-search-clear,
  .history-hashtag-suggestion,
  .history-search-results,
  .history-search-group h3,
  .history-search-empty {
    animation: none !important;
  }

  .history-search-options,
  .history-search-options-inner,
  .history-search-list,
  .meal-history .meal-history-heading .trend-period-tabs,
  .topbar-search-button {
    transition: none;
  }

  .history-day-cell,
  .history-day-number::before,
  .history-meal-row,
  .history-meal-thumb img,
  .history-week-row,
  .history-week-date {
    transition: none;
  }
}

/* 이슈 #401: 기간 코칭 카드. 최근 14일 패턴 요약과 그 근거(집계)를 함께 보여주고,
   하루 한 번 새로고침할 수 있다. */
.trend-coaching {
  display: grid;
  gap: 10px;
  padding-bottom: 20px;
}

.trend-coaching-head {
  display: grid;
  align-items: center;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.trend-coaching-head strong {
  font-size: 15px;
  font-weight: var(--w-head);
}

.trend-coaching-range {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}

.trend-coaching-refresh {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--w-strong);
}

.trend-coaching-refresh:disabled {
  cursor: default;
  opacity: 0.5;
}

.trend-coaching-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.trend-coaching-summary {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

.trend-coaching-section {
  display: grid;
  gap: 6px;
}

.trend-coaching-section h3 {
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: var(--w-strong);
}

.trend-coaching-section p {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-caption-min);
  line-height: 1.6;
}

.trend-coaching-section .trend-coaching-intro {
  color: var(--ink-3);
}

.trend-coaching-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trend-coaching-list li {
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-size: var(--fs-caption-min);
  line-height: 1.6;
}

.trend-coaching-list li strong {
  font-weight: var(--w-strong);
}

.trend-coaching-list li span {
  color: var(--ink-2);
}

.trend-coaching-hint {
  color: var(--ink-3);
  font-size: 12px;
}

.trend-coaching-notice {
  margin: 0;
  color: var(--ink-3);
  font-size: 11px;
}

.trend-coaching-evidence {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.trend-coaching-evidence summary {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.trend-coaching-evidence p {
  margin: 0 0 6px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}

.trend-coaching-evidence-list {
  display: grid;
  gap: 4px;
  margin: 0 0 6px;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12px;
}

@media (max-width: 360px) {
  .trend-coaching-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .trend-coaching-range {
    grid-column: 1 / -1;
  }
}

/* ---------- 성과 화면 ----------
   연속 기록·하이라이트·배지 모음과 배지 상세, 기록 직후 새 배지 축하 카드(홈에서도 뜸), 로딩 뼈대.
   축하 효과 조각(.confetti-piece, .celebration-sparkle)은 목표 마법사와 같이 써서 원래 자리에 있다. */

.achievement-panel {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.achievement-heading p {
  margin-top: 3px;
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
}

.achievement-streak {
  place-items: center;
  min-width: 62px;
  min-height: 46px;
}

.achievement-streak b {
  line-height: 1;
  font-size: 16px;
}

.achievement-highlights {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.achievement-highlights span {
  min-width: 0;
  border: 1px solid var(--carb-border);
}

.achievement-highlights small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
}

.achievement-highlights b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.achievement-badge {
  min-height: 88px;
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.achievement-badge > i,
.achievement-entry-badge {
  position: relative;
  display: block;
  width: 31px;
  height: 31px;
  margin: 0 auto 6px;
  border: 3px solid var(--line);
  border-radius: 50%;
}

.achievement-badge > i::before,
.achievement-entry-badge::before {
  position: absolute;
  inset: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: '';
}

.achievement-badge > i::after,
.achievement-entry-badge::after {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    -15px 15px 0 -1px currentColor,
    16px 14px 0 -1px currentColor;
  content: '';
  transform: translateX(-50%);
}

.achievement-badge > span {
  display: grid;
  gap: 2px;
}

.achievement-badge.is-earned {
  overflow: hidden;
  color: var(--ink);
}

.achievement-badge.is-earned::before {
  position: absolute;
  inset: -50% 40% -50% -65%;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  content: '';
  transform: rotate(20deg);
  display: none;
}

.achievement-badge.is-earned:hover::before {
  animation: badgeSheen 700ms ease-out;
}

.achievement-badge.is-expanded {
  grid-column: span 2;
  text-align: left;
}

.achievement-badge.is-expanded > i {
  margin-inline: 0;
}

.achievement-long-term {
  border-left: 3px solid var(--success-border);
}

.achievement-entry-celebration::before,
.achievement-entry-celebration::after {
  position: absolute;
  width: min(80vw, 420px);
  height: min(80vw, 420px);
  border: 1px solid color-mix(in srgb, var(--carb-border) 56%, transparent);
  border-radius: 50%;
  content: '';
  animation: achievementHalo 2.4s ease-out both;
}

.achievement-entry-celebration::after {
  animation-delay: 200ms;
}

.achievement-entry-card {
  z-index: 1;
}

.achievement-entry-badge {
  margin-bottom: 13px;
  border-width: 8px;
}

.achievement-entry-badge::before {
  inset: 20px;
  border-width: 4px;
}

.achievement-entry-badge::after {
  top: -13px;
  width: 10px;
  height: 10px;
  box-shadow:
    -37px 37px 0 -2px currentColor,
    40px 34px 0 -2px currentColor;
}

.achievement-entry-card span {
  margin-top: 5px;
}

.achievement-entry-card button {
  min-height: 34px;
  margin-top: 10px;
  padding: 13px 30px;
  border: none;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
  border-radius: var(--radius-control);
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: none;
}

.achievement-entry-celebration.is-leaving {
  animation: achievementExit 350ms ease-in both;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}

.achievement-page-panel {
  margin-top: 12px;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .achievement-badge.is-earned:hover::before,
  .achievement-entry-celebration::before,
  .achievement-entry-celebration::after {
    animation: none;
  }
}

.achievement-panel {
  position: relative;
  padding: 22px;
}

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

.achievement-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: var(--w-head);
  letter-spacing: var(--track-title);
}

.achievement-streak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--line) 24%, transparent);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.achievement-streak-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--brand);
}

.achievement-streak-count {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.achievement-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.achievement-highlights span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 18%, transparent);
  border-radius: 999px;
}

.achievement-badge-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 10px;
}

.achievement-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 16px 10px 13px;
  border: 1px solid color-mix(in srgb, var(--line) 14%, transparent);
  cursor: pointer;
  text-align: center;
  animation: fade-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

.achievement-badge:hover {
  transform: translateY(-3px);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--ink) 5%, var(--surface-2));
}

.achievement-badge i,
.achievement-entry-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
}

.achievement-badge .badge-svg {
  width: 52px;
  height: 52px;
  animation: badge-idle-float 4.2s ease-in-out 1.2s infinite alternate;
}

.achievement-badge.is-earned .badge-svg {
  animation:
    badge-flip-in 950ms var(--ease-spring) both,
    badge-idle-float 4.2s ease-in-out 1.4s infinite alternate;
}

.achievement-badge:not(.is-earned) i::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px dashed color-mix(in srgb, var(--line) 40%, transparent);
  border-radius: 50%;
}

.achievement-badge strong {
  display: block;
  line-height: 1.35;
}

.achievement-period-note {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.achievement-entry-progress {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
}

.achievement-long-term {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 16%, transparent);
  border-radius: 16px;
}

.achievement-long-term strong {
  font-size: 13.5px;
}

.achievement-long-term span {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

.achievement-entry-celebration {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--scrim-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: fade-in var(--dur-med) var(--ease-out) both;
}

.achievement-entry-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(380px, 100%);
  padding: 34px 26px 28px;
  text-align: center;
  overflow: hidden;
  animation: celebration-in 720ms var(--ease-spring) both;
}

.achievement-entry-card .achievement-entry-badge {
  width: 100px;
  height: 100px;
  margin-bottom: 4px;
}

.achievement-entry-card .badge-svg {
  width: 92px;
  height: 92px;
  animation: badge-flip-in 1000ms var(--ease-spring) both;
}

.achievement-entry-card p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.achievement-entry-card strong {
  font-size: 21px;
  font-weight: 800;
}

.achievement-entry-card span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.achievement-entry-card button:active {
  transform: scale(0.95);
}

.achievement-skeleton {
  display: grid;
  gap: 16px;
}

.achievement-skeleton .skeleton-shimmer {
  height: 16px;
}

.achievement-skeleton-heading {
  display: grid;
  gap: 8px;
}

.achievement-skeleton-heading .skeleton-shimmer {
  width: 52%;
}

.achievement-skeleton-heading .skeleton-shimmer.short {
  width: 74%;
  height: 12px;
}

.achievement-skeleton-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.achievement-skeleton-metrics .skeleton-shimmer {
  height: 58px;
  border-radius: 12px;
}

.achievement-skeleton-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.achievement-skeleton-gallery .skeleton-shimmer {
  height: 64px;
  border-radius: 12px;
}

@media (max-width: 420px) {
  .achievement-skeleton-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.achievement-error {
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

.achievement-panel {
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

.achievement-heading p,
.achievement-period-note,
.achievement-entry-progress {
  color: var(--ink-3);
}

.achievement-streak {
  border-color: var(--brand-border);
  background: var(--brand-soft);
  color: var(--ink-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.achievement-streak b {
  color: var(--brand-strong);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.achievement-highlights span,
.achievement-long-term {
  border-color: var(--line);
  background: var(--surface-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.achievement-highlights small,
.achievement-long-term span {
  color: var(--ink-3);
}

.achievement-highlights b,
.achievement-long-term strong {
  color: var(--ink);
}

.achievement-badge {
  border-radius: var(--radius-control);
}

.achievement-badge.is-earned {
  animation: fade-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

.achievement-badge i::after,
.achievement-badge:not(.is-earned) i::before {
  display: none;
}

.achievement-badge .badge-svg,
.achievement-entry-badge .badge-svg {
  color: var(--ink-4);
  filter: none;
}

.achievement-badge > i {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink-4);
  box-shadow: none;
}

.achievement-badge.is-earned > i {
  border-color: var(--brand-border);
  background: var(--brand-soft);
  color: var(--brand-strong);
  box-shadow: none;
}

.achievement-badge:not(.is-earned) .badge-svg {
  color: var(--ink-4);
  filter: none;
}

.achievement-entry-badge {
  border: 1px solid var(--line);
  box-shadow: none;
  border-color: var(--brand-border);
  background: var(--brand-soft);
  color: var(--brand-strong);
  animation: none;
}

.achievement-badge.is-earned .badge-svg,
.achievement-entry-card .badge-svg {
  color: var(--brand);
  filter: none;
}

.achievement-badge strong,
.achievement-badge.is-earned strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--w-strong);
}

.achievement-badge small,
.achievement-badge.is-earned small {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: var(--w-body);
}

.achievement-entry-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}

.achievement-entry-card strong {
  color: var(--brand-strong);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.achievement-entry-card p,
.achievement-entry-card span {
  color: var(--ink-2);
}

body[data-page='achievements'] .achievement-heading p,
body[data-page='achievements'] .achievement-period-note,
body[data-page='achievements'] .achievement-streak-count,
body[data-page='achievements'] .achievement-entry-progress,
body[data-page='achievements'] .achievement-long-term span {
  font-size: 13px;
}

/* 성과 배지: 받은 배지는 한 단계 떠 있는 카드 위 주황 메달, 아직인 배지는 평평한 회색 칸.
   강조색은 메달에만 쓰고 카드 면은 중립으로 둔다. */
.achievement-badge {
  border-color: transparent;
  background: var(--surface-2);
  transition:
    transform var(--dur-med) var(--ease-spring),
    background-color var(--dur-fast) var(--ease-standard);
}

.achievement-badge.is-earned,
.achievement-badge.is-earned:hover {
  border-color: var(--edge-nested);
  background: var(--surface);
  box-shadow: var(--elev-card);
}

.achievement-badge:active {
  transform: scale(0.97);
  transition-duration: var(--dur-instant);
}

.achievement-page-panel {
  box-shadow: var(--elev-card);
}

/* ---------- 마이 화면 ----------
   계정 정보 카드·설정 링크·연결된 로그인 수단·닉네임 수정·로그아웃·계정 삭제. 로그아웃 버튼은 공통 상단바에 있지만
   마이 화면에서만 보인다. 계정 연결 소셜 버튼은 인증 화면의 소셜 버튼 옆에, 화면 모드 선택은 세그먼트 컨트롤 구역에 있다. */

.sign-out-button {
  min-height: 36px;
  border: 1px solid var(--line);
  background: var(--surface);
  white-space: nowrap;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--ink-2);
  font-weight: 700;
  cursor: pointer;
}

body:not([data-page='profile']) .sign-out-button {
  display: none !important;
}

body[data-page='profile'] .profile-view {
  padding-bottom: 28px;
}

body[data-page='profile'] .profile-sign-out-card {
  margin-top: 8px;
}

body[data-page='profile'] .sign-out-button {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  border-color: color-mix(in srgb, var(--danger-border) 18%, transparent);
  background: var(--surface);
  box-shadow: none;
  color: var(--danger-strong);
  font-weight: 800;
}

.profile-view {
  display: grid;
  gap: 12px;
}

.profile-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.profile-card h2 {
  margin: 0;
  font-size: 17px;
}

.profile-card > p {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.5;
}

.profile-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.profile-card dl div {
  display: grid;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--carb-border);
  border-color: var(--line);
}

.profile-card dl div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.profile-card dt {
  color: var(--ink-2);
}

.profile-card dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.profile-card dd.skeleton-value {
  height: var(--sv-h, 18px);
}

.profile-providers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-providers span {
  border: 1px solid var(--protein-border);
  border-radius: 999px;
  background: var(--protein-soft);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand) 10%, transparent),
    color-mix(in srgb, var(--brand) 10%, transparent)
  );
  color: var(--ink-2);
}

.profile-settings-link {
  font-size: 13px;
  font-weight: 800;
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}

.profile-view .profile-card {
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  padding: 20px;
  gap: 12px;
  border-color: var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-card);
}

.profile-view .profile-card dl div {
  border-color: color-mix(in srgb, var(--ink) 6%, transparent);
}

.profile-view .profile-settings-link {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  color: var(--ink);
  font-weight: 800;
}

.profile-view .profile-sign-out-card {
  padding: 12px 16px;
  border-color: var(--line);
  background: var(--surface);
}

.profile-view .sign-out-button {
  color: var(--danger-strong);
}

.profile-inline-form .save-goals-button {
  width: 100%;
  min-height: 48px;
}

.profile-inline-form {
  display: grid;
  gap: 10px;
}

/* 이슈 #162: 마이 제목 줄 오른쪽 종 아이콘(알림 모아보기). 안 읽은 알림이 있으면 점을 보인다. */
.profile-heading,
.notifications-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-bell {
  position: relative;
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--elev-card);
  color: var(--ink-2);
}

.profile-bell svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-bell-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--brand);
}

.profile-bell-dot[hidden] {
  display: none;
}

/* 이슈 #162: 알림 설정. 한 줄에 이름·시간·스위치를 둔다. */
.settings-rows {
  display: grid;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.settings-rows[hidden] {
  display: none;
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  font-weight: var(--w-strong);
}

.settings-row:has(> :nth-child(2):last-child) {
  grid-template-columns: 1fr auto;
}

/* iOS WebKit의 시간 입력은 고유 최소 폭이 있어 appearance를 꺼야 칸 안에 맞는다. */
.settings-row input[type='time'] {
  box-sizing: border-box;
  width: 7.5em;
  min-width: 0;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.settings-row input[type='time']:disabled {
  opacity: 0.45;
}

.settings-switch {
  position: relative;
  width: 51px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease;
}

.settings-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  transition: transform var(--dur-fast) ease;
}

.settings-switch[aria-checked='true'] {
  background: var(--brand);
}

.settings-switch[aria-checked='true']::before {
  transform: translateX(20px);
}

.settings-switch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.settings-card .personal-goals-secondary {
  margin-top: 4px;
}

/* 이슈 #162: 알림 모아보기 목록. 안 읽은 알림은 옅은 브랜드 배경과 점으로 구분한다. */
.notifications-settings-link {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--elev-card);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.notifications-settings-link[hidden] {
  display: none;
}

/* 화면 높이를 채우는 그리드라 줄이 벌어지지 않게 위에서부터 쌓는다. */
.notifications-view,
.notification-settings-view {
  align-content: start;
}

.notification-list-status {
  margin: 0;
  padding: 28px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-card);
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.notification-list-status[hidden],
.notification-list[hidden] {
  display: none;
}

.notification-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notification-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--elev-card);
  color: var(--ink);
  text-decoration: none;
}

.notification-item.is-unread {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface));
}

.notification-item.is-unread::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.notification-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
}

.notification-icon::before {
  content: '';
  width: 12px;
  height: 7px;
  margin-top: -3px;
  border-bottom: 2.5px solid var(--brand);
  border-left: 2.5px solid var(--brand);
  transform: rotate(-45deg);
}

.notification-icon.is-failed {
  background: var(--danger-soft);
}

.notification-icon.is-inquiry::before {
  width: 14px;
  height: 10px;
  margin: 0;
  border: 2.5px solid var(--brand);
  border-radius: 4px;
  transform: none;
}

.notification-icon.is-failed::before {
  content: '!';
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  color: var(--danger);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transform: none;
}

.notification-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.notification-copy strong {
  font-size: 15px;
}

.notification-copy small {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.45;
}

.notification-item time {
  padding-right: 12px;
  color: var(--ink-3);
  font-size: 12px;
  white-space: nowrap;
}

.profile-danger-card {
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

.profile-danger-button,
.profile-danger-secondary {
  border-radius: 12px;
  border: 1px solid var(--danger-border);
  background: var(--surface);
  color: var(--danger-strong);
  font: inherit;
  font-weight: 700;
  padding: 10px 12px;
  cursor: pointer;
}

.profile-danger-button {
  background: var(--danger-strong);
  color: var(--cta-ink);
}

.profile-link-actions {
  margin-top: 12px;
}

.profile-goals-card {
  border-color: var(--brand-border) !important;
  background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface)) !important;
}

.profile-view .profile-settings-link:hover,
.profile-settings-link.is-featured:hover {
  border-color: var(--brand-border);
  background: var(--surface-2);
}

.profile-settings-link:active {
  transform: scale(0.99);
}

.profile-settings-link.is-featured {
  border-color: var(--brand);
  background: var(--surface);
}

.profile-settings-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.profile-settings-copy strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: var(--w-strong);
}

.profile-settings-copy small {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: var(--w-body);
}

.profile-settings-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-view .profile-settings-link {
  background: var(--surface);
}

.profile-view .profile-providers span {
  border-color: var(--brand-border);
  background: var(--brand-soft);
}

.profile-view .profile-sign-out-card .sign-out-button,
.profile-view .profile-sign-out-card .profile-danger-secondary {
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-control);
}

body[data-page='profile'] .profile-card dt,
body[data-page='profile'] .profile-providers span,
body[data-page='profile'] .profile-settings-copy small,
body[data-page='profile'] #profileSuggestNickname {
  font-size: 13px;
}

body[data-page='profile'] .profile-card dt,
body[data-page='profile'] .profile-settings-copy small {
  font-weight: var(--w-body);
}

body[data-page='profile'] .profile-providers span {
  font-weight: var(--w-label);
}

/* 이슈 #365: 연결된 로그인 방식 칩 안의 해제 버튼 */
.profile-providers .profile-provider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-provider-unlink {
  min-height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--line, currentColor);
  border-radius: 999px;
  background: var(--surface);
  color: var(--danger, inherit);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* ---------- 소개 화면(랜딩) ----------
   로그인 전 공개 첫 화면(#158). 관리자 첫 화면과 같은 복숭아색 바탕·궤도 링을 쓰고, 하루 세 끼 사진이
   겹쳐 있다가 펼쳐지는 히어로 한 곳에만 움직임을 둔다. 예시 분석 수치는 추정 예시임을 배지로 밝힌다.
   App Store 배지는 Apple 공식 이미지를 고치지 않고 쓰며, 앱 셸(is-native-app) 안에서는 숨긴다. */

body[data-page='landing'] {
  --landing-peach: #fff0e1;
  --landing-peach-ink: #714d32;
  --landing-ring: #ecd0b4;
  --landing-frame: #ffffff;
  --landing-frame-ink: #7d6655;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body[data-page='landing'] {
    --landing-peach: #2a2119;
    --landing-peach-ink: #ebc5a7;
    --landing-ring: #57412f;
    --landing-frame: #22262c;
    --landing-frame-ink: #b4bac5;
  }
}

:root[data-theme='dark'] body[data-page='landing'] {
  --landing-peach: #2a2119;
  --landing-peach-ink: #ebc5a7;
  --landing-ring: #57412f;
  --landing-frame: #22262c;
  --landing-frame-ink: #b4bac5;
}

body[data-page='landing'] .app {
  width: min(100%, 1120px);
  padding: 0 16px calc(32px + env(safe-area-inset-bottom));
}

.topbar-login-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--w-strong);
  text-decoration: none;
}

.topbar-login-link:hover {
  background: var(--surface-2);
}

/* 히어로 */

.landing-hero {
  position: relative;
  display: grid;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 36px 20px 28px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--landing-peach);
  isolation: isolate;
}

.landing-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(38px, 10.5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  word-break: keep-all;
}

.landing-lead {
  max-width: 30em;
  margin: 20px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 28px;
}

.landing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 16px;
  font-weight: var(--w-head);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.landing-cta:active {
  transform: scale(0.98);
}

.landing-login-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--ink-2);
  font-weight: var(--w-label);
  text-underline-offset: 3px;
}

.landing-note {
  margin: 12px 0 0;
  color: var(--ink-3);
  font-size: 13px;
}

.landing-app-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.landing-hero .landing-app-row {
  margin-top: 24px;
}

.app-store-badge {
  display: inline-flex;
}

.app-store-badge img {
  display: block;
  width: auto;
  height: 44px;
}

.app-store-badge-dark {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .app-store-badge-light {
    display: none !important;
  }

  :root:not([data-theme='light']) .app-store-badge-dark {
    display: block !important;
  }
}

:root[data-theme='dark'] .app-store-badge-light {
  display: none !important;
}

:root[data-theme='dark'] .app-store-badge-dark {
  display: block !important;
}

.landing-app-soon {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: var(--w-label);
}

/* 앱 셸 안에서는 이미 앱이므로 App Store 안내를 보이지 않는다. */
.is-native-app .landing-app-row,
.is-native-app .landing-app {
  display: none;
}

/* 궤도 링: 관리자 첫 화면과 같은 실선·점선 두 겹. 놓인 상자의 가운데에 그린다. */
.landing-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  width: var(--orbit-size, 520px);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}

.landing-orbit::before,
.landing-orbit::after {
  position: absolute;
  inset: 0;
  border: 1px solid var(--landing-ring);
  border-radius: 50%;
  content: '';
}

.landing-orbit::before {
  inset: 16%;
}

.landing-orbit::after {
  border-style: dashed;
}

.landing-hero-copy {
  position: relative;
  z-index: 1;
}

/* 좁은 화면은 세로로 길게 두어 분석 예시 카드가 가운데 사진을 덮지 않게 한다. */
.landing-snaps {
  --orbit-size: 112%;
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1.2;
  margin: 12px auto 0;
  isolation: isolate;
}

.landing-snap {
  position: absolute;
  width: 46%;
  margin: 0;
  padding: 8px 8px 0;
  border-radius: 18px;
  background: var(--landing-frame);
  box-shadow:
    0 1px 2px rgba(80, 50, 20, 0.08),
    0 18px 40px -18px rgba(80, 50, 20, 0.35);
}

.landing-snap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
}

.landing-snap figcaption {
  padding: 8px 4px 10px;
  color: var(--landing-frame-ink);
  font-size: 12px;
  font-weight: var(--w-strong);
}

.landing-snap.is-breakfast {
  top: 4%;
  left: 0;
  rotate: -9deg;
}

.landing-snap.is-dinner {
  top: 0;
  right: 0;
  rotate: 8deg;
}

.landing-snap.is-lunch {
  top: 13%;
  left: 19%;
  z-index: 1;
  width: 62%;
  rotate: -2deg;
}

.landing-snap.is-lunch img {
  aspect-ratio: 4 / 3;
}

/* 예시 결과 카드는 가운데 사진 아래쪽에 겹쳐 음식을 가리지 않는다. */
.landing-result {
  position: absolute;
  right: 2%;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 2px;
  width: min(300px, 82%);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.landing-result-badge {
  justify-self: start;
  margin-bottom: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: var(--w-strong);
}

.landing-result strong {
  color: var(--ink);
  font-size: 15px;
  word-break: keep-all;
}

.landing-result-kcal {
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.landing-macro-bar {
  display: flex;
  gap: 3px;
  height: 6px;
  margin: 6px 0 4px;
}

.landing-macro-bar span {
  flex: 0 0 var(--share);
  border-radius: var(--radius-pill);
  background: var(--macro-color);
}

.landing-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: var(--ink-2);
  font-size: 12px;
}

.landing-macro::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--macro-color, var(--ink-4));
  content: '';
}

.landing-macro-bar .is-carb,
.landing-macro.is-carb {
  --macro-color: var(--carb);
}

.landing-macro-bar .is-protein,
.landing-macro.is-protein {
  --macro-color: var(--protein);
}

.landing-macro-bar .is-fat,
.landing-macro.is-fat {
  --macro-color: var(--fat);
}

/* 처음 한 번: 겹쳐 있던 세 장이 부채꼴로 펼쳐지고, 마지막에 분석 예시가 떠오른다. */
@media (prefers-reduced-motion: no-preference) {
  .landing-hero-copy {
    animation: landing-rise 700ms var(--ease-out) both;
  }

  .landing-snap.is-breakfast {
    animation: landing-fan-left 900ms var(--ease-out) 260ms both;
  }

  .landing-snap.is-dinner {
    animation: landing-fan-right 900ms var(--ease-out) 260ms both;
  }

  .landing-snap.is-lunch {
    animation: landing-rise 700ms var(--ease-out) 120ms both;
  }

  .landing-result {
    animation: landing-rise 600ms var(--ease-out) 820ms both;
  }
}

@keyframes landing-rise {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}

@keyframes landing-fan-left {
  from {
    opacity: 0;
    rotate: -2deg;
    translate: 42% 14%;
  }
}

@keyframes landing-fan-right {
  from {
    opacity: 0;
    rotate: -2deg;
    translate: -42% 18%;
  }
}

/* 공통 구역 */

.landing-section {
  padding-top: 72px;
}

.landing-section h2,
.landing-closing h2,
.landing-app h2 {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: clamp(24px, 6.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  word-break: keep-all;
}

/* 이용 단계: 실제 순서라 번호를 쓰고 점선으로 잇는다. */
.landing-steps {
  position: relative;
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-steps::before {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 21px;
  border-left: 2px dashed var(--landing-ring);
  content: '';
}

.landing-steps li {
  position: relative;
  padding-left: 64px;
}

.landing-step-number {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px var(--bg);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
}

.landing-steps strong,
.landing-feature strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: var(--w-head);
}

.landing-steps strong {
  padding-top: 10px;
}

.landing-steps p,
.landing-feature p {
  max-width: 32em;
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  word-break: keep-all;
}

/* 기능: 크기가 다른 칸에 화면 미리보기 그림을 하나씩 둔다. */
.landing-features {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-feature {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
}

.landing-feature > div {
  display: flex;
  align-items: flex-end;
  min-height: 148px;
  margin-bottom: 20px;
}

.landing-features-note {
  margin: 12px 0 0;
  color: var(--ink-3);
  font-size: 13px;
}

.landing-goal-ring {
  justify-content: flex-start;
}

.landing-goal-ring span {
  display: grid;
  place-content: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--surface) 78%, transparent 79%),
    conic-gradient(var(--brand) 0 69%, var(--surface-2) 69% 100%);
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
}

.landing-goal-ring b {
  display: block;
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.landing-trend {
  position: relative;
  gap: 10px;
  height: 148px;
}

.landing-trend > span:not(.landing-trend-goal) {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
}

.landing-trend > span:not(.landing-trend-goal)::before {
  height: calc(var(--h) - 22px);
  margin-bottom: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 32%, var(--surface-2));
  content: '';
}

.landing-trend > span.is-today {
  color: var(--ink);
  font-weight: var(--w-strong);
}

.landing-trend > span.is-today::before {
  background: var(--brand);
}

.landing-trend-goal {
  position: absolute;
  right: 0;
  bottom: calc(22px + (100% - 22px) * 0.78);
  left: 0;
  border-top: 2px dashed var(--ink-4);
}

.landing-favorites {
  gap: 10px;
}

.landing-favorites span {
  display: grid;
  flex: 1;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
}

.landing-favorites img {
  display: block;
  width: 100%;
  height: 112px;
  border-radius: 16px;
  object-fit: cover;
}

.landing-favorites b {
  overflow: hidden;
  font-weight: var(--w-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-feature.is-streak {
  border-color: var(--brand-border);
  background: var(--brand-soft);
}

.landing-streak {
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-end;
  gap: 14px;
}

.landing-streak b {
  color: var(--brand-strong);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.landing-streak-dots {
  display: grid;
  grid-template-columns: repeat(7, 16px);
  gap: 8px;
}

.landing-streak-dots i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
}

.landing-streak-dots i.is-empty {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--brand-border);
}

/* 한 줄 문장 */

.landing-statement {
  padding: 96px 0 88px;
  text-align: center;
}

.landing-statement p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 7.6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.22;
  word-break: keep-all;
}

.landing-statement span {
  display: block;
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 16px;
}

/* iPhone 앱 안내 */

.landing-app {
  display: grid;
  gap: 20px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--surface);
}

.landing-app-icon {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 22%;
  box-shadow:
    0 1px 2px rgba(14, 17, 22, 0.08),
    0 14px 30px -14px rgba(14, 17, 22, 0.35);
}

.landing-app h2 {
  margin-bottom: 8px;
}

.landing-app-copy p {
  max-width: 30em;
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  word-break: keep-all;
}

/* 안내와 마무리 */

.landing-notice ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 14px;
  word-break: keep-all;
}

.landing-notice a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.landing-notice h2 {
  font-size: 20px;
}

.landing-closing {
  --orbit-size: 640px;
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: 72px;
  padding: 64px 20px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--landing-peach);
  text-align: center;
  isolation: isolate;
}

.landing-closing h2 {
  margin-bottom: 8px;
}

.landing-closing p {
  margin: 0 0 28px;
  color: var(--landing-peach-ink);
  font-size: 15px;
  word-break: keep-all;
}

.landing-footer {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 16px;
}

.landing-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-underline-offset: 3px;
}

@media (max-width: 519px) {
  .landing-actions .landing-cta {
    flex: 1 1 100%;
  }

  .landing-actions .landing-login-link {
    margin: 0 auto;
  }
}

@media (min-width: 720px) {
  .landing-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .landing-steps::before {
    top: 21px;
    right: calc(100% / 3 - 24px);
    bottom: auto;
    left: 22px;
    border-top: 2px dashed var(--landing-ring);
    border-left: 0;
  }

  .landing-steps li {
    padding: 64px 0 0;
  }

  .landing-steps strong {
    padding-top: 0;
  }

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

  .landing-app {
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 32px;
  }

  .landing-app > .landing-app-row {
    grid-column: 2;
  }
}

@media (min-width: 960px) {
  .landing-hero {
    grid-template-columns: 1fr 1.05fr;
    gap: 40px;
    min-height: 600px;
    padding: 56px 56px 56px 64px;
  }

  .landing-snaps {
    --orbit-size: 128%;
    margin: 0;
    aspect-ratio: 1 / 1.02;
  }

  .landing-features {
    grid-template-columns: repeat(6, 1fr);
  }

  .landing-feature.is-goal,
  .landing-feature.is-streak {
    grid-column: span 2;
  }

  .landing-feature.is-trend,
  .landing-feature.is-favorites {
    grid-column: span 4;
  }

  .landing-app {
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    padding: 36px 40px;
  }

  .landing-app > .landing-app-row {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
  }
}

/* ---------- 인증 화면 ----------
   로그인·가입·비밀번호 재설정·닉네임·개인정보 동의·약관·인증 대기. 본문 카드(.auth-view)는 카드 구역에,
   로그인 버튼(#signInButton)과 누름 반응은 버튼 구역에 있다. */

/* 상단바·바닥글 없이 본문만 보인다. 로그인은 화면 가운데에 놓는다.
   공지·약관·방침·고객지원(privacy)은 로그인한 사용자에게만 탭바를 둔다(이슈 #587, layout.js has-app-tabbar). */
body[data-page='login'] .topbar,
body[data-page='login'] .app-footer,
body[data-page='signup'] .app-footer,
body[data-page='reset-password'] .app-footer,
body[data-page='nickname'] .app-footer,
body[data-page='privacy']:not(.has-app-tabbar) .app-footer,
body[data-page='privacy-consent'] .app-footer,
body[data-page='auth-callback'] .topbar,
body[data-page='auth-callback'] .app-footer {
  display: none;
}

body[data-page='login'] .app {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  padding: 28px 24px calc(32px + env(safe-area-inset-bottom));
}

.auth-view h2,
.privacy-view h1 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: var(--w-head);
  letter-spacing: var(--track-title);
}

.privacy-view h1 {
  line-height: var(--lh-body);
}

.auth-view p {
  margin-top: 7px;
  color: var(--ink-3);
}

.auth-view > div > p,
.auth-view > p {
  color: var(--ink-3);
  line-height: var(--lh-body);
}

/* 입력 폼 */
.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form label:not(.auth-checkbox) {
  display: grid;
  gap: 7px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: var(--w-label);
}

.auth-form input {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.auth-form input:not([type='checkbox']) {
  min-height: 52px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  font-weight: var(--w-body);
}

.auth-form input:not([type='checkbox']):focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
}

.auth-checkbox,
.auth-form label.auth-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink);
}

.auth-checkbox input,
.auth-form label.auth-checkbox input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  flex-shrink: 0;
  padding: 0;
}

/* 로그인 '이메일 저장'·동의 체크박스도 주 버튼과 같은 잉크 색을 쓴다. */
.auth-checkbox input[type='checkbox'] {
  accent-color: var(--cta);
}

.auth-form label.auth-checkbox span {
  line-height: 1.45;
}

.signup-otp-timer {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.auth-helper {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.45;
}

.auth-status {
  min-height: 20px;
  margin: 0 !important;
  font-size: 13px;
}

.auth-status.is-error {
  color: var(--danger);
}

.auth-status:empty {
  display: none;
}

.nickname-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
}

/* 비밀번호 강도 */
.password-strength {
  display: grid;
  gap: 8px;
}

.password-strength-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--success-soft);
}

.password-strength-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--danger);
  transition:
    width 160ms ease,
    background-color 160ms ease;
}

.password-strength-bar[data-score='1'] {
  width: 20%;
  background: var(--danger);
}

.password-strength-bar[data-score='2'] {
  width: 40%;
  background: var(--brand);
}

.password-strength-bar[data-score='3'] {
  width: 60%;
  background: var(--carb);
}

.password-strength-bar[data-score='4'] {
  width: 80%;
  background: var(--success);
}

.password-strength-bar[data-score='5'] {
  width: 100%;
  background: var(--success-strong);
}

.password-strength-label {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.password-strength-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.password-strength-checks li::before {
  content: '○ ';
}

.password-strength-checks li.is-met {
  color: var(--success-strong);
}

.password-strength-checks li.is-met::before {
  content: '✓ ';
}

/* 조건을 채우지 못한 채 제출하면 남은 항목을 강조한다(password-fields.js). */
.password-strength.is-attention .password-strength-checks li:not(.is-met) {
  color: var(--danger);
}

/* 입력칸 바로 아래 안내(이메일 형식·비밀번호 확인 일치, 이슈 #301). */
.field-hint {
  margin: -8px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.field-hint.is-error {
  color: var(--danger);
}

.field-hint.is-ok {
  color: var(--success-strong);
}

.auth-form input[aria-invalid='true'] {
  border-color: var(--danger);
}

/* 폼 버튼: 제출은 강조색, 그 밖의 버튼(type="button")은 회색 */
.auth-form button {
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 15px;
  font-weight: var(--w-strong);
  cursor: pointer;
}

.auth-form button[type='submit'] {
  border-color: var(--cta);
  background: var(--cta);
  color: var(--cta-ink);
}

.auth-form button[type='button'] {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 700;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 5%, transparent);
  transition: transform var(--dur-fast) var(--ease-spring);
}

.auth-form .auth-secondary-button {
  font-size: 14px;
  text-underline-offset: 2px;
}

.auth-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  font-weight: var(--w-label);
  text-decoration: none;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: var(--w-body);
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  background: var(--line);
  content: '';
}

/* 소셜 계정 버튼: 로그인 화면과 마이 화면 계정 연결이 같은 규칙을 쓴다. 카카오·네이버는 각 사 가이드의 브랜드 색을 그대로 쓴다. */
.social-auth {
  display: grid;
  gap: 12px;
}

.social-auth .social-button {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 52px;
  justify-content: center;
  gap: 8px;
  padding-inline: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-size: 15px;
  font-weight: var(--w-strong);
  cursor: pointer;
}

.social-auth .social-button:disabled {
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .social-auth .social-button:hover:not(:disabled) {
    box-shadow: 0 0 0 2px var(--brand);
  }
}

.social-auth .social-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
}

.social-auth .google-button {
  border-color: var(--google-border);
  background: var(--google-bg);
  color: var(--google-ink);
}

.social-auth .kakao-button {
  border-color: var(--kakao-bg);
  background: var(--kakao-bg);
  color: var(--kakao-ink);
}

.social-auth .naver-button {
  border-color: var(--naver-bg);
  background: var(--naver-bg);
  color: var(--naver-ink);
}

/* Sign in with Apple(앱 전용, 이슈 #162): Apple 버튼 지침의 검정(다크 모드는 흰색) 버튼 */
.social-auth .apple-button {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.social-auth .apple-button[hidden] {
  display: none;
}

.social-icon.apple-icon {
  width: 18px;
  height: 20px;
  flex: 0 0 18px;
}

.social-icon.google-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 0;
  background: none;
  mask: none;
  -webkit-mask: none;
}

/* 로그인: 카드 없이 로고·소셜 로그인·이메일 폼을 세로로 놓는다. */
.login-view {
  width: 100%;
  max-width: 420px;
  gap: 20px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.login-brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

/* 로그인·인증 대기 화면의 로고는 앱 아이콘처럼 모서리를 둥글게 깎는다(정사각형 원본). */
.login-brand > img,
.auth-callback-logo {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 22%;
  box-shadow:
    0 1px 2px rgba(14, 17, 22, 0.08),
    0 10px 24px -12px rgba(14, 17, 22, 0.3);
}

.login-brand-wordmark {
  color: var(--ink);
  font-size: 30px;
  font-weight: var(--w-display);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.login-brand-wordmark span {
  color: var(--brand);
}

.login-brand p#authIntro {
  margin: 0;
  color: var(--ink-3);
  font-size: 14px;
}

.login-social-auth {
  display: grid;
  gap: 18px;
  padding-inline: clamp(10px, 3vw, 16px);
}

/* 이메일 로그인 단계: 소셜 로그인을 숨기고 머리글을 왼쪽에 붙인다. */
.login-view.is-secondary-step .login-brand {
  justify-items: start;
  text-align: left;
}

.login-view.is-secondary-step .login-brand h2 {
  margin: 0;
}

.login-view.is-secondary-step .login-brand p#authIntro {
  margin-top: 2px;
  text-align: left;
}

.login-view.is-secondary-step .login-social-auth {
  display: none;
}

.login-view .auth-form {
  gap: 14px;
  padding: 8px clamp(10px, 3vw, 16px);
}

.login-view .auth-form > button[type='submit'] {
  min-height: 54px;
  margin-top: 2px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: var(--elev-cta);
}

.login-view .auth-form .auth-secondary-button {
  min-height: 38px;
  color: var(--ink-2);
  text-decoration: none;
}

.login-view .auth-form .test-login-button {
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
}

/* 보안 확인(Turnstile) 자리: 확인이 필요할 때만 체크 상자가 생기고, 평소에는 공간을 차지하지 않는다. */
.captcha-slot {
  display: flex;
  justify-content: center;
}

.captcha-slot:empty {
  display: none;
}

/* 확인 대기 중에는 위젯을 렌더링한 채 흐름에서 빼 둔다(captcha.js가 확인이 필요할 때 is-idle을 뗀다). */
.captcha-slot.is-idle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* 동의 화면의 약관·방침 전문: 처음 가입하면 펼친 채로, 길면 상자 안에서 스크롤한다(이슈 #153). */
.consent-doc {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.consent-doc > summary {
  min-height: 44px;
  padding: 12px 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--w-strong);
  cursor: pointer;
}

/* .privacy-body의 카드 테두리·여백을 덮어 상자 안 본문으로 쓴다. */
.consent-doc .consent-doc-body {
  max-height: 240px;
  margin: 0;
  padding: 14px;
  overflow-y: auto;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-control) var(--radius-control);
  font-size: 13px;
  overscroll-behavior: contain;
}

/* 동의 화면의 '모두 동의': 개별 항목과 구분선으로 나눈다(이슈 #153). */
.auth-checkbox.consent-all {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: var(--w-head);
}

.login-privacy-link {
  margin: -4px 0 0;
  text-align: center;
}

.login-privacy-link a {
  color: var(--ink-3);
  text-decoration: none;
}

/* 약관 */
.privacy-view {
  max-width: 720px;
}

.privacy-body {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink-2);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

.privacy-body h2,
.privacy-body h3,
.privacy-body h4 {
  margin: 0;
}

/* 공개 문서의 제목 계층과 기존 글자 크기를 각각 유지한다. */
.privacy-view .privacy-body h2 {
  color: inherit;
  font-size: 1.17em;
  font-weight: 700;
  letter-spacing: var(--track-head);
}

.privacy-view .privacy-body h3,
.privacy-view .privacy-body .privacy-heading-small {
  font-size: 1em;
  letter-spacing: var(--track-body);
}

.privacy-body ul,
.privacy-body ol {
  margin: 0;
  padding-left: 1.2rem;
}

/* 공지사항(이슈 #135) */
.notice-board-meta {
  margin: 6px 0 0;
  color: var(--ink-3);
}

.notice-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-item {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.notice-item:hover,
.notice-item:focus-visible {
  border-color: var(--brand);
}

.notice-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 700;
}

.notice-item-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.notice-item-date {
  color: var(--ink-3);
  font-size: 0.875em;
}

.notice-pin,
.notice-level {
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
}

.notice-level.is-maintenance {
  border-color: var(--carb-border);
  background: var(--carb-soft);
  color: var(--carb-strong);
}

.notice-level.is-incident {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger-strong);
}

.notice-detail h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.notice-detail-body {
  margin: 0;
  white-space: pre-line;
}

/* 인증 대기(소셜 로그인 뒤 돌아오는 화면) */
.auth-callback-view {
  display: flex;
  min-height: 46vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.auth-progress-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

/* Issue #194 review follow-up: keep shared editor, home, and chart values legible. */
body[data-page='record'] .calorie-ring-segments {
  display: block;
}

body[data-page='dashboard'] .dashboard-date-heading p,
body[data-page='dashboard'] #calorieRing > div > span,
body[data-page='dashboard'] .meal-feed-photo-metadata,
body[data-page='dashboard'] .meal-feed-macros span,
body[data-page='dashboard'] .meal-feed-hashtag,
body[data-page='dashboard'] .meal-card-feedback > span,
body[data-page='dashboard'] .history-feed-sentinel {
  font-size: 13px;
}

body[data-page='dashboard'] .dashboard-goal-intake,
body[data-page='dashboard'] .dashboard-nutrition-details summary,
body[data-page='dashboard'] .dashboard-nutrition-detail-grid {
  font-size: 13px;
}

.trend-goal-note,
.trend-bar-labels span,
.trend-chart-detail,
.trend-dot-row span,
.profile-card dt,
.nutrition-estimate-note {
  font-size: 13px;
}

/* The feed wrapper and record page are transparent containers; only surfaced cards get a dark border. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .dashboard-card,
  :root:not([data-theme='light']) .meal-feed-card,
  :root:not([data-theme='light']) .achievement-page-panel,
  :root:not([data-theme='light']) .auth-view:not(.login-view) {
    border: 1px solid var(--line);
  }
}

:root[data-theme='dark'] .dashboard-card,
:root[data-theme='dark'] .meal-feed-card,
:root[data-theme='dark'] .achievement-page-panel,
:root[data-theme='dark'] .auth-view:not(.login-view) {
  border: 1px solid var(--line);
}

/* Macro and success tints are reserved for macro data and state; neutral controls use line/surface tokens. */
.preview,
.meal-context,
.food-nutrition-bulk-button,
.meal-analysis-retry {
  border-color: var(--line);
}

/* ==========================================================================
   UI 고도화: 재질 · 아이콘 · 모션
   #194의 색·글꼴 토큰은 그대로 둔다. 그 위에 표면 깊이(헤어라인·그림자 3단계),
   한 가지 아이콘 언어(글자 기호 → 선 아이콘), 등장·퇴장 모션, 화면 전환을 모은다.
   - 등장은 감속(--ease-enter), 퇴장은 가속(--ease-exit)·더 짧게, 직접 조작은 스프링.
   - 색 번짐 그림자·반짝임 같은 장식 효과는 쓰지 않는다. 강조색은 데이터와 주 강조에만.
   - 움직임 줄이기 설정에서는 이동·확대를 빼고 짧은 페이드만 남긴다(맨 아래).
   ========================================================================== */

:root {
  --hairline: rgba(14, 17, 22, 0.08);
  --elev-card:
    0 0 0 1px rgba(14, 17, 22, 0.035), 0 1px 2px rgba(14, 17, 22, 0.04),
    0 12px 28px -18px rgba(14, 17, 22, 0.18);
  --elev-float:
    0 0 0 1px rgba(14, 17, 22, 0.06), 0 2px 6px -2px rgba(14, 17, 22, 0.08),
    0 18px 36px -16px rgba(14, 17, 22, 0.28);
  --elev-overlay: 0 0 0 1px rgba(14, 17, 22, 0.05), 0 -20px 60px -24px rgba(14, 17, 22, 0.32);
  --elev-cta: 0 1px 2px rgba(14, 17, 22, 0.14), 0 10px 22px -12px rgba(14, 17, 22, 0.5);
  --glass-bar: color-mix(in srgb, var(--bg) 80%, transparent);
  --glass-float: color-mix(in srgb, var(--surface) 84%, transparent);
  --glass-blur: blur(20px) saturate(180%);
  --scrim-sheet: rgba(14, 17, 22, 0.4);
  --focus-ring: color-mix(in srgb, var(--brand) 78%, var(--ink));
  /* 카드 안에 놓인 카드의 테두리. 라이트는 그림자가 경계를 만들고, 다크는 선이 만든다. */
  --edge-nested: transparent;
  --z-menu: 70;
  --z-sheet: 1000;
  --z-dialog: 1100;

  /* 선 아이콘(Lucide 2px). 글자 기호(‹ › ⌄ × ⋯ ↑ ▶)를 이 모양으로 바꿔 그린다. */
  --icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='1.9'/%3E%3Ccircle cx='12' cy='12' r='1.9'/%3E%3Ccircle cx='19' cy='12' r='1.9'/%3E%3C/svg%3E");
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.98 13.04A9 9 0 0 1 10.96 3.02 9 9 0 1 0 20.98 13.04Z'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  --icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
  --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E");
  --icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.2 3.5a.5.5 0 0 0 .8-.4V7.9a.5.5 0 0 0-.8-.4L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E");
  --icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.4 2.6a1 1 0 0 1 3 3l-9 9a2 2 0 0 1-.9.5l-2.9.8a.5.5 0 0 1-.6-.6l.8-2.9a2 2 0 0 1 .5-.9z'/%3E%3C/svg%3E");
  --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2M10 11v6M14 11v6'/%3E%3C/svg%3E");
  --icon-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cpath d='M4 22v-7'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --hairline: rgba(255, 255, 255, 0.08);
    --elev-card: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --elev-float:
      0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 20px 40px -14px rgba(0, 0, 0, 0.8);
    --elev-overlay:
      0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 -20px 60px -20px rgba(0, 0, 0, 0.85);
    --elev-cta: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --glass-float: color-mix(in srgb, var(--surface-2) 82%, transparent);
    --scrim-sheet: rgba(0, 0, 0, 0.58);
    --edge-nested: var(--line);
  }
}

:root[data-theme='dark'] {
  --hairline: rgba(255, 255, 255, 0.08);
  --elev-card: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --elev-float:
    0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 40px -14px rgba(0, 0, 0, 0.8);
  --elev-overlay:
    0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 -20px 60px -20px rgba(0, 0, 0, 0.85);
  --elev-cta: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --glass-float: color-mix(in srgb, var(--surface-2) 82%, transparent);
  --scrim-sheet: rgba(0, 0, 0, 0.58);
  --edge-nested: var(--line);
}

/* ---------- 버튼 ----------
   주 버튼은 강조색을 채우고 중립 그림자 한 가지만 쓴다. 누르면 짧게 줄어들었다가 스프링으로
   돌아오며, 비활성 버튼은 줄어들지 않는다. 삭제 확인 대화상자의 버튼은 대화상자 구역에 있다. */

/* 주 버튼 */
.save-goals-button,
#goalWizardNextButton,
.analyze-button,
.record-entry-button,
#signInButton {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 16px;
  background: var(--cta);
  color: var(--cta-ink);
  font-weight: 800;
  box-shadow: var(--elev-cta);
  cursor: pointer;
}

.save-goals-button,
#goalWizardNextButton,
.analyze-button,
.record-entry-button {
  letter-spacing: -0.01em;
}

/* 목표 저장·닉네임 저장 */
.save-goals-button {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
}

/* 목표 화면의 전체 저장(여백은 #goalEditMode 규칙이 정한다) */
.goal-save-all-button {
  min-height: 50px;
  font-size: 15px;
}

#goalWizardNextButton {
  font-size: 16px;
}

/* 홈 기록 버튼 */
.record-entry-button {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 56px;
  font-size: 17px;
}

/* 등록 화면 사진 카드 아래 분석 버튼 */
.analyze-button {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 2px;
  font-size: 16px;
}

/* 이슈 #480: 음식 여부를 확인하는 동안 버튼을 숨기지 않고 진행 표시와 함께 비활성으로 둔다. */
.analyze-button.is-checking::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, currentColor 40%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: analyze-button-spin 0.8s linear infinite;
}

@keyframes analyze-button-spin {
  to {
    transform: rotate(360deg);
  }
}

.analyze-button:disabled {
  background: var(--protein-soft);
  color: var(--ink-3);
  box-shadow: none;
  opacity: 0.45;
  cursor: not-allowed;
}

/* 확인 중에는 버튼이 남아 상태를 알리므로 조금 더 또렷하게 보여 준다. */
.analyze-button.is-checking:disabled {
  opacity: 0.85;
}

/* 상세 화면 식단 편집기의 음식 추가: 주 버튼과 달리 표면색을 쓴다. */
.add-food-button {
  position: relative;
  overflow: hidden;
  display: flex;
  place-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.add-food-button:hover,
.add-food-button:focus-visible {
  border-color: var(--protein-border);
  background: var(--protein-soft);
}

.add-food-button span {
  font-size: 20px;
  line-height: 1;
}

/* 보조 버튼: 옅은 잉크 테두리와 반투명 표면(아래 공통 규칙). 버튼별 규칙의 테두리·배경은 color-mix()를
   못 쓰는 브라우저에서 쓰이는 대체값이라 공통 규칙보다 앞에 둔다. */

/* 목표 화면: 내보내기·다시 설정 */
.personal-goals-secondary {
  min-height: 34px;
  padding: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
}

.goal-restart-button {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--surface-2);
  background: var(--protein-soft);
  font-size: 12px;
  white-space: nowrap;
}

/* 화면 머리의 뒤로 가기. 아이콘은 아이콘 버튼 구역이 그린다. */
.subpage-back-button {
  flex: 0 0 auto;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

/* 목표 마법사 취소 */
.goal-wizard-cancel {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
}

.personal-goals-secondary,
.goal-restart-button,
.subpage-back-button,
#goalWizardBackButton,
.goal-wizard-cancel {
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--ink-2);
  font-weight: 700;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast),
    color var(--dur-fast);
}

.personal-goals-secondary:hover,
.goal-restart-button:hover,
.subpage-back-button:hover,
#goalWizardBackButton:hover {
  background: var(--surface);
  color: var(--ink);
}

.goal-wizard-cancel {
  border-radius: 999px;
}

.goal-wizard-cancel:hover {
  border-color: var(--line);
  color: var(--ink-2);
}

.goal-wizard-cancel:active {
  transform: scale(0.95);
}

/* 목표 마법사 이전 */
#goalWizardBackButton {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

#goalWizardBackButton:active {
  transform: scale(0.96);
}

/* 닉네임 추천(마이·닉네임 화면) */
.nickname-input-row .personal-goals-secondary {
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
}

/* 목표 삭제. 같은 속성을 두 번 쓴 앞 값은 color-mix() 대체값이다. */
.personal-goals-danger {
  min-height: 34px;
  border: 1px solid var(--danger-border);
  border: 1px solid color-mix(in srgb, var(--danger-border) 25%, transparent);
  border-radius: 14px;
  background: var(--danger-soft);
  background: color-mix(in srgb, var(--danger) 6%, transparent);
  color: var(--danger-strong);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}

/* 누름 반응 */
.manual-entry-button,
.goal-preset-buttons button,
.goal-wizard-nav button {
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    background-color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    opacity var(--dur-med) var(--ease-out);
}

.manual-entry-button:active:not(:disabled),
.goal-preset-buttons button:active:not(:disabled),
.personal-goals-danger:active:not(:disabled),
.personal-goals-secondary:active:not(:disabled),
.goal-restart-button:active:not(:disabled),
.goal-wizard-nav button:active:not(:disabled) {
  transform: scale(0.97);
}

.save-goals-button,
#goalWizardNextButton,
.analyze-button,
.record-entry-button,
#signInButton,
.add-food-button,
.record-photo-action,
.record-alternate-action,
.photo-source-action,
.photo-source-cancel,
.meal-action-row,
.delete-confirm-cancel,
.delete-confirm-approve,
.meal-save-error button,
.meal-filter-button,
.dashboard-goal-chip,
.dashboard-streak-badge,
.dashboard-meal-slot,
.profile-settings-link,
.subpage-back-button,
.social-button,
.auth-form button {
  transition:
    transform var(--dur-med) var(--ease-spring),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-med) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}

:is(
    .save-goals-button,
    #goalWizardNextButton,
    .analyze-button,
    .record-entry-button,
    #signInButton,
    .add-food-button,
    .record-photo-action,
    .record-alternate-action,
    .photo-source-action,
    .photo-source-cancel,
    .delete-confirm-cancel,
    .delete-confirm-approve,
    .meal-save-error button,
    .meal-filter-button,
    .dashboard-goal-chip,
    .dashboard-streak-badge,
    .profile-settings-link,
    .subpage-back-button,
    .social-button,
    .auth-form button
  ):active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: var(--dur-instant);
}

body[data-page='dashboard'] .dashboard-meal-slot:active {
  transform: scale(0.96);
  transition-duration: var(--dur-instant);
}

/* ---------- 공통 상호작용: 키보드 초점 ---------- */

:where(a, button, summary, [role='button'], input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- 아이콘: 글자 기호 대신 같은 굵기의 선 아이콘 ---------- */

.detail-hero-back,
.detail-hero-more,
.meal-feed-menu-button,
.scroll-to-top-button,
.meal-filter-close,
.photo-source-close,
.trend-detail-close,
#trendPreviousButton,
#trendNextButton,
#calendarPreviousMonth,
#calendarNextMonth,
.record-hashtag-chip-remove {
  display: inline-grid;
  place-items: center;
  font-size: 0 !important;
  line-height: 0;
}

/* 뒤로 가기 버튼도 '‹' 글자를 숨기고 아이콘만 그린다. 버튼 안에 남은 글자 노드가 그리드 행을
   하나 더 만들어 아이콘이 위로 떠 보였으므로, 글자 노드가 같은 줄에서 가운데로 오는 flex로 맞춘다
   (#490-A 1). 목표·기록·업적 화면이 같은 규칙을 쓴다. */
.subpage-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  line-height: 0;
}

:is(
  .subpage-back-button,
  .detail-hero-back,
  .detail-hero-more,
  .meal-feed-menu-button,
  .scroll-to-top-button,
  .meal-filter-close,
  .photo-source-close,
  .trend-detail-close,
  #trendPreviousButton,
  #trendNextButton,
  #calendarPreviousMonth,
  #calendarNextMonth,
  .record-hashtag-chip-remove
)::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--icon, var(--icon-chevron-left)) center / contain no-repeat;
  mask: var(--icon, var(--icon-chevron-left)) center / contain no-repeat;
}

.subpage-back-button,
.detail-hero-back,
#trendPreviousButton,
#calendarPreviousMonth {
  --icon: var(--icon-chevron-left);
}

#trendNextButton,
#calendarNextMonth {
  --icon: var(--icon-chevron-right);
}

.detail-hero-more,
.meal-feed-menu-button {
  --icon: var(--icon-more);
}

.meal-filter-close,
.photo-source-close,
.trend-detail-close,
.record-hashtag-chip-remove {
  --icon: var(--icon-close);
}

.detail-hero-back::before,
.subpage-back-button::before {
  width: 22px;
  height: 22px;
}

.record-hashtag-chip-remove::before {
  width: 12px;
  height: 12px;
}

.dashboard-preset-arrow,
.meal-filter-chevron,
.food-summary-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  overflow: hidden;
  color: inherit;
  font-size: 0;
  line-height: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-chevron-right) center / contain no-repeat;
  mask: var(--icon-chevron-right) center / contain no-repeat;
}

.dashboard-preset-arrow {
  color: var(--ink-3);
}

.meal-filter-chevron {
  width: 14px;
  height: 14px;
  -webkit-mask-image: var(--icon-chevron-down);
  mask-image: var(--icon-chevron-down);
  transition: transform var(--dur-med) var(--ease-spring);
}

.meal-filter-button[aria-expanded='true'] .meal-filter-chevron {
  transform: rotate(180deg);
}

/* ---------- 세그먼트 컨트롤 ----------
   끼니 구분(등록 화면·상세 기록 정보), 추이 조회 단위, 화면 모드. 선택 표시(.segmented-thumb) 한 개가
   선택한 칸으로 미끄러진다(layout.js setupSegmentedThumbs). 스크립트가 없어 has-segmented-thumb가 붙지 않으면
   선택한 버튼 배경으로 보여준다. */

/* 끼니 구분 */
.meal-type-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 4px;
  background: var(--surface-2);
}

.meal-type-options button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
}

/* 등록 화면 */
.log-view .record-meal-type-picker .meal-type-options {
  gap: 3px;
  border-radius: 16px;
}

.log-view .record-meal-type-picker .meal-type-options button {
  min-width: 0;
  min-height: 44px;
  padding: 0 2px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.log-view .record-meal-type-picker .meal-type-options button:active {
  transform: scale(0.95);
}

/* 상세 화면 기록 정보 */
.meal-record-info .meal-type-options {
  gap: 0;
  border-radius: var(--radius-control);
}

.meal-record-info .meal-type-options button {
  box-shadow: none;
  font-weight: var(--w-strong);
}

/* 선택한 끼니(선택 표시가 없을 때의 모양) */
.log-view .record-meal-type-picker .meal-type-options button.is-selected,
.meal-record-info .meal-type-options button.is-selected {
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--w-head);
}

.log-view .record-meal-type-picker .meal-type-options button.is-selected {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-ink) 12%, transparent);
}

/* 추이 조회 단위 */
:is(#mealTrends, #mealHistory) .trend-period-tabs {
  --segmented-radius: 999px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

:is(#mealTrends, #mealHistory) .trend-period-tabs button {
  min-width: 0;
  min-height: 36px;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: var(--w-label);
  white-space: nowrap;
  cursor: pointer;
}

:is(#mealTrends, #mealHistory) .trend-period-tabs button.is-selected {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-ink) 12%, transparent);
  font-weight: var(--w-strong);
}

@media (max-width: 360px) {
  #mealTrends .trend-period-tabs {
    width: 100%;
  }
}

/* 화면 모드(Issue #201) */
.theme-mode-control {
  --segmented-radius: calc(var(--radius-control) - 5px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.theme-mode-control.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-mode-control button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-control) - 5px);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: var(--w-label);
  cursor: pointer;
}

.theme-mode-control button[aria-pressed='true'] {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-weight: var(--w-strong);
}

/* 미끄러지는 선택 표시 */
.has-segmented-thumb {
  position: relative;
  isolation: isolate;
}

.segmented-thumb {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  border-radius: var(--segmented-radius, 12px);
  background: var(--surface);
  box-shadow:
    0 0 0 1px rgba(14, 17, 22, 0.04),
    0 1px 2px rgba(14, 17, 22, 0.08),
    0 4px 12px -4px rgba(14, 17, 22, 0.14);
  pointer-events: none;
  transition:
    transform var(--dur-slow) var(--ease-spring),
    width var(--dur-slow) var(--ease-spring),
    height var(--dur-slow) var(--ease-spring),
    opacity var(--dur-fast) var(--ease-standard);
}

.segmented-thumb.is-instant {
  transition: none;
}

.segmented-thumb.is-empty {
  opacity: 0;
}

.has-segmented-thumb > button {
  transition: color var(--dur-fast) var(--ease-standard);
}

/* 선택 표시가 있으면 선택한 버튼은 배경·테두리·그림자를 비운다. */
.theme-mode-control.has-segmented-thumb > button[aria-pressed='true'],
.log-view .record-meal-type-picker .meal-type-options.has-segmented-thumb > button.is-selected,
.meal-record-info .meal-type-options.has-segmented-thumb > button.is-selected,
:is(#mealTrends, #mealHistory) .trend-period-tabs.has-segmented-thumb > button.is-selected,
:is(#mealTrends, #mealHistory)
  .trend-period-tabs.has-segmented-thumb
  > button[aria-pressed='true'] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* ---------- 칩 ----------
   필터(끼니·해시태그)와 구입처 칩, 식사 시각·체중의 작은 알약 버튼. 중립 한 벌로, 선택은 잉크 테두리로
   보여주고 초록·복숭아 같은 의미 색은 쓰지 않는다. */

.meal-filter-panel span,
.meal-hashtag-chip,
.history-search-chips button,
.purchase-source-options button {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--w-strong);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.meal-filter-panel label:has(input:checked) span,
.meal-hashtag-chip.is-active,
.history-search-chips button.is-selected,
.purchase-source-options button.is-selected {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
}

/* 끼니 필터: 체크박스를 숨기고 칩으로 보여준다. 여러 개를 고르므로 체크 표시가 펼쳐지며 선택을 알린다. */
.meal-filter-panel label {
  position: relative;
  cursor: pointer;
}

.meal-filter-panel input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.meal-filter-panel input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.meal-filter-panel span::before {
  content: '';
  width: 0;
  height: 14px;
  margin-right: 0;
  background-color: currentColor;
  opacity: 0;
  -webkit-mask: var(--icon-check) center / 14px 14px no-repeat;
  mask: var(--icon-check) center / 14px 14px no-repeat;
  transition:
    width var(--dur-med) var(--ease-spring),
    margin var(--dur-med) var(--ease-spring),
    opacity var(--dur-fast) var(--ease-standard);
}

.meal-filter-panel label:has(input:checked) span::before {
  width: 14px;
  margin-right: 6px;
  opacity: 1;
}

/* 해시태그 필터 */
.meal-hashtag-filter {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.meal-hashtag-filter-title {
  font-size: 13px;
  color: var(--ink-2);
}

.meal-hashtag-filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meal-hashtag-filter-empty {
  color: var(--ink-2);
  font-size: 12px;
}

.meal-hashtag-chip-list {
  display: contents;
}

/* 구입처 */
.purchase-source-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 식사 시각·체중의 변경·입력·완료 */
.body-weight-toggle,
.body-weight-done {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.body-weight-toggle:hover,
.body-weight-done:hover {
  background: var(--success-soft);
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}

/* ---------- 접기·펼치기: 오른쪽 화살표가 돌고 내용이 부드럽게 열린다 ---------- */

.dashboard-nutrition-details summary {
  justify-content: space-between;
  gap: 10px;
}

.dashboard-nutrition-details summary::after {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  content: '';
}

.dashboard-nutrition-details[open] summary::after {
  transform: rotate(225deg);
}

.dashboard-nutrition-details > summary,
.nutrition-detail-disclosure > summary,
.food-edit-panel .food-nutrition-details > summary,
.food-template-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
}

:is(
    .dashboard-nutrition-details,
    .nutrition-detail-disclosure,
    .food-edit-panel .food-nutrition-details,
    .food-template-details
  )
  > summary::-webkit-details-marker {
  display: none;
}

:is(
    .dashboard-nutrition-details,
    .nutrition-detail-disclosure,
    .food-edit-panel .food-nutrition-details,
    .food-template-details
  )
  > summary::after {
  content: '';
  flex: 0 0 auto;
  margin-left: auto;
  width: 16px;
  height: 16px;
  /* 테두리를 45도 돌려 그리던 화살표(#194 검증 블록)를 선 아이콘 하나로 대신한다. */
  border: 0;
  transform: none;
  background-color: var(--ink-3);
  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
  mask: var(--icon-chevron-down) center / contain no-repeat;
  transition: transform var(--dur-med) var(--ease-spring);
}

:is(
    .dashboard-nutrition-details,
    .nutrition-detail-disclosure,
    .food-edit-panel .food-nutrition-details,
    .food-template-details
  )[open]
  > summary::after {
  transform: rotate(180deg);
}

@supports (interpolate-size: allow-keywords) {
  :is(
    .dashboard-nutrition-details,
    .nutrition-detail-disclosure,
    .food-edit-panel .food-nutrition-details,
    .food-template-details
  ) {
    interpolate-size: allow-keywords;
  }

  :is(
    .dashboard-nutrition-details,
    .nutrition-detail-disclosure,
    .food-edit-panel .food-nutrition-details,
    .food-template-details
  )::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size var(--dur-med) var(--ease-standard),
      opacity var(--dur-med) var(--ease-standard),
      content-visibility var(--dur-med) allow-discrete;
  }

  :is(
      .dashboard-nutrition-details,
      .nutrition-detail-disclosure,
      .food-edit-panel .food-nutrition-details,
      .food-template-details
    )[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* ---------- 홈 화면 ----------
   요약 카드 안(남은 칼로리·탄단지·칼로리 링), 끼니 슬롯, 연속 기록 배지·목표 칩, 피드 머리·필터 버튼, 피드 카드
   안(사진·칩·캡션·해시태그), 스크립트가 지우기 전의 날짜 선택기·요약. 카드 겉모습은 카드 구역에, 상세 화면과
   같이 쓰는 피드백 버튼·AI 조언·탄단지 점과 접기 구역(8.)에 얽힌 영양 상세 요약 줄은 원래 자리에 있다. */

@keyframes meal-check-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.dashboard-card.is-empty .dashboard-remaining,
.dashboard-card.is-empty .dashboard-macros {
  display: none;
}

.meal-status-name {
  align-self: center;
  line-height: 1.2;
}

.meal-status-state {
  line-height: 1.2;
}

.dashboard-heading,
.dashboard-remaining {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 4px;
}

.dashboard-heading span,
.dashboard-remaining span,
.dashboard-macros span {
  color: var(--ink-3);
}

.dashboard-preset-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  text-align: left;
}

.dashboard-preset-button span {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-preset-button .dashboard-preset-arrow {
  flex: 0 0 auto;
  overflow: visible;
  color: var(--ink-3);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.dashboard-preset-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.calorie-ring {
  --carbs-end: 0deg;
  --protein-end: 0deg;
  --fat-end: 0deg;
  --segment-gap: 1.6deg;
  --carbs-color: var(--carb);
  --protein-color: var(--protein);
  --fat-color: var(--fat);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
}

.calorie-ring-segments {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.calorie-ring-segments .ring-track {
  fill: none;
  stroke: var(--carb);
  stroke-width: 13.1;
}

.calorie-ring-segments .ring-segment {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linejoin: round;
}

.calorie-ring-segments .ring-segment-carbs {
  color: var(--carbs-color);
}

.calorie-ring-segments .ring-segment-protein {
  color: var(--protein-color);
}

.calorie-ring-segments .ring-segment-fat {
  color: var(--fat-color);
}

.calorie-ring::before,
.calorie-ring::after {
  position: absolute;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 50%;
  box-shadow:
    inset 0 0 8px color-mix(in srgb, var(--surface) 46%, transparent),
    0 0 8px color-mix(in srgb, var(--surface) 34%, transparent);
  content: '';
  pointer-events: none;
}

.calorie-ring::after {
  inset: 24%;
  display: none;
}

.calorie-ring.is-animating {
  animation: dashboardRingGlow 1900ms ease-in-out;
}

.calorie-ring div {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.calorie-ring strong {
  line-height: 1;
}

.calorie-ring span {
  color: var(--ink-3);
}

.dashboard-macros small b {
  color: var(--ink-2);
  font-weight: 800;
}

.dashboard-macros {
  display: grid;
  gap: 8px;
}

.dashboard-macros small {
  color: var(--ink-3);
  font-size: 11px;
  text-align: right;
}

.macro-progress {
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  box-shadow:
    inset 0 1px 3px color-mix(in srgb, var(--ink-2) 14%, transparent),
    inset 0 -1px 2px color-mix(in srgb, var(--surface) 72%, transparent),
    0 3px 9px color-mix(in srgb, var(--protein) 12%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.macro-progress span {
  display: block;
  width: 0%;
  border: 1px solid color-mix(in srgb, var(--line) 52%, transparent);
  background: var(--carb);
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--surface) 58%, transparent),
    0 1px 5px color-mix(in srgb, var(--carb) 24%, transparent);
  will-change: width;
  height: 100%;
  border-radius: inherit;
  transition: width 400ms var(--ease-out);
}

.macro-protein .macro-progress span {
  background: var(--protein);
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--surface) 58%, transparent),
    0 1px 5px color-mix(in srgb, var(--protein) 24%, transparent);
}

.macro-fat .macro-progress span {
  background: var(--fat);
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, var(--surface) 58%, transparent),
    0 1px 5px color-mix(in srgb, var(--danger) 22%, transparent);
}

.meal-filter-button {
  position: relative;
  place-items: center;
  margin-left: auto;
  cursor: pointer;
}

.meal-filter-button:hover {
  border-color: var(--brand);
}

.meal-filter-button:focus-visible {
  outline: 2px solid var(--protein);
  outline-offset: 2px;
}

.meal-filter-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 9px;
  font-weight: 800;
}

.meal-filter-badge[hidden] {
  display: none;
}

.history-header input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 9px;
  box-sizing: border-box;
  display: block;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.history-header input:focus {
  border-color: var(--success-border);
  outline: 2px solid color-mix(in srgb, var(--success-border) 18%, transparent);
}

.history-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}

.calendar-toolbar button:focus-visible,
.calendar-day:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--protein-border) 65%, transparent);
  outline-offset: 2px;
}

.history-calendar {
  padding-top: 2px;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  margin-bottom: 10px;
  text-align: center;
}

.calendar-toolbar button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.calendar-toolbar button:hover {
  background: var(--surface-2);
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.calendar-weekdays {
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: 11px;
  text-align: center;
}

.calendar-day,
.calendar-day-blank {
  min-width: 0;
  aspect-ratio: 1;
}

.calendar-day {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.calendar-day:hover {
  background: var(--surface-2);
}

.calendar-day.is-today {
  border-color: var(--brand-soft);
}

.calendar-day.is-selected {
  border-color: var(--cta);
  background: var(--cta);
  color: var(--cta-ink);
}

.calendar-day i {
  position: absolute;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fat);
}

.calendar-day.is-selected i {
  background: var(--carb-soft);
}

.history-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.history-header p {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 14px;
}

.history-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.history-summary div {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-2);
}

.history-summary span {
  color: var(--ink-3);
  font-size: 12px;
}

.history-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.history-empty {
  color: var(--ink-3);
}

.history-feed-panel .history-header {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 8px;
  align-items: center;
  padding: 0 2px;
}

/* 이슈 #546: 식단 기록 화면(달력)으로 가는 둥근 버튼. 옆 필터 버튼과 높이·테두리를 맞춘다. */
.history-calendar-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  transition:
    transform var(--dur-med) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.history-calendar-link:hover {
  border-color: var(--brand);
  color: var(--ink);
}

.history-calendar-link:active {
  transform: scale(0.94);
  transition-duration: var(--dur-instant);
}

.history-feed-panel .history-header h2 {
  font-size: 22px;
}

.history-feed-panel .history-header p {
  margin-top: 0;
}

.history-feed-panel .history-list {
  gap: 16px;
  margin-top: 0;
  padding-bottom: 84px;
}

.meal-feed-menu-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 900;
  padding: 0;
}

.meal-feed-menu-button:hover,
.meal-feed-menu-button[aria-expanded='true'] {
  background: var(--surface-2);
}

.meal-feed-open {
  display: grid;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.meal-feed-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.meal-feed-photo.is-placeholder {
  aspect-ratio: 4 / 3;
}

/* 사진 칸은 받기 전부터 사진 비율로 자리를 잡는다(core.js feedPhotoSizeAttribute). 사진은 그 칸을 채운다. */
.meal-feed-photo[data-photo-size] {
  aspect-ratio: var(--photo-ratio, 4 / 3);
}

.meal-feed-photo[data-photo-size] img,
.meal-feed-photo[data-photo-size] video.meal-feed-video {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

.meal-feed-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-position: center;
}

.meal-feed-photo video.meal-feed-video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: var(--media-surface);
}

.meal-feed-photo-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  animation: photo-placeholder-pulse 1.1s ease-in-out infinite alternate;
}

.meal-feed-photo-empty {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 24px;
  background: var(--protein-soft);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

.meal-feed-photo-sample-label {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: calc(100% - 40px);
  color: var(--media-ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  text-shadow:
    0 2px 4px color-mix(in srgb, var(--shadow-ink) 92%, transparent),
    0 0 12px color-mix(in srgb, var(--shadow-ink) 70%, transparent);
  transform: translate(-50%, -50%);
}

.meal-feed-photo.is-preset-sample {
  aspect-ratio: 4 / 3;
}

.meal-feed-photo.is-preset-sample img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: none;
}

.meal-feed-photo-loader {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
}

.meal-feed-photo-loader i {
  width: 24px;
  height: 24px;
  border: 3px solid var(--protein-border);
  border-radius: 50%;
  animation: meal-feed-photo-spin 0.85s linear infinite;
}

.meal-feed-photo:not(.is-loading) .meal-feed-photo-loader {
  display: none;
}

.meal-feed-photo-metadata {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--media-ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 86%, transparent);
}

.meal-feed-photo-metadata strong {
  font-size: 13px;
}

.meal-feed-video-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--scrim);
  font-weight: 600;
}

.meal-feed-photo.is-placeholder:not(.is-preset-sample) .meal-feed-photo-metadata {
  color: var(--ink-2);
  text-shadow: none;
}

.meal-feed-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px;
}

.meal-feed-caption strong {
  min-width: 0;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}

.meal-feed-caption span {
  align-self: start;
  color: var(--ink-2);
  font-weight: 800;
  white-space: nowrap;
}

.meal-feed-extras {
  display: grid;
  gap: 8px;
  padding: 0 12px 10px;
}

.meal-feed-comment {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meal-feed-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meal-feed-hashtag {
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.meal-feed-hashtag.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--ink-2);
}

.history-feed-sentinel {
  min-height: 24px;
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 380px) {
  .dashboard-macros,
  .macro-ring-legend,
  .history-summary,
  .history-header {
    grid-template-columns: 1fr;
  }
}

.dashboard-heading strong,
.dashboard-remaining strong {
  font-size: 22px;
  min-width: 0;
}

.history-skeleton {
  display: grid;
  gap: 14px;
}

.history-skeleton-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.history-skeleton-card .skeleton-shimmer {
  height: 14px;
}

.history-skeleton-card .skeleton-shimmer.tall {
  height: 96px;
}

.history-skeleton-card .skeleton-shimmer.short {
  width: 42%;
}

/* #197 dashboard summary, streak, meal slots, and feed filter */
.dashboard-streak-slot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  min-width: 116px;
  min-height: 44px;
}

.dashboard-streak-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 116px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  border: 0;
  background: var(--surface);
  box-shadow: var(--elev-card);
}

.dashboard-streak-badge[hidden] {
  display: none;
}

/* 상단바에 검색 버튼이 함께 있어(#546) 좁은 화면은 '연속', 더 좁으면 '일'까지 줄여 로고와 겹치지 않게 한다. */
@media (max-width: 379px) {
  .dashboard-streak-slot,
  .dashboard-streak-badge {
    min-width: 0;
  }

  .dashboard-streak-badge {
    gap: 4px;
    padding: 0 10px;
  }

  .dashboard-streak-suffix {
    display: none;
  }
}

@media (max-width: 359px) {
  .dashboard-streak-unit {
    display: none;
  }
}

.dashboard-streak-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.dashboard-streak-badge.is-current .dashboard-streak-icon {
  color: var(--brand);
}

.dashboard-streak-badge.is-yesterday .dashboard-streak-icon {
  color: var(--ink-4);
}

.dashboard-streak-badge.is-emphasized {
  animation: dashboardStreakEmphasis 700ms var(--ease-spring);
}

.dashboard-heading-home {
  align-items: flex-start;
}

.dashboard-date-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.2;
}

.dashboard-date-heading p {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}

.dashboard-goal-chip {
  justify-content: center;
  min-height: 40px;
  max-width: 54%;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
  background: var(--surface);
}

.dashboard-goal-chip #dashboardGoal {
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-intake-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 12px;
  min-height: 128px;
}

body[data-page='dashboard'] .dashboard-remaining {
  display: grid;
  justify-content: start;
  gap: 5px;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.dashboard-remaining > span {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}

body[data-page='dashboard'] .dashboard-remaining strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
  color: var(--ink);
  font-size: clamp(23px, 7vw, 32px);
  line-height: 1.1;
}

#dashboardRemainingUnit {
  font-size: 14px;
  font-weight: 700;
}

.calorie-ring {
  --calorie-progress: 0%;
  width: 120px;
  max-width: 120px;
  margin: 0;
  background: conic-gradient(
    var(--brand) 0 var(--calorie-progress),
    var(--line) var(--calorie-progress) 100%
  );
  box-shadow: none;
}

.calorie-ring-segments {
  display: none;
}

.calorie-ring::before {
  inset: 13%;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: none;
}

.calorie-ring div {
  gap: 4px;
}

.calorie-ring strong {
  color: var(--ink);
  font-size: 21px;
}

.calorie-ring span {
  font-size: 11px;
  white-space: nowrap;
}

.dashboard-goal-intake {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: -8px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}

.dashboard-goal-intake strong {
  color: var(--ink-2);
  font-weight: 800;
}

body[data-page='dashboard'] .dashboard-macros {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.macro-stat {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--surface-2);
}

.macro-stat-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.macro-stat-heading i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.macro-stat > strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.macro-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}

.dashboard-nutrition-details {
  border-top: 1px solid var(--line);
}

.dashboard-nutrition-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 2px 4px 8px;
  color: var(--ink-3);
  font-size: 12px;
}

.dashboard-nutrition-detail-grid > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.dashboard-nutrition-detail-grid strong {
  color: var(--ink-2);
  white-space: nowrap;
}

.dashboard-meal-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.dashboard-meal-section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
}

.dashboard-meal-section-heading span {
  color: var(--ink-3);
  font-size: 11px;
}

.dashboard-meal-status {
  /* 이슈 #395: 기본 끼니 5개가 한 화면에 다 들어가지 않아 좌우로 넘겨 본다.
     세 장을 한 화면에 두되 카드 폭을 조금 줄여 오른쪽에 다음 카드가 걸쳐 보이게 한다(넘길 수 있다는 표시). */
  --meal-status-gap: 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--meal-status-gap)) / 3 - 8px);
  align-items: stretch;
  gap: var(--meal-status-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

/* 넘기는 줄이라 스크롤 막대는 감춘다(체중·시각 휠과 같은 방식). */
.dashboard-meal-status::-webkit-scrollbar {
  display: none;
}

.dashboard-meal-status[hidden] {
  display: none;
}

.dashboard-meal-status-wrap {
  position: relative;
  /* 화살표가 카드 줄 밖으로 걸치는 정도(px). 화면 가장자리는 1px 남기고 넘지 않게 잘라 낸다(좁은 화면). */
  --meal-status-nav-overhang: 17px;
}

/* 이슈 #395: 좌우 이동 버튼은 카드 위에 겹쳐 두고 카드의 위아래 중앙에 맞춘다.
   줄 밖으로 조금 걸쳐 카드 내용과 겹침을 줄인다. */
.meal-status-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-float);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-float);
  color: var(--ink);
  cursor: pointer;
  place-items: center;
  transform: translateY(-50%);
  transition: transform var(--dur-fast) var(--ease-spring);
}

.meal-status-nav.is-prev {
  left: max(calc(-1 * var(--meal-status-nav-overhang)), calc((100% - 100vw) / 2 + 1px));
}

.meal-status-nav.is-next {
  right: max(calc(-1 * var(--meal-status-nav-overhang)), calc((100% - 100vw) / 2 + 1px));
}

.meal-status-nav[hidden] {
  display: none;
}

.meal-status-nav:active {
  transform: translateY(-50%) scale(0.9);
}

.meal-status-nav:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.dashboard-meal-slot {
  display: grid;
  align-content: start;
  grid-template-rows: auto auto auto;
  justify-items: stretch;
  gap: 6px;
  min-width: 0;
  min-height: 120px;
  padding: 7px;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.dashboard-meal-slot.is-unregistered {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
}

.meal-status-photo {
  display: grid;
  width: 100%;
  aspect-ratio: 1.45;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--brand);
}

.meal-status-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fade-in var(--dur-slow) var(--ease-standard) both;
}

.meal-status-name {
  grid-row: auto;
  grid-column: auto;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.meal-status-state {
  grid-row: auto;
  grid-column: auto;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-meal-slot.is-registered .meal-status-state {
  color: var(--ink-2);
}

.meal-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  height: auto;
  min-width: 84px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  border-color: var(--hairline);
}

.meal-feed-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 12px;
}

.meal-feed-macros span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
}

.meal-feed-macros i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

@media (max-width: 359px) {
  .dashboard-intake-summary {
    grid-template-columns: minmax(0, 1fr) 102px;
    min-height: 100px;
  }

  body[data-page='dashboard'] .dashboard-macros {
    gap: 6px;
  }

  .macro-stat {
    gap: 6px;
    padding: 8px 6px;
  }

  .calorie-ring {
    width: 102px;
  }

  .dashboard-meal-status {
    --meal-status-gap: 6px;
  }

  .dashboard-meal-slot {
    min-height: 110px;
    padding: 6px;
  }

  .meal-status-state {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-streak-badge.is-emphasized {
    animation: none;
  }

  .macro-progress span {
    transition: none;
  }
}

.preset-macro-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.preset-macro-bar .macro-carbs {
  background: var(--carb);
}

.preset-macro-bar .macro-protein {
  background: var(--protein);
}

.preset-macro-bar .macro-fat {
  background: var(--fat);
}

.preset-macro-legend {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-2);
}

.preset-macro-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.preset-macro-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.preset-macro-legend .legend-carbs {
  background: var(--carb);
}

.preset-macro-legend .legend-protein {
  background: var(--protein);
}

.preset-macro-legend .legend-fat {
  background: var(--fat);
}

body[data-page='dashboard'] .dashboard-view {
  gap: 28px;
}

body[data-page='dashboard'] .dashboard-heading-home {
  align-items: flex-end;
  margin: 8px 4px 0;
}

body[data-page='dashboard'] .dashboard-date-heading h1 {
  font-size: 30px;
  font-weight: var(--w-display);
  letter-spacing: var(--track-title);
}

body[data-page='dashboard'] .dashboard-goal-chip {
  max-width: 58%;
  font-size: 13px;
  font-weight: var(--w-strong);
}

body[data-page='dashboard'] .dashboard-remaining #dashboardRemaining {
  color: var(--ink);
  font-weight: var(--w-display);
  letter-spacing: var(--track-display);
  line-height: 1;
  font-size: clamp(32px, 11vw, 48px);
}

body[data-page='dashboard'] #dashboardGoal {
  font-size: 13px;
  font-weight: var(--w-strong);
}

body[data-page='dashboard'] .meal-feed-macros span {
  font-weight: var(--w-label);
}

body[data-page='dashboard'] #dashboardRemainingUnit {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: var(--w-label);
}

body[data-page='dashboard'] #dashboardPercent {
  color: var(--ink);
  font-size: 22px;
  font-weight: var(--w-display);
}

body[data-page='dashboard'] .macro-stat {
  gap: 10px;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

body[data-page='dashboard'] .macro-stat-heading > span {
  font-size: 13px;
  font-weight: var(--w-label);
}

/* 값과 목표를 한 줄에 넣는다. 숫자가 길어지면 ' / '에서만 줄이 바뀌고, 숫자와 단위는 붙어 있어야
   한다(.macro-amount). 한 줄에 다 담기지 않는 값은 core.js가 재어 둔 배율(--macro-fit)만큼 글자를
   줄여, 세 열의 줄 수가 달라져 진행 막대가 어긋나는 일을 막는다. */
body[data-page='dashboard'] .macro-stat > strong {
  font-weight: var(--w-strong);
  font-size: calc(clamp(13px, 3.9vw, 17px) * var(--macro-fit, 1));
  white-space: normal;
}

body[data-page='dashboard'] .macro-stat > strong > .macro-amount {
  white-space: nowrap;
}

body[data-page='dashboard'] .macro-stat > strong .macro-value {
  color: var(--ink);
}

body[data-page='dashboard'] .macro-stat > strong .macro-unit {
  color: var(--ink-3);
  font-weight: var(--w-body);
  font-size: max(var(--fs-caption-min), 0.82em);
}

body[data-page='dashboard'] .dashboard-meals-panel {
  display: grid;
  gap: 14px;
}

body[data-page='dashboard'] .dashboard-meal-section-heading {
  margin: 0 2px;
}

body[data-page='dashboard'] .dashboard-meal-section-heading h2 {
  font-size: 21px;
  font-weight: var(--w-head);
}

body[data-page='dashboard'] .dashboard-meal-section-heading span {
  font-size: 13px;
}

body[data-page='dashboard'] .dashboard-meal-status {
  --meal-status-gap: 12px;
}

body[data-page='dashboard'] .dashboard-meal-slot {
  align-content: start;
  justify-items: start;
  gap: 10px;
  min-height: 160px;
  padding: 14px;
  border-style: solid;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  position: relative;
}

body[data-page='dashboard'] .dashboard-meal-slot.is-unregistered {
  border-color: var(--line);
  background: var(--surface-2);
}

body[data-page='dashboard'] .meal-status-photo {
  width: 56px;
  height: 56px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-soft);
}

body[data-page='dashboard'] .meal-status-name {
  min-width: 0;
  font-size: 15px;
  font-weight: var(--w-strong);
  overflow-wrap: anywhere;
}

body[data-page='dashboard'] .meal-status-state {
  overflow: visible;
  font-size: 13px;
  font-weight: var(--w-body);
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}

body[data-page='dashboard'] .dashboard-card.is-empty .dashboard-remaining,
body[data-page='dashboard'] .dashboard-card.is-empty .dashboard-macros {
  display: grid;
}

body[data-page='dashboard'] .dashboard-card.is-empty .dashboard-intake-summary {
  grid-template-columns: minmax(0, 1fr) 120px;
}

@media (max-width: 380px) {
  body[data-page='dashboard'] .macro-stat-heading > span {
    gap: 4px;
    font-size: 13px;
  }

  body[data-page='dashboard'] .dashboard-meal-slot {
    min-height: 154px;
    padding: 10px;
  }

  body[data-page='dashboard'] .meal-status-photo {
    width: 48px;
    height: 48px;
  }
}

/* Keep the three macro columns inside the card at every width (mockup: no column dividers). */
body[data-page='dashboard'] .macro-stat + .macro-stat {
  border-left: 0;
}

.meal-feed-photo.is-preset-sample {
  background: var(--surface-2);
}

/* 피드 카드 사진 위 칩은 유리 재질 */
.meal-feed-photo-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  max-width: calc(100% - 76px);
  overflow: hidden;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--media-ink);
  font-size: 13px;
  font-weight: var(--w-strong);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(14, 17, 22, 0.42);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}

.meal-feed-card.has-photo-header > .meal-feed-menu-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 44px;
  height: 44px;
  background: var(--media-control-bg);
  box-shadow: var(--media-control-shadow);
  color: var(--media-control-ink);
}

.meal-feed-card.has-photo-header > .meal-feed-menu-button:hover,
.meal-feed-card.has-photo-header > .meal-feed-menu-button[aria-expanded='true'] {
  background: var(--media-control-bg);
}

/* Recorded meal slots carry a check badge (#197 mockup). */
body[data-page='dashboard'] .meal-status-check {
  position: absolute;
  top: 12px;
  right: 12px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: var(--surface);
}

/* 끼니 슬롯: 기록한 칸의 체크 배지가 작게 튀어 오르며 나타난다. */
body[data-page='dashboard'] .dashboard-meal-slot.is-registered .meal-status-check {
  display: grid;
  animation: meal-check-pop var(--dur-slow) var(--ease-spring-pop) both;
}

@media (max-width: 380px) {
  body[data-page='dashboard'] .meal-status-check {
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
  }
}

body[data-page='dashboard'] .dashboard-intake-summary {
  display: contents;
}

body[data-page='dashboard'] #calorieRing {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  align-self: center;
}

body[data-page='dashboard'] .dashboard-goal-intake {
  grid-column: 1;
  grid-row: 2;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 3px;
  margin: -8px 0 0;
}

body[data-page='dashboard'] .macro-progress,
body[data-page='dashboard'] .macro-progress span {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-page='dashboard'] .dashboard-nutrition-details {
  grid-column: 1 / -1;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.dashboard-goal-chip,
.meal-filter-button {
  box-shadow: none;
}

/* 칼로리 링: 둥근 끝의 SVG 링이 0에서 오늘 값까지 차오른다(core.js renderCalorieRing). */
#calorieRing {
  position: relative;
  background: none;
}

#calorieRing::before {
  display: none;
}

.calorie-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.calorie-ring-track,
.calorie-ring-value {
  fill: none;
  stroke-width: 13;
}

.calorie-ring-track {
  stroke: color-mix(in srgb, var(--ink) 7%, var(--surface));
}

.calorie-ring-value {
  stroke: url(#calorieRingGradient);
  stroke-dasharray: var(--calorie-dash, 0) 100;
  stroke-linecap: round;
}

.calorie-ring.is-zero .calorie-ring-value {
  opacity: 0;
}

.calorie-ring-stop-start {
  stop-color: color-mix(in srgb, var(--brand) 72%, #ffd9b8);
}

.calorie-ring-stop-end {
  stop-color: var(--brand);
}

#calorieRing > div {
  position: relative;
}

/* 탄단지 막대: 8px 평면 막대(#194). 안쪽 그림자·테두리·색 번짐을 걷어낸다. */
body[data-page='dashboard'] .macro-progress {
  border: 0;
  background: color-mix(in srgb, var(--ink) 7%, var(--surface));
  box-shadow: none;
}

body[data-page='dashboard'] .macro-progress span {
  border: 0;
  box-shadow: none;
  transition: none;
}

body[data-page='dashboard'] .dashboard-meal-slot.is-registered {
  border-color: transparent;
  box-shadow: var(--elev-card);
}

body[data-page='dashboard'] .dashboard-meal-slot.is-unregistered {
  box-shadow: none;
}

/* 피드 카드: 사진은 불러오면 부드럽게 드러난다. */
.meal-feed-photo {
  background: var(--surface-2);
}

.meal-feed-photo img,
.meal-feed-photo video.meal-feed-video {
  transition:
    opacity var(--dur-slow) var(--ease-standard),
    transform 700ms var(--ease-out);
}

.meal-feed-photo.is-loading img,
.meal-feed-photo.is-loading video.meal-feed-video {
  opacity: 0;
  transform: scale(1.03);
}

.meal-feed-photo-placeholder {
  background: var(--surface-2);
}

.meal-feed-photo-loader {
  color: var(--ink-3);
  text-shadow: none;
}

.meal-feed-photo-loader i {
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  border-top-color: var(--ink-3);
}

/* 피드 카드 누름 */
.meal-feed-card:has(> .meal-feed-open:active) {
  scale: 0.985;
  transition-duration: var(--dur-instant);
}

/* ---------- 들어올 때: 짧은 거리, 빠른 감속, 처음 한 번만 ---------- */

[data-reveal].is-revealed,
.anim-reveal.is-revealed,
.anim-stagger.is-revealed > * {
  /* 끝난 뒤 transform을 남기지 않아 시트·팝업이 부모 쌓임 맥락에 갇히지 않게 한다. */
  animation-name: reveal-rise;
  animation-duration: var(--dur-slow);
  animation-timing-function: var(--ease-enter);
  animation-fill-mode: backwards;
}

.anim-stagger.is-revealed > * {
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .meal-feed-card {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 24%;
    }
  }
}

/* ---------- 화면 전환: 교차 문서 View Transitions ---------- */

/* 방향(peer·push·pop)은 components/page-transitions.js가 pagereveal에서 정한다.
   opt-in(@view-transition { navigation: auto })은 여기 두지 않고 각 화면 <head> 맨 앞 인라인 <style>에 둔다.
   이 파일은 head 스크립트(theme-init.js 등) 뒤에 불러오므로, 그 스크립트가 스타일을 먼저 계산하면
   Chrome이 "opt-in disabled"로 전환을 취소했다(로컬 통합 서버에서 약 절반, 인라인으로 옮긴 뒤 16/16 정상). */

/* peer(탭끼리): 두 스냅샷을 같은 시간·곡선으로 교차 페이드한다. 이전 화면이 먼저 0이 되고 새 화면이
   늦게 들어오면 그 사이 합이 1보다 작아져 화면이 비치며 깜빡인다(이슈 #481). 새 화면은 살짝 커지며 들어온다. */
::view-transition-old(root) {
  animation: vt-fade-out var(--dur-med) var(--ease-standard) both;
}

::view-transition-new(root) {
  animation: vt-fade-through-in var(--dur-med) var(--ease-standard) both;
}

/* push: 상세·기록으로 들어가면 오른쪽에서, pop: 돌아오면 왼쪽에서 들어온다. */
:root:active-view-transition-type(push)::view-transition-old(root) {
  animation: vt-slide-out-left 140ms var(--ease-standard) both;
}

:root:active-view-transition-type(push)::view-transition-new(root) {
  animation: vt-slide-in-right var(--dur-page) var(--ease-enter) 60ms both;
}

:root:active-view-transition-type(pop)::view-transition-old(root) {
  animation: vt-slide-out-right 140ms var(--ease-standard) both;
}

:root:active-view-transition-type(pop)::view-transition-new(root) {
  animation: vt-slide-in-left var(--dur-page) var(--ease-enter) 60ms both;
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes vt-fade-through-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

@keyframes vt-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}

@keyframes vt-slide-out-left {
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

@keyframes vt-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}

@keyframes vt-slide-out-right {
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

@keyframes vt-fab-out {
  to {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes vt-fab-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* 상단바·탭바·카메라 버튼은 양쪽 화면에 있으면 제자리에 둔다. */
::view-transition-group(app-topbar),
::view-transition-group(app-tabbar),
::view-transition-group(app-fab),
::view-transition-group(app-tab-home),
::view-transition-group(app-tab-trends),
::view-transition-group(app-tab-record),
::view-transition-group(app-tab-achievements),
::view-transition-group(app-tab-profile) {
  animation-duration: var(--dur-page);
  animation-timing-function: var(--ease-standard);
}

/* 탭바 스냅샷의 유리 배경을 둥글게 자르고, 캡처에 포함됐던 외부 그림자는 그룹에 다시 그린다. */
::view-transition-group(app-tabbar) {
  overflow: clip;
  border-radius: 30px;
  box-shadow: var(--elev-float);
}

/* 한쪽 화면에만 있으면(상세에는 상단바·카메라 버튼이 없다) 짧게 빠지거나 들어온다. */
::view-transition-old(app-topbar):only-child {
  animation: vt-fade-out 100ms linear both;
}

::view-transition-new(app-topbar):only-child {
  animation: vt-fade-in 200ms var(--ease-enter) 80ms both;
}

::view-transition-old(app-fab):only-child {
  animation: vt-fab-out 160ms var(--ease-exit) both;
}

::view-transition-new(app-fab):only-child {
  animation: vt-fab-in var(--dur-slow) var(--ease-spring-pop) 80ms both;
}

/* hold-topbar: 두 화면 모두 상단바를 보이거나, 새 화면의 첫 프레임에 상단바·로고가 아직 최종 모습이
   아니었다(page-transitions.js 이슈 #397). 상단바는 layout.js가 넣고 로고 아이콘은 그 뒤에 디코드되며,
   WebKit은 새 화면 상단바 스냅샷을 비워 그린다. 그 스냅샷을 이전 화면과 교차 페이드하면 로고가 흐려지거나
   사라지므로, 이전 화면 상단바를 전환 끝까지 그대로 두고 새 화면 상단바는 전환이 끝난 뒤 드러낸다.
   위의 :only-child 규칙보다 뒤에 둔다. */
:root:active-view-transition-type(hold-topbar) .app > .topbar {
  visibility: hidden;
}

:root:active-view-transition-type(hold-topbar)::view-transition-old(app-topbar),
:root:active-view-transition-type(hold-topbar)::view-transition-old(app-topbar):only-child {
  animation: none;
}

:root:active-view-transition-type(hold-topbar)::view-transition-new(app-topbar),
:root:active-view-transition-type(hold-topbar)::view-transition-new(app-topbar):only-child {
  animation: none;
  opacity: 0;
}

/* 탭바 배경은 폭만 늘고 줄며, 탭 글자는 늘어나지 않고 위치만 옮긴다. */
::view-transition-old(app-tabbar),
::view-transition-new(app-tabbar) {
  height: 100%;
}

::view-transition-old(app-tab-home),
::view-transition-new(app-tab-home),
::view-transition-old(app-tab-trends),
::view-transition-new(app-tab-trends),
::view-transition-old(app-tab-record),
::view-transition-new(app-tab-record),
::view-transition-old(app-tab-achievements),
::view-transition-new(app-tab-achievements),
::view-transition-old(app-tab-profile),
::view-transition-new(app-tab-profile) {
  height: 100%;
  object-fit: none;
}

/* late-chrome: 새 화면의 탭바가 첫 프레임에 없었다(page-transitions.js). 이전 탭바를 전환이 끝날 때까지
   그대로 두고, 새 탭바는 전환이 끝난 뒤 드러나게 해서 두 탭바가 겹쳐 보이지 않게 한다. */
:root:active-view-transition-type(late-chrome) .app-footer {
  visibility: hidden;
}

:root:active-view-transition-type(late-chrome)::view-transition-old(app-tabbar):only-child,
:root:active-view-transition-type(late-chrome)::view-transition-old(app-tab-home):only-child,
:root:active-view-transition-type(late-chrome)::view-transition-old(app-tab-trends):only-child,
:root:active-view-transition-type(late-chrome)::view-transition-old(app-tab-record):only-child,
:root:active-view-transition-type(late-chrome)::view-transition-old(
    app-tab-achievements
  ):only-child,
:root:active-view-transition-type(late-chrome)::view-transition-old(app-tab-profile):only-child,
:root:active-view-transition-type(late-chrome)::view-transition-old(app-tab-indicator):only-child,
:root:active-view-transition-type(late-chrome)::view-transition-old(app-fab):only-child {
  animation: none;
}

/* 선택 표시는 새 탭 위치로 미끄러진다. 글자 위를 지나도 가리지 않게 곱하기(다크는 스크린)로 겹친다. */
::view-transition-group(app-tab-indicator) {
  animation-duration: var(--dur-slow);
  animation-timing-function: var(--ease-spring);
  mix-blend-mode: multiply;
}

::view-transition-old(app-tab-indicator),
::view-transition-new(app-tab-indicator) {
  height: 100%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light'])::view-transition-group(app-tab-indicator) {
    mix-blend-mode: screen;
  }
}

:root[data-theme='dark']::view-transition-group(app-tab-indicator) {
  mix-blend-mode: screen;
}

/* 공유 요소(meal-hero): 누른 피드 사진이 상세 사진 헤더 자리·크기로 커진다. 카드(세로)와 헤더(가로)의
   비율이 달라도 늘어나지 않게 잘라 채운다(넘친 부분은 자름). 카드 스냅숏은 사진 전체라 어느 크기로 잘라도
   맞으므로 이동하는 동안은 그대로 두고, 끝 무렵에만 헤더 스냅숏과 바꿔 두 사진이 어긋나 겹쳐 보이지 않게 한다.
   사진 위 칩은 그때 함께 빠진다. 기본 교차 페이드(plus-lighter 섞기)는 두어 바뀌는 동안 어두워지지 않게 한다. */
::view-transition-group(meal-hero) {
  animation-duration: var(--dur-page);
  animation-timing-function: var(--ease-standard);
}

::view-transition-old(meal-hero),
::view-transition-new(meal-hero) {
  height: 100%;
  overflow: clip;
  object-fit: cover;
  animation-duration: calc(var(--dur-page) * 0.45);
  animation-delay: calc(var(--dur-page) * 0.55);
  animation-timing-function: linear;
}

/* 상세 화면이 대체 헤더를 그리지 못했으면(저장소 차단 등) 사진만 제자리에서 짧게 빠진다. */
::view-transition-old(meal-hero):only-child {
  animation: vt-fade-out 110ms linear both;
}

/* ---------- 움직임 줄이기 ---------- */

/* 애니메이션·전환 시간은 위쪽 전역 규칙(prefers-reduced-motion: reduce)이 0.01ms로 줄이고,
   화면 전환은 @view-transition을 no-preference에서만 켠다. 전역 규칙이 닿지 않는 접힘 내용만 여기서 끈다. */
@media (prefers-reduced-motion: reduce) {
  :is(
    .dashboard-nutrition-details,
    .nutrition-detail-disclosure,
    .food-edit-panel .food-nutrition-details,
    .food-template-details
  )::details-content {
    transition-duration: 0.01ms;
  }
}

/* #303: 목표 안내와 문항 입력의 여백·진행 상태 */
.goal-wizard-questions:not([hidden]) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.goal-wizard-intro:not([hidden]) {
  display: grid;
  align-content: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  margin: auto;
  padding: 20px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.goal-wizard-intro-eyebrow {
  margin: 0;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 800;
}

.goal-wizard-intro h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(25px, 7vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.goal-wizard-intro > p:not(.goal-wizard-intro-eyebrow, .goal-wizard-intro-status) {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.goal-wizard-intro-actions {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.goal-wizard-intro-actions button {
  min-width: 0;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.goal-wizard-intro-actions #goalWizardStartButton {
  border-color: transparent;
  background: var(--cta);
  color: var(--cta-ink);
}

.goal-wizard-intro-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.goal-wizard-intro-status {
  min-height: 18px;
  margin: 0;
  color: var(--danger-strong);
  font-size: 13px;
}

.goal-wizard-completion {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.goal-wizard-bubble {
  overflow-wrap: anywhere;
}

.goal-wizard-bubble small {
  overflow-wrap: anywhere;
}

#goalWizardMode .personal-goal-input-grid {
  gap: 12px;
}

#goalWizardMode .personal-goal-input-grid label {
  gap: 8px;
  min-width: 0;
  line-height: 1.45;
}

#goalWizardMode .personal-goal-input-grid input,
#goalWizardMode .personal-goal-input-grid select,
#goalWizardMode [data-goal-duration-editor] select {
  box-sizing: border-box;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: var(--surface);
  color: var(--ink);
  line-height: 1.4;
}

#goalWizardMode [data-goal-duration-editor] select {
  min-height: 50px;
}

.wizard-optional-label {
  margin-left: 4px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
}

.wizard-optional-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.wizard-optional-choice input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--brand);
}

.wizard-example-info {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

#goalWizardSkipButton {
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

#goalWizardSkipButton[hidden] + #goalWizardNextButton {
  grid-column: 2 / -1;
}

#goalWizardBackButton[hidden] ~ #goalWizardNextButton {
  grid-column: 1 / -1;
}

@media (max-width: 360px) {
  .goal-wizard {
    padding-right: 14px;
    padding-left: 14px;
  }

  #goalWizardMode .wizard-body-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #goalWizardMode .body-metrics-height-span {
    grid-column: auto;
  }

  #goalWizardQuestions .goal-wizard-nav {
    grid-template-columns: minmax(62px, 0.8fr) minmax(66px, 0.9fr) minmax(104px, 1.3fr);
    gap: 6px;
  }

  #goalWizardQuestions .goal-wizard-nav button {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px;
  }
}

/* 이슈 #157: 화면 상단 공지(service_notices). 종류별 색은 의미 토큰(파랑 안내·노랑 점검·빨강 장애)을 쓴다. */
.service-notice {
  --notice-soft: var(--protein-soft);
  --notice-border: var(--protein-border);
  --notice-strong: var(--protein-strong);
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
  gap: 8px;
  width: min(100% - 24px, 720px);
  margin: 10px auto 0;
  padding: 10px 8px 10px 12px;
  border: 1px solid var(--notice-border);
  border-radius: var(--radius-control);
  background: var(--notice-soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.service-notice.is-maintenance {
  --notice-soft: var(--carb-soft);
  --notice-border: var(--carb-border);
  --notice-strong: var(--carb-strong);
}

.service-notice.is-incident {
  --notice-soft: var(--danger-soft);
  --notice-border: var(--danger-border);
  --notice-strong: var(--danger-strong);
}

.service-notice-label {
  flex: none;
  color: var(--notice-strong);
  font-weight: var(--w-strong);
}

.service-notice-message {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.service-notice-link {
  flex: none;
  color: var(--notice-strong);
  font-weight: var(--w-strong);
}

.service-notice-close {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -4px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.service-notice-close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.goal-refresh-status {
  margin: 12px auto;
  padding: 12px;
  max-width: 560px;
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  color: var(--ink-2);
  background: var(--surface);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.goal-refresh-status p {
  margin: 0 0 8px;
}
.goal-refresh-status button {
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  background: var(--surface-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.goal-refresh-status button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

#goalCatalogStatus {
  margin: 10px 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

/* 고객지원 자주 묻는 질문(이슈 #587): 질문을 누르면 답이 펼쳐진다. 기본은 접힘. */
.faq-lead {
  margin: -4px 0 0;
  color: var(--ink-3);
  font-size: 13px;
}

.privacy-view .privacy-body .faq-group-title {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: var(--w-strong);
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  color: var(--ink);
  font-weight: var(--w-strong);
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  width: 8px;
  height: 8px;
  flex: none;
  margin: 0 4px 4px auto;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  content: '';
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.faq-item[open] > summary::after {
  margin-bottom: -4px;
  transform: rotate(-135deg);
}

.faq-answer {
  display: grid;
  gap: 8px;
  padding: 0 2px 14px;
  color: var(--ink-2);
}

.faq-answer p,
.faq-answer ul {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item > summary::after {
    transition: none;
  }
}

/* ---------- 문의하기·문의내역(이슈 #587) ---------- */
.inquiry-form {
  gap: 16px;
}

.inquiry-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.inquiry-field > span {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: var(--w-strong);
}

.inquiry-field [aria-invalid='true'] {
  box-shadow: 0 0 0 2px var(--danger);
}

.inquiry-count,
.inquiry-help {
  color: var(--ink-3);
  font-size: 12px;
}

.inquiry-count {
  justify-self: end;
}

.inquiry-attachments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inquiry-attachments:empty {
  display: none;
}

.inquiry-attachment {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.inquiry-attachment.is-entering {
  animation: food-card-enter 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.inquiry-attachment.is-removing {
  pointer-events: none;
  animation: food-card-remove 220ms ease-in both;
}

.inquiry-attachment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inquiry-attachment.is-uploading img {
  opacity: 0.45;
}

.inquiry-attachment-state {
  position: absolute;
  inset: auto 0 0;
  padding: 4px;
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--w-strong);
  text-align: center;
}

.inquiry-attachment-state:empty {
  display: none;
}

.inquiry-attachment-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  cursor: pointer;
}

.inquiry-attachment-remove::before,
.inquiry-attachment-remove::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--surface);
  content: '';
  transform: translate(-50%, -50%) rotate(45deg);
}

.inquiry-attachment-remove::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.inquiry-attach-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 0 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: var(--w-strong);
  cursor: pointer;
}

.inquiry-attach-button[hidden] {
  display: none;
}

.inquiry-attach-button:focus-within {
  box-shadow: 0 0 0 2px var(--brand);
}

.inquiry-note {
  color: var(--ink-3);
  font-size: 13px;
}

.inquiry-status {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}

.inquiry-status:empty {
  display: none;
}

.inquiry-status.error {
  color: var(--danger-strong);
}

.inquiry-submit {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.inquiry-submit:disabled {
  cursor: progress;
  opacity: 0.55;
}

.inquiry-history-link {
  margin: 16px 0 0;
  text-align: center;
}

.inquiry-history-link a {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: var(--w-strong);
}

.inquiry-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inquiry-new-link {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.inquiry-list-status {
  color: var(--ink-3);
  font-size: 14px;
}

.inquiry-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inquiry-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--elev-card);
  color: var(--ink);
  text-decoration: none;
}

.inquiry-item-copy {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}

.inquiry-item-copy strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inquiry-item-copy small {
  color: var(--ink-3);
  font-size: 13px;
}

.inquiry-status-badge {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.inquiry-status-badge.is-read {
  background: var(--brand-soft);
  color: var(--ink);
}

.inquiry-status-badge.is-resolved {
  background: var(--cta);
  color: var(--cta-ink);
}

/* 화면 최소 높이(.standalone-view)에 행이 늘어나 카드 안이 벌어지지 않게 위로 모은다. */
.inquiry-detail,
.inquiry-detail-card {
  align-content: start;
}

.inquiry-detail {
  display: grid;
  gap: 12px;
}

.inquiry-detail[hidden] {
  display: none;
}

.inquiry-detail .standalone-heading {
  margin-bottom: 4px;
}

.inquiry-detail h1 {
  overflow-wrap: anywhere;
}

.inquiry-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--ink-3);
  font-size: 13px;
}

.inquiry-detail-body {
  margin: 0;
  color: var(--ink);
  line-height: var(--lh-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inquiry-answer-card.is-waiting .inquiry-detail-body {
  color: var(--ink-3);
}

.inquiry-answered-at {
  color: var(--ink-3);
  font-size: 12px;
}

.inquiry-detail .inquiry-attachment {
  cursor: zoom-in;
}

.inquiry-detail .inquiry-attachment.is-expanded {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  cursor: zoom-out;
}

.inquiry-detail .inquiry-attachment.is-expanded img {
  height: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .inquiry-attachment.is-entering,
  .inquiry-attachment.is-removing {
    animation: none;
  }
}

/* ---------- 로그인 없이 쓰는 사진 분석·목표 계산(이슈 #604, App Store 5.1.1) ---------- */
/* 우상단 로그인 | 회원가입(사진 분석 화면) */
.topbar-auth-links {
  display: inline-flex;
  align-items: center;
}

.topbar-auth-links .topbar-login-link {
  padding: 0 8px;
}

.topbar-auth-divider {
  color: var(--ink-4);
  font-size: 13px;
}

.guest-view {
  display: grid;
  gap: 16px;
  margin: 10px 0 24px;
}

.guest-intro {
  display: grid;
  gap: 8px;
  padding: 4px 4px 0;
}

.guest-intro h1 {
  font-size: 28px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.guest-helper,
.guest-note {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.guest-note {
  color: var(--ink-3);
  font-size: 12px;
}

.guest-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guest-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.guest-card h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.guest-ai-notice {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.guest-ai-notice p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.guest-ai-notice.is-accepted p {
  font-size: 12px;
}

.guest-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: var(--w-strong);
}

.guest-check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand);
}

.guest-photo-button,
.guest-primary,
.guest-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  padding: 10px 16px;
  border: 1px solid var(--cta);
  border-radius: var(--radius-control);
  background: var(--cta);
  color: var(--cta-ink);
  font: inherit;
  font-size: 15px;
  font-weight: var(--w-strong);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.guest-secondary {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
}

.guest-photo-button {
  position: relative;
}

.guest-photo-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.guest-photo-button[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.guest-photo-button.is-busy {
  opacity: 0.7;
  cursor: progress;
}

.guest-photo-button:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.guest-status {
  margin: 0;
  min-height: 1.4em;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.guest-status:empty {
  display: none;
}

.guest-status.is-error {
  color: var(--danger-strong);
}

.guest-result {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.guest-result[hidden],
.guest-goal-result[hidden] {
  display: none;
}

.guest-photo-preview {
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.guest-photo-preview img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

.guest-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.guest-field > span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--w-strong);
}

.guest-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.guest-totals div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 6px;
  border-radius: 14px;
  background: var(--surface-2);
  text-align: center;
}

.guest-totals span,
.guest-totals small {
  color: var(--ink-3);
  font-size: 11px;
}

.guest-totals strong {
  font-size: 17px;
  overflow-wrap: anywhere;
}

.guest-food-list,
.guest-preset-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guest-food-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  transform-origin: top;
}

.guest-food-item.is-entering {
  animation: food-card-enter 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.guest-food-item.is-removing {
  pointer-events: none;
  animation: food-card-remove 220ms ease-in both;
}

.guest-food-head,
.guest-food-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.guest-food-row {
  justify-content: space-between;
}

.guest-food-name {
  flex: 1 1 auto;
}

.guest-food-delete {
  flex: none;
  min-width: 52px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--danger-strong);
  font: inherit;
  font-size: 13px;
  font-weight: var(--w-strong);
  cursor: pointer;
}

.guest-portion {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.guest-portion button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  font-weight: var(--w-head);
  cursor: pointer;
}

.guest-food-amount {
  min-width: 0;
  padding: 0 4px;
  color: var(--ink-2);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.guest-food-calories {
  flex: none;
  font-size: 15px;
}

.guest-food-macros {
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
}

.guest-goal-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.guest-sex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.guest-sex legend {
  width: 100%;
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--w-strong);
}

.guest-sex label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
}

.guest-sex input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand);
}

.guest-goal-result {
  display: grid;
  gap: 10px;
}

.guest-goal-calories {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 14px;
  border-radius: var(--radius-control);
  background: var(--brand-soft);
}

.guest-goal-calories span {
  flex: 1 1 100%;
  color: var(--ink-2);
  font-size: 13px;
}

.guest-goal-calories strong {
  font-size: 30px;
}

.guest-presets-title {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: var(--w-head);
}

.guest-preset {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.guest-preset span {
  color: var(--ink-2);
}

.guest-preset small {
  color: var(--ink-3);
  font-size: 12px;
}

.guest-signup {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}

.guest-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--scrim);
}

.guest-sheet[hidden] {
  display: none;
}

.guest-sheet-panel {
  display: grid;
  gap: 12px;
  width: min(100%, 480px);
  padding: 22px 20px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.guest-sheet-panel h2 {
  margin: 0;
  font-size: 19px;
}

@media (prefers-reduced-motion: reduce) {
  .guest-food-item.is-entering,
  .guest-food-item.is-removing {
    animation: none;
  }
}