/* 앱 화면(index.html·connect.html)의 배치. 색은 `base.css` 토큰만 쓴다. */

/* 🔴 서버에 못 닿을 때만 머리 밑에 뜨는 띠. 잘 될 때는 요소째 숨어 있다.
   ⚠️ 화면 끝까지 채운다 — 가운데만 칠하면 알림이 아니라 본문 한 조각으로 읽힌다.
   ⚠️ 자리를 미리 잡아 두지 않는다(`hidden` 이면 높이 0) — 평소에 빈 줄이 남으면
      그만큼 본문이 밀린다. */
.offline-bar {
  margin: 0;
  padding: 10px var(--gap-lg);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: var(--fs-sm);
  text-align: center;
}

/* 🔴 누르는 영역은 44px 이다. 줄이지 말 것 — 폰에서 손가락으로 헛누르게 된다.
   보이는 것은 그림 18px 이고 나머지는 투명한 여백이라 화면이 커 보이지도 않는다. */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-weak);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  /* 말풍선이 그림 위에서 깜빡이지 않게 — 마우스 판정을 단추가 통째로 받는다. */
  pointer-events: none;
}

.icon-btn:hover {
  background: var(--surface-strong);
  color: var(--text);
}

/* 마우스를 올렸을 때만 뜨는 검은 말풍선.
   🔴 글자가 없는 단추라 이것이 눈으로 이름을 아는 유일한 길이다(낭독기 쪽은
      `aria-label`). 늘 보이게 바꾸지 말 것. */
.icon-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--tip-bg);
  color: var(--tip-text);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* 말풍선 꼬리.
   🔴 `bottom` 을 말풍선(`- 6px`)보다 더 아래로 잡아야 보인다 — 삼각형은 아래쪽
      절반만 색이 있어서, 꼬리 아래 끝을 말풍선 아래 끝보다 5px 더 내려야 그
      절반이 밖으로 나온다. 안 그러면 아무것도 안 그려진 것처럼 된다. */
.icon-btn::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 11px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  border: 5px solid transparent;
  border-top-color: var(--tip-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* ⚠️ `:focus-visible` 을 함께 넣은 이유 — 키보드로만 쓰는 사람에게도 이름이 보여야
      한다. `:focus` 로 걸면 마우스로 누른 뒤에도 말풍선이 남아 거슬린다. */
.icon-btn:hover::after,
.icon-btn:hover::before,
.icon-btn:focus-visible::after,
.icon-btn:focus-visible::before,
.icon-btn[data-tip-open]::after,
.icon-btn[data-tip-open]::before {
  opacity: 1;
}

/* 머리 줄에 놓는 꼴.
   🔴 말풍선을 아래로 뒤집는다 — 그대로 두면 머리 위로 떠서 화면 밖으로 나간다.
      꼬리 색도 함께 뒤집어야 한다(`border-top` → `border-bottom`). */
.icon-btn--head {
  width: 40px;
  height: 40px;
  text-decoration: none;
}

.icon-btn--head::after {
  bottom: auto;
  top: calc(100% - 6px);
}

.icon-btn--head::before {
  bottom: auto;
  top: calc(100% - 11px);
  border-top-color: transparent;
  border-bottom-color: var(--tip-bg);
}

/* ── 기록 화면 ──────────────────────────────────── */
.log-body {
  max-width: 560px;
  padding: var(--gap-md) var(--gap-md) var(--gap-xl);
}

/* 오른쪽 끝으로 모은 단추 줄. */
.row-end {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-sm);
}

/* 화면 안 안내 한 줄(저장 실패 등). 빨강을 쓰지 않는다. */
.log-msg {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--text);
  font-size: var(--fs-sm);
}

/* 날짜 넘기기 */
.day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--gap-sm);
}

.day__label {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.4px;
  text-align: center;
}

.day__label small {
  margin-left: 6px;
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
}

/* 누르는 영역 44px. */
.day__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--text-sub);
}

.day__step svg {
  width: 22px;
  height: 22px;
}

.day__step:hover {
  background: var(--surface-strong);
  color: var(--text);
}

.day__step:disabled {
  opacity: 0.3;
  cursor: default;
  background: none;
}

/* 그날 숫자 카드 */
.sum {
  padding: var(--gap-md);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.sum__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px var(--gap-sm);
}

