/* ============================================================ 집테리어 모바일 터치타겟 보정 css/zp-touch-target.css 2026-09-08 신설 ------------------------------------------------------------ [배경] 모바일 전담 세션 감사에서 집테리어 첫 화면에 44px 미만 터치타겟이 21개(공용 GNB 것 4개 제외) 나왔다. 애플 HIG/구글 M3 권장은 44x44 이고, 디자인 총괄 확정 원칙은 **"44는 시각 크기가 아니라 히트영역 기준"** 이다. [모바일 세션과 합의한 3분류] (A) 아이콘 버튼 시각 크기를 지켜야 함 -> ::after 로 히트영역만 확장 (B) 텍스트 버튼 배경 없음 -> padding 으로 키움(시각 변화 없음) (C) 폼 컨트롤 select/input -> min-height 로 요소 자체를 키움 (히트영역만 넓히면 시각적으로 작아 보여 어색) [특정도 주의] 기존 규칙이 style.css 에 있고 대부분 (0,1,0)/(0,1,1) 이다. 이 파일은 index.html 에서 style.css **뒤에** 로드되므로, 같은 셀렉터를 그대로 써서 특정도를 맞추면 나중 선언으로 이긴다. (@media 는 특정도를 올려주지 않는다 -- 같은 날 두 세션이 이걸로 배포를 한 번씩 헛쳤다.) [겹침 실측] 히트영역을 44 로 넓히면 인접 버튼 클릭을 가로챌 수 있어 전부 실측했다. 패널 안에서 겹치는 쌍은 평/㎡ 하나뿐(중심간 35px). ⚠️ 2026-09-11 정정 — 위 문단에 원래 "지도 레일은 이미 44x44 라 위험 없음" 이라고 적혀 있었는데 **틀렸다.** 그때 잰 것은 타일이고 실제로 눌리는 버튼은 안 쟀다. 타일 44x44 에 border:1px 이 있어 button 의 width:100% 는 42 다. 실측 오프셋 L1 T1. 같은 착각을 집팔고·집사고에서도 발견해 셋 다 고쳤다. → **레일 값은 타일이 아니라 button 을 잴 것.** ============================================================ */ @media (max-width: 768px) { /* ---- (A) 아이콘 버튼: 시각 크기 유지, 히트영역만 44 ---- */ /* 단지 패널 닫기 38x38 -> 히트영역 44x44 (기존 ::after 없음 확인) */ .panel-close::after { content: ""; position: absolute; inset: -3px; } /* 업체·포폴 패널 닫기 38x38 */ .company-detail-close, .portfolio-detail-close { position: relative; } .company-detail-close::after, .portfolio-detail-close::after { content: ""; position: absolute; inset: -3px; } /* 즐겨찾기 하트 38x38 / 40x40 */ .portfolio-detail-favorite, .company-favorite-heart { position: relative; } .portfolio-detail-favorite::after { content: ""; position: absolute; inset: -3px; } /* ⚠️ 업체 하트는 **테두리 1px** 이 있어 ::after 의 inset 기준(패딩 상자)이 38 이다. -2 는 38+4 = 42 였다 (2026-09-11 실측, 디자인 총괄 제보). 테두리 0 인 옆 규칙들과 같은 -3 이 아니라 **테두리만큼 더** 넓혀야 44 가 된다. 업체 닫기와 42px 떨어져 있어 넓혀도 사이 약 37px — 가로챌 일 없음. ⚠️ 포트폴리오 하트와 포트폴리오 닫기는 8px 떨어져 있어 둘 다 -3 이면 사이가 2px 뿐이다. 둘 중 하나에 테두리가 생기거나 inset 을 키우면 서로의 누르는 영역을 먹는다. */ .company-favorite-heart::after { content: ""; position: absolute; inset: -3px; } /* 채팅 닫기 24x24 -- 가장 작았다 */ .chat-close { position: relative; } /* ⚠️ 위 한 줄은 **지고 있었다** — zp-map-rail.css:385 의 `.app > .chat-panel .chat-close{ position:static !important }` 때문에 버튼이 static 이 되어 아래 ::after 가 버튼이 아니라 **헤더(.chat-panel-head) 전체**에 붙었다. 실측(375px): 헤더 25점 중 25점을 닫기가 받음 · 누르는 영역 293x54 · 제목 '채팅' 을 눌러도 채팅이 닫힘. 같은 선택자 + !important 로 이긴다(나중에 실린 이 파일이 이김). 상대가 top/right 를 auto !important 로 두고 있어 relative 로 바꿔도 버튼 위치는 그대로다. ::after 기준을 버튼으로 되돌리는 것이 목적이다. ⚠️ 두 규칙은 한 쌍이다 — 어느 한쪽만 지우면 다시 헤더 전체가 닫기 버튼이 된다. ⚠️ 같은 static !important 가 .chat-back 에도 걸려 있다. 거기에 ::after 확장을 넣을 땐 이것도 같이. */ .app > .chat-panel .chat-close{ position:relative !important; } .chat-close::after { content: ""; position: absolute; inset: -10px; } /* ---- 지도 레일은 이번 범위에서 뺐다 ---- 줌 +/- 42x44, 일반/위성·평/㎡ 42x42 로 잡히지만, 실측해보니 **컨테이너가 이미 44x44 이고 border 1px 때문에 내부 button 이 42px** 인 구조였다(zoom 컨테이너 44x90, type/unit 44x44). 즉 실제 부족분은 테두리 1px 뿐이라 체감 개선이 거의 없고, zoom 컨테이너는 overflow:hidden 이라 ::after 확장이 잘린다. 건드리면 레일 정렬이 틀어질 위험이 이득보다 커서 그대로 둔다. (접근성 감사 도구에는 계속 42px 로 잡힌다 -- 알고 남기는 것) */ /* ---- (B) 텍스트 버튼: padding 으로 ---- */ /* 단지/타입/포트폴리오 탭 114x43 -- 세로 1px 부족 */ .detail-tab { padding: 13px 4px; } /* ---- (C) 폼 컨트롤: 요소 자체를 키움 ---- */ /* 포트폴리오 필터 select 3개 108x38 (#areaFilter/#typeFilter/#sortFilter) */ /* ---- 2026-09-11: 필터 select 를 모바일에서 2줄 배치 + 글씨 16px ---- iOS 는 입력 글씨가 16px 미만이면 초점이 갈 때 화면을 확대한다(사용자가 손으로 축소해야 함). 한 줄로는 16px 이 안 들어간다 — `typeFilter` 는 app.js:599 가 단지 데이터로 채우고 실제 값이 "113E타입"(6자)이다. 16px x 6자 ~ 96px + 화살표 > 108px 칸. 문구를 줄이는 안도 탈락(단지 데이터라 우리가 못 줄임). 지금 3칸 x 108 + gap 14 = 338 (폭 339 를 꽉 채움 — 넓힐 여유 0) 2줄 2칸씩 -> 칸당 166 (안쪽 130, 6자도 여유) 대가는 세로 44px. 이 필터는 패널 안이고 패널이 세로 스크롤이라 감당 가능하다. ⚠️ 실제 아이폰 확인 전이라 '고쳤다'가 아니라 '고쳤다고 본다' 상태다. ⚠️ flex-grow 를 0 으로 둔다 — 안 그러면 마지막 한 칸이 둘째 줄에서 통째로 늘어난다. */ .filters { flex-wrap: wrap; } .filters select { min-height: 44px; font-size: 16px; flex: 0 1 calc(50% - 3.5px); } /* ---- 2026-09-10 재감사에서 남아 있던 3종 ---- */ /* (A) 패널 안 평/㎡ 토글 28x28 (단지패널·포트폴리오 상세 두 곳). 이 파일 위쪽 주석대로 이 쌍은 중심 간 35px 이라 **세로만** 넓힌다. 가로까지 넓히면 서로의 클릭을 먹는다. */ .mobile-panel-area-unit button, .portfolio-detail-area-unit button { position: relative; } .mobile-panel-area-unit button::after, .portfolio-detail-area-unit button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* (B) '채팅으로 문의하기' 116x32 — 디자이너에게 연락하는 실제 CTA 인데 32px 이었다. 텍스트 버튼이라 실제 높이를 키우는 쪽이 눈에도 정직하다. */ .portfolio-chat-button { min-height: 44px; } /* ---- 2026-09-11: 업체 포트폴리오 검색칸 43px -> 44px ---- `#companyPortfolioSearch` 가 339x43 으로 세로 1px 모자랐다(메인 `#searchInput` 은 46 통과). height:43px + box-sizing:border-box 라 min-height 로 이긴다. */ #companyPortfolioSearch { min-height: 44px; } /* ---- 2026-09-11: 줌 +/− 히트영역 가로 42 -> 44 ---- 타일은 44 인데 border:1px 이라 버튼의 width:100% 가 42 였다. 세로는 이미 44 다. ⚠️ @media 밖의 `.zipterior-zoom-control`(style.css:1546~1548)은 건드리지 않는다 — PC 지도 컨트롤이고 집테리어 총괄 소관이다. 네 가지를 같이 넣는 이유(하나만 바꾸면 다른 게 깨진다): 1) overflow:hidden 이면 음수 마진이 잘려 히트영역이 안 늘어난다 → 연다 2) 열면 :active 배경의 각진 모서리가 둥근 타일 밖으로 삐져나온다 → 첫/끝에 radius 3) 버튼을 넓히면 border-top 구분선도 늘어 좌우 테두리에 닿는다 → ::before 로 옮겨 padding box(42px) 안에 가둔다. 위치는 실측값(타일 기준 y=45) 그대로 top:44px 4) ::before 가 버튼 위에 깔리므로 pointer-events:none */ .map-quick-controls .zipterior-zoom-control{ overflow: visible !important; position: relative; } .map-quick-controls .zipterior-zoom-control button{ margin-left: -1px !important; margin-right: -1px !important; width: calc(100% + 2px) !important; } .map-quick-controls .zipterior-zoom-control button:first-of-type{ border-radius: 12px 12px 0 0 !important; } .map-quick-controls .zipterior-zoom-control button:last-of-type{ border-radius: 0 0 12px 12px !important; } .map-quick-controls .zipterior-zoom-control button + button{ border-top: 0 !important; } .map-quick-controls .zipterior-zoom-control::before{ content: ""; position: absolute; left: 0; right: 0; top: 44px; height: 1px; background: #e6e9e7; pointer-events: none; } /* ---- 2026-09-11: 글씨 하한 (터치타겟은 아니지만 같은 모바일 override 파일) ---- 디자인 총괄 판정 = ≤7px 무조건 · 8~9px 올림 · 10px 유지. 집테리어 총괄 조건 = 모바일만, @media 밖(PC)은 건드리지 말 것. 둘을 합쳐 **375px 에서 실제로 렌더되는 것만** 골랐다 — 선언은 102곳인데 화면에 보이는 11px 미만은 13건이고 그중 9px 이하는 2건뿐이었다. 실측: 9px 16x16 넘침없음 -> 11px 16x16 넘침없음 (line-height 만 따라 올라간다). ⚠️ `.ai-search-new`(8px, "AI")는 **안 올렸다** — 11px 로 하면 상자가 15.8 -> 18.7 로 늘면서 글자가 넘치고 부모(44x44) 밖으로 3px 나간다. 상자를 같이 키워야 하는데 그건 시각 디자인 변경이라 총괄 판단 사항이다. */ .map-quick-controls .map-rail-badge { font-size: 11px; } /* ---- 2026-09-11: 지도 레일 토글(일반|위성 · 평|㎡) 42x42 -> 44x44 ---- 타일은 44x44 가 맞는데 border:1px 때문에 그 안 button 의 width:100% 가 42 였다. 핸들러가 타일이 아니라 button 에 걸려 있어 테두리 1px 고리는 죽은 영역이었다. button 이 테두리까지 덮게 하고 배경을 transparent 로 바꾼다 — 타일 배경이 이미 #fff 라 **보이는 색과 크기는 하나도 안 바뀌고**, 덮을 배경이 없으니 테두리가 그대로 보인다. 토글 타일은 overflow:visible 이라 잘리지도 않는다(줌만 hidden). 원본이 !important 라 같은 셀렉터·같은 특정도로 맞춘다(이 파일이 뒤에 로드된다). ⚠️ 줌 +/− 는 42x44 로 가로만 2px 모자란데 안 건드렸다 — overflow:hidden 이라 열어야 하고, 열면 :active 배경의 각진 모서리가 삐져나온다. 총괄 판단 사항. */ .map-quick-controls .map-type-control button.active, .map-quick-controls .area-unit-control button.active{ background: transparent !important; margin: -1px !important; width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; } } /* ---- 2026-09-11: 모바일 상세 창(업체·포트폴리오·단지)을 공통 헤더 아래로 — 닫기 X 가 헤더에 덮여 못 누르던 것 ---- 실측(375px): 업체·포트폴리오 창 top 0 이라 헤더(#zpPortalHeader, 두 줄 102px) 밑에 깔려 **X 를 누르면 햄버거 메뉴가 열림** (X 누르는 영역 0x0). 단지 창은 margin-top 84(헤더가 한 줄이던 때 값)라 헤더와 18 겹치고(X 44x32) 아래 84px 가 화면 밖. zp-portal-header.css 는 09-06 에 '모바일은 전체화면 패널이라 그대로' 두었는데, 그 뒤 모바일 헤더가 두 줄이 되며 전제가 깨졌다. top 만 102 로 올리면 아래가 102 밀리고 헤더를 숨기면 단지 창 위로 지도가 비친다 -> 헤더 높이만큼 내리고 높이는 auto (기존 inset:0 의 bottom:0 이 높이를 정해 아래끝 = 화면 끝). PC(>=769)는 zp-portal-header.css 의 84 가 그대로 맡는다. ⚠️ 헤더 높이가 바뀌면(모바일 헤더 축소 결재 대기) 아래 변수 한 줄만 새 실측값으로 바꿀 것 — 84 가 102 에서 틀린 것처럼 또 틀린다. 이기는 근거: 이 파일이 index.html 에서 맨 마지막에 실린다. .detail-panel 은 style.css:492·zp-portal-header.css:74 와 특이도가 같아 나중 것이, .app > 업체/포트폴리오(0,2,0)는 style.css:514(0,1,0)를 이긴다. 업체·포트폴리오엔 .detail-panel 클래스가 없어 이중으로 안 내려간다. */ @media (max-width:768px){ :root{ --zp-portal-header-h: 102px; } /* 공통 헤더 실측 높이(375·320 모두 102) */ .detail-panel{ margin-top: var(--zp-portal-header-h); height: auto; } .app > .company-detail-panel, .app > .portfolio-detail-panel{ top: var(--zp-portal-header-h); height: auto; } }