/* ─────────────────────────────────────────────────────────
   구역관리 화면 스타일

   색은 jw.org에서 실제로 쓰이는 값을 그대로 가져왔다.
   그 사이트는 장식이 거의 없고 파랑과 흰 여백으로 성격을 만든다.
   여기서도 같은 방식을 쓴다 — 무늬를 넣지 않고, 파랑 하나와
   넉넉한 여백으로 정리한다. 로고나 그림은 쓰지 않는다.
   회중 내부 도구이지 공식 사이트가 아니기 때문이다.

   글꼴은 제목에만 웹폰트를 쓴다. 한글 웹폰트는 파일이 무겁고 이
   화면은 야외에서 휴대폰 데이터로 열리므로, 글자 수가 적은 제목에만
   고운바탕(명조 계열)을 쓰고 본문은 기기에 있는 글꼴을 그대로 쓴다.
   display=swap이라 글꼴이 늦게 와도 글자는 바로 보인다.
   ───────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap");

:root {
  /* jw.org 팔레트 */
  --brand:       #4a6da7;  /* 그 사이트에서 가장 많이 쓰이는 파랑 */
  --brand-deep:  #3a5686;  /* 흰 바탕 위 작은 글씨용. 대비를 위해 더 진하게 */
  --brand-soft:  #9fb9e3;
  --brand-tint:  #e8effb;  /* 아주 연한 파랑 */
  --page:        #f5f8fd;  /* 화면 바탕. tint를 더 옅게 푼 값 */

  --bg:          #ffffff;
  --fg:          #292929;
  --muted:       #626262;
  --faint:       #757575;
  --line:        #d8d8d8;
  --line-soft:   #ecf0f6;

  --accent:      var(--brand);
  --danger:      #a8291f;
  --ok:          #2f6b46;

  --radius:      6px;
  --radius-lg:   10px;
  --shadow:      0 1px 2px rgba(41,41,41,.06), 0 4px 14px rgba(74,109,167,.08);

  /* 제목용 명조. 본문은 기기 글꼴을 그대로 쓴다. */
  --font-head:   "Gowun Batang", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --font-body:   -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Malgun Gothic", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

/* hidden 속성이 붙은 것은 무조건 감춘다.
   브라우저 기본 규칙([hidden]{display:none})보다 우리가 쓴 규칙이 우선하므로,
   .badge{display:inline-block} 같은 것 하나만 있어도 hidden이 무력해진다.
   실제로 구역카드의 (빈집) 딱지가 전부 보이는 사고가 났다. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 1rem;
  font: 400 16px/1.65 var(--font-body);
  color: var(--fg);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* 펼친 성경을 아주 연하게 깔아둔다. 화면에 고정되어 스크롤해도 따라오지
   않고, 목록·표·카드는 모두 흰 바탕이라 그 위에서는 보이지 않는다.
   즉 글씨를 읽는 데 방해가 되지 않고 가장자리 여백에서만 은은하게 비친다.
   pointer-events: none 이라 누르는 것도 막지 않는다. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("bible.svg") center 42% / min(620px, 108vw) no-repeat;
  opacity: .07;
  pointer-events: none;
}

/* 인쇄할 때는 배경을 빼고, 대비를 높이는 설정을 켠 사람에게도 보이지 않게 한다. */
@media (prefers-contrast: more) {
  body::before { display: none; }
}

body.centered {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

/* ── 카드 (로그인·구역번호 입력 등) ── */
.card {
  width: 100%;
  max-width: 380px;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow);
}

/* ── 제목 ── */
h1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--fg);
  text-wrap: balance;
}
h2 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
h3 { font-family: var(--font-head); font-weight: 700; }

/* 카드 안 제목 아래에 파란 짧은 선. 이 화면이 어디 소속인지 알려주는
   유일한 표식이다. 무늬 대신 이것 하나만 쓴다. */
.card h1 { position: relative; padding-bottom: .85rem; }
.card h1::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 2px;
  background: var(--brand);
}

/* ── 입력 ── */
label { display: block; margin-bottom: 1.1rem; font-size: .92rem; color: var(--muted); }

input[type="text"], input[type="password"], input[type="date"],
input[type="time"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 46px;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-size: 1rem;
  font-family: inherit;
}
input::placeholder { color: var(--faint); }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  outline: none;
}

