/* ========================================================== LUMIA RECO — 앱 전용 스타일 (.r-* 접두) 공통 디자인 코드 css/lumi-hud.css 를 무수정 상속하고 그 위에만 얹는다. 테마 고정: (시안 축) · 다크 전용 ========================================================== */ /* ---------- 셸 ---------- */ *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;} body{background:var(--bg-deep);color:var(--text);font-family:var(--font); -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;} #stage{position:relative;min-height:100%;min-height:100dvh;display:flex;flex-direction:column;} #stage>.hud-scene-body{flex:1;display:flex;flex-direction:column;height:auto;} /* 배경 위에 얹는 스캔라인 — 씬 자체 그리드(.hud-scene::before)와 겹쳐 HUD 질감 */ .r-veil{position:absolute;inset:0;z-index:1;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px); opacity:.5;mix-blend-mode:multiply;} .r-aurora{position:absolute;inset:-20% -10% auto -10%;height:70%;z-index:0;pointer-events:none; background:radial-gradient(55% 60% at 50% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%); filter:blur(6px);animation:r-aurora 9s var(--ease) infinite alternate;} @keyframes r-aurora{from{opacity:.55;transform:translateY(-4%) scale(1)} to{opacity:.95;transform:translateY(2%) scale(1.06)}} /* ---------- 상단 바 ---------- */ .r-top{position:relative;z-index:4;display:flex;align-items:center;gap:10px; padding:12px 16px 10px;border-bottom:1px solid rgba(53,102,117,.35); background:linear-gradient(180deg,rgba(10,16,32,.72),rgba(10,16,32,0));} .r-brand{display:flex;align-items:baseline;gap:8px;min-width:0;} .r-brand b{font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--text); white-space:nowrap;} .r-brand i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.14em; color:var(--accent-bright);white-space:nowrap;} .r-spacer{flex:1;} .r-chip{display:inline-block;padding:4px 9px;font:700 9.5px/1 var(--font);letter-spacing:.12em; color:var(--text-dim);border:1px solid rgba(123,180,203,.28);white-space:nowrap;} /* 사운드 토글 — 이모지 대신 HUD 표기 (기본 OFF) */ .r-sfxbtn{display:inline-flex;align-items:center;gap:6px;flex:none;height:26px;padding:0 9px; background:rgba(10,16,32,.5);border:1px solid rgba(123,180,203,.3);color:var(--text-dim); font:700 9.5px/1 var(--font);letter-spacing:.14em;cursor:pointer; transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);} .r-sfxbtn>i{width:7px;height:7px;background:rgba(123,180,203,.4); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:background var(--dur) var(--ease);} .r-sfxbtn:hover{border-color:var(--accent);color:var(--accent-bright);} .r-sfxbtn.is-on{border-color:var(--accent);color:var(--accent-bright); box-shadow:0 0 10px var(--accent-glow);} .r-sfxbtn.is-on>i{background:var(--accent-bright);box-shadow:0 0 7px var(--accent-glow);} .r-sfxbtn:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;} /* ---------- 본문 / 화면 전환 ---------- */ .r-main{position:relative;z-index:3;flex:1;display:flex;flex-direction:column; align-items:center;padding:0 16px;} .r-screen{display:none;width:var(--panel-w);flex:1;flex-direction:column;padding:18px 0 26px;} .r-screen.is-active{display:flex;animation:r-in 240ms var(--ease) both;} @keyframes r-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .r-wipe{position:fixed;left:0;right:0;top:0;height:2px;z-index:9;pointer-events:none; background:linear-gradient(90deg,transparent,var(--accent-line),transparent); opacity:0;box-shadow:0 0 16px var(--accent-glow);} .r-wipe.is-run{animation:r-wipe 320ms var(--ease);} @keyframes r-wipe{0%{opacity:0;transform:translateY(0)} 12%{opacity:1}100%{opacity:0;transform:translateY(100vh)}} /* ---------- 공통 조각 ---------- */ .r-rule{height:1px;background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 55%,transparent),transparent);margin:14px 0;} .r-note{font-size:11.5px;line-height:1.6;color:var(--text-dim);letter-spacing:.02em;} .r-mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";} /* ---------- 인트로 ---------- */ .r-intro-hero{position:relative;display:grid;place-items:center;padding:8px 0 2px;} .r-lumi{position:relative;width:104px;height:104px;border-radius:50%;overflow:hidden; border:2px solid var(--accent);background:var(--bg-deep); box-shadow:0 0 0 5px rgba(10,16,32,.6),0 0 26px var(--accent-glow);} .r-lumi img{width:100%;height:100%;object-fit:cover;object-position:47% 44%;} .r-lumi::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 60%,rgba(0,25,35,.35));} .r-ring{position:absolute;width:150px;height:150px;border:1px dashed rgba(106,227,250,.35); border-radius:50%;animation:r-spin 16s linear infinite;} .r-ring::before{content:"";position:absolute;top:-4px;left:calc(50% - 4px);width:7px;height:7px; background:var(--accent-bright);box-shadow:0 0 10px var(--accent-glow); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);} @keyframes r-spin{to{transform:rotate(360deg)}} .r-title{margin:16px 0 0;font-size:clamp(30px,9vw,40px);font-weight:800;line-height:1.16; letter-spacing:-.02em;text-align:center;text-shadow:var(--text-shadow);} .r-title em{font-style:normal;color:var(--accent-bright);} .r-sub{margin:10px 0 0;text-align:center;font-size:13px;line-height:1.65;color:var(--text-muted); word-break:keep-all;} /* 데이터 스탯 스트립 */ .r-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:20px; background:rgba(53,102,117,.5);border:1px solid rgba(53,102,117,.5);} .r-stats>div{display:grid;gap:4px;justify-items:center;padding:12px 6px 11px; background:rgba(6,12,24,.55);text-align:center;} .r-stats b{font-size:clamp(17px,5vw,21px);font-weight:800;line-height:1;color:var(--accent-bright); letter-spacing:-.01em;} .r-stats span{font-size:10px;line-height:1.45;color:var(--text-dim);letter-spacing:.02em;} .r-meta{list-style:none;padding:0;display:grid;gap:7px;margin:18px 0 0;} .r-meta li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-option); letter-spacing:.01em;} .r-meta li::before{content:"";flex:none;width:11px;height:7px;background:var(--accent); clip-path:polygon(0 0,100% 0,60% 100%,0 100%);} .r-cta-wrap{margin-top:auto;padding-top:22px;display:grid;gap:10px;} /* ---------- 질문 ---------- */ .r-qhead{display:grid;gap:9px;} .r-qmeta{display:flex;align-items:baseline;gap:10px;} .r-qmeta .r-qno{font:800 12px/1 var(--font);letter-spacing:.16em;color:var(--accent-bright);} .r-qmeta .r-qaxis{font:600 11px/1 var(--font);letter-spacing:.14em;color:var(--text-dim); text-transform:uppercase;} .r-qbody{margin-top:20px;flex:1;display:flex;flex-direction:column;justify-content:center; padding-bottom:12px;} .hud-q{font-size:clamp(21px,6.2vw,28px);} .r-opts{margin-top:20px;} .r-opts .hud-opt{animation:r-opt 260ms var(--ease) both;} .r-opts .hud-opt:nth-child(1){animation-delay:40ms} .r-opts .hud-opt:nth-child(2){animation-delay:80ms} .r-opts .hud-opt:nth-child(3){animation-delay:120ms} .r-opts .hud-opt:nth-child(4){animation-delay:160ms} .r-opts .hud-opt:nth-child(5){animation-delay:200ms} @keyframes r-opt{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}} .r-optkey{flex:none;width:19px;margin-right:11px;font-weight:800;font-size:12px; letter-spacing:.08em;opacity:.72;} .hud-opt.is-selected .r-optkey{opacity:1;} .r-qfoot{margin-top:auto;padding-top:22px;display:grid;gap:12px;} .r-back{justify-self:start;} /* 루미 말풍선 — 리액션 교체 시 팝 */ .hud-bubble-text{min-height:2.6em;} .r-bubble.is-react .hud-bubble-body{border-color:color-mix(in srgb,var(--accent-bright) 70%,transparent); box-shadow:0 0 18px color-mix(in srgb,var(--accent) 22%,transparent);} .r-bubble.is-react{animation:hud-pop 140ms var(--ease);} /* ---------- 분석 연출 ---------- */ .r-an{flex:1;display:flex;flex-direction:column;justify-content:center;gap:0;} .r-an-frame{position:relative;padding:26px 20px 22px;overflow:hidden; border:1px solid rgba(53,102,117,.55);background:rgba(6,12,24,.55); backdrop-filter:blur(3px);} .r-an-frame::before,.r-an-frame::after{content:"";position:absolute;width:14px;height:14px;} .r-an-frame::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);} .r-an-frame::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);} .r-an-beam{position:absolute;left:0;right:0;height:60px;pointer-events:none; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 22%,transparent),transparent); animation:r-beam 1.6s linear infinite;} @keyframes r-beam{from{transform:translateY(-70px)}to{transform:translateY(340px)}} .r-an-stage{margin:14px 0 4px;font-size:clamp(17px,4.6vw,21px);font-weight:700;line-height:1.35; color:var(--text);text-shadow:var(--text-shadow);min-height:1.4em;} .r-an-sub{font-size:12px;color:var(--text-option);line-height:1.5;min-height:1.5em;} .r-an-pct{position:absolute;top:20px;right:20px;font:800 22px/1 var(--font); color:var(--accent-bright);letter-spacing:-.01em;text-shadow:0 0 14px var(--accent-glow);} .r-an-bar{margin-top:18px;} .r-an-log{margin-top:16px;display:grid;gap:4px;height:104px;overflow:hidden; font:500 11px/1.55 var(--font);color:var(--text-dim);letter-spacing:.02em;} .r-an-log div{display:flex;align-items:center;gap:9px;white-space:nowrap;overflow:hidden; animation:r-logline 180ms var(--ease) both;} .r-an-log div>span:first-child{color:var(--text-option);opacity:.65;letter-spacing:.1em;} .r-an-log div>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;} .r-an-log b{margin-left:auto;color:var(--accent-bright);font-weight:700;} @keyframes r-logline{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} .r-an-count{display:flex;justify-content:space-between;margin-top:14px; font:700 11px/1 var(--font);letter-spacing:.1em;color:var(--text-dim);} .r-an-count b{color:var(--accent-bright);} /* ---------- 결과 ---------- */ .r-res-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;} .r-hero{position:relative;display:grid;justify-items:center;padding:6px 0 0;} .r-portrait{position:relative;width:min(268px,74vw);aspect-ratio:325/480; background:linear-gradient(180deg,rgba(11,26,38,.9),rgba(6,12,24,.55)); border:1px solid rgba(53,102,117,.75);overflow:hidden; clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px), calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px); animation:r-portrait 420ms var(--ease) both;} @keyframes r-portrait{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} .r-portrait::before{content:"";position:absolute;inset:0; background:radial-gradient(58% 46% at 50% 34%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 72%), repeating-linear-gradient(0deg,rgba(130,190,215,.055) 0 1px,transparent 1px 26px);} .r-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; object-position:50% 92%;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));} .r-portrait::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 62%,rgba(6,12,24,.82));} .r-pfx{position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent-line) 45%,transparent),transparent); height:44%;animation:r-pscan 1.5s var(--ease) 1 both;opacity:0;} @keyframes r-pscan{0%{opacity:.9;transform:translateY(-120%)}70%{opacity:.5}100%{opacity:0;transform:translateY(260%)}} .r-corner{position:absolute;width:18px;height:18px;z-index:3;border-color:var(--accent-bright);} .r-corner.tl{top:5px;left:5px;border-top:2px solid;border-left:2px solid;} .r-corner.tr{top:5px;right:5px;border-top:2px solid;border-right:2px solid;} .r-corner.bl{bottom:5px;left:5px;border-bottom:2px solid;border-left:2px solid;} .r-corner.br{bottom:5px;right:5px;border-bottom:2px solid;border-right:2px solid;} /* 일치율 — 일러 하단 어두운 구간 위에 오버레이 */ .r-match{position:absolute;left:14px;right:14px;bottom:13px;z-index:4;display:grid;gap:3px;} .r-match-lab{font:700 9.5px/1 var(--font);letter-spacing:.2em;color:var(--accent-line);opacity:.9;} .r-match-val{display:flex;align-items:baseline;gap:2px;font-weight:800;letter-spacing:-.02em; color:var(--accent-bright);text-shadow:0 0 20px var(--accent-glow),0 2px 8px rgba(0,0,0,.7);} .r-match-val b{font-size:clamp(34px,10vw,42px);line-height:1;} .r-match-val i{font-style:normal;font-size:16px;} .r-match-bar{display:block;height:3px;background:rgba(123,180,203,.25);overflow:hidden;} .r-match-bar i{display:block;height:100%;width:0; background:linear-gradient(90deg,var(--accent),var(--accent-line)); box-shadow:0 0 8px var(--accent-glow);transition:width 900ms var(--ease);} .r-name{margin-top:16px;text-align:center;} .r-name h2{margin:0;font-size:clamp(30px,9.5vw,40px);font-weight:800;letter-spacing:-.02em; line-height:1.1;text-shadow:var(--text-shadow);} .r-name p{margin:5px 0 0;font:700 10.5px/1 var(--font);letter-spacing:.24em;color:var(--text-dim); text-transform:uppercase;} .r-tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:13px;} .r-spec{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin-top:18px; padding:14px 15px;border:1px solid rgba(53,102,117,.5);background:rgba(6,12,24,.45);} .r-spec dt{font:700 10.5px/1.6 var(--font);letter-spacing:.14em;color:var(--text-dim); white-space:nowrap;} .r-spec dd{margin:0;font-size:12.5px;line-height:1.6;color:var(--text);word-break:keep-all;} .r-pips{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;} .r-pips i{width:15px;height:8px;background:rgba(123,180,203,.2);transform:skewX(-24deg);} .r-pips i.on{background:var(--accent);box-shadow:0 0 7px var(--accent-glow);} .r-pips + span{margin-left:8px;font-size:11.5px;color:var(--text-dim);} .r-secttl{display:flex;align-items:center;gap:9px;margin:24px 0 11px; font:700 11px/1 var(--font);letter-spacing:.16em;color:var(--accent-bright);} .r-secttl::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent),transparent);} .r-why{list-style:none;padding:0;margin:0;display:grid;gap:9px;} .r-why li{position:relative;padding:11px 13px 11px 30px;font-size:12.5px;line-height:1.65; color:var(--text);background:rgba(0,180,216,.07); border-left:2px solid color-mix(in srgb,var(--accent) 70%,transparent); word-break:keep-all;animation:r-in 260ms var(--ease) both;} .r-why li:nth-child(2){animation-delay:110ms;} .r-why li::before{content:"";position:absolute;left:12px;top:17px;width:8px;height:8px; background:var(--accent-bright);clip-path:polygon(0 0,100% 50%,0 100%);} .r-why b{color:var(--accent-bright);font-weight:700;} .r-tip{padding:12px 14px;font-size:12.5px;line-height:1.7;color:var(--text-muted); border:1px dashed rgba(123,180,203,.32);word-break:keep-all;} .r-tip strong{display:block;margin-bottom:5px;font:700 10.5px/1 var(--font);letter-spacing:.14em; color:var(--text-option);} /* 보충 2인 */ .r-alts{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .r-alt{position:relative;display:grid;gap:8px;padding:11px 11px 13px;text-align:center; background:rgba(24,30,48,.5);border:1px solid rgba(53,102,117,.5); color:var(--text);font-family:var(--font);cursor:pointer; transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);} .r-alt:hover{border-color:var(--accent);transform:translateY(-2px); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 26%,transparent);} .r-alt:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;} .r-alt-img{position:relative;aspect-ratio:1;overflow:hidden; background:radial-gradient(58% 58% at 50% 40%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 72%);} .r-alt-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 8%;} .r-alt-rank{position:absolute;top:0;left:0;z-index:2;padding:3px 7px; background:rgba(6,12,24,.85);border-right:1px solid rgba(53,102,117,.6); border-bottom:1px solid rgba(53,102,117,.6); font:800 9.5px/1 var(--font);letter-spacing:.1em;color:var(--accent-bright);} .r-alt-name{font-size:14.5px;font-weight:700;letter-spacing:-.01em;} .r-alt-pct{font:800 12px/1 var(--font);color:var(--accent-bright);letter-spacing:.02em;} .r-alt-role{font-size:10.5px;color:var(--text-dim);letter-spacing:.04em;} .r-alt-one{font-size:11px;line-height:1.55;color:var(--text-muted);word-break:keep-all; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .r-share{position:relative;margin-top:46px;padding:15px 14px 14px;text-align:center; border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); background:linear-gradient(180deg,rgba(0,180,216,.1),rgba(0,180,216,.03));} /* 깡깡이 스티커 — 공유 박스 우상단에 얹는다 */ .r-ggang{position:absolute;top:-40px;right:-6px;width:64px;height:auto; transform:rotate(-7deg);filter:drop-shadow(0 4px 9px rgba(0,0,0,.6));pointer-events:none;} .r-share p{margin:0;font-size:12.5px;line-height:1.65;color:var(--text);word-break:keep-all;} .r-share span{display:block;margin-top:6px;font-size:11px;color:var(--text-dim);} .r-res-cta{margin-top:18px;display:grid;gap:10px;} /* ---------- 푸터 ---------- */ .r-foot{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center; align-items:center;gap:6px 14px;padding:16px 16px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid rgba(53,102,117,.28);} .r-foot a{font-size:11px;letter-spacing:.03em;color:var(--text-dim);text-decoration:none; border-bottom:1px solid transparent;transition:color var(--dur) var(--ease);} .r-foot a:hover{color:var(--accent-bright);border-bottom-color:var(--accent);} .r-foot span{font-size:10.5px;color:#5B5967;letter-spacing:.06em;} /* ---------- 타이핑 커서 ---------- */ .r-caret{display:inline-block;width:7px;height:1em;margin-left:2px;vertical-align:-2px; background:var(--accent-bright);animation:hud-blink .9s steps(2,end) infinite;} /* ---------- 데스크톱 ---------- */ @media (min-width:760px){ :root{--panel-w:min(620px,100%);} .r-top{padding:14px 26px 12px;} .r-screen{padding:26px 0 34px;} .r-title{font-size:46px;} .r-sub{font-size:14px;} .hud-q{font-size:30px;} :root{--option-h:60px;--fs-option:16.5px;} .r-portrait{width:300px;} .r-alt-one{-webkit-line-clamp:4;} /* 넓은 화면에서는 인트로를 통째로 세로 중앙 정렬 (바닥 고정 CTA 해제) */ #s-intro{justify-content:center;} .r-cta-wrap{margin-top:0;padding-top:26px;} } /* 태블릿·데스크톱 질문 화면 — 좌: 루미 가이드, 중: 선택지, 우: 후보군 패널 */ @media (min-width:1024px){ #s-quiz.is-active{width:min(1180px,100%);} #s-quiz .r-qgrid{grid-template-columns:minmax(280px,340px) 1fr minmax(210px,248px); column-gap:34px;align-items:stretch;} #s-quiz .r-guide-fig{width:170px;height:170px;} #s-quiz .r-guide-q{font-size:18.5px;} } @media (min-width:1180px){ /* 결과 화면만 2단 — 좌: 일러/이름, 우: 스펙·근거·보충 */ #s-result.is-active{width:min(1060px,100%);display:grid; grid-template-columns:minmax(320px,400px) 1fr;gap:34px;align-items:start;} #s-result .r-col-a{position:sticky;top:18px;} #s-result .r-res-head{grid-column:1/-1;} .r-portrait{width:340px;} } @media (prefers-reduced-motion:reduce){ .r-aurora,.r-an-beam,.r-pfx,.r-ring{animation:none;} .r-screen.is-active,.r-opts .hud-opt,.r-why li,.r-portrait{animation:none;} } /* ========================================================== V2 질감 대수술 — 글래스모피즘 · 입체 · 대화형 가이드 · 후보군 패널 · 리빌 팔레트는 lumi-hud reco 테마 그대로, 재료만 교체한다. ========================================================== */ /* ---------- 유리 재질 공통 ---------- */ .r-glass{position:relative; background:linear-gradient(152deg,rgba(148,214,238,.10),rgba(10,16,32,.46) 46%,rgba(10,16,32,.6)); border:1px solid rgba(140,220,245,.20); backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.25), 0 14px 34px rgba(3,8,18,.45);} .r-glass::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(190,240,255,.07) 46%,transparent 60%);} /* ---------- 배경 — 오로라 2겹 + 부유 입자 ---------- */ .r-aurora-b{inset:auto -14% -26% -14%;top:auto;height:64%; background:radial-gradient(60% 62% at 50% 100%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 72%); animation-duration:13s;animation-delay:-4s;} .r-dust{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.9;} /* ---------- 3D 틸트 ---------- */ .r-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform 160ms var(--ease);will-change:transform;} /* ---------- 선택지 리본 — 유리 + 글린트 ---------- */ .hud-opt::after{ background:linear-gradient(150deg,rgba(96,150,168,.5),rgba(38,74,92,.62) 55%,rgba(20,42,58,.7)); backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.3);} .hud-opt:hover:not(:disabled):not(.is-selected)::after,.hud-opt.is-hover::after{ background:linear-gradient(150deg,rgba(52,130,158,.75),rgba(28,96,124,.85) 60%,rgba(16,66,92,.9));} .hud-opt.is-selected::after{ background:linear-gradient(150deg,var(--accent-bright),var(--accent) 55%,#0090B0); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px color-mix(in srgb,var(--accent) 40%,transparent);} .hud-opt{transition:color var(--dur) var(--ease),transform 140ms var(--ease);} .hud-opt:hover:not(:disabled){transform:translateX(3px);} .hud-opt:active:not(:disabled){transform:translateX(3px) scale(.985);} /* 광택 스윕 — 호버 시 한 번 훑고 지나간다 */ .r-optglint{position:absolute;z-index:1;inset:0 0 0 calc(var(--tab-w) + var(--tab-gap)); pointer-events:none;overflow:hidden; clip-path:polygon(var(--chamfer) 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer), 100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,var(--chamfer) 100%, 0 calc(100% - var(--chamfer)),0 var(--chamfer));} .r-optglint::before{content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:34%; background:linear-gradient(105deg,transparent,rgba(220,250,255,.28),transparent); transform:skewX(-18deg) translateX(-120%);} .hud-opt:hover .r-optglint::before{animation:r-glint 620ms var(--ease);} .hud-opt.is-selected .r-optglint::before{animation:r-glint 480ms var(--ease);} @keyframes r-glint{to{transform:skewX(-18deg) translateX(560%)}} /* ---------- 질문 그리드 ---------- */ .r-qgrid{display:grid;gap:18px;margin-top:18px;flex:1;align-content:center;} .r-qbody{margin-top:0;flex:none;display:flex;flex-direction:column;justify-content:center; padding-bottom:0;} .r-opts{margin-top:0;} /* ---------- 루미 가이드 존 ---------- */ .r-guide{display:grid;gap:12px;justify-items:start;align-content:start;} .r-guide-fig{position:relative;width:118px;height:118px;justify-self:center; transform-style:preserve-3d;} .r-guide-halo{position:absolute;inset:-9%;border-radius:50%;pointer-events:none; background:radial-gradient(50% 50% at 50% 52%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 71%); filter:blur(6px);animation:r-halo 3.4s var(--ease) infinite alternate;} @keyframes r-halo{from{opacity:.55;transform:scale(.97)}to{opacity:1;transform:scale(1.05)}} .r-guide-fig::before{content:"";position:absolute;inset:-3px;border-radius:50%; border:1px dashed rgba(106,227,250,.4);animation:r-spin 22s linear infinite;} .r-guide-core{position:absolute;inset:5%;border-radius:50%;overflow:hidden;display:block; background:radial-gradient(58% 58% at 50% 42%,rgba(14,32,52,.85),rgba(8,14,28,.95)); border:2px solid color-mix(in srgb,var(--accent) 75%,transparent); box-shadow:0 0 24px var(--accent-glow),inset 0 2px 10px rgba(160,230,255,.14);} .r-guide-core img{width:100%;height:100%;object-fit:cover;object-position:50% 12%; transform:scale(1.06);animation:r-bob 4.2s ease-in-out infinite;} .r-guide-core img.is-swap{animation:r-faceswap 340ms var(--ease),r-bob 4.2s ease-in-out infinite;} @keyframes r-faceswap{0%{transform:scale(.86);filter:brightness(1.7) drop-shadow(0 0 16px var(--accent-glow))} 60%{transform:scale(1.05)}100%{transform:scale(1)}} @keyframes r-bob{0%,100%{translate:0 0}50%{translate:0 -6px}} .r-float img{animation:r-bob 4.2s ease-in-out infinite;} .r-guide-bubble{width:100%;padding:13px 15px 12px; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);} .r-guide-bubble::after{content:"";position:absolute;top:-1px;left:-1px;width:11px;height:11px; border-top:2px solid var(--accent-bright);border-left:2px solid var(--accent-bright);} .r-guide-name{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em; color:var(--accent-bright);margin-bottom:6px;} .r-guide-name::after{content:" ● ONLINE";font-size:8.5px;letter-spacing:.12em; color:color-mix(in srgb,var(--accent-bright) 65%,transparent);animation:hud-blink 2.2s steps(2,end) infinite;} .r-guide-q{margin:0;font-size:16.5px;font-weight:600;line-height:1.5;color:var(--text); word-break:keep-all;text-wrap:pretty;min-height:4.4em;text-shadow:var(--text-shadow);} .r-guide-hint{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--text-dim); word-break:keep-all;min-height:1.5em;} .r-guide-bubble.is-react{border-color:color-mix(in srgb,var(--accent-bright) 62%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 22px color-mix(in srgb,var(--accent) 30%,transparent);} .r-guide-bubble.is-react .r-guide-q{color:var(--accent-line);} .r-guide .r-back{justify-self:start;} /* ---------- 후보군 패널 ---------- */ .r-cands{display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:13px 13px 11px; align-content:start;min-height:0;} .r-cands-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;} .r-cands-title{font:800 10.5px/1 var(--font);letter-spacing:.2em;color:var(--accent-bright);} .r-cands-count{font:700 11px/1 var(--font);letter-spacing:.06em;color:var(--text-dim);} .r-cands-count b{font-size:17px;color:var(--accent-bright); text-shadow:0 0 12px var(--accent-glow);transition:color 200ms;} .r-cands-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:4px; align-content:start;overflow:hidden;} .r-cand{position:relative;aspect-ratio:3/4;overflow:hidden; transition:opacity 520ms var(--ease),filter 520ms var(--ease),transform 520ms var(--ease);} .r-cand img{width:100%;height:100%;object-fit:cover;object-position:50% 6%; filter:brightness(0) invert(.86) sepia(.6) saturate(3.2) hue-rotate(150deg) opacity(.5); transition:filter 520ms var(--ease);} .r-cand.is-out{opacity:.13;transform:scale(.86);} .r-cand.is-out img{filter:brightness(0) invert(.5) opacity(.3);} .r-cand.is-dropping{animation:r-drop 640ms var(--ease);} @keyframes r-drop{0%{opacity:1;transform:scale(1)} 30%{opacity:1;transform:scale(1.14);filter:brightness(2)} 100%{opacity:.13;transform:scale(.86)}} .r-cands-note{margin:0;font-size:10px;line-height:1.5;color:var(--text-dim); letter-spacing:.02em;word-break:keep-all;} /* ---------- 모바일 배치 — 가이드 위·선택지 중간·후보군 아래 스트립 ---------- */ @media (max-width:1023.5px){ .r-qgrid{grid-template-columns:1fr;} .r-guide{grid-template-columns:96px 1fr;gap:12px;align-items:start;} .r-guide-fig{width:96px;height:96px;grid-row:1;} .r-guide-bubble{grid-column:2;} .r-guide .r-back{grid-column:1/-1;} .r-guide-q{min-height:3.9em;font-size:15px;} .r-cands{grid-template-rows:auto auto auto;} .r-cands-grid{grid-template-columns:repeat(auto-fill,minmax(16px,1fr)); max-height:152px;} } /* ---------- 분석 프레임 재질 통일 ---------- */ .r-an-frame{border:1px solid rgba(140,220,245,.2);} /* ---------- 실루엣 리빌 ---------- */ .r-an[hidden],.r-reveal[hidden]{display:none!important;} .r-reveal{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;animation:r-in 300ms var(--ease) both;} .r-reveal-stage{position:relative;width:min(300px,72vw);aspect-ratio:325/480; display:grid;place-items:center;overflow:hidden; background:linear-gradient(180deg,rgba(11,26,38,.92),rgba(6,12,24,.6)); border:1px solid rgba(140,220,245,.24); clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px), calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);} .r-reveal-glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 48% at 50% 40%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 74%); animation:r-halo 2.2s var(--ease) infinite alternate;} .r-reveal-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; object-position:50% 92%; filter:brightness(0) invert(.8) sepia(.65) saturate(3) hue-rotate(150deg) opacity(.55) blur(9px); transform:scale(1.06); transition:filter 1350ms var(--ease),transform 1350ms var(--ease);} .r-reveal.is-sharp .r-reveal-stage img{ filter:brightness(.35) saturate(.4) blur(2.5px);transform:scale(1.02);} .r-reveal.is-final .r-reveal-stage img{ filter:none;transform:scale(1);} .r-reveal-scan{position:absolute;left:0;right:0;height:38%;pointer-events:none; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent-line) 40%,transparent),transparent); animation:r-beam 1.35s linear infinite;} .r-reveal.is-final .r-reveal-scan{display:none;} .r-reveal-name{margin:0;font-size:clamp(26px,7.5vw,34px);font-weight:800;letter-spacing:-.02em; color:var(--text);text-shadow:0 0 22px var(--accent-glow),var(--text-shadow);min-height:1.2em; animation:r-namein 420ms var(--ease) both;} @keyframes r-namein{from{opacity:0;transform:translateY(8px);filter:blur(4px)} to{opacity:1;transform:none;filter:none}} .r-reveal-cap{margin:0;font:600 11.5px/1.5 var(--font);letter-spacing:.14em; color:var(--text-dim);} /* ---------- 인트로 — 링 2겹 + 유리 스탯 ---------- */ .r-lumi{border:0;background:none;box-shadow:none;overflow:visible;width:132px;height:132px;} .r-lumi::after{display:none;} .r-lumi img{object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.55)); -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 98%); mask-image:linear-gradient(180deg,#000 82%,transparent 98%);} .r-ring-b{width:190px;height:190px;border-color:rgba(106,227,250,.16); animation-duration:26s;animation-direction:reverse;} .r-ring-b::before{width:5px;height:5px;opacity:.7;} .r-stats{background:none;border:1px solid rgba(140,220,245,.2);gap:1px;} .r-stats>div{background:rgba(6,12,24,.42);} /* ---------- 결과 — 포트레이트 광택·유리 스펙 ---------- */ .r-portrait{transform-style:preserve-3d;} .r-sheen{position:absolute;inset:0;z-index:3;pointer-events:none; background:radial-gradient(46% 34% at var(--mx,60%) var(--my,18%),rgba(210,245,255,.14),transparent 70%); mix-blend-mode:screen;} .r-spec.r-glass{border:1px solid rgba(140,220,245,.18);} .r-alt{background:linear-gradient(152deg,rgba(148,214,238,.08),rgba(14,20,38,.55)); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);} .r-share.r-glass{background:linear-gradient(180deg,rgba(0,180,216,.12),rgba(0,180,216,.03));} @media (prefers-reduced-motion:reduce){ .r-guide-fig img,.r-guide-halo,.r-guide-fig::before,.r-float img,.r-reveal-scan, .r-reveal-glow,.r-optglint::before,.r-cand.is-dropping{animation:none;} .r-cand,.r-cand img,.r-reveal-stage img{transition:none;} }