/* MRV 워크벤치 전용 — 공용 셸(theme.css) 위에 얹는다. */

/* ── 필지 카드 ── */
.parcel-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.parcel-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.parcel-card:hover, .parcel-card:focus-visible {
  border-color: #c4d2c6; transform: none; box-shadow: 0 2px 10px rgba(16, 24, 20, .07);
}
.pc-thumb { width: 84px; height: 84px; border-radius: 10px; border-color: var(--line); background: #e8ece9; }
.pc-head b { font-size: 14.5px; font-weight: 700; word-break: keep-all; }   /* 한글 어절 단위 줄바꿈 */
.pc-addr { color: var(--muted); word-break: keep-all; }
.pc-area { font-size: 14px; }
.pc-foot { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 2px; }

/* 증빙·블록 카드 */
.ev-card, .block-card { background: var(--panel); border-color: var(--line); border-radius: 10px; }
.block-idx { background: var(--brand); color: #fff; }
.block-hashes code.own { color: var(--brand-strong); }
/* 블록 사이 연결 — 세로선을 블록 번호 배지 중심(카드 padding 14 + 배지 40/2)에 맞춘다 */
.chain-link { display: flex; align-items: center; gap: 10px; padding-left: 33px; }
.chain-link .line {
  position: relative; width: 2px; height: 30px; background: #cfe4d0; border-radius: 2px; flex: none;
}
.chain-link .line::after {          /* 아래쪽 화살촉 */
  content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid #a9cbab;
}
.chain-link .label { font-size: 11px; color: var(--muted); }
.chain-link .label code { color: var(--brand-strong); font-size: 11px; }
.block-card.bad { background: var(--red-bg); border-color: #f0cdc9; }
.block-card.bad .block-idx { background: var(--red); }
.ui-map { border-color: var(--line); background: #e8ece9; }

@media (max-width: 860px) {
  #app-view { flex-direction: column; }
  .rail {
    position: static; width: auto; height: auto; flex-direction: row; align-items: center;
    gap: 10px; overflow-x: auto; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .rail-brand, .rail-foot { flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 0; }
  .rail-sub, .rail-chip { display: none; }
  .rail-nav { flex-direction: row; gap: 4px; }
  .rail-nav button { padding: 8px 12px; white-space: nowrap; }
  .content, .workbar { padding-left: 14px; padding-right: 14px; }
  .page-head h2 { font-size: 19px; }
}

/* 폼 하단 액션 — 입력 그리드와 간격 확보 */
.form-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.card > .ui-form-grid + .form-actions { margin-top: 20px; }
.map-toolbar { gap: 8px; margin: 12px 0 14px; }

/* ── 사이드바 토글 ── */
.rail-toggle {
  flex: none; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: #45524b; font-size: 14px;
}
.rail-toggle:hover { background: var(--panel-soft); color: var(--text); }
.rail-toggle { transition: transform .22s ease; }
body.rail-collapsed .rail-toggle { transform: rotate(90deg); }

/* 접힘 — 폭 0으로 줄이며 사라진다(레이아웃이 튀지 않게 본문이 자연스레 넓어짐) */
body.rail-collapsed .rail {
  width: 0; padding-left: 0; padding-right: 0; opacity: 0; border-right-color: transparent;
  pointer-events: none;
}
/* 접히는 동안 내용이 삐져나오지 않게 */
body.rail-collapsed .rail > * { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .rail, .rail-toggle { transition: none; }   /* 모션 최소화 설정 존중 */
}

/* ── 대시보드 표 ── */
.row-sub { color: var(--muted); font-size: 11.5px; }
/* 수치 열 — 머리글과 같은 왼쪽 정렬. 자릿수는 tabular-nums로 맞춘다 */
.key-table td.num, .key-table th.num { text-align: left; }
.key-table td.num { font-variant-numeric: tabular-nums; }
.key-table td.wx b { font-size: 14px; }
#dashboard-box .metric-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 16px; }

/* ── 푸터 ──
   본문(.content)이 max-width로 제한돼 있어서, 푸터도 같은 폭·같은 좌측 패딩으로 맞춘다.
   (전폭 배경 + 내부 정렬 — 본문 첫 글자와 세로선이 맞게) */
.site-footer {
  display: block; text-align: left;
  /* style.css가 max-width:1100px + margin:auto로 가운데 정렬해 본문과 어긋나던 것을 해제 */
  max-width: none; margin: 0; width: 100%;
  padding: 14px 26px; line-height: 1.7;
}
.site-footer > span { display: inline; }
.foot-sep { color: #c8d2ca; margin: 0 4px; }
.site-footer .foot-inner { max-width: 1240px; }

/* ── 사용 가이드 ── */
/* MRV 리포트 헤더의 필지 선택 — 커스텀 드롭다운을 우측 액션 자리에 맞춘다 */
.parcel-picker { min-width: 240px; }
.parcel-picker .ui-field { gap: 4px; }
.parcel-picker .ui-label { font-size: 11px; color: var(--muted); }

/* 계정 목록 — 행마다 역할 드롭다운 유무가 달라 열 폭이 들쭉날쭉했다.
   작업 열 폭을 고정하고 드롭다운에 자리를 정해줘서 버튼 줄이 어긋나지 않게 한다. */
#view-users .key-table { table-layout: auto; width: 100%; }
/* 작업 칸. td 자체를 flex로 만들면 셀이 행 높이를 채우지 못해 구분선이 어긋난다 —
   칸은 표 셀로 두고 안쪽 .ua-row가 배치를 맡는다. 행마다 역할 드롭다운이 있고 없고가
   갈리므로(본인 행엔 없다) 버튼을 오른쪽 끝에 붙여 같은 자리에 서게 한다. */
#view-users .user-actions { vertical-align: middle; }
#view-users .ua-row { display: flex; flex-wrap: wrap; align-items: center;
                      justify-content: flex-end; gap: 6px; }
#view-users .ua-row .ui-field { width: 116px; flex: none; margin-right: auto; }
#view-users .ua-row .ui-select-trigger { padding: 5px 8px; font-size: 12px; }
#view-users .ua-row .btn-ghost { white-space: nowrap; }

/* 계정 관리 — 폼 그리드와 실행 버튼 사이가 붙어 보이지 않게 */
#view-users .ui-form-grid { margin-bottom: 4px; }
#view-users .form-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
#view-users .card + .card { margin-top: 16px; }

/* 가이드 — 제목·설명·흐름도가 붙어 보이지 않게 간격을 준다 */
.guide-intro { margin: 0 0 14px; }
.guide-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
.guide-flow-item {
  font-size: 12.5px; font-weight: 600; color: var(--brand-strong);
  background: var(--brand-tint); border-radius: 8px; padding: 7px 13px;
}
.guide-flow-arrow { color: var(--muted); font-size: 12px; }

.guide-steps { display: flex; flex-direction: column; gap: 26px; margin-top: 14px; }
.guide-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.guide-step-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.guide-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.guide-step p { margin: 0 0 12px; max-width: 78ch; }
.guide-shot {
  display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--panel-soft); transition: border-color .14s;
}
.guide-shot:hover { border-color: var(--brand); }
.guide-shot img { display: block; width: 100%; height: auto; }
.guide-notes { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.75; color: var(--ink); }
.guide-notes li { margin-bottom: 6px; }
.guide-notes b { color: var(--brand-strong); }

/* ── MRV 요건 체크리스트 ── */
.req-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.req { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
       border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.req.met { background: var(--brand-tint); border-color: #cfe4d0; }
.req-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
            font-size: 12px; font-weight: 700; background: #e6ebe7; color: var(--muted); }
.req.met .req-mark { background: var(--brand); color: #fff; }
.req b { font-size: 13.5px; margin-right: 6px; }
#mrvproc-parcel { min-width: 220px; }

/* ── 검증 대기열 ── */
.queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 10px; }
.queue-card { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel); }
/* 사진은 button, PDF는 a로 나온다 — 둘 다 같은 썸네일로 보이게 한다 */
.queue-shot { flex: none; width: 116px; height: 116px; border-radius: 10px; overflow: hidden;
              border: 1px solid var(--line); background: var(--panel-soft); display: block;
              padding: 0; font: inherit; }
.queue-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.queue-shot:hover { border-color: var(--brand); }
.queue-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.queue-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.queue-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-meta { font-size: 11px; color: var(--muted); }
.queue-actions { display: flex; gap: 6px; margin-top: 6px; }

/* ── 대시보드 필지 카드 (3열 × 2행, 넘치면 좌우 페이지) ── */
.dash-deck { overflow: hidden; }                 /* 페이지 밖은 잘라낸다 — 가로 스크롤 대신 넘김 */
.dash-track { display: flex; transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.dash-page {
  flex: 0 0 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  align-content: start;
}
@media (max-width: 1100px) { .dash-page { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .dash-page { grid-template-columns: 1fr; } }

.dash-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.dash-card:hover, .dash-card:focus-visible {
  border-color: var(--brand); transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 40, 25, .08); outline: none;
}
.dc-thumb { height: 108px; background: #e9edf0; }        /* 위성 썸네일 — 지도는 뷰포트 진입 시 생성 */
.dc-thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.dc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.dc-head { display: flex; align-items: center; gap: 8px; }
.dc-head b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 요약 줄 — 아이콘 + 값 + 보조값. 4줄 고정이라 카드 높이가 들쭉날쭉하지 않다. */
.dc-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.dc-facts li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-height: 18px; }
.dc-facts li .nav-icon { flex: none; color: var(--muted); }
.dc-facts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-facts li small { margin-left: auto; color: var(--muted); white-space: nowrap; }

/* 카드 덱 다음에 오는 안내 문구 — 카드에 붙어 보이지 않게 */
.dash-deck + .hint, .deck-nav + .hint { margin-top: 18px; }

/* 페이지 이동 */
.deck-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.deck-dots { display: flex; gap: 6px; }
.deck-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: none; background: var(--line); transition: background .15s, transform .15s;
}
.deck-dot.on { background: var(--brand-strong); transform: scale(1.2); }

/* ── 검증 체인 · 블록 상세 모달 ────────────────────────────
   체인에는 해시만 남으므로, 그 해시가 가리키는 리포트 본문과 증빙 원본을
   같은 자리에서 열어 볼 수 있어야 기록이 확인 가능한 사실이 된다. */
.block-actions { margin-top: 10px; display: flex; justify-content: flex-end; }

.modal-wide { width: 900px; max-width: 94vw; padding: 0; display: flex; flex-direction: column;
              max-height: 88vh; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
              gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 18px 22px 24px; overflow-y: auto; }
.modal-body .sub-title { margin-top: 20px; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 30px;
            height: 30px; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.ev-gallery { display: grid; gap: 14px; margin-top: 10px;
              grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ev-tile { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
           background: var(--panel); }
.ev-tile img { width: 100%; height: 132px; object-fit: cover; display: block; cursor: zoom-in; }
.ev-tile-doc { height: 132px; display: flex; align-items: center; justify-content: center;
               background: #eef1f4; color: var(--muted); font-weight: 700; font-size: 15px; }
.ev-tile figcaption { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px;
                      font-size: 11.5px; color: var(--muted); }
.ev-tile figcaption b { font-size: 12px; color: var(--text); overflow: hidden;
                        text-overflow: ellipsis; white-space: nowrap; }
.ev-tile figcaption code { font-size: 10.5px; }

/* 확대 보기 — 증빙은 작게 보면 판독이 안 된다. 대기열·리포트·체인 모달이 함께 쓴다. */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.84); z-index: 80; cursor: zoom-out;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lightbox img { max-width: 94vw; max-height: 84vh; object-fit: contain; border-radius: 6px;
                cursor: default; background: #fff; }
.lightbox-name { color: #e8eaec; font-size: 12.5px; }
.lightbox-close { position: absolute; top: 18px; right: 20px; width: 36px; height: 36px;
                  border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35);
                  color: #fff; font-size: 15px; cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,.15); }

/* 확대되는 이미지는 그렇게 보이게 */
.ev-thumb[data-zoom], .ev-tile img[data-zoom], .queue-shot { cursor: zoom-in; }

/* 경계 그리기 취소 — 되돌리는 동작이라 진행 버튼과 색을 확실히 구분한다 */
#draw-start.danger { background: var(--red-bg); border-color: #f0cdc9; color: var(--red); }
#draw-start.danger:hover { background: #fbdcdc; border-color: var(--red); color: var(--red); }