@charset "utf-8";

/* ============================================================
   GLVISION Design System CSS Variables & Base Styles
   ============================================================ */

:root {
  /* Neutrals */
  --gl-white: #ffffff;
  --gl-ink-50: #f7f7f7;
  --gl-ink-100: #f0f0f0;
  --gl-ink-200: #e4e4e4;
  --gl-ink-300: #d2d2d2;
  --gl-ink-400: #a8a8a8;
  --gl-ink-500: #808080;
  --gl-ink-600: #595959;
  --gl-ink-700: #3d3d3d;
  --gl-ink-800: #262626;
  --gl-ink-900: #161616;

  /* Brand Red */
  --gl-red-50: #fdecea;
  --gl-red-100: #fad6d0;
  --gl-red-200: #f3a99c;
  --gl-red-300: #ea7864;
  --gl-red-400: #de4a2f;
  --gl-red-500: #387c2a;
  --gl-red-600: #b01f08;
  --gl-red-700: #8c1906;
  --gl-red-800: #6a1305;

  /* Orange accent */
  --gl-orange-400: #f2741c;
  --gl-orange-500: #e8590c;
  --gl-orange-600: #d44a06;

  /* QD blue */
  --gl-blue-300: #5cc7ee;
  --gl-blue-400: #2aa3e0;
  --gl-blue-500: #1577c4;
  --gl-blue-600: #0f5394;
  --gl-blue-800: #0a2f5c;
  --gl-blue-900: #07203f;

  /* Smart-farm green */
  --gl-green-400: #9ccb3b;
  --gl-green-500: #6fae1f;
  --gl-green-600: #538912;

  /* Text aliases */
  --text-strong: var(--gl-ink-900);
  --text-body: var(--gl-ink-700);
  --text-muted: var(--gl-ink-500);
  --text-faint: var(--gl-ink-400);
  --text-on-dark: rgba(255,255,255,0.95);
  --text-on-dark-muted: rgba(255,255,255,0.62);
  --text-brand: var(--gl-red-500);
  --text-link: var(--gl-red-500);

  /* Surfaces */
  --surface-page: #fff;
  --surface-subtle: var(--gl-ink-50);
  --surface-muted: var(--gl-ink-100);
  --surface-card: #fff;
  --surface-inverse: var(--gl-ink-900);
  --surface-brand: var(--gl-red-500);
  --surface-brand-soft: var(--gl-red-50);
  --surface-topbar: #f4f4f4;
  --surface-footer: var(--gl-ink-900);

  /* Borders */
  --border-subtle: var(--gl-ink-200);
  --border-default: var(--gl-ink-300);
  --border-strong: var(--gl-ink-400);
  --border-brand: var(--gl-red-500);
  --border-on-dark: rgba(255,255,255,0.14);

  /* Interactive */
  --action-primary: var(--gl-red-500);
  --action-primary-hover: var(--gl-red-600);
  --action-primary-active: var(--gl-red-700);
  --action-secondary: var(--gl-blue-500);
  --action-secondary-hover: var(--gl-blue-600);
  --focus-ring: rgba(208,40,11,0.35);

  /* Typography */
  --font-brand: "Paperlogy","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.375rem;
  --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.75rem;

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
  --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --container-xl: 1200px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.14), 0 4px 10px rgba(0,0,0,0.07);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--gl-orange-500) 0%, var(--gl-red-500) 100%);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base: 220ms;
  --transition-base: all var(--dur-base) var(--ease-out);
}

/* ============================================================
   Base Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-brand);
  background: #fff;
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   Header
   ============================================================ */
#gl-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* Utility bar */
.gl-topbar {
  background: var(--surface-topbar);
  border-bottom: 1px solid var(--border-subtle);
}
.gl-topbar__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 20px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.gl-topbar a {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
}
.gl-topbar a.gl-topbar__en {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--gl-ink-700);
  padding: 5px 12px;
  border-radius: 2px;
}

/* Main header row */
.gl-header__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 20px;
  height: 84px;
  display: flex;
  align-items: center;
}

/* Logo */
.gl-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.gl-logo img {
  height: 34px;
  width: auto;
}
.gl-logo__text {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.gl-logo__text span:first-child { color: var(--gl-orange-500); }
.gl-logo__text span:last-child { color: var(--gl-red-500); }

/* Nav */
.gl-nav {
  margin-left: auto;
  display: flex;
  height: 84px;
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
.gl-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
.gl-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 84px;
  padding: 0 26px;
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 17px;
  color: var(--text-strong);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .15s;
}
.gl-nav__link:hover,
.gl-nav__link.is-active {
  font-weight: 700;
  color: var(--gl-red-500);
}
.gl-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
  height: 2px;
  background: var(--gl-red-500);
}

