/* INSTEP 홈 C 판. 영문 제목·라벨 Geist, 국문 본문 나눔고딕(OFL). 장식 글은 Geist Mono 11px. */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@font-face{font-family:"Geist";src:url("fonts/Geist-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/Geist-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url("fonts/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
:root{
  --bg:#0E0E13; --ink:#F7F7FA; --ink2:#C9C9D4; --ink3:#8A8A9A; --line:rgba(247,247,250,.16); --warm:#8C8CFF;
  --font:"Geist","Nanum Gothic","NanumGothic",sans-serif; --ko:"Nanum Gothic","NanumGothic",sans-serif;
  --mono:"Geist Mono","Nanum Gothic",monospace; --ease:cubic-bezier(.16,1,.3,1); --pad:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ko);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:16px;top:16px;z-index:50;background:#fff;color:#000;padding:8px 12px}
.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;line-height:1.6;text-transform:uppercase}
.dim{color:var(--ink2)}
.wm{display:block;height:13px;width:auto}

/* 3D 바탕과 그 위 막 */
#gl{position:fixed;inset:0;z-index:0}
#gl canvas{display:block;width:100%;height:100%}
.nogl-bg{display:none}
.no-gl .nogl-bg{display:block;position:fixed;inset:0;background:#0E0E13 url("assets/poster.jpg") 62% 50%/cover no-repeat}
.no-gl #loader{display:none}
.dots{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.22;background-image:radial-gradient(rgba(255,255,255,.55) .7px,transparent .8px);background-size:64px 64px;background-position:32px 32px;
  -webkit-mask-image:radial-gradient(70% 70% at 60% 45%,transparent 30%,#000 100%);mask-image:radial-gradient(70% 70% at 60% 45%,transparent 30%,#000 100%)}
.shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,14,19,.5) 0,rgba(14,14,19,.3) 70px,rgba(14,14,19,0) 120px),radial-gradient(34% 34% at 100% 0%,rgba(14,14,19,.62),rgba(14,14,19,.4) 55%,rgba(14,14,19,0)),linear-gradient(90deg,rgba(14,14,19,.7) 0%,rgba(14,14,19,.58) 32%,rgba(14,14,19,0) 52%)} /* 밝은 하늘 위 작은 글이 4.5:1 이상 되게 글이 놓이는 자리 뒤만 어둡게 */

/* 불러오기 화면 */
#loader{position:fixed;inset:0;z-index:40;background:#0E0E13;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 var(--pad);gap:22px;transition:opacity .9s var(--ease),visibility .9s}
#loader .wm{height:22px}
.ld-row{display:flex;gap:28px;color:var(--ink2)} .ld-row #ldPct{color:var(--ink)}
.ld-line{height:1px;background:var(--line);width:min(520px,100%)} .ld-line i{display:block;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.ld-foot{position:absolute;left:var(--pad);bottom:36px;color:var(--ink2)}
.loaded #loader{opacity:0;visibility:hidden}
.capture #loader{display:none}
.capture *{transition:none!important}
html:not(.loaded) .ui,html:not(.loaded) .hud,html:not(.loaded) .labels{visibility:hidden}

/* 머리 메뉴 */
header.top{position:fixed;z-index:20;left:0;right:0;top:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad)}
.nav{display:flex;gap:28px;font-family:var(--font);font-size:13px}
.nav a{text-decoration:none;color:var(--ink);opacity:1;transition:opacity .3s} .nav a:hover{opacity:1} .nav a:hover{color:var(--ink)}
.nav a:last-child{color:var(--ink);border-bottom:1px solid var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);height:34px;padding:0 14px;border-radius:2px;cursor:pointer}
.menu{display:none}

