/* app.css — 화면 배치·크기·모양 */

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
/* 문서 자체는 스크롤하지 않고 본문(main)만 스크롤한다.
   iOS 26은 '스크롤되는 문서의 위쪽 가장자리'에 시스템 블러를 씌우는데,
   헤더를 스크롤 영역 밖에 두면 그 대상에서 아예 빠진다.
   html 에도 배경색을 준다 — Safari 26은 theme-color 메타를 더 이상 읽지 않는다. */
html{ height:100%; background:var(--ink); }
body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background:var(--ink); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",sans-serif;
}
.app{ display:flex; flex-direction:column; height:100%; }
@supports (height:100dvh){ .app{ height:100dvh; } }

/* iOS 26은 상태바 아래로 약 44pt 높이의 블러 띠를 화면에 자동으로 씌운다.
   이건 웹에서 끌 수 없으므로, 그 띠 안에는 글자를 두지 않는 방법으로 피한다.
   아래 여백은 status-bar-style 설정이 default든 black-translucent든
   헤더 첫 줄이 항상 "상태바 아래 48pt" 지점에서 시작하도록 맞춘 값이다.
     · black-translucent → inset 44pt + 48px = 상태바 밑 92pt
     · default           → inset  0pt + 48px = 상태바 밑 92pt (웹뷰가 이미 44pt 아래에서 시작)
   실측한 블러 띠 하단이 상태바 밑 88pt이므로 4pt 여유가 남는다. */
header{ flex:0 0 auto; position:relative; z-index:20;
  padding:calc(48px + env(safe-area-inset-top, 0px)) 18px 14px;
  background:var(--ink); border-bottom:1px solid var(--line); }
.mark{ font-family:"Courier New",monospace; font-size:11px; letter-spacing:3px;
  color:var(--amber); border:1px solid var(--amber-dim); padding:2px 6px; border-radius:3px; }
h1{ font-size:21px; margin:8px 0 2px; font-weight:800; letter-spacing:-0.02em; }
.sub{ color:var(--text-dim); font-size:12.5px; margin:0; }
.sub:empty{ display:none; }

