/* ===========================================================
   우리가 마을이 될 때 — style.css
   -----------------------------------------------------------
   생각: 마을은 펜으로 그린 흑백입니다.
        색을 가진 것은 사람이 단 자두뿐입니다.
   그래서 이 사이트에는 색이 딱 하나만 있습니다.
   =========================================================== */

:root {
  --paper:        #FBF9F5;
  --paper-shade:  #F0EAE0;
  --paper-line:   #DFD7CA;
  --ink:          #241D18;
  --ink-mid:      #5C544C;
  --ink-faint:    #A49B90;
  --plum:         #8E2C4E;
  --plum-bright:  #C0466B;
  --plum-wash:    #F6E7EB;

  /* 명조를 섞어 쓰다가 프리텐다드 하나로 정리했습니다 (2026-09-01 hc)
     --display 는 같은 글꼴을 자간·굵기만 달리 쓰는 표제용입니다 */
  --sans:    "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo",
             "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --display: var(--sans);

  --dock-h: 62px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

/* hidden 은 어떤 display 보다 셉니다 — 시트·안내띠가 처음부터 보이면 안 됩니다 */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 지도를 끌 때 글자가 선택되는 것을 막습니다.
   글을 읽는 시트 안에서는 그대로 고를 수 있게 둡니다. */
body { -webkit-user-select: none; user-select: none; }
.sheet-body, .sheet-body * { -webkit-user-select: text; user-select: text; }
input, textarea, select { -webkit-user-select: text; user-select: text; }

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

/* ── 지도 ───────────────────────────────────────────────── */
.map {
  position: fixed;
  inset: 0;
  background: var(--paper);
  touch-action: none;
  cursor: grab;
  overflow: hidden;
}
.map.is-dragging { cursor: grabbing; }
.map.is-picking  { cursor: crosshair; }

.stage {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.stage.is-easing { transition: transform .55s var(--ease); }

.aerial {
  display: block;
  width: 1800px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.pins { position: absolute; inset: 0; }

/* ── 핫스팟 ─────────────────────────────────────────────── */
.spot {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--inv, 1));
  transform-origin: 50% 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  white-space: nowrap;
}
.spot-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: rgba(251, 249, 245, .5);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  transition: background .2s, transform .2s;
}
.spot[data-status="open"] .spot-ring {
  border-style: dashed;
  color: var(--ink-faint);
}
.spot-name {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  background: var(--paper);
  padding: 1px 6px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--paper-line);
}
.spot[data-status="open"] .spot-name { color: var(--ink-mid); }
/* 멀리서 볼 때는 번호만 남깁니다 — 이름표끼리 겹치지 않게 */
.is-far .spot-name { display: none; }

/* 관리자로 들어와 있으면 동그라미를 끌어 옮길 수 있습니다 */
body.is-admin .spot,
body.is-admin .dog,
body.is-admin .plum { cursor: grab; touch-action: none; }
body.is-admin .spot .spot-ring { border-style: dashed; border-color: var(--plum); }
body.is-admin .spot[data-status="named"] .spot-ring { border-style: solid; }
/* 길게 눌러 집어 든 상태 */
.spot.is-armed, .dog.is-armed { z-index: 9; }
.spot.is-armed .spot-ring {
  background: var(--plum);
  color: var(--paper);
  border-color: var(--plum);
  border-style: solid;
  box-shadow: 0 0 0 8px rgba(142, 44, 78, .16);
}
.dog.is-armed .dog-img {
  transform: translateY(-4px) scale(1.12);
  filter: drop-shadow(0 4px 0 rgba(142, 44, 78, .25));
}
.plum.is-armed img {
  transform: scale(1.35);
  filter: drop-shadow(0 3px 0 rgba(142, 44, 78, .3));
}
.spot.is-moving, .dog.is-moving, .plum.is-moving { cursor: grabbing; z-index: 9; }
.spot.is-moving .spot-ring {
  background: var(--plum);
  color: var(--paper);
  border-color: var(--plum);
  box-shadow: 0 0 0 6px rgba(142, 44, 78, .18);
}
.spot:hover .spot-ring,
.spot:focus-visible .spot-ring { background: var(--ink); color: var(--paper); }
.spot:hover .spot-name { color: var(--plum); }

