/* ==========================================================
   남경기노회 — 관리자 편집 모드
   모든 페이지에 로드되며, body.is-admin일 때만 편집 UI가 보입니다.
   헤더의 "관리자" 버튼으로 켜고, 로그아웃/보기 화면으로 끕니다.
   ========================================================== */

/* 관리자 모드 게이트 */
/* 로그인 전: 로그인 버튼만 보임 */
body:not(.is-login) .btn-admin-toggle,
body:not(.is-login) .btn-admin-page,
body:not(.is-login) .btn-login--exit,
body:not(.is-login) .sheet-mode,
body:not(.is-login) .sheet-admin,
body:not(.is-login) .sheet-logout { display: none !important; }

/* 로그인 후: 로그인 버튼 숨김 */
body.is-login .btn-login--user,
body.is-login .sheet-login { display: none !important; }

/* 수정모드가 아닐 때: 편집 UI 숨김 */
body:not(.is-admin) .edit-btn,
body:not(.is-admin) .admin-bar { display: none !important; }

body:not(.is-admin) .edit-outline { display: none; }

/* 헤더의 수정모드 토글 버튼 — 꺼짐: 금색 / 켜짐: 수정 버튼과 같은 레드 그라데이션 */
.btn-admin-toggle {
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 100px;
  background: var(--amber);
  box-shadow: 0 6px 18px rgba(26, 29, 33, 0.25);
  transition: transform 0.25s, filter 0.25s, background 0.25s, box-shadow 0.25s;
}

.btn-admin-toggle:hover { transform: translateY(-2px); filter: brightness(1.06); }

body.is-admin .btn-admin-toggle {
  background: linear-gradient(135deg, #ff6a3d, #ff4d2e 55%, #e6301f);
  box-shadow:
    0 0 0 3px color-mix(in srgb, #ff4d2e 30%, transparent),
    0 6px 18px rgba(26, 29, 33, 0.3);
}

/* 헤더의 사이트 관리자 페이지 이동 버튼: 로그인 버튼과 같은 스타일(btn-login)을 쓴다 */

/* 헤더 우측 버튼 높이 통일 */
.header__util .btn-login,
.header__util .btn-admin-toggle {
  height: 42px;
  display: inline-flex;
  align-items: center;
}

/* 전체 메뉴 하단 버튼
   비로그인: [로그인(전체 폭)]
   로그인:   [수정모드(전체 폭)] / [관리자] [로그아웃] */
.sheet__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sheet__foot .btn-login--wide {
  padding: 14px;
  border-radius: 10px;
  font-size: 18px;
}

.sheet-mode {
  grid-column: 1 / -1;
  background: var(--amber);
}

body.is-admin .sheet-mode {
  background: linear-gradient(135deg, #ff6a3d, #ff4d2e 55%, #e6301f);
}

.sheet-login { grid-column: 1 / -1; }

/* 모바일: 상단 버튼은 전체 메뉴 안으로 (배지만 남김) */
@media (max-width: 640px) {
  .header__util .btn-login,
  .header__util .btn-admin-toggle { display: none !important; }
}

/* 하단 편집 모드 바 */
.admin-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: min(92%, 760px);
  padding: 14px 16px 14px 24px;
  background: var(--ink);
  color: #fff;
  border-radius: 100px;
  box-shadow: 0 16px 40px rgba(26, 29, 33, 0.35);
}

.admin-bar__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--amber);
}

.admin-bar__label svg { width: 18px; height: 18px; }

.admin-bar__hint {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

.admin-bar__exit {
  flex-shrink: 0;
  padding: 10px 20px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.25s;
  white-space: nowrap;
}

.admin-bar__exit:hover { background: rgba(255, 255, 255, 0.26); }

/* ----------------------------------------------------------
   편집 가능 영역 + 수정 버튼 (레이더 효과)
   ---------------------------------------------------------- */

.editable { position: relative; }

/* 편집 가능 영역 : 골드→레드 그라데이션 점선 (SVG — 모서리 곡선을 따라 돈다)
   SVG는 edit.js가 각 .editable에 주입 */
.edit-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
  overflow: visible;
  transition: filter 0.3s;
}

