/* 시절마디 · 마디 장면 (홈·인생운세·오늘운세·서비스 6개 첫 화면)
   마디가 화면을 채우고 먼저 말을 건다. 계산·입력·결제는 원래 페이지 것을 그대로 쓴다. */
.sjms{--sjms-top:72px;--sjms-bottom:0px;--gold:#f2d59a;--rose:#f0b7bd;--ink:#f8f4ec;--glass:rgba(14,15,33,.74);
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;width:100%;
  height:calc(100vh - var(--sjms-top));height:calc(100svh - var(--sjms-top));min-height:400px;
  background:#15172e url("/assets/scene/madi-greeting-still.webp?v=sjms-20260921") 50% 0/cover no-repeat;color:var(--ink);
  font-family:inherit;-webkit-tap-highlight-color:transparent}
.sjms[hidden]{display:none}
/* 스크립트가 뜨기 전 자리 맡기(화면 밀림 방지). 4초 안에 장면이 안 뜨면 스스로 접힌다 */
.sjms-slot{display:block;height:calc(100vh - 72px);height:calc(100svh - 72px);min-height:400px;
  background:#15172e url("/assets/scene/madi-greeting-still.webp?v=sjms-20260921") 50% 0/cover no-repeat;
  animation:sjms-slot-off 0s linear 4s forwards}
@media (min-aspect-ratio:31/50){.sjms-slot,.sjms{background-size:auto 100%}}
@media (min-aspect-ratio:31/50) and (min-width:900px){.sjms-slot,.sjms{background-position:calc(50% - 200px) 0}}
@keyframes sjms-slot-off{to{height:0;min-height:0}}
.sjms *{box-sizing:border-box}
body.sjms-on .sjm-r9-route-mark,body.sjms-on [data-sjm-companion]{display:none!important}
body.sjms-life .v35-life-opening,body.sjms-life #question-entry-panel,body.sjms-life #input-panel,body.sjms-life #loading{display:none!important}
/* 오늘운세: 대화가 이어지는 동안 원래 입력칸은 접어둔다(결과가 뜨거나 '한 번에 입력하기'를 누르면 다시 보인다) */
body.sjms-today #input-screen{display:none!important}
body.sjms-on .sjm-episode-ribbon{display:none!important}

/* 무대: 그림은 1:2. 폰은 가로를 꽉, 넓은 화면은 세로를 꽉 */
.sjms-backdrop{position:absolute;inset:-40px;background-size:cover;background-position:50% 20%;filter:blur(28px) brightness(.55) saturate(1.1);transform:scale(1.1);z-index:-2}
.sjms-art{position:absolute;top:0;left:50%;width:100%;aspect-ratio:1/2;transform:translate(-50%,var(--sjms-pan,0px));transition:transform .7s cubic-bezier(.3,.7,.3,1)}
.sjms-pose{position:absolute;inset:0;opacity:0;transition:opacity .18s ease-out;pointer-events:none}
.sjms-pose.is-on{opacity:1}
.sjms-pose img{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.sjms-bg,.sjms-body{inset:0;width:100%;height:100%}
.sjms-bg{animation:sjms-drift 26s ease-in-out infinite alternate;transform-origin:50% 30%}
.sjms-char{position:absolute;inset:0;transform-origin:50% 100%;animation:sjms-breathe 4.6s ease-in-out infinite}
.sjms-sway{position:absolute;inset:0;transform-origin:50% 100%;animation:sjms-sway 8.2s ease-in-out infinite}
.sjms-ear{animation:sjms-ear 3.4s ease-in-out infinite}
.sjms-ear.R{animation-duration:3.9s;animation-delay:-1.3s}
.sjms-ear.is-twitch{animation:sjms-twitch .46s cubic-bezier(.3,.7,.3,1) 1}
.sjms-ear.R.is-twitch{animation-name:sjms-twitch-r}
.sjms-lid{opacity:0;transition:opacity .04s ease-out}
.sjms-char.is-blink .sjms-lid{opacity:1}
.sjms.is-talking .sjms-sway{animation:sjms-talk .34s ease-in-out infinite alternate}
@keyframes sjms-drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.06) translate(-1.2%,.6%)}}
@keyframes sjms-breathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-.5%) scale(1.007,1.015)}}
@keyframes sjms-sway{0%,100%{transform:rotate(-.55deg)}50%{transform:rotate(.6deg)}}
@keyframes sjms-talk{from{transform:translateY(0) rotate(-.15deg)}to{transform:translateY(-.35%) rotate(.2deg)}}
@keyframes sjms-ear{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(2.6deg)}}
@keyframes sjms-twitch{0%{transform:rotate(0)}30%{transform:rotate(-8deg)}62%{transform:rotate(3deg)}100%{transform:rotate(0)}}
@keyframes sjms-twitch-r{0%{transform:rotate(0)}30%{transform:rotate(8deg)}62%{transform:rotate(-3deg)}100%{transform:rotate(0)}}