/* ── 단추 ── */
button {
  min-height: 46px;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
button:hover { background: var(--brand-deep); }
button:active { transform: translateY(1px); }

.card > button[type="submit"] { width: 100%; }

button.secondary {
  background: var(--bg);
  color: var(--brand-deep);
  border: 1px solid var(--line);
  font-weight: 500;
}
button.secondary:hover { background: var(--brand-tint); border-color: var(--brand-soft); }

button.danger { background: var(--danger); }
button.danger:hover { background: #8d211a; }

button.link-btn {
  min-height: 44px;
  padding: 0.25rem 0;
  background: none;
  color: var(--brand-deep);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: underline;
}
button.link-btn:hover { background: none; color: var(--fg); }

a { color: var(--brand-deep); }

/* ── 안내 문구 ── */
.error {
  color: var(--danger);
  font-size: .93rem;
}
.card > .error {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border-radius: var(--radius);
  background: #fdf2f1;
  border: 1px solid #f0d5d2;
}
.muted { color: var(--muted); }

/* ── 표 ── */
table { width: 100%; border-collapse: collapse; background: var(--bg); }
th, td { padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--line-soft); text-align: left; }
th {
  font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  color: var(--muted); background: var(--brand-tint);
  border-bottom: 1px solid var(--line);
}
tbody tr:hover { background: #fafbfd; }

/* ── 관리자 메뉴 ── */
nav.admin {
  margin: -1rem -1rem 1.5rem;
  padding: 0.9rem 1rem;
  background: var(--brand);
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  align-items: center;
}
nav.admin a {
  margin-right: 0;
  padding: .3rem 0;
  color: #eaf0fa;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
nav.admin a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
nav.admin .muted, nav.admin span { color: #c9d8ef; font-size: .88rem; }

/* ── 배지 ── */
.badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: 0.82rem;
  font-weight: 500;
}
.row-actions { padding-top: 0; border-bottom: 1px solid var(--line); }
.row-actions form { margin-right: 0.25rem; }

/* ── 달력 ── */
table.calendar { background: var(--bg); }
table.calendar td {
  height: 5.5rem;
  vertical-align: top;
  border: 1px solid var(--line-soft);
}
table.calendar .badge { display: block; margin-top: 0.15rem; }

/* ── 봉사 슬롯 ── */
.slot { padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft); }
.slot-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 1.5rem; }
.slot-form select, .slot-form input { width: auto; flex: 1 1 12rem; }
label.inline { display: inline; margin: 0 0.5rem; color: var(--fg); }

/* ─────────────────────────────────────────────
   구역카드의 주소 목록. 야외에서 걸어다니며 누르는 화면이라
   여기가 가장 중요하다.
   ───────────────────────────────────────────── */
.addresses {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.addresses li { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line-soft); }
.addresses li:last-child { border-bottom: 0; }

/* 건물 이름 줄. 집이 아니므로 확실히 달라 보여야 한다 —
   체크 칸이 없고, 바탕이 연한 파랑이고, 아래 테두리가 없다. */
.addresses .addr-heading {
  padding: 0.6rem 0.75rem 0.45rem;
  border-bottom: 0;
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.addresses .line { display: flex; align-items: center; gap: 0.6rem; }
.addresses label.check-tap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0; /* 전역 label 규칙의 margin-bottom: 1.1rem을 끈다 —
                안 끄면 .line이 align-items: center일 때 마진 박스(44+18=62px)
                기준으로 정렬되어 체크박스가 줄 위쪽으로 밀려 올라간다 */
  flex: none;
  border-radius: var(--radius);
}
.addresses label.check-tap:hover { background: var(--brand-tint); }
.addresses input.check {
  width: 28px; height: 28px; flex: none;
  accent-color: var(--brand);
  cursor: pointer;
}
.addresses .addr { flex: 1; }
.addresses em { color: var(--muted); font-style: normal; }
.addresses .dnc {
  flex: none; width: 44px;
  font-size: 0.72rem; font-weight: 700; line-height: 1.2;
  color: var(--danger); text-align: center;
}
.addresses li.vacant .addr { color: var(--faint); text-decoration: line-through; }
.addresses li.vacant { background: #fafafa; }
.addresses .retry { margin: 0.35rem 0 0; }
.addresses .memo { margin: 0.25rem 0 0 3.35rem; font-size: 0.88rem; color: var(--muted); }

#complete-form { margin: 2rem 0; }
#complete-form button { width: 100%; }

/* ── 전도인 명단의 이름 알약 ── */
.pill-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0 1.5rem; }
.pill-form input[type="text"] { margin-top: 0; }

.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1.5rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 0.92rem;
  background: var(--bg);
  box-shadow: 0 1px 1px rgba(41,41,41,.04);
}
.pill.muted { background: transparent; box-shadow: none; color: var(--faint); }
.pill-action { display: inline-flex; margin: 0; }
.pill-toggle, .pill-remove {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}
.pill-toggle { background: var(--brand-tint); color: var(--brand-deep); }
.pill-toggle:hover { background: var(--brand-soft); }
.pill-remove { background: #f3f3f3; color: var(--danger); }
.pill-remove:hover { background: #e9e9e9; }

.report { margin-bottom: 2rem; page-break-inside: avoid; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  button:active { transform: none; }
}

/* ── 인쇄 ── */
@media print {
  body::before { display: none; }
  nav.admin, .no-print, button { display: none !important; }
  body { padding: 0; font-size: 11pt; background: #fff; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  th { background: #f1f1f1 !important; -webkit-print-color-adjust: exact; }
  .addresses { border: 0; }
}

/* 구역카드 맨 위의 "지난번에 언제 마쳤는지". 진행 상황 바로 아래에 붙는다.
   봉사 나가서 제일 먼저 궁금해하는 정보라 눈에 띄되, 주소 목록보다
   앞서 보이면 안 되므로 연한 파랑 띠로만 구분한다. */
.last-done {
  margin: -.5rem 0 1rem;
  padding: .55rem .8rem;
  border-radius: var(--radius);
  background: var(--brand-tint);
  color: var(--brand-deep);
  font-size: .9rem;
}
.last-done strong { font-weight: 700; }

/* ─────────────────────────────────────────────
   배정 화면 — 위에 달력, 아래에 구역 메모지
   ───────────────────────────────────────────── */

.flash {
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border-radius: var(--radius);
  background: var(--brand-tint);
  border: 1px solid var(--brand-soft);
  color: var(--brand-deep);
}

.month-nav {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: .75rem; flex-wrap: wrap;
}
.month-nav strong { font-family: var(--font-head); font-size: 1.1rem; }

/* 날짜를 고르는 달력 */
/* 칸 아무 데나 눌러도 그 날짜가 골라지게 한다. td에 height:1px을 주면
   안쪽 a의 height:100%가 실제 칸 높이를 기준으로 계산된다 — 이게 없으면
   글자 부분만 눌리고 칸 아래쪽 빈 곳은 안 눌린다. */
table.calendar.pick td { height: 1px; padding: 0; }
table.calendar.pick td.pad { background: var(--line-soft); }
table.calendar.pick a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem;
  height: 100%; min-height: 56px; padding: .4rem .2rem;
  color: var(--fg); text-decoration: none;
}
table.calendar.pick a:hover { background: var(--brand-tint); }
table.calendar.pick .d { font-size: .95rem; }
table.calendar.pick .n {
  min-width: 22px; padding: 0 .3rem; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: .78rem; font-weight: 700;
}
table.calendar.pick td.today a { font-weight: 700; }
table.calendar.pick td.today .d {
  text-decoration: underline; text-underline-offset: 3px;
}
table.calendar.pick td.sel { background: var(--brand); }
table.calendar.pick td.sel a { color: #fff; }
table.calendar.pick td.sel a:hover { background: var(--brand-deep); }
table.calendar.pick td.sel .n { background: #fff; color: var(--brand-deep); }

/* 바퀴 표시줄 */
.cycle-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  margin: 1.5rem 0 1rem; padding: .8rem 1rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--bg);
}
.cycle-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* 번호대 묶음 */
.band {
  margin-bottom: .75rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--bg); overflow: hidden;
}
.band > summary {
  padding: .75rem 1rem; cursor: pointer;
  font-family: var(--font-head); font-weight: 700;
  display: flex; gap: .6rem; align-items: baseline;
}
.band > summary:hover { background: var(--brand-tint); }
.band > summary::marker { color: var(--brand); }
.band[open] > summary { border-bottom: 1px solid var(--line-soft); }

/* 메모지 */
.notes {
  display: grid; gap: .5rem; padding: .8rem 1rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.note {
  display: flex; flex-direction: column; gap: .1rem;
  margin: 0; padding: .5rem .55rem;
  min-height: 76px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
  cursor: pointer; position: relative;
  transition: none;
}
.note input { position: absolute; opacity: 0; width: 0; height: 0; }
.note .no { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.note .nm {
  font-size: .72rem; line-height: 1.3; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.note .meta {
  margin-top: auto; padding-top: .25rem;
  font-size: .7rem; color: var(--faint);
  display: flex; gap: .3rem; align-items: baseline;
}
.note .meta b { font-weight: 700; }

/* 상태 — 색만으로 구분하지 않는다. 테두리 굵기와 글자도 함께 다르다. */
.note.todo   { border-color: var(--fg); }                 /* 아직 안 나감: 진한 테두리 */
.note.active { border-color: var(--brand); background: var(--brand-tint); }
.note.active .meta b { color: var(--brand-deep); }
.note.done   { border-color: var(--line-soft); background: #fafafa; opacity: .72; }
.note.done .no, .note.done .nm { color: var(--faint); }

.note:hover { outline: 2px solid var(--brand-soft); outline-offset: 1px; }
.note:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 고른 것 */
.note:has(input:checked) {
  background: var(--brand); border-color: var(--brand-deep);
  opacity: 1;
}
.note:has(input:checked) .no,
.note:has(input:checked) .nm,
.note:has(input:checked) .meta,
.note:has(input:checked) .meta b { color: #fff; }
.note:has(input:checked)::after {
  content: "✓"; position: absolute; top: .3rem; right: .4rem;
  font-size: .9rem; font-weight: 700; color: #fff;
}

/* 이미 그날 올라간 것 */
.note.taken { cursor: not-allowed; border-style: dashed; opacity: .6; }
.note.taken:hover { outline: none; }

/* 아래 고정 막대 */
/* 화면 아래에 붙어 어디를 보고 있든 따라다닌다. 397장을 훑는 동안
   몇 장 골랐는지 계속 보이고 엄지로 바로 누를 수 있다.
   조상에 overflow-x: hidden이 있으면 sticky가 조용히 죽으니 주의. */
.assign-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 -4px 14px rgba(41,41,41,.1);
}
.assign-bar button { min-width: 10rem; }
#assign-form:not(.has-pick) .assign-bar button { opacity: .55; }

.hidden-form { display: none; }

@media (max-width: 480px) {
  .notes { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .note { min-height: 68px; }
  .assign-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .assign-bar button { width: 100%; }
}

/* ─────────────────────────────────────────────
   전도인 첫 화면 — 쓰시던 화면과 비슷하게
   ───────────────────────────────────────────── */

/* 이 화면에서는 성경 배경을 더 크고 또렷하게 보여준다.
   목록이 없어 여백이 넓은 화면이라 글씨를 가리지 않는다. */
body.entry::before {
  background-size: min(880px, 150vw);
  background-position: center 58%;
  opacity: .13;
}

.entry-stack {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: .8rem;
}

.entry-card {
  max-width: none;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  /* 배경이 은은히 비치게 — 쓰시던 화면이 반투명이다 */
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(41,41,41,.06), 0 14px 32px rgba(74,109,167,.14);
}

.brand {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  margin-bottom: 1.4rem;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: .35rem;
  color: var(--brand);
}
.brand h1 {
  margin: 0; padding: 0;
  font-family: var(--font-head);
  font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--brand);
}
.brand h1::after { display: none; }   /* 카드 제목 밑줄 규칙을 여기서는 끈다 */
.brand-sub {
  margin: 0; font-size: .84rem; color: var(--muted); letter-spacing: .01em;
}

/* 밑줄만 있는 입력칸 */
.line-field { margin-bottom: 1.1rem; }
.line-field input {
  margin-top: 0;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: 1.02rem;
}
.line-field input:focus {
  border-bottom: 2px solid var(--brand);
  outline: none;
}
.line-field input::placeholder { color: var(--faint); }

/* 완전히 둥근 시작 단추 */
button.round {
  width: 100%;
  border-radius: 999px;
  font-size: 1.05rem;
  letter-spacing: .02em;
}

/* 최근 방문한 카드 */
.recent-card {
  max-width: none;
  padding: .75rem 1rem .85rem;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(41,41,41,.05);
}
.recent-title {
  margin: 0 0 .4rem;
  font-size: .8rem; font-weight: 700; color: var(--brand-deep);
}
.recent-title::before { content: "🕘 "; }
.recent-item {
  width: 100%; min-height: 40px; padding: .3rem .1rem;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--fg); font-size: .95rem; font-weight: 500;
  text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-item:hover { background: var(--brand-tint); color: var(--brand-deep); }

/* 화면에는 안 보이지만 화면낭독기는 읽는 글자 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 첫 화면의 오늘 날짜 */
.today {
  margin: .5rem 0 0;
  font-size: .88rem; font-weight: 500;
  color: var(--brand-deep);
}

/* 전시대 봉사 참여 */
.cart-card {
  max-width: none;
  padding: .9rem 1rem 1rem;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 3px rgba(41,41,41,.05);
}
.cart-title {
  margin: 0 0 .6rem;
  font-family: var(--font-head);
  font-size: .95rem; font-weight: 700; color: var(--brand-deep);
}
.cart-flash {
  margin: 0 0 .7rem; padding: .5rem .7rem;
  border-radius: var(--radius);
  background: var(--brand-tint);
  font-size: .85rem; color: var(--brand-deep);
}
.cart-row {
  display: flex; flex-direction: column; gap: .45rem;
  padding: .55rem 0;
  border-top: 1px solid var(--line-soft);
}
.cart-row:first-of-type { border-top: 0; }
.cart-when { font-size: .95rem; font-weight: 500; }
.cart-when .badge { margin-left: .3rem; }
.cart-closed { margin: 0; font-size: .82rem; }
.cart-note { margin: .6rem 0 0; font-size: .78rem; }

/* ─────────────────────────────────────────────
   휴대폰
   이 시스템은 주로 휴대폰으로 쓴다. 전도인은 야외에서, 관리자도
   대개 휴대폰으로 배정한다.
   ───────────────────────────────────────────── */

/* 표가 넓으면 화면 전체가 옆으로 밀린다. 표만 따로 스크롤되게 한다.
   화면 본문은 절대 가로로 밀리면 안 된다. */
@media (max-width: 720px) {
  table:not(.calendar) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table:not(.calendar) td,
  table:not(.calendar) th { white-space: normal; }
}

/* html·body에 overflow-x: hidden을 주면 안 된다 — position: sticky가
   조용히 죽어서 올리기 막대가 화면에 안 붙는다. 넓은 표는 위에서 표 자체가
   스크롤되게 해뒀으므로 여기서 막을 필요가 없다. */
html, body { max-width: 100%; }

@media (max-width: 720px) {
  body { padding: .75rem; }

  /* 관리자 메뉴가 여러 줄로 접힐 때 손가락으로 누를 만한 높이를 지킨다 */
  nav.admin {
    margin: -.75rem -.75rem 1rem;
    padding: .6rem .75rem;
    gap: .1rem .9rem;
  }
  nav.admin a { padding: .45rem 0; font-size: .92rem; }

  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.05rem; }

  /* 달력 칸이 좁아지므로 글자를 줄이되 누를 높이는 유지한다 */
  table.calendar.pick a { min-height: 52px; padding: .3rem .1rem; }
  table.calendar.pick .d { font-size: .88rem; }
  table.calendar.pick .n { min-width: 19px; font-size: .72rem; }
  table.calendar th { font-size: .78rem; padding: .35rem .2rem; }

  /* 바퀴 표시줄이 좁은 화면에서 두 줄로 */
  .cycle-bar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .cycle-actions button { flex: 1; }

  /* 줄마다 붙는 단추들이 화면 밖으로 나가지 않게 */
  .slot-form { flex-direction: column; }
  .slot-form select, .slot-form input { width: 100%; flex: none; }
  .row-actions form { display: inline-block; margin-bottom: .25rem; }
}



/* 손가락으로 누르는 것에 회색 깜빡임이 뜨지 않게 */
a, button, label.note, label.check-tap {
  -webkit-tap-highlight-color: transparent;
}

/* 구역 초기화 — 잘못 누르면 397개 구역의 색이 한꺼번에 되돌아간다.
   접어두고, 열어도 확인 글자를 쳐야만 단추가 눌린다. */
.danger-zone {
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  overflow: hidden;
}
.danger-zone > summary {
  padding: .7rem 1rem;
  cursor: pointer;
  font-size: .9rem;
  color: var(--muted);
}
.danger-zone > summary:hover { background: #fdf2f1; color: var(--danger); }
.danger-zone[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--danger);
  font-weight: 700;
}
.danger-body { padding: 1rem; }
.danger-body p { margin: 0 0 .7rem; font-size: .9rem; }
.danger-body .line-field { margin-bottom: .8rem; }
.danger-body .line-field span { font-size: .85rem; color: var(--muted); }
.danger-body .line-field b { color: var(--danger); }
.danger-body button[disabled] { opacity: .45; cursor: not-allowed; }

/* 구역카드에서 그 자리에 고치기 — 상호명과 메모 */
.addresses .edit-btn {
  flex: none;
  width: 40px; min-height: 40px; padding: 0;
  background: none; border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--muted); font-size: 1rem; line-height: 1;
}
.addresses .edit-btn:hover { background: var(--brand-tint); color: var(--brand-deep); }

.edit-panel {
  margin: .5rem 0 .2rem 3.35rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--brand-tint);
}
.edit-panel label { margin-bottom: .6rem; font-size: .82rem; }
.edit-panel input { min-height: 42px; }
.edit-actions { display: flex; gap: .5rem; }
.edit-actions button { flex: 1; min-height: 42px; }

@media (max-width: 480px) {
  .edit-panel { margin-left: 0; }
}

/* 메모 관리 */
.memo-row {
  margin-bottom: .6rem; padding: .7rem .9rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--bg);
}
.memo-where { margin: 0 0 .5rem; font-size: .9rem; }
.memo-where em { color: var(--muted); font-style: normal; }
.memo-edit { display: flex; gap: .5rem; flex-wrap: wrap; }
.memo-edit input { flex: 1 1 14rem; margin-top: 0; }
.memo-edit button { flex: none; }

@media (max-width: 480px) {
  .memo-edit input { flex: 1 1 100%; }
  .memo-edit button { flex: 1; }
}

.memo-list { padding: .8rem 1rem 1rem; }

/* 봉사 종류 관리 */
.type-inline { display: inline-flex; gap: .35rem; align-items: center; margin: 0 .25rem .25rem 0; }
.type-inline input[type="text"] { width: auto; min-width: 7rem; margin-top: 0; }
.type-inline select { width: auto; margin-top: 0; }
.type-inline button { min-height: 38px; padding: .3rem .6rem; font-size: .85rem; }
.type-actions { white-space: nowrap; }

/* ─────────────────────────────────────────────
   주소 관리 — 여러 줄 골라 아파트로 바꾸기
   ───────────────────────────────────────────── */

/* 배정 막대와 같은 방식이다. 한 구역에 200줄이 넘는 카드가 있어, 아래까지
   훑는 동안 몇 줄 골랐는지 계속 보이고 엄지로 바로 누를 수 있어야 한다.
   조상에 overflow-x: hidden이 있으면 sticky가 조용히 죽으니 주의. */
.bulk-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .5rem 1rem; margin: 1rem 0;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 -4px 14px rgba(41, 41, 41, .1);
}
.bulk-bar #bulk-count { font-weight: 600; }
body:not(.has-bulk-pick) .bulk-bar button { opacity: .55; }

