/* 마루 2 — 차분한 종이색 바탕 + 절제된 선 아이콘. 다크/라이트 모두 지원. */
:root {
  --bg: #1c1b19;            /* 바탕 (따뜻한 먹색) */
  --panel: #232220;         /* 헤더·탭바·카드 */
  --panel-2: #2b2a27;       /* 입력칸·칩 */
  --line: #34322e;          /* 실선 */
  --line-soft: #2a2825;
  --text: #edeae4;
  --muted: #9a958c;
  --accent: #c8764f;        /* 포인트 (테라코타) */
  --accent-soft: rgba(200, 118, 79, .16);
  --on-accent: #fff;
  --me: #32302c;            /* 내가 보낸 말풍선 */
  --me-text: #f3f0ea;
  --ok: #6fae86;
  --warn: #d9a45b;
  --bad: #d4735e;
  --radius: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf9f6; --panel: #ffffff; --panel-2: #f2f0eb; --line: #e4e1d9; --line-soft: #ece9e2;
    --text: #22201d; --muted: #7b756c; --accent: #bc5f37; --accent-soft: rgba(188, 95, 55, .12);
    --me: #eeebe4; --me-text: #22201d; --ok: #3f8a5f; --warn: #b0771f; --bad: #c0503a;
    color-scheme: light;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15.5px/1.6 "Pretendard", -apple-system, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { overscroll-behavior: none; letter-spacing: -.01em; }
.hidden { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 선 아이콘 */
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic.spin { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

button { font: inherit; font-weight: 500; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  justify-content: center; transition: background .15s, border-color .15s, opacity .15s; }
button .ic { width: 18px; height: 18px; }
button:active { transform: scale(.98); }
@media (hover: hover) { button:hover { border-color: var(--muted); } }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
@media (hover: hover) { button.primary:hover { filter: brightness(1.06); border-color: var(--accent); } }
button.danger { color: var(--bad); }
button.link { background: none; border: 0; color: var(--accent); padding: 4px 6px; font-weight: 500; }
input, select, textarea { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 13px; width: 100%; transition: border-color .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.err { color: var(--bad); min-height: 1.4em; margin-top: 8px; font-size: 14px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* 로그인 */
.login { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.login-box { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.logo { font-size: 40px; font-weight: 700; letter-spacing: -1.5px; }
.login-sub { color: var(--muted); margin-bottom: 14px; font-size: 14px; }

/* 앱 골격 */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; padding-top: max(11px, env(safe-area-inset-top));
  background: var(--panel); border-bottom: 1px solid var(--line-soft); }
.brand { font-weight: 700; font-size: 18px; letter-spacing: -.03em; }
.brand small { font-weight: 400; font-size: 11px; color: var(--muted); margin-left: 7px; letter-spacing: 0; }
.conn { flex: 1; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; min-width: 0; }
.conn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); flex: none; transition: background .3s; }
.dot.on { background: var(--ok); }
.icon-btn { background: none; border: 0; padding: 7px; color: var(--muted); border-radius: 10px; }
.icon-btn.on { color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) { .icon-btn:hover { color: var(--text); background: var(--panel-2); border-color: transparent; } }

main { flex: 1; min-height: 0; position: relative; }
.tab { position: absolute; inset: 0; overflow-y: auto; display: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.tab.active { display: block; }

/* 메시지 */
.msgs { display: flex; flex-direction: column; gap: 16px; padding: 18px 14px 24px; max-width: 760px; margin: 0 auto; }
.empty { color: var(--muted); text-align: center; margin-top: 16vh; font-size: 14.5px; }
.empty b { display: block; font-size: 19px; color: var(--text); font-weight: 600; margin-bottom: 10px; letter-spacing: -.02em; }
.empty p { margin: 0 auto; max-width: 300px; }
.empty small { display: block; margin-top: 14px; font-size: 13px; opacity: .75; }
.msg { max-width: 100%; word-break: break-word; line-height: 1.68; }
.msg.user { align-self: flex-end; max-width: 84%; background: var(--me); color: var(--me-text);
  border-radius: 18px 18px 5px 18px; padding: 10px 15px; }
.msg.assistant { align-self: stretch; }
.msg.system { align-self: center; color: var(--muted); font-size: 12.5px; background: var(--panel-2);
  border-radius: 999px; padding: 4px 13px; }
.msg pre { background: var(--panel-2); border: 1px solid var(--line-soft); padding: 11px 13px; border-radius: 11px;
  overflow-x: auto; font-size: 13px; line-height: 1.55; }
.msg code { background: var(--panel-2); padding: 1.5px 5px; border-radius: 5px; font-size: 13.5px; }
.msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg .meta { font-size: 11.5px; color: var(--muted); margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.msg .meta button { padding: 3px 7px; font-size: 12px; background: none; border: 0; color: var(--muted); }
.msg .meta button .ic { width: 15px; height: 15px; }
.tools { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tool { font-size: 11.5px; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 3px 10px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.tool .ic { width: 12px; height: 12px; opacity: .8; }
.typing::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  margin-left: 3px; vertical-align: 1px; animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* 서버 클로드가 직접 남긴 말 */
.msg.claude { align-self: stretch; background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 4px 14px 14px 4px; padding: 10px 14px; }
.msg.claude .who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent);
  margin-bottom: 4px; letter-spacing: 0; }
.msg.claude .who .ic { width: 14px; height: 14px; }
.msg.claude .meta { margin-top: 4px; }

/* 알림 켜기 안내 띠 */
.banner { display: flex; align-items: center; gap: 11px; padding: 10px 14px; background: var(--accent-soft);
  border-bottom: 1px solid var(--line-soft); font-size: 13.5px; line-height: 1.45; }
.banner > .ic { width: 20px; height: 20px; color: var(--accent); }
.banner span { flex: 1; min-width: 0; }
.banner b { display: block; font-size: 14px; }
.banner button { padding: 7px 14px; flex: none; }

/* 작업 상태 표시줄 (생각 중 / 도구 / 수정 / 대기열) */
.workbar { border-top: 1px solid var(--line-soft); background: var(--panel); padding: 6px 14px; display: flex;
  flex-direction: column; gap: 3px; font-size: 12.5px; max-height: 34vh; overflow-y: auto; }
.wrow { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.5; }
.wrow b { font-weight: 600; flex: none; }
.wnow { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.wdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--accent); animation: blink 1.1s ease-in-out infinite; }
.wdot.edit { background: var(--warn); }
.wdot.dev { background: var(--ok); }
.wdot.q { background: var(--muted); animation: none; }
.wq { cursor: pointer; }
.wqi { display: flex; align-items: center; gap: 6px; padding-left: 15px; color: var(--muted); }
.wqi span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wqi button { padding: 2px; background: none; border: 0; color: var(--muted); }
.wqi button .ic { width: 14px; height: 14px; }

/* 첨부 파일 */
.msg .atts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.msg .atts img { max-width: min(200px, 62vw); max-height: 230px; border-radius: 13px; display: block; }
.att-file { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 9px 13px; font-size: 13.5px; text-decoration: none !important; max-width: 100%;
  word-break: break-all; color: inherit; }
.att-file .ic { width: 17px; height: 17px; color: var(--muted); }
.attbar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; }
.att-chip { position: relative; flex: none; display: flex; align-items: center; gap: 8px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 7px 30px 7px 9px; font-size: 12.5px; line-height: 1.35; max-width: 195px; }
.att-chip > .ic { width: 17px; height: 17px; color: var(--muted); }
.att-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; flex: none; }
.att-chip.up { opacity: .55; padding-right: 11px; }
.att-chip .x { position: absolute; top: 3px; right: 3px; padding: 0; width: 20px; height: 20px; border: 0;
  border-radius: 50%; background: none; color: var(--muted); }
.att-chip .x .ic { width: 13px; height: 13px; }

/* 입력창 */
.composer { display: flex; flex-direction: column; padding: 8px 12px; background: var(--panel);
  border-top: 1px solid var(--line-soft); }
.composer > * { max-width: 760px; width: 100%; margin: 0 auto; }
.crow { display: flex; align-items: flex-end; gap: 4px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 24px; padding: 4px; transition: border-color .15s; }
.crow:focus-within { border-color: var(--muted); }
.composer textarea { resize: none; max-height: 140px; border: 0; background: none; padding: 9px 8px; overflow-y: hidden;
  line-height: 1.5; }
.composer textarea:focus { outline: none; }
.composer textarea.scroll { overflow-y: auto; }
.mic, .clip { flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: var(--muted); }
.send { flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--accent); border: 0;
  color: var(--on-accent); opacity: .35; pointer-events: none; }
.composer.ready .send { opacity: 1; pointer-events: auto; }
.mic.rec { color: var(--on-accent); background: var(--bad); }
.mic.rec::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--bad);
  animation: ring 1.5s ease-out infinite; }
