@charset "UTF-8";
/* PC 메인 배너 — 히어로 1장 + 우측 미니 리스트 v1.4.0(강조어 마커 이식 2026-09-04) · v1.1.1 (2026-09-02 신설 / 같은 날 글자 모션 v2 / 제목 윗줄)
   ------------------------------------------------------------------------
   무엇을 바꾸나
   - 기존: 배너 N장을 5.5초마다 자동으로 넘기는 스와이퍼 롤링(점 인디케이터·좌우 화살표·목차 드로어).
   - 신형: 왼쪽에 큰 히어로 1장(현행 배너 비율 1900x500 유지) + 오른쪽에 세로 미니 리스트.
           리스트 항목에 마우스를 올리면(또는 키보드 포커스) 히어로가 크로스페이드로 교체되고,
           클릭하면 그 배너의 랜딩으로 이동한다. ★자동 회전 없음(진입 시 SORT_NO 1위 고정).
   - 데이터·관리 체계(SM_BANNER_AI)는 1바이트도 바뀌지 않는다. 프론트 렌더만 전환.

   게이트 (main_home.jsp)
   - 기본 = 신형. ?hb=0 이면 기존 스와이퍼 롤링으로 폴백(스와이퍼 마크업·JS 보존).
   - 이 파일은 .mbh_* / .main_visual.mbh_on 스코프에서만 동작 → 폴백 화면에 무영향(항상 로드해도 안전).

   의존
   - 히어로 안의 글자 조판(.mba_badge/.mba_head/.mba_sub/.mba_goods/.mba_more)은
     main_banner_ai.css 가 계속 담당한다. 여기서는 좁아진 히어로에 맞춰 크기·여백만 눌러 준다.
   - ★ main_banner_ai.css 의 절대 규칙(글자영역 크림 워시/스크림 금지, 시인성은 흰 헤일로로만)은
     신형에서도 그대로 유지한다. 이 파일에 면(面) 스크림 선언 없음.
   - 캐러셀 잔재(.mv_btn_*, .main_visual_pagination, .mvz_ctl, .mvz_toc)는 신형 마크업에 아예
     렌더되지 않으므로 숨김 규칙이 필요 없다(죽은 CSS 방지).

   접근성
   - 비활성 히어로 레이어는 visibility:hidden → 탭 순서에서 빠진다(중복 탭 스톱 13개 방지).
   - 리스트 항목은 <a> 라 기본 포커스 가능. :focus 로도 히어로가 바뀌고 포커스 링을 준다.
   - prefers-reduced-motion 존중(전환·글자 등장 애니메이션 해제).                              */

/* ── 토큰 ───────────────────────────────────────────────────────────── */
.main_visual.mbh_on {
  --mbh-green: #3d6041;
  --mbh-ground: #fff; /* [v1.1.5 2026-09-03] 흰 바탕 위 크림 카드 하나 */
  --mbh-cream: #F6F2E8;
  --mbh-line: #e9e4d8; /* v1.1.5 카드·패널 공통 1px 선 */
  --mbh-ink: #26332a;
  --mbh-ink-dim: #7c8a7c;
  --mbh-ease: cubic-bezier(.22,.61,.36,1);
  --mbh-rev: cubic-bezier(.22,1,.36,1);   /* v1.1.0 클립 리빌 전용(끝이 길게 눕는 곡선) */
  --mbh-shadow: none; /* v1.1.5 그림자 제거, 1px 연한 선으로 통일 */
  --mbh-rail: 300px;
  background: var(--mbh-ground);
  overflow: hidden;
}

/* ── 2단 레이아웃 ───────────────────────────────────────────────────── */
.mbh_wrap {
  display: flex; align-items: stretch; gap: 16px;
  padding: 20px; box-sizing: border-box;
}

/* ── 히어로 ─────────────────────────────────────────────────────────── */
/* 비율 상자(padding-top 26.3158% = 500/1900). aspect-ratio 미지원 브라우저까지 CLS 0. */
.mbh_hero {
  position: relative; flex: 1 1 auto; min-width: 0;
  border-radius: 16px; overflow: hidden;
  background: var(--mbh-cream); box-shadow: var(--mbh-shadow); border: 1px solid var(--mbh-line);
}
.mbh_hero::before { content: ""; display: block; padding-top: 26.3158%; }

