/* ---------- 선택 화면 ---------- */
  #select.screen{justify-content:flex-start;align-items:center;overflow:hidden;padding:0}
  #select > *{flex-shrink:0}
  #select h1{margin-top:0;font-family:'Jua';font-size:clamp(27px,3vw,38px);letter-spacing:2px;white-space:nowrap}
  #select h1.brandLogo{display:inline-flex;align-items:baseline;gap:6px;line-height:.92}
  #select h1 .brandPrefix{color:#687078;font:700 clamp(9px,.85vw,12px) 'IBM Plex Sans KR',sans-serif;letter-spacing:.6px;text-transform:lowercase}
  #select h1 .brandMain{color:var(--accent)}
  #select h1 .brandMain b{color:var(--ink);font:inherit}
  .selectHeader{width:100%;display:grid;grid-template-columns:auto minmax(420px,1fr) auto;
    grid-template-areas:'logo progress tools' 'audio status tools';gap:5px 18px;align-items:center;
    padding:10px 18px 9px;background:rgba(255,255,255,.91);border-bottom:1px solid var(--line);
    box-shadow:0 5px 18px rgba(31,39,47,.07);z-index:2}
  .selectHeader h1{grid-area:logo}.selectUtilityBar{grid-area:tools;display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
  .selectUtilityBar button{border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);padding:8px 10px;
    font:700 11px 'IBM Plex Sans KR',sans-serif;cursor:pointer;white-space:nowrap}
  .selectUtilityBar button:hover{border-color:#96a5ae;transform:translateY(-1px)}
  .selectProgress{grid-area:progress;display:grid;grid-template-columns:repeat(4,minmax(78px,1fr));max-width:680px;width:100%;margin:auto}
  .selectProgress button{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:37px;border:0;
    border-bottom:3px solid #d7d3c9;background:transparent;color:#8b8a84;font:700 11px 'IBM Plex Sans KR',sans-serif;cursor:pointer}
  .selectProgress button:not(:last-child)::after{content:'';position:absolute;right:-2px;top:18px;width:5px;height:5px;border-top:1px solid #b9b6ae;border-right:1px solid #b9b6ae;transform:rotate(45deg)}
  .selectProgress button b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#ddd9cf;color:#696861;font-size:11px}
  .selectProgress button.current{border-bottom-color:var(--accent);color:var(--ink)}.selectProgress button.current b{background:var(--accent);color:#fff}
  .selectProgress button.complete:not(.current) b{background:#2f9e63;color:#fff}.selectProgress button.skipped:not(.current){border-bottom-style:dashed}
  .selectProgress button:disabled{cursor:not-allowed;opacity:.45}.selectProgress button:focus-visible{outline:3px solid #4ccfe8;outline-offset:2px}
  #audioStatus{grid-area:audio;margin:0!important;padding:3px 8px!important;text-align:left!important;font-size:10px!important;white-space:nowrap}
  .selectFlowStatus{grid-area:status;color:#687078;font-size:10px;text-align:center;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #select > .selectStep{width:100%;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:18px 0 30px;
    scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .selectFooter{width:100%;padding:5px 18px calc(6px + env(safe-area-inset-bottom));text-align:center;
    background:rgba(255,255,255,.91);border-top:1px solid var(--line);color:#77746c;font-size:10px;letter-spacing:.3px;z-index:2}
  .mainControlHelp{width:min(980px,100%);margin:0 auto 4px;border-bottom:1px solid rgba(120,118,110,.18)}
  .mainControlHelp summary{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:3px 12px;cursor:pointer;color:#4f5962;font:400 12px 'Jua';list-style-position:inside;border-radius:7px}
  .mainControlHelp summary:hover{background:rgba(65,81,94,.08)}.mainControlHelp summary:focus-visible{outline:2px solid #4ccfe8;outline-offset:1px}
  .mainControlHelp .keys{max-height:min(34vh,260px);overflow:auto;margin:0 auto 6px;padding:8px 12px 10px;border-radius:9px;background:rgba(24,30,38,.96);color:#d4dbe2;text-align:left;line-height:1.65}
  .mainControlHelp .keys p{margin:3px 0}.mainControlHelp .keys b{color:#fff}.mainControlHelp .keys kbd{background:#303946;border-color:#667382;color:#fff}
  .selectFooter a{color:inherit;text-decoration:none;font-weight:700;transition:color .15s ease}
  .selectFooter a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
  .selectFooter a:focus-visible{outline:2px solid #4ccfe8;outline-offset:3px;border-radius:3px}
  .selectStepHeading{padding:0 20px 14px;text-align:center}.selectStepHeading small{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:1.8px}
  .selectStepHeading h2{margin:3px 0 2px;font-size:clamp(25px,4vw,36px)}.selectStepHeading p{color:#7c7a73;font-size:12px}
  .selectStepHeading h2:focus{outline:none}
  .selectStepActions{position:relative;z-index:3;bottom:auto;display:flex;justify-content:center;gap:10px;width:100%;margin-top:22px;
    padding:13px 18px calc(13px + env(safe-area-inset-bottom));background:transparent}
  .selectStepActions button,.startActions .secondary{min-width:170px;border:0;border-radius:11px;padding:12px 20px;font-family:'Jua';font-size:16px;cursor:pointer}
  .selectStepActions .primary{background:var(--accent);color:#fff}.selectStepActions .secondary,.startActions .secondary{border:1px solid #c9c5ba;background:#fff;color:#444b53}
  .selectStepActions button:disabled{background:#d5d1c7;color:#99958d;cursor:not-allowed;border-color:#d5d1c7}
  .selectStepActions button:not(:disabled):hover,.startActions .secondary:hover{transform:translateY(-2px)}
  .characterStepActions{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
  .characterActionSide{display:flex;align-items:center;gap:7px;min-width:0}
  .characterActionLeft{justify-content:flex-end}.characterActionRight{justify-content:flex-start}
  .characterStepActions #characterNext{justify-self:center;min-width:210px}
  #select .characterStepActions .utilityAction{min-width:118px;padding:10px 13px;border:1px solid var(--line);background:#fff;color:var(--ink);
    font:400 13px 'Jua';white-space:nowrap}
  #select .characterStepActions #lanBtn{min-width:154px;padding:10px 14px;font-size:14px;border-width:2px}
  #select .characterStepActions #characterChangeKart{min-width:150px}
  .nameRow{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;padding:0 16px 5px}.nameRow label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#666}
  .nameRow input{width:145px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 10px;font:inherit;color:var(--ink)}
  .secLabel{font-family:'Jua';font-size:17px;margin:22px 0 10px;color:#6b6a63;letter-spacing:1px}
  #selectStepCharacter > .secLabel{display:block;width:100%;align-self:center;padding:0 20px;text-align:center}
  .voicePreviewHint{margin:-3px 16px 11px;color:#8a887f;font-size:12px;text-align:center}
  .playerPick{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
  .pickTitle{font-family:'Jua';font-size:16px;color:var(--accent);background:#fff;border:1px solid var(--line);
    border-radius:8px;padding:4px 14px;line-height:1}
  .charGrid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:0 20px}
  .kartSwitchHint{margin:-2px 14px 10px;color:#77746c;font-size:12px;text-align:center}
  .kartGarage{--kart-paint:#4cc3ff;--kart-accent:#fff;width:min(920px,calc(100% - 28px));min-height:142px;
    display:grid;grid-template-columns:180px minmax(170px,.8fr) minmax(330px,1.5fr);gap:16px;align-items:center;
    padding:14px 16px;margin-bottom:12px;background:linear-gradient(135deg,#fff,#f5f2ea);border:1px solid var(--line);
    border-radius:16px;box-shadow:0 8px 24px rgba(36,42,48,.08)}
  .kartGarageVisual{height:106px;border-radius:13px;position:relative;display:flex;align-items:center;justify-content:center;
    overflow:hidden;background:radial-gradient(circle at 65% 25%,color-mix(in srgb,var(--kart-accent) 70%,white),transparent 28%),
    linear-gradient(145deg,color-mix(in srgb,var(--kart-paint) 68%,white),var(--kart-paint));box-shadow:inset 0 -18px 28px rgba(0,0,0,.13)}
  .concept-sun .kartGarageVisual{box-shadow:inset 0 0 34px #fff082}.concept-moon .kartGarageVisual{background:linear-gradient(145deg,#303b79,var(--kart-paint))}
  .kartGarageCopy small{font-size:9px;letter-spacing:1.3px;color:#8a887f;font-weight:800}.kartGarageCopy h3{font-family:'Jua';font-size:22px;margin:3px 0;color:#282d34}
  .kartGarageCopy p{font-size:11px;color:#76746d;line-height:1.45;margin:0}.kartEquipped{display:inline-flex;margin-top:7px;padding:4px 8px;
    border-radius:999px;background:#e6f6ed;color:#23764d;font-size:10px;font-weight:800}.kartEquipped::before{content:'✓';margin-right:4px}
  .kartPerformance{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:8px 12px}
  .kartMetric{display:grid;grid-template-columns:38px 1fr 40px;gap:7px;align-items:center;font-size:10px;color:#69675f}
  .kartMetric b{font-weight:700}.kartMetric > span{text-align:right;font-size:10px;font-weight:800;color:#343942}
  .kartMetric .statUp{color:#16825a}.kartMetric .statDown{color:#b66042}.kartMetric .statBase{color:#74736d}
  .kartMetricTrack{height:7px;border-radius:5px;background:#e1ddd3;overflow:hidden}.kartMetricTrack i{display:block;height:100%;border-radius:5px;
    background:linear-gradient(90deg,var(--kart-paint),var(--kart-accent));transition:width .18s ease}
  .kartGrid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:0 20px;max-width:1180px}
  .kartCard{--kart-paint:#4cc3ff;--kart-accent:#fff;width:168px;min-height:180px;background:#fff;
    border:2px solid var(--line);border-radius:14px;padding:11px 10px 10px;cursor:pointer;text-align:left;
    transition:transform .12s,border-color .12s,box-shadow .12s;overflow:hidden;position:relative}
  .kartCard:hover{transform:translateY(-3px)}
  .kartCard:focus-visible{outline:3px solid #4ccfe8;outline-offset:3px}
  .kartCard.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,78,60,.18)}
  .kartPreview{height:76px;border-radius:10px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg,color-mix(in srgb,var(--kart-paint) 76%,white),var(--kart-paint));
    box-shadow:inset 0 -12px 22px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.45);overflow:hidden}

  /* 3D 골격 + 2D 콘셉트 데칼을 겹친 공통 카트 미리보기 */
  .kartModel{position:relative;width:148px;height:72px;flex:0 0 auto;transform-style:preserve-3d;isolation:isolate;
    filter:drop-shadow(0 5px 5px rgba(18,27,37,.26))}
  .kartPreview .kartModel{transform:scale(.88);transform-origin:50% 54%}
  .kartGarageVisual .kartModel{transform:scale(1.08);transform-origin:center}
  .kartModel i,.kartModel span{position:absolute;display:block;box-sizing:border-box}
  .kartGroundShadow{z-index:0;left:10px;bottom:1px;width:132px;height:13px;border-radius:50%;
    background:rgba(10,17,24,.32);filter:blur(3px)}
  .kartAxle{z-index:1;left:13px;bottom:18px;width:124px;height:5px;border-radius:5px;background:#6e7d8d;transform:rotate(-2deg)}
  .kartChassis{z-index:3;left:12px;bottom:16px;width:127px;height:13px;border-radius:7px 10px 5px 6px;
    background:linear-gradient(#4c5966,#18212b 58%,#0d131a);box-shadow:inset 0 2px 1px rgba(255,255,255,.18)}
  .kartBody{z-index:6;left:21px;bottom:20px;width:105px;height:29px;border-radius:20px 28px 9px 12px;
    background:linear-gradient(165deg,color-mix(in srgb,var(--kart-paint) 60%,white) 0 18%,var(--kart-paint) 42%,color-mix(in srgb,var(--kart-paint) 70%,black));
    box-shadow:inset 0 3px 2px rgba(255,255,255,.38),inset 0 -6px 7px rgba(0,0,0,.16),0 2px 0 color-mix(in srgb,var(--kart-accent) 48%,transparent)}
  .kartNose{z-index:7;right:8px;bottom:21px;width:39px;height:21px;border-radius:6px 22px 9px 4px;
    clip-path:polygon(0 14%,78% 0,100% 46%,86% 100%,0 100%);
    background:linear-gradient(155deg,color-mix(in srgb,var(--kart-accent) 62%,white),var(--kart-paint) 46%,color-mix(in srgb,var(--kart-paint) 72%,black));
    box-shadow:inset 0 3px rgba(255,255,255,.35)}
  .kartCockpit{z-index:5;left:51px;bottom:43px;width:49px;height:18px;border-radius:28px 25px 5px 4px;
    transform:skewX(-8deg);background:linear-gradient(145deg,#d9f8ff 0 23%,#66b8d4 24% 52%,#254a66 100%);
    border:2px solid color-mix(in srgb,var(--kart-accent) 70%,#687683);box-shadow:inset 0 2px rgba(255,255,255,.55)}
  .kartSeat{z-index:4;left:43px;bottom:39px;width:23px;height:25px;border-radius:8px 11px 2px 2px;
    transform:skewX(8deg);background:linear-gradient(90deg,#121922,#3b4651 54%,#141b23);border-left:3px solid color-mix(in srgb,var(--kart-accent) 58%,#53606b)}
  /* 카트가 오른쪽을 향하므로 탑승 캐릭터도 오른쪽을 보는 측면 실루엣으로 통일한다. */
  .kartDriver{z-index:6;left:63px;bottom:42px;width:43px;height:40px;transform:scale(.90);transform-origin:50% 100%;
    filter:drop-shadow(1px 2px 2px rgba(16,24,32,.28));pointer-events:none}
  .kartDriverSuit{z-index:0;left:3px;bottom:0;width:30px;height:16px;border-radius:14px 14px 5px 5px;
    background:linear-gradient(155deg,#f8fbfd 0 24%,var(--kart-accent) 25% 43%,color-mix(in srgb,var(--kart-paint) 68%,#22303b));
    border:1px solid rgba(24,34,44,.28)}
  .kartDriverHead{z-index:2;left:6px;bottom:11px;width:28px;height:25px;border-radius:48% 55% 45% 48%;
    background:linear-gradient(145deg,color-mix(in srgb,var(--kart-accent) 54%,white),var(--kart-paint) 62%,color-mix(in srgb,var(--kart-paint) 72%,black));
    border:1px solid color-mix(in srgb,var(--kart-paint) 68%,#27333e);box-shadow:inset 2px 2px 2px rgba(255,255,255,.35)}
  .kartDriverEar{z-index:1;left:8px;bottom:31px;width:11px;height:12px;background:var(--kart-paint);
    clip-path:polygon(12% 100%,35% 0,100% 100%);transform:rotate(-9deg)}
  .kartDriverEye{z-index:4;left:25px;bottom:26px;width:8px;height:9px;border-radius:50%;background:#f8fbff;border:1px solid #5d6873}
  .kartDriverEye::after{content:'';position:absolute;right:1px;top:2px;width:3px;height:4px;border-radius:50%;background:#17212a;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
  .kartDriverMuzzle{z-index:3;right:0;bottom:15px;width:15px;height:11px;border-radius:45% 62% 54% 45%;
    background:color-mix(in srgb,var(--kart-accent) 70%,white);border:1px solid color-mix(in srgb,var(--kart-paint) 55%,#66727d)}
  .kartDriverMuzzle::after{content:'';position:absolute;right:-1px;top:3px;width:5px;height:5px;border-radius:50%;background:#202832}
  .kartSteering{z-index:12;left:88px;bottom:46px;width:15px;height:9px;border:3px solid #161e27;border-radius:50%;transform:rotate(-10deg)}
  .kartSteering::after{content:'';position:absolute;left:4px;top:5px;width:3px;height:8px;border-radius:2px;background:#1c2630}
  .kartSpoiler{z-index:4;left:7px;bottom:43px;width:35px;height:7px;border-radius:4px 7px 3px 3px;
    background:linear-gradient(165deg,var(--kart-accent),color-mix(in srgb,var(--kart-paint) 68%,black));
    box-shadow:5px 8px 0 -2px #26313c;transform:rotate(-4deg)}
  .kartBumper{z-index:9;right:4px;bottom:17px;width:39px;height:7px;border-radius:4px 9px 6px 3px;
    background:linear-gradient(180deg,#e8f0f5,#71808d 48%,#1d2730);box-shadow:3px 2px 0 #151d25}
  .kartStripe{z-index:8;left:31px;bottom:38px;width:84px;height:4px;border-radius:5px;background:var(--kart-accent);
    transform:skewX(-22deg);box-shadow:0 1px rgba(255,255,255,.32)}
  .kartHeadlight{z-index:10;right:11px;bottom:31px;width:8px;height:5px;border-radius:50%;background:#e8fcff;
    box-shadow:0 0 5px #a9f2ff,inset 0 -1px #6eafc2}
  .kartHeadlight.lightB{right:22px;width:7px}
  .kartWheel{border-radius:50%;background:radial-gradient(circle at 52% 48%,var(--kart-accent) 0 16%,#9aa9b7 17% 29%,#27323d 30% 42%,#080d12 44% 72%,#252c32 74% 100%);
    border:2px solid #111820;box-shadow:inset -3px -3px 4px #05080b,inset 2px 2px 3px rgba(255,255,255,.22)}
  .kartWheel::after{content:'';position:absolute;inset:5px;border:1px dashed color-mix(in srgb,var(--kart-accent) 62%,#d9e1e7);border-radius:50%}
  .kartWheel.far{z-index:2;width:21px;height:21px;bottom:18px;filter:brightness(.68);transform:scaleY(.84)}
  .kartWheel.far.rear{left:25px}.kartWheel.far.front{right:9px}
  .kartWheel.near{z-index:11;width:26px;height:26px;bottom:3px;transform:scaleY(.92)}
  .kartWheel.near.rear{left:13px}.kartWheel.near.front{right:19px}
  .kartDecal{z-index:9;left:47px;bottom:24px;width:24px;height:20px;border-radius:7px 11px 7px 8px;font:bold 10px/20px 'IBM Plex Sans KR',sans-serif;text-align:center;
    color:color-mix(in srgb,var(--kart-paint) 72%,#17202a);background:color-mix(in srgb,var(--kart-accent) 78%,white);border:1px solid rgba(255,255,255,.68);text-shadow:0 1px rgba(255,255,255,.55);
    box-shadow:0 2px 4px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.55)}
  .kartFeature{z-index:8;pointer-events:none}

  /* 차체를 색만 바꾼 복제품으로 보이지 않게 하는 10종 실루엣 */
  .kartModel.concept-sports .kartBody{height:23px;border-radius:9px 25px 6px 8px}.kartModel.concept-sports .kartCockpit{height:14px;bottom:39px;left:58px}
  .kartModel.concept-sports .kartSpoiler{width:43px;left:4px;bottom:41px}.kartModel.concept-sports .kartNose{width:49px;right:3px}
  .kartModel.concept-sports .kartDriverHead{border-radius:55% 64% 40% 48%;background:linear-gradient(145deg,#f4f8fb 0 38%,var(--kart-paint) 39% 73%,#293640 74%)}
  .kartModel.concept-sports .kartDriverEar{left:5px;bottom:28px;width:12px;height:6px;clip-path:polygon(0 100%,100% 0,82% 100%)}
  .kartModel.concept-sports .kartDriverEye{left:20px;bottom:24px;width:15px;height:8px;border-radius:3px 9px 8px 3px;background:#183a54;border-color:#9deaff}
  .kartModel.concept-sports .kartDriverEye::after{right:2px;top:1px;width:5px;height:2px;background:#d9fbff}.kartModel.concept-sports .kartDriverMuzzle{display:none}
  .kartModel.concept-mascot .kartBody{height:32px;border-radius:30px 32px 10px 13px}.kartModel.concept-mascot .kartCockpit{width:43px;left:55px}
  .kartModel.concept-mascot .kartDriverHead{width:29px;height:27px;border-radius:50%}.kartModel.concept-mascot .kartDriverMuzzle{width:12px;height:9px;background:#fff3a6}
  .kartModel.concept-lion .kartBody{height:34px;border-radius:11px 30px 9px 10px}.kartModel.concept-lion .kartBumper{height:10px;background:linear-gradient(#9b6435,#402618)}
  .kartModel.concept-lion .featureA{left:23px;bottom:43px;width:18px;height:14px;background:var(--kart-accent);clip-path:polygon(0 100%,25% 0,50% 100%,75% 0,100% 100%)}
  .kartModel.concept-lion .kartDriverHead{box-shadow:0 0 0 4px color-mix(in srgb,var(--kart-accent) 84%,#8d5728),inset 2px 2px 2px rgba(255,255,255,.3)}
  .kartModel.concept-lion .kartDriverEar{border-radius:50%;clip-path:none;width:10px;height:10px;bottom:31px}.kartModel.concept-lion .kartDriverMuzzle{background:#f3d097}
  .kartModel.concept-octopus .kartBody{height:35px;border-radius:38px 42px 12px 14px}.kartModel.concept-octopus .kartSpoiler{display:none}
  .kartModel.concept-octopus .featureA{left:18px;bottom:17px;width:91px;height:8px;border-radius:50%;border-bottom:4px dotted var(--kart-accent);transform:rotate(2deg)}
  .kartModel.concept-octopus .kartDriverHead{height:28px;border-radius:56% 58% 42% 44%}.kartModel.concept-octopus .kartDriverEar{display:none}
  .kartModel.concept-octopus .kartDriverMuzzle{right:1px;bottom:13px;width:11px;height:11px;border-radius:50%;background:var(--kart-accent)}
  .kartModel.concept-octopus .kartDriverMuzzle::after{inset:3px;width:auto;height:auto;background:#6f3da4}
  .kartModel.concept-squid .kartBody{height:23px;clip-path:polygon(0 10%,75% 0,100% 55%,84% 100%,0 86%)}.kartModel.concept-squid .kartNose{width:53px;clip-path:polygon(0 18%,74% 0,100% 50%,70% 100%,0 88%)}
  .kartModel.concept-squid .featureA{right:0;bottom:34px;border-left:18px solid var(--kart-accent);border-top:7px solid transparent;border-bottom:7px solid transparent;transform:rotate(-9deg)}
  .kartModel.concept-squid .kartDriverHead{height:30px;border-radius:0;clip-path:polygon(50% 0,100% 64%,78% 100%,20% 100%,0 62%)}.kartModel.concept-squid .kartDriverEar{display:none}
  .kartModel.concept-squid .kartDriverMuzzle{right:2px;bottom:13px;width:10px;height:8px;background:var(--kart-accent)}
  .kartModel.concept-moon .kartCockpit{background:linear-gradient(145deg,#eef2ff,#7987c8 48%,#28345c)}
  .kartModel.concept-moon .featureA{left:26px;bottom:42px;width:18px;height:18px;border-radius:50%;border:5px solid var(--kart-accent);border-right-color:transparent;transform:rotate(-24deg)}
  .kartModel.concept-moon .kartDriverHead{background:linear-gradient(145deg,#f7f6e7 0 34%,#8b96d2 35% 72%,#323d72);border-radius:50%}
  .kartModel.concept-moon .kartDriverEar{display:none}.kartModel.concept-moon .kartDriverEye{left:19px;bottom:23px;width:16px;height:10px;border-radius:3px 9px 8px 3px;background:#334574;border-color:#e9edff}
  .kartModel.concept-moon .kartDriverEye::after{right:2px;top:2px;width:5px;height:2px;background:#dff8ff}.kartModel.concept-moon .kartDriverMuzzle{display:none}
  .kartModel.concept-sun .kartWheel{--kart-accent:#fff36b}.kartModel.concept-sun .featureA{left:24px;bottom:40px;width:23px;height:23px;
    background:var(--kart-accent);clip-path:polygon(50% 0,61% 25%,85% 15%,75% 39%,100% 50%,75% 61%,85% 85%,61% 75%,50% 100%,39% 75%,15% 85%,25% 61%,0 50%,25% 39%,15% 15%,39% 25%)}
  .kartModel.concept-sun .kartDriverHead{background:linear-gradient(145deg,#fff8a2,var(--kart-paint) 62%,#c56b16);box-shadow:0 0 0 3px #fff36b,inset 2px 2px rgba(255,255,255,.35)}
  .kartModel.concept-sun .kartDriverEar{display:none}.kartModel.concept-sun .kartDriverMuzzle{background:#fff3a3}
  .kartModel.concept-camel .kartBody{height:33px;border-radius:13px 27px 9px 9px}.kartModel.concept-camel .kartCockpit{height:16px;bottom:43px}
  .kartModel.concept-camel .featureA,.kartModel.concept-camel .featureB{bottom:48px;width:27px;height:19px;border-radius:50% 50% 8px 8px;background:var(--kart-accent)}
  .kartModel.concept-camel .featureA{left:29px;transform:rotate(-8deg)}.kartModel.concept-camel .featureB{left:49px;transform:rotate(8deg)}
  .kartModel.concept-camel .kartDriverHead{width:31px;border-radius:55% 70% 45% 48%}.kartModel.concept-camel .kartDriverEar{height:15px;width:8px;left:9px;transform:rotate(-20deg)}
  .kartModel.concept-camel .kartDriverMuzzle{right:-2px;width:18px;background:#f0ce99}
  .kartModel.concept-cloud .kartBody{height:34px;border-radius:28px;background:linear-gradient(165deg,#fff 0 18%,var(--kart-paint) 56%,color-mix(in srgb,var(--kart-paint) 72%,#517b8b))}
  .kartModel.concept-cloud .featureA{left:24px;bottom:44px;width:24px;height:24px;border-radius:50%;background:#f7fdff;box-shadow:19px -5px 0 4px #e9f9fd,39px 1px 0 1px #d9f3fa}
  .kartModel.concept-cloud .kartDriverHead{width:25px;height:22px;background:#f8fdff;border-color:#a9d8e5;box-shadow:-5px 2px 0 #e7f7fb,4px -3px 0 #fff}
  .kartModel.concept-cloud .kartDriverEar{display:none}.kartModel.concept-cloud .kartDriverMuzzle{background:#e9f9fd;border-color:#9fcbd7}
  .kartModel.concept-whale .kartBody{height:30px;border-radius:42px 48px 12px 17px}.kartModel.concept-whale .kartNose{width:48px;border-radius:40% 70% 48% 20%;clip-path:none}
  .kartModel.concept-whale .featureA{left:10px;bottom:45px;width:22px;height:22px;background:var(--kart-accent);clip-path:polygon(0 0,50% 42%,100% 0,75% 100%,25% 100%);transform:rotate(-14deg)}
  .kartModel.concept-whale .kartDriverHead{width:32px;height:23px;border-radius:55% 72% 48% 52%}.kartModel.concept-whale .kartDriverEar{left:5px;bottom:29px;width:13px;height:9px;clip-path:polygon(0 0,100% 65%,20% 100%)}
  .kartModel.concept-whale .kartDriverMuzzle{right:-2px;width:18px;height:9px;background:#a8ecff}.kartModel.concept-whale .kartDriverMuzzle::after{width:3px;height:3px;top:2px}
  .kartCard h3{font-family:'Jua';font-size:16px;margin:0 0 2px;color:#282d34}.kartCard .desc{font-size:10.5px;color:#76746d;min-height:28px;line-height:1.35}
  .kartStats{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin-top:7px}.kartStats span{padding:3px 2px;
    border-radius:5px;background:#f2efe7;color:#65645f;font-size:9px;text-align:center;white-space:nowrap}
  .card{width:148px;background:#fff;border:2px solid var(--line);border-radius:12px;
    padding:12px 10px 10px;cursor:pointer;transition:transform .12s,border-color .12s;text-align:center}
  .card:hover{transform:translateY(-4px)}
  .card:focus-visible{outline:3px solid #4ccfe8;outline-offset:3px}
  .card.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,78,60,.18)}
  .card.disabled{opacity:.38;filter:grayscale(.5);cursor:not-allowed}
  .card.disabled:hover{transform:none}
  .randomCharacterCard{background:linear-gradient(150deg,#fff 58%,#eee9ff);border-style:dashed}
  .randomCharacterCard:hover{border-color:#7257d8;box-shadow:0 0 0 3px rgba(114,87,216,.13)}
  .randomCharacterCard .face{border:3px solid rgba(255,255,255,.94);box-shadow:0 4px 13px rgba(52,48,94,.24)}
  .randomKartIcon{display:grid;place-items:center;width:31px;height:13px;border-radius:8px;background:linear-gradient(90deg,#43c7d9,#7257d8,#f06f78);color:#fff;font:800 9px sans-serif;box-shadow:0 2px 0 #293447}
  .randomStatBars{display:grid;gap:4px;margin-top:9px}.randomStatBars i{height:5px;border-radius:4px;background:linear-gradient(90deg,#43c7d9 0 33%,#7257d8 33% 68%,#f06f78 68%)}
  .randomStatBars i:nth-child(2){transform:scaleX(.86)}.randomStatBars i:nth-child(3){transform:scaleX(.72)}
  .card .face{width:62px;height:62px;border-radius:50%;margin:0 auto 8px;
    display:flex;align-items:center;justify-content:center;font-size:34px}
  .card .kartType{height:18px;margin:-2px auto 3px;display:flex;align-items:center;justify-content:center;gap:6px;
    color:#68717b;font-size:9px;font-weight:700;letter-spacing:.3px}
  .miniKart{--kart-color:#4cc3ff;position:relative;display:inline-block;width:32px;height:9px;
    border-radius:4px 4px 2px 2px;background:linear-gradient(90deg,var(--kart-color) 0 37%,var(--kart-accent,#fff) 38% 55%,var(--kart-color) 56%);
    box-shadow:inset 0 -2px rgba(0,0,0,.18);outline:1px solid color-mix(in srgb,var(--kart-accent,#fff) 64%,transparent)}
  .miniKart::before{content:'';position:absolute;left:1px;bottom:-3px;width:7px;height:7px;border-radius:50%;
    background:#202630;box-shadow:23px 0 #202630}
  .miniKart::after{content:'';position:absolute;left:9px;top:-5px;width:14px;height:7px;border-radius:7px 7px 2px 2px;
    background:color-mix(in srgb,var(--kart-color) 72%,white)}
  .miniKart.tech{border-radius:2px;box-shadow:inset 0 0 0 2px #74e8ff,inset 0 -2px rgba(0,0,0,.2)}
  .miniKart.tech::after{border-radius:2px;background:#7beaff}
  .miniKart.aero{clip-path:polygon(8% 35%,84% 0,100% 55%,86% 100%,8% 100%,0 68%)}
  .miniKart.aero::after{left:12px;width:10px;transform:skewX(-18deg)}
  .miniKart.heavy{width:34px;height:12px;border-radius:3px}
  .miniKart.heavy::before{box-shadow:25px 0 #202630}
  .miniKart.heavy::after{left:8px;top:-4px;width:18px;height:8px;border-radius:3px}
  .miniKart.speed{width:35px;clip-path:polygon(0 28%,82% 0,100% 50%,88% 100%,0 100%)}
  .miniKart.speed::before{box-shadow:26px 0 #202630}
  .miniKart.speed::after{left:13px;width:13px;transform:skewX(-22deg)}
  .miniKart.agile{width:29px;border-radius:8px 8px 3px 3px}
  .miniKart.agile::before{box-shadow:20px 0 #202630}
  .miniKart.agile::after{left:8px;width:12px;border-radius:50% 50% 3px 3px}
  .miniKart.cruiser::after{border-radius:8px 8px 3px 3px}
  /* 카드에서도 3D 차체의 종족별 폭·길이·콕핏 비율을 미리 읽을 수 있게 한다. */
  .miniKart.sig-frog{width:31px;height:8px;border-radius:10px 10px 3px 3px}
  .miniKart.sig-frog::after{left:6px;top:-4px;width:19px;height:6px;border-radius:50%}
  .miniKart.sig-rabbit,.miniKart.sig-horse{width:36px;height:8px;clip-path:polygon(0 22%,86% 0,100% 50%,88% 100%,0 100%)}
  .miniKart.sig-rabbit::after{left:14px;top:-7px;width:10px;height:9px}
  .miniKart.sig-robot{width:32px;height:10px;border-radius:1px;clip-path:none}
  .miniKart.sig-robot::after{left:10px;top:-5px;width:13px;height:7px;border-radius:1px;box-shadow:inset 0 0 0 2px #25313d}
  .miniKart.sig-bear,.miniKart.sig-ox,.miniKart.sig-pig{width:36px;height:12px;border-radius:5px;clip-path:none}
  .miniKart.sig-bear::after,.miniKart.sig-ox::after,.miniKart.sig-pig::after{left:7px;top:-4px;width:21px;height:8px}
  .miniKart.sig-cat,.miniKart.sig-rat{width:27px;height:8px;border-radius:9px 9px 2px 2px;clip-path:none}
  .miniKart.sig-cat::before,.miniKart.sig-rat::before{box-shadow:18px 0 #202630}
  .miniKart.sig-cat::after,.miniKart.sig-rat::after{left:8px;width:11px;height:6px}
  .miniKart.sig-bird,.miniKart.sig-dragon,.miniKart.sig-snake,.miniKart.sig-dolphin{width:37px;height:7px;clip-path:polygon(0 42%,82% 0,100% 48%,84% 100%,0 84%)}
  .miniKart.sig-bird::after,.miniKart.sig-dragon::after,.miniKart.sig-snake::after,.miniKart.sig-dolphin::after{left:15px;top:-4px;width:10px;height:6px;transform:skewX(-24deg)}
  .miniKart.sig-fox,.miniKart.sig-tiger,.miniKart.sig-dino{width:36px;height:9px;clip-path:polygon(0 26%,84% 0,100% 50%,88% 100%,0 100%)}
  .miniKart.sig-alien{width:33px;height:8px;border-radius:50% 50% 3px 3px;clip-path:none}
  .miniKart.sig-alien::after{left:8px;top:-6px;width:17px;height:8px;border-radius:50%}
  .miniKart.sig-penguin,.miniKart.sig-goat,.miniKart.sig-dog{height:11px;border-radius:7px 7px 3px 3px;clip-path:none}
  .miniKart.sig-monkey{width:32px;height:10px;border-radius:12px 12px 3px 3px;clip-path:none}
  .miniKart.sig-rooster::after{top:-7px;height:9px;border-radius:8px 8px 2px 2px}
  .kartCode{min-width:18px;padding:1px 3px;border:1px solid color-mix(in srgb,var(--kart-accent) 68%,#5f6872);
    border-radius:5px;background:#222a34;color:var(--kart-accent);font-size:7px;line-height:10px;letter-spacing:.4px}
  .card h3{font-family:'Jua';font-size:18px}
  .card .desc{font-size:11.5px;color:#8a887f;margin:2px 0 8px}
  .stat{display:flex;align-items:center;gap:6px;margin:3px 0}
  .stat b{font-size:10.5px;width:30px;text-align:left;font-weight:500;color:#6b6a63}
  .bar{flex:1;height:5px;background:#eee9dd;border-radius:3px;overflow:hidden}
  .bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
  .trackGrid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:0 20px}
  .tcard{width:200px;background:#fff;border:2px solid var(--line);border-radius:14px;
    padding:12px;cursor:pointer;transition:transform .12s,border-color .12s;text-align:center}
  .tcard:hover{transform:translateY(-4px)}
  .tcard:focus-visible,.mcard:focus-visible,.ocard:focus-visible{outline:3px solid #4ccfe8;outline-offset:3px}
  .tcard.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,78,60,.18)}
  .tcard canvas{width:100%;height:96px;border-radius:8px;display:block}
  .tcard h3{font-family:'Jua';font-size:18px;line-height:1.25;margin-top:9px;color:#202832;letter-spacing:.1px}
  .tcard .desc{margin-top:3px;font-size:11.5px;line-height:1.4;color:#626a72}
  .randomTrackCard{background:linear-gradient(150deg,#fff 56%,#f0e8ff)}
  .randomTrackCard.sel{border-color:#7c55b5;box-shadow:0 0 0 3px rgba(124,85,181,.2)}
  .modeGrid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:0 20px}
  .mcard{width:190px;min-height:92px;background:#fff;border:2px solid var(--line);border-radius:12px;
    padding:12px;cursor:pointer;transition:transform .12s,border-color .12s;text-align:left}
  .mcard:hover{transform:translateY(-3px)}
  .mcard.sel{border-color:#2f9e63;box-shadow:0 0 0 3px rgba(47,158,99,.18)}
  .mcard h3{font-family:'Jua';font-size:18px;margin-bottom:4px}
  .mcard .desc{font-size:11.5px;color:#76746d;line-height:1.45}
  .optionGrid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:0 20px;margin-bottom:8px}
  /* 게임 시작 화면은 확대 배율과 좁은 창에서도 텍스트·카드가 화면 밖으로 밀리지 않게 별도 폭을 갖는다. */
  #selectStepSetup{padding-left:clamp(14px,3vw,34px)!important;padding-right:clamp(14px,3vw,34px)!important}
  #selectStepSetup .selectStepHeading,#selectStepSetup .secLabel,#selectStepSetup .modeGrid,
  #selectStepSetup .optionGrid,#selectStepSetup .startActions,#selectStepSetup .padHint{
    width:min(1120px,100%);margin-left:auto;margin-right:auto;min-width:0}
  #selectStepSetup .selectStepHeading{padding-left:8px;padding-right:8px}
  #selectStepSetup .secLabel{padding:0 6px;text-align:left;line-height:1.35;overflow-wrap:anywhere}
  #selectStepSetup .modeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-left:6px;padding-right:6px}
  #selectStepSetup .optionGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;padding-left:6px;padding-right:6px}
  #selectStepSetup .mcard{width:auto;min-width:0;max-width:none;min-height:104px}
  #selectStepSetup .ocard{width:auto;min-width:0;max-width:none;min-height:82px}
  #selectStepSetup .mcard h3,#selectStepSetup .ocard h3{overflow-wrap:anywhere;word-break:keep-all}
  #selectStepSetup .mcard .desc,#selectStepSetup .ocard .desc{overflow-wrap:anywhere;word-break:keep-all}
  #selectStepSetup .padHint{justify-content:flex-start;padding:0 6px;line-height:1.45;overflow-wrap:anywhere}
  .kartCard{position:relative}.kartUnlockState{display:block;margin-top:7px;padding:4px 6px;border-radius:6px;background:#e2f3e8;color:#237147;font-size:9px;font-weight:800;text-align:center}
  .kartCard.locked{cursor:not-allowed;border-color:#b9bec2;background:#e9ebec;filter:grayscale(.55)}.kartCard.locked:hover{transform:none}.kartCard.locked .kartUnlockState{background:#d2d6d9;color:#414b52}.kartCard.bypassed .kartUnlockState{background:#eee6ff;color:#6748a4}
  .ocard{min-width:116px;background:#fff;border:2px solid var(--line);border-radius:10px;
    padding:10px 12px;cursor:pointer;transition:transform .12s,border-color .12s;text-align:center}
  .ocard:hover{transform:translateY(-2px)}
  .ocard.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,78,60,.16)}
  .ocard h3{font-family:'Jua';font-size:17px;margin-bottom:2px}
  .ocard .desc{font-size:11px;color:#76746d;line-height:1.35}
  #audioStatus{display:block;min-height:18px;margin:2px auto 8px;padding:6px 12px;text-align:center;
    color:#5d6369;background:rgba(255,255,255,.08);border-radius:999px;font-size:12px;font-weight:700}
  #audioStatus.playing{color:#16714a}
  #audioStatus.voice{color:#4d50a8}
  #audioStatus.error{color:#c83d31}
  #startBtn{margin:28px 0 10px;font-family:'Jua';font-size:22px;padding:13px 60px;
    border:none;border-radius:12px;background:var(--accent);color:#fff;cursor:pointer;
    letter-spacing:3px;transition:transform .1s}
  #startBtn:hover{transform:scale(1.04)}
  #startBtn:disabled{background:#c9c5ba;cursor:default;transform:none}
  .padHint{margin-top:6px;font-size:13px;color:#8a887f;display:flex;align-items:center;gap:8px}
  .dot{width:9px;height:9px;border-radius:50%;background:#c9c5ba;display:inline-block}
  .dot.on{background:var(--go)}
  .keys{margin:16px 0 30px;font-size:12px;color:#8a887f;line-height:1.9;text-align:center;padding:0 16px}
  .startActions{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:22px}.startActions #startBtn{margin:0}
  kbd{background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
    padding:1px 7px;font-family:inherit;font-size:11px;color:var(--ink)}

  @media(max-width:820px){
    .selectHeader{grid-template-columns:1fr auto;grid-template-areas:'logo tools' 'progress progress' 'status status';gap:5px 8px;padding:7px 10px}
    .selectHeader h1{font-size:25px}.selectHeader h1.brandLogo{gap:4px}.selectHeader h1 .brandPrefix{font-size:8px}.selectUtilityBar button{padding:7px;font-size:0}.selectUtilityBar button::first-letter{font-size:15px}
    #audioStatus{display:none}.selectProgress{max-width:none}.selectProgress button{min-height:32px}.selectProgress button b{width:20px;height:20px}.selectFlowStatus{font-size:9px}
    .selectStep{padding-top:13px}.selectStepHeading{padding-bottom:10px}.selectStepHeading p{font-size:10px;padding:0 10px}
    .selectStepActions{bottom:auto}.selectStepActions button,.startActions .secondary{min-width:132px;padding:11px 12px;font-size:14px}
    .characterStepActions{gap:6px;padding-left:8px;padding-right:8px}
    .characterActionSide{gap:4px}
    #select .characterStepActions .utilityAction{min-width:94px;padding:9px 8px;font-size:11px}
    #select .characterStepActions #lanBtn{min-width:122px;padding:9px 8px;font-size:11px}
    .characterStepActions #characterNext{min-width:160px}
    #select .characterStepActions #characterChangeKart{min-width:126px;padding-left:8px;padding-right:8px;font-size:12px}
    #selectStepSetup{padding-left:12px!important;padding-right:12px!important}
    #selectStepSetup .modeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    #selectStepSetup .optionGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
    #selectStepSetup .mcard,#selectStepSetup .ocard{max-width:none}
    #selectStepSetup .secLabel{font-size:16px;margin-top:18px}
    #selectStepSetup .padHint{font-size:11px}
  }
  @media(max-width:520px){
    .selectFooter{padding-left:8px;padding-right:8px}.mainControlHelp summary{min-height:25px;font-size:11px}.mainControlHelp .keys{max-height:30vh;padding:7px 9px;font-size:10px}
    #selectStepSetup{padding-left:8px!important;padding-right:8px!important}
    #selectStepSetup .modeGrid{grid-template-columns:minmax(0,1fr);gap:10px}
    #selectStepSetup .optionGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    #select #selectStepSetup .mcard{width:100%;max-width:none;min-height:86px;padding:12px 14px}
    #selectStepSetup .mcard h3{font-size:19px;line-height:1.2;overflow-wrap:normal;word-break:keep-all}
    #selectStepSetup .mcard .desc{line-height:1.45;overflow-wrap:break-word;word-break:keep-all}
    #selectStepSetup .ocard{width:100%;max-width:none;min-height:72px;padding:9px 7px}
    #selectStepSetup .startActions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
    #selectStepSetup .startActions button{width:100%;min-width:0;flex:none}
  }
  @media(max-width:680px){
    .characterStepActions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:7px}
    .characterStepActions #characterNext{grid-column:1/-1;grid-row:1;justify-self:center}
    .characterActionLeft{grid-column:1;grid-row:2;justify-content:flex-end}
    .characterActionRight{grid-column:2;grid-row:2;justify-content:flex-start}
    #select .characterStepActions .utilityAction,#select .characterStepActions #lanBtn{min-width:0;flex:1 1 auto;white-space:normal;line-height:1.15}
    #select .characterStepActions #characterChangeKart{min-width:0;flex:1 1 auto}
  }