/* 주렁주렁 키오스크 공용 스타일 */
* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }

/* 세션42: "앱으로 설치해 실행하면 하단 메뉴가 화면 밖으로 밀려남" 버그 수정.
 * 원인: 100vh/100dvh는 안드로이드 웹뷰(특히 fullscreen/standalone 모드에서 제스처바가
 * 실제로 화면 일부를 차지하는 기기)에서 "이론상 최대 높이"로 계산되는 경우가 있어,
 * 실제로 눈에 보이는 영역보다 커져 맨 아래(하단 메뉴)가 화면 밖으로 잘려나감.
 * 해결: viewport-resize.js가 매 로드/리사이즈 시 실제 window.innerHeight를
 * --app-vh 커스텀 속성(px)으로 기록하고, .kiosk-screen은 이를 우선 사용하도록 함.
 * --app-vh가 아직 설정되지 않은 초기 순간(스크립트 실행 전)을 위해 100dvh를 폴백으로 유지. */
/* 2026-09-16 신규: 위 해결책의 부작용 수정.
 * 일부 기기(특히 안드로이드 웹뷰)는 로드 직후 window.innerHeight가 실제 화면보다 크게
 * 계산되었다가, viewport-resize.js의 300ms 지연 재보정 시점에 실제 값으로 바뀐다.
 * 이 순간 .kiosk-screen 높이가 갑자기 줄어들면서, 화면 맨 아래에 있는 하단 메뉴바가
 * "늦게 나타나거나" "잠깐 사라졌다가 다시 나타나는" 것처럼 보이는 시각적 결함이 있었음.
 * height에 짧은 transition을 줘서 이 높이 변화가 순간적으로 튀지 않고 부드럽게
 * 이어지도록 함(하단 메뉴바가 위로 슬쩍 밀려 올라오는 정도로 자연스럽게 보정됨). */
