/* Global font stack: Pretendard Variable with sensible fallbacks */
:root {
  --font-sans: Pretendard;
}

html, body, button, input, select, textarea {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  color: var(--color-font); /* global text color */
}

/* Theme color tokens */
:root {
  --color-main: #0b421a;   /* 메인 컬러 */
  --color-bg: #fffcfc;     /* 배경 컬러 */
  --color-sub: #eac784;    /* 서브 컬러 */
  --color-font: #362415;   /* 폰트 컬러 */
  --color-sub2: #604c4c;   /* 서브2 컬러 */

}

/* Global base font size */
html, body { font-size: 16.5px; background: var(--color-bg); }

/* Inherit link color from text by default */
a { color: inherit; }

/* Full-page scroll: one section per scroll */
html, body {
  height: auto;
  scroll-snap-type: none;
  overscroll-behavior-y: auto;
  overflow-y: visible;
}

/* Make top-level sections snap to viewport */
section.simple-hero,
section.section {
  position: relative;
  display: block;
  min-height: auto;
  scroll-margin-top: 0;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  z-index: 1;
}

/* Designate the news section as a breakpoint (final snap at its end) */
.section.section--gray.news {
  min-height: auto;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

/* Do not snap footer so it appears naturally after last section */
footer { scroll-snap-align: none; }

/* Header layout refinements and responsive adjustments */
.header .header-cnt {
  position: relative;
  overflow: visible; /* ensure absolutely positioned items can overflow */
}

/* Fixed header baseline */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 90px;
  z-index: 1000;
  background: transparent; /* transparent on load */
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease;
}

/* When page is scrolled, reserve content space (100px) */
body.has-fixed-header {
  padding-top: 90px;
}

