/* YEON 첫 경험. 모바일에서는 화면 전체, 넓은 화면에서는 가운데 휴대폰 크기 프레임.
   빈자리는 늘 가로 가운데, 위에서 42%. 장면 1·카드가 같은 구도
   층 순서: 빛 필드(WebGL) → 빛 알갱이(2D) → 지평선(2D, 생일 입력만) → 대표색 글자 → 오려 낸 인물 → 문구 */
:root{
  --bg:#07080D; --fg:#F1EFF7; --muted:#9896A8; --void:#030409; --err:#FF8A80;
  --mint:#2FE3A4; --coral:#FF5A4E; --honey:#FFB52E; --pearl:#C9B6FF; --indigo:#5A66FF;
  --display:'Bricolage Grotesque','IBM Plex Sans KR',system-ui,sans-serif;
  --sans:'IBM Plex Sans KR',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--fg)}
body{margin:0;font-family:var(--sans);font-size:14px;line-height:1.6;word-break:keep-all;overflow-wrap:break-word;display:flex;align-items:center;justify-content:center;min-height:100dvh;overflow:hidden;-webkit-tap-highlight-color:transparent}

.phone{position:relative;width:100%;height:100dvh;overflow:hidden;overflow:clip;background:var(--void);isolation:isolate;user-select:none;-webkit-user-select:none}
@media (min-width:600px) and (min-height:600px){
  .phone{width:auto;height:min(860px,94dvh);aspect-ratio:9/19;border-radius:40px;border:8px solid #161824;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04)}
  .phone::after{content:"";position:absolute;inset:0;border-radius:32px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 30px 50px -40px rgba(255,255,255,.1);pointer-events:none;z-index:7}
}
.layer{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 빛 알갱이 */
#spark{opacity:0;transition:opacity .9s}
.phone[data-scene="others"] #spark,.phone[data-scene="you"] #spark,.phone[data-scene="face"][data-state="rest"] #spark,.phone[data-scene="aura"][data-state="rest"] #spark,.phone[data-scene="card"][data-state="rest"] #spark{opacity:1}

/* 빛 필드 */
#field{transition:opacity .8s}
.phone[data-state="scan"] #field,.phone[data-state="error"] #field{opacity:0}
/* 사진 위에서 올라오기: 빛 필드를 스크린으로 얹어 흑백 사진이 비친다. 결과로 넘어가는 .8초 동안도 유지 */
.phone[data-scene="rise"][data-photo="pending"] #field,.phone.handoff #field{mix-blend-mode:screen}
.phone[data-scene="rise"]{touch-action:none;cursor:pointer}
.phone.bloom #field{animation:bloom 1.6s ease-out both}
@keyframes bloom{from{opacity:0;filter:brightness(2.2)}to{opacity:1;filter:none}}

/* 지평선 캔버스 (생일 입력) */
#dust{opacity:0;transition:opacity .6s}
.phone[data-scene="birth"] #dust{opacity:1}
.veil{position:absolute;inset:0;background:var(--void);opacity:0;pointer-events:none;z-index:6}
.veil.go{animation:veil .7s ease-out both}
@keyframes veil{from{opacity:1}to{opacity:0}}
/* 2 → 3: 빈자리가 화면 전체로 넓어진다 */
@property --ir{syntax:'<percentage>';inherits:false;initial-value:0%}
.iris{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;background:radial-gradient(circle at 50% 42%,var(--void) var(--ir),rgba(3,4,9,0) calc(var(--ir) + 24%))}
.iris.go{animation:iris 1.3s cubic-bezier(.55,0,.3,1) both}
@keyframes iris{0%{opacity:1;--ir:0%}45%{opacity:1;--ir:125%}100%{opacity:0;--ir:125%}}

/* 사진 */
#orig{object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.85);opacity:0;transition:opacity .8s}
.phone[data-state="scan"] #orig,.phone[data-state="error"] #orig{opacity:1}
.phone[data-scene="rise"][data-photo="pending"] #orig{opacity:.5}
#cut{opacity:0;transform:translateY(28px);transition:none}
.phone[data-scene="aura"][data-state="rest"][data-photo="yes"] #cut,.phone[data-scene="card"][data-state="rest"][data-photo="yes"] #cut{opacity:1;transform:none;transition:opacity .9s .25s,transform 1.1s .25s cubic-bezier(.2,.8,.2,1)}
.bigword{position:absolute;left:0;right:0;top:12%;text-align:center;margin:0;font-family:var(--display);font-weight:800;line-height:.85;letter-spacing:-.03em;color:var(--c);text-shadow:0 0 36px color-mix(in srgb,var(--c) 45%,transparent);opacity:0;transform:translateY(30px);transition:none;white-space:nowrap}
.phone[data-scene="aura"][data-state="rest"][data-photo="yes"] .bigword,.phone[data-scene="card"][data-state="rest"] .bigword{opacity:1;transform:none;transition:opacity .9s .55s,transform 1.1s .55s cubic-bezier(.2,.8,.2,1)}
.scan{position:absolute;left:0;right:0;height:24%;top:-24%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.12) 55%,rgba(255,255,255,.6) 97%,transparent);pointer-events:none;opacity:0}
.phone[data-state="scan"] .scan,.phone[data-scene="rise"][data-photo="pending"] .scan{opacity:1;animation:sweep 1.1s ease-in-out infinite alternate}
@keyframes sweep{from{top:-24%}to{top:100%}}
.scrim{position:absolute;inset:auto 0 0 0;height:48%;background:linear-gradient(to bottom,rgba(3,4,9,0),rgba(3,4,9,.8) 56%,rgba(3,4,9,.95));pointer-events:none}
.phone[data-scene="birth"] .scrim{display:none}
.phone[data-scene="rise"] .scrim{height:30%}
.phone[data-scene="aura"][data-state="rest"] .scrim{height:66%}
.phone[data-scene="aura"][data-state="rest"][data-photo="yes"] .scrim{height:72%}
.phone[data-scene="card"] .scrim{height:54%}
.top{position:absolute;top:calc(26px + env(safe-area-inset-top,0px));left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.8);margin:0;display:none}
.phone[data-scene="face"] .top,.phone[data-scene="rise"] .top,.phone[data-scene="aura"] .top,.phone[data-story] .top{display:block}
.back,.skip{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));background:none;border:0;color:rgba(255,255,255,.75);font:500 13px var(--sans);padding:6px 8px;cursor:pointer;display:none;z-index:3}
.back{left:12px}
.skip{right:12px}
.phone[data-scene="aura"][data-state="rest"] .back,.phone[data-scene="card"][data-state="rest"] .back{display:block}
.phone[data-story] .skip-story,.phone[data-scene="rise"][data-state="rest"] .skip-rise{display:block}

