/* 건강수첩 — 화면 스타일(승인 시안 2026-10-09 그대로). 색: 정상 초록 · 높음 주황 · 300↑ 빨강 · 낮음 파랑 */
:root{
  --ok:#008300; --hi:#e08a00; --vh:#c92f2f; --lo:#1f66c2;
  --bg:#fcfcfb; --card:#fff; --line:#e6e6e3; --soft:#f1f1ef;
  --ink:#0b0b0b; --sub:#52514e; --muted:#8a8984;
  --accent:#2a78d6; --accent-soft:#e8f1fc; --band:#e9f5e9;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:'Noto Sans KR','Apple SD Gothic Neo',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
.main{padding:8px 16px 96px;max-width:560px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 16px 4px;max-width:560px;margin:0 auto}
.top h1{font-size:24px;font-weight:800}
.top .right{display:flex;gap:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:12px}
.lbl{font-size:13px;color:var(--sub)}
.big{font-size:40px;font-weight:800;letter-spacing:-1px}
.u{font-size:16px;color:var(--sub);font-weight:500;margin-left:4px}
.t{font-size:12px;color:var(--muted);margin-top:2px}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;margin-left:6px;vertical-align:middle}
.tag.ok{background:#e4f3e4;color:#006b00}.tag.high{background:#fdf0dc;color:#a35f00}.tag.very_high{background:#fbe5e5;color:var(--vh)}.tag.low{background:#e3edfa;color:var(--lo)}
.c-ok{color:var(--ink)}.c-high{color:#a35f00}.c-very_high{color:var(--vh)}.c-low{color:var(--lo)}
.warn{background:#fbe5e5;color:#8f1f1f;border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.5;margin-top:10px}
.btns{display:flex;gap:10px;margin:4px 0 12px}
.btn{flex:1;background:var(--accent);color:#fff;font-weight:800;font-size:17px;text-align:center;padding:16px 0;border-radius:16px}
.btn.g{background:#fff;color:var(--accent);border:2px solid var(--accent)}
.tabs{display:flex;background:var(--soft);border-radius:99px;padding:4px;margin-bottom:12px}
.tabs button{flex:1;padding:8px 0;font-size:14px;color:var(--sub);border-radius:99px}
.tabs .on{background:#fff;color:var(--ink);font-weight:800;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:14px;padding:7px 13px;border-radius:99px;border:1px solid var(--line);color:var(--sub);background:#fff}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--soft);width:100%;text-align:left}
.row:first-child{border-top:0}
.v{font-size:19px;font-weight:700}
.ic{font-size:13px;color:var(--sub);text-align:right;line-height:1.5}
.note{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5}
.legend{font-size:11px;color:var(--sub);display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 8px}
.dot{display:inline-block;width:8px;height:8px;border-radius:9px;margin-right:3px}
.prog{display:flex;align-items:center;gap:8px;margin-top:8px}
.prog .t{flex:0 0 auto;min-width:64px}
.pd{display:flex;gap:4px;flex-wrap:wrap}
.pdot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--soft);border:1px solid var(--line)}
.pdot.on{background:var(--accent);border-color:var(--accent)}
.nav{display:flex;align-items:center;gap:10px;margin:8px 0}
.nav button{font-size:20px;color:var(--sub);padding:0 6px}
.nav .lbl{flex:1;text-align:center}
.empty{color:var(--muted);text-align:center;padding:24px 0;font-size:14px}
svg text{font-family:inherit}
/* 입력 */
.f{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.f .lbl{margin-bottom:8px}
.inp{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:17px;background:#fff}
.num{width:100%;border:0;font-size:46px;font-weight:800;text-align:center;background:transparent;outline:none}
.num2{display:flex;gap:10px;align-items:center}.num2 .num{font-size:40px}.num2 span{font-size:28px;color:var(--muted)}
.auto{background:var(--accent-soft);color:var(--lo);font-weight:700;font-size:14px;padding:8px 12px;border-radius:12px;margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.auto.warn{background:#fdf0dc;color:#a35f00}
.save{display:block;width:100%;background:var(--accent);color:#fff;text-align:center;font-weight:800;font-size:18px;padding:16px;border-radius:16px;margin-top:6px}
.save:disabled{opacity:.5}
.del{display:block;width:100%;color:var(--vh);text-align:center;font-weight:700;padding:14px;margin-top:6px}
.small-btn{font-size:13px;color:var(--accent);font-weight:700;margin-left:6px;white-space:nowrap}
.row>.inp{flex:1;margin-right:8px}
/* 탭 줄 */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar>div{display:flex;max-width:560px;margin:0 auto}
.tabbar button{flex:1;padding:10px 0 12px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar button b{font-size:19px;font-weight:400}
.tabbar .on{color:var(--accent);font-weight:800}
/* 잠금·안내 */
.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;gap:14px}
.center .logo{font-size:56px}.center h1{font-size:24px}.center p{color:var(--sub);line-height:1.6}
.b1{background:var(--accent);color:#fff;font-weight:800;font-size:17px;padding:15px 28px;border-radius:16px;min-width:220px}
.b2{background:var(--soft);color:var(--ink);font-weight:700;font-size:16px;padding:14px 22px;border-radius:14px}
.b1:disabled{opacity:.5}
/* 토스트·확인창(브라우저 기본 confirm 금지 — 주인님 규칙) */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#222;color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;z-index:50;max-width:88vw;text-align:center}
.dlgveil{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.dlg{background:#fff;border-radius:22px 22px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom));width:100%;max-width:560px}
.dlg h3{font-size:18px;margin-bottom:8px}.dlg p{color:var(--sub);font-size:14px;margin-bottom:14px;line-height:1.5}
.dlg .btns button{flex:1}
body.busy::before{content:"";position:fixed;top:0;left:0;height:3px;width:40%;background:var(--accent);animation:bar 1s linear infinite;z-index:60}
@keyframes bar{from{left:-40%}to{left:100%}}