/* ==========================================================================
   익산예총 K-Modern Hanok 랜딩페이지 전용 CSS (index.php only)
   style.css의 공통 시스템 위에 적용됩니다.
   ========================================================================== */

:root {
  /* 랜딩페이지 카드 공용 인디고 블루 (갤러리 이미지 카드 제외) */
  --indigo-glass-bg: rgba(13, 16, 44, 0.9);
  --indigo-solid-bg: #0c0e2a;
}

/* 섹션4 이탈 애니메이션 전용 투명 스크롤 여유 레이어. 콘텐츠(identity-guide-section)와
   분리해서 고정 높이(100vh)로 둬야, 안내 섹션 디자인을 나중에 또 손봐도 애니메이션이
   깨지지 않는다. 모바일/태블릿은 3D 스크롤 엔진 자체가 꺼져있어 필요 없다. */
.scroll-runway-spacer {
  width: 100%;
  height: 100vh;
}

@media (max-width: 992px) {
  .scroll-runway-spacer {
    height: 0;
  }
}

.identity-guide-section {
  width: 100%;
  padding: 36px 24px 50px;
  position: relative;
  z-index: 5;
}

/* 섹션5 제목/부제 - 다른 섹션보다 크지만, 세로 폭을 줄이기 위해 여백은 압축 */
.identity-guide-section .section-header {
  margin-bottom: 18px !important;
}

.identity-guide-section .section-header .sub-tag {
  font-size: 0.92rem;
}

.identity-guide-section .section-header .main-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
}

.identity-guide-section .section-header .deco-divider {
  margin: 10px 0 !important;
}

