/* 고령·청각장애 사용자 대상: 큰 글씨·고대비·단순 레이아웃 */
:root { --bg:#f6f7f9; --card:#fff; --fg:#111; --muted:#5b6270; --accent:#1f5fbf; --accent-fg:#fff; --line:#d9dde3; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Noto Sans KR","Malgun Gothic",system-ui,sans-serif; font-size:20px; color:var(--fg); background:var(--bg); }
.top { display:flex; justify-content:space-between; align-items:center; padding:14px 22px; background:var(--card); border-bottom:1px solid var(--line); }
.top h1 { font-size:24px; margin:0; }
main { max-width: 960px; margin: 0 auto; padding: 18px; display:grid; gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.card h2 { margin:0 0 12px; font-size:22px; }
.muted { color:var(--muted); font-size:16px; }
label { display:block; margin:10px 0; }
input, select, textarea { font-size:20px; padding:10px; border:1px solid var(--line); border-radius:8px; width:100%; }
.consent input { width:auto; transform:scale(1.4); margin-right:10px; }
.row { display:flex; align-items:center; gap:14px; margin-top:10px; }
.btn { font-size:20px; padding:12px 20px; border-radius:10px; border:1px solid var(--accent); background:#fff; color:var(--accent); cursor:pointer; }
.btn.primary { background:var(--accent); color:var(--accent-fg); }
.btn:disabled { opacity:.5; cursor:default; }
[hidden] { display:none !important; }

.banner { background:#fff4e5; border:1px solid #f0c27b; color:#7a4b00; padding:12px 14px; border-radius:10px; margin:10px 0; font-size:18px; }
.cam-wrap { position:relative; width:100%; max-width:640px; aspect-ratio:4/3; background:#111; border-radius:10px; overflow:hidden; margin:10px 0; }
.cam-wrap video, .cam-wrap canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mirror { transform: scaleX(-1); }   /* 셀피 표시만 반전 — 전송·저장되는 원시 프레임은 비반전 */
.inline { display:inline-flex; align-items:center; gap:8px; margin:0; }
.inline input { width:auto; transform:scale(1.3); }

.log { min-height:120px; max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:10px; background:#fafbfc; display:flex; flex-direction:column; gap:6px; }
.msg { padding:8px 12px; border-radius:10px; max-width:90%; }
.msg.bot { background:#e8f0fe; align-self:flex-start; }
.msg.user { background:#e6f4ea; align-self:flex-end; }
.msg.sys { color:var(--muted); font-size:15px; align-self:center; }
.btn.small { font-size:16px; padding:6px 12px; }