/*
Theme Name: Benjamin J
Theme URI: https://blog.ggomggomhan.com
Author: Benjamin J
Description: Benjamin J 개인 블로그 테마 — 개발 과정과 솔직한 리뷰를 기록하는 콘텐츠 사이트. tim.blog 구조(Start Here 홈 · 리치 상세페이지 · 멀티컬럼 푸터 · 뉴스레터 CTA) 참고.
Version: 0.1.141
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gg-blog
Tags: blog, personal, two-columns, custom-menu, editor-style, threaded-comments
*/

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600;1,700;1,800&display=swap");

/* =========================================================
   Benjamin J — design tokens
   개인 블로그용 클린 뉴트럴 + 단일 액센트. 카테고리는 톤 팔레트로 색을 부여.
   구조는 tim.blog 참고 (Start Here · 리치 상세 · 멀티컬럼 푸터 · 뉴스레터).
========================================================= */

:root {
  /* ----- Colors ----- */
  --primary-bg: #ffffff;
  --card-bg: #ffffff;
  --soft-bg: #f6f7f9;
  --text-color: #16181d;
  --text-muted: rgba(22, 24, 29, 0.62);
  --text-light: rgba(22, 24, 29, 0.42);

  --accent: #5c3317;
  --accent-hover: #47260f;
  --accent-soft: rgba(92, 51, 23, 0.10);
  --accent-ink: #ffffff;   /* accent 배경 위 글자색 — 글별 테마색에서 밝기 따라 자동 교체 */

  --light-grey: #f6f7f9;
  --border-color: rgba(22, 24, 29, 0.10);

  /* 레거시 토큰 — 새 accent 를 따라가도록 연동(슬라이더 도트·블록인용 보더 등) */
  --accent-green: var(--accent);
  --accent-brown: var(--accent);

  /* ----- Radius — 직선·직각 디자인(모든 라운드 제거) ----- */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 0;

  /* ----- Shadows ----- */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.08);

  /* ----- Type ----- */
  --font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --leading-body: 1.75;
  --leading-tight: 1.2;

  /* ----- Layout ----- */
  --shell-max: 1120px;
  --content-max: 720px;
  --shell-gutter: 0;
  --header-h: 64px;

  /* ----- Motion ----- */
  --t-fast: 0.18s ease;
  --t-base: 0.28s ease;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: var(--leading-body);
  color: var(--text-color);
  background: var(--primary-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--t-fast);
}
a:hover { opacity: 0.7; }

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

/* =========================================================
   SHELL — 페이지 컨테이너
========================================================= */
.gg-shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-gutter);
}

/* =========================================================
   HEADER — 상단 네비
========================================================= */
.gg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: transform var(--t-base), background var(--t-base), backdrop-filter var(--t-base), box-shadow var(--t-base);
}
.gg-header--scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--border-color);
}
.gg-header--hidden { transform: translateY(-100%); }

.gg-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 16px;
}

/* =========================================================
   상세페이지 — 헤더가 full-bleed 히어로 위에 오버레이
========================================================= */
/* ↓ 히어로가 어두운 템플릿(클래식·풀블리드)에서만 헤더를 히어로 위에 오버레이 */
body.single.gg-tpl-classic main,
body.single.gg-tpl-fullbleed main { margin-top: calc(-1 * var(--header-h)); }
/* 히어로 위(스크롤 전): 로고·메뉴를 흰색으로, 스크롤 후엔 기본(잉크) */
body.single.gg-tpl-classic .gg-header:not(.gg-header--scrolled) .gg-logo,
body.single.gg-tpl-classic .gg-header:not(.gg-header--scrolled) .gg-logo__word,
body.single.gg-tpl-classic .gg-header:not(.gg-header--scrolled) .gg-search__btn,
body.single.gg-tpl-classic .gg-header:not(.gg-header--scrolled) .gg-lang,
body.single.gg-tpl-fullbleed .gg-header:not(.gg-header--scrolled) .gg-logo,
body.single.gg-tpl-fullbleed .gg-header:not(.gg-header--scrolled) .gg-logo__word,
body.single.gg-tpl-fullbleed .gg-header:not(.gg-header--scrolled) .gg-search__btn,
body.single.gg-tpl-fullbleed .gg-header:not(.gg-header--scrolled) .gg-lang { color: #fff; }
body.single.gg-tpl-classic .gg-header:not(.gg-header--scrolled) .gg-burger span,
body.single.gg-tpl-fullbleed .gg-header:not(.gg-header--scrolled) .gg-burger span { background: #fff; }
body.single.gg-tpl-classic .gg-header:not(.gg-header--scrolled) .gg-search__btn:hover,
body.single.gg-tpl-classic .gg-header:not(.gg-header--scrolled) .gg-lang:hover,
body.single.gg-tpl-classic .gg-header:not(.gg-header--scrolled) .gg-burger:hover,
body.single.gg-tpl-fullbleed .gg-header:not(.gg-header--scrolled) .gg-search__btn:hover,
body.single.gg-tpl-fullbleed .gg-header:not(.gg-header--scrolled) .gg-lang:hover,
body.single.gg-tpl-fullbleed .gg-header:not(.gg-header--scrolled) .gg-burger:hover { background: rgba(255, 255, 255, 0.16); }

/* ----- 언어 전환 버튼 (검색·햄버거 사이) ----- */
.gg-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.gg-lang:hover { background: rgba(22, 24, 29, 0.06); }
.gg-lang svg { display: block; }

/* ----- 다국어 본문 토글 (기본=data-primary 만 노출, 전환은 JS 인라인 display) ----- */
.gg-article__body[data-lang]:not([data-primary]) { display: none; }

.gg-logo { color: var(--text-color); display: inline-flex; align-items: center; }
.gg-logo:hover { opacity: 1; }
.gg-logo__word {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
}
/* 업로드된 로고 이미지 (custom_logo) */
.gg-logo__img { display: block; height: 34px; width: auto; max-width: 220px; object-fit: contain; }
.gg-footer__logo .gg-logo__img { height: 30px; max-width: 220px; }
@media (max-width: 560px) { .gg-logo__img { height: 28px; max-width: 160px; } }

.gg-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* CTA (메뉴 패널 안) */
.gg-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink) !important;
  border-radius: 0;
  font-weight: 600;
  font-size: 14px;
  transition: background var(--t-fast);
}
.gg-nav__cta:hover { background: var(--accent-hover); opacity: 1; }

/* ----- Search (details/summary popover) ----- */
.gg-search { position: relative; display: inline-flex; }
.gg-search__btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  color: var(--text-color);
  cursor: pointer;
}
.gg-search__btn::-webkit-details-marker { display: none; }
.gg-search__btn:hover { background: rgba(22, 24, 29, 0.06); }
.gg-search__form {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 50;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: 10px;
}
.gg-search__input {
  width: 240px;
  max-width: 70vw;
  border: none;
  outline: none;
  font: inherit;
  font-size: 15px;
  padding: 6px 8px;
  color: var(--text-color);
  background: transparent;
}

