/* 소코반(상자 밀기 퍼즐) — 창고 테마(자체 테마, 사이트 라이트/다크 모두 동일하게 보인다)
   ★#sk-game 에 max-width 를 두지 않는다★ — .quiz_doc·.answer_shadow 와 같은 폭으로 꽉 채우고,
   판이 커지는 것은 #sk-board 의 높이 cap(min(62vh,520px))으로 잡는다. */
#sk-game { position:relative; width:100%; max-width:100%; margin:0 auto; border:1px solid #3a3326; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,#221d16,#15120d); color:#f2ece1; box-shadow:0 18px 45px rgba(30,20,8,.3); user-select:none; -webkit-user-select:none; }
#sk-game, #sk-game * { box-sizing:border-box; }
#sk-game [hidden] { display:none !important; }
#sk-game button { font-family:inherit; }
#sk-game button:focus-visible { outline:3px solid #ffc861; outline-offset:-3px; }

.sk-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:linear-gradient(110deg,#33291c,#1d1811); border-bottom:1px solid #ffffff12; }
.sk-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#ffc861; }
.sk-brand > i { font-size:22px; color:#c98a3c; }
.sk-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#b5a890; letter-spacing:.02em; }
#sk-sound { border:1px solid #ffffff30; background:#ffffff08; color:#e8dfcd; border-radius:8px; padding:8px 10px; font-size:.72rem; cursor:pointer; touch-action:manipulation; }

.sk-hud { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:12px 12px 8px; align-items:center; }
.sk-hud > div { text-align:center; border-left:1px solid #ffffff12; }
.sk-hud > div:first-child { border-left:0; }
.sk-hud small { display:block; font-size:.62rem; font-weight:600; color:#aa9f8c; letter-spacing:.03em; }
.sk-hud strong { display:block; line-height:1.4; font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; }
.sk-hud .sk-scorebox strong { color:#ffc861; font-size:1.4rem; }
.sk-hud .sk-lives strong { font-size:.9rem; letter-spacing:-2px; }
#sk-time.warn { color:#ff7b63; animation:skWarn .55s ease-in-out infinite alternate; }
@keyframes skWarn { from { opacity:1; transform:scale(1); } to { opacity:.55; transform:scale(1.08); } }

.sk-track { position:relative; margin:0 16px 14px; height:16px; border-radius:8px; background:#0d0b07; overflow:hidden; }
#sk-progress { display:block; height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,#c98a3c,#ffc861); transition:width .3s ease; }
.sk-trackcap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:800; color:#f3e7d2; letter-spacing:.06em; text-shadow:0 1px 2px #000a; }

#sk-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%,#3a3124 0%,#17130e 100%); }

/* ── 판 ──────────────────────────────────────
   --ar = 가로/세로 비. 폭을 (비 × 최대 높이)로 묶어 세로가 화면을 넘지 않게 한다. */
#sk-board { --ar:1; --cols:8; --rows:8; position:relative; width:min(100%, calc(var(--ar) * min(62vh, 520px)), 560px); aspect-ratio:var(--ar); margin:0 auto; border-radius:10px; overflow:hidden; background:#2b2419; box-shadow:inset 0 0 0 3px #4b3f2c, 0 6px 20px #0008; touch-action:none; cursor:pointer; }
@supports not (aspect-ratio:1/1) { #sk-board { height:min(62vh,520px); } }
#sk-cells { position:absolute; inset:0; display:grid; grid-template-columns:repeat(var(--cols),1fr); grid-template-rows:repeat(var(--rows),1fr); }
.sk-cell { display:block; position:relative; }
.sk-cell.floor { background:linear-gradient(160deg,#55493a,#453a2d); box-shadow:inset 0 0 0 1px #00000026; }
.sk-cell.wall { background:linear-gradient(170deg,#6a5a44,#3f3528); box-shadow:inset 0 2px 0 #8b775a, inset 0 -3px 0 #2a2118, inset 0 0 0 1px #241d14; }
.sk-cell.goal::after { content:''; position:absolute; left:50%; top:50%; width:42%; height:42%; transform:translate(-50%,-50%); border-radius:50%; border:3px dashed #ffc861; opacity:.85; }

#sk-things { position:absolute; inset:0; pointer-events:none; }
.sk-box, .sk-player { position:absolute; display:block; padding:0; transition:left .12s ease, top .12s ease; }
.sk-crate { display:block; position:absolute; inset:5%; border-radius:5px; background:linear-gradient(160deg,#c88c42,#9a6326); box-shadow:inset 0 0 0 3px #7d4e1c, inset 0 3px 0 #e0ab63, 0 3px 5px #0007; }
.sk-crate::before, .sk-crate::after { content:''; position:absolute; inset:14%; border-radius:2px; }
.sk-crate::before { background:linear-gradient(135deg,transparent 44%,#7d4e1c 44% 56%,transparent 56%); }
.sk-crate::after { background:linear-gradient(45deg,transparent 44%,#7d4e1c 44% 56%,transparent 56%); }
.sk-box.on .sk-crate { background:linear-gradient(160deg,#7bd79a,#3f9b63); box-shadow:inset 0 0 0 3px #2d7247, inset 0 3px 0 #a8edc0, 0 0 12px #5ec98599; }
.sk-box.on .sk-crate::before, .sk-box.on .sk-crate::after { background-image:linear-gradient(135deg,transparent 44%,#2d7247 44% 56%,transparent 56%); }
.sk-box.on .sk-crate::after { background-image:linear-gradient(45deg,transparent 44%,#2d7247 44% 56%,transparent 56%); }

.sk-player { z-index:3; }
.sk-worker { display:block; position:absolute; inset:9%; border-radius:50%; background:radial-gradient(circle at 36% 30%,#8fd3ff,#2f7fc4 60%,#1d5a92); box-shadow:0 3px 5px #0008, inset 0 -3px 6px #10456f; }
.sk-worker::before { content:''; position:absolute; left:14%; right:14%; top:4%; height:34%; border-radius:999px 999px 4px 4px; background:linear-gradient(#ffd98a,#e8a53c); box-shadow:0 1px 0 #00000040; }
.sk-worker::after { content:''; position:absolute; left:50%; top:62%; width:26%; height:26%; transform:translate(-50%,-50%); border-radius:2px; background:#eaf4ff; opacity:.9; }
.sk-player.f0 .sk-worker::after { clip-path:polygon(50% 0,100% 100%,0 100%); }
.sk-player.f1 .sk-worker::after { clip-path:polygon(0 0,100% 0,50% 100%); }
.sk-player.f2 .sk-worker::after { clip-path:polygon(0 50%,100% 0,100% 100%); }
.sk-player.f3 .sk-worker::after { clip-path:polygon(0 0,100% 50%,0 100%); }
#sk-board.cleared { box-shadow:inset 0 0 0 3px #7bd79a, 0 0 24px #5ec98566; }
@media (prefers-reduced-motion:reduce) { .sk-box, .sk-player { transition:none; } #sk-time.warn { animation:none; } }

#sk-hint { margin:12px 6px 0; text-align:center; font-size:.74rem; font-weight:600; color:#b7ab97; min-height:18px; }
#sk-toast { position:absolute; left:50%; bottom:14px; transform:translate(-50%,10px); z-index:11; max-width:90%; padding:9px 15px; border-radius:999px; background:#120f0ae8; border:1px solid #ffffff2b; color:#f2ece1; font-size:.76rem; font-weight:700; text-align:center; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
#sk-toast.on { opacity:1; transform:translate(-50%,0); }

/* ── 방향 버튼(D-pad) ── */
.sk-padwrap { display:flex; justify-content:center; padding:12px 12px 0; }
#sk-pad { display:grid; grid-template-columns:repeat(3,56px); grid-template-rows:repeat(3,48px); gap:6px; touch-action:none; }
#sk-pad button { border:1px solid #ffffff2b; border-radius:10px; background:linear-gradient(160deg,#3b3124,#241d14); color:#f3e8d4; font-size:1.1rem; font-weight:900; cursor:pointer; box-shadow:0 3px 0 #0d0b07; touch-action:none; }
#sk-pad button:active { transform:translateY(2px); box-shadow:0 1px 0 #0d0b07; filter:brightness(1.18); }
#sk-pad .sk-up { grid-area:1 / 2; } #sk-pad .sk-left { grid-area:2 / 1; }
#sk-pad .sk-right { grid-area:2 / 3; } #sk-pad .sk-down { grid-area:3 / 2; }
.sk-padhint { grid-area:2 / 2; display:flex; align-items:center; justify-content:center; font-size:.58rem; font-weight:700; color:#8d8171; line-height:1.3; text-align:center; }

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

.sk-overlay { position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:22px; background:linear-gradient(180deg,#120f0aaa,#120f0ae8 45%); }
.sk-overlay.on { display:flex; }
.sk-panel { width:100%; max-width:400px; text-align:center; padding:26px 20px; border:1px solid #ffffff2b; border-radius:16px; background:linear-gradient(155deg,#332a1ef2,#19150ff7); box-shadow:0 16px 45px #0a070266; }
.sk-eyebrow { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.12em; color:#ffc861; margin-bottom:10px; }
.sk-panel h2 { margin:0 0 12px; font-size:1.32rem; font-weight:900; color:#fff; }
.sk-panel p { margin:0 0 16px; font-size:.86rem; line-height:1.65; color:#ded3bf; }
.sk-panel p b { color:#ffc861; }
.sk-panel small { color:#a89c88; }
.sk-primary { width:100%; min-height:52px; margin-top:6px; border:0; border-radius:12px; background:linear-gradient(135deg,#e2922f,#ffc861); color:#2e1a04; font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #8a5312; }
.sk-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #8a5312; }

/* 인트로 미니 도해 — 상자를 목표점으로 밀어 넣는 장면 */
.sk-demo { position:relative; width:150px; height:50px; margin:2px auto 16px; border-radius:8px; background:#4a3f30; box-shadow:inset 0 0 0 4px #2d2619; }
.sk-demo i { position:absolute; top:11px; border-radius:4px; }
.sk-demo .d1 { left:10px; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 36% 30%,#8fd3ff,#2f7fc4); animation:skDemoP 2.4s ease-in-out infinite; }
.sk-demo .d2 { left:44px; width:26px; height:26px; background:linear-gradient(160deg,#c88c42,#9a6326); box-shadow:inset 0 0 0 3px #7d4e1c; animation:skDemoB 2.4s ease-in-out infinite; }
.sk-demo .d3 { left:112px; width:26px; height:26px; border-radius:50%; border:3px dashed #ffc861; background:none; }
@keyframes skDemoP { 0%,12% { transform:none; } 70%,100% { transform:translateX(68px); } }
@keyframes skDemoB { 0%,12% { transform:none; } 70%,100% { transform:translateX(68px); } }
@media (prefers-reduced-motion:reduce) { .sk-demo i { animation:none !important; } }

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

/* 규칙 안내 — 전역 .answer_shadow 는 가운데 정렬·1.1em 이라 반드시 눌러 준다 */
.sk-guide { text-align:left; line-height:1.7; margin-top:16px; }
.sk-guide h3 { font-size:1rem; margin:0 0 8px; }
.sk-guide p { font-size:.9rem; margin:0 0 8px; }
.sk-guide small { display:block; font-size:.8rem; opacity:.85; }

@media (max-width:420px) {
    .sk-hud { grid-template-columns:repeat(5,1fr); gap:3px; padding:10px 8px 6px; }
    .sk-hud strong { font-size:.92rem; }
    .sk-hud .sk-scorebox strong { font-size:1.2rem; }
    #sk-stage { margin:0 8px; padding:12px 8px 8px; }
    #sk-board { width:min(100%, calc(var(--ar) * min(54vh, 520px)), 560px); }
    #sk-pad { grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,44px); }
    .sk-controls { padding:10px 8px; gap:6px; }
    .sk-controls button { min-height:48px; font-size:.82rem; }
    #sk-giveup { flex:0 0 74px; }
}

/* ── PC(≥860px) 2단 배치 — 판은 왼쪽, HUD·방향키·버튼은 오른쪽 세로 열 ──
   게임 박스가 컨테이너 폭 100% 라 PC 에서는 가로 여유를 오른쪽 열로 쓴다(판만 커지는 것을 막는다). */
@media (min-width:860px) {
    #sk-game { display:grid; grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:auto auto auto auto minmax(0,1fr);
        grid-template-areas:"tb tb" "st hud" "st tr" "st pad" "st ct"; }
    .sk-toolbar { grid-area:tb; }
    #sk-stage { grid-area:st; margin:12px 0 12px 12px; padding:12px; display:flex; flex-direction:column; justify-content:center; }
    #sk-board { width:min(100%, calc(var(--ar) * min(58vh, 460px)), 500px); }
    .sk-hud { grid-area:hud; grid-template-columns:1fr 1fr; gap:8px; padding:14px 14px 6px 12px; align-content:start; }
    .sk-hud > div { border-left:0; padding:9px 6px 8px; border-radius:10px; background:#ffffff08; border:1px solid #ffffff10; }
    .sk-hud .sk-scorebox { grid-column:1 / -1; padding:10px 6px; }
    .sk-hud strong { font-size:1.12rem; }
    .sk-hud .sk-scorebox strong { font-size:1.7rem; }
    .sk-hud .sk-lives strong { font-size:1rem; }
    .sk-track { grid-area:tr; margin:8px 14px 8px 12px; }
    .sk-padwrap { grid-area:pad; padding:6px 14px 0 12px; }
    .sk-controls { grid-area:ct; flex-direction:column; align-self:end; gap:8px; padding:8px 14px 14px 12px; }
    .sk-controls button { flex:0 0 auto; min-height:52px; }
    #sk-giveup { flex:0 0 auto; }
}