@charset "utf-8";
/**
 * dure_thumb2.css — 카드 썸네일 "2번 사진" 교체본 규격 보증 (2026-09-02 신설, v1.0.0)
 *
 * 짝 = js/comm/dure_thumb2.js. 그 스크립트가 src 를 2번 사진으로 바꾼 <img> 에만 `.th2` 를 붙인다.
 * 목적 = 2번 사진이 **여백형(흰 배경 스튜디오컷)·풀블리드(꽉 찬 연출컷) 혼재**라서,
 *        어떤 컷이 와도 카드 상자 규격과 크롭 규칙이 흔들리지 않게 한 곳에 고정한다.
 *
 * ────────────────────────────────────────────────────────────────────────
 * ★ 실측 먼저 (09-02 신데브 모바일 메인 390×844, 카드이미지 116종/141개)
 *   · 카드 상자는 **이미 전 지면에서 고정**돼 있다: `object-fit:cover` + 명시 px 크기
 *     (166×166 · 274.5 · 167.5 · 255 · 599). 교체본·원본 **구분 없이 동일**.
 *   · 상자 밖 삐져나옴(spill) = **0px**. img 박스 == 부모 박스 정확히 일치.
 *   · 라운드는 부모가 아니라 **img 자신**에 걸려 있다(주력 `.ilink` = `border-radius:16px`,
 *     부모 radius 0 · overflow visible) → 풀블리드 컷이 와도 모서리가 각지게 삐져나오지 않는다.
 *   ⇒ 즉 **"카드 사이즈가 달라 보인다"는 상자 문제가 아니다.** 상자는 원래 같다(166×166 동일).
 *      다른 것은 **사진 안 피사체의 배율**이다 — 1번컷은 피사체 주변에 여백이 있고,
 *      47621A 같은 2번컷은 그릇이 프레임을 가득 채우고 좌우가 잘려 "넘쳐" 보인다.
 *      이건 CSS로 정규화할 수 없다(픽셀 분석이 필요한데 이미지서버가 CORS 헤더를 안 준다).
 *
 * ★ 그래서 이 파일은 "고치는" 파일이 아니라 **불변식을 못질하는 안전망**이다.
 *   측정한 지면에서는 이미 만족돼 있어 시각 변화 0(무해). 측정하지 않은 카드 지면이나
 *   앞으로 추가될 지면에서 상자 규격이 빠져 있을 때 교체본이 튀는 것을 막는다.
 *   위험한 규칙(width/height 강제·border-radius:inherit)은 **일부러 넣지 않았다** —
 *   지면마다 상자 크기가 다르고(166~599px) 라운드가 img 쪽에 있어서,
 *   강제하면 멀쩡한 카드를 되레 깨뜨린다(radius:inherit 는 16px 라운드를 0 으로 덮어버린다).
 * ────────────────────────────────────────────────────────────────────────
 *
 * 끄기 = commScripts.jsp 의 이 링크 1줄 제거(스크립트와 독립 — CSS 만 빼도 무해).
 */

/* 교체본 공통 규격 — 어떤 2번 사진이 와도 같은 크롭 규칙을 따른다 */
img.th2 {
	/* 상자를 꽉 채우되 비율 유지 + 중앙 크롭. 카드 지면 대부분이 이미 cover 지만,
	   빠져 있는 지면에서 풀블리드 컷이 늘어나 보이는 것을 막는다. */
	object-fit: cover;
	object-position: 50% 50%;

	/* 인라인 이미지 baseline 아래 생기는 3~4px 틈 제거 —
	   교체본만 상자보다 커 보이는 착시의 흔한 원인. */
	vertical-align: middle;

	/* 투명 PNG 2번컷이 오면 카드 바탕이 비쳐 원본 흰 배경 컷과 톤이 달라진다.
	   흰 바탕을 깔아 스튜디오컷과 같은 지면으로 통일. */
	background-color: #fff;

	/* 상자보다 커지지 않게(부모가 명시 폭을 줄 때만 실제로 작동, 아니면 무제약) */
	max-width: 100%;
}

/* ────────────────────────────────────────────────────────────────────────
   [보류] 풀블리드 컷 letterbox 정규화 — 지금은 쓰지 않는다.
   피사체가 프레임을 꽉 채우는 2번컷(47621A 등)을 안쪽으로 밀어 넣어
   여백형 컷과 배율을 맞추려는 시도인데, 다음 이유로 채택하지 않았다.
     1) 2번 사진과 카드 상자가 **둘 다 정사각**(600×600 → 166×166)이라
        `object-fit:contain` 은 `cover` 와 렌더 결과가 **완전히 동일**하다(레터박스가 안 생긴다).
     2) 실제로 줄이려면 아래처럼 물리적 inset 을 줘야 하는데, 그러면
        **멀쩡한 교체본까지 전부 작아져** 원본 카드와 또 다른 불일치가 생긴다.
     3) "이 컷이 풀블리드인가"를 클라이언트가 알 수 없다(CORS 없음 → canvas 픽셀 판독 불가).
   → 풀블리드 컷을 정말 걸러내려면 **오프라인 산출 스킵 목록**(테두리 밝기·엣지 복잡도 지표)
      뿐이다. 주간 상품 동기화에 물려야 해서 별도 판단 사항.
   img.th2 { padding: 8%; box-sizing: border-box; object-fit: contain; }
   ──────────────────────────────────────────────────────────────────────── */