/* 라이브 중계 피드 — AC · AC EVO 공용 정본 (evo 쪽은 포팅 스크립트가 복사한다).
 *
 * 성격: 카드가 아니라 **계기판**이다. 모터스포츠 타이밍 스크린 / 트레이딩 터미널의
 * 관례를 따른다 — 고정폭 열 정렬, 모노스페이스 수치, 3글자 이벤트 코드, 고밀도 행,
 * 그리고 색은 장식이 아니라 **데이터 인코딩**으로만:
 *   금 = 트랙 레코드 · 보라 = 세션 최속 · 청록 = 차종 기록 · 초록 = 개인 최고 ·
 *   빨강 = 접촉/무효랩 · 어두운 노랑 = 경미(트랙사이드 접촉·성능지수).
 *
 * 줄 사이 구분선을 **쓰지 않는다**. 예전엔 줄마다 hairline 을 그어 목록이 칸칸이
 * 나뉜 표처럼 보였다(사용자 지적 2026-08-18). 구조는 선이 아니라 **열 정렬**이
 * 만든다 — 터미널이 그렇게 한다. 줄 묶음은 행 간 여백(위아래 4~5px)이 행 안 두 줄
 * 사이 여백(2px)보다 크다는 것만으로 충분히 읽힌다.
 *
 * 바깥 카드(.feed-card)는 페이지의 다른 카드와 같은 형태로 두고, 안쪽 상자
 * (.feed-box)만 검은 '스크린'이 된다 — 계기가 하우징에 박힌 구조. */
.feed-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;
  /* 수치·코드 전용 글꼴. 이름·차명은 본문 sans 그대로 둔다 — 차 이름이 길어서
     전부 모노로 돌리면 열 폭이 터진다 (Bloomberg 도 라벨은 sans, 값은 mono). */
  --fmono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","JetBrains Mono",
          Menlo,Consolas,"Liberation Mono",monospace;
  /* 열 격자 — 헤더와 모든 행이 이 한 값을 공유한다 (따로 두면 반드시 어긋난다) */
  --fgrid:54px 32px minmax(0,1fr) 78px 52px 84px;
  --fhead-h:23px;
}
.feed-card .card-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.feed-scope{margin-left:auto;display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:3px}
.fsc{appearance:none;border:0;background:transparent;color:var(--text3);cursor:pointer;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;padding:5px 11px;border-radius:999px;
  transition:color .15s ease,background .15s ease}
.fsc:hover{color:var(--text2)}
.fsc.on{color:var(--text);background:var(--elevated)}

/* 상단 상태 스트립 — 터미널의 status line. 라벨은 작은 대문자, 값은 모노. */
.feed-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;min-height:0;
  padding:9px 2px 0;color:var(--text2);font-size:12px}
.feed-stats:empty{display:none}
.fst{display:inline-flex;align-items:baseline;gap:6px}
.fst + .fst::before{content:"";align-self:center;width:1px;height:9px;
  background:var(--line2);margin-right:4px}