/* Dropdown */
.gl-dropdown {
  display: none;
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  background: #fff;
  box-shadow: var(--shadow-md);
  border-top: 2px solid var(--gl-red-500);
  padding: 8px 0;
  white-space: nowrap;
  z-index: 200;
}
.gl-nav__item:hover .gl-dropdown { display: block; }
.gl-dropdown a {
  display: block;
  padding: 8px 26px;
  font-size: 14px;
  color: var(--text-body);
  text-decoration: none;
  transition: color .15s;
}
.gl-dropdown a:hover { color: var(--gl-red-500); }

/* ============================================================
   Main Page (홈)
   ============================================================ */
.gl-home__bands { display: block; }
.gl-home__band { display: block; width: 100%; }
.gl-home__band img { width: 100%; height: auto; display: block; }

/* ============================================================
   Sub Page Shell
   ============================================================ */
.gl-subpage { background: #fff; }

/* Hero banner */
.gl-subpage__hero img { width: 100%; height: auto; display: block; }

/* Breadcrumb */
.gl-breadcrumb {
  border-bottom: 1px solid var(--border-subtle);
}
.gl-breadcrumb__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.gl-breadcrumb__sep { color: var(--text-faint); }
.gl-breadcrumb__current { color: var(--text-body); }

/* Page title */
.gl-subpage__title {
  max-width: var(--container-xl);
  margin: 0 auto;
}
.gl-subpage__title h1 {
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin: 56px 0 40px;
}

/* Tab subnav */
.gl-subnav {
  border: 1px solid var(--border-subtle);
  border-right: none;
  margin: 0 0px 8px;
  display: grid;
}
.gl-subnav__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-right: 1px solid var(--border-subtle);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  background: #fff;
  color: var(--text-muted);
  transition: all .15s;
}
.gl-subnav__tab:hover { color: var(--gl-red-500); }
.gl-subnav__tab.is-active {
  font-weight: 700;
  background: var(--gl-red-500);
  color: #fff;
}

/* Content area */
.gl-content { min-height: 200px; }

/* ImageBody */
.gl-image-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 0px 64px;
}
.gl-image-body img { display: block; width: 100%; height: auto; }

/* ============================================================
   인사말
   ============================================================ */
.gl-greeting {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0px 72px;
}
.gl-greeting__grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 48px;
  align-items: start;
}
.gl-greeting__accent {
  width: 44px;
  height: 3px;
  background: var(--gl-orange-500);
  margin-bottom: 18px;
}
.gl-greeting__heading {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;
}
.gl-greeting__heading em { color: var(--gl-red-500); font-style: normal; }
.gl-greeting__body {
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-body);
}
.gl-greeting__body p { margin-top: 0; }
.gl-greeting__ceo {
  font-weight: 700;
  color: var(--text-strong);
  font-size: 17px;
}

/* ============================================================
   연혁
   ============================================================ */
.gl-history {
  background: var(--surface-subtle);
}
.gl-history__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 0px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.gl-history__year {
  font-size: 30px;
  font-weight: 800;
  color: var(--gl-red-500);
  letter-spacing: -0.01em;
}
.gl-history__bar {
  width: 26px;
  height: 3px;
  background: var(--gl-orange-500);
  margin: 8px 0 14px;
}
.gl-history__item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}
.gl-history__month {
  font-size: 16px;
  font-weight: 800;
  color: var(--gl-orange-500);
  flex-shrink: 0;
}
.gl-history__text { font-size: 16px; color: var(--text-body); }

/* ============================================================
   공지사항
   ============================================================ */
.gl-notice {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0px 72px;
}
.gl-notice__table { border-top: 2px solid var(--gl-ink-800); width: 100%; }
.gl-notice__head {
  display: grid;
  grid-template-columns: 80px 1fr 160px 120px 90px;
  padding: 14px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-subtle);
}
.gl-notice__row {
  display: grid;
  grid-template-columns: 80px 1fr 160px 120px 90px;
  padding: 16px 12px;
  font-size: 14px;
  color: var(--text-body);
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
}
.gl-notice__center { text-align: center; color: var(--text-muted); }
.gl-notice__title { text-align: center; color: var(--text-strong); text-decoration: none; font-weight: 500; }
.gl-notice__title:hover { color: var(--gl-red-500); }
.gl-notice__title a {
  color: inherit;
  text-decoration: none;
}
.gl-notice__title a:hover {
  color: var(--gl-red-500);
}
.gl-board-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0 72px;
}
.gl-board-view__head {
  border-top: 2px solid var(--gl-ink-800);
  border-bottom: 1px solid var(--border-default);
  padding: 28px 24px 22px;
  background: var(--surface-subtle);
}
.gl-board-view__head h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.45;
  color: var(--text-strong);
}
.gl-board-view__badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  margin-bottom: 12px;
  border-radius: 2px;
  background: var(--gl-red-500);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.gl-board-view__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 14px;
}
.gl-board-view__meta b {
  color: var(--text-strong);
  font-weight: 700;
}
.gl-board-view__body {
  min-height: 260px;
  padding: 34px 24px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.gl-board-view__body img {
  max-width: 100%;
  height: auto;
}
.gl-board-view__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 24px;
}
.gl-board-view__btn,
.gl-board-file__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--gl-red-500);
  color: var(--gl-red-500);
  background: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.gl-board-view__btn:hover,