/* ── 강아지 (진행 상황) ─────────────────────────────────── */
.dog {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -100%) scale(var(--inv, 1));
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 4;
}
.dog .dog-img {
  display: block;
  width: 44px; height: 44px;
  object-fit: contain;
  filter: drop-shadow(1px 2px 0 rgba(36, 29, 24, .12));
  transition: transform .18s var(--ease);
  -webkit-user-drag: none;
}
.dog:hover .dog-img, .dog:focus-visible .dog-img { transform: translateY(-3px); }
/* 이름표는 두지 않습니다 — 눌러야 내용이 열립니다 */

/* ── 자두나무 가지 ──────────────────────────────────────── */
.tree {
  position: relative;
  width: 100%;
  margin: 6px 0 0;
  line-height: 0;
}
.tree-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .92;
  -webkit-user-drag: none;
}
.tree-plum {
  position: absolute;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -18%);
  animation: plum-grow .45s var(--ease) both;
  animation-delay: var(--d, 0s);
}
.tree-plum img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .18s var(--ease);
  -webkit-user-drag: none;
}
.tree-plum:hover img,
.tree-plum:focus-visible img { transform: scale(1.22); }
.tree-plum.is-new {
  animation: plum-pop .7s var(--ease) both;
  z-index: 2;
}
.tree-plum.is-new img { filter: drop-shadow(0 0 0 rgba(142, 44, 78, 0)); }

@keyframes plum-grow {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.4); }
  to   { opacity: 1; transform: translate(-50%, -18%) scale(1); }
}
@keyframes plum-pop {
  0%   { opacity: 0; transform: translate(-50%, -70%) scale(.3); }
  60%  { opacity: 1; transform: translate(-50%, -12%) scale(1.35); }
  100% { opacity: 1; transform: translate(-50%, -18%) scale(1); }
}

.tree-more {
  position: absolute;
  right: 0; bottom: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-faint);
}
.sheet-content .tree-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
}

/* 눌러서 찾아간 카드는 잠깐 반짝입니다 */
@keyframes card-flash {
  0%   { background: var(--plum-wash); border-left-color: var(--plum); }
  100% { background: var(--paper); }
}
.wall-card.is-flash { animation: card-flash 1.4s var(--ease); }

/* ── 질문별 모아보기 ────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.chip {
  border: 1px solid var(--paper-line);
  background: var(--paper);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--ink-mid);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--paper);
  font-weight: 600;
}

/* ── 공유하기 ───────────────────────────────────────────── */
.wall-share { margin-top: 10px; }
.share-wrap {
  margin-top: 12px;
  border: 1px solid var(--paper-line);
  background: var(--paper-shade);
  min-height: 220px;
  display: grid;
  place-items: center;
}
.share-loading { font-size: 13px; color: var(--ink-faint); padding: 40px 0; }
.share-img { display: block; width: 100%; height: auto; }