@media (max-width: 480px) {
  .bulk-bar { flex-direction: column; align-items: stretch; }
  .bulk-bar button { width: 100%; }
}

/* ═════════════════════════════════════════════
   관리자 화면의 만듦새

   색은 그대로 둔다. 달라지는 것은 '자리'다 — 본문에 폭과 껍데기를 주고,
   표와 폼을 흰 판 위에 올리고, 여백을 하나의 자로 통일한다.

   개별 화면 파일은 건드리지 않는다. 껍데기는 _layout.php가 열고 닫고,
   나머지는 전부 여기서 모양만 입힌다.
   ═════════════════════════════════════════════ */

:root {
  /* 여백 자. 4px 배수 하나로 통일한다 — 화면마다 1rem, 1.1rem, .85rem이
     섞여 있으면 눈이 리듬을 못 잡는다. */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  --shell-max: 1120px;
}

/* ── 껍데기 ── */

/* 여백은 껍데기가 맡는다. body가 들고 있으면 상단 띠를 끝까지 못 늘린다. */
body.admin-page { padding: 0; }

.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

/* ── 상단 띠 ── */

/* 띠는 화면 끝까지 가되 안의 글자는 본문과 같은 선에서 시작한다.
   가운데 정렬된 본문 옆에서 메뉴만 왼쪽 끝에 붙어 있으면 어긋나 보인다. */
