@charset "UTF-8";

/* ============================================
   SS Header (공용) - 웹 Figma 2928:54922 (Section/Top, 1200x90)
                      모바일 Figma I2967:30676 (Section/Top, 375 / 프레임 2960:10426)
   ============================================
   [요소] 좌: 로고(워드마크 138.589x16) | 우: Nav(기업 소개 / 서비스 소개 / 스타일셀러 파트너) + 채용 버튼
   [없는 요소] 입점문의 버튼 없음(현행 new-nav에는 있으나 시안에서 빠짐)
   [없는 요소] 모바일 로고 오른쪽 71x12 슬롯 — 시안에 박스만 있고 내용이 없다 → 구현하지 않음

   컨테이너: background #FFFFFF, padding 30px 24px 15px, row, align-items flex-start, justify-content center
   내부 row: gap 435, align-items center
   로고: 박스 259x16 / 워드마크 SVG 138.589x16 좌측 정렬
   Nav: row gap 24 / Nav/Bar row gap 12
   메뉴 항목: padding 10px 12px, 17.5px 500, lh 1.5, ls -0.01em, #000, center
   채용 버튼: #E5EAFF, radius 10, padding 12px 15px, 17.5px 600, lh 1.2, ls -0.0086em, #375CFF

   높이 90 = padding-top 30 + 콘텐츠 45(채용 버튼 12+21+12) + padding-bottom 15
   → 기존 헤더(new-nav ≈87, rc-header 90)와 동일 급. z-index 1000도 동일
   ============================================ */
.ss-header {
  --ss-header-pad-top: 30px; /* Figma 컨테이너 padding */
  --ss-header-pad-x: 24px; /* Figma 컨테이너 padding */
  --ss-header-pad-bottom: 15px; /* Figma 컨테이너 padding */
  --ss-header-nav-gap: 24px; /* Nav: Nav/Bar ↔ 채용 버튼 */
  --ss-header-bar-gap: 12px; /* Nav/Bar: 메뉴 항목 간 */
  --ss-header-menu-pad: 10px 12px; /* 메뉴 항목 */

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--ss-header-pad-top) 0 var(--ss-header-pad-bottom);
  background: #ffffff;
}

/* 컨테이너 1200 안에서 좌우 24 패딩 → 설계폭(프레임 1204)에서 Figma 좌표 재현 */
.ss-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--ss-header-pad-x);
  display: flex;
  align-items: center;
  /* Figma gap 435는 설계폭 1204에서의 잔여값 → space-between으로 이식 */
  justify-content: space-between;
}

.ss-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.ss-header__logo img {
  width: 138.589px; /* 워드마크 실측 */
  height: 16px;
}

.ss-header__nav {
  display: flex;
  align-items: center;
  gap: var(--ss-header-nav-gap);
  flex-shrink: 0;
}

.ss-header__bar {
  display: flex;
  align-items: center;
  gap: var(--ss-header-bar-gap);
}

.ss-header__bar a {
  padding: var(--ss-header-menu-pad);
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #000000;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* 현재 페이지 표시 — 사용자 지시(2026-08-12).
   시안에 없는 값이고, 굵기 700 은 채용 헤더(recruit/style.css
   .rc-header-menu--active)에서 가져왔다. 굵기 외에는 아무것도 바꾸지 않는다.
   훅으로 클래스 대신 aria-current="page" 를 쓴다(스크린리더 현재 위치 안내 겸용).
   대상은 자기 페이지 링크가 있는 business-introduce / service-introduce 뿐이다
   — 메인(index.html)은 메뉴에 자기 항목(/)이 없어 해당 없음 */
.ss-header__bar a[aria-current="page"] {
  font-weight: 700;
}

.ss-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 15px;
  border-radius: 10px;
  background: #e5eaff;
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.2;
  letter-spacing: -0.0086em;
  color: #375cff;
  text-decoration: none;
  white-space: nowrap;
}

/* 햄버거 — 768 이하에서만 노출. Figma I2967:30676 우측
   박스 28x28, 글리프 inset 21.55% 10.71% → 가로 78.58%(=22.002) / 세로 56.9%(=15.932)
   inset 을 padding 으로 이식: 세로 28×0.2155=6.034 / 가로 28×0.1071=2.999
   바 두께는 시안에 없어 기존 2px 유지 → gap = (15.932 − 2×3) ÷ 2 = 4.966 */