.kiosk-screen {
  height: 100vh;
  height: 100dvh;
  height: var(--app-vh, 100dvh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: height 0.25s ease-out;
}

/* 세션42: 노치/제스처바가 있는 기기(특히 PWA standalone/fullscreen 설치 시)에서
 * 하단 메뉴가 시스템 UI에 가려지지 않도록 safe-area 여백을 하단 메뉴 안쪽에 추가. */
.kiosk-bottom-nav-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 큰 버튼 그리드 (메인화면) */
.main-menu-btn {
  transition: transform .15s ease, box-shadow .15s ease;
  touch-action: manipulation;
}
.main-menu-btn:active {
  transform: scale(0.96);
}

/* 서브메뉴 좌측 고정 네비게이션 아이템 (흰 필 카드 + 활성 시 오렌지 테두리) - 구버전, 참조용 유지 */
.side-nav-item {
  transition: box-shadow .15s ease, border-color .15s ease;
  border: 2px solid transparent;
}
.side-nav-item.active {
  border-color: #FF7A50;
  box-shadow: 0 4px 12px rgba(255, 122, 80, 0.25);
}

/* 하단 고정 네비게이션 아이템
 * 세션49: 아이콘 자체 색이 바뀌지 않는 3D 클레이 PNG 아이콘으로 교체하면서,
 * 선택 표시를 배경색 변화 대신 노란 테두리 + 하단 다이아몬드 포인터 방식으로 변경. */
.bottom-nav-item {
  transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
  border: 2px solid transparent;
  overflow: visible;
}
.bottom-nav-item:active {
  transform: scale(0.96);
}
.bottom-nav-item.active {
  border-color: var(--nav-active-border, #FFD23F);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--nav-active-border, #FFD23F) 35%, transparent);
}
.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--nav-active-border, #FFD23F);
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* 카드 공통 - 세션22: 사용자 요청("그림자 스타일 제거")에 따라 box-shadow 제거 */
.zoolung-card {
  background: #fff;
  border-radius: 28px;
}

/* 지도 위 구역 마커 핀 (location_screen, 팬줌 캔버스 내부에 배치되어 지도와 함께 스케일링됨) */
.zone-marker-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  transform-origin: center bottom;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 15;
}
.zone-marker-pin .zone-marker-dot {
  animation: pulse-glow 2s infinite;
}

/* 세션43: 동물 개별 위치 마커(지도핀 배지) - zone-marker-pin과 동일한 좌표/스케일링 규약을
   공유하되, 원형 배지 이미지를 표시하므로 pulse 애니메이션은 넣지 않고 살짝 더 크게 표시한다. */
.animal-marker-pin {
  z-index: 16;
}
.animal-marker-badge {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.animal-marker-pin:active .animal-marker-badge {
  transform: scale(0.92);
}
/* 세션44(버그수정): marker_icon_url 전용 배지 PNG는 원형+흰테두리+말풍선꼬리+그림자가
   이미 이미지 자체에 그려진 완성품(투명 배경)이라, 추가 원형 틀로 감싸면 꼬리가 잘리고
   테두리가 이중으로 겹쳐 보임. 원본 비율 그대로, 틀 없이 표시. */
.animal-marker-badge-img {
  width: 44px;
  height: auto;
  transition: transform 0.15s ease;
}
.animal-marker-pin:active .animal-marker-badge-img {
  transform: scale(0.92);
}

/* 스크롤바 숨김 (키오스크 터치 UX) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 관리자 인라인 편집 (관리자 편집모드에서만 활성화) — 연필버튼→편집모드→저장/취소버튼 방식 */
body[data-admin-edit] [data-editable] {
  position: relative;
  display: inline-block;
}
body[data-admin-edit] [data-editable].is-editing-field {
  outline: 2px solid #FF7A50;
  outline-offset: 2px;
  background: rgba(255, 122, 80, 0.1);
  border-radius: 4px;
  cursor: text;
}
/* 연필(편집 시작) 버튼: 편집 대상 텍스트 바로 옆에 항상 노출되어, 사용자가 텍스트가 아닌
   이 버튼을 눌러야만 편집이 시작된다는 것을 명확히 알 수 있게 한다. */
.inline-edit-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  min-width: 22px;
  border-radius: 9999px;
  background: #FF7A50;
  color: #fff;
  font-size: 10px;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  border: none;
  position: relative;
  z-index: 5;
}
.inline-edit-toggle:hover { background: #E8613A; }
.inline-edit-toggle.is-hidden { display: none; }

/* 편집 중 노출되는 저장(체크)/취소(엑스) 버튼 묶음 */
.field-save-bar {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  z-index: 5;
}
.field-save-bar.is-visible { display: inline-flex; }
.field-save-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  min-width: 24px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.field-save-bar .btn-do-save { background: #2F6F4E; color: #fff; }
.field-save-bar .btn-do-save:hover { background: #1F4D36; }
.field-save-bar .btn-do-cancel { background: #F3F4F6; color: #6B4226; }
.field-save-bar .btn-do-cancel:hover { background: #E5E7EB; }
body[data-admin-edit] [data-editable-img] {
  position: relative;
}
body[data-admin-edit] [data-editable-img]:hover {
  outline: 3px dashed #FF7A50;
  outline-offset: 2px;
  cursor: pointer;
}
body[data-admin-edit] [data-editable-img]:hover::after {
  content: '\f030';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px; height: 28px;
  background: #FF7A50; color: #fff;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  pointer-events: none;
}

/* 구조화 필드 편집 버튼: 고객 화면에서는 항상 숨김 */
.edit-modal-btn {
  display: none;
}
body[data-admin-edit] .edit-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 9999px;
  background: #FF7A50;
  color: #fff;
  font-size: 11px;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  border: none;
}
body[data-admin-edit] .edit-modal-btn:hover { background: #E8613A; }

/* 관리자 편집모드 상단 고정 배너 */
.admin-edit-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #1F4D36; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; font-family: sans-serif; font-size: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.admin-edit-banner .save-indicator { transition: opacity .3s ease; }
.admin-edit-banner a, .admin-edit-banner button {
  background: rgba(255,255,255,0.15); color: #fff; border: none;
  padding: 6px 14px; border-radius: 9999px; font-size: 12px; cursor: pointer;
  text-decoration: none; margin-left: 8px;
}
.admin-edit-banner a:hover, .admin-edit-banner button:hover { background: rgba(255,255,255,0.28); }
body[data-admin-edit] .kiosk-screen { padding-top: 44px; box-sizing: border-box; }
body[data-admin-edit] .lang-switcher { display: none !important; }

/* 인라인 편집 모달(구조화 필드) */
.edit-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  font-family: sans-serif;
}
.edit-modal-box {
  background: #fff; border-radius: 16px; padding: 24px; width: 480px; max-width: 90vw;
  max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.edit-modal-box h3 { font-size: 16px; font-weight: bold; margin-bottom: 12px; color: #1F4D36; }
.edit-modal-box .edit-modal-hint { font-size: 12px; color: #6B7280; margin-bottom: 8px; line-height: 1.5; }
.edit-modal-box .edit-modal-hint code { background: #F3F4F6; padding: 1px 4px; border-radius: 4px; }
.edit-modal-box textarea, .edit-modal-box input[type=text], .edit-modal-box input[type=url] {
  width: 100%; border: 1px solid #D1D5DB; border-radius: 8px; padding: 10px; font-size: 14px;
  box-sizing: border-box; font-family: sans-serif;
}
.edit-modal-box textarea { min-height: 160px; resize: vertical; }
.edit-modal-box .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.edit-modal-box .modal-actions button {
  padding: 8px 18px; border-radius: 9999px; font-size: 13px; border: none; cursor: pointer;
}
.edit-modal-box .btn-cancel { background: #F3F4F6; color: #374151; }
.edit-modal-box .btn-save { background: #2F6F4E; color: #fff; }

/* 근처동물 추가/제외 설정 모달 (세션39 5-2) */
.nearby-animals-modal { width: 420px; }
.nearby-animals-hint { font-size: 12px; color: #6B4226; margin-bottom: 12px; line-height: 1.5; }
.nearby-animals-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.nearby-animal-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; font-size: 14px; color: #1F4D36;
}
.nearby-animal-row:hover { background: #F3F4F6; }
.nearby-animal-row input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.nearby-animal-thumb {
  width: 36px; height: 36px; border-radius: 9999px; overflow: hidden; flex-shrink: 0;
  background: #EAF3EC; display: flex; align-items: center; justify-content: center;
}
.nearby-animal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nearby-animal-emoji { font-size: 18px; }
.nearby-animal-name { font-weight: 600; }

/* NEXT 프로그램 강조 애니메이션 */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 80, 0.5); }
  50% { box-shadow: 0 0 0 16px rgba(255, 122, 80, 0); }
}
.next-program-pulse {
  animation: pulse-glow 2s infinite;
}

/* 지도 핀 */
.map-pin {
  transform: translate(-50%, -100%);
}

/* 언어 스위처 */
.lang-pill { color: rgba(107,66,38,0.6); }
.lang-pill.active { background: #2F6F4E; color: #fff; }

/* 세션50계속2: "눈으로 교감해요" 배지 - 사선 리본(45도 회전) 방식이었으나
 * 세션51계속4에서 다국어(외국어) 전환 시 텍스트 오버플로우 버그가 발견되어
 * '품절' 배지와 동일한 중앙 오버레이 패턴(feeding_screen.tsx 인라인 클래스)으로 교체됨.
 * 이 규칙은 더 이상 사용되지 않으나 참고용으로 보존. */

/* 세션51계속14: 간식봉투(약포지) 카드 재설계로 더 이상 사용하지 않음(사용자 지적: "박스안에
 * 박스", "약포지 느낌"). 좌측 동물사진 카드와 동일한 zoolung-card 레이아웃으로 통일됨.
 * 과거 클래스는 참고용으로 주석만 보존. */

/* 일일식단 파이차트 (CSS conic-gradient 기반) */
.diet-pie-chart {
  border-radius: 50%;
  flex-shrink: 0;
}