/* 더노드 회사 소개 인트로 (2026-11-05) — 목업 G안 「숫자 프리로더 · 격자」
   브라우저 창을 처음 열고 들어올 때 한 번(sessionStorage) · ?go= 로 넘어오면 건너뜀 · [들어가기] 누르면 걷힘
   클래스는 모두 it- 로 시작(회사 소개 company.css 와 겹치지 않게) */
html.no-intro .it{display:none}
html.intro-on, html.intro-on body{overflow:hidden}
.it{position:fixed; inset:0; z-index:100; background:#ecebe6; color:#141414; font-family:'SUIT Variable','Pretendard',system-ui,sans-serif; word-break:keep-all; transition:transform 1s cubic-bezier(.77,0,.18,1)}
.it.leave{transform:translateY(-100%)}
.it .en{font-family:'Montserrat',sans-serif}

/* 로고(심볼 · 글자 그림 따로 움직임) */
.it-lg{display:flex; align-items:stretch}
.it-lg svg{display:block; height:100%; width:auto; overflow:visible}
.it-lg .fr{stroke-dasharray:29; stroke-dashoffset:29}
.it-lg .nd{transform-box:fill-box; transform-origin:center; transform:scale(0)}
.it-lg .lt{clip-path:inset(0 100% 0 0)}

/* 격자 · 귀퉁이 정보 */
.it-g{position:absolute; inset:0; pointer-events:none}
.it-g i{position:absolute; background:#c5c2b9}
.it-g .v1{left:25%; top:0; bottom:0; width:1px; transform-origin:top}
.it-g .v2{left:75%; top:0; bottom:0; width:1px; transform-origin:bottom}
.it-g .h1{top:50%; left:0; right:0; height:1px; transform-origin:left}
.it-g .v1, .it-g .v2{transform:scaleY(0); animation:itGy 1.4s cubic-bezier(.77,0,.18,1) .3s forwards}
.it-g .h1{transform:scaleX(0); animation:itGx 1.6s cubic-bezier(.77,0,.18,1) .5s forwards}
.it-c{position:absolute; font-family:'Montserrat',sans-serif; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; opacity:0; animation:itFade .8s ease .9s forwards}
.it-c.tl{left:32px; top:28px}.it-c.tr{right:32px; top:28px}.it-c.br{right:32px; bottom:28px}
.it-c.br i{display:inline-block; width:6px; height:6px; border-radius:50%; background:#e4572e; margin-inline-end:10px; vertical-align:1px}

/* 숫자 000→100 · 바닥 진행선(끝만 빨강) — 다 차면 숫자는 옅게 남음 */
.it-num{position:absolute; left:30px; bottom:44px; font-family:'Montserrat',sans-serif; font-size:clamp(64px,10vw,150px); font-weight:500; line-height:.9; letter-spacing:-.05em; font-variant-numeric:tabular-nums; transition:opacity 1s ease}
.it-num.out{opacity:.14}
.it-bar{position:absolute; left:0; bottom:0; height:2px; width:100%; background:linear-gradient(90deg,#141414 0 calc(100% - 28px),#e4572e calc(100% - 28px)); transform-origin:left; transform:scaleX(0); transition:opacity .6s}
.it-bar.out{opacity:0}

/* 심볼(격자 교차점) · 큰 슬로건 · 아래 줄 */
.it-sym{position:absolute; left:25%; top:50%; width:clamp(64px,7vw,92px); height:clamp(64px,7vw,92px); transform:translate(-100%,-100%); padding:0 20px 20px 0}
.it-sym .it-lg{height:100%}.it-sym .lt{display:none}
.it.on .it-sym .fr{animation:itDraw 1.1s cubic-bezier(.65,0,.35,1) forwards}
.it.on .it-sym .nd{animation:itPop .55s cubic-bezier(.34,1.4,.64,1) 1s forwards}
.it-hero{position:absolute; left:25%; right:8%; top:50%; transform:translateY(-100%); padding:0 0 30px 30px; text-align:left}
.it-hero .ln{display:block; overflow:hidden; font-size:clamp(34px,5vw,76px); font-weight:700; letter-spacing:-.045em; line-height:1.16}
.it-hero .ln > span{display:inline-block; transform:translateY(110%)}
.it-hero .ln:first-child > span{font-weight:300}
.it.on .it-hero .ln > span{animation:itUp 1.15s cubic-bezier(.77,0,.18,1) .9s forwards}
.it.on .it-hero .ln:nth-child(2) > span{animation-delay:1.05s}
html:lang(en) .it-hero .ln, html:lang(es) .it-hero .ln{font-size:clamp(30px,4.2vw,64px); letter-spacing:-.03em}
html:lang(ja) .it, html:lang(zh) .it{word-break:normal; line-break:strict}   /* 일 · 중은 띄어쓰기가 없어 줄이 안 꺾여 넘침 */
.it-low{position:absolute; left:25%; right:8%; top:50%; padding:30px 0 0 30px; display:flex; align-items:center; justify-content:space-between; gap:30px}
.it-low .txt{display:flex; flex-direction:column; gap:14px}
.it-low .it-lg{height:30px; opacity:0}.it-low .ls{display:none}
.it.on .it-low .it-lg{animation:itFade .1s linear 2s forwards}
.it.on .it-low .lt{animation:itWipe 1s cubic-bezier(.77,0,.18,1) 2s forwards}
.it-low .tag{font-size:13px; letter-spacing:.06em; color:#3c3c3c; opacity:0}
.it.on .it-low .tag{animation:itFade .9s ease 2.6s forwards}
.it-go{display:inline-flex; align-items:center; justify-content:center; gap:14px; min-width:196px; height:52px; padding:0 28px; font:inherit; font-size:15px; font-weight:600; letter-spacing:.02em; color:#141414; background:transparent; border:1px solid #141414; border-radius:0; cursor:pointer; opacity:0; transition:background .35s, color .35s}
.it-go svg{width:18px; height:10px; transition:transform .35s}
.it-go:hover, .it-go:focus-visible{background:#141414; color:#ecebe6; outline:none}
.it-go:hover svg{transform:translateX(5px)}
.it.on .it-go{animation:itFade .9s ease 2.9s forwards}

@keyframes itGy{to{transform:scaleY(1)}}
@keyframes itGx{to{transform:scaleX(1)}}
@keyframes itFade{to{opacity:1}}
@keyframes itUp{to{transform:none}}
@keyframes itDraw{to{stroke-dashoffset:0}}
@keyframes itPop{0%{transform:scale(0)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes itWipe{to{clip-path:inset(0 0 0 0)}}

@media (max-width:700px){
  .it-g .v1{left:24px}.it-g .v2{display:none}.it-c.tr{display:none}
  .it-sym{left:24px; transform:translate(0,-100%) translateY(-130px)}
  .it-hero{left:24px; right:24px; padding-left:20px}
  .it-low{left:24px; right:24px; flex-direction:column; align-items:flex-start; padding-left:20px}
  html:lang(ja) .it-hero .ln, html:lang(zh) .it-hero .ln{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .it *{animation-duration:.01s !important; animation-delay:0s !important}
  .it{transition:none}
}