.edit-outline rect {
  x: 10px;
  y: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  rx: 24px;
  fill: none;
  stroke-width: 5;
  stroke-dasharray: 12 12;
  /* 점선이 곡선을 포함한 테두리 전체를 따라 시계방향으로 행진 */
  animation: outline-march 1.8s linear infinite;
}

@keyframes outline-march {
  to { stroke-dashoffset: -24; }
}

.editable:hover .edit-outline {
  filter: brightness(1.1) drop-shadow(0 0 18px rgba(255, 77, 46, 0.4));
}

.edit-btn {
  --edit-accent: #ff4d2e;
  /* 항상 점선 박스 우측 상단. 스크롤하면 edit.js가 top을 조정해
     박스 안에서만 따라 내려온다 (followEditBtns) */
  position: absolute;
  top: 34px;
  right: 5%;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 46px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  border-radius: 100px;
  background: linear-gradient(135deg, #ff6a3d, var(--edit-accent) 55%, #e6301f);
  color: #fff;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--edit-accent) 35%, transparent),
    0 0 34px color-mix(in srgb, var(--edit-accent) 65%, transparent),
    0 14px 34px rgba(26, 29, 33, 0.4);
  transition: transform 0.25s var(--ease), filter 0.25s, opacity 0.25s;
}

.edit-btn:hover {
  transform: translateY(-3px) scale(1.06);
  filter: brightness(1.08);
}

.edit-btn svg { width: 27px; height: 27px; }

.edit-btn--hero { top: calc(var(--header-h) + 30px); }

/* 편집 중인 영역의 버튼은 잠시 잠금 */
.is-editing-section .edit-btn {
  opacity: 0.35;
  pointer-events: none;
}

/* 헤더용 소형 편집 버튼 */
.edit-btn--mini {
  position: static;
  padding: 10px 20px;
  font-size: 15.5px;
  font-weight: 800;
  gap: 8px;
  border-width: 2px;
  flex-shrink: 0;
  box-shadow:
    0 0 0 4px color-mix(in srgb, #ff4d2e 30%, transparent),
    0 6px 18px rgba(26, 29, 33, 0.3);
}

.edit-btn--mini svg { width: 17px; height: 17px; }

/* ----------------------------------------------------------
   플로팅 편집 패널 (드래그 이동 · 크기 조절)
   ---------------------------------------------------------- */

.edit-panel {
  position: fixed;
  top: calc(var(--header-h) + 24px);
  right: 24px;
  z-index: 260;
  display: flex;
  flex-direction: column;
  width: min(500px, calc(100vw - 40px));
  height: auto;
  min-width: 360px;
  min-height: 280px;
  /* 크기 조절 한계는 화면 크기까지 — 내용이 잘 보이도록 자유롭게 키울 수 있게 */
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background: #fff;
  color: var(--ink);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(26, 29, 33, 0.4), 0 0 0 1px var(--line);
  resize: both;
  overflow: hidden;
}

.edit-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 18px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  border-radius: 18px 18px 0 0;
  cursor: move;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}

.edit-panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
}

.edit-panel__title .cross { font-size: 19px; }

.edit-panel__drag-hint {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--slate);
  white-space: nowrap;
}

.edit-panel__close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--slate);
  transition: background 0.2s, color 0.2s;
}

.edit-panel__close:hover { background: rgba(94, 107, 122, 0.14); color: var(--ink); }
.edit-panel__close svg { width: 18px; height: 18px; }

.edit-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 26px;
}

.edit-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0;
}

.edit-panel__live {
  font-size: 13.5px;
  color: var(--slate);
}

.edit-panel__btns { display: flex; gap: 10px; }

/* 크기 조절 손잡이 표시 */
.edit-panel::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 50%, var(--slate) 50% 56%, transparent 56% 68%, var(--slate) 68% 74%, transparent 74% 86%, var(--slate) 86% 92%, transparent 92%);
  opacity: 0.6;
  border-bottom-right-radius: 12px;
}