body.admin-page nav.admin {
  margin: 0;
  padding: var(--sp-3) max(var(--sp-4), calc((100% - var(--shell-max)) / 2));
  gap: var(--sp-2) var(--sp-5);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
}

.admin-brand {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}

.admin-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  align-items: center;
}

/* 이름과 로그아웃은 오른쪽 끝으로 밀어 메뉴와 섞이지 않게 한다. */
.admin-who {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-left: auto;
}

/* 지금 보고 있는 화면. 색만으로 구분하지 않고 밑줄도 함께 준다. */
nav.admin a[aria-current="page"] {
  color: #fff;
  font-weight: 700;
  border-bottom-color: #fff;
}

/* ── 제목 ── */

/* 카드 안에만 있던 파란 짧은 선을 관리자 화면 제목에도 붙인다. */
.shell > h1 {
  position: relative;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
}
.shell > h1::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 2px;
  background: var(--brand);
}

.shell h2 {
  margin: var(--sp-6) 0 var(--sp-3);
}

/* ── 표를 흰 판 위로 ── */

/* 바탕이 옅은 파랑이고 표가 흰색인데 테두리가 없어 경계가 흐릿했다.
   달력 화면의 .band, .cycle-bar가 쓰던 판 모양을 표에도 그대로 준다.

   overflow는 건드리지 않는다 — 휴대폰에서 넓은 표가 따로 옆으로
   스크롤되는 규칙이 위에 있고, 여기서 overflow를 주면 그게 죽는다.
   모서리는 overflow 대신 구석 칸을 직접 둥글려 깎는다. */
