/* ========== Root / Base ========== */
:root{
  --accent:#2563eb;
  --muted:#6b7280;
  --card:#fff;
  --bg:#f8fafc;
  --stroke:#e5e7eb;
  --shadow:0 6px 24px rgba(0,0,0,.08);

  /* 가변 루트 폰트 사이즈(14~16px) */
  font-size: clamp(14px, 1.25vw, 16px);
}

* { box-sizing: border-box; }
body{
  margin:0;
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#0f172a;
}

/* 페이지 전체를 세로 Flex로, 내부 스크롤 허용 체인 구성 */
.wrap{
  max-width:1280px;
  margin:0 auto;
  padding:24px;
  display:flex;
  flex-direction:column;
  min-height:100dvh; /* 모바일 주소창 대응 */
}

/* ========== Header / Controls ========== */
.head{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.title{ font-size:clamp(20px, 2vw, 24px); font-weight:800; letter-spacing:-.2px; }
.controls{ display:flex; gap:10px; align-items:center; color:var(--muted); font-size:13px; }
.hint{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; }

.btn{
  border:1px solid var(--stroke);
  background:#624722;
  color:#fff;
  border-radius:10px;
  padding:10px 14px;     /* 터치 타겟 40px 이상 */
  min-height:40px;
  cursor:pointer;
  line-height:1;
}
.btn:hover{ opacity:.9; }
.btn:active{ transform: translateY(.5px); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ========== Main Layout / Cards ========== */
.layout{
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr);
  gap:20px;
  /* wrap의 남은 높이를 차지해 내부 스크롤이 가능해지도록 */
  flex:1 1 auto;
  min-height:0;  /* 중요 */
}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* 그리드 자식들의 내부 스크롤 허용을 위한 최소 높이 */
.layout > section.card,
.layout > aside.card{
  min-height:0; /* 중요 */
}

/* ========== Map: Head (chips) ========== */
.mapHead{
  display:flex;
  gap:8px;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--stroke);
  background:#fff;
  overflow:auto hidden;

  /* 상단 고정(지도 확대/축소 시 편의) */
  position:sticky;
  top:0;
  z-index:10;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.mapHead::after{
  content:"";
  position:absolute; right:0; top:0; bottom:0; width:24px;
  pointer-events:none;
  background:linear-gradient(to left, var(--card), transparent);
}

.chip{
  white-space:nowrap;
  border:1px solid var(--stroke);
  background:#fff;
  color:#614620;
  padding:8px 12px;      /* 터치 타겟 확보 */
  min-height:36px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
  scroll-snap-align:start;
}
.chip:hover{ border-color:#fff1c1; }
.chip.active,
.chip[aria-pressed="true"]{
  background:#FFF1C1;
  border-color:#e8c447;
  color:#614620;
  font-weight:800;
}
.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ========== Map: Box / SVG / Zoom HUD ========== */
.mapBox{
  position:relative;
  aspect-ratio:16/9;
  background:#f8fafc;
  overflow:hidden;
  min-height:420px;
}
@media (max-width:480px){ .mapBox{ min-height:320px } }
.mapBox svg{ width:100%; height:100%; display:block; }
.svg-missing{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; color:#9aa3af;
}

.zoomHud{
  position:absolute; right:12px; bottom:12px;
  display:flex; flex-direction:column; gap:8px;
}
.zoomBtn{
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid var(--stroke);
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
.zoomBtn:active{ transform:scale(.98) }
.zoomBtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ========== Regions (SVG areas) ========== */
.region{
  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
  will-change: filter, transform;
}
.region:hover{ filter: drop-shadow(0 0 6px rgba(0,0,0,.25)); cursor:pointer; }
.region.active{ filter: drop-shadow(0 0 14px rgba(20,86,240,.55)) brightness(1.05); }
.region text{ pointer-events:none; }
.region path, .region polygon, .region rect{
  vector-effect: non-scaling-stroke; stroke:#33415522; stroke-width:1;
}
.region[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* 포커스/하이라이트 */
.focus-glow { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
.focus-glow.booth {
  filter: drop-shadow(0 0 10px rgba(0,0,0,.45))
          drop-shadow(0 0 24px rgba(33,150,243,.35));
}
.focus-ring {
  fill:none; stroke:#2152ff; stroke-width:3;
  vector-effect: non-scaling-stroke; stroke-linejoin:round;
}
.focus-pulse{
  animation:pulse 1.5s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box; /* 도형 박스 기준 스케일 */
}
@keyframes pulse{
  0%{transform:scale(1); opacity:.9}
  70%{transform:scale(1.15); opacity:.25}
  100%{transform:scale(1); opacity:0}
}

/* ========== Right Panel ========== */
.panelHead{
  padding:12px 16px;
  border-bottom:1px solid var(--stroke);
  display:flex; justify-content:space-between; align-items:center;
}
.regionTitle{ font-weight:800; font-size:16px; }
.empty{ color:var(--muted); font-size:14px; padding:16px; }

/* 오른쪽 카드 자체를 세로 Flex로 만들고, 본문만 스크롤 */
.layout > aside.card{
  display:flex;
  flex-direction:column;
}

/* 리스트 영역만 스크롤되도록 */
.panelBody{
  padding:12px 12px 16px;
  flex:1 1 auto;
  min-height:0;   /* 중요 */
  overflow:auto;  /* 내용 넘치면 스크롤 */
}

/* ========== Farmer List / Items ========== */
.farmerList{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap:12px;
}
@media (min-width:1140px){
  .farmerList{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1320px){
  .farmerList{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.farmerItem{
  display:flex; gap:10px; align-items:center;
  padding:12px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:#fff;
  transition: box-shadow .15s ease, transform .08s ease;
}
.farmerItem:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-1px); }
.farmerItem:active{ transform:translateY(0); }
.farmerItem img{
  width:60px; height:60px;
  border-radius:12px;
  object-fit:cover;
  background:#f1f5f9;
  border:1px solid var(--stroke);
}
.farmerMeta{ display:flex; flex-direction:column; gap:2px; }
.farmerName{ font-weight:800; line-height:1.25; }
.farmerLoc{ font-size:12px; color:var(--muted); line-height:1.2; }

/* 지역 배지 */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  color:#fff;
  font-weight:800;
  text-align:center;
  width:50px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ========== Responsive Tweaks ========== */
@media (max-width:1024px){
  .layout{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .mapBox{ min-height:300px; }
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce){
  .focus-pulse{ animation:none; }
  .region, .farmerItem, .zoomBtn{ transition:none; }
}

/* ========== Optional: Dark Mode (system) ========== */
@media (prefers-color-scheme: dark){
  :root{
    --card:#0b1220;
    --bg:#0a0f19;
    --stroke:#1f2937;
    --muted:#9aa3af;
    --shadow:0 6px 24px rgba(0,0,0,.45);
  }
  body{ color:#e5e7eb; }
  .chip{ background:#0b1220; color:#e5e7eb; border-color:#1f2937; }
  .chip.active{ background:#0b1a36; border-color:#1d4ed8; color:#cfe0ff; }
  .farmerItem{ background:#0b1220; }
  .zoomBtn{ background:#0b1220; }
}

/* ========== Touch: hover 억제 ========== */
@media (hover:none){
  .farmerItem:hover, .chip:hover, .region:hover{ filter:none; box-shadow:none; transform:none; }
}


/* === 패치: 오른쪽 패널을 sticky + viewport bounded === */

/* (1) 그리드 아이템이 행 높이에 끌려 늘어나지 않도록 */
.layout{ align-items: start; }

/* (2) aside.card를 화면 상단에서 24px 띄워 고정하고,
       높이를 '화면 높이 - 위/아래 여백'으로 제한 */
:root{
  --wrap-pad: 24px;   /* .wrap padding 과 동일하게 */
  --aside-top: 24px;  /* 헤더 아래 여백 (필요시 32~48px로 조정) */
}
.layout > aside.card{
  position: sticky;
  top: var(--aside-top);
  max-height: calc(100dvh - var(--aside-top) - var(--wrap-pad));
  display: flex;
  flex-direction: column;
  overflow: hidden;       /* 스크롤은 내부(panelBody)로만 */
  min-height: 0;          /* 내부 스크롤 허용 */
}

/* (3) 리스트 부분만 스크롤 */
.panelBody{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* (4) 패널 헤더는 고정된 상단에 붙어 있도록 배경 유지 */
.panelHead{
  position: sticky;
  top: 0;                 /* panelBody 스크롤 기준 상단 */
  z-index: 1;
  background: var(--card);
}

/* (옵션) 스크롤바 슬림 */
.panelBody::-webkit-scrollbar{ width: 8px }
.panelBody::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:6px }


/* ===== Variables to compute right list height ===== */
:root{
  --wrap-pad: 24px;        /* .wrap 상하 패딩 */
  --aside-top: 24px;       /* 오른쪽 패널 sticky 상단 여백 */
  --panel-head-h: 52px;    /* .panelHead 실제 높이(패딩 포함) */
  --panel-body-pad: 28px;  /* .panelBody 상하 패딩 합(예: 12px + 16px) */
}

/* 오른쪽 패널을 sticky로 고정하고 내부만 스크롤되게 */
.layout{ align-items: start; }
.layout > aside.card{
  position: sticky;
  top: var(--aside-top);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 리스트 영역 '명시적 높이' 지정 + 스크롤 */
.panelBody{
  /* 뷰포트 높이 기준으로 정확히 계산 */
  height: calc(
    100dvh
    - var(--aside-top)      /* sticky 오프셋 */
    - var(--wrap-pad)       /* 하단 패딩 여유 */
    - var(--panel-head-h)   /* 패널 헤더 높이 */
    - var(--panel-body-pad) /* 패널 바디의 상하 패딩 합 */
  );
  overflow: auto;
  min-height: 0;  /* 내부 스크롤 허용(안전장치) */
}

/* 패널 헤더는 고정 배경 유지 */
.panelHead{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
}

/* 좁은 화면에서 약간 더 큰 여백/헤더를 가정해 보정(원하면 값 조절) */
@media (max-width: 1024px){
  :root{
    --aside-top: 20px;
    --panel-head-h: 56px;
  }
}

/* (선택) 스크롤바 슬림 */
.panelBody::-webkit-scrollbar{ width: 8px }
.panelBody::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:6px }

/* 항상 한 줄(1열) 리스트로 고정 */
.farmerList{
  display: grid;
  grid-template-columns: 1fr !important; /* 미디어쿼리 덮어쓰기 */
}

/* (안전) 아이템이 가로로 늘거나 줄바꿈 깨지는 것 방지 */
.farmerItem{ width: 100%; }

/* 검색 폼 */
.search{
  display:flex; gap:8px; align-items:center;
  margin-left:auto; margin-right:12px;
}
.search-input{
  width:220px; max-width:42vw;
  border:1px solid var(--stroke);
  background:#fff; color:#0f172a;
  border-radius:10px; padding:8px 10px;
  font-size:14px;
}
.search-input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.search-clear{ white-space:nowrap; }

@media (max-width:720px){
  .search-input{ width:160px; }
}
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; clip-path:inset(50%); border:0; padding:0; margin:-1px;
}