/* ----- Burger (항상 표시 — 데스크톱·모바일 공통) ----- */
.gg-burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 0;
  cursor: pointer;
}
.gg-burger:hover { background: rgba(22, 24, 29, 0.06); }
.gg-burger span {
  width: 20px;
  height: 2px;
  border-radius: 0;
  background: var(--text-color);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.gg-nav-toggle:checked ~ .gg-header__actions .gg-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gg-nav-toggle:checked ~ .gg-header__actions .gg-burger span:nth-child(2) { opacity: 0; }
.gg-nav-toggle:checked ~ .gg-header__actions .gg-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----- Menu panel (햄버거 드롭다운) ----- */
.gg-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  min-width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: 8px;
}
.gg-nav-toggle:checked ~ .gg-menu { display: flex; }
.gg-menu ul { display: contents; list-style: none; margin: 0; padding: 0; }
.gg-menu li { list-style: none; }
.gg-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-color);
}
.gg-menu a:hover { background: var(--soft-bg); opacity: 1; }
.gg-menu .gg-nav__cta {
  display: flex;
  margin-top: 6px;
  color: #fff !important;
}
.gg-menu .gg-nav__cta:hover { background: var(--accent-hover); }

/* ----- 계층 카테고리 (상위 + 하위) ----- */
.gg-menu__group { display: block; }
.gg-menu__row { display: flex; align-items: center; }
.gg-menu__row .gg-menu__parent { flex: 1; }
.gg-menu__caret {
  display: inline-flex;   /* 항상 노출 — "하위 있음" 표시 + 터치 탭 타깃 */
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 11px 12px;
  color: var(--text-light);
}
.gg-menu__caret svg { display: block; transition: transform var(--t-fast); }

.gg-menu .gg-submenu {
  display: none;          /* 기본 숨김 */
  background: var(--soft-bg);
}
.gg-menu .gg-submenu__link {
  display: block;
  padding: 9px 14px 9px 26px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.gg-menu .gg-submenu__link:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-color); }
.gg-menu .gg-submenu__parent { font-weight: 700; color: var(--text-color); }

/* 데스크톱(호버 가능): 상위 그룹에 호버하면 하위가 그 밑에 펼쳐짐 */
@media (hover: hover) {
  .gg-menu__group:hover > .gg-submenu { display: block; }
  .gg-menu__group:hover .gg-menu__caret svg { transform: rotate(180deg); }
}
/* 터치: 탭으로 펼침(JS 가 is-open 토글) */
.gg-menu__group.is-open > .gg-submenu { display: block; }
.gg-menu__group.is-open .gg-menu__caret svg { transform: rotate(180deg); }

/* =========================================================
   NOTICE SLIDER — 홈 상단의 공지(Popular 핀) 글 슬라이더
   참고: stripe.com/blog 의 헤로 카드 패턴
========================================================= */
.gg-notice {
  padding: 40px 0 8px;
}

.gg-notice__slider {
  position: relative;
  border-radius: 0;
  background: var(--soft-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.gg-notice__track {
  display: flex;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gg-notice__track::-webkit-scrollbar { display: none; }

.gg-notice__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}

.gg-notice__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  align-items: stretch;        /* 커버가 프레임 높이를 가득 채우도록 */
  min-height: 380px;
  color: inherit;
  text-decoration: none;
}

.gg-notice__inner:hover { opacity: 1; }
.gg-notice__inner:hover .gg-notice__title { color: var(--accent); }

/* 텍스트만 여백 — 커버는 테두리까지 가득 */
.gg-notice__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 52px;
}

.gg-notice__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.gg-notice__title {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--text-color);
  transition: color var(--t-base);
}

.gg-notice__excerpt {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 22px;
  max-width: 480px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gg-notice__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.gg-notice__author { font-weight: 600; color: var(--text-color); }

.gg-notice__read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

/* 데스크톱: 커버가 슬라이더 셀 높이를 가득 채움(테두리 여백 없음). 모바일은 1:1 정사각. */
.gg-notice__cover {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tone, #6b7280), var(--tone2, #9ca3af));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 이미지는 프레임을 가득 채움 (절대위치 + cover) */
.gg-notice__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gg-notice__glyph {
  font-size: 88px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
}

/* Nav arrows */
.gg-notice__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  font-size: 24px;
  line-height: 1;
  color: var(--text-color);
  cursor: pointer;
  z-index: 5;
  transition: transform var(--t-fast), background var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
}

.gg-notice__nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}

.gg-notice__nav--prev { left: 16px; }
.gg-notice__nav--next { right: 16px; }

/* Dots */
.gg-notice__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.gg-notice__dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  border: none;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast), width var(--t-fast);
}

.gg-notice__dot.is-active {
  background: var(--accent-brown);
  width: 22px;
  border-radius: 0;
}

/* =========================================================
   PAGE HEAD — 카테고리/검색 페이지의 간단 제목
========================================================= */
.gg-page-head {
  padding: 48px 0 16px;
}

.gg-page-head__title {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0;
}

/* =========================================================
   CATEGORY FILTER — 칩 (가로 스크롤)
========================================================= */
.gg-filter {
  padding: 28px 0;
  border-bottom: 1px solid var(--border-color);
  overflow: visible;   /* 칩 드롭다운이 잘리지 않도록 */
}

.gg-filter__inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.gg-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--light-grey);
  color: var(--text-muted);
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
  border: 1px solid transparent;
}

.gg-chip:hover {
  background: #efefef;
  color: var(--text-color);
  opacity: 1;
}

.gg-chip.is-active {
  background: var(--text-color);
  color: #fff;
}
.gg-chip.is-active:hover {
  background: var(--text-color);
  color: #fff;
}

/* ----- 계층 칩 (상위 + 드롭다운 하위) ----- */
.gg-chip-group { position: relative; display: inline-flex; }
.gg-chip--has { gap: 5px; }
.gg-chip__caret { font-size: 9px; opacity: 0.7; transition: transform var(--t-fast); }
.gg-chip__sub {
  position: absolute;
  top: 100%;            /* 칩과 붙여 호버 끊김 방지 */
  left: 0;
  z-index: 60;
  min-width: 160px;
  margin-top: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
}
/* 칩↔드롭다운 사이 투명 브릿지 — 마우스 이동 시 호버 유지 */
.gg-chip__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
.gg-chip__sublink {
  display: block;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.gg-chip__sublink:hover { background: var(--soft-bg); color: var(--text-color); opacity: 1; }
.gg-chip__sublink--parent { font-weight: 700; color: var(--text-color); }

/* 데스크톱(호버 가능): 칩 호버 시 하위 드롭다운 */
@media (hover: hover) {
  .gg-chip-group:hover .gg-chip__sub { display: block; }
  .gg-chip-group:hover .gg-chip__caret { transform: rotate(180deg); }
}
/* 터치: 탭으로 펼침(JS 가 is-open 토글) */
.gg-chip-group.is-open .gg-chip__sub { display: block; }
.gg-chip-group.is-open .gg-chip__caret { transform: rotate(180deg); }

/* =========================================================
   (피처드 카드 제거 — Vercel 패턴은 균일 그리드)
========================================================= */

.gg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--text-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
/* 프로필 썸네일 아바타 — 이미지가 있으면 박스를 꽉 채움 */
.gg-avatar.has-img,
.gg-authorbox__avatar.has-img {
  background: none;
  padding: 0;
  overflow: hidden;
}
.gg-avatar.has-img img,
.gg-authorbox__avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   GRID — Vercel 풀-3컬럼 (큰 세로 카드 + 세로 디바이더)
========================================================= */
.gg-grid-section {
  padding: 0 0 96px;
}

.gg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* 4면 모두 그리드 — 그리드가 top+left, 카드가 right+bottom 을 그려 외곽까지 닫힘 */
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
}

