* { box-sizing: border-box; }
/* display 를 지정한 요소(section, .row 등)도 hidden 속성으로 숨겨지게 한다 */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { font-family: system-ui, "Malgun Gothic", sans-serif; font-size: 15px; color: #1c1f24; background: #fff; }
input, button, textarea { font: inherit; }
input, textarea { padding: 8px 10px; border: 1px solid #c9ced6; border-radius: 8px; min-width: 0; }
button { padding: 8px 14px; border: 1px solid #c9ced6; border-radius: 8px; background: #fff; cursor: pointer; white-space: nowrap; }
button.primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
/* 아이디 찾기 결과 (아이디 순, 일부 가림) */
ul.idlist { margin: 0; padding: 6px 12px; list-style: none; border: 1px solid #e4e7ec; border-radius: 8px; background: #f8fafc; }
ul.idlist li { padding: 5px 0; font-weight: 600; }
ul.idlist li + li { border-top: 1px solid #e4e7ec; }
button.danger { background: #d1242f; border-color: #d1242f; color: #fff; }
button:disabled { opacity: .5; cursor: default; }
small, .dim { color: #667085; }
.row { display: flex; gap: 8px; align-items: center; }
.row > input { flex: 1; }

/* 이모지 마커 */
.pin { display: grid; place-items: center; font-size: 20px; background: #fff; border: 2px solid #1f6feb;
       border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pin.me { background: #1f6feb; border-color: #fff; font-size: 0; width: 18px !important; height: 18px !important;
          margin: -9px 0 0 -9px !important; }
/* 내 위치(사용자 웹): 깜박이는 사람 모양. 끌어서 옮길 수 있다 */
.pin.person { background: #e8f0fe; border-color: #1f6feb; cursor: grab; animation: me-blink 1.2s ease-in-out infinite; }
@keyframes me-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(31, 111, 235, .55); }
  50% { opacity: .45; box-shadow: 0 0 0 10px rgba(31, 111, 235, 0); }
}
.pin.person.leaflet-drag-target { animation: none; cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .pin.person { animation: none; } }
/* 끌어서 옮기는 위치 핀을 깜박이게 (사장님의 영업 위치 등) */
.pin.drag.blink { animation: spot-blink 1.2s ease-in-out infinite; }
@keyframes spot-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(209, 36, 47, .5); }
  50% { opacity: .5; box-shadow: 0 0 0 10px rgba(209, 36, 47, 0); }
}
.pin.drag.blink.leaflet-drag-target { animation: none; cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .pin.drag.blink { animation: none; } }
.leaflet-tooltip.lbl.spot { background: #d1242f; color: #fff; }
.pin.drag { border-color: #d1242f; cursor: grab; }
/* 묶음(가게 N곳): 알약 모양으로 깜박인다 */
.pin.cluster { border-radius: 16px; font-size: 13px; font-weight: 700; color: #1f4fa3; background: #e8f0fe; white-space: nowrap; animation: me-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pin.cluster { animation: none; } }
.pin.SCHEDULED { border-color: #f59e0b; }
.pin.CLOSED { border-color: #98a2b3; filter: grayscale(1); opacity: .75; }
/* 영업 상태 딱지 */
.st { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 600; margin-right: 6px; vertical-align: 1px; }
.st.OPEN { background: #dafbe1; color: #116329; }
.st.SCHEDULED { background: #fff3cd; color: #8a5a00; }
.st.CLOSED { background: #eaecf0; color: #475467; }
.st.SCHED { background: #e8f0fe; color: #1f4fa3; }
/* 정기 일정의 장소 (📅): 가게 마커보다 연하게, 점선 */
.pin.sched { border-color: #1f6feb; border-style: dotted; background: #f4f8ff; }
.scheds { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: #f4f8ff; font-size: 13px; }
.scheds > b { display: block; margin-bottom: 2px; }
/* 가게 창의 영업 일정: 장소(누르면 지도 창) 아래에 요일·시간 줄을 들여쓴다 */
.scheds .place { display: block; font-weight: 600; margin: 6px 0 2px 6px; color: #1c1f24; text-decoration: none; }
.scheds a.place { color: #1f4fa3; cursor: pointer; }
.scheds a.place:hover { text-decoration: underline; }
.scheds summary { cursor: pointer; color: #1f4fa3; margin-top: 6px; font-weight: 600; }
.scheds .schedtbl { margin-left: 22px; }
.scheds .schedtbl td:first-child { min-width: 64px; }
.schedtbl { border-collapse: collapse; }
.schedtbl td { padding: 2px 10px 2px 0; vertical-align: top; white-space: nowrap; }
.schedtbl td.act { padding-right: 0; }
.schedtbl td.act button { padding: 2px 8px; font-size: 12px; margin-left: 4px; }
/* 사장님 영업 탭의 정기 일정 표: 줄을 누르면 🚚 가 그 장소로 가고 그 줄이 칠해진다 */
.schedlist table { width: 100%; }
.schedlist th { text-align: left; font-weight: 600; color: #667085; font-size: 12px; padding: 2px 10px 4px 6px; }
.schedlist tr.item { cursor: pointer; }
.schedlist tr.item td { padding: 6px 10px 6px 6px; border-top: 1px solid #e4e7ec; white-space: normal; }
.schedlist tr.item:hover td { background: #eef3fb; }
.schedlist tr.item.sel td { background: #dbe7fb; }
.schedlist td.today { font-weight: 700; color: #116329; }
/* 사장님 지도의 🚚 라벨: 상태별 색 */
.leaflet-tooltip.lbl.spot.open { background: #116329; }
.leaflet-tooltip.lbl.spot.scheduled { background: #b35c00; }
.leaflet-tooltip.lbl.spot.closed { background: #667085; }
/* 사장님 지도의 정기 장소 📅: 오늘 일정이 없으면 연하게 */
.pin.sched.faint { opacity: .55; }
/* 확인된 가게 표시 */
.vf { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: #1f6feb; vertical-align: 1px; white-space: nowrap; }
.pin.sight { border-color: #f59e0b; border-style: dashed; }
.leaflet-tooltip.lbl { background: rgba(255,255,255,.92); border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.3);
                       font-size: 12px; font-weight: 600; padding: 1px 6px; }
.leaflet-tooltip.lbl::before { display: none; }
/* 내 위치 라벨 (사람 모양 위) */
.leaflet-tooltip.lbl.mine { background: #1f6feb; color: #fff; }

/* 입력칸 아래에 펼쳐지는 검색 후보 목록 (부모는 position: relative) */
.results { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 1000; background: #fff;
           border: 1px solid #c9ced6; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.results div { padding: 8px 10px; cursor: pointer; font-size: 13px; }
.results div:hover { background: #f2f4f7; }
.results small { display: block; padding: 8px 10px 4px; }

/* 확인·알림·입력 창 (common.js 의 uiDialog). 모든 화면에서 같은 모양 */
dialog.uidlg { border: 0; border-radius: 14px; padding: 18px; width: min(380px, 90vw); box-shadow: 0 10px 40px rgba(0,0,0,.25); color: #1c1f24; font-size: 15px; }
dialog.uidlg::backdrop { background: rgba(0,0,0,.4); }
dialog.uidlg > b { display: block; font-size: 16px; }
dialog.uidlg .uibody { margin-top: 8px; white-space: pre-wrap; color: #475467; font-size: 14px; line-height: 1.5; }
dialog.uidlg textarea { width: 100%; margin-top: 10px; resize: vertical; }
dialog.uidlg .uibtns { margin-top: 16px; justify-content: flex-end; }
dialog.uidlg .uibtns button { min-width: 84px; }

/* 공지 띠 (common.js 의 showNotices) */
#noticeBar { background: #fff8e1; border-bottom: 1px solid #f1d48a; color: #6b4a00; font-size: 14px; }
#noticeBar > div { display: flex; gap: 8px; align-items: center; padding: 6px 12px; }
#noticeBar span { flex: 1; }
#noticeBar button { border: 0; background: none; padding: 2px 6px; color: inherit; font-size: 14px; }

/* 앱 받기 상자 (접었다 펴기). 화면마다 그 화면에 맞는 앱만 보여 준다 */
details.appget { border: 1px solid #e4e7ec; border-radius: 10px; padding: 8px 12px; font-size: 13px; background: #fafbfc; }
details.appget summary { cursor: pointer; font-weight: 700; padding: 2px 0; }
details.appget[open] summary { margin-bottom: 6px; }
details.appget .qrs { display: flex; gap: 12px; justify-content: space-around; }
details.appget .qrs > div { display: grid; gap: 2px; justify-items: center; text-align: center; }
details.appget .qrs svg { width: 140px; height: 140px; }