/* ===================================================================
   카트 그랑프리 시즌 · 개러지 챔피언십 — LMS 스타일
   자기완결(외부 CDN/폰트 0). 챔피언십 골드/블루 + 개러지/피트 테마.
   =================================================================== */
:root{
  --navy:#08152b; --navy2:#0e2244; --navy3:#14315e;
  --panel:#0f2547; --panel2:#12305c;
  --gold:#f6c945; --gold-2:#ffdf80; --gold-deep:#c9971f;
  --blue:#3a7be0; --blue-2:#5fa0ff;
  --red:#e63946; --red2:#ff5566;
  --green:#39d98a; --green-deep:#1f9e63;
  --ink:#eef4ff; --muted:#9fb3d6; --muted2:#6f86ac;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.18);
  --shadow:0 14px 34px rgba(0,0,0,.42);
  --radius:16px;
  --maxw:1240px;
  --font:'Trebuchet MS','Segoe UI',system-ui,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:#08152b}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(58,123,224,.20), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(246,201,69,.10), transparent 55%),
    linear-gradient(180deg,#06101f 0%, #08152b 40%, #0a1a35 100%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* 카본/피트 텍스처 */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
button{font-family:inherit}
a{color:var(--blue-2)}

.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 20px 90px}

/* ---------- Topbar ---------- */
#topbar{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg, rgba(8,18,38,.96), rgba(8,18,38,.80));
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--gold-deep);
  box-shadow:0 6px 22px rgba(0,0,0,.4);
}
.tb-inner{max-width:var(--maxw); margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.tb-brand{display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none}
.tb-badge{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:22px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 4px 14px rgba(246,201,69,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.tb-titles{display:flex; flex-direction:column; line-height:1.15}
.tb-titles b{font-size:16px; letter-spacing:.2px}
.tb-titles span{font-size:11.5px; color:var(--gold-2); font-weight:700; letter-spacing:1.4px; text-transform:uppercase}
.tb-spacer{flex:1}
.tb-stat{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); font-weight:700}
.tb-stat b{color:var(--gold); font-size:15px}
.tb-nav{display:flex; gap:8px}
.tb-nav button{
  border:1px solid var(--line2); background:rgba(255,255,255,.04); color:var(--ink);
  padding:8px 14px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; transition:.15s;
}
.tb-nav button:hover{background:rgba(255,255,255,.10); border-color:var(--gold-deep)}
.tb-nav button.on{background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#241a00; border-color:transparent}
.tb-prog{width:100%; max-width:none; height:6px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:2px}
.tb-prog>i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-2)); border-radius:99px; transition:width .5s}

/* ---------- Hero / Season Home ---------- */
.hero{
  margin-top:24px; padding:28px 30px; border-radius:22px; position:relative; overflow:hidden;
  background:
    radial-gradient(600px 240px at 88% 0%, rgba(58,123,224,.30), transparent 60%),
    linear-gradient(135deg,#10254a, #0c1c3a);
  border:1px solid var(--line2);
  box-shadow:var(--shadow);
}
.hero::after{ /* checkered flag corner */
  content:""; position:absolute; top:-30px; right:-30px; width:180px; height:180px; opacity:.14; transform:rotate(12deg);
  background-image:
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
    linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  background-size:26px 26px; background-position:0 0,13px 13px;
}
.hero .kick{color:var(--gold-2); font-weight:800; letter-spacing:2px; font-size:12.5px; text-transform:uppercase}
.hero h1{margin:8px 0 6px; font-size:30px; line-height:1.12; letter-spacing:-.5px}
.hero p{margin:0; max-width:640px; color:var(--muted); font-size:14.5px}
.hero-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:20px}
.hero-metric{
  background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:14px; padding:12px 16px; min-width:118px;
}
.hero-metric b{display:block; font-size:24px; color:var(--gold); font-weight:800}
.hero-metric span{font-size:12px; color:var(--muted)}
.btn-primary{
  border:0; cursor:pointer; font-weight:800; font-size:14px; letter-spacing:.3px;
  padding:13px 22px; border-radius:12px; color:#241a00;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  box-shadow:0 8px 22px rgba(246,201,69,.32), inset 0 1px 0 rgba(255,255,255,.5); transition:.15s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(246,201,69,.42)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  border:1px solid var(--line2); background:rgba(255,255,255,.05); color:var(--ink); cursor:pointer;
  padding:12px 18px; border-radius:12px; font-weight:700; font-size:13.5px; transition:.15s;
}
.btn-ghost:hover{background:rgba(255,255,255,.1); border-color:var(--gold-deep)}