.gg-card {
  position: relative;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
  transition: background var(--t-base);
}

.gg-card:hover {
  background: var(--light-grey);
}

.gg-card__inner {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  padding: 36px 32px 32px;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.gg-card__inner:hover { opacity: 1; }

/* ---------- Head: 썸네일(200×200, 좌) + 제목(우) ---------- */
.gg-card__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.gg-card__icon {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gg-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gg-card__icon {
  background: linear-gradient(135deg, var(--tone, #6b7280), var(--tone2, #9ca3af));
}

.gg-card__glyph {
  font-size: 40px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- Title (썸네일 옆) ---------- */
.gg-card__title {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Excerpt + fade out ---------- */
.gg-card__excerpt {
  position: relative;
  flex: 1;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
  overflow: hidden;
  margin-bottom: 24px;
  /* 본문 끝을 페이드아웃 (Vercel 시그니처) */
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

.gg-card__excerpt p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Footer: 작성자 + 카테고리 ---------- */
.gg-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 14px;
  color: var(--text-muted);
}

.gg-card__foot .gg-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.gg-card__author {
  font-weight: 500;
  color: var(--text-color);
}

.gg-card__cat {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 0;
  color: var(--text-color);
}

/* =========================================================
   EMPTY STATE
========================================================= */
.gg-empty {
  padding: 96px 0;
  text-align: center;
  color: var(--text-muted);
}

/* =========================================================
   PAGINATION
========================================================= */
.gg-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 64px;
}

.gg-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 0;
  background: var(--light-grey);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

.gg-pagination .page-numbers.current {
  background: var(--text-color);
  color: #fff;
}

.gg-pagination .page-numbers:hover {
  background: #efefef;
  color: var(--text-color);
  opacity: 1;
}

.gg-pagination .page-numbers.current:hover {
  background: var(--text-color);
  color: #fff;
}

/* =========================================================
   POST HERO (single) — full-bleed [좌] 이미지 / [우] 배경색 패널 + 제목
   헤더(로고·메뉴)가 이 블록 위에 오버레이된다. (body.single 규칙 참고)
========================================================= */
.gg-post-hero {
  padding: 0;
}

.gg-post-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: clamp(360px, 44vw, 600px);
  overflow: hidden;
}

/* 상단 스크림 — 오버레이된 헤더(흰 로고·메뉴)의 가독성 확보 */
.gg-post-hero__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent);
  pointer-events: none;
}

/* 좌측 — 대표 이미지 (1:1 소스가 cover 로 채움) */
.gg-post-hero__media {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tone, #6b7280), var(--tone2, #9ca3af));
}
.gg-post-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gg-post-hero__glyph { font-size: 96px; font-weight: 800; color: rgba(255, 255, 255, 0.92); }

/* 우측 — 콘솔에서 지정한 배경색 패널 + 제목 (글자색은 대비 자동) */
.gg-post-hero__panel {
  display: flex;
  align-items: center;
  padding: 48px clamp(28px, 5vw, 64px);
  min-width: 0;
}
.gg-post-hero__panel-inner { position: relative; z-index: 2; width: 100%; }
.gg-post-hero__cat {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 16px;
}
.gg-post-hero__cat:hover { opacity: 1; }
.gg-post-hero__title {
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 22px;
}
.gg-post-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  opacity: 0.78;
}
.gg-post-hero__author { font-weight: 600; }

/* =========================================================
   POST BODY — 본문 컬럼 (.gg-content 폭/여백은 인라인 스펙 CSS 가 적용)
========================================================= */
.gg-post-body {
  padding: 56px 0 40px;
}

.gg-article__body { font-size: 17px; }

.gg-article__body p { margin: 0 0 24px; }
.gg-article__body h2 {
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 56px 0 16px;
}
.gg-article__body h3 {
  font-size: 21px;
  margin: 40px 0 12px;
}
.gg-article__body img {
  border-radius: 0;
  margin: 32px 0;
}
.gg-article__body blockquote {
  border-left: 3px solid var(--accent-green);
  margin: 32px 0;
  padding: 4px 0 4px 20px;
  color: var(--text-muted);
  font-style: italic;
}
/* 본문 내부 링크 — 글별 테마색(accent) 적용 */
.gg-article__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.gg-article__body a:hover { color: var(--accent-hover); opacity: 1; }

/* ===== 제품 카드 (숏코드 [gg_product]) ===== */
.gg-product-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  margin: 32px 0;
  padding: 18px;
  border: 1px solid var(--border-color);
  background: var(--soft-bg);
}
.gg-product-card__media { aspect-ratio: 1/1; background: #fff; overflow: hidden; }
.gg-product-card__media img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.gg-product-card__brand { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }
.gg-product-card__name { font-size: 18px; font-weight: 800; margin: 2px 0 4px; }
.gg-product-card__price { font-size: 14px; font-weight: 700; color: var(--accent); }
.gg-product-card__desc { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.gg-product-card__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.gg-product-card__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 700;
  transition: background var(--t-fast), gap var(--t-fast);
}
.gg-product-card__btn:hover { background: var(--accent-hover); color: var(--accent-ink); gap: 10px; opacity: 1; }
.gg-product-card__disclosure { margin: 12px 0 0; font-size: 11.5px; color: var(--text-light); }

/* 편집자 전용 — 글 읽으며 바로 편집(플로팅 버튼) */
.gg-edit-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  transition: background var(--t-fast), transform var(--t-fast);
}
.gg-edit-fab:hover { background: var(--accent-hover); color: var(--accent-ink); opacity: 1; transform: translateY(-1px); }
.gg-edit-fab svg { display: block; }
@media (max-width: 560px) {
  .gg-edit-fab { right: 14px; bottom: 14px; padding: 13px; }
  .gg-edit-fab__label { display: none; }
}

