/* NOD Website v2.0 — shared shell
   Reset, links, layout tokens, header, footer, buttons, reveal/line animations.
   Loaded by every Draft 04 page BEFORE its own <style> block,
   so any page-specific rule in the page overrides what is set here.
   Depends on colors_and_type.css for --font-*, --ease-* and brand colors. */

/* ---- tokens ---------------------------------------------------------- */
:root{
--navh:88px;
--pad:clamp(28px,4vw,72px);
--d3-display:clamp(52px,calc(var(--web-unit)*8.125),130px);
--d3-h1:clamp(44px,calc(var(--web-unit)*5.625),90px);
--d3-h2:clamp(30px,calc(var(--web-unit)*3.625),58px);
--d3-h3:clamp(24px,calc(var(--web-unit)*2.25),36px);
--d3-lead:clamp(18px,calc(var(--web-unit)*1.375),22px);
--d3-body:clamp(16px,calc(var(--web-unit)*1.125),18px)
}

/* ---- base ------------------------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none;transition:color 200ms var(--ease-standard)}
a:hover:where(:not(.btn)):where(:not(.more)):where(:not(.talk)){color:#FFBA08}
.wrap{padding:0 var(--pad)}
section>.wrap{width:100%}
.ser{font-family:var(--font-serif);font-style:italic;font-weight:400}
.dot{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:#FFBA08;vertical-align:baseline;margin-left:.05em}

/* ---- reveal / line-in animations ------------------------------------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.rv.in{opacity:1;transform:none}
.lnr .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.lnr .ln>i{display:block;font-style:normal;transform:translateY(114%);transition:transform 1100ms var(--ease-out)}
.lnr.up .ln>i,.lnr.in .ln>i,.in .lnr .ln>i{transform:none}
.lnr.up .ln:nth-child(2)>i,.lnr.in .ln:nth-child(2)>i,.in .lnr .ln:nth-child(2)>i{transition-delay:170ms}
.lnr.up .ln:nth-child(3)>i,.lnr.in .ln:nth-child(3)>i,.in .lnr .ln:nth-child(3)>i{transition-delay:330ms}

/* ---- header ---------------------------------------------------------- */
header .row{display:grid;grid-template-columns:1fr auto 1fr;column-gap:clamp(20px,3vw,48px);align-items:center;padding-top:var(--hd-y);padding-bottom:var(--hd-y)}
header .row>nav{justify-self:center}
header .row>.talk{justify-self:end}
header nav ul{display:flex;gap:clamp(20px,2.2vw,34px);list-style:none;margin:0;padding:0;font-size:18px;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
header nav a{display:inline-block;transition:transform 240ms var(--ease-out)}
header nav a:hover{transform:scale(1.08);color:inherit}
header .row>a:first-child{display:inline-flex;transform-origin:left center;transition:transform 240ms var(--ease-out)}
header .row>a:first-child:hover{color:inherit;transform:scale(1.08)}
header.t-yellow{background:#FFBA08;color:#131313}
header.t-white{background:#fff;color:#131313}
header.t-black{background:#131313;color:#fff}
.talk>span{display:inline-block;transition:transform 240ms var(--ease-out)}
.talk:hover>span{transform:scale(1.08)}

/* ---- buttons --------------------------------------------------------- */
.btn,.more{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;background:transparent;color:var(--btn-fg,#131313);border:1.5px solid currentColor;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background 200ms var(--ease-standard),color 200ms var(--ease-standard)}
.btn{font-size:16px;padding:14.5px 30px}
.more{font-size:16px;padding:11.5px 26px}
.btn>span,.more>span{display:inline-block;transition:transform 240ms var(--ease-out),color 200ms var(--ease-standard)}
.btn:hover,.more:hover{color:var(--btn-fg,#131313);background:var(--btn-fg,#131313)}
.btn:hover>span,.more:hover>span{transform:scale(1.08);color:var(--sec-bg,#fff)}

/* ---- footer ---------------------------------------------------------- */
footer{background:#131313;color:#fff;padding:clamp(64px,7vw,104px) 0}
footer a:hover{color:#FFBA08}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1.2fr .8fr;gap:clamp(32px,4vw,64px)}
.fbrand .flogo{width:210px;margin-bottom:26px}
.fbrand .flogo img{display:block;width:100%;height:auto;filter:invert(1)}
.ftag{margin:0 0 14px;font-family:var(--font-text);font-weight:600;font-size:var(--d3-lead);line-height:1.3;letter-spacing:-.01em;color:#fff}
.fdesc{margin:0;font-size:var(--d3-body);line-height:1.65;color:#8A8A8A;max-width:84%}
.fcopy{margin:1.65em 0 0;font-size:13px;letter-spacing:.02em;color:#666}
.fcol h5{font-family:var(--font-text);font-weight:600;font-size:13px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:#8A8A8A;margin:0 0 clamp(24px,2.6vw,40px)}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.fsoc{display:flex;gap:16px;align-items:center}
.fsoc a{display:inline-flex;color:#fff}
.fsoc svg{width:26px;height:26px;display:block}
.fsoc a:hover{color:#fff}
.foff{display:flex;flex-direction:column;gap:9px;font-size:var(--d3-body)}
.foff b{font-weight:600;color:#fff;display:flex;align-items:center;gap:9px}
.foff b::before{content:"";width:6px;height:6px;border-radius:50%;background:#FFBA08;flex:0 0 auto}
.foff p{margin:0;color:#8A8A8A;line-height:1.6;max-width:24ch}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}}

/* 공개를 미룬 메뉴 항목. 마크업은 그대로 두고 화면에서만 뺀다 — 다시 열 때 이 클래스만
   떼면 된다. 페이지(/news·/article)는 살아 있어 주소로는 계속 들어갈 수 있다. */
.nav-off{display:none}
/* 공개를 미룬 섹션. 마크업은 남기고 내용만 감춘다. News & Insights 가 열리면 이 클래스를
   떼는 것으로 되돌아온다.

   통째로 display:none 하면 앞뒤 섹션이 맞붙어 섹션 사이 리듬이 끊긴다. 그래서 자리는
   남기되 높이를 다른 섹션의 위쪽 여백과 같은 --sec-pad 로 줄이고, 앞뒤와 같은 검은 면으로 둔다. */
.section-off{min-height:0;height:var(--sec-pad);padding:0}
.section-off>*{display:none}

/* ---- 태블릿·모바일 셸 ------------------------------------------------- */
/* 목업은 데스크톱 폭만 그려져 있고 반응형은 clamp() 로 글자 크기만 줄어든다. 헤더는
   `1fr auto 1fr` 3열이라 로고·메뉴·CTA 가 좁은 폭에서 서로를 밀어내고, 1080px 아래에서는
   가로 스크롤이 생긴다(375px 에서 문서 폭이 515px 이었다). 여기서는 셸(헤더·푸터)만
   바로잡는다 — 페이지 본문은 각 페이지의 <style> 끝에서 처리한다. */

/* 태블릿: 3열은 유지하되 메뉴와 CTA 를 줄여 한 줄에 들어오게 한다. */
@media(max-width:1024px){
  header nav ul{gap:18px;font-size:15px}
  .talk{font-size:14px}
  .btn{font-size:15px;padding:13px 24px}
}
@media(max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,44px)}
  .fdesc{max-width:46ch}
  .foff p{max-width:none}
}

/* 햄버거 토글 버튼. web-sections.js 가 헤더에 만들어 넣는다(목업 HTML 은 그대로 둔다).
   데스크톱에서는 숨고 휴대폰 폭에서만 나타난다. 색은 헤더 테마를 따라가야 하므로
   currentColor 를 쓴다 — 헤더는 섹션에 따라 노랑·흰색·검정으로 바뀐다. */
.navtog{display:none;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-8px;padding:0;min-height:0;background:none;border:0;cursor:pointer;color:inherit;gap:5px;flex-direction:column}
.navtog i{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform 240ms var(--ease-out),opacity 160ms linear}
header.nav-open .navtog i:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .navtog i:nth-child(2){opacity:0}
header.nav-open .navtog i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 모바일: 메뉴와 CTA 를 접어 두고 햄버거로 여닫는다. 펼치면 헤더가 아래로 자라고,
   CTA 도 그 안에서 다시 보인다 — 좁은 폭에서 헤더 한 줄에 셋을 욱여넣지 않으면서도
   "함께 일해요" 로 가는 길을 잃지 않는다.

   선택자에 body 를 덧붙인 것은 의도다. 페이지의 <style> 이 v2-shell.css 보다 뒤에 오므로,
   각 페이지의 @media(max-width:1080px) 안에 있는 `header nav ul{font-size:16px}` 같은
   같은 명시도 규칙이 나중에 와서 이긴다. body 하나를 더해 순서와 무관하게 이기게 한다. */
@media(max-width:640px){
  :root{--navh:56px}
  body header{--hd-y:12px}
  body header img{height:22px}
  body header .row{grid-template-columns:auto 1fr;column-gap:16px;row-gap:0}
  body header .navtog{display:flex;grid-row:1;grid-column:2;justify-self:end}
  /* 접힌 상태. grid-column:1/-1 로 두 칸을 모두 차지해 통짜 줄이 된다. */
  body header .row>nav{grid-row:2;grid-column:1 / -1;justify-self:stretch;display:none}
  body header .row>.talk{grid-row:3;grid-column:1 / -1;justify-self:stretch;display:none}
  /* 헤더가 투명한 섹션(t-clear, 주로 영상 위)에서는 펼친 메뉴가 영상 위에 그대로 떠서
     읽히지 않는다. 열려 있는 동안만 불투명한 면을 깐다. */
  body header.nav-open.t-clear{background:#131313;color:#fff}
  body header.nav-open .row>nav{display:block;padding-top:6px}
  body header.nav-open .row>.talk{display:inline-flex;justify-content:center;margin:12px 0 4px}
  body header nav ul{flex-direction:column;gap:0;font-size:16px;letter-spacing:.02em}
  body header nav li{border-top:1px solid currentColor}
  body header nav li:first-child{border-top:0}
  body header nav a{display:block;padding:13px 2px}
  /* 메뉴를 펼쳤을 때 항목 하나가 커지는 효과는 손가락 조작에서 거슬린다. */
  body header nav a:hover{transform:none}
  .btn,.more{font-size:14px}
  .btn{padding:12px 22px}
  .more{padding:10px 18px}
  footer{padding:clamp(48px,9vw,64px) 0}
  .fbrand .flogo{width:170px;margin-bottom:20px}
  .fcol h5{margin-bottom:16px}
  .fcol ul{gap:11px;font-size:16px}
  .foff{gap:7px}
}

/* 아주 좁은 폭(360 이하)에서 메뉴 세 개가 로고를 밀지 않도록 한 단계 더 줄인다. */
@media(max-width:380px){
  body header nav ul{gap:12px;font-size:12px}
  body header img{height:20px}
}

/* 본문이 화면보다 넓어지는 것을 막는다.
   목업은 디자이너가 넣은 <br> 자리를 지키려고 본문 문단에 white-space:nowrap 을 걸어 두었다.
   데스크톱 폭에서는 의도대로 동작하지만, 좁은 폭에서는 그 한 줄이 화면보다 길어져 **문서
   전체가 넓어진다**(375px 화면에서 /about 문서 폭이 493px 이었다). 그러면 position:fixed
   헤더까지 같이 늘어나 메뉴가 화면 밖으로 밀린다 — "헤더가 모바일에 안 맞는" 증상의 실제
   원인이 이것이다.

   fitlines.js 가 풀어 주도록 되어 있지만, 부모가 함께 늘어나면 clientWidth 와 scrollWidth 가
   같아져 "넘쳤다" 고 판정하지 못한다. 그래서 좁은 폭에서는 규칙으로 푼다 — 그 폭에서는
   어차피 데스크톱 줄바꿈 위치가 의미가 없다.

   흐르는 띠와 가로로 움직이는 글자는 nowrap 이 동작의 일부라 되돌려 준다
   (fitlines.js 의 SKIP 목록과 같은 집합이다). */
@media(max-width:860px){
  main :is(p,h1,h2,h3,h4,h5,li,dd,dt,blockquote){white-space:normal;text-wrap:pretty}
  main :is(.tapetrack,.tapedt,.hkwtrack,.tick-t,.mtrack,.wall,.lrt,.rollt) :is(p,h1,h2,h3,h4,h5,li,span,em,b,i){white-space:nowrap}
  /* 긴 URL·영문 단어가 칸을 밀어내지 않게 한다. */
  main :is(p,li,h1,h2,h3,h4){overflow-wrap:anywhere}

  /* 마지막 안전장치. 날아드는 글자(about 의 .fly)처럼 애니메이션 도중 일시적으로 화면보다
     넓어지는 요소가 남아 있다. 그런 요소 하나 때문에 문서 전체가 넓어지면 헤더까지 밀리므로
     가로 넘침만 잘라 둔다. overflow:hidden 이 아니라 clip 인 것은 의도다 — hidden 은 스크롤
     컨테이너를 만들어 position:sticky 를 망가뜨린다. */
  main{overflow-x:clip}
}