/* =========================================================
   header.css — orsia.co.kr 헤더 복제 (fonts + header + full menu)
   여러 페이지 공통 사용. index.html 등에서 <link href>로 연결.
   ========================================================= */

/* ---- 폰트/색/여백/글자크기는 token.css에서 정의 ----
   반드시 token.css를 header.css보다 먼저 로드할 것.
   (아래 규칙은 var(--token)만 사용 — 하드코딩 없음)         */

/* ---- reset (헤더 범위 최소 초기화) ----
   구조 리셋은 헤더 상태(new_header/서브페이지)와 무관하게 항상 적용해야
   서브페이지에서 불릿·기본 여백이 튀어나오지 않는다. 색/배경 차이는
   아래 .new_header 전용 규칙에서만 처리한다. */
header *,
header *::before,
header *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header ul,
header li {
  list-style: none;
}

header a {
  text-decoration: none;
  color: inherit;
}

/* 로고 크기 — 홈(new_header)/서브페이지 공통 적용 (헤더 상태와 무관하게 제한)
   display는 지정하지 않음: logo_w/logo_b 표시 전환 규칙을 덮지 않기 위함 */
header ._m_logo img {
  /* PC·태블릿: 100px(=6.25rem) 유지 / 모바일: 뷰포트 비율(14vw)로 자동 축소, 3rem(48px)까지 */
  max-width: clamp(3rem, 14vw, 6.25rem);
  height: auto;
}

/* ---- layout wrap ---- */
.wrap1900 {
  width: 90%;
  max-width: var(--container);
  margin: 0 auto;
}

.wrap1600 {
  width: 90%;
  max-width: 1600px;
  margin: 0 auto;
}

/* ========================= header ========================= */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-header);
  transition-duration: 0.6s;
}

.new_header {
  background-color: rgba(255, 255, 255, 0.8);
}

header .wrap1900 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo_w {
  display: block;
}

header .logo_b {
  display: none;
}

.new_header .logo_w {
  display: none;
}

.new_header .logo_b {
  display: block;
}

header .wrap1600 {
  display: flex;
}

header ._m_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

header nav {
  flex: 1;
}

header nav ._m_menu {
  display: flex;
  justify-content: center;
  color: var(--color-neutral-0);
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-lg);
  box-sizing: border-box;
}

header nav ._m_menu>li {
  position: relative;
}

header nav ._m_menu>li>a {
  display: block;
  width: 100%;
  padding: 41px 25px;
  font-weight: var(--fw-bold);
  box-sizing: border-box;
  text-transform: uppercase;
  position: relative;
}

header.new_header ._m_menu>li>a {
  color: var(--color-text);
}

header.new_header ._m_menu>li>a::after {
  background-color: var(--color-text);
}

header nav ._m_menu>li>a::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-neutral-0);
  position: relative;
  top: calc(100% - 40px);
  border-radius: 1px;
  transition: transform var(--transition);
  transform: scaleX(0);
  transform-origin: 100% 0;
}

/* ---- 대라벨(영문) + 소라벨(국문) 2줄 ---- */
header nav ._m_menu>li>a {
  text-align: center;
  line-height: 1.15;
  padding-top: 30px;
  padding-bottom: 30px;
}

header nav ._m_menu>li>a ._en {
  display: block;
}

header nav ._m_menu>li>a ._ko {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  opacity: 0.62;
}

header nav ._m_menu>li ._s_menu {
  position: absolute;
  top: 70%;
  min-width: 200px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-neutral-0);
  color: var(--color-text);
  padding: 15px 0;
  display: none;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}

header nav ._m_menu>li ._s_menu li {
  width: 100%;
  position: relative;
  text-align: center;
}

header nav ._m_menu>li ._s_menu li a {
  display: inline-block;
  width: auto;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  white-space: nowrap;
  padding: 10px 24px;
  transition-duration: 0.4s;
  position: relative;
}

header nav ._m_menu>li ._s_menu li a::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  position: relative;
  top: calc(100% - 40px);
  border-radius: 1px;
  transition: transform var(--transition);
  transform: scaleX(0);
  transform-origin: 100% 0;
}

header .hamWrap {
  width: 34px;
  display: flex;
  align-items: center;
  z-index: var(--z-overlay);
}

header .hamWrap .hambtn {
  width: 100%;
  height: 10px;
  position: relative;
  cursor: pointer;
  z-index: var(--z-overlay);
}

.hamWrap .hambtn {
  height: 15px !important;
}

header .hamWrap .hambtn span {
  width: 100%;
  height: 1px;
  background-color: var(--color-neutral-0);
  position: absolute;
  right: 0;
  transition-duration: 0.4s;
  transform: translateY(-50%);
}

.new_header .hamWrap .hambtn span {
  background-color: var(--color-text);
}

header .wrap_right {
  display: flex;
  align-items: center;
  gap: 15px;
}

header .hamWrap .hambtn span:nth-of-type(1) {
  top: 0;
}

.hamWrap .hambtn span:nth-of-type(2) {
  top: 7px;
}

