/* ── 타이틀 레이스 ────────────────────────────────────────────────────────────
   두 해를 나란히 달리게 하는 전체화면. PACE에서 두 해를 고르고 들어온다.
   판을 따로 가두지 않는다 — 테두리도 배경도 없이 페이지에 그대로 얹히고,
   가장자리는 캔버스가 페이지 색으로 지워 준다(views-race.js _trVignette). */

#raceView.show{display:flex;}
#raceView{padding:calc(6px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));}

/* 머리띠 — 창 이름 자리에 대진이 앉는다. 중계 타이밍 타워 문법이다: 연도 색은 점 하나로만
   쓰고 글자는 앱 머리글 회색(--text2)을 따른다. 앞선 쪽 점에만 불이 들어오므로 판을 안 봐도
   머리띠에서 선두가 읽힌다(나란하면 둘 다 켠다 — 판의 rd>=0 / rd<=0 규칙과 같은 눈금).
   현재 칸(W37·Sep 20)은 여기 적지 않는다 — 판 아래 머리 옆에 같은 글자가 따라다니고,
   그게 왼쪽만 길어지게 만들던 원인이었다. 연도를 누르면 그 자리만 갈아끼운다. */
.tr-head{flex:0 0 auto;display:flex;align-items:center;gap:9px;height:40px;padding:0 2px;}
.tr-yr{
  -webkit-appearance:none;appearance:none;background:none;cursor:pointer;
  display:flex;align-items:center;gap:6px;line-height:1;min-height:29px;padding:0 10px 0 8px;
  /* 연도 색 테 — 고를 수 있는 자리임을 말하고, 두 해가 한 번 더 갈린다.
     테가 곧 손가락 자리라 예전의 음수 마진은 필요 없다.
     1px·26%로는 어느 바탕에서도 잘 안 보였다 — 굵기와 색을 같이 올린다.
     면은 깔지 않는다: 치이잉(gap-ching)이 바탕 위로 흐르는 효과라, 면이 있으면 스윕이
     그 위로 겹쳐 묽어지고 면을 잠깐 비우면 번쩍인다. 원형(.pd-gap)도 테만 쓴다. */
  border:1.5px solid color-mix(in srgb,var(--c,var(--text3)) 62%,transparent);border-radius:999px;
  font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:.8px;
  color:var(--text2);-webkit-tap-highlight-color:transparent;
}
.tr-yr > i{font-style:normal;}
/* 그 시점 편수 — 판의 머리 숫자와 같은 값이고, 자릿수가 굴러간다(공용 numeric-text).
   세 자리 자리를 미리 잡아 둔다: 9 → 99 → 143으로 자라는 동안 알약이 같이 넓어지면
   재생 내내 머리띠가 들썩인다. 숫자는 오른쪽에 붙어 자릿수만 왼쪽으로 늘어난다. */
.tr-yr > b{font-weight:700;color:var(--c,var(--text2));letter-spacing:.4px;
  font-variant-numeric:tabular-nums;min-width:1.86em;justify-content:flex-end;}
/* 치이잉의 금속 띠가 여기서는 아예 안 깔리고 있었다 — .tr-yr의 버튼 리셋 background:none이
   .gap-ching의 background-image를 같은 특정도로 덮어(둘 다 클래스 하나, 이 파일이 뒤에 실린다)
   computed가 none이었다. 그래서 발광 링만 돌고 쓸어넘기는 느낌이 없었다(실측).
   여기서 다시 깐다. 김에 길도 이 폭에 맞춘다: 원형의 좌표는 46px짜리 gap 알약 기준이라
   99px에서는 띠가 안쪽을 제대로 못 가로지른다. 왼쪽에서 오른쪽으로 한 번 쓸고 나간다. */
