/* 버튼, 카드, 커서, 로더 등 사용자와 맞닿는 UI + Header/Footer */
/* ===============================
   🚀 CTA Button
   =============================== */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  border: 1px solid transparent; /* 기본은 테두리 없음 */
}

.cta.primary {
  background-color: #66bb6a;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

.cta.primary:hover {
  background-color: #fff;                  /* hover 시 흰색 배경 */
  color: var(--color-primary);             /* 텍스트 초록 */
  border-color: var(--color-primary);      /* 테두리 초록 */
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.cta.primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}

.cta.ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.cta.ghost:hover {
  background: rgba(0,0,0,.03);
}

.cta[disabled], .cta.disabled {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===============================
   🧱 Card
   =============================== */
.card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden;
}
.card .card-body { padding: 16px; }
.card .title { font-weight: 700; margin-bottom: 6px; }
.card .meta { font-size: .9rem; color: var(--color-text-muted); }

/* ===============================
   🖱️ Fancy Cursor (데스크톱 전용)
   =============================== */
.cursor-dot, .cursor-circle { pointer-events:none; position:fixed; z-index:9999; }
.cursor-dot { width:6px; height:6px; border-radius:50%; background:var(--color-primary); transform:translate(-50%, -50%); }
.cursor-circle { width:36px; height:36px; border-radius:50%; border:2px solid var(--color-primary); transform:translate(-50%, -50%); opacity:.5; transition: transform .12s ease, opacity .2s ease; }
@keyframes rippleExpand { to { transform: translate(-50%,-50%) scale(6); opacity: 0; } }
@media (max-width:768px){ .cursor-circle{ display:none !important; } }

/* ===============================
   🎬 Hero Overlay
   =============================== */
.video-hero .overlay { padding: 0 28px; text-align: center; }
.video-hero .overlay h2 { font-size: clamp(24px, 4vw, 44px); margin-bottom: 8px; }
.video-hero .overlay p{font-size:clamp(14px,2.6vw,18px);line-height:1.6;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55);opacity:1;}
@media (max-width:480px){ .video-hero .overlay{ padding:0 16px; } }

/* ===============================
   ⏳ Loader Screen
   =============================== */
#loader {
  position: fixed; inset: 0; background: #fff; z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  transition: opacity .25s ease, visibility .25s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; }
#loader .spinner {
  width: 34px; height: 34px; border: 3px solid #e6e6e6; border-top-color: var(--color-primary);
  border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===============================
   🔝 Back-to-Top
   =============================== */
.back-to-top {
  position: fixed; right: 16px; bottom: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--color-primary);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  cursor: pointer; z-index: 9999; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(-4px); }

/* ===============================
   📄 Footer
   =============================== */
