/* ============================================================
   Kcal 일기 v1.0.1 — style.css
   1인용 지능형 식단·건강 PWA
   ============================================================ */

:root{
  /* 색상 */
  --bg:        #FAF7F0;
  --paper:     #FFFDF8;
  --ink:       #1A1A1A;
  --muted:     #6B6457;
  --intake:    #B8531C;
  --burn:      #2D5A3D;
  --good:      #2D5A3D;
  --warn:      #C0392B;
  --water:     #1B6CA8;
  --gold:      #C9A227;
  --line:      #1A1A1A;
  --softline:  #E8E3D6;

  /* 영양소 */
  --carb:      #B8531C;
  --protein:   #C9A227;
  --fat:       #1B6CA8;

  /* 글자 크기 */
  --s1: 0.75rem;
  --s2: 1rem;
  --s3: 1.125rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --sBig: 3.75rem;
}

html{ font-size: 17px; }
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body{
  background: var(--bg);
  color: var(--ink);
  font-family:
    -apple-system, 'Apple SD Gothic Neo', 'Hiragino Kaku Gothic ProN',
    'Noto Sans KR', 'Noto Sans JP', system-ui, sans-serif;
  font-size: var(--s2);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: 'tnum';
}
body{
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.05) 1px, transparent 0);
  background-size: 18px 18px;
  padding: env(safe-area-inset-top) 0 calc(80px + env(safe-area-inset-bottom));
}
button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }

/* ============ 단추 글자 넘침 방지 ============ */
button, .btn{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; }
.btn-row > .btn{ flex:1 1 auto; min-width:max-content; }

/* ============ 화면 ============ */
.screen{ display:none; max-width:520px; margin:0 auto; padding:24px 16px; }
.screen.active{ display:block; animation:fade .3s ease; }
@keyframes fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ============ 카드 ============ */
.card{
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  position: relative;
}
.card.big{ padding: 26px 22px; }
.card-label{
  position: absolute;
  top: -10px; left: 14px;
  background: var(--paper);
  padding: 0 8px;
  font-size: var(--s1);
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 700;
}

/* ============ 브랜드 ============ */
.brand{
  font-family: 'Georgia', serif;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -.02em;
}
.brand em{ font-style: italic; color: var(--intake); }
.sub{
  font-size: var(--s1);
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: .08em;
}

/* ============ 환영 ============ */
.welcome-card{
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 32px 24px;
  text-align: center;
}
.welcome-icon{ font-size: 64px; margin-bottom: 16px; }
.welcome-card h2{ font-size: var(--s4); margin-bottom: 16px; font-weight: 800; }
.welcome-card .lead{ font-size: var(--s3); margin-bottom: 20px; font-weight: 600; }
.welcome-list{
  text-align: left;
  background: var(--bg);
  border: 1.5px dashed var(--ink);
  padding: 18px;
  margin-bottom: 22px;
  font-size: var(--s2);
  line-height: 1.7;
}
.welcome-list strong{ color: var(--warn); }

/* ============ 입력칸 ============ */
.field{ margin-bottom: 16px; }
.field label{
  display: block;
  font-size: var(--s1);
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 700;
}
.field input, .field select, .field textarea{
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  background: var(--paper);
  outline: none;
  font-size: var(--s2);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  box-shadow: 3px 3px 0 var(--ink);
}
.field-row{ display: flex; gap: 10px; }
.field-row > .field{ flex: 1; }

