/* 포스터 입구: 올인과의 첫 만남(lp2-stage.js). 그림 위 아래쪽에 올인의 말과 묻는 칸이 하나씩 바뀐다.
   자리: 위 왼쪽 '이전'(동그라미) · 위 가운데 몇 번째 물음인지(가는 막대 넷) · 위 오른쪽 닫기 / 아래 올인의 말 + 대답 칸.
   폰 자판이 올라오면 장면 높이를 보이는 화면 높이(--ol-vh, lp2-stage.js)에 맞춰 대답 칸이 자판 위에 선다. */
/* 붓글씨체는 경기바탕(10/3 사장: 마루부리에서 바꿈). 해설서(report-toc70.css)와 같은 글꼴 */
@font-face { font-family: "MaruBuri"; src: url("./assets/fonts/MaruBuri-Regular-full.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "MaruBuri"; src: url("./assets/fonts/MaruBuri-SemiBold-full.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
#ol-stage { --ol-bg:#101b2c; --ol-cream:#f4ead6; --ol-lamp:#ead9b9; --ol-line:#ffffff4d; --ol-soft:#c5cfdc;
  position:fixed; inset:0; width:100%; max-width:none; height:var(--ol-vh,100dvh); max-height:none; margin:0; padding:0; border:0; overflow:hidden; background:var(--ol-bg); color:#fff; }
#ol-stage::backdrop { background:#101b2c; } /* 색을 직접 - 창 뒤 바탕은 창의 변수(--ol-bg)를 못 읽는 폰 브라우저가 있어 투명해졌고, 자판이 오르내리며 창 높이가 바뀔 때 흰 페이지가 띠처럼 깜박였다(10/10 사장) */
html:has(#ol-stage[open]), html:has(#ol-stage[open]) body { background:#101b2c; } /* 자판이 내려갈 때 창이 높이를 따라잡는 사이에도 뒤가 남색 */
#ol-stage .ol-scene { position:relative; height:100%; max-width:var(--phone-w); margin:auto; isolation:isolate; }
#ol-stage .ol-scene > img, #ol-stage .ol-art-loop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; z-index:0; }
/* 무료 사주 확인 포스터를 배경으로 깔 때: 포스터 위쪽 제목이 보이게 위에 맞춘다 */
#ol-stage .ol-scene.is-poster > img, #ol-stage .ol-scene.is-poster .ol-art-loop { object-position:center top; }
#ol-stage .ol-art-loop { pointer-events:none; }
/* 입장 영상: 화면을 덮고 한 번 재생. 그동안 대화·위 막대는 숨긴다. 끝나면 서서히 걷힌다 */
/* 화면이 영상보다 넓적하면 위아래가 잘린다 - 제목 글자가 있는 위쪽을 지키고 아래를 자른다 */
#ol-stage .ol-enter { position:absolute; inset:0; z-index:4; width:100%; height:100%; object-fit:cover; object-position:center; background:var(--ol-bg); transition:opacity .6s ease; cursor:pointer; }
#ol-stage .ol-enter.is-out { pointer-events:none; }
#ol-stage .ol-enter.is-out { opacity:0; }
#ol-stage .ol-enter { animation: ol-enter-in .35s ease-out both; } /* 검은 화면에서 서서히 밝아지며 시작(첫 장면이 툭 뜨지 않게, 10/9 사장) - 투명도가 아니라 밝기로(뒤가 비치지 않게) */
@keyframes ol-enter-in { from { filter: brightness(0); } to { filter: brightness(1); } }
#ol-stage .ol-scene.is-hit .ol-enter { animation: ol-hit .38s ease-out; } /* 결정적 순간 한 번 흔들림 */
@keyframes ol-hit { 0% { transform: translate(0, 0) scale(1.03); } 20% { transform: translate(-6px, 4px) scale(1.03); } 40% { transform: translate(5px, -4px) scale(1.02); } 60% { transform: translate(-3px, 2px) scale(1.01); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { #ol-stage .ol-enter, #ol-stage .ol-scene.is-hit .ol-enter { animation: none; } }
#ol-stage .ol-scene.is-entering .ol-dialogue, #ol-stage .ol-scene.is-entering .ol-back, #ol-stage .ol-scene.is-entering > img, #ol-stage .ol-scene.is-entering .ol-art-loop { visibility:hidden; } /* 입구 영상이 도는 동안 뒤의 진행자 그림·영상은 아예 숨긴다 - 영상이 비치는 틈(시작·끊김)에 금실 얼굴이 보였다(10/9 사장) */
#ol-stage .ol-scene.is-entering .ol-top { z-index:5; }
/* 어둡게 까는 바탕은 대사 칸 높이만큼만(10/3 사장: 화면 아래를 통째로 덮어 올인이 든 책이 안 보였다) */
#ol-stage button, #ol-stage input { font:inherit; -webkit-tap-highlight-color:transparent; }
#ol-stage [hidden] { display:none !important; }
#ol-stage :focus-visible { outline:2px solid var(--ol-lamp); outline-offset:3px; }
#ol-stage .ol-round:focus-visible, #ol-stage .ol-form .ol-arrow:focus-visible { outline:none; color:#ffd27a; } /* 화살표는 늘 화살표만 - 뒤로·앞으로 오가며 초점이 앉아도 동그라미 없이(10/8 사장) */
#ol-stage .ol-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 위 막대: 이전 · 몇 번째 · 닫기 */
#ol-stage .ol-top { position:absolute; z-index:3; top:max(14px,env(safe-area-inset-top)); left:16px; right:16px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; }
/* 동그라미 없이 표시만(10/7 사장) - 밝은 그림 위에서도 보이게 그림자만 */
#ol-stage .ol-round { box-sizing:border-box; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:none; color:#fff; cursor:pointer; filter:drop-shadow(0 0 2px rgba(0,0,0,.75)) drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
#ol-stage .ol-round:active { opacity:.6; }
#ol-stage .ol-round svg { display:block; width:22px; height:22px; overflow:visible; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#ol-stage .ol-back { grid-column:1; }
/* 닫기(10/10): 오른쪽 위, 동그라미 없이 선만 - 초점 테두리도 안 보이게 */
#ol-stage .ol-close { grid-column:3; justify-self:end; }
#ol-stage .ol-close svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
#ol-stage .ol-close:focus { outline:none; }
/* 입구 영상이 도는 동안은 닫기를 숨긴다(10/10 사장: 영상 위 × 가 '건너뛰기'처럼 보여 누르게 된다) - 대화가 시작되면 다시 보인다. 나가는 길은 폰 뒤로 가기·Esc 그대로 */
#ol-stage:has(.is-entering) .ol-close { visibility:hidden; }

/* 아래: 올인의 말과 대답 칸 */
#ol-stage .ol-dialogue { position:absolute; z-index:2; bottom:0; left:0; right:0; padding:36px 24px max(24px,env(safe-area-inset-bottom)); background:linear-gradient(#101b2c00, #101b2c80 40px, #101b2cb0 110px); text-shadow:0 1px 6px #0a1220b3; } /* 그림이 비치게 더 투명하게(10/9 사장: 답답했다) - 글자는 그림자로 읽히게 */
#ol-stage .ol-line { white-space:pre-line; text-wrap:balance; font:clamp(20px,5.4vw,23px)/1.55 'MaruBuri',serif; letter-spacing:-.035em; word-break:keep-all; margin:0 0 22px;
  text-shadow:0 2px 14px var(--ol-bg),0 1px 3px var(--ol-bg); animation:ol-in .35s ease both; }
#ol-stage .ol-ask { display:grid; gap:10px; animation:ol-in .35s .08s ease both; }
@keyframes ol-in { from { opacity:0; transform:translateY(8px); } }

/* 단추: 꽉 찬 크림색은 '다음' 하나뿐, 나머지는 테두리 */
#ol-stage .ol-main, #ol-stage .ol-form .ol-arrow { width:100%; height:54px; border:0; border-radius:12px; background:var(--ol-cream); color:#192c45; font-size:16px; font-weight:700; letter-spacing:-.01em; cursor:pointer; transition:transform .12s, filter .12s; }
#ol-stage .ol-main:active, #ol-stage .ol-form .ol-arrow:active { transform:scale(.985); filter:brightness(.96); }
#ol-stage .ol-sub { width:100%; height:48px; border:0; border-radius:12px; background:transparent; color:var(--ol-soft); font-size:15px; font-weight:500; cursor:pointer; }
#ol-stage .ol-sub:active { color:#fff; }
#ol-stage .ol-ask > .ol-sub.is-below { height:36px; margin-top:-4px; } /* 다음·없어요·이전 질문을 촘촘하게(10/10 사장: 세로 간격이 넓어 공간 낭비) */

/* 입력 칸: 어두운 유리. 자동 채우기(이름 기억·브라우저 자동완성)가 칸을 하얗게 칠하지 못하게 같은 색으로 덮는다. */
#ol-stage .ol-form { gap:10px; margin:0; }
/* 서신 느낌(10/3 재디자인): 대답 칸은 올인이 내민 한지 쪽지, 글씨는 먹빛. 자동 채우기도 같은 종이색으로 덮는다. */
#ol-stage { --ol-paper:#f7f2e7; --ol-ink:#221d16; }
#ol-stage .ol-form input { box-sizing:border-box; width:100%; border:0; outline:none; -webkit-appearance:none; appearance:none; transition:box-shadow .15s; }
#ol-stage .ol-form input:-webkit-autofill, #ol-stage .ol-form input:-webkit-autofill:hover, #ol-stage .ol-form input:-webkit-autofill:focus { box-shadow:0 0 0 1000px #fff inset; caret-color:#a8322a; transition:background-color 99999s; }

/* 양력·음력: 대답이 아니라 칸의 설정이라 한 줄짜리 토글 */
#ol-stage .ol-seg { grid-template-columns:1fr 1fr; border-radius:12px; }
#ol-stage .ol-seg button { border:0; font-weight:600; cursor:pointer; transition:background-color .15s, color .15s; }

/* 고르면 바로 넘어가는 대답(윤달, 성별): 두 칸 나란히 */
#ol-stage .ol-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#ol-stage .ol-choice { height:56px; padding:0 10px; border:0;
  cursor:pointer; word-break:keep-all; transition:border-color .15s, background-color .15s; }
#ol-stage .ol-choice:active { transform:translateY(1px); filter:brightness(.95); }
#ol-stage .ol-choices.is-long { grid-template-columns:1fr; }
/* 홀수 개(궁합의 두 사람 사이 다섯 개)면 마지막 하나는 한 줄을 다 쓴다 */
#ol-stage .ol-choices:not(.is-long) > .ol-choice:last-child:nth-child(odd) { grid-column:1 / -1; }

#ol-stage .ol-err { margin:10px 2px 0; color:#ffb4ab; font-size:14px; line-height:1.5; word-break:keep-all; }
/* 고르기(무료 확인 칸을 바로 낸 손님): 첫 화면 상품 카드와 같은 포스터 세 장. 올인의 물음이 뜬 뒤 잠깐 있다가 올라온다 */
#ol-stage .ol-picks { display:grid; grid-template-columns:repeat(var(--n, 3), 1fr); gap:8px; animation:ol-in .4s .9s ease both; }
#ol-stage .ol-pick .ol-pick-ph { display:grid; place-items:center; aspect-ratio:9 / 16; margin-bottom:7px; background:#0b1422; color:#f3e5cb; font-size:15px; font-weight:800; writing-mode:vertical-rl; letter-spacing:.2em; }
#ol-stage .ol-pick { display:flex; flex-direction:column; align-items:stretch; height:auto; padding:0 0 8px; overflow:hidden; text-align:center; border-radius:10px; background:#0b1422d9; color:#fff; font-family:inherit; box-shadow:inset 0 0 0 1px var(--ol-line); }
#ol-stage .ol-pick img { display:block; width:100%; aspect-ratio:9 / 16; object-fit:cover; margin-bottom:7px; }
#ol-stage .ol-pick b { font-size:14px; font-weight:800; }
#ol-stage .ol-pick small { margin-top:2px; padding:0 4px; font-size:11.5px; font-weight:500; color:#d9cfbd; line-height:1.35; word-break:keep-all; }
#ol-stage .ol-picks.is-text { grid-template-columns:1fr; }
#ol-stage .ol-picks.is-text .ol-pick { padding:12px; }
@media (prefers-reduced-motion: reduce) { #ol-stage .ol-line, #ol-stage .ol-ask, #ol-stage .ol-picks { animation:none; } }

/* 전에 넣은 값 목록(lp-lib/inputMemory.js)이 이 화면에서는 칸과 같은 어두운 유리로 */
#ol-stage .mem-list { border-color: var(--ol-line); background: #0b1422; box-shadow: 0 16px 36px -14px #000; }
#ol-stage .mem-list button { color: #fff; font-size: 17px; }
#ol-stage .mem-list button:active, #ol-stage .mem-list button:hover { background: #f4ead61f; color: var(--ol-cream); }

/* 입력 칸 다시(10/7 사장: 칸·토글·단추가 따로 놀아 구렸다) - 흰 칸 하나에 보내기 화살표를 안에 넣고, 양력·음력은 칸 위의 작은 알약 */
#ol-stage .ol-form { position:relative; display:block; }
#ol-stage .ol-form .ol-arrow { position:absolute; width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:50%; }
#ol-stage .ol-form .ol-arrow svg { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#ol-stage .ol-form .ol-arrow:active { transform:scale(.92); }
#ol-stage .ol-seg { display:inline-flex; gap:6px; margin:0 0 10px; padding:0; border:0; background:none; }
/* 양력·음력과 날짜 칸은 한 줄에 나란히 - 다른 물음과 높이가 같아 화면이 덜 움직인다(10/8 사장) */
#ol-stage .ol-ask:has(> .ol-seg) { grid-template-columns:auto 1fr; align-items:center; column-gap:14px; }
#ol-stage .ol-ask > .ol-seg { margin:0; }
#ol-stage .ol-seg button { height:34px; padding:0 16px; border-radius:999px; background:#ffffff1a; color:var(--ol-soft); font-size:14px; box-shadow:inset 0 0 0 1px #f4ead640; }
#ol-stage .ol-seg button[aria-pressed="true"] { background:var(--ol-cream); color:#192c45; box-shadow:none; }
#ol-stage .ol-choice { border-radius:16px; font:600 17px/1.2 "Pretendard Variable","Pretendard",sans-serif; }
/* 가로줄 입력(10/7 사장: 네모 칸은 신청서 같아 몰입이 깨진다) - 배경 위에 줄 하나, 그 위에 바로 쓴다. 화살표는 줄 오른쪽 끝 */
#ol-stage .ol-form input { height:56px; padding:0 60px 0 2px; border-radius:0; background:transparent; color:#fff; font:600 22px/1 "Pretendard Variable","Pretendard",sans-serif; letter-spacing:.02em;
  box-shadow:inset 0 -1.5px 0 #f4ead68c; caret-color:#ffd27a; }
#ol-stage .ol-form input::placeholder { color:#f4ead659; font-weight:500; }
#ol-stage .ol-form input:focus { box-shadow:inset 0 -2px 0 #ffd27a; }
#ol-stage .ol-form.is-bad input { box-shadow:inset 0 -2px 0 #ff7a6b; }
#ol-stage .ol-form input:-webkit-autofill, #ol-stage .ol-form input:-webkit-autofill:hover, #ol-stage .ol-form input:-webkit-autofill:focus { -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 1000px transparent inset, inset 0 -1.5px 0 #f4ead68c; }
#ol-stage .ol-form .ol-arrow { top:6px; right:0; }
/* 질문 칸(10/10): 세 줄 높이, 가로줄 입력과 같은 결(투명 바탕 + 아래 줄) - 글자 수는 칸 아래 오른쪽 작게, 그 아래 '다음'(정보 화면 다음 단추와 같은 모양) */
#ol-stage .ol-form.is-q textarea { box-sizing:border-box; display:block; width:100%; height:calc(3 * 1.5em + 20px); padding:10px 2px; border:0; border-radius:0; outline:none; resize:none; background:transparent; color:#fff; font:500 18px/1.5 "Pretendard Variable","Pretendard",sans-serif; box-shadow:inset 0 -1.5px 0 #f4ead68c; caret-color:#ffd27a; -webkit-appearance:none; appearance:none; }
#ol-stage .ol-form.is-q textarea::placeholder { color:#f4ead659; font-size:17px; }
#ol-stage .ol-form.is-q textarea:focus { box-shadow:inset 0 -2px 0 #ffd27a; }
#ol-stage .ol-form.is-q .ol-q-go { position:static; width:100%; height:44px; margin-top:6px; border-radius:12px; background:var(--ol-cream); color:#192c45; font-size:15px; font-weight:700; }
#ol-stage .ol-form.is-q .ol-count { display:block; margin-top:4px; text-align:right; font-size:12px; color:#f4ead680; font-variant-numeric:tabular-nums; }
#ol-stage .ol-choice { background:#ffffff14; color:#fff; box-shadow:inset 0 0 0 1px #f4ead673; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
#ol-stage .ol-choice:active { background:#ffffff2e; }
/* 진행자 이름(10/7 사장: 잘 안 보였다) - 작은 금빛 이름표. 화살표는 붉은 공 대신 얇은 테두리만(분위기를 깨지 않게) */
#ol-stage .ol-speaker { display:inline-block; margin:0 0 10px; padding:4px 12px 5px; border-radius:999px; background:#0b1422b3; box-shadow:inset 0 0 0 1px #e9c77a99; color:#f3d48a; font:700 15px/1.3 "Pretendard Variable","Pretendard",sans-serif; letter-spacing:.06em; text-shadow:none; }
#ol-stage .ol-form .ol-arrow { background:transparent; color:#f4ead6; }
#ol-stage .ol-form:focus-within .ol-arrow { color:#ffd27a; } /* 화살표만, 동그라미 없이(10/7·10/8 사장) */
#ol-stage .ol-form .ol-arrow svg { width:26px; height:26px; }


/* 입구 무대 그림·숨쉬는 영상: 위쪽부터 보여 진행자 얼굴이 조금 아래로(10/7 사장) */
#ol-stage .ol-scene:not(.is-poster) > img, #ol-stage .ol-scene:not(.is-poster) .ol-art-loop { object-position: center top; transform: scale(1.3); transform-origin: 50% 0; } /* 폰에서는 그림이 거의 통째로 들어가 위치만으로는 안 내려간다 - 위를 붙인 채 키워 얼굴을 내리고 크게 */

/* 키운 무대 그림이 무대 밖(넓은 화면의 좌우)으로 삐져나오지 않게 */
#ol-stage .ol-scene { overflow: hidden; overflow: clip; } /* clip: 1.3배 키운 그림이 무대를 스크롤 상자로 만들어, 입력 칸을 누르면 무대가 통째로 끌려 올라갔다(10/9) */

/* 이름 칸 위 내 서재 패(10/8) - 누르면 그 사람으로 다 채워진다 */
/* 입구 영상 끝 하얀 섬광(10/8): 번쩍 → 걷히며 올인 대화 */
#ol-stage .ol-flash { position: absolute; inset: 0; z-index: 6; background: #fff; pointer-events: none; animation: ol-flash 2.7s both; }
@keyframes ol-flash { 0% { opacity: 0; animation-timing-function: ease-in-out; } 37% { opacity: 1; } 48% { opacity: 1; animation-timing-function: ease-in-out; } 100% { opacity: 0; } } /* 마지막 장면 위로 흰빛이 1초 동안 서서히 화면 가득 차고, 잠깐 머문 뒤 1.4초에 걸쳐 걷히며 진행자가 서서히 나타난다(10/9 사장) */
@media (prefers-reduced-motion: reduce) { #ol-stage .ol-flash { animation-duration: .4s; } }
/* '시간을 몰라요'·'없어요'도 입력 줄 오른쪽에 작은 알약으로 - 물음마다 대화 칸 높이가 같아 화면이 덜 움직인다(10/8 사장) */
#ol-stage .ol-ask:has(> .ol-form + .ol-sub:not(.is-below)) { grid-template-columns:1fr auto; align-items:center; column-gap:12px; }
#ol-stage .ol-ask > .ol-form + .ol-sub:not(.is-below) { width:auto; height:34px; padding:0 14px; border-radius:999px; background:#ffffff1a; color:var(--ol-soft); font-size:14px; white-space:nowrap; box-shadow:inset 0 0 0 1px #f4ead640; }
#ol-stage .ol-ask > .ol-form + .ol-sub:not(.is-below):active { background:#ffffff2e; color:#fff; }
#ol-stage .ol-form input::placeholder { font-size:17px; }
/* 대화 칸 높이를 묶어 둔다 - 글 줄 수·보기 수가 달라도 이름표와 말이 늘 같은 자리에서 시작한다(10/8 사장: 레이아웃이 덜 움직이게) */
#ol-stage .ol-dialogue { min-height:min(344px, 46%); box-sizing:border-box; } /* 가장 긴 물음(긴 보기 세 줄) 높이 */
/* 무료확인 고르기: 포스터는 그림만(10/9 사장) */
#ol-stage .ol-pick.is-img { padding:0; }
#ol-stage .ol-pick.is-img img { margin:0; }
/* 고른 포스터가 제자리에서 화면 가운데로 크게(10/9 사장) - 뒤는 어둡게 */
#ol-stage .ol-zoom { position:absolute; inset:0; z-index:1; background:#0b142200; transition:background .5s ease; pointer-events:none; }
#ol-stage .ol-zoom.is-in { background:#0b1422b8; }
#ol-stage .ol-zoom img { position:absolute; display:block; height:auto; aspect-ratio:9 / 16; object-fit:cover; border-radius:12px; box-shadow:0 0 0 1.5px #e9c77a99, 0 24px 48px -12px #000; transition:left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), width .7s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { #ol-stage .ol-zoom, #ol-stage .ol-zoom img { transition:none; } }
/* 입력 줄 오른쪽 화살표가 앞으로 툭툭 - 누르고 싶게(10/9 사장) */
#ol-stage .ol-form .ol-arrow svg { animation:ol-nudge 1.3s ease-in-out infinite; }
@keyframes ol-nudge { 0%, 55%, 100% { transform:none; } 25% { transform:translateX(5px); } 40% { transform:translateX(1px); } }
@media (prefers-reduced-motion: reduce) { #ol-stage .ol-form .ol-arrow svg { animation:none; } }
/* 사이트 공통(10/9 사장): 끝말 한두 글자만 다음 줄로 떨어지는 외톨이 줄 없이, 낱말 단위로 줄을 바꾼다. 구체성 0 이라 칸마다 따로 정한 줄맞춤이 이긴다 */
:where(p, li, h1, h2, h3, h4, h5, h6, figcaption, blockquote, dd, dt, label, button, td, th, summary, small) { text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; }
/* 양력·음력과 날짜가 한 줄일 때는 밑줄도 한 줄로 - 양력·음력 아래까지 이어서(10/9 사장) */
#ol-stage .ol-ask:has(> .ol-seg) { box-shadow:inset 0 -1.5px 0 #f4ead68c; }
#ol-stage .ol-ask:has(> .ol-seg):focus-within { box-shadow:inset 0 -2px 0 #ffd27a; }
#ol-stage .ol-ask:has(> .ol-seg):has(.ol-form.is-bad) { box-shadow:inset 0 -2px 0 #ff7a6b; }
#ol-stage .ol-ask:has(> .ol-seg) .ol-form input, #ol-stage .ol-ask:has(> .ol-seg) .ol-form input:focus, #ol-stage .ol-ask:has(> .ol-seg) .ol-form.is-bad input { box-shadow:none; }
/* '시간을 몰라요'·'없어요'가 옆에 있는 줄: [입력 | 작은 단추 | 화살표] 순서, 밑줄은 줄 전체(10/9 사장) */
#ol-stage .ol-ask:has(> .ol-form + .ol-sub:not(.is-below)) { grid-template-columns:1fr auto auto; box-shadow:inset 0 -1.5px 0 #f4ead68c; }
#ol-stage .ol-ask:has(> .ol-form + .ol-sub:not(.is-below)):focus-within { box-shadow:inset 0 -2px 0 #ffd27a; }
#ol-stage .ol-ask:has(> .ol-form + .ol-sub:not(.is-below)):has(.ol-form.is-bad) { box-shadow:inset 0 -2px 0 #ff7a6b; }
#ol-stage .ol-ask:has(> .ol-form + .ol-sub:not(.is-below)) > .ol-form { display:contents; }
#ol-stage .ol-ask:has(> .ol-form + .ol-sub:not(.is-below)) .ol-form input { order:1; min-width:0; padding-right:8px; box-shadow:none !important; }
#ol-stage .ol-ask:has(> .ol-form + .ol-sub:not(.is-below)) > .ol-sub:not(.is-below) { order:2; }
#ol-stage .ol-ask:has(> .ol-form + .ol-sub:not(.is-below)) .ol-form button { order:3; position:static; }
/* 마지막 질문 칸은 밑줄 말고 네모 글상자(10/9 사장) - 화살표는 상자 안 오른쪽, '없어요'는 상자 아래 */
#ol-stage .ol-form:has(#ol-q) input { height:58px; padding:0 54px 0 16px; border:1.5px solid #f4ead68c; border-radius:12px; background:#ffffff12; box-shadow:none; font-size:17px; font-weight:600; }
#ol-stage .ol-form:has(#ol-q) input:focus { border-color:#ffd27a; box-shadow:none; }
#ol-stage .ol-form.is-bad:has(#ol-q) input { border-color:#ff7a6b; box-shadow:none; }
#ol-stage .ol-form:has(#ol-q) button { top:7px; right:6px; }
/* 날짜 줄도 시간 줄과 같은 모양: [날짜 입력 | 양력·음력 | 화살표](10/9 사장) */
#ol-stage .ol-ask:has(> .ol-seg) { grid-template-columns:1fr auto auto; column-gap:12px; }
#ol-stage .ol-ask:has(> .ol-seg) > .ol-form { display:contents; }
#ol-stage .ol-ask:has(> .ol-seg) .ol-form input { order:1; min-width:0; padding-right:8px; }
#ol-stage .ol-ask:has(> .ol-seg) > .ol-seg { order:2; }
#ol-stage .ol-ask:has(> .ol-seg) .ol-form button { order:3; position:static; }
#ol-stage .ol-ask:has(> .ol-seg) .ol-seg button { height:30px; padding:0 11px; font-size:13px; }
#ol-stage .ol-speaker[hidden] { display:none; }
/* 이전 질문: 대화 칸 맨 아래 가운데, 글자 단추(10/9 사장) */
#ol-stage .ol-back-low { display:block; margin:6px auto 0; padding:6px 14px; border:0; background:none; color:var(--ol-soft); font:600 14px "Pretendard Variable","Pretendard",sans-serif; cursor:pointer; }
#ol-stage .ol-back-low[hidden] { display:none; }
#ol-stage .ol-back-low:active { color:#fff; }

/* 신년 무대(해돋이 바다·해인): 인물이 그림 가운데 아래라 1.3배·위 붙임이면 대화창에 묻힌다 - 덜 키우고 위로 올린다(10/9 사장) */
#ol-stage .ol-scene[data-k="newyear"]:not(.is-poster) > img, #ol-stage .ol-scene[data-k="newyear"]:not(.is-poster) .ol-art-loop { transform: none; } /* 새 무대 그림은 처음부터 얼굴을 크게 잡았다(궁합·재회와 같은 짜임, 10/9) */
/* 궁합 무대(맥연, 10/9): 아래 38%를 대화창 자리로 비워 그린 그림 - 키우지 않고 통째로 */
#ol-stage .ol-scene[data-k="gunghap"]:not(.is-poster) > img, #ol-stage .ol-scene[data-k="gunghap"]:not(.is-poster) .ol-art-loop { transform: none; }
/* 한 화면 칸(10/9 사장): 세 줄로 촘촘하게 - [이름|여자 남자] [생년월일|양력 음력] [시간|몰라요] + 다음. 세로를 덜 차지해 뒤 그림이 보이게(MZ 결: 작고 단정하게) */
#ol-stage .ol-form.ol-who { display:grid; gap:6px; }
#ol-stage .ol-who .ol-wl { display:flex; align-items:center; gap:6px; height:42px; border-bottom:1px solid #f4ead63d; }
#ol-stage .ol-who .ol-wl:focus-within { border-bottom-color:#ffd27a; }
#ol-stage .ol-who input { flex:1; min-width:0; height:40px; padding:0 2px; font-size:16px; font-weight:600; letter-spacing:0; box-shadow:none !important; }
#ol-stage .ol-who input::placeholder { font-size:14px; }
#ol-stage .ol-who input:disabled { opacity:.35; }
#ol-stage .ol-who .ol-seg { flex:none; display:inline-flex; gap:4px; margin:0; }
#ol-stage .ol-who .ol-seg button, #ol-stage .ol-who .ol-chip { position:static; width:auto; height:28px; padding:0 11px; border:0; border-radius:999px; background:#ffffff1a; color:var(--ol-soft); font-size:12.5px; font-weight:600; box-shadow:inset 0 0 0 1px #f4ead640; }
#ol-stage .ol-who .ol-seg button[aria-pressed="true"], #ol-stage .ol-who .ol-chip[aria-pressed="true"] { background:var(--ol-cream); color:#192c45; box-shadow:none; }
#ol-stage .ol-who .ol-who-go { position:static; width:100%; height:44px; margin-top:6px; border-radius:12px; background:var(--ol-cream); color:#192c45; font-size:15px; font-weight:700; }
/* 고르는 물음도 촘촘하게: 세 개씩 한 줄, 낮은 단추, 대화 칸은 내용만큼만 */
#ol-stage .ol-choices { grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); gap:6px; }
#ol-stage .ol-choices.is-long { grid-template-columns:1fr; }
#ol-stage .ol-choice:not(.ol-pick) { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ol-stage .ol-choices:not(.is-long) > .ol-choice:last-child:nth-child(odd) { grid-column:auto; }
#ol-stage .ol-choice:not(.ol-pick) { height:42px; padding:0 6px; border-radius:12px; font-size:14px; }
#ol-stage .ol-line { font-size:clamp(17px, 4.6vw, 19px); line-height:1.5; margin-bottom:14px; }
#ol-stage .ol-dialogue { min-height:0; padding-top:28px; }