.tr-yr.gap-ching{
  /* 기울기는 원형과 같은 65도로 눕힌다 — 100도로 곧추세웠더니 띠가 가늘어 보였다.
     굵기도 원형에 맞춘다: .pd-gap은 띠의 가로 폭이 알약의 63%(밝은 심지 21%)인데
     같은 퍼센트를 2.15배 넓은 이 알약에 쓰면 54%(18%)로 얇아진다. 그래서 눈금을 다시 냈다
     — 220%×100% · 65도에서 36.5~63.5%가 곧 63%, 45.5~54.5%가 곧 21%다. */
  background-image:linear-gradient(65deg,
    transparent 0%, transparent 36.5%,
    var(--ching-soft) 45.5%, var(--ching-core) 50%, var(--ching-soft) 54.5%,
    transparent 63.5%, transparent 100%);
  background-size:220% 100%;background-repeat:no-repeat;
  animation:trSweep .6s cubic-bezier(.4,.05,.2,1) 1 forwards, gapGlow2 .6s ease 1;
}
/* 띠가 알약 밖에서 시작해 밖으로 나간다. 100%→0%로 두면 끝에서 띠의 꼬리가 아직 오른쪽
   가장자리에 걸린 채로 멈추고(forwards), 100ms 뒤 클래스가 떨어질 때 그게 툭 사라져
   마지막이 버벅이는 것처럼 보였다. 시작도 마찬가지로 꼬리가 이미 걸쳐 있었다.
   220%·65도에서 띠는 그림의 x 76.5~141.3에 있고 한 칸(1%)이 1.188px이므로,
   왼쪽으로 완전히 빼려면 119% 위, 오른쪽으로 빼려면 -19% 아래가 필요하다. */
@keyframes trSweep{0%{background-position:125% 0;}100%{background-position:-22% 0;}}
@media (prefers-reduced-motion:reduce){ .tr-yr.gap-ching{animation:none;background-image:none;} }

/* 점은 이제 '누구 색인지'만 말한다 — 상시로 켜 두는 선두 불은 걷어내고, 선두가 바뀌는
   순간에만 알약 전체가 치이잉한다(views-race.js _trLeadSync → gap-ching).
   누가 앞섰는지는 알약 안의 편수가 늘 말하고 있다. */
.tr-yr::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--c,var(--text3));
}
/* 누를 때는 제 색으로 밝아진다. 앱의 기본 눌림색(금색 --accent)은 중립 버튼의 말이라,
   이미 제 색을 쥐고 있는 알약에서는 난데없는 색이 하나 더 끼어드는 꼴이었다. */
.tr-yr:active{color:var(--c,var(--text2));
  border-color:color-mix(in srgb,var(--c,var(--text3)) 92%,transparent);}
.tr-vs{font-family:var(--font-display);font-size:11px;letter-spacing:1.6px;color:var(--text3);}
/* ALL — 모든 해를 한 판에 볼 때 머리의 알약 하나(누르면 고르기 시트). 연도 색이 없으니 점도 없다 */
.tr-head [hidden]{display:none!important;}
.tr-all{padding:0 12px;color:var(--text);}
.tr-all::before{display:none;}
.tr-sp{flex:1;}

/* 판 */
/* 판을 옆으로 밀면 시간이 감긴다(views-race.js) — 이 창은 스크롤하지 않으므로 손은 전부 판이 받는다 */
.tr-scene{flex:1 1 auto;position:relative;min-height:0;overflow:hidden;touch-action:none;}
#trCanvas{display:block;width:100%;height:100%;}

/* 한 칸이 지나갈 때 머리 옆에서 솟는 +N */
.tr-burst{
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  font-family:var(--font-mono);font-weight:700;font-size:15px;
  text-shadow:0 0 18px currentColor;
  animation:trRise 1.05s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes trRise{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.7);}
  18%{opacity:1;transform:translate(-50%,-56%) scale(1.12);}
  100%{opacity:0;transform:translate(-50%,-128%) scale(.95);}
}