.fst i,.feed-stats .fst-lab{font-style:normal;color:var(--text3);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.fst b{color:var(--text);font-weight:650;font-family:var(--fmono);font-size:12px;
  font-variant-numeric:tabular-nums}
.fst em{font-style:normal;color:var(--text3);font-size:11px}
.fst-win i{color:var(--text2)}

.feed-box{position:relative;margin-top:10px;border-radius:9px;background:#070709;
  border:1px solid var(--line);height:clamp(190px,24vh,320px);overflow:hidden;
  display:flex;flex-direction:column;container-type:inline-size}
/* 열을 상자 **자기 폭**에 맞춰 조인다. 화면 폭(@media)이 아니라 상자 폭이 기준인
   이유: 좌우 분할선을 최소(0.28)까지 끌면 1280px 화면에서도 이 상자가 300px 밑으로
   내려간다. 그때 고정 열들이 자리를 다 먹어 **유연 열(드라이버·차명)이 0으로 붕괴**해
   "누가 뛰었는지"가 통째로 사라졌다(실측). 잃어도 되는 순서대로 내준다:
   서버 이름 -> 열 폭 -> 순위. 이름과 랩타임은 마지막까지 지킨다. */
@container (max-width:400px){
  .fhead,.frow{--fgrid:44px 26px minmax(0,1fr) 64px 44px}
  .fhead{gap:7px} .frow{gap:7px;padding-left:7px}
  .ftime{font-size:12.5px}
  /* 서버 이름은 이 폭에 자리가 없다. 값과 제목을 **같이** 뺀다 — 제목만 남기면
     없어진 6번째 열을 찾아 헤더 둘째 줄로 내려가 경계 밖에 그려진다(실측). */
  .fsrv,.fhead span:nth-child(6){display:none}
}
@container (max-width:280px){
  /* 최후 수단 — **누가·몇 초**만 남긴다. 여기까지 오면 이벤트 코드 자리도 없어서
     왼쪽 색 레일에 맡긴다. 순위를 먼저 내주는 이유: 이름이 사라지면 줄 자체가
     아무 뜻도 없어지기 때문이다(폭이 모자라면 유연 열이 0으로 붕괴한다 — 실측 9px). */
  .fhead,.frow{--fgrid:42px minmax(0,1fr) 62px}
  .fcode,.frank,.fhead span:nth-child(2),.fhead span:nth-child(5){display:none}
}
/* 열 이름 — 이 화면이 표라는 걸 밝히고, 각 숫자가 무슨 뜻인지 알려 준다.
   목록 **밖**에 둔다: 안에 넣으면 .feed-list 의 위쪽 페이드 마스크에 먹힌다. */
.fhead{display:grid;grid-template-columns:var(--fgrid);gap:9px;align-items:center;flex:none;
  height:var(--fhead-h);border-bottom:1px solid var(--line);
  /* 오른쪽 여백에 스크롤바 폭(--fsb)을 더한다 — 헤더는 스크롤 영역 **밖**이라
     그만큼 넓고, 안 빼면 유연 열이 어긋나 제목과 값이 안 맞는다(실측 15px).
     값은 feed.js 가 매번 실측해 넣는다: 폭은 OS·브라우저마다 다르고(맥은 0)
     줄 수에 따라 나타났다 사라진다 — 상수로 박으면 어느 한쪽이 반드시 틀린다. */
  padding:0 calc(12px + var(--fsb,0px)) 0 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  font-family:var(--fmono);font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text3);user-select:none}
.fhead span{white-space:nowrap;overflow:hidden}   /* 좁아져도 줄바꿈 금지 — 헤더 높이는 고정이다 */
.fhead span:nth-child(n+4){text-align:right}
.feed-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 12px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 12px),transparent 100%)}
.feed-empty{position:absolute;inset:var(--fhead-h) 0 0;display:flex;align-items:center;
  justify-content:center;color:var(--text3);font-size:11.5px;font-family:var(--fmono);
  letter-spacing:.02em;pointer-events:none}

/* 한 줄 = 한 이벤트. baseline 정렬이라 시각·코드·랩타임·순위가 **첫 줄에** 가지런히
   서고, 부수 정보(경과·델타·섹터)는 그 아래로 흘러내린다. */
.frow{display:grid;grid-template-columns:var(--fgrid);gap:9px;align-items:baseline;
  padding:3px 12px 4px 9px;border-left:3px solid transparent;animation:fin .32s ease both}
.fwhen{display:flex;flex-direction:column;gap:1px;line-height:1.15;min-width:0;
  font-family:var(--fmono);font-variant-numeric:tabular-nums}
