:root {
  --bg: #f5f2ec;
  --card: #fffdf8;
  --text: #2c2a25;
  --dim: #7a756c;
  --border: #e5e0d8;
  --accent: #c26339;
  --green: #5a7a5e;
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, 'Pretendard', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 60px; }

header { text-align: center; padding: 12px 0 16px; }
header h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
header h1 .pin { color: var(--accent); }
header .sub { color: var(--dim); font-size: 0.85rem; margin-top: 2px; }

.photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); display: block;
}
.photo-fallback {
  width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius);
  border: 1px dashed var(--accent); display: none;
  align-items: center; justify-content: center; text-align: center;
  color: var(--accent); font-size: 0.85rem; padding: 20px;
}

.hint { text-align: center; color: var(--dim); font-size: 0.85rem; margin: 12px 0 8px; }

#map { width: 100%; height: 300px; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 12px; }

button {
  font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  border: none; border-radius: var(--radius); padding: 13px 20px; width: 100%;
  transition: transform .08s, background .15s, opacity .15s;
}
button:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--dim); border: 1px solid var(--border); }
.btn-share { background: var(--green); color: #fff; margin-top: 10px; }

.result {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-top: 14px; text-align: center; display: none;
}
.result.show { display: block; }
.result .bar { font-size: 1.6rem; letter-spacing: 3px; margin-bottom: 6px; }
.result .dist { font-size: 1.4rem; font-weight: 800; }
.result .pts { color: var(--dim); font-size: 0.9rem; }
.result .place { margin-top: 8px; font-weight: 600; }
.result .credit { color: var(--dim); font-size: 0.72rem; margin-top: 4px; }
.result .streak { margin-top: 12px; color: var(--accent); font-weight: 700; font-size: 0.9rem; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 0.85rem; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

footer { text-align: center; color: var(--dim); font-size: 0.72rem; margin-top: 24px; }