/*
 * 방문자 화면 새 디자인(«디자인 v2») — 글 상세. 부품: src/widgets/v2/post/. 기준: 피그마 PF-03(1440) · PF-09(390).
 *
 * 규칙은 core.css 와 같다 — 선택자는 전부 [data-design="v2"] 아래, 색 · 모서리 · 굵기는 CSS 변수(--d-…)만,
 * Tailwind 의 components 층. 기본이 휴대폰(390px) — 820px 까지 이 배치다. 51.3125rem(821px) 이상이 넓은 화면.
 *
 * 예외: 맨 아래 «본문 글자» · «본문 블록» 묶음은 층 밖에 둔다. 본문 모양(shared/styles/prose.css 의 .prose-content)과
 * 블록 모양(entities/post/lib/blocks-css.ts)이 층 밖 규칙이라 components 층에서는 이길 수 없다. 선택자는 .v2-post-body 아래로만 좁혀 두었다.
 *
 * 번호(01 · 02 …)는 CSS 카운터 v2-psec 이 센다 — 본문 맨 바깥의 소제목(h2)과 그 아래 구역(자주 묻는 질문 · 출처 · 관련 검색어)이
 * 한 줄로 이어진다. 직접 넣은 HTML 처럼 소제목이 다른 틀 안에 든 글은 본문 번호 없이 아래 구역만 01 부터 센다.
 */
@layer theme, base, components, utilities;

