@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root{
  --bg:#000;
  --text:#f5f5f3;
  --muted:#a0a0a0;
  --accent:#51e0c5;
  --stage:#eef3f4;
  --design-w:1536;
  --design-h:864;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);overflow:hidden}
body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
button{font:inherit;color:inherit}

.viewport{
  position:relative;
  width:100vw;
  height:100vh;
  min-width:960px;
  min-height:540px;
  background:#000;
  overflow:hidden;
}

.ko{letter-spacing:-0.02em;line-height:1.5}
.latin{letter-spacing:0;line-height:1.5}

.info-panel{
  position:absolute;
  inset:0 auto 0 0;
  width:24.15vw;
  height:100vh;
  background:#000;
  z-index:5;
}

.brand-block{position:absolute;left:3.38vw;top:7.64vh}
.wordmark{font-weight:700;font-size:3.12vw;letter-spacing:0;line-height:1}
.submark{margin-top:1.55vh;font-size:1.07vw;font-weight:500;color:#a7a7a7}

.project-copy{position:absolute;left:3.38vw;top:37.27vh;width:18.5vw}
.eyebrow{font-size:1.02vw;font-weight:700;color:var(--accent);margin-bottom:3.2vh}
.project-title{margin:0;font-size:2.12vw;font-weight:400;color:#f2f2f2}
.meta{margin-top:5.0vh;font-size:1.29vw;color:#9f9f9f}
.date{margin-top:1.2vh;font-size:1.29vw;color:#9f9f9f}

.progress-wrap{position:absolute;left:3.78vw;bottom:8.35vh;display:flex;align-items:center;justify-content:center;gap:2.85vw}
.progress-label{display:flex;align-items:baseline;gap:.45vw;white-space:nowrap}
.progress-label strong{font-size:1.78vw;color:var(--accent);font-weight:700}
.progress-label span{font-size:1.32vw;color:#9a9a9a;font-weight:500}
.progress-line{width:10.05vw;height:2px;background:#4a4d4b;position:relative}
.progress-line span{position:absolute;left:0;top:0;width:28%;height:2px;background:var(--accent)}

.stage-shell{
  position:absolute;
  left:24.15vw;
  top:0;
  width:75.85vw;
  height:82.6vh;
  z-index:1;
}

.stage-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:var(--stage);
  border-top-left-radius:7.8vw;
  border-bottom-left-radius:7.8vw;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.stage-placeholder{
  position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(55,74,70,.22);font-size:1.25vw;font-weight:600;letter-spacing:.08em
}
.stage-media.has-image .stage-placeholder{display:none}

.year-indicator{
  position:absolute;
  right:2.25vw;
  top:13.7vh;
  width:6.55vw;
  height:56.5vh;
  border-radius:999px;
  padding:3.7vh 0 2.7vh;
  background:rgba(7,10,9,.86);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 6px 18px rgba(0,0,0,.17);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  z-index:20;
}
.indicator-logo{font-size:2.05vw;font-weight:800;text-align:center;line-height:1;color:white;margin-bottom:4.6vh}
.year-rail{position:relative;height:37vh}
.year-rail:before{display:none}
.year-item{
  position:absolute;left:0;width:100%;height:7.5vh;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.72vh;padding:0;color:#e2e2e2;text-align:center;overflow:visible
}
.year-item:nth-child(1){top:0}
.year-item:nth-child(2){top:8.1vh}
.year-item:nth-child(3){top:16.3vh}
.year-item:nth-child(4){top:24.4vh}
.year-item:nth-child(5){top:32.2vh}
.year-item::after{display:none}
.year-item i{width:.68vw;height:.68vw;border-radius:50%;background:#424443;margin:0;position:relative;z-index:2;flex:none}
.year-item span{font-size:1.14vw;font-weight:500;white-space:nowrap;display:block;text-align:center}
.year-item.earlier span{font-size:.66vw;font-weight:700;line-height:1.2;margin-top:0;display:block;text-align:center}
.year-item.active i{background:var(--accent);box-shadow:0 0 0 4px rgba(81,224,197,.11),0 0 13px rgba(81,224,197,.65)}
.year-item.active span{color:var(--accent);font-weight:700}
.year-item:hover span{color:white}

.thumb-rail{
  position:absolute;
  left:24.7vw;
  bottom:4.05vh;
  width:51.8vw;
  height:10.5vh;
  z-index:15;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.7vw;
}
.thumb{
  position:relative;
  width:4.05vw;
  height:8.4vh;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease;
}
.thumb-media{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:3.0vw;height:3.0vw;aspect-ratio:1/1;border-radius:50%;
  background:#d9dcda;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease;
}
.thumb:after{
  content:"";
  position:absolute;
  left:50%;
  top:5.45vh;
  transform:translateX(-50%);
  width:0;
  height:0;
}
.thumb:hover{transform:translateY(-4px)}
.thumb:hover .thumb-media{transform:translateX(-50%) scale(1.08);box-shadow:0 7px 20px rgba(0,0,0,.28)}
.thumb.active .thumb-media{border-color:var(--accent);box-shadow:0 0 0 2px rgba(81,224,197,.12),0 0 14px rgba(81,224,197,.5),0 7px 18px rgba(0,0,0,.25)}
.thumb.active:after{color:var(--accent)}

@media (max-aspect-ratio: 16/9){
  .viewport{width:177.7778vh;height:100vh;left:50%;transform:translateX(-50%)}
}
@media (min-aspect-ratio: 16/9){
  .viewport{width:100vw;height:56.25vw;top:50%;transform:translateY(-50%)}
}
.home-link{position:absolute;left:3.4vw;top:2.6vh;z-index:30;font-size:.72vw;color:#747774;letter-spacing:.05em;transition:color .25s ease}.home-link:hover{color:var(--accent)}