/* ==========================================================================
   블로그 화면 — 네이버 블로그 골격 (CLAUDE.md §11)

     상단 커버 → 좌측 프로필·카테고리 | 중앙 글 | 우측 상담 레일

   네이버 블로그가 오래 살아남은 이유는 화려해서가 아니라 읽기 쉬워서다.
   장식을 넣지 않는다. 색은 네이비(기본) + 주황(행동) 둘뿐이다.
   ========================================================================== */

/* ----- 커버 ------------------------------------------------------------ */

/* 상단 커버는 소개 첫 화면(.hero-gold, site.css)을 그대로 쓴다. 제목이 p 라서 여백만 없앤다 */
.blog-hero .hero-title { margin: 0; }
/* 글이 바로 보이도록 낮게, 글자는 위아래 가운데 (2026-10-14: 높이 270px, 회사소개 버튼 삭제) */
.blog-hero.hero-gold { min-height: 270px; align-items: center; }
.blog-hero.hero-gold .hero-inner { padding-top: 24px; padding-bottom: 24px; }
/* 제목 위 영문 문구 — 상담 페이지 상단과 같은 모양 (2026-10-14) */
.blog-hero .ch-eyebrow { width: fit-content; margin: 0 0 30px; font-size: 11px; font-weight: 600; letter-spacing: .32em; color: rgba(255, 255, 255, .62); }
.blog-hero.hero-gold .ht-brand { font-size: clamp(42px, 6.2vw, 84px); }
.blog-hero.hero-gold .ht-main { font-size: clamp(26px, 3.8vw, 46px); }
.blog-hero .hero-scroll { display: none; }
/* 영문 문구 아래 금색 선 — 영문 문구 폭만큼만 긋고, 빛이 좌우로 왔다갔다 한다 (2026-10-15) */
.blog-hero .ht-brand::before { display: none; }
.blog-hero .ch-eyebrow::after {
  content: ''; display: block; width: calc(100% - .32em); height: 3px; margin-top: 10px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 205, .98), transparent) no-repeat, #a98443;
  background-size: 34% 100%, 100% 100%;
  background-position: -20% 0, 0 0;
  animation: heroBarShuttle 2.2s ease-in-out infinite alternate;
}
@keyframes heroBarShuttle { from { background-position: -20% 0, 0 0; } to { background-position: 120% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .blog-hero .ch-eyebrow::after { animation: none; } }
/* '메디아 컨설팅'과 '개원의가 만든 진짜 개원 컨설팅'은 더 붙인다 */
.blog-hero.hero-gold .hero-title { gap: 0; line-height: 1.12; }
.blog-hero.hero-gold .ht-main { margin-top: -.12em; }
.blog-hero.hero-gold .hero-title { margin-top: 0; }
@media (min-width: 641px) {
  .blog-hero.hero-gold .ht-main { white-space: nowrap; }
}
/* 커버 아무 곳이나 누르면 첫 화면으로 간다 */
.blog-hero-home { position: absolute; inset: 0; z-index: 2; }
.blog-hero.hero-gold .hero-inner { z-index: 3; pointer-events: none; }

/* ----- 2단 골격, 우측 상담 레일은 2026-09-30 삭제 -------------------------------------------------- */

.blog-shell {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 28px) clamp(60px, 9vw, 110px);
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 44px);
  align-items: start;
}
/* 좌우 패널은 글을 따라 내려오지 않는다 — 본문 가독성을 해쳤다 (2026-09-18) */
.blog-side { position: static; }

