/* 퀸즈 퍼즐 — 밝은 궁전 테마(자체 테마. 사이트 라이트/다크 모드와 무관하게 같은 모습 — colorflood 와 같은 방식) */
#qn-game {
    /* 구역 색 10가지 — 파스텔이지만 ✕·왕관(진회색)과 대비가 남도록 명도 70~85% */
    --q0:#f4a9a0; --q1:#f8c88e; --q2:#f3e38e; --q3:#c8e69c; --q4:#9fdec7;
    --q5:#a9d3f0; --q6:#bcc2f2; --q7:#dcbdf0; --q8:#f5bcd9; --q9:#d9d0c3;
    --ink:#262a35; --bad:#d1293d; --tk:3px; --tn:1px;
    position:relative; width:100%; margin:0 auto; border:1px solid #e4e1ec; border-radius:20px; overflow:hidden;
    background:linear-gradient(180deg,#fdfcff,#f4f2f9); color:var(--ink); box-shadow:0 14px 36px rgba(40,30,80,.10); user-select:none; -webkit-user-select:none; }
#qn-game, #qn-game * { box-sizing:border-box; }
#qn-game [hidden] { display:none !important; }
#qn-game button { font-family:inherit; }
#qn-game button:focus-visible { outline:3px solid #6b5bd6; outline-offset:2px; }

.qn-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:linear-gradient(110deg,#f7f3ff,#efeaf9); border-bottom:1px solid #e4e1ec; }
.qn-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#4a3f7a; }
.qn-brand svg { width:24px; height:24px; fill:#d9a521; filter:drop-shadow(0 1px 0 #8a6510); flex:none; }
.qn-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#857ca6; letter-spacing:.02em; }
.qn-tools { display:flex; gap:6px; }
.qn-tools button { border:1px solid #d6d0e6; background:#fff; color:#4a4260; border-radius:8px; padding:7px 9px; font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.qn-tools button b { font-weight:800; color:#9a92b5; }
#qn-autox.on { background:#5b4bc4; border-color:#5b4bc4; color:#fff; }
#qn-autox.on b { color:#fff; }

.qn-hud { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:12px 12px 8px; align-items:center; }
.qn-hud > div { text-align:center; border-left:1px solid #e4e1ec; min-width:0; }
.qn-hud > div:first-child { border-left:0; }
.qn-hud small { display:block; font-size:.62rem; font-weight:600; color:#857ca6; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qn-hud strong { display:block; line-height:1.4; font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.qn-hud .qn-scorebox strong { color:#5b4bc4; font-size:1.35rem; }
.qn-track { margin:0 16px 12px; height:6px; border-radius:3px; background:#e9e5f2; overflow:hidden; }
#qn-progress { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#9f8cf0,#d9a521); transition:width .3s ease; }

#qn-stage { position:relative; margin:0 12px; padding:12px 10px 10px; border:1px solid #e4e1ec; border-radius:14px; background:#fff; }

/* 판 — 정사각형, 폭은 화면과 560px 중 작은 값. 칸 테두리는 위·왼쪽만 그리고(겹침 없음) 바깥은 판 테두리가 맡는다 */
#qn-board { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); width:min(100%, 560px); aspect-ratio:1; margin:0 auto;
    border:var(--tk) solid var(--ink); border-radius:10px; overflow:hidden; background:var(--ink);
    touch-action:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
#qn-board:empty { background:#f1eff6; border-color:#d6d0e6; }
.qn-cell { position:relative; min-width:0; min-height:0; cursor:pointer; background-color:var(--rc, #eee); }
.qn-cell.nT { border-top:var(--tn) solid rgba(38,42,53,.22); }
.qn-cell.nL { border-left:var(--tn) solid rgba(38,42,53,.22); }
.qn-cell.tT { border-top:var(--tk) solid var(--ink); }
.qn-cell.tL { border-left:var(--tk) solid var(--ink); }
/* 표시: ✕ 메모 · 자동 ✕(흐림) · 왕관 · 규칙 위반 왕관 */
.qn-cell::after { content:''; position:absolute; inset:0; background:no-repeat center; pointer-events:none; }
.qn-cell.x::after { background-size:34%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23262a35' stroke-opacity='.62' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qn-cell.ax::after { background-size:26%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23262a35' stroke-opacity='.26' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qn-cell.q::after { background-size:66%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23262a35'%3E%3Cpath d='M2.6 8.4l4.7 3.7L12 5l4.7 7.1 4.7-3.7-1.8 9.8H4.4z'/%3E%3Crect x='4.4' y='18.7' width='15.2' height='2.5' rx='.9'/%3E%3Ccircle cx='2.6' cy='7.7' r='1.5'/%3E%3Ccircle cx='12' cy='4' r='1.6'/%3E%3Ccircle cx='21.4' cy='7.7' r='1.5'/%3E%3C/svg%3E"); animation:qnDrop .16s ease-out; }
.qn-cell.q.bad::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d1293d'%3E%3Cpath d='M2.6 8.4l4.7 3.7L12 5l4.7 7.1 4.7-3.7-1.8 9.8H4.4z'/%3E%3Crect x='4.4' y='18.7' width='15.2' height='2.5' rx='.9'/%3E%3Ccircle cx='2.6' cy='7.7' r='1.5'/%3E%3Ccircle cx='12' cy='4' r='1.6'/%3E%3Ccircle cx='21.4' cy='7.7' r='1.5'/%3E%3C/svg%3E"); }
.qn-cell.q.bad { box-shadow:inset 0 0 0 2px var(--bad); }
/* 왕관이 둘 이상 들어간 줄·칸·구역 — 붉은 빗금 */
.qn-cell.tint { background-image:repeating-linear-gradient(135deg, rgba(209,41,61,.20) 0 3px, transparent 3px 8px); }
@keyframes qnDrop { from { transform:scale(.55); opacity:.2; } to { transform:scale(1); opacity:1; } }
@media (hover:hover) { #qn-board:not(.clear) .qn-cell:hover { filter:brightness(1.06) saturate(1.08); } }
/* 단계 완성 — 왕관이 차례로 금색으로 반짝인다 */
#qn-board.clear { animation:qnGlow 1s ease-out; }
#qn-board.clear .qn-cell.q::after { animation:qnPop .6s ease-out both; filter:drop-shadow(0 0 3px #f5c542); }
#qn-board.clear .qn-cell:not(.q) { filter:saturate(.75) brightness(1.04); transition:filter .4s; }
@keyframes qnPop { 0% { transform:scale(1); } 40% { transform:scale(1.28) rotate(-6deg); } 100% { transform:scale(1); } }
@keyframes qnGlow { 0% { box-shadow:0 0 0 0 #f5c54200; } 35% { box-shadow:0 0 0 6px #f5c54288, 0 0 30px 10px #f5c54266; } 100% { box-shadow:0 0 0 0 #f5c54200; } }
@media (prefers-reduced-motion:reduce) { .qn-cell.q::after, #qn-board.clear, #qn-board.clear .qn-cell.q::after { animation:none !important; } }

#qn-hint { margin:12px 6px 0; text-align:center; font-size:.78rem; font-weight:600; color:#6f678c; min-height:18px; }

.qn-controls { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; padding:12px; }
.qn-controls button { min-width:0; min-height:50px; border-radius:10px; border:1px solid #d6d0e6; background:#fff; color:#3b3452; font-size:.86rem; font-weight:800; cursor:pointer; touch-action:manipulation; box-shadow:0 3px 0 #e1dcec; transition:transform .08s; }
.qn-controls button:active { transform:translateY(2px); box-shadow:0 1px 0 #e1dcec; }
.qn-controls button:disabled { opacity:.42; cursor:default; box-shadow:none; }
.qn-controls button small { display:block; margin-top:3px; font-size:.62rem; font-weight:600; opacity:.7; }
#qn-giveup { background:#fbf1f3; border-color:#ecc9d0; }

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

.qn-overlay { position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:22px; background:linear-gradient(180deg,#fbfaffb3,#f4f2f9f0 45%); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.qn-overlay.on { display:flex; }
.qn-panel { width:100%; max-width:400px; max-height:100%; overflow:auto; text-align:center; padding:24px 20px; border:1px solid #e4e1ec; border-radius:16px; background:#fff; box-shadow:0 16px 40px rgba(40,30,80,.16); }
.qn-eyebrow { display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.12em; color:#5b4bc4; margin-bottom:10px; }
.qn-panel h2 { margin:0 0 12px; font-size:1.32rem; font-weight:900; color:var(--ink); }
.qn-panel p { margin:0 0 16px; font-size:.86rem; line-height:1.65; color:#555068; }
.qn-panel p b { color:#5b4bc4; }
.qn-panel p small { color:#857ca6; }
.qn-panel > small { color:#857ca6; font-size:.74rem; }
.qn-best { min-height:1em; margin-bottom:6px; font-size:.78rem; font-weight:700; color:#5b4bc4; }
.qn-primary { width:100%; min-height:52px; margin-top:6px; border:0; border-radius:12px; background:linear-gradient(135deg,#6b5bd6,#b0569b); color:#fff; font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #3f3296; }
.qn-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #3f3296; }

/* 인트로 미니 도해 — 첫 5×5 판의 정답 */
.qn-demo { display:grid; width:130px; aspect-ratio:1; margin:2px auto 14px; border:2px solid var(--ink); border-radius:7px; overflow:hidden; background:var(--ink); --tk:2px; }
.qn-demo .qn-cell { cursor:default; }

#qn-newrecord { display:inline-block; margin-bottom:8px; padding:4px 12px; border-radius:999px; background:#f5c542; color:#4a3700; font-size:.68rem; font-weight:900; letter-spacing:.08em; }
#qn-final { display:inline-block; font-size:3rem; font-weight:900; line-height:1.1; color:#5b4bc4; }
.qn-final-unit { font-size:1rem; font-weight:800; color:#5b4bc4; margin-left:3px; }
#qn-grade { margin:6px 0 4px; font-size:1.05rem; font-weight:900; color:var(--ink); }
#qn-detail { margin:10px 0 4px; font-size:.8rem; line-height:1.7; color:#5e5874; }
#qn-detail b { color:#5b4bc4; }
.qn-times { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:10px 0 6px; font-size:.7rem; line-height:1.45; font-variant-numeric:tabular-nums; }
.qn-times span { padding:5px 2px; border-radius:8px; background:#f6f4fb; border:1px solid #ebe7f4; color:#5e5874; }
.qn-times span b { color:#3b3452; }

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

@media (max-width:480px) {
    #qn-board[data-n="9"], #qn-board[data-n="10"] { --tk:2px; }
}
@media (max-width:420px) {
    .qn-toolbar { padding:10px 10px; }
    .qn-brand { gap:7px; font-size:.64rem; letter-spacing:.08em; }
    .qn-tools button { padding:6px 7px; font-size:.68rem; }
    .qn-hud { gap:3px; padding:10px 4px 6px; }
    .qn-hud small { font-size:.56rem; letter-spacing:0; }
    .qn-hud strong { font-size:.9rem; }
    .qn-hud .qn-scorebox strong { font-size:1.1rem; }
    .qn-track { margin:0 10px 10px; }
    #qn-stage { margin:0 4px; padding:6px 4px 8px; border-radius:12px; }
    .qn-controls { padding:10px 6px; gap:6px; }
    .qn-controls button { min-height:46px; font-size:.78rem; }
}

/* ── PC(≥860px) 2단 배치 — 판은 왼쪽, HUD·조작은 오른쪽 세로 열 ── */
@media (min-width:860px) {
    #qn-game { display:grid; grid-template-columns:minmax(0,1fr) 280px; grid-template-rows:auto auto auto minmax(0,1fr);
        grid-template-areas:"tb tb" "st hud" "st tr" "st ct"; }
    .qn-toolbar { grid-area:tb; }
    #qn-stage { grid-area:st; margin:12px 0 12px 12px; padding:16px 12px 12px; display:flex; flex-direction:column; justify-content:center; }
    #qn-board { width:min(100%, 560px, 72vh); }
    .qn-hud { grid-area:hud; grid-template-columns:1fr 1fr; gap:8px; padding:14px 14px 6px 12px; align-content:start; }
    .qn-hud > div { border-left:0; padding:9px 6px 8px; border-radius:10px; background:#fff; border:1px solid #e4e1ec; }
    .qn-hud .qn-scorebox { grid-column:1 / -1; order:-1; padding:10px 6px; }
    .qn-hud strong { font-size:1.12rem; }
    .qn-hud .qn-scorebox strong { font-size:1.7rem; }
    .qn-track { grid-area:tr; margin:8px 14px 8px 12px; }
    .qn-controls { grid-area:ct; grid-template-columns:1fr 1fr; align-self:end; gap:8px; padding:8px 14px 14px 12px; }
    #qn-giveup { grid-column:1 / -1; }
}