:root {
  --bg: #0b0f19;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
  --text: #f8f8f8;
  --muted: #b9c0d0;
  --accent: #4caf50;
}
*{box-sizing:border-box} html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif}
.container{max-width:1100px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.hero h1{margin:0 0 6px;font-size:24px}
.hero .sub{margin:0;color:var(--muted)}
.clock{font-size:28px;font-weight:700}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.card-title{font-weight:700;margin-bottom:10px}
.weather{min-height:36px;display:flex;align-items:center}
.chat{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:12px}
.chat .user{align-self:flex-end;background:#2c7be5;color:#fff;padding:8px 10px;border-radius:12px 12px 2px 12px;max-width:80%}
.chat .bot{align-self:flex-start;background:rgba(255,255,255,.08);padding:8px 10px;border-radius:12px 12px 12px 2px;max-width:80%}
.chat-form{display:flex;gap:8px;margin-top:8px}
.chat-form input{flex:1;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:10px;padding:10px}
.primary{background:#2c7be5;color:#fff;border:none;border-radius:10px;padding:10px 14px}
.ghost{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px}
.big-mic{font-size:20px;padding:12px}
.tts-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.tts-row .spacer{flex:1}
.grid{display:grid;gap:16px;grid-template-columns:1fr; }
@media(min-width:800px){ .grid{grid-template-columns:1fr 1fr;} }
.feed,.sched{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.feed li,.sched li{border:1px solid var(--border);border-radius:12px;padding:10px}
.feed .feed-title{font-weight:600}
.feed .feed-sub{font-size:12px;color:var(--muted)}
.sched .sched-time{font-weight:700}
.sched .sched-title{font-weight:600}
.sched .empty,.feed .empty{opacity:.7}
.footer{text-align:center;color:var(--muted);padding:12px}

/* ===== #trstart 유지 (대표 요청) ===== */
#trstart { margin:16px 0; padding:12px; border-radius:12px;
  background: rgba(76, 175, 80, .12); border: 1px dashed rgba(76,175,80,.5); }
#trstart .title { font-weight:700; margin-bottom:6px; }
#trstart .desc { font-size:14px; opacity:.9; }
#trstart .row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
#trstart .row .btn { padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:transparent; color:var(--text); }

/* 모바일 최적화 */
@media(max-width:480px){
  .hero h1{font-size:20px}
  .clock{font-size:24px}
}

/* ===== 통역 UI 보조 ===== */
.btn-xl { font-size: 18px; padding: 14px 18px; border-radius: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.row { display:flex; }
.card textarea { background: rgba(0,0,0,.15); color: #e5e7eb; border: 1px solid rgba(255,255,255,.06); }

/* style.css 일부 예시 */
.badge{display:inline-block;margin-left:.5rem;padding:.15rem .5rem;border-radius:.5rem;
  font-size:.75rem;line-height:1;background:#e5f2ff;color:#0366d6}
.badge.pro{background:#ffeaea;color:#c62828}