/* 협찬/유료 광고 고지 (본문 상단) */
.gg-sponsored-notice {
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ===== 협업 문의 폼 (숏코드 [gg_contact]) ===== */
.gg-contact-form { max-width: 560px; margin: 28px 0; }
.gg-contact-form__intro { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.gg-contact-form__row { display: flex; gap: 10px; margin-bottom: 10px; }
.gg-contact-form__in {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--border-color); background: #fff;
  font: inherit; font-size: 15px; color: var(--text-color);
}
.gg-contact-form__in:focus { outline: none; border-color: var(--accent); }
textarea.gg-contact-form__in { display: block; width: 100%; resize: vertical; line-height: 1.6; }
.gg-contact-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gg-contact-form__foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.gg-contact-form__btn { border: none; padding: 12px 24px; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 700; }
.gg-contact-form__btn:hover { background: var(--accent-hover); }
.gg-contact-form__btn:disabled { opacity: 0.5; }
.gg-contact-form__msg { font-size: 13px; color: var(--accent); }
.gg-contact-form__msg.is-error { color: #c0392b; }

@media (max-width: 560px) {
  .gg-product-card { grid-template-columns: 1fr; }
  .gg-contact-form__row { flex-direction: column; gap: 10px; }
}

.gg-article__body pre {
  background: var(--light-grey);
  padding: 20px;
  border-radius: 0;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  margin: 24px 0;
}
.gg-article__body code {
  background: var(--light-grey);
  padding: 2px 6px;
  border-radius: 0;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.gg-article__body pre code {
  background: transparent;
  padding: 0;
}

/* =========================================================
   FOOTER — 멀티컬럼
========================================================= */
.gg-footer {
  border-top: 1px solid var(--border-color);
  background: var(--soft-bg);
  padding: 0 0 28px;
  margin-top: 96px;
  font-size: 14px;
  color: var(--text-muted);
}

.gg-footer a { color: var(--text-muted); }
.gg-footer a:hover { color: var(--text-color); opacity: 1; }

/* 푸터 2×2 그리드 — 상단[브랜드·프로필 | 구독] / 하단[카테고리 | 협업] */
.gg-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 44px;
  padding: 8px 0 44px;
  border-bottom: 1px solid var(--border-color);
}

/* 구독 셀 — 제목 + 네모 입력칸 + 구독 버튼 */
.gg-footer__subscribe .gg-news__title { font-size: 14px; font-weight: 700; margin: 0 0 14px; }
.gg-footer__subform {
  display: flex;
  gap: 8px;
  max-width: 420px;
}
.gg-footer__email {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border-color);
  background: #fff;
  font: inherit;
  font-size: 14px;
  padding: 11px 14px;
  color: var(--text-color);
}
.gg-footer__email:focus { outline: none; border-color: var(--accent); }
.gg-footer__email::placeholder { color: var(--text-light); }

/* 공용 푸터 버튼 — 구독 / 문의 동일 디자인 (브라운 솔리드) */
.gg-footer__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  transition: background var(--t-fast);
}
.gg-footer__btn:hover { background: var(--accent-hover); color: var(--accent-ink); opacity: 1; }

/* 카테고리 — 콜로폰 바로 아래(소제목 없음, 구분선으로 나눔) */
.gg-footer__cats { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 18px; }
.gg-footer__cat { font-size: 14px; color: var(--text-muted); padding: 2px 0; }
.gg-footer__cat:hover { color: var(--accent); opacity: 1; }
.gg-footer__cat + .gg-footer__cat { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border-color); }

.gg-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-color);
}
.gg-footer__logo:hover { opacity: 1; }
.gg-footer__logo .gg-logo__word { font-size: 22px; }

.gg-footer__lead {
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-color);
}
.gg-footer__colophon {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 360px;
}
/* "꼼꼼한" — 본문 톤에 녹아드는 은근한 링크(부인 가능). hover 시에만 브라운 강조. */
.gg-footer__ggom {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.gg-footer__ggom:hover {
  color: var(--accent);
  border-color: var(--accent);
  opacity: 1;
}
.gg-footer__social { display: flex; gap: 8px; flex-wrap: wrap; }
.gg-footer__social-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 0;
  background: var(--card-bg);
  font-size: 12px;
  font-weight: 600;
}
.gg-footer__social-link:hover { border-color: var(--accent); color: var(--accent); }

.gg-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-size: 12px;
  color: var(--text-light);
}
.gg-footer__bar p { margin: 0; }
/* 하단 바 우측 — Contact / RSS 동일한 작은 칩 버튼 */
.gg-footer__bar-links { display: flex; align-items: center; gap: 8px; }
.gg-footer__bar-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.gg-footer__bar-link:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

/* =========================================================
   SECTION primitives (head / buttons)
========================================================= */
.gg-section { padding: 56px 0; }
.gg-section + .gg-section { padding-top: 0; }

.gg-section__head { margin-bottom: 28px; }
.gg-section__head--grid { margin-bottom: 24px; }

/* 많이 읽힌 글 — 제목 + 탭 (한 줄, 모바일은 줄바꿈) */
.gg-popular__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.gg-tabs { display: inline-flex; gap: 4px; flex-shrink: 0; }
.gg-tab {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-light);
  padding: 6px 12px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.gg-tab:hover { color: var(--text-color); }
.gg-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.gg-popular__panels [data-gg-panel][hidden] { display: none; }
.gg-section__title {
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}
.gg-section__sub {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}

.gg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  border: 1px solid transparent;
}
.gg-btn--primary { background: var(--accent); color: var(--accent-ink); }
.gg-btn--primary:hover { background: var(--accent-hover); opacity: 1; }
.gg-btn--ghost { background: transparent; color: var(--text-color); border-color: var(--border-color); }
.gg-btn--ghost:hover { border-color: var(--text-color); opacity: 1; }

/* =========================================================
   HERO — Start Here 인트로
========================================================= */
.gg-hero {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--border-color);
  background:
    radial-gradient(circle at 100% 0, var(--accent-soft) 0%, transparent 42%);
}
.gg-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.gg-hero__eyebrow {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.gg-hero__title {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 18px;
}
.gg-hero__lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 28px;
  max-width: 560px;
}
.gg-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.gg-hero__avatar {
  width: 132px;
  height: 132px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #16181d, #3f3f46);
  box-shadow: var(--shadow-lg);
}

/* =========================================================
   TOPICS — 주제별 카테고리 브라우저
========================================================= */
.gg-topics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gg-topic {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-radius: 0;
  background: var(--card-bg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.gg-topic:hover {
  opacity: 1;
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.gg-topic__glyph {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--tone, #6b7280), var(--tone2, #9ca3af));
}
.gg-topic__body { display: flex; flex-direction: column; min-width: 0; }
.gg-topic__name { font-size: 16px; font-weight: 700; color: var(--text-color); }
.gg-topic__count { font-size: 13px; color: var(--text-muted); }
.gg-topic__arrow { margin-left: auto; color: var(--text-light); font-size: 18px; }

/* =========================================================
   POPULAR — 많이 읽힌 글 리스트
========================================================= */
.gg-popular__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 40px;
}
.gg-popular__item { border-bottom: 1px solid var(--border-color); }
.gg-popular__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 4px;
}
.gg-popular__link:hover { opacity: 1; }
.gg-popular__link:hover .gg-popular__title { color: var(--accent); }
.gg-popular__rank {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-light);
  width: 22px;
  flex-shrink: 0;
}
.gg-popular__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gg-popular__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.4;
  transition: color var(--t-fast);
}
.gg-popular__meta { font-size: 13px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
.gg-popular__cat { font-weight: 600; }

/* =========================================================
   CARD foot extras
========================================================= */
.gg-card__dot { color: var(--text-light); }
.gg-card__time { color: var(--text-muted); }

/* =========================================================
   PAGE HEAD desc
========================================================= */
.gg-page-head__desc {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-muted);
  max-width: var(--content-max);
}

