:root{
  --bg:#0f1723;
  --card:#121a27;
  --ink:#dfe7ff;
  --ink-dim:#a3b1d6;
  --primary:#7aa7ff;
  --primary-ink:#0b1220;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif}

/* 중앙 정렬 컨테이너 */
.container{max-width:1200px;margin:0 auto;padding:16px}

/* 카드 */
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px;margin:14px 0}

/* === AppBar 통일 스타일 === */
.appbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(15,23,35,.85);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.appbar .wrap{
  max-width:1200px;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  margin:0;
  font-size:20px;
  font-weight:700;
  color:var(--ink);
}
.nav{
  display:flex;
  gap:8px;
  align-items:center;
}
.navlink{
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  color:#cbd5e1;
  font-weight:500;
  font-size:14px;
  border:1px solid transparent;
  transition:all .2s ease;
  white-space:nowrap;
  min-width:fit-content;
}
.navlink:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
}
.navlink.active{
  background:linear-gradient(135deg, #7aa2ff 0%, #6ea8fe 100%);
  color:#0b1220;
  font-weight:700;
  border-color:transparent;
  box-shadow:0 2px 8px rgba(122, 162, 255, 0.3);
}

/* pills */
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:6px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--ink);cursor:pointer;pointer-events:auto}
.pill-active{background:var(--primary);color:var(--primary-ink);border-color:transparent}

/* 차트 박스(반응형) */
.chart-box{position:relative;width:100%;min-height:clamp(220px,45vw,360px)}
[id^="chart-"], #avgCombinedChart{width:100%!important;height:100%!important}

/* 표 */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:10px;border-bottom:1px dashed rgba(255,255,255,.08)}
.tbl thead th{color:var(--ink-dim);font-weight:600}

/* 체크박스(처방약) 크게 + 테마 색 */
.chk input[type="checkbox"]{
  width:18px; height:18px;
  accent-color: var(--primary);
  transform: translateY(2px);
}

/* 최근 기록 배지 공통/분기 */
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; line-height:1; }
.badge--rx   { background:#65b7ff; color:#0b1220; }   /* 복용(처방약) - 파랑 */
.badge--ibu  { background:#ff9f43; color:#0b1220; }   /* 부르펜(ibuprofen) - 주황 */
.badge--apap { background:#ffd166; color:#0b1220; }   /* 타이레놀(acetaminophen) - 노랑 */

/* 차트 컨테이너(빈 상태 가이드) */
.chart-empty{
  min-height:140px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-dim); border:1px dashed rgba(255,255,255,.08); border-radius:10px;
}

/* 차트 카드 모바일 스크롤 */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow-x: auto; /* 가로 스크롤 추가 */
}

@media (max-width: 768px) {
  .charts-grid {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  }
}

/* === 통계 페이지 네비게이션 보완 === */
nav {
  margin-bottom: 1rem;
}

/* === 통계 페이지 전용 스타일 === */
.status { 
  background: var(--card); 
  border: 1px solid rgba(255,255,255,.06); 
  border-radius: 12px; 
  padding: 12px; 
}

.status-name { 
  font-weight: 700; 
  margin-bottom: 4px; 
}

.badge.ok { 
  background: #10b981; 
  color: #0b1220; 
}

.badge.warn { 
  background: #f59e0b; 
  color: #0b1220; 
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  .appbar .wrap {
    padding: 12px 16px;
  }

  .brand {
    font-size: 18px;
  }

  .nav {
    gap: 6px;
  }

  .navlink {
    padding: 8px 12px;
    font-size: 13px;
  }
}