/* ====================================================
   i.LAB MEDIA  —  Global CSS
   Tone: Black base · Purple + Mint accent
   Direction: Minimal, bold, image-first
   ==================================================== */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Inter','Noto Sans KR',sans-serif;
  background:#080808;
  color:#fff;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}

/* ── TOKENS ── */
:root{
  --bg:       #080808;
  --bg2:      #0d0d0d;
  --bg3:      #111111;
  --line:     rgba(255,255,255,.08);
  --white:    #ffffff;
  --w60:      rgba(255,255,255,.6);
  --w30:      rgba(255,255,255,.3);
  --w10:      rgba(255,255,255,.07);
  --purple:   #8b5cf6;
  --purple2:  #a78bfa;
  --mint:     #2dd4bf;
  --glow-p:   rgba(139,92,246,.35);
  --glow-m:   rgba(45,212,191,.2);

  --en:'Inter',sans-serif;
  --ko:'Noto Sans KR',sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --easeOut:cubic-bezier(.16,1,.3,1);
  --pad:clamp(24px,5vw,80px);
  --max:1320px;
}

/* ── UTIL ── */
.sec-label{
  font-family:var(--en);
  font-size:10px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--purple2);
}
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .9s var(--easeOut),transform .9s var(--easeOut);
}
.reveal.vis{opacity:1;transform:none}

/* ── BUTTONS ── */
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 32px;
  border:1.5px solid var(--w30);
  color:var(--white);
  font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.06em;
  border-radius:2px;
  transition:border-color .25s,background .25s,transform .25s;
}
.btn-ghost:hover{border-color:var(--white);background:var(--w10);transform:translateY(-2px)}

.btn-pill{
  display:inline-flex;align-items:center;
  padding:13px 32px;
  background:var(--purple);
  color:#fff;
  font-family:var(--ko);font-size:14px;font-weight:700;
  border-radius:100px;
  transition:background .25s,transform .25s,box-shadow .25s;
}
.btn-pill:hover{background:var(--purple2);transform:translateY(-2px);box-shadow:0 12px 32px var(--glow-p)}

/* 히어로 카카오 둥근 아이콘 버튼 */
.btn-kakao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  background:#FEE500;
  color:#191919;
  border-radius:50%;
  flex-shrink:0;
  transition:transform .2s,box-shadow .25s,background .2s;
  box-shadow:0 4px 16px rgba(254,229,0,.25);
}
.btn-kakao:hover{
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 8px 28px rgba(254,229,0,.45);
  background:#ffe000;
}


/* ====================================================
   HEADER
   ==================================================== */
#hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;
  padding:0 var(--pad);
  height:64px;
  transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
#hdr.solid{
  background:rgba(8,8,8,.9);
  backdrop-filter:blur(20px);
  border-color:var(--line);
}

.logo img{height:26px;width:auto;object-fit:contain}

.gnb{
  display:flex;gap:36px;
  margin-left:auto;
  margin-right:36px;
}
.gnb a{
  font-family:var(--en);font-size:13px;font-weight:500;letter-spacing:.05em;
  color:var(--w60);
  transition:color .2s;
}
.gnb a:hover{color:#fff}

.hdr-cta{
  font-family:var(--ko);font-size:13px;font-weight:700;
  padding:9px 22px;
  border:1.5px solid var(--purple);
  color:var(--purple2);
  border-radius:100px;
  transition:background .25s,color .25s;
}
.hdr-cta:hover{background:var(--purple);color:#fff}

/* 버거 */
.burger{
  display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto;
}
.burger span{display:block;width:22px;height:1.5px;background:#fff;transition:all .3s}

.mob-menu{
  display:none;flex-direction:column;
  position:fixed;top:64px;left:0;right:0;z-index:800;
  background:#080808;border-bottom:1px solid var(--line);
  padding:16px var(--pad) 28px;
}
.mob-menu.open{display:flex}
.mob-menu a{
  padding:14px 0;
  font-size:20px;font-weight:600;
  color:var(--w60);
  border-bottom:1px solid var(--line);
  font-family:var(--en);
  transition:color .2s;
}
.mob-menu a:hover{color:#fff}


/* ====================================================
   01. HERO
   ==================================================== */
.hero{
  position:relative;
  height:100svh;min-height:640px;
  overflow:hidden;
  display:flex;align-items:flex-end;
}

/* 배경 영상 + 폴백 */
.hero-bg{position:absolute;inset:0;overflow:hidden}

/* MP4 배경 영상 */
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

/* 폴백 이미지 (영상 로딩 전) */
.hero-fallback{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  z-index:-1;
  opacity:1;
}

/* 기존 슬라이드 */
.slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 1.6s ease;
}
.slide.on{opacity:1}

/* 그라디언트 딤 */
.hero-dim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top, rgba(8,8,8,.85) 0%, rgba(8,8,8,.1) 55%, rgba(8,8,8,.4) 100%),
    linear-gradient(135deg, var(--glow-p) 0%, transparent 60%);
}

/* 텍스트 */
.hero-copy{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad) 96px;
}
.hero-copy h1{
  font-family:var(--ko);
  font-size:clamp(40px,6vw,88px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.025em;
  margin-bottom:20px;
  animation:fadeUp .9s .1s var(--easeOut) both;
}
.hero-copy h1 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--purple2),var(--mint));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-copy p{
  font-family:var(--en);
  font-size:clamp(12px,1.3vw,15px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--w30);
  margin-bottom:40px;
  animation:fadeUp .9s .3s var(--easeOut) both;
}
.hero-actions{
  display:flex;gap:14px;flex-wrap:wrap;
  animation:fadeUp .9s .45s var(--easeOut) both;
}

