/* ---------- 풀페이지 래퍼 ---------- */
#wrap{
  height:100vh;height:100dvh;
  overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;      /* 휠 한 번 = 섹션 하나 */
  overscroll-behavior:contain;
  scrollbar-width:none;outline:none;
}
#wrap::-webkit-scrollbar{display:none}
.sec{
  position:relative;height:100vh;height:100dvh;overflow:hidden;
  background:var(--bg);
  scroll-snap-align:start;
  scroll-snap-stop:always;           /* 섹션을 건너뛰지 않음 */
}
/* 필름 그레인 */
.sec::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.blob {position:absolute; pointer-events:none} /* border-radius:50%;filter:blur(70px); */


/* ---------- 헤더 (두 번째 화면부터) ---------- */
#header{
  position:fixed;top:1rem;left:1rem;right:1rem;height:var(--header-h);z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5.6rem;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 1.4rem rgba(0,0,0,.08);
  opacity:0;transform:translateY(-120%);pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.65,.05,.25,1);
}
body.has-header #header{opacity:1;transform:none;pointer-events:auto}
.logo{font-family:'Playball',cursive;font-size:3rem;color:var(--blue);line-height:1}
#header nav{display:flex;gap:2.4rem;font:500 1rem 'Roboto',sans-serif;color:#666}
#header nav a{transition:color .3s}
#header nav a:hover,#header nav a.on{color:var(--blue)} 
#header nav a.on{font-weight:700}