.shell table:not(.calendar) {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  /* 구역번호가 세로로 자릿수를 맞춰 늘어서게 한다. */
  font-variant-numeric: tabular-nums;
}

.shell table:not(.calendar) th { border-bottom: 1px solid var(--line-soft); }

.shell table:not(.calendar) thead tr:first-child th:first-child {
  border-top-left-radius: var(--radius-lg);
}
.shell table:not(.calendar) thead tr:first-child th:last-child {
  border-top-right-radius: var(--radius-lg);
}
/* 마지막 줄의 밑선은 판의 테두리와 겹치므로 지운다. */
.shell table:not(.calendar) tbody tr:last-child > * { border-bottom: 0; }

/* ── 폼 카드 ── */

/* .card의 380px는 로그인 화면을 위한 값이다. 껍데기 안에서는 칸이 일곱
   개인 폼도 그 폭에 갇혀 답답했다. 넓히되 한 줄이 너무 길어지지 않게
   읽기 좋은 폭에서 멈춘다. 칸은 그대로 세로로 쌓는다 — 주로 휴대폰에서
   쓰는 화면이라 두 열로 나누면 오히려 좁아진다. */
.shell .card {
  max-width: 640px;
  margin-bottom: var(--sp-5);
  padding: var(--sp-5);
}

/* meetings.php의 <table class="card">. 표는 판 규칙을 이미 받았으므로
   카드의 폭 제한과 안쪽 여백만 되돌린다. */
.shell table.card {
  max-width: none;
  padding: 0;
}

.shell .card > label:last-of-type { margin-bottom: var(--sp-4); }

/* ── 좁은 화면 ── */