/* 도트 */
.dots{
  position:absolute;bottom:40px;right:var(--pad);z-index:3;
  display:flex;flex-direction:column;gap:8px;
}
.dot{
  width:2px;height:20px;background:var(--w30);cursor:pointer;
  transition:background .3s,height .3s;border-radius:2px;
}
.dot.on{background:var(--purple2);height:36px}


/* ====================================================
   02. ABOUT — WE ARE / SLOGAN / VISION
   ==================================================== */
.about{
  padding:130px var(--pad) 110px;
  background:var(--bg);
}
.ab-inner{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.ab-tag{
  font-family:var(--en);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--w30);
  margin-bottom:56px;
}

.ab-block{
  width:100%;
  margin-bottom:64px;
}
.ab-block:last-child{margin-bottom:0}

.ab-center{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.ab-label{
  display:block;
  font-family:var(--en);
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:16px;
}

.ab-title{
  font-family:var(--en);
  font-size:clamp(36px,5.5vw,80px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  color:#fff;
  margin-bottom:16px;
}
.ab-title em{
  font-style:normal;
  background:linear-gradient(120deg,var(--purple2),var(--mint));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.ab-vision{
  font-family:var(--en);
  font-size:clamp(22px,3.8vw,58px);
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.015em;
  color:var(--w60);
  margin-bottom:16px;
}
.ab-vision strong{
  font-weight:700;
  color:#fff;
}
.ab-vision em{
  font-style:normal;
  background:linear-gradient(120deg,var(--purple2),var(--mint));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.ab-desc{
  font-family:var(--ko);
  font-size:clamp(13px,1.3vw,16px);
  color:var(--w30);
  line-height:1.8;
  letter-spacing:.01em;
}


/* ====================================================
   FULL BLEED IMAGE
   ==================================================== */
.full-bleed{
  position:relative;overflow:hidden;
  height:clamp(360px,60vw,760px);
  background:#000;
}
.full-bleed img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 8s ease;
  filter:brightness(.75);
}
.full-bleed:hover img{transform:scale(1.04)}
.fb-cap{
  position:absolute;bottom:24px;right:var(--pad);
  font-family:var(--en);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--w30);
}

/* ── 영상 교체 배지 공통 ── */
@keyframes vbPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.5)}
  60%{box-shadow:0 0 0 14px rgba(139,92,246,0)}
}

