@charset "utf-8";

/* =========================================================
   nav.css : 상단 헤더, 메뉴
   - PC : 가로 메뉴 / 768px 이하 : 버튼으로 여는 드롭다운
   ========================================================= */

body::before {content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 3001; background: var(--paper);}

.header {position: sticky; top: env(safe-area-inset-top, 0px); z-index: 3000; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .2s;}
.header.scrolled {border-bottom-color: var(--line);}

.nav-inner {display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: calc(var(--inner) + var(--gutter) * 2); height: var(--header-h); margin: 0 auto; padding: 0 var(--gutter);}

.logo {font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap;}

.gnb {display: flex; align-items: center; gap: 36px;}
.gnb .depth1 {display: flex; gap: 32px;}
.gnb .depth1 a {position: relative; display: block; padding: 6px 0; font-size: 15px; font-weight: 500; color: var(--muted); transition: color .2s;}
.gnb .depth1 a:hover,
.gnb .depth1 a.active {color: var(--ink);}
.gnb .depth1 a.active::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--select);}

.nav_resume {display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: border-color .2s, color .2s;}
.nav_resume:hover {border-color: var(--select); color: var(--select);}

.menu_toggle {display: none;}

@media screen and (max-width: 768px) {
  .logo {font-size: 17px;}

  .menu_toggle {display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; margin-right: -10px; padding: 0 10px;}
  .menu_toggle .menu_btn {display: block; width: 24px; height: 2px; background: var(--ink); transition: transform .25s;}
  .menu_toggle.active .menu_btn:nth-child(1) {transform: translateY(4.5px) rotate(45deg);}
  .menu_toggle.active .menu_btn:nth-child(2) {transform: translateY(-4.5px) rotate(-45deg);}

  /* 닫힌 상태에서는 visibility로 숨겨 화면 밖 요소가 가로 스크롤을 만들지 않게 함 */
  .gnb {position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; background: var(--paper); border-bottom: 1px solid var(--line); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;}
  .gnb.open {visibility: visible; opacity: 1; transform: translateY(0);}
  .gnb .depth1 {flex-direction: column; gap: 0;}
  .gnb .depth1 a {padding: 14px 0; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--line);}
  .gnb .depth1 a.active::after {display: none;}
  .nav_resume {justify-content: center; min-height: 48px; margin-top: 20px; font-size: 16px;}
}

/* Portfolio hero header */
body::before {display:none;}
.header {position:absolute;top:0;left:0;width:100%;height:100px;background:transparent;border:0;z-index:3000;}
.header.scrolled {border:0;}
.nav-inner {max-width:none;width:100%;height:100px;padding:0 5%;}
.logo {font-family:var(--font-display);font-size:21px;font-weight:800;letter-spacing:-.7px;color:#171717;}
.gnb .depth1 {gap:clamp(42px,7vw,80px);}
.gnb .depth1 a {font-family:var(--font-kr);font-size:17px;font-weight:500;color:#171717;}
.gnb .depth1 a:hover,.gnb .depth1 a.active {color:#0030E7;}
.gnb .depth1 a.active::after {background:#0030E7;}
@media(max-width:1100px){.gnb .depth1{gap:35px;}}
@media(max-width:768px){
 .header,.nav-inner{height:100px;}
 .nav-inner{padding:0 6%;}
 .logo{font-size:18px;}
 .gnb{background:#f7f6ff;}
 .gnb .depth1{gap:0;}
 .gnb .depth1 a{font-size:16px;}
}

/* Reveal the navigation on upward scrolling, hide it on downward scrolling. */
.header{position:fixed;--ink:#16202a;--muted:#5a6774;--line:#d8dfe6;transform:translateY(0);transition:transform .28s ease,background-color .2s ease,box-shadow .2s ease;}
.header.scrolled{background:rgb(255 255 255 / .96);box-shadow:0 1px 12px rgb(15 21 27 / .08);backdrop-filter:blur(12px);}
.header.header-hidden{transform:translateY(-100%);pointer-events:none;}
@media(prefers-reduced-motion:reduce){.header{transition:none;}}