/* 제목 줄: 왼쪽 제목, 오른쪽 아이콘 버튼(관리자 마크 바로 아래) */
.hd-row{ display:flex; align-items:flex-end; gap:10px; clear:both; }
.hd-row h1{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd-tools{ flex:0 0 auto; display:flex; gap:6px; margin-top:8px; }
.hd-tools:empty{ display:none; }
.tool-btn{ width:50px; background:transparent; border:1px solid var(--line);
  border-radius:9px; padding:6px 0 5px; display:flex; flex-direction:column;
  align-items:center; gap:3px; color:var(--amber); font-family:inherit; cursor:pointer; }
.tool-btn:active{ border-color:var(--amber); background:rgba(182,146,123,0.12); }
.tool-ico{ width:18px; height:18px; display:block; }
.tool-ico svg{ width:100%; height:100%; display:block; }
.tool-nm{ font-size:9.5px; font-weight:700; color:var(--text); white-space:nowrap; }
main{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding:16px 16px calc(34px + env(safe-area-inset-bottom)); }

.backbtn{ background:none; border:none; color:var(--amber); font-size:14px;
  font-weight:600; padding:6px 0; margin-bottom:10px; cursor:pointer; font-family:inherit; }

.group-card,.fac-row{ background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:15px 16px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.group-card{ border-left:3px solid var(--amber); position:relative; margin:12px 0 4px; }
/* 완료 용역은 한 톤 죽인다 */
.group-card.done{ border-left-color:var(--line); }
.group-card.done .group-name{ color:var(--text-dim); }

/* 진행중/완료 뱃지 — SITE·NAVI 마크와 같은 네모 테두리, 카드 모서리에 걸친다 */
.st-badge{ position:absolute; top:-8px; right:12px;
  font-family:"Courier New",monospace; font-size:9.5px; font-weight:700; letter-spacing:1px;
  padding:1px 0; width:48px; text-align:center; box-sizing:border-box;
  border-radius:3px; line-height:14px; pointer-events:none; }
.st-badge.active{ background:var(--amber); color:var(--on-amber); border:1px solid var(--amber); }
.st-badge.done{ background:var(--ink); color:var(--text-dim); border:1px solid var(--line); }

/* 완료 구역 머리 (탭하면 접고 펼침) */
.done-head{ display:flex; align-items:center; gap:8px; width:100%;
  background:transparent; border:none; padding:14px 2px 2px; margin-top:6px;
  color:var(--text-dim); font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.done-head::after{ content:''; flex:1 1 auto; height:1px; background:var(--line); order:2; }
.done-head .cnt{ font-family:"Courier New",monospace; order:1; }
/* 정렬 버튼과 같은 모양, 크기는 뱃지와 같다. 펼치면 선택된 정렬 버튼처럼 앰버 */
.done-head .fold{ order:3; border:1px solid var(--line); border-radius:20px;
  padding:1px 0; width:48px; text-align:center; line-height:14px;
  font-size:9.5px; font-weight:400; color:var(--text-dim); white-space:nowrap; }
.done-head.open .fold{ border-color:var(--amber); color:var(--amber); font-weight:700; }

/* 용역명 라벨 줄 — 오른쪽에 진행중/완료 스위치 */
.field-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.field-head label{ margin-bottom:0; }
.st-switch{ display:flex; align-items:center; gap:8px; }
.st-text{ font-size:12px; font-weight:700; color:var(--text-dim); min-width:34px; text-align:right; }
.st-text.on{ color:var(--amber); }
.switch{ position:relative; width:46px; height:28px; flex:0 0 auto;
  border:none; border-radius:14px; padding:0; cursor:pointer;
  background:var(--line); transition:background .2s; }
.switch .knob{ position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:var(--text); box-shadow:0 1px 3px rgba(0,0,0,0.45);
  transition:transform .2s cubic-bezier(0.32,0.72,0,1); }
.switch.on{ background:var(--amber); }
.switch.on .knob{ transform:translateX(18px); }
.group-card:active,.fac-row:active{ background:var(--panel-2); }
.group-name,.fac-name{ font-size:15.5px; font-weight:700; }
.group-count{ font-size:11.5px; color:var(--text-dim); margin-top:4px;
  font-family:"Courier New",monospace; }

/* 시설물 카드는 이름·메모 길이와 무관하게 항상 정확히 세 줄이다.
   1줄 = 이름 / 2줄 = 좌표 칩 / 3줄 = 메모(없으면 빈 줄로 높이 유지) */
.fac-main{ flex:1 1 auto; min-width:0; }
.fac-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fac-line2{ margin-top:6px; }
.fac-coord{ display:inline-block; font-family:"Courier New",monospace; font-size:9.5px;
  letter-spacing:0; color:var(--amber); border:1px solid var(--amber-dim);
  padding:2px 5px; border-radius:3px; white-space:nowrap; }
.fac-memo{ margin-top:5px; font-size:12px; color:var(--text-dim); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.chev{ color:var(--text-dim); font-size:18px; }
.navi-btn{ flex-shrink:0; margin-left:10px; background:var(--amber); color:var(--on-amber);
  font-weight:800; font-size:13px; border:none; border-radius:8px; padding:10px 13px;
  font-family:inherit; }
.edit-dot{ color:var(--text-dim); font-size:20px; padding:0 4px; }

.fab{ display:block; width:100%; padding:14px; margin-top:6px; background:transparent;
  border:1px dashed var(--line); border-radius:10px; color:var(--text-dim);
  font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.fab:active{ border-color:var(--amber); color:var(--amber); }

.empty{ text-align:center; padding:38px 20px; color:var(--text-dim); }
.empty .big{ font-size:32px; margin-bottom:10px; }

.overlay{ position:fixed; inset:0; background:var(--scrim);
  display:none; align-items:flex-end; z-index:50;
  opacity:0; transition:opacity 0.22s ease; }
.overlay.show{ display:flex; }
.overlay.visible{ opacity:1; }
.sheet{ width:100%; max-height:90vh; overflow-y:auto; background:var(--panel);
  border-top:1px solid var(--line); border-radius:16px 16px 0 0;
  padding:8px 18px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform 0.28s cubic-bezier(0.32,0.72,0,1);
  will-change:transform; }
.overlay.visible .sheet{ transform:translateY(0); }
.sheet.dragging{ transition:none; }
.sheet-grip{ width:100%; padding:6px 0 12px; display:flex; justify-content:center;
  cursor:grab; touch-action:none; }
.sheet-grip::before{ content:''; display:block; width:40px; height:4px;
  border-radius:2px; background:var(--line); }
.sheet h3{ margin:0 0 14px; font-size:17px; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; }
.field input{ width:100%; background:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:11px 12px; color:var(--text); font-size:16px; font-family:inherit; }
.field input:focus{ outline:none; border-color:var(--amber); }
.hint{ font-size:11.5px; color:var(--text-dim); margin-top:6px; line-height:1.55; }
.hint b{ color:var(--amber); }
.sheet-actions{ display:flex; gap:10px; margin-top:14px; }
.btn{ flex:1; padding:13px; border-radius:9px; border:none; font-size:14.5px;
  font-weight:700; cursor:pointer; font-family:inherit; text-align:center;
  text-decoration:none; display:block; }
.btn-primary{ background:var(--amber); color:var(--on-amber); }
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--text-dim); }
.btn-danger{ background:transparent; border:1px solid var(--danger); color:var(--danger); }

.searchbar{ display:flex; gap:8px; }
.searchbar input{ flex:1; }
.searchbar button{ flex-shrink:0; background:var(--amber); color:var(--on-amber);
  border:none; border-radius:8px; padding:0 16px; font-weight:800; font-size:14px;
  font-family:inherit; cursor:pointer; }
.searchbar button:disabled{ opacity:0.5; }
.results{ margin-top:12px; }
.result-item{ background:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; margin-bottom:8px; cursor:pointer; }
.result-item:active{ border-color:var(--amber); }
.result-name{ font-size:14.5px; font-weight:700; }
.result-addr{ font-size:12px; color:var(--text-dim); margin-top:3px; line-height:1.4; }
.result-coord{ font-size:11px; color:var(--amber); margin-top:4px;
  font-family:"Courier New",monospace; }
.picked{ background:var(--ink); border:1px solid var(--amber-dim); border-radius:9px;
  padding:12px 13px; margin-bottom:12px; }
.picked .l{ font-size:11px; color:var(--amber); letter-spacing:1px; margin-bottom:5px; }
.picked .v{ font-size:12px; font-family:"Courier New",monospace; color:var(--text-dim); }
.loading{ text-align:center; padding:18px; color:var(--text-dim); font-size:13px; line-height:1.6; }

.navi-target{ background:var(--ink); border:1px solid var(--amber-dim);
  border-radius:10px; padding:14px; margin-bottom:14px; }
.navi-target .n{ font-size:16px; font-weight:800; margin-bottom:4px; }
.navi-target .c{ font-family:"Courier New",monospace; font-size:12px; color:var(--text-dim); }
.navi-msg{ font-size:12px; line-height:1.55; color:var(--text-dim);
  background:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; margin:0 0 10px; word-break:keep-all; }
.navi-msg.error{ color:var(--danger); border-color:var(--danger); }

/* 길안내 앱 선택 — 1행 4열, 아이콘 위 이름 아래 */
.app-row{ display:flex; gap:12px; }
/* 아이폰 하단 독 아이콘처럼: 정사각형 타일, 둥근 모서리, 채운 배경. 안은 아이콘 위·이름 아래 */
.app-btn{ flex:1 1 0; min-width:0; aspect-ratio:1 / 1; background:var(--panel-2);
  border:1px solid var(--line); border-radius:18px; padding:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px; color:var(--amber);
  font-family:inherit; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); }
.app-btn:active{ border-color:var(--amber); background:rgba(182,146,123,0.16); }
.app-ico{ width:34px; height:34px; display:block; }
.app-ico svg{ width:100%; height:100%; display:block; }
.app-nm{ font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; }
.app-note{ font-size:12px; color:var(--text-dim); line-height:1.5;
  margin:9px 0 12px; text-align:center; }
.app-note b{ color:var(--amber); }
.app-note b.ng{ color:var(--danger); }

/* ===== 길 안내 / 시설물 수정 시트 =====
   [길안내] 버튼 → mode-navi : 내비 버튼 4개, 뒤 목록은 옅게 어둡게
   시설물 줄      → mode-edit : 내비 버튼 대신 지도를 크게, 좌표복사·수정·삭제 */
.navi-head{ display:flex; align-items:stretch; gap:8px; margin-bottom:10px; }
.navi-head h3{ margin:0; flex:0 0 auto; align-self:center; white-space:nowrap; }
.navi-head .navi-target{ flex:1 1 auto; min-width:0; margin:0; padding:6px 10px; border-radius:9px; }
.navi-head .navi-target .n{ font-size:14px; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.navi-head .navi-target .c{ font-size:10.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.navi-head .reset-btn{ padding:0 12px; }
#naviMapWrap{ position:relative; width:100%; height:clamp(170px, 26vh, 250px);
  border-radius:10px; overflow:hidden; margin-bottom:12px; background:var(--ink); }
#naviOverlay.mode-edit #naviMapWrap{ height:clamp(290px, 42vh, 400px); }
#naviOverlay.mode-navi{ background:rgba(13,12,12,0.45); }
#naviOverlay.mode-navi .edit-only{ display:none; }
#naviOverlay.mode-edit .navi-only{ display:none; }

/* 정보 박스 + 초기화 버튼: 박스가 남는 폭을 모두 쓰고, 버튼은 글자만큼만 */
.with-reset{ display:flex; gap:10px; align-items:stretch; margin-bottom:12px; }
.with-reset > :first-child{ flex:1 1 auto; min-width:0; margin-bottom:0; }
.reset-btn{ flex:0 0 auto; background:transparent; border:1px solid var(--line);
  border-radius:9px; color:var(--text-dim); font-size:13px; font-weight:700;
  font-family:inherit; cursor:pointer; padding:0 16px; white-space:nowrap; }
.reset-btn:active{ border-color:var(--amber); color:var(--amber); }

.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:10px 16px; border-radius:20px; font-size:13px; z-index:80;
  opacity:0; pointer-events:none; transition:opacity 0.2s; max-width:86%; text-align:center; }
.toast.show{ opacity:1; }

/* 카카오내비에서 돌아왔을 때 아래에서 올라오는 재시도 배너 */
.again-bar{ position:fixed; left:12px; right:12px;
  bottom:calc(16px + env(safe-area-inset-bottom)); z-index:90;
  background:var(--panel-2); border:1px solid var(--amber-dim); border-radius:12px;
  padding:11px 12px 11px 14px; display:none; align-items:center; gap:10px;
  box-shadow:0 8px 22px rgba(0,0,0,0.5);
  transform:translateY(14px); opacity:0; transition:opacity .2s, transform .2s; }
.again-bar.show{ display:flex; }
.again-bar.visible{ opacity:1; transform:translateY(0); }
.again-text{ flex:1 1 auto; min-width:0; line-height:1.35; }
.again-text b{ display:block; font-size:13.5px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.again-text span{ font-size:11px; color:var(--text-dim);
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.again-go{ flex:0 0 auto; background:var(--amber); color:var(--on-amber); border:none;
  border-radius:8px; padding:9px 13px; font-size:13px; font-weight:800;
  font-family:inherit; cursor:pointer; }
.again-x{ flex:0 0 auto; background:transparent; border:none; color:var(--text-dim);
  font-size:15px; padding:4px 2px 4px 4px; cursor:pointer; font-family:inherit; }


/* 로그인 게이트 */
.login-gate{ position:fixed; inset:0; z-index:200; background:var(--ink);
  display:none; align-items:center; justify-content:center; overflow-y:auto;
  padding:calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); }
.login-gate.show{ display:flex; }
.login-card{ width:100%; max-width:360px; }
.login-card h2{ font-size:22px; margin:14px 0 6px; font-weight:800; letter-spacing:-0.02em; }
.login-msg{ min-height:18px; margin:10px 0 0; font-size:12.5px; color:var(--danger); }
.who{ float:right; font-size:10.5px; color:var(--text-dim);
  border:1px solid var(--line); border-radius:20px; padding:3px 9px; margin-top:1px; }
.who.admin{ color:var(--amber); border-color:var(--amber-dim); }

/* 정렬 바 */
.sortbar{ display:flex; gap:6px; align-items:center; margin:2px 0 12px; flex-wrap:wrap; }
.sortbar .label{ font-size:10.5px; color:var(--text-dim); margin-right:2px; }
.sort-btn{ background:transparent; border:1px solid var(--line); border-radius:20px;
  padding:3px 9px; color:var(--text-dim); font-size:10.5px; font-family:inherit;
  cursor:pointer; white-space:nowrap; }
.sort-btn.on{ border-color:var(--amber); color:var(--amber); font-weight:700; }

/* 시설물 시트: 스크롤이 생기지 않게 여백을 좁히고, 남는 공간은 전부 지도에 준다.
   (혹시 넘칠 때를 대비해 스크롤 자체는 막지 않는다 — 버튼이 잘리는 것보다 낫다) */
.fac-sheet{ display:flex; flex-direction:column;
  height:93vh; max-height:93vh; overflow-y:auto;
  padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
@supports (height:100dvh){
  .fac-sheet{ height:93dvh; max-height:93dvh; }
}
.fac-sheet > *{ flex:0 0 auto; }
.fac-sheet > h3{ margin-bottom:8px; }
.fac-sheet > #facMapWrap{ flex:1 1 auto; min-height:130px; margin-bottom:8px; }
.fac-sheet > .with-reset{ margin-bottom:8px; }
.fac-sheet > .field{ margin-bottom:8px; }
.fac-sheet .field label{ margin-bottom:5px; }

/* 검색 결과는 눌리면 안 된다. 결과가 뜨면 지도를 줄여서 자리를 내준다. */
.fac-sheet > #searchResults{ flex:0 0 auto; overflow-y:auto; max-height:38vh;
  margin-top:0; margin-bottom:8px; }
.fac-sheet > #searchResults:empty{ display:none; margin:0; }
.fac-sheet > #facMapWrap.shrunk{ flex:0 0 120px; }

/* 라벨 옆 괄호 주석 */
.lb-note{ color:#B4917A; font-weight:700; }

.fac-sheet .picked{ padding:9px 12px; }
.fac-sheet .picked .l{ margin-bottom:4px; }
/* 좌표가 두 줄로 감기면 그만큼 지도가 줄어든다 — 한 줄에 들어가는 크기로 */
.fac-sheet #pickedCoord{ font-size:11.5px; white-space:nowrap; }

#facMapWrap{ position:relative; width:100%;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--ink); }
#facMap{ width:100%; height:100%; }

/* 핀 꼭짓점이 viewBox 아래쪽 93.6% 지점이라, 그만큼 내려서 지도 중심에 맞춘다 */
.map-crosshair{ position:absolute; top:50%; left:50%;
  transform:translate(-50%, calc(-100% + 2.7px));
  z-index:1000; pointer-events:none; }
.geo-pin{ width:30px; height:41.7px; display:block;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,0.55)); }
.geo-pin .pin-body{ fill:var(--pin-fill); stroke:var(--pin-edge); stroke-width:2.1; }
.geo-pin .pin-eye{ fill:var(--pin-edge); }