/* 외모 컨설팅 사주 · 앱 겉면과 움직임. app.css 위에 얹는다.
*/
html,body{margin:0;padding:0;background:#0c0c0d;color:#f6f1e8;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
.ph2{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;background:#0c0c0d}
.ph2 .phone,.ph2 .phone.one{width:100%;max-width:410px;border:0;border-radius:0;box-shadow:none;background:#1b1b1e;overflow:visible;min-height:100vh;min-height:100dvh;position:relative}
#stage.off,#preview.off{display:none}

/* ===== 무대 ===== */
.ph2 .scr.a1.fx{height:100vh;height:100dvh;overflow:hidden;opacity:0;transition:opacity .6s ease}
/* 최소 높이는 마우스 있는 데스크톱에서만. 폰은 키보드가 뜨면 화면 높이가 주는 브라우저(안드로이드 크롬, 삼성, 폴드)가 있어 무대도 같이 줄어야 시트가 안 잘린다 */
@media (hover:hover) and (pointer:fine){.ph2 .scr.a1.fx{min-height:640px}}
.ph2 .scr.a1.fx.ready{opacity:1}
.ph2 .scr.a1.fx.tappable{cursor:pointer}
.ph2 .scr.a1.fx .bg{position:absolute;inset:0;background:#0c0c0d}
.ph2 .scr.a1.fx .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.045);transition:opacity .8s ease,transform 7s ease-out,object-position .7s ease}
.ph2 .scr.a1.fx .bg img.on{opacity:1;transform:scale(1)}
.ph2 .scr.a1.fx .bg img.instant{transition:none}
.ph2 .scr.a1.fx .topbar{position:relative;z-index:6;text-shadow:0 1px 8px rgba(0,0,0,.65)} /* 밝은 그림 위에서도 상호가 읽히게 */
.ph2 .topbar .home{appearance:none;-webkit-appearance:none;border:1px solid rgba(212,185,133,.55);background:rgba(27,27,30,.35);color:#d4b985;font:600 11.5px/1 -apple-system,"Apple SD Gothic Neo","Pretendard",sans-serif;letter-spacing:.1em;padding:6px 10px;cursor:pointer;transition:background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.ph2 .topbar .home:hover{background:rgba(212,185,133,.14);border-color:#d4b985}
.ph2 .topbar .home[hidden]{display:none}
#preview .hero .topbar{z-index:3}

/* 층 */
.ph2 .scr.a1.fx .layer{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;transition:opacity .5s ease}
.ph2 .scr.a1.fx .layer.on{opacity:1;pointer-events:auto}
/* 글은 한 줄씩, 천천히 떠오른다 */
.ph2 .scr.a1.fx .ln{display:block;opacity:0;transform:translateY(10px)}
.ph2 .scr.a1.fx .layer.on .ln{animation:lnIn 1.15s cubic-bezier(.2,.6,.2,1) both;animation-delay:var(--d,.5s)}
@keyframes lnIn{to{opacity:1;transform:none}}
/* 첫 화면 큰 글자는 흐림에서 또렷하게 */
.ph2 .scr.a1.fx .layer.on .first-t .big .ln{animation-name:lnInBlur;animation-duration:1.5s}
@keyframes lnInBlur{from{opacity:0;transform:translateY(10px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
/* 선택지는 물음이 다 뜬 뒤에 */
.ph2 .scr.a1.fx .choices{opacity:0}
.ph2 .scr.a1.fx .layer.on .choices{animation:lnIn 1s cubic-bezier(.2,.6,.2,1) 1.4s both}

/* 첫 화면: 단추 없이 탭 */
.ph2 .scr.a1.fx .first-t{padding:150px 20px 180px;background:linear-gradient(180deg,rgba(27,27,30,0),rgba(27,27,30,.5) 42%,rgba(27,27,30,.9) 68%,#1b1b1e 92%)}
.ph2 .scr.a1.fx .first-t .sm{margin-bottom:0}
/* 첫 화면 글은 더 크고, 옅은 샴페인 브라스에 그림자 */
.ph2 .scr.a1.fx .first-t .big{font-size:min(32px,8.2vw);line-height:1.28;letter-spacing:-.01em;white-space:nowrap;color:#ecdcb6;text-shadow:0 2px 22px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.4)}
.ph2 .scr.a1.fx .first-t .sm{margin-top:14px;font-size:17px;color:#f6f1e8;text-shadow:0 1px 14px rgba(0,0,0,.55)}
/* 첫 화면 B: 열한 글자 줄이라 조금 작게 */
.ph2 .scr.a1.fx .first-t.b .big{font-size:min(29px,7.4vw)}
.ph2 .scr.a1.fx .first-t.b.s .big{font-size:min(32px,8.2vw)} /* 짧은 두 줄 문구는 A만큼 크게 */
.ph2 .scr.a1.fx .first-t.b .big .vs{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:24px;line-height:1;color:#d4b985;letter-spacing:.06em;margin:6px 0 8px;filter:none}
.ph2 .scr.a1.fx .first-t.b .sm{font-size:16px}

/* 대사 판: 밑에 힌트 자리를 비운다. 선택지 판은 그대로 */
.ph2 .scr.a1.fx .dlg{padding-bottom:54px}
.ph2 .scr.a1.fx .dlg.pick{padding-bottom:22px}
.ph2 .scr.a1.fx .dlg.up{padding-bottom:90px}
.ph2 .scr.a1.fx .hint{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:7;text-align:center;font-size:12px;letter-spacing:.14em;color:#d4b985;font-family:-apple-system,"Apple SD Gothic Neo","Pretendard",sans-serif;opacity:0;transition:opacity .45s ease;pointer-events:none}
.ph2 .scr.a1.fx .hint.on{opacity:1;animation:breathe 2.6s ease-in-out 1s infinite}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}

/* 선택지, 격자, 단추: 누르는 맛과 고른 뒤 물러남 */
.ph2 .scr.a1.fx .ch,.ph2 .scr.a1.fx .seg span,.ph2 .scr.a1.fx .tc,.ph2 .scr.a1.fx .unknown,.ph2 .scr.a1.fx .btn,.ph2 .dock button{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.ph2 .scr.a1.fx .ch,.ph2 .scr.a1.fx .seg span,.ph2 .scr.a1.fx .tc,.ph2 .scr.a1.fx .unknown{transition:background .2s ease,color .2s ease,outline-color .2s ease,opacity .4s ease,transform .15s ease}
.ph2 .scr.a1.fx .ch:active,.ph2 .scr.a1.fx .seg span:active,.ph2 .scr.a1.fx .tc:active,.ph2 .scr.a1.fx .unknown:active,.ph2 .scr.a1.fx .btn:active{transform:scale(.975)}
.ph2 .scr.a1.fx .choices.picked .ch:not(.on){opacity:.38}

/* 차트 시트: 아래에서 올라와 머문다. 안쪽 판만 바뀐다 */
.ph2 .scr.a1.fx .sheet2{z-index:4;transform:translateY(103%);transition:transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none;will-change:transform}
/* 올라온 뒤에는 키보드 높이(--kb, app.js fitSheet)만큼 더 올라간다. 무대와 그림은 안 움직인다 */
.ph2 .scr.a1.fx .sheet2.up{transform:translateY(calc(var(--kb,0px) + var(--fb,0px)));pointer-events:auto;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
/* 키보드가 떴는데 아무 값도 안 변하는 브라우저(옛 웹뷰): 시트를 화면의 40%만큼 올려 둔다 (app.js fallbackFit) */
.ph2 .scr.a1.fx .sheet2.up.kbfb{--fb:-40vh}
.ph2 .scr.a1.fx .pane{display:none}
.ph2 .scr.a1.fx .pane.on{display:block;animation:paneIn .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ph2 .scr.a1.fx .steps i{transition:background .45s ease}
.ph2 .scr.a1.fx .hint2{font-size:14px;color:#efe8dc;margin-bottom:14px;font-family:-apple-system,"Apple SD Gothic Neo","Pretendard",sans-serif}
.ph2 .scr.a1.fx .field{transition:border-color .25s ease}
.ph2 .scr.a1.fx .field:focus-within{border-bottom-color:#d4b985}
.ph2 .scr.a1.fx .field input{display:block;width:100%;border:0;background:transparent;font-family:"Hahmlet",serif;font-weight:700;font-size:26px;color:#f6f1e8;line-height:1.2;padding:0;margin:0;outline:none;-webkit-appearance:none;border-radius:0;caret-color:#d4b985}
.ph2 .scr.a1.fx .field.err{border-bottom-color:#ff3b52}
/* 이름 단추: 레드는 결제 단추에만. 아이보리 채움 */
.ph2 .scr.a1.fx .sheet2 .btn{background:#f6f1e8;color:#111;transition:transform .15s ease,background .2s ease}
.ph2 .scr.a1.fx .sheet2 .btn:hover{background:#fff}

/* 로딩 */
.ph2 .scr.a1.fx .bar2 i{width:0;transition:width .3s linear}
.ph2 .scr.a1.fx .ld-line{display:block;min-height:1.4em;opacity:0;transform:translateY(6px);transition:opacity .38s ease,transform .38s ease}
.ph2 .scr.a1.fx .ld-line.in{opacity:1;transform:none}

/* 검은 장막: 로딩 끝과 히어로 사이 */
#veil{position:fixed;inset:0;background:#0c0c0d;opacity:0;pointer-events:none;transition:opacity .42s ease;z-index:80}
#veil.on{opacity:1}

/* ===== 미리보기 ===== */
.ph2 .scr.a.a1{padding-bottom:124px}
#preview .hero-t .big{opacity:0;transform:translateY(16px);transition:opacity .9s ease .3s,transform .9s cubic-bezier(.2,.7,.2,1) .3s}
#preview.in .hero-t .big{opacity:1;transform:none}
#preview .rv-el{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
#preview .rv-el.vis{opacity:1;transform:none}
.ph2 .dock{position:fixed;left:50%;right:auto;bottom:0;width:100%;max-width:410px;padding-bottom:calc(12px + env(safe-area-inset-bottom));transform:translate(-50%,106%);transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.ph2 .dock.up{transform:translate(-50%,0)}
/* 결제 단추: 브라스 채움. 레드는 타이머 숫자와 절대 X에만 */
.ph2 .dock button{background:#d4b985;color:#1b1b1e;transition:transform .15s ease,filter .2s ease}
.ph2 .dock button:hover{filter:brightness(1.05)}
.ph2 .dock button:active{transform:scale(.985)}

/* 리포트 표지 카드: 큰 목차 셋 밑에 번호 붙인 세부 목차 */
#preview .cv3 .ct{gap:12px;padding:15px 0 13px}
#preview .cv3 .ct .n{width:30px}
#preview .cv3 .ct > div{min-width:0;flex:1}
#preview .cv3 .ct b{font-size:18.5px}
#preview .cv3 .sub{list-style:none;margin:8px 0 0;padding:0}
#preview .cv3 .sub li{display:flex;align-items:baseline;gap:9px;padding:4px 0;font-family:-apple-system,"Apple SD Gothic Neo","Pretendard",sans-serif;font-size:13.5px;line-height:1.45;color:#e8e0d3;word-break:keep-all}
#preview .cv3 .sub li + li{border-top:1px solid rgba(246,241,232,.06)}
#preview .cv3 .sub li em{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:14.5px;color:#d4b985;flex:none;width:36px;letter-spacing:.02em}

/* 후기: 흰 카드. 모자이크 얼굴, 이름과 나이, 별 다섯, 배지, 굵은 제목, 본문 */
#preview .reviews{margin:26px 0 0;display:flex;flex-direction:column;gap:12px}
#preview .reviews-head{font-family:"Hahmlet",serif;font-weight:700;font-size:15.5px;color:#f6f1e8;text-align:center;margin-bottom:2px;padding-bottom:12px;position:relative}
#preview .reviews-head:after{content:'';position:absolute;left:50%;bottom:0;width:28px;height:1px;background:#d4b985;transform:translateX(-50%)}
#preview .review{background:#f6f1e8;color:#1b1b1e;padding:15px 16px 13px;border-left:3px solid #d4b985;font-family:-apple-system,"Apple SD Gothic Neo","Pretendard",sans-serif}
#preview .review .rv-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
#preview .review .rv-avw{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:#e7ddc9}
#preview .review .rv-ava{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;image-rendering:crisp-edges}
#preview .review .rv-hd{display:flex;flex-direction:column;gap:5px;min-width:0}
#preview .review .rv-id{font-size:14.5px;font-weight:700;line-height:1.25}
#preview .review .rv-id .age{color:#8a7a5c;font-weight:400;font-size:12.5px;margin-left:3px}
#preview .review .rv-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
#preview .review .stars{color:#c9a961;font-size:13px;letter-spacing:.14em}
#preview .review .rv-tag{font-size:11.5px;padding:3px 9px;white-space:nowrap;font-weight:600;color:#7a6236;background:rgba(212,185,133,.24)}
#preview .review .rv-title{font-family:"Hahmlet",serif;font-size:15px;font-weight:700;margin-bottom:5px;word-break:keep-all;line-height:1.4}
#preview .review .rv-body{font-size:13px;color:#4d4436;line-height:1.72;word-break:keep-all}
#preview .review .rv-body b{color:#1b1b1e;font-weight:700}
#preview .review .rv-no{margin-top:9px;font-family:"Cormorant Garamond",serif;font-size:12.5px;letter-spacing:.1em;color:#9a8b6d}

/* 방금 다녀간 사람 알림: 도크 위로 한참, 왼쪽 기둥 가장자리 */
#lvfeed{position:fixed;left:max(0px,calc(50% - 205px));bottom:calc(196px + env(safe-area-inset-bottom));z-index:66;pointer-events:none;clip-path:inset(-40px -40px -40px 0)}
#lvfeed .lvi{display:flex;align-items:baseline;background:rgba(35,35,39,.96);color:#f6f1e8;border-left:2px solid rgba(212,185,133,.85);border-radius:0 8px 8px 0;padding:6px 12px 7px 10px;box-shadow:0 10px 24px -16px rgba(0,0,0,.9);transform:translateX(-32%);opacity:0;filter:blur(3px);transition:transform 1.3s cubic-bezier(.16,.7,.3,1),opacity 1.15s ease,filter 1.15s ease}
#lvfeed .lvi.in{transform:none;opacity:1;filter:none}
#lvfeed .lvi.out{transform:none;filter:none;opacity:0;transition:opacity 1.05s ease}
#lvfeed .tx{display:flex;align-items:baseline}
#lvfeed .n{font-size:12px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;font-family:-apple-system,"Apple SD Gothic Neo","Pretendard",sans-serif}
#lvfeed .g{font-size:10.5px;color:#bfb5a5;margin-left:7px;white-space:nowrap;font-family:-apple-system,"Apple SD Gothic Neo","Pretendard",sans-serif}

.toast2{position:fixed;left:50%;bottom:calc(112px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#f6f1e8;color:#1b1b1e;padding:10px 18px;font-size:14px;font-family:-apple-system,"Apple SD Gothic Neo","Pretendard",sans-serif;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;white-space:nowrap}
.toast2.on{opacity:.97}

@media (prefers-reduced-motion:reduce){
  .ph2 .scr.a1.fx .bg img,.ph2 .scr.a1.fx .layer,.ph2 .scr.a1.fx .sheet2,.ph2 .dock,#preview .rv-el,#preview .hero-t .big,#veil{transition-duration:.01s}
  .ph2 .scr.a1.fx .layer.on .ln,.ph2 .scr.a1.fx .layer.on .choices,.ph2 .scr.a1.fx .pane.on,.ph2 .scr.a1.fx .hint.on{animation:none;opacity:1;transform:none;filter:none}
  #lvfeed .lvi,#lvfeed .lvi.out{transition:opacity .35s ease}
}