/* 빛: 달무리·등불, 꽃잎 캔버스 */
.sjms-moon{position:absolute;left:90.5%;top:8.6%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,238,196,.34) 0%,rgba(255,238,196,.12) 36%,transparent 68%);animation:sjms-glow 5.5s ease-in-out infinite;pointer-events:none}
.sjms-lamp{position:absolute;left:4.2%;top:21%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,196,120,.42) 0%,rgba(255,170,90,.14) 40%,transparent 70%);animation:sjms-flicker 3.1s steps(1) infinite;pointer-events:none;mix-blend-mode:screen}
@keyframes sjms-glow{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
@keyframes sjms-flicker{0%{opacity:.9}18%{opacity:.72}22%{opacity:.95}51%{opacity:.8}57%{opacity:1}80%{opacity:.85}}
.sjms-petals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.sjms-shade{position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,transparent 0%,rgba(10,11,26,.18) 34%,rgba(10,11,26,.78) 78%,rgba(10,11,26,.9) 100%)}

/* 윗줄: 움직임 끄기 · 바로가기 */
.sjms-top{position:absolute;z-index:4;top:12px;left:12px;right:12px;display:flex;justify-content:flex-end;gap:8px;pointer-events:none}
.sjms-top>*{pointer-events:auto}
.sjms-chip{appearance:none;border:1px solid rgba(255,255,255,.22);background:rgba(12,13,30,.38);color:#f3efe6;border-radius:999px;
  padding:6px 11px;font:600 11.5px/1.2 inherit;opacity:.86;letter-spacing:-.01em;cursor:pointer;text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sjms-chip:focus-visible,.sjms-choice:focus-visible,.sjms-cta:focus-visible,.sjms-field input:focus-visible,.sjms-box:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* 대화창 */
/* 대화창은 아래에 붙지만, 커질 때 레이아웃 위치(top)는 그대로 두고 transform 으로만 올라간다 → 화면 밀림(CLS) 없음 */
.sjms-talk{position:absolute;z-index:5;left:50%;top:0;width:min(560px,calc(100% - 24px));
  transform:translate(-50%,calc(var(--sjms-h,100vh) - 100% - 12px - var(--sjms-bottom) - env(safe-area-inset-bottom,0px)));
  transition:transform .32s cubic-bezier(.3,.7,.3,1)}
.sjms-box{position:relative;background:var(--glass);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:22px 18px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);cursor:pointer}
.sjms-name{position:absolute;top:-13px;left:16px;padding:5px 12px 5px;border-radius:999px;background:linear-gradient(135deg,#f6dfab,#e8b98f);color:#2a1f22;
  font:800 13px/1 inherit;letter-spacing:.02em;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.sjms-line{min-height:3.3em;margin:0;text-wrap:pretty;font-size:17px;line-height:1.62;font-weight:500;letter-spacing:-.015em;color:var(--ink);word-break:keep-all;overflow-wrap:break-word;white-space:pre-line}
.sjms-more{position:absolute;right:16px;bottom:10px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--gold);opacity:0}
.sjms.is-waiting .sjms-more{opacity:1;animation:sjms-nudge 1s ease-in-out infinite}
@keyframes sjms-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.sjms-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sjms-act{display:grid;gap:8px;margin-top:12px}
.sjms-act:empty{display:none}
.sjms-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sjms-choice{appearance:none;min-height:46px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fbf8f1;
  font:600 14.5px/1.3 inherit;letter-spacing:-.02em;text-align:center;word-break:keep-all;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.sjms-choice:hover{background:rgba(255,255,255,.18)}
.sjms-choice:active{transform:scale(.98)}
.sjms-choice[aria-pressed="true"]{background:rgba(242,213,154,.24);border-color:var(--gold)}
.sjms-choice.wide{grid-column:1/-1}
.sjms-cta{appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:0;border-radius:15px;
  background:linear-gradient(135deg,#f6dfab,#eab58f);color:#27191c;font:800 16px/1.2 inherit;letter-spacing:-.02em;text-decoration:none;cursor:pointer;
  box-shadow:0 10px 26px rgba(234,181,143,.28)}
.sjms-cta[disabled]{opacity:.55;cursor:default}
.sjms-link{appearance:none;background:none;border:0;color:#d9d3c6;font:600 13.5px/1.4 inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:center;padding:6px}
.sjms-note{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:#cfc8ba;text-align:center;word-break:keep-all}
.sjms-field{display:flex;gap:8px}
.sjms-field input{flex:1 1 auto;min-width:0;height:52px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.94);color:#1b1a26;
  font:600 18px/1 inherit;letter-spacing:.01em}
.sjms-field input::placeholder{color:#8f8a98;font-weight:500;font-size:15px}
.sjms-field .sjms-cta{flex:0 0 auto;padding:0 18px;min-height:52px}
.sjms-err{margin:0;color:#ffc7c0;font-size:13.5px;line-height:1.5;word-break:keep-all}
.sjms-act>*{animation:sjms-rise .36s cubic-bezier(.2,.7,.3,1) backwards}
.sjms-choices>*{animation:sjms-rise .36s cubic-bezier(.2,.7,.3,1) backwards}
.sjms-choices>*:nth-child(2){animation-delay:.04s}.sjms-choices>*:nth-child(3){animation-delay:.08s}.sjms-choices>*:nth-child(4){animation-delay:.12s}
.sjms-choices>*:nth-child(5){animation-delay:.16s}.sjms-choices>*:nth-child(6){animation-delay:.2s}.sjms-choices>*:nth-child(7){animation-delay:.24s}
@keyframes sjms-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 인생운세: 결과가 나오면 장면을 접는다 */
.sjms.is-closing{transition:height .5s cubic-bezier(.4,0,.2,1),opacity .4s;height:0!important;min-height:0;opacity:0}

@media (max-width:899px){.sjms{--sjms-bottom:64px}}
@media (min-width:900px){
  .sjms-line{font-size:18px}
  .sjms-talk{width:min(520px,calc(100% - 48px));transform:translate(-50%,calc(var(--sjms-h,100vh) - 100% - 24px))}
}
.sjms-wide .sjms-art{left:calc(50% - 200px)}
.sjms-wide .sjms-shade{height:40%;opacity:.7}
.sjms-wide .sjms-talk{left:calc(50% + 250px);top:50%;transform:translate(-50%,-50%);width:min(460px,calc(50% - 60px))}
.sjms-wide .sjms-top{left:auto;right:24px;top:18px}
@media (max-width:359px){.sjms-choices{grid-template-columns:1fr}.sjms-line{font-size:16px}}
@media (max-height:700px){.sjms-line{min-height:0;font-size:16px;line-height:1.55}.sjms-choice{min-height:40px;padding:7px 10px;font-size:14px}.sjms-choices{gap:6px}.sjms-box{padding:20px 14px 12px}.sjms-act{margin-top:10px;gap:6px}}

/* R15: 화면이 낮은 폰(카카오톡 안 브라우저 등)에서도 대화창·선택지가 아래 메뉴에 가리지 않게.
   장면 최소 높이를 400px로 낮추고, 대화창이 남은 높이보다 크면 선택지 칸만 안에서 스크롤한다. */
.sjms-box{display:flex;flex-direction:column;max-height:calc(var(--sjms-h,100svh) - var(--sjms-bottom) - 64px - env(safe-area-inset-bottom,0px))}
.sjms-line{flex:0 0 auto}
.sjms-act{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px;margin-left:-2px;margin-right:-2px}
.sjms-wide .sjms-box{max-height:calc(var(--sjms-h,100svh) - 48px)}
@media (max-height:600px){.sjms-line{font-size:15.5px;line-height:1.5}.sjms-choice{min-height:38px;padding:6px 9px;font-size:13.5px}.sjms-box{padding:18px 12px 10px}
  .sjms-cta,.sjms-field .sjms-cta{min-height:46px}.sjms-field input,.sjms-field .sjm-time-select select{height:46px}.sjms-note{font-size:12px}}

/* R19: 결과 예시 카드(가상 입력) — 입력 전에 무엇을 받는지 보여준다 */
.sjms-example{display:grid;gap:6px;padding:12px 14px;border-radius:14px;border:1px solid rgba(242,213,154,.38);background:rgba(255,255,255,.07);color:#fbf8f1;text-align:left}
.sjms-ex-tag{margin:0;font-size:12px;line-height:1.4;color:var(--gold);font-weight:700;letter-spacing:.01em;word-break:keep-all}
.sjms-ex-row{margin:0;display:grid;gap:1px;font-size:14px;line-height:1.45;word-break:keep-all}
.sjms-ex-row b{font-size:11.5px;font-weight:700;color:#cfc8ba}
@media (max-height:700px){.sjms-example{padding:9px 12px;gap:4px}.sjms-ex-row{font-size:13.5px;line-height:1.4}}

/* 움직임 끄기 · 시스템 설정 */
body.sjmm-off .sjms *,body.sjmm-off .sjms{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.sjms *,.sjms{animation:none!important;transition:none!important}}