/* ---------- Section head ---------- */
.sec-head{display:flex; align-items:center; gap:12px; margin:34px 4px 16px}
.sec-head h2{margin:0; font-size:19px; letter-spacing:.2px}
.sec-head .flag{font-size:18px}
.sec-head .rule{flex:1; height:1px; background:linear-gradient(90deg,var(--line2),transparent)}

/* ---------- Standings (round map) ---------- */
.standings{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.round-card{
  position:relative; border-radius:18px; padding:18px; cursor:pointer; overflow:hidden;
  background:linear-gradient(160deg,var(--panel),var(--navy2));
  border:1px solid var(--line); box-shadow:var(--shadow); transition:.18s;
}
.round-card:hover{transform:translateY(-4px); border-color:var(--gold-deep)}
.round-card.locked{cursor:not-allowed; opacity:.62; filter:saturate(.5)}
.round-card.locked:hover{transform:none; border-color:var(--line)}
.round-card.complete{border-color:var(--gold)}
.round-card .rc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.round-num{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-weight:900; font-size:19px;
  background:linear-gradient(135deg,var(--navy3),var(--panel2)); border:1px solid var(--line2); color:var(--gold-2);
}
.round-card.complete .round-num{background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#241a00; border-color:transparent}
.rc-flag{font-size:22px}
.round-card h3{margin:0 0 3px; font-size:15.5px; line-height:1.28}
.round-card .rc-sub{color:var(--muted); font-size:12.5px; margin-bottom:14px; min-height:34px}
.rc-bar{height:7px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden}
.rc-bar>i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--blue-2)); border-radius:99px; transition:width .5s}
.round-card.complete .rc-bar>i{background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.rc-foot{display:flex; align-items:center; justify-content:space-between; margin-top:11px; font-size:12px; color:var(--muted); font-weight:700}
.rc-foot .pts{color:var(--gold)}
.rc-lock{position:absolute; inset:0; display:grid; place-items:center; background:rgba(6,12,24,.35)}
.rc-lock span{font-size:30px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}

/* ---------- Garage preview strip ---------- */
.garage-strip{
  display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:stretch;
}
@media(max-width:760px){ .garage-strip{grid-template-columns:1fr} }
.panel{
  background:linear-gradient(160deg,var(--panel),var(--navy2));
  border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow);
}
.panel h3{margin:0 0 4px; font-size:16px}
.panel .p-sub{color:var(--muted); font-size:12.5px; margin-bottom:14px}
.kart-bay{
  display:grid; place-items:center; padding:14px; border-radius:14px; position:relative;
  background:
    radial-gradient(300px 120px at 50% 100%, rgba(246,201,69,.14), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 60px),
    linear-gradient(180deg,#0a1834,#0c1d3c);
  border:1px solid var(--line);
}
.kart-bay svg{width:100%; max-width:340px; height:auto; display:block}
.kpart{transition:opacity .5s, filter .5s}
.kpart{opacity:.10; filter:grayscale(1)}
.kpart.on{opacity:1; filter:none}
.kpart.fresh{animation:partpop .8s ease}
@keyframes partpop{0%{opacity:0; transform:scale(.6)}60%{transform:scale(1.12)}100%{opacity:1; transform:scale(1)}}

.part-list{display:flex; flex-direction:column; gap:9px}
.part-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.2); border:1px solid var(--line)}
.part-item.on{border-color:var(--gold-deep); background:rgba(246,201,69,.09)}
.part-ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:19px; background:rgba(255,255,255,.05); flex:none}
.part-item.on .part-ic{background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.part-item.off{opacity:.55}
.part-tx b{font-size:13.5px; display:block}
.part-tx span{font-size:11.5px; color:var(--muted)}
.part-item .lockmini{margin-left:auto; font-size:13px; color:var(--muted2)}
.part-item.on .lockmini{color:var(--gold)}

/* ---------- Coach line ---------- */
.coach{
  display:flex; align-items:flex-start; gap:12px; margin:22px 0 6px;
  padding:14px 16px; border-radius:14px;
  background:linear-gradient(120deg, rgba(58,123,224,.16), rgba(58,123,224,.04));
  border:1px solid rgba(95,160,255,.3);
}
.coach .cav{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:19px; background:rgba(0,0,0,.28); border:1px solid var(--line2); flex:none}
.coach .ctx{font-size:13.5px; color:#dbe7ff}
.coach .ctx b{color:var(--gold-2)}
.coach .ctx small{display:block; color:var(--muted); font-weight:600; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; margin-bottom:2px}

/* ---------- Round view ---------- */
.crumb{display:flex; align-items:center; gap:8px; margin-top:22px; font-size:13px; color:var(--muted)}
.crumb button{background:none; border:0; color:var(--blue-2); cursor:pointer; font-weight:700; font-size:13px; padding:0}
.crumb button:hover{text-decoration:underline}
.round-hero{margin-top:14px; padding:22px 24px; border-radius:18px; background:linear-gradient(135deg,#12295180,#0c1c3a); border:1px solid var(--line2); box-shadow:var(--shadow)}
.round-hero .kick{color:var(--gold-2); font-weight:800; letter-spacing:2px; font-size:12px; text-transform:uppercase}
.round-hero h1{margin:6px 0 8px; font-size:24px}
.round-hero p{margin:0; color:var(--muted); font-size:14px; max-width:680px}
.round-hero .rh-bar{margin-top:16px; height:8px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; max-width:420px}
.round-hero .rh-bar>i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-2)); transition:width .5s}
.round-hero .rh-meta{margin-top:8px; font-size:12.5px; color:var(--muted); font-weight:700}

.lap-list{display:flex; flex-direction:column; gap:11px; margin-top:20px}
.lap{
  display:flex; align-items:center; gap:15px; padding:15px 16px; border-radius:14px; cursor:pointer;
  background:linear-gradient(160deg,var(--panel),var(--navy2)); border:1px solid var(--line);
  transition:.15s; position:relative;
}
.lap:hover{transform:translateX(3px); border-color:var(--gold-deep)}
.lap.done{border-left:4px solid var(--gold)}
.lap-no{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center; flex:none; line-height:1;
  background:rgba(255,255,255,.04); border:1px solid var(--line2); text-align:center;
}
.lap-no b{font-size:15px; color:var(--gold-2)}
.lap-no small{display:block; font-size:8.5px; color:var(--muted); letter-spacing:1.5px; margin-top:1px}
.lap.done .lap-no{background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.lap.done .lap-no b, .lap.done .lap-no small{color:#241a00}
.lap-ic{font-size:22px; flex:none; width:30px; text-align:center}
.lap-body{flex:1; min-width:0}
.lap-body .lt{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lap-body .lt b{font-size:14.5px}
.type-tag{font-size:10.5px; font-weight:800; letter-spacing:.5px; padding:2px 8px; border-radius:99px; text-transform:uppercase}
.tag-watch{background:rgba(95,160,255,.18); color:var(--blue-2)}
.tag-quiz{background:rgba(255,150,90,.18); color:#ffb27a}
.tag-follow{background:rgba(57,217,138,.16); color:var(--green)}
.tag-build{background:rgba(246,201,69,.18); color:var(--gold-2)}
.tag-devlog{background:rgba(180,150,255,.18); color:#c3aaff}
.lap-body .ls{font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lap-right{display:flex; align-items:center; gap:12px; flex:none}
.lap-pts{font-size:12px; font-weight:800; color:var(--gold)}
.lap-check{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:14px; border:2px solid var(--line2); color:transparent}
.lap.done .lap-check{background:var(--gold); border-color:var(--gold); color:#241a00}

/* ---------- Mission runner ---------- */
.mrun{margin-top:16px}
.mrun-head{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px;
  background:linear-gradient(135deg,#12295180,#0c1c3a); border:1px solid var(--line2); box-shadow:var(--shadow);
}
.mrun-ic{width:52px; height:52px; border-radius:13px; display:grid; place-items:center; font-size:26px; flex:none; background:rgba(255,255,255,.05); border:1px solid var(--line2)}
.mrun-head .mh-tx{flex:1; min-width:0}
.mrun-head .mh-tx .kick{font-size:11px; color:var(--gold-2); font-weight:800; letter-spacing:1.5px; text-transform:uppercase}
.mrun-head .mh-tx h1{margin:2px 0 0; font-size:20px}
.mrun-lapmeter{text-align:right; flex:none}
.mrun-lapmeter b{font-size:20px; color:var(--gold)}
.mrun-lapmeter span{display:block; font-size:11px; color:var(--muted); letter-spacing:1px}

.card{background:linear-gradient(160deg,var(--panel),var(--navy2)); border:1px solid var(--line); border-radius:16px; padding:22px; margin-top:16px; box-shadow:var(--shadow)}
.card h3{margin:0 0 12px; font-size:17px}

/* watch */
.video-frame{position:relative; border-radius:12px; overflow:hidden; background:#000; border:1px solid var(--line2)}
.video-frame video{width:100%; display:block; max-height:74vh; background:#000}
.vid-missing{padding:40px 20px; text-align:center; color:var(--muted); font-size:13px}
.meta-row{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px}
.chip{font-size:12px; font-weight:700; padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--muted)}
.chip b{color:var(--ink)}
details.transcript{margin-top:14px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.18); overflow:hidden}
details.transcript>summary{cursor:pointer; padding:12px 16px; font-weight:700; font-size:13.5px; list-style:none; color:var(--gold-2); user-select:none}
details.transcript>summary::-webkit-details-marker{display:none}
details.transcript>summary::before{content:"📜 "; }
details.transcript[open]>summary{border-bottom:1px solid var(--line)}
details.transcript .ts-body{padding:14px 18px; color:#d5e0f5; font-size:13.5px; line-height:1.75; white-space:pre-wrap}

/* quiz */
.q-text{font-size:16.5px; font-weight:700; line-height:1.5; margin-bottom:16px}
.choices{display:flex; flex-direction:column; gap:10px}
.choice{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.03); border:1.5px solid var(--line2); color:var(--ink); font-size:14.5px; font-weight:600; transition:.14s; width:100%;
}
.choice:hover{background:rgba(255,255,255,.07); border-color:var(--blue)}
.choice .ck{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:13px; background:rgba(255,255,255,.06); border:1px solid var(--line2); flex:none}
.choice.sel{border-color:var(--gold); background:rgba(246,201,69,.1)}
.choice.sel .ck{background:var(--gold); color:#241a00}
.choice.correct{border-color:var(--green); background:rgba(57,217,138,.14)}
.choice.correct .ck{background:var(--green); color:#062}
.choice.wrong{border-color:var(--red2); background:rgba(255,85,102,.13)}
.choice.wrong .ck{background:var(--red2); color:#fff}
.choice[disabled]{cursor:default}
.explain{margin-top:16px; padding:15px 17px; border-radius:12px; font-size:13.5px; line-height:1.65; border:1px solid}
.explain.ok{background:rgba(57,217,138,.1); border-color:rgba(57,217,138,.4)}
.explain.no{background:rgba(255,85,102,.09); border-color:rgba(255,85,102,.4)}
.explain b{display:block; margin-bottom:4px}
.explain.ok b{color:var(--green)}
.explain.no b{color:var(--red2)}

/* checklist / follow */
.chk-intro{color:var(--muted); font-size:13.5px; margin-bottom:16px}
.chk-list{display:flex; flex-direction:column; gap:9px}
.chk{
  display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--line); transition:.14s; font-size:14px; line-height:1.5;
}
.chk:hover{background:rgba(255,255,255,.06)}
.chk .box{width:24px; height:24px; border-radius:7px; border:2px solid var(--line2); display:grid; place-items:center; flex:none; margin-top:1px; font-size:13px; color:transparent; transition:.14s}
.chk.on{border-color:var(--green-deep); background:rgba(57,217,138,.08)}
.chk.on .box{background:var(--green); border-color:var(--green); color:#062}
.chk .num{color:var(--gold-2); font-weight:800; margin-right:2px}

/* build */
.brief{font-size:14.5px; line-height:1.65; color:#dbe7ff; margin-bottom:8px}
.subhead{font-size:12.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--gold-2); margin:18px 0 9px}
.hint-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.hint-list li{padding:11px 14px 11px 40px; border-radius:11px; background:rgba(0,0,0,.2); border:1px solid var(--line); font-size:13.5px; position:relative; line-height:1.5}
.hint-list li::before{content:"💡"; position:absolute; left:13px; top:11px}
.field-label{font-size:13px; font-weight:700; margin:16px 0 7px; color:var(--ink)}
textarea.note{
  width:100%; min-height:96px; resize:vertical; border-radius:12px; padding:13px 15px; font-family:inherit; font-size:14px; line-height:1.6;
  background:rgba(0,0,0,.28); border:1.5px solid var(--line2); color:var(--ink);
}
textarea.note:focus{outline:none; border-color:var(--gold); background:rgba(0,0,0,.35)}
textarea.note::placeholder{color:var(--muted2)}
.saved-tag{font-size:11.5px; color:var(--green); font-weight:700; margin-left:8px; opacity:0; transition:.3s}
.saved-tag.show{opacity:1}

/* devlog */
.devlog-prompt{font-size:15.5px; font-weight:700; line-height:1.5; margin-bottom:6px}
.devlog-hint{font-size:13px; color:var(--muted); margin-bottom:12px; padding:8px 12px; border-radius:9px; background:rgba(95,160,255,.08); border:1px solid rgba(95,160,255,.2)}

/* mission footer nav */
.mrun-foot{display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap}
.mrun-foot .spacer{flex:1}
.done-banner{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; margin-top:16px;
  background:rgba(246,201,69,.12); border:1px solid var(--gold-deep); color:var(--gold-2); font-weight:700; font-size:13.5px;
}

/* ---------- Garage / Records view ---------- */
.garage-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
@media(max-width:820px){ .garage-grid{grid-template-columns:1fr} }
.badge-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px}
.badge{
  text-align:center; padding:16px 10px; border-radius:14px; border:1px solid var(--line); background:rgba(0,0,0,.2);
}
.badge.got{border-color:var(--gold); background:rgba(246,201,69,.1); box-shadow:0 0 18px rgba(246,201,69,.15)}
.badge.locked{opacity:.4; filter:grayscale(.7)}
.badge .b-ic{font-size:30px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.badge b{display:block; font-size:12.5px; margin-top:6px}
.badge span{display:block; font-size:10.5px; color:var(--muted); margin-top:2px}

.record{padding:14px 16px; border-radius:12px; background:rgba(0,0,0,.2); border:1px solid var(--line); margin-bottom:11px}
.record .r-h{font-size:12px; font-weight:800; color:var(--gold-2); letter-spacing:.5px; margin-bottom:6px}
.record .r-q{font-size:13px; color:var(--muted); margin-bottom:6px}
.record .r-a{font-size:13.5px; color:#dbe7ff; white-space:pre-wrap; line-height:1.6}
.record .r-empty{font-size:12.5px; color:var(--muted2); font-style:italic}
.trophy-hero{text-align:center; padding:26px 18px}
.trophy-hero .tbig{font-size:64px; filter:drop-shadow(0 6px 12px rgba(246,201,69,.4))}
.trophy-hero.dim .tbig{filter:grayscale(1); opacity:.35}
.trophy-hero h3{font-size:18px; margin:8px 0 4px}
.trophy-hero p{color:var(--muted); font-size:13px; margin:0}
.pts-big{font-size:40px; font-weight:900; color:var(--gold); line-height:1}

/* ---------- FX overlays (pointer-events:none 필수) ---------- */
#fx{position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden}
.toast{
  position:absolute; left:50%; top:74px; transform:translateX(-50%) translateY(-16px);
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#241a00; font-weight:800; font-size:14px;
  padding:12px 22px; border-radius:99px; box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; transition:.4s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.celebrate{position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:.4s}
.celebrate.show{opacity:1}
.celebrate .cbox{
  text-align:center; padding:34px 44px; border-radius:22px;
  background:radial-gradient(400px 200px at 50% 0%, rgba(246,201,69,.3), transparent), linear-gradient(160deg,#12305c,#0c1c3a);
  border:2px solid var(--gold); box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.celebrate .cbig{font-size:70px; filter:drop-shadow(0 6px 14px rgba(246,201,69,.5))}
.celebrate h2{margin:8px 0 4px; font-size:26px; color:var(--gold-2)}
.celebrate p{margin:0; color:#dbe7ff; font-size:14px}
.confetti{position:absolute; top:-20px; font-size:20px; animation:fall linear forwards}
@keyframes fall{0%{transform:translateY(-20px) rotate(0); opacity:1}100%{transform:translateY(105vh) rotate(540deg); opacity:.2}}

/* reduce-motion */
@media(prefers-reduced-motion:reduce){ *{animation-duration:.001s !important; transition-duration:.05s !important} }

/* small screens */
@media(max-width:640px){
  .hero h1{font-size:24px}
  .tb-titles b{font-size:14px}
  .mrun-lapmeter{display:none}
  .garage-strip{grid-template-columns:1fr}
}