/* v0.75.0 (사용자 요청 2026-10-26 "자비스 메인페이지도 이렇게", 승인한 시안 "자비스 v0.74 시안 — 작업실·홈"): the home in the raised
   style of the workroom. 자비스 keeps the look the member chose ("지금처럼 두고 입체감만 더함"): its art is lit and shaded, not
   replaced. Loaded last, so these rules follow the older home sheets. */
.pet-defs{position:absolute;width:0;height:0;overflow:hidden}
/* The chosen friend everywhere: SVG friends get light and a soft shadow (#pet-3d in index.html); the drawn ones (새싹·별·구름)
   get a highlight and an inner shade. */
.agent-friend .pet-motion{filter:url(#pet-3d)}
.agent-friend[data-shape][data-palette] .friend-body{background-image:radial-gradient(circle at 32% 24%,rgba(255,255,255,.62) 0,rgba(255,255,255,0) 44%),radial-gradient(circle at 72% 92%,rgba(0,0,0,.22) 0,rgba(0,0,0,0) 58%);box-shadow:inset -3px -5px 8px rgba(0,0,0,.16),inset 3px 3px 6px rgba(255,255,255,.4),0 5px 9px rgba(0,0,0,.2)}
.agent-friend[data-shape][data-palette] :is(.friend-spark,.friend-arm){background-image:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 62%);box-shadow:inset -1px -2px 3px rgba(0,0,0,.16)}
.agent-friend .friend-eyes{box-shadow:16px 0 var(--dark),inset 1px 1px 0 rgba(255,255,255,.55)}

/* top bar · v0.76.0: a clean light ground (사용자 요청 2026-10-26: "회색 형태의 배경색은 아닌거 같아.. 조금 더 클리어하게") */
.topbar{background:#fff;border-bottom:1px solid rgba(30,50,80,.08);box-shadow:0 6px 18px rgba(30,50,80,.06)}
.hub-home-link{background:linear-gradient(180deg,#4a86f7 0%,#1f57da 100%);border:1px solid #1b4fcc;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px rgba(37,99,235,.32)}
.hub-home-link[aria-current=false]{background:linear-gradient(180deg,#fff 0%,#f1f4f8 100%);border-color:rgba(30,50,80,.14);color:#2a4d40;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(30,50,80,.1)}
.hub-icon-button{border:1px solid rgba(30,50,80,.12);background:linear-gradient(180deg,#fff 0%,#f1f4f8 100%);box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(30,50,80,.1);color:#2a4d40}
.hub-avatar{background:linear-gradient(145deg,#fbe7c4 0%,#e9c68a 100%);color:#6b4407;font-weight:800;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(138,75,0,.25)}

/* the page */
body[data-screen=home] .hub-home{background:linear-gradient(180deg,#fff 0%,#f3f6fa 100%)}

/* v0.76.0: the greeting card holds today's schedule and tasks (사용자 요청 2026-10-26: "이 두개를 합치면 어떨까? 위치는
   맨 윗부분으로"): the greeting and the box on the left, the two trays on the right; below the greeting on a narrow screen. */
.hub-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:22px;align-items:start;margin:0 0 16px;padding:24px;border-radius:30px;background:radial-gradient(360px 260px at 12% 26%,#3e7562 0%,rgba(62,117,98,0) 70%),radial-gradient(420px 300px at 100% 0%,rgba(124,224,168,.16) 0%,rgba(124,224,168,0) 70%),linear-gradient(150deg,#2c5446 0%,#18342a 60%,#10241d 100%);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 12px rgba(16,36,29,.18),0 24px 44px rgba(16,36,29,.3);color:#f7f3ea}
.hub-hero-main{display:flex;align-items:center;gap:18px;min-width:0}
.hub-hero-art{position:relative;flex:none;display:grid;place-items:center;width:150px;height:160px}
.hub-hero-art:after{content:'';position:absolute;left:30px;right:30px;bottom:8px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.42),rgba(0,0,0,0))}
.hub-hero-art .agent-friend{transform:scale(2.05);margin:0;z-index:1}
.hub-hero-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.hub-hero-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(124,224,168,.16);border:1px solid rgba(124,224,168,.35);color:#cff5de;font-size:12.5px;font-weight:700}
.hub-hero-dot{width:8px;height:8px;border-radius:50%;background:#7ce0a8;box-shadow:0 0 8px #7ce0a8}
.hub-hero-hello{margin:0;font-size:28px;line-height:1.28;font-weight:900;letter-spacing:-.4px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.28)}
.hub-hero-line{font-size:15px;line-height:1.6;color:#d9ebe0}
.hub-hero-ask{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 16px;border-radius:999px;background:linear-gradient(180deg,#fff 0%,#f1f4f8 100%);border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(0,0,0,.3)}
body .hub-hero-input{flex:1;min-width:0;width:auto;margin:0;padding:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;font:inherit;font-size:14px;color:#203c32;min-height:32px}body .hub-hero-input:focus{outline:none}
.hub-hero-tool,.hub-hero-send{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;cursor:pointer}
.hub-hero-tool{border:1px solid rgba(30,50,80,.14);background:linear-gradient(180deg,#fff 0%,#f0f3f7 100%);box-shadow:inset 0 1px 0 #fff,0 3px 7px rgba(30,50,80,.12);color:#203c32}
.hub-hero-tool.voice,.hub-hero-send{border:1px solid #10241d;background:linear-gradient(180deg,#3a6b59 0%,#18342a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 5px 12px rgba(22,48,42,.38);color:#fff}
.hub-hero-send{background:linear-gradient(180deg,#4a86f7 0%,#1f57da 100%);border-color:#1b4fcc;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 12px rgba(37,99,235,.38)}
.hub-hero-tool svg,.hub-hero-send svg{width:16px;height:16px}
/* today, inside the card: light trays on the dark card */
body[data-screen=home] .hub-hero .hub-today{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#203c32;min-width:0}
body[data-screen=home] .hub-hero .hub-today-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
body[data-screen=home] .hub-hero .hub-today-col{min-width:0;border:0;border-radius:20px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,#eef2fb 100%);box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(0,0,0,.25);color:#203c32}
body[data-screen=home] .hub-hero .hub-today-col.tasks{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,#fbf1df 100%)}
body[data-screen=home] .hub-hero :is(.hub-today-event,.hub-today-task){border:0;border-radius:13px;background:#fff;box-shadow:0 2px 3px rgba(30,50,80,.06),0 6px 14px rgba(30,50,80,.1)}
body[data-screen=home] .hub-hero .hub-today-event time{background:linear-gradient(180deg,#fff3e0 0%,#fbddb4 100%);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(160,97,26,.18);color:#1f57da;font-weight:900}
body[data-screen=home] .hub-hero .hub-today-add{background:#fff;border:1px solid rgba(42,58,102,.15);box-shadow:0 2px 6px rgba(42,58,102,.12)}
body[data-screen=home] .hub-hero .hub-today-count{box-shadow:0 2px 4px rgba(42,58,102,.2)}
body[data-screen=home] .hub-hero .hub-today-task input{border-radius:7px;background:linear-gradient(180deg,#f3eee4 0%,#fff 100%);box-shadow:inset 0 2px 3px rgba(138,75,0,.18)}
body[data-screen=home] .hub-hero :is(.hub-today-empty,.hub-loading){color:#556a5d}

/* v0.76.0: 에이전트 작업실 and AI 에이전트 설정 side by side, on a phone too (사용자 요청: "이부분을 나란히 해주자") */
.hub-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px}
body .hub-pair .workroom-entry{display:flex;align-items:center;gap:14px;width:100%;min-width:0;margin:0;padding:16px 18px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(240px 140px at 95% 0%,rgba(120,130,255,.3) 0%,rgba(120,130,255,0) 70%),linear-gradient(150deg,#263a7a 0%,#1a2656 60%,#121a3e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 26px rgba(18,26,62,.28);color:#f2f4ff;text-align:left}
body .hub-pair .workroom-mark{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#f6d27a 0%,#c9961f 100%);color:#3a2a00;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 14px rgba(0,0,0,.35)}
body .hub-pair .workroom-mark svg{width:23px;height:23px}
.workroom-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;border:2px solid #1a2656;background:#e0a84a;color:#2a1a00;font-size:11px;font-weight:900;line-height:16px;text-align:center}
body .hub-pair .workroom-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
body .hub-pair .workroom-copy strong{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .hub-pair .workroom-copy small{font-size:13px;color:#c4cbef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .hub-pair .workroom-entry.needs-look .workroom-copy small{color:#ffe2a6;font-weight:650}
body .hub-pair .workroom-open{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(246,210,122,.55);background:none;color:#f6d27a;font-size:13px;font-weight:700}
body .hub-pair .agent-home-entry{display:flex;align-items:center;gap:14px;width:100%;min-width:0;margin:0;padding:16px 18px;border-radius:22px;border:1px solid rgba(30,50,80,.08);background:linear-gradient(180deg,#fff 0%,#f3f6ff 100%);box-shadow:inset 0 1px 0 #fff,0 12px 24px rgba(42,58,102,.12);color:#203c32;text-align:left}
body .hub-pair .agent-home-entry:before{content:'AI';flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(180deg,#6ea0fa 0%,#1f57da 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 12px rgba(37,99,235,.35);color:#fff;font-size:14px;font-weight:900}
.agent-home-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.agent-home-copy strong{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-home-copy small{font-size:13px;color:#556a5d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the three places */
body .hub-destination{border:1px solid rgba(30,50,80,.08);border-radius:22px;background:linear-gradient(180deg,#fff 0%,#f5f8ff 100%);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(42,58,102,.05),0 14px 28px rgba(42,58,102,.11)}
body .hub-destination.family{background:linear-gradient(180deg,#fff 0%,#fff6ee 100%);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(163,77,10,.05),0 14px 28px rgba(163,77,10,.11)}
body .hub-destination.worship{background:linear-gradient(180deg,#fff 0%,#f7f4ff 100%);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(91,69,181,.05),0 14px 28px rgba(91,69,181,.11)}
body .hub-destination-icon{border:0!important;border-radius:16px;background:linear-gradient(180deg,#6ea0fa 0%,#1f57da 100%)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px rgba(37,99,235,.35)}
body .hub-destination.family .hub-destination-icon{background:linear-gradient(180deg,#f59a5c 0%,#c2560f 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px rgba(194,86,15,.35)}
body .hub-destination.worship .hub-destination-icon{background:linear-gradient(180deg,#9b85f2 0%,#5b45b5 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px rgba(91,69,181,.35)}

/* v0.76.0: 최근 메모, titles only, three side by side (사용자 요청 2026-10-26: "최근메모는 좌/우로 배치", "그냥 메모 제목만") */
.hub-recent-memos{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.hub-recent-memos-head{display:flex;align-items:center;gap:12px;padding:0 4px}
.hub-recent-memos-head h2{margin:0;font-size:20px;font-weight:900;color:#203c32}
.hub-new-memo{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:12px;border:1px solid rgba(160,120,10,.3);background:linear-gradient(180deg,#fffbea 0%,#fff1c2 100%);box-shadow:0 4px 10px rgba(160,120,10,.14);color:#6b4e00;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.hub-new-memo svg{width:15px;height:15px}
.hub-recent-memo-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hub-recent-memo{display:flex;align-items:center;gap:12px;min-width:0;padding:13px 14px;border-radius:18px;border:1px solid rgba(30,50,80,.08);background:#fff;box-shadow:0 2px 4px rgba(30,50,80,.04),0 10px 22px rgba(30,50,80,.09);color:#203c32;font:inherit;text-align:left;cursor:pointer}
.hub-recent-memo:hover{box-shadow:0 2px 4px rgba(30,50,80,.05),0 14px 28px rgba(30,50,80,.13)}
.hub-recent-memo-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(180deg,#fff4c9 0%,#f6df86 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 8px rgba(160,120,10,.22);color:#7a5a00}
.hub-recent-memo-icon svg{width:19px;height:19px}
.hub-recent-memo strong{min-width:0;font-size:15.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.hub-recent-memo-list :is(.hub-recent-memo-empty,.hub-loading){grid-column:1/-1;margin:0;padding:14px 16px;border-radius:16px;background:#fff;color:#556a5d;font-size:14px}

/* projects: the workspaces sit on the card, not in a recessed tray (사용자 요청: "그냥 배경위에 아이콘들 있도록") */
body .hub-projects{border:1px solid rgba(30,50,80,.08);border-radius:26px;background:#fff;box-shadow:0 2px 4px rgba(30,50,80,.04),0 16px 32px rgba(30,50,80,.09)}
body .hub-workspaces{padding:0;border-radius:0;background:none;box-shadow:none}
body .hub-workspaces button{border:1px solid rgba(30,50,80,.1);background:linear-gradient(180deg,#fff 0%,#f2f5f9 100%);box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(30,50,80,.1)}
body .hub-workspaces button.active{border-color:#1b4fcc;background:linear-gradient(180deg,#4a86f7 0%,#1f57da 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 5px 12px rgba(37,99,235,.32)}
body .hub-workspaces button.active :is(span,svg){color:#fff}
body .hub-project-card{border:1px solid rgba(30,50,80,.08);background:linear-gradient(180deg,#fff 0%,#f8fafd 100%);box-shadow:inset 0 1px 0 #fff,0 2px 3px rgba(30,50,80,.05),0 10px 20px rgba(30,50,80,.09)}
body .hub-outline-button{background:linear-gradient(180deg,#fff 0%,#eef3ff 100%);box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(37,99,235,.14)}

/* the floating 자비스: no tile behind it; the friend itself floats over the page, lit, with its shadow on the ground below
   (사용자 요청 2026-10-26: "배경없이 그냥 입체적으로 떠 있는 느낌으로") */
#app .agent-float{border:0;background:none;box-shadow:none;padding:0 4px;color:#284a3c}
#app .agent-float .agent-friend{filter:drop-shadow(0 2px 2px rgba(22,44,34,.2));transform:scale(1.45);margin:14px 13px 16px}
#app .agent-float::before{content:'';position:absolute;left:50%;top:86px;width:58px;height:12px;margin-left:-29px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,44,34,.36),rgba(22,44,34,0));pointer-events:none}
#app .agent-float .agent-float-label{position:relative;font-weight:700;text-shadow:0 0 2px #fff,0 0 6px #fff,0 0 10px #fff}
#app .agent-float[data-phase=attention]{box-shadow:none}
#app .agent-float[data-phase=attention] .agent-friend{filter:drop-shadow(0 0 7px rgba(224,168,74,.9))}
#app .agent-float[data-phase=attention]::after{color:#8a5a12;font-weight:700;text-shadow:0 0 2px #fff,0 0 6px #fff}
/* the greeting card's 자비스 floats the same way, over its own shadow, with no glow behind it */
@media(prefers-reduced-motion:no-preference){
 #app .agent-float:not(.background) .agent-friend[data-motion=on],.hub-hero-art .agent-friend[data-motion=on]{animation:jarvis-hover 3.2s ease-in-out infinite}
 #app .agent-float:not(.background):has(.agent-friend[data-motion=on])::before,.hub-hero-art:has(.agent-friend[data-motion=on])::after{animation:jarvis-ground 3.2s ease-in-out infinite}
}
@keyframes jarvis-hover{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes jarvis-ground{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.78);opacity:.6}}

@media(max-width:1050px){.hub-hero{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){
 .hub-hero{gap:12px;padding:14px 12px 12px;border-radius:24px}
 .hub-hero-main{position:relative;flex-direction:column;align-items:stretch;gap:10px}
 .hub-hero-art{position:absolute;top:-6px;left:-6px;width:84px;height:92px}.hub-hero-art .agent-friend{transform:scale(1.15)}.hub-hero-art:after{left:16px;right:16px;bottom:2px}
 .hub-hero-copy{gap:8px}.hub-hero-pill{margin-left:80px}.hub-hero-hello{margin-left:80px;font-size:19px}.hub-hero-line{margin-left:80px;font-size:13px;min-height:2.8em}
 .hub-hero-ask{margin-top:2px;padding:3px 3px 3px 13px}.hub-hero-tool,.hub-hero-send{width:34px;height:34px}body .hub-hero-input{font-size:13.5px;min-height:30px}
 body[data-screen=home] .hub-hero .hub-today-split{gap:8px}body[data-screen=home] .hub-hero .hub-today-col{padding:9px;border-radius:16px}
 .hub-pair{gap:8px;margin-bottom:12px}
 body .hub-pair :is(.workroom-entry,.agent-home-entry){gap:9px;padding:10px;border-radius:18px}
 body .hub-pair .workroom-mark,body .hub-pair .agent-home-entry:before{width:36px;height:36px;border-radius:11px;font-size:12px}body .hub-pair .workroom-mark svg{width:18px;height:18px}
 body .hub-pair :is(.workroom-copy,.agent-home-copy) strong{font-size:13.5px}body .hub-pair :is(.workroom-copy,.agent-home-copy) small{font-size:11.5px}
 body .hub-pair .workroom-open{display:none}
 .hub-recent-memos{margin:12px 0}.hub-recent-memos-head h2{font-size:16px}.hub-new-memo{height:32px;padding:0 11px;font-size:12.5px}
 .hub-recent-memo-list{gap:8px}.hub-recent-memo{flex-direction:column;align-items:flex-start;gap:6px;padding:9px 10px;border-radius:14px}.hub-recent-memo-icon{width:28px;height:28px;border-radius:9px}.hub-recent-memo-icon svg{width:15px;height:15px}.hub-recent-memo strong{width:100%;font-size:13px;-webkit-line-clamp:3}
}
/* agents.css draws the floating friend smaller up to 700px; here it is still larger than before, its shadow below it */
@media(max-width:700px){#app .agent-float .agent-friend{transform:scale(1.25);margin:8px 7px 10px}#app .agent-float::before{top:74px;width:50px;margin-left:-25px}}
@media(prefers-reduced-motion:reduce){.agent-friend .pet-motion{filter:none}}
/* A small phone (330px and narrower) keeps 일정 and 할 일 one above the other, as before v0.76.0. */
@media(max-width:330px){body[data-screen=home] .hub-hero .hub-today-split{grid-template-columns:1fr}}