/* 왼쪽 아래 크기 조절 손잡이 */
.edit-panel__resize-l {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  cursor: sw-resize;
  z-index: 5;
  touch-action: none;
}

.edit-panel__resize-l::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(225deg, transparent 0 50%, var(--slate) 50% 56%, transparent 56% 68%, var(--slate) 68% 74%, transparent 74% 86%, var(--slate) 86% 92%, transparent 92%);
  opacity: 0.6;
  border-bottom-left-radius: 12px;
}

/* ----------------------------------------------------------
   폼 요소
   ---------------------------------------------------------- */

.edit-field { margin-bottom: 20px; }

.edit-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--slate);
}

.edit-field input[type="text"],
.edit-field input[type="url"],
.edit-field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 17.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s, background 0.2s;
}

.edit-field input:focus,
.edit-field textarea:focus {
  outline: none;
  border-color: var(--deep);
  background: #fff;
}

.edit-field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

.edit-field__hint { margin-top: 6px; font-size: 13.5px; color: var(--slate); }

/* 배너 이미지 행 */
.edit-imgrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  margin-bottom: 10px;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.edit-imgrow.is-dragging { opacity: 0.45; box-shadow: 0 12px 28px rgba(26, 29, 33, 0.2); }

.edit-imgrow .porg-row__handle { height: 56px; }

.edit-imgrow__thumb {
  width: 88px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
}

.edit-imgrow__name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}

.edit-imgrow__name small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-file {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--deep);
  background: #fff;
  border: 1.5px solid var(--deep);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-file:hover { background: var(--deep); color: #fff; }
.btn-file input { display: none; }

/* 편집 패널 안 탭 (예: 노회원현황 목사회원/장로총대) */
.edit-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.edit-tabs__btn {
  flex: 1;
  padding: 13px;
  font-size: 16.5px;
  font-weight: 700;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--slate);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.edit-tabs__btn:hover { border-color: var(--deep); color: var(--deep); }

.edit-tabs__btn.is-active {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}

/* 규칙 장(章) 블록 편집기 */
.rule-block {
  padding: 13px;
  margin-bottom: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.rule-block.is-dragging { opacity: 0.45; box-shadow: 0 12px 28px rgba(26, 29, 33, 0.2); }

.rule-block__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.rule-block__top .porg-row__handle { height: 44px; }

.rule-block__num {
  flex-shrink: 0;
  padding: 8px 13px;
  background: var(--deep);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
}

.rule-block__title {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15.5px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
}

.rule-block__title:focus { outline: none; border-color: var(--deep); }

.rule-block textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  resize: vertical;
  min-height: 90px;
}

.rule-block textarea:focus { outline: none; border-color: var(--deep); }

/* 소개 밴드 팩트 행 */
.edit-factrow {
  display: grid;
  grid-template-columns: minmax(100px, 0.55fr) 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.edit-factrow input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16.5px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
}

.edit-factrow input:focus { outline: none; border-color: var(--deep); background: #fff; }

/* 삭제 버튼이 붙는 행 (푸터 연락처 등) */
.edit-factrow--del { grid-template-columns: minmax(90px, 0.42fr) 1fr 42px; align-items: center; }

.edit-factrow--del .porg-row__del { height: 44px; }

.btn-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--deep);
  border: 2px dashed color-mix(in srgb, var(--deep) 40%, transparent);
  border-radius: 12px;
  transition: background 0.2s, border-color 0.2s;
}

.btn-add-row:hover { background: var(--paper); border-color: var(--deep); }
.btn-add-row svg { width: 17px; height: 17px; }

/* 저장/취소 */
.btn-save,
.btn-cancel {
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 100px;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, filter 0.25s;
}

/* 저장 버튼: 꼭 눌러야 하는 버튼임을 알 수 있게 레드 강조 + 글로우 맥동 */
.btn-save {
  padding: 13px 36px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff6a3d, #ff4d2e 55%, #e6301f);
  border: 2px solid #fff;
  animation: save-pulse 2s ease-in-out infinite;
}

