/* =========================================================
   Single Post (post.css)
   - main.css 기반 + 포스트에서만 필요한 스타일
   - 상단 썸네일(히어로), 본문 가독성, 하단 CTA, 이전/다음 글 내비
========================================================= */

/* ---------- Page Base ---------- */
.single-post .site-content,
.single .site-content{
  background: var(--bg);
}

/* GP/일반 테마에서 본문 폭을 readable로 정리 */
.single-post .content-area,
.single .content-area{
  width: 100%;
}

.single-post .entry-content,
.single .entry-content{
  /* 본문을 읽기 좋은 폭으로(풀폭 배경 + 텍스트만 제한) */
  max-width: var(--readable);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* 타이포 기본 */
.single-post .entry-content p{
  margin: 0 0 1.05em;
  color: rgba(255,255,255,.86);
}
.single-post .entry-content h2,
.single-post .entry-content h3{
  margin: 1.6em 0 .65em;
  letter-spacing: -0.02em;
}
.single-post .entry-content a{
  color: rgba(255,255,255,.92);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.single-post .entry-content a:hover{
  opacity: .9;
}

/* 이미지/미디어 기본 */
.single-post .entry-content img,
.single-post .entry-content video,
.single-post .entry-content iframe{
  max-width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 6px);
}
.single-post .entry-content figure{
  margin: 1.2em 0;
}

/* ---------- Featured Image Hero ---------- */
/* WP 기본 썸네일: .post-thumbnail */
.single-post .post-thumbnail{
  margin: 0;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #0b0b10;
}
.single-post .post-thumbnail img{
  width: 100%;
  height: clamp(260px, 52vh, 540px);
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

/* 히어로 위에 제목을 올리고 싶을 때 사용할 수 있는 래퍼(선택)
   - 테마/템플릿에서 hero 구조를 만들면 이 스타일이 먹음 */
.post-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0b0b10;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.post-hero img{
  width: 100%;
  height: clamp(300px, 60vh, 620px);
  object-fit: cover;
  object-position: center;
  display: block;
}
.post-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.78));
}
.post-hero .post-hero-inner{
  position:absolute;
  left:0; right:0;
  bottom: 0;
  padding: clamp(18px, 3.2vw, 44px) var(--pad-x);
}
.post-hero .post-hero-title{
  max-width: var(--readable);
  margin: 0 auto;
  font-size: clamp(30px, 4.8vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.03em;
}
.post-hero .post-hero-meta{
  max-width: var(--readable);
  margin: 10px auto 0;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

/* ---------- Post Header spacing (일반 테마 제목 영역 보정) ---------- */
.single-post .entry-header{
  max-width: var(--readable);
  margin: 0 auto;
  padding: clamp(22px, 3.2vw, 44px) var(--pad-x) 10px;
}
.single-post .entry-title{
  margin: 0;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.single-post .entry-meta{
  margin-top: 10px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

/* ---------- Content blocks ---------- */
.single-post .entry-content blockquote{
  margin: 1.2em 0;
  padding: 14px 16px;
  border-left: 3px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  color: rgba(255,255,255,.86);
}
.single-post .entry-content hr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 1.6em 0;
}

/* ---------- Bottom CTA (하단 CTA 박스) ---------- */
/* 글 템플릿/훅에서 <section class="post-bottom-cta"> ... </section> 넣으면 이 스타일로 깔끔해짐 */
.post-bottom-cta{
  margin: clamp(28px, 4vw, 56px) auto 0;
  max-width: var(--readable);
  padding: 0 var(--pad-x);
}
.post-bottom-cta .cta-box{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(124,92,255,.16), transparent 60%),
    rgba(255,255,255,.04);
  padding: clamp(18px, 3.2vw, 34px);
}
.post-bottom-cta .cta-title{
  margin: 0 0 10px;
  font-size: clamp(20px, 2.8vw, 30px);
  letter-spacing: -0.02em;
}
.post-bottom-cta .cta-desc{
  margin: 0 0 14px;
  color: var(--muted);
}
.post-bottom-cta .cta-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Prev / Next Navigation ---------- */
/* WP 기본: .post-navigation .nav-links a */
.single-post .post-navigation{
  margin: clamp(30px, 4vw, 60px) 0 0;
  padding: 0 var(--pad-x);
}
.single-post .post-navigation .nav-links{
  max-width: var(--readable);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.single-post .post-navigation a{
  display:flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  padding: 14px 14px;
  min-height: 76px;
}
.single-post .post-navigation a:hover{
  background: rgba(255,255,255,.08);
}
.single-post .post-navigation .nav-subtitle{
  color: rgba(255,255,255,.62);
  font-size: 12px;
  letter-spacing: .14em;
}
.single-post .post-navigation .nav-title{
  color: rgba(255,255,255,.92);
  font-weight: 900;
  line-height: 1.25;
}

/* 모바일에서 이전/다음 한 줄 */
@media (max-width: 720px){
  .single-post .post-navigation .nav-links{
    grid-template-columns: 1fr;
  }
}