.fwhen b{font-size:11px;font-weight:600;color:var(--text2);letter-spacing:-.02em}
.fwhen span{font-size:9px;color:var(--text3)}
@keyframes fin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.frow{animation:none}}
/* 이벤트 코드 — 이모지 대신. 고정폭 3글자가 세로로 정렬돼야 훑는 눈이 걸린다. */
.fcode{font-family:var(--fmono);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  color:var(--text3);white-space:nowrap}
.fcode.gold{color:var(--gold)} .fcode.purple{color:var(--purple)}
.fcode.cyan{color:var(--cyan)} .fcode.green{color:var(--green)}
.fcode.red{color:var(--red)}   .fcode.pi{color:var(--pi)}
/* 차량 성능지수(EVO). 이름 옆 보조 수치 — 이름보다 튀지 않게, 그래도 읽히게. */
.fpi{margin-left:5px;color:var(--pi);font-size:10px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fpi:empty{display:none}   /* 타워는 빈 span 을 남겨두고 값만 갈아끼운다 */
/* 차종·성능점수는 이름에 딸린 부연이라 괄호로 묶는다 — "이름 (차종 점수)"
   (사용자 지시 2026-08-19). 괄호는 CSS 로 넣는다: 마크업에 문자로 쓰면 .fcar 의
   margin-left 가 여는 괄호와 차종 사이를 벌려 "( Ferrari" 처럼 뜬다.
   PI 가 없는 AC 피드에서는 piLbl 이 아무것도 안 내므로 자연히 "(차종)" 이 된다. */
/* 사건 문구("hit the barrier")는 줄마다 **같은 x** 에서 시작해야 "무슨 짓을 했나"를
   세로로 훑을 수 있다 (사용자 지시 2026-08-19). 이름+차종 칸에 최소 폭을 줘서 타자기
   탭 스톱처럼 만든다 — 짧은 줄은 여백으로 채우고, 긴 줄은 자르지 않고 그대로 민다
   (자르면 애써 살려 놓은 차 이름이 다시 사라진다).
   기준은 화면 폭(@media)이 아니라 **상자 폭**: 좌우 분할선을 끌면 1280px 화면에서도
   이 상자가 좁아진다(파일 위쪽 열 붕괴 주석과 같은 이유). 좁으면 스톱을 아예 끈다 —
   좁은 칸에서 탭 스톱을 고집하면 사건 문구가 화면 밖으로 밀려난다. */
.fwho{display:inline-block}
@container (min-width:560px){ .fwho{min-width:170px} }
@container (min-width:700px){ .fwho{min-width:215px} }
/* EVO 는 차명 뒤에 성능점수가 더 붙어 이름+차 칸이 AC 보다 넓다(실측 최대 243px).
   자리가 있는 상자에서는 스톱을 그만큼 올려 **넘치는 줄이 없게** 한다 — 스톱을 넘는
   줄이 섞이면 그 줄만 문구가 튀어나와 세로로 훑는 이점이 깨진다. */
@container (min-width:860px){ .fwho{min-width:255px} }
/* 예외 — 차↔차 접촉 줄. "A (차) ↔ B" 는 한 문장이라 탭 스톱이 이름과 ↔ 사이를 수백 px
   벌리면 오히려 못 읽는다 (사용자 지시 2026-08-20: "붙여서 표시"). 벽·오브젝트 접촉의
   사건 문구 정렬은 그대로 둔다 — c2c 줄에만 스톱을 끈다. */
.frow.c2c .fwho{min-width:0}
.fcw{margin-left:7px;color:var(--text3);font-size:11.5px}
.fcw::before{content:"("}
.fcw::after{content:")"}
.fcw .fcar{margin-left:0}
.frow .fpi{font-family:var(--fmono)}
/* 새로 들어온 줄만 살짝 등장 — 목록 전체가 번쩍이던 통짜 재렌더의 대체물이다 */
@keyframes frow-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.frow.fnew{animation:frow-in .3s ease-out}
@media(prefers-reduced-motion:reduce){.frow.fnew{animation:none}}
/* 클릭 가능한 줄만 — guid 가 없는 줄은 눌러도 열 상세가 없다 */
.frow.clk{cursor:pointer}
.frow.clk:hover{background-color:rgba(255,255,255,.05)}
.frow.clk.sel{background-color:rgba(255,255,255,.07);box-shadow:inset 2px 0 0 var(--text)}
.fmain{min-width:0}
.fline{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.fnick{font-weight:640;font-size:12.5px;color:var(--text)}
.fcar,.fwith,.fwhat{color:var(--text3);font-size:11.5px;margin-left:7px}
/* 차종(.fcar)은 고유명사, .fwhat 은 그 줄에서 '무슨 일이 있었나'. 한 줄에 둘 다 오므로
   기울임으로 역할을 갈라 둔다 — 안 그러면 "Ferrari 296 GT3 hit the barrier"가 한 덩어리
   이름처럼 읽힌다. */
.fwhat{font-style:italic;opacity:.85}
.fwith{color:var(--red);font-weight:700;margin:0 6px}
.ftags{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:1px;min-height:0}
.ftags:empty{display:none}
/* 태그는 알약이 아니라 **글자**다. 채운 배지는 줄마다 색 덩어리를 만들어 계기판을
   장난감처럼 보이게 했다 — 색은 글자에만 얹는다. */
.ftag{font-family:var(--fmono);font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text2)}
.ftag.gold{color:var(--gold)} .ftag.purple{color:var(--purple)}
.ftag.green{color:var(--green)} .ftag.cyan{color:var(--cyan)} .ftag.red{color:var(--red)}
.fdelta{font-family:var(--fmono);font-size:10.5px;font-variant-numeric:tabular-nums;
  color:var(--text2)}
.fdelta.gold{color:var(--gold)} .fdelta.purple{color:var(--purple)}
.fdelta.green{color:var(--green)} .fdelta.cyan{color:var(--cyan)} .fdelta.red{color:var(--red)}
.fdelta i{font-style:normal;color:var(--text3);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-family:var(--fmono)}
.fvs{font-size:10.5px;color:var(--text3)}
/* 랩타임 — 이 화면의 주인공. 오른쪽 정렬 + 고정폭이라 자릿수가 세로로 맞는다. */
.ftime{font-family:var(--fmono);font-size:13.5px;font-weight:640;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
/* 순위 — "이 랩타임이 같은 트랙·같은 차종에서 몇 등인가". 랩타임만 봐서는 그게
   빠른 건지 알 수 없어서 붙였다(사용자 요청 2026-08-18). 분모는 한 단계 흐리게 —
   읽어야 할 값은 등수고 전체 인원은 그 척도일 뿐이다. */
.frank{font-family:var(--fmono);font-size:10.5px;font-weight:650;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--text2);white-space:nowrap;cursor:help}
.frank i{font-style:normal;font-weight:500;color:var(--text3)}
.frank.p1{color:var(--gold)}
.frank:empty{cursor:default}
.fsrv{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  text-align:right;color:var(--text3);opacity:.8;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* 한 서버만 볼 땐 서버 이름이 전부 같다 — 열 자체를 접는다 (숨기기만 하면 빈 칸이 남는다) */
.feed-box.one-srv{--fgrid:54px 32px minmax(0,1fr) 78px 52px}
/* 값 칸과 **제목까지** 같이 뺀다 — 제목만 남기면 없어진 6번째 열을 찾아 헤더 둘째 줄로
   내려가 경계 밖에 그려진다(실측: top=778, 헤더는 764~787). */
.feed-box.one-srv .fsrv,
.feed-box.one-srv .fhead span:nth-child(6){display:none}

/* left accent — the row's whole reason for existing, readable at a glance */
/* 랩을 찍은 줄은 전부 옅은 배경톤을 받는다 (사용자 지시 2026-08-20) — 밝기 사다리:
   일반 랩·PB = 중립 .03 < 차종 기록 CR = 청록 .10 < 세션 최속·트랙 레코드. CR 을
   .07→.10 으로 올린 것도 같은 지시다 — 랩 줄이 톤을 받으면서 상대 강조가 줄었다.
   hover 는 flat .05 배경색이라 이 그라디언트 **밑에** 깔려 여전히 구분된다. */
.frow.lap,.frow.pb{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent 62%)}
.frow.rec-track{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(255,214,10,.09),transparent 62%)}
.frow.pb{border-left-color:var(--green)}
.frow.contact{border-left-color:var(--red)}
.frow.join{border-left-color:var(--cyan)}
.frow.leave{border-left-color:var(--line2)}
.frow.purple{border-left-color:var(--purple);
  background:linear-gradient(90deg,rgba(191,90,242,.10),transparent 62%)}
