/* 물감 번지기 퍼즐 — 수채화 종이 테마(자체 테마. 사이트 라이트/다크 모드와 무관하게 같은 모습 — lightsout 과 같은 방식) */
#cf-game { --c0:#e15759; --c1:#edc948; --c2:#59a14f; --c3:#4e79a7; --c4:#b07aa1; --c5:#f28e2b;
    position:relative; width:100%; margin:0 auto; border:1px solid #e6dccd; border-radius:20px; overflow:hidden;
    background:linear-gradient(180deg,#fffdf8,#f7f1e7); color:#2d2a32; box-shadow:0 14px 36px rgba(80,60,30,.12); user-select:none; -webkit-user-select:none; }
#cf-game, #cf-game * { box-sizing:border-box; }
#cf-game [hidden] { display:none !important; }
#cf-game button { font-family:inherit; }
#cf-game button:focus-visible { outline:3px solid #4e79a7; outline-offset:2px; }

.cf-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:linear-gradient(110deg,#fff7ea,#f6eddd); border-bottom:1px solid #eadfce; }
.cf-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#6b4e2e; }
.cf-brand > i { font-size:22px; background:linear-gradient(135deg,var(--c0),var(--c5) 30%,var(--c1) 50%,var(--c2) 70%,var(--c3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cf-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#8d7d69; letter-spacing:.02em; }
.cf-tools { display:flex; gap:6px; }
.cf-tools button { border:1px solid #dccfbb; background:#fff; color:#5c4c3a; border-radius:8px; padding:7px 9px; font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }
#cf-symbtn.on { background:#4e79a7; border-color:#4e79a7; color:#fff; }

.cf-hud { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:12px 12px 8px; align-items:center; }
.cf-hud > div { text-align:center; border-left:1px solid #eadfce; min-width:0; }
.cf-hud > div:first-child { border-left:0; }
.cf-hud small { display:block; font-size:.62rem; font-weight:600; color:#8d7d69; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-hud strong { display:block; line-height:1.4; font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cf-hud .cf-scorebox strong { color:#c2410c; font-size:1.4rem; }
.cf-hud .cf-lives strong { font-size:.9rem; letter-spacing:-2px; }
#cf-moves.warn, #cf-time.warn { color:#d62f3a; }
#cf-time.warn { animation:cfWarn .55s ease-in-out infinite alternate; }
@keyframes cfWarn { from { opacity:1; transform:scale(1); } to { opacity:.55; transform:scale(1.08); } }
.cf-track { margin:0 16px 14px; height:6px; border-radius:3px; background:#ece3d5; overflow:hidden; }
#cf-progress { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--c3),var(--c2),var(--c1),var(--c5),var(--c0)); transition:width .3s ease; }

.cf-goal { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; margin:0 0 10px; font-size:.78rem; font-weight:700; color:#7a6a57; }
.cf-goal b { font-weight:900; color:#2d2a32; font-variant-numeric:tabular-nums; }
.cf-goal span:first-child, .cf-goal span:first-child b { color:#4e79a7; }
#cf-stage { position:relative; margin:0 12px; padding:12px 10px 10px; border:1px solid #eadfce; border-radius:14px; background:#fffcf6; }

/* 판 — 정사각형, 폭은 화면·높이·520px 중 작은 값. 칸 사이 틈 없이 물감처럼 붙인다 */
#cf-board { display:grid; grid-template-columns:repeat(6,1fr); width:min(100%, 70vh, 520px); aspect-ratio:1; margin:0 auto; border-radius:12px; overflow:hidden;
    box-shadow:0 0 0 3px #fff, 0 0 0 4px #e3d6c3, 0 8px 22px rgba(80,60,30,.14); touch-action:manipulation; -webkit-touch-callout:none; background:#fff; }
.cf-cell { position:relative; min-width:0; min-height:0; cursor:pointer; transition:background-color .15s ease; display:flex; align-items:center; justify-content:center; font-size:clamp(7px, 2.2vw, 13px); line-height:1; color:#ffffffd0; }
.cf-cell.c0 { background:var(--c0); } .cf-cell.c1 { background:var(--c1); } .cf-cell.c2 { background:var(--c2); }
.cf-cell.c3 { background:var(--c3); } .cf-cell.c4 { background:var(--c4); } .cf-cell.c5 { background:var(--c5); }
/* 왼쪽 위 시작 칸 표시 */
.cf-cell[data-i="0"]::before { content:''; position:absolute; left:18%; top:18%; width:28%; height:28%; border-radius:50%; background:#ffffffd9; box-shadow:0 0 0 2px #0000001f; }
/* 방금 번진 칸 — BFS 거리만큼 지연(최대 140ms) 후 160ms 동안 스며든다 */
.cf-cell.in { animation:cfIn .16s ease-out both; }
@keyframes cfIn { 0% { filter:brightness(1.35) saturate(.6); transform:scale(.72); border-radius:40%; } 100% { filter:none; transform:scale(1); border-radius:0; } }
/* 색약 배려 기호 */
#cf-board.sym .cf-cell::after { font-weight:900; text-shadow:0 0 2px #0005; }
#cf-board.sym .c0::after { content:'●'; } #cf-board.sym .c1::after { content:'▲'; color:#6b5200d0; text-shadow:none; }
#cf-board.sym .c2::after { content:'■'; } #cf-board.sym .c3::after { content:'◆'; }
#cf-board.sym .c4::after { content:'★'; } #cf-board.sym .c5::after { content:'\2665\FE0E'; }
#cf-board.sym .cf-cell[data-i="0"]::before { display:none; }
/* 단계 완성 — 판이 한 번 반짝인다 */
#cf-board.clear { animation:cfClear .75s ease-out; }
@keyframes cfClear { 0% { box-shadow:0 0 0 3px #fff, 0 0 0 4px #e3d6c3, 0 0 0 0 #edc94800; } 35% { box-shadow:0 0 0 3px #fff, 0 0 0 4px #edc948, 0 0 30px 8px #edc94888; } 100% { box-shadow:0 0 0 3px #fff, 0 0 0 4px #e3d6c3, 0 8px 22px rgba(80,60,30,.14); } }
@media (prefers-reduced-motion:reduce) { .cf-cell.in, #cf-board.clear, #cf-time.warn, .cf-pick.hint::after, .cf-demo i { animation:none !important; } }

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

/* 색 버튼 — 한 줄, 380px 이하에서 두 줄 */
#cf-palette { display:grid; grid-template-columns:repeat(6,minmax(48px,1fr)); gap:8px; padding:14px 12px 4px; }
#cf-palette[data-k="4"] { grid-template-columns:repeat(4,minmax(48px,1fr)); }
#cf-palette[data-k="5"] { grid-template-columns:repeat(5,minmax(48px,1fr)); }
.cf-pick { position:relative; min-width:48px; min-height:56px; border:0; border-radius:14px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    display:flex; align-items:center; justify-content:center; box-shadow:inset 0 -4px 0 #0000002e, 0 3px 8px #00000018; transition:transform .08s, box-shadow .08s, opacity .15s; }
.cf-pick.c0 { background:var(--c0); } .cf-pick.c1 { background:var(--c1); } .cf-pick.c2 { background:var(--c2); }
.cf-pick.c3 { background:var(--c3); } .cf-pick.c4 { background:var(--c4); } .cf-pick.c5 { background:var(--c5); }
.cf-pick svg { width:24px; height:24px; fill:#fff; filter:drop-shadow(0 1px 1px #0004); }
.cf-pick.c1 svg { fill:#5b4500; filter:none; }
.cf-pick kbd { position:absolute; right:6px; top:4px; font:700 .6rem/1 inherit; color:#ffffffc0; background:none; padding:0; box-shadow:none; }
.cf-pick.c1 kbd { color:#5b4500b0; }
.cf-pick:active { transform:translateY(2px); box-shadow:inset 0 -2px 0 #0000002e; }
@media (hover:hover) { .cf-pick:not(:disabled):not(.cur):hover { transform:translateY(-2px); } }
/* 지금 영역 색 — 눌러도 소용없음을 보여 준다 */
.cf-pick.cur { opacity:.38; box-shadow:inset 0 0 0 3px #ffffffaa; cursor:default; }
.cf-pick:disabled { cursor:default; }
/* 힌트 — 고리가 숨 쉰다 */
.cf-pick.hint::after { content:''; position:absolute; inset:-6px; border:3px solid #2d2a32; border-radius:18px; pointer-events:none; animation:cfHint .7s ease-in-out infinite alternate; }
@keyframes cfHint { from { opacity:1; transform:scale(1); } to { opacity:.35; transform:scale(1.06); } }

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

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

.cf-overlay { position:absolute; inset:0; z-index:12; display:none; align-items:center; justify-content:center; padding:22px; background:linear-gradient(180deg,#fffaf2b3,#f7f1e7f0 45%); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.cf-overlay.on { display:flex; }
.cf-panel { width:100%; max-width:400px; text-align:center; padding:26px 20px; border:1px solid #e6dccd; border-radius:16px; background:#fff; box-shadow:0 16px 40px rgba(80,60,30,.18); }
.cf-eyebrow { display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.12em; color:#c2410c; margin-bottom:10px; }
.cf-panel h2 { margin:0 0 12px; font-size:1.32rem; font-weight:900; color:#2d2a32; }
.cf-panel p { margin:0 0 16px; font-size:.86rem; line-height:1.65; color:#5c5048; }
.cf-panel p b { color:#c2410c; }
.cf-panel p small { color:#8d7d69; }
.cf-panel > small { color:#8d7d69; font-size:.74rem; }
.cf-best { min-height:1em; margin-bottom:6px; font-size:.78rem; font-weight:700; color:#c2410c; }
.cf-primary { width:100%; min-height:52px; margin-top:6px; border:0; border-radius:12px; background:linear-gradient(135deg,#4e79a7,#59a14f); color:#fff; font-size:1rem; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #2f5279; }
.cf-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #2f5279; }

/* 인트로 미니 도해 — 왼쪽 위에서 물감이 번져 나간다 */
.cf-demo { display:grid; grid-template-columns:repeat(4,22px); width:max-content; margin:2px auto 16px; border-radius:8px; overflow:hidden; box-shadow:0 0 0 3px #fff, 0 0 0 4px #e3d6c3; }
.cf-demo i { width:22px; height:22px; background:var(--c3); }
.cf-demo i:nth-child(2), .cf-demo i:nth-child(5), .cf-demo i:nth-child(6), .cf-demo i:nth-child(9) { background:var(--c1); }
.cf-demo i:nth-child(3), .cf-demo i:nth-child(7), .cf-demo i:nth-child(10), .cf-demo i:nth-child(13) { background:var(--c0); }
.cf-demo i:nth-child(4), .cf-demo i:nth-child(8), .cf-demo i:nth-child(14) { background:var(--c2); }
.cf-demo i:nth-child(1) { background:var(--c1); }
.cf-demo i:nth-child(1), .cf-demo i:nth-child(2), .cf-demo i:nth-child(5), .cf-demo i:nth-child(6), .cf-demo i:nth-child(9) { animation:cfDemo 3s steps(1) infinite; }
@keyframes cfDemo { 0%, 45% { background:var(--c1); } 46%, 100% { background:var(--c0); } }

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

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

@media (max-width:420px) {
    .cf-toolbar { padding:10px 12px; }
    .cf-brand { gap:7px; font-size:.64rem; letter-spacing:.08em; }
    .cf-tools button { padding:6px 7px; font-size:.68rem; }
    .cf-hud { gap:3px; padding:10px 6px 6px; }
    .cf-hud small { font-size:.56rem; letter-spacing:0; }
    .cf-hud strong { font-size:.9rem; }
    .cf-hud .cf-scorebox strong { font-size:1.15rem; }
    .cf-hud .cf-lives strong { font-size:.72rem; }
    #cf-stage { margin:0 8px; padding:8px 6px 8px; }
    #cf-palette { gap:6px; padding:12px 8px 2px; }
    .cf-controls { padding:10px 8px; gap:6px; }
    .cf-controls button { min-height:46px; font-size:.8rem; }
}
@media (max-width:380px) {
    #cf-palette, #cf-palette[data-k="5"] { grid-template-columns:repeat(3,minmax(48px,1fr)); }
    #cf-palette[data-k="4"] { grid-template-columns:repeat(4,minmax(48px,1fr)); }
    .cf-pick { min-height:50px; }
}

/* ── PC(≥860px) 2단 배치 — 판은 왼쪽, HUD·진행바·색 버튼·조작은 오른쪽 세로 열(lightsout 과 같은 구조) ── */
@media (min-width:860px) {
    #cf-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 pal" "st ct"; }
    .cf-toolbar { grid-area:tb; }
    #cf-stage { grid-area:st; margin:12px 0 12px 12px; padding:16px 12px 12px; display:flex; flex-direction:column; justify-content:center; }
    .cf-hud { grid-area:hud; grid-template-columns:1fr 1fr; gap:8px; padding:14px 14px 6px 12px; align-content:start; }
    .cf-hud > div { border-left:0; padding:9px 6px 8px; border-radius:10px; background:#fff; border:1px solid #eadfce; }
    .cf-hud .cf-scorebox { grid-column:1 / -1; order:-1; padding:10px 6px; }
    .cf-hud strong { font-size:1.12rem; }
    .cf-hud .cf-scorebox strong { font-size:1.7rem; }
    .cf-hud .cf-lives strong { font-size:1rem; }
    .cf-track { grid-area:tr; margin:8px 14px 8px 12px; }
    #cf-palette, #cf-palette[data-k="4"], #cf-palette[data-k="5"] { grid-area:pal; grid-template-columns:repeat(3,1fr); padding:8px 14px 4px 12px; align-self:start; }
    #cf-palette[data-k="4"] { grid-template-columns:repeat(2,1fr); }
    .cf-pick { min-height:60px; }
    .cf-controls { grid-area:ct; grid-template-columns:1fr 1fr 1fr; align-self:end; gap:8px; padding:8px 14px 14px 12px; }
}