/* =========================================================
   ARTICLE — sub row (meta + share) / tags / authorbox
========================================================= */
.gg-article__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.gg-article__author { font-weight: 600; color: var(--text-color); }
.gg-article__badge { transition: opacity var(--t-fast); }
.gg-article__badge:hover { opacity: 0.8; }

.gg-share { display: flex; gap: 8px; }
.gg-share__btn {
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.gg-share__btn:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.gg-share__copy { font-size: 16px; }
.gg-share__copy.is-copied { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 본문 하단 공유 행 */
.gg-article__share {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border-color);
}
.gg-article__share-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 6px;
}

.gg-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px 0 0;
}
.gg-tag {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--soft-bg);
  padding: 6px 12px;
  border-radius: 0;
}
.gg-tag:hover { color: var(--accent); opacity: 1; }

.gg-authorbox {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 48px;
  padding: 28px;
  background: var(--soft-bg);
  border-radius: 0;
}
.gg-authorbox__avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #16181d, #3f3f46);
}
.gg-authorbox__name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.gg-authorbox__bio { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* =========================================================
   RELATED — Keep exploring
========================================================= */
.gg-related { background: var(--soft-bg); margin-top: 0; padding: 64px 0; }
.gg-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gg-related__card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 0;
  overflow: hidden;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.gg-related__card:hover { opacity: 1; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.gg-related__cover {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tone, #6b7280), var(--tone2, #9ca3af));
}
.gg-related__cover img { width: 100%; height: 100%; object-fit: cover; }
.gg-related__glyph { font-size: 44px; font-weight: 800; color: rgba(255, 255, 255, 0.92); }
.gg-related__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.gg-related__reason {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.gg-related__cat { font-size: 12px; font-weight: 700; }
.gg-related__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gg-related__date { font-size: 13px; color: var(--text-light); }

/* =========================================================
   NEWSLETTER CTA
========================================================= */
/* 구독 CTA — "편지 구독" 에디토리얼 스타일(밑줄 인풋·화살표 버튼, 슬래브 제거) */
.gg-news { padding: 80px 0; }
.gg-news__inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.gg-news__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.gg-news__title {
  font-size: 27px;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-color);
}
.gg-news__sub {
  margin: 0 auto 30px;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}
.gg-news__form { max-width: 440px; margin: 0 auto; }
.gg-news__field {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid var(--text-color);
  transition: border-color var(--t-fast);
}
.gg-news__field:focus-within { border-color: var(--accent); }
.gg-news__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  padding: 13px 2px;
  color: var(--text-color);
}
.gg-news__input::placeholder { color: var(--text-light); }
.gg-news__btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  padding: 13px 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: gap var(--t-fast), opacity var(--t-fast);
}
.gg-news__btn:hover { gap: 13px; opacity: 1; }
.gg-news__btn:disabled { opacity: 0.5; }

/* 허니팟 — 화면 밖으로 숨김 (봇 탐지용) */
.gg-news__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 구독 결과 메시지 */
.gg-news__msg {
  width: 100%;
  margin: 16px 0 0;
  min-height: 1.2em;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}
.gg-news__msg.is-error { color: #c0392b; }
.gg-news__msg:empty { margin: 0; }

/* =========================================================
   RESPONSIVE
========================================================= */
/* 3컬럼 → 2컬럼 (태블릿) */
@media (max-width: 1080px) {
  .gg-grid { grid-template-columns: repeat(2, 1fr); }

  .gg-topics__grid { grid-template-columns: repeat(2, 1fr); }
  .gg-related__grid { grid-template-columns: repeat(2, 1fr); }
  .gg-footer__grid { column-gap: 36px; row-gap: 36px; }
}

/* 2컬럼 → 1컬럼 (모바일) */
@media (max-width: 720px) {
  :root { --shell-gutter: 20px; }

  .gg-notice { padding: 24px 0 4px; }
  /* 커버는 프레임(슬라이더) 끝까지 가득 — 패딩은 텍스트(body)로만 이동 */
  .gg-notice__inner { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  /* iOS Safari 는 그리드 셀 aspect-ratio 를 트랙 높이로 전달 못함(절대위치 img 만 있으면 높이 0 붕괴).
     → 모바일에선 이미지를 in-flow 정사각으로 만들어 이미지가 직접 커버 높이를 만든다. */
  .gg-notice__cover { order: -1; max-width: none; width: 100%; aspect-ratio: 1 / 1; align-self: start; }
  .gg-notice__cover img { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .gg-notice__body { padding: 24px; }
  .gg-notice__title { font-size: 24px; }
  .gg-notice__dots { bottom: 12px; }
  .gg-notice__nav { width: 36px; height: 36px; font-size: 20px; }
  .gg-notice__nav--prev { left: 8px; }
  .gg-notice__nav--next { right: 8px; }

  .gg-section { padding: 44px 0; }
  .gg-section__title { font-size: 22px; }

  .gg-topics__grid { grid-template-columns: 1fr; }
  .gg-popular__list { grid-template-columns: 1fr; gap: 0; }
  .gg-related__grid { grid-template-columns: 1fr; }

  .gg-page-head__title { font-size: 26px; }

  .gg-grid { grid-template-columns: 1fr; }
  .gg-card__inner { min-height: auto; padding: 32px 20px 28px; }
  .gg-card__head { margin-bottom: 24px; }
  .gg-card__title { font-size: 21px; }

  /* 상세 히어로 — 모바일 세로 스택 (이미지 위, 패널 아래) */
  .gg-post-hero { padding: 0; }
  .gg-post-hero__inner { grid-template-columns: 1fr; height: auto; }
  .gg-post-hero__media { aspect-ratio: 1 / 1; }
  .gg-post-hero__panel { padding: 28px 20px; }
  .gg-post-hero__title { font-size: 26px; }
  .gg-post-body { padding: 36px 0 24px; }

  .gg-news { padding: 56px 0; }
  .gg-news__title { font-size: 22px; }

  .gg-footer { padding: 48px 0 24px; margin-top: 64px; }
  .gg-footer__grid { grid-template-columns: 1fr; row-gap: 28px; padding-bottom: 32px; }
}

@media (max-width: 560px) {
  :root { --header-h: 56px; }
  .gg-header__inner { gap: 12px; }
  .gg-logo { font-size: 16px; }
  .gg-news__form { width: 100%; }
}

/* =========================================================
   템플릿 변형 — 홈 (콘솔 [스타일]에서 선택)
========================================================= */
/* ----- 미니멀 리스트 ----- */
.gg-fmin-intro { padding: 72px 0 8px; }
.gg-fmin-intro__title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 0.01em;
}
.gg-fmin-intro__tagline { margin: 10px 0 0; color: var(--text-muted); font-size: 17px; }

.gg-fmin-list-section { padding: 8px 0 72px; }
.gg-fmin-list { border-top: 1px solid var(--border-color); }
.gg-fmin-item { border-bottom: 1px solid var(--border-color); }
.gg-fmin-item__inner {
  display: flex; align-items: baseline; gap: 28px;
  padding: 26px 4px;
  transition: background var(--t-fast);
}
.gg-fmin-item__inner:hover { background: var(--soft-bg); opacity: 1; }
.gg-fmin-item__date {
  flex: 0 0 92px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}
.gg-fmin-item__main { flex: 1; min-width: 0; }
.gg-fmin-item__title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.gg-fmin-item__excerpt {
  margin: 6px 0 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gg-fmin-item__meta { margin-top: 8px; display: flex; gap: 8px; font-size: 12.5px; color: var(--text-light); }
.gg-fmin-item__cat { font-weight: 700; }
.gg-fmin-item__arrow { flex: 0 0 auto; align-self: center; color: var(--text-light); font-size: 18px; transition: transform var(--t-fast); }
.gg-fmin-item__inner:hover .gg-fmin-item__arrow { transform: translateX(4px); color: var(--text-color); }
@media (max-width: 720px) {
  .gg-fmin-intro { padding: 48px 0 4px; }
  .gg-fmin-intro__title { font-size: 32px; }
  .gg-fmin-item__inner { flex-direction: column; gap: 6px; padding: 20px 2px; }
  .gg-fmin-item__date { flex: none; }
  .gg-fmin-item__arrow { display: none; }
}

/* ----- 커버 그리드 ----- */
.gg-fgrid-section { padding: 28px 0 72px; }
.gg-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.gg-fgrid-card__inner { display: block; }
.gg-fgrid-card__inner:hover { opacity: 1; }
.gg-fgrid-card__cover {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--tone, #888), var(--tone2, #aaa));
}
.gg-fgrid-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gg-fgrid-card__inner:hover .gg-fgrid-card__cover img { transform: scale(1.04); }
.gg-fgrid-card__glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; color: rgba(255,255,255,0.85); }
.gg-fgrid-card__body { display: block; padding: 14px 2px 0; }
.gg-fgrid-card__cat { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 6px; }
.gg-fgrid-card__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; }
.gg-fgrid-card__meta { display: block; margin-top: 8px; font-size: 12.5px; color: var(--text-light); }
@media (max-width: 1080px) { .gg-fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .gg-fgrid { grid-template-columns: 1fr; gap: 32px; } }

/* ----- 히어로 + 리스트 ----- */
.gg-fhero-section { padding: 28px 0 72px; }
.gg-fhero-hero { margin-bottom: 36px; }
.gg-fhero-hero__inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; background: var(--soft-bg); }
.gg-fhero-hero__inner:hover { opacity: 1; }
.gg-fhero-hero__cover {
  display: block; position: relative; min-height: 340px; overflow: hidden;
  background: linear-gradient(135deg, var(--tone, #888), var(--tone2, #aaa));
}
.gg-fhero-hero__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gg-fhero-hero__glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; color: rgba(255,255,255,0.85); }
.gg-fhero-hero__body { display: flex; flex-direction: column; justify-content: center; padding: 40px 44px; }
.gg-fhero-hero__cat { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 12px; }
.gg-fhero-hero__title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.32; letter-spacing: -0.015em; }
.gg-fhero-hero__excerpt {
  margin: 14px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gg-fhero-hero__meta { display: flex; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--text-light); }
