/* =========================================================
   WEBTOON STRIP — 하나의 세로 스트립으로 이어지는 컷 구성
   ========================================================= */
.strip{
  max-width:720px;margin:0 auto;background:#000;
  font-family:'Noto Sans KR',sans-serif;
  --fs:clamp(13px,3.5vw,16px);
}

/* ---------- 컷 ---------- */
.cut{position:relative;width:100%;overflow:hidden;background:#0b0d13;}
.cut > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.cut.wide{aspect-ratio:16/9;}
.cut.std{aspect-ratio:4/5;}
.cut.sq{aspect-ratio:1/1;}
.cut.tall{aspect-ratio:3/4;}
.cut.xtall{aspect-ratio:9/16;}
.cut.strip-s{aspect-ratio:3/1;}            /* 가로로 얇은 띠 컷 (눈, 손 클로즈업) */
.cut.inset{width:84%;margin:0 auto;outline:2px solid #e8ecf2;outline-offset:-2px;}
.cut.inset.l{margin:0 auto 0 6%;width:70%;}
.cut.inset.r{margin:0 6% 0 auto;width:70%;}
.cut.mono > img{filter:grayscale(1) contrast(1.15) brightness(.82);}

/* 이미지 없을 때: 장면 설명이 보이는 자리 */
.cut .ph{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;padding:1.2rem;text-align:center;color:#6d7487;font-size:12px;line-height:1.5;
  background:repeating-linear-gradient(135deg,#0b0d13 0 12px,#0e111a 12px 24px);
}
.cut .ph b{font-family:'Archivo Black',sans-serif;color:#8b93a8;letter-spacing:.08em;font-weight:400;}
.cut.noimg .ph{display:flex;}

/* ---------- 컷 사이 여백 (검은 거터) ---------- */
.strip .gap{height:28px;}
.strip .gap.m{height:72px;}
.strip .gap.l{height:160px;}
.strip .gap.xl{height:260px;}
.strip .gut{                                       /* 여백 위에 떠 있는 내레이션/대사 */
  position:relative;padding:56px 10%;text-align:center;color:#c9cfdb;
  font-size:var(--fs);line-height:1.8;letter-spacing:.01em;
}
.strip .gut.tall{padding:120px 10%;}
.strip .gut .dim{color:#6d7487;}
.strip .gut.left{text-align:left;}
.strip .gut.right{text-align:right;}

/* ---------- 텍스트 요소 공통 위치 ---------- */
.cut .o{position:absolute;z-index:5;}
.strip .tl{top:5%;left:5%;} .strip .tr{top:5%;right:5%;} .strip .tc{top:5%;left:50%;transform:translateX(-50%);}
.strip .bl{bottom:6%;left:5%;} .strip .br{bottom:6%;right:5%;} .strip .bc{bottom:6%;left:50%;transform:translateX(-50%);}
.strip .ml{top:50%;left:5%;transform:translateY(-50%);} .strip .mr{top:50%;right:5%;transform:translateY(-50%);}

/* 말풍선 (대사) */
.strip .say{
  max-width:62%;background:#fff;color:#111;border:2px solid #111;
  border-radius:999px;padding:.75em 1.25em;font-size:var(--fs);font-weight:600;line-height:1.45;
  text-align:center;word-break:keep-all;
}
.strip .say.box{border-radius:1.1em;}
.strip .say::after{                                  /* 꼬리: 기본 아래-왼쪽 */
  content:"";position:absolute;bottom:-11px;left:28%;width:16px;height:16px;background:#fff;
  border-right:2px solid #111;border-bottom:2px solid #111;transform:skewX(-25deg) rotate(45deg);
}
.strip .say.t-r::after{left:auto;right:28%;transform:skewX(25deg) rotate(45deg);}
.strip .say.t-up::after{bottom:auto;top:-11px;transform:rotate(225deg);}
.strip .say.t-none::after{display:none;}
.strip .say.shout{border-radius:.3em;font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:calc(var(--fs)*1.25);
  clip-path:polygon(0 8%,6% 0,20% 6%,34% 0,50% 7%,66% 0,80% 6%,94% 0,100% 10%,97% 50%,100% 90%,94% 100%,80% 94%,66% 100%,50% 93%,34% 100%,20% 94%,6% 100%,0 90%,3% 50%);
  padding:1em 1.6em;}
.strip .say.shout::after{display:none;}
.strip .say.small{font-size:calc(var(--fs)*.82);padding:.5em 1em;font-weight:500;}
.strip .say.dark{background:#0d0f14;color:#e8ecf2;border-color:#e8ecf2;}
.strip .say.dark::after{background:#0d0f14;border-color:#e8ecf2;}

/* 속마음 (독백) — 꼬리 없는 반투명 사각 */
.strip .think{
  max-width:64%;background:rgba(8,10,16,.82);color:#e8ecf2;border:1px solid rgba(232,236,242,.35);
  border-radius:.4em;padding:.7em 1em;font-size:var(--fs);line-height:1.55;word-break:keep-all;
}

/* 내레이션 박스 */
.strip .cap{
  max-width:72%;background:#e8ecf2;color:#111;padding:.55em .9em;font-size:calc(var(--fs)*.9);
  font-weight:500;line-height:1.5;word-break:keep-all;border-left:4px solid var(--ice,#7fa8e0);
}
.strip .cap.dark{background:rgba(5,6,10,.85);color:#c9cfdb;border-left-color:#c9cfdb;}

/* 화면 속 텍스트 (문자, 서류, 모니터) */
.strip .ui{
  max-width:78%;background:rgba(10,14,24,.9);color:#d8e4f5;border:1px solid #7fa8e0;
  padding:.8em 1em;font-size:calc(var(--fs)*.85);line-height:1.6;font-family:'Noto Sans KR',sans-serif;
}
.strip .ui .h{display:block;font-family:'Archivo Black',sans-serif;font-size:.78em;letter-spacing:.12em;color:#7fa8e0;margin-bottom:.3em;}
.strip .ui s{color:#c2586a;}
.strip .ui mark{background:none;color:#fff;border-bottom:2px solid #c2586a;}

/* 효과음 */
.strip .sfx{
  font-family:'Black Han Sans',sans-serif;color:#fff;font-size:calc(var(--fs)*2.6);line-height:1;
  -webkit-text-stroke:2px #000;paint-order:stroke fill;transform:rotate(-8deg);letter-spacing:.02em;
  text-shadow:0 0 18px rgba(127,168,224,.35);
}
.strip .sfx.s{font-size:calc(var(--fs)*1.5);}
.strip .sfx.red{color:#ff4d5e;}

/* 표지/타이틀 컷 */
.cut .title{position:absolute;left:7%;bottom:9%;z-index:5;}
.cut .title .k{font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.25em;color:#7fa8e0;margin-bottom:.7rem;}
.cut .title h1{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:clamp(28px,8vw,52px);line-height:1.15;color:#fff;}
.cut .title .eng{font-family:'Archivo Black',sans-serif;font-size:clamp(40px,13vw,88px);line-height:.92;color:#fff;}
.cut .title .eng span{color:#7fa8e0;}
.cut .title p{margin-top:.6rem;color:#a7afc0;font-size:14px;}
.cut .fade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 55%);}

/* 정보 말소 박스 */
.strip .redact{
  font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.08em;color:#ff5a6c;
  background:rgba(0,0,0,.8);border:1px solid rgba(255,90,108,.55);padding:.9em 1.1em;min-width:62%;
}
.strip .redact div{display:flex;justify-content:space-between;gap:1.5em;padding:.2em 0;}
.strip .redact .g{animation:glitchText 1.4s infinite steps(2,end);}

/* 화면 전환: 노이즈 띠 */
.cut.static{aspect-ratio:6/1;background:#000;}
.cut.static::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px);
  animation:scan 1.2s linear infinite;}

/* 끝 */
.strip-end{padding:80px 0 20px;text-align:center;color:#6d7487;font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.3em;}

@media(min-width:768px){
  .strip{border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08);}
}