/* ── 공용 크롬(상단 내비 · 모바일 메뉴 · 푸터) ─────────────────────────────
   출처: contact.html 인라인 스타일(라이브 실측본)을 그대로 뽑아낸 것이다.
   목적: 하위 페이지가 메인·상담과 **같은 골격**을 쓰게 한다 — 상세로 들어갔을 때
   내비·푸터가 달라지면 같은 사이트로 읽히지 않는다(2026-08-12 대표 지적).
   값은 tokens.css 의 var() 만 쓴다. hex 직접 타이핑 없음.
   ⚠️ index.html·contact.html 은 여전히 인라인 사본을 갖고 있다 — 크롬 규칙을 고치면 세 곳을 함께 본다.
   ────────────────────────────────────────────────────────────────────── */

/* 내비 — 불투명 면 필수(투명하면 아래 컨트롤 클릭을 가로챈다).
   그 면이 .fs-guide-fixed 를 덮어 GNB 구간만 세로선이 끊기므로 배경에 같은 4열 가이드를 직접 그린다. */
.nav{mix-blend-mode:normal;color:var(--fs-ink);
  background-color:var(--fs-paper);
  background-image:linear-gradient(90deg,var(--fs-grid-ink) 1px,transparent 1px);
  background-size:var(--fs-grid-step) 100%;
  background-position:-1px 0;
  background-repeat:repeat}
/* 영문 폰트를 상속에 맡기지 않는다 — index 는 body 가 Halenoir 라 맞았지만
   블로그는 body 가 Pretendard 여서 GNB 가 국문 폰트로 떨어졌다(2026-08-12 실측). */
.nav a{white-space:nowrap;font-family:var(--fs-font-en);font-size:var(--fs-text-label);font-weight:400;
  letter-spacing:var(--fs-ls-label);line-height:var(--fs-lh-label);color:var(--fs-ink);text-transform:uppercase}
.nav .fs-navlink::before,.nav .fs-navlink::after{content:none}
.nav a[aria-current]{opacity:1}
.nav a:hover{opacity:.6}

/* 챕터 묶음 — 한 셀 안 가로 배열이라 항목별 좌측 거터를 끈다. */
.nav .shifts{display:flex;gap:var(--fs-space-u4);padding-left:var(--fs-side);white-space:nowrap}
.nav .shifts a{padding-left:0}
/* SHIFT 접두는 전 폭에서 끈다 (2026-08-12).
   ≥1464px 에서 접두가 붙으면 묶음이 2열(화면 25%)을 58px 넘고, RECORD 독립 셀(3열)과 겹친다
   — 실측: ABOUT 869~915 / RECORD 857~931. 접두를 끄면 묶음이 778px 로 2열 안에 들어간다. */
.nav .shifts a::before{content:""}
/* RECORD 는 챕터 묶음 안에 둔다 — ABOUT·CONTACT 가 3·4열 가이드선을 지키게 하기 위해서다.
   (자체 열을 주면 CONTACT 가 가이드에서 떨어져 나온다 — 2026-08-12 라이브 좌표 대조로 확인) */
.nav .shifts a.navrec::before{content:""}  /* ABOUT 은 챕터가 아니다 */
/* RECORD 를 챕터 묶음 밖 독립 자리로 뺐다(2026-08-12 대표 지시 — 기록을 돋보이게).
   ABOUT 이 그 자리를 대신 채워 열 수가 그대로라, CONTACT 의 4열 가이드 정렬은 유지된다.
   강조는 항목 고정이 아니라 **현재 위치**에 준다 — 모든 메뉴 공통. */
.nav a[aria-current]{font-weight:600;opacity:1}

@media (min-width:810px) and (max-width:1463px){
  .nav .shifts{gap:var(--fs-space-u3)}
  .nav .shifts a::before{content:""}
}
@media (min-width:810px) and (max-width:1199px){
  .nav{grid-template-columns:repeat(2,minmax(1px,1fr));height:auto;
    row-gap:var(--fs-space-u2);padding-bottom:var(--fs-space-u3)}
}

/* 모바일 메뉴 */
/* MENU 버튼도 같은 EN 단 */
/* 햄버거 탭 타겟(2026-08-16 모바일 QA — chrome-only 페이지에서 13px 로 눌려 있었다).
   내비 그리드 행이 13px 라 stretch 로는 안 커진다 → 아래쪽 패딩으로 탭 박스만 넓힌다.
   패딩-top 은 0 이라 "MENU" 글자는 KIMJAMAE 와 같은 높이(내비 상단)에 그대로 선다. */
.menubtn{display:none;grid-column:2;justify-self:end;align-self:start;
  background:none;border:0;padding:0 var(--fs-side) clamp(22px,3vh,30px) var(--fs-side);color:inherit;cursor:pointer;
  font-family:var(--fs-font-en);font-weight:400;font-size:var(--fs-text-label);
  letter-spacing:var(--fs-ls-label);line-height:var(--fs-lh-label);text-transform:uppercase}
.menu{position:fixed;inset:var(--fs-nav-h) 0 0 0;z-index:calc(var(--fs-z-nav) - 1);
  background:var(--fs-paper);color:var(--fs-ink);
  display:flex;align-items:flex-start;padding:clamp(18px,5vh,44px) var(--fs-side)}
.menu[hidden]{display:none}
.menulist{display:flex;flex-direction:column;width:100%}
/* 메뉴 항목 — 데스크톱 상단 바와 동일한 영문 라벨(대문자). 직접 링크(.mlink)·아코디언 헤더(.macc-h) 공통.
   항목마다 세로 패딩 + 흐린 가로 라인으로 나눈다(2026-08-16 대표: "가로 라인은 흐리게"). */
