/* sorikey/sorikey.css — Sorikey 소리열쇠 (구 Sound Lock)
   nb-theme.css 의 --nb-* 디자인 토큰을 재사용 (sorikey/index.php 가 먼저 로드). */
html,body{margin:0;padding:0;background:var(--nb-cream);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font-family:inherit;cursor:pointer;padding:0}

/* ===== 커스텀 아이콘 (인라인 SVG — 이모지 대체) ===== */
.sl-ic{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex:none}
/* 아이콘 버튼: SVG 를 중앙 정렬 (버튼 font-size 가 곧 아이콘 크기) */
.sl-big-btn,.sl-mini-btn,.sl-hear,.sl-open-btn{display:flex;align-items:center;justify-content:center}
.sl-big-btn .sl-ic{width:.9em;height:.9em}          /* ▶ play — 원 안에서 살짝 작게 */
.sl-mini-btn.sl-warn{background:var(--nb-red);color:#fff}  /* 리셋 확인 대기 */

.sl-screen{position:relative;max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
    align-items:center;padding:12px 14px calc(20px + env(safe-area-inset-bottom));box-sizing:border-box}
.sl-home-abs{position:absolute;top:12px;left:14px}

/* ===== 스플래시 ===== */
.sl-splash,.sl-intro,.sl-clear{justify-content:center;gap:14px;text-align:center}
.sl-logo{position:relative;font-size:96px;line-height:1}
.sl-logo-syl{display:inline-block;background:#fff;border:var(--nb-border);border-radius:var(--nb-radius);
    box-shadow:var(--nb-shadow-lg);padding:10px 22px}
/* 로고 자물쇠 배지 — 커스텀 아이콘을 노랑 칩에 담아 마감 */
.sl-logo-lock{position:absolute;right:-20px;bottom:-16px;width:52px;height:52px;font-size:30px;
    display:flex;align-items:center;justify-content:center;color:var(--nb-black);
    background:var(--nb-yellow);border:var(--nb-border);border-radius:14px;box-shadow:var(--nb-shadow-sm);
    transform:rotate(-8deg)}
.sl-title{font-size:30px;font-weight:900;letter-spacing:2px;color:var(--nb-black)}
.sl-sub{font-size:15px;color:#888;letter-spacing:6px}
/* 스플래시 하단 홈페이지 링크 */
.sl-site-link{margin-top:14px;font-size:12px;color:#a09a8c;text-decoration:none;letter-spacing:.5px}
.sl-site-link:hover,.sl-site-link:active{color:var(--nb-black);text-decoration:underline}
.sl-big-btn{margin-top:10px;width:96px;height:96px;border-radius:50%;border:var(--nb-border);
    box-shadow:var(--nb-shadow);background:var(--nb-yellow);font-size:38px;color:var(--nb-black);
    transition:transform .1s}
.sl-big-btn:active{transform:translate(3px,3px);box-shadow:none}
.sl-mini-btn{width:44px;height:44px;border-radius:12px;border:var(--nb-border);box-shadow:var(--nb-shadow-sm);
    background:#fff;font-size:20px}
.sl-mini-btn:active{transform:translate(2px,2px);box-shadow:none}

/* ===== 스테이지 선택 칩 (스플래시 복습 그리드) ===== */
.sl-stage-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:352px;margin-top:16px}
.sl-stage-chip{position:relative;width:48px;height:48px;border:var(--nb-border);border-radius:10px;
    font-size:20px;font-weight:700;color:var(--nb-black);background:#fff;
    display:flex;align-items:center;justify-content:center;box-shadow:var(--nb-shadow-sm)}
.sl-stage-chip:active{transform:translate(2px,2px);box-shadow:none}
.sl-stage-chip.done{background:var(--nb-mint)}
.sl-stage-chip.cur{background:var(--nb-yellow);animation:slPulse 1.6s infinite}
.sl-stage-chip.off{background:#f0ede2;color:#c5c0ae;border-color:#c5c0ae;border-style:dashed;
    box-shadow:none;cursor:default}
.sl-chip-n{position:absolute;right:4px;bottom:2px;font-size:9px;font-weight:900;opacity:.55}

/* ===== 인트로 (해금 카드) ===== */
.sl-stage-label{font-weight:900;font-size:16px;letter-spacing:1px;color:var(--nb-black)}
.sl-new-badge{background:var(--nb-yellow);border:var(--nb-border);box-shadow:var(--nb-shadow-sm);
    border-radius:8px;padding:4px 14px;font-weight:900;font-size:14px;transform:rotate(-4deg)}
.sl-intro-tiles{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.sl-intro-tiles .sl-tile{transform:scale(1.35);margin:10px}
.sl-pair{display:flex;align-items:center;gap:14px;margin-top:10px}
.sl-pair-btn{width:74px;height:74px;font-size:40px;font-weight:700;background:#fff;
    border:var(--nb-border);border-radius:var(--nb-radius);box-shadow:var(--nb-shadow-sm)}
.sl-pair-b{background:var(--nb-yellow)}
.sl-pair-arrow{font-size:26px;font-weight:900}

/* ===== 플레이 상단 ===== */
.sl-play{gap:8px}
.sl-top{width:100%;display:flex;align-items:center;gap:10px;min-height:44px}
.sl-pips{display:flex;gap:6px;flex:1}
.sl-pip{width:13px;height:13px;border-radius:50%;border:2px solid var(--nb-black);background:#fff;display:inline-block}
.sl-pip.on{background:var(--nb-mint)}
.sl-combo{font-weight:900;font-size:18px;color:var(--nb-pink);min-width:44px;text-align:right}
.sl-combo.pop{animation:slPop .4s}
@keyframes slPop{0%{transform:scale(.4)}60%{transform:scale(1.5)}100%{transform:scale(1)}}

/* ===== 자물쇠 블록 ===== */
.sl-lockwrap{position:relative;height:238px;display:flex;align-items:flex-end;justify-content:center;margin-top:26px}
.sl-shackle{position:absolute;top:-8px;left:50%;width:90px;height:52px;box-sizing:border-box;
    margin-left:-45px; /* border 포함 실폭 90px 의 절반 — content 폭 기준(-36)으로 하면 우측 9px 치우침 */
    border:9px solid var(--nb-black);border-bottom:none;border-radius:40px 40px 0 0;
    transform-origin:bottom left;transition:transform .35s cubic-bezier(.5,1.6,.5,1)}
/* 왼쪽 다리를 축으로 오른쪽 다리가 위로 들려 빠지는 열림 (실제 자물쇠 🔓 방향) */
.sl-shackle.open{transform:rotate(-30deg) translateY(-8px);border-color:var(--nb-mint)}
.sl-lock{width:184px;height:184px;background:#fff;border:var(--nb-border);border-radius:var(--nb-radius);
    box-shadow:var(--nb-shadow);display:grid;gap:6px;padding:10px;box-sizing:border-box;
    grid-template-areas:"c v";transition:transform .3s,opacity .3s}
.sl-lock.sl-h{grid-template-areas:"c" "v"}
.sl-lock.sl-has-f{grid-template-areas:"c v" "f f"}
.sl-lock.sl-h.sl-has-f{grid-template-areas:"c" "v" "f"}
#slSlotC{grid-area:c}
#slSlotV{grid-area:v}
#slSlotF{grid-area:f}
.sl-slot{border:3px dashed #c8c2b0;border-radius:10px;background:transparent;font-size:44px;font-weight:700;
    color:var(--nb-black);display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.sl-slot.filled{border-style:solid;border-color:var(--nb-black);background:var(--nb-cream);animation:slPop .25s}
.sl-lock.sl-merge{transform:scale(.35);opacity:0}
.sl-lock.sl-hide{visibility:hidden}
.sl-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:104px;font-weight:900;color:var(--nb-black);transform:scale(0);pointer-events:none}
.sl-result.show{transform:scale(1);transition:transform .3s cubic-bezier(.5,1.6,.5,1)}
.sl-result.win{color:var(--nb-mint)}
.sl-result.lose{color:#aaa;animation:slShake .5s}
@keyframes slShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}
    60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}

/* ===== 재생/제출 ===== */
.sl-mid{display:flex;align-items:center;gap:18px;margin:6px 0}
.sl-hear{width:76px;height:76px;border-radius:50%;border:var(--nb-border);box-shadow:var(--nb-shadow);
    background:var(--nb-yellow);font-size:32px;transition:transform .1s}
.sl-hear:active,.sl-hear.pressed{transform:translate(3px,3px);box-shadow:none} /* .pressed = 재생 중 (자동재생 포함) */
.sl-pulse{animation:slPulse 1.2s infinite}
@keyframes slPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.sl-open-btn{width:60px;height:60px;border-radius:50%;border:var(--nb-border);box-shadow:var(--nb-shadow-sm);
    background:var(--nb-mint);font-size:24px}
.sl-open-btn:disabled{opacity:.3;box-shadow:none;cursor:default}

/* ===== 팔레트 타일 ===== */
.sl-pal{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;width:100%}
.sl-tile{width:52px;height:52px;border:var(--nb-border);border-radius:10px;box-shadow:var(--nb-shadow-sm);
    font-size:26px;font-weight:700;color:var(--nb-black);display:flex;align-items:center;justify-content:center;
    transition:opacity .15s,transform .1s}
.sl-tile:active{transform:translate(2px,2px);box-shadow:none}
.sl-k-c{background:var(--nb-sky)}
.sl-k-v{background:var(--nb-coral)}
.sl-k-f{background:var(--nb-purple)}
/* 모음 타일의 가로세로 비율 = 블록 내 배치 힌트 (세로모음→옆, 가로모음→아래) */
.sl-tile.sl-tall{width:42px;height:64px}
.sl-tile.sl-flat{width:64px;height:42px}
.sl-tile.used{opacity:.25;box-shadow:none}
.sl-hint{animation:slHint 1.6s infinite}
@keyframes slHint{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* 타일 비행 (팔레트 → 슬롯) */
.sl-fly{position:fixed;z-index:60;display:flex;align-items:center;justify-content:center;
    border:var(--nb-border);border-radius:10px;font-size:26px;font-weight:700;pointer-events:none;
    transition:transform .24s cubic-bezier(.4,1.4,.5,1)}

/* 파티클 버스트 (CSS 만) */
.sl-burst{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.sl-burst span{position:absolute;width:11px;height:11px;border-radius:50%;
    animation:slBurst .75s ease-out forwards}
.sl-burst span:nth-child(3n){background:var(--nb-yellow)}
.sl-burst span:nth-child(3n+1){background:var(--nb-pink)}
.sl-burst span:nth-child(3n+2){background:var(--nb-mint)}
@keyframes slBurst{0%{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1}
    100%{transform:rotate(var(--a)) translateY(calc(-110px*var(--d))) scale(.2);opacity:0}}

/* ===== 클리어 ===== */
.sl-clear{position:relative}
.sl-clear-lock{font-size:90px;color:var(--nb-mint);display:flex;justify-content:center;animation:slPop .5s}

/* ===== 도감 오버레이 ===== */
.sl-book-backdrop{position:fixed;inset:0;background:rgba(26,26,46,.55);z-index:100;
    display:flex;align-items:center;justify-content:center;padding:16px}
.sl-book{background:#fff;border:var(--nb-border);border-radius:var(--nb-radius);box-shadow:var(--nb-shadow-lg);
    padding:16px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:12px;
    max-height:86dvh;overflow-y:auto}
.sl-book-row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding-bottom:10px;
    border-bottom:2px dashed #eee}
.sl-book-row:last-of-type{border-bottom:none}
.sl-cell{width:44px;height:44px;border:var(--nb-border);border-radius:9px;font-size:22px;font-weight:700;
    display:flex;align-items:center;justify-content:center;box-shadow:var(--nb-shadow-sm)}
.sl-cell.off{background:#f0ede2;color:#c5c0ae;border-color:#c5c0ae;box-shadow:none;border-style:dashed}
.sl-book-foot{display:flex;align-items:center;justify-content:center;gap:16px}
.sl-book-stat{display:inline-flex;align-items:center;gap:5px;font-weight:900;font-size:16px;color:var(--nb-black)}
.sl-book-stat:nth-of-type(1) .sl-ic{color:var(--nb-mint)}   /* ✔ 누적 정답 */
.sl-book-stat:nth-of-type(2) .sl-ic{color:var(--nb-coral)}  /* ⚡ 최고 콤보 */

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}