/* 끼니 — 라이트 헬시 그린 */
:root{
  --ink:#1c2520; --sub:#54655c; --faint:#8ba295; --line:#e2eae5; --bg:#fbfdfb; --panel:#f2f7f3;
  --green:#16a34a; --green-d:#118a3e; --amber:#f59e0b; --red:#ef4444; --blue:#3b82f6;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Noto Sans KR",-apple-system,sans-serif; color:var(--ink); background:var(--bg); padding-bottom:80px;}
.wrap{max-width:560px; margin:0 auto; padding:0 18px;}

.top{text-align:center; padding:44px 0 4px;}
.top h1{font-size:40px; font-weight:900; margin:0; letter-spacing:-1.5px;}
.top h1 .g{color:var(--green)}
.top .tag{color:var(--sub); font-size:14.5px; margin:8px 0 0; line-height:1.8;}
.top .tag b{color:var(--ink)}

/* 오늘 누적 (localStorage) */
#today{margin-top:18px;}
.tcard{background:var(--panel); border:1.5px solid var(--line); border-radius:16px; padding:14px 16px;}
.trow{display:flex; align-items:baseline; gap:8px;}
.trow .tl{font-size:13px; font-weight:900; color:var(--sub);}
.trow .tv{font-size:22px; font-weight:900; margin-left:auto;}
.trow .tg{font-size:12px; color:var(--faint);}
.tbar{height:10px; border-radius:6px; background:#e5efe8; overflow:hidden; margin-top:8px;}
.tfill{height:100%; border-radius:6px; background:linear-gradient(90deg,#22c55e,#f59e0b 75%,#ef4444); transition:width .5s;}
.tmeals{margin-top:9px; display:flex; flex-wrap:wrap; gap:6px;}
.tmeal{font-size:11.5px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--sub);}
.tmeal b{color:var(--ink)}
.tset{color:var(--faint); font-size:11.5px; margin-top:8px; text-align:right;}
.tset a{color:var(--green); cursor:pointer; text-decoration:none;}

/* 업로드 */
.drop{margin-top:14px; border:2.5px dashed var(--line); border-radius:18px; padding:36px 16px; text-align:center; cursor:pointer; background:#fff;}
.drop:hover{border-color:var(--green)}
.drop .big{font-size:44px}
.drop .t1{font-size:16.5px; font-weight:800; margin-top:8px;}
.drop .t2{color:var(--faint); font-size:12.5px; margin-top:5px; line-height:1.7;}
#file{display:none}
.meals{display:flex; gap:7px; margin-top:11px;}
.meals button{flex:1; font:inherit; font-size:13px; background:#fff; border:1.5px solid var(--line); color:var(--sub); border-radius:10px; padding:9px; cursor:pointer;}
.meals button.on{border-color:var(--green); color:var(--green); font-weight:800;}
.priv{color:var(--faint); font-size:12px; text-align:center; margin-top:11px; line-height:1.7;}
.priv b{color:var(--sub)}

#loading{text-align:center; color:var(--sub); font-size:14px; margin-top:26px; line-height:2;}
.spinner{display:inline-block; animation:rot 1s steps(10) infinite;}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* 결과 */
#result{animation:pop .4s; margin-top:18px;}
.rcard{background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 3px 18px rgba(28,37,32,.05);}
.rmeal{font-size:12px; font-weight:900; color:var(--green); letter-spacing:2px; text-align:center;}
.rtotal{text-align:center; font-size:46px; font-weight:900; line-height:1.15;}
.rtotal small{font-size:18px; color:var(--sub); font-weight:700;}
.rrange{text-align:center; color:var(--faint); font-size:12.5px;}
.gauge{height:12px; border-radius:7px; background:#e5efe8; overflow:hidden; margin:12px 6px 4px;}
.gfill{height:100%; border-radius:7px; transition:width .7s;}
.gcap{display:flex; justify-content:space-between; color:var(--faint); font-size:11px; padding:0 6px;}

.chipsrow{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; justify-content:center;}
.fchip{font-size:12.5px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 12px;}
.fchip b{color:var(--green-d)}

.macros{display:flex; gap:8px; margin-top:14px;}
.macro{flex:1; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px;}
.macro .mk{font-size:11px; color:var(--faint); font-weight:900;}
.macro .mv{font-size:17px; font-weight:900; margin-top:2px;}

.coach{margin-top:14px; background:#eefaf1; border:1.5px solid #bfe8cc; border-radius:14px; padding:13px 15px; font-size:14.5px; line-height:1.8;}
.coach .cl{font-size:11px; font-weight:900; color:var(--green-d); letter-spacing:1px; display:block; margin-bottom:4px;}
.rnote{color:var(--faint); font-size:11.5px; margin-top:10px; text-align:center;}

.actions{display:flex; gap:9px; margin-top:14px;}
.actions button, .actions a{flex:1; text-align:center; text-decoration:none; font:inherit; font-size:14px; font-weight:800; padding:13px; border-radius:12px; border:1.5px solid var(--line); color:var(--ink); background:#fff; cursor:pointer;}
.actions .prime{background:var(--green); border-color:var(--green); color:#fff;}
#shareOut{text-align:center; color:var(--faint); font-size:12.5px; margin-top:9px;}
.foot{margin-top:42px; text-align:center; color:var(--faint); font-size:12px; line-height:1.9;}
.hidden{display:none}
a{color:var(--green)}