/* ── 오늘의 할머니 · 디자인 시스템 v3 "캄 블루" ─────────────
   시안 C 확정 (2026-07-24): 명상앱 계열의 진정되는 블루 톤.
   서체: Wanted Sans (세련+가독). 어르신 사용자 고려해 기본 크기 큼직하게.
   AI 기능은 태블릿 오브와 이어지는 청록→보라 그라데이션 */
:root {
  --bg:#F6F8FC;            /* 차분한 담청 바탕 */
  --card:#FFFFFF;
  --soft:#F0F3FA;          /* 카드 안 타일 */
  --ink:#2B3550;
  --dim:#93A0BF;
  --line:#E9EDF7;
  --primary:#5B74D8;       /* 주요 행동 */
  --primary-deep:#4A61C0;
  --ai-a:#5BC8D8; --ai-b:#8B7CF6;   /* AI 그라데이션 */
  --red:#D96A6A; --amber:#D9A054; --good:#4CA88C;
  --shadow:0 2px 12px rgba(43,53,80,.06);
  --shadow-lift:0 8px 26px rgba(91,116,216,.18);
}
* { box-sizing:border-box; margin:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:"Wanted Sans Variable","Wanted Sans","Pretendard Variable",Pretendard,-apple-system,"Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--ink);
  padding-bottom:92px;
  letter-spacing:-.01em;
}
#view { max-width:520px; margin:0 auto; padding:24px 18px 28px; }

/* ── 히어로: 오늘 한 문장 ── */
.hero { padding:24px 4px 18px; }
.hero .eyebrow { font-size:13px; letter-spacing:.14em; color:var(--dim); font-weight:700; }
.hero h1 { font-size:22px; font-weight:750; line-height:1.6; margin-top:10px; text-wrap:balance; }
.hero .empty { color:var(--dim); font-weight:500; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip {
  background:var(--card); border-radius:999px; box-shadow:var(--shadow);
  padding:8px 15px; font-size:14px; color:var(--dim); font-weight:500;
}
.chip b { color:var(--primary); font-weight:700; }
.chip.warn b { color:var(--amber); }

/* ── 카드 ── */
.card {
  background:var(--card); border:none; border-radius:20px;
  padding:20px; margin-top:14px; box-shadow:var(--shadow);
}
.card h2 {
  font-size:12px; color:var(--dim); font-weight:700; margin-bottom:12px;
  letter-spacing:.15em;
}

/* ── 건강 기록 ── */
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metric { background:var(--soft); border-radius:14px; padding:12px 14px; }
.metric .m-type { font-size:12.5px; color:var(--dim); font-weight:600; }
.metric .m-value { font-size:20px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; }
.metric .m-time { font-size:11.5px; color:var(--dim); margin-top:3px; }
.metric .m-del { float:right; border:none; background:none; color:var(--dim);
  cursor:pointer; font-size:13px; padding:0 2px; }

.seg { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.seg button {
  padding:10px 15px; border:none; border-radius:999px; font-size:15px;
  font-family:inherit; cursor:pointer; background:var(--soft); color:var(--ink);
  font-weight:600;
}
.seg button.on { background:var(--primary); color:#fff; }

.field-row { display:flex; gap:8px; }
.field-row input {
  flex:1; min-width:0; padding:14px; font-size:16px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:14px; background:var(--card);
}
.field-row input:focus { outline:none; border-color:var(--primary); }

/* ── AI 상태 확인 (Vision) ── */
.vision-btn {
  display:block; width:100%; margin-top:14px; padding:16px;
  border:none; border-radius:16px; cursor:pointer; font-family:inherit;
  font-size:16px; font-weight:700; color:#fff;
  background:linear-gradient(120deg, var(--ai-a), var(--ai-b));
  box-shadow:0 4px 18px rgba(139,124,246,.28);
}
.vision-btn:disabled { opacity:.6; }
.vision-note {
  margin-top:14px; padding:16px; border-radius:16px; font-size:15.5px;
  line-height:1.7; background:var(--card); position:relative;
  border:1.5px solid transparent;
  background-image:linear-gradient(var(--card), var(--card)),
                   linear-gradient(120deg, var(--ai-a), var(--ai-b));
  background-origin:border-box; background-clip:padding-box, border-box;
}
.vision-note .v-meta { font-size:12.5px; color:var(--dim); margin-top:8px; }
.vision-note.thinking { color:var(--dim); }
.v-dots::after { content:""; animation:vdots 1.4s infinite; }
@keyframes vdots { 0%{content:""} 25%{content:"·"} 50%{content:"· ·"} 75%{content:"· · ·"} }

/* ── 큰 행동 버튼 (통화·지켜보기) ── */
.call-btn {
  display:block; width:100%; margin-top:14px; padding:20px;
  background:var(--primary);
  color:#fff; border:none; border-radius:18px;
  font-size:17px; font-weight:800; font-family:inherit; cursor:pointer;
  box-shadow:var(--shadow-lift);
}
.call-btn small { display:block; font-weight:500; font-size:13px; opacity:.85; margin-top:5px; }
.call-btn:active { transform:translateY(1px); background:var(--primary-deep); }
.call-btn.watch {
  background:var(--card); color:var(--primary);
  border:1.5px solid var(--line); box-shadow:var(--shadow);
}
.call-btn.watch small { color:var(--dim); }

/* ── 리포트 ── */
.report-day { margin-top:14px; }
.report-day .date { font-size:13.5px; color:var(--dim); margin-bottom:8px; font-weight:600; }
.report-day p { font-size:15.5px; line-height:1.75; }
.mood { font-size:20px; }

/* ── 알림 ── */
.alert { display:flex; gap:12px; align-items:flex-start; }
.alert .dot { width:10px; height:10px; border-radius:50%; margin-top:8px; flex:none; }
.alert.danger .dot { background:var(--red); box-shadow:0 0 0 4px rgba(217,106,106,.15); }
.alert.warn .dot { background:var(--amber); box-shadow:0 0 0 4px rgba(217,160,84,.15); }
.alert.info .dot { background:var(--good); box-shadow:0 0 0 4px rgba(76,168,140,.13); }
.alert time { font-size:12.5px; color:var(--dim); }
.alert .go-call { margin-top:10px; }

/* ── 학습 (G4) ── */
.progress { height:8px; background:var(--soft); border-radius:999px; overflow:hidden; margin:10px 0 6px; }
.progress i { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--ai-a), var(--ai-b)); }
.clip audio { width:100%; margin:10px 0; }
.clip input {
  width:100%; padding:14px; font-size:16px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:14px;
}
.clip input:focus { outline:none; border-color:var(--primary); }
.clip-actions { display:flex; gap:10px; margin-top:12px; }

.btn {
  flex:1; padding:14px 16px; border:none; border-radius:14px; font-size:15.5px;
  font-weight:700; font-family:inherit; cursor:pointer;
}
.btn.ok { background:var(--primary); color:#fff; }
.btn.ok:active { background:var(--primary-deep); }
.btn.ghost { background:var(--soft); color:var(--ink); }

/* ── 설정 ── */
.setting-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--line); gap:10px;
}
.setting-row:last-child { border-bottom:none; }
.setting-row label { font-size:15.5px; }
.setting-row select, .setting-row input[type=text] {
  padding:10px 12px; border:1.5px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:15px; background:var(--card);
}
.switch { width:50px; height:30px; appearance:none; background:var(--line);
  border-radius:999px; position:relative; cursor:pointer; transition:.2s; flex:none; }
