/* ==========================================================
   꿈 퀘스트 — 레트로 픽셀 RPG 덱
   팔레트 : Sweetie-16 계열 / 폰트 : Galmuri(픽셀) + DungGeunMo
   ========================================================== */

@font-face{
  font-family:'DungGeunMo';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.0/DungGeunMo.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}

:root{
  --night:#1a1c2c;
  --night2:#232640;
  --deep:#29366f;
  --blue:#3b5dc9;
  --sky:#41a6f6;
  --cyan:#73eff7;
  --green:#38b764;
  --teal:#257179;
  --gold:#ffcd75;
  --orange:#ef7d57;
  --red:#b13e53;
  --plum:#5d275d;
  --paper:#f4f4f4;
  --steel:#94b0c2;
  --slate:#566c86;

  --fs-hero:clamp(46px,7.4vw,132px);
  --fs-div:clamp(30px,4.4vw,78px);
  --fs-title:clamp(22px,2.5vw,44px);
  --fs-body:clamp(15px,1.35vw,23px);
  --fs-small:clamp(14px,1.02vw,17px);

  --px:4px;
  --step:steps(5,end);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--night);
  color:var(--paper);
  font-family:'Galmuri11','DungGeunMo','Pretendard Variable',Pretendard,monospace;
  word-break:keep-all;
  overflow-wrap:break-word;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  -webkit-font-smoothing:none;
  font-smooth:never;
}

/* ---------- 무대 ---------- */
.presentation{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
}

.slide{
  position:relative;
  height:100vh;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  padding:clamp(20px,3vw,58px) clamp(18px,4vw,78px) clamp(56px,5vw,84px);
  overflow:hidden;
  background:
    linear-gradient(180deg,#1e2138 0%,#1a1c2c 62%,#141626 100%);
}
/* 픽셀 격자 바닥 무늬 */
.slide::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(148,176,194,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,176,194,.06) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}
.slide > *{position:relative;z-index:1;}

/* ---------- 등장 모션 (레트로 스텝 이징) ---------- */
.anim{opacity:0;transform:translateY(14px);transition:opacity .45s var(--step),transform .45s var(--step);}
.slide.in-view .anim{opacity:1;transform:none;}
.slide.in-view .anim-1{transition-delay:.05s}
.slide.in-view .anim-2{transition-delay:.16s}
.slide.in-view .anim-3{transition-delay:.27s}
.slide.in-view .anim-4{transition-delay:.38s}
.slide.in-view .anim-5{transition-delay:.49s}
.slide.in-view .anim-6{transition-delay:.60s}
.slide.in-view .anim-7{transition-delay:.71s}

/* ---------- 픽셀 박스 ---------- */
.px{
  background:var(--paper);
  color:var(--night);
  border:var(--px) solid var(--night);
  box-shadow:inset 0 0 0 var(--px) var(--steel), 8px 8px 0 rgba(0,0,0,.5);
  padding:clamp(16px,1.8vw,26px) clamp(18px,2vw,30px);
}
.px-dark{
  background:var(--deep);
  color:var(--paper);
  border:var(--px) solid var(--paper);
  box-shadow:inset 0 0 0 var(--px) var(--night), 8px 8px 0 rgba(0,0,0,.5);
  padding:clamp(14px,1.6vw,24px);
}

.dialog,.divider-box,.end-box{position:relative;}
.dialog p,.divider-box p,.end-box p{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.85;
}
.blink-arrow{
  position:absolute; right:14px; bottom:8px;
  color:var(--red); font-size:clamp(14px,1.1vw,18px);
  animation:blink 1s var(--step) infinite;
}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* ---------- 스프라이트 ---------- */
.sprite{
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
  shape-rendering:crispEdges;
}
/* 키프레임을 쓰는 스프라이트는 등장 연출을 투명도만으로 (transform 충돌 방지) */
.sprite.anim{transform:none;}
.sprite-hero{width:clamp(96px,11vw,176px);animation:bob 1.1s var(--step) infinite;}
.sprite-hero-end{width:clamp(88px,9vw,148px);margin:0 auto;animation:bob 1.1s var(--step) infinite;}
@keyframes bob{0%,49%{transform:translateY(0)}50%,100%{transform:translateY(-6px)}}

