@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}:root{--clay-bg:#fffcf5;--clay-primary:#ffaa91;--clay-secondary:#96e6b3;--clay-accent:#fcd980;--clay-text:#5e4b41;--clay-shadow-light:-8px -8px 16px #ffffff;--clay-shadow-dark:8px 8px 16px #e6dcc8;--font-main:'NanumSquareNeo', sans-serif;--font-title:'NanumSquareNeo', sans-serif}*,body{margin:0;padding:0}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-main);background-color:var(--clay-bg);color:var(--clay-text);align-items:center;overflow-x:hidden;line-height:1.6;touch-action:manipulation}.app-container,.screen{flex-direction:column;width:100%}.app-container,body{min-height:100vh;display:flex}.app-container{max-width:480px;position:relative;padding:0 24px calc(45px + env(safe-area-inset-bottom))}.screen{display:none;flex:1;animation:fadeIn .25s ease-out;padding:20px 0 0;box-sizing:border-box}.clay-card,.screen.active{display:flex}#intro,#loading,#quiz,body{justify-content:center}#result{justify-content:flex-start;padding-top:10px}@media (max-width:480px){#result{padding-top:5px}}h1,h2,h3{font-family:var(--font-title);color:#4a3c31;font-weight:800}.clay-card{width:100%;background:#fffcf8;border-radius:32px;padding:35px 24px;box-shadow:10px 10px 25px #e6dcc8,-10px -10px 25px #fff;margin-bottom:16px;text-align:center;flex-direction:column;align-items:center}.clay-inner-card{width:100%;background:#f7f2e8;border-radius:20px;padding:20px;box-shadow:inset 4px 4px 8px rgba(94,75,65,.05);margin-top:16px;text-align:left}.clay-btn{display:block;width:100%;padding:20px;border:0;background:#fffcf8;border-radius:24px;font-size:1.2rem;font-weight:800;font-family:var(--font-main);color:var(--clay-text);cursor:pointer;box-shadow:8px 8px 16px #e6dcc8,-8px -8px 16px #fff;transition:all .2s ease;text-align:center;margin-bottom:16px;text-decoration:none}.clay-btn:active{box-shadow:inset 4px 4px 8px #d6cbb5,inset -4px -4px 8px #fff;transform:scale(.98)}.clay-btn.primary,.clay-btn.secondary{max-width:380px;margin-left:auto;margin-right:auto;background:var(--clay-primary);color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.05)}.clay-btn.secondary{background:var(--clay-secondary)}.home-btn{background:0 0;color:#8c7b70;font-size:.95rem;margin-top:20px;box-shadow:none;font-weight:500;text-decoration:underline;text-underline-offset:4px}.home-btn:active{box-shadow:none;transform:scale(.96);opacity:.8}.answer-list{width:100%;margin-top:10px}.option-btn{background:#fdfbf7;border:2px solid transparent;border-radius:20px;padding:22px 24px;text-align:left;font-size:1.1rem;line-height:1.5;box-shadow:6px 6px 12px #e6dcc8,-4px -4px 10px #fff;margin-bottom:16px;position:relative;overflow:hidden;word-break:keep-all;display:flex;align-items:center}@media (hover:hover) and (pointer:fine){.option-btn:hover{background:#fff;border-color:var(--clay-secondary);box-shadow:8px 8px 16px #dcd0b8,-6px -6px 12px #fff;transform:translateY(-2px)}}.option-btn.pressed{background:#fff;border-color:var(--clay-secondary);box-shadow:inset 4px 4px 8px #d6cbb5,inset -4px -4px 8px #fff;transform:scale(.98)}.option-btn:focus{outline:0}.option-btn::before{content:"A";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:2.2rem;font-weight:900;color:rgba(94,75,65,.08);pointer-events:none}#btn-a::before{color:rgba(150,230,179,.4)}#btn-b::before{content:"B";color:rgba(255,170,145,.4)}.clay-btn.home-btn{margin-top:20px;font-size:1rem;color:#8c7b70;background:0 0;box-shadow:none;text-decoration:underline;text-underline-offset:4px;padding:10px}.clay-btn.home-btn:hover{color:var(--clay-primary)}.intro-content,footer{width:100%}.main-title{font-size:2.2rem;color:var(--clay-primary);margin-bottom:15px;line-height:1.2}.subtitle{font-size:1.1rem;color:#8c7b70;margin-bottom:12px;word-break:keep-all;font-weight:700}.desc-text{margin-bottom:20px}.progress-container{height:14px;background:#eee6d8;border-radius:10px;margin-bottom:24px;width:100%;overflow:hidden;box-shadow:inset 2px 2px 5px rgba(0,0,0,.1)}.progress-bar{height:100%;background:linear-gradient(90deg,var(--clay-secondary),#70d6a5);width:0%;border-radius:10px;transition:width .4s cubic-bezier(.34,1.56,.64,1)}.q-indicator{text-align:right;font-size:1rem;color:#aaa;margin-bottom:12px;font-weight:800;width:100%}.question-text{font-size:1.6rem;line-height:1.4;margin-bottom:0;color:#4a3c31;word-break:keep-all}.loading-box{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}.clay-spinner{width:70px;height:70px;border:8px solid #f0e8db;border-top:8px solid var(--clay-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:30px}.result-img-container{width:100%;aspect-ratio:16/10;border-radius:28px;overflow:hidden;margin-top:10px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(230,220,200,.5)}.result-img-container img{width:100%;height:100%;object-fit:cover}.lucky-item-box,.result-name{font-weight:800;color:var(--clay-primary)}.result-name{font-size:1.8rem;margin-top:5px;margin-bottom:5px}.lucky-item-box{background:#fff;border-radius:16px;padding:12px 20px;display:inline-block;margin-top:10px;box-shadow:2px 2px 8px rgba(255,170,145,.15);font-size:1.1rem;word-break:keep-all;line-height:1.4}.desc-text{font-size:1.05rem;color:#5e4b41;line-height:1.7;word-break:keep-all}.section-label{display:inline-block;font-size:1rem;font-weight:800;color:#fff;background:var(--clay-secondary);padding:4px 14px;border-radius:50px;margin-bottom:12px;box-shadow:3px 3px 0 rgba(150,230,179,.2)}.section-label.solution{background:var(--clay-primary);box-shadow:3px 3px 0 rgba(255,170,145,.2)}.section-label.lucky{background:var(--clay-accent);color:#8c713a;box-shadow:3px 3px 0 rgba(252,217,128,.2)}@media (min-width:481px){.app-container{height:90vh;max-height:900px;border-radius:40px;box-shadow:20px 20px 60px rgba(0,0,0,.1),-20px -20px 60px rgba(255,255,255,.8);background:linear-gradient(135deg,#fffcf5 0,#f7f0e6 100%)}}footer{text-align:center;padding:25px 20px 20px;margin-top:auto;z-index:10;position:relative;color:#a09485;font-size:.8rem;font-family:"NanumSquareNeo",sans-serif}.legal-links{margin-bottom:8px}.legal-links a,.legal-links a:visited{color:#d2c8b5;text-decoration:none;margin:0 5px;display:inline-block}.legal-links a:hover{text-decoration:underline}