/* When fixed (scrolled), color to main brand */
body.has-fixed-header .header {
  background: var(--color-main);
  backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Also support direct .fixed class on header */
.header.fixed {
  background: var(--color-main);
  backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Header logo variants: default shows color logo, fixed shows white logo */
.header .logo-white { display: none; }
.header .logo-color { display: inline; }
body.has-fixed-header .header .logo-white,
.header.fixed .logo-white { display: inline; }
body.has-fixed-header .header .logo-color,
.header.fixed .logo-color { display: none; }

/* Header text/link colors */
.header, .header a, .header .header-nav .nav-link, .header .header-logo-small { color: #ffffff; }
body.has-fixed-header .header,
body.has-fixed-header .header a,
body.has-fixed-header .header .header-nav .nav-link,
body.has-fixed-header .header .header-logo-small,
.header.fixed,
.header.fixed a,
.header.fixed .header-nav .nav-link,
.header.fixed .header-logo-small { color: #ffffff; }

/* Header sitemap icon color handling */
/* keep sitemap icon white always */
.header .header-sitemap svg path { transition: fill 0.5s ease; fill: #ffffff !important; }
body.has-fixed-header .header .header-sitemap svg path,
.header.fixed .header-sitemap svg path { fill: #ffffff !important; }

/* Header burger menu color - always white */
.header .header-burger-line { background: #ffffff !important; }
body.has-fixed-header .header .header-burger-line,
.header.fixed .header-burger-line { background: #ffffff !important; }
.header-burger.clicked .header-burger-line { background: #F27935 !important; }

/* Header logo link: remove underline and inherit color */
.header .header-logo a { text-decoration: none; color: inherit; display: inline-flex; align-items: center; column-gap: 8px; }
.header .header-logo a:hover,
.header .header-logo a:focus { text-decoration: none; color: inherit; }
.header .header-logo .header-logo-small { text-decoration: none; }

/* Mobile logo layout - force horizontal */
@media only screen and (max-width: 475px) {
  .header-logo,
  .header-logo-main,
  .header-logo-main a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* Dropdown menu base */
.header .nav-item.dropdown { position: relative; }
.header .dropdown-menu {
  position: absolute;
  min-width: 220px;
  padding: 12px 0;
  background: rgba(255,255,255,0.98);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  top: 100%;
  left: 0;
  z-index: 1400; /* bring above */
}
.header .dropdown-menu .dropdown-list__link { display: block; padding: 10px 16px; color: inherit; }

/* Fixed state: dropdown uses brand color (Starbucks green), white text */
body.has-fixed-header .header .dropdown-menu,
.header.fixed .dropdown-menu {
  background: var(--color-main);
  color: #ffffff;
  border-radius: 1rem; /* requirement */
}
body.has-fixed-header .header .dropdown-menu .dropdown-list__link,
.header.fixed .dropdown-menu .dropdown-list__link { color: #ffffff; }

/* Dropdown arrow pointing to 1depth (top center-left offset) */
body.has-fixed-header .header .dropdown-menu::before,
.header.fixed .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 24px; /* adjust to align under 1depth */
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--color-main);
}

/* --- Dropdown: fix hover gap from 1depth to 2depth --- */
/* Theme main.css adds margin-top on .dropdown-menu; neutralize it under header */

/* Create a hover bridge above dropdown to keep hover state while moving cursor */
.header .nav-item.dropdown > .dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -60px; /* match any visual gap between 1depth and menu */
  height: 60px;
}
/* Ensure the submenu remains interactive and visible while hovered */
.header .nav-item.dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; }

/* Fix: prevent layout from locking to 100% viewport height so next sections can appear */
.wrap {
  height: auto !important;
  min-height: 100%;
  overflow-y: visible;
  display: block; /* avoid flex clipping from theme */
}

/* Center the navigation area */
.header .header-inner { margin: 0 auto; display: block; width: 100%; }
.header .header-nav { text-align: center; display: block; width: 100%; }
.header .header-nav .header-nav-list {
  display: inline-flex; /* shrink to content and center via parent text-align */
  align-items: center;
  gap: 0; /* let theme spacing apply; adjust if necessary */
}

/* Create carousels */
.create-carousel { width: 100%; height: auto; }
.create-carousel .swiper-slide { display: flex; align-items: center; justify-content: center; }
.create-carousel img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 8px; }

/* Service preview image in title area */
.service-title-wrap__cnt { margin-top: 16px; }
.service-title-wrap__img { width: 100%; max-width: 420px; }
.service-title-wrap__img img { width: 100%; height: auto; display: block; border-radius: 12px; transition: opacity .3s ease; }

/* Plants carousel */
.plants { padding-top: 40px; padding-bottom: 40px; }
.plants-slider { position: relative; padding:0 2rem}
.plant-card { background: #fff; border-radius: 2rem !important; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.plant-card__img img { display: block; width: 100%; height: 240px; object-fit: cover; border-radius: 2rem 2rem 0 0; }
.plant-card__info { padding: 14px 16px; background: #fafafa;}
.plant-card__name { font-weight: 700; font-size: 16px; line-height: 22px; color: var(--color-font); }
.plant-card__sci { margin-top: 4px; font-style: italic; font-size: 13px; line-height: 18px; color: #667085; }

/* Sitemap icon positioned like logo at the far right */
.header .header-sitemap {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  display: flex;
  align-items: center;
  z-index: 20; /* above nav if overlapping */
}

/* Footer theming: dark background, light text */
.footer { background-image: url('/assets/images/bq_footer_bg.jpg'); color: var(--color-bg);  margin-top: 100px;}
.footer a { color: var(--color-bg); }
.footer a:hover, .footer a:focus { color: var(--color-bg); opacity: .9; }
.footer .footer-logo { color: var(--color-bg); }
.footer .footer-logo .footer-logo-main,
.footer .footer-logo .footer-logo-small { color: var(--color-bg); }
.footer .copyright { color: var(--color-bg); }
.footer .footer-list__link { color: var(--color-bg); }
.footer .footer-list__item.active .footer-list__link { color: var(--color-bg); }
.footer .footer-social__link svg path { fill: var(--color-bg) !important; }
.header .header-sitemap__link svg {
  width: 24px;
  height: 24px;
}
/* Default and hover colors for sitemap icon */
.header .header-sitemap__link svg path {
  fill: #fff; /* default white */
  transition: fill .2s ease;
}

/* ==========================
   Intro/About page cleanup
   ========================== */
.content-section { padding: 48px 0; }
.content-section .content-text p { margin: 0 0 12px; }

/* Table responsive wrapper */
.table-wrap { width: 100%; overflow: auto; margin: 16px 0 28px; }
.content-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; min-width: 640px; }
.content-table thead th { 
  position: sticky; top: 0; z-index: 2;
  background: #2c5530; color: #ffffff; font-weight: 700; text-align: left; 
  padding: 14px 16px; border-bottom: 1px solid #2c5530;
}
.content-table th, .content-table td { padding: 14px 16px; border-bottom: 1px solid #eef2f7; }
.content-table tbody td{ color:#374151; font-size: 16px; }
.content-table tbody tr:nth-child(even) { background: #fbfbfc; }
.content-table tbody tr:hover{ background:#f3f4f6; }

/* Subpages: elevated container */
.is-subpage .table-wrap{ border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.06); background:#fff; }
.is-subpage .content-table th:first-child, 
.is-subpage .content-table td:first-child{ padding-left: 18px; }
.is-subpage .content-table th:last-child, 
.is-subpage .content-table td:last-child{ padding-right: 18px; }

@media (max-width: 768px){
  .content-table{ min-width: 560px; font-size: 14px; }
  .content-table thead th{ font-size: 14px; padding: 12px 14px; }
  .content-table tbody td{ font-size: 15px; padding: 12px 14px; }
}

/* Image gallery grid */
.image-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
.image-gallery .gallery-item { background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.image-gallery .gallery-item img { display: block; width: 100%; height: 160px; object-fit: cover; }
.image-gallery .gallery-item figcaption { padding: 8px 10px; font-size: 13px; color: #555; }

.header .header-sitemap__link:hover svg path {
  fill: var(--color-main);
}

/* Mobile menu overlay/panel */
.mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 2000; }
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }
.mobile-menu-panel { position: absolute; top: 0; right: 0; width: 90%; max-width: 420px; height: 100%; background: #fff; transform: translateX(100%); transition: transform .3s ease; box-shadow: -10px 0 30px rgba(0,0,0,.15); overflow-y: auto; }
.mobile-menu-overlay.active .mobile-menu-panel { transform: translateX(0); }
.mobile-menu-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: inline-flex; align-items:center; justify-content:center; background: transparent; border: 0; cursor: pointer; }
.mobile-menu-content { padding: 56px 16px 16px; }
body.mobile-menu-open { overflow: hidden; }

/* ==========================
   Plants Grid (식물 도감)
   ========================== */
.program-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:20px;margin:20px 0;}
@media (min-width:640px){.program-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.program-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.program-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;transition:all 0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.program-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1);transform:translateY(-2px);}
.program-image{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:#f3f4f6;}
.program-image img{width:100%;height:100%;object-fit:cover;display:block;}
.program-content{padding:16px;}
.program-title{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.3;}
.program-title a{text-decoration:none;color:#111827;}
.program-info{font-size:13px;color:#6b7280;margin-bottom:8px;}
.program-info span{margin-right:8px;}
.program-description{font-size:14px;color:#374151;margin:0;}
.program-description .tag{display:inline-block;margin-right:4px;color:#2563eb;cursor:pointer;}
.program-description .tag:hover{text-decoration:underline;}

/* ==========================
   Notice/News board pages (announcement, news)
   ========================== */
.board-header{ }
.board-header .board-title{ margin:0 0 20px; font-size:56px; line-height:1.15; font-weight:800; color: var(--color-font); }
.board-header .board-subtitle{ margin:0 0 10px; font-size:16px; color:#6b7280; }
.board-tabs{ display:flex; justify-content:center; gap:24px; margin-bottom: 18px; }
.board-tab{ position:relative; display:inline-block; padding-bottom:8px; font-size:18px; color:#6b7280; text-decoration:none; }
.board-tab:hover{ color:#374151; }
.board-tab.is-active{ color:#111827; font-weight:700; }
.board-tab.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#111827; }
.board-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; padding: 8px 0 16px; border-bottom:1px solid #e5e7eb; }
.search-form{ display:flex; align-items:center; gap:8px; }
.search-select, .search-input{ height:40px; padding:0 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:#111827; }
.search-input{ min-width: 240px; }
.btn-search{ height:40px; padding:0 14px; border:1px solid #111827; background:#111827; color:#fff; border-radius:8px; cursor:pointer; }
.btn-search:hover{ opacity:.92; }

.board-list{ list-style:none; margin:0; padding:0; }
.board-list--line .board-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 2px; border-bottom:1px solid #eef2f7; }
.board-list--line .board-item:hover{ background: #fafafa; }
.board-no{ flex:0 0 auto; min-width:44px; height:28px; border-radius:14px; background:#f3f4f6; border:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; font-size:12px; color:#475569 }
.board-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:4px; }
.board-title-link{ font-weight:700; color:#111827; text-decoration:none; line-height:1.45; }
.board-title-link:hover{ text-decoration:underline; }
.board-meta{ font-size:12px; color:#94a3b8; }
.board-badge-important{ display:inline-block; margin-left:6px; font-size:11px; background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; border-radius:12px; padding:2px 8px }
.board-date{ flex:0 0 auto; color:#6b7280; font-size:14px; min-width:90px; text-align:right; }

/* Pagination */
.pagination{ margin-top:18px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.pagination a{ display:inline-block; padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:#374151; text-decoration:none; min-width:36px; text-align:center; }
.pagination a:hover{ background:#f9fafb; }
.pagination a.current{ background:#111827; color:#fff; border-color:#111827; }

@media (max-width: 768px){
  .board-header{ padding: 28px 0 8px; }
  .board-header .board-title{ font-size: 36px; }
  .search-input{ min-width: 140px; }
  .board-list--line .board-item{ align-items:flex-start; gap:8px; }
  .board-date{ text-align:left; }
  .board-actions{ justify-content:stretch; }
  .search-form{ width:100%; }
}

/* ==========================
   Info cards (about/facilities/guide)
   ========================== */
.info-cards{ 
  display: grid; 
  grid-template-columns: repeat(1, minmax(0,1fr)); 
  gap: 16px; 
  margin: 8px 0 24px; 
}
@media (min-width: 600px){ .info-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; } }
@media (min-width: 992px){ .info-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; } }
@media (min-width: 1280px){ .info-cards{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:22px; } }

.info-card{ 
  position: relative; 
  background:#fff; 
  border: 1px solid #eef2f7; 
  border-radius: 14px; 
  padding: 18px; 
  box-shadow: 0 4px 14px rgba(0,0,0,.06); 
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; 
}
.info-card:hover{ 
  transform: translateY(-3px); 
  box-shadow: 0 12px 28px rgba(0,0,0,.12); 
  border-color: #e5e7eb; 
}

.info-card-title{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  font-weight: 800; 
  font-size: 22px; 
  line-height: 1.4; 
  color: var(--color-font); 
  margin-bottom: 8px; 
}
.info-card-title::before{ 
  content:""; 
  display:inline-block; 
  width: 10px; height: 10px; 
  border-radius:9999px; 
  background: var(--color-main); 
}
.info-card-text{ 
  font-size: 16px; 
  line-height: 1.7; 
  color: #4b5563; 
}

/* Accent variant (optional) */
.info-card--accent{ border-color: rgba(11,66,26,.18); background: linear-gradient(180deg, rgba(11,66,26,.02) 0%, #fff 100%); }
.info-card--accent .info-card-title::before{ background: var(--color-sub); }

/* ==========================
   LNB layout for intro subpages (about/facilities/guide)
   Apply when body has .lnb-layout
   ========================== */
body.lnb-layout { scroll-behavior: smooth; }
body.lnb-layout .content-grid { display: block; }
@media (min-width: 500px) {
  /* hide top menu and burger on these pages over 500px */
  body.lnb-layout .header .js-header-inner { display: none !important; }
  body.lnb-layout .header .header-burger { display: none !important; }

  /* two-column layout: sidebar left, content right */
  body.lnb-layout .content-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  /* sticky sidebar */
  body.lnb-layout .sidebar { position: sticky; top: 90px; height: fit-content; }
  body.lnb-layout .sidebar .sidebar-menu { 
    background: #fff; 
    border: 1px solid #eee; 
    border-radius: 10px; 
    padding: 12px; 
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  body.lnb-layout .sidebar .sidebar-title { font-weight: 700; margin-bottom: 8px; }
  body.lnb-layout .sidebar .sidebar-menu ul { list-style: none; padding: 0; margin: 0; }
  body.lnb-layout .sidebar .sidebar-menu li { margin: 4px 0; }
  body.lnb-layout .sidebar .sidebar-menu a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--color-font); }
  body.lnb-layout .sidebar .sidebar-menu a:hover { background: rgba(11,66,26,.06); }
  body.lnb-layout .sidebar .sidebar-menu a.active { background: rgba(11,66,26,.10); font-weight: 600; }
}

/* ==========================
   User Vote (Star Rating)
   ========================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.usevote { margin:0 auto; max-width:1320px;  margin-top:100px;}
.usevote .message { font-weight: 600; margin-bottom: 12px; color: var(--color-font); }
.usevote .usevote-form { margin-bottom: 12px; }
.usevote .rating-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rating-fieldset {border:0px;}
.usevote .rating-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.usevote .rating-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-sub2);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-font);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.usevote .rating-option .stars { display: inline-flex; letter-spacing: 2px; }
.usevote .rating-option .star { font-size: 18px; line-height: 1; }
.usevote .rating-option .star--filled { color: var(--color-sub); }
.usevote .rating-option .star--empty { color: #d0d5dd; }
.usevote .rating-option .rating-label { font-size: 14px; }

/* Hover/Focus/Checked states */
.usevote .rating-option:hover { border-color: var(--color-main); box-shadow: 0 0 0 3px rgba(11,66,26,.12); }
.usevote .rating-input:focus + .rating-option { outline: 2px solid var(--color-main); outline-offset: 2px; }
.usevote .rating-input:checked + .rating-option {
  border-color: var(--color-main);
  background: rgba(11,66,26,.06);
}

.usevote .comment textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: var(--color-font);
}
.usevote .buttons { margin-top: 12px; }

/* Uservote: success (thanks) box */
.vote-thanks{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #d1fae5; /* emerald-100 */
  background: #ecfdf5;       /* emerald-50 */
  color: #065f46;            /* emerald-800 */
  border-radius: 10px;
  font-weight: 700;
}
.vote-thanks__icon svg{ display:block; }

/* Logo swap: default white, fixed -> color */
.header .header-logo .logo-white { display: inline-block; height: 50px; width: auto; vertical-align: middle; }
.header .header-logo .logo-color { display: none; height: 50px; width: auto; vertical-align: middle; }
.header.fixed .header-logo .logo-color { display: inline-block; }

.header.fixed .header-sitemap__link svg path {
  fill: #000; /* default white */
  transition: fill .2s ease;
}
/* Responsive tweaks */

@media (max-width: 1200px) {
  .header .header-sitemap { display: none; }  
}
@media (max-width: 992px) {
  .header .header-sitemap {
    display: none;
  }
  .header .header-nav { text-align: left; }
  .header .header-nav .header-nav-list { display: flex; }
}

/* ==========================
   Carousel UI (Plants / Programs)
   ========================== */
/* Swiper pagination bullets */
.plants-slider .swiper-pagination-bullet,
.project-slider .swiper-pagination-bullet{
  width: 8px; height: 8px; background: rgba(0,0,0,.25); opacity: 1; margin: 0 4px !important;
}
.plants-slider .swiper-pagination-bullet-active,
.project-slider .swiper-pagination-bullet-active{ background: var(--color-main); }

/* Plants pagination position */
.plants-slider .swiper-pagination{
  bottom: -40px !important;
}

/* Swiper navigation arrows */
.plants-slider .swiper-button-prev,
.plants-slider .swiper-button-next,
.project-slider .swiper-button-prev,
.project-slider .swiper-button-next{
  width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);
}
.plants-slider .swiper-button-prev:after,
.plants-slider .swiper-button-next:after,
.project-slider .swiper-button-prev:after,
.project-slider .swiper-button-next:after{ font-size: 16px; color: #111827; font-weight: 700; }
.plants-slider .swiper-button-prev:hover,
.plants-slider .swiper-button-next:hover,
.project-slider .swiper-button-prev:hover,
.project-slider .swiper-button-next:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.16); }

/* ==========================
   Project (Programs) Slide Card - 배경 이미지 항상 표시
   ========================== */
.project-slide{ 
  position: relative; 
  aspect-ratio: 4 / 3; 
  background:#fff; 
  border-radius: 14px; 
  overflow:hidden; 
  box-shadow: 0 8px 24px rgba(0,0,0,.06); 
  transition: transform .25s ease, box-shadow .25s ease; 
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.project-slide:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }

/* 이미지를 배경으로 항상 표시 */
.project-slide__img{ 
  position:absolute; 
  inset:0; 
  opacity:1 !important; 
  z-index: 0 !important;
}
.project-slide__img img{ 
  display:block !important; 
  width:100% !important; 
  height:100% !important; 
  object-fit: cover !important; 
}

/* 텍스트 영역 - 기본 상태에서 반투명 배경 */
.project-slide__hover{ 
  position:absolute; 
  inset:0; 
  display:flex; 
  align-items:flex-end; 
  justify-content:space-between; 
  padding: 16px; 
  gap: 12px; 
  color: #fff; 
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.50) 100%); 
  transition: background .35s ease; 
  z-index: 1;
}

/* hover 시 배경을 더 진하게 */
.project-slide:hover .project-slide__hover{ 
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.70) 100%); 
}

.project-slide__info{ max-width: calc(100% - 56px); }
.project-slide__title{ margin:0 0 6px 0; font-weight:800; font-size: 18px; line-height:1.35; color:#fff; }
.project-slide__descr{ margin:0; font-size: 14px; line-height:1.5; opacity:.95; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#fff; }
.project-slide__btns{ flex-shrink:0; }
.project-slide__btn{ display:inline-flex; width:44px; height:44px; border-radius:9999px; align-items:center; justify-content:center; background:#fff; color:#111827; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.project-slide__btn:hover{ transform: translateY(-1px); }

/* Invert style: 이미지를 처음부터 배경으로 표시 */
.project-slide--invert { position: relative; aspect-ratio: 4 / 3; background:#fff; border-radius:14px; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; display: block; text-decoration: none; color: inherit; cursor: pointer; }
.project-slide--invert:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.project-slide--invert .project-slide__img { position:absolute; inset:0; opacity:1 !important; z-index: 0 !important; }
.project-slide--invert .project-slide__img img { width:100% !important; height:100% !important; object-fit: cover !important; display:block !important; }
.project-slide--invert .project-slide__body { position:absolute; inset:0; padding:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.50) 100%); color:#fff; transition: background .35s ease; z-index: 1; }
.project-slide--invert:hover .project-slide__body { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.70) 100%); }
.project-slide--invert .project-slide__info{ max-width: calc(100% - 56px); }
.project-slide--invert .project-slide__title{ margin:0 0 6px 0; font-weight:800; font-size: 18px; line-height:1.35; color:#fff; }
.project-slide--invert .project-slide__descr{ margin:0; font-size: 14px; line-height:1.5; opacity:.95; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#fff; }
.project-slide--invert .project-slide__btns{ flex-shrink:0; }
.project-slide--invert .project-slide__btn{ display:inline-flex; width:44px; height:44px; border-radius:9999px; align-items:center; justify-content:center; background:#fff; color:#111827; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.project-slide--invert:hover .project-slide__btn{ transform: translateY(-1px); }

/* PC: fix card height to 400px */
@media (min-width: 1200px) {
  .project-slider .swiper-slide { height: auto; }
  .project-slide--invert { aspect-ratio: auto; height: 400px; }
}

/* ==========================
   Plants Card tweaks
   ========================== */
.plant-card{ transition: transform .25s ease, box-shadow .25s ease; }
.plant-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.plant-card__img img{ height: 260px; }

/* ==========================
   Testimonials (Reviews) Box Design
   ========================== */
.testimonials .js-reviews{ overflow: hidden; }
/* Fallback layout only before Swiper initialization */
.testimonials .js-reviews:not(.swiper-initialized) .swiper-wrapper{ display: flex; width: 100%; gap: 16px; }
.testimonials .js-reviews:not(.swiper-initialized) .swiper-slide{ flex: 0 0 auto; width: 100%; }
@media (min-width: 700px){ .testimonials .js-reviews:not(.swiper-initialized) .swiper-slide{ width: calc(50% - 16px); } }
@media (min-width: 1100px){ .testimonials .js-reviews:not(.swiper-initialized) .swiper-slide{ width: calc(33.3333% - 16px); } }
@media (min-width: 1200px){ 
  .testimonials .js-reviews:not(.swiper-initialized) .swiper-wrapper{ gap: 24px; }
  .testimonials .js-reviews:not(.swiper-initialized) .swiper-slide{ width: calc(33.3333% - 24px); }
}
.testimonials .testimonials-slide{ position: relative; background:#fff; border-radius: 20px; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,.002); border: 1px solid #e5e7eb; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.testimonials .testimonials-slide:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); border-color: var(--color-main); }
.testimonials .testimonials-slide__img{ position: relative; }
.testimonials .testimonials-slide__img img{ display:block; width:100%; height: 260px; object-fit: cover; }
.testimonials .testimonials-slide__info{ position: relative; padding: 16px; color: var(--color-font); z-index: 2; }
.testimonials .testimonials-slide__title{ margin:0 0 8px 0; font-weight: 800; font-size: 18px; line-height:1.35; }
.testimonials .testimonials-slide__descr{ margin:0; font-size: 14px; line-height:1.6; color: #4b5563; }
.testimonials .testimonials-slide__header{ display:flex; align-items:center; justify-content:space-between; gap: 8px; margin-bottom: 26px; }
.testimonials .testimonials-slide__icon{ flex-shrink:0; }

/* Hover overlay: semi-transparent to show image */
.testimonials .testimonials-slide::after{ content:""; position:absolute; inset:0; background:var(--color-main); opacity:0; transition: opacity .3s ease; z-index:1; pointer-events:none; }
.testimonials .testimonials-slide:hover::after{ opacity:0.3; }
.testimonials .testimonials-slide:hover .testimonials-slide__info{ color:#fff; }
.testimonials .testimonials-slide:hover .testimonials-slide__descr{ color:#fff; opacity:.95; }
.testimonials .testimonials-slide:hover .testimonials-slide__title{ color:#fff; }
.testimonials .testimonials-slide:hover .testimonials-slide__icon i{ color:#fff; }

/* Mobile: show 1 slide with 15% peek on sides - expanding panels style */
@media (max-width: 768px){
  .testimonials .container{ 
    padding-left: 0; 
    padding-right: 0; 
    max-width: 100%; 
  }
  .testimonials .testimonials-slider{ 
    overflow: visible; 
    position: relative;
  }
  .testimonials .js-reviews{ 
    overflow: visible; 
    padding: 0;
    margin: 0 auto;
  }
  .testimonials .swiper-wrapper{ 
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    /* Swiper가 transform을 자동으로 처리 */
  }
  .testimonials .swiper-slide{ 
    opacity: 1 !important; 
    transition: opacity 0.3s ease !important;
    display: flex !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 70% !important;
    max-width: 400px;
    margin: 0 15% !important;
  }
  /* Active 슬라이드 - expanding-panels 스타일 */
  .testimonials .swiper-slide-active,
  .testimonials .swiper-slide-duplicate-active{ 
    opacity: 1 !important;
    z-index: 10 !important;
  }
  /* is-hover 클래스가 있는 슬라이드 */
  .testimonials .testimonials-slide.is-hover{ 
    transform: scale(1.05);
    box-shadow: 0 16px 36px rgba(0,0,0,.15);
    border-color: var(--color-main);
  }
  /* 이전/다음 슬라이드 */
  .testimonials .swiper-slide-prev,
  .testimonials .swiper-slide-next,
  .testimonials .swiper-slide-duplicate-prev,
  .testimonials .swiper-slide-duplicate-next{ 
    opacity: 1 !important; 
    z-index: 1 !important;
  }
  .testimonials .testimonials-slide{ 
    position: relative; 
    background:#fff; 
    border-radius: 20px; 
    overflow:visible; 
    box-shadow: 0 8px 24px rgba(0,0,0,.002); 
    border: 1px solid #e5e7eb; 
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .testimonials .testimonials-slide:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); border-color: var(--color-main); }
  .testimonials .testimonials-slide__img{ 
    position: relative;
    width: 150px; 
    height: 150px; 
    border-radius: 50%; 
    overflow: hidden;
    display: flex; 
    align-items: center;
    justify-content: center;
    margin: 50px auto 30px;
    flex-shrink: 0;
  }  
  .testimonials .testimonials-slide__img img{ 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: 50%;
  }
  .testimonials .testimonials-slide__info{
    text-align: center;
    width: 100%;
  }
}

/* Desktop height alignment */
@media (min-width: 1200px){
  .testimonials .testimonials-slide__img img{ height: 300px; }
}

/* ==========================
   News carousel card design
   ========================== */
.section.news .news-card{ display:block; background:#fff; border-radius:12px; box-shadow: 0 6px 18px rgba(0,0,0,.06); overflow:hidden; transition: transform .2s ease, box-shadow .2s ease; height: 100%; }
.section.news .news-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.section.news .news-card__body{ padding:16px; }
.section.news .news-card__title{ font-weight:700; font-size:16px; line-height:1.45; margin-bottom:8px; color: var(--color-font, #111827); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.section.news .news-card__meta{ font-size:13px; color:#6b7280; }
.section.news .news-carousel .swiper-container{ overflow:hidden; }
.section.news .news-carousel .swiper-wrapper{ display:flex; }
.section.news .news-carousel .swiper-slide{ flex: 0 0 auto; width: 100%; }
@media (min-width: 600px){ .section.news .news-carousel .swiper-slide{ width: 50%; } }
@media (min-width: 900px){ .section.news .news-carousel .swiper-slide{ width: 33.3333%; } }
@media (min-width: 1200px){ .section.news .news-carousel .swiper-slide{ width: 25%; } }

/* News badges and excerpt */
.section.news .news-card__badge{
  display:inline-block; margin-bottom:6px; font-size:12px; line-height:1; padding:3px 8px; border-radius:9999px; border:1px solid transparent;
}
.section.news .news-card__badge.badge--ann{ background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.section.news .news-card__badge.badge--noti{ background:#ecfeff; color:#0e7490; border-color:#a7f3d0; }
.section.news .news-card__excerpt{ font-size:13px; color:#4b5563; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* External navigation buttons for news */
.section-news-wrapper{ position:relative; }
.section-news-wrapper .news-nav{ position:absolute; right:0; top:50%; transform: translateY(-50%); display:flex; gap:8px; }
.section-news-wrapper .news-nav button{ width:32px; height:32px; border-radius:9999px; border:1px solid #e5e7eb; background:#fff; color:#374151; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.section-news-wrapper .news-nav button:hover{ background:#f9fafb; }

/* ==========================
   Sub Breadcrumb on Sub Hero
   ========================== */
.sub-breadcrumb{ margin: 10px 0; }
.sub-breadcrumb__list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:14px; }
.sub-breadcrumb__item{ display:flex; align-items:center; gap:6px; color: inherit; }
.sub-breadcrumb__link, .sub-breadcrumb__text{ color: inherit; text-decoration:none; font-size:14px; line-height:1; }
.sub-breadcrumb__link:hover{ text-decoration: underline; }
.sub-breadcrumb .icon-home, .sub-breadcrumb .icon-caret{ display:inline-flex; color: inherit; }
.sub-breadcrumb .icon-home svg{ width:18px; height:18px; }
.sub-breadcrumb .icon-caret svg{ width:14px; height:14px; opacity:.9; }

/* Place inside hero: bottom-right overlay */
.page-hero .sub-breadcrumb{ position:absolute; right: 24px; bottom: 24px; margin:0; color:#fff; z-index:5; }
.page-hero .sub-breadcrumb__list{ gap:18px; }
.page-hero .sub-breadcrumb__item{ opacity:.95; }
.page-hero .sub-breadcrumb__link, .page-hero .sub-breadcrumb__text{ color:#fff; font-weight:600; }

@media (max-width: 768px){
  .page-hero .sub-breadcrumb{ right:12px; bottom:12px; }
  .sub-breadcrumb__list{ flex-wrap: wrap; gap:10px; }
  .sub-breadcrumb__link, .sub-breadcrumb__text{ font-size:12px; }
}

/* Sub Breadcrumb on Sub Hero: responsive tweaks */
@media (max-width: 768px){
  .page-hero .sub-breadcrumb__list{ flex-direction: column; }
  .page-hero .sub-breadcrumb__item{ margin-bottom: 6px; }
}

/* ==========================
   Intro pages typography (about, facilities, guide)
   ========================== */
.is-subpage .content-section .title,
.is-subpage .content-section .content-title{ font-size: 36px;  font-weight: 800; }
.is-subpage .content-section .content-subtitle{ font-size: 24px; font-weight: 600; }
.is-subpage .content-section .content-text,
.is-subpage .content-section .content-text p{ font-size: 18px; }

@media (max-width: 768px){
  .is-subpage .content-section .title,
  .is-subpage .content-section .content-title{ font-size: 28px; }
  .is-subpage .content-section .content-subtitle{ font-size: 22px; }
  .is-subpage .content-section .content-text,
  .is-subpage .content-section .content-text p{ font-size: 16px; }
}

/* Spacing & line-heights for intro pages */
.is-subpage .content-section .title,
.is-subpage .content-section .content-title{ line-height: 1.25; margin-bottom: 18px; }
.is-subpage .content-section .content-subtitle{ line-height: 1.35; margin: 36px 0 14px; }
.is-subpage .content-section .content-text{ margin-bottom: 18px; }
.is-subpage .content-section .content-text p{ line-height: 1.75; margin: 0 0 14px; }

@media (max-width: 768px){
  .is-subpage .content-section .title,
  .is-subpage .content-section .content-title{ line-height: 1.3; margin-bottom: 12px; }
  .is-subpage .content-section .content-subtitle{ line-height: 1.35; margin: 24px 0 10px; }
  .is-subpage .content-section .content-text{ margin-bottom: 16px; }
  .is-subpage .content-section .content-text p{ line-height: 1.7; margin: 0 0 10px; }
}

.facility-photos { position: relative; width:100%; }
.facility-photos .facility-photos-base { position:relative; }
.facility-photos .facility-photos-base img{ width:100%; display:block; }
.facility-photos .image-facilities-pointer { position:absolute; width:32px; height:32px; transform: translate(-50%, -50%); cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; }
.facility-photos .image-facilities-pointer img{ width:100%; height:100%; display:block; }
.facility-photos .image-facilities-pointer.point-one { left: 10%; top: 20%; }
.facility-photos .image-facilities-pointer.point-two { left: 20%; top: 30%; }
.facility-photos .image-facilities-pointer.point-three { left: 30%; top: 40%; }
.facility-photos .image-facilities-pointer.point-four { left: 40%; top: 50%; }
.facility-photos .image-facilities-pointer.point-five { left: 50%; top: 60%; }

/* Facilities modal */
.facility-photos.modal { display:none; position: fixed; inset:0; background: rgba(0,0,0,.55); z-index: 3000; align-items: center; justify-content: center; }
.facility-photos.modal.is-open { display:flex; }
.facility-photos.modal .modal-content { background: #fff; width: min(600px, 92%); border-radius: 12px; padding: 20px; position: relative; box-shadow: 0 18px 48px rgba(0,0,0,.25); }
.facility-photos.modal .modal-close { position:absolute; right:10px; top:10px; width:28px; height:28px; cursor:pointer; }
.facility-photos.modal .modal-close::before,
.facility-photos.modal .modal-close::after{ content:""; position:absolute; left:50%; top:50%; width:18px; height:2px; background:#999; transform-origin:center; }
.facility-photos.modal .modal-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.facility-photos.modal .modal-close::after{ transform: translate(-50%,-50%) rotate(-45deg); }

.content-text {}
.content-text ul{}
.content-text ul li{ margin: 1rem 0rem; }


h1.board-title { font-size: var(--fz-xl); font-weight: 800; color:#0f172a !important; margin: 0; }
p.board-subtitle { font-size: var(--fz-md); color:#64748b; margin-top: 6px; }

.legal-article {padding:4rem 0rem; line-height:1.8;}