/* ---------- 헤더 / 푸터 ---------- */
.slide-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  border-bottom:var(--px) solid var(--slate);
  padding-bottom:10px;
  margin-bottom:clamp(14px,1.8vw,28px);
  flex-shrink:0;
}
.stage-ko{
  font-size:var(--fs-small);
  color:var(--gold);
  letter-spacing:.04em;
}
.hearts{display:flex;gap:6px;}
.heart{
  width:14px;height:14px;display:block;
  background:var(--red);
  clip-path:polygon(21% 0,50% 22%,79% 0,100% 28%,50% 100%,0 28%);
}
.slide-footer{
  position:absolute;
  left:clamp(18px,4vw,78px); right:clamp(18px,4vw,78px);
  bottom:clamp(16px,1.8vw,28px);
  display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(14px,.85vw,15px);
  color:var(--steel);
  border-top:2px solid rgba(148,176,194,.28);
  padding-top:8px;
  z-index:2;
}
.page-num{color:var(--cyan);}

/* 본문 제목 */
.slide-title-h{
  margin:0 0 clamp(12px,1.5vw,22px);
  font-size:var(--fs-title);
  line-height:1.35;
  color:var(--paper);
  text-shadow:0 4px 0 rgba(0,0,0,.45);
  flex-shrink:0;
}

/* ==========================================================
   01 · 타이틀 화면
   ========================================================== */
.slide-title,.slide-end{
  justify-content:center; align-items:center; text-align:center;
  background:
    radial-gradient(circle at 50% 78%,rgba(59,93,201,.42) 0%,transparent 58%),
    linear-gradient(180deg,#10121f 0%,#1a1c2c 55%,#232640 100%);
}
.starfield{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,#f4f4f4 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 12%,#73eff7 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 34% 32%,#f4f4f4 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 26%,#ffcd75 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 40%,#f4f4f4 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 46%,#73eff7 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 8%,#f4f4f4 50%,transparent 51%);
  animation:twinkle 2.4s var(--step) infinite;
}
@keyframes twinkle{0%,49%{opacity:.85}50%,100%{opacity:.35}}
.title-inner,.end-inner{
  width:min(1080px,100%);
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.2vw,18px);
}
.title-eyebrow,.end-eyebrow{
  font-size:var(--fs-small);
  color:var(--cyan);
  font-style:italic;
  letter-spacing:.12em;
}
.title-hero{
  margin:0;
  font-size:var(--fs-hero);
  line-height:1.05;
  color:var(--gold);
  text-shadow:
    6px 6px 0 var(--red),
    12px 12px 0 rgba(0,0,0,.55);
  letter-spacing:.04em;
}
.title-sub{
  margin:6px 0 0;
  font-size:clamp(17px,1.9vw,32px);
  color:var(--paper);
  background:var(--red);
  border:var(--px) solid var(--night);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
  padding:8px 18px;
}
.title-hero-stage{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  margin-top:clamp(6px,1vw,14px);
}
.grass-line{
  width:min(560px,86vw);
  height:14px;
  margin-top:-2px;
  background:
    repeating-linear-gradient(90deg,var(--green) 0 8px,#2f9c55 8px 16px);
  border-top:4px solid #6bd88a;
  box-shadow:0 8px 0 rgba(0,0,0,.35);
}
.press-start{
  margin-top:clamp(10px,1.4vw,20px);
  font-size:clamp(15px,1.5vw,24px);
  color:var(--cyan);
  animation:blink 1.05s var(--step) infinite;
}
.title-meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px;
  margin-top:clamp(8px,1.2vw,18px);
  font-size:var(--fs-small);
  color:var(--steel);
}
.title-meta span{
  border:2px solid var(--slate);
  padding:5px 12px;
}

/* ==========================================================
   02 · 월드맵
   ========================================================== */
