/* 홈 '공간 종류'에서 공유창고 부각(대표 11/12): 카드에 마우스·포커스를 올리면 아래 라커 벽이 살아나고,
   스크롤로 구간이 들어오면 라커 문이 차례로 채워진다. transform·opacity만, 동작 줄이기면 완성된 모습. */
.cats>a:first-child .ci{box-shadow:0 0 0 2px var(--mint);transition:box-shadow .2s,transform .25s}
.cats>a:first-child small{color:var(--mint-strong);font-weight:700}
.cats.hs-on>a:first-child .ci{transform:scale(1.06)}
.cats>a:first-child:hover .ci,.cats>a:first-child:focus-visible .ci,.cats.hs-hl>a:first-child .ci{box-shadow:0 0 0 4px var(--mint);transform:scale(1.1)}
.hs-feat{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:center;background:#fff;border-radius:20px;padding:22px 24px;box-shadow:0 0 0 1px rgba(0,0,0,.04);transition:transform .3s,box-shadow .3s}
.hs-feat.hs-hl{transform:translateY(-3px);box-shadow:0 0 0 2px var(--mint),0 14px 30px rgba(0,0,0,.08)}
.hs-k{margin:0;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--mint-strong)}
.hs-dot{width:8px;height:8px;border-radius:50%;background:var(--mint)}
.hs-feat h3{margin:8px 0 6px;font-size:clamp(19px,2.2vw,24px);line-height:1.35}
.hs-feat p.hs-d{margin:0 0 12px;color:var(--muted);font-size:15px;line-height:1.6}
.hs-lg{display:flex;gap:14px;margin:0 0 14px;font-size:12.5px;color:var(--muted)}
.hs-lg span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--mint)}
.hs-lg span.u::before{background:#8FA3A6}
.hs-svg{width:100%;height:auto;display:block}
.hs-fl{fill:#F1F1EF}
.hs-lk .f{stroke:#fff;stroke-width:1.2}
.hs-lk.m .f{fill:var(--mint)}.hs-lk.m .s{fill:#00A896}.hs-lk.m .t{fill:#5FDACB}
.hs-lk.u .f{fill:#8FA3A6}.hs-lk.u .s{fill:#73878A}.hs-lk.u .t{fill:#B3C2C4}
.hs-lk .h{fill:rgba(255,255,255,.85)}
.hs-js .hs-lk{opacity:0;transform:translateY(-12px)}
.hs-js .hs-lk.in{opacity:1;transform:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.hs-feat.hs-hl .hs-lk.m.in .f{animation:hs-glow 1.2s ease-in-out 1}
@keyframes hs-glow{50%{opacity:.6}}
@media (max-width:760px){.hs-feat{grid-template-columns:1fr;padding:18px}.hs-vis{order:-1}}
@media (prefers-reduced-motion:reduce){.hs-js .hs-lk{opacity:1;transform:none}.hs-feat,.cats .ci{transition:none}.hs-feat.hs-hl .hs-lk .f{animation:none}}
.hs-lg span.x::before{display:none}
.cats{padding-top:6px;padding-left:4px}
@media (max-width:760px){.cats.hs-on>a:first-child .ci{transform:none}}
/* 연희점 예시(11/12): 바닥·통로·출입문, 작은 칸(CS)은 낮게 */
a.hs-vis{display:block;border-radius:14px}
a.hs-vis:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
.hs-ai{fill:#ECECEA}.hs-ng{fill:#DCDCD8}.hs-en{fill:var(--mint)}.hs-em{fill:#C9CFCF}
.hs-lk.cs .f{opacity:.92}
.hs-lg span.e::before{background:none;border:2px solid var(--mint);box-sizing:border-box}
.hs-lg{flex-wrap:wrap;row-gap:4px}.hs-lg span{white-space:nowrap}
@media (max-width:760px){.hs-lg span.x{flex-basis:100%;margin-left:0!important}}