.video-badge{
  position:absolute;
  top:50%;
  right:clamp(32px,5vw,80px);
  transform:translateY(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  pointer-events:none;
}
.video-badge .vb-icon{
  width:72px;height:72px;
  border-radius:50%;
  border:2px solid rgba(139,92,246,.7);
  background:rgba(10,10,20,.55);
  backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 0 24px rgba(139,92,246,.3);
  animation:vbPulse 2.8s ease infinite;
}
.video-badge span{
  font-family:var(--en);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  text-align:center;
  white-space:nowrap;
  background:rgba(139,92,246,.25);
  backdrop-filter:blur(8px);
  padding:6px 16px;
  border-radius:100px;
  border:1px solid rgba(139,92,246,.4);
}

.fb-video-badge{
  position:absolute;
  bottom:48px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  pointer-events:none;
  background:rgba(10,10,20,.55);
  backdrop-filter:blur(14px);
  padding:14px 28px 14px 18px;
  border-radius:100px;
  border:1px solid rgba(139,92,246,.4);
  box-shadow:0 0 30px rgba(139,92,246,.2);
}
.fb-video-badge .vb-icon{
  width:38px;height:38px;
  border-radius:50%;
  border:1.5px solid rgba(139,92,246,.6);
  background:rgba(139,92,246,.25);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  flex-shrink:0;
  animation:vbPulse 2.8s ease infinite;
}
.fb-video-badge span{
  font-family:var(--en);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
  white-space:nowrap;
}


/* ====================================================
   03. SERVICES — 이미지+텍스트 hover 카드
   ==================================================== */
.services{
  background:var(--bg);
  padding:0;
}
.sv-top{
  padding:80px var(--pad) 48px;
  max-width:var(--max);
  margin:0 auto;
}

.sv-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:2px;
}
.sv-grid-5{
  grid-template-columns:repeat(5,1fr);
}

.sv-card{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/5;
  cursor:pointer;
  background:#111;
}

.sv-img{
  position:absolute;inset:0;
}
.sv-img img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.5) saturate(.7);
  transition:transform .8s var(--ease), filter .6s;
}
.sv-card:hover .sv-img img{
  transform:scale(1.08);
  filter:brightness(.35) saturate(.5);
}

.sv-dim{
  position:absolute;inset:0;
  background:linear-gradient(
    to top,
    rgba(8,8,8,.85) 0%,
    rgba(8,8,8,.15) 60%,
    transparent 100%
  );
  transition:background .5s;
}
.sv-card:hover .sv-dim{
  background:linear-gradient(
    to top,
    rgba(8,8,8,.96) 0%,
    rgba(8,8,8,.7) 50%,
    rgba(8,8,8,.4) 100%
  );
}

.sv-default{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:0 24px 28px;
  transition:opacity .35s, transform .4s var(--ease);
  z-index:2;
}
.sv-card:hover .sv-default{
  opacity:0;
  transform:translateY(12px);
}

.sv-num{
  display:block;
  font-family:var(--en);
  font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--purple2);
  margin-bottom:10px;
}
.sv-default h3{
  font-family:var(--en);
  font-size:clamp(16px,1.6vw,22px);
  font-weight:700;
  line-height:1.2;
  color:#fff;
  letter-spacing:-.01em;
}

.sv-hover{
  position:absolute;
  inset:0;
  padding:28px 24px;
  display:flex;flex-direction:column;justify-content:flex-end;
  z-index:3;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .4s var(--ease), transform .45s var(--ease);
}
.sv-card:hover .sv-hover{
  opacity:1;
  transform:translateY(0);
}

.sv-hover .sv-num{
  color:var(--mint);
  margin-bottom:8px;
}
.sv-hover h3{
  font-family:var(--en);
  font-size:clamp(15px,1.4vw,19px);
  font-weight:700;
  color:#fff;
  margin-bottom:12px;
  letter-spacing:-.01em;
}
.sv-hover p{
  font-family:var(--ko);
  font-size:12.5px;
  color:rgba(255,255,255,.65);
  line-height:1.75;
  margin-bottom:16px;
}
.sv-ko{
  font-family:var(--ko);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  padding:5px 12px;
  border:1px solid var(--purple);
  border-radius:100px;
  color:var(--purple2);
  width:fit-content;
}

.sv-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:2px;height:0%;
  background:linear-gradient(to bottom,var(--purple),var(--mint));
  z-index:4;
  transition:height .5s var(--ease);
}
.sv-card:hover::before{height:100%}

@media(max-width:1100px){
  .sv-grid{grid-template-columns:repeat(3,1fr)}
  .sv-grid-5{grid-template-columns:repeat(3,1fr)}
  .sv-card{aspect-ratio:3/4}
}
@media(max-width:640px){
  .sv-grid{grid-template-columns:repeat(2,1fr);gap:2px}
  .sv-grid-5{grid-template-columns:repeat(2,1fr)}
  .sv-card{aspect-ratio:3/4}
  .sv-hover p{font-size:11.5px}
  .sv-top{padding:60px var(--pad) 32px}
}


/* ====================================================
   03-B. HOW WE BUILD
   ==================================================== */
