:root { --ink: #2f2a25; --muted: #6d645b; --paper: #fbf6ec; --line: #e3c48f; --gold: #8a5a12; --danger: #b5432e; }
* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
button, input { font: inherit; }
button { background: var(--gold); border: 0; border-radius: 8px; color: #fff; cursor: pointer; font-weight: 700; padding: 11px 14px; }
input { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px; width: 100%; }
.card { margin: 0 auto; max-width: 420px; padding: 56px 16px; }
.card h1 { font-size: 28px; margin: 0 0 6px; }
.card p { color: var(--muted); margin: 0 0 20px; }
.card form { display: grid; gap: 10px; }
.error { color: var(--danger); font-size: 14px; min-height: 20px; }
.layout { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 38%); height: 100%; }
.bar { align-items: center; display: flex; gap: 8px; justify-content: space-between; padding: 10px 16px; }
.bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar button { flex: none; font-size: 13px; padding: 7px 10px; }
#map { background: #efe5d0; min-height: 0; }
.notice { align-items: center; color: var(--muted); display: flex; height: 100%; justify-content: center; padding: 16px; text-align: center; }
.panel { border-top: 1px solid var(--line); overflow-y: auto; padding: 10px 16px 16px; }
.search { display: flex; gap: 8px; }
.search button { flex: none; }
ul.items { list-style: none; margin: 10px 0 0; padding: 0; }
ul.items li { border-bottom: 1px solid #efe5d0; padding: 9px 0; }
ul.items li button { background: none; color: var(--ink); font-weight: 400; padding: 0; text-align: left; width: 100%; }
.who { color: var(--muted); font-size: 13px; }
.pin { background: #fff; border: 2px solid var(--gold); border-radius: 14px; color: var(--ink); font-size: 12px; font-weight: 700; padding: 3px 9px; white-space: nowrap; }