.map-title{
  margin:0 0 6px;
  font-size:clamp(26px,3.1vw,54px);
  color:var(--gold);
  text-shadow:0 5px 0 rgba(0,0,0,.45);
}
.map-lead{
  margin:0 0 clamp(16px,2vw,30px);
  font-size:var(--fs-body);
  color:var(--steel);
}
.map-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,22px);
  flex:1;
  align-content:center;
  min-height:0;
}
.map-tile{
  display:flex; flex-direction:column; gap:8px;
  text-decoration:none;
  background:var(--night2);
  border:var(--px) solid var(--steel);
  box-shadow:8px 8px 0 rgba(0,0,0,.45);
  padding:clamp(14px,1.5vw,24px);
  cursor:pointer;
  transition:background .12s var(--step),border-color .12s var(--step);
}
.map-tile:hover{background:var(--deep);border-color:var(--gold);}
.tile-num{
  font-size:clamp(20px,2.2vw,38px);
  color:var(--cyan);
}
.tile-name{
  font-size:clamp(16px,1.5vw,26px);
  color:var(--paper);
}
.tile-desc{
  font-size:var(--fs-small);
  color:var(--steel);
  line-height:1.6;
}
.tile-icon{
  width:clamp(44px,4vw,68px);
  height:auto;
  margin-top:auto;
  image-rendering:pixelated;
  align-self:flex-end;
}

/* ==========================================================
   03 / 05 / 08 · 디바이더
   ========================================================== */