.hamWrap .hambtn span:nth-of-type(3) {
  bottom: 0;
}

header .hamWrap .hambtn.active span {
  background-color: var(--color-text);
}

header .hamWrap .hambtn.active span:nth-of-type(1) {
  transform: rotate(45deg) translate(0%, -50%);
  top: 50%;
}

header .hamWrap .hambtn.active span:nth-of-type(2) {
  transform: rotate(-45deg) translate(0%, -50%);
  bottom: 50%;
}

.hamWrap .hambtn.active span:nth-of-type(3) {
  opacity: 0;
}

header.on {
  transform: translateY(-100%);
}

header.bg {
  background-color: var(--color-text);
}

.new_header.bg {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.new_header.bg2 {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

/* ========================= full menu (햄버거 전체메뉴) ========================= */
header .ham {
  width: 100%;
  display: flex;
  height: 100vh;
  background-color: var(--color-neutral-0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  transform: translateY(-100%);
  transition: 0.6s;
}

header .ham.on {
  opacity: 1;
  transform: translateY(0);
}

header .ham .hamimg {
  width: calc(720 / 1920 * 100%);
  background-image: url(../image/header/hamMenu.jpg);
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

header .ham .totalM {
  width: calc(1200 / 1920 * 100%);
  height: 100%;
}

header .ham .totalM .__wrap_m {
  width: 90%;
  height: 100%;
  max-width: 920px;
  padding-left: 5%;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header .ham .totalM .__wrap_m>ul {
  width: 100%;
  box-sizing: border-box;
}

header .ham .totalM .__wrap_m>ul:last-of-type>li:last-of-type {
  min-height: unset;
}

header .ham .totalM .__wrap_m>ul>li {
  min-height: 120px;
}

header .ham .totalM .__wrap_m>ul>li>a {
  display: inline-block;
  font-size: var(--fs-h1);
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  position: relative;
  transition: color var(--transition);
}

header .ham .totalM .__wrap_m>ul>li>a::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: calc(100% + 0.2em);
  transform: translateY(-50%);
  width: 37px;
  height: 37px;
  background-image: url(../image/header/star_ham.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--transition);
}

header .ham .totalM .__wrap_m>ul>li>.lsm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 15px;
}

header .ham .totalM .__wrap_m>ul>li>.lsm li {
  position: relative;
  width: 100%;
}

header .ham .totalM .__wrap_m>ul>li>.lsm li a {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  color: var(--color-body-muted);
  padding: 6px 0;
  text-align: left;
  position: relative;
}

/* 세로 목록 — 가로용 밑줄/구분선 제거 */
header .ham .totalM .__wrap_m>ul>li>.lsm li a::after {
  display: none;
}

header .ham .totalM .__wrap_m>ul>li>.lsm li::after {
  display: none;
}

header .ham .totalM .__wrap_m>ul>li>.lsm li:first-of-type a {
  padding-left: 0;
}

header .ham .totalM .__wrap_m>ul>li>.lsm li:last-of-type a {
  padding-right: 0;
}

/* ========================= hover (PC) ========================= */
@media screen and (min-width: 821px) {
  header nav ._m_menu>li:hover>a::after {
    transform: scaleX(100%);
    transform-origin: 0 0;
  }

  header nav ._m_menu>li ._s_menu li a:hover::after {
    transform: scaleX(100%);
    transform-origin: 0 0;
  }

  header .ham .totalM .__wrap_m>ul>li:hover>a::after {
    opacity: 1;
  }

  header .ham .totalM .__wrap_m>ul>li:hover>a {
    color: var(--color-bg);
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li:hover a::after {
    transform: scaleX(100%);
    transform-origin: 0 0;
  }
}

/* ========================= 반응형 ========================= */
@media screen and (max-width: 1600px) {
  header .ham .totalM .__wrap_m>ul>li>.lsm li a {
    padding: 0 20px;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li:first-of-type {
    padding-left: 0;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li:last-of-type {
    padding-right: 0;
  }
}

@media screen and (max-width: 1440px) {
  header .wrap1600 {
    justify-content: space-between;
  }

  header ._m_logo {
    padding-left: 0;
  }

  header nav {
    width: auto;
  }

  header nav ._m_menu {
    padding-left: 0;
  }

  header .ham .totalM .__wrap_m>ul>li {
    min-height: 110px;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm {
    margin-top: 20px;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li a {
    font-size: var(--fs-base);
  }}

@media screen and (max-width: 1280px) {
  header ._m_logo {
    /* 앵커는 로고 이미지에 맞게 감싸도록(고정 px 제거) → 이미지 clamp 비율이 그대로 반영 */
    width: auto;
  }

  header nav ._m_menu>li a {
    padding: 35px 15px;
  }

  header .ham .totalM .__wrap_m>ul>li {
    min-height: 100px;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm {
    margin-top: 20px;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li a {
    font-size: var(--fs-sm);
    padding: 6px 0;
  }}

@media screen and (max-width: 1080px) {
  header nav {
    display: none;
  }

  header ._m_logo {
    padding: 20px 0;
  }
}

@media screen and (max-width: 1000px) {
  header nav ._m_menu>li a {
    padding: 30px 10px;
    font-size: var(--fs-sm);
  }

  header nav ._m_menu>li ._s_menu {
    min-width: 180px;
  }

  header nav ._m_menu>li ._s_menu li a {
    font-size: var(--fs-sm);
  }
}

@media screen and (max-width: 820px) {
  header ._m_logo {
    padding: 20px 0;
  }

  header nav {
    display: none;
  }

  header .hamWrap .hambtn.active span {
    background-color: var(--color-neutral-0);
  }

  header .ham .hamimg {
    display: none;
  }

  header .ham .totalM {
    width: 100%;
    position: relative;
    background-image: url(../image/header/ham_mobbg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--color-neutral-0);
  }

  header .ham .totalM::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-header);
  }

  header .ham .totalM .__wrap_m {
    position: relative;
    z-index: var(--z-overlay);
    padding-left: 0;
  }
  /* 모바일: 소분류를 가로 일렬 대신 세로로 쌓기 (항목이 많아도 옆으로 밀리지 않게) */
  header .ham .totalM .__wrap_m>ul>li>.lsm {
    flex-direction: column;
    align-items: flex-start;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li {
    width: 100%;
  }

  /* 가로 정렬용 '|' 구분선 숨김 */
  header .ham .totalM .__wrap_m>ul>li>.lsm li::after {
    display: none;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li a {
    width: 100%;
    padding: 3px 0;
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li:first-of-type a {
    padding-left: 0;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li:last-of-type a {
    padding-right: 0;
  }
}

@media screen and (max-width: 600px) {
  header .ham .totalM .__wrap_m {
    align-items: flex-start;
    justify-content: center;
  }

  header .ham .totalM .__wrap_m>ul {
    width: 100%;
  }

  header .ham .totalM .__wrap_m>ul:first-of-type {
    padding-right: 0;
  }

  header .ham .totalM .__wrap_m>ul>li {
    min-height: 85px;
  }
  header .ham .totalM .__wrap_m>ul>li>.lsm {
    margin-top: 0;
  }

  header .ham .totalM .__wrap_m>ul>li>.lsm li a {
    padding: 4px 0;
  }
}

@media screen and (max-width: 500px) {
  header ._m_logo {
    padding: 10px 0;
  }

  header .hamWrap {
    width: 23px;
  }
}

/* ---- 모바일 전체메뉴(ham) 국문 소라벨 ---- */
header .ham .lm ._en {
  display: inline;
}

header .ham .lm ._ko {
  display: inline-block;
  margin-left: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  opacity: 0.6;
}

/* ========================================================= */
/* CTA 버튼 (PC 헤더 아이콘 + 태블릿/모바일 하단 고정 바)      */
/* ========================================================= */

/* ---- PC: 헤더 인라인 CTA ---- */
header .header_cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 햄버거 버튼과 간격 확보 */
  margin-right: var(--space-4);
}

header .hcta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition),
    border-color var(--transition);
}

header .hcta .hcta__ic {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* 전화하기 = 아웃라인(고스트) — 기본(투명/히어로 위, 흰 텍스트) 상태 */
header .hcta--call {
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--color-neutral-0);
}

header .hcta--call:hover {
  background-color: var(--color-neutral-0);
  border-color: var(--color-neutral-0);
  color: var(--color-primary);
}

/* 관심고객 등록 = primary 채움 */
header .hcta--reg {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-neutral-0);
}

header .hcta--reg:hover {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

/* new_header(라이트 배경) 상태 — 전화 버튼은 어두운 아웃라인 */
header.new_header .hcta--call {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

header.new_header .hcta--call:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-neutral-0);
}

/* ---- 태블릿/모바일: 하단 고정 CTA 바 (기본 숨김) ---- */
.cta_bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
}

.cta_bar .cta_item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 58px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  transition: background-color var(--transition);
}

.cta_bar .cta_item .hcta__ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.cta_bar .cta--call {
  background-color: var(--color-neutral-0);
  color: var(--color-primary);
}

.cta_bar .cta--call:active {
  background-color: var(--color-primary-50);
}

.cta_bar .cta--reg {
  background-color: var(--color-primary);
  color: var(--color-neutral-0);
}

.cta_bar .cta--reg:active {
  background-color: var(--color-primary-700);
}

/* ≤1080: PC 아이콘 숨기고 하단 바 노출 */
@media screen and (max-width: 1080px) {
  header .header_cta {
    display: none;
  }

  .cta_bar {
    display: flex;
    box-shadow: 0 -2px 18px rgba(36, 25, 23, 0.14);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* 하단 바 높이만큼 여백 확보 — 콘텐츠/푸터가 바에 가리지 않게 */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
}

@media screen and (max-width: 500px) {
  .cta_bar .cta_item {
    height: 54px;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-normal);
  }

  body {
    padding-bottom: calc(54px + env(safe-area-inset-bottom));
  }
}