.making{
  background:var(--bg);
  padding:100px 0 0;
}
.mk-header{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad) 56px;
}
.mk-title{
  font-family:var(--ko);
  font-size:clamp(26px,3.5vw,50px);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
  margin-top:16px;
  color:#fff;
}
.mk-title em{
  font-style:normal;
  background:linear-gradient(120deg,var(--purple2),var(--mint));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.mk-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:3px;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}
.mk-col{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:3px;
}
.mk-item{
  position:relative;
  overflow:hidden;
  background:#111;
  cursor:pointer;
}
.mk-large{
  aspect-ratio:4/3;
}
.mk-col .mk-item{
  aspect-ratio:auto;
  height:100%;
}
.mk-item img{
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(.65);
  transition:transform .8s var(--ease),filter .5s;
  display:block;
}
.mk-item:hover img{
  transform:scale(1.06);
  filter:brightness(.85);
}
.mk-ov{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(8,8,8,.8) 0%,transparent 60%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px 28px;
  pointer-events:none;
}
.mk-tag{
  font-family:var(--en);
  font-size:9px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:8px;
}
.mk-ov p{
  font-family:var(--ko);
  font-size:14px;
  color:rgba(255,255,255,.7);
  line-height:1.5;
}

@media(max-width:900px){
  .mk-grid{grid-template-columns:1fr}
  .mk-col{
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
  }
  .mk-col .mk-item{
    aspect-ratio:4/3;
    height:auto;
  }
}
@media(max-width:600px){
  .mk-col{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
}


/* ====================================================
   04. STATS
   ==================================================== */
.stats{
  background:var(--bg2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:56px var(--pad);
}
.stats-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  gap:0;
}
.stat{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0 40px;
}
.stat strong{
  font-family:var(--en);
  font-size:clamp(36px,4vw,60px);
  font-weight:700;line-height:1;
  color:#fff;
  letter-spacing:-.02em;
}
.stat em{
  font-style:normal;
  font-family:var(--ko);font-size:12px;color:var(--w30);letter-spacing:.04em;
}
.stat-div{width:1px;height:56px;background:var(--line);flex-shrink:0}


/* ====================================================
   05. WORK
   ==================================================== */
.work{
  background:var(--bg);
  padding:80px 0 100px;
}

.wk-header{
  max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) 48px;
  display:flex;align-items:center;justify-content:space-between;
}
.wk-more-link{
  font-family:var(--en);font-size:13px;font-weight:500;color:var(--w30);
  letter-spacing:.04em;
  transition:color .2s;
}
.wk-more-link:hover{color:var(--purple2)}

.wk-hero{
  max-width:var(--max);margin:0 auto 4px;
  padding:0 var(--pad);
  display:grid;grid-template-columns:1.5fr 1fr;
  gap:4px;align-items:stretch;
}
.wk-hero-img{
  overflow:hidden;background:#111;
  aspect-ratio:16/9;
}
.wk-hero-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease),filter .4s;
  filter:brightness(.8);
}
.wk-hero:hover .wk-hero-img img{transform:scale(1.04);filter:brightness(.95)}

.wk-hero-info{
  background:var(--bg3);
  padding:44px 40px;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--line);
}
.wk-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.wk-cats span{
  padding:4px 11px;border:1px solid var(--line);border-radius:100px;
  font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--purple2);
}
.wk-hero-info h3{
  font-family:var(--en);font-size:32px;font-weight:700;
  color:#fff;margin-bottom:10px;letter-spacing:-.01em;
}
.wk-hero-info p{
  font-family:var(--ko);font-size:14px;color:var(--w30);line-height:1.7;
}

.wk-duo{
  max-width:var(--max);margin:0 auto 4px;
  padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
}
.wk-trio{
  max-width:var(--max);margin:0 auto 4px;
  padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
}

.wk-item{cursor:pointer}
.wk-img{
  position:relative;overflow:hidden;background:#111;
  aspect-ratio:4/3;
}
.wk-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .65s var(--ease),filter .4s;
  filter:brightness(.75);
}
.wk-item:hover .wk-img img{transform:scale(1.06);filter:brightness(.9)}
.wk-ov{
  position:absolute;inset:0;
  background:rgba(0,0,0,0);
  display:flex;align-items:flex-end;padding:18px 20px;
  transition:background .35s;
}
.wk-item:hover .wk-ov{background:rgba(0,0,0,.4)}
.wk-ov span{
  font-family:var(--en);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,0);transition:color .3s .1s;
}
.wk-item:hover .wk-ov span{color:rgba(255,255,255,.7)}
.wk-name{
  font-family:var(--ko);font-size:14px;color:var(--w60);
  padding:12px 0 0;letter-spacing:.01em;
}