/* ============ 생년월일 3드롭다운 ============ */
.date-row{
  display: flex;
  gap: 8px;
}
.date-sel{
  flex: 1;
  padding: 16px 8px;
  font-size: var(--s2);
  font-weight: 700;
  font-family: inherit;
  border: 1.5px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  min-width: 0;
}
.date-sel:focus{
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.date-sel:active{
  background: var(--bg);
}
.date-sel option{
  font-size: var(--s2);
  padding: 8px;
}

/* ============ 날짜 선택 카드 ============ */
.date-card{
  padding: 14px 16px;
}
.date-bar{
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.date-arrow{
  flex: 0 0 auto;
  width: 48px;
  font-size: 28px;
  font-weight: 700;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  border-radius: 0;
}
.date-arrow:active{ background: var(--bg); }
.date-arrow:disabled{
  opacity: 0.3;
  cursor: not-allowed;
}
.date-label{
  flex: 1;
  font-size: var(--s2);
  font-weight: 700;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  padding: 14px 8px;
  text-align: center;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.date-label:active{ background: var(--card); }
.date-jump{
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: var(--s1);
  font-weight: 700;
  font-family: inherit;
  background: var(--accent);
  color: var(--card);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
}
.date-picker-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
}

/* ============ 체중 차트 ============ */
.range-toggle{
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border: 1.5px solid var(--ink);
}
.range-btn{
  flex: 1;
  padding: 10px;
  font-size: var(--s1);
  font-weight: 700;
  font-family: inherit;
  background: var(--card);
  color: var(--muted);
  border: none;
  border-right: 1.5px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
}
.range-btn:last-child{ border-right: none; }
.range-btn.active{
  background: var(--ink);
  color: var(--card);
}
.chart-wrap{
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}
.chart-wrap canvas{
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
}
.chart-empty{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: var(--s1);
  color: var(--muted);
  font-style: italic;
}
.chart-stats{
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  border-top: 1px dashed var(--muted);
  font-size: var(--s0);
  color: var(--muted);
}
.chart-stats > div{
  text-align: center;
}
.chart-stats .label{
  font-size: var(--s0);
  color: var(--muted);
  margin-bottom: 2px;
}
.chart-stats .value{
  font-size: var(--s1);
  font-weight: 700;
  color: var(--ink);
}

/* ============ 다이어트 진행 (목표 체중 + 적자) ============ */
.diet-progress{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--muted);
}
.diet-progress:empty{ display: none; }
.diet-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  font-size: var(--s1);
}
.diet-row + .diet-row{
  border-top: 1px dotted var(--muted);
}
.diet-row .k{
  color: var(--muted);
  font-weight: 600;
  font-size: var(--s0);
  flex: 0 0 auto;
}
.diet-row .v{
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  flex: 1;
  margin-left: 12px;
}
.diet-row .v.good{ color: var(--burn); }
.diet-row .v.bad{  color: var(--warn); }
.diet-row .v.gold{ color: var(--accent); }
.diet-target{
  display: block;
  margin-top: 10px;
  padding: 12px;
  background: var(--bg);
  border: 1.5px dashed var(--accent);
  font-size: var(--s1);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  line-height: 1.5;
}
.diet-target em{
  display: block;
  font-style: normal;
  font-size: var(--s0);
  font-weight: 600;
  color: var(--muted);
  margin-top: 4px;
}
.diet-target.done{
  border-color: var(--burn);
  background: var(--card);
}
.diet-switch-btn{
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  font-size: var(--s1);
  font-weight: 700;
  font-family: inherit;
  background: var(--burn);
  color: var(--card);
  -webkit-text-fill-color: var(--card);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.diet-switch-btn:active{ background: var(--ink); }
.diet-empty{
  text-align: center;
  font-size: var(--s0);
  color: var(--muted);
  font-style: italic;
  padding: 8px;
}

/* ============ 식이섬유 칩 (추천 카드 메타) ============ */
.rec-meta .fib{
  color: var(--burn);
  font-weight: 700;
}

/* ============ 자동 권고 (다이어트 진행 안) ============ */
.diet-advice{
  margin-top: 12px;
  padding: 12px;
  border: 1.5px dashed var(--warn);
  background: var(--bg);
}
.diet-advice.fast{ border-color: var(--accent); }
.diet-advice.slow{ border-color: var(--warn); }
.advice-msg{
  font-size: var(--s0);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 10px;
}
.advice-apply{
  display: block;
  width: 100%;
  padding: 10px;
  font-size: var(--s0);
  font-weight: 700;
  font-family: inherit;
  background: var(--ink);
  color: var(--card);
  -webkit-text-fill-color: var(--card);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.advice-apply:active{ background: var(--accent); }

/* ============ 주간 리포트 ============ */
#weeklyReport{
  font-size: var(--s1);
}
.wr-empty{
  text-align: center;
  font-size: var(--s0);
  color: var(--muted);
  font-style: italic;
  padding: 12px;
}
.wr-stat{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dotted var(--muted);
}
.wr-stat:last-child{ border-bottom: none; }
.wr-stat .k{
  font-size: var(--s0);
  color: var(--muted);
  font-weight: 600;
  flex: 0 0 auto;
}
.wr-stat .v{
  font-size: var(--s1);
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  flex: 1;
  margin-left: 12px;
}
.wr-stat .v.good{ color: var(--burn); }
.wr-stat .v.bad{ color: var(--warn); }
.wr-section-label{
  font-size: var(--s0);
  font-weight: 700;
  color: var(--accent);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--accent);
}
.wr-top-foods{
  list-style: none;
  margin: 0;
  padding: 0;
}
.wr-top-foods li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  font-size: var(--s0);
}
.wr-top-foods .rank{
  flex: 0 0 24px;
  font-weight: 700;
  color: var(--accent);
}
.wr-top-foods .name{
  flex: 1;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wr-top-foods .cnt{
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  margin-left: 8px;
}

/* ============ 영양 목표 (설정 카드) ============ */
.nutri-targets{
  padding: 8px 0;
}
.nutri-hint{
  font-size: var(--s0);
  color: var(--muted);
  margin: 8px 0 12px;
  font-style: italic;
  line-height: 1.5;
}

/* ============ 공유 카드 — 이미지 캔버스 ============ */
.share-mode-toggle{
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border: 1.5px solid var(--ink);
}
.share-mode-toggle button{
  flex: 1;
  padding: 12px 4px;
  font-size: var(--s0);
  font-weight: 700;
  font-family: inherit;
  background: var(--card);
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  border: none;
  border-right: 1.5px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.share-mode-toggle button:last-child{ border-right: none; }
.share-mode-toggle button.on{
  background: var(--ink);
  color: var(--card);
  -webkit-text-fill-color: var(--card);
}
.share-img-wrap{
  margin: 0 0 14px;
  padding: 0;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  text-align: center;
  overflow: hidden;
}
.share-img-wrap canvas{
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

/* ============ 카테고리 칩 (음식 탭 필터) ============ */
.cat-chips-wrap{
  position: relative;
  margin-bottom: 4px;
}
.cat-chips-wrap::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 12px;
  width: 28px;
  background: linear-gradient(to right, transparent, var(--bg) 75%);
  pointer-events: none;
  z-index: 1;
}
.cat-chips{
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 24px 12px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-chips::-webkit-scrollbar{ display: none; }
.cat-chip{
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: var(--s0);
  font-weight: 700;
  font-family: inherit;
  background: var(--card);
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  min-width: max-content;
  -webkit-appearance: none;
  appearance: none;
}
.cat-chip:active{ background: var(--bg); }
.cat-chip.active{
  background: var(--ink);
  color: var(--card);
  -webkit-text-fill-color: var(--card);
}

/* ============ 즐겨찾기 음식 ============ */
.fav-section{
  margin-bottom: 16px;
}
.fav-label{
  font-size: var(--s0);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.fav-list{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fav-item{
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: var(--s0);
  font-weight: 600;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav-item:active{ background: var(--card); }
.fav-item .fav-count{
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--card);
  padding: 1px 5px;
  border: 1px solid var(--accent);
}

/* ============ 식사 시간대 선택 (음식 모달) ============ */
.meal-picker{
  display: flex;
  gap: 0;
  margin: 14px 0 12px;
  border: 1.5px solid var(--ink);
}
.meal-picker button{
  flex: 1;
  padding: 12px 4px;
  font-size: var(--s0);
  font-weight: 700;
  font-family: inherit;
  background: var(--card);
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  border: none;
  border-right: 1.5px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
.meal-picker button:last-child{ border-right: none; }
.meal-picker button.active{
  background: var(--ink);
  color: var(--card);
  -webkit-text-fill-color: var(--card);
}

/* ============ 추천 선택 모달 ============ */
.rec-pick-body{
  max-width: 420px;
}
.rec-pick-sub{
  font-size: var(--s0);
  color: var(--muted);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.5;
}
.rec-pick-list{
  border: 1.5px solid var(--ink);
  background: var(--bg);
  margin-bottom: 12px;
}
.rec-pick-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px dashed var(--muted);
  cursor: pointer;
}
.rec-pick-item:last-child{ border-bottom: none; }
.rec-pick-item input[type="checkbox"]{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  accent-color: var(--ink);
  cursor: pointer;
  margin: 0;
}
.rec-pick-item .info{
  flex: 1;
  min-width: 0;
}
.rec-pick-item .name{
  font-size: var(--s1);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-pick-item .meta{
  font-size: var(--s0);
  color: var(--muted);
  margin-top: 2px;
}
.rec-pick-item .kcal{
  flex: 0 0 auto;
  font-size: var(--s1);
  font-weight: 700;
  color: var(--intake);
}
.rec-pick-item.beverage{
  background: var(--card);
}
.rec-pick-item.beverage .name::before{
  content: '🥤 ';
}
.rec-pick-item.unchecked{
  opacity: 0.5;
}
.rec-pick-summary{
  text-align: center;
  font-size: var(--s1);
  font-weight: 700;
  color: var(--ink);
  padding: 8px;
  background: var(--bg);
  border: 1.5px dashed var(--accent);
  margin-bottom: 12px;
}

/* ============ 사용자 음식 관리 목록 ============ */
#customListCard{
  padding: 0;
}
.custom-empty{
  padding: 18px;
  text-align: center;
  font-size: var(--s0);
  color: var(--muted);
  font-style: italic;
}
.custom-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px dashed var(--muted);
}
.custom-row:last-child{ border-bottom: none; }
.custom-row .info{ flex: 1; min-width: 0; }
.custom-row .name{
  font-size: var(--s1);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-row .meta{
  font-size: var(--s0);
  color: var(--muted);
  margin-top: 2px;
}
.custom-row .actions{
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.custom-row button{
  padding: 6px 10px;
  font-size: var(--s0);
  font-weight: 700;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.custom-row button.del{
  color: var(--warn);
  -webkit-text-fill-color: var(--warn);
  border-color: var(--warn);
}

/* === reuse meal-picker base for old block (already exists below, skip redefining) === */
.meal-picker-old{ display: none; }

/* ============ 식사별 그룹 헤더 (오늘 한 일) ============ */
.meal-section-header{
  font-size: var(--s1);
  font-weight: 700;
  color: var(--accent);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--accent);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.meal-section-header:first-child{ margin-top: 0; }
.meal-section-header .meal-sum{
  font-size: var(--s0);
  color: var(--muted);
  font-weight: 600;
}
.entry-group{
  margin-bottom: 4px;
}
.entry-group-other{
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px dashed var(--muted);
}

/* ============ 체크박스 줄 ============ */
.checkbox-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1.5px dashed var(--ink);
  margin-bottom: 12px;
  cursor: pointer;
  font-size: var(--s1);
  color: var(--muted);
  font-weight: 600;
  line-height: 1.4;
}
.checkbox-row input[type="checkbox"]{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--ink);
  cursor: pointer;
}
.checkbox-row span{
  flex: 1;
}

/* ============ 단추 ============ */
.btn{
  display: block;
  width: 100%;
  padding: 16px 18px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: var(--s1);
  letter-spacing: .12em;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  min-height: 52px;
}
.btn.primary{ background: var(--ink); color: var(--paper); }
.btn.ghost  { background: transparent; }
.btn.danger { border-color: var(--warn); color: var(--warn); }
.btn.intake { background: var(--intake); color: var(--paper); border-color: var(--intake); }
.btn.burn   { background: var(--burn);   color: var(--paper); border-color: var(--burn); }
.btn.water  { background: var(--water);  color: var(--paper); border-color: var(--water); }
.btn:active { transform: translate(1px, 1px); filter: brightness(.95); }
.btn:disabled{ opacity: .4; cursor: not-allowed; }

/* ============ 머리 ============ */
.head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  gap: 12px;
}
.icon-btn{
  width: 48px; height: 48px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: var(--s3);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn:active{ background: var(--ink); color: var(--paper); }

/* ============ 백업 알림 띠 ============ */
.backup-strip{
  background: var(--bg);
  border: 1.5px dashed var(--ink);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: var(--s1);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.backup-strip.urgent{ border-color: var(--warn); color: var(--warn); }
.backup-strip a{ color: inherit; text-decoration: underline; cursor: pointer; font-weight: 700; }

/* ============ 가계부 ============ */
.ledger{ text-align: center; padding: 12px 0 4px; }
.ledger .balance{
  font-family: 'Georgia', serif;
  font-size: var(--sBig);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.ledger .balance.good{ color: var(--good); }
.ledger .balance.warn{ color: var(--warn); }
.ledger .of{
  font-size: var(--s2);
  color: var(--muted);
  margin-top: 6px;
}
.bar{
  height: 10px;
  background: var(--softline);
  margin: 16px 0 14px;
  border: 1px solid var(--ink);
  overflow: hidden;
}
.bar-fill{
  height: 100%;
  background: var(--good);
  transition: width .5s ease;
}
.bar-fill.water{ background: var(--water); }
.bar-fill.over { background: var(--warn); }

.flow-row{
  display: flex;
  justify-content: space-around;
  padding-top: 16px;
  border-top: 1px dashed var(--ink);
}
.flow-cell{ text-align: center; flex: 1; }
.flow-cell .k{
  font-size: var(--s1);
  color: var(--muted);
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 4px;
}
.flow-cell .v{
  font-family: 'Georgia', serif;
  font-size: var(--s4);
  font-weight: 700;
}
.flow-cell.intake .v{ color: var(--intake); }
.flow-cell.burn   .v{ color: var(--burn); }
.flow-cell.bonus  .v{ color: var(--gold); }

/* ============ 매크로 (탄·단·지) 막대 ============ */
.macro-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--ink);
}
.macro-cell{ text-align: center; }
.macro-cell .k{
  font-size: var(--s1);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.macro-cell .v{
  font-family: 'Georgia', serif;
  font-size: var(--s3);
  font-weight: 700;
  margin-bottom: 4px;
}
.macro-cell.carb    .v{ color: var(--carb); }
.macro-cell.protein .v{ color: var(--protein); }
.macro-cell.fat     .v{ color: var(--fat); }
.macro-cell .pct{
  font-size: var(--s1);
  color: var(--muted);
  font-weight: 600;
}
.macro-bar{
  height: 6px;
  background: var(--softline);
  border: 1px solid var(--ink);
  overflow: hidden;
  margin-top: 6px;
}
.macro-bar > div{
  height: 100%;
  transition: width .5s ease;
}
.macro-cell.carb    .macro-bar > div{ background: var(--carb); }
.macro-cell.protein .macro-bar > div{ background: var(--protein); }
.macro-cell.fat     .macro-bar > div{ background: var(--fat); }
.macro-bar > div.over{ background: var(--warn); }

/* ============ 빠른입력 단추 한 쌍 ============ */
.quick-pair{ display: flex; gap: 10px; margin-bottom: 14px; }
.quick-pair .btn{
  flex: 1;
  margin-top: 0;
  padding: 22px 16px;
  font-size: var(--s2);
  font-weight: 800;
  letter-spacing: .04em;
  min-height: 72px;
}

/* ============ 수분 ============ */
.water-display{
  font-family: 'Georgia', serif;
  text-align: center;
  margin: 8px 0;
}
.water-display .v{ font-size: var(--s5); font-weight: 800; }
.water-display .of{ font-size: var(--s3); color: var(--muted); }
.water-add{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.water-add button{
  flex: 1 1 auto;
  min-width: max-content;
  padding: 14px 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-size: var(--s1);
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  min-height: 48px;
}
.water-add button:active{ background: var(--water); color: white; }

/* ============ 체중 ============ */
.weight-row{ display: flex; gap: 10px; align-items: stretch; }
.weight-row input{
  flex: 1;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: 'Georgia', serif;
  font-size: var(--s4);
  font-weight: 700;
  text-align: center;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
.weight-row button{
  padding: 0 22px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-size: var(--s1);
  letter-spacing: .12em;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

/* ============ Health Bridge ============ */
.health-row{ display: flex; gap: 10px; align-items: stretch; }
.health-row > .field{ flex: 1; margin-bottom: 0; }
.health-row > button{
  align-self: flex-end;
  padding: 14px 18px;
  background: var(--burn);
  color: var(--paper);
  border: 2px solid var(--burn);
  font-size: var(--s1);
  letter-spacing: .08em;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.health-hint{
  font-size: var(--s1);
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
  font-style: italic;
}

/* ============ AI 추천 카드 ============ */
.rec-card{
  background: linear-gradient(135deg, var(--paper) 0%, #FFF5E0 100%);
  border: 2px solid var(--gold);
  padding: 22px 18px 18px;
  margin-bottom: 14px;
  box-shadow: 3px 3px 0 var(--gold);
  position: relative;
}
.rec-card::before{
  content: '💡 다음 끼니 추천';
  position: absolute;
  top: -12px; left: 14px;
  background: var(--gold);
  color: var(--ink);
  padding: 3px 12px;
  font-size: var(--s1);
  font-weight: 700;
  letter-spacing: .08em;
}
.rec-head{
  font-size: var(--s2);
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
  line-height: 1.5;
}
.rec-combo{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
.rec-combo:active{ background: var(--bg); }
.rec-combo .rec-foods{
  font-weight: 600;
  font-size: var(--s2);
  margin-bottom: 6px;
  line-height: 1.4;
}
.rec-combo .rec-meta{
  display: flex;
  gap: 12px;
  font-size: var(--s1);
  color: var(--muted);
  font-weight: 600;
  flex-wrap: wrap;
}
.rec-combo .rec-meta .kcal{ color: var(--intake); }
.rec-combo .rec-meta .p{    color: var(--protein); }
.rec-combo .rec-meta .c{    color: var(--carb); }
.rec-combo .rec-meta .f{    color: var(--fat); }

/* ============ 시간순 항목 ============ */
.section-title{
  font-size: var(--s1);
  letter-spacing: .15em;
  color: var(--muted);
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.section-title::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink);
  opacity: .2;
}

.entry{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left-width: 6px;
}
.entry.intake { border-left-color: var(--intake); }
.entry.burn   { border-left-color: var(--burn); }
.entry.water  { border-left-color: var(--water); }
.entry.penalty{ border-left-color: var(--warn); background: #FFF5F2; }
.entry.health { border-left-color: var(--gold); }
.entry .time{
  font-family: 'Georgia', serif;
  font-size: var(--s1);
  color: var(--muted);
  font-weight: 700;
  width: 48px;
  flex-shrink: 0;
}
.entry .info{ flex: 1; min-width: 0; }
.entry .name{
  font-weight: 600;
  font-size: var(--s2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry .meta{
  font-size: var(--s1);
  color: var(--muted);
  margin-top: 2px;
}
.entry .val{
  font-family: 'Georgia', serif;
  font-size: var(--s3);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.entry.intake  .val{ color: var(--intake); }
.entry.burn    .val,
.entry.health  .val{ color: var(--burn); }
.entry.water   .val{ color: var(--water); }
.entry.penalty .val{ color: var(--warn); }
.entry .del{
  background: none;
  border: 1.5px solid var(--muted);
  color: var(--muted);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: var(--s2);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.entry .del::after{ content: ''; position: absolute; inset: -10px; }

.empty{
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
  font-style: italic;
  font-size: var(--s3);
}

/* ============ 활동등급 권고 띠 ============ */
.level-advice{
  background: #FFF8E5;
  border: 2px solid var(--gold);
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 3px 3px 0 var(--gold);
}
.level-advice .text{
  flex: 1;
  font-size: var(--s2);
  font-weight: 600;
  line-height: 1.4;
}
.level-advice .text strong{ color: var(--burn); }
.level-advice .actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.level-advice button{
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  font-size: var(--s1);
  font-weight: 700;
  cursor: pointer;
}
.level-advice button.ghost{
  background: transparent;
  color: var(--ink);
}

/* ============ 페널티 안내 띠 ============ */
.penalty-strip{
  background: #FFF5F2;
  border: 2px solid var(--warn);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: var(--s2);
  color: var(--warn);
  font-weight: 600;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.penalty-strip .icon{ font-size: var(--s3); flex-shrink: 0; }

/* ============ 하단 탭 ============ */
.tabs{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  display: flex;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs .tab{
  flex: 1;
  background: none;
  border: none;
  padding: 14px 4px;
  font-size: var(--s1);
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  border-top: 4px solid transparent;
  min-height: 60px;
}
.tabs .tab.active{
  color: var(--ink);
  border-top-color: var(--intake);
}

/* ============ 음식 검색 ============ */
.search-bar{ margin-bottom: 14px; }
.search-bar input{
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  background: var(--paper);
  outline: none;
  font-size: var(--s2);
}
.food-item{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 12px 14px;
  margin-bottom: 7px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 2px 2px 0 var(--ink);
}

.search-count{
  font-size: var(--s1);
  color: var(--muted);
  letter-spacing: .04em;
  font-weight: 700;
  padding: 4px 0 10px;
  text-align: right;
}
.food-item:active{ transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.food-item.risk{ border-color: var(--warn); }
.food-item.risk .name::before{ content: '⚠ '; color: var(--warn); }
.food-item.caution{ border-color: var(--gold); }
.food-item .info{ flex: 1; min-width: 0; }
.food-item .name{
  font-weight: 600;
  font-size: var(--s2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.food-item .meta{
  font-size: var(--s1);
  color: var(--muted);
  margin-top: 2px;
}
.food-item .kcal{
  font-family: 'Georgia', serif;
  font-size: var(--s3);
  font-weight: 700;
  color: var(--intake);
}

/* ============ 모달 (공통) ============ */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.modal.show{ display: flex; }
.modal-body{
  background: var(--paper);
  border-top: 3px solid var(--ink);
  border-left: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  width: 100%;
  max-width: 520px;
  padding: 0 0 20px;
  max-height: 95vh;
  overflow-y: auto;
}
.modal-body.detail{ padding: 24px 22px 28px; }
.modal-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 2px solid var(--ink);
}
.modal-head .title{ font-size: var(--s4); font-weight: 800; }
.modal-head button{
  background: none;
  border: 1.5px solid var(--ink);
  width: 40px; height: 40px;
  font-size: var(--s3);
  font-weight: 700;
  cursor: pointer;
}

/* ============ 숫자판 ============ */
.numpad-display{
  text-align: center;
  padding: 28px 20px 8px;
  font-family: 'Georgia', serif;
}
.numpad-display .big{
  font-size: var(--sBig);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.numpad-display .big.intake{ color: var(--intake); }
.numpad-display .big.burn  { color: var(--burn); }
.numpad-display .big.water { color: var(--water); }
.numpad-display .unit{ font-size: var(--s3); color: var(--muted); margin-top: 4px; }
.numpad-meta{
  text-align: center;
  font-size: var(--s1);
  color: var(--muted);
  letter-spacing: .08em;
  font-weight: 700;
  padding: 4px 20px 16px;
}
.numpad{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
}
.numpad button{
  background: var(--paper);
  border: 2px solid var(--ink);
  font-family: 'Georgia', serif;
  font-size: var(--s4);
  font-weight: 700;
  cursor: pointer;
  padding: 18px 0;
  min-height: 64px;
}
.numpad button:active{ background: var(--ink); color: var(--paper); }
.numpad button.fn{
  font-family: inherit;
  font-size: var(--s2);
  font-weight: 700;
  letter-spacing: .04em;
}
.numpad button.save{ background: var(--ink); color: var(--paper); }
.numpad button.save.intake-bg{ background: var(--intake); border-color: var(--intake); }
.numpad button.save.burn-bg  { background: var(--burn);   border-color: var(--burn); }
.numpad button.save.water-bg { background: var(--water);  border-color: var(--water); }
.numpad-memo{ padding: 0 16px 8px; }
.numpad-memo input{
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-size: var(--s2);
  outline: none;
}
.numpad-link{
  text-align: center;
  padding: 8px 16px 0;
  font-size: var(--s1);
  letter-spacing: .04em;
  font-weight: 700;
}
.numpad-link a{ color: var(--intake); text-decoration: underline; cursor: pointer; }

/* ============ 음식 상세 ============ */
.modal-body.detail h3{
  font-size: var(--s4);
  font-weight: 800;
  margin-bottom: 6px;
}
.modal-body.detail .mmeta{
  font-size: var(--s1);
  color: var(--muted);
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 18px;
}
.portion{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}
.portion button{
  width: 56px; height: 56px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: var(--s4);
  font-family: 'Georgia', serif;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.portion .amt{
  flex: 1;
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: var(--s5);
  font-weight: 700;
}
.portion .amt small{
  font-size: var(--s1);
  color: var(--muted);
  display: block;
  letter-spacing: .12em;
  font-weight: 700;
  margin-top: 2px;
}
.preview{
  text-align: center;
  padding: 16px 0;
  border-top: 1px dashed var(--ink);
  border-bottom: 1px dashed var(--ink);
  margin: 14px 0;
  font-family: 'Georgia', serif;
  font-size: var(--s5);
  font-weight: 800;
  color: var(--intake);
}
.preview small{
  font-size: var(--s1);
  color: var(--muted);
  display: block;
  letter-spacing: .12em;
  font-weight: 700;
  margin-top: 4px;
}
.macro-preview{
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink);
  margin-bottom: 14px;
  font-size: var(--s1);
  color: var(--muted);
  font-weight: 600;
}
.macro-preview span{ text-align: center; }
.macro-preview span strong{
  font-family: 'Georgia', serif;
  font-size: var(--s2);
  font-weight: 700;
  display: block;
  text-align: center;
}
.macro-preview .c strong{ color: var(--carb); }
.macro-preview .p strong{ color: var(--protein); }
.macro-preview .f strong{ color: var(--fat); }

/* ============ Rational Choice 경고 모달 ============ */
.warn-body-wrap{
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  min-height: 100vh;
}
.warn-modal-body{
  background: var(--paper);
  border: 3px solid var(--warn);
  width: 100%;
  padding: 24px 22px 28px;
  box-shadow: 5px 5px 0 var(--warn);
}
.warn-icon{
  text-align: center;
  font-size: 56px;
  margin-bottom: 8px;
}
.warn-title{
  text-align: center;
  font-size: var(--s4);
  font-weight: 800;
  color: var(--warn);
  margin-bottom: 12px;
}
.warn-body{
  background: #FFF5F2;
  border: 1.5px dashed var(--warn);
  padding: 14px;
  margin-bottom: 16px;
  font-size: var(--s2);
  line-height: 1.6;
}
.warn-body strong{ color: var(--warn); }
.alt-card{
  background: #F0F7F2;
  border: 2px solid var(--burn);
  padding: 14px 16px;
  margin-bottom: 16px;
  cursor: pointer;
}
.alt-card .alt-label{
  font-size: var(--s1);
  font-weight: 700;
  color: var(--burn);
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.alt-card .alt-name{
  font-size: var(--s3);
  font-weight: 700;
}
.alt-card .alt-meta{
  font-size: var(--s1);
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
}

/* ============ 위험 음식 긴급 미션 ============ */
.mission-overlay{
  position: fixed;
  inset: 0;
  background: rgba(192,57,43,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
}
.mission-overlay.show{ display: flex; }
.mission-card{
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  width: 100%;
  max-width: 440px;
  padding: 24px 22px;
  max-height: 90vh;
  overflow-y: auto;
}
.mission-icon{
  text-align: center;
  font-size: 64px;
  margin-bottom: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.mission-title{
  text-align: center;
  font-size: var(--s4);
  font-weight: 800;
  color: var(--warn);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.mission-sub{
  text-align: center;
  font-size: var(--s2);
  color: var(--muted);
  margin-bottom: 16px;
}
.mission-list{ margin: 0; padding: 0; list-style: none; }
.mission-item{
  background: var(--bg);
  border: 2px solid var(--ink);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: .2s;
}
.mission-item.done{
  background: #E8F5E9;
  border-color: var(--burn);
}
.mission-item .checkbox{
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--s3);
  font-weight: 800;
  color: var(--burn);
  background: var(--paper);
}
.mission-item.done .checkbox{ background: var(--burn); color: var(--paper); }
.mission-item .ml-text{
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: var(--s2);
  line-height: 1.4;
}
.mission-item .ml-text .ml-emoji{
  font-size: var(--s4);
  margin-right: 6px;
}

/* ============ 설정 화면 ============ */
.set-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px dashed var(--softline);
  gap: 12px;
}
.set-row:last-child{ border-bottom: none; }
.set-row .l{ flex: 1; min-width: 0; }
.set-row .l strong{
  display: block;
  font-size: var(--s3);
  font-weight: 700;
  margin-bottom: 2px;
}
.set-row .l span{
  font-size: var(--s1);
  color: var(--muted);
}
.set-row button{
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 10px 16px;
  font-size: var(--s1);
  letter-spacing: .08em;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 44px;
}
.set-row select{
  padding: 10px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: var(--s1);
  font-weight: 700;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* ============ 공유 모달 ============ */
.share-tpl{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.share-tpl button{
  flex: 1 1 auto;
  min-width: max-content;
  padding: 10px 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  font-size: var(--s1);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  min-height: 44px;
}
.share-tpl button.on{ background: var(--ink); color: var(--paper); }
.share-preview{
  background: var(--bg);
  border: 1.5px dashed var(--ink);
  padding: 18px 16px;
  font-family: 'Menlo','Consolas',monospace;
  font-size: var(--s2);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: keep-all;
  margin-bottom: 12px;
}

/* ============ 잠금 화면 ============ */
.lock-screen{
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 500;
}
.lock-screen.show{ display: flex; }
.lock-icon{ font-size: 80px; margin-bottom: 20px; }
.pin-input{
  font-family: 'Georgia', serif;
  font-size: var(--s5);
  text-align: center;
  letter-spacing: .5em;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 20px 24px;
  width: 240px;
  outline: none;
}
.lock-msg{
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--s1);
  height: 20px;
}
.lock-bio{
  margin-top: 24px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: var(--s1);
  font-weight: 700;
  background: var(--card);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.lock-bio:active{ background: var(--bg); }

/* ============ 토스트 ============ */
.toast{
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%) translateY(150px);
  background: var(--good);
  color: var(--paper);
  padding: 14px 26px;
  font-size: var(--s1);
  letter-spacing: .12em;
  font-weight: 700;
  transition: .3s;
  z-index: 200;
}
.toast.show{ transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--warn); }

/* ============ 좁은 화면 보정 ============ */
@media (max-width: 360px){
  html{ font-size: 16px; }
  .brand{ font-size: 2rem; }
  .ledger .balance{ font-size: 3rem; }
  .numpad-display .big{ font-size: 3rem; }
}