/* Start custom CSS for html, class: .elementor-element-6d0e67d *//* =============== 공통 안전 패치 =============== */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }
html { scroll-behavior: smooth; }

/* 브레이크포인트 & 헤더 높이(기본값) */
:root{
  --bp-mobile: 842px;   /* 모바일 ≤842px / 데스크톱 ≥843px */
  --header-h: 60px;     /* 데스크톱 헤더 높이(기본) */
}
@media (max-width: 842px){
  :root{ --header-h: 60px; } /* 모바일 기본 높이 */
}

/* 본문을 헤더만큼 아래로 내려서 항상 눈에 보이는 여백 확보 */
body { padding-top: var(--header-h); }

/* =============== 상단바: 항상 고정(fixed) =============== */
header.topbar{
  position: fixed !important; /* sticky 대신 fixed로 안정 고정 */
  top: 0; left: 0; right: 0;
  z-index: 10000;
  width: 100%;
  background: #ffffffd9;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* sticky 방해 요소 무력화(테마 래퍼들) */
.site, .site-wrap, .site-wrapper, .page-wrap, .container {
  overflow: visible !important;
  transform: none !important;
}

/* 메뉴는 항상 보이게 (테마의 display:none 덮어쓰기) */
.topbar .menu { display: flex !important; }

/* 헤더 내부 기본 정렬 + 중앙 가드레일 */
.topbar .nav{
  display: flex; align-items: center; gap: 20px;
  max-width: 1200px; margin: 0 auto;
  padding: 0 20px;
}
.topbar .btn { white-space: nowrap; }

/* =============== 데스크톱(≥843px): 메뉴 오른쪽 정렬 =============== */
@media (min-width: 843px){
  .topbar .nav{ justify-content: flex-start; }
  .topbar .brand{ margin-right: auto; }          /* 좌/우 분리 */
  .topbar .menu{
    gap: 14px;
    justify-content: flex-end;                   /* 메뉴 오른쪽 정렬 */
    align-items: center;
    flex: 0 1 auto; min-width: 0;
  }
  .topbar .btn{ flex: 0 0 auto; margin-left: 14px; }

  /* 데스크톱 타이포(필요 시 조절) */
  .hero h1 { font-size: 40px; line-height: 1.25; letter-spacing: -0.01em; }
  .hero p  { font-size: 18px; line-height: 1.65; }
  .title   { font-size: 28px; line-height: 1.3; }
  p, li, .note { font-size: 16px; line-height: 1.6; }
  .topbar .menu a { font-size: 16px; }
  .topbar .btn, .btn { font-size: 16px; }
}

/* =============== 모바일(≤842px): 메뉴 항상 보임 + 버튼 오른쪽, 넘침 방지 =============== */
@media (max-width: 842px){
  /* 헤더 좌우 여백/노치 대응 */
  .topbar .nav{ flex-wrap: wrap; row-gap: 8px; padding: 0 16px; }
  @supports (padding: max(0px)){
    .topbar .nav{
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
  }

  /* 1행: 로고 단독 */
  .topbar .brand{
    flex: 1 1 100%; margin-right: 0;
    min-width: 0; overflow-wrap: anywhere;
  }

  /* 2행: 메뉴(좌) + 버튼(우) */
  .topbar .menu{
    order: 2;
    display: flex !important;
    flex: 1 1 auto; min-width: 0;
    flex-wrap: wrap; gap: 12px 14px;
    justify-content: flex-start; align-items: center;

    /* 버튼 영역(약 132px) 확보: 필요하면 140~160px로 늘리세요 */
    max-width: calc(100% - 132px);
  }
  .topbar .menu a{
    white-space: normal;           /* 줄바꿈 허용 */
    word-break: keep-all;          /* 한국어 자연 줄바꿈 */
    overflow-wrap: anywhere;       /* 긴 영문/URL도 개행 */
    min-width: 0;
  }
  .topbar .btn{
    order: 2;
    margin-left: auto;             /* 같은 줄 오른쪽 끝 */
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* 모바일 타이포(필요 시 조절) */
  .hero{ padding: 56px 0; }
  .hero h1 { font-size: 26px; line-height: 1.3; letter-spacing: -0.01em; }
  .hero p  { font-size: 14px; line-height: 1.7; max-width: 38ch; }
  .title   { font-size: 14px; line-height: 1.3; }
  p, li, .note { font-size: 12px; line-height: 1.5; }
  .topbar .menu a { font-size: 12px; }
}

/* =============== 앵커 이동 시 헤더에 가리지 않게(헤더 높이만큼) =============== */
html{ scroll-padding-top: var(--header-h); }/* End custom CSS */