/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 86:0 Unexpected "<"

**/
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Noto+Sans+JP:wght@400;500;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
.gw{font-family:'Noto Sans JP',sans-serif;position:relative;max-width:390px;margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999;display:none}

/* ── 공통 픽셀 요소 ── */
.px-font{font-family:'Press Start 2P',monospace}
.star{position:absolute;background:#fff;animation:twinkle var(--d,2s) var(--delay,0s) infinite}
.pixel-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* ── 시작화면 ── */
.pixel-screen{position:relative;width:100%;background:#0a0a2e;border-radius:10px;overflow:hidden}
.pixel-bg{width:100%;display:block;image-rendering:pixelated}
.pixel-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;background:rgba(5,5,30,0.58)}
.pixel-brand{font-family:'Press Start 2P',monospace;font-size:7px;color:#f5d800;letter-spacing:2px;margin-bottom:10px;text-shadow:2px 2px 0 #a08000}
.pixel-title{font-family:'Press Start 2P',monospace;font-size:14px;color:#fff;text-align:center;line-height:1.7;margin-bottom:4px;text-shadow:2px 2px 0 #264148}
.pixel-title span{color:#f5d800}
.pixel-sub{font-family:'Press Start 2P',monospace;font-size:10px;font-weight:700;color:#ffffff;margin-bottom:16px;text-align:center;line-height:2;letter-spacing:1px;text-shadow:0 0 8px rgba(255,255,255,0.8),2px 2px 0 #264148}
.pixel-chars{display:flex;gap:10px;margin-bottom:16px;align-items:flex-end}
.pixel-chars img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(245,216,0,0.6));animation:float 2s ease-in-out infinite}
.pixel-chars img:nth-child(2){animation-delay:.4s}
.pixel-btn{font-family:'Press Start 2P',monospace;font-size:9px;color:#0a0a2e;background:#f5d800;border:none;padding:11px 22px;cursor:pointer;letter-spacing:1px;clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));box-shadow:4px 4px 0 #a08000;animation:blink-btn 1.2s step-start infinite;transition:transform .1s;-webkit-tap-highlight-color:transparent}
.pixel-btn:active{transform:translate(4px,4px);box-shadow:none}

/* ── 퀴즈화면 ── */
.quiz-wrap{background:#fffdf7;border-radius:10px;padding:14px 14px 18px;animation:fadein .25s ease;position:relative;overflow:hidden;border:2px solid #f0e8d0}

.px-progress-wrap{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.px-progress-track{flex:1;height:7px;background:#e8e0cc;border:2px solid #d4c9a8}
.px-progress-fill{height:100%;background:#f5d800;transition:width .4s ease}
.px-q-count{font-family:'Press Start 2P',monospace;font-size:6px;color:#264148;white-space:nowrap;font-weight:700}

.px-q-badge{display:inline-block;font-family:'Press Start 2P',monospace;font-size:7px;color:#fff;background:#264148;padding:3px 8px;margin-bottom:10px;clip-path:polygon(0 0,calc(100% - 3px) 0,100% 3px,100% 100%,3px 100%,0 calc(100% - 3px))}

.px-q-text{font-family:'Noto Sans JP',sans-serif;font-size:15px;font-weight:700;color:#264148;line-height:1.8;margin-bottom:14px;text-align:center}

.px-img-wrap{border:2px solid #d4c9a8;background:#f5f0e8;margin:0 auto 14px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;border-radius:4px;overflow:hidden;max-height:200px;width:200px}
.px-img-wrap::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);pointer-events:none}
.px-img-wrap img{width:70%;height:70%;object-fit:contain;animation:float 3s ease-in-out infinite}

.px-hint{background:#fff8e7;border:2px solid #f5d800;padding:8px 10px;margin-bottom:10px;font-family:'Noto Sans JP',sans-serif;font-size:12px;color:#264148;line-height:1.8;display:none;border-radius:6px}
.px-hint.show{display:block;animation:fadein .3s ease}

.px-input{width:100%;padding:12px 14px;font-family:'Noto Sans JP',sans-serif;font-size:15px;background:#fff;border:2px solid #d4c9a8;color:#264148;outline:none;border-radius:8px;transition:border-color .15s;-webkit-appearance:none;margin-bottom:8px}
.px-input::placeholder{color:#bbb;font-size:14px}
.px-input:focus{border-color:#264148}
.px-input.correct{border-color:#1D9E75;background:#0a2a1a;color:#1D9E75}
.px-input.wrong{border-color:#E24B4A;background:#2a0a0a;animation:px-shake .3s}

.px-feedback{font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:500;height:20px;margin-bottom:10px;line-height:1.6}
.px-feedback.ok{color:#1D9E75}.px-feedback.ng{color:#E24B4A}

.px-btn-ans{width:100%;padding:11px;font-family:'Press Start 2P',monospace;font-size:8px;color:#0a0a2e;background:#f5d800;border:none;cursor:pointer;letter-spacing:1px;clip-path:polygon(0 0,calc(100% - 4px) 0,100% 4px,100% 100%,4px 100%,0 calc(100% - 4px));box-shadow:4px 4px 0 #a08000;transition:transform .1s;margin-bottom:6px;-webkit-tap-highlight-color:transparent}
.px-btn-ans:active{transform:translate(4px,4px);box-shadow:none}
.px-btn-ans.next{background:#1D9E75;box-shadow:4px 4px 0 #0a5a3a;animation:blink-btn 1s step-start infinite}
.px-btn-ans.next:active{box-shadow:none}

.px-btn-hint{width:100%;padding:9px;font-family:'Noto Sans JP',sans-serif;font-size:13px;color:#264148;background:transparent;border:2px solid #d4c9a8;cursor:pointer;border-radius:8px;transition:border-color .15s;-webkit-tap-highlight-color:transparent}
.px-btn-hint:active{border-color:#f5d800;color:#f5d800}

/* ── 결과화면 ── */
.result-wrap{background:#fffdf7;border-radius:10px;padding:24px 14px;text-align:center;animation:fadein .3s ease;position:relative;overflow:hidden;border:2px solid #f0e8d0}
.result-title{font-family:'Press Start 2P',monospace;font-size:13px;color:#264148;text-shadow:1px 1px 0 rgba(0,0,0,0.1);margin-bottom:8px;line-height:1.8}
.result-sub{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:#555;line-height:1.8;margin-bottom:18px}
.cpn-wrap{background:#fffbe6;border:2px solid #f5d800;padding:12px;margin-bottom:6px;border-radius:8px}
.cpn-code{font-family:'Press Start 2P',monospace;font-size:13px;color:#264148;letter-spacing:3px;text-shadow:1px 1px 0 rgba(0,0,0,0.1);display:block;margin-bottom:8px}
.cpn-label{font-family:'Noto Sans JP',sans-serif;font-size:11px;color:#888;letter-spacing:0;line-height:1.8}
.result-btns{display:flex;gap:6px;margin-top:16px}
.px-btn-sm{flex:1;padding:9px 6px;font-family:'Press Start 2P',monospace;font-size:7px;color:#0a0a2e;background:#f5d800;border:none;cursor:pointer;clip-path:polygon(0 0,calc(100% - 3px) 0,100% 3px,100% 100%,3px 100%,0 calc(100% - 3px));box-shadow:3px 3px 0 #a08000;transition:transform .1s;-webkit-tap-highlight-color:transparent}
.px-btn-sm:active{transform:translate(3px,3px);box-shadow:none}

@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:0.1}}
@keyframes blink-btn{0%,49%{opacity:1}50%,100%{opacity:0.7}}
@keyframes px-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes popin{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
</style>