/* 메뉴 목록 «지도로 보기»(2026-11-06, js/an_mapview.js) — 왼쪽 목록 380 · 오른쪽 카카오 지도. 다크 = body.dark */
.anmv{display:flex;height:680px;border:1px solid var(--color-border-light,#E2E2E6);border-radius:12px;overflow:hidden;background:#fff;margin:0 0 8px}
.anmv[hidden]{display:none}
.anmv-list{flex:0 0 380px;display:flex;flex-direction:column;border-right:1px solid #ECECEE;min-width:0}
.anmv-cnt{flex:0 0 auto;padding:12px 14px;font-size:13px;color:#5B6270;border-bottom:1px solid #ECECEE}
.anmv-cnt b{color:#1F2328}
.anmv-ul{flex:1;overflow-y:auto;overscroll-behavior:contain}
.anmv-li{display:flex;gap:11px;align-items:center;padding:12px 12px 12px 14px;border-bottom:1px solid #F0F0F2;cursor:pointer}
.anmv-li:hover{background:#FAFAFB}
.anmv-li.on{background:#FFF7F5;box-shadow:inset 3px 0 0 #D8432A}
.anmv-ph{flex:0 0 72px;height:72px;border-radius:8px;background:#F3F3F5 center/cover no-repeat}
.anmv-ph.empty,.anmv-pic i.empty{background:#F3F3F5 url("/img/animal/red_default_image.png") center/76% no-repeat}
.anmv-tx{flex:1;min-width:0}
.anmv-tg{font-size:10.5px;color:#9AA0A8;margin-bottom:2px}
.anmv-tg b{color:#fff;background:#1F2328;border-radius:4px;padding:0 5px;font-size:10px;margin-right:4px;font-weight:700}
.anmv-nm{font-size:14.5px;font-weight:800;color:#1F2328;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anmv-ch{display:flex;flex-wrap:wrap;gap:3px;margin:5px 0 4px;height:20px;overflow:hidden}   /* 한 줄만 — 넘치는 칩은 줄째 숨김 */
.anmv-ch span{display:inline-flex;align-items:center;height:20px;box-sizing:border-box;line-height:1;font-size:10.5px;font-weight:700;padding:0 6px;margin:0;border-radius:4px;background:#F1F1F3;color:#4A4F57}
.anmv-ch span.em{background:#FDECEA;color:#D8432A}
.anmv-ch span.sm,.anmv-ch span.sf{background:none;padding:0 1px;font-size:14px;font-weight:800}   /* 성별 = 기호만 파스텔(알약 바탕 없음) */
.anmv-ch span.sm,.anmv-csp i.sm{color:#8FB8FF}
.anmv-ch span.sf,.anmv-csp i.sf{color:#FF9DB5}
.anmv-csp i{font-style:normal;font-weight:800}
.anmv-hint{display:block;font-size:11.5px;color:#9AA0A8;margin-top:2px}
.anmv-ad{font-size:12px;color:#5B6270;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anmv-go{flex:0 0 auto;align-self:center;border:1px solid #DDDDE2;background:#fff;border-radius:8px;padding:6px 9px;font:inherit;font-size:12px;font-weight:700;color:#1F2328;cursor:pointer}
.anmv-go:hover{border-color:#D8432A;color:#D8432A}
.anmv-empty{padding:60px 20px;text-align:center;color:#9AA0A8;font-size:13.5px;line-height:1.7}
.anmv-map{flex:1;position:relative;min-width:0;background:#EEF1EA}
.anmv.anmv-wait #anmvMap,.anmv.anmv-wait .anmv-toast{visibility:hidden}   /* 첫 자리 잡기 전 지도 가림(서울시청이 1초 보였다) */
/* 목록 자리 뼈대(처음 불러오는 동안, 칸이 비었다 채워지며 덜컹이지 않게) */
.anmv-sk{display:flex;gap:11px;align-items:center;height:102px;box-sizing:border-box;padding:12px 12px 12px 14px;border-bottom:1px solid #F0F0F2}   /* 실제 줄 높이(102)와 같게 */
.anmv-sk i{flex:0 0 72px;height:72px;border-radius:8px;background:#F1F1F3}
.anmv-sk span{flex:1;display:flex;flex-direction:column;gap:8px}
.anmv-sk b{display:block;height:12px;border-radius:4px;background:#F1F1F3;width:70%}
.anmv-sk b+b{width:45%}
.anmv-sk b+b+b{width:60%}
body.dark .anmv-map{background:#2A2A2A}
body.dark .anmv-sk i,body.dark .anmv-sk b{background:#2C2C2C}
#anmvMap{position:absolute;inset:0}
.anmv-re{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:5;background:#fff;border:0;border-radius:999px;padding:8px 15px;font:inherit;font-size:13px;font-weight:700;color:#1F2328;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer}
.anmv-re b{color:#D8432A}
.anmv-msg{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;background:rgba(31,35,40,.86);color:#fff;border-radius:8px;padding:7px 12px;font-size:12.5px}
/* 화면 안 0곳(시안 지도_패널고정_시안.html) = 왼쪽 칸 그대로 + 가까운 곳 3곳(거리)·다른 업종 지도 칸, 지도 가운데 작은 어두운 안내 */
.anmv-toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;background:rgba(31,35,40,.82);color:#fff;border-radius:10px;padding:14px 20px;font-size:13.5px;line-height:1.7;text-align:center;pointer-events:none;max-width:calc(100% - 40px);box-sizing:border-box;word-break:keep-all}
.anmv-toast[hidden]{display:none}
.anmv-sec{padding:14px 14px 4px;font-size:12.5px;font-weight:800;color:#5B6270}
.anmv-km{flex:0 0 auto;align-self:center;font-size:12.5px;font-weight:800;color:#D8432A}
.anmv-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px 14px 16px}
.anmv-tiles a,.anmv-tiles span{height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#F6F3F2;color:#8A3B2E !important;font-size:12.5px;font-weight:700;text-align:center;line-height:1.2;text-decoration:none !important}
.anmv-tiles a:hover{background:#FBE7E2}
.anmv-tiles span.on{background:#D8432A;color:#fff !important}
body.dark .anmv-sec{color:#A7ABB3}
body.dark .anmv-km{color:#FF8A70}
body.dark .anmv-tiles a{background:#2E2624;color:#F0B5A8 !important}
/* 핀 위 카드 — 찾아가는 길 박스(animal/map.php .an-mb)와 같은 문법, 작게 */
.anmv-card{position:relative;width:270px;max-width:calc(100vw - 48px);background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.2);font-size:12.5px;line-height:1.4;color:#1F2328;text-align:left;white-space:normal;margin-bottom:52px}
.anmv-card::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fff}
.anmv-x{position:absolute;right:6px;top:6px;width:24px;height:24px;border:0;background:none;color:#9AA0A8;font-size:14px;cursor:pointer;border-radius:6px;padding:0}
.anmv-x:hover{background:#F3F3F5}
.anmv-cbd{display:flex;gap:9px;padding:11px 30px 10px 11px;align-items:flex-start}
.anmv-pic{flex:0 0 64px;border-radius:8px;overflow:hidden;border:1px solid #ECECEE}
.anmv-pic b{display:block;text-align:center;font-size:10.5px;color:#D8432A;background:#FDECEA;padding:2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anmv-pic i{display:block;position:relative;height:60px;background:#F3F3F5 center/cover no-repeat}
.anmv-pic i span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:9.5px;font-style:normal;text-align:center}
.anmv-ctx{flex:1;min-width:0}
.anmv-cnm{font-size:14px;font-weight:800;margin-bottom:2px;word-break:keep-all;overflow-wrap:anywhere}
.anmv-cad{color:#5B6270;font-size:12px;overflow-wrap:anywhere}
.anmv-csp{font-weight:700;margin-top:3px}
.anmv-csp em{font-style:normal;color:#D8432A}
.anmv-cft{display:flex;border-top:1px solid #F0F0F2}
.anmv-cft a{flex:1;text-align:center;height:36px;line-height:36px;font-weight:700;font-size:12.5px;color:#1F2328 !important;text-decoration:none !important}
.anmv-cft a+a{border-left:1px solid #F0F0F2}
.anmv-cft a.go{color:#D8432A !important}
/* 핀 단추(보기 단추 줄) */
#toggleModeBtn .mapModeIcon svg{display:block}
/* 지도가 열려 있으면 목록·쪽 번호 숨김(JS 가 style 로도 숨김) */
body.an-mapview-on .pager_area,body.an-mapview-on .flex-container,body.an-mapview-on .gCenter .an-empty{display:none !important}
/* 다크 */
body.dark .anmv{background:#1E1E1E;border-color:#333}
body.dark .anmv-list{border-right-color:#333}
body.dark .anmv-cnt{color:#A7ABB3;border-bottom-color:#333}
body.dark .anmv-cnt b,body.dark .anmv-nm{color:#ECECEC}
body.dark .anmv-li{border-bottom-color:#2C2C2C}
body.dark .anmv-li:hover{background:#262626}
body.dark .anmv-li.on{background:#2E2220}
body.dark .anmv-ph,body.dark .anmv-ph.empty{background-color:#2A2A2A}
body.dark .anmv-ch span{background:#2E2E2E;color:#C9CCD1}
body.dark .anmv-ch span.em{background:#3A2622;color:#FF8A70}
body.dark .anmv-ad{color:#A7ABB3}
body.dark .anmv-go{background:#262626;border-color:#3A3A3A;color:#ECECEC}
body.dark .anmv-card{background:#232323;color:#ECECEC}
body.dark .anmv-card::after{border-top-color:#232323}
body.dark .anmv-cad{color:#A7ABB3}
body.dark .anmv-cft{border-top-color:#333}
body.dark .anmv-cft a{color:#ECECEC !important}
body.dark .anmv-cft a+a{border-left-color:#333}
body.dark .anmv-cft a.go{color:#FF8A70 !important}
body.dark .anmv-pic{border-color:#3A3A3A}
body.dark .anmv-pic b{background:#3A2622;color:#FF8A70}
body.dark .anmv-ch span.sm,body.dark .anmv-ch span.sf{background:none}