/* ================================================================
   v353 — 카드관리 미리보기 구도 = 실제 카드 구도 (얼굴 잘림 해결)

   [근본 원인]
   카드관리 미리보기의 이미지 영역은 세로로 긴 상자(가로/세로 ≈ 0.85)인데,
   실제 카드(손패/전장/본진)의 이미지 행은 가로로 넓은 상자(≈ 1.14)다.
   두 상자 모두 object-fit:cover + object-position 을 쓰기 때문에
   "저장한 Y 지점"은 같은 위치에 오지만, 보이는 세로 범위가 서로 다르다.
     · 미리보기(0.85) : 원본의 약 8% ~ 78% 구간이 보임  → 얼굴 + 전신
     · 실제 카드(1.14): 원본의 약 13% ~ 65% 구간만 보임 → 얼굴 윗부분 잘림
   즉 v348/v350/v351/v352 처럼 object-position 값만 맞춰서는 해결되지 않는다.
   (컨테이너 비율이 다르면 crop 범위 자체가 달라지기 때문)

   [해결 방식 — 공통 기준 프레임]
   실제 카드에서 <img> 자신을 "미리보기와 똑같은 비율의 기준 프레임"으로 만든다.
     img { width:100%; height:auto; aspect-ratio:var(--v353-ref-ratio); }
   이 프레임 안에서 cover/object-position/scale 이 계산되므로
   프레임 내부의 그림은 미리보기와 픽셀 단위로 동일한 구도가 된다.
   카드의 이미지 행이 프레임보다 낮으면 프레임의 "아래쪽"만 잘린다.
   → 상단(얼굴)은 절대 잘리지 않고, 미리보기와 같은 확대율·같은 위치로 보인다.
   ================================================================ */

:root{
  /* 기준 프레임 가로/세로 비율 = 카드관리 미리보기 이미지 영역 비율.
     기존 저장값(imageScale/imagePosX/imagePosY)의 의미가 바뀌지 않도록
     v352 미리보기 비율(1 / 1.632 × 0.7179 ≈ 0.8535)을 그대로 유지한다. */
  --v353-ref-ratio:0.8535;
  /* 실제 카드 이미지 영역의 가로/세로 비율 — v353 스크립트가 실측해 갱신 */
  --v353-real-ratio:1.1401;
  /* 기준 프레임 중 실제 카드에 보이는 세로 비율 (미리보기 가이드선용) */
  --v353-card-visible-frac:0.749;
}

/* ---------------------------------------------------------------
   1) 카드관리 미리보기 = 기준 프레임 그 자체
   --------------------------------------------------------------- */
.manager-card-preview-shell{
  aspect-ratio:auto!important;
  height:auto!important;
  min-height:0!important;
  grid-template-rows:auto minmax(0,auto) auto!important;
  box-sizing:border-box!important;
}
.manager-card-preview-title{
  height:auto!important;
  min-height:34px!important;
  padding:5px 10px!important;
}
.manager-card-preview-stats{
  min-height:34px!important;
  padding:5px 0!important;
}
.manager-card-preview-art{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:var(--v353-ref-ratio)!important;
  position:relative!important;
  overflow:hidden!important;
}
.manager-card-preview-art>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:var(--img-x,50%) var(--img-y,50%)!important;
  transform-origin:var(--img-x,50%) var(--img-y,50%)!important;
  transform:scale(var(--img-scale-x,var(--img-scale,1)),var(--img-scale-y,var(--img-scale,1)))!important;
}

/* 미리보기 위에 "실제 카드에 보이는 영역" 가이드 표시 */
.manager-card-preview-art::after{
  content:"실제 카드 표시 영역";
  position:absolute;
  left:0;right:0;top:0;
  height:calc(100% * var(--v353-card-visible-frac,.749));
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:0 6px 3px;
  box-sizing:border-box;
  border-bottom:2px dashed rgba(255,209,126,.92);
  box-shadow:inset 0 0 0 1px rgba(255,209,126,.28);
  color:#ffe3ab;
  font-size:9px;
  font-weight:900;
  letter-spacing:-.02em;
  text-shadow:0 1px 3px #000,0 0 6px #000;
  pointer-events:none;
  z-index:6;
}
/* 카드 이미지 영역이 기준 프레임보다 높으면 잘리는 부분이 없으므로 가이드 숨김 */
.manager-card-preview-art.v353-full-visible::after{display:none}

/* ---------------------------------------------------------------
   2) 실제 카드 이미지 영역: 기준 프레임을 상단 정렬로 삽입
   --------------------------------------------------------------- */
#hand.hand .card .cimg,
.mobile-hand-mount #hand.hand .card .cimg,
.battlefield-layout .unit .uimg,
.base-unit-art,
.collection-card-art,
.deck-builder-thumb,
.manager-thumb,
.advisor-portrait,
.roster-art,
.v240-art-shell{
  position:relative!important;
  overflow:hidden!important;
}

/* 확대 화면은 잘림 없이 기준 프레임 전체를 보여준다 */
.card-zoom-art{
  position:relative!important;
  overflow:hidden!important;
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
  aspect-ratio:var(--v353-ref-ratio)!important;
}

body #hand.hand .card .cimg>img.card-art-img,
body #hand.hand .card .cimg>img.unit-art-img,
body .mobile-hand-mount #hand.hand .card .cimg>img.card-art-img,
body .battlefield-layout .unit .uimg>img.card-art-img,
body .battlefield-layout .unit .uimg>img.unit-art-img,
body .base-unit-art>img.card-art-img,
body .base-unit-art>img.unit-art-img,
body .collection-card-art>img.card-art-img,
body .collection-card-art>img.unit-art-img,
body .deck-builder-thumb>img.card-art-img,
body .manager-thumb>img.card-art-img,
body .advisor-portrait>img.card-art-img,
body .roster-art>img.card-art-img,
body .card-zoom-art>img.card-art-img,
body .v240-art-shell>img.card-art-img,
body .v240-art-shell>img.unit-art-img{
  position:absolute!important;
  inset:auto!important;
  left:0!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  display:block!important;
  width:100%!important;
  min-width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  aspect-ratio:var(--v353-ref-ratio)!important;
  object-fit:cover!important;
  object-position:var(--img-x,50%) var(--img-y,50%)!important;
  transform-origin:var(--img-x,50%) var(--img-y,50%)!important;
  transform:scale(var(--img-scale-x,var(--img-scale,1)),var(--img-scale-y,var(--img-scale,1)))!important;
}

/* 이미지가 없는 카드(.default-art 등)는 기존처럼 영역을 그대로 채운다 */
#hand.hand .card .cimg>.default-art,
.battlefield-layout .unit .uimg>.default-art,
.collection-card-art>.default-art,
.base-unit-art>.default-art{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
}