/* mypage/game/cooking_game.css - 소란 쿠킹 (요리 게임) */

/* 모달 */
.ck-modal-overlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:#FFF8F0;z-index:9999;
    display:flex;align-items:flex-start;justify-content:center;
    box-sizing:border-box;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0
}
.ck-modal-content{
    width:100%;max-width:460px;min-height:100%;
    padding:8px 10px;box-sizing:border-box
}

/* ===== 메뉴 ===== */
.ck-menu{text-align:center}
.ck-menu-title{
    font-size:1.6em;font-weight:900;
    color:var(--nb-black,#231815);
    margin-bottom:6px;letter-spacing:-.02em
}
.ck-menu-subtitle{
    font-size:.82em;color:var(--nb-black);opacity:.7;
    margin-bottom:18px;line-height:1.6;
    background:#fff;border:3px solid var(--nb-black,#231815);border-radius:12px;
    padding:10px 14px;box-shadow:4px 4px 0 var(--nb-black,#231815);
    text-align:left
}
.ck-sound-notice{
    font-size:.82em;font-weight:700;color:var(--nb-black);
    background:var(--nb-yellow,#FFE566);border:3px solid var(--nb-black,#231815);
    border-radius:12px;padding:10px 14px;margin-bottom:14px;
    box-shadow:4px 4px 0 var(--nb-black,#231815)
}
.ck-diff-select{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.ck-diff-btn{
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;border:3px solid var(--nb-black,#231815);border-radius:12px;
    background:#fff;cursor:pointer;font-family:inherit;
    text-align:left;transition:all .15s;touch-action:manipulation;
    box-shadow:4px 4px 0 var(--nb-black,#231815)
}
.ck-diff-btn.active{
    background:var(--nb-mint,#A8E6CF);
    transform:translate(1px,1px);box-shadow:3px 3px 0 var(--nb-black)
}
.ck-diff-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--nb-black)}
.ck-diff-icon{font-size:1.5em}
.ck-diff-label{font-weight:800;font-size:.95em;color:var(--nb-black);flex:1}
.ck-diff-desc{font-size:.78em;color:var(--nb-black);opacity:.6;font-weight:600}

.ck-start-btn{
    width:100%;padding:16px;border:3px solid var(--nb-black,#231815);border-radius:12px;
    background:var(--nb-mint,#A8E6CF);font-family:inherit;font-size:1.1em;font-weight:900;
    cursor:pointer;touch-action:manipulation;margin-bottom:8px;
    box-shadow:4px 4px 0 var(--nb-black,#231815);transition:all .15s
}
.ck-start-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--nb-black)}
.ck-ranking-btn{
    width:100%;padding:12px;border:3px solid var(--nb-black);border-radius:12px;
    background:#fff;font-family:inherit;font-size:.95em;font-weight:700;
    cursor:pointer;touch-action:manipulation;margin-bottom:8px;
    box-shadow:4px 4px 0 var(--nb-black);transition:all .15s
}
.ck-ranking-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--nb-black)}
.ck-close-btn{
    width:100%;padding:12px;border:3px solid var(--nb-black);border-radius:12px;
    background:var(--nb-cream,#FFF8F0);font-family:inherit;font-size:.9em;font-weight:700;
    cursor:pointer;touch-action:manipulation;
    box-shadow:4px 4px 0 var(--nb-black);transition:all .15s
}
.ck-close-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--nb-black)}

/* ===== 게임 헤더 ===== */
.ck-game-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:6px 10px;margin-bottom:8px;
    background:#fff;border:3px solid var(--nb-black);border-radius:12px;
    box-shadow:3px 3px 0 var(--nb-black)
}
.ck-header-left{display:flex;align-items:center;gap:8px}
.ck-exit-btn{
    background:none;border:none;font-size:1.2em;cursor:pointer;
    padding:2px 6px;touch-action:manipulation
}
.ck-game-title{font-weight:800;font-size:.9em}
.ck-header-right{text-align:right}
.ck-score-display{font-weight:800;font-size:1em;color:var(--nb-black)}
.ck-combo-display{font-size:.75em;font-weight:700;color:#E85D75}
.ck-lives{font-size:.9em;letter-spacing:2px}

/* ===== 손님 주문 영역 ===== */
.ck-order-area{
    text-align:center;padding:12px;margin-bottom:8px;
    background:#fff;border:3px solid var(--nb-black);border-radius:12px;
    box-shadow:3px 3px 0 var(--nb-black);
    position:relative;overflow:hidden
}
.ck-customer{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.ck-customer-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--nb-black);
    display:flex;align-items:center;justify-content:center;background:#FFE566;font-size:1.6em}
.ck-speech-bubble{
    background:#fff;border:2px solid var(--nb-black);border-radius:12px;
    padding:8px 14px;font-size:.9em;font-weight:700;
    position:relative;max-width:240px
}
.ck-speech-bubble::before{
    content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
    border:6px solid transparent;border-right-color:var(--nb-black)
}
.ck-speech-bubble::after{
    content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%);
    border:5px solid transparent;border-right-color:#fff
}
.ck-order-progress{font-size:.75em;color:var(--nb-black);opacity:.6;margin-top:4px}

/* ===== 레시피 카드 ===== */
.ck-recipe-card{
    padding:10px 14px;margin-bottom:8px;
    background:#fff;border:3px solid var(--nb-black);border-radius:12px;
    box-shadow:3px 3px 0 var(--nb-black)
}
.ck-recipe-title{
    font-weight:900;font-size:1.05em;text-align:center;margin-bottom:8px
}
.ck-recipe-list{
    display:flex;flex-wrap:wrap;gap:6px;justify-content:center
}
.ck-recipe-item{
    display:flex;align-items:center;gap:4px;
    padding:4px 10px;border:2px solid var(--nb-black);border-radius:8px;
    font-size:.82em;font-weight:700;background:#f8f8f8;
    transition:all .3s
}
.ck-recipe-item.found{
    background:var(--nb-mint,#A8E6CF);border-color:#2d8a56;
    animation:ck-check .4s ease
}
.ck-recipe-item-svg{width:22px;height:22px;flex-shrink:0}
.ck-recipe-check{margin-left:2px;color:#2d8a56;font-weight:900}

/* ===== 타이머 ===== */
.ck-timer-bar{
    height:8px;border:2px solid var(--nb-black);border-radius:6px;
    margin-bottom:8px;background:#eee;overflow:hidden
}
.ck-timer-fill{
    height:100%;background:var(--nb-mint,#A8E6CF);
    transition:width .3s linear;border-radius:4px
}
.ck-timer-fill.danger{background:#E85D75;animation:ck-pulse .5s infinite alternate}

/* ===== 조리 스테이션 ===== */
.ck-station{
    text-align:center;padding:16px 10px;margin-bottom:8px;
    position:relative;min-height:100px
}
.ck-pot-container{position:relative;display:inline-block}
.ck-pot-svg{width:120px;height:100px}
.ck-cook-btn{
    display:none;margin:8px auto 0;
    padding:10px 32px;border:3px solid var(--nb-black);border-radius:12px;
    background:var(--nb-yellow,#FFE566);font-family:inherit;font-size:1em;font-weight:900;
    cursor:pointer;touch-action:manipulation;
    box-shadow:3px 3px 0 var(--nb-black);transition:all .15s;
    animation:ck-bounce .6s ease infinite alternate
}
.ck-cook-btn.visible{display:block}
.ck-cook-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}

/* 요리 애니메이션 */
.ck-cooking-active .ck-pot-svg{animation:ck-shake .15s infinite alternate}
.ck-steam{position:absolute;pointer-events:none}
.ck-steam-particle{
    position:absolute;width:8px;height:8px;border-radius:50%;
    background:rgba(200,200,200,.6);
    animation:ck-steam-rise 1.5s ease-out forwards
}
.ck-verb-display{
    position:absolute;top:-10px;left:50%;transform:translateX(-50%);
    font-weight:900;font-size:1.1em;color:#E85D75;
    animation:ck-verb-pop .6s ease;white-space:nowrap;
    background:rgba(255,255,255,.9);padding:4px 12px;border-radius:8px;
    border:2px solid var(--nb-black)
}
.ck-dish-complete{
    position:absolute;top:0;left:0;right:0;bottom:0;
    display:flex;align-items:center;justify-content:center;
    animation:ck-dish-appear .5s ease
}
.ck-dish-complete-inner{
    background:#fff;border:3px solid var(--nb-black);border-radius:16px;
    padding:20px;box-shadow:4px 4px 0 var(--nb-black);text-align:center
}
.ck-dish-svg{width:80px;height:80px;margin:0 auto 8px}
.ck-dish-name{font-weight:900;font-size:1.2em}
.ck-dish-points{color:#E85D75;font-weight:800;font-size:.9em}

/* 재료가 냄비로 날아가는 애니메이션 */
.ck-fly-to-pot{
    position:fixed;z-index:10001;pointer-events:none;
    animation:ck-fly .4s cubic-bezier(.2,.8,.3,1) forwards
}

/* ===== 재료 선반 ===== */
.ck-shelf{
    display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
    padding:8px 4px
}
.ck-ingredient{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:8px 6px;border:3px solid var(--nb-black);border-radius:12px;
    background:#fff;cursor:pointer;touch-action:manipulation;
    box-shadow:3px 3px 0 var(--nb-black);transition:all .15s;
    width:72px;min-height:76px
}
.ck-ingredient:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}
.ck-ingredient.correct-pick{
    background:var(--nb-mint,#A8E6CF);border-color:#2d8a56;
    animation:ck-check .4s ease;pointer-events:none
}
.ck-ingredient.wrong-pick{
    animation:ck-wrong-shake .4s ease;border-color:#E85D75
}
.ck-ingredient.used{opacity:.3;pointer-events:none}
.ck-ing-svg{width:36px;height:36px}
.ck-ing-emoji{display:block;width:40px;height:40px}
.ck-ing-emoji svg{width:100%;height:100%}
/* 라스터 아이콘(webp) — 기존 svg 규칙과 동일 사이징 미러 */
.ck-ico{display:block;max-width:100%;max-height:100%}
.ck-ing-emoji img{width:100%;height:100%;object-fit:contain}
.ck-st-ing img{width:1.4em;height:1.4em;object-fit:contain;vertical-align:middle}
.ck-dish-icon img{width:100%;height:100%;object-fit:contain}
.ck-ing-name{font-size:.72em;font-weight:700;text-align:center;line-height:1.2}
.ck-ing-hint{font-size:.6em;color:var(--nb-black);opacity:.5}

/* ===== 단어 복습 플래시 ===== */
.ck-vocab-flash{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;
    background:rgba(0,0,0,.5);
    display:flex;align-items:center;justify-content:center;
    animation:ck-fade-in .3s ease
}
.ck-vocab-card{
    background:#fff;border:3px solid var(--nb-black);border-radius:16px;
    padding:20px;max-width:340px;width:90%;
    box-shadow:6px 6px 0 var(--nb-black);
    animation:ck-slide-up .4s ease
}
.ck-vocab-title{font-weight:900;font-size:1em;text-align:center;margin-bottom:10px}
.ck-vocab-list{display:flex;flex-direction:column;gap:6px}
.ck-vocab-row{
    display:flex;align-items:center;gap:8px;
    padding:6px 10px;background:#f8f8f8;border-radius:8px;
    border:2px solid #eee
}
.ck-vocab-svg{width:24px;height:24px;flex-shrink:0}
.ck-vocab-ko{font-weight:800;font-size:.9em;flex:1}
.ck-vocab-jp{font-size:.8em;color:var(--nb-black);opacity:.6}

/* ===== 결과 화면 ===== */
.ck-result{text-align:center;padding:10px 0}
.ck-result-title{font-size:1.4em;font-weight:900;margin-bottom:10px}
.ck-result-score{font-size:2.5em;font-weight:900;color:var(--nb-black)}
.ck-result-score span{font-size:.4em;font-weight:700}
.ck-new-record{
    color:#E85D75;font-weight:800;font-size:.9em;
    animation:ck-bounce .6s ease infinite alternate;margin-bottom:8px
}
.ck-result-stats{
    background:#fff;border:3px solid var(--nb-black);border-radius:12px;
    padding:12px;margin:12px 0;box-shadow:3px 3px 0 var(--nb-black)
}
.ck-stat{display:flex;justify-content:space-between;padding:4px 0;font-size:.85em}
.ck-stat-label{color:var(--nb-black);opacity:.7}
.ck-stat-value{font-weight:700}

/* ===== 랭킹 ===== */
.ck-ranking{padding:10px 0}
.ck-ranking-title{font-size:1.2em;font-weight:900;text-align:center;margin-bottom:4px}
.ck-ranking-period{font-size:.75em;text-align:center;opacity:.5;margin-bottom:12px}
.ck-rank-list{
    background:#fff;border:3px solid var(--nb-black);border-radius:12px;
    padding:8px;margin-bottom:12px;box-shadow:3px 3px 0 var(--nb-black)
}
.ck-rank-row{
    display:flex;align-items:center;gap:8px;padding:8px 6px;
    border-bottom:1px solid #eee
}
.ck-rank-row:last-child{border-bottom:none}
.ck-rank-pos{width:28px;text-align:center;font-weight:800}
.ck-rank-avatar{
    width:32px;height:32px;border-radius:50%;
    border:2px solid var(--nb-black);overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:#f0f0f0;font-size:.8em;font-weight:700;flex-shrink:0
}
.ck-rank-name{flex:1;font-weight:700;font-size:.85em}
.ck-rank-score{font-weight:800;font-size:.85em;color:#E85D75}
.ck-rank-empty{text-align:center;padding:20px;font-size:.85em;opacity:.6}
.ck-my-stats{
    display:flex;justify-content:space-around;
    font-size:.82em;margin-bottom:14px
}

/* 레시피북 */
.ck-recipe-book{padding:10px 0}
.ck-book-title{font-size:1.2em;font-weight:900;text-align:center;margin-bottom:4px}
.ck-book-progress{font-size:.8em;text-align:center;opacity:.6;margin-bottom:12px}
.ck-book-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px
}
.ck-book-item{
    text-align:center;padding:10px 6px;
    background:#fff;border:3px solid var(--nb-black);border-radius:12px;
    box-shadow:2px 2px 0 var(--nb-black)
}
.ck-book-item.locked{opacity:.4;background:#eee}
.ck-book-dish-svg{width:48px;height:48px;margin:0 auto 4px}
.ck-book-name{font-size:.72em;font-weight:700}

/* ===== 점수 팝업 ===== */
.ck-points-popup{
    position:fixed;pointer-events:none;z-index:10001;
    font-weight:900;font-size:1.1em;color:#E85D75;
    text-shadow:1px 1px 0 #fff;
    animation:ck-points-float 1s ease-out forwards
}

/* ===== 로딩 ===== */
.ck-loading{display:flex;justify-content:center;padding:60px 0}

/* ===== 애니메이션 ===== */
@keyframes ck-check{
    0%{transform:scale(1)}
    50%{transform:scale(1.15)}
    100%{transform:scale(1)}
}
@keyframes ck-wrong-shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-6px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
}
@keyframes ck-pulse{
    from{opacity:1}to{opacity:.6}
}
@keyframes ck-bounce{
    from{transform:translateY(0)}
    to{transform:translateY(-4px)}
}
@keyframes ck-shake{
    from{transform:rotate(-2deg)}to{transform:rotate(2deg)}
}
@keyframes ck-steam-rise{
    0%{opacity:.7;transform:translateY(0) scale(1)}
    100%{opacity:0;transform:translateY(-60px) scale(2.5)}
}
@keyframes ck-verb-pop{
    0%{opacity:0;transform:translateX(-50%) scale(.5)}
    60%{transform:translateX(-50%) scale(1.1)}
    100%{opacity:1;transform:translateX(-50%) scale(1)}
}
@keyframes ck-dish-appear{
    0%{opacity:0;transform:scale(.5)}
    100%{opacity:1;transform:scale(1)}
}
@keyframes ck-fade-in{
    from{opacity:0}to{opacity:1}
}
@keyframes ck-slide-up{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes ck-points-float{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-60px)}
}
@keyframes ck-fly{
    0%{opacity:1}
    100%{opacity:.3;transform:translate(var(--ck-fly-x),var(--ck-fly-y)) scale(.3)}
}

/* ===== sparkle ===== */
.ck-sparkle{
    position:absolute;pointer-events:none;
    width:6px;height:6px;border-radius:50%;
    animation:ck-sparkle-pop .8s ease-out forwards
}
@keyframes ck-sparkle-pop{
    0%{opacity:1;transform:translate(0,0) scale(1)}
    100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}
}

/* デバッグ表示 */
.ck-debug{
    text-align:left;font-size:.7em;line-height:1.4;
    background:#1e1e1e;color:#d4d4d4;
    padding:10px 12px;border-radius:8px;
    margin:10px auto;max-width:400px;
    overflow-x:auto;white-space:pre-wrap;word-break:break-all;
    max-height:200px;overflow-y:auto
}

/* ===== シフトタイマー ===== */
.ck-shift-timer{
    font-weight:800;font-size:.85em;color:var(--nb-black);
    background:#fff;border:2px solid var(--nb-black);border-radius:8px;
    padding:2px 8px;margin-left:6px
}
.ck-shift-timer.danger{color:#E85D75;animation:ck-pulse .5s infinite alternate}

/* ===== レストランフロア ===== */
.ck-restaurant{
    position:relative;
    width:100%;height:340px;
    background:#FFF8F0;
    border:3px solid var(--nb-black,#231815);border-radius:12px;
    box-shadow:3px 3px 0 var(--nb-black,#231815);
    margin-bottom:8px;overflow:hidden;
    transition:filter .3s
}
.ck-restaurant.dimmed{filter:brightness(.7)}

/* 좌석 배치 */
.ck-seat{
    position:absolute;width:130px;height:120px
}
.ck-seat[data-seat="0"]{top:10px;left:10px}
.ck-seat[data-seat="1"]{top:10px;right:10px}
.ck-seat[data-seat="2"]{top:115px;left:50%;transform:translateX(-50%)}
.ck-seat[data-seat="3"]{bottom:10px;left:10px}
.ck-seat[data-seat="4"]{bottom:10px;right:10px}

/* テーブル */
.ck-table-graphic{
    position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    width:80px;height:30px;
    background:#D2691E;border:2px solid var(--nb-black);border-radius:8px;
    box-shadow:2px 2px 0 var(--nb-black)
}

/* 客 */
.ck-cust{
    position:absolute;top:0;left:50%;transform:translateX(-50%);
    text-align:center;cursor:pointer;touch-action:manipulation;
    width:100%;z-index:2
}
.ck-cust-avatar{
    width:44px;height:44px;border-radius:50%;
    border:2px solid var(--nb-black);
    display:flex;align-items:center;justify-content:center;
    background:#FFE566;font-size:1.5em;margin:0 auto 2px
}
.ck-cust-bubble{
    background:#fff;border:2px solid var(--nb-black);border-radius:10px;
    padding:3px 8px;font-size:.7em;font-weight:700;
    white-space:nowrap;display:inline-block;
    animation:ck-slide-up .3s ease
}
.ck-cust-patience{
    width:60px;height:5px;border:1px solid var(--nb-black);
    border-radius:3px;background:#eee;margin:3px auto 0;overflow:hidden
}
.ck-cust-patience-fill{
    height:100%;background:var(--nb-mint,#A8E6CF);
    transition:width .3s linear;border-radius:2px
}
.ck-cust-patience-fill.danger{background:#E85D75}
.ck-cust-dish{
    position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
    z-index:3
}
.ck-cust-alert{
    position:absolute;top:-2px;right:10px;
    font-size:1.1em;animation:ck-bounce .4s ease infinite alternate
}

/* フロアヒント */
.ck-floor-hint{
    position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
    font-size:.75em;font-weight:700;color:var(--nb-black);opacity:.5;
    white-space:nowrap
}

/* ===== クッキングパネル（スライドアップ） ===== */
.ck-cooking-panel{
    position:fixed;bottom:0;left:0;right:0;
    max-height:80vh;
    background:#FFF8F0;
    border-top:3px solid var(--nb-black,#231815);
    border-radius:16px 16px 0 0;
    box-shadow:0 -4px 0 var(--nb-black,#231815);
    transform:translateY(100%);
    transition:transform .3s ease-out;
    overflow-y:auto;z-index:10001;
    padding:8px 12px 20px
}
.ck-cooking-panel.open{transform:translateY(0)}

.ck-cooking-panel-header{
    display:flex;align-items:center;gap:8px;
    margin-bottom:8px;padding-bottom:6px;
    border-bottom:2px solid #eee
}
.ck-back-btn{
    background:none;border:2px solid var(--nb-black);border-radius:8px;
    padding:4px 10px;font-weight:700;font-size:.8em;font-family:inherit;
    cursor:pointer;touch-action:manipulation
}
.ck-back-btn:active{background:#eee}
.ck-cooking-for{font-weight:800;font-size:.85em;flex:1;text-align:right}

/* ===== 客アニメーション ===== */
.ck-anim-enter{animation:ck-cust-enter 1.5s ease forwards}
.ck-anim-ordering .ck-cust-bubble{animation:ck-slide-up .4s ease}
.ck-anim-idle .ck-cust-avatar{animation:ck-cust-idle 2s ease-in-out infinite}
.ck-anim-tapping .ck-cust-avatar{animation:ck-cust-tapping 1s ease infinite}
.ck-anim-impatient .ck-cust-avatar{animation:ck-cust-impatient .3s ease infinite}
.ck-anim-eating .ck-cust-avatar{animation:ck-cust-eat 1s ease infinite}
.ck-anim-leave{animation:ck-cust-leave 1.5s ease forwards}
.ck-anim-angry-leave{animation:ck-cust-angry-leave 1.5s ease forwards}

@keyframes ck-cust-enter{
    0%{transform:translateX(-50%) translateX(-60px) scale(.8);opacity:0}
    60%{transform:translateX(-50%) translateX(3px) scale(1.05);opacity:1}
    100%{transform:translateX(-50%) translateX(0) scale(1);opacity:1}
}
@keyframes ck-cust-idle{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-2px)}
}
@keyframes ck-cust-tapping{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-4px)}
}
@keyframes ck-cust-impatient{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-4deg)}
    75%{transform:rotate(4deg)}
}
@keyframes ck-cust-eat{
    0%,100%{transform:scale(1)}
    30%{transform:scale(1.08)}
    60%{transform:scale(.95)}
}
@keyframes ck-cust-leave{
    0%{transform:translateX(-50%);opacity:1}
    100%{transform:translateX(-50%) translateX(80px);opacity:0}
}
@keyframes ck-cust-angry-leave{
    0%{transform:translateX(-50%);opacity:1}
    20%{transform:translateX(-50%) translateX(-8px) rotate(-5deg)}
    100%{transform:translateX(-50%) translateX(-80px);opacity:0}
}

/* ===== 조리대 에리어 ===== */
.ck-stations-area{
    display:flex;gap:6px;
    margin-bottom:8px
}
.ck-station-slot{
    flex:1;min-width:0;
    background:#FFF;
    border:3px solid var(--nb-black,#231815);border-radius:10px;
    box-shadow:2px 2px 0 var(--nb-black,#231815);
    padding:6px;text-align:center;
    cursor:pointer;touch-action:manipulation;
    transition:border-color .2s,box-shadow .2s;
    position:relative;overflow:hidden
}
.ck-station-slot.active{
    border-color:var(--nb-coral,#FF6B6B);
    box-shadow:2px 2px 0 var(--nb-coral,#FF6B6B),0 0 8px rgba(255,107,107,.3)
}
.ck-station-slot.cooked{
    background:#E8FFE8;
    border-color:#4CAF50;
    animation:ck-cooked-pulse 1.5s ease infinite
}
@keyframes ck-cooked-pulse{
    0%,100%{box-shadow:2px 2px 0 #4CAF50}
    50%{box-shadow:2px 2px 0 #4CAF50,0 0 12px rgba(76,175,80,.4)}
}
.ck-station-slot.ck-cooking-active{
    animation:ck-station-cook .8s ease infinite
}
@keyframes ck-station-cook{
    0%,100%{transform:translateY(0)}
    25%{transform:translateY(-2px) rotate(-1deg)}
    75%{transform:translateY(-2px) rotate(1deg)}
}
.ck-station-empty{
    color:#aaa;font-size:.75em;font-weight:700;
    padding:16px 0
}
.ck-station-header{
    font-size:.7em;font-weight:800;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    margin-bottom:2px
}
.ck-station-pot{
    font-size:1.8em;line-height:1.2
}
.ck-station-ings{
    display:flex;flex-wrap:wrap;gap:2px;justify-content:center;
    margin:2px 0
}
.ck-st-ing{
    font-size:.9em;opacity:.3;transition:opacity .2s
}
.ck-st-ing.found{opacity:1}
.ck-station-progress{
    font-size:.65em;font-weight:700;color:#888
}
.ck-station-done{
    font-size:1.2em;font-weight:800;color:#4CAF50;
    margin:4px 0
}
.ck-station-serve-hint{
    font-size:.65em;font-weight:700;color:#4CAF50;
    animation:ck-bounce .6s ease infinite alternate
}
.ck-serve-hint{
    position:absolute;bottom:2px;left:0;right:0;
    font-size:.6em;font-weight:700;color:#E85D75;
    text-align:center;
    animation:ck-slide-up .3s ease
}

/* 조리대 내 요리 버튼 */
.ck-station-slot .ck-cook-btn{
    font-size:.7em;padding:3px 8px;margin-top:2px
}

/* ===== 레시피북 상세 (요리 클릭 → 재료/조리법) ===== */
.ck-book-detail-icon{width:4em;height:4em;margin:4px auto 8px}
.ck-book-verb{font-size:.85em;text-align:center;margin:6px 0 10px;color:#6D4C41}
.ck-book-ing-head{font-weight:800;font-size:.9em;margin:10px 0 6px;text-align:center}
.ck-book-ing-list{display:flex;flex-direction:column;gap:6px;max-width:340px;margin:0 auto}
.ck-book-ing{display:flex;align-items:center;gap:10px;background:#FFF;border:1px solid #E0D5C8;border-radius:10px;padding:6px 10px}
.ck-book-ing-ico{width:32px;height:32px;flex-shrink:0;display:block}
.ck-book-ing-ico svg,.ck-book-ing-ico img{width:100%;height:100%;object-fit:contain}
.ck-book-ing-ko{font-weight:700;font-size:.95em}
.ck-book-ing-ja{font-size:.72em;color:#9E8B7A;margin-left:auto}

/* ===== 조리 연습 프로토타입 (베타) ===== */
.ckp-wrap{max-width:480px;margin:0 auto}
.ckp-help{font-size:.7em;color:#6D4C41;background:#FFF3E0;border-radius:8px;padding:5px 8px;margin:4px 0 8px;text-align:center}
/* 조리법 3구역 = 항상 한 행(가로). 세로로 쌓이면 스크롤 → 드래그 깨짐 */
.ckp-zones{display:flex;flex-direction:row;flex-wrap:nowrap;gap:5px;margin-bottom:8px}
.ckp-zone{flex:1 1 0;min-width:0;border:2px solid var(--nb-black,#231815);border-radius:10px;background:#fff;padding:5px 5px;box-shadow:2px 2px 0 var(--nb-black,#231815)}
.ckp-zone.done{background:#E8F5E9;opacity:.7}
.ckp-zone-title{font-weight:800;font-size:.72em;line-height:1.15;text-align:center}
.ckp-zone-title small{display:block;font-weight:600;color:#9E8B7A;font-size:.85em}
.ckp-zone-need{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin:3px 0 5px}
.ckp-need-ico{display:inline-flex;width:22px;height:22px;opacity:.7}
.ckp-need-ico svg,.ckp-need-ico img{width:100%;height:100%;object-fit:contain}
.ckp-zone-body{display:flex;flex-wrap:wrap;gap:3px;min-height:34px;background:#FAF5EE;border-radius:6px;padding:4px;align-items:center;justify-content:center}
.ckp-zone-hint{font-size:.56em;color:#BBB;text-align:center}
.ckp-chip{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:.54em;font-weight:700;background:#fff;border:1px solid #E0D5C8;border-radius:6px;padding:2px 3px}
.ckp-chip svg,.ckp-chip img{width:16px;height:16px;object-fit:contain}
.ckp-chip i{font-style:normal}
.ckp-act-btn{margin-top:5px;width:100%;padding:6px 2px;border:2px solid var(--nb-black);border-radius:8px;background:#eee;font-family:inherit;font-weight:900;font-size:.72em;color:#999;cursor:not-allowed;box-shadow:2px 2px 0 var(--nb-black)}
.ckp-act-btn.on{background:var(--nb-yellow,#FFE566);color:var(--nb-black);cursor:pointer;animation:ck-bounce .6s ease infinite alternate}
.ckp-act-btn.on:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}
.ckp-tray-title,.ckp-shelf-title{font-weight:800;font-size:.74em;margin:7px 0 3px}
.ckp-tray,.ckp-shelf{display:flex;flex-wrap:wrap;gap:6px;background:#FFF8F0;border:2px dashed #D7C8B8;border-radius:10px;padding:6px;min-height:44px;align-items:center}
.ckp-token{display:flex;flex-direction:column;align-items:center;gap:2px;width:54px;padding:5px 2px;background:#fff;border:2px solid var(--nb-black);border-radius:10px;font-size:.66em;font-weight:700;cursor:grab;touch-action:none;user-select:none}
.ckp-token svg,.ckp-token img{width:30px;height:30px;object-fit:contain;pointer-events:none}
.ckp-token i{font-style:normal;pointer-events:none}
.ckp-token.ckp-mid{border-color:#2d8a56;background:#E8F5E9;width:auto;flex-direction:row;padding:5px 8px}
.ckp-ghost{position:fixed;z-index:99999;transform:translate(-50%,-50%);pointer-events:none;opacity:.85;width:54px;display:flex;flex-direction:column;align-items:center;font-size:.66em;font-weight:700}
.ckp-ghost svg,.ckp-ghost img{width:34px;height:34px;object-fit:contain}
.ckp-done-icon{margin:10px auto}

/* ===== 経営モード(베타) P1 ===== */
.ckm-wrap{max-width:460px;margin:0 auto}
.ckm-hud{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:.95em;background:var(--nb-yellow,#FFE566);border:3px solid var(--nb-black,#231815);border-radius:12px;padding:8px 12px;box-shadow:3px 3px 0 var(--nb-black,#231815);margin-bottom:10px}
.ckm-hud small{font-weight:600;color:#6D4C41}
.ckm-floor{position:relative;height:340px;background:#F3E9DC;border:3px solid var(--nb-black,#231815);border-radius:14px;overflow:hidden;box-shadow:3px 3px 0 var(--nb-black,#231815)}
.ckm-street{position:absolute;left:0;top:0;width:18%;height:100%;background:#D7E8D0;display:flex;align-items:center;justify-content:center;font-size:.62em;font-weight:700;color:#5a7a52;writing-mode:vertical-rl}
.ckm-door{position:absolute;left:20%;top:38%;font-size:1.4em;text-align:center;font-weight:700}
.ckm-door small{font-size:.5em;color:#6D4C41}
.ckm-bar{position:absolute;right:4%;top:6%;width:40%;height:18%;background:#C8A97E;border:2px solid #8d6e4e;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.66em;font-weight:800;color:#fff}
.ckm-kitchen{position:absolute;right:4%;bottom:5%;width:34%;height:20%;background:#BFC7CC;border:2px solid #8a9398;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.7em;font-weight:800}
.ckm-seat{position:absolute;font-size:1.5em}
#ckmSeat0{left:58%;top:42%}
.ckm-seat-x{opacity:.35}
.ckm-seat-x:nth-of-type(3){left:74%;top:42%}
.ckm-seat-x:nth-of-type(4){left:58%;top:62%}
.ckm-cust{position:absolute;font-size:1.7em;transition:left 1.1s ease,top 1.1s ease;z-index:5;line-height:1}
.ckm-bell{position:absolute;top:-14px;right:-10px;font-size:.6em;animation:ck-bounce .5s infinite alternate}
.ckm-order{position:absolute;top:-46px;left:50%;transform:translateX(-50%);background:#fff;border:2px solid var(--nb-black);border-radius:10px;padding:4px 8px;font-size:.5em;font-weight:800;white-space:nowrap;text-align:center}
.ckm-order .ckp-act-btn{margin-top:3px;padding:4px 8px;font-size:1em;width:auto}
.ckm-served{position:absolute;top:-30px;left:50%;transform:translateX(-50%)}
.ckm-status{text-align:center;font-size:.82em;font-weight:700;color:#4E342E;background:#FFF3E0;border-radius:10px;padding:8px;margin:10px 0}

/* 손님 식사 연출 */
@keyframes ckm-chew{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ckm-cust.ckm-eating{animation:ckm-chew .5s ease-in-out infinite}
.ckm-eat-utensil{position:absolute;left:-14px;bottom:-2px;font-size:.62em;animation:ckm-chew .5s ease-in-out infinite}

/* 손님 인내심 바 (P2 난이도) */
.ckm-pat{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:30px;height:5px;background:#ddd;border:1px solid #999;border-radius:3px;overflow:hidden}
.ckm-pat-f{height:100%;width:100%;background:#4CAF50;transition:width .3s linear}
.ckm-pat-f.low{background:#E85D75}

.ckm-seat.lock{opacity:.35;filter:grayscale(1)}

.ckm-order.bad{border-color:#E85D75;background:#FFEBEE}

/* 조리 단계 순차 잠금/강조 */
.ckp-zone.lock{opacity:.45;filter:grayscale(.6)}
.ckp-zone.done{opacity:.7;background:#E8F5E9}
.ckp-zone.active{outline:3px solid #FF8A22;outline-offset:-1px}

/* 귀여운 사람 캐릭터 + 간결 UI */
.ckm-cust{width:34px;height:40px}
.ckm-face{width:100%;height:100%;pointer-events:none}
.ckm-face svg{width:100%;height:100%;display:block;overflow:visible}
.ckm-cust.ckm-eating .ckm-face{animation:ckm-chew .5s ease-in-out infinite}
.ckm-staff{position:absolute;width:30px;height:36px;text-align:center;pointer-events:none;z-index:4}
.ckm-staff svg{width:100%;height:100%}
.ckm-staff b{position:absolute;right:-4px;bottom:-2px;font-size:9px;background:#231815;color:#fff;border-radius:7px;padding:0 4px}
.ckm-hud{display:flex;align-items:center;gap:8px}
.ckm-hud #ckmStat{font-weight:900;font-size:.95em;white-space:nowrap}
.ckm-hud #ckmMoney{margin-left:auto;font-weight:800;font-size:.85em;white-space:nowrap}
.ckm-lvbar{flex:1;height:7px;background:#fff;border:1px solid #C9B79C;border-radius:4px;overflow:hidden}
.ckm-lvbar i{display:block;height:100%;width:0;background:#FF8A22;transition:width .4s}
.ckm-hirerow{display:flex;gap:6px}
.ckm-hbtn{flex:1;margin-bottom:6px;font-size:.78em;padding:9px 4px}

.ckm-staff{transition:none}

/* 알바 머리 위 요리과정 말풍선 */
.ckm-staff-bubble{position:absolute;bottom:104%;left:50%;transform:translateX(-50%);background:#fff;border:2px solid #231815;border-radius:8px;padding:2px 5px;font-size:.46em;font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:3px;box-shadow:1px 1px 0 #231815}
.ckm-sb-ico{display:inline-flex;width:16px;height:16px}
.ckm-sb-ico svg,.ckm-sb-ico img{width:100%;height:100%;object-fit:contain}

/* 레지(계산대) + 주문서 */
.ckm-reg{position:absolute;width:46px;height:30px;background:#8d6e4e;border:2px solid #5d4733;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.5em;font-weight:800;color:#fff;text-align:center;line-height:1.1}
.ckm-ticket{position:absolute;font-size:1em;z-index:3;animation:ckm-chew .8s ease-in-out infinite}

/* ===== 룸/벽 레이아웃 (조리실·다이닝 분리) ===== */
.ckm-room{position:absolute;box-sizing:border-box;border:4px solid #9c7b53;border-radius:6px;font-size:.5em;font-weight:800;color:rgba(90,60,30,.35);padding:4px;z-index:0}
.ckm-dining{left:1%;top:5%;width:57%;height:92%;background:#FBF1E2}
.ckm-kroom{left:61%;top:42%;width:38%;height:55%;background:#E6ECEF;border-color:#5d6b73}
.ckm-pass{position:absolute;left:57%;top:42%;width:4%;height:55%;background:#C8A97E;border:2px solid #5d4733;border-radius:3px;writing-mode:vertical-rl;font-size:.4em;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;z-index:1}
.ckm-door{position:absolute;left:-1%;top:72%;width:9%;height:16%;right:auto;bottom:auto;background:#F6DCA6;border:3px solid #9c7b53;border-radius:4px;font-size:.5em;font-weight:800;color:#7a5a2e;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.1;z-index:1}
.ckm-door small{font-size:.8em;font-weight:700}
.ckm-kitchen{position:absolute;width:30px;height:30px;right:auto;bottom:auto;background:transparent;border:none;font-size:1.1em;display:flex;align-items:center;justify-content:center;z-index:1;transform:translate(-50%,-50%)}
.ckm-seat{z-index:1}
.ckm-reg{z-index:2}

.ckm-passitem{position:absolute;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.7em;z-index:2}
.ckm-passitem .ckm-sb-ico{width:22px;height:22px}

/* 작은 테이블(의자 대체) */
.ckm-seat{position:absolute;width:30px;height:16px;background:#C8A06A;border:2px solid #8d6e4e;border-radius:5px;box-shadow:0 2px 0 #6f5436;display:flex;align-items:center;justify-content:center;font-size:.7em;z-index:1}
.ckm-seat.lock{background:#d8d8d8;border-color:#aaa;box-shadow:none}
/* 식사 중 요리를 테이블 위(손님 앞)로 */
.ckm-served.ckm-on-table{top:auto;bottom:-13px;left:50%;transform:translateX(-50%)}
/* 식사 시 입 오물오물 */
.ckm-mo{opacity:0}
@keyframes ckm-mo-a{0%,50%{opacity:0}50.01%,100%{opacity:1}}
@keyframes ckm-mc-a{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.ckm-cust.ckm-eating .ckm-mo{animation:ckm-mo-a .5s steps(1,end) infinite}
.ckm-cust.ckm-eating .ckm-mc{animation:ckm-mc-a .5s steps(1,end) infinite}
/* 요리사 조리 테이블 — 조리 스테이션 위 진행상황 패널 */
/* 조리실 안의 조리대(고정 가구). 조리 과정이 여기 표시됨(팝업 없음) */
.ckm-cooktop{position:absolute;left:63%;top:62%;width:34%;height:33%;background:#dcc6a2;border:2px solid #5d4733;border-radius:6px;display:flex;flex-direction:column;z-index:1;font-size:.55em;box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
.ckm-cooktop-h{font-weight:800;color:#4a3620;text-align:center;background:#c9ad84;border-bottom:2px solid #5d4733;border-radius:4px 4px 0 0;padding:2px 0}
.ckm-cooktop-body{flex:1;overflow:auto;padding:4px 5px}
.ckm-cooktop-idle{color:#8a7250;display:block;text-align:center;padding-top:10px}
.ckm-cooktable{display:none}
.ckm-ct-h{font-weight:800;color:#5d4733;text-align:center;border-bottom:1px solid #d8c4a0;padding-bottom:3px;margin-bottom:4px}
.ckm-ct-row{display:flex;align-items:center;gap:3px;padding:3px 2px;border-radius:4px;flex-wrap:wrap}
.ckm-ct-row.cur{background:#fff3cd;outline:2px solid #f0ad4e}
.ckm-ct-row.done{opacity:.55}
.ckm-ct-row.todo{opacity:.7}
.ckm-ct-ic{display:inline-flex;width:20px;height:20px}
.ckm-ct-ic svg,.ckm-ct-ic img{width:100%;height:100%;object-fit:contain}
.ckm-ct-v{font-weight:700;color:#7a5c2e;padding:0 2px}
.ckm-ct-ar{color:#999;font-weight:800}
.ckm-ct-ck{color:#28a745;font-weight:800;margin-left:auto}
/* 패스 대기열의 주문서(🧾) 옆 調理 버튼 — 다이닝 쪽(왼쪽)으로 노출 */
.ckm-passitem{overflow:visible}
.ckm-pass-cook{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:4px;white-space:nowrap;font-size:.8em;padding:1px 6px;z-index:3}
/* 조리대: 옆(완료 중간재료) + 현재 팬(재료 하나씩 투입→조리) */
.ckm-ct-side{display:flex;align-items:center;flex-wrap:wrap;gap:3px;padding:3px 4px;margin-bottom:4px;background:rgba(255,255,255,.45);border:1px dashed #9c7b53;border-radius:5px}
.ckm-ct-lbl{font-weight:800;color:#7a5c2e;margin-right:3px}
.ckm-ct-pan{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:6px 6px;background:#bca; background:rgba(255,250,240,.85);border:2px solid #8a6d45;border-radius:8px}
.ckm-ct-pan.cooking{background:#fff3cd;border-color:#f0ad4e;animation:ckm-sizzle .5s ease-in-out infinite alternate}
@keyframes ckm-sizzle{from{box-shadow:0 0 0 rgba(240,173,78,0)}to{box-shadow:0 0 7px rgba(240,173,78,.7)}}
.ckm-ct-bowl{display:inline-flex;align-items:center;flex-wrap:wrap;gap:3px;min-width:22px}
.ckm-ct-ic.empty{opacity:.4;font-weight:800;justify-content:center}
/* 레지 응대: 손님 머리 위 돈 버블 + 알바 인사(절) */
.ckm-paybub{position:absolute;bottom:104%;left:50%;transform:translateX(-50%);font-size:.62em;background:#fff;border:2px solid #231815;border-radius:8px;padding:1px 5px;white-space:nowrap;z-index:7;box-shadow:1px 1px 0 #231815}
.ckm-staff.ckm-bow{animation:ckm-bow .7s ease 2;transform-origin:bottom center}
@keyframes ckm-bow{0%,100%{transform:rotate(0)}45%,65%{transform:rotate(20deg)}}
/* 경영모드 HUD: 영업일 + 타임바 + 자금/빚/평판 */
.ckm-hud #ckmDay{font-weight:900;font-size:.9em;white-space:nowrap}
.ckm-timebar{flex:1;height:9px;background:#fff;border:1px solid #C9B79C;border-radius:5px;overflow:hidden;margin:0 8px}
.ckm-timebar i{display:block;height:100%;width:100%;background:#4CAF50;transition:width .3s linear}
.ckm-timebar i.low{background:#E85D75}
.ckm-hud #ckmMoney{margin-left:auto;font-weight:800;font-size:.8em;white-space:nowrap}
.ckm-hud .ckm-sales{color:#2d8a56}
.ckm-hud .ckm-debt{color:#E85D75}
/* 결산 화면 */
.ckm-settle{max-width:460px;margin:0 auto;text-align:center}
.cks-h{font-size:1.3em;font-weight:900;margin:10px 0;color:var(--nb-black,#231815)}
.cks-bankrupt{background:#E85D75;color:#fff;font-weight:800;border:3px solid var(--nb-black);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:3px 3px 0 var(--nb-black)}
.cks-card{background:#fff;border:3px solid var(--nb-black,#231815);border-radius:12px;padding:10px 14px;margin-bottom:10px;box-shadow:3px 3px 0 var(--nb-black);text-align:left}
.cks-row{display:flex;justify-content:space-between;font-weight:700;font-size:.92em;padding:3px 0}
.cks-row .pos{color:#2d8a56;font-weight:800}
.cks-row .neg{color:#E85D75;font-weight:800}
.cks-net{border-top:2px solid #ddd;margin-top:4px;padding-top:6px;font-size:1.05em;font-weight:900}
.cks-stat div{display:flex;justify-content:space-between;padding:4px 0;font-weight:700;font-size:.92em;border-bottom:1px dashed #eee}
.cks-stat div:last-child{border-bottom:0}
.cks-stat b.neg{color:#E85D75}
.cks-stat small{color:#888;font-weight:600}
.cks-staff-h{font-weight:900;font-size:.9em;margin-bottom:6px;text-align:center}
.cks-staff{padding:6px 0;border-bottom:1px dashed #eee;font-size:.9em}
.cks-staff:last-child{border-bottom:0}
.cks-staff small{color:#6D4C41;font-weight:600}
.cks-mini{display:inline-block;width:auto;padding:5px 12px;font-size:.85em;margin:4px 4px 0 0}
.cks-fire{background:#FCE4EC}
.cks-max{color:#888;font-weight:700;font-size:.85em}
.ckm-order .ckm-price{color:#2d8a56;font-weight:900}
.ckm-emptydish{opacity:.55;filter:grayscale(.4)}