/* 아디다스 결 — 흰 바탕 · 검정 글자 · 각진 모서리 · 검정 1px 선 · 강조색 없음
   🚨 사장님 지시 네 가지(2026-09-24)
     ① 「사진 제공」 글자 삭제        ② 다리가 잘리니 사진을 더 길게
     ③ 머리의 아이콘과 글자는 검정 · «가운데»로
     ④ 선수 글자가 안 보이니 «흰 테두리»를 둘러 보이게
   ── ②④ 를 같이 푸는 방법 ─────────────────────────────────────────
     사진 칸을 키우고 글자를 «사진 위에» 얹는다. 그러면 사진이 제일 길어진다.
     사진 위 글자는 배경이 제각각이라 그냥은 안 읽힌다 → 흰 테두리를 두른다.
     paint-order:stroke fill 이라야 테두리가 «글자 뒤»로 깔린다. 안 주면 획이 굵어져 뭉갠다. */
.ri-a-iv{position:fixed;left:18px;top:50%;z-index:9150;width:130px;
  background:#fff;border:1px solid #3d3d3d;border-radius:0;
  /* 🚨 순검정(#000) → 연한 검정(사장님 「더 얕게, 연한 검정으로」).
     🚨 한때 화면 끝에 딱 붙였다가(left:0) 「배너 같지가 않다」고 하셔서 여백을 되살렸다.
        네 면 모두 선을 두른다 — 그래야 «배너»로 보인다. */
  opacity:0;transform:translateY(calc(-50% + 12px));
  transition:opacity .45s ease,transform .45s ease}
.ri-a-iv.is-in{opacity:1;transform:translateY(-50%)}

/* 머리 — 삼선 + 「선수 인터뷰」. 가운데. 닫기는 오른쪽 끝에 따로 띄운다 */
.ri-a-iv__hd{position:relative;display:flex;align-items:center;justify-content:center;
  padding:8px 22px}   /* 🚨 아래 선 없음 — 사장님 「선 없애, 넘 두껍다」 */
.ri-a-iv__tag{display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:800;letter-spacing:.01em;color:#000}   /* 9.5 → 11 · v1.3 눈금(칩·라벨 최소) */
.ri-a-iv__run{width:13px;height:13px;flex:0 0 13px;display:block}
.ri-a-iv__x{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border:0;border-radius:0;background:none;color:#000;
  cursor:pointer;font-size:12px;line-height:1;padding:0;opacity:.4}
.ri-a-iv__x:hover{opacity:1}

/* 사진 칸 — 길게. 셋 다 높이가 같아 카드 크기가 안 바뀐다 */
.ri-a-iv__win{position:relative;height:clamp(180px,37vh,313px);overflow:hidden;
  /* 🚨 사장님 : 「배경에 흐린 패턴을 적용해. 넘 흰색이라 포인트가 없고 밋밋하다」
     아디다스 결이라 «사선 줄무늬»로 간다. 아주 옅게 깔아 누끼 선수가 떠 보이게만 한다.
     글자 띠는 흰색 그대로 둔다 — 글 뒤에 무늬가 깔리면 읽기가 나빠진다. */
  background:#ffffff;
  background-image:repeating-linear-gradient(135deg,rgba(17,17,17,.045) 0 2px,transparent 2px 9px)}
.ri-a-iv__s{position:absolute;inset:0;opacity:0;transform:translateX(12px);
  transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.16,1,.3,1);
  pointer-events:none;text-decoration:none;color:inherit;visibility:hidden;
  display:flex;flex-direction:column}
.ri-a-iv__s.is-on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
/* 🚨 나가는 사람이 «완전히» 사라진 뒤에 다음 사람이 들어온다 — 누끼 둘이 겹치면 이중노출이 된다 */
.ri-a-iv__s.is-out{opacity:0;transform:translateX(-12px);visibility:visible;
  transition:opacity .24s ease,transform .24s ease}
/* 사진 — 칸의 남는 높이를 전부 쓴다. object-fit:contain 이라 «발끝까지» 들어온다
   (사장님 「다리가 짤린다」 지적으로 고친 것이다. 높이를 줄이면 다시 잘린다) */
.ri-a-iv__ph{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;object-position:50% bottom}

/* 글 — «흰 띠»로 내린다.
   🚨 처음엔 사진 위에 얹고 흰 테두리(-webkit-text-stroke)를 둘렀는데,
      사장님이 「테두리 선은 주지 말라」고 하셨다. 테두리를 빼면 사진 위에서 안 읽힌다.
      ⇒ 글을 흰 띠로 내리면 «테두리 없이» 검정 글자 그대로 또렷하다. 아디다스 결에도 맞는다.
      ⇒ 사진 칸은 그대로 두고 띠를 «덧대므로» 사진이 짧아지지 않는다. */