@media (max-width: 1080px) {
  .blog-shell { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .blog-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .blog-side { position: static; order: 2; margin-top: 16px; }
  .blog-main { order: 1; }

  /* 모바일 첫 화면에서 커버가 화면을 다 잡아먹어 글이 안 보였다 (2026-10-10 대표 요청).
     커버를 빼고 상단 바를 처음부터 고정해, 열자마자 글 목록·제목·본문이 보이게 한다. */
  .is-blog .blog-hero { display: none; }
  .is-blog .mnav { transform: none; }
  body.is-blog { padding-top: 52px; }
  .is-blog .blog-shell { padding-top: 12px; padding-left: 10px; padding-right: 10px; }
  .is-blog .post-progress { top: 52px; }
  /* 글 위 제목 목록도 뺀다 (2026-10-10 대표 요청). 다른 글은 상단 바 [글 목록] 으로 간다.
     /posts 는 목록이 곧 내용이라 .is-post 가 붙은 글 화면에서만 숨긴다. */
  .is-post .post-list { display: none; }
}

/* ----- 좌측 프로필 ------------------------------------------------------ */
/* 블로그 홈 스타일 (2026-09-30) — 옅은 회색 바탕 위 흰 카드, 둥근 프로필 */

body.is-blog { background: #f4f5f7; }
.blog-main,
.side-profile {
  background: #fff;
  border: 1px solid #e7e9ed;
  border-radius: 14px;
}
.blog-main { padding: clamp(22px, 3vw, 36px); }

.side-profile { padding: 28px 20px 22px; text-align: center; }
.side-avatar {
  display: grid;
  place-items: center;
  width: 104px; height: 104px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 6px 18px rgba(11, 22, 36, .16);
  transition: transform .18s;
}
.side-avatar:hover { transform: scale(1.03); }
.side-avatar img { width: 100%; height: 100%; object-fit: cover; }
.side-avatar .side-avatar-logo { width: 70%; height: auto; object-fit: contain; }
.side-name { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.side-handle { margin: 3px 0 0; font-size: 13px; color: var(--muted-2); }
.side-bio { margin: 16px 0 0; text-align: left; }
.side-bio p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--muted);
  word-break: keep-all;
}
.side-contact { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.side-cta { width: 100%; margin-top: 18px; padding: 12px 10px; font-size: 14px; border-radius: 8px; }

/* ----- 본문 위 글 목록 --------------------------------------------------- */

.post-list {
  display: block;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(30px, 5vw, 46px);
}
.post-list-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.post-list-row:last-child { border-bottom: 0; }
.post-list-row .t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-list-row time { flex: 0 0 auto; font-size: 12.5px; color: var(--muted-2); }
a.post-list-row:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.post-list-row.on { font-weight: 800; }
.post-list-row.on .t::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--orange);
  vertical-align: middle;
}

/* ----- 글 ---------------------------------------------------------------- */

.post-progress {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  height: 2px;
  z-index: 69;
  pointer-events: none;
}
.post-progress span {
  display: block;                 /* 인라인 요소에는 width 가 먹지 않는다 (CLAUDE.md §7-2) */
  width: 0;
  height: 100%;
  background: var(--orange);
}

.post-title {
  margin: 0 0 18px;
  font-size: clamp(24px, 4.4vw, 34px);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -.035em;
  word-break: keep-all;
}
.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted-2);
}
.post-byline-mark {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
}
.post-byline-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-byline-name { font-weight: 700; color: var(--ink); }

.post-body {
  padding-top: clamp(26px, 4vw, 38px);
  font-size: clamp(16px, 3.9vw, 17px);
  line-height: 1.88;
  color: #2b333d;
  /* 한글은 글자 사이에서도 줄을 바꾼다(영문·숫자 단어는 통째로). keep-all + 양쪽 맞춤이면 줄이 일찍
     끊기고 그 빈자리를 띄어쓰기가 떠안아 칸이 제멋대로 벌어졌다 (2026-10-15 대표 지적) */
  word-break: normal;
  overflow-wrap: anywhere;
  letter-spacing: -.015em;
  /* 왼쪽 정렬 문단은 양쪽 맞춤 — 오른쪽 끝이 들쭉날쭉하지 않게 (2026-10-15 대표 요청).
     가운데·오른쪽 정렬(.al-*)은 그대로 덮어쓴다. 글쓰기 화면(admin.css .doc)도 같다 */
  text-align: justify;
  /* 남는 폭을 띄어쓰기에만 몰지 않고 글자 사이에 고르게 나눈다. 큰 글씨 줄에서 칸이 벌어지던 것 방지 */
  text-justify: inter-character;
}
/* 글자 사이 나눔을 못 하는 브라우저(아이폰 사파리 등)는 띄어쓰기가 벌어지느니 왼쪽 정렬로 둔다.
   한글이 글자 사이에서 줄을 바꾸므로 오른쪽 끝은 한 글자 이내로 맞는다 */