.wk-full{
  position:relative;overflow:hidden;
  max-width:var(--max);margin:0 auto 4px;
  padding:0 var(--pad);
}
.wk-full img{
  width:100%;
  height:clamp(280px,40vw,520px);
  object-fit:cover;
  filter:brightness(.7);
  transition:transform .7s var(--ease),filter .4s;
}
.wk-full:hover img{transform:scale(1.03);filter:brightness(.85)}
.wk-full-ov{
  position:absolute;bottom:0;left:var(--pad);right:var(--pad);
  padding:24px 0;
  pointer-events:none;
}
.wk-full-ov span{
  font-family:var(--en);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--mint);margin-bottom:8px;display:block;
}
.wk-full-ov h3{
  font-family:var(--ko);font-size:22px;font-weight:700;color:#fff;
}


/* ====================================================
   06. MARQUEE
   ==================================================== */
.marquee{
  background:var(--bg2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;padding:18px 0;
}
.mq-track{
  display:flex;align-items:center;width:max-content;
  animation:mqMove 30s linear infinite;
}
.mq-track span{
  font-family:var(--en);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--w30);padding:0 24px;white-space:nowrap;
}
.mq-track i{color:var(--purple);font-style:normal;font-size:16px;flex-shrink:0}
@keyframes mqMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ====================================================
   07. GALLERY GRID — 3열 × 3행 균일 (9칸)
   ==================================================== */
.gallery{
  background:var(--bg);
  padding:80px 0 0;
}
.gl-header{
  padding:0 var(--pad) 32px;
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.gl-more-link{
  font-family:var(--en);font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--w30);transition:color .2s;
}
.gl-more-link:hover{color:var(--mint)}

.gl-more-highlight{
  font-size:13px;
  font-weight:700;
  border:1px solid rgba(139,92,246,.4);
  padding:8px 20px;
  border-radius:100px;
  background:linear-gradient(120deg,var(--purple2),var(--mint));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:border-color .2s, box-shadow .2s;
}
.gl-more-highlight:hover{
  border-color:var(--mint);
  box-shadow:0 0 16px rgba(45,212,191,.2);
}

a.gl-grid{
  display:grid;
  cursor:pointer;
  text-decoration:none;
}
a.gl-grid .gl-item{
  transition:transform .3s var(--ease), filter .3s;
}
a.gl-grid:hover .gl-item img{
  filter:brightness(.95);
}
.gl-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,300px);
  gap:3px;
}
.gl-item{
  overflow:hidden;
  background:#111;
}
.gl-item img{
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(.75);
  transition:transform .65s var(--ease),filter .4s;
  display:block;
}
.gl-item:hover img{
  transform:scale(1.07);
  filter:brightness(.95);
}

@media(max-width:900px){
  .gl-grid{
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,220px);
  }
}
@media(max-width:600px){
  .gl-grid{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto;
  }
  .gl-item{
    aspect-ratio:1/1;
    height:auto;
  }
  .gl-item img{
    height:100%;
  }
}


/* ====================================================
   08. QUOTE BLEED
   ==================================================== */
.quote-bleed{
  position:relative;
  height:clamp(400px,55vw,680px);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.qb-bg{position:absolute;inset:0}
.qb-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.35) saturate(.6)}
.qb-dim{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(139,92,246,.15) 0%,rgba(8,8,8,.6) 70%);
}
.qb-copy{
  position:relative;z-index:2;
  text-align:center;
  padding:0 var(--pad);
  max-width:880px;
}
.qb-copy blockquote{
  font-family:var(--ko);
  font-size:clamp(20px,2.8vw,40px);
  font-weight:600;
  line-height:1.65;
  letter-spacing:-.015em;
  color:#fff;quotes:none;
}
.qb-copy blockquote em{
  font-style:normal;
  background:linear-gradient(120deg,var(--purple2),var(--mint));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}


/* ====================================================
   09. CONTACT
   ==================================================== */