/* ── 담벼락 댓글 ────────────────────────────────────────── */
.cmt { margin-top: 10px; }
.cmt-toggle {
  border: 0;
  background: none;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--plum);
  font-weight: 600;
}
.cmt-toggle:hover { text-decoration: underline; }
.cmt-box {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmt-list { display: flex; flex-direction: column; gap: 9px; }
.cmt-one {
  padding-left: 10px;
  border-left: 2px solid var(--paper-line);
}
.cmt-body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.cmt-who { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-faint); }
.cmt-act {
  border: 0;
  background: none;
  padding: 0 0 0 8px;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.cmt-act:hover { color: var(--ink); text-decoration: underline; }
.cmt-del { color: var(--plum); }
.cmt-del:hover { color: var(--plum); }
.cmt-edit { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.cmt-form { display: flex; flex-direction: column; gap: 7px; }
.cmt-input, .cmt-name {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 0;
  padding: 9px 11px;
  width: 100%;
  resize: none;
  -webkit-appearance: none;
}
.cmt-input:focus, .cmt-name:focus { outline: none; border-color: var(--plum); }
.cmt-row { display: flex; gap: 7px; align-items: stretch; }
.cmt-row .cmt-name { flex: 1; min-width: 0; }
.cmt-send {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 14px;
}

.wall-acts {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--paper-line);
}

.pick {
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 0;
  padding: 11px 12px;
  width: 100%;
}
.pick:focus { outline: none; border-color: var(--plum); }

/* ── 소식 ───────────────────────────────────────────────── */
/* 소식 하나 보기 — 날짜 · 제목 · 글 · 사진 순서 */
.news-headline {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
/* .sheet-content 를 앞에 붙여 둡니다.
   안 그러면 뒤에 나오는 `.sheet-content > * + *` 의 14px 에 밀립니다. */
.sheet-content .news-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.news-body p { margin: 0; line-height: 1.75; }

.sheet-content .news-figure { margin: 28px 0 0; padding: 0; }
.news-photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--paper-line);
  background: var(--paper-shade);
}
/* 사진 다음 버튼은 조금 더 떨어뜨립니다 */
.sheet-content .news-figure + .btn-row { margin-top: 24px; }
/* 제목 아래 날짜와 제목 사이도 조금 벌립니다 */
.sheet-content .kicker + .news-headline { margin-top: 8px; }
.news-list { display: flex; flex-direction: column; gap: 0; }
.news-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--paper-line);
  background: none;
  padding: 15px 0;
}
.news-row:first-child { border-top: 0; }
.news-row:active { background: var(--paper-shade); }
.news-thumb {
  width: 68px; height: 68px;
  object-fit: cover;
  border: 1px solid var(--paper-line);
  background: var(--paper-shade);
}
.news-thumb.is-empty { display: grid; place-items: center; }
.news-thumb.is-empty .dog-img { width: 42px; height: 42px; object-fit: contain; }
.news-row-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.news-day { font-size: 11.5px; color: var(--plum); letter-spacing: .02em; }
.news-title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.5;
  color: var(--ink);
}
.news-list { margin-top: 4px; }

.photo-box { display: flex; flex-direction: column; gap: 10px; }
.photo-box .news-photo { max-height: 40vh; object-fit: contain; }
.file-btn { display: inline-grid; place-items: center; cursor: pointer; }

/* ── 자두 핀 ────────────────────────────────────────────── */
/* 지도 위에서는 작게 — 조감도가 주인공이고 자두는 점처럼 얹힙니다.
   가지에 열리는 자두(.tree-plum)는 크게 둡니다. */
.plum {
  position: absolute;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -100%) scale(var(--inv, 1));
  transform-origin: 50% 100%;
  animation: plum-drop .5s var(--ease) both;
}
.plum img {
  display: block;
  width: 19px; height: 19px;
  object-fit: contain;
  transition: transform .18s var(--ease);
  -webkit-user-drag: none;
}
.plum:hover, .plum:focus-visible { z-index: 5; }
.plum:hover img { transform: scale(1.18); }

@keyframes plum-drop {
  from { opacity: 0; transform: translate(-50%, -140%) scale(var(--inv, 1)); }
  to   { opacity: 1; transform: translate(-50%, -100%) scale(var(--inv, 1)); }
}

