/*
Theme Name: 꼼꼼한 Blog
Theme URI: https://blog.ggomggomhan.com
Author: 꼼꼼한
Author URI: https://ggomggomhan.com
Description: 꼼꼼한 공식 블로그 테마 — 유명인물의 메모습관을 꼼꼼한 서비스로 구현하는 시리즈와 개발자 노트(SaaS 제작 과정 기록)를 담는 콘텐츠 사이트.
Version: 0.1.27
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, 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");

/* =========================================================
   꼼꼼한 BLOG — design tokens
   메인 SaaS (ggomggomhan.com) 의 컬러 시스템을 공유.
   구조 패턴은 vercel.com/blog 참고 (히어로·필터·피처드·그리드).
========================================================= */

:root {
  /* ----- Colors (from main SaaS) ----- */
  --primary-bg: #ffffff;
  --card-bg: #ffffff;
  --text-color: #333333;
  --text-muted: rgba(51, 51, 51, 0.62);
  --text-light: rgba(51, 51, 51, 0.45);

  --accent-green: #C5E052;
  --accent-dark-green: #8BA86E;
  --accent-yellow: #F1D7A6;
  --accent-orange: #F5A663;
  --accent-brown: #B16D42;

  --memo-yellow: #F4D36F;
  --memo-orange: #E6A57E;
  --memo-purple: #B2A4F1;
  --memo-green: #D9E892;
  --memo-blue: #B3CBD0;

  --light-grey: #F8F8F8;
  --border-color: rgba(0, 0, 0, 0.06);

  /* ----- Radius (꼼꼼한 시그니처는 큰 라운드) ----- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ----- 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;
  --leading-body: 1.7;
  --leading-tight: 1.25;

  /* ----- Layout ----- */
  --shell-max: 1200px;
  --content-max: 720px;
  --shell-gutter: 32px;

  /* ----- 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 {
  border-bottom: 1px solid var(--border-color);
  background: var(--primary-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255, 255, 255, 0.85);
}

.gg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 32px;
}

.gg-logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-color);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gg-logo__img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: block;
  object-fit: contain;
}

.gg-logo__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--accent-green);
  color: var(--text-color);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.gg-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}

.gg-nav a {
  color: var(--text-muted);
}

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

.gg-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--text-color);
  color: #fff !important;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 13px;
  transition: opacity var(--t-fast);
}

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

.gg-notice__slider {
  position: relative;
  border-radius: var(--radius-xl);
  background-image:
    radial-gradient(circle at 0 0, rgba(177, 109, 66, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, #f5f5f0 0%, #fafaf7 60%, #f0ede4 100%);
  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.05fr 1fr;
  gap: 40px;
  padding: 56px 56px 72px;
  align-items: center;
  min-height: 420px;
  color: inherit;
  text-decoration: none;
}

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

.gg-notice__body { min-width: 0; }

.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: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--text-color);
  transition: color var(--t-base);
}

.gg-notice__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.gg-notice__author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 1px;
}

.gg-notice__author-role {
  font-size: 12px;
  color: var(--text-muted);
}

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

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

.gg-notice__cover {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

.gg-notice__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gg-notice__cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.18);
}

/* Nav arrows */
.gg-notice__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  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: 50%;
  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: var(--radius-pill);
}

/* =========================================================
   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-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gg-filter::-webkit-scrollbar { display: none; }

.gg-filter__inner {
  display: flex;
  gap: 8px;
  min-width: max-content;
}

.gg-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--light-grey);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  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;
}

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

.gg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-color);
}

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

.gg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* 외곽 보더는 없음. 카드 사이 세로 라인만. */
  border-top: 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);
}

/* 3의 배수 위치 카드의 오른쪽 보더 제거 (그리드 우측 정렬) */
.gg-card:nth-child(3n) {
  border-right: none;
}

.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: var(--radius-md);
  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--memo { background: linear-gradient(135deg, var(--memo-yellow), var(--accent-orange)); }
.gg-card__icon--dev { background: linear-gradient(135deg, var(--memo-blue), var(--memo-purple)); }
.gg-card__icon--default { background: linear-gradient(135deg, var(--memo-green), var(--accent-yellow)); }

.gg-card__glyph {
  font-size: 36px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.32);
}

/* ---------- 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: var(--radius-pill);
  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: var(--radius-pill);
  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;
}

/* =========================================================
   ARTICLE (single)
========================================================= */
.gg-article {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 64px 0 96px;
}

.gg-article__header {
  margin-bottom: 48px;
}

.gg-article__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--memo-purple);
  color: var(--text-color);
  margin-bottom: 16px;
}

.gg-article__title {
  font-size: 44px;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 20px;
}

.gg-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
}

.gg-article__cover {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 0 0 48px;
}

.gg-article__cover img { width: 100%; height: 100%; object-fit: cover; }

.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: var(--radius-md);
  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;
}
.gg-article__body pre {
  background: var(--light-grey);
  padding: 20px;
  border-radius: var(--radius-md);
  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: 6px;
  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);
  padding: 48px 0;
  margin-top: 64px;
  font-size: 13px;
  color: var(--text-muted);
}

.gg-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

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

/* =========================================================
   RESPONSIVE
========================================================= */
/* 3컬럼 → 2컬럼 (태블릿) */
@media (max-width: 1080px) {
  .gg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gg-card:nth-child(3n) { border-right: 1px solid var(--border-color); }
  .gg-card:nth-child(2n) { border-right: none; }
}

/* 2컬럼 → 1컬럼 (모바일) + 슬라이더 변형 */
@media (max-width: 720px) {
  :root { --shell-gutter: 20px; }

  /* 슬라이더 — 모바일에서 세로 스택 */
  .gg-notice__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 24px 64px;
    min-height: auto;
  }
  .gg-notice__title { font-size: 24px; }
  .gg-notice__cover { aspect-ratio: 16 / 10; }
  .gg-notice__nav { width: 36px; height: 36px; font-size: 20px; }
  .gg-notice__nav--prev { left: 8px; }
  .gg-notice__nav--next { right: 8px; }

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

  .gg-grid {
    grid-template-columns: 1fr;
  }
  .gg-card,
  .gg-card:nth-child(3n),
  .gg-card:nth-child(2n) {
    border-right: none;
  }
  .gg-card__inner {
    min-height: auto;
    padding: 32px 20px 28px;
  }
  .gg-card__head { margin-bottom: 32px; }
  .gg-card__title { font-size: 22px; }

  .gg-article__title { font-size: 32px; }
}

@media (max-width: 560px) {
  .gg-header__inner { height: 56px; gap: 16px; }
  .gg-nav { gap: 16px; font-size: 13px; }
  .gg-nav__cta { padding: 6px 12px; font-size: 12px; }
  .gg-notice__title { font-size: 22px; }
}