/* =========================================================================
   hero.css — 메인 히어로(.main_station) 전용 가독성·타이포 보정
   -------------------------------------------------------------------------
   작성 원칙
   1) 모든 선택자를 .main_station 으로 스코프한다.
      → .regen_txt / .tit_ani / .container / .m70 등 공통 클래스를 쓰더라도
        다른 섹션(s1~s10, 푸터, 헤더)에는 절대 영향이 가지 않는다.
   2) 기존 CSS 파일(common/header/main/mobile/slider-custom/site)은 수정하지 않는다.
      되돌리려면 index.html 의 <link> 한 줄만 지우면 원상복구된다.
   3) 크기는 브레이크포인트 점프 없이 clamp() + min(vw, svh) 로 연속 스케일.
      화면 폭뿐 아니라 "화면 높이"에도 반응하므로 가로모드·짧은 노트북에서
      히어로 텍스트가 잘리지 않는다.
   4) 골드는 아껴 쓴다. 배경 영상이 골드 파도이므로, 골드 텍스트를 줄이고
      본문성 문구를 뉴트럴 화이트로 돌려 골드 포인트를 오히려 살린다.
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. 히어로 헤드라인 전용 세리프 페이스
   -------------------------------------------------------------------------
   네이버 maru-buri.css 는 굵기별로 "다른 패밀리 이름"을 쓰고
   font-weight 디스크립터를 선언하지 않는다. 그래서 'MaruBuri' 에
   font-weight:700 을 주면 실제 Bold 가 아니라 Regular 에 브라우저가
   합성 볼드(faux bold)를 입힌다 — 56px 세리프에서 획이 뭉개지는 원인.
   실제 SemiBold 페이스를 600~700 구간 담당으로 등록해 합성을 없앤다.
   font-display:swap 이라 폰트 로딩 중에도 헤드라인이 사라지지 않는다.
   (원본 CSS 에는 font-display 가 없어 최대 3초간 텍스트가 안 보일 수 있었다.)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "MaruBuriHero";
  src: url("https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}


/* -------------------------------------------------------------------------
   1. 스크림 — 텍스트가 앉는 자리만 눌러 골드 파도는 살린다
   -------------------------------------------------------------------------
   배경 영상(r_main)은 화면 중앙~하단에 밝은 골드 파도가 지나간다.
   기존 스크림은 반경이 좁아(62% 56%) 파도 마루를 다 덮지 못했고,
   그 위에 샴페인색 텍스트가 얹혀 "골드 위 골드"가 되고 있었다.
   넓고 낮은 타원으로 텍스트 밴드만 감싸면, 화면 좌·우 끝의 파도는
   그대로 밝게 남아 비주얼은 유지되고 글자 뒤만 어두워진다.
   ------------------------------------------------------------------------- */
.main_station .hero-scrim {
  background:
    /* 텍스트 블록을 감싸는 넓고 낮은 비네트 */
    radial-gradient(
      74% 48% at 50% 50%,
      rgba(3, 7, 20, 0.66) 0%,
      rgba(3, 7, 20, 0.5) 46%,
      rgba(3, 7, 20, 0.18) 78%,
      rgba(3, 7, 20, 0) 100%
    ),
    /* 상단 — 헤더 로고/메뉴 가독 확보 */
    linear-gradient(180deg, rgba(2, 6, 18, 0.62) 0%, rgba(2, 6, 18, 0) 22%),
    /* 하단 — 스크롤 인디케이터 앵커 + 다음 섹션으로의 연결 */
    linear-gradient(0deg, rgba(2, 6, 18, 0.58) 0%, rgba(2, 6, 18, 0) 20%);
}


/* -------------------------------------------------------------------------
   1-b. 메인 영상 — img 포스터 + 연한 오버레이 + 네이티브 재생버튼 숨김
   ------------------------------------------------------------------------- */
.main_station .regen-video-container {
  background: #0a0a0a;
}

.main_station .regen-video-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.2);
}

/* iOS/WebKit 기본 재생 아이콘 숨김 */
.main_station .video-layer video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}
.main_station .video-layer video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.main_station .video-layer video::-webkit-media-controls-enclosure {
  display: none !important;
}


/* -------------------------------------------------------------------------
   2. 세로 리듬 — 화면 높이에 반응하는 간격
   -------------------------------------------------------------------------
   .m70(7rem=70px) 같은 공통 여백 클래스가 히어로에도 걸려 있어
   짧은 화면에서 텍스트를 밀어낸다. 공통 클래스는 두고, 히어로 안에서만
   높이 비례 값으로 덮어쓴다.
   ------------------------------------------------------------------------- */
