/* 붓글씨 글자 (public/js/brush.js) · 보스 그림 두루마리 (public/js/scrolls.js) */

/* ── 붓글씨: 글자마다 위에서 아래로 먹이 내려앉고, 가장자리가 번졌다가 마른다. SVG 필터 없이 마스크 + 그림자 ── */
.bw { white-space: nowrap; }
.bc { display: inline-block; font-style: inherit; padding: 0.1em 0.04em; margin: -0.1em -0.04em; opacity: 0;
  -webkit-mask-image: linear-gradient(174deg, #000 40%, rgba(0,0,0,0.45) 49%, transparent 58%); mask-image: linear-gradient(174deg, #000 40%, rgba(0,0,0,0.45) 49%, transparent 58%);
  -webkit-mask-size: 100% 330%; mask-size: 100% 330%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  animation: bw-ink var(--bd, 360ms) cubic-bezier(0.32, 0.6, 0.38, 1) var(--bt, 0ms) forwards; }
@keyframes bw-ink {
  0%   { opacity: 0; -webkit-mask-position: 0 100%; mask-position: 0 100%; text-shadow: 0 0 0.42em var(--bw-bleed, rgba(255, 226, 170, 0.6)); }
  12%  { opacity: 1; }
  65%  { text-shadow: 0 0 0.16em var(--bw-bleed, rgba(255, 226, 170, 0.6)); }
  100% { opacity: var(--ink, 1); -webkit-mask-position: 0 0; mask-position: 0 0; text-shadow: 0 0 0 transparent; }
}
.bw-done .bc { animation: none; opacity: var(--ink, 1); -webkit-mask-image: none; mask-image: none; text-shadow: none; }
#dialog .dlg-text.bw-on { --bw-bleed: rgba(255, 214, 150, 0.55); }
.intro-text span.bw-on { --bw-bleed: rgba(240, 226, 196, 0.7); opacity: 1; transition: none; }
.intro-text span.bw-on span.bw { opacity: 1; transition: none; }   /* game.css 의 .intro-text span { opacity: 0 } 이 낱말 묶음에 걸리지 않게 */

/* ── 그림 두루마리: 어둡게 가라앉은 게임 화면 위로, 오른쪽 축은 그대로 두고 왼쪽으로 풀려 나간다 ── */
#scrollv { position: fixed; inset: 0; z-index: 70; word-break: keep-all; -webkit-user-select: none; user-select: none; cursor: pointer;
  --sw: 900px; --sh: 480px; --fs: 17px; --sv-ink: #1c150e; --sv-red: #8a1d12; }
#scrollv.hidden { display: none; }
.sv-dim { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease;
  background: radial-gradient(ellipse at 50% 50%, rgba(8, 7, 6, 0.6) 0%, rgba(2, 2, 3, 0.88) 75%); }
#scrollv.on .sv-dim { opacity: 1; }
.sv-roll { position: absolute; top: 50%; right: calc((100vw - var(--sw)) / 2 - 12px); height: var(--sh); display: flex; flex-direction: row-reverse; align-items: center;
  transform: translateY(-46%); opacity: 0; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7)); }
