:root {
  --bg: #faf4ec;
  --bg-warm: #f3e7d8;
  --ink: #2e2a26;
  --ink-soft: #6b6258;
  --coral: #e07a5f;
  --coral-dark: #c75c43;
  --sage: #81a684;
  --gold: #e0a458;
  --card: #fffdf9;
  --line: #e6d9c8;
  --shadow: 0 10px 40px rgba(70, 50, 30, 0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Gowun Dodum', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.muted { color: var(--ink-soft); }
[hidden] { display: none !important; }

/* ── 로그인 게이트 ── */
.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-warm), var(--bg));
  padding: 24px;
}
.gate-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 44px 36px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.logo { font-family: 'Gowun Batang', serif; font-weight: 700; font-size: 1.4rem; color: var(--coral); letter-spacing: .02em; }
.gate-card h1 { font-family: 'Gowun Batang', serif; font-size: 1.6rem; margin: 14px 0 10px; }
.gate-card .muted { line-height: 1.7; font-size: .95rem; }
.apple-btn {
  margin-top: 26px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: #111;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: transform .08s ease, opacity .2s;
}
.apple-btn:hover { opacity: .9; }
.apple-btn:active { transform: scale(.98); }
.apple-btn:disabled { opacity: .5; cursor: default; }
.fineprint { margin-top: 16px; font-size: .8rem; color: var(--ink-soft); }

/* ── 앱 레이아웃 ── */
#app { height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  z-index: 500;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.logo-sm { font-family: 'Gowun Batang', serif; font-weight: 700; color: var(--coral); }
.space-name { font-size: 1.05rem; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.status { font-size: .82rem; color: var(--ink-soft); }
.switcher {
  font-family: inherit; padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.ghost-btn {
  font-family: inherit; font-size: .85rem; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 6px 12px; border-radius: 10px;
}
.ghost-btn:hover { background: var(--bg-warm); }

#map { flex: 1; width: 100%; }
.leaflet-container { background: #e8eef0; font-family: inherit; }

/* ── 상세 패널 ── */
.panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 92vw);
  background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(70,50,30,.14);
  transform: translateX(105%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 600; overflow-y: auto; padding: 22px 22px 60px;
}
.panel.open { transform: translateX(0); }
.panel-close {
  position: sticky; top: 0; float: right; margin: -6px -6px 0 0;
  background: var(--bg-warm); border: none; border-radius: 50%;
  width: 34px; height: 34px; cursor: pointer; font-size: .9rem; color: var(--ink-soft);
}
.panel-loading { color: var(--ink-soft); padding: 30px 0; }

.detail-head { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; clear: both; }
.detail-head h2 { font-family: 'Gowun Batang', serif; font-size: 1.3rem; }
.hue-dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.2); }

.moment { border-top: 1px solid var(--line); padding: 16px 0; }
.moment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.moment-head .date { font-weight: 700; font-size: .95rem; }
.badge { font-size: .72rem; padding: 3px 9px; border-radius: 999px; }
.badge.done { background: #e7f1e8; color: #3f7a48; }
.badge.wait { background: #fbeee6; color: var(--coral-dark); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 10px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--bg-warm); }

.entry { display: flex; gap: 9px; align-items: flex-start; margin: 8px 0; line-height: 1.6; }
.entry p { font-size: .95rem; }
.author-ring { width: 13px; height: 13px; border-radius: 50%; border: 2px solid; flex: 0 0 auto; margin-top: 4px; }
.mood { font-size: .72rem; color: var(--ink-soft); margin-left: 4px; }

@media (max-width: 520px) {
  .status { display: none; }
  .panel { width: 100vw; }
}