.menulist .mlink,.menulist .macc-h{color:inherit;text-decoration:none;
  font-family:var(--fs-font-en);font-weight:400;font-size:clamp(15px,4.6vw,20px);
  letter-spacing:var(--fs-ls-label);text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:var(--fs-space-u4);
  padding:clamp(13px,2.8vh,19px) var(--fs-side)}
.menulist .macc-h{background:none;border:0;cursor:pointer;text-align:left;width:100%}
/* 흐린 가로 라인 — 최상위 항목 사이 + 위아래 마감(2026-08-16 대표: "가로 라인은 흐리게").
   색은 글자색의 16%(color-mix) — 인덱스의 어두운 메뉴에선 밝은 선, 서브의 밝은 메뉴에선 어두운 선으로 자동.
   1뎁스 라인은 좌우 여백 없이 메뉴 폭을 꽉 채운다(음수 마진으로 .menu 좌우 패딩 상쇄, 글자는 위 패딩으로 다시 들여씀).
   2뎁스(아코디언 하위) 라인은 .macc-p 패딩으로 지금처럼 들여쓰기 유지(대표 지시). */
.menulist > .mlink,.menulist > .macc{border-top:1px solid color-mix(in srgb, currentColor 16%, transparent);
  margin-left:calc(-1 * var(--fs-side));margin-right:calc(-1 * var(--fs-side))}
.menulist > :last-child{border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent)}
/* 인덱스 인라인 .menulist 의 gap 을 무력화(특이도 0,2,0 > 0,1,0)해 라인이 항목에 붙게 한다. */
.menu .menulist{gap:0}

/* 아코디언(RECORD·ABOUT)까지 담아 메뉴가 길어지므로 스크롤 가능하게(2026-08-16 대표 참고 이미지). */
.menu{overflow-y:auto;-webkit-overflow-scrolling:touch}
/* 셰브런 — 접힘 45°(아래) / 펼침 -135°(위) */
.macc-ch{flex:none;width:9px;height:9px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .22s var(--fs-ease)}
.macc-h[aria-expanded="true"] .macc-ch{transform:rotate(-135deg)}
.macc-p{display:flex;flex-direction:column;padding:0 var(--fs-side) clamp(8px,1.6vh,14px)}
.macc-p[hidden]{display:none}
/* 아코디언 하위 — 기록 글 제목·어바웃 링크(한글, 소문자·본색). 하위끼리도 같은 흐린 라인으로 나눈다. */
.msub{display:block;text-decoration:none;color:inherit;padding:clamp(9px,1.8vh,14px) 0;
  border-top:1px solid color-mix(in srgb, currentColor 16%, transparent)}
.msub .mr-t{display:block;font-family:var(--fs-font-kr);font-weight:600;
  font-size:16px;line-height:1.5;letter-spacing:-.01em}
.msub .mr-m{display:block;font-family:var(--fs-font-en);font-size:11px;
  letter-spacing:var(--fs-ls-label);opacity:.5;margin-top:.25em}
.msub[aria-current="page"] .mr-t{color:#263A99}

/* 푸터 — 본문과 같은 4열. 가로 라인 없음(2026-08-02 대표 지시), 열 사이 세로선은
   .fs-guide-fixed 가 화면 전체에 관통시키므로 여기서 덧그리지 않는다. */
.foot{background:var(--fs-paper);color:var(--fs-ink)}
.foot .fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.foot .fcell{display:flex;align-items:flex-end;
  padding:var(--fs-space-u4) var(--fs-space-u4) var(--fs-space-u4) var(--fs-side);
  font-family:var(--fs-font-en);font-weight:400;font-size:var(--fs-text-label);
  letter-spacing:var(--fs-ls-label);line-height:1.55;text-transform:uppercase}
.foot .fcell a{overflow-wrap:anywhere}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{opacity:.6}
.foot .sns{display:flex;gap:var(--fs-space-u3);align-items:center;margin-left:-8px}
.foot .sns a{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;padding:0;margin:0}
.foot .sns svg{width:21px;height:21px;display:block}

.only-m{display:none}
@media (max-width:810px){
  .only-m{display:inline}
  .foot .fgrid{grid-template-columns:1fr;min-height:0;row-gap:var(--fs-space-u4);padding:var(--fs-space-u4) 0}
  .foot .fcell{padding:0 var(--fs-side);align-items:flex-start}
  .foot .fcell:nth-child(1){order:1}
  .foot .fcell:nth-child(3){order:2}
  .foot .fcell:nth-child(2){order:3}
  .foot .fcell:nth-child(4){order:4;justify-content:flex-end}
}

@media (max-width:809px){
  /* 4열 가이드는 25/50/75 축이 있을 때만 의미가 있다 — 한 단인 모바일에선 노이즈다. */
  .fs-guide-fixed{display:none}
  .nav{background-image:none;grid-template-columns:1fr auto;height:auto;row-gap:0}
  :root{--fs-nav-h:56px}
  /* 손가락 목표 44px — 여백은 상하로만 주고 음수 마진으로 정렬선을 지킨다. */
  .nav a,.foot a{padding-top:15px;padding-bottom:15px;margin-top:-15px;margin-bottom:-15px}
  .nav .shifts,.nav .navutil{display:none}
  .menubtn{display:block;grid-column:2}
}