/* 폰 세로 이야기 보기 (story-portrait.js): 세로 그림을 화면 전체에 깔고 대사·버튼은 게임이 올린다 */
.sp{display:none;position:fixed;left:0;top:0;width:100%;height:100vh;height:100dvh;z-index:70;background:#1a0e05;overflow:hidden;font-family:inherit;color:#3b200c;-webkit-tap-highlight-color:transparent;--u:min(4vw,19px)}
.sp.on{display:block}
.sp button{font-family:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
.sp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;display:block;-webkit-user-drag:none}

/* 아래쪽 글자가 잘 보이도록 그림 아래를 살짝 어둡게 */
.sp-shade{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to bottom,rgba(26,14,5,0) 0%,rgba(26,14,5,.55) 55%,rgba(26,14,5,.8) 100%);pointer-events:none}
.sp.sp-bare .sp-shade,.sp.sp-bare .sp-top,.sp.sp-bare .sp-dialog,.sp.sp-bare .sp-tap{display:none}

.sp-btn{border:calc(var(--u)*.22) solid #c58b4f;background:#fff1d4;color:#4a2c10;border-radius:999px;font-weight:900;box-shadow:0 calc(var(--u)*.3) calc(var(--u)*.8) rgba(0,0,0,.4)}
.sp-btn:active{transform:scale(.96)}

/* 위쪽: 뒤로 · 장 이름/진행 · 소리 */
.sp-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*.8);padding:calc(var(--u)*.9) calc(var(--u)*.9) 0;padding-top:max(calc(var(--u)*.9),env(safe-area-inset-top))}
.sp-top .sp-btn{flex:none;width:calc(var(--u)*2.9);height:calc(var(--u)*2.9);min-width:40px;min-height:40px;font-size:calc(var(--u)*1.9);line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.sp-mid{display:flex;align-items:center;gap:calc(var(--u)*.6);min-width:0}
.sp-chapter{padding:calc(var(--u)*.2) calc(var(--u)*.9);border-radius:999px;background:#c8602a;color:#fff;font-size:calc(var(--u)*.85);font-weight:900;white-space:nowrap}
.sp-count{padding:calc(var(--u)*.25) calc(var(--u)*1);border-radius:999px;background:rgba(40,22,10,.72);color:#fff;font-size:calc(var(--u)*.85);font-weight:800;white-space:nowrap}

/* 대사창 */
.sp-dialog{position:absolute;left:calc(var(--u)*.9);right:calc(var(--u)*.9);bottom:calc(var(--u)*1.2 + env(safe-area-inset-bottom));display:flex;align-items:center;gap:calc(var(--u)*.8);text-align:left;padding:calc(var(--u)*.9) calc(var(--u)*1.5) calc(var(--u)*1.1) calc(var(--u)*.9);border-radius:calc(var(--u)*1.2);border:calc(var(--u)*.22) solid #c58b4f;background:rgba(255,246,222,.96);color:#3b200c;box-shadow:0 calc(var(--u)*.4) calc(var(--u)*1.2) rgba(0,0,0,.45)}
.sp-avatar{flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--u)*2.9);height:calc(var(--u)*2.9);border-radius:50%;border:calc(var(--u)*.2) solid #c58b4f;background:#ffe3b0;font-size:calc(var(--u)*1.6)}
.sp-body{display:block;min-width:0;flex:1}
.sp-name{display:inline-block;margin-bottom:calc(var(--u)*.25);padding:0 calc(var(--u)*.7);border-radius:999px;background:#c8602a;color:#fff;font-size:calc(var(--u)*.8);font-weight:900;line-height:1.6}
.sp-text{display:block;font-size:calc(var(--u)*1.02);font-weight:800;line-height:1.5;word-break:keep-all;white-space:pre-line}
.sp-more{position:absolute;right:calc(var(--u)*.7);bottom:calc(var(--u)*.35);color:#d28a2b;font-size:calc(var(--u)*.85);animation:sp-bob 1s ease-in-out infinite}
@keyframes sp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u)*.25))}}

/* 대사가 없는 도입 장면: 화면을 눌러서 넘기라는 안내만 */
.sp-tap{position:absolute;left:50%;bottom:calc(var(--u)*5);bottom:calc(var(--u)*5 + env(safe-area-inset-bottom));transform:translateX(-50%);padding:calc(var(--u)*.5) calc(var(--u)*1.4);border-radius:999px;background:rgba(40,22,10,.78);color:#fff;font-size:calc(var(--u)*.95);font-weight:800;white-space:nowrap;border:0;animation:sp-bob 1.2s ease-in-out infinite}
.sp-img,.sp-dialog,.sp-tap{cursor:pointer}
.sp-tap[hidden]{display:none}

/* New portrait illustrations keep edge characters and artifacts inside the viewport. */
.sp.sp-expanded .sp-img{object-fit:contain;object-position:center top;background:#241b18}

@media (orientation: portrait) {
  html:not(.tm-rot) #story .cv-strip,
  html:not(.tm-rot) #story .cv-b-prev,
  html:not(.tm-rot) #story .cv-b-next,
  html:not(.tm-rot) #story .mp-legacy-nav,
  html:not(.tm-rot) .tmm .tmm-nav,
  html:not(.tm-rot) .tmm .tmm-menu { display: none; }
}