:root{--bg0: #08111f;--bg1: #0a1730;--card: rgba(255,255,255,.09);--card2: rgba(255,255,255,.12);--border: rgba(255,255,255,.14);--text: rgba(255,255,255,.92);--muted: rgba(255,255,255,.68);--muted2: rgba(255,255,255,.5);--shadow: 0 14px 34px rgba(0,0,0,.35);--radius: 18px;--contentPadX: 14px;--contentPadTop: 10px;--contentPadBottom: 110px}*{box-sizing:border-box}html,body{height:100%}body{overflow-x:hidden}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,Arial,"Segoe UI Emoji";background:radial-gradient(900px 700px at 20% 10%,rgba(238,243,239,.4),transparent 55%),radial-gradient(900px 700px at 85% 20%,rgba(223,210,230,.22),transparent 55%),radial-gradient(1000px 900px at 50% 110%,rgba(222,198,198,.1),transparent 55%),linear-gradient(180deg,var(--bg1),var(--bg0));color:var(--text)}.appShell{min-height:100vh;display:flex;flex-direction:column}.topbar{padding:18px 16px 10px}.brandTitle{font-weight:900;font-size:20px;letter-spacing:-.02em}.brandSub{margin-top:3px;color:var(--muted);font-size:13px}.content{flex:1;padding:var(--contentPadTop) var(--contentPadX) var(--contentPadBottom);max-width:960px;width:100%;margin:0 auto;overflow-x:hidden}.page{display:grid;gap:12px}.pageHeader{display:grid;grid-template-columns:80px 1fr 80px;gap:10px;align-items:center}.dateTitle{text-align:center;font-weight:900;letter-spacing:-.01em}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:100%;overflow:hidden}.cardHeader{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap}.cardTitle{font-weight:900;font-size:16px}.cardSub{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.4}.cardActions{display:flex;gap:8px;flex-wrap:wrap}.btn,.btnGhost,.btnSoft{border:1px solid var(--border);border-radius:14px;padding:10px 12px;color:var(--text);cursor:pointer;font-weight:900;letter-spacing:-.01em;max-width:100%}.btn{background:linear-gradient(135deg,#6aa6ff40,#78ffdc24)}.btn:hover{filter:brightness(1.08)}.btnGhost{background:transparent}.btnGhost:hover{background:#ffffff0f}.btnSoft{background:#ffffff14}.btnSoft:hover{filter:brightness(1.1)}.toolbarRow{display:flex;gap:10px;flex-wrap:wrap}.hint{margin-top:10px;color:var(--muted2);font-size:12px}.boardWrap{margin:0 auto;width:100%;max-width:520px}.board{aspect-ratio:1 / 1;width:min(520px,calc(100vw - (var(--contentPadX) * 2)));max-width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,2vw,10px)}.cell{position:relative;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#ffffff17;box-shadow:0 12px 26px #00000040;padding:clamp(8px,2vw,10px);padding-bottom:clamp(44px,8vw,52px);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start;min-height:0;transition:transform .12s ease,filter .12s ease;overflow:hidden}.cell:hover{transform:translateY(-1px);filter:brightness(1.05)}.cell.done{background:linear-gradient(180deg,#6aa6ff38,#78ffdc1a);border-color:#78ffdc4d}.cellTop{display:flex;align-items:center}.pill{font-size:clamp(9px,2.2vw,11px);font-weight:1000;padding:clamp(4px,1.6vw,6px) clamp(7px,2vw,10px);border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#0000002e;color:#ffffffc7}.pillDone{background:#78ffdc24;border-color:#78ffdc47;color:#dcfff5eb}.pillTodo{background:#6aa6ff1a;border-color:#6aa6ff33}.cellText{margin:clamp(6px,2vw,10px) 0;font-weight:950;letter-spacing:-.02em;line-height:1.2;font-size:clamp(10px,2.6vw,15px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.placeholder{color:#ffffff8c;font-weight:800}.cellEdit{position:absolute;right:clamp(6px,1.8vw,10px);bottom:clamp(6px,1.8vw,10px);font-size:clamp(10px,2.4vw,12px);font-weight:950;color:#ffffffdb;padding:clamp(4px,1.6vw,6px) clamp(7px,2vw,10px);border-radius:14px;border:1px solid rgba(255,255,255,.16);background:#00000038;max-width:80%;white-space:nowrap}.cellEdit:hover{filter:brightness(1.12)}.calendarHeader{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.4vw,8px);margin-bottom:8px;padding:0 2px}.weekday{text-align:center;font-size:clamp(10px,2.2vw,12px);color:var(--muted);font-weight:900}.calendarGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.4vw,8px)}.calCell{border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#ffffff14;padding:clamp(6px,1.8vw,10px);min-height:clamp(56px,12vw,74px);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:transform .12s ease,filter .12s ease;overflow:hidden}.calCell:hover{transform:translateY(-1px);filter:brightness(1.06)}.calCell.empty{background:transparent;border:1px dashed rgba(255,255,255,.1);cursor:default}.calCell.today{border-color:#78ffdc57;background:linear-gradient(180deg,#78ffdc1a,#6aa6ff14)}.calTop{display:flex;justify-content:space-between;align-items:center;gap:8px}.calDay{font-weight:1000;font-size:clamp(11px,2.4vw,14px)}.badge{font-size:clamp(10px,2.2vw,12px);font-weight:1000;padding:clamp(4px,1.6vw,6px) clamp(7px,2vw,10px);border-radius:999px;border:1px solid rgba(255,255,255,.16);background:#0003;color:#ffffffd9;white-space:nowrap}.calBottom{font-size:clamp(10px,2.1vw,12px);color:#ffffffad;font-weight:900}.tabbar{position:fixed;left:0;right:0;bottom:0;padding:10px 12px;background:#080e1ab8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2vw,10px)}.tab{border-radius:18px;border:1px solid rgba(255,255,255,.14);background:#ffffff12;color:#ffffffc7;padding:clamp(10px,2.6vw,12px) clamp(8px,2.2vw,10px);font-size:clamp(11px,2.6vw,13px);font-weight:1000;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab.active{background:linear-gradient(135deg,#6aa6ff42,#78ffdc24);border-color:#78ffdc42;color:#fffffff2}@media (min-width: 768px){.content{padding-bottom:104px}.tabbar{max-width:860px;left:50%;transform:translate(-50%);border-radius:24px 24px 0 0}}@media (max-width: 380px){:root{--contentPadX: 12px}.topbar{padding:14px 14px 8px}.brandTitle{font-size:18px}.brandSub{font-size:12px}.cell{border-radius:16px}}
