:root{--bg: #eaf7ff;--bg-grad: linear-gradient(180deg, #cfeffd 0%, #eaf7ff 38%, #fff7e8 100%);--card: #ffffff;--ink: #2b3a4a;--ink-soft: #6b7a8a;--primary: #4dabf7;--primary-strong: #2f8fe0;--mint: #51cf94;--purple: #9775fa;--orange: #ff922b;--yellow: #ffd43b;--tile-empty-a: #f1f3f5;--tile-empty-b: #e9ecef;--radius: 20px;--shadow: 0 8px 24px rgba(60, 120, 180, .16);--brand: #ff3a73;--brand-strong: #ed1d5e}*{box-sizing:border-box}body{margin:0;font-family:Pretendard,Apple SD Gothic Neo,Noto Sans KR,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--ink);background:linear-gradient(180deg,#cfeffd,#eaf7ff 45%,#fff8e8);-webkit-font-smoothing:antialiased}.app-root{min-height:100vh;min-height:100dvh;display:flex;justify-content:center}.screen{width:100%;max-width:480px;padding:20px 16px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}.start-hero{text-align:center;margin-top:8px}.start-title{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em}.start-desc{margin:10px 0 0;font-size:15px;line-height:1.5;color:#5a6b7b}.start-preview{width:min(62%,240px);margin:4px auto 0;border-radius:var(--radius);background-size:cover;background-position:center;box-shadow:var(--shadow);border:4px solid #fff}.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.card-title{margin:0 0 12px;font-size:16px;font-weight:700}.mode-list{display:flex;gap:10px}.mode-btn{flex:1;border:2px solid #e3edf5;background:#f7fbff;border-radius:14px;padding:12px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:44px;transition:transform .08s ease,border-color .15s ease,background .15s ease}.mode-btn.selected{border-color:var(--primary);background:#e7f4ff}.mode-btn:active{transform:scale(.97)}.mode-btn__label{font-weight:700;font-size:15px}.mode-btn__size{font-size:18px;font-weight:800;color:var(--primary-strong)}.mode-btn__desc{font-size:12px;color:#7a8a99;text-align:center;line-height:1.35}.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.image-thumb{border:2px solid #e3edf5;background:#f7fbff;border-radius:14px;padding:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .08s ease,border-color .15s ease}.image-thumb.selected{border-color:var(--mint);background:#e9fbf2}.image-thumb:active{transform:scale(.96)}.image-thumb__img{width:100%;aspect-ratio:1 / 1;border-radius:10px;background-size:cover;background-position:center}.image-thumb__title{font-size:13px;font-weight:600}.record-text{margin:0;font-size:18px;font-weight:700;color:var(--primary-strong)}.record-text--empty{font-size:14px;font-weight:500;color:#7a8a99}.toggle-row{display:flex;gap:8px;flex-wrap:wrap}.toggle-chip{flex:1;min-width:90px;min-height:44px;border-radius:12px;border:2px solid #e3edf5;background:#f1f3f5;color:#8a96a3;font-size:14px;font-weight:600;cursor:pointer}.toggle-chip.on{border-color:var(--purple);background:#f0ebff;color:#6c47d6}.btn{border:none;border-radius:999px;font-weight:700;font-size:16px;min-height:48px;padding:0 18px;cursor:pointer;transition:transform .08s ease,filter .15s ease,background .15s ease}.btn:active{transform:scale(.97)}.btn--start{background:linear-gradient(135deg,#ff5a86 0%,var(--brand) 100%);color:#fff;font-size:18px;min-height:56px;box-shadow:0 10px 22px #ff3a7352}.btn--start:hover{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-strong) 100%)}.btn--primary{background:var(--brand);color:#fff;flex:1}.btn--primary:hover{background:var(--brand-strong)}.btn--ghost{background:#f1f3f5;color:var(--ink)}.game-screen{align-items:stretch}.puzzle-header{display:flex;justify-content:space-around;gap:12px;background:var(--card);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow)}.puzzle-header__stat{display:flex;flex-direction:column;align-items:center;gap:2px}.puzzle-header__goal{display:flex;flex-direction:column;align-items:center;gap:4px}.puzzle-header__goalimg{width:46px;height:46px;border-radius:10px;background-size:cover;background-position:center;border:2px solid #e3edf5;box-shadow:0 2px 6px #3c78b42e}.puzzle-header__label{font-size:12px;color:#8a96a3;font-weight:600}.puzzle-header__value{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--primary-strong)}.puzzle-board{width:min(88vw,360px,calc(70vh * 3 / 5));display:grid;gap:5px;margin:0 auto;padding:6px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);touch-action:manipulation}.puzzle-tile{position:relative;border:none;border-radius:10px;background-repeat:no-repeat;cursor:pointer;min-width:44px;min-height:44px;padding:0;overflow:hidden;box-shadow:inset 0 0 0 1px #fff6;transition:transform .08s ease}.puzzle-tile.movable{cursor:pointer}.puzzle-tile.movable:active{transform:scale(.95)}.puzzle-tile__num{position:absolute;left:4px;top:3px;font-size:11px;font-weight:700;color:#ffffffeb;text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none}.puzzle-tile.empty{background:repeating-linear-gradient(45deg,var(--tile-empty-a),var(--tile-empty-a) 8px,var(--tile-empty-b) 8px,var(--tile-empty-b) 16px);cursor:default;box-shadow:inset 0 0 0 2px #dde3e9}.puzzle-tile.filled{background-repeat:no-repeat;animation:tile-fill .45s ease}.puzzle-board.solved{box-shadow:0 0 0 3px var(--mint),0 10px 28px #51cf9459;transition:box-shadow .3s ease}@keyframes tile-fill{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.tile-tag{position:absolute;top:3px;left:4px;font-size:10px;font-weight:700;color:#6b7a8a;background:#ffffffd1;border-radius:6px;padding:1px 5px;pointer-events:none;z-index:2}.puzzle-tile.is-spare{box-shadow:inset 0 0 0 2px #b9c6d4}.puzzle-tile.empty.is-spare{box-shadow:inset 0 0 0 2px #cdd8e2}.puzzle-tile.empty.done{background:#e9fbf2;box-shadow:inset 0 0 0 2px var(--mint)}.tile-check{font-size:30px;font-weight:800;color:var(--mint)}.board-controls{display:flex;gap:6px;align-items:center;justify-content:center;padding:4px}.fbtn{flex:1;min-width:0;height:64%;max-height:52px;border:none;border-radius:12px;color:#fff;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 4px 10px #28466e38;transition:transform .08s ease,filter .15s ease;white-space:nowrap}.fbtn:active{transform:translateY(1px) scale(.97);filter:brightness(.95)}.fbtn--restart{background:linear-gradient(135deg,#51cf94,#2fb87a)}.fbtn--image{background:linear-gradient(135deg,#4dabf7,#2f8fe0)}.fbtn--exit{background:linear-gradient(135deg,#ff922b,#f4791f)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e32468c;display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;animation:fade-in .2s ease}.modal-card{width:100%;max-width:340px;background:#fff;border-radius:24px;padding:28px 24px 22px;text-align:center;box-shadow:0 20px 50px #14284659;animation:pop-in .25s cubic-bezier(.2,.9,.3,1.3)}.modal-emoji{font-size:52px}.modal-title{margin:6px 0 4px;font-size:24px;font-weight:800}.modal-subtitle{margin:0 0 16px;color:#6a7b8b;font-size:15px}.modal-stats{margin:0 0 14px;display:flex;flex-direction:column;gap:8px}.modal-stats__row{display:flex;justify-content:space-between;background:#f4f8fc;border-radius:12px;padding:10px 14px}.modal-stats__row dt{color:#6a7b8b;font-size:14px}.modal-stats__row dd{margin:0;font-weight:800;font-size:16px;color:var(--primary-strong)}.modal-best{margin:0 0 18px;font-size:14px;color:#6a7b8b}.modal-best--new{font-size:18px;font-weight:800;color:var(--orange)}.modal-actions{display:flex;gap:10px}.modal-actions .btn{flex:1}.ad-slot{margin-top:4px;height:60px;border:2px dashed #cdd8e2;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#aab6c2;font-size:13px}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.85) translateY(10px)}}html,body{height:100%}#root{width:100%;min-height:100%}button{font-family:inherit}