/* ---------- 1. Main ---------- */
#main { background: var(--bg-white); }
#main .blob.b1 {right :-50%; top: -98%; width: 1591px; height: 1591px; opacity: 1; background: url('../image/Ellipse.jpg') no-repeat;}
/* {width:42rem;height:26rem;right:-8rem;top:-9rem;background:#1e88e5;opacity:.95} */
#main .blob.b2 { left: -20%; bottom: -52%; opacity:1; width: 995px; height: 995px; background: url("../image/light_vector_1.png");}
#main .blob.b3 { left: 5%; bottom: -50%; opacity:1; width: 734px; height: 734px; background: url("../image/light_vector_2.png");}
.hero{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  display:flex;align-items:flex-end;z-index:2;
}
.hero .p{ font-family: var(--font-family-imperial),cursive; font-size:19rem; line-height:.62;color:var(--blue); margin-right:-.6rem; transform:translateY(1.2rem); -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: var(--blue, #2C67FA); z-index: 1; left: -33%;}
.hero .rest{position:relative;font:300 12.4rem/1 'Lexend',sans-serif;letter-spacing:-.02em;color:#1e1e1e}
.hero .rest small{position:absolute;left: 4.8rem; top: -1.4rem; font: 500 2.4rem 'Lexend',sans-serif; letter-spacing: -0.15rem}
.hero .word{display:flex;align-items:flex-end}
.gnb{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  display:flex;gap:4.6rem;z-index:2;font:500 1.3rem 'Roboto',sans-serif;
}
.gnb a{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;padding-top:1rem;min-width:6rem;color:#222}
.gnb a::before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:#888;transition:.3s}
.gnb a.on{color:var(--cyan);font-weight:700}
.gnb a.on::before{width:2.4rem;height:.15rem;border-radius:0;background:var(--cyan);box-shadow:0 0 1.6rem 1rem rgba(10,165,232,.45)}
.gnb a:not(.on):hover{color:var(--blue)}

/* ---------- 2. About / Activities ---------- */
#about .blob.b1 { left: -20%; top: -43%; opacity:1; width: 995px; height: 995px; background: url("../image/light_vector_1.png");}
#about .blob.b2 { left: 5%; top: -20%; opacity:1; width: 734px; height: 734px; background: url("../image/light_vector_2.png");}
#about .wrap2{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:45.6% 1fr;padding-top:var(--header-h);
}
.intro{align-self:center;padding:8rem 0 0 5.2rem}
.intro h2{font-weight:300;font-size:3.35rem;line-height:1.5;color:#222;letter-spacing:-.02em}
.intro h2 b{display:block;font-weight:700;color:var(--blue)}
.intro p{margin-top:3.6rem;font-size:1.6rem;line-height:1.5;color:#777;font-weight:300;letter-spacing:-.02em;max-width:31rem}
.intro p+p{margin-top:1rem;font-size:1.5rem;max-width:30rem}
.info{padding:8rem 5rem 0 0;align-self:start}
.row{display:grid;grid-template-columns:9.6rem 1fr}
.label{font:700 1.7rem 'Pretendard',sans-serif;color:var(--blue);letter-spacing:-.02em}
.label span{display:block;margin-top:.6rem;font:400 1.05rem 'Pretendard',sans-serif;color:#777}
.top{display:grid;grid-template-columns:1fr 1fr;margin-bottom:5.2rem}
.top .row{grid-template-columns:9.6rem 1fr}
.top .row+.row{grid-template-columns:9.7rem 1fr;padding-left:1.4rem}
.card b{display:block;font-size:1rem;font-weight:700;color:#222}
.card b em{font-style:normal;margin-left:1.8rem}
.card p,.card small{display:block;font-size:.95rem;color:#666;line-height:1.85}
.acts{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;row-gap:1.8rem}
.act b{display:block;font-size:1.15rem;font-weight:700;color:#222;margin-bottom:.5rem}
.act span{display:block;font:500 1.1rem 'Roboto','Pretendard',sans-serif;color:#777;margin-bottom:.25rem}
.act small{display:block;font:400 .82rem 'Roboto',sans-serif;color:#888}

/* ---------- 3. Work experience ---------- */
.center-sec{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:var(--header-h)}
.center-sec>*{position:relative;z-index:2}
.title{position:relative;font:600 3.4rem 'Roboto',sans-serif;letter-spacing:-.03em;color:#111}
.title::before{content:"";position:absolute;left:-1.6rem;top:-1.2rem;width:3rem;height:3rem;border-radius:50%;background:#3a9bf0;opacity:.55;filter:blur(8px)}
#work .blob.b1{width:26rem;height:30rem;left:6%;top:40%;background:#7bbcf2;opacity:.45}
#work .blob.b2{width:24rem;height:28rem;right:4%;top:30%;background:#9cc9f5;opacity:.55}
.desc{margin-top:1.4rem;font-size:.92rem;color:#777;letter-spacing:-.01em}
.device{
  margin-top:2.6rem;width:51vw;max-width:62rem;aspect-ratio:1.5/1;max-height:60vh;
  background:#fff;border-radius:2rem;padding:.55rem;
  box-shadow:0 0 0 .1rem #e8eef7,0 0 2.4rem rgba(43,100,245,.18);
}
.slides{position:relative;width:100%;height:100%;border-radius:1.6rem;overflow:hidden;background:#222}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s}
.slide.on{opacity:1;visibility:visible}
.slide .shot{position:absolute;inset:0;background:#3a4a5a center/cover no-repeat}
.slide .info-p{
  position:absolute;right:0;top:0;bottom:0;width:50%;padding:2rem 2.2rem;
  background:rgba(30,30,30,.86);color:#fff;
  display:flex;flex-direction:column;
}
.slide h3{font-size:1.5rem;font-weight:700;margin-bottom:1.6rem}
.slide .role{color:#1fb3f2;font-weight:500;font-size:1.05rem;margin-bottom:.7rem}
.slide .pct{font-size:.98rem;line-height:1.9}
.slide .pct b{margin-left:1rem}
.slide .sk{margin-top:1.5rem;color:#1fb3f2;font-size:1.05rem;font-weight:500}
.slide .sk+p{margin-top:.4rem;font-size:.98rem;line-height:1.6}
.btns{margin-top:auto;display:flex;gap:.8rem;padding-bottom:.4rem}
.btns a{padding:.75rem 1.1rem;border-radius:.3rem;font-size:.82rem;background:#2b6cf5;color:#fff;transition:filter .3s}
.btns a+a{background:#12bcd4}
.btns a:hover{filter:brightness(1.12)}
.dots{display:flex;gap:.6rem;margin-top:2.2rem}
.dots button{width:.42rem;height:.42rem;border-radius:50%;border:0;background:#cfd8e6;cursor:pointer;padding:0}
.dots button.on{background:#3a9bf0}

/* ---------- 4. Figma Assets ---------- */
#assets .blob.b1{width:24rem;height:20rem;left:-6rem;bottom:-8rem;background:#b7dcf2;opacity:.6}
.embeds{margin-top:6.4rem;display:flex;gap:1.9rem}
.embed{
  width:36.6rem;height:25rem;border-radius:1.8rem;padding:.55rem;background:#fff;
  box-shadow:0 0 0 .1rem #eef1f6,0 0 1.8rem rgba(0,0,0,.06);
}
.embed>div,.embed iframe{width:100%;height:100%;border:0;border-radius:1.4rem;background:#1e1e1e;display:block}

/* ---------- 모바일/태블릿: 일반 스크롤 ---------- */
@media (max-width:900px){
  html{font-size:14px}
  body{overflow:auto;height:auto}
  #wrap{height:auto;overflow:visible;scroll-snap-type:none}
  .sec{scroll-snap-align:none}
  .sec{height:auto;min-height:100vh}
  #header{padding:0 1.6rem}
  .logo{font-size:2.4rem}
  #header nav{gap:1.2rem;font-size:.85rem}
  .hero .p{font-size:9rem}.hero .rest{font-size:5.6rem}.hero .rest small{font-size:1.3rem;top:-1.8rem}
  .gnb{gap:1.4rem;font-size:.9rem;bottom:8%}
  #about .wrap2{display:block;padding-bottom:4rem}
  .intro{padding:7rem 1.6rem 2rem}
  .info{padding:2rem 1.6rem}
  .top{grid-template-columns:1fr;gap:2rem}
  .top .row+.row{padding-left:0}
  .acts{grid-template-columns:1fr}
  .center-sec{padding:8rem 1rem 4rem}
  .device{width:92vw;max-height:none;aspect-ratio:auto;min-height:32rem}
  .slide .info-p{width:100%}
  .embeds{flex-direction:column}
  .embed{width:88vw;height:60vw}
}
@media (prefers-reduced-motion:reduce){
  #header,.slide{transition-duration:.01s}
}