.gg-fhero-row { border-bottom: 1px solid var(--border-color); }
.gg-fhero-row:first-child { border-top: 1px solid var(--border-color); }
.gg-fhero-row__inner { display: flex; align-items: center; gap: 18px; padding: 18px 4px; transition: background var(--t-fast); }
.gg-fhero-row__inner:hover { background: var(--soft-bg); opacity: 1; }
.gg-fhero-row__thumb {
  flex: 0 0 64px; width: 64px; height: 64px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--tone, #888), var(--tone2, #aaa));
}
.gg-fhero-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gg-fhero-row__glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: rgba(255,255,255,0.85); }
.gg-fhero-row__main { flex: 1; min-width: 0; }
.gg-fhero-row__title {
  margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gg-fhero-row__meta { display: flex; gap: 8px; margin-top: 5px; font-size: 12.5px; color: var(--text-light); }
@media (max-width: 860px) {
  .gg-fhero-hero__inner { grid-template-columns: 1fr; }
  .gg-fhero-hero__cover { min-height: 0; aspect-ratio: 16 / 9; }
  .gg-fhero-hero__body { padding: 24px 20px 28px; }
  .gg-fhero-hero__title { font-size: 23px; }
}

/* =========================================================
   템플릿 변형 — 상세 (콘솔 [스타일]에서 선택)
========================================================= */
/* ----- 센터 에디토리얼 ----- */
.gg-sed-head { padding: 64px 0 0; text-align: center; }
.gg-sed-head__cat { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 14px; }
.gg-sed-head__title {
  max-width: 820px; margin: 0 auto;
  font-size: 40px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em;
}
.gg-sed-head__meta { display: flex; justify-content: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--text-muted); }
.gg-sed-cover { margin: 36px 0 0; }
.gg-sed-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gg-post-body--sed { padding-top: 44px; }
@media (max-width: 720px) {
  .gg-sed-head { padding: 40px 0 0; }
  .gg-sed-head__title { font-size: 27px; }
  .gg-sed-cover { margin-top: 24px; }
}

/* ----- 텍스트 미니멀 ----- */
.gg-smin-head { padding: 72px 0 0; }
.gg-smin-head__cat { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 12px; }
.gg-smin-head__title { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.28; letter-spacing: -0.02em; }
.gg-smin-head__meta { display: flex; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--text-muted); }
.gg-smin-head__rule { margin: 32px 0 0; border: none; border-top: 1px solid var(--border-color); }
.gg-post-body--smin { padding-top: 36px; }
@media (max-width: 720px) {
  .gg-smin-head { padding: 44px 0 0; }
  .gg-smin-head__title { font-size: 26px; }
}

