@charset "utf-8";
/* ======================================================================
   bookmark_hit.css — My List(.bk_btn) 클릭영역 공통 오버라이드
   ----------------------------------------------------------------------
   [배경]
   .bk_btn 은 exhibition / screening / participants / magazine / event
   스킨에 동일 패턴(카드 우상단, absolute, 32~34px)으로 들어가 있고,
   그 아래에는 카드 전체를 덮는 이동 링크(.cover, .cover.modalBtn,
   .blackcover, .thumb.modalBtn*)가 깔려 있다.
   → 아이콘을 몇 px 빗나가면 곧바로 상세/모달 링크가 실행된다.

   [해법]
   (A) 터치 타깃 확대 : 겉보기 크기는 유지하고 ::before 로 클릭 판정만
       48px(coarse pointer 56px)로 넓힌다. 버튼이 주변 클릭을 먼저
       가로채므로 오조작이 사라진다. WCAG 2.5.8 Target Size 충족.
   (B) 오버레이 코너 컷 : "투명 전체덮개" 링크(.cover/.blackcover)에만
       clip-path 로 우상단 안전지대를 판다. clip-path 는 히트 테스트에도
       적용되므로 그 영역 클릭은 링크로 가지 않는다. 투명 요소라 시각
       변화는 없다.
       ※ .thumb(포스터 이미지 링크)에는 적용하지 않는다 — 이미지가 실제로
         잘려 보이기 때문. 해당 영역은 (A)만으로 해결한다.

   [로드 위치] foot.asp 최하단 inc → 스킨 CSS 이후에 로드되어야 이긴다.
   [조정] 카드 컨테이너에 --bk-safe 를 재정의하면 안전지대 크기를 스킨별로
          바꿀 수 있다. (기본 60px / 모바일 72px)
   ====================================================================== */

/* ---------- (A) 터치 타깃 확대 : 전 스킨 공통 ---------- */
.bk_btn { touch-action:manipulation !important; }

/* 확장 타깃이 카드(overflow:hidden) 밖으로 나가 잘리지 않도록
   버튼을 모서리에서 12px 안쪽으로 통일한다. 겉보기 크기는 스킨값 유지.
   (exhibition 10px / screening 8px / participants 10px → 12px) */
.bk_btn { top:12px !important; right:12px !important; }
/* 예외 : 부스 상세 Line-up 은 li 안쪽 여백(1rem)이 별도로 있다 */
.booth .lineup_list li .bk_btn { top:12px !important; right:calc(1rem + 12px) !important; }

.bk_btn::before {
  content:"" !important;
  position:absolute !important; top:50% !important; left:50% !important;
  width:60px !important; height:60px !important;
  min-width:100% !important; min-height:100% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important; background:transparent !important;
  /* 아이콘(<i>)은 DOM 상 뒤에 오므로 항상 위에 그려진다 */
}
/* 터치 디바이스는 더 넉넉하게 */
@media (pointer:coarse) {
  .bk_btn::before { width:68px !important; height:68px !important; }
}
/* busy 상태에서는 확장영역도 함께 잠근다(스킨의 pointer-events:none 상속) */

/* ---------- (B) 투명 오버레이 링크 우상단 코너 컷 ---------- */
@supports selector(:has(*)) {
  /* 안전지대 ≥ 버튼 offset(12px) + 타깃 반경(30px) + 여유  → 76px */
  :has(> .bk_btn) { --bk-safe:76px; }
  :has(> .bk_btn) > .cover,
  :has(> .bk_btn) > .blackcover {
    -webkit-clip-path:polygon(0 0,
              calc(100% - var(--bk-safe)) 0,
              calc(100% - var(--bk-safe)) var(--bk-safe),
              100% var(--bk-safe),
              100% 100%, 0 100%) !important;
            clip-path:polygon(0 0,
              calc(100% - var(--bk-safe)) 0,
              calc(100% - var(--bk-safe)) var(--bk-safe),
              100% var(--bk-safe),
              100% 100%, 0 100%) !important;
  }
  @media (max-width:768px) {
    :has(> .bk_btn) { --bk-safe:88px; }
  }
}
/* :has() 미지원 브라우저 fallback — inc_bookmark_hit.asp 의 JS 가
   .bk_btn 의 부모에 .bk-host 를 붙여준다. */
.bk-host { --bk-safe:76px; }
.bk-host > .cover,
.bk-host > .blackcover {
  -webkit-clip-path:polygon(0 0,
            calc(100% - var(--bk-safe)) 0,
            calc(100% - var(--bk-safe)) var(--bk-safe),
            100% var(--bk-safe),
            100% 100%, 0 100%) !important;
          clip-path:polygon(0 0,
            calc(100% - var(--bk-safe)) 0,
            calc(100% - var(--bk-safe)) var(--bk-safe),
            100% var(--bk-safe),
            100% 100%, 0 100%) !important;
}
@media (max-width:768px) { .bk-host { --bk-safe:88px; } }