/* NOTE:
   이 파일은 Zeplin 기반 토큰/컴포넌트 스타일 단일본입니다.
   (이전 작업에서 동일 블록이 중복된 적이 있어, 중복이 다시 생기지 않게 전체를 교체합니다.) */

/* Zeplin screen JSON (실값) → 프로젝트용 토큰 */
:root {
  /* Colors */
  --color-brand-navy: #003366; /* rgb(0,51,102) */
  --color-brand-red: #D9232E; /* rgb(217,35,46) */
  --color-accent-gold: #D69D42; /* rgb(214,157,66) */

  --color-surface: #FFFFFF;
  --color-surface-soft: #F2F6FC; /* rgb(242,246,252) */
  --color-topbar-bg: #E4EAF6; /* rgb(228,234,246) */
  --color-topbar-text: #000000; /* Zeplin 로그인/회원가입/ENG rgb(0,0,0) */

  --color-text: #333333; /* rgb(51,51,51) */
  --color-muted: #7E899B; /* rgb(126,137,155) */

  --color-border: #B3C0CF; /* rgb(179,192,207) */
  --color-line: #C7D2DE; /* rgb(199,210,222) Line 1 y=139 */
  --color-submenu-divider: #ECECEC; /* Zeplin Rectangle 200 구분선 rgb(236,236,236) */

  --color-section-blue-1: #DCE6F1; /* rgb(220,230,241) */
  --color-section-blue-2: #C7D7E8; /* rgb(199,215,232) */
  --color-footer-bg: #F8F9FB; /* rgb(248,249,251) */

  /* Typography */
  --font-sans: Pretendard, PretendardVariable, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-accent: Verdana, Geneva, Tahoma, var(--font-sans);

  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-20: 20px;
  --text-22: 22px;
  --text-24: 24px;
  --text-28: 28px;

  --lh-14: 14px;
  --lh-15: 15px;
  --lh-16: 16px;
  --lh-19: 19px;
  --lh-24: 24px;
  --lh-26: 26px;
  --lh-29: 29px;
  --lh-33: 33px;

  --tracking-tight-84: -0.84px;
  --tracking-tight-42: -0.42px;

  /* Controls */
  --color-control-muted-bg: #F3F4F6; /* rgb(243,244,246) */
  --color-control-muted-border: #A4ABB6; /* rgb(164,171,182) */
  --color-control-muted-icon: #A4ABB6;

  --color-control-hover-bg: var(--color-brand-red);
  --color-control-hover-border: var(--color-brand-red);
  --color-control-hover-icon: #FFFFFF;

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* Radius */
  --radius-card: 12px;
}

html {
  overflow-x: hidden;
}

body {
  min-width: 0;
}

/* 단독 프리뷰, 또는 그누+메인 임베드(전체 Tailwind): Pretendard 본문 */
body:not(.bsk-preview-gnuboard-hf),
body.bsk-preview-embed-main {
  font-family: var(--font-sans);
  font-size: 18px;
  /* Zeplin line-height를 그대로 쓰면 전체 줄높이가 과해져서,
     기본 라인하이트는 타이트하게 두고 컴포넌트에서 필요시만 개별 지정 */
  line-height: 1.35;
  color: var(--color-text);
}

/* 그누+구 본문(content 등): body 타이포는 두지 않음 — g5-legacy 레이어가 담당 */

/*
 * 메인(테마 index + preview 임베드, BSK_PREVIEW_260212_EMBED_TAILWIND_MAIN):
 * 그누 default_renew 등 #wrapper / #container 의 max-width·min-width 가
 * Tailwind 메인(#container.bsk-preview-home-root)까지 좁히는 경우 해제.
 * (섹션 내부 container mx-auto max-w-[1250px] 등은 그대로 두어 콘텐츠 폭만 유지)
 */
body.bsk-preview-embed-main #wrapper,
body.bsk-preview-embed-main #container,
body.bsk-preview-embed-main #container.bsk-preview-home-root {
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.bsk-preview-embed-main #container.bsk-preview-home-root > main {
  max-width: none !important;
  width: 100% !important;
}

