/* ============================================================
   style.css — 나의 컨트롤타워 (다크모드)
   색상 수정: :root 변수만 바꾸면 됨
   ============================================================ */
:root {
  --bg:       #000000;
  --bg2:      #1c1c1e;
  --bg3:      #2c2c2e;
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.15);
  --text:     #ffffff;
  --text2:    rgba(235,235,245,0.8);
  --text3:    rgba(235,235,245,0.4);
  --accent:   #0a84ff;
  --accent-bg:rgba(10,132,255,0.15);
  --ok:       #30d158;
  --ok-bg:    rgba(48,209,88,0.15);
  --warn:     #ff9f0a;
  --warn-bg:  rgba(255,159,10,0.15);
  --danger:   #ff453a;
  --danger-bg:rgba(255,69,58,0.15);
  --purple:   #7d7aff;
  --purple-bg:rgba(125,122,255,0.15);
  --r-sm:     8px;
  --r-md:     12px;
  --r-lg:     16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;font-size:14px;color:var(--text);-webkit-font-smoothing:antialiased}
input,button,textarea,select{font-family:inherit;font-size:inherit;color:inherit;outline:none;border:none;background:none}
button{cursor:pointer}
button:active{opacity:0.7}

/* ── 앱 레이아웃 ─────────────────────────────────────────── */
#app{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;background:var(--bg);overflow:hidden;position:relative}
.screen{flex:1;overflow:hidden;position:relative}
.page{position:absolute;inset:0;overflow-y:auto;display:none;flex-direction:column;background:var(--bg);-webkit-overflow-scrolling:touch}
.page.on{display:flex}
.scroll-body{flex:1;overflow-y:auto;padding:14px 16px 24px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}

/* ── 탑바 ──────────────────────────────────────────────── */
.topbar{background:var(--bg2);padding:14px 16px 12px;display:flex;align-items:center;gap:10px;flex-shrink:0;border-bottom:0.5px solid var(--border);position:sticky;top:0;z-index:10}
.topbar-title{font-size:17px;font-weight:600;color:var(--text);flex:1}
.back-btn{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:20px}
.icon-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:22px}

/* ── 하단 탭 ─────────────────────────────────────────────── */
.bottom-nav{background:var(--bg2);border-top:0.5px solid var(--border);display:flex;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0)}
.nt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px 6px;gap:3px;color:var(--text3);border-top:2px solid transparent;transition:color 0.15s}
.nt.on{color:var(--accent);border-top-color:var(--accent)}
.nt-icon{font-size:22px;line-height:1}
.nt-label{font-size:10px;font-weight:500}

/* ── 카드 ──────────────────────────────────────────────── */
.card{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:14px}
.card.tap{cursor:pointer}
.card.tap:active,.tap:active{transform:scale(0.98);opacity:0.9}
.ct{font-size:11px;font-weight:600;color:var(--text3);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;letter-spacing:0.5px}
.ct-l{display:flex;align-items:center;gap:6px}
.link-btn{font-size:12px;color:var(--accent)}