/* 아래 줄 — 배율 토글과 진행 막대 */
.tr-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding-top:10px;}
.tr-seg{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;flex:0 0 auto;}
.tr-seg button{
  -webkit-appearance:none;appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--font-mono);font-weight:700;font-size:9px;letter-spacing:1.2px;
  color:var(--text3);padding:5px 9px;line-height:1;
}
.tr-seg button[aria-pressed="true"]{background:var(--bg2);color:var(--text);}
/* iOS 앱(cap 'footseg', 2026-09-29): WEEK · DAY는 앱이 진짜 유리 토글로 같은 자리에 그린다(shell-header.js raceFoot).
   여기 것은 자리만 지키고 투명 — 두 칸을 같은 폭으로, 높이는 옆 진행 막대의 손가락 자리(30px)와 같게. 웹 클립은 그대로. */
html.in-app.footseg .tr-seg{opacity:0;border-color:transparent;}
html.in-app.footseg .tr-seg button{height:30px;width:52px;padding:0;}
/* 진행 막대 — 보이는 레일은 4px 그대로지만 손가락이 닿는 자리는 30px다.
   바탕 레일은 ::before로 깔고, 그 위에 리드 구간을 물들인 레인을 두 겹 얹는다.
   흐린 겹은 시즌 전체, 진한 겹은 지나온 만큼(clip-path로 자른다 — 폭을 줄이면
   구간 비율까지 같이 줄어든다). 동률 구간은 어느 편도 아니므로 회색. */
.tr-track{flex:1;min-width:0;position:relative;height:30px;cursor:pointer;
  touch-action:none;-webkit-tap-highlight-color:transparent;}
.tr-track::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:4px;border-radius:2px;background:var(--bg2);}
.tr-lane{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:4px;border-radius:2px;}
.tr-lane.dim{opacity:.30;}                    /* 아직 안 지나온 구간 — 있다는 것만 */
.tr-lane.lit{clip-path:inset(0 100% 0 0);}    /* 지나온 만큼만 진하게 */

/* 잡는 곳 — 지금 앞선 해의 색을 쓰고, 바탕색 테 바깥에 같은 색 옅은 테를 한 겹 더 두른다.
   흐릿한 그림자 대신 테라서 라이트에서도 번지지 않는다. 동률이면 회색. */
.tr-knob{position:absolute;left:0;top:50%;z-index:2;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--lc,var(--text2));
  box-shadow:0 0 0 2.5px var(--bg), 0 0 0 3.5px color-mix(in srgb,var(--lc,var(--text2)) 32%,transparent);
  transition:box-shadow .16s ease;}
.tr-track.drag .tr-knob{
  box-shadow:0 0 0 2.5px var(--bg), 0 0 0 5.5px color-mix(in srgb,var(--lc,var(--text2)) 28%,transparent);}


/* 대진 고르기 — ESTIMATE의 연도 시트(.est-year) 문법. 좌우를 따로 열지 않고 한 창에서
   두 해를 고른다(views-race.js _trOpenPicker). 고른 둘만 제 색으로 서고 나머지는 물러난다 —
   창을 열자마자 지금 대진이 어느 둘인지 한눈에 보여야 한다. */
.tr-yopt{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  min-height:48px;padding:0 2px;background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-size:30px;letter-spacing:1px;
  color:var(--c,var(--text));text-align:left;border-top:1px solid var(--border);
}
.tr-yopt:first-of-type{border-top:0;}
.tr-yopt small{display:flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  color:var(--c,var(--text2));opacity:.8;}
/* 안 고른 해는 글자만 묽힌다. 행 전체를 opacity로 죽이면 구분선까지 같이 죽어,
   고른 행 둘레에만 선이 남아 '없던 선이 생긴' 것처럼 보였다. 선은 늘 같은 밝기다. */