.contact{
  background:var(--bg2);
  padding:100px var(--pad);
  border-top:1px solid var(--line);
}
.ct-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;
}
.ct-left .sec-label{margin-bottom:20px;display:block}
.ct-left h2{
  font-family:var(--ko);
  font-size:clamp(28px,3.5vw,52px);
  font-weight:700;
  line-height:1.25;letter-spacing:-.02em;
  margin-bottom:40px;
}
.ct-links{display:flex;flex-direction:column;gap:14px}
.ct-links a{
  font-family:var(--en);font-size:15px;color:var(--w30);
  transition:color .2s;letter-spacing:.02em;
}
.ct-links a:hover{color:var(--mint)}
.ct-yt-link{
  display:flex;align-items:center;gap:7px;
}
.ct-yt-link svg{
  color:#ff0000;
  flex-shrink:0;
  transition:color .2s;
}
.ct-yt-link:hover svg{color:#ff4444;}

.ct-kakao-wrap{
  margin-top:36px;
}
.ct-kakao-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#FEE500;
  color:#191919;
  padding:13px 24px 13px 18px;
  border-radius:100px;
  font-family:var(--ko);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .2s,box-shadow .2s,background .2s;
  text-decoration:none;
}
.ct-kakao-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(254,229,0,.35);
  background:#ffe000;
}
.kakao-ico{
  flex-shrink:0;
}

.ct-form{display:flex;flex-direction:column;gap:16px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf{display:flex;flex-direction:column;gap:7px}
.cf label{
  font-family:var(--en);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--w30);
}
.cf input,.cf select,.cf textarea{
  background:var(--w10);
  border:1px solid var(--line);border-radius:2px;
  padding:13px 16px;
  font-family:var(--ko);font-size:14px;color:#fff;
  outline:none;width:100%;
  transition:border-color .25s,background .25s;
}
.cf input::placeholder,.cf textarea::placeholder{color:rgba(255,255,255,.2)}
.cf select option{background:#111}
.cf input:focus,.cf select:focus,.cf textarea:focus{
  border-color:var(--purple);
  background:rgba(139,92,246,.06);
}
.cf textarea{resize:vertical;min-height:120px}
.cf-submit{
  align-self:flex-start;
  padding:15px 44px;
  background:var(--purple);
  color:#fff;
  font-family:var(--ko);font-size:15px;font-weight:700;
  border-radius:100px;
  transition:background .25s,transform .25s,box-shadow .25s;
}
.cf-submit:hover{
  background:var(--purple2);transform:translateY(-2px);
  box-shadow:0 12px 32px var(--glow-p);
}


/* ====================================================
   FLOATING KAKAO BUTTON
   ==================================================== */
.float-kakao{
  position:fixed;
  bottom:36px;
  right:36px;
  z-index:900;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .4s var(--easeOut), transform .4s var(--easeOut);
  pointer-events:none;
}
.float-kakao.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.fk-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.fk-kakao{
  width:56px;height:56px;
  border-radius:50%;
  background:#FEE500;
  color:#191919;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(254,229,0,.5);
  transition:transform .2s,box-shadow .25s;
  animation:kakaoRing 3s ease infinite;
}
.fk-kakao:hover{
  transform:scale(1.1);
  box-shadow:0 8px 32px rgba(254,229,0,.4);
}
.fk-label{
  font-family:var(--ko);
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  color:rgba(255,255,255,.55);
  background:rgba(10,10,20,.6);
  backdrop-filter:blur(6px);
  padding:4px 10px;
  border-radius:100px;
  white-space:nowrap;
}
@keyframes kakaoRing{
  0%,100%{box-shadow:0 4px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(254,229,0,.5)}
  60%{box-shadow:0 4px 24px rgba(0,0,0,.4), 0 0 0 12px rgba(254,229,0,0)}
}


/* ====================================================
   FOOTER
   ==================================================== */
.footer{
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:56px var(--pad) 36px;
}
.ft-wrap{max-width:var(--max);margin:0 auto}
.ft-top{
  display:flex;align-items:center;gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
  margin-bottom:28px;
}
.ft-logo{height:22px;width:auto;object-fit:contain}
.ft-nav{
  display:flex;gap:28px;margin-left:auto;
}
.ft-nav a{
  font-family:var(--en);font-size:13px;color:var(--w30);
  transition:color .2s;letter-spacing:.04em;
}
.ft-nav a:hover{color:#fff}
.ft-sns{display:flex;gap:16px}
.ft-sns a{
  font-family:var(--en);font-size:12px;font-weight:700;
  color:var(--w30);letter-spacing:.1em;
  transition:color .2s;
}
.ft-sns a:hover{color:var(--purple2)}
.ft-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.ft-bottom p{
  font-family:var(--en);font-size:12px;color:rgba(255,255,255,.18);
}


/* ====================================================
   TOAST
   ==================================================== */
.toast{
  position:fixed;bottom:36px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--purple);color:#fff;
  padding:14px 32px;border-radius:100px;
  font-family:var(--ko);font-size:14px;
  z-index:9999;opacity:0;pointer-events:none;
  transition:opacity .35s,transform .35s var(--easeOut);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


/* ====================================================
   ANIMATIONS
   ==================================================== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}


/* ====================================================
   RESPONSIVE
   ==================================================== */
@media(max-width:1024px){
  .wk-hero{grid-template-columns:1fr}
  .wk-hero-info{aspect-ratio:unset;padding:32px 28px}
  .gl-grid{grid-template-rows:260px 260px}
}
@media(max-width:768px){
  .gnb,.hdr-cta{display:none}
  .burger{display:flex}

  .hero-copy h1{font-size:clamp(36px,8vw,56px)}
  .hero-actions{flex-direction:column;align-items:flex-start}

  /* Services — 모바일 2열, 05번 카드 full width */
  .sv-grid-5{
    grid-template-columns:repeat(2,1fr);
  }
  .sv-grid-5 .sv-card:nth-child(5){
    grid-column:1 / -1;
    aspect-ratio:16/9;
  }
  .sv-grid-5 .sv-card:nth-child(5) .sv-img img{
    content:url('https://www.genspark.ai/api/files/s/v5cHd0I8');
  }

  .wk-duo,.wk-trio{grid-template-columns:1fr}
  .wk-hero{grid-template-columns:1fr}
  .wk-hero-info{aspect-ratio:unset;padding:32px 28px}
  .ct-inner{grid-template-columns:1fr;gap:48px}
  .ct-row{grid-template-columns:1fr}

  .stats-inner{flex-direction:column;gap:32px}
  .stat-div{width:60px;height:1px}

  .gl-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 220px 220px;
  }
  .gl-a,.gl-f{grid-row:auto}

  .ft-top{flex-wrap:wrap;gap:20px}
  .ft-nav{margin-left:0;flex-wrap:wrap;gap:16px}

  .ab-title{font-size:clamp(24px,7vw,36px)}
  .quote-bleed{height:clamp(320px,70vw,480px)}
}
@media(max-width:480px){
  .gl-grid{grid-template-columns:1fr;grid-template-rows:repeat(6,220px)}
  .stats-inner{gap:24px}
}

/* portfolio 페이지에서 헤더 고정 색상 */
#hdr.force-solid{
  background:rgba(8,8,8,.98)!important;
  border-color:var(--line)!important;
}