/* ----- 풀블리드 히어로 ----- */
.gg-sfb-hero {
  position: relative; min-height: 62vh; min-height: 62dvh;
  display: flex; align-items: flex-end;
  background: var(--gg-sfb-bg, #16181d);
  color: #fff;
}
.gg-sfb-hero__media { position: absolute; inset: 0; overflow: hidden; }
.gg-sfb-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.gg-sfb-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 12, 0.78) 0%, rgba(8, 9, 12, 0.25) 55%, rgba(8, 9, 12, 0.18) 100%);
}
.gg-sfb-hero__content { position: relative; width: 100%; padding: 0 0 56px; }
.gg-sfb-hero__cat { display: inline-block; color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 700; letter-spacing: 0.07em; margin-bottom: 12px; }
.gg-sfb-hero__cat:hover { color: #fff; opacity: 1; }
.gg-sfb-hero__title {
  margin: 0; max-width: 880px;
  font-size: 44px; font-weight: 800; line-height: 1.22; letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.gg-sfb-hero__meta { display: flex; gap: 8px; margin-top: 16px; font-size: 14px; color: rgba(255,255,255,0.82); }
.gg-post-body--sfb { padding-top: 48px; }
@media (max-width: 720px) {
  .gg-sfb-hero { min-height: 52vh; min-height: 52dvh; }
  .gg-sfb-hero__content { padding-bottom: 36px; }
  .gg-sfb-hero__title { font-size: 28px; }
}

/* ----- 매거진 투컬럼 (홈) ----- */
.gg-fmag-section { padding: 28px 0 72px; }
.gg-fmag-top {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px;
  padding-bottom: 36px; margin-bottom: 36px;
  border-bottom: 1px solid var(--border-color);
}
.gg-fmag-lead__inner { display: block; }
.gg-fmag-lead__inner:hover { opacity: 1; }
.gg-fmag-lead__cover {
  display: block; aspect-ratio: 16 / 9; overflow: hidden; position: relative; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--tone, #888), var(--tone2, #aaa));
}
.gg-fmag-lead__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gg-fmag-lead__inner:hover .gg-fmag-lead__cover img { transform: scale(1.03); }
.gg-fmag-lead__glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; color: rgba(255,255,255,0.85); }
.gg-fmag-lead__cat { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 8px; }
.gg-fmag-lead__title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: -0.015em; }
.gg-fmag-lead__excerpt {
  margin: 12px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gg-fmag-lead__meta { display: block; margin-top: 12px; font-size: 13px; color: var(--text-light); }
.gg-fmag-side__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-light); padding-bottom: 12px; border-bottom: 2px solid var(--text-color);
}
.gg-fmag-side__item { border-bottom: 1px solid var(--border-color); }
.gg-fmag-side__link { display: block; padding: 14px 2px; }
.gg-fmag-side__link:hover { opacity: 1; background: var(--soft-bg); }
.gg-fmag-side__cat { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 4px; }
.gg-fmag-side__title { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.gg-fmag-side__date { display: block; margin-top: 5px; font-size: 12px; color: var(--text-light); }
@media (max-width: 860px) {
  .gg-fmag-top { grid-template-columns: 1fr; gap: 24px; }
}

/* ----- 저널 (홈) ----- */
.gg-fjr-intro { padding: 64px 0 4px; }
.gg-fjr-intro__eyebrow { margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-light); }
.gg-fjr-intro__title {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-weight: 700; font-size: 40px;
}
.gg-fjr-intro__tagline { margin: 8px 0 0; color: var(--text-muted); font-size: 16px; }
.gg-fjr-section { padding: 12px 0 72px; }
.gg-fjr-month { display: flex; align-items: center; gap: 14px; margin: 36px 0 6px; }
.gg-fjr-month:first-child { margin-top: 8px; }
.gg-fjr-month span { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.gg-fjr-month::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.gg-fjr-item__inner { display: flex; align-items: baseline; gap: 18px; padding: 13px 4px; border-bottom: 1px dashed var(--border-color); transition: background var(--t-fast); }
.gg-fjr-item__inner:hover { background: var(--soft-bg); opacity: 1; }
.gg-fjr-item__day { flex: 0 0 34px; font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text-light); font-variant-numeric: tabular-nums; }
.gg-fjr-item__main { flex: 1; min-width: 0; }
.gg-fjr-item__title { display: block; font-size: 17px; font-weight: 600; line-height: 1.5; }
.gg-fjr-item__meta { display: flex; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--text-light); }
@media (max-width: 720px) {
  .gg-fjr-intro { padding: 44px 0 0; }
  .gg-fjr-intro__title { font-size: 30px; }
}

/* ----- 매거진 오버랩 (상세) ----- */
.gg-smag-cover {
  height: 46vh; min-height: 280px; overflow: hidden;
  background: var(--gg-smag-bg, #16181d);
}
.gg-smag-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gg-smag-cardwrap { padding: 0 16px; }
.gg-smag-card {
  max-width: 880px; margin: -96px auto 0; position: relative;
  background: var(--primary-bg);
  box-shadow: var(--shadow-lg);
  padding: 48px 0 8px;
}
.gg-smag-head { text-align: center; padding: 0 24px 8px; }
.gg-smag-head__cat { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 12px; }
.gg-smag-head__title { margin: 0 auto; max-width: 720px; font-size: 34px; font-weight: 800; line-height: 1.28; letter-spacing: -0.02em; }
.gg-smag-head__meta { display: flex; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--text-muted); }
.gg-smag-content { padding-top: 28px; }
@media (max-width: 720px) {
  .gg-smag-cover { height: 36vh; min-height: 200px; }
  .gg-smag-card { margin-top: -56px; padding-top: 32px; }
  .gg-smag-head__title { font-size: 24px; }
}

/* ----- 스플릿 (상세) ----- */
.gg-ssp { padding: 56px 0 24px; }
.gg-ssp__inner { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }
.gg-ssp__sticky { position: sticky; top: calc(var(--header-h) + 24px); }
.gg-ssp__thumb {
  display: block; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--tone, #888), var(--tone2, #aaa));
}
.gg-ssp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gg-ssp__cat { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 10px; }
.gg-ssp__title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: -0.015em; }
.gg-ssp__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.gg-ssp__content { padding: 0; }
.gg-ssp__main .gg-content { margin: 0; }
@media (max-width: 900px) {
  .gg-ssp { padding: 40px 0 16px; }
  .gg-ssp__inner { grid-template-columns: 1fr; gap: 28px; }
  .gg-ssp__sticky { position: static; }
  .gg-ssp__thumb { max-width: 320px; }
}

/* =========================================================
   댓글 (상세 본문 하단 — 모든 템플릿 공용)
========================================================= */
.gg-comments { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border-color); }
.gg-comments__title { margin: 0 0 24px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.gg-comments__count { color: var(--accent); }
.gg-comments__list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.gg-comments__empty { color: var(--text-light); font-size: 15px; padding: 8px 0 16px; }

.gg-comment { padding: 16px 18px; background: var(--soft-bg); border-radius: 0; }
.gg-comment__head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.gg-comment__author { font-weight: 700; font-size: 14px; color: var(--text-color); }
.gg-comment__badge { font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 1px 8px; }
.gg-comment__date { margin-left: auto; font-size: 12px; color: var(--text-light); font-variant-numeric: tabular-nums; }
.gg-comment__body { font-size: 15px; line-height: 1.7; color: var(--text-color); word-break: break-word; }
.gg-comment__replies { margin: 18px 0 0 24px; display: flex; flex-direction: column; gap: 18px; border-left: 2px solid var(--border-color); padding-left: 18px; }
.gg-comment--admin { background: var(--accent-soft); }

.gg-comment-form { background: var(--card-bg); border: 1px solid var(--border-color); padding: 22px; }
.gg-comment-form__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.gg-comment-form__hint { margin: 0 0 16px; font-size: 13px; color: var(--text-muted); }
.gg-comment-form__hint a { color: var(--accent); text-decoration: underline; }
.gg-comment-form__row2 { display: flex; gap: 10px; margin-bottom: 10px; }
.gg-comment-form__email, .gg-comment-form__pw, .gg-comment-form__text {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border-color);
  font: inherit; font-size: 15px; background: var(--primary-bg); color: var(--text-color); box-sizing: border-box;
}
.gg-comment-form__email:focus, .gg-comment-form__pw:focus, .gg-comment-form__text:focus { outline: none; border-color: var(--accent); }
.gg-comment-form__text { display: block; resize: vertical; min-height: 84px; }
.gg-comment-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gg-comment-form__foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.gg-comment-form__msg { font-size: 13px; }
.gg-comment-form__msg.is-error { color: var(--accent); }
.gg-comment-form__msg.is-ok { color: #2e7d32; }
.gg-comment-form__submit {
  margin-left: auto; padding: 11px 24px; border: none; background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: background var(--t-fast);
}
.gg-comment-form__submit:hover { background: var(--accent-hover); }
.gg-comment-form__submit:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 560px) {
  .gg-comment-form__row2 { flex-direction: column; gap: 10px; }
  .gg-comments { margin-top: 40px; }
}

