/* 상상의 날개 — 「이어 말하기·역할놀이」(relay.js). 화면 rl-, 인쇄 pr-rl-
   움직임: 그림은 끝 모습으로 두고 keyframes from 에서 출발(html.calm 이면 끝 모습). SVG 안에서 돌리거나 키우는 것은 transform-box:fill-box.
   계속 도는 큰 빛·막·햇살은 HTML 층(투명도·transform)만 바꿔 태블릿에서도 가볍게. */

/* 책상 그림 */
.rl-deskbox{margin:14px 0;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 78% 0%,#FFF8EA,#EEDFC8 55%,#E2CFB2);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.6)}
.rl-deskbox figcaption{padding:9px 14px 0;font-family:var(--cute);color:#6B4E37}
.rl-desk{display:block;width:100%;height:auto}
.rl-it.new .rl-fall{animation:rl-drop .9s both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes rl-drop{
  0%{transform:translateY(-250px) rotate(-14deg);opacity:0;animation-timing-function:cubic-bezier(.5,0,.9,.5)}
  8%{opacity:1}
  50%{transform:translateY(0) rotate(0) scale(1.06,.92);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  66%{transform:translateY(-26px) rotate(3deg);animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  80%{transform:translateY(0) scale(1.03,.96);animation-timing-function:ease-out}
  90%{transform:translateY(-6px)}
  100%{transform:none}}
.rl-it.new .rl-sh{animation:rl-shin .9s both;transform-box:fill-box;transform-origin:50% 50%}
@keyframes rl-shin{0%{transform:scale(.3);opacity:0}50%{transform:none;opacity:1}66%{transform:scale(.8);opacity:.7}80%{transform:none;opacity:1}}
.rl-it.new .rl-puff{animation:rl-puff .9s both;transform-box:fill-box;transform-origin:50% 50%}
@keyframes rl-puff{0%,49%{opacity:0;transform:scale(.6)}50%{opacity:.85;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}
.rl-slot{animation:rl-breathe 2.4s ease-in-out infinite}
@keyframes rl-breathe{50%{opacity:.55}}
@media (prefers-color-scheme:dark){ .rl-deskbox{background:radial-gradient(ellipse at 78% 0%,#4A3C2E,#2C241D 60%,#221C17)} .rl-deskbox figcaption{color:#E8D2B4} }

/* 놀이 방법 */
.rl-steps{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.rl-step{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);animation:up .4s calc(var(--n) * .12s) ease-out both}
.rl-sn{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E4705A,var(--seal));color:#fff;font-family:var(--mono);box-shadow:0 2px 5px rgba(194,69,45,.35)}
.rl-ex{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0;padding:12px;border-radius:14px;background:var(--sunken)}
.rl-ex i{font-style:normal;color:var(--faint);font-weight:700}
.rl-bub{background:#fff;color:#2E2A26;border-radius:16px 16px 16px 4px;padding:8px 13px;box-shadow:0 2px 6px rgba(0,0,0,.1);max-width:26em}
.rl-bub.y{background:#FFF1B8} .rl-bub.b{background:#DCEBF8}

/* 첫 문장 카드 */
.rl-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:12px 0 16px}
.rl-opc{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;background:var(--surface);border:2px solid var(--rule);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:0 2px 6px rgba(40,30,20,.06)}
.rl-opc:hover{transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(40,30,20,.45)}
.rl-opc.on{border-color:var(--seal);box-shadow:0 0 0 4px var(--seal-soft),0 16px 30px -16px rgba(194,69,45,.55)}
.rl-opc.on::after{content:"✓";position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--seal);color:#fff;font-weight:700;box-shadow:0 3px 8px rgba(0,0,0,.3);animation:rl-tick .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes rl-tick{from{transform:scale(0)}}
.rl-op{display:block;width:100%;height:auto;transition:transform .5s}
.rl-opc:hover .rl-op,.rl-opc.on .rl-op{transform:scale(1.04)}
.rl-opt{padding:10px 13px 13px;font-size:1.02em;line-height:1.55;position:relative;background:var(--surface)}
.rl-opc.on .rl-snow{animation:rl-snow 2.6s linear infinite}
@keyframes rl-snow{from{transform:translateY(-12px)}}
.rl-opc.on .rl-wag{animation:rl-wag .3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0 100%}
@keyframes rl-wag{from{transform:rotate(-22deg)}}
.rl-opc.on .rl-bob{animation:rl-bob 2.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 50%}
@keyframes rl-bob{from{transform:translate(5px,7px) rotate(4deg)}}
.rl-opc.on .rl-dust,.rl-opc.on .rl-gone{animation:rl-tw 1.8s ease-in-out infinite}
.rl-team .chips{gap:9px}
input.bad{border-color:var(--seal) !important;background:var(--seal-soft) !important}

/* 이어 말하기 무대 */
.rl-play{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:10px}
.rl-play .rl-deskbox{margin:0}
@media (max-width:760px){ .rl-play{grid-template-columns:1fr} }
.rl-turn{background:var(--surface);border:2px solid var(--ink);border-radius:18px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.rl-turn.full{border-color:var(--leaf);background:var(--leaf-soft);text-align:center}
.rl-tn{font-family:var(--cute);font-size:1.4em;margin:0;display:flex;align-items:center;gap:8px}
.rl-turn.full .rl-tn{justify-content:center;color:var(--leaf)}
.rl-badge{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E4705A,var(--seal));color:#fff;font-family:var(--mono);font-size:.8em;box-shadow:0 2px 6px rgba(194,69,45,.4)}
.rl-first{font-family:var(--serif);font-size:1.25em;font-weight:700;line-height:1.6;background:var(--sunken);border-radius:12px;padding:12px 14px;margin:0}
.rl-prev{margin:0;background:var(--sunken);border-radius:12px;padding:9px 12px;line-height:1.55}
.rl-prev .fine{display:block}
.rl-hint{margin:0;color:var(--muted);font-size:.95em}
.rl-put{width:100%;margin-top:4px}
.rl-strip{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rl-strip li{display:flex;gap:10px;align-items:baseline;padding:9px 14px;background:var(--surface);border:1px solid var(--rule);border-left:5px solid var(--yel-mid);border-radius:10px;animation:up .3s ease-out}
.rl-strip li.first{border-left-color:var(--sky)}
.rl-strip b{font-family:var(--mono);color:var(--faint);font-size:.85em}

/* 손 머리에! 창 — 햇살이 돌고 색종이가 떨어지고 아이가 콩콩 뛴다 */
.rl-dlg{border:0;padding:0;border-radius:26px;max-width:min(92vw,460px);overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.65),0 0 0 6px rgba(255,214,120,.55);background:radial-gradient(circle at 50% 28%,#FFFBEA,#FFE7C6 60%,#FFD2A6)}
.rl-dlg[open]{animation:rl-in .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes rl-in{from{transform:scale(.6);opacity:0}}
.rl-dlg::backdrop{background:radial-gradient(circle,rgba(60,36,14,.45),rgba(20,12,6,.75))}
.rl-shout{position:relative;padding:14px 26px 26px;text-align:center;color:#3A2A1E;overflow:hidden}
.rl-shout::before{content:"";position:absolute;left:50%;top:30%;width:760px;height:760px;margin:-380px 0 0 -380px;background:repeating-conic-gradient(rgba(255,196,80,.2) 0 9deg,transparent 9deg 18deg);border-radius:50%;animation:rl-spin 18s linear infinite;pointer-events:none}
@keyframes rl-spin{from{transform:rotate(-180deg)}}
.rl-shout>*:not(.rl-conf){position:relative;z-index:1}
.rl-conf{position:absolute;inset:0;pointer-events:none;z-index:0}
.rl-conf i{position:absolute;left:var(--x);top:var(--y);width:7px;height:12px;border-radius:2px;background:var(--c);opacity:.85;transform:rotate(var(--r));animation:rl-conf 1.6s calc(var(--k) * .07s) cubic-bezier(.2,.6,.4,1) both}
.rl-conf i:nth-child(3n){width:9px;height:9px;border-radius:50%}
@keyframes rl-conf{from{transform:translateY(-260px) rotate(0);opacity:1}}
.rl-hands{width:min(250px,64vw);margin:0 auto}
.rl-kid{display:block;width:100%;height:auto}
.rl-kidb{animation:rl-hop .42s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes rl-hop{from{transform:translateY(7px) scale(1.03,.96)}}
.rl-shoutl{animation:rl-sl .42s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 50%}
@keyframes rl-sl{from{transform:scale(.86);opacity:.45}}
.rl-big{font-family:var(--cute);font-size:2.6em;color:#C2452D;margin:.05em 0;text-shadow:0 3px 0 #FFD08A,0 6px 14px rgba(194,69,45,.3);animation:rl-pop .55s .1s cubic-bezier(.2,1.6,.4,1) both}
@keyframes rl-pop{from{transform:scale(.3);opacity:0}}
.rl-name{font-family:var(--cute);font-size:1.7em;margin:0 0 .3em}
.rl-shout form{margin-top:14px}

/* 모둠 이야기 점검 */
.rl-check{margin-top:16px}
.rl-yn{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}
.rl-yn span{flex:1 1 18em}

/* 마구간 장면 — 등불 빛은 그림 위 HTML 층(.rl-lamp)이 깜박인다 */
.rl-barnbox{margin:12px 0;border-radius:18px;overflow:hidden;background:#1E140E;box-shadow:var(--shadow)}
.rl-scene{position:relative;overflow:hidden}
.rl-barn{display:block;width:100%;height:auto}
.rl-lamp{position:absolute;left:31.25%;top:21%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,206,120,.30),rgba(255,166,70,.10) 50%,rgba(255,166,70,0));pointer-events:none;animation:rl-flick 3.4s linear infinite}
@keyframes rl-flick{0%{opacity:.75}12%{opacity:1}18%{opacity:.82}24%{opacity:.96}47%{opacity:.86}52%{opacity:1}71%{opacity:.9}86%{opacity:1}}
.rl-flame{animation:rl-fl .7s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes rl-fl{from{transform:scale(.86,.9) skewX(4deg)}}
.rl-who{transition:filter .35s}
.rl-barn[class*="sp-"] .rl-who{filter:brightness(.55) saturate(.7)}
.rl-barn.sp-ox .rl-who-ox,.rl-barn.sp-dk .rl-who-dk,.rl-barn.sp-fm .rl-who-fm{filter:none}
.rl-say{opacity:0;transition:opacity .3s}
.rl-barn.sp-ox .rl-who-ox .rl-say,.rl-barn.sp-dk .rl-who-dk .rl-say,.rl-barn.sp-fm .rl-who-fm .rl-say{opacity:1}
.rl-barn[class*="sp-"] .rl-dot{animation:rl-dot .9s calc(var(--k) * .15s) ease-in-out infinite;transform-box:fill-box}
@keyframes rl-dot{30%{transform:translateY(-4px)}60%{transform:none}}
.rl-barn.sp-ox .rl-who-ox .rl-head,.rl-barn.sp-dk .rl-who-dk .rl-head{animation:rl-talk .55s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 90%}
@keyframes rl-talk{from{transform:rotate(-3deg) translateY(-3px)}}
.rl-barn.sp-ox .rl-ox .rl-body,.rl-barn.sp-dk .rl-dk .rl-body{animation:rl-breath 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes rl-breath{50%{transform:scale(1.012,1.035)}}
.rl-ear{animation:rl-ear 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.rl-ear.r{animation-delay:-1.1s}
.rl-barn.sp-dk .rl-ear{animation-duration:1.1s}
@keyframes rl-ear{0%,78%,100%{transform:none}84%{transform:rotate(-10deg)}90%{transform:rotate(4deg)}}
.rl-oxear{transform-box:fill-box;transform-origin:100% 50%}.rl-oxear.r{transform-origin:0 50%}
.rl-barn.sp-ox .rl-oxear{animation:rl-ear 1.4s ease-in-out infinite}
.rl-tail{animation:rl-tail 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:0 0}
@keyframes rl-tail{50%{transform:rotate(7deg)}}
.rl-eye{animation:rl-blink 4.6s infinite;transform-box:fill-box;transform-origin:50% 50%}
.rl-who-dk .rl-eye{animation-duration:5.8s;animation-delay:-2s}.rl-who-fm .rl-eye{animation-duration:3.9s}
@keyframes rl-blink{0%,94%,100%{transform:none}97%{transform:scaleY(.1)}}
/* 태블릿 가볍게: 어둡게 가라앉은(필터 걸린) 인물은 꼬리·눈 깜박임을 멈추고, 말하는 인물만 움직인다 */
.rl-barn[class*="sp-"] .rl-who .rl-tail,.rl-barn[class*="sp-"] .rl-who .rl-eye,.rl-barn[class*="sp-"] .rl-who .rl-ear{animation:none}
.rl-barn.sp-ox .rl-who-ox .rl-tail,.rl-barn.sp-dk .rl-who-dk .rl-tail{animation:rl-tail 2.4s ease-in-out infinite}
.rl-barn.sp-ox .rl-who-ox .rl-eye,.rl-barn.sp-dk .rl-who-dk .rl-eye,.rl-barn.sp-fm .rl-who-fm .rl-eye{animation:rl-blink 3.8s infinite}
.rl-barn.sp-dk .rl-who-dk .rl-ear{animation:rl-ear 1.1s ease-in-out infinite}
.rl-star{animation:rl-tw 2.2s calc(var(--k) * .37s) ease-in-out infinite}
@keyframes rl-tw{50%{opacity:.25}}
.rl-line{display:flex;gap:10px;align-items:center;padding:12px 16px;background:linear-gradient(#FFFDF7,#FBF4E6);color:#2E2A26;font-size:1.1em;line-height:1.55;min-height:72px;border-top:3px solid #FFD36B}
.rl-line.on{animation:up .3s ease-out}
.rl-line .muted{color:#8C877E}
.rl-face{width:48px;height:48px;flex:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.5)}
.rl-face.s{width:28px;height:28px;display:inline-block;vertical-align:middle;margin-right:6px}
.rl-trans{margin:14px 0;padding:0 0 0 1.4em;color:var(--muted);line-height:1.65}
.rl-trans li{margin:3px 0} .rl-trans li.on{color:var(--ink);font-weight:600}
.rl-qs{margin-top:10px}

/* 원인 → 결과 사슬 */
.rl-chain{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rl-link{display:flex;flex-direction:column;gap:6px;animation:up .35s ease-out}
.rl-cause{background:var(--seal-soft);border-radius:14px;padding:11px 15px;font-weight:600;line-height:1.55}
.rl-arrow{display:flex;align-items:center;gap:10px;padding-left:22px;color:var(--faint)}
.rl-arrow::before{content:"";width:3px;height:30px;background:var(--faint);border-radius:2px}
.rl-arrow span{font-family:var(--cute);color:var(--seal)}
.rl-res{border:2px dashed var(--rule);border-radius:16px;padding:12px 14px;background:var(--surface)}
.rl-res.on{border-style:solid;border-color:var(--leaf)}
.rl-res .oneline{margin-top:4px}
.rl-checks{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.rl-ck{display:flex;gap:12px;align-items:center;text-align:left;width:100%;padding:10px 14px;border:1.5px solid var(--rule);border-radius:14px;background:var(--surface);cursor:pointer}
.rl-ck small{display:block;color:var(--muted);font-weight:400}
.rl-ck.on{border-color:var(--leaf);background:var(--leaf-soft)}
.rl-box{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:2px solid var(--faint);font-weight:700;color:var(--leaf)}
.rl-ck.on .rl-box{border-color:var(--leaf);background:var(--surface)}

/* 대본 틀 */
.rl-props{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.rl-paper{background:var(--letter);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);padding:6px 16px 14px;margin:12px 0}
.rl-sc{font-family:var(--serif);font-weight:700;margin:16px 0 6px;padding-bottom:4px;border-bottom:1.5px solid var(--rule)}
.rl-sc small{font-family:var(--sans);font-weight:400}
.rl-gl{margin:6px 0;line-height:1.6}
.rl-gl i{color:var(--muted)}
.rl-sl{display:grid;grid-template-columns:7.5em minmax(0,1fr) minmax(0,2fr);gap:6px;margin:6px 0}
.rl-sl select,.rl-sl input,.rl-role select,.rl-role input,.rl-mem input{min-width:0;border:1.5px solid var(--rule);border-radius:10px;padding:9px 10px;background:var(--surface);font-size:1em}
@media (max-width:600px){ .rl-sl{grid-template-columns:1fr 1fr} .rl-sl input[data-st]{grid-column:1/-1} }

/* 역할 나누기 */
.rl-mem{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.rl-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:14px}
.rl-role{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid var(--rule);border-left:5px solid var(--rc);border-radius:12px;background:var(--surface)}
.rl-rn{flex:1;display:flex;flex-direction:column;font-weight:700} .rl-rn small{font-weight:400}
.rl-role select,.rl-role input{width:8.5em}

/* 연습 무대 — 벨벳 막, 위 휘장, 핀 조명, 나무 바닥과 발 조명 */
.rl-stage{position:relative;margin:14px 0;padding:58px 9% 70px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);
  background:radial-gradient(ellipse 40% 62% at 50% 34%,rgba(255,232,180,.26),rgba(255,232,180,0) 70%),
    conic-gradient(from 162deg at 50% -6%,rgba(255,240,200,0) 0deg,rgba(255,240,200,.11) 9deg,rgba(255,240,200,.11) 27deg,rgba(255,240,200,0) 36deg),
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0) 30%,rgba(0,0,0,.35)),
    repeating-linear-gradient(90deg,#2C0A0C 0,#561619 18px,#6E1F20 24px,#3A0E10 40px)}
.rl-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62px;z-index:0;
  background:radial-gradient(ellipse 34% 70% at 50% 10%,rgba(255,228,170,.38),rgba(255,228,170,0)),
    linear-gradient(#E9B97A,#E9B97A) top/100% 2px no-repeat,
    repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 13px,rgba(0,0,0,.28) 13px 14px),
    linear-gradient(#8A5C34,#4A2E18)}
.rl-stage::before{content:"";position:absolute;left:0;right:0;bottom:50px;height:22px;z-index:1;pointer-events:none;
  background:radial-gradient(circle,#FFF2C6 0 2.5px,rgba(255,210,120,.55) 4px,rgba(255,210,120,0) 10px) 0 50%/64px 22px repeat-x}
.rl-val{position:absolute;left:0;right:0;top:0;height:46px;z-index:4;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5));
  background:linear-gradient(#F2CB62,#A27A22) 0 18px/100% 4px no-repeat,
    linear-gradient(#4A0C0C,#8E2420 70%,#A82C26) 0 0/100% 19px no-repeat,
    radial-gradient(ellipse 32px 24px at 50% 0,#C84238 0,#9A2620 70%,#6E1714 92%,rgba(110,23,20,0) 96%) 0 20px/64px 26px repeat-x}
.rl-cur{position:absolute;top:0;bottom:0;width:52%;z-index:3;transform:scaleX(.1);
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,rgba(0,0,0,.5)),
    repeating-linear-gradient(90deg,#4A0B0D 0,#8E1F1C 9px,#CC4A3E 16px,#A02622 22px,#4A0B0D 32px);
  animation:rl-open 1.4s .2s cubic-bezier(.6,0,.3,1) both}
.rl-cur.l{left:0;transform-origin:0 50%;box-shadow:inset -8px 0 12px rgba(0,0,0,.45)}
.rl-cur.r{right:0;transform-origin:100% 50%;box-shadow:inset 8px 0 12px rgba(0,0,0,.45)}
.rl-cur::after{content:"";position:absolute;bottom:0;left:0;right:0;height:10px;background:linear-gradient(90deg,#E8BE58,#A27A22,#E8BE58) 0 0/14px 100%}
@keyframes rl-open{from{transform:none}}
.rl-tele{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;min-height:260px;justify-content:center}
.rl-prog{position:absolute;right:0;bottom:-30px;font-family:var(--mono);color:#F4E2C4;font-size:.85em;text-shadow:0 1px 3px #000}
.rl-tl{background:#FFFDF7;color:#2E2A26;border-radius:14px;padding:10px 14px;border-left:6px solid var(--rc);transition:transform .3s,opacity .3s}
.rl-tl.prev,.rl-tl.next{opacity:.5;transform:scale(.94)}
.rl-tl.now{box-shadow:0 0 0 3px #FFD36B,0 0 46px rgba(255,214,130,.5),0 14px 30px -10px rgba(0,0,0,.7);font-size:1.2em;animation:rl-now .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes rl-now{from{transform:translateY(24px) scale(.94);opacity:.4}}
.rl-tl.empty{visibility:hidden;min-height:40px}
.rl-tw{margin:0;font-weight:700;color:var(--rc);display:flex;align-items:center} .rl-tw small{margin-left:6px}
.rl-td{margin:2px 0;color:#6E6A63;font-style:italic;font-size:.9em}
.rl-tt{margin:2px 0;line-height:1.55}
.rl-done{text-align:center;color:#FFF3D6;padding:30px 10px;animation:rl-pop .6s cubic-bezier(.2,1.5,.4,1) both}
.rl-done b{font-family:var(--cute);font-size:1.8em;color:#FFE08A;text-shadow:0 0 18px rgba(255,200,90,.7),0 2px 0 #7A3A10}
.rl-talk ul{margin:6px 0;padding-left:1.2em}

/* ---------- 인쇄 ---------- */
#printroot .pr-rl{padding:2mm 1mm;gap:3mm}
#printroot .pr-rl-h{display:flex;justify-content:space-between;align-items:flex-start;gap:6mm;border-bottom:.6mm solid #2B2523;padding-bottom:2.5mm}
#printroot .pr-rl-h h1{font-size:17pt}
#printroot .pr-rl-me{margin:0;flex:none;font-size:11pt;border:.5mm solid var(--rc);border-radius:3mm;padding:1.5mm 3.5mm;background:#FFF3A8}
#printroot .pr-rl-me b{font-size:14pt;color:var(--rc)}
#printroot .pr-rl-tip{margin:0;font-size:9.5pt;color:#6E6A63}
#printroot .pr-rl-story{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.5mm;flex:1;overflow:hidden;font-size:14pt}
#printroot .pr-rl-story li{display:grid;grid-template-columns:9mm 1fr;gap:0 2mm;align-items:end;border:.3mm solid #D9CFBE;border-radius:2.5mm;padding:2mm 3mm}
#printroot .pr-rl-story li b{grid-row:span 2;align-self:center;font-family:"Jua",sans-serif;font-weight:400;color:#C2452D;font-size:15pt}
#printroot .pr-rl-tx{line-height:1.5}
#printroot .pr-rl-wl{display:block;height:9mm;border-bottom:.3mm solid #A9A39A}
#printroot .pr-rl-chk{display:flex;justify-content:space-between;gap:4mm;font-size:10pt;border-top:.3mm dashed #A9A39A;padding-top:2mm}
#printroot .pr-rl-draw{height:55mm;flex:none;border:.4mm dashed #A9A39A;border-radius:3mm;position:relative}
#printroot .pr-rl-draw span{position:absolute;left:3mm;top:2mm;font-size:8.5pt;color:#9A958C}
#printroot .pr-rl-cast{margin:0;display:flex;flex-wrap:wrap;gap:1.5mm 5mm;font-size:10pt}
#printroot .pr-rl-cast span{border-bottom:.3mm solid #D9CFBE;padding:0 1mm}
#printroot .pr-rl-cast span.hl{background:#FFF3A8}
#printroot .pr-rl-props{color:#6E6A63;border:0 !important}
#printroot .pr-rl-body{flex:1;overflow:hidden;font-size:11.5pt}
#printroot .pr-rl-sc{margin:3mm 0 1mm;font-family:"Jua",sans-serif;font-size:12pt;border-bottom:.3mm solid #2B2523}
#printroot .pr-rl-ln{margin:1.2mm 0;line-height:1.55;padding:.6mm 1.5mm;border-radius:1.5mm}
#printroot .pr-rl-ln b{margin-right:1.5mm}
#printroot .pr-rl-ln i{color:#6E6A63}
#printroot .pr-rl-ln.hl{background:#FFF3A8}
#printroot .pr-rl-blank{display:block;height:7.5mm;border-bottom:.3mm solid #A9A39A;margin-top:1mm}