.site-footer {
  padding: 32px 24px;
  background-color: var(--color-gray-light);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.site-footer .container { text-align: center; margin: 0 auto; }

/* 공통 텍스트 */
.site-footer p { margin: 0 0 8px; word-break: keep-all; }

/* 링크 */
.site-footer a { color: var(--color-primary); text-decoration: none; margin: 0 6px; }
.site-footer a:hover { text-decoration: underline; }

/* 회사명/주소/연락처 묶음 */
.f-info { display:flex; align-items:center; justify-content:center; gap: 10px; flex-wrap: wrap; }
.f-info .item{ color: var(--color-text-muted); }
.f-info .sep { color: #d0d0d0; }

/* 링크 섹션 */
.f-links { margin-top: 8px; }
.f-links a { margin: 0 8px; }

/* 가운데 문구 */
.f-center { margin-top: 10px; color: var(--color-text-muted); }

/* 반응형 */
@media (min-width:769px){
  .site-footer p { margin: 0; }
}
@media (max-width:768px){
  .site-footer { padding: 24px 16px; font-size: 0.85rem; }
  .site-footer .container { text-align: center; } /* 모바일: 가운데 정렬 고정 */
}

/* Footer font normalization — 자식까지 크기/행간 상속 고정 */
.site-footer { font-size: 0.9rem; line-height: 1.6; }
.site-footer * { font-size: inherit; line-height: inherit; }

@media (max-width: 768px){
  .site-footer { font-size: 0.85rem; }
  .site-footer * { font-size: inherit; }
}
/* === Footer tighten (size/spacing) === */
.site-footer{
  font-size: 0.7rem;   /* 0.9rem → ↓ */
  line-height: 1.45;    /* 1.6 → ↓ */
  padding: 16px 16px;   /* 32px → ↓ (위아래 여백 축소) */
}

.site-footer p{ margin: 0; } /* p 기본 하단여백 제거 */

.site-footer .f-info{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 줄바꿈(행) 간격과 가로 간격을 따로 제어 */
  row-gap: 2px;         /* 줄과 줄 사이 ↑↓ 간격 */
  column-gap: 8px;      /* 항목 간 좌우 간격 */
}

.site-footer .f-info .item,
.site-footer .f-info .sep{
  line-height: 1.35;    /* 한 줄 자체의 높이도 약간 압축 */
}

.site-footer .f-links{ margin-top: 6px; }   /* 8px → ↓ */
.site-footer .f-center{ margin-top: 6px; }  /* 10px → ↓ */

@media (max-width: 768px){
  .site-footer{
    font-size: 0.8rem;  /* 모바일에서 더 살짝 ↓ */
    line-height: 1.5;
    padding: 20px 14px;
  }
  .site-footer .f-links{ margin-top: 4px; }
  .site-footer .f-center{ margin-top: 4px; }
}

/* ===============================
   모바일 패널(구조만 — 스타일은 layout.css)
   =============================== */
.mobile-nav .submenu {
  position: static; transform:none; opacity:1; visibility:visible;
  border: 0; box-shadow: none; border-radius: 0; min-width: auto;
}
.mobile-nav .submenu a{ padding: 12px 16px; }

/* ===============================
   배너/알림 컴포넌트
   =============================== */
.notice {
  display:flex; gap:10px; align-items:center; padding: 10px 12px;
  background: #fff9e6; color: #7a4d00; border:1px solid #ffe2a8; border-radius: 10px;
}
.notice .icon { font-size: 18px; line-height: 1; }

/* ===============================
   간단 로더 (인라인)
   =============================== */
.inline-loader {
  width: 18px; height: 18px; border:2px solid #e6e6e6; border-top-color: var(--color-primary);
  border-radius:50%; animation: spin .9s linear infinite; display:inline-block; vertical-align: middle;
}

/* ===============================
   기타 유틸
   =============================== */
.hidden-xs{ display:none !important; }
@media (min-width:769px){ .hidden-xs{ display:initial !important; } }

/* =======================================
   📽️ Video Hero (공통)
   - 모든 페이지의 .video-hero에 적용
   - 페이지별 세부 차이는 body 클래스(.home-page 등)로 변수만 덮어쓰기
   ======================================= */

/* 1) 기본 토큰 (필요시 variables.css로 이동 가능) */
:root {
  --hero-h-desktop: 100vh;   /* PC: 꽉 채우기(현행 유지) */
  --hero-h-mobile: 60vh;     /* 모바일: 60vh(현행 유지) */
  --hero-overlay-bg: none;   /* 기본은 배경 없음 → 페이지별로 덮어쓰기 */
  --hero-content-max-w: 920px;
  --hero-content-gap: 16px;
}

/* 2) 레이아웃 */
.video-hero {
  position: relative;
  height: var(--hero-h-desktop);
  width: 100%;
  overflow: hidden;
  isolation: isolate; /* overlay와 비디오 레이어 분리 안전 */
}
@media (max-width: 768px) {
  .video-hero { height: var(--hero-h-mobile); }
}

/* 3) 배경 비디오(꽉 채우기) */
.video-hero video {
  position: absolute;
  inset: 0;       /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4) 오버레이(텍스트/버튼 컨테이너) */
.video-hero .overlay {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: var(--hero-content-gap);
  height: 100%;
  padding: 0 clamp(16px, 4vw, 48px);
  background: var(--hero-overlay-bg);
}

/* 홈 전용 예: 기존 동작 보존(너비 제한) */
.home-page .video-hero .overlay {
  max-width: var(--hero-content-max-w);
  margin: 0 auto;
}
.vision .text-block p { font-size: clamp(14px,4vw,18px); }

/* 5) 접근성: 모션 감소 시(선택 사항) */
@media (prefers-reduced-motion: reduce) {
  .video-hero video { animation: none; }
}
/* =======================================
   📽️ Video Hero (공용) — 넥시온팜
   기존 index.css의 히어로 규칙을 공통으로 이동
   ======================================= */

.video-hero {
  position: relative;
  width: 100vw;   /* 현행 유지 */
  height: 100vh;  /* PC: 꽉 채우기(현행 유지) */
  overflow: hidden;
}
.video-hero video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.video-hero .overlay {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  padding-top: 20vh; /* 현행 유지 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Responsive — Hero Overlay (모바일) */
@media (max-width: 768px) {
  .video-hero { height: 60vh; }                /* 현행 유지 */
  .video-hero .overlay { padding-top: 8vh; }   /* 현행 유지 */
  .video-hero .overlay h1 {
    font-size: clamp(24px, 7vw, 36px);
  }
  .video-hero .overlay p {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.6;
  }
}
/* Vision 텍스트를 비디오 히어로와 동일한 톤으로 */
.vision .text-block h2 { font-size: var(--fs-h2); line-height: var(--lh-comf); color:#fff; text-shadow: var(--shadow-text-soft); margin-bottom:8px; }
.vision .text-block p  { font-size: clamp(14px,2.6vw,18px); line-height:1.6; color:#fff; text-shadow: 0 2px 6px rgba(0,0,0,.55); }

/* == Info (Core) - 모든 페이지 공통 == */
.info{
  display: grid;
  grid-template-columns: 1.2fr 1fr;   /* 텍스트 살짝 넓게 */
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  padding: clamp(24px, 6vw, 80px) clamp(16px, 4vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 880px){
  .info{ grid-template-columns: 1fr; }
}
.info-left, .info-right{ min-width: 0; }

.info-left h2{
  font-size: var(--fs-h2);   /* 크기는 타이포 토큰 */
  margin-bottom: var(--gap-sm);
  /* 색상은 공용 테마/페이지에서 결정 → 여기선 건드리지 않음 */
}

.typewriter{ min-height: 1.2em; }

/* 브랜드 로고(가벼운 인터랙션 기본값) */
.brand-logo{
  width: 200px; max-width: 100%;
  height: auto;
  transition: transform .3s ease;
}
.info-left:hover .brand-logo{ transform: scale(1.05); }

/* 유튜브 임베드 16:9 래퍼 (필요 시 사용) */
.video-embed{ width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.video-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* ===============================
   Vision == Video (공용 톤/레이아웃)
   =============================== */

/* 섹션 컨테이너: 가운데 배치/높이/패딩 공통화 */
.content-section.vision,
.content-section.video{
  position: relative;
  display: grid;
  place-items: center;                          /* 텍스트 블록을 수평/수직 중앙 */
  min-height: clamp(360px, 50vh, 560px);
  padding: clamp(24px, 6vw, 64px) 16px;
  text-align: center;
}

/* 텍스트 래퍼: 너비/내부여백 공통화 */
.vision .text-block,
.video  .text-block{
  max-width: var(--hero-content-max-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* 타이포: Vision과 동일 (화이트 + 소프트 그림자) */
.vision .text-block h2,
.video  .text-block h2{
  font-size: var(--fs-h2);
  line-height: var(--lh-comf);
  margin: 0 0 8px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  font-weight: 700;
}

.vision .text-block p,
.video  .text-block p{
  font-size: clamp(14px, 2.6vw, 18px);
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  margin: 0;
}

/* 필요 시 모바일에서 내부 여백만 살짝 조정 */
@media (max-width: 768px){
  .vision .text-block,
  .video  .text-block{ padding: 0 16px; }
}

/* 헤더 토큰 */
#header{
  --header-h: 70px;
  --header-max: 1280px;
  --logo-nav-gap: 28px;
  --nav-gap-desktop: 72px;
  --logo-h: 36px;            /* 로고 높이 (원하면 40~42px까지 살짝 ↑) */
  --logo-nav-gap: 28px;      /* 로고 ↔ 메뉴 사이 간격 (작을수록 '붙어서' 보임) */

  --submenu-offset-x: 0px;
  --submenu-gap: 0px;

  --bar-alpha: .20;
  --subbar-h: 170px;
  --subbar-alpha: .20;  
}

/* 상단바(흰색 반투명 + 블러) */
#header .nav-wrapper,
#header .nav-wrapper.scrolled{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(255,255,255,var(--bar-alpha)) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
}

/* 로고와 메뉴를 '한 줄'로 묶어서 화면 정가운데 */
#header .navbar-inner{
  height: var(--header-h);
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 28px;

  display: flex;
  align-items: center;
  justify-content: center;         /* ← 묶음을 가운데 */
  gap: var(--logo-nav-gap);      /* ★ 로고↔메뉴 간격 적용(핵심) */
}

/* 로고 모습 & 크기 */
#header .logo{
  display: flex; align-items: center; line-height: 1;
  margin-top: 12px;
}
#header .logo-img{
  height: var(--logo-h); width: auto; display: block;
}

/* 메뉴 그룹 */
#header .navbar{ position: relative; }
#header .nav-links{
  display: flex; align-items: center; justify-content: center;  /* ← 메뉴도 가운데 */
  gap: var(--nav-gap-desktop);
  margin: 0; padding: 0; list-style: none;
}

/* 글로벌 서브메뉴: 헤더 hover 시 ‘모든’ 서브 노출 + 전역 바 */
@media (min-width:769px){
  #header .nav-links>li>.submenu{ display:none !important; }
  /* 잘림 방지 */
  #header, #header .nav-wrapper, #header .navbar, #header .navbar-inner, #header .nav-links{ overflow:visible !important; }

  /* 전역 배경 바 */
  #header .sub-backdrop{
    position: fixed; left:0; right:0; top: var(--header-h);
    height: var(--subbar-h);
    background: rgba(255,255,255,var(--subbar-alpha));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    display:none; z-index:999;
  }
  #header:hover .sub-backdrop{ display:block !important; }

  /* 헤더에 올리면 모든 서브메뉴 표시 */
  #header:hover .nav-links>li>.submenu{ display:block !important; }

  /* 각 서브메뉴 위치: 부모 li의 중앙 아래 + 우측 오프셋 */
  #header .nav-links>li{ position:relative !important; }
  #header .nav-links>li>.submenu{
  position: absolute !important;
  top: calc(100% + 16px) !important;

  /* ▼ 핵심: 컨테이너 가운데 */
  left: 50% !important;
  transform: translateX(-50%) !important;

  min-width: 200px; width: max-content;
  /* ▼ 기존에 남아있을 수 있는 text-align:left !important; 를 center로 교체 */
  text-align: center !important;

  background: transparent !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
  z-index: 1001 !important;
}

  /* 항목 hover: 연한 흰색 pill */
  #header .nav-links>li>.submenu a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;   /* ← 텍스트/아이콘 가로 가운데 */
  text-align: center !important;        /* ← 다줄일 때도 가운데 */
  padding: 8px 12px !important;
  border-radius: 14px !important;
  font-weight: 600;
}
  #header .nav-links>li>.submenu a:hover{
    background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
}