@media (max-width: 720px) {
  .shell { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  body.admin-page nav.admin { padding: var(--sp-3) var(--sp-3); }
  .admin-who { margin-left: 0; }

  /* 넓은 표는 표 자체가 옆으로 스크롤된다. 위 규칙을 다시 못 박아 둔다 —
     판 모양을 주면서 실수로 덮어쓰기 쉬운 부분이다. */
  .shell table:not(.calendar) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 인쇄 ── */

/* 종이에는 껍데기도 판도 필요 없다. 회색 상자만 찍힌다. */
@media print {
  .shell { max-width: none; padding: 0; }
  .shell table:not(.calendar) {
    display: table;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .shell .card { max-width: none; border: 0; box-shadow: none; padding: 0; }
  .shell > h1::after { display: none; }
}

/* ── 표 한 줄의 동작 단추 ── */

/* 단추의 min-height 46px는 야외에서 장갑 낀 손으로 누르는 전도인 화면을
   위한 값이다. 관리자 표에서는 그 값이 한 줄을 67px로 부풀린다 —
   글자만 있으면 47px면 되는 줄이다. 397줄이면 화면 열 개 분량이 더 늘어난다.

   여기서만 34px로 줄인다. 대신 좌우 간격을 넉넉히 둬서 손가락이 옆 단추를
   잘못 누르지 않게 한다. 다른 화면의 단추는 그대로 46px다. */
.shell table button {
  min-height: 34px;
  padding: .25rem .7rem;
  font-size: .85rem;
}

/* 칸 여백도 글자 크기에 맞춘다. 단추가 34px이므로 줄 높이는 여기서 정해진다. */
.shell table:not(.calendar) th,
.shell table:not(.calendar) td {
  padding: var(--sp-2) var(--sp-2);
  vertical-align: middle;
}

/* 수정 / 완료 처리 / 중지가 한 줄에 가지런히 선다.
   전에는 '수정'만 맨 글자 링크라 글자 밑선에 붙고 나머지는 덩어리라
   높이가 어긋났다. 셋을 같은 모양·같은 기준선으로 맞춘다.

   td에 display:flex를 주지 않는다 — 칸이 표 구조에서 빠져나가 colspan이
   깨진다. 폼에도 style="display:inline"이 박혀 있어 어차피 CSS로 못 바꾼다.
   그래서 안쪽 요소를 inline-block으로 세우고 기준선만 맞춘다. */
.row-tools { white-space: nowrap; }
.row-tools > a,
.row-tools button,
.shell .row-actions button {
  vertical-align: middle;
  margin: 2px 4px 2px 0;
}

/* '수정'은 링크지만 옆 단추와 같은 알약으로 보이게 한다. 실제로는 여전히
   링크라 새 탭으로 열기 같은 것이 그대로 된다. */
.row-tools > a {
  display: inline-block;
  min-height: 34px;
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--brand-deep);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}
.row-tools > a:hover {
  background: var(--brand-tint);
  border-color: var(--brand-soft);
}

/* 주소 관리 화면 아래쪽 동작 줄. 위 칸에 붙어 있어야 같은 주소의 것으로
   읽히므로 윗여백은 그대로 0으로 둔다. */
.shell table .row-actions {
  padding-top: 0;
  white-space: normal;
}

/* ── 메모에서 그 주소 줄로 건너뛰기 ── */

/* 메모 탭에서 주소를 누르면 #a123 으로 들어온다. 200줄이 넘는 표에서
   어느 줄인지 눈으로 찾기 어려우므로 그 줄을 잠깐 밝힌다.

   배경은 tr이 아니라 td에 준다 — tr에 준 배경은 td의 배경에 가려진다. */
.shell table tr:target > td {
  background: #fff6d8;
  box-shadow: inset 0 0 0 1px #e8cf7a;
}

/* 처음 몇 초만 진하게 밝혔다가 은은하게 남는다. 계속 노란 줄이 남아
   있으면 다음에 다른 줄을 찾을 때 헷갈린다. */
@keyframes row-found {
  from { background: #ffe9a3; }
  to   { background: #fff6d8; }
}
.shell table tr:target > td { animation: row-found 1.6s ease-out; }

/* 움직임을 줄여 달라고 설정한 사람에게는 애니메이션 없이 색만 준다. */
@media (prefers-reduced-motion: reduce) {
  .shell table tr:target > td { animation: none; }
}

/* 메모 탭의 주소 줄이 이제 링크다. 누를 수 있어 보이되 목록이
   파란 글씨로 뒤덮이지 않게 본문 색을 그대로 쓰고 밑줄만 옅게 둔다. */
.memo-where a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--brand-soft);
  text-underline-offset: 3px;
}
.memo-where a:hover {
  color: var(--brand-deep);
  text-decoration-color: var(--brand);
}

/* ── 구역카드의 메모 ── */

/* 메모는 문 앞에서 벨을 누르기 직전에 읽는 글이다. '벨 누르지 말것',
   '개조심' 같은 것이라 놓치면 안 된다. 그런데 회색 작은 글씨라 야외
   햇빛 아래에서 주소에 묻혔다.

   연한 미색 바탕에 왼쪽 띠를 둬서 눈에 걸리게 하고, 글자색을 본문에
   가깝게 올려 읽히게 한다. 색은 은은하게 — 방문금지처럼 강한 표시와
   경쟁하면 정작 중요한 것이 안 보인다.

   `.muted`가 함께 붙어 있어 색을 여기서 다시 정해야 한다. */
.addresses .memo {
  margin: .35rem 0 .1rem 3.35rem;
  padding: .4rem .6rem;
  /* 3:1을 넘겨야 띠가 실제로 눈에 걸린다. 은은한 색을 고르다 보면
     띠가 바탕에 묻혀 아무 역할도 못 하기 쉽다. */
  border-left: 3px solid #a67f1a;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fdf6e3;
  color: #4a3f22;
  font-size: .92rem;
  line-height: 1.5;
}

/* 인쇄할 때도 배경이 나와야 메모가 구분된다. 아주 옅어서 잉크는 거의 안 든다. */
@media print {
  .addresses .memo {
    background: #f7f2e4 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* 대비를 높여 달라고 설정한 사람에게는 바탕 대신 테두리로 구분한다. */
@media (prefers-contrast: more) {
  .addresses .memo {
    background: transparent;
    border: 1px solid var(--fg);
    border-left-width: 3px;
    color: var(--fg);
  }
}

/* ── 방문금지 목록 ── */

/* 요약 줄 오른쪽에 붙는 '구역카드 열기'. 접기/펴기 화살표와 섞이지 않게
   오른쪽 끝으로 밀고, 눌러야 할 것처럼 보이게 테두리를 준다. */
.band > summary .open-card {
  margin-left: auto;
  padding: .2rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--brand-deep);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.band > summary .open-card:hover {
  background: var(--brand-tint);
  border-color: var(--brand-soft);
}

/* 방문금지 집에 달린 메모. 구역카드에서와 같은 미색으로 맞춘다 —
   같은 글이 화면마다 다른 옷을 입으면 다른 것처럼 읽힌다. */
.dnc-memo {
  margin: 0 0 .4rem;
  padding: .35rem .6rem;
  border-left: 3px solid #a67f1a;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fdf6e3;
  color: #4a3f22;
  font-size: .9rem;
}

.dnc-when { margin: 0 0 .5rem; font-size: .88rem; color: var(--muted); }
.dnc-when strong { color: var(--fg); font-variant-numeric: tabular-nums; }

/* 한 번도 다시 안 가본 집. 목록 맨 위에 오는 것들이라 눈에 걸려야 한다.
   색만으로 구분하지 않고 글자로도 말한다. */
.badge.dnc-never {
  background: #fbe9e7;
  color: #8d211a;
  font-weight: 700;
}

/* ── 구역카드의 방문금지 표시 ── */

/* 카드에서 가장 놓치면 안 되는 표시인데 11.5px로 제일 작은 글씨였다.
   연로하신 분들이 야외에서 보는 화면이라 이것부터 읽혀야 한다.
   체크칸 자리(44px)를 그대로 쓰되 글자를 키우고 배경을 준다. */
.addresses .dnc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: .2rem .3rem;
  border-radius: var(--radius);
  background: #fbe9e7;
  font-size: .82rem;
  line-height: 1.15;
}

/* ═════════════════════════════════════════════
   움직임

   두 곳에만 넣는다 — 전도인 첫 화면이 열릴 때, 관리자 메뉴를 짚을 때.
   반복해서 움직이는 것은 없다. 야외에서 급히 여는 화면이라 기다리게
   하면 안 되고, 계속 움직이면 글자가 안 읽힌다.

   움직임을 줄여 달라고 설정한 분에게는 맨 아래에서 전부 끈다.
   ═════════════════════════════════════════════ */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 전도인 첫 화면의 카드가 살짝 떠오르며 나타난다. 한 번뿐이다. */
body.centered .card {
  animation: rise-in .24s ease-out both;
}

/* 입력칸을 누르면 밑줄이 가운데에서 양옆으로 그려진다.
   원래는 눌리는 순간 밑줄이 1px에서 2px로 툭 두꺼워져 글자가 흔들렸다.
   밑줄은 1px 그대로 두고, 그 위에 파란 선을 따로 깔아 늘린다.

   가운데에서 퍼지는 것은 이 화면의 글자가 가운데 정렬이기 때문이다. */
.line-field { position: relative; }
.line-field::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform .22s ease-out;
}
.line-field:focus-within::after { transform: scaleX(1); }

/* 굵어지며 흔들리던 것을 끈다. 위의 선이 그 일을 대신한다. */
.line-field input:focus { border-bottom: 1px solid var(--line); }

/* 단추를 누를 때 살짝 들어가는 느낌. 이미 transform이 있으므로 시간만 준다. */
button { transition: background-color .15s ease, transform .08s ease; }

/* 관리자 메뉴 — 밑줄이 툭 나타나던 것을 왼쪽에서 그려지게 바꾼다. */
nav.admin a {
  position: relative;
  border-bottom-color: transparent;
  transition: color .15s ease;
}
nav.admin a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease-out;
}
nav.admin a:hover::after { transform: scaleX(1); }
nav.admin a[aria-current="page"]::after { transform: scaleX(1); }
/* 위에서 border-bottom으로 그리던 것을 이제 ::after가 맡는다. */
nav.admin a:hover { border-bottom-color: transparent; }
nav.admin a[aria-current="page"] { border-bottom-color: transparent; }

/* 화면을 옮길 때 본문이 아주 살짝 떠오른다. 관리자 화면에서만. */
body.admin-page .shell {
  animation: rise-in .2s ease-out both;
}

/* 움직임을 줄여 달라고 설정한 분에게는 전부 끈다.
   기능은 그대로고 움직임만 사라진다. */
@media (prefers-reduced-motion: reduce) {
  body.centered .card,
  body.admin-page .shell {
    animation: none;
  }
  .line-field::after,
  nav.admin a::after {
    transition: none;
  }
  button { transition: none; }
}

/* ── 구역을 통째로 아파트로 바꾸기 ── */

.apt-hint {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--brand-soft); border-radius: var(--radius-lg);
  background: var(--brand-tint);
  font-size: .95rem;
}

