/* 도시락 — 차분한 다크 그린. 경고색 없음. 6:20 에 눈부시지 않게 어둡게. */
:root {
  --bg: #0f1411;
  --surface: #18201b;
  --line: #263028;
  --txt: #e9f0eb;
  --dim: #7d8d83;
  --accent: #6fbf8f;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--bg); color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-user-select: none; user-select: none;
}

.screen {
  min-height: 100dvh; max-width: 460px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 20px);
  display: flex; flex-direction: column;
}

/* ── 상단 ── */
.top { position: relative; text-align: center; padding: 4px 0 16px; }
.top-label { font-size: 12px; color: var(--dim); letter-spacing: .04em; }
.top-num { font-size: 32px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.top-num .unit { font-size: 15px; color: var(--dim); font-weight: 500; margin-left: 3px; }
.nav-links { position: absolute; top: 0; right: 0; display: flex; gap: 5px; }
.navlink {
  font-size: 12px; color: var(--dim); text-decoration: none;
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px;
}

/* ── 아침의 전부: 큰 카드. 반쯤 잠든 채로 눌러야 하므로 크게. ── */
.picks { display: flex; flex-direction: column; gap: 9px; }
.pick {
  position: relative; width: 100%; text-align: left;
  padding: 17px 52px 17px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--txt);
  font-family: inherit; cursor: pointer; transition: transform .1s, background .1s;
}
.pick:active { transform: scale(.98); background: #1f2a23; }
.pick.taking { opacity: .5; }
.pick-name { font-size: 16.5px; font-weight: 600; }
.pick-meta { font-size: 11.5px; color: var(--dim); margin-top: 4px; }
.pick-left {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  font-size: 18px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.empty { color: var(--dim); font-size: 13.5px; text-align: center; padding: 30px 10px; line-height: 1.7; }
.empty a { color: var(--accent); text-decoration: none; }

/* ── 오늘 꺼낸 것 ── */
.taken { margin-top: 20px; }
.taken-head { font-size: 12px; color: var(--dim); margin-bottom: 8px; letter-spacing: .03em; }
.taken-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.taken-item {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line);
}
.taken-name { flex: 1; font-size: 14px; font-weight: 500; }
.taken-kcal { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.undo {
  flex-shrink: 0; border: none; background: transparent; color: var(--dim);
  font-size: 11.5px; font-family: inherit; cursor: pointer; padding: 4px 2px;
}

/* ── 공통 폼 ── */
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.back {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt); text-decoration: none; font-size: 19px; line-height: 1;
}
.page-title { font-size: 16px; font-weight: 700; }

.fi {
  width: 100%; height: 48px; padding: 0 13px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface); color: var(--txt);
  font-size: 15px; font-family: inherit;
}
.fi:focus { outline: none; border-color: var(--accent); }
.row { display: flex; gap: 8px; }
.save {
  flex-shrink: 0; height: 48px; padding: 0 20px; border-radius: 11px; border: none;
  background: var(--accent); color: #0d1a12; font-size: 14.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.save:active { transform: scale(.98); }
.form-msg { font-size: 12.5px; color: var(--accent); text-align: center; margin-bottom: 10px; }
.sec-title { font-size: 12px; color: var(--dim); margin: 22px 0 8px; letter-spacing: .03em; }

/* ── 채우기 ── */
.fill-form { display: flex; flex-direction: column; gap: 9px; }
.fill-hint { font-size: 11.5px; color: var(--dim); text-align: center; }
.dish-picks { display: flex; flex-direction: column; gap: 6px; }
.dish-pick {
  display: block; padding: 13px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.dish-pick input { display: none; }
.dish-pick:has(input:checked) { border-color: var(--accent); background: rgba(111,191,143,.1); }
/* 이미 냉동실에 있는 건 또 만들 필요가 없으니 톤을 낮춘다(막지는 않는다). */
.dish-pick.has-stock { opacity: .55; }
.dp-name { display: block; font-size: 14.5px; font-weight: 600; }
.dp-meta { display: block; font-size: 11.5px; color: var(--dim); margin-top: 3px; }

.recent-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px;
}
.rr-name { font-weight: 600; }
.rr-sub { flex: 1; color: var(--dim); font-size: 11.5px; }

/* ── 요리 목록 ── */
.dish-list { display: flex; flex-direction: column; gap: 7px; }
.dish-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line);
}
.dish-row.off { opacity: .45; }
.dr-main { flex: 1; min-width: 0; }
.dr-name { font-size: 14.5px; font-weight: 600; }
.dr-sub { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.toggle {
  flex-shrink: 0; padding: 7px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font-size: 11.5px; font-family: inherit; cursor: pointer;
}
.dish-form { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }

.del {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
  border: none; background: transparent; color: var(--dim);
  font-size: 15px; cursor: pointer; font-family: inherit;
}

/* ── 잠금 ── */
.lock-screen { justify-content: center; }
.lock { display: flex; flex-direction: column; gap: 12px; }
.lock-title { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.lock-input {
  height: 56px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--txt);
  font-size: 20px; text-align: center; font-family: inherit; letter-spacing: .3em;
}
.lock-input:focus { outline: none; border-color: var(--accent); }
.lock-msg { text-align: center; font-size: 12.5px; color: var(--dim); }