/* 데스크톱에서 모바일 내비 숨김 */
@media (min-width:1024px){
  #header .mobile-nav,
  #header .mobile-menu-toggle,
  #header .mobile-nav-backdrop{ display:none !important; }
}

/* 본문이 헤더 뒤로 숨지 않도록 */
body{ padding-top: var(--header-h); }

/* 메뉴 항목 묶음을 ‘정중앙’ 배치 */
#header .nav-links{
  display: flex;
  justify-content: center;  /* ← 핵심 */
  gap: var(--nav-gap-desktop);
  margin: 0; padding: 0; list-style: none;
}
/* 1뎁스 메뉴 텍스트 세로 중앙 정렬 */
#header .nav-links > li > a{
  display: flex;              /* ← 세로 중앙을 확실히 */
  align-items: flex-end;
  height: var(--header-h);
  padding: 0 12px;
  white-space: nowrap;
  font-weight: 700;
  color: #111;
  padding: 0 12px 5px;
}
/* === [HEADER PATCH] font + size + clarity + hover (keep bottom alignment) === */

/* 공통 토큰 */
#header{
  --menu-font: "Nanum Gothic","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",
               system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --menu-size: 1.12rem;              /* 살짝 크게 */
  --menu-weight: 700;                 /* 더 굵게 */
  --menu-color: rgba(0,0,0,.90);      /* 또렷한 진한 톤 */
  --menu-offset-y: 5px;               /* 네가 내려놓은 하단 여백(더 내리고 싶으면 ↑) */
  --brand-green: #2a7a2a;             /* 브랜드 그린 */
  --menu-hover-pill: rgba(255,255,255,.16);  /* 상단바 hover pill */
}

