/* 단지 소개(official/estate/masterplan.html) 전용. 여러 쪽이 함께 쓰는 r57-f2-site-1020.css의 지도 이름표 규칙은 여기서 덮는다. */
/* R57UT7 22(1023) 배치도 — 새 그림(전무 v1, o11-1023/master/masterplan-house-2f-v1.png, 1668×943) + 건축 도면식 이름표.
사장님 원문(1023 23:1x) "누르면 도면처럼 대각 이후 직선 그리고 그위에 건물이름", "그게 이미지 밖으로 나가지 않도록하고", "디자인 잘해".
규칙 하나로: 선 1px 상아색(#f6f3ec)에 옅은 어두운 테(3px, 28%) · 끝점 지름 5px · 사선 45° · 가로선 = 이름 폭 ·
이름 Pretendard 500 13px(영문 대문자 자간 .14em, 한글 .04em), 사진 위에서 읽히게 아주 옅은 그림자.
자리·선은 r57-o11-master-1023.js가 그림 안에서 잰다. 고른 곳(.is-selected)만 또렷하게(선 1.25px), 나머지는 옅게(38%), 0.25초.
700px 이하는 이름 대신 번호(지름 16px) + 그림 밑 범례. */
body.eg-site #main .estate-map{--o11-ivory:#f6f3ec;--o11-ink:#23292b;--o11-shade:rgba(14,18,16,.28)}
body.eg-site #main .estate-map .estate-map-stage>img{aspect-ratio:1668/943}
body.eg-site #main .estate-map .estate-map-stage>.estate-map-proxy.o11-callout{position:absolute;z-index:3;display:block;box-sizing:border-box;width:max-content;max-width:none;min-width:0;height:auto;min-height:0;margin:0;padding:0 2px 5px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--o11-ivory);font:500 13px/1.2 var(--font-body,Pretendard,sans-serif);letter-spacing:.14em;text-align:left;white-space:nowrap;word-break:keep-all;text-decoration:none;text-shadow:0 0 1px rgba(14,18,16,.5),0 1px 2px rgba(14,18,16,.55),0 0 9px rgba(14,18,16,.35);opacity:.96;pointer-events:auto;cursor:pointer;transform:none;transition:opacity .25s ease}
body.eg-site #main .estate-map .estate-map-stage>.estate-map-proxy.o11-callout.is-hangul{letter-spacing:.04em}
body.eg-site #main .estate-map .estate-map-stage>.estate-map-proxy.o11-callout::before{content:none!important;display:none!important}
body.eg-site #main .estate-map .estate-map-stage>.estate-map-proxy.o11-callout::after{content:attr(aria-label)}
body.eg-site #main .estate-map:not(.o11-callouts) .estate-map-stage>.estate-map-proxy.o11-callout{visibility:hidden}
body.eg-site #main .estate-map .estate-map-stage>.o11-callout-lines{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
body.eg-site #main .estate-map .o11-cl{opacity:.96;transition:opacity .25s ease}
body.eg-site #main .estate-map .o11-cl path{fill:none;stroke-linecap:round;stroke-linejoin:round}
body.eg-site #main .estate-map .o11-cl-case{stroke:var(--o11-shade);stroke-width:3px}
body.eg-site #main .estate-map .o11-cl-line{stroke:var(--o11-ivory);stroke-width:1px;transition:stroke-width .25s ease}
body.eg-site #main .estate-map .o11-cl-dot{fill:var(--o11-ivory);stroke:rgba(14,18,16,.55);stroke-width:1px}
/* 올림(마우스·키보드)과 고름: 그 곳의 선·이름만 또렷하게, 고른 곳이 있으면 나머지는 옅게 */
body.eg-site #main .estate-map .o11-cl:is(.is-hovered,.is-selected) .o11-cl-line{stroke-width:1.25px}
body.eg-site #main .estate-map .o11-cl:is(.is-hovered,.is-selected),
body.eg-site #main .estate-map .estate-map-stage>.estate-map-proxy.o11-callout:is(.is-hovered,.is-selected){opacity:1}
body.eg-site #main .estate-map.o11-has-selection .o11-cl:not(.is-selected,.is-hovered),
body.eg-site #main .estate-map.o11-has-selection .estate-map-stage>.estate-map-proxy.o11-callout:not(.is-selected,.is-hovered){opacity:.38}
/* 그림 밑 범례는 휴대폰만 */
body.eg-site #main .estate-map .o11-legend{display:none}
@media (max-width:700px){
body.eg-site #main .estate-map .estate-map-stage>.estate-map-proxy.o11-callout{width:16px;height:16px;padding:0;border-radius:50%;background:var(--o11-ink);color:var(--o11-ivory);font:600 10px/16px var(--font-body,Pretendard,sans-serif);letter-spacing:0;text-align:center;text-shadow:none;box-shadow:0 0 0 1.5px var(--o11-ivory),0 1px 3px rgba(14,18,16,.45)}
body.eg-site #main .estate-map .estate-map-stage>.estate-map-proxy.o11-callout::after{content:attr(data-o11-no)}
body.eg-site #main .estate-map .o11-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin:12px 0 0;padding:0;list-style:none;counter-reset:none}
body.eg-site #main .estate-map .o11-legend>li{margin:0;padding:0;min-width:0}
body.eg-site #main .estate-map .o11-legend>li::before{content:none}
body.eg-site #main .estate-map .o11-legend-item{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:0;border:0;border-bottom:1px solid #dce0dd;border-radius:0;background:none;color:var(--o11-ink);font:500 13px/1.3 var(--font-body,Pretendard,sans-serif);letter-spacing:.06em;text-align:left;cursor:pointer;transition:opacity .25s ease}
body.eg-site #main .estate-map .o11-legend-item::before{content:attr(data-o11-no);flex:none;width:16px;height:16px;border-radius:50%;background:var(--o11-ink);color:var(--o11-ivory);font:600 10px/16px var(--font-body,Pretendard,sans-serif);letter-spacing:0;text-align:center}
body.eg-site #main .estate-map:has(.o11-legend-item.is-current) .o11-legend-item:not(.is-current){opacity:.5}
}
@media (prefers-reduced-motion:reduce){
body.eg-site #main .estate-map :is(.o11-cl,.o11-cl-line,.o11-legend-item),
body.eg-site #main .estate-map .estate-map-stage>.estate-map-proxy.o11-callout{transition:none}
}
/* 사업 개요 사진: PC(701px 이상)는 580:552 칸에 가운데 채움 그대로. 700px 이하는 옛 규칙의 그림 비율(920/937) 대신 이 그림 비율로(늘림 없음). */
@media (max-width:700px){
body.eg-site #main .estate-spaces>.f2-site-overview .f2-site-overview-photo img{aspect-ratio:1730/909}
}
/* 부대시설 세 칸: 사업 개요 구역 다음 줄 전체 폭에 나란히 두고, 700px 이하는 차례로 쌓는다.
사진 비율이 서로 달라(1.78·1.58·1.59) 칸을 8:5로 맞추고 가운데 채움(늘림 없음). 이름은 제목 글꼴 19px. */
body.eg-site #main .estate-spaces>.f2-site-overview>.o11-fac-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap,32px);margin:56px 0 0;padding:0;list-style:none}
body.eg-site #main .o11-fac-cards>.o11-fac-card{margin:0;padding:0;min-width:0}
body.eg-site #main .o11-fac-card>figure{margin:0}
body.eg-site #main .o11-fac-card img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:50% 50%}
body.eg-site #main .o11-fac-card figcaption{margin:16px 0 0;font:400 var(--type-h3,19px)/1.5 var(--font-heading,'Noto Serif KR',serif);letter-spacing:var(--tracking-heading,-.035em);color:#30332f;word-break:keep-all}
@media (max-width:700px){
body.eg-site #main .estate-spaces>.f2-site-overview>.o11-fac-cards{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:16px}
body.eg-site #main .o11-fac-card figcaption{margin-top:12px;font-size:17px}
}