/* GEEKS 2026 — geeksnet.kr 디자인을 따른 전용 스타일 */
:root {
  --gk-purple: #8a298f;
  --gk-violet: #c86dd7;
  --gk-navy: #1f2a5c;
  --gk-text: #444;
  --gk-muted: #5f5f5f;
  --gk-line: #ddd;
  --gk-head: #f2f2f2;
  --gk-footer: #22272f;
  --gk-grad: linear-gradient(90deg, #2e1a47 0%, #8a2a2a 50%, #e8440f 100%);
}

html { scroll-behavior: smooth; }
body.gk {
  margin: 0;
  font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
  color: var(--gk-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.gk a { color: inherit; text-decoration: none; }
.gk img { max-width: 100%; }
.gk-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* Header */
.gk-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  box-shadow: 1px 2px 10px #8d8d8d;
}
.gk-header .gk-wrap { display: flex; align-items: center; justify-content: space-between; height: 90px; max-width: 1290px; padding: 0 15px; }
.gk-logo img { height: 46px; width: auto; display: block; }
.gk-menu { display: flex; align-items: center; gap: 26px; font-size: 18px; color: #333; }
.gk-menu a:hover { color: var(--gk-purple); }
.gk-menu .gk-lang {
  border: 1px solid #ccc; border-radius: 9999px; padding: 3px 12px; font-size: 13px;
  background: #fff; cursor: pointer; color: #333;
}
.gk-menu .gk-home { font-size: 14px; color: #888; }
.gk-burger { display: none; background: none; border: 0; font-size: 26px; cursor: pointer; color: #333; }
.gk-mnav { display: none; border-top: 1px solid #eee; background: #fff; }
.gk-mnav.open { display: block; }
.gk-mnav a, .gk-mnav button {
  display: block; width: 100%; text-align: left; padding: 12px 20px; font-size: 15px;
  border: 0; border-bottom: 1px solid #f2f2f2; background: #fff; color: #333; font-family: inherit;
}

/* Hero — 원본 배너 위에 연도·일정을 글자로 얹는다 (container query 단위) */
.gk-banner { position: relative; container-type: inline-size; line-height: 0; }
.gk-banner > img { width: 100%; display: block; }
.gk-banner .ov { position: absolute; transform: translate(-50%, -50%); line-height: 1.2; white-space: nowrap; color: #fff; text-align: center; }
.gk-year { font-family: 'Roboto', sans-serif; font-weight: 700; letter-spacing: 0.01em; }
.gk-date { font-weight: 500; letter-spacing: -0.04em; }
.gk-hero-pc .gk-year { left: 31.2%; top: 18.6%; font-size: 3.2cqw; }
.gk-hero-pc .gk-date { left: 69.6%; top: 63%; font-size: 2.05cqw; }
.gk-hero-mb, .gk-poster { display: none; }
.gk-poster { display: block; }
.gk-hero-mb .gk-year, .gk-poster .gk-year { left: 50%; top: 16.2%; font-size: 8.4cqw; }
.gk-hero-mb .gk-date, .gk-poster .gk-date { left: 50%; top: 63.4%; font-size: 4.4cqw; }
.gk-btns {
  position: absolute; right: min(50px, 2.6cqw); bottom: min(20px, 1.04cqw);
  width: min(1100px, 53cqw); display: flex; line-height: 1.5;
}
/* 원본 .mainbtn 크기(1920px 화면 기준)를 배너와 같은 비율로 축소 */
.gk-btn {
  display: inline-block; background: var(--gk-purple); color: #fff !important;
  border: max(2px, min(4px, 0.21cqw)) solid #fff; border-radius: 30px; text-align: center;
  width: min(230px, 11.75cqw); margin: 0 min(14px, 0.7cqw); padding: min(12px, 0.62cqw) 0;
  font-size: max(13px, min(21px, 1.1cqw)); font-weight: 500;
  transition: transform 0.3s;
}
.gk-btn:hover { transform: scale(1.08); }
.gk-btn.hot { background: red; font-weight: 700; }

/* Section */
.gk-section { padding: 80px 0; }
.gk-section.alt { background: #f8f8fa; }
.gk-title { text-align: center; font-size: 36px; font-weight: 700; color: var(--gk-text); margin: 0; }
.gk-title::after { content: ""; display: block; width: 62px; height: 2px; background: var(--gk-navy); margin: 26px auto 50px; }
.gk-lead { text-align: center; font-size: 25px; font-weight: 700; color: #333; margin: -20px 0 16px; }
.gk-lead + p { text-align: center; max-width: 900px; margin: 0 auto 40px; font-size: 17px; line-height: 1.85; color: var(--gk-muted); }
.gk-h3 { font-size: 27px; font-weight: 400; color: #333; margin: 50px 0 20px; padding-bottom: 14px; border-bottom: 1px solid #eee; }
.gk-h3:first-child { margin-top: 0; }
.gk-p { font-size: 17px; line-height: 1.9; color: var(--gk-muted); padding: 0 14px; }
.gk-note { font-size: 14px; color: #888; margin-top: 10px; }

/* 리스트 (● / •) */
.gk-dl { padding: 0 14px; }
.gk-dl > h4 { font-size: 17px; font-weight: 500; color: #444; margin: 22px 0 12px; }
.gk-dl > h4::before { content: "●"; margin-right: 6px; color: #444; }
.gk-dl ul { list-style: none; padding: 0 0 0 20px; margin: 0; }
.gk-dl li { font-size: 16px; color: var(--gk-muted); line-height: 1.7; margin-bottom: 12px; }
.gk-dl li::before { content: "•"; margin-right: 6px; }
.gk-dl li b { font-weight: 500; color: #666; margin-right: 6px; }

/* Table */
.gk-table { width: 100%; border-collapse: collapse; border-top: 2px solid #3a2b45; font-size: 16px; }
.gk-table th, .gk-table td { border-bottom: 1px solid var(--gk-line); padding: 11px 14px; }
.gk-table th { background: var(--gk-head); color: #555; font-weight: 700; text-align: center; white-space: nowrap; }
.gk-table td { color: var(--gk-muted); }
.gk-table.grid th, .gk-table.grid td { border: 1px solid var(--gk-line); text-align: center; }
.gk-table.grid { border-top: 2px solid #333; }
.gk-table.center td { text-align: center; }
.gk-scroll { overflow-x: auto; }

/* 개요 2단 */
.gk-ov { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }

/* 개최배경 카드 */
.gk-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gk-why .item { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 30px 26px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); }
.gk-why .num { font-family: 'Roboto', sans-serif; font-size: 34px; font-weight: 700; color: var(--gk-purple); }
.gk-why h4 { font-size: 19px; color: #333; margin: 10px 0 12px; line-height: 1.5; }
.gk-why p { font-size: 16px; line-height: 1.8; color: var(--gk-muted); margin: 0; }
.gk-why img { width: 56px; height: 56px; float: right; }

/* 수치 카드 */
.gk-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
.gk-fact { border: 1px solid #e6e6e6; border-top: 3px solid var(--gk-purple); padding: 22px 18px; background: #fff; }
.gk-fact b { display: block; font-size: 27px; color: #333; }
.gk-fact span { font-size: 15px; color: var(--gk-muted); }

/* 전시 2단 */
.gk-ex { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
.gk-box { border: 1px solid #e6e6e6; padding: 22px; background: #fff; margin-bottom: 20px; }
.gk-box h4 { margin: 0 0 12px; font-size: 18px; color: #333; }
.gk-box ul { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.9; color: var(--gk-muted); }
.gk-draft { font-size: 11px; color: var(--gk-purple); border: 1px solid currentColor; border-radius: 9999px; padding: 0 7px; margin-left: 6px; vertical-align: middle; }

/* 어워드 분야 */
.gk-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 10px 14px 0; }
.gk-cat { display: flex; gap: 18px; align-items: center; border: 1px solid #eee; padding: 20px; }
.gk-cat img { width: 64px; height: 64px; flex-shrink: 0; }
.gk-cat h4 { margin: 0 0 6px; font-size: 18px; color: #333; }
.gk-cat p { margin: 0; font-size: 16px; color: var(--gk-muted); line-height: 1.7; }

/* 사진 */
.gk-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gk-photos figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #eee; }
.gk-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.gk-photos figure:hover img { transform: scale(1.06); }
.gk-photos figcaption { position: absolute; left: 0; bottom: 0; padding: 6px 12px; font-size: 14px; color: #fff; background: rgba(0, 0, 0, 0.55); }

/* 연혁 */
.gk-hist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid #3a2b45; margin-bottom: 50px; }
.gk-hist > div { padding: 22px 18px; border-right: 1px solid var(--gk-line); border-bottom: 1px solid var(--gk-line); }
.gk-hist > div:last-child { border-right: 0; background: #faf3fb; }
.gk-hist .y { font-family: 'Roboto', sans-serif; font-size: 25px; font-weight: 700; color: var(--gk-purple); }
.gk-hist .d { font-size: 14px; color: #888; margin-top: 2px; }
.gk-hist .t { font-size: 17px; color: #333; font-weight: 500; margin-top: 10px; }
.gk-hist .s { font-size: 15px; color: var(--gk-muted); line-height: 1.7; margin-top: 6px; }
.gk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px; }
.gk-chips span { font-size: 15px; color: #555; border: 1px solid #ddd; border-radius: 9999px; padding: 4px 12px; background: #fff; }

/* 문의 밴드 (서브페이지 상단 그라데이션 띠) */
.gk-band { background: var(--gk-grad); color: #fff; text-align: center; padding: 60px 20px; }
.gk-band h2 { font-family: 'Roboto', 'Noto Sans KR', sans-serif; font-size: 40px; font-weight: 700; margin: 0; }
.gk-band p { font-size: 18px; margin: 12px 0 30px; opacity: 0.92; }
.gk-band .row { display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; }
.gk-band .row small { display: block; font-size: 15px; opacity: 0.8; }
.gk-band .row b { font-size: 24px; font-weight: 500; }

/* Footer */
.gk-footer { background: var(--gk-footer); color: #9ba0a8; text-align: center; padding: 34px 20px 40px; font-size: 14px; line-height: 1.9; }
.gk-footer .host { color: #c5c9d0; font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.gk-footer .copy { letter-spacing: 0.04em; text-transform: uppercase; margin-top: 8px; }
.gk-footer a { text-decoration: underline; }

/* 등장 애니메이션 (animate.css fadeInUp 대체) */
.gk-fade { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; }
.gk-fade.in { opacity: 1; transform: none; }

section[id] { scroll-margin-top: 90px; }

@media (max-width: 1100px) {
  .gk-menu { display: none; }
  .gk-burger { display: block; }
}
@media (max-width: 1000px) {
  .gk-ov, .gk-ex { grid-template-columns: 1fr; }
  .gk-ov .gk-poster { max-width: 360px; margin: 0 auto; }
  .gk-why { grid-template-columns: 1fr; }
  .gk-hist { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .gk-hero-pc { display: none; }
  .gk-hero-mb { display: block; }
  .gk-btns-mb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px; background: #2a1840; }
  .gk-btns-mb .gk-btn { width: auto; margin: 0; font-size: 16px; padding: 10px 0; border-width: 2px; }
  .gk-ov .gk-poster { display: none; }
  .gk-section { padding: 56px 0; }
  .gk-title { font-size: 28px; }
  .gk-title::after { margin: 20px auto 36px; }
  .gk-lead { font-size: 20px; }
  .gk-h3 { font-size: 22px; }
  .gk-facts, .gk-cats { grid-template-columns: 1fr 1fr; }
  .gk-cats { grid-template-columns: 1fr; margin: 10px 0 0; }
  .gk-photos { grid-template-columns: 1fr 1fr; }
  .gk-hist { grid-template-columns: 1fr; }
  .gk-hist > div { border-right: 0; }
  .gk-band h2 { font-size: 30px; }
}
@media (min-width: 769px) { .gk-btns-mb { display: none; } }

/* 큰 PC 화면 — 상단 배너는 그대로 두고, 그 아래 본문 글자 크기를 조정한다.
   --s = 원본(geeksnet.kr) 글자 대비 배율. 크기를 다시 바꿀 때는 이 숫자 하나만 고친다. */
@media (min-width: 1400px) {
  body.gk { --s: 1.125; --g: 1.2; }  /* 2.25 는 풀화면에서 너무 컸다(10-13) */
  .gk-wrap { max-width: 1440px; padding: 0 40px; }
  /* 상단 메뉴 — 화면 폭에 따라 22px(1400px 화면) ~ 28px(1920px 이상) */
  .gk-header .gk-wrap { max-width: 1800px; height: 116px; }
  .gk-logo img { height: 64px; }
  .gk-menu { font-size: clamp(22px, 1.45vw, 28px); gap: clamp(24px, 2.1vw, 40px); font-weight: 500; }
  .gk-menu .gk-lang { font-size: clamp(16px, 1.05vw, 20px); padding: 4px 16px; }
  .gk-menu .gk-home { font-size: clamp(16px, 1.05vw, 20px); }
  section[id] { scroll-margin-top: 116px; }

  .gk-section { padding: calc(80px * var(--g)) 0; }
  .gk-title { font-size: calc(36px * var(--s)); }
  .gk-title::after { width: 70px; height: 2px; margin: calc(26px * var(--g)) auto calc(50px * var(--g)); }
  .gk-lead { font-size: calc(25px * var(--s)); margin: calc(-20px * var(--g)) 0 calc(16px * var(--g)); }
  .gk-lead + p { max-width: 1000px; font-size: calc(17px * var(--s)); margin-bottom: calc(40px * var(--g)); }
  .gk-h3 { font-size: calc(27px * var(--s)); margin: calc(50px * var(--g)) 0 calc(20px * var(--g)); padding-bottom: calc(14px * var(--g)); }
  .gk-p { font-size: calc(17px * var(--s)); }
  .gk-note { font-size: calc(14px * var(--s)); margin-top: 16px; }

  .gk-dl > h4 { font-size: calc(17px * var(--s)); margin: calc(22px * var(--g)) 0 calc(12px * var(--g)); }
  .gk-dl li { font-size: calc(16px * var(--s)); margin-bottom: calc(12px * var(--g)); }
  .gk-table { font-size: calc(16px * var(--s)); }
  .gk-table th, .gk-table td { padding: calc(11px * var(--g)) calc(14px * var(--g)); }

  .gk-ov { grid-template-columns: 1fr 380px; gap: 32px; }
  .gk-why { gap: 28px; }
  .gk-why .item { padding: calc(30px * var(--g)) calc(26px * var(--g)); }
  .gk-why .num { font-size: calc(34px * var(--s)); }
  .gk-why h4 { font-size: calc(19px * var(--s)); margin: 12px 0 14px; }
  .gk-why p { font-size: calc(16px * var(--s)); }
  .gk-why img { width: 60px; height: 60px; }

  .gk-facts { gap: 18px; margin-bottom: calc(40px * var(--g)); }
  .gk-fact { padding: calc(22px * var(--g)) calc(18px * var(--g)); }
  .gk-fact b { font-size: calc(27px * var(--s)); }
  .gk-fact span { font-size: calc(15px * var(--s)); }

  .gk-ex { grid-template-columns: 1fr 360px; gap: 32px; }
  .gk-box { padding: calc(22px * var(--g)); margin-bottom: 22px; }
  .gk-box h4 { font-size: calc(18px * var(--s)); margin-bottom: 14px; }
  .gk-box ul { font-size: calc(16px * var(--s)); padding-left: 20px; }
  .gk-draft { font-size: calc(11px * var(--s)); }

  .gk-cats { gap: 22px; }
  .gk-cat { padding: calc(20px * var(--g)); gap: 18px; }
  .gk-cat img { width: 70px; height: 70px; }
  .gk-cat h4 { font-size: calc(18px * var(--s)); }
  .gk-cat p { font-size: calc(16px * var(--s)); }

  .gk-photos { gap: 14px; }
  .gk-photos figcaption { font-size: calc(14px * var(--s)); padding: 6px 12px; }

  .gk-hist > div { padding: calc(22px * var(--g)) calc(18px * var(--g)); }
  .gk-hist .y { font-size: calc(25px * var(--s)); }
  .gk-hist .d { font-size: calc(14px * var(--s)); }
  .gk-hist .t { font-size: calc(17px * var(--s)); margin-top: 10px; }
  .gk-hist .s { font-size: calc(15px * var(--s)); }
  .gk-chips { gap: 8px; }
  .gk-chips span { font-size: calc(15px * var(--s)); padding: 4px 14px; }

  .gk-band { padding: calc(60px * var(--g)) 20px; }
  .gk-band h2 { font-size: calc(40px * var(--s)); }
  .gk-band p { font-size: calc(18px * var(--s)); margin: 12px 0 30px; }
  .gk-band .row { gap: 60px; }
  .gk-band .row small { font-size: calc(15px * var(--s)); }
  .gk-band .row b { font-size: calc(24px * var(--s)); }

  .gk-footer { font-size: calc(14px * var(--s)); padding: 40px 20px 48px; }
  .gk-footer .host { font-size: calc(15px * var(--s)); }
}