@layer components {
  /* ── 바깥 틀 — 한 단, 가운데 852px ────────────────── */
  [data-design="v2"] .v2-post {
    padding-block: 18px calc(var(--d-section-gap) * 1.1);
  }
  [data-design="v2"] .v2-post-col {
    max-width: 852px;
    margin-inline: auto;
    counter-reset: v2-psec;
  }

  /* ── 머리 — 분류 칩 · 제목 · 글쓴이 줄 ────────────── */
  [data-design="v2"] .v2-post-head {
    margin-top: 16px;
  }
  [data-design="v2"] .v2-post-kind {
    height: 33px;
    padding-inline: 13px;
    border-color: var(--d-brand-ink);
    border-radius: min(var(--d-radius-button), 6px);
    background: transparent;
    color: var(--d-brand-ink);
    letter-spacing: 0.1em;
  }
  [data-design="v2"] a.v2-post-kind:hover {
    background: var(--d-brand-tint);
  }
  [data-design="v2"] .v2-post-title {
    margin-top: 14px;
    color: var(--d-ink);
    font-size: 25px;
    font-weight: var(--d-title-weight);
    line-height: 1.38;
    letter-spacing: var(--d-title-tracking);
    word-break: keep-all;
  }
  [data-design="v2"] .v2-post-metaline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--d-line);
  }
  [data-design="v2"] .v2-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    color: var(--d-faint);
    font-size: 12.5px;
    line-height: 21px;
  }
  [data-design="v2"] .v2-post-meta strong {
    color: var(--d-ink-2);
    font-weight: 700;
  }
  [data-design="v2"] .v2-post-meta > * + *::before {
    content: "·";
    margin-inline: 10px;
    color: var(--d-faint);
    font-weight: 400;
    opacity: 0.4;
  }
  [data-design="v2"] .v2-post-share {
    flex-shrink: 0;
  }
  [data-design="v2"] .v2-post-cover {
    margin-top: 26px;
  }

  /* ── 핵심 요약 · 핵심 포인트 · 목차 ───────────────── */
  [data-design="v2"] .v2-post-note,
  [data-design="v2"] .v2-toc {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-card);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 14.5px;
    line-height: 1.9;
  }
  [data-design="v2"] .v2-post-cover + .v2-post-note,
  [data-design="v2"] .v2-post-head + .v2-post-note,
  [data-design="v2"] .v2-post-head + .v2-toc {
    margin-top: 26px;
  }
  [data-design="v2"] .v2-post-note--summary {
    border-color: var(--d-brand-line);
    background: var(--d-brand-tint);
  }
  [data-design="v2"] .v2-post-note-title {
    margin-bottom: 6px;
    color: var(--d-brand-deep);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
  }
  [data-design="v2"] .v2-post-note ul {
    padding-left: 1.2em;
    list-style: disc;
  }
  [data-design="v2"] .v2-toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  [data-design="v2"] .v2-toc summary::-webkit-details-marker {
    display: none;
  }
  [data-design="v2"] .v2-toc-mark {
    color: var(--d-faint);
    transition: transform 0.2s;
  }
  [data-design="v2"] .v2-toc[open] .v2-toc-mark {
    transform: rotate(180deg);
  }
  [data-design="v2"] .v2-toc-list {
    margin-top: 10px;
  }

  /* ── 본문 ─────────────────────────────────────────── */
  [data-design="v2"] .v2-post-body {
    margin-top: 32px;
    /* 본문 모양(.prose-content)이 쓰는 변수를 v2 색으로 — 링크 · 줄 · 표 머리 · 사진 모서리 */
    --foreground: var(--d-ink);
    --primary: var(--d-brand-ink);
    --border: var(--d-line);
    --muted: var(--d-bg-alt);
    --muted-foreground: var(--d-muted);
    --radius-m: var(--d-radius-image);
  }

  /* ── 번호 붙은 구역 (자주 묻는 질문 · 출처 · 관련 검색어) ── */
  [data-design="v2"] .v2-psec {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 3px solid var(--d-brand-deep);
  }
  [data-design="v2"] .v2-psec-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--d-line);
  }
  [data-design="v2"] .v2-psec-no {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--d-brand-ink);
    border-radius: 50%;
    color: var(--d-brand-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
  }
  [data-design="v2"] .v2-psec-no::before {
    counter-increment: v2-psec;
    content: counter(v2-psec, decimal-leading-zero);
  }
  [data-design="v2"] .v2-psec-title {
    align-self: center;
    min-width: 0;
    color: var(--d-ink);
    font-size: 20px;
    font-weight: var(--d-title-weight);
    line-height: 1.45;
    letter-spacing: var(--d-title-tracking);
    word-break: keep-all;
  }

  /* 자주 묻는 질문 — Q1~ 펼친 목록 */
  [data-design="v2"] .v2-faqs {
    margin-top: 20px;
    border-top: 2px solid var(--d-brand-deep);
  }
  [data-design="v2"] .v2-faq {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    padding-block: 20px;
    border-bottom: 1px solid var(--d-line);
  }
  [data-design="v2"] .v2-faq-no {
    color: var(--d-brand-line);
    font-size: 17px;
    font-weight: 700;
    line-height: 25.6px;
  }
  [data-design="v2"] .v2-faq-q {
    color: var(--d-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 25.6px;
    letter-spacing: -0.036em;
    word-break: keep-all;
  }
  [data-design="v2"] .v2-faq-a {
    margin-top: 10px;
    color: var(--d-ink-2);
    font-size: 14.5px;
    line-height: 1.85;
    white-space: pre-line;
  }

  /* 출처 — 윗줄이 굵은 카드 */
  [data-design="v2"] .v2-refs {
    display: grid;
    gap: 11px;
    margin-top: 20px;
  }
  [data-design="v2"] .v2-ref {
    display: block;
    height: 100%;
    padding: 16px 17px 18px;
    border: 1px solid var(--d-brand-ink);
    border-top-width: 3px;
    border-radius: 0 0 var(--d-radius-image) var(--d-radius-image);
    background: var(--d-surface);
    transition: background-color 0.15s;
  }
  [data-design="v2"] a.v2-ref:hover {
    background: var(--d-brand-tint);
  }
  [data-design="v2"] .v2-ref-src {
    display: block;
    overflow: hidden;
    color: var(--d-brand-ink);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 19.3px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-design="v2"] .v2-ref-title {
    display: block;
    margin-top: 5px;
    color: var(--d-ink);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 21.8px;
    overflow-wrap: anywhere;
  }

  /* 관련 검색어 — # 칩. 첫 낱말(대표 키워드)은 채운다 */
  [data-design="v2"] .v2-kws {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }
  [data-design="v2"] .v2-kw {
    display: inline-flex;
    align-items: center;
    min-height: 41.5px;
    padding: 6px 14px;
    border: 1px solid var(--d-line);
    border-radius: min(var(--d-radius-button), 7px);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 700;
    line-height: 23.5px;
    transition:
      border-color 0.15s,
      color 0.15s;
  }
  [data-design="v2"] a.v2-kw:hover {
    border-color: var(--d-brand-ink);
    color: var(--d-brand-deep);
  }
  [data-design="v2"] .v2-kw--main,
  [data-design="v2"] a.v2-kw--main:hover {
    border-color: var(--d-brand-deep);
    background: var(--d-brand-deep);
    color: #fff;
  }

  /* ── 면책 고지 ────────────────────────────────────── */
  [data-design="v2"] .v2-disc {
    margin-top: 34px;
    padding: 18px 20px;
    border-left: 3px solid var(--d-line);
    background: var(--d-bg-alt);
    color: var(--d-muted);
    font-size: 12.5px;
    line-height: 21.9px;
    white-space: pre-line;
  }
  [data-design="v2"] .v2-disc strong {
    color: var(--d-ink-2);
    font-weight: 700;
  }
  [data-design="v2"] .v2-disc p + p {
    margin-top: 6px;
  }

  /* ── 상담 상자 ────────────────────────────────────── */
  [data-design="v2"] .v2-pcta {
    overflow: hidden;
    margin-top: 38px;
    padding: 0 22px 34px;
    border-radius: var(--d-radius-card);
    background: var(--d-band-bg);
    color: #fff;
    text-align: center;
  }
  [data-design="v2"] .v2-pcta-rule {
    height: 5px;
    margin: 0 -22px 34px;
    background: linear-gradient(to right, var(--d-brand), var(--d-brand-line));
  }
  [data-design="v2"] .v2-pcta-eyebrow {
    margin-bottom: 10px;
    color: var(--d-brand-line);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 19.3px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  [data-design="v2"] .v2-pcta-title {
    font-size: 20px;
    font-weight: var(--d-title-weight);
    line-height: 1.5;
    letter-spacing: var(--d-title-tracking);
    white-space: pre-line;
    word-break: keep-all;
  }
  [data-design="v2"] .v2-pcta-desc {
    max-width: 600px;
    margin: 12px auto 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.85;
    word-break: keep-all;
  }
  [data-design="v2"] .v2-pcta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
  }
  [data-design="v2"] .v2-pcta-actions .v2-btn {
    min-width: 200px;
    max-width: 100%;
    font-size: 15px;
  }
  [data-design="v2"] .v2-pcta-actions .v2-btn--line {
    background: rgba(255, 255, 255, 0.1);
  }

  /* ── 글쓴 · 검수한 의료진 카드 ────────────────────── */
  [data-design="v2"] .v2-author {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 14px 18px;
    margin-top: 30px;
    padding: 22px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-card);
    background: var(--d-surface);
  }
  [data-design="v2"] .v2-author + .v2-author {
    margin-top: 12px;
  }
  [data-design="v2"] .v2-author-photo {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(176deg, var(--d-brand-tint), var(--d-brand-line));
    color: var(--d-brand-deep);
    font-size: 24px;
    font-weight: 700;
  }
  [data-design="v2"] .v2-author-photo img {
    object-fit: cover;
    object-position: center top;
  }
  [data-design="v2"] .v2-author-role {
    margin-bottom: 2px;
    color: var(--d-brand-ink);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 19.3px;
  }
  [data-design="v2"] .v2-author-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    color: var(--d-ink);
    font-size: 16px;
    line-height: 26.9px;
  }
  [data-design="v2"] .v2-author-name strong {
    font-weight: 700;
  }
  [data-design="v2"] .v2-author-name span {
    color: var(--d-muted);
    font-size: 12.5px;
    font-weight: 500;
  }
  [data-design="v2"] .v2-author-intro {
    display: -webkit-box;
    overflow: hidden;
    max-width: 440px;
    margin-top: 6px;
    color: var(--d-muted);
    font-size: 13.2px;
    line-height: 22.4px;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
  [data-design="v2"] .v2-author-link {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-self: start;
    height: 35px;
    padding-inline: 13px;
    border: 1px solid var(--d-brand-line);
    border-radius: var(--d-radius-button);
    background: var(--d-brand-tint);
    color: var(--d-brand-ink);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
  }
  [data-design="v2"] a.v2-author-link:hover {
    border-color: var(--d-brand-ink);
  }

  /* ── 이전 글 / 다음 글 ────────────────────────────── */
  [data-design="v2"] .v2-adjacent {
    display: grid;
    gap: 12px;
    margin-top: 22px;
  }
  [data-design="v2"] .v2-adj {
    display: block;
    min-width: 0;
    padding: 17px 18px 16px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-card);
    background: var(--d-surface);
    font-weight: 700;
    transition: border-color 0.15s;
  }
  [data-design="v2"] a.v2-adj:hover {
    border-color: var(--d-brand-line);
  }
  [data-design="v2"] .v2-adj--empty {
    display: none;
  }
  [data-design="v2"] .v2-adj--next {
    text-align: right;
  }
  [data-design="v2"] .v2-adj-label {
    display: block;
    color: var(--d-faint);
    font-size: 11px;
    line-height: 18.5px;
    letter-spacing: 0.1em;
  }
  [data-design="v2"] .v2-adj-title {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    color: var(--d-ink);
    font-size: 14.5px;
    line-height: 22.5px;
    word-break: keep-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* ── 함께 읽으면 좋은 글 · 블로그 인기글 · 함께 보면 좋은 콘텐츠 ── */
  [data-design="v2"] .v2-post-readalso,
  [data-design="v2"] .v2-popular {
    margin-top: 40px;
  }
  [data-design="v2"] .v2-post-subtitle {
    color: var(--d-ink);
    font-size: 18px;
    font-weight: var(--d-title-weight);
    line-height: 1.5;
    letter-spacing: var(--d-title-tracking);
  }
  [data-design="v2"] .v2-popular-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
  }
  [data-design="v2"] .v2-popular-item {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-card);
    background: var(--d-surface);
    transition: border-color 0.15s;
  }
  [data-design="v2"] a.v2-popular-item:hover {
    border-color: var(--d-brand-line);
  }
  [data-design="v2"] .v2-popular-thumb {
    flex-shrink: 0;
    width: 56px;
  }
  [data-design="v2"] .v2-popular-title {
    display: -webkit-box;
    overflow: hidden;
    min-width: 0;
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    word-break: keep-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  [data-design="v2"] .v2-post-related {
    margin-top: calc(var(--d-section-gap) * 0.9);
  }

  /* 초점 표시 */
  [data-design="v2"] .v2-ref:focus-visible,
  [data-design="v2"] .v2-kw:focus-visible,
  [data-design="v2"] .v2-adj:focus-visible,
  [data-design="v2"] .v2-author-link:focus-visible,
  [data-design="v2"] .v2-popular-item:focus-visible,
  [data-design="v2"] .v2-toc summary:focus-visible {
    outline: 2px solid var(--d-brand-ink);
    outline-offset: 2px;
  }

  /* ── 발행 전 미리보기 안내 띠 ─────────────────────── */
  [data-design="v2"] .v2-preview-note {
    padding-block: 12px;
    font-size: 13.5px;
    line-height: 1.6;
  }
  [data-design="v2"] .v2-preview-note strong {
    margin-right: 8px;
    font-weight: 700;
  }

  /* ── 넓은 화면 (821px 이상) — 피그마 PF-03 ────────── */
  @media (min-width: 51.3125rem) {
    [data-design="v2"] .v2-post {
      padding-top: 21px;
    }
    [data-design="v2"] .v2-post-head {
      margin-top: 17px;
    }
    [data-design="v2"] .v2-post-title {
      font-size: 38px;
      line-height: 51.7px;
    }
    [data-design="v2"] .v2-post-metaline {
      margin-top: 15px;
      padding-bottom: 22px;
    }
    [data-design="v2"] .v2-post-note,
    [data-design="v2"] .v2-toc {
      padding: 24px 25px;
    }
    [data-design="v2"] .v2-post-body {
      margin-top: 38px;
    }
    [data-design="v2"] .v2-psec {
      margin-top: 52px;
      padding-top: 24px;
    }
    [data-design="v2"] .v2-psec-head {
      gap: 16px;
      padding-bottom: 0;
      min-height: 45px;
    }
    [data-design="v2"] .v2-psec-no {
      width: 44px;
      height: 44px;
      font-size: 15px;
    }
    [data-design="v2"] .v2-psec-title {
      font-size: 24px;
      line-height: 35px;
    }
    [data-design="v2"] .v2-faq {
      grid-template-columns: 60px minmax(0, 1fr);
      padding-block: 22px 20px;
    }
    [data-design="v2"] .v2-faq-no {
      font-size: 19px;
    }
    [data-design="v2"] .v2-faq-q {
      font-size: 16.5px;
    }
    [data-design="v2"] .v2-faq-a {
      font-size: 15px;
      line-height: 27.8px;
    }
    [data-design="v2"] .v2-refs {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    [data-design="v2"] .v2-disc {
      padding: 21px 22px;
    }
    [data-design="v2"] .v2-pcta {
      padding: 0 40px 38px;
    }
    [data-design="v2"] .v2-pcta-rule {
      margin: 0 -40px 39px;
    }
    [data-design="v2"] .v2-pcta-title {
      font-size: 23px;
      line-height: 35px;
    }
    [data-design="v2"] .v2-pcta-desc {
      font-size: 14.5px;
    }
    [data-design="v2"] .v2-pcta-actions {
      flex-direction: row;
      justify-content: center;
    }
    [data-design="v2"] .v2-pcta-actions .v2-btn {
      min-width: 0;
      height: 55px;
      padding-inline: 34px;
    }
    /* 사진 · 글 · 프로필 단추를 한 줄에 */
    [data-design="v2"] .v2-author {
      grid-template-columns: 74px minmax(0, 1fr) auto;
    }
    [data-design="v2"] .v2-author-link {
      grid-column: auto;
      justify-self: end;
    }
    [data-design="v2"] .v2-adjacent {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* 한쪽만 있을 때도 자리를 지킨다(다음 글은 늘 오른쪽) */
    [data-design="v2"] .v2-adj--empty {
      display: block;
      visibility: hidden;
    }
    [data-design="v2"] .v2-popular-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
  }
}

/*
 * ── 본문 글자 (층 밖) ─────────────────────────────────
 * .prose-content(shared/styles/prose.css)가 층 밖 규칙이라 여기도 층 밖에 둔다. 닿는 곳은 v2 글 상세의 본문뿐이다.
 * 맨 바깥 소제목(h2)만 번호 붙은 구역 머리로 그린다 — 본문 안에 직접 넣은 HTML(다른 틀 안의 소제목)은 그 글이 정한 모양 그대로 둔다.
 * 글에 직접 넣은 인라인 스타일은 여전히 이 규칙보다 먼저다.
 */
[data-design="v2"] .v2-post-body.prose-content {
  color: var(--d-ink-2);
  font-size: 15.5px;
  line-height: 1.85;
}
[data-design="v2"] .v2-post-body.prose-content > h2,
[data-design="v2"] .v2-post-body.prose-content > .wb-faq > h2,
[data-design="v2"] .v2-post-body.prose-content > .wb-refs > h2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 44px 0 18px;
  padding: 20px 0 12px;
  border-top: 3px solid var(--d-brand-deep);
  border-bottom: 1px solid var(--d-line);
  color: var(--d-ink);
  font-size: 20px;
  font-weight: var(--d-title-weight);
  line-height: 36px;
  letter-spacing: var(--d-title-tracking);
  word-break: keep-all;
}
[data-design="v2"] .v2-post-body.prose-content > h2:first-child {
  margin-top: 0;
}
[data-design="v2"] .v2-post-body.prose-content > h2::before,
[data-design="v2"] .v2-post-body.prose-content > .wb-faq > h2::before,
[data-design="v2"] .v2-post-body.prose-content > .wb-refs > h2::before {
  counter-increment: v2-psec;
  content: counter(v2-psec, decimal-leading-zero);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border: 2px solid var(--d-brand-ink);
  border-radius: 50%;
  color: var(--d-brand-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
[data-design="v2"] .v2-post-body.prose-content > h3 {
  margin: 28px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--d-line);
  color: var(--d-brand-deep);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
[data-design="v2"] .v2-post-body.prose-content > p > strong,
[data-design="v2"] .v2-post-body.prose-content > p > b {
  color: var(--d-ink);
}
/* 함께 보면 좋은 콘텐츠(기존 부품)의 제목 — v2 의 구역 제목 크기로 */
[data-design="v2"] .v2-post-related h2 {
  color: var(--d-ink);
  font-size: 20px;
  font-weight: var(--d-title-weight);
  line-height: 1.45;
  letter-spacing: var(--d-title-tracking);
}
@media (min-width: 51.3125rem) {
  [data-design="v2"] .v2-post-body.prose-content {
    font-size: 16px;
    line-height: 29.6px;
  }
  [data-design="v2"] .v2-post-body.prose-content > h2,
  [data-design="v2"] .v2-post-body.prose-content > .wb-faq > h2,
  [data-design="v2"] .v2-post-body.prose-content > .wb-refs > h2 {
    gap: 16px;
    margin-top: 52px;
    padding: 24px 0 0;
    min-height: 73px;
    font-size: 24px;
    line-height: 44px;
  }
  [data-design="v2"] .v2-post-body.prose-content > h2::before,
  [data-design="v2"] .v2-post-body.prose-content > .wb-faq > h2::before,
  [data-design="v2"] .v2-post-body.prose-content > .wb-refs > h2::before {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }
  [data-design="v2"] .v2-post-body.prose-content > h3 {
    font-size: 17px;
  }
  [data-design="v2"] .v2-post-related h2 {
    font-size: 24px;
  }
}

/*
 * ── 본문 블록 (층 밖) ─────────────────────────────────
 * 관리자 블록 편집기로 넣은 표 · 자주 묻는 질문 · 출처 · 안내 배너(CTA) · 캐러셀.
 * 기존 모양은 entities/post/lib/blocks-css.ts 의 BLOCK_CSS(글 상세가 <style> 로 싣는 층 밖 규칙)와 prose.css 다 —
 * 여기서는 v2 본문(.v2-post-body) 안에서만 그 모양을 덮는다. 블록의 HTML · 동작(접기 · 자동 넘김)은 그대로다.
 */

/* 표 — 머리줄은 흰 바탕 + 짙은 브랜드색 글자 + 아래 굵은 줄, 칸은 가로줄만 (피그마 PF-03).
   본문 맨 바깥의, 클래스가 없는 표(편집기로 넣은 표 · 비교 표)만 — 직접 넣은 HTML 의 표(다른 틀 안에 있거나
   그 글의 클래스로 꾸민 표)는 그 글이 정한 모양 그대로 둔다. */
[data-design="v2"] .v2-post-body.prose-content > table:not([class]) th,
[data-design="v2"] .v2-post-body.prose-content > table:not([class]) td {
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid var(--d-line);
}
[data-design="v2"] .v2-post-body.prose-content > table:not([class]) tr:first-child > th {
  border-bottom: 2px solid var(--d-brand-deep);
  background: transparent;
  color: var(--d-brand-deep);
  font-weight: 700;
}
/* 줄 머리(첫 칸의 기준 이름) — 옅은 바탕 */
[data-design="v2"] .v2-post-body.prose-content > table:not([class]) tr:not(:first-child) > th {
  background: var(--d-bg-alt);
  color: var(--d-ink);
}
/* 머리줄 없이 첫 칸만 머리인 표 — 첫 줄도 줄 머리 모양으로 */
[data-design="v2"] .v2-post-body.prose-content > table:not([class]) tr:first-child:has(> td) > th {
  border-bottom: 1px solid var(--d-line);
  background: var(--d-bg-alt);
  color: var(--d-ink);
}

/* 자주 묻는 질문 · 출처 (본문 안 자리) — 제목은 위의 번호 붙은 소제목과 같은 모양이다. 여기는 간격만 */
[data-design="v2"] .v2-post-body.prose-content > .wb-faq,
[data-design="v2"] .v2-post-body.prose-content > .wb-refs {
  margin: 44px 0 32px;
}
[data-design="v2"] .v2-post-body.prose-content > .wb-faq:first-child,
[data-design="v2"] .v2-post-body.prose-content > .wb-refs:first-child {
  margin-top: 0;
}
[data-design="v2"] .v2-post-body.prose-content > .wb-faq > h2,
[data-design="v2"] .v2-post-body.prose-content > .wb-refs > h2 {
  margin-top: 0;
}
/* 질문 목록 — 테두리 상자 · 기본 삼각형 대신 본문 아래 FAQ(.v2-faqs)와 같은 줄 + Q1 · Q2 번호 (피그마 PF-03).
   접고 펴는 것은 그대로다(오른쪽의 + / −). */
[data-design="v2"] .v2-post-body .wb-faq-list {
  counter-reset: v2-faq;
  margin-top: 20px;
  border: 0;
  border-top: 2px solid var(--d-brand-deep);
  border-radius: 0;
}
[data-design="v2"] .v2-post-body .wb-faq-list details {
  padding: 0;
  border-bottom: 1px solid var(--d-line);
}
[data-design="v2"] .v2-post-body .wb-faq-list details + details {
  border-top: 0;
}
[data-design="v2"] .v2-post-body .wb-faq-list summary {
  position: relative;
  display: block;
  padding: 20px 34px 20px 40px;
  color: var(--d-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  letter-spacing: -0.036em;
  word-break: keep-all;
  list-style: none;
}
[data-design="v2"] .v2-post-body .wb-faq-list summary::-webkit-details-marker {
  display: none;
}
[data-design="v2"] .v2-post-body .wb-faq-list summary::before {
  counter-increment: v2-faq;
  content: "Q" counter(v2-faq);
  position: absolute;
  top: 20px;
  left: 0;
  color: var(--d-brand-line);
  font-size: 17px;
  letter-spacing: 0;
}
/* 질문 글자는 «Q. …» 로 시작한다(entities/post/lib/blocks.ts) — 번호(Q1)를 따로 그리므로 맨 앞의 «Q.» 는 감춘다 */
[data-design="v2"] .v2-post-body .wb-faq-list summary::first-letter {
  font-size: 0;
}
[data-design="v2"] .v2-post-body .wb-faq-list summary::after {
  content: "+";
  position: absolute;
  top: 20px;
  right: 6px;
  color: var(--d-faint);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
[data-design="v2"] .v2-post-body .wb-faq-list details[open] > summary::after {
  content: "\2212";
}
[data-design="v2"] .v2-post-body .wb-faq-list summary:focus-visible {
  outline: 2px solid var(--d-brand-ink);
  outline-offset: -2px;
}
[data-design="v2"] .v2-post-body .wb-faq-list details p {
  margin: 0;
  padding: 0 34px 20px 40px;
  color: var(--d-ink-2);
  font-size: 14.5px;
  line-height: 1.85;
}

/* 안내 배너(CTA) — 파랑 → 보라 그라데이션 · 각진 단추 대신 글 아래 상담 상자(.v2-pcta)와 같은 톤:
   상담 띠 색 바탕 + 위쪽 가는 줄, 카드 모서리, 첫 단추는 흰 바탕 · 둘째는 흰 테두리, 단추 모서리 */
[data-design="v2"] .v2-post-body [data-wb-block="cta"] {
  margin: 38px 0;
  padding: 31px 22px 28px;
  border-radius: var(--d-radius-card);
  background:
    linear-gradient(to right, var(--d-brand), var(--d-brand-line)) top / 100% 5px no-repeat,
    var(--d-band-bg);
  color: #fff;
}
[data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="title"] {
  font-size: 20px;
  font-weight: var(--d-title-weight);
  line-height: 1.5;
  letter-spacing: var(--d-title-tracking);
  word-break: keep-all;
}
[data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="text"] {
  margin-top: 8px;
  color: rgb(255 255 255 / 0.7);
  font-size: 14px;
  line-height: 1.85;
  opacity: 1;
  word-break: keep-all;
}
[data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="actions"] {
  gap: 10px;
  margin-top: 20px;
}
[data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="actions"] a {
  justify-content: center;
  min-height: 44px;
  padding: 6px 20px;
  border: 1px solid #fff;
  border-radius: var(--d-radius-button);
  background: #fff;
  color: var(--d-brand-deep);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
[data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="actions"] a:hover {
  background: rgb(255 255 255 / 0.9);
}
[data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="actions"] a + a {
  border-color: rgb(255 255 255 / 0.34);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}
[data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="actions"] a + a:hover {
  border-color: rgb(255 255 255 / 0.7);
  background: rgb(255 255 255 / 0.16);
}
[data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="actions"] a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (min-width: 51.3125rem) {
  [data-design="v2"] .v2-post-body.prose-content > .wb-faq,
  [data-design="v2"] .v2-post-body.prose-content > .wb-refs {
    margin-top: 52px;
  }
  [data-design="v2"] .v2-post-body.prose-content > .wb-faq:first-child,
  [data-design="v2"] .v2-post-body.prose-content > .wb-refs:first-child,
  [data-design="v2"] .v2-post-body.prose-content > .wb-faq > h2,
  [data-design="v2"] .v2-post-body.prose-content > .wb-refs > h2 {
    margin-top: 0;
  }
  [data-design="v2"] .v2-post-body .wb-faq-list summary {
    padding: 22px 40px 20px 60px;
    font-size: 16.5px;
  }
  [data-design="v2"] .v2-post-body .wb-faq-list summary::before {
    top: 22px;
    font-size: 19px;
  }
  [data-design="v2"] .v2-post-body .wb-faq-list summary::after {
    top: 22px;
  }
  [data-design="v2"] .v2-post-body .wb-faq-list details p {
    padding: 0 40px 20px 60px;
    font-size: 15px;
    line-height: 27.8px;
  }
  [data-design="v2"] .v2-post-body [data-wb-block="cta"] {
    padding: 39px 40px 36px;
  }
  [data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="title"] {
    font-size: 23px;
    line-height: 35px;
  }
  [data-design="v2"] .v2-post-body [data-wb-block="cta"] [data-wb-cta="text"] {
    font-size: 14.5px;
  }
}

/*
 * 캐러셀의 넘김 단추 — 떠 있는 «퀵메뉴» 단추(화면 오른쪽 아래에 고정)가 지나는 줄을 피한다.
 * 기존 자리(사진 위 오른쪽 끝의 «›»)는 본문 오른쪽 끝이 퀵메뉴가 놓인 세로줄과 겹치는 폭(1280px 미만)에서
 * 캐러셀이 화면 아래쪽에 있을 때 퀵메뉴에 덮여 누를 수 없다. 그 폭에서는 사진 · 설명 아래 가운데에 «‹ ›» 한 쌍으로 내린다
 * (홈 인물 넘기기 .v2-pager-btn 과 같은 모양). 퀵메뉴 부품은 건드리지 않는다.
 */
@media (max-width: 79.9375rem) {
  [data-design="v2"] .v2-post-body .wb-carousel {
    margin-bottom: 1.5rem;
    padding-bottom: 26px;
  }
  [data-design="v2"] .v2-post-body .wb-carousel-nav {
    top: auto;
    bottom: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-radius-button);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 15px;
    transform: none;
  }
  [data-design="v2"] .v2-post-body .wb-carousel-nav:hover {
    border-color: var(--d-brand-line);
    background: var(--d-brand-tint);
  }
  [data-design="v2"] .v2-post-body .wb-carousel-nav.wb-prev {
    left: calc(50% - 43px);
  }
  [data-design="v2"] .v2-post-body .wb-carousel-nav.wb-next {
    right: auto;
    left: calc(50% + 5px);
  }
}

/*
 * 캐러셀 — 휴대폰 배치(820px 이하)에서는 사진을 1장씩 (피그마 요구사항 H-07 «캐러셀 1장씩»).
 * 기존 모양(entities/post/lib/blocks-css.ts)은 어느 폭에서나 2장씩 보이고 홀수 번째 사진에서만 멈춘다. 그 파일은 기존 화면과
 * 같이 쓰므로 그대로 두고, v2 본문 안에서만 한 장이 줄 전체를 쓰고 사진마다 멈추게 덮는다.
 * 사진이 3장 이상인 묶음만이다 — 넘김 단추와 자동 넘김이 붙는 것이 3장부터라(carousel.ts), 2장짜리를 1장씩으로 바꾸면
 * 둘째 사진이 화면 밖에 숨고 넘길 단추도 없다. 2장 · 1장짜리는 지금처럼 한 화면에 다 보인다.
 * 단추 · 자동 넘김은 «보이는 폭 + 사이 간격» 만큼 움직이므로 고치지 않아도 한 장씩 넘어간다.
 */
@media (max-width: 51.25rem) {
  [data-design="v2"] .v2-post-body [data-wb-block="carousel"] > figure:first-child:nth-last-child(n + 3),
  [data-design="v2"] .v2-post-body [data-wb-block="carousel"] > figure:first-child:nth-last-child(n + 3) ~ figure {
    flex-basis: 100%;
    scroll-snap-align: start;
  }
}