.mic { position: relative; }
@keyframes ring { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }

/* 탭바 */
.tabs { display: flex; background: var(--panel); border-top: 1px solid var(--line-soft); padding-bottom: var(--safe-b); }
.tabs button { flex: 1; background: none; border: 0; border-radius: 0; padding: 8px 0 9px; font-size: 11px; color: var(--muted);
  flex-direction: column; gap: 3px; position: relative; font-weight: 500; letter-spacing: 0; }
.tabs button .ic { width: 21px; height: 21px; stroke-width: 1.6; }
.tabs button.active { color: var(--accent); }
.tabs button.active .ic { stroke-width: 1.9; }
.badge { position: absolute; top: 5px; left: calc(50% + 7px); min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--bad); color: #fff; font-size: 10.5px; font-style: normal; line-height: 16px; padding: 0 4px; font-weight: 600; }

/* 알림 기록 */
.notes-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 6px;
  max-width: 760px; margin: 0 auto; font-size: 15px; }
.notes { padding: 6px 14px 24px; display: flex; flex-direction: column; gap: 9px; max-width: 760px; margin: 0 auto; }
.note { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px 14px; }
.note.unread { border-color: var(--accent); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel); }
.note.hl { box-shadow: 0 0 0 2px var(--accent); }
.note .nt { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14.5px; }
.note .nt time { font-weight: 400; color: var(--muted); font-size: 12px; white-space: nowrap; }
.note .nb { white-space: pre-wrap; margin-top: 5px; font-size: 14px; color: var(--text); opacity: .92; }
.note .play { margin-top: 10px; padding: 5px 12px; font-size: 12.5px; }
.note .play .ic { width: 13px; height: 13px; fill: currentColor; stroke: none; }

