:root{
      --red:#bb1730;
      --red-dark:#951125;
      --red-soft:#fff2f4;
      --green:#21463b;
      --green-2:#2f5c4e;
      --green-3:#447466;
      --green-soft:#edf5f2;
      --blue:#427cff;
      --ink:#202421;
      --muted:#777e79;
      --line:#e6e9e7;
      --soft:#f5f6f5;
      --panel-width:430px;
      --shadow:0 14px 38px rgba(18,45,37,.16);
    }
    *{box-sizing:border-box}
    html,body{width:100%;height:100%;margin:0}
    body{overflow:hidden;background:#eef1ef;color:var(--ink);font-family:Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
    button,input,select{font:inherit}
    button{cursor:pointer}
    img{display:block;max-width:100%}
    [hidden]{display:none!important}

    .app{position:relative;display:flex;width:100%;height:100%;overflow:hidden}
    .detail-panel{position:relative;z-index:1200;width:0;flex:0 0 auto;overflow:hidden;background:#fff;border-right:1px solid var(--line);opacity:0;transform:translateX(-18px);transition:width .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,transform .32s cubic-bezier(.22,1,.36,1);box-shadow:10px 0 26px rgba(18,45,37,.08)}
    .app.panel-open .detail-panel{width:var(--panel-width);opacity:1;transform:none}
    .panel-scroll{width:var(--panel-width);height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:80px;scrollbar-width:thin;scrollbar-color:#bfc7c2 transparent}
    .panel-scroll::-webkit-scrollbar{width:7px}.panel-scroll::-webkit-scrollbar-thumb{background:#bfc7c2;border-radius:99px}
    .detail-panel.cluster-select-mode .panel-scroll>:not(.cluster-complex-select){display:none!important}.detail-panel.cluster-select-mode .fixed-inquiry{display:none}.cluster-complex-select{min-height:100%;background:#f5f6f5}.cluster-select-head{position:relative;padding:28px 60px 22px 22px;border-bottom:1px solid var(--line);background:#fff}.cluster-select-head>span{display:inline-block;margin-bottom:10px;padding:5px 9px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:10px;font-weight:900}.cluster-select-head h1{margin:0 0 8px;font-size:22px;line-height:1.35}.cluster-select-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.cluster-select-close{position:absolute;right:15px;top:16px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;color:#232925;font-size:26px;line-height:1}.cluster-select-list{display:grid;gap:9px;padding:14px}.cluster-select-item{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 13px;gap:11px;align-items:center;min-height:76px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-align:left}.cluster-select-item:hover{border-color:#98b4aa}.cluster-select-info{min-width:0}.cluster-select-info b{display:block;overflow:hidden;margin-bottom:6px;font-size:14px;white-space:nowrap;text-overflow:ellipsis}.cluster-select-info small{display:block;overflow:hidden;color:var(--muted);font-size:10px;white-space:nowrap;text-overflow:ellipsis}.cluster-select-count{text-align:right}.cluster-select-count strong{display:block;color:var(--green);font-size:17px}.cluster-select-count small{display:block;margin-top:2px;color:#939995;font-size:9px}.cluster-select-arrow{color:var(--green);font-size:21px;font-style:normal}

    .hero{position:relative;height:214px;overflow:hidden;background:linear-gradient(135deg,#dce9e4,#a8c3b8)}
    .hero img{width:100%;height:100%;object-fit:cover;transition:opacity .18s ease}
    .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.22))}
    .panel-close{position:absolute;z-index:50;right:14px;top:14px;width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(255,255,255,.94);color:#232925;font-size:27px;line-height:1;box-shadow:0 8px 20px rgba(0,0,0,.16)}.panel-close:hover{background:#fff;color:var(--red)}
    .image-count{position:absolute;z-index:3;right:15px;bottom:15px;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:800}
    .image-credit{position:absolute;z-index:3;left:14px;bottom:14px;max-width:240px;padding:4px 7px;border-radius:6px;background:rgba(0,0,0,.48);color:#fff;font-size:9px;line-height:1.3}
    .hero-slide-button{position:absolute;z-index:4;top:50%;width:36px;height:36px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(14,29,24,.48);color:#fff;font-size:27px;line-height:1}.hero-slide-button.prev{left:12px}.hero-slide-button.next{right:12px}.hero-slide-button:hover,.hero-slide-button:focus-visible{background:rgba(14,29,24,.78);outline:2px solid #fff;outline-offset:2px}.hero-slide-dots{position:absolute;z-index:4;left:50%;bottom:17px;display:flex;gap:5px;transform:translateX(-50%)}.hero-slide-dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.52)}.hero-slide-dots button.active{width:16px;border-radius:999px;background:#fff}
    .type-data-empty{margin:0;padding:12px 2px;color:#7a837e;font-size:13px}

    .portfolio-strip{display:grid;grid-template-columns:repeat(4,1fr);height:49px;border-bottom:1px solid var(--line);background:#fff}
    .portfolio-strip div{display:flex;align-items:center;justify-content:center;gap:4px;border-right:1px solid var(--line);color:#505650;font-size:12px}.portfolio-strip div:last-child{border-right:0}.portfolio-strip b{color:var(--blue);font-size:14px}

    .complex-intro{padding:31px 25px 24px;text-align:center}
    .complex-intro h1{margin:0 0 10px;font-size:24px;letter-spacing:-1px}
    .intro-line{color:#777d79;font-size:13px;line-height:1.75}.intro-line strong{color:var(--green)}
    .policy-line{margin-top:3px;color:var(--blue);font-size:12px;font-weight:700}
    .sample-note{margin-top:8px;color:#a0a5a1;font-size:10px}

    .quick-inquiry{margin:0 18px 18px;width:calc(100% - 36px);height:48px;border:1px solid #e9ecea;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#4a514d;font-size:13px;font-weight:700;box-shadow:0 5px 16px rgba(18,45,37,.04)}
    .quick-inquiry span:first-child:before{content:"💬";margin-right:7px}.quick-inquiry b{color:var(--red)}

    /* v2.5.49(2026-08-24): 각지고 통짜로 칠해진 옛날 탭 버튼 대신,
       이 프로젝트에 이미 있는 세그먼트 컨트롤 톤(portal.css의
       .auth-tabs -- 로그인/회원가입 탭)으로 통일. 연한 배경 안에
       알약 모양으로 활성 탭을 표시.
       v2.5.50: 활성 탭 색을 "타입" 선택칩(.type-tab.active, 68번째
       줄)과 정확히 같은 색으로 맞춤 -- 흰 배경+초록 글자 대신 초록
       반투명 채움(rgba(30,94,72,.5))+흰 글자로 통일해 달라는 요청. */
    .detail-tabs{position:sticky;top:0;z-index:20;display:flex;gap:4px;padding:6px 12px;border-top:8px solid #f1f3f2;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(10px)}
    .detail-tab{position:relative;flex:1;border:0;border-radius:10px;padding:12px 4px;background:transparent;color:#66706a;font-size:13px;font-weight:800;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
    .detail-tab.active{color:#fff;background:rgba(30,94,72,.5);box-shadow:0 3px 10px rgba(22,50,40,.1)}
    .detail-tab:not(.active):hover{color:var(--red)}

    .section{padding:24px 18px 4px;border-bottom:8px solid #f2f4f3}
    .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.section-head h2{margin:0;font-size:19px;letter-spacing:-.5px}.section-head small{color:#9ba09d;font-size:10px}
    .basic-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden}
    .basic-item{min-height:70px;padding:13px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.basic-item:nth-child(2n){border-right:0}.basic-item:nth-last-child(-n+2){border-bottom:0}.basic-item span{display:block;color:#989e9a;font-size:10px;margin-bottom:7px}.basic-item b{font-size:13px;color:#353b37}

    .type-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px;padding-bottom:10px;border-bottom:1px solid var(--line)}
    .type-tab{min-width:74px;padding:8px 10px;border:1px solid #e0e5e2;border-radius:8px;background:#fff;color:#59645e;text-align:left}.type-tab strong{display:block;font-size:12px}.type-tab small{display:block;margin-top:3px;color:#929a95;font-size:9px;font-weight:600}.type-tab.active{border-color:var(--green);background:rgba(30,94,72,.5);color:#fff}.type-tab.active small{color:rgba(255,255,255,.82)}
    .type-summary{display:flex;align-items:baseline;gap:7px;font-size:14px;font-weight:850;margin:20px 0 10px}.type-summary span{color:#8f9692;font-size:11px;font-weight:500}
    .floorplan-box{height:245px;display:grid;place-items:center;background:#fff}
    .floorplan-svg{width:190px;max-height:215px;filter:drop-shadow(0 8px 12px rgba(31,48,42,.08))}
    .type-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .type-metric{min-width:0;padding:14px 10px;border-right:1px solid var(--line)}.type-metric:last-child{border-right:0}.type-metric>span{display:block;color:#909692;font-size:10px;margin-bottom:5px}.type-metric b{display:block;font-size:13px;line-height:1.4}.type-metric b small{display:block;margin-top:2px;color:#8b938e;font-size:9px;font-weight:600}
    .portfolio-badges{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border:1px solid var(--line);border-radius:11px;overflow:hidden}.portfolio-badges div{padding:11px;text-align:center;border-right:1px solid var(--line);font-size:11px}.portfolio-badges div:last-child{border-right:0}.portfolio-badges b{color:var(--blue);font-size:14px}

    .filters{display:flex;gap:7px;margin-bottom:14px}.filters select{min-width:0;flex:1;height:38px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#505752;font-size:11px}
    .portfolio-list{display:grid;gap:13px;padding-bottom:18px}.portfolio-card{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#fff;transition:.18s ease;cursor:pointer}.portfolio-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(18,45,37,.09)}
    .portfolio-thumb{position:relative;height:158px;overflow:hidden;background:#e6ebe8}.portfolio-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .28s ease}.portfolio-card:hover .portfolio-thumb img{transform:scale(1.035)}.portfolio-thumb:after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.2));pointer-events:none}.photo-source{position:absolute;z-index:3;right:10px;bottom:9px;padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.52);color:#fff;font-size:8px;font-weight:700}
    .thumb-tag{position:absolute;z-index:3;left:11px;top:11px;padding:5px 8px;border-radius:7px;background:var(--red);color:#fff;font-size:9px;font-weight:900}
    .portfolio-body{padding:13px 14px}.company{color:var(--red);font-size:11px;font-weight:900}.portfolio-title{margin:5px 0 9px;font-size:14px;font-weight:850;line-height:1.45}.meta{display:flex;flex-wrap:wrap;gap:5px}.meta span{padding:5px 7px;border-radius:6px;background:var(--green-soft);color:#526159;font-size:10px}.portfolio-foot{display:flex;align-items:center;justify-content:space-between;margin-top:11px;color:#969c98;font-size:10px}.portfolio-foot button{border:0;background:transparent;color:var(--green);font-size:10px;font-weight:900}

    .fixed-inquiry{position:absolute;z-index:25;left:0;right:0;bottom:0;width:var(--panel-width);height:68px;padding:10px 14px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
    .fixed-inquiry button{width:100%;height:48px;border:0;border-radius:11px;background:var(--red);color:#fff;font-size:14px;font-weight:900;box-shadow:0 9px 18px rgba(187,23,48,.2)}

    .map-shell{position:relative;min-width:0;flex:1;height:100%}.map{width:100%;height:100%;background:#dfe7e3}
    .topbar{position:absolute;z-index:2500;left:14px;right:14px;top:14px;display:flex;align-items:center;gap:12px;pointer-events:none}
    .search-box,.top-actions{pointer-events:auto;background:rgba(255,255,255,.96);border:1px solid rgba(33,70,59,.11);box-shadow:0 10px 28px rgba(18,45,37,.12);backdrop-filter:blur(11px)}
    /* v2.5.61(2026-08-24): 로고(.brand-box)만 흰 판 없이 지도 위에
       투명하게 떠 있도록 -- 검색창/버튼들은 가독성 때문에 흰 배경이
       필요하지만 로고는 그 자체로 이미 잘 보여서 굳이 판이 필요 없다는
       요청. background/border/shadow/blur를 명시적으로 없앰(검색창·
       버튼들과 묶여 있던 공용 규칙에서 분리).
       v2.5.62(2026-08-24): 완전 투명은 로고가 빨강/초록이라 도로(주황·
       빨강 계열)나 공원(초록) 위에 겹치면 대비가 떨어져서, 완전
       무배경 대신 아주 옅은 밝은 회색을 낮은 투명도로만 깔아 살짝
       대비를 보강한다 -- 흰 카드 느낌(예전 rgba(255,255,255,.96)+
       테두리+그림자+blur(11px))으로는 절대 안 돌아가고, 배경 톤만
       살짝 준다(테두리·그림자 없음, blur도 아주 약하게만). */
    .brand-box{pointer-events:auto;background:rgba(244,246,245,.4);border:0;box-shadow:none;backdrop-filter:blur(3px);height:64px;min-width:220px;display:flex;align-items:center;padding:10px 18px;border-radius:14px;text-decoration:none;cursor:pointer}.brand-box img{width:170px;height:auto}
    .search-box{position:relative;height:64px;flex:1;max-width:520px;border-radius:14px;padding:10px}.search-box input{width:100%;height:42px;padding:0 43px 0 16px;border:1px solid #dfe4e1;border-radius:10px;background:#fff;outline:none;color:#303632}.search-box input:focus{border-color:var(--green)}.search-icon{position:absolute;right:22px;top:10px;bottom:10px;width:26px;display:flex;align-items:center;justify-content:center;color:var(--green);pointer-events:none}.search-icon svg{width:26px;height:26px;display:block}
    /* 포트폴리오 상세 패널이 열려있을 때: 로고는 패널 뒤로 숨기고, 검색창은
       패널 오른쪽 끝과 로그인 버튼 사이 빈 공간으로 옮긴다(topbar가 원래
       패널과 같은 x좌표에서 시작해 겹쳐 보이던 문제). */
    .app:has(.portfolio-detail-panel.open) .brand-box{display:none}
    .app:has(.portfolio-detail-panel.open) .topbar{left:calc(min(540px,100vw - var(--panel-width)) + 28px)}
    /* v2.5.0: 업체 정보 패널(.company-detail-panel, 오른쪽에서 열림)이
       열려있을 때 topbar(검색창·상단 버튼)가 그 위에 겹쳐 보이던 문제.
       포트폴리오 상세 패널(왼쪽 shift)과 동시에 열려도 서로 다른
       속성(left/right)이라 자동으로 같이 적용된다. */
    .app:has(.company-detail-panel.open) .topbar{right:calc(440px + 28px)}
    /* 단지 기본정보 패널(.detail-panel, 마커 클릭 시)도 열려있는 동안은
       로고를 숨기고 검색창만 보이게 한다. 이 패널은 flex 레이아웃이라
       옆으로 밀려나므로 topbar 위치 자체는 이미 정상 — 로고만 숨기면 됨. */
    .app.panel-open .brand-box{display:none}
    .search-results{position:absolute;left:0;right:0;top:70px;display:none;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)}.search-results.open{display:block}.search-result{width:100%;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;transition:background-color .14s ease}.search-result:last-child{border-bottom:0}.search-result:hover,.search-result:focus-visible,.search-result[aria-selected="true"]{background:var(--green-soft);outline:0}.search-result.selecting{cursor:progress}.search-result>*{pointer-events:none}.search-result-copy{min-width:0;display:block;color:var(--text)}.search-result-copy strong{display:block;overflow:hidden;color:var(--text);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.search-result-copy small{display:block;margin-top:4px;overflow:hidden;color:#7e8782;font-size:10px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.search-result-tail{flex:0 0 auto;color:var(--red);font-size:11px;font-weight:900}.search-result-kakao .search-result-tail{color:var(--muted);font-weight:700}.search-result-empty{padding:16px;color:#7d8580;font-size:12px}
    .top-actions{margin-left:auto;height:64px;display:flex;align-items:center;gap:6px;padding:9px;border-radius:14px}.top-actions button{height:42px;padding:0 13px;border:0;border-radius:9px;background:#fff;color:#4e5752;font-size:11px;font-weight:800}.top-actions .primary{background:var(--red);color:#fff}

    .region-filter{position:absolute;z-index:850;left:14px;top:92px;display:flex;gap:6px;padding:6px;border:1px solid rgba(33,70,59,.11);border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 9px 24px rgba(18,45,37,.11)}
    .region-btn{height:35px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#626b66;font-size:11px;font-weight:850}.region-btn.active{background:rgba(30,94,72,.5);color:#fff}
    .map-help{position:absolute;z-index:800;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(33,70,59,.1);border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 9px 22px rgba(18,45,37,.11);color:#5d6661;font-size:11px;pointer-events:none}.map-help i{width:11px;height:11px;border-radius:50%;background:var(--green)}

    .leaflet-div-icon{border:0!important;background:transparent!important}.leaflet-control-zoom{border:0!important;box-shadow:var(--shadow)!important}.leaflet-control-zoom a{color:var(--green)!important;border-color:var(--line)!important}.leaflet-control-attribution{font-size:9px!important}
    .marker-icon,.selected-marker-icon{overflow:visible!important;background:transparent!important;border:0!important}
    .selected-marker-icon.leaflet-marker-icon{pointer-events:none!important}
    .count-marker,.portfolio-cluster{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:rgba(30,94,72,.5);color:#fff;font-weight:900;line-height:1;border:2px solid rgba(26,74,58,.75);box-shadow:0 8px 17px rgba(24,67,54,.28);transition:transform .16s ease,background .16s ease;pointer-events:auto}
    .count-marker:hover{transform:scale(1.08);background:#c94d5b;border-color:#b84250}
    .portfolio-cluster{border:0}.portfolio-cluster.small,.portfolio-cluster.medium,.portfolio-cluster.large{width:44px;height:44px}.marker-icon,.marker-cluster,.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{width:44px!important;height:44px!important;background:transparent!important}.marker-cluster>div,.marker-cluster-small>div,.marker-cluster-medium>div,.marker-cluster-large>div{width:44px!important;height:44px!important;margin:0!important}.marker-cluster span{line-height:1!important}
    .marker-number{display:block;font-size:13px;font-weight:950;line-height:1}.marker-style-2 .marker-number{margin-top:2px;font-size:14px}.marker-style-3 .marker-number{margin-top:2px;font-size:14px}
    .marker-copy{display:block;color:#eaf5f0;font-size:9px;font-weight:900;line-height:1;letter-spacing:-.1px}.marker-copy.stacked{display:flex;flex-direction:column;gap:0;font-size:6.5px;line-height:.95}.marker-copy i{font-style:normal}
    .selected-wrap{position:relative;width:220px;height:132px;pointer-events:none;animation:pop .28s cubic-bezier(.22,1,.36,1) both}@keyframes pop{from{opacity:0;transform:scale(.66)}to{opacity:1;transform:scale(1)}}
    .fan-svg{position:absolute;left:0;top:0;width:220px;height:118px;overflow:visible;filter:drop-shadow(0 6px 10px rgba(22,55,45,.2));pointer-events:none}.fan-sector{cursor:pointer;pointer-events:visiblePainted;outline:none;transform-origin:110px 70px;transition:filter .15s ease,transform .15s ease}.fan-sector:hover{filter:brightness(1.14);transform:scale(1.025)}.fan-sector:focus{outline:none}.fan-sector path{transition:fill .16s ease,stroke-width .16s ease,filter .16s ease}.fan-sector.active path{fill:#c94d5b!important;stroke:#fff;stroke-width:2;filter:brightness(1.02)}.fan-sector text{pointer-events:none}.fan-label{font-family:Pretendard,"Noto Sans KR",sans-serif;fill:#fff;text-anchor:middle;font-size:8.5px;font-weight:900}.fan-count{fill:#edf7f3;font-size:7px;font-weight:700}
    .selected-sign{position:absolute;z-index:5;left:50%;top:45px;width:58px;min-height:68px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 5px 6px;border:1px solid rgba(33,70,59,.14);border-radius:12px;background:#fff;color:var(--green);box-shadow:0 6px 13px rgba(18,45,37,.23);text-align:center;pointer-events:auto}.selected-sign:after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:#fff;border-bottom:0}.selected-sign strong{display:-webkit-box;width:48px;max-height:36px;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;word-break:keep-all;font-size:9px;line-height:1.25;letter-spacing:-.35px}.selected-sign span{margin-top:4px;color:var(--red);font-size:7px;font-weight:900}



    .map-quick-controls{position:absolute;z-index:880;right:14px;top:92px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
    .company-view-toggle{position:static;height:46px;padding:0 17px;border:0;border-radius:13px;background:rgba(255,255,255,.97);color:var(--green);font-size:12px;font-weight:900;box-shadow:0 10px 28px rgba(18,45,37,.16);backdrop-filter:blur(11px)}
    .company-view-toggle.active{background:rgba(30,94,72,.5);color:#fff}.company-view-toggle .dot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--red)}.company-view-toggle.active .dot{background:#fff}
    .area-unit-control{position:static;height:38px;display:flex;align-items:center;gap:3px;padding:4px 7px;border:1px solid rgba(33,70,59,.11);border-radius:11px;background:rgba(255,255,255,.96);box-shadow:0 9px 24px rgba(18,45,37,.12);backdrop-filter:blur(11px)}.area-unit-control button{width:30px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:#727b76;font-size:11px;font-weight:900}.area-unit-control button.active{background:rgba(30,94,72,.5);color:#fff}.area-unit-control>span{color:#c1c7c3;font-size:11px}
    .marker-style-control{position:absolute;z-index:879;right:14px;top:196px;display:flex;flex-direction:column;gap:5px;padding:6px;border:1px solid rgba(33,70,59,.11);border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(18,45,37,.13);backdrop-filter:blur(11px)}
    .marker-style-btn{height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#68716c;font-size:10px;font-weight:900}.marker-style-btn:hover{background:var(--green-soft);color:var(--green)}.marker-style-btn.active{background:rgba(30,94,72,.5);color:#fff}
    .company-marker-wrap{position:relative;pointer-events:auto;background:transparent!important;border:0!important;overflow:visible!important}
    .company-map-marker{display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-weight:950;cursor:pointer}
    .company-map-marker.regular{width:24px;height:24px;border:2px solid var(--green);border-radius:50%;background:#fff;box-shadow:0 5px 12px rgba(18,45,37,.22)}
    .company-map-marker.regular:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
    .company-map-marker.premium{width:48px;height:52px;flex-direction:column;clip-path:polygon(50% 0,100% 35%,82% 100%,18% 100%,0 35%);background:#b9ff32;color:#17382f;filter:drop-shadow(0 8px 10px rgba(18,45,37,.28))}
    .company-map-marker.premium .premium-symbol{font-size:16px;line-height:1;font-weight:1000}.company-map-marker.premium small{margin-top:2px;font-size:6px;font-weight:950;letter-spacing:.25px}
    .regular-company-cluster{width:24px;height:24px;display:grid;place-items:center;border:2px solid var(--green);border-radius:50%;background:#fff;color:var(--green);font-size:9px;font-weight:950;line-height:1;box-shadow:0 5px 12px rgba(18,45,37,.22)}
    .company-marker-cluster{background:transparent!important;border:0!important}
    .company-detail-panel{position:absolute;z-index:2300;right:0;top:0;bottom:0;width:min(440px,92vw);background:#fff;border-left:1px solid var(--line);box-shadow:-14px 0 38px rgba(18,45,37,.18);opacity:0;pointer-events:none;transform:translateX(24px);transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1);overflow:hidden}.company-detail-panel.open{opacity:1;pointer-events:auto;transform:none}.company-detail-scroll{height:100%;overflow-y:auto;background:#f4f6f5}.company-detail-head{position:sticky;z-index:10;top:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(10px)}.company-detail-head h2{margin:0;font-size:17px}.company-detail-close{width:38px;height:38px;border:0;border-radius:50%;background:#f2f4f3;color:#333;font-size:25px;line-height:1}.company-profile{padding:22px;background:#fff;border-bottom:8px solid #eef1ef}.company-profile-top{display:grid;grid-template-columns:58px minmax(0,1fr) 42px;gap:13px;align-items:center}.company-profile-logo{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:rgba(30,94,72,.5);color:#fff;font-size:14px;font-weight:900}.company-profile h1{margin:0 0 5px;font-size:21px}.company-profile .premium-badge{display:inline-block;margin-left:6px;padding:3px 6px;border-radius:999px;background:var(--red-soft);color:var(--red);font-size:8px;vertical-align:middle}.company-location{margin-top:15px;padding:12px;border-radius:10px;background:var(--green-soft);color:#526159;font-size:11px;line-height:1.6}.company-intro{margin:14px 0 0;color:#626a65;font-size:12px;line-height:1.7}.company-portfolio-section{padding:18px 18px 30px}.company-portfolio-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.company-portfolio-head h3{margin:0;font-size:17px}.company-search{position:relative;display:block;margin-bottom:17px}.company-search input{width:100%;height:43px;padding:0 42px 0 13px;border:1px solid var(--line);border-radius:10px;background:#fff;outline:none}.company-search input:focus{border-color:var(--green)}.company-search span{position:absolute;right:13px;top:50%;width:21px;height:21px;display:grid;place-items:center;transform:translateY(-50%);color:var(--green);font-size:19px;line-height:1;pointer-events:none}.company-portfolio-list{display:grid;gap:11px}.company-portfolio-card{display:grid;grid-template-columns:116px 1fr;min-height:102px;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer}.company-portfolio-card img{width:116px;height:100%;object-fit:cover}.company-portfolio-card div{padding:11px}.company-portfolio-card b{display:block;font-size:12px;line-height:1.4}.company-portfolio-card small{display:block;margin-top:6px;color:#858c87;font-size:9px;line-height:1.5}.company-portfolio-empty{padding:25px 10px;border:1px dashed #cbd3ce;border-radius:10px;text-align:center;color:#828a85;font-size:11px;background:#fff}
    .data-status{position:absolute;z-index:840;left:14px;bottom:18px;padding:8px 11px;border-radius:9px;background:rgba(255,255,255,.94);box-shadow:0 8px 20px rgba(18,45,37,.1);color:#66706a;font-size:10px}.data-status.good{color:#178c5b}.data-status.warn{color:#a36a12}
    /* v2.5.59(2026-08-24): PC 지도 우측 하단 "내 주변 시공사례" 위젯.
       기존 지도 컨트롤들(.data-status/.map-help/.marker-style-control)
       과 같은 "떠 있는 반투명 카드" 톤(테두리·그림자·blur)을 그대로
       재사용해 이질감 없게 맞춘다. 지도 라이브러리 자체 축척 컨트롤이
       bottomright에 이미 있어서(스크립트의 MapProvider.control.scale)
       겹치지 않게 bottom을 충분히 띄운다.
       v2.5.60(2026-08-24): 우측 상단에서 내려오는 .map-quick-controls
       스택(지도종류+면적단위+줌+내위치, top:92px에서 시작해 실측
       232px 높이 -> 바닥이 컨테이너 top 기준 324px)과 우측 하단에서
       올라오는 이 위젯이 뷰포트가 낮을 때 같은 우측 컬럼(right:14px)
       안에서 겹치는 문제가 있었다(위젯 높이가 최대 420px까지 커질 수
       있어 컨테이너가 낮으면 위젯 상단이 324px 지점보다 위로 올라감).
       위젯이 그 스택 바닥(+ 여유 20px) 아래에서만 자라도록 max-height를
       "컨테이너 높이 - 396px"로도 함께 제한해 근본적으로 겹치지 않게
       고정(뷰포트가 아무리 낮아져도 최소 120px는 보장해 완전히 안
       보이진 않게).
       v2.5.61(2026-08-24): "스크롤 넣지말고 창 사이즈를 조금 늘려서
       표시해" 요청. 처음엔 max-height 캡을 420px->460px로 올리는
       식으로 고쳤는데, 화면이 조금이라도 낮으면(겹침 방지용
       calc(컨테이너 높이 - 380px) 항이 그 460px보다 먼저 걸림) 여전히
       리스트에 스크롤이 남아 사용자가 "스크롤 빼라니까" 라고 재차
       지적함. -> **max-height 캡 자체를 아예 없애고**(겹침 방지를
       위해 컨테이너 높이에서 빼던 계산식도 제거), `.nearby-widget-list`
       의 `overflow-y:auto`도 제거해 구조적으로 스크롤이 생길 수
       없게 함. 카드 5개 기준 실측 높이는 헤더 51px+리스트
       346px=397px로, 위젯은 항상 이 콘텐츠 높이만큼만 자연스럽게
       커진다(= 사용자가 요청한 "창 사이즈를 조금 늘려서 표시"). 대신
       v2.5.60에서 고친 "내 위치" 버튼과의 겹침 방지는 더 이상 CSS
       계산식이 아니라 지도 화면 높이가 충분하다는 전제(실사용
       데스크톱 화면에서는 397px 정도 여유가 통상 있음)에 기대는
       것으로 바뀜 -- 만약 브라우저 창을 극단적으로 낮게 줄이는 경우
       위젯이 다시 컨트롤과 가까워질 수 있으나, 스크롤 없이 내용을
       전부 보여주는 것을 우선한 명시적 트레이드오프.
       v2.5.62(2026-08-24): 위 트레이드오프에 대해 "내 위치 버튼이랑
       안겹치게를 왜 삭제하냐"는 정당한 재지적을 받음 -- "스크롤 없이
       다 보이는 것"과 "컨트롤과 안 겹치는 것"을 양자택일할 이유가
       없었다. 근본 원인은 이 위젯을 `.map-quick-controls`와 똑같이
       "bottom에서 위로 자라는" 앵커로 잡아놓고 높이가 가변이라는
       점이었다 -- 그러니 항상 두 요소가 같은 우측 컬럼(right:14px)
       안에서 아래→위로, 위→아래로 서로를 향해 자라며 부딪힐 수밖에
       없는 구조였다. **앵커를 bottom(52px)에서 top으로 바꿔서
       컨트롤 스택 바로 아래(스택 바닥 324px + 여유 20px = 344px)에
       고정**했다 -- 이제 위젯은 컨트롤 밑에서 아래로만 자라므로
       컨트롤과는 애초에 좌표상 겹칠 수가 없다(계산식으로 "안 겹치게
       막는" 게 아니라 두 요소가 서로 다른 위/아래 구간에 배치되어
       구조적으로 겹칠 일이 없음). max-height/overflow 관련 속성은
       전혀 필요 없어져 v2.5.61에서 없앤 그대로 유지 -- 스크롤도 없고
       겹침도 없다. */
    .nearby-widget{position:absolute;z-index:820;right:14px;top:344px;width:272px;display:flex;flex-direction:column;border:1px solid rgba(33,70,59,.11);border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 14px 34px rgba(18,45,37,.16);backdrop-filter:blur(12px)}
    .nearby-widget[hidden]{display:none}
    .nearby-widget-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 8px 12px 15px;border-bottom:1px solid var(--line)}
    .nearby-widget-head b{font-size:12.5px;font-weight:900;color:#24312c}
    .nearby-widget-close{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:#9aa39d;font-size:16px;line-height:1;cursor:pointer}
    .nearby-widget-close:hover{background:#eef2f0;color:#4c564f}
    .nearby-widget-list{flex:1 1 auto;padding:7px;display:flex;flex-direction:column;gap:3px}
    .nearby-card{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;border:0;background:transparent;padding:7px;border-radius:11px;text-align:left;cursor:pointer;font:inherit}
    .nearby-card:hover{background:#f1f5f2}
    .nearby-card img{flex:0 0 auto;width:50px;height:50px;border-radius:9px;object-fit:cover;background:#eef1ef}
    .nearby-card-info{min-width:0;display:flex;flex-direction:column;gap:2px}
    .nearby-card-info b{font-size:12px;font-weight:800;color:#20261f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .nearby-card-info span{font-size:10.5px;color:#7a827c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .nearby-card-info small{font-size:9.5px;color:var(--green);font-weight:800}
    /* v2.5.60: 위젯을 닫으면 완전히 사라지는 대신 같은 자리에 이 알약형
       탭이 남아 다시 열 수 있게 한다(재조회 없이 이미 받아둔 5개를
       그대로 다시 보여줌 -- js/app.js loadNearbyPortfolios 캐시 참고).
       v2.5.62: 위젯 본체와 같은 앵커(top:344px)를 써서 닫힌 상태에서도
       같은 자리(컨트롤 바로 아래)에 뜨게 함 -- 컨트롤과 안 겹치는 건
       여기도 동일하게 구조적으로 보장됨. */
    .nearby-widget-reopen{position:absolute;z-index:820;right:14px;top:344px;display:flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 12px;border:1px solid rgba(33,70,59,.11);border-radius:999px;background:rgba(255,255,255,.97);box-shadow:0 14px 34px rgba(18,45,37,.16);backdrop-filter:blur(12px);color:#24312c;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
    .nearby-widget-reopen svg{width:15px;height:15px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
    .nearby-widget-reopen:hover{background:#f2f6f4}
    .nearby-widget-reopen[hidden]{display:none}
    @media(max-width:760px){.nearby-widget,.nearby-widget-reopen{display:none!important}}


    .portfolio-detail-panel{position:absolute;z-index:2200;left:var(--panel-width);top:0;bottom:0;width:min(540px,calc(100vw - var(--panel-width)));min-width:420px;background:#fff;border-left:1px solid var(--line);box-shadow:14px 0 38px rgba(18,45,37,.18);opacity:0;pointer-events:none;transform:translateX(-18px);transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1);overflow:hidden}
    .portfolio-detail-panel.open{opacity:1;pointer-events:auto;transform:none}
    .portfolio-detail-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;background:#f4f6f5}
    .portfolio-detail-head{position:sticky;z-index:10;top:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(10px)}
    .portfolio-detail-head h2{margin:0;font-size:17px}.portfolio-detail-close{width:38px;height:38px;border:0;border-radius:50%;background:#f2f4f3;color:#333;font-size:25px;line-height:1}
    .portfolio-detail-hero{height:280px;background:#dfe6e2}.portfolio-detail-hero img{width:100%;height:100%;object-fit:cover}
    .portfolio-detail-content{padding:20px;background:#fff;border-bottom:8px solid #eef1ef}.portfolio-detail-kicker{color:var(--red);font-size:11px;font-weight:900}.portfolio-detail-title{margin:7px 0 12px;font-size:23px;line-height:1.35;letter-spacing:-.6px}.portfolio-detail-meta{display:flex;flex-wrap:wrap;gap:6px}.portfolio-detail-meta span{padding:6px 8px;border-radius:7px;background:var(--green-soft);color:#526159;font-size:10px}
    .designer-card{display:grid;grid-template-columns:52px 1fr;gap:12px;margin-top:18px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff}.designer-logo{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:rgba(30,94,72,.5);color:#fff;font-size:13px;font-weight:900}.designer-info b{display:block;font-size:14px}.designer-info span{display:block;margin-top:4px;color:#7b827e;font-size:10px;line-height:1.55}.portfolio-intro{margin:16px 0 0;color:#555e59;font-size:12px;line-height:1.75}
    .room-gallery{padding:18px 20px 34px}.room-section{margin-bottom:25px}.room-section h3{margin:0 0 10px;font-size:17px}.room-photos{display:grid;gap:9px}.room-photos.two{grid-template-columns:1fr 1fr}.room-photos img{width:100%;height:230px;object-fit:cover;border-radius:10px;background:#dde3df}.room-photos.two img{height:190px}
    /* v2.5.11: 포트폴리오 상세 로딩 표시 -- 클릭 즉시 패널을 열고 데이터가
       준비될 때까지 이 상태를 보여준다(사진 많은 포트폴리오는 몇 초 걸림). */
    .portfolio-detail-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:80px 20px;color:#7a847e;font-size:13.5px;text-align:center}
    .portfolio-detail-spinner{width:32px;height:32px;border-radius:50%;border:3px solid #dde3df;border-top-color:var(--green);animation:portfolio-detail-spin .8s linear infinite}
    @keyframes portfolio-detail-spin{to{transform:rotate(360deg)}}

    .modal-overlay{position:fixed;z-index:5000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(13,24,20,.56);backdrop-filter:blur(4px)}
    .modal{width:min(430px,100%);height:min(820px,94vh);max-height:94vh;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.3)}
    .modal-head{display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 17px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0;font-size:16px}.modal-close{width:36px;height:36px;border:0;background:#fff;color:#333;font-size:26px}
    .progress{padding:20px 18px 18px;background:rgba(30,94,72,.5);color:#fff}.progress-title{font-size:21px;font-weight:900;text-align:center;margin-bottom:15px}.progress-steps{display:grid;grid-template-columns:1fr 1fr;position:relative}.progress-steps:before{content:"";position:absolute;left:25%;right:25%;top:15px;border-top:2px dotted rgba(255,255,255,.5)}.step-dot{position:relative;z-index:2;text-align:center;font-size:11px;font-weight:800;color:rgba(255,255,255,.55)}.step-dot i{display:grid;place-items:center;width:31px;height:31px;margin:0 auto 6px;border:2px solid rgba(255,255,255,.45);border-radius:50%;font-style:normal}.step-dot.active{color:#fff}.step-dot.active i{border-color:#fff;background:rgba(255,255,255,.13)}
    .modal-body{flex:1;min-height:0;max-height:none;overflow-y:auto;padding:17px}.form-box{padding:17px;border:1px solid #d9ddda;border-radius:10px;margin-bottom:13px}.form-field{margin-bottom:17px}.form-field:last-child{margin-bottom:0}.form-field label{display:block;margin-bottom:7px;color:#4f5652;font-size:11px}.form-field input{width:100%;height:42px;padding:0 10px;border:0;border-bottom:2px solid #444;background:#fff;outline:none;font-size:15px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.phone-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.phone-row button,.verify-row button{height:42px;border:0;border-radius:7px;background:var(--blue);color:#fff;font-size:11px;font-weight:900;padding:0 12px}.verify-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:9px}.verify-row input{height:40px;padding:0 10px;border:1px solid #cfd5d1}.verify-row button{background:#abb3bf}.code-status{min-height:18px;margin-top:6px;color:var(--blue);font-size:10px}.code-status.good{color:#178c5b}
    .consent{display:flex;align-items:flex-start;gap:8px;margin:12px 2px;font-size:11px;line-height:1.5}.consent input{margin-top:2px}.privacy-box{max-height:112px;overflow:auto;padding:10px;border:1px solid #cfd5d1;background:#fafafa;color:#666;font-size:9px;line-height:1.6}
    .company-list{display:grid;gap:10px}.company-card{position:relative;display:grid;grid-template-columns:44px 1fr 28px;align-items:center;gap:10px;padding:12px;border:1px solid #d7ddda;border-radius:10px;background:#fff;cursor:pointer}.company-card.selected{border-color:var(--green);background:var(--green-soft)}.company-card input{position:absolute;opacity:0}.company-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid #dbe0dd;color:var(--green);font-size:13px;font-weight:900}.company-info b{display:block;color:var(--green);font-size:12px}.company-info span{display:block;margin-top:4px;color:#747b76;font-size:10px;line-height:1.45}.company-check{width:24px;height:24px;display:grid;place-items:center;border:2px solid #bbc4bf;border-radius:50%;color:transparent}.company-card.selected .company-check{border-color:var(--green);background:rgba(30,94,72,.5);color:#fff}.share-notice{margin-top:14px;padding:11px;border-radius:9px;background:#fff5f6;color:#8d2535;font-size:10px;line-height:1.55}
    .modal-foot{flex:0 0 auto;display:grid;grid-template-columns:1fr 2fr;gap:8px;padding:12px 17px 17px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 20px rgba(18,45,37,.06)}.modal-foot button{height:48px;border:0;border-radius:9px;font-size:13px;font-weight:900}.secondary{background:#edf0ee;color:#555}.primary-btn{background:var(--red);color:#fff}.primary-btn:disabled{opacity:.42;cursor:not-allowed}
    .toast{position:fixed;z-index:7000;left:50%;top:22px;transform:translate(-50%,-10px);padding:12px 16px;border-radius:10px;background:rgba(30,94,72,.5);color:#fff;box-shadow:var(--shadow);font-size:12px;font-weight:850;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}

    @media(max-width:1060px){:root{--panel-width:400px}.brand-box{min-width:175px}.brand-box img{width:145px}.top-actions button:not(.primary):not(.map-chat-button):not(.admin-menu-button):not(.mobile-search-toggle){display:none}}
    @media(max-width:760px){:root{--panel-width:min(92vw,430px)}.portfolio-detail-panel{left:0;width:100%;min-width:0}.room-photos.two{grid-template-columns:1fr}.room-photos.two img{height:220px}.detail-panel{position:absolute;inset:0 auto 0 0}.brand-box{display:none}.topbar{left:10px;right:10px;top:10px}.search-box{max-width:none}.top-actions{display:none}.region-filter{top:83px;left:10px;right:10px;overflow-x:auto}.company-view-toggle{top:132px;right:10px}.area-unit-control{top:188px;right:10px}.marker-style-control{top:236px;right:10px}.data-status{left:10px;bottom:58px}.region-btn{flex:0 0 auto}.map-help{display:none}.local-stats{right:10px;bottom:10px;width:218px;padding:11px 12px}.local-stat-row{min-height:24px}.fixed-inquiry,.panel-scroll{width:var(--panel-width)}}
/* 화면 우선 개발: 업체/관리자 진입 메뉴 */
.top-actions .top-action-link{border:0;background:rgba(255,255,255,.94);color:#29332f;border-radius:10px;padding:10px 13px;text-decoration:none;font-size:12px;font-weight:800;box-shadow:0 4px 14px rgba(20,40,33,.08);white-space:nowrap}.top-actions .top-action-link:hover{background:#173b31;color:#fff}.admin-menu-wrap{position:relative}.admin-menu-button{width:40px;height:40px;padding:0!important;font-size:19px!important}.admin-quick-menu{position:absolute;right:0;top:48px;width:180px;background:#fff;border:1px solid #dce5e0;border-radius:13px;box-shadow:0 14px 38px rgba(20,45,36,.16);overflow:hidden}.admin-quick-menu a{display:block;padding:13px 15px;color:#24312c;text-decoration:none;font-size:12px;font-weight:800}.admin-quick-menu a:hover{background:#eef4f1;color:#173b31}

/* ===== index.html 통합 화면 전환 메뉴 ===== */
.top-action-link.portal-open-btn {
  appearance: none;
  border: 1px solid rgba(24, 54, 46, .18);
  background: rgba(255, 255, 255, .94);
  cursor: pointer;
  font: inherit;
}

.unified-menu {
  width: 270px;
  max-height: min(78vh, 680px);
  overflow-y: auto;
  padding: 10px;
  border-radius: 18px;
  box-shadow: 0 18px 54px rgba(24, 45, 38, .2);
}

.unified-menu .menu-section {
  display: grid;
  gap: 4px;
}

.unified-menu .menu-section + .menu-section {
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid #e6ebe8;
}

.unified-menu .menu-section-label {
  padding: 7px 10px 6px;
  color: #68716d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
}

.unified-menu .admin-menu-section .menu-section-label {
  color: #742d39;
}

.unified-menu .admin-menu-section .menu-section-label span {
  display: inline-block;
  margin-right: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f9e9ed;
  color: #a12b43;
  font-size: 10px;
}

.unified-menu button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 11px 12px;
  color: #25302c;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.unified-menu button:hover {
  background: #eef5f1;
  color: #173f34;
}

.unified-menu .admin-menu-section button:hover {
  background: #fff1f4;
  color: #8e263c;
}

.portal-layer[hidden] { display: none !important; }

.portal-layer {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  background: #f5f7f6;
}

.portal-layer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid #dfe5e2;
  background: rgba(255,255,255,.98);
  box-shadow: 0 5px 20px rgba(29, 55, 47, .08);
}

.portal-layer-brand,
.portal-layer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-layer-brand img {
  width: 112px;
  height: auto;
}

.portal-layer-brand span {
  padding-left: 12px;
  border-left: 1px solid #dfe5e2;
  color: #3d4945;
  font-size: 13px;
  font-weight: 800;
}

.portal-layer-actions button {
  border: 1px solid #dce4e0;
  border-radius: 10px;
  background: #fff;
  padding: 9px 13px;
  color: #26332e;
  font-weight: 800;
  cursor: pointer;
}

.portal-layer-actions .portal-layer-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.portal-layer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f5f7f6;
}

body.portal-layer-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .top-actions .primary { display: none; }
  .unified-menu { width: min(86vw, 290px); }
  .portal-layer { grid-template-rows: 54px minmax(0, 1fr); }
  .portal-layer-head { padding: 0 10px; }
  .portal-layer-brand img { width: 92px; }
  .portal-layer-brand span { display: none; }
  .portal-layer-actions button:first-child { padding: 8px 10px; font-size: 12px; }
}

/* 실제 서비스 시연용 역할별 햄버거 메뉴 */
.unified-menu{width:310px;max-height:min(78vh,680px);overflow-y:auto;padding:8px}
.unified-menu .menu-section{padding:10px 6px}
.unified-menu .menu-section + .menu-section{border-top:1px solid #e4ebe7}
.unified-menu .menu-section-label{padding:5px 8px 10px;font-size:12px;font-weight:900;color:#77817c;letter-spacing:-.1px}
.unified-menu button{border-radius:10px;margin:1px 0;padding:11px 12px}
.menu-auth-links{border-top:1px dashed #dfe7e3;margin-top:8px;padding-top:8px}
.menu-role-badge{display:inline-flex;align-items:center;border-radius:999px;background:#eaf6ee;color:#16804a;padding:3px 7px;margin-right:5px;font-size:10px;font-weight:900}
.menu-role-badge.admin{background:#fff0f1;color:#a72f3a}
.company-menu-section{background:#f7fbf8;border-radius:12px}
.admin-menu-section{background:#fff8f8;border-radius:12px}
.unified-menu [hidden]{display:none!important}
.demo-mode-section{border-top:1px solid #dfe7e3;margin-top:4px;padding:12px 6px 6px}
.demo-mode-label{font-size:10px;color:#99a19d;font-weight:800;padding:0 8px 8px}
.demo-mode-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.demo-mode-buttons button{padding:9px 5px!important;border:1px solid #dce5e0!important;background:#fff!important;color:#59645f!important;font-size:11px!important;text-align:center!important}
.demo-mode-buttons button.active{background:#173b31!important;color:#fff!important;border-color:#173b31!important}
body[data-user-mode="company"] .admin-menu-button{background:#173b31!important;color:#fff!important}
body[data-user-mode="admin"] .admin-menu-button{background:#9b2935!important;color:#fff!important}
@media(max-width:600px){.unified-menu{width:min(88vw,310px)}}


/* 지도 확대·축소 버튼: 마커 표시 방식 카드 아래에 일정 간격으로 중앙 정렬 */
.leaflet-top.leaflet-right .leaflet-control-zoom{
  margin-top:198px !important;   /* 면적 단위 버튼 아래 12px 간격 */
  margin-right:14px !important;  /* 보기 설정 그룹 오른쪽 끝선에 맞춤 */
  border-radius:10px !important;
  overflow:hidden;
}
.leaflet-top.leaflet-right .leaflet-control-zoom a{
  width:34px !important;
  height:34px !important;
  line-height:34px !important;
}
@media (max-width:760px){
  .leaflet-top.leaflet-right .leaflet-control-zoom{
    margin-top:164px !important; /* 모바일: 업체·면적 단위 버튼 아래 */
    margin-right:10px !important;
  }
}
.portal-layer.customer-my-mode{grid-template-rows:minmax(0,1fr)}
.portal-layer.customer-my-mode .portal-layer-head{display:none}
.portal-layer.customer-my-mode iframe{grid-row:1}

/* 실제 서비스 시연: 미리보기용 상단 바 제거 */
.portal-layer{grid-template-rows:minmax(0,1fr)!important;}
.portal-layer-head{display:none!important;}
.portal-layer iframe{grid-row:1!important;}
/* 2026-08 responsive/fan/contact improvements */
.selected-marker-icon{z-index:99999!important}.selected-wrap{width:220px;height:210px;position:relative;filter:none}.fan-svg{top:0;height:164px;pointer-events:none}.selected-sign{z-index:6;left:50%;top:82px;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#fff;border:3px solid var(--green);box-shadow:0 8px 20px rgba(0,0,0,.22)}.selected-sign strong{font-size:9px;padding:0 5px}.fan-more{position:absolute;z-index:8;left:50%;top:163px;transform:translateX(-50%);border:1px solid #d8e1dc;border-radius:999px;background:#fff;padding:6px 11px;font-size:10px;font-weight:800;color:var(--green);box-shadow:0 5px 15px rgba(0,0,0,.13)}.fan-more-list{display:none;position:absolute;z-index:9;left:50%;top:194px;transform:translateX(-50%);width:190px;padding:7px;border-radius:12px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.2)}.fan-more-list.open{display:grid}.fan-more-list button{display:flex;justify-content:space-between;border:0;border-bottom:1px solid #edf1ef;background:#fff;padding:8px;font-size:10px}.leaflet-marker-pane{z-index:600}.leaflet-marker-icon.selected-marker-icon{z-index:10000!important}.brand-box{min-width:0;width:190px;height:58px;padding:6px 12px;overflow:hidden}.brand-box img{display:block;width:166px;max-height:42px;object-fit:contain}.company-contact{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #dce7e1}.company-contact a,.portfolio-contact{display:inline-flex;margin-top:7px;color:#fff;background:var(--green);padding:8px 12px;border-radius:9px;text-decoration:none;font-weight:800}.portfolio-contact{font-size:11px}.portfolio-body>.company,.designer-info b{display:flex;align-items:center;gap:7px}.best-badge{margin-left:auto;padding:3px 7px;border-radius:999px;background:#dfff33;color:#173b31;font-size:9px;font-weight:900}
.fan-more{pointer-events:auto}
@media(max-width:760px){html,body,.app{height:100%;overflow:hidden}.map-shell{height:100dvh}.topbar{display:flex;gap:7px}.search-box{height:50px}.region-filter{top:70px}.detail-panel{width:100%;inset:auto 0 0;height:78dvh;border-radius:20px 20px 0 0}.panel-scroll,.fixed-inquiry{width:100%}.company-detail-panel,.portfolio-detail-panel{position:fixed;inset:0;width:100%;border:0}.local-stats{display:none}.selected-marker-icon{transform:scale(.84);transform-origin:center bottom}.company-profile{padding-bottom:90px}.company-contact{position:fixed;z-index:30;left:12px;right:12px;bottom:12px;background:#fff;padding:10px 12px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.18)}}

/* v2.4.9(2026-08-23): 163번째 줄 `.top-actions{display:none}`이 로그인·채팅·
   ☰전체메뉴(MY집테리어/고객센터/파트너센터 진입점)를 모바일에서 통째로
   숨겨 대체 진입로가 없었다(UX 진단 F1). 라벨이 긴 로그인 버튼과 견적문의
   버튼(1384번째 줄에서 이미 별도로 숨김)만 계속 숨기고, 이미 이 파일에
   `.top-actions .map-chat-button` 전용으로 만들어져 있던 42px 컴팩트
   스타일(1178번째 줄, 미디어쿼리 없이 전역 적용)과 40px ☰ 버튼을 다시
   노출한다 -- 새 디자인이 아니라 죽어 있던 기존 컴포넌트 재연결. */
@media(max-width:760px){
  .top-actions{display:flex!important;height:50px;padding:0 6px;gap:6px}
  .top-actions .top-action-link,
  .top-actions .header-inquiry-button{display:none}
}

/* 모바일 미리보기: 지도 위에 앱 형태의 전체 화면 상세를 표시 */
@media(max-width:760px){
  :root{--panel-width:100vw}
  html,body,.app{width:100%;height:100%;overflow:hidden}
  .map-shell{width:100%;height:100dvh}

  .detail-panel{
    position:fixed;
    z-index:1200;
    inset:0;
    width:100%;
    height:100dvh;
    border:0;
    border-radius:0;
    opacity:0;
    transform:translateX(100%);
    pointer-events:none;
    box-shadow:none;
    transition:opacity .16s ease,transform .26s cubic-bezier(.22,1,.36,1)
  }
  .app.panel-open .detail-panel{width:100%;opacity:1;transform:none;pointer-events:auto}
  .app.panel-open .map-shell{pointer-events:none}
  .panel-scroll{width:100%;height:100%;padding-bottom:calc(80px + env(safe-area-inset-bottom));overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .fixed-inquiry{width:100%;height:calc(68px + env(safe-area-inset-bottom));padding-bottom:calc(10px + env(safe-area-inset-bottom))}

  /* 모바일에서는 마커 클릭 시 부채살 없이 바로 상세로 이동 */
  .selected-marker-icon,.leaflet-marker-icon.selected-marker-icon{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}

  .company-detail-panel,.portfolio-detail-panel{position:fixed;inset:0;width:100%;min-width:0;height:100dvh;border:0}
  .portfolio-detail-panel{left:0;right:0;margin:0 auto;max-width:100vw}
  .portfolio-detail-scroll{width:100%;margin:0 auto;scrollbar-width:none;-ms-overflow-style:none}
  .portfolio-detail-scroll::-webkit-scrollbar{display:none;width:0;height:0}
}

.mobile-panel-area-unit{display:none}
@media(max-width:760px){
  /* 기존 탭 고정 위치와 매직아일랜드 흰색 안전영역 유지 */
  .detail-tabs{top:54px}
  .detail-panel.mobile-tabs-docked::before{content:"";position:absolute;z-index:45;inset:0 0 auto;height:54px;background:#fff;pointer-events:none}

  /* 두 상세화면의 닫기 버튼을 같은 위치와 투명한 모양으로 통일 */
  .detail-panel .panel-close{
    z-index:60;
    top:8px;
    right:16px;
    width:38px;
    height:38px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#252b28;
    font-size:22px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent
  }
  .detail-panel .panel-close:hover{background:transparent;color:var(--red)}

  /* 탭이 고정된 뒤 탭 아래 오른쪽에 표시되는 모바일 전용 면적 단위 버튼 */
  .mobile-panel-area-unit{
    position:absolute;
    z-index:55;
    top:116px;
    right:14px;
    height:36px;
    display:flex;
    align-items:center;
    gap:2px;
    padding:3px 6px;
    border:1px solid rgba(33,70,59,.14);
    border-radius:10px;
    background:rgba(255,255,255,.96);
    box-shadow:0 6px 16px rgba(18,45,37,.14);
    backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease
  }
  .mobile-panel-area-unit button{
    width:28px;
    height:28px;
    padding:0;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#727b76;
    font-size:11px;
    font-weight:900
  }
  .mobile-panel-area-unit button.active{background:rgba(30,94,72,.5);color:#fff}
  .mobile-panel-area-unit>span{color:#c1c7c3;font-size:11px}
  .detail-panel.mobile-tabs-docked .mobile-panel-area-unit{opacity:1;visibility:visible;pointer-events:auto}
  .detail-panel.cluster-select-mode .mobile-panel-area-unit{display:none}

  /* 2026-08-25: 포트폴리오 상세 제목을 매직아일랜드 안전영역
     아래에 배치하되, 고정 92px/46px 대신 실제 기기 안전영역만큼만
     늘어나는 padding으로(채팅 헤더 2026-08-24 수정과 동일 원인/동일
     수정 -- 노치 없는 화면에서 위쪽에 불필요하게 큰 빈 공간이
     생기던 문제, 사용자 리포트). */
  /* 2026-08-25: 상단 여백을 조금 더 줄임(14px->10px 기준값) -- 사용자 요청. */
  .portfolio-detail-head{height:auto;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:#fff;backdrop-filter:none}

  /* v2.5.46(2026-08-24): 예전엔 "우측 닫기 대신 좌측 뒤로가기"로
     닫기(×)를 왼쪽에 텍스트 투명화 + "‹" 가짜글자로 바꿔치기했는데,
     지도 탭(#mapFrame)에서 포트폴리오 상세로 들어가면 이 위치가
     사실상 안 보여서(즐겨찾기만 우측에 보이고 닫는 방법을 못 찾음)
     뒤로 나갈 길이 없어졌다 -- 그 상태로 지도를 눌러도 이미 화면을
     덮은 포트폴리오 패널이 계속 터치를 가로채서 "마커를 눌러도
     단지정보가 안 뜨는" 것처럼 보였다(사용자 리포트, 실제로는
     마커가 아니라 못 닫힌 이전 화면이 원인이었음). 좌측 이동 자체를
     없애고 닫기를 원래 자리(헤더 우측, 즐겨찾기 옆)로 되돌린다 --
     데스크톱과 같은 기본 스타일(141번째 줄, 둥근 회색 버튼)을 그대로
     쓰면 `.portfolio-detail-head-actions{display:flex;gap:8px}`
     (558번째 줄, 기존 규칙) 안에서 즐겨찾기와 자동으로 나란히
     정렬된다(따로 좌표를 안 잡아도 flex gap이 정렬을 맞춰줌). 업체
     상세(`.company-detail-close`)도 같은 문제라 같이 되돌림. */

  /* 업체 상세 헤더를 포트폴리오 상세 헤더와 동일한 모바일 여백으로 통일 */
  .company-detail-head{
    position:sticky;
    z-index:10;
    top:0;
    height:auto;
    padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px 16px;
    background:#fff;
    backdrop-filter:none
  }
}


/* 포트폴리오 즐겨찾기 */
.favorite-heart{width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(20,31,27,.24);color:#fff;box-shadow:0 5px 14px rgba(0,0,0,.16)}
.favorite-heart svg{width:24px;height:24px;overflow:visible}.favorite-heart path{fill:transparent;stroke:#fff;stroke-width:2;stroke-linejoin:round;transition:fill .16s ease,stroke .16s ease,transform .16s ease}
.favorite-heart.active path,.favorite-heart[aria-pressed="true"] path{fill:var(--red);stroke:var(--red);transform:scale(1.05);filter:drop-shadow(0 0 1px #fff)}
.portfolio-thumb .favorite-heart,.company-portfolio-thumb .favorite-heart{position:absolute;z-index:5;right:10px;top:10px}
.portfolio-detail-head-actions{display:flex;align-items:center;gap:8px}.portfolio-detail-favorite{background:#f2f4f3;box-shadow:none}.portfolio-detail-favorite path{stroke:#56615c}.portfolio-detail-favorite.active path,.portfolio-detail-favorite[aria-pressed="true"] path{stroke:var(--red)}
.company-portfolio-card .company-portfolio-thumb{position:relative;width:116px;height:100%;overflow:hidden;padding:0}.company-portfolio-thumb>img{width:100%;height:100%;object-fit:cover}.company-portfolio-thumb .favorite-heart{width:32px;height:32px;right:7px;top:7px}.company-portfolio-thumb .favorite-heart svg{width:20px;height:20px}

/* 업체 상세 이동 및 상담 버튼 */
.designer-card{cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}.designer-card:hover{border-color:#a8beb5;box-shadow:0 8px 20px rgba(18,45,37,.08)}
.designer-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.designer-actions .portfolio-contact{margin-top:0}.portfolio-chat-button,.company-chat-button{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:0;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:900}
.company-contact-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.company-contact-actions a{margin-top:0}.company-contact-actions .company-chat-button{min-height:34px}

/* 지도 상단 채팅 진입 */
.map-chat-button{position:relative;flex:0 0 64px;width:64px;height:64px;display:grid;place-items:center;padding:0;border:1px solid rgba(33,70,59,.11);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(18,45,37,.12);backdrop-filter:blur(11px);pointer-events:auto;color:var(--green)}
.map-chat-button svg{width:36px;height:36px}.map-chat-button path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}.map-chat-new{position:absolute;left:50%;top:46%;display:none;width:18px;height:10px;place-items:center;transform:translate(-50%,-50%);padding:0;border-radius:2px;background:#fff;color:var(--red);font-family:Arial,sans-serif;font-size:6.5px;line-height:10px;font-weight:900;letter-spacing:-.25px;box-shadow:none}.map-chat-button.has-unread svg{opacity:1}.map-chat-button.has-unread .map-chat-new{display:grid}
.menu-chat-button{display:flex!important;align-items:center!important;justify-content:space-between!important}.menu-chat-alert{width:8px;height:8px;display:block;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}.menu-chat-alert[hidden]{display:none!important}

/* 고객용 업체별 누적 채팅 */
.chat-backdrop{position:fixed;z-index:4390;inset:0;background:rgba(12,23,19,.34);backdrop-filter:blur(2px)}.chat-backdrop[hidden]{display:none}
.chat-panel{position:fixed;z-index:4400;right:0;top:0;width:min(430px,100vw);height:100dvh;display:grid;grid-template-rows:64px minmax(0,1fr);overflow:hidden;background:#f4f6f5;border-left:1px solid var(--line);box-shadow:-16px 0 42px rgba(18,45,37,.2);opacity:0;pointer-events:none;transform:translateX(100%);transition:opacity .18s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.chat-panel.open{opacity:1;pointer-events:auto;transform:none}.chat-panel-head{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:8px;align-items:center;padding:0 14px;border-bottom:1px solid var(--line);background:#fff}.chat-panel-head h2{margin:0;font-size:17px}.chat-panel-head span{display:block;margin-top:2px;color:#87908b;font-size:9px}.chat-back,.chat-close{width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#f1f4f2;color:#29332e;font-size:26px;line-height:1}.chat-back[hidden]{visibility:hidden;display:grid!important}.chat-thread-list{grid-row:2;min-height:0;overflow-y:auto;padding:12px}.chat-empty{padding:56px 20px;text-align:center;color:#818b85;font-size:12px;line-height:1.7}.chat-thread-item{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center;margin-bottom:8px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:left}.chat-thread-avatar{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:rgba(30,94,72,.5);color:#fff;font-size:11px;font-weight:900}.chat-thread-copy{min-width:0}.chat-thread-copy b,.chat-thread-copy span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chat-thread-copy b{font-size:13px}.chat-thread-copy span{margin-top:5px;color:#7c8580;font-size:10px}.chat-thread-meta{text-align:right}.chat-thread-meta time{display:block;color:#a0a6a2;font-size:8px}.chat-thread-unread{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-top:5px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:9px;font-weight:900}
.chat-conversation{grid-row:2;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto;background:#edf1ef}.chat-conversation[hidden]{display:none}.chat-messages{min-height:0;overflow-y:auto;padding:18px 14px}.chat-message{display:flex;margin-bottom:12px}.chat-message.customer{justify-content:flex-end}.chat-bubble{max-width:82%;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#fff;color:#303834;font-size:12px;line-height:1.55;box-shadow:0 3px 10px rgba(18,45,37,.05);white-space:pre-wrap;word-break:break-word}.chat-message.customer .chat-bubble{border-radius:14px 14px 4px 14px;background:rgba(30,94,72,.5);color:#fff}.chat-bubble time{display:block;margin-top:5px;color:#9aa19d;font-size:8px;text-align:right}.chat-message.customer .chat-bubble time{color:rgba(255,255,255,.62)}.chat-bubble img{width:min(260px,100%);max-height:260px;margin-bottom:6px;border-radius:9px;object-fit:cover}.chat-context{margin:2px 0 14px;padding:11px;border:1px solid #dce4df;border-radius:13px;background:#fff}.chat-context-label{margin-bottom:8px;color:var(--red);font-size:9px;font-weight:900}.chat-context-card{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:center}.chat-context-card img{width:70px;height:54px;border-radius:8px;object-fit:cover}.chat-context-card b{display:block;font-size:11px;line-height:1.4}.chat-context-card span{display:block;margin-top:4px;color:#7c8580;font-size:9px}.chat-image-preview{padding:8px 12px;border-top:1px solid #dce4df;background:#fff}.chat-image-preview img{width:64px;height:54px;border-radius:8px;object-fit:cover}.chat-image-preview button{margin-left:8px;border:0;background:transparent;color:var(--red);font-size:11px;font-weight:900}.chat-compose{display:grid;grid-template-columns:40px minmax(0,1fr) 54px;gap:7px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}.chat-compose>input{min-width:0;height:42px;padding:0 12px;border:1px solid #d7dfda;border-radius:10px;outline:none}.chat-compose>input:focus{border-color:var(--green)}.chat-compose>button{border:0;border-radius:10px;background:rgba(30,94,72,.5);color:#fff;font-size:11px;font-weight:900}.chat-attach{width:40px;height:42px;display:grid;place-items:center;border:1px solid #d7dfda;border-radius:10px;background:#fff;color:var(--green);font-size:24px;cursor:pointer}

@media(max-width:760px){
  .map-chat-button{flex-basis:50px;width:50px;height:50px;border-radius:12px}.map-chat-button svg{width:36px;height:36px}
  .chat-panel{width:100%;border:0;grid-template-rows:108px minmax(0,1fr)}.chat-panel-head{height:108px;padding:48px 12px 8px}.chat-panel-head>div{min-width:0}.chat-panel-head h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .designer-actions{display:grid;grid-template-columns:1fr 1fr}.designer-actions .portfolio-contact,.designer-actions .portfolio-chat-button{width:100%;justify-content:center}
  .company-contact{align-items:flex-start}.company-contact-actions{max-width:210px}.company-contact-actions a,.company-contact-actions .company-chat-button{flex:1 1 100%;justify-content:center}
}

/* 2026-08-24: m.html 앱 셸에 임베드된 지도/상세/채팅(iframe,
   index.html?nativeMap=1)에서만 중복 헤더 숨김 -- 검색창은 앱 셸
   상단바(로고-햄버거 사이)로 옮겨갔고, 채팅/전체메뉴는 앱 셸 자체에
   이미 있어(chatFab, m-menu-btn) 여기서 또 보이면 중복이었다. 공유
   링크로 이 페이지를 iframe 없이 직접 여는 방문자는 zt-embedded가
   안 붙으므로 영향 없음(reference_zipterior_docs.md 등 참고). */
html.zt-embedded .search-box,
html.zt-embedded .top-actions{display:none!important}
/* .top-actions는 @media(max-width:760px){.top-actions{display:flex!important;...}}
   (v2.4.9, 163번째 줄 근처)로 이미 !important 강제노출이 걸려있어 우리가
   자식(.map-chat-button/.admin-menu-wrap)만 숨기면 부모 박스(패딩/테두리/
   배경)만 빈 채로 남아 우측 상단에 작은 흰색 조각이 떠 있는 버그가 났었다
   -- 부모 .top-actions 자체를 숨기는 것으로 수정(위 규칙보다 클래스 2개
   selector라 specificity가 더 높아 이긴다: (0,2,1) > (0,1,0)). */

/* 모바일 지도 상단 안전영역 및 조작 버튼 정렬 */
@media(max-width:760px){
  .topbar{left:10px;right:10px;top:54px;height:50px;gap:8px}
  .search-box{min-width:0;height:50px;padding:6px;border-radius:12px}
  .search-box input{height:38px;padding:0 38px 0 12px;font-size:12px}
  .search-icon{right:14px}
  .search-results{top:56px}
  .map-chat-button{flex:0 0 50px;width:50px;height:50px}
    /* 2026-08-24: 지도종류/면적단위는 원래 위치(상단) 유지 요청 --
     확대축소/현재위치만 아래에서 별도로 우측 하단으로 뺀다(zt-embedded
     스코프 규칙, 이 파일 끝부분 참고). 폭은 실제 기기 화면 크기에
     맞춰 clamp()로 반응형화(고정 88px였던 것). */
  .map-quick-controls{right:10px;top:112px;width:clamp(76px,22vw,96px);flex-direction:column;align-items:stretch;gap:8px}
  .company-view-toggle{width:100%;height:40px;padding:0 6px;border-radius:11px;font-size:11px;white-space:nowrap}
  /* 2026-08-25: 모바일 폭에서 .area-unit-control(평/m2)만 반응형
     clamp() 높이를 받고 .map-type-control(일반/위성)은 데스크톱
     기본값(38px 고정)에 머물러 있어서, 화면폭이 커질수록(예:
     iPhone Pro Max 430px -> clamp가 44px까지 커짐) 두 버튼 높이가
     최대 6px까지 벌어졌다. PC는 둘 다 38px 고정이라 원래 일치.
     같은 규칙을 공유시켜 항상 같이 움직이게 고정. */
  /* 2026-08-25 수정: .map-type-control의 데스크톱 기본 규칙
     (height:38px, 미디어쿼리 밖, 이 파일 뒤쪽에 위치)이 소스 순서상
     이 모바일 규칙보다 나중에 나와서 동일 우선순위(클래스 1개)일 때
     그게 이겨버려 모바일에서 안 먹혔다(area-unit-control은 그런
     후속 규칙이 없어서 문제없이 먹혔던 것). !important로 확정. */
  .map-type-control,.area-unit-control{width:100%;height:clamp(36px,10.5vw,44px)!important;justify-content:center;border-radius:11px}
  .leaflet-top.leaflet-right .leaflet-control-zoom{margin-top:212px!important;margin-right:10px!important}

  /* 알림은 매직아일랜드 대신 화면 하단 안전영역 위에 온전히 표시 */
  .toast{top:auto;bottom:calc(82px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 28px);padding:11px 14px;text-align:center;line-height:1.45;white-space:normal;transform:translate(-50%,10px)}
  .toast.show{transform:translate(-50%,0)}
}

.company-profile-summary{min-width:0}.company-favorite-heart{width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid #e1e7e4;border-radius:50%;background:#fff;color:#78817c;box-shadow:0 4px 12px rgba(18,45,37,.08);transition:background .16s ease,border-color .16s ease,transform .16s ease}.company-favorite-heart:hover{background:#faf5f5;border-color:#efcdd0}.company-favorite-heart:active{transform:scale(.94)}.company-favorite-heart svg{width:25px;height:25px}.company-favorite-heart path{fill:transparent;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:fill .16s ease,stroke .16s ease,transform .16s ease}.company-favorite-heart.active,.company-favorite-heart[aria-pressed="true"]{color:var(--red);border-color:#efc4c8;background:#fff7f8}.company-favorite-heart.active path,.company-favorite-heart[aria-pressed="true"] path{fill:var(--red);stroke:var(--red);transform:scale(1.05)}
@media(max-width:760px){.company-profile-top{grid-template-columns:58px minmax(0,1fr) 40px;gap:11px}.company-favorite-heart{width:40px;height:40px}.company-favorite-heart svg{width:24px;height:24px}}

/* 2026-08-04 requested-only UI refinements: marker title / mobile scrollbars / company contact bar */
/* PC + mobile: selected apartment name is larger and limited to two lines */
.selected-sign{
  width:86px;
  height:86px;
  padding:8px;
}
.selected-sign strong{
  display:-webkit-box;
  width:68px;
  max-height:31px;
  overflow:hidden;
  padding:0;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
  font-size:11px;
  line-height:1.38;
  letter-spacing:-.45px;
}
.selected-sign span{
  margin-top:5px;
  font-size:8px;
}

@media(max-width:760px){
  /* Keep scrolling available while removing the visible scrollbar */
  .panel-scroll,
  .company-detail-scroll{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .panel-scroll::-webkit-scrollbar,
  .company-detail-scroll::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
  }

  /* Remove the unnecessary blank area created above the fixed contact bar */
  .company-profile{
    padding-bottom:22px;
  }
  .company-portfolio-section{
    padding-bottom:118px;
  }

  /* Refined fixed contact bar in the mobile company detail screen */
  .company-contact{
    align-items:center;
    gap:10px;
    min-height:84px;
    margin:0;
    padding:10px 11px;
    border:1px solid rgba(33,70,59,.10);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 10px 30px rgba(18,45,37,.20);
    backdrop-filter:blur(12px);
  }
  .company-contact>b{
    flex:0 0 58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    align-self:stretch;
    gap:3px;
    padding:7px 4px;
    border-radius:11px;
    background:var(--green-soft);
    color:var(--green);
    font-size:10px;
    line-height:1.2;
    text-align:center;
  }
  .company-contact>b::before{
    content:"☎";
    font-size:16px;
    line-height:1;
  }
  .company-contact-actions{
    flex:1 1 auto;
    max-width:none;
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    min-width:0;
  }
  .company-contact-actions a,
  .company-contact-actions .company-chat-button{
    width:100%;
    min-height:32px;
    margin:0;
    padding:7px 10px;
    border-radius:9px;
    font-size:10px;
    line-height:1;
    font-weight:900;
  }
}

/* 2026-08-04 requested-only refinements: mobile contact label/alignment, chat header, PC card actions */
@media (min-width:761px){
  /* PC portfolio company card: phone/chat actions aligned to the right */
  .designer-actions{
    justify-content:flex-end;
  }

  /* PC chat header follows the same 60px detail-header rhythm */
  .chat-panel{
    grid-template-rows:60px minmax(0,1fr);
  }
  .chat-panel-head{
    height:60px;
    padding:0 18px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(10px);
  }
  .chat-panel-head h2{font-size:17px;line-height:1.2}
  .chat-back,.chat-close{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#f2f4f3;
  }
}

@media (max-width:760px){
  /* Mobile company footer: contact label and exact vertical centering */
  .company-contact>b{
    font-size:0;
    line-height:1;
  }
  .company-contact>b::before{
    content:"☎";
    display:block;
    margin-bottom:3px;
    font-size:16px;
    line-height:1;
  }
  .company-contact>b::after{
    content:"연락하기";
    display:block;
    font-size:10px;
    line-height:1.2;
  }
  .company-contact-actions a{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  /* Mobile chat: same safe-area/two-line header rhythm, X only */
  /* 2026-08-24: 92px 고정 높이 + padding-top:46px 고정값 +
     align-items:flex-end 조합이 실제 기기 노치 유무와 무관하게 항상
     큰 빈 공간을 위에 남겼다(채팅 목록 화면과 채팅방 화면이 이
     헤더를 공유해서 둘 다 같은 문제였음, 사용자 리포트). 고정 높이
     대신 safe-area-inset-top만큼만 늘어나는 padding으로 바꿔
     실제 노치가 있는 기기에서만 그만큼 벌어지고, 없으면 촘촘하게
     붙도록 함(.m-detail-close가 쓰는 calc(14px + safe-area) 기준과
     동일 패턴). */
  .chat-panel{
    grid-template-rows:auto minmax(0,1fr);
  }
  .chat-panel-head{
    position:relative;
    height:auto;
    display:flex;
    align-items:center;
    gap:10px;
    padding:calc(14px + env(safe-area-inset-top,0px)) 16px 10px;
    border-bottom:1px solid var(--line);
    background:#fff;
    backdrop-filter:none;
  }
  .chat-panel-head>div{
    flex:1;
    min-width:0;
    padding-left:0;
  }
  .chat-panel-head h2{
    margin:0;
    font-size:17px;
    line-height:1.2;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .chat-panel-head span{
    margin-top:3px;
    font-size:9px;
    line-height:1.2;
  }
  /* 2026-08-24: "X only"였던 걸 되돌림 -- 지도 탭 채팅 FAB로 들어오면
     업체별 스레드 목록에서 하나를 골라 채팅방까지 들어가는 흐름이
     실사용되는데, 뒤로가기가 강제로 안 보여서 목록으로 못 돌아가는
     막다른 골목이었다(사용자 리포트). JS(showCustomerChatThread)가
     이미 고객센터 문의만 hidden=true로 숨기고 일반 업체 채팅방은
     hidden=false로 정확히 구분해주므로, 여기서 CSS로 무조건
     display:none!important 덮어쓰던 것만 없애면 된다. */
  .chat-back{
    flex:0 0 auto;
  }
  .chat-back[hidden]{
    display:none!important;
    visibility:visible;
  }
  /* 2026-08-24: 뒤로가기(.chat-back)를 되살리면서 같이 정리 --
     이전엔 닫기(X)만 있던 시절 헤더 상단(safe-area 바로 아래,
     top:8px)에 홀로 절대좌표로 떠 있었는데, 뒤로가기가 타이틀과
     함께 헤더 하단(align-items:flex-end)에 자리잡으면서 두 버튼
     높이가 완전히 어긋나 "엉망"으로 보였다(사용자 리포트). 닫기도
     같은 flex 행에 자연스러운 흐름으로 넣어 뒤로가기·타이틀과
     동일한 높이로 맞춘다(margin-left:auto로 우측 끝에 붙임). */
  .chat-close{
    flex:0 0 auto;
    margin-left:auto;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:#f2f4f3;
    color:#252b28;
    font-size:26px;
    line-height:1;
  }
}


/* 2026-08-04 requested-only: hide customer chat scrollbar and clarify company card navigation */
.chat-thread-list,
.chat-messages{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.chat-thread-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.designer-card{position:relative;}
.designer-detail-hint{
  position:absolute;
  top:12px;
  right:14px;
  color:var(--green);
  font-size:10px;
  line-height:1;
  font-weight:900;
  pointer-events:none;
}
@media(max-width:760px){
  .designer-detail-hint{top:11px;right:12px;font-size:10px;}
}


/* 2026-08-04 requested-only: inquiry context alignment, chat composer fit, close icon match */
.chat-context-message{
  justify-content:flex-end;
}
.chat-context-message .chat-context{
  width:min(82%,360px);
  margin:2px 0 14px;
}

.chat-close{
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:25px!important;
}

@media (max-width:760px){
  .chat-compose{
    padding:9px 12px calc(14px + env(safe-area-inset-bottom));
  }
  .chat-compose>input,
  .chat-compose>button,
  .chat-attach{
    height:42px;
  }
  .chat-close{
    top:8px;
    right:16px;
    width:38px;
    height:38px;
    font-size:25px!important;
  }
}

/* PC 상세 패널 닫기 버튼: 현재 가장 바깥쪽에 열린 패널에만 표시 */
@media (min-width:761px){
  .detail-panel,
  .portfolio-detail-panel,
  .company-detail-panel{overflow:visible}

  .detail-panel .panel-close{
    position:fixed;
    top:14px;
    right:auto;
    left:calc(var(--panel-width) + 10px);
    z-index:2405;
  }

  .portfolio-detail-panel .portfolio-detail-close{
    position:fixed;
    top:14px;
    right:auto;
    left:min(calc(var(--panel-width) + 550px),calc(100vw - 48px));
    z-index:2405;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
  }

  .company-detail-panel .company-detail-close{
    position:fixed;
    top:14px;
    right:min(calc(min(440px,92vw) + 10px),calc(100vw - 48px));
    z-index:2405;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
  }

  .app:has(.portfolio-detail-panel.open) .detail-panel .panel-close,
  .app:has(.company-detail-panel.open) .detail-panel .panel-close{display:none}

  .app:has(.company-detail-panel.open) .portfolio-detail-panel .portfolio-detail-close{display:none}
}


/* PC 상세 패널 바깥쪽 공용 닫기 버튼 */
.pc-outer-panel-close{display:none}
@media (min-width:761px){
  .detail-panel .panel-close,
  .portfolio-detail-panel .portfolio-detail-close{display:none!important}

  /* PC 업체정보 패널은 자체 우측 상단 X를 유지한다. */
  .company-detail-panel .company-detail-close{
    display:grid!important;
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    left:auto!important;
    z-index:30!important;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent!important;
    box-shadow:none!important;
    color:#252b28;
    font-size:30px;
    font-weight:300;
    line-height:1;
  }
  .company-detail-panel .company-detail-close:hover{background:transparent!important;color:var(--red)}

  .pc-outer-panel-close{
    position:fixed;
    z-index:5000;
    top:14px;
    width:40px;
    height:40px;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#252b28;
    font-size:30px;
    font-weight:300;
    line-height:1;
    box-shadow:0 8px 20px rgba(0,0,0,.16);
    cursor:pointer;
  }
  .pc-outer-panel-close.visible{display:grid}
  .pc-outer-panel-close:hover{color:var(--red)}
}


/* 2026-08-04 selected marker: show the full apartment name above the circular fan */
.selected-complex-name{
  position:absolute;
  z-index:12;
  left:50%;
  bottom:calc(100% - 2px);
  transform:translateX(-50%);
  width:max-content;
  max-width:210px;
  padding:7px 11px;
  border:1px solid #d8e1dc;
  border-radius:10px;
  background:#fff;
  color:var(--green);
  box-shadow:0 6px 16px rgba(18,45,37,.18);
  font-size:11px;
  font-weight:900;
  line-height:1.3;
  letter-spacing:-.35px;
  text-align:center;
  white-space:normal;
  word-break:keep-all;
  pointer-events:none;
}
.selected-complex-name:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#fff;
  border-bottom:0;
}
.selected-sign span{
  margin-top:0;
  color:var(--red);
  font-size:12px;
  font-weight:950;
}

/* 2026-08-04 map marker tone adjustment only: keep current green, translucent fill + darker outline */
.count-marker,
.portfolio-cluster {
  background: rgba(33, 70, 59, .62);
  border: 2px solid rgba(23, 59, 49, .96);
}


/* 일반회원 로그인: 지도 위 중앙 팝업 / MY집테리어: 지도 위 좌측 슬라이드 패널 */
.portal-layer{
  background:transparent!important;
  pointer-events:none;
  overflow:hidden;
}
.portal-layer iframe{
  pointer-events:auto;
  position:absolute;
  border:0;
  background:#f5f7f6;
}
.portal-layer.login-popup-mode{
  background:rgba(12,28,22,.22)!important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.portal-layer.login-popup-mode iframe{
  left:50%;
  top:50%;
  width:min(430px,calc(100vw - 32px));
  height:min(720px,calc(100dvh - 32px));
  transform:translate(-50%,-50%);
  border-radius:24px;
  box-shadow:0 24px 70px rgba(8,31,24,.28);
  overflow:hidden;
}
.portal-layer.customer-my-mode{
  background:rgba(12,28,22,.08)!important;
}
.portal-layer.customer-my-mode iframe{
  left:0;
  top:0;
  width:min(1180px,calc(100vw - 110px));
  height:100dvh;
  transform:translateX(-102%);
  border-radius:0 22px 22px 0;
  box-shadow:18px 0 50px rgba(8,31,24,.20);
  transition:transform .34s cubic-bezier(.22,.8,.28,1);
  will-change:transform;
}
.portal-layer.customer-my-mode.portal-visible iframe{transform:translateX(0)}
.portal-layer.customer-my-mode.portal-closing iframe{transform:translateX(-102%)}
@media(max-width:760px){
  .portal-layer.login-popup-mode iframe{width:calc(100vw - 20px);height:calc(100dvh - 20px);border-radius:20px}
  .portal-layer.customer-my-mode iframe{width:94vw;border-radius:0 18px 18px 0}
}

/* 2026-08-04 requested-only: mobile floating contact buttons / full MY panel / thinner marker outline */
.count-marker,
.portfolio-cluster{
  border-width:1px;
}

@media (max-width:760px){
  /* Mobile company detail: replace the bottom contact bar with two floating round buttons */
  .company-profile{
    padding-bottom:24px;
  }
  .company-portfolio-section{
    padding-bottom:92px;
  }
  .company-contact{
    position:fixed;
    z-index:45;
    left:auto;
    right:14px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    width:auto;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .company-contact>b{
    display:none;
  }
  .company-contact-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    width:auto;
    max-width:none;
  }
  .company-contact-actions a,
  .company-contact-actions .company-chat-button{
    flex:0 0 58px;
    width:58px;
    height:58px;
    min-height:58px;
    margin:0;
    padding:0!important;
    border:0;
    border-radius:50%;
    box-shadow:0 8px 22px rgba(18,45,37,.22);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.05!important;
  }
  .company-contact-actions a{
    order:1;
    background:var(--green);
    color:#fff;
    font-size:0;
  }
  .company-contact-actions a::before{
    content:"☎";
    font-size:24px;
    line-height:1;
  }
  .company-contact-actions .company-chat-button{
    order:2;
    background:var(--red);
    color:#fff;
    font-size:0;
  }
  .company-contact-actions .company-chat-button::after{
    content:"채팅문의";
    display:block;
    width:42px;
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1.15;
    word-break:keep-all;
  }

  /* MY집테리어 opens at full mobile viewport width */
  .portal-layer.customer-my-mode iframe{
    width:100vw;
    height:100dvh;
    border-radius:0;
  }
}

/* 2026-08-04: customer login success must open the large left MY panel, never the small login popup */
@media (min-width:761px){
  .portal-layer.customer-my-mode{
    background:rgba(12,28,22,.08)!important;
  }
  .portal-layer.customer-my-mode iframe{
    left:0!important;
    right:auto!important;
    top:0!important;
    width:min(1100px,calc(100vw - 110px))!important;
    min-width:min(900px,calc(100vw - 110px));
    height:100dvh!important;
    border-radius:0 22px 22px 0!important;
    box-shadow:18px 0 50px rgba(8,31,24,.20)!important;
  }
}

.chat-system-message{width:max-content;max-width:90%;margin:12px auto;padding:8px 14px;border-radius:999px;background:#dfe7e3;color:#67736d;font-size:12px;font-weight:750;text-align:center}


/* 2026-08-04 requested map controls, top chat relocation and non-blurred dim overlay */
.map-type-control{
  position:static;height:38px;display:flex;align-items:center;gap:3px;padding:4px 7px;
  border:1px solid rgba(33,70,59,.11);border-radius:11px;background:rgba(255,255,255,.96);
  box-shadow:0 9px 24px rgba(18,45,37,.12);backdrop-filter:blur(11px)
}
.map-type-control button{width:30px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:#727b76;font-size:11px;font-weight:900}
.map-type-control button.active{background:rgba(30,94,72,.5);color:#fff}
.map-type-control>span{color:#c1c7c3;font-size:11px}
.top-actions .map-chat-button{
  flex:0 0 42px;width:42px;height:42px;padding:0;border:0;border-radius:9px;background:#fff;
  box-shadow:none;backdrop-filter:none
}
.top-actions .map-chat-button svg{width:23px;height:23px}
.top-actions .map-chat-new{right:-3px;top:-5px}
.leaflet-top.leaflet-right .leaflet-control-zoom{margin-top:246px!important}
.leaflet-bottom.leaflet-right .leaflet-control-scale{margin-right:14px!important;margin-bottom:72px!important}
.leaflet-control-scale-line{border-color:rgba(23,59,49,.8)!important;background:rgba(255,255,255,.86)!important;color:#173b31!important;font-size:10px!important}
.portal-layer,
.portal-layer.login-popup-mode,
.portal-layer.customer-my-mode{
  background:rgba(7,18,14,.30)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.modal-overlay,
.chat-backdrop{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(7,18,14,.34)!important;
}
@media(max-width:760px){
  .leaflet-top.leaflet-right .leaflet-control-zoom{margin-top:210px!important}
  .leaflet-bottom.leaflet-right .leaflet-control-scale{margin-right:10px!important;margin-bottom:8px!important}
}

/* 회원사 지도 컨트롤 텍스트 정렬 보정 */
.map-type-control,.area-unit-control{box-sizing:border-box;align-items:center!important;justify-content:center!important}
.map-type-control button,.area-unit-control button{display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;font-size:12px!important;font-weight:900!important;font-family:inherit!important;text-align:center!important}
.map-type-control>span,.area-unit-control>span{display:flex;align-items:center;justify-content:center;height:100%;line-height:1;font-weight:700}


/* Premium company clustering and hover details */
.detail-panel.company-cluster-select-mode .panel-scroll>:not(.company-cluster-select){display:none!important}
.detail-panel.company-cluster-select-mode .fixed-inquiry{display:none!important}
.company-cluster-select{min-height:100%;background:#f5f6f5}
.company-cluster-head span{background:#efffd0;color:#315714}
.company-cluster-item{grid-template-columns:46px minmax(0,1fr) auto 13px}
.company-cluster-logo{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(18,45,37,.12)}
.company-cluster-logo img{width:100%;height:100%;display:block;object-fit:cover}
.company-map-marker.premium-logo{width:50px;height:50px;border:1px solid #d7dcd9;border-radius:50%;background:#fff;box-sizing:border-box;box-shadow:0 8px 18px rgba(18,45,37,.28);transition:transform .16s ease,box-shadow .16s ease}
.company-map-marker.premium-logo:hover{transform:scale(1.08);box-shadow:0 10px 24px rgba(18,45,37,.34)}
.company-map-marker.premium-logo img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
.premium-company-cluster{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(78,126,16,.62);border-radius:50%;background:#b9ff32;color:#fff;font-size:15px;font-weight:1000;line-height:1;box-shadow:0 8px 18px rgba(18,45,37,.27)}
.company-leaflet-tooltip{padding:0!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important}
.company-leaflet-tooltip:before{display:none!important}
.company-hover-tooltip{display:flex;min-width:150px;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid rgba(27,65,52,.12);border-radius:10px;background:rgba(255,255,255,.98);box-shadow:0 9px 24px rgba(18,45,37,.18);color:#35413b;font-size:10px;line-height:1.35}
.company-hover-tooltip b{color:#17382f;font-size:12px}
.company-hover-tooltip strong{margin-top:2px;color:#c94150;font-size:10px}
.company-hover-tooltip.regular-tooltip{min-width:0;padding:7px 10px;white-space:nowrap}

.company-profile-logo img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}

/* 업체 로고 원형 노출 및 모바일 업체→포트폴리오 레이어 순서 */
.designer-logo{overflow:hidden;background:#fff}
.designer-logo img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
@media(max-width:760px){
  .portfolio-detail-panel{z-index:2400}
  .company-detail-panel{z-index:2300}
}


/* 2026-08-04 requested-only layout restoration after company-logo linkage */
@media (min-width:761px){
  /* 업체 상세에서 포트폴리오를 열 때 단지 패널 폭만큼 밀리지 않도록 정상 위치에서 표시 */
  .portfolio-detail-panel[data-opened-from-company="true"]{
    left:0!important;
  }
}

@media (max-width:760px){
  /* 평/㎡ 컨트롤과 확대·축소 버튼이 겹치지 않도록 아래로 분리 */
  .leaflet-top.leaflet-right .leaflet-control-zoom{
    margin-top:254px!important;
    margin-right:10px!important;
  }
  /* 모바일 상태 안내는 화면 최하단 안전영역에 붙임 */
  .data-status{
    left:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
  }
}


/* 포트폴리오 이미지 확대 보기 */
.portfolio-detail-hero img,.room-photos img{cursor:zoom-in}
.portfolio-lightbox{position:fixed;z-index:7000;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,10,8,.9);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.portfolio-lightbox.open{opacity:1;visibility:visible}
.portfolio-lightbox-track{width:100%;height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch}
.portfolio-lightbox-track::-webkit-scrollbar{display:none}
.portfolio-lightbox-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:56px 72px;scroll-snap-align:center;box-sizing:border-box}
.portfolio-lightbox-slide img{display:block;max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.portfolio-lightbox-close,.portfolio-lightbox-nav{position:absolute;z-index:2;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#17382f;box-shadow:0 5px 18px rgba(0,0,0,.24);cursor:pointer}
.portfolio-lightbox-close{top:18px;right:18px;width:44px;height:44px;font-size:31px;line-height:1}
.portfolio-lightbox-nav{top:50%;width:46px;height:46px;margin-top:-23px;font-size:29px;line-height:1}
.portfolio-lightbox-prev{left:18px}.portfolio-lightbox-next{right:18px}
.portfolio-lightbox-count{position:absolute;z-index:2;left:50%;bottom:18px;transform:translateX(-50%);padding:7px 12px;border-radius:20px;background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:800}
@media(max-width:760px){.portfolio-lightbox-slide{padding:48px 10px 58px}.portfolio-lightbox-close{top:12px;right:12px;width:40px;height:40px;background:transparent;color:#fff;box-shadow:none}.portfolio-lightbox-nav{display:none}.portfolio-lightbox-count{bottom:14px}}

/* 2026-08-05 requested-only fixes: lightbox controls, mobile fan interaction, selected labels */
@media (min-width:761px){
  .portfolio-lightbox-close,
  .portfolio-lightbox-nav{
    background:transparent!important;
    color:#fff!important;
    box-shadow:none!important;
  }
}
.portfolio-lightbox-track{
  touch-action:none;
  cursor:grab;
}
.portfolio-lightbox-track:active{cursor:grabbing}

.selected-complex-name,
.fan-more{
  border:1px solid #d8d8d8!important;
}

@media (max-width:760px){
  .selected-marker-icon,
  .leaflet-marker-icon.selected-marker-icon{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  /* Leaflet가 마커 위치에 사용하는 transform은 건드리지 않는다.
     기존처럼 marker 자체를 scale하면 translate3d가 덮여 부채살이 화면 모서리로 튄다. */
  .selected-marker-icon{transform-origin:center center!important}
  .selected-wrap{
    pointer-events:none;
    transform:scale(.78);
    transform-origin:110px 105px;
  }
  .selected-complex-name,
  .selected-sign,
  .fan-more,
  .fan-sector{pointer-events:auto!important;cursor:pointer}
  .selected-complex-name{pointer-events:auto!important}
}

/* 2026-08-05 requested-only: selected fan close button and construction label */
.selected-complex-name{padding-left:29px!important;padding-right:29px!important;pointer-events:auto!important}
.selected-complex-name-text{display:block;cursor:pointer}
.selected-fan-close{
  position:absolute;
  z-index:3;
  top:-9px;
  right:-9px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #d8d8d8;
  border-radius:50%;
  background:#fff;
  color:var(--green);
  font-family:Arial,sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
  cursor:pointer;
  pointer-events:auto!important;
}
.selected-sign small{
  display:block;
  margin-bottom:1px;
  color:var(--green);
  font-size:9px;
  font-weight:800;
  line-height:1;
}
.selected-sign span{
  display:block;
  color:#c93048;
  font-size:15px;
  font-weight:900;
  line-height:1.1;
}

/* 인테리어 의뢰 흐름: 의뢰정보 → 방식 선택 → 지역/업체 선택 */
.inquiry-progress-3{grid-template-columns:repeat(3,1fr)}
.inquiry-progress-3:before{left:16.66%;right:16.66%}
.request-method-intro{text-align:center;color:#4f5b55;font-size:13px;font-weight:800;margin:8px 0 20px}
.request-method-buttons{display:grid;grid-template-columns:1fr 1fr;gap:18px;justify-items:center;padding:6px 3px 18px}
.request-method{width:150px;height:150px;border:0;border-radius:50%;color:#fff;box-shadow:0 12px 28px rgba(30,55,46,.16);cursor:pointer;font-size:14px;font-weight:900;line-height:1.55;padding:18px;transition:transform .18s ease,box-shadow .18s ease}
.request-method:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(30,55,46,.22)}
.request-method.near{background:var(--green)}
.request-method.premium{background:var(--red)}
.request-section-copy{margin-bottom:14px;color:#53605a;font-size:12px;line-height:1.6}
.region-select-list{display:grid;gap:10px}
.region-request-select{width:100%;height:46px;padding:0 13px;border:1px solid #d4dbd7;border-radius:9px;background:#fff;color:#29342f;font-size:13px;outline:none}
.region-request-select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(30,94,72,.08)}
.region-match-result{margin-top:13px;padding:13px;border-radius:9px;background:var(--green-soft);color:#526159;font-size:11px;line-height:1.6}
.region-match-result strong{color:var(--green);font-size:14px}
@media(max-width:480px){.request-method-buttons{gap:10px}.request-method{width:132px;height:132px;font-size:12px;padding:14px}.progress{padding-left:10px;padding-right:10px}.step-dot{font-size:10px}}

/* 무료견적 및 업체 지도 노출 설정 */
.header-inquiry-button{height:42px!important;padding:0 16px!important;background:var(--red)!important;color:#fff!important;font-weight:900!important;white-space:nowrap}
.form-field select{width:100%;height:43px;border:0;border-bottom:2px solid #555;background:#fff;color:#1f2723;font-size:14px;padding:0 9px;outline:none}
.premium-request-groups{display:grid;gap:14px}.premium-request-group{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}.premium-request-group-head{padding:12px 14px;background:#f5f8f6;border-bottom:1px solid var(--line)}.premium-request-group-head b{display:block;margin-bottom:5px;color:var(--green);font-size:13px}.premium-request-group-head span{display:block;color:#66716b;font-size:11px;line-height:1.5}.premium-request-group .company-list{padding:10px}.premium-request-empty{padding:18px;text-align:center;color:#8a928e;font-size:12px}.company-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.map-company-setting-list{display:grid;gap:12px}.map-company-setting-list label{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid #dbe3df;border-radius:12px;background:#fff}.map-company-setting-list input{width:20px;height:20px;accent-color:#174b3d}.map-company-setting-list span{display:grid;gap:4px}.map-company-setting-list b{font-size:14px}.map-company-setting-list small{color:#78817d;font-size:11px}
@media(max-width:760px){.header-inquiry-button{display:none!important}}

#estimateDescription{height:132px;min-height:132px;max-height:132px;resize:none;overflow-y:auto;box-sizing:border-box;}

/* V203_ESTIMATE_TEXTAREA */
#estimateDescription{
  display:block;
  width:100%;
  height:108px;
  min-height:108px;
  max-height:108px;
  box-sizing:border-box;
  resize:none;
  overflow-y:auto;
  padding:11px 12px;
  border:1px solid #cfd7d3;
  border-radius:8px;
  background:#fff;
  color:#27312c;
  font:inherit;
  font-size:13px;
  line-height:1.55;
  outline:none;
}
#estimateDescription:focus{
  border-color:#547d70;
  box-shadow:0 0 0 3px rgba(36,93,73,.08);
}


/* v2.1.1 ZIPTERIOR custom map zoom: keep area-unit control unchanged */
.zipterior-zoom-control{width:42px;display:grid;overflow:hidden;border:1px solid rgba(33,70,59,.11);border-radius:11px;background:rgba(255,255,255,.96);box-shadow:0 9px 24px rgba(18,45,37,.12);backdrop-filter:blur(11px)}
.zipterior-zoom-control button{width:100%;height:42px;padding:0;border:0;background:transparent;color:#34443e;font:700 22px/1 Arial,sans-serif;cursor:pointer}
.zipterior-zoom-control button+button{border-top:1px solid rgba(33,70,59,.11)}
.zipterior-zoom-control button:hover{background:#f2f6f4}.zipterior-zoom-control button:active{background:#e8efeb}
.locate-control{width:42px;height:42px;padding:0;display:grid;place-items:center;border:1px solid rgba(33,70,59,.11);border-radius:11px;background:rgba(255,255,255,.96);box-shadow:0 9px 24px rgba(18,45,37,.12);backdrop-filter:blur(11px);color:#34443e;cursor:pointer}
.locate-control svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.locate-control:hover{background:#f2f6f4}.locate-control:active{background:#e8efeb}.locate-control.active{color:var(--green);border-color:var(--green)}
@media(max-width:760px){
  .zipterior-zoom-control{width:clamp(38px,11vw,48px);align-self:flex-end}
  .zipterior-zoom-control button{height:clamp(38px,11vw,48px)}
  .locate-control{width:clamp(38px,11vw,48px);height:clamp(38px,11vw,48px);align-self:flex-end}
}
/* 2026-08-24: m.html 앱 셸에 임베드된 지도(iframe, nativeMap=1)에서만
   확대축소/현재위치를 우측 하단으로 뺀다. 공유 링크로 이 페이지를
   iframe 없이 직접 여는 방문자는 앱 셸의 하단 탭바가 없으므로 원래
   자리(map-quick-controls 안, 상단)에 그대로 둔다. 앱 셸의 하단
   탭바(m-tabbar)가 이 iframe 위에 별도로 떠서 화면 하단 70px를
   가리므로(m.html css .m-main의 padding-bottom:70px+safe-bottom과
   동일 상수 재사용) 그만큼 여유를 더 준다 -- 안 그러면 버튼이
   탭바 뒤에 가려 안 보인다(2026-08-24 실제로 이 버그 났었음). */
@media(max-width:760px){
  html.zt-embedded .zipterior-zoom-control,
  html.zt-embedded .locate-control{
    position:fixed;
    right:calc(10px + env(safe-area-inset-right,0px));
    top:auto;
    z-index:900;
  }
  html.zt-embedded .locate-control{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  html.zt-embedded .zipterior-zoom-control{bottom:calc(136px + env(safe-area-inset-bottom,0px))}
  /* 2026-08-24: 지도종류/면적단위(.map-quick-controls 안, 상단 유지)의
     top:112px는 원래 이 iframe 자체 topbar(검색창 포함, 실제 높이
     104px)를 기준으로 잡은 값이었다. 임베드 상태(zt-embedded)에선
     그 topbar 내용물이 전부 숨겨져 텅 비어 있는데도 112px를 그대로
     써서, 실제로 화면에 보이는 건 앱 셸의 진짜 상단바(높이 61px)뿐이라
     그 밑으로 51px나 되는 빈 간격이 생겼었다(사용자 리포트, 실측
     확인). 앱 셸 상단바 실측 높이(61px) + 여백 13px로 재계산. */
  html.zt-embedded .map-quick-controls{top:74px}
}
/* v2.5.0 원문 재현: content_blocks가 있는 포트폴리오는 #roomGallery 안에
   이 클래스들로 렌더링된다(.room-gallery의 바깥 padding은 그대로 재사용). */
.doc-block{margin:0 0 18px}
.doc-block-text{font-size:14.5px;line-height:1.85;color:#333;word-break:keep-all;overflow-wrap:anywhere;white-space:pre-line}
.doc-block-heading{margin:30px 0 14px;font-size:18px;line-height:1.45;font-weight:800;color:var(--green)}
.doc-block-image-wrap{text-align:center}
.doc-block-image{width:100%;height:auto;border-radius:10px;cursor:zoom-in;display:block}
.doc-block-caption{margin-top:7px;font-size:12px;line-height:1.6;color:#8a918d}
.doc-block-callout{margin:20px 0;padding:16px 17px;background:#f2f2f2;border-radius:10px;line-height:1.75}
.doc-block-callout-title{margin:0 0 6px;font-size:14.5px;font-weight:800;color:var(--green)}
.doc-block-callout-body{font-size:13.5px;color:#444;white-space:pre-line}
.doc-block-hr{border:0;border-top:1px solid #e5e8e6;margin:26px 0}
.doc-block-dots{text-align:center;letter-spacing:5px;font-weight:700;color:#aab1ac;margin:26px 0;font-size:14px}
.doc-block-link{text-align:center}
.doc-block-link-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 18px;border:1px solid #d9dcda;border-radius:999px;text-decoration:none;color:#25282b;font-weight:700;font-size:13.5px;background:#fff;transition:border-color .15s,color .15s}
.doc-block-link-btn:hover{border-color:var(--green);color:var(--green)}
.doc-block-link-btn svg{flex:0 0 auto;display:block}

/* v2.5.1: 포트폴리오 상세 맨 아래 고정 안내문구/이미지 + 견적문의 CTA */
/* v2.5.56(2026-08-24): v2.5.55에서 이미지 자체의 내부 여백(2.2%)만
   보정했는데도 사용자가 "그래도 폭이 안 맞다"고 재지적 -- 실제
   기준은 버튼이 아니라 룸갤러리 사진(.doc-block-image)이었다.
   실측해보니 진짜 원인은 따로 있었다: 이 `.portfolio-bottom-notice`
   div가 `#roomGallery`(`.room-gallery{padding:...20px...}`) 안에
   그대로 삽입되는데, 여기 자체에도 `padding:22px 20px`가 또 걸려
   있어서 좌우 padding이 20px+20px=40px로 두 겹 적용되고 있었다
   (사진: 560px 뷰포트에서 20px 패딩 1겹→520px / 이 안내섹션: 20px
   두 겹→480px, 실측 40px 차이). 좌우 padding을 없애서 룸갤러리의
   패딩 한 겹만 남긴다 -- 이제 사진과 정확히 같은 폭(520px)이 된다. */
.portfolio-bottom-notice{margin:28px 0 6px;padding:22px 0;border-top:1px solid var(--line);text-align:center}
/* v2.5.55(2026-08-24): 관리자가 올린 안내 이미지(site-settings의
   notice_image_path, /uploads/site-settings/portfolio_notice_*.png)
   자체에 좌우 약 2.2%(위아래 약 4.3%)의 흰 여백이 이미 그려져 있어서,
   같은 박스 폭이어도 이미지 쪽 시각적 콘텐츠만 살짝 좁아 보이는 폭
   불일치가 있었다(사용자가 업로드한 스크린샷으로 확인, 실측 좌우
   여백 34px/1536px). 이미지 파일 자체를 잘라내는 방법도 시도해봤는데,
   그러면 카드의 둥근 모서리 반경까지 같이 잘려서 모서리가 각지게
   깨지는 부작용이 있어(직접 크롭해서 확인) 대신 이미지를 중심
   기준으로 살짝 확대해 시각적 콘텐츠가 박스 폭까지 차도록 한다 --
   원본 파일은 그대로 두고 순수 CSS로 처리해 나중에 관리자가 다른
   이미지로 교체해도 안전하게 되돌릴 수 있다(그땐 이 transform도
   같이 재조정 필요). v2.5.56: 이미지를 누르면 밑 버튼과 똑같이
   견적문의가 뜨도록 했으므로(js/app.js portfolioBottomHtml) 클릭
   가능함을 알리는 포인터 커서 추가. */
.portfolio-bottom-notice-image{display:block;max-width:100%;margin:0 auto 14px;border-radius:12px;transform:scale(1.047);cursor:pointer}
.portfolio-bottom-notice-text{margin:0 0 16px;color:#555e59;font-size:12.5px;line-height:1.7;white-space:pre-line}
.portfolio-bottom-cta-btn{display:block;width:100%;border:0;border-radius:12px;padding:16px;background:var(--green);color:#fff;font-size:14px;font-weight:800;cursor:pointer}
.portfolio-bottom-cta-btn:hover{background:var(--green-2)}
.portfolio-inquiry-note{margin:0 0 14px;font-size:12px;color:#6c7b75;line-height:1.6}

/* v2.5.44(2026-08-24): 모바일 폭에서 포트폴리오/업체/단지 상세 패널이
   열려 있는 동안 상단 메인 검색창(.search-box)이 어설프게 겹쳐 보이던
   버그 -- .topbar가 z-index:2500으로 패널(2200~2300)보다 항상 위에
   있는데, 데스크톱은 :has()로 topbar를 옆으로 밀어서 안 겹치게
   해뒀지만(line 87-93) 모바일은 패널이 전체화면을 덮어서 그 처리가
   의미가 없어짐. 상세를 보는 중엔 검색이 필요 없는 화면이라(먼저
   닫기/뒤로가야 다시 검색 가능) 로고(.brand-box)와 똑같은 조건으로
   검색창만 숨긴다.
   v2.5.45(2026-08-24) 추가: `.top-actions`(로그인·채팅·햄버거, F1에서
   복구한 것들)의 실제 표시 버그(1060px 이하에서 버튼이 숨겨져 있던
   것, line 162 참고)를 고치고 나니 -- 이번엔 그 버튼들이 정상적으로
   보이면서 포트폴리오 상세 패널 자체의 헤더(즐겨찾기 하트 버튼)와
   같은 자리에서 서로 겹치는 게 드러남(둘 다 화면 우측 상단을 차지하는
   서로 다른 레이어). `.portfolio-detail-panel`/`.company-detail-panel`은
   전체화면을 덮어서(단지 기본정보 `.detail-panel`은 78dvh만 차지해서
   위쪽에 topbar 공간이 남아있어 문제 없음, 그래서 이 조건엔 안 넣음)
   자체 헤더(제목+즐겨찾기+닫기)가 이미 topbar 역할을 대신하므로
   `.top-actions`도 같이 숨긴다 -- 나가는 길은 패널 자체의 닫기/뒤로
   버튼과 바깥 m.html 오버레이 닫기(×)로 이미 충분함.
   `!important` 필요: F1 수정(384번째 줄 근처)이
   `.top-actions{display:flex!important}`로 이미 !important를 쓰고
   있어서, 이 규칙도 !important 없인 그걸 절대 못 이긴다(처음에
   !important 없이 넣었다가 실제 브라우저에서 안 먹히는 걸 확인하고
   추가함, 2026-08-24). */
@media(max-width:760px){
  .app.panel-open .search-box,
  .app:has(.portfolio-detail-panel.open) .search-box,
  .app:has(.company-detail-panel.open) .search-box,
  .app:has(.company-detail-panel.open) .top-actions{display:none!important}
}
/* v2.5.52(2026-08-24): 포트폴리오 상세(.portfolio-detail-panel)는 더 이상
   .top-actions를 통째로 숨기지 않는다 -- 아래 v2.5.52 블록에서 스크롤
   연동(첫 진입엔 숨김, 스크롤하면 .portfolio-detail-area-unit 밑에 표시)
   으로 대체. 업체 상세(.company-detail-panel)는 이번 요청 범위 밖이라
   기존 "통째로 숨김" 그대로 유지. */

/* v2.5.49(2026-08-24): 위에서 검색창 자체를 숨긴 자리에, 채팅·햄버거와
   짝을 이루는 돋보기 아이콘 버튼을 추가(탭하면 검색창이 그 자리에
   뜸). 데스크톱은 검색창이 항상 보이니 이 버튼 자체가 필요 없어
   기본은 숨김. */
.mobile-search-toggle{display:none}
@media(max-width:760px){
  .app.panel-open .mobile-search-toggle,
  .app:has(.portfolio-detail-panel.open) .mobile-search-toggle,
  .app:has(.company-detail-panel.open) .mobile-search-toggle{
    display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;
    border:0;border-radius:12px;background:rgba(255,255,255,.96);
    color:var(--green);box-shadow:0 10px 28px rgba(18,45,37,.12)
  }
  .mobile-search-toggle svg{width:20px;height:20px}
  /* 돋보기를 탭하면 검색창을 그 자리에 강제로 다시 보여주고(위 규칙을
     더 구체적인 선택자+순서로 이김), 채팅·햄버거는 잠깐 숨겨서 좁은
     화면에서 서로 안 겹치게 한다 -- 돋보기 버튼 자신은 계속 보여서
     다시 탭하면 닫히는 토글로도 쓰인다(js/app.js의
     mobileSearchToggle 클릭 핸들러). */
  .app.mobile-search-open .search-box{display:block!important;flex:1}
  .app.mobile-search-open .map-chat-button,
  .app.mobile-search-open .admin-menu-wrap{display:none!important}

  /* v2.5.53(2026-08-24): 포트폴리오 상세(.portfolio-detail-panel)에서
     돋보기를 눌러도 검색창이 안 뜨던 버그 -- 위 v2.5.44 규칙
     (.app:has(.portfolio-detail-panel.open) .search-box{display:none
     !important}, 1463번째 줄)의 특이도(.app + :has(2개 클래스) +
     .search-box = 클래스 4개분)가 바로 위 .mobile-search-open 규칙
     (.app + .mobile-search-open + .search-box = 클래스 3개분)보다
     높아서 돋보기를 눌러 mobile-search-open을 켜도 검색창이 계속
     숨어 있었다(포트폴리오 상세 화면 자체가 이번 세션 초반까지
     .top-actions를 통째로 숨겨서 발견 자체가 안 됐던 버그).
     .search-box는 이 화면에서도 원래 .topbar 자리(top-actions는
     이제 이 화면에서 fixed로 빠져 있어 topbar엔 검색창만 남음)에
     그대로 뜨면 되므로 별도 위치 지정 없이 특이도만 더 높여 이긴다. */
  .app.mobile-search-open:has(.portfolio-detail-panel.open) .search-box{
    display:flex!important;flex:1
  }

  /* v2.5.51(2026-08-24): 이 3개 아이콘(돋보기·채팅·햄버거)을 가로
     나열 대신 세로로 쌓고, 순서도 햄버거 → 돋보기 → 채팅으로. flex
     order로만 바꿔서 DOM 순서(그래서 이벤트 바인딩 등)는 안 건드림. */
  .app.panel-open .top-actions,
  .app:has(.portfolio-detail-panel.open) .top-actions,
  .app:has(.company-detail-panel.open) .top-actions{
    flex-direction:column;height:auto;padding:0;gap:8px;background:transparent;
    border:0;box-shadow:none;backdrop-filter:none
  }
  .app.panel-open .admin-menu-wrap,
  .app:has(.portfolio-detail-panel.open) .admin-menu-wrap,
  .app:has(.company-detail-panel.open) .admin-menu-wrap{order:1}
  .app.panel-open .mobile-search-toggle,
  .app:has(.portfolio-detail-panel.open) .mobile-search-toggle,
  .app:has(.company-detail-panel.open) .mobile-search-toggle{order:2}
  .app.panel-open .map-chat-button,
  .app:has(.portfolio-detail-panel.open) .map-chat-button,
  .app:has(.company-detail-panel.open) .map-chat-button{order:3}
  /* 햄버거 버튼은 기존에 브라우저 기본 버튼 배경(회색 계열)에
     의존하고 있었다 -- 돋보기·채팅 아이콘과 나란히 세로로 쌓이면서
     생김새가 다르면 눈에 띄어서, 같은 흰 배경+그림자+둥근 모서리로
     맞춘다(관리자/업체 모드의 역할별 색상 강조는 !important라 그대로
     이김 -- 여긴 굳이 안 뺏음). */
  .app.panel-open .admin-menu-button,
  .app:has(.portfolio-detail-panel.open) .admin-menu-button,
  .app:has(.company-detail-panel.open) .admin-menu-button{
    background:rgba(255,255,255,.96);border-radius:12px;
    box-shadow:0 10px 28px rgba(18,45,37,.12)
  }
}

/* v2.5.52(2026-08-24): 포트폴리오 상세 화면(.portfolio-detail-panel) --
   지도 경유(단지 선택→포트폴리오 탭→카드)든 홈 경유(피드 카드 바로
   클릭)든 결국 같은 하나의 .portfolio-detail-panel로 들어오므로, 여기
   한 곳만 고치면 두 진입 경로 모두에 똑같이 적용된다("어느 루트로
   들어오든 기본구성은 같아야 한다"는 요청 그대로). 단지 정보 패널의
   .mobile-panel-area-unit(462번째 줄 근처)과 짝을 맞춘 평/㎡ 토글을
   새로 추가하고, 그 밑에 햄버거·찾기·채팅(.top-actions)을 같은 스크롤
   연동 규칙으로 둔다 -- 첫 진입 화면엔 둘 다 안 보이다가 스크롤하면
   (js/app.js의 updatePortfolioDetailDock가 붙이는
   .mobile-actions-docked 클래스) 함께 나타난다. */
.portfolio-detail-area-unit{display:none}
@media(max-width:760px){
  .portfolio-detail-area-unit{
    position:absolute;z-index:56;top:100px;right:14px;height:36px;
    display:flex;align-items:center;gap:2px;padding:3px 6px;
    border:1px solid rgba(33,70,59,.14);border-radius:10px;
    background:rgba(255,255,255,.96);box-shadow:0 6px 16px rgba(18,45,37,.14);
    backdrop-filter:blur(10px);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease
  }
  .portfolio-detail-area-unit button{width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:#727b76;font-size:11px;font-weight:900}
  .portfolio-detail-area-unit button.active{background:rgba(30,94,72,.5);color:#fff}
  .portfolio-detail-area-unit>span{color:#c1c7c3;font-size:11px}
  .portfolio-detail-panel.mobile-actions-docked .portfolio-detail-area-unit{opacity:1;visibility:visible;pointer-events:auto}

  /* 햄버거·찾기·채팅은 .topbar(z-index:2500) 안의 .top-actions인데,
     이 패널이 열려 있을 땐 topbar의 다른 형제(로고·검색창)는 이미
     숨어 있으므로(위 v2.5.44 규칙) top-actions만 fixed로 떼어내
     평/㎡ 토글 바로 밑에, 같은 스크롤 연동으로 둬도 안전하다. */
  .app:has(.portfolio-detail-panel.open) .top-actions{
    position:fixed;z-index:2500;top:150px;right:14px;margin:0;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease
  }
  .app:has(.portfolio-detail-panel.mobile-actions-docked) .top-actions{
    opacity:1;visibility:visible;pointer-events:auto
  }
}

/* v2.5.54(2026-08-24): 위 v2.5.52는 .portfolio-detail-panel(개별
   포트폴리오 전체화면 상세)만 고쳤는데, 지도에서 마커 눌러 여는
   .detail-panel(단지정보/타입/포트폴리오 탭이 있는 화면 -- 업로드
   스크린샷에서 사용자가 "포폴 창"이라고 부른 화면이 바로 이거였다)엔
   같은 문제가 그대로 남아 있었다: `.top-actions`가 F1(394번째 줄
   `.top-actions{display:flex!important}`)때부터 이 화면에서 스크롤과
   무관하게 항상 떠 있어서 (1) 탭 고정 전엔 `.detail-tabs`의
   "포트폴리오" 탭 글자를 가리고 (2) 탭 고정 후엔 `.mobile-panel-area-unit`
   (평/㎡ 토글, top:116~152px)과 `.top-actions`의 채팅 버튼(항상
   top:8~150px 근처)이 같은 자리에서 겹쳐 보였다(업로드 스크린샷에
   그대로 찍혀 있음). 이 화면엔 이미 `.mobile-tabs-docked` 스크롤 감지
   클래스가 있으므로(js/app.js의 updateMobileDetailDock, 462번째 줄
   근처) 새 JS 없이 같은 opacity 스크롤 연동 패턴만 적용한다. */
@media(max-width:760px){
  .app.panel-open .top-actions{
    position:fixed;z-index:2500;top:166px;right:14px;margin:0;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease
  }
  .app:has(.detail-panel.mobile-tabs-docked) .top-actions{
    opacity:1;visibility:visible;pointer-events:auto
  }
}

/* v2.5.48(2026-08-24): 딥링크 부팅 마스크(위 index.html 상단 주석
   참고). #bootMask에 직접 display:flex를 걸면 ID 선택자 특정성이
   [hidden]{display:none}(UA 스타일시트, 특정성 낮음)을 이겨버려서
   hidden 속성을 줘도 안 사라지는 버그가 남(이 프로젝트에 실제로
   여러 번 있었던 "hidden이 CSS에 밀리는" 패턴) -- :not([hidden])로
   범위를 좁혀서 hidden일 땐 항상 UA 기본값(display:none)이 이기게
   보장한다. */
#bootMask:not([hidden]){display:flex;align-items:center;justify-content:center}
.boot-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(31,92,70,.15);border-top-color:var(--green);animation:boot-spin .7s linear infinite}
@keyframes boot-spin{to{transform:rotate(360deg)}}