.gl-board-file__btn:hover {
  background: var(--gl-red-500);
  color: #fff;
}
.gl-board-view__empty {
  padding: 52px 24px;
  border-top: 2px solid var(--gl-ink-800);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
  color: var(--text-muted);
}
.gl-board-file {
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
}
.gl-board-file__label {
  color: var(--text-strong);
  font-weight: 700;
}
.gl-board-file__name {
  color: var(--text-body);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.gl-board-file__name:hover {
  color: var(--gl-red-500);
}
.gl-board-file__size {
  color: var(--text-muted);
}

/* ============================================================
   온라인문의
   ============================================================ */
.gl-inquiry {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 0px 72px;
}
.gl-inquiry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.gl-inquiry__field { display: flex; flex-direction: column; gap: 7px; }
.gl-inquiry__label { font-size: 14px; font-weight: 500; color: var(--text-strong); }
.gl-inquiry__input {
  font-family: var(--font-brand);
  font-size: 16px;
  color: var(--text-strong);
  padding: 12px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: 8px;
  outline: none;
  width: 100%;
  transition: border-color .15s;
}
.gl-inquiry__input:focus { border-color: var(--gl-red-500); box-shadow: 0 0 0 3px var(--focus-ring); }
.gl-inquiry__textarea {
  font-family: var(--font-brand);
  font-size: 16px;
  color: var(--text-strong);
  padding: 12px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: 8px;
  outline: none;
  resize: vertical;
  width: 100%;
  transition: border-color .15s;
}
.gl-inquiry__textarea:focus { border-color: var(--gl-red-500); box-shadow: 0 0 0 3px var(--focus-ring); }
.gl-inquiry__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 40px;
  background: var(--gl-red-500);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.gl-inquiry__btn:hover { background: var(--gl-red-600); }
.gl-inquiry__sent {
  text-align: center;
  padding: 60px 0;
  border: 1px solid var(--border-subtle);
  display: none;
}
.gl-inquiry__sent h3 { font-size: 24px; font-weight: 800; color: var(--gl-red-500); }
.gl-inquiry__sent p { color: var(--text-muted); margin-top: 10px; }

/* ============================================================
   Coming Soon
   ============================================================ */
.gl-coming {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0px 80px;
}
.gl-coming__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.gl-coming__card { border: 1px solid var(--border-subtle); }
.gl-coming__thumb {
  height: 150px;
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 13px;
}
.gl-coming__name {
  padding: 14px 16px;
  font-weight: 700;
  color: var(--text-strong);
  text-align: center;
}
.gl-coming__msg { text-align: center; padding: 24px 0; color: var(--text-muted); }

/* ============================================================
   Footer
   ============================================================ */
#gl-footer {
  background: var(--surface-footer);
  color: var(--text-on-dark-muted);
}
.gl-footer__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 30px 20px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.gl-footer__logo {
  filter: grayscale(1) brightness(1.5);
  opacity: 0.55;
  flex-shrink: 0;
  padding-top: 4px;
}
.gl-footer__logo img { height: 30px; width: auto; }
.gl-footer__info {
  font-size: 12.5px;
  line-height: 1.95;
  color: rgba(255,255,255,0.55);
}
.gl-footer__company {
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  margin-bottom: 2px;
}
.gl-footer__copy { margin-top: 4px; color: rgba(255,255,255,0.4); }
.gl-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
}
.gl-footer__links {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  gap: 22px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.gl-footer__links a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.gl-footer__links a:hover { color: rgba(255,255,255,0.7); }

/* ============================================================
   Responsive — 960px 브레이크포인트
   ============================================================ */

/* 햄버거 버튼 (데스크탑에서 숨김) */
.gl-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  gap: 5px;
  flex-shrink: 0;
}
.gl-hamburger__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-strong);
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s, width .2s;
  transform-origin: center;
}

/* 열림 상태 X 애니메이션 */
.gl-hamburger.is-open .gl-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.gl-hamburger.is-open .gl-hamburger__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.gl-hamburger.is-open .gl-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 오버레이 (모바일 메뉴 열릴 때 배경 dim) */
.gl-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 90;
}
.gl-nav-overlay.is-open { display: block; }

