/* 이야기 화면: 그림 아래쪽 대화창·단계 줄을 게임이 직접 그려서 덮는다 (story-cover.js). 크기 단위 --u = 화면 너비의 1% */
.cv{--u:12.8px;--plate:52%;position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;pointer-events:none;font-family:inherit}
.cv button{font-family:inherit;-webkit-tap-highlight-color:transparent}

/* 위쪽 진행 점: 그림에 그려진 점(단계 수가 제각각)을 덮는다 */
.cv-top{position:absolute;left:25%;right:25%;top:1%;height:8%;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1.5);border-radius:999px;background:linear-gradient(#5d3418,#3b200c);box-shadow:0 0 0 calc(var(--u)*.22) #e8b44a,0 calc(var(--u)*.5) calc(var(--u)*1.2) rgba(0,0,0,.4)}
.cv-dot{display:block;flex:none;width:calc(var(--u)*1.6);height:calc(var(--u)*1.6);border-radius:50%;background:#7a5a3c;box-shadow:inset 0 0 0 calc(var(--u)*.2) #3b200c;transition:transform .2s}
.cv-dot.on{background:#ffb938;box-shadow:0 0 calc(var(--u)*.9) #ffb938}
.cv-dot.now{transform:scale(1.4)}

/* 아래 판: 그림 속 대화창·단계 줄 위를 덮는 어두운 바탕 (위쪽은 그림과 자연스럽게 이어지도록 그라데이션) */
.cv-plate{position:absolute;left:0;right:0;top:var(--plate,52%);bottom:0;background:linear-gradient(to bottom,rgba(34,17,7,0) 0%,rgba(34,17,7,1) 9%,rgba(24,12,5,1) 100%)}

/* 대화창 */
.cv-dialog{position:absolute;left:12%;right:12%;bottom:21%;min-height:calc(var(--u)*8.2);display:flex;align-items:center;gap:calc(var(--u)*1.4);padding:calc(var(--u)*1) calc(var(--u)*3) calc(var(--u)*1) calc(var(--u)*1.2);border:calc(var(--u)*.3) solid #e9c68c;border-radius:calc(var(--u)*2.6);background:#fff4de;color:#4a2c10;text-align:left;box-shadow:0 calc(var(--u)*.6) calc(var(--u)*1.6) rgba(0,0,0,.35),inset 0 0 0 calc(var(--u)*.2) #fffaf0;cursor:pointer;pointer-events:auto}
.cv-avatar{flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;border:calc(var(--u)*.3) solid #c58b4f;background:#ffe3b0;font-size:calc(var(--u)*3.4);line-height:1}
.cv-body{display:block;min-width:0}
.cv-name{display:inline-block;margin-bottom:calc(var(--u)*.3);padding:0 calc(var(--u)*.9);border-radius:999px;background:#c8602a;color:#fff;font-size:calc(var(--u)*1.25);font-weight:900;line-height:1.7}
.cv-text{display:block;font-size:calc(var(--u)*1.7);font-weight:800;line-height:1.45;word-break:keep-all;white-space:pre-line}
.cv-more{position:absolute;right:calc(var(--u)*1.2);bottom:calc(var(--u)*.7);color:#d28a2b;font-size:calc(var(--u)*1.4);animation:cv-bob 1s ease-in-out infinite}
@keyframes cv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u)*.4))}}

/* 단계 줄 */
.cv-strip{position:absolute;left:5%;right:3%;bottom:2.2%;height:17.5%;display:flex;align-items:flex-end;gap:calc(var(--u)*1.2)}
.cv-steps{display:flex;align-items:flex-end;gap:calc(var(--u)*1.2);min-width:0;flex:1}
.cv-step{flex:1 1 0;min-width:0;max-width:calc(var(--u)*14);padding:0;border:0;background:none;color:#4a2c10;cursor:pointer;pointer-events:auto;display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--u)*.5);transition:transform .15s}
.cv-step:hover{transform:translateY(calc(var(--u)*-.3))}
.cv-thumb{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:calc(var(--u)*1.3);border:calc(var(--u)*.2) solid #8da3bd;background:#17263a;box-shadow:0 calc(var(--u)*.3) calc(var(--u)*.7) rgba(0,0,0,.35)}
/* styles.css 의 '#story img'(화면 전체 그림) 규칙이 썸네일에 적용되지 않도록 덮어쓴다 */
#story .cv-thumb img{position:static;inset:auto;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cv-label{display:block;padding:calc(var(--u)*.3) calc(var(--u)*.6);border-radius:999px;background:#fff1d4;font-size:calc(var(--u)*1.2);font-weight:900;line-height:1.5;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-step.now{transform:translateY(calc(var(--u)*-.5)) scale(1.04)}
.cv-step.now .cv-thumb{border-color:#ffd25c;box-shadow:0 0 0 calc(var(--u)*.3) rgba(255,210,92,.5),0 0 calc(var(--u)*1.6) #ffb938}
.cv-step.now .cv-label{background:#ffd25c;color:#3b200c}

/* 시대 선택으로(포털) */
.cv-portal{flex:none;width:calc(var(--u)*8.4);height:calc(var(--u)*8.4);border:calc(var(--u)*.5) solid #e8b44a;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff 0,#b9a6ff 22%,#6a3fd1 58%,#2a1b6b 100%);box-shadow:0 0 calc(var(--u)*1.6) #8a6cff,0 calc(var(--u)*.5) calc(var(--u)*1.2) rgba(0,0,0,.45);cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*3.2);line-height:1}
.cv-portal:hover{filter:brightness(1.15)}

/* 좁은 화면(폰 세로에서 가로 그림을 줄여 보여 줄 때)은 단계 줄 글자를 줄이고 3칸만 */
@media (max-width:520px){.cv-label{font-size:calc(var(--u)*1.5)}}

/* 깨끗한 그림 모드(clean): 그림에 대사창·버튼이 없으므로 대사창과 버튼을 게임이 그린다 */
.cv .cv-btn,.cv .cv-count{display:none}
.cv.cv-clean .cv-top,.cv.cv-clean .cv-plate,.cv.cv-clean .cv-strip{display:none}
.cv.cv-clean .cv-dialog{bottom:5%}
.cv.cv-clean .cv-btn{display:flex;position:absolute;z-index:6;align-items:center;justify-content:center;width:calc(var(--u)*5.6);height:calc(var(--u)*5.6);min-width:38px;min-height:38px;border:calc(var(--u)*.4) solid #ffd88a;border-radius:50%;background:radial-gradient(circle at 40% 30%,#ffb04a,#e0662b);color:#fff;font-size:calc(var(--u)*3.2);font-weight:900;line-height:1;box-shadow:0 calc(var(--u)*.5) calc(var(--u)*1.2) rgba(0,0,0,.4);cursor:pointer;pointer-events:auto}
.cv.cv-clean .cv-b-back{left:1.6%;top:2.4%}
.cv.cv-clean .cv-b-sound{right:1.6%;top:2.4%;font-size:calc(var(--u)*2.4)}
.cv.cv-clean .cv-b-prev{left:1.6%;top:37%}
.cv.cv-clean .cv-b-next{right:1.6%;top:37%}
.cv.cv-clean .cv-count{display:block;position:absolute;left:50%;top:2.6%;transform:translateX(-50%);padding:calc(var(--u)*.3) calc(var(--u)*1.6);border-radius:999px;background:rgba(40,22,10,.72);color:#ffe9bd;font-size:max(12px,calc(var(--u)*1.4));font-weight:900}