/* 실제 Bold 자형을 사용해 픽셀 획을 뭉개지 않고 제목을 강조합니다. */
@font-face {
  font-family: Galmuri;
  src: url('/assets/Galmuri11-Bold-8b2af819fb30.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
}
h1,h2,h3 { font-weight:700; letter-spacing:-.055em; }
h1 { line-height:1.4; }
.button,.brand { font-weight:700; }
.section { --scene-progress:.5; --scene-entry:1; }
.enhanced [data-focus] {
  opacity:calc(.62 + var(--focus,1)*.38);
  transform:translate3d(0,calc((1 - var(--entry,1))*16px),0);
}
.enhanced h1[data-focus],.enhanced h2[data-focus] {
  opacity:calc(.85 + var(--focus,1)*.15);
}
.word {
  display:inline-block;
  transform:translateY(calc((1 - var(--word-opacity,1))*7px));
}
.scene-art {
  transform:translate3d(0,calc((.5 - var(--scene-progress,.5))*36px),0);
}
.hero-art.scene-art { transform:translate3d(0,calc(var(--hero-shift,0)*-28px),0); }
.section.is-current .eyebrow { color:var(--red); }
.service-panorama {
  margin:0 auto 30px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f7f3e8;
}
.service-panorama>img {
  width:100%;
  max-height:350px;
  aspect-ratio:3/1;
  object-fit:cover;
  object-position:center 58%;
  image-rendering:pixelated;
  transform:scale(1.055) translateX(calc((var(--scene-progress,.5) - .5)*-20px));
}
.service-panorama figcaption {
  position:relative;
  margin:0;
  padding:14px 22px;
  background:var(--paper);
  font:11px/1.8 var(--pixel);
  border-top:1px solid var(--line);
}
.scene-spark {
  position:absolute;
  font:30px var(--pixel);
  color:#fff5be;
  text-shadow:2px 2px #a77025;
  transform:translateY(calc(var(--scene-progress,.5)*-60px)) rotate(calc(var(--scene-progress,.5)*90deg));
  pointer-events:none;
}
.spark-one { left:23%; top:38%; }
.spark-two { right:22%; top:56%; font-size:20px; }
.connection-art {
  margin:30px 0 0;
  max-width:470px;
  position:relative;
  border:1px solid #c5c8b4;
  background:#faf6ea;
  box-shadow:5px 5px 0 #d1d3bd;
}
.connection-art>img {
  width:100%;
  max-height:260px;
  aspect-ratio:1.7;
  object-fit:cover;
  image-rendering:pixelated;
}
.connection-art figcaption {
  padding:12px 16px;
  font:10px/1.8 var(--pixel);
  background:var(--paper);
  border-top:1px solid var(--line);
}
.connection-pixels {
  position:absolute;
  display:flex;
  gap:12px;
  top:25%; left:24%;
  transform:translate(calc(var(--scene-progress,.5)*40px),calc(var(--scene-progress,.5)*-18px));
}
.connection-pixels i {
  height:7px; width:7px;
  background:#f8d66b;
  border:1px solid #af7737;
  box-shadow:2px 2px 0 #fff8b1;
}
.connection-pixels i:nth-child(even) { transform:translateY(-8px); }
.usage.scene-art { position:relative; }
.usage .usage-hamster {
  position:absolute;
  width:80px; height:80px;
  object-fit:contain;
  right:10%; top:-47px;
  z-index:2;
  transform:translateX(calc((var(--scene-progress,.5) - .5)*65px)) rotate(calc((var(--scene-progress,.5) - .5)*14deg));
  pointer-events:none;
}
.query-links a {
  transform:translateY(calc((1 - var(--scene-entry,1))*16px));
  transition:background .15s,padding .15s;
}
.query-links a:nth-child(2) { transform:translateY(calc((1 - var(--scene-entry,1))*25px)); }
.query-links a:nth-child(3) { transform:translateY(calc((1 - var(--scene-entry,1))*35px)); }
.service-row .pixel-icon {
  transform:translateY(calc((.5 - var(--scene-progress,.5))*16px));
}
@media(max-width:700px) {
  h1 { font-size:40px; }
  h2 { font-size:29px; }
  .service-panorama { margin-bottom:18px; }
  .service-panorama>img { aspect-ratio:1.8; max-height:230px; }
  .service-panorama figcaption { padding:12px; font-size:9px; }
  .connection-art { margin-top:25px; max-width:none; }
  .connection-art>img { max-height:230px; }
  .connection-art figcaption { font-size:9px; }
  .scene-spark { font-size:23px; }
  .usage .usage-hamster { width:60px; height:60px; top:-35px; }
  .scene-art { transform:translate3d(0,calc((.5 - var(--scene-progress,.5))*22px),0); }
}