.zone-markers,.pond-pins{position:fixed;inset:0;pointer-events:none}
.zone-markers button,.pond-pins button{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;min-height:44px;border:1px solid #d2d7ba;background:#faf8eceb;border-radius:18px;padding:5px 10px;font:500 12px/1.2 var(--font-serif,serif);color:#3d5c4d;cursor:pointer;box-shadow:0 3px 12px #455d3a15;white-space:nowrap}
.zone-markers button[data-available=false]{color:#7d8270;background:#eeeeddc9;border-color:transparent}
.zone-markers button[data-available=true]{border-color:#879f79;background:#fffdf0}
.zone-markers button:focus-visible,.pond-pins button:focus-visible{outline:3px solid #728b62;outline-offset:3px}
.pond-pins button{transform:translate(8px,-100%);width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:50%}
.pond-pins button::before{content:"";display:block;width:9px;height:9px;margin:auto;border-radius:50%;border:1.5px solid #fff9dc;background:#637d5870;box-shadow:0 0 0 4px #fffbe31a,0 1px 4px #263d3840}
.pond-pin-label{position:absolute;bottom:41px;left:50%;transform:translateX(-50%);padding:6px 9px;border-radius:12px;background:#fcfae9e8;color:#405c46;font-size:12px;opacity:0;pointer-events:none;transition:opacity .15s}
.pond-pins button:hover .pond-pin-label,.pond-pins button:focus-visible .pond-pin-label{opacity:1}
.pond-pins button:hover::before,.pond-pins button:focus-visible::before{background:#e3cf87}
.zone-hint{position:absolute;bottom:82px;left:20px;right:20px;text-align:center;font-size:12px;color:#4b634e;text-shadow:0 1px 10px #ffffeb;pointer-events:none}
.zone-map-back,.zone-book-open{border-radius:24px;padding:10px 14px}
#school-view[data-zone=pond] .school-view-controls{display:none}
#school-view[data-zone=pond] .school-view-zoom button{min-width:34px}
#school-view[data-zone=pond]::before{display:none}
#school-view[data-zone=pond] .school-view-heading{background:#faf8e6ba;border-radius:18px;padding:14px 18px;text-shadow:none}
#school-view[data-zone=pond] .school-view-heading h2{margin:6px 0}
.pond-invitation{position:fixed;z-index:80;right:max(18px,env(safe-area-inset-right));top:90px;max-width:min(320px,calc(100vw - 36px));padding:18px 20px;border:1px solid #c7d1b4;border-radius:20px;background:#fcf9ecf2;color:#486347;box-shadow:0 10px 40px #344c3020}
.pond-invitation>span{font-size:11px;letter-spacing:.08em}.pond-invitation p{font-family:var(--font-serif,serif);font-size:17px;margin:10px 0 16px}.pond-invitation div{display:flex;gap:8px}.pond-invitation button{min-height:44px;padding:8px 12px;border:1px solid #9cad89;border-radius:14px;background:#e9efdc;color:#405a3c;font:inherit;font-size:13px;cursor:pointer}.pond-invitation button:last-child{background:transparent;border-color:transparent;color:#72806c}
.nature-book{width:min(480px,calc(100vw - 30px));color:#405b49}.nature-book h2{font-family:var(--font-serif,serif)}.nature-book>p{font-size:13px;color:#72816e}.nature-entries{display:grid;gap:12px;margin-top:22px}.nature-entries button{display:grid;gap:8px;text-align:left;padding:18px;border:1px solid #d9deca;background:#f8f8ee;border-radius:16px;color:inherit;cursor:pointer}.nature-entries button:disabled{opacity:.65;cursor:default}.nature-entries strong{font:18px var(--font-serif,serif)}.nature-entries span{font-size:13px;line-height:1.6}.nature-book-pocket{display:block;width:100%;padding:16px;border:1px solid #cbd7c0;border-radius:12px;margin:12px 0;background:#eff3e5;color:#426046;font:inherit;cursor:pointer}
@media(max-width:600px){.zone-markers button{font-size:10px;padding:4px 5px;min-height:44px;border-radius:10px}.zone-book-open{font-size:11px!important;padding-inline:10px}.zone-hint{font-size:11px;bottom:82px}#school-view[data-zone=pond] .school-view-heading{top:16px;left:16px;padding:10px 14px}.pond-invitation{top:84px}.school-view-controls{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.pond-pins button{transition:none}}

/* 좁은 화면에서는 투영된 이름끼리 겹치지 않도록 같은 3×3 순서의 선택판을 쓴다. */
@media(max-width:600px) and (min-height:501px){
 .zone-markers{inset:auto 14px 148px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px;background:#f9f8ebdb;border:1px solid #d3dbc4;border-radius:18px}
 .zone-markers[hidden]{display:none}
 .zone-markers button{position:static!important;transform:none;min-width:0;min-height:44px;white-space:normal;font-size:12px;visibility:visible!important}
 #school-view[data-zone=overview] .zone-hint{display:none}
 #school-view[data-zone=overview] .school-view-controls{bottom:22px}
}
.school-landmarks{position:fixed;inset:0;pointer-events:none}.school-landmarks[hidden]{display:none}.school-landmarks span{position:absolute;transform:translate(-50%,-50%);font:500 12px/1.4 var(--font-serif,serif);color:#53634a;background:#fbf7e4ca;border-radius:9px;padding:5px 10px;white-space:nowrap}
@media(max-width:600px){.school-landmarks span{font-size:10px;padding:3px 5px}}

/* 나무 표지판의 화면상 위치에만 터치 영역을 둔다. 지도용 이름 카드와 별개다. */
.zone-sign-targets{position:fixed;inset:0;z-index:1;pointer-events:none}
.zone-sign-targets[hidden],.zone-sign-targets button[hidden]{display:none}
.zone-sign-targets button{position:absolute;transform:translate(-50%,-50%);border:0;border-radius:8px;padding:0;min-width:44px;min-height:44px;background:transparent;color:transparent;font-size:0;box-shadow:none;pointer-events:auto;cursor:pointer;touch-action:manipulation}
.zone-sign-targets button:hover{background:#fff5c622}
.zone-sign-targets button:focus-visible{outline:2px solid #788864;outline-offset:2px;background:#fff5c633}
#school-view .zone-sign-targets{z-index:0}
#school-view[data-zone=zone] .school-view-controls{display:none}
#school-view[data-zone=zone]::before{display:none}