@charset "utf-8";

/*-------------------------------------------------
Author : WEB,Seo
Create date : 2025. 01. 17
Last update : 
-------------------------------------------------*/

/* ========== import ========== */
@import url('/resources/css/default/jquery-ui.css');
@import url('/resources/css/default/normalize.css');
@import url('/resources/css/assets/fonts.css');
@import url('/resources/css/assets/mixin.css');
@import url('/resources/css/assets/screen-ui.css');


/* ========== default setting ========== */
html {
  font: 300 16px/1.2 'paperlogy', sans-serif;
}

body {
  font-family: 'paperlogy', sans-serif;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-y: scroll;
  overflow-x: clip;
  /* sticky footer: 콘텐츠가 짧아도 푸터를 화면 맨 아래로 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* 푸터를 항상 하단으로 밀어냄 */
#gl-footer { margin-top: auto; }

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-thumb {
    width: 10px;
    background: rgba(0, 0, 0, 0.3); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 모서리 둥글게 */
}

/* ========== //default setting ========== */


/* ========== main ========== */
.visual {
  width: 100%;

}

/* ---------- 메인 히어로 슬라이더 ---------- */
.gl-hero-swiper { position: relative; width: 100%; overflow: hidden; }
.gl-hero-swiper .swiper-slide { line-height: 0; position: relative; }
.gl-hero-swiper .swiper-slide img { display: block; width: 100%; height: auto; }

/* 좌우 화살표 */
.gl-hero-swiper .swiper-button-prev,
.gl-hero-swiper .swiper-button-next { color: #fff; }
.gl-hero-swiper .swiper-button-prev::after,
.gl-hero-swiper .swiper-button-next::after {
  font-size: 40px;
  font-weight: 900;
  -webkit-text-stroke: 2px #fff;
}

/* 하단 페이지네이션 */
.gl-hero-swiper__controls {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gl-hero-swiper__pagination {
  position: static;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gl-hero-swiper__pagination .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  background: #fff;
  opacity: .6;
  margin: 0 !important;
}
.gl-hero-swiper__pagination .swiper-pagination-bullet-active {
  background: #E83A18;
  opacity: 1;
}
/* ---------- //메인 히어로 슬라이더 ---------- */

/* ---------- 이미지바디 전체 너비 ---------- */
.gl-image-body.gl-image-body--full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* ---------- //이미지바디 전체 너비 ---------- */

/* ---------- 디스플레이 탭(3*2) 하단 구분선 ---------- */
.gl-subnav--grid { border-bottom: none; }
.gl-subnav--grid .gl-subnav__tab { border-bottom: 1px solid var(--border-subtle); }
/* ---------- //디스플레이 탭(3*2) 하단 구분선 ---------- */

/* ---------- 헤더 로고 좌측 정렬 (데스크탑) ---------- */
@media (min-width: 961px) {
  .gl-header__inner { position: relative; justify-content: center; }
  .gl-header__inner .gl-logo {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  .gl-header__inner .gl-nav { margin-left: 0; }
}
/* ---------- //헤더 로고 좌측 정렬 (데스크탑) ---------- */

/* ---------- 헤더/푸터 로고 사이즈 조정 ---------- */
.gl-header__inner .gl-logo img { height: 44px; }
#gl-footer .gl-footer__logo img { height: 40px; }
@media (max-width: 960px) {
  .gl-header__inner .gl-logo img { height: 32px; }
}
/* ---------- //헤더/푸터 로고 사이즈 조정 ---------- */

/* ---------- 푸터 폰트 +2px ---------- */
#gl-footer .gl-footer__info  { font-size: 14.5px; }
#gl-footer .gl-footer__links { font-size: 14px; }
/* ---------- //푸터 폰트 +2px ---------- */

/* ---------- 푸터 모바일 반응형 보강 (열 collapse는 glvision.css @960px) ---------- */
@media (max-width: 600px) {
  #gl-footer .gl-footer__inner { padding: 24px 18px; gap: 14px; }
  #gl-footer .gl-footer__info { font-size: 13px; line-height: 1.85; word-break: keep-all; }
  #gl-footer .gl-footer__copy { font-size: 12px; margin-top: 8px; }
  #gl-footer .gl-footer__links { flex-wrap: wrap; gap: 10px 16px; padding: 12px 18px; font-size: 13px; }
  #gl-footer .gl-footer__logo img { height: 26px; }
}
@media (max-width: 380px) {
  #gl-footer .gl-footer__info { font-size: 12px; }
}

/* ---------- 미디어(홍보영상) 목록 그리드 ---------- */
.gl-media {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0px 64px;
}
.gl-media__head {
  text-align: center;
  margin: 100px 0 100px;
}
.gl-media__line {
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 auto 20px;
  background: var(--gl-orange-500);
}
.gl-media__title {
  font-size: 34px;
  font-weight: 500;
  color: #111;
  letter-spacing: -0.02em;
}
.gl-media__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 30px;
}
.gl-media__date {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gl-red-500);
}
.gl-media__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  overflow: hidden;
}
.gl-media__frame iframe,
.gl-media__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.gl-media__frame a { display: block; width: 100%; height: 100%; }
.gl-media__ready {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
  color: #aaa;
  font-size: 16px;
}
@media (max-width: 768px) {
  .gl-media__grid { grid-template-columns: 1fr; gap: 32px; }
  .gl-media__title { font-size: 26px; }
}
/* ---------- //미디어(홍보영상) 목록 그리드 ---------- */

/* ---------- 문의하기 입력폼 스타일 ---------- */
/* normalize.css의 input[type="text"](0,1,1)보다 우선 적용 */
.gl-inquiry .gl-inquiry__input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: 8px;
  background: none;
}
/* 자동완성(autofill) 배경/글자색 처리 */
.gl-inquiry__input:-webkit-autofill,
.gl-inquiry__input:-webkit-autofill:hover,
.gl-inquiry__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-strong);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
          box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-in-out 0s;
}
/* ---------- //문의하기 입력폼 스타일 ---------- */

