/* usung-r66.css — 기술력 「국내 최초」 사진 자리를 고정 박스로 (r66)
 *   승연: 「관리자페이지에서 기술력 페이지의 국내최초 4가지 사진도 모두 바꿀 수 있도록 해줘.
 *          플레이스 홀더는 사이즈 동일하게 세팅해줘」
 *
 * ── ★ 이건 미관이 아니라 레이아웃 안전장치다 ──────────────────────────────
 *   착수 시점 실측 — 원본 4장의 종횡비가 **서로 다르다**:
 *     tf_black 230x379(0.607) · tf_silver 262x396(0.662) · tf_copper 298x386(0.772) · tf_cobra 276x413(0.668)
 *   그런데 최종 CSS 는 `height:184px`(r16:58) · `width:auto`(r8:572) · **`max-width:none`**(r15:97) —
 *   **폭에 상한이 없다.** 승연이 16:9 사진을 올리면 폭 **327px** 로 그려져 **카드 글자를 덮는다.**
 *   그래서 폭을 못박는다. 「사이즈 동일하게」는 요구사항이자 방어선이다.
 *
 * ── ★ 값의 근거 : 「오늘 제일 넓은 것」을 넘지 않는다 ──────────────────────
 *   박스를 오늘 제일 넓은 사진(tf_copper)의 폭에 맞춘다. 그러면 **어느 박스도 오늘보다 넓지 않다** —
 *   지금 라이브에서 안 겹치는 게 증명돼 있으므로 회귀가 원리적으로 불가능하다.
 *     >980px  : h184 → copper 184x298/386 = 142.05 → **143px**
 *     ≤980px  : h158 → copper 158x298/386 = 121.98 → **122px**
 *     ≤520px  : r33:107 이 이미 `max-width:76px` 로 copper 를 깎고 있다 → 그 값 **76px** 그대로
 *   나머지 3장은 박스가 넓어진 만큼 **왼쪽으로 투명 여백**이 생긴다 —
 *   `object-position:bottom right` 라 그림 자체는 **오늘과 픽셀 동일**하게 오른쪽 아래에 붙는다.
 *
 * ── ★★ r71 : ≥1200px 에서만 박스를 키운다 (승연 「오른쪽 한쪽에 풍성하게 차보이도록」) ──
 *   위 「오늘을 안 넘는다」 원칙은 **1199px 이하에서 그대로 산다.** 넓은 창에서만 벗어난다.
 *
 *   왜 폭만 넓히면 안 되나 — 실측: 업로드된 사진은 **1080x1350(4:5)**.
 *     143x184 박스에서 `contain` 배율 = min(143/1080, 184/1350) = min(.1324,.1363) → **폭이 잡는다.**
 *     그래서 폭만 넓혀도 높이 184 에 걸려 **147px 에서 멈춘다**(+3%). 높이가 같이 커야 한다.
 *   → 박스 **184x230**(= 4:5 정확히). 배율 .1704 로 사진이 박스를 꽉 채운다.
 *     ★ PNG 안의 실제 후드는 캔버스 알파 스캔으로 **가로 78.9%**(x 102→954) → 보이는 후드 113 → **145px**.
 *   대가: 사진 하한이 184+18 → 230+18 = **248px** 이라 카드가 210 → **265px**(usung-r32.css). 승연 승인.
 *   ※ 이 문단의 수치(184x230 · 카드 265)는 **r71 시점이다. r72 가 200x250 · 카드 250 으로 덮었다** — 아래 참조.
 *
 *   ★ 왜 1200px 인가 — **카드 폭이 거기서 상한(564px)에 닿는다.** 실측 여유(글자 우단 ↔ 사진 좌단):
 *     1440/1200 : 129 · 178 · 220 · 166  (최소 129 → 41px 넓히고도 **88px** 남는다)
 *     1000      : 102 ·  78 · 120 ·  66  (최소  66 → 41px 넓히면 **25px** — 너무 좁다)
 *   그래서 981~1199px 은 **손대지 않는다.** 여기서 같이 키우면 카드4 글자를 사진이 밀고 들어온다.
 *   ★ `.tf-txt` 는 `max-width:none` 이라 글자가 스스로 물러나 주지 않는다 — 여유는 자연 줄길이뿐이다.
 *
 * ── ★★ r72 : 카드는 줄이고 사진은 키운다 (승연 「카드 높이는 줄이고 사진은 더 키워줘
 *              사진의 오른쪽면이 오른쪽 끝에 닿는게 더 좋을거 같아」) ──────────────
 *   ★ 두 요구는 **얼핏 모순이다** — r71 까지는 `bottom:18px`(r16:58) 때문에
 *     **카드 ≥ 사진높이 + 18** 이었다. 사진을 키우면 카드가 반드시 같이 커진다.
 *   → **`bottom` 을 0 으로 내려 그 18px 을 없앤다.** 그러면 **카드 ≒ 사진높이**가 되어
 *     사진 230→250(+20) 인데 카드는 265→**252**(−13) 로 **동시에** 성립한다.
 *     `bottom` 은 r16:58 에서 `!important` 가 **아니다** → 문서 순서로 덮인다.
 *   ★ 250 이 아니라 252 인 이유(프리뷰 실측으로 잡았다): `bottom:0` 의 기준은 카드의
 *     **padding-box** 라 r32 의 `border:1px` 만큼 어긋난다. 250 으로 두면 사진 맨 윗줄
 *     **1px 이 `overflow:hidden` 에 잘린다.** 자세한 계산은 `usung-r32.css` 주석에 있다.
 *   폭은 높이에 맞춰 200px(4:5 유지 · 200x250). `right` 는 28 → **8**.
 *
 *   ★★ 왜 `right:0` 이 아니라 8px 인가 — `.tf-card` 는 `border-radius:28px`+`overflow:hidden` 이다.
 *     0 으로 붙이면 사진의 오른쪽-아래 모서리가 **둥근 모서리 안쪽**으로 들어간다.
 *     실측 알파 스캔으로는 네 장 모두 잘림 0.000% 였지만(모서리가 원래 투명하다),
 *     그건 **오늘 올라와 있는 네 장**의 성질이고 승연이 내일 올릴 사진의 성질이 아니다.
 *     8px 은 그 여유다 — 반지름 28 의 곡선이 실제로 파고드는 깊이보다 크다.
 *
 *   ★★★ **못 하는 것을 적어 둔다 — 사진 2·4 는 CSS 로 오른쪽 끝에 못 닿는다.**
 *     PNG 캔버스 알파 스캔(불투명 가로 비율):
 *       사진1 79.3% · **사진2 34.4%** · 사진3 100% · **사진4 36.8%**
 *     2·4 는 **투명 여백이 파일 안에 구워져 있다**(사실상 캔버스 한가운데에 작게 들어 있다).
 *     `object-fit:contain` 은 그 여백까지 「그림」으로 세므로, `right:0` 으로 붙여도
 *     보이는 후드는 카드 우단에서 **65.6px · 63.3px** 떨어진다. 박스를 아무리 키워도 같다.
 *     → 진짜 해법은 CSS 가 아니라 **네 장을 불투명 경계로 다시 잘라 올리는 것**이다.
 *       (또는 `api/tech-image.js` 업로드 때 자동 크롭 — 그건 범위 밖이라 안 건드렸다)
 *
 * ── ★ 명시도 (1,2,1) · 순서로 이긴다 ────────────────────────────────────
 *   `.tf-hood` 를 건드리는 CSS 가 **6개**다(r8·r10-redesign·r13-tech·r15-tech·r16-tech·r33).
 *   기존 파일을 고치지 않는다 — 넷이 서로를 덮고 있어 한 줄만 바꿔도 어느 폭에서 터질지 모른다.
 *   대신 **같은 명시도로 맨 뒤에** 붙인다(`api/inject.js` cssLink 마지막).
 *   ★ `@media` 는 명시도를 안 올린다 — 같은 (1,2,1) 끼리는 **문서 순서**가 이긴다.
 *     (r15:97 의 비-미디어 `max-width:none` 이 r13:169 의 미디어 `max-width:124px` 를 이기는 이유가 이것)
 *   ★ **`!important` 는 `right` 한 줄에만 쓴다** (r72 에서 규칙을 고쳤다).
 *     r66 은 원래 「`!important` 를 안 쓴다 — r16 의 `right:…!important` 와 싸울 일이 없다」였는데,
 *     **r72 가 `right` 를 옮기면서 그 전제가 깨졌다.** `right` 를 잡는 다섯 줄
 *     (r16:58·63·70 · r13:169·193 · r15:107·117)이 **전부 `!important`** 라 맞불 외에 방법이 없다.
 *     ★ 나머지(`width`·`height`·`bottom`·`max-width`·`object-*`)는 **여전히 안 붙인다** —
 *       상대가 `!important` 가 아니고, 붙이면 다음 리비전이 크기를 못 고친다.
 *
 * ── ★ object-fit 을 다시 적는 이유 ──────────────────────────────────────
 *   `object-fit:contain`·`object-position:bottom right` 의 유일한 출처가 `usung-r8.css:572` 인데
 *   그 파일은 `usung-r8-mount.js` 가 **비동기**로 붙인다(r57 과 같은 사정).
 *   도착 전 창에는 `object-fit` 기본값 `fill` 이라 **폭을 박은 순간 그림이 옆으로 늘어난다.**
 *   그래서 여기서 같이 적는다. 값은 r8 과 **동일**하다(덮어쓰는 게 아니라 앞당기는 것).
 *
 * ── ★ 하나 있는 부작용 : hover 확대의 중심이 0.94px 움직인다 ──────────────
 *   `usung-r8.css:573` 이 `.tf-card:hover .tf-hood{transform:scale(1.06)}` 를 건다.
 *   `transform-origin` 기본값이 **border-box 중심**이라 박스가 넓어지면 중심도 오른쪽에서
 *   멀어진다. 제일 좁은 tf_black(>980px, 박스 111.66 → 143)에서 확대분 이동량이
 *   (143-111.66)/2 x 0.06 = **0.94px**. 나머지 셋은 그보다 작다(copper 는 0).
 *   ★ hover 에서만 · 1px 미만 · 그림 자체 크기는 불변 — 그래서 `transform-origin` 을
 *     덮지 않았다. 덮으면 r8 의 장식 규칙과 싸우게 되고 얻는 게 1px 이다.
 *
 * ── 되돌리기 ─────────────────────────────────────────────────────────
 *   이 파일 + `api/inject.js` cssLink 한 줄이 짝이다. **커밋 단위로만** 되돌린다.
 *   파일만 지우면 링크가 404 를 부르고(화면은 멀쩡), 링크만 빼면 폭 상한이 사라진다.
 */

