/* ==========================================================================
   Blog Contents — Single Post (Dark UI for GeneratePress Child)
   Target: body.single-post
   ========================================================================== */

/* ===== Theme tokens ===== */
:root{
  --bg:#0b0b0d;
  --surface:#111217;
  --surface-2:#151821;
  --text:#e9e9ef;
  --muted:#b7b7c7;
  --border:rgba(255,255,255,.12);
  --soft:rgba(255,255,255,.06);
  --accent:#c99a3d;
  --accent-ink:#111;
  --shadow:0 12px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
}

/* ===== Dark canvas (핫픽스 포함) ===== */
/* 페이지 캔버스 계층은 항상 다크 배경 유지 */
body.single-post,
body.single-post .site-content,
body.single-post .content-area,
body.single-post .site-main{
  background:var(--bg) !important;
}

/* 본문 카드 컨테이너 */
body.single-post .inside-article{
  background:var(--bg) !important;
  box-shadow:none;
  border:1px solid var(--soft);
  border-radius:18px;
  margin:clamp(12px,2vw,18px);
  /* 아래에서 스티키 CTA 여백을 다시 설정함 */
  padding:clamp(18px,3vw,28px);
}

/* ===== Typo / layout (entry-content, post-content 동시 지원) ===== */
body.single-post :where(.entry-content,.post-content){
  max-width:760px;
  margin-inline:auto;
  color:var(--text);
  font-size:1.06rem;
  line-height:1.9;
}
body.single-post :where(.entry-content,.post-content) > *{
  margin-block:clamp(14px,2.2vw,20px);
}
body.single-post :where(.entry-content,.post-content) p{ text-wrap:pretty; }

/* 제목/메타 */
body.single-post .entry-title,
body.single-post .post-title{
  color:var(--text);
  font-size:clamp(2rem,3.5vw,2.6rem);
  line-height:1.18;
  margin-bottom:.2em;
}
body.single-post .entry-meta,
body.single-post .post-meta{ color:var(--muted); font-size:.95rem; gap:10px; }

/* 섹션 헤딩 */
body.single-post :where(.entry-content,.post-content) h2,
body.single-post :where(.entry-content,.post-content) h3,
body.single-post :where(.entry-content,.post-content) h4{
  line-height:1.25; color:var(--text); letter-spacing:.2px;
}
body.single-post :where(.entry-content,.post-content) h2{
  font-size:clamp(1.5rem,2.4vw,2rem);
  margin-top:1.6em; padding-bottom:.4em; border-bottom:1px dashed var(--soft);
}
body.single-post :where(.entry-content,.post-content) h3{
  font-size:clamp(1.25rem,1.8vw,1.5rem); margin-top:1.2em;
}
body.single-post :where(.entry-content,.post-content) h4{
  font-size:clamp(1.05rem,1.4vw,1.2rem); margin-top:1.1em; color:#d9d9e3;
}

/* 링크 */
body.single-post :where(.entry-content,.post-content) a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(201,154,61,.35);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
body.single-post :where(.entry-content,.post-content) a:hover{
  color:#fff; border-bottom-color:var(--accent);
}

/* 리스트/구분선 */
body.single-post :where(.entry-content,.post-content) :where(ul,ol){ padding-inline-start:1.2em; }
body.single-post :where(.entry-content,.post-content) li{ margin:.25em 0; }
body.single-post :where(.entry-content,.post-content) hr{
  border:0; height:1px; margin-block:2.2em;
  background:linear-gradient(to right,transparent,var(--soft),transparent);
}

