/* 친구 챌린지(js/challenge.js, 2026-10-11) — 챌린지 화면 · 결과 화면의 만들기/결과 칸 · 별명 · 공유 창. 색은 디자인 가이드 토큰(style.css :root) */
/* 틀 — 화면 표준 S1(docs/design/EyeLearn_App_Screen_Standard.md, 2026-10-14): 폭 · 옆 여백 · 노트북 확대는 바깥 틀 .ie-app.ch-app 하나가 정한다
   (style.css 메뉴 화면 폭 — 홈과 같은 1100 · 노트북 88vw). 안쪽 틀은 max-width · 옆 여백을 다시 걸지 않는다(예전 640 · 960 이 화면마다 폭을 갈랐다) */
.ch-app .ch-wrap { padding: 4px 0 32px; display: flex; flex-direction: column; gap: 16px; }
.ch-kind { margin: 0; font-size: .9rem; color: var(--muted, #56627a); }
.ch-kind small { margin-left: 4px; }
.ch-left { color: var(--accent, #6012f3); font-weight: 700; }
.ch-over { color: #b42318; font-weight: 700; }
.ch-h1 { margin: 0; font-size: var(--t1); line-height: 1.2; color: #18213a; }
.ch-set { margin: -6px 0 0; color: var(--muted, #56627a); }
.ch-them, .ch-mine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 14px 16px; border-radius: 16px; background: #f3eeff; }
.ch-mine { background: #fff; border: 1px solid var(--line, #e3e3ea); }
.ch-k { font-size: .85rem; color: var(--muted, #56627a); }
.ch-them b, .ch-mine b { font-size: 1.3rem; color: var(--accent, #6012f3); }
.ch-rank { margin-left: auto; font-weight: 700; font-size: 1.2rem; color: #18213a; }
.ch-would { width: 100%; margin: 4px 0 0; font-weight: 600; }
.ch-mine .ie-btn { width: 100%; }
.ch-play { display: flex; flex-direction: column; gap: 10px; }
.ch-nick { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--muted, #56627a); }
.ch-nick input, .ch-dlg-in { min-height: 44px; padding: 0 12px; border: 1px solid var(--line, #d5d9e3); border-radius: 12px; font: inherit; font-size: 1rem; color: #18213a; }
.ch-go, .ch-share { min-height: 52px; font-size: 1.05rem; }
.ch-note, .ch-players, .ch-empty, .ch-link, .ch-wait { margin: 0; font-size: .9rem; color: var(--muted, #56627a); }
.ch-link { font-weight: 600; color: #18213a; }
.ch-sec h2, .ch-end h2, .ch-gp h2, .ch-res h2, .ch-make h2 { margin: 0 0 6px; font-size: var(--t2); }
.ch-end { display: flex; flex-direction: column; gap: 8px; }
.ch-board { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.ch-board li { display: grid; grid-template-columns: 2.2em 40px minmax(0, 1fr) auto auto 1.4em; gap: 8px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line, #e3e3ea); }
.ch-board li.is-me { background: #f3eeff; border-radius: 10px; }
.ch-rk { font-weight: 700; color: var(--muted, #56627a); text-align: center; }
/* 이름 칸 — 줄이는 것은 이름뿐, Host · Guest · You 표는 늘 다 보인다(2026-10-14 폰에서 긴 이름 뒤 「Host」가 「H…」로 잘렸다) */
.ch-nk { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ch-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ch-nk small { flex: none; }
.ch-nk small { color: var(--accent, #6012f3); font-weight: 700; margin-left: 0; }
.ch-sc { font-weight: 700; }
.ch-tm { color: var(--muted, #56627a); font-variant-numeric: tabular-nums; }
.ch-eye { color: var(--accent, #6012f3); font-size: .8rem; text-align: center; }
.ch-gp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch-gp-one h3 { margin: 0 0 4px; font-size: var(--t3); }
@media (max-width: 600px) { .ch-gp-row { grid-template-columns: 1fr; } }
/* 결과 화면 안 칸 */
.ch-make, .ch-res { margin: 12px 0; padding: 16px; border-radius: 16px; border: 2px solid var(--accent, #6012f3); background: #fff; display: flex; flex-direction: column; gap: 8px; }
.ch-make p { margin: 0; }
.ch-make .ie-btn { align-self: flex-start; }
.ch-msg { margin: 0; font-size: .9rem; color: var(--muted, #56627a); word-break: break-all; }
.ch-msg:empty { display: none; }
.ch-vs { margin: 0; }
.ch-verdict { margin: 0; font-weight: 700; font-size: 1.05rem; color: #18213a; }
/* 별명 · 공유 창 */
.ch-dlg .ui-dlg-box { display: flex; flex-direction: column; gap: 10px; }
.ch-dlg-h { margin: 0; font-size: var(--t2); }
.ch-share-dlg .ui-dlg-box { width: min(480px, 100%); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.ch-card { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line, #e3e3ea); }
.ch-share-msg { margin: 0; font-size: .95rem; color: #18213a; }
.ch-native { min-height: 52px; font-size: 1.05rem; }
.ch-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ch-apps .ie-btn { min-height: 44px; }
.ch-view { align-self: center; }
/* 화면 개편(2026-10-11) → 세 종류 한 틀(2026-10-14) — 흰 머리 카드 · 순위표 · 다시 보기(남색 칸 하나). 그라데이션 · 아래 고정 단추 없음 */
.ch-v2 { min-height: 100%; --ch-cols: 1.6em 40px minmax(0, 1fr) 4.6em 3.2em 26px; }   /* 마지막 = ▶ 단추(26px) 칸 · 보드 열 — 점수 · 시간은 고정 폭(줄마다 따로 재면 머리 줄과 어긋남) */
/* 칸 배치 — 화면 표준 S3 · S6(challenge.js challengeGridHtml): 폰은 줄 차례대로 한 줄씩, 900 이상은 두 칸 · 줄마다 짝(높이를 맞춤) · 짝 없는 칸은 한 줄 가득 */
.ch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ch-g { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ch-g > :only-child { flex: 1; }
.ch-g:has(> .ch-gp:empty) { display: none; }   /* 다시 보기를 못 세운 판 — 칸째 없다 */
@media (min-width: 900px) {
  .ch-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: var(--areas); align-items: stretch; }
  .ch-g { grid-area: var(--a); }
}
/* 카드 한 벌 — 화면 표준 S4(홈 .hm-card 와 같게): 흰 · 테두리 1px · 모서리 16 · 그림자 없음 · 안쪽 20(폰 16) */
.ch-roundbox, .ch-head, .ch-how, .ch-res-card, .ch-brand { box-sizing: border-box; border-radius: 16px; background: var(--bg-elevated, #fff); border: 1px solid var(--border-soft, #e4e7ef); }
.ch-roundbox { padding: 20px; }
.ch-roundbox .ch-set { margin: 2px 0 8px; color: var(--accent, #6012f3); font-weight: 600; }
.ch-v2 .ch-board li { grid-template-columns: var(--ch-cols); padding: 10px 8px; margin-bottom: 6px; border: 0; border-radius: 12px; background: var(--surface, #f7f8fc); }
.ch-v2 .ch-board li.is-me { background: var(--purple-soft, #f3eeff); box-shadow: inset 0 0 0 2px var(--accent, #6012f3); }   /* 색 하나로만 알리지 않는다 — 테두리(가이드 7절) */
.ch-v2 .ch-board li.is-pick { cursor: pointer; }
.ch-vault { font-size: 16px; color: var(--muted, #56627a); }
.ch-vault.is-open { color: var(--accent, #6012f3); }
.ch-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #efe7ff; }
.ch-face.is-open { display: block; background: #d9dbe4; }
.ch-host { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #ffe7c2; color: #8a4b00 !important; font-size: .7rem; }
.ch-guest { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #ececf3; color: #555a6e !important; font-size: .7rem; }   /* 손님 줄(2026-10-12) — Host 표와 같은 꼴, 회색 */
.ch-v2 .ch-board li.is-open { display: block; padding: 0; background: transparent; }
.ch-board li.is-open > .ch-rk, .ch-board li.is-open .ch-nk, .ch-board li.is-open .ch-sc { color: #8a91a6; }
.ch-spot, .ch-v2 .ch-board li.is-open:not(:has(button)) { display: grid; grid-template-columns: var(--ch-cols); gap: 8px; align-items: center; width: 100%; padding: 10px 8px;
  border: 1px dashed #c9c2e6; border-radius: 14px; background: #fbfaff; font: inherit; text-align: left; color: #8a91a6; cursor: pointer; }
.ch-spot:hover { background: #f3eeff; }
.ch-spot .ch-nk { color: var(--accent, #6012f3); font-weight: 600; }
.ch-would { margin: 0 0 8px; font-weight: 600; color: #18213a; }
.ch-path { padding: 16px; border-radius: 16px; background: var(--navy, #07015a); color: #fff; }   /* 어두운 판은 다시 보기 하나 · 남색 한 값(화면 표준 S4) */
#ieltsScreen .ch-path h2 { margin: 0 0 10px; font-size: var(--t2); font-weight: 700; color: #fff; }   /* T2 — 어두운 판 위라 흰색, 대문자 아님(S9) */
.ch-path .rp-card { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.ch-path .rp-card-h, .ch-path .rp-gp-legend, .ch-path .rp-note { display: none; }
.ch-path .rp-gp-box { border-radius: 14px; background: #fff; }
.ch-path .rp-gp-ctl { color: #fff; }
#ieltsScreen .ch-path .rp-gp-time { color: rgba(255,255,255,.85); }
#ieltsScreen .ch-path .ch-gp-one h3 { color: #fff; }

/* 1단계(2026-10-11) — 받는 동안의 빈 틀 · 푼 뒤 숫자 칸 셋 · 동점 풀이 · 보드 머리 줄 · 초대 칸 · 놓는 순서 */
.ch-sk { display: block; border-radius: 10px; background: #ece8f7; animation: ch-sk 1.2s ease-in-out infinite alternate; }
.ch-sk-row { width: 100%; height: 58px; margin-top: 10px; border-radius: 14px; }
.ch-sk-s { width: 46%; height: 14px; } .ch-sk-h { width: 70%; height: 34px; } .ch-sk-m { width: 52%; height: 18px; } .ch-sk-go { width: min(100%, 320px); height: 52px; margin-top: 8px; border-radius: 14px; }
.ch-skel .ch-days li i { border-style: dashed; opacity: .5; }
   빈 틀은 그 종류의 실제 화면과 같은 칸 배치(2026-10-14 사용자 「예전 화면 구성이 잠시 보이다가」 — 전에는 옛 높은 머리 띠 + ROUND 동그라미였다) */
@keyframes ch-sk { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ch-sk { animation: none; } }

/* 내 결과 카드 — 세 종류 같은 꼴(화면 표준 S7, challengeResultHtml): 도장 · 큰 숫자 · 이름 · 작은 칸 · 한 줄. 짝 칸이 더 길면 가운데로 */
.ch-res-card { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 20px; color: #18213a; }
.ch-res-stamp { align-self: flex-start; margin: 0 0 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface, #f7f8fc); color: var(--muted, #56627a);
  font: 600 .75rem/1.4 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.ch-res-stamp.is-on { background: var(--purple-soft, #f3eeff); color: var(--accent, #6012f3); }
.ch-res-big { margin: 0; font: 700 clamp(2.4rem, 10vw, 3.4rem)/1 Inter, sans-serif; color: #18213a; font-variant-numeric: tabular-nums; }
.ch-res-bk { margin: 0; font-weight: 600; color: var(--muted, #56627a); }
.ch-res-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border-soft, #e4e7ef); }
.ch-res-cells > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-res-cells dd { order: -1; margin: 0; font: 700 var(--n2)/1.2 Inter, sans-serif; color: #18213a; font-variant-numeric: tabular-nums; }
.ch-res-cells dt { font-size: .875rem; color: var(--muted, #56627a); }
.ch-res-cells .hz-tag { font-size: .75rem; }
.ch-res-cells .hz-picks { flex-direction: row; padding: 0; border: 0; background: none; }
.ch-res-cells .hz-picks small { display: none; }
.ch-res-note { margin: 10px 0 0; font-weight: 600; color: #18213a; }
.ch-review[hidden] { display: none; }
.ch-review .xr-link { font-weight: 700; }
.ch-rb-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ch-rule { margin: 0; font-size: .8rem; color: var(--muted, #56627a); }
.ch-v2 .ch-board li.ch-bh { padding: 0 8px 2px; margin: 0; background: transparent; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #8a91a6; }

.ch-inv-go { min-height: 54px; border: 0; border-radius: 16px; background: var(--accent, #6012f3); color: #fff; font: 700 1.1rem Inter, sans-serif; cursor: pointer; box-shadow: 0 6px 16px rgba(96, 18, 243, .25); }
/* 놓는 순서(2026-10-14 사용자 결정 ③ 「순위표가 먼저, 시선은 그 아래」) — 폰: 보드 → 경로(내 시선 + 그림 궤도 · 경주 탭) → 초대,
   넓은 화면: 보드 · 초대 나란히, 경로는 아래 한 줄 가득(레인이 좁아지지 않게) */
.ch-roundbox[hidden], .ch-board[hidden] { display: none !important; }
.ch-race-players { margin: 4px 0 0; font-size: .78rem; color: rgba(255,255,255,.7); }
.ch-lane.is-spot { background: transparent; border: 1px dashed rgba(255,255,255,.3); }
@media (min-width: 601px) { .ch-race.ch-path { padding: 20px; } }
.ch-gp:empty { display: none; }

/* 맨 아래 줄 — 로고 · eyelearn.me · QR(2026-10-12 사용자) */
.ch-preview { margin: 0 0 12px; padding: 10px 14px; border: 1px dashed #b096ff; border-radius: 12px; background: #fbfaff; color: #4a3a8a; font-size: .85rem; font-weight: 700; }   /* 미리 보기 띠(내부용) */
.ch-preview-go { margin: 10px 0 0; text-align: center; font-size: .8rem; }
.ch-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.ch-brand-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ch-brand-logo { height: 28px; width: auto; align-self: flex-start; }
.ch-brand-for { color: var(--muted, #56627a); font-size: .8rem; line-height: 1.3; }
.ch-brand-site { color: var(--accent, #6012f3); font-weight: 700; font-size: .95rem; text-decoration: none; }
.ch-qr { flex: none; width: 92px; height: 92px; }
@media (max-width: 600px) { .ch-qr { width: 72px; height: 72px; } .ch-brand-logo { height: 24px; } }

/* 고칠 문항 세션 끝 창의 권하기(2026-10-11, ielts-fixq.js _ifEnd) */
.ch-prompt { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #f3eeff; display: flex; flex-direction: column; gap: 8px; }
.ch-prompt p { margin: 0; }
.ch-prompt .ie-btn { align-self: flex-start; }
.ch-v2 .ch-sc, .ch-v2 .ch-tm, .ch-v2 .ch-bh > span:nth-child(4), .ch-v2 .ch-bh > span:nth-child(5) { text-align: right; }

/* 「Start a challenge」 창 · 머리 띠의 시험 · 난이도(2026-10-11 다듬기 2단계) */
.ch-new-dlg .ui-dlg-box { width: min(480px, 100%); max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
/* 스크롤 없이 끝까지(2026-10-14 사용자 「마지막 줄이 스크롤해야 보인다」) — 머리 · 몸(시험 · 종목 · 난이도) · 바닥(단추 · 아래 줄) 셋으로 나눠
   넘치는 낮은 화면에서도 몸만 스크롤되고 단추와 아래 줄은 늘 보인다. 종목 카드는 2×2 로 몸의 높이를 줄인다. */
.ch-new-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ch-new-foot { flex: none; display: flex; flex-direction: column; gap: 6px; }
.ch-new-foot .ch-note { margin: 0; }
.ch-new-k { margin: 8px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted, #56627a); }
.ch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line, #d5d9e3); border-radius: 999px; background: #fff; color: #18213a; font: 600 .95rem Inter, sans-serif; cursor: pointer; }
.ch-chip.is-on { border-color: var(--accent, #6012f3); background: #f3eeff; color: var(--accent, #6012f3); font-weight: 700; }
.ch-kind-opt { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--accent, #6012f3); border-radius: 14px; background: #fbfaff; }
.ch-kind-opt small { color: var(--muted, #56627a); }
.ch-new-dlg .ch-inv-go { margin-top: 10px; }

/* Word challenge(2026-10-11 다듬기 3단계) — 만들기 창의 종목 둘 · 푸는 화면 · 틀린 낱말 */
.ch-kinds { display: grid; gap: 8px; }
.ch-new-dlg .ch-kind-opt { width: 100%; text-align: left; font: inherit; color: #18213a; cursor: pointer; border-color: var(--line, #d5d9e3); background: #fff; }
.ch-new-dlg .ch-kind-opt.is-on { border-color: var(--accent, #6012f3); background: #fbfaff; }
.ch-wq { min-height: 100%; display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.ch-wq-top { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; }   /* 머리 줄 — 퀴즈와 같은 꼴(‹ · 종류 · 시험 · 난이도 · 진행 · 시계, 2026-10-14 통일) */
.ch-wq-quit { flex: none; width: 40px; height: 40px; border: 1px solid var(--line, #e3e3ea); border-radius: 50%; background: #fff; color: #18213a; font-size: 26px; line-height: 1; cursor: pointer; }
.ch-wq-quit:hover { border-color: var(--accent, #6012f3); color: var(--accent, #6012f3); }
.ch-wq-k { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.ch-wq-k b { font: 700 1rem/1.25 Inter, sans-serif; color: #18213a; }
.ch-wq-k small { font: 500 .82rem/1.3 Inter, sans-serif; color: var(--muted, #56627a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-wq-n { margin-left: auto; font-weight: 700; color: var(--accent, #6012f3); font-variant-numeric: tabular-nums; }
.ch-wq-time { min-width: 3.2em; padding: 6px 12px; border: 1px solid var(--line, #e3e3ea); border-radius: 12px; background: #fff; text-align: center; font: 700 1.2rem/1 Inter, sans-serif; color: #18213a; font-variant-numeric: tabular-nums; }
.ch-wq-bar { height: 6px; border-radius: 3px; background: #e6e0f7; overflow: hidden; }
.ch-wq-bar i { display: block; height: 100%; background: var(--accent, #6012f3); transition: width .2s; }
.ch-wq-card { width: min(640px, 100%); margin: 0 auto; padding: 22px 18px; border-radius: 20px; background: #fff; box-shadow: 0 6px 20px rgba(42, 15, 158, .1); display: flex; flex-direction: column; gap: 14px; }
.ch-wq-ask { margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted, #56627a); }
.ch-wq-w { margin: 0; font: 700 clamp(1.8rem, 8vw, 2.6rem)/1.1 Inter, sans-serif; color: #18213a; overflow-wrap: anywhere; display: flex; align-items: center; gap: 10px; }
.ch-wq-hear { flex: none; width: 44px; height: 44px; border: 1px solid var(--line, #d5d9e3); border-radius: 50%; background: #fff; font-size: 1.1rem; cursor: pointer; }
.ch-wq-opts { display: grid; gap: 10px; }
@media (min-width: 601px) { .ch-wq-opts { grid-template-columns: 1fr 1fr; } }
.ch-wq-opt { display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 12px 14px; border: 1px solid var(--line, #d5d9e3); border-radius: 14px; background: #fbfaff;
  font: 500 1rem/1.4 Inter, sans-serif; color: #18213a; text-align: left; cursor: pointer; }
.ch-wq-opt:hover { border-color: var(--accent, #6012f3); background: #f3eeff; }
.ch-wq-opt b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ece4ff; color: var(--accent, #6012f3); font-size: .85rem; }
.ch-missed { padding: 20px; border-radius: 16px; background: var(--bg-elevated, #fff); border: 1px solid var(--border-soft, #e4e7ef); }   /* 카드 한 벌(화면 표준 S4) */
#ieltsScreen .ch-missed h2 { margin: 0 0 8px; font-size: var(--t2); font-weight: 700; color: #18213a; }
.ch-missed ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ch-missed b { color: #18213a; }

/* 7-day reading streak(2026-10-11 다듬기 4단계) — 머리의 날짜 줄(● 읽음 · ○ 오늘 · · 아직 · 놓침), 흰 머리 위라 보라 · 회색(2026-10-14) */
.ch-days { list-style: none; display: flex; gap: 8px; margin: 6px 0 0; padding: 0; flex-wrap: wrap; }
.ch-days li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ch-days i { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cfc6ea; box-sizing: border-box; }
.ch-days small { font-size: .7rem; font-weight: 700; color: var(--muted, #56627a); }
.ch-days .is-done i { background: var(--accent, #6012f3); border-color: var(--accent, #6012f3); }
.ch-days .is-today i { border-color: var(--accent, #6012f3); box-shadow: 0 0 0 3px rgba(96, 18, 243, .15); }
.ch-days .is-missed i { border-style: dashed; opacity: .55; }
.ch-new-dlg .ch-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 359px) { .ch-new-dlg .ch-kinds { grid-template-columns: 1fr; } }   /* 아주 좁은 폰만 한 줄씩 */

/* Map 메뉴(원정 지도) — 지도 아래 CHALLENGES 줄(가안, 2026-10-11): 챌린지마다 카드 하나 + Start 카드, 없으면 초대 띠. 지도 위에는 그리지 않음 */
.exp-ch { margin: 0; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #e6e0f7; box-shadow: 0 6px 18px rgba(42, 15, 158, .08); }
.exp-ch h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 1.0625rem; font-weight: 700; color: #18213a; }
.exp-ch h3 svg { width: 18px; height: 18px; color: var(--accent, #6012f3); }
.exp-ch-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.exp-ch-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; cursor: pointer; padding: 12px; border: 1px solid #ebe6f8; border-radius: 14px; background: #f8f6fd; }
.exp-ch-card.is-ended { background: #fff; }
.exp-ch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; column-gap: 8px; align-items: center; width: 100%; padding: 0;
  border: 0; background: none; text-align: left; font: inherit; color: #18213a; cursor: pointer; }
/* 카드 어디를 눌러도 그 챌린지로 — 제목 줄 단추를 카드 전체로 늘린다(Read Day N 단추는 그 위 층) */
.exp-ch-row::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.exp-ch-card:hover { border-color: #cfc6ea; }
.exp-ch-go { position: relative; z-index: 1; }
.exp-ch-row b { font-size: 1rem; } .exp-ch-row span { color: #8a91a6; }
.exp-ch-row small { grid-column: 1 / 3; font-size: .875rem; line-height: 1.4; color: var(--muted, #56627a); }
.exp-ch-dots { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0; }
.exp-ch-dots li { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cfc6ea; background: #fff; box-sizing: border-box; }
.exp-ch-dots li.is-done { background: #f5b301; border-color: #f5b301; }
.exp-ch-dots li.is-today { border-color: var(--accent, #6012f3); box-shadow: 0 0 0 3px rgba(96, 18, 243, .15); }
.exp-ch-dots li.is-missed { border-style: dashed; opacity: .55; }
.exp-ch-go { margin-top: auto; min-height: 40px; border: 0; border-radius: 12px; background: var(--accent, #6012f3); color: #fff; font: 700 .92rem Inter, sans-serif; cursor: pointer; }
.exp-ch-card.is-new { padding: 0; background: #fff; border-style: dashed; border-color: #cfc6ea; }
.exp-ch-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; min-height: 96px; padding: 12px;
  border: 0; border-radius: 14px; background: none; font: 700 .95rem Inter, sans-serif; color: var(--accent, #6012f3); cursor: pointer; }
.exp-ch-new b { font-size: 1.5rem; line-height: 1; }
/* 챌린지가 없을 때 — 줄 전체가 초대 띠 하나(글 왼쪽 · 단추 오른쪽, 폰은 위아래) */
.exp-ch.is-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.exp-ch-inv { flex: 1 1 280px; min-width: 0; }
.exp-ch.is-empty h3 { margin-bottom: 4px; }
.exp-ch.is-empty p { margin: 0; font-size: .9375rem; color: var(--muted, #56627a); }
.exp-ch.is-empty .ch-inv-go { flex: 0 0 auto; min-height: 46px; padding: 0 22px; font-size: 1rem; }
@media screen and (max-width: 820px) {
  .exp-ch-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
  .exp-ch-card { flex: 0 0 85%; scroll-snap-align: start; }
  .exp-ch-card.is-new { flex-basis: 60%; }
  .exp-ch.is-empty .ch-inv-go { width: 100%; }
}

/* Reading Biathlon · Sweet Spot · Learn from(2026-10-12, challenge-race.js) — 경로 칸(.ch-path)과 같은 남색 판 */
.ch-race-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#ieltsScreen .ch-race-h h2 { margin: 0; }
.ch-race-sim { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ch-race-tabs { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.12); }
.ch-race-tabs button { border: 0; padding: 4px 12px; border-radius: 999px; background: transparent; color: rgba(255,255,255,.8); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.ch-race-tabs button.is-on { background: #fff; color: var(--navy, #07015a); }
.ch-race-wait { color: rgba(255,255,255,.6); }
.ch-lanes { list-style: none; margin: 0; padding: 0; }
/* 칸 폭은 문항 수(--q)만큼만 — 지문 줄(A B)이 오른쪽으로 넓어지고 Questions · Rank 가 붙는다(2026-10-12 사용자) */
/* 트랙 바닥 폭 = (문단 수 + 1) × 얼굴(24px) + 좌우 여백 — 이 아래로 줄지 않아 넘침이 재지고, 넘치면 challenge-race.js _chRaceFit 가 한 단씩 물러선다(2026-10-13) */
.ch-race-view { --q-w: calc(var(--q, 3) * 24px + (var(--q, 3) - 1) * 4px); --trk-min: calc((var(--np, 2) + 1) * 24px + 26px + 30px); }
.ch-lane { display: grid; grid-template-columns: minmax(6.5em, 9em) minmax(var(--trk-min), 1fr) var(--q-w, 5.4em) 2.6em 22px; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: rgba(255,255,255,.06); cursor: pointer; }
.ch-lane.is-me { background: rgba(176,150,255,.28); }
.ch-lane.is-noeye, .ch-lane.is-join { cursor: default; }
.ch-lane-h { background: transparent; padding-top: 0; padding-bottom: 0; margin-bottom: 6px; cursor: default; }
.ch-race-body:not(.is-all) .ch-lane.is-extra { display: none; }
.ch-lane-nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .85rem; }
.ch-lane-who { display: flex; align-items: baseline; gap: 4px; min-width: 0; }   /* 별명 · 꼬리표 한 줄(노트북은 폭이 넓어져서, 2026-10-13 사용자) */
.ch-lane-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ch-lane-who small { flex: none; }
.ch-lane-nm .ch-face { width: 24px; height: 24px; flex: none; }
.ch-lane-nm small { font-size: .62rem; }
/* 트랙 칸 = 읽는 띠(2026-10-13) — 작은 글이 흐르고 시선 점이 뛴다. 아래 가장자리 진도선이 「누가 어디까지」(문단 눈금 = 머리 줄 A B) */
.ch-lane-trk { position: relative; height: 30px; min-width: 0; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.05); --gut: 30px; }
.ch-lane-h .ch-lane-trk { height: 16px; overflow: visible; background: none; }
/* 띠 = 단계 표 칸(왼쪽 --gut) + 글 칸 — 흐르는 글 · 문항 막대 · 진도선 · 머리 줄 P 표는 모두 글 칸 기준(2026-10-13 사용자 「P1 은 글이 나오는 자리 위」) */
.ch-lane-area { position: absolute; left: var(--gut); right: 0; top: 0; bottom: 0; overflow: hidden; }
.ch-lane-h .ch-lane-area { overflow: visible; }
/* 문항 구간(추정판) — 글은 숨기고 문항 막대 하나 + 지문 칸 P, 점은 그 사람의 분포로 */
.ch-q-layer { position: absolute; inset: 0 0 2px 0; display: none; }
.ch-lane-trk.is-qphase .ch-q-layer { display: block; }
.ch-lane-trk.is-qphase .ch-lane-area .ch-strip-in { opacity: 0; }   /* 「다 읽음」의 옅게 하기(is-done)보다 앞서게 */
.ch-q-stub { position: absolute; left: 4px; top: 50%; width: 12px; height: 14px; margin-top: -7px; border-radius: 2px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.35);
  background: repeating-linear-gradient(rgba(255,255,255,.45) 0 1px, transparent 1px 3px) 2px 3px / 6px 8px no-repeat; }   /* 지문 칸 — 문서 모양(「P」 글자는 단계 표와 헷갈려 뺐다, 2026-10-13) */
.ch-q-bar { position: absolute; left: 26px; right: 8px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: rgba(255,255,255,.2); }
/* 답한 순간 — 고리 · 날아가는 Q 표 · 머리 줄 Q 밝아짐 */
@keyframes ch-tap { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.ch-ans-ring { position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #b096ff; border-radius: 50%; pointer-events: none; animation: ch-tap .6s ease-out forwards; }
.ch-ans-fly { position: absolute; z-index: 4; padding: 1px 5px; border-radius: 6px; background: #b096ff; color: var(--navy, #07015a); font-size: .62rem; font-weight: 700; line-height: 1.3; pointer-events: none;
  transform: translate(-50%, -50%); transition: transform .42s cubic-bezier(.4, 0, .2, 1), opacity .42s ease-in; }
.ch-qh-n.is-flash { animation: ch-qflash .7s ease-out; }
@keyframes ch-qflash { 0% { color: #fff; text-shadow: 0 0 8px #b096ff; transform: scale(1.35); } 100% { color: inherit; text-shadow: none; transform: scale(1); } }
.ch-lane-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.14); }
/* ▶ — 레인 맨 오른쪽 붙박이(2026-10-13 사용자 「P2 옆이면 P2 를 재생할 것 같다」), 그 사람의 Gaze path */
.ch-lane-ey { display: grid; place-items: center; }
/* 2026-10-15 사용자 「좀 더 부드러운 눈 모양」 — 흰 원판 대신 옅은 원 위 흰 선(둥근 아몬드 · 꽉 찬 눈동자, challenge-race.js CH_EYE_SVG) */
.ch-lane-eye { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  color: #fff; font-size: .55rem; line-height: 1; cursor: pointer; transition: background .15s; }
.ch-lane-eye:hover, .ch-lane:hover .ch-lane-eye { background: rgba(255,255,255,.28); }
@media (max-width: 600px) { .ch-lane-eye { width: 24px; height: 24px; } }
/* 지금 단계 표 — 띠 왼쪽 끝(읽는 문단 P · 마지막으로 고른 문항 Q) */
.ch-lane-stage { position: absolute; left: 4px; top: 50%; z-index: 2; margin-top: -9px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 5px; box-sizing: border-box;
  display: grid; place-items: center; background: rgba(176,150,255,.9); color: var(--navy, #07015a); font-size: .6rem; font-weight: 700; line-height: 1; }
.ch-lane-stage:empty { display: none; }
.ch-lane-stage.is-q { background: #ffd36b; }
.ch-lane-stage.is-in { animation: ch-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
/* 흐르는 글 속 문단 표 */
.ch-strip-p { position: absolute; top: 3px; left: calc(var(--n) * var(--cw, 0px)); padding: 0 3px; border-radius: 4px; background: rgba(176,150,255,.85); color: var(--navy, #07015a); font: 700 8px/12px Inter, Arial, sans-serif; font-style: normal; transform: translateX(-100%); }
/* 경주가 끝난 뒤 — 띠 위 시간 줄(Read · Total), 4위부터 Rank 숫자(2026-10-13) */
.ch-lane-time { position: absolute; left: 0; right: 0; top: 0; bottom: 2px; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #fff; white-space: nowrap; }
.ch-lane-time[hidden] { display: none; }
.ch-lane-trk.is-fin .ch-strip-in { opacity: .15; }
.ch-lane-medal.is-num { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.75); }
.ch-lane-prog > b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #b096ff; }
.ch-lane-tick { position: absolute; bottom: 0; height: 6px; width: 2px; margin-left: -1px; background: rgba(255,255,255,.45); }
.ch-lane-para { position: absolute; top: 0; font-style: normal; font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.6); white-space: nowrap; }   /* 문단 표 P1 … — 진도선 눈금 바로 오른쪽(2026-10-13) */
.ch-lane-para.is-off { visibility: hidden; }
.ch-lane-para b { font-weight: inherit; }   /* <b> 가 700 위에서 900 으로 올라가지 않게(S5 · S9) */
.ch-lane-tg { position: relative; display: inline-flex; gap: 4px; align-items: center; justify-content: center; }   /* 동그라미 줄도 열 가운데 — 머리 「Questions」와 같은 가운데 */
/* 칸 — 빈 칸 → 답함(중립) → 도착 뒤 발표(✔ 초록 · ✘ 조용한 회색), 2026-10-12 사용자 */
.ch-gate { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 700;
  border: 2px solid rgba(255,255,255,.35); color: rgba(255,255,255,.55); }
.ch-gate.is-ans { border-color: #b096ff; background: #b096ff; color: var(--navy, #07015a); }
.ch-gate.is-hit { border-color: #8be28b; background: #2f8f4a; color: #fff; }
.ch-gate.is-miss { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.16); color: rgba(255,255,255,.75); }
.ch-gate.is-in { animation: ch-in .35s ease-out; }
.ch-gate.is-pop, .ch-lane-medal.is-pop { animation: ch-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ch-in { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes ch-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.45); } 100% { transform: scale(1); } }
/* 답을 고른 순간 — 시선 점에서 퍼지는 고리 */
/* 불꽃 · 폭죽 — 맞은 칸 하나(작게) · 다 맞힌 레인(크게) */
.ch-burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 3; }
.ch-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; animation: ch-spark .8s ease-out forwards; }
@keyframes ch-spark { from { transform: rotate(var(--a)) translateX(0); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.4); opacity: 0; } }
.ch-lane-md { position: relative; align-self: stretch; font-size: .8rem; white-space: nowrap; }   /* 메달은 칸 위에 띄운다 — 나타나도 레인 높이가 안 바뀐다(줄이 밀리지 않게) */
.ch-lane-medal { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.7rem; line-height: 1; pointer-events: none; }
.ch-qh-n { width: 20px; border: 2px solid transparent; font-style: normal; text-align: center; }   /* Q1 Q2 Q3 — 칸 동그라미와 같은 폭(테두리까지) */
.ch-qh-w { display: none; font-style: normal; }
.ch-race-view.is-bar .ch-qh-n { display: none; }
.ch-race-view.is-bar .ch-qh-w { display: inline; }
.ch-lane-qh, .ch-lane-rh { justify-content: center; text-align: center; font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.55); white-space: nowrap; }
/* 머리 줄 — A B 바로 왼쪽에 「Paragraph」(폰은 A 위) */
.ch-lane-ph { justify-self: end; margin-right: -6px; font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.55); white-space: nowrap; }
.ch-race-more { margin: 2px 0 4px; color: #d6c8ff; }
.ch-race-ctl { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0 13px; }   /* 좌우 = 레인 안쪽 여백 + 테두리 — 단추 끝이 레인 안 단추와 같은 선 */
.ch-race-play { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; color: var(--navy, #07015a); font-weight: 700; cursor: pointer; }
.ch-race-seek { flex: 1; min-width: 0; accent-color: #b096ff; }
/* 배속 칩 — 누를 때마다 다음 배속(2026-10-14, 넷을 늘어놓던 폭을 다시 보기 단추에) */
.ch-race-spd { flex: none; min-width: 52px; height: 40px; padding: 0 12px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; background: transparent; color: #fff; font: 700 .9rem/1 Inter, sans-serif; cursor: pointer; }
.ch-race-spd:hover { background: rgba(255,255,255,.1); }
/* Share result — 노랑 테두리(꽉 찬 노랑은 다시 보기보다 눈에 띄었다, 2026-10-14 사용자) */
@media (max-width: 600px) { .ch-race-ctl { flex-wrap: wrap; padding: 0 9px; } .ch-eyes-foot { padding: 0 9px; justify-content: center; }
  .ch-lane.is-join { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .ch-lane.is-join .ch-lane-tg { justify-content: stretch; } .ch-lane.is-join .ch-inv-go { width: 100%; justify-content: center; } }   /* 폰은 아래 줄 한가득 — 되감기 막대를 줄이지 않게 */
.ch-race-back { color: #d6c8ff; margin-bottom: 6px; }
.ch-gp-row.is-one { grid-template-columns: minmax(0, 640px); justify-content: center; }
.ch-race .rp-gp-seg, .ch-race .rp-gp-speeds { height: 26px; border-radius: 8px; }   /* 재생 · 배속 단추 높이 34 → 17(사용자 「50%로」) → 26(「1.5배」, 2026-10-13) */
.ch-race .rp-gp-btn, .ch-race .rp-gp-sp { min-width: 32px; padding: 0 6px; font-size: 11px; }
.ch-race .rp-gp-btn .gp-ico { width: 13px; height: 13px; }
@media (max-width: 600px) {
  .ch-race-view { --q-w: calc(var(--q, 3) * 20px + (var(--q, 3) - 1) * 4px); }
  .ch-lane { grid-template-columns: 2.2em minmax(var(--trk-min), 1fr) var(--q-w, 4.4em) 2.2em 20px; gap: 6px; padding: 8px; margin-bottom: 8px; }
  .ch-lane-medal { font-size: 1.35rem; }
  .ch-lane-qh, .ch-lane-rh { font-size: .6rem; }
  /* 내 레인은 폰에서도 「You」 — 얼굴 대신 이름표(남의 줄은 얼굴만, 2026-10-12 사용자) */
  .ch-lane.is-me .ch-lane-nm > .ch-face { display: none; }
  .ch-lane.is-me .ch-lane-nm .ch-you { display: inline; font-size: .72rem; font-weight: 700; color: #fff; }
  .ch-lane-nm b, .ch-lane-nm small { display: none; }
  .ch-gate { width: 16px; height: 16px; font-size: .55rem; }
  .ch-qh-n { width: 16px; }
  /* 이름 칸이 좁아 「Paragraph」는 A 바로 위 줄 맨 앞에 */
  .ch-lane-h .ch-lane-ph { grid-column: 2; grid-row: 1; justify-self: start; margin: 0; font-size: .62rem; }
  .ch-lane-h > .ch-lane-trk { grid-column: 2; grid-row: 2; }
  .ch-lane-h > .ch-lane-tg { grid-column: 3; grid-row: 2; }
  .ch-lane-h > .ch-lane-rh { grid-column: 4; grid-row: 2; }
  .ch-lane-h > .ch-lane-ey { grid-column: 5; grid-row: 2; }
  .ch-lane-h .ch-lane-ph:empty { display: none; }   /* 「Paragraph」 글자는 걷었다 — 폰 머리 줄 첫 줄째 없앤다 */
  .ch-race-view.is-solo .ch-lane-h > .ch-lane-ey { grid-column: 4; }
}
/* 혼자 — 내 레인 하나, Rank 열 없음(2026-10-13 사용자) */
.ch-race-view.is-solo .ch-lane { grid-template-columns: minmax(6.5em, 9em) minmax(var(--trk-min), 1fr) var(--q-w, 5.4em) 22px; }
@media (max-width: 600px) { .ch-race-view.is-solo .ch-lane { grid-template-columns: 2.2em minmax(var(--trk-min), 1fr) var(--q-w, 4.4em) 20px; } }
/* 넘침 ② — 이름을 트랙 위 줄로(트랙이 이름 폭만큼 넓어진다). 머리 줄은 「Paragraph」가 A B 위 */
.ch-race-view.is-stack .ch-lane { grid-template-columns: minmax(var(--trk-min), 1fr) var(--q-w, 4.4em) 2.2em 20px; row-gap: 2px; }
.ch-race-view.is-stack.is-solo .ch-lane { grid-template-columns: minmax(var(--trk-min), 1fr) var(--q-w, 4.4em) 20px; }
.ch-race-view.is-stack .ch-lane > .ch-lane-ey { grid-column: -2; grid-row: 2; }
.ch-race-view.is-stack .ch-lane > .ch-lane-nm { grid-column: 1 / -1; grid-row: 1; }
.ch-race-view.is-stack .ch-lane > .ch-lane-trk { grid-column: 1; grid-row: 2; }
.ch-race-view.is-stack .ch-lane > .ch-lane-tg { grid-column: 2; grid-row: 2; }
.ch-race-view.is-stack .ch-lane > .ch-lane-md, .ch-race-view.is-stack .ch-lane > .ch-lane-rh { grid-column: 3; grid-row: 2; }
.ch-race-view.is-stack .ch-lane-h > .ch-lane-ph { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
.ch-race-view.is-stack .ch-lane.is-join > .ch-lane-tg { grid-column: 1 / -1; }
.ch-race-view.is-stack .ch-lane-nm b { display: inline; }   /* 이름 줄이 한가득이라 폰에서도 이름을 쓴다 */
/* 넘침 ③ — 칸 동그라미를 열 폭 막대의 마디로(✔ 초록 · ✘ 회색 · 답함 보라는 그대로, 글자 없이) */
.ch-race-view.is-bar .ch-lane:not(.ch-lane-h) .ch-lane-tg { display: flex; gap: 1px; }
.ch-race-view.is-bar .ch-gate { flex: 1 1 0; min-width: 0; width: auto; height: 10px; border-radius: 2px; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); font-size: 0; }   /* 테두리 대신 안쪽 선 — 마디 수만큼 폭을 먹지 않게 */
.ch-race-view.is-bar .ch-gate.is-ans, .ch-race-view.is-bar .ch-gate.is-hit, .ch-race-view.is-bar .ch-gate.is-miss { box-shadow: none; }
/* 읽는 띠 — 한 레인 아래 한가득, 작은 고정폭 글이 오른쪽에서 왼쪽으로 흐르고 시선 점(흐린 원)이 글에 붙어 뛴다(2026-10-13, challenge-race.js) */
.ch-strip-in { position: absolute; left: 0; top: 0; bottom: 2px; white-space: pre; will-change: transform; transition: opacity .3s; }
.ch-lane-trk.is-done .ch-strip-in { opacity: .35; }
.ch-strip-tx { font: 500 9px/28px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgba(255,255,255,.55); }
.ch-strip-nl { position: absolute; top: 5px; bottom: 5px; width: 1px; left: calc(var(--n) * var(--cw, 0px) - var(--cw, 0px) / 2); background: rgba(255,255,255,.28); }   /* 줄이 바뀌는 자리 */
.ch-strip-fx { position: absolute; left: 0; right: 0; top: 0; height: 30px; pointer-events: none; }   /* 높이 = 트랙 칸 — 점의 세로 자리(JS)는 이 높이 안 */
.ch-strip-dot { position: absolute; box-sizing: border-box; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(196,178,255,.28); border: 1px solid rgba(196,178,255,.8); }   /* 시선 색은 가이드 셋 안 — 멈춤 · 건너뜀 연보라, 되돌아봄 회색(2026-10-14) */
.ch-strip-dot.is-now { background: rgba(196,178,255,.55); border-color: #c4b2ff; }
.ch-strip-dot.is-reg { background: rgba(163,168,184,.3); border-color: #a3a8b8; }   /* 되돌아봄 — 중립 회색 */
.ch-strip-sc { position: absolute; height: 1px; transform-origin: 0 50%; background: #c4b2ff; }
.ch-strip-sc.is-reg { background: #a3a8b8; }
/* 메달 빵빠레(2026-10-13) — 레인을 가로지르는 메달 색 반짝임 · 1위 리본 */
.ch-lane { position: relative; }
.ch-lane.is-shine::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: ch-shine .9s ease-out forwards;
  background: var(--shine, rgba(255,211,107,.55)); }   /* 단색 번쩍임(2026-10-14 — 그라데이션은 걷었다) */
.ch-lane[data-medal="2"] { --shine: rgba(220,226,240,.5); }
.ch-lane[data-medal="3"] { --shine: rgba(214,150,96,.5); }
@keyframes ch-shine { from { opacity: .9; } to { opacity: 0; } }
.ch-race-stage { position: relative; }
.ch-streamers { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: 4; }
.ch-streamers i { position: absolute; top: -8px; width: 6px; height: 14px; border-radius: 2px; opacity: 0; animation: ch-fall 1.5s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes ch-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(240px) rotate(var(--r, 180deg)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ch-gate, .ch-lane-medal, .ch-lane-stage, .ch-qh-n { animation: none !important; } .ch-burst, .ch-streamers, .ch-lane.is-shine::after, .ch-ans-ring, .ch-ans-fly { display: none; } }
[hidden].ch-race-view, .ch-race-detail[hidden] { display: none !important; }
.ch-lane.is-join .ch-lane-trk { display: none; }
.ch-lane.is-join .ch-lane-tg { grid-column: 2 / -1; justify-content: flex-end; }
.ch-lane.is-join .ch-inv-go { padding: 7px 14px; font-size: .88rem; min-height: 0; }
.ch-lane.is-join .ch-lane-nm b { display: inline; overflow: visible; }

/* 범례 한 줄 · 첫 재생 자막 · Eyes 탭 · 보드의 ▶(2026-10-12) */
.ch-race-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 14px; font-size: .75rem; color: rgba(255,255,255,.75); }
.ch-race-legend b { color: #fff; }
.ch-race-legend i { font-style: normal; margin-right: 4px; }
.ch-lg-pause { display: inline-flex; align-items: center; gap: 2px; vertical-align: -1px; }
.ch-lg-pause > i { display: block; margin: 0 !important; border-radius: 50%; box-sizing: border-box; background: rgba(196,178,255,.4); border: 1px solid #c4b2ff; }
.ch-lg-pause > i:first-child { width: 7px; height: 7px; }
.ch-lg-pause > i:last-child { width: 12px; height: 12px; }
.ch-lg-jump { display: inline-block; width: 16px; height: 1px; background: #c4b2ff; vertical-align: 3px; }
.ch-lg-back { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; background: rgba(163,168,184,.3); border: 1px solid #a3a8b8; vertical-align: -1px; }
.ch-lg-prog { display: inline-block; width: 18px; height: 2px; background: #b096ff; vertical-align: 3px; }
/* How it works — 범례 줄 끝의 「ⓘ How it works」 글자(상자 · 알약 없이 — 이 판에서 둥근 것은 모두 단추라서, 2026-10-15) */
.ch-race-help { display: inline-flex; align-items: center; gap: 5px; color: #d6c8ff; font-size: .75rem; font-weight: 600; text-decoration: none; }
.ch-race-help:hover { color: #fff; text-decoration: underline; }
.ch-race-help svg { width: 14px; height: 14px; flex: none; }
.ch-race-stage { position: relative; }
/* 설명 상자(2026-10-15 사용자 「노란 알약이 버튼처럼 보인다 → 각진 텍스트 상자 · 화면 크기에 맞게」) — 레인 위, 폭 = 글 띠(JS 가 left · width),
   왼쪽 노란 띠 · 거의 각진 모서리 · 그림자, 꼬리(--ax)가 그 단계가 말하는 칸을 가리킨다 */
.ch-race-cap { position: absolute; z-index: 6; left: 0; width: 100%; top: -10px; transform: translateY(-100%); box-sizing: border-box; margin: 0; padding: 9px 14px 10px 12px;
  border-radius: 3px; border-left: 5px solid #f2b632; background: #fffaf0; color: var(--navy, #07015a); text-align: left; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.ch-race-cap::after { content: ''; position: absolute; bottom: -8px; left: var(--ax, 40px); margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fffaf0; }
.ch-race-cap-h { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 2px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6a10; }
.ch-race-cap-h span { letter-spacing: 0; text-transform: none; font-weight: 600; color: #6b6890; white-space: nowrap; }
.ch-race-cap-t { margin: 0; font-size: .9rem; font-weight: 500; line-height: 1.45; }
/* 처음 막 — 레인 칸만 흐리게 덮고 가운데 큰 원 ▶ Play(2026-10-15 사용자 → 「추천대로」: 레인에만 · 한 번 재생하면 걷음) */
.ch-race-cover { position: absolute; inset: -4px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0; border: 0; border-radius: 14px;
  background: rgba(11, 6, 89, .38); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font: 700 1.05rem/1 Inter, sans-serif; cursor: pointer; }
.ch-race-big { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; color: #2a0f9e; box-shadow: 0 8px 26px rgba(0, 0, 0, .4); transition: transform .15s; }
.ch-race-big svg { width: 38px; height: 38px; margin-left: 5px; }
.ch-race-cover:hover .ch-race-big { transform: scale(1.06); }
.ch-race-stage:has(> .ch-race-cover) .ch-lanes { min-height: 128px; }   /* 레인 하나(혼자)여도 큰 원이 들어가게 — 막을 걷으면 원래 높이 */
.ch-eyes-chips { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 12px 0 18px; }
.ch-eyes-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: .8rem; cursor: pointer; }
.ch-eyes-chip .ch-face { width: 22px; height: 22px; }
.ch-eyes-chip.is-on { background: #fff; color: var(--navy, #07015a); }
.ch-eye-btn { border: 0; width: 26px; height: 26px; border-radius: 50%; background: #6012f3; color: #fff; font-size: .7rem; line-height: 1; cursor: pointer; }
.ch-eye-btn:hover { background: #4a0dc0; }
.ch-v2 .ch-board li.is-watch { outline: 2px solid #6012f3; outline-offset: -2px; }
@media (max-width: 600px) { .ch-race-legend { font-size: .7rem; gap: 2px 10px; } .ch-race-cap-t { font-size: .84rem; } .ch-race-big { width: 72px; height: 72px; } .ch-race-big svg { width: 32px; height: 32px; } }

/* 그림 궤도(js/challenge-shape.js, 2026-10-13) — Gaze path 탭 얼굴 칩 아래, 고른 사람의 읽기를 주제 모양 위 한 붓 그리기로 */
.ch-shape { margin: 0 0 18px; }
.ch-shape-box { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto; border-radius: 18px; background: rgba(255,255,255,.04); }
.ch-shape-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 시선 퍼즐 플레이어(2026-10-20, js/challenge-shape.js _chPuzzleMount) — 그림 아래 문단 표시 줄 · 3줄 글 창(왼쪽 글 창과 같은 꼴) · 재생기 */
.ch-pz .ch-shape-box { width: 100%; max-width: 340px; margin: 0 auto; }   /* 크면 보기 어렵다(2026-10-20 사용자 「너무 커서 보기 어려움 — 작게」) — 글 창 · 재생기는 칸 폭 */
.ch-pz.ch-film .ch-shape-box { width: 100%; max-width: none; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0e1022; }   /* 문장 컷 — 영상 꼴(16:9), 폭은 글 창 · 재생기와 같게(2026-10-20 사용자 「비디오 가로 크기와 지문폭, 플레이어 디스플레이 폭을 맞춰라」) */
.ch-pz-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.ch-pz-dot { width: 40px; height: 40px; padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: #2a2160; cursor: pointer; }
.ch-pz-dot img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) grayscale(1) brightness(.45); }   /* 안 마친 문단은 알아보기 어렵게 */
.ch-pz-dot.is-done img { filter: none; }
.ch-pz-dot.is-on { border-color: #ffd36b; }
.ch-pz-text.rp-gp-box { margin-top: 10px; padding: 12px 16px; overflow: hidden; }
.ch-pz-svg.rp-gp-svg { overflow: hidden; }   /* 3줄만 — 그림판 밖 줄은 자른다(공용 .rp-gp-svg 는 overflow: visible) */
.ch-pz-svg.is-nogaze .rp-gp-c, .ch-pz-svg.is-nogaze .rp-gp-a, .ch-pz-svg.is-nogaze .rp-gp-cur { display: none; }   /* 시선 표시 스위치를 끄면 글만 */
.ch-pz-ctl .iem-bsw .iem-blab { color: rgba(255,255,255,.72); }   /* 어두운 경주 칸 위 — 스위치 글자 · 꺼진 바탕(공용은 밝은 바탕용이라 묻혔다) */
.ch-pz-ctl .iem-bsw .iem-sw-track { background: rgba(255,255,255,.28); }
.ch-pz-ctl .iem-bsw.is-on .iem-blab { color: #fff; }
.ch-pz-ctl .iem-bsw.is-on .iem-sw-track { background: var(--accent, #6012f3); }
.ch-shape-ctl { width: min(100%, 560px); margin: 10px auto 0; }
/* 내 시선 카드 옆 한붓그리기(2026-10-19 사용자 「시선패턴 플레이 옆에 병렬로」, challenge-race.js _chEyesDraw is-shape) — 왼쪽 시선 재생이 주인공,
   오른쪽 정사각형(한 변은 JS 가 시선 그림판 높이로). 폰(600px 아래)은 .ch-gp-row 한 칸 규칙 그대로 아래로 쌓인다. 제목 · 제 단추 없음(시계는 시선 재생기 하나) */
.ch-gp-row.is-one.is-shape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: stretch; align-items: center; gap: 20px; }
.ch-gp-row.is-shape > .ch-shape { margin: 0; }
@media (max-width: 600px) { .ch-gp-row.is-one.is-shape { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* 폰 폭 보드(2026-10-13 사용자 TOPIK 챌린지 — 경주가 없는 판에서 옛 보드가 드러나 이름이 「C..」, 머리 글이 두 줄로 쪼개졌다) — 열을 좁히고 머리 글은 한 줄 */
@media (max-width: 520px) {   /* 얼굴은 빼고(이름 칸에 자리를) · 열은 px(em 이면 글자가 작은 머리 줄의 열이 더 좁아져 어긋난다) */
  .ch-v2 { --ch-cols: 28px minmax(0, 1fr) 54px 42px 26px; }
  /* ▶ 가 하나도 없는 보드(경주가 없는 판 — 그림뿐인 지문)는 그 빈 칸도 이름에 */
  .ch-v2 .ch-board:not(:has(.ch-eye-btn, .ch-vault)) { --ch-cols: 28px minmax(0, 1fr) 54px 42px; }
  .ch-v2 .ch-board:not(:has(.ch-eye-btn, .ch-vault)) .ch-eye, .ch-v2 .ch-board:not(:has(.ch-eye-btn, .ch-vault)) li.ch-bh > span:nth-child(6) { display: none; }
  .ch-v2 .ch-board li { gap: 6px; padding-left: 8px; padding-right: 6px; }
  .ch-v2 .ch-board .ch-face, .ch-v2 .ch-board li.ch-bh > span:nth-child(2) { display: none; }
  .ch-v2 .ch-board li.ch-bh { font-size: .62rem; letter-spacing: 0; }
  .ch-v2 .ch-board li.ch-bh > span { white-space: nowrap; overflow: hidden; }
}

/* 그릴 수 없는 시선 판(값이 굳어 건너뜀 없음, 2026-10-13) — 빈 그림판 대신 잰 숫자 한 줄 */
.ch-gp-still { margin: 8px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .88); font-size: .9rem; line-height: 1.5; }

/* 그림 지문의 Gaze path(2026-10-13) — 포스터 · 그래프 위에 그 사람의 그림 안 점 */
.ch-pic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.ch-pic { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #fff; }
.ch-pic img { display: block; width: 100%; height: auto; }
.ch-pic svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ch-pic polyline { fill: none; stroke: rgba(96, 18, 243, .75); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ch-pic i { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(96, 18, 243, .25); border: 1.5px solid rgba(96, 18, 243, .85); pointer-events: none; }
.ch-pic-tag { margin: 6px 0 0; text-align: right; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

/* 끝 화면 먼저 · 「Watch the race」(2026-10-13) — 레인 위 넓은 알약 단추 · 새 참가자 표 */
/* 2026-10-14 재생기 하나 — 레인 위 줄의 ▶ 가 끝 화면에서는 「Watch the race」 알약(옛 큰 단추를 합침) */
/* 2026-10-15 재생 줄은 레인 아래 맨 끝(동영상 재생기 자리) — 가는 선으로 레인과 나눈다 */
.ch-race-view > .ch-race-ctl { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
/* 다시 보기 = 꽉 찬 흰 단추(2026-10-14 「다시 보기가 가장 커야」) — 「▶ Play」 · 「↻ Replay」 · 도는 동안 ❚❚ 가 같은 폭(되감기 막대가 흔들리지 않게) */
.ch-race-view > .ch-race-ctl .ch-race-play { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 132px; height: 42px; padding: 0 20px;
  border-radius: 999px; color: #2a0f9e; font: 700 .98rem/1 Inter, sans-serif; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.ch-race-view > .ch-race-ctl .ch-race-play:hover { background: #f1ebff; }
.ch-race-play svg { width: 18px; height: 18px; flex: none; }
/* 배속 — 노트북은 넷(x1 x2 x3 x4, 누른 것이 흰 칸), 폰은 칩 하나(누를 때마다 다음, 아래 @media) */
.ch-race-spds { display: inline-flex; gap: 6px; flex: none; }
.ch-race-spds button { min-width: 42px; height: 36px; padding: 0 8px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 8px; background: transparent; color: #fff; font: 700 .85rem/1 Inter, sans-serif; cursor: pointer; }
.ch-race-spds button:hover { background: rgba(255, 255, 255, .1); }
.ch-race-spds button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--navy, #07015a); }
.ch-race-view > .ch-race-ctl .ch-race-spd { display: none; }
@media (max-width: 600px) { .ch-race-view > .ch-race-ctl .ch-race-spd { display: inline-block; } .ch-race-spds { display: none; } }
.ch-lane-eye svg { width: 17px; height: 17px; }
/* 빈자리 레인 「Who's next?」 — 누르면 Who can beat you? 공유 창(2026-10-15) */
.ch-lane.is-spot { cursor: pointer; }
.ch-lane.is-spot:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .5); }
/* 빈자리 레인의 Invite — 테두리 칩(32px), 한 줄 점선 레인(폰도 한 줄) */
.ch-lane.is-spot .ch-lane-tg { justify-content: flex-end; }
@media (max-width: 600px) { .ch-lane.is-join.is-spot { flex-direction: row; align-items: center; justify-content: space-between; } .ch-lane.is-spot .ch-lane-trk, .ch-lane.is-spot > span:last-child { display: none; } }
/* 초대 카드(Challenge your friends)의 Invite — 꽉 찬 보라 → 테두리 44px(노트북은 왼쪽 280px, 폰은 한 줄) */

/* 폰 경주(2026-10-14 사용자 「보라색 판의 양쪽 마진을 없애라 · 레인 가로폭을 넓혀라 · 플레이버튼 위치 재고」) ──
   ① 판을 화면 양 끝까지(챌린지 틀의 안쪽 여백을 걷고 판이 앱 틀 여백을 덮는다), 판 안쪽 여백도 줄인다.
   ② 레인 두 줄 — 고르는 것은 challenge-race.js _chRaceFit(--two 를 읽어 is-two). 띠가 레인 한 줄 가득이 되어 약 세 배 넓어지고 글자도 키운다.
   ③ 재생기는 레인 아래로 내려 아래 메뉴 바로 위에 붙는다(경주 판이 보이는 동안 엄지가 닿게 — 스크롤 틀 #ieltsScreen 의 아래 = 메뉴 위). */
@media (max-width: 600px) {
  .ch-race-view { --two: 1; }
  .ch-race.ch-path { margin-left: -16px; margin-right: -16px; padding: 14px 12px; border-radius: 0; }
  .ch-race-view[data-race-view="race"] { display: flex; flex-direction: column; }
  .ch-race-view > .ch-race-ctl { order: 5; position: sticky; bottom: 0; z-index: 4; flex-wrap: wrap; row-gap: 6px; margin: 6px -12px 0; padding: 8px 12px 10px;
    background: var(--navy, #07015a); box-shadow: 0 -8px 16px rgba(0, 0, 0, .3); }
  .ch-race-view > .ch-race-ctl .ch-race-seek { order: -1; flex: 1 0 100%; height: 14px; margin: 0; }
  .ch-race-view > .ch-race-ctl .ch-race-play { flex: 1; min-width: 0; height: 52px; font-size: 1.05rem; }
  .ch-race-view > .ch-race-ctl .ch-race-spd { height: 52px; min-width: 60px; }
}
.ch-race-view.is-two .ch-lane-h { display: none; }
.ch-race-view.is-two .ch-lane:not(.is-join) { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "nm tg md ey" "trk trk trk trk"; gap: 8px; padding: 10px; }
.ch-race-view.is-two.is-solo .ch-lane:not(.is-join) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nm tg ey" "trk trk trk"; }
.ch-race-view.is-two .ch-lane > .ch-lane-nm { grid-area: nm; }
.ch-race-view.is-two .ch-lane > .ch-lane-trk { grid-area: trk; height: 38px; }
.ch-race-view.is-two .ch-lane > .ch-lane-tg { grid-area: tg; }
.ch-race-view.is-two .ch-lane > .ch-lane-md { grid-area: md; width: 2em; height: 26px; }
.ch-race-view.is-two .ch-lane > .ch-lane-ey { grid-area: ey; }
.ch-race-view.is-two .ch-lane-nm b { display: inline; }
.ch-race-view.is-two .ch-strip-tx { font-size: 11px; line-height: 36px; }
.ch-race-view.is-two .ch-strip-fx { height: 38px; }
.ch-race-view.is-two .ch-strip-p { top: 4px; font-size: 9px; line-height: 13px; }
.ch-race-view.is-two .ch-lane-eye { width: 26px; height: 26px; }
.ch-race-view.is-two.is-bar .ch-lane:not(.ch-lane-h) .ch-lane-tg { width: var(--q-w); }

/* 혼자 푼 판 · 노트북(2026-10-14 사용자 「시선플레이와 고슴도치 화면이 옆으로 나란히」) — 탭 없이 경주 레인 아래에 시선 칸(challenge-race.js is-duo).
   두 칸(시선 재생 | 한붓그리기)은 이제 .ch-gp-row.is-shape 가 맡는다(2026-10-19 — 여럿 판에서 내 칩을 고를 때도 같은 두 칸) */
@media (min-width: 900px) { .ch-race { --duo: 1; } }
.ch-race.is-duo .ch-race-tabs, .ch-race.is-duo .ch-eyes-chips, .ch-race.is-duo .ch-eyes-foot { display: none; }
.ch-race.is-duo [data-race-view="eyes"] { margin-top: 18px; }
.ch-new { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: #ffd36b; color: #3a2400; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.ch-lane-nm .ch-new { display: inline; }   /* 폰 레인은 작은 표를 숨기지만(You 만) 새 참가자 표는 보인다 */

/* ── 오늘의 챌린지(2026-10-14) — 결과 맨 아래 IELTS 한 줄 · 가입 창 · 공유 창 점수 체크(고르는 화면 · 앱 홈 첫 칸은 같은 날 걷음) ── */
.ch-next-exam { margin: 14px 0 0; text-align: center; }
.ch-sign-dlg .ui-dlg-box { max-width: 380px; display: flex; flex-direction: column; gap: 10px; }
.ch-sign-dlg .ch-sign-g { min-height: 48px; }
.ch-sign-dlg .ch-sign-o { align-self: center; }
.ch-show-score { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .9rem; cursor: pointer; }
.ch-share-dlg .is-ready { display: flex; flex-direction: column; gap: 10px; }

/* 챌린지 판의 카메라 안내(2026-10-14 사용자 「거리 · 조명 · 위치 생략 · 확인 표시를 체크로 확실하게」) — boot.js is-one · _wuChecks */
#warmupScreen.is-one .wu-tips { display: none; }
.wu-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; min-height: 0; }
.wu-ck { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #eef0f5; color: #6b7287; font: 700 .95rem Inter, sans-serif; }
.wu-ck b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #c6cbd8; color: #fff; font-size: .85rem; }
.wu-ck.is-on { background: #e3f7ea; color: #137a3a; }
.wu-ck.is-on b { background: #1fa855; border-color: #1fa855; }
.wu-checks small { flex-basis: 100%; text-align: center; font-weight: 600; color: var(--text-dim, #6b7287); }

/* ── Challenge 메뉴(2026-10-14, challenge-tab.js) — LIVE NOW 로비 · START NEW · RECENT · 배지 · 원정 한 줄 ── */
.cht { padding-bottom: 32px; }
/* 머리 줄은 메뉴 공통 .rt-mh(style.css, 화면 표준 S8) */
.cht-start { min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--accent, #6012f3); color: #fff; font: 600 1rem Inter, sans-serif; cursor: pointer; white-space: nowrap; }   /* 주 단추 — 가이드 5절(48 · 12 · 600, 화면 표준 S5) */
.cht-sec { margin: 0 0 22px; }
.cht-sec h2 { margin: 0 0 10px; font-size: var(--t2); color: var(--navy, #07015a); }   /* T2 구역 이름 — 대문자 아님(S9) */
.cht-sec h2 small { margin-left: 6px; font-size: var(--fs-body); color: var(--muted, #56627a); font-weight: 600; }
.cht-sec-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; }
.cht-sec-h h2 { margin: 0; }
.cht-count { font-size: var(--fs-body); color: var(--muted, #56627a); font-weight: 600; }
/* 걸러내기 한 줄(2026-10-14) — 검색 · 시험 · 난이도 · 종목. 폰은 검색 한 줄 + 선택 셋 한 줄(같은 폭). 정렬은 머리 줄 오른쪽.
   화살표는 작은 그림으로(브라우저 기본 화살표가 폰에서 글자 자리를 먹어 「All exa」로 잘렸다 — 사용자 폰) */
.cht-bar { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 8px; align-items: center; }
.cht-bar input { min-width: 0; box-sizing: border-box; min-height: 42px; padding: 0 14px; border: 1px solid #d9dbe4; border-radius: 12px; font: inherit; background: #fff; }
.cht-sel { -webkit-appearance: none; appearance: none; min-height: 42px; min-width: 0; max-width: 170px; padding: 0 26px 0 12px; border: 1px solid #d9dbe4; border-radius: 12px;
  font: inherit; font-size: .9rem; color: inherit; cursor: pointer; text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7287' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; }
.cht-sel.is-on { border-color: var(--accent, #6012f3); color: var(--accent, #6012f3); font-weight: 700; }
.cht-sec-h .cht-sel { margin-left: auto; min-height: 34px; padding-left: 10px; font-size: .85rem; }
@media (max-width: 600px) {
  .cht-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cht-bar input { grid-column: 1 / -1; }
  .cht-bar .cht-sel { max-width: none; width: 100%; min-height: 40px; padding: 0 22px 0 10px; background-position: right 8px center; }
}
.cht-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
/* 카드 네 줄(2026-10-14) — 줄마다 왼쪽 · 오른쪽. 내 판은 왼쪽 굵은 보라 줄 + 보라 테두리 */
.cht-card-btn { width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; border: 1px solid #e3e0f0; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.cht-card-btn:hover { border-color: var(--accent, #6012f3); }
.cht-card.is-today .cht-card-btn { background: #f6f2ff; }
.cht-card.is-mine .cht-card-btn { border: 2px solid var(--accent, #6012f3); box-shadow: inset 5px 0 0 var(--accent, #6012f3); padding-left: 17px; }
.cht-r { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.cht-who { font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-left, .cht-tags { color: var(--muted, #56627a); font-size: .82rem; white-space: nowrap; }
.cht-tags { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cht-ppl { display: inline-flex; align-items: center; gap: 3px; color: var(--muted, #56627a); font-size: .82rem; font-variant-numeric: tabular-nums; flex: none; }
.cht-ppl-ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cht-title { display: block; font-size: .88rem; color: #3b3a55; min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-title.cht-days { display: flex; align-items: center; gap: 8px; }   /* 7일 판 — 날 글 + 점(말줄임이 필요 없는 줄) */
.cht-dots { display: inline-flex; gap: 4px; }
.cht-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #c6bff0; }
.cht-dots i.is-done { background: var(--accent, #6012f3); border-color: var(--accent, #6012f3); }
.cht-dots i.is-today { border-color: var(--accent, #6012f3); }
.cht-line { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }   /* 줄바꿈 — 말줄임으로 잘리던 것(2026-10-18 QA) */
.cht-go { flex: none; font-weight: 700; color: var(--accent, #6012f3); white-space: nowrap; }
.cht-last { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; color: var(--muted, #56627a); font-size: 13px; }   /* 막 끝난 공개 판(2026-10-15) */
.cht-live-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.cht-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.cht-new-btn { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 14px; border-radius: 14px; border: 1px dashed #c9c2e8; background: #fbfaff; cursor: pointer; font: inherit; }
.cht-new-btn small { color: var(--muted, #56627a); }
.cht-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cht-recent button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: 8px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid #e3e0f0; background: #fff; cursor: pointer; font: inherit; }
.cht-recent small { color: var(--muted, #56627a); }
.cht-row p { margin: 0 0 6px; }
.cht-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.cht-badges .exp-badge { width: 92px; margin: 0; text-align: center; opacity: .45; }
.cht-badges .exp-badge.is-earned { opacity: 1; }
.cht-badges img { width: 56px; height: 56px; }
.cht-badges figcaption { font-size: .75rem; }
.cht-guest { margin: 0 0 18px; }
@media (max-width: 600px) { .cht-sort { margin-left: 0; } }

/* 머리 띠 세 줄(2026-10-14 — 캐릭터 · 말풍선 · ROUND 칸을 걷고 낮게): ① 무슨 판(작은 줄) ② 제목 ③ 넘어야 할 기준(노랑) */

/* 이름 한 줄(2026-10-14) — 참가한 뒤 이름이 없을 때 보드 아래 · 내 줄을 누르면 */
.ch-name { margin: 10px 0 0; padding: 12px; border-radius: 14px; background: #f6f2ff; border: 1px solid #e3d9ff; display: flex; flex-direction: column; gap: 8px; }
.ch-name label { font-weight: 700; color: #18213a; }
.ch-name-in { display: flex; gap: 8px; }
.ch-name-in input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid #d9dbe4; border-radius: 10px; font: inherit; background: #fff; }
.ch-name-in .ie-btn { flex: none; min-height: 42px; }
.ch-name .ch-msg:empty { display: none; }
.ch-share-dlg .ch-name { margin: 0 0 10px; }
#ieltsScreen .ch-board li.is-me { cursor: pointer; }

/* 챌린지로 끝난 판의 리포트 — 맨 위 한 줄 「‹ Back to the challenge · From a challenge · 제목」(2026-10-14 사용자 「Your Reading Report 가 헷갈린다」 → 「추천대로」) */
.ch-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; background: #f3eeff; color: #56627a; font-size: .9rem; }
.ch-from .xr-link { font-weight: 700; }
/* 끝 화면을 못 세웠을 때 — 까닭 · 다시 · 리포트 */
.ch-endfail { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 24px; }

/* ── 세 종류 한 틀(2026-10-14 사용자 「세 챌린지 화면 UI UX 를 통일」 → 「추천대로」 · 5번 A안) ──
   머리 = 흰 카드: ‹ · 회색 줄 · 남색 제목 · 한 줄 · 보라 주 단추 하나(흐름 속 — 아래 메뉴와 겹치지 않고 폰 첫 화면에) · 회색 줄 · 글자 링크.
   보라는 주 단추 · 내 줄 · 활성 탭에만. 어두운 칸은 다시 보기(Reading Round · Quiz replay) 하나. */
.ch-head { position: relative; padding: 18px 20px 20px 64px; }
.ch-head-back { position: absolute; left: 10px; top: 10px; }
.ch-head-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-head .ch-kind { margin: 0; font-size: .85rem; font-weight: 600; color: var(--muted, #56627a); text-transform: none; letter-spacing: 0; }
#ieltsScreen .ch-head .ch-h1 { margin: 0; color: #18213a; font-size: var(--t1); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ch-head .ch-sub { margin: 0; color: #18213a; font-weight: 600; font-size: clamp(1rem, 3.8vw, 1.15rem); font-variant-numeric: tabular-nums; }
.ch-go { align-self: flex-start; min-width: min(100%, 320px); min-height: 48px; margin-top: 8px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--accent, #6012f3); color: #fff;
  font: 600 1rem Inter, sans-serif; cursor: pointer; }   /* 주 단추 — 가이드 5절(48 · 12 · 600) */
.ch-go:hover { background: #5210d6; }
.ch-head-note { margin: 0; font-size: .875rem; color: var(--muted, #56627a); }
.ch-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 2px 0 0; }
.ch-links .xr-link { font-weight: 700; }
.ch-links .ch-review[hidden] { display: none; }
/* 폰 — 카드는 옆 여백 16 안에 둥근 모서리 그대로(끝까지 닿는 것은 다시 보기 판 하나, 화면 표준 S1) */
@media (max-width: 600px) { .ch-head { padding: 14px 16px 16px 54px; } .ch-head-back { left: 4px; } .ch-go { align-self: stretch; min-width: 0; }
  .ch-roundbox, .ch-how, .ch-res-card { padding: 16px; } }
/* How it works — 안 푼 사람의 받는 화면(퀴즈 브리핑을 합침) */
.ch-how { padding: 20px; }
#ieltsScreen .ch-how h2 { margin: 0 0 4px; font-size: var(--t2); font-weight: 700; color: #18213a; }
.ch-how-case { margin: 0 0 4px; font-size: .875rem; color: var(--muted, #56627a); }
.ch-how-steps { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 8px; }
.ch-how-steps li { display: flex; gap: 12px; align-items: center; }
.ch-how-steps b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ebe3ff; color: var(--accent, #6012f3); font: 700 .9rem/1 Inter, sans-serif; }
.ch-how-steps strong { display: block; font-weight: 700; color: #18213a; }
.ch-how-steps small { display: block; margin-top: 2px; color: var(--muted, #56627a); font-size: .85rem; }
.ch-how-rule { margin: 4px 0 0; font-size: .85rem; color: var(--muted, #56627a); }
/* 보드 이름 — 세 종류 같은 「Leaderboard」(대문자 작은 머리, 퀴즈 판과 같은 꼴) */
#ieltsScreen .ch-roundbox h2 { margin: 0; font: 700 var(--t2)/1.3 Inter, sans-serif; color: var(--navy, #07015a); }   /* 보드 이름 = 카드 제목 T2(S9 — 라벨은 카드 제목 대신 쓰지 않음) */   /* 칸 이름 = 짧은 분류 라벨(가이드 3절 12px · 600 · 0.12em) */
/* 다시 보기의 시선 경로(Eye path 탭) — 되돌아봄은 회색(앱 기본 빨강을 덮는다 — 되돌아봄을 나쁘게 그리지 않는다) */
.ch-path .rp-gp-c.is-reg { fill: rgba(163, 168, 184, .28); stroke: #8a91a6; }
.ch-path .rp-gp-a.is-reg { stroke: #8a91a6; }
.ch-path .rp-gp-ah.is-reg { fill: #8a91a6; }
.ch-path .rp-gp-reg { background: rgba(138, 145, 166, .5); }

/* 책 연재의 그날 칸(2026-10-15) — Day N · 제목 · 책 한 줄 · 그날 낱말(뜻 · 🔊) */
.ch-book { padding: 16px 18px; background: var(--card-bg, #fff); border: 1px solid var(--line, #e3e3ea); border-radius: 12px; }
.ch-book-h { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ch-book-h b { font-size: var(--t3); }
.ch-book-h small { color: var(--muted, #56627a); }
.ch-book-k { margin: 12px 0 6px; font: 600 .75rem/1.5 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #56627a); }
.ch-book-words { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ch-book-words li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.ch-book-words li span { flex-basis: 100%; color: var(--muted, #56627a); font-size: .92rem; }
.ch-book-words .wr-spk { width: 30px; height: 30px; font-size: 14px; }

/* 레인 폭 묶기(2026-10-15 사용자 「노트북에서 레인의 텍스트 구간이 너무 길다」) — 글 칸이 지문 한 줄(격자 한 줄 글자 × 잰 글자 폭)을 넘으면
   범례 · 머리 줄 · 레인 · 재생 줄을 그 폭(--lane-max, challenge-race.js capLanes)으로 묶어 가운데에. 폰 두 줄 배치는 묶지 않는다 */
.ch-race-view.is-cap > * { max-width: var(--lane-max); margin-left: auto; margin-right: auto; }

/* Shot by Eye(js/challenge-shot.js — 개발용 시안, 2026-10-21) — 내 눈이 읽은 문장만 영화 장면으로.
   필름 띠: 읽는 동안 지문 칸 맨 아래, 컷 수만큼 칸 · 찍힌 컷은 빛(그림 없음). 결과: 필름 띠가 현상되고 → 챌린지 문장 컷 재생기 그대로(어두운 판 위) */
.shot-strip { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 6px; justify-content: center; margin-top: 16px; padding: 8px 12px; border-radius: 10px; background: rgba(7, 1, 90, .92); pointer-events: none; }   /* 지문 칸 맨 아래(굴려도 남음, 2026-10-22) */
.shot-strip i { flex: 0 1 56px; height: 16px; border-radius: 3px; background: rgba(255, 255, 255, .14); transition: background .5s, box-shadow .5s; }
.shot-strip i.is-on { background: #ffd36b; box-shadow: 0 0 10px rgba(255, 211, 107, .75); }
@media (prefers-reduced-motion: reduce) { .shot-strip i { transition: none; } }
.shot-intro, .shot-head { display: grid; gap: 10px; justify-items: start; margin-bottom: 16px; }
.shot-tags { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5b6170); }
#ieltsScreen .shot-app h1 { margin: 0; text-wrap: balance; }
.shot-lead { margin: 0; max-width: 60ch; line-height: 1.55; }
/* 필름 띠(결과) — 찍힌 칸은 음화에서 그림으로 차례로 현상(--d 만큼 늦게, 길이는 js SHOT_DEV_MS 와 같은 .9s), 안 찍힌 칸은 검은 칸에 번호 */
.shot-roll { justify-self: stretch; width: 100%; max-width: 680px; display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; padding: 10px; border-radius: 12px; background: #05060f; }
.shot-cell { position: relative; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #000; color: rgba(255, 255, 255, .45); font: inherit; font-size: 13px; cursor: pointer; }
.shot-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-cell span { position: absolute; inset: 0; display: grid; place-items: center; }
.shot-cell:focus-visible { outline: 2px solid #ffd36b; outline-offset: 2px; }
.shot-roll.is-dev .shot-cell.is-shot img { animation: shot-dev .9s ease-out var(--d, 0s) both; }
@keyframes shot-dev { from { filter: invert(1) grayscale(1) brightness(.55) contrast(.7); opacity: .25; } to { filter: none; opacity: 1; } }
.shot-res { display: grid; gap: 10px; justify-items: start; opacity: 0; transition: opacity .4s; }
.shot-res.is-in { opacity: 1; }
.shot-big { margin: 0; font-size: 18px; }
.shot-big b { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 4px; }
.shot-big span { color: var(--muted, #5b6170); }
.shot-line { margin: 0; max-width: 60ch; line-height: 1.5; }
/* 재생기 — 챌린지 결과의 문장 컷 재생기(.ch-pz.ch-film) 그대로, 어두운 판 위. 띠 · 재생기 폭은 챌린지 결과 재생기 칸 폭(680) — 화면 폭 전체로 펴면 영상이 너무 크다(2026-10-22 사용자) */
.shot-film { width: 100%; max-width: 680px; box-sizing: border-box; padding: 16px; border-radius: 16px; background: var(--navy, #07015a); color: #fff; margin-bottom: 16px; }
.shot-film .ch-shape { margin: 0; }
.shot-film .rp-gp-time { color: rgba(255, 255, 255, .72); }   /* 어두운 판 위 — 공용은 밝은 바탕용 글자색이라 묻혔다 */
.ch-film-dark { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 8%; background: #000; }   /* 안 찍힌 컷(Shot by Eye) */
.ch-film-dark[hidden] { display: none; }   /* 위 display: grid 가 hidden 을 이기지 않게 */
.ch-film-dark p { margin: 0; color: #fff; font-size: clamp(15px, 2.6vw, 22px); line-height: 1.5; text-align: center; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .shot-res { transition: none; } }
.shot-links { margin: 0 0 24px; }