/* 자두를 누르면 뜨는 말풍선 */
.bubble {
  position: absolute;
  transform: translate(-50%, calc(-100% - 28px)) scale(var(--inv, 1));
  transform-origin: 50% 100%;
  width: 232px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 14px 13px;
  z-index: 6;
  box-shadow: 3px 4px 0 rgba(36, 29, 24, .13);
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px; height: 12px;
  margin-left: -6px;
  background: var(--paper);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
}
.bubble-q {
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--plum);
  margin: 0 0 4px;
}
.bubble-a {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.bubble-who {
  margin: 7px 0 0;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* ── 제호 ───────────────────────────────────────────────── */
.brand {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  z-index: 20;
}
.brand-logo {
  display: block;
  height: 24px;
  width: auto;
  margin: 2px 0 8px;
  -webkit-user-drag: none;
}
.brand-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 9px 13px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(36, 29, 24, .1);
  text-align: left;
}
.brand-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.brand-sub {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--plum);
}

/* ── 남은 날 · 함께하는 사람 수 ─────────────────────────── */
.tally {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(36, 29, 24, .1);
  font-size: 12.5px;
  color: var(--ink);
  max-width: 100%;
}
.tally-dday {
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
}
.tally-people { color: var(--ink-mid); white-space: nowrap; }
.tally-people b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tally-go {
  margin-left: 2px;
  padding-left: 9px;
  border-left: 1px solid var(--paper-line);
  color: var(--plum);
  font-weight: 600;
  white-space: nowrap;
}
.tally.is-mine .tally-go::before { content: "✓ "; }
.tally:active { background: var(--paper-shade); }

/* ── 개인정보 동의 ──────────────────────────────────────── */
.privacy {
  border: 1px solid var(--ink);
  padding: 15px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.privacy-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.privacy-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.privacy-table th,
.privacy-table td {
  text-align: left;
  vertical-align: top;
  padding: 4px 0;
  border-bottom: 1px solid var(--paper-line);
}
.privacy-table th {
  width: 5.5rem;
  font-weight: 400;
  color: var(--ink-faint);
  white-space: nowrap;
}
.privacy-table td { color: var(--ink-mid); }
.privacy-table tr:last-child th,
.privacy-table tr:last-child td { border-bottom: 0; }
.privacy-note { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-mid); }

/* 선택 항목 표시 · @ 가 붙은 입력칸 */
.opt {
  margin-left: 5px;
  padding: 1px 6px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--ink-faint);
  vertical-align: middle;
}
.at-box {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--paper-line);
  background: var(--paper);
}
.at-box:focus-within { border-color: var(--plum); }
.at-box .at {
  display: grid;
  place-items: center;
  padding: 0 2px 0 12px;
  color: var(--ink-faint);
  font-size: 16px;
}
.at-box input {
  border: 0;
  flex: 1;
  min-width: 0;
  padding-left: 2px;
}
.at-box input:focus { outline: none; border: 0; }
.card-id-insta { font-size: 14px; color: var(--ink-mid); }
.ig { color: var(--plum); text-decoration: none; }
.ig:hover { text-decoration: underline; }

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
}
.check input {
  width: 20px; height: 20px;
  accent-color: var(--plum);
  flex: none;
  margin: 0;
}

/* ── 확대·축소 ──────────────────────────────────────────── */
.zoomer {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zoom-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.zoom-btn:active { background: var(--paper-shade); }
.zoom-fit { font-size: 11.5px; letter-spacing: .02em; }

/* ── 힌트 한 줄 ─────────────────────────────────────────── */
.hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 14px);
  transform: translateX(-50%);
  z-index: 15;
  margin: 0;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--ink-mid);
  background: rgba(251, 249, 245, .9);
  border-radius: 999px;
  max-width: calc(100vw - 32px);
  text-align: center;
  transition: opacity .4s;
}
.hint.is-gone { opacity: 0; pointer-events: none; }

