*{margin:0;padding:0;box-sizing:border-box}:root{--fortune-scale: 1}html,body,#root{width:100%;height:100%;overflow:hidden;background:#0d0d1a;font-family:Noto Sans KR,-apple-system,BlinkMacSystemFont,sans-serif}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#1a0a0a,#0d0d1a,#1a0a0a);display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity .5s ease-out}.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-content{display:flex;flex-direction:column;align-items:center;gap:20px}.loading-image{width:200px;height:auto;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.loading-title{font-size:48px;font-weight:800;background:linear-gradient(90deg,#ff6b6b,#ffc107,#ff6b6b);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 2s linear infinite}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.loading-subtitle{font-size:20px;color:#ffffffb3}.loading-bar-container{width:250px;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.loading-bar{height:100%;background:linear-gradient(90deg,#ff6b6b,#ffc107);border-radius:3px;transition:width .3s ease-out}.loading-percent{font-size:16px;color:#ffffff80;font-weight:600}.app{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.main-page{position:relative;width:100%;height:100%}.main-page canvas{width:100%!important;height:100%!important}.main-header{position:absolute;top:40px;left:0;right:0;text-align:center;z-index:10;pointer-events:none}.main-header h1{font-size:48px;font-weight:700;color:#ff6b6b;margin-bottom:8px}.main-header p{font-size:24px;color:#aaa}.main-header .group-photo-link{margin-top:12px;padding:0;background:none;border:none;color:#ffffff80;font-size:14px;cursor:pointer;pointer-events:auto;text-decoration:underline;text-underline-offset:3px;transition:color .2s}.main-header .group-photo-link:hover{color:#fffc}.main-footer{position:absolute;bottom:40px;left:0;right:0;text-align:center;z-index:10;pointer-events:none}.main-footer p{font-size:18px;color:#666}.main-footer .control-hint{margin-top:8px;font-size:13px;color:#ffffff59}.horse-bubble{position:absolute;top:50%;left:50%;transform:translate(-50%,-120%);background:#fffffff2;color:#1a1a2e;padding:16px 24px;border-radius:16px;text-align:center;z-index:100;box-shadow:0 4px 20px #0000004d;animation:bubblePop .3s ease-out}.horse-bubble p{margin:0;font-size:18px;font-weight:700;color:#ff6b6b}.horse-bubble p.sub{margin-top:8px;font-size:14px;font-weight:400;color:#555;line-height:1.4}.horse-bubble .bubble-tail{position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid rgba(255,255,255,.95)}@keyframes bubblePop{0%{opacity:0;transform:translate(-50%,-100%) scale(.8)}to{opacity:1;transform:translate(-50%,-120%) scale(1)}}.fortune-page{position:fixed;top:0;left:0;width:100vw;height:100dvh;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}.fortune-page canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}.fortune-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:0;pointer-events:none;z-index:10}.fortune-top{background:none;padding:calc(20px * var(--fortune-scale)) calc(20px * var(--fortune-scale)) calc(20px * var(--fortune-scale));pointer-events:auto}.header-row{position:relative;display:flex;align-items:center;margin-bottom:calc(16px * var(--fortune-scale));min-height:calc(90px * var(--fortune-scale))}.zodiac-left{display:flex;align-items:center;gap:calc(12px * var(--fortune-scale));z-index:1}.zodiac-left .back-btn{background:none;border:none;color:#888;font-size:calc(48px * var(--fortune-scale));font-weight:300;cursor:pointer;pointer-events:auto;padding:0 calc(8px * var(--fortune-scale));transition:color .2s}.zodiac-left .back-btn:hover{color:#fff}.zodiac-left .emoji{font-size:calc(72px * var(--fortune-scale))}.zodiac-left .name{font-size:calc(64px * var(--fortune-scale));font-weight:800;color:#fff;text-shadow:0 4px 30px rgba(255,107,107,.6)}.element-right{position:absolute;right:0;display:flex;align-items:center;gap:calc(12px * var(--fortune-scale))}.element-right .element-year{font-size:calc(48px * var(--fortune-scale));font-weight:700;color:#ff6b6b}.element-right .element-char{font-size:calc(72px * var(--fortune-scale));font-weight:800}.element-right .element-char.fire{color:#ff6b6b;text-shadow:0 0 40px rgba(255,107,107,.8)}.element-right .element-char.earth{color:#d4a574;text-shadow:0 0 40px rgba(212,165,116,.8)}.element-right .element-char.water{color:#4fc3f7;text-shadow:0 0 40px rgba(79,195,247,.8)}.element-right .element-char.wood{color:#81c784;text-shadow:0 0 40px rgba(129,199,132,.8)}.element-right .element-char.metal{color:#e0e0e0;text-shadow:0 0 40px rgba(224,224,224,.8)}.element-right .element-ko{font-size:calc(32px * var(--fortune-scale));font-weight:500;opacity:.7}.element-right .element-arrow{font-size:calc(56px * var(--fortune-scale));color:#888}.element-right .element-result{font-size:calc(40px * var(--fortune-scale));font-weight:800;padding:calc(8px * var(--fortune-scale)) calc(20px * var(--fortune-scale));border-radius:calc(16px * var(--fortune-scale));margin-left:calc(8px * var(--fortune-scale))}.element-right .element-result.good{color:#7fff7f;background:#64ff9626}.element-right .element-result.bad{color:#ff7f7f;background:#ff646426}.element-right.en{gap:calc(8px * var(--fortune-scale))}.element-right.en .element-year{font-size:calc(36px * var(--fortune-scale))}.element-right.en .element-char{font-size:calc(44px * var(--fortune-scale))}.element-right.en .element-arrow{font-size:calc(36px * var(--fortune-scale))}.element-right.en .element-result{font-size:calc(28px * var(--fortune-scale));padding:calc(6px * var(--fortune-scale)) calc(14px * var(--fortune-scale))}.element-description{font-size:calc(48px * var(--fortune-scale));color:#fff;text-align:center;margin-bottom:calc(24px * var(--fortune-scale));padding:calc(20px * var(--fortune-scale)) calc(24px * var(--fortune-scale));background:linear-gradient(90deg,transparent 0%,rgba(255,107,107,.15) 20%,rgba(255,180,100,.15) 80%,transparent 100%);border-radius:calc(16px * var(--fortune-scale));letter-spacing:1px}.element-description:before{content:"🔥";margin-right:calc(12px * var(--fortune-scale))}.element-description:after{content:"🌍";margin-left:calc(12px * var(--fortune-scale))}.info-grid{display:flex;justify-content:space-between}.info-left,.info-right{display:flex;flex-direction:column;gap:calc(12px * var(--fortune-scale))}.info-left{align-items:flex-start}.info-right{align-items:flex-end}.info-item{display:flex;flex-direction:column;gap:calc(8px * var(--fortune-scale));padding:calc(12px * var(--fortune-scale)) calc(16px * var(--fortune-scale));background:none;border-radius:calc(16px * var(--fortune-scale))}.info-right .info-item{align-items:flex-end;text-align:right}.info-item.good,.info-item.bad{background:none;border:none}.info-label{font-size:calc(28px * var(--fortune-scale));font-weight:600;color:#ffffff80}.info-item.good .info-label{color:#7fff7f99}.info-item.bad .info-label{color:#ff7f7f99}.info-value{font-size:calc(56px * var(--fortune-scale));font-weight:700;color:#fff}.info-value.nums{color:#c4b5fd;letter-spacing:calc(4px * var(--fortune-scale))}.color-dots{display:flex;gap:calc(14px * var(--fortune-scale))}.color-dots .dot{width:calc(52px * var(--fortune-scale));height:calc(52px * var(--fortune-scale));border-radius:50%;border:calc(3px * var(--fortune-scale)) solid rgba(255,255,255,.3)}.fortune-bottom{background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.8) 70%,transparent 100%);padding:calc(50px * var(--fortune-scale)) calc(20px * var(--fortune-scale)) calc(24px * var(--fortune-scale));pointer-events:auto}.share-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(12px * var(--fortune-scale))}.other-zodiac-btn{display:flex;align-items:center;justify-content:center;background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:calc(56px * var(--fortune-scale));padding:calc(24px * var(--fortune-scale)) calc(40px * var(--fortune-scale));color:#fffc;font-size:calc(28px * var(--fortune-scale));cursor:pointer;transition:all .2s ease}.other-zodiac-btn:active{background:#ffffff40;transform:scale(.95)}.share-btn{display:flex;align-items:center;justify-content:center;background:#ffffff26;border:1px solid rgba(255,255,255,.3);border-radius:50%;width:calc(112px * var(--fortune-scale));height:calc(112px * var(--fortune-scale));color:#fffc;cursor:pointer;transition:all .2s ease}.share-btn svg{width:calc(56px * var(--fortune-scale));height:calc(56px * var(--fortune-scale))}.share-btn:active{background:#ffffff40;transform:scale(.95)}.advice-row{display:flex;flex-direction:column;gap:calc(12px * var(--fortune-scale));margin-bottom:calc(20px * var(--fortune-scale))}.advice-item{display:flex;align-items:center;gap:calc(20px * var(--fortune-scale));padding:calc(16px * var(--fortune-scale)) calc(20px * var(--fortune-scale));border-radius:calc(20px * var(--fortune-scale))}.advice-item.dont{background:#ff64641f;border:calc(2px * var(--fortune-scale)) solid rgba(255,100,100,.25)}.advice-item.do{background:#64ff961f;border:calc(2px * var(--fortune-scale)) solid rgba(100,255,150,.25)}.advice-item .icon{font-size:calc(56px * var(--fortune-scale));font-weight:300}.advice-item.dont .icon{color:#ff6b6b}.advice-item.do .icon{color:#7fff7f}.advice-item .text{font-size:calc(52px * var(--fortune-scale));font-weight:600;color:#eee}.main-quote{position:relative;text-align:center;padding:calc(36px * var(--fortune-scale)) calc(24px * var(--fortune-scale));background:linear-gradient(135deg,#ff6b6b40,#ffb46440);border-radius:calc(24px * var(--fortune-scale));border:calc(2px * var(--fortune-scale)) solid rgba(255,150,100,.3)}.main-quote:before{content:"“";position:absolute;top:calc(5px * var(--fortune-scale));left:calc(24px * var(--fortune-scale));font-size:calc(100px * var(--fortune-scale));color:#ff966480;font-family:Georgia,serif;line-height:1}.main-quote:after{content:"”";position:absolute;bottom:calc(-30px * var(--fortune-scale));right:calc(24px * var(--fortune-scale));font-size:calc(100px * var(--fortune-scale));color:#ff966480;font-family:Georgia,serif;line-height:1}.main-quote p{font-size:calc(64px * var(--fortune-scale));font-weight:600;color:#fff;margin:0;line-height:1.3}.main-quote p.highlight{font-size:calc(84px * var(--fortune-scale));font-weight:800;background:linear-gradient(90deg,#fc0,#ff9500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.fortune-content-all{margin-top:auto;padding-bottom:80px}.fortune-title{text-align:center;margin-bottom:30px}.fortune-title .badge{display:inline-block;background:linear-gradient(135deg,#ff6b6b,#ff8e8e);padding:16px 40px;border-radius:40px;font-size:28px;font-weight:700;color:#fff}.fortune-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.fortune-item{background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:20px 24px;border:1px solid rgba(255,255,255,.1)}.fortune-item .item-label{font-size:18px;color:#888;margin-bottom:8px}.fortune-item .item-value{font-size:26px;font-weight:700;color:#fff}.fortune-item .item-value .fire{color:#ff6b6b}.fortune-item .item-value .earth{color:#d4a574}.fortune-item .item-value .relation{display:inline-block;background:#8f83;color:#8f8;font-size:18px;padding:4px 12px;border-radius:12px;margin-left:12px}.fortune-item .item-value.colors{display:flex;gap:12px}.fortune-item .item-value .color{width:40px;height:40px;border-radius:50%}.fortune-item .item-value .color.beige{background:#d4b896}.fortune-item .item-value .color.brown{background:#a67c52}.fortune-item .item-value .color.red{background:#ff6b6b}.fortune-item .item-value.numbers{display:flex;gap:16px}.fortune-item .item-value.numbers span{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;font-size:24px}.fortune-item .item-value.caution{color:#f88}.fortune-advice{background:#00000080;border-radius:20px;padding:24px;margin-bottom:20px;border:1px solid rgba(255,255,255,.1)}.fortune-advice p{font-size:24px;color:#ddd;margin-bottom:12px}.fortune-advice p:last-child{margin-bottom:0}.fortune-advice .dont{color:#f88}.fortune-advice .do{color:#8f8}.fortune-message{text-align:center;background:linear-gradient(135deg,#ff6b6b4d,#ffcc004d);border-radius:24px;padding:32px;font-size:28px;color:#fff;line-height:1.5}.fortune-message strong{color:#fc0;font-size:32px}.indicator-dot{width:12px;height:12px;border-radius:50%;background:#ffffff4d;transition:all .3s ease}.indicator-dot.active{background:#ff6b6b;transform:scale(1.3)}.indicator-dot.completed{background:#ff6b6b80}.fortune-section{color:#fff}.fortune-section .section-badge{display:inline-block;background:linear-gradient(135deg,#ff6b6b,#ff8e8e);padding:8px 20px;border-radius:20px;font-size:18px;font-weight:700;margin-bottom:20px}.fortune-section .keywords{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}.fortune-section .keyword{background:#ffffff1a;padding:8px 16px;border-radius:16px;font-size:16px;color:#ddd}.fortune-section .description{font-size:20px;line-height:1.8;color:#ccc}.fortune-section .description strong{color:#ff6b6b}.fortune-section .description em{color:#fc0;font-style:normal}.element-box{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.element-item{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#ffffff0d;border-radius:12px}.element-item .label{font-size:18px;color:#aaa}.element-item .value{font-size:24px;font-weight:700}.element-item .value.earth{color:#d4a574}.element-item .value.fire{color:#ff6b6b}.relation{display:flex;align-items:center;gap:20px;justify-content:center;margin-bottom:20px}.relation-flow{font-size:28px;font-weight:700;color:#ff6b6b}.relation-type{font-size:20px;color:#8f8;background:#88ff881a;padding:8px 16px;border-radius:12px}.lucky-item{margin-bottom:24px}.lucky-label{font-size:16px;color:#888;margin-bottom:12px}.color-chips{display:flex;gap:10px;flex-wrap:wrap}.color-chip{padding:10px 18px;border-radius:20px;font-size:16px;font-weight:600}.color-chip.beige{background:#d4b896;color:#333}.color-chip.brown{background:#a67c52;color:#fff}.color-chip.ivory{background:ivory;color:#333}.color-chip.red{background:#ff6b6b;color:#fff}.lucky-numbers{display:flex;gap:16px}.lucky-numbers .number{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;font-size:24px;font-weight:700;color:#fff}.directions{display:flex;gap:12px}.direction{padding:12px 24px;background:#fc03;border:1px solid rgba(255,204,0,.4);border-radius:12px;color:#fc0;font-size:18px;font-weight:600}.compat-group{margin-bottom:24px;padding:20px;border-radius:16px}.compat-group.good{background:#88ff881a;border:1px solid rgba(136,255,136,.3)}.compat-group.caution{background:#ff6b6b1a;border:1px solid rgba(255,107,107,.3)}.compat-label{font-size:16px;color:#888;margin-bottom:12px}.compat-animals{display:flex;gap:16px}.compat-animals .animal{font-size:22px;padding:8px 16px;background:#ffffff1a;border-radius:12px}.caution-note{font-size:14px;color:#f88;margin-top:8px}.advice-dont,.advice-do{display:flex;align-items:flex-start;gap:16px;padding:20px;border-radius:16px;margin-bottom:16px}.advice-dont{background:#ff6b6b1a}.advice-do{background:#88ff881a}.advice-dont .icon,.advice-do .icon{font-size:28px}.advice-dont .text,.advice-do .text{font-size:20px;line-height:1.6;color:#ddd}.yearly-message{text-align:center;padding:30px;background:linear-gradient(135deg,#ff6b6b33,#fc03);border-radius:20px;margin-top:20px}.yearly-message p{font-size:24px;line-height:1.6;color:#fff}.yearly-message strong{color:#fc0;font-size:28px}.debug-indicator{position:absolute;top:20px;left:20px;background:#0f0;color:#000;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:700;z-index:100}.recording-indicator{position:absolute;top:20px;right:20px;background:red;color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:700;animation:blink 1s infinite;z-index:100}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}.back-button{position:absolute;bottom:40px;left:40px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px 24px;border-radius:12px;font-size:16px;cursor:pointer;transition:all .3s ease;z-index:100;pointer-events:auto}.back-button:hover{background:#fff3}.complete-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:200;animation:fadeIn .5s ease}.complete-overlay p{color:#fff;font-size:32px;font-weight:700}.complete-overlay .download-note{font-size:18px;color:#888;margin-top:16px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media screen and (width:1080px)and (height:1920px){:root{--fortune-scale: 1 !important}}@media screen and (max-width:480px){:root{--fortune-scale: .38}.fortune-page{overflow-y:auto;overflow-x:hidden}.fortune-page canvas{position:fixed!important;top:0;left:0;width:100%!important;height:100%!important;z-index:0}.fortune-overlay{position:absolute;top:0;left:0;right:0;z-index:10;height:auto;min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;pointer-events:auto}.fortune-top{padding:15px;pointer-events:auto}.fortune-bottom{position:absolute;bottom:0;left:0;right:0;background:none;padding:10px;pointer-events:auto}.header-row{flex-wrap:nowrap;justify-content:space-between;align-items:center;min-height:auto;gap:8px}.zodiac-left{flex-shrink:0}.element-right{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.element-description{font-size:calc(48px * var(--fortune-scale));padding:10px 12px;margin-bottom:12px}.main-quote{padding:15px 12px}.main-quote p{font-size:calc(44px * var(--fortune-scale))}.main-quote p.highlight{font-size:calc(56px * var(--fortune-scale))}}@media screen and (min-width:481px)and (max-width:768px){:root{--fortune-scale: .55}}@media screen and (min-width:769px)and (max-width:1080px){:root{--fortune-scale: .65}}@media screen and (min-width:1081px)and (max-aspect-ratio:1/1){:root{--fortune-scale: .85}}@media screen and (min-aspect-ratio:1/1)and (min-width:769px){:root{--fortune-scale: .5}.fortune-overlay{flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:20px;gap:15px;overflow-y:auto}.fortune-top,.fortune-bottom{width:40%;max-width:500px;background:#000000bf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:20px}.header-row{flex-direction:column;align-items:flex-start;gap:10px}.element-right{position:relative;flex-wrap:wrap;justify-content:flex-start}.info-grid{flex-direction:column;gap:10px}.info-right{align-items:flex-start}.info-right .info-item{align-items:flex-start;text-align:left}}@media screen and (min-aspect-ratio:1/1)and (min-width:1200px){:root{--fortune-scale: .55}.fortune-top,.fortune-bottom{width:35%;max-width:450px}}