/* ── 달력 ──────────────────────────────────────────────── */
.cal-topbar{background:var(--bg2);padding:12px 16px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid var(--border);flex-shrink:0}
.cal-month{font-size:18px;font-weight:700;color:var(--text)}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav-btn{width:30px;height:30px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text2)}
.cal-today-btn{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-bg);padding:4px 12px;border-radius:99px}
.dow-row{display:grid;grid-template-columns:repeat(7,1fr);background:var(--bg2);padding:6px;border-bottom:0.5px solid var(--border);flex-shrink:0}
.dow{text-align:center;font-size:11px;font-weight:600;color:var(--text3);padding:3px 0}
.dow.sun{color:var(--danger)}.dow.sat{color:var(--accent)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);flex-shrink:0}
.dc{background:var(--bg2);min-height:72px;padding:4px 3px 3px;display:flex;flex-direction:column;gap:1.5px;cursor:pointer}
.dc:active{background:var(--bg3)}
.dc.other{background:#111}
.dc.sel{background:rgba(10,132,255,0.1);outline:1.5px solid var(--accent);outline-offset:-1px;z-index:1}
.dn-wrap{display:flex;justify-content:center;margin-bottom:2px}
.dn{font-size:12px;font-weight:600;color:var(--text2);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.dn.sun{color:var(--danger)}.dn.sat{color:var(--accent)}.dn.dim{color:var(--text3)}
.dn.tod{background:var(--danger);color:#fff}
.devs{display:flex;flex-direction:column;gap:1.5px}
.dev{font-size:9px;padding:1.5px 3px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;line-height:1.5}
.dev-in   {background:rgba(48,209,88,0.2);color:#30d158}
.dev-out  {background:rgba(255,69,58,0.18);color:#ff6961}
.dev-h    {background:rgba(10,132,255,0.2);color:#409cff}
.dev-sym  {background:rgba(255,159,10,0.2);color:#ffa040}
.dev-todo {background:rgba(125,122,255,0.2);color:#a3a0ff}
.dev-diary{background:rgba(174,174,178,0.15);color:#98989d}
.dev-ib   {background:rgba(255,214,10,0.2);color:#ffd60a}
.dev-gcal {background:rgba(66,133,244,0.2);color:#4285f4}

/* ── 달력 하단 상세 ─────────────────────────────────────── */
.cal-detail{background:var(--bg2);border-top:0.5px solid var(--border);flex-shrink:0;max-height:240px;overflow-y:auto}
.cal-det-head{padding:10px 16px 8px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);border-bottom:0.5px solid var(--border);z-index:2}
.cal-det-date{font-size:14px;font-weight:700;color:var(--text)}
.cal-det-add{font-size:12px;font-weight:600;color:var(--accent)}
.cal-det-body{padding:6px 14px 12px;display:flex;flex-direction:column;gap:4px}
.sec-lbl{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:0.5px;text-transform:uppercase;margin:6px 0 2px}
.di{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px}
.di.in  {background:rgba(48,209,88,0.1)}  .di.out  {background:rgba(255,69,58,0.1)}
.di.hth {background:rgba(10,132,255,0.1)} .di.sym  {background:rgba(255,159,10,0.1)}
.di.gcal{background:rgba(66,133,244,0.1)}
.di.td  {background:rgba(125,122,255,0.1)}.di.diary{background:rgba(255,255,255,0.05)}
.di.ib  {background:rgba(255,214,10,0.1)}
.di-ico{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.di-txt{flex:1;font-size:13px;color:var(--text2);line-height:1.4}
.di-txt.done{text-decoration:line-through;color:var(--text3)}
.di-val{font-size:12px;font-weight:600;white-space:nowrap}
.plus{color:var(--ok)}.minus{color:var(--danger)}.ok-c{color:var(--ok)}.warn-c{color:var(--warn)}.dng-c{color:var(--danger)}
.chk{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--bg3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:11px;transition:all 0.15s;color:transparent}
.chk.done{background:var(--ok);border-color:var(--ok);color:#fff}
.cal-empty{text-align:center;padding:20px;color:var(--text3);font-size:13px;line-height:1.7}

/* ── 홈 대시보드 ─────────────────────────────────────────── */
.home-greeting{font-size:13px;color:var(--text3)}
.home-name{font-size:22px;font-weight:700;color:var(--text)}
.home-topbar{padding:16px 16px 4px;display:flex;align-items:center;justify-content:space-between}
.metric-2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.metric-4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mc{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:14px;cursor:pointer}
.mc:active{transform:scale(0.98)}
.ml{font-size:11px;color:var(--text3);margin-bottom:4px}
.mv{font-size:22px;font-weight:600;color:var(--text)}
.ms{font-size:11px;margin-top:3px}

/* ── 알림 배너 ───────────────────────────────────────────── */
.alert-banner{background:var(--warn-bg);border:0.5px solid var(--warn);border-radius:var(--r-lg);padding:12px 14px;display:flex;align-items:center;gap:10px;color:var(--warn);cursor:pointer}
.alert-banner i:first-child{font-size:20px;flex-shrink:0}
.alert-text{flex:1;font-size:13px;line-height:1.5}

/* ── AI 박스 ─────────────────────────────────────────────── */
.ai-box{background:var(--purple-bg);border:0.5px solid rgba(125,122,255,0.2);border-radius:var(--r-lg);padding:12px 14px;display:flex;gap:10px;cursor:pointer}
.ai-av{width:28px;height:28px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.ai-txt{font-size:13px;color:var(--purple);line-height:1.6;flex:1}

/* ── 방문 목록 ───────────────────────────────────────────── */
.vi{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:0.5px solid var(--border);cursor:pointer}
.vi:last-child{border-bottom:none}
.vi:active{opacity:0.7}
.vdot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.vinfo{flex:1;min-width:0}
.vname{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vdiag{font-size:11px;color:var(--text3);margin-top:2px}
.vright{text-align:right;flex-shrink:0}
.vdate{font-size:11px;color:var(--text3)}
.vnext{font-size:10px;color:var(--accent);margin-top:2px}

/* ── 폼 ──────────────────────────────────────────────────── */
.form-body{flex:1;overflow-y:auto;padding:14px 16px 24px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.form-sec{font-size:11px;font-weight:700;color:var(--text3);padding:0 2px;text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}
.form-group{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.form-row{display:flex;align-items:center;padding:12px 14px;border-bottom:0.5px solid var(--border);gap:12px}
.form-row:last-child{border-bottom:none}
.form-lbl{font-size:13px;color:var(--text2);width:90px;flex-shrink:0}
.form-inp{flex:1;font-size:14px;color:var(--text);text-align:right;background:none}
.form-inp::placeholder{color:var(--text3)}
.form-sel{flex:1;font-size:14px;color:var(--text);text-align:right;background:none;-webkit-appearance:none}
.form-ta{width:100%;padding:12px 14px;font-size:14px;color:var(--text);background:none;resize:none;min-height:90px}
.form-ta::placeholder{color:var(--text3)}
.submit-btn{width:100%;padding:16px;background:var(--accent);color:#fff;border-radius:var(--r-lg);font-size:15px;font-weight:600;cursor:pointer;margin-top:4px}
.submit-btn:active{opacity:0.85}

/* ── 추가 버튼 ───────────────────────────────────────────── */
.add-btn{width:100%;background:var(--accent-bg);border:1px dashed var(--accent);border-radius:var(--r-lg);padding:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;color:var(--accent);cursor:pointer}
.add-btn:active{opacity:0.8}

/* ── 빈 상태 ─────────────────────────────────────────────── */
.empty-msg{text-align:center;color:var(--text3);font-size:14px;padding:40px 20px;line-height:1.8}

/* ── 뱃지 ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 8px;border-radius:99px;font-weight:500}
.b-blue{background:var(--accent-bg);color:var(--accent)}
.b-ok  {background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-dng {background:var(--danger-bg);color:var(--danger)}
.b-pur {background:var(--purple-bg);color:var(--purple)}

/* ── 상세 행 ─────────────────────────────────────────────── */
.dp-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:0.5px solid var(--border);font-size:14px}
.dp-row:last-child{border-bottom:none}
.dp-k{color:var(--text2)}.dp-v{font-weight:600;color:var(--text)}
.big-num{font-size:40px;font-weight:700;text-align:center;line-height:1.1}

/* ── 증상 칩 ─────────────────────────────────────────────── */
.sym-chips{display:flex;flex-wrap:wrap;gap:7px}
.sym-chip{display:flex;align-items:center;gap:5px;padding:7px 11px;border-radius:99px;border:1.5px solid var(--border2);background:var(--bg2);color:var(--text2);font-size:13px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:all 0.15s}
.sym-chip.sel{border-color:transparent;color:#fff}
.sym-chip:active{transform:scale(0.95)}
.sym-grp-lbl{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:0.5px;margin:10px 0 5px}
.sev-bar{display:flex;gap:6px}
.sev-dot{flex:1;height:36px;border-radius:var(--r-md);border:1.5px solid var(--border2);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text3);transition:all 0.15s}
.sev-dot.on{border-color:transparent;color:#fff}

/* ── 식습관 ─────────────────────────────────────────────── */
.food-cell{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:14px;cursor:pointer}
.food-cell:active{transform:scale(0.98)}
.food-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.food-meal{font-size:12px;font-weight:600;color:var(--text3);display:flex;align-items:center;gap:6px}
.food-items{font-size:14px;color:var(--text);line-height:1.6}
.food-items.empty{color:var(--text3);font-style:italic}
.water-cups{display:flex;gap:5px;margin-bottom:8px}
.wc{flex:1;height:18px;border-radius:4px;background:var(--bg3);cursor:pointer;transition:background 0.15s}
.wc.on{background:var(--accent)}
.prog-track{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:var(--accent);border-radius:3px;transition:width 0.3s}
.prog-lbl{font-size:11px;color:var(--text3);margin-top:5px}

/* ── 수입/지출 ───────────────────────────────────────────── */
.fin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fin-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:12px;text-align:center}
.fin-lbl{font-size:11px;color:var(--text3);margin-bottom:4px}
.fin-val{font-size:18px;font-weight:700}

/* ── AI 채팅 ─────────────────────────────────────────────── */
.chat-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
#chat-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.cmsg{display:flex;gap:8px;align-items:flex-start}
.cmsg.u{flex-direction:row-reverse}
.cbbl{max-width:80%;padding:10px 13px;border-radius:var(--r-lg);font-size:13px;line-height:1.6}
.cmsg.a .cbbl{background:var(--bg2);color:var(--text);border:0.5px solid var(--border)}
.cmsg.u .cbbl{background:var(--accent);color:#fff}
.cav{width:28px;height:28px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:2px}
.cav.u{background:var(--bg3);color:var(--text3)}
.chat-bar{display:flex;gap:8px;padding:10px 16px;background:var(--bg2);border-top:0.5px solid var(--border);padding-bottom:max(10px,env(safe-area-inset-bottom,10px));flex-shrink:0}
#chat-in{flex:1;padding:10px 14px;border-radius:99px;background:var(--bg);border:0.5px solid var(--border2);font-size:14px;color:var(--text)}
.chat-send{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.typing{letter-spacing:3px;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* ── 통계 ──────────────────────────────────────────────── */
.stat-row{display:flex;gap:12px}
.stat-item{flex:1}
.stat-lbl{font-size:10px;color:var(--text3);margin-bottom:2px}
.stat-val{font-size:14px;font-weight:600;color:var(--text)}
.list-lbl{font-size:12px;color:var(--text3);padding:0 2px}
.mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mini-stat{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:12px}
.mini-lbl{font-size:11px;color:var(--text3);margin-bottom:4px}
.mini-val{font-size:22px;font-weight:600;color:var(--text)}

/* ── 인바디 ─────────────────────────────────────────────── */
.ib-upload{background:var(--bg2);border:1.5px dashed var(--border2);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.ib-upload i{font-size:36px;color:var(--warn)}
.ib-upload-txt{font-size:14px;color:var(--text3);text-align:center;line-height:1.6}
.ib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ib-item{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--r-md);padding:12px}
.ib-item-lbl{font-size:11px;color:var(--text3);margin-bottom:4px}
.ib-item-val{font-size:18px;font-weight:700;color:var(--text)}
.ib-item-unit{font-size:11px;color:var(--text3);margin-left:3px}

/* ── 할일 ──────────────────────────────────────────────── */
.todo-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:0.5px solid var(--border)}
.todo-item:last-child{border-bottom:none}
.todo-chk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;font-size:12px;transition:all 0.15s;color:transparent}
.todo-chk.done{background:var(--ok);border-color:var(--ok);color:#fff}
.todo-txt{flex:1;font-size:14px;color:var(--text)}
.todo-txt.done{text-decoration:line-through;color:var(--text3)}

/* ── 로딩 / 토스트 ───────────────────────────────────────── */
.loading{display:flex;justify-content:center;padding:40px}
.loading::after{content:'';width:24px;height:24px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(30,30,30,0.95);color:#fff;padding:10px 20px;border-radius:99px;font-size:13px;white-space:nowrap;opacity:0;transition:opacity 0.25s,transform 0.25s;z-index:999;pointer-events:none;backdrop-filter:blur(10px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-ok{background:rgba(48,209,88,0.9)}.toast-err{background:rgba(255,69,58,0.9)}

/* ── 날짜 선택기 ─────────────────────────────────────────── */
.date-sel{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}