/* ── 아래 도구 바 ───────────────────────────────────────── */
.dock {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 20;
  height: calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.3fr;
  align-items: stretch;
  background: var(--paper);
  border-top: 1px solid var(--ink);
}
.dock-btn {
  border: 0;
  border-left: 1px solid var(--paper-line);
  background: none;
  font-size: 12.5px;
  letter-spacing: .01em;
  padding: 0 4px;
}
.dock-btn:first-child { border-left: 0; }
.dock-btn:active { background: var(--paper-shade); }
.dock-btn-plum {
  color: var(--plum);
  font-weight: 600;
  border-left: 1px solid var(--ink);
}
.dock-btn-plum.is-on { background: var(--plum); color: var(--paper); }
.dock-count { color: var(--ink-faint); font-size: 11.5px; }

/* ── 자두 달 자리 고르는 중 ─────────────────────────────── */
.picker {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
  z-index: 21;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: var(--plum);
  color: var(--paper);
}
.picker-text { margin: 0; font-size: 13.5px; }
.picker-cancel {
  border: 1px solid rgba(251, 249, 245, .55);
  background: none;
  color: var(--paper);
  font-size: 12.5px;
  padding: 4px 10px;
}

/* ── 잠깐 뜨는 알림 ─────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 18px);
  transform: translate(-50%, 8px);
  z-index: 40;
  margin: 0;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── 하위 페이지 (올라오는 종이) ────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(36, 29, 24, .3);
  animation: fade-in .25s var(--ease);
}
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

.sheet {
  position: fixed;
  z-index: 31;
  left: 0; right: 0; bottom: 0;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  box-shadow: 0 -6px 30px rgba(36, 29, 24, .16);
  animation: sheet-up .38s var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%) } to { transform: none } }

.sheet-grab {
  /* 잡아 내리는 손잡이입니다. 눌리는 영역을 넉넉히 둡니다 */
  flex: none;
  height: 26px;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}
.sheet-grab::before {
  content: "";
  width: 44px;
  height: 4px;
  background: var(--paper-line);
  border-radius: 999px;
}
.sheet.is-swiping { transition: none; }
.sheet-close {
  position: absolute;
  top: 6px; right: 8px;
  z-index: 3;
  /* 손가락으로 누를 수 있는 크기를 지킵니다 (최소 44px) */
  min-width: 52px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13.5px;
  color: var(--ink);
  padding: 0 12px;
}
.sheet-close:hover { border-color: var(--ink); }
.sheet-close:active { background: var(--paper-shade); }
.sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 22px calc(28px + env(safe-area-inset-bottom));
}
.sheet-title:empty { display: none; }
.sheet-title {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.32;
  margin: 6px 0 16px;
  text-wrap: balance;
}
.sheet-content { max-width: 34rem; }
.sheet-content > * + * { margin-top: 14px; }
.sheet-content p { margin: 0; color: var(--ink-mid); }
.sheet-content strong { color: var(--ink); font-weight: 700; }

.kicker {
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--plum);
  margin: 0;
}
.rule { border: 0; border-top: 1px solid var(--paper-line); margin: 20px 0; }

.lede {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.65;
  color: var(--ink);
}

/* 소개의 말놀이 상자는 2026-09-01 hc 지시로 화면에서 뺐습니다.
   되살릴 일이 있을까 싶어 규칙만 남겨 둡니다. */
.wordplay {
  border: 1px solid var(--ink);
  padding: 16px 18px;
  background: var(--paper);
}
.wordplay-line {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 8px;
  color: var(--ink);
}
.wordplay-line em { font-style: normal; color: var(--plum); font-weight: 700; }
.wordplay p { font-size: 14.5px; }

