/* hero-default 스킨 전용 — twb-hero-default__* 만 사용 (다른 스킨·섹션과 클래스 충돌 없음) */
section.twb-section[data-twb-skin="hero-default"] {
  width: 100%;
}

.twb-hero-default {
  /* 히어로 자동 스케일 — 플러그인에서 calc(var(--hero-*) * var(--hero-scale)) 만 적용 */
  --base-h1: 72px;
  --base-h1-px: 72;
  --base-h2: 72px;
  --base-h2-px: 72;
  --base-h3: 9px;
  --base-h3-px: 9;
  --base-p: 24px;
  --base-p-px: 24;
  /* Align gap/button bases with hero-center (autoscale + typography). */
  --base-gap-badge-title: 48px;
  --base-gap-badge-title-px: 48;
  --base-gap-title-desc: 48px;
  --base-gap-title-desc-px: 48;
  --base-gap-desc-actions: 64px;
  --base-gap-desc-actions-px: 64;
  --base-gap-actions: 20px;
  --base-gap-actions-px: 20;
  --base-btn-font-size: 20px;
  --base-btn-font-size-px: 20;
  --base-btn-pad-y: 28px;
  --base-btn-pad-y-px: 28;
  --base-btn-pad-x: 60px;
  --base-btn-pad-x-px: 60;
  --twb-hero-base-gap-badge-title: 3rem;
  --twb-hero-base-gap-title-desc: 3rem;
  --twb-hero-base-gap-desc-actions: 4rem;
  --twb-hero-base-gap-actions: 1.25rem;
  --twb-hero-base-btn-font-size: 1.25rem;
  --twb-hero-base-btn-pad-y: 1.75rem;
  --twb-hero-base-btn-pad-x: 3.75rem;
  --twb-hero-base-btn-radius: 1rem;
  --twb-hero-base-btn-min-height: 0px;
  --twb-hero-base-btn-min-w: auto;
  --twb-hero-base-padding-y: 5rem;
  --twb-hero-base-padding-x: 4.5rem;
  --twb-hero-base-grid-gap: 3rem;
  --twb-hero-base-badge-pad-y: 0.3rem;
  --twb-hero-base-badge-pad-x: 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  max-width: 80rem;
  margin: 0 auto;
  overflow: hidden;
  padding: var(--twb-hero-padding-y, var(--twb-hero-base-padding-y))
    var(--twb-hero-padding-x, var(--twb-hero-base-padding-x));
}

.twb-hero-default__bg-layer {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.twb-hero-default__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* iframe 이 음수 z-index 로 부모 배경 뒤로 가면 영상만 안 보이고 소리만 나는 현상 방지 */
  isolation: isolate;
}

.twb-hero-default__video-bg-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77vh;
  height: 100%;
  min-width: 100%;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
  z-index: 0;
}

.twb-hero-default__video-bg-inner {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.twb-hero-default__video-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.twb-hero-default__video-bg-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 섹션 등장(fade-up 등)은 그리드·콘텐츠에만 — 배경·영상은 형제 레이어로 고정 */
.twb-hero-default__section-motion {
  position: relative;
  z-index: 1;
  width: 100%;
}

.twb-hero-default__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--twb-hero-grid-gap, var(--twb-hero-base-grid-gap));
  align-items: start;
}

.twb-hero-default__content {
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.twb-hero-default__content[data-twb-content-align="center"] {
  align-items: center;
}

.twb-hero-default__content[data-twb-content-align="right"] {
  align-items: flex-end;
}

.twb-hero-default__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: var(--twb-hero-gap-badge-title, var(--twb-hero-base-gap-badge-title));
  gap: 0.5rem;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: var(--twb-hero-badge-pad-y, var(--twb-hero-base-badge-pad-y))
    var(--twb-hero-badge-pad-x, var(--twb-hero-base-badge-pad-x));
  border-radius: 999px;
  background: #f5f4f4;
  border: 0;
  color: #1b1718;
  font-size: var(--twb-hero-fs-h3, var(--twb-typo-size-h3, var(--base-h3, 9px)));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.twb-hero-default__content[data-twb-content-align="center"] .twb-hero-default__badge {
  align-self: center;
}

.twb-hero-default__content[data-twb-content-align="right"] .twb-hero-default__badge {
  align-self: flex-end;
}

.twb-hero-default__title {
  margin: 0 0 var(--twb-hero-gap-title-desc, var(--twb-hero-base-gap-title-desc)) 0;
  font-size: var(--twb-hero-fs-h1, var(--twb-typo-size-h1, var(--base-h1, 72px)));
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: #18181b;
}

.twb-hero-default__desc {
  margin: 0 0 var(--twb-hero-gap-desc-actions, var(--twb-hero-base-gap-desc-actions)) 0;
  font-size: var(--twb-hero-fs-p, var(--twb-typo-size-p, var(--base-p, 24px)));
  line-height: 1.6;
  color: #52525c;
  font-weight: 500;
  word-break: keep-all;
  white-space: pre-wrap;
}

.twb-hero-default__actions {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--twb-hero-gap-actions, var(--twb-hero-base-gap-actions));
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 640px) {
  .twb-hero-default__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
    max-width: none;
  }
}

.twb-hero-default__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  padding: var(--twb-hero-btn-pad-y, var(--twb-hero-base-btn-pad-y))
    var(--twb-hero-btn-pad-x, var(--twb-hero-base-btn-pad-x));
  border-radius: var(--twb-hero-btn-radius, var(--twb-hero-base-btn-radius));
  font-size: var(--twb-hero-btn-font-size, var(--twb-hero-base-btn-font-size));
  min-width: var(--twb-hero-btn-min-w, var(--twb-hero-base-btn-min-w));
  font-weight: 900;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  user-select: none;
  -webkit-user-select: none;
}

@media (min-width: 640px) {
  .twb-hero-default__btn {
    width: auto;
  }
}

.twb-hero-default__btn--primary {
  background: #000;
  color: #fff !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.twb-hero-default__btn--primary:hover {
  background: #27272a;
}

.twb-hero-default__btn--secondary {
  background: #fff;
  color: #18181b;
  border: 1px solid #e4e4e7;
  font-weight: 700;
  box-shadow: none;
}

.twb-hero-default__btn--secondary:hover {
  background: #f4f4f5;
}

@media (max-width: 1024px) {
  .twb-hero-default {
    --base-h1: 52px;
    --base-h1-px: 52;
    --base-h2: 52px;
    --base-h2-px: 52;
    --twb-hero-base-padding-y: 3.25rem;
    --twb-hero-base-padding-x: 2.5rem;
  }
}