#scrollv.on .sv-roll { opacity: 1; transform: translateY(-50%); }
#scrollv.closing .sv-roll { opacity: 0; transition: opacity 0.6s ease 0.7s; }
#scrollv.closing .sv-dim { opacity: 0; transition: opacity 0.8s ease 0.6s; }
/* 축: 나무 막대 + 위아래 축머리 */
.sv-rod { position: relative; flex: none; width: 15px; height: calc(var(--sh) + 6px); border-radius: 7px;
  background: linear-gradient(90deg, #24160c 0%, #6e4a2a 38%, #8a6038 50%, #4a2e18 78%, #1e1208 100%); }
.sv-rod::before, .sv-rod::after { content: ''; position: absolute; left: -4px; width: 23px; height: 16px; border-radius: 5px;
  background: linear-gradient(90deg, #0e0906, #3a2616 45%, #120b07); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.18); }
.sv-rod::before { top: -12px; } .sv-rod::after { bottom: -12px; }
/* 왼쪽은 아직 감긴 종이 뭉치 (풀릴수록 조금씩 얇아진다) */
.sv-rolled { position: relative; flex: none; width: 22px; height: var(--sh); margin-left: -2px; border-radius: 10px;
  background: linear-gradient(90deg, #6f6150 0%, #cdbf9f 30%, #e8dcc0 48%, #b3a283 72%, #5c4f3e 100%); transition: width 2.6s cubic-bezier(0.3, 0.7, 0.25, 1); }
#scrollv.open .sv-rolled { width: 14px; }
.sv-rolled + .sv-rod { margin-right: -6px; }
/* 바탕: 비단 장황(위아래 쪽빛 띠) 위에 한지 */
.sv-sheet { position: relative; flex: none; width: 0; height: var(--sh); overflow: hidden; transition: width 2.6s cubic-bezier(0.3, 0.7, 0.25, 1); }
#scrollv.open .sv-sheet { width: var(--sw); }
#scrollv.closing .sv-sheet { width: 0; transition: width 1.1s cubic-bezier(0.6, 0, 0.7, 0.4); }
.sv-inner { position: absolute; top: 0; right: 0; width: var(--sw); height: 100%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, rgba(0, 0, 0, 0.05) 2px 4px), linear-gradient(#23283a, #1a1d2a); }
.sv-inner::before, .sv-inner::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: rgba(201, 162, 79, 0.45); }
.sv-inner::before { top: 7%; } .sv-inner::after { bottom: 7%; }
.sv-paper { position: absolute; left: 0; right: 0; top: calc(7% + 4px); bottom: calc(7% + 4px); display: flex; flex-direction: row-reverse; overflow: hidden;
  background: url("../ui/tex_hanji.png") center / 300px, #e9dcbd; box-shadow: inset 0 0 60px rgba(110, 80, 40, 0.32), inset 0 0 6px rgba(70, 50, 30, 0.4); }
.sv-paper::after { content: ''; position: absolute; inset: 0; pointer-events: none;   /* 세월의 얼룩 */
  background: radial-gradient(ellipse at 18% 30%, rgba(120, 90, 50, 0.12), transparent 40%), radial-gradient(ellipse at 80% 85%, rgba(100, 70, 40, 0.1), transparent 35%); }
.sv-art { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; }
.sv-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.8s ease 0.6s; }
#scrollv.open .sv-art canvas { opacity: 1; }
.sv-text { position: relative; flex: none; height: 100%; box-sizing: border-box; padding: 6% 3.2% 6% 1%; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
  font-family: 'Song Myung', serif; font-size: var(--fs); line-height: 1.95; letter-spacing: 0.14em; color: var(--sv-ink); --bw-bleed: rgba(30, 20, 10, 0.5); }
.sv-title { font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: 1.32em; color: var(--sv-red); letter-spacing: 0.32em; margin-left: 0.9em; min-height: 3em; }
.sv-title small { display: block; font-size: 0.6em; letter-spacing: 0.4em; color: #6a5440; margin-top: 0.5em; }
.sv-l { margin: 0 0 0 0.55em; min-height: 1em; }
.sv-seal { position: absolute; left: 2%; bottom: 7%; opacity: 0; transform: rotate(-4deg) scale(1.9); pointer-events: none; }
.sv-seal.on { animation: sv-stamp 0.34s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }
@keyframes sv-stamp { to { opacity: 0.9; transform: rotate(-4deg) scale(1); } }
.sv-skip { position: absolute; right: 18px; bottom: 16px; padding: 7px 14px; font-family: var(--title, serif); font-size: 14px; color: #d9c79e; cursor: pointer;
  background: rgba(10, 8, 6, 0.55); border: 1px solid rgba(201, 162, 79, 0.45); opacity: 0; transition: opacity 0.6s ease 1.2s; }
#scrollv.on .sv-skip { opacity: 1; }
.sv-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12px; color: rgba(217, 199, 158, 0.6); letter-spacing: 2px; opacity: 0; transition: opacity 0.6s; }
#scrollv.read .sv-hint { opacity: 1; transition-delay: 1.4s; animation: blink 2.4s 1.4s infinite; }   /* 눌러 거둘 수 있을 때(scrolls.js readyAt)부터 */

/* 세로 화면(휴대폰 세로): 그림 위, 글 아래 가로쓰기 */
#scrollv.sv-port .sv-paper { flex-direction: column-reverse; }
#scrollv.sv-port .sv-art { flex: 1 1 54%; }
#scrollv.sv-port .sv-text { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; height: auto; flex: none; padding: 3% 7% 9%; letter-spacing: 0.04em; line-height: 1.75; }
#scrollv.sv-port .sv-title { margin: 0 0 0.4em; min-height: 0; letter-spacing: 0.2em; }
#scrollv.sv-port .sv-title small { display: inline; margin: 0 0 0 0.6em; }
#scrollv.sv-port .sv-l { margin: 0 0 0.2em; }
#scrollv.sv-port .sv-seal { left: auto; right: 5%; bottom: auto; top: 3%; }

/* 영어(html.lang-en): 두루마리 글도 가로쓰기 (세로 화면 배치와 같은 꼴) */
html.lang-en .sv-text { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; width: min(38%, 420px); letter-spacing: 0.02em; line-height: 1.6; padding: 6% 4% 6% 3%; overflow: auto; }
html.lang-en .sv-title { margin: 0 0 0.6em; min-height: 0; letter-spacing: 0.06em; }
html.lang-en .sv-l { margin: 0 0 0.35em; }
html.lang-en #scrollv.sv-port .sv-text { width: auto; }