/* 1뎁스 메뉴: 폰트/크기/두께/또렷함 + '아래로' 정렬 유지 */
#header .nav-links > li > a{
  display: flex;                 /* 세로 정렬을 flex로 */
  align-items: flex-end;         /* ← 중앙 아님, '아래로' 유지(네 설정 존중) */
  height: var(--header-h);
  padding: 0 14px var(--menu-offset-y);  /* 아래로 조금 더 내리기 */
  border-radius: 14px;           /* hover pill용 */

  font-family: var(--menu-font);
  font-size: var(--menu-size);
  font-weight: var(--menu-weight);
  color: var(--menu-color);
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  transition: color .15s ease, background-color .15s ease, transform .1s ease;
}

/* 상단바 1뎁스 hover: pill + 초록 글자 (서브 위에 있어도 유지) */
#header .nav-links > li:hover > a,
#header .nav-links > li:focus-within > a{
  color: var(--brand-green) !important;
  background: var(--menu-hover-pill) !important;
}

/* 서브메뉴 텍스트 두께 & 또렷함(요청 3번 반영) */
#header .nav-links > li > .submenu a{
  font-family: var(--menu-font);
  font-weight: 700;                      /* 두께↑ (필요시 600~800 조절) */
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: color .15s ease, background-color .15s ease;
  font-size: 20px;   /* ← 여기 값만 바꾸면 됨 */
  line-height: 1.45; /* (선택) 줄간격 */
}

