body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}:root{--color-bg: #cabaa0;--color-text-dark: #3a1a00;--color-accent: #b8906a;--color-gold: #f0d870;--color-brown-mid: #7a5818;--color-brown-deep: #3e2808}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;background-color:var(--color-bg);font-family:"Noto Serif KR",serif;color:var(--color-text-dark)}.app-root{min-height:100vh;width:100%}.camera-screen{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.camera-bg-img{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}.camera-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:0}.camera-ring-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:440px;height:440px;overflow:visible;transform:translateY(-60px)}.camera-icon-overlay{position:absolute;width:950px;height:950px;object-fit:contain;z-index:0;pointer-events:none}.camera-circle{width:400px;height:400px;border-radius:50%;overflow:hidden;position:relative;z-index:1;transform:translate(-10px,-22px)}.webcam,.captured-img{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}.camera-controls{display:flex;flex-direction:column;align-items:center;gap:0;width:440px;margin-top:-8px}.hint-ribbon{width:100%;background:linear-gradient(90deg,transparent,rgba(195,170,110,.9) 15%,rgba(210,188,128,.95) 50%,rgba(195,170,110,.9) 85%,transparent);padding:11px 40px;text-align:center}.camera-hint{color:#2a1200;font-size:1.1rem;font-weight:400;letter-spacing:4px;margin:0;text-align:center}.capture-btn{font-weight:700;padding:16px 0;font-size:1.4rem;background:linear-gradient(180deg,var(--color-brown-mid) 0%,var(--color-brown-deep) 100%);color:var(--color-gold);border:none;border-top:1px solid #c09040;cursor:pointer;transition:all .2s ease;letter-spacing:5px;width:100%;box-shadow:0 6px 24px #00000080}.capture-btn:hover:not(:disabled){background:linear-gradient(180deg,#9a7020,#5a3a10);color:#fff8c0;box-shadow:0 8px 30px #0009}.capture-btn:disabled{opacity:.35;cursor:not-allowed}.scan-overlay{position:absolute;inset:0;background:#0000006b;z-index:10;display:flex;align-items:center;justify-content:center}.scan-line{position:absolute;width:100%;height:2px;background:#c8a03cd9;box-shadow:0 0 14px #c8a03ce6;animation:scan 2s linear infinite}@keyframes scan{0%{top:0}50%{top:100%}to{top:0}}.scan-text{color:#f0d890;font-size:1rem;font-weight:700;letter-spacing:4px;text-shadow:0 0 12px rgba(200,160,60,.9);z-index:1}.result-layout{position:relative;width:100%;min-height:100vh;overflow-x:hidden}.result-bg-img{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}.result-layout:before{content:"";position:fixed;inset:0;width:100%;height:100%;background:radial-gradient(circle at 50% -20%,#fff0,#000000a6);pointer-events:none;z-index:1}.result-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch;width:100%;padding:16px 10vw 28px 12vw;gap:12px}.result-page-header{text-align:center}.result-page-title{color:var(--color-text-dark);font-size:2.2rem;font-weight:900;letter-spacing:8px;margin:0 0 6px;text-shadow:1px 2px 5px rgba(0,0,0,.2)}.result-page-subtitle{color:#4a2a08;font-size:.95rem;font-weight:400;letter-spacing:2px;margin:0}.result-top{display:grid;grid-template-columns:430px minmax(0,1fr);gap:28px;align-items:center;margin-left:12vw;width:calc(100% - 12vw)}.face-scroll,.identity-roll,.roll-card{background-size:90% 95%;background-repeat:no-repeat;background-position:center;filter:drop-shadow(2px 4px 12px rgba(0,0,0,.3))}.face-scroll{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20% 15% 24%;gap:12px;transform:translate(-160px,-95px);min-height:630px}.face-image-container{width:130px;height:130px;border-radius:50%;border:3px solid var(--color-brown-mid);box-shadow:0 0 0 2px #c09030,0 0 14px #a06e1e66,0 4px 16px #00000073;overflow:hidden;flex-shrink:0}.result-face-img{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}.face-scroll-cta{color:#5a0808;font-size:.82rem;font-weight:700;text-align:center;line-height:1.7;letter-spacing:.5px;word-break:keep-all;overflow-wrap:break-word}.face-scroll-retake-hint{color:#3a1a08;font-size:.75rem;text-align:center;letter-spacing:1px}.retake-btn-circle{width:155px;height:155px;border-radius:50%;background:none;border:none;padding:0;cursor:pointer;transition:transform .3s,filter .3s;display:flex;align-items:center;justify-content:center}.retake-btn-circle img{width:100%;height:100%;object-fit:contain;display:block}.retake-btn-circle:hover{transform:scale(1.08);filter:brightness(1.1)}.identity-roll{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:5% 22% 5% 8%;min-height:280px;margin-left:-40px;margin-top:-130px;position:relative}.roll-section-title{color:#2a0e00;font-size:1.05rem;font-weight:700;letter-spacing:5px;text-align:center;border-bottom:1px solid rgba(80,40,0,.35);padding-bottom:10px;margin:0 0 16px;width:100%}.huge-title{font-size:3rem;color:#0c0200;text-align:center;margin:0 0 14px;text-shadow:1px 2px 4px rgba(0,0,0,.2);word-break:keep-all;line-height:1.2;font-weight:900;letter-spacing:3px}.highlight-desc{font-size:.95rem;color:#200a00;text-align:center;line-height:1.85;font-weight:400}.identity-stamp{position:absolute;bottom:1%;right:14%;width:90px;height:90px;object-fit:contain;opacity:.9}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;margin-top:-150px}.roll-card{position:relative;display:flex;flex-direction:column;width:100%;padding:5% 15%;min-height:600px}.roll-card-body{color:#1c0800;font-weight:400;line-height:1.8;flex:1}.face-item,.fortune-item{margin:10px 0;word-break:keep-all;overflow-wrap:break-word}.face-item{font-size:.9rem;color:#180800;line-height:1.7}.face-text{font-size:.85rem;color:#200a00;margin:7px 0}.fortune-item{font-size:.9rem;color:#180800;line-height:1.7}.fortune-text{font-size:.85rem;color:#200a00;margin:7px 0}