/* 문구 */
.ui{position:absolute;display:none}
.ui [hidden]{display:none!important}
.ui .show{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.phone[data-scene="others"] .ui-others,.phone[data-scene="you"] .ui-you{display:flex}
.phone[data-scene="birth"] .ui-birth{display:flex}
.phone[data-scene="face"][data-state="rest"] .ui-face{display:flex}
.phone[data-scene="rise"][data-state="rest"] .ui-rise{display:flex}
.phone[data-scene="aura"][data-state="rest"] .ui-rest{display:flex}
.phone[data-state="scan"] .ui-scan{display:block}
.phone[data-state="error"] .ui-error{display:flex}
.phone[data-scene="card"][data-state="rest"] .ui-card{display:flex;animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.copy{left:22px;right:22px;bottom:calc(26px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:10px}
.ui-others.show{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.ui-others.out{opacity:0;transition:opacity .5s}
.ui-face{align-items:flex-start}
.sub{margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.78)}
.lead{font-family:var(--sans);font-weight:600;font-size:23px;line-height:1.4;margin:0;color:#fff;text-wrap:balance}
.who{font-size:13px;color:rgba(255,255,255,.72);margin:0}
.big{font-family:var(--display);font-weight:800;font-size:56px;line-height:.9;letter-spacing:-.02em;margin:0;color:var(--c);text-shadow:0 0 28px color-mix(in srgb,var(--c) 40%,transparent)}
.head{margin:0;font-size:17px;line-height:1.45;font-weight:500;color:#fff}
.line{margin:0;font-size:13.5px;line-height:1.55;color:#fff}
.res{margin:0;font-size:15px;color:#fff}
.res b{font-family:var(--display);font-weight:800;font-size:20px;color:var(--c);margin-right:4px}
.tiny{margin:0;font-size:11.5px;color:rgba(255,255,255,.6)}

/* 생일 입력 */
.ui-birth{inset:0;flex-direction:column;gap:12px;padding:52% 24px calc(22px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,rgba(3,4,9,0) 21%,rgba(3,4,9,.86) 32%,rgba(3,4,9,.94));overflow-y:auto}
.ui-birth h2{font-family:var(--sans);font-weight:600;font-size:23px;line-height:1.3;margin:0}
.ui-birth .sub{font-size:13.5px;color:rgba(255,255,255,.72)}
.field-row{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-row label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.7)}
.input{width:100%;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:11px 12px;color:#fff;font:16px var(--sans);-webkit-appearance:none;appearance:none;min-height:46px}
.input:focus{outline:none;border-color:#fff}
.input:disabled{opacity:.35}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* 두 칸이 좁아 날짜·시간 글자가 잘리지 않게 조금 작게 */
.two .input{font-size:14px;padding-inline:9px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.75);cursor:pointer}
.check input{width:16px;height:16px;accent-color:#fff}
.seg-row{margin:0;padding:0;border:0}
.seg-row legend{padding:0;margin-bottom:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.7)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;min-height:40px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.08);font:13.5px var(--sans);letter-spacing:0;color:rgba(255,255,255,.75)}
.seg input:checked+span{background:#fff;color:#0A0B12;border-color:#fff}
.seg input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.note{margin:0;font-size:12.5px;color:rgba(255,255,255,.85)}
.err{margin:0;color:var(--err);font-size:12.5px}
.grow{flex:1}
.cta{width:100%;background:#fff;color:#0A0B12;border:0;border-radius:999px;padding:14px;font:500 15px var(--sans);cursor:pointer}
.cta:hover{background:#E8E6F0}
.cta:disabled{opacity:.6;cursor:default}

/* 버튼 */
.btns{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:8px 14px;font:500 13px var(--sans);cursor:pointer}
.pill:hover{background:rgba(255,255,255,.2)}
.pill.solid{background:#fff;color:#0A0B12;border-color:#fff}
.link{background:none;border:0;padding:2px 0;color:rgba(255,255,255,.7);font:500 13px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:flex-start}
.link:hover{color:#fff}
.pill:focus-visible,.cta:focus-visible,.back:focus-visible,.skip:focus-visible,.link:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 올라오는 빛 */
.ui-rise{align-items:center;text-align:center}

/* 내 색: 첫 줄 → 사람 한 줄 → 사랑으로 넘어가는 줄 → 당신의 빛 / 빛의 이면 */
.big small{font-size:22px;font-weight:500;color:#fff;margin-left:8px;letter-spacing:0}
.ui-rest .big{font-size:62px}
.pivot{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82);padding-top:8px;border-top:1px solid rgba(255,255,255,.14)}
.r-body{display:flex;flex-direction:column;gap:8px}
.r-body.show>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.r-body.show>:nth-child(2){animation-delay:.3s}
.r-body.show>:nth-child(3){animation-delay:.7s}
.rows{margin:0;display:flex;flex-direction:column;gap:6px}
.rows div{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:10px;align-items:baseline}
.rows dt{font-size:11.5px;color:rgba(255,255,255,.6)}
.rows dd{margin:0;font-size:13.5px;line-height:1.5;color:#fff}
.rows div:last-child dd{color:rgba(255,255,255,.86)}
.r-meta{display:flex;flex-direction:column;gap:8px}
.r-ask{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
.ui-rest .stack i{animation:split 1s both;animation-delay:calc(.3s + var(--i) * .14s)}
@keyframes split{from{filter:grayscale(1) brightness(3)}to{filter:none}}

/* 사진 처리 */
.ui-scan{left:20px;right:20px;bottom:calc(40px + env(safe-area-inset-bottom,0px));text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:#fff;margin:0}
.ui-error{left:22px;right:22px;bottom:calc(30px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:12px;align-items:flex-start;font-size:13.5px;color:#fff}
.ui-error p{margin:0;background:rgba(3,4,9,.7);border-radius:10px;padding:10px 12px}

/* 결과 카드 */
.ui-card{inset:0;flex-direction:column;justify-content:space-between;padding:calc(22px + env(safe-area-inset-top,0px)) 22px calc(24px + env(safe-area-inset-bottom,0px));pointer-events:none}
.ui-card>*{pointer-events:auto}
.wordmark{margin:0;text-align:center;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.32em;color:#fff}
.card-bottom{display:flex;flex-direction:column;gap:9px}
.card-bottom>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.card-bottom>:nth-child(n+5){animation-delay:.5s}
.type{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:rgba(255,255,255,.85)}
.type i{width:10px;height:10px;border-radius:50%;background:var(--m);box-shadow:0 0 10px var(--m);flex:none}
.type span{font-family:var(--mono);color:rgba(255,255,255,.55)}
.stack{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px}
.stack i{display:block;height:100%;background:var(--c);box-shadow:0 0 8px color-mix(in srgb,var(--c) 60%,transparent)}
.haze{margin:0;font-size:12px;color:#fff;background:rgba(255,255,255,.12);border-radius:999px;padding:4px 10px;align-self:flex-start}
.card-actions{padding-top:6px}

@media (prefers-reduced-motion:reduce){.phone *{animation:none!important;transition:none!important}}