html .r8x:not(#_r8_) .tf-hood{
  width:143px;
  max-width:none;
  object-fit:contain;
  object-position:bottom right;
}

/* r71→r72) 카드 폭이 상한(564px)에 닿는 구간에서만 박스를 키운다.
 * height 는 r16-tech.css:58(184px)을, bottom 은 같은 줄의 18px 을 덮는다
 * — r66 이 cssLink 맨 뒤라 **문서 순서**로 이긴다(둘 다 상대가 `!important` 가 아니다).
 * right 만 `!important` 다 — r16:58 이 `right:28px !important` 라 맞불 외에 방법이 없다.
 * 981~1199px 은 일부러 뺐다(위 주석의 여유 실측 참조). */
@media (min-width:1200px){
  html .r8x:not(#_r8_) .tf-hood{
    width:200px;
    height:250px;
    bottom:0;
    right:8px !important;
    max-width:none;
  }
}

@media (max-width:980px){
  html .r8x:not(#_r8_) .tf-hood{ width:122px; max-width:none }
}

@media (max-width:520px){
  /* r33:107 이 여기서 height:104px·max-width:76px 를 잡는다. 폭만 그 값으로 못박는다. */
  html .r8x:not(#_r8_) .tf-hood{ width:76px; max-width:76px }
}