/* 설문 약도(FB6 시안) — 3D 약도 + 지도 아래 # 태그 */
.qmap{position:relative;display:flex;flex-direction:column;border-radius:14px;background:linear-gradient(180deg,#f7faf8 0%,#eef4f0 100%);border:1px solid var(--line);overflow:hidden;min-height:0}
.qmp-svg{display:block;flex:1;min-height:0;width:100%;height:100%}
.qmp-svg text{font-family:Pretendard Variable,Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.qmp-ttl{position:absolute;left:10px;top:9px;z-index:2;display:flex;align-items:baseline;gap:6px;max-width:calc(100% - 28px);padding:4px 10px;border-radius:10px;background:rgba(255,255,255,.86);box-shadow:0 1px 4px rgba(15,23,42,.08);pointer-events:none}
.qmp-ttl:empty{display:none}
.qmp-ttl b{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.qmp-ttl span{font-size:12.5px;font-weight:600;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qmp-ttl.qmp-tin{animation:qmTin .45s cubic-bezier(.2,.8,.2,1) both}
.qmp-hint{position:absolute;left:50%;top:44%;z-index:2;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(15,23,42,.08);text-align:center;font-size:12.5px;font-weight:700;color:var(--ink3);pointer-events:none}
/* 지역 고르기 전 = 같은 동네 밑그림을 흐리게(판이 납작하지 않게) → 지역을 고르면 또렷해짐 */
.qmp-world{transition:opacity .5s ease,filter .5s ease}
.qmap:not(.qmp-on) .qmp-world{opacity:.45;filter:saturate(.35)}
.qmp-hint[hidden]{display:none}
/* 지도 아래 # 태그 — 글자만(상자·점 없음) */
.qmp-tags{display:flex;flex-wrap:wrap;gap:2px 10px;padding:2px 14px 10px;font-size:13px;font-weight:700;line-height:1.5;color:#334155;letter-spacing:-.01em}
.qmp-tags[hidden]{display:none}
.qmp-tags span::before{content:'#';margin-right:1px;color:var(--accent)}
.qmp-tags .qmp-tin2{animation:qmTin .4s cubic-bezier(.2,.8,.2,1) both}
/* 지도 안 글자 — 가격표(짙은 알약) · 직장 이름(글자만, 흰 테두리) */
.qmp-lb .ql-bg{fill:#111c30;stroke:#111c30;filter:drop-shadow(0 1px 2px rgba(15,23,42,.18))}
.qmp-lb .ql-t{font-size:13.5px;font-weight:800;fill:#fff;letter-spacing:-.01em}
.qmp-tx .qtx{font-size:12.5px;font-weight:800;fill:#0f172a;paint-order:stroke;stroke:#fff;stroke-width:3.4px;stroke-linejoin:round;letter-spacing:-.01em}
.qmp-tx .qtx-s{fill:#2563eb;font-weight:800}
.qmp-p{font-size:10px;font-weight:800;fill:#fff;text-anchor:middle}
/* 마무리 — 맞춤 단지 N곳 */
.qmp-finbox{position:absolute;left:50%;top:42%;z-index:4;transform:translate(-50%,-50%);display:flex;align-items:baseline;gap:4px;padding:10px 18px;border-radius:999px;background:#111c30;color:#fff;box-shadow:0 10px 30px rgba(15,23,42,.28);animation:qmFin .9s cubic-bezier(.2,.8,.2,1) both;white-space:nowrap}
.qmp-finbox span{font-size:13px;font-weight:700;opacity:.85}
.qmp-finbox b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.qmp-finpin{transform-box:fill-box;transform-origin:50% 100%;animation:qmPop .45s cubic-bezier(.3,1.5,.5,1) both}
/* 들어오기 연출 */
.qmp-it{transform-box:fill-box}
.qmp-a-fade{animation:qmFade .5s ease-out both}
.qmp-a-grow{transform-origin:50% 50%;animation:qmGrow .55s cubic-bezier(.2,.8,.2,1) both}
.qmp-a-pop{transform-origin:50% 100%;animation:qmPop .5s cubic-bezier(.3,1.5,.5,1) both}
.qmp-a-rise{transform-origin:50% 100%;animation:qmRise .6s cubic-bezier(.2,.9,.25,1.08) both}
.qmp-a-lab{transform-origin:50% 100%;animation:qmPop .45s cubic-bezier(.3,1.4,.5,1) .15s both}
.qmp-a-ch{animation:qmCh .35s ease-out both}
.qmp-a-draw .qmp-dr{stroke-dasharray:1;animation:qmDraw .9s cubic-bezier(.4,0,.2,1) both}   /* 연출을 끄면(움직임 줄이기) 그대로 보이게 — 처음 값은 keyframes 에만 */
.qmp-out{transition:opacity .25s;opacity:0}
.qmp-glow{animation:qmGlow 2.4s ease-in-out infinite}
.qmp-pulse{transform-box:fill-box;transform-origin:50% 50%;animation:qmPulse 2.6s ease-in-out infinite}
.qmp-spark{transform-box:fill-box;transform-origin:50% 50%;animation:qmSpark 1.8s ease-in-out infinite}
@keyframes qmFade{from{opacity:0}to{opacity:1}}
@keyframes qmGrow{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes qmPop{0%{opacity:0;transform:translateY(-6px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes qmRise{0%{opacity:0;transform:scaleY(0)}30%{opacity:1}100%{opacity:1;transform:none}}
@keyframes qmCh{0%{opacity:.25}100%{opacity:1}}
@keyframes qmDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes qmTin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes qmGlow{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes qmPulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes qmSpark{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@keyframes qmFin{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.qmap *{animation:none!important;transition:none!important}}