/* 설정 */
.settings { padding: 14px 14px 32px; max-width: 760px; margin: 0 auto; }
.card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px;
  margin-bottom: 12px; display: flex; flex-direction: column; gap: 11px; }
.card h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.card h3.sub { margin-top: 6px; }
.card p { margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.row select { flex: 1; width: auto; }
.row input[type=time] { width: auto; font-size: 21px; padding: 7px 11px; font-variant-numeric: tabular-nums; }
.days { display: flex; gap: 5px; }
.days label { flex: 1; }
.days input { display: none; }
.days span { display: block; text-align: center; padding: 8px 0; border-radius: 10px; background: var(--panel-2);
  border: 1px solid var(--line); font-size: 13.5px; }
.days input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.check { display: flex; gap: 9px; align-items: center; font-size: 14.5px; }
.check input { width: auto; accent-color: var(--accent); }
.list { display: flex; flex-direction: column; gap: 6px; }
.list .item { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: var(--panel-2);
  border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.list .item button { padding: 3px 10px; font-size: 12px; background: none; border: 0; color: var(--muted); }
.switch { position: relative; width: 50px; height: 29px; }
.switch input { display: none; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 15px; transition: .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%;
  background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { left: 24px; }

/* 스피커 / 알람 화면 */
.overlay { position: fixed; inset: 0; z-index: 50; background: #141311; color: #edeae4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 15px; padding: 26px; text-align: center; }
.big-clock { font-size: min(27vw, 145px); font-weight: 200; letter-spacing: -4px; font-variant-numeric: tabular-nums; line-height: 1; }
.sp-date { color: #9a958c; font-size: 17px; }
.sp-state { color: var(--accent); font-size: 14.5px; }
.sp-next { color: #9a958c; font-size: 13.5px; }
.sp-last { max-width: 560px; color: #cdc8be; font-size: 15px; max-height: 26vh; overflow: auto; white-space: pre-wrap; }
.mic-big { width: 116px; height: 116px; border-radius: 50%; background: #221f1c; border: 1px solid #38342e;
  flex-direction: column; gap: 8px; color: #edeae4; position: relative; }
.mic-big .ic { width: 38px; height: 38px; stroke-width: 1.5; }
.mic-big small { font-size: 11.5px; color: #9a958c; }
.mic-big.rec { background: var(--bad); border-color: var(--bad); color: #fff; }
.mic-big.rec small { color: rgba(255,255,255,.8); }
.mic-big.rec::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--bad);
  animation: ring 1.5s ease-out infinite; }
.overlay button { background: #221f1c; border-color: #38342e; color: #edeae4; }
.alarm { background: radial-gradient(circle at 50% 28%, #3a2a16, #141311 72%); }
.al-title { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
button.huge { font-size: 18px; padding: 17px 28px; border-radius: 16px; background: var(--accent); border-color: var(--accent); color: #fff; }
.alarm.ringing .big-clock { animation: blink 1.4s ease-in-out infinite; }

.deploy { position: fixed; top: calc(66px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; z-index: 40; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.deploy .ic { width: 15px; height: 15px; color: var(--accent); }
.toast { position: fixed; left: 14px; right: 14px; top: calc(12px + env(safe-area-inset-top)); z-index: 60; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; font-size: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,.28); max-width: 560px; margin: 0 auto; animation: drop .22s ease-out; }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }
.toast b { display: block; margin-bottom: 2px; font-weight: 600; }

/* 마루가 브라우저로 보고 있는 화면 (실시간) */
.atts.live img { max-width: min(320px, 80vw); max-height: 260px; border: 1px solid var(--line); }

/* 마루 안드로이드 앱 안에서: 브라우저용 설치·푸시 카드는 숨긴다 */
.in-app #installCard, .in-app #pushCard { display: none; }
a.btn-link { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: 11px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }

/* 음성 대화 (🎤) — 듣는 중 / 알아듣는 중 / 생각 중 / 말하는 중 */
.voicebar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--accent-soft);
  border-top: 1px solid var(--line-soft); font-size: 14.5px; font-weight: 500; }
.voicebar .vlabel { flex: 1; }
.voicebar button { padding: 6px 14px; font-size: 13px; }
.vdot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--accent); }
.vdot.listen { background: var(--bad); animation: pulse 1s infinite; box-shadow: 0 0 0 6px rgba(212,115,94,.18); }
.vdot.stt, .vdot.wait { background: var(--warn); animation: blink 1.1s ease-in-out infinite; }
.vdot.speak { background: var(--ok); animation: pulse 1.4s infinite; }
.icon-btn.mic.on { color: var(--accent); background: var(--accent-soft); }
.vmark { font-size: 12px; opacity: .75; }

@keyframes pulse { 50% { opacity: .45; transform: scale(.88); } }