/* =========================================================
   Post Blog CSS (GeneratePress)
   - Single Post: featured image hero + clean typography + prev/next buttons
   - Blog/Archive: grid cards + pagination
========================================================= */

/* ---------- Base background ---------- */
.blog .site-content,
.archive .site-content,
.single-post .site-content{
  background: var(--ghb-bg, #07070a);
}

/* ✅ 공백 없는 긴 문자열/URL/영문이 레이아웃 깨는 것 방지 (전체 공통) */
.single-post .entry-title,
.single-post .entry-content,
.single-post .entry-content * ,
.blog .entry-title,
.blog .entry-summary,
.archive .entry-title,
.archive .entry-summary{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------
   1) SINGLE POST (글 상세)
--------------------------------------------------------- */
.single-post .content-area,
.single-post .site-main{
  padding-top: clamp(18px, 2.6vw, 34px);
  padding-bottom: clamp(110px, 10vw, 160px); /* 하단 고정 CTA 대비 */
}

/* separate-containers 모드에서 GP 흰 박스 제거 */
.single-post.separate-containers .inside-article{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 글 카드 */
.single-post article.post,
.single-post article.type-post{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--ghb-border, rgba(255,255,255,.14));
  border-radius: var(--ghb-radius-lg, 28px);
  box-shadow: var(--ghb-shadow, 0 18px 60px rgba(0,0,0,.40));
  overflow: hidden;
}

/* inside-article은 래퍼라 padding 0으로 통일 */
.single-post article.post .inside-article,
.single-post article.type-post .inside-article{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* ✅ Featured image wrapper (GP 케이스별 클래스 최대 대응) */
.single-post .featured-image,
.single-post .post-image,
.single-post .post-image-below-header,
.single-post .post-image-above-header,
.single-post .page-header-image,
.single-post .page-header-image-single,
.single-post .wp-block-post-featured-image{
  position: relative;
  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
  float: none !important;

  width: 100% !important;     /* ✅ 핵심: 래퍼가 꽉 차야 함 */
  max-width: 100% !important;

  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* 링크가 감싸는 경우 */
.single-post .featured-image > a,
.single-post .post-image > a,
.single-post .post-image-below-header > a,
.single-post .post-image-above-header > a,
.single-post .page-header-image > a,
.single-post .page-header-image-single > a,
.single-post .wp-block-post-featured-image > a{
  display: block !important;
}

/* ✅ 대표 이미지 자체: 강제 100% + 가운데 기준 */
.single-post .featured-image img,
.single-post .post-image img,
.single-post .post-image-below-header img,
.single-post .post-image-above-header img,
.single-post .page-header-image img,
.single-post .page-header-image-single img,
.single-post .wp-block-post-featured-image img,
.single-post img.wp-post-image{
  display: block !important;
  width: 100% !important;      /* ✅ 핵심: 원본 크기로 안 나오게 강제 */
  max-width: 100% !important;
  height: clamp(240px, 42vw, 520px) !important;
  object-fit: cover;
  object-position: center center; /* ✅ 가운데 기준으로 크롭 */
  margin: 0 auto !important;
  transform: scale(1.02);
}

/* 이미지 오버레이 */
.single-post .featured-image::after,
.single-post .post-image::after,
.single-post .post-image-below-header::after,
.single-post .post-image-above-header::after,
.single-post .page-header-image::after,
.single-post .page-header-image-single::after,
.single-post .wp-block-post-featured-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 420px at 70% 30%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.55));
  pointer-events:none;
}

/* ✅ 텍스트 영역 폭 제한(가독성) */
.single-post .entry-header,
.single-post .entry-content,
.single-post .ghb-post-nav{
  width: min(920px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.single-post .entry-header{
  padding: clamp(18px, 2.6vw, 28px) 0 0;
  text-align: center;
}

.single-post .entry-title{
  margin: 0 0 10px;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
}

.single-post .entry-meta{
  color: rgba(255,255,255,.62);
  font-size: 13px;
  letter-spacing: .06em;
}

.single-post .entry-content{
  padding: 0 0 clamp(26px, 3.2vw, 38px);
  color: rgba(255,255,255,.88);
}

/* 문단 */
.single-post .entry-content p{
  margin: 0 0 14px;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
  font-size: 16px;
}

/* 헤딩 */
.single-post .entry-content h2{
  margin: 26px 0 10px;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
}
.single-post .entry-content h3{
  margin: 18px 0 8px;
  font-size: clamp(16px, 1.9vw, 22px);
  line-height: 1.3;
  color: rgba(255,255,255,.90);
}

.single-post .entry-content a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 2px;
}
.single-post .entry-content a:hover{
  border-bottom-color: rgba(255,255,255,.45);
}

.single-post .entry-content ul,
.single-post .entry-content ol{
  padding-left: 18px;
  margin: 12px 0 16px;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
}

.single-post .entry-content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 3px solid rgba(180,140,255,.55);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  color: rgba(255,255,255,.78);
}

.single-post .entry-content hr{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 22px 0;
}

.single-post .entry-content pre,
.single-post .entry-content code{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: rgba(255,255,255,.86);
}
.single-post .entry-content pre{
  padding: 14px 16px;
  overflow: auto;
}
.single-post .entry-content code{
  padding: 2px 7px;
}

