/*
 * 블로그 상세(blog-detail.php) 전용 스타일 — design.css 뒤에 싣는다.
 * 원본: web/design/blog-detail.html 의 <style>. 시안을 고치면 이 파일도 같이 옮길 것.
 * 시안에서 뺀 것: 작성자 아바타(.author) · 카카오 공유 — 작성자·조회수 데이터와 카카오 JS 키가 없다.
 */
    /* ── 글 머리 ─────────────────────────────────────────────────────── */
    .post-head { padding: calc(var(--header-h) + 40px) 0 0; }
    .crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
    .crumb a:hover { color: var(--text); }
    .post-head-inner { max-width: 820px; }
    .post-head h1 { margin-top: 12px; font-size: 40px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
    .post-lead { margin-top: 14px; font-size: 18px; color: var(--text-2); }
    .post-bar {
      display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
      margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
    }
    .post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--text-2); }
    .post-meta span { display: inline-flex; align-items: center; gap: 5px; }
    .post-meta i { font-size: 16px; color: var(--text-3); }
    .share { display: flex; gap: 6px; }
    .icon-btn {
      width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
      background: var(--surface); color: var(--text-2); font-size: 18px; transition: background-color .15s, color .15s;
    }
    .icon-btn:hover { background: var(--surface-2); color: var(--text); }
    .copy-msg { font-size: 13px; color: var(--primary); align-self: center; }

    /* 대표 이미지 — 운영 글에 이미지가 없어 목록과 같은 아이콘 + 라임 빛 자리 */
    .cover {
      position: relative; display: grid; place-items: center; overflow: hidden;
      /* figure 기본 여백(좌우 40px)을 없앤다 — 남겨 두면 대표 이미지가 제목·본문보다 좁게 들어간다 */
      margin: 32px 0 0; aspect-ratio: 21 / 8; border-radius: var(--radius-lg);
      background:
        radial-gradient(90% 120% at var(--gx, 85%) var(--gy, 0%), rgba(198, 255, 52, 0.2), transparent 58%),
        linear-gradient(160deg, var(--surface-2), var(--bg-2));
    }
    .cover > i { font-size: 96px; color: var(--primary); }
    .cover figcaption { position: absolute; left: 20px; bottom: 16px; right: 20px; font-size: 13px; color: var(--text-2); }

    /* ── 본문 + 목차 ─────────────────────────────────────────────────── */
    .post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; padding-block: 48px 72px; }
    .toc { position: sticky; top: calc(var(--header-h) + 24px); }
    .toc-card { padding: 20px; border-radius: var(--radius); background: var(--surface); }
    .toc h2 { font-size: 13px; font-weight: 700; color: var(--text-3); margin-bottom: 10px; }
    .toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
    /* 목록 링크로만 좁힌다 — '.toc a' 로 두었더니 아래 '계산하기' 버튼까지 목차 링크 모양이 돼 글자가 왼쪽에 붙었다 */
    .toc ol a {
      display: block; padding: 7px 10px; border-left: 2px solid var(--border);
      font-size: 14px; line-height: 1.45; color: var(--text-2);
    }
    .toc ol a:hover { color: var(--text); }
    .toc ol a.is-active { border-left-color: var(--primary); color: var(--text); font-weight: 600; }
    .toc-cta { display: grid; gap: 10px; margin-top: 12px; padding: 20px; border-radius: var(--radius); background: var(--tint); }
    .toc-cta strong { font-size: 15px; }
    .toc-cta p { font-size: 13px; color: var(--text-2); }

    /* 본문 글자 — 긴 글을 읽기 좋게 줄 길이를 제한한다 */
    .prose { max-width: 720px; font-size: 17px; line-height: 1.85; color: #D9D9DE; }
    .prose > * + * { margin-top: 20px; }
    .prose h2 {
      margin-top: 56px; scroll-margin-top: calc(var(--header-h) + 24px);
      font-size: 26px; line-height: 1.4; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
    }
    .prose h2:first-child { margin-top: 0; }
    .prose h3 { margin-top: 32px; font-size: 20px; line-height: 1.45; font-weight: 700; color: var(--text); }
    .prose p { margin-bottom: 0; }
    .prose strong { color: var(--text); }
    .prose a:not(.btn) { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
    .prose ul, .prose ol { padding-left: 1.3em; }
    .prose ul { list-style: disc; }
    .prose li + li { margin-top: 8px; }
    .prose li::marker { color: var(--text-3); }
    .prose code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); font-size: 15px; color: var(--text); }

    .formula {
      display: grid; gap: 10px; padding: 20px 22px; border-radius: var(--radius); background: var(--surface);
      font-size: 16px; line-height: 1.6;
    }
    .formula b { color: var(--text); }
    .formula .step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline; }
    .formula .no {
      width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
      background: var(--tint); color: var(--primary); font-size: 13px; font-weight: 700;
    }

    .example {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    }
    .example div { padding: 16px; border-radius: var(--radius-md); background: var(--surface); line-height: 1.4; }
    .example small { display: block; font-size: 13px; color: var(--text-2); }
    .example strong { display: block; margin-top: 6px; font-size: 22px; font-weight: 800; }
    .example .is-key { background: var(--tint); }
    .example .is-key strong { color: var(--primary); }

    /* 표 — 좁은 화면에서는 표만 가로 스크롤 */
    .table-wrap { position: relative; overflow-x: auto; min-width: 0; max-width: 100%; border-radius: var(--radius); background: var(--surface); }
    .data-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
    .data-table caption { padding: 14px 18px 0; text-align: left; font-size: 13px; color: var(--text-2); }
    .data-table th, .data-table td { padding: 12px 18px; text-align: right; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
    .data-table th:first-child, .data-table td:first-child { text-align: left; }
    .data-table thead th { font-size: 13px; font-weight: 700; color: var(--text-2); }
    .data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }
    .data-table tbody th { font-weight: 700; color: var(--text); }
    .data-table .is-hl { background: var(--tint); }
    .data-table .is-hl th { color: var(--primary); }
    .data-table td small { display: block; font-size: 12px; color: var(--text-3); }

    .callout { display: flex; gap: 12px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); font-size: 16px; line-height: 1.7; }
    .callout > i { flex-shrink: 0; margin-top: 3px; font-size: 20px; color: var(--primary); }
    .callout.is-warn > i { color: var(--danger-text); }

    .calc-cta {
      display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
      padding: 24px; border-radius: var(--radius-lg);
      background: radial-gradient(420px circle at 100% 0%, rgba(198,255,52,.16), transparent 60%), var(--surface);
    }
    .calc-cta strong { display: block; font-size: 19px; color: var(--text); }
    .calc-cta p { margin-top: 4px; font-size: 15px; color: var(--text-2); }

    /* ── 글 끝: 태그 · 이전/다음 · 관련 글 ──────────────────────────── */
    .post-end { max-width: 720px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
    .post-end .tags .tag { background: var(--surface); }
    .post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
    .post-nav a { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); min-width: 0; transition: background-color .15s; }
    .post-nav a:hover { background: var(--surface-2); }
    .post-nav small { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); }
    .post-nav strong { font-size: 15px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .post-nav .next { text-align: right; }
    .post-nav .next small { justify-content: flex-end; }

    .related { padding-bottom: 96px; }
    .thumb {
      position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9;
      background:
        radial-gradient(110% 90% at var(--gx, 85%) var(--gy, 0%), rgba(198, 255, 52, 0.18), transparent 58%),
        linear-gradient(160deg, var(--surface-2), var(--bg-2));
    }
    .thumb > i { font-size: 40px; color: var(--primary); }
    .bcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
    .bcard-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px; min-width: 0; }
    .bcard-body .badge { align-self: flex-start; }
    .bcard h3 { font-size: 17px; line-height: 1.45; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .bcard time { margin-top: auto; font-size: 13px; color: var(--text-3); }

    @media (max-width: 1024px) {
      .post-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
      /* 한 줄로 쌓이면 목차는 본문 위로 */
      .toc { position: static; order: -1; margin-bottom: 32px; }
      .toc-cta { display: none; }
      .prose, .post-end { max-width: none; }
    }
    @media (max-width: 768px) {
      .post-head { padding-top: calc(var(--header-h) + 28px); }
      .post-head h1 { font-size: 28px; }
      .post-lead { font-size: 16px; }
      .cover { aspect-ratio: 16 / 9; margin-top: 24px; }
      .cover > i { font-size: 64px; }
      .prose { font-size: 16px; }
      .prose h2 { margin-top: 44px; font-size: 22px; }
      .example { grid-template-columns: minmax(0, 1fr); }
      .post-nav { grid-template-columns: minmax(0, 1fr); }
      .post-nav .next { text-align: left; }
      .post-nav .next small { justify-content: flex-start; }
    }

/* ── PHP 이관 추가분 ─────────────────────────────────────────────── */
/* 사진 대표 이미지 (크루 글) — 아래 캡션이 읽히게 바닥을 어둡게 */
.cover.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,24,26,0) 50%, rgba(24,24,26,.55) 100%); }
.cover figcaption { z-index: 1; }
.thumb.has-img img { width: 100%; height: 100%; object-fit: cover; }
/* 글자 위주 표(챌린지 종류 · 배지 목록)는 왼쪽 정렬 · 좁은 화면에서도 가로 스크롤 없이 줄바꿈 */
.data-table.is-text { min-width: 0; }
.data-table.is-text th, .data-table.is-text td { text-align: left; }
.data-table.is-text tbody th { white-space: nowrap; width: 1%; }
.formula sup { font-size: .7em; }
/* 목차가 없는 글에서 CTA 만 남을 때 */
.toc-cta:first-child { margin-top: 0; }
/* 없는 글(404) */
.not-found { padding-block: calc(var(--header-h) + 40px) 96px; }
.not-found .empty { margin-top: 8px; }
.not-found h1 { font-size: 22px; font-weight: 800; }
.not-found .section-head { margin-top: 56px; }
@media (max-width: 768px) {
  .data-table.is-text tbody th { white-space: normal; width: auto; }
}