/* 신규 헤더/탑바만 프리뷰 타이포(비레이어 → g5-legacy 레이어보다 우선) */
#bsk-preview-chrome-root {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.35;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* 메인 배너: 항상 뷰포트 전체 너비 */
#hero-section {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Navigation - Zeplin: 헤더 96px, GNB 텍스트 올려서 수직 중앙 느낌, 24/29 Bold, 밑줄 6px */
.bsk-nav-link-py {
  padding-top: 22px;
  padding-bottom: 22px; /* 위아래 동일 패딩으로 텍스트 중앙정렬 */
}
/* GNB 링크: 공통 .nav-item의 padding-bottom:8px보다 우선 적용 */
.nav-item.bsk-nav-link-py {
  padding-bottom: 22px;
}
.nav-item {
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  color: #333333;
  position: relative;
  cursor: pointer;
  transition: color 0.18s ease;
  display: inline-block;
  vertical-align: middle; /* 로고·검색과 세로 정렬 */
}
.nav-item.active { color: #003366; }
.nav-item:hover { color: #d06537; }
/* Zeplin: 빨간 밑줄 6px #D9232E, 헤더 하단 근처(90~96px 구간), 서브메뉴 위에 */
.nav-item.active::after,
.bsk-nav-item-wrapper:hover .nav-item::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -14px; /* 헤더 내부 90~96px 구간에 위치 */
  width: calc(100% + 24px);
  height: 4px;
  background-color: #D9232E;
  border-radius: 0;
  pointer-events: none;
  z-index: 50; /* 서브메뉴(z-index:40) 위에 표시 */
}

/* Zeplin: 탑바 44px, 헤더(Rectangle 190) 96px, 서브메뉴(Group 201) y=140 */
.bsk-gnb-wrapper { position: relative; }
.bsk-gnb-wrapper header {
  height: 96px;
  min-height: 96px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.bsk-gnb-inner {
  padding-top: 0;
  padding-bottom: 0;
}
/* GNB 링크를 헤더 안에서 세로 중앙 정렬(패딩 외 정렬 보조) */
.bsk-gnb-wrapper nav {
  display: flex;
  align-items: center;
  gap: 42px;
}
.bsk-nav-item-wrapper { position: static; display: flex; align-items: center; }
/* 서브메뉴 위치 기준: bsk-gnb-wrapper(전체폭) → logo~Rect191 구간과 동일하게 */
/* Zeplin: Rectangle 187 = logo~Rect191끝 1250px, y=140(헤더 끝) → 밑줄과 겹치지 않게 간격 0 */
.bsk-submenu-panel {
  position: absolute;
  left: calc(((100% - 1250px) / 2) + 178px);
  top: 100%;
  margin-top: 0; /* 제플린: 서브메뉴는 헤더(96px) 바로 아래, 밑줄(90~96px) 가리지 않음 */
  /* Zeplin: 서브패널 가로 1070px */
  width: 1070px;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #C7D2DE;
  /* border-top: none; */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  /* 위로 번지는(상단) 그림자를 줄이고, 하단만 자연스럽게 보이도록 조정 */
  box-shadow: 0 16px 24px -16px rgba(0, 51, 102, 0.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  transition-delay: 0.3s; /* 닫힐 때 지연을 늘려 마우스 이동 중 메뉴 유지 */
  z-index: 40;
}
/* 서브메뉴 상단에 보이지 않는 hover 영역 추가 (간격 메우기) */
.bsk-submenu-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 35px; /* 헤더 하단부터 서브메뉴 시작점까지 완전히 커버 */
  background: transparent;
  pointer-events: auto;
}
.bsk-nav-item-wrapper:hover .bsk-submenu-panel {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* 열릴 때는 즉시 */
}
/* Zeplin Group 201: 1250×높이, inner 패딩 상70 우71 하40 좌107 (오차 없음) */
.bsk-submenu-inner {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 48px 71px 70px 107px;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  border-radius: 0 0 12px 12px;
}
/* 패널별 높이: Zeplin Group 201 Rectangle 187 (1=433, 2=254, 3=332, 4=620) */
/* 배경 로고 (Zeplin bg_logo 261×208): x=989 → right:0, 패널별 y 제플린 그대로 */
.bsk-submenu-bg-logo {
  position: absolute;
  right: 0;
  width: 183px;
  height: 146px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: url('./assets/b06e3654-ccda-4910-872e-59050fb70076.png') no-repeat center/contain;
}
.bsk-submenu-panel--1 .bsk-submenu-bg-logo { bottom: 0px; }
.bsk-submenu-panel--4 .bsk-submenu-bg-logo { bottom: 0px; }
.bsk-submenu-bg-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.bsk-submenu-inner--with-bg-logo .bsk-submenu-grid { position: relative; z-index: 1; }
/* Zeplin 컬럼 레이아웃: x좌표 442,710,978,1246 (상대 107,375,643,911)
   → 각 컬럼 232px 고정, 간격 36px
   → 5개 컬럼: 콘텐츠 영역(1072px) 안에 맞추기 위해 유동폭 사용 */
.bsk-submenu-grid {
  display: grid;
  column-gap: 36px; /* 헤딩/타이틀블록 사이 좌우 36px 간격 */
  row-gap: 0;
  grid-template-columns: repeat(4, 192px);
}
.bsk-submenu-grid--cols-2 { grid-template-columns: repeat(2, 192px); }
.bsk-submenu-grid--cols-3 { grid-template-columns: repeat(3, 192px); }
.bsk-submenu-grid--cols-4 { grid-template-columns: repeat(4, 192px); }
.bsk-submenu-grid--cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 36px;
}
/* 성경플랫폼(패널--3): 패딩 상50 우75 하50 좌60, 패널 1070px 내 가변 열(짧은 탐구열 좁게·긴 문구 열 넓게) */
.bsk-submenu-panel--3 .bsk-submenu-inner {
  padding: 50px 75px 50px 60px;
  /* 워터마크 absolute 기준을 패널으로 — 우하단 패널에 딱 붙임 */
  position: static;
}
.bsk-submenu-panel--3 .bsk-submenu-grid--cols-5 {
  display: grid;
  /* 2·4열(새한글·시청각) 살짝 축소, 3열(탐구) 확대 — 탐구↔시청각 헤더 간격 여유 */
  grid-template-columns:
    minmax(158px, 1.02fr)
    minmax(186px, 1.05fr)
    minmax(124px, 0.92fr)
    minmax(228px, 1.28fr)
    minmax(176px, 1.12fr);
  column-gap: 12px;
  row-gap: 0;
  width: 100%;
}
.bsk-submenu-panel--3 .bsk-submenu-grid--cols-5 > .bsk-submenu-col {
  width: 100%;
  max-width: 100%;
  min-width: auto; /* 전역 .bsk-submenu-col min-width:0 무력화 → nowrap 시 열이 문구 폭을 존중 */
}
/* 한 줄 표시(한글 말줄임 방지), 열은 위 minmax·fr로 가용 폭 배분 */
.bsk-submenu-panel--3 .bsk-submenu-title-wrap,
.bsk-submenu-panel--3 .bsk-submenu-link {
  white-space: nowrap;
}
/* Zeplin: 타이틀→첫 링크 20px, 링크 간 12px, 타이틀 컬러 #D15C2E */
.bsk-submenu-panel--3 .bsk-submenu-title-wrap {
  margin-bottom: 20px;
}
.bsk-submenu-panel--3 .bsk-submenu-title {
  color: #D15C2E;
}
.bsk-submenu-panel--3 .bsk-submenu-link {
  padding: 0 0 12px 0;
  line-height: 1.35;
}
.bsk-submenu-panel--3 .bsk-submenu-link:last-child {
  padding-bottom: 0;
}
/* 성경플랫폼: 워터마크 패널 우하단 딱 붙임 */
.bsk-submenu-panel--3 .bsk-submenu-bg-logo {
  right: 0;
  bottom: 0;
}
/* 서브메뉴 컬럼: 텍스트 왼쪽 정렬, 232px 고정폭 (5개 컬럼은 유동) */
.bsk-submenu-col {
  display: block;
  width: 232px;
  min-width: 0;
}
.bsk-submenu-grid--cols-5 .bsk-submenu-col {
  width: auto; /* 5개 컬럼은 그리드가 자동 배분 */
}
/* 섹션 제목: Zeplin 20px/24 Bold #003366 + 골드 화살표 + 구분선 5px #ECECEC */
.bsk-submenu-heading,
.bsk-submenu-title-wrap {
  display: block;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #003366;
  padding-bottom: 0;
  margin-bottom: 16px;
}
/* Zeplin Rectangle 200: 구분선 232×5px #ECECEC (5개 컬럼은 100%) */
.bsk-submenu-heading::after,
.bsk-submenu-title-wrap::after {
  content: '';
  display: none;
  width: 232px;
  height: 5px;
  background: #ECECEC;
  margin-top: 11px;
}
.bsk-submenu-grid--cols-5 .bsk-submenu-heading::after,
.bsk-submenu-grid--cols-5 .bsk-submenu-title-wrap::after {
  width: 100%; /* 5개 컬럼은 컬럼 폭에 맞춤 */
}
.bsk-submenu-heading-arrow,
.bsk-submenu-title-arrow {
  /* display: inline-flex; */
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: middle;
  font-size: 10px;
  color: #FFFFFF;
  background-color: #D69D42;
  border-radius: 50%;
}
.bsk-submenu-heading--full { grid-column: 1 / -1; text-align: center; }
.bsk-submenu-title-wrap .bsk-submenu-title { margin-bottom: 0; padding-bottom: 0; border: 0; }
.bsk-submenu-title {
  display: inline-block;
  font-size: 19px;
  line-height: 17px;
  font-weight: 700;
  color: #D06537;
  transition: color 0.18s ease;
}
.bsk-submenu-col .bsk-submenu-link + .bsk-submenu-title-wrap { margin-top: 28px; }
/* Zeplin: 링크 16px/19 Bold #333333, 행 간격 20px */
.bsk-submenu-link {
  display: block;
  font-size: 18px;
  line-height: 15px;
  font-weight: 400;
  color: #333333;
  padding: 0 0 20px 0;
  transition: color 0.18s ease;
}
.bsk-submenu-link:last-child { padding-bottom: 0; }
.bsk-submenu-link:hover { color: #D9232E; }
.bsk-submenu-link--active { color: #D9232E; }
.bsk-submenu-link--active:hover { color: #D9232E; }
.bsk-submenu-grid > .bsk-submenu-link {
  padding: 0 0 20px 0;
}
/* 3depth 메뉴 항목: "- xxx" 형식, Regular 폰트, 줄 간격 20px */
.bsk-submenu-link--3depth {
  font-weight: 300;
  font-size: 17px;
  padding: 0 0 20px 16px;
  margin-left: 0;
}
.bsk-submenu-link--3depth:first-of-type {
  padding-top: 0;
}
.bsk-submenu-link--3depth:last-child {
  padding-bottom: 0;
}

/* Animations */
.fade-in { animation: fadeIn 0.6s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.slide-up { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

/* Text Effects */
.text-shadow-hero { text-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.book-shadow { box-shadow: 5px 8px 25px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.1); }

/* Card Hover Enhancement - removed, using inline transitions */

/* Scroll Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-brand-navy); }

/* Tailwind CDN에서 line-clamp 플러그인이 없을 때 대비 */
.line-clamp-1,
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }

/* Utilities */
.bsk-tag {
  font-family: var(--font-accent);
  font-size: var(--text-12);
  line-height: var(--lh-15);
  color: var(--color-accent-gold);
  letter-spacing: 0.08em;
}

/* Slider controls - 기본 38x38 (성서공회 알림, 간행물 등) */
.bsk-slide-btn {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
/* 메인 슬라이더용 큰 사이즈 52x52 */
.bsk-slide-btn--lg {
  width: 52px;
  height: 52px;
}
.bsk-slide-btn--white {
  background: #FFFFFF;
  border: 0;
  color: #000000;
}
.bsk-slide-btn--white:hover {
  background: #D9232E;
  color: #FFFFFF;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.bsk-slide-btn--brand {
  background: var(--color-brand-red);
  border: 0;
  color: #FFFFFF;
}
.bsk-slide-btn--brand:hover {
  background: var(--color-brand-red);
  color: #FFFFFF;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.bsk-slide-btn--muted {
  background: var(--color-control-muted-bg);
  border: 1px solid var(--color-control-muted-border);
  color: var(--color-control-muted-icon);
}
.bsk-slide-btn--muted:hover {
  background: #D9232E;
  border-color: #D9232E;
  color: #FFFFFF;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* Pagination (fixed px to avoid drift) */
.bsk-pagination {
  display: flex;
  align-items: center;
  gap: 8px; /* 간격도 px로 고정 */
}
.bsk-pagination-dot {
  /* Zeplin: inactive 20x20 */
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: background-color 160ms ease, opacity 160ms ease, width 160ms ease;
}
.bsk-pagination-dot:hover { background: #FFFFFF; }
.bsk-pagination-dot.is-active {
  /* Zeplin: active 69x20 */
  width: 69px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-brand-red);
}

/* Topbar - Zeplin Rectangle 189: 높이 44px, 16px/19 Medium #000, gap 28px */
.bsk-topbar {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

/* Tailwind `container` 유틸 대신 사용 — 레거시 .container 와 클래스명 충돌 방지 */
.bsk-max-w-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}
.bsk-topbar .bsk-max-w-inner {
  height: 44px;
}
.bsk-topbar-link {
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: #000000;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.bsk-topbar-link:hover {
  color: #D9232E;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bsk-topbar-globe { width: 20px; height: 20px; color: #003366; }

/* Small icon button: 평소 회색, hover 빨강 */
.bsk-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-control-muted-bg);
  border: 1px solid var(--color-control-muted-border);
  color: var(--color-control-muted-icon);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.group:hover .bsk-icon-btn {
  background: var(--color-brand-red);
  border-color: var(--color-brand-red);
  color: #fff;
}