.single-post .entry-content img{
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}

/* ---------------------------------------------------------
   Prev / Next Navigation (Buttons)
--------------------------------------------------------- */
.ghb-post-nav{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 24px;
}

.ghb-post-nav__btn{
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  min-height: 84px;
}

.ghb-post-nav__btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}

.ghb-post-nav__k{
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.62);
}

.ghb-post-nav__t{
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255,255,255,.92);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  overflow-wrap: anywhere;
  word-break: break-word;
}

.ghb-post-nav__btn--prev{
  align-items: flex-start;
}
.ghb-post-nav__btn--next{
  align-items: flex-end;
  text-align: right;
}

.ghb-post-nav__ghost{
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
}

/* ---------------------------------------------------------
   2) BLOG / ARCHIVE (목록 페이지)
--------------------------------------------------------- */
.blog .content-area,
.archive .content-area,
.blog .site-main,
.archive .site-main{
  padding-top: clamp(26px, 3.2vw, 46px);
  padding-bottom: clamp(60px, 7vw, 110px);
}

/* 아카이브/블로그 타이틀 박스 */
.blog .page-header,
.archive .page-header{
  width: min(1100px, 100% - 32px);
  margin: 0 auto 16px;
  padding: 18px 16px;
  border-radius: var(--ghb-radius-lg, 28px);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 540px at 25% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 640px at 80% 18%, rgba(124,92,255,.18), transparent 60%),
    rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.blog .page-header h1,
.archive .page-header h1{
  margin: 0 0 8px;
  font-size: clamp(26px, 3.7vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
}

.blog .page-header p,
.archive .page-header p{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
}

/* ✅ 그리드: inside-archive-posts 우선, 없으면 site-main을 그리드로 */
.blog .inside-archive-posts,
.archive .inside-archive-posts{
  width: min(1100px, 100% - 32px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.blog .inside-archive-posts > article,
.archive .inside-archive-posts > article{
  margin: 0 !important;
}

/* fallback */
.blog .site-main,
.archive .site-main{
  width: min(1100px, 100% - 32px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.blog .site-main > article,
.archive .site-main > article{
  margin: 0 !important;
}

/* 카드 */
.blog article.post,
.archive article.post{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.blog article.post:hover,
.archive article.post:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
}

/* 썸네일 */
.blog article.post .post-image,
.archive article.post .post-image{
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.blog article.post .post-image > a,
.archive article.post .post-image > a{
  display:block;
}
.blog article.post .post-image img,
.archive article.post .post-image img{
  width: 100% !important;
  height: 190px;
  object-fit: cover;
  object-position: center center;
  display:block;
  transform: scale(1.03);
}

/* 목록 본문: GP 기본 박스 제거 + 패딩 통일 */
.blog.separate-containers article.post .inside-article,
.archive.separate-containers article.post .inside-article{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 14px 14px 16px !important;
}

/* 제목 */
.blog article.post .entry-title,
.archive article.post .entry-title{
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.blog article.post .entry-title a,
.archive article.post .entry-title a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.blog article.post .entry-title a:hover,
.archive article.post .entry-title a:hover{
  text-decoration: underline;
}

/* 메타 */
.blog article.post .entry-meta,
.archive article.post .entry-meta{
  color: rgba(255,255,255,.58);
  font-size: 12px;
  letter-spacing: .08em;
  margin: 0 0 10px;
}

/* 요약 말줄임 3줄 */
.blog article.post .entry-summary,
.archive article.post .entry-summary{
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  font-size: 13px;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination */
.blog .pagination,
.archive .pagination{
  width: min(1100px, 100% - 32px);
  margin: 24px auto 0;
}

.blog .pagination .page-numbers,
.archive .pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.88);
  text-decoration:none;
  margin: 0 6px 8px 0;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.blog .pagination .page-numbers:hover,
.archive .pagination .page-numbers:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
.blog .pagination .page-numbers.current,
.archive .pagination .page-numbers.current{
  background: rgba(255,255,255,.55);
  color: rgba(0,0,0,.90);
  border-color: rgba(255,255,255,.30);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 1024px){
  .blog .inside-archive-posts,
  .archive .inside-archive-posts,
  .blog .site-main,
  .archive .site-main{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .blog .inside-archive-posts,
  .archive .inside-archive-posts,
  .blog .site-main,
  .archive .site-main{
    grid-template-columns: 1fr;
  }
  .blog article.post .post-image img,
  .archive article.post .post-image img{
    height: 210px;
  }

  .single-post .entry-header,
  .single-post .entry-content,
  .single-post .ghb-post-nav{
    width: calc(100% - 32px);
  }

  .ghb-post-nav{
    grid-template-columns: 1fr;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .single-post .featured-image img,
  .single-post .post-image img,
  .single-post .post-image-below-header img,
  .single-post .post-image-above-header img,
  .single-post .page-header-image img,
  .single-post .page-header-image-single img,
  .single-post .wp-block-post-featured-image img,
  .blog article.post .post-image img,
  .archive article.post .post-image img{
    transform: none;
  }
  .blog article.post,
  .archive article.post{
    transition: none;
  }
}