/* 덩어리 사이 간격 — 위에서 아래로 갈수록 좁아지는 리듬을 만든다.
   아이브로↔헤드라인(가장 좁게) < 상단블록↔하단블록(가장 넓게) 순으로
   덩어리 경계가 눈에 먼저 읽히게 한다. */
.main_station .main-hero .regen_txt {
  gap: clamp(20px, 4.2vh, 44px);
  gap: clamp(20px, 4.2svh, 44px);
}

.main_station .main-hero .hero-ani-top {
  gap: clamp(14px, 2.8vh, 30px);
  gap: clamp(14px, 2.8svh, 30px);
}

/* 히어로 세로 중심 보정 — 상단 헤더(80px)가 화면 위를 덮고 있어
   기하학적 중앙에 놓으면 시각적으로는 위로 치우쳐 보인다.
   가려지는 만큼을 상단 패딩으로 되돌려 광학 중심을 맞춘다. */
.main_station .main-hero {
  padding-top: clamp(24px, 4.6vh, 56px);
  padding-top: clamp(24px, 4.6svh, 56px);
}

/* 페이지네이션 — 텍스트 덩어리와 분리되는 간격을 명시적으로 준다.
   (아래 .hero-ani-bottom margin-bottom:0 과 한 세트) */
.main_station .main-hero-pagination.swiper-pagination {
  margin-top: clamp(26px, 4.4vh, 48px);
  margin-top: clamp(26px, 4.4svh, 48px);
}

/* mobile.css 의 .regen_txt > span:first-child b { margin-bottom:5vw } 가
   히어로 헤드라인에도 걸린다. 원저자 의도(margin:0)를 히어로에서만 복원. */
.main_station .main-hero .hero-ani-top b {
  margin: 0;
  line-height: inherit;
}

/* 공통 .m70(=70px) 하단 여백 제거.
   플렉스 세로 중앙 정렬은 "여백까지 포함해서" 중앙을 잡기 때문에,
   블록 아래에만 붙은 70px 여백이 눈에 보이는 글자 덩어리를 35px 위로 밀어
   가운데 정렬이 어긋나 보이는 원인이었다. 간격은 페이지네이션 쪽에서 준다. */
.main_station .main-hero .hero-ani-bottom {
  margin-bottom: 0;
}

.main_station .main-hero .hero-ani-bottom::before {
  display: none;
}

.main_station .main-hero .hero-ornament {
  display: block;
  width: min(58vw, 560px);
  height: 56px;
  margin: 2px auto;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

.main_station .main-hero .hero-ornament canvas {
  display: block;
  width: 100%;
  height: 100%;
}


/* -------------------------------------------------------------------------
   3. 아이브로(리드 문장) — 골드 유지, 자간만 한글에 맞게
   -------------------------------------------------------------------------
   현재 0.24em. 라틴 레터링에는 맞지만 한글 문장에서는 어절 덩어리가
   흩어져 "읽히지 않고 보이기만" 한다. 0.14em 으로 좁혀 여백감은 남기고
   읽는 단위를 되살린다. 줄어든 자간만큼 굵기를 300→400 으로 보완.
   크기는 768px 경계에서 27.6px → 20px 로 역전되던 문제를 clamp 로 제거.
   ------------------------------------------------------------------------- */
.main_station .main-hero .hero-ani-top > .main_tit_ani {
  /* 하단 "끝까지 책임지고 관리합니다." 와 동일 사이즈 */
  font-size: clamp(21px, min(4.8vw, 6.2vh), 32px) !important;
  font-size: clamp(21px, min(4.8vw, 6.2svh), 32px) !important;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.45;
  color: rgba(240, 226, 190, 0.98);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* 양옆 골드 헤어라인도 같은 스케일로 */
.main_station .main-hero .hero-ani-top > .main_tit_ani::before,
.main_station .main-hero .hero-ani-top > .main_tit_ani::after {
  width: clamp(22px, min(6vw, 3.4vh), 44px);
  width: clamp(22px, min(6vw, 3.4svh), 44px);
}

.main_station .main-hero .hero-ani-top > .main_tit_ani {
  gap: clamp(10px, min(3vw, 2vh), 18px);
  gap: clamp(10px, min(3vw, 2svh), 18px);
}


/* -------------------------------------------------------------------------
   4. 헤드라인 — 진짜 SemiBold 페이스로, 높이까지 고려한 연속 스케일
   -------------------------------------------------------------------------
   · font-family 선두에 MaruBuriHero(실제 SemiBold)를 두어 합성 볼드 제거.
     로드 실패 시 기존 "MaruBuri" 로 폴백되어 현재와 동일하게 동작한다.
   · 그라디언트 끝색을 #ecd9ab → #F2E4C4 로 살짝 밝혀, 글자 아랫부분이
     골드 배경에 묻히지 않게 한다. (블랙&골드 톤은 그대로)
   · text-shadow 는 넣지 않는다. background-clip:text 요소에 그림자를 주면
     그림자가 글자 앞으로 튀어나오고, .hword 의 GSAP blur 필터와도 충돌한다.
     헤드라인 대비는 위의 스크림으로 해결한다.
   ------------------------------------------------------------------------- */
.main_station .main-hero .hero-ani-top b .main_tit_ani {
  font-family: "MaruBuriHero", "MaruBuriBold", "MaruBuri", "Pretendard", serif;
  /* 하단 "끝까지 책임지고 관리합니다." 와 동일 사이즈 */
  font-size: clamp(21px, min(4.8vw, 6.2vh), 32px) !important;
  font-size: clamp(21px, min(4.8vw, 6.2svh), 32px) !important;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.main_station .main-hero .hero-ani-top b .main_tit_ani:not(.is-split),
.main_station .main-hero .hero-ani-top .hword-in {
  background: linear-gradient(180deg, #ffffff 28%, #f2e4c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* -------------------------------------------------------------------------
   5. 하단 서브라인 — 골드를 내려놓고 뉴트럴 화이트로
   -------------------------------------------------------------------------
   히어로에서 가장 안 읽히던 줄. 19px · 굵기 300 · 자간 0.30em ·
   샴페인색 72% 가 골드 파도 위에 얹혀 대비 3.4:1(AA 미달)이었다.
   골드 요소는 아이브로·헤어라인·디바이더·스크롤·페이지네이션까지 이미 다섯 곳.
   이 한 줄만 뉴트럴로 돌리면 대비가 오르고 골드 포인트는 오히려 선명해진다.
   자간으로 주던 여백감은 행간(1.7)으로 옮긴다.
   ------------------------------------------------------------------------- */
.main_station .main-hero .hero-ani-bottom .tit_ani {
  /* 하단 "끝까지 책임지고 관리합니다." 와 동일 사이즈 */
  font-size: clamp(21px, min(4.8vw, 6.2vh), 32px) !important;
  font-size: clamp(21px, min(4.8vw, 6.2svh), 32px) !important;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

/* 자간·그림자는 반드시 .word / .char 까지 내려서 지정해야 한다.
   slider-custom.css 의
     .regen_txt > span:nth-of-type(2) span { letter-spacing:0.6em; text-shadow:0 4px 4px … }
   이 JS(swiper.js)가 만들어 넣는 글자 단위 <span class="char"> 에 직접 걸리기 때문에,
   .tit_ani 에만 자간을 주면 화면에서는 여전히 0.6em(=28px 기준 16.8px)으로 벌어진다.
   한글 문장이 낱글자로 흩어져 보이던 실제 원인이 이것이다.
   0.6em → 0.08em. 라틴 레터링 값을 한글 문장 값으로 되돌린다. */
.main_station .main-hero .hero-ani-bottom .tit_ani,
.main_station .main-hero .hero-ani-bottom .tit_ani .word,
.main_station .main-hero .hero-ani-bottom .tit_ani .char {
  letter-spacing: 0.08em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 2px 18px rgba(0, 0, 0, 0.45);
}


/* -------------------------------------------------------------------------
   6. 하단 메인 문장 — 세리프 유지, 자간만 한글 기준으로
   ------------------------------------------------------------------------- */
.main_station .main-hero .hero-ani-bottom b .tit_ani {
  font-family: "MaruBuriHero", "MaruBuriBold", "MaruBuri", "Pretendard", serif;
  font-size: clamp(21px, min(4.8vw, 6.2vh), 32px) !important;
  font-size: clamp(21px, min(4.8vw, 6.2svh), 32px) !important;
  font-weight: 700;
  line-height: 1.45;
  margin-top: clamp(12px, 2.2vh, 22px);
  margin-top: clamp(12px, 2.2svh, 22px);
}

/* 선언 문장은 서브라인보다 여유를 남긴다 — 0.6em → 0.14em.
   "고급스러운 여백"은 유지하면서 어절 단위 인식은 회복되는 지점.
   그림자는 타이트한 것 + 퍼지는 것 2단으로 겹쳐, 배경 파도가 밝을 때도
   글자 윤곽이 먼저 서게 만든다. */
.main_station .main-hero .hero-ani-bottom b .tit_ani,
.main_station .main-hero .hero-ani-bottom b .tit_ani .word,
.main_station .main-hero .hero-ani-bottom b .tit_ani .char {
  letter-spacing: 0.14em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 3px 10px rgba(0, 0, 0, 0.55),
    0 6px 28px rgba(0, 0, 0, 0.45);
}


/* -------------------------------------------------------------------------
   7. 페이지네이션 — 보이게, 그리고 누를 수 있게
   -------------------------------------------------------------------------
   비활성 불릿이 흰색 35% 라 영상 위에서 거의 사라졌다. 55% 로 올린다.
   불릿 자체는 8px 그대로 두고, ::after 로 28px 히트 영역만 넓혀
   디자인은 유지한 채 터치 접근성(최소 24px)을 만족시킨다.
   ------------------------------------------------------------------------- */
.main_station .main-hero-pagination .swiper-pagination-bullet {
  position: relative;
  opacity: 0.55;
}

.main_station .main-hero-pagination .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
}

.main_station .main-hero-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

.main_station .main-hero-pagination .swiper-pagination-bullet:focus-visible {
  outline: 2px solid #e5c47f;
  outline-offset: 4px;
}


/* -------------------------------------------------------------------------
   8. 스크롤 인디케이터
   -------------------------------------------------------------------------
   "SCROLL" 은 로만 대문자 레터링이라 0.42em 자간이 오히려 정답 — 유지.
   11px·굵기 300 만 12px·500 으로 올려 영상 위에서 형태가 잡히게 한다.
   링크 히트 영역도 함께 확보.
   ------------------------------------------------------------------------- */
/* 히트 영역은 가상요소로만 넓힌다.
   padding + 음수 margin 조합은 a 가 width:100% 를 상속받는 구조라
   좌측으로만 밀려 인디케이터 전체가 화면 중앙에서 어긋난다. */
.main_station .scroll_wrap a {
  position: relative;
  padding: 0;
  margin: 0;
}

.main_station .scroll_wrap a::before {
  content: "";
  position: absolute;
  inset: -12px -20px;
}

/* text-indent 는 자간의 "절반"이 맞다.
   letter-spacing 은 마지막 글자 뒤에도 붙으므로 글자 잉크가 박스 중앙보다
   L/2 만큼 왼쪽에 놓인다. 원래 값 0.42em(=L 전체)은 과보정이라
   글자와 아래 세로선이 2.5px 어긋나 있었다. */
.main_station .scroll_wrap .scroll-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.21em;
  line-height: 1;
  color: rgba(240, 226, 190, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.main_station .scroll_wrap a:focus-visible {
  outline: 2px solid #e5c47f;
  outline-offset: 6px;
  border-radius: 6px;
}


/* -------------------------------------------------------------------------
   9. 짧은 화면 안전장치
   -------------------------------------------------------------------------
   .main_station 은 height:100dvh + overflow:hidden 이라, 세로가 짧은 화면
   (휴대폰 가로모드, 13인치 노트북 창모드)에서 텍스트가 잘릴 수 있었다.
   위의 min(vw, svh) 스케일이 대부분을 흡수하지만, 극단적으로 낮은 높이에서는
   장식 요소를 정리해 문장이 먼저 살아남게 한다.
   ------------------------------------------------------------------------- */
@media (max-height: 520px) {
  .main_station .main-hero .hero-ani-bottom::before {
    margin-bottom: 10px;
  }
  .main_station .main-hero .hero-ani-bottom {
    margin-bottom: 8px;
  }
  .main_station .scroll_wrap {
    display: none;
  }
}


/* -------------------------------------------------------------------------
   10. 모션 민감 사용자
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .main_station .main-hero-pagination .swiper-pagination-bullet {
    transition: none;
  }
}

/* slider-custom.css 모바일 분기(3.6vw/7.6vw 등)를 덮어
   메인 배너 전 텍스트를 동일 사이즈로 유지한다. */
@media screen and (max-width: 768px) {
  .main_station .main-hero .hero-ani-top > .main_tit_ani,
  .main_station .main-hero .hero-ani-top b .main_tit_ani,
  .main_station .main-hero .hero-ani-bottom .tit_ani,
  .main_station .main-hero .hero-ani-bottom b .tit_ani {
    font-size: clamp(21px, min(4.8vw, 6.2vh), 32px) !important;
    font-size: clamp(21px, min(4.8vw, 6.2svh), 32px) !important;
  }

  .main_station .main-hero .hero-ornament {
    width: min(78vw, 360px);
    height: 46px;
  }
}