.frow.rec-class{border-left-color:var(--cyan);background:linear-gradient(90deg,rgba(100,210,255,.10),transparent 62%)}
.frow.cut{border-left-color:var(--red);opacity:.8}

/* 랩 타임 자체를 물들인다 — 방송 타이밍 타워의 관례(퍼플/그린)를 그대로. */
.ftime.gold{color:var(--gold)}
.ftime.purple{color:var(--purple)}
.ftime.cyan{color:var(--cyan)}
.ftime.green{color:var(--green)}
/* 안 세는 랩 마크 — 랩타임에 붙는 작은 첨자 하나. 줄 자체는 클린랩과 같게 두고
   이것만으로 구분한다 (사용자 지시 2026-08-18). 예전의 취소선(.ftime.bad)은
   줄 모양을 통째로 바꿔서 앞뒤 랩과 비교가 안 됐다 — 그래서 뺐다. */
.foff{font-family:var(--fmono);font-size:9.5px;font-weight:700;color:var(--red);
  margin-left:3px;vertical-align:super;line-height:1;cursor:help}

/* 섹터 — 방송 타이밍의 세 칸. 상자 대신 세로 괘선으로 나눈다(퍼플만 색이 붙는다).
   역산값이라 과시하지 않는다. */
.fsec{display:inline-flex;align-items:baseline;font-family:var(--fmono)}
.fsec i{font-style:normal;font-size:10px;font-variant-numeric:tabular-nums;color:var(--text3);
  padding:0 6px;border-left:1px solid var(--line2);line-height:1.1;cursor:help}