.btn-save:hover { filter: brightness(1.08); transform: translateY(-1px); }

@keyframes save-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, #ff4d2e 40%, transparent),
      0 0 20px color-mix(in srgb, #ff4d2e 60%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, #ff4d2e 12%, transparent),
      0 0 4px color-mix(in srgb, #ff4d2e 15%, transparent);
  }
}

.btn-cancel { border: 1.5px solid var(--line); color: var(--slate); }
.btn-cancel:hover { border-color: var(--slate); color: var(--ink); }

/* ----------------------------------------------------------
   기관 편집기
   ---------------------------------------------------------- */

.porg-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.porg-row.is-dragging { opacity: 0.45; box-shadow: 0 12px 28px rgba(26, 29, 33, 0.2); }

.porg-row__handle {
  flex-shrink: 0;
  width: 32px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--slate);
  cursor: grab;
  border-radius: 8px;
}

.porg-row__handle:hover { background: rgba(94, 107, 122, 0.12); }
.porg-row__handle:active { cursor: grabbing; }
.porg-row__handle svg { width: 17px; height: 17px; }

.porg-row__fields {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.porg-row__fields input {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15.5px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
}

.porg-row__fields input:nth-child(3) { grid-column: 1 / -1; }

.porg-row__fields input:focus { outline: none; border-color: var(--deep); }

.porg-row__del {
  flex-shrink: 0;
  width: 42px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--slate);
  border-radius: 10px;
  transition: background 0.2s, color 0.2s;
}

.porg-row__del:hover { background: #fbeaea; color: #c0392b; }
.porg-row__del svg { width: 19px; height: 19px; }

.btn-add-org {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--deep);
  border: 2px dashed color-mix(in srgb, var(--deep) 40%, transparent);
  border-radius: 14px;
  transition: background 0.2s, border-color 0.2s;
}

.btn-add-org:hover { background: var(--paper); border-color: var(--deep); }
.btn-add-org svg { width: 19px; height: 19px; }

/* 현재임원 편집 행 (직책/이름 윗줄, 직분/교회 아랫줄) */
.porg-row__fields--ofc { grid-template-columns: minmax(120px, 0.8fr) 1fr; }

.porg-row__fields--ofc input { min-width: 0; }

/* 행 안에 들어간 공통 이미지 선택 카드는 전체 폭 사용 */
.porg-row__fields .edit-imgrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
  background: #fff;
}