.identity-guide-section .section-header p {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

/* 선순환 다이어그램 */
.flow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1220px;
  margin: 22px auto 0;
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  text-align: center;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.flow-node:hover {
  border-color: #ffffff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  transform: translateY(-4px);
}

/* 5개 원 각각 개별 색상 (한국 전통 오방색 계열로 서로 구분되면서도 조화롭게) */
.flow-diagram .flow-node:nth-of-type(1) { background: linear-gradient(135deg, #d9b45f 0%, #a8752c 100%); }
.flow-diagram .flow-node:nth-of-type(2) { background: linear-gradient(135deg, #3d9385 0%, #276358 100%); }
.flow-diagram .flow-node:nth-of-type(3) { background: linear-gradient(135deg, #c9455f 0%, #8a2f43 100%); }
.flow-diagram .flow-node:nth-of-type(4) { background: linear-gradient(135deg, #4a6bb0 0%, #2f4478 100%); }
.flow-diagram .flow-node:nth-of-type(5) { background: linear-gradient(135deg, #8a62b8 0%, #5a3d7a 100%); }

.flow-icon {
  font-size: 1.9rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.flow-label {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fffaf0;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.flow-arrow {
  font-size: 1.6rem;
  color: var(--primary-gold, #c59b27);
  flex-shrink: 0;
}

.flow-loop-caption {
  text-align: center;
  margin: 14px 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f8dc8c;
}

/* 안내 페이지로 넘어가는 CTA */
.identity-cta-wrap {
  text-align: center;
  margin-top: 22px;
}

/* 펄스 링 효과 자체는 공용 .pulse-cta-glow 클래스(style.css)를 사용 */
.identity-cta-btn {
  position: relative;
  display: inline-block;
  padding: 14px 34px;
  background: linear-gradient(135deg, var(--primary-gold, #c59b27) 0%, #9e7a17 100%);
  color: #090c15;
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: var(--radius-sm, 8px);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(197, 155, 39, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.identity-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(197, 155, 39, 0.45);
}

/* --------------------------------------------------------------------------
   1. FULLSCREEN CANVAS & VIEWPORT (랜딩 전용)
   -------------------------------------------------------------------------- */
body.landing-page #wrapper,
body.landing-page #container {
  background-color: #06080e !important;
  background: #06080e !important;
}

html.landing-page,
body.landing-page {
  /* 배경 사진 원본(선명한 버전). body 배경 자리에 직접 넣어 z-index 트릭 없이
     캔버스(뷰포트) 배경 그 자체로 항상 가장 아래에 확실히 깔린다.
     가장자리는 아래 .earth-bg-blur가 흐리게 덮어 중앙만 선명하게 보인다. */
  background-color: #06080e !important;
  background-image: url('../assets/landing_bak.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.earth-bg-blur {
  /* 같은 사진을 확대 + 강한 블러로 화면 전체를 균일하게 덮는다.
     콘텐츠 카드가 화면 중앙에 있으므로 특정 구역만 선명하게 남기면
     오히려 카드 뒤가 제일 산만해진다 - 예외 없이 전체를 흐리게 죽인다. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  background-image: url('../assets/landing_bak.jpg');
  background-size: cover;
  background-position: center center;
  transform: scale(1.18);
  filter: blur(2px) brightness(0.45) saturate(0.7);
  pointer-events: none !important;
}

.earth-bg-vignette {
  /* 가장자리를 추가로 한 번 더 눌러 어둡게 해서 깊이감을 보강한다. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  background: radial-gradient(ellipse 70% 65% at 50% 38%, transparent 0%, rgba(6, 8, 14, 0.35) 55%, rgba(6, 8, 14, 0.75) 100%);
  pointer-events: none !important;
}

html.landing-page, body.landing-page {
  /* .space-3d-viewport가 내부적으로 스크롤을 전담한다. 바깥 html/body가
     같이 스크롤(또는 오버스크롤 바운스)되면 그 여백에 배경이 없는
     기본 흰 화면이 잠깐 비친다 - 바깥 스크롤 자체를 막아 원천 차단한다.
     (데스크톱 전용 - 아래 992px 이하에서는 반드시 풀어줘야 한다) */
  height: 100%;
  overflow: hidden;
}

@media (max-width: 992px) {
  html.landing-page, body.landing-page {
    /* 모바일/태블릿은 3D 스크롤 엔진이 꺼지고 .space-3d-viewport도
       height:auto/overflow:visible로 바뀌어(아래 참조) 일반 문서 스크롤을
       쓴다. 위의 overflow:hidden이 그대로 남아있으면 페이지 전체가
       스크롤이 안 되는 채로 멈춰버린다. */
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
  }
}

.fixed-cosmos-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

html.snap-layout, body.snap-layout {
  height: 100%;
  overflow: hidden;
}

.space-3d-viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: auto;
  perspective: 1400px;
  transform-style: preserve-3d;
  background: transparent !important;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   2. Hanok Header Override (랜딩 전용: 투명 배경 + 기와 처마)
   -------------------------------------------------------------------------- */
#site-header.hanok-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
}

.hanok-header .header-container {
  position: relative !important;
  z-index: 10 !important;
}

.hanok-pattern-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0.12;
  background-image: url('../assets/hanok-lattice-pattern.svg');
  background-repeat: repeat;
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 1;
}

.hanok-header-eaves {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 110px;
  pointer-events: none;
  z-index: 2 !important;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.95));
}

.eaves-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 랜딩 전용 헤더 내비 텍스트 스타일 강화 */
.hanok-header .nav-link {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.98);
}

.hanok-header .nav-link:hover {
  color: #f8dc8c !important;
}

.hanok-header .nav-link::after {
  background: linear-gradient(90deg, #1a5e55, #f8dc8c);
}

.hanok-header .brand-logo .main-title {
  font-size: 1.25rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.hanok-header .brand-logo .sub-title {
  color: #f8dc8c;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.hanok-header .emblem-svg {
  width: 44px;
  height: 44px;
  color: #f8dc8c;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   3. HERO 3D SPACE SECTION
   -------------------------------------------------------------------------- */
.hero-3d-space-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 165px;
  padding-bottom: 35px;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), filter 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-header-text {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 920px;
  padding: 34px 46px;
  border-radius: 24px;
  background: rgba(8, 12, 22, 0.78) !important;
  border: 1px solid rgba(197, 155, 39, 0.48) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
  pointer-events: auto;
}

.hero-badge-hanok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  background: rgba(197, 155, 39, 0.2);
  border: 1px solid #c59b27;
  border-radius: 50px;
  color: #f8dc8c;
  font-size: clamp(0.82rem, 1.8vw, 0.95rem);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.08em;
}

.hero-title-3d {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-family: var(--font-serif);
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 14px;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
  word-break: keep-all;
}

.hero-title-3d span {
  background: linear-gradient(135deg, #f8dc8c 0%, #ffffff 50%, #c59b27 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc-3d {
  font-size: clamp(0.98rem, 1.8vw, 1.15rem);
  color: rgba(255, 255, 255, 0.95);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------------------------------
   4. 3D Carousel Stage
   -------------------------------------------------------------------------- */
.carousel-3d-stage {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  height: 380px;
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: grab;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.carousel-3d-stage:active { cursor: grabbing; }

.carousel-3d-track {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}

.carousel-card-3d {
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 350px;
  margin-top: -175px; margin-left: -160px;
  background: var(--indigo-solid-bg) !important;
  border: 1px solid rgba(197, 155, 39, 0.45);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.carousel-card-3d.active-card {
  border-color: #f8dc8c !important;
  box-shadow: 0 0 60px rgba(197, 155, 39, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  z-index: 10000 !important;
  opacity: 1 !important;
  filter: none !important;
}

.card-img-wrap {
  width: 100%; height: 190px;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
}

.card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.carousel-card-3d:hover .card-img-wrap img { transform: scale(1.08); }

.card-tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 12px;
  background: rgba(13, 16, 44, 0.94) !important;
  border: 1px solid #c59b27 !important;
  border-radius: 4px;
  color: #f8dc8c !important;
  font-size: 0.76rem;
  font-weight: 700;
  z-index: 20 !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  pointer-events: none;
}

.card-body-3d {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.card-title-3d {
  font-size: 1.33rem;
  font-family: var(--font-serif);
  color: #ffffff;
  line-height: 1.45;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-date-3d {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}

.card-btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  color: #f8dc8c;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.scroll-down-hint {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.mouse-icon {
  width: 20px; height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  position: relative;
}

.mouse-icon .wheel {
  width: 4px; height: 8px;
  background: #f8dc8c;
  border-radius: 2px;
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 1.5s infinite;
}

@keyframes scrollWheel {
  0% { opacity: 1; top: 4px; }
  100% { opacity: 0; top: 18px; }
}

/* --------------------------------------------------------------------------
   5. FLOATING 3D GLASS LAYERS (Section 2, 3, 4)
   -------------------------------------------------------------------------- */
.space-glass-layer {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 100vh;
  padding: 110px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.glass-hero-card {
  width: 100%;
  max-width: 1280px;
  background: var(--indigo-glass-bg) !important;
  border: 1px solid rgba(197, 155, 39, 0.45) !important;
  border-radius: var(--radius-md) !important;
  backdrop-filter: blur(26px) !important;
  -webkit-backdrop-filter: blur(26px) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  padding: 9px 44px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
  align-items: center;
  position: relative;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.glass-hero-card:hover {
  border-color: #f8dc8c !important;
  box-shadow: 0 25px 55px rgba(197, 155, 39, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.glass-hero-card::before, .list-board-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/hanok-lattice-pattern.svg');
  background-size: 50px 50px;
  opacity: 0.06;
  pointer-events: none;
  border-radius: var(--radius-md);
}

.glass-emblem-box {
  padding: 40px 24px;
  text-align: center;
}

.emblem-circle {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 3;
  margin: 0 auto 16px;
  border-radius: 14px;
  border: 2px solid #c59b27;
  padding: 4px;
}

.emblem-inner {
  width: 100%; height: 100%;
  border-radius: 10px;
  background: rgba(9, 11, 30, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.emblem-inner img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.glass-gold-btn {
  color: #f8dc8c !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 0.95rem;
}

/* 8 Member Associations */
.assoc-3d-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
}

.assoc-card-hanok {
  background: var(--indigo-glass-bg) !important;
  border: 1px solid rgba(197, 155, 39, 0.45) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 0 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
}

.assoc-card-hanok::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/hanok-lattice-pattern.svg');
  background-size: 40px 40px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}

.assoc-card-hanok:hover {
  border-color: #f8dc8c !important;
  box-shadow: 0 25px 55px rgba(197, 155, 39, 0.35) !important;
}

.assoc-thumb {
  /* 카드 상단 폭 전체를 채우는 썸네일. 카드 자체의 overflow:hidden + 모서리
     둥글기를 그대로 물려받으므로 이미지 자체에 별도 radius가 필요 없다.
     aspect-ratio 대신 고정 높이를 써서 카드 전체 세로 길이가 기존과
     비슷하게 유지되도록 한다(4:3이면 카드가 너무 길어져 화면을 벗어남). */
  width: 100%;
  height: 135px;
  overflow: hidden;
  flex-shrink: 0;
}

.assoc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.assoc-card-hanok:hover .assoc-thumb img {
  transform: scale(1.06);
}

.assoc-card-body {
  padding: 10px 20px 0;
  position: relative;
  z-index: 2;
}

.assoc-title-3d {
  font-size: 1.29rem;
  font-family: var(--font-serif);
  color: #ffffff;
  margin-bottom: 8px;
}

.assoc-desc-3d {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}

/* Dual Notice Glass Boards */
.list-board-glass {
  background: var(--indigo-glass-bg) !important;
  border-radius: var(--radius-md) !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(197, 155, 39, 0.45) !important;
  backdrop-filter: blur(26px) !important;
  -webkit-backdrop-filter: blur(26px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
  position: relative;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.list-board-glass:hover {
  border-color: #f8dc8c !important;
  box-shadow: 0 25px 55px rgba(197, 155, 39, 0.35) !important;
}

/* 목록 항목 기본 레이아웃 — 이 규칙이 없으면 제목이 줄바꿈되며 카드가 불필요하게 길어진다
   (theme/iksan/assets/css/landing.css 에는 있었으나 css/landing.css로 옮길 때 누락됐던 부분). */
.board-item {
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.board-item:last-child {
  border-bottom: none;
}
.board-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.board-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.board-item-date {
  font-size: 0.82rem;
  flex-shrink: 0;
}

/* 순번 사각 배지 — 항목 순서에 따라 5가지 색을 순환 */
.board-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}
.board-num-1 { background: #c59b27; color: #1a1608; }
.board-num-2 { background: #7a2048; color: #f5dbe8; }
.board-num-3 { background: #1b2f5c; color: #dce6ff; }
.board-num-4 { background: #d9bc2c; color: #1a1608; }
.board-num-5 { background: #2f7a4f; color: #e3fbec; }

/* 오시는길 카드용 지도 임베드 — 리스트 대신 실제 지도를 보여준다 */
.board-map-embed {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(197, 155, 39, 0.35);
  filter: grayscale(0.15) contrast(1.05);
  transition: filter 0.3s ease;
}
.board-map-embed:hover {
  filter: grayscale(0) contrast(1);
}
.board-map-embed iframe {
  display: block;
}
.board-map-caption {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

.list-board-glass .board-item-title { color: rgba(255, 255, 255, 0.9) !important; }
.list-board-glass .board-item-title:hover { color: #f8dc8c !important; }
.list-board-glass .board-item-date { color: rgba(255, 255, 255, 0.6) !important; }

/* --------------------------------------------------------------------------
   6. FOOTER Override (랜딩 전용: 한옥 푸터)
   -------------------------------------------------------------------------- */
.hanok-footer {
  /* 헤더(.hanok-header)와 짝을 이루는 통짜 인디고 바 - 화면 폭 전체, 카드/박스
     처리 없이 하단에 슬림하게(약 220px) 붙는다. */
  position: relative !important;
  z-index: 10 !important;
  background: linear-gradient(180deg, #1e356d 0%, #162854 60%, #101e42 100%) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 110px !important;
  padding-top: 14px !important;
  padding-bottom: 12px !important;
  overflow: visible !important;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5) !important;
}

.hanok-footer-goldline {
  position: absolute;
  top: -3px; left: 0;
  width: 100%; height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #c59b27 15%, #f8dc8c 50%, #c59b27 85%, transparent 100%);
  box-shadow: 0 0 16px 1px rgba(248, 220, 140, 0.55);
}

/* --------------------------------------------------------------------------
   7. LANDING-PAGE MOBILE RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .space-3d-viewport {
    height: auto;
    overflow-y: visible;
    perspective: none;
  }

  .hero-3d-space-section {
    height: auto;
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 30px;
  }

  .hero-header-text {
    padding: 24px 20px;
    max-width: 92%;
    margin: 0 auto;
  }

  .hero-title-3d {
    font-size: 2rem;
  }

  .hero-desc-3d {
    font-size: 0.95rem;
  }

  .carousel-3d-stage {
    height: 320px;
  }

  .carousel-card-3d {
    width: 260px; height: 300px;
    margin-top: -150px; margin-left: -130px;
  }

  .card-img-wrap { height: 145px; }

  .glass-hero-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .space-glass-layer {
    min-height: auto;
    padding: 60px 16px 40px;
  }

  body.landing-page .hanok-footer {
    min-height: auto !important; /* 모바일은 3D 스크롤 엔진이 꺼져있어 100vh 강제 불필요 */
    padding-top: 40px !important;
    padding-bottom: 95px !important; /* 플로팅 버튼(좌하단) 간섭 방지 안전 패딩 */
  }

  .identity-guide-section {
    padding: 30px 16px 60px;
  }
}

@media (max-width: 768px) {
  .hero-3d-space-section {
    padding-top: 90px;
    padding-bottom: 20px;
  }

  .hero-header-text {
    padding: 16px 14px;
    border-radius: 16px;
  }

  .hero-title-3d {
    font-size: 1.6rem;
  }

  .hero-badge-hanok {
    font-size: 0.78rem;
    padding: 6px 16px;
  }

  .carousel-3d-stage {
    height: 380px;
  }

  .carousel-card-3d {
    width: 310px; height: 350px;
    margin-top: -175px; margin-left: -155px;
  }

  .card-img-wrap { height: 180px; }
  .card-title-3d { font-size: 1.27rem; }
  .card-body-3d { padding: 16px; }

  .space-glass-layer {
    padding: 40px 14px 30px;
  }

  .assoc-3d-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .assoc-card-hanok {
    padding: 0 0 16px;
  }

  .assoc-thumb {
    height: 110px;
  }

  .assoc-card-body {
    padding: 12px 14px 0;
  }

  .assoc-title-3d { font-size: 0.99rem; margin-bottom: 6px; }
  .assoc-desc-3d { font-size: 0.76rem; }

  .list-board-glass {
    padding: 20px !important;
  }

  .hanok-header-eaves {
    height: 75px;
  }

  .scroll-down-hint {
    display: none;
  }

  .flow-node {
    width: 105px;
    height: 105px;
  }

  .flow-icon { font-size: 1.6rem; }
  .flow-label { font-size: 0.76rem; }

  .identity-guide-section .section-header p {
    font-size: 0.98rem !important;
  }
}

@media (max-width: 480px) {
  .carousel-3d-stage { height: 360px; }

  .carousel-card-3d {
    width: 295px; height: 335px;
    margin-top: -167px; margin-left: -147px;
  }

  .card-img-wrap { height: 170px; }
  .card-body-3d { padding: 14px; }
  .card-title-3d { font-size: 1.21rem; }
  .card-date-3d { font-size: 0.8rem; }

  .assoc-3d-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}