.fsec i:first-child{border-left:0;padding-left:0}
.fsec i.sp{color:var(--purple);font-weight:700}

@media(max-width:900px){
  .feed-box{height:52vh;min-height:240px}
  .feed-card{padding:10px;border-radius:14px;--fgrid:46px 28px minmax(0,1fr) 68px 46px}
  .frow{padding:4px 8px 5px 6px;gap:7px}
  .fhead{padding:0 8px;gap:7px}
  .fwhen b{font-size:10.5px}
  .fnick{font-size:12px}
  .ftime{font-size:12.5px}
  .fsrv{display:none}
}

/* AC: 트랙맵이 위 절반, 중계가 아래 절반. EVO: 맵이 없어 중계가 그 높이를 다 쓴다. */
.map-card + .feed-card{margin-top:16px}
/* EVO 엔 트랙맵이 없다(게임이 좌표를 안 준다). 맵 카드만 숨기고 **분할선은 남긴다** —
   .bcast 는 3열 그리드고 display:none 은 그리드 배치에서 통째로 빠지기 때문에, 분할선을
   숨기면 .rightcol 이 12px 짜리 divider 칸으로 밀려 들어가 타이밍·채팅이 38px 로 찌그러진다
   (실측). 남겨 두면 배치도 맞고 EVO 에서도 좌우 폭을 드래그로 조절할 수 있다. */
[data-site="evo"] .map-card{display:none}
[data-site="evo"] .feed-box{height:clamp(440px,72vh,880px)}

/* EVO 한정 — 좌우 기둥의 **아래 끝을 맞춘다**. AC 는 좌측이 맵+중계 2장이라 자연히
   비슷하게 끝나지만, EVO 는 좌측이 중계 1장뿐이라 우측(타이밍+채팅)과 수십 px 어긋난다.
   그리드를 stretch 로 돌려 두 기둥 높이를 같게 만들고, 남는 자리는 **채팅이 흡수**한다
   (타이밍은 내용만큼만 쓰는 게 맞다 — 빈 표를 늘려 봐야 빈칸만 커진다).
   중계 높이는 clamp 대신 flex 로 맡긴다. 드래그로 명시 높이를 주면 그 값이 이긴다. */
/* 정렬(.bcast stretch / .rightcol 100% / .chat-card flex)은 2026-08-18에 app.css 의
   공통 규칙으로 승격됐다 — AC 도 같은 어긋남이 있었다. 여기 남은 것은 EVO 고유분뿐:
   맵이 없어 세로가 남으므로 모바일에서 채팅을 더 크게 준다. */
@media(max-width:900px){
  [data-site="evo"] .chat-card{height:clamp(300px,44vh,540px)}
}

/* .bcast는 [왼쪽 | 스플리터 | 오른쪽] 3열이다. 카드를 그냥 하나 더 넣으면 그게
   스플리터 칸을 차지하고 오른쪽 칼럼이 다음 줄로 밀린다(실측). 왼쪽도 오른쪽처럼
   칼럼으로 묶어야 [맵/중계 | 타이밍/채팅] 배치가 나온다. */
.leftcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.map-card + .feed-card{margin-top:0}
@media(max-width:900px){ .leftcol{display:contents} }