.slide-divider{
  justify-content:center; align-items:center; text-align:center;
  background:linear-gradient(180deg,#1a1c2c 0%,#29366f 100%);
}
.divider-danger{background:linear-gradient(180deg,#1a1c2c 0%,#5d275d 100%);}
.divider-gold{background:linear-gradient(180deg,#1a1c2c 0%,#3a3320 100%);}
.divider-bgnum{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(200px,38vw,470px);
  line-height:1;
  color:rgba(244,244,244,.07);
  z-index:0;
  pointer-events:none;
}
/* 워터마크는 중앙 정렬 transform을 유지하고 투명도만 등장시킨다 */
.divider-bgnum.anim,
.slide.in-view .divider-bgnum.anim{transform:translate(-50%,-50%);}
.divider-eyebrow{
  font-size:var(--fs-small);
  font-style:italic;
  color:var(--cyan);
  letter-spacing:.14em;
  margin-bottom:10px;
}
.divider-title{
  margin:0 0 clamp(16px,2vw,30px);
  font-size:var(--fs-div);
  line-height:1.2;
  color:var(--gold);
  text-shadow:5px 5px 0 rgba(0,0,0,.5);
}
.divider-danger .divider-title{color:#ff9ecd;}
.divider-box,.end-box{
  width:min(760px,92%);
  text-align:left;
}
.sprite-slime{
  width:clamp(120px,13vw,208px);
  margin:0 auto clamp(14px,1.6vw,24px);
  animation:squash 1.2s var(--step) infinite;
}
@keyframes squash{0%,49%{transform:translateY(0) scaleY(1)}50%,100%{transform:translateY(4px) scaleY(.94)}}

/* ==========================================================
   04 · 아이템 카드
   ========================================================== */
.item-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,22px);
  margin-top:clamp(16px,2vw,30px);
}
.item-card{
  background:var(--night2);
  border:var(--px) solid var(--sky);
  box-shadow:8px 8px 0 rgba(0,0,0,.45);
  padding:clamp(14px,1.6vw,24px);
}
.item-label{
  font-size:clamp(14px,.9vw,16px);
  color:var(--cyan);
  margin-bottom:8px;
}
.item-name{
  font-size:clamp(17px,1.6vw,28px);
  color:var(--gold);
  margin-bottom:10px;
}
.item-desc{
  margin:0;
  font-size:var(--fs-small);
  line-height:1.75;
  color:var(--steel);
}

/* ==========================================================
   06 · 배틀
   ========================================================== */
.slide-battle{
  background:
    linear-gradient(180deg,#232640 0%,#1a1c2c 55%,#0f1120 100%);
}
.battle-field{
  position:relative;
  flex:1;
  min-height:clamp(180px,26vh,320px);
  border:var(--px) solid var(--slate);
  background:
    linear-gradient(180deg,rgba(59,93,201,.18) 0%,rgba(26,28,44,.6) 100%);
  margin-bottom:clamp(12px,1.4vw,20px);
  padding:clamp(12px,1.4vw,20px);
}
.foe-status{
  width:min(320px,52%);
  position:absolute; left:clamp(12px,1.4vw,20px); top:clamp(12px,1.4vw,20px);
}
.status-name{font-size:var(--fs-small);color:var(--gold);margin-bottom:8px;}
.hp-bar{
  height:14px;
  background:var(--night);
  border:2px solid var(--paper);
  overflow:hidden;
}
.hp-fill{
  height:100%;
  background:repeating-linear-gradient(90deg,var(--green) 0 6px,#2f9c55 6px 12px);
  transition:width .3s var(--step);
}
.hp-fill.mid{background:repeating-linear-gradient(90deg,var(--gold) 0 6px,#e0ab4d 6px 12px);}
.hp-fill.low{background:repeating-linear-gradient(90deg,var(--orange) 0 6px,var(--red) 6px 12px);}
.hp-text{font-size:clamp(14px,.85vw,16px);color:var(--cyan);margin-top:6px;text-align:right;}
.sprite-foe{
  position:absolute; right:clamp(20px,5vw,90px); top:clamp(10px,2vw,34px);
  width:clamp(96px,11vw,168px);
  animation:squash 1.2s var(--step) infinite;
}
.sprite-foe.defeated{opacity:.25;filter:grayscale(1);}
.sprite-me{
  position:absolute; left:clamp(20px,6vw,110px); bottom:clamp(8px,1vw,16px);
  width:clamp(84px,9vw,140px);
}
.battle-bottom{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:clamp(12px,1.4vw,20px);
  flex-shrink:0;
}
.battle-moves{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
#battleMsg{white-space:pre-line;}
.move{
  font-family:inherit;
  font-size:var(--fs-small);
  color:var(--night);
  background:var(--paper);
  border:var(--px) solid var(--night);
  box-shadow:5px 5px 0 rgba(0,0,0,.5);
  padding:12px 10px;
  cursor:pointer;
  transition:background .1s var(--step),color .1s var(--step);
}
.move:hover{background:var(--gold);}
.move:active{box-shadow:2px 2px 0 rgba(0,0,0,.5);}
.move-weak{background:var(--steel);}
.move-weak:hover{background:var(--orange);}

/* ==========================================================
   07 · 열쇠 획득
   ========================================================== */
.key-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(18px,2.4vw,44px);
  align-items:center;
  flex:1;
  min-height:0;
}
.key-list{
  list-style:none;
  margin:clamp(14px,1.8vw,26px) 0 0;
  padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.key-list li{
  font-size:var(--fs-body);
  color:var(--paper);
  background:rgba(59,93,201,.2);
  border-left:8px solid var(--gold);
  padding:10px 14px;
}
.key-list b{color:var(--gold);}
.key-visual{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.get-badge{
  font-size:clamp(14px,1.15vw,20px);
  color:var(--night);
  background:var(--gold);
  border:var(--px) solid var(--night);
  padding:7px 16px;
  box-shadow:5px 5px 0 rgba(0,0,0,.5);
}
.sprite-key{
  width:clamp(140px,16vw,260px);
  animation:bob 1.1s var(--step) infinite;
}
.sparkle{
  position:absolute;
  width:12px;height:12px;
  background:var(--cyan);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:blink 1.3s var(--step) infinite;
}
.sparkle.s1{top:24%;left:8%;}
.sparkle.s2{bottom:16%;right:10%;animation-delay:.5s;}

/* ==========================================================
   09 · 손흥민 (캐릭터 카드 + 차트)
   ========================================================== */
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(16px,2vw,36px);
  flex:1;
  min-height:0;
}
.hero-text{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);min-width:0;}
.char-top{display:flex;align-items:center;gap:16px;margin-bottom:12px;}
.sprite-player,.sprite-skater{width:clamp(72px,7vw,116px);flex-shrink:0;}
.char-name{font-size:clamp(20px,2vw,34px);color:var(--gold);}
.char-job{font-size:var(--fs-small);color:var(--cyan);margin-top:4px;}
.char-line{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.8;
  color:var(--paper);
}
.stat-line{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px;
  background:var(--night2);
  border:var(--px) solid var(--gold);
  padding:clamp(12px,1.3vw,20px);
  box-shadow:8px 8px 0 rgba(0,0,0,.45);
}
.stat-key{font-size:var(--fs-small);color:var(--steel);}
.stat-val{font-size:clamp(28px,3vw,54px);color:var(--gold);line-height:1;}
.stat-note{font-size:var(--fs-small);color:var(--paper);}
.chart-card{
  margin:0;
  display:flex; flex-direction:column;
  background:var(--night2);
  border:var(--px) solid var(--slate);
  box-shadow:8px 8px 0 rgba(0,0,0,.45);
  padding:clamp(12px,1.4vw,22px);
  min-height:0;
}
.chart-title{font-size:var(--fs-small);color:var(--cyan);margin-bottom:10px;}
.chart-box{position:relative;flex:1;min-height:180px;width:100%;}
.chart-src{font-size:clamp(14px,.8vw,15px);color:var(--steel);margin-top:10px;line-height:1.6;}

/* ==========================================================
   10 · 김연아
   ========================================================== */
.yuna-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(18px,2.4vw,44px);
  align-items:center;
  flex:1;
  min-height:0;
}
.yuna-text{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,26px);min-width:0;}
.mega-wrap{text-align:left;}
.mega-label{font-size:var(--fs-small);color:var(--cyan);margin-bottom:6px;}
.mega-number{
  font-size:clamp(44px,6vw,110px);
  line-height:1;
  color:var(--gold);
  text-shadow:5px 5px 0 rgba(0,0,0,.5);
}
.mega-note{font-size:var(--fs-small);color:var(--paper);margin-top:10px;line-height:1.7;}
.mega-note .src{color:var(--steel);}
.yuna-visual{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.sprite-skater{width:clamp(140px,15vw,240px);animation:bob 1.4s var(--step) infinite;}
.ice-line{
  width:min(320px,80%);
  height:12px;
  margin-top:8px;
  background:repeating-linear-gradient(90deg,var(--cyan) 0 8px,#4fd2dc 8px 16px);
  box-shadow:0 8px 0 rgba(0,0,0,.3);
}

/* ==========================================================
   11 · 퀘스트
   ========================================================== */
.quest-list{
  display:flex; flex-direction:column; gap:clamp(9px,1vw,14px);
  flex:1;
  min-height:0;
  justify-content:center;
}
.quest{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  font-family:inherit;
  font-size:var(--fs-body);
  color:var(--paper);
  background:var(--night2);
  border:var(--px) solid var(--steel);
  box-shadow:6px 6px 0 rgba(0,0,0,.45);
  padding:clamp(11px,1.2vw,18px) clamp(13px,1.4vw,22px);
  cursor:pointer;
  transition:background .1s var(--step),border-color .1s var(--step);
}
.quest:hover{border-color:var(--gold);}
.quest .q-box{color:var(--steel);font-size:clamp(18px,1.6vw,26px);}
.quest .q-body b{color:var(--gold);margin-right:8px;}
.quest .q-xp{color:var(--cyan);font-size:var(--fs-small);}
.quest.done{background:var(--teal);border-color:var(--green);}
.quest.done .q-box{color:var(--paper);}
.quest.done .q-body{text-decoration:line-through;color:var(--paper);}
.xp-panel{
  margin-top:clamp(12px,1.4vw,20px);
  background:var(--night2);
  border:var(--px) solid var(--paper);
  box-shadow:8px 8px 0 rgba(0,0,0,.45);
  padding:clamp(12px,1.3vw,20px);
  flex-shrink:0;
}
.xp-top{display:flex;justify-content:space-between;font-size:var(--fs-small);color:var(--gold);margin-bottom:8px;}
.xp-bar{height:16px;background:var(--night);border:2px solid var(--paper);overflow:hidden;}
.xp-fill{
  height:100%; width:0;
  background:repeating-linear-gradient(90deg,var(--cyan) 0 6px,var(--sky) 6px 12px);
  transition:width .3s var(--step);
}
.xp-msg{font-size:var(--fs-small);color:var(--steel);margin-top:8px;}

/* ==========================================================
   12 · 엔딩
   ========================================================== */
.end-title{
  margin:0;
  font-size:clamp(28px,4vw,72px);
  line-height:1.25;
  color:var(--gold);
  text-shadow:5px 5px 0 var(--red),10px 10px 0 rgba(0,0,0,.5);
}
.end-refs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
  margin-top:clamp(10px,1.2vw,18px);
  font-size:clamp(14px,.85vw,15px);
  color:var(--steel);
}

/* ==========================================================
   본문 크롬
   ========================================================== */
.aura-follower{
  position:fixed;
  width:180px;height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(115,239,247,.24) 0%,transparent 70%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:60;
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
}
.progress-bar{
  position:fixed; top:0; left:0; right:0;
  height:8px;
  background:rgba(26,28,44,.9);
  border-bottom:2px solid var(--night);
  z-index:70;
}
.progress-bar .progress{
  height:100%; width:0;
  background:repeating-linear-gradient(90deg,var(--gold) 0 8px,var(--orange) 8px 16px);
  transition:width .3s var(--step);
}
.slide-indicator{
  position:fixed;
  right:clamp(12px,1.6vw,26px); top:clamp(18px,2vw,30px);
  font-size:clamp(12px,.9vw,16px);
  color:var(--night);
  background:var(--gold);
  border:3px solid var(--night);
  padding:5px 11px;
  z-index:70;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
}
.slide-indicator .current{color:var(--red);}

/* ==========================================================
   태블릿 (≤1024px) — 밀도만 완화
   ========================================================== */
@media (max-width:1024px){
  .map-grid{grid-template-columns:repeat(2,1fr);}
  .battle-bottom{grid-template-columns:1fr;}
  .battle-moves{grid-template-columns:repeat(4,1fr);}
}

/* ==========================================================
   폰 (≤820px) — 단일열 리플로우
   ========================================================== */
@media (max-width:820px){
  .slide{
    height:auto;
    min-height:100vh;
    padding:22px 18px 66px;
  }
  .slide-footer{left:18px;right:18px;bottom:16px;}
  .map-grid,
  .item-row,
  .key-grid,
  .hero-grid,
  .yuna-grid,
  .battle-bottom{
    grid-template-columns:1fr;
    gap:14px;
  }
  .battle-moves{grid-template-columns:1fr 1fr;gap:10px;}
  .map-grid{align-content:start;}
  .quest{grid-template-columns:auto 1fr;row-gap:6px;}
  .quest .q-xp{grid-column:2;justify-self:start;}
  .battle-field{min-height:260px;}
  .foe-status{position:static;width:100%;margin-bottom:12px;}
  .sprite-foe{position:static;margin:0 auto;width:120px;}
  .sprite-me{position:static;margin:10px auto 0;width:88px;}
  .chart-box{min-height:220px;}
  .key-visual,.yuna-visual{margin-top:6px;}
  .divider-bgnum{font-size:clamp(160px,46vw,300px);}
  .title-hero{text-shadow:4px 4px 0 var(--red),8px 8px 0 rgba(0,0,0,.55);}
  .slide-indicator{top:14px;right:12px;}
}

/* 가로로 아주 낮은 화면 */
@media (max-height:520px) and (orientation:landscape){
  .slide{height:auto;min-height:100vh;}
}

/* ==========================================================
   인쇄 / 내보내기
   ========================================================== */
@media print{
  @page{size:1920px 1080px;margin:0;}
  html,body{background:#1a1c2c;}
  .presentation{height:auto;overflow:visible;scroll-snap-type:none;}
  .slide{
    width:1920px!important;
    height:1080px!important;
    overflow:hidden;
    page-break-after:always;
    break-after:page;
  }
  .anim{opacity:1!important;transform:none!important;transition:none!important;}
  .divider-bgnum{transform:translate(-50%,-50%)!important;}
  .aura-follower,.progress-bar,.slide-indicator,#three-canvas-container{display:none!important;}
  .blink-arrow,.press-start,.starfield,.sprite-hero,.sprite-hero-end,.sprite-slime,.sprite-foe,.sprite-key,.sprite-skater,.sparkle{animation:none!important;opacity:1!important;}
  *{print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important;}
}