@supports not (text-justify: inter-character) { .post-body { text-align: left; } }
.post-body > * { max-width: 100%; }
/* 가운데·오른쪽 정렬은 짧은 강조 줄이 대부분이라 단어를 통째로 넘긴다 */
.post-body .al-center, .post-body .al-right, .post-body h2, .post-body h3 { word-break: keep-all; }
.post-body h2 {
  font-size: clamp(19px, 4.3vw, 22px);
  font-weight: 800;
  line-height: 1.46;
  letter-spacing: -.03em;
  margin: clamp(42px, 7vw, 58px) 0 12px;
  color: var(--ink);
}
.post-body h3 {
  font-size: clamp(17px, 4vw, 18.5px);
  font-weight: 700;
  line-height: 1.52;
  margin: clamp(30px, 5vw, 40px) 0 10px;
  color: var(--ink);
}
.post-body p { margin: 0 0 22px; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 1.15em; }
.post-body li { margin-bottom: 7px; }
.post-body li::marker { color: #b9c2cd; }
.post-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.post-body a:hover { color: var(--orange); }
.post-body strong { font-weight: 700; color: var(--ink); }
.post-body img { display: block; width: 100%; height: auto; border-radius: 4px; margin: 28px auto; }
/* 글쓰기 화면에서 크기를 줄인 사진은 style="width:N%" 로 들어온다. 휴대폰에서 너무 작아지지 않게 하한을 둔다 */
.post-body img[style] { max-width: 100%; min-width: min(100%, 240px); }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: clamp(34px, 6vw, 48px) 0; }
.post-body blockquote {
  margin: 26px 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--ink);
  color: #48525e;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code { font-size: .9em; background: #f2f5f8; border-radius: 4px; padding: 2px 6px; }