.sum__bar + .sum__line,
.sum__line + .sum__line {
  margin-top: var(--gap-sm);
}

.sum__name {
  min-width: 48px;
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.sum__val {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}

.sum__goal {
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.sum__bar {
  height: 6px;
  margin-top: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-strong);
  overflow: hidden;
}

.sum__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 0.3s ease;
}

.sum__fill--protein {
  background: var(--green);
}

.sum__fill--kcal {
  background: var(--text-weak);
}

.sum__left {
  margin: var(--gap-sm) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sum__note {
  margin: var(--gap-xs) 0 0;
  color: var(--text-sub);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.sum__set {
  margin: var(--gap-xs) 0 0 -6px;
  padding: 6px;
  color: var(--text-sub);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sum__set:hover {
  color: var(--text);
}

/* 목표 정하기 칸 */
.goal {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--border);
}

.goal__field {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.goal__name {
  flex: none;
  width: 84px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.goal__input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
}

.goal__unit {
  flex: none;
  width: 32px;
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

.goal__hint {
  margin: 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
}

/* 사진 */
.shot {
  margin-top: var(--gap-md);
}

.shot__pickers {
  display: flex;
  gap: var(--gap-sm);
}

/* 고르는 칸은 화면에서 숨기고 이 글자 단추가 대신 눌린다. */
.shot__cam {
  flex: 1;
  min-height: 56px;
  border-radius: var(--radius-md);
  font-size: 17px;
  cursor: pointer;
}

.shot__cam svg {
  width: 22px;
  height: 22px;
}

.shot__pick {
  flex: none;
  min-height: 56px;
  padding: 0 var(--gap-md);
  border-radius: var(--radius-md);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* 숨긴 고르는 칸에 키보드가 닿으면 단추 쪽에 테두리를 그린다. */
.shot__pickers input:focus-visible + label {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.shot__form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.shot__preview {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* 글 칸 */
.note {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
}

.note__text {
  min-height: 52px;
  max-height: 260px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  line-height: 1.5;
  resize: none;
}

.note__text:focus {
  outline: none;
  border-color: var(--blue);
}

.note__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}

/* 최근 먹은 것 — 한 줄로 두고 옆으로 민다(여러 줄로 쌓으면 화면을 다 먹는다). */
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.chip:hover {
  background: var(--surface);
}

.chip:active {
  background: var(--surface-strong);
}

/* 음식 / 운동 고르기 */
.kind {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--surface-strong);
}

.kind__opt {
  min-width: 52px;
  min-height: 36px;
  padding: 0 var(--gap-md);
  border-radius: var(--radius-full);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.kind__opt[aria-pressed="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

/* 그날 기록 */
.log {
  margin-top: var(--gap-lg);
}

.log__title {
  margin: 0 0 var(--gap-xs);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.log__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.log__empty {
  margin: 0;
  padding: var(--gap-lg) var(--gap-md);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  text-align: center;
}

.entry {
  border-bottom: 1px solid var(--border);
}

.entry:last-child {
  border-bottom: 0;
}

.entry__main {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  width: 100%;
  min-height: 56px;
  padding: 12px 2px;
  text-align: left;
}

.entry__time {
  flex: none;
  width: 42px;
  padding-top: 1px;
  color: var(--text-weak);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.entry__thumb {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  object-fit: cover;
}

.entry__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.entry__text {
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.entry__tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: var(--pick-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}

.entry__nums {
  color: var(--text-sub);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.entry__state {
  color: var(--warn-text);
  font-size: var(--fs-xs);
}

/* 덧붙이는 작은 한 줄(없어도 되는 길 안내). */
.entry__hint {
  color: var(--text-weak);
  font-size: 12px;
}

/* 이름 없는 사진 줄의 「이름 달기」. 줄 전체가 단추라 모양만 단추다. */
.entry__name {
  flex: none;
  align-self: center;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  background: var(--blue-weak);
  color: var(--blue);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* 숫자를 누가 셌는지 작게. 숫자 줄 끝에 붙는다. */
.entry__by {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--surface-strong);
  color: var(--text-sub);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 1px;
}

.entry__edit {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: 0 0 var(--gap-md);
}

.entry__area {
  min-height: 120px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  resize: vertical;
}

.entry__acts,
.entry__ask {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.entry__ask {
  padding: var(--gap-sm) var(--gap-sm) var(--gap-sm) 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  font-size: var(--fs-sm);
}

/* 단추 사이를 벌려 왼쪽·오른쪽으로 가른다. */
.grow {
  flex: 1;
}

/* AI 연결로 가는 길 */
.ai-link {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
  padding: 14px var(--gap-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
}

.ai-link:hover {
  background: var(--surface);
}

.ai-link__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.ai-link__text strong {
  font-size: var(--fs-body);
}

.ai-link__text span {
  color: var(--text-sub);
}

.ai-link svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-weak);
}

/* ── AI 연결(connect.html) ──────────────────────── */
.sub-head {
  position: relative;
  justify-content: center;
}

/* 누르는 영역 44px. */
.sub-head__back {
  position: absolute;
  left: var(--gap-sm);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 var(--gap-sm);
  border-radius: var(--radius-full);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.sub-head__back svg {
  width: 20px;
  height: 20px;
}

.sub-head__back:hover {
  background: var(--surface-strong);
  color: var(--text);
}

.sub-head__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.connect__lead {
  margin: var(--gap-sm) 0 var(--gap-lg);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.connect__box {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.connect__label {
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.connect__row {
  display: flex;
  gap: var(--gap-sm);
}

.connect__url {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-sm);
}

.connect__copy {
  flex: none;
  min-width: 76px;
  border-radius: var(--radius-sm);
}

.connect__status {
  min-height: 1.5em;
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-xs);
}

.connect__steps {
  margin: var(--gap-lg) 0 0;
  padding: 0 0 0 1.4em;
  font-size: var(--fs-body);
  line-height: 1.6;
}

.connect__steps li + li {
  margin-top: var(--gap-sm);
}

.connect__note {
  margin: var(--gap-lg) 0 0;
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

/* ── AI 연결 허락(oauth_consent.html) ───────────── */
.consent__wait {
  margin: var(--gap-lg) 0 0;
  color: var(--text-sub);
  font-size: var(--fs-sm);
  text-align: center;
}

.consent {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  margin-top: var(--gap-sm);
  padding: var(--gap-lg) var(--gap-md);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.consent__title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}

.consent__who {
  color: var(--blue);
}

.consent__host {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.consent__host strong {
  color: var(--text);
  font-size: var(--fs-body);
}

.consent__can {
  margin: 0;
  padding: var(--gap-sm) var(--gap-md) var(--gap-sm) 2.2em;
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.consent__can li + li {
  margin-top: var(--gap-xs);
}

.consent__note {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* 두 단추는 같은 너비 — 허락만 크게 그려 누르기를 떠밀지 않는다. */
.consent__acts {
  display: flex;
  gap: var(--gap-sm);
}

.consent__acts .btn {
  flex: 1;
  min-height: 48px;
}

.consent--gone .consent__title {
  font-size: 17px;
}

/* ── 연결된 AI·직접 쓰는 열쇠(connect.html) ───────── */
.link-list {
  margin-top: var(--gap-lg);
}

.link-list__title {
  margin: 0 0 var(--gap-xs);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.link-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list__empty {
  margin: 0;
  padding: var(--gap-md);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  text-align: center;
}

.link-item {
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
}

.link-item:last-child {
  border-bottom: 0;
}

.link-item__row {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.link-item__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.link-item__name {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.link-item__sub {
  color: var(--text-sub);
  font-size: var(--fs-xs);
}

.link-item__ask {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-sm) var(--gap-sm) 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.link-item__row + .link-item__ask {
  margin-top: var(--gap-sm);
}

.link-item__acts {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-sm);
}

/* 접힌 칸. 누르는 줄은 44px 이상. */
.keys {
  margin-top: var(--gap-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.keys__head {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--gap-md);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.keys__head::-webkit-details-marker {
  display: none;
}

.keys__head::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--text-weak);
  border-bottom: 2px solid var(--text-weak);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}

.keys[open] .keys__head::after {
  transform: rotate(-135deg) translateY(-2px);
}

.keys__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: 0 var(--gap-md) var(--gap-md);
}

.keys__lead {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.keys__form {
  display: flex;
  gap: var(--gap-sm);
}

.keys__label {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: var(--fs-sm);
}

.keys__form .btn {
  flex: none;
  border-radius: var(--radius-sm);
}

.keys__new {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.keys__warn {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.keys__cmd {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin-top: var(--gap-xs);
}