/* ═══════════════════════════════════════
   자비스 대시보드 — 화이트 클린 테마
   ═══════════════════════════════════════ */

:root {
  /* ─ 색상 ─ */
  --bg:        #f0f2f5;
  --bg2:       #e8eaf0;
  --card:      #ffffff;
  --card2:     #f8f9fb;
  --border:    #e2e8f0;
  --border2:   #cbd5e1;

  /* 강조색은 먹색이다. 이 화면에서 초록은 '완료', 빨강은 '위험' 으로 이미 뜻이 있어서,
     강조색까지 색을 가지면 셋이 서로 경쟁한다. 강조를 무채색으로 빼면
     색을 가진 건 데이터뿐이 되고, 히트맵 초록과 수익률 빨강이 그제서야 제 몫을 한다. */
  --accent:    #1f2937;
  --accent-h:  #111827;
  --accent-l:  #6b7280;
  --accent-bg: #f1f3f6;
  --accent-fg: #ffffff;   /* 강조색 위에 얹는 글자 */

  --blue:      #3b82f6;
  --cyan:      #0891b2;
  --green:     #059669;
  --red:       #dc2626;
  --yellow:    #d97706;
  --orange:    #ea580c;

  --text:      #0f172a;
  --text2:     #475569;
  --text3:     #94a3b8;
  --text4:     #cbd5e1;

  /* 습관 농도 — 달력 칸 바탕.
     예전 히트맵은 깃허브식 에메랄드(#10b981)였는데, 강조를 무채색으로 뺀 이 화면에서는
     그 초록 하나가 제일 큰 소리를 냈다. 뜻(지켰다)은 초록이 맞으니 색상은 두고
     채도만 크게 낮춘다 — 훑을 때 농도 차이는 남고, 안 볼 때는 조용하다. */
  --hb1:       #e2ebe5;
  --hb2:       #c6dacd;
  --hb3:       #97bda8;
  --hb4:       #4f7d68;
  /* 글자를 뒤집는 건 제일 짙은 칸 하나뿐이다. 1~3 단계는 기본 글자색으로 충분히 읽힌다. */
  --hb-fg-hi:  #ffffff;

  /* ─ 레이아웃 ─ */
  --r:         12px;
  --r-sm:      8px;
  --r-xs:      6px;
  /* 그림자에 배경 색조를 섞는다. 순수한 검정 그림자는 카드를 종이가 아니라
     스티커처럼 보이게 한다 — 회색 위에 회색을 얹은 꼴이라 깊이가 안 생긴다. */
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
  --shadow:    0 4px 16px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 40px rgba(15,23,42,0.13), 0 4px 12px rgba(15,23,42,0.07);
}

/* ── 기본 ────────────────────────────── */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{
  height:100%; background:var(--bg); color:var(--text);
  font-family:Pretendard,'Pretendard Variable',-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Noto Sans KR','Segoe UI',sans-serif;
  font-size:14px; line-height:1.6; letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
*{ scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
::-webkit-scrollbar{ width:4px; height:4px; }
::-webkit-scrollbar-thumb{ background:var(--border2); border-radius:2px; }
.hidden{ display:none !important; }

/* ── 로그인 ──────────────────────────── */
/* 로그인 화면은 예전에 보라 그라데이션(#667eea→#764ba2)에 보라·청록 구슬을 띄웠다.
   테마와 무관하게 박힌 색이라 라이트든 다크든 카드만 따로 놀았다 —
   문을 열면 다른 집이 나오는 셈이었다.
   지금은 대시보드와 같은 바탕색을 쓰고, 깊이는 아주 옅은 빛 한 겹으로만 만든다. */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px; background:var(--bg);
  position:relative; overflow:hidden;
}
.login-orbs{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% -10%,  var(--card) 0%, transparent 65%),
    radial-gradient(50% 40% at 88% 108%,  var(--card2) 0%, transparent 70%);
}
.orb{ display:none; }   /* 구슬은 뺐다 — 색이 문제였지 움직임이 문제가 아니었다 */
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.login-card{
  position:relative; background:var(--card);
  border:1px solid var(--border);
  border-radius:20px; padding:44px 40px; width:100%; max-width:420px;
  text-align:center; box-shadow:var(--shadow-lg);
}
.login-emoji{ font-size:56px; display:block; margin-bottom:14px; animation:float 3s ease-in-out infinite; }
.login-title{
  font-size:28px; font-weight:900; margin-bottom:6px; color:var(--text);
  letter-spacing:-0.03em;
}
.login-sub{ color:var(--text2); margin-bottom:22px; font-size:14px; }
.login-features{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-bottom:28px; }
.login-features span{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent-bg); border:1px solid var(--border2);
  border-radius:20px; padding:4px 12px; font-size:12px; color:var(--accent);
}
/* 로그인 화면만 컬러 이모지가 남아 있었다. 무채색 카드 위에서 그 여덟 개가 제일 시끄러웠다.
   나머지 화면과 같은 선 아이콘으로 맞춘다. */