.ss-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4.966px;
  /* reset.css가 button에는 box-sizing을 주지 않는다 */
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 6.034px 2.999px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ss-header__toggle span {
  display: block;
  width: 100%; /* = 22.002px (28 − 2.999×2) */
  height: 2px;
  background: #000000;
}

/* 모바일 슬라이드 메뉴 — 파생: 현행 new-m-nav 패턴, 클래스만 ss-header 접두 */
.ss-header__m-nav {
  display: none;
}

@media screen and (max-width: 1024px) {
  .ss-header {
    /* 기존 관례(new-nav 1024): padding 20px 30px 15px */
    --ss-header-pad-top: 20px;
    --ss-header-pad-x: 30px;
  }
}

@media screen and (max-width: 768px) {
  /* 모바일 실측 - Figma I2967:30676: padding 60px 20px 15px, row, center, space-between
     Figma layout 은 position: sticky; top: 0 이지만 이 헤더는 position: fixed 를 유지한다.
     둘 다 상단 고정이라 렌더는 같고, 흐름 점유분은 히어로 padding-top 이 흡수한다
     (main.css .main-hero 768 분기 주석 참조). fixed 는 웹·타 페이지와 공유하는 값이라 건드리지 않는다

     padding-top 은 Figma 실측 60(높이 103) → **사용자 지시로 15**(상단 여백을 하단과
     동일하게, 모든 페이지 헤더 공통). 좌우 20 은 그대로다.
     높이 58 = padding-top 15 + 콘텐츠 28(햄버거) + padding-bottom 15 */
  .ss-header {
    --ss-header-pad-top: 15px;
    --ss-header-pad-x: 20px;
  }

  /* 로고 박스 height 12, 워드마크 종횡비 139:16 → width 104.25 */
  .ss-header__logo img {
    width: auto;
    height: 12px;
    aspect-ratio: 139 / 16;
  }

  .ss-header__nav {
    display: none;
  }

  .ss-header__toggle {
    display: flex;
  }

  /* ============================================
     모바일 드로어 - Figma 메인 3310:13558 / 채용 3310:13628 (프레임 645x480)
     ============================================
     시안 프레임 645 는 430pt 기기의 1.5배 스크린샷 좌표계다. 근거 3가지:
       px-30 ÷ 1.5 = 20   → 이 헤더의 모바일 좌우 패딩과 일치
       divider 585 ÷ 1.5 = 390 = 430 − 20×2
       로고 18.417 ÷ 1.5 = 12.28 → 이 헤더의 모바일 로고 height 12 와 일치
     아래 값은 전부 「시안값 ÷ 1.5」이며 주석에 원값을 남긴다.

     [요소] 메뉴 행(h90) → 브랜드 행(h100: 워드마크 + 영문 워드마크 + 국문 + 화살표)
     [없는 요소] 시안 최상단 로고 행(h100)은 이 드로어가 그리지 않는다 —
       고정 헤더(z-index 1000)가 드로어 위에 그대로 떠 있어 같은 자리를 이미 차지한다
     구분선: 일반 #E6E6E6 / 메뉴 그룹과 브랜드 그룹 사이 1줄만 검정 (시안 Vector 326)
     ============================================ */
  .ss-header__m-nav {
    --ss-mnav-row: 60px; /* 시안 90 */
    --ss-mnav-brand-row: 66.667px; /* 시안 100 */
    --ss-mnav-gap: 5.333px; /* 시안 gap 8 */
    --ss-mnav-line: 0.933px; /* 시안 stroke-width 1.4 */

    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900; /* 헤더(1000)보다 아래 → 햄버거로 닫을 수 있다 */
    /* 파생: 헤더 로고 하단(pad-top 15 + 로고 12 = 27) + 시안의 로고 행 잔여 여백
       (행 66.667 − 로고 하단 39.47 = 27.2) = 54.2 */
    padding: 54.2px 20px 0;
    overflow-y: auto; /* 항목이 늘어 화면을 넘기면 드로어 안에서 스크롤한다 */
    background: #ffffff;
  }

  .ss-header__m-nav--open {
    display: block;
  }

  /* 행 공통 — 구분선은 행마다 아래쪽 1줄. 드로어 좌우 패딩 20 안쪽이라 폭 390 이 된다 */
  .ss-header__m-nav a {
    display: flex;
    align-items: center;
    height: var(--ss-mnav-row);
    border-bottom: var(--ss-mnav-line) solid #e6e6e6;
    font-weight: 600; /* 시안 SemiBold */
    font-size: 16px; /* 시안 24 */
    line-height: 1.8; /* 시안 leading 1.8 */
    letter-spacing: -0.0104em; /* 시안 -0.25px @24 */
    color: #000000;
    text-decoration: none;
  }

  /* 메뉴 그룹 ↔ 브랜드 그룹 경계 1줄만 검정 */
  .ss-header__m-nav a.ss-header__m-divide {
    border-bottom-color: #000000;
  }

  /* 브랜드 행 — 워드마크 + 영문 워드마크 + 국문 라벨 + 화살표 */
  .ss-header__m-nav a.ss-header__m-brand {
    gap: var(--ss-mnav-gap);
    height: var(--ss-mnav-brand-row);
  }

  /* 에셋별 실크기 — 전역 규칙 금지(종류가 다르다) */
  .ss-header__m-mark {
    width: 104px; /* 시안 155.999 */
    height: 12.278px; /* 시안 18.417 */
    flex-shrink: 0;
  }

  .ss-header__m-sub {
    width: auto; /* PARTNER 102x18 → 68x12 / CAREERS 103x18 → 68.7x12 */
    height: 12px;
    flex-shrink: 0;
  }

  .ss-header__m-arrow {
    width: 10.667px; /* 시안 16 */
    height: auto; /* 17x14 종횡비 유지 → 8.8 */
    flex-shrink: 0;
  }

  .ss-header__m-label {
    font-weight: 500; /* 시안 Pretendard Medium */
    font-size: 13.333px; /* 시안 20 */
    letter-spacing: -0.0125em; /* 시안 -0.25px @20 */
  }

  /* 앱 다운로드 — 사용자 지시(2026-08-26): new-ss-home 의
     src/shared/components/header 의 MobileStoreRow / MobileStoreChip 과 동일하게 맞춘다.
     그쪽 값 그대로다 — Row: wrap, gap 8, px 20 / Chip: py 7 px 14, gap 10, radius 14,
     Pretendard 17.5px 500 lh 1.5 ls -0.175px / iOS #000·#999999, Android #F2F2F2·#000
     좌우 20 은 드로어가 이미 갖고 있어 Row 에서는 0 으로 둔다.
     위 20 은 그쪽 MobileMenuPanel 의 블록 간 gap, 아래 32 는 그 패널의 padding-bottom */
  .ss-header__m-apps {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 0 32px;
  }

  .ss-header__m-nav a.ss-header__m-app {
    flex: 0 0 auto; /* 내용 폭 — 늘리지 않는다 */
    justify-content: center;
    gap: 10px;
    height: auto; /* py 7 + 줄상자 26.25 = 40.25 */
    padding: 7px 14px;
    border-bottom: 0;
    border-radius: 14px;
    font-weight: 500; /* 위 .ss-header__m-nav a 의 600 을 덮는다 */
    font-size: 17.5px;
    line-height: 1.5;
    letter-spacing: -0.175px;
  }

  /* .ss-header__m-nav a 가 color 를 잡고 있어 a 를 붙여 특정도를 맞춘다 */
  .ss-header__m-nav a.ss-header__m-app--ios {
    background: #000000;
    color: #999999;
  }

  .ss-header__m-nav a.ss-header__m-app--android {
    background: #f2f2f2;
    color: #000000;
  }

  /* 두 아이콘 모두 16x16 박스에 contain — new-ss-home MobileStoreChip img 와 동일.
     종횡비가 다른 두 에셋이지만 박스 규격이 같은 것이 그쪽 정본이라 함께 둔다
     (icon_apple 16x20 → 12.8x16, icon_google_play 20x20 → 16x16) */
  .ss-header__m-app-icon--apple,
  .ss-header__m-app-icon--google {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
  }

  /* 현재 페이지 표시 — 위 .ss-header__bar 규칙과 같은 사용자 지시(2026-08-12).
     모바일에서는 드로어가 유일한 메뉴라 여기에 표시가 없으면 "내가 어디 있는지"가
     드러나지 않는다. 기본 굵기가 600 이라 PC(500→700)보다 대비가 작다 */
  .ss-header__m-nav a[aria-current="page"] {
    font-weight: 700;
  }
}