/* 장소 목록 */
.place-list { display: flex; flex-direction: column; gap: 0; }
.place-list .place-row:has(.place-no[data-text]) { grid-template-columns: auto 1fr; }
.place-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--paper-line);
  background: none;
  padding: 14px 0;
}
.place-row:first-child { border-top: 0; }
.place-row:active { background: var(--paper-shade); }
.place-no {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
.place-row[data-status="open"] .place-no { border-style: dashed; color: var(--ink-faint); }
/* 글자 라벨은 동그라미를 벗어나므로 알약으로 늘립니다 */
.place-no[data-text] {
  width: auto;
  min-width: 34px;
  padding: 0 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: -.02em;
}
.place-name { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.place-desc { display: block; font-size: 13.5px; color: var(--ink-mid); margin: 2px 0 0; }
.place-row[data-status="open"] .place-desc { color: var(--plum); }

/* 담벼락 */
.wall { display: flex; flex-direction: column; gap: 12px; }
.wall-card {
  border: 1px solid var(--paper-line);
  border-left: 2px solid var(--plum);
  padding: 13px 15px;
  background: var(--paper);
}
.wall-q { font-size: 11.5px; color: var(--plum); margin: 0 0 4px; letter-spacing: .02em; }
.wall-a { font-family: var(--display); font-size: 15.5px; line-height: 1.6; margin: 0; color: var(--ink); }
.wall-who { font-size: 11.5px; color: var(--ink-faint); margin: 7px 0 0; }
.wall-empty { color: var(--ink-faint); }

/* ── 자두 달기 3단계 ───────────────────────────────────── */
.qgrid { display: flex; flex-direction: column; gap: 8px; }
.qbtn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--paper-line);
  background: var(--paper);
  padding: 13px 15px;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: border-color .18s, background .18s;
}
.qbtn:hover, .qbtn:focus-visible { border-color: var(--plum); background: var(--plum-wash); }
.qbtn.is-on { border-color: var(--plum); background: var(--plum-wash); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12.5px; color: var(--ink-mid); }
.field textarea,
.field input {
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 0;
  padding: 11px 13px;
  width: 100%;
  resize: none;
  -webkit-appearance: none;
}
.field textarea:focus,
.field input:focus { outline: none; border-color: var(--plum); }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }
.counter { font-size: 11.5px; color: var(--ink-faint); text-align: right; }

.btn-row { display: flex; gap: 8px; padding-top: 4px; }
.btn {
  flex: 1;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 13px 16px;
  font-size: 15px;
}
.btn-main { background: var(--plum); border-color: var(--plum); color: var(--paper); font-weight: 600; }
.btn-main[disabled] { opacity: .4; cursor: not-allowed; }
.btn-ghost { flex: 0 0 auto; color: var(--ink-mid); border-color: var(--paper-line); }

.done { text-align: center; padding: 12px 0 4px; }
.done svg,
.done .plum-mark { width: 60px; height: 60px; object-fit: contain; }
.done-title { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 12px 0 6px; }

.notice {
  font-size: 12.5px;
  color: var(--ink-faint);
  border-top: 1px solid var(--paper-line);
  padding-top: 12px;
}