@media (max-width: 960px) {

  /* ── Topbar ────────────────────────────────────── */
  .gl-topbar { display: none; }

  /* ── Header ────────────────────────────────────── */
  .gl-header__inner { height: 60px; }

  .gl-logo img { height: 26px; }

  /* 햄버거 표시 */
  .gl-hamburger { display: flex; }

  /* ── 모바일 사이드 드로어 ──────────────────────── */
  nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #fff;
    box-shadow: var(--shadow-lg);
    z-index: 110;
    overflow-y: auto;
    transition: right .3s var(--ease-out);
  }
  nav.is-open { right: 0; }

  .gl-nav {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 20px 0 40px;
    margin: 0;
  }
  .gl-nav__item {
    display: block;
    border-bottom: 1px solid var(--border-subtle);
  }
  .gl-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
  }
  .gl-nav__link::after { display: none !important; }
  .gl-nav__link .gl-nav__arrow {
    font-size: 12px;
    color: var(--text-faint);
    transition: transform .2s;
  }
  .gl-nav__item.is-open .gl-nav__arrow { transform: rotate(180deg); }

  /* 드롭다운 → 아코디언 */
  .gl-dropdown {
    display: block;
    position: static;
    transform: none;
    box-shadow: none;
    border-top: none;
    border-left: 3px solid var(--gl-red-500);
    padding: 4px 0;
    margin: 0 24px 8px 24px;
    background: var(--surface-subtle);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease-out), padding .2s;
  }
  .gl-nav__item.is-open .gl-dropdown {
    max-height: 400px;
    padding: 8px 0;
  }
  /* hover 트리거 제거 */
  .gl-nav__item:hover .gl-dropdown { display: block; max-height: 0; padding: 0; }
  .gl-nav__item.is-open:hover .gl-dropdown { max-height: 400px; padding: 8px 0; }

  .gl-dropdown a {
    padding: 10px 20px;
    font-size: 14px;
  }

  /* 드로어 상단 닫기 버튼 공간 */
  .gl-nav::before {
    content: '';
    display: block;
    height: 60px;
  }

  /* ── 서브페이지 탭 ─────────────────────────────── */
  .gl-subnav {
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 0 0 8px;
  }
  .gl-subnav__tab { height: 52px; font-size: 14px; }

  /* ── 페이지 타이틀 ─────────────────────────────── */
  .gl-subpage__title { padding: 0 16px; }
  .gl-subpage__title h1 { font-size: 26px; margin: 36px 0 24px; }

  /* ── 인사말 ────────────────────────────────────── */
  .gl-greeting__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .gl-greeting__heading { font-size: 22px; }
  .gl-greeting__body { font-size: 15px; }

  /* ── 연혁 ──────────────────────────────────────── */
  .gl-history__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 20px 56px;
  }

  /* ── 공지사항 ──────────────────────────────────── */
  .gl-notice__head {
    grid-template-columns: 50px 1fr 100px;
  }
  .gl-notice__head span:nth-child(4),
  .gl-notice__head span:nth-child(5) { display: none; }
  .gl-notice__row {
    grid-template-columns: 50px 1fr 100px;
  }
  .gl-notice__row > span:nth-child(4),
  .gl-notice__row > span:nth-child(5) { display: none; }
  .gl-notice__title { text-align: center; }
  .gl-board-view {
    padding: 30px 16px 56px;
  }
  .gl-board-view__head {
    padding: 22px 16px 18px;
  }
  .gl-board-view__head h2 {
    font-size: 21px;
  }
  .gl-board-view__body {
    min-height: 220px;
    padding: 26px 16px;
    font-size: 15px;
  }
  .gl-board-file {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .gl-board-file__btn {
    width: 100%;
  }

  /* ── 온라인문의 ────────────────────────────────── */
  .gl-inquiry__grid { grid-template-columns: 1fr; }

  /* ── 디스플레이 카드 ───────────────────────────── */
  .gl-coming__grid { grid-template-columns: repeat(2, 1fr); }

  /* ── 푸터 ──────────────────────────────────────── */
  .gl-footer__inner {
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
  }
  .gl-footer__info { font-size: 12px; }
  .gl-footer__links { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 480px) {
  /* ── 디스플레이 카드 1열 ───────────────────────── */
  .gl-coming__grid { grid-template-columns: 1fr; }

  /* ── 서브 탭 1열 (탭 6개인 경우 대응) ─────────── */
  .gl-subnav { grid-template-columns: repeat(2, 1fr) !important; }

  .gl-subpage__title h1 { font-size: 22px; }
}