.login-features .ic{ width:13px; height:13px; opacity:.7; }
.btn-google-login{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px; background:white; color:#334155;
  border:1.5px solid var(--border2); border-radius:var(--r);
  font-size:15px; font-weight:600; cursor:pointer; transition:all 0.2s;
  margin-bottom:10px; font-family:inherit; box-shadow:var(--shadow-sm);
}
.btn-google-login:hover{ background:#f8fafc; border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow); }
/* 다크에서 흰 버튼 하나만 남으면 화면에서 그것만 튄다.
   구글은 흰 버튼 말고 어두운 버튼(#131314)도 공식으로 허용한다 — 로고는 그대로 두고 판만 바꾼다. */
html.dark .btn-google-login{ background:#131314; color:#e3e3e3; border-color:#5f6368; box-shadow:none; }
html.dark .btn-google-login:hover{ background:#1c1c1e; border-color:#8e918f; }
/* 로그인 화면 안내 한 줄. '오프라인 모드로 시작' 단추가 있던 자리다.
   (.login-note 는 아래 권한 안내가 이미 쓰고 있어서 이름을 따로 뒀다.) */
.login-sync{
  margin:10px 0 0; font-size:12px; line-height:1.5;
  color:var(--text3); text-align:center;
}
.login-note{ font-size:12px; color:var(--text3); margin-top:14px; }

/* ── 헤더 ────────────────────────────── */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.h-left{ display:flex; align-items:center; gap:14px; }
.h-logo{
  font-size:17px; font-weight:900; color:var(--accent);
  letter-spacing:-0.02em;
}
.h-date-main{ font-size:13px; font-weight:700; color:var(--text); }
.h-date-sub{ font-size:12px; color:var(--text3); }
.h-right{ display:flex; align-items:center; gap:10px; }
.h-user{ display:flex; align-items:center; gap:8px; }
.h-avatar{ width:28px;height:28px;border-radius:50%;border:2px solid var(--accent-bg); }
.h-name{ font-size:13px;font-weight:500;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2); }


/* ── 스탯 배너 ───────────────────────── */
.stats-banner{
  padding:8px 20px; background:var(--card);
  border-bottom:1px solid var(--border);
  min-height:34px;
}
.stats-row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:3px; }
.stat-chip{
  font-size:12px; padding:3px 10px; border-radius:20px;
  background:var(--bg); border:1px solid var(--border);
  color:var(--text2); white-space:nowrap; font-weight:500;
}
.stat-chip.stat-green{ background:#ecfdf5; border-color:#a7f3d0; color:var(--green); }
.stat-chip.stat-yellow{ background:#fffbeb; border-color:#fde68a; color:var(--yellow); }
.stats-urgent{ display:flex;flex-direction:column;gap:1px;padding:3px 0 0; }
.stats-urgent-item{ font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.stats-due{ color:var(--text3);font-size:12px;margin-left:4px; }
.stats-overdue{ color:var(--red);font-size:12px;margin-left:4px;font-weight:600; }
.stats-jarvis{ display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text3);margin-top:2px; }
.stats-jarvis-icon{ color:var(--accent-l);flex-shrink:0; }
.stats-jarvis-txt{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 80px); }
@keyframes statsPulse{ 0%,100%{opacity:1} 40%{opacity:0.5;transform:scale(1.01)} }
.stats-flash{ animation:statsPulse 0.5s ease; }
@keyframes chipBlink{
  0%  { transform:scale(1);   box-shadow:none; }
  25% { transform:scale(1.12); box-shadow:0 0 0 3px rgba(79,70,229,0.35), 0 0 12px rgba(79,70,229,0.25); }
  50% { transform:scale(0.97); box-shadow:none; }
  75% { transform:scale(1.06); box-shadow:0 0 0 2px rgba(79,70,229,0.2); }
  100%{ transform:scale(1);   box-shadow:none; }
}
@keyframes chipBlinkGreen{
  0%  { transform:scale(1);   box-shadow:none; }
  25% { transform:scale(1.12); box-shadow:0 0 0 3px rgba(5,150,105,0.4), 0 0 12px rgba(5,150,105,0.3); }
  50% { transform:scale(0.97); box-shadow:none; }
  75% { transform:scale(1.06); box-shadow:0 0 0 2px rgba(5,150,105,0.2); }
  100%{ transform:scale(1);   box-shadow:none; }
}
.chip-flash { animation:chipBlink 0.55s ease; }
.chip-flash.stat-green { animation:chipBlinkGreen 0.55s ease; }

/* ── 대시보드 그리드 ─────────────────── */
.dashboard{
  display:flex; flex-direction:column; gap:14px;
  padding:16px; max-width:1440px; margin:0 auto;
}

/* 위 세 열.
   예전엔 대시보드 전체가 한 판의 그리드였다. 그리드는 한 줄의 높이를 그 줄에서 제일 큰
   카드가 정한다 — 습관 카드가 크면 옆의 체크리스트 아래가 통째로 빈다. 카드는 안 늘어나니
   그 빈칸은 아무것도 아닌 채로 화면만 먹었다.
   열끼리 높이를 맞출 이유가 없다. 그래서 열마다 따로 흐르는 flex 로 바꿨다 —
   한 카드가 끝나면 바로 다음 카드다. */
.dash-top{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;
  align-items:stretch;
}
.dash-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.dash-col > .card{ flex:0 0 auto; }
/* 달력만 제 열을 끝까지 채운다 — 남는 높이는 할일 목록이 받아 스크롤한다.
   그래서 달력 카드의 키는 옆 두 열 중 긴 쪽이 정한다. */
.dash-col > .card-calendar{ flex:1 1 auto; }

/* 넓게 쓰는 카드들 */
.dash-rest{ display:grid; grid-template-columns:2fr 1fr; gap:14px; align-items:start; }
.card-inbody  { grid-column:1; }
.card-fitness { grid-column:2; }
.card-econ    { grid-column:1/3; }

/* ── 카드 ────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.2s, border-color 0.2s;
}
.card:hover{ box-shadow:var(--shadow); border-color:var(--border2); }
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px 11px; border-bottom:1px solid var(--border); flex-shrink:0;
  background:var(--card);
}
.card-title{ font-size:14px; font-weight:600; color:var(--text); letter-spacing:-0.01em; word-break:keep-all; }
.card-acts{ display:flex; gap:5px; }

/* ── 버튼 ────────────────────────────── */
.btn-sm{
  padding:5px 11px; border-radius:var(--r-xs); border:1.5px solid var(--border2);
  background:var(--card); color:var(--text2); font-size:12px; cursor:pointer;
  font-family:inherit; font-weight:500; transition:all 0.15s;
}
.btn-sm:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.btn-sm.accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.btn-sm.accent:hover{ background:var(--accent-h); }
/* 이모지가 들어 있던 자리. 아이콘은 글자보다 넓이가 일정해서 좌우를 좁혀도 된다. */
.btn-sm.btn-ic{
  display:inline-flex; align-items:center; justify-content:center;
  padding:5px 7px; line-height:0;
}
.btn-sm.btn-ic .ic{ width:15px; height:15px; }
/* 할일 목록 머리의 + 추가. 필터 칩과 같은 줄이라 같은 모양을 쓰되,
   하는 일이 달라서(고르기 vs 만들기) 왼쪽에 선 하나로 갈라 둔다. */
.fit-tab.tf-add{
  margin-left:auto; font-weight:700; color:var(--accent);
  border-color:var(--border2); border-style:dashed;
}
.fit-tab.tf-add:hover{ border-color:var(--accent); border-style:solid; background:var(--accent-bg); }
.badge{ font-size:12px; padding:2px 8px; border-radius:12px; background:var(--bg); color:var(--text2); border:1px solid var(--border); font-weight:500; }
.badge-accent{ background:var(--accent-bg); color:var(--accent); border-color:var(--border2); }
.badge-green{ background:#ecfdf5; color:var(--green); border-color:#a7f3d0; }
.empty{ padding:24px 16px; text-align:center; color:var(--text3); font-size:13px; }

/* ── 인풋 ────────────────────────────── */
.inp{
  width:100%; background:var(--card2); border:1.5px solid var(--border);
  border-radius:var(--r-xs); color:var(--text);
  padding:8px 12px; font-size:13px; font-family:inherit; outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.inp:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }
.inp-sm{ padding:6px 10px; font-size:12px; }
.inp option{ background:var(--card); }
textarea.inp{ resize:vertical; min-height:64px; }

/* ── 할일 ────────────────────────────── */
.task-filter-wrap{
  display:flex; gap:4px; padding:4px 12px 0;
  overflow-x:auto; flex-shrink:0; flex-wrap:wrap;
}
.task-filter-wrap::-webkit-scrollbar{ display:none; }
/* '지난' 은 목록을 좁히는 탭이 아니라 켜고 끄는 스위치라 앞에 따로 세우고 줄을 하나 그어 가른다. */
.fit-tab.tf-over{ display:inline-flex; align-items:center; gap:4px; padding-right:11px; margin-right:5px; }
.fit-tab.tf-over::after{
  content:''; position:absolute; right:-4px; top:20%; height:60%;
  width:1px; background:var(--border2);
}
.fit-tab.tf-over{ position:relative; }
.tf-ic{ width:13px; height:13px; }
.task-form{ padding:10px 14px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:8px; background:var(--card2); }
.task-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.task-form-btns{ display:flex; gap:6px; justify-content:flex-end; }
/* flex-basis 가 0 이라야 '할일이 몇 개든 카드 높이에 영향을 주지 않는다'.
   auto 로 두면 할일 스무 개가 카드를 스무 개만큼 늘려 버리고, 그 높이에 맞추느라
   오른쪽 두 열이 빈 채로 끌려 내려간다. 0 으로 두면 카드 키는 달력·요약이 정하고
   남는 높이를 목록이 받는다 — 넘치면 목록 안에서 스크롤된다. */
.tasks-wrap{ padding:6px; overflow-y:auto; flex:1 1 0; min-height:120px; }
.task-group{ margin-bottom:8px; }
.task-group-name{
  font-size:12px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:0.06em;
  padding:4px 10px 3px;
}
.task-item{
  display:flex; align-items:flex-start; gap:9px;
  padding:8px 10px; border-radius:var(--r-xs);
  transition:background 0.12s; position:relative;
}
.task-item:hover{ background:var(--card2); }
.task-item.done .task-text{ text-decoration:line-through; color:var(--text3); }
.task-check{
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border2); flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; cursor:pointer;
}
.task-check:hover{ border-color:var(--accent); background:var(--accent-bg); }
.task-item.done .task-check{ background:var(--green); border-color:var(--green); color:white; font-size:12px; }
.task-item.done .task-check::after{ content:'✓'; }
.task-body{ flex:1; min-width:0; cursor:pointer; }
.task-body:hover .task-text{ color:var(--accent); }
.task-text{ font-size:13px; word-break:break-word; color:var(--text); }
.task-notes{ font-size:12px; color:var(--text3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-due-inline{ font-size:12px; color:var(--text3); margin-left:5px; font-weight:400; background:var(--bg); padding:1px 6px; border-radius:10px; }
.task-due-inline.overdue{ color:var(--red); background:#fee2e2; }
.task-star{
  background:transparent; border:none; color:var(--text4);
  cursor:pointer; font-size:0; padding:2px 4px;
  transition:all 0.15s; opacity:0; flex-shrink:0;
}
.task-star::before{ font-size:14px; content:'☆'; }
.task-star.starred{ opacity:1; color:var(--yellow); }
.task-star.starred::before{ content:'★'; }
.task-item:hover .task-star,
.task-item:focus-within .task-star{ opacity:1; }
.task-del{
  opacity:0; background:transparent; border:none; color:var(--text3);
  cursor:pointer; font-size:12px; padding:2px 4px;
  transition:all 0.15s; flex-shrink:0; border-radius:4px;
}
.task-item:hover .task-del,
.task-item:focus-within .task-del{ opacity:1; }
.task-del:hover{ color:var(--red); background:#fee2e2; }

/* 탭 (공용) */
.fit-tab{
  padding:4px 11px; border-radius:20px;
  border:1.5px solid var(--border); background:var(--card);
  color:var(--text2); font-size:12px; font-weight:500;
  cursor:pointer; white-space:nowrap; font-family:inherit;
  transition:all 0.15s; flex-shrink:0;
}
.fit-tab:hover{ border-color:var(--accent); color:var(--accent); }
.fit-tab.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }

/* ── 캘린더 ──────────────────────────── */
.mini-cal{ padding:10px 14px; flex-shrink:0; }
.cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-nav-title{ font-size:13px; font-weight:700; color:var(--text); }
.cal-nav-btn{
  background:transparent; border:1.5px solid var(--border); color:var(--text2);
  cursor:pointer; font-size:16px; padding:2px 8px; border-radius:var(--r-xs);
  transition:all 0.15s; line-height:1;
}
.cal-nav-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.cal-dow{ text-align:center; font-size:12px; font-weight:700; color:var(--text3); padding:3px 0; }
.cal-day{
  text-align:center; padding:5px 2px; border-radius:6px;
  font-size:12px; cursor:pointer; transition:background 0.12s;
  position:relative; user-select:none; color:var(--text);
}
/* 칸이 습관 농도를 입으면서 오늘·선택을 배경색으로 칠할 수 없게 됐다 —
   칠하는 순간 그 날 습관이 안 보인다. 배경 대신 테두리 색으로 말한다.
   오늘은 빨강, 보고 있는 날은 먹. 오늘을 고르면 빨강이 이긴다 —
   '오늘이 어디인지' 가 '지금 뭘 보고 있는지' 보다 먼저 알아야 하는 정보다. */
.cal-day:hover{ box-shadow:inset 0 0 0 1.5px var(--border2); }
.cal-day.selected{ outline:2px solid var(--accent); outline-offset:-1px; }
.cal-day.today,
.cal-day.today.selected{ font-weight:800; outline:2px solid var(--red); outline-offset:-1px; }
.cal-day.other-month{ color:var(--text4); }
.cal-day.has-event::after{
  content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--cyan);
}
.cal-day.has-task::after{
  content:''; position:absolute; bottom:1px; left:calc(50% - 6px);
  width:4px; height:4px; border-radius:50%; background:var(--yellow);
}
.cal-day.has-event.has-task::after{ left:calc(50% - 2px); }
.cal-day.has-event::after{ left:calc(50% - 6px); }
/* 습관 농도 — 단계색은 :root 의 --hb1~4 한 곳에서 정한다.
   today/selected 규칙보다 뒤에 둬야 짙은 칸 위 글자가 흰색으로 뒤집힌다. */
.cal-day.hb-l1{ background:var(--hb1); }
.cal-day.hb-l2{ background:var(--hb2); }
.cal-day.hb-l3{ background:var(--hb3); }
/* 제일 짙은 칸에서만 글자를 뒤집는다. 주말 빨강·파랑은 여기서 안 읽히므로 같이 뒤집는다 —
   저쪽이 !important 라 이기려면 이쪽도 같은 무기를 들어야 한다. */
.cal-day.hb-l4{ background:var(--hb4); color:var(--hb-fg-hi); }
.cal-day.hb-l4.day-red,
.cal-day.hb-l4.day-blue{ color:var(--hb-fg-hi) !important; }
.cal-day.has-cl::before{
  content:''; position:absolute; bottom:1px; right:3px;
  width:4px; height:4px; border-radius:50%; background:var(--accent-l);
}
.cal-panel-tabs{ display:flex; gap:4px; padding:6px 10px 0; border-top:1px solid var(--border); flex-shrink:0; }
.cal-panel-tab{
  padding:4px 12px; border-radius:20px; border:1.5px solid var(--border);
  background:var(--card); color:var(--text2); font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all 0.15s;
}
.cal-panel-tab.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.cal-panel-tab:hover:not(.active){ border-color:var(--accent); color:var(--accent); }
/* 일정 칸은 내용만큼만 차지한다. flex:1 이면 오늘 일정이 하나뿐이어도
   280px 를 붙잡고 있어서 그 아래 할일과의 사이가 통째로 빈다. 늘어나야 하는 건
   실제로 길어지는 할일 목록 쪽이다. */
.events-wrap{ padding:6px; overflow-y:auto; flex:0 1 auto; max-height:280px; }

/* ── 하루 요약 ─────────────────────────
   달력 칸은 습관 농도까지가 한계다. 30px 칸에 네 신호를 다 넣으면 아무것도 안 읽힌다.
   훑는 건 달력이 하고, 고른 날의 습관·운동·식단은 여기 세 줄로 편다. */
.day-sum-hd{ padding:5px 12px 3px; font-size:11px; color:var(--text3); }
.day-sum{ display:flex; flex-direction:column; margin:2px 6px 8px; }
.day-sum-row{
  display:grid; grid-template-columns:34px 1fr; gap:9px; align-items:baseline;
  width:100%; text-align:left; padding:6px 8px; border:0; border-radius:var(--r-xs);
  background:none; cursor:pointer; font-family:inherit;
  border-top:1px solid var(--border);
}
.day-sum-row:first-child{ border-top:0; }
.day-sum-row.nogo{ cursor:default; }
.day-sum-row:not(.nogo):hover{ background:var(--card2); }
.dsr-k{ font-size:11px; font-weight:700; color:var(--text3); }
.dsr-v{ font-size:12.5px; color:var(--text); word-break:keep-all; line-height:1.45; }
.dsr-v.dim{ color:var(--text3); }
.dsr-v b{ font-weight:700; }

/* 요약 줄을 눌러 카드로 넘어갔을 때, 어느 카드로 왔는지 한 번 알려 준다.
   말없이 스크롤만 하면 화면이 왜 움직였는지 모른다. */
.card-ping{ animation:cardPing 1.2s ease-out; }
@keyframes cardPing{
  0%,100%{ box-shadow:var(--shadow-sm); }
  15%,60%{ box-shadow:0 0 0 2px var(--accent), var(--shadow); }
}
.events-wrap:empty{ display:none; }
.ev-group-hd{ padding:4px 10px 2px; font-size:12px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:0.05em; }
.event-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:7px 10px; border-radius:8px; margin-bottom:4px;
  border-left:3px solid var(--cyan); background:var(--card2);
  cursor:pointer; transition:background 0.12s;
}
.event-item:hover{ background:var(--bg); }
.event-time{ font-size:12px; color:var(--cyan); font-weight:600; white-space:nowrap; margin-top:1px; }
.event-title{ font-size:13px; color:var(--text); }
.event-loc{ font-size:12px; color:var(--text3); margin-top:1px; }
.done-text{ text-decoration:line-through; color:var(--text3); }

/* Long press 메뉴 */
.lp-menu{ display:flex; flex-direction:column; gap:8px; }
.lp-btn{
  padding:12px 14px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--card2); color:var(--text); font-size:14px;
  cursor:pointer; font-family:inherit; text-align:left; transition:all 0.15s;
}
.lp-btn:hover{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }

/* ── 체크리스트 ──────────────────────── */
.checklist-wrap{ padding:8px; overflow-y:auto; flex:1; max-height:420px; display:flex; flex-direction:column; gap:5px; }
.cl-item{
  display:flex; align-items:center; gap:9px; padding:8px 10px;
  border-radius:var(--r-xs); background:var(--card);
  border:1.5px solid var(--border); transition:all 0.15s;
}
.cl-item:hover{ border-color:var(--border2); box-shadow:var(--shadow-sm); }
.cl-item.done{ opacity:0.55; }
.cl-item.done .cl-title{ text-decoration:line-through; color:var(--text3); }
.cl-check{
  width:18px; height:18px; border-radius:5px;
  border:2px solid var(--border2); flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; background:var(--card);
}
.cl-check:hover{ border-color:var(--accent); background:var(--accent-bg); }
.cl-item.done .cl-check{ background:var(--green); border-color:var(--green); color:white; font-size:12px; }
.cl-item.done .cl-check::after{ content:'✓'; }
.cl-drag,.memo-drag{
  color:var(--text4); cursor:grab; font-size:13px; padding:0 3px;
  opacity:0.4; transition:opacity 0.15s; flex-shrink:0; user-select:none;
}
.cl-item:hover .cl-drag, .memo-item:hover .memo-drag{ opacity:0.8; }
.cl-item.cl-dragging, .memo-item.cl-dragging{ opacity:0.4; }
.cl-item.cl-dragover, .memo-item.cl-dragover{ border-color:var(--accent)!important; background:var(--accent-bg); }
.cl-body{ flex:1; min-width:0; cursor:pointer; }
.cl-body:hover .cl-title{ color:var(--accent); }
.cl-title{ font-size:13px; color:var(--text); }
.cl-due{ font-size:12px; color:var(--text3); margin-top:1px; }
.cl-due.overdue{ color:var(--red); }
.cl-del-btn{
  background:transparent; border:none; color:var(--text4);
  cursor:pointer; font-size:12px; padding:3px 5px;
  border-radius:4px; flex-shrink:0; transition:all 0.15s;
}
.cl-del-btn:hover{ color:var(--red); background:#fee2e2; }
.habit-add-btn{
  padding:8px 12px; border-radius:8px;
  border:1.5px dashed var(--border2); color:var(--text3);
  font-size:12px; cursor:pointer; text-align:center;
  transition:all 0.15s; margin-top:4px; font-weight:500;
}
.habit-add-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }

/* ── 습관 ────────────────────────────── */
.habits-wrap{ padding:10px; display:flex; flex-direction:column; gap:7px; flex:1; overflow-y:auto; }
.habit-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px;
  background:var(--card2); border:1.5px solid var(--border);
  cursor:pointer; transition:all 0.2s; user-select:none;
}
.habit-item:hover{ border-color:var(--border2); box-shadow:var(--shadow-sm); }
.habit-item.done{ background:#ecfdf5; border-color:#a7f3d0; }
.habit-chk{
  width:20px; height:20px; border-radius:6px;
  border:2px solid var(--border2); display:flex;
  align-items:center; justify-content:center;
  flex-shrink:0; font-size:12px; transition:all 0.2s; background:var(--card);
}
.habit-item.done .habit-chk{ background:var(--green); border-color:var(--green); color:white; }
.habit-emoji{ font-size:18px; }
.habit-name{ flex:1; font-size:13px; color:var(--text); }
.habit-streak{ font-size:12px; color:var(--yellow); white-space:nowrap; font-weight:600; }
.habit-days{ font-size:12px; color:var(--text3); margin-left:4px; background:var(--bg); padding:1px 5px; border-radius:8px; }
.habits-footer{ padding:9px 14px; border-top:1px solid var(--border); font-size:12px; color:var(--text2); text-align:center; background:var(--card2); }
.day-picker{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.day-pick-btn{
  display:flex; align-items:center; gap:4px;
  padding:5px 10px; background:var(--card); border:1.5px solid var(--border);
  border-radius:20px; cursor:pointer; font-size:12px; user-select:none; transition:all 0.15s;
}
.day-pick-btn:has(input:checked){ background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
.day-pick-btn input{ accent-color:var(--accent); }
.habit-manage-item{ display:flex; align-items:center; gap:8px; padding:8px; background:var(--card2); border-radius:8px; margin-bottom:6px; }
.habit-manage-item .inp{ padding:6px 10px; font-size:13px; }

/* ── 식단 ────────────────────────────── */
.diet-wrap{ padding:10px; overflow-y:auto; flex:1; }
.diet-summary{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  padding:8px 11px; background:var(--card2); border-radius:10px; border:1px solid var(--border);
}
/* 링이 52px 이라 이 칸의 높이를 혼자 정하고 있었다. 안에 든 글자가 두 줄도 안 되는데
   칸만 76px 이었다. 링은 숫자 옆의 표시지 주인공이 아니다 — 글자 높이에 맞춘다. */
.diet-ring{ width:38px; height:38px; flex-shrink:0; }
.diet-info{ flex:1; min-width:0; }
.diet-cal-num{ font-size:19px; font-weight:700; color:var(--text); line-height:1.15; }
.diet-cal-unit{ font-size:12px; font-weight:500; color:var(--text3); margin-left:3px; }
.diet-cal-sub{ font-size:12px; color:var(--text3); }
/* 오른쪽 단추 둘도 같이 줄인다. 링만 줄이면 이번엔 얘들이 칸 높이를 정한다. */
.diet-sum-btns{ display:flex; gap:4px; flex:none; }
.diet-photo-btn{
  background:rgba(6,182,212,0.1); border:1px solid rgba(6,182,212,0.25);
  border-radius:7px; color:var(--cyan); cursor:pointer;
  font-size:14px; line-height:1; padding:5px 6px;
}
.diet-set-btn{
  background:none; border:none; color:var(--text3); cursor:pointer;
  font-size:13px; line-height:1; padding:5px 3px;
}
/* 이름·값·목표를 세 줄로 쌓았더니 칸 하나가 세 줄을 먹었다. 한 줄이면 충분하다 —
   숫자를 읽는 데 필요한 건 '무엇이 얼마인지' 이고, 목표는 그 옆에 작게 붙으면 된다. */
.diet-macros{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:8px; }
.macro{
  display:flex; align-items:baseline; justify-content:center; gap:4px;
  padding:5px 6px; background:var(--card2); border-radius:8px; border:1px solid var(--border);
}
.macro-lbl{ font-size:11px; color:var(--text3); }
.macro-val{ font-size:13.5px; font-weight:700; }
.macro-val i{ font-style:normal; font-size:10.5px; font-weight:500; }
.macro-goal{ font-size:11px; color:var(--text3); }

/* 끼니는 접어 둔다. 접힌 줄 하나에 '뭘 먹었는지·몇 kcal·단탄지' 가 다 들어가고,
   펼치면 그제서야 낱개가 나온다. 네 끼가 늘 펼쳐져 있으면 카드가 화면을 다 먹는다. */
.meal-sec{ margin-bottom:5px; }
.meal-hd{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text2);
  cursor:pointer; padding:5px 6px; border-radius:var(--r-xs);
  border:1px solid var(--border); background:var(--card2);
}
.meal-hd:hover{ border-color:var(--border2); }
.meal-nm{ font-weight:700; flex:none; }
.meal-sum{
  flex:1; min-width:0; font-size:11.5px; color:var(--text3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.meal-sum b{ color:var(--text2); font-weight:600; }
.meal-cv{
  flex:none; width:16px; text-align:center; color:var(--text3);
  font-size:10px; transition:transform .15s;
}
.meal-sec.open .meal-cv{ transform:rotate(90deg); }
.meal-add{
  flex:none; background:none; border:0; cursor:pointer; font-family:inherit;
  color:var(--accent-l); font-size:15px; line-height:1; padding:0 4px; border-radius:4px;
}
.meal-add:hover{ color:var(--accent); background:var(--card); }
.meal-items{ display:none; flex-direction:column; gap:4px; padding:5px 2px 2px; }
.meal-sec.open .meal-items{ display:flex; }
.meal-food{
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 10px; background:var(--card2); border-radius:6px;
  font-size:12px; border:1px solid var(--border);
}
.meal-food-cal{ color:var(--text2); font-size:12px; display:flex; align-items:center; gap:4px; }
.btn-del-food{ background:none; border:none; color:var(--text3); cursor:pointer; font-size:12px; }
.btn-del-food:hover{ color:var(--red); }
.diet-fav-btn{ background:none; border:none; color:var(--text4); cursor:pointer; font-size:13px; padding:0 3px; transition:color 0.15s; flex-shrink:0; }
.diet-fav-btn.is-fav{ color:var(--yellow); }
.diet-quick-list{ display:flex; flex-direction:column; gap:4px; max-height:180px; overflow-y:auto; margin-bottom:4px; }
.diet-quick-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 10px; background:var(--card2); border:1.5px solid var(--border);
  border-radius:8px; cursor:pointer; font-size:13px; transition:all 0.15s;
}
.diet-quick-item:hover{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }
.diet-quick-fav{ border-color:#fde68a; background:#fffbeb; }
.diet-quick-cal{ font-size:12px; color:var(--text3); white-space:nowrap; }
.photo-drop-zone{
  border:2px dashed var(--border2); border-radius:var(--r);
  padding:24px 16px; text-align:center; cursor:pointer;
  transition:border-color 0.2s; min-height:110px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card2);
}
.photo-drop-zone:hover{ border-color:var(--accent); background:var(--accent-bg); }

/* ── 운동 ────────────────────────────── */
.fitness-wrap{ padding:10px; overflow-y:auto; flex:1; }
.fit-tabs{ display:flex; gap:4px; margin-bottom:10px; overflow-x:auto; }
.fit-tabs::-webkit-scrollbar{ display:none; }

/* 요일 탭 줄 끝의 톱니 — 요일과 같은 줄에 두되 붙여 놓지 않는다.
   요일은 '보기', 이건 '정하기' 라 성격이 다르다. 사이를 벌려 두면 잘못 누르지 않는다. */
.fit-plan-btn{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  padding:4px 8px; color:var(--text3);
}
.fit-plan-btn:hover{ color:var(--accent); }

/* ── 요일별 운동 배정 ─────────────────── */
.dp-note{
  font-size:12px; color:var(--text3); line-height:1.5;
  padding:9px 11px; margin-bottom:10px;
  background:var(--card2); border-radius:var(--r-xs);
}
.dp-list{ display:flex; flex-direction:column; gap:7px; }
.dp-row{ display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:center; }
/* 요일 한 글자는 폭이 제각각이라(월 vs 금) 가운데 정렬해야 셀렉트 왼쪽 선이 안 흔들린다. */
.dp-d{ font-size:12.5px; font-weight:700; color:var(--text2); text-align:center; }
.dp-sun{ color:var(--red); }
.dp-sat{ color:var(--blue); }
.dp-sel{ width:100%; min-width:0; }
.ex-item{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; transition:background 0.12s; }
.ex-item:hover{ background:var(--card2); }
.ex-item.done .ex-name{ color:var(--text3); text-decoration:line-through; }
.ex-chk{
  width:18px; height:18px; border-radius:4px;
  border:2px solid var(--border2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; transition:all 0.2s; background:var(--card);
}
.ex-item.done .ex-chk{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.ex-name{ flex:1; font-size:13px; color:var(--text); }
.ex-sets{ font-size:12px; color:var(--text3); white-space:nowrap; }
.fit-progress{ margin-top:10px; display:flex; align-items:center; gap:8px; }
.progress-bar{ flex:1; height:5px; background:var(--bg); border-radius:3px; overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-l)); border-radius:3px; transition:width 0.5s; }
.progress-txt{ font-size:12px; color:var(--text2); white-space:nowrap; font-weight:500; }

/* ── 메모 ────────────────────────────── */
/* 메모 글씨 크기는 여기 한 곳에서 퍼진다(js/memo.js 의 FS 가 이 값을 바꾼다).
   카드와 편집창이 같은 변수를 보므로 둘이 어긋날 수가 없다. */
:root{ --mm-fs:12px; }
.memo-wrap{ padding:8px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:6px; }
.memo-item{
  display:flex; align-items:flex-start; gap:7px; position:relative;
  padding:10px 12px; background:var(--card);
  border:1.5px solid var(--border); border-radius:10px;
  cursor:pointer; transition:all 0.15s; box-shadow:var(--shadow-sm);
}
.memo-item:hover{ border-color:var(--border2); box-shadow:var(--shadow); }
.memo-content-wrap{ flex:1; min-width:0; }
/* 날짜를 제목과 같은 줄에 앉힌다. 오른쪽에 제 칸을 두면 그 폭만큼 본문이 일찍 접힌다 —
   한 줄이면 될 메모가 두 줄이 되던 이유였다.
   대신 제목이 길면 말줄임으로 잘린다. 잘린 제목은 마우스를 올리면 전부 보이고,
   눌러서 열면 어차피 온전히 나온다 — 본문 한 줄을 얻는 값으로는 싸다. */
.memo-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:3px; }
.memo-title{
  flex:1; min-width:0; font-size:calc(var(--mm-fs) + 1px); font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.memo-preview{
  font-size:var(--mm-fs); color:var(--text2); line-height:1.55; word-break:break-word;
}
/* 접힌 상태에서만 세 줄로 자른다. 펼치면 통째로 보인다 —
   읽으려고 편집창을 여는 건 읽기가 아니라 편집이다. */
.memo-preview.clamp{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.memo-more{ color:var(--text3); font-size:12px; }
.memo-toggle{
  margin-top:5px; padding:0; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:600; color:var(--text3);
}
.memo-toggle:hover{ color:var(--accent); text-decoration:underline; }

/* ── 메모 본문 서식 ────────────────────
   미리보기와 편집창이 같은 규칙을 쓴다. 저장한 것과 보이는 것이 어긋나면
   서식은 있으나 마나 한 기능이 된다. */
.memo-preview ul, .memo-preview ol, .mm-ed ul, .mm-ed ol{ margin:3px 0; padding-left:20px; }
.memo-preview li, .mm-ed li{ margin:1px 0; }
.memo-preview p, .mm-ed p, .memo-preview div, .mm-ed div{ margin:0; }
.memo-preview b, .memo-preview strong, .mm-ed b, .mm-ed strong{ color:var(--text); font-weight:700; }
.memo-preview s, .mm-ed s{ color:var(--text3); }
/* 들여쓰기 — 브라우저가 만드는 blockquote/margin 대신 이름표로 민다.
   저장할 때 정화기를 통과해야 들여쓴 게 살아남는다. */
.mm-i1{ padding-left:22px; } .mm-i2{ padding-left:44px; }
.mm-i3{ padding-left:66px; } .mm-i4{ padding-left:88px; }

/* 체크리스트 — 목록 표시를 지우고 네모를 직접 그린다.
   ☐/☑ 글자는 기기마다 크기가 달라서 줄이 들쭉날쭉해진다. */
.mm-check{ list-style:none; padding-left:0 !important; }
.mm-check li{ position:relative; padding-left:24px; list-style:none; }
.mm-check li::before{
  content:''; position:absolute; left:0; top:.2em;
  width:14px; height:14px; border:1.5px solid var(--text3); border-radius:4px;
}
.mm-check li.on::after{
  content:''; position:absolute; left:4.5px; top:.36em;
  width:4px; height:8px; border:solid var(--accent); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.mm-check li.on{ color:var(--text3); text-decoration:line-through; }

/* 옛 복사칩 — 이제 새로 만들지 않는다(복사 링크가 대신한다).
   이미 쓴 메모에 남아 있으므로 보이고 눌리기는 해야 한다.
   끌어 옮기는 기능이 없어졌으니 grab 커서와 touch-action:none 도 같이 걷어냈다 —
   못 옮기는 물건에 '잡으세요' 커서를 주면 거짓말이고, touch-action 을 막아 두면
   칩에 손가락이 닿았을 때 화면이 안 굴러간다. */
.mm-cp{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.15em; height:1.15em; margin:0 .15em; vertical-align:-0.2em;
  line-height:1; flex:none;
  border:1px solid var(--border2); border-radius:4px;
  background:var(--card2); color:var(--text3);
  cursor:pointer; user-select:none; transition:all .12s;
}
.mm-cp .ic{ width:.7em; height:.7em; }
.mm-cp:hover{ color:var(--accent); border-color:var(--accent); }
.mm-cp.cp-ok{ color:var(--green); border-color:var(--green); }

/* 복사 링크 — 누르면 제 글자를 복사하는 밑줄.
   파란 링크처럼 칠하면 '다른 데로 간다' 는 뜻이 되어 버린다. 글자 색은 그대로 두고
   밑줄만 점선으로 둔다 — 서식으로 그은 밑줄(U)과 눈으로 갈려야 해서다. */
.mm-lk{
  text-decoration:underline; text-decoration-style:dashed;
  text-decoration-color:var(--accent); text-underline-offset:2.5px;
  border-radius:3px; cursor:pointer; transition:color .12s, background .12s;
}
.memo-preview .mm-lk:hover{ color:var(--accent); background:var(--accent-bg); }
.mm-lk.cp-ok{ color:var(--green); text-decoration-color:var(--green); background:transparent; }
/* 편집창 안에서는 고치라고 있는 글자다. 손가락 커서를 주면 여기서도 복사될 것처럼 보인다. */
.mm-ed .mm-lk{ cursor:text; }

/* 메모 글씨 크기 단추 — 작은 가·큰 가. 지금 크기를 글자 모양으로 보여 준다. */
.memo-fs{ display:flex; gap:4px; }
.memo-fs .btn-sm{ padding:3px 9px; line-height:1.2; }
.memo-fs .mfs-s{ font-size:10px; }
.memo-fs .mfs-l{ font-size:15px; }

/* ── 메모 편집창 ──────────────────────── */
.mm-bar{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:5px 6px; margin-bottom:-1px;
  background:var(--card2); border:1.5px solid var(--border);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.mm-b .ic{ width:14px; height:14px; vertical-align:-2px; }
.mm-b{
  min-width:28px; height:26px; padding:0 7px;
  background:none; border:0; border-radius:5px; cursor:pointer;
  font-family:inherit; font-size:12.5px; color:var(--text2); line-height:1;
}
.mm-b.wide{ font-size:11.5px; font-weight:700; }
.mm-b:hover{ background:var(--card); color:var(--accent); }
.mm-b:active{ background:var(--accent-bg); }
.mm-bar-sep{ width:1px; height:15px; background:var(--border2); margin:0 3px; }
.mm-ed{
  min-height:150px; max-height:44vh; overflow-y:auto;
  padding:11px 13px; font-size:calc(var(--mm-fs) + 1.5px); line-height:1.6; color:var(--text);
  background:var(--bg2); border:1.5px solid var(--border);
  border-radius:0 0 var(--r-sm) var(--r-sm);
  outline:none; word-break:break-word;
}
.mm-ed:focus{ border-color:var(--accent); }
.mm-hint{ margin-top:6px; font-size:11px; line-height:1.5; color:var(--text3); }
.mm-hint b{ color:var(--text2); }
/* 날짜는 본문을 따라 커지지 않는다 — 크게 보고 싶은 건 메모 내용이지 도장이 아니다. */
.memo-date{ flex:none; font-size:11.5px; color:var(--text3); white-space:nowrap; transition:opacity .15s; }
/* PC 의 ✕ 도 줄 안에 자리를 먹고 있었다(안 보일 때도 폭은 그대로다).
   띄워서 얹고, 겹치는 동안에만 날짜를 비운다. 자리를 뺏지 않으니 본문이 밀리지 않는다. */
.memo-item > .rw-x{ position:absolute; top:7px; right:8px; z-index:2; }
@media (hover:hover){
  .rw:hover .memo-item .memo-date, .rw:focus-within .memo-item .memo-date{ opacity:0; }
}

/* ── 모달 ────────────────────────────── */
.modal{
  position:fixed; inset:0; background:rgba(15,23,42,0.5);
  display:flex; align-items:center; justify-content:center;
  z-index:999; padding:20px; backdrop-filter:blur(4px);
}
.modal-box{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; width:100%; max-width:480px;
  max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-lg);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--card); z-index:1;
  border-radius:18px 18px 0 0;
}
.modal-head h3{
  display:flex; align-items:center; gap:8px; min-width:0;
  font-size:16px; font-weight:700; color:var(--text);
}
/* 제목 아이콘은 글자보다 흐리다 — "일정 추가" 를 먼저 읽어야 한다. */
.modal-head h3 .ic{ color:var(--text3); width:19px; height:19px; }
.modal-close{
  background:var(--card2); border:1px solid var(--border);
  color:var(--text2); cursor:pointer; font-size:13px;
  width:28px; height:28px; border-radius:7px; transition:all 0.15s;
}
.modal-close:hover{ background:var(--bg); color:var(--text); }
.modal-body{ padding:18px 20px; }
.modal-row{ margin-bottom:12px; }
.modal-lbl{ font-size:12px; color:var(--text2); margin-bottom:5px; display:block; font-weight:500; }
.modal-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.modal-btns{ display:flex; gap:8px; margin-top:16px; }
.modal-btns button{ flex:1; padding:10px; font-size:14px; border-radius:var(--r-xs); }
.btn-danger{
  padding:5px 11px; border-radius:var(--r-xs);
  border:1.5px solid #fca5a5; background:#fee2e2;
  color:var(--red); cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:500; transition:all 0.15s;
}
.btn-danger:hover{ background:#fecaca; }
/* 연분홍 판은 밝은 화면에서 만든 색이다. 무채색 다크에 놓으면 그 버튼만 형광등처럼 뜬다.
   위험하다는 신호는 남기되(붉은 글자·붉은 테두리) 판은 배경에 맞춘다. */
html.dark .btn-danger{ background:rgba(220,38,38,0.14); border-color:rgba(220,38,38,0.42); color:#f87171; }
html.dark .btn-danger:hover{ background:rgba(220,38,38,0.24); }

/* ── 토스트 ──────────────────────────── */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--text); color:white;
  padding:9px 20px; border-radius:8px; font-size:13px;
  z-index:9999; animation:slideUp 0.25s ease; white-space:nowrap; font-weight:500;
  box-shadow:var(--shadow);
}
.toast.success{ background:var(--green); }
.toast.error{ background:var(--red); }
@keyframes slideUp{ from{transform:translateX(-50%) translateY(8px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }

/* ── JARVIS ──────────────────────────── */
.jarvis-btn{
  position:fixed; bottom:24px; right:24px;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(79,70,229,0.4);
  z-index:900; transition:transform 0.2s, box-shadow 0.2s;
}
.jarvis-btn:hover{ transform:scale(1.08); box-shadow:0 6px 24px rgba(79,70,229,0.5); }
.jarvis-btn-glyph{ font-size:20px; }
.jarvis-badge{
  position:absolute; top:1px; right:1px;
  min-width:18px; height:18px; background:var(--red);
  border-radius:9px; border:2px solid white;
  font-size:12px; font-weight:700; color:white;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px; pointer-events:none;
  animation:dotPulse 1.5s ease-in-out infinite;
}
@keyframes dotPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
.jarvis-dot{ display:none!important; }

.jarvis-panel{
  position:fixed; bottom:86px; right:20px;
  width:360px; height:520px;
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; display:flex; flex-direction:column;
  overflow:hidden; z-index:901;
  box-shadow:var(--shadow-lg);
}
.jarvis-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:var(--accent);
  flex-shrink:0;
}
.j-head-l{ display:flex; align-items:center; gap:8px; }
.j-logo{ font-size:14px; font-weight:900; color:white; }
.j-status{ font-size:12px; color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.15); padding:2px 8px; border-radius:10px; }
.j-head-r{ display:flex; gap:3px; }
.j-icon-btn{
  background:rgba(255,255,255,0.15); border:none; color:white;
  cursor:pointer; font-size:13px; width:28px; height:28px;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.j-icon-btn:hover{ background:rgba(255,255,255,0.25); }
.j-msgs{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; background:var(--card2); }
.j-msg{ display:flex; align-items:flex-start; gap:8px; }
.j-ai{ flex-direction:row; }
.j-user{ flex-direction:row-reverse; }
.j-avatar{
  width:28px; height:28px; border-radius:50%;
  background:var(--accent-bg); border:1.5px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0;
}
.j-bubble{
  max-width:80%; padding:9px 12px; border-radius:12px;
  font-size:13px; line-height:1.5; word-break:break-word;
  background:var(--card); border:1px solid var(--border); color:var(--text);
  box-shadow:var(--shadow-sm);
}
.j-bubble-user{
  background:var(--accent); color:var(--accent-fg); border-color:var(--accent);
  border-radius:12px 12px 2px 12px;
}
.j-ai .j-bubble{ border-radius:2px 12px 12px 12px; }
.j-tip{ background:#fffbeb; border-color:#fde68a; color:var(--yellow); font-size:12px; }
.j-reminder{ background:#fff7ed; border-color:#fed7aa; color:var(--orange); }
.j-input-wrap{ padding:10px; border-top:1px solid var(--border); flex-shrink:0; background:var(--card); }
.j-voice-bar{
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  background:#fee2e2; border:1px solid #fca5a5; border-radius:8px;
  margin-bottom:8px; font-size:12px; color:var(--red);
}
.j-pulse{ display:inline-block; width:8px; height:8px; background:var(--red); border-radius:50%; animation:dotPulse 0.8s ease-in-out infinite; flex-shrink:0; }
.j-input-row{ display:flex; gap:8px; align-items:center; }

/* ═══════════════════════════════════════
   반응형 — 태블릿
   ═══════════════════════════════════════ */
/* 좁아지면 세 열이 두 열로. 달력은 위에 통으로 두고 나머지가 두 열로 흐른다. */
@media (max-width: 1080px) {
  .dash-top{ grid-template-columns:1fr 1fr; }
  .dash-col:first-child{ grid-column:1/3; }
  .dash-rest{ grid-template-columns:1fr; }
  .card-inbody, .card-fitness, .card-econ{ grid-column:1; }
}

/* ═══════════════════════════════════════
   반응형 — 모바일
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
  body{ font-size:15px; }
  .dashboard{ gap:10px; padding:10px; }
  /* 한 줄로 쌓는다. 열 껍데기는 사라지고 카드가 DOM 순서 그대로 흐른다. */
  .dash-top{ grid-template-columns:1fr; gap:10px; }
  .dash-col{ display:contents; }
  .dash-rest{ grid-template-columns:1fr; gap:10px; }
  .card-inbody,.card-fitness,.card-econ{ grid-column:1; }

  /* 인바디 타일 2열로 */
  /* 모바일에서도 한 줄을 유지한다. 두 줄이 되면 카드가 길어져 스크롤이 늘어난다. */
  .ib-summary{ grid-template-columns:repeat(5,1fr); gap:3px; }
  .ib-tile{ padding:6px 2px; }
  .ib-tile-lbl{ font-size:11px; }
  .ib-tile-val{ font-size:14px; }
  .ib-tile-unit{ font-size:11px; }

  /* 헤더 모바일 */
  .header{ padding:10px 14px; }
  .h-logo{ font-size:16px; }
  .h-date-main{ font-size:12px; }
  .h-date-sub{ font-size:12px; }
  .h-name{ display:none; }

  /* 카드 헤더 */
  .card-head{ padding:11px 14px 10px; }
  .card-title{ font-size:14px; }

  /* 달력 */
  .cal-day{ padding:6px 1px; font-size:13px; }
  .mini-cal{ padding:10px; }

  /* 모달 */
  .modal{ padding:0; align-items:flex-end; }
  .modal-box{
    border-radius:20px 20px 0 0; max-width:100%; max-height:92vh;
    border-bottom:none;
  }
  .modal-grid2{ grid-template-columns:1fr; }

  /* JARVIS */
  .jarvis-panel{
    position:fixed; bottom:0; right:0; left:0;
    width:100%; height:68vh; border-radius:20px 20px 0 0;
    border-bottom:none;
  }
  .jarvis-btn{ bottom:16px; right:16px; width:48px; height:48px; }

  /* 스탯 배너 */
  .stats-banner{ padding:6px 14px; }
  .stats-urgent{ display:none; }

  /* 할일 탭 */
  .task-filter-wrap{ padding:6px 10px 0; gap:5px; }
  .fit-tab{ padding:5px 12px; font-size:12px; }

  /* 체크리스트 */
  .cl-item{ padding:10px 10px; }
  .cl-title{ font-size:14px; }

  /* 습관 */
  .habit-item{ padding:11px 12px; }
  .habit-name{ font-size:14px; }

  /* 스크롤 영역 최대 높이 모바일 */
  /* 폰에서는 열을 맞출 이웃이 없다 — 한 탭에 한 카드씩만 보인다.
     그런데 flex:1 1 0 이라 남는 높이만 받아서 두 줄 만에 스크롤이 걸렸다.
     여기서는 내용만큼 자라게 두되, 다섯 줄이 넘어가면 그때부터 스크롤한다.
     (한 줄 ≈ 44px: 글자 두 줄 + 위아래 8px + 테두리) */
  .tasks-wrap{ flex:0 0 auto; max-height:calc(44px * 5); min-height:0; }
  .checklist-wrap{ max-height:300px; }
  .events-wrap{ max-height:220px; }
  .memo-wrap{ max-height:280px; }
  .habits-wrap{ max-height:300px; }
  .diet-wrap{ max-height:400px; }
}

/* ═══════════════════════════════════════
   다크 모드
   ═══════════════════════════════════════ */
/* 다크는 밝은 화면을 뒤집은 게 아니라 따로 짠 것이다.
   예전 값은 남색이 섞인 네이비(#1a2035)였다. 파란 기가 돌면 카드가 '어두운 화면' 이 아니라
   '파란 화면' 으로 읽히고, 그 위에 올린 초록·빨강이 전부 한 겹 탁해진다.
   그래서 색을 거의 뺀 무채색으로 다시 잡았다.

   깊이는 그림자가 아니라 밝기 단계로 만든다 — 어두운 바탕에서 그림자는 거의 안 보인다.
   바탕 → 카드 → 줄 순서로 3~4% 씩 밝아진다. */
html.dark {
  --bg:       #0a0a0c;
  --bg2:      #0f0f12;
  --card:     #141417;
  --card2:    #1b1b1f;
  --border:   #26262b;
  --border2:  #33333a;
  /* 본문은 순백이 아니다. 순백은 어두운 바탕에서 번져 보이고 눈이 빨리 지친다. */
  --text:     #ededf0;
  --text2:    #a0a0a8;
  --text3:    #6e6e78;
  --text4:    #48484f;
  /* 어두운 바탕에선 먹이 안 보인다. 잉크를 뒤집어 분필로 쓴다 —
     밝은 회백색 바탕에 어두운 글자. 강조가 배경에 묻히지 않는 유일한 방향이다. */
  --accent:   #f4f4f5;
  --accent-h: #ffffff;
  --accent-l: #71717a;
  --accent-bg:#232329;
  --accent-fg:#0a0a0c;
  /* 어두운 바탕에서 그림자는 일을 거의 못 한다. 남겨 두면 카드 둘레만 지저분해진다. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 44px rgba(0,0,0,0.55);

  /* 어두운 바탕에서는 단계가 뒤집힌다 — 적을수록 어둡고 많을수록 밝다. */
  --hb1:       #202e27;
  --hb2:       #2f4d40;
  --hb3:       #4a7561;
  --hb4:       #7fae94;
  --hb-fg-hi:  #0a0a0c;
}
html.dark .header,
html.dark .stats-banner,
html.dark .card,
html.dark .card-head,
html.dark .modal-box,
html.dark .modal-head { background:var(--card); }
html.dark .task-form { background:var(--card2); }
html.dark .j-msgs { background:var(--bg2); }
html.dark .j-bubble { background:var(--card); border-color:var(--border); }
html.dark .j-input-wrap { background:var(--card); }
html.dark .btn-sm:not(.accent) { background:var(--card2); color:var(--text2); }
html.dark .inp { background:var(--card2); border-color:var(--border); color:var(--text); }
html.dark .fit-tab:not(.active) { background:var(--card2); color:var(--text2); }
html.dark .cal-panel-tab:not(.active) { background:var(--card2); color:var(--text2); }
html.dark .event-item { background:var(--card2); }
html.dark .habit-item { background:var(--card2); }
html.dark .habit-item.done { background:rgba(5,150,105,0.15); }
html.dark .cl-item { background:var(--card2); }
html.dark .memo-item { background:var(--card2); }
html.dark .diet-summary,
html.dark .macro,
html.dark .meal-food { background:var(--card2); }
html.dark .diet-quick-item { background:var(--card2); }
html.dark .lp-btn { background:var(--card2); }
html.dark .login-card { background:rgba(20,20,23,0.96); }
html.dark .modal-box { background:var(--card); }
html.dark .task-item:hover,
html.dark .ex-item:hover { background:var(--card2); }
html.dark .profile-menu { background:var(--card); border-color:var(--border); }

/* ═══════════════════════════════════════
   프로필 메뉴
   ═══════════════════════════════════════ */
.h-user { cursor:pointer; border-radius:8px; padding:3px 7px; transition:background 0.15s; }
.h-user:hover { background:var(--bg); }
.h-chevron { font-size:12px; color:var(--text3); }
.profile-menu {
  position:absolute; top:calc(100% + 6px); right:16px;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-lg);
  z-index:200; min-width:160px; overflow:hidden;
}
.profile-menu-item {
  display:flex; align-items:center; gap:9px;
  padding:11px 16px; font-size:13px; color:var(--text);
  cursor:pointer; transition:background 0.12s; font-weight:500;
}
.profile-menu-item > span{ display:flex; align-items:center; gap:9px; }
.profile-menu-item .ic{ width:16px; height:16px; color:var(--text3); }
.profile-menu-item:hover { background:var(--bg); }
.header { position:relative; }

/* ═══════════════════════════════════════
   헤더 날짜 클릭
   ═══════════════════════════════════════ */
.h-date-main {
  cursor:pointer; border-radius:6px; padding:1px 5px;
  transition:background 0.12s;
}
.h-date-main:hover { background:var(--bg); }

/* ═══════════════════════════════════════
   캘린더 요일 색상 + 공휴일
   ═══════════════════════════════════════ */
.dow-blue { color:var(--blue) !important; font-weight:700; }
.dow-red  { color:var(--red)  !important; font-weight:700; }
.cal-day.day-red  { color:var(--red) !important; }
.cal-day.day-blue { color:var(--blue) !important; }

/* ═══════════════════════════════════════
   스탯 배너 — 긴급할일 가로 나열
   ═══════════════════════════════════════ */
.stats-banner {
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
html.dark .stats-banner { background:var(--card); }
/* 헤더+스탯 묶음 */
.header-sticky-group {
  position:sticky; top:0; z-index:100;
  background:var(--card);
}
html.dark .header-sticky-group { background:var(--card); }

.stats-urgent-row {
  display:flex; gap:5px; flex-wrap:wrap;
  padding:3px 0 1px;
}
.stats-urgent-chip {
  font-size:12px; padding:2px 9px; border-radius:12px;
  background:var(--bg); border:1px solid var(--border);
  color:var(--text2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:180px;
  font-weight:500;
}
.stats-urgent-chip.urgent-over { background:#fee2e2; border-color:#fca5a5; color:var(--red); }
.stats-urgent-chip.urgent-star { border-color:#fde68a; }
html.dark .stats-urgent-chip { background:var(--card2); }
html.dark .stats-urgent-chip.urgent-over { background:rgba(220,38,38,0.15); }

/* ═══════════════════════════════════════
   모바일 스탯 긴급할일 + 날씨 표시
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
  .stats-banner { top:49px; padding:5px 12px; }
  .stats-urgent-row { display:flex !important; }
  .stats-urgent-chip { max-width:calc(33vw - 12px); font-size:12px; padding:2px 6px; }
  .stats-row { gap:4px; }
}

/* ═══════════════════════════════════════
   모바일 체크리스트/습관 스와이프 힌트
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
  .cl-item, .habit-item {
    touch-action:pan-y;
    user-select:none;
  }
}


/* ═══════════════════════════════════════
   달력 공휴일/일요일 배경
   ═══════════════════════════════════════ */
/* 습관색이 칠해진 칸에는 일요일·공휴일 바탕을 덧칠하지 않는다.
   배경 두 겹이 겹치면 둘 다 무슨 뜻인지 알 수 없는 색이 된다.
   글자가 이미 빨강이라 '쉬는 날' 은 그것만으로 읽힌다. */
.cal-day.day-red {
  color: var(--red) !important;
  border-radius: 6px;
}
.cal-day.day-red:not(.cal-hb){ background: rgba(220,38,38,0.07); }
.cal-day.day-red:not(.cal-hb):hover{ background: rgba(220,38,38,0.15); }

/* 5. 모바일 stat chip 클릭 커서 */
.stat-chip { cursor: pointer; }
.stats-urgent-chip { cursor: pointer; }

/* 2. 날짜 클릭 달력 드롭다운 */
.date-picker-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background:var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  padding: 12px;
  min-width: 280px;
}
html.dark .date-picker-dropdown {
  background: var(--card);
  border-color: var(--border);
}
.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.date-picker-today-btn {
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--accent);
  color: white;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* 3. 오늘 날짜 헤더 강조 */
.h-date-today .h-date-main {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
}
.h-date-today .h-date-sub {
  font-weight: 700;
}

/* 모바일 stats-banner top 조정 */
@media (max-width: 640px) {
  /* stats-banner top은 header-sticky-group이 처리 */
}

/* ═══════════════════════════════════════
   프로필 메뉴 - fixed 위치
   ═══════════════════════════════════════ */
.profile-menu {
  position: fixed !important;
  background:var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  min-width: 160px;
  overflow: hidden;
}
html.dark .profile-menu { background: var(--card); }

/* ═══════════════════════════════════════
   스탯 배너 - 다가오는 일정
   ═══════════════════════════════════════ */
.stats-upcoming {
  display: flex; gap: 5px; flex-wrap: wrap;
  padding: 3px 0 2px;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 3px;
}
.stats-upcoming-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(33.3% - 4px); font-weight: 500;
  flex: 0 0 calc(33.3% - 4px);
}
.uc-event { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.uc-task  { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
html.dark .uc-event { background: rgba(3,105,161,0.2); color: #7dd3fc; border-color: rgba(3,105,161,0.3); }
html.dark .uc-task  { background: rgba(133,77,14,0.2); color: #fcd34d; border-color: rgba(133,77,14,0.3); }

/* ═══════════════════════════════════════
   할일 - 숨김 항목 스타일
   ═══════════════════════════════════════ */
.task-hidden { opacity: 0.45; }
.task-item:hover .task-hide { opacity: 0.6 !important; }
.task-hide:hover { opacity: 1 !important; }

/* ═══════════════════════════════════════
   모바일 헤더 폰트 최적화
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
  .h-logo { font-size: 14px; }
  .h-date-main { font-size: 12px; }
  .h-date-sub { font-size: 10px; }
  .header { padding: 9px 12px; }
}

/* ═══════════════════════════════════════
   스탯 upcoming 날짜
   ═══════════════════════════════════════ */
.uc-date {
  font-size: 10px;
  opacity: 0.75;
  font-weight: 600;
}

/* ═══════════════════════════════════════
   할일 카테고리 그룹 배경
   ═══════════════════════════════════════ */
.task-group {
  transition: background 0.2s;
}
.task-group + .task-group {
  margin-top: 6px;
}

/* ═══════════════════════════════════════
   할일 - 숨김/별표 버튼 항상 살짝 표시
   ═══════════════════════════════════════ */
.task-star {
  opacity: 0.25 !important;
}
.task-star:hover,
.task-star.starred {
  opacity: 1 !important;
}
.task-hide-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  opacity: 0.2;
  border-radius: 4px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.task-item:hover .task-hide-btn { opacity: 0.6; }
.task-hide-btn:hover { opacity: 1 !important; background: var(--bg); }

/* 2. 카테고리 색상 - border 방식 */
.task-group[style*="border-left"] {
  border-radius: var(--r-xs);
  padding: 6px 6px 6px 10px !important;
  margin-bottom: 8px;
}

/* h-logo 링크 스타일 */
.h-logo { color: var(--accent); }
html.dark .h-logo { color: var(--accent-l); }

/* ═══════════════════════════════════════
   ↑↓ 순서변경 버튼
   ═══════════════════════════════════════ */
.reorder-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.reorder-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text3);
  cursor: pointer;
  font-size: 10px;
  width: 20px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  line-height: 1;
  padding: 0;
}
.reorder-btn:hover:not([disabled]) {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.reorder-btn[disabled] { opacity: 0.2; cursor: default; }
html.dark .reorder-btn { background: var(--card2); }

.memo-reorder {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  opacity: 0.3;
}
.memo-item:hover .memo-reorder { opacity: 1; }

/* ═══════════════════════════════════════
   순서변경 모드
   ═══════════════════════════════════════ */
.reorder-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  opacity: 0.3;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.reorder-toggle-btn:hover { opacity: 1; }
.reorder-mode .reorder-toggle-btn { opacity: 1; }

.reorder-handle {
  font-size: 16px;
  color: var(--text3);
  cursor: grab;
  padding: 0 6px;
  flex-shrink: 0;
  user-select: none;
  touch-action: none;
}
.reorder-handle:active { cursor: grabbing; }

.reorder-dragging {
  opacity: 0.8;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--accent) !important;
  background:var(--card) !important;
}
html.dark .reorder-dragging { background: var(--card) !important; }

.reorder-placeholder {
  border: 2px dashed var(--accent);
  border-radius: var(--r-xs);
  background: var(--accent-bg);
  margin-bottom: 5px;
  opacity: 0.5;
}

.habit-item.reorder-mode,
.cl-item.reorder-mode {
  border-color: rgba(79,70,229,0.3);
  background: var(--accent-bg);
}

/* ═══════════════════════════════════════
   체크리스트 날짜 인라인
   ═══════════════════════════════════════ */
.cl-due-inline {
  font-size: 10px;
  color: var(--text3);
  margin-left: 6px;
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
}
.cl-due-inline.overdue {
  color: var(--red);
  background: #fee2e2;
}

/* ═══════════════════════════════════════
   모바일 헤더 날짜 + 프로필 개선
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
  /* 날짜 크기 줄이고 색상 변경 */
  .h-date-main {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
  }
  .h-date-sub {
    font-size: 10px !important;
  }
  /* today-label → 전역 CSS로 이동 */
  /* 프로필 아이콘 크게 */
  .h-avatar {
    width: 34px !important;
    height: 34px !important;
    border: 2px solid var(--accent-l) !important;
  }
  .h-user {
    gap: 6px !important;
  }
}

/* PC에서도 프로필 아이콘 약간 키우기 */
.h-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border2);
}


/* ═══════════════════════════════════════
   오늘 레이블 (전역)
   ═══════════════════════════════════════ */
.today-label {
  color: #059669;
  font-weight: 900;
  font-size: inherit;
}

/* ═══════════════════════════════════════
   할일 카테고리 색상 세로줄
   ═══════════════════════════════════════ */
.task-item {
  position: relative;
}
.task-cat-bar {
  width: 3px;
  border-radius: 2px;
  align-self: stretch;
  flex-shrink: 0;
  min-height: 20px;
}

/* reorder dragging 스타일 */
.reorder-dragging {
  opacity: 0.85;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  border-color: var(--accent) !important;
  border-radius: var(--r-xs);
}
.reorder-placeholder {
  border: 2px dashed var(--accent);
  border-radius: var(--r-xs);
  background: var(--accent-bg);
  margin-bottom: 5px;
  opacity: 0.5;
}

/* ═══════════════════════════════════════
   알림 설정 UI
   ═══════════════════════════════════════ */
.notif-section {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.notif-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.notif-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.notif-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-top: 1px solid var(--border);
  margin-top: 5px;
}

/* ═══════════════════════════════════════
   할일 제목 말줄임 + 날짜 한줄
   ═══════════════════════════════════════ */
.task-text-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  flex-wrap: nowrap;
}
.task-title-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.task-item.done .task-title-txt {
  text-decoration: line-through;
  color: var(--text3);
}
.task-due-inline { flex-shrink: 0; }

/* ═══════════════════════════════════════
   날씨 크기 60% 축소 (모바일)
   ═══════════════════════════════════════ */
/* 오늘 레이블 강제 스타일 */
.today-label {
  color: #059669 !important;
  font-weight: 900 !important;
}


/* ═══════════════════════════════════════
   모바일 헤더 날짜 두줄 + 간격 축소
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
  .h-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    line-height: 1.2;
  }
  .h-date-main {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.2;
  }
  .h-date-sub {
    font-size: 11px !important;
    line-height: 1.2;
  }
  /* 헤더와 스탯바 사이 공백 제거 */
  .header { padding: 6px 12px !important; }
  .header-sticky-group { gap: 0; }
  .stats-banner { padding: 4px 12px !important; }
}

/* ═══════════════════════════════════════
   reorder 모드 - 아이템 전체 드래그 가능
   ═══════════════════════════════════════ */
.habit-item.reorder-mode,
.cl-item.reorder-mode {
  cursor: grab;
  background: var(--accent-bg) !important;
  border: 1.5px dashed var(--accent) !important;
  user-select: none;
}
.habit-item.reorder-mode:active,
.cl-item.reorder-mode:active {
  cursor: grabbing;
}
/* reorder 모드에서 텍스트 선택 방지 */
.habit-item.reorder-mode *,
.cl-item.reorder-mode * {
  user-select: none;
  -webkit-user-select: none;
}


/* ═══════════════════════════════════════
   헤더 모바일 - 텍스트 넘침 방지
   ═══════════════════════════════════════ */
@media (max-width: 640px) {
  .header { padding: 5px 10px !important; min-height: 0; }
  .h-left { flex: 1; min-width: 0; overflow: hidden; }
  .h-logo { font-size: 13px !important; white-space: nowrap; }
  .h-date { min-width: 0; flex: 1; overflow: hidden; }
  .h-date-main { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .h-date-sub  { font-size: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
  .stats-banner { padding: 3px 10px !important; }
  /* header-sticky-group 패딩 0 */
  .header-sticky-group { gap: 0 !important; }
}

/* ═══════════════════════════════════════
   알림 모달 한줄 레이아웃
   ═══════════════════════════════════════ */
.notif-time-lbl {
  font-size: 12px;
  color: var(--text2);
  white-space: nowrap;
  flex-shrink: 0;
}
.notif-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
  margin-top: 5px;
}
.notif-time-inp,
.notif-time-row input[type="time"],
.notif-time-row select {
  flex: 0 0 auto;
  width: 120px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
}
/* 크론이 매시 정각에만 돈다는 제약을 모달에서 바로 보이게 하는 안내줄.
   (파일 끝에 넣으면 아래 미디어쿼리를 덮어써서 모바일이 깨진다 — 여기 유지) */
.notif-hint {
  margin: 10px 0 0;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--bg2);
  color: var(--text2);
  font-size: 11px;
  line-height: 1.5;
}
.notif-hint b { color: var(--text); }


/* ═══════════════════════════════════════
   헤더 날짜 흰박스 + 짤림 수정
   ═══════════════════════════════════════ */
.h-date { overflow: visible !important; }
.h-date-main { overflow: visible !important; white-space: nowrap; }
.h-date-sub  { overflow: visible !important; white-space: nowrap; }
.h-left { overflow: visible !important; }
@media (max-width: 640px) {
  .h-date  { overflow: visible !important; }
  .h-left  { overflow: visible !important; flex-shrink: 1; min-width: 0; }
  .header  { overflow: visible !important; }
}

/* ═══════════════════════════════════════
   메모 reorder 모드
   ═══════════════════════════════════════ */
.memo-item.reorder-mode {
  cursor: grab;
  border: 1.5px dashed var(--accent) !important;
  background: var(--accent-bg) !important;
  user-select: none;
  -webkit-user-select: none;
}
.memo-drag-hint {
  font-size: 18px;
  color: var(--accent);
  padding: 0 8px 0 4px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ═══════════════════════════════════════
   편집 모드 삭제 버튼 (빨간색)
   ═══════════════════════════════════════ */
.edit-del-btn {
  background: #ef4444 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
  flex-shrink: 0;
  cursor: pointer;
}
.edit-del-btn:hover { background: #dc2626 !important; }

/* ── 인바디 ──────────────────────────── */
/* 다섯 칸 한 줄. 예전엔 6칸을 4열에 넣어 두 줄이 됐다. */
.ib-summary{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px; }
.ib-tile{
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:8px 6px; text-align:center;
}
.ib-tile-lbl{ font-size:12px; color:var(--text3); margin-bottom:3px; }
.ib-tile-val{
  font-size:16px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.ib-tile-unit{ font-size:12px; font-weight:500; color:var(--text3); margin-left:1px; }
.ib-delta{ display:block; font-size:12px; font-weight:600; margin-top:2px; }
.ib-delta-good{ color:var(--green); }
.ib-delta-bad{ color:var(--red); }

/* 추정값 표식 — 실측과 한눈에 구분되게. (파일 끝이 아니라 인바디 블록 안에 둔다) */
.ib-est{
  display:inline-block; margin-left:3px; padding:0 3px;
  font-size:11px; font-weight:700; line-height:1.5; letter-spacing:-0.2px;
  color:var(--yellow); border:1px solid var(--yellow); border-radius:3px;
  vertical-align:1px; opacity:.85;
}
.ib-est-v{ color:var(--text2); }
.ib-est-note{ color:var(--yellow); font-weight:600; }
.ib-bmr{
  font-size:12px; color:var(--text2); text-align:center;
  padding:6px; background:var(--card2); border-radius:var(--r-xs); margin-bottom:10px;
}
.ib-bmr b{ color:var(--text); font-variant-numeric:tabular-nums; }

.ib-tabs{ display:flex; gap:4px; margin-bottom:8px; }
.ib-tab{
  flex:1; padding:6px 4px; font-size:12px; font-weight:600; cursor:pointer;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-xs);
  color:var(--text3); font-family:inherit; transition:all .15s;
}
.ib-tab:hover{ color:var(--text2); border-color:var(--border2); }
.ib-tab.active{ color:var(--ib-c); border-color:var(--ib-c); background:var(--card); }
.ib-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.ib-chart{ margin-bottom:10px; }
.ib-chart svg{ display:block; width:100%; height:auto; max-height:190px; }
.ib-grid{ stroke:var(--border); stroke-width:1; stroke-dasharray:2 3; }
.ib-axis{ fill:var(--text3); font-size:13px; font-family:inherit; }
.ib-chart-foot{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--text3); margin-top:2px;
}
.ib-chart-empty{
  padding:20px 12px; text-align:center; font-size:12px; color:var(--text3);
  background:var(--card2); border-radius:var(--r-sm); margin-bottom:10px;
}

.ib-list{ border-top:1px solid var(--border); }
.ib-row{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:4px; align-items:center;
  /* 날짜가 카드 테두리에 바로 붙어 있어서 잘려 보였다. 표에도 여백이 필요하다. */
  padding:7px 12px; border-bottom:1px solid var(--border); font-size:12px; cursor:pointer;
}
.ib-row:hover:not(.ib-row-head){ background:var(--card2); }
.ib-row-head{
  font-size:12px; color:var(--text3); cursor:default; font-weight:600;
  text-align:center; padding:5px 12px;
}
.ib-row-head span:first-child{ text-align:left; }
.ib-row-dt{ color:var(--text2); font-variant-numeric:tabular-nums; }
.ib-row-v{ text-align:center; font-variant-numeric:tabular-nums; font-weight:600; }
.ib-row-v i{ font-style:normal; font-size:11px; color:var(--text3); font-weight:400; margin-left:1px; }
.ib-more{ font-size:12px; color:var(--text3); text-align:center; padding:6px; }

/* 기간 선택 — 차트와 목록이 같은 기간을 본다 */
.ib-periods{ display:flex; gap:4px; margin:0 0 8px; }
.ib-period{
  flex:1; padding:5px 0; font-size:12px; font-weight:600; cursor:pointer;
  color:var(--text3); background:var(--card2);
  border:1px solid var(--border); border-radius:var(--r-xs); font-family:inherit;
}
.ib-period:hover{ color:var(--text2); }
.ib-period.active{ color:var(--accent-fg); background:var(--accent); border-color:var(--accent); }
.ib-period:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* 최근 몇 회를 볼지 — − 숫자 + 를 좌우로 편 스테퍼.
   예전엔 ▲▼ 를 세로로 쌓았는데 화살표 하나가 8px 이라 손가락으로 못 맞혔고,
   위가 늘리기인지 줄이기인지도 매번 다시 봐야 했다. −/+ 는 그 설명이 필요 없다.
   끝에 닿으면 그쪽 단추를 흐리게 죽인다 — 눌러도 안 되는 걸 눌러 보게 두지 않는다. */
.ib-recent{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:-2px 0 9px; font-size:12px; color:var(--text3);
}
.ib-step{
  display:inline-flex; align-items:center;
  border:1px solid var(--border2); border-radius:999px;
  background:var(--card2); user-select:none; overflow:hidden;
}
.ib-step-v{
  min-width:26px; text-align:center;
  font-size:13px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.ib-step-b{
  width:26px; height:24px; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:15px; font-weight:600; color:var(--text2);
  transition:background .12s, color .12s;
}
.ib-step-b:hover:not(:disabled){ color:var(--accent); background:var(--card); }
.ib-step-b:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.ib-step-b:disabled{ color:var(--text4); cursor:default; opacity:.5; }

.ib-more-btn{
  display:block; width:100%; cursor:pointer; font-weight:600;
  color:var(--text2); background:var(--card2);
  border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--r-sm) var(--r-sm); font-family:inherit; font-size:12px; padding:8px;
}
.ib-more-btn:hover{ color:var(--text); background:var(--bg2); }

.ib-import-link{
  margin-top:10px; text-align:center; font-size:12px; color:var(--accent);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.ib-code{
  background:var(--bg); padding:1px 5px; border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--text);
}
html.dark .ib-tile,
html.dark .ib-bmr,
html.dark .ib-chart-empty{ background:var(--card2); }
html.dark .ib-tab:not(.active){ background:var(--card2); }

/* ── 습관 분류 선택 ────────────────────── */
.cat-picker{ display:flex; gap:6px; }
.cat-pick-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:9px 8px; font-size:13px; font-weight:500; cursor:pointer;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-xs);
  color:var(--text2); transition:all .15s; user-select:none;
}
.cat-pick-btn:hover{ border-color:var(--border2); }
.cat-pick-btn.on{
  background:var(--accent-bg); border-color:var(--accent);
  color:var(--accent); font-weight:600;
}
.cat-pick-btn input{ accent-color:var(--accent); }
.cat-pick-btn:focus-within{ outline:2px solid var(--accent); outline-offset:1px; }
html.dark .cat-pick-btn{ background:var(--card2); }
html.dark .cat-pick-btn.on{ background:var(--accent-bg); }

/* ── 로그인 화면: 권한 안내 + 정책 링크 ─── */
.login-card{ max-height:calc(100vh - 40px); overflow-y:auto; }
.login-scopes{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--border);
  text-align:left;
}
.login-scopes-t{
  font-size:12px; font-weight:700; color:var(--text3); letter-spacing:.04em;
  text-transform:none; margin-bottom:10px; text-align:center;
}
.login-scope{
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:9px 12px; margin-bottom:6px;
}
.login-scope b{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:2px;
}
.login-scope b .ic{ width:14px; height:14px; color:var(--text3); }
.login-scope span{ display:block; font-size:12px; line-height:1.55; color:var(--text2); }
.login-note a{ color:var(--accent); }
.login-links{
  margin-top:14px; display:flex; gap:8px; justify-content:center;
  font-size:12px; color:var(--text4);
}
.login-links a{ color:var(--text3); text-decoration:none; }
.login-links a:hover{ color:var(--accent); text-decoration:underline; }
html.dark .login-card{ background:rgba(20,20,23,0.96); }
html.dark .login-scope{ background:rgba(255,255,255,0.04); }
@media (max-width:640px){
  .login-card{ padding:32px 22px; }
}

/* ═══════════════════════════════════════
   경제(시세) — js/econ.js
   원래 viliiousy.github.io/economy 였던 화면. 클래스는 전부 .ec- 로 격리한다
   (원본의 .card / .price / .meta 는 여기 대시보드 클래스와 이름이 겹친다).
   ═══════════════════════════════════════ */
.ec-upd{ font-size:12px; color:var(--text3); white-space:nowrap; }
.ec-upd.ec-err{ color:var(--red); font-weight:600; }
.ec-hint{ font-size:12px; color:var(--text3); line-height:1.6; }
.ec-gold{ color:var(--yellow); }
.ec-sp{ flex:1; }

.ec-nm{ font-size:14px; font-weight:700; color:var(--text); }
.ec-meta{ font-size:12px; color:var(--text3); margin-top:2px; }
.ec-badge{
  display:inline-block; font-size:12px; font-weight:700; color:var(--text2);
  background:var(--card2); border:1px solid var(--border);
  border-radius:5px; padding:1px 5px; margin-left:6px; vertical-align:middle;
}
.ec-price{ font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
.ec-delta{ font-size:12px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
/* 한국식: 상승 빨강, 하락 파랑 */
.ec-up{ color:var(--red); } .ec-dn{ color:var(--blue); } .ec-flat{ color:var(--text3); }
@keyframes ecFlUp{ 0%{ background:rgba(220,38,38,0.14); } 100%{ background:transparent; } }
@keyframes ecFlDn{ 0%{ background:rgba(59,130,246,0.14); } 100%{ background:transparent; } }
.ec-fl-up{ animation:ecFlUp 1s ease; } .ec-fl-dn{ animation:ecFlDn 1s ease; }

/* 카드 안 요약 목록 */
.ec-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-bottom:1px solid var(--border); cursor:pointer;
}
.ec-row:last-child{ border-bottom:none; }
.ec-row:hover{ background:var(--card2); }
.ec-row-r{ text-align:right; flex:none; }

/* 터미널(모달) */
.modal-box.wide{ max-width:min(980px, 100%); }
.ec-nav{ display:flex; gap:5px; margin-bottom:12px; }
.ec-nav button{
  flex:1; padding:8px 0; border:1px solid transparent; background:transparent;
  color:var(--text2); font-size:13.5px; font-weight:600; cursor:pointer;
  border-radius:var(--r-sm); font-family:inherit;
}
.ec-nav button.on{ color:var(--text); background:var(--card2); border-color:var(--border); }
.ec-nav .ec-gear{ flex:0 0 38px; }
.ec-search{ width:100%; margin-bottom:10px; }

/* ── 캡처로 보유 채우기 ─────────────────
   검색칸과 한 줄에 둔다. 둘 다 '보유에 종목을 넣는' 같은 일이고,
   손으로 넣을지 캡처로 넣을지만 다르다. */
.ec-hold-top{ display:flex; gap:8px; align-items:flex-start; }
.ec-hold-top .ec-search{ flex:1; min-width:0; }
.ec-scan{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap; font-weight:600;
}
.ec-scan .ic{ width:14px; height:14px; }

/* 읽어 온 줄. 종목명·수량·평단이 세로로 딱 맞아야 훑으면서 틀린 걸 잡아낸다. */
.hs-list{
  display:flex; flex-direction:column; gap:2px;
  max-height:260px; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--r-xs); padding:6px;
  background:var(--card2);
}
.hs-row{
  display:grid; grid-template-columns:18px 1fr auto auto; gap:9px; align-items:center;
  padding:6px 7px; border-radius:var(--r-xs); font-size:12.5px; cursor:pointer;
}
.hs-row:hover{ background:var(--card); }
.hs-nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.hs-nm i{ font-style:normal; font-size:11px; font-weight:500; color:var(--red); }
.hs-q, .hs-a{ font-variant-numeric:tabular-nums; color:var(--text2); font-size:12px; }
/* 못 맞힌 줄은 지우지 않고 흐리게 남긴다 — 조용히 빠지면 몇 개가 빠졌는지도 모른다. */
.hs-miss{ opacity:.55; cursor:default; }
.hs-miss .hs-nm{ font-weight:500; }

@media (max-width:640px){
  .ec-hold-top{ flex-direction:column; }
  .ec-scan{ width:100%; justify-content:center; }
}

.ec-res{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; background:var(--card2); border:1px solid var(--border);
  border-radius:var(--r-sm); margin-bottom:6px;
}
.ec-res.ec-manual{ border-style:dashed; cursor:pointer; }

.ec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; margin-top:10px; }
.ec-item{ background:var(--card2); border:1px solid var(--border); border-radius:var(--r-sm); padding:11px 12px; }
.ec-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ec-item-bot{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:10px; padding-top:9px; border-top:1px solid var(--border);
}
.ec-item-bot label{ font-size:12px; color:var(--text3); font-weight:600; }
.ec-floor{ width:92px !important; }
.ec-rm{ color:var(--red); }
.ec-dir-up{ color:var(--red); } .ec-dir-dn{ color:var(--blue); }

.ec-lists{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px; }
.ec-lists::-webkit-scrollbar{ display:none; }
.ec-chip{
  flex:none; border:1px solid var(--border2); background:var(--card);
  color:var(--text2); border-radius:20px; padding:6px 13px;
  font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; font-family:inherit;
}
.ec-chip.on{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.ec-chip.ec-add{ color:var(--yellow); border-style:dashed; }
.ec-lhead{ display:flex; align-items:center; gap:8px; margin:2px 0 10px; }
.ec-lt{ font-size:15px; font-weight:700; flex:1; color:var(--text); }

.ec-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:13.5px; }
.ec-time-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.ec-time-row input{ flex:1; }
.ec-sw{ position:relative; width:38px; height:22px; flex:none; display:inline-block; }
.ec-sw input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; }
.ec-sw span{ position:absolute; inset:0; background:var(--border2); border-radius:12px; transition:0.18s; }
.ec-sw span:before{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  background:#fff; border-radius:50%; transition:0.18s; box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.ec-sw input:checked+span{ background:var(--accent); }
.ec-sw input:checked+span:before{ transform:translateX(16px); }

/* 차트 */
.ec-seg{ display:inline-flex; background:var(--card2); border:1px solid var(--border); border-radius:var(--r-sm); padding:3px; margin-bottom:10px; }
.ec-seg button{ border:none; background:transparent; color:var(--text2); font-family:inherit;
  font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:var(--r-xs); cursor:pointer; }
.ec-seg button.on{ background:var(--accent); color:var(--accent-fg); }
.ec-seg.ec-tf{ display:flex; width:100%; }
.ec-seg.ec-tf button{ flex:1; padding:6px 4px; font-size:12px; }
.ec-cgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ec-gcard{ background:var(--card2); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; }
.ec-gtop{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; cursor:pointer; }
.ec-gtv{ height:150px; border-top:1px solid var(--border); }
.ec-miss{ display:flex; align-items:center; justify-content:center; height:150px; color:var(--text3); font-size:12px; }
.ec-glabel{ font-size:12px; font-weight:700; color:var(--text2); margin:10px 2px 5px; }
.ec-combo{ height:320px; background:var(--card2); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; }
.ec-legend{ display:flex; flex-wrap:wrap; gap:8px 14px; margin:8px 2px 4px; font-size:12.5px; color:var(--text); }
.ec-lgi{ display:inline-flex; align-items:center; gap:5px; }
.ec-lgi i{ width:13px; height:3px; border-radius:2px; display:inline-block; }
.ec-one{ height:min(62vh, 460px); }

@media (max-width:640px){
  .ec-grid, .ec-cgrid{ grid-template-columns:1fr; }
  .ec-combo{ height:250px; }
}

/* ═══════════════════════════════════════
   식단 음식 검색 — js/food-db.js 프리셋 + 초성 검색
   ═══════════════════════════════════════ */
.diet-search{ width:100%; margin-bottom:8px; }
#dietSearchRes{ max-height:280px; overflow-y:auto; margin-bottom:12px; }
#dietSearchRes:not(:empty){ border:1px solid var(--border); border-radius:var(--r-sm); }
.diet-food{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-bottom:1px solid var(--border); cursor:pointer;
}
.diet-food:last-child{ border-bottom:none; }
.diet-food:hover{ background:var(--card2); }
.diet-food-main{ flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; }
.diet-food-nm{ font-size:13.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.diet-food-u{ font-size:12px; color:var(--text3); flex:none; }
.diet-food-cal{ font-size:12.5px; font-weight:700; color:var(--text2); font-variant-numeric:tabular-nums; flex:none; }
.diet-food-cal i{ font-size:12px; font-weight:500; color:var(--text3); font-style:normal; margin-left:1px; }
/* 담은 횟수. 숫자가 이름을 밀어내지 않도록 flex:none 으로 고정 폭을 갖는다. */
.diet-food-n{ font-size:11px; font-weight:600; color:var(--text3); flex:none;
  background:var(--bg2); border-radius:999px; padding:1px 6px; font-variant-numeric:tabular-nums; }
/* '최근 먹은 것' 머리. 검색 결과와 섞이지 않게 한 칸 띄우고 작게 둔다. */
.diet-rec-hd{ font-size:11px; font-weight:600; color:var(--text3); letter-spacing:0.2px;
  padding:10px 4px 4px; }
/* 요일별 운동 — 받아온 루틴과 그 나이 */
.dp-rt-list{ margin:8px 0 4px; padding:8px 10px; background:var(--bg2); border-radius:8px; }
.dp-rt{ display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12px; }
.dp-rt-nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text2); }
.dp-rt-at{ flex:none; font-size:11px; color:var(--text3); font-style:normal; }
.dp-rt-btn{ width:100%; margin-top:6px; }

/* ── 운동 피드백 ────────────────────────────────────────────
   접어 둔다. 매일 보는 화면에 잔소리가 펼쳐져 있으면 곧 눈이 무시한다. */
.coach{ margin-top:10px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.coach-sum{ list-style:none; cursor:pointer; padding:9px 12px; font-size:12.5px; font-weight:600;
  color:var(--text2); display:flex; align-items:center; gap:6px; background:var(--bg2); }
.coach-sum::-webkit-details-marker{ display:none; }
.coach-sum::after{ content:'▾'; margin-left:auto; font-size:11px; color:var(--text3); transition:transform .15s; }
.coach[open] .coach-sum::after{ transform:rotate(180deg); }
.coach-sum i{ font-style:normal; font-size:11px; font-weight:500; color:var(--text3); }
.coach-body{ padding:4px 12px 10px; }
.coach-item{ display:flex; gap:8px; padding:7px 0; border-top:1px solid var(--border); }
.coach-item:first-child{ border-top:0; }
.coach-item b{ display:block; font-size:12.5px; font-weight:600; color:var(--text1); }
.coach-item span{ display:block; font-size:11.5px; color:var(--text3); margin-top:2px; line-height:1.5; }
.coach-dot{ flex:none; width:16px; height:16px; border-radius:50%; margin-top:1px;
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
  background:var(--bg2); color:var(--text3); }
.coach-warn .coach-dot{ background:#fee2e2; color:#b91c1c; }
.coach-good .coach-dot{ background:#dcfce7; color:#15803d; }
.coach-foot{ font-size:10.5px; color:var(--text3); padding-top:8px; line-height:1.5; }

/* 그날 되짚기는 총평과 다른 것이다 — 펼친 채로 두고, 강조색 테두리로 갈라 준다.
   매일 보는 화면에서 알고 싶은 건 대개 '어제 그거 어땠나' 이지 28일 평균이 아니다. */
.coach-day{ border-color:var(--accent); }
.coach-day .coach-sum{ color:var(--text); }
.coach-day .coach-sum i{ color:var(--accent); font-weight:600; }
.coach-day + .coach{ margin-top:8px; }

/* 다음 세션 제안. 종목마다 '왜 이 숫자인지' 를 한 줄로 달아 둔다 —
   근거 없는 숫자는 AI 가 지어낸 것과 구분이 안 되므로, 근거가 곧 이 화면의 값이다. */
.coach-plan{ border-color:var(--accent); }
.coach-plan .coach-sum i{ color:var(--accent); font-weight:600; }
.plan-row{
  display:flex; align-items:flex-start; gap:9px;
  padding:8px 0; border-top:1px solid var(--border);
}
.plan-row:first-child{ border-top:0; }
.plan-no{
  flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%;
  font-size:10.5px; font-weight:700; line-height:18px; text-align:center;
  color:var(--accent-fg); background:var(--accent);
}
.plan-main{ flex:1; min-width:0; }
.plan-nm{ display:block; font-size:13px; font-weight:600; color:var(--text); }
.plan-nm em{
  font-style:normal; margin-left:5px; padding:1px 5px; border-radius:4px;
  font-size:10px; font-weight:600; color:var(--text3); background:var(--bg2);
}
.plan-why{ display:block; font-size:11px; color:var(--text3); margin-top:2px; line-height:1.5; }
.plan-set{
  flex:none; font-size:13px; font-weight:700; color:var(--text); text-align:right;
  white-space:nowrap; margin-top:1px;
}
.plan-set i{ font-style:normal; font-size:10.5px; font-weight:500; color:var(--text3); }
/* 다크에서는 연한 파스텔이 그대로 튄다. 배경만 낮추고 글자색을 올린다. */
html.dark .coach-warn .coach-dot{ background:rgba(220,38,38,0.18); color:#f87171; }
html.dark .coach-good .coach-dot{ background:rgba(22,163,74,0.18); color:#4ade80; }

/* 모르는 영양정보. '0' 과 눈으로 구분돼야 한다 — 0 은 없다는 뜻이고 —는 모른다는 뜻이다. */
.macro-plus{ font-size:9px; font-weight:700; color:var(--text3); vertical-align:super; margin-left:1px; }
.diet-macro-note{ font-size:11px; color:var(--text3); padding:4px 2px 0; line-height:1.5; }
/* 환산 전 기준량. 숫자를 의심할 때 확인할 수 있어야 한다. */
.diet-food-note{ font-size:10.5px; color:var(--text3); flex:none; }
.diet-food-fav{
  flex:none; width:24px; height:24px; padding:0; cursor:pointer;
  background:transparent; border:none; font-size:14px; color:var(--text4); font-family:inherit;
}
.diet-food-fav.on{ color:var(--yellow); }
.diet-food-fav:hover{ color:var(--yellow); }
.diet-empty-hint{ font-size:12px; color:var(--text3); padding:12px; text-align:center; }

/* 담은 목록(장바구니) + 수량 스테퍼 — 맨 아래 「추가」로 한 번에 넣는다 */
.diet-cart{
  border:1px solid var(--accent); border-radius:var(--r-sm);
  background:var(--accent-bg); padding:8px 10px; margin-bottom:10px;
}
.diet-cart-hd{ font-size:12px; font-weight:700; color:var(--accent); margin-bottom:6px; }
.diet-cart-row{
  display:flex; align-items:center; gap:8px; padding:5px 0;
  border-top:1px solid var(--border);
}
.diet-cart-row:first-of-type{ border-top:none; }
.diet-cart-nm{ flex:1; min-width:0; font-size:13px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.diet-cart-nm i{ font-style:normal; font-size:12px; color:var(--text3); }
.diet-cart-cal{ flex:none; font-size:12.5px; font-weight:700; color:var(--text2);
  font-variant-numeric:tabular-nums; min-width:56px; text-align:right; }
.diet-cart-cal i{ font-size:12px; font-weight:500; color:var(--text3); font-style:normal; margin-left:1px; }
.diet-cart-del{
  flex:none; width:22px; height:22px; padding:0; cursor:pointer;
  background:transparent; border:none; color:var(--text3); font-size:12px; font-family:inherit;
}
.diet-cart-del:hover{ color:var(--red); }
.diet-cart-sum{
  border-top:1px solid var(--border); margin-top:6px; padding-top:6px;
  text-align:right; font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums;
}
.diet-cart-sum b{ font-size:15px; color:var(--text); }

.diet-manual-btn{
  width:100%; padding:9px; cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--text2); background:var(--card2);
  border:1px dashed var(--border2); border-radius:var(--r-sm); font-family:inherit;
}
.diet-manual-btn:hover{ color:var(--text); border-color:var(--accent); }

.diet-qty{ display:flex; align-items:center; gap:2px; flex:none;
  background:var(--card); border:1px solid var(--border2); border-radius:var(--r-sm); }
.diet-qty button{
  width:28px; height:28px; padding:0; cursor:pointer; font-size:16px; font-weight:600;
  background:transparent; border:none; color:var(--accent); font-family:inherit; line-height:1;
}
.diet-qty button:disabled{ color:var(--text4); cursor:default; }
.diet-qty button:not(:disabled):hover{ background:var(--accent-bg); }
.diet-qty-n{ min-width:22px; text-align:center; font-size:13.5px; font-weight:700;
  color:var(--text); font-variant-numeric:tabular-nums; }

/* ═══════════════════════════════════════
   상단 요약 스트립 — js/topstrip.js
   카드가 아홉 개가 되면서 스크롤 없이는 상태를 못 봤다. 자주 보는 숫자만 위로 올린다.
   ═══════════════════════════════════════ */
.top-strip{
  display:flex; gap:10px; max-width:1440px; margin:0 auto;
  padding:0 16px 4px; align-items:stretch;
}
.ts-cell{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;
  padding:9px 13px; cursor:pointer; text-align:left; font-family:inherit;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-sm); box-shadow:var(--shadow-sm);
  transition:border-color 0.15s, box-shadow 0.15s;
}
.ts-cell:hover{ border-color:var(--accent); box-shadow:var(--shadow); }
.ts-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.ts-lbl{ font-size:12px; font-weight:700; color:var(--text3); white-space:nowrap; }
.ts-lbl em{ font-style:normal; font-weight:500; color:var(--text4); margin-left:3px; }
.ts-body{ display:flex; gap:12px; align-items:baseline; min-width:0; overflow:hidden; }
.ts-v{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.ts-v b{ font-size:15px; font-weight:700; color:var(--text); }
.ts-v i{ font-style:normal; font-size:12px; color:var(--text3); margin-left:1px; }
.ts-v u{
  text-decoration:none; font-size:11px; font-weight:700; color:var(--yellow);
  background:rgba(217,119,6,0.12); border-radius:3px; padding:1px 3px; margin-left:3px;
}
.ts-tick{ font-size:12px; color:var(--text2); }
.ts-tick b{ font-size:12.5px; margin-left:2px; }
/* 한국식: 상승 빨강, 하락 파랑 */
.ts-up{ color:var(--red) !important; } .ts-dn{ color:var(--blue) !important; }
.ts-flat{ color:var(--text3) !important; }
.ts-more{ font-size:12px; color:var(--text4); align-self:center; }

/* 스크롤만 하면 어디로 갔는지 모른다 — 잠깐 테두리를 밝힌다 */
@keyframes tsFlash{
  0%,100%{ border-color:var(--border); box-shadow:var(--shadow-sm); }
  30%,60%{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
}
.ts-flash{ animation:tsFlash 1.4s ease; }

@media (max-width:860px){
  .top-strip{ padding:0 10px 4px; gap:6px; }
  .ts-cell{ padding:7px 10px; }
  .ts-body{ gap:8px; }
  .ts-v b{ font-size:13.5px; }
}
@media (max-width:560px){
  /* 좁으면 두 칸이 나란히 있기 어렵다. 세로로 쌓되 각 칸은 여전히 한 줄. */
  .top-strip{ flex-direction:column; }
}

/* ═══════════════════════════════════════
   운동 — 종목 고르기 (부위 칩 + 검색 + 장바구니)
   ═══════════════════════════════════════ */
.ex-yt{
  flex:none; text-decoration:none; font-size:12px; line-height:1;
  color:var(--text4); padding:2px 4px; border-radius:4px;
}
.ex-yt:hover{ color:var(--accent); background:var(--accent-bg); }

.ex-parts{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:9px; }
.ex-part{
  padding:5px 9px; border:1px solid var(--border2); border-radius:999px;
  background:var(--card); color:var(--text2); font-size:12px; font-family:inherit; cursor:pointer;
}
.ex-part:hover{ border-color:var(--accent); color:var(--accent); }
.ex-part.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }

.ex-results{ max-height:300px; overflow-y:auto; margin-top:10px; }
.ex-results:not(:empty){ border:1px solid var(--border); border-radius:var(--r-sm); }
.ex-row{
  display:flex; align-items:center; gap:6px;
  padding:7px 9px; border-bottom:1px solid var(--border);
}
.ex-row:last-child{ border-bottom:none; }
.ex-row:hover{ background:var(--card2); }
.ex-row-main{ flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; cursor:pointer; }
.ex-row-nm{ font-size:13.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ex-row-part{ flex:none; font-size:12px; color:var(--text3); }
.ex-fav{
  flex:none; width:24px; height:24px; padding:0; cursor:pointer;
  background:transparent; border:none; font-size:14px; color:var(--text4); font-family:inherit;
}
.ex-fav.on,.ex-fav:hover{ color:var(--yellow); }

.ex-cart{
  border:1px solid var(--accent); border-radius:var(--r-sm);
  background:var(--accent-bg); padding:8px 10px; margin-top:10px;
}
.ex-cart-hd{ font-size:12px; font-weight:700; color:var(--accent); margin-bottom:6px; }
.ex-cart-row{
  display:flex; align-items:center; gap:8px; padding:5px 0;
  border-top:1px solid var(--border);
}
.ex-cart-row:first-of-type{ border-top:none; }
.ex-cart-nm{
  flex:1; min-width:0; font-size:13px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ex-cart-sets{ flex:none; width:72px; text-align:center; }
.ex-cart-del{
  flex:none; width:22px; height:22px; padding:0; cursor:pointer;
  background:transparent; border:none; color:var(--text4); font-size:12px; font-family:inherit;
}
.ex-cart-del:hover{ color:var(--red); }

.ex-hint{ font-size:12px; color:var(--text3); margin:8px 0 0; text-align:center; }
.ex-empty{ font-size:12px; color:var(--text3); padding:14px; text-align:center; }

/* 보유 요약 — 시세 카드 맨 위 한 줄, 누르면 보유 탭 */
.ec-hold{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 10px; margin-bottom:10px; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card2);
}
.ec-hold:hover{ border-color:var(--accent); }
.ec-hold-lb{ flex:none; font-size:12px; font-weight:700; color:var(--text3); }
.ec-hold-v{ font-size:15px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.ec-hold-p{ margin-left:auto; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.ec-hold-miss{ flex-basis:100%; font-size:12px; color:var(--text3); }

.ec-hold-sum{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:10px 0; }
.ec-hold-sum > div{
  padding:8px 6px; text-align:center; color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card2);
}
.ec-hold-sum span{ display:block; margin-bottom:3px; font-size:12px; color:var(--text3); }
.ec-hold-sum b{ font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }

@media (max-width:640px){
  .ec-hold-sum{ grid-template-columns:1fr 1fr; }
  .ec-hold-p{ margin-left:0; }
}

/* ═══════════════════════════════════════
   다크 모드 — 나중에 들어온 카드들 (인바디·시세·운동·식단·상단 줄)
   ═══════════════════════════════════════ */
html.dark .ib-tile,
html.dark .ib-row,
html.dark .ib-periods button,
html.dark .ib-more-btn,
html.dark .ec-item,
html.dark .ec-hold,
html.dark .ec-hold-sum > div,
html.dark .ex-part,
html.dark .ex-row,
html.dark .diet-food,
html.dark .diet-quick-item,
html.dark .ts-cell        { background:var(--card2); border-color:var(--border); }
html.dark .ec-res,
html.dark .ec-lhead       { background:var(--card2); }
html.dark .ex-results,
html.dark #dietSearchRes  { border-color:var(--border); }
html.dark .ex-row:hover,
html.dark .diet-food:hover{ background:var(--bg2); }
html.dark .top-strip      { background:transparent; }
html.dark .ts-cell:hover  { background:var(--bg2); }
html.dark .ib-chart-box,
html.dark .ec-chart-box   { background:var(--card2); }
/* 위의 'html.dark .ib-periods button' 이 .ib-period.active 보다 셈이 세서
   다크에서는 고른 기간에 색이 안 들었다 — 네 칸이 전부 똑같아 보였다. */
html.dark .ib-period.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }

/* 밝은 톤 배지는 다크에서 눈을 찌른다 — 채도를 낮추고 배경만 어둡게 */
html.dark .stat-chip.stat-yellow,
html.dark .diet-quick-fav,
html.dark .j-tip          { background:rgba(217,119,6,0.14); border-color:rgba(217,119,6,0.35); color:#fbbf24; }
html.dark .j-reminder     { background:rgba(234,88,12,0.14); border-color:rgba(234,88,12,0.35); color:#fdba74; }

/* 다크에서 순검정 배경 + 순백 글자는 한글에서 번져 보인다. 대비를 살짝 눌러둔다. */
html.dark { color-scheme:dark; }
html.dark .ec-fav.on, html.dark .diet-food-fav.on { color:#fbbf24; }

/* ═══════════════════════════════════════
   한글 타이포 마무리
   ═══════════════════════════════════════ */
/* 한글은 어절 단위로 읽는다. 기본값(글자 단위 끊기)이면 '자기개발'이 '자기개/발'로 쪼개진다. */
.card-title, .stat-chip, .ts-lbl, .ib-tile-lbl, .ec-hold-lb,
.ex-row-part, .macro-lbl, .ec-nm, .ib-row-h { word-break:keep-all; }

/* 숫자는 자릿수가 흔들리면 갱신될 때마다 눈에 띈다 */
.ib-tile-v, .ib-row-v, .ec-price, .ec-hold-v, .ec-hold-p,
.ts-v, .diet-food-cal, .kcal-num, .ec-hold-sum b { font-variant-numeric:tabular-nums; }

/* ═══════════════════════════════════════
   모바일 하단 탭
   ═══════════════════════════════════════ */
/* 넓은 화면에서는 존재하지 않는다. 카드 열 개가 3열로 다 보이니 나눌 이유가 없다. */
.tabbar{ display:none; }

@media (max-width:900px){
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:150;
    background:var(--card); border-top:1px solid var(--border);
    /* 아이폰 홈 인디케이터. Safari 가 툴바를 숨기면 0 을 돌려주므로 하한을 둔다. */
    padding-bottom:max(env(safe-area-inset-bottom), 6px);
  }
  /* 높이를 min-height 로 두면 글자 크기 설정에 따라 바 높이가 달라진다.
     그러면 그 위에 뜨는 자비스 창이 바를 얼마나 피해야 하는지 CSS 가 알 수 없다.
     한 값으로 못 박고, 창도 아래에서 같은 --tabbar-h 를 본다. */
  .tab-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    height:var(--tabbar-h, 54px); padding:7px 0 5px;
    background:transparent; border:none; cursor:pointer;
    color:var(--text3); font-family:inherit;
  }
  .tab-ic{ font-size:19px; line-height:1; filter:grayscale(1); opacity:.5; transition:all .15s; }
  .tab-lb{ font-size:12px; font-weight:600; letter-spacing:-0.02em; }
  .tab-btn.on{ color:var(--accent); }
  .tab-btn.on .tab-ic{ filter:none; opacity:1; }

  /* 자비스는 화면을 바꾸지 않고 창을 연다. 그래서 'on' 이 붙지 않는다 —
     대신 아이콘에 색을 줘서 나머지 셋과 성격이 다르다는 걸 보여 준다. */
  .tab-jarvis{ position:relative; }
  .tab-jarvis .tab-ic{ filter:none; opacity:1; color:var(--accent-l); }
  .tab-badge{
    position:absolute; top:4px; left:calc(50% + 5px);
    min-width:16px; height:16px; padding:0 4px; border-radius:8px;
    background:var(--red); color:#fff; border:2px solid var(--card);
    font-size:10px; font-weight:700; line-height:12px; text-align:center;
  }
  .tab-badge.hidden{ display:none; }

  /* 떠 있던 동그란 자비스 단추는 폰에서 뺀다. 오른쪽 아래는 늘 카드 위였고,
     같은 일을 하는 자리가 탭바에 생겼다. 넓은 화면에서는 그대로 둔다. */
  .jarvis-btn{ display:none !important; }
  /* 탭바 높이와 홈 인디케이터 여백을 그대로 더한다. 숫자를 눈대중으로 넣었더니
     6px 이 모자라 탭바를 덮었다 — 이제 바와 같은 변수를 본다. */
  .jarvis-panel{ bottom:calc(var(--tabbar-h, 54px) + max(env(safe-area-inset-bottom), 6px)); }

  /* 지금 탭의 카드만 보인다. 나머지는 DOM 에 그대로 있고 화면에서만 빠진다. */
  /* 카드가 열 껍데기 안에 들어가면서 '>' 가 안 먹는다. 자손 선택자로 바꾼다. */
  .dashboard .card[data-tab]{ display:none; }
  body[data-tab="today"] .dashboard .card[data-tab="today"],
  body[data-tab="plan"]  .dashboard .card[data-tab="plan"],
  body[data-tab="body"]  .dashboard .card[data-tab="body"],
  body[data-tab="money"] .dashboard .card[data-tab="money"]{ display:flex; }

  /* 맨 위 한 줄 요약은 '오늘'에서만. 다른 탭에는 그 카드가 이미 펼쳐져 있다. */
  body[data-tab]:not([data-tab="today"]) .top-strip{ display:none !important; }

  /* 탭바에 마지막 카드가 가리지 않도록 */
  .dashboard{ padding-bottom:calc(var(--tabbar-h, 54px) + max(env(safe-area-inset-bottom), 6px) + 14px); }
}

/* 태블릿 세로(641~900px)에서는 2열 유지 + 탭. 한 탭에 카드 두세 개면 딱 맞는다. */
@media (max-width:900px) and (min-width:641px){
  .dash-top{ grid-template-columns:1fr 1fr; }
}

/* ═══════════════════════════════════════
   상단 칩 줄 — 인바디·경제도 여기 들어온다
   ═══════════════════════════════════════ */
/* 예전엔 바로 아래에 비슷하게 생긴 줄이 하나 더 있었다. 윗쪽에 줄이 둘이면
   어느 쪽을 봐야 하는지 매번 판단해야 한다. 한 줄로 합쳤다. */
.stat-chip.stat-ts{
  display:inline-flex; align-items:baseline; gap:0;
  padding:3px 11px; cursor:pointer; font-variant-numeric:tabular-nums;
}
.stat-chip.stat-ts:hover{ border-color:var(--accent); color:var(--accent); }
.stat-chip.stat-ts b{ font-weight:700; color:var(--text); }
.stat-chip.stat-ts i{ font-style:normal; font-size:11px; color:var(--text3); margin-left:1px; }
.stat-chip.stat-ts u{
  text-decoration:none; font-size:11px; font-weight:700; color:var(--yellow);
  margin-left:2px;
}
/* 값 사이 얇은 구분선. 가운뎃점보다 숫자 덩어리가 또렷하게 갈린다. */
.stat-chip.stat-ts s{
  text-decoration:none; display:inline-block;
  width:1px; height:9px; margin:0 7px; background:var(--border2); opacity:.8;
}
.stat-chip.stat-ts .ts-up{ color:var(--red); }
.stat-chip.stat-ts .ts-dn{ color:var(--blue); }

/* 다가오는 일정: 한 줄만. 두 줄이 되면 배너가 화면 위쪽을 계속 잡아먹는다.
   넘치는 건 옆으로 밀어서 본다 — 잘라 없애지는 않는다. */
.stats-upcoming{
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.stats-upcoming::-webkit-scrollbar{ display:none; }
.stats-upcoming-chip{
  flex:0 0 auto; max-width:190px;
}

/* 메인에서 끈 카드 */
.card-off{ display:none !important; }

/* 경제 카드: 종목이 많으면 접어 둔다 */
.ec-more{
  padding:8px; text-align:center; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--text3);
  border-top:1px dashed var(--border);
}
.ec-more:hover{ color:var(--accent); }

/* 메인 카드 설정 */
.cardset-grp{ margin-bottom:12px; }
.cardset-hd{ font-size:11px; font-weight:700; color:var(--text3); margin-bottom:5px; }
.cardset-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; margin-bottom:4px; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card2);
}
.cardset-nm{ font-size:13.5px; color:var(--text); }

html.dark .cardset-row{ background:var(--card2); border-color:var(--border); }

/* ── 아이콘 ──────────────────────────────
   카드 머리글과 하단 탭의 이모지를 선 아이콘으로 바꿨다.
   이모지는 기기가 그리는 그림이라 아이폰·안드로이드·윈도우가 전부 달랐고,
   색이 제각각이라 정작 봐야 할 숫자보다 아이콘이 먼저 눈에 들어왔다.
   굵기·크기·색을 여기 한 곳에서만 정한다. */
.ic{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.card-title{ display:inline-flex; align-items:center; gap:7px; }
.card-title .ic{ color:var(--text3); }

/* 하단 탭 — grayscale/opacity 는 이모지 색을 죽이려고 뒀던 것이라 이제 필요 없다.
   강조색은 지금 눌러둔 탭 하나에만 남는다. */
@media (max-width:900px){
  .tab-ic{ width:21px; height:21px; filter:none; opacity:1; color:var(--text3); }
  .tab-btn.on .tab-ic{ color:var(--accent); opacity:1; }
}

/* 메인 카드 설정의 묶음 머리글 */
.cardset-hd{ display:flex; align-items:center; gap:6px; }
.cardset-hd .ic{ width:15px; height:15px; }

/* ── 아이콘 모드: 심플 / 컬러 ─────────────
   테마(시스템·밝게·어둡게)와는 다른 축이다. 테마는 '바탕이 밝나 어둡나' 고,
   이건 '아이콘이 조용한가 말이 많은가' 다. 둘은 자유롭게 섞인다.

   컬러는 아이콘을 두 벌 그려서 만들지 않았다. 두 벌이 되면 하나를 고칠 때
   다른 하나를 잊는다 — 이 앱에서 이모지와 선 아이콘이 실제로 그렇게 어긋나 있었다.
   모양은 한 벌로 두고 색과 판만 갈아입힌다. data-i 가 어떤 아이콘인지 알려 준다.

   '귀엽다' 를 만드는 건 색이 아니라 세 가지다 —
   둥근 판, 살짝 굵고 끝이 둥근 선, 그리고 누를 때 통통 튀는 반응. */
html[data-icons="color"]{
  --i-tasks:#4f46e5; --i-calendar:#e11d48; --i-pen:#0891b2;  --i-check:#059669;
  --i-diet:#ea580c;  --i-book:#7c3aed;    --i-dumbbell:#0284c7; --i-chart:#0d9488;
  --i-trend:#16a34a; --i-memo:#d97706;    --i-moon:#6366f1;  --i-sun:#f59e0b;
  --i-plus:#4f46e5;  --i-list:#64748b;    --i-palette:#db2777; --i-camera:#0891b2;
  --i-gear:#64748b;  --i-bell:#f59e0b;    --i-download:#0284c7; --i-key:#a16207;
  --i-checkbox:#059669; --i-copy:#7c3aed; --i-pill:#e11d48;  --i-code:#0f766e;
  --i-clock:#dc2626; --i-cloud:#0284c7;   --i-user:#64748b;  --i-grid:#7c3aed;
  --i-zap:#f59e0b;   --i-refresh:#0891b2; --i-eyeoff:#64748b; --i-monitor:#4f46e5;
  --i-volume:#0284c7; --i-mute:#94a3b8;   --i-logout:#dc2626; --i-sparkle:#db2777;
}
html[data-icons="color"] .ic{
  color:var(--i, currentColor);
  stroke-width:1.9;                     /* 살짝 굵게 — 통통한 인상은 여기서 나온다 */
}
/* 이름마다 제 색. --i 하나만 갈아 끼우면 위 규칙이 알아서 쓴다. */
html[data-icons="color"] .ic[data-i="tasks"]{--i:var(--i-tasks)}
html[data-icons="color"] .ic[data-i="calendar"]{--i:var(--i-calendar)}
html[data-icons="color"] .ic[data-i="pen"]{--i:var(--i-pen)}
html[data-icons="color"] .ic[data-i="check"]{--i:var(--i-check)}
html[data-icons="color"] .ic[data-i="diet"]{--i:var(--i-diet)}
html[data-icons="color"] .ic[data-i="book"]{--i:var(--i-book)}
html[data-icons="color"] .ic[data-i="dumbbell"]{--i:var(--i-dumbbell)}
html[data-icons="color"] .ic[data-i="chart"]{--i:var(--i-chart)}
html[data-icons="color"] .ic[data-i="trend"]{--i:var(--i-trend)}
html[data-icons="color"] .ic[data-i="memo"]{--i:var(--i-memo)}
html[data-icons="color"] .ic[data-i="moon"]{--i:var(--i-moon)}
html[data-icons="color"] .ic[data-i="sun"]{--i:var(--i-sun)}
html[data-icons="color"] .ic[data-i="plus"]{--i:var(--i-plus)}
html[data-icons="color"] .ic[data-i="list"]{--i:var(--i-list)}
html[data-icons="color"] .ic[data-i="palette"]{--i:var(--i-palette)}
html[data-icons="color"] .ic[data-i="camera"]{--i:var(--i-camera)}
html[data-icons="color"] .ic[data-i="gear"]{--i:var(--i-gear)}
html[data-icons="color"] .ic[data-i="bell"]{--i:var(--i-bell)}
html[data-icons="color"] .ic[data-i="download"]{--i:var(--i-download)}
html[data-icons="color"] .ic[data-i="key"]{--i:var(--i-key)}
html[data-icons="color"] .ic[data-i="checkbox"]{--i:var(--i-checkbox)}
html[data-icons="color"] .ic[data-i="copy"]{--i:var(--i-copy)}
html[data-icons="color"] .ic[data-i="pill"]{--i:var(--i-pill)}
html[data-icons="color"] .ic[data-i="code"]{--i:var(--i-code)}
html[data-icons="color"] .ic[data-i="clock"]{--i:var(--i-clock)}
html[data-icons="color"] .ic[data-i="cloud"]{--i:var(--i-cloud)}
html[data-icons="color"] .ic[data-i="user"]{--i:var(--i-user)}
html[data-icons="color"] .ic[data-i="grid"]{--i:var(--i-grid)}
html[data-icons="color"] .ic[data-i="zap"]{--i:var(--i-zap)}
html[data-icons="color"] .ic[data-i="refresh"]{--i:var(--i-refresh)}
html[data-icons="color"] .ic[data-i="eyeoff"]{--i:var(--i-eyeoff)}
html[data-icons="color"] .ic[data-i="monitor"]{--i:var(--i-monitor)}
html[data-icons="color"] .ic[data-i="volume"]{--i:var(--i-volume)}
html[data-icons="color"] .ic[data-i="mute"]{--i:var(--i-mute)}
html[data-icons="color"] .ic[data-i="logout"]{--i:var(--i-logout)}
html[data-icons="color"] .ic[data-i="sparkle"]{--i:var(--i-sparkle)}

/* 카드 머리글과 프로필 메뉴에서는 아이콘이 혼자 서 있다. 거기에만 둥근 판을 깐다.
   판 색은 글자색을 8% 만 깔아 만든다 — 색을 서른 개 또 정하지 않으려고
   color-mix 를 쓴다. 못 알아듣는 브라우저는 판 없이 색 아이콘만 나온다(그래도 멀쩡하다). */
html[data-icons="color"] .card-title .ic,
html[data-icons="color"] .profile-menu-item .ic,
html[data-icons="color"] .cardset-hd .ic{
  box-sizing:content-box; padding:4px; border-radius:8px;
  background:color-mix(in srgb, var(--i, var(--text3)) 12%, transparent);
}
html[data-icons="color"] .card-title .ic{ color:var(--i, var(--text3)); }

/* 하단 탭도 제 색을 입는다. 다만 지금 눌러둔 탭은 강조색이 이긴다 —
   어디에 있는지가 무슨 탭인지보다 먼저다. */
@media (max-width:900px){
  html[data-icons="color"] .tab-ic{ color:var(--i, var(--text3)); opacity:1; }
  html[data-icons="color"] .tab-btn.on .tab-ic{ color:var(--accent); }
}

/* 누르면 통통. 색만으로는 '귀엽다' 가 안 되고, 이 한 번의 반응이 나머지를 만든다. */
html[data-icons="color"] .btn-sm.btn-ic:active .ic,
html[data-icons="color"] .profile-menu-item:active .ic{ transform:scale(.86); }
html[data-icons="color"] .ic{ transition:transform .12s cubic-bezier(.34,1.8,.64,1); }
html[data-icons="color"] .btn-sm.btn-ic:hover .ic{ transform:scale(1.12) rotate(-4deg); }

/* 어두운 바탕에서는 같은 색이 탁해진다. 채도를 올리고 판을 조금 더 깐다. */
html.dark[data-icons="color"] .ic{ filter:saturate(1.25) brightness(1.18); }
html.dark[data-icons="color"] .card-title .ic,
html.dark[data-icons="color"] .profile-menu-item .ic,
html.dark[data-icons="color"] .cardset-hd .ic{
  background:color-mix(in srgb, var(--i, var(--text3)) 18%, transparent);
}

/* 움직임을 원치 않는다고 기기에 적어 둔 사람에게는 튀지 않는다. */
@media (prefers-reduced-motion: reduce){
  html[data-icons="color"] .ic{ transition:none; }
  html[data-icons="color"] .btn-sm.btn-ic:hover .ic{ transform:none; }
}

/* ── 빈 화면 아이콘 ────────────────────── */
.ic-empty{
  display:block; width:34px; height:34px; margin:2px auto 10px;
  color:var(--text3); stroke-width:1.25; opacity:.7;
}

/* ── 인바디 차트: 지표 겹쳐보기 + 값 툴팁 ── */
.ib-tab{ display:inline-flex; align-items:center; gap:5px; }
.ib-dot{ width:7px; height:7px; border-radius:50%; border:1.5px solid; flex:none; }

.ib-chart{ position:relative; }
.ib-hit{ cursor:crosshair; }
.ib-guide{ stroke:var(--border2); stroke-width:1; stroke-dasharray:3 3; }
.ib-tip{
  position:absolute; top:2px; z-index:5;   /* 좌우 위치는 _paintHover 가 잡는다 */
  display:flex; flex-direction:column; gap:1px;
  background:var(--text); color:var(--card);
  border-radius:7px; padding:5px 9px;
  font-size:11.5px; line-height:1.55; white-space:nowrap;
  pointer-events:none;                 /* 툴팁이 커서를 가로채면 깜빡인다 */
  box-shadow:0 2px 10px rgba(0,0,0,0.2);
}
.ib-tip em{ font-style:normal; opacity:.6; font-size:10.5px; }
.ib-tip span{ display:flex; align-items:center; gap:5px; }
.ib-tip i{ width:6px; height:6px; border-radius:50%; flex:none; }
.ib-tip b{ font-weight:700; }

/* ── Hevy 운동 기록 ─────────────────────
   계획 아래에 '실제로 한 것' 을 붙인다. 계획은 예정, 이건 사실이라
   테두리 하나로 구역을 갈라 둔다. */
.hv-box{
  margin:10px 0 4px; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card2);
}
.hv-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.hv-title{ font-size:12.5px; font-weight:700; color:var(--text2); }
.hv-src{
  font-size:10px; font-weight:700; letter-spacing:.03em;
  color:var(--text3); border:1px solid var(--border2);
  border-radius:4px; padding:1px 5px;
}
.hv-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px;
  padding:5px 0; border-top:1px solid var(--border);
}
.hv-row:first-of-type{ border-top:0; }
.hv-nm{ font-size:13px; color:var(--text); word-break:keep-all; }
.hv-vol{ font-size:11.5px; color:var(--text3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hv-sets{
  grid-column:1/-1; font-size:11.5px; color:var(--text2);
  font-variant-numeric:tabular-nums;
}
.hv-foot{
  margin-top:7px; padding-top:6px; border-top:1px solid var(--border);
  font-size:11.5px; color:var(--text3); text-align:right;
  font-variant-numeric:tabular-nums;
}
/* 자동 체크는 손으로 누른 것과 구분한다 — 왜 켜졌는지 모르면 불안하다.
   진한 보라는 '내가 눌렀다', 연한 보라는 'Hevy 기록에서 왔다'. */
.ex-item.ex-auto .ex-chk{ background:var(--accent-l); border-color:var(--accent-l); }

/* ── 상단 통계 칩 ────────────────────────
   이모지를 걷어내고 카드 머리글과 같은 선 아이콘으로 맞춘다.
   .stat-ts(인바디·경제 칩)는 자기 정렬 규칙이 따로 있어 건드리지 않는다. */
.stat-chip:not(.stat-ts){ display:inline-flex; align-items:center; gap:5px; }
.chip-ic{ width:14px; height:14px; opacity:.7; }
.stats-upcoming-chip{ display:inline-flex; align-items:center; gap:4px; }
.stats-upcoming-chip .chip-ic{ width:12px; height:12px; }

/* 목표를 넘긴 건 '잘한 것' 도 '주의' 도 아니라 넘긴 것이다. 색을 따로 준다. */
.stat-chip.stat-red{ background:#fef2f2; border-color:#fecaca; color:var(--red); }
html.dark .stat-chip.stat-red{ background:rgba(220,38,38,0.14); border-color:rgba(220,38,38,0.35); color:#fca5a5; }

/* 다크에서 초록 칩만 배경이 하얗게 남아 있었다. 노랑은 이미 눌러 뒀는데 초록이 빠져 있었다. */
html.dark .stat-chip.stat-green{ background:rgba(5,150,105,0.14); border-color:rgba(5,150,105,0.35); color:#6ee7b7; }

/* ── 주간 볼륨 막대 ──────────────────────
   한 계열뿐이라 범례가 없다. 막대 색은 하나, 값은 아래 한 줄이 읽어 준다. */
.hw{ margin:10px 0 2px; }
.hw-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.hw-t{ font-size:12.5px; font-weight:700; color:var(--text2); }
.hw-n{ font-size:11px; color:var(--text3); }
.hw-bars{ display:flex; align-items:flex-end; gap:3px; }
.hw-col{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
}
/* 막대는 바닥에 붙고 끝만 둥글다. 바닥까지 둥글면 값이 실제보다 작아 보인다. */
.hw-bar{
  width:100%; max-width:26px; min-height:2px;
  background:var(--accent); border-radius:4px 4px 0 0;
  transition:opacity .12s;
}
.hw-col{ height:74px; justify-content:flex-end; }
.hw-col .hw-bar{ align-self:center; }
.hw-lb{ font-size:10px; color:var(--text3); font-variant-numeric:tabular-nums; }
.hw-col.now .hw-bar{ background:var(--accent-l); }   /* 아직 안 끝난 주 */
.hw-col.on  .hw-bar{ opacity:.65; }
/* 쉰 주 — 막대가 아니라 바닥 눈금. 짧은 막대로 두면 '조금은 했다' 로 읽힌다. */
.hw-col.zero .hw-bar{ height:2px !important; min-height:2px; background:var(--border2); border-radius:2px; }
.hw-col:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.hw-read{
  margin-top:7px; padding-top:6px; border-top:1px solid var(--border);
  font-size:11.5px; color:var(--text2); text-align:center;
  font-variant-numeric:tabular-nums;
}
.hw-wip{ color:var(--text3); font-size:10.5px; }

/* ── 헤더 오른쪽 두 줄 (인바디 · 자산) ────
   날씨가 있던 자리다. 날씨는 잠금화면에도 위젯에도 창밖에도 있다.
   여기에는 여기서만 볼 수 있는 걸 둔다. */
.h-sum{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.h-sum.is-empty{ display:none; }
.ts-row{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; padding:1px 0; cursor:pointer;
  font-family:inherit; font-size:12px; color:var(--text2);
  font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.45;
}
.ts-row:hover{ color:var(--accent); }
.ts-row:hover .ts-ic{ color:var(--accent); }
.ts-row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.ts-ic{ width:14px; height:14px; opacity:.75; flex:none; }
.ts-body b{ font-weight:700; color:var(--text); }
.ts-body i{ font-style:normal; font-size:11px; color:var(--text3); margin-left:1px; }
.ts-body u{ text-decoration:none; font-size:10px; font-weight:700; color:var(--yellow); margin-left:2px; }
/* 값 사이 얇은 구분선. 가운뎃점보다 숫자 덩어리가 또렷하게 갈린다. */
.ts-body s{
  text-decoration:none; display:inline-block;
  width:1px; height:9px; margin:0 6px; background:var(--border2); opacity:.8;
}
/* 폰에서 이 줄이 길어지면 헤더의 왼쪽(날짜)을 밀어냈다. 두 가지를 건다 —
   값 사이 간격을 좁히고, 그래도 넘치면 줄이 스스로 잘리게 한다.
   왼쪽을 침범하느니 오른쪽 끝이 흐려지는 편이 낫다. */
@media (max-width:640px){
  .h-sum{ min-width:0; max-width:60vw; }
  .ts-row{ font-size:11px; gap:4px; max-width:100%; }
  /* flex 컨테이너에는 말줄임이 안 걸린다. 폰에서만 인라인으로 흘려 ... 이 생기게 한다.
     안쪽 b·i·s 는 원래 인라인이라 모양은 그대로다. */
  .ts-row .ts-body{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .ts-body s{ margin:0 3px; }
  .ts-body i{ margin-left:0; }
  .ts-ic{ width:12px; height:12px; }
}


/* ── AI 음식 사전 ─────────────────────────────────────
   프리셋에 없는 음식을 AI 로 찾는 길. 결과는 '담기 전에 고칠 수 있는 카드'로
   보여준다 — AI 가 낸 숫자가 확인 없이 기록으로 들어가면 안 된다. */
.diet-ai-btn{
  width:100%; margin-top:6px; padding:9px 10px;
  background:none; border:1px dashed var(--border); border-radius:var(--r-sm);
  color:var(--text2); font-size:12.5px; font-weight:600; cursor:pointer;
}
.diet-ai-btn:hover:not(:disabled){ color:var(--accent); border-color:var(--accent); }
.diet-ai-btn:disabled{ opacity:.6; cursor:default; }

.diet-ai-card{
  margin-top:8px; padding:10px;
  border:1px solid var(--accent); border-radius:var(--r-sm); background:var(--accent-bg);
}
.diet-ai-hd{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-bottom:8px; }
.diet-ai-nm{ font-size:13.5px; font-weight:700; color:var(--text); }
.diet-ai-warn{ font-size:11px; color:var(--text3); }
.diet-ai-u{ font-size:11px; color:var(--text3); }

/* 식약처 DB 에 없는 제품 — 포장의 표를 찍어 옮겨 적는 길.
   추정이 아니라 읽기이므로, AI 카드와 달리 경고색을 쓰지 않는다. */
.diet-label-box{
  margin-top:10px; padding:10px;
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--card2);
}
.diet-label-hint{ font-size:11.5px; color:var(--text3); line-height:1.5; margin:2px 0 8px; }
.diet-label-hint b{ color:var(--text2); font-weight:600; }

/* ── 바코드 스캔 ─────────────────────────
   이름으로 51건 중에서 고르는 대신 제품 하나를 가리킨다. 그래서 검색창 바로 아래 둔다. */
.scan-btn{
  width:100%; margin:8px 0 4px; padding:11px 12px;
  display:flex; align-items:baseline; justify-content:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--text);
  background:var(--card2); border:1px solid var(--border); border-radius:var(--r-sm);
  cursor:pointer;
}
.scan-btn i{ font-style:normal; font-size:11px; font-weight:400; color:var(--text3); }
.scan-btn:active{ background:var(--bg2); }

.scan-wrap{
  position:fixed; inset:0; z-index:9000;
  display:flex; flex-direction:column; gap:10px; padding:14px;
  background:var(--bg); overflow-y:auto;
}
.scan-hd{
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; font-weight:700; color:var(--text);
}
.scan-x{
  width:32px; height:32px; font-size:16px; line-height:1;
  color:var(--text2); background:var(--card2);
  border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer;
}
.scan-view{ position:relative; border-radius:var(--r-sm); overflow:hidden; background:#000; }
.scan-view video{ display:block; width:100%; max-height:52vh; object-fit:cover; }
/* 테두리는 장식이 아니라 안내다. 여백까지 안 들어오면 못 읽으므로 넉넉히 그린다. */
.scan-frame{
  position:absolute; left:8%; right:8%; top:28%; bottom:28%;
  border:2px solid var(--accent); border-radius:6px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35);
}
.scan-msg{ font-size:12.5px; color:var(--text2); line-height:1.6; text-align:center; }
.scan-msg i{ font-style:normal; display:block; font-size:11px; color:var(--text3); }
.scan-msg b{ font-weight:700; color:var(--text); }
.scan-foot{ display:flex; gap:8px; }
.scan-foot .inp{ flex:1; min-width:0; }
.scan-again{ display:flex; gap:8px; margin-top:10px; }
.scan-again .btn-sm{ flex:1; }

.scan-id{
  padding:10px; margin-bottom:8px;
  background:var(--card2); border:1px solid var(--border); border-radius:var(--r-sm);
}
.scan-id-nm{ font-size:14px; font-weight:700; color:var(--text); }
.scan-id-sub{ font-size:11.5px; color:var(--text3); margin-top:2px; }
.scan-sure{ font-size:11.5px; color:var(--accent); margin-top:6px; font-weight:600; }
.scan-warn{ font-size:11.5px; color:var(--text3); margin-top:4px; }

/* 세트를 구성품으로 쪼개 보여 준다. 합계 하나만 있으면 틀렸는지조차 알 수 없다 —
   '감자 470' 을 봐야 '내 건 미디엄인데' 라고 고칠 수 있다. */
.diet-ai-parts{
  margin:8px 0 4px; padding:7px 9px;
  background:var(--card2); border:1px solid var(--border); border-radius:var(--r-xs);
}
.dap-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--text2); padding:2px 0;
}
.dap-n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dap-n i{ font-style:normal; color:var(--text3); font-size:10.5px; margin-left:3px; }
.dap-c{ flex:none; font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
.dap-c i{ font-style:normal; font-weight:400; font-size:10px; color:var(--text3); margin-left:1px; }
.dap-sum{ margin-top:3px; padding-top:5px; border-top:1px solid var(--border); font-weight:700; }
.dap-sum .dap-n{ color:var(--text); font-weight:700; }
.diet-ai-note{
  margin:6px 0 2px; font-size:11px; line-height:1.45; color:var(--yellow);
}
.diet-ai-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
/* 기준량은 "1인분 (350g)" 처럼 길다. 한 칸에 우겨넣으면 잘려서 뭘 기준으로 낸
   숫자인지 못 읽는다 — 그게 이 카드에서 제일 중요한 정보다. */
.diet-ai-grid label:first-child{ grid-column:1 / -1; }
.diet-ai-grid label{
  display:flex; flex-direction:column; gap:3px;
  font-size:10.5px; color:var(--text3);
}
.diet-ai-grid .inp{ width:100%; }
.diet-ai-add{ width:100%; margin-top:9px; padding:9px; }

/* ── 습관 분류 전환 ──────────────────────────────────
   '오늘의 습관'과 '자기개발'이 카드 두 장이던 걸 한 장으로 합쳤다.
   안 보고 있는 쪽에 남은 개수를 숫자로 띄운다 — 그게 없으면 자기개발이
   눈에서 사라지고, 눈에서 사라지면 그냥 안 하게 된다. */
/* 분류 이름표 — 예전엔 카드 위 탭이었다. 탭 하나에 습관 두어 개씩이라 매번 건너다녀야 했고,
   안 보고 있는 쪽은 그냥 안 하게 됐다. 지금은 한 목록이고 분류는 줄에 붙는 표시일 뿐이다. */
.hb-cat-ic{ width:14px; height:14px; color:var(--text3); flex:none; margin-right:5px; vertical-align:-2px; }
.habit-time{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:20px;
  background:var(--accent-bg); border:1px solid var(--border2);
  font-size:11px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums;
}
/* 약 전용 칸 */
.med-line{ display:flex; align-items:center; gap:10px; }
.med-chk{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text2); cursor:pointer; }
.med-note{ margin-top:5px; font-size:11px; line-height:1.5; color:var(--text3); word-break:keep-all; }

/* ── 목록 한 줄 조작 (js/rowui.js) ────────────────────
   손가락은 밀어서, 마우스는 올려서. 같은 줄에 두 길을 같이 둔다. */
.rw{ position:relative; overflow:hidden; }
.rw-slide{ position:relative; z-index:1; transition:transform .18s cubic-bezier(.2,.8,.2,1); }
.rw-slide.rw-on{ transform:translateX(-56px); }
/* 버튼은 미는 동안에만 보인다. 늘 깔아 두면 줄의 둥근 모서리 틈으로 빨간 게 비친다 —
   아무것도 안 했는데 삭제가 어른거리는 건 불안하다. */
.rw-del{
  position:absolute; top:0; right:0; bottom:0; width:56px; z-index:0;
  display:none; align-items:center; justify-content:center;
  background:var(--red); color:#fff; border:0; cursor:pointer;
  font-size:12px; font-weight:700; font-family:inherit;
  opacity:0; transition:opacity .12s;
}
.rw-slide.rw-on ~ .rw-del, .rw-slide.rw-drag ~ .rw-del{ opacity:1; }
.rw-x{
  flex:none; background:transparent; border:0; cursor:pointer; font-family:inherit;
  color:var(--text3); font-size:12px; padding:2px 5px; border-radius:4px;
  opacity:0; transition:opacity .15s, color .15s, background .15s;
}
.rw-x:hover{ color:var(--red); background:#fee2e2; }
html.dark .rw-x:hover{ background:rgba(220,38,38,.18); }

/* 마우스가 있는 화면 — 줄에 올리거나 키보드로 들어오면 ✕ 가 보인다.
   호버해야만 나타나는 버튼은 키보드 쓰는 사람에겐 없는 버튼이라 focus-within 을 같이 건다. */
@media (hover:hover){
  .rw:hover .rw-x, .rw:focus-within .rw-x{ opacity:1; }
  .rw-x:focus-visible{ opacity:1; outline:2px solid var(--accent); outline-offset:1px; }
}
/* 손가락만 있는 화면 — ✕ 대신 밀어서 나오는 삭제 버튼 */
@media (hover:none){
  .rw-x{ display:none; }
  .rw-del{ display:flex; }
  .rw-slide{ touch-action:pan-y; }
}

/* ── 일정과 할일 (한 카드) ─────────────────────────────
   달력이 할일의 날짜 필터를 겸한다. 두 덩어리 사이에 선을 하나 둬서
   '위는 일정, 아래는 할일' 이 눈으로 갈리게 한다. */
.cal-sep{ height:1px; background:var(--border); margin:2px 14px 4px; }
.task-datechip{
  display:flex; align-items:center; gap:6px; margin:0 0 8px;
  padding:5px 10px; border-radius:20px; width:fit-content;
  background:var(--accent-bg); border:1px solid var(--accent);
  color:var(--accent); font-size:11.5px; font-weight:700;
}
.task-datechip button{
  background:none; border:0; cursor:pointer; font-family:inherit;
  color:inherit; font-size:12px; line-height:1; padding:0 1px;
}
.task-datechip button:hover{ opacity:.65; }


/* ── 활자 규칙 (supanova redesign 체크리스트에서 골라 적용) ─────────
   랜딩 페이지용 스킬이라 여백·모션·히어로 얘기는 안 가져왔다. 대시보드에도
   그대로 통하는 다섯 개만 옮겼다. */

/* 1. 숫자는 폭이 고정돼야 한다.
   kcal·체중·수익률·3/17 이 값이 바뀔 때마다 좌우로 흔들리면
   같은 자리에 있는 숫자를 눈이 매번 다시 찾는다. */
body{ font-variant-numeric: tabular-nums; }
/* 이름·문장에는 걸지 않는다. 비례 폭이 읽기엔 낫다. */
.habit-name, .task-text, .task-title-txt, .cl-title, .memo-item,
.event-title, .diet-food-nm, .j-bubble{ font-variant-numeric: normal; }

/* 2. 한글은 단어 가운데서 끊지 않는다. */
body, .empty, .card-title, .modal-lbl, .habit-name, .task-text,
.cl-title, .event-title, .wm-hint, .diet-empty-hint, .notif-time-lbl{
  word-break: keep-all;
  overflow-wrap: anywhere;   /* 그래도 안 들어가는 긴 URL 은 끊는다 */
}

/* 3. 제목은 줄을 고르게 나눈다 — 마지막 한 글자만 떨어지는 걸 막는다. */
.card-title, .modal-head h3, .empty{ text-wrap: balance; }

/* 4. 굵기 단계. 400 과 700 만 쓰면 '중간' 이 없어서 위계가 두 칸뿐이다. */
.card-title{ font-weight:600; }
.habit-name, .cl-title, .task-title-txt{ font-weight:500; }
.stat-chip{ font-weight:600; }

/* 5. 숫자를 읽는 자리는 자간을 조금 좁힌다. 큰 수가 늘어질 때 덩어리로 안 읽힌다. */
.ib-tile-val, .wm-cnt, .hw-val, .ec-price, .stat-chip{ letter-spacing:-0.01em; }