.switch:checked { background:var(--primary); }
.switch::after { content:""; position:absolute; width:24px; height:24px; top:3px; left:3px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(43,53,80,.25); }
.switch:checked::after { left:23px; }

/* ── 탭바 (선 아이콘) ── */
.tabbar {
  position:fixed; bottom:0; left:0; right:0; display:flex;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:7px 8px calc(8px + env(safe-area-inset-bottom));
  max-width:560px; margin:0 auto; border-radius:22px 22px 0 0;
  box-shadow:0 -4px 20px rgba(43,53,80,.07);
}
.tabbar button {
  flex:1; padding:8px 0 6px; border:none; background:none;
  color:var(--dim); cursor:pointer; font-family:inherit; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.tabbar button svg { width:22px; height:22px; }
.tabbar button span { font-size:11px; font-weight:600; }
.tabbar button.active { color:var(--primary); background:var(--soft); }

/* ── 통화 오버레이 (G1) ── */
.call-overlay { position:fixed; inset:0; background:#0B0E16; z-index:50; }
.call-overlay.hidden, .login-overlay.hidden, .hidden { display:none; }
#remoteVideo { width:100%; height:100%; object-fit:cover; }
.pip { position:absolute; top:16px; right:16px; width:110px; border-radius:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.4); }
.caption-box {
  position:absolute; left:16px; right:16px; bottom:100px;
  background:rgba(20,25,40,.74); backdrop-filter:blur(8px);
  border-radius:18px; padding:14px 18px; color:#fff;
}
.caption-label { font-size:11.5px; opacity:.65; margin-bottom:4px; letter-spacing:.1em; }
#captionText { font-size:21px; font-weight:600; line-height:1.5; }
.caption-raw { font-size:13.5px; opacity:.55; margin-top:6px; }
.call-actions {
  position:absolute; bottom:26px; left:0; right:0;
  display:flex; gap:10px; justify-content:center;
}
.pill {
  padding:14px 22px; border:none; border-radius:999px; font-size:15.5px;
  font-weight:700; font-family:inherit; background:rgba(255,255,255,.16);
  color:#fff; backdrop-filter:blur(10px); cursor:pointer;
}
.pill.danger { background:var(--red); }

/* ── 로그인 ── */
.login-overlay {
  position:fixed; inset:0; z-index:100;
  background:linear-gradient(165deg, #F6F8FC 40%, #E9EDF9 100%);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card {
  width:100%; max-width:380px; background:var(--card); border-radius:24px;
  padding:32px 26px; box-shadow:var(--shadow-lift);
}
.login-card h1 { font-size:22px; font-weight:750; margin-bottom:20px; line-height:1.5; }
.login-card input {
  width:100%; padding:15px; font-size:16px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:14px; margin-bottom:10px;
}
.login-card input:focus { outline:none; border-color:var(--primary); }
.kakao-btn {
  width:100%; padding:15px; border:none; border-radius:14px; font-size:16px;
  font-weight:700; font-family:inherit; background:#FEE500; color:#191919;
  cursor:pointer; margin-bottom:10px;
}