/* 인용 */
body.single-post :where(.entry-content,.post-content) blockquote{
  margin:1.2em 0; padding:1em 1.2em;
  border-inline-start:4px solid rgba(201,154,61,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border-radius:14px; color:#f0ede3;
}

/* 이미지/갤러리/캡션 */
body.single-post :where(.entry-content,.post-content) img{
  max-width:100%; height:auto; display:block;
  border-radius:14px; box-shadow:var(--shadow);
}
body.single-post :where(.entry-content,.post-content) figure{ margin:1.2em 0; }
body.single-post :where(.entry-content,.post-content) figcaption{
  text-align:center; font-size:.92rem; color:var(--muted); margin-top:.55em;
}
body.single-post :where(.entry-content,.post-content) .wp-block-gallery{ gap:12px; }
body.single-post :where(.entry-content,.post-content) .wp-block-gallery .wp-block-image img{ border-radius:12px; }

/* 테이블 */
body.single-post :where(.entry-content,.post-content) table{
  width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.98rem;
}
body.single-post :where(.entry-content,.post-content) table :where(th,td){
  border:1px solid var(--border); padding:.7em .75em;
}
body.single-post :where(.entry-content,.post-content) thead th{ background:var(--surface); color:var(--text); }
body.single-post :where(.entry-content,.post-content) .wp-block-table{ overflow-x:auto; }

/* 코드 */
body.single-post :where(.entry-content,.post-content) :where(pre,code){
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
body.single-post :where(.entry-content,.post-content) pre{
  padding:1em; border-radius:12px; background:#0f0f12; overflow:auto;
  border:1px solid var(--soft); color:#e6e6f0;
}

/* 정렬 유틸 */
body.single-post :where(.entry-content,.post-content) .alignwide{ margin-left:auto; margin-right:auto; }
body.single-post :where(.entry-content,.post-content) .aligncenter{ margin-left:auto; margin-right:auto; text-align:center; }
body.single-post :where(.entry-content,.post-content) .alignright{ float:right; margin-left:1.2em; }
body.single-post :where(.entry-content,.post-content) .alignleft{ float:left; margin-right:1.2em; }
@media (max-width:768px){
  body.single-post :where(.entry-content,.post-content) .alignright,
  body.single-post :where(.entry-content,.post-content) .alignleft{
    float:none; margin:1em auto;
  }
}

/* ===== CTA (본문 카드) ===== */
body.single-post :where(.entry-content,.post-content) .cta-box{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--soft);
  border-radius:16px;
  padding:20px;
  text-align:center;
  margin:2.2em 0 1.2em;
  box-shadow:var(--shadow);
}
body.single-post :where(.entry-content,.post-content) .cta-title{
  font-size:clamp(1.1rem,1.6vw,1.3rem); font-weight:700; color:#fff; margin-bottom:.35em;
}
body.single-post :where(.entry-content,.post-content) .cta-desc{
  color:var(--muted); font-size:.98rem; margin-bottom:.8em;
}

/* 버튼(공용) */
body.single-post :where(.entry-content,.post-content) .btn,
body.single-post .post-cta-sticky .btn{
  display:inline-block; padding:.9em 1.2em; border-radius:12px;
  background:var(--accent); color:var(--accent-ink); font-weight:700; text-decoration:none;
  box-shadow:0 6px 18px rgba(201,154,61,.35);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
body.single-post :where(.entry-content,.post-content) .btn:hover,
body.single-post .post-cta-sticky .btn:hover{
  transform:translateY(-1px); box-shadow:0 10px 24px rgba(201,154,61,.45); filter:brightness(1.03);
}

/* 보조 버튼 */
body.single-post :where(.entry-content,.post-content) .btn-outline{
  background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none;
}
body.single-post :where(.entry-content,.post-content) .btn-outline:hover{ border-color:var(--accent); color:#fff; }

/* ===== Sticky CTA (하단 고정) ===== */
body.single-post .post-cta-sticky{
  position:fixed; left:16px; right:16px; bottom:16px;
  background:color-mix(in oklab, var(--surface-2) 85%, black 15%);
  border:1px solid var(--soft);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; gap:12px;
  z-index:9999; backdrop-filter:blur(10px);
}
body.single-post .post-cta-sticky .label{ color:var(--muted); font-size:.95rem; }
body.single-post .post-cta-sticky .btn{ padding:.85em 1.1em; }
@media (max-width:480px){
  body.single-post .post-cta-sticky{ left:10px; right:10px; bottom:12px; padding:10px 12px; }
  body.single-post .post-cta-sticky .label{ display:none; }
}

/* 본문과 CTA가 겹치지 않도록 여백 */
body.single-post .inside-article{ padding-bottom:clamp(28px,6vw,72px); }

/* ==========================================================================
   Featured image — white strip/border & alignment fix
   ========================================================================== */

/* 대표 이미지 영역은 투명(풀블리드가 자연스럽게 붙도록) */
body.single-post .entry-header{
  margin:0; padding:0;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* 기본 리셋 */
body.single-post .entry-header .post-thumbnail{
  margin:0;              /* figure 기본 마진 제거 */
  line-height:0;         /* 인라인 갭 제거 */
  background:transparent;
}
body.single-post .entry-header .post-thumbnail img{
  display:block;         /* 하단 빈칸 제거 */
  width:100%;
  height:auto;
  border:0; outline:0;
}

/* ★ 풀블리드(가로 꽉 차게) — 필요 없으면 이 블록 주석 처리 */
@media (min-width:768px){
  body.single-post .entry-header .post-thumbnail{
    margin:0 calc(50% - 50vw); /* 컨테이너 밖으로 확장 */
    max-width:100vw;
  }
  body.single-post .entry-header .post-thumbnail img{
    width:100vw;
    height:clamp(260px,42vw,520px);
    object-fit:cover;
    object-position:center 40%; /* 구도 미세조정 */
    border-radius:0;
    box-shadow:none;
  }
}

/* ==========================================================================
   COMPAT LAYER — 템플릿/플러그인 구조 차이 흡수
   ========================================================================== */

/* 다른 래퍼가 흰 배경을 강제할 경우 무력화 */
body.single-post article,
body.single-post .site-content,
body.single-post .content-area{
  background:transparent !important; /* canvas는 위에서 var(--bg)로 이미 지정 */
  border:0 !important;
  box-shadow:none !important;
}

/* entry-content가 없는 테마/템플릿도 커버 */
body.single-post article :where(.entry-content,
                                .post-content,
                                .wp-block-post-content,
                                .content,
                                .post-body,
                                .the-content){
  max-width:760px; margin-inline:auto; color:var(--text);
  font-size:1.06rem; line-height:1.9;
}
body.single-post article :where(.entry-content,
                                .post-content,
                                .wp-block-post-content,
                                .content,
                                .post-body,
                                .the-content) > *{
  margin-block:clamp(14px,2.2vw,20px);
}

/* 링크/헤딩/미디어/테이블 호환 규칙(요약) */
body.single-post article :where(.entry-content,
  .post-content,.wp-block-post-content,.content,.post-body,.the-content) a{
  color:var(--text); text-decoration:none; border-bottom:1px solid rgba(201,154,61,.35);
}
body.single-post article :where(.entry-content,
  .post-content,.wp-block-post-content,.content,.post-body,.the-content) a:hover{
  color:#fff; border-bottom-color:var(--accent);
}
body.single-post article :where(.entry-content,
  .post-content,.wp-block-post-content,.content,.post-body,.the-content) h2{
  font-size:clamp(1.5rem,2.4vw,2rem); margin-top:1.6em; padding-bottom:.4em; border-bottom:1px dashed var(--soft);
}
body.single-post article :where(.entry-content,
  .post-content,.wp-block-post-content,.content,.post-body,.the-content) h3{
  font-size:clamp(1.25rem,1.8vw,1.5rem); margin-top:1.2em;
}
body.single-post article :where(.entry-content,
  .post-content,.wp-block-post-content,.content,.post-body,.the-content) img{
  max-width:100%; height:auto; display:block; border-radius:14px; box-shadow:var(--shadow);
}
body.single-post article :where(.entry-content,
  .post-content,.wp-block-post-content,.content,.post-body,.the-content) table{
  width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.98rem;
}
body.single-post article :where(.entry-content,
  .post-content,.wp-block-post-content,.content,.post-body,.the-content) table :where(th,td){
  border:1px solid var(--border); padding:.7em .75em;
}
body.single-post article :where(.entry-content,
  .post-content,.wp-block-post-content,.content,.post-body,.the-content) blockquote{
  margin:1.2em 0; padding:1em 1.2em;
  border-inline-start:4px solid rgba(201,154,61,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border-radius:14px; color:#f0ede3;
}

/* 0) 이 화면에서만 박스사이징 통일 */
body.single-post, 
body.single-post * { box-sizing: border-box; }

/* 1) 풀블리드로 인한 가로 overflow를 페이지/아티클 레벨에서 차단 */
body.single-post { overflow-x: clip; }
@supports not (overflow-x: clip){
  body.single-post { overflow-x: hidden; }
}
body.single-post article,
body.single-post .entry-header { overflow-x: clip; }
@supports not (overflow-x: clip){
  body.single-post article,
  body.single-post .entry-header { overflow-x: hidden; }
}

/* 2) 본문 컨테이너 좌우 여백은 entry-content에서만 관리 → 좌우 균등 */
body.single-post .inside-article{
  padding: clamp(18px, 3vw, 28px) 0 clamp(28px, 6vw, 72px);
}
body.single-post :where(.entry-content, .post-content){
  width: min(100%, 760px);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

/* 3) 대표 이미지도 100vw가 스크롤바 폭을 넘지 않게 보정 */
@media (min-width: 768px){
  body.single-post .entry-header .post-thumbnail img{
    max-width: 100vw;
  }
}