/* ========================================================
   고객지원 게시판 - 공지사항 뷰페이지 (notice_view 등)
   ======================================================== */
.sup { font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:#222; line-height:1.6; word-break:keep-all; padding:60px 20px 100px; }
.sup__inner { max-width:1200px; margin:0 auto; }
.sup__notice { font-size:14px; color:#666; padding:16px 18px; background:#f8f8f8; border-radius:6px; margin-bottom:30px; }
.bview { border-top:2px solid #333; }
.bview__head { padding:26px 8px; border-bottom:1px solid #e5e5e5; }
.bview__title { font-size:22px; font-weight:700; line-height:1.4; margin-bottom:14px; }
.bview__meta { display:flex; flex-wrap:wrap; gap:18px; list-style:none; font-size:14px; color:#888; padding:0; margin:0; }
.bview__meta b { color:#444; font-weight:600; }
.bview__body { padding:36px 8px; min-height:220px; font-size:16px; line-height:1.9; }
.bview__body p { margin:0 0 12px; }

/* ========================================================
   공통 모달 (이용약관 등)
   ======================================================== */
.gl-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.gl-modal.is-open { display: block; }
.gl-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.gl-modal__dialog {
  position: relative;
  width: calc(100% - 32px);
  max-width: 760px;
  max-height: calc(100vh - 80px);
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.gl-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5e5;
}
.gl-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #222;
}
.gl-modal__close {
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #888;
  cursor: pointer;
}
.gl-modal__close:hover { color: #222; }
.gl-modal__body {
  padding: 24px 28px 32px;
  overflow-y: auto;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: #444;
  line-height: 1.7;
  word-break: keep-all;
}
.gl-terms__chapter {
  margin: 28px 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: #222;
  text-align: center;
}
.gl-terms__chapter:first-child { margin-top: 0; }
.gl-terms__article {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #222;
}
.gl-modal__body p {
  margin: 0 0 6px;
  font-size: 14px;
}
@media (max-width: 768px) {
  .gl-modal__dialog { margin: 20px auto; max-height: calc(100vh - 40px); }
  .gl-modal__head { padding: 16px 18px; }
  .gl-modal__title { font-size: 18px; }
  .gl-modal__body { padding: 18px 18px 24px; }
}
.bview__body a { color:#c0392b; text-decoration:underline; word-break:break-all; }
.bview__body img { max-width:100%; height:auto; }
.bnav { list-style:none; border-top:1px solid #e5e5e5; margin-top:30px; padding:0; }
.bnav__row { display:flex; align-items:center; gap:16px; padding:16px 8px; border-bottom:1px solid #f0f0f0; font-size:15px; }
.bnav__label { flex-shrink:0; width:60px; font-weight:700; color:#999; }
.bnav__none { color:#aaa; }
.bnav__row a { color:#333; text-decoration:none; }
.bnav__row a:hover { color:#c0392b; text-decoration:underline; }
.bview__foot { display:flex; justify-content:center; margin-top:36px; }
.btn-list { display:inline-flex; align-items:center; justify-content:center; min-width:130px; height:50px; padding:0 26px; background:#333; color:#fff; font-size:15px; font-weight:600; text-decoration:none; border-radius:4px; transition:.15s; }
.btn-list:hover { background:#c0392b; }
@media (max-width:768px){
  .sup { padding:36px 16px 60px; }
  .bview__title { font-size:19px; }
}

/* ---- 자료실(library) 첨부파일 박스 (library_view) ---- */
.bfile { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:24px 0 0; padding:16px 18px; background:#f8f8f8; border:1px solid #e5e5e5; border-radius:6px; }
.bfile__ico { font-size:18px; }
.bfile__name { font-size:15px; font-weight:600; color:#333; }
.bfile__size { font-size:13px; color:#999; }
.bfile__btn { margin-left:auto; display:inline-flex; align-items:center; height:40px; padding:0 18px; background:#c0392b; color:#fff; font-size:14px; font-weight:600; border-radius:4px; text-decoration:none; transition:.15s; }
.bfile__btn:hover { background:#a93226; }

/* ========================================================
   메인 배너 밴드 (통이미지 → 하드코딩) : 퀀텀닷 / 스마트팜 / 디스플레이
   ======================================================== */
.gl-band {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
/* ---------- 히어로 문구 오버레이 (슬라이드별) ---------- */
.gl-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 0 6%;
  pointer-events: none;
}
.gl-hero__overlay--left { justify-content: flex-start; padding-left: calc(6% + 50px); }
.gl-hero__overlay--right { justify-content: flex-end; padding-right: calc(6% + 50px); }
.gl-hero__overlay-inner { max-width: 620px; text-align: left; }
.gl-hero__title .gl-point { color: #ff0000; font-size: 30px; }
.gl-hero__label {
  display: inline-block;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gl-red-500);
  font-size: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.gl-hero__title {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ---------- 퀀텀닷 / 스마트팜 : 이미지 절반 | 텍스트 절반 ---------- */
.gl-band__inner {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.gl-band__visual {
  flex: 1 1 50%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #e9ecee;
  color: #9ba3ab;
  font-size: 22px;
}
.gl-band__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-band__text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 6%;
}
.gl-band__title {
  align-self: flex-start;      /* 텍스트 폭만큼만 (보더가 글씨 밑에) */
  display: inline-block;
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--gl-red-500);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #2b2b2b;
}
.gl-band__desc {
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.9;
  color: #555;
}
.gl-band__desc strong { font-weight: 600; color: var(--gl-red-500); }

/* 퀀텀닷 ↔ 스마트팜 사이 구분선 */
.gl-band--farm { border-top: 1px solid var(--border-subtle, #e5e5e5); }

/* ---------- 디스플레이 (연한 미색 배경 · 검정 텍스트) ---------- */
.gl-band--display { background: #fafafa; }
.gl-band__inner--display {
  max-width: 1400px;
  margin: 0 auto;
  flex-direction: column;
  padding: 96px 40px;
}
.gl-band__head { text-align: center; margin-bottom: 40px; }
.gl-band__title--light { color: #2b2b2b; margin: 0 0 4px; }
.gl-band__sub {
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 300;
  color: #666;
}
.gl-band__grid {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.gl-prod { display: flex; flex-direction: column; align-items: center; }
.gl-prod__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f4f5f6;
}
.gl-prod__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 실제 이미지가 들어갈 자리 - 임시 보더 표시 */
.gl-prod__img--ph {
  border: 2px dashed rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  text-align: center;
}
.gl-prod__name {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 500;
  color: #2b2b2b;
  text-align: center;
}

/* ---------- 태블릿 ---------- */
@media (max-width: 1024px) {
  .gl-hero__title { font-size: 34px; }
  .gl-hero__label { font-size: 18px; }
  .gl-band__visual { min-height: 340px; }
  .gl-band__text { padding: 44px 6%; }
  .gl-band__title { font-size: 34px; }
  .gl-band__desc { font-size: 17px; }
  .gl-band__sub { font-size: 18px; }
  .gl-band__grid { grid-template-columns: repeat(3, 1fr); gap: 28px 18px; }
}

/* ---------- 모바일 (이미지 위 · 텍스트 아래로 스택) ---------- */
@media (max-width: 768px) {
  /* 히어로 문구: 좌/우 → 가운데 정렬 */
  .gl-hero__overlay,
  .gl-hero__overlay--left,
  .gl-hero__overlay--right { justify-content: center; padding: 0 24px; background: rgba(0, 0, 0, 0.45); }
  .gl-hero__overlay-inner { max-width: 100%; text-align: center; }
  .gl-hero__title { font-size: 24px; }
  .gl-hero__title .gl-point { font-size: 16px; }
  .gl-hero__label { margin-bottom: 10px; font-size: 15px; }
  /* 퀀텀닷·스마트팜: 이미지 숨기고 텍스트만 */
  .gl-band__inner { flex-direction: column; }
  .gl-band__visual { display: none; }
  .gl-band__text { padding: 40px 24px; text-align: center; }
  .gl-band__title { align-self: center; font-size: 28px; margin-bottom: 14px; }
  .gl-band__desc { font-size: 16px; }
  .gl-band__inner--display { padding: 44px 22px; }
  .gl-band__head { margin-bottom: 28px; }
  .gl-band__sub { font-size: 16px; }
  .gl-band__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .gl-prod__name { font-size: 17px; margin-top: 12px; }
}
@media (max-width: 480px) {
  .gl-hero__title { font-size: 20px; }
  .gl-band__title { font-size: 24px; }
}

@media (max-width: 480px) {
  .gl-band__title { font-size: 26px; }
  .gl-band__desc { font-size: 16px; line-height: 1.85; }
  .gl-band__grid { gap: 18px 12px; }
  .gl-prod__name { font-size: 15px; }
}

/* ---------- 홈 히어로 슬라이더 모바일 보강 ---------- */
@media (max-width: 768px) {
  /* 슬라이드에 충분한 높이 부여(문구 잘 보이게), 이미지는 cover */
  .gl-hero-swiper .swiper-slide { min-height: 320px; }
  .gl-hero-swiper .swiper-slide img { height: 320px; object-fit: cover; }
  .gl-hero-swiper .swiper-button-prev::after,
  .gl-hero-swiper .swiper-button-next::after { font-size: 26px; -webkit-text-stroke: 1.5px #fff; }
  .gl-hero-swiper__controls { bottom: 12px; }
  .gl-hero-swiper__pagination .swiper-pagination-bullet { width: 10px; height: 10px; }
}
@media (max-width: 480px) {
  .gl-hero-swiper .swiper-slide { min-height: 260px; }
  .gl-hero-swiper .swiper-slide img { height: 260px; }
}
@media (max-width: 480px) {
  .gl-hero-swiper .swiper-button-prev::after,
  .gl-hero-swiper .swiper-button-next::after { font-size: 20px; }
}

/* ========================================================
   서브페이지 히어로 배너 (SVG + 그라데이션 디자인)
   ======================================================== */
.gl-subpage__hero {
  position: relative;
  width: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  overflow: hidden;
  /* 딥블루 메시 그라데이션 */
  background: linear-gradient(125deg, #0b2a52 0%, #17457c 55%, #2a68ac 100%);
  text-align: center;
}
.gl-subpage__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.gl-subpage__hero-inner { position: relative; z-index: 1; }
.gl-subpage__hero-line {
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto 22px;
  background: var(--gl-orange-500);
  border-radius: 2px;
}
.gl-subpage__hero-text {
  margin: 0;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #fff;
}
/* 포인트 색 (Good Light / Global Leader) — 소프트 시안 */
.gl-subpage__hero-text .gl-point { color: #8bd3ff; font-weight: 600; }

@media (max-width: 768px) {
  .gl-subpage__hero { min-height: 220px; padding: 44px 18px; }
  .gl-subpage__hero-line { margin-bottom: 16px; }
  .gl-subpage__hero-text { font-size: 27px; line-height: 1.45; }
}
@media (max-width: 480px) {
  .gl-subpage__hero { min-height: 180px; padding: 32px 16px; }
  .gl-subpage__hero-text { font-size: 21px; }
}

/* ========================================================
   서브페이지 콘텐츠 공통
   - 데스크톱에서는 1200px 폭을 꽉 채움(좌우 여백 0)
   - 1240px 이하에서만 좌우 여백을 넣어 가장자리에 붙지 않게
     (greeting/history/media는 .gl-subpage 접두로 glvision 단축 padding을 확실히 덮어씀)
   - .gl-content(콘텐츠 최상위)에 공통 상단 여백
   ======================================================== */
.gl-content { padding-top: 40px; }
@media (max-width: 1240px) {
  .gl-subpage .gl-qd, .gl-subpage .gl-disp, .gl-subpage .gl-farm, .gl-subpage .gl-tech, .gl-subpage .gl-loc,
  .gl-subpage .gl-greeting,
  .gl-subpage .gl-history__inner,
  .gl-subpage .gl-media,
  .gl-subpage .gl-notice,
  .gl-subpage .gl-board-view,
  .gl-subpage .gl-inquiry,
  .gl-subpage .gl-coming {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 480px) {
  .gl-subpage .gl-qd, .gl-subpage .gl-disp, .gl-subpage .gl-farm, .gl-subpage .gl-tech, .gl-subpage .gl-loc,
  .gl-subpage .gl-greeting,
  .gl-subpage .gl-history__inner,
  .gl-subpage .gl-media,
  .gl-subpage .gl-notice,
  .gl-subpage .gl-board-view,
  .gl-subpage .gl-inquiry,
  .gl-subpage .gl-coming {
    padding-left: 16px;
    padding-right: 16px;
  }
  .gl-content { padding-top: 28px; }
}

/* ---------- 인사말(greeting) 세부 (열 collapse는 glvision.css @960px) ---------- */
@media (max-width: 480px) {
  .gl-subpage .gl-greeting { padding-top: 28px; padding-bottom: 48px; }
  .gl-greeting__heading { font-size: 20px; }
  .gl-greeting__body { font-size: 14.5px; line-height: 1.85; }
  .gl-greeting__ceo { font-size: 15px; }
}

/* ---------- 연혁(history) 세부 (1열 collapse는 glvision.css @960px) ---------- */
@media (max-width: 480px) {
  .gl-subpage .gl-history__inner { padding-top: 32px; padding-bottom: 44px; gap: 24px; }
  .gl-history__year { font-size: 24px; }
  .gl-history__month,
  .gl-history__text { font-size: 15px; }
}

/* ========================================================
   기술현황(tech) - 특허/디자인/인증/상표/해외 등록 (통이미지 → 하드코딩)
   증서 이미지는 .gl-tech__thumb 영역에 추후 삽입
   ======================================================== */
.gl-tech {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 72px;
}
.gl-tech__section { margin-bottom: 56px; }
.gl-tech__banner img { display: block; width: 100%; height: auto; }
.gl-tech__section:last-child { margin-bottom: 0; }
.gl-tech__title {
  margin: 0 0 24px;
  padding-bottom: 12px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text-strong);
  border-bottom: 2px solid var(--gl-orange-500);
}
.gl-tech__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 30px;
}
.gl-tech__card {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-subtle, #e5e5e5);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
/* 증서 이미지가 들어갈 자리 - 좌측을 여백 없이 꽉 채움 (추후 이미지 삽입) */
.gl-tech__thumb {
  flex: 0 0 130px;
  align-self: stretch;
  min-height: 110px;
  background: #f2f3f4;
}
.gl-tech__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-tech__info {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 16px 18px;
  border-left: 1px solid var(--border-subtle, #e5e5e5);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
}
.gl-tech__info li { position: relative; padding-left: 16px; margin-bottom: 14px; }
.gl-tech__info li:last-child { margin-bottom: 0; }
/* ▶ 화살표 불릿 */
.gl-tech__info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--gl-orange-500);
}
/* 라벨을 블록으로 → 값이 다음 줄로 줄바꿈 */
.gl-tech__info b {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}
/* 등록일: 라벨과 날짜를 한 줄로 */
.gl-tech__date b { display: inline; margin: 0 4px 0 0; font-size: 15px; }

@media (max-width: 960px) {
  .gl-tech__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 24px; }
}
@media (max-width: 560px) {
  .gl-tech { padding: 20px 16px 56px; }
  .gl-tech__grid { grid-template-columns: 1fr; }
  .gl-tech__title { font-size: 20px; }
  .gl-tech__section { margin-bottom: 44px; }
}

/* ========================================================
   오시는길(location) - 지도(구글맵 iframe) + 자가용/버스 경로도(SVG)
   ======================================================== */
.gl-svgsprite { display: none; }

.gl-loc {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 72px;
}
.gl-loc__section { margin-bottom: 8px; }
.gl-loc__title {
  margin: 72px 0 24px;
  font-size: 22px;
  font-weight: 800;
  color: var(--gl-red-500);
}
.gl-loc__title--first { margin-top: 8px; }

/* 지도 */
.gl-loc__map {
  width: 100%;
  border: 1px solid var(--border-subtle, #e5e5e5);
  border-radius: 6px;
  overflow: hidden;
}
.gl-loc__map iframe { display: block; width: 100%; height: 460px; border: 0; }

/* 주소/전화/이메일 목록 */
.gl-loc__info { list-style: none; margin: 0 0 22px; padding: 0; }
/* 첫 지도: 주소/전화/이메일 한 줄 배치 */
.gl-loc__info--row { display: flex; flex-wrap: wrap; gap: 10px 44px; }
.gl-loc__info--row li { margin-bottom: 0; }
.gl-loc__info li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 17px;
  color: var(--text-body);
}
.gl-loc__info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--gl-orange-500);
}
.gl-loc__info b { font-weight: 700; color: var(--text-strong); }
.gl-loc__sep { margin: 0 10px; color: #c7ccd1; }

/* 교통편 섹션 */
.gl-loc__trans { margin-top: 60px; }
.gl-loc__subhead {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}

/* 경로들을 묶는 바깥 보더 박스 */
.gl-route-box {
  border: 1px solid var(--border-subtle, #e5e5e5);
  border-radius: 8px;
  padding: 30px 32px;
}

/* 경로도 */
.gl-route { margin-bottom: 34px; }
.gl-route:last-child { margin-bottom: 0; }
.gl-route__head { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.gl-route__head span { font-weight: 400; font-size: 14px; color: var(--text-muted, #888); }
.gl-route__summary { margin: 0 0 22px; font-size: 16px; font-weight: 700; color: var(--text-strong); }

.gl-route__flow {
  position: relative;
  display: flex;
  flex-wrap: wrap;                 /* 좁아지면 아래로 내려감 (스크롤바 없음) */
  align-items: flex-start;
  justify-content: space-between;  /* 박스 끝까지 균등 분배 (GLVISION을 우측 끝으로) */
  gap: 10px 6px;
  padding: 0 8px 4px;
}
/* 가로 회색 '길(트랙)' 줄 (첫 줄 기준) */
.gl-route__flow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 44px;
  background: #f1f2f3;
  border-radius: 6px;
  z-index: 0;
}
.gl-route__flow > * { position: relative; z-index: 1; }
/* 아이콘/노드/도로명/셰브론을 44px 트랙 높이에 맞춰 정렬 */
.gl-route__stop {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gl-route__ico { width: 46px; height: 44px; color: var(--gl-red-500); }
.gl-route__ico--logo { width: 40px; height: 40px; margin-top: 2px; }
.gl-route__label {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-strong);
  white-space: nowrap;
}
.gl-route__label--brand { color: var(--gl-red-500); font-weight: 700; }
.gl-route__node {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 11px;                /* 44px 트랙 중앙 */
  border: 3px solid var(--gl-red-500);
  border-radius: 50%;
  background: #fff;
}
.gl-route__road { flex: 0 0 auto; height: 44px; line-height: 44px; font-size: 14px; font-weight: 700; color: #8f949b; white-space: nowrap; }
.gl-route__chev { flex: 0 0 auto; height: 44px; line-height: 44px; font-size: 17px; color: #c4c8cc; }

@media (max-width: 768px) {
  .gl-loc { padding: 16px 16px 56px; }
  .gl-loc__map iframe { height: 300px; }
  .gl-loc__title { margin-top: 52px; font-size: 20px; }
  .gl-loc__info li { font-size: 16px; }
  .gl-route-box { padding: 20px 18px; }
  /* 좁아지면 wrap; 트랙(회색 줄)은 여러 줄에 걸치면 어색하므로 숨김 */
  .gl-route__flow { justify-content: flex-start; gap: 14px 10px; padding: 0 2px; }
  .gl-route__flow::before { display: none; }
}

/* ========================================================
   퀀텀닷 조명 (general / plant) - 통이미지 → 하드코딩
   이미지 자리는 .gl-imgph / .gl-qd-img (점선 placeholder)
   ======================================================== */
.gl-qd { max-width: 1200px; margin: 0 auto; padding: 0 0 80px; }

/* 이미지 placeholder (범용) */
.gl-imgph, .gl-qd-img {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.42);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  padding: 12px;
}
.gl-qd-img { min-height: 200px; }
.gl-qd-img--wide { min-height: 180px; }
.gl-qd-img--tall { min-height: 260px; }
/* 실제 이미지가 채워진 상태: 점선/배경 제거하고 원본 비율로 표시 */
.gl-qd-img.is-filled {
  display: block;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
}
.gl-qd-img.is-filled > img { display: block; width: 100%; height: auto; border-radius: 6px; }
.gl-imgph--onlight { border-color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.5); background: rgba(255, 255, 255, 0.5); }
.gl-imgph--ondark { border-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); }
.gl-imgph--cell { width: 88px; height: 64px; padding: 0; border-width: 1.5px; font-size: 0; margin: 0 auto; }

/* Hero 배너 */
.gl-qd-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 40px 0;
  padding: 44px 48px;
  border-radius: 8px;
  overflow: hidden;
}
.gl-qd-hero--blue {
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/resources/images/qd/general_banner.jpg') center / cover no-repeat;
}
.gl-qd-hero--dark { justify-content: center; background: linear-gradient(120deg, #171717 0%, #4a4a4a 100%); color: #fff; }
.gl-qd-hero--dark .gl-qd-hero__text { flex: 0 1 auto; max-width: 900px; }
/* 배경 이미지 + 어두운 오버레이 배너 (중앙 정렬) */
.gl-qd-hero--banner {
  justify-content: center;
  min-height: 360px;
  color: #fff;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/resources/images/smart/system_banner.png') center / cover no-repeat;
}
.gl-qd-hero--banner .gl-qd-hero__text { flex: 0 1 auto; max-width: 860px; }
.gl-qd-hero--banner .gl-qd-hero__desc { color: rgba(255, 255, 255, 0.92); }
.gl-qd-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.gl-qd-hero__img { position: relative; z-index: 1; flex: 0 0 38%; align-self: stretch; min-height: 220px; }
.gl-qd-hero__img img { display: block; width: 100%; height: 100%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.gl-qd-hero__text { position: relative; z-index: 1; }
.gl-qd-hero__text { flex: 1 1 auto; }
.gl-qd-hero__text--center { text-align: center; }
.gl-qd-hero__title { margin: 0 0 16px; font-size: 32px; font-weight: 700; }
.gl-qd-hero__desc { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.8; color: rgba(255, 255, 255, 0.9); }

/* 섹션 */
.gl-qd-sec { padding: 48px 0; }
.gl-qd-sec--gray { padding: 48px 40px; background: var(--surface-subtle, #f6f7f8); border-radius: 8px; }
.gl-qd-sec__title {
  margin: 0 0 20px;
  padding-bottom: 12px;
  font-size: 24px;
  font-weight: 800;
  color: var(--gl-red-500);
  border-bottom: 2px solid var(--gl-orange-500);
}
.gl-qd-sec__desc { margin: 0 0 28px; font-size: 17px; font-weight: 400; line-height: 1.85; color: var(--text-body); }
.gl-qd-sec__desc--center { text-align: center; }

/* 반사형 기술 - 다이어그램 박스 2개 */
.gl-qd-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gl-qd-figbox { padding: 20px; border: 1px solid var(--border-subtle, #e5e5e5); border-radius: 8px; }
.gl-qd-figbox__head { margin-bottom: 16px; text-align: center; font-weight: 700; color: var(--text-strong); }

/* 이미지 + 텍스트 2단 */
.gl-qd-cols { display: flex; align-items: center; gap: 32px; margin-bottom: 32px; }
.gl-qd-cols:last-child { margin-bottom: 0; }
.gl-qd-cols > .gl-qd-img { flex: 0 0 42%; align-self: stretch; }
.gl-qd-cols__text { flex: 1 1 auto; }
.gl-qd-cols__text p { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.85; color: var(--text-body); }

/* 비교 이미지 2개 (이미지 + 컬러 캡션 바 카드) */
.gl-qd-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 56px 0; }
.gl-qd-compare__item { margin: 0; border-radius: 6px; overflow: hidden; }
.gl-qd-compare .gl-qd-img.is-filled > img { border-radius: 0; }
.gl-qd-compare figcaption {
  margin: 0;
  padding: 18px 14px;
  background: #eef0f2;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-body);
}
.gl-qd-compare figcaption b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 800; color: var(--text-strong); }
/* 우측(QD) 캡션: 빨강 바 + 흰 글씨 (specificity 확보) */
.gl-qd-compare figcaption.gl-qd-compare__cap--accent { background: var(--gl-red-500); color: #fff; }
.gl-qd-compare figcaption.gl-qd-compare__cap--accent b { color: #fff; }

/* 갤러리(3분할) */
.gl-qd-gallery { display: grid; gap: 20px; margin-top: 20px; }
.gl-qd-gallery--3 { grid-template-columns: repeat(3, 1fr); }

/* 제품표 (모바일 가로 스크롤) */
.gl-ptable-wrap { overflow-x: auto; }
.gl-ptable { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.gl-ptable th, .gl-ptable td { padding: 12px 14px; border: 1px solid var(--border-subtle, #e5e5e5); text-align: center; vertical-align: middle; color: var(--text-body); }
.gl-ptable thead th { background: var(--surface-subtle, #f4f5f6); font-weight: 700; color: var(--text-strong); }
.gl-ptable__imgcell { padding: 8px; }
.gl-ptable__dl { color: var(--gl-red-500); text-decoration: none; font-size: 16px; }
.gl-ptable__none { color: #bbb; }
.gl-ptable__img { display: block; max-width: 110px; max-height: 80px; margin: 0 auto; object-fit: contain; }

/* ===== 식물용 조명 페이지 ===== */
.gl-plant-intro { margin: 24px 0 40px; text-align: center; }
.gl-plant-intro__line { display: block; width: 44px; height: 3px; margin: 0 auto 16px; background: var(--gl-orange-500); }
.gl-plant-intro__title { margin: 0; font-size: 30px; font-weight: 800; color: var(--text-strong); }

.gl-plant-item { padding: 36px 0; border-top: 1px solid var(--border-subtle, #eee); }
.gl-plant-item:first-of-type { border-top: none; }
.gl-plant-item__imgs { display: grid; gap: 20px; margin-bottom: 24px; }
/* 이미지 1개여도 01~03의 사진과 같은 폭(반)으로 → 좌측 반칸에 배치 */
.gl-plant-item__imgs--1 { grid-template-columns: 1fr 1fr; }
.gl-plant-item__imgs--2 { grid-template-columns: 1fr 1fr; }

/* 특징 태그 */
.gl-qd-tags { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gl-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1.5px solid var(--gl-orange-500);
  border-radius: 26px;
  background: #fff7f0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
}
.gl-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gl-orange-500);
  flex: 0 0 auto;
}

/* 스펙 표 */
.gl-spec { border-collapse: collapse; font-size: 15px; }
.gl-spec th, .gl-spec td { padding: 9px 16px; border: 1px solid var(--border-subtle, #e5e5e5); text-align: left; }
.gl-spec tbody th { width: 90px; background: var(--surface-subtle, #f4f5f6); font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.gl-spec--3 th, .gl-spec--3 td { text-align: center; }
.gl-spec--3 thead th { background: var(--surface-subtle, #f4f5f6); }
.gl-spec__hi { color: var(--gl-red-500); font-weight: 700; }

/* 생육 실증 */
.gl-grow { padding: 24px 0; }
.gl-grow__title { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--text-strong); }
.gl-grow__row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.gl-grow__left { flex: 1 1 300px; }
.gl-grow__photo { min-height: 150px; margin-bottom: 14px; }
.gl-grow__left .gl-spec { width: 100%; }
.gl-grow__graphs { flex: 1 1 340px; display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.gl-grow__graph { min-height: 170px; max-width: 460px; }

/* 반응형 */
@media (max-width: 900px) {
  .gl-qd-hero { flex-direction: column; gap: 24px; padding: 32px 24px; text-align: center; }
  .gl-qd-hero__img { flex: none; width: 100%; }
  .gl-qd-hero__title { font-size: 26px; }
  .gl-qd-figs,
  .gl-qd-compare,
  .gl-qd-gallery--3,
  .gl-plant-item__imgs--2 { grid-template-columns: 1fr; }
  .gl-qd-cols { flex-direction: column; align-items: stretch; gap: 16px; }
  .gl-qd-cols > .gl-qd-img { flex: none; }
  .gl-qd-sec--gray { padding: 32px 20px; }
  .gl-grow__graphs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gl-qd { padding: 0 16px 60px; }
  .gl-qd-sec { padding: 36px 0; }
  .gl-qd-sec__title { font-size: 20px; }
  .gl-qd-hero__title { font-size: 22px; }
  .gl-plant-intro__title { font-size: 24px; }
}

/* ========================================================
   디스플레이 카테고리 (kiosk/led/monitor/outdoor/table/wall)
   공통 레이아웃 : 인트로 + 설치사례 카드(사진 2 → 제품/시스템 스펙 2단)
   ======================================================== */
.gl-disp { max-width: 1200px; margin: 0 auto; padding: 0 0 80px; }

/* 인트로 */
.gl-disp-intro { margin: 20px 0 48px; text-align: center; }
.gl-disp-intro__line { display: block; width: 44px; height: 3px; margin: 0 auto 14px; background: var(--gl-orange-500); }
.gl-disp-intro__en { margin: 0 0 28px; font-size: 30px; font-weight: 800; letter-spacing: 0.03em; color: var(--text-strong); }
.gl-disp-hero { position: relative; }
/* 대표 제품 이미지: 원본 비율 그대로 */
.gl-disp-hero__img { min-height: 200px; background: #f4f5f6; }
.gl-disp-hero__img.is-filled { min-height: 0; background: transparent; }
.gl-disp-hero__img.is-filled > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 320px; margin: 0 auto; }
/* 좌하단 오렌지 타이틀 박스 */
.gl-disp-hero__badge {
  position: absolute;
  left: 0;
  bottom: 12%;
  padding: 26px 56px;
  background: linear-gradient(135deg, #ff7a1a, #e5460a);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 설치 사례 카드 */
.gl-disp-cases { display: flex; flex-direction: column; gap: 36px; }
.gl-disp-case {
  padding: 24px;
  border: 1px solid var(--border-subtle, #e5e5e5);
  border-radius: 10px;
  background: #fff;
}
.gl-disp-case__loc { margin: 0 0 18px; font-size: 20px; font-weight: 800; color: var(--gl-red-500); }
.gl-disp-case__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.gl-disp-case__img { min-height: 220px; }
.gl-disp-case__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.gl-disp-spec__title {
  margin: 0 0 14px;
  padding-bottom: 9px;
  font-size: 19px;
  font-weight: 800;
  color: var(--text-strong);
  border-bottom: 2px solid var(--gl-orange-500);
}
.gl-disp-spec__list { list-style: none; margin: 0; padding: 0; }
.gl-disp-spec__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-body);
}
.gl-disp-spec__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gl-red-500);
}

/* 반응형 */
@media (max-width: 768px) {
  .gl-disp { padding: 0 16px 60px; }
  .gl-disp-hero__badge { padding: 16px 30px; font-size: 19px; }
  .gl-disp-case { padding: 18px; }
  .gl-disp-case__imgs { gap: 14px; }
  .gl-disp-case__img { min-height: 160px; }
}
@media (max-width: 520px) {
  .gl-disp-case__imgs,
  .gl-disp-case__specs { grid-template-columns: 1fr; }
}

/* ========================================================
   스마트팜 (cases / system) - 통이미지 → 하드코딩
   (식물용 조명 plant 탭은 qd/plant.php 재사용)
   ======================================================== */
.gl-farm { max-width: 1200px; margin: 0 auto; padding: 0 0 80px; }
.gl-qd-hero--green { background: linear-gradient(120deg, #4a7c1f, #8bc34a); color: #fff; }

/* ---- 시공사례 (cases) ---- */
.gl-farm-case { margin-bottom: 48px; }
.gl-farm-case__title { margin: 0 0 18px; font-size: 24px; font-weight: 800; color: var(--gl-red-500); }
.gl-farm-case__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gl-farm-case__img { min-height: 240px; }
.gl-farm-case__diagram { min-height: 320px; margin-bottom: 14px; }
.gl-farm-case__diagram.is-filled { text-align: center; margin-top: 8px; }
.gl-farm-case__diagram.is-filled > img { width: auto; max-width: min(600px, 100%); box-sizing: border-box; margin: 0 auto; padding: 16px; border: 1px solid var(--border-subtle, #ddd); border-radius: 4px; background: #fff; }
.gl-farm-case__caption { margin: 16px 0 0; text-align: center; font-size: 17px; font-weight: 700; color: var(--text-strong); }
/* 구성도 캡션: 위아래 여백 더 확보 */
.gl-farm-case__diagram + .gl-farm-case__caption { margin: 22px 0 34px; }

/* ---- 생장 속도 비교 카드 ---- */
.gl-growth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gl-growth-card { border: 1px solid var(--border-subtle, #e5e5e5); border-radius: 8px; overflow: hidden; }
.gl-growth-card__head {
  padding: 12px;
  background: #f2f3f4;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
}
.gl-growth-card.is-accent .gl-growth-card__head { background: var(--gl-red-500); color: #fff; }
.gl-growth-card__img { min-height: 150px; margin: 0; border: none; border-radius: 0; border-top: 1px dashed rgba(0, 0, 0, 0.2); border-bottom: 1px dashed rgba(0, 0, 0, 0.2); }
.gl-growth-card__img.is-filled > img { border-radius: 0; }
.gl-growth-card__sub { padding: 14px 12px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.gl-growth-card.is-accent .gl-growth-card__sub { color: var(--gl-red-500); font-weight: 600; }

/* ---- 스마트팜 시스템 패널 ---- */
.gl-farm-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.gl-farm-panel { border: 1px solid var(--border-subtle, #e5e5e5); border-radius: 8px; overflow: hidden; }
.gl-farm-panel__head { padding: 12px; background: var(--gl-red-500); color: #fff; text-align: center; font-size: 16px; font-weight: 700; }
.gl-farm-panel__grid { display: grid; gap: 14px; padding: 18px; }
.gl-farm-panel__grid--4 { grid-template-columns: 1fr 1fr; }
.gl-farm-panel__grid--3 { grid-template-columns: repeat(3, 1fr); }
.gl-farm-panel__single { padding: 18px; }
.gl-farm-panel__grid .gl-qd-img { min-height: 120px; }
.gl-farm-thumb { margin: 0; }
.gl-farm-thumb figcaption { margin-top: 10px; text-align: center; font-size: 14px; line-height: 1.4; color: var(--text-body); }

/* ---- 타 제품과의 비교 ---- */
.gl-farm-legend { display: flex; justify-content: center; gap: 28px; margin-bottom: 18px; }
.gl-farm-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.gl-farm-legend__dot { width: 20px; height: 4px; border-radius: 2px; }
.gl-farm-legend__dot.is-red { background: var(--gl-red-500); }
.gl-farm-legend__dot.is-black { background: #222; }
.gl-farm-spectrum { min-height: 320px; margin-bottom: 8px; }
.gl-farm-spectrum.is-filled { text-align: center; }
.gl-farm-spectrum.is-filled > img { width: auto; max-width: min(460px, 100%); margin: 0 auto; }

.gl-farm-vs { display: flex; align-items: stretch; gap: 20px; margin-top: 28px; }
.gl-farm-vs__box { flex: 1 1 0; border: 1px solid var(--border-subtle, #e5e5e5); border-radius: 8px; overflow: hidden; padding-bottom: 20px; }
.gl-farm-vs__box--accent { border-color: var(--gl-red-500); }
.gl-farm-vs__head { padding: 12px; background: #f2f3f4; text-align: center; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.gl-farm-vs__box--accent .gl-farm-vs__head { background: var(--gl-red-500); color: #fff; }
.gl-farm-vs__img { min-height: 200px; margin: 18px; }
.gl-farm-vs__img.is-filled { text-align: center; }
.gl-farm-vs__img.is-filled > img { width: auto; max-width: min(340px, 100%); margin: 0 auto; }
.gl-farm-vs__note { margin: 0 18px 12px; text-align: center; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.gl-farm-vs__list { list-style: none; margin: 0; padding: 0 20px; }
.gl-farm-vs__list li { position: relative; padding-left: 14px; margin-bottom: 10px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.gl-farm-vs__list li::before { content: "-"; position: absolute; left: 0; color: var(--gl-orange-500); font-weight: 700; }
.gl-farm-vs__list b { color: var(--text-strong); }
.gl-farm-vs__arrow { display: flex; align-items: center; font-size: 40px; font-weight: 700; color: var(--gl-orange-500); }

/* 반응형 */
@media (max-width: 900px) {
  .gl-growth-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .gl-farm-panels { grid-template-columns: 1fr; }
  .gl-farm-vs { flex-direction: column; }
  .gl-farm-vs__box { flex: none; width: 100%; }
  .gl-farm-vs__img.is-filled > img { width: 100%; max-width: 100%; }
  .gl-farm-vs__arrow { transform: rotate(-90deg); align-self: center; }
}
@media (max-width: 600px) {
  .gl-farm-case__imgs { grid-template-columns: 1fr; }
  .gl-growth-grid { grid-template-columns: 1fr; }
  .gl-farm-panel__grid--3 { grid-template-columns: 1fr 1fr; }
}