/* 역대임원 편집 행 */
.past-row {
  display: grid;
  grid-template-columns: 32px 72px 100px 1fr 1.3fr 42px;
  gap: 7px;
  align-items: center;
  padding: 11px;
  margin-bottom: 9px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 13px;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.past-row.is-dragging { opacity: 0.45; box-shadow: 0 12px 28px rgba(26, 29, 33, 0.2); }

.past-row input {
  width: 100%;
  padding: 10px 11px;
  font-family: inherit;
  font-size: 14.5px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 9px;
}

.past-row input:focus { outline: none; border-color: var(--deep); }

.past-row .porg-row__handle { height: 42px; }

.past-row__sub {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

@media (max-width: 900px) {
  .past-row { grid-template-columns: 32px 66px 90px 1fr 42px; }
  .past-row input:nth-of-type(4) { display: none; }
  .past-row__sub { grid-template-columns: repeat(3, 1fr); }
  .porg-row__fields--ofc { grid-template-columns: 1fr; }
}

/* 시찰현황 편집: 시찰 블록 + 소속교회 행 */
.insp-block {
  padding: 16px;
  margin-bottom: 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.insp-block.is-dragging { opacity: 0.45; box-shadow: 0 12px 28px rgba(26, 29, 33, 0.2); }

.insp-block__top {
  display: flex;
  align-items: center;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.insp-block input {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 9px;
}

.insp-block input:focus { outline: none; border-color: var(--deep); background: #fff; }

.insp-block__top .i-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; }

/* 접힌 시찰: 시찰명 줄만 남김 */
.insp-block.is-collapsed > *:not(.insp-block__top) { display: none; }
.insp-block.is-collapsed .insp-block__top { margin-bottom: 0; }

.insp-block__count {
  flex-shrink: 0;
  padding: 6px 11px;
  font-size: 13.5px;
  color: var(--slate);
  background: var(--paper);
  border-radius: 100px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.insp-block__count:hover { background: var(--deep); color: #fff; }

.insp-block__move,
.insp-block__toggle {
  flex-shrink: 0;
  width: 38px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--slate);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  transition: border-color 0.2s, color 0.2s;
}

.insp-block__move:hover,
.insp-block__toggle:hover { border-color: var(--deep); color: var(--deep); }

.insp-block__toggle svg { width: 16px; height: 16px; transition: transform 0.25s; }
.insp-block:not(.is-collapsed) .insp-block__toggle svg { transform: rotate(180deg); }

/* 순서 안내 + 전체 펼치기 툴바 */
.insp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.insp-toolbar .edit-field__hint { margin: 0; flex: 1; }

.btn-expand-all {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--deep);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  transition: border-color 0.2s;
}

.btn-expand-all:hover { border-color: var(--deep); }

.insp-block > .i-desc { margin-bottom: 8px; }

.insp-block__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* 직책 명칭 + 이름 짝 (시찰장/이름, 서기/이름) */
.insp-block__meta--labeled { grid-template-columns: minmax(90px, 0.5fr) 1fr minmax(90px, 0.5fr) 1fr; }

.insp-block__meta--labeled .i-headlabel,
.insp-block__meta--labeled .i-clerklabel { font-weight: 700; color: var(--deep); }

.insp-block__label {
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate);
}

.church-row {
  padding: 10px;
  margin-bottom: 8px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.church-row.is-dragging { opacity: 0.45; box-shadow: 0 12px 28px rgba(26, 29, 33, 0.2); }

.church-row input { background: #fff; }

.church-row__l1 {
  display: grid;
  grid-template-columns: 30px minmax(120px, 0.8fr) 1fr 42px;
  gap: 7px;
  align-items: center;
  margin-bottom: 7px;
}

.church-row__addr { margin-bottom: 7px; }

.church-row__l3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 7px;
}

@media (max-width: 900px) {
  .church-row__l3 { grid-template-columns: 1fr; }
  .insp-block__meta { grid-template-columns: 1fr; }
  .insp-block__meta--labeled { grid-template-columns: minmax(80px, 0.5fr) 1fr; }
}

/* 기관소개 표 편집 행 (5칸) */
.orgedit-row {
  display: grid;
  grid-template-columns: 30px minmax(80px, 0.6fr) 1fr minmax(70px, 0.5fr) 1fr 1fr 42px;
  gap: 7px;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: box-shadow 0.2s, opacity 0.2s;
}

.orgedit-row.is-dragging { opacity: 0.45; box-shadow: 0 12px 28px rgba(26, 29, 33, 0.2); }

.orgedit-row input {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  font-family: inherit;
  font-size: 14.5px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 9px;
}

.orgedit-row input:focus { outline: none; border-color: var(--deep); }

.orgedit-row .porg-row__handle { height: 40px; }

/* 칸수 변형 */
.orgedit-row--n4 { grid-template-columns: 30px minmax(80px, 0.6fr) 1fr 1fr 2fr 42px; }

/* 금액 입력칸: 오른쪽 정렬 + 숫자 등폭 */
.orgedit-row .num-input { text-align: right; font-variant-numeric: tabular-nums; }

/* 드래그 없는 행 (자동 정렬 명단): 핸들 열 제거 */
.orgedit-row--nodrag.orgedit-row--n4 { grid-template-columns: minmax(80px, 0.6fr) 1fr 1fr 2fr 42px; }

/* 모든 수정 창 상단의 저장 안내 — 눈에 띄되 차분하게 */
.edit-save-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 17px;
  margin-bottom: 16px;
  background: #fdeeea;
  border: 1px solid #f3c4b8;
  border-radius: 10px;
  color: #d63b22;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
}

.edit-save-note::before {
  content: "⚠️";
  font-size: 22px;
  flex-shrink: 0;
}

/* 기능 안내 배너 — 편리한 기능을 알려주는 파란 안내 (노회원현황 자동 정렬 등) */
.edit-label--blink,
.edit-field label.edit-label--blink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #4a90e2, #2a6fdb 60%, #1f5ec4);
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.35;
  border: 2px dashed #fff;
  border-radius: 12px;
  animation: label-blink 2.2s ease-in-out infinite;
}

.edit-label--blink::before {
  content: "💡";
  font-size: 26px;
  flex-shrink: 0;
}

/* 글자는 항상 선명하게 — 바깥 글로우만 은은하게 맥동 */
@keyframes label-blink {
  0%, 100% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, #2a6fdb 35%, transparent),
      0 0 24px color-mix(in srgb, #2a6fdb 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 2px color-mix(in srgb, #2a6fdb 10%, transparent);
  }
}
.orgedit-row--n7 { grid-template-columns: 30px repeat(7, 1fr) 42px; }

@media (max-width: 900px) {
  .orgedit-row { grid-template-columns: 30px 1fr 1fr 42px; }
  .orgedit-row input:nth-of-type(n+3) { grid-column: auto; }
}

/* 저장 완료 토스트 */
.edit-toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%) translateY(16px);
  z-index: 300;
  padding: 15px 30px;
  font-size: 16.5px;
  font-weight: 600;
  color: #fff;
  background: var(--deep);
  border-radius: 100px;
  box-shadow: 0 14px 36px rgba(26, 29, 33, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}

.edit-toast.is-show { opacity: 1; visibility: visible; transform: translateX(-50%); }

/* ----------------------------------------------------------
   반응형
   ---------------------------------------------------------- */

@media (max-width: 640px) {
  .admin-bar {
    gap: 12px;
    padding: 12px 12px 12px 20px;
    bottom: 14px;
  }

  .admin-bar__hint { display: none; }

  .edit-btn { top: 20px; font-size: 19px; padding: 15px 28px; gap: 10px; }
  .edit-btn svg { width: 20px; height: 20px; }
  .edit-btn--hero { top: calc(var(--header-h) + 16px); }

  /* 모바일 헤더는 좁으니 소형 버튼은 아이콘만 */
  .edit-btn--mini { padding: 9px 11px; }
  .edit-btn--mini span { display: none; }

  .edit-panel {
    top: auto;
    bottom: 76px;
    right: 10px;
    left: 10px;
    width: auto;
    min-width: 0;
    max-height: 62vh;
    resize: none;
  }

  .edit-panel__drag-hint { display: none; }

  .edit-factrow { grid-template-columns: 1fr; }

  .porg-row { flex-wrap: wrap; }
  .porg-row__fields { grid-template-columns: 1fr; order: 3; width: 100%; }
  .porg-row__fields input:nth-child(3) { grid-column: auto; }
}


/* ----------------------------------------------------------
   드래그 정렬 공통: 드래그 중인 항목이 "지금 놓으면 이 자리"임을
   파란 점선 슬롯으로 명확히 표시 (반투명만으로는 위치 파악이 어려움)
   ---------------------------------------------------------- */

.edit-panel .is-dragging {
  opacity: 1;
  background: color-mix(in srgb, #2a6fdb 7%, #fff);
  border: 2px dashed #2a6fdb;
  box-shadow:
    0 0 0 4px color-mix(in srgb, #2a6fdb 18%, transparent),
    0 14px 30px rgba(26, 29, 33, 0.18);
}

/* 슬롯 안 내용은 살짝만 흐리게 — 어떤 항목을 옮기는 중인지는 보이게 */
.edit-panel .is-dragging > * { opacity: 0.55; }