.apt-warn {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid #a67f1a; border-radius: 0 var(--radius) var(--radius) 0;
  background: #fdf6e3; color: #4a3f22;
}

/* 동을 못 찾은 줄. 바꾼 뒤 직접 넣어야 하므로 미리보기에서 눈에 띄어야 한다. */
.shell table tr.apt-manual > td { background: #fdf6e3; }

/* 아직 안 바꾼 아파트가 있는 구역 표시. 눌러야 할 것이라 링크로 보이게
   하되, 구역 이름을 가리지 않게 작고 조용히 둔다. */
.badge.apt-badge {
  margin-left: var(--sp-2);
  background: #fdf6e3;
  color: #6b5410;
  border: 1px solid #e0c274;
  text-decoration: none;
  white-space: nowrap;
}
.badge.apt-badge:hover { background: #f7ebc9; border-color: #a67f1a; }

/* ═════════════════════════════════════════════
   사용 안내서 (전도인용 help.php · 장로용 admin/help.php)
   ═════════════════════════════════════════════ */

/* 첫 화면 아래의 안내 링크. 눈에 띄되 시작 단추와 다투지 않게 조용히 둔다. */
.entry-help { margin: var(--sp-5) 0 0; text-align: center; font-size: .92rem; }
.entry-help a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.entry-help a:hover { color: var(--brand-deep); }

/* ── 전도인용 안내서 ── */

/* 연로하신 분들이 보실 글이라 본문을 키운다. 첫 화면과 달리
   글을 읽는 화면이므로 성경 배경은 깔지 않는다. */
body.guide-page { padding: var(--sp-5) var(--sp-4) var(--sp-6); font-size: 18px; }
body.guide-page::before { display: none; }

.guide { max-width: 38rem; margin: 0 auto; }
.guide-back { margin: 0 0 var(--sp-4); font-size: .92rem; }
.guide-head { margin-bottom: var(--sp-5); }
.guide-eyebrow { margin: 0 0 var(--sp-2); font-size: .85rem; font-weight: 600; letter-spacing: .1em; color: var(--brand-deep); }
.guide-head h1 { margin: 0 0 var(--sp-3); font-size: 2rem; line-height: 1.3; }
.guide-head p { margin: 0; }

.guide-addr {
  margin: 0 0 var(--sp-5); padding: var(--sp-4);
  border: 2px solid var(--brand); border-radius: var(--radius-lg);
  background: var(--bg); text-align: center;
}
.guide-addr .k { display: block; font-size: .88rem; font-weight: 600; color: var(--brand-deep); }
.guide-addr .v {
  display: block; margin-top: .25rem; word-break: break-all;
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; line-height: 1.4;
}
.guide-addr .tip { display: block; margin-top: var(--sp-2); font-size: .9rem; color: var(--muted); }

.guide-step {
  margin-bottom: var(--sp-4); padding: var(--sp-5);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--bg);
}
.guide-step h2 {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-3); font-size: 1.3rem;
}
.guide-step h2 .n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
}
.guide-step p { margin: 0 0 var(--sp-3); }
.guide-step p:last-child { margin-bottom: 0; }

