/* ==========================================================================
   ADERS — 공통 스타일 (새 디자인)
   --------------------------------------------------------------------------
   모든 페이지가 이 파일 하나를 함께 씁니다.
   여기를 고치면 메인·회사소개·사업안내에 동시에 반영됩니다.

   목차
     01. 디자인 토큰      색·글꼴·여백
     02. 기본 리셋
     03. 공통 부품        eyebrow / 제목 / 버튼 / 카드
     04. 헤더
     05. 전체화면 메뉴
     06. 푸터
     07. 반응형
     08. 한 칸씩 넘어가는 스크롤
   ========================================================================== */


/* ==========================================================================
   01. 디자인 토큰 — 피그마 실측값
   ========================================================================== */
:root {
  --navy:       #19296D;   /* 히어로 바탕 */
  --blue:       #0123B4;   /* 버튼 */
  --hair:       #949494;   /* 헤더 실선 */
  --ink:        #383838;   /* 밝은 카드 위 글자 */
  --ink-deep:   #1A2530;   /* 표 본문 */
  --navy-text:  #16324F;   /* 밝은 배경의 제목 */
  --news-top:   #051533;
  --news-bot:   #052A72;
  --dark:       #242424;   /* 어두운 섹션 바탕 */

  /* 사업 카드 5색
     사진 위에 덮는 그라디언트에도 쓰려고 숫자(빨강 초록 파랑)만 따로 둡니다.
       rgb(var(--c-houber-n))       → 그냥 그 색
       rgb(var(--c-houber-n) / .4)  → 40%만 진한 같은 색 (사진이 비쳐 보입니다)
     색을 바꾸실 때는 아래 숫자 줄만 고치면 두 군데가 같이 바뀝니다. */
  --c-houber-n:  0 12 62;
  --c-nubi-n:   86  0  1;
  --c-startup-n: 0 54 32;
  --c-legal-n:  43 11  0;
  --c-it-n:     39  0 91;

  --c-houber:  rgb(var(--c-houber-n));
  --c-nubi:    rgb(var(--c-nubi-n));
  --c-startup: rgb(var(--c-startup-n));
  --c-legal:   rgb(var(--c-legal-n));
  --c-it:      rgb(var(--c-it-n));

  /* 글꼴 순서 : 영문·일본어는 Noto Sans JP, 한글은 Noto Sans KR (시안과 같은 글꼴).
     Noto Sans JP 에는 한글이 없어서, 예전에는 한글이 기기 글꼴(맥: 애플 SD 고딕)로 나와
     시안보다 가늘어 보였습니다 (10/20). 둘 다 못 불러오면 기기 글꼴을 씁니다. */
  --font:    "Noto Sans JP", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-en: "Montserrat", "Noto Sans JP", sans-serif;

  /* 좌우 여백 — 1440px 기준 헤더·본문 120px, 히어로 글 185px */
  --pad:      clamp(20px, 8.33vw, 120px);
  --pad-hero: clamp(24px, 12.85vw, 185px);

  --ease: cubic-bezier(.2,.7,.2,1);

  /* 첫 화면 인트로(로딩 화면)의 바탕색 — 로딩 화면 시안 실측값 */
  --intro-bg: #1A1A1A;

  /* 스르륵 나타나기 (시안의 animate__fadeInUp)
     --up-dist  아래에서 떠오르는 거리. 크게 할수록 움직임이 큽니다
     --up-time  나타나는 데 걸리는 시간
     --up-ease  빠르게 시작해 부드럽게 멈추는 곡선 */
  --up-dist: 34px;
  --up-time: .9s;
  --up-ease: cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   02. 기본 리셋
   ========================================================================== */
* { box-sizing: border-box; }

/* 칸 이동과 앵커 이동을 브라우저가 부드럽게 처리하도록 합니다.
   자바스크립트로 매 프레임 밀지 않아 훨씬 매끄럽습니다. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; font-family: var(--font); background: #fff; color: #111; }

/* --- 휴대폰(아이폰) 기본 손질 ---------------------------------------------
   · text-size-adjust : 아이폰을 가로로 돌렸을 때 사파리가 글씨를 멋대로 키우지 않게 합니다
   · tap-highlight    : 링크를 누를 때 생기는 회색 네모를 없앱니다 (눌림 효과는 각 버튼이 따로 가짐)
   · keep-all         : 한국어는 단어 중간에서 줄이 바뀌지 않게 합니다 ("만들어갑/니다" 방지).
                        일본어는 띄어쓰기가 없어 keep-all 을 걸면 줄이 안 바뀌므로 한국어 페이지에만 겁니다.
   · overflow-wrap    : 긴 이메일 주소처럼 끊을 곳이 없는 글자는 그래도 화면 안에서 줄을 바꿉니다
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; }
html:lang(ko) body { word-break: keep-all; }
/* 한국어 페이지 안의 일본어 글(개인정보 보호정책 본문, 상호명 등)은 원래대로 글자 단위로 줄을 바꿉니다 */
html:lang(ko) [lang="ja"] { word-break: normal; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; word-break: keep-all; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* 화면에는 안 보이지만 스크린리더는 읽는 텍스트 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}


/* ==========================================================================
   03. 공통 부품
   ========================================================================== */

/* 섹션 머리 라벨 — "COMPANY ——" 형태 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-en); font-weight: 600; font-size: 16px; letter-spacing: .04em;
}
.eyebrow::after { content: ""; width: 53px; height: 1px; background: currentColor; opacity: .75; }

/* 섹션 제목 — 48px, 줄간격 72px */
/* 각 칸의 큰 제목 — 모든 페이지 공통. 굵기를 바꾸려면 여기 font-weight 만 고치세요.
   (2026-10-20 시안 코멘트 "볼드체 적용" 으로 400 → 700) */
.sec-title { font-size: clamp(28px, 3.33vw, 48px); font-weight: 700; line-height: 1.5; }

/* 파란 알약 버튼 */
.btn-blue {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 57px; padding: 0 26px 0 31px; border-radius: 28.5px;
  background: var(--blue); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: .5px;
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.btn-blue:hover { transform: translateY(-2px); filter: brightness(1.14); }
.btn-blue svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* 동그란 테두리 아이콘 — 카드·푸터에서 공통으로 씁니다 */
.ico-ring {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 51px; height: 51px;
  border: 1px solid rgba(255,255,255,.85); border-radius: 50%;
}
.ico-ring svg { width: 22px; height: 22px; }

/* 로고 */
/* --------------------------------------------------------------------------
   로고 — 모든 페이지의 헤더 · 메뉴 · 푸터가 이 한 곳을 씁니다 (10/22 로고로 교체)
   · 모양은 assets/images/logo.svg, 색은 color(글자색)를 그대로 따라갑니다.
     (CSS mask 로 그림 모양만 빌려 오고 색은 background 로 칠합니다)
   · 크기는 높이(height)만 정하면 가로는 로고 비율(151:59)대로 맞춰집니다.
   · 로고 파일을 바꾸면 아래 ?v= 날짜를 올려주세요.
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; }
.brand__logo {
  display: block; height: 44px; aspect-ratio: 151 / 59; background-color: currentColor;
  -webkit-mask: url("../images/logo.svg?v=20261022") center / contain no-repeat;
          mask: url("../images/logo.svg?v=20261022") center / contain no-repeat;
}


/* ==========================================================================
   04. 헤더 — 사진 위에 투명하게 얹힙니다
   ========================================================================== */
.head {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; height: 80px; padding: 0 var(--pad);
  color: #fff;
}
.head::after {
  content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0;
  height: 1px; background: var(--hair); opacity: .55;
}
.nav { display: flex; align-items: center; gap: 56px; margin-left: 56px; }
.nav a { font-size: 16px; font-weight: 700; white-space: nowrap; }
.nav a:hover { opacity: .72; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; }
.lang { margin-left: auto; margin-right: 100px; font-size: 16px; font-weight: 700; }

.menu-btn {
  position: absolute; top: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  width: 100px; height: 80px; border: 0; background: var(--blue); color: #fff;
  font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer;
}
/* 메뉴 버튼은 모든 페이지에서 파란 상자 + 흰 글씨입니다 (10/20 시안, 예전에는 흰 상자).
   색을 바꾸려면 위 background(바탕)와 color(글씨), 아래 줄무늬 background 를 같이 고치세요. */
.menu-btn__bars { display: grid; gap: 3px; }
.menu-btn__bars i { display: block; width: 18px; height: 2px; background: #fff; }
.menu-btn__bars i:last-child { width: 12px; margin-left: auto; }

/* --------------------------------------------------------------------------
   헤더 밝은 판 — 사진 없이 흰 바탕 위에 놓이는 페이지(사업 안내 등)에서 씁니다.
   <header class="head head--light"> 처럼 클래스를 하나 더 붙이면 됩니다.
   -------------------------------------------------------------------------- */
.head--light { position: sticky; top: 0; background: #fff; color: #111; }
.head--light .brand { color: var(--blue); }
.head--light::after { background: var(--hair); opacity: .45; }
/* 메뉴 버튼은 이제 모든 페이지에서 파란 상자라 밝은 판에서 따로 바꿀 것이 없습니다 */

/* --------------------------------------------------------------------------
   위로 올리면 나타나는 헤더 (메인 · 회사 소개) — 동작은 shared.js 7번
   · .head--float : 화면 맨 위에 붙는 흰 헤더 (처음엔 위로 숨겨 둠)
   · .is-shown    : 위로 스크롤하는 동안 내려와 보임
   -------------------------------------------------------------------------- */
.head--float {
  position: fixed; background: #fff; color: #111;
  box-shadow: 0 6px 20px rgba(17, 24, 39, .08);
  transform: translateY(-100%); transition: transform .35s var(--ease);
}
.head--float.is-shown { transform: none; }
.head--float .brand { color: var(--blue); }
.head--float::after { opacity: 0; }
/* 헤더 아래 구분선 없애기 — <header class="head head--noline"> (메인, 10/22 요청) */
.head--noline::after { display: none; }


/* ==========================================================================
   06. 푸터 — 모든 페이지 공통
   --------------------------------------------------------------------------
   문의 카드 + 오른쪽 이동 목록 + 로고 + FAMILY SITE + SNS + 저작권
   ========================================================================== */
.foot { position: relative; padding: 152px var(--pad) 40px; color: #fff; overflow: hidden; background: #55606B; }
.foot__photo { position: absolute; inset: 0; background: url("../images/footer.jpg?v=20261019") center/cover; }
/* 사진 위에 덮는 막.
   예전에는 밝은 회색(190,195,200)을 씌워 사진이 뿌옇게 바랬습니다.
   원본 시안처럼 사진이 그대로 보이도록 어두운 막으로 바꿨습니다.
   글씨가 안 읽히면 아래 숫자(.42 / .68)만 조금 올리면 됩니다. */
.foot__veil  { position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(8,12,18,.42) 0%, rgba(8,12,18,.70) 100%); }
.foot__inner { position: relative; z-index: 1; }

.foot__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
}
.foot__title { font-size: clamp(28px, 3.33vw, 48px); font-weight: 900; line-height: 1.5; }

/* --------------------------------------------------------------------------
   푸터 오른쪽 이동 목록 (HOME / ABOUT / BUSINESS / NEWS / CONTACT)
   시안대로 이 화면에만 둡니다. 다른 칸에서는 오른쪽에 붙어 다니는
   동그라미 막대(.sidenav)가 같은 일을 합니다.
   -------------------------------------------------------------------------- */
.foot__nav {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: clamp(9px, 1.5vh, 17px);
  margin-top: 6px; flex: 0 0 auto;
}
.foot__nav a {
  font-family: var(--font-en);
  font-size: clamp(13px, 1.25vw, 18px); font-weight: 400; letter-spacing: .09em;
  color: rgba(255,255,255,.92); white-space: nowrap;
  transition: opacity .3s var(--ease);
}
.foot__nav a:hover { opacity: .6; }

/* 문의 카드 — 시안대로 한 장만 둡니다.
   늘리고 싶으면 HTML 의 .foot__card 덩이를 복사하고 아래 400px 만 손보세요. */
.foot__cards { display: grid; grid-template-columns: minmax(0, 400px); gap: 30px; margin-top: clamp(44px, 10vh, 116px); }
.foot__card {
  display: flex; flex-direction: column; gap: 24px;
  /* 10/16 시안 투명도 실측값 — 바탕 위 흰색 약 22% */
  padding: 30px; border-radius: 20px; background: rgba(255,255,255,.22);
  transition: background .35s var(--ease);
}
.foot__card:hover { background: rgba(255,255,255,.3); }
.foot__card-top { display: flex; align-items: center; gap: 16px; }
.foot__card-title { font-size: 20px; font-weight: 700; }
/* 평소에는 반투명, 카드에 마우스를 올리면 흰 버튼으로 바뀝니다 (시안대로) */
.foot__card-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 252px; max-width: 100%;
  height: 57px; padding: 0 22px; border-radius: 28.5px;
  background: rgba(255,255,255,.16); color: rgba(255,255,255,.82);
  font-size: 14px; font-weight: 700;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.foot__card:hover .foot__card-btn,
.foot__card-btn:focus-visible { background: #fff; color: #000; }
.foot__card-btn svg { width: 18px; height: 18px; }

.foot__rule { margin: 56px 0 34px; height: 1px; background: rgba(255,255,255,.45); }

/* --------------------------------------------------------------------------
   푸터 아래 줄 — 네 칸 (10/20 시안)
   [로고·개인정보·저작권 320px] [회사 정보] [이메일] [FAMILY SITE]
   칸 너비를 바꾸려면 grid-template-columns 만 고치세요.
   -------------------------------------------------------------------------- */
.foot__bottom {
  display: grid; grid-template-columns: 320px minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 40px; align-items: start; font-size: 14px;
}
.foot__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; align-self: stretch; }
.foot__legal { display: flex; flex-direction: column; gap: 14px; font-size: 12px; }
/* --------------------------------------------------------------------------
   FAMILY SITE — 누르면 위쪽으로 계열 사이트 목록이 펼쳐집니다
   주소를 바꾸려면 HTML 의 .family__item 의 href 를 고치세요.
   -------------------------------------------------------------------------- */
.family { position: relative; }

.foot__family {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,.9); border-radius: 4px;
  background: transparent; color: inherit; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.foot__family:hover { background: #fff; color: #111; }
/* 펼쳐지면 + 가 - 로 바뀝니다 */
.foot__family i { font-style: normal; }

/* 펼쳐지는 목록 — 버튼 위쪽에 놓입니다 */
/* 버튼이 오른쪽 끝에 있어서, 목록도 오른쪽 끝에 맞춰 버튼 아래로 펼칩니다 */
.family__list {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 3;
  display: grid; gap: 6px; min-width: 190px;
}
.family__list[hidden] { display: none; }
.family__list.is-open { animation: family-in .32s var(--ease) both; }
@keyframes family-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.family__item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: 40px; padding: 0 14px;
  border: 1px solid rgba(17,17,17,.14); border-radius: 4px;
  background: #fff; color: #111;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  transition: background .25s var(--ease);
}
.family__item svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* 마우스를 올린 항목만 옅은 파랑으로 (시안대로) */
.family__item:hover { background: #CFE4FB; }

@media (prefers-reduced-motion: reduce) {
  .family__list.is-open { animation: none; }
}
.foot__sns { display: flex; align-items: center; gap: 18px; }
.foot__sns a { color: #fff; transition: opacity .3s var(--ease); }
.foot__sns a:hover { opacity: .65; }
.foot__sns svg { width: 26px; height: 26px; }
.foot__copy { font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.85); }

.foot__logo .brand__logo { height: 60px; }

/* 회사 정보 — "이름 값" 을 한 줄에 붙여 씁니다 (시안대로) */
.foot__rows { display: grid; gap: 4px; margin: 0; line-height: 1.75; }
.foot__row { display: flex; flex-wrap: wrap; gap: 0 8px; }
.foot__row dt { font-weight: 700; }
.foot__row dd { margin: 0; color: rgba(255,255,255,.88); }
.foot__gap { margin-top: 20px; }   /* 주소 묶음과 면허 묶음 사이 한 줄 */

/* 사업부별 이메일 — 이름(굵게) 아래에 주소 */
.foot__mail { display: grid; gap: 16px; margin: 0; line-height: 1.6; }
.foot__mail dt { font-weight: 700; }
.foot__mail dd { margin: 4px 0 0; color: rgba(255,255,255,.88); overflow-wrap: anywhere; }
.foot__mail a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 상호명처럼 일본어로 적는 칸은 일본어 글꼴로 (lang="ja" 를 붙인 칸) */
.foot [lang="ja"] { font-family: "Noto Sans JP", sans-serif; }

/* 개인정보 보호정책 — 저작권 왼쪽에 놓습니다 */
.foot__privacy {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; letter-spacing: .02em;
}
.foot__privacy svg { width: 14px; height: 14px; flex: 0 0 auto; }
.foot__privacy:hover { text-decoration: underline; text-underline-offset: 3px; }



/* ==========================================================================
   07. 반응형
   ========================================================================== */
@media (max-width: 1180px) {
  .nav { gap: 30px; margin-left: 30px; }
  .lang { margin-right: 92px; }
  /* 노트북 폭 : 로고 칸을 좁히고 FAMILY SITE 를 정보 아래로 */
  .foot__bottom { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); }
  .foot__bottom .family { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .foot__cards { grid-template-columns: 1fr; gap: 16px; margin-top: 60px; }
}
@media (max-width: 700px) {
  .head { height: 68px; }
  .menu-btn { width: 76px; height: 68px; }
  .lang { margin-right: 72px; font-size: 14px; }
  .brand__logo { height: 34px; }
  .foot { padding-top: 96px; }
  /* 좁은 화면에서는 제목 아래로 내려 왼쪽 정렬합니다 (옆에 두면 둘 다 눌립니다) */
  .foot__top { flex-direction: column; gap: 26px; }
  .foot__nav { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 14px 20px; }
  /* 휴대폰 : 네 칸을 위아래로 쌓습니다. 개인정보·저작권은 맨 아래로 */
  .foot__bottom { grid-template-columns: 1fr; gap: 30px; }
  .foot__bottom .family { grid-column: auto; }
  .foot__brand { display: contents; }
  .foot__legal { order: 9; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}


/* ==========================================================================
   08. 옆에 붙어 다니는 빠른 이동 막대
   --------------------------------------------------------------------------
   화면 오른쪽 가운데에 점 다섯 개로 떠 있습니다.
   글이나 사진을 가리지 않도록 평소에는 점만 보이고,
   마우스를 올리면 이름(HOME · ABOUT …)이 왼쪽으로 펼쳐집니다.
   ========================================================================== */
.sidenav {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 10px; border-radius: 22px;
  background: rgba(18, 24, 36, .42);
  transition: background .35s var(--ease);
  /* 흐림(backdrop-filter)은 쓰지 않습니다. 고정 요소에 걸면 스크롤할 때마다
     화면 전체를 다시 계산하느라 눈에 띄게 끊깁니다. */
}
.sidenav:hover { background: rgba(18, 24, 36, .62); }

.sidenav a {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  height: 26px; padding-right: 3px; color: #fff;
}

/* 이름표 — 평소에는 접혀 있습니다 */
.sidenav__label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  opacity: 0; transition: max-width .38s var(--ease), opacity .28s var(--ease), margin .38s var(--ease);
}
.sidenav:hover .sidenav__label { max-width: 90px; opacity: .95; margin-right: 10px; }

/* 점 */
.sidenav__dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sidenav a:hover .sidenav__dot { background: #fff; transform: scale(1.25); }

/* 지금 보고 있는 칸 */
.sidenav a.is-on .sidenav__dot {
  background: #fff; transform: scale(1.45);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .22);
}
.sidenav a.is-on .sidenav__label { opacity: 1; }


/* ==========================================================================
   09. 전체화면 메뉴
   --------------------------------------------------------------------------
   오른쪽 위 [메뉴] 버튼을 누르면 화면 전체를 덮으며 열립니다.
   배경은 히어로 사진을 어둡게 깐 것입니다.
   ========================================================================== */
.menu {
  /* 디자인대로 화면 오른쪽 절반에 붙는 판입니다.
     왼쪽에는 보고 있던 페이지가 그대로 남아 있습니다. */
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(48vw, 880px); min-width: 560px;
  display: flex; flex-direction: column;
  /* 시안 지시: 메뉴 클릭시 fade in.
     옆에서 밀려 들어오는 움직임(transform)은 빼고 서서히 나타나기만 합니다. */
  opacity: 0; visibility: hidden;
  transition: opacity .42s var(--ease), visibility .42s var(--ease);
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__photo { position: absolute; inset: 0; background: #0B0D11 url("../images/hero.jpg?v=20261029") center/cover; }
/* 판 왼쪽 가장자리에 가는 선을 둬 페이지와 구분합니다 */
.menu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
                background: rgba(255,255,255,.28); z-index: 3; }
.menu__veil  { position: absolute; inset: 0; background: rgba(8, 11, 16, .84); }

/* 닫기 버튼 — 메뉴 버튼과 같은 자리, 같은 크기 */
.menu__close {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  /* 10/29 시안 : 닫기 버튼도 메뉴 버튼과 같은 파란 상자 + 흰 글씨 */
  width: 100px; height: 80px; border: 0; background: var(--blue); color: #fff;
  font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer;
}
.menu__close svg { width: 22px; height: 22px; }

.menu__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  flex: 1; padding: clamp(96px, 13vh, 150px) clamp(28px, 4vw, 56px) 40px; color: #fff;
  overflow-y: auto;
}

/* 큰 항목 네 개 — HOME | 회사소개 | BUSINESS | CONTACT */
.menu__top {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.menu__head {
  font-family: var(--font-en); font-size: clamp(15px, 1.25vw, 20px); font-weight: 700;
  letter-spacing: .01em; transition: opacity .3s var(--ease);
}
.menu__head:hover { opacity: .68; }

/* 작은 항목들 */
.menu__group { position: relative; display: flex; flex-direction: column; align-items: center; }

/* 항목 사이 세로 줄 — 칸과 칸 경계에 세웁니다 */
.menu__group:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 6px;
  width: 1px; height: 26px; background: rgba(255, 255, 255, .45);
}
.menu__sub { display: flex; flex-direction: column; align-items: center;
             gap: clamp(12px, 2.2vh, 22px); margin-top: clamp(14px, 2.6vh, 24px); }
.menu__sub a { font-size: clamp(13px, 1.05vw, 16px); font-weight: 700; white-space: nowrap; transition: opacity .3s var(--ease); }
.menu__sub a:hover { opacity: .62; }

/* 아래 줄 — 로고 · FAMILY SITE · 저작권 */
.menu__rule { margin: auto 0 24px; height: 1px; background: rgba(255, 255, 255, .38); }
.menu__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.menu__foot .brand__logo { height: 44px; }
.menu__family {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.menu__copy { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
/* 개인정보 보호정책 + 저작권 — 시안대로 오른쪽에 위아래로 */
.menu__legal { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.menu__legal .menu__copy { margin-left: 0; }
.menu__privacy { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.menu__privacy svg { width: 14px; height: 14px; flex: 0 0 auto; }
.menu__privacy:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 메뉴가 열린 동안에는 뒤쪽 화면이 움직이지 않게 합니다.
   스크롤 주체가 <html> 이라 두 곳 모두에 걸어줍니다. */
html.menu-open, html.menu-open body { overflow: hidden; }


/* ==========================================================================
   10. 반응형 — 이동 막대와 메뉴
   ========================================================================== */
@media (max-width: 1200px) {
  /* 판이 화면을 다 덮습니다. 좁은 곳에서 절반만 쓰면 글이 뭉칩니다. */
  .menu { width: 100%; min-width: 0; }
  .menu__inner { padding-left: var(--pad); padding-right: var(--pad); }
  .menu::before { display: none; }
  .menu__head { font-size: clamp(18px, 2.2vw, 26px); }
  .menu__sub a { font-size: 16px; }
}
@media (max-width: 820px) {
  .menu__top { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .menu__group:not(:last-child)::after { display: none; }
}
@media (max-width: 900px) {
  /* 좁은 화면에서는 이동 막대를 숨깁니다. 메뉴 버튼으로 충분합니다. */
  .sidenav { display: none; }
}
@media (max-width: 700px) {
  .menu__close { width: 76px; height: 68px; }
  .menu__inner { padding: 96px var(--pad) 32px; }
  .menu__top { grid-template-columns: 1fr; gap: 34px; }
  .menu__group { align-items: flex-start; }
  .menu__sub { align-items: flex-start; gap: 16px; }
  .menu__foot { gap: 18px; }
  .menu__copy { margin-left: 0; width: 100%; }
  .menu__legal { margin-left: 0; width: 100%; align-items: flex-start; }
}


/* ==========================================================================
   11. 한 화면에 한 칸
   --------------------------------------------------------------------------
   원페이지 스크롤(<html class="snap">)을 쓰는 페이지에서는, 붙잡히는 칸이
   화면 높이에 딱 맞아야 자연스럽게 넘어갑니다. 칸이 화면보다 조금이라도
   길면 아래가 잘려 보이고, 짧으면 다음 칸이 비쳐 어색합니다.

   · data-free 를 붙인 칸과 푸터는 대상이 아닙니다 (길이가 자유로운 곳)
   · 속 내용은 가운데에 놓고, 남는 자리는 위아래 여백이 나눠 가집니다
   · 화면이 낮을 때(노트북 등)는 여백이 알아서 줄어듭니다
   ========================================================================== */
html.snap body > section:not([data-free]) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* safe 를 붙이는 이유
     내용이 화면보다 길어지면 그냥 center 는 위아래로 똑같이 밀어내서
     위쪽 글이 화면 밖으로 올라가 버립니다. safe 를 붙이면 그럴 때만
     위 정렬로 물러나므로 첫 줄이 잘리지 않습니다. */
  justify-content: safe center;
}

/* 화면이 아주 낮거나 좁으면 한 화면 맞추기를 풀어줍니다.
   억지로 맞추면 글씨가 잘립니다. */
@media (max-width: 900px), (max-height: 620px) {
  html.snap body > section:not([data-free]) { min-height: 0; display: block; }
}


/* ==========================================================================
   12. 첫 화면 인트로 (로딩 화면)
   --------------------------------------------------------------------------
   사이트에 처음 들어왔을 때와 새로고침했을 때, 사이트보다 먼저 보이는
   검은 화면 + 로고입니다.

   · "언제, 몇 초 동안" 은 assets/js/intro.js 의 `인트로설정` 에서 고칩니다.
     여기서는 "어떻게 생겼는지" 만 정합니다.
   · 평소에는 display:none 이라 아예 그려지지 않습니다.
     intro.js 가 <html> 에 intro-play 를 붙였을 때만 나타납니다.
     (이렇게 해야 인트로를 건너뛸 때 검은 화면이 깜빡이지 않습니다)
   ========================================================================== */
.intro { display: none; }

html.intro-play .intro {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--intro-bg);
  /* 걷히는 시간은 intro.js 가 넣어줍니다 */
  opacity: 1;
  transition: opacity .48s var(--ease);
}

/* 검은 화면이 걷히는 중 */
.intro.is-done { opacity: 0; pointer-events: none; }
/* 다 끝나서 완전히 치운 상태 — 클릭을 가로채지 않도록 */
html.intro-play .intro.is-off { display: none; }

/* 로고 + 문구 묶음. 이 묶음이 통째로 서서히 나타났다 사라집니다. */
.intro__body {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 2vw, 30px);
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.intro__body.is-in { opacity: 1; }

.intro__logo { width: clamp(230px, 20vw, 400px); height: auto; }

.intro__slogan {
  margin: 0; color: #fff; font-weight: 700;
  font-size: clamp(12px, .95vw, 15px); letter-spacing: .01em;
  text-align: center; word-break: keep-all;
}

/* 인트로가 떠 있는 동안에는 뒤 페이지가 움직이지 않게 잠급니다 */
html.intro-on, html.intro-on body { overflow: hidden; }

/* 움직임을 줄이도록 설정한 분에게는 위쪽 07 의 공통 규칙이 이미 전환을
   없애 주고, intro.js 가 기다리는 시간도 따로 짧게 잡습니다. */


/* ==========================================================================
   13. 스르륵 나타나기 (fadeInUp) 와 숫자 롤링
   --------------------------------------------------------------------------
   시안의 animation 프레임 지시를 옮긴 것입니다.

   · HTML 에 data-up 을 붙이면, 그 칸이 화면에 들어올 때 아래에서 떠오릅니다.
       <h1 data-up>제목</h1>
       <div data-up data-up-delay="1000">…</div>   1초 늦게
   · data-roll 을 붙이면 숫자가 슬롯머신처럼 돌아갑니다.
       <span data-roll>1200+</span>
   · 움직임을 맡는 것은 assets/js/animate.js 입니다.
   · 거리·시간은 위 01. 디자인 토큰의 --up-dist / --up-time / --up-ease 에서 고칩니다.

   html.anim 은 animate.js 가 붙이는 표시입니다.
   자바스크립트가 꺼져 있으면 표시가 안 붙으므로 글이 처음부터 그냥 다 보입니다.
   ========================================================================== */
html.anim [data-up] {
  opacity: 0;
  transform: translateY(var(--up-dist));
  transition: opacity var(--up-time) var(--up-ease),
              transform var(--up-time) var(--up-ease);
}
html.anim [data-up].is-in { opacity: 1; transform: none; }


/* 숫자 롤링 --------------------------------------------------------------
   자리마다 기둥(roll__col)을 세우고, 그 안의 긴 띠(roll__strip)를 위로 올려
   마지막 칸(= 목표 숫자)이 보이게 합니다. 기둥은 딱 한 칸 높이만 보여줍니다.
   한 칸의 높이를 1em 으로 맞춰 두었기에, 자바스크립트가 translateY(-39em)
   처럼 "몇 칸" 단위로 정확히 올릴 수 있습니다. */
.roll { display: inline-flex; align-items: flex-start; }

.roll__col {
  display: block; overflow: hidden;
  height: 1em;                       /* 한 칸만 보이게 잘라냅니다 */
}
.roll__strip { display: block; will-change: transform; }
.roll__strip > span,
.roll__fix {
  display: block;
  height: 1em; line-height: 1em;     /* 칸 높이 = 글자 크기. 이래야 딱 맞게 멈춥니다 */
}

/* 눈에는 안 보이지만 읽기 프로그램이 읽는 원래 숫자 */
.roll__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}