/* ═══ 임시주민증 ═════════════════════════════════════════ */
.card-id {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 16px 18px 18px;
  box-shadow: 4px 5px 0 rgba(36, 29, 24, .12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-id-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--paper-line);
}
.card-id-title {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .22em;
}
.card-id-no {
  font-size: 12px;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.card-id-name {
  margin: 2px 0 8px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.card-id-q { margin: 0; font-size: 12px; color: var(--plum); }
.card-id-a {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.card-id-foot {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--paper-line);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

/* ═══ 관리자 ═════════════════════════════════════════════ */
.warn,
.warn-line {
  border-left: 3px solid var(--plum);
  background: var(--plum-wash);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
}
.warn p { margin: 0; font-size: 14px; color: var(--ink); }

.admin-row {
  display: grid;
  grid-template-columns: 26px 34px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--paper-line);
}
.admin-row:first-child { border-top: 0; }
.admin-row-main { min-width: 0; }
.admin-row .place-no[data-dashed] { border-style: dashed; color: var(--ink-faint); }
.admin-row-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.mini {
  border: 1px solid var(--paper-line);
  background: var(--paper);
  font-size: 12px;
  padding: 5px 9px;
  white-space: nowrap;
}
.mini:hover { border-color: var(--ink); }
.mini-warn { color: var(--plum); }
.mini-warn:hover { border-color: var(--plum); }

/* 순서 바꾸기 화살표 */
.order {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 1px;
}
.arrow {
  width: 24px;
  height: 20px;
  line-height: 1;
  border: 1px solid var(--paper-line);
  background: var(--paper);
  font-size: 11px;
  color: var(--ink-mid);
  display: grid;
  place-items: center;
  padding: 0;
}
.arrow:hover:not([disabled]) { border-color: var(--ink); color: var(--ink); }
.arrow[disabled] { opacity: .3; cursor: default; }

/* 잡아 끄는 손잡이 */
.grip {
  font-size: 13px;
  line-height: 1;
  color: var(--ink-faint);
  cursor: grab;
  text-align: center;
  padding: 1px 0 3px;
  user-select: none;
}
.admin-row[draggable="true"] { transition: background .15s, box-shadow .15s; }
.admin-row.is-lifted { opacity: .45; }
.admin-row.is-over {
  background: var(--plum-wash);
  box-shadow: inset 0 2px 0 var(--plum);
}

.hint-line {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.seg { display: flex; gap: 6px; }
.seg-btn {
  flex: 1;
  border: 1px solid var(--paper-line);
  background: var(--paper);
  padding: 10px 8px;
  font-size: 13px;
}
.seg-btn.is-on { border-color: var(--plum); background: var(--plum-wash); color: var(--plum); font-weight: 600; }

.code-out {
  width: 100%;
  font-family: ui-monospace, "D2Coding", Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface-sunk, var(--paper-shade));
  border: 1px solid var(--paper-line);
  border-radius: 0;
  padding: 11px 12px;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* 관리자로 들어와 있으면 제호에 표시가 붙습니다 */
body.is-admin .brand-btn { border-color: var(--plum); }
body.is-admin .brand-btn::after {
  content: "관리자";
  position: absolute;
  top: -8px; right: -8px;
  background: var(--plum);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 2px 6px;
}
.brand-btn { position: relative; }


/* 「장소 새로 만들기」는 목록보다 위에 둡니다 — 아래에 있으면 안 보입니다 */
.row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.row-head .kicker { margin: 0; }
.btn-add {
  border: 1px solid var(--plum);
  background: var(--plum);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  white-space: nowrap;
}
.btn-add:active { opacity: .85; }

.empty-box {
  border: 1px dashed var(--paper-line);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.empty-box p { margin: 0; font-size: 14.5px; }

.ok-line {
  border-left: 3px solid var(--ink);
  background: var(--paper-shade);
  padding: 12px 14px;
}
.ok-line p { margin: 0; font-size: 14px; color: var(--ink); }

/* ── 데스크톱 ───────────────────────────────────────────── */
@media (min-width: 860px) {
  .sheet {
    left: auto;
    right: 24px;
    top: 24px;
    bottom: 24px;
    width: 420px;
    max-height: none;
    border: 1px solid var(--ink);
    animation: sheet-in .38s var(--ease);
  }
  @keyframes sheet-in { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
  .sheet-grab { display: none; }
  .sheet-close { top: 14px; right: 16px; }
  .sheet-body { padding: 30px 30px 34px; }
  .scrim { background: rgba(36, 29, 24, .16); }

  .dock {
    left: 16px;
    right: auto;
    bottom: 16px;
    width: 400px;
    border: 1px solid var(--ink);
    height: var(--dock-h);
  }
  .picker { left: 16px; right: auto; width: 400px; bottom: calc(var(--dock-h) + 16px); }
  .hint { left: 216px; bottom: calc(var(--dock-h) + 30px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .stage.is-easing { transition: none; }
}