.post-body pre { background: #f7f9fb; border-radius: 6px; padding: 16px; overflow-x: auto; margin: 0 0 22px; }
.post-body pre code { background: none; padding: 0; }
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93em;
  margin: 0 0 22px;
  display: block;
  overflow-x: auto;      /* 좁은 화면에서 표가 문서 폭을 밀지 않게 (CLAUDE.md §5) */
}
.post-body th, .post-body td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.post-body th { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ----- 상담 배너 — 본문 중간({{cta}})과 글 끝 ------------------------------ */
/* 어두운 명함 사진 위 왼쪽 정렬, 골드 제목 (2026-09-30 레퍼런스) */

.lead-box {
  position: relative;
  overflow: hidden;
  margin: clamp(34px, 6vw, 46px) 0;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #0b0c0e 0%, #0b0c0e 30%, rgba(11, 12, 14, .9) 50%, rgba(11, 12, 14, .35) 74%, rgba(11, 12, 14, .1) 100%),
    url(/assets/img/hero-card.webp) right 45% / auto 118% no-repeat;
  background-color: #0b0c0e;
  text-align: left;
}
.lead-box-end { margin-bottom: 0; }
.lead-box-in { position: relative; padding: clamp(28px, 4.4vw, 44px) clamp(24px, 4.4vw, 44px); max-width: 58%; }
.lead-box-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .32em;
  color: rgba(255, 255, 255, .62);
}
.lead-box-eyebrow::after {
  content: '';
  display: block;
  width: 28px; height: 1.5px;
  margin: 14px 0 18px;
  background: #d2ad6e;
}
.lead-box-text {
  margin: 0 0 22px;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.03em;
  color: #fff;
  word-break: keep-all;
}
.lead-box-text em { font-style: normal; color: #d2ad6e; }
.lead-box-sub {
  margin: 18px 0 0;
  font-size: clamp(13px, 1.4vw, 14.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  word-break: keep-all;
}
.lead-box .btn { padding: 14px 26px; font-size: 15px; border-radius: 6px; }
.lead-box .btn::after { content: '→'; font-weight: 700; transition: transform .18s; }
.lead-box .btn:hover::after { transform: translateX(3px); }
@media (max-width: 640px) {
  .lead-box-in { max-width: none; }
  .lead-box {
    background:
      linear-gradient(180deg, rgba(11, 12, 14, .55) 0%, rgba(11, 12, 14, .88) 45%, #0b0c0e 100%),
      url(/assets/img/hero-card.webp) 70% center / cover no-repeat;
  }
  .lead-box .btn { width: 100%; }
}

/* ----- 빈 상태 ----------------------------------------------------------- */

.posts-empty { padding: clamp(40px, 8vw, 70px) 0; text-align: center; }
.posts-empty p { color: var(--muted-2); margin: 0 0 18px; }

/* 터치 기기 탭 영역 46px 이상 (CLAUDE.md §5) */
@media (hover: none) {
  .post-list-row { padding-top: 14px; padding-bottom: 14px; }
}

/* ----- 본문 글자 크기 ---------------------------------------------------- */
/* 에디터 툴바에서 고른 크기가 <span class="fs-*"> 로 들어온다. */

.post-body .fs-sm { font-size: .88em; }
.post-body .fs-lg { font-size: 1.18em; }
.post-body .fs-xl { font-size: 1.42em; font-weight: 700; letter-spacing: -.02em; }
/* 숫자 크기(px) — 툴바 드롭다운 13~60. 목록은 admin/index.html 의 #fSize 와 같아야 한다 */
.post-body .fs-13 { font-size: 13px; }
.post-body .fs-14 { font-size: 14px; }
.post-body .fs-15 { font-size: 15px; }
.post-body .fs-16 { font-size: 16px; }
.post-body .fs-17 { font-size: 17px; }
.post-body .fs-18 { font-size: 18px; }
.post-body .fs-20 { font-size: 20px; }
.post-body .fs-22 { font-size: 22px; }
.post-body .fs-24 { font-size: 24px; letter-spacing: -.02em; }
.post-body .fs-26 { font-size: 26px; letter-spacing: -.02em; }
.post-body .fs-28 { font-size: 28px; letter-spacing: -.02em; }
.post-body .fs-32 { font-size: 32px; letter-spacing: -.02em; }
.post-body .fs-36 { font-size: 36px; letter-spacing: -.02em; }
.post-body .fs-40 { font-size: 40px; letter-spacing: -.02em; }
.post-body .fs-44 { font-size: 44px; letter-spacing: -.02em; line-height: 1.3; }
.post-body .fs-48 { font-size: 48px; letter-spacing: -.02em; line-height: 1.3; }
.post-body .fs-52 { font-size: 52px; letter-spacing: -.02em; line-height: 1.3; }
.post-body .fs-56 { font-size: 56px; letter-spacing: -.02em; line-height: 1.3; }
.post-body .fs-60 { font-size: 60px; letter-spacing: -.02em; line-height: 1.3; }

/* ----- 인용구 6종 (네이버 블로그와 같은 형태) ----------------------------- */

.post-body .q { margin: 26px 0; padding: 0; border: 0; color: var(--ink); }
.post-body .q p { margin: 0; line-height: 1.85; word-break: keep-all; }
.post-body .q cite {
  display: block;
  margin-top: 10px;
  font-size: .86em;
  font-style: normal;
  color: var(--muted-2);
}

/* 따옴표 */
.post-body .q-quote { text-align: center; padding: 6px 0; }
.post-body .q-quote::before, .post-body .q-quote::after {
  display: block;
  color: #c5cdd8;
  font-size: 24px;
  line-height: 1;
  font-family: Georgia, serif;
}
.post-body .q-quote::before { content: '\201C'; margin-bottom: 10px; }
.post-body .q-quote::after { content: '\201D'; margin-top: 10px; }

/* 버티컬 라인 */
.post-body .q-line { border-left: 3px solid var(--ink); padding: 2px 0 2px 18px; }

/* 말풍선 */
.post-body .q-bubble {
  position: relative;
  border: 1px solid #d3dae3;
  border-radius: 4px;
  padding: 18px 20px;
  background: #fff;
}
.post-body .q-bubble::before, .post-body .q-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 34px;
  border: 9px solid transparent;
}
.post-body .q-bubble::before { border-top-color: #d3dae3; }
.post-body .q-bubble::after { border-top-color: #fff; margin-top: -1.5px; }

/* 라인 & 따옴표 */
.post-body .q-lineq {
  text-align: center;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 22px 6px 20px;
}
.post-body .q-lineq::before {
  content: '\201C';
  display: block;
  margin-bottom: 8px;
  color: #c5cdd8;
  font-size: 24px;
  line-height: 1;
  font-family: Georgia, serif;
}

/* 포스트잇 */
.post-body .q-postit {
  position: relative;
  background: #fdf6d8;
  padding: 20px 22px;
  border-radius: 2px;
}
.post-body .q-postit::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  border-width: 0 0 18px 18px;
  border-style: solid;
  border-color: transparent transparent #fff #eadfae;
}

/* 프레임 */
.post-body .q-frame { padding: 20px 22px; border: 1px solid var(--ink); }

/* ----- 버튼 — 검정 바탕 + 골드 글씨 (2026-09-30) ------------------------- */
/* 커버의 골드 [메디아 회사소개] 버튼은 그대로 둔다 */
.is-blog .mnav-cta {
  background: #0b0c0e;
  color: #d2ad6e;
  border: 1px solid #d2ad6e;
  box-shadow: none;
}
.is-blog .mnav-cta:hover {
  background: #d2ad6e;
  color: #0b0c0e;
  transform: none;
}

/* ----- 글 안 상담 배너 버튼 — 눈에 띄게: 황금 그라데이션 + 빛 번쩍임 + 퍼지는 링 (2026-10-14) ----- */
.is-blog .lead-box .btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fff1b8 0%, #f6cf5a 34%, #e0a21b 68%, #c9890f 100%);
  color: #2a1c02;
  border: 0;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 10px 28px rgba(224, 162, 27, .55);
  animation: leadBtnPulse 2.4s ease-out infinite;
}
.is-blog .lead-box .btn::before {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: leadBtnShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
.is-blog .lead-box .btn:hover {
  background: linear-gradient(135deg, #fff6cf 0%, #ffdb6e 34%, #f0b52a 68%, #d99a14 100%);
  color: #2a1c02;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(240, 181, 42, .7);
}
@keyframes leadBtnPulse {
  0%   { box-shadow: 0 10px 28px rgba(224, 162, 27, .55), 0 0 0 0 rgba(246, 207, 90, .65); }
  70%  { box-shadow: 0 10px 28px rgba(224, 162, 27, .55), 0 0 0 16px rgba(246, 207, 90, 0); }
  100% { box-shadow: 0 10px 28px rgba(224, 162, 27, .55), 0 0 0 0 rgba(246, 207, 90, 0); }
}
@keyframes leadBtnShine {
  0%, 55% { left: -70%; }
  100%    { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .is-blog .lead-box .btn,
  .is-blog .lead-box .btn::before { animation: none; }
}

/* ----- 좌측 프로필 상담신청 버튼 — 검정 바탕 + 금빛이 테두리를 따라 반짝이며 도는 효과 + 빛이 슈웅 지나가는 띠 (2026-10-14) ----- */
@property --sideAng { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.is-blog .side-cta {
  position: relative;
  overflow: hidden;
  background: #0b0c0e;
  color: #f0cf85;
  border: 0;
  padding: 13.5px 11.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1.5px #a98443;
}
/* 빛이 슈웅— 하고 지나가는 띠 (왼쪽에서 오른쪽으로 빠르게, 한 번 지나가면 잠깐 쉰다) */
.is-blog .side-cta::before {
  content: '';
  position: absolute;
  top: -20%; left: 0;
  width: 55%; height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 214, 120, 0) 18%, rgba(255, 232, 160, .38) 40%, rgba(255, 255, 255, .95) 50%, rgba(255, 232, 160, .38) 60%, rgba(255, 214, 120, 0) 82%, transparent 100%);
  transform: translateX(-220%) skewX(-24deg);
  animation: sideCtaSweep 2.8s cubic-bezier(.55, 0, .25, 1) infinite;
  pointer-events: none;
}
/* 테두리띠 — 반짝이는 황금빛이 테두리를 따라 한 바퀴 돈다 */
.is-blog .side-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--sideAng), rgba(255, 217, 120, 0) 0deg, rgba(255, 217, 120, 0) 190deg, #ffd978 285deg, #fffbe6 320deg, #ffd978 345deg, rgba(255, 217, 120, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: sideCtaSpin 2.4s linear infinite;
  pointer-events: none;
}
.is-blog .side-cta:hover {
  background: #0b0c0e;
  color: #ffe3a1;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px #f0cf85;
}
@keyframes sideCtaSweep {
  0%       { transform: translateX(-220%) skewX(-24deg); }
  28%      { transform: translateX(440%) skewX(-24deg); }
  100%     { transform: translateX(440%) skewX(-24deg); }
}
@keyframes sideCtaSpin {
  to { --sideAng: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .is-blog .side-cta::before,
  .is-blog .side-cta::after { animation: none; }
}

/* ----- 모바일 플로팅 상담신청 버튼 — 우측 하단 고정 (2026-10-14 대표 요청) ----- */
.fab-cta { display: none; }
@media (max-width: 800px) {
  .fab-cta {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 79;
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff1b8 0%, #f6cf5a 34%, #e0a21b 68%, #c9890f 100%);
    color: #2a1c02;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 0 rgba(246, 207, 90, .6);
    animation: fabPulse 2.4s ease-out infinite;
  }
  .fab-cta:active { transform: scale(.95); }
}
@keyframes fabPulse {
  0%   { box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 0 rgba(246, 207, 90, .6); }
  70%  { box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 14px rgba(246, 207, 90, 0); }
  100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 0 rgba(246, 207, 90, 0); }
}
@media (prefers-reduced-motion: reduce) { .fab-cta { animation: none; } }

/* 모바일에서는 프로필 카드가 글 끝 상담 배너 바로 아래에 붙어 상담 버튼이 두 번 연달아 보였다.
   프로필 쪽 버튼은 모바일에서 뺀다 (2026-10-15 대표 요청). PC 좌측 프로필은 그대로 */
@media (max-width: 800px) {
  .is-blog .side-cta { display: none; }
}