/* 서브메뉴 hover도 초록 + 연한 pill */
#header .nav-links > li > .submenu a:hover{
  color: var(--brand-green) !important;
  background: rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* === [HEADER PATCH · tasteful green + clear contrast] === */
#header{
  /* 차분한 그린 팔레트 */
  --brand-green-500: #2A7A2A;   /* 기본 */
  --brand-green-600: #236B23;   /* hover/active(조금 더 진하게) */
  --brand-green-400: #3E9C49;   /* 보조 (필요시) */

  /* hover pill(살짝 어둡게 → 영상 위에서도 또렷) */
  --menu-pill-hover: rgba(35,107,35,.10);
  --menu-pill-active: rgba(35,107,35,.16);

  /* 살짝 선명해 보이게 하는 그림자 */
  --menu-text-shadow: 0 1px 1px rgba(0,0,0,.28);
}

/* 1) 상단바 1뎁스 기본(네 정렬값은 유지) */
#header .nav-links > li > a{
  color: #111;
  font-weight: 700;
  letter-spacing: .01em;
  transition: color .15s ease, background-color .15s ease, text-shadow .15s ease;
  border-radius: 14px; /* pill 모양 유지 */
}

/* 2) 1뎁스 hover/focus/열림: 텍스트 그린 + 어두운 pill */
#header .nav-links > li:hover > a,
#header .nav-links > li:focus-within > a,
#header .nav-links > li > a[aria-expanded="true"]{
  color: var(--brand-green-600) !important;
  background: var(--menu-pill-hover) !important;
  text-shadow: var(--menu-text-shadow);
}

/* 3) 서브메뉴 기본/hover: 동일한 톤으로 통일 */
#header .nav-links > li > .submenu a{
  font-weight: 600;
  color: #222;
  transition: color .15s ease, background-color .15s ease;
}
#header .nav-links > li > .submenu a:hover,
#header .nav-links > li > .submenu a:focus-visible{
  color: var(--brand-green-600) !important;        /* 텍스트 그린 */
  background: var(--menu-pill-active) !important;  /* pill 조금 더 진하게 */
  text-shadow: var(--menu-text-shadow);
  border-radius: 12px;
  outline: none;
}

/* 4) 키보드 접근성: 초점 테두리 */
#header .nav-links > li > a:focus-visible,
#header .nav-links > li > .submenu a:focus-visible{
  box-shadow: 0 0 0 2px rgba(62,156,73,.35);
  border-radius: 14px;
}

/* 5) 상단바/서브메뉴 둘 다 그린: li 전체에 hover 걸리면 1뎁스도 함께 강조 */
#header .nav-links > li:hover > a{ color: var(--brand-green-600) !important; }