/* 실제 화면이 어떻게 생겼는지 흉내 낸 조각. 글로만 설명하면 못 찾으신다. */
.guide-mock {
  margin: var(--sp-3) 0; padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--page); font-size: .95rem;
}
.guide-mock .row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: .35rem 0; border-bottom: 1px solid var(--line-soft);
}
.guide-mock .row:last-child { border-bottom: 0; }
.guide-mock em { color: var(--muted); font-style: normal; }

.fake-box {
  flex: none; width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--brand); border-radius: 4px; background: var(--bg);
}
.fake-box.on { background: var(--brand); position: relative; }
.fake-box.on::after {
  content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; font-weight: 700;
}
.fake-pen {
  flex: none; margin-left: auto; padding: .1rem .5rem;
  border: 1px solid var(--line); border-radius: 6px; color: var(--brand-deep);
}
.fake-memo {
  margin: .3rem 0 0 2.2rem; padding: .35rem .6rem;
  border-left: 3px solid #a67f1a; border-radius: 0 var(--radius) var(--radius) 0;
  background: #fdf6e3; color: #4a3f22; font-size: .9rem;
}
.fake-dnc {
  flex: none; padding: .15rem .4rem; border-radius: var(--radius);
  background: #fbe9e7; color: var(--danger); font-size: .82rem; font-weight: 700;
}
.fake-btn {
  display: inline-block; padding: .45rem 1.1rem; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 700; font-size: .95rem;
}
.fake-btn.wide { display: block; width: 100%; text-align: center; }
.fake-btn.right { margin-left: auto; }
.fake-btn.danger { background: var(--danger); }

.guide-help {
  margin-top: var(--sp-5); padding: var(--sp-5);
  border-left: 4px solid #a67f1a; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: #fdf6e3; color: #4a3f22;
}
.guide-help h2 { margin: 0 0 var(--sp-3); font-size: 1.2rem; color: inherit; }
.guide-help dl { margin: 0; }
.guide-help dt { margin-top: var(--sp-3); font-weight: 700; }
.guide-help dd { margin: .2rem 0 0; }

.guide-foot {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--faint); text-align: center;
}

/* ── 장로용 안내서 (관리자 껍데기 안) ── */

.guide-toc {
  margin-bottom: var(--sp-6); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--bg);
}
.guide-toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: var(--sp-5); }
.guide-toc li { margin-bottom: .15rem; }
@media (max-width: 560px) { .guide-toc ol { columns: 1; } }

.shell section { margin-bottom: var(--sp-6); scroll-margin-top: var(--sp-4); }
.shell section ul,
.shell section ol { max-width: 36rem; }
.shell section li { margin-bottom: .3rem; }

.guide-warn, .guide-stop {
  max-width: 36rem; margin: 0 0 var(--sp-4); padding: var(--sp-4);
  border-left: 3px solid #a67f1a; border-radius: 0 var(--radius) var(--radius) 0;
  background: #fdf6e3; color: #4a3f22;
}
.guide-stop { border-left-color: var(--danger); background: #fbe9e7; color: #8d211a; }

@media print {
  body.guide-page { padding: 0; font-size: 12pt; }
  .guide-step, .guide-addr, .guide-help { break-inside: avoid; }
  .shell section { break-inside: avoid; }
}