.tr-yopt:not(.is-on){color:color-mix(in srgb,var(--c,var(--text)) 34%,transparent);}
.tr-yopt:not(.is-on) small{color:color-mix(in srgb,var(--c,var(--text2)) 30%,transparent);}
/* 둘이 찼을 때 나머지 — 더 물러나 '지금은 못 고른다'를 말한다(하나를 빼면 다시 살아난다) */
.tr-yopt.is-full{cursor:default;color:color-mix(in srgb,var(--c,var(--text)) 17%,transparent);}
.tr-yopt.is-full small{color:color-mix(in srgb,var(--c,var(--text2)) 15%,transparent);}
/* 체크 — 글리프 하나로는 묻힌다. 그 해 색으로 채운 네모에 박는다 */
.tr-ck{font-style:normal;width:17px;height:17px;border-radius:6px;background:var(--c);
  color:var(--bg);display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;}

/* 머리글 자리의 대진 — 레이스 머리띠의 알약 문법을 그대로 줄여 쓴다 */
.tr-pick-head{display:flex;align-items:center;gap:8px;margin:0 0 12px;}
.tr-pick-head .yp{
  display:flex;align-items:center;gap:6px;line-height:1;min-height:27px;padding:0 11px;
  border:1.5px solid color-mix(in srgb,var(--c,var(--text3)) 62%,transparent);border-radius:999px;
  font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.8px;color:var(--text2);
}
.tr-pick-head .yp::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--c,var(--text3));}
.tr-pick-head .yp.is-empty{border-style:dashed;color:var(--text3);}
.tr-pick-head .yp.is-empty::before{display:none;}
.tr-pick-head .vs{font-family:var(--font-display);font-size:10px;letter-spacing:1.6px;color:var(--text3);}

/* OK — 두 해 색이 흐르는 띠. 누르기 전에 무엇을 보게 되는지가 색으로 먼저 온다 */
.tr-done{
  width:100%;margin-top:14px;min-height:44px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,var(--ca,var(--text3)),var(--cb,var(--text3)));
  color:#0b0d11;font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:1.6px;
  transition:opacity .16s,filter .16s;
}
.tr-done:active{filter:brightness(1.12);}
/* OK 옆 ALL(2026-10-03 사용자) — 두 해를 고르지 않아도 늘 누를 수 있다. 지금 ALL로 보는 중이면 켜져 있다 */
.tr-done-row{display:flex;gap:10px;margin-top:14px;}
.tr-done-row .tr-done{margin-top:0;width:auto;flex:1 1 auto;}
.tr-allpick{flex:0 0 96px;min-height:44px;border-radius:999px;cursor:pointer;background:none;
  border:1px solid var(--border);color:var(--text2);font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:1.6px;
  -webkit-tap-highlight-color:transparent;}
.tr-allpick:active{color:var(--text);}
.tr-allpick.is-on{background:var(--text);border-color:transparent;color:var(--bg);}
.tr-done[disabled]{cursor:default;background:none;border:1px solid var(--border);
  color:var(--text3);letter-spacing:1.6px;}

/* PACE 듀얼의 VS 기둥이 곧 레이스판으로 가는 문 — 버튼을 따로 두지 않는다.
   VS와 그 밑 gap 알약이 한 덩어리로 눌린다. 손가락 자리는 음수 마진으로 넓히되
   격자에서 차지하는 칸은 그대로 둔다(듀얼의 좌우 균형이 틀어지면 안 된다). */
#paceDetailBody > .pace-duel > .pd-vs,
#paceCard > .pace-duel > .pd-vs{
  cursor:pointer;padding:5px 8px;margin:-5px -8px;border-radius:12px;
  -webkit-tap-highlight-color:transparent;
}
#paceDetailBody > .pace-duel > .pd-vs:active,
#paceCard > .pace-duel > .pd-vs:active{background:var(--num-chip);}
#paceDetailBody > .pace-duel > .pd-vs:active > .pd-gap,
#paceCard > .pace-duel > .pd-vs:active > .pd-gap{opacity:.72;}

@media (prefers-reduced-motion:reduce){
  .tr-burst{animation:none;display:none;}
}