/* ─── SCROLL INDICATOR ─── */
.scroll-indicator{
  position:fixed;
  left:32px;
  bottom:36px;
  z-index:8000;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:1;
  transition:opacity .4s;
  pointer-events:none;
}
.scroll-indicator.hide{
  opacity:0;
}
.si-mouse{
  width:22px;
  height:34px;
  border:2px solid rgba(255,255,255,0.35);
  border-radius:12px;
  position:relative;
  display:flex;
  justify-content:center;
}
.si-wheel{
  width:3px;
  height:6px;
  background:#2dd4bf;
  border-radius:2px;
  margin-top:5px;
  animation:siWheel 1.6s ease-in-out infinite;
}
.si-arrows{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.si-arrows span{
  display:block;
  width:8px;
  height:8px;
  border-right:1.5px solid rgba(255,255,255,0.3);
  border-bottom:1.5px solid rgba(255,255,255,0.3);
  transform:rotate(45deg);
  animation:siArrow 1.6s ease-in-out infinite;
}
.si-arrows span:nth-child(2){
  animation-delay:.2s;
  border-color:rgba(255,255,255,0.2);
}
.si-arrows span:nth-child(3){
  animation-delay:.4s;
  border-color:rgba(255,255,255,0.1);
}

@keyframes siWheel{
  0%{transform:translateY(0);opacity:1}
  60%{transform:translateY(10px);opacity:0}
  61%{transform:translateY(0);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes siArrow{
  0%{opacity:0.2}
  50%{opacity:1}
  100%{opacity:0.2}
}

@media(max-width:768px){
  .scroll-indicator{
    left:20px;
    bottom:24px;
  }
}