/* 구독 = 계정(이메일+간단비밀번호) 폼 + 구독취소 */
.gg-footer__subform--acct { flex-wrap: wrap; }
.gg-footer__subform--acct .gg-footer__email,
.gg-footer__subform--acct .gg-footer__btn { flex: 1 1 100%; }
.gg-footer__pw {
  flex: 1 1 100%; min-width: 0; border: 1px solid var(--border-color); background: #fff;
  font: inherit; font-size: 14px; padding: 11px 14px; color: var(--text-color);
}
.gg-footer__pw:focus { outline: none; border-color: var(--accent); }
.gg-footer__pw::placeholder { color: var(--text-light); }
.gg-news__unsub-toggle {
  background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: inherit;
  color: var(--text-muted); text-decoration: underline; cursor: pointer;
}
.gg-news__unsub-toggle:hover { color: var(--text-color); }
.gg-footer__unsub { margin-top: 12px; max-width: 420px; }
.gg-footer__btn--ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
.gg-footer__btn--ghost:hover { background: var(--soft-bg); color: var(--text-color); }

/* =========================================================
   모서리 "둥근" 모드 (콘솔 [스타일] → 모서리: 둥근)
   기본은 직각(0). 둥근 선택 시 주요 컴포넌트만 라운드.
========================================================= */
body.gg-round .gg-card__inner,
body.gg-round .gg-card__icon,
body.gg-round .gg-notice__cover,
body.gg-round .gg-notice__cover img,
body.gg-round .gg-post-hero__media,
body.gg-round .gg-fgrid-card__cover,
body.gg-round .gg-fhero-hero__inner,
body.gg-round .gg-fhero-hero__cover,
body.gg-round .gg-fhero-row__thumb,
body.gg-round .gg-fmag-lead__cover,
body.gg-round .gg-related__cover,
body.gg-round .gg-sed-cover img,
body.gg-round .gg-ssp__thumb,
body.gg-round .gg-comment,
body.gg-round .gg-comment-form,
body.gg-round .gg-search__form { border-radius: 14px; }

body.gg-round .gg-chip,
body.gg-round .gg-chip--has,
body.gg-round .gg-nav__cta,
body.gg-round .gg-footer__btn,
body.gg-round .gg-comment-form__submit,
body.gg-round .gg-tab,
body.gg-round .gg-share__btn { border-radius: 999px; }

body.gg-round .gg-footer__email,
body.gg-round .gg-footer__pw,
body.gg-round .gg-comment-form__email,
body.gg-round .gg-comment-form__pw,
body.gg-round .gg-comment-form__text,
body.gg-round .gg-search__input { border-radius: 10px; }

/* 구독취소 전용 페이지 ([gg_unsubscribe]) */
.gg-unsub { max-width: 440px; margin: 8px 0 24px; }
.gg-unsub__lead { margin: 0 0 16px; color: var(--text-muted); font-size: 15px; line-height: 1.7; }
.gg-unsub__form { display: flex; flex-direction: column; gap: 10px; }
.gg-unsub__input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border-color); background: #fff;
  font: inherit; font-size: 15px; padding: 12px 14px; color: var(--text-color);
}
.gg-unsub__input:focus { outline: none; border-color: var(--accent); }
.gg-unsub__btn {
  align-self: flex-start; border: none; background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 700; font-size: 14px; padding: 12px 26px; cursor: pointer; transition: background var(--t-fast);
}
.gg-unsub__btn:hover { background: var(--accent-hover); }
.gg-unsub__btn:disabled { opacity: 0.6; cursor: default; }
.gg-unsub__msg { margin-top: 12px; font-size: 14px; }
.gg-news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gg-news__unsub-link { text-decoration: underline; }

/* 일반 페이지 (page.php) */
.gg-page { padding: 56px 0 72px; }
.gg-page__title { margin: 0 0 28px; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.gg-page__body { font-size: 16px; line-height: 1.8; color: var(--text-color); }
.gg-page__body p { margin: 0 0 1em; }
@media (max-width: 720px) { .gg-page { padding: 40px 0 56px; } .gg-page__title { font-size: 26px; } }

/* 개인정보처리방침 — [gg_privacy_policy] */
.gg-privacy { max-width: 720px; }
.gg-privacy h2 { margin: 2.2em 0 0.7em; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.gg-privacy ul { margin: 0 0 1.2em; padding-left: 1.3em; }
.gg-privacy li { margin: 0 0 0.5em; }
.gg-privacy a { text-decoration: underline; text-underline-offset: 2px; }
.gg-privacy em { font-style: normal; font-weight: 600; }

/* =========================================================
   캐러셀 (넘겨보기 슬라이드) — [gg_carousel]
========================================================= */
.gg-car { position: relative; margin: 28px 0; }
.gg-car:focus { outline: none; }
.gg-car__viewport { position: relative; overflow: hidden; background: var(--soft-bg); }
.gg-car__track { display: flex; transition: transform 0.35s ease; }
.gg-car__slide { flex: 0 0 100%; min-width: 0; margin: 0; }
.gg-car__imgwrap { display: block; }
.gg-car__imgwrap img { display: block; width: 100%; height: auto; }
.gg-car__cap { padding: 12px 16px 16px; font-size: 14.5px; line-height: 1.7; color: var(--text-color); background: var(--card-bg); }
.gg-car__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: none; border-radius: 999px;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s, opacity 0.15s;
}
.gg-car__nav:hover { background: rgba(0,0,0,0.72); opacity: 1; }
.gg-car__nav--prev { left: 10px; }
.gg-car__nav--next { right: 10px; }
.gg-car__nav:disabled { opacity: 0; pointer-events: none; }
.gg-car__counter {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.gg-car__dots { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
.gg-car__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color); border: none; padding: 0; cursor: pointer; transition: background 0.15s, transform 0.15s; }
.gg-car__dot.is-active { background: var(--accent); transform: scale(1.3); }
@media (max-width: 560px) { .gg-car__nav { width: 34px; height: 34px; font-size: 20px; } }