/* 모서리 자료(실제 장면 값) */
.hud{position:fixed;z-index:3;color:var(--ink2);pointer-events:none;margin:0;padding:0;list-style:none;text-shadow:0 0 4px rgba(14,14,19,.95),0 0 10px rgba(14,14,19,.8),0 0 22px rgba(14,14,19,.5)}
@media (min-width:761px){.hud.tl,.hud.tr,.hud.bl,.hud.br{background:rgba(14,14,19,.5);padding:4px 8px;margin-left:-8px} .hud.br,.hud.tr{margin:0 -8px 0 0} .hud.tl #hudName{color:var(--ink)}}
.nav a,.brand{text-shadow:0 0 8px rgba(14,14,19,.8)}
.hud.tl{left:var(--pad);top:84px}
.hud.tr{right:var(--pad);top:84px;text-align:right}
.hud.tr li{display:flex;justify-content:flex-end;align-items:center;gap:10px;color:#E6E6EE;transition:color .4s}
.hud.tr li span{color:#E6E6EE;opacity:.85} .hud.tr li.on{color:var(--ink)}
.hud.tr li i{display:block;width:30px;height:1px;background:var(--line);position:relative;overflow:hidden}
.hud.tr li i:after{content:"";position:absolute;inset:0;background:var(--ink2);transform:scaleX(var(--k,0));transform-origin:left}
.hud.bl{left:var(--pad);bottom:30px}
.hud.br{right:var(--pad);bottom:30px;text-align:right;min-width:160px}
.hud .prog{height:1px;background:var(--line);margin-top:8px} .hud .prog i{display:block;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.idx{position:fixed;z-index:6;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.idx a{display:block;width:6px;height:6px;border:1px solid var(--ink3);border-radius:50%;transition:all .3s}
.idx a.on{background:var(--ink);border-color:var(--ink);transform:scale(1.25)}
.idx a:hover{border-color:var(--ink)}

/* 물체 이름표: 점, 꺾인 선, 글 */
.labels{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s}
.lbl.on{opacity:1}
.lbl:before{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border:1px solid var(--ink);border-radius:50%;background:rgba(14,14,19,.6)}
.lbl i{position:absolute;left:2px;top:0;width:48px;height:1px;background:rgba(247,247,250,.75);transform-origin:left;transform:rotate(-40deg)}
.lbl span{position:absolute;left:36px;top:-46px;white-space:nowrap;border-left:1px solid rgba(247,247,250,.75);padding:5px 10px 5px 9px;line-height:1.35;background:rgba(14,14,19,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lbl.left i{transform:rotate(-140deg)}
.lbl.left span{left:auto;right:36px;border-left:0;border-right:1px solid rgba(247,247,250,.75);padding:5px 9px 5px 10px;text-align:right}
.lbl .lt{display:block;font-family:var(--ko);font-size:13px;font-weight:400;color:var(--ink)}
.lbl em{display:block;font-style:normal;color:#E6E6EE;font-size:11px}

/* 본문 칸 */
.ui{position:relative;z-index:5}
.beat{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px var(--pad) 110px}
.card{max-width:440px;position:relative}
/* 밝아진 하늘 위에서도 본문이 읽히게 본문 칸 뒤에만 옅은 그늘 */
@media (min-width:761px){.beat:not(.contact) .card:before{content:"";position:absolute;z-index:-1;left:-90px;right:-120px;top:-70px;bottom:-70px;background:radial-gradient(closest-side,rgba(14,14,19,.5),rgba(14,14,19,.32) 72%,rgba(14,14,19,0));pointer-events:none} .beat.hero .card:before{left:-240px;right:-300px;top:-200px;bottom:-170px;background:radial-gradient(closest-side,rgba(14,14,19,.6),rgba(14,14,19,.46) 45%,rgba(14,14,19,.2) 75%,rgba(14,14,19,0))} /* 경계가 보이지 않게 넓고 천천히 옅어지는 그늘 */}
.card.cut{-webkit-mask-image:linear-gradient(to bottom,transparent var(--cut),#000 calc(var(--cut) + 44px));mask-image:linear-gradient(to bottom,transparent var(--cut),#000 calc(var(--cut) + 44px))}
.hero .card{max-width:520px}
.card .k{color:var(--ink);margin-bottom:16px;text-shadow:0 0 3px rgba(14,14,19,.95),0 0 8px rgba(14,14,19,.85),0 0 18px rgba(14,14,19,.6)} /* 제목 위 알약 상자는 두지 않고 글 둘레 그늘로만 읽히게 */
.card h1,.card h2,.card p,.card .lead{text-shadow:0 1px 14px rgba(14,14,19,.55)}
h1{font-family:var(--font);font-size:48px;line-height:1.06;font-weight:500;letter-spacing:-.04em;margin:0}
h1 span{color:var(--ink2)}
h2{font-family:var(--ko);font-size:25px;line-height:1.42;font-weight:700;letter-spacing:-.03em;margin:0}
.lead{font-size:16px;color:var(--ink2);margin:20px 0 0;max-width:30em}
.card p{color:var(--ink2);margin:16px 0 0}
.acts{display:flex;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;background:var(--ink);color:#16161D;text-decoration:none;font-family:var(--ko);font-weight:700;font-size:13px;border-radius:2px;border:1px solid var(--ink);cursor:pointer;transition:background .3s,color .3s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{border-color:var(--ink)}
.who{margin-top:22px;color:var(--ink2)}
.scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);color:var(--ink);padding:6px 10px;background:rgba(14,14,19,.42)}
.svc{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;padding:0;margin:20px 0 0;color:var(--ink)}
.svc.mono{font-family:var(--ko);font-size:13.5px;font-weight:400;text-transform:none;letter-spacing:0}
.svc li{position:relative;padding-left:12px} .svc li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:1px;background:var(--warm)}
.works{margin-top:26px}
.works .wk{color:var(--ink2);margin-bottom:6px;border-top:1px solid var(--line);padding-top:14px}
.works ol{list-style:none;margin:0;padding:0;counter-reset:w}
.works li{display:grid;grid-template-columns:28px 1fr;gap:0 8px;padding:8px 0;border-bottom:1px solid rgba(247,247,250,.08);counter-increment:w}
.works li:before{content:counter(w,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--ink2);grid-row:span 2;padding-top:2px}
.works .wt{font-size:14.5px;font-weight:400;line-height:1.5;color:var(--ink)}
.works span.mono{color:#EEEEF4;text-shadow:0 0 6px rgba(14,14,19,.9),0 0 14px rgba(14,14,19,.55);font-size:11px;margin-top:2px;text-transform:none;letter-spacing:.02em}

/* 2026-11-08 homeworks: 갈래 칸에서 작업물 쪽으로 건너가는 링크 */
.card .wall{display:inline-flex;align-items:center;min-height:32px;margin-top:12px;font-family:var(--font);font-size:13.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);text-shadow:0 0 8px rgba(14,14,19,.8)}
.card .wall:hover{border-bottom-color:var(--ink)}
.card .wall + .more{margin-top:14px}

/* 의뢰 문의 */
.contact{flex-direction:column;justify-content:center;align-items:flex-start}
.card.wide{max-width:600px;background:rgba(14,14,19,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);padding:30px 32px 26px;margin-left:0}
.chips{border:0;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{color:var(--ink2);margin-bottom:10px;padding:0}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line);font-family:var(--font);font-size:13px;color:var(--ink2);border-radius:2px;transition:all .25s}
.chips label:hover span{border-color:var(--ink2);color:var(--ink)}
.chips input:checked+span{background:var(--ink);color:#16161D;border-color:var(--ink)}
.chips input:focus-visible+span{outline:1px solid var(--warm);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.fields label{display:flex;flex-direction:column;gap:4px} .fields .full{grid-column:1/-1}
.fields span{color:var(--ink2)}
.fields input,.fields textarea{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);font-family:var(--ko);font-size:15px;padding:10px 12px;border-radius:2px;resize:vertical}
.fields input:focus,.fields textarea:focus{outline:none;border-color:var(--ink2)}
.send{display:flex;align-items:center;gap:16px;margin-top:18px} .send .mono{color:var(--warm);text-transform:none;letter-spacing:.02em}
.foot{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:flex;align-items:center;gap:28px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink2)}
.foot nav{display:flex;gap:18px;margin-left:auto} .foot a{text-decoration:none} .foot a:hover{color:var(--ink)}
.foot .mail{text-transform:none;letter-spacing:.02em}
/* 바닥글 사업자 정보: 작은 고정폭 글, 항목 사이 가운뎃점, 줄은 항목 경계에서만 바뀐다 */
.foot .biz{font-style:normal;display:flex;flex-wrap:wrap;gap:2px 0;text-transform:none;letter-spacing:.02em;font-size:11px;line-height:1.7;min-width:0}
.foot .biz>*{white-space:nowrap}
.foot .biz>*+*::before,.foot .biz i{content:"·";margin:0 .7em;color:var(--ink2);opacity:.7;font-style:normal}
.contact{padding-bottom:120px}

.at-end .hud.bl,.at-end .hud.br,.at-end .hud.tr,.at-end .idx{opacity:0;transition:opacity .4s}
@media (min-width:761px){.at-end .hud.tl{opacity:0;transition:opacity .4s}}
.clean .ui,.clean .hud,.clean header.top,.clean .idx,.clean .labels,.clean .shade,.clean .dots{visibility:hidden}

@media (max-width:760px){
  :root{--pad:20px}
  header.top{height:60px;background:linear-gradient(rgba(14,14,19,.86),rgba(14,14,19,.6) 70%,rgba(14,14,19,0))}
  .nav{display:none} .menu-btn{display:block}
  .menu{display:flex;flex-direction:column;position:fixed;z-index:19;inset:0;background:#0E0E13;padding:92px 20px 40px;gap:2px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .menu a{display:flex;gap:14px;align-items:baseline;text-decoration:none;font-family:var(--font);font-size:26px;letter-spacing:-.02em;padding:8px 0;border-bottom:1px solid rgba(247,247,250,.08)}
  .menu a .mono{color:var(--ink2)} .menu a.go{margin-top:22px;border:1px solid var(--ink);justify-content:center;font-size:17px;padding:12px}
  .menu-open .menu{opacity:1;visibility:visible}
  /* 휴대폰: 장면 글은 머리 띠 안 가운데 한 줄로, 오른쪽 아래 글은 숨긴다(밝은 조형 위에 뜨거나 본문과 겹치지 않게) */
  .hud.tl{top:0;left:50%;transform:translateX(-50%);height:60px;display:flex;align-items:center;gap:8px;z-index:21;white-space:nowrap}
  .hud.tl #hudScene{display:none} .hud.tl #hudName{color:var(--ink)}
  .hud.tr,.idx,.hud.bl,.hud.br{display:none}
  .menu-open .hud.tl{visibility:hidden}
  .shade{background:linear-gradient(0deg,rgba(14,14,19,.74) 0%,rgba(14,14,19,.5) 30%,rgba(14,14,19,.16) 46%,rgba(14,14,19,0) 56%)}
  .dots{opacity:.14}
  .beat{align-items:flex-end;padding:96px 20px 44px;min-height:var(--vhs,100svh)}
  .hero{align-items:flex-end}
  h1{font-size:36px} .lead{font-size:15px;margin-top:16px}
  h2{font-size:21px} .card p{font-size:14.5px;line-height:1.75;margin-top:10px}
  .svc{margin-top:14px} .works{margin-top:16px} .works .wk{padding-top:10px} .works li{padding:6px 0} .works b{font-size:13.5px}
  .scroll{display:none}
  .card.wide{margin-left:0;padding:22px 18px;width:100%}
  .fields{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px} .fields input{min-width:0} .chips{margin-top:16px;gap:6px} .chips span{height:34px;padding:0 12px}
  .contact{justify-content:flex-start;padding-top:30vh;padding-top:30svh;padding-bottom:184px}
  .foot{flex-wrap:wrap;gap:6px 18px;bottom:22px} .foot nav{display:none} /* 휴대폰은 머리 메뉴가 같은 길을 맡는다 */
  .foot .dim{margin-left:auto;order:1} .foot .biz{order:2;width:100%;flex-direction:column;gap:1px}
  .foot .biz>*+*::before{content:none}
  .lbl .lt{font-size:12px} .lbl em{display:none}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* 휴대폰 화질 낮춤 단계: 흐림 받침을 불투명 받침으로 */
.lowq .lbl span,.lowq .card.wide{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,14,19,.8)}
/* 불러오기 글은 먼저 사라져 첫 화면 글과 겹치지 않게 */
.loaded #loader > *{opacity:0;transition:opacity .2s}
@media (max-width:760px){
  /* 휴대폰: 스크롤 중 본문이 밝은 조형 위에 얹혀도 읽히게 옅은 어두운 받침 */
  .beat:not(.contact) .card{position:relative}
  .beat:not(.contact) .card:before{content:"";position:absolute;z-index:-1;left:-14px;right:-14px;top:-20px;bottom:-20px;background:linear-gradient(180deg,rgba(14,14,19,0),rgba(14,14,19,.6) 28px,rgba(14,14,19,.6) calc(100% - 28px),rgba(14,14,19,0));pointer-events:none}
  .beat .card{text-shadow:0 1px 8px rgba(14,14,19,.7)}
}
/* 관성 스크롤(Lenis 1.3.25, MIT) 기본 규칙 */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}