/* erusin 어르신 말벗 — 어르신 기기(index.html)와 가족 화면(family.html)이 함께 쓴다
   어르신 화면은 글자를 크게(기본 26px), 대비를 높게, 누를 곳은 손바닥만 하게 한다. 노안 · 떨리는 손가락 기준이다. */
:root {
  --바탕: #fbf7f0; --면: #ffffff; --글: #1d1b18; --흐림: #6b645a; --선: #e6ddd0;
  --주: #b4521f; --주글: #ffffff; --주연: #f6e2d4; --초록: #2f7d4a; --초록연: #dff1e5; --빨강: #b3261e; --빨강연: #fbe3e1;
  --그림자: 0 2px 10px rgba(60, 40, 20, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --바탕: #16130f; --면: #221e19; --글: #f4efe7; --흐림: #b2a899; --선: #3a332b;
    --주: #f0884d; --주글: #1d1209; --주연: #3d2618; --초록: #6fcf8f; --초록연: #1f3a28; --빨강: #ff8a80; --빨강연: #42201d;
    --그림자: none;
  }
}
:root[data-theme="dark"] {
  --바탕: #16130f; --면: #221e19; --글: #f4efe7; --흐림: #b2a899; --선: #3a332b;
  --주: #f0884d; --주글: #1d1209; --주연: #3d2618; --초록: #6fcf8f; --초록연: #1f3a28; --빨강: #ff8a80; --빨강연: #42201d;
  --그림자: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--바탕); color: var(--글); }
body { font-family: Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.흐림 { color: var(--흐림); }
.숨김 { display: none !important; }

/* ── 어르신 기기 ─────────────────────────────── */
body.어르신 { font-size: 26px; min-height: 100dvh; }
.어르신틀 { min-height: 100dvh; display: flex; flex-direction: column; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); gap: 18px; max-width: 900px; margin: 0 auto; }
.시계칸 { text-align: center; }
.시계 { font-size: 72px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.날 { font-size: 30px; font-weight: 700; }
.날씨 { font-size: 24px; color: var(--흐림); margin-top: 4px; }
.상태 { text-align: center; font-size: 28px; font-weight: 700; padding: 14px; border-radius: 20px; background: var(--면); box-shadow: var(--그림자); border: 3px solid transparent; transition: border-color .2s, background .2s; }
.상태.듣는중 { border-color: var(--주); }
.상태.대화중 { background: var(--주연); border-color: var(--주); }
.상태.생각중 { background: var(--초록연); }
.상태 small { display: block; font-size: 20px; font-weight: 500; color: var(--흐림); margin-top: 4px; }
.대화칸 { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 120px; }
.말풍선 { max-width: 88%; padding: 14px 18px; border-radius: 22px; font-size: 26px; box-shadow: var(--그림자); word-break: keep-all; overflow-wrap: anywhere; }
.말풍선.어르신 { align-self: flex-end; background: var(--주연); border-bottom-right-radius: 6px; }
.말풍선.말벗 { align-self: flex-start; background: var(--면); border-bottom-left-radius: 6px; }
.큰단추 { width: 100%; min-height: 96px; border: 0; border-radius: 28px; background: var(--주); color: var(--주글); font-size: 32px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 14px; box-shadow: var(--그림자); }
.큰단추:active { transform: scale(.98); }
.큰단추 svg { width: 44px; height: 44px; }
.작은단추 { margin-top: 12px; padding: 10px 20px; border: 1px solid var(--선); border-radius: 14px; background: transparent; color: var(--흐림); font-size: 18px; }
.큰단추.흰 { background: var(--면); color: var(--글); border: 2px solid var(--선); }
.소리막대 { height: 10px; border-radius: 5px; background: var(--선); overflow: hidden; }
.소리막대 > div { height: 100%; width: 0; background: var(--주); transition: width .1s; }
.가운데 { text-align: center; }
.번호칸 { font-size: 56px; letter-spacing: 12px; text-align: center; font-weight: 800; padding: 10px; border-radius: 18px; background: var(--면); border: 3px solid var(--선); min-height: 96px; }
.숫자판 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.숫자판 button { min-height: 84px; font-size: 38px; font-weight: 800; border-radius: 20px; border: 2px solid var(--선); background: var(--면); }
.알림글 { padding: 14px 18px; border-radius: 16px; background: var(--빨강연); color: var(--빨강); font-size: 22px; }

/* ── 가족 화면 ─────────────────────────────── */
body.가족 { font-size: 16px; }
.가족틀 { max-width: 760px; margin: 0 auto; padding: 16px 16px 80px; }
.가족틀 h1 { font-size: 24px; margin: 8px 0 4px; }
.가족틀 h2 { font-size: 18px; margin: 24px 0 10px; }
.탭들 { display: flex; gap: 6px; margin: 14px 0; overflow-x: auto; }
.탭들 button { flex: 1; min-width: 72px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--선); background: var(--면); font-weight: 700; }
.탭들 button.고름 { background: var(--주); color: var(--주글); border-color: var(--주); }
.카드 { background: var(--면); border: 1px solid var(--선); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--그림자); }
.카드들 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.카드 .값 { font-size: 20px; font-weight: 800; }
.카드 .이름표 { font-size: 13px; color: var(--흐림); }
.줄 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.줄 > input, .줄 > select { flex: 1; min-width: 120px; }
input, select, textarea { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--선); background: var(--면); max-width: 100%; }
textarea { width: 100%; resize: vertical; }
label.칸 { display: block; margin: 12px 0 4px; font-weight: 700; }
label.칸 + input, label.칸 + select, label.칸 + textarea { width: 100%; }
.단추 { padding: 10px 16px; border-radius: 10px; border: 0; background: var(--주); color: var(--주글); font-weight: 700; }
.단추.흰 { background: var(--면); color: var(--글); border: 1px solid var(--선); }
.단추.빨강 { background: var(--빨강); color: #fff; }
.단추.작게 { padding: 6px 10px; font-size: 14px; }
.목록 { list-style: none; padding: 0; margin: 0; }
.목록 li { padding: 12px 0; border-bottom: 1px solid var(--선); display: flex; gap: 10px; align-items: flex-start; }
.목록 li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.열쇠 { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--주연); font-size: 13px; margin: 4px 4px 0 0; }
.때 { font-size: 13px; color: var(--흐림); }
.알림.말없음, .알림.기기꺼짐 { border-left: 4px solid var(--빨강); }
.알림.다시들림, .알림.기기켜짐 { border-left: 4px solid var(--초록); }
.알림.전할말 { border-left: 4px solid var(--주); }
.번호보기 { font-size: 40px; font-weight: 800; letter-spacing: 8px; text-align: center; padding: 12px; background: var(--주연); border-radius: 14px; }
.쪽지 { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--글); color: var(--바탕); padding: 10px 18px; border-radius: 12px; z-index: 10; max-width: calc(100% - 32px); }
.처음틀 { max-width: 460px; margin: 40px auto; }
.연락처줄 { border: 1px dashed var(--선); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.연락처줄 .줄 + .줄 { margin-top: 6px; }