/* fade-section이 show 되면 반드시 보이게 (GSAP 실패 대비용) */
.fade-section.show { opacity: 1 !important; transform: none !important; transition: opacity .3s ease, transform .3s ease; }

/* === Mobile gutters: 모든 페이지 공통 좌우 16px === */
@media (max-width: 768px) {
  /* 일반 섹션: 좌우 여백 16px */
  .about-main .content-section,
  .smartfarm-main .content-section,
  .solution-main .content-section,
  .business-main .content-section,
  .community-main .content-section,
  .contact-main .content-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* 풀블리드(히어로/비디오) 예외: 좌우 0 유지 */
  .about-main .video-hero,
  .smartfarm-main .video-hero,
  .solution-main .video-hero,
  .business-main .video-hero,
  .community-main .video-hero,
  .contact-main .video-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* === OVERRIDE: header logo size === */
header.nav-wrapper .logo .logo-img {
  height: 48px !important;  /* 데스크톱 기준 원하는 값으로 */
  width: auto !important;    /* 비율 유지 */
  max-height: none !important; /* 다른 곳에서 max-height 걸린 경우 무력화 */
}

@media (max-width: 768px) {
  header.nav-wrapper .logo .logo-img {
    height: 42px !important; /* 모바일 크기 */
  }
}

/* 배경이미지 섹션용 디밍 + hover 밝아짐 */
.content-section.bg-dim{
  position: relative;
  overflow: hidden;
  --dim-color: rgba(11, 77, 63, 0.45);      /* 필요 시 섹션별로 색/진하기만 덮어쓰기 */
}
.content-section.bg-dim::before{
  content:"";
  position:absolute; inset:0;
  background: var(--dim-color);
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events:none;
  z-index: 0;
}
@media (hover:hover){ .content-section.bg-dim:hover::before{ opacity:.15; } }
.content-section.bg-dim:focus-within::before{ opacity:.15; }
.content-section.bg-dim > *{ position:relative; z-index:1; } /* 텍스트는 항상 위 */

/* ===== Firestore 리스트 공통 UI (notice/event/press) ===== */
#noticeList .nf-item,
#eventList .nf-item,
#pressList .nf-item { list-style: none; }

#noticeList .nf-row,
#eventList .nf-row,
#pressList .nf-row {
  padding: .9rem 0;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  cursor: pointer;
  outline: none;
}

#noticeList .nf-row:focus,
#eventList .nf-row:focus,
#pressList .nf-row:focus { box-shadow: 0 0 0 2px rgba(34,197,94,.25) inset; }

#noticeList .nf-head,
#eventList .nf-head,
#pressList .nf-head {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

#noticeList .nf-title,
#eventList .nf-title,
#pressList .nf-title {
  font-weight: 700; color: var(--color-primary, #1b5e20);
}

#noticeList .nf-date,
#eventList .nf-date,
#pressList .nf-date {
  margin-left: .5rem; color: #6b7280; font-size: .95rem;
}

#noticeList .nf-caret,
#eventList .nf-caret,
#pressList .nf-caret {
  margin-left: auto; color: #9ca3af; transition: transform .2s ease;
}

#noticeList .nf-body,
#eventList .nf-body,
#pressList .nf-body {
  margin: .45rem 0 0;
  color: var(--color-text, #333);
  line-height: 1.6;

  /* 2줄 미리보기(기본 닫힘 상태) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#noticeList .nf-thumb,
#eventList .nf-thumb,
#pressList .nf-thumb {
  display: block; margin-top: .5rem;
  width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px;
}

#noticeList .nf-meta,
#eventList .nf-meta,
#pressList .nf-meta {
  margin-top: .35rem; color: #475569; font-size: .95rem;
}

#noticeList .nf-more,
#eventList .nf-more,
#pressList .nf-more {
  display: inline-block; margin-top: .45rem;
  font-size: .9rem; color: var(--color-accent, #0a7f2e); text-decoration: underline;
}

/* 펼친 상태 */
#noticeList .nf-row.open .nf-body,
#eventList .nf-row.open .nf-body,
#pressList .nf-row.open .nf-body {
  -webkit-line-clamp: unset; overflow: visible;
}
#noticeList .nf-row.open .nf-caret,
#eventList .nf-row.open .nf-caret,
#pressList .nf-row.open .nf-caret { transform: rotate(180deg); }