/* 차 빼기 퍼즐 — 주차장 테마(자체 테마, 사이트 라이트/다크 모두 동일하게 보인다) */
#co-game { position:relative; width:100%; max-width:100%; margin:0 auto; border:1px solid #333d4d; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,#1b2029,#12161d); color:#eef2f8; box-shadow:0 18px 45px rgba(10,20,40,.3); user-select:none; -webkit-user-select:none; }
#co-game, #co-game * { box-sizing:border-box; }
#co-game [hidden] { display:none !important; }
#co-game button { font-family:inherit; }
#co-game button:focus-visible { outline:3px solid #ffd479; outline-offset:-3px; }

.co-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:linear-gradient(110deg,#242b36,#171c25); border-bottom:1px solid #ffffff12; }
.co-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#ffd479; }
.co-brand > i { font-size:22px; color:#ff6b5e; }
.co-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#a6b0c0; letter-spacing:.02em; }

.co-hud { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:12px 12px 8px; align-items:center; }
.co-hud > div { text-align:center; border-left:1px solid #ffffff12; }
.co-hud > div:first-child { border-left:0; }
.co-hud small { display:block; font-size:.62rem; font-weight:600; color:#9aa5b5; letter-spacing:.03em; }
.co-hud strong { display:block; line-height:1.4; font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; }
.co-hud .co-scorebox strong { color:#ffd479; font-size:1.4rem; }
.co-hud .co-lives strong { font-size:.9rem; letter-spacing:-2px; }
#co-time.warn { color:#ff6b6b; animation:coWarn .55s ease-in-out infinite alternate; }
@keyframes coWarn { from { opacity:1; transform:scale(1); } to { opacity:.55; transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce) { #co-time.warn { animation:none; } }
.co-track { margin:0 16px 14px; height:5px; border-radius:3px; background:#0b0e13; overflow:hidden; }
#co-progress { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#ff6b5e,#ffd479); transition:width .3s ease; }

#co-stage { position:relative; margin:0 12px; padding:14px 12px 10px; border:1px solid #ffffff14; border-radius:14px; background:radial-gradient(120% 90% at 50% 0%,#2a3140 0%,#141920 100%); }

/* 주차장과 바깥 도로는 같은 좌표계를 사용해 출차 경로가 어긋나지 않는다. */
.co-scene { position:relative; width:100%; max-width:min(100%,max(410px,calc((100dvh - 310px)*1.28))); margin:auto; overflow:hidden; border-radius:12px; background:#263c36; isolation:isolate; }
#co-board { position:relative; width:78%; margin:0; aspect-ratio:1; border-radius:6px; background:repeating-linear-gradient(35deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(120deg,#505660,#343a43); box-shadow:inset 0 0 0 4px #bbc1bd,0 4px 18px #0007; touch-action:manipulation; z-index:2; }
@supports not (aspect-ratio:1/1) { #co-board { height:0; padding-bottom:78%; } }
#co-cells { position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr); }
.co-cell { display:block; border-right:1px solid #e3e3cf35; border-bottom:1px solid #e3e3cf35; }
.co-cell:nth-child(6n) { border-right:0; }
.co-cell:nth-child(n+31) { border-bottom:0; }
#co-cars { position:absolute; inset:0; }
.co-road { position:absolute; left:77%; right:0; top:33.333%; height:16.667%; background:linear-gradient(#bfc5bf 0 3%,#353c45 3% 97%,#bfc5bf 97%); }
.co-road::before { content:''; position:absolute; inset:13% 0; border-top:2px solid #f4d488; border-bottom:2px solid #f4d488; opacity:.75; }
.co-road::after { content:''; position:absolute; top:48%; left:4%; right:0; height:2px; background:repeating-linear-gradient(90deg,#fff8 0 12px,transparent 12px 23px); }
.co-road span { position:absolute; top:110%; width:100%; text-align:center; color:#d1d7c3; font-size:clamp(7px,1.7vw,10px); font-weight:800; letter-spacing:.08em; }
.co-landscape { position:absolute; left:80%; right:0; inset-block:0; background:repeating-linear-gradient(0deg,transparent 0 18px,#ffffff03 18px 19px); }
.co-landscape i { position:absolute; width:28%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 25%,#73916b,#3f694c 48%,#264b35 75%); box-shadow:4px 5px 3px #0005; }
.co-landscape i:nth-child(1) { top:7%; left:25%; }
.co-landscape i:nth-child(2) { bottom:28%; right:12%; }
.co-landscape i:nth-child(3) { bottom:10%; left:12%; }
.co-landscape span { position:absolute; top:23%; width:100%; text-align:center; font-size:clamp(6px,1.6vw,10px); color:#c5d1be; font-weight:800; }
#co-exit { position:absolute; right:-5px; top:33.333%; height:16.666%; width:11px; background:#3a414a; border-top:3px solid #bac4ba; border-bottom:3px solid #bac4ba; pointer-events:none; }
#co-exit::before { content:''; position:absolute; top:8%; bottom:8%; left:-9px; width:3px; background:#fff9; }
#co-exit > span { position:absolute; right:-21px; bottom:calc(100% + 9px); padding:3px 5px; border-radius:3px; background:#183e34; border:1px solid #759381; color:#d6f3d8; font:bold 9px sans-serif; letter-spacing:.08em; }
.co-signal { position:absolute; top:-9px; left:0; width:7px; height:7px; border-radius:50%; background:#ff6d57; box-shadow:0 0 8px #ff6d57a0; }
.ready .co-signal,.leaving .co-signal { background:#7affb0; box-shadow:0 0 10px #7affb0; }
.co-barrier { position:absolute; top:0; left:4px; height:100%; width:5px; border:1px solid #d4cebd; border-radius:2px; transform-origin:50% 0; background:repeating-linear-gradient(0deg,#efebe0 0 7px,#cf594a 7px 14px); box-shadow:2px 2px 2px #0006; transition:transform .3s ease; z-index:8; }
.leaving .co-barrier { transform:rotate(-90deg); }
#co-stage { overflow:visible; }
.co-car { position:absolute; padding:2px; touch-action:none; cursor:grab; transition:left .18s cubic-bezier(.2,.7,.3,1),top .18s cubic-bezier(.2,.7,.3,1); }
.co-car.drag { cursor:grabbing; z-index:5; transition:none; }
.co-car .co-body { display:block; width:100%; height:100%; filter:drop-shadow(1px 3px 2px #0009); transition:filter .15s; }
.co-vehicle { display:block; width:100%; height:100%; overflow:visible; }
.co-car.sel .co-body,.co-car:focus-visible .co-body { filter:drop-shadow(0 0 2px #ffd479) drop-shadow(0 0 2px #ffd479); }
.co-car.drag .co-body { filter:drop-shadow(2px 5px 3px #0009) brightness(1.08); }
.co-car.drag .co-headlights,.co-car.out .co-headlights { filter:drop-shadow(0 0 5px #fff2a6); }
.co-car.sel .co-taillights { filter:drop-shadow(0 0 4px #ff3348); }
.co-car.out { z-index:7; pointer-events:none; animation:coDriveOut 1.7s .18s cubic-bezier(.45,0,.8,.4) forwards; }
@keyframes coDriveOut { 0% { left:66.666%; } 100% { left:145%; } }
#co-sound { border:1px solid #ffffff30; background:#ffffff08; color:#dbe5e9; border-radius:8px; padding:8px 10px; font-size:.72rem; cursor:pointer; }
@media (prefers-reduced-motion:reduce) { .co-car { transition:none; } .co-car.out { animation-duration:.35s; } .co-barrier { transition:none; } }

#co-hint { margin:12px 6px 0; text-align:center; font-size:.74rem; font-weight:600; color:#a9b4c4; min-height:18px; }
.co-controls { display:flex; gap:8px; padding:12px; }
.co-controls button { flex:1; min-width:0; min-height:52px; border-radius:10px; border:1px solid #ffffff2b; background:linear-gradient(160deg,#2c3542,#1d242e); color:#eaf0f8; font-size:.88rem; font-weight:800; cursor:pointer; touch-action:manipulation; box-shadow:0 3px 0 #0b0e13; transition:transform .08s,filter .08s; }
.co-controls button:active { transform:translateY(2px); box-shadow:0 1px 0 #0b0e13; filter:brightness(1.15); }
.co-controls button:disabled { opacity:.38; cursor:default; box-shadow:none; }
.co-controls button small { display:block; margin-top:3px; font-size:.62rem; font-weight:600; opacity:.7; }
#co-giveup { flex:0 0 88px; background:linear-gradient(160deg,#3a2430,#251820); border-color:#d59ec03d; }

#co-toast { position:absolute; left:50%; bottom:86px; transform:translate(-50%,10px); z-index:11; max-width:86%; padding:9px 15px; border-radius:999px; background:#0b0e13e8; border:1px solid #ffffff2b; color:#eaf0f8; font-size:.76rem; font-weight:700; text-align:center; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; }
#co-toast.on { opacity:1; transform:translate(-50%,0); }

.co-overlay { position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:22px; background:linear-gradient(180deg,#0b0e13aa,#0b0e13e8 45%); }
.co-overlay.on { display:flex; }
.co-panel { width:100%; max-width:400px; text-align:center; padding:26px 20px; border:1px solid #ffffff2b; border-radius:16px; background:linear-gradient(155deg,#242c38f2,#151a22f7); box-shadow:0 16px 45px #04091266; }
.co-eyebrow { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.12em; color:#ffd479; margin-bottom:10px; }
.co-panel h2 { margin:0 0 12px; font-size:1.32rem; font-weight:900; color:#fff; }
.co-panel p { margin:0 0 16px; font-size:.86rem; line-height:1.65; color:#c8d2e0; }
.co-panel p b { color:#ffd479; }
.co-panel small { color:#95a1b2; }
.co-primary { width:100%; min-height:52px; margin-top:6px; border:0; border-radius:12px; background:linear-gradient(135deg,#ff6b5e,#ffb457); color:#2a1008; font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #8f3323; }
.co-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #8f3323; }

/* 인트로 미니 도해 */
.co-demo { position:relative; width:132px; height:88px; margin:2px auto 16px; border-radius:8px; background:#39414f; box-shadow:inset 0 0 0 4px #262d39; }
.co-demo i { position:absolute; border-radius:5px; }
.co-demo i:nth-child(1) { left:6px; top:36px; width:42px; height:18px; background:linear-gradient(160deg,#ff7a6b,#d8362a); animation:coDemo 2.6s ease-in-out infinite; }
.co-demo i:nth-child(2) { left:58px; top:8px; width:18px; height:42px; background:linear-gradient(160deg,#7fb2e5,#3f6fa8); animation:coDemo2 2.6s ease-in-out infinite; }
.co-demo i:nth-child(3) { left:92px; top:52px; width:18px; height:28px; background:linear-gradient(160deg,#8fd6b4,#3f8f6c); }
.co-demo::after { content:''; position:absolute; right:-5px; top:36px; width:9px; height:18px; border-radius:2px; background:#ffd479; }
@keyframes coDemo { 0%,35% { transform:none; } 60%,100% { transform:translateX(78px); opacity:.25; } }
@keyframes coDemo2 { 0%,18% { transform:none; } 32%,100% { transform:translateY(-30px); } }
@media (prefers-reduced-motion:reduce) { .co-demo i { animation:none !important; } }

#co-newrecord { display:inline-block; margin-bottom:8px; padding:4px 12px; border-radius:999px; background:#ffd479; color:#3a2a00; font-size:.68rem; font-weight:900; letter-spacing:.08em; }
#co-final { display:inline-block; font-size:3rem; font-weight:900; line-height:1.1; color:#ffd479; }
.co-final-unit { font-size:1rem; font-weight:800; color:#ffd479; margin-left:3px; }
#co-grade { margin:6px 0 4px; font-size:1.05rem; font-weight:900; color:#fff; }
#co-detail { margin:10px 0 4px; font-size:.8rem; line-height:1.7; color:#b9c4d3; }
#co-detail b { color:#ffd479; }

.co-guide { text-align:left; line-height:1.7; margin-top:16px; }
.co-guide h3 { font-size:1rem; margin:0 0 8px; }
.co-guide p { font-size:.88rem; margin:0 0 8px; }
.co-guide small { display:block; font-size:.78rem; opacity:.85; }

@media (max-width:420px) {
    .co-hud { grid-template-columns:repeat(5,1fr); gap:3px; padding:10px 8px 6px; }
    .co-hud strong { font-size:.92rem; }
    .co-hud .co-scorebox strong { font-size:1.2rem; }
    #co-stage { margin:0 8px; padding:12px 8px 8px; }
    .co-controls { padding:10px 8px; gap:6px; }
    .co-controls button { min-height:48px; font-size:.82rem; }
    #co-giveup { flex:0 0 74px; }
}

/* ── PC(≥860px) 2단 배치 — 판은 왼쪽, HUD·진행바·버튼은 오른쪽 세로 열 ──
   게임 박스를 컨테이너 폭 100% 로 넓히자 정사각형 판이 그대로 커져 세로가 900px 가까이 늘었다(09-22 사용자 지적).
   가로 여유를 오른쪽 열로 쓰고 판은 560px 장면(판 약 440px) 으로 묶어 박스 세로를 570px 안팎으로 되돌린다.
   860px 미만(태블릿·폰)은 위 단일 열 그대로 */
@media (min-width:860px) {
    #co-game { display:grid; grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:auto auto auto minmax(0,1fr);
        grid-template-areas:"tb tb" "st hud" "st tr" "st ct"; }
    .co-toolbar { grid-area:tb; }
    #co-stage { grid-area:st; margin:12px 0 12px 12px; padding:12px; display:flex; flex-direction:column; justify-content:center; }
    .co-scene { max-width:min(100%, 560px); }
    .co-hud { grid-area:hud; grid-template-columns:1fr 1fr; gap:8px; padding:14px 14px 6px 12px; align-content:start; }
    .co-hud > div { border-left:0; padding:9px 6px 8px; border-radius:10px; background:#ffffff08; border:1px solid #ffffff10; }
    .co-hud .co-scorebox { grid-column:1 / -1; padding:10px 6px; }
    .co-hud strong { font-size:1.12rem; }
    .co-hud .co-scorebox strong { font-size:1.7rem; }
    .co-hud .co-lives strong { font-size:1rem; }
    .co-track { grid-area:tr; margin:8px 14px 8px 12px; }
    .co-controls { grid-area:ct; flex-direction:column; align-self:end; gap:8px; padding:8px 14px 14px 12px; }
    .co-controls button { flex:0 0 auto; min-height:52px; }
    #co-giveup { flex:0 0 auto; }
}