이태리정미소 UX Lab — 상품상세 탭바 겹침 수정

!증상

모바일에서 스크롤하면 sticky 탭바가 로고 헤더를 안 따라가고 제자리에 남아, 헤더와 탭바 사이 틈으로 뒤의 약속블록(딥그린)이 비쳐 보임. 특히 상단 띠배너를 닫으면 더 도드라짐. PC는 헤더 높이가 우연히 맞아 티가 안 나서 오래 몰랐던 버그.

▲ 실제 문제 — 로고 헤더와 탭바(상세정보·구매평·Q&A) 사이로 약속블록(OUR PROMISE)이 비쳐 보인다

?원인 — 우리 잘못이 아니었다

탭바 .additional_nav의 sticky top:75px는 스킨 소스 어디에도 없었음(전체 grep 0개). = 카페24 기본 시스템이 자동으로 넣는 값. 카페24 표준 헤더 높이(75) 기준인데, 우리는 헤더를 커스텀(띠배너+로고)으로 바꿔서 값이 어긋난 것.

로고헤더	top:0 → "무조건 맨 위". 높이 몰라도 됨 → 잘 따라감
탭바	top:75 → "헤더 밑". 헤더 높이(85/50)를 알아야 하는데 75 고정 → 안 맞음

✕먼저 실패한 길 — JS

JS로 헤더 높이를 재서 탭바 top을 맞추려 했으나(syncTab), 실폰(갤럭시)에서 계속 미작동. headless 테스트만 통과하고 실제 폰은 안 됨(오늘 3연속 같은 함정). 카페24 상세 description·스킨 하단 JS는 실브라우저에서 안 도는 경우가 있음 — 뱃지(initBadges)는 되는데 위치 다른 syncTab은 안 됨.

✓해법 — 순수 CSS :has()

JS 없이 CSS만으로. :has()로 "띠배너가 닫혔나"를 감지해서 탭바 top을 자동 전환. CSS는 브라우저가 무조건 적용하니 실행 이슈가 없어 실폰서도 확실히 됨.

/* 탭바 top을 헤더 높이에 맞춤 (띠배너 닫힘 감지, JS 없이) */
.additional_nav{ top:85px !important; }
body:has(#topBanner[style*="none"]) .additional_nav{ top:50px !important; }
@media(min-width:769px){
  .additional_nav{ top:107px !important; }
  body:has(#topBanner[style*="none"]) .additional_nav{ top:72px !important; }
}

📐 헤더 실측: 모바일 85(띠배너35+로고50)/닫으면 50 · PC 107/닫으면 72. 이 숫자를 top에 그대로 씀.

★정착시킨 방법 — 테스트 스킨

헤더·구조를 건드리는 수정은 활성 스킨(8번) 직접 말고 복사본에서 먼저. 라이브 리스크 0으로 실폰 확인 후 적용.

은우 실험 복사본(안 쓰는 것) 하나에 CSS 적용

미리보기 URL로 미주 폰 확인 — italy-jungmiso.com/skin-skin{번호}/product/detail.html?product_no=27

실폰서 확인되면 → 8번 백업 뜨고 그대로 적용

💡 카페24 미리보기는 skin-skin{번호} 경로 방식. ?skin_no= 파라미터는 안 됨.

✎배운 것

① 스킨 소스에 없는 값은 카페24 기본 시스템 의심.
② 카페24 상세 JS는 실폰서 안 될 수 있음 → 인터랙션은 CSS 우선(:has 등).
③ headless "된다" ≠ 실폰 보장. 헤더·구조는 반드시 테스트 스킨 실폰 확인.