:root { --bg:#14121a; --card:#221f2b; --card2:#2c2838; --fg:#ece8f4; --dim:#a9a2b8; --acc:#c9b4ff; --acc2:#7a68c8;
  --ok:#7fd6a5; --warn:#ffb84c; --bad:#ff6b6b; --r:18px; color-scheme: dark; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg:#f7f4fb; --card:#fff; --card2:#efe9f8; --fg:#1d1a24;
  --dim:#5d5668; --acc:#6750a4; --acc2:#b9a8ff; color-scheme: light; } }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; background:var(--bg); color:var(--fg); font-family: system-ui, "Noto Sans KR", "Malgun Gothic", sans-serif; }
body { min-height:100vh; padding-bottom: env(safe-area-inset-bottom); }
header { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:var(--bg); border-bottom:1px solid var(--card2); }
header h1 { font-size:22px; margin:0; flex:1; }
#clock { color:var(--dim); font-variant-numeric: tabular-nums; }
main { padding:16px; max-width:1200px; margin:0 auto; }
button, .btn { font:inherit; border:0; border-radius:14px; padding:14px 18px; background:var(--acc); color:#1d1530; font-weight:700; cursor:pointer; }
button.ghost { background:transparent; color:var(--acc); font-size:28px; padding:4px 12px; }
button.soft { background:var(--card2); color:var(--fg); font-weight:600; }
button:disabled { opacity:.5; }
.fxgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:10px 0; }
.fxcard { background:var(--card); border-radius:var(--r); padding:8px; display:flex; flex-direction:column; gap:4px; cursor:pointer; }
.fxcard img, .fxnone { width:100%; aspect-ratio:1; object-fit:contain; background:#0b0a10; border-radius:10px; }
.fxnone { display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:13px; }
.fxbig { display:flex; gap:12px; flex-wrap:wrap; }
.fxbig figure { margin:0; flex:1 1 260px; }
.fxbig img { width:100%; background:#0b0a10; border-radius:12px; }
.fxpair { border-top:1px solid var(--card2); padding-top:10px; margin-top:10px; }
.fxpair .fxbig figure { flex:1 1 140px; }
.fxpair .fxnone { aspect-ratio:1; }
.fxstyle pre { white-space:pre-wrap; font-size:13px; background:var(--card2); padding:12px; border-radius:10px; max-height:50vh; overflow:auto; }
button.mini {padding:6px 10px; font-size:13px; border-radius:10px; flex:none; }
button.mini.on { background:#03c75a; color:#fff; }
input, textarea, select { font:inherit; color:var(--fg); background:var(--card2); border:1px solid transparent; border-radius:12px; padding:12px 14px; width:100%; }
input:focus, textarea:focus { outline:none; border-color:var(--acc); }
.tiles { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.tile { background:var(--card); border-radius:var(--r); padding:22px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between;
  cursor:pointer; transition: transform .08s; user-select:none; }
.tile:active { transform: scale(.97); }
.tile .ico { font-size:44px; }
.tile b { font-size:21px; }
.tile small { color:var(--dim); }
.card { background:var(--card); border-radius:var(--r); padding:18px; margin-bottom:12px; }
.card h3 { margin:0 0 6px; font-size:19px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row > input, .row > textarea { flex:1; min-width:180px; }
.muted { color:var(--dim); }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.chip { background:var(--card2); border-radius:999px; padding:10px 14px; cursor:pointer; }
.chip.on { background:var(--acc); color:#1d1530; font-weight:700; }
.list .item { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--card2); }
.list .item:last-child { border-bottom:0; }
.grow { flex:1; min-width:0; }
.tag { font-size:12px; padding:3px 8px; border-radius:999px; background:var(--card2); color:var(--dim); }
.tag.kid { background:#3b2f63; color:var(--acc); }
.card.big h3 { font-size:21px; }
.big-btns { margin-top:12px; } .big-btns button { flex:1; min-height:60px; font-size:20px; }
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin:12px 0 14px; color:var(--dim); font-size:14px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.dot { display:inline-block; width:12px; height:12px; border-radius:50%; flex:none; vertical-align:middle; }
.cal { display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; margin-bottom:12px; }
.cal .wd { text-align:center; color:var(--dim); font-size:13px; padding:4px 0; }
.cal .day { background:var(--card); border-radius:10px; min-height:64px; padding:6px; cursor:pointer; border:2px solid transparent; }
.cal .day span { font-size:14px; font-weight:700; }
.cal .day .dots { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.cal .day .dots i { width:9px; height:9px; border-radius:50%; }
.cal .day.today { border-color:var(--acc); }
.cal .day.sel { background:var(--card2); }
.cal .day.empty { background:transparent; border-style:dashed; border-color:var(--card2); }
.cal .day.clash { border-color:var(--warn); }
.cal .day.fail { border-color:var(--bad); }
ol.steps { padding-left:22px; line-height:1.7; }
.chat { display:flex; flex-direction:column; gap:10px; margin-bottom:90px; }
.bubble { max-width:80%; padding:12px 14px; border-radius:16px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.bubble.me { align-self:flex-end; background:var(--acc2); color:#fff; border-bottom-right-radius:4px; }
.bubble.ai { align-self:flex-start; background:var(--card); border-bottom-left-radius:4px; }
.bubble.wait { opacity:.7; font-style:italic; }
/* HQ 통합 대화 */
.chat-pick { display:flex; gap:8px; margin-top:8px; }
.chat-pick button { background:var(--card2); color:var(--fg); font-size:15px; padding:8px 14px; }
.chat-pick button.on { background:var(--acc); color:#fff; }
.chat-who { display:block; font-size:12px; opacity:.7; margin-bottom:4px; }
.chat-status { display:block; font-size:12px; opacity:.6; font-style:italic; margin-bottom:4px; }
.chat-status[hidden] { display:none; }
.chat-pick + .chat-pick { margin-top:6px; }
.chat-pick[hidden] { display:none; }
.chat-pick button:disabled { opacity:.45; }
/* 대화 세션 — 허락 카드의 명령 원문 · 이어 가는 명령 */
.perm-input { background:var(--card2); border-radius:8px; padding:8px 10px; margin:6px 0; font-size:13px;
  white-space:pre-wrap; word-break:break-all; max-height:220px; overflow:auto; }
.chat-photo { display:block; max-width:100%; max-height:240px; border-radius:10px; margin-top:6px; }
.chat-shots { display:flex; gap:8px; margin:-80px 0 96px; }
.chat-shots:empty { display:none; }
.chat-shot { position:relative; }
.chat-shot img { width:72px; height:72px; object-fit:cover; border-radius:8px; }
.chat-shot button { position:absolute; top:-6px; right:-6px; font-size:14px; padding:2px 6px; background:var(--card2); color:var(--fg); }
.bubble.chat-failed { outline:1px solid var(--bad); }
label.mic { display:flex; align-items:center; border-radius:12px; cursor:pointer; }
.composer { position:fixed; left:0; right:0; bottom:0; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--card2); }
.composer textarea { min-height:52px; max-height:160px; resize:none; }
.mic { background:var(--card2); color:var(--fg); font-size:22px; padding:0 16px; }
.mic.on { background:var(--bad); color:#fff; }
.house { position:relative; background:var(--card); border-radius:var(--r); aspect-ratio: 4 / 3; overflow:hidden;
  background-image: linear-gradient(var(--card2) 1px, transparent 1px), linear-gradient(90deg, var(--card2) 1px, transparent 1px);
  background-size: var(--gw, 5%) var(--gh, 6.666%); margin:0 auto; } /* 칸 눈금 · 비율은 기록(house.json cols · rows · aspect)대로 */
.room { position:absolute; border:2px solid var(--acc); border-radius:8px; background: color-mix(in srgb, var(--acc2) 30%, transparent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-weight:700; padding:4px; cursor:pointer; font-size:14px; word-break:keep-all; }
.room.sel { border-color:var(--warn); background: color-mix(in srgb, var(--warn) 25%, transparent); }
.room small { display:block; font-weight:400; color:var(--dim); }
.house.plan { background: url(house-plan.jpg) center / 100% 100% no-repeat; }
.house.plan .room { background: color-mix(in srgb, var(--acc2) 12%, transparent); color:#fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.house.plan .room small { color:#eee; }
.house.plan .room.sel { background: color-mix(in srgb, var(--warn) 30%, transparent); }
.room.tiny { font-size:11px; padding:1px; line-height:1.15; } /* 팬트리 · 화장실처럼 작은 칸 */
.spin { display:inline-block; width:18px; height:18px; border:3px solid var(--card2); border-top-color:var(--acc); border-radius:50%;
  animation: s 1s linear infinite; vertical-align:middle; }
@keyframes s { to { transform: rotate(360deg); } }
#ptr { position:fixed; left:50%; top:calc(64px + env(safe-area-inset-top)); transform:translateX(-50%); opacity:0; pointer-events:none; z-index:6;
  background:var(--card2); color:var(--fg); padding:8px 16px; border-radius:999px; font-size:14px; transition:opacity .15s; }
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--card2); padding:12px 18px; border-radius:12px; z-index:9; }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr 1fr; gap:10px; } .tile { min-height:120px; padding:16px; } .tile .ico { font-size:34px; }
  .tile b { font-size:17px; } .bubble { max-width:90%; } }

/* 스케줄 시간표 */
.sched-list, .sched-timetable { overflow-wrap:anywhere; }
.sched-list .sched-item { display:block; }
.sched-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sched-actions button.mini { min-height:40px; max-width:100%; }
.sched-dots { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }
.sched-dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
.sched-done { color:var(--ok); }
.sched-covered, .sched-post-summary { color:var(--ok); }
.sched-spare { color:var(--dim); }
.sched-missed { color:var(--warn); }
.sched-fail { color:var(--bad); }
.sched-next { color:var(--fg); }
.sched-later, .sched-off { color:var(--dim); }
.sched-dot.sched-next { outline:2px solid var(--fg); outline-offset:1px; }
.sched-dot.sched-later { opacity:.45; }
.sched-dot.sched-spare { opacity:.35; }
.sched-timetable { margin:16px 0; }
.sched-hour { display:grid; grid-template-columns:42px minmax(0, 1fr); gap:8px; border-top:1px solid var(--card2); }
.sched-hour-label { color:var(--dim); padding-top:12px; font-variant-numeric:tabular-nums; }
.sched-hour-body { display:flex; flex-direction:column; gap:8px; min-width:0; padding:10px 0; }
.sched-empty { min-height:32px; }
.sched-empty .sched-hour-label { padding-top:6px; }
.sched-slot { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; width:100%; min-height:44px; text-align:left;
  background:var(--card); border:1px solid var(--card2); border-left:4px solid currentColor; padding:10px 12px; border-radius:10px; font-size:14px; }
.sched-slot b { flex:1 1 130px; min-width:0; }
.sched-slot span { font-size:13px; font-weight:400; }
.sched-project { display:block; width:100%; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.sched-slot.sched-next { border:2px solid var(--fg); border-left-width:4px; }
.sched-slot.sched-later { opacity:.6; }
.sched-slot.sched-off { border-left-style:dashed; }
.sched-slot.sched-covered { border-left-style:dashed; }
.sched-slot.sched-spare { opacity:.45; }
.sched-slot.sched-post { color:var(--ok); border-color:var(--ok); text-decoration:none; box-sizing:border-box; min-width:0; }
.sched-slot.sched-published { background:var(--card2); background:color-mix(in srgb, var(--ok) 12%, var(--card)); }
.sched-blog { min-width:0; overflow-wrap:anywhere; }
.sched-blog h4 { margin:14px 0 8px; }
.sched-blog-posts { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.sched-blog > button { min-height:40px; max-width:100%; }
.sched-post b { flex-basis:100%; }
.sched-post .sched-post-title { display:block; width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sched-now { display:flex; align-items:center; gap:8px; min-height:28px; color:var(--warn); font-size:12px; font-weight:700; }
.sched-now::after { content:""; flex:1; height:2px; background:var(--warn); }
.sched-now span { white-space:nowrap; }
.sched-end { border-top:1px solid var(--card2); padding-top:6px; font-size:12px; }