/* 그림과 문단을 나란히 유지합니다. 모바일도 그림이 먼저 사라지지 않습니다. */
.story-layout .reading-chapter {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:7vw;
  align-items:start;
  height:auto;
  min-height:0;
  padding:80px 5vw;
  overflow:visible;
}
.story-layout .chapter-visual {
  position:sticky;
  top:125px;
  width:100%;
  height:min(68vh,680px);
  padding:24px 18px;
  display:flex;
  align-items:center;
  align-self:start;
  z-index:5;
  overflow:clip;
  min-width:0;
}
.chapter-visual::after {
  content:attr(data-reading-step);
  position:absolute;
  right:25px;
  bottom:2px;
  color:var(--red);
  font:10px var(--pixel);
  letter-spacing:2px;
}
.story-layout .chapter-copy { min-width:0; width:100%; }
.story-layout .reading-beat {
  min-height:65vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  position:relative;
  padding:70px 0 70px 25px;
  border-left:3px solid transparent;
}
.story-layout .reading-beat.is-focused { border-left-color:var(--red); }
.story-layout.enhanced .reading-beat { opacity:.45; transition:opacity 140ms linear; }
.story-layout.enhanced .reading-beat.is-focused,.story-layout.enhanced .reading-beat:focus-within { opacity:1; }
.story-layout .reading-beat>div:not(.connection) { width:100%; }
.story-layout .reading-beat p { max-width:100%; }
.story-layout .reading-beat .muted,.story-layout .reading-beat .hero-description { margin:22px 0; }
.story-layout .short-beat { min-height:32vh; padding-block:50px; }
.story-layout .chapter-visual .scene-art {
  width:100%;
  height:auto;
  max-height:100%;
  margin:0;
  padding:0;
  transform:translate(calc(var(--art-offset,0)*.8px),calc(var(--art-offset,0)*-.35px)) rotate(calc(var(--art-offset,0)*.025deg));
  transition:none;
}
.story-layout .chapter-visual .hero-art { padding-top:20px; }
.story-layout .chapter-visual .town-art { max-height:58vh; object-fit:cover; }
.story-layout .hero-art .art-ticket { bottom:25px; left:0; }
.story-layout .hero-art .cloud { transform:translateX(calc(var(--art-offset,0)*.65px)); }
.story-layout .chapter-visual .journey { height:440px; max-height:100%; }
.story-layout .journey .walker { transform:translate(calc(75px + var(--art-offset,0)*.8px),calc(var(--hop,0)*-8px)); }
.story-layout .chapter-visual .service-panorama { overflow:hidden; height:100%; background:var(--paper); }
.story-layout .service-panorama>img {
  height:calc(100% - 64px);
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:var(--art-position,50%) 60%;
  transform:scale(1.055);
  transition:object-position 350ms ease;
}
.story-layout .service-panorama figcaption { padding:12px; font-size:10px; }
.story-layout .scene-spark { transform:translateY(calc(var(--art-offset,0)*-.8px)) rotate(calc(var(--art-offset,0)*1deg)); }
.story-layout .service-row { display:block; border:0; padding:0; transform:none; opacity:1; }
.story-layout .service-row h3 { margin:16px 0; font-size:clamp(25px,2.4vw,38px); }
.story-layout .service-row p { font-size:12px; line-height:1.9; margin-bottom:14px; }
.story-layout .service-row>span:nth-last-child(2) { display:block; margin-top:18px; font-size:15px; }
.story-layout .service-row .pixel-icon { margin-top:25px; transform:translateY(calc(var(--art-offset,0)*.2px)); }
.story-layout .question-art {
  height:430px!important;
  border:2px solid #b8bea6;
  background-color:#e7eddb;
  background-image:linear-gradient(#bfc8ad38 1px,transparent 1px),linear-gradient(90deg,#bfc8ad38 1px,transparent 1px);
  background-size:24px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:7px 7px #d8dbc7;
}
.story-layout .question-art .try-hamster { width:240px; transform:translateX(calc(var(--art-offset,0)*.55px)); }
.question-pixels { position:absolute; left:13%; right:13%; top:12%; font:25px var(--pixel); color:var(--red); transform:translateY(calc(var(--art-offset,0)*.3px)); text-align:center; }
.story-layout .question-beat>a { width:100%; display:flex; gap:15px; padding:25px 0; border-block:1px solid var(--line); font:clamp(17px,1.8vw,25px)/1.8 var(--pixel); }
.story-layout .question-beat>a>span:last-child { margin-left:auto; color:var(--red); }
.story-layout .chapter-visual .connection-art { max-width:none; }
.story-layout .connection-art>img { max-height:none; height:auto; aspect-ratio:1.25; object-fit:cover; }
.story-layout .connection-pixels { transform:translate(calc(var(--art-offset,0)*.6px),calc(var(--art-offset,0)*-.35px)); }
.story-layout .connection-beat { padding-left:0; border-left:0; min-height:85vh; }
.story-layout .connection { max-width:100%; }
.story-layout .usage.scene-art { max-height:none; }
.story-layout .usage img:not(.usage-hamster) { max-height:55vh; object-fit:contain; }
.story-layout .usage .usage-hamster { transform:translateX(calc(var(--art-offset,0)*.7px)) rotate(calc(var(--art-offset,0)*.12deg)); }
.story-layout .scroll-hint { position:static; margin-top:35px; width:100%; }
.story-layout.enhanced [data-focus] {
  opacity:calc(.35 + var(--focus,1)*.65);
  transform:translateY(calc((1 - var(--focus,1))*18px));
}
.story-layout .reading-beat .word { transform:translateY(calc((1 - var(--word-opacity,1))*14px)); }
.story-layout footer { padding-bottom:25px; }
@media(max-width:1000px) and (min-width:701px) {
  .story-layout .reading-chapter { gap:4vw; padding-inline:4vw; }
  .story-layout .reading-beat { padding-left:15px; }
  .story-layout h1 { font-size:42px; }
}
@media(max-width:700px) {
  .story-layout .reading-chapter { display:block; padding:20px 22px 45px; }
  .story-layout .chapter-visual {
    position:sticky;
    top:70px;
    height:clamp(205px,33vh,310px);
    height:clamp(205px,33svh,310px);
    padding:14px 12px 23px;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    margin-bottom:12px;
  }
  .story-layout #village .chapter-visual { background:var(--paper); }
  .story-layout #start .chapter-visual { background:#e9e9dc; }
  .chapter-visual::after { right:15px; bottom:5px; font-size:8px; }
  .story-layout .reading-beat { min-height:53vh; min-height:53svh; padding:45px 0 45px 15px; }
  .story-layout .short-beat { min-height:35svh; }
  .story-layout h1 { font-size:35px; }
  .story-layout h2 { font-size:29px; }
  .story-layout .chapter-visual .scene-art { max-height:100%; }
  .story-layout .chapter-visual .hero-art { height:100%; padding-top:0; }
  .story-layout .chapter-visual .town-art { height:100%; object-fit:cover; object-position:center 64%; }
  .story-layout .art-label,.story-layout .art-ticket,.story-layout .hero-art .art-sky { display:none; }
  .story-layout .chapter-visual .journey { height:100%; }
  .story-layout .journey .speech { top:10px; font-size:9px; padding:9px; }
  .story-layout .journey .walker { width:90px; height:90px; bottom:30px; }
  .story-layout .mini-store { width:85px; height:95px; bottom:40px; right:12px; }
  .story-layout .journey-label { bottom:8px; left:10px; font-size:7px; }
  .story-layout .journey-path { bottom:42px; }
  .story-layout .service-panorama>img { height:calc(100% - 47px); object-fit:cover; }
  .story-layout .service-panorama figcaption { padding:7px 10px; font-size:8px; }
  .story-layout .service-row h3 { font-size:25px; }
  .story-layout .service-row>span:nth-last-child(2) { font-size:14px; }
  .story-layout .question-art { height:100%!important; }
  .story-layout .question-art .try-hamster { width:150px; }
  .question-pixels { font-size:18px; top:8%; }
  .story-layout .connection-art { height:100%!important; }
  .story-layout .connection-art>img { height:calc(100% - 40px); aspect-ratio:auto; object-fit:cover; object-position:50% 68%; }
  .story-layout .connection-art figcaption { font-size:8px; padding:7px 10px; }
  .story-layout .chapter-visual .usage { height:100%; }
  .story-layout .usage img:not(.usage-hamster) { height:calc(100% - 40px); max-height:none; object-fit:contain; }
  .story-layout .usage figcaption { font-size:8px; margin-top:5px; }
  .story-layout .usage .usage-hamster { width:45px; height:45px; top:-8px; right:6%; }
  .story-layout .connection-beat { min-height:80svh; padding-left:0; }
  .story-layout .connection>code { font-size:19px; }
  .story-layout .actions { gap:20px; }
  .story-layout .reading-beat .hero-description { font-size:16px; }
  .story-layout .reading-beat .muted { font-size:16px; }
}

/* 반복 설명을 합친 핵심 다섯 장면. 긴 빈 구간을 만들지 않습니다. */
.compact-story .reading-chapter { padding-block:45px; }
.compact-story .reading-beat { min-height:60vh; padding-block:28px; }
.compact-story .reading-beat .hero-description { margin:22px 0; }
.compact-story .service-row { width:100%; padding:18px 0; border-bottom:1px solid var(--line); }
.compact-story .service-row .service-number,.compact-story .service-row .pixel-icon { display:none; }
.compact-story .service-row h3 { margin:8px 0; font-size:clamp(22px,2.1vw,30px); }
.compact-story .service-row p { margin:7px 0; font-size:11px; }
.compact-story .service-row>span:nth-last-child(2) { margin:8px 0; font-size:12px; }
.compact-story .question-beat>a { padding-block:17px; font-size:clamp(15px,1.5vw,21px); }
.compact-story .connection { margin-top:24px; }
@media(max-width:700px) {
  .compact-story .reading-chapter { padding-block:20px; }
  .compact-story .reading-beat { min-height:0; padding-block:30px; }
  .compact-story .reading-beat h1 { margin-block:15px; }
  .compact-story .reading-beat h2 { margin-block:16px; }
  .compact-story .service-row { padding-block:15px; }
}
.compact-story .reading-chapter:not(#village) .chapter-visual::after { content:none; }