.ri-a-iv__tx{flex:0 0 auto;background:#fff;padding:6px 8px 10px;text-align:center}
.ri-a-iv__who,.ri-a-iv__lab{color:#000}
.ri-a-iv__who{display:block;font-size:15px;font-weight:800;line-height:1.14;
  letter-spacing:-.045em;word-break:keep-all}
.ri-a-iv__lab{display:inline-flex;align-items:center;gap:1px;margin-top:1px;
  font-size:15px;font-weight:800;line-height:1.14;letter-spacing:-.045em}
.ri-a-iv__lab svg{width:13px;height:13px;stroke-width:2.8;margin-left:1px}
.ri-a-iv__s:hover .ri-a-iv__lab svg{transform:translateX(2px);transition:transform .16s ease}


/* 접힌 모습 */
.ri-a-iv.is-min{width:auto}
.ri-a-iv.is-min .ri-a-iv__win,.ri-a-iv.is-min .ri-a-iv__x{display:none}
.ri-a-iv.is-min .ri-a-iv__hd{padding:8px 12px;cursor:pointer;border-bottom:0}
.ri-a-iv.is-min .ri-a-iv__tag{font-size:11px}

/* 🚨 1440px 에서 본문 왼쪽 여백은 96px 뿐이고 «글이 시작하는 자리»는 120px 이다.
   130px 짜리 배너를 18px 에 두면 오른쪽 끝이 148 이라 랭킹 번호(3위·4위…)를 덮는다
   (2026-09-24 캡처로 확인). 1560px 아래에서는 «글 앞»에서 멈추도록 폭을 줄인다.
   🚨 그리고 치환할 때는 «바뀐 것을 반드시 확인»할 것 —
      앞서 이 자리를 고치려다 옛 문구로 찾아 «조용히 아무것도 안 바뀐» 적이 있다. */
@media (max-width:1560px){
  .ri-a-iv{left:8px;width:104px}
  .ri-a-iv__win{height:clamp(150px,31vh,250px)}
  .ri-a-iv__who,.ri-a-iv__lab{font-size:12px}
  .ri-a-iv__lab svg{width:11px;height:11px}
}
@media (max-width:1100px){ .ri-a-iv{width:118px} .ri-a-iv__win{height:clamp(162px,34vh,280px)}
  .ri-a-iv__who,.ri-a-iv__lab{font-size:14px} }
/* == 폰 - «세로 막대» 하나로 ======================================
   🚨 사장님(2026-09-24 저녁) :
      「모바일에 배너 넘 커, 수평으로 배너가 길게 나와 있고,
       현재 모바일에서 수평으로 된 거 세로로 길게. 그래야 컨텐츠랑 안 겹치지」
   🚨 같은 날 클로드B 실측(절대규칙 R13 위반) :
      가로 탭(91x35)이 폰에서 «대회일정 목록» 글자를 덮었다 - 접힌 채 1곳, 펼치면 9곳.
      /gear/ 에서는 빵 부스러기와 제휴 슬라이드 왼쪽 절반까지 덮었다.
   -- 왜 세로 막대인가 ---------------------------------------------
      화면 폭 390 기준 가로 탭은 «23%» 를 먹는다. 세로 막대(30px)는 «8%» 다.
      목록 글자는 왼쪽 여백 16px 안쪽에서 시작하므로 30px 막대는 여백에 거의 얹힌다.
   🚨 폰에서는 «펼치지 않는다». 펼치면 101x268 이라 또 덮는다.
      누르면 지금 보이는 선수의 인터뷰로 바로 간다 - 덮을 일이 없다. */
@media (max-width:820px){
  .ri-a-iv,.ri-a-iv.is-min{left:0;top:50%;width:30px;max-width:30px;
    background:#000;border:0;padding:0;
    transform:translateY(-50%) translateX(-8px)}
  .ri-a-iv.is-in,.ri-a-iv.is-min.is-in{transform:translateY(-50%)}
  .ri-a-iv .ri-a-iv__win,.ri-a-iv .ri-a-iv__x{display:none!important}
  .ri-a-iv .ri-a-iv__hd,.ri-a-iv.is-min .ri-a-iv__hd{padding:15px 0;
    justify-content:center;cursor:pointer;border-bottom:0}
  /* 세로쓰기 - text-orientation:mixed 라야 한글이 «똑바로 선 채» 아래로 읽힌다.
     upright 로 주면 자간이 벌어져 막대가 길어진다. */
  .ri-a-iv .ri-a-iv__tag,.ri-a-iv.is-min .ri-a-iv__tag{
    writing-mode:vertical-rl;text-orientation:mixed;
    font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1;
    color:#fff;gap:7px}
  .ri-a-iv .ri-a-iv__run{width:14px;height:14px;flex:0 0 14px;color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .ri-a-iv,.ri-a-iv__s{transition:none}
  .ri-a-iv{opacity:1;transform:translateY(-50%)}
}
@media print{.ri-a-iv{display:none}}