.mbh_hero .mbh_slide {
  position: absolute; inset: 0; display: block; text-decoration: none;
  opacity: 0; visibility: hidden;
  transition: opacity .26s var(--mbh-ease), visibility 0s linear .26s;
}
.mbh_hero .mbh_slide.is-on {
  opacity: 1; visibility: visible; z-index: 2;
  transition: opacity .26s var(--mbh-ease), visibility 0s linear 0s;
}

/* .mba_bg 는 원래 aspect-ratio 로 높이를 만들지만(전면 배너), 여기서는 레이어를 꽉 채운다.
   critical_main.css 의 .main_visual .mba_bg(0,2,0) 를 이기도록 3단 선택자. */
.main_visual .mbh_hero .mba_bg {
  width: 100%; height: 100%; aspect-ratio: auto;
  border-radius: 0;
}

/* 좁아진 히어로에 맞춘 조판 축소 — 색·헤일로·스크림 정책은 main_banner_ai.css 그대로 */
.main_visual .mbh_hero .mba_txt { padding: 0 7% 0 6%; }
/* [v1.1.4 2026-09-03] 팀장: "PC 폰트를 위쪽으로 붙여줘" — 글자 블록 상단 정렬(오아시스), 상단 여백 28px, 아래는 비움 */
.main_visual .mbh_hero .mba_txt { justify-content: flex-start; padding-top: clamp(20px, 1.95vw, 28px); padding-bottom: 20px; }
.main_visual .mbh_hero .mba_head { -webkit-line-clamp: 2; }
.main_visual .mbh_hero .mba_badge { font-size: 10px; margin-bottom: .95em; }
/* 2026-09-02 제목 윗줄(.mba_lead). 전면 배너 값(최대 20px)을 그대로 두면 좁아진 히어로 헤드(최대 40px)와
   대비가 2배까지 좁혀져 "2줄짜리 제목"으로 오독된다 → 헤드와 같은 비율로 눌러 서브(15.5)보다는 크게. */
.main_visual .mbh_hero .mba_lead {
  font-size: 15px; font-weight: 400; line-height: 1.4; max-width: min(460px, 40vw);
}
.main_visual .mbh_hero .mba_head {
  /* [v1.1.2 2026-09-03] 오아시스 참고 스케일: 28~30px·700·행간 1.3·2줄 허용, 글자 블록은 왼쪽 40% 안 */
  font-size: 29px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em;
  max-width: min(460px, 40vw); margin-bottom: .45em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.main_visual .mbh_hero .mba_sub { font-size: 14px; max-width: 400px; }
.main_visual .mbh_hero .mba_goods { font-size: clamp(12px, .95vw, 14px); font-weight: 400; opacity: .8; max-width: min(400px, 40vw); }
.main_visual .mbh_hero .mba_goods b, .main_visual .mbh_hero .mba_sub b { font-weight: 700; opacity: 1; }
.main_visual .mbh_hero .mba_period { margin-top: .9em; font-size: clamp(11px, .8vw, 12px); opacity: .6; }
.main_visual .mbh_hero .mba_more {
  margin-top: 1em; padding: .42em 1em;
  font-size: clamp(11px, .8vw, 12.5px); border-width: 1.2px; font-weight: 600;
}
/* CTA 살짝 밀기 — main_banner_ai.css 의 hover 규칙은 .mba_link(스와이퍼 마크업) 기준이라 신형엔 안 걸린다 */
.mbh_hero .mbh_slide:hover .mba_more { opacity: 1; transform: translateX(3px); }

/* 구 A형(이미지 통짜) 배너 레이어 — 글자 레이어 없이 배경만 */
.mbh_hero .mbh_slide--img .mba_bg { background-color: var(--mbh-cream); }
/* v1.1.5 좌측 40% 글자 영역 → 이미지로 같은 크림에서 시작하는 그라데이션 */
.main_visual .mbh_hero .mbh_slide:not(.mbh_slide--img) .mba_bg::before { background: linear-gradient(90deg, var(--mbh-cream) 0%, var(--mbh-cream) 26%, rgba(246,242,232,0) 48%); }

/* ── 글자 등장 애니메이션 v1.1.0 — 클립 리빌 ─────────────────────────
   ★교체되는 순간에만 1회. 자동 반복·상시 애니메이션 없음(시니어 조합원 어지럼 방지).
   트리거는 .mbh_anim 클래스이고, 이 클래스는 JS 가 "리스트 hover/클릭/키보드로 히어로가 바뀔 때"만
   붙인다. 첫 페이지 로드에는 마크업에 is-on 만 있고 mbh_anim 이 없으므로 글자가 즉시 보인다
   (LCP·첫 화면 깜빡임 방지). 연타로 다시 붙일 때는 JS 가 클래스를 떼고 리플로우를 강제해 겹침을 막는다.

   v1.0.0(12px 상승 + 페이드) → v1.1.0 교체 사유
   - 페이드업은 레이어 전체 크로스페이드(.26s)에 묻혀 "글자가 따로 들어온다"는 느낌이 없었다(밋밋).
   - v1.1.0 = 잘린 면에서 솟아오르는 클립 리빌. 어절마다 잘린 창(.mbh_w)을 만들고 그 아래(110%)에서
     알맹이(.mbh_ln)가 솟는다. 320ms · cubic-bezier(.22,1,.36,1).
   - 헤드(.mba_head)만 어절 단위 45ms 스태거 → 문장이 왼쪽부터 "쓰이는" 리듬. 나머지는 줄 단위 60ms
     (뱃지 0 → 헤드 .06 → 서브 .12 → 상품문구 .18 → CTA .24). 마지막 재생 종료 = .56s, 체감 settle 은
     곡선이 앞에서 거의 다 먹어 0.3s 대.
   - 새 이미지에 scale(1.03)→1 줌아웃 340ms 동반. 글자는 같은 곡선의 역스케일(.970874→1)로 상쇄해
     제자리에 고정 → 이미지만 줌, 글자는 순수 수직 리빌(글자 흔들림·재조판 없음).

   ★ overflow:hidden 이 아니라 clip-path 를 쓴 이유
     이 배너의 시인성은 오직 흰 헤일로(text-shadow)로 확보한다(면 스크림 금지 = main_banner_ai.css 절대 규칙).
     overflow 로 자르면 그 헤일로까지 잘린다. clip-path 는 좌·우·위를 -1.5em 열어 헤일로를 살리고
     "아래 단면"만 자른다. 애니메이션 끝(99~100%)에 단면도 열어 잔여 클리핑 0.
   ★ 어절 분할은 JS(main_banner_hero.js)가 createElement/textContent 로만 한다(innerHTML 조립 없음 = XSS 안전).
     분할하지 않은/못 한 요소(태그가 섞인 문구·clip-path 미지원 브라우저)는 .mbh_split 이 안 붙어
     v1 페이드업(mbhRise)으로 그대로 남는다 → 어떤 경우에도 글자 증발 없음.                        */

/* 줄별 지연 — 커스텀 속성이라 안쪽 .mbh_ln 까지 상속된다(선택자 중복 없이 한 값으로 두 애니 제어) */
.mbh_hero .mbh_slide .mba_badge { --mbh-d: 0s; }
/* 윗줄은 뱃지(0)와 헤드(.06) 사이 반 칸 — 기존 다섯 줄의 값은 하나도 건드리지 않는다(전체 길이 .56s 고정) */
.mbh_hero .mbh_slide .mba_lead  { --mbh-d: .03s; }
.mbh_hero .mbh_slide .mba_head  { --mbh-d: .06s; }
.mbh_hero .mbh_slide .mba_sub   { --mbh-d: .12s; }
.mbh_hero .mbh_slide .mba_goods { --mbh-d: .18s; }
.mbh_hero .mbh_slide .mba_more  { --mbh-d: .24s; }
/* 헤드만 어절 스태거 45ms. 5어절째부터는 .24s 로 묶어 전체 길이를 CTA(.56s)와 같게 고정(긴 헤드 대비) */
.mbh_hero .mbh_slide .mba_head > .mbh_w:nth-child(2)   { --mbh-d: .105s; }
.mbh_hero .mbh_slide .mba_head > .mbh_w:nth-child(3)   { --mbh-d: .15s; }
.mbh_hero .mbh_slide .mba_head > .mbh_w:nth-child(4)   { --mbh-d: .195s; }
.mbh_hero .mbh_slide .mba_head > .mbh_w:nth-child(n+5) { --mbh-d: .24s; }

/* 분할된 어절 = 잘린 창(.mbh_w) + 그 안에서 솟는 알맹이(.mbh_ln).
   display 는 상시 부여 — inline 박스에는 transform 이 안 먹고, clip-path 도 조각박스로 흩어진다.
   어절 사이 공백은 실제 텍스트노드라 keep-all 줄바꿈이 원문과 동일하게 유지된다. */
.mbh_hero .mbh_w  { display: inline-block; }
.mbh_hero .mbh_ln { display: block; }
/* [v1.4.0 2026-09-04] 강조어 마커 — 모바일(css/mobile/main_banner_anim_m.css .mbh_em)과 동일: 형광 노랑만, 글자색·굵기 무변경.
   z-index:0 로 .mbh_em 이 자기 쌓임 맥락을 만들어 ::after(z-index:-1)가 "글자 뒤·배경 앞"에 정확히 눕는다. 첫 로드(무애니)엔 scaleX(1)로 이미 그어진 상태. */
.mbh_hero .mbh_em { position: relative; z-index: 0; font-style: normal; font-weight: inherit; }
.mbh_hero .mbh_em::after {
  content: ""; position: absolute; left: -.10em; right: -.10em; bottom: .02em; height: .42em;
  z-index: -1; border-radius: 3px; transform-origin: 0 50%; background: rgba(240,214,94,.62);
}
.mbh_hero .mbh_slide.mbh_anim .mbh_w {
  animation: mbhCutOpen .32s var(--mbh-rev) both;
  animation-delay: var(--mbh-d, 0s);
}
.mbh_hero .mbh_slide.mbh_anim .mbh_w > .mbh_ln {
  animation: mbhCutLift .32s var(--mbh-rev) both;
  animation-delay: var(--mbh-d, 0s);
}
/* 분할하지 않은 요소 = v1 페이드업 폴백(글자 증발 방지) */
.mbh_hero .mbh_slide.mbh_anim .mba_txt > *:not(.mbh_split) {
  animation: mbhRise .25s ease-out both;
  animation-delay: var(--mbh-d, 0s);
}
/* CTA 칩만 예외 — 테두리·화살표(::after)는 클립 대상이 아니라서, 안쪽 글자가 자기 차례(.24s)를
   기다리는 동안 "빈 알약 + 화살표"만 서 있는 프레임이 생긴다(110ms 실측 스크린샷에서 확인).
   칩 자체도 자기 차례에 맞춰 옅게 들어오게 해 글자와 같이 도착시킨다.
   ★fill 을 backwards 로 둔 이유 : forwards/both 면 끝값 opacity 가 고정돼 기본값(.88)과
     :hover 의 opacity:1(main_banner_ai.css)을 덮어 버린다. backwards 는 지연구간만 덮는다.
     끝값도 기본과 같은 .88 로 맞춰 재생 종료 시 튐 0. */
.mbh_hero .mbh_slide.mbh_anim .mba_more.mbh_split {
  animation: mbhChipIn .22s var(--mbh-rev) backwards;
  animation-delay: var(--mbh-d, 0s);
}
@keyframes mbhChipIn { from { opacity: 0; } to { opacity: .88; } }
/* 새 이미지 줌아웃 + 글자 역스케일 상쇄 */
.mbh_hero .mbh_slide.mbh_anim .mba_bg  { animation: mbhZoom .34s var(--mbh-rev) both; }
.mbh_hero .mbh_slide.mbh_anim .mba_txt { animation: mbhUnzoom .34s var(--mbh-rev) both; }

@keyframes mbhCutOpen {
  0%, 99% { -webkit-clip-path: inset(-1.5em -1.5em -.06em -1.5em); clip-path: inset(-1.5em -1.5em -.06em -1.5em); }
  100%    { -webkit-clip-path: inset(-1.5em -1.5em -1.5em -1.5em); clip-path: inset(-1.5em -1.5em -1.5em -1.5em); }
}
@keyframes mbhCutLift { from { transform: translate3d(0,110%,0); } to { transform: translate3d(0,0,0); } }
@keyframes mbhZoom    { from { transform: scale(1.03); }     to { transform: none; } }
@keyframes mbhUnzoom  { from { transform: scale(.970874); }  to { transform: none; } }
@keyframes mbhRise { from { opacity: 0; transform: translate3d(0,12px,0); } to { opacity: 1; transform: none; } }
/* [v1.4.0] 강조어 마커 = 그 어절이 리빌된 뒤(딜레이 +.42s) 왼→오로 그어진다(모바일 mbhEmLine 과 동일 .38s) */
.mbh_hero .mbh_slide.mbh_anim .mbh_em::after { animation: mbhEmLine .38s var(--mbh-rev) both; animation-delay: calc(var(--mbh-d, 0s) + .42s); }
@keyframes mbhEmLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 모션 최소화 설정 사용자 = 이동·클립·줌 전부 해제, 페이드만. 스태거도 없앤다.
   (선택자에 .main_visual 을 더해 위 :not(.mbh_split) 규칙과 특정도를 맞추고 뒤에 두어 확실히 이긴다) */
@media (prefers-reduced-motion: reduce) {
  .main_visual .mbh_hero .mbh_slide.mbh_anim .mba_txt > * { animation: mbhFadeOnly .18s linear both; animation-delay: 0s; }
  .main_visual .mbh_hero .mbh_slide.mbh_anim .mbh_w,
  .main_visual .mbh_hero .mbh_slide.mbh_anim .mbh_w > .mbh_ln,
  .main_visual .mbh_hero .mbh_slide.mbh_anim .mba_bg,
  .main_visual .mbh_hero .mbh_slide.mbh_anim .mba_txt { animation: none; }
  .main_visual .mbh_hero .mbh_slide.mbh_anim .mbh_em::after { animation: none; }
  .mbh_hero .mbh_slide { transition: opacity .14s linear, visibility 0s linear .14s; }
  .mbh_hero .mbh_slide.is-on { transition: opacity .14s linear, visibility 0s linear 0s; }
  .mbh_item, .mbh_item::before, .mbh_thumb { transition: none; }
}
@keyframes mbhFadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* ── 우측 미니 리스트 ───────────────────────────────────────────────── */
/* ★높이 규칙 : 띠 높이는 "히어로"가 정한다.
   리스트를 그냥 흘리면(static) 배너 13장짜리 리스트가 flex 라인 높이를 잡아먹어 히어로가 그만큼
   늘어나 버린다(align-items:stretch). 그래서 리스트를 절대배치로 띄워 레일의 콘텐츠 높이를 0으로
   만들고, 레일은 히어로 높이만큼만 stretch 되게 한다. 넘치는 항목은 레일 안에서 스크롤. */
.mbh_rail {
  position: relative;
  flex: 0 0 var(--mbh-rail); width: var(--mbh-rail); min-width: 0;
  box-sizing: border-box;
  background: #fff; border-radius: 16px; box-shadow: var(--mbh-shadow); border: 1px solid var(--mbh-line);
}
.mbh_list {
  position: absolute; top: 10px; right: 6px; bottom: 10px; left: 10px;
  list-style: none; margin: 0; padding: 0 4px 0 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #d8dad2 transparent;
}
/* 아래로 더 있다는 신호 — 리스트 끝을 흰색으로 부드럽게 여민다(얇은 스크롤바와 함께 스크롤 암시) */
.mbh_rail::after {
  content: ""; position: absolute; left: 10px; right: 12px; bottom: 10px; height: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 82%);
  border-radius: 0 0 12px 12px; pointer-events: none; z-index: 1;
}
.mbh_list::-webkit-scrollbar { width: 4px; }
.mbh_list::-webkit-scrollbar-track { background: transparent; }
.mbh_list::-webkit-scrollbar-thumb { background: #d8dad2; border-radius: 99px; }
.mbh_list::-webkit-scrollbar-thumb:hover { background: #bfc4ba; }
.mbh_list > li { margin: 0 0 6px; }
.mbh_list > li:last-child { margin-bottom: 0; }

.mbh_item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 5px 8px 5px 11px; border-radius: 12px;
  text-decoration: none; color: var(--mbh-ink); background: transparent;
  transition: background .18s var(--mbh-ease);
}
/* 활성 표시 = 딥그린 좌측 바 + 옅은 그린 틴트 */
.mbh_item::before {
  content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 99px; background: var(--mbh-green);
  transition: height .22s var(--mbh-ease);
}
.mbh_item:hover { background: #f3f6f1; }
.mbh_item.is-on { background: #eef3ec; }
.mbh_item.is-on::before { height: 56%; }
.mbh_item:focus { outline: none; background: #eef3ec; }
.mbh_item:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(61,96,65,.6); }

.mbh_thumb {
  flex: 0 0 auto; width: 76px; height: 42px; border-radius: 8px;
  background-color: #eceae3; background-repeat: no-repeat;
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(38,51,42,.06);
  opacity: 0; transition: opacity .28s var(--mbh-ease);
}
.mbh_thumb.is-ready { opacity: 1; }

.mbh_meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mbh_bdg {
  font-size: 10.5px; font-weight: 800; line-height: 1.2; letter-spacing: .01em;
  color: var(--mbh-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mbh_hd {
  font-size: 12.5px; font-weight: 600; line-height: 1.26; letter-spacing: -.02em;
  color: var(--mbh-ink); word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mbh_item.is-on .mbh_hd { font-weight: 700; color: #1d2a20; }
.mbh_item.is-on .mbh_bdg { color: #2f4d33; }

/* ── 폭 대응 ────────────────────────────────────────────────────────── */
@media (max-width: 1439px) { .main_visual.mbh_on { --mbh-rail: 274px; } }
@media (max-width: 1279px) {
  .main_visual.mbh_on { --mbh-rail: 248px; }
  .mbh_wrap { padding: 16px; gap: 12px; }
  .mbh_thumb { width: 66px; height: 38px; }
}
/* 좁은 화면(PC 레이아웃 하한 밑) 안전망 — 리스트를 히어로 아래로 내리고 높이를 제한한다 */
@media (max-width: 899px) {
  .mbh_wrap { flex-direction: column; }
  .mbh_rail { flex: 0 0 auto; width: 100%; padding: 10px 6px 10px 10px; }
  .mbh_list { position: static; max-height: 236px; }
  .mbh_rail::after { display: none; }
}

/* [v1.1.7 2026-09-03] 팀장 PPT 구도: 배너·썸네일 블록을 로고/GNB 콘텐츠 열(1160px, 가운데)에 정렬 — 좌우 여백은 흰색(--mbh-ground).
   히어로 폭이 줄어(1083→844@1440) 비율을 1900:500 → 3.4:1(29.5%)로 조정해 높이를 유지하고, 배경은 우측 피사체 기준(78%)으로 앵커. */
.main_visual.mbh_on .mbh_wrap { width: 1160px; max-width: 100%; margin: 0 auto; padding: 20px 0 18px; }
.main_visual.mbh_on .mbh_hero::before { padding-top: 29.5%; }
.main_visual .mbh_hero .mba_bg { background-position: 78% center; }
@media (max-width: 1200px) { .main_visual.mbh_on .mbh_wrap { padding-left: 20px; padding-right: 20px; } }

/* [v1.1.8 2026-09-03] 팀장: "배너 높이가 너무 작다" — 히어로 비율 29.5% → 36%(844px 폭에서 250 → 304px). 썸네일 패널은 stretch로 같이 늘어남 */
.main_visual.mbh_on .mbh_hero::before { padding-top: 36%; }

/* [v1.1.9 2026-09-03] 팀장: "우측 이미지 제외하고 노출" — 썸네일 이미지 숨김, 레일 300→220px(글자만), 히어로가 그만큼 넓어짐(844→924px, 36% = 333px) */
.main_visual.mbh_on { --mbh-rail: 220px; }
.main_visual.mbh_on .mbh_thumb { display: none; }
.main_visual.mbh_on .mbh_item { padding: 9px 10px 9px 14px; min-height: 44px; }
.main_visual.mbh_on .mbh_hd { font-size: 14px; line-height: 1.35; }

/* [v1.2.0 2026-09-03] 팀장: "메인배너 라운드 말고 딱떨어지게" — 히어로·우측 레일 모서리 0(각), 리스트 하단 페이드도 각. 그림자·1px 선은 유지 */
.main_visual.mbh_on .mbh_hero,
.main_visual.mbh_on .mbh_rail { border-radius: 0; }
.main_visual.mbh_on .mbh_rail::after { border-radius: 0; }

/* [v1.2.1 2026-09-03] 팀장: "메인배너 이미지 텍스트 배경색 화이트" — 글자 영역 크림 워시(--mbh-cream 그라데이션)·히어로 바탕을 흰색으로. 순백 페이지 배경과 한 톤 */
.main_visual.mbh_on .mbh_hero { background: #fff; }
.main_visual .mbh_hero .mbh_slide--img .mba_bg { background-color: #fff; }
.main_visual .mbh_hero .mbh_slide:not(.mbh_slide--img) .mba_bg::before { background: linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,0) 52%); }

/* [v1.3.0 2026-09-03] 팀장: 배너 카운터(현재/총) + 우측 타이틀 레일 상하 넘기기 */
.main_visual .mbh_hero .mbh_count { position: absolute; right: 14px; bottom: 12px; z-index: 5; padding: 5px 11px; border-radius: 999px; background: rgba(29,39,30,.55); color: #fff; font: 600 12.5px/1 'Roboto','Pretendard',sans-serif; letter-spacing: .02em; pointer-events: none; }
.main_visual.mbh_on .mbh_rail { padding-bottom: 44px; }
.main_visual.mbh_on .mbh_list { bottom: 46px; }
.main_visual.mbh_on .mbh_rail::after { bottom: 46px; }
.main_visual .mbh_rail .mbh_nav { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; justify-content: flex-end; gap: 6px; z-index: 3; }
.main_visual .mbh_rail .mbh_nav_btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d9ddd3; background: #fff; color: #3d6041; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.main_visual .mbh_rail .mbh_nav_btn:hover { background: #eaf1e8; border-color: #3d6041; }
.main_visual .mbh_rail .mbh_nav_btn:focus-visible { outline: 2px solid #3d6041; outline-offset: 2px; }


/* ═══════════════════════════════════════════════════════════════════════════
   [2026-09-05 QC D19] 조판 크기 정수 고정.
   히어로가 든 .mbh_wrap 은 1160px 고정폭인데 글자만 vw 로 잡혀 있어, 폭이 바뀌지 않는
   구간에서도 28.8 / 15.12 / 13.824 / 10.368px 같은 비정수 값이 나와 자간·행간이 미끄러졌다
   (1440px 실측). 컨테이너가 고정이므로 clamp 를 걷고 정수 px 로 못 박는다 → 29 / 15 / 14 / 10.

   [QC D18] 윗줄(.mba_lead)의 어절 간격이 3.6px(공백 1개)뿐이라 헤드보다 촘촘해 보였다.
   어절 상자(.mbh_w)는 공백 텍스트노드로만 떨어져 있으므로 2.5px 를 더해 6px 대로 맞춘다.

   [QC D13] 우측 미니리스트가 하단 넘기기 화살표와 겹쳐, 마지막 항목이 화살표 위에서 반쯤
   잘려 보였다(실측: 리스트 하단 454.9 / 화살표 462.9~492.9, 5번째 항목이 절단).
   항목 높이(패딩 9→8)·항목 간격(6→5)·리스트 하단 여백(46→50)을 맞춰 5개가 온전히 들어가고
   잘린 항목이 화살표 줄에 남지 않게 한다.
   ═══════════════════════════════════════════════════════════════════════════ */
.main_visual .mbh_hero .mba_lead .mbh_w + .mbh_w{ margin-left: 2.5px; }
.main_visual.mbh_on .mbh_item { padding: 8px 10px 8px 14px; }
.main_visual.mbh_on .mbh_list > li { margin-bottom: 5px; }
.main_visual.mbh_on .mbh_list { bottom: 50px; }
.main_visual.mbh_on .mbh_rail::after { bottom: 50px; }