/* ============================================================
   safe caffeine — Instagram Modern
   · 절대 흰 배경(#ffffff), 1px #dbdbdb 보더, 그림자 없음
   · 피드 아이템은 edge-to-edge (radius 0), 버튼 8px, 아바타 50%
   · 브랜드 그라디언트는 강조에만 — 워드마크 / 선택된 링 / 액티브 인디케이터
   ============================================================ */

/* ---------- 1. 토큰 ---------- */
/* 다크가 기본값. 라이트는 [data-theme="light"]로만 켜진다. */
:root {
  --bg: #000000;
  --surface: #121212;
  --text: #fafafa;
  --text-2: #a8a8a8;
  --border: #262626;
  --link: #e0f1ff;
  --action: #0095f6;          /* 프라이머리 액션 */
  --danger: #ff5c68;
  --grad: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* 데이터 색 — 브랜드 그라디언트 스톱에서 파생 */
  --g1: #f09433;
  --g2: #e6683c;
  --g3: #dc2743;
  --g4: #cc2366;
  --g5: #bc1888;

  --c-warn:    var(--g1);   /* 기상·준비 */
  --c-commute: var(--g2);   /* 통근 */
  --c-work:    #fafafa;     /* 근무 — 하루를 채우는 단색 블록 */
  --c-free:    var(--g4);   /* 회복·이완 */
  --c-sleep:   var(--g5);   /* 수면 */
  --c-alert:   var(--g3);   /* 각성 유지선 */
  --c-caffein: var(--g1);   /* 카페인 */

  --fs: 14px;
  --r-btn: 8px;

  color-scheme: dark;
}

/* 라이트 모드 — 토글로만 진입 */
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #fafafa;
  --text: #262626;
  --text-2: #8e8e8e;
  --border: #dbdbdb;
  --link: #00376b;
  --danger: #ed4956;
  --c-work: #262626;
  color-scheme: light;
}

/* ---------- 2. 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 18px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* 폼 컨트롤과 SVG 텍스트는 폰트를 상속하지 않으므로 명시한다 */
button, input, select, textarea { font-family: var(--font); }
svg text { font-family: var(--font); }
button { font: inherit; color: inherit; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. 상단 바 ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.appbar-inner {
  max-width: 975px; margin: 0 auto;
  height: 54px;
  padding: 0 16px;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong {
  font-size: 20px; font-weight: 700; line-height: 24px;
  letter-spacing: -0.4px;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.brand-text small {
  font-size: 11px; line-height: 14px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tabs { display: none; margin-left: auto; gap: 4px; }
.tab {
  position: relative;
  height: 54px; padding: 0 16px;
  border: 0; background: transparent;
  color: var(--text-2);
  font-size: var(--fs); font-weight: 600;
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); }
.tab.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; background: var(--grad);
}
.icon-btn {
  margin-left: auto; flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text);
  cursor: pointer;
}
.tabs ~ .icon-btn { margin-left: 8px; }
.icon-btn:hover { background: var(--surface); }
.ico-sun { display: none; }
.ico-moon { display: block; }
:root[data-theme="light"] .ico-sun { display: block; }
:root[data-theme="light"] .ico-moon { display: none; }

/* ---------- 4. 레이아웃 ---------- */
main {
  max-width: 975px; margin: 0 auto;
  padding: 0 0 72px;
}
.view { display: none; }
.view.is-active { display: block; }
.view-title {
  padding: 24px 16px 0;
  font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: -0.3px;
}
.view-sub {
  padding: 4px 16px 0;
  font-size: var(--fs); line-height: 18px; color: var(--text-2);
}
.grid {
  margin-top: 20px;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}

/* ---------- 5. 카드 = 피드 포스트 ---------- */
.card {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;                 /* edge-to-edge */
  padding: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: -16px -16px 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.card > .card-head + * { margin-top: 16px; }
.card-title {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs); font-weight: 600; line-height: 18px;
}
.card-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad); flex: none;
}
.card > .card-title:first-child { margin: -16px -16px 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.card-caption { font-size: 12px; line-height: 16px; color: var(--text-2); }

/* ---------- 6. 폼 ---------- */
.field-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-grow { grid-column: 1 / -1; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.field-help { font-size: 12px; line-height: 15px; color: var(--text-2); }
input[type="time"], input[type="number"], input[type="text"], input[type="date"], select {
  width: 100%; height: 44px;
  /* iOS Safari의 time/date 입력은 내용 폭만큼 벌어져 width:100%를 넘긴다.
     min-width:0 + appearance:none 이 있어야 컨테이너 안에 갇힌다. */
  min-width: 0; max-width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs);
  font-variant-numeric: tabular-nums;
}
input[type="time"], input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block;
  text-align: center;
  overflow: hidden;
}
/* iOS Safari 전용 — 겉을 아무리 줄여도 내부 값 영역이 고유 폭을 유지해 부모를 넘긴다.
   shadow DOM 안쪽을 직접 100%로 묶어야 실제로 줄어든다. */
input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit {
  width: 100%; min-width: 0; padding: 0; overflow: hidden;
}
input[type="time"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-date-and-time-value {
  width: 100%; min-width: 0; margin: 0; text-align: center;
}
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  width: 100%; min-width: 0; padding: 0;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0; padding: 0; flex: none;
}
input:hover, select:hover { border-color: var(--text-2); }
input:focus, select:focus { outline: 0; border-color: var(--text); background: var(--bg); }
select {
  appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* 히어로 필드 */
.field-hero {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;          /* 내부 입력이 어떤 이유로든 넘쳐도 카드 밖으로 새지 않게 */
  min-width: 0;
}
.field-hero .field-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.field-hero + .field-grid { margin-top: 12px; }
.stat-row + .notes { margin-top: 16px; }
.field-hero input {
  height: 52px; font-weight: 600;
  font-size: clamp(16px, 4.6vw, 20px);
  background: var(--bg);
}

.btn-filled {
  height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-btn);
  background: var(--action); color: #fff;
  font-size: var(--fs); font-weight: 600;
  cursor: pointer;
}
.btn-filled:hover { background: #1877f2; }
.btn-big { height: 48px; }
.btn-tonal {
  flex: none; height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: var(--bg); color: var(--text);
  font-size: var(--fs); font-weight: 600; cursor: pointer;
}
.btn-tonal:hover { background: var(--surface); }
.btn-text {
  height: 32px; padding: 0 8px;
  border: 0; background: transparent; color: var(--action);
  font-size: var(--fs); font-weight: 600; cursor: pointer;
}
.btn-text:hover { color: var(--link); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: var(--bg); color: var(--text);
  font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.chip:hover { background: var(--surface); }
.chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }

.seg { display: flex; }
.seg-btn {
  flex: 1; height: 44px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text-2);
  font-size: var(--fs); font-weight: 600; cursor: pointer;
}
.seg-btn:first-child { border-radius: var(--r-btn) 0 0 var(--r-btn); }
.seg-btn:last-child { border-radius: 0 var(--r-btn) var(--r-btn) 0; border-left: 0; }
.seg-btn.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- 7. 통계 타일 — 프로필 스탯 패턴 ---------- */
.stat-row {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.stat-value {
  order: 1;
  font-size: 20px; font-weight: 600; line-height: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-label {
  order: 2;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.stat-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, var(--text)); flex: none;
}
.stat-sub { order: 3; font-size: 12px; line-height: 15px; color: var(--text-2); }
.stat.is-warn { border-color: var(--danger); }
.stat.is-warn .stat-value { color: var(--danger); }

/* ---------- 11. 노트 ---------- */
.notes { display: grid; gap: 2px; }
.note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px; line-height: 18px; color: var(--text);
}
.notes li:last-child { border-bottom: 0; padding-bottom: 0; }
.note b { font-weight: 600; }
.note-ico {
  flex: none; width: 28px; height: 28px; padding: 6px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
}
.note.is-alert .note-ico { background: var(--danger); color: #fff; }
.note.is-alert b { color: var(--danger); }
.note.is-good .note-ico { background: var(--grad); color: #fff; }

/* ---------- 12. 음료 선택 — 스토리 링 ---------- */
.drink-groups { display: grid; gap: 20px; }
.group-title {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.drink-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.drink {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 6px 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); color: var(--text);
  cursor: pointer; text-align: center;
}
.drink:hover { background: var(--surface); }
.ring {
  width: 66px; height: 66px; padding: 2px; border-radius: 50%;
  background: var(--border);
  display: grid; place-items: center;
}
.ring-in {
  width: 100%; height: 100%; padding: 2px; border-radius: 50%;
  background: var(--bg);
  display: grid; place-items: center;
}
.ring-face {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface); color: var(--text);
  display: grid; place-items: center;
}
.drink.is-active .ring { background: var(--grad); }
.drink.is-active .ring-face { background: var(--bg); }
.drink-name {
  margin-top: 6px;
  font-size: 12px; font-weight: 600; line-height: 15px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drink.is-active .drink-name { color: var(--text); }
.drink-mg {
  font-size: 12px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.drink-mg em { font-style: normal; font-weight: 400; color: var(--text-2); }
.drink-sub { font-size: 11px; line-height: 13px; color: var(--text-2); }

.picked {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.picked-ico {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); color: var(--text);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px transparent;
}
.picked-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.picked-name { font-size: var(--fs); font-weight: 600; }
.picked-sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2);
}
.picked-sub input { width: 76px; height: 34px; padding: 0 8px; text-align: right; background: var(--bg); }

.intake-form { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: end; margin-top: 12px; }
.time-row { display: flex; gap: 8px; }
.time-row input { flex: 1; min-width: 0; }

.intake-list { display: grid; margin-top: 8px; }
.intake-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.intake-list li:last-child { border-bottom: 0; }
.ii-ico {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--text);
}
.ii-time { font-size: var(--fs); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 44px; }
.ii-name { flex: 1; min-width: 0; font-size: var(--fs); font-weight: 600; }
.ii-name .stat-sub { display: block; font-weight: 400; }
.ii-mg { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ii-del {
  flex: none; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--text-2); cursor: pointer; font-size: 18px; line-height: 1;
}
.ii-del:hover { background: var(--surface); color: var(--danger); }
.intake-item.is-late .ii-ico { background: var(--danger); color: #fff; }
.intake-item.is-late .ii-mg { color: var(--danger); }
.empty {
  padding: 28px 12px; text-align: center;
  font-size: 13px; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 12px;
  margin-top: 8px;
}

/* ---------- 13. 차트 ---------- */
.chart-wrap { margin: 0 -16px; }
.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- 16. 푸터 ---------- */
.foot {
  margin-top: 28px; padding: 20px 16px 8px;
  font-size: 12px; line-height: 16px; color: var(--text-2);
  display: grid; gap: 4px;
  text-align: center;
}
.foot-dim { opacity: .8; }

/* ---------- 16-b. 계정 · 로그인 ---------- */
.account-slot { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
  text-transform: uppercase;
}
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.avatar-btn {
  padding: 2px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; line-height: 0;
}
.avatar-btn.is-active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-link {
  border: 0; background: transparent; color: var(--action);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px;
}
.btn-link:hover { color: var(--link); }
.btn-danger {
  height: 44px; padding: 0 16px;
  border: 1px solid var(--danger); border-radius: var(--r-btn);
  background: transparent; color: var(--danger);
  font-size: var(--fs); font-weight: 600; cursor: pointer;
}
.btn-danger:hover { background: var(--danger); color: #fff; }
.sync-badge {
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.sync-badge.is-saving { color: var(--action); }

.auth-wrap {
  max-width: 350px; margin: 0 auto;
  padding: 32px 16px 40px;
  display: grid; gap: 10px;
}
.auth-card {
  padding: 28px 32px 24px;
  border: 1px solid var(--border);
  background: var(--bg);
  text-align: center;
}
.auth-logo {
  font-size: 32px; font-weight: 700; letter-spacing: -0.8px;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-lead { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.auth-form { display: grid; gap: 8px; margin-top: 22px; }
.auth-form input { height: 42px; }
.auth-form .btn-filled { margin-top: 8px; }
.auth-error {
  min-height: 16px;
  font-size: 12px; line-height: 16px; color: var(--danger);
}
.auth-switch {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 18px; font-size: 13px; color: var(--text-2);
}
.auth-guest { justify-self: center; margin-top: 4px; }
.turnstile-box:empty { display: none; }

.account-row { display: flex; align-items: center; gap: 16px; }
.account-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.account-id strong { font-size: var(--fs); font-weight: 600; word-break: break-all; }
.account-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- 17. 하단 탭바 (모바일) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bn-item {
  flex: 1; height: 50px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-2);
  cursor: pointer;
}
.bn-item.is-active { color: var(--text); }
.bn-item.is-active svg { stroke-width: 2.4; }

/* ---------- 18. 반응형 ---------- */
@media (min-width: 700px) {
  .intake-form { grid-template-columns: minmax(0, 1fr) auto; }
  .drink-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 940px) {
  .tabs { display: flex; }
  .bottom-nav { display: none; }
  main { padding-bottom: 32px; }

  .view-title { padding-left: 0; padding-right: 0; }
  .view-sub { padding-left: 0; padding-right: 0; }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; align-items: start;
    padding: 0;
  }
  .span-2 { grid-column: 1 / -1; }

  .card { border: 1px solid var(--border); border-radius: 0; }
  .drink-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-hero { flex-direction: row; align-items: center; gap: 16px; }
  .field-hero .field-label { flex: none; }
  .field-hero input { width: 210px; }
  .field-hero .field-help { flex: 1; }
  .dl-time { font-size: 30px; line-height: 34px; }
  .foot { text-align: left; padding-left: 0; padding-right: 0; }
}

/* 좁은 화면 */
@media (max-width: 699px) {
  .tl-mark span { display: none; }
  .tl-marks { height: 14px; }
  .field-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .brand-text small { display: none; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}

/* 로그인 화면에서는 네비게이션과 푸터를 감춘다 */
body.is-auth .bottom-nav,
body.is-auth .tabs,
body.is-auth .foot,
body.is-auth .account-slot { display: none; }


/* ---------- 20. safe caffeine 전용 ---------- */
.hero-pair { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.hero-pair + .field-grid { margin-top: 12px; }
.cols-2 { grid-template-columns: 1fr; }

/* 지금 배너 */
.now-banner {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  border-left: 3px solid var(--text-2);
}
.now-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.now-body { font-size: 13px; line-height: 18px; color: var(--text-2); }
.now-body b { color: var(--text); font-weight: 600; }
.now-banner.is-ok   { border-left-color: var(--c-sleep); }
.now-banner.is-warn { border-left-color: var(--c-warn); }
.now-banner.is-bad  { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.now-banner.is-bad .now-title { color: var(--danger); }

/* 수면 주기 블록 */
.cycles { display: flex; gap: 4px; height: 22px; }
.cyc {
  flex: 1; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border);
}
.cyc.is-on { background: var(--grad); border-color: transparent; }

/* 카페인 한도 게이지 */
.quota { margin-bottom: 16px; }
.quota-bar {
  position: relative; height: 10px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--border); overflow: hidden;
}
.quota-bar i { display: block; height: 100%; background: var(--grad); transition: width .2s ease; }
.quota-bar i.is-over { background: var(--danger); }
.quota-scale { display: flex; justify-content: space-between; margin-top: 6px; }
.quota-scale span { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* 버티기 — 필요량 */
.dose-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); text-align: center;
}
.dose-num {
  font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dose-num em { font-style: normal; font-size: 20px; font-weight: 700; margin-left: 3px; }
.dose-sub { font-size: 13px; line-height: 18px; color: var(--text-2); max-width: 46ch; }
.dose-box.is-over { border-color: var(--danger); }
.dose-box.is-over .dose-num { background: none; color: var(--danger); }
.dose-box.is-good .dose-num { background: none; color: var(--c-sleep); }

.equiv {
  margin-top: 12px;
  display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.equiv-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.equiv-ico { color: var(--c-caffein); line-height: 0; }
.equiv-n {
  font-size: 22px; font-weight: 700; line-height: 26px;
  font-variant-numeric: tabular-nums;
}
.equiv-n em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.equiv-name { font-size: 12px; font-weight: 600; }
.equiv-mg { font-size: 11px; color: var(--text-2); }

/* 한 번에 vs 나눠서 */
.compare { display: grid; gap: 8px; grid-template-columns: 1fr; }
.cmp {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}
.cmp.is-best { border-color: var(--c-sleep); background: var(--surface); }
.cmp-tag { font-size: 12px; font-weight: 700; color: var(--text-2); }
.cmp.is-best .cmp-tag { color: var(--c-sleep); }
.cmp-num {
  font-size: 26px; font-weight: 700; line-height: 30px; letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}
.cmp-num em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.cmp-sub { font-size: 12px; line-height: 16px; color: var(--text-2); }

/* 기록 추세 */
.trend { display: flex; gap: 6px; align-items: flex-end; height: 150px; margin-top: 16px; }
.trend-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  height: 100%; justify-content: flex-end;
}
.trend-bar {
  width: 100%; max-width: 34px; border-radius: 4px 4px 0 0;
  background: var(--grad); min-height: 3px;
}
.trend-bar.is-over { background: var(--danger); }
.trend-caf { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend-sleep { font-size: 11px; color: var(--c-sleep); font-variant-numeric: tabular-nums; }
.trend-date { font-size: 10px; color: var(--text-2); }

/* 기록 목록 */
.rec-list { display: grid; }
.rec-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.rec-list li:last-child { border-bottom: 0; }
.rec-date {
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 84px;
}
.rec-body { flex: 1; display: flex; gap: 12px; align-items: baseline; }
.rec-caf { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-caf.is-over { color: var(--danger); }
.rec-sleep { font-size: 13px; color: var(--c-sleep); font-variant-numeric: tabular-nums; }

@media (min-width: 700px) {
  .equiv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .compare { grid-template-columns: 1fr 1fr; }
  .cols-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .hero-pair { grid-template-columns: 1fr; }
  .dose-num { font-size: 44px; }
}

.chip em {
  font-style: normal; font-weight: 500;
  margin-left: 5px; color: var(--text-2);
}
.chip.is-active em { color: inherit; opacity: .7; }


/* 좁은 화면에서 목표 수면 칩을 2열로 */
@media (max-width: 560px) {
  #cycleChips { display: grid; grid-template-columns: 1fr 1fr; }
  #cycleChips .chip { width: 100%; }
}


/* ---------- 21. 단순화 개편 ---------- */
.tabs { gap: 2px; }
.view-title { padding-bottom: 4px; }

/* 접이식 세부 설정 */
.more { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.more > summary {
  list-style: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; gap: 6px;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-left: 2px;
}
.more[open] > summary::before { transform: rotate(45deg); }
.more > summary:hover { color: var(--text); }
.more .field-grid { margin-top: 14px; }
.more .field-help { margin-top: 10px; }

/* 오늘의 결론 */
.verdict { display: grid; gap: 2px; }
.verdict-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.verdict-row:last-of-type { border-bottom: 0; }
.v-label {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.v-label svg { color: var(--c-caffein); }
.v-time {
  font-size: 30px; font-weight: 700; line-height: 34px; letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}
.v-time.is-bad { color: var(--danger); }
.v-sub { font-size: 12px; color: var(--text-2); min-width: 58px; text-align: right; }
.verdict-note {
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px; line-height: 18px; color: var(--text-2);
}
.verdict-note b { color: var(--text); font-weight: 600; }

/* 버티기 히어로 */
.dose-hero {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 0 4px; text-align: center;
}
.dose-num {
  font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -2.5px;
  font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dose-num em { font-style: normal; font-size: 22px; font-weight: 700; margin-left: 3px; }
.dose-num.is-over { background: none; color: var(--danger); }
.dose-num.is-good { background: none; color: var(--c-sleep); }
.dose-sub { font-size: 13px; line-height: 19px; color: var(--text-2); max-width: 40ch; }
.dose-cost {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px; line-height: 18px; color: var(--text-2); text-align: center;
}
.dose-cost b { color: var(--text); font-weight: 600; }
.equiv { margin-top: 16px; display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.equiv-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 6px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.equiv-ico { color: var(--c-caffein); line-height: 0; }
.equiv-n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.equiv-n em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-2); margin-left: 1px; }
.equiv-name { font-size: 11px; color: var(--text-2); }

/* 음료 6종 — 작은 타일 */
.drink-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.drink {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text); cursor: pointer;
}
.drink:hover { background: var(--surface); }
.drink.is-active { border-color: var(--text); background: var(--surface); }
.drink-ico { color: var(--c-caffein); line-height: 0; }
.drink-name { font-size: 12px; font-weight: 600; }
.drink-mg { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.drink.is-active .drink-mg { color: var(--text); }

.chips-4 { margin-top: 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.chips-4 .chip { width: 100%; height: 38px; }

/* 하단 탭 라벨 */
.bn-item { flex-direction: column; gap: 3px; }
.bn-label { font-size: 10px; font-weight: 600; }

@media (min-width: 700px) {
  .drink-grid { grid-template-columns: repeat(6, 1fr); }
  .chips-4 { grid-template-columns: repeat(4, 1fr); }
  .intake-form { grid-template-columns: 130px minmax(0, 1fr) auto; }
}

/* 기록 탭 잔손질 */
.trend:has(> .empty) { height: auto; }
#saveRecord { width: 100%; margin-top: 14px; }
.rec-list, .intake-list { margin-top: 4px; }