:root {
  --green: #78C850;
  --green-d: #5eaf32;
  --green-s: #e8f7dc;
  --text: #2a2a2a;
  --muted: #8b8b8b;
  --line: #ececec;
  --bg: #f4f5f7;
  --card: #fff;
  --danger: #e85d5d;
  --shadow: 0 8px 30px rgba(0,0,0,.12);
  --header: #78C850;
  --radius: 14px;
  --bottom-h: 64px;
  --top-h: 56px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.screen { height: 100%; }

/* Auth */
#auth-screen {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #eef8e6 0%, #fff 55%);
  padding: 24px;
}
.auth-card {
  width: 100%; max-width: 400px; background: #fff;
  border-radius: 20px; padding: 36px 28px 28px;
  box-shadow: var(--shadow); text-align: center;
}
.logo-mark { margin-bottom: 10px; }
.auth-card h1 { font-size: 1.8rem; letter-spacing: -.02em; }
.auth-tag { color: var(--muted); margin: 8px 0 22px; }
#login-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
#login-form label { font-size: .78rem; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
#login-form input {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 1rem;
}
#login-form button, .primary {
  background: var(--green); color: #fff; border: 0; border-radius: 10px;
  padding: 12px; font-weight: 700; margin-top: 6px;
}
#login-form button:hover, .primary:hover { background: var(--green-d); }
.auth-note { margin-top: 14px; font-size: .75rem; color: var(--muted); }
.install-btn {
  width: 100%; margin-top: 12px; background: #fff; color: var(--green-d);
  border: 2px solid var(--green); border-radius: 10px; padding: 10px; font-weight: 800;
}
.install-btn:hover { background: var(--green-s); }
.logo-mark img { border-radius: 16px; }
.brand img { border-radius: 6px; }
@media (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
}

/* App shell */
#app-screen { display: flex; background: #fff; }
#drawer {
  width: 280px; background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100%; z-index: 20;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; font-weight: 800;
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
#btn-close-drawer { display: none; }
.drawer-label {
  font-size: .72rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 16px 4px;
}
#calendar-list { list-style: none; overflow: auto; flex: 1; padding: 0 8px; }
#calendar-list li, .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer; border: 0; background: none;
  width: 100%; text-align: left; color: inherit;
}
#calendar-list li:hover, .nav-item:hover, #calendar-list li.active, .nav-item.active {
  background: var(--green-s);
}
.cal-swatch {
  width: 14px; height: 14px; border-radius: 4px; background: var(--green); flex-shrink: 0;
}
.cal-swatch.mix {
  background: conic-gradient(#F06262, #FF8A3D, #F5C518, #78C850, #4A90D9, #9B59B6, #F06262);
}
.eye { margin-left: auto; opacity: .5; border: 0; background: none; font-size: .9rem; }
.eye.on { opacity: 1; }
.drawer-actions, .drawer-foot { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.drawer-foot { border-top: 1px solid var(--line); padding-bottom: 16px; }
.ghost {
  background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--text);
}
.ghost:hover { background: var(--bg); }
.ghost.danger { color: var(--danger); }

#workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; }
#topbar {
  height: var(--top-h); display: flex; align-items: center; gap: 8px;
  padding: 0 10px; border-bottom: 1px solid var(--line); background: #fff; flex-shrink: 0;
}
#top-title { flex: 1; min-width: 0; }
#cal-name { font-weight: 800; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#member-avatars { display: flex; margin-top: 2px; }
.avatar {
  width: 22px; height: 22px; border-radius: 50%; background: #ddd; color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
  border: 2px solid #fff; margin-left: -6px; overflow: hidden; background-size: cover; background-position: center;
}
.avatar:first-child { margin-left: 0; }
.icon-btn {
  width: 38px; height: 38px; border: 0; background: none; border-radius: 10px; font-size: 1.05rem; position: relative;
}
.icon-btn:hover { background: var(--bg); }
.badge {
  position: absolute; top: 4px; right: 4px; background: var(--danger); color: #fff;
  font-size: 9px; min-width: 14px; height: 14px; border-radius: 8px; display: grid; place-items: center; padding: 0 3px;
}

#cover-banner {
  height: 88px; background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 12px 16px; color: #fff; font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
#pin-bar {
  display: flex; gap: 8px; overflow: auto; padding: 8px 12px; background: #fffbe6; border-bottom: 1px solid #f0e6b0;
}
.pin-chip {
  background: #fff; border: 1px solid #f0e6b0; border-radius: 20px; padding: 4px 10px;
  font-size: .78rem; white-space: nowrap; cursor: pointer;
}

#toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; flex-wrap: wrap; flex-shrink: 0;
}
.month-nav { display: flex; align-items: center; gap: 4px; }
.text-btn { border: 0; background: none; font-weight: 800; font-size: 1.05rem; padding: 4px 8px; }
.chip-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 4px 10px; font-size: .8rem;
}
.view-tabs { display: flex; background: var(--bg); border-radius: 10px; padding: 3px; }
.view-tabs button {
  border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: .8rem; color: var(--muted);
}
.view-tabs button.active { background: #fff; color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

#view-root { flex: 1; overflow: auto; padding-bottom: var(--bottom-h); }

/* Month grid */
.month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line); min-height: 100%;
}
.dow {
  text-align: center; font-size: .7rem; color: var(--muted); padding: 8px 0; font-weight: 700;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.dow.sun { color: #e85d5d; }
.dow.sat { color: #4A90D9; }
.day-cell {
  min-height: 96px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 4px 3px 6px; cursor: pointer;
}
.day-cell:nth-child(7n) { border-right: 0; }
.day-cell.other { background: #fafafa; color: #bbb; }
.day-num {
  width: 22px; height: 22px; display: grid; place-items: center; font-size: .75rem; font-weight: 700; margin-bottom: 2px;
}
.day-cell.today .day-num { background: var(--green); color: #fff; border-radius: 50%; }
.holiday { font-size: .62rem; color: #e85d5d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev {
  font-size: .68rem; border-radius: 4px; padding: 1px 4px; margin: 1px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.ev.allday { color: #fff; }
.ev.timed { background: transparent; }

/* Week / day */
.time-grid { display: grid; min-width: 700px; }
.time-grid.day { min-width: 0; }
.allday-row, .hour-row { display: grid; }
.hour-label {
  font-size: .7rem; color: var(--muted); padding: 0 6px; text-align: right;
  border-right: 1px solid var(--line);
}
.slot { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 48px; position: relative; }
.week-ev {
  position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 2px 6px;
  font-size: .72rem; overflow: hidden; color: #fff; z-index: 1; cursor: pointer;
}

/* List */
.list-day { padding: 8px 16px 16px; }
.list-head { font-weight: 800; margin: 8px 0; display: flex; gap: 8px; align-items: baseline; }
.list-head .sub { font-weight: 500; color: var(--muted); font-size: .85rem; }
.list-item {
  display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; align-items: flex-start;
}
.list-time { width: 72px; font-size: .78rem; color: var(--muted); flex-shrink: 0; }
.list-body { flex: 1; min-width: 0; }
.list-title { font-weight: 700; }
.list-meta { font-size: .78rem; color: var(--muted); }

/* Activity / album / memos */
.feed { padding: 8px 12px 80px; }
.feed-item {
  display: flex; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.feed-item p { font-size: .9rem; }
.feed-item .when { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.album-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; padding: 8px;
}
.album-grid img, .album-grid .ph {
  width: 100%; aspect-ratio: 1; object-fit: cover; background: #eee; cursor: pointer; border: 0;
}
.memo-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 8px 12px; cursor: pointer;
}
.memo-card h4 { margin-bottom: 4px; }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }

#bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff; border-top: 1px solid var(--line);
  display: none; grid-template-columns: repeat(5, 1fr); z-index: 15;
}
#bottom-nav button {
  border: 0; background: none; font-size: .68rem; color: var(--muted); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
#bottom-nav button span { font-size: 1.15rem; }
#bottom-nav button.active { color: var(--green-d); font-weight: 700; }
#bottom-nav .fab-slot span {
  width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; font-size: 1.6rem; margin-top: -18px; box-shadow: 0 4px 12px rgba(120,200,80,.45);
}

#fab {
  position: fixed; right: 20px; bottom: 28px; width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: var(--green); color: #fff; font-size: 2rem; box-shadow: 0 8px 18px rgba(120,200,80,.4); z-index: 16;
}
#fab:hover { background: var(--green-d); }

/* Modal / sheet */
#modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: #fff; width: 100%; max-width: 560px; max-height: 94vh; overflow: auto;
  border-radius: 18px 18px 0 0; padding: 8px 0 28px;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; position: sticky; top: 0; background: #fff; z-index: 2; border-bottom: 1px solid var(--line);
}
.sheet-head h3 { font-size: 1rem; }
.sheet-body { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px; color: var(--text); font-size: .95rem; background: #fff;
}
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: .95rem; }
.labels { display: flex; flex-wrap: wrap; gap: 8px; }
.label-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; cursor: pointer;
}
.label-dot.on { border-color: #222; }
.stickers { display: flex; flex-wrap: wrap; gap: 6px; }
.stickers button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 6px; font-size: 1.1rem; }
.stickers button.on { border-color: var(--green); background: var(--green-s); }
.todo-row { display: flex; gap: 8px; align-items: center; }
.todo-row input[type="text"] { flex: 1; }
.linkish { color: var(--green-d); background: none; border: 0; text-align: left; padding: 4px 0; }
.danger-btn { background: none; border: 0; color: var(--danger); padding: 8px 0; text-align: left; }

.chat { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.bubble { display: flex; gap: 8px; }
.bubble .msg { background: var(--bg); border-radius: 12px; padding: 8px 10px; flex: 1; }
.bubble .msg .who { font-weight: 700; font-size: .78rem; }
.bubble .msg .txt { font-size: .92rem; margin-top: 2px; }
.heart { border: 0; background: none; font-size: .85rem; color: var(--muted); }
.heart.on { color: var(--danger); }
.composer { display: flex; gap: 8px; margin-top: 8px; }
.composer input { flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 8px 12px; }
.member-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.member-row .grow { flex: 1; }
.invite-box {
  background: var(--green-s); border-radius: 12px; padding: 12px; font-family: ui-monospace, monospace; letter-spacing: .12em;
  font-size: 1.2rem; text-align: center; font-weight: 800;
}
.search-item { padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.notif { padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.notif.unread { background: var(--green-s); margin: 0 -16px; padding: 10px 16px; }
.thumb { width: 100%; border-radius: 10px; margin-top: 6px; }

@media (max-width: 860px) {
  #drawer {
    position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%);
    transition: transform .2s; box-shadow: var(--shadow); width: min(86vw, 320px);
  }
  #drawer.open { transform: none; }
  #btn-close-drawer { display: grid; }
  #drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 19;
  }
  #drawer-backdrop.hidden { display: none !important; }
  #bottom-nav { display: grid; }
  #fab { display: none; }
  #view-root { padding-bottom: calc(var(--bottom-h) + 8px); }
}
@media (min-width: 861px) {
  #modal { align-items: center; }
  .sheet